/*
  taporta.com – ein Stylesheet für alle Seiten. Die Seiten des Gastgeber-Bereichs (konto.taporta.com) laden es vor
  konto.css mit: Kopf, Fuß, Knöpfe, Felder, .recht und alle Tokens gelten dort genauso – Namen nur gemeinsam ändern.
  Regeln, gegen die jede Zeile prüfbar ist:
   1 Farben, Schriftgrößen und Abstände nur über Tokens in :root. Neue Farbe? Erst Token, dann benutzen.
   2 Jede Textfarbe hält mindestens 4,5:1 auf jedem Grund, auf dem sie steht (dev/website-test.mjs misst nach).
   3 Höchstens ein gefüllter Knopf pro Seite. Farbe ist Bedeutung, nie Schmuck.
   4 Linien trennen. Eine Karte trägt eine feine Kontur und darunter eine Kante (--sp-tiefe), keinen weichen
     Schwebeschatten. Keine Verläufe, kein Glas, keine Einblendungen beim Scrollen.
   5 Tippflächen mindestens 44 px, auf Touch 48 px. Bei 375 px scrollt nichts seitwärts.
   6 Kein style-Attribut, auch nicht aus dem Skript: Zustände wechseln über Klassen, hidden und disabled. Was stufenlos
     wandert (Grenze im Vergleich der Mappe), setzt das Skript als SVG-Attribut.
   7 Eine Schrift: Inter aus assets/schrift/ (SIL OFL, Lizenz daneben), nie von fremden Servern. Zeichnungen bleiben
     bei der Systemschrift – das Handy darin zeigt die Gäste-App, und die lädt keine Webschrift.
*/
/* INTER, VARIABEL VON 100 BIS 900, in zwei Teilen wie bei Google Fonts: Den zweiten (Polnisch, Tschechisch …) lädt der
   Browser nur, wenn ein Zeichen daraus auf der Seite steht. swap: Der Text steht sofort in der Systemschrift da. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("schrift/inter-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: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("schrift/inter-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* NUR HELL, auch wenn das System dunkel ist. „only“ hält auch Chrome auf Android davon ab, die Seite selbst abzudunkeln. */
:root {
  color-scheme: only light;
  --sp-f-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sp-f-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sp-f-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* KOMPAKT WIE ZEITKUMPEL: Mit 19 px Grundtext und 64 px H1 wirkte die Seite erst bei 90 % Browser-Zoom wertig
     (Sascha, 12.10.2026). Jetzt 16 bis 16,5 px Text, die H1 höchstens 48 px. Unter 16 px geht der Grundtext nicht:
     Eingabefelder erben ihn, und ein kleineres Feld zoomt iOS beim Antippen heran. */
  --sp-fs-mikro: 0.875rem;
  --sp-fs-zusatz: 0.75rem;   /* Zusatz unter der Wortmarke – fest, damit der Kopf seine Höhe hält */
  --sp-fs-klein: 0.9375rem;
  --sp-fs-text: clamp(1rem, 0.96rem + 0.06vw, 1.03125rem);
  --sp-fs-gross: clamp(1.0625rem, 1.02rem + 0.15vw, 1.1875rem);
  --sp-fs-h3: clamp(1.125rem, 1.05rem + 0.2vw, 1.25rem);
  --sp-fs-summe: clamp(1.5rem, 1.4rem + .4vw, 1.875rem);
  --sp-fs-h2: clamp(1.5rem, 1.35rem + 0.7vw, 2.125rem);
  --sp-fs-h1: clamp(2rem, 1.7rem + 1.2vw, 3rem);
  --sp-fs-h1-seite: clamp(1.875rem, 1.6rem + 0.7vw, 2.375rem);
  /* Zwischentitel eine Stufe unter der H2 und klar über den Fragen und Legenden. */
  --sp-fs-h2-seite: clamp(1.25rem, 1.15rem + .35vw, 1.625rem);

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;
  --sp-rand: clamp(16px, 4vw, 64px);
  --sp-breite: 1680px;
  /* Flächen über die ganze Breite (Kopf, Bänder) halten ihren Inhalt mit diesem Innenabstand auf derselben
     Kante wie alles andere. 100 % meint die Breite der Fläche selbst. */
  --sp-kante: max(var(--sp-rand), (100% - var(--sp-breite)) / 2);
  /* HÖCHSTENS 72 PX je Seite eines Abschnitts: Mit 96 px zerfiel die Seite in lose Einzelflächen, mit 128 px lag
     zwischen zwei kurzen Abschnitten mehr Sand als Inhalt. */
  --sp-abschnitt: clamp(48px, 2.25rem + 2vw, 72px);
  /* EIN SPALTENABSTAND für Kacheln, Hälften und Raster: So beginnt die zweite Spalte auf jeder Seite an derselben Kante. */
  --sp-gitter: clamp(16px, .5rem + 1.6vw, 40px);
  --sp-innen: clamp(20px, 1rem + .5vw, 26px);  /* Innenabstand der Kacheln */
  /* Höhe des klebenden Kopfs: Sprungziele und klebende Flächen (Bild im Konfigurator, Summe) halten diesen Abstand. */
  --sp-kopf: calc(var(--sp-griff) + 2 * var(--sp-3));
  --sp-lesen: 66ch;
  /* Feine Ecken: Mit 20 px Radius und kleinerem Innenabstand sahen Karten aus wie Spielzeug. */
  --sp-r: 10px;
  --sp-r-gross: 14px;
  --sp-griff: 44px;
  --sp-dauer: 150ms;

  --sp-grund: #F5F4F1;        /* Sand – auch Hintergrund der Renders (hardware/bauen.mjs), nur gemeinsam ändern */
  --sp-karte: #FFFFFF;
  --sp-leinen: #EEE9E2;       /* Leinen hell, zwischen Sand und Gehäusefarbe – Mappe und Schluss der Startseite, Marke „Nur hier“ */
  /* TINTE MIT EINEM HAUCH PETROL statt Grau: Auch die leisen Töne stehen satt auf Sand, Weiß und Leinen. */
  --sp-text: #16201E;         /* 15,2:1 Sand · 16,7:1 Karte · 13,8:1 Leinen */
  --sp-text-2: #3F4946;       /*  8,5:1 Sand · 9,3:1 Karte · 7,7:1 Leinen */
  --sp-text-3: #58625F;       /*  5,7:1 Sand · 6,3:1 Karte · 5,2:1 Leinen */
  /* NACHTPETROL GIBT DEM AUGE HALT: der gefüllte Knopf, Nummern, Preise, der Griff des Vergleichs und die Marke „Heute“.
     Weiß darauf 12,4:1, als Schrift 11,3:1 auf Sand. */
  --sp-nacht: #0D3B33;
  --sp-akzent: #0E7C66;       /* Hafenpetrol – nur Fläche: Weiß darauf 5,1:1 */
  --sp-akzent-tief: #0A6352;  /* Fläche beim Überfahren: Weiß darauf 7,2:1 */
  --sp-akzent-text: #0A6352;  /* Petrol als Schrift: 6,5:1 Sand · 7,2:1 Karte · 6,0:1 Leinen (#0E7C66 hält auf Sand nur 4,7:1) */
  --sp-akzent-hauch: #E4F0EC; /* Petrol als zarte Fläche (Marke „Alle Wohnungen“): --sp-akzent-text darauf 6,2:1 */
  --sp-hinweis-text: #9E3F1A; /* Terrakotta als Schrift: 6,0:1 Sand · 6,6:1 Karte · 5,5:1 Leinen (#C2552B hält auf Sand nur 4,1:1) */
  --sp-gut-text: #1E6B3E;     /*  5,9:1 Sand · 6,5:1 Karte · 5,4:1 Leinen */
  --sp-warn-text: #8A5A00;    /* Bernstein als Schrift (Ampel „Prüfen“, Wunschfarbe): 5,4:1 Sand · 5,9:1 Karte · 4,9:1 Leinen */
  --sp-auf-akzent: #FFFFFF;
  /* FARBE IST BEDEUTUNG auf der Startseite: Terrakotta zeigt, was mit der Papiermappe schiefgeht, Nachtpetrol, was
     taporta daraus macht. Weiß darauf: 6,6:1 bzw. 12,4:1. */
  --sp-problem: var(--sp-hinweis-text);
  --sp-loesung: var(--sp-nacht);
  /* Linien warm statt grau: gleich kräftig, aber aus dem Braun des Holzes statt aus Tinte. */
  --sp-linie: rgb(92 74 50 / .18);
  --sp-linie-stark: rgb(92 74 50 / .40);
  --sp-feld-rand: rgb(92 74 50 / .62);  /* Rand von Eingabefeld, Zähler und Farbfeld: 3,0:1 Sand · 3,2:1 Karte */
  /* KONTUR UND KANTE: Weiß auf Sand und Sand im weißen Band lagen ohne Rand ineinander („hell auf hell“). Jetzt hebt eine
     feste, feine Linie die Karte ab, darunter liegt eine Kante von einem Pixel – kein weicher Schatten. */
  --sp-kontur: #D6CEC1;
  --sp-tiefe: 0 1px 0 rgb(22 32 30 / .05), 0 1px 3px rgb(22 32 30 / .06);
  --sp-fokus: #0E7C66;

  /* ZEICHNUNGEN (Mappe, Handy, Hände): nur Illustration, nie Text. Warme, flache Töne aus Papier, Karton und Kaffee;
     Striche 2 px in Braunschwarz statt Tinte, damit sie neben der Schrift der Seite zurücktreten. */
  --sp-bild-papier: #FFFDF6;
  --sp-bild-papier-alt: #F1E7D3;
  --sp-bild-tisch: #ECE3D4;   /* Esstisch unter der Papiermappe, wärmer als Leinen – „Heute“ liegt auf Weiß */
  --sp-bild-karton: #C9AE84;
  --sp-bild-fleck: #A9794A;
  --sp-bild-strich: #3A3129;
  --sp-bild-leise: #8A7C69;
  --sp-bild-zeile: #DDD1BC;
  --sp-bild-zettel: #F2DB8A;
  --sp-bild-metall: #D8D2C7;
  --sp-bild-gebaeck: #D7A257;
  --sp-bild-handy: #2E2D31;
  --sp-bild-schatten: #D3C49E; /* Seitenfläche des Pults in Sand – Fläche, kein Schattenwurf */
  /* DIE GERÄTE IN DEN ZEICHNUNGEN sind gezeichnet, nicht gedruckt: Pult und Puck in Sand mit Dunkelblau, die Platte in
     Weiß mit Schwarz. Die Farbfelder der Farbwahl lesen ihre Farben aus hardware/geraete.json, nicht von hier. */
  --sp-bild-pult: #E8DBB7;
  --sp-bild-platte: #F2F0EB;
  --sp-bild-qr: #042F56;
  --sp-bild-schrift: #2A2A2B;
}

