/* ==========================================
   1. BASIS & TEXT-LINKS
   ========================================== */
:root { --primary: #1b4332; --accent: #e07a5f; --bg: #faf9f6; }
body { font-family: Georgia, serif; color: #2d3748; line-height: 1.7; margin: 0; padding: 0; background-color: var(--bg); }
.family-container, .text-content-warm, .city-main-b, .list-wrapper-b, .single-wrap-b, .guide-main-b { max-width: 900px; margin: 0 auto; padding: 1.5rem 1rem; }
h1, h2, h3 { color: var(--primary); font-weight: normal; }
html, body { max-width: 100%; overflow-x: hidden; }

/* Automatische Text-Links im Content-Bereich */
.text-content-warm a, .city-main-b a:not([class]), .text-link-warm { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; transition: color 0.2s ease; }
.text-content-warm a:hover, .city-main-b a:not([class]):hover, .text-link-warm:hover { color: var(--primary); }

/* ==========================================
   2. KOMPONENTEN & TYPOGRAFIE
   ========================================== */
table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.5rem 0; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; font-family: system-ui, sans-serif; }
th, td { padding: 14px 16px; text-align: left; border-bottom: 1px solid #f1f5f9; }
th { background: #f8fafc; color: var(--primary); font-weight: 700; }
details.faq-item { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1.1rem; margin-bottom: 0.85rem; font-family: system-ui, sans-serif; }
details.faq-item summary { cursor: pointer; font-weight: 700; color: var(--primary); }
details.faq-item p { margin-top: 0.6rem; color: #4a5568; }

/* ==========================================
   3. HEADER & FOOTER
   ========================================== */
.nav-b { padding: 1rem; border-bottom: 1px solid #e2e8f0; margin-bottom: 1.5rem; max-width: 900px; margin-left: auto; margin-right: auto; }
.nav-top-b { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.nav-logo-b { font-size: 1.5rem; font-weight: normal; color: var(--primary); text-decoration: none; font-family: Georgia, serif; display: block; }
.nav-hl-b { color: var(--accent); font-style: italic; }
.nav-ext-b { font-size: 0.8rem; color: #a0aec0; }
.nav-tagline-b { display: block; font-size: 0.75rem; color: #718096; font-style: italic; }
.nav-badge-b { font-size: 0.75rem; background: #f0fdf4; color: var(--primary); padding: 4px 10px; border-radius: 12px; font-weight: 600; font-family: system-ui, sans-serif; }
.nav-form-b { display: flex; gap: 0.5rem; width: 100%; }
.nav-drop-b { flex: 1 1 0; min-width: 0; width: 50%; background: #faf9f6; border: 1px solid #cbd5e1; padding: 8px 6px; border-radius: 8px; font-size: 0.8rem; font-family: system-ui, sans-serif; color: var(--primary); font-weight: 600; cursor: pointer; text-overflow: ellipsis; }

.ftr-b { background: var(--primary); color: #e2e8f0; padding: 3.5rem 1rem; margin-top: 4rem; font-size: 0.88rem; border-top: 1px solid #2d6a4f; font-family: system-ui, sans-serif; }
.ftr-grid-b { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.5rem; }
.ftr-brand-b { color: #ffffff; font-size: 1.1rem; font-family: Georgia, serif; margin: 0 0 0.5rem 0; font-weight: normal; }
.ftr-txt-b { line-height: 1.6; color: #cbd5e1; }
.ftr-nav-b { margin-top: 1.25rem; display: flex; gap: 14px; flex-wrap: wrap; }
.ftr-nav-b a { color: var(--accent); text-decoration: underline; font-weight: 500; }
.ftr-note-b { margin-top: 1.25rem; padding-top: 0.85rem; border-top: 1px solid rgba(255,255,255,0.15); font-size: 0.8rem; color: #cbd5e1; }
.ftr-note-b strong { color: #ffffff; }
.ftr-col2-b { background: rgba(255,255,255,0.05); padding: 1.25rem; border-radius: 8px; }
.ftr-col2-title-b { color: #ffffff; display: block; margin-bottom: 0.4rem; font-weight: bold; }
.ftr-col2-txt-b { font-size: 0.82rem; color: #cbd5e1; line-height: 1.5; }

/* ==========================================
   4. STARTSEITE & LISTEN
   ========================================== */
.hub-overview-warm { margin-top: 4rem; padding: 3rem 2rem; background: #faf9f6; border: 1px solid #e2e8f0; border-radius: 12px; }
.hub-title-warm { color: var(--primary); margin-top: 0; font-size: 1.6rem; }
.hub-intro-warm { font-size: 1rem; color: #4a5568; margin-bottom: 2.5rem; font-family: system-ui, sans-serif; }
.hub-list-warm { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2rem; }
.hub-item-warm { background: #ffffff; padding: 2rem; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 4px 15px rgba(27, 67, 50, 0.03); }
.hub-item-title-warm { color: var(--accent); margin: 0 0 1.25rem 0; font-size: 1.3rem; border-bottom: 1px solid #f0fdf4; padding-bottom: 0.75rem; }
.city-list-warm { list-style: none; padding: 0; margin: 0 0 1.5rem 0; display: flex; flex-wrap: wrap; gap: 0.5rem; font-family: system-ui, sans-serif; }
.city-link-warm { background: #faf9f6; border: 1px solid #e2e8f0; padding: 6px 12px; border-radius: 8px; font-size: 0.9rem; text-decoration: none; color: var(--primary); font-weight: 600; display: block; }
.state-directory-warm { padding-top: 1.5rem; border-top: 1px dashed #e2e8f0; font-family: system-ui, sans-serif; }
.state-directory-title { font-size: 0.85rem; color: var(--primary); display: block; margin-bottom: 0.75rem; }
.state-tags-warm { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.state-link-warm { font-size: 0.8rem; background: #ffffff; color: var(--accent); border: 1px solid #fed7aa; padding: 4px 10px; border-radius: 6px; text-decoration: none; font-weight: 600; }

.az-container-b { margin-top: 2rem; padding: 2rem; background: #faf9f6; border-radius: 8px; border: 1px solid #e2e8f0; font-family: system-ui, sans-serif; }
.az-heading-b { font-size: 1.25rem; color: var(--primary); margin: 0; font-family: Georgia, serif; }
.az-index-b { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 1.2rem 0 2rem 0; }
.az-btn-b { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; border-radius: 6px; font-size: 0.85rem; font-weight: 700; text-decoration: none; }
.az-btn-b.active { background: #ffffff; border: 1px solid #cbd5e1; color: #1e293b; }
.az-btn-b.empty { border: 1px solid #e2e8f0; color: #1e293b; opacity: 0.25; }
.az-block-b { margin-bottom: 1.5rem; }
.az-char-b { font-size: 1.1rem; color: var(--accent); padding-bottom: 0.3rem; border-bottom: 1px solid #e2e8f0; font-family: Georgia, serif; }
.az-links-b { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.6rem; }
.city-anchor-b { background: #ffffff; border: 1px solid #cbd5e1; padding: 10px 14px; border-radius: 6px; font-size: 0.9rem; text-decoration: none; color: #1e293b; font-weight: 600; display: block; }

/* ==========================================
   5. FORMULARE & QUIZ
   ========================================== */
.calculator-lead-b { max-width: 650px; margin: 1.5rem auto 0 auto; background: rgba(0,0,0,0.03); padding: 15px; border-radius: 8px; font-family: system-ui, sans-serif; }
.field-group-b { display: flex; gap: 8px; margin-bottom: 8px; }
.calc-select-b, .calc-input-b { flex: 1; padding: 12px 10px; border-radius: 4px; font-size: 0.95rem; border: 1px solid #cbd5e1; background: #ffffff; color: #1e293b; }
.calc-btn-next-b, .calc-btn-submit-b { padding: 12px 20px; font-weight: 700; border-radius: 4px; border: none; cursor: pointer; color: #ffffff; background: var(--accent); }
.calc-btn-submit-b { background: #16a34a; }
.secure-note-b { font-size: 0.75rem; color: #718096; display: block; text-align: center; margin-top: 8px; }

.interactive-calc-b { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 2.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.05); max-width: 700px; margin: 4rem auto; font-family: system-ui, sans-serif; text-align: center; }
.calc-top-b { margin-bottom: 2rem; border-bottom: 1px solid #f1f5f9; padding-bottom: 1.5rem; }
.calc-head-b { font-size: 1.6rem; margin: 0 0 0.5rem 0; color: var(--primary); font-family: Georgia, serif; }
.calc-sub-b { color: #4a5568; font-size: 0.95rem; }
.tracker-b { margin-top: 1.5rem; text-align: right; }
.track-txt-b { font-size: 0.8rem; color: #718096; margin-bottom: 0.3rem; font-weight: 600; }
.track-bg-b { background: #e2e8f0; height: 6px; border-radius: 99px; overflow: hidden; margin-top: 0.3rem; }
.track-bar-b { background: var(--accent); height: 100%; transition: width 0.5s ease; }
.phase-b { display: none; animation: slideUp 0.4s ease; }
.phase-b.show-b { display: block; }
.phase-q-b { display: block; font-size: 1.3rem; font-weight: 700; color: var(--primary); margin-bottom: 0.5rem; font-family: Georgia, serif; }
.phase-h-b { color: #4a5568; font-size: 0.9rem; margin-bottom: 1.5rem; }
.opts-b { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.opt-card-b { flex: 1; padding: 1.2rem; background: #faf9f6; border: 2px solid #e2e8f0; border-radius: 8px; cursor: pointer; color: #2d3748; }
.fld-b { width: 100%; padding: 14px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 1rem; margin-bottom: 1rem; box-sizing: border-box; }
.cols-b { display: flex; gap: 10px; margin-bottom: 1rem; }
.cols-b .fld-b { margin-bottom: 0; }
.nav-row-b { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; border-top: 1px solid #f1f5f9; padding-top: 1.5rem; }
.action-b { background: var(--accent); color: white; border: none; padding: 14px 24px; border-radius: 6px; font-size: 1.1rem; font-weight: 700; cursor: pointer; }
.prev-b { color: #718096; font-weight: 600; cursor: pointer; text-decoration: underline; }

/* ==========================================
   6. FEATURES (Breadcrumb, Map, Author, Mag)
   ========================================== */
.path-wrap-b { padding: 0.75rem 1rem; font-size: 0.85rem; font-family: system-ui, sans-serif; }
.path-link-b { color: var(--accent); text-decoration: none; }
.path-sep-b { margin: 0 0.4rem; opacity: 0.5; }
.path-current-b { font-weight: 600; color: #4a5568; }

.map-widget-b { margin-bottom: 2rem; }
.map-heading-b { display: block; font-size: 1.25rem; color: var(--primary); margin-bottom: 1rem; font-family: Georgia, serif; }
.map-embed-b { width: 100%; height: 350px; border: 0; border-radius: 12px; background: #e2e8f0; }

.trust-panel-b { display: flex; align-items: center; gap: 1.5rem; background: #ffffff; border: 1px solid #e2e8f0; border-left: 4px solid #16a34a; padding: 1.5rem; border-radius: 12px; margin: 3rem 0; box-shadow: 0 4px 15px rgba(27,67,50,0.05); font-family: system-ui, sans-serif; }
.trust-icon-b { font-size: 2.5rem; margin: 0; }
.trust-headline-b { display: block; font-size: 1.1rem; color: var(--primary); font-family: Georgia, serif; margin-bottom: 0.25rem; }
.trust-body-b { font-size: 0.9rem; color: #4a5568; }

.mag-card-b { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 2rem; margin: 2.5rem 0; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); }
.mag-badge-b { display: inline-block; background: #f0fdf4; color: #166534; font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; font-family: system-ui, sans-serif; }
.mag-quote-b { margin: 0 0 1.5rem 0; padding: 0; border: none; }
.mag-quote-b p { font-style: italic; font-size: 1.15rem; color: var(--primary); line-height: 1.5; margin: 0; }
.trust-list-b { list-style: none; padding: 0; margin: 0; border-top: 1px solid #f1f5f9; padding-top: 1.2rem; font-family: system-ui, sans-serif; }
.trust-row-b { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; font-size: 0.9rem; color: #475569; }
.trust-svg-b { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }

/* City Layout Spezifisch */
.hero-b { background: #ffffff; text-align: center; padding: 2.5rem 1rem 1rem 1rem; }
.headline-b { font-size: 2.3rem; margin: 0 0 1rem 0; }
.quiz-jump-b { color: var(--primary); text-decoration: underline; display: block; margin-top: 1rem; font-family: system-ui, sans-serif; }
.region-cluster-b { padding: 1.5rem; background: #faf9f6; border-radius: 8px; border: 1px solid #e2e8f0; margin-bottom: 1.5rem; font-family: system-ui, sans-serif; }
.cluster-heading-b { font-size: 1.05rem; display: block; margin-bottom: 0.8rem; color: var(--primary); }
.tag-cloud-b { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.loc-tag-b, .loc-link-b { background: #ffffff; border: 1px solid #cbd5e1; padding: 4px 10px; border-radius: 4px; font-size: 0.85rem; color: var(--primary); font-weight: 600; text-decoration: none; }

@media (max-width: 768px) {
    .field-group-b, .cols-b, .opts-b { flex-direction: column; }
    .headline-b { font-size: 1.6rem; }
}

/* ==========================================
   HARDFACTS WIDGET (DOMAIN B)
   ========================================== */
.hardfacts-b { margin: 3rem 0; padding: 2rem; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
.hf-head-b { display: block; font-size: 1.25rem; color: var(--primary); margin-bottom: 1.25rem; font-family: Georgia, serif; }
.hf-grid-b { display: flex; flex-wrap: wrap; gap: 1rem; }
.hf-card-b { flex: 1 1 200px; background: #faf9f6; padding: 1.25rem; border-radius: 8px; border: 1px solid #e2e8f0; }
.hf-lbl-b { font-size: 0.8rem; color: #718096; margin-bottom: 0.4rem; }
.hf-val-b { font-size: 1rem; color: var(--primary); font-weight: bold; }

.ftr-promise-b { margin: 1.5rem 0; padding: 1.25rem; background: rgba(255, 255, 255, 0.05); border-left: 4px solid var(--accent); border-radius: 8px; }
.ftr-promise-title-b { color: #ffffff; display: block; margin-bottom: 0.4rem; font-weight: bold; font-size: 0.95rem; }
.ftr-promise-text-b { margin: 0; font-size: 0.85rem; color: #cbd5e1; line-height: 1.6; }

/* ==========================================
   ZUGÄNGLICHKEIT: KONTRAST-FIX (WCAG)
   ========================================== */
.nav-ext-b, .nav-tagline-b { color: #4a5568 !important; } /* Dunkleres Grau */
.hub-item-title-warm { color: #9a3412 !important; } /* Dunkleres Terrakotta */
.text-content-warm a, .text-link-warm { color: #1b4332 !important; text-decoration: underline; font-weight: 700; } /* Links in starkem Dunkelgrün */
.text-content-warm a:hover, .text-link-warm:hover { opacity: 0.8; }

/* ==========================================
   WCAG-KONTRASTFIX (STADT-SEITEN)
   ========================================== */
.path-link-b { color: #1b4332 !important; font-weight: 700; } /* Dunkelgrün statt Terrakotta */
.calc-btn-next-b { background-color: #9a3412 !important; color: #ffffff !important; } /* Sehr dunkles Terrakotta für den Button */
.track-txt-b, #track-num-b { color: #4a5568 !important; font-weight: 700; } /* Dunkleres Grau für den Status-Text */
.body-text-b a { color: #1b4332 !important; text-decoration: underline; font-weight: 700; } /* Dunkelgrün für Links im Text */
.nav-hl-b { color: #b45309 !important; }

.state-link-warm { color: #9a3412 !important; border-color: #9a3412 !important; }

.ftr-nav-b a, .ftr-b a { color: #cbd5e1 !important; font-weight: 600 !important; }

.hf-lbl-b { color: #4a5568 !important; font-weight: 700 !important; }
.hf-card-b { color: #1e293b !important; }

/* ==========================================
   BADGE / KICKER (STÄDTE- & BUNDESLAND-SEITEN)
   ========================================== */
.list-tag-b {
    display: inline-block;
    background-color: #f0fdf4; /* Sehr zartes Grün */
    color: #166534; /* Sattes, dunkles Waldgrün (WCAG sicher) */
    border: 1px solid #bbf7d0;
    padding: 4px 14px; /* Etwas mehr seitliches Padding für die Pille */
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 20px; /* Typische Pillen-Form für redaktionelle Labels */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.85rem;
}