/**
 * ============================================================================
 * landingpage-premium.css — Premium Polish Pass v0.5.13
 * ============================================================================
 * Plugin:  dg-ferienhaus-ort-hund
 * Lädt:    NACH landingpage.css UND landingpage-polish.css (höchste Specificity)
 *
 * Zweck:
 * Hebt die Landingpage von "ordentlich" auf "premium". Sieben Hebel:
 *
 *   1. DISPLAY-SCHRIFT — Fraunces (Google Fonts) für alle Headlines.
 *      Eine warme moderne Serif die nach Boutique-Hotel/Reisemagazin
 *      aussieht statt nach Tech-Startup.
 *   2. OFF-WHITE — wärmere Hintergründe (#fafaf9 statt #ffffff)
 *   3. LAYERED SHADOWS — drei gestapelte Shadows à la Stripe statt
 *      einer einzelnen Box-Shadow
 *   4. TYPOGRAPHIE — größere Display-Sizes mit besserem Letter-Spacing,
 *      konsistente Hierarchie
 *   5. CARD-REFINEMENT — subtilere Borders, sanftere Hover, höhere
 *      Border-Radii für Premium-Cards
 *   6. CTA-POLISH — softerer Glow, präzisere Hover-States
 *   7. ANIMATIONS — definiert die fade-up Keyframes für reveal.js
 *
 * Inhaltsverzeichnis:
 *   1. Foundation (Font + Off-White)              Zeile  35 –  85
 *   2. Hero-Refinement                             Zeile  87 – 145
 *   3. Section-Headlines (Fraunces + Sizes)        Zeile 147 – 215
 *   4. Card-Polish (Layered Shadows)               Zeile 217 – 290
 *   5. CTA & Buttons                               Zeile 292 – 340
 *   6. Reveal-Animations                           Zeile 342 – 390
 *   7. Mobile Tuning                               Zeile 392 – 440
 * ============================================================================
 */

/* ============================================================================
   1. FOUNDATION — Display-Font + Off-White
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --dg-fhoh-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --dg-fhoh-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

    --dg-fhoh-bg-warm: #fafaf9;
    --dg-fhoh-bg-warm-2: #f5f5f4;
    --dg-fhoh-bg-warm-tint: linear-gradient(180deg, #fafaf9 0%, #f5f5f4 50%, #fafaf9 100%);

    --dg-fhoh-ink: #0c0a09;
    --dg-fhoh-ink-2: #292524;
    --dg-fhoh-ink-3: #57534e;
    --dg-fhoh-ink-4: #78716c;

    --dg-fhoh-accent: #b91c1c;
    --dg-fhoh-accent-deep: #7f1d1d;
    --dg-fhoh-accent-soft: #fef2f2;
}

/* Off-White für die "weißen" Sektionen */
.dg-fhoh-page,
.dg-fhoh-usp,
.dg-fhoh-search,
.dg-fhoh-map,
.dg-fhoh-dogfriendly,
.dg-fhoh-faq {
    background: var(--dg-fhoh-bg-warm) !important;
}

/* Silberne Sektionen — wärmer und edler */
.dg-fhoh-einleitung,
.dg-fhoh-houses,
.dg-fhoh-erleben,
.dg-fhoh-prakt,
.dg-fhoh-verwandte {
    background: var(--dg-fhoh-bg-warm-tint) !important;
}

/* Karten-Hintergründe ebenfalls Off-White */
.dg-fhoh-row-2col > section,
.dg-fhoh-houses-card,
.dg-fhoh-erleben-card,
.dg-fhoh-dogfriendly-card,
.dg-fhoh-prakt-card,
.dg-fhoh-verwandte-card,
.dg-fhoh-haus-card,
.dg-fhoh-faq-item,
.dg-fhoh-search-bar,
.dg-fhoh-usp-card {
    background: #ffffff !important;
}

/* ============================================================================
   2. HERO — Display-Font + Größere H1
   ============================================================================ */

.dg-fhoh-hero-h1 {
    font-family: var(--dg-fhoh-display) !important;
    font-size: clamp(38px, 5.5vw, 64px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.05 !important;
    margin: 0 0 14px 0 !important;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35) !important;
}

.dg-fhoh-hero-claim {
    font-family: var(--dg-fhoh-body) !important;
    font-size: clamp(15px, 1.5vw, 18px) !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
    opacity: 0.95 !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Hero-Overlay — etwas dunkler unten für bessere Lesbarkeit */
.dg-fhoh-hero-overlay {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0.25) 40%,
        rgba(0, 0, 0, 0.55) 100%) !important;
}