@media (pointer: coarse) {
  :root { --sp-griff: 48px; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sp-grund);
  color: var(--sp-text);
  font: var(--sp-fs-text)/1.6 var(--sp-f-ui);
  /* Inter läuft in Lesegröße eine Spur enger, so wie die Schrift es für 16 px vorsieht. */
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--sp-akzent-text); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--sp-fokus); outline-offset: 3px; border-radius: 4px; }
/* TITEL STRAFF UND SATT: Inter wird mit der Größe enger gesetzt (−0,03 em bei der H1), die Gewichte stufen 750 · 700 ·
   650 ab. Die Zeilenhöhe der H1 lässt Platz für Umlaute unter Unterlängen („Gästemappe / für“). */
h1, h2, h3, h4 { margin: 0 0 var(--sp-4); line-height: 1.15; letter-spacing: -.017em; font-weight: 700; }
/* NUR KURZE TITELZEILEN WERDEN AUSGEGLICHEN. Auf Zwischentiteln und Absätzen brachen balance und pretty Zeilen sichtbar zu
   früh um („Auch / die Grenzen“), das wirkte künstlich. Ein einzelnes Wort in der letzten Zeile ist ehrlicher. */
h1, h2 { text-wrap: balance; }
h1 { font-size: var(--sp-fs-h1); line-height: 1.06; letter-spacing: -.032em; font-weight: 750; }
h2 { font-size: var(--sp-fs-h2); line-height: 1.12; letter-spacing: -.026em; }
h3 { font-size: var(--sp-fs-h3); font-weight: 650; }
h4 { font-size: var(--sp-fs-text); line-height: 1.3; letter-spacing: -.011em; font-weight: 650; }
p, ul, ol, dl { margin: 0 0 var(--sp-4); }
/* LESEBREITE GEHÖRT DER SPALTE, NICHT DEM ABSATZ: Breit steht Text in einer Hälfte, Kachel oder Fläche und läuft bis zu
   deren Kante. Mit ch am Absatz hatte jede Schriftgröße ihre eigene rechte Kante, und ein einspaltiger Absatz endete bei
   der halben Seite, rechts daneben war nichts. Nur einspaltig hält die Grenze die Zeilen kurz. */
@media (max-width: 899px) {
  p, li, dd, figcaption { max-width: var(--sp-lesen); }
}
strong, b { font-weight: 650; }
address { margin: 0 0 var(--sp-4); font-style: normal; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
[hidden] { display: none !important; }

.unsichtbar {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprung {
  position: absolute; left: var(--sp-2); top: -80px; z-index: 10;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--sp-r);
  background: var(--sp-karte); color: var(--sp-text); font-weight: 600;
}
.sprung:focus { top: var(--sp-2); }

/* ---------------------------------------------------------------- Kopf */

/* DER KOPF BLEIBT STEHEN, auf jeder Breite. Schmal: Marke, Bestellen und Menü in einer Zeile; Seiten, Anmelden und
   Sprachwahl liegen im Menü. Ab 900 px steht alles in der Zeile, ab 1100 px die Navigation mittig. Er reicht über die
   ganze Breite, sein Inhalt bleibt auf der Kante der Seite. Umbrüche in em: Eine größere Browserschrift schaltet früher
   um, statt überzulaufen. */
html { scroll-padding-top: calc(var(--sp-kopf) + var(--sp-4)); }
.kopf {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-kante);
  background: var(--sp-grund);
  border-bottom: 1px solid var(--sp-linie);
}
.marke {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--sp-griff); margin-right: auto;
  color: var(--sp-text); text-decoration: none;
}
.marke__zeichen { width: 26px; height: 26px; flex: none; }
.marke__wort { width: 85px; height: 22px; flex: none; }
/* WAS TAPORTA IST, STEHT UNTER DEM NAMEN: zweizeilig in der Höhe einer Tippfläche (22 + 3 + 13 px). Ohne feste Zeilenhöhe
   erbte der Zusatz 1,6 vom body, der Kopf würde höher, und alles, was mit --sp-kopf rechnet, säße falsch. */
.marke__text { display: grid; justify-items: start; row-gap: 3px; }
.marke__zusatz { font-size: var(--sp-fs-zusatz); font-weight: 550; line-height: 1.1; letter-spacing: .01em; color: var(--sp-text-2); white-space: nowrap; }
/* UNTER 400 PX ZEIGT DAS MENÜ NUR SEIN ZEICHEN: Das Wort bleibt für Screenreader im Knopf, und der Zusatz unter der Marke
   passt so auch auf ein Handy mit 360 px neben „Bestellen“. */
@media (max-width: 24.99em) {
  .menue > summary { justify-content: center; width: var(--sp-griff); padding: 0; }
  .menue__wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Die Wortmarke im Fuß bleibt klein, auch wenn sie im Kopf ab 900 px wächst. */
.marke--klein .marke__wort { width: 85px; height: 22px; }
.kopf__rechts { display: flex; align-items: center; gap: var(--sp-2); }
.navi, .kopf__rechts > .sprachen, .kopf__anmelden { display: none; }
/* .kopf__rechts davor, sonst gewänne .knopf weiter unten mit display: inline-flex. */
.kopf__rechts .kopf__knopf { padding: 0 var(--sp-3); white-space: nowrap; }
.kopf__anmelden {
  align-items: center; min-height: var(--sp-griff); padding: 0 var(--sp-2);
  color: var(--sp-text); font-size: var(--sp-fs-klein); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.kopf__anmelden:hover { color: var(--sp-akzent-text); text-decoration: underline; }

/* „DE | EN“: zwei Kürzel mit feinem Strich dazwischen; die eigene Sprache in Tinte, die andere leiser. */
.sprachen { display: flex; align-items: center; margin: 0; font-size: var(--sp-fs-klein); font-weight: 650; letter-spacing: .04em; }
.sprachen > * { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: var(--sp-griff); min-height: var(--sp-griff); padding: 0 var(--sp-2); }
.sprachen > * + *::before { content: ""; position: absolute; left: 0; top: 50%; height: 1em; transform: translateY(-50%); border-left: 1px solid var(--sp-linie-stark); }
/* Die eigene Sprache ist nicht nur dunkler, sondern auch unterstrichen – Farbe allein trüge die Bedeutung nicht. */
.sprachen span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; }
.sprachen a { color: var(--sp-text-2); text-decoration: none; }
.sprachen a:hover { color: var(--sp-text); text-decoration: underline; }

/* Das Menü steht neben „Bestellen“ und sieht aus wie er: weiße Fläche, Kontur, Kante. */
.menue > summary {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--sp-griff); padding: 0 var(--sp-3);
  border: 1px solid var(--sp-kontur); border-radius: var(--sp-r); background: var(--sp-karte); box-shadow: var(--sp-tiefe);
  font-size: var(--sp-fs-klein); font-weight: 650; list-style: none; cursor: pointer;
}
.menue > summary:hover { border-color: var(--sp-text); }
.menue > summary::-webkit-details-marker { display: none; }
.menue[open] > summary { border-color: var(--sp-text); }
.menue__zeichen { width: 18px; height: 13px; flex: none; }
/* Das offene Menü liegt als Fläche unter dem Kopf über der Seite; .kopf ist durch sticky der Bezugsrahmen. Ist das
   Fenster niedrig, scrollt das Menü in sich statt aus dem Bild zu laufen. */
.menue__inhalt {
  position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100vh - var(--sp-kopf)); max-height: calc(100svh - var(--sp-kopf)); overflow-y: auto;
  /* Bis zum unteren Rand: Sonst lief die Seite direkt unter dem Menü weiter, ohne Kante. */
  min-height: calc(100svh - var(--sp-kopf));
  padding: var(--sp-2) var(--sp-kante) var(--sp-5);
  background: var(--sp-karte); border-bottom: 1px solid var(--sp-linie);
}
.menue__inhalt ul { margin: 0 0 var(--sp-3); padding: 0; list-style: none; }
.menue__inhalt li { max-width: none; border-bottom: 1px solid var(--sp-linie); }
.menue__inhalt li a, .menue__anmelden, .menue__bestellen { display: flex; align-items: center; min-height: calc(var(--sp-griff) + var(--sp-2)); color: var(--sp-text); font-size: var(--sp-fs-gross); font-weight: 650; text-decoration: none; }
.menue__bestellen { display: none; margin-top: calc(-1 * var(--sp-3)); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--sp-linie); }
/* Unter der Linie: Anmelden gehört nicht zu den Seiten der Website, sondern führt in den Gastgeber-Bereich. */
.menue__anmelden { font-size: var(--sp-fs-text); }
.menue__inhalt a[aria-current="page"] { color: var(--sp-akzent-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.menue__inhalt .sprachen { margin-left: calc(-1 * var(--sp-2)); }

/* Auf sehr schmalen Handys (unter 358 px) passt neben Marke und Menü kein Knopf; bestellen geht dort über das Menü. */
@media (max-width: 22.4em) {
  .kopf__rechts .kopf__knopf { display: none; }
  .menue__bestellen { display: flex; }
}
@media (min-width: 56.25em) {
  .navi { display: block; }
  .navi ul { display: flex; margin: 0; padding: 0; list-style: none; }
  .navi a {
    display: inline-flex; align-items: center; white-space: nowrap;
    min-height: var(--sp-griff); padding: 0 var(--sp-2);
    color: var(--sp-text); font-size: var(--sp-fs-klein); font-weight: 600; text-decoration: none;
  }
  .navi a:hover { color: var(--sp-akzent-text); }
  .navi a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; }
  .kopf__rechts > .sprachen { display: flex; }
  .kopf__anmelden { display: inline-flex; }
  .menue { display: none; }
  .marke__zeichen { width: 30px; height: 30px; }
  .marke__wort { width: 100px; height: 26px; }
}
/* Die Navigation steht mittig zwischen Marke und rechter Gruppe; ein Raster mit gleich breiten Seiten (1fr auto 1fr)
   ließe der rechten Gruppe mit Sprachwahl, Anmelden und Bestellen bei 1100 px zu wenig Platz. */
@media (min-width: 68.75em) {
  .kopf { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-5); }
  .navi { justify-self: center; }
  .marke { margin-right: 0; justify-self: start; }
  .navi a { padding: 0 var(--sp-3); }
  .kopf__rechts { justify-self: end; }
  .kopf__rechts .kopf__knopf { padding: 0 14px; }
}

/* ---------------------------------------------------------------- Abschnitte */

/* FLÄCHE BIS ZUM RAND STATT SÄULE: Abschnitte reichen über die ganze Breite, damit ein Band auf 1920 px bis an den
   Bildschirmrand läuft. Der Inhalt bleibt über --sp-kante auf der Kante von Kopf und Fuß. */
.abschnitt {
  position: relative;
  padding: var(--sp-abschnitt) var(--sp-kante);
}
.abschnitt + .abschnitt::before {
  content: "";
  position: absolute; top: 0; left: var(--sp-kante); right: var(--sp-kante);
  border-top: 1px solid var(--sp-linie);
}
/* Unter dem Kopf beginnt jede Seite gleich nah, ob Einstieg, Preise oder Notfallkarte. */
main > .abschnitt:first-child { padding-top: var(--sp-6); }
/* Auf Unterseiten trägt die H1 den Seitentitel, nicht die Botschaft – eine Stufe kleiner als auf der Startseite, damit
   „Fragen und Antworten“ nicht in zwei Zeilen zerfällt. */
