/* tempctl – Markenfarben und Komponenten auf Basis von Bootstrap 5.3 */

@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap; src: url("../fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 800; font-display: swap; src: url("../fonts/jetbrains-mono-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 400; font-display: swap; src: url("../fonts/space-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 600; font-display: swap; src: url("../fonts/space-grotesk-latin-600-normal.woff2") format("woff2"); }

:root,
[data-bs-theme="dark"] {
  --tc-bg: #2A1447;        /* Hintergrund */
  --tc-surface: #3A1F61;   /* Fläche */
  --tc-text: #F7F2FF;      /* Text */
  --tc-muted: #D9C2F5;     /* Slogan, Sekundärtext */
  --tc-primary: #6D3FE0;   /* Primär */
  --tc-accent: #EBDD52;    /* Akzent */
  --tc-mono: "JetBrains Mono", ui-monospace, monospace;
  --tc-sans: "Space Grotesk", system-ui, sans-serif;

  --bs-body-bg: var(--tc-bg);
  --bs-body-color: var(--tc-text);
  --bs-body-font-family: var(--tc-sans);
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.6;
  --bs-primary: var(--tc-primary);
  --bs-primary-rgb: 109, 63, 224;
  --bs-link-color: var(--tc-accent);
  --bs-link-color-rgb: 235, 221, 82;
  --bs-link-hover-color: #F4EA8A;
  --bs-link-hover-color-rgb: 244, 234, 138;
  --bs-border-color: rgba(217, 194, 245, .22);
  --bs-nav-link-font-weight: 500;
}

html { scroll-behavior: smooth; scroll-padding-top: 1rem; }
:focus-visible { outline: 3px solid var(--tc-accent); outline-offset: 3px; border-radius: 4px; }
.tc-skip { position: absolute; top: .5rem; left: .5rem; z-index: 10; padding: .5rem 1rem; background: var(--tc-accent); color: var(--tc-bg); border-radius: .5rem; }

/* ---------- Logo (Maße aus dem Entwurf, relativ zur Schriftgröße) ---------- */
.tc-logo { display: inline-flex; align-items: center; gap: .222em; font-family: var(--tc-mono); font-size: 1em; line-height: 1; letter-spacing: -.042em; color: var(--tc-text); white-space: nowrap; }
.tc-logo__prompt { width: .611em; height: 1em; color: var(--tc-accent); flex: none; }
.tc-logo__temp { font-weight: 700; }
.tc-logo__ctl { display: inline-flex; align-items: center; height: 1.167em; box-sizing: border-box; padding: 0 .222em .056em .194em; border-radius: .194em; background: var(--tc-primary); font-weight: 800; }
.tc-logo__cursor { width: .556em; height: .153em; border-radius: .083em; background: var(--tc-accent); align-self: flex-end; margin-bottom: .111em; flex: none; }

.tc-slogan { font-family: var(--tc-sans); font-weight: 500; font-size: .875rem; line-height: 1.2; letter-spacing: .333em; text-transform: uppercase; color: var(--tc-muted); }

/* ---------- Kopfzeile ---------- */
.tc-header__brand { font-size: clamp(1.2rem, 5.2vw, 1.75rem); text-decoration: none; display: inline-flex; }
.tc-nav { flex-wrap: nowrap; }
.tc-nav .nav-link { padding-inline: clamp(.4rem, 2vw, 1rem); }
.tc-nav .nav-link, .tc-footer .nav-link { color: var(--tc-muted); }
.tc-nav .nav-link:hover, .tc-footer .nav-link:hover { color: var(--tc-accent); }

/* ---------- Schaltflächen ---------- */
.btn { --bs-btn-font-weight: 600; --bs-btn-border-radius: .75rem; }
.btn-lg { --bs-btn-padding-x: 1.4rem; --bs-btn-padding-y: .75rem; --bs-btn-font-size: 1.0625rem; --bs-btn-border-radius: .75rem; }
.btn-accent { --bs-btn-color: var(--tc-bg); --bs-btn-bg: var(--tc-accent); --bs-btn-border-color: var(--tc-accent); --bs-btn-hover-color: var(--tc-bg); --bs-btn-hover-bg: #F4EA8A; --bs-btn-hover-border-color: #F4EA8A; --bs-btn-active-color: var(--tc-bg); --bs-btn-active-bg: #F4EA8A; --bs-btn-active-border-color: #F4EA8A; overflow-wrap: anywhere; }
.btn-outline-light { --bs-btn-color: var(--tc-text); --bs-btn-border-color: rgba(217, 194, 245, .5); --bs-btn-hover-bg: var(--tc-text); --bs-btn-hover-color: var(--tc-bg); }

/* ---------- Hero ---------- */
.tc-hero { padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(3rem, 7vw, 5.5rem); }
.tc-hero__title { font-family: var(--tc-mono); font-weight: 800; font-size: clamp(2.25rem, 6vw, 4rem); line-height: 1.08; letter-spacing: -.04em; margin-bottom: 1.5rem; text-wrap: balance; }
.tc-hero__lead { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--tc-muted); max-width: 38rem; }

/* ---------- Terminal ---------- */
.tc-terminal { background: #1D0D33; border: 1px solid var(--bs-border-color); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6); }
.tc-terminal__bar { display: flex; gap: .4rem; padding: .75rem 1rem; background: var(--tc-surface); }
.tc-terminal__bar span { width: .65rem; height: .65rem; border-radius: 50%; background: rgba(217, 194, 245, .35); }
.tc-terminal__body { margin: 0; padding: 1.25rem 1.25rem 1.5rem; font-family: var(--tc-mono); font-size: clamp(.8125rem, 1.2vw, .9375rem); line-height: 1.8; color: var(--tc-text); overflow-x: auto; }
.tc-t-prompt { color: var(--tc-accent); font-weight: 700; }
.tc-t-ok { color: var(--tc-accent); }
.tc-t-cursor { display: inline-block; width: .9em; height: .22em; border-radius: .11em; background: var(--tc-accent); animation: tc-blink 1.1s steps(1) infinite; }
@keyframes tc-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tc-t-cursor { animation: none; } html { scroll-behavior: auto; } }

/* ---------- Abschnitte ---------- */
.tc-section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.tc-section__title { font-family: var(--tc-mono); font-weight: 700; font-size: clamp(1.625rem, 3.5vw, 2.25rem); letter-spacing: -.03em; margin-bottom: 2rem; }
.tc-card { background: var(--tc-surface); border: 1px solid var(--bs-border-color); border-radius: 14px; padding: 1.75rem; }
.tc-card__cmd { font-family: var(--tc-mono); font-weight: 500; font-size: .875rem; color: var(--tc-accent); margin-bottom: 1rem; }
.tc-card__title { font-family: var(--tc-sans); font-weight: 600; font-size: 1.375rem; margin-bottom: .75rem; }
.tc-card p:last-child { color: var(--tc-muted); }
.tc-contact { background: var(--tc-surface); }

/* ---------- Textseiten ---------- */
.tc-prose h2 { font-family: var(--tc-sans); font-weight: 600; font-size: 1.375rem; margin: 2.25rem 0 .75rem; }
.tc-prose blockquote { border-left: 4px solid var(--tc-accent); background: var(--tc-surface); padding: 1rem 1.25rem; border-radius: 0 .75rem .75rem 0; }
.tc-prose blockquote p { margin: 0; }

/* ---------- Fußzeile ---------- */
.tc-footer { border-top: 1px solid var(--bs-border-color); }
.tc-footer__logo { font-size: 1.375rem; }
.tc-footer .tc-slogan { font-size: .6875rem; }
.tc-footer__copy { font-size: .875rem; color: var(--tc-muted); padding: 0 1rem; }