:root {
    --grund: #0a0a0a;
    --karte: #161616;
    --rand: #262626;
    --text: #f4f4f5;
    --text-leise: #a1a1aa;
    --akzent: #f59e0b;
    --akzent-tief: #78350f;
    --fehler: #ef4444;
    --fehler-flaeche: #450a0a;
    --erfolg: #22c55e;
    --erfolg-flaeche: #052e16;
    --abstand: 1rem;
    --rundung: .625rem;
    --leiste: 4.25rem;
    color-scheme: dark;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font: 16px/1.5 -apple-system, system-ui, sans-serif;
    -webkit-text-size-adjust: 100%;
    /* Als Web-App läuft der Inhalt hinter die Statusleiste (black-translucent).
       Ohne diesen Abstand sitzt die Überschrift auf Uhrzeit und Dynamic Island. */
    padding-top: env(safe-area-inset-top, 0px);
}

main {
    max-width: 62rem;
    margin: 0 auto;
    padding: var(--abstand)
             max(var(--abstand), env(safe-area-inset-right, 0px))
             calc(var(--leiste) + env(safe-area-inset-bottom, 0px) + var(--abstand))
             max(var(--abstand), env(safe-area-inset-left, 0px));
}

h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 1.75rem 0 .5rem; }
a { color: var(--akzent); }

label { display: block; margin: 0 0 .9rem; color: var(--text-leise); font-size: .875rem; }
input, select, textarea {
    display: block; width: 100%; margin-top: .3rem; padding: .7rem;
    font: inherit; color: var(--text);
    background: var(--karte); border: 1px solid var(--rand); border-radius: var(--rundung);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }

button, .knopf {
    display: block; width: 100%; min-height: 2.75rem; padding: .7rem;
    font: inherit; font-weight: 600; text-align: center; text-decoration: none;
    color: #1a1205; background: var(--akzent);
    border: 0; border-radius: var(--rundung); cursor: pointer;
}
button.zweitrangig, .knopf.zweitrangig {
    color: var(--text); background: transparent; border: 1px solid var(--rand);
    margin-top: .5rem; font-weight: 400;
}
button.gefahr { background: var(--fehler-flaeche); color: var(--fehler); border: 1px solid var(--fehler); }

.fehler { background: var(--fehler-flaeche); color: var(--fehler); padding: .75rem; border-radius: var(--rundung); }
.erfolg { background: var(--erfolg-flaeche); color: var(--erfolg); padding: .75rem; border-radius: var(--rundung); }
.hinweis { background: var(--karte); border: 1px solid var(--rand); padding: .75rem; border-radius: var(--rundung); }

.navigation {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    display: flex; justify-content: space-around;
    background: rgba(22, 22, 22, .92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--rand);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.navigation a {
    flex: 1; min-height: var(--leiste); padding: .55rem .25rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    color: var(--text-leise); text-decoration: none; font-size: .7rem;
}
.navigation a .zeichen { font-size: 1.35rem; line-height: 1; }
.navigation a[aria-current="page"] { color: var(--akzent); }

@media (min-width: 48rem) {
    .navigation { position: static; border-top: 0; border-bottom: 1px solid var(--rand); justify-content: flex-start; }
    .navigation a { flex: 0 0 auto; min-height: 3rem; flex-direction: row; gap: .4rem; font-size: .9rem; padding: 0 1rem; }
    main { padding-bottom: var(--abstand); }
}

.kacheln { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 34rem) { .kacheln { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 48rem) { .kacheln { grid-template-columns: repeat(4, 1fr); } }

.kachel { display: block; color: inherit; text-decoration: none; }
.kachel .bild {
    aspect-ratio: 1; width: 100%; object-fit: cover; display: block;
    background: var(--karte); border: 1px solid var(--rand); border-radius: var(--rundung);
}
.kachel .interpret { display: block; margin-top: .4rem; font-size: .8rem; color: var(--text-leise); }
.kachel .titel { display: block; font-size: .875rem; font-weight: 600; }

.liste { list-style: none; margin: 0; padding: 0; }
.liste li { border-bottom: 1px solid var(--rand); }
.liste a { display: flex; gap: .75rem; align-items: center; padding: .6rem 0; color: inherit; text-decoration: none; }
.liste .bild { width: 3rem; height: 3rem; object-fit: cover; border-radius: .375rem; background: var(--karte); flex: none; display: block; }
.liste .zeile2 { color: var(--text-leise); font-size: .8rem; }

.marke { display: inline-block; margin: 0 .3rem .3rem 0; padding: .15rem .5rem; font-size: .75rem;
         color: var(--akzent); background: var(--akzent-tief); border-radius: 999px; }
.leise { color: var(--text-leise); font-size: .875rem; }
img { max-width: 100%; height: auto; }
.blaettern { display: flex; gap: .5rem; align-items: center; justify-content: space-between; margin-top: 1.5rem; }
.blaettern .knopf { width: auto; padding: .6rem 1rem; }

.filter { margin-bottom: 1.25rem; }
.filterzeile { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
@media (min-width: 48rem) { .filterzeile { grid-template-columns: repeat(6, 1fr); } }
.filterzeile label { margin: 0; font-size: .75rem; }
.ansichtswahl { margin: .75rem 0 0; }
.ansichtswahl .knopf { width: auto; display: inline-block; padding: .5rem 1rem; }

dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .75rem; }
dt { color: var(--text-leise); font-size: .875rem; }
dd { margin: 0; }
video { width: 100%; border-radius: var(--rundung); background: var(--karte); margin-top: .75rem; }
.trefferliste { list-style: none; margin: 0; padding: 0; }
.trefferliste li { border-bottom: 1px solid var(--rand); }
.trefferliste a { display: block; padding: .75rem 0; color: inherit; text-decoration: none; }
.trefferliste strong { color: var(--akzent); }

.zahlen { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 1.5rem; }
@media (min-width: 34rem) { .zahlen { grid-template-columns: repeat(4, 1fr); } }
.zahl-karte { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--rundung); padding: .75rem; }
.zahl-karte strong { display: block; font-size: 1.6rem; color: var(--akzent); line-height: 1.1; }
.zahl-karte span { font-size: .75rem; color: var(--text-leise); }

.balken { list-style: none; margin: 0; padding: 0; }
.balken li { display: grid; grid-template-columns: 7rem 1fr 2.5rem; gap: .5rem; align-items: center; margin-bottom: .35rem; }
.balken .beschriftung { font-size: .8rem; color: var(--text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balken .flaeche { background: var(--karte); border-radius: 999px; height: 1.1rem; overflow: hidden; }
.balken .fuellung { display: block; height: 100%; background: var(--akzent); border-radius: 999px; }
.balken .zahl { font-size: .8rem; text-align: right; }

.stuecke { list-style: none; margin: 0; padding: 0; }
.stuecke li { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: .5rem;
              padding: .4rem 0; border-bottom: 1px solid var(--rand); }
.stuecke .position { color: var(--akzent); font-size: .8rem; }
.stuecke .dauer { color: var(--text-leise); font-size: .8rem; }