/* Bussimulation: Grundstil. Ruhige Papierkarte (Palette aus vorlagen/kartenstil.js), schwebende
   Tafeln, klare Zahlen. Module ergänzen eigene Regeln über dom.stil(id, css). */

:root {
    --papier: #F2EFE7;
    --papier-hell: #FBFAF6;
    --papier-tief: #E7E1D5;
    --tinte: #211D14;
    --tinte-2: #5B5346;
    --tinte-3: #8A8171;
    --rand: #D9D1C1;
    --rand-2: #E8E2D6;
    --akzent: #1F6FB2;
    --akzent-hell: #E3EEF8;
    --gut: #2E7D4F;
    --gut-hell: #E2F1E7;
    --warn: #B8741A;
    --warn-hell: #FBEEDB;
    --schlecht: #B83227;
    --schlecht-hell: #F8E1DE;
    --schatten: 0 1px 2px rgba(40, 32, 16, 0.08), 0 8px 24px rgba(40, 32, 16, 0.12);
    --schatten-gross: 0 2px 6px rgba(40, 32, 16, 0.10), 0 24px 60px rgba(40, 32, 16, 0.20);
    --radius: 12px;
    --radius-klein: 8px;
    --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --glas: rgba(251, 250, 246, 0.94);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --papier: #1A1C20;
        --papier-hell: #24262B;
        --papier-tief: #2D3036;
        --tinte: #ECE6D8;
        --tinte-2: #B4AC9B;
        --tinte-3: #857E71;
        --rand: #3A3D44;
        --rand-2: #30333A;
        --akzent-hell: #1D2F40;
        --gut: #5FBF85;
        --gut-hell: #1C3325;
        --warn: #E0A04A;
        --warn-hell: #3A2C18;
        --schlecht: #E5675B;
        --schlecht-hell: #3D2020;
        --schatten: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
        --schatten-gross: 0 2px 6px rgba(0, 0, 0, 0.3), 0 24px 60px rgba(0, 0, 0, 0.5);
        --glas: rgba(36, 38, 43, 0.95);
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --papier: #1A1C20;
    --papier-hell: #24262B;
    --papier-tief: #2D3036;
    --tinte: #ECE6D8;
    --tinte-2: #B4AC9B;
    --tinte-3: #857E71;
    --rand: #3A3D44;
    --rand-2: #30333A;
    --akzent-hell: #1D2F40;
    --gut: #5FBF85;
    --gut-hell: #1C3325;
    --warn: #E0A04A;
    --warn-hell: #3A2C18;
    --schlecht: #E5675B;
    --schlecht-hell: #3D2020;
    --schatten: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    --schatten-gross: 0 2px 6px rgba(0, 0, 0, 0.3), 0 24px 60px rgba(0, 0, 0, 0.5);
    --glas: rgba(36, 38, 43, 0.95);
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
    font-family: var(--schrift);
    font-size: 14px;
    line-height: 1.45;
    color: var(--tinte);
    background: var(--papier);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.zahl, .num, td.num { font-variant-numeric: tabular-nums; }
h1, h2, h3, h4 { margin: 0 0 8px; line-height: 1.2; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tinte-2); margin-top: 14px; }
p { margin: 0 0 8px; }
a { color: var(--akzent); }
.leise { color: var(--tinte-2); }
.klein { font-size: 12px; }
.gut { color: var(--gut); }
.warn { color: var(--warn); }
.schlecht { color: var(--schlecht); }
.fett { font-weight: 650; }
.zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.zeile.zwischen { justify-content: space-between; }
.spalte { display: flex; flex-direction: column; gap: 8px; }
.raster { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.raster-2 { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .raster-2 { grid-template-columns: 1fr; } }
.trenner { height: 1px; background: var(--rand-2); margin: 12px 0; }

#app { position: fixed; inset: 0; }
#karte { position: absolute; inset: 0; background: var(--papier); }
#karte canvas.netz { position: absolute; inset: 0; pointer-events: none; }

/* ---- Tafeln ---- */
.tafel {
    background: var(--glas);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    backdrop-filter: blur(8px);
}

/* ---- Kopfleiste ---- */
#kopf {
    position: absolute; top: 10px; left: 10px; right: 10px;
    display: flex; gap: 8px; align-items: stretch; pointer-events: none; z-index: 20;
}
#kopf > * { pointer-events: auto; }
#kopf .kopf-teil { display: flex; align-items: center; gap: 10px; padding: 6px 12px; min-height: 44px; }
#kopf .firma { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
#kopf .stufe { font-size: 11px; color: var(--tinte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kopf .uhr { font-variant-numeric: tabular-nums; min-width: 190px; }
#kopf .tempo { display: flex; gap: 2px; }
#kopf .tempo button { min-width: 34px; height: 32px; border: 1px solid var(--rand); background: var(--papier-hell); border-radius: 8px; cursor: pointer; font-size: 12px; }
#kopf .tempo button[aria-pressed="true"] { background: var(--tinte); color: var(--papier-hell); border-color: var(--tinte); }
#kopf .geld { font-variant-numeric: tabular-nums; font-weight: 700; cursor: pointer; }
#kopf .luecke { flex: 1; }
/* Zeitlupe auf Straßenebene: eigene Tafel neben Uhr und Tempo, nur solange sie greift */
#kopf .zeitlupe { gap: 6px; border-color: var(--akzent); cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap; }
#kopf .zeitlupe:hover { background: var(--akzent-hell); }
/* Die Kopfleiste bleibt einzeilig, auch mit Zeitlupe und Lage (Spieltest Dorf, Befund 10): Firma, Uhr, Tempo und Kasse
   behalten ihre Breite, Lage und Kernfrage kürzen ihren Text, bis 1500 px zeigt die Zeitlupe nur die Schildkröte */
