/* STYLES: index.html */

html{ scroll-behavior:smooth; }

  body{
    background: var(--bg);
    color: var(--text);
    font-family:'Inter', sans-serif;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  .mono{ font-family:'JetBrains Mono', monospace; }

  h1,h2,h3{ font-family:'Space Grotesk', sans-serif; font-weight:600; letter-spacing:-0.01em; }

  /* NAV */
  nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding: 20px clamp(20px, 5vw, 64px);
    transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
    border-bottom: 1px solid transparent;
  }
  nav.scrolled{
    background: rgba(10,20,32,0.75);
    backdrop-filter: blur(10px);
    border-bottom-color: rgba(94,234,212,0.1);
  }
  .nav-mark{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
  .nav-mark img{ height:32px; width:32px; display:block; }
  .nav-mark span{ font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:17px; letter-spacing:-0.015em; }
  .nav-mark em{ font-style:normal; font-weight:600; color:var(--accent); }
  .nav-link{ font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--text-muted); text-decoration:none; letter-spacing:0.02em; }
  .nav-link:hover{ color:var(--text); }
  .nav-cta{
    font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--text);
    border:1px solid var(--border); padding:9px 18px; border-radius:2px;
    text-decoration:none; letter-spacing:0.02em;
    transition: border-color 0.25s ease, background 0.25s ease;
  }
  .nav-cta:hover{ border-color:var(--accent); background:var(--accent-soft); }

  /* GRID BREAK EFFECT — #grid_break_effect */
  /* Hintergrund entspricht dem unteren Ende des Buehnen-Verlaufs — falls auf
     dem Telefon die Browserleiste einfaehrt und ein Streifen frei wird,
     faellt das nicht auf. */
  .stage-wrapper{ position:relative; height:220vh; background:var(--bg-2); }
  .stage{
    position:sticky; top:0; width:100%;
    /* 100vh meint auf iOS die Hoehe OHNE Browserleiste — der untere Rand
       der Buehne liegt dann hinter der Leiste und der Scroll-Hinweis wird
       abgeschnitten. 100svh ist die tatsaechlich sichtbare Hoehe.
       Die erste Zeile bleibt als Rueckfall fuer aeltere Browser. */
    height:100vh;
    height:100svh;
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(ellipse at 50% 40%, rgba(94,234,212,0.06), transparent 60%),
      linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  }
  /* transition faengt Deckkraftspruenge bei schnellem Scrollen ab */
  .grid-lines{ position:absolute; inset:0; transition:opacity 0.22s linear; }
  .grid-line{ position:absolute; background: var(--line); will-change: transform, opacity; }
  .grid-line--v{ top:0; bottom:0; width:1px; }
  .grid-line--h{ left:0; right:0; height:1px; }
  .grid-line.bright{ background: var(--line-bright); }

  .stage-content{
    position:relative; z-index:5; text-align:center; padding:0 24px;
    will-change: transform, opacity;
  }
  .eyebrow{
    font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--accent);
    letter-spacing:0.18em; text-transform:uppercase; margin-bottom:22px; display:block;
  }
  .stage-content h1{
    font-size: clamp(38px, 7vw, 84px); line-height:1.02; color:var(--text);
  }
  .stage-content h1 em{ font-style:normal; color:var(--accent); }
  .stage-sub{
    margin-top:22px; font-size: clamp(15px,2vw,19px); color:var(--text-muted);
    max-width:520px; margin-left:auto; margin-right:auto; font-weight:400;
  }
  .scroll-cue{
    position:absolute; left:50%; transform:translateX(-50%);
    /* env(...) beruecksichtigt den Bereich, den neuere Geraete unten fuer
       die Home-Leiste reservieren; ohne solchen Bereich bleiben es 44px. */
    bottom:calc(44px + env(safe-area-inset-bottom, 0px));
    display:flex; flex-direction:column; align-items:center; gap:8px;
    font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--text-muted);
    letter-spacing:0.15em; z-index:5;
    pointer-events:none; will-change:opacity, transform;
  }
  .scroll-cue .line{ width:1px; height:34px; background:linear-gradient(var(--accent), transparent); animation: pulse-line 1.8s ease-in-out infinite; }
  @keyframes pulse-line{ 0%,100%{opacity:.3;} 50%{opacity:1;} }

  /* GENERIC SECTIONS */
  section{ position:relative; z-index:2; background:var(--bg-2); }

  /* Kapitelwechsel — dunkler Grund fasst je zwei Abschnitte zusammen */
  #section-03, #section-04,
  #section-07, #section-08{ background:var(--bg); }
  .wrap{ max-width:1080px; margin:0 auto; padding: 144px 24px; }
  .reveal{ opacity:0; transform:translateY(28px); transition: opacity 0.8s ease, transform 0.8s ease; }
  .reveal.in-view{ opacity:1; transform:translateY(0); }

  /* schliesst direkt an den Rastereffekt an */
  #section-01 .wrap{ padding-top:72px; }

  /* problem statement */
  .statement{ max-width:760px; }
  .statement h2{ font-size:clamp(26px,4vw,42px); line-height:1.35; color:var(--text); font-weight:500; }
  .statement h2 strong{ color:var(--accent); font-weight:600; }

  /* warum gridout cards */
  .why-grid{
    display:grid; grid-template-columns: repeat(3, 1fr); gap:1px;
    background:var(--border); border:1px solid var(--border); margin-top:56px;
  }
  .why-card{
    background:var(--card-bg); padding:36px 28px; position:relative;
  }
  .why-card .idx{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--accent); letter-spacing:0.1em; }
  .why-card h3{ margin-top:18px; font-size:19px; color:var(--text); font-weight:600; }
  .why-card p{ margin-top:12px; font-size:14px; line-height:1.7; color:var(--text-muted); }

  @media (max-width:760px){
    .why-grid{ grid-template-columns:1fr; }
  }

  /* leistungen */
  .services .head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:20px; }
  .services h2{ font-size:clamp(24px,3.6vw,34px); }
  .tag-grid{
    margin-top:48px; display:flex; flex-wrap:wrap; gap:12px;
  }
  .tag{
    font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--text);
    border:1px solid var(--border); border-radius:2px; padding:12px 18px;
    background:var(--card-bg); letter-spacing:0.01em;
    transition: border-color 0.25s ease, transform 0.25s ease;
  }
  .tag:hover{ border-color:var(--accent); transform:translateY(-2px); }

  /* beispielprojekt teaser */
  .project-teaser{
    margin-top:48px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;
    border:1px solid var(--border); background:var(--card-bg); padding:32px 36px;
    text-decoration:none; transition: border-color 0.25s ease, transform 0.25s ease;
  }
  .project-teaser:hover{ border-color:var(--accent); transform:translateY(-2px); }
  .project-teaser .client{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--accent); letter-spacing:0.1em; text-transform:uppercase; }
  .project-teaser h3{ margin-top:10px; font-size:22px; color:var(--text); }
  .project-teaser p{ margin-top:8px; font-size:14px; color:var(--text-muted); max-width:520px; }
  .project-teaser .arrow{ font-family:'JetBrains Mono',monospace; font-size:14px; color:var(--accent); white-space:nowrap; }

  /* CTA */
  .cta{ background:var(--bg-2); text-align:center; }
  .cta h2{ font-size:clamp(28px,4.5vw,46px); max-width:640px; margin:0 auto; line-height:1.2; }
  .cta p{ color:var(--text-muted); margin-top:16px; font-size:16px; }
  .cta-btn{
    display:inline-block; margin-top:36px; font-family:'JetBrains Mono',monospace;
    font-size:14px; letter-spacing:0.03em; color:var(--bg);
    background:var(--accent); padding:15px 34px; border-radius:2px; text-decoration:none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .cta-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(94,234,212,0.25); }

  footer{
    background:var(--bg); padding:36px 24px; text-align:center;
    font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--text-muted);
    border-top:1px solid var(--border);
  }
  footer a{ color:var(--text-muted); transition:color 0.2s ease; }
  footer a:hover{ color:var(--accent); }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .grid-line, .stage-content, .reveal{ transition:none !important; animation:none !important; }
    .caret{ animation:none !important; }
    #gridGlow{ display:none !important; }
  }

  /* CURSOR GLOW im Hero-Raster */
  #gridGlow{
    position:absolute; width:440px; height:440px; border-radius:50%;
    background:radial-gradient(circle, rgba(94,234,212,0.10), transparent 62%);
    pointer-events:none; transform:translate(-50%,-50%);
    opacity:0; transition:opacity 0.5s ease; z-index:1;
  }

  /* VERSTECKTE EXCEL-FEHLER im Hero-Raster */
  #gridErrors{ position:absolute; inset:0; z-index:2; pointer-events:none; }
  .grid-error{
    position:absolute; transform:translate(-50%,-50%);
    font-family:'JetBrains Mono', monospace; font-size:11.5px; letter-spacing:0.03em;
    opacity:0; transition:opacity 0.18s ease; white-space:nowrap;
  }
  .grid-error.err{ color:#FF7B72; }
  .grid-error.warn{ color:var(--accent-2); }

  /* TERMINAL-CARET hinter der Hero-Eyebrow */
  .caret{
    display:inline-block; width:8px; height:13px; background:var(--accent);
    margin-left:7px; vertical-align:-1px;
    animation: caretBlink 1.1s steps(1) infinite;
  }
  @keyframes caretBlink{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }

  /* VORHER/NACHHER-REGLER */
  .ba-wrap{
    --ba-pos:50%;
    position:relative; margin-top:44px; height:340px;
    border:1px solid var(--border); background:var(--bg);
    overflow:hidden; user-select:none; -webkit-user-select:none;
    touch-action:pan-y; cursor:ew-resize;
  }
  .ba-layer{ position:absolute; inset:0; padding:16px; }
  .ba-after{ z-index:1; background:var(--bg-2); }
  .ba-before{ z-index:2; background:#0B1622; clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0); }
  .ba-handle{
    position:absolute; top:0; bottom:0; left:var(--ba-pos); width:2px;
    background:var(--accent); z-index:3; transform:translateX(-1px); outline:none;
  }
  .ba-handle:focus-visible .ba-grip{ box-shadow:0 0 0 2px rgba(94,234,212,0.5); }
  .ba-grip{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    background:var(--bg-2); border:1px solid var(--accent); color:var(--accent);
    font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.05em;
    padding:7px 10px; border-radius:2px; white-space:nowrap;
  }
  .ba-tag{
    position:absolute; top:12px; z-index:4;
    font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase;
    padding:5px 9px; border-radius:2px; pointer-events:none;
  }
  .ba-tag-before{ left:12px; color:var(--accent-2); border:1px solid rgba(255,180,84,0.4); background:rgba(11,22,34,0.85); }
  .ba-tag-after{ right:12px; color:var(--accent); border:1px solid var(--border); background:rgba(13,27,42,0.85); }
  .ba-caption{ margin-top:14px; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-muted); letter-spacing:0.04em; }
  .ba-caption strong{ color:var(--text); font-weight:500; }

  /* excel-chaos mock */
  .xls{ height:100%; display:flex; flex-direction:column; padding-top:26px; }
  .xls-tabs{ display:flex; gap:6px; align-items:center; }
  .xls-datei{
    margin-left:auto; padding-right:4px;
    font-family:'JetBrains Mono',monospace; font-size:9.5px; color:#4E6580;
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  }
  .xls-tab{
    font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-muted);
    border:1px solid #22374F; border-bottom:none; padding:0 10px; background:#0E1B29;
    height:24px; display:flex; align-items:center;
  }
  .xls-tab.active{ color:var(--accent-2); }
  .xls-grid{
    /* dieselbe Spaltenaufteilung wie in der Anwendung rechts, damit beim
       Ziehen jede Spalte in ihr Gegenstück übergeht */
    display:grid; grid-template-columns:1.5fr 1fr 0.8fr 1.2fr; gap:1px;
    background:#22374F; border:1px solid #22374F; flex:1; align-content:start;
  }
  .xc{
    background:#0E1B29; padding:0 8px; display:flex; align-items:center;
    font-family:'JetBrains Mono',monospace;
    font-size:10.5px; color:#9FB2C6; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
    height:32px;
  }
  .xc.h{ background:#12233A; color:#647B96; justify-content:center; height:24px; }
  .xc.kopf{ background:#132436; color:#8FA9C0; }
  .xc.err{ color:#FF7B72; }
  .xc.warn{ color:var(--accent-2); }

  /* gridout-app mock */
  .app{ height:100%; display:flex; border:1px solid var(--border); background:#0C1826; margin-top:26px; }
  .app-side{ width:38px; border-right:1px solid var(--border); display:flex; flex-direction:column; align-items:center; gap:10px; padding-top:14px; }
  .app-side span{ width:14px; height:14px; border:1px solid var(--line-bright); border-radius:2px; }
  .app-side span:first-child{ background:var(--accent-soft); border-color:var(--accent); }
  .app-main{ flex:1; display:flex; flex-direction:column; min-width:0; position:relative; }
  .app-head{
    display:flex; align-items:center; justify-content:space-between;
    font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:600; color:var(--text);
    padding:0 12px; height:48px; border-bottom:1px solid var(--border);
  }
  .app-titel{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .app-aktionen{ display:flex; align-items:center; gap:9px; flex:0 0 auto; }
  /* Knopf in der Anwendungsansicht: zeigt, dass Einträge über eine Maske
     entstehen und nicht durch Tippen in die nächste freie Zeile */
  .app-btn{
    font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.03em;
    color:var(--bg); background:var(--accent); border-radius:2px;
    padding:5px 9px; white-space:nowrap; line-height:1;
  }
  .app-user{
    width:24px; height:24px; display:flex; align-items:center; justify-content:center;
    font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--accent);
    border:1px solid var(--border); background:var(--accent-soft); border-radius:2px;
  }
  .app-row{
    display:grid; grid-template-columns:1.5fr 1fr 0.8fr 1.2fr; gap:8px; align-items:center;
    padding:0 12px; border-bottom:1px solid rgba(94,234,212,0.07);
    font-size:11.5px; color:var(--text-muted); height:32px;
  }
  .app-row span{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  /* angeklicktes Projekt — der sichtbare Unterschied zu einer Zellmarkierung */
  .app-row.aktiv{
    background:rgba(94,234,212,0.07); box-shadow:inset 2px 0 0 var(--accent);
    color:var(--text);
  }
  .app-row-head{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:#647B96; height:32px; }
  /* Übersicht, die sich unter dem gewählten Projekt öffnet.
     Absolut positioniert, damit die Zeilen darüber ihre Höhe behalten und
     das Raster mit der Excel-Seite deckungsgleich bleibt. Oberkante 148 px
     = Unterkante der zweiten Datenzeile. */
  .app-pop{
    position:absolute; top:148px; right:10px; width:min(320px, 78%);
    background:#111F30; border:1px solid rgba(94,234,212,0.45); border-radius:2px;
    box-shadow:0 12px 28px rgba(0,0,0,0.45); padding:9px 12px 10px; z-index:2;
  }
  .app-pop::before{
    content:''; position:absolute; top:-5px; left:24px; width:8px; height:8px;
    background:#111F30; border-left:1px solid rgba(94,234,212,0.45);
    border-top:1px solid rgba(94,234,212,0.45); transform:rotate(45deg);
  }
  .app-pop-kopf{
    display:flex; align-items:baseline; gap:8px; padding-bottom:6px;
    border-bottom:1px solid var(--border);
    font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--accent);
  }
  .app-pop-kopf span{
    font-family:'Inter',sans-serif; font-size:11.5px; letter-spacing:0;
    text-transform:none; color:var(--text-muted);
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  }
  .app-pop-zeile{
    display:flex; align-items:center; gap:8px; padding-top:7px;
    font-size:11px; color:var(--text-muted);
  }
  .app-pop-zeile span{ margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:10px; }
  .ms{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
  .ms.ok{ background:var(--accent); }
  .ms.offen{ background:transparent; border:1px solid var(--accent-2); }

  .pill{
    font-style:normal; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.04em;
    padding:3px 8px; border-radius:2px; border:1px solid;
  }
  .pill.ok{ color:var(--accent); border-color:rgba(94,234,212,0.35); background:var(--accent-soft); }
  .pill.warn{ color:var(--accent-2); border-color:rgba(255,180,84,0.35); background:rgba(255,180,84,0.08); }
  .pill.done{ color:var(--text-muted); border-color:var(--border); background:transparent; }

  @media (max-width:560px){
    /* Höhe reicht für alle fünf Tabellenzeilen; die Spaltenbreiten werden
       enger, das Zeilenraster bleibt auf beiden Seiten gleich */
    .ba-wrap{ height:322px; }
    .app-row, .xls-grid{ grid-template-columns:1.4fr 0.9fr 0.7fr 1fr; }
    .app-row{ padding:0 8px; font-size:10.5px; }
    .xc{ font-size:9.5px; padding:0 6px; }
    .app-pop{ right:6px; width:min(260px, 84%); padding:8px 10px 9px; }
    .app-pop-zeile{ font-size:10px; padding-top:6px; }
    .xls-datei{ display:none; }
  }

  /* SECTION JUMPER */
  #sectionJumper{
    position:fixed; left:50%; bottom:28px; z-index:150;
    transform:translateX(-50%) translateY(12px);
    width:52px; height:52px; padding:0; background:transparent; border:none; cursor:pointer;
    opacity:0; visibility:hidden;
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
  }
  #sectionJumper.visible{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  #sectionJumper svg{ width:52px; height:52px; display:block; }
  #sectionJumper .jumper-bg{ fill:var(--bg-2); stroke:var(--border); stroke-width:1; transition:stroke 0.2s ease; }
  #sectionJumper:hover .jumper-bg{ stroke:var(--accent); }
  #sectionJumper .jumper-ring-track{ fill:none; stroke:var(--border); stroke-width:2; }
  #sectionJumper .jumper-ring{
    fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round;
    transform:rotate(-90deg); transform-origin:26px 26px;
  }
  #sectionJumper .jumper-arrow{ stroke:var(--accent); stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* TERMINAL-EASTEREGG */
#terminal{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,13,21,0.82); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity 0.3s ease, visibility 0.3s;
  padding:24px;
}
#terminal.open{ opacity:1; visibility:visible; }
.term-window{
  width:min(820px,100%); max-height:min(680px,88vh); max-height:min(680px,88svh);
  display:flex; flex-direction:column;
  background:var(--bg-2); border:1px solid var(--accent);
  border-radius:2px; box-shadow:0 24px 80px rgba(0,0,0,0.55);
  transform:translateY(14px) scale(0.99); transition:transform 0.3s cubic-bezier(.16,1,.3,1);
}
#terminal.open .term-window{ transform:none; }
.term-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:11px 16px; border-bottom:1px solid var(--border);
  font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-muted);
  letter-spacing:0.08em;
}
.term-bar strong{ color:var(--accent); font-weight:500; }
.term-close{
  background:transparent; border:1px solid var(--border); border-radius:2px;
  color:var(--text-muted); font-family:'JetBrains Mono',monospace; font-size:11px;
  padding:4px 9px; cursor:pointer; transition:border-color 0.2s ease, color 0.2s ease;
}
.term-close:hover{ border-color:var(--accent); color:var(--accent); }
.term-body{
  flex:1; overflow-y:auto; padding:18px 20px;
  font-family:'JetBrains Mono',monospace; font-size:13px; line-height:1.6; color:var(--text-muted);
  scrollbar-width:thin; scrollbar-color:var(--line-bright) transparent;
}
.term-body::-webkit-scrollbar{ width:10px; height:10px; }
.term-body::-webkit-scrollbar-track{ background:rgba(94,234,212,0.05); }
.term-body::-webkit-scrollbar-thumb{ background:var(--line-bright); border-radius:2px; }
.term-body::-webkit-scrollbar-thumb:hover{ background:var(--accent); }
.term-body .t-in{ color:var(--text); }
.term-body .t-in::before{ content:'gridout> '; color:var(--accent); }
.term-body .t-ok{ color:var(--accent); }
.term-body .t-warn{ color:var(--accent-2); }
.term-body .t-err{ color:#FF7B72; }
.term-body .t-tabelle{
  margin:6px 0 10px; border-left:2px solid var(--border); padding-left:14px;
  /* Leerzeichen erhalten, sonst zerfallen die Tabellen; bei schmalen
     Fenstern lieber waagerecht schieben als umbrechen */
  white-space:pre; overflow-x:auto;
  scrollbar-width:thin; scrollbar-color:var(--line-bright) transparent;
}
.term-body .t-tabelle::-webkit-scrollbar{ height:8px; }
.term-body .t-tabelle::-webkit-scrollbar-track{ background:rgba(94,234,212,0.05); }
.term-body .t-tabelle::-webkit-scrollbar-thumb{ background:var(--line-bright); border-radius:2px; }
@media (max-width:560px){
  .term-body .t-tabelle{ font-size:11px; }
}
.term-body a{ color:var(--accent); }
.term-input-row{
  display:flex; align-items:center; gap:10px;
  border-top:1px solid var(--border); padding:12px 20px;
}
.term-prompt{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--accent); flex:0 0 auto; }
#termInput{
  flex:1; background:transparent; border:none; outline:none;
  font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--text);
}
/* dezenter Hinweis auf das Easteregg (Fusszeile der Startseite) */
.term-hint{
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-muted);
  opacity:0.55; margin-top:8px;
}
.term-hint kbd{
  font-family:'JetBrains Mono',monospace; border:1px solid var(--border);
  border-radius:2px; padding:1px 5px; color:var(--accent);
}
@media (prefers-reduced-motion: reduce){
  #terminal, .term-window{ transition:none !important; }
}

