/* ============================================================================
   Maschenmappe — Website, Richtung „Das Papierjournal"
   ----------------------------------------------------------------------------
   Gewählt vom Käpt'n am 21.08.2026 aus drei Entwürfen der Gestaltungsanalyse.
   Warm-editorial; die Web-Übersetzung der App-Oberfläche A („Die Zeile"),
   deren gemessene Markenwerte hier als Farbnamen wiederkehren
   (app/src/theme/surfaces/a.ts).

   Regeln der Richtung, die beim Weiterbauen zu halten sind:
   – nie reines Weiß als Seitengrund; die Wärme IST die Identität
   – Haarlinien warm (#D8CEBC), nie kaltgrau
   – Terrakotta (--siegel) nur für: Handlung, Rubrik, aktiver Zustand
   – Honig-Wash (--honig) nur hinter 2–4 Wörtern, nie als Fläche
   – Erhebung durch Farbstufung; Schatten nur, wo etwas wirklich aufliegt

   Kontraste nachgerechnet (WCAG, gegen den jeweiligen Grund):
     Tinte/Bogen 15,1 · Nebentinte/Bogen 7,1 · Nebentinte/Alterspapier 6,4
     Siegel/Bogen 7,0 · Weiß/Siegel 7,5 · Lückenrot/Rotfläche 6,4
     Fußzeile gedämpft 7,6 · Tinte/Honig 13,3
   Kein Wert unterschreitet AA; der Fließtext liegt durchweg über AAA.
   „Große Schrift, hoher Kontrast" ist laut VISION.md eine Anforderung,
   keine Einstellung — das gilt auch für die Website.
   ========================================================================= */

/* --- Schrift: selbst gehostet ---------------------------------------------
   Fraunces steht unter der SIL Open Font License (Kopie: assets/schrift/).
   Sie wird bewusst NICHT von fonts.googleapis.com geladen: eine Seite, die
   „nichts verlässt dein Gerät" verspricht, darf nicht im ersten Byte die
   IP der Leserin an einen Dritten geben. Die Seite ruft keinen fremden
   Rechner auf — weder Schrift noch Zählwerk noch Karte.
   `size-adjust` bringt den Fallback-Stapel auf dieselbe x-Höhe, damit der
   Umbruch beim Nachladen der Schrift nicht springt. */
