/* 077 Studio · Stylesheet Runde 6 „Gesetzt“
   Papier ist der Raum, Tinte ist die Schrift, 077-gaming.de ist das Exponat.
   Rot ist immer ein Punkt. Grün ist nur Einbeck. Keine Inline-Stile, keine fremden Server.
   Bewegung „Setzen“: wenige Momente, die etwas bedeuten (siehe Abschnitt „Bewegung“). Jede läuft einmal, nur der Frist-Punkt pulsiert. */

/* ---------- Schriften (selbst gehostet, Ligaturen aus der Datei entfernt) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  /* Flächen */
  --papier: #f4f3ef;      /* Grund fast aller Abschnitte */
  --blatt: #fcfbf9;       /* Angebotsblatt, Fensterleiste, Positionsnummern, Felder */
  --tisch: #e8e7e1;       /* nur Konfigurator: Unterlage für das Blatt */
  --tinte: #050505;       /* Schrift, Haarlinien, Knöpfe, die zwei Umkehrflächen */
  /* Schrift */
  --tinte-2: #55544e;     /* Nebentext auf Papier (6,8 : 1, auf Tisch 6,1 : 1) */
  --papier-2: #a9a8a2;    /* Nebentext auf Tinte (8,6 : 1) */
  /* Linien */
  --linie: rgba(5, 5, 5, .16);
  --linie-d: rgba(244, 243, 239, .2);
  /* Bedeutungsfarben: nur Punkte */
  --rot: #e10600;
  --rot-nacht: #f03a22;
  --gruen: #1a9e55;
  --kunde: #21405e;       /* Kundenfarbe: nur in der Vorschau .ps (Abb. 2) */

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --pad: 16px;
  --gap: 16px;
  --maxw: 1360px;
  --hh: 64px;
  --sec: clamp(72px, 9vw, 136px);

  /* Bewegung: vier Dauern, zwei Kurven. Dazu eine lange Dauer nur für den Durchlauf in Abb. 1 (läuft nur auf Wunsch). */
  --t1: .2s; --t2: .4s; --t3: .6s; --t4: .8s;
  --t-lauf: 16s;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Ton (hell) */
  --fg: var(--tinte); --bg: var(--papier); --muted: var(--tinte-2); --line: var(--linie); --punkt: var(--rot); --focus: var(--tinte);
}
@media (min-width: 600px) { :root { --pad: 24px; } }
@media (min-width: 1024px) { :root { --pad: 40px; --gap: 24px; --hh: 76px; } }
@media (min-width: 1600px) { :root { --pad: 56px; --maxw: 1440px; } }
/* Niedrige Fenster unter 1024 px (Handy quer, 400 % Zoom): Kopf 52 statt 64 px */
@media (max-width: 1023px) and (max-height: 500px) { :root { --hh: 52px; } }

/* Keine Ligaturen, nirgends. !important, weil die Kurzschreibweise „font:“ diese Werte sonst zurücksetzt. */
*, *::before, *::after {
  box-sizing: border-box;
  font-variant-ligatures: none !important;
  font-feature-settings: "liga" 0, "clig" 0, "calt" 0, "dlig" 0 !important;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--hh);
  background: var(--papier);
}
@media (max-width: 1099px) { html { scroll-padding-bottom: 88px; } }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 400 17px/1.55 var(--sans);
  font-stretch: 100%;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 1024px) { body { font-size: 18px; } }
@media screen { body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; } body > main { flex: 1 0 auto; } }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p, ul, ol, h1, h2, h3, h4, dl, dd, figure, fieldset { margin: 0; }
:where(ul, ol)[role="list"] { list-style: none; padding: 0; }
[hidden] { display: none !important; }
::selection { background: var(--tinte); color: var(--papier); }
[data-tone="dark"] ::selection { background: var(--papier); color: var(--tinte); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  background: var(--tinte); color: var(--papier); padding: 14px 20px; font-weight: 600; text-decoration: none;
}
.skip:focus-visible { top: 12px; outline-color: var(--tinte); }
.nobr { white-space: nowrap; }
@media (min-width: 700px) { .nw { white-space: nowrap; } }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* ---------- Töne: Papier, Tisch (beide hell) und Tinte ---------- */
[data-tone="light"] { color: var(--tinte); --fg: var(--tinte); --bg: var(--papier); --muted: var(--tinte-2); --line: var(--linie); --punkt: var(--rot); --focus: var(--tinte); }
[data-tone="dark"] { background: var(--tinte); color: var(--papier); --fg: var(--papier); --bg: var(--tinte); --muted: var(--papier-2); --line: var(--linie-d); --punkt: var(--rot-nacht); --focus: var(--papier); }
.sec--papier, .start { background: var(--papier); }
.sec--tisch { background: var(--tisch); --bg: var(--tisch); }
.sec--tinte { background: var(--tinte); }

/* ---------- Raster: 12 Spalten ab 1024 px, Randspalte 1–2, Satzspiegel 3–12 ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--pad));
  margin-inline: auto;
  padding-left: max(var(--pad), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pad), env(safe-area-inset-right, 0px));
}
.sec { position: relative; padding-block: var(--sec); }
/* Zwei Papier-Abschnitte hintereinander: eine Linie in Tinte über die volle Satzbreite */
.sec--papier + .sec--papier { padding-top: calc(var(--sec) * .75); }
.sec--papier + .sec--papier::before, .start + .sec--papier::before {
  content: ""; position: absolute; top: 0; height: 1px; background: var(--tinte); transform-origin: 0 50%;
  left: max(var(--pad), (100% - var(--maxw)) / 2); right: max(var(--pad), (100% - var(--maxw)) / 2);
}
.start + .sec--papier { padding-top: calc(var(--sec) * .75); }

.sec__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.rand {
  margin-bottom: 14px;
  font: 400 13px/1.35 var(--mono);
  letter-spacing: .02em;
  color: var(--muted);
}
.rand__n { font-weight: 500; color: var(--fg); }
.rand__n::after { content: " —"; font-weight: 400; color: var(--muted); }
@media (min-width: 1024px) {
  .sec__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: first baseline; }
  .sec__grid > * { grid-column: 3 / -1; }
  .sec__grid > .rand { grid-column: 1 / 3; grid-row: 1; margin: 0; }
  .sec__grid > .rand + * { grid-row: 1; }
  .rand > span { display: block; }
  .rand__n::after { content: none; }
}

/* ---------- Schrift: drei Überschriftstufen ---------- */
/* Display: H1 jeder Seite und die Schluss-H2. Sperrung nie negativ, Wortabstand etwas größer. */
.h1, .h-xl {
  font-family: var(--sans);
  font-weight: 780;
  font-stretch: 112%;
  font-size: clamp(32px, min(10.7vw, (100vw - 32px) / 8.9), 64px);
  line-height: .96;
  letter-spacing: .004em;
  word-spacing: .06em;
}
@media (min-width: 700px) { .h1, .h-xl { font-size: clamp(64px, 10vw, 96px); } }
@media (min-width: 1024px) { .h1, .h-xl { font-size: clamp(72px, min(7.9vw, 13vh), 124px); line-height: .94; } }
.h2 {
  font-family: var(--sans);
  font-weight: 740;
  font-stretch: 108%;
  font-size: clamp(32px, 8.6vw, 44px);
  line-height: 1;
  letter-spacing: .004em;
  word-spacing: .05em;
}
@media (min-width: 1024px) { .h2 { font-size: clamp(48px, 4.6vw, 68px); } }
.h3, .pl__t, .pz__t, .step__h, .termin__t {
  font: 650 20px/1.2 var(--sans);
  font-stretch: 100%;
  letter-spacing: .002em;
}
@media (min-width: 1024px) { .h3, .pl__t, .pz__t, .step__h, .termin__t { font-size: 24px; } }

.lead { font-size: 19px; line-height: 1.42; max-width: 24em; text-wrap: pretty; }
@media (min-width: 1024px) { .lead { font-size: 21px; } }

/* Der Punkt: Logo, Satzende der Display-Zeilen, „Nur Websites●“ */
.dot {
  display: inline-block; width: .19em; height: .19em; margin-left: .06em;
  border-radius: 50%; background: var(--punkt);
  vertical-align: baseline;
  transform-origin: 50% 50%;
}
.logo__dot { fill: var(--punkt); }
@keyframes dotset { 0% { transform: scale(0); } 50% { transform: scale(1.6); } 80% { transform: scale(.94); } 100% { transform: scale(1); } }

/* Frist-Punkt: pulsiert zweimal (4,8 s, unter den 5 s aus WCAG 2.2.2), danach steht er voll. Keine Endlos-Schleife mehr. */
.live {
  display: inline-block; flex: none;
  width: 8px; height: 8px; margin-right: 9px; border-radius: 50%;
  background: var(--punkt);
  vertical-align: .05em;
  animation: pulse 2.4s ease-in-out 2;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* Status-Zeichen des Protokolls: ■ zugesagt · ◐ läuft · □ offen (gezeichnet, ohne Farbe) */
.sz {
  display: inline-block; flex: none; position: relative;
  width: 11px; height: 11px; margin-right: 10px;
  border: 1.5px solid currentColor;
  vertical-align: -.02em;
}
.sz--voll::after { content: ""; position: absolute; inset: 0; background: currentColor; transform-origin: 0 50%; }
.sz--halb { border-radius: 50%; overflow: hidden; }
.sz--halb::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: currentColor; transform-origin: 0 50%; }

/* Rollende Anzeige für Frist und Summe */
.roll { display: inline-grid; max-width: 100%; overflow: hidden; vertical-align: bottom; }
.roll > span { grid-area: 1 / 1; white-space: nowrap; }
.roll .is-out { animation: rollout var(--t2) var(--ease) forwards; }
.roll .is-new { animation: rollin var(--t2) var(--ease) both; }
@keyframes rollout { to { transform: translateY(-105%); } }
@keyframes rollin { from { transform: translateY(105%); } }

/* ---------- Bewegung „Setzen“: fünf Momente, dazu ein Spielzeug auf Wunsch ----------
   Von selbst bewegt sich nur:
     H1 wird gesetzt (Laden) · Abb. 1 wird angelegt (Laden) · Protokoll wird abgehakt (Hineinscrollen) ·
     Angebotsblatt wird ausgegeben (erstes Erscheinen) · Schluss-H2 wird gesetzt (Hineinscrollen)
   Überschriften H2, Preisliste, Fragen und Abschnittslinien stehen still (Nachbesserung 2, M4).
   Auf Wunsch: Durchlauf in Abb. 1 (Schalter „Ganze Seite“), Hilfslinien (Schalter im Fuß, Taste G).
   Einzige Schleife: der Frist-Punkt. Nur transform, clip-path und opacity. Dauern --t1 bis --t4.
   Auslöser: [data-setzen] bekommt per main.js .is-pre (unterhalb des Bildschirms) und beim Hineinscrollen .is-in.
   Ohne JavaScript und bei reduzierter Bewegung steht alles sofort im Endzustand. */

/* 1 Zeile */
.ln { display: block; padding: .1em 0 .14em; margin: -.1em 0 -.14em; }
/* Die Maske gilt nur, solange die Zeile steigt (danach nichts abgeschnitten, auch nicht mit eigenen Textabständen, WCAG 1.4.12) */
@keyframes lnmaske { from, to { clip-path: inset(0); } }
h1 .ln { animation: lnmaske .92s linear backwards; }
.is-pre > .ln { clip-path: inset(0); }
.is-in > .ln { animation: lnmaske .92s linear backwards; }
.ln > span { display: inline-block; }
/* Feste Zeile in einer Überschrift („Ihre Website.“ / „Und was dazugehört●“) */
.zl { display: block; }
h1 .ln > span { animation: lineup var(--t4) var(--ease-out) both; }
h1 .ln:nth-child(2) > span { animation-delay: .08s; }
h1 .dot { animation: dotset var(--t3) var(--ease-out) .72s both; }
@keyframes lineup { from { transform: translateY(calc(100% + .3em)); } }
.is-pre > .ln > span { transform: translateY(calc(100% + .3em)); }
.is-in > .ln > span { transition: transform var(--t4) var(--ease-out); }
.is-in > .ln:nth-child(2) > span { transition-delay: .08s; }
.is-pre > .ln .dot { transform: scale(0); }
.is-in > .ln .dot { animation: dotset var(--t3) var(--ease-out) .72s both; }