/* Teaser: Tabellen-Diagnose */
.diag-teaser{
  display:grid; grid-template-columns:1.5fr 1fr; gap:36px; align-items:center;
  border:1px solid rgba(94,234,212,0.35); background:var(--card-bg); padding:36px 40px;
}
.dt-text h2{ margin-top:16px; font-size:clamp(21px,2.9vw,28px); line-height:1.3; }
.dt-text p{ margin-top:16px; font-size:15px; line-height:1.75; color:var(--text-muted); }
.dt-link{
  display:inline-block; margin-top:24px;
  font-family:'JetBrains Mono',monospace; font-size:14px; color:var(--bg); background:var(--accent);
  padding:13px 26px; border-radius:2px; text-decoration:none;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.dt-link:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(94,234,212,0.25); }
.dt-grid{
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  gap:6px; aspect-ratio:1; max-width:230px; margin-left:auto;
}
.dt-grid span{
  border:1px solid var(--line-bright); border-radius:2px; background:var(--bg-2);
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--accent-2);
}
.dt-grid .fehler{ border-color:rgba(255,180,84,0.5); background:rgba(255,180,84,0.08); }
.dt-grid .frei{
  border-color:var(--accent); background:var(--accent-soft);
  transform:translate(9px, 9px); box-shadow:0 6px 18px rgba(0,0,0,0.35);
}
@media (max-width:760px){
  .diag-teaser{ grid-template-columns:1fr; padding:30px 26px; }
  .dt-grid{ margin:0 auto; max-width:180px; }
}

.dt-knoepfe{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.dt-link.zweit{
  background:transparent; color:var(--text); border:1px solid var(--border);
}
.dt-link.zweit:hover{ border-color:var(--accent); background:var(--accent-soft); box-shadow:none; }