main > .abschnitt:first-child:not(.einstieg) h1 { font-size: var(--sp-fs-h1-seite); }
/* Ein kurzer Auftakt (Titel und Vorspann) rückt näher an den Abschnitt, den er ankündigt. */
.abschnitt.abschnitt--auftakt { padding-bottom: var(--sp-7); }
.abschnitt--band { background: var(--sp-karte); }
/* LEINEN TRÄGT DIE MAPPE UND DEN SCHLUSS der Startseite. Die Mappe liegt darauf wie auf einer Tischdecke und setzt sich
   so vom Einstieg ab – auf demselben Sand und ohne Strich lief sie einfach weiter. Am Schluss kommt an, wer bis zu Sascha liest. */
.abschnitt--leinen { background: var(--sp-leinen); }
/* MITTIG, wo eine Seite kurz ist und die andere ein Bild oder eine Fläche trägt: Oben angeschlagen lag unter dem Text ein Streifen Leere. */
.zwei-spalten.zwei-spalten--mitte { align-items: center; }
/* Ein Band trennt schon durch seine Fläche, ein Strich daneben wäre doppelt. */
.abschnitt + .abschnitt--band::before, .abschnitt--band + .abschnitt::before,
.abschnitt + .abschnitt--leinen::before, .abschnitt--leinen + .abschnitt::before { content: none; }
.abschnitt__kopf > :last-child { margin-bottom: 0; }
/* GLEICHER ABSTAND ZUM NÄCHSTEN ABSCHNITT: Der Rand unter dem letzten Kind (Linien, Wohnungen) legte sich aufs Polster –
   unter manchen Abschnitten standen 16 oder 24 px mehr als unter den anderen. */
.abschnitt > :last-child { margin-bottom: 0; }
/* TITEL LINKS, VORSPANN RECHTS: Ein Vorspann allein unter dem Titel endete bei der halben Seite, rechts daneben war nichts. */
@media (min-width: 900px) {
  /* Ohne Zeilenabstand im Raster: Der Titel reicht über alle Zeilen rechts, leere Zeilen kosten so keine Höhe. */
  .abschnitt__kopf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-gitter); align-items: start; }
  .abschnitt__kopf > * { grid-column: 2; margin-bottom: 0; }
  .abschnitt__kopf > :first-child { grid-column: 1; grid-row: 1 / span 9; }
  .abschnitt__kopf > :nth-child(n + 3) { margin-top: var(--sp-3); }
}
/* .linien setzt weiter unten margin: 0 – ohne die doppelte Klasse klebte die Liste an dem, was darüber steht. */
.unterkopf, .linien.unterkopf { margin-top: var(--sp-7); }
.vorspann { font-size: var(--sp-fs-gross); line-height: 1.55; color: var(--sp-text-2); }
.leise { color: var(--sp-text-2); }
.klein { font-size: var(--sp-fs-klein); }
.zwei-spalten { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
  .zwei-spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-gitter); align-items: start; }
}

/* ---------------------------------------------------------------- Einstieg */

/* LINKS DAS VERSPRECHEN, RECHTS DER BEWEIS: Titel, Unterzeile, Knöpfe und die drei Zusagen stehen untereinander, daneben
   das Gerät und die echte Gästemappe im Handy (Saschas Wunsch, 12.10.2026: Ein Kasten mit drei Aufzählungspunkten wirkte
   wie ein Handbuch). Schmal gilt die Reihenfolge des Quelltexts: „Demo ausprobieren“ steht so im ersten Bild. */
/* Die Dachzeile trägt den Claim wie die Eyebrow auf liesener.de: dezent, Monospace, Versalien, Raute davor. */
.dachzeile {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin: 0 0 var(--sp-3);
  font: 600 var(--sp-fs-zusatz)/1.3 var(--sp-f-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sp-akzent-text);
}
.dachzeile::before {
  content: ""; flex: none; width: 6px; height: 6px;
  background: var(--sp-akzent); transform: rotate(45deg); border-radius: 1px;
}
.einstieg { display: grid; gap: var(--sp-6) var(--sp-gitter); align-items: center; }
.einstieg h1 { margin-bottom: var(--sp-4); }
.einstieg__unterzeile { margin: 0; font-size: var(--sp-fs-gross); line-height: 1.55; color: var(--sp-text-2); }
.einstieg .aktion { margin: var(--sp-5) 0 var(--sp-4); }
/* DREI ZUSAGEN als Zeile mit Punkten davor, kein Häkchen: Sie sind Auskunft, keine Liste zum Abhaken. */
.vertrauen { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); margin: 0; padding: 0; list-style: none; font-size: var(--sp-fs-klein); font-weight: 550; color: var(--sp-text-2); }
.vertrauen li { display: inline-flex; align-items: flex-start; gap: var(--sp-2); max-width: none; }
.vertrauen li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .6em; border-radius: 50%; background: var(--sp-akzent); }
@media (max-width: 599px) {
  .einstieg .aktion { column-gap: var(--sp-2); }
  .einstieg .knopf { padding-inline: var(--sp-3); }
}
@media (min-width: 900px) {
  .einstieg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Ab etwa 1600 px wüchse das Pult über das Handy hinaus – die Szene bleibt so groß wie bei 1440 px und rückt nach rechts. */
  .szene { justify-self: end; width: 100%; max-width: 680px; }
}

/* GERÄT UND HANDY: Das Render steht hinten auf dem Sand der Seite (sein Grund ist derselbe), das Handy davor schiebt sich
   über den leeren Rand des Renders – nie umgekehrt, sonst stünde dessen Sandfläche als Kasten über dem Handy. Im Handy
   steht ein echtes Bildschirmfoto der Vorführfassung (dev/website-test.mjs --bilder), keine nachgebaute Oberfläche. */
.szene { margin: 0; }
.szene__buehne { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.szene__geraet { width: calc(100% + clamp(32px, 5vw, 76px)); max-width: none; height: auto; margin-right: calc(-1 * clamp(32px, 5vw, 76px)); }
.szene__handy {
  position: relative; z-index: 1;
  width: clamp(170px, 9rem + 8vw, 248px); padding: 8px;
  border-radius: 38px; background: var(--sp-bild-handy); box-shadow: var(--sp-tiefe);
}
.szene__handy::before {
  content: ""; position: absolute; z-index: 1; top: 15px; left: 50%; width: 30%; height: 18px;
  transform: translateX(-50%); border-radius: 999px; background: var(--sp-bild-handy);
}
.szene__handy img { width: 100%; aspect-ratio: 390 / 700; object-fit: cover; object-position: top; border-radius: 30px; background: var(--sp-grund); }
/* DAS ANTIPPEN: drei Bögen zwischen Gerät und Handy, die sanft nacheinander aufleuchten. Ohne Bewegung (reduced motion)
   stehen sie still da. */
.szene__welle { position: absolute; z-index: 2; left: calc(-1 * clamp(44px, 4vw, 60px)); top: 30%; width: clamp(36px, 3.4vw, 52px); height: auto; overflow: visible; }
.szene__welle path { fill: none; stroke: var(--sp-akzent); stroke-width: 2.5px; stroke-linecap: round; animation: welle 2.4s ease-in-out infinite; }
.szene__welle path:nth-child(2) { animation-delay: .3s; }
.szene__welle path:nth-child(3) { animation-delay: .6s; }
@keyframes welle { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
.szene figcaption { margin-top: var(--sp-3); font-size: var(--sp-fs-mikro); color: var(--sp-text-3); text-align: center; }
@media (max-width: 899px) {
  .szene { max-width: 560px; }
}

/* ---------------------------------------------------------------- Knöpfe, Quittung */

/* KNÖPFE SIND GEGENSTÄNDE: Der umrandete ist eine weiße Fläche mit Kontur und Kante – durchsichtig verschwamm er im Sand.
   Der gefüllte steht in Nachtpetrol und wird beim Überfahren Hafenpetrol, der umrandete bekommt eine Kontur in Tinte. */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 0 22px;
  border: 1px solid var(--sp-feld-rand); border-radius: var(--sp-r);
  background: var(--sp-karte); color: var(--sp-text); box-shadow: var(--sp-tiefe);
  font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color var(--sp-dauer), border-color var(--sp-dauer);
}
.knopf:hover { border-color: var(--sp-text); text-decoration: none; }
.knopf--voll { border-color: var(--sp-nacht); background: var(--sp-nacht); color: var(--sp-auf-akzent); }
.knopf--voll:hover { border-color: var(--sp-akzent-tief); background: var(--sp-akzent-tief); }
.knopf--klein { min-height: var(--sp-griff); padding: 0 14px; border-color: var(--sp-kontur); font-size: var(--sp-fs-klein); }
.knopf--klein:hover { border-color: var(--sp-text); }

.aktion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); margin: var(--sp-5) 0 var(--sp-4); }
.kopieren { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); vertical-align: middle; }
.quittung { font-size: var(--sp-fs-klein); font-weight: 600; color: var(--sp-gut-text); }
.quittung:empty { display: none; }
.adresse { font-weight: 600; color: var(--sp-text); user-select: all; -webkit-user-select: all; }
/* Links, die allein stehen, sind Tippflächen und keine Wörter im Satz – also 44 px hoch. */
.linkliste a, .weiter { display: inline-flex; align-items: center; min-height: var(--sp-griff); }
.weiter { font-weight: 600; }
/* Mehrere Wege nebeneinander, schmal untereinander. */
.wege { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); }

/* ---------------------------------------------------------------- Bilder */

.figur { margin: 0; }
.figur img { width: 100%; border: 1px solid var(--sp-linie); border-radius: var(--sp-r); background: var(--sp-karte); }
.figur figcaption { margin-top: var(--sp-2); font-size: var(--sp-fs-mikro); color: var(--sp-text-3); }
.figur--person { max-width: 240px; margin-bottom: var(--sp-5); }
.figur--screen { max-width: 280px; }
/* Am Handy steht ein Bildschirmfoto kleiner und mittig: Links angeschlagen blieb rechts ein Streifen leer, und es wirkte
   wie echte Bedienung statt wie ein Bild davon. */
@media (max-width: 599px) {
  .figur--screen { max-width: 240px; margin-inline: auto; }
}
/* DAS GERÄT STEHT FREI: Die Renders tragen den Grund der Seite als Hintergrund – ohne Rahmen steht das Gerät direkt
   auf der Seite statt in einem Kasten. 16:9 schneidet den leeren Sand darüber und darunter ab. */
.figur--frei img { aspect-ratio: 16 / 9; object-fit: cover; border: 0; background: none; }
/* Die Unterschrift steht unter der Mitte des Geräts, nicht unter der linken Kante des leeren Sands. */
.figur--frei figcaption { max-width: none; text-align: center; }

/* ---------------------------------------------------------------- Vergleich der Mappe (Startseiten) */

/* EIN BILD ÜBER DIE GANZE BREITE (Saschas Wunsch, 12.10.2026): Ab 1100 px liegt die Bühne als ein gerahmtes Bild unter
   allem, die Zeichnung steht in der mittleren Spalte, die vier Stellen links und rechts auf demselben Tisch – Bühne und
   Raster teilen sich Spalten und Zeilen über subgrid. Schmaler steht die Zeichnung allein auf der Bühne, die Stellen
   folgen darunter. Keine Stelle verdeckt die Zeichnung, die Linie läuft über alles. */