/* Region-Badge etwas dezenter, edler */
.dg-fhoh-hero-badge {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    padding: 7px 14px !important;
}

/* Breadcrumb dezenter */
.dg-fhoh-breadcrumb {
    opacity: 0.85 !important;
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
}

/* ============================================================================
   3. SECTION-HEADLINES — Manrope, größere Sizes
   ============================================================================ */

/* GLOBAL: Alle Headings auf der Page bekommen Manrope */
.dg-fhoh-page h1,
.dg-fhoh-page h2,
.dg-fhoh-page h3,
.dg-fhoh-page h4,
.dg-fhoh-page h5,
.dg-fhoh-page h6 {
    font-family: var(--dg-fhoh-display) !important;
    letter-spacing: -0.015em !important;
}

/* Spezielle Card-Titles die nicht als h-Tag markiert sind */
.dg-fhoh-page [class*="-card-title"],
.dg-fhoh-page [class*="-card-name"],
.dg-fhoh-page .dg-fhoh-verwandte-card-name,
.dg-fhoh-page .dg-fhoh-house-card-title,
.dg-fhoh-page .dg-fhoh-erleben-card-title,
.dg-fhoh-page .dg-fhoh-dogfriendly-card-title,
.dg-fhoh-page .dg-fhoh-prakt-card-title {
    font-family: var(--dg-fhoh-display) !important;
    letter-spacing: -0.01em !important;
}

.dg-fhoh-houses-title,
.dg-fhoh-erleben-title,
.dg-fhoh-dogfriendly-title,
.dg-fhoh-prakt-title,
.dg-fhoh-faq-title,
.dg-fhoh-verwandte-title,
.dg-fhoh-map-title {
    font-family: var(--dg-fhoh-display) !important;
    font-weight: 700 !important;
    font-size: clamp(28px, 3.4vw, 40px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: var(--dg-fhoh-ink) !important;
}

/* Subtitles unter den Section-Titeln */
.dg-fhoh-houses-subtitle,
.dg-fhoh-erleben-subtitle,
.dg-fhoh-dogfriendly-subtitle,
.dg-fhoh-prakt-subtitle,
.dg-fhoh-faq-subtitle,
.dg-fhoh-verwandte-subtitle,
.dg-fhoh-map-subtitle {
    font-family: var(--dg-fhoh-body) !important;
    font-size: 15px !important;
    color: var(--dg-fhoh-ink-4) !important;
    margin-top: 10px !important;
    letter-spacing: 0.01em !important;
}

/* Roter Akzent-Strich edler — dünner und länger */
.dg-fhoh-houses-header::after,
.dg-fhoh-erleben-header::after,
.dg-fhoh-dogfriendly-header::after,
.dg-fhoh-prakt-header::after,
.dg-fhoh-faq-header::after,
.dg-fhoh-verwandte-header::after,
.dg-fhoh-map-header::after {
    width: 48px !important;
    height: 2px !important;
    background: var(--dg-fhoh-accent) !important;
    margin-top: 22px !important;
}

/* Roter Akzent-Strich oben in silbernen Sektionen — entfernen,
   wirkt mit Fraunces zu busy */
.dg-fhoh-einleitung::before,
.dg-fhoh-houses::before,
.dg-fhoh-erleben::before,
.dg-fhoh-prakt::before,
.dg-fhoh-verwandte::before,
.dg-fhoh-row-2col::before {
    display: none !important;
}

/* Einleitungs-Card aufgewertet */
.dg-fhoh-einleitung-body {
    font-family: var(--dg-fhoh-body) !important;
    font-size: 17px !important;
    line-height: 1.78 !important;
    color: var(--dg-fhoh-ink-2) !important;
    letter-spacing: -0.005em !important;
}

.dg-fhoh-einleitung-body p {
    margin: 0 0 18px 0;
}

/* Einleitung in der 2-col Row */
.dg-fhoh-row-einleitung-karte .dg-fhoh-einleitung-body {
    font-size: 16px !important;
    line-height: 1.72 !important;
}

/* ============================================================================
   4. CARD-POLISH — Layered Shadows à la Stripe
   ============================================================================ */

/* Generischer Premium-Shadow als CSS-Variable für Wiederverwendung */
:root {
    --dg-fhoh-shadow-card:
        0 0 0 1px rgba(0, 0, 0, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 8px 24px -8px rgba(0, 0, 0, 0.08),
        0 24px 48px -16px rgba(0, 0, 0, 0.10);

    --dg-fhoh-shadow-card-hover:
        0 0 0 1px rgba(185, 28, 28, 0.18),
        0 2px 4px rgba(0, 0, 0, 0.04),
        0 16px 32px -8px rgba(0, 0, 0, 0.12),
        0 40px 64px -16px rgba(0, 0, 0, 0.16);

    --dg-fhoh-shadow-card-soft:
        0 0 0 1px rgba(0, 0, 0, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.03),
        0 4px 12px -4px rgba(0, 0, 0, 0.06);
}

/* Alle großen Cards bekommen den Premium-Shadow + dezenten Border */
.dg-fhoh-row-2col > section,
.dg-fhoh-einleitung-inner,
.dg-fhoh-search-bar,
.dg-fhoh-faq-item {
    border: none !important;
    box-shadow: var(--dg-fhoh-shadow-card) !important;
    border-radius: 20px !important;
}

/* Mittlere Cards (Häuser, POIs, DogFriendly, Prakt, Verwandte) */
.dg-fhoh-houses-card,
.dg-fhoh-erleben-card,
.dg-fhoh-dogfriendly-card,
.dg-fhoh-prakt-card,
.dg-fhoh-verwandte-card,
.dg-fhoh-haus-card {
    border: none !important;
    box-shadow: var(--dg-fhoh-shadow-card-soft) !important;
    border-radius: 18px !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dg-fhoh-houses-card:hover,
.dg-fhoh-erleben-card:hover,
.dg-fhoh-dogfriendly-card:hover,
.dg-fhoh-prakt-card:hover,
.dg-fhoh-verwandte-card:hover,
.dg-fhoh-haus-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--dg-fhoh-shadow-card-hover) !important;
}

/* Kleine Tiles (USP) bekommen ebenfalls Premium-Shadow */
.dg-fhoh-usp-card {
    border: none !important;
    box-shadow: var(--dg-fhoh-shadow-card-soft) !important;
}

.dg-fhoh-usp-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--dg-fhoh-shadow-card) !important;
}

