/*
 * Farben, Schriften, Abstaende und der Rahmen - die eine Stelle, an der sie stehen.
 *
 * WOHER DIESE DATEI KOMMT (Auftrag A-2026-09-000016): Sie ist die style.css des alten
 * Systems (public/homepage/style.css, gemessen am 2026-09-01). Der Board am 2026-09-01
 * woertlich: "Und sie soll auch genauso aussehen, wie sie in der alten Welt ausgesehen
 * hat." Die vorherige Fassung war ein eigener, zurueckhaltender Entwurf - er trug, und er
 * sah dem Alten nicht aehnlich. Uebernommen ist deshalb das Alte, nicht das Bessere.
 *
 * WIE DIESE DATEI ZU BENUTZEN IST: Ganz oben in :root stehen die Werte. Jede FARBE
 * darunter nimmt sie ueber var(...) - wer eine Farbe aendern will, aendert genau eine
 * Zeile, und sie aendert sich auf allen Seiten (Auftrag A-2026-09-000007, Punkt c).
 *
 * WARUM DIE WERTE ENGLISCH HEISSEN, obwohl im Haus deutsch benannt wird: Die sechs
 * uebertragenen Seiten rufen sie in ihren style-Attributen beim Namen (etwa
 * color:var(--ink-soft) auf index, fuer-wen und about). Umbenennen hiesse, den
 * uebertragenen Aufbau anzufassen, und das verbietet der Auftrag. Zwei Saetze Namen
 * nebeneinander waeren dieselbe Sache an zwei Stellen - also bleibt der eine alte Satz.
 * Was NICHT aus dem alten System kommt, heisst wieder deutsch: --kopf-hoehe und
 * --logo-hoehe. Beide standen dort nicht als Wert, sondern als Zahl in mehreren Zeilen.
 *
 * WAS DIE FARBEN NICHT ALLEIN ENTSCHEIDEN: Der Kopf traegt ein Logo als Bild
 * (medien/hauptlogo-trim.png). Seine Farben stecken in der Datei und nicht hier - wer eine
 * Grundfarbe wechselt, sieht sie am Logo nicht mit wechseln.
 *
 * WOHER DIE WERTE KOMMEN, UND WOHER NICHT: Sie sind die des alten Systems und tragen dort
 * seit Monaten, aber sie sind KEINE frische Markenentscheidung. Wofuer Feedsmith steht,
 * gehoert zu G18 (Marke Feedsmith, Vidal).
 *
 * WARUM KEINE SCHRIFT AUS DEM NETZ: --sans nennt nur Schriften, die auf dem Geraet schon
 * liegen. In dieser Datei steht kein url(), kein @import und kein @font-face - genau wie im
 * alten System. Eine geladene Schriftdatei waere ein zweiter Weg zum ersten Bild und ein
 * Datenabfluss zu einem Fremden.
 *
 * WAS EINE EINZELNE SEITE DAZULEGT, steht NICHT hier, sondern als `stil` in ihrer eigenen
 * Datei unter seiten/ - so wie im alten System, wo index.html und preise.html je einen
 * eigenen <style>-Block mitbrachten. Er kommt im Dokument HINTER dieser Datei und darf
 * deshalb ueberschreiben, was hier steht.
 */

:root{
  --bg:#F4F6F8; --panel:#FFFFFF; --card:#FFFFFF; --line:#E5E8EC; --line-soft:#EFF1F4;
  --ink:#1A1D24; --ink-soft:#40454F; --muted:#6A717C; --faint:#9AA1AC;
  --b1:#4E54D6; --b1-ink:#3A3FAF; --b1-soft:#ECEDFB; --b2:#0FA396; --ok:#2E9E6B;
  --aurora:linear-gradient(135deg,#4E54D6 0%,#22D3EE 100%);
  --sans:"Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --shadow:0 12px 40px -18px rgba(30,40,90,.22);
  --radius:16px;
  /* Kopfleiste: ihre Hoehe steht an einer Stelle, weil auch das Sprungziel einer
     Ueberschrift darunter passen muss - siehe .prose h2[id]. */
  --kopf-hoehe:64px;
  /* So hoch erscheint das Logo im Kopf. Im alten System stand die Zahl als style-Attribut
     an jedem der sechzehn <img>; hier steht sie einmal. */
  --logo-hoehe:46px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--b1);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px}

