/* ============================================================
   MP3 – Stylesheet

   Eine Seite, eine Aufgabe. Das Layout ist für das Telefon
   entworfen und wird zum Schreibtisch hin breiter, nicht
   umgekehrt — der Link kommt fast immer aus einer App auf dem
   Handy.

   Zwei Fassungen: hell und dunkel, gesteuert von der
   Systemeinstellung. Ein öffentliches Werkzeug, das nachts
   weiss ins Gesicht leuchtet, macht keine Freude.

   Systemschrift statt Webfont: auf iPhone und Mac ist das SF,
   auf Android Roboto — jeweils mit den Feinheiten, die der
   Hersteller eingebaut hat. Spart nebenbei zwei Anfragen an
   fremde Server auf einer Seite, die sonst keine braucht.
   ============================================================ */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    color-scheme: light dark;

    /* Kein Farbakzent: der Knopf, der Fortschritt und das Zeichen oben
       sind schwarz (im Dunkeln weiss). Farbe bleibt den drei Zuständen
       vorbehalten, die wirklich etwas melden — fertig, Warnung, Fehler. */
    --akzent: #14162b;
    --auf-akzent: #ffffff;

    --gut: #10b981;
    --warn: #f59e0b;
    --schlecht: #f43f5e;

    /* Helle Fassung */
    --grund: #f6f6fa;
    --flaeche: #ffffff;
    --flaeche-2: #f1f2f7;
    --flaeche-glas: rgba(255, 255, 255, .72);
    --linie: rgba(17, 20, 34, .09);
    --linie-stark: rgba(17, 20, 34, .16);

    --text: #14162b;
    --text-2: #4c5068;
    --text-3: #83879e;

    --schatten-s: 0 1px 2px rgba(20, 22, 43, .05);
    --schatten-m: 0 1px 2px rgba(20, 22, 43, .05), 0 12px 28px -14px rgba(20, 22, 43, .22);
    --schatten-knopf: 0 6px 16px -8px rgba(20, 22, 43, .5);
    --ring: 0 0 0 3.5px rgba(20, 22, 43, .18);

    --rund: 18px;
    --rund-s: 12px;
    --rund-l: 26px;

    /* Kurz und ohne Überschwingen — das ist Rückmeldung, keine Show. */
    --uebergang: 180ms cubic-bezier(.32, .72, 0, 1);

    --schrift: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
    --schrift-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --akzent: #f2f3f7;
        --auf-akzent: #0b0c10;

        --grund: #0b0c10;
        --flaeche: #16181f;
        --flaeche-2: #1e212a;
        --flaeche-glas: rgba(22, 24, 31, .72);
        --linie: rgba(255, 255, 255, .09);
        --linie-stark: rgba(255, 255, 255, .17);

        --text: #f2f3f7;
        --text-2: #a9aebf;
        --text-3: #7b8096;

        --schatten-s: 0 1px 2px rgba(0, 0, 0, .4);
        --schatten-m: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 32px -16px rgba(0, 0, 0, .8);
        --schatten-knopf: none;
        --ring: 0 0 0 3.5px rgba(242, 243, 247, .28);
    }
}

html {
    /* Verhindert, dass iOS beim Drehen die Schrift eigenmächtig vergrössert. */
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100dvh;
    font-family: var(--schrift);
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
    background: var(--grund);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Kein grauer Kasten beim Antippen — die Knöpfe geben selbst
       Rückmeldung, und zwar sofort beim Drücken. */
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}

[hidden] { display: none !important; }

::selection { background: color-mix(in srgb, var(--akzent) 20%, transparent); }

:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--rund-s);
}

/* ── Kopfzeile ───────────────────────────────────────────────────
   Schwebende Glasleiste, unter der der Inhalt durchläuft — statt
   eines undurchsichtigen Streifens, der oben Platz wegnimmt. */
.kopf {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--flaeche-glas);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding-top: env(safe-area-inset-top);
}

