/* Komponenten nach Design-System (design/design-system/components/) —
   mobile-first; Desktop-Werte 1:1 aus v9. */

/* --- Eyebrow --- */
.eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--text-gedaempft);
}
.eyebrow--invers { color: rgba(251, 247, 239, 0.75); }
.eyebrow--rot { color: var(--rot); letter-spacing: 0.1em; font-size: 12.5px; }
/* Sektions-Kopf-Muster (Hub-Gruppen + Hauptseiten-Intros): Werte 1:1 aus dem
   abgenommenen Hub-Kopf (war .ziel-gruppe-scoped in ausflugsziele.css) —
   keine neuen Abstände erfinden (Patrick 11.7.). */
.ziel-gruppe .eyebrow--rot, .zimmer-intro .eyebrow--rot, .intro .eyebrow--rot { letter-spacing: 0.22em; margin-bottom: 10px; }
/* Hauptseiten-Intro (kurze Sig + Lead, Patrick 11.7.) — Abstand nach unten
   = Hub-Karten-Abstand (30px, wie .ziel-gruppe-grid) */
.haupt-intro { margin-bottom: 30px; }

/* --- Signatur-Headline (Setzregel guidelines/herz-signatur.md: −3°,
       Schwung height .8em / width 3.48em / left 100% / ml −2.82em / bottom −.32em;
       Headlines 40–72px, Unterschrift 44px Desktop / 34px mobil) --- */
.sig {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    transform: rotate(-3deg);
    transform-origin: left bottom;
    font-family: var(--font-accent);
    font-weight: 700;
    line-height: 1.1;
}
/* Untergrenze lt. Regelwerk ist 40px — auf sehr schmalen Geräten (≤390px) skaliert
   die Hero-Zeile minimal darunter, damit der Schwung mit Herz Luft zum Rand behält
   (bewusste Abweichung, sonst klebt/clippt das Herz rechts). */
.sig--hero     { font-size: clamp(36px, 10.4vw, 76px); line-height: 1.05; }
/* Lange Headlines („Die Badewelt vor der Tür") müssen inkl. Schwung+Herz auf
   360–412px passen → mobil unter die 40px-Regelgrenze skalieren (dokumentiert). */
.sig--l        { font-size: clamp(30px, 8.6vw, 56px); }
.sig--angebot  { font-size: clamp(32px, 8.6vw, 54px); }
.sig--m        { font-size: clamp(32px, 8.6vw, 52px); }
.sig--signatur { font-size: 34px; }
.sig--rot   { color: var(--rot); }
.sig--weiss { color: var(--weiss-warm); }
.sig .schwung {
    position: absolute;
    height: 0.8em;
    width: 3.48em;
    left: 100%;
    margin-left: -2.82em;
    bottom: -0.32em;
    /* Härtung der Setzregel: generische img-Regeln (inset/top/max-width aus
       Bild-Containern) dürfen den Schwung NIE verschieben oder stauchen. */
    top: auto;
    right: auto;
    max-width: none;
}
@media (min-width: 760px) {
    .sig--signatur { font-size: 44px; }
}