/* Obere Linie der Listen. Sie zieht sich nur beim Protokoll (gehört zum Abhaken), sonst steht sie. */
.preisliste, .protokoll, .faq { position: relative; }
.preisliste::before, .protokoll::before, .faq::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--fg); transform-origin: 0 50%;
}
@keyframes linie { from { transform: scaleX(0); } }
.protokoll.is-pre::before { transform: scaleX(0); }
.protokoll.is-in::before { animation: linie var(--t4) var(--ease-out) backwards; }

/* 4 Haken: Protokoll. Zeile für Zeile wird das Wort freigelegt, dann füllt sich das Kästchen (□ bleibt leer). */
@keyframes freilegen { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes haken { from { transform: scaleX(0); } }
.protokoll .pz { --d: .24s; }
.protokoll .pz:nth-child(2) { --d: .36s; }
.protokoll .pz:nth-child(3) { --d: .48s; }
.protokoll .pz:nth-child(4) { --d: .6s; }
.protokoll.is-pre .pz__s, .protokoll.is-pre .pz__f { clip-path: inset(0 100% 0 0); }
.protokoll.is-pre .sz::after { transform: scaleX(0); }
.protokoll.is-in .pz__s, .protokoll.is-in .pz__f { animation: freilegen var(--t3) var(--ease-out) var(--d) backwards; }
.protokoll.is-in .pz__f { animation-delay: calc(var(--d) + .12s); }
.protokoll.is-in .sz::after { animation: haken var(--t2) var(--ease) calc(var(--d) + .36s) backwards; }
/* /danke/: die drei Zeilen stehen im ersten Bildschirm und setzen sich nach der H1 */
.protokoll--hell::before { animation: linie var(--t4) var(--ease-out) .3s backwards; }
.protokoll--hell .pz__s { animation: freilegen var(--t3) var(--ease-out) calc(var(--d) + .5s) backwards; }
.protokoll--hell .sz::after { animation: haken var(--t2) var(--ease) calc(var(--d) + .86s) backwards; }

/* 3 Ausgabe: Das Angebotsblatt kommt beim ersten Erscheinen wie aus einem Drucker (Schlitz an der Oberkante),
   danach ziehen sich die Schnittmarken, die Summe setzt sich, die Zeilen am Blattende werden abgehakt. */
@keyframes ausgabe { from { transform: translateY(-100%); clip-path: inset(100% 0 0 0); } to { transform: none; clip-path: inset(0 0 0 0); } }
.sheet.is-pre { clip-path: inset(100% 0 0 0); }
.sheet.is-in { animation: ausgabe var(--t4) var(--ease-out) backwards; }
.sheet.is-in .cm::before { animation: cmx var(--t2) var(--ease) .8s backwards; }
.sheet.is-in .cm::after { animation: cmy var(--t2) var(--ease) .8s backwards; }
.sheet.is-pre .sum__main { clip-path: inset(0); }
.sheet.is-in .sum__main { animation: lnmaske 1.4s linear backwards; }
.sheet.is-in .sum__main > * { animation: lineup var(--t4) var(--ease-out) .56s backwards; }
.sheet.is-pre .sheet__pr .sz { clip-path: inset(0 100% 0 0); }
.sheet.is-in .sheet__pr .sz { animation: freilegen var(--t2) var(--ease) 1.04s backwards; }

/* ---------- Knöpfe ---------- */
.btn {
  --b-bg: var(--tinte); --b-fg: var(--papier); --b-bd: var(--tinte);
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 56px; padding: 0 26px;
  background: var(--b-bg); color: var(--b-fg);
  border: 1.5px solid var(--b-bd); border-radius: 0;
  font: 600 17px/1.2 var(--sans);
  font-stretch: 100%;
  text-decoration: none; text-align: left;
  transition: background-color var(--t1) var(--ease), color var(--t1) var(--ease), border-color var(--t1) var(--ease);
}
.btn--paper { --b-bg: var(--papier); --b-fg: var(--tinte); --b-bd: var(--papier); }
.btn--line { --b-bg: transparent; --b-fg: var(--fg); --b-bd: var(--fg); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 15px; gap: 12px; }
/* Eine Regel für alle Knöpfe: Der Pfeil steht am Text. Mit voller Breite steht beides mittig (Muster bei 390 px). */
.btn--full { width: 100%; justify-content: center; }
.btn:active, .btn--line:active { --b-bg: var(--fg); --b-fg: var(--bg); --b-bd: var(--fg); }
.btn--paper:active { --b-bg: transparent; --b-fg: var(--papier); --b-bd: var(--papier); }
.arrow { width: 18px; height: 12px; flex: none; transition: transform var(--t1) var(--ease); }
.btn:focus-visible .arrow, .link-arrow:focus-visible .arrow { transform: translateX(4px); }
.textbtn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 2px;
  background: none; border: 0;
  font: 600 16px/1.2 var(--sans);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding-block: 8px;
  font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px;
}
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (max-width: 599px) { .btns .btn { width: 100%; } }
/* Unter 360 px passt „Website zusammenstellen“ so in eine Zeile */
@media (max-width: 359px) { .btn:not(.btn--sm) { font-size: 16px; padding: 0 16px; gap: 10px; } }
@media (min-width: 1024px) { .btns { margin-top: 32px; } }
@media (min-width: 1024px) and (max-width: 1279px) {
  .start__text .btns .btn { font-size: 15px; padding: 0 18px; gap: 12px; }
  .start__text .btn__lang {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* ---------- Kopf ---------- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
  transition: background-color var(--t1) var(--ease), color var(--t1) var(--ease), border-color var(--t1) var(--ease);
}
.hdr[data-tone="dark"] { background: var(--tinte); border-bottom-color: var(--linie-d); }
.hdr__in { height: var(--hh); display: flex; align-items: center; gap: 12px; }
.hdr__logo { display: flex; align-items: center; min-height: 44px; flex: none; width: 64px; margin-right: auto; text-decoration: none; }
.hdr__logo svg { width: 100%; height: auto; }
.hdr__nav { display: none; }
.hdr__nav ul { display: flex; gap: 32px; }
.hdr__nav a {
  display: inline-block; padding: 10px 0 5px;
  font: 500 16px/1 var(--sans);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size var(--t1) var(--ease);
}
.hdr__nav a[aria-current="page"] { background-size: 100% 1.5px; }
.hdr[data-tone="dark"] .hdr__cta { --b-bg: var(--papier); --b-fg: var(--tinte); --b-bd: var(--papier); }
.hdr__cta-k { display: none; }
.hdr__menu {
  min-height: 44px; min-width: 44px; padding: 0 2px 0 10px;
  background: none; border: 0;
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px;
  font: 500 15px/1 var(--sans);
}
.hdr__menu .bars { width: 22px; height: 10px; position: relative; }
.hdr__menu .bars::before, .hdr__menu .bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.7px; background: currentColor;
  transition: transform var(--t1) var(--ease), top var(--t1) var(--ease);
}
.hdr__menu .bars::before { top: 0; }
.hdr__menu .bars::after { top: 8.3px; }
.hdr__menu[aria-expanded="true"] .bars::before { top: 4px; transform: rotate(45deg); }
.hdr__menu[aria-expanded="true"] .bars::after { top: 4px; transform: rotate(-45deg); }
@media (max-width: 599px) {
  .hdr .hdr__cta { min-height: 40px; padding: 0 14px; font-size: 15px; gap: 10px; }
  .hdr__cta-l { display: none; }
  .hdr__cta-k { display: inline; }
  .hdr__menu .lbl { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 359px) {
  .hdr .hdr__cta .arrow { display: none; }
  .hdr__logo { flex: 0 1 64px; min-width: 36px; }
  .hdr .hdr__cta { min-width: 0; }
}
@media (min-width: 1024px) {
  .hdr__in { gap: 40px; }
  .hdr__logo { width: 76px; margin-right: 0; }
  .hdr__nav { display: block; }
  .hdr__cta { margin-left: auto; }
  .hdr__menu { display: none !important; }
}
/* Ohne JavaScript: Platz für den Menüknopf bleibt reserviert, Navigation als zweite Zeile */
html:not(.js) .hdr__menu { visibility: hidden; }
html:not(.js) .start [data-termin-cta], html:not(.js) [data-js-satz] { display: none; }
@media (max-width: 1023px) {
  html:not(.js) { scroll-padding-top: 112px; }
  html:not(.js) .hdr__in { flex-wrap: wrap; height: auto; min-height: var(--hh); }
  html:not(.js) .hdr__nav { display: block; order: 10; flex-basis: 100%; margin: 0 0 6px; }
  html:not(.js) .hdr__nav ul { flex-wrap: wrap; gap: 0 20px; }
  html:not(.js) .hdr__nav a { padding: 12px 0; }
}
@keyframes rueckfall-weg { to { visibility: hidden; } }
@keyframes rueckfall-kopf { to { flex-wrap: wrap; height: auto; } }
/* Die Navigation steht von Anfang an im Kopf, aber außerhalb des Flusses und unsichtbar (eine Animation startet an
   display: none nie). Nach 3 s ohne main.js rückt sie als zweite Kopfzeile ein. */
@keyframes rueckfall-nav { to { position: static; visibility: visible; } }
@media (max-width: 1023px) {
  html.js:not(.ui) .hdr__menu { animation: rueckfall-weg 0s 3s forwards; }
  html.js:not(.ui) .hdr__in { min-height: var(--hh); animation: rueckfall-kopf 0s 3s forwards; }
  html.js:not(.ui) .hdr__nav { display: block; position: absolute; visibility: hidden; order: 10; flex-basis: 100%; margin: 0 0 6px; animation: rueckfall-nav 0s 3s forwards; }
  html.js:not(.ui) .hdr__nav ul { flex-wrap: wrap; gap: 0 20px; }
  html.js:not(.ui) .hdr__nav a { padding: 12px 0; }
}
.menu {
  position: fixed; left: 0; right: 0; top: var(--hh); bottom: 0; z-index: 59;
  background: var(--papier); color: var(--tinte);
  overflow-y: auto; overscroll-behavior: contain;
  padding-block: 16px 40px;
}
.menu ul { border-top: 1px solid var(--tinte); }
.menu li { border-bottom: 1px solid var(--linie); }
.menu a.menu__link {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 0; text-decoration: none;
  font: 740 clamp(28px, 8.6vw, 40px)/1.05 var(--sans); font-stretch: 108%; letter-spacing: .004em;
}
.menu__meta { margin-top: 28px; font: 400 13px/1.5 var(--mono); color: var(--tinte-2); }
.menu__meta a { color: var(--tinte); display: inline-block; padding-block: 12.5px; }
.menu .btn { margin-top: 20px; }
body.menu-open { overflow: hidden; }
/* Handy quer: Menü in zwei Spalten, Schrift nach der Höhe begrenzt. Alle Punkte, E-Mail und Knopf ohne Scrollen. */
@media (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) {
  .menu { padding-block: 10px 16px; }
  .menu .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .menu nav { grid-row: 1 / span 2; }
  .menu a.menu__link { min-height: 44px; padding: 4px 0; font-size: clamp(20px, min(8.6vw, 7.5vh), 32px); }
  .menu__meta { grid-column: 2; margin-top: 0; }
  .menu .btn { grid-column: 2; margin-top: 12px; }
}

/* ---------- 1 Startbild ---------- */
.start { padding: 28px 0 56px; }
@media (max-width: 359px) { .start { padding-top: 20px; } }
@media (max-width: 399px) {
  .start { padding-top: 14px; }
  .start .h1 { margin-top: 12px; }
  .start__text { margin-top: 16px; }
  .start__text .btns { margin-top: 16px; gap: 8px; }
  .start__text .btns .btn--line { min-height: 48px; }
  .start__text .marks { margin-top: 18px; }
}
.start__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .start { padding: clamp(28px, 4.4vh, 48px) 0 72px; }
  .start__grid {
    container-type: inline-size;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .start .ort, .start .h1 { grid-column: 1 / -1; }
  .start__text { grid-column: 1 / span 6; }
  .abb { grid-column: 7 / -1; }
}
.ort {
  display: inline-flex; align-items: center; gap: 10px; justify-self: start;
  font: 400 13px/1 var(--mono);
  letter-spacing: .02em;
  color: var(--fg);
}
.ort__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gruen); }
.ort--in { font: inherit; }
.start .h1 { margin-top: 18px; }
@media (min-width: 1024px) { .start .h1 { margin-top: 20px; } }
@media (min-width: 1024px) and (max-height: 800px) { .start .h1 { font-size: clamp(72px, min(7.9vw, 11.5vh), 124px); } }
/* Tablet hochkant 560–1023: „Starke Websites.“ (9,456 em) passt in eine Zeile, die H1 steht zweizeilig wie auf dem Rechner
   (Notenrunde 2, Gestaltung M1). Unter 560 bleibt sie dreizeilig, Handy quer (max-height 500) gewinnt, weil es danach steht. */