.vergleich { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
.vergleich__buehne {
  position: relative; overflow: hidden;
  width: 100%; max-width: 620px; margin-inline: auto;
  border: 1px solid var(--sp-kontur); border-radius: var(--sp-r-gross); box-shadow: var(--sp-tiefe);
}
.vergleich__grund { position: absolute; inset: 0; width: 100%; height: 100%; }
.vergleich__grund--heute { fill: var(--sp-karte); }
.vergleich__grund--frueher { fill: var(--sp-bild-tisch); }
.vergleich__bild { position: relative; width: 100%; height: auto; aspect-ratio: 10 / 9; }
/* Breit steht die Zeichnung auf der Unterkante: Ihre Tischkante läuft so über die ganze Bühne bis an den Rahmen. */
@media (min-width: 600px) {
  .vergleich { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vergleich__buehne { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .vergleich {
    grid-template-columns: 0 minmax(0, 1fr) minmax(420px, 560px) minmax(0, 1fr) 0;
    grid-template-rows: 2.25rem minmax(0, 1fr) minmax(0, 1fr) 0;
    gap: var(--sp-4) var(--sp-6);
  }
  .vergleich__buehne {
    display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid;
    grid-column: 1 / -1; grid-row: 1 / -1; max-width: none; margin: 0;
  }
  .vergleich__bild { grid-column: 3; grid-row: 1 / -1; align-self: end; }
  .vergleich__karte--1 { grid-column: 2; grid-row: 2; align-self: end; }
  .vergleich__karte--2 { grid-column: 2; grid-row: 3; align-self: start; }
  .vergleich__karte--3 { grid-column: 4; grid-row: 2; align-self: end; }
  .vergleich__karte--4 { grid-column: 4; grid-row: 3; align-self: start; }
  .vergleich--an .vergleich__karte { cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
}
.vergleich--an .vergleich__buehne { cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }

.vergleich__griff { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.vergleich__saum { stroke: var(--sp-karte); stroke-width: 6px; }
.vergleich__linie { stroke: var(--sp-nacht); stroke-width: 2px; }
.vergleich__kreis { fill: var(--sp-nacht); stroke: var(--sp-karte); stroke-width: 3px; }
.vergleich__pfeile { fill: none; stroke: var(--sp-auf-akzent); stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round; }
.vergleich__fokus { fill: none; stroke: var(--sp-fokus); stroke-width: 3px; visibility: hidden; }
.vergleich__regler:focus-visible ~ .vergleich__griff .vergleich__fokus { visibility: visible; }

.vergleich__etikett {
  position: absolute; z-index: 2; top: var(--sp-3); padding: 5px 12px; border-radius: 999px;
  color: var(--sp-auf-akzent); font-size: var(--sp-fs-mikro); font-weight: 650; line-height: 1.35; white-space: nowrap;
  pointer-events: none; transition: opacity var(--sp-dauer);
}
.vergleich__etikett--frueher { left: var(--sp-3); background: var(--sp-problem); }
.vergleich__etikett--heute { right: var(--sp-3); background: var(--sp-loesung); }
.vergleich__etikett--weg { opacity: 0; }
@media (max-width: 519px) {
  .vergleich__zusatz { display: none; }
}

/* DIE VIER STELLEN: Auf der Seite „Früher“ liegen sie wie Zettel leicht schief auf dem Tisch, mit Nummer in Terrakotta;
   auf der Seite „Heute“ gerade, mit Nummer in Nachtpetrol. Ohne Skript zeigt jede Stelle beide Sätze untereinander. Mit
   Skript liegen beide Sätze in derselben Zelle – die Karte behält ihre Höhe, wenn die Linie über sie wandert. */
.vergleich__karte {
  position: relative; z-index: 1;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--sp-kontur); border-radius: var(--sp-r);
  background: var(--sp-karte); box-shadow: var(--sp-tiefe);
  transition: background-color .25s, transform .25s;
}
.vergleich__karte h3 { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); font-size: var(--sp-fs-text); }
.vergleich__nummer {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%; background: var(--sp-loesung); color: var(--sp-auf-akzent);
  font-size: var(--sp-fs-mikro); font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums;
  transition: background-color .25s;
}
.vergleich__satz { max-width: none; margin: 0; font-size: var(--sp-fs-klein); line-height: 1.5; color: var(--sp-text-2); }
.vergleich__satz + .vergleich__satz { margin-top: var(--sp-3); }
.vergleich__satz b { display: block; font-size: var(--sp-fs-mikro); }
.vergleich__satz--frueher b { color: var(--sp-hinweis-text); }
.vergleich__satz--heute b { color: var(--sp-akzent-text); }
.vergleich--an .vergleich__saetze { display: grid; }
.vergleich--an .vergleich__satz { grid-area: 1 / 1; margin: 0; transition: opacity .25s; }
.vergleich__karte--frueher .vergleich__satz--heute, .vergleich__karte--heute .vergleich__satz--frueher { opacity: 0; }
.vergleich__karte--frueher { background: var(--sp-bild-papier); }
.vergleich__karte--frueher .vergleich__nummer { background: var(--sp-problem); }
.vergleich__karte--frueher.vergleich__karte--1 { transform: rotate(-1deg); }
.vergleich__karte--frueher.vergleich__karte--2 { transform: rotate(.8deg); }
.vergleich__karte--frueher.vergleich__karte--3 { transform: rotate(.7deg); }
.vergleich__karte--frueher.vergleich__karte--4 { transform: rotate(-.9deg); }

/* Zeichnungen: Farben nur über diese Klassen, nie als Attribut – so kommen sie aus den Tokens oben. Striche bleiben
   2 px breit, egal wie groß die Zeichnung steht. Die Zeichnung nimmt keine Klicks: Gezogen wird an der Bühne darunter. */
.zeichnung { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sp-f-system); pointer-events: none; }
/* vector-effect erbt nicht – darum für jedes Element einzeln; Füllungen merken davon nichts. */
.zeichnung * { vector-effect: non-scaling-stroke; }
.zeichnung .s { stroke: var(--sp-bild-strich); stroke-width: 1.4px; stroke-linecap: round; stroke-linejoin: round; }
.zeichnung .s-fleck { fill: none; stroke: var(--sp-bild-fleck); stroke-width: 1.4px; stroke-linecap: round; }
.zeichnung .s-kuli { fill: none; stroke: var(--sp-bild-strich); stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; }
.zeichnung .s-akzent { fill: none; stroke: var(--sp-akzent); stroke-width: 2px; stroke-linecap: round; }
.zeichnung .s-weiss { fill: none; stroke: var(--sp-karte); stroke-width: 2px; stroke-linecap: round; }
.zeichnung .ohne { fill: none; }
.zeichnung .f-papier { fill: var(--sp-bild-papier); }
.zeichnung .f-papier-alt { fill: var(--sp-bild-papier-alt); }
.zeichnung .f-tisch { fill: var(--sp-bild-tisch); }
.zeichnung .f-karton { fill: var(--sp-bild-karton); }
.zeichnung .f-zettel { fill: var(--sp-bild-zettel); }
.zeichnung .f-metall { fill: var(--sp-bild-metall); }
.zeichnung .f-zeile { fill: var(--sp-bild-zeile); }
.zeichnung .f-gebaeck { fill: var(--sp-bild-gebaeck); }
.zeichnung .f-handy { fill: var(--sp-bild-handy); }
.zeichnung .f-weiss { fill: var(--sp-karte); }
.zeichnung .f-grund { fill: var(--sp-grund); }
.zeichnung .f-akzent { fill: var(--sp-akzent); }
.zeichnung .f-pult { fill: var(--sp-bild-pult); }
.zeichnung .f-pult-seite { fill: var(--sp-bild-schatten); }
.zeichnung .f-qr { fill: var(--sp-bild-qr); }
.zeichnung .f-platte { fill: var(--sp-bild-platte); }
.zeichnung .f-schrift { fill: var(--sp-bild-schrift); }
.zeichnung .t { fill: var(--sp-bild-strich); }
.zeichnung .t-leise { fill: var(--sp-bild-leise); }
.zeichnung .t-weiss { fill: var(--sp-karte); }
.zeichnung .t-hauch { fill: var(--sp-akzent-hauch); }
.zeichnung .t-akzent { fill: var(--sp-akzent-text); }
.zeichnung .t-qr { fill: var(--sp-bild-qr); }
/* Nummern in der Zeichnung tragen die Farbe ihrer Seite: Terrakotta auf der Papiermappe, Nachtpetrol am Handy. */
.vergleich__lage--frueher { --marke: var(--sp-problem); }
.vergleich__lage--heute { --marke: var(--sp-loesung); }
.zeichnung .marke-punkt { fill: var(--marke); stroke: var(--sp-karte); stroke-width: 1.5px; }
.zeichnung .marke-zahl { fill: var(--sp-auf-akzent); font-weight: 700; }

/* ---------------------------------------------------------------- Listen, Kacheln, Schritte */

.linien { margin: 0 0 var(--sp-4); padding: 0; list-style: none; border-top: 1px solid var(--sp-linie); }
.linien > li { max-width: none; padding: var(--sp-4) 0; border-bottom: 1px solid var(--sp-linie); }
.linien > li > :last-child { margin-bottom: 0; }
.linien h3 { margin-bottom: var(--sp-1); font-size: var(--sp-fs-text); }
/* Breit zweispaltig: Sonst endeten kurze Zeilen links, und rechts bliebe die halbe Spalte leer. */
@media (min-width: 900px) {
  .linien--zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-gitter); border-top: 0; }
  .linien--zwei > li { border-top: 1px solid var(--sp-linie); border-bottom: 0; }
}
.linkliste > li { padding-block: 0; }

/* KACHELN STATT LISTEN, wo Dinge nebeneinander gelesen werden (Schritte, Zielgruppen): Fläche mit großem Radius, Kontur
   und Kante. Auf Sand liegen sie weiß, im weißen Band sandfarben. */
.kacheln { display: grid; gap: var(--sp-gitter); margin: var(--sp-6) 0 0; padding: 0; list-style: none; }
.kacheln > li {
  display: flex; flex-direction: column; max-width: none; padding: var(--sp-innen);
  border: 1px solid var(--sp-kontur); border-radius: var(--sp-r-gross); background: var(--sp-karte); box-shadow: var(--sp-tiefe);
}
.abschnitt--band .kacheln > li { background: var(--sp-grund); }
.kacheln h3 { margin-bottom: var(--sp-3); }
.kacheln p { margin-bottom: var(--sp-3); }
.kacheln > li > :last-child { margin-bottom: 0; }
/* Der Fuß steht unten, damit nebeneinanderliegende Kacheln eine gemeinsame Unterkante haben. */
.kacheln__fuss { margin-top: auto; padding-top: var(--sp-2); }
/* EINE ZEICHNUNG STEHT OBEN in der Kachel, auf deren Fläche und ohne eigenen Rahmen. Daneben ließ sie dem Text nur ein
   Drittel, und Titel wie „Ferienwohnungen und Apartments“ brachen um. */
