darin). Der
Vertrag gilt trotzdem — 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 übernimmt der
Menü-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ält Blau und Grau und wäre auf dunklem Grund kaum lesbar. Es steht
deshalb immer auf einer hellen Platte — sauber rechteckig, wä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 — sonst überschreibt border-bottom hier die Unterkante
des Telefonrahmens, weil diese Regel die höhere Spezifitä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üpunkte tragen unten 5px Innenabstand plus 3px Unterkante; ihr Text sitzt
dadurch 4px über der Mittellinie. Der Rahmen ist symmetrisch und säße sonst tiefer.
Der Außenabstand unten hebt ihn auf dieselbe Höhe. */
.tel,.burger{margin-bottom:8px;}
.tel svg{width:15px;height:15px;fill:currentColor;}
/* Nur am Handy. Auf dem Desktop öffnen die Menüpunkte selbst das Overlay —
ein Menü, 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 —
das Menü 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ü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 — wie auf einem Wegweiser. Weiß 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 — 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) — 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 über jedem Abschnitt wä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öhere Spezifität als `.e5-text h2` — sonst gewinnt die Regel darü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ä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ü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ür Überschrift und Absatz (statt einer Zeile über
beide Spalten), damit die Formularspalte gezielt unter die
Überschrift gesetzt werden kann — nicht unter den ganzen Textblock.
Kein Row-Gap: der Abstand zwischen Ü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ält sonst seinen UA-Default-Bottom-Margin — der würde die Zeile
unter die sichtbare Textkante hinaus verlä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ündig mit der Unterkante von „Erfahre es zuerst“.
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ätzlich
soll die Formularzeile (.nf) für sich mit ihrer Oberkante an die
sichtbare Versalien-Oberkante heranreichen, nicht an die tiefer
liegende h2-Zeilenbox — dafür .nf per transform angehoben: transform
verändert die visuelle Position, ohne den Dokumentfluss zu
beeinflussen, sodass .nk unten unverändert an seiner Stelle bleibt.
Die Spaltenbreite (und damit die Zeilenzahl des linken Absatzes) ä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 —
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ößeren Default-Bottom-Margin hat
(17.5px) als der Hinweis (12px) und beide Blöcke optisch unten bündig
wirken sollen. Eigener transform auf .nk (statt auf .news-form), damit
weder .nf noch der linke Text (.news-text) mitbewegt werden — 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über unverändert, der linke Absatz bricht dann nur noch auf zwei statt
drei Zeilen um und wird dadurch kürzer — die Formularspalte muss
entsprechend weiter angehoben werden, damit .nf weiterhin bündig mit der
Versalien-Oberkante der Überschrift abschließ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ß ---------- */
.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ücklich auf null: der Browser setzt bei ul sonst 40px
Innenabstand links, wodurch die Links gegenüber der Überschrift eingerü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ü zeigt Angebot, Preis und freie Plätze.
Wer es öffnet, sieht sofort, was buchbar ist — und kann von dort anfragen. */
/* Öffnet über :target, also ohne JavaScript. Das Skript verbessert danach nur noch
(kein Sprung in der Adresszeile, Escape, Fokus) — 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 Öffnen muss visibility sofort wechseln: Sonst kann das Skript den
Schließen-Link wä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ö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ä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ätzlich sichtbar. Erst wenn das Skript lä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 ----------
Überschriften laufen über die volle Breite, der Fließtext steht in zwei Spalten.
Ein `ch`-Maß auf dem Elternelement würde auch die Überschrift auf Fließtextbreite
zwingen — deshalb bekommt jede Ebene ihr eigenes Maß. */
.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 ü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;}
}
/* ============================================================
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 — 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;}
/* ============================================================
Bauteil Haeufige Fragen. Wird von der Kategorieseite und von der
E5-Vergleichsseite benutzt — eine Definition fuer beide.
============================================================ */
/* ---------- Hä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;} }
/* Zusaetzliche Bildvariablen, die nur redaktionelle Inhaltsseiten
brauchen. --bild-hero, --bild-r1/r2/r3 kommen bereits aus _stil.html. */
:root{
--bild-weg:url('/wp-content/themes/the7-child/assets/img/26d763ec70d1.jpg');
--bild-lead:url('/wp-content/themes/the7-child/assets/img/eaf8f1ada5ce.jpg');
--bild-plan2:url('/wp-content/themes/the7-child/assets/img/1b8cccb03efb.jpg');
--bild-plan3:url('/wp-content/themes/the7-child/assets/img/3af4848a7814.jpg');
--bild-trinkwasser:url('/wp-content/themes/the7-child/assets/img/e52b88dff4ef.jpg');
--bild-wegebau:url('/wp-content/themes/the7-child/assets/img/26d763ec70d1.jpg');
--bild-carmen:url('/wp-content/themes/the7-child/assets/img/fe9fca07ed08.jpg');
--bild-feierabend:url('/wp-content/themes/the7-child/assets/img/e60a3af3761e.jpg');
}
/* ============================================================
Bauteile fuer redaktionelle Inhaltsseiten (Information, Ratgeber,
Ueber uns, Blog). Ergaenzt die Basis aus _stil.html um: Brotkruemel,
mitlaufende Sprungmarken (Kopie des Musters von der Tourseite, damit
_stil_tour.html unangetastet bleibt), den zweispaltigen Leserahmen,
die kartenfreie Wissensliste und die Aufmacher-/Zeilenbauteile des
Blogs. Wiederverwendet ohne Aenderung: .fliess, .mass, .bieten,
.oeko, .gutzuwissen, .stimmen/.st, .tz-stufe, .blockkopf, .partner,
.emotion, .faq (eigene Datei) — keine Dopplung dieser Definitionen.
============================================================ */
/* ---------- Brotkruemel ---------- */
.krume-band{background:var(--papier);border-bottom:1px solid var(--linie);}
.krume{
list-style:none;display:flex;flex-wrap:wrap;margin:0;padding:13px 0;
font-family:var(--daten);font-size:12.5px;color:#56524E;
}
.krume li{display:flex;align-items:center;}
.krume li:not(:last-child)::after{content:"/";margin:0 9px;color:var(--stein);}
.krume a{color:#56524E;text-decoration:none;border-bottom:1px solid transparent;}
.krume a:hover{color:var(--blau);border-bottom-color:var(--blau);}
.krume li[aria-current="page"]{color:var(--schatten);font-weight:700;}
/* ---------- Sprungmarken, mitlaufend ----------
Gleiche Definition wie auf der Tourseite (teile/_stil_tour.html), hier
dupliziert statt importiert, damit der bestehende Tourbau unangetastet
bleibt. Bei einer Zusammenlegung gehoert das in eine gemeinsame Datei. */
.sprungband{
position:sticky;top:0;z-index:30;background:var(--papier);
border-bottom:2px solid var(--linie);
}
.sprungband ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;overflow-x:auto;}
.sprungband a{
display:block;padding:14px 16px;text-decoration:none;white-space:nowrap;
font-family:var(--daten);font-size:13px;color:#4C4945;
border-bottom:3px solid transparent;
}
.sprungband a:hover{color:var(--blau);border-bottom-color:var(--linie);}
.sprungband a.aktiv{color:var(--blau);border-bottom-color:var(--orange);}
/* ---------- Leserahmen: Fliesstext plus Randspalte ----------
Die Randspalte haftet unterhalb der Sprungleiste, nicht am Fensterrand —
sonst ueberlappt sie beim Hochscrollen die Leiste. */
.leserahmen{display:grid;gap:48px;align-items:start;}
@media(min-width:960px){.leserahmen{grid-template-columns:1fr 320px;}}
.leserahmen-rand{display:flex;flex-direction:column;gap:26px;}
@media(min-width:960px){.leserahmen-rand{position:sticky;top:66px;}}
.randbox{border:2px solid var(--linie);background:#fff;padding:22px 24px;}
.randbox h3{font-size:16px;margin:0 0 12px;}
.randbox ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.randbox li{font-size:14.5px;line-height:1.4;}
.randbox a{color:var(--blau);text-decoration:none;border-bottom:1px solid var(--linie);}
.randbox a:hover{border-bottom-color:var(--blau);}
.randbox .rk{font-family:var(--daten);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6E6A66;display:block;margin-bottom:2px;}
/* ---------- Wissensliste: Fahrplan fuer Themen statt Kachelraster ----------
Bewusst keine Kachel: dieselbe Zeilenlogik wie .tz und .ovl-rest, damit
lange Themenlisten lesbar bleiben statt in gleichfoermigen Kacheln zu
verschwimmen. */
.wissensgruppe{scroll-margin-top:64px;}
.wissensgruppe + .wissensgruppe{margin-top:72px;}
.wissensgruppe-note{color:#4C4945;margin:10px 0 28px;max-width:70ch;}
.wissensliste{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie);}
.wissenspunkt{
display:grid;grid-template-columns:1fr;gap:6px;
padding:22px 0;border-bottom:1px solid var(--linie);
}
@media(min-width:760px){
.wissenspunkt{grid-template-columns:300px 1fr;gap:30px;align-items:baseline;}
}
.wp-titel{
display:inline-flex;align-items:baseline;gap:9px;
font-family:var(--anzeige);font-variation-settings:"wdth" 90;
font-size:19px;font-weight:700;line-height:1.2;color:inherit;text-decoration:none;
}
a.wp-titel:hover{color:var(--blau);}
.wp-titel .pf{font-family:var(--daten);font-size:14px;color:var(--orange-text);}
.wp-text{margin:0;max-width:62ch;color:#3A3733;font-size:15.5px;line-height:1.55;}
.wp-text .wp-ziel{
display:inline-block;margin-top:8px;font-family:var(--daten);font-size:11.5px;
color:var(--orange-text);font-weight:700;
}
.wp-text a.wp-inline{color:var(--blau);text-decoration:underline;}
/* ---------- Hinkommen, vier Felder ----------
Gleiche Definition wie auf der Tourseite (dort .hin4) — hier dupliziert,
da die Informationsseite die Tourseiten-Stildatei nicht laedt. */
.hin4{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie);}
@media (min-width:640px){ .hin4{grid-template-columns:1fr 1fr;} }
.hin4 > div{background:#fff;padding:22px 24px;}
.hin4 h3{margin-bottom:8px;}
.hin4 p{font-size:15.5px;color:#3A3733;margin:0 0 10px;}
.hin4 a{font-family:var(--daten);font-size:12.5px;color:var(--orange-text);}
/* ---------- Balkenerklaerung Kondition/Technik ----------
Nutzt dieselben .tz-stufe/.bs-Regeln aus der Basisdatei, hier nur der
erklaerende Rahmen dazu. */
.stufenerklaerung{display:flex;flex-direction:column;gap:18px;margin:26px 0;}
.stufenzeile{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.stufenzeile .stufenlabel{font-family:var(--daten);font-size:13px;color:#4C4945;min-width:15ch;}
.stufenzeile .bs{display:inline-flex;gap:3px;}
.stufenzeile .bs i{width:20px;height:9px;background:var(--linie);display:block;}
.stufenzeile .bs i.an{background:var(--blau);}
.stufenzeile.tech .bs i.an{background:var(--cyan);}
/* ---------- Blog: Aufmacher ----------
Gleiche Grammatik wie der E5-Aufmacher (.e5) auf der Kategorieseite —
grosses Bild, blaues Textfeld — hier unter eigenem Namen fuer den Blog. */
.leit{display:grid;gap:0;margin-bottom:8px;}
@media(min-width:900px){.leit{grid-template-columns:1.15fr .85fr;}}
.leit-bild{min-height:300px;background-size:cover;background-position:50% 48%;}
.leit-text{
background:var(--blau);color:#fff;padding:50px 46px;
display:flex;flex-direction:column;justify-content:center;gap:16px;
}
.leit-kicker{
font-family:var(--daten);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
color:var(--orange-hell);
}
.leit-text h2{color:#fff;font-size:clamp(27px,3.6vw,42px);margin:0;}
.leit-text p{color:#D5E6F1;max-width:54ch;margin:0;font-size:16.5px;}
.leit-text .knopf{align-self:flex-start;margin-top:6px;}
@media(max-width:560px){.leit-text{padding:32px 26px;}}
/* ---------- Blog: Themenzeile statt Kachelraster ---------- */
.blogliste{list-style:none;margin:0;padding:0;}
.blogzeile{
display:grid;grid-template-columns:128px 1fr;gap:22px;
padding:22px 0;border-bottom:1px solid var(--linie);
text-decoration:none;color:inherit;
}
.blogzeile:hover .bz-titel{color:var(--blau);}
.blogzeile:focus-visible{outline:3px solid var(--orange-text);outline-offset:3px;}
.bz-bild{width:128px;height:92px;background-size:cover;background-position:50% 50%;flex:none;}
/* .bz-titel/.bz-text sind , damit .blogzeile insgesamt ein bleibt
(Bild + Text in einem Klickbereich) — ohne display:block liefe der
Anrisstext sonst inline hinter dem Titel weiter statt in eigener Zeile. */
.bz-titel{
display:block;
font-family:var(--anzeige);font-variation-settings:"wdth" 90;
font-size:19.5px;font-weight:700;line-height:1.25;margin:0 0 7px;
}
.bz-text{display:block;font-size:15px;color:#3A3733;margin:0;max-width:64ch;line-height:1.5;}
@media(max-width:640px){
.blogzeile{grid-template-columns:84px 1fr;gap:14px;}
.bz-bild{width:84px;height:60px;}
.bz-titel{font-size:17px;}
}
/* ---------- Themenblock im Blog: nutzt .blockkopf aus der Basisdatei ---------- */
.themengruppe{scroll-margin-top:64px;}
.themengruppe + .themengruppe{margin-top:60px;}
.themennote{color:#4C4945;margin:12px 0 6px;max-width:70ch;}
/* ---------- Mittig zentrierte CTA-Flaeche (z. B. "Lieber direkt
sprechen?" oder ein Schluss-Link wie "Zur Information") ----------
Als Flex-Spalte statt ueber text-align + margin-inline:auto auf
einzelnen Kindern: so haengt der Knopf als eigenes Flex-Element an
derselben Mitte wie Ueberschrift und Fliesstext, unabhaengig davon,
ob er ein oder ist. .kontakt-cta ist der urspruengliche Name
fuer die Telefon-CTA; .cta-mitte ist der allgemeine Alias fuer jede
sonstige zentrierte Schluss-CTA mit demselben Aufbau. */
.kontakt-cta,
.cta-mitte{
display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;
}
.kontakt-cta h2,
.cta-mitte h2{margin:0;}
.kontakt-cta .mass,
.cta-mitte .mass{margin-inline:auto;}
.kontakt-cta .knopf,
.cta-mitte .knopf{margin:0;}
/* Approved blog layout with shared WordPress navigation and footer. */
body.wal2026-blog{margin:0;padding:0;background:var(--papier);font-family:var(--text);color:var(--schatten)}
body.wal2026-blog .feld h1{color:#fff!important}
body.wal2026-blog .kopf nav .wal-menu{display:flex;align-items:center;gap:20px;margin:0;padding:0;list-style:none}
body.wal2026-blog .kopf nav .wal-menu li{margin:0;padding:0;list-style:none}
body.wal2026-blog .kopf nav .burger,body.wal2026-blog .kopf .wal-mobile{display:none}
body.wal2026-blog .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-blog .fuss .wal-legal a,body.wal2026-blog footer.fuss ul.menu li a{color:#C9D2D8!important}
body.wal2026-blog .fuss .wal-legal nav{margin-left:auto}
body.wal2026-blog .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-blog .news-form .knopf{display:inline-flex}
body.wal2026-blog .auftauchen{opacity:1!important;transform:none!important}
body.wal2026-blog .themennote,body.wal2026-blog .bz-text,body.wal2026-blog .leit-text p{font-size:17.5px;line-height:1.6}
body.wal2026-blog :is(#leitartikel,#vorbereitung-planung,#sicherheit-unterwegs,#wegepflege-nachhaltigkeit,#tourenberichte-erlebnisse){scroll-margin-top:64px}
body.wal2026-blog .blogzeile:focus-visible,body.wal2026-blog .leit:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
@media(max-width:1120px){body.wal2026-blog .kopf nav .wal-menu{display:none}body.wal2026-blog .kopf nav .burger{display:inline-flex}body.wal2026-blog .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-blog .kopf .wal-mobile ul{margin:0;padding:0;list-style:none}body.wal2026-blog .kopf .wal-mobile li{margin:0;padding:0}body.wal2026-blog .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-blog .fuss .wal-legal nav{margin-left:0;width:100%}}
@media(orientation:landscape) and (max-height:520px){body.wal2026-blog .buehne-marke{display:none}}