@media (min-width: 560px) and (max-width: 1023px) { .start .h1 { font-size: min(96px, 10vw, calc((100vw - 48px) / 9.6)); } }

.start__text { margin-top: 24px; }
/* Handy quer: Die H1 richtet sich nach der Höhe, Lead und Knöpfe stehen im ersten Bildschirm (Notenrunde 1, Technik N3) */
@media (max-width: 1023px) and (max-height: 500px) {
  .start { padding-top: 16px; }
  .start .h1 { margin-top: 12px; font-size: clamp(32px, 12.5vh, 64px); }
  .start__text { margin-top: 16px; }
  .start__text .btns { margin-top: 16px; }
}
@media (min-width: 1024px) {
  .start__text { margin-top: clamp(28px, 4.6vh, 48px); padding-right: 8px; display: flex; flex-direction: column; }
  /* 1024–1099: bewusst gestaffelt, die Merkzeile folgt den Knöpfen mit festem Abstand */
  .start__text .marks { margin-top: 32px; }
}
/* Ab 1100 px schließt die Merkzeile bündig mit dem Fenster von Abb. 1 ab, auf jeder Breite und Höhe (Notenrunde 1, N1):
   Satz und Abb. 1 teilen sich eine Rasterzeile. Die Abbildung ist ein Subgrid aus zwei Zeilen: oben das Fenster
   (an der Zeilenunterkante), darunter die Bildunterschrift. Der Satz füllt die Zeile, die Merkzeile steht unten.
   Ist der Satz höher als das Fenster (1100–1279), rückt das Fenster mit nach unten, sonst steht die Merkzeile tiefer. */
@media (min-width: 1100px) {
  .start .ort { grid-row: 1; }
  .start .h1 { grid-row: 2; }
  .start__text { grid-row: 3; align-self: stretch; }
  .start__text .marks { margin-top: auto; padding-top: 36px; border-top: 0; }
  .start__text .marks li:first-child { border-top: 1px solid var(--tinte); }
  .abb { grid-row: 3 / span 2; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); }
  .abb__satz { align-self: end; }
  .abb__cap { grid-row: 2; align-self: start; }
}
/* Niedrige Fenster (1280 × 720, 1366 × 768): Mit der Zählweise unter der Frist braucht die Merkzeile eine Zeile mehr.
   Der Mindestabstand zu den Knöpfen wird kleiner. */
@media (min-width: 1100px) and (max-height: 800px) { .start__text .marks { padding-top: 24px; } }
/* 1100–1279: Der Satz wird etwas knapper, damit das Fenster nur wenig nach unten rückt. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .start__text .lead { font-size: 19px; max-width: none; }
  .start__text .btns { margin-top: 24px; }
  .start__text .marks li { padding: 8px 0 9px; }
  .start__text .marks__t { font-size: 13px; }
}
/* Bis etwa 1130 px bricht die eingesetzte Frist zweizeilig: Die Höhe ist vorab reserviert (kein Sprung, wenn main.js sie einsetzt) */
@media (min-width: 1100px) and (max-width: 1139px) { .start__text .hv__frist { min-height: calc(2 * 1.35em + 2px + 12px * 1.35); } }

/* Merkzeile: Zahl und Etikett, eine Zeile je Zusage */
.marks { margin-top: 28px; border-top: 1px solid var(--tinte); }
.marks li {
  display: grid; grid-template-columns: minmax(6.6rem, max-content) minmax(0, 1fr); align-items: baseline; column-gap: 12px;
  padding: 9px 0 10px;
  border-bottom: 1px solid var(--linie);
}
.marks__n, .pl__n, .sum__main .v, .card__p, .mbar__p {
  font-family: var(--sans);
  font-weight: 760;
  font-stretch: 92%;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.marks__n { font-size: 24px; line-height: 1.1; }
.marks__n small, .pl__n small, .sum__main .ab { font-size: .62em; font-weight: 600; font-stretch: 100%; letter-spacing: .02em; }
.marks__t {
  display: block;
  font: 400 13px/1.35 var(--mono);
  letter-spacing: .01em;
  color: var(--tinte-2);
}
@media (min-width: 1024px) {
  .marks li { grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); column-gap: 16px; }
  .marks__n { font-size: 26px; }
  .marks__t { font-size: 13.5px; }
}
/* Notumbruch nur, wenn die Frist allein nicht mehr in die Zeile passt (vergrößerte Textabstände, WCAG 1.4.12) */
.hv__frist, .pz__f, .sheet__frist { overflow-wrap: break-word; }
html.js .hv__frist:not(.is-ready) > span { visibility: hidden; }
@keyframes rueckfall-zeigen { to { visibility: visible; } }
html.js:not(.ui) .hv__frist:not(.is-ready) > span { animation: rueckfall-zeigen 0s 3s forwards; }
.marks__z { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--tinte-2); }
/* Schmale Schirme: Die Frist „Ihr Angebot spätestens Fr, 06.11., 14:15 Uhr“ braucht zwei Zeilen, darunter die Zählweise.
   Die Höhe ist von Anfang an reserviert (kein Layout-Sprung). */
@media (max-width: 440px) { .hv__frist { min-height: calc(2 * 1.35em + 2px + 12px * 1.35); } }
.plaetze { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; vertical-align: -.05em; }
.platz { display: block; width: 11px; height: 11px; border: 1.5px solid currentColor; }
.marks .platz { border-color: var(--tinte); }
.platz.is-taken { background: currentColor; }

