/**
 * Bruecke — alte Klassen auf die neuen Tokens
 *
 * Wird im Frontend NACH style.css geladen. Zwei Aufgaben:
 *
 * 1. Die Variablennamen, die style.css noch benutzt, auf die Tokens aus
 *    tokens.css legen. Damit folgt der ganze Auftritt sofort der neuen
 *    Farbwelt und bekommt den Dunkelmodus, ohne dass eine einzige
 *    Seitenvorlage angefasst werden muss.
 *
 * 2. Die Stellen ueberschreiben, an denen style.css Farben fest verdrahtet
 *    hat (background: white und aehnliches). Die brechen im Dunkelmodus,
 *    weil sie an keiner Variablen haengen.
 *
 * Dazu die wenigen neuen Bausteine aus Phase 1: Sprungmarke, Ansicht-Leiste,
 * Logo-Platzhalter.
 *
 * Diese Datei ist ein Uebergang. Sie schrumpft mit jeder Phase, in der eine
 * Seite neu geschrieben wird, und faellt am Ende weg.
 */

/* ------------------------------------------------------------------ *
 * 1. Alte Namen auf neue Tokens
 *
 * Nicht aufgefuehrt und deshalb direkt aus tokens.css: --accent,
 * --font-body, --shadow, --radius, --radius-sm, --radius-lg, --radius-xl.
 * Die Namen sind dort dieselben und tragen jetzt die neuen Werte.
 * ------------------------------------------------------------------ */

:root {
    --primary: var(--ink);
    --primary-light: var(--ink-2);
    --primary-dark: var(--ink);
    --secondary: var(--olive);
    --accent-light: var(--accent-hover);

    --bg-body: var(--bg);
    --bg-card: var(--surface);
    --text-main: var(--ink-2);
    --text-dark: var(--ink);
    --text-light: var(--ink-3);
    --border: var(--line);
    --gray-100: var(--surface-2);

    --font-heading: var(--font-display);

    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 4rem;

    /* tokens.css kennt nur eine Schattenstufe. Die alten Abstufungen
       darauf zu legen ist genauer als drei erfundene Werte. */
    --shadow-sm: var(--shadow);
    --shadow-lg: var(--shadow);
    --shadow-xl: var(--shadow);
}

body {
    font-size: var(--t-body);
}

/* Newsreader liegt nur in Gewicht 400 vor -- mehr benutzt der Entwurf nicht.
   style.css setzt Ueberschriften aber auf 700. Ohne diese Regel rechnet der
   Browser sich das Fett selbst aus, und bei einer Serife sieht das plump aus. */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
}

/* ------------------------------------------------------------------ *
 * 2. Fest verdrahtete Farben aus style.css einfangen
 * ------------------------------------------------------------------ */

.search-form,
.category-card,
.betrieb-card,
.info-card,
.info-column,
.kueche-tag,
#map-consent {
    background: var(--surface-2);
}

.search-input {
    color: var(--ink);
}

.search-input::placeholder {
    color: var(--ink-3);
    opacity: 1;
}

select.search-input {
    border-left-color: var(--line);
}

.btn {
    color: var(--accent-ink);
    min-height: var(--tap);
}

/* Die Kopfleiste der Detailseite hatte einen Verlauf aus zwei Blautoenen
   mit weisser Schrift. */
.detail-header {
    background: linear-gradient(135deg, var(--surface-2) 0%, var(--bg-2) 100%);
    color: var(--ink);
    border: 1px solid var(--line);
}

.detail-header h1 {
    color: var(--ink);
}

/* Der Platzhalter fuer fehlende Fotos war eine leere graue Flaeche.
   Bis der eigene Baustein aus Phase 3 steht, wenigstens die Kachel. */
div.betrieb-image {
    background: linear-gradient(135deg,
            color-mix(in oklab, var(--accent) 16%, var(--surface)) 0%,
            color-mix(in oklab, var(--olive) 14%, var(--surface)) 100%);
}

/* ------------------------------------------------------------------ *
 * 3. Neue Bausteine
 *
 * Was Phase 1 hier vorlaeufig geloest hatte — Kopfleiste, Ansicht-Knoepfe,
 * Logo, Fussbereich — steht seit Phase 2 richtig in rahmen.css.
 * ------------------------------------------------------------------ */