#kopf > .kopf-teil { flex: none; }
#kopf .k-geld, #kopf .kern { white-space: nowrap; }
#kopf .kern { flex: 0 1 auto; min-width: 0; overflow: hidden; }
#kopf .kern > div { min-width: 0; }
#kopf .kern .klein { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1500px) { #kopf .zeitlupe > span:last-child { display: none; } #kopf .uhr { min-width: 160px; } }
@media (max-width: 800px) {
    #kopf { flex-wrap: wrap; }
    #kopf .firma { max-width: 140px; }
    #kopf .uhr { min-width: 0; }
}
/* Handy: zwei Zeilen. Oben Firma, Zeitlupe und Kasse, darunter Uhr und Tempo über die ganze Breite
   (so bricht die Tempozeile auch mit Zeitlupe nicht um, und die Karte behält eine Zeile mehr) */
@media (max-width: 700px) {
    #kopf { gap: 6px; }
    #kopf .kopf-teil { padding: 5px 10px; min-height: 40px; gap: 8px; }
    #kopf .k-firma { order: 1; flex: 1 1 0; min-width: 0; }
    #kopf .k-firma > div { min-width: 0; }
    #kopf .firma { max-width: none; }
    #kopf .zeitlupe { order: 2; }
    #kopf .k-geld { order: 3; }
    #kopf .k-uhr { order: 4; flex: 1 1 100%; justify-content: space-between; }
    #kopf .luecke { display: none; }
}

/* ---- Werkzeugleiste links ---- */
#werkzeuge {
    position: absolute; left: 10px; top: 70px; z-index: 20;
    display: flex; flex-direction: column; gap: 4px; padding: 6px;
}
#werkzeuge button {
    width: 44px; height: 44px; border-radius: 10px; border: 1px solid transparent; background: transparent;
    cursor: pointer; font-size: 20px; display: grid; place-items: center; position: relative;
}
#werkzeuge button:hover { background: var(--papier-tief); }
#werkzeuge button[aria-pressed="true"] { background: var(--akzent); color: #fff; }
#werkzeuge .trenn { height: 1px; background: var(--rand); margin: 2px 4px; }
/* Dunkles Design: Die Symbole sind Emoji, einige fast schwarz (Telefon beim Rufbus, Lupe, Haltestelle).
   Eine helle Plakette hinter jedem Symbol hebt sie vom dunklen Grund ab, auch beim Überfahren und im
   gewählten Werkzeug; gesperrte Werkzeuge bekommen eine blassere. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #werkzeuge button { background-image: radial-gradient(circle, color-mix(in srgb, var(--tinte) 80%, transparent) 0 15px, transparent 15.5px); }
    :root:not([data-theme="light"]) #werkzeuge button:disabled { background-image: radial-gradient(circle, color-mix(in srgb, var(--tinte) 35%, transparent) 0 15px, transparent 15.5px); }
}
:root[data-theme="dark"] #werkzeuge button { background-image: radial-gradient(circle, color-mix(in srgb, var(--tinte) 80%, transparent) 0 15px, transparent 15.5px); }
:root[data-theme="dark"] #werkzeuge button:disabled { background-image: radial-gradient(circle, color-mix(in srgb, var(--tinte) 35%, transparent) 0 15px, transparent 15.5px); }
/* Handy: Leiste quer über dem Dock. Schmalere Knöpfe (40 statt 44 px, Höhe bleibt 44), damit alle
   acht Werkzeuge auf 390 px passen; auf noch schmaleren Geräten scrollt die Leiste statt überzustehen */