/* ---------- Abb. 1: 077-gaming.de als Exponat ---------- */
.abb { margin-top: 48px; }
@media (min-width: 1024px) { .abb { margin-top: clamp(30px, 5vh, 50px); } }
.abb__satz { position: relative; margin: 0 6px; }
@media (min-width: 1024px) { .abb__satz { margin: 0; } }
.abb__win {
  display: block; position: relative;
  border: 1px solid var(--tinte);
  background: var(--tinte);
  text-decoration: none;
}
.abb__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  height: 28px; padding: 0 10px;
  background: var(--blatt);
  border-bottom: 1px solid var(--tinte);
  font: 400 11.5px/1 var(--mono);
  letter-spacing: .02em;
  color: var(--tinte);
  white-space: nowrap;
}
.abb__nr { color: var(--tinte-2); }
.abb__shot { display: block; position: relative; overflow: hidden; }
.abb__shot img, .abb__phone img { width: 100%; }
.pos {
  position: absolute; width: 18px; height: 18px;
  display: grid; place-items: center;
  transform: translate(-50%, -50%);
  background: var(--blatt); color: var(--tinte);
  font: 500 11px/1 var(--mono);
}
.pos::before, .leg::before { content: attr(data-n); }
.pos--1 { left: 32.2%; top: 89.6%; }   /* Knopf „077 CHECK“ */
.pos--2 { left: 52.8%; top: 7.4%; }    /* Menüpunkt „Set bauen“ */
.pos--3 { left: 22.4%; top: 97.2%; }   /* „311 Einzelstücke im Bestand“ */
.abb__phone {
  position: absolute; right: 5%; bottom: -14%;
  width: 19%;
  border: 4px solid var(--tinte);
  border-radius: 20px;
  overflow: hidden;
  background: var(--tinte);
  box-shadow: 0 0 0 6px var(--papier);
}
/* Schnittmarken: vier Ecken, je zwei Striche 10 × 1 px, 6 px Abstand zum Rahmen */
.cm { position: absolute; width: 0; height: 0; }
.cm::before, .cm::after { content: ""; position: absolute; background: var(--tinte); }
.cm::before { width: 10px; height: 1px; }
.cm::after { width: 1px; height: 10px; }
.cm--tl { left: 0; top: 0; }
.cm--tl::before { right: 6px; top: 0; transform-origin: 100% 50%; }
.cm--tl::after { left: 0; bottom: 6px; transform-origin: 50% 100%; }
.cm--tr { right: 0; top: 0; }
.cm--tr::before { left: 6px; top: 0; transform-origin: 0 50%; }
.cm--tr::after { right: 0; bottom: 6px; transform-origin: 50% 100%; }
.cm--bl { left: 0; bottom: 0; }
.cm--bl::before { right: 6px; bottom: 0; transform-origin: 100% 50%; }
.cm--bl::after { left: 0; top: 6px; transform-origin: 50% 0; }
.cm--br { right: 0; bottom: 0; }
.cm--br::before { left: 6px; bottom: 0; transform-origin: 0 50%; }
.cm--br::after { right: 0; top: 6px; transform-origin: 50% 0; }
.abb__cap {
  display: grid; grid-template-columns: 4.6em minmax(0, 1fr); column-gap: 12px; row-gap: 8px;
  margin: 18px 0 0 6px; max-width: 76%;
  font: 400 12px/1.45 var(--mono);
  letter-spacing: .01em;
  color: var(--tinte-2);
}
@media (min-width: 1024px) { .abb__cap { margin-left: 0; max-width: 74%; } }
.abb__k { font-weight: 500; color: var(--tinte); }
.abb__t a { color: var(--tinte); text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* ↗ als Zeichnung wie .arrow (nicht aus der Systemschrift) */
.ext { display: inline-block; width: .72em; height: .72em; margin-left: .3em; vertical-align: -.02em; overflow: visible; }
.abb__leg { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.leg { display: inline-flex; align-items: center; gap: 7px; }
.leg::before {
  display: grid; place-items: center; width: 16px; height: 16px;
  background: var(--tinte); color: var(--papier);
  font: 500 10px/1 var(--mono);
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .abb__cap { max-width: 76%; column-gap: 10px; grid-template-columns: 4.2em minmax(0, 1fr); }
  .abb__leg { gap: 6px 10px; font-size: 11.5px; }
  .leg { gap: 5px; }
  .leg::before { width: 14px; height: 14px; font-size: 9px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .pos { width: 15px; height: 15px; font-size: 9.5px; }
  .pos--2 { top: 9%; }
  .pos--3 { top: min(97.2%, calc(100% - 8px)); }
}
@media (max-width: 1023px) {
  .abb__phone { width: 27%; right: 4%; bottom: -22%; border-width: 3px; border-radius: 14px; box-shadow: 0 0 0 4px var(--papier); }
  .abb__cap { max-width: 64%; grid-template-columns: minmax(0, 1fr); }
  .abb__leg { grid-column: 1; }
  .pos { width: 15px; height: 15px; font-size: 9.5px; }
}
/* Setzen 2: Schnittmarken ziehen sich, Fenster und Handy steigen aus der Maske (einmal beim Laden) */
.abb .cm::before { animation: cmx var(--t2) var(--ease) both; }
.abb .cm::after { animation: cmy var(--t2) var(--ease) both; }
/* fill-mode backwards: Nach dem Ende bleibt weder transform noch clip-path stehen. */
/* Notenrunde 1 (M1): Fenster und Schalter „Ganze Seite“ liegen in einer gemeinsamen Ebene (.abb__ebene, Geschwister,
   kein Knopf im Link) und steigen zusammen auf. Der Schalter steht so nie neben der Leiste. */
.abb__ebene { position: relative; animation: abbauf var(--t4) var(--ease-out) .3s backwards; }
.abb__phone { animation: abbaufh var(--t4) var(--ease-out) .42s backwards; }
@keyframes cmx { from { transform: scaleX(0); } }
@keyframes cmy { from { transform: scaleY(0); } }
@keyframes abbauf { from { transform: translateY(6%); clip-path: inset(0 0 6% 0); } to { transform: none; clip-path: inset(0); } }
/* Handy: Die Maske liegt 12 px außerhalb, der Papier-Ring (6 px) bleibt auch während der Bewegung ganz. */
@keyframes abbaufh { from { transform: translateY(6%); clip-path: inset(-12px -12px 6% -12px); } to { transform: none; clip-path: inset(-12px); } }

/* Durchlauf (nur auf Wunsch): Schalter „Ganze Seite“ in der Fensterleiste, außerhalb des Links.
   Das lange Bild lädt erst beim Klick (main.js). Es läuft einmal in sechs Zügen nach unten und bleibt dort stehen,
   dann blendet es auf das Startbild zurück (opacity, --t3). Kein Rücklauf. Obere Kante des langen Bildes = Startbild.
   Weg: 1 − 830/10651 = 92,207 %, gestoppt bei 91,95 % (die untersten 12 px der Aufnahme sind ein Streifen der Bildschirmaufnahme). Unter 600 px ist das Fenster zu klein, dort gibt es den Schalter nicht. */
.abb__k-lauf {
  --lk-w: calc(11ch + 38px);
  position: absolute; z-index: 2; top: 1px; right: 1px;
  width: var(--lk-w); height: 27px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 10px; margin: 0;
  background: var(--blatt); color: var(--tinte);
  border: 0; border-left: 1px solid var(--tinte);
  font: 400 11.5px/1 var(--mono); letter-spacing: .02em; white-space: nowrap;
  transition: background-color var(--t1) var(--ease);
}
/* Trefferfläche nach oben bis an die Schnittmarken verlängert */
.abb__k-lauf::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; bottom: 0; }
.abb__k-lauf .hl-btn__box { flex: none; }
.abb__k-lauf[aria-pressed="true"] .hl-btn__box { background: currentColor; }
.abb__k-lauf:focus-visible { outline-offset: -4px; }
/* Platz für den Schalter schon vor main.js freihalten (html.js setzt das Kopfskript), sonst rückt „Eigenes Projekt“ beim Laden nach links (CLS) */
.abb.has-lauf .abb__bar, html.js .abb:has([data-lauf]) .abb__bar { padding-right: calc(11ch + 38px + 12px); }
@media (max-width: 599px), (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .abb.has-lauf .abb__bar, html.js .abb:has([data-lauf]) .abb__bar { padding-right: 10px; }
}
@media (max-width: 599px), (hover: none), (pointer: coarse) {
  .abb__k-lauf { display: none !important; }
}
.abb__lauf { position: absolute; left: 0; top: 0; width: 100%; display: block; transition: opacity var(--t3) var(--ease); }
.abb__lauf img { width: 100%; height: auto; }
.pos { transition: opacity var(--t1) var(--ease); }
.abb.is-lauf .abb__lauf { animation: lauf var(--t-lauf) linear both; }
.abb.is-lauf .pos { opacity: 0; }
.abb.is-halt .abb__lauf { animation-play-state: paused; }
.abb.is-zurueck .abb__lauf { opacity: 0; }
.abb.is-zurueck .pos { opacity: 1; transition-duration: var(--t3); }
@keyframes lauf {
  0%, 4% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
  16%, 20% { transform: translateY(-15.368%); animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
  32%, 36% { transform: translateY(-30.736%); animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
  48%, 52% { transform: translateY(-46.104%); animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
  64%, 68% { transform: translateY(-61.471%); animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
  80%, 84% { transform: translateY(-76.839%); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  96%, 100% { transform: translateY(-91.95%); }
}

/* ---------- 2 Leistung: Preisliste ---------- */
.sec__grid > .h2 + * { margin-top: clamp(32px, 4vw, 56px); }
.preisliste { border-top: 1px solid transparent; }
.preisliste > li { border-bottom: 1px solid var(--linie); }
.pl {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "t p a" "d d d";
  column-gap: 14px; row-gap: 6px; align-items: baseline;
  padding: 20px 0 22px;
  text-decoration: none;
  transition: background-color var(--t1) var(--ease);
}
.pl__t { grid-area: t; }
.pl__r { display: contents; }
.pl__d { grid-area: d; font-size: 16px; line-height: 1.45; color: var(--tinte-2); }
@media (min-width: 600px) { .pl { grid-template-areas: "t p a" "d p a"; } .pl__d { max-width: 26em; } }
.pl__p { grid-area: p; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.pl__n { font-size: clamp(30px, 9.4vw, 40px); line-height: 1; }
.pl__m { margin-top: 8px; font: 400 13px/1.35 var(--mono); letter-spacing: .01em; color: var(--tinte-2); white-space: nowrap; }
.pl__m.plaetze { display: flex; margin-right: 0; gap: 4px; color: var(--tinte); }
.pl__m.plaetze [data-plaetze-sr] { margin-left: 6px; color: var(--tinte-2); }
/* Pfeil auf der Zeile von Titel und Preis (Unterkante auf der Grundlinie, etwas angehoben) */
.pl__a { grid-area: a; align-self: baseline; margin-bottom: 8px; }
.pl__stand { margin-top: 2px; }
/* Unter 360 px einspaltig: Titel und Pfeil, darunter Preis, darunter Beschreibung */
@media (max-width: 359px) {
  .pl { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t a" "p p" "d d"; row-gap: 8px; }
  .pl__p { align-items: flex-start; text-align: left; }
}
.pl:active { background: var(--tisch); }
.pl:focus-visible { outline-offset: -2px; }
@media (min-width: 1024px) {
  .pl { grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-areas: none; column-gap: var(--gap); align-items: first baseline; padding: 26px 0 28px; }
  .pl__t { grid-area: auto; grid-column: 1 / 4; }
  /* Ohne Punktlinie (Nicht übernehmen Nr. 6): Titel Sp. 3–5, Beschreibung ab Sp. 6 (höchstens 20em), Preis rechtsbündig bis Sp. 12.
     Der Preis wächst mit der Breite (56 px erst ab 1440); zwischen Beschreibung und Preis bleibt immer mindestens ein Steg. */
  .pl__d { grid-area: auto; grid-column: 4 / 8; max-width: 20em; font-size: 17px; }
  .pl__p { grid-area: auto; grid-column: 8 / 11; padding-right: 34px; }
  .pl { --pl-n: clamp(40px, 3.9vw, 56px); }
  .pl__n { font-size: var(--pl-n); }
  .pl { margin-inline: -16px; padding-inline: 16px; }
  /* Pfeil auf Höhe der Preiszahl (fester Abstand ab Oberkante der Zeile), nicht auf der Mitte des Blocks:
     in allen drei Zeilen gleich, auch beim Referenzplatz mit zwei Mono-Zeilen (Notenrunde 1, N3) */
  .pl__a { position: absolute; right: 4px; top: calc(26px + var(--pl-n) * .5); margin-top: -6px; }
  .preisliste > li { position: relative; }
  .preisliste > li > .pl { position: static; }
}
.inkl {
  margin-top: 24px;
  font: 400 13px/1.6 var(--mono);
  letter-spacing: .01em;
  color: var(--tinte-2);
}
@media (min-width: 1024px) { .inkl { font-size: 13.5px; } }
.inkl__k { color: var(--tinte); font-weight: 500; }
.inkl--dazu { margin-top: 6px; }
/* ---------- 3 Protokoll (Tinte): Zeile, Zeitpunkt, Status ---------- */
.protokoll { counter-reset: pz; border-top: 1px solid transparent; }
.pz {
  counter-increment: pz;
  display: grid; grid-template-columns: 2.6em minmax(min-content, 1fr) auto; grid-template-areas: "n t t" ". w s";
  column-gap: 12px; row-gap: 8px; align-items: baseline;
  padding: 20px 0 22px;
  border-bottom: 1px solid var(--line);
}
.pz::before { grid-area: n; content: counter(pz, decimal-leading-zero); font: 500 13px/1 var(--mono); letter-spacing: .02em; color: var(--muted); }
.pz__t { grid-area: t; }
.pz__w, .pz__s { font: 400 13px/1.45 var(--mono); letter-spacing: .01em; }
.pz__w { grid-area: w; color: var(--muted); }
.pz__s { grid-area: s; text-align: right; white-space: nowrap; }
/* Zeile 04 darf auf schmalen Schirmen nach „offen ·“ umbrechen, Zeichen und Wort bleiben zusammen */
.pz__s[data-ref-status] { white-space: normal; }
.pz__k { white-space: nowrap; }
/* Frist der laufenden Zeile: eigene Zeile unter dem Status, auf dem Handy über die ganze Breite rechtsbündig */
.pz--frist { grid-template-areas: "n t t" ". w s" ". f f"; }
/* Schmale Schirme: Die Frist bleibt in der Inhaltsspalte (nie unter der Nummer) und bricht dort rechtsbündig um */
@media (max-width: 419px) {
  /* Lange Titelwörter dürfen notfalls brechen (anywhere zählt auch für die Mindestbreite), die Spalten bleiben wie gehabt */
  .pz__t { overflow-wrap: anywhere; }
}
.pz__f { grid-area: f; margin-top: -4px; font: 400 13px/1.45 var(--mono); letter-spacing: .01em; color: var(--muted); white-space: nowrap; text-align: right; }
/* nach der Grundregel, sonst setzt diese das nowrap wieder (WCAG 1.4.12 bei 320 px) */
@media (max-width: 419px) { .pz__f { white-space: normal; font-size: 12px; } }
.pz__f .live { margin-right: 8px; }
.protokoll--regeln .pz { grid-template-areas: "n t t" ". . s"; }
@media (min-width: 1024px) {
  .pz { grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-areas: none; column-gap: var(--gap); padding: 24px 0; }
  .pz::before { grid-area: auto; grid-column: 1; }
  .pz__t { grid-area: auto; grid-column: 2 / 6; }
  .pz__w { grid-area: auto; grid-column: 6 / 8; }
  .pz__s { grid-area: auto; grid-column: 8 / 11; text-align: left; }
  .pz__f { grid-area: auto; grid-column: 8 / 11; grid-row: 2; margin-top: -4px; text-align: left; font-size: 13.5px; }
  .pz__w, .pz__s { font-size: 13.5px; }
  .protokoll--regeln .pz__t { grid-column: 2 / 8; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .protokoll:not(.protokoll--regeln) .pz { row-gap: 6px; }
  .protokoll:not(.protokoll--regeln) .pz__w { grid-column: 2 / 7; grid-row: 2; }
  .protokoll:not(.protokoll--regeln) .pz__s, .protokoll:not(.protokoll--regeln) .pz__f { grid-column: 7 / 11; }
}
@media (min-width: 1280px) {
  /* Zweizeiliger Titel: Die Frist steht trotzdem direkt unter dem Status */
  .pz--frist .pz__t, .pz--frist .pz__w { grid-row: 1 / span 2; }
}
@media (min-width: 1280px) and (max-width: 1365px) { .pz__f { font-size: 12.5px; } }
.protokoll__fuss { margin-top: 24px; font: 400 13px/1.45 var(--mono); letter-spacing: .01em; color: var(--muted); }

/* ---------- 4 Konfigurator (Tisch) ---------- */
.kf__noscript { margin-top: 24px; padding: 16px 20px; border: 1px solid var(--tinte); background: var(--blatt); font-size: 16px; }
.kf__grid { display: grid; gap: 48px; align-items: start; }
.sec__grid > .h2 + .kf__anchor { margin: 0; }
.sec__grid > .h2 + .kf__anchor + .kf__grid, .sec__grid > .h2 + .kf__anchor + noscript + .kf__grid { margin-top: clamp(32px, 4vw, 56px); }
@media (min-width: 1100px) {
  .kf__grid { grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--gap); }
  .kf__steps { grid-column: 1 / 6; }
  .kf__side { grid-column: 6 / -1; }
}
.kf__steps { min-width: 0; }

.prog { margin-bottom: 36px; }
.prog ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; border-top: 1px solid var(--tinte); }
.prog button {
  width: 100%; min-height: 44px; padding: 12px 0 0; background: none; border: 0;
  display: flex; align-items: center; gap: 10px; text-align: left; color: var(--tinte-2);
  font: 400 13px/1.25 var(--mono);
  letter-spacing: .01em;
}
.prog .n {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 22px;
  font: 500 12px/1 var(--mono);
  border: 1px solid transparent;
}
.prog button[aria-current="step"] { color: var(--tinte); }
.prog button[aria-current="step"] .n { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.prog button.is-done .n { border-color: var(--tinte); color: var(--tinte); }
.prog button:disabled { cursor: default; }
.prog .t { display: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 700px) {
  .prog .t { display: block; }
  .prog ol { grid-template-columns: repeat(5, minmax(44px, auto)); justify-content: space-between; column-gap: 12px; }
}
@media (min-width: 700px) and (max-width: 767px), (min-width: 1100px) { .prog button:not([aria-current]) .t { display: none; } }

.step { border: 0; padding: 0; min-width: 0; scroll-margin-top: 24px; }
.step + .step { margin-top: 72px; }
.kf-an .step + .step { margin-top: 0; }
.kf-an .step { scroll-margin-top: calc(24px + 81px); }
.step__legend { padding: 0; margin-bottom: 24px; display: block; width: 100%; }
.step__h { display: block; }
.step__h:focus-visible { outline-offset: 6px; }
.step__intro { color: var(--tinte-2); margin: -8px 0 20px; font-size: 16px; }
.grp + .grp { margin-top: 36px; }
.grp__t { font: 500 13px/1.3 var(--mono); letter-spacing: .02em; color: var(--tinte-2); margin-bottom: 12px; }

.opts { display: grid; }
.opt {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 4px 16px; align-items: start;
  padding: 18px 18px 19px;
  border: 1px solid rgba(5, 5, 5, .3);
  margin-top: -1px;
  background: var(--blatt);
  cursor: pointer;
}
@media (min-width: 600px) { .opt { padding: 20px 22px 21px; gap: 4px 18px; } }
.opt:first-child { margin-top: 0; }
.opt.is-on, .opt:has(input:checked) { z-index: 1; border-color: var(--tinte); box-shadow: inset 0 0 0 1px var(--tinte); }
/* Das Feld liegt unsichtbar über der ganzen Karte: Bei Tab scrollt der Browser so die ganze Karte samt Ring ins Bild (Notenrunde 2, Technik N2) */
.opt input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; pointer-events: none; }
.opt.has-focus, .opt:has(input:focus-visible) { outline: 2px solid var(--tinte); outline-offset: 3px; z-index: 2; }
.opt__m {
  grid-row: 1 / span 2; margin-top: 3px;
  width: 18px; height: 18px; border: 1.5px solid var(--tinte); border-radius: 50%;
  display: grid; place-items: center;
}
.opt__m::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tinte); transform: scale(0); transition: transform var(--t1) var(--ease-out); }
.opt.is-on .opt__m::after, .opt:has(input:checked) .opt__m::after { transform: scale(1); }
.opt--box .opt__m { border-radius: 0; }
.opt--box .opt__m::after {
  width: 10px; height: 5px; border-radius: 0; background: none;
  border-left: 2px solid var(--papier); border-bottom: 2px solid var(--papier);
  transform: translateY(-1px) rotate(-45deg) scale(0);
}
.opt--box.is-on .opt__m, .opt--box:has(input:checked) .opt__m { background: var(--tinte); }
.opt--box.is-on .opt__m::after, .opt--box:has(input:checked) .opt__m::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.opt__t { font: 600 17px/1.3 var(--sans); grid-column: 2; grid-row: 1; }
.opt__s { font-size: 15px; line-height: 1.45; color: var(--tinte-2); grid-column: 2; grid-row: 2; }
.opt__p { grid-column: 3; grid-row: 1; font: 400 13.5px/1.3 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 3px; }
.opt.is-off { cursor: not-allowed; opacity: .45; }
.opt--fix { cursor: default; }

.field { display: grid; gap: 8px; align-content: start; }
.field + .field { margin-top: 22px; }
.field__l { font: 600 16px/1.3 var(--sans); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.dazu-w { border: 0; padding: 0; min-width: 0; }
.dazu-w legend { padding: 0; margin-bottom: 8px; }
.field__l .req, .field__l .opt-tag { font: 400 12px/1 var(--mono); letter-spacing: .02em; color: var(--tinte-2); }
.field__h { font-size: 14px; line-height: 1.45; color: var(--tinte-2); }
.inp {
  width: 100%; min-height: 54px; padding: 12px 16px;
  background: var(--blatt); color: var(--tinte);
  border: 1px solid rgba(5, 5, 5, .55); border-radius: 0;
  font: 400 17px/1.35 var(--sans);
  -webkit-appearance: none; appearance: none;
}
textarea.inp { min-height: 128px; resize: vertical; }
select.inp {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23050505' stroke-width='1.6'/%3E%3C/svg%3E");
  background-position: calc(100% - 18px) 50%; background-size: 12px 8px; background-repeat: no-repeat; padding-right: 44px;
}
.inp::placeholder { color: var(--tinte-2); }
.inp:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; }
.inp[aria-invalid="true"] { border: 2px solid var(--tinte); padding-left: 15px; }
/* Fehler: fetter Text, davor ein roter 8-px-Punkt */
.field__err, .form-err { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 700; color: var(--tinte); }
.field__err::before, .form-err::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rot); }
.fields-2 { display: grid; gap: 22px; align-items: start; }
.fields-2 .field + .field { margin-top: 0; }
@media (min-width: 700px) { .fields-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) and (max-width: 1279px) { .fields-2 { grid-template-columns: 1fr; } }
.fields-2 + .field, .field + .fields-2, .fields-2 + .fields-2 { margin-top: 22px; }
.namefield { margin-bottom: 28px; }

.stepper { margin-top: 18px; padding: 16px 18px; border: 1px solid rgba(5, 5, 5, .3); background: var(--blatt); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.stepper__l { font-weight: 600; margin-right: auto; }
.stepper__c { display: flex; align-items: center; }
.stepper__c button { width: 48px; height: 48px; border: 1px solid var(--tinte); background: transparent; font: 500 22px/1 var(--sans); display: grid; place-items: center; transition: background-color var(--t1) var(--ease), color var(--t1) var(--ease); }
.stepper__c button:disabled { opacity: .35; cursor: not-allowed; }
.stepper__c input { width: 64px; height: 48px; text-align: center; border: 1px solid var(--tinte); border-left: 0; border-right: 0; background: transparent; font: 500 20px/1 var(--mono); -moz-appearance: textfield; appearance: textfield; }
.stepper__c input:focus-visible { outline-offset: -3px; }
.stepper__c input::-webkit-outer-spin-button, .stepper__c input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__p { font: 400 13px/1.3 var(--mono); color: var(--tinte-2); }
.stepper__h { flex-basis: 100%; font-size: 14px; line-height: 1.45; color: var(--tinte-2); }
.stepper__h.is-warn { color: var(--tinte); font-weight: 700; }
.hint { margin-top: 14px; font-size: 15px; color: var(--tinte-2); }

.pflege { border-top: 1px solid var(--tinte); border-bottom: 1px solid var(--linie); padding: 20px 0; }
.pflege__r { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.pflege__r strong { font: 600 17px/1.3 var(--sans); }
.pflege__r span { font: 400 14px/1.3 var(--mono); }
.pflege p { margin-top: 10px; font-size: 15px; color: var(--tinte-2); max-width: 40em; }
.ref { margin-top: 32px; border: 1px solid rgba(5, 5, 5, .3); background: var(--blatt); padding: 22px 18px 24px; }
@media (min-width: 600px) { .ref { padding: 24px 26px 26px; } }
.ref__st { font: 500 13px/1.4 var(--mono); letter-spacing: .02em; }
.switch { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 18px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.switch__ui { position: relative; width: 56px; height: 30px; border: 1.5px solid var(--tinte); flex: none; transition: background-color var(--t1) var(--ease); }
.switch__ui::after { content: ""; position: absolute; top: 4px; left: 4px; width: 19px; height: 19px; background: var(--tinte); transition: transform var(--t1) var(--ease-out), background-color var(--t1) var(--ease); }
.switch input:checked + .switch__ui { background: var(--tinte); }
.switch input:checked + .switch__ui::after { transform: translateX(26px); background: var(--papier); }
.switch input:focus-visible + .switch__ui { outline: 2px solid var(--tinte); outline-offset: 3px; }
.switch input:disabled + .switch__ui { opacity: .35; }
.switch__t { font: 600 17px/1.35 var(--sans); padding-top: 3px; }
.ref__s { margin-top: 12px; color: var(--tinte-2); font-size: 15px; }
.ref__note { margin-top: 16px; font-size: 14px; color: var(--tinte-2); }
.more { margin-top: 16px; }
.more summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px;
}
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "+"; content: "+" / ""; font: 400 16px/1 var(--mono); width: 12px; text-decoration: none; display: inline-block; transition: transform var(--t1) var(--ease); }
.more[open] summary::before { transform: rotate(45deg); }
.more ul { list-style: none; margin-top: 8px; padding: 0; border-top: 1px solid var(--linie); font-size: 15px; color: var(--tinte-2); }
.more ul li { padding: 10px 0; border-bottom: 1px solid var(--linie); }

.kf__nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--tinte); }
.kf__nav .btn { margin-left: auto; }
@media (max-width: 599px) {
  .kf__nav { flex-direction: column-reverse; align-items: stretch; }
  .kf__nav .btn { width: 100%; justify-content: center; margin-left: 0; }
  .kf__nav [data-prev] { align-self: center; }
}
.anfrage__intro { margin-bottom: 28px; }
.anfrage__intro p:first-child { font-size: 17px; }
.anfrage__sig { margin-top: 8px; font: 400 13px/1.4 var(--mono); color: var(--tinte-2); }
.anfrage__ns { margin-top: 12px; font-size: 16px; }
.hp { display: none; }
.submit { margin-top: 32px; }
.submit .btn { min-height: 64px; font-size: 18px; }
.submit .btn[aria-disabled="true"] { cursor: progress; }
.submit__frist { margin-top: 16px; font-size: 16px; }
.submit__b2b, .submit__ds { margin-top: 10px; font-size: 14px; color: var(--tinte-2); }
.submit__ds a { color: var(--tinte); display: inline-block; padding-block: 12px; margin-block: -12px; }
.form-err { margin-top: 18px; }

/* Termin im Konfigurator */
.weg { border: 0; padding: 0; margin: 0 0 32px; min-width: 0; scroll-margin-top: 24px; }
.weg legend { padding: 0; }
.termin { margin: -8px 0 36px; padding: 22px 18px 24px; border: 1px solid var(--tinte); background: var(--blatt); }
@media (min-width: 600px) { .termin { padding: 28px 28px 30px; } }
.termin__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 20px; margin-bottom: 24px; }
.termin__s { font: 400 13px/1.4 var(--mono); color: var(--tinte-2); }
.termin__grp { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.termin__grp legend { padding: 0; }
.tage { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.zeiten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 700px) { .zeiten { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1100px) and (max-width: 1439px) { .zeiten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tage:has(input[aria-invalid="true"]), .zeiten:has(input[aria-invalid="true"]) { outline: 2px solid var(--tinte); outline-offset: 4px; margin-bottom: 14px; }
.tage + .field__err, .zeiten + .field__err { margin-top: 12px; }
.chip {
  position: relative; display: grid; place-items: center; align-content: center; gap: 4px;
  min-height: 48px; min-width: 0; padding: 8px 6px; border: 1px solid rgba(5, 5, 5, .3); background: var(--blatt); cursor: pointer;
  font: 500 14px/1.1 var(--mono); font-variant-numeric: tabular-nums; text-align: center;
  transition: background-color var(--t1) var(--ease), color var(--t1) var(--ease), border-color var(--t1) var(--ease);
}
.chip input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; pointer-events: none; }
.chip.is-on, .chip:has(input:checked) { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.chip:has(input:focus-visible) { outline: 2px solid var(--tinte); outline-offset: 2px; z-index: 1; }
.chip--tag { min-height: 60px; }
.chip__wt { font: 400 12px/1 var(--mono); letter-spacing: .02em; color: var(--tinte-2); }
.chip.is-on .chip__wt, .chip:has(input:checked) .chip__wt { color: var(--papier-2); }
.chip__d { font: 500 15px/1 var(--mono); white-space: nowrap; }
@media (max-width: 420px) { .chip { font-size: 13px; } .chip__d { font-size: 13px; } }
@media (max-width: 379px) { .chip__d { font-size: 16px; } .chip__m { display: none; } }
.termin .field { margin-top: 0; }
.termin__mit { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linie); }
.termin__list { display: grid; gap: 14px; counter-reset: tm; }
@media (min-width: 700px) { .termin__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.termin__list li { counter-increment: tm; font-size: 14px; line-height: 1.45; color: var(--tinte-2); }
.termin__list li::before { content: counter(tm, decimal-leading-zero); display: block; margin-bottom: 8px; font: 500 12px/1 var(--mono); color: var(--tinte-2); }
.termin__list b { display: block; margin-bottom: 4px; font: 600 16px/1.3 var(--sans); color: var(--tinte); }
.submit__termin { margin-top: 16px; font-size: 16px; line-height: 1.5; }

/* Angebotsblatt: weißes Blatt auf dem Tisch, mit Schnittmarken, ab 1100 px mitlaufend */
.kf__side { min-width: 0; padding: 16px 0; }
html:not(.js) .kf__side { display: none; }
.sheet {
  position: relative;
  background: var(--blatt); color: var(--tinte);
  border: 1px solid var(--tinte);
  padding: 20px 18px 22px;
  scroll-margin-top: 24px;
  font: 400 13px/1.45 var(--mono);
  letter-spacing: .01em;
}
@media (min-width: 600px) { .sheet { padding: 26px 28px 28px; } }
.sheet:focus-visible { outline-offset: 20px; }
@media (min-width: 1100px) {
  .kf__side { position: sticky; top: calc(var(--hh) + 16px); }
  .kf__side.is-static { position: static; }
  .sheet { display: flex; flex-direction: column; max-height: calc(100vh - var(--hh) - 64px); max-height: calc(100svh - var(--hh) - 64px); }
  .kf__side.is-static .sheet { max-height: none; }
  .sheet__head, .sheet__end { flex: none; }
  .sheet__mid { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .kf__side:not(.is-static) .sheet { padding-top: 20px; padding-bottom: 20px; }
  .sheet__urlnote { display: none; }
  .sheet.is-ohne-pv .sheet__abb, .sheet.is-ohne-pv .pv--sheet { display: none; }
}
/* 600–1099 px (Tablet): Abb. 2 hat das Fensterformat von Abb. 1 (1440 : 830) und ist nie höher als das echte Fenster.
   Die kleine Website scrollt zu neuen Abschnitten wie auf dem Rechner (konfigurator.js, is-cut).
   Ab 700 px steht das Blatt zweispaltig: links Abb. 2 und Positionen, rechts Summe, Zusagen und Knopf (Notenrunde 1, M2). */
@media screen and (min-width: 600px) and (max-width: 1099px) {
  .pv--sheet .pv__vp { aspect-ratio: 1440 / 830; }
}
@media screen and (min-width: 700px) and (max-width: 1099px) {
  .sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "kopf kopf" "mitte ende"; column-gap: 32px; align-items: start; }
  .sheet__head { grid-area: kopf; }
  .sheet__mid { grid-area: mitte; }
  .sheet__end { grid-area: ende; padding-top: 25px; }
  .sheet__end .sheet__sum { margin-top: 16px; }
}
.sheet__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding-bottom: 10px; border-bottom: 1px solid var(--tinte); }
.sheet__k { font-weight: 500; }
.sheet__for { color: var(--tinte-2); overflow-wrap: anywhere; min-width: 0; }
.sheet__url { margin-top: 8px; font-size: 13.5px; min-height: 1.45em; overflow-wrap: anywhere; }
.sheet__url.is-empty { color: var(--tinte-2); }
.sheet__url .caret { display: inline-block; width: 1px; height: 1.05em; background: var(--tinte); vertical-align: text-bottom; margin-left: 1px; }
.sheet__urlnote { font-size: 12px; color: var(--tinte-2); margin-top: 2px; }
.sheet__abb { margin-top: 16px; margin-bottom: 8px; font-size: 12px; font-weight: 500; }
.sheet__pos { margin: 16px 0 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.sheet__pos li { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; overflow: hidden; }
.sheet__pos li > * { animation: posin var(--t2) var(--ease-out) both; }
.sheet__pos li > .row__fill { animation: none; }
.sheet__pos li.is-static > * { animation: none; }
@keyframes posin { from { transform: translateY(6px); } }
.sheet__pos:focus-visible { outline-offset: 4px; }
.sheet__pos .row--more:first-child { padding-top: 0; }
.row { display: flex; align-items: baseline; gap: 8px; }
.row__l { flex: 0 1 auto; min-width: 0; }
.row__fill { flex: 1 1 auto; min-width: 12px; height: 2px; background: radial-gradient(circle, var(--tinte-2) .7px, transparent .9px) 0 0 / 6px 2px repeat-x; opacity: .7; }
.row__v { flex: none; text-align: right; white-space: nowrap; }
.row--more button { padding: 4px 0; min-height: 32px; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sheet__beratung { color: var(--tinte-2); padding-top: 4px; }
.sheet__sum { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--tinte); font-variant-numeric: tabular-nums; }
.sum__r { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; }
.sum__alt .v { position: relative; color: var(--tinte-2); }
.sum__alt .v::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 1.5px; background: var(--tinte); transform-origin: 0 50%; }
.sum__alt.is-anim .v::after { animation: strike var(--t2) var(--ease) both; }
@keyframes strike { from { transform: scaleX(0); } }
.sum__rabatt { font-weight: 500; overflow: hidden; }
.sum__rabatt.is-anim > * { animation: posin var(--t2) var(--ease-out) both; }
.sum__main { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0 12px; padding: 8px 0 6px; }
.sum__main .k { font-weight: 500; padding-bottom: .5em; }
.sum__main .v { font-size: 40px; line-height: 1; }
@media (min-width: 1024px) { .sum__main .v { font-size: 56px; } }
@media (min-width: 1100px) and (max-width: 1279px) { .sum__main .v { font-size: 46px; } }
.sum__main .roll { justify-items: end; }
.sum__main .ab { margin-right: .2em; }
.sum__termin { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--linie); font-size: 12.5px; }
.sum__termin-k { font-weight: 500; }
.sheet__pr { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linie); }
.sheet__pr li { display: flex; align-items: baseline; padding: 3px 0; }
/* Frist-Punkt steht auf der ersten Zeile, auch wenn die Frist umbricht */
.sheet__pr .live, .schluss__live .live { align-self: flex-start; margin-top: calc((1.45em - 8px) / 2); }
.sheet__frist { font-weight: 500; }
.sheet__datum { margin-top: 6px; font-size: 12px; color: var(--tinte-2); }
.sheet__acts { display: flex; justify-content: flex-end; }
.sheet__print { font: 500 13px/1 var(--mono); min-height: 44px; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.sheet__cta { margin-top: 6px; }
.pause-note { margin-top: 8px; font: 400 13px/1.45 var(--mono); color: var(--muted); }
.sheet .cm::before, .sheet .cm::after { background: var(--tinte); }
.sheet .cm--tl { left: -1px; top: -1px; } .sheet .cm--tr { right: -1px; top: -1px; }
.sheet .cm--bl { left: -1px; bottom: -1px; } .sheet .cm--br { right: -1px; bottom: -1px; }

/* Abb. 2: Vorschau als Strichzeichnung in Tinte. Kundenfarbe nur hier. */
.pv { position: relative; min-width: 0; }
.pv__win { position: relative; background: var(--blatt); border: 1px solid var(--tinte); min-width: 0; }
.pv__bar { display: flex; align-items: center; gap: 8px; height: 22px; padding: 0 8px; background: var(--blatt); border-bottom: 1px solid var(--tinte); }
.pv__url { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 10.5px/1 var(--mono); color: var(--tinte-2); }
.pv__vp { container-type: inline-size; position: relative; overflow: hidden; background: var(--blatt); }
.pv--sheet .pv__vp.is-cut::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--linie); }
.ps { position: relative; font-family: var(--sans); font-size: 2.2cqi; line-height: 1.3; color: var(--tinte); background: var(--blatt); font-stretch: 100%; }
.pv--sheet .ps { transition: transform var(--t4) var(--ease-out); }
.ps i { display: block; height: .55em; background: currentColor; opacity: .18; }
.ps__nav { display: flex; align-items: center; gap: 1.6em; height: 4.2em; padding: 0 2.4em; border-bottom: .07em solid var(--tinte); }
.ps__logo { min-width: 0; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.15em; font-weight: 700; font-stretch: 100%; line-height: 1.1; letter-spacing: .01em; }
.ps__links { margin-left: auto; display: flex; align-items: center; gap: 1.4em; font-size: .85em; font-weight: 600; white-space: nowrap; }
.ps__links > i { width: 4.5em; }
.ps__call { flex: none; width: 5.5em; height: 2.2em; background: var(--tinte); }
.ps__hero { position: relative; background: var(--blatt); color: var(--tinte); border-top: .5em solid var(--kunde); border-bottom: .07em solid var(--tinte); }
.ps__tx { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-width: 0; min-height: 15em; padding: 2em 2.4em 2.2em; }
.ps__kick { width: 40%; }
.ps__kick i { opacity: .3; }
.ps__h { display: block; max-width: 100%; margin-top: .3em; font-size: 4.4em; font-weight: 760; font-stretch: 108%; line-height: 1; letter-spacing: .004em; overflow-wrap: normal; }
.ps__h > span { white-space: nowrap; }
.ps__sub { display: grid; gap: .5em; width: 62%; margin-top: 1.2em; }
.ps__sub i { opacity: .22; }
.ps__sub i + i { width: 70%; }
.ps__btns { display: flex; gap: .7em; margin-top: 1.5em; }
.ps__b { width: 8em; height: 2.6em; background: var(--kunde); border: .1em solid var(--kunde); }
.ps__b--l { background: transparent; border-color: var(--tinte); }
.ps__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2em; padding: 1.8em 2.4em 2.2em; }
.ps__cols > span { display: grid; gap: .55em; padding-top: .8em; border-top: .1em solid var(--tinte); }
.ps__cols > span > i + i { width: 70%; }
.pv-inl:not(.is-on) { display: none !important; }
.pv-opt:not(.is-on) { display: none; }
.pv-opt.is-on { animation: optauf var(--t2) var(--ease-out); }
.pv__vp.is-cut .pv-opt.is-on { animation: none; }
@keyframes optauf { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.ps__tabs { display: flex; flex-wrap: wrap; gap: .45em; padding: .9em 2.4em; border-bottom: .07em solid var(--linie); font-size: .8em; font-weight: 500; }
.ps__tabs > span { min-width: 4.5em; height: 1.9em; padding: .4em .7em; border: .09em solid var(--tinte); white-space: nowrap; }
.ps__tabs .x { background: var(--tinte); }
.ps__tabs .ps__ort { border-style: dashed; }
.ps__note { position: absolute; right: 0; top: 0; background: var(--tinte); color: var(--blatt); font: 500 .75em/1 var(--mono); padding: .7em .9em; }
.ps__sec { padding: 2.2em 2.4em 2.4em; border-top: .07em solid var(--linie); }
.ps__st { display: flex; align-items: center; gap: .7em; margin-bottom: .9em; }
.ps__st > i { width: 7em; height: .9em; opacity: .7; }
.ps__gal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6em; }
.ps__gal i { height: auto; aspect-ratio: 1; opacity: 1; background: var(--tisch); }
.ps__gal i:nth-child(3n+1) { background: var(--papier-2); }
.ps__gal.is-stock i { background: var(--tisch) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-1 1l2-2M0 8l8-8M7 9l2-2' stroke='%23050505' stroke-width='1'/%3E%3C/svg%3E"); }
.ps__jobs > span { display: flex; align-items: center; gap: 1.5em; padding: .9em 0; border-bottom: .07em solid var(--linie); }
.ps__jobs i { flex: 1; }
.ps__jobs > span + span i { flex: .7; }
.ps__jobs b { margin-left: auto; width: 6em; height: 2em; background: var(--tinte); }
.ps__cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4em; }
.ps__cal i { height: 2.2em; opacity: 1; background: none; border: .09em solid var(--tinte); }
.ps__cal i:nth-child(10) { background: var(--kunde); border-color: var(--kunde); }
.ps__kgrid { display: grid; grid-template-columns: minmax(0, 1fr) 42%; gap: 2.4em; }
.ps__lines { display: grid; gap: .8em; align-content: center; }
.ps__lines i:nth-child(2) { width: 72%; }
.ps__lines i:nth-child(3) { width: 44%; height: 2.2em; opacity: 1; background: var(--tinte); margin-top: .6em; }
.ps__map { display: grid; place-items: center; min-height: 8em; padding: 1em; border: .07em dashed var(--tinte); font: 400 .8em/1.3 var(--mono); color: var(--tinte-2); text-align: center; }
/* Kartenstecknadel als Strich: Kreis mit Spitze, kein Wort */
.ps i.ps__pin { width: 1.4em; height: 1.4em; opacity: 1; background: none; border: .14em solid var(--tinte); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.ps__badge { font: 500 .8em/1 var(--mono); background: var(--tinte); color: var(--blatt); padding: .5em .7em; }
.ps__foot { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: 1.2em 2.4em; background: var(--tinte); color: var(--blatt); font-size: .8em; }
.ps__foot > i { width: 30%; opacity: .4; }
.ps__foot .pv-inl { font-weight: 600; }
.ps .flash { animation: pvflash var(--t4) var(--ease); }
@keyframes pvflash { 0%, 70% { box-shadow: inset 0 0 0 .14em var(--tinte); } }
.ps__links .flash, .ps__tabs .flash, .ps__note.flash, .ps__badge.flash, .ps__foot .flash { animation: pvflashi var(--t4) var(--ease); }
@keyframes pvflashi { 0%, 70% { outline: 2px solid var(--tinte); outline-offset: .2em; } }

/* Feste Leiste unten (Handy, Tablet): Tinte, Papierschrift, Knopf Papier */
.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  background: var(--tinte); color: var(--papier); --fg: var(--papier); --bg: var(--tinte); --focus: var(--papier);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(110%); visibility: hidden;
  transition: transform var(--t2) var(--ease), visibility 0s linear var(--t2);
}
.mbar.is-on { transform: none; visibility: visible; transition-delay: 0s; }
.mbar.is-on.is-typing { transform: translateY(110%); visibility: hidden; transition-delay: 0s, var(--t2); }
.mbar__in { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 64px; padding-block: 8px; }
.mbar__p { font-size: 24px; line-height: 1.1; min-width: 0; }
.mbar__row { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; min-width: 0; overflow: hidden; }
.mbar__alt { font: 400 13px/1 var(--mono); color: var(--papier-2); text-decoration-thickness: 1.5px; }
.mbar__p small { display: block; margin-top: 2px; font: 400 12px/1.3 var(--mono); letter-spacing: .01em; color: var(--papier-2); }
.mbar .btn { min-height: 46px; padding: 0 16px; font-size: 16px; white-space: nowrap; flex: none; }
@media (max-width: 399px) { .mbar__rp { display: none; } }
@media (max-width: 359px) { .mbar__alt { display: none !important; } }
@media (min-width: 1100px) { .mbar { display: none; } }
@media (max-width: 1023px) and (max-height: 500px) {
  .mbar__in { min-height: 52px; padding-block: 4px; }
  .mbar .btn { min-height: 44px; }
}
/* Sehr niedrige Fenster (400 % Zoom): keine feste Leiste, „Weiter“ steht ohnehin im Fluss */
@media (max-width: 1099px) and (max-height: 320px) {
  .mbar { display: none; }
  html { scroll-padding-bottom: 0; }
}

