/* ═══════════════════════════════════════════════════════════
   Redesign-Adapter für Unterseiten
   Lädt NACH den bestehenden Stylesheets und zieht die Optik der
   neuen Startseite über das vorhandene Markup: ruhigere Radien,
   flache gelbe Aktionen, klare Linien, neuer Kopf und Fuß.
   Kein Markup-Eingriff nötig.
   ═══════════════════════════════════════════════════════════ */

:root {
    /* Radien deutlich zurücknehmen – die weichen 16–32px-Rundungen
       überall waren der Hauptgrund für den Baukasten-Eindruck. */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 10px;
    --radius-2xl: 10px;

    --color-bg: #0a0a0a;
    --color-bg-secondary: #121212;
    --color-bg-tertiary: #181818;
    --shadow-glow: none;
}

/* ── Kopfzeile ── */
.navbar {
    background: rgba(10, 10, 10, .86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    box-shadow: none;
}
.nav-logo img { height: 36px; width: auto; }
.nav-link { font-weight: 500; }
.nav-cta {
    background: var(--color-primary);
    color: var(--color-dark);
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 700;
    box-shadow: none;
}
.nav-cta:hover { background: #ffd83f; box-shadow: none; transform: none; }

/* ── Knöpfe: flach, klar, eine Handschrift ── */
.btn { border-radius: 4px; box-shadow: none; }
.btn:hover { box-shadow: none; transform: none; }
.btn-primary { background: var(--color-primary); }
.btn-primary:hover { background: #ffd83f; }

/* ── Karten & Flächen: Linien statt Schatten ── */
.seo-card, .geo-block, .faq-item, .review-badge {
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, .09);
}

/* ── Untere Aktionsleiste (Mobil) wie im neuen Layout ── */
.mobile-action-bar {
    background: rgba(10, 10, 10, .94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, .09);
    box-shadow: none;
}
.mobile-action-bar a { border-radius: 4px; font-weight: 600; }
.mobile-action-bar .mab-primary {
    background: var(--color-primary);
    color: var(--color-dark);
}

/* ── Fuß ── */
.footer {
    background: #121212;
    border-top: 1px solid rgba(255, 255, 255, .09);
}
.footer-logo { height: 40px; width: auto; }

/* ── Rechtsseiten (impressum.html / datenschutz.html) ── */
.legal-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 56px 20px 80px;
}
.legal-page h1 {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 6vw, 2.6rem);
    letter-spacing: -.03em;
    line-height: 1.05;
    margin-bottom: 8px;
}
.legal-page .legal-subtitle { color: var(--color-text-muted); margin-bottom: 36px; }
.legal-page h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: -.01em;
    margin: 30px 0 10px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .09);
}
.legal-page p, .legal-page li {
    color: var(--color-text-secondary);
    font-size: .92rem;
    line-height: 1.75;
}
.legal-page a { color: var(--color-primary); }
.legal-page code { font-size: .85em; background: rgba(255,255,255,.06); padding: 1px 5px; border-radius: 3px; }


/* ── Nacharbeiten 21.08. ─────────────────────────────────── */

/* Abstaende: 8rem Sektionsluft war zu viel Schwarz */
section { padding: 56px 0; }
@media (min-width: 900px) { section { padding: 72px 0; } }

/* Listen: strong fliesst im Text statt eigener Flex-Spalte */
.seo-text ul li, .facility-list li {
    display: block; position: relative; padding-left: 26px;
}
.seo-text ul li i, .facility-list li i {
    position: absolute; left: 0; top: 4px;
}

/* Kopfzeile strukturell wie die Startseite: kompakt, Telefon-Pille,
   WhatsApp-Kreis, dunkles Vollbild-Menue */