@media (max-width: 700px) {
    #werkzeuge {
        top: auto; bottom: 64px; left: 50%; transform: translateX(-50%); flex-direction: row; gap: 2px; padding: 4px;
        max-width: calc(100vw - 20px); overflow-x: auto; scrollbar-width: none;
    }
    #werkzeuge::-webkit-scrollbar { display: none; }
    #werkzeuge button { width: 40px; flex: none; }
    #werkzeuge .trenn { width: 1px; height: auto; margin: 4px 2px; flex: none; }
}
@media (max-width: 360px) { #werkzeuge button { width: 33px; } }

/* ---- Seitenleiste rechts (Kontext) ---- */
#seite {
    position: absolute; top: 66px; right: 10px; bottom: 66px; width: 400px; z-index: 25;
    display: flex; flex-direction: column; overflow: hidden;
}
#seite .seite-kopf { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px 8px; border-bottom: 1px solid var(--rand-2); }
#seite .seite-kopf h2 { flex: 1; margin: 0; font-size: 17px; }
#seite .seite-inhalt { overflow: auto; padding: 12px 14px 16px; flex: 1; overscroll-behavior: contain; }
@media (max-width: 700px) {
    #seite { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 62vh; border-radius: 16px 16px 0 0; }
}

/* ---- Leitstelle (große Fenster) ---- */
#fenster {
    position: absolute; top: 66px; left: 66px; right: 66px; bottom: 66px; z-index: 30;
    max-width: 1180px; margin: 0 auto;
    display: flex; flex-direction: column; overflow: hidden;
}
#fenster .fenster-kopf { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--rand-2); }
#fenster .fenster-kopf h2 { flex: 1; margin: 0; }
#fenster .fenster-inhalt { overflow: auto; padding: 14px 18px 20px; flex: 1; overscroll-behavior: contain; }
@media (max-width: 800px) {
    #fenster { inset: 0; border-radius: 0; }
}

/* ---- Dock unten ---- */
/* Die Knöpfe liegen in .dock-rolle, die waagerecht scrollt; Pfeile mit Verlauf zeigen, dass am Rand
   noch Fenster kommen (app.js dockRand setzt .mehr-links und .mehr-rechts) */
#dock {
    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 20;
    display: flex; padding: 4px; max-width: calc(100vw - 20px);
}
#dock .dock-rolle {
    display: flex; gap: 2px; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    /* Platz nach oben für die Zähler, die über den Knopf hinausragen */
    padding-top: 6px; margin-top: -6px;
}
#dock .dock-rolle::-webkit-scrollbar { display: none; }
#dock .dock-rolle button {
    display: flex; align-items: center; gap: 6px; padding: 8px 12px; min-height: 40px; border-radius: 9px; flex: none;
    border: none; background: transparent; cursor: pointer; white-space: nowrap; position: relative;
}
#dock .dock-rolle button:hover { background: var(--papier-tief); }
#dock .dock-rolle button[aria-pressed="true"] { background: var(--tinte); color: var(--papier-hell); }
#dock .symbol { font-size: 16px; }
#dock .dock-rolle .mehr { display: none; }
#dock .dock-pfeil {
    display: none; position: absolute; top: 0; bottom: 0; width: 44px; z-index: 1; padding: 0 8px; border: none; cursor: pointer;
    align-items: center; font-size: 24px; font-weight: 700; line-height: 1; color: var(--akzent);
}
#dock .dock-pfeil.links { left: 0; justify-content: flex-start; border-radius: var(--radius) 0 0 var(--radius); background: linear-gradient(to left, transparent, var(--papier-hell) 55%); }
#dock .dock-pfeil.rechts { right: 0; justify-content: flex-end; border-radius: 0 var(--radius) var(--radius) 0; background: linear-gradient(to right, transparent, var(--papier-hell) 55%); }
#dock.mehr-links .dock-pfeil.links, #dock.mehr-rechts .dock-pfeil.rechts { display: flex; }
.marke {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--schlecht); color: #fff;
    font-size: 11px; font-weight: 700; display: inline-grid; place-items: center;
}
/* Mit Beschriftung steht der Zähler hinter dem Wort („Nachrichten 12“), ohne Beschriftung an der Ecke
   des Symbols, über dem Knopf; so verdeckt er nie einen Buchstaben */