/* --- Buttons (eine Aktionsfarbe; Hover = Rot vertieft; Tap-Ziele ≥44px) --- */
.btn {
    display: inline-block;
    background: var(--rot);
    color: var(--weiss-warm);
    font-weight: 800;
    font-size: 15px;
    padding: 12px 24px;
    border-radius: var(--radius-btn);
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover { background: var(--rot-tief); }
.btn--gross { font-size: 17px; padding: 16px 34px; }
.btn--hell  { background: var(--weiss-warm); color: var(--rot); font-size: 16px; padding: 13px 28px; }
.btn--hell:hover { background: var(--creme); }

.btn-umriss {
    display: inline-block;
    border: 2px solid var(--rot);
    color: var(--rot);
    font-weight: 800;
    font-size: 15px;
    padding: 11px 24px;
    border-radius: var(--radius-btn);
    text-decoration: none;
    white-space: nowrap;
}
.btn-umriss--gross { font-size: 16px; padding: 12px 28px; }
.btn-umriss--hell  { border-color: var(--weiss-warm); color: var(--weiss-warm); padding: 11px 22px; }

.link-rot { color: var(--rot); font-weight: 800; font-size: 15.5px; text-decoration: none; }
.link-unterstrichen {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-neben);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* --- Karte --- */
.karte {
    background: var(--surface-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

/* --- Herz-Liste (Herz = Aufzählungszeichen der Marke) --- */
.herz-liste {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.herz-liste li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; }
.herz-liste img { height: 13px; width: auto; flex-shrink: 0; }

/* --- Ribbon/Störer (−2°, links bündig ohne linken Radius) --- */
.ribbon {
    position: absolute;
    left: 0;
    bottom: 40px;
    background: var(--rot);
    color: var(--weiss-warm);
    font-family: var(--font-accent);
    font-weight: 700;
    font-size: 26px;
    padding: 10px 26px 10px 22px;
    border-radius: 0 12px 12px 0;
    transform: rotate(-2deg);
    transform-origin: left center;
    box-shadow: 0 4px 16px rgba(25, 18, 12, 0.25);
}

/* --- Header (sticky auf allen Breiten; mobil: Logo solo + CTA + Burger,
       Desktop ab 1100px: Lockup + 5-Punkte-Menü + Telefon + CTA) --- */
.header {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--weiss-warm);
    border-bottom: 2px solid var(--rot);
}
.header-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.header-logo img { height: 40px; width: auto; }
.header-logo-trenner { display: none; width: 1px; height: 34px; background: rgba(44, 34, 30, 0.16); }
.header-logo-text { display: none; flex-direction: column; line-height: 1.12; }
.header-logo-zeile1 { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text-standard); }
.header-logo-zeile2 { font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-gedaempft); margin-top: 3px; }
.header-nav { display: none; gap: 22px; font-weight: 700; font-size: 15px; flex-wrap: wrap; }
.header-nav a { color: var(--text-standard); text-decoration: none; }
.header-nav a.aktiv { color: var(--rot); }
.header-nav .nur-mobil { display: none; } /* Lage & Kontakt: nur im Overlay (Menü-Revision 11.7.) */
.header-aktion { display: flex; gap: 12px; align-items: center; }
.header-kontakt { display: none; flex-direction: column; align-items: flex-end; line-height: 1.35; white-space: nowrap; }
.header-telefon { font-weight: 700; font-size: 15px; color: inherit; text-decoration: none; }
.header-mail { font-weight: 700; font-size: 13px; color: var(--text-gedaempft); text-decoration: none; }
.header-mail:hover { color: var(--rot); }

.burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: 0;
    cursor: pointer;
}
.burger span { display: block; height: 2.5px; background: var(--text-standard); border-radius: 2px; }

@media (min-width: 1100px) {
    .header { padding: 18px clamp(20px, 3vw, 48px); gap: 16px; flex-wrap: wrap; }
    .header-logo img { height: 46px; }
    .header-logo-trenner { display: block; }
    .header-logo-text { display: flex; }
    .header-nav { display: flex; }
    .header-kontakt { display: flex; }
    .header-aktion { gap: 16px; }
    .burger { display: none; }
}

