/* ============================================================================
   STIL.CSS — eine Datei für alle Seiten

   Die Anmutung folgt den Unterlagen: warmes Creme, Gold als einziger Akzent,
   Georgia für die Überschriften. Der Fließtext ist bewusst groß und die Zeilen
   sind bewusst kurz — es ist eine Seite zum Lesen, nicht zum Überfliegen.

   Farben stehen als Variablen. Wer das Aussehen ändern will, ändert sie hier
   und nirgends sonst.
   ========================================================================== */

:root{
  --papier:      #fbfaf6;   /* Hintergrund */
  --papier-warm: #f5f1e7;   /* Kästen */
  --linie:       #e4dcc9;
  --linie-zart:  #eee7d8;
  --tinte:       #24313a;   /* Fließtext */
  --tinte-tief:  #14202a;   /* Überschriften, Betontes */
  --grau:        #5e6c72;
  /* MARKENGOLD, am 21.8.2026 um vier Prozentpunkte Helligkeit abgedunkelt (0,380 -> 0,336).
     Farbton (41°) und Sättigung sind unverändert — es ist dasselbe Gold, nur eine Spur tiefer.

     WARUM: axe-core meldete auf ALLEN SECHZEHN Seiten dieselbe Sache, 109 Stellen, und alle
     hingen an dieser einen Farbe. Das alte #9a7628 kam je nach Untergrund auf 3,73 bis 4,20 —
     WCAG AA verlangt 4,5. Es lag also nicht knapp daneben, sondern durchgehend. Jetzt: 4,60
     auf dem beigen Band, 5,18 auf Weiss, und Weiss auf Gold (die Knöpfe) ebenfalls 5,18.

     DER HOVER-TON GEHT JETZT NACH UNTEN, nicht nach oben. Vorher wurde ein Link beim
     Überfahren HELLER (#b8933f, 2,88 auf Weiss) — das ist die schlechteste Lesbarkeit genau
     in dem Moment, in dem jemand hinsieht. Deshalb heisst er auch nicht mehr „hell". */
  --gold:        #886823;
  --gold-tief:   #684f1b;
  --gruen:       #4d7256;
  --gruen-zart:  #f2f5f1;
  --braun:       #94603a;
  --braun-zart:  #f7f1ec;
  --tief:        #04121d;   /* die dunklen Bänder, Farbe der App */
  --serif:       Georgia,'Times New Roman',serif;
  --sans:        -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --breit:       1120px;
  --lese:        700px;     /* Lesebreite für Fließtext */
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  background:var(--papier); color:var(--tinte);
  /* 1.125rem statt 18px (21.8.2026). Gemessen: Mit fester Pixelangabe blieb die Schrift
     bei 18px stehen, auch wenn jemand im Browser eine groessere Grundschrift einstellt —
     genau das, worauf aeltere Leser angewiesen sind. Als rem sind es HEUTE dieselben 18px
     (1,125 × 16), und wer 20px einstellt, bekommt 22,5. Alle uebrigen Groessen stehen
     ohnehin in rem und wachsen mit. */
  font-family:var(--sans); font-size:1.125rem; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:var(--gold); text-underline-offset:3px; }
a:hover{ color:var(--gold-tief); }

/* ---------- Gerüst ---------- */
.bahn{ max-width:var(--breit); margin:0 auto; padding:0 24px; }
.lese{ max-width:var(--lese); }
/* JEDER Abschnitt hat oben UND unten Luft. Hier stand einmal
   `section + section{ padding-top:0 }` — und damit klebte jede Überschrift, die auf ein
   farbiges Band folgte, direkt an seiner Unterkante. Die Regel sollte doppelte Abstände
   zwischen zwei schlichten Abschnitten verhindern und hat stattdessen den einen Abstand
   gelöscht, der sichtbar war. */
section{ padding:72px 0; }
.band{ background:var(--papier-warm); border-top:1px solid var(--linie); border-bottom:1px solid var(--linie); }
/* Zwei Bänder hintereinander sollen kein Doppelstrich sein — sie lesen sich dann als ein
   warmer Block mit einer Zäsur darin. Der Abstand bleibt, nur die Linie geht. */