/* USP-Number in Akzent-Deep statt Standard-Rot */
.dg-fhoh-usp-number {
    color: var(--dg-fhoh-accent) !important;
    font-variant-numeric: tabular-nums !important;
}

/* USP-Icon-Background subtiler */
.dg-fhoh-usp-icon {
    background: var(--dg-fhoh-accent-soft) !important;
}

.dg-fhoh-usp-icon svg {
    color: var(--dg-fhoh-accent) !important;
}

/* FAQ-Items subtiler */
.dg-fhoh-faq-item {
    box-shadow: var(--dg-fhoh-shadow-card-soft) !important;
    transition: box-shadow 0.3s ease !important;
}

.dg-fhoh-faq-item[open] {
    box-shadow: var(--dg-fhoh-shadow-card),
                0 0 0 1px var(--dg-fhoh-accent) !important;
}

.dg-fhoh-faq-question {
    font-family: var(--dg-fhoh-body) !important;
    font-weight: 700 !important;
    color: var(--dg-fhoh-ink) !important;
}

.dg-fhoh-faq-answer {
    color: var(--dg-fhoh-ink-3) !important;
    line-height: 1.78 !important;
}

/* Praktische Infos: Icon-Background + Ink-Farben */
.dg-fhoh-prakt-card-icon {
    filter: saturate(0.9);
}

.dg-fhoh-prakt-card-title {
    font-family: var(--dg-fhoh-display) !important;
    font-weight: 700 !important;
    color: var(--dg-fhoh-ink) !important;
    font-size: 20px !important;
    letter-spacing: -0.01em !important;
}

.dg-fhoh-prakt-card-text {
    color: var(--dg-fhoh-ink-3) !important;
    line-height: 1.72 !important;
}

/* Section-Cards in 2-col Rows: schöner Inset + größeres Padding */
.dg-fhoh-row-2col > section {
    padding: 44px 40px !important;
}

/* ============================================================================
   5. CTA & BUTTONS — Premium-Polish
   ============================================================================ */