#dock .marke { min-width: 16px; height: 16px; font-size: 10px; box-shadow: 0 0 0 2px var(--papier-hell); }
#werkzeuge .marke { position: absolute; top: 2px; right: 2px; }
/* Bis 1600 px Breite zeigen die seltenen Fenster nur ihr Symbol (Titel beim Überfahren), damit Lage und Menü ohne
   Scrollen im Dock stehen (Spieltest Stadt, M4) */
@media (max-width: 1600px) {
    #dock .dock-rolle button.selten { padding: 8px 10px; }
    #dock .dock-rolle button.selten .text { display: none; }
    #dock .dock-rolle button.selten .marke { position: absolute; top: -5px; right: 0; }
}
@media (max-width: 900px) {
    #dock .text { display: none; }
    #dock .marke { position: absolute; top: -5px; right: 0; }
}
@media (max-width: 700px) {
    #dock .dock-rolle button.selten { display: none; }
    #dock .dock-rolle .mehr { display: flex; }
}

/* ---- Knöpfe, Felder ---- */
.knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 36px; padding: 6px 14px; border-radius: 9px; border: 1px solid var(--rand);
    background: var(--papier-hell); cursor: pointer; font-weight: 600; white-space: nowrap;
    transition: background 0.12s, border-color 0.12s;
}
.knopf:hover:not(:disabled) { border-color: var(--tinte-3); }
.knopf:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.knopf.primaer { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.knopf.primaer:hover:not(:disabled) { filter: brightness(1.08); }
.knopf.gefahr { color: var(--schlecht); border-color: var(--schlecht); background: transparent; }
.knopf.leise { border-color: transparent; background: transparent; }
.knopf.leise:hover:not(:disabled) { background: var(--papier-tief); }
.knopf.klein { min-height: 28px; padding: 3px 10px; font-size: 13px; border-radius: 7px; }
.knopf:disabled { opacity: 0.45; cursor: not-allowed; }
.x-knopf { width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent; cursor: pointer; font-size: 18px; color: var(--tinte-2); }
.x-knopf:hover { background: var(--papier-tief); }

input[type="text"], input[type="number"], input[type="search"], select, textarea {
    min-height: 36px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--rand);
    background: var(--papier-hell); width: 100%;
}
input[type="range"] { width: 100%; accent-color: var(--akzent); }
input[type="checkbox"] { accent-color: var(--akzent); width: 18px; height: 18px; }
.feld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.feld > label, .feld > .feld-titel { font-size: 12px; font-weight: 600; color: var(--tinte-2); }
.schalter { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }

/* ---- Reiter ---- */
.reiter { display: flex; gap: 2px; border-bottom: 1px solid var(--rand-2); margin-bottom: 12px; overflow-x: auto; }
.reiter button {
    padding: 8px 12px; border: none; background: transparent; cursor: pointer; border-bottom: 2px solid transparent;
    color: var(--tinte-2); font-weight: 600; white-space: nowrap;
}
.reiter button[aria-selected="true"] { color: var(--tinte); border-bottom-color: var(--akzent); }

/* ---- Tabellen ---- */
.tabelle-huelle { overflow-x: auto; border: 1px solid var(--rand-2); border-radius: var(--radius-klein); }
table.tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tabelle th, table.tabelle td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--rand-2); white-space: nowrap; }
table.tabelle th { position: sticky; top: 0; background: var(--papier-hell); font-size: 12px; color: var(--tinte-2); font-weight: 650; cursor: default; }
table.tabelle th.sortierbar { cursor: pointer; }
table.tabelle th.sortierbar:hover { color: var(--tinte); }
table.tabelle td.num, table.tabelle th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tabelle tbody tr:hover { background: var(--papier-tief); }
table.tabelle tbody tr.klickbar { cursor: pointer; }
table.tabelle tr:last-child td { border-bottom: none; }
table.tabelle tfoot td { font-weight: 700; border-top: 1px solid var(--rand); }

