/*
   * Die Werte dieses Satzes stammen aus app/globals.css und sind dort gegen
   * ihre Flaechen durchgemessen (pruefen/farbpaare-pruefen.mjs). Bis zum
   * 29.08.2026 stand hier ein Windows-Fluent-Satz — er zeigte die App so, wie
   * sie vor der Umstellung auf die Theo-Farbwelt aussah. Folge: das Mockup
   * bewarb eine Oberflaeche, die es nicht mehr gibt, und der
   * Fortschrittsbalken der Anfrage stand in Microsoft-Blau.
   * Wer hier etwas aendert, aendert es zuerst in app/globals.css.
   */
  :root {
    --grund: #f6f8fa;
    --flaeche: #ffffff;
    --flaeche-still: #eef0f3;
    --flaeche-aktiv: #e4e6e9;
    --leiste: #f2f5f7;
    --rahmen: #abb0b6;
    --rahmen-stark: #808488;
    --rahmen-tief: #63686d;
    --text: #242a30;
    --text-zweit: #5e646a;
    --text-still: #63686d;
    --hell: #fdfbf5;
    --blau: #0568b3;
    --blau-tief: #004f8b;
    --blau-hell: #e5f2ff;
    --blau-rand: #3e87ce;
    --rot: #a8473e;
    --rot-hell: #fdebe9;
    --gelb: #965900;
    --gelb-hell: #f9eee2;
    --gruen: #137738;
    --gruen-hell: #e7f4e9;
    --b1: #2f45c0; --b2: #1f7a4f; --b3: #8f5e12; --b4: #a72f6a; --b5: #17646f;
    --fenster: 6px;
    --klein: 3px;
    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font: 15px/1.5 var(--sans);
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--blau); text-decoration: none; }
  a:hover { text-decoration: underline; text-underline-offset: 2px; }
  .zahl { font-variant-numeric: tabular-nums; }
  .still { color: var(--text-still); }
  .zweit { color: var(--text-zweit); }

  /* ── Bauteile, wie im Programm ─────────────────────────────── */
  .karte { background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--fenster); }
  .knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 34px; padding: 0 14px;
    border: 1px solid var(--rahmen-stark); border-bottom-color: var(--rahmen-tief);
    border-radius: var(--klein); background: var(--flaeche);
    color: var(--text); font: 600 14px/1 var(--sans); cursor: pointer; white-space: nowrap;
    transition: background 90ms ease;
  }
  .knopf:hover { background: var(--flaeche-aktiv); text-decoration: none; }
  .knopf-stark { background: var(--blau); border-color: var(--blau); border-bottom-color: var(--blau-tief); color: var(--hell); }
  .knopf-stark:hover { background: var(--blau-tief); }
  .fahne {
    display: inline-block; padding: 1px 8px; border: 1px solid var(--rahmen); border-radius: 999px;
    background: var(--flaeche-still); font-size: 12px; white-space: nowrap; line-height: 1.6;
  }
  .fahne-blau { border-color: var(--blau-rand); background: var(--blau-hell); color: var(--blau-tief); }
  .fahne-rot { border-color: #f0c8c4; background: var(--rot-hell); color: var(--rot); }
  .fahne-gelb { border-color: #edd9a8; background: var(--gelb-hell); color: var(--gelb); }
  .fahne-gruen { border-color: #bfe3c9; background: var(--gruen-hell); color: var(--gruen); }
  .band {
    display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px;
    border: 1px solid var(--rahmen-stark); border-radius: var(--klein); font-size: 14px;
  }
  .band-blau { border-color: var(--blau-rand); background: var(--blau-hell); }
  .band-gelb { border-color: #edd9a8; background: var(--gelb-hell); }
  .marke { font-size: 12px; font-weight: 600; color: var(--text-zweit); letter-spacing: .02em; }
  .abschnitt { font-size: 15px; font-weight: 600; margin: 0; }
  h1, h2, h3 { margin: 0; letter-spacing: -0.01em; }
  h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.1; font-weight: 600; }
  h2 { font-size: 22px; font-weight: 600; }
  p { margin: 0; }

  /* ── Rahmen der Seite: Kopf wie die Titelleiste des Programms ── */
  .kopf {
    /* Eigenständige Vorstellungsseite in public/ — nimmt am Tailwind-Bau
       nicht teil und kann die Leiter-Variablen darum nicht sehen. Die 10
       entspricht der Stufe `klebt`. */
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 10px 20px; background: var(--leiste); border-bottom: 1px solid var(--rahmen-stark);
  }
  .wortmarke { font-size: 18px; font-weight: 600; letter-spacing: .16em; }
  .kopf nav { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
  .kopf nav a { color: var(--text-zweit); }
  .kopf .rechts { margin-left: auto; display: flex; gap: 8px; }
  @media (max-width: 760px) { .kopf nav { display: none; } .kopf .untertitel { display: none; } }
  .huelle { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
  section { padding: 44px 0; }
  section + section { border-top: 1px solid var(--rahmen); }
  .kopfzeile { margin-bottom: 18px; }
  .kopfzeile .marke { margin-bottom: 6px; }
  .kopfzeile h2 { margin-bottom: 8px; }
  .kopfzeile p.zweit { max-width: 62ch; }

  /* ── Auftakt: Text links, das Programm rechts ─────────────── */
  .auftakt { display: grid; gap: 28px; align-items: start; padding-top: 48px; }
  @media (min-width: 900px) { .auftakt { grid-template-columns: minmax(0, 1fr) 460px; } }
  .auftakt .lead { margin-top: 14px; max-width: 54ch; font-size: 17px; color: var(--text-zweit); }
  .auftakt .knoepfe { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

  /* Ein Fenster aus dem Programm, nachgebaut mit denselben Bauteilen. */
  .fenster { padding: 0; overflow: hidden; }
  .fenster-kopf {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    background: var(--leiste); border-bottom: 1px solid var(--rahmen); font-size: 12px;
  }
  .fenster-kopf .punkte { display: flex; gap: 5px; }
  .fenster-kopf .punkte i { width: 9px; height: 9px; border-radius: 50%; background: var(--rahmen); display: block; }
  .kacheln { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rahmen); border-bottom: 1px solid var(--rahmen); }
  .kachel { background: var(--flaeche); padding: 10px 12px; }
  .kachel .n { font-size: 11px; color: var(--text-zweit); }
  .kachel .w { font-size: 26px; font-weight: 600; line-height: 1.1; }
  .kachel .w small { font-size: 12px; font-weight: 400; color: var(--text-zweit); margin-left: 4px; }
  .kachel .f { font-size: 11px; color: var(--text-still); }
  .strahl { padding: 10px 12px 12px; }
  .strahl .zeile { display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: center; font-size: 12px; margin: 6px 0; }
  .strahl .name { color: var(--text-zweit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .strahl .spur { position: relative; height: 16px; background: var(--flaeche-still); border-radius: 3px; overflow: hidden; }
  .strahl .balken { position: absolute; top: 0; bottom: 0; border-radius: 3px; color: var(--hell); font-size: 11px; line-height: 16px; padding: 0 6px; white-space: nowrap; overflow: hidden; }
  .strahl .heute { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--rot); left: 32%; }
  .strahl .lueck { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(-45deg, transparent 0 4px, var(--rahmen) 4px 6px); }
  .fenster-fuss { display: flex; gap: 12px; padding: 6px 12px; border-top: 1px solid var(--rahmen); background: var(--leiste); font-size: 11px; color: var(--text-zweit); }

  /* ── Listen mit Nummern, wie das Protokoll ─────────────────── */
  .punkte-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rahmen); }
  .punkte-liste li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0 14px; padding: 16px 0; border-bottom: 1px solid var(--rahmen); }
  .punkte-liste .nr { font-family: var(--mono); font-size: 12px; color: var(--text-still); padding-top: 3px; }
  .punkte-liste .t { font-weight: 600; }
  .punkte-liste .x { margin-top: 3px; color: var(--text-zweit); max-width: 66ch; }
  /*
   * Apples Muster: erst der Satz, der die Sache erklaert, dann das Kleingedruckte.
   * Der erste Halbsatz jedes Punktes steht deshalb in der Textfarbe, der Rest
   * bleibt zweitrangig -- so liest sich die Liste auch, wenn man sie ueberfliegt.
   */
  .punkte-liste .x strong { color: var(--text); font-weight: 600; }

  /* ── Module als Karten, wie die Seitenleiste ───────────────── */
  .module { display: grid; gap: 12px; }
  @media (min-width: 720px) { .module { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1000px) { .module { grid-template-columns: 1fr 1fr 1fr; } }
  .modul { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
  .modul .k { display: flex; align-items: center; gap: 8px; }
  .modul .k .fahne { margin-left: auto; }
  .modul .x { font-size: 14px; color: var(--text-zweit); }

  /* ── Zwei Spalten für Handy und Büro ───────────────────────── */
  .zwei { display: grid; gap: 16px; }
  @media (min-width: 820px) { .zwei { grid-template-columns: 1fr 1fr; } }
  .handy { max-width: 340px; padding: 14px; }
  .handy .zeile { display: flex; gap: 8px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--rahmen); font-size: 14px; }
  .handy .zeile:first-of-type { border-top: 0; }
  .handy .tag { width: 42px; color: var(--text-still); font-size: 12px; }
  .handy .ort { margin-left: auto; color: var(--text-zweit); font-size: 12px; }

  /* ── Fragen ─────────────────────────────────────────────────── */
  details { border-top: 1px solid var(--rahmen); }
  details:last-of-type { border-bottom: 1px solid var(--rahmen); }
  summary { cursor: pointer; padding: 14px 0; font-weight: 600; list-style: none; display: flex; gap: 10px; }
  summary::-webkit-details-marker { display: none; }
  summary::before { content: "›"; color: var(--text-still); width: 1ch; transition: transform 120ms; }
  details[open] summary::before { transform: rotate(90deg); }
  details p { padding: 0 0 16px 1.6rem; color: var(--text-zweit); max-width: 68ch; }

  /* ── Schluss und Fuß ─────────────────────────────────────────── */
  .schluss .karte { padding: 22px 24px; display: grid; gap: 14px; }
  @media (min-width: 720px) { .schluss .karte { grid-template-columns: 1fr auto; align-items: center; } }
  .fuss {
    display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 20px; font-size: 12px; color: var(--text-zweit);
    background: var(--leiste); border-top: 1px solid var(--rahmen-stark);
  }
  .fuss a { color: var(--text-zweit); }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

  /* ── Unterseiten ─────────────────────────────────────────────── */
  .kopf nav a[aria-current="page"] { color: var(--text); font-weight: 600; }
  .seite-kopf { padding: 40px 0 8px; }
  .seite-kopf h1 { font-size: clamp(26px, 4vw, 36px); margin-top: 6px; }
  .seite-kopf .lead { margin-top: 12px; max-width: 62ch; font-size: 16px; color: var(--text-zweit); }
  .weiter { display: grid; gap: 12px; margin-top: 8px; }
  @media (min-width: 720px) { .weiter { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1000px) { .weiter { grid-template-columns: repeat(4, 1fr); } }
  .weiter a { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; color: var(--text); }
  .weiter a:hover { text-decoration: none; background: var(--flaeche-still); }
  .weiter .t { font-weight: 600; }
  .weiter .x { font-size: 13px; color: var(--text-zweit); }
  .weiter .pfeil { margin-top: auto; font-size: 13px; color: var(--blau); }
  .tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
  .tabelle th, .tabelle td { padding: 10px 12px; border-bottom: 1px solid var(--rahmen); text-align: left; vertical-align: top; }
  .tabelle th { font-size: 12px; font-weight: 600; color: var(--text-zweit); background: var(--flaeche-still); }
  .tabelle td.zahl { white-space: nowrap; }
  .preis { display: grid; gap: 14px; }
  @media (min-width: 820px) { .preis { grid-template-columns: 1fr 1fr; } }
  .preis .karte { padding: 18px 20px; }
  .preis .betrag { font-size: 32px; font-weight: 600; line-height: 1.1; margin-top: 6px; }
  .preis .betrag small { font-size: 14px; font-weight: 400; color: var(--text-zweit); }
  .preis ul { margin: 12px 0 0; padding-left: 18px; color: var(--text-zweit); font-size: 14px; }
  .formular { display: grid; gap: 14px; max-width: 620px; }
  .formular label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
  .formular .hinweis { font-weight: 400; color: var(--text-still); }
  .eingabe { width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--rahmen-stark); border-bottom: 2px solid var(--rahmen-tief); border-radius: var(--klein); background: var(--flaeche); font: 15px var(--sans); color: var(--text); }
  .eingabe:focus { outline: 2px solid var(--blau); outline-offset: 1px; border-color: var(--blau); }
  textarea.eingabe { min-height: 90px; resize: vertical; }
  .zwei-felder { display: grid; gap: 14px; }
  @media (min-width: 560px) { .zwei-felder { grid-template-columns: 1fr 1fr; } }
  .honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .band-gruen { border-color: #bfe3c9; background: var(--gruen-hell); }
  .band-rot { border-color: #f0c8c4; background: var(--rot-hell); }
  .liste { margin: 0; padding-left: 20px; color: var(--text-zweit); }
  .liste li { margin: 4px 0; }
  .liste li strong { color: var(--text); }

  /* ── Anfrage-Strecke: Schritt für Schritt, wie die Projekt-Anfrage ── */
  .strecke { max-width: 680px; }
  .fortschritt { display: flex; gap: 6px; margin: 0 0 10px; }
  .fortschritt span { flex: 1; height: 4px; border-radius: 2px; background: var(--rahmen); }
  .fortschritt span.an { background: var(--blau); }
  .schrittzahl { font-size: 12px; color: var(--text-still); margin-bottom: 14px; }
  .frage { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
  .hinweis-satz { font-size: 14px; color: var(--text-zweit); margin-bottom: 18px; max-width: 56ch; }
  .felder { display: grid; gap: 16px; }
  .felder .etikett { display: block; font-size: 12px; font-weight: 600; color: var(--text-zweit); margin-bottom: 6px; }
  .felder .frei { font-weight: 400; color: var(--text-still); margin-left: 6px; }
  .felder .pflicht { color: var(--blau); margin-left: 4px; }
  .wahl { display: flex; flex-wrap: wrap; gap: 8px; }
  .wahl button { min-height: 34px; padding: 0 12px; border: 1px solid var(--rahmen-stark); border-radius: var(--klein); background: var(--flaeche); font: 14px var(--sans); color: var(--text); cursor: pointer; }
  .wahl button:hover { background: var(--flaeche-aktiv); }
  .wahl button[aria-pressed="true"] { background: var(--blau); border-color: var(--blau); color: var(--hell); font-weight: 600; }
  .navigation { display: flex; gap: 10px; align-items: center; margin-top: 22px; }
  .navigation .knopf-zurueck { border-color: transparent; background: transparent; color: var(--text-zweit); }
  .navigation .knopf-zurueck:hover { background: var(--flaeche-aktiv); }
  .einordnung { margin-top: 18px; padding: 14px 16px; }
  .einordnung .betrag { font-size: 24px; font-weight: 600; margin: 4px 0; }
  .einordnung .betrag small { font-size: 13px; font-weight: 400; color: var(--text-zweit); }
  .einordnung p { font-size: 13px; color: var(--text-zweit); }
  .einwilligung { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text-zweit); margin-top: 16px; }
  .einwilligung input { margin-top: 3px; }
  .fertig h2 { font-size: 24px; }
  .schritt { animation: rein 160ms ease-out; }
  @keyframes rein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }


  /* ══════════════════════════════════════════════════════════════════
     Hausmarke Theo Studio — 19.08.2026, zweite Fassung
     ------------------------------------------------------------------
     Die erste Fassung machte den Auftakt DUNKEL. Falsch: theostudio.de
     ist hell — Creme mit feinem Raster, riesige Fraunces zweifarbig
     (Tinte + Indigo), Bernstein-Punkt, Mono-Augenbraue mit Vorstrich.
     Tinte kommt dort erst im FUSS und in einzelnen Bändern, als
     Rhythmuswechsel, nie als Einstieg. Genauso hier.
     Die Werte sind nicht erfunden, sondern aus theostudio.de gelesen:
     Grund #F4F1E9, Tinte #1B1830, Indigo #443CB0, Bernstein #C9861F,
     Linie #DDD6C6, Kopf 77 px durchscheinend, Fuss in Tinte.
     Auch die Skala ist von dort: alles clamp(), damit zwischen Handy
     und grossem Schirm nichts springt — «gerechnet», nicht gestuft.
     Das PRODUKTFENSTER behaelt den Programm-Look; es zeigt das Programm.
     ══════════════════════════════════════════════════════════════════ */
  :root {
    --papier: #f4f1e9;
    --papier-tief: #ebe6da;
    --tinte: #1b1830;
    --indigo: #443cb0;
    --iris: #8b8cf0;
    /*
     * ⚠️ Auf Creme misst #c9861f nur 2,69:1 — der Punkt, der die Signatur
     * TRAEGT, war der am schlechtesten lesbare Teil der Seite. Hier steht
     * derselbe Ton auf 4,5:1 gebracht (Tonabstand 0,0°, gemessen mit
     * lib/farbe.ts). Auf der Tinte im Fuss bleibt das Original, dort sind es
     * 5,67:1 — siehe --bernstein-hell.
     */
    --bernstein: #966417;
    --bernstein-hell: #c9861f;
    --schiefer: #6e6880;
    --linie: #ddd6c6;
    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --grotesk: var(--sans);

    /* Fluide Skala aus theostudio.de — zwischen den Grenzen wird gerechnet. */
    --rand:      clamp(1.25rem, .9rem + 1.75vw, 2.5rem);
    --luft-s:    clamp(.75rem, .7rem + .25vw, 1rem);
    --luft-m:    clamp(1rem, .9rem + .5vw, 1.5rem);
    --luft-l:    clamp(1.5rem, 1.3rem + 1vw, 2.5rem);
    --luft-xl:   clamp(2rem, 1.6rem + 2vw, 4rem);
    --luft-bahn: clamp(4rem, 3rem + 2.5vw, 6rem);
    --luft-held: clamp(5rem, 3.5rem + 5vw, 9rem);
    --schrift-xs:   clamp(.75rem, .73rem + .1vw, .8125rem);
    --schrift-s:    clamp(.9375rem, .9rem + .15vw, 1rem);
    --schrift-m:    clamp(1rem, .97rem + .15vw, 1.0625rem);
    --schrift-l:    clamp(1.0625rem, 1rem + .3vw, 1.25rem);
    --schrift-gross: clamp(1.875rem, 1.55rem + 1.5vw, 2.75rem);
    --schrift-held: clamp(2rem, 1.5rem + 2.4vw, 3.7rem);
    --breite: 68ch;
  }

  body { font-family: var(--grotesk); background: var(--papier); color: var(--tinte); font-size: var(--schrift-m); }
  /*
   * Breit wie theostudio.de. Dort steht --content-max: min(100%, 2200px), und
   * genau das meinte Louis mit «der hat das schoen auf alle Seiten so
   * breitgezogen». Hier war bei 1160 px Schluss — auf einem Bueroschirm
   * schwamm die Seite in einer Spalte mit Weiss links und rechts.
   *
   * Der FLIESSTEXT bleibt trotzdem schmal (--breite: 68ch, .lead 48ch): breit
   * heisst breite Flaeche, nicht breite Zeilen. Wer 200 Zeichen pro Zeile
   * setzt, hat nichts gewonnen.
   */
  .huelle { max-width: min(100%, 1600px); padding: 0 var(--rand); }

  /* ── Kopf: hell und durchscheinend, wie auf theostudio.de ────────── */
  .kopf {
    min-height: 72px; padding: 0 var(--rand); gap: clamp(12px, 2vw, 24px);
    background: rgba(244, 241, 233, .82); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--linie); color: var(--tinte);
  }
  .kopf .wortmarke {
    font-family: var(--serif); font-size: clamp(19px, 1.4vw, 23px); font-weight: 600;
    letter-spacing: .13em; color: var(--tinte) !important;
  }
  .kopf .wortmarke .punkt { color: var(--bernstein); }
  .kopf .untertitel {
    font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--schiefer) !important;
  }
  .kopf nav { gap: clamp(14px, 1.6vw, 24px); font-size: var(--schrift-s); }
  .kopf nav a { color: var(--schiefer); padding: 5px 0; border-bottom: 1px solid transparent; }
  .kopf nav a:hover { color: var(--tinte); text-decoration: none; border-bottom-color: var(--bernstein); }
  .kopf nav a[aria-current="page"] { color: var(--tinte); font-weight: 500; border-bottom-color: var(--bernstein); }
  .kopf .knopf { border-radius: 4px; border-color: var(--linie); background: transparent; color: var(--tinte); }
  .kopf .knopf:hover { border-color: var(--schiefer); }
  .kopf .knopf-stark { background: var(--tinte); border-color: var(--tinte); color: var(--papier); font-weight: 500; }

  /* ── Auftakt: hell, das Raster liegt darunter ────────────────────── */
  .auftakt-band {
    background:
      linear-gradient(transparent 0 0),
      repeating-linear-gradient(90deg, var(--linie) 0 1px, transparent 1px 25%),
      var(--papier);
    background-size: auto, 100% 100%, auto;
    border-bottom: 1px solid var(--linie);
    padding-bottom: var(--luft-held); margin-bottom: 0;
  }
  .auftakt-band .auftakt { padding-top: var(--luft-held); }
  .auftakt-band .marke {
    color: var(--indigo); font-family: var(--mono); font-size: 10px;
    letter-spacing: .2em; text-transform: uppercase; display: flex;
    align-items: center; gap: 12px;
  }
  .auftakt-band .marke::before {
    content: ""; width: clamp(24px, 4vw, 52px); height: 1px; background: var(--indigo); flex: none;
  }
  .auftakt-band h1 {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(2.25rem, 1.1rem + 5.2vw, 5.2rem);
    line-height: .98; letter-spacing: -.03em; margin: var(--luft-m) 0 0;
    text-wrap: balance; color: var(--tinte);
  }
  .auftakt-band h1 .zweitzeile { color: var(--indigo); display: block; }
  .auftakt-band h1 .punkt { color: var(--bernstein); }
  .auftakt-band .lead { color: var(--schiefer); font-size: var(--schrift-l); line-height: 1.6; max-width: 48ch; }
  .auftakt-band .knopf { border-radius: 4px; }
  .auftakt-band .knopf-stark { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }
  .auftakt-band .fenster { box-shadow: 0 18px 44px rgba(27, 24, 48, .13); border-color: var(--linie); }
  /* Mono-Notiz unten, wie die Ecknotizen auf theostudio.de */
  .auftakt-band .notiz {
    font-family: var(--mono); font-size: var(--schrift-xs); color: var(--schiefer);
    margin-top: var(--luft-l);
  }

  /* ── Bahnen: creme erzählt, weiss ist verbindlich, tinte betont ──── */
  .bahn { padding: var(--luft-bahn) 0; }
  .bahn-creme { background: var(--papier); }
  .bahn-weiss { background: #fff; }
  .bahn-tinte { background: var(--tinte); color: var(--papier); }
  .bahn-tinte h2 { color: var(--papier); }
  .bahn-tinte .marke { color: var(--iris); }
  .bahn + .bahn { border-top: 1px solid var(--linie); }
  .bahn h2, .kopfzeile h2, main h2 {
    font-family: var(--serif); font-weight: 600; font-size: var(--schrift-gross);
    line-height: 1.06; letter-spacing: -.025em; text-wrap: balance;
  }
  main .marke, .kopfzeile .marke {
    font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--indigo); font-weight: 500;
  }
  .knopf { border-radius: 4px; }
  .knopf-stark { background: var(--tinte); border-color: var(--tinte); border-bottom-color: var(--tinte); color: var(--papier); }

  /* ── Fuß: Tinte, grosszügig, wie auf theostudio.de ───────────────── */
  .fuss {
    display: block; background: var(--tinte); color: rgba(244, 241, 233, .66);
    border-top: none; padding: var(--luft-xl) 0 var(--luft-l); font-size: var(--schrift-s);
  }
  .fuss a { color: rgba(244, 241, 233, .66); }
  .fuss a:hover { color: var(--papier); text-decoration: none; border-bottom: 1px solid var(--bernstein); }
  .fuss .spalten {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--luft-l); padding-bottom: var(--luft-l);
    border-bottom: 1px solid rgba(244, 241, 233, .14);
  }
  .fuss .spalten > div:first-child { grid-column: span 2; min-width: 0; }
  .fuss .spalten b {
    display: block; color: var(--papier); font-size: 10px; font-family: var(--mono);
    letter-spacing: .2em; text-transform: uppercase; margin-bottom: var(--luft-s); font-weight: 500;
  }
  .fuss .spalten ul { list-style: none; margin: 0; padding: 0; }
  .fuss .spalten li { margin-bottom: 8px; }
  .fuss .wortmarke {
    font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); font-weight: 600;
    letter-spacing: .13em; color: var(--papier); display: block; margin-bottom: var(--luft-s);
  }
  .fuss .wortmarke .punkt { color: var(--bernstein); }
  .fuss .schluss {
    display: flex; flex-wrap: wrap; gap: var(--luft-s) var(--luft-l); padding-top: var(--luft-m);
    font-family: var(--mono); font-size: var(--schrift-xs); color: rgba(244, 241, 233, .42);
  }
  @media (max-width: 640px) {
    .fuss .spalten > div:first-child { grid-column: span 1; }
    .kopf .untertitel { display: none; }
  }

  /*
   * Der Schlussaufruf war reinweiss — ein 251 px hoher Balken zwischen creme
   * und Tinte, den Louis am 19.08. nicht einordnen konnte: «da ist so ein
   * weisser Balken drin, den ich nicht verstehe.»
   *
   * Nach seiner eigenen Regel vom 22.07. ist WEISS das Verbindliche (Angebot,
   * Bedingungen, Preise) und CREME das Erzaehlende. Ein Aufruf «sag uns, was
   * ihr braucht» ist erzaehlend. Also creme, eine Spur tiefer als der Grund,
   * damit er sich trotzdem absetzt.
   */
  /*
   * ⚠️ Dritter Anlauf. Erst reinweiss ("son weisser Balken, den ich nicht
   * verstehe"), dann creme ("das ist hier jetzt creme und kein Mensch weiss
   * warum"). Beide Male war das Problem dasselbe: ein Band ohne Aussage.
   *
   * Ein Schlussaufruf ist kein Hintergrund, er ist eine Aufforderung. Also
   * bekommt er die Farbe, die im ganzen Haus fuer Handlung steht — Indigo,
   * dieselbe wie der starke Knopf. Damit ist er nicht mehr erklaerungs-
   * beduerftig, sondern das, was er sein soll: die letzte Zeile mit einem Weg
   * heraus.
   */
  section.schluss { background: none; border-top: 1px solid var(--linie); color: var(--tinte); }
  section.schluss h2, section.schluss .abschnitt { color: var(--tinte); }
  section.schluss p, section.schluss .zweit { color: var(--schiefer); }
  section.schluss .karte { background: none; border: none; padding-left: 0; padding-right: 0; }

  /* Auf Tinte traegt das Original — dort ist es hell genug (5,67:1). */
  .fuss .wortmarke .punkt { color: var(--bernstein-hell); }
  .bahn-tinte .punkt { color: var(--bernstein-hell); }

  /* ── Der Beweis hinter dem Auftakt ──────────────────────────────────
     Drei Situationen auf Tinte. Bewusst als erstes dunkles Band der Seite:
     der Auftakt ist hell, hier wird es kurz ernst, danach geht es creme
     weiter. Der Wechsel traegt Bedeutung, nicht Deko — dieselbe Regel wie
     auf dem Papier (weiss = verbindlich, creme = erzaehlend).           */
  .beweis {
    display: grid; gap: var(--luft-l); margin-top: var(--luft-l);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
  .beweis > div { min-width: 0; }
  .beweis .nr {
    font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--iris); margin: 0 0 var(--luft-s);
  }
  .beweis .satz {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
    line-height: 1.12; letter-spacing: -.02em; margin: 0 0 var(--luft-s);
    color: var(--papier); text-wrap: balance;
  }
  .beweis .x { margin: 0; color: rgba(244, 241, 233, .78); line-height: 1.6; max-width: 42ch; }
  .beweis .x strong { color: var(--papier); font-weight: 500; }
  .bahn-tinte .notiz {
    font-family: var(--mono); font-size: var(--schrift-xs);
    color: rgba(244, 241, 233, .45); margin-top: var(--luft-l);
  }
  .bahn-tinte h2 .punkt { color: var(--bernstein-hell); }

/* ==========================================================================
   Handy — Trefferflächen und Schriftgröße
   Ergänzt 07.09.2026. Grund: gemessen bei 375 px Breite rissen 17 von 21
   antippbaren Elementen die Vorgabe — Knöpfe 34 px hoch statt 44, Schrift
   14 px statt 16. Unter 16 px zoomt Safari beim Antippen in die Seite hinein,
   und eine 34-px-Fläche trifft man mit dem Daumen nur mit Absicht.

   Bewusst NUR Trefferfläche und Schriftgröße, keine Umgestaltung: Farben,
   Abstände und Anordnung bleiben, wie sie am 22.08. gebaut wurden.
   ========================================================================== */
@media (max-width: 767px) {
  .knopf,
  .knopf-stark {
    min-height: 44px;
    padding-inline: 18px;
    font-size: 16px;
  }

  /* Die Textlinks im Fließtext und in der Fußzeile bleiben Text — sie
     bekommen die Trefferfläche über die Zeilenhöhe, nicht über einen
     Kasten, sonst zerreißt der Absatz. */
  a {
    font-size: 16px;
  }

  /* 46 statt 44: mit inline-flex und der geerbten Zeilenhöhe kam die
     gemessene Höhe auf 43 px heraus — knapp drunter ist auch drunter. */
  nav a,
  footer a {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
  }

  .wortmarke {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Das Anfrageformular: die Auswahlknöpfe («Zettel oder Whiteboard»,
     «Excel», …) und das Eingabefeld. Gerade hier ist die 16-px-Grenze keine
     Kosmetik — Safari zoomt beim Antippen eines Feldes unter 16 px in die
     Seite hinein, und der Besucher tippt danach in einer verschobenen
     Ansicht weiter. */
  /* `.wahl button` ist spezifischer als ein nacktes `button` und hat die
     34 px sonst zurueckgeholt — Spezifitaet schlaegt Reihenfolge, auch
     innerhalb einer Media-Query. Deshalb steht der Elternteil hier mit drin. */
  .wahl button,
  button,
  .eingabe,
  input,
  select,
  textarea {
    min-height: 44px;
    font-size: 16px;
  }
}