/* Suchen-Button: rot als primary CTA, dunkler bei Hover */
.dg-fhoh-search-btn {
    background: var(--dg-fhoh-accent) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 4px 14px rgba(185, 28, 28, 0.28) !important;
    letter-spacing: 0.01em !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dg-fhoh-search-btn:hover {
    background: var(--dg-fhoh-accent-deep) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.08),
        0 8px 22px rgba(185, 28, 28, 0.38),
        0 0 0 3px rgba(185, 28, 28, 0.12) !important;
    transform: translateY(-1px) !important;
}

/* "Alle ansehen"-CTA bei Top-Häusern — primärer CTA, also rot */
.dg-fhoh-houses-allhouses a {
    background: var(--dg-fhoh-accent) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 6px 18px rgba(185, 28, 28, 0.28) !important;
    letter-spacing: 0.01em !important;
    font-weight: 700 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dg-fhoh-houses-allhouses a:hover {
    background: var(--dg-fhoh-accent-deep) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.08),
        0 14px 32px rgba(185, 28, 28, 0.38) !important;
    transform: translateY(-2px) !important;
}

/* Filter-Chips edler */
.dg-fhoh-search-chip {
    background: #ffffff !important;
    border: 1px solid #e7e5e4 !important;
    color: var(--dg-fhoh-ink-3) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.25s ease !important;
}

.dg-fhoh-search-chip:hover {
    border-color: var(--dg-fhoh-accent) !important;
    color: var(--dg-fhoh-accent) !important;
    box-shadow: 0 4px 12px rgba(185, 28, 28, 0.12) !important;
    transform: translateY(-1px) !important;
}

.dg-fhoh-search-chip.is-active {
    background: var(--dg-fhoh-ink) !important;
    border-color: var(--dg-fhoh-ink) !important;
    color: #ffffff !important;
}

/* CTA-Footer-Block aufwerten */
.dg-fhoh-cta {
    background: linear-gradient(180deg, var(--dg-fhoh-bg-warm) 0%, var(--dg-fhoh-bg-warm-2) 100%) !important;
}

.dg-fhoh-cta-inner {
    background: var(--dg-fhoh-ink) !important;
    color: #ffffff !important;
    border-radius: 28px !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 24px 48px -12px rgba(0, 0, 0, 0.25),
        0 48px 96px -24px rgba(185, 28, 28, 0.18) !important;
    border: none !important;
    padding: 64px 56px !important;
}

.dg-fhoh-cta-title {
    font-family: var(--dg-fhoh-display) !important;
    font-size: clamp(28px, 3.6vw, 42px) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
}

.dg-fhoh-cta-subtitle {
    color: rgba(255, 255, 255, 0.75) !important;
}

.dg-fhoh-cta-btn-primary {
    background: var(--dg-fhoh-accent) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.1),
        0 8px 24px rgba(185, 28, 28, 0.4) !important;
}

.dg-fhoh-cta-btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.1),
        0 16px 36px rgba(185, 28, 28, 0.5) !important;
}

/* ============================================================================
   6. REVEAL-ANIMATIONS — Sanfte Fade-Up beim Scroll
   ============================================================================
   Wird vom reveal.js gesteuert via .is-revealed Klasse.
*/