/* ---------- 5 Über mich ---------- */
@media (min-width: 1024px) {
  .ueber .h2 { grid-column: 3 / 7; }
  .ueber .ueber__r { grid-column: 7 / 12; grid-row: 1; }
}
.ueber__r .lead { max-width: 30em; }
.sec__grid > .h2 + .ueber__r { margin-top: 20px; }
@media (min-width: 1024px) { .sec__grid > .h2 + .ueber__r { margin-top: 0; } }
.ueber__r .link-arrow { margin-top: 14px; }

/* ---------- 6 Fragen ---------- */
@media (min-width: 1024px) {
  .fragen .h2 { grid-column: 3 / 7; }
  .fragen .faq { grid-column: 7 / -1; grid-row: 1; margin-top: 0; }
}
.faq { border-top: 1px solid transparent; }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) 16px; gap: 24px; align-items: baseline;
  padding: 18px 0; min-height: 44px;
  font: 600 18px/1.3 var(--sans);
}
@media (min-width: 1024px) { .faq summary { font-size: 20px; padding: 20px 0; } }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; content: "+" / ""; justify-self: end;
  font: 400 20px/1 var(--mono);
  transition: transform var(--t1) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 40px 22px 0; color: var(--tinte-2); max-width: 40em; }
.faq .a a { color: var(--tinte); }