/* Sprungmarke — sichtbar, sobald sie den Fokus bekommt */
.sprungmarke {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 1100;
    padding: 12px 18px;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: var(--radius-sm);
    font-weight: 600;
    transform: translateY(-200%);
}

.sprungmarke:focus {
    transform: translateY(0);
    color: var(--accent-ink);
}

/* ------------------------------------------------------------------ *
 * 4. Zwei alte Fehler, die jetzt auffallen
 *
 * Gehoert streng genommen in Phase 4 (Startseite). Aber eine Suche, die
 * auf dem Telefon nicht bedienbar ist, sollte nicht bis dahin stehen
 * bleiben.
 * ------------------------------------------------------------------ */

@media (max-width: 768px) {

    /* style.css setzt unter 768px background:white auf .btn. Zusammen mit
       der weissen Schrift war der Suchknopf damit unsichtbar -- schon vor
       dem Redesign, es faellt nur jetzt auf. */
    .btn {
        background: var(--accent);
        color: var(--accent-ink);
    }

    /* Die drei Suchfelder standen weiter nebeneinander und liefen aus dem
       Bild, weil nur .search-form umbricht, nicht die Gruppe darin. */
    .search-input-group {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Seiten, die noch auf .container stehen (Detailseite, Impressum,
   Datenschutz), bringen unten keinen Abstand mit. Seit der Fussbereich
   seinen margin-top nicht mehr hat, stiesse ihr Inhalt sonst direkt an ihn. */
/*
 * .container aus style.css bringt nur seitliches Polster mit. Die neu
 * geschriebenen Seiten setzen ihren Abstand selbst (.liste-innen,
 * .start-kopf); die Seiten, die noch auf .container stehen -- Orte,
 * Kategorien, Suche, Impressum, Datenschutz, Detailseite, 404 --, klebten
 * dadurch oben am Kopfbereich und unten am Fussbereich.
 *
 * 48px oben ist derselbe Wert wie in .liste-innen, damit der Rhythmus ueber
 * die Seiten hinweg gleich bleibt.
 */
main > .container {
    padding-top: 48px;
}

main > .container:last-child {
    padding-bottom: var(--spacing-2xl);
}

@media (max-width: 900px) {
    main > .container {
        padding-top: 32px;
    }
}

/* ------------------------------------------------------------------ *
 * 5. Grundsicherung fuer Bilder
 *
 * Im ganzen Projekt gab es keine einzige img-Regel. Ein Bild ohne Begrenzung
 * steht in seiner Dateigroesse da und schiebt auf schmalen Geraeten die
 * ganze Seite auseinander -- genau so ist die Bildergalerie der Detailseite
 * uebergelaufen. Diese Regel faengt das ein fuer alle Mal, auch fuer jedes
 * Bild, das spaeter dazukommt.
 *
 * height: auto verhindert, dass ein Bild verzerrt, wenn nur die Breite
 * begrenzt wird. Wo eine feste Hoehe gewollt ist (Logo, Kachel, Zeile),
 * setzt die dortige Regel sie mit hoeherer Spezifitaet.
 * ------------------------------------------------------------------ */

img,
picture,
video,
svg {
    max-width: 100%;
}

img,
video {
    height: auto;
}


/* ------------------------------------------------------------------ *
 * 6. Das hidden-Attribut muss auch wirken
 *
 * Browser setzen [hidden] { display: none } in ihrer eigenen Vorlage --
 * mit der Spezifitaet eines Elementselektors. Jede Klassenregel mit einem
 * display schlaegt das. Genau daran hing "5 weitere anzeigen" im Filter:
 * .filter-zeile { display: flex } gewann gegen das hidden, die Zeilen
 * standen von vornherein alle da, und der Knopf hatte nichts mehr zu tun.
 *
 * !important ist hier richtig und nicht faul: hidden heisst hidden, und
 * keine Layoutregel soll das aushebeln koennen.
 * ------------------------------------------------------------------ */

[hidden] {
    display: none !important;
}