@media (prefers-reduced-motion: no-preference) {
    .dg-fhoh-houses,
    .dg-fhoh-erleben,
    .dg-fhoh-dogfriendly,
    .dg-fhoh-prakt,
    .dg-fhoh-faq,
    .dg-fhoh-verwandte,
    .dg-fhoh-map,
    .dg-fhoh-row-2col > section {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .dg-fhoh-houses.is-revealed,
    .dg-fhoh-erleben.is-revealed,
    .dg-fhoh-dogfriendly.is-revealed,
    .dg-fhoh-prakt.is-revealed,
    .dg-fhoh-faq.is-revealed,
    .dg-fhoh-verwandte.is-revealed,
    .dg-fhoh-map.is-revealed,
    .dg-fhoh-row-2col > section.is-revealed {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   7. MOBILE TUNING
   ============================================================================ */

@media (max-width: 768px) {
    .dg-fhoh-hero-h1 {
        font-size: clamp(32px, 8vw, 44px) !important;
    }

    .dg-fhoh-houses-title,
    .dg-fhoh-erleben-title,
    .dg-fhoh-dogfriendly-title,
    .dg-fhoh-prakt-title,
    .dg-fhoh-faq-title,
    .dg-fhoh-verwandte-title,
    .dg-fhoh-map-title {
        font-size: clamp(24px, 6vw, 32px) !important;
    }

    .dg-fhoh-row-2col > section {
        padding: 32px 26px !important;
    }

    .dg-fhoh-cta-inner {
        padding: 44px 32px !important;
        border-radius: 22px !important;
    }

    .dg-fhoh-einleitung-body {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }
}

/* ============================================================================
   8. v0.5.15 — KOMPAKTE HOUSE-CARD (Title + Location + CTA entfernt)
   ============================================================================
   Card-Body besteht jetzt nur noch aus einer einzigen Specs-Zeile.
   Ohne Title, Location, Beach-Distance-Zeile und "Details ansehen"-CTA
   spart das ~120 px vertikalen Platz pro Card.
*/

.dg-fhoh-house-card-body {
    padding: 14px 18px 16px !important;
}

/* v0.5.16: Location-Zeile (nur sichtbar bei Unterorten) etwas
   kompakter — kleinere Schrift + weniger margin */
.dg-fhoh-house-card-location {
    font-size: 11px !important;
    margin-bottom: 6px !important;
    color: var(--dg-fhoh-ink-4) !important;
    letter-spacing: 0.01em;
}

.dg-fhoh-house-card-location svg {
    color: var(--dg-fhoh-accent) !important;
}

.dg-fhoh-house-card-meta {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: none !important;
    font-size: 13px !important;
    color: var(--dg-fhoh-ink-3) !important;
    line-height: 1.4 !important;
}

/* Einzelnes Spec mit Icon + Wert */
.dg-fhoh-house-card-spec {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--dg-fhoh-ink-3) !important;
    white-space: nowrap;
}

.dg-fhoh-house-card-spec svg {
    color: var(--dg-fhoh-ink-4);
    flex-shrink: 0;
    opacity: 0.8;
}

.dg-fhoh-house-card-spec strong {
    color: var(--dg-fhoh-ink) !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
}

/* Strand-Distanz: gleicher Layout-Slot wie andere Specs, nur rot
   eingefärbt — kein Pill-Container, kein margin-left:auto.
   Garantiert dass alles auf einer Zeile bleibt. */
.dg-fhoh-house-card-spec--beach {
    color: var(--dg-fhoh-accent) !important;
    font-weight: 600;
}

.dg-fhoh-house-card-spec--beach svg {
    color: var(--dg-fhoh-accent) !important;
    opacity: 1;
}

.dg-fhoh-house-card-spec--beach strong {
    color: var(--dg-fhoh-accent) !important;
}

/* Mobile: kompaktere gaps damit alles in eine Zeile passt */
@media (max-width: 480px) {
    .dg-fhoh-house-card-meta {
        gap: 10px !important;
        font-size: 12px !important;
    }

    .dg-fhoh-house-card-spec {
        gap: 4px;
    }
}

/* ============================================================================
   10. v0.5.29 — KARTE GRÖSSER & SYNCHRON ZUM EINLEITUNGSTEXT
   ============================================================================
   v0.5.30: Row 2col komplett auf CSS-Grid umgestellt. Flexbox mit
   align-items: stretch ist im Zusammenspiel mit flex-wrap: wrap unzuverlässig
   weil Browser dann auf align-content fallen können. CSS-Grid stretcht
   die Cells dagegen IMMER auf gleiche Höhe — exakt was wir hier brauchen.

   Plus: die Karte füllt jetzt zuverlässig den ganzen Card-Body, weil die
   parent Section per Grid eine konkrete Höhe bekommt.
*/

/* Row 2col als CSS-Grid statt Flexbox — zuverlässiges Stretching */
.dg-fhoh-row-2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    align-items: stretch !important;
}

/* Bei schmalen Viewports auf 1 Spalte wechseln */
@media (max-width: 900px) {
    .dg-fhoh-row-2col {
        grid-template-columns: 1fr !important;
    }
}

/* Section selbst muss flex column sein damit der Inhalt expandiert */
.dg-fhoh-row-2col > section {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.dg-fhoh-row-einleitung-karte .dg-fhoh-map,
.dg-fhoh-row-einleitung-karte .dg-fhoh-map-inner {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

.dg-fhoh-row-einleitung-karte .dg-fhoh-map-container {
    flex: 1 1 auto !important;
    min-height: 480px !important;
    height: auto !important;
    position: relative !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    /* Subtiler Inset-Border für Premium-Look */
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.06),
        0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.dg-fhoh-row-einleitung-karte .leaflet-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 480px !important;
    border-radius: 14px !important;
}

/* Map-Header kompakt */
.dg-fhoh-row-einleitung-karte .dg-fhoh-map-header {
    margin-bottom: 18px !important;
    flex-shrink: 0;
}

.dg-fhoh-row-einleitung-karte .dg-fhoh-map-subtitle {
    font-size: 13px !important;
    color: var(--dg-fhoh-ink-4) !important;
}

/* Einleitungstext-Wrapper als flex column damit der Body expandiert */
.dg-fhoh-row-einleitung-karte .dg-fhoh-einleitung-inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    flex: 1 1 auto !important;
}

.dg-fhoh-row-einleitung-karte .dg-fhoh-einleitung-body {
    flex: 1 1 auto !important;
}

/* ----------------------------------------------------------------------------
   v0.5.29 — Einleitungstext: Lead-Paragraph größer für Magazin-Feeling
   ---------------------------------------------------------------------------- */

.dg-fhoh-row-einleitung-karte .dg-fhoh-einleitung-body p:first-child {
    font-size: 17px !important;
    line-height: 1.7 !important;
    color: var(--dg-fhoh-ink-2) !important;
    font-weight: 500 !important;
    margin-bottom: 18px !important;
}

.dg-fhoh-row-einleitung-karte .dg-fhoh-einleitung-body p {
    margin-bottom: 14px !important;
}

.dg-fhoh-row-einleitung-karte .dg-fhoh-einleitung-body p:last-child {
    margin-bottom: 0 !important;
}

/* Mobile: Karte niedriger */
@media (max-width: 768px) {
    .dg-fhoh-row-einleitung-karte .dg-fhoh-map-container,
    .dg-fhoh-row-einleitung-karte .leaflet-container {
        min-height: 360px !important;
    }

    .dg-fhoh-row-einleitung-karte .dg-fhoh-einleitung-body p:first-child {
        font-size: 16px !important;
    }
}

/* ============================================================================
   11. v0.5.33 — PRAKTISCHE INFOS Card-Polish
   ============================================================================
   - SVG-Icons statt Emojis (siehe praktische-infos.php)
   - Icon-Container mit accent-soft Hintergrund (wie USP-Tiles)
   - Cards exakt gleich hoch via CSS Grid
   - Kompakteres Padding
*/

.dg-fhoh-prakt-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
}

