/* ============================================================
   Heute-Leiste (Öffnungsstatus, Notdienst, schnelle Wege)
   Farben sind auf WCAG 2.1 AA geprüft (Text >= 4,5:1).
   ============================================================ */
.heute {
    --h-ink: #111827;
    --h-muted: #4b5563;
    --h-surface: #ffffff;
    --h-line: #e5e7eb;
    --h-blue: #1565c0;      /* 5,7:1 auf Weiß */
    --h-open: #1b6e34;      /* 6,3:1 auf Weiß */
    --h-open-bg: #e8f5ec;
    --h-closed: #b42318;    /* 6,4:1 auf Weiß */
    --h-closed-bg: #fdecea;
    --h-wa: #0f7a3d;        /* WhatsApp-Grün, dunkel genug für weißen Text (5,4:1) */

    position: relative;
    z-index: 2;
    max-width: 72rem;
    margin: -3.5rem auto 0;
    padding: 0 1rem;
}
html.dark .heute {
    --h-ink: #f0f1f3;
    --h-muted: #b4b8bf;
    --h-surface: #252830;
    --h-line: #3a3f4a;
    --h-blue: #90c2ff;
    --h-open: #7fdc9b;
    --h-open-bg: #1d3326;
    --h-closed: #ff9a8f;
    --h-closed-bg: #3a2220;
}

.heute__karte {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--h-surface);
    color: var(--h-ink);
    border: 1px solid var(--h-line);
    border-radius: 1.25rem;
    box-shadow: 0 18px 40px rgba(17, 24, 39, 0.12);
    overflow: hidden;
}
@media (min-width: 768px) {
    .heute__karte { grid-template-columns: 1.1fr 1fr 0.9fr; }
}

.heute__teil {
    padding: 1.25rem 1.25rem 1.375rem;
}
.heute__teil + .heute__teil { border-top: 1px solid var(--h-line); }
@media (min-width: 768px) {
    .heute__teil { padding: 1.5rem 1.75rem; }
    .heute__teil + .heute__teil { border-top: 0; border-left: 1px solid var(--h-line); }
}

.heute__label {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--h-muted);
}

/* ---- Status ---- */
.heute__status {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.25;
}
.heute__punkt {
    flex: none;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--h-muted);
}
.heute--offen .heute__status { color: var(--h-open); }
.heute--offen .heute__punkt { background: var(--h-open); box-shadow: 0 0 0 4px var(--h-open-bg); }
.heute--zu .heute__status { color: var(--h-closed); }
.heute--zu .heute__punkt { background: var(--h-closed); box-shadow: 0 0 0 4px var(--h-closed-bg); }

.heute__zeile {
    margin: 0.25rem 0 0.875rem;
    font-size: 1.0625rem;
    color: var(--h-ink);
}
.heute__zeiten {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.125rem 1rem;
    margin: 0;
    font-size: 1rem;
    color: var(--h-muted);
}
.heute__zeiten > div { display: contents; }
.heute__zeiten dt { font-weight: 600; }
.heute__zeiten dd { margin: 0; font-variant-numeric: tabular-nums; }
.heute__zeiten .ist-heute dt,
.heute__zeiten .ist-heute dd { color: var(--h-ink); font-weight: 800; }

/* ---- Notdienst ---- */
.heute-nd__name { margin: 0; font-size: 1.125rem; font-weight: 800; line-height: 1.3; }
.heute-nd__ort,
.heute-nd__zeit { margin: 0.125rem 0 0; color: var(--h-muted); font-size: 1rem; }
.heute-nd__tel,
.heute__mehr {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    font-weight: 700;
    color: var(--h-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.heute-nd__tel { margin-top: 0.25rem; font-size: 1.0625rem; }
.heute__mehr { font-size: 1rem; }
.heute__nd-hinweis { margin: 0; color: var(--h-muted); font-size: 1rem; }
.heute-nd__fehler { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; }

/* Wenn geschlossen: Notdienst hervorheben */
.heute--zu .heute__teil--nd { background: var(--h-closed-bg); }
.heute--zu .heute__teil--nd .heute__label { color: var(--h-closed); }

/* ---- Schnelle Wege ---- */
.heute__wege {
    display: grid;
    gap: 0.625rem;
}
.heute__knopf {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 52px;
    padding: 0.75rem 1rem;
    border-radius: 0.875rem;
    font-size: 1.0625rem;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background-color .15s ease, border-color .15s ease;
}
.heute__knopf:focus-visible { outline: 3px solid #ff6600; outline-offset: 2px; }
.heute__knopf--tel { background: var(--h-blue); color: #fff; }
html.dark .heute__knopf--tel { color: #0b1a2e; }
.heute__knopf--tel:hover { background: #0d47a1; }
html.dark .heute__knopf--tel:hover { background: #bcd9ff; }
.heute__knopf--wa { background: var(--h-wa); color: #fff; }
.heute__knopf--wa:hover { background: #0a5c2d; }
.heute__knopf--route { border-color: var(--h-line); color: var(--h-ink); background: transparent; }
.heute__knopf--route:hover { border-color: var(--h-muted); }
.heute__adresse { margin: 0.25rem 0 0; text-align: center; font-size: 0.9375rem; color: var(--h-muted); }

@media (prefers-reduced-motion: reduce) {
    .heute__knopf { transition: none; }
}

/* ============================================================
   Hero der Startseite
   ============================================================ */
.hero__ort {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    opacity: 0.92;
}
.hero__titel {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 600;
    font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: #fff !important;
    text-wrap: balance;
}
.hero__titel span { display: block; font: inherit !important; color: inherit !important; }
.hero__text {
    margin: 1.25rem 0 0;
    max-width: 36rem;
    font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
    line-height: 1.55;
    color: #fff;
}
.hero__wege {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}
.hero__knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 54px;
    padding: 0 1.375rem;
    border-radius: 999px;
    font-size: 1.0625rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: background-color .15s ease, border-color .15s ease;
}
.hero__knopf i { font-size: 1.25rem; }
.hero__knopf:focus-visible { outline: 3px solid #ff6600; outline-offset: 3px; }
.hero__knopf--wa { background: #0f7a3d; color: #fff !important; }
.hero__knopf--wa:hover { background: #0a5c2d; }
.hero__knopf--zweit { border: 2px solid rgba(255,255,255,.75); color: #fff !important; background: rgba(15,23,42,.25); }
.hero__knopf--zweit:hover { background: rgba(255,255,255,.14); border-color: #fff; }
@media (max-width: 480px) {
    .hero__knopf { width: 100%; }
}