/* ---- Kennzahlen, Karten, Abzeichen ---- */
.kennzahl { padding: 10px 12px; border: 1px solid var(--rand-2); border-radius: var(--radius-klein); background: var(--papier-hell); }
.kennzahl .k-titel { font-size: 12px; color: var(--tinte-2); }
.kennzahl .k-wert { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; }
.kennzahl .k-unter { font-size: 12px; color: var(--tinte-3); }
.karte-box { padding: 12px 14px; border: 1px solid var(--rand-2); border-radius: var(--radius-klein); background: var(--papier-hell); margin-bottom: 10px; }
.abzeichen { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--papier-tief); color: var(--tinte-2); white-space: nowrap; }
.abzeichen.gut { background: var(--gut-hell); color: var(--gut); }
.abzeichen.warn { background: var(--warn-hell); color: var(--warn); }
.abzeichen.schlecht { background: var(--schlecht-hell); color: var(--schlecht); }
.abzeichen.akzent { background: var(--akzent-hell); color: var(--akzent); }
.linien-nr {
    display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px; border-radius: 6px;
    color: #fff; font-weight: 800; font-size: 12px; letter-spacing: 0.02em;
}
.balken { height: 6px; border-radius: 3px; background: var(--papier-tief); overflow: hidden; }
.balken > div { height: 100%; background: var(--akzent); border-radius: 3px; }
.hinweis { padding: 10px 12px; border-radius: var(--radius-klein); background: var(--akzent-hell); margin-bottom: 10px; font-size: 13px; }
.hinweis.warn { background: var(--warn-hell); }
.hinweis.schlecht { background: var(--schlecht-hell); }
.hinweis.gut { background: var(--gut-hell); }
.leer-hinweis { padding: 24px; text-align: center; color: var(--tinte-3); }

/* ---- Meldungen (Toasts) ---- */
#meldungen { position: absolute; left: 10px; bottom: 66px; z-index: 40; display: flex; flex-direction: column; gap: 6px; max-width: min(420px, calc(100vw - 20px)); pointer-events: none; }
/* Meldungen kommen und gehen ohne Durchsichtigkeit: Halbtransparent wären sie über den Ortsnamen der
   Karte kaum lesbar. Sie gleiten herein und am Ende nach links hinaus (app.js meldungWeg). */
.meldung {
    pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; font-size: 13px;
    background: var(--papier-hell);
    animation: rein 0.2s ease-out;
}
.meldung.weg { animation: raus 0.3s ease-in forwards; pointer-events: none; }
.meldung .avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; }
.meldung .wer { font-size: 11px; color: var(--tinte-2); font-weight: 650; }
.meldung.warnung { border-left: 4px solid var(--warn); }
.meldung.erfolg { border-left: 4px solid var(--gut); }
.meldung.fehler { border-left: 4px solid var(--schlecht); }
@keyframes rein { from { transform: translateY(12px); } to { transform: none; } }
@keyframes raus { to { transform: translateX(calc(-100% - 20px)); } }
@media (prefers-reduced-motion: reduce) { .meldung, .meldung.weg { animation-duration: 1ms; } }
/* Handy: über den Werkzeugen, und über der Einstiegskarte, solange sie da ist (--aufgabe-platz aus app.js) */
@media (max-width: 700px) { #meldungen { bottom: calc(120px + var(--aufgabe-platz, 0px)); } }

/* ---- Dialog ---- */
.dialog-grund { position: fixed; inset: 0; background: rgba(20, 16, 8, 0.35); z-index: 100; display: grid; place-items: center; padding: 16px; }
.dialog { max-width: 520px; width: 100%; padding: 18px 20px; max-height: 90vh; overflow: auto; }
/* Knöpfe bleiben unten sichtbar, auch wenn ein langer Dialog scrollt (Bestellen mit Ausstattung, Spieltest Dorf, Befund 29) */
.dialog .knoepfe {
    display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
    position: sticky; bottom: -18px; margin: 16px -20px -18px; padding: 10px 20px 18px; background: var(--papier-hell);
    box-shadow: 0 -6px 8px -8px var(--rand);
}

/* ---- Ladebildschirm ---- */
.laden { position: fixed; inset: 0; display: grid; place-items: center; background: var(--papier); z-index: 200; transition: opacity 0.3s; }
.laden-box { text-align: center; }
.laden-logo { font-size: 48px; }
.laden-text { margin: 8px 0 12px; color: var(--tinte-2); }
.laden-balken { width: 240px; height: 6px; border-radius: 3px; background: var(--papier-tief); overflow: hidden; margin: 0 auto; }
.laden-balken > div { height: 100%; width: 10%; background: var(--akzent); transition: width 0.2s; }
.laden.weg { opacity: 0; pointer-events: none; }

/* ---- Startbildschirm ---- */
#start:empty { display: none; }
#start { position: fixed; inset: 0; z-index: 90; overflow: auto; }

.nur-mobil { display: none; }
@media (max-width: 700px) { .nur-mobil { display: initial; } .nur-gross { display: none !important; } }