/* ==========================================================================
   Ruhelotsen – zentrale Gestaltungsregeln „Ruhig, aber modern“
   Stand: 15.09.2026 · Pilot: trauerfall.html
   Farben aus der Farbtabelle (Braun, Gold) plus Navigationsgrün.
   Jede Farbe hat eine Aufgabe:
     Braun  = Überschriften
     Gold   = Orientierung (Ziffern, Icons, Aufzählung, Titel-Linie)
     Grün   = Interaktion (Buttons, Hinweise, Telefon-Banner)
   Nach styles.css und webfontDIN.css einbinden.
   ========================================================================== */
:root {
    --rl-ink:        #2a2523;
    --rl-text:       #3f3835;
    --rl-muted:      #77706b;
    --rl-brown:      #5e3d2c;
    --rl-brown-dark: #472d20;
    --rl-gold:       #A68B4A;
    --rl-gold-soft:  rgba(166, 139, 74, 0.13);
    --rl-gold-deep:  #7d6631;
    --rl-green:      #6B705C;
    --rl-green-dark: #575b4b;
    --rl-green-soft: rgba(107, 112, 92, 0.11);
    --rl-green-line: rgba(107, 112, 92, 0.35);
    --rl-line:       rgba(94, 61, 44, 0.13);
    --rl-page:       #F7F4EE;
    --rl-card:       #FFFFFF;
    --rl-radius:     14px;
    --rl-radius-sm:  9px;
    --rl-shadow:     0 1px 2px rgba(42, 37, 35, 0.04), 0 8px 24px rgba(42, 37, 35, 0.06);
}

/* Hinweis in Grün: „Gut zu wissen“, Service-Hinweise */
.rl-hint {
    margin-top: 20px;
    padding: 16px 20px;
    background: var(--rl-green-soft);
    border-radius: var(--rl-radius-sm);
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--rl-text);
}
.rl-hint i { color: var(--rl-green); margin-right: 6px; }
.rl-hint strong { color: var(--rl-green-dark); font-weight: 500; }
.rl-hint-center { text-align: center; max-width: 750px; margin: 0 auto 35px; padding: 20px 28px; }

/* Warnung in Gold: wichtige Hinweise, ohne Alarmfarben */
.rl-warn {
    padding: 24px 28px;
    background: var(--rl-gold-soft);
    border-radius: var(--rl-radius-sm);
    color: var(--rl-text);
}
.rl-warn i { color: var(--rl-gold); }
.rl-warn strong { color: var(--rl-gold-deep); font-weight: 500; }

/* Verlinkter Kasten (z. B. Kunden-Center) */
.rl-linkbox {
    display: block;
    background: var(--rl-card);
    border: 1px solid var(--rl-line);
    border-radius: var(--rl-radius-sm);
    padding: 20px;
    margin-top: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.rl-linkbox:hover { border-color: var(--rl-green-line); box-shadow: var(--rl-shadow); }

/* Icon-Kachel neben Kartentiteln */
.rl-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--rl-gold-soft);
    color: var(--rl-gold);
    font-size: 1.1rem;
    flex: none;
}

/* Einheitliche Abschnittsüberschriften, ohne dekorative Unterstreichung.
   Intro, Bildtitel, Dialoge und eigenständige Karten-/Personentitel bleiben separat. */
body h2:not(#introHeadingDesktop):not(:where(
    #introHeadingDesktop, .intro-section-wave *,
    .slide-title, .loading-motto, .hero-content *, .slideshow-fallback *,
    .page-subtitle, .page-title-hero *,
    .book-title, .inhaber-name, .news-title, .stellen-titel, .moment-headline,
    .modal *, [role="dialog"] *, .cookie-consent-wrapper *,
    .cookie-settings-modal *, #cookieConsentTitle, #cookieSettingsTitle,
    .chat-window *, .info-modal *
)) {
    font-size: 2rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.022em;
    border-bottom: 0 !important;
    text-decoration: none !important;
}
body h2:not(#introHeadingDesktop):not(:where(.intro-section-wave *, .slide-title, .hero-content *, .modal *, [role="dialog"] *))::after {
    content: none !important;
    display: none !important;
}
.section-divider { display: none !important; }
.about-box-title { padding-bottom: 0; }
@media (max-width: 768px) {
    body h2:not(#introHeadingDesktop):not(:where(
        #introHeadingDesktop, .intro-section-wave *,
        .slide-title, .loading-motto, .hero-content *, .slideshow-fallback *,
        .page-subtitle, .page-title-hero *,
        .book-title, .inhaber-name, .news-title, .stellen-titel, .moment-headline,
        .modal *, [role="dialog"] *, .cookie-consent-wrapper *,
        .cookie-settings-modal *, #cookieConsentTitle, #cookieSettingsTitle,
        .chat-window *, .info-modal *
    )) { font-size: 1.65rem !important; }
}