.kacheln__bild { margin: 0 0 var(--sp-4); }
.kacheln__bild svg { display: block; width: 100%; max-width: 16rem; height: auto; }
/* Der Text unter einer Zeichnung füllt die Kachel, damit sein Fuß unten auf der gemeinsamen Kante steht. */
.kacheln__text { display: flex; flex-direction: column; flex: 1; }
.kacheln__text > :last-child { margin-bottom: 0; }
/* VIER KACHELN STEHEN ZU ZWEIT, auch auf 1920 px: In vier Spalten blieben je Zeile 22 Zeichen, die Texte würden zu
   schmalen Türmen. */
@media (min-width: 700px) {
  .kacheln--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .kacheln--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* AM HANDY steht die Zeichnung klein neben dem Titel und die Schrittnummer vor ihm: Eine Zeichnung über der ganzen
   Breite kostete je Kachel einen halben Bildschirm. */
@media (max-width: 699px) {
  .kacheln--bilder > li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); align-items: center; }
  .kacheln--bilder .kacheln__bild { margin: 0; }
  .kacheln--bilder .kacheln__text { display: contents; }
  .kacheln--bilder .kacheln__text > * { grid-column: 1 / -1; }
  .kacheln--bilder .kacheln__text > h3 { grid-column: 2; grid-row: 1; margin: 0; }
}

/* SCHRITTE: Die Nummer steht als gefüllter Kreis in Nachtpetrol über dem Titel, so lesen sich die Kacheln als Folge. */
.schritte { counter-reset: schritt; }
.schritte > li { counter-increment: schritt; }
.schritte > li::before {
  content: counter(schritt);
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
  width: 32px; height: 32px; margin-bottom: var(--sp-3);
  border-radius: 50%; background: var(--sp-nacht);
  color: var(--sp-auf-akzent); font-size: var(--sp-fs-klein); font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
@media (max-width: 699px) {
  .schritte > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--sp-3); align-items: center; }
  .schritte > li::before { margin: 0; }
  .schritte > li > h3 { grid-column: 2; margin: 0; }
  .schritte > li > p { grid-column: 1 / -1; margin-top: var(--sp-3); }
}

/* ---------------------------------------------------------------- Für alle Wohnungen oder nur hier (Startseite) */

.wohnungen { display: grid; gap: var(--sp-gitter); margin: var(--sp-6) 0 var(--sp-5); }
@media (min-width: 760px) {
  .wohnungen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wohnung { padding: var(--sp-innen); border: 1px solid var(--sp-kontur); border-radius: var(--sp-r-gross); background: var(--sp-karte); box-shadow: var(--sp-tiefe); }
.abschnitt--band .wohnung { background: var(--sp-grund); }
.wohnung h3 { margin-bottom: var(--sp-1); }
.wohnung__lage { margin-bottom: var(--sp-4); font-size: var(--sp-fs-klein); color: var(--sp-text-2); }
.wohnung__abschnitte { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sp-linie); }
.wohnung__abschnitte > li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-3); align-items: center;
  max-width: none; padding: var(--sp-3) 0; border-bottom: 1px solid var(--sp-linie);
}
.wohnung__name { font-weight: 650; }
.wohnung__inhalt { grid-column: 1; font-size: var(--sp-fs-klein); color: var(--sp-text-2); }
.wohnung__abschnitte .herkunft { grid-column: 2; grid-row: 1 / span 2; }

/* HERKUNFT wie im Gastgeber-Bereich: Zeichen und Wort, nie Farbe allein. Zwei Häuser = gilt in allen Wohnungen,
   ein Haus = nur hier, durchgestrichen = aus. Die Zeichen kommen als Maske, damit sie die Schriftfarbe annehmen. */
.herkunft {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border: 1px solid transparent; border-radius: 999px;
  font-size: var(--sp-fs-mikro); font-weight: 650; line-height: 1.3; white-space: nowrap;
}
.herkunft::before {
  content: ""; flex: none; width: 20px; height: 14px; background: currentColor;
  -webkit-mask: var(--herkunft-zeichen) center / contain no-repeat; mask: var(--herkunft-zeichen) center / contain no-repeat;
}
.herkunft--alle {
  --herkunft-zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M1.5 13V6.5L5.5 3l4 3.5V13zM10.5 13V6.5l4-3.5 4 3.5V13' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
  border-color: currentColor; background: var(--sp-akzent-hauch); color: var(--sp-akzent-text);
}
.herkunft--hier {
  --herkunft-zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M5 13V6.5L10 2l5 4.5V13z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
  border-color: var(--sp-feld-rand); background: var(--sp-leinen); color: var(--sp-text);
}
.herkunft--aus {
  --herkunft-zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Ccircle cx='10' cy='7' r='5.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M6 11l8-8' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
  border: 1px dashed var(--sp-linie-stark); color: var(--sp-text-2);
}

/* ---------------------------------------------------------------- Preise und Geräte (Startseite) */

/* ZWEI KARTEN, ZWEI VERTRÄGE: links der Zugang mit seinem Jahrespreis groß, rechts die Geräte, einmalig. Die Karten liegen
   in Sand auf dem weißen Band – der Grund der Renders, so stehen die Geräte frei und nicht in einem Kasten. */