/* --- Mobiles Menü-Overlay (flach: Voll-Logo, 5 Punkte, Buchen/Telefon/WhatsApp) --- */
.menue-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--weiss-warm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 56px 24px 32px;
    overflow: auto;
    text-align: center;
}
.menue-overlay[hidden] { display: none; }
.menue-schliessen {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    font-size: 32px;
    line-height: 1;
    background: none;
    border: 0;
    color: var(--text-standard);
    cursor: pointer;
}
.menue-logo { height: 120px; width: auto; } /* Voll-Logo ≥120px lt. Logo-Stufenregel */
.menue-punkte { display: flex; flex-direction: column; gap: 4px; }
.menue-punkte a {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-standard);
    text-decoration: none;
    padding: 11px 16px; /* Tap-Ziel ≥44px */
}
.menue-punkte a.aktiv { color: var(--rot); }
.menue-fuss { margin-top: auto; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.menue-kontakt { display: flex; gap: 24px; align-items: center; font-weight: 700; font-size: 15px; }
.menue-kontakt a { color: var(--text-standard); display: inline-flex; gap: 8px; align-items: center; text-decoration: none; }

/* --- Footer --- */
.footer {
    background: var(--tinte);
    color: var(--weiss-warm);
    padding: clamp(48px, 5vw, 72px) clamp(24px, 5vw, 88px) 40px;
}
.footer-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 48px; }
.footer-logo { height: 150px; width: auto; margin: -10px 0 0 -12px; }
.footer-adresse { font-size: 15px; line-height: 1.8; color: rgba(251, 247, 239, 0.75); margin-top: 18px; }
.footer-herzen { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.footer-titel { font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(251, 247, 239, 0.55); }
.footer-links { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; font-size: 15px; font-weight: 600; }
.footer-links a { color: rgba(251, 247, 239, 0.85); text-decoration: none; }
.footer-kontakt { font-weight: 700; }
.footer-kontakt a { display: inline-flex; align-items: center; gap: 8px; color: var(--weiss-warm); }
.footer-direktbucher { font-size: 13.5px; font-weight: 600; line-height: 1.55; color: rgba(251, 247, 239, 0.6); margin-top: 14px; }
.footer-buchen { margin-top: 18px; align-self: flex-start; }
.footer-unterzeile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    border-top: 1px solid rgba(251, 247, 239, 0.15);
    margin-top: 48px;
    padding-top: 26px;
    flex-wrap: wrap;
}
.footer-partner { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.footer-partner-eintrag { display: flex; align-items: center; gap: 14px; font-size: 13px; color: rgba(251, 247, 239, 0.6); }
.footer-partner-logo { background: var(--weiss-warm); border-radius: 10px; padding: 8px 14px; display: flex; align-items: center; }
.footer-rechtliches { display: flex; align-items: center; gap: 24px; font-size: 13px; color: rgba(251, 247, 239, 0.6); flex-wrap: wrap; }
.footer-rechtliches a { color: inherit; text-decoration: none; }
.footer-rechtliches a:hover { color: rgba(251, 247, 239, 0.9); }
.footer-social { display: inline-flex; gap: 16px; align-items: center; margin-right: 8px; }
.footer-social img { height: 17px; width: auto; filter: brightness(0) invert(1); opacity: 0.6; }

/* --- WhatsApp (grün, nie umfärben; Icon-SVG nutzt currentColor → weiß via Filter) --- */
.whatsapp-punkt {
    display: inline-flex;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--whatsapp);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.whatsapp-punkt img { width: 11px; height: 11px; filter: brightness(0) invert(1); }
.whatsapp-widget {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--whatsapp);
    box-shadow: 0 4px 14px rgba(25, 18, 12, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}
.whatsapp-widget img { width: 32px; height: 32px; filter: brightness(0) invert(1); }

/* ============================================================
   Unterseiten-Komponenten (Rutsch) — geteilt von allen v9-Folgeseiten.
   Mobile-first; Desktop-Werte 1:1 aus den v9-Vorlagen (1440px-Canvas).
   ============================================================ */

/* --- Seiten-Hero (v9: 420px, Kicker + Signatur-Headline unten links) ---
   Fokuspunkt je Bild aus dem Content: style="--pos:50% 45%". */
.seite-hero { position: relative; height: 300px; }
/* NUR das Hero-Foto (direktes Kind) — nie die .schwung-Grafik im H1 treffen:
   deren top würde sonst das bottom der Setzregel überstimmen (Schwung
   durchstreicht statt zu unterstreichen — Kunden-Zwischenruf 7.7.). */
.seite-hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--pos, 50% 50%);
}
.seite-hero-verlauf {
    position: absolute;
    inset: 0;
    /* Textschutz nur, wo der Text steht (Patrick 11.7. — der vollflächige
       Grundschleier legte auf helle Motive einen Grauton): mobil läuft der
       Text fast über die volle Breite → unterer Verlauf ohne Schleier oben. */
    background: linear-gradient(180deg, rgba(25,18,12,0) 42%, rgba(25,18,12,0.55) 100%);
}
@media (min-width: 760px) {
    /* Desktop: dezente Schutz-Ellipse NUR um den Textblock (Patrick 11.7. —
       „kaum auffällig"): hängt per calc an der Textspalte, fadet beidseitig
       aus und reicht nicht bis zur Hero-Oberkante (Vertikal-Radius 330px bei
       420px Hero). Lesbarkeit trägt der Text-Schatten mit. */
    .seite-hero-verlauf {
        background: radial-gradient(640px 330px at calc((100% - 1248px) / 2 + 300px) 100%, rgba(25,18,12,0.48) 0%, rgba(25,18,12,0.26) 48%, rgba(25,18,12,0) 74%);
    }
}
.seite-hero-text { position: absolute; left: 0; right: 0; bottom: 28px; }
.seite-hero-kicker {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--weiss-warm);
    text-shadow: 0 1px 10px rgba(25,18,12,0.45);
    /* 16/18px statt 10/12: Caveat-Oberlängen der Signatur klebten an der Kicker-Zeile (Patrick 10.7.) */
    margin-bottom: 16px;
}
.seite-hero .sig { text-shadow: 0 2px 18px rgba(25,18,12,0.35); font-size: clamp(34px, 9.2vw, 68px); line-height: 1.05; }
@media (min-width: 760px) {
    .seite-hero { height: 420px; }
    .seite-hero-text { bottom: 48px; }
    .seite-hero-kicker { font-size: 13px; margin-bottom: 18px; }
}