/* ---------- 7 Schluss und Fuß (Tinte, ein Block) ---------- */
.schluss { padding-bottom: clamp(48px, 6vw, 88px); }
.schluss__live { margin-top: clamp(24px, 2.6vw, 36px); display: flex; align-items: baseline; font: 400 13.5px/1.45 var(--mono); letter-spacing: .01em; color: var(--papier); }
@media (min-width: 1024px) { .schluss__live { font-size: 15px; } }
.schluss .btns { margin-top: 28px; }
.card { margin-top: 28px; border: 1px solid var(--fg); padding: 20px 22px; font: 400 13.5px/1.55 var(--mono); font-variant-numeric: tabular-nums; max-width: 640px; }
.card__k { font-weight: 500; color: var(--muted); margin-bottom: 10px; }
.card__g { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: baseline; }
.card__n { grid-column: 1; grid-row: 1; font: 600 18px/1.35 var(--sans); overflow-wrap: anywhere; }
.card__u { grid-column: 1; grid-row: 2; color: var(--muted); }
.card__r { grid-column: 1; grid-row: 3; font-weight: 500; }
.card__p { grid-column: 2; grid-row: 1 / 3; align-self: center; text-align: right; font-size: clamp(32px, 3vw, 44px); line-height: 1; }
.card__m { grid-column: 2; grid-row: 3; text-align: right; color: var(--muted); white-space: nowrap; }
.card__d { grid-column: 1 / -1; grid-row: 4; color: var(--muted); }
.card__t { grid-column: 1 / -1; grid-row: 5; color: var(--muted); }
.schluss__mail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: clamp(48px, 5vw, 72px); font: 400 14px/1.4 var(--mono); }
.schluss__mail .k { color: var(--papier-2); }
.schluss__mail a, .mailline a { display: inline-block; padding-block: 12.5px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; overflow-wrap: anywhere; }
.copy { min-height: 44px; padding: 0 12px; border: 1px solid currentColor; background: transparent; font: 400 13px/1 var(--mono); transition: background-color var(--t1) var(--ease), color var(--t1) var(--ease); }