@media (max-width: 900px) {
    .dg-fhoh-prakt-grid {
        grid-template-columns: 1fr !important;
    }
}

.dg-fhoh-prakt-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 32px 30px !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 18px !important;
    box-shadow: var(--dg-fhoh-shadow-card-soft) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    height: 100% !important;
}

.dg-fhoh-prakt-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--dg-fhoh-shadow-card) !important;
}

/* Icon-Container — wie USP-Tiles: rounded square, accent-soft bg */
.dg-fhoh-prakt-card-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 0 18px 0 !important;
    background: var(--dg-fhoh-accent-soft) !important;
    border-radius: 12px !important;
    color: var(--dg-fhoh-accent) !important;
    flex-shrink: 0 !important;
    /* Reset für ehemalige Emoji-Größen */
    font-size: 0 !important;
    line-height: 0 !important;
}

.dg-fhoh-prakt-card-icon svg {
    color: var(--dg-fhoh-accent) !important;
    width: 24px !important;
    height: 24px !important;
}

.dg-fhoh-prakt-card-title {
    font-family: var(--dg-fhoh-display) !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: var(--dg-fhoh-ink) !important;
    margin: 0 0 12px 0 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
}

.dg-fhoh-prakt-card-text {
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    color: var(--dg-fhoh-ink-3) !important;
    margin: 0 !important;
    flex: 1;
}

/* v0.5.34: Linkify-Links in den praktischen Infos.
   Subtile Unterstreichung in accent-Farbe, beim Hover voll farbig. */