/* --- Intro (Vollkorn-Leitsatz + Fließtext, zentriert) --- */
.intro { text-align: center; }
.abschnitt--intro { padding-bottom: 0; } /* Intro rückt an die erste Sektion (Patrick 10.7.) */
.intro .fliesstext { margin-top: 18px; }
.intro-headline {
    font-family: var(--font-display);
    font-size: clamp(26px, 5vw, 34px);
    font-weight: 700;
    line-height: 1.3;
}

/* --- Split-Sektion (Bild|Text im Wechsel; mobil: Bild randlos ZUERST —
       abgenommenes Badewelt-Muster der Startseite) --- */
.split { display: grid; gap: 30px; }
.split-bild { order: -1; position: relative; margin-inline: calc(-1 * var(--pad)); overflow: hidden; }
.split-bild--duo { margin-inline: 0; overflow: visible; } /* Kachel-Duo bleibt im Raster (Radius/Schatten) */
.split-bild img { display: block; width: 100%; height: 260px; object-fit: cover; object-position: var(--pos, 50% 50%); }
.split-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.split-headline {
    font-family: var(--font-display);
    font-size: clamp(24px, 4.4vw, 30px);
    font-weight: 700;
    line-height: 1.25;
    margin-top: 12px;
}
.split-text .fliesstext { margin-top: 16px; }
.split-text .link-rot { margin-top: 24px; display: inline-block; }
@media (min-width: 1100px) {
    .split { grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }
    .split-bild { order: 0; margin-inline: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
    .split-bild img { height: 420px; }
    .split--tausch { grid-template-columns: 0.95fr 1.05fr; } /* v9: Text schmaler, Bild breiter */
    .split--tausch .split-bild { order: 2; }
}

/* --- Herz-Punkte (Aufzählung mit Herz oben ausgerichtet, strong erlaubt) --- */
.herz-punkte { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.herz-punkte > div { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.55; color: var(--text-standard); }
.herz-punkte img { height: 13px; width: auto; flex-shrink: 0; margin-top: 5px; }
.herz-punkte strong { font-weight: 800; }

/* --- Bild-Duo (zwei Hochformat-Kacheln, zweite versetzt — v9-Muster) --- */
.bild-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bild-duo img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: var(--pos, 50% 50%);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    display: block;
}
.bild-duo img + img { margin-top: 24px; }
@media (min-width: 1100px) {
    .bild-duo { gap: 20px; }
    .bild-duo img { height: 280px; }
    .bild-duo img + img { margin-top: 36px; }
}

/* --- FAQ-Block (Fragen einer Seite; linksbündig, max 860px) --- */
.faq-block { max-width: 860px; }
.faq-block-titel { font-family: var(--font-display); font-size: clamp(24px, 4.4vw, 28px); font-weight: 700; }
.faq-eintrag { border-top: 1px solid var(--linie-trenn); padding: 18px 0; }
.faq-block-titel + .faq-eintrag { margin-top: 18px; }
.faq-frage { font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.faq-antwort { font-size: 16px; line-height: 1.7; color: var(--text-neben); margin-top: 8px; }
.faq-mehr { border-top: 1px solid var(--linie-trenn); padding-top: 14px; }

/* --- CTA-Schluss (Signatur-Zeile + Direktbucher-Satz + Button) --- */
.cta-schluss { text-align: center; }
.cta-schluss .sig { font-size: clamp(30px, 7.4vw, 44px); }
.cta-schluss .fliesstext { max-width: 640px; margin: 22px auto 0; }
.cta-schluss .btn { margin-top: 28px; }
.cta-kontakte { display: flex; justify-content: center; align-items: center; gap: 8px 26px; flex-wrap: wrap; margin-top: 14px; font-weight: 700; }
.cta-kontakte .whatsapp-punkt { margin-right: 7px; }

/* --- Chip-Subnav (NUR Sektion Sommer & Winter; nicht sticky) --- */
.chips { background: var(--surface-page); border-bottom: 1px solid rgba(44, 34, 30, 0.10); }
.chips-zeile { display: flex; align-items: center; gap: 10px; padding-block: 8px; }
.chips-label { display: none; font-weight: 800; color: var(--text-gedaempft); text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; margin-right: 6px; flex-shrink: 0; }
.chips-scroller { position: relative; min-width: 0; flex: 1; }
.chips-band { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 6px; }
.chips-band::-webkit-scrollbar { display: none; }
.chip {
    padding: 11px 16px; /* Tap-Ziel ≥44px mobil */
    border-radius: var(--radius-pill);
    border: 1px solid rgba(44, 34, 30, 0.16);
    color: var(--text-standard);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.chip.aktiv { background: var(--rot); border-color: var(--rot); color: var(--weiss-warm); }
.chips-scroller::before, .chips-scroller::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
}
.chips-scroller::before { left: 0; background: linear-gradient(90deg, var(--surface-page), transparent); }
.chips-scroller::after { right: 0; background: linear-gradient(270deg, var(--surface-page), transparent); }
.chips--links::before, .chips--rechts::after { opacity: 1; }
@media (min-width: 760px) {
    .chips-zeile { padding-block: 10px; }
    .chips-label { display: inline; }
    .chip { padding: 7px 14px; } /* Desktop-Werte 1:1 aus v9 */
}

/* --- Sektions-Signatur („Euer Sommer" — 52px lt. v9; mobile Untergrenze klein
       genug für lange Zeilen wie „So kommt Ihr zu uns" inkl. Schwung) --- */
.sig--sektion { font-size: clamp(26px, 7.6vw, 52px); }

/* --- Karten-Grid (Hub-Seiten: 1 → 2 → 3 Spalten) --- */
.karten-grid { display: grid; gap: 18px; }
@media (min-width: 760px) { .karten-grid { grid-template-columns: 1fr 1fr; gap: 22px; } }
@media (min-width: 1100px) { .karten-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* --- Ziel-Karte (Ausflugsziel/Erlebnis-Karte mit Bild, Herz-Titel, Teaser) --- */
.ziel-karte {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none;
    color: var(--text-standard);
}
.ziel-karte img { width: 100%; height: 190px; object-fit: cover; object-position: var(--pos, 50% 50%); display: block; }
.ziel-karte-inhalt { padding: 20px 24px 22px; display: flex; flex-direction: column; flex: 1; }
.ziel-karte-titel { display: flex; align-items: center; gap: 9px; }
.ziel-karte-titel img { height: 13px; width: auto; flex-shrink: 0; }
.ziel-karte-titel span { font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.ziel-karte-text { font-size: 14.5px; line-height: 1.6; color: var(--text-neben); margin-top: 8px; flex: 1; }
.ziel-karte-mehr { font-size: 14px; font-weight: 800; color: var(--rot); margin-top: 14px; }
.ziel-karte-zeile { font-size: 13px; font-weight: 700; color: var(--text-gedaempft); margin-top: 6px; }

/* --- Mehr-Karte (gestrichelte Abschluss-Kachel im Karten-Grid) --- */
.mehr-karte {
    background: var(--surface-card);
    border: 2px dashed var(--linie-gestrichelt);
    border-radius: var(--radius-card);
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}
.mehr-karte p { font-size: 15px; line-height: 1.6; color: var(--text-neben); }
.mehr-karte p strong { color: var(--text-standard); }
.mehr-karte p a { color: var(--rot); font-weight: 700; }
.mehr-karte .link-rot { font-size: 15px; }

/* --- Foto-Collage (1 großes + 2 kleine Bilder; Desktop 2fr/1fr lt. v9) --- */
.collage { display: grid; gap: 14px; }
.collage img { width: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); border-radius: var(--radius-card); box-shadow: var(--shadow-card); display: block; }
.collage-gross { height: 230px; }
.collage-neben { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.collage-neben img { height: 130px; }
@media (min-width: 1100px) {
    .collage { grid-template-columns: 2fr 1fr; gap: 20px; }
    .collage--spiegel { grid-template-columns: 1fr 2fr; }
    .collage--spiegel .collage-gross { order: 2; }
    .collage-gross { height: 360px; }
    .collage-neben { grid-template-columns: 1fr; gap: 20px; }
    .collage-neben img { height: 170px; }
}

/* Angebots-Karte als Eyecatcher (Patrick 10.7.): roter Rahmen + Badge — Karten-Typ egal */
.karte--angebot { border: 2px solid var(--rot); position: relative; }
.angebot-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    background: var(--rot);
    color: var(--weiss-warm);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 20px;
}

/* Sektions-Lead unter der roten Signatur (Hubs + Überblick) */
.ziel-gruppe-text { font-size: 16.5px; line-height: 1.65; color: var(--text-neben); max-width: 620px; margin-top: 16px; }

/* --- Hinweis-Banner (Herz-Satz + Button, z. B. Sommer-Card-Angebot) --- */
.hinweis-banner {
    background: var(--creme);
    border-radius: var(--radius-card);
    padding: 22px 24px;
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.hinweis-banner--hell { background: var(--surface-card); box-shadow: var(--shadow-card); }
.hinweis-banner-text { display: flex; align-items: flex-start; gap: 12px; font-size: 16.5px; line-height: 1.55; }
.hinweis-banner-text img { height: 15px; width: auto; flex-shrink: 0; margin-top: 5px; }
.hinweis-banner .btn-umriss { flex-shrink: 0; }
@media (min-width: 1100px) { .hinweis-banner { padding: 26px 32px; gap: 32px; } }

/* --- Aktions-Teaser-Slot (redaktionell; Startseite + Angebote) --- */
.aktion-slot { padding-bottom: 56px; background: var(--creme); }
.aktion-banner {
    background: var(--rot);
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(120,30,30,0.28);
    padding: 24px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.aktion-links { display: flex; align-items: center; gap: 20px; }
.aktion-headline {
    display: inline-block;
    font-family: var(--font-accent);
    font-weight: 700;
    font-size: clamp(26px, 5vw, 32px);
    color: var(--weiss-warm);
    line-height: 1;
    transform: rotate(-2deg);
    transform-origin: left bottom;
}
.aktion-text { font-size: 15px; line-height: 1.6; color: rgba(251,247,239,0.9); margin-top: 8px; }
.aktion-rechts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.aktion-code {
    background: var(--weiss-warm);
    color: var(--rot);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.1em;
    padding: 12px 22px;
    border-radius: 10px;
}
@media (min-width: 1100px) {
    .aktion-slot { padding-bottom: 88px; }
    .aktion-banner { padding: 28px 36px; }
}

/* (verschoben aus startseite.css — geteilt mit Lage & Kontakt)
   Lage-Karte: Desktop Marker-Labels, mobil Nummern-Kreise + Legende. */
.lage .sig { margin-top: 16px; }
.lage .fliesstext { margin-top: 20px; }
.lage-karte { position: relative; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-card); margin-top: 40px; }
.lage-karte > img { width: 100%; height: auto; display: block; }
.lage-marker { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.lage-marker-kreis {
    width: 22px;
    height: 22px;
    background: var(--rot);
    border: 2px solid rgba(251,247,239,0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lage-marker-kreis span { color: var(--weiss-warm); font-size: 11px; font-weight: 800; }
.lage-marker-label { display: none; }
.lage-legende { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lage-legende li { display: flex; align-items: flex-start; gap: 10px; }
.lage-legende-text { font-size: 14px; line-height: 1.5; color: var(--text-neben); }
.lage-legende-text strong { color: var(--text-standard); }
.lage-legende-nummer {
    display: inline-flex;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--rot);
    color: var(--weiss-warm);
    font-size: 11px;
    font-weight: 800;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lage-punkte { display: none; } /* mobil: Adresse ist Teil der Legende (6a) */
.lage-punkte div { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; }
.lage-punkte img { height: 13px; width: auto; }
.lage-aktion { margin-top: 32px; }
@media (min-width: 760px) {
    .lage-karte { margin-top: 48px; }
    .lage-marker-kreis {
        width: var(--kreis);
        height: var(--kreis);
        background: transparent;
        border: 3px solid var(--rot);
        box-shadow: 0 0 0 2px rgba(251,247,239,0.7);
    }
    .lage-marker-kreis span { display: none; }
    .lage-marker-label {
        display: block;
        background: rgba(251,247,239,0.88);
        color: var(--text-standard);
        font-size: 13px;
        font-weight: 800;
        padding: 6px 12px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(25,18,12,0.3);
        white-space: nowrap;
        margin-top: 8px;
        text-align: center;
    }
    .lage-marker-label span { font-weight: 700; font-size: 11.5px; color: var(--text-neben); }
    .lage-marker-label--rot { background: rgba(166,36,42,0.92); color: var(--weiss-warm); }
    .lage-marker-label--rot span { color: rgba(251,247,239,0.85); }
    .lage-marker-label--creme-rot { color: var(--rot); }
    .lage-marker-label--versetzt { margin-left: -56px; }
    .lage-legende { display: none; }
    .lage-punkte { display: flex; flex-direction: row; justify-content: center; gap: 40px; margin-top: 32px; flex-wrap: wrap; }
    .lage-aktion { margin-top: 36px; }
}


/* --- Formulare (statische Struktur; Versand = spätere Phase — geteilt
       von Lage & Kontakt und Kontakt) --- */
.formular-karte { padding: 28px 24px 32px; }
.formular-titel { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; }
.formular-titel img { height: 15px; width: auto; }
.formular-text { font-size: 14.5px; color: var(--text-neben); margin-top: 8px; line-height: 1.6; }
.feld { display: block; font-size: 13px; font-weight: 700; color: var(--text-neben); margin-top: 16px; }
.feld input, .feld select, .feld textarea {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 12px 14px;
    border: 1px solid var(--linie-trenn);
    border-radius: var(--radius-btn);
    background: var(--surface-page);
    font-family: var(--font-ui);
    font-size: 15px;
    color: var(--text-standard);
}
.feld input::placeholder, .feld textarea::placeholder { color: var(--text-gedaempft); }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--rot); outline-offset: 1px; border-color: var(--rot); }
.feld-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 8px; } /* minmax(0,…): Date-Inputs haben intrinsische Min-Breite */
.feld-zeile .feld { margin-top: 8px; }
.formular-fuss { display: flex; align-items: center; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.formular-fuss button { border: 0; cursor: pointer; font-family: var(--font-ui); }
.formular-fuss span { font-size: 14px; font-weight: 600; color: var(--text-gedaempft); }
@media (min-width: 1100px) { .formular-karte { padding: 40px 44px; } }

.whatsapp-punkt--gross { width: 22px; height: 22px; }
.whatsapp-punkt--gross img { width: 13px; height: 13px; }

/* --- Crosslink-Panel (dunkel; Hotel + Erlebnis-Hubs) --- */
.crosslink-panel {
    background: var(--tinte);
    border-radius: 18px;
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}
.crosslink-titel { font-family: var(--font-display); font-size: clamp(21px, 2.2vw, 27px); font-weight: 700; color: var(--weiss-warm); line-height: 1.3; }
.crosslink-text { font-size: 16px; line-height: 1.7; color: rgba(251, 247, 239, 0.8); margin-top: 12px; max-width: 620px; }
@media (min-width: 1100px) { .crosslink-panel { padding: 44px; } }


/* Tab-Panels (tabs.js: Galerie/Kontakt): [hidden] muss auch gewinnen, wenn das
   Panel selbst ein display setzt (z. B. .kontakt-formular { display:flex }). */
.tab-panel[hidden] { display: none; }

/* --- Inline-Links im Fließtext (Patrick 10.7.: nie Browser-Blau — Markenrot,
       dezenter Unterstrich; gilt für Content-Absätze, Herz-Punkte, FAQ) --- */
.fliesstext a, .herz-punkte a, .faq-antwort a, .hub-absatz a, .saison-absatz a,
.detail-artikel a, .ski-text a, .ziel-gruppe-text a, .cta-kontakte a {
    color: var(--rot);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* --- Zimmer-Karte (Partial zimmer-karte.php: Hub Zimmer & Preise, Startseite) --- */
.zimmer-karte { overflow: hidden; display: flex; flex-direction: column; }
.zimmer-karte > img { width: 100%; height: 230px; object-fit: cover; object-position: var(--pos, 50% 50%); display: block; }
.zimmer-karte-inhalt { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.zimmer-karte-name { font-family: var(--font-display); font-size: 24px; font-weight: 700; }
.zimmer-karte-zeile { font-size: 14px; font-weight: 700; color: var(--text-gedaempft); margin: 4px 0 2px; }
.zimmer-karte-haus { font-size: 13px; color: var(--text-neben); margin-bottom: 10px; }
.zimmer-karte-beleg { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; margin-bottom: 12px; }
.zimmer-karte-beleg img { height: 12px; width: auto; }
.zimmer-karte-text { font-size: 15px; line-height: 1.65; color: var(--text-neben); }
.zimmer-karte-fuss { margin-top: auto; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.zimmer-karte-preis { font-size: 14px; font-weight: 800; color: var(--rot); text-decoration: none; }
.zimmer-karte-details { font-size: 14px; font-weight: 700; color: var(--rot); text-decoration: underline; text-underline-offset: 4px; }