.band + .band{ border-top:0; }
.band-tief{ background:var(--tief); color:#cfd9e0; }
.band-tief h2, .band-tief h3{ color:#e8eef2; }
.band-tief a{ color:#9ec6d8; }

/* ---------- Schrift ---------- */
h1,h2,h3,h4{ font-family:var(--serif); color:var(--tinte-tief); font-weight:600; line-height:1.22; }
/* „Persönlichkeitsentwicklung" ist 25 Zeichen lang und passte auf einem 320 Pixel breiten
   Telefon in keine Zeile — die Startseite ragte 48px ueber den Rand (WCAG 1.4.10, gemessen
   am 21.8.2026). `hyphens:auto` trennt nach den Regeln der Seitensprache (<html lang>),
   `overflow-wrap` faengt den Rest ab, auch wo der Browser kein Trennwoerterbuch hat. Das
   ist ein deutsches Problem: Im Englischen kam es nicht vor. */
h1,h2,h3,h4,.claim,.leit,.zitat,.marke-unter{ overflow-wrap:break-word; hyphens:auto; }
h1{ font-size:2.6rem; letter-spacing:-.01em; }
h2{ font-size:1.85rem; margin-bottom:20px; }
h3{ font-size:1.28rem; margin-bottom:10px; }
h4{ font-size:1.06rem; margin-bottom:8px; font-weight:700; }
p{ margin-bottom:18px; max-width:var(--lese); }
p:last-child{ margin-bottom:0; }
b,strong{ color:var(--tinte-tief); font-weight:700; }
em{ color:var(--gold); font-style:italic; }
.gross{ font-size:1.18rem; }
.klein{ font-size:.94rem; color:var(--grau); }
.marker{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.leit{ font-family:var(--serif); font-size:1.35rem; font-style:italic; color:var(--gold);
  line-height:1.45; max-width:880px; }
/* Der Markenclaim. Er stand als Kleingedrucktes über der Überschrift und war damit
   das Unauffälligste auf der Seite — jetzt trägt er sie mit. */
.claim{ font-family:var(--serif); font-size:1.6rem; color:var(--tinte-tief); line-height:1.3;
  margin:0 0 16px; letter-spacing:.01em; }
.hero .claim{ font-size:1.9rem; }

/* ---------- Kopfzeile ---------- */
.kopf{
  position:sticky; top:0; z-index:40; background:rgba(251,250,246,.94);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--linie);
}
.kopf-innen{ max-width:var(--breit); margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; gap:20px; }
.marke{ text-decoration:none; display:block; }
.marke-wort{ display:block; font-family:var(--serif); font-size:1.34rem; font-weight:700;
  color:var(--gold); letter-spacing:.03em; }
.marke-luecke{ display:inline-block; width:.45em; }
.marke-unter{ display:block; font-size:.74rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--tinte-tief); font-weight:600; margin-top:4px; }
/* `wrap`: Wer im Browser nur die SCHRIFT vergroessert (nicht die ganze Seite), aendert
   die Fensterbreite nicht — die Medienabfrage unten greift dann nicht, und das Menue lief
   waagerecht aus dem Bild. Mit Umbruch rutscht es stattdessen in eine zweite Zeile. Bei
   normaler Schriftgroesse aendert sich nichts. */
.menue{ margin-left:auto; display:flex; flex-wrap:wrap; gap:26px; }
/* `nowrap`: Ohne das brach „Die App" innerhalb des einen Menüpunkts auf zwei Zeilen,
   sobald es eng wurde — der Kopf sah dann aus wie ein Fehler und nicht wie ein Menü.
   Lieber klappt das ganze Menü zusammen (Grenze weiter unten) als ein Wort mitten durch. */
.menue a{ text-decoration:none; color:var(--tinte); font-size:.96rem; padding:6px 0;
  border-bottom:2px solid transparent; white-space:nowrap; }
.menue a:hover{ color:var(--gold); }
.menue a[aria-current="page"]{ color:var(--gold); border-bottom-color:var(--gold); }
/* Der Sprachumschalter sitzt am Ende des Menüs und ist bewusst zurückgenommen: Er ist
   ein Ausweg, kein Menüpunkt. */
.menue a.sprache{ color:var(--grau); border-left:1px solid var(--linie); padding-left:20px;
  margin-left:2px; }
.menue a.sprache:hover{ color:var(--gold); }
/* Seit dem Spanischen (21.10.2026) sind es zwei Sprachlinks. Der zweite rückt mit einem Punkt
   dicht an den ersten heran, statt einen eigenen Trennstrich und den vollen Abstand zu bekommen:
   „English · ES" liest sich als EIN Umschalter, und die Zeile wird nur um gut 30px länger. */
.menue a.sprache + a.sprache{ border-left:0; padding-left:0; margin-left:-16px; }
.menue a.sprache + a.sprache::before{ content:'·'; margin-right:9px; color:var(--grau); }
.menue-knopf{ display:none; margin-left:auto; background:none; border:0; cursor:pointer;
  width:40px; height:34px; padding:6px; }
.menue-knopf span{ display:block; height:2px; background:var(--tinte); margin:5px 0; border-radius:2px; }
.menue-knopf .lese{ position:absolute; left:-9999px; }
.ueberspringen{ position:absolute; left:-9999px; }
.ueberspringen:focus{ left:12px; top:12px; background:var(--gold); color:#fff;
  padding:8px 14px; border-radius:8px; z-index:60; }

/* ---------- Hero ---------- */
.hero{ padding:64px 0 20px; }
/* Nach dem Kopfbereich genügt weniger — sonst addieren sich sein Fuß und der Kopf des
   nächsten Abschnitts zu einem leeren Bildschirm, besonders auf Seiten, deren Kopf nur
   aus Überschrift besteht. */
.hero + section{ padding-top:32px; }
/* W-10: zwei Ansichten der Konsole auf der Coach-Seite (Beispieldaten). */
.konsole-bilder{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:32px 0 0; }
.konsole-bilder figure{ margin:0; }
.konsole-bilder img{ display:block; width:100%; height:auto; border-radius:14px; border:1px solid var(--linie);
  box-shadow:0 3px 18px rgba(20,32,42,.12); background:var(--tief); }
.konsole-bilder figcaption{ margin-top:12px; font-size:.94rem; color:var(--grau); }
.konsole-bilder figcaption b{ display:block; font-family:var(--serif); font-size:1.06rem;
  color:var(--tinte-tief); font-weight:600; margin-bottom:2px; }
@media (max-width:760px){ .konsole-bilder{ grid-template-columns:minmax(0,1fr); } }
/* W-8 (Petra/Raimund, 5.10.2026): Startseite — Satz, drei Wege und ein Bildschirmfoto daneben.
   Auf dem Telefon rutscht das Bild unter den Text und bleibt klein. */
.hero-zwei{ display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:48px; align-items:center; }
.hero-bild{ margin:0; }
.hero-bild img{ display:block; width:100%; height:auto; border-radius:18px; border:1px solid var(--linie);
  box-shadow:0 3px 18px rgba(20,32,42,.12); background:var(--tief); }
@media (max-width:820px){
  .hero-zwei{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .hero-bild{ max-width:220px; }
}
.hero h1{ font-size:3.1rem; margin-bottom:18px; }
.hero .unter{ font-size:1.24rem; color:var(--grau); max-width:640px; margin-bottom:28px; }

/* ---------- Knöpfe ---------- */
.knoepfe{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:30px; }
.knopf{ display:inline-block; background:var(--gold); color:#fff; text-decoration:none;
  padding:13px 26px; border-radius:999px; font-weight:600; font-size:1rem;
  border:1px solid var(--gold); }
.knopf:hover{ background:var(--gold-tief); border-color:var(--gold-tief); color:#fff; }
.knopf.leer{ background:transparent; color:var(--gold); }
.knopf.leer:hover{ background:var(--papier-warm); color:var(--gold); }
.hinweis-laden{ display:inline-block; background:var(--papier-warm); border:1px solid var(--linie);
  border-radius:999px; padding:11px 22px; font-size:.96rem; color:var(--grau); }
.hinweis-laden b{ color:var(--tinte-tief); }

/* ---------- Karten ---------- */
.raster{ display:grid; gap:24px; margin-top:32px; }
/* `min-width:0` an den Kindern eines Grids: Ohne das ist die Mindestbreite einer Spalte so
   breit wie ihr laengstes Wort — bei doppelter Schriftgroesse sprengte das Vierer-Raster
   damit die Seite nach rechts aus dem Bild (gemessen 21.8.2026: 1403 statt 1280px). Mit 0
   darf die Spalte schmaler werden als ihr Inhalt, und der Text bricht um. */
.raster > *, .kreis-raster > *{ min-width:0; }
.karte p, .karte h3, .karte h4{ overflow-wrap:break-word; hyphens:auto; }
.raster.zwei{ grid-template-columns:repeat(2,1fr); }
.raster.drei{ grid-template-columns:repeat(3,1fr); }
.raster.vier{ grid-template-columns:repeat(4,1fr); }
.karte{ background:#fff; border:1px solid var(--linie); border-radius:16px; padding:26px 28px; }
.band .karte{ background:#fff; }
.karte .zahl{ font-family:var(--serif); font-size:1.5rem; color:var(--gold); line-height:1; margin-bottom:12px; }
.karte p{ margin-bottom:0; font-size:1.06rem; }
.karte p + p{ margin-top:10px; }

/* ---------- Hervorhebungen ---------- */
.kasten{ background:var(--papier-warm); border:1px solid var(--linie); border-radius:16px;
  padding:28px 32px; margin:32px 0; max-width:var(--lese); }
.kasten.gut{ background:var(--gruen-zart); border-color:#d5e2d8; border-left:3px solid var(--gruen);
  border-radius:0 16px 16px 0; }
.kasten.gut h3, .kasten.gut h4{ color:var(--gruen); }
.kasten.acht{ background:var(--braun-zart); border-color:#e6d5c8; border-left:3px solid var(--braun);
  border-radius:0 16px 16px 0; }
.kasten.acht h3, .kasten.acht h4{ color:var(--braun); }
.kasten p{ font-size:1.08rem; }
.zitat{ font-family:var(--serif); font-size:1.5rem; line-height:1.4; color:var(--tinte-tief);
  border-left:3px solid var(--gold); padding-left:26px; margin:38px 0; max-width:var(--lese); }

/* ---------- Listen ---------- */
ul.strich{ list-style:none; max-width:var(--lese); }
ul.strich li{ position:relative; padding-left:22px; margin-bottom:14px; }
ul.strich li::before{ content:"—"; position:absolute; left:0; color:var(--gold); }
ol.nummern{ list-style:none; counter-reset:n; max-width:var(--lese); }
ol.nummern li{ counter-increment:n; position:relative; padding-left:44px; margin-bottom:22px; }
ol.nummern li::before{ content:counter(n); position:absolute; left:0; top:1px;
  width:30px; height:30px; border-radius:50%; background:var(--papier-warm);
  border:1px solid var(--linie); color:var(--gold); font-weight:700; font-size:.94rem;
  display:flex; align-items:center; justify-content:center; }

/* ---------- Tabellen ---------- */
.tabelle{ width:100%; border-collapse:collapse; margin:28px 0; font-size:1.02rem; }
.tabelle th{ text-align:left; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); font-weight:700; padding:0 14px 9px 0; border-bottom:1px solid var(--linie);
  vertical-align:bottom; }
.tabelle td{ padding:14px 16px 14px 0; border-bottom:1px solid var(--linie-zart); vertical-align:top; }
.tabelle td:first-child{ font-weight:700; color:var(--tinte-tief); }
.tabelle .mitte{ text-align:center; }
.rolle{ display:inline-block; font-size:.76rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.rolle.stark{ background:#e7efe8; color:#3f6349; }
.rolle.mittel{ background:#f3eddb; color:#755b1b; }  /* war #8a6d22: 4,18 : 1, unter der Grenze 4,5 (5.10.2026) */
.rolle.offen{ background:#eceff1; color:#5e6c72; }
.rolle.schwach{ background:#f5e6da; color:#8b5730; }
.tabellen-rahmen{ overflow-x:auto; }

/* ---------- Preise ---------- */
.tarife{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:34px 0; }
.tarif{ background:#fff; border:1px solid var(--linie); border-radius:18px; padding:30px 28px;
  display:flex; flex-direction:column; }
.tarif.betont{ border-color:var(--gold); box-shadow:0 2px 22px rgba(154,118,40,.10); }
.tarif .name{ font-family:var(--serif); font-size:1.28rem; color:var(--tinte-tief); }
.tarif .jahr{ font-family:var(--serif); font-size:2.3rem; color:var(--gold); margin:12px 0 2px; }
.tarif .monat{ font-size:.92rem; color:var(--grau); margin-bottom:16px; }
.tarif ul{ list-style:none; margin-top:auto; }
.tarif li{ font-size:1.02rem; padding:9px 0; border-top:1px solid var(--linie-zart); }
.tarif li:first-child{ border-top:0; }

/* ---------- Der Kreis ---------- */
.kreis-raster{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin:34px 0; }
/* Der Kreis auf der Startseite hat DREI Stationen. Das stand bis zum 21.8.2026 als
   style="…" im HTML — und ein Inline-style ueberstimmt jede Medienabfrage: Auf einem
   320 Pixel breiten Telefon blieben es drei Spalten zu 130px, der Inhalt ragte 140px
   ueber den Rand hinaus (WCAG 1.4.10). Als Klasse greifen die Abfragen unten wieder. */
.kreis-raster.drei{ grid-template-columns:repeat(3,1fr); }
.station{ background:#fff; border:1px solid var(--linie); border-radius:16px; padding:24px; }
.station .nr{ font-family:var(--serif); color:var(--gold); font-size:.9rem; letter-spacing:.1em; }
.station h3{ font-size:1.12rem; margin:6px 0 4px; }
.station .rolle-text{ font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--grau); margin-bottom:10px; }
.station p{ font-size:1.04rem; margin:0; }

/* ---------- Die Zeichnung der Schichten ----------
   Sie stammt unverändert aus der App und ist dort dunkel — anders geht es nicht, das Bild
   lebt vom Licht im Trichter. Damit sie auf der hellen Seite kein Fremdkörper ist, steht
   sie als GERAHMTES BILD da und nicht in einem schwarzen Band über die ganze Breite: Ein
   dunkles Bild ist normal, ein dunkler Abschnitt ist ein Bruch. */
.konus-rahmen{ max-width:440px; margin:0 auto; }
.konus-rahmen svg{ width:100%; height:auto; border-radius:16px;
  border:1px solid var(--linie); box-shadow:0 3px 20px rgba(20,32,42,.10); }
.konus-zeile{ display:grid; grid-template-columns:1fr 440px; gap:52px; align-items:center; }
@media (max-width:900px){ .konus-zeile{ grid-template-columns:1fr; } }

/* ---------- Bildschirmfotos der App ----------
   Fünf echte Aufnahmen aus der App (tour/), nicht gestellte Montagen. Auf dem Telefon
   scrollt die Reihe seitwärts, statt fünf Bilder auf Briefmarkengröße zu schrumpfen —
   ein unlesbares Bildschirmfoto ist schlimmer als keins. */
.schirme{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin:32px 0 0; }
.schirm figure{ margin:0; }
.schirm img{ width:100%; border-radius:14px; border:1px solid var(--linie);
  box-shadow:0 3px 18px rgba(20,32,42,.12); background:var(--tief); }
.schirm figcaption{ margin-top:12px; font-size:.94rem; color:var(--grau); }
.schirm figcaption b{ display:block; font-family:var(--serif); font-size:1.06rem;
  color:var(--tinte-tief); font-weight:600; margin-bottom:2px; }
@media (max-width:860px){
  .schirme{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:10px; margin-right:-24px; }
  .schirm{ flex:0 0 62%; scroll-snap-align:start; }
  .schirm:last-child{ padding-right:24px; }
}

/* ---------- Fragen ----------
   Die vier Gruppen sind h2 — „Kurz gefragt" ist die Seitenüberschrift, also h1, und
   darunter folgt die nächste Ebene ohne Sprung. Sie sind aber KLEINER gesetzt als ein
   normales h2: Sie sortieren, sie kündigen nichts an. Die ids bleiben, damit alte Verweise
   weiter treffen (`#daten`, `#einstieg`, `#ki`, `#geld`).
   KEINE Linie über der Gruppe: Die letzte Frage darüber bringt ihre eigene Unterkante mit,
   und zwei Striche mit 50px Luft dazwischen sehen aus wie ein Fehler im Abstand. Es trennt
   der Abstand, nicht der Strich. */
h2.gruppe{ margin:54px 0 4px; max-width:var(--lese); font-size:1.16rem; color:var(--tinte-tief); }
h2.gruppe:first-of-type{ margin-top:30px; }
details.frage{ border-bottom:1px solid var(--linie-zart); padding:4px 0; max-width:var(--lese); }
details.frage summary{ cursor:pointer; padding:18px 30px 18px 0; font-weight:600;
  color:var(--tinte-tief); position:relative; list-style:none; }
details.frage summary::-webkit-details-marker{ display:none; }
details.frage summary::after{ content:"+"; position:absolute; right:4px; top:16px;
  color:var(--gold); font-size:1.3rem; font-weight:400; }
details.frage[open] summary::after{ content:"–"; }
details.frage .antwort{ padding:0 0 22px; }
details.frage .antwort p{ font-size:1.06rem; }
/* Die erste Antwort trägt die Aufzählung, was in ein Gespräch geht — sie war vorher ein
   eigener Abschnitt. In einer Antwort braucht die Liste etwas Luft und dieselbe Schriftgröße
   wie der Text darüber, sonst liest sie sich wie ein Anhang. */
details.frage .antwort ul.strich{ margin:14px 0 4px; }
details.frage .antwort ul.strich li{ font-size:1.06rem; }

/* ---------- Fußzeile ---------- */
.fuss{ background:var(--tief); color:#9fb3bd; margin-top:0; padding:64px 0 0; }
.fuss-innen{ max-width:var(--breit); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.4fr; gap:36px; }
.fuss-marke{ font-family:var(--serif); font-weight:700; font-size:1.02rem;
  color:#caa85e; letter-spacing:.02em; }
.fuss-satz{ font-family:var(--serif); font-style:italic; color:#cfd9e0; margin:10px 0 12px; }
.fuss-titel{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:#caa85e; font-weight:700; margin-bottom:12px; }
.fuss-spalte a{ display:block; color:#9fb3bd; text-decoration:none; font-size:.95rem;
  padding:4px 0; }
.fuss-spalte a:hover{ color:#e8eef2; }
.fuss-klein{ font-size:.86rem; line-height:1.55; color:#8fa4ae; }
.fuss-klein a{ display:inline; color:#9ec6d8; }
.fuss-zeile{ max-width:var(--breit); margin:40px auto 0; padding:18px 24px 26px;
  border-top:1px solid rgba(255,255,255,.09); font-size:.84rem; color:#7d919b; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:900px){
  .raster.vier{ grid-template-columns:repeat(2,1fr); }
  .raster.drei{ grid-template-columns:1fr; }
  .tarife{ grid-template-columns:1fr; }
  .kreis-raster, .kreis-raster.drei{ grid-template-columns:repeat(2,1fr); }
  .fuss-innen{ grid-template-columns:1fr 1fr; }
}

/* ---------- Das Menü klappt zusammen ----------
   Nicht erst bei 680px, sondern hier. „Support" war der siebte Punkt und die Zeile lief
   seitwärts über den Rand hinaus — ein waagerechter Rollbalken auf einem Tablet. Seit
   Sicherheit und Fragen eine Seite sind, sind es wieder sechs.
   DIE GRENZE IST GEMESSEN, NICHT GERATEN: bei 830px ragten die Punkte 24px über den Rand,
   bei 850px noch 4px, ab 860px passen sie. 880px lässt Luft für ein längeres Wort. Wer
   einen Menüpunkt ergänzt, misst neu — oder nimmt einen anderen heraus, so wie hier.
   NEU GEMESSEN AM 21.10.2026 (Spanisch, zweiter Sprachlink), Fensterbreite mit Scrollbalken,
   Chromium: Mit „Methode" (5.10.) passte die Zeile erst ab 993px (de) bzw. 997px (en) — zwischen
   881 und 992px brach das Menü also schon zweizeilig um, ohne dass es jemand gemessen hatte. Mit
   „· ES" sind es 1031px (de), 1036px (en) und 1051px (es, „Deutsch · English"). 1060px lässt
   wieder Luft für ein längeres Wort. */
@media (max-width:1060px){
  .menue-knopf{ display:block; }
  .menue{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--papier);
    border-bottom:1px solid var(--linie); flex-direction:column; gap:0; padding:8px 24px 16px;
    box-shadow:0 12px 24px rgba(20,32,42,.10); z-index:50; }
  .menue.offen{ display:flex; }
  .menue a{ padding:11px 0; border-bottom:1px solid var(--linie-zart); }
  .menue a.sprache{ border-left:0; padding-left:0; margin-left:0; }
  .menue a.sprache + a.sprache{ margin-left:0; }
  .menue a.sprache + a.sprache::before{ content:none; }
  .kopf-innen{ position:relative; }
}
@media (max-width:680px){
  body{ font-size:1.0625rem; }   /* wie oben: rem statt px */
  h1{ font-size:2.05rem; } .hero h1{ font-size:2.2rem; }
  h2{ font-size:1.5rem; }
  section{ padding:52px 0; }
  .hero{ padding:56px 0 44px; }
  .raster.zwei,.raster.vier,.kreis-raster,.kreis-raster.drei{ grid-template-columns:1fr; }
  .fuss-innen{ grid-template-columns:1fr; gap:28px; }
}

/* ---------- Druck ---------- */
@media print{
  .kopf,.fuss,.knoepfe{ display:none; }
  body{ font-size:11pt; }
  section{ padding:14px 0; }
}