.ftr__in {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 24px;
  padding-top: 28px; padding-bottom: 28px;
  border-top: 1px solid var(--linie-d);
  background-clip: content-box;
  font: 400 13px/1.5 var(--mono); letter-spacing: .01em;
}
.ftr { overflow: hidden; }
.ftr--kurz .ftr__in { border-top: 0; }
.ftr__id { color: var(--papier); }
.ftr__nav ul { display: flex; flex-wrap: wrap; gap: 0 20px; }
.ftr__nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ftr__fine { color: var(--papier-2); }
.hl-btn {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0; margin-top: 6px;
  background: none; border: 0;
  font: 400 12px/1 var(--mono); letter-spacing: .02em; color: var(--papier);
}
/* Den Platz des Schalters schon vor main.js freihalten, sonst wächst der Fuß beim Laden (kurze Seiten wie 404: CLS 0,006) */
html.js .hl-btn[hidden] { display: inline-flex !important; visibility: hidden; }
.hl-btn__box { width: 11px; height: 11px; border: 1.5px solid currentColor; }
.hl-btn[aria-pressed="true"] .hl-btn__box { background: currentColor; }
/* Signet am Blattende: ganz, rechtsbündig an der Satzkante (Notenrunde 1, N4; vorher über die volle Breite und angeschnitten) */
.ftr__big { justify-self: end; width: clamp(150px, 20vw, 272px); margin-top: 28px; }
.ftr__big svg { display: block; width: 100%; height: auto; color: var(--papier); }
@media (min-width: 1024px) {
  .ftr__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; padding-top: 32px; }
  .ftr__id { grid-column: 1 / 5; }
  .ftr__nav { grid-column: 5 / 8; }
  .ftr__fine { grid-column: 8 / 13; }
  .hl-btn { grid-column: 1 / 5; }
  .ftr__big { grid-column: 7 / -1; grid-row: 2 / span 2; align-self: end; margin-top: 24px; }
  .ftr__nav a { margin-block: -12px; }
  .ftr__nav ul { row-gap: 24px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .ftr__nav { grid-column: 5 / 9; }
  .ftr__fine { grid-column: 9 / 13; }
}
/* Hilfslinien (Taste G, Schalter im Fuß): 12 Spalten (unter 1024 px vier) und 8-px-Grundlinie über der ganzen Seite.
   Eine Ebene auf body, ohne Lücken zwischen den Abschnitten, Grundlinie ab Seitenanfang.
   Beim Einschalten blendet sie ein und zieht sich von links (Art 2 „Linie“). */