.nav-container { min-height: 62px; }
.nav-wa {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
    display: grid; place-items: center; color: #fff;
    transition: border-color .18s, color .18s;
}
.nav-wa:hover { border-color: #25D366; color: #25D366; }
.nav-wa svg { display: block; }

@media (max-width: 768px) {
    .nav-menu {
        background: #0a0a0a;
        padding-top: 80px;
    }
    .nav-menu .nav-link {
        font-family: var(--font-display);
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -.02em;
        border-bottom: 1px solid rgba(255,255,255,.09);
        width: min(86vw, 420px);
        text-align: left;
        padding: 16px 4px;
    }
    .nav-cta { display: inline-flex; }
}


/* Weitere Leistungen: maximal 4 Karten sichtbar (2x2 mobil, 4er-Reihe
   Desktop). Die uebrigen Links bleiben im HTML fuer die interne
   Verlinkung erhalten. */
.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.related-grid > .related-card:nth-child(n+5) { display: none; }
@media (min-width: 900px) {
    .related-grid { grid-template-columns: repeat(4, 1fr); }
}


/* ═══════════════════════════════════════════════════════════
   Startseiten-Kopf und -Fuss (1:1 uebernommen, 21.08.)
   ═══════════════════════════════════════════════════════════ */
:root {
    --gelb:#fecb18; --gelb-hell:#ffd83f;
    --schwarz:#0a0a0a; --kohle:#121212; --kohle-2:#181818;
    --linie:rgba(255,255,255,.09); --linie-2:rgba(255,255,255,.16);
    --text:#f5f5f5; --text-2:#9a9a9a; --text-3:#6b6b6b;
    --display:'Space Grotesk',system-ui,sans-serif;
    --r:4px; --r-gross:10px;
    --kopf-h:62px;
}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
body.menue-auf{overflow:hidden}

/* ═══ KOPFZEILE ═══ */
.kopf{position:sticky;top:0;z-index:90;height:var(--kopf-h);display:flex;align-items:center;
    background:rgba(10,10,10,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--linie)}
.kopf .wrap{display:flex;align-items:center;gap:12px}

/* Nur die SVG – sie enthält Bildmarke UND Wortmarke.
   Eine zusätzliche gesetzte Wortmarke wäre das Logo doppelt. */
.marke{margin-right:auto;display:flex;align-items:center}
.marke img{height:36px;width:auto}

.haupt-nav{display:none}

.kopf-aktionen{display:flex;align-items:center;gap:8px}
.rund{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;overflow:hidden;flex:0 0 42px;
    border:1px solid var(--linie);flex-shrink:0;
    transition:transform .18s cubic-bezier(.34,1.4,.64,1),background .18s,border-color .18s,
               width .28s ease,opacity .22s ease,margin-left .28s ease}
.rund svg{width:20px;height:20px;flex-shrink:0}
.rund:active{transform:scale(.9)}
.rund--tel{background:var(--gelb);border-color:var(--gelb);color:var(--schwarz)}
.rund--wa{color:#fff}
.rund--wa:hover{border-color:#25D366;color:#25D366}

.burger{width:40px;height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0}
.burger span{display:block;width:20px;height:1.5px;background:var(--text);transition:transform .32s cubic-bezier(.3,1,.4,1),opacity .2s}
body.menue-auf .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menue-auf .burger span:nth-child(2){opacity:0}
body.menue-auf .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ═══ MENÜ ═══ */
.menue{position:fixed;inset:var(--kopf-h) 0 0;z-index:88;background:var(--schwarz);
    padding:28px 0 40px;overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .28s ease,transform .28s cubic-bezier(.3,1,.4,1),visibility .28s}
body.menue-auf .menue{opacity:1;visibility:visible;transform:none}
.menue-liste{border-top:1px solid var(--linie)}
.menue-liste a{display:flex;align-items:center;justify-content:space-between;
    padding:16px 4px;border-bottom:1px solid var(--linie);
    font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.02em;
    transition:padding-left .22s ease,color .22s}
.menue-liste a:hover{padding-left:10px;color:var(--gelb)}
.menue-liste a svg{color:var(--text-3)}
.menue-fuss{margin-top:26px;display:flex;flex-direction:column;gap:5px}
.menue-fuss span{font-size:12px;color:var(--text-3);letter-spacing:.05em;text-transform:uppercase}
.menue-fuss a{font-family:var(--display);font-size:22px;font-weight:700;color:var(--gelb);letter-spacing:-.02em}


/* ── Fuß ── */
.fuss{padding:48px 0 100px;border-top:1px solid var(--linie);background:var(--kohle)}
.fuss-raster{display:grid;gap:32px;margin-bottom:32px}
.fuss-logo{height:40px;width:auto;margin-bottom:15px}
.fuss-marke p{font-size:13.5px;color:var(--text-2);max-width:36ch}
.fuss-spalte h4{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin-bottom:13px}
.fuss-spalte ul{list-style:none;display:grid;gap:9px}
.fuss-spalte a{font-size:14px;color:var(--text-2);transition:color .18s}
.fuss-spalte a:hover{color:var(--gelb)}
.tarif-liste{display:grid;gap:7px;font-size:13.5px}
.tarif-liste div{display:flex;justify-content:space-between;gap:14px;color:var(--text-2)}
.tarif-liste b{color:var(--text);font-weight:600}
.fuss-unten{padding-top:22px;border-top:1px solid var(--linie);font-size:12.5px;color:var(--text-3)}



/* Desktop-Verhalten des Kopfs */
@media (min-width:900px){
    .burger{display:none}
    .haupt-nav{display:flex;align-items:center;gap:26px;margin-right:22px}
    .haupt-nav a{font-size:14.5px;font-weight:500;color:var(--text-2);transition:color .18s}
    .haupt-nav a:hover{color:var(--text)}
    .marke img{height:42px}
    .rund--tel{width:auto;flex:0 0 auto;border-radius:var(--r);padding:0 17px;gap:9px;
        font-family:var(--display);font-weight:700;font-size:15.5px;letter-spacing:-.01em;
        display:flex;align-items:center}
    .rund--tel::after{content:'0351 824 420'}
    .fuss-raster{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:26px}
    .fuss{padding-bottom:56px}
}
/* Fuss: Unterseiten haben keine feste Leiste unten */
.fuss{padding-bottom:56px}


/* Bewertungs-Badge: Sterne mit anteiliger Fuellung (4,4 = 88 %) */
.review-badge-stars{position:relative;display:inline-block;line-height:0}
.review-badge-stars .rb-leer,.review-badge-stars .rb-voll{display:inline-flex;gap:2px}
.review-badge-stars .rb-leer svg{width:15px;height:15px;fill:rgba(255,255,255,.18)}
.review-badge-stars .rb-voll{position:absolute;left:0;top:0;overflow:hidden}
.review-badge-stars .rb-voll svg{width:15px;height:15px;fill:#fbbc04;flex-shrink:0}


/* Bewertungs-Badge mobil: gestapelt statt gequetschter Dreispalter */
@media (max-width: 719px) {
    .review-badge {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 18px;
        transform: none !important;
    }
    .review-badge-text { display: block; }
    .review-badge-score { display: block; font-size: 1.05rem; margin-bottom: 2px; }
    .review-badge-count { display: block; font-size: .82rem; line-height: 1.5; }
    .review-badge-cta {
        margin: 4px 0 0;
        padding-top: 12px;
        border-top: 1px solid rgba(255,255,255,.09);
        width: 100%;
    }
}


/* Kacheln mobil: kompakte Zeilen statt klobiger 2x2-Karten */
@media (max-width: 719px) {
    .related-grid { grid-template-columns: 1fr; gap: 9px; }
    .related-card {
        display: grid;
        grid-template-columns: 26px 1fr;
        column-gap: 13px;
        align-items: start;
        padding: 13px 15px;
        text-align: left;
    }
    .related-card i {
        grid-row: 1 / span 2;
        font-size: 1.3rem;
        margin-top: 3px;
    }
    .related-card-title { font-size: .95rem; margin: 0; }
    .related-card-desc { grid-column: 2; font-size: .8rem; margin: 2px 0 0; line-height: 1.45; }
}


/* Cookie-Banner (gleiche Optik wie Startseite; footer.css-Reste werden ueberstimmt) */
.cookie-banner{display:none;position:fixed;left:0;right:0;bottom:0;z-index:120;
    background:var(--kohle-2);border-top:1px solid var(--linie-2);
    padding:18px 20px calc(18px + env(safe-area-inset-bottom));box-shadow:none}
.cookie-banner.active{display:block}
.cookie-banner-inhalt{max-width:1180px;margin:0 auto;display:grid;gap:14px}
.cookie-banner-inhalt p{font-size:13px;color:var(--text-2);line-height:1.65;max-width:78ch}
.cookie-banner-inhalt a{color:var(--gelb)}
.cookie-banner-aktionen{display:flex;gap:10px;flex-wrap:wrap}
.cookie-banner-aktionen button{height:44px;padding:0 22px;border-radius:var(--r);
    font-weight:650;font-size:14px;border:0;cursor:pointer;
    transition:background .18s,color .18s,border-color .18s}
#cookieAcceptAll{background:var(--gelb);color:var(--schwarz)}
#cookieAcceptAll:hover{background:var(--gelb-hell)}
#cookieAcceptNecessary{background:transparent;border:1px solid var(--linie-2);color:var(--text-2)}
#cookieAcceptNecessary:hover{color:var(--text);border-color:var(--text-2)}
@media (min-width:900px){.cookie-banner-inhalt{grid-template-columns:1fr auto;align-items:center}}

/* Cookie-Banner: aufklappbare Kategorien (informierte Einwilligung) */
.cookie-details summary{cursor:pointer;font-size:12.5px;color:var(--text-3);
    text-decoration:underline;text-underline-offset:3px;width:fit-content}
.cookie-details summary:hover{color:var(--text-2)}
.cookie-details[open] summary{margin-bottom:10px}
.cookie-kategorien{display:grid;gap:12px;max-height:190px;overflow-y:auto;padding-right:8px}
.cookie-kategorien h4{font-size:12px;letter-spacing:.04em;text-transform:uppercase;
    color:var(--text-2);margin:0 0 3px;font-weight:650}
.cookie-kategorien p{font-size:12px!important;color:var(--text-3)!important;line-height:1.6}
.cookie-kategorien code{background:rgba(255,255,255,.07);padding:1px 5px;border-radius:3px;font-size:.9em}
@media (min-width:900px){.cookie-details{grid-column:1/-1}}