/* Kopf.
   DIE NAMEN IM AUFBAU SIND ANDERE ALS IM ALTEN SYSTEM, das Aussehen ist dasselbe: dort
   header.nav > .wrap > a.brand + nav.links, hier header.kopf > .wrap > a.wortmarke + nav.
   Der Kopf kommt aus geruest/seite.js und steht deshalb nur einmal im Baum.
   NICHT UEBERNOMMEN: .brand .mark, ein farbiges Kaestchen neben der Wortmarke. Im alten
   System stand im .brand nur das <img>; die Regel griff dort schon nichts. */
.kopf{position:sticky;top:0;z-index:40;background:rgba(244,246,248,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.kopf .wrap{display:flex;align-items:center;gap:18px;height:var(--kopf-hoehe)}
.wortmarke{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.14rem;letter-spacing:-.02em;color:var(--ink)}
.wortmarke:hover{text-decoration:none}
/* display:block nimmt die Grundlinien-Luecke weg, die ein Bild als Textzeichen sonst unter
   sich stehen laesst. Die Hoehe steht in :root, die Breite folgt dem Seitenverhaeltnis;
   die width/height am <img> sind die echten Bildmasse und halten den Platz frei, bevor das
   Bild geladen ist (siehe geruest/seite.js). */
.wortmarke img{display:block;height:var(--logo-hoehe);width:auto}
.kopf nav{margin-left:auto}
.kopf nav ul{display:flex;gap:20px;align-items:center;margin:0;padding:0;list-style:none}
.kopf nav a{color:var(--ink-soft);font-weight:500;font-size:.95rem}
.kopf nav a:hover{color:var(--ink);text-decoration:none}
.kopf nav a[aria-current="page"]{color:var(--b1);font-weight:700}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.98rem;border-radius:12px;padding:.72em 1.5em;cursor:pointer;border:1px solid transparent;transition:transform .12s ease,box-shadow .18s ease}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--aurora);color:#fff;box-shadow:0 10px 26px -8px rgba(78,84,214,.6)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--b1);color:var(--b1)}
.btn-lg{padding:.9em 1.9em;font-size:1.05rem}

/* Abschnitte.
   .inhalt ist das <main> um den Seiteninhalt. Es traegt bewusst KEINE Breite und KEINEN
   Rand: Im alten System standen die <section> unmittelbar im <body>, ihre Flaeche ging von
   Kante zu Kante, und die Breite machte erst das .wrap darin. Wer .inhalt eine max-width
   gibt, nimmt jedem farbigen Abschnitt seine Kante. */
section{padding:74px 0}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--b1);background:var(--b1-soft);padding:5px 12px;border-radius:999px;margin-bottom:14px}
h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.08;letter-spacing:-.025em;margin:.2em 0 .3em;font-weight:800}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 .4em;font-weight:800}
h3{font-size:1.18rem;margin:0 0 .3em;font-weight:700;letter-spacing:-.01em}
.lead{font-size:1.22rem;color:var(--ink-soft);line-height:1.55}
.muted{color:var(--muted)}
.center{text-align:center}

/* Hero */
.hero{position:relative;padding:86px 0 64px;overflow:hidden}
.hero:before{content:"";position:absolute;inset:-40% 20% auto -20%;height:600px;background:radial-gradient(closest-side,rgba(78,84,214,.16),transparent 70%);z-index:0}
.hero:after{content:"";position:absolute;inset:-30% -20% auto 40%;height:520px;background:radial-gradient(closest-side,rgba(34,211,238,.16),transparent 70%);z-index:0}
.hero .wrap{position:relative;z-index:1}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* Karten und Raster */
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.feat .ic{width:44px;height:44px;border-radius:12px;background:var(--b1-soft);display:grid;place-items:center;font-size:1.35rem;margin-bottom:12px}
.step{display:flex;gap:16px;align-items:flex-start;margin:0 0 22px}
.step .n{width:38px;height:38px;flex:none;border-radius:11px;background:var(--aurora);color:#fff;display:grid;place-items:center;font-weight:800;box-shadow:0 8px 18px -6px rgba(78,84,214,.5)}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.soft{background:linear-gradient(180deg,#fff, #FAFBFD);border:1px solid var(--line)}

/* Preise */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.price{display:flex;flex-direction:column}
.price.featured{border-color:var(--b1);box-shadow:0 18px 50px -20px rgba(78,84,214,.45)}
.price .amt{font-size:2rem;font-weight:800;margin:.1em 0}
.price ul{list-style:none;padding:0;margin:14px 0 20px}
.price li{padding:7px 0;border-top:1px solid var(--line-soft);color:var(--ink-soft);font-size:.95rem}
.price li:before{content:"✓ ";color:var(--b2);font-weight:800}

/* Rechtstexte und Fliesstext.
   KEINE DER SECHS SEITEN BENUTZT DIESE REGELN HEUTE: Impressum, Datenschutz und die
   uebrigen Rechtstexte sind nicht uebertragen (LIESMICH.md, "Was hier absichtlich fehlt").
   Sie stehen hier, weil sie im alten System stehen und die Seiten, die sie brauchen, noch
   kommen - wer sie jetzt streicht, streicht sie fuer den Naechsten mit. */
.prose{max-width:760px;margin:0 auto;overflow-wrap:break-word}
.prose h2{margin-top:1.4em}
.prose h3{margin-top:1.2em}
.prose p,.prose li{color:var(--ink-soft)}
/* Sprungziele der AGB: die Kopfleiste klebt oben und wuerde die angesprungene Ueberschrift
   sonst verdecken. */
.prose h2[id]{scroll-margin-top:calc(var(--kopf-hoehe) + 16px)}
/* Tabellen im Rechtstext (AGB: Paketumfang, Preise). Feste Breite statt Eigenbreite, damit
   auf dem Telefon der Text in den Zellen umbricht und die Seite nicht seitlich scrollt. */
.prose table{width:100%;table-layout:fixed;border-collapse:collapse;margin:0 0 1.1em;font-size:.95rem}
.prose th,.prose td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);color:var(--ink-soft);vertical-align:top}
.prose th{color:var(--ink);font-weight:700}
/* Drucken (Strg+P, "Als PDF speichern"). Der zweite Weg zum Aufbewahren neben /agb.txt:
   Navigation und Fuss gehoeren nicht auf ein Vertragsdokument, der Text schon. Gilt fuer
   alle Marketing-Seiten, weil eine gedruckte Seite nirgends eine Kopfleiste braucht. */
