/**
 * PKVbuddy Landing Page — Root-Grund und animiertes Hamburger-Menü
 *
 * Wird nur von base_public.html geladen, NACH cappuccino.css.
 * Audit B4/UX4-10: Die früheren Duplikate (:focus-visible, .skip-link,
 * .skip-link:focus) sind gestrichen — dieselben Regeln stehen in
 * cappuccino.css (Abschnitt ACCESSIBILITY) und gelten für beide
 * Grundgerüste; Farbquelle dort ist var(--accent).
 */

/* ==========================================================================
   Root-Grund des öffentlichen Bereichs (BUG-0023)
   ========================================================================== */

/* Ohne eigenen Hintergrund am Root reicht CSS den des <body> an den Canvas
   durch — und `body` trägt --milk (#FFFAF5), also nahezu Weiß. Safari legt
   beim Rubber-Band genau diesen Canvas frei, am unteren wie am oberen
   Seitenrand: ein weißer Blitz gegen den warm-beigen öffentlichen Bereich.

   Der Grund gehört an `html` und nicht an `body`: Ein Body-Hintergrund malt
   nur die Box des Elements aus, der überscrollte Bereich liegt außerhalb
   davon. `body` behält deshalb --milk — gestrichen wird der Root, nicht die
   Seite.

   Scope: Dieses Blatt lädt ausschließlich base_public.html. Die eingeloggte
   App hat ihren eigenen Chrome und bleibt unberührt.

   Prüfbar ist hier nur die Ursache, nicht der Effekt: Chromium stellt die
   iOS-Rubber-Band-Phase nicht nach. Der Wächter misst deshalb die berechneten
   Farben (tests/e2e/test_bug_0023_overscroll_hintergrund.py); die Abnahme in
   Safari und in der installierten PWA erfolgt am Gerät. */
html {
    background-color: var(--milk-warm);
}

/* ==========================================================================
   Animated Hamburger Menu Icon
   ========================================================================== */

.landing-nav .navbar-toggler {
    border: none;
    padding: 0.5rem;
    background: transparent;
}

.landing-nav .navbar-toggler:focus {
    box-shadow: none;
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.landing-nav .hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    cursor: pointer;
}

.landing-nav .hamburger-line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--bs-dark);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
}

/* X-Animation when menu is open */
.landing-nav .navbar-toggler[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.landing-nav .navbar-toggler[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.landing-nav .navbar-toggler[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ---------------------------------------------------------------------------
   Platz für die fixierte Kopfleiste (Audit B4GL Gruppe 6)

   Unter 992px ist .landing-nav fixiert (cappuccino.css) und damit aus dem
   Fluss — ohne Versatz läge der Seitenanfang darunter.

   Die Regel stand bis zum Audit in cappuccino.css. Die laden aber beide
   Layouts, und `body` grenzt nichts ein: hinter dem Login schob sie den
   Inhalt ein zweites Mal nach unten, zusätzlich zum Versatz, den
   .main-panel (app.css) dort bereits setzt.

   Hier ist sie richtig aufgehoben, ohne eingrenzenden Selektor:
   public.css lädt genau ein Template (base_public.html:12) — dasselbe,
   das als einziges .landing-nav rendert (base_public.html:27).
   --------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    body {
        padding-top: var(--mobile-header-height);
    }
}

/* ---------------------------------------------------------------------------
   Flache Karten

   Im öffentlichen Bereich tragen Boxen keinen Schatten. Die übrigen
   Marketing-Klassen (.feature-card, .blog-card, .testimonial-card …) sind
   direkt in cappuccino.css entschattet, weil sie ausschließlich hier
   vorkommen. `.card` ist der Sonderfall: die Klasse steht in 90 Templates,
   ganz überwiegend hinter dem Login, und cappuccino.css laden beide
   Grundgerüste. Ein Eingriff dort hätte die komplette App mit entschattet.

   Deshalb steht der Reset hier — nach demselben Muster wie der
   Kopfleisten-Versatz darüber: public.css lädt genau ein Template
   (base_public.html:12), der Selektor braucht keine Eingrenzung.

   Die Rahmenlinie aus cappuccino.css bleibt und trägt die Abgrenzung
   allein; ohne sie verschwänden weiße Karten auf section-milk (#FFFAF5).
   --------------------------------------------------------------------------- */
.card,
.card:hover {
    box-shadow: none;
}

/* Die wenigen Kartenköpfe, die als Struktur stehenbleiben mussten (die
   Ziffern-Tabelle der Gebührenordnung hat keinen card-body, ihr Zähler wird
   per JavaScript beschrieben), verlieren auch Bootstraps grauen Grund. Eine
   Überschrift auf einer Fläche war der Ausgangspunkt der Entscheidung — ob
   die Fläche türkis oder grau ist, ändert daran nichts. */
.card-header,
.card-footer,
.modal-header {
    background-color: transparent;
}