/* ==========================================================================
   Sport Strobl — Entwurf B
   Folgt Pepis drei Referenzseiten: bruendl.at (Kopf mit festem Verleih-Block,
   Vollbild-Hero, dunkle Text-Bild-Tafeln, Vorteile, Kacheln), glanzer.at (drei
   Farbspalten mit Bildern in Stadionform) und strolz.at (Höhenlinien, Standortkarten,
   ruhige Flächen). Rot aus Pepis Logo nur für Buchung und Handlung; alles andere in der
   Farbfamilie von Pepi's Suites und Pepi's Landhaus (warmes Schwarz, Sand, Gold, Braun).
   Seit 14.10.2026 ist die ganze Seite dunkel, in der Art von pepis-landhaus.com (Pepis Layer-Punkt vom
   13.10.2026: „Ganze Seite Dunkel, so wie Pepis Landhaus"): fast schwarzer Grund, helle Schrift, Gold als Akzent.
   Schrift: Figtree, lokal gehostet. Klassen-Präfix: b-
   ========================================================================== */

/* Figtree (SIL Open Font License), lokal gehostet: keine Verbindung zu Google */
@font-face { font-family: Figtree; font-style: italic; font-weight: 300 900; font-display: swap; src: url(/assets/fonts/figtree-kursiv-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Figtree; font-style: italic; font-weight: 300 900; font-display: swap; src: url(/assets/fonts/figtree-kursiv-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Figtree; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/assets/fonts/figtree-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Figtree; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/assets/fonts/figtree-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Fraunces (SIL Open Font License), lokal gehostet: die Schrift von pepis-landhaus.com. Sie steht hier nur
   dort, wo die beiden Häuser auftreten (Spalten, Übernachten, Familienleiste). */
@font-face { font-family: Fraunces; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/assets/fonts/fraunces-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Dunkel ist der Normalfall. Drei Stufen tragen die Gliederung, weil Schatten auf Schwarz nicht zu sehen sind:
   Grund (--papier), ruhige Bänder (--stein), angehobene Tafeln und Karten (--fels, --karte). */
:root {
    color-scheme: dark;                    /* Felder, Datumswähler und Rollbalken des Browsers in dunkler Fassung */
    --rot: oklch(0.565 0.232 26.5);        /* Strobl-Rot, #E2001A: Buchung und Handlung */
    --rot-tief: oklch(0.47 0.2 26.5);      /* Hover der roten Flächen */
    --rot-schrift: oklch(0.66 0.2 26.5);   /* rote Schrift auf dunklem Grund (Links, Hover, Fehler), 5,8:1; das Logo-Rot käme nur auf 3,9:1 */
    /* Farbfamilie von Pepi's Suites und Pepi's Landhaus (Pepi, 06.10.2026: „damit man weiß, dass alles
       zusammen gehört"). Suites: #232323, #e9dbb7, #784c0f. Landhaus: #0a0a0a, #bb9c50, #8b6438. */
    --fels: oklch(0.22 0.005 90);          /* angehobene Fläche, #1b1a18: Tafeln, Gruppenanfrage, Fußzeile */
    --fels-2: oklch(0.275 0.006 90);
    --tinte: oklch(0.95 0.008 85);         /* Text, #f1eee9: 17:1 auf dem Grund, 15:1 auf den Tafeln */
    --tinte-dunkel: oklch(0.225 0.005 95); /* dunkle Schrift auf hellen Flächen (weiße Knöpfe, Marken, Gold) */
    --grau: oklch(0.72 0.012 85);          /* Nebentext, #a8a49c: 8:1 auf dem Grund, 7:1 auf den Tafeln */
    --papier: oklch(0.145 0.002 90);       /* Grund der Seite, #0a0a09: das fast Schwarz von pepis-landhaus.com */
    --stein: oklch(0.185 0.004 88);        /* ruhige Bänder, #131311: Meta-Leiste, Vorteile, Shop, Bewertungen */
    --stein-2: oklch(0.24 0.006 88);
    --linie: oklch(0.28 0.005 88);         /* feine Trennlinien */
    --linie-2: oklch(0.37 0.008 88);       /* kräftigere Trennlinien */
    --linie-3: oklch(0.53 0.01 88);        /* Linien, die etwas bedeuten (Feldrand, Unterstreichung, runde Knöpfe): mindestens 3:1 */
    --sand: oklch(0.894 0.05 89);          /* Sand der Suites, #e9dbb7 */
    --holz: oklch(0.705 0.102 87);         /* Gold des Landhauses, #bb9c50: 7,5:1 auf dem Grund */
    --holz-tief: oklch(0.534 0.078 68);    /* tiefes Gold des Landhauses, #8b6438: Punkte */
    --braun: oklch(0.456 0.093 69);        /* Braun der Suites, #784c0f: Schrift auf hellem Grund */
    --gruen: oklch(0.6 0.16 150);
    --suites: oklch(0.273 0.026 291);       /* Anthrazit von pepissuites.com, #272533 */
    --nacht: var(--papier);                /* fast Schwarz von pepis-landhaus.com: jetzt der Grund der ganzen Seite */
    --hell: oklch(0.954 0.013 82);         /* helle Schrift auf den dunklen Flächen der Häuser */
    --serif: Fraunces, Georgia, "Times New Roman", serif;
    --ueber: var(--holz);                  /* Überzeilen und die Schrift der Shop-Spalte: Gold wie beim Landhaus */
    --welt-bleiben: var(--sand);           /* Spalte „Übernachten" */

    /* Rollen, die sich zwischen dunkel und hell nicht aus den Farben oben ergeben */
    --karte: var(--fels);                  /* Karten: Verleih-Schiene, Ware, Bewertungen, Anmeldung */
    --feld: var(--papier);                 /* Eingabefelder: dunkel eingelassen, heller Rand */
    --feld-linie: var(--linie-3);
    --knopf: var(--tinte);                 /* neutraler voller Knopf („Route planen", Telefon in der Lade): hell auf dunkler Seite */
    --knopf-hover: var(--sand);
    --auf-tinte: var(--tinte-dunkel);      /* Schrift auf Flächen in Tintenfarbe und auf dem neutralen Knopf */
    --schleier: oklch(0 0 0 / .72);        /* Abdunklung hinter den Laden */
    --lade-kante: var(--linie-2);          /* feine Linie an der Kante der Laden, sonst verschwimmt Schwarz auf Schwarz */
    --tafel-kante: var(--linie);           /* feine Linie um die angehobenen Tafeln */
    --zeichen-grund: transparent;          /* das dunkle Strobl-Logo braucht in der Familienleiste kein weißes Schild */
    --hoehenlinie: oklch(0.62 0.09 80);    /* Höhenlinien des Lechtals: zwischen den beiden Goldtönen, so ruhig wie vorher auf Hell (1,6:1) */

    --breite: 1320px;
    --rand: clamp(20px, 4.5vw, 64px);
    --meta: 44px;
    --bar: 80px;
    --ease: cubic-bezier(.22, 1, .36, 1);

    /* Barrierefreiheits-Widget des CMS liest diese beiden Farben. Auf Schwarz das Logo-Rot: das tiefe Rot
       von früher käme als Knopf unten links nur auf 2,7:1. */
    --primary: var(--rot);
    --primary-dark: var(--rot-tief);
}

/* Vergleich für die Abstimmung: ?farbe=hell zeigt die Seite hell wie vor dem 14.10.2026 (dann gibt head.php
   data-farbwelt="hell" aus und b_logo_strobl() das Logo mit schwarzer Schrift). Hier stehen nur Farben:
   jede Regel unten liest Variablen und gilt für beide Farbwelten. */
html[data-farbwelt="hell"] {
    color-scheme: light;
    --rot-schrift: var(--rot-tief);
    --fels: oklch(0.23 0.005 95); --fels-2: oklch(0.31 0.007 95); --tinte: oklch(0.225 0.005 95); --grau: oklch(0.44 0.012 80);
    --papier: oklch(0.99 0.003 88); --stein: oklch(0.962 0.008 88); --stein-2: oklch(0.925 0.014 88);
    --linie: oklch(0.9 0.012 88); --linie-2: oklch(0.82 0.016 88); --linie-3: var(--linie-2);
    --nacht: oklch(0.178 0.004 85); --ueber: var(--braun);
    --karte: var(--papier); --feld: var(--papier); --feld-linie: transparent;
    --knopf: var(--fels); --knopf-hover: var(--fels-2); --auf-tinte: #fff;
    --schleier: oklch(0.18 0.012 250 / .58); --lade-kante: transparent; --tafel-kante: transparent;
    --zeichen-grund: #fff; --hoehenlinie: var(--holz-tief);
    --primary: oklch(0.47 0.2 26.5); --primary-dark: oklch(0.38 0.17 26.5);
}

/* ---------- Grundlage ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 20px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
html.b-lade-offen { overflow: hidden; }
[hidden] { display: none !important; }
body { margin: 0; font-family: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 1.0625rem; line-height: 1.6; color: var(--tinte); background: var(--papier); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--bar) + 20px); }

/* Jahreszeit: ausgeblendet wird, was zur anderen Jahreszeit gehört */
html[data-season="winter"] [data-season-only="summer"],
html[data-season="summer"] [data-season-only="winter"] { display: none !important; }

.b-wrap { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.b-sprung { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 16px; border-radius: 4px; background: var(--tinte); color: var(--auf-tinte); font-weight: 700; }
.b-sprung:focus { top: 12px; }

/* ---------- Schrift ---------- */
.b-ueber { margin-bottom: 14px; font-size: .8125rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ueber); }
.b-h2 { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem); font-weight: 800; line-height: 1.12; letter-spacing: -.012em; text-wrap: balance; }
.b-lede { font-size: 1.125rem; }
.b-abschnitt { padding-block: clamp(72px, 9vw, 128px); }
.b-abschnitt p { max-width: 68ch; }
.b-fussnote { margin-top: 18px; font-size: .875rem; color: var(--grau); }
.b-hinweis { font-size: .875rem; color: var(--grau); }
.b-merk { font-weight: 700; }
.b-mitte { max-width: 720px; margin-inline: auto; text-align: center; }

/* ---------- Knöpfe und Links ---------- */
.b-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 4px; font-size: .9375rem; font-weight: 700; line-height: 1.2; text-decoration: none; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.b-btn:active { transform: translateY(1px); }
.b-btn--gross { min-height: 54px; padding: 0 28px; font-size: 1rem; }
.b-btn--block { width: 100%; }
.b-btn--rot { background: var(--rot); color: #fff; }
.b-btn--rot:hover { background: var(--rot-tief); }
/* Der neutrale volle Knopf ist auf der dunklen Seite hell (wie „Buchen" beim Landhaus), im hellen Vergleich dunkel */
.b-btn--dunkel { background: var(--knopf); color: var(--auf-tinte); }
.b-btn--dunkel:hover { background: var(--knopf-hover); }
.b-btn--linie { border: 1.5px solid currentColor; }
.b-btn--linie:hover { background: var(--tinte); border-color: var(--tinte); color: var(--auf-tinte); }
.b-btn--hell { border: 1.5px solid rgba(255, 255, 255, .85); color: #fff; }
.b-btn--hell:hover { background: #fff; border-color: #fff; color: var(--tinte-dunkel); }
.b-btn--hellvoll { background: #fff; color: var(--tinte-dunkel); }
.b-btn--hellvoll:hover { background: var(--sand); }
button.b-btn { cursor: pointer; }

.b-pfeillink { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: .9375rem; font-weight: 700; text-decoration: none; }
.b-pfeillink__kreis { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border: 1.5px solid currentColor; border-radius: 50%; transition: background .25s, border-color .25s, color .25s, transform .4s var(--ease); }
.b-pfeillink:hover .b-pfeillink__kreis { background: var(--rot); border-color: var(--rot); color: #fff; transform: translateX(4px); }
.b-pfeillink--hell { color: #fff; }
.b-linkreihe { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 26px; }
.b-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }

.b-rund { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 50%; background: oklch(0.2 0.012 250 / .45); color: #fff; text-decoration: none; transition: background .2s, color .2s, border-color .2s, opacity .2s; }
.b-rund:hover { background: oklch(0.2 0.012 250 / .78); }
.b-rund--linie { border-color: var(--linie-3); background: transparent; color: var(--tinte); }
.b-rund--linie:hover { background: var(--tinte); border-color: var(--tinte); color: var(--auf-tinte); }
.b-rund[disabled] { opacity: .35; pointer-events: none; }
.b-rund__play { display: none; }
.b-rund[aria-pressed="true"] .b-rund__play { display: block; }
.b-rund[aria-pressed="true"] .b-rund__pause { display: none; }

.b-status { display: inline-flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 700; }
.b-status__punkt { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--holz-tief); }

/* ---------- Kopf ---------- */
.b-header { position: sticky; top: 0; z-index: 60; background: var(--papier); transition: transform .45s var(--ease), box-shadow .3s; }
.b-header.is-kompakt { transform: translateY(calc(var(--meta) * -1)); box-shadow: 0 12px 32px -24px oklch(0.2 0.02 250 / .6); }

.b-meta { height: var(--meta); background: var(--stein); font-size: .8125rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.b-meta__inner { display: flex; align-items: stretch; height: 100%; padding-inline: clamp(8px, 1.4vw, 20px) clamp(16px, 2.2vw, 32px); }
/* Links wie die Reiter „Bründl Sports / Rent online": Online Shop, Rent online, Pepi's Suites */
.b-meta__marken { display: flex; align-items: stretch; gap: 2px; margin-right: auto; }
.b-meta__marken a { display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 14px; font-weight: 800; text-decoration: none; white-space: nowrap; transition: color .2s; }
.b-meta__marken a:hover { color: var(--rot-schrift); }
.b-meta__marken svg { flex: none; }
.b-tabs { display: flex; gap: 2px; }
.b-meta .b-tabs { margin-right: clamp(10px, 1.6vw, 24px); }
.b-tabs__tab { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-block: 2px solid transparent; font-weight: 800; text-transform: inherit; color: var(--grau); transition: color .2s, border-color .2s; }
.b-tabs__tab:hover { color: var(--tinte); }
.b-tabs__tab[aria-pressed="true"] { color: var(--tinte); border-bottom-color: var(--tinte); }
.b-meta__links { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.b-meta__links li { display: flex; align-items: center; }
.b-meta__links a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.b-meta__links a:hover { color: var(--rot-schrift); }
.b-lang { display: flex; align-items: center; gap: 6px; color: var(--grau); }
.b-lang a { color: var(--grau); }
.b-lang a.is-aktiv { color: var(--tinte); }

.b-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; height: var(--bar); border-bottom: 1px solid var(--linie); background: var(--papier); }
.b-menubtn { display: inline-flex; align-items: center; justify-self: start; gap: 12px; padding: 0 clamp(16px, 2.2vw, 32px); font-size: .875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: color .2s; }
.b-menubtn:hover { color: var(--rot-schrift); }
.b-logo { display: flex; align-items: center; padding: 0 12px; }
.b-logo img { width: auto; height: 58px; }
.b-bar__rechts { display: flex; align-items: stretch; justify-self: end; }
.b-claim { display: none; align-items: center; padding-right: 26px; font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.b-rent { display: flex; align-items: center; gap: 10px; padding: 0 clamp(18px, 2.2vw, 30px); background: var(--rot); color: #fff; font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .2s; }
.b-rent:hover { background: var(--rot-tief); }
.b-rent__kurz, .b-kachel { display: none; }

/* ---------- Menü (Lade von links) ---------- */
.b-menu { position: fixed; inset: 0; z-index: 10000; visibility: hidden; transition: visibility 0s .5s; }
.b-menu.is-offen { visibility: visible; transition-delay: 0s; }
.b-menu__grund { position: absolute; inset: 0; background: var(--schleier); opacity: 0; transition: opacity .4s; }
.b-menu.is-offen .b-menu__grund { opacity: 1; }
.b-menu__tafel { --innen: clamp(20px, 3vw, 36px); position: absolute; inset: 0 auto 0 0; display: flex; flex-direction: column; gap: 28px; width: min(460px, 100%); padding: 0 var(--innen) 36px; overflow-y: auto; background: var(--papier); box-shadow: 0 0 0 1px var(--lade-kante); transform: translateX(-102%); transition: transform .5s var(--ease); }
.b-menu.is-offen .b-menu__tafel { transform: none; }
.b-menu__kopf { display: flex; align-items: center; justify-content: space-between; flex: none; height: var(--bar); margin-inline: calc(var(--innen) * -1); padding-inline: var(--innen); border-bottom: 1px solid var(--linie); font-size: .875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.b-menu__zu { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; }
.b-menu__liste a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linie); font-size: 1.375rem; font-weight: 700; text-decoration: none; }
.b-menu__liste a svg { color: var(--rot); transition: transform .35s var(--ease); }
.b-menu__liste a:hover svg { transform: translateX(6px); }
.b-menu__info { display: grid; gap: 14px; font-size: .9375rem; }
.b-menu__info dt { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
.b-menu__sprache { display: flex; gap: 8px; font-size: .9375rem; font-weight: 700; color: var(--grau); }
.b-menu__sprache { align-items: center; }
.b-menu__sprache a { display: inline-flex; align-items: center; min-height: 44px; color: var(--grau); text-decoration: none; }
.b-menu__sprache a.is-aktiv { color: var(--tinte); text-decoration: underline; }

/* ---------- Hero ---------- */
.b-hero { position: relative; background: var(--fels); color: #fff; }
.b-hero__bild { position: relative; display: grid; grid-template-rows: 1fr auto; min-height: clamp(560px, calc(100svh - var(--meta) - var(--bar)), 880px); }
.b-hero__medien { position: absolute; inset: 0; overflow: hidden; }
.b-hero__medien img, .b-hero__medien video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b-hero__medien video { opacity: 0; transition: opacity 1s; }
.b-hero__medien video.is-da { opacity: 1; }
.b-hero__schatten { position: absolute; inset: 0; background: linear-gradient(to top, oklch(0.16 0.015 250 / .84) 0%, oklch(0.16 0.015 250 / .42) 36%, oklch(0.16 0.015 250 / 0) 66%), linear-gradient(to right, oklch(0.16 0.015 250 / .42), oklch(0.16 0.015 250 / 0) 60%); }
.b-hero__inhalt { position: relative; align-self: end; padding-block: 120px clamp(36px, 6vh, 64px); }
.b-tabs--hero { display: none; }
.b-hero__titel { font-size: clamp(2.25rem, 1rem + 5.2vw, 4.75rem); font-weight: 900; line-height: .98; letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
.b-hero__text { max-width: 46ch; margin-top: 18px; font-size: clamp(1.0625rem, .95rem + .5vw, 1.3125rem); line-height: 1.5; }
.b-hero__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 28px; }
.b-hero__haken { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px clamp(24px, 5vw, 72px); padding: 16px var(--rand); border-top: 1px solid rgba(255, 255, 255, .16); background: oklch(0.16 0.015 250 / .62); font-size: .9375rem; font-weight: 700; }
.b-hero__haken li { display: inline-flex; align-items: center; gap: 10px; }
.b-hero__haken svg { flex: none; stroke-width: 2.2; }
.b-hero__steuerung { position: absolute; right: max(var(--rand), 78px); bottom: 86px; z-index: 2; display: flex; gap: 12px; }

/* ---------- Drei Welten (Glanzer) ---------- */
.b-welten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.b-welt { display: grid; grid-template-rows: auto 1fr auto; gap: clamp(24px, 3vw, 40px); min-height: clamp(600px, 50vw, 760px); padding: clamp(24px, 2.6vw, 40px) clamp(22px, 3.2vw, 52px) clamp(40px, 4.5vw, 72px); text-decoration: none; }
.b-welt--shop { background: var(--stein-2); color: var(--ueber); }
.b-welt--verleih { background: var(--rot); color: #fff; }
.b-welt--bleiben { background: var(--welt-bleiben); color: var(--tinte-dunkel); }
/* Die beiden Häuser in ihren eigenen Farben und mit ihrem Zeichen */
.b-welt--suites { background: var(--suites); color: var(--sand); }
.b-welt--landhaus { background: var(--nacht); color: var(--hell); }
.b-welt--landhaus .b-welt__marke { color: var(--holz); }
.b-welt__marke { font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.b-welt--shop .b-welt__marke { color: var(--tinte); }
.b-welt__bild { align-self: center; justify-self: center; width: min(250px, 64%); aspect-ratio: 4 / 7; overflow: hidden; border-radius: 999px; background: rgba(0, 0, 0, .08); }
.b-welt__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.b-welt__bild--rechts img { object-position: 78% 50%; }
.b-welt__bild--links img { object-position: 30% 50%; }
.b-welt:hover .b-welt__bild img { transform: scale(1.06); }
.b-welt__titel { display: block; font-size: clamp(1.5rem, .5rem + 1.75vw, 2.375rem); font-weight: 800; line-height: 1.1; letter-spacing: -.012em; text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .16em; hyphens: auto; overflow-wrap: anywhere; }
.b-welt__zeile { display: inline-flex; align-items: center; gap: .35em; margin-top: .5em; font-size: clamp(1.0625rem, .7rem + .85vw, 1.5rem); font-weight: 300; line-height: 1.2; }
.b-welt__zeile svg { flex: none; transition: transform .4s var(--ease); }
.b-welt:hover .b-welt__zeile svg { transform: translateX(8px); }

.b-welt .b-zeichen { display: flex; }
.b-welt .b-zeichen--suites img { height: clamp(58px, 2rem + 2.6vw, 84px); }
.b-welt .b-zeichen--landhaus { font-size: clamp(1.375rem, .6rem + 1.45vw, 2.125rem); }

/* ---------- Zeichen der Häuser: Logo von Pepi's Suites, Monogramm und Schriftzug von Pepi's Landhaus ---------- */
.b-zeichen { display: inline-flex; align-items: center; }
.b-zeichen--suites img { width: auto; height: 64px; }
.b-zeichen--landhaus { flex-wrap: wrap; gap: .3em .5em; font-family: var(--serif); font-size: 1.75rem; font-weight: 300; line-height: 1.05; letter-spacing: .015em; color: var(--hell); }
.b-zeichen__pl { display: inline-grid; place-items: center; flex: none; width: 1.55em; height: 1.55em; border: 1px solid oklch(0.705 0.102 87 / .55); border-radius: 50%; color: var(--holz); letter-spacing: -.07em; }
.b-zeichen--strobl { padding: 10px 14px 9px; background: var(--zeichen-grund); }
.b-zeichen--strobl img { width: auto; height: 46px; }

/* ---------- Dunkle Tafel (Bründl: Bild und Text auf dunklem Feld) ---------- */
.b-verleih, .b-ebike { padding-top: clamp(40px, 6vw, 88px); }
.b-tafel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(100% - 2 * var(--rand), 1440px); margin-inline: auto; background: var(--fels); box-shadow: inset 0 0 0 1px var(--tafel-kante); color: #fff; }
.b-tafel__bild { position: relative; min-height: 480px; margin: clamp(20px, 3vw, 44px) 0 clamp(20px, 3vw, 44px) clamp(20px, 3vw, 44px); overflow: hidden; }
.b-tafel__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b-tafel__bild--frei img { object-fit: contain; }
.b-tafel__text { display: flex; flex-direction: column; justify-content: center; padding: clamp(44px, 6vw, 96px) clamp(24px, 5.5vw, 96px); }
.b-tafel .b-ueber { color: var(--holz); }
.b-tafel .b-lede { margin-top: 18px; color: rgba(255, 255, 255, .86); }
.b-tafel .b-hinweis { color: rgba(255, 255, 255, .72); }
.b-tafel .b-hinweis a { color: #fff; font-weight: 700; }

.b-schritte { margin-top: 28px; counter-reset: schritt; }
.b-schritte li { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .16); counter-increment: schritt; }
.b-schritte li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.b-schritte li::before { content: counter(schritt); display: grid; place-items: center; grid-row: 1 / span 2; width: 44px; height: 44px; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 50%; font-weight: 800; }
.b-schritte strong { font-size: 1.0625rem; line-height: 1.3; }
.b-schritte span { font-size: .9375rem; line-height: 1.45; color: rgba(255, 255, 255, .78); }

.b-daten { margin-top: 26px; border-top: 1px solid rgba(255, 255, 255, .16); }
.b-daten div { display: flex; justify-content: space-between; gap: 24px; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.b-daten dt { color: rgba(255, 255, 255, .75); }
.b-daten dd { font-weight: 800; }

/* ---------- Regal: Schiene mit Pfeilen ---------- */
.b-regal { margin-top: clamp(64px, 8vw, 112px); }
.b-regal__kopf { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.b-regal__sub { margin-top: 8px; color: var(--grau); }
.b-pfeile { display: flex; flex: none; gap: 10px; }
.b-schiene { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 24vw, 300px); gap: 20px; padding-bottom: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--linie-2) transparent; }
.b-karte { display: flex; flex-direction: column; border: 1px solid var(--linie); background: var(--karte); scroll-snap-align: start; }
.b-karte__bild { aspect-ratio: 4 / 3; overflow: hidden; background: var(--stein); }
.b-karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.b-karte:hover .b-karte__bild img { transform: scale(1.05); }
.b-karte__text { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 20px 20px 22px; }
.b-karte__marke { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
.b-karte__titel { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.b-karte__kopie { margin-bottom: 14px; font-size: .9375rem; line-height: 1.5; color: var(--grau); }
.b-karte .b-pfeillink { margin-top: auto; }

/* ---------- Gruppenanfrage: dunkle Tafel wie beim Skiverleih, das Formular klappt unter dem Kopf auf.
   Die Sandfläche vom ersten Wurf passte nicht (Michael im Layer, 07.10.2026). ---------- */
.b-gruppe { margin-top: clamp(56px, 7vw, 96px); padding: clamp(28px, 4vw, 56px); background: var(--fels); box-shadow: inset 0 0 0 1px var(--tafel-kante); color: #fff; }
.b-gruppe .b-ueber { color: var(--holz); }
.b-gruppe__text .b-h2 + p { color: rgba(255, 255, 255, .86); }
.b-gruppe__kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px clamp(24px, 5vw, 72px); }
.b-gruppe__text .b-h2 + p { max-width: 52ch; margin-top: 12px; }
.b-gruppe__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.b-gruppe__klappe { margin-top: clamp(24px, 3vw, 40px); padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid rgba(255, 255, 255, .16); animation: b-auf .55s var(--ease); }
@keyframes b-auf { from { opacity: 0; transform: translateY(14px); } }

.b-form__raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 20px; }
.b-feld { display: grid; align-content: start; gap: 6px; grid-column: span 3; font-size: .9375rem; font-weight: 700; }
.b-feld--schmal { grid-column: span 2; }
.b-feld--breit { grid-column: 1 / -1; }
.b-feld em { font-style: normal; font-weight: 500; color: rgba(255, 255, 255, .72); }
.b-feld small { font-size: .875rem; font-weight: 500; color: rgba(255, 255, 255, .72); }
.b-feld input, .b-feld textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--feld-linie); border-radius: 4px; background: var(--feld); color: var(--tinte); font: 500 1.0625rem/1.4 Figtree, system-ui, sans-serif; }
.b-feld textarea { display: block; resize: vertical; }
.b-feld input:focus-visible, .b-feld textarea:focus-visible, .b-haken input:focus-visible { outline: 2px solid var(--holz); outline-offset: 2px; }
.b-feld [aria-invalid="true"], .b-haken [aria-invalid="true"] { border-color: var(--rot); outline: 2px solid oklch(0.8 0.13 25); outline-offset: 2px; }
.b-haken { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 12px; max-width: 68ch; margin-top: 22px; font-size: .9375rem; line-height: 1.5; }
.b-haken input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--holz); }
.b-haken a { color: #fff; }
.b-form__topf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Fehler: rot und dort, wo man gerade hinschaut: am betroffenen Feld, sonst über dem Senden-Knopf.
   Der Text kommt von api/gruppe.php und sagt, was zu tun ist. */
.b-feld .b-feld__fehler, .b-haken .b-feld__fehler { display: block; color: oklch(0.82 0.12 25); font-size: .875rem; font-weight: 700; }
.b-haken .b-feld__fehler { margin-top: 6px; }
.b-form__fehler { max-width: none; margin-top: 22px; padding: 14px 16px; border: 1.5px solid var(--rot-schrift); border-radius: 4px; background: var(--feld); color: var(--rot-schrift); font-weight: 700; }
.b-form__fehler + .b-aktionen { margin-top: 16px; }
.b-form button[disabled] { opacity: .6; pointer-events: none; }
.b-form__erfolg { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 16px; }
.b-form__erfolg svg { flex: none; margin-top: 2px; color: var(--gruen); stroke-width: 2.2; }
.b-form__erfolgtitel { font-size: 1.25rem; font-weight: 800; line-height: 1.3; }
.b-form__erfolg a { font-weight: 700; color: #fff; }

/* ---------- Vorteile ---------- */
.b-vorteile { margin-top: clamp(64px, 8vw, 112px); padding-block: clamp(56px, 7vw, 96px); background: var(--stein); }
.b-vorteile__liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; margin-top: 32px; border-top: 1px solid var(--linie-2); }
.b-vorteile__liste li { display: flex; align-items: center; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--linie-2); font-weight: 700; line-height: 1.3; }
.b-vorteile__liste svg { flex: none; color: var(--rot); }

/* ---------- Versetzte Bildkacheln (Bründl: Aktionen, Marken, Services) ---------- */
.b-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 20px; margin-top: clamp(64px, 8vw, 112px); }
.b-kachelbild { position: relative; aspect-ratio: 4 / 5; overflow: hidden; color: #fff; }
.b-kachelbild:nth-child(2) { margin-top: 44px; }
.b-kachelbild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b-kachelbild::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to top, oklch(0.16 0.015 250 / .86), oklch(0.16 0.015 250 / 0)); }
.b-kachelbild figcaption { position: absolute; right: 24px; bottom: 22px; left: 24px; z-index: 1; display: grid; gap: 4px; }
.b-kachelbild strong { font-size: 1.375rem; font-weight: 800; line-height: 1.15; }
.b-kachelbild span { font-size: .9375rem; line-height: 1.45; color: rgba(255, 255, 255, .88); }
/* Pepis Layer-Punkte vom 13.10.2026 (Vorbild: die Kacheln von bruendl.at): Fährt man mit der Maus über die Kachel,
   verschwimmt das Bild und ein zweiter Text erscheint. Mit der Tastatur genauso (die Kachel nimmt den Fokus an).
   Ohne Maus, also am Handy, steht der Text gleich da und das Bild bleibt scharf. */
.b-kachelbild--mehr::before { content: ""; position: absolute; inset: 0; z-index: 1; background: oklch(0.16 0.015 250 / .58); opacity: 0; transition: opacity .45s var(--ease); }
.b-kachelbild--mehr img { transition: filter .45s var(--ease), transform .45s var(--ease); }
.b-kachelbild .b-kachelbild__mehr { margin-top: 6px; color: #fff; }
@media (hover: hover) {
    .b-kachelbild--mehr .b-kachelbild__mehr { max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; transition: max-height .45s var(--ease), margin-top .45s var(--ease), opacity .3s var(--ease); }
    .b-kachelbild--mehr:hover img, .b-kachelbild--mehr:focus-visible img { filter: blur(7px); transform: scale(1.06); }
    .b-kachelbild--mehr:hover::before, .b-kachelbild--mehr:focus-visible::before { opacity: 1; }
    .b-kachelbild--mehr:hover .b-kachelbild__mehr, .b-kachelbild--mehr:focus-visible .b-kachelbild__mehr { max-height: 12em; margin-top: 6px; opacity: 1; }
}
.b-kachelbild--mehr:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .b-kachelbild--mehr::before, .b-kachelbild--mehr img, .b-kachelbild--mehr .b-kachelbild__mehr { transition: none; }
}

/* ---------- Helles Text-Bild-Paar ---------- */
.b-paar { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(32px, 6vw, 96px); }
.b-paar--umgekehrt { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.b-paar__bild { aspect-ratio: 3 / 2; overflow: hidden; }
.b-paar__bild img { width: 100%; height: 100%; object-fit: cover; }
.b-paar__text > * + * { margin-top: 16px; }
.b-paar__text .b-ueber + .b-h2 { margin-top: 0; }
.b-ebike .b-paar { margin-top: clamp(64px, 8vw, 112px); }

/* ---------- Sportgeschäft und Online-Shop ---------- */
.b-shop { background: var(--stein); }
.b-shop__kopf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(32px, 6vw, 96px); }
.b-shop__text .b-h2 + p { margin-top: 18px; }
.b-shop__bilder { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 20px; }
.b-shop__bilder figure:nth-child(2) { margin-top: 48px; }
.b-shop__bilder img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.b-shop__bilder figcaption { display: grid; gap: 2px; margin-top: 14px; }
.b-shop__bilder strong { font-weight: 800; }
.b-shop__bilder span { font-size: .9375rem; color: var(--grau); }
.b-schiene--ware { grid-auto-columns: clamp(200px, 19vw, 250px); }
.b-ware { scroll-snap-align: start; }
.b-ware__bild { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--karte); }
.b-ware__bild img { width: 100%; height: 100%; object-fit: cover; }
.b-ware__marke { position: absolute; top: 14px; left: 0; padding: 5px 10px; background: var(--rot); color: #fff; font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.b-ware__gruppe { margin-top: 12px; font-weight: 800; }
.b-ware__zeile { font-size: .875rem; color: var(--grau); }

/* ---------- Lechtal und Saison-Kacheln ---------- */
.b-lechtal { position: relative; overflow: hidden; }
.b-lechtal__linien { position: absolute; inset: -6% -4% -6% 34%; background: var(--hoehenlinie); opacity: .34; pointer-events: none; -webkit-mask: url(/assets/media/lechtal-hoehenlinien.svg) center / cover no-repeat; mask: url(/assets/media/lechtal-hoehenlinien.svg) center / cover no-repeat; }
.b-lechtal .b-wrap { position: relative; }
.b-lechtal__kopf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: clamp(24px, 5vw, 80px); }
.b-fakten { display: grid; gap: 8px; margin-top: 20px; }
.b-lechtal__link { margin-top: 22px; }
.b-fakten li { position: relative; padding-left: 24px; }
.b-fakten li::before { content: ""; position: absolute; top: .78em; left: 0; width: 12px; height: 2px; background: var(--rot); }
.b-saison { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; margin-top: clamp(36px, 5vw, 64px); }
.b-saison__kachel { position: relative; height: clamp(300px, 34vw, 460px); overflow: hidden; color: #fff; text-align: left; }
.b-saison__kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.b-saison__kachel:hover img { transform: scale(1.05); }
.b-saison__kachel::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(to top, oklch(0.16 0.015 250 / .86), oklch(0.16 0.015 250 / 0)); }
.b-saison__text { position: absolute; right: 88px; bottom: 24px; left: 26px; z-index: 1; display: grid; gap: 4px; }
.b-saison__text strong { font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem); font-weight: 800; line-height: 1.1; }
.b-saison__text > span:last-child { font-size: .9375rem; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.b-saison__aktiv { display: none; justify-self: start; margin-bottom: 8px; padding: 5px 10px; background: #fff; color: var(--tinte-dunkel); font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.b-saison__kachel[aria-pressed="true"] .b-saison__aktiv { display: inline-block; }
.b-saison__pfeil { position: absolute; right: 24px; bottom: 24px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--tinte-dunkel); transition: background .25s, color .25s; }
.b-saison__kachel:hover .b-saison__pfeil { background: var(--rot); color: #fff; }
.b-saison__kachel[aria-pressed="true"] .b-saison__pfeil { display: none; }

/* ---------- Übernachten: Standortkarten (Strolz) ---------- */
.b-bleiben { background: var(--nacht); color: var(--hell); }
.b-bleiben .b-ueber { color: var(--holz); }
.b-bleiben .b-h2 { font-family: var(--serif); font-weight: 400; letter-spacing: 0; }
.b-orte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1080px; margin: clamp(32px, 4vw, 56px) auto 0; }
.b-orte--einzeln { grid-template-columns: minmax(0, 528px); justify-content: center; } /* nur ein Haus: dieselbe Karte, mittig */
.b-ort { display: flex; flex-direction: column; border: 1px solid oklch(1 0 0 / .14); background: oklch(0.2 0.005 95); }
.b-ort__bild { aspect-ratio: 16 / 10; overflow: hidden; }
.b-ort__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.b-ort:hover .b-ort__bild img { transform: scale(1.04); }
.b-ort__text { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 26px 28px 30px; }
.b-ort__name { min-height: 64px; display: flex; align-items: center; font-size: 1.5rem; font-weight: 400; line-height: 1.15; }
.b-ort__text p { color: oklch(0.86 0.014 88); }
.b-bleiben .b-btn--linie { border-color: var(--holz); color: var(--holz); }
.b-bleiben .b-btn--linie:hover { background: var(--holz); border-color: var(--holz); color: var(--tinte-dunkel); }
.b-ort__text .b-btn { align-self: flex-start; margin-top: auto; }

/* ---------- Besuch und Fragen ---------- */
.b-besuch__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: clamp(32px, 6vw, 96px); }
.b-besuch .b-status { margin-top: 18px; }
.b-besuch .b-status__punkt { background: var(--rot); }
.b-besuch .b-status--offen .b-status__punkt { background: var(--gruen); }
.b-zeilen { margin-top: 24px; border-top: 1px solid var(--linie); }
.b-zeilen div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.b-zeilen dt { padding-top: 3px; font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
.b-zeilen dd { font-weight: 600; }
.b-zeilen a { border-bottom: 1px solid var(--linie-3); text-decoration: none; }
.b-zeilen a:hover { border-color: var(--rot); color: var(--rot-schrift); }
.b-besuch__bilder { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: 20px; }
.b-haus { aspect-ratio: 4 / 5; overflow: hidden; }
.b-haus img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 38% 50%); }
.b-tal { margin-top: 56px; }
.b-tal__flaeche { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--stein); }
.b-tal__linien { position: absolute; inset: 0; background: var(--hoehenlinie); opacity: .75; -webkit-mask: url(/assets/media/lechtal-hoehenlinien.svg) center / cover no-repeat; mask: url(/assets/media/lechtal-hoehenlinien.svg) center / cover no-repeat; }
.b-tal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.b-tal__lech { stroke: var(--rot); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.b-tal__gebiet { display: none; }
.b-tal__punkt { fill: var(--tinte); }
.b-tal__ring { fill: none; stroke: var(--tinte); stroke-width: 1.5; }
.b-tal__ort { font-size: 24px; font-weight: 800; fill: var(--tinte); paint-order: stroke; stroke: var(--stein); stroke-width: 6px; stroke-linejoin: round; }
.b-tal figcaption { margin-top: 10px; font-size: .8125rem; line-height: 1.4; color: var(--grau); }

.b-fragen { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; gap: clamp(24px, 5vw, 80px); margin-top: clamp(72px, 9vw, 128px); }
.b-fragen__liste { border-top: 1px solid var(--linie-2); }
.b-frage { border-bottom: 1px solid var(--linie-2); }
.b-frage summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; font-size: 1.125rem; font-weight: 700; line-height: 1.35; list-style: none; cursor: pointer; }
.b-frage summary::-webkit-details-marker { display: none; }
.b-frage summary svg { flex: none; color: var(--rot); transition: transform .35s var(--ease); }
.b-frage[open] summary svg { transform: rotate(45deg); }
.b-frage p { padding: 0 44px 22px 0; color: var(--grau); }
.b-frage .ss-tel { color: var(--tinte); font-weight: 700; }

/* ---------- Bewertungen (Bründl: „Unsere zufriedene Kundschaft") ---------- */
.b-stimmen { background: var(--stein); }
.b-stimmen__raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; gap: clamp(32px, 6vw, 96px); }
.b-stimmen__note { display: flex; align-items: center; gap: 18px; max-width: none; margin-block: 26px 22px; }
.b-stimmen__note strong { font-size: clamp(3rem, 2rem + 3vw, 4.5rem); font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.b-stimmen__note > span { display: grid; gap: 6px; font-size: .9375rem; font-weight: 700; }
.b-sterne { display: inline-flex; gap: 2px; }
.b-sterne svg { fill: var(--linie-2); }
.b-sterne svg.ist-voll { fill: var(--holz); }
.b-stimmen__liste { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: 20px; }
.b-stimme { display: grid; gap: 14px; padding: clamp(22px, 2.4vw, 32px); background: var(--karte); }
.b-stimme:nth-child(1) { grid-area: 1 / 1; }
.b-stimme:nth-child(2) { grid-area: 1 / 2 / span 2; align-self: center; }
.b-stimme:nth-child(3) { grid-area: 2 / 1; }
.b-stimme blockquote { margin: 0; }
.b-stimme blockquote p { max-width: none; line-height: 1.55; }
.b-stimme__mehr { margin-top: 8px; font-size: .875rem; font-weight: 700; }
.b-stimme__von { display: grid; gap: 2px; max-width: none; font-size: .875rem; line-height: 1.4; }
.b-stimme__von span { color: var(--grau); }

/* ---------- Familienleiste: Sport Strobl, Pepi's Suites, Pepi's Landhaus (für alle drei Seiten gedacht) ---------- */
.b-familie { padding-block: clamp(40px, 5vw, 68px); border-bottom: 1px solid oklch(1 0 0 / .14); background: var(--nacht); color: var(--hell); }
.b-familie__titel { max-width: none; margin-bottom: clamp(24px, 3vw, 36px); font-size: .8125rem; font-weight: 800; letter-spacing: .14em; text-align: center; text-transform: uppercase; color: var(--holz); }
.b-familie__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.b-familie__liste li + li { border-left: 1px solid oklch(1 0 0 / .14); }
.b-familie__haus { display: grid; justify-items: center; align-content: start; gap: 12px; height: 100%; padding: 6px clamp(12px, 2.4vw, 32px); text-align: center; text-decoration: none; }
.b-familie__haus .b-zeichen { min-height: 68px; justify-content: center; }
.b-familie__zeile { font-size: .9375rem; line-height: 1.4; color: oklch(0.86 0.014 88); }
.b-familie__hier { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--holz); }
a.b-familie__haus:hover .b-familie__hier { color: var(--hell); }

/* ---------- Fußzeile ---------- */
.b-fuss { background: var(--fels); color: rgba(255, 255, 255, .82); font-size: .9375rem; }
.b-fuss a { color: inherit; text-decoration: none; }
.b-fuss a:hover { color: #fff; text-decoration: underline; }
/* Seit 14.10.2026 ohne Logo-Etikett (Pepis Layer-Punkt vom 13.10.2026: „Logo weg"). Der Spruch hält jetzt selbst den
   Abstand zur Oberkante, den vorher das Etikett gab; nach unten trägt ihn der Abstand der Spalten. */
.b-fuss__marke { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 28px; padding-top: clamp(40px, 5vw, 72px); }
.b-fuss__spruch { font-size: 1.25rem; font-style: italic; font-weight: 700; color: #fff; }
.b-fuss__spalten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-block: clamp(40px, 5vw, 72px); }
.b-fuss h2 { margin-bottom: 14px; font-size: .8125rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.b-fuss li + li { margin-top: 8px; }
.b-fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; padding-block: 22px 96px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .875rem; }
.b-fuss__unten ul { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.b-fuss__unten li + li { margin-top: 0; }
.b-fuss__unten button:hover { color: #fff; text-decoration: underline; }

/* ---------- Seitenreiter rechts (Bründl, Glanzer) ---------- */
.b-reiter { --reiter: 58px; position: fixed; right: 0; bottom: 112px; z-index: 50; display: flex; align-items: center; gap: 16px; height: var(--reiter); padding: 0 22px 0 16px; border-radius: 30px 0 0 30px; background: var(--rot); color: #fff; font-size: .9375rem; font-weight: 700; white-space: nowrap; box-shadow: 0 12px 30px -16px oklch(0.2 0.02 250 / .7); transform: translateX(calc(100% - var(--reiter))); transition: transform .5s var(--ease), background .2s; }
.b-reiter svg { flex: none; }
.b-reiter:focus-visible { background: var(--rot-tief); transform: none; }
@media (hover: hover) { .b-reiter:hover { background: var(--rot-tief); transform: none; } }
/* Fragenfenster offen: der Reiter bleibt eingezogen und zeigt das Kreuz, ein zweiter Klick schließt */
.b-reiter[aria-expanded="true"] { transform: translateX(calc(100% - var(--reiter))); }
.b-reiter__zu, .b-reiter[aria-expanded="true"] .b-reiter__auf { display: none; }
.b-reiter[aria-expanded="true"] .b-reiter__zu { display: block; }

/* ---------- Fragenfenster am Seitenreiter (Pepi, 13.10.2026: „wie bei Pepis Landhaus einen Chat mit Fragen u. Antworten") ----------
   Am Schreibtisch sitzt es in der Ecke links neben dem Reiter, am Handy fast über die ganze Breite über dem Reiter;
   der Knopf für Barrierefreiheit unten links bleibt frei. Eckig wie Karten und Laden, 4 px Rundung wie Knöpfe und Felder.
   --sicht und --verdeckt setzt entwurf-b.js aus dem sichtbaren Ausschnitt (Handy-Tastatur): das Fenster ist nie höher
   als das, was zu sehen ist. Es hält Abstand zum Kopf der Seite, solange ihm dabei mindestens 380 px Höhe bleiben. */
.b-chat { --sicht: 100vh; --chat-rechts: 74px; --chat-unten: 24px; --chat-oben: calc(var(--meta) + var(--bar) + 12px); --chat-frei: calc(var(--sicht) - var(--chat-unten)); position: fixed; right: var(--chat-rechts); bottom: calc(var(--verdeckt, 0px) + var(--chat-unten)); z-index: 70; display: flex; flex-direction: column; width: min(360px, calc(100vw - var(--chat-rechts) - 12px)); height: min(520px, max(calc(var(--chat-frei) - var(--chat-oben)), min(380px, calc(var(--chat-frei) - 8px)))); border: 1px solid var(--linie-2); background: var(--papier); color: var(--tinte); box-shadow: 0 24px 60px -24px var(--schleier); visibility: hidden; opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .45s var(--ease), visibility 0s .45s; }
@supports (height: 100dvh) { .b-chat { --sicht: 100dvh; } }
.b-chat.is-offen { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.b-chat.is-eng { --chat-unten: 8px; --chat-oben: 8px; } /* Tastatur offen: der ganze sichtbare Rest gehört dem Fenster */
.b-chat__kopf { display: flex; align-items: center; flex: none; gap: 12px; min-height: 60px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--linie); background: var(--stein); }
.b-chat__marke { flex: none; width: 36px; height: 36px; overflow: hidden; border-radius: 4px; }
.b-chat__marke img { width: 100%; height: 100%; object-fit: cover; }
.b-chat__name { flex: 1; min-width: 0; }
.b-chat__titel { font-size: .875rem; font-weight: 800; line-height: 1.25; letter-spacing: .08em; text-transform: uppercase; }
.b-chat__hinweis { font-size: .75rem; line-height: 1.35; color: var(--grau); }
.b-chat__zu { display: grid; place-items: center; flex: none; width: 44px; height: 44px; }
.b-chat__zu:focus-visible { outline-offset: -4px; }
.b-chat__verlauf { position: relative; display: flex; flex: 1; flex-direction: column; gap: 10px; min-height: 0; padding: 14px 16px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--linie-2) transparent; }
.b-chat__zeile { display: flex; flex: none; animation: b-auf .4s var(--ease); }
.b-chat__zeile--gast { justify-content: flex-end; }
.b-chat__blase { max-width: 88%; padding: 10px 14px; border-radius: 4px; background: var(--stein-2); font-size: .9375rem; line-height: 1.5; overflow-wrap: anywhere; }
.b-chat__zeile--gast .b-chat__blase { background: var(--rot); color: #fff; }
.b-chat__blase p + p { margin-top: 4px; }
.b-chat__blase a { font-weight: 700; text-underline-offset: .18em; }
.b-chat__blase .ss-tel { white-space: nowrap; }
.b-chat__bezug { font-weight: 700; }
.b-chat__wege { margin-top: 4px; }
.b-chat__wege a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.b-chat__wege svg { flex: none; }
.b-chat__fragen { display: flex; flex: none; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.b-chat__frage { min-height: 44px; padding: 6px 14px; border: 1.5px solid var(--linie-3); border-radius: 4px; font-size: .875rem; font-weight: 700; line-height: 1.3; text-align: left; transition: background .2s, color .2s, border-color .2s; }
@media (hover: hover) { .b-chat__frage:hover { background: var(--tinte); border-color: var(--tinte); color: var(--auf-tinte); } }
.b-chat__form { position: relative; display: flex; flex: none; gap: 8px; padding: 10px; border-top: 1px solid var(--linie); background: var(--stein); }
.b-chat__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* 1rem: unter 16 px vergrößert iOS die Seite, sobald man ins Feld tippt */
.b-chat__form input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 1.5px solid var(--linie-3); border-radius: 4px; background: var(--feld); color: var(--tinte); font: 500 1rem/1 Figtree, system-ui, sans-serif; }
.b-chat__form input::placeholder { color: var(--grau); opacity: 1; }
.b-chat__form input:focus-visible { border-color: var(--tinte); outline-offset: 2px; }
.b-chat__senden { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 4px; background: var(--rot); color: #fff; transition: background .2s, color .2s; }
.b-chat__senden:hover { background: var(--rot-tief); }
.b-chat__senden[disabled] { background: var(--stein-2); color: var(--grau); cursor: default; }
body.cms-a11y-no-motion .b-chat, body.cms-a11y-no-motion .b-chat__zeile { transition: none; animation: none; }

/* ---------- Unterseiten (Impressum, Datenschutz, Barrierefreiheit, Cookies) ---------- */
.is-sub main { padding: clamp(48px, 7vw, 96px) 0 clamp(72px, 9vw, 128px); }
.section--legal .section__inner, .section--legal .section__inner--narrow { max-width: 820px; margin: 0 auto; padding-inline: var(--rand); text-align: left !important; }
.section--legal h1, .is-sub main h1 { margin-bottom: 20px; font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); font-weight: 900; line-height: 1.05; letter-spacing: -.012em; }
.section--legal h2 { margin: 2.2em 0 .6em; font-size: 1.25rem; font-weight: 800; }
.section--legal p + p { margin-top: .9em; }
.section--legal p, .section--legal li { color: var(--grau); }
.section--legal ul { padding-left: 1.2em; list-style: disc; }
.section--legal a { color: var(--rot-schrift); }

/* ---------- Vorschau: Anmeldeseite und Hinweiszeile (nur auf dem Vorschau-Server) ---------- */
.b-login { background: var(--stein); }
.b-login__flaeche { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: clamp(24px, 6vw, 72px) var(--rand); }
.b-login__form { display: grid; gap: 16px; width: 100%; max-width: 440px; padding: clamp(28px, 5vw, 44px); border: 1px solid var(--linie); background: var(--karte); }
.b-login__marke { justify-self: start; margin-bottom: 14px; }
.b-login__marke img { width: auto; height: 52px; }
.b-login .b-ueber { margin-bottom: 0; }
.b-login__titel { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.375rem); font-weight: 800; line-height: 1.1; letter-spacing: -.012em; text-wrap: balance; }
.b-login__text { margin-bottom: 8px; color: var(--grau); }
.b-login__fehler { padding: 12px 14px; border: 1px solid var(--rot); border-radius: 4px; color: var(--rot-schrift); font-size: .9375rem; font-weight: 600; }
.b-login__feld { display: grid; gap: 6px; font-size: .9375rem; font-weight: 700; }
.b-login__feld input { height: 52px; padding: 0 14px; border: 1.5px solid var(--linie-3); border-radius: 4px; background: var(--feld); color: var(--tinte); font: 500 1.0625rem/1 Figtree, system-ui, sans-serif; }
.b-login__feld input:focus { border-color: var(--tinte); outline: 2px solid var(--rot); outline-offset: 2px; }
.b-login .b-btn { margin-top: 8px; border: 0; }
.b-vorschau { padding: 10px var(--rand); background: var(--fels-2); color: rgba(255, 255, 255, .82); font-size: .8125rem; text-align: center; }
.b-vorschau a { color: #fff; }

/* ---------- Einblenden beim Scrollen ---------- */
.b-bewegt [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
.b-bewegt [data-reveal].is-da { opacity: 1; transform: none; }
body.cms-a11y-no-motion [data-reveal] { opacity: 1 !important; transform: none !important; }
body.cms-a11y-no-motion .b-hero__medien video { display: none; }

/* ---------- Ab 900 px: in den vier Spalten stehen Überzeile, Bild und Text auf gleicher Höhe ---------- */
@media (min-width: 900px) {
    .b-welt__marke { min-height: 2.9em; }
    .b-welt__bild { align-self: start; }
    .b-welt__text { align-self: end; }
}

/* ---------- Ab 1180 px: Werbezeile im Kopf (dann entfällt sie im Hero); darunter wird die Meta-Leiste knapper ---------- */
@media (min-width: 1180px) { .b-claim { display: flex; } }
@media (max-width: 1179px) { .b-meta__tel span { display: none; } }
@media (max-width: 1019px) { .b-meta__kontakt { display: none; } }

/* ---------- Unter 1100 px: Vorteile zweispaltig, die vier Spalten als zwei Reihen ---------- */
@media (max-width: 1099px) {
    .b-welten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .b-welt { min-height: clamp(520px, 62vw, 640px); }
    .b-stimmen__raster { grid-template-columns: 1fr; }
    .b-vorteile__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .b-fuss__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Unter 900 px: Handy und kleines Tablet ---------- */
@media (max-width: 899px) {
    :root { --meta: 44px; --bar: 64px; }

    /* Kopf wie bei Bründl am Handy: Logo links, Kacheln Anruf / Verleih / Menü rechts.
       Die Meta-Leiste zeigt die drei Links, die Saison-Reiter sitzen als Pille im Hero. */
    .b-meta__links, .b-meta .b-tabs { display: none; }
    .b-meta__inner { padding: 0; }
    .b-meta__marken { flex: 1; gap: 0; margin: 0; }
    .b-meta__marken li { flex: 1 1 0; min-width: 0; }
    .b-meta__marken li + li { border-left: 1px solid var(--linie-2); }
    .b-meta__marken a { justify-content: center; gap: 6px; width: 100%; padding: 0 4px; font-size: .6875rem; letter-spacing: .03em; }
    .b-tabs--hero { position: absolute; top: 16px; left: var(--rand); z-index: 2; display: flex; gap: 0; height: 48px; padding: 3px; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 999px; background: oklch(0.2 0.012 250 / .45); }
    .b-tabs--hero .b-tabs__tab { padding: 0 14px; border: 0; border-radius: 999px; color: #fff; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
    .b-tabs--hero .b-tabs__tab[aria-pressed="true"] { background: #fff; color: var(--tinte-dunkel); }
    .b-bar { grid-template-columns: auto 1fr; }
    .b-menubtn { display: none; }
    .b-logo { padding: 0 12px; }
    .b-logo img { height: clamp(38px, 11vw, 44px); }
    .b-kachel, .b-rent { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 64px; padding: 0; font-size: .6875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
    .b-rent__lang { display: none; }
    .b-rent__kurz { display: block; }
    .b-kachel--anruf { border-left: 1px solid var(--linie); }
    .b-kachel--menue { background: var(--fels); color: #fff; }

    .b-hero__bild { min-height: clamp(540px, calc(100svh - var(--meta) - var(--bar)), 760px); }
    .b-hero__inhalt { padding-block: 96px 28px; }
    .b-hero__haken { flex-direction: column; align-items: flex-start; gap: 8px; padding-left: calc(var(--rand) + 62px); }
    .b-hero__steuerung { top: 16px; right: var(--rand); bottom: auto; }
    .b-hero__steuerung a { display: none; }

    /* Drei Welten als Zeilen, wie Glanzer am Handy */
    .b-welten { grid-template-columns: 1fr; }
    .b-welt { grid-template-columns: clamp(96px, 26vw, 150px) 1fr; grid-template-rows: auto auto; grid-template-areas: "bild marke" "bild text"; align-content: center; gap: 8px clamp(18px, 5vw, 36px); min-height: 0; padding: 24px var(--rand); }
    .b-welt__marke { grid-area: marke; align-self: end; font-size: .6875rem; }
    .b-welt__bild { grid-area: bild; width: 100%; }
    .b-welt__text { grid-area: text; align-self: start; }

    .b-tafel { grid-template-columns: 1fr; width: 100%; }
    .b-tafel__bild { min-height: 0; margin: 0; aspect-ratio: 4 / 3; }
    .b-paar, .b-paar--umgekehrt, .b-shop__kopf, .b-lechtal__kopf, .b-besuch__raster, .b-fragen { grid-template-columns: 1fr; }
    .b-paar__bild { order: -1; }
    .b-regal__kopf { flex-direction: column; align-items: flex-start; gap: 12px; }
    .b-pfeile { display: none; }
    .b-schiene { grid-auto-columns: min(78vw, 300px); margin-right: calc(var(--rand) * -1); padding-right: var(--rand); }
    .b-schiene--ware { grid-auto-columns: min(56vw, 230px); }
    .b-kacheln { grid-template-columns: 1fr; }
    .b-kachelbild { aspect-ratio: 4 / 3; }
    .b-kachelbild:nth-child(2) { margin-top: 0; }
    .b-saison { grid-template-columns: 1fr; }
    .b-saison__kachel { height: clamp(240px, 62vw, 340px); }
    .b-orte { grid-template-columns: 1fr; }
    .b-lechtal__linien { inset: -4% -30% 40% 10%; }
    .b-zeilen div { grid-template-columns: 1fr; gap: 2px; }

    .b-stimmen__liste { grid-template-columns: 1fr; }
    .b-stimme:nth-child(n) { grid-area: auto; }
    .b-familie__liste { grid-template-columns: 1fr; }
    .b-familie__liste li + li { margin-top: 26px; padding-top: 26px; border-top: 1px solid oklch(1 0 0 / .14); border-left: 0; }
    .b-welt .b-zeichen--suites img { height: 52px; }
    .b-gruppe { margin-inline: calc(var(--rand) * -1); padding: 36px var(--rand); }
    .b-gruppe__kopf { grid-template-columns: 1fr; align-items: start; }
    .b-feld, .b-feld--schmal { grid-column: 1 / -1; }
    .b-reiter { --reiter: 50px; bottom: 88px; padding-left: 12px; }
    /* Fragenfenster über dem Reiter (88 + 50 + 10 px) */
    .b-chat { --chat-rechts: 12px; --chat-unten: 148px; width: min(420px, calc(100vw - 24px)); }
}
/* Handy quer: über dem Reiter bliebe zu wenig Höhe, das Fenster rückt wieder daneben */
@media (max-width: 899px) and (min-width: 560px) and (max-height: 520px) { .b-chat { --chat-rechts: 62px; --chat-unten: 12px; width: 360px; } }

@media (max-width: 419px) { .b-meta__marken svg { display: none; } }

@media (max-width: 559px) {
    .b-vorteile__liste { grid-template-columns: 1fr; }
    .b-shop__bilder figure:nth-child(2) { margin-top: 28px; }
    .b-besuch__bilder { grid-template-columns: 1fr; }
    .b-haus { aspect-ratio: 4 / 3; }
    .b-tal { margin-top: 0; }
    .b-tal__flaeche { aspect-ratio: 4 / 3; }
    .b-fuss__spalten { grid-template-columns: 1fr; gap: 28px; }
    .b-frage p { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    .b-bewegt [data-reveal] { opacity: 1; transform: none; }
    .b-chat { transition: none; }
}