@media print {
  .kopf, .fuss { display: none !important; }
  body { background: #fff; }
  .wrap { max-width: none; padding: 0 12mm; }
  .prose { max-width: none; }
  .prose h2 { break-after: avoid; page-break-after: avoid; }
  .prose p, .prose li, .prose table { break-inside: avoid; page-break-inside: avoid; }
}
.ph{background:#FFF6E5;border:1px dashed #E5B860;border-radius:8px;padding:2px 8px;color:#8a5a12;font-size:.92em}

/* Fuss.
   ER TRAEGT SEIT A-2026-09-000119 WIEDER DEN AUFBAU DES ALTEN: links die Marke mit ihrem
   Leitsatz, daneben die Spalten des Fussmenues, darunter die Zeile mit dem Rechtstraeger.
   Die Werte kommen aus dem alten System (footer, footer .cols, footer a und .foot-bottom
   in public/homepage/style.css, gemessen am 2026-09-03). EINE STELLE IST NICHT
   UEBERNOMMEN, und mit Absicht: .fusszeile laesst die vier Angaben von .foot-bottom weg,
   die dort zwei Kinder nebeneinanderstellten (display:flex, justify-content, flex-wrap,
   gap) - das zweite war "Schon dabei? Zur Schmiede", und es steht hier nicht mehr.
   EINE ANGABE KOMMT DAZU, die es dort nicht brauchte: display:contents auf .fuss nav -
   sie stellt gerade das Bild des alten wieder her (siehe unten).
   EIN VERWEIS DES ALTEN FUSSES FEHLT WEITERHIN: "Zur Schmiede" fuehrt hinter die
   Anmeldung. Steht im Ergebnis zu A-2026-09-000119. "Cookie-Einstellungen" gibt es seit
   A-2026-09-000125 wieder; er braucht hier keine eigene Regel mehr, weil er seit
   A-2026-09-000126 als Menuepunkt in der Spalte "Rechtliches" steht und damit unter
   .fuss nav a faellt - genau wie im alten System, wo footer a ihn traf.
   WAS HIER NICHT ENTSCHIEDEN WIRD: welche Verweise im Fuss stehen. Das sagt jede Seite
   selbst ueber ihr menue - hier steht nur, wie sie aussehen. */
.fuss{background:var(--panel);border-top:1px solid var(--line);padding:46px 0 34px;margin-top:20px}
/* Marke und Menuespalten nebeneinander, wie die Bloecke des alten footer .cols - und es
   sind dieselben vier Kaesten wie dort. Dass die drei Spalten im Dokument in EINEM <nav>
   stecken, macht display:contents fuer die Anordnung unsichtbar (siehe bei .fuss nav). */
.fuss-spalten{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between}
.fuss-marke{max-width:280px}
.fuss-marke p{color:var(--muted);font-size:.9rem;margin:10px 0 0}
/* DAS <nav> GIBT SEINEN KASTEN AUF. Im alten System lagen die drei Menuespalten als
   gleichrangige Geschwister neben der Marke; hier stecken sie in EINEM <nav>, damit ein
   Vorleser EIN Menue ankuendigt und nicht drei (geruest/seite.js, alsFussmenue). Mit
   display:contents bleibt das <nav> im Dokument und im Vorlese-Baum, hat aber keinen
   eigenen Kasten mehr - die drei Spalten werden damit doch Geschwister der Marke, und
   .fuss-spalten verteilt den freien Platz auf DREI Luecken wie footer .cols im alten.
   WARUM ES DIESE ZEILE BRAUCHT (Auftrag A-2026-09-000126): Bis dahin war das <nav> ein
   Kasten mit flex:1. Der schluckte den freien Platz der aeusseren Ebene ganz, dort blieb
   nichts mehr zu verteilen, und die zwei Luecken INNERHALB des <nav> bekamen ihn. IM
   BROWSER GEMESSEN am 2026-09-03, alt und neu nebeneinander, chromium: Bei 1080 px
   Fenster und breiter stand "Produkt" 122 px zu weit links und "Unternehmen" 61 px;
   zwischen 444 und 544 px stapelten sich die drei Spalten in einem schmalen Streifen
   rechts (bei 520 px war er 166 px breit). DIE SPALTENZEILE wurde dadurch je nach Breite
   119, 142 oder 166 px hoeher als die des alten Systems, der FUSS selbst 87, 111 oder
   134 px - zwei Kaesten, zwei Zahlen, und keine davon gilt fuer den anderen.
   MIT DIESER ZEILE STEHT JEDER DER VIER KAESTEN WAAGERECHT AUF DEM PIXEL DORT, WO ER IM
   ALTEN SYSTEM STEHT: nachgemessen in der Gegenlesung A-2026-09-000135 bei JEDER Breite
   von 320 bis 1440 px in Zweierschritten (561 Breiten) - x und Breite weichen ueberall
   um genau 0 ab.
   SENKRECHT BLEIBT EIN REST, UND ER KOMMT NICHT VON DIESER ZEILE: Solange die Spalten
   unter der Marke stehen (bis 712 px), haengt ihr Anfang an deren Hoehe, und der
   Markenblock ist hier niedriger als im alten System - unter 428 px um 26,8 px, darueber
   um 0,14 px. Das ist der eigene Fund am Markenblock (padding aus "footer a",
   margin-bottom am Logo, Raender des Leitsatz-Absatzes), gemeldet im Ergebnis zu
   A-2026-09-000126 und dort ausdruecklich nicht behoben.
   WAS SIE KOSTET: im Vorlese-Baum von chromium nichts - navigation "Fussmenue" steht mit
   und ohne sie da, mit denselben Kindern (CDP Accessibility.getFullAXTree, 2026-09-03).
   In ANDEREN Browsern ist das nicht gemessen: auf dieser Maschine laeuft nur chromium
   (hausordnung-innen.md). Aeltere Browser haben ein display:contents-Element aus dem
   Baum genommen; wer das fuer die Netzadresse pruefen will, prueft genau das. */
.fuss nav{display:contents}
.fuss-spalte b{font-size:.85rem}
.fuss nav ul{margin:0;padding:0;list-style:none}
.fuss nav a{color:var(--muted);display:block;padding:4px 0;font-size:.92rem}
.fuss nav a:hover{color:var(--ink)}
.fusszeile{border-top:1px solid var(--line);margin:26px 0 0;padding-top:18px;color:var(--faint);font-size:.85rem}

/* ===== Geteilte Komponenten fuer Unterseiten (additiv, Board 2026-07-22) ===== */
/* Vertrauens-/Feature-Karten mit Linien-Icon */
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tic{width:46px;height:46px;border-radius:12px;background:var(--b1-soft);display:grid;place-items:center;margin-bottom:14px;color:var(--b1)}
.tic svg{width:24px;height:24px}
/* Fuer-wen / fuer-wen-nicht Listen */
.fit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.fit-list{list-style:none;padding:0;margin:0}
.fit-list li{position:relative;padding:11px 0 11px 30px;border-top:1px solid var(--line-soft);color:var(--ink-soft);line-height:1.5;font-size:.98rem}
.fit-list li:first-child{border-top:none}
.fit-yes li:before{content:"\2713";position:absolute;left:0;top:11px;color:var(--b2);font-weight:800}
.fit-no li:before{content:"\00d7";position:absolute;left:0;top:11px;color:var(--faint);font-weight:800;font-size:1.1rem;line-height:1.4}
/* Segment-Karten (Fuer wen): grosse primaere + kleinere sekundaere */
.seg-primary{background:var(--card);border:1px solid var(--b1);border-radius:var(--radius);padding:30px;box-shadow:0 18px 50px -20px rgba(78,84,214,.35)}
.seg-primary h3{font-size:1.4rem}
/* Akkordeon (FAQ / Einwaende) */
.acc{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.acc details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:0}
.acc summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:700;font-size:1.02rem;display:flex;align-items:center;justify-content:space-between;gap:12px}
.acc summary::-webkit-details-marker{display:none}
.acc summary:after{content:"+";color:var(--b1);font-weight:800;font-size:1.3rem;line-height:1}
.acc details[open] summary:after{content:"\2013"}
.acc .acc-body{padding:0 22px 20px;color:var(--ink-soft);line-height:1.6}
.acc-group{max-width:760px;margin:0 auto 30px}
.acc-group>.eyebrow{margin-left:2px}
.pill{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--b2);background:rgba(15,163,150,.12);padding:3px 9px;border-radius:999px}
/* Preise: Umschalter Monat/Jahr. Die Preisseite legt darueber ihre eigene Fassung - siehe
   stil in seiten/preise.js, dort steht auch, warum sie anders aussieht. */