html.js body { position: relative; }
html.js .wrap { position: relative; }
:root { --hl-n: 12; }
@media (max-width: 1023px) { :root { --hl-n: 4; } }
html.js body::after {
  content: ""; position: absolute; z-index: 80; top: 0; bottom: 0; pointer-events: none;
  left: max(var(--pad), (100% - var(--maxw)) / 2); right: max(var(--pad), (100% - var(--maxw)) / 2);
  mix-blend-mode: difference;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .06) 0, rgba(255, 255, 255, .06) calc((100% - (var(--hl-n) - 1) * var(--gap)) / var(--hl-n)),
      transparent calc((100% - (var(--hl-n) - 1) * var(--gap)) / var(--hl-n)), transparent calc((100% - (var(--hl-n) - 1) * var(--gap)) / var(--hl-n) + var(--gap))),
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(255, 255, 255, .075) 7px 8px);
  opacity: 0; visibility: hidden; clip-path: inset(0 100% 0 0);
  transition: opacity var(--t2) var(--ease), clip-path var(--t4) var(--ease-out), visibility 0s linear var(--t4);
}
html.hl body::after { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); transition-delay: 0s; }

/* ---------- Unterseiten ---------- */
.page-top { padding-top: clamp(40px, 6vw, 96px); }
.sec__grid > .h1 + * { margin-top: clamp(28px, 3.4vw, 48px); }
.um__kopf { display: grid; gap: 32px; }
@media (min-width: 1024px) {
  .um__kopf { grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .um__kopf .lead { grid-column: 1 / 7; }
  .um__kopf .steck { grid-column: 1 / 7; }
}
.steck { border-top: 1px solid var(--tinte); font: 400 13.5px/1.45 var(--mono); letter-spacing: .01em; }
.steck__r { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 2px 16px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.steck dt { color: var(--tinte-2); }
.steck dd { overflow-wrap: anywhere; }
.steck dd a { display: inline-block; padding-block: 12.5px; margin-block: -12.5px; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (max-width: 420px) { .steck__r { grid-template-columns: 1fr; } }
.um__text { max-width: 34em; }
@media (min-width: 1024px) { .um__text { grid-column: 3 / 10; font-size: 19px; } }
.um__kontakt p + p { margin-top: 12px; }
.mailline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font: 400 15px/1.4 var(--mono); }

/* Rechtstexte */
.legal__body { max-width: 46em; }
.legal__body h2 { font: 650 20px/1.25 var(--sans); margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--linie); }
@media (min-width: 1024px) { .legal__body h2 { font-size: 24px; } }
.legal__body h2:first-child { margin-top: 0; border-top-color: var(--tinte); }
.legal__body h3 { font: 600 18px/1.35 var(--sans); margin-top: 24px; }
.legal__body p, .legal__body ul { margin-top: 12px; }
.legal__body ul { padding-left: 1.2em; }
.legal__body a { text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal__body address { font-style: normal; margin-top: 12px; }
.legal__kurz { font-size: 19px; line-height: 1.5; max-width: 34em; }
@media (min-width: 1024px) { .legal__kurz { font-size: 21px; } }
.legal__kurz + .legal__body { margin-top: 48px; }
.legal__stand { margin-top: 48px; font: 400 13px/1.4 var(--mono); color: var(--tinte-2); }

/* Danke und 404 */
.done .lead { max-width: 34em; }
.done__frist { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font: 400 14px/1.45 var(--mono); }
.done__frist .live { align-self: center; margin-right: 2px; }
.done__frist strong { font-weight: 500; }
.done .protokoll { margin-top: 40px; }
.done__fuss { margin-top: 16px; max-width: 46em; font: 400 13px/1.5 var(--mono); letter-spacing: .01em; color: var(--tinte-2); }
[data-danke-satz] { overflow-wrap: anywhere; }
.done__sum { margin-top: 40px; }
.done h1:focus { outline: none; }

/* ---------- Antwort auf Zeigen (nur Geräte mit echter Maus) ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn:hover, .btn--line:hover { --b-bg: var(--fg); --b-fg: var(--bg); --b-bd: var(--fg); }
  .btn:not(.btn--line):not(.btn--paper):hover { --b-bg: transparent; --b-fg: var(--fg); --b-bd: var(--fg); }
  .btn--paper:hover, .hdr[data-tone="dark"] .hdr__cta:hover { --b-bg: transparent; --b-fg: var(--papier); --b-bd: var(--papier); }
  .btn:hover .arrow, .link-arrow:hover .arrow, .pl:hover .pl__a { transform: translateX(4px); }
  .pl:hover { background: var(--tisch); }
  .textbtn:hover { text-decoration-thickness: 3px; }
  .hdr__nav a:hover { background-size: 100% 1.5px; }
  .prog button:not(:disabled):hover { color: var(--tinte); }
  .opt:hover { border-color: var(--tinte); }
  .opt.is-off:hover, .opt--fix:hover { border-color: rgba(5, 5, 5, .3); }
  .stepper__c button:hover:not(:disabled) { background: var(--tinte); color: var(--papier); }
  .chip:hover { border-color: var(--tinte); }
  .row--more button:hover { text-decoration-thickness: 2px; }
  .faq summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .copy:hover { background: var(--fg); color: var(--bg); }
  .ftr__nav a:hover { text-decoration-thickness: 2px; }
  .abb__k-lauf:hover, .hl-btn:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .abb__k-lauf:hover .hl-btn__box, .hl-btn:hover .hl-btn__box { border-width: 2.5px; }
  .abb__t a:hover { text-decoration-thickness: 2px; }
  .abb__win:hover { outline: 1px solid var(--tinte); outline-offset: 0; }
}
.pl:focus-visible .pl__a { transform: translateX(4px); }

/* ---------- Drucken: nur das Angebotsblatt, A4 ---------- */
@media print {
  @page { size: A4; margin: 16mm; }
  html, body { background: #fff; }
  /* Startseite: nur das Angebotsblatt. Unterseiten drucken ihren Inhalt ohne Kopf und Fuß. */
  .skip, .hdr, .ftr, .mbar, #start, #leistung, #protokoll, #ueber, #fragen, #schluss, #konfigurator .sec__grid > :not(.kf__grid), .kf__steps, .sheet__acts, .sheet__cta, .pause-note, .sheet .live { display: none !important; }
  #konfigurator { padding: 0; background: #fff; }
  /* Unterseiten: Tinte-Abschnitte drucken als Tinte auf Weiß, Knöpfe entfallen */
  main [data-tone="dark"] { background: #fff; color: var(--tinte); --fg: var(--tinte); --bg: #fff; --muted: var(--tinte-2); --line: var(--linie); }
  main .btns, main .copy { display: none !important; }
  .kf__grid { display: block; }
  .kf__side { position: static; padding: 0; }
  .sheet { max-height: none !important; display: block !important; border: 0; padding: 0; }
  .sheet__mid { overflow: visible !important; }
  /* Vorschau kleiner, damit Blatt, Summe, Frist und Datum auf eine A4-Seite passen */
  .pv--sheet { width: 72%; }
  /* Im Druck ist Abb. 2 höchstens so hoch wie das Fensterformat von Abb. 1 (1440 : 830 bei 72 % Breite = 74 mm) und wird
     wie auf dem Tablet unten angeschnitten. So passen Summe, Pflege, Termin und Frist bei jeder Auswahl auf eine Seite
     (Notenrunde 2, Technik N3). */
  .pv--sheet .pv__vp { max-height: 74mm; overflow: hidden; border-bottom: 1px solid var(--linie); }
  .sheet { break-inside: avoid; }
  .sheet .cm { display: none; }
  .sheet__datum { display: block !important; }
  /* Gedruckt wird immer die ganze Aufstellung, auch wenn sie auf dem Rechner eingeklappt ist */
  .sheet li.row[data-id][hidden] { display: flex !important; }
  .sheet .row--more { display: none !important; }
  .live { animation: none; }
  .abb__lauf, .abb__k-lauf { display: none !important; }
  html.js body::after { display: none !important; }
  [data-setzen], [data-setzen] *, [data-setzen]::before, [data-setzen] *::before, [data-setzen] *::after { animation: none !important; transition: none !important; }
  .ps, .ps__hero, .ps__foot, .ps__call, .ps__lines i, .ps__gal i, .ps__b, .sz, .sz::before, .sz::after, .ort__dot, .dot { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Kontrastdesigns (forced-colors): Zustände, die sonst nur als Fläche gezeichnet sind ---------- */
@media (forced-colors: active) {
  .opt__m, .opt__m::after, .switch__ui, .switch__ui::after, .sz, .sz::after, .hl-btn__box, .prog .n, .platz { forced-color-adjust: none; }
  .opt__m { border-color: CanvasText; }
  .opt__m::after { background: CanvasText; }
  .opt--box .opt__m::after { background: none; border-color: Canvas; }
  .opt--box.is-on .opt__m, .opt--box:has(input:checked) .opt__m { background: CanvasText; }
  .opt.is-on, .opt:has(input:checked) { outline: 2px solid Highlight; outline-offset: -2px; }
  .switch__ui { border-color: CanvasText; background: Canvas; }
  .switch__ui::after { background: CanvasText; }
  .switch input:checked + .switch__ui { background: CanvasText; }
  .switch input:checked + .switch__ui::after { background: Canvas; }
  .sz { border-color: CanvasText; }
  .sz::after { background: CanvasText; }
  .hl-btn__box { border-color: CanvasText; }
  [aria-pressed="true"] .hl-btn__box { background: CanvasText; }
  .prog .n { color: CanvasText; border-color: transparent; }
  .prog button.is-done .n { border-color: CanvasText; }
  .prog button[aria-current="step"] .n { background: CanvasText; color: Canvas; border-color: CanvasText; }
  .platz, .marks .platz { border-color: CanvasText; }
  .platz.is-taken { background: CanvasText; }
  .chip.is-on, .chip:has(input:checked) { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* ---------- Bewegung reduzieren: alles steht im Endzustand ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* Rückfallebene ohne main.js: Sprünge ohne Bewegung (Dauer 0 s), sie gelten auch bei reduzierter Bewegung */
  html.js:not(.ui) .hv__frist:not(.is-ready) > span { animation: rueckfall-zeigen 0s 3s forwards !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1023px) {
  html.js:not(.ui) .hdr__menu { animation: rueckfall-weg 0s 3s forwards !important; }
  html.js:not(.ui) .hdr__in { animation: rueckfall-kopf 0s 3s forwards !important; }
  html.js:not(.ui) .hdr__nav { animation: rueckfall-nav 0s 3s forwards !important; }
}