/* ============================================================
   ZEORI · Feinschliff nach der Layout-Pruefung (27.09.2026)

   Geprueft wurden alle Routen bei 1440, 1280, 1100, 1024, 900, 820,
   768, 600, 414, 390, 360 und 320 px. Jede Regel hier behebt einen
   Befund aus dieser Pruefung. Schriftgroessen nur aus der Leiter.
   ============================================================ */

/* 1 · Die grossen Aussagen trugen einen Einzug fuer eine Randlinie,
       die es nicht mehr gibt. Sie beginnen jetzt buendig mit dem Text. */
.aussage{padding-left:0}

/* 2 · Die neuen Bausteine in die Abstandsskala der Seite:
       48 px zwischen Text und Block, 22 px zwischen Block und Text. */
.foto,.platzhalter,.faelle,.andocken,.wege-bild{margin-top:0}
.band :is(h2,.aussage,.lead,.txt,.merk,.quelle,.eb,.gitter,.paare,.folge,.fpaare,.wkz,.treppe,.kette,.wege,.drei,.zwei,.akk,.diagramm,.fig,.crew,.form,.appbild,.gg,.foto,.platzhalter,.faelle,.andocken,.wege-bild) + :is(.foto,.platzhalter,.faelle,.andocken,.wege-bild){margin-top:var(--z5)}
.band :is(.foto,.platzhalter,.faelle,.andocken,.wege-bild) + :is(.gitter,.paare,.folge,.fpaare,.wkz,.treppe,.kette,.wege,.drei,.zwei,.akk,.diagramm,.fig,.crew,.form,.appbild,.gg){margin-top:var(--z5)}
.band :is(.foto,.platzhalter,.faelle,.andocken,.wege-bild) + :is(.lead,.txt,.merk,.quelle){margin-top:var(--z3)}
.band :is(.foto,.platzhalter,.faelle,.andocken,.wege-bild) + .eb{margin-top:var(--z5)}
.hero .tat + .foto{margin-top:var(--z5)}

/* 3 · Fuss: Die Spaltentitel sind h3, gestaltet war nur h4.
       Sie standen dunkel auf dunkel und waren unsichtbar. */
.fuss h3{font-family:var(--m);font-weight:600;font-size:14px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--a-teal);margin-bottom:1.1rem;line-height:1.4}

/* 4 · Textlinks mit Pfeil: Der Pfeil bleibt beim letzten Wort, auch
       wenn der Text umbricht. */
.tl{display:inline-block;position:relative}
.tl::after{display:inline-block;margin-left:.55rem;transition:transform .16s}
.tl:hover::after{transform:translateX(.35rem)}

/* 5 · Lange Woerter brechen im Notfall um, statt aus dem Kasten zu laufen.
       Die Trennstellen fuer die bekannten Faelle stehen als ­ im Text. */
h1,h2,h3,.aussage,.reg .nm,.faelle-liste button{overflow-wrap:break-word}
/* Der Titel der Datenschutzerklaerung ist ein einziges langes Wort: auf breiten
   Schirmen darf er die 16-Zeichen-Grenze der Titel ueberschreiten. */
#page-datenschutzerklaerung .hero h1{max-width:none}

/* 6 · Stichwortlisten in einer schmalen Spalte: Stichwort ueber dem Text,
       sonst blieben dem Text bei 1024 px nur 82 px. */
.gg .fpaare > div{grid-template-columns:minmax(0,1fr);gap:.3rem}

/* 7 · Kontaktformular: Das Textfeld schrieb in der Schreibmaschinenschrift
       des Browsers. */
.form textarea{font-family:inherit}

/* 8 · Laufende Pflege: Leicht und Stark als erkennbare Stufen */
.lb-stufen{display:grid;gap:1rem;margin-top:1.2rem}
.lb-stufen p{margin-top:.25rem}
.lb-stufe-t{display:block;font-weight:600;color:var(--auf-d)}
@media(min-width:600px){.lb-stufen{grid-template-columns:1fr 1fr}}

/* 9 · Telefon: Tippflaechen mindestens 44 px hoch */
@media(max-width:820px){
  .marke{min-height:44px}
  .fuss li{margin-bottom:0}
  .fuss li a{display:inline-block;padding-block:.65rem}
  .fuss .adr a{display:inline-block;padding-block:.6rem}
  .tl::before{content:'';position:absolute;left:0;right:0;top:-10px;bottom:-10px}
  .wege p > a{display:inline-block;padding-block:.6rem}
}

/* 10 · Telefon: Das Foto im Kopf wird hoeher zugeschnitten, im 21:9-Format
        waere es auf 390 px nur 150 px hoch. */
@media(max-width:600px){.hero .foto img{aspect-ratio:4/3;object-fit:cover}}

/* 11 · Spalten mit Trennlinie ("Ihres bleibt Ihres", Kette im Datenschutz):
        Der Text der zweiten und folgenden Spalte stand direkt an der Linie.
        Jetzt liegt links der Linie derselbe Abstand wie rechts davon. */