.bill-toggle{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:5px;gap:4px;margin:6px auto 0}
.bill-toggle button{padding:.6em 1.3em;border-radius:12px;font-weight:700;font-size:.92rem;color:var(--muted);background:transparent;border:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:7px}
.bill-toggle button.active{background:#fff;color:var(--ink);box-shadow:0 6px 16px -8px rgba(30,40,90,.3)}
.bill-save{font-size:.72rem;font-weight:800;color:var(--b2);background:rgba(15,163,150,.14);border-radius:999px;padding:2px 8px}
/* Preis-Karten Zusatz */
.price-badge{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--aurora);padding:4px 11px;border-radius:12px;margin-bottom:10px}
.price .per{color:var(--muted);font-size:1rem;font-weight:600}
.price .mwst{color:var(--faint);font-size:.82rem;margin:2px 0 0}
.price .yr-note{color:var(--b2);font-size:.84rem;font-weight:700;margin:4px 0 0;min-height:1.1em}
.price .btn{margin-top:auto}
.price h3{font-size:1.25rem}
.price .sub{color:var(--muted);font-size:.92rem;margin:2px 0 10px}
/* Vergleichsrahmen / Hinweiszeilen */
.note-band{background:var(--b1-soft);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;color:var(--ink-soft);line-height:1.6}
.note-band b{color:var(--ink)}
/* Prosa-Bloecke (Ueber uns) */
.value-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.value-list li{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 22px;color:var(--ink-soft);line-height:1.6}
.value-list li b{color:var(--ink);display:block;margin-bottom:3px}
.portrait-ph{aspect-ratio:1/1;max-width:200px;background:linear-gradient(180deg,#F7F8FA,#EDEFF3);border:1px dashed var(--line);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:16px;color:var(--muted)}
.portrait-ph .ph-tag{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.ph-box{background:linear-gradient(180deg,#F7F8FA,#EDEFF3);border:1px dashed var(--line);border-radius:var(--radius);padding:22px 24px;color:var(--muted);line-height:1.6}
.ph-box .ph-tag{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.founder{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
@media(min-width:721px){.founder{grid-template-columns:200px 1fr;gap:30px}}

@media(max-width:820px){
  .grid-3,.price-grid,.trust-grid,.fit-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  /* Mobil-Overflow-Schutz: Grid-Kinder duerfen unter ihre min-content-Breite schrumpfen */
  .grid>*,.grid-3>*,.grid-2>*,.trust-grid>*,.fit-grid>*,.price-grid>*{min-width:0;max-width:100%}
  .bill-toggle{max-width:100%;flex-wrap:wrap;justify-content:center}
  section{padding:54px 0}
  /* DAS ALTE SYSTEM HATTE HIER EINEN BURGER-KNOPF und schob das Menue hinter ihn. Der Knopf
     war Verhalten des RAHMENS; A-2026-09-000016 holt das Verhalten der SEITEN zurueck und
     den Rahmen ausdruecklich nicht. Ohne Knopf duerfen die Punkte nicht versteckt werden -
     sonst waeren sie auf dem Telefon gar nicht mehr erreichbar. Sie brechen deshalb um, und
     der Kopf waechst mit. Als Unterschied zum Alten gemeldet, nicht still gelassen. */
  .kopf .wrap{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:10px;row-gap:4px}
  .kopf nav{margin-left:0;width:100%}
  .kopf nav ul{gap:16px}
  .kopf nav a{font-size:.9rem}
}