.preise { display: grid; gap: var(--sp-gitter); margin-top: var(--sp-6); }
@media (min-width: 900px) {
  .preise { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.preiskarte {
  display: flex; flex-direction: column; padding: var(--sp-innen);
  border: 1px solid var(--sp-kontur); border-radius: var(--sp-r-gross); background: var(--sp-grund); box-shadow: var(--sp-tiefe);
}
.preiskarte__titel { margin-bottom: var(--sp-2); font-size: var(--sp-fs-text); color: var(--sp-text-2); }
.preiskarte__preis { margin-bottom: var(--sp-3); font-size: var(--sp-fs-gross); color: var(--sp-text-2); }
.preiskarte__preis .preis { font-size: var(--sp-fs-h1-seite); letter-spacing: -.03em; }
.preiskarte__fuss { margin: auto 0 0; padding-top: var(--sp-2); }
.preiskarte__dabei { flex-direction: column; margin-bottom: var(--sp-4); }
.preise__hinweis { margin: var(--sp-4) 0 0; }

/* KARTEN AUS DEM GRUND DER SEITE: Die Renders haben denselben Hintergrund wie die Seite, das Gerät steht frei. */
.geraete-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.geraete-reihe > li { max-width: none; text-align: center; }
/* Quadratisch beschnitten: Das Render hat links und rechts viel Rand, so steht das Gerät größer da. */
.geraete-reihe img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.geraete-reihe b { display: block; margin-top: var(--sp-1); }
.geraete-reihe__wo { display: block; font-size: var(--sp-fs-klein); color: var(--sp-text-2); }
.geraete-reihe .preis { font-size: var(--sp-fs-text); }
.preis { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.015em; color: var(--sp-nacht); white-space: nowrap; }

/* ---------------------------------------------------------------- Farbwahl (Konfigurator und Rechner) */

.formwahl, .farbraster, .schriftwahl { min-width: 0; margin: 0; padding: 0; border: 0; }
.formwahl > legend, .farbraster > legend, .schriftwahl > legend { margin-bottom: var(--sp-2); padding: 0; font-weight: 650; }
.farbwahl { display: grid; gap: var(--sp-4); }

/* GEHÄUSE: ein Raster runder Felder ohne Namen, darunter steht nur der Name der gewählten Farbe – über :checked, ohne
   Skript. 25 Namen unter 25 Feldern wären am Handy ein ganzer Bildschirm. Die Farbe selbst steht als fill im SVG
   (teile/geraete.php, sp_farbkreis). */
/* ZWEI GRUPPEN, EIN PLATZ FÜR DEN NAMEN: „Auf Lager“ und „Wunschfarben“ stehen in .farbraster__felder, das allein
   positioniert ist – so landet der Name der gewählten Farbe immer an derselben Stelle unter beiden Gruppen. */
.farbraster__felder { position: relative; display: grid; row-gap: var(--sp-2); padding-bottom: 1.6em; }
.farbraster__titel { margin: 0 0 2px; font-size: var(--sp-fs-mikro); font-weight: 600; line-height: 1.3; color: var(--sp-text-2); }
.farbraster__reihe { display: grid; grid-template-columns: repeat(auto-fill, var(--sp-griff)); gap: var(--sp-1) var(--sp-2); }
/* LIEFERBAR IST DAS PAAR, NICHT DAS GEHÄUSE: Weiß liegt auf Lager, Dunkelblau nicht – Weiß mit dunkelblauer Schrift ist
   also eine Wunschfarbe. Die Zeile folgt der Wahl ohne Skript; sie steht im Konfigurator neben dem Bestellknopf, im
   Rechner unter der Farbwahl ihrer Zeile – darum zwei Rahmen für :has(). */
.lieferzeile { margin: 0; font-size: var(--sp-fs-klein); color: var(--sp-text-2); }
.lieferzeile__wunsch { display: none; color: var(--sp-warn-text); font-weight: 600; }
:is(.konfigurator__wahl, .geraetezeile__farbe):has(.farbfeld--wunsch > input:checked, .schriftfeld--wunsch > input:checked) .lieferzeile__lager { display: none; }
:is(.konfigurator__wahl, .geraetezeile__farbe):has(.farbfeld--wunsch > input:checked, .schriftfeld--wunsch > input:checked) .lieferzeile__wunsch { display: inline; }
.farbfeld { display: grid; place-items: center; width: var(--sp-griff); height: var(--sp-griff); cursor: pointer; }
.farbfeld > input, .farbfeld > svg { grid-area: 1 / 1; }
.farbfeld > input { width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.farbfeld > svg { width: calc(var(--sp-griff) - 8px); height: calc(var(--sp-griff) - 8px); border-radius: 50%; pointer-events: none; }
/* Der Rand hält Weiß auf Weiß sichtbar. */
.farbfeld circle, .schriftfeld circle, .farbpunkt circle { stroke: var(--sp-feld-rand); stroke-width: 1px; }
.farbfeld:hover > svg { outline: 2px solid var(--sp-linie-stark); outline-offset: 2px; }
.farbfeld > input:checked + svg { outline: 3px solid var(--sp-text); outline-offset: 2px; }
.farbfeld > input:focus-visible + svg { outline: 3px solid var(--sp-fokus); outline-offset: 2px; }
/* clip-path statt display: none – der Name bleibt die Beschriftung des Felds, auch für Screenreader. */
.farbfeld__name { position: absolute; left: 0; bottom: 0; font-size: var(--sp-fs-klein); font-weight: 650; white-space: nowrap; clip-path: inset(50%); }
.farbfeld > input:checked ~ .farbfeld__name { clip-path: none; }

/* SCHRIFT UND QR-CODE: nur die Farben, die zum Gehäuse passen. Ohne Skript über :has(), eine Regel je Schriftfarbe aus
   hardware/geraete.json (dev/website-test.mjs prüft, dass keine fehlt). Passt nur eine, steht sie allein da – das ist
   die Auskunft, ohne Durchgestrichenes und ohne Erklärsatz. */
.schriftwahl__felder { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.schriftfeld {
  position: relative; display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--sp-griff); padding: 0 var(--sp-4) 0 var(--sp-2);
  border: 1px solid var(--sp-feld-rand); border-radius: 999px; background: var(--sp-karte);
  font-size: var(--sp-fs-klein); font-weight: 600; cursor: pointer;
}
.schriftfeld > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.schriftfeld > svg { flex: none; width: 28px; height: 28px; pointer-events: none; }
.schriftfeld:has(> input:checked) { border-color: var(--sp-text); box-shadow: inset 0 0 0 1px var(--sp-text); }
.schriftfeld:has(> input:focus-visible) { outline: 3px solid var(--sp-fokus); outline-offset: 2px; }
.farbwahl:has([data-schriften]:checked:not([data-schriften~="schwarz"])) [data-schrift="schwarz"],
.farbwahl:has([data-schriften]:checked:not([data-schriften~="weiss"])) [data-schrift="weiss"],
.farbwahl:has([data-schriften]:checked:not([data-schriften~="dunkelblau"])) [data-schrift="dunkelblau"] { display: none; }

/* ---------------------------------------------------------------- Konfigurator (/de/geraete, /en/devices) */

/* BILD LINKS AB OBEN, Titel und Wahl rechts daneben: So steht der Bestellknopf auf breiten Bildschirmen ohne Scrollen
   da. Schmal klebt das Bild klein über der Wahl – wer eine Farbe antippt, sieht das Gerät dazu. */
.konfigurator { display: grid; gap: var(--sp-5); grid-template-areas: "kopf" "bild" "wahl"; }
.konfigurator__kopf { grid-area: kopf; }
.konfigurator__kopf h1 { margin-bottom: var(--sp-3); }
.konfigurator__kopf .vorspann { margin: 0; }
.konfigurator__bild { grid-area: bild; margin: 0; }
.konfigurator__bild img { width: 100%; border-radius: var(--sp-r-gross); }
/* Die Unterschrift steht unter dem Gerät, das mitten im Bild steht – links angeschlagen hing sie im leeren Sand. */
.konfigurator__bild figcaption { max-width: none; margin-top: var(--sp-3); font-weight: 650; text-align: center; }
.konfigurator__wahl { grid-area: wahl; display: grid; gap: var(--sp-5); }
.konfigurator__wahl legend { font-size: var(--sp-fs-gross); line-height: 1.3; }
.konfigurator__wahl .aktion { margin: 0; }
/* Die Lieferzeit steht neben dem Knopf, solange daneben Platz für zwei kurze Zeilen ist, sonst darunter. */
.konfigurator__wahl .lieferzeile { flex: 1 1 12em; }
.konfigurator__wahl > p { margin: calc(var(--sp-4) - var(--sp-5)) 0 0; }
@media (min-width: 900px) {
  .konfigurator { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; grid-template-areas: "bild kopf" "bild wahl"; column-gap: var(--sp-gitter); }
  .konfigurator__bild { position: sticky; top: calc(var(--sp-kopf) + var(--sp-4)); align-self: start; }
}
@media (max-width: 899px) {
  .konfigurator__bild {
    position: sticky; top: var(--sp-kopf); z-index: 2;
    margin-inline: calc(-1 * var(--sp-rand)); padding: var(--sp-2) var(--sp-rand);
    background: var(--sp-grund); border-bottom: 1px solid var(--sp-linie);
  }
  /* Breiter als das Render geschnitten: Der leere Sand darüber und darunter fällt weg, das Gerät steht größer da. */
  .konfigurator__bild img { width: min(100%, 22svh * 1.9); height: 22svh; margin-inline: auto; object-fit: cover; border-radius: 0; }
  .konfigurator__bild figcaption { margin: 0 auto; font-size: var(--sp-fs-klein); }
  /* Ein Feld mit Fokus rollt nie unter das klebende Bild. */
  html:has(.konfigurator) { scroll-padding-top: calc(var(--sp-kopf) + 22svh + 5rem); }
}

/* FORM: drei kleine Kacheln nebeneinander. Das Radio liegt unsichtbar über der ganzen Kachel – sie ist die Tippfläche. */
.formwahl__kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.formwahl__kachel {
  position: relative; display: flex; flex-wrap: wrap; align-items: baseline; align-content: start; gap: 0 var(--sp-2);
  padding: var(--sp-3); border-radius: var(--sp-r); background: var(--sp-karte); box-shadow: var(--sp-tiefe); cursor: pointer;
}
.formwahl__kachel > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.formwahl__rahmen { position: absolute; inset: 0; border: 1px solid var(--sp-kontur); border-radius: var(--sp-r); pointer-events: none; }
.formwahl__name { font-weight: 650; }
.formwahl__kachel .preis { font-size: var(--sp-fs-klein); font-weight: 600; }
.formwahl__text, .formwahl__mass { flex-basis: 100%; font-size: var(--sp-fs-mikro); line-height: 1.4; color: var(--sp-text-2); }
.formwahl__text { margin-top: var(--sp-1); }
/* Die Maße brechen nie mitten in „9,6 × 5,2 cm“. */
.formwahl__mass { white-space: nowrap; }
/* Schmal stehen Name und Preis untereinander – sonst bräche nur ein Teil der Kacheln um. */
@media (max-width: 599px) {
  .formwahl__kachel .preis { flex-basis: 100%; }
}
/* Gewählt heißt dunkel, wie bei Farbe und Schrift daneben: Nachtpetrol statt Hafenpetrol. */
.formwahl__kachel > input:checked ~ .formwahl__rahmen { border: 2px solid var(--sp-nacht); }
.formwahl__kachel > input:focus-visible ~ .formwahl__rahmen { outline: 3px solid var(--sp-fokus); outline-offset: 3px; }

/* ---------------------------------------------------------------- Rechner (/de/preise, /en/pricing) */

/* Breit links die Wahl, rechts die Summe, klebend; schmal untereinander, die Summe klebt dann als Leiste unten. */
.rechner { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
  .rechner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--sp-gitter); align-items: start; }
  .summenblock { position: sticky; top: calc(var(--sp-kopf) + var(--sp-4)); }
  /* „Dein Paket“ steht auf einer Linie mit „Deine Summe“: Die Summe liegt in einer Fläche, ohne deren Innenabstand
     stand der linke Titel um genau diesen höher. */
  .rechner__wahl { padding-top: var(--sp-innen); }
}
.rechner__wahl > h2, .summenblock > h2 { font-size: var(--sp-fs-h2-seite); letter-spacing: -.02em; }
.rechner__gruppe { min-width: 0; margin: var(--sp-5) 0 0; padding: 0; border: 0; }
.rechner__gruppe + .rechner__gruppe { margin-top: var(--sp-6); }
.rechner__titel { display: block; margin-bottom: var(--sp-2); padding: 0; font-size: var(--sp-fs-h3); font-weight: 650; line-height: 1.15; letter-spacing: -.015em; }
.rechner__gruppe > .klein { margin-bottom: var(--sp-3); }
.rechner__wohnungen {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--sp-kontur); border-radius: var(--sp-r); background: var(--sp-grund);
}
.rechner__wohnungen p { flex: 1 1 14rem; margin: 0; }
/* Bricht die Zeile schmal um, bleibt der Zähler rechts – wie die Zähler der Geräte darunter, nicht im Zickzack. */
.rechner__wohnungen .zaehler { margin-left: auto; }
.rechner__hinweis { margin: var(--sp-3) 0 0; padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--sp-akzent); font-size: var(--sp-fs-klein); }
.rechner__hinweis a { font-weight: 600; }

/* FEIN STATT KLOTZIG: Die Tippfläche bleibt 44 px, leiser werden Zeichen und Zahl. Der Rand hält 3:1 – er zeigt, dass
   man auch direkt in die Zahl schreiben kann. */
.zaehler { display: inline-flex; align-items: center; border: 1px solid var(--sp-feld-rand); border-radius: var(--sp-r); background: var(--sp-karte); }
.zaehler button {
  width: var(--sp-griff); height: var(--sp-griff); border: 0; border-radius: calc(var(--sp-r) - 1px); background: none;
  color: var(--sp-text-2); font-size: var(--sp-fs-gross); line-height: 1; cursor: pointer;
}
.zaehler button:hover { background: var(--sp-grund); color: var(--sp-text); }
.zaehler input {
  width: max(3.4ch, var(--sp-griff)); min-height: var(--sp-griff); padding: 0; border: 0; background: none;
  text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.zaehler input::-webkit-outer-spin-button, .zaehler input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* JE FORM EINE ZEILE: Bild, Name, Preis, Platz und Zähler; ab einem Gerät darunter die Farbe, zugeklappt. */
.geraetezeilen { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.geraetezeile {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "bild text menge" "farbe farbe farbe";
  gap: 0 var(--sp-3); align-items: center;
  max-width: none; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--sp-kontur); border-radius: var(--sp-r); background: var(--sp-grund);
}
/* Das Render hat viel Rand um das Gerät; quadratisch beschnitten steht das Gerät groß genug in der Zeile. */
.geraetezeile__bild { grid-area: bild; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 55%; border-radius: 8px; }
.geraetezeile__text { grid-area: text; max-width: none; margin: 0; line-height: 1.35; }
.geraetezeile__preis { margin-left: var(--sp-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.geraetezeile__wo { display: block; font-size: var(--sp-fs-klein); color: var(--sp-text-2); }
.geraetezeile__menge { grid-area: menge; }
.geraetezeile__farbe { grid-area: farbe; margin-top: var(--sp-2); border-top: 1px solid var(--sp-linie); }
.geraetezeile__farbe > summary {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--sp-griff); font-size: var(--sp-fs-klein); font-weight: 600; list-style: none; cursor: pointer;
}
.geraetezeile__farbe > summary::-webkit-details-marker { display: none; }
.farbpunkt { flex: none; width: 24px; height: 24px; }
.geraetezeile__aendern { margin-left: auto; color: var(--sp-akzent-text); text-decoration: underline; text-underline-offset: .18em; white-space: nowrap; }
.geraetezeile__farbe > summary:hover .geraetezeile__aendern { text-decoration-thickness: 2px; }
.geraetezeile__farbe .farbwahl { padding: var(--sp-2) 0 var(--sp-3); }
.geraetezeile__farbe .lieferzeile { padding-bottom: var(--sp-3); }
.geraetezeile__farbe legend { font-size: var(--sp-fs-klein); }
@media (min-width: 600px) {
  .geraetezeile { grid-template-columns: 64px minmax(0, 1fr) auto; padding: var(--sp-2) var(--sp-4); }
}
/* Schmal steht der Preis unter dem Namen, in jeder Zeile gleich: Neben „Platte“ passte er nicht mehr und rutschte allein
   in die nächste Zeile, neben „Pult“ blieb er stehen. */
@media (max-width: 599px) {
  .geraetezeile__preis { display: block; margin-left: 0; }
}

/* AM HANDY KLEBT DIE ZWISCHENSUMME UNTEN: Wer auf + tippt, sieht gleich, was es kostet. Breit steht die Summe daneben. */
.rechner__leiste { display: none; }
@media (max-width: 899px) {
  .rechner__leiste {
    position: sticky; bottom: 0; z-index: 2;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--sp-4);
    max-width: none; margin: var(--sp-4) calc(-1 * var(--sp-rand)) 0; padding: var(--sp-1) var(--sp-rand);
    background: var(--sp-karte); border-top: 1px solid var(--sp-linie-stark); font-weight: 650;
  }
  .rechner__leiste b { font-variant-numeric: tabular-nums; }
  .rechner__leiste a { display: inline-flex; align-items: center; min-height: var(--sp-griff); }
}

.summenblock { padding: var(--sp-innen); border: 1px solid var(--sp-kontur); border-radius: var(--sp-r-gross); background: var(--sp-grund); box-shadow: var(--sp-tiefe); }
.summenblock__posten { margin: 0 0 var(--sp-4); }
.summenblock__posten dt { margin-top: var(--sp-3); font-size: var(--sp-fs-klein); font-weight: 650; color: var(--sp-text-2); }
.summenblock__posten dt:first-child { margin-top: 0; }
.summenblock__posten dd {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  max-width: none; margin: 0; padding: var(--sp-2) 0; border-bottom: 1px solid var(--sp-linie);
  font-size: var(--sp-fs-klein); font-variant-numeric: tabular-nums;
}
.summenblock__posten dd span:last-child { white-space: nowrap; }
/* Netto und Umsatzsteuer leise in den Zeilen der Posten, darunter groß, was heute zu zahlen ist. */
.summenblock__teil {
  display: flex; justify-content: space-between; gap: var(--sp-3); max-width: none; margin: 0; padding: var(--sp-1) 0;
  font-size: var(--sp-fs-klein); color: var(--sp-text-2); font-variant-numeric: tabular-nums;
}
.summenblock__teil span:last-child { white-space: nowrap; }
.summenblock__teil + .summenblock__heute { margin-top: var(--sp-2); }
.summenblock__heute { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--sp-3); max-width: none; margin: var(--sp-4) 0 var(--sp-2); font-weight: 650; }
.summenblock__heute b { font-size: var(--sp-fs-summe); font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.025em; color: var(--sp-nacht); }
.summenblock .knopf--voll { width: 100%; }
.summenblock .aktion { margin-bottom: var(--sp-3); }