/* Weicher Übergang statt harter Trennlinie — die Kante fällt nur
   dort auf, wo tatsächlich Inhalt darunter durchläuft. */
.kopf::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 18px;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--grund) 60%, transparent), transparent);
    pointer-events: none;
}

.kopf-inhalt {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 max(18px, env(safe-area-inset-left)) 0 max(18px, env(safe-area-inset-right));
    height: 56px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.marke-zeichen {
    flex: none;
    display: grid;
    place-items: center;
    color: var(--text);
}

.marke-zeichen svg { width: 20px; height: 20px; }

.marke {
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -.015em;
}

.marke-sub {
    font-size: 13px;
    color: var(--text-3);
    padding-left: 9px;
    border-left: 1px solid var(--linie);
    /* Am Telefon abschneiden statt umbrechen: die Leiste soll eine
       Zeile hoch bleiben, egal wie schmal das Gerät ist. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Seite ─────────────────────────────────────────────────────── */

.seite {
    max-width: 720px;
    margin: 0 auto;
    /* Solange nur die Eingabekarte da ist, steht sie in der Mitte des
       Bildschirms statt oben mit einem halben Bildschirm Leere darunter.
       Sobald die Warteschlange dazukommt und der Inhalt höher wird als
       das Fenster, schaltet "safe" von selbst auf oben um — sonst wäre
       der obere Rand wegge­scrollt und nicht mehr erreichbar.
       Browser ohne "safe" verwerfen die Zeile und fangen oben an, was
       genau der richtige Rückfall ist. Und "svh" statt "dvh", damit die
       Karte nicht springt, wenn die Bildschirmtastatur aufgeht. */
    min-height: calc(100svh - 56px);
    justify-content: safe center;
    /* Ohne Überschrift und Fussnote steht die Karte allein auf der
       Seite. Der grosszügige Abstand nach oben ist das, was ihr
       stattdessen Halt gibt — sonst klebt sie unter der Leiste. */
    padding:
        44px
        max(18px, env(safe-area-inset-right))
        calc(56px + env(safe-area-inset-bottom))
        max(18px, env(safe-area-inset-left));
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Karten ────────────────────────────────────────────────────── */

.karte {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--rund-l);
    box-shadow: var(--schatten-m);
    padding: 18px;
}

/* ── Bänder ────────────────────────────────────────────────────── */

.band {
    border-radius: var(--rund);
    padding: 13px 15px;
    font-size: 14.5px;
    line-height: 1.45;
    border: 1px solid;
}

.band code {
    font-family: var(--schrift-mono);
    font-size: .85em;
    padding: 1px 5px;
    border-radius: 5px;
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.band-fehler {
    color: var(--schlecht);
    background: color-mix(in srgb, var(--schlecht) 10%, var(--flaeche));
    border-color: color-mix(in srgb, var(--schlecht) 30%, transparent);
}

.band-warnung {
    color: var(--warn);
    background: color-mix(in srgb, var(--warn) 12%, var(--flaeche));
    border-color: color-mix(in srgb, var(--warn) 32%, transparent);
}

/* ── Eingabe ─────────────────────────────────────────────────────
   16px ist keine Geschmacksfrage: darunter zoomt Safari auf dem
   iPhone beim Hineintippen in das Feld hinein, und die Seite steht
   danach verschoben da. */
.feld {
    width: 100%;
    display: block;
    font-family: var(--schrift-mono);
    font-size: 16px;
    line-height: 1.65;
    color: var(--text);
    background: var(--flaeche-2);
    border: 1px solid transparent;
    border-radius: var(--rund);
    padding: 16px 17px;
    resize: none;
    min-height: 132px;
    transition: border-color var(--uebergang), box-shadow var(--uebergang), background var(--uebergang);
}

.feld::placeholder { color: var(--text-3); }

.feld:focus {
    outline: none;
    background: var(--flaeche);
    border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
    box-shadow: var(--ring);
}

/* ── Knöpfe ──────────────────────────────────────────────────────
   Mindestens 46px hoch: darunter trifft ein Daumen im Gehen nicht
   zuverlässig. Rückmeldung beim Drücken, nicht beim Loslassen. */
.knopf {
    margin-top: 14px;
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--auf-akzent);
    background: var(--akzent);
    border: none;
    border-radius: var(--rund);
    box-shadow: var(--schatten-knopf);
    cursor: pointer;
    transition: transform 110ms cubic-bezier(.32, .72, 0, 1), opacity var(--uebergang), box-shadow var(--uebergang);
}

.knopf:active:not(:disabled) { transform: scale(.975); }

.knopf:disabled { opacity: .5; cursor: default; box-shadow: none; }

.knopf-icon { width: 18px; height: 18px; flex: none; }

.knopf-still {
    margin-left: auto;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 550;
    color: var(--text-2);
    background: var(--flaeche-2);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 7px 14px;
    min-height: 34px;
    cursor: pointer;
    transition: transform 110ms cubic-bezier(.32, .72, 0, 1), color var(--uebergang), background var(--uebergang);
}

.knopf-still:hover { color: var(--text); background: var(--linie); }
.knopf-still:active { transform: scale(.96); }

/* ── Meldungen ─────────────────────────────────────────────────── */

.meldung {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.45;
    padding: 11px 13px;
    border-radius: var(--rund-s);
    color: var(--schlecht);
    background: color-mix(in srgb, var(--schlecht) 10%, transparent);
}

.meldung.ist-gut {
    color: var(--gut);
    background: color-mix(in srgb, var(--gut) 12%, transparent);
}

/* ── Liste ─────────────────────────────────────────────────────── */

.karte-liste { padding: 8px 8px 6px; }

.liste-kopf {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px 10px 13px;
}

.zaehler {
    font-size: 13px;
    color: var(--text-3);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.liste { list-style: none; }

.eintrag {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--rund);
}

.eintrag + .eintrag { box-shadow: 0 -1px 0 var(--linie); }

/* Zustandsplakette. Die Farbe sagt schon aus zwei Metern, wie es
   um den Eintrag steht — das Zeichen darin sagt es genau. */
.plakette {
    width: 38px;
    height: 38px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--flaeche-2);
    color: var(--text-3);
}

.plakette svg { width: 18px; height: 18px; }

.eintrag[data-zustand="laedt"]   .plakette,
.eintrag[data-zustand="wandelt"] .plakette {
    color: var(--text);
    background: var(--flaeche-2);
}

.eintrag[data-zustand="fertig"] .plakette {
    color: var(--gut);
    background: color-mix(in srgb, var(--gut) 15%, transparent);
}

.eintrag[data-zustand="fehler"] .plakette {
    color: var(--schlecht);
    background: color-mix(in srgb, var(--schlecht) 14%, transparent);
}

.eintrag-haupt { flex: 1; min-width: 0; }

.eintrag-titel {
    font-size: 15px;
    font-weight: 570;
    line-height: 1.32;
    letter-spacing: -.008em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Adressen haben keine Leerzeichen und würden sonst hinausragen. */
    overflow-wrap: anywhere;
}

.eintrag-titel.ist-adresse {
    font-family: var(--schrift-mono);
    font-size: 13px;
    font-weight: 400;
    color: var(--text-2);
}

.eintrag-zeile2 {
    margin-top: 2px;
    font-size: 13px;
    color: var(--text-3);
    /* Zahlen dürfen beim Hochzählen nicht in der Breite wackeln. */
    font-variant-numeric: tabular-nums;
    /* Fliesstext, nicht Flexbox: als Flexbox schrumpft jedes Stück für
       sich und wird einzeln abgeschnitten — aus "Lädt · 63 % · 4.2MiB/s"
       wird dann "L… · 63… · 4.2Mi…". So kürzt nur das Ende. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.punkt { opacity: .45; margin: 0 5px; }

.eintrag-fehler {
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--schlecht);
    /* Fehlertexte sind ganze Sätze — die dürfen umbrechen. */
    white-space: normal;
}

/* ── Fortschritt ───────────────────────────────────────────────── */

.balken {
    margin-top: 8px;
    height: 5px;
    border-radius: 999px;
    background: var(--flaeche-2);
    overflow: hidden;
}

.balken-fuellung {
    height: 100%;
    border-radius: 999px;
    background: var(--akzent);
    transition: width 380ms cubic-bezier(.32, .72, 0, 1);
}

/* Beim Prüfen, beim Verbinden und beim Umwandeln gibt es keinen
   echten Fortschritt. Ein wanderndes Band sagt „es passiert etwas",
   ohne eine Zahl zu erfinden, die nicht stimmt. */
.balken.ist-unbestimmt .balken-fuellung {
    width: 38% !important;
    transition: none;
    animation: wandern 1.5s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes wandern {
    0%   { transform: translateX(-105%); }
    100% { transform: translateX(268%); }
}

/* ── Aktionen ──────────────────────────────────────────────────── */

.eintrag-aktionen {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
}

.rund-btn {
    position: relative;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    text-decoration: none;
    transition: transform 110ms cubic-bezier(.32, .72, 0, 1), color var(--uebergang), background var(--uebergang);
}

.rund-btn::after { content: ''; position: absolute; inset: -3px; }

.rund-btn svg { width: 18px; height: 18px; }

.rund-btn:hover { color: var(--text); background: var(--flaeche-2); }
.rund-btn:active { transform: scale(.9); }

.rund-btn.ist-wichtig {
    color: var(--auf-akzent);
    background: var(--akzent);
}

.rund-btn.ist-wichtig:hover { color: var(--auf-akzent); opacity: .85; }

/* ── Grösserer Bildschirm ──────────────────────────────────────── */

@media (min-width: 600px) {
    .kopf-inhalt { height: 62px; }
    .seite { padding-top: 72px; gap: 18px; min-height: calc(100svh - 62px); }
    .karte { padding: 24px; }
    .karte-liste { padding: 10px 10px 8px; }
    .feld { min-height: 148px; }

    /* Am Schreibtisch wandert der Knopf nach rechts unter das Feld:
       eine Zeile, die von der Eingabe zur Handlung führt, statt eines
       Balkens über die ganze Breite. */
    .knopf {
        width: auto;
        min-width: 190px;
        margin: 16px 0 0 auto;
        padding: 0 26px;
    }
}

@media (max-width: 360px) {
    .seite {
        padding-left: max(13px, env(safe-area-inset-left));
        padding-right: max(13px, env(safe-area-inset-right));
    }
    .kopf-inhalt { padding-left: max(13px, env(safe-area-inset-left)); padding-right: max(13px, env(safe-area-inset-right)); }
    .karte { padding: 14px; }
    .karte-liste { padding: 6px 5px 4px; }
    .eintrag { gap: 10px; padding: 10px 7px; }
    .liste-kopf { padding: 8px 7px; }
    .eintrag-aktionen { gap: 0; }
}

/* ── Rücksichtnahmen ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    .balken-fuellung { transition: none; }
    /* Ohne Animation braucht das unbestimmte Band eine Form, die auch
       still etwas aussagt: ein halb gefüllter, ruhiger Balken. */
    .balken.ist-unbestimmt .balken-fuellung { width: 50% !important; opacity: .55; transform: none; }
    .knopf:active:not(:disabled), .knopf-still:active, .rund-btn:active { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
    .kopf { background: var(--flaeche); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-contrast: more) {
    :root { --linie: var(--linie-stark); }
    .karte, .feld { border-color: var(--linie-stark); }
    .eintrag-zeile2, .zaehler, .marke-sub { color: var(--text-2); }
}