.dg-fhoh-prakt-link,
.dg-fhoh-faq-link {
    color: var(--dg-fhoh-accent) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(185, 28, 28, 0.35);
    font-weight: 600;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.dg-fhoh-prakt-link:hover,
.dg-fhoh-faq-link:hover {
    color: var(--dg-fhoh-accent-deep) !important;
    border-bottom-color: var(--dg-fhoh-accent);
}

/* v0.5.35: FAQ-Fragen in Manrope statt Inter */
.dg-fhoh-faq-question-text {
    font-family: var(--dg-fhoh-display) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

/* FAQ-Header etwas mehr Abstand */
.dg-fhoh-faq-header {
    margin-bottom: 36px !important;
}

/* ============================================================================
   12. v0.5.36 — VERWANDTE ORTE Card-Redesign
   ============================================================================
   Vorher: Ortsname als weißer Text mit Gradient-Overlay AUF dem Bild —
   bei hellen Bildern (Tornby Leuchtturm + Himmel) kaum lesbar.

   Jetzt: Klare Trennung
   - Bild oben mit fixer Aspect-Ratio
   - Weißer Body unten mit dunklem Text auf weißem Hintergrund
   - CTA-Footer wie gehabt
   Konsistent mit POI-, DogFriendly- und House-Cards.
*/

.dg-fhoh-verwandte-card {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    box-shadow: var(--dg-fhoh-shadow-card-soft) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dg-fhoh-verwandte-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--dg-fhoh-shadow-card) !important;
}

/* Bild-Container: feste Aspect-Ratio damit alle Cards gleich aussehen */
.dg-fhoh-verwandte-card-image {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 11 !important;
    overflow: hidden !important;
    background: #f5f5f4 !important;
    /* WICHTIG: Höhe nicht durch Inhalt erweitern lassen */
    flex-shrink: 0 !important;
}

.dg-fhoh-verwandte-card-image img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dg-fhoh-verwandte-card:hover .dg-fhoh-verwandte-card-image img {
    transform: scale(1.05) !important;
}

/* Distance-Badge oben rechts auf dem Bild */
.dg-fhoh-verwandte-distance {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px) !important;
    color: var(--dg-fhoh-accent) !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

/* NEU: Body unter dem Bild — weißer Hintergrund, dunkler Text */
.dg-fhoh-verwandte-card-body {
    padding: 16px 18px 6px !important;
    background: #ffffff !important;
    flex: 1 1 auto !important;
}

/* Ortsname in Manrope, dunkel, klar lesbar */
.dg-fhoh-verwandte-card-title {
    font-family: var(--dg-fhoh-display) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--dg-fhoh-ink) !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    /* Reset von potentiellen Overlay-Stilen aus dem Base-CSS */
    text-shadow: none !important;
    background: none !important;
}

/* "X Ferienhäuser" als kleine Caption darunter */
.dg-fhoh-verwandte-card-houses {
    display: block !important;
    font-size: 12.5px !important;
    color: var(--dg-fhoh-ink-4) !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    /* Defensive: text-shadow vom alten Overlay-Style entfernen */
    text-shadow: none !important;
    font-weight: 500 !important;
}

.dg-fhoh-verwandte-card-houses strong {
    color: var(--dg-fhoh-ink-2) !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

/* CTA-Footer: bleibt kompakt unten in der Card */
.dg-fhoh-verwandte-card-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 18px 18px !important;
    color: var(--dg-fhoh-accent) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    background: none !important;
    border: none !important;
    transition: gap 0.3s ease !important;
}

.dg-fhoh-verwandte-card:hover .dg-fhoh-verwandte-card-cta {
    gap: 10px !important;
}

.dg-fhoh-verwandte-card-cta svg {
    transition: transform 0.3s ease !important;
}

/* Defensive: das alte Overlay-Element existiert nicht mehr im DOM,
   aber falls Browser-Cache noch alte HTML hat → defensiv ausblenden */
.dg-fhoh-verwandte-card-overlay {
    display: none !important;
}

@media (max-width: 768px) {
    .dg-fhoh-verwandte-card-title {
        font-size: 16px !important;
    }

    .dg-fhoh-verwandte-card-body {
        padding: 14px 16px 4px !important;
    }

    .dg-fhoh-verwandte-card-cta {
        padding: 0 16px 16px !important;
    }
}

/* Section-Header: Subtitle ist im Template entfernt, der Header ist
   jetzt nur noch H2 + Akzent-Strich */
.dg-fhoh-prakt-header {
    margin-bottom: 36px !important;
}

@media (max-width: 768px) {
    .dg-fhoh-prakt-card {
        padding: 26px 24px !important;
    }
}