@media(min-width:760px){
  .drei > div + div{padding-left:1.8rem}
  .kette > div + div{padding-left:1.4rem}
}

/* 12 · Kacheln auf Gold und Weiss: Der Hover ersetzte den weissen Grund
        durch einen fast durchsichtigen, die Kachel wurde orange oder grau.
        Die Kachel bleibt weiss und hebt sich leicht an. */
@media(hover:hover){
  .f-gold .zelle:hover{background-color:#FFFFFF}
  .f-papier .zelle:hover,.f-papier2 .zelle:hover{background-color:rgba(255,255,255,.9)}
  .f-gold .zelle:hover,.f-papier .zelle:hover,.f-papier2 .zelle:hover{
    transform:translate3d(0,-3px,0);box-shadow:0 20px 40px -26px rgba(34,51,55,.5)}
}

/* 13 · Volle Knoepfe: Der Hover in Pastellgruen trug weisse Schrift,
        das ergab 1.5:1 und war kaum lesbar. Die Schrift wird dunkel, und der
        Schatten ist neutral statt orange unter dem gruenen Knopf. */
.kn-voll:hover,.kn-voll:focus-visible,
.f-gold .kn-voll:hover,.f-gold .kn-voll:focus-visible,
.hero--hell .kn-voll:hover,.hero--hell .kn-voll:focus-visible,
.hero--gold .kn-voll:hover,.hero--gold .kn-voll:focus-visible{color:var(--nacht)}
@media(hover:hover){
  .kn-voll:hover,.f-gold .kn-voll:hover,.hero--hell .kn-voll:hover,.hero--gold .kn-voll:hover{
    box-shadow:0 14px 28px -14px rgba(34,51,55,.55)}
}

/* 14 · Aufzaehlung mit Quadrat ("Ihr interner Experte"): Der Satz danach
        klebte an der letzten Zeile. Vor und nach der Liste jetzt 22 px,
        dazu kommt das Innenpolster der Zeilen. */
.band :is(.lead,.txt) + .punkte{margin-top:var(--z3)}
.band .punkte + :is(.lead,.txt,.merk,.quelle){margin-top:var(--z3)}

/* 15 · App-Bilder in dieselbe Skala wie Fotos und Bausteine: 48 px davor,
        48 px zum naechsten Baustein, 22 px zum Text. Als letztes Element
        eines Bands kein Aussenabstand mehr, der das Band unten verlaengert. */
.band .appbild{margin-top:var(--z5);margin-bottom:0}
.band .appbild:first-child{margin-top:0}
.band .appbild + :is(.lead,.txt,.merk,.quelle){margin-top:var(--z3)}
.band .appbild + :is(.gitter,.paare,.folge,.fpaare,.wkz,.treppe,.kette,.wege,.drei,.zwei,.akk,.diagramm,.fig,.crew,.form,.gg,.appbild,.foto,.platzhalter,.faelle,.andocken,.wege-bild){margin-top:var(--z5)}

/* 16 · Rechtstexte: Der letzte Absatz trug seinen Abstand nach unten
        ins Band, Impressum und Datenschutzerklaerung endeten 16 px tiefer. */
.rechtstext > :last-child{margin-bottom:0}

/* 17 · Etiketten ueber einem Baustein ("Der Owner in Kuerze", "Weitere
        Vorteile"): Sie standen 48 px ueber ihrem Inhalt, gleich weit wie
        vom Text darueber, und schwebten dazwischen. Jetzt 15 px wie ueber
        einem Titel, sie gehoeren sichtbar zu dem, was folgt. */
.band .eb + :is(.gitter,.paare,.folge,.fpaare,.wkz,.treppe,.kette,.wege,.drei,.zwei,.akk,.diagramm,.fig,.crew,.form,.gg,.appbild,.foto,.platzhalter,.faelle,.andocken,.wege-bild){margin-top:var(--z2)}

/* 18 · Produktbaum (das einzige breite Band): Zwischen Kopfzeile und Titel
        addierten sich Rasterluecke und Aussenabstand zu 120 px. Jetzt 48 px,
        auf schmalen Schirmen derselbe Abstand wie in allen anderen Baendern. */
.band--breit > .in{row-gap:var(--z5)}
.band--breit .reg{margin-bottom:0}
@media(max-width:900px){.band--breit > .in{row-gap:1.8rem}}

/* 19 · Kontakt: Neben der Liste stand das Foto 48 px tiefer, weil die
        Abstandsregel fuer untereinander stehende Bausteine griff. Nebeneinander
        beginnen beide auf derselben Linie. */
@media(min-width:800px){.band .wege-bild > .foto{margin-top:0}}

/* 20 · Woerter, die nicht umbrechen duerfen (E-Mail am Bindestrich) */
.nw{white-space:nowrap}