:root{
    --blau:#005B93;
    --blau-tief:#004473;
    --orange:#ED743B;
    --orange-tief:#D25E27;
    /* Textsichere Ableitungen: das Logo-Orange erreicht als Schrift weder auf Weiß
       noch auf Blau 4,5:1. Auf hellem Grund dunkelt es ab, auf Blau hellt es auf.
       Als Fläche und Marke bleibt der reine Logowert. */
    --orange-text:#B84E14;
    --orange-hell:#FFCB9C;
    --cyan:#0099BD;
    --stein:#9A9692;
    --kalk:#F4F2ED;
    --papier:#FBFAF7;
    --schatten:#141A1F;
    --linie:#DBD7CF;

    --anzeige:"Bahnschrift","DIN Alternate","Franklin Gothic Medium","Arial Narrow",sans-serif;
    --text:Corbel,Candara,"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
    --daten:ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;

    --breit:1240px;
    --mass:68ch;

    /* Bilder einmal hier, damit jedes nur einmal in der Datei steht und
       an mehreren Stellen wiederverwendet werden kann. */
    --bild-hero:url('/wp-content/themes/the7-child/assets/img/1001096a50a5.jpg');
    --bild-e5:url('/wp-content/themes/the7-child/assets/img/a34f2b689c46.jpg');
    --bild-r1:url('/wp-content/themes/the7-child/assets/img/1b8cccb03efb.jpg');
    --bild-r2:url('/wp-content/themes/the7-child/assets/img/26d763ec70d1.jpg');
    --bild-r3:url('/wp-content/themes/the7-child/assets/img/fe9fca07ed08.jpg');
  }

  /* Ursachenbehebung statt Symptombekaempfung: Ohne diese Regel rechnet jedes
     Element mit expliziter Breite (z.B. 100%) seinen Innenabstand oben drauf
     und sprengt seinen Rahmen. overflow-x:hidden unten bleibt nur als zweites
     Netz, nicht als einzige Absicherung. */
  *,*::before,*::after{box-sizing:border-box;}

  /* Ohne diesen Reset behält body den UA-Default-Rand (meist 8px). Bei
     schmalen Viewports (< 1240px, dem Container-Max von .breit) f&#252;llt .breit
     ohne eigene max-width-Bremse die volle body-Breite und w&#252;rde den
     Rand als sichtbaren wei&#223;en Streifen an beiden Seiten &#252;bernehmen &#8212; u.a.
     sichtbar in den Newsletter-Bounding-Boxen auf dem Handy. Einige
     Seitentypen trugen diesen Reset bislang nur lokal in ihrer eigenen
     _stil_*.html-Datei; hier steht er einmal f&#252;r alle Seiten. */
  html,body{margin:0;padding:0;}

  body{
    background:var(--papier);
    color:var(--schatten);
    font-family:var(--text);
    font-size:17.5px;
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* Fuer Beschriftungen, die nur die Vorlesehilfe braucht */
  .visuell-versteckt{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  /* Punkt 10: nur das Zeichen im Kopfbereich. Die Nummer bleibt als
     Vorlesetext und als Titel erhalten, ausgeschrieben steht sie im Menue,
     im Fussbereich und in der Anfragekarte. */
  .kopf .tel.nurzeichen{padding:9px 11px;}
  .kopf .tel.nurzeichen svg{margin:0;}

  /* Der Beratungsknopf lief bei 390 px um 15 px ueber den Rand hinaus */
  .chat{max-width:calc(100vw - 24px);}
  @media (max-width:760px){
    .chat .ct{padding:9px 12px 10px;}
    .chat .ct b{font-size:12.5px;letter-spacing:0;}
  }

  .breit{max-width:var(--breit);margin-inline:auto;padding-inline:28px;}
  .mass{max-width:var(--mass);}

  h1,h2,h3,.anz{
    font-family:var(--anzeige);
    font-variation-settings:"wdth" 87;
    text-transform:uppercase;
    letter-spacing:-0.005em;
    font-weight:700;
    line-height:1.02;
    text-wrap:balance;
  }
  h2{font-size:clamp(30px,4.6vw,58px);}
  h3{font-size:clamp(20px,2.4vw,27px);line-height:1.1;}
  p{max-width:var(--mass);}
  strong{font-weight:700;}

  a{color:inherit;}
  a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:3px;}

  /* ---------- Markierung ---------- */
  .marke{display:block;width:34px;height:82px;flex:none;}
  .marke .aussen{fill:var(--blau);}
  .marke .innen{fill:var(--kalk);}
  .marke.signal .aussen{fill:var(--orange);}
  .marke.hell .aussen{fill:var(--kalk);}
  .marke.hell .innen{fill:var(--blau);}

  /* Die Wegmarkierung ist ein SVG und erzeugt im Markenkopf einen Scroll-
     ueberlauf, den kein Elementmass zeigt: Die Seite wird dadurch rund 27 px
     breiter als das Fenster. overflow:clip schneidet das ab, ohne &#8212; anders als
     hidden &#8212; einen Rollbehaelter zu erzeugen. Im Markenkopf ragt nichts
     absichtlich heraus, das Abschneiden kostet also nichts. */
  .markenkopf{overflow:hidden;overflow:clip;}

  .markenkopf{display:flex;gap:28px;align-items:flex-start;--hm:106px;}
  .markenkopf > div{flex:1;min-width:0;}
  .markenkopf > .marke{width:44px;height:106px;margin-top:4px;}
  /* Wegmarke + reine Ueberschrift als eigener Kopf: die Ueberschrift ist hier
     alleiniges Flex-Kind neben der Marke. Folgt noch erklaerender Fliesstext,
     steht er als eigener Block danach (.markenkopf-fliess), eingerueckt auf
     die Textspalte der Ueberschrift (Marke-Breite + Abstand) &#8212; Marke und
     Ueberschrift bleiben ein eigener Kopf, der Text zieht die Ausrichtung
     nicht auf den gesamten, dann hoeheren Inhalt. Kundenkorrektur
     Restplaetze-Seite, auf alle Kopf+Text-Bloecke mit dem gleichen Aufbau
     uebertragen. Der Abstand zur Ueberschrift kommt bewusst weiterhin vom
     ersten Fliesstext-Element selbst (eigene margin-top, wie vorher), nicht
     von dieser Klasse &#8212; so bleibt es bei einer einzigen Stelle, die den
     Abstand bestimmt, ohne Kollisionen beim CSS-Margin-Collapsing zwischen
     Wrapper und erstem Kind.

     Vertrag Marke/Ueberschrift-Ausrichtung: die Marke richtet sich immer an
     der ERSTEN Zeile der Ueberschrift aus, nie an deren Gesamthoehe &#8212;
     unabhaengig von der Zeilenzahl und unabhaengig davon, ob die Ueberschrift
     direkt als <h2> oder (Bestandstext-Variante) als alleiniges Kind eines
     .bestand-Kastens im Markenkopf steht. Frueher lief das ueber
     align-items:center auf .markenkopf &#8212; das zentriert bei einzeiligen
     Ueberschriften richtig (Referenz, siehe unten), zieht bei mehrzeiligen
     aber die GANZE, dann hoehere Textbox in die Zentrierung hinein und
     verschiebt die Marke mit jeder weiteren Zeile tiefer (Kundenkorrektur).
     Der robuste Ersatz bleibt bei align-items:flex-start (oben) und gibt der
     Ueberschrift stattdessen denselben margin-top, den frueher
     align-items:center fuer sie berechnet haette &#8212; aber gerechnet gegen die
     Hoehe einer einzelnen Zeile (--kopf-fl, Schriftgroesse mal line-height,
     identische Formel wie bei h2 bzw. .bestand h2) statt gegen ihre
     tatsaechliche, moeglicherweise mehrzeilige Gesamthoehe:
       margin-top: (Markenhoehe + fester 4px-Marke-Versatz &#8722; Zeilenhoehe) / 2
     Bei einzeiligen Ueberschriften ist "eine Zeile" bereits die Gesamthoehe &#8212;
     die Formel liefert dort denselben Wert wie zuvor align-items:center, das
     Referenzbild bleibt unveraendert. Die Formel setzt voraus, dass die Marke
     hoeher bleibt als eine einzelne Textzeile (72-106 px Markenhoehe gegen
     rechnerisch maximal ~59 px Zeilenhoehe bei 58px Schriftgroesse) &#8212; dann
     ist die Marke immer das hoehere Element und ihr eigener margin-top:4px
     (optische Korrektur, siehe oben oder unten) muss dafuer nicht angetastet
     werden. --kopf-fl ist zentral hier gesetzt; Seiten mit abweichender
     Schriftgroesse (z.B. .bestand h2 unter 480 px, siehe
     _stil_kategorie.html) setzen die Variable dort lokal neu, an derselben
     Stelle wie die Schriftgroesse selbst. */
  .markenkopf{--kopf-fl:calc(clamp(30px,4.6vw,58px) * 1.02);}
  /* Kundenreferenzbild (Startseite, seither auf alle Entwuerfe uebertragen)
     verlangt eine optisch hoeher stehende Marke relativ zur ersten h2-Zeile,
     als es die reine Zentrierungsformel oben ergibt. Playwright-bestaetigter
     Zielversatz: +26px Desktop / +18px unter 560px, additiv auf die
     bestehende Formel &#8212; als eigene Variable, damit die Formel selbst
     unangetastet bleibt. */
  .markenkopf{--marke-erstzeile-optik:26px;}
  /* 1lh statt --kopf-fl: --kopf-fl ist auf die Standard-h2-Schriftgroesse
     (30-58px) geeicht, kleinere Ueberschriften (z.B. entwurf-restplaetze.html)
     haetten damit eine falsche Zeilenhoehe in der Formel. 1lh liefert immer
     die tatsaechlich gerenderte Zeilenhoehe der jeweiligen h2. */
  .markenkopf > h2{
    flex:1;min-width:0;margin:0;
    margin-top:calc((var(--hm) + 4px - 1lh) / 2 + var(--marke-erstzeile-optik));
  }
  /* .bestand steckt hier immer alleinstehend (nur die Ueberschrift, kein
     Fliesstext, der lebt getrennt in .bestand-fluss bzw. .markenkopf-fliess)
     im Markenkopf, z.B. damit die Ueberschrift ihre Bestandstext-
     Anzeigeschrift bekommt (baue_kategorien.py). Sie bekommt denselben
     margin-top wie ein nacktes h2 &#8212; direkt auf den .bestand-Kasten, nicht auf
     die h2 darin, damit deren eigene margin-top:0 (siehe .bestand h2 in
     _stil_kategorie.html) unberuehrt bleibt. */
  .markenkopf > .bestand{margin-top:calc((var(--hm) + 4px - var(--kopf-fl)) / 2 + var(--marke-erstzeile-optik));}
  /* .bestand h2 traegt ausserhalb des Markenkopfs regulaer margin-bottom:24px
     (Abstand zum folgenden Fliesstext). Steckt sie hier als alleiniges
     .bestand-Kind neben der Marke, zaehlt dieser Rand mit in die Hoehe des
     .bestand-Kastens hinein und verschiebt die Ueberschrift zu tief.
     Direkter Kindselektor, damit regulaerer .bestand-Fliesstext (eigener
     Block, kein Markenkopf-Kind) seinen Abstand unveraendert behaelt. */
  .markenkopf > .bestand > h2{margin-bottom:0;}
  /* Sonderfall entwurf-information.html: dort steht neben der Marke keine
     Ueberschrift, sondern direkt Fliesstext (.fliess, ein <p> darin). Der
     Vertrag gilt trotzdem &#8212; Marke an der ersten Zeile ausrichten, nicht an
     der Gesamthoehe des (hier einzeiligen, aber prinzipiell beliebig langen)
     Textblocks. Gleiche Formel wie bei h2, 1lh liefert hier die vom Body
     geerbte Fliesstext-Zeilenhoehe. */
  .markenkopf > .fliess{
    margin-top:calc((var(--hm) + 4px - 1lh) / 2 + var(--marke-erstzeile-optik));
  }
  /* Das eigene margin-top:17.5px (UA-Default) des ersten Kindes darin
     collapsed sonst mit dem obigen margin-top und schiebt den sichtbaren
     Text zusaetzlich nach unten (Playwright-Messung: -41.33px statt
     -23.42px Zielversatz). Direkter Kindselektor statt globalem .fliess p,
     damit ausschliesslich dieser Markenkopf-Sonderfall betroffen ist. */
  .markenkopf > .fliess > :first-child{margin-top:0;}
  .markenkopf-fliess{margin-left:72px;}
  @media(max-width:560px){
    .markenkopf{gap:18px;--hm:72px;--marke-erstzeile-optik:18px;}
    .markenkopf > .marke{width:30px;height:72px;}
    .markenkopf-fliess{margin-left:48px;}
  }

  /* ---------- Kopfzeile ---------- */
  .kopf{
    position:absolute;top:0;left:0;right:0;z-index:5;
    padding-block:20px;
    background:linear-gradient(to bottom,rgba(10,20,28,.62),rgba(10,20,28,0));
  }
  /* nowrap ist Absicht: mit Umbruch rutscht die Navigation in eine zweite Zeile und
     steht dann unter dem Logo statt daneben. Unterhalb von 1120px &#252;bernimmt der
     Men&#252;-Knopf, bevor es eng wird. */
  .kopf-innen{display:flex;align-items:center;gap:26px;flex-wrap:nowrap;}
  .kopf .logoplatte{flex:none;}
  .kopf .breit{max-width:1400px;}
  /* Das Logo enth&#228;lt Blau und Grau und w&#228;re auf dunklem Grund kaum lesbar. Es steht
     deshalb immer auf einer hellen Platte &#8212; sauber rechteckig, w&#228;hrend alles andere
     gemalte Kanten hat. Das Logo ist das eine gefertigte Element auf der Seite. */
  .logoplatte{background:var(--kalk);padding:8px 13px;display:inline-flex;flex:none;text-decoration:none;}
  .kopf .logoplatte img{height:44px;width:auto;display:block;}
  .kopf nav{display:flex;gap:20px;flex-wrap:nowrap;margin-left:auto;align-items:center;min-width:0;}
  /* :not(.tel) ist Absicht &#8212; sonst &#252;berschreibt border-bottom hier die Unterkante
     des Telefonrahmens, weil diese Regel die h&#246;here Spezifit&#228;t hat. */
  .kopf nav a:not(.tel){
    font-family:var(--anzeige);font-variation-settings:"wdth" 87;
    text-transform:uppercase;font-size:14px;letter-spacing:.015em;font-weight:600;
    color:#fff;text-decoration:none;padding-bottom:5px;border-bottom:3px solid transparent;
    white-space:nowrap;
  }
  .kopf nav a:not(.tel):hover,.kopf nav a.aktiv{border-bottom-color:var(--orange);}
  .tel{
    display:inline-flex;align-items:center;gap:9px;color:#fff;text-decoration:none;
    font-family:var(--daten);font-size:14px;
    border:2px solid rgba(255,255,255,.55);padding:7px 13px;
  }
  .tel:hover{border-color:var(--orange);background:var(--orange);color:var(--schatten);}
  /* Die Men&#252;punkte tragen unten 5px Innenabstand plus 3px Unterkante; ihr Text sitzt
     dadurch 4px &#252;ber der Mittellinie. Der Rahmen ist symmetrisch und s&#228;&#223;e sonst tiefer.
     Der Au&#223;enabstand unten hebt ihn auf dieselbe H&#246;he. */
  .tel,.burger{margin-bottom:8px;}
  .tel svg{width:15px;height:15px;fill:currentColor;}

  /* Nur am Handy. Auf dem Desktop &#246;ffnen die Men&#252;punkte selbst das Overlay &#8212;
     ein Men&#252;, kein zweites daneben. */
  .burger{
    display:none;align-items:center;gap:9px;background:transparent;cursor:pointer;
    border:2px solid var(--orange);border-bottom-width:3px;color:#fff;padding:8px 14px;
    font-family:var(--anzeige);font-variation-settings:"wdth" 87;
    text-transform:uppercase;font-size:14px;font-weight:700;letter-spacing:.03em;
  }
  .kopf nav a.burger{border-bottom-color:var(--orange);}
  .burger:hover{background:var(--orange);color:var(--schatten);}
  .burger span{display:block;width:17px;height:2px;background:currentColor;box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor;}
  @media(max-width:1120px){
    /* :not(.burger) ist die Ursachenbehebung: .burger ist selbst ein
       nav-Link ohne .tel und fiel sonst der eigenen Regel zum Opfer &#8212;
       das Men&#252; liess sich am Handy nicht mehr oeffnen. */
    .kopf nav a:not(.tel):not(.burger){display:none;}
    .burger{display:inline-flex;}
    .kopf .logoplatte img{height:38px;}
  }
  @media(max-width:640px){
    .tel span.nr{display:none;}
    .tel{padding:9px 11px;}
  }
  @media(max-width:560px){
    .buehne{min-height:auto;}
    .buehne-bild{position:relative;height:56vh;min-height:320px;}
    .buehne-innen{margin-top:-46px;}
    .feld{padding:28px 24px 30px;}
    .luft{padding-block:60px;}
    .luft-eng{padding-block:44px;}
    .e5-text{padding:44px 26px;}
    .route:first-child{min-height:300px;}
    .buehne-marke{right:22px;bottom:auto;top:-64px;width:34px;height:82px;}
  }

  /* ---------- B&#252;hne ---------- */
  .buehne{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;}
  .buehne-bild{position:absolute;inset:0;background-size:cover;background-position:50% 46%;}
  .buehne-innen{position:relative;z-index:2;width:100%;padding-bottom:0;}

  .feld{
    background:var(--blau);
    color:#fff;
    padding:38px 44px 42px;
    max-width:660px;
    clip-path:polygon(0 1.2%,99.4% 0,100% 98.6%,.5% 100%);
  }
  .feld h1{
    font-size:clamp(38px,6.4vw,84px);
    letter-spacing:-0.022em;
    margin-bottom:16px;
    color:#fff;
  }
  .feld .unter{
    font-size:clamp(17px,2vw,21px);line-height:1.4;
    color:#DCEAF3;max-width:34ch;margin-bottom:28px;
  }
  /* Signalorange mit dunkler Schrift &#8212; wie auf einem Wegweiser. Wei&#223; auf diesem
     Orange erreicht nur 2,9:1, Schwarzblau erreicht 6,0:1. */
  .knopf{
    display:inline-flex;align-items:center;gap:12px;
    background:var(--orange);color:var(--schatten);text-decoration:none;
    font-family:var(--anzeige);font-variation-settings:"wdth" 87;
    text-transform:uppercase;font-weight:700;font-size:17px;letter-spacing:.01em;
    padding:15px 26px;border:0;cursor:pointer;
    clip-path:polygon(0 2%,99% 0,100% 97%,1% 100%);
  }
  .knopf:hover{background:#FF8F53;}
  .knopf.hell{background:var(--kalk);color:var(--blau);}
  .knopf.hell:hover{background:#fff;}
  .knopf .pf{font-family:var(--daten);font-size:15px;}

  .buehne-marke{
    position:absolute;right:7%;bottom:-30px;z-index:3;
    width:46px;height:112px;
  }

  /* ============================================================
     Isolierte mobile Buehne, uebernommen von der abgenommenen
     Alpenueberquerung-Testvariante &#8212; gescoped auf html.mobil-buehne
     (von jedem betroffenen Bauskript gesetzt), damit sie nur die
     elf freigegebenen Entwurfsseiten trifft. Ab 768px unveraendert. */
  @media (max-width:767px) and (orientation:portrait){
    html.mobil-buehne .buehne{min-height:auto;}
    html.mobil-buehne .buehne-bild{
      position:relative;height:max(50svh,340px);min-height:340px;
    }
    html.mobil-buehne .buehne-innen{margin-top:-28px;padding-inline:16px;}
    /* .buehne-innen umschliesst zusaetzlich ein eigenes .breit (28px
       Seitenabstand) &#8212; ohne diese Korrektur addieren sich beide Abstaende
       zu ueber 40px statt der vorgesehenen 16px. */
    html.mobil-buehne .buehne-innen > .breit{padding-inline:0;}
    html.mobil-buehne .feld{padding:22px 20px;max-width:none;}
  }
  @media (orientation:landscape) and (max-height:520px){
    html.mobil-buehne .buehne{
      display:flex;align-items:stretch;min-height:auto;
    }
    html.mobil-buehne .buehne-bild{
      position:static;flex:0 0 45%;width:45%;
      background-size:cover;background-position:50% 50%;
    }
    html.mobil-buehne .buehne-innen{
      flex:1 1 55%;width:55%;max-width:none;
      display:flex;align-items:flex-start;padding-inline:16px;
      /* Die absolut positionierte .kopf-Navigation (volle Breite, ~90px
         hoch mit ausgeblendeten Menuepunkten unter 1120px) liegt ueber
         der ganzen Buehne. 96px Abstand haelt die erste H1-Zeile frei. */
      padding-block:96px 16px;
    }
    html.mobil-buehne .buehne-innen > .breit{padding-inline:0;width:100%;}
    html.mobil-buehne .feld{
      clip-path:none;max-width:none;padding:18px 16px;
    }
  }
  /* Der fixe Assistentenbalken darf die Buehne mobil nicht ueberdecken:
     hier statt fixiert an seiner Stelle im Textfluss, also erst nach
     dem gesamten Buehneninhalt sichtbar. Zwei Bedingungen, weil das
     Querformat bei geringer Hoehe breiter als 767px sein kann. */
  @media (max-width:767px){
    html.mobil-buehne .chat{
      position:static;display:flex;margin:24px auto 0;
      max-width:calc(100% - 32px);box-shadow:none;
    }
  }
  @media (orientation:landscape) and (max-height:520px){
    html.mobil-buehne .chat{
      position:static;display:flex;margin:24px auto 0;
      max-width:calc(100% - 32px);box-shadow:none;
    }
  }

  /* ---------- Abschnitte ---------- */
  section{position:relative;}
  .luft{padding-block:96px;}
  .luft-eng{padding-block:64px;}
  .blaufeld{background:var(--blau);color:#fff;}
  .blaufeld h2,.blaufeld h3{color:#fff;}
  .blaufeld p{color:#D5E6F1;}
  .steinfeld{background:var(--kalk);}

  /* Nur einmal auf der Seite verwendet: die Markierung ist die Abschnittsgrammatik,
     ein zweites Auszeichnungsmittel &#252;ber jedem Abschnitt w&#228;re eines zu viel. */
  .augen{
    font-family:var(--daten);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--orange-hell);margin-bottom:14px;display:block;
  }

  /* ---------- E5 Aufmacher ---------- */
  .e5{display:grid;gap:0;}
  @media(min-width:960px){.e5{grid-template-columns:1.05fr .95fr;}}
  .e5-bild{min-height:440px;background-size:cover;background-position:52% 50%;}
  .e5-text{background:var(--blau);color:#fff;padding:60px 52px;display:flex;flex-direction:column;justify-content:center;gap:20px;}
  .e5-text h2{font-size:clamp(32px,4vw,54px);}
  /* H&#246;here Spezifit&#228;t als `.e5-text h2` &#8212; sonst gewinnt die Regel dar&#252;ber. */
  .e5-text h2.e5-gross{
    font-size:clamp(52px,7.6vw,104px);line-height:.9;color:var(--orange-hell);
    letter-spacing:-0.028em;margin:0;
  }
  .e5-unter{
    font-family:var(--anzeige);font-variation-settings:"wdth" 87;
    text-transform:uppercase;font-weight:700;line-height:1.05;
    font-size:clamp(22px,2.7vw,34px);color:#fff;margin:0;
  }
  .e5-zahl{
    font-family:var(--anzeige);font-variation-settings:"wdth" 87;
    font-size:clamp(72px,11vw,140px);line-height:.82;color:var(--orange-hell);
    letter-spacing:-0.04em;
  }
  .e5-liste{list-style:none;display:flex;flex-wrap:wrap;gap:7px 10px;font-family:var(--daten);font-size:12.5px;}
  .e5-liste li{border:1px solid rgba(255,255,255,.4);padding:5px 10px;color:#CFE3F0;}

  /* ---------- Routen ---------- */
  .routen{display:grid;gap:20px;}
  @media(min-width:820px){
    .routen{grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto;}
    .route:first-child{grid-row:span 2;}
  }
  .route{position:relative;display:block;text-decoration:none;color:#fff;overflow:hidden;min-height:240px;}
  .route:first-child{min-height:500px;}
  .route .rb{position:absolute;inset:0;background-size:cover;background-position:50% 50%;transition:transform .7s cubic-bezier(.16,1,.3,1);}
  .route:hover .rb{transform:scale(1.045);}
  .route .rv{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,26,40,.88) 0%,rgba(6,26,40,.35) 42%,rgba(6,26,40,.05) 75%);}
  .route .ri{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:26px 28px;gap:8px;}
  .route h3{font-size:clamp(21px,2.6vw,32px);}
  .route .rd{font-family:var(--daten);font-size:12.5px;color:#CFE3F0;display:flex;gap:16px;flex-wrap:wrap;}
  .route .rp{color:var(--orange);font-weight:700;}
  .schild{
    position:absolute;top:0;left:0;z-index:3;
    background:var(--orange);color:#fff;
    font-family:var(--anzeige);font-variation-settings:"wdth" 87;text-transform:uppercase;
    font-size:12.5px;font-weight:700;letter-spacing:.04em;padding:6px 12px;
    clip-path:polygon(0 0,100% 0,100% 88%,0 100%);
  }

  /* ---------- Restpl&#228;tze ---------- */
  .rest{display:flex;flex-direction:column;gap:0;border-top:2px solid rgba(255,255,255,.28);}
  .rz{
    display:grid;gap:6px 26px;padding:22px 0;
    border-bottom:1px solid rgba(255,255,255,.22);
    align-items:center;text-decoration:none;color:#fff;
  }
  @media(min-width:860px){.rz{grid-template-columns:210px 1fr 150px 190px auto;}}
  .rz:hover{background:rgba(255,255,255,.07);}
  .rz .datum{font-family:var(--daten);font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap;}
  .rz .tour{font-family:var(--anzeige);font-variation-settings:"wdth" 87;text-transform:uppercase;font-size:18px;font-weight:700;}
  .rz .preis{font-family:var(--daten);font-size:16px;color:var(--orange-hell);font-weight:700;white-space:nowrap;}
  .rz .guide{font-family:var(--daten);font-size:13.5px;color:#CFE3F0;}
  .ampel{display:inline-flex;align-items:center;gap:9px;font-family:var(--daten);font-size:12.5px;white-space:nowrap;}
  .ampel i{width:11px;height:11px;flex:none;border-radius:50%;}
  .ampel.wenig i{background:var(--orange);}
  .ampel.frei i{background:#5FBE7D;}

  /* ---------- Karte ---------- */
  .karte-halter{border:2px solid var(--linie);background:#fff;}
  .karte-halter .rollen{overflow-x:auto;}
  .karte-halter svg{display:block;width:100%;min-width:680px;height:auto;}
  .k-ort{font-family:var(--anzeige);font-variation-settings:"wdth" 87;text-transform:uppercase;font-size:12.5px;font-weight:700;fill:var(--schatten);}
  .k-ort.hi{fill:var(--orange);}
  .k-achse{font-family:var(--daten);font-size:10px;letter-spacing:.14em;fill:var(--stein);text-transform:uppercase;}
  .karte-fuss{padding:14px 20px;border-top:2px solid var(--linie);font-family:var(--daten);font-size:12px;color:#6E6A66;}

  /* ---------- Bergf&#252;hrer ---------- */
  .fuehrer{display:grid;gap:2px;background:var(--linie);border:2px solid var(--linie);}
  @media(min-width:760px){.fuehrer{grid-template-columns:repeat(3,1fr);}}
  .fz{background:#fff;padding:26px 24px;display:flex;flex-direction:column;gap:7px;}
  .fz .fn{font-family:var(--anzeige);font-variation-settings:"wdth" 87;text-transform:uppercase;font-size:20px;font-weight:700;}
  .fz .fr{font-family:var(--daten);font-size:12.5px;color:#6E6A66;}
  .platzhalter{
    font-family:var(--daten);font-size:12px;color:#6E6A66;
    border:1px dashed var(--stein);padding:10px 12px;margin-top:auto;
  }

  /* ---------- Text ---------- */
  .fliess p{margin-bottom:18px;}
  .fliess p:last-child{margin-bottom:0;}
  .merk{
    border-top:3px solid var(--orange);
    padding-top:16px;font-family:var(--anzeige);font-variation-settings:"wdth" 87;
    text-transform:uppercase;font-size:clamp(19px,2.3vw,26px);font-weight:700;line-height:1.15;
    max-width:26ch;
  }

  .bieten{list-style:none;display:grid;gap:0;margin-top:8px;}
  @media(min-width:720px){.bieten{grid-template-columns:1fr 1fr;column-gap:44px;}}
  .bieten li{display:flex;gap:13px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--linie);}
  .bieten li::before{content:"";width:15px;height:5px;background:var(--blau);flex:none;position:relative;top:-2px;}

  /* ---------- Stimmen ---------- */
  .stimmen{display:grid;gap:20px;}
  @media(min-width:800px){.stimmen{grid-template-columns:repeat(3,1fr);}}
  .st{background:#fff;border:2px solid var(--linie);padding:24px;display:flex;flex-direction:column;gap:12px;}
  .st .sterne{color:var(--orange);letter-spacing:2px;font-size:15px;}
  .st blockquote{font-size:16px;line-height:1.55;}
  .st cite{font-family:var(--daten);font-size:12px;color:#6E6A66;font-style:normal;margin-top:auto;}

  .partner{display:flex;flex-wrap:wrap;gap:12px 34px;align-items:center;
    font-family:var(--anzeige);font-variation-settings:"wdth" 87;text-transform:uppercase;
    font-size:15px;color:#6E6A66;font-weight:700;}

  /* ---------- Newsletter ---------- */
  .news{display:grid;gap:26px;}
  @media(min-width:840px){
    /* Eigene Zeilen f&#252;r &#220;berschrift und Absatz (statt einer Zeile &#252;ber
       beide Spalten), damit die Formularspalte gezielt unter die
       &#220;berschrift gesetzt werden kann &#8212; nicht unter den ganzen Textblock.
       Kein Row-Gap: der Abstand zwischen &#220;berschrift und Absatz kommt
       allein vom margin-top des Absatzes. */
    .news{grid-template-columns:1.15fr 1fr;grid-template-rows:auto auto;column-gap:26px;row-gap:0;align-items:start;}
    /* h2 beh&#228;lt sonst seinen UA-Default-Bottom-Margin &#8212; der w&#252;rde die Zeile
       unter die sichtbare Textkante hinaus verl&#228;ngern und die Formularspalte
       zu tief ansetzen. */
    .news-head{grid-column:1;grid-row:1;}
    .news-head h2{margin-bottom:0;}
    .news-text{grid-column:1;grid-row:2;}
    /* Formular-Oberkante b&#252;ndig mit der Unterkante von &#8222;Erfahre es zuerst&#8220;.
       margin-top gleicht den Abstand zwischen h2-Zeilenbox und ihrer
       sichtbaren Versalien-Unterkante aus (die Zeilenbox ragt durch die
       Schriftmetrik ca. 13px tiefer als die sichtbaren Versalien). Zus&#228;tzlich
       soll die Formularzeile (.nf) f&#252;r sich mit ihrer Oberkante an die
       sichtbare Versalien-Oberkante heranreichen, nicht an die tiefer
       liegende h2-Zeilenbox &#8212; daf&#252;r .nf per transform angehoben: transform
       ver&#228;ndert die visuelle Position, ohne den Dokumentfluss zu
       beeinflussen, sodass .nk unten unver&#228;ndert an seiner Stelle bleibt.
       Die Spaltenbreite (und damit die Zeilenzahl des linken Absatzes) &#228;ndert
       sich bei 1235px (siehe Regel unten), daher zwei margin-top-Stufen: bis
       1234px bricht der Absatz auf drei Zeilen um, ab 1235px auf zwei &#8212;
       Werte final mit dem Kunden abgestimmt, gemessen am gerenderten
       Entwurf bei 1276px. */
    .news-form{grid-column:2;grid-row:2;align-self:start;margin-top:-5px;}
    .news-form .nf{transform:translateY(-28px);}
    /* Die letzte sichtbare Zeile rechts (.nk) sitzt sonst ca. 5.5px tiefer
       als links, weil der Absatz einen gr&#246;&#223;eren Default-Bottom-Margin hat
       (17.5px) als der Hinweis (12px) und beide Bl&#246;cke optisch unten b&#252;ndig
       wirken sollen. Eigener transform auf .nk (statt auf .news-form), damit
       weder .nf noch der linke Text (.news-text) mitbewegt werden &#8212; final
       abgestimmter Wert, gemessen bei 1276px. */
    .news-form .nk{margin-bottom:17.5px;transform:translateY(-2px);}
  }
  /* Ab 1235px bleibt die Spaltenbreite bis zum Container-Max von 1240px und
     dar&#252;ber unver&#228;ndert, der linke Absatz bricht dann nur noch auf zwei statt
     drei Zeilen um und wird dadurch k&#252;rzer &#8212; die Formularspalte muss
     entsprechend weiter angehoben werden, damit .nf weiterhin b&#252;ndig mit der
     Versalien-Oberkante der &#220;berschrift abschlie&#223;t. */
  @media(min-width:1235px){
    .news-form{margin-top:-33px;}
  }
  .nf{display:flex;gap:0;flex-wrap:wrap;}
  .nf input{
    flex:1;min-width:220px;border:2px solid #fff;background:transparent;color:#fff;
    padding:14px 16px;font-family:var(--text);font-size:16px;
  }
  .nf input::placeholder{color:#C5DCEA;}
  .nf input:focus{outline:0;border-color:var(--orange);}
  .nf button{border:0;}
  .nk{font-family:var(--daten);font-size:12px;color:#C5DCEA;margin-top:12px;max-width:46ch;}

  /* ---------- Fu&#223; ---------- */
  .fuss{background:var(--schatten);color:#9FA8AF;padding-block:56px 40px;}
  .fuss a{color:#C9D2D8;text-decoration:none;}
  .fuss a:hover{color:var(--orange);}
  .fuss-gitter{display:grid;gap:32px;}
  @media(min-width:760px){.fuss-gitter{grid-template-columns:1.6fr 1fr 1fr 1fr;}}
  .fuss h3{font-family:var(--anzeige);font-variation-settings:"wdth" 87;text-transform:uppercase;font-size:13px;letter-spacing:.1em;color:#fff;margin:0 0 14px;font-weight:700;padding:0;}
  /* padding und margin ausdr&#252;cklich auf null: der Browser setzt bei ul sonst 40px
     Innenabstand links, wodurch die Links gegen&#252;ber der &#220;berschrift einger&#252;ckt stehen. */
  .fuss ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:15px;margin:0;padding:0;}
  .fuss ul li{margin:0;padding:0;}
  .fuss .logoplatte img{height:48px;width:auto;display:block;}
  .fuss .kl{font-family:var(--daten);font-size:12px;line-height:1.9;margin:0;}
  .fuss-spalte{display:flex;flex-direction:column;align-items:flex-start;}

  /* ---------- Overlay-Navigation ----------
     Kein reines Linkverzeichnis: das Men&#252; zeigt Angebot, Preis und freie Pl&#228;tze.
     Wer es &#246;ffnet, sieht sofort, was buchbar ist &#8212; und kann von dort anfragen. */
  /* &#214;ffnet &#252;ber :target, also ohne JavaScript. Das Skript verbessert danach nur noch
     (kein Sprung in der Adresszeile, Escape, Fokus) &#8212; es ist nicht die Bedingung. */
  .ovl{
    position:fixed;inset:0;z-index:100;background:var(--blau);
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s;
  }
  /* Beim &#214;ffnen muss visibility sofort wechseln: Sonst kann das Skript den
     Schlie&#223;en-Link w&#228;hrend der 280-ms-Transition noch nicht fokussieren. */
  .ovl:target,.ovl.auf{
    opacity:1;visibility:visible;
    transition:opacity .28s ease,visibility 0s;
  }
  body.ovl-offen{overflow:hidden;}

  .ovl-kopf{
    position:sticky;top:0;z-index:2;background:var(--blau);
    border-bottom:1px solid rgba(255,255,255,.22);
  }
  .ovl-kopf .breit{display:flex;align-items:center;gap:20px;padding-block:16px;}
  .ovl-kopf .logoplatte img{height:40px;width:auto;display:block;}
  .schliessen{
    margin-left:auto;display:inline-flex;align-items:center;gap:11px;cursor:pointer;
    background:transparent;border:2px solid rgba(255,255,255,.55);color:#fff;
    font-family:var(--anzeige);font-variation-settings:"wdth" 87;
    text-transform:uppercase;font-weight:700;font-size:14px;letter-spacing:.03em;padding:9px 15px;
  }
  .schliessen:hover{background:var(--orange);border-color:var(--orange);color:var(--schatten);}
  .schliessen b{font-family:var(--daten);font-size:17px;line-height:1;font-weight:400;}

  .ovl-gitter{display:grid;gap:40px;padding-block:36px 60px;}
  @media(min-width:980px){.ovl-gitter{grid-template-columns:1.55fr 1fr;gap:56px;}}

  /* Eine orchestrierte Bewegung: die Bl&#246;cke tauchen nacheinander auf, wie Markierungen,
     die am Weg erscheinen. Kein Effekt auf jedem einzelnen Element. */
  html.js .ovl .staffel{opacity:0;transform:translateY(12px);}
  html.js .ovl:target .staffel,html.js .ovl.auf .staffel{
    opacity:1;transform:none;
    transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);
  }
  html.js .ovl:target .staffel:nth-child(1),html.js .ovl.auf .staffel:nth-child(1){transition-delay:.06s;}
  html.js .ovl:target .staffel:nth-child(2),html.js .ovl.auf .staffel:nth-child(2){transition-delay:.12s;}
  html.js .ovl:target .staffel:nth-child(3),html.js .ovl.auf .staffel:nth-child(3){transition-delay:.18s;}
  html.js .ovl:target .staffel:nth-child(4),html.js .ovl.auf .staffel:nth-child(4){transition-delay:.24s;}
  @media(prefers-reduced-motion:reduce){
    html.js .ovl .staffel{opacity:1;transform:none;transition:none;}
  }

  .ovl-block{margin-bottom:34px;}
  .ovl-block:last-child{margin-bottom:0;}
  .ovl-titel{
    display:flex;align-items:center;gap:13px;margin-bottom:16px;
    font-family:var(--anzeige);font-variation-settings:"wdth" 87;
    text-transform:uppercase;font-weight:700;font-size:13px;letter-spacing:.13em;color:#9EC6DE;
  }
  .ovl-titel i{width:26px;height:9px;flex:none;display:block;background:
    linear-gradient(to bottom,var(--kalk) 0 33%,var(--orange) 33% 66%,var(--kalk) 66% 100%);}

  /* E5 als Verkaufskarte */
  .ovl-e5{
    display:grid;gap:0;text-decoration:none;color:#fff;border:2px solid rgba(255,255,255,.28);
    overflow:hidden;margin-bottom:14px;
  }
  @media(min-width:560px){.ovl-e5{grid-template-columns:230px 1fr;}}
  .ovl-e5:hover{border-color:var(--orange);}
  .ovl-e5 .b{min-height:150px;background-image:var(--bild-e5);background-size:cover;background-position:52% 50%;}
  .ovl-e5 .t{padding:20px 22px;display:flex;flex-direction:column;gap:7px;justify-content:center;}
  .ovl-e5 .t strong{
    font-family:var(--anzeige);font-variation-settings:"wdth" 87;
    text-transform:uppercase;font-size:clamp(24px,3vw,34px);font-weight:700;line-height:1;
  }
  .ovl-e5 .t span{font-size:15.5px;color:#CFE3F0;line-height:1.4;}
  .ovl-e5 .preis{font-family:var(--daten);font-size:15px;color:var(--orange-hell);font-weight:700;}

  .ovl-liste{list-style:none;display:grid;gap:1px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.2);}
  @media(min-width:640px){.ovl-liste.zwei{grid-template-columns:1fr 1fr;}}
  .ovl-liste a{
    display:flex;align-items:baseline;gap:10px;background:var(--blau);
    padding:13px 16px;text-decoration:none;color:#fff;
    font-family:var(--anzeige);font-variation-settings:"wdth" 87;
    text-transform:uppercase;font-weight:600;font-size:15px;letter-spacing:.01em;
  }
  .ovl-liste a:hover{background:var(--blau-tief);color:var(--orange-hell);}
  .ovl-liste a em{font-style:normal;font-family:var(--daten);font-size:11.5px;color:#9EC6DE;text-transform:none;font-weight:400;margin-left:auto;}
  .ovl-liste a:hover em{color:#CFE3F0;}

  /* Rechte Spalte: Restpl&#228;tze */
  .ovl-seite{display:flex;flex-direction:column;gap:34px;}
  .ovl-rest{list-style:none;display:flex;flex-direction:column;}
  .ovl-rest a{
    display:flex;flex-direction:column;gap:4px;text-decoration:none;color:#fff;
    padding:15px 0;border-bottom:1px solid rgba(255,255,255,.22);
  }
  .ovl-rest li:first-child a{border-top:1px solid rgba(255,255,255,.22);}
  .ovl-rest a:hover{background:rgba(255,255,255,.07);}
  .ovl-rest .d{font-family:var(--daten);font-size:15px;font-variant-numeric:tabular-nums;}
  .ovl-rest .n{font-family:var(--anzeige);font-variation-settings:"wdth" 87;text-transform:uppercase;font-weight:700;font-size:16px;}
  .ovl-rest .m{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-family:var(--daten);font-size:12.5px;color:#CFE3F0;}
  .ovl-rest .m b{color:var(--orange-hell);}

  .ovl-kontakt{border:2px solid rgba(255,255,255,.28);padding:22px;display:flex;flex-direction:column;gap:12px;}
  .ovl-kontakt .nr{
    font-family:var(--anzeige);font-variation-settings:"wdth" 87;
    font-size:clamp(21px,2.4vw,27px);font-weight:700;color:#fff;text-decoration:none;
    display:flex;align-items:center;gap:11px;
  }
  .ovl-kontakt .nr:hover{color:var(--orange-hell);}
  .ovl-kontakt .nr svg{width:20px;height:20px;fill:var(--orange);flex:none;}
  .ovl-kontakt p{font-size:14.5px;color:#CFE3F0;margin:0;max-width:none;}

  /* ---------- Bewegung ----------
     Inhalt ist grunds&#228;tzlich sichtbar. Erst wenn das Skript l&#228;uft, setzt es html.js
     und schaltet damit das Einblenden ein. Ohne Skript fehlt kein einziger Abschnitt. */
  .auftauchen{opacity:1;transform:none;}
  html.js .auftauchen{opacity:0;transform:translateY(14px);}
  html.js .auftauchen.da{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);}
  @media(prefers-reduced-motion:reduce){
    html.js .auftauchen{opacity:1;transform:none;}
    .route .rb{transition:none;}
  }

  .hinweis{
    background:#FFF6E8;border:2px solid var(--orange);
    padding:18px 22px;font-family:var(--daten);font-size:13px;line-height:1.7;color:#5A4326;
  }

  /* ---------- Bestandstexte ----------
     &#220;berschriften laufen &#252;ber die volle Breite, der Flie&#223;text steht in zwei Spalten.
     Ein `ch`-Ma&#223; auf dem Elternelement w&#252;rde auch die &#220;berschrift auf Flie&#223;textbreite
     zwingen &#8212; deshalb bekommt jede Ebene ihr eigenes Ma&#223;. */
  .lang{max-width:none;}
  .lang h2{max-width:none;}
  .lang p{margin-bottom:20px;max-width:none;}
  .lang p:last-child{margin-bottom:0;}

  .spalten{columns:2;column-gap:60px;margin-top:24px;}
  .spalten p{margin:0 0 20px;break-inside:avoid-column;orphans:3;widows:3;}
  .spalten p:last-child{margin-bottom:0;}
  @media(max-width:900px){.spalten{columns:1;}}

  .kopfpaar{display:grid;gap:26px 56px;margin-top:24px;align-items:start;}
  @media(min-width:900px){.kopfpaar{grid-template-columns:1.25fr 1fr;}}
  .kopfpaar p{margin:0;}
  .kopfpaar .gutzuwissen{max-width:none;}
  .gutzuwissen{
    background:var(--blau);color:#fff;padding:20px 24px;margin:28px 0;
    font-family:var(--anzeige);font-variation-settings:"wdth" 87;
    text-transform:uppercase;font-size:clamp(17px,2vw,23px);font-weight:700;line-height:1.2;
    clip-path:polygon(0 2%,99.6% 0,100% 97%,.4% 100%);max-width:44ch;
  }
  .oeko{list-style:none;display:flex;flex-direction:column;gap:0;margin:22px 0;}
  .oeko li{display:flex;gap:14px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--linie);}
  .oeko li::before{content:"";width:15px;height:5px;background:var(--orange);flex:none;position:relative;top:-2px;}
  .blaufeld .oeko li{border-bottom-color:rgba(255,255,255,.24);}

  /* ---------- Info-Karten ---------- */
  .infos{display:grid;gap:2px;background:var(--linie);border:2px solid var(--linie);}
  @media(min-width:720px){.infos{grid-template-columns:repeat(3,1fr);}}
  .ik{background:#fff;padding:24px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;}
  .ik:hover{background:var(--kalk);}
  .ik .ikt{font-family:var(--anzeige);font-variation-settings:"wdth" 87;text-transform:uppercase;font-size:19px;font-weight:700;line-height:1.1;}
  .ik .ikp{font-size:15px;color:#4E4A46;}
  .ik .ikl{font-family:var(--daten);font-size:12.5px;color:var(--orange-text);margin-top:auto;padding-top:8px;font-weight:700;}

  /* ---------- KI-Chat ---------- */
  .chat{
    position:fixed;right:20px;bottom:20px;z-index:40;
    display:flex;align-items:stretch;gap:0;
    background:var(--blau);color:#fff;border:0;cursor:pointer;text-align:left;
    box-shadow:0 6px 22px rgba(10,26,40,.34);
    max-width:min(320px,calc(100vw - 40px));
    padding:0;font-family:var(--text);
  }
  .chat:hover{background:var(--blau-tief);}
  .chat .cm{width:16px;flex:none;background:
    linear-gradient(to bottom,var(--orange) 0 34%,var(--kalk) 34% 66%,var(--orange) 66% 100%);}
  .chat .ct{padding:13px 16px 14px;display:flex;flex-direction:column;gap:3px;}
  .chat .ct b{
    font-family:var(--anzeige);font-variation-settings:"wdth" 87;
    text-transform:uppercase;font-size:15.5px;font-weight:700;letter-spacing:.02em;
  }
  .chat .ct span{font-size:13px;color:#CFE3F0;line-height:1.35;}
  @media(max-width:560px){
    /* Der Hero endet auf kleinen Displays knapp &#252;ber der Breadcrumb-Zeile.
       Der angehobene Knopf bleibt im Bild und verdeckt den Seitenpfad nicht. */
    .chat{right:12px;bottom:64px;}
    .chat .ct span{display:none;}
  }

  /* ============================================================
     Bauteil Buchungsstatus.

     Der Status ist ein Feld aus Tourmingo und wird dort von Hand
     gepflegt. Die Website zeigt nur an, was &#252;bermittelt wird &#8212; sie
     rechnet nichts aus. Das ist Absicht: Die Gruppengr&#246;&#223;en schwanken
     (6/7, 6/8, 6/10, 7/10), eine feste Schwelle wie &#8222;ab 2 Pl&#228;tzen
     wenige" w&#228;re f&#252;r die H&#228;lfte der Touren falsch.

     Sechs Werte, vom Start bis ausgebucht:
       frei     Pl&#228;tze frei
       erste    Erste Buchungen vorhanden
       mindest  Mindestteilnehmerzahl erreicht   (Zusage, kein Druck)
       wenige   Nur noch wenige Pl&#228;tze frei
       einer    Noch ein Platz frei
       voll     Ausgebucht

     &#8222;mindest" ist bewusst eine eigene Farbe: Es ist keine Knappheit,
     sondern die Zusage, dass die Tour stattfindet. Das ist bei
     Kleingruppen die h&#228;ufigste R&#252;ckfrage &#252;berhaupt.
     ============================================================ */

  .status{
    display:inline-flex;align-items:center;gap:9px;
    font-family:var(--daten);font-size:12.5px;line-height:1.35;
    white-space:nowrap;color:#3A3733;
  }
  .status i{
    width:11px;height:11px;flex:none;border-radius:50%;
    background:var(--stein);
  }
  .status.frei i,
  .status.erste i{background:#5FBE7D;}
  .status.mindest i{background:var(--cyan);}
  .status.wenige i,
  .status.einer i{background:var(--orange);}
  .status.voll{color:#6E6A66;}
  .status.voll i{background:var(--stein);}

  /* Die beiden Zust&#228;nde, die eine Entscheidung ausl&#246;sen, tragen Gewicht */
  .status.einer,
  .status.wenige{color:var(--orange-text);font-weight:700;}
  .status.mindest{color:#00708C;}

  /* Auf blauem Grund */
  .blaufeld .status{color:#DCE8F1;}
  .blaufeld .status.einer,
  .blaufeld .status.wenige{color:var(--orange-hell);}
  .blaufeld .status.mindest{color:#8FD8EA;}
  .blaufeld .status.voll{color:#9FB6C6;}

  /* Mehrzeilig, wo der Platz eng ist */
  .status.umbruch{white-space:normal;align-items:flex-start;}
  .status.umbruch i{margin-top:4px;}

  /* Hinweis, woher die Werte kommen */
  .status-quelle{
    font-family:var(--daten);font-size:11.5px;color:#56524E;
    border-bottom:1.5px dashed var(--stein);padding-bottom:2px;
    display:inline-block;
  }

  /* ============================================================
     Bauteil Tourzeile und Blockkopf.
     Wird von der Kategorieseite und von den Tourseiten benutzt &#8212;
     eine Definition, damit die Liste ueberall gleich fluchtet.
     ============================================================ */

  /* ---------- Tourblock ---------- */
  .block{scroll-margin-top:20px;}
  .block + .block{margin-top:64px;}
  .blockkopf{
    display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
    border-bottom:3px solid var(--blau);padding-bottom:12px;margin-bottom:0;
  }
  .blockkopf h2{
    font-family:var(--anzeige);font-variation-settings:"wdth" 87;text-transform:uppercase;
    font-weight:700;font-size:clamp(21px,2.5vw,30px);letter-spacing:-.012em;
    color:var(--blau);margin:0;
  }
  .blockkopf .anz{
    font-family:var(--daten);font-size:12.5px;color:#56524E;
  }
  .blockkopf .weg{
    margin-left:auto;font-family:var(--daten);font-size:13px;color:var(--orange-text);
  }
  .blocknote{margin:14px 0 4px;color:#4C4945;max-width:72ch;}

  /* ---------- Tourzeile: Fahrplan, keine Kachel ---------- */
  /* Ohne Zuruecksetzen schiebt der Browser die Liste um 40px ein und die
     Tournamen fluchten nicht mehr mit der Blockueberschrift. */
  .tliste{list-style:none;margin:0;padding:0;}
  /* Vorschaubilder der Tourzeilen, verkleinert unter assets/thumbs/ */
  :root{
    --bild-v-meran:url('/wp-content/themes/the7-child/assets/img/c59617c70ac0.jpg');
    --bild-v-kemptner:url('/wp-content/themes/the7-child/assets/img/a9b7e63ec649.jpg');
    --bild-v-seescharte:url('/wp-content/themes/the7-child/assets/img/a63e819088d4.jpg');
    --bild-v-braunschweiger:url('/wp-content/themes/the7-child/assets/img/80131c636a54.jpg');
    --bild-v-morgen:url('/wp-content/themes/the7-child/assets/img/d6bb2bd75ca2.jpg');
    --bild-v-steinbock:url('/wp-content/themes/the7-child/assets/img/f368225501c8.jpg');
    --bild-v-dscn7979:url('/wp-content/themes/the7-child/assets/img/7f12f987d4d5.jpg');
    --bild-v-dscn0442:url('/wp-content/themes/the7-child/assets/img/048cabf964a3.jpg');
    --bild-v-20240720:url('/wp-content/themes/the7-child/assets/img/5f078b79a715.jpg');
    --bild-v-20240719:url('/wp-content/themes/the7-child/assets/img/5e6d977c076e.jpg');
    --bild-v-banner:url('/wp-content/themes/the7-child/assets/img/c788f310ce82.jpg');
    --bild-v-gardasee:url('/wp-content/themes/the7-child/assets/img/3d3c0cd45ae9.jpg');
  }

  .tz{
    display:grid;grid-template-columns:1fr auto;gap:6px 28px;align-items:baseline;
    padding:19px 0;border-bottom:1px solid var(--linie);text-decoration:none;color:inherit;
  }
  /* Vorschaubild: bei langen Listen erkennt man die Route, bevor man den
     Titel liest. Kein Rahmen, keine Rundung, kein Schatten &#8212; eine Marke,
     keine Kachel. Die Bilder liegen verkleinert unter assets/thumbs/. */
  .tz.mitbild{grid-template-columns:auto minmax(0,1fr) auto;align-items:start;}
  .tz-bild{
    grid-column:1;grid-row:1 / span 3;align-self:start;
    width:104px;height:74px;background-size:cover;background-position:50% 50%;
    margin-top:3px;
  }
  .tz.mitbild .tz-name,
  .tz.mitbild .tz-meta,
  .tz.mitbild .tz-art{grid-column:2;}
  .tz.mitbild .tz-daten{grid-column:3;}
  @media (max-width:780px){
    .tz.mitbild{grid-template-columns:auto minmax(0,1fr);}
    .tz-bild{width:64px;height:46px;grid-row:1 / span 3;}
    .tz.mitbild .tz-daten{grid-column:1 / span 2;grid-row:4;}
  }
  .tz:hover{background:var(--kalk);box-shadow:-14px 0 0 var(--kalk),14px 0 0 var(--kalk);}
  .tz:hover .tz-name{color:var(--blau);}
  .tz:focus-visible{outline:3px solid var(--orange-text);outline-offset:3px;}
  .tz-name{
    font-family:var(--anzeige);font-variation-settings:"wdth" 90;
    font-size:20.5px;font-weight:700;line-height:1.2;letter-spacing:-.008em;
    grid-column:1;
  }
  /* Startort und Kennzeichnungen, direkt unter dem Namen.
     Der Startort beantwortet &#8222;Ist das nah bei mir?" &#8212; die Frage, die im
     geprueften Wettbewerb niemand beantwortet und die auf den heutigen
     Kacheln fehlt. Er gehoert deshalb in jede Zeile, nicht nur auf die Karte. */
  .tz-meta{
    grid-column:1;grid-row:2;display:flex;align-items:center;gap:8px;
    flex-wrap:wrap;margin-top:2px;
  }
  .tz-ort{
    font-family:var(--daten);font-size:12.5px;color:#56524E;
    display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  }
  .tz-ort svg{width:11px;height:13px;fill:var(--orange-text);flex:none;}
  .kenn{
    font-family:var(--daten);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
    color:#56524E;border:1px solid var(--linie);padding:3px 7px;white-space:nowrap;
  }
  .kenn.signal{color:var(--orange-text);border-color:var(--orange-text);}
  .kenn.kalt{color:var(--blau);border-color:#B9CEDE;}

  /* Kondition und Technik als zwei Balken &#8212; Marktstandard bei Bergschulen
     und laut Konzept das, was Touren ueber die ganze Website hinweg auf
     einen Blick vergleichbar macht. Die Stufen kommen aus Tourmingo. */
  .tz-stufe{
    display:inline-flex;align-items:center;gap:6px;
    font-family:var(--daten);font-size:10.5px;letter-spacing:.06em;
    text-transform:uppercase;color:#56524E;white-space:nowrap;
  }
  .tz-stufe .bs{display:inline-flex;gap:2px;}
  .tz-stufe .bs i{width:13px;height:7px;background:var(--linie);display:block;}
  .tz-stufe .bs i.an{background:var(--blau);}
  .tz-stufe.tech .bs i.an{background:var(--cyan);}

  .tz-art{
    grid-column:1;grid-row:3;font-size:15.5px;color:#4C4945;line-height:1.5;max-width:56ch;
  }
  /* Feste Spaltenbreiten, rechtsbuendig: ein Fahrplan muss von Zeile zu Zeile
     fluchten. Mit Flex wandern die Spalten je nach Zahlenbreite. */
  .tz-daten{
    grid-column:2;grid-row:1 / span 3;
    display:grid;grid-template-columns:52px 74px 122px;gap:0 22px;
    font-family:var(--daten);font-size:13px;color:#4C4945;white-space:nowrap;
  }
  .tz-daten > span{text-align:right;}
  .tz-daten b{display:block;font-size:19px;color:var(--schatten);font-weight:700;
    font-variant-numeric:tabular-nums;}
  .tz-daten .lbl{
    display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
    color:#5E5A55;margin-top:4px;
  }
  .tz-daten .preis b{color:var(--orange-text);}
  @media (max-width:780px){
    .tz{grid-template-columns:1fr;}
    .tz-daten{
      grid-column:1;grid-row:4;margin-top:12px;
      grid-template-columns:auto auto 1fr;gap:0 26px;
    }
    .tz-daten > span{text-align:left;}
    .tz-daten > span.preis{text-align:right;}
  }

  /* ---------- Progressive Disclosure: "Weitere Touren anzeigen" ----------
     Lange Listen (mehr als fuenf Treffer) zeigen zunaechst nur fuenf Zeilen.
     Serverseitig stehen immer alle Zeilen im Quelltext &#8212; Suchmaschinen und
     Nutzer ohne Skript sehen die vollstaendige Liste. Erst JavaScript kuerzt
     per Klasse und haengt den Schalter an; siehe teile/_ovl_skript.html und
     DESIGN.md. Bewusst kein Kartenlook: keine Rundung, kein Schatten, kein
     Verlauf &#8212; Orange nur als kleines Signal am Pfeil, nicht als Flaeche. */
  .tz-mehr-versteckt{display:none;}
  .tz-mehr-zeile{border-bottom:1px solid var(--linie);}
  .tz-mehr{
    display:flex;align-items:center;gap:10px;width:100%;min-height:44px;
    font-family:var(--daten);font-size:14px;font-weight:700;color:var(--blau);
    background:none;border:0;padding:12px 2px;cursor:pointer;text-align:left;
  }
  .tz-mehr:hover{color:var(--orange-text);}
  .tz-mehr:hover .tz-mehr-pf{border-color:var(--orange-text);}
  .tz-mehr:focus-visible{outline:3px solid var(--orange-text);outline-offset:3px;}
  .tz-mehr-pf{
    width:9px;height:9px;flex:none;
    border-right:2px solid var(--orange-text);border-bottom:2px solid var(--orange-text);
    transform:rotate(45deg);transition:transform .2s ease;
  }
  .tz-mehr[aria-expanded="true"] .tz-mehr-pf{transform:rotate(-135deg);}
  @media (max-width:780px){
    .tz-mehr{padding:13px 2px;}
  }

  /* Marke am E5-Block: dieser Block ist der Hauptweg */
  .block.haupt .blockkopf{border-bottom-color:var(--orange);}
  .block.haupt .tz-name{font-size:22px;}

  /* Markierung am Beratungsknopf: blau-weiss-blau wie am Seitenkopf.
     Aussen --blau-tief, weil der Knopf selbst blau ist und die Baender
     sonst mit seiner Flaeche verschmelzen. */
  .chat .cm{
    width:18px;
    background:linear-gradient(to bottom,
      var(--blau-tief) 0 34%, var(--kalk) 34% 66%, var(--blau-tief) 66% 100%);
  }


  /* ============================================================
     Bauteil Haeufige Fragen. Wird von der Kategorieseite und von der
     E5-Vergleichsseite benutzt &#8212; eine Definition fuer beide.
     ============================================================ */

  /* ---------- H&#228;ufige Fragen ---------- */
  .faq{border-top:2px solid var(--linie);}
  .faq details{border-bottom:1px solid var(--linie);}
  .faq summary{
    list-style:none;cursor:pointer;padding:18px 44px 18px 0;position:relative;
    font-family:var(--anzeige);font-variation-settings:"wdth" 90;
    font-size:18.5px;font-weight:700;line-height:1.3;
  }
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary:hover{color:var(--blau);}
  .faq summary:focus-visible{outline:3px solid var(--orange-text);outline-offset:2px;}
  .faq summary::after{
    content:"";position:absolute;right:8px;top:26px;
    width:13px;height:13px;border-right:2.5px solid var(--orange-text);
    border-bottom:2.5px solid var(--orange-text);transform:rotate(45deg);
    transition:transform .2s ease;
  }
  .faq details[open] summary::after{transform:rotate(-135deg);top:30px;}
  .faq .antwort{padding:0 44px 22px 0;max-width:72ch;color:#3A3733;}
  .faq .antwort ul{margin-top:10px;padding-left:20px;}
  .faq .antwort li{margin-bottom:5px;}

  /* Zweispaltige Vorteilsliste nur, wo wirklich Platz ist */
  .vorteile-zwei{display:block;columns:2;column-gap:48px;}
  .vorteile-zwei li{break-inside:avoid;}
  @media (max-width:760px){ .vorteile-zwei{columns:1;} }


  /* ============================================================
     Bauteile Bildband und Stimmungsband.
     Kategorieseite und E5-Vergleich nutzen beide dieselbe Definition.
     Die Bildvariablen setzt jede Seite selbst.
     ============================================================ */

  /* ---------- Bildbaender der Tourbloecke ----------
     Urlaub verkauft sich nicht ueber Tabellen. Jeder Block bekommt sein Foto,
     der Titel sitzt auf einem gemalten blauen Band an der Unterkante &#8212; derselbe
     Wechsel Foto, Flaeche, Fels wie auf der Startseite. */
  .blockbild{
    position:relative;min-height:208px;
    background-size:cover;background-position:50% 46%;
    display:flex;align-items:flex-end;
  }
  .block.haupt .blockbild{min-height:320px;background-position:50% 54%;}
  @media (max-width:700px){
    .blockbild{min-height:150px;}
    .block.haupt .blockbild{min-height:190px;}
  }
  /* Kein schraeger Anschnitt am Band: bei einem waagerechten Streifen
     beschneidet er nur die orange Unterkante. */
  .blockbild .blockkopf{
    width:100%;background:var(--blau);color:#fff;
    padding:16px 24px 14px;border-bottom:0;
  }
  /* Platzhalterlinks auf blauem Grund brauchen eine hellere Strichfarbe */
  .blockbild a[data-platzhalter]{border-bottom-color:rgba(255,255,255,.45);}
  .blockbild .blockkopf h2{color:#fff;}
  .blockbild .blockkopf .anz{color:#C3D7E5;}
  .blockbild .blockkopf .weg a{color:var(--orange-hell);}
  .block.haupt .blockbild .blockkopf{border-bottom:4px solid var(--orange);}

  /* ---------- Stimmungsband ---------- */
  .emotion{position:relative;background:var(--schatten);color:#fff;}
  .emotion-bild{
    position:absolute;inset:0;background-image:var(--bild-stimmung);
    background-size:cover;background-position:50% 42%;
  }
  .emotion-innen{position:relative;padding-block:118px;}
  .emotion .feld{
    background:var(--blau);max-width:640px;padding:36px 40px 38px;
    clip-path:polygon(0 1.4%,99.4% 0,100% 98.6%,.5% 100%);
  }
  .emotion .feld h2{
    font-family:var(--anzeige);font-variation-settings:"wdth" 87;
    text-transform:uppercase;font-weight:700;
    font-size:clamp(25px,3.1vw,40px);line-height:1.05;letter-spacing:-.018em;
    margin:0 0 16px;text-wrap:balance;
  }
  .emotion .feld p{color:#DCE8F1;font-size:17.5px;line-height:1.6;margin:0;}
  .emotion .feld .knopf{margin-top:24px;}
  @media (max-width:780px){
    .emotion-innen{padding-block:72px;}
    .emotion .feld{padding:26px 24px 28px;max-width:none;}
  }

  /* Dasselbe bei figure: der Browser setzt 40px Seitenrand. */
  .karte-halter{margin:0;}

  /* ============================================================
     E5-Vergleichsseite &#8212; neue Bauteile.
     Werte, Farben, Markierung, Knopf, Tourzeile und Fragenblock
     kommen unver&#228;ndert aus den anderen Seiten.
     ============================================================ */

  html,body{margin:0;padding:0;}
  :root{
    --bild-e5kopf:url('/wp-content/themes/the7-child/assets/img/1001096a50a5.jpg');
    --bild-stimmung:url('/wp-content/themes/the7-child/assets/img/96f27758abc2.jpg');
    --bild-b1:url('/wp-content/themes/the7-child/assets/img/a34f2b689c46.jpg');
    --bild-b2:url('/wp-content/themes/the7-child/assets/img/26d763ec70d1.jpg');
    --bild-b3:url('/wp-content/themes/the7-child/assets/img/1b8cccb03efb.jpg');
  }

  /* ---------- Kopfzone mit H&#246;henprofil ---------- */
  .e5kopf{position:relative;background:var(--schatten);color:#fff;}
  .e5kopf-bild{position:absolute;inset:0;background-image:var(--bild-e5kopf);
    background-size:cover;background-position:50% 52%;opacity:.5;}
  .e5kopf::after{content:"";position:absolute;inset:0;
    background:linear-gradient(to bottom,rgba(10,20,28,.55),rgba(10,20,28,.86));}
  .e5kopf-innen{position:relative;z-index:2;padding-block:124px 44px;}
  .e5kopf .brot{
    font-family:var(--daten);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    color:#AFC6D8;margin:0 0 14px;
  }
  .e5kopf .brot a{color:#DCE8F1;}
  .e5kopf h1{
    font-family:var(--anzeige);font-variation-settings:"wdth" 87;
    text-transform:uppercase;font-weight:700;
    font-size:clamp(28px,4.1vw,54px);line-height:1.02;letter-spacing:-.02em;
    margin:0;max-width:17ch;text-wrap:balance;
  }
  .e5kopf .unter{max-width:62ch;margin-top:18px;font-size:18px;line-height:1.55;color:#DCE8F1;}

  /* ============================================================
     Isolierte mobile Buehne, uebernommen von der abgenommenen
     Alpenueberquerung-Testvariante &#8212; gescoped auf html.mobil-buehne.
     .e5kopf ist ein einziges Bild-mit-Verlauf-Feld (kein separater
     Kasten wie .katfeld); das Bild ist dadurch bereits ohne weiteres
     Zutun immer sofort sichtbar. Ab 768px unveraendert. */
  @media (max-width:767px) and (orientation:portrait){
    html.mobil-buehne .e5kopf-innen{padding-inline:16px;min-height:340px;}
  }
  @media (orientation:landscape) and (max-height:520px){
    html.mobil-buehne .e5kopf{display:flex;align-items:stretch;}
    html.mobil-buehne .e5kopf-bild{
      position:static;flex:0 0 45%;width:45%;opacity:.7;
      background-size:cover;background-position:50% 50%;
    }
    html.mobil-buehne .e5kopf-innen{
      flex:1 1 55%;width:55%;
      display:flex;flex-direction:column;justify-content:flex-start;
      padding-block:96px 16px;padding-inline:16px;overflow-y:auto;
    }
  }

  /* Das H&#246;henprofil ist gezeichnet, nicht behauptet: alle Zahlen stammen
     aus den Etappenbeschreibungen der Tourseite. */
  .profil{margin-top:38px;}
  .profil .rollen{overflow-x:auto;}
  .profil svg{display:block;width:100%;min-width:760px;height:auto;}
  .p-flaeche{fill:rgba(255,255,255,.14);}
  .p-linie{fill:none;stroke:var(--orange);stroke-width:2.6;}
  .p-punkt{fill:var(--orange-hell);}
  .p-name{font-family:var(--anzeige);font-variation-settings:"wdth" 87;
    text-transform:uppercase;font-size:11px;font-weight:700;fill:#fff;}
  .p-hoehe{font-family:var(--daten);font-size:10.5px;fill:var(--orange-hell);}
  .p-tag{font-family:var(--daten);font-size:9.5px;letter-spacing:.12em;fill:#9FB6C6;}
  .p-achse{stroke:rgba(255,255,255,.2);stroke-width:1;}
  .profil figcaption{
    font-family:var(--daten);font-size:11.5px;color:#AFC6D8;
    margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.2);
  }

  /* ---------- Vergleichstabelle ---------- */
  .vgl-halter{border:2px solid var(--linie);background:#fff;}
  .vgl-rollen{overflow-x:auto;}
  table.vgl{border-collapse:collapse;width:100%;min-width:940px;}
  table.vgl th,table.vgl td{
    text-align:left;padding:13px 14px;border-bottom:1px solid var(--linie);
    font-size:14.5px;vertical-align:middle;
  }
  table.vgl thead th{
    font-family:var(--daten);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    color:#fff;background:var(--blau);font-weight:500;white-space:nowrap;
    position:sticky;top:0;z-index:2;
  }
  table.vgl tbody th{
    font-family:var(--anzeige);font-variation-settings:"wdth" 90;
    font-size:16.5px;font-weight:700;line-height:1.25;
    position:sticky;left:0;background:#fff;z-index:1;min-width:260px;
    border-right:1px solid var(--linie);
  }
  table.vgl tbody tr:hover th,table.vgl tbody tr:hover td{background:var(--kalk);}
  table.vgl tbody tr:hover th{background:var(--kalk);}
  table.vgl tbody th a{text-decoration:none;border-bottom:1.5px solid transparent;}
  table.vgl tbody th a:hover,table.vgl tbody th a:focus-visible{border-bottom-color:currentColor;}
  table.vgl tr.hervor th{color:var(--blau);}
  table.vgl tr.hervor{background:color-mix(in srgb,var(--orange) 7%,#fff);}
  table.vgl td.zahl{font-family:var(--daten);font-variant-numeric:tabular-nums;
    white-space:nowrap;}
  table.vgl td.preis{font-family:var(--daten);font-weight:700;font-size:16px;
    color:var(--orange-text);white-space:nowrap;font-variant-numeric:tabular-nums;}
  table.vgl td.offen{font-family:var(--daten);font-size:11.5px;color:#7C7873;}
  table.vgl tbody tr:last-child th,table.vgl tbody tr:last-child td{border-bottom:0;}
  .vgl-fuss{
    padding:14px 18px;border-top:2px solid var(--linie);
    font-family:var(--daten);font-size:12px;color:#56524E;line-height:1.6;
  }
  .marker{
    display:inline-block;font-family:var(--daten);font-size:10px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--orange-text);
    border:1px solid var(--orange-text);padding:2px 6px;margin-left:8px;
    vertical-align:2px;
  }

  /* ---------- Welche Variante passt zu wem ---------- */
  .passt{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie);}
  @media (min-width:820px){ .passt{grid-template-columns:1fr 1fr;} }
  .passt > div{background:#fff;padding:22px 24px;display:flex;flex-direction:column;gap:8px;}
  .passt .frage{
    font-family:var(--anzeige);font-variation-settings:"wdth" 90;
    font-size:18px;font-weight:700;line-height:1.3;color:var(--blau);margin:0;
  }
  .passt p{margin:0;font-size:15.5px;line-height:1.55;color:#3A3733;}
  .passt .tour{
    margin-top:auto;padding-top:12px;border-top:1px solid var(--linie);
    font-family:var(--daten);font-size:12.5px;
  }
  .passt .tour a{color:var(--orange-text);}

  /* ---------- Abschnitte ---------- */
  .e5block + .e5block{margin-top:56px;}
  .e5block > h2{
    font-family:var(--anzeige);font-variation-settings:"wdth" 87;text-transform:uppercase;
    font-weight:700;font-size:clamp(21px,2.5vw,30px);letter-spacing:-.012em;
    color:var(--blau);margin:0 0 4px;
  }
  .e5block > .unterzeile{
    font-family:var(--daten);font-size:12.5px;color:#56524E;margin:0 0 18px;
  }

  /* Platzhalter im Entwurf */
  a[data-platzhalter]:not(.tz){
    cursor:default;text-decoration:none;border-bottom:1.5px dashed var(--stein);
  }
  .e5kopf a[data-platzhalter]{border-bottom-color:rgba(255,255,255,.45);}


/* Shared PHP header, navigation and footer. */
body.wal2026-e5vergleich{margin:0;padding:0;background:var(--papier);font-family:var(--text);color:var(--schatten)}
body.wal2026-e5vergleich .e5kopf h1{color:#fff!important}
body.wal2026-e5vergleich .emotion .feld h2{color:#fff!important}
body.wal2026-e5vergleich .kopf nav .wal-menu{display:flex;align-items:center;gap:20px;margin:0;padding:0;list-style:none}
body.wal2026-e5vergleich .kopf nav .wal-menu li{margin:0;padding:0;list-style:none}
body.wal2026-e5vergleich .kopf nav .burger,body.wal2026-e5vergleich .kopf .wal-mobile{display:none}
body.wal2026-e5vergleich .fuss .wal-legal{margin-top:28px;border-top:1px solid #45515A;padding-top:20px;display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;font-size:13px}
body.wal2026-e5vergleich .fuss .wal-legal a,body.wal2026-e5vergleich footer.fuss ul.menu li a{color:#C9D2D8!important}
body.wal2026-e5vergleich .fuss .wal-legal nav{margin-left:auto}
body.wal2026-e5vergleich .fuss .wal-legal nav ul.menu{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px 20px;margin:0;padding:0;font-size:13px}
body.wal2026-e5vergleich .news-form .knopf{display:inline-flex}
body.wal2026-e5vergleich .wal-example-note{font-family:var(--daten);font-size:13px;color:#56524E;margin:8px 0 20px;max-width:80ch}
body.wal2026-e5vergleich .vgl a{color:var(--blau);text-decoration:underline}
body.wal2026-e5vergleich .vgl td.wal-current{font-family:var(--daten);font-size:12px;white-space:normal}
body.wal2026-e5vergleich .wal-example .tz-daten{display:flex;align-items:center;justify-content:flex-end;grid-template-columns:none;color:var(--blau);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
body.wal2026-e5vergleich .wal-example .tz-meta{display:block}
body.wal2026-e5vergleich .auftauchen{opacity:1!important;transform:none!important}
@media(max-width:1120px){body.wal2026-e5vergleich .kopf nav .wal-menu{display:none}body.wal2026-e5vergleich .kopf nav .burger{display:inline-flex}body.wal2026-e5vergleich .kopf .wal-mobile[aria-hidden="false"]{display:block;position:absolute;top:100%;left:0;right:0;background:var(--blau-tief);padding:20px 28px;box-shadow:0 14px 30px rgba(0,0,0,.2)}body.wal2026-e5vergleich .kopf .wal-mobile ul{margin:0;padding:0;list-style:none}body.wal2026-e5vergleich .kopf .wal-mobile li{margin:0;padding:0}body.wal2026-e5vergleich .kopf .wal-mobile a{display:block;padding:10px 0;color:white;text-decoration:none;font-family:var(--anzeige);text-transform:uppercase}}
@media(max-width:760px){body.wal2026-e5vergleich .fuss .wal-legal nav{margin-left:0;width:100%}}