/* ============================================================================
   9. v0.5.22 — ERLEBEN + DOGFRIENDLY HARMONISIEREN
   ============================================================================
   Die zwei Card-Typen sahen vorher völlig unterschiedlich aus:
   - Erleben hatte "Mehr erfahren" CTA, DogFriendly hatte "Details ansehen"
   - DogFriendly hatte zusätzlich Location-Zeile und grüne Kategorie-Badge
   - Distance-Badges wurden mit unterschiedlicher Größe gerendert
   Hier wird alles auf den gemeinsamen Nenner gebracht: Bild + roter
   Distance-Badge oben rechts + nur Titel.
*/

/* Beide Card-Typen: identische Struktur, identisches Padding */
.dg-fhoh-row-erleben-dogfriendly .dg-fhoh-erleben-card,
.dg-fhoh-row-erleben-dogfriendly .dg-fhoh-dogfriendly-card {
    border-radius: 14px !important;
    overflow: hidden;
}

/* Card-Body — nur Titel, kompaktes Padding */
.dg-fhoh-row-erleben-dogfriendly .dg-fhoh-erleben-card-body,
.dg-fhoh-row-erleben-dogfriendly .dg-fhoh-dogfriendly-card-body {
    padding: 14px 16px 16px !important;
    min-height: 0 !important;
}

/* Title — gleiche Größe, max 2 Zeilen */
.dg-fhoh-row-erleben-dogfriendly .dg-fhoh-erleben-card-title,
.dg-fhoh-row-erleben-dogfriendly .dg-fhoh-dogfriendly-card-title {
    font-family: var(--dg-fhoh-display) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: var(--dg-fhoh-ink) !important;
    margin: 0 !important;
    letter-spacing: -0.01em !important;
    /* max 2 Zeilen */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 0 !important;
}

/* Distance-Badge — beide identisch (rot, oben rechts) */
.dg-fhoh-row-erleben-dogfriendly .dg-fhoh-erleben-distance,
.dg-fhoh-row-erleben-dogfriendly .dg-fhoh-dogfriendly-distance {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: var(--dg-fhoh-accent) !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    font-variant-numeric: tabular-nums !important;
    border: none !important;
}

/* Falls die alte grüne DogFriendly-Category-Badge irgendwo noch im DOM
   landet (z.B. wenn Cache nicht greift), defensiv ausblenden — ist ein
   Span direkt im Bildbereich, NICHT die neue Caption im Body */
.dg-fhoh-row-erleben-dogfriendly .dg-fhoh-dogfriendly-card-image .dg-fhoh-dogfriendly-category {
    display: none !important;
}

/* Alte CTA-Elemente (Mehr erfahren / Details ansehen) defensiv verstecken,
   falls Template-Cache zickt */
.dg-fhoh-row-erleben-dogfriendly .dg-fhoh-erleben-card-cta,
.dg-fhoh-row-erleben-dogfriendly .dg-fhoh-dogfriendly-card-cta {
    display: none !important;
}

/* v0.5.23: Kategorie als kleine Uppercase-Caption ÜBER dem Titel
   (statt grellgrüner Badge auf dem Bild). Wirkt wie ein Reisemagazin-
   Tag — dezent aber klar. v0.5.25: gilt jetzt für beide Card-Typen. */
.dg-fhoh-row-erleben-dogfriendly .dg-fhoh-dogfriendly-card-category,
.dg-fhoh-row-erleben-dogfriendly .dg-fhoh-erleben-card-category {
    display: block;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dg-fhoh-accent) !important;
    margin: 0 0 4px 0 !important;
    line-height: 1 !important;
}

/* v0.5.23: Ort-Zeile UNTER dem Titel — klein, grau, mit Pin-Icon */
.dg-fhoh-row-erleben-dogfriendly .dg-fhoh-dogfriendly-card-ort,
.dg-fhoh-row-erleben-dogfriendly .dg-fhoh-erleben-card-ort {
    display: flex !important;
    align-items: center;
    gap: 4px;
    font-size: 11px !important;
    color: var(--dg-fhoh-ink-4) !important;
    margin: 6px 0 0 0 !important;
    line-height: 1.3 !important;
    font-weight: 500;
}

.dg-fhoh-row-erleben-dogfriendly .dg-fhoh-dogfriendly-card-ort svg,
.dg-fhoh-row-erleben-dogfriendly .dg-fhoh-erleben-card-ort svg {
    color: var(--dg-fhoh-ink-4);
    flex-shrink: 0;
    opacity: 0.7;
}