/* ---------------------------------------------------------------- Seitlich, Flächen, Tabellen */

/* SEITLICH FÜR TEXTABSCHNITTE UND UNTERSEITEN: Überschrift links, Inhalt rechts, zwei gleiche Hälften wie überall. Ein
   Zusatz unter der Überschrift (Bild, Kontaktkarte) steht auf dem Handy erst nach dem Inhalt, auf breiten Bildschirmen
   bleibt er als Fläche beim Lesen daneben stehen. */
.seitlich { display: grid; gap: var(--sp-5) var(--sp-gitter); grid-template-areas: "kopf" "inhalt" "zusatz"; }
.seitlich__kopf { grid-area: kopf; }
.seitlich__inhalt { grid-area: inhalt; min-width: 0; }
.seitlich__zusatz { grid-area: zusatz; }
.seitlich__kopf > :last-child, .seitlich__inhalt > :last-child { margin-bottom: 0; }
.seitlich__inhalt > :first-child { margin-top: 0; }
/* Rechts gliedern Zwischentitel den Inhalt; der Titel der Seite steht links. */
.seitlich__inhalt h2, .flaeche h2 { font-size: var(--sp-fs-h2-seite); letter-spacing: -.02em; }
@media (min-width: 900px) {
  .seitlich { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; grid-template-areas: "kopf inhalt" "zusatz inhalt"; align-items: start; }
  .seitlich__zusatz.flaeche { position: sticky; top: calc(var(--sp-kopf) + var(--sp-4)); }
}

/* FLÄCHEN, WO ETWAS ZUSAMMENGEHÖRT: Kontakt, Hilfe und jede Gruppe von Fragen liegen auf --sp-karte. So hat die Seite
   Ebenen statt nur Linien – mit Kontur und Kante, ohne weichen Schatten. */
.flaeche { margin-top: var(--sp-5); padding: var(--sp-innen); border: 1px solid var(--sp-kontur); border-radius: var(--sp-r-gross); background: var(--sp-karte); box-shadow: var(--sp-tiefe); }
.seitlich__zusatz.flaeche, .zwei-spalten > .flaeche { margin-top: 0; }
.flaeche > :last-child { margin-bottom: 0; }
.flaeche .aktion { margin-top: var(--sp-3); }
.abschnitt--band .flaeche { background: var(--sp-grund); }
/* QUER LIEGENDE FLÄCHE: Ein kurzer Block (Ohne Gerät, Frage nicht dabei) steht als breite Ebene mit zwei Hälften statt
   als schmale Textspalte im Leeren. */
.flaeche--quer { display: grid; gap: var(--sp-4) var(--sp-gitter); margin-top: var(--sp-gitter); }
.flaeche--quer > * > :last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .flaeche--quer { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
}
.kontaktwege { margin: var(--sp-4) 0; padding: 0; list-style: none; }
.kontaktwege li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); min-height: var(--sp-griff); max-width: none; }
.kontaktwege li > a { display: inline-flex; align-items: center; min-height: var(--sp-griff); }
/* Die Anschrift gehört mit auf die Kontaktkarte, durch eine Linie von den schnellen Wegen getrennt. */
.kontaktwege + address { padding-top: var(--sp-4); border-top: 1px solid var(--sp-linie); }

.tabelle { width: 100%; margin: var(--sp-4) 0; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabelle caption { padding-bottom: var(--sp-3); text-align: left; font-size: var(--sp-fs-h3); font-weight: 650; line-height: 1.15; letter-spacing: -.015em; }
.tabelle th, .tabelle td { padding: var(--sp-3) var(--sp-4) var(--sp-3) 0; border-bottom: 1px solid var(--sp-linie); text-align: left; vertical-align: top; }
.tabelle thead th { padding-block: var(--sp-2); font-size: var(--sp-fs-mikro); font-weight: 650; color: var(--sp-text-3); }
.tabelle th:last-child, .tabelle td:last-child { padding-right: 0; }
.tabelle tbody th { font-weight: 650; }

/* WAS TAPORTA ÜBERNIMMT UND WAS BLEIBT (Startseite): Thema, Leistung, Grenze nebeneinander auf einer Karte. Die Spalte
   „übernimmt“ trägt im Kopf Petrol, die andere bleibt Tinte – Farbe ist Bedeutung. Schmal wird jede Zeile ein Block, und
   die Spaltennamen stehen über ihrem Text (data-spalte), weil der Tabellenkopf dann fehlt. */
.leistung {
  width: 100%; margin-top: var(--sp-6); border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--sp-kontur); border-radius: var(--sp-r-gross); background: var(--sp-karte); box-shadow: var(--sp-tiefe);
}
.leistung th, .leistung td { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--sp-linie); text-align: left; vertical-align: top; }
.leistung thead th { border-top: 0; font-size: var(--sp-fs-klein); font-weight: 650; }
.leistung thead th:nth-child(2) { color: var(--sp-akzent-text); }
.leistung tbody th { width: 14%; font-weight: 650; }
.leistung td { width: 43%; color: var(--sp-text-2); }
.leistung td:nth-child(2) { color: var(--sp-text); }
@media (max-width: 759px) {
  .leistung, .leistung tbody, .leistung tr, .leistung th, .leistung td { display: block; width: auto; }
  .leistung thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .leistung tbody th { width: auto; padding-bottom: 0; }
  .leistung td { padding-top: var(--sp-2); border-top: 0; }
  .leistung td::before { content: attr(data-spalte); display: block; font-size: var(--sp-fs-mikro); font-weight: 650; color: var(--sp-text-2); }
  .leistung td:nth-child(2)::before { color: var(--sp-akzent-text); }
  .leistung tr + tr th { border-top: 1px solid var(--sp-linie); }
  .leistung tr:first-child th { border-top: 0; }
}

/* LIESENER.DE: Saschas Büro als ruhige Visitenkarte unter dem Gründer-Text, Logo in seiner eigenen Farbe. */
.liesener {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-2); padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--sp-kontur); border-radius: var(--sp-r); background: var(--sp-karte); box-shadow: var(--sp-tiefe);
  color: var(--sp-text-2); font-size: var(--sp-fs-klein); text-decoration: none;
}
.liesener:hover { border-color: var(--sp-text); }
.liesener img { width: 150px; height: auto; flex: none; }
.liesener span { flex: 1 1 14rem; }

/* DATENBLATT: Begriff links, Angabe rechts – Hersteller, Kennzeichnung, Warnhinweise. */
.datenblatt { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; border-top: 1px solid var(--sp-linie); }
.datenblatt > div { padding: var(--sp-3) 0; border-bottom: 1px solid var(--sp-linie); }
.datenblatt dt { font-weight: 650; }
.datenblatt dd { margin: 0; color: var(--sp-text-2); }
.datenblatt ul { margin: 0; padding-left: 1.2em; }
@media (min-width: 760px) {
  .datenblatt > div { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--sp-4); }
}
/* ÜBER DIE GANZE BREITE statt als Hälfte neben einem kurzen Kopf: Links stand sonst eine leere Spalte (/de/geraete). */
.abschnitt__kopf + .datenblatt { margin-top: var(--sp-6); }
@media (min-width: 900px) {
  .datenblatt--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-gitter); }
}

/* ---------------------------------------------------------------- Fragen */

/* Der einzeilige Vorspann steht auf der Grundlinie der H1, nicht an ihrer Oberkante. */
@media (min-width: 900px) {
  .fragen-kopf > * { align-self: baseline; }
}
/* FRAGEN (/de/fragen, /en/faq): die Gruppen in zwei Spalten. Jede Spalte wächst für sich – anders als mit columns springt beim
   Aufklappen nichts in die andere Spalte. */
.fragen-spalten { display: grid; gap: var(--sp-6) var(--sp-gitter); margin: var(--sp-7) 0 var(--sp-5); }
.fragen-spalte { display: grid; gap: var(--sp-6); align-content: start; }
@media (min-width: 900px) {
  .fragen-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.fragen { margin: var(--sp-5) 0; padding: 0 var(--sp-innen); border: 1px solid var(--sp-kontur); border-radius: var(--sp-r-gross); background: var(--sp-karte); box-shadow: var(--sp-tiefe); }
.abschnitt--band .fragen { background: var(--sp-grund); }
.fragen details + details { border-top: 1px solid var(--sp-linie); }
.fragen-gruppe h2 { margin-bottom: var(--sp-3); font-size: var(--sp-fs-h2-seite); letter-spacing: -.02em; }
.fragen-gruppe .fragen { margin: 0; }
/* Fragen sind Einträge, keine Überschriften: eine Stufe unter dem Gruppentitel, sonst stünde eine Wand aus Fett da.
   Flache Zeilen (16 px über und unter der Frage) – mit 20 px und 22 px Schrift lagen sie wie Blöcke übereinander. */
.fragen summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: var(--sp-griff); padding: var(--sp-4) 0;
  font-size: var(--sp-fs-gross); font-weight: 600; line-height: 1.35;
  list-style: none; cursor: pointer;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--sp-dauer);
}
.fragen details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.fragen summary:hover { color: var(--sp-akzent-text); }
/* Die Antwort steht näher an ihrer Frage als an der nächsten. */
.fragen details[open] > summary { padding-bottom: var(--sp-2); }
/* Die Antwort tritt einen Ton hinter ihre Frage zurück: In derselben Tinte lasen sich offene Fragen als eine Textwand. */
.fragen__antwort { padding: 0 0 var(--sp-5); color: var(--sp-text-2); }
.fragen__antwort > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Formularfelder */