@font-face{
  font-family:"Fraunces";font-style:normal;font-weight:340 640;font-display:swap;
  src:url("assets/schrift/fraunces-normal-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces";font-style:normal;font-weight:340 640;font-display:swap;
  src:url("assets/schrift/fraunces-normal-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Fraunces";font-style:italic;font-weight:340 640;font-display:swap;
  src:url("assets/schrift/fraunces-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces";font-style:italic;font-weight:340 640;font-display:swap;
  src:url("assets/schrift/fraunces-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Der Fallback, angeglichen. Palatino wirkt braver als Fraunces — das ist die
   im Entwurfsbericht benannte Wette. Angeglichen springt wenigstens nichts. */
@font-face{
  font-family:"Fraunces-Ersatz";
  src:local("Iowan Old Style"),local("Palatino Linotype"),local("Palatino"),
      local("Book Antiqua"),local("Georgia"),local("serif");
  size-adjust:103%;ascent-override:96%;descent-override:24%;line-gap-override:0%;
}

:root{
  --bogen:#FBF6EC;          /* Seitengrund — App-A background */
  --karte:#FFFFFF;
  --alterspapier:#F3EADA;   /* gesunkene Fläche — App-A surfaceSunken */
  --tinte:#23201B;          /* App-A textPrimary */
  --nebentinte:#5A5247;     /* App-A textSecondary */
  --haarlinie:#D8CEBC;      /* App-A border */
  --siegel:#8F3A20;         /* Terrakotta — App-A accent */
  --siegel-tief:#7C3019;
  --aufsiegel:#FFFFFF;
  --honig:#FBE7B8;          /* Zählstreifen — App-A countStrip */
  --gruen:#1F5C42;          /* erledigt */
  --rot:#A3301C;            /* Lückenrot — App GAP_RED */
  --rotflaeche:#FDF3F0;
  --serif:"Fraunces","Fraunces-Ersatz","Iowan Old Style","Palatino Linotype",
          Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","DejaVu Sans Mono",Menlo,Consolas,monospace;
  --breite:1160px;
  --schmal:760px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
  background:var(--bogen);color:var(--tinte);
  font-family:var(--sans);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* Papierfaser: zwei sehr flache Verläufe, kein Bild, keine Anfrage.
     Bewusst an der Wahrnehmungsschwelle — auf einem kalibrierten Schirm
     ahnt man sie, auf einem Telefon in der Sonne stört sie nicht. */
  background-image:
    radial-gradient(circle at 18% 12%,rgba(143,58,32,.020),transparent 42%),
    radial-gradient(circle at 88% 78%,rgba(90,82,71,.020),transparent 46%);
  background-attachment:fixed;
}
img{max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--honig);color:var(--tinte)}
:focus-visible{outline:3px solid var(--siegel);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

.shell{max-width:var(--breite);margin:0 auto;padding:0 28px}
.serif{font-family:var(--serif)}
em.betont{font-style:italic;font-weight:430}
.wash{background:linear-gradient(180deg,transparent 8%,var(--honig) 8%,var(--honig) 92%,transparent 92%);padding:0 .12em}
.eyebrow{
  display:block;font-family:var(--sans);font-size:13px;font-weight:650;letter-spacing:.14em;
  text-transform:uppercase;color:var(--siegel);
}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.nurleser{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Sprung zur Hauptsache — erste Tabulatorstation der Seite. */
.sprungmarke{
  position:absolute;left:16px;top:-100px;z-index:100;
  background:var(--siegel);color:var(--aufsiegel);
  padding:12px 22px;border-radius:0 0 10px 10px;font-weight:650;text-decoration:none;
  transition:top .15s ease;
}
.sprungmarke:focus{top:0}

/* --- Ankündigungsband + Kopf ---------------------------------------------- */
.band{
  background:var(--alterspapier);border-bottom:1px solid var(--haarlinie);
  font-size:13.5px;color:var(--nebentinte);text-align:center;padding:9px 16px;
}
header.kopf{
  border-bottom:1px solid var(--haarlinie);
  background:color-mix(in srgb,var(--bogen) 92%,transparent);
  backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:50;
}
@supports not (backdrop-filter:blur(10px)){header.kopf{background:var(--bogen)}}
.kopf-innen{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:13px 28px;max-width:var(--breite);margin:0 auto;
}
.marke{
  font-family:var(--serif);font-size:25px;font-weight:560;letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap;
}
.marke .punkt{color:var(--siegel)}
nav.haupt{display:flex;gap:26px;font-size:15.5px}
nav.haupt a{text-decoration:none;color:var(--nebentinte);padding:4px 0;border-bottom:2px solid transparent}
nav.haupt a:hover{color:var(--tinte);border-bottom-color:var(--haarlinie)}
.kopf-rechts{display:flex;align-items:center;gap:14px}

/* Die Klappnavigation des Telefons. Bewusst <details>: sie funktioniert ohne
   eine Zeile JavaScript, mit Tastatur und mit Vorleseprogramm. */
.klappnav{display:none;position:relative}
.klappnav>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  border:1.5px solid var(--haarlinie);border-radius:999px;padding:8px 15px;
  font-size:15px;font-weight:600;background:var(--karte);
}
.klappnav>summary::-webkit-details-marker{display:none}
.klappnav>summary .balken{display:block;width:17px;height:1.8px;background:var(--tinte);
  position:relative;border-radius:2px}
.klappnav>summary .balken::before,.klappnav>summary .balken::after{
  content:"";position:absolute;left:0;width:17px;height:1.8px;background:var(--tinte);border-radius:2px}
.klappnav>summary .balken::before{top:-5.5px}
.klappnav>summary .balken::after{top:5.5px}
.klappnav[open]>summary{background:var(--alterspapier);border-color:var(--nebentinte)}
.klappnav-inhalt{
  position:absolute;right:0;top:calc(100% + 10px);min-width:250px;
  background:var(--karte);border:1px solid var(--haarlinie);border-radius:16px;
  box-shadow:0 24px 50px -28px rgba(60,45,25,.55);padding:10px;
  display:flex;flex-direction:column;
}
.klappnav-inhalt a{
  text-decoration:none;color:var(--tinte);font-size:16.5px;
  padding:12px 14px;border-radius:10px;
}
.klappnav-inhalt a:hover{background:var(--alterspapier)}
.klappnav-inhalt a.knopf{color:var(--aufsiegel);margin-top:6px}
.klappnav-inhalt a.knopf:hover{background:var(--siegel-tief)}

.knopf{
  display:inline-block;border:none;cursor:pointer;text-decoration:none;text-align:center;
  font-family:var(--sans);font-size:16px;font-weight:600;line-height:1.3;
  background:var(--siegel);color:var(--aufsiegel);
  padding:12px 26px;border-radius:999px;transition:background .15s ease;
}
.knopf:hover{background:var(--siegel-tief)}
.knopf.gross{font-size:17.5px;padding:15px 32px}
.knopf.geist{background:transparent;color:var(--tinte);border:1.5px solid var(--tinte)}
.knopf.geist:hover{background:var(--alterspapier)}
.knopf.klein{font-size:14.5px;padding:9px 20px}

/* --- Hero ------------------------------------------------------------------ */
.hero{padding:52px 0 24px;overflow:hidden}
.hero-raster{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:56px;align-items:start;padding-top:14px}
h1{
  font-family:var(--serif);font-weight:560;font-size:clamp(38px,4.9vw,67px);
  line-height:1.04;letter-spacing:-.022em;margin:18px 0 26px;
}
h1 .zart{font-weight:400}
.hero-satz{font-size:20px;line-height:1.6;color:var(--nebentinte);max-width:56ch;margin-bottom:32px}
.hero-satz b{color:var(--tinte);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:28px}
.fakten{display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.fakt{
  font-size:13.5px;font-weight:600;color:var(--nebentinte);
  border:1px solid var(--haarlinie);border-radius:999px;padding:7px 15px;background:var(--karte);
}
.fakt::before{content:"✓";color:var(--gruen);margin-right:7px;font-weight:700}

/* --- Das Gerät: echtes Bildschirmfoto, kein Nachbau -----------------------
   Der Entwurfsbericht nannte die CSS-Attrappe als Schwäche. Hier steht das
   Bild der laufenden App (docs/belege/oberflaechen/a-3-reihenansicht.png,
   Oberfläche A, aufgenommen am 21.08.2026 auf 390 px Telefonbreite). */
.geraet-buehne{display:flex;flex-direction:column;align-items:center;gap:14px;padding:6px 0 22px}
.telefon{
  width:min(250px,82%);background:var(--karte);
  border:1.5px solid var(--haarlinie);border-radius:34px;
  box-shadow:0 26px 62px -30px rgba(60,45,25,.42),0 2px 6px rgba(60,45,25,.08);
  padding:9px;position:relative;
}
.telefon::before{
  content:"";position:absolute;top:17px;left:50%;transform:translateX(-50%);
  width:62px;height:4px;border-radius:99px;background:rgba(35,32,27,.13);z-index:2;
}
.telefon img{display:block;width:100%;border-radius:26px;border:1px solid var(--haarlinie)}
.bildnachweis{
  font-size:12.5px;color:var(--nebentinte);text-align:center;max-width:34ch;line-height:1.45;
}
.anmerkung{
  font-size:13.5px;color:var(--nebentinte);max-width:310px;line-height:1.5;
  display:flex;gap:12px;align-items:flex-start;
}
.anmerkung::before{content:"";flex:0 0 36px;border-top:1px solid var(--nebentinte);margin-top:11px}
.anmerkung b{color:var(--tinte);font-weight:650}
.anmerkung.a1{align-self:flex-end;margin-right:2%}
.anmerkung.a2{align-self:flex-start;margin-left:2%}

/* --- Abschnitte allgemein -------------------------------------------------- */
section{padding:86px 0}
.abschnitt-kopf{max-width:730px;margin-bottom:50px}
h2{
  font-family:var(--serif);font-weight:560;font-size:clamp(31px,4vw,46px);
  line-height:1.08;letter-spacing:-.018em;margin:14px 0 18px;
}
.abschnitt-kopf p{font-size:18.5px;color:var(--nebentinte);line-height:1.6}
.abschnitt-kopf p b{color:var(--tinte);font-weight:650}
.hinweiszeile{font-size:14px;color:var(--nebentinte);margin-top:14px}
/* Abschnitt, der direkt an den vorigen anschließt: der Kopf trägt die Luft. */
.dichtdrauf{padding-top:16px}
.leiser{opacity:.78}
.hinweiszeile b{color:var(--tinte);font-weight:650}
.gestuft{background:var(--alterspapier);border-top:1px solid var(--haarlinie);border-bottom:1px solid var(--haarlinie)}

/* --- Vorher/Nachher -------------------------------------------------------- */
.vergleich-raster{display:grid;grid-template-columns:1fr auto 1fr;gap:34px;align-items:center}
.blattkarte{background:var(--karte);border:1px solid var(--haarlinie);border-radius:18px;padding:26px;box-shadow:0 14px 34px -26px rgba(60,45,25,.45)}
.blattkarte h3{font-family:var(--sans);font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:650;color:var(--nebentinte);margin-bottom:16px}
.a4{border:1px solid var(--haarlinie);border-radius:6px;padding:18px 16px;background:#FCFAF4;font-size:11.5px;line-height:1.75;color:var(--nebentinte)}
.a4 p+p{margin-top:9px}
.a4 .t{font-weight:700;font-size:12px;color:var(--tinte);margin-bottom:6px}
.a4 .dicht{font-family:var(--mono);font-size:10.5px;letter-spacing:-.01em;overflow-wrap:anywhere}
.a4 mark{background:transparent;color:var(--rot);font-weight:700}
.pfeilspalte{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--siegel)}
.pfeilspalte svg{display:block}
.pfeilspalte .plabel{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:650;text-align:center;color:var(--nebentinte);max-width:130px}
.reihenkarte-demo{border:3px solid var(--siegel);border-radius:16px;overflow:hidden;background:var(--karte)}
.reihenkarte-demo .satz{font-family:var(--serif);font-size:17px;line-height:1.5;padding:13px 15px 6px}
.reihenkarte-demo .meta{display:flex;gap:8px;flex-wrap:wrap;padding:8px 15px 14px}

/* Zählstreifen (in Vergleich, Demo, Druckseite gleich) */
.zaehlstreifen{
  background:var(--honig);border-bottom:1px solid var(--haarlinie);
  display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 14px;
}
.zaehlstreifen .rlab{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:650;color:var(--nebentinte)}
.zaehlstreifen .rnr{font-family:var(--mono);font-size:24px;font-weight:700;line-height:1.1}
.zaehlstreifen .rnr .von{font-size:12px;font-weight:400;color:var(--nebentinte)}
.zaehlstreifen .abgeleitet{font-size:11px;color:var(--nebentinte);text-align:right;line-height:1.35}
.masche-chip{font-family:var(--mono);font-size:12px;font-weight:700;background:var(--alterspapier);border-radius:999px;padding:4px 11px}
.wdh-chip{font-size:12px;font-weight:650;color:var(--siegel);border:1px solid var(--siegel);border-radius:999px;padding:4px 11px}

/* --- Nummerierte Schritte -------------------------------------------------- */
.schritte-raster{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.schritt-karte{background:var(--alterspapier);border-radius:20px;padding:30px 26px}
.schritt-karte .nr{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--siegel);letter-spacing:.06em;display:block;margin-bottom:14px}
.schritt-karte h3{font-family:var(--serif);font-size:22px;font-weight:560;line-height:1.2;margin-bottom:10px}
.schritt-karte p{font-size:15px;color:var(--nebentinte);line-height:1.55}

/* --- Demo ------------------------------------------------------------------ */
.demo-buehne{
  background:var(--karte);border:1px solid var(--haarlinie);border-radius:22px;
  padding:36px;box-shadow:0 20px 50px -38px rgba(60,45,25,.5);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px;
}
.demo-links h3{font-family:var(--serif);font-size:26px;font-weight:560;margin-bottom:8px}
.demo-links .erl{font-size:15px;color:var(--nebentinte);line-height:1.6;margin-bottom:26px}
.wahl-label{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:650;color:var(--nebentinte);margin-bottom:10px}
.groessen{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.groesse{
  font-family:var(--sans);font-size:16px;font-weight:600;cursor:pointer;
  border:1.5px solid var(--haarlinie);background:var(--karte);color:var(--tinte);
  border-radius:999px;padding:9px 20px;min-width:56px;
}
.groesse:hover{border-color:var(--nebentinte)}
.groesse[aria-pressed="true"]{background:var(--siegel);border-color:var(--siegel);color:var(--aufsiegel)}
.demo-fakten{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--haarlinie);border:1px solid var(--haarlinie);border-radius:14px;overflow:hidden}
.demo-fakt{background:var(--bogen);padding:12px 16px}
.demo-fakt .l{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:650;color:var(--nebentinte)}
.demo-fakt .w{font-family:var(--mono);font-size:17px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
.demo-notiz{font-size:13.5px;color:var(--nebentinte);margin-top:18px;line-height:1.55}
.demo-rechts{display:flex;flex-direction:column;gap:12px}
.demo-reihe-still{border:1px dashed var(--haarlinie);border-radius:14px;padding:10px 16px;color:var(--nebentinte);font-size:14px}
.demo-reihe-still .kz{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:650;display:flex;justify-content:space-between;gap:10px;margin-bottom:2px}
.demo-reihe-still .kz .haken{color:var(--gruen)}
.demo-aktiv{border:3px solid var(--siegel);border-radius:18px;overflow:hidden;background:var(--karte);box-shadow:0 14px 34px -22px rgba(60,45,25,.45)}
.demo-aktiv .zaehlstreifen .rnr{font-size:27px}
.demo-aktiv .satz{font-family:var(--serif);font-size:19px;line-height:1.55;padding:16px 18px 8px}
.abk{border-bottom:1.5px dotted var(--siegel);cursor:help}
.demo-aktiv .meta{display:flex;gap:9px;flex-wrap:wrap;padding:8px 18px 16px;align-items:center;min-height:20px}
.demo-aktiv .meta .masche-chip,.demo-aktiv .meta .wdh-chip{font-size:13px;padding:4px 12px}
.demo-knoepfe{display:flex;gap:12px;align-items:stretch}
.demo-zurueck{
  font-size:15px;font-weight:600;cursor:pointer;background:var(--karte);
  border:1.5px solid var(--haarlinie);border-radius:999px;padding:12px 20px;color:var(--nebentinte);
}
.demo-zurueck:hover:not(:disabled){border-color:var(--nebentinte);color:var(--tinte)}
.demo-weiter{
  flex:1;display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;
  background:var(--siegel);color:var(--aufsiegel);border:none;border-radius:999px;
  padding:14px 24px;font-size:17px;font-weight:650;font-family:var(--sans);
}
.demo-weiter:hover:not(:disabled){background:var(--siegel-tief)}
.demo-weiter .plus{font-size:22px;font-weight:700}
.demo-zurueck:disabled,.demo-weiter:disabled{opacity:.42;cursor:not-allowed}
.demo-ohneskript{
  border:1px dashed var(--haarlinie);border-radius:14px;padding:14px 18px;
  font-size:14.5px;color:var(--nebentinte);line-height:1.55;
}

/* --- Die Druckseite -------------------------------------------------------
   Die Vision nennt sie eine Hauptfunktion und den einzigen Ausgang, den eine
   Anleitung kennt. In dieser Richtung ist sie außerdem das Motiv: die Website
   sieht aus wie das Blatt, das die App druckt. */
.druck-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.druckblatt{
  background:var(--karte);border:1px solid var(--haarlinie);
  box-shadow:0 26px 58px -34px rgba(60,45,25,.55);
  padding:34px 34px 30px;position:relative;
  width:100%;max-width:470px;margin-inline:auto;aspect-ratio:1/1.414;
  display:flex;flex-direction:column;
}
.druckblatt::after{ /* die gefaltete Ecke eines Blatts, das schon dabei war */
  content:"";position:absolute;right:0;bottom:0;width:34px;height:34px;
  background:linear-gradient(225deg,var(--alterspapier) 50%,transparent 50%);
  border-left:1px solid var(--haarlinie);border-top:1px solid var(--haarlinie);
}
.druck-kopf{border-bottom:2px solid var(--tinte);padding-bottom:9px;margin-bottom:14px}
.druck-kopf .zeile{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.druck-kopf h3{font-family:var(--serif);font-size:20px;font-weight:560;line-height:1.15}
.druck-kopf .gr{font-family:var(--mono);font-size:12px;font-weight:700;background:var(--tinte);color:var(--bogen);padding:2px 8px;border-radius:3px;white-space:nowrap}
.druck-kopf .unter{font-size:11.5px;color:var(--nebentinte);margin-top:3px}
.druck-fakten{display:flex;flex-wrap:wrap;gap:5px 14px;font-size:11px;color:var(--nebentinte);margin-bottom:12px}
.druck-fakten b{color:var(--tinte);font-family:var(--mono);font-size:11.5px}
.druck-reihen{list-style:none;display:flex;flex-direction:column;flex:1}
.druck-reihen li{
  display:grid;grid-template-columns:34px 1fr auto;gap:11px;align-items:baseline;
  padding:7px 0;border-bottom:1px solid var(--haarlinie);font-size:12.5px;line-height:1.45;
}
.druck-reihen li .rn{font-family:var(--mono);font-size:12.5px;font-weight:700;text-align:right}
.druck-reihen li .st{font-family:var(--mono);font-size:11px;color:var(--nebentinte);white-space:nowrap}
.druck-reihen li .satz{font-family:var(--serif)}
.druck-reihen li .kasten{display:inline-block;width:11px;height:11px;border:1px solid var(--nebentinte);
  border-radius:2px;margin-right:7px;vertical-align:-1px}
.druck-reihen li.hinweis{grid-template-columns:1fr;border-bottom:none;color:var(--nebentinte);font-size:11.5px;padding-top:11px}
.druck-reihen li.hinweis .schaetz{background:var(--honig);padding:1px 6px;border-radius:3px;font-family:var(--mono);font-size:11px;color:var(--tinte)}
.druck-fuss{
  border-top:1px solid var(--haarlinie);margin-top:10px;padding-top:8px;
  display:flex;justify-content:space-between;gap:12px;font-size:10px;color:var(--nebentinte);
}
.druck-liste{list-style:none;display:flex;flex-direction:column;gap:0}
.druck-liste li{padding:17px 0;border-bottom:1px solid var(--haarlinie);display:flex;gap:15px;align-items:flex-start;font-size:16.5px;line-height:1.55}
.druck-liste li:first-child{border-top:1px solid var(--haarlinie)}
.druck-liste .zeichen{color:var(--siegel);font-weight:700;font-size:15px;font-family:var(--mono);line-height:1.6;flex:0 0 auto}
.druck-liste b{font-weight:650}

/* --- Ehrlichkeit ----------------------------------------------------------- */
.ehrlich-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.karte-links{border-radius:0 18px 18px 0;padding:26px 28px}
.karte-links h3{font-family:var(--serif);font-size:21px;font-weight:560;margin-bottom:10px;line-height:1.2}
.karte-links p{font-size:15px;color:var(--nebentinte);line-height:1.6}
.karte-links p+p{margin-top:12px}
.karte-links b{color:var(--tinte);font-weight:650}
.luecke-karte{background:var(--rotflaeche);border-left:5px solid var(--rot)}
.luecke-karte h3{color:var(--rot)}
.schaetz-karte{background:var(--bogen);border-left:5px solid var(--siegel)}
.verweis-karte{background:var(--bogen);border-left:5px solid var(--tinte)}
.chart{
  font-family:var(--mono);font-size:14px;letter-spacing:.34em;line-height:2;
  background:var(--karte);border:1px solid var(--haarlinie);border-radius:10px;
  padding:13px 16px;margin:15px 0;color:var(--tinte);overflow-x:auto;
}
.chart .frag{color:var(--rot);font-weight:700}
.betrag{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--tinte);background:var(--honig);border-radius:6px;padding:3px 9px;display:inline-block;margin:14px 0}
.verweis-probe{
  background:var(--karte);border:1px solid var(--haarlinie);border-radius:10px;
  padding:13px 15px;margin:15px 0;font-size:14px;line-height:1.5;
}
.verweis-probe .ziel{font-family:var(--serif);font-size:15.5px;color:var(--siegel);text-decoration:underline;text-underline-offset:3px}
.verweis-probe .marke-aus{
  display:block;margin-top:7px;font-family:var(--mono);font-size:11px;letter-spacing:.02em;
  color:var(--nebentinte);border:1px solid var(--haarlinie);border-radius:4px;
  padding:3px 7px;width:fit-content;background:var(--alterspapier);
}
.ehrlich-schluss{
  margin-top:40px;max-width:790px;font-family:var(--serif);font-size:21px;line-height:1.5;
  border-top:1px solid var(--haarlinie);border-bottom:1px solid var(--haarlinie);padding:26px 0;
}

/* --- Zwei Handarbeiten ----------------------------------------------------- */
.handwerk-raster{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center}
.handwerk-liste{list-style:none;display:flex;flex-direction:column;gap:20px;margin-top:6px}
.handwerk-liste li{font-size:16.5px;line-height:1.55;padding-left:28px;position:relative;color:var(--nebentinte)}
.handwerk-liste li::before{content:"—";position:absolute;left:0;color:var(--siegel);font-weight:700}
.handwerk-liste b{color:var(--tinte);font-weight:650}

/* --- Gerät / Offline ------------------------------------------------------- */
.geraet-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.geraet-liste{list-style:none;display:flex;flex-direction:column;gap:0}
.geraet-liste li{padding:18px 0;border-bottom:1px solid var(--haarlinie);display:flex;gap:16px;align-items:flex-start;font-size:16.5px;line-height:1.55}
.geraet-liste li:first-child{border-top:1px solid var(--haarlinie)}
.geraet-liste .zeichen{color:var(--siegel);font-weight:700;font-size:18px;line-height:1.4;flex:0 0 auto}
.geraet-liste b{font-weight:650}
.geraet-bild{display:flex;justify-content:center}
.geraet-bild svg{max-width:100%;height:auto}

/* --- Immer frei ------------------------------------------------------------ */
.frei-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.frei-karte{background:var(--karte);border:1px solid var(--haarlinie);border-radius:18px;padding:26px 24px}
.frei-karte .ikone{width:44px;height:44px;border-radius:999px;background:var(--alterspapier);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.frei-karte h3{font-family:var(--serif);font-size:20px;font-weight:560;margin-bottom:8px}
.frei-karte p{font-size:14.5px;color:var(--nebentinte);line-height:1.55}

/* --- Preis ----------------------------------------------------------------- */
.preis-raster{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:42px;align-items:start}
.preis-karte{background:var(--karte);border:1px solid var(--haarlinie);border-radius:22px;padding:34px}
.preis-karte.haupt{border:2px solid var(--siegel)}
.preis-karte .kat{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:650;color:var(--siegel);margin-bottom:14px}
.preis-karte h3{font-family:var(--serif);font-size:27px;font-weight:560;margin-bottom:6px}
.preis-zahl{font-family:var(--serif);font-size:52px;font-weight:560;letter-spacing:-.02em;margin:16px 0 4px;line-height:1}
.preis-zahl .einheit{font-size:19px;color:var(--nebentinte);font-family:var(--sans);font-weight:500;letter-spacing:0}
.preis-notiz{font-size:13.5px;color:var(--nebentinte);margin-bottom:22px;line-height:1.55}
.preis-notiz b{color:var(--tinte);font-weight:650}
.preis-liste{list-style:none;display:flex;flex-direction:column;gap:11px;font-size:15.5px}
.preis-liste li{display:flex;gap:11px;align-items:flex-start;line-height:1.5}
.preis-liste .haken{color:var(--gruen);font-weight:700;flex:0 0 auto}
.versprechen{background:var(--alterspapier);border-radius:22px;padding:34px 38px}
.versprechen h3{font-family:var(--serif);font-size:24px;font-weight:560;margin-bottom:20px}
.versprechen-raster{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 40px}
.versprechen-raster p{font-size:15.5px;line-height:1.55;color:var(--nebentinte);padding-left:26px;position:relative}
.versprechen-raster p::before{content:"—";position:absolute;left:0;color:var(--siegel);font-weight:700}
.versprechen-raster b{color:var(--tinte);font-weight:650}

/* Der ehrliche Platzhalter: nirgends ein toter Link, sondern ein Kasten,
   der sagt, was fehlt und wann es kommt. */
.folgt-kasten{
  border:1.5px dashed var(--haarlinie);border-radius:18px;background:var(--karte);
  padding:26px 30px;max-width:600px;margin:0 auto;text-align:left;
}
.folgt-kasten .stempel{
  display:inline-block;font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--siegel);
  border:1px solid var(--siegel);border-radius:4px;padding:3px 9px;margin-bottom:14px;
}
.folgt-kasten h3{font-family:var(--serif);font-size:22px;font-weight:560;margin-bottom:8px}
.folgt-kasten p{font-size:15.5px;color:var(--nebentinte);line-height:1.6}
.folgt-kasten p+p{margin-top:10px}
.folgt-kasten b{color:var(--tinte);font-weight:650}

/* --- FAQ ------------------------------------------------------------------- */
.faq-liste{max-width:820px}
details.frage{border-bottom:1px solid var(--haarlinie)}
details.frage:first-of-type{border-top:1px solid var(--haarlinie)}
details.frage>summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;
  font-family:var(--serif);font-size:20.5px;font-weight:560;padding:21px 4px;line-height:1.3;
}
details.frage>summary::-webkit-details-marker{display:none}
details.frage>summary .plusz{color:var(--siegel);font-size:24px;font-weight:400;transition:transform .18s ease;flex:0 0 auto;line-height:1.2}
details.frage[open]>summary .plusz{transform:rotate(45deg)}
details.frage .antwort{padding:0 4px 26px;font-size:16px;color:var(--nebentinte);line-height:1.65;max-width:64ch}
details.frage .antwort b{color:var(--tinte);font-weight:650}

/* --- Schluss + Fußzeile ---------------------------------------------------- */
.schluss{padding:92px 0 100px;text-align:center}
.schluss h2{margin-bottom:14px}
.schluss .vorspann{font-size:18px;color:var(--nebentinte);max-width:54ch;margin:0 auto 32px}
footer{background:var(--tinte);color:var(--bogen)}
.fuss-band{overflow:hidden;padding:50px 0 6px;border-bottom:1px solid rgba(251,246,236,.18)}
.fuss-band .riesig{
  font-family:var(--serif);font-weight:560;text-align:center;white-space:nowrap;
  font-size:clamp(58px,12.4vw,178px);line-height:.88;letter-spacing:-.03em;color:var(--bogen);
}
.fuss-raster{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding:50px 0 38px;font-size:14.5px}
.fuss-raster h2{
  font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:650;color:rgba(251,246,236,.68);margin:0 0 14px;line-height:1.4;
}
.fuss-raster ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.fuss-raster a{color:rgba(251,246,236,.90);text-decoration:none}
.fuss-raster a:hover{color:var(--bogen);text-decoration:underline}
.fuss-raster :focus-visible{outline-color:var(--honig)}
.fuss-satz{color:rgba(251,246,236,.90);line-height:1.6;max-width:38ch;font-size:16.5px}
.fuss-notiz{color:rgba(251,246,236,.68)}
.fuss-unten{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:20px 0 34px;border-top:1px solid rgba(251,246,236,.18);
  font-size:13px;color:rgba(251,246,236,.68);
}
.platzhalter-mark{
  font-size:11px;border:1px solid rgba(251,246,236,.42);border-radius:4px;
  padding:1px 5px;margin-left:6px;letter-spacing:.05em;vertical-align:1px;white-space:nowrap;
}

/* --- Rechtsseiten und andere Textseiten ------------------------------------ */
.textseite{padding:64px 0 88px}
.textseite .shell{max-width:var(--schmal)}
.textseite .rueck{font-size:14.5px;color:var(--nebentinte);text-decoration:none;display:inline-block;margin-bottom:26px}
.textseite .rueck:hover{color:var(--tinte);text-decoration:underline}
.textseite h1{font-size:clamp(34px,5.4vw,52px);margin:10px 0 20px}
.textseite .vorspann{font-size:19px;color:var(--nebentinte);line-height:1.6;margin-bottom:34px}
.textseite h2{font-size:clamp(24px,3.2vw,31px);margin:44px 0 14px}
.textseite h3{font-family:var(--serif);font-size:20px;font-weight:560;margin:26px 0 8px}
.textseite p{font-size:17px;line-height:1.7;color:var(--nebentinte);margin-bottom:14px;max-width:66ch}
.textseite p b,.textseite li b{color:var(--tinte);font-weight:650}
.textseite ul,.textseite ol{margin:0 0 16px 22px;max-width:66ch}
.textseite li{font-size:17px;line-height:1.7;color:var(--nebentinte);margin-bottom:9px}
.textseite a:not(.rueck):not(.knopf){color:var(--siegel);text-underline-offset:3px}
.offen-kasten{
  border-left:5px solid var(--siegel);background:var(--alterspapier);
  border-radius:0 16px 16px 0;padding:24px 28px;margin:0 0 34px;
}
.offen-kasten .stempel{
  display:inline-block;font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--siegel);
  border:1px solid var(--siegel);border-radius:4px;padding:3px 9px;margin-bottom:12px;
}
.offen-kasten p{margin-bottom:10px;color:var(--tinte)}
.offen-kasten p:last-child{margin-bottom:0}
.feldliste{list-style:none;margin:0 0 16px;border-top:1px solid var(--haarlinie)}
.feldliste li{
  display:grid;grid-template-columns:190px 1fr;gap:18px;
  border-bottom:1px solid var(--haarlinie);padding:13px 0;margin:0;font-size:16px;
}
.feldliste .feld{font-weight:650;color:var(--tinte)}
.feldliste .wert{color:var(--nebentinte)}
.feldliste .wert.offen{color:var(--siegel);font-family:var(--mono);font-size:14.5px}

/* --- Umbrüche -------------------------------------------------------------- */
@media (max-width:1000px){
  .schritte-raster{grid-template-columns:repeat(2,1fr)}
  .frei-raster{grid-template-columns:repeat(2,1fr)}
  .ehrlich-raster{grid-template-columns:1fr}
  .karte-links{border-radius:0 16px 16px 0}
}
@media (max-width:920px){
  .demo-buehne{grid-template-columns:1fr;padding:24px;gap:32px}
}
@media (max-width:900px){
  .vergleich-raster{grid-template-columns:1fr}
  .pfeilspalte{flex-direction:row;justify-content:center;gap:16px}
  .pfeilspalte svg{transform:rotate(90deg)}
  .pfeilspalte .plabel{max-width:none}
}
@media (max-width:880px){
  .druck-raster,.handwerk-raster,.geraet-raster{grid-template-columns:1fr;gap:40px}
  .preis-raster,.versprechen-raster{grid-template-columns:1fr}
  .hero-raster{grid-template-columns:1fr;gap:34px}
  .hero{padding-top:52px}
  section{padding:66px 0}
  nav.haupt{display:none}
  .klappnav{display:block}
  .fuss-raster{grid-template-columns:1fr 1fr}
  .feldliste li{grid-template-columns:1fr;gap:3px}
}
@media (max-width:620px){
  .schritte-raster,.frei-raster{grid-template-columns:1fr}
  .kopf-innen{padding:11px 18px;gap:12px}
  /* Auf schmalen Geräten trägt der Kopf nur Marke und Menü; der Handlungsknopf
     wandert in die Klappnavigation, statt die Zeile zu sprengen. */
  .marke{font-size:22px}
  .kopf-rechts>.knopf.klein{display:none}
  .klappnav-inhalt .knopf{margin:8px 6px 4px}
  .shell{padding:0 18px}
  .fuss-raster{grid-template-columns:1fr;gap:32px}
  .hero-cta .knopf{flex:1 1 100%}
  .telefon{width:min(280px,100%)}
  .anmerkung{max-width:none}
  .demo-buehne{padding:20px}
  .folgt-kasten{padding:22px}
  .versprechen{padding:26px 24px}
  .druckblatt{padding:22px 20px 18px}
}

/* --- Die Website auf Papier ------------------------------------------------
   Eine Seite, die von einer Druckseite handelt, darf sich selbst nicht
   unbedruckbar geben. Was auf Papier nichts nützt, fällt weg. */
@page{margin:16mm 15mm}
@media print{
  :root{--bogen:#fff;--karte:#fff;--alterspapier:#fff}
  body{background:#fff;font-size:11pt;color:#000}
  .band,header.kopf,.klappnav,.sprungmarke,.hero-cta,.demo-knoepfe,
  .groessen,.wahl-label,.fuss-band,.geraet-bild,.folgt-kasten .knopf{display:none!important}
  section{padding:14pt 0;break-inside:avoid}
  .shell{max-width:none;padding:0}
  /* Die Antworten werden vor dem Druck von demo.js aufgeklappt — ein
     zugeklapptes <details> druckt seinen Inhalt sonst gar nicht mit. */
  h1{font-size:26pt}
  h2{font-size:17pt}
  .hero-raster,.druck-raster,.geraet-raster,.handwerk-raster,
  .vergleich-raster,.demo-buehne,.ehrlich-raster,.preis-raster,
  .schritte-raster,.frei-raster,.versprechen-raster,.fuss-raster{
    grid-template-columns:1fr;gap:12pt;
  }
  .telefon,.blattkarte,.demo-buehne,.druckblatt,.preis-karte{box-shadow:none}
  details.frage{break-inside:avoid}
  details.frage>summary .plusz{display:none}
  details.frage .antwort{display:block!important;padding-bottom:10pt}
  footer{background:#fff;color:#000}
  .fuss-raster a,.fuss-satz,.fuss-unten,.fuss-raster h2,.fuss-notiz{color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
}