.feld { display: grid; gap: 6px; margin-bottom: var(--sp-4); }
.feld label { font-weight: 650; font-size: var(--sp-fs-klein); }
.feld small { font-size: var(--sp-fs-mikro); color: var(--sp-text-3); }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 48px; padding: 0 var(--sp-3);
  border: 1px solid var(--sp-feld-rand); border-radius: var(--sp-r);
  background: var(--sp-karte); color: var(--sp-text);
}
.feld textarea { min-height: 7rem; padding: var(--sp-3); line-height: 1.5; resize: vertical; }
.feld--mono input { font-family: var(--sp-f-mono); }
/* Felder nebeneinander beginnen oben – sonst streckt ein Hinweis unter dem einen Feld das andere. */
.feld-reihe { display: grid; gap: 0 var(--sp-4); align-items: start; }
@media (min-width: 600px) {
  .feld-reihe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.hinweis { color: var(--sp-hinweis-text); font-weight: 600; }

/* ---------------------------------------------------------------- Notfallkarte */

.karte {
  max-width: 420px; padding: var(--sp-5);
  border: 1.5px dashed var(--sp-linie-stark); border-radius: var(--sp-r);
  background: var(--sp-karte); color: var(--sp-text);
}
.karte__wohnung { margin: 0 0 var(--sp-1); font-size: var(--sp-fs-klein); font-weight: 650; }
.karte__titel { margin: 0 0 var(--sp-4); font-size: var(--sp-fs-h2); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.karte__qr { width: 168px; margin: 0 0 var(--sp-3); }
.karte__qr svg { display: block; width: 100%; height: auto; }
.karte__ohne-qr { margin: 0 0 var(--sp-3); font-size: var(--sp-fs-klein); }
.karte dl { margin: 0 0 var(--sp-3); }
.karte dt { font-size: var(--sp-fs-mikro); font-weight: 650; }
.karte dd { margin: 0 0 var(--sp-2); font-size: var(--sp-fs-gross); font-weight: 650; overflow-wrap: anywhere; }
.karte__mono { font-family: var(--sp-f-mono); letter-spacing: .02em; }
.karte__fuss { margin: 0; font-size: var(--sp-fs-mikro); }
.karte p { max-width: none; }
/* DIE VORSCHAU BLEIBT BEIM TIPPEN IM BLICK: Breit klebt sie neben den Feldern, statt beim Scrollen wegzulaufen. */
@media (min-width: 900px) {
  .karte-spalte { position: sticky; top: calc(var(--sp-kopf) + var(--sp-4)); }
}
/* Den Abstand zum Druckknopf hält schon das Raster. */
.karte-drucken .aktion { margin-top: 0; }

/* ---------------------------------------------------------------- Rechtsseiten (Klassen recht und stand) */

/* Linksbündig an derselben Kante wie Kopf und Fuß; schmal ist nur die Lesebreite, nicht die Seite. Oben derselbe
   Abstand wie der erste Abschnitt jeder Seite, sonst springt die H1 beim Wechsel von Kontakt zum Impressum. */
.recht, .schmal {
  max-width: calc(var(--sp-breite) + 2 * var(--sp-rand));
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-rand) var(--sp-8);
}
.recht > *, .schmal > * { max-width: var(--sp-lesen); }
.schmal h1 { font-size: var(--sp-fs-h1-seite); line-height: 1.05; letter-spacing: -.03em; margin-bottom: var(--sp-5); }
.recht h1 { font-size: var(--sp-fs-h2); line-height: 1.1; letter-spacing: -.025em; margin-bottom: var(--sp-5); }
.recht h2 { margin-top: var(--sp-6); font-size: var(--sp-fs-h3); letter-spacing: -.01em; }
.recht h3 { margin-top: var(--sp-5); margin-bottom: var(--sp-2); font-size: var(--sp-fs-text); }
.recht ul, .recht ol { padding-left: 1.25em; }
.recht li { margin-bottom: var(--sp-1); }
.recht dl { display: grid; grid-template-columns: minmax(0, 1fr); }
.recht dt { font-weight: 650; }
.recht dd { margin: 0 0 var(--sp-3); }
/* Das Inhaltsverzeichnis aus sp_recht_gliedern(): breit klebt es rechts neben der Lesespalte, schmal entfällt es. */
.recht__inhalt { display: none; }
.recht__inhalt ul { margin: 0; padding: 0; list-style: none; }
.recht__inhalt li { margin: 0; }
.recht__inhalt a { display: flex; align-items: center; min-height: var(--sp-griff); line-height: 1.3; color: var(--sp-text-2); text-decoration: none; }
.recht__inhalt a:hover { color: var(--sp-akzent-text); text-decoration: underline; }
@media (min-width: 1200px) {
  .recht:has(> .recht__inhalt) { display: grid; grid-template-columns: minmax(0, var(--sp-lesen)) minmax(0, 1fr); column-gap: var(--sp-8); align-items: start; }
  .recht__text { grid-column: 1; grid-row: 1; }
  /* Höher als der Bildschirm wird es nie: Bei vielen Paragrafen scrollt die Liste in sich. */
  .recht__inhalt {
    display: block; grid-column: 2; grid-row: 1;
    position: sticky; top: calc(var(--sp-kopf) + var(--sp-4));
    max-height: calc(100vh - var(--sp-kopf) - 2 * var(--sp-4)); overflow-y: auto;
    padding-left: var(--sp-5); border-left: 1px solid var(--sp-linie);
    font-size: var(--sp-fs-klein);
  }
  /* KURZE SEITEN IN ZWEI SPALTEN (Impressum): Einspaltig stand es in einer halben Seite und lief über zwei Bildschirme.
     Unter der überspannenden H1 fallen die Abstände nicht zusammen, darum beginnt die erste h2 ohne eigenen. */
  .recht--kurz { columns: 2; column-gap: var(--sp-8); }
  .recht--kurz > * { break-inside: avoid; }
  .recht--kurz > h1 { column-span: all; }
  .recht--kurz > h2 { break-after: avoid; }
  .recht--kurz > h2:first-of-type { margin-top: 0; }
}
.stand { margin-top: var(--sp-6); font-size: var(--sp-fs-klein); color: var(--sp-text-3); }

/* ---------------------------------------------------------------- Fuß */

/* Breit bekommt der Fuß mehr Luft, schmal bleibt er knapp, sonst wäre er am Handy wieder höher als ein Bildschirm. */
.fuss {
  display: grid; gap: var(--sp-5) var(--sp-6);
  max-width: calc(var(--sp-breite) + 2 * var(--sp-rand));
  position: relative;
  margin: 0 auto; padding: var(--sp-6) var(--sp-rand) var(--sp-7);
  font-size: var(--sp-fs-klein); color: var(--sp-text-2);
}
.fuss::before { content: ""; position: absolute; top: 0; left: var(--sp-rand); right: var(--sp-rand); border-top: 1px solid var(--sp-linie); }
/* Endet die Seite mit einem Band, trennt schon die Fläche – der Strich darüber wäre doppelt. */
main:has(> .abschnitt--band:last-of-type, > .abschnitt--leinen:last-of-type) + .fuss::before { content: none; }
.fuss p { margin: 0 0 var(--sp-2); }
/* LINKS ALS ZEILEN, NICHT ALS TÜRME: Untereinander war der Fuß auf dem Handy höher als ein Bildschirm. Der Abstand
   zwischen den Links gehört zur Tippfläche, so ist auch „AGB“ breiter als hoch; der negative Rand hält die Kante. */
.fuss ul { display: flex; flex-wrap: wrap; margin: 0 calc(-1 * var(--sp-3)); padding: 0; list-style: none; }
.fuss li a, .fuss__schreiben { display: inline-flex; align-items: center; min-height: var(--sp-griff); color: var(--sp-text); text-decoration: none; }
.fuss li a { padding-inline: var(--sp-3); }
.fuss li a:hover, .fuss__schreiben:hover { text-decoration: underline; }
.fuss a[aria-current="page"] { text-decoration: underline; }
/* Der Claim steht neben der Wortmarke, Name und der Weg zum Formular darunter: eine Zeile weniger, auf jeder Breite. */
.fuss__marke { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sp-4); }
.fuss__marke .marke, .fuss__marke > p { margin: 0; }
.fuss__marke > p + p { flex-basis: 100%; }
.fuss__klein { grid-column: 1 / -1; max-width: none; margin: 0; font-size: var(--sp-fs-mikro); color: var(--sp-text-3); }
.fuss__klein + .fuss__klein { margin-top: calc(var(--sp-2) - var(--sp-5)); }
/* „Admin“ steht hinter dem Rechtlichen ganz rechts – eine Zeile, solange Platz ist, sonst rechts darunter. Leise, aber mit
   voller Tippfläche; der negative Rand hält die rechte Kante wie die Liste die linke. */
.fuss__recht { display: flex; flex-wrap: wrap; align-items: center; }
.fuss__admin {
  display: inline-flex; align-items: center; min-height: var(--sp-griff);
  margin-inline: auto calc(-1 * var(--sp-3)); padding-inline: var(--sp-3); color: var(--sp-text-3); text-decoration: none;
}
.fuss__admin:hover { color: var(--sp-text); text-decoration: underline; }
/* Breit steht die Marke links, rechts untereinander die Seiten, das Rechtliche und die zwei kleinen Sätze (Preise,
   Marken). Der Fuß des Gastgeber-Bereichs hat keine Marke und bleibt einspaltig. */
@media (min-width: 760px) {
  .fuss { padding-block: var(--sp-7) var(--sp-8); }
  .fuss:has(> .fuss__marke) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .fuss__marke { grid-row: span 4; align-self: start; }
  .fuss__marke ~ .fuss__klein { grid-column: 2; }
}

/* ---------------------------------------------------------------- Bewegung und Druck */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  @page { margin: 12mm; }
  :root { --sp-grund: #FFFFFF; --sp-karte: #FFFFFF; --sp-text: #000000; --sp-text-2: #222222; --sp-text-3: #444444; }
  body { background: #FFFFFF; }
  .kopf, .fuss, .sprung, .nicht-drucken, .knopf, .kopieren { display: none !important; }
  .abschnitt, main > .abschnitt:first-child { padding-block: 0 8mm; }
  .abschnitt--band { background: none; }
  .abschnitt + .abschnitt::before { display: none; }
  .karte { width: 105mm; max-width: none; padding: 7mm; border: .3mm dashed #000000; border-radius: 0; break-inside: avoid; }
  .karte__qr { width: 42mm; }
}