/* app.css - bewusst schlicht. Grosse Flaechen, grosse Schrift, ein Weg pro
   Bildschirm. Kein Framework, keine Abhaengigkeit. */

:root {
    --bg: #f4f3ef;
    --karte: #ffffff;
    --text: #1c1c1c;
    --text-mild: #5a5a5a;
    /* Jobsee-Farben (17.09.2026), aus Logo und App-Symbol genommen.
       Weiss auf --marke hat einen Kontrast von gut 6:1, also auch im
       Sonnenlicht lesbar. Gelb nur als Flaeche, nie als Schriftfarbe. */
    --marke: #0656c8;
    --marke-dunkel: #04439c;
    --marke-hell: #e8f0fb;
    --akzent: #fed02e;
    --akzent-hell: #fff4cc;
    --rot: #a33b2e;
    --rand: #ddd8ce;
    --blau: #2255a4;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.45;
}

main {
    max-width: 480px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    min-height: 100vh;
}

h1 { font-size: 26px; margin: 0 0 8px; }
h2 { font-size: 20px; margin: 24px 0 8px; }
p { margin: 0 0 16px; }
.mild { color: var(--text-mild); font-size: 15px; }

/* Alle Knoepfe mindestens 56 Pixel hoch (Daumenregel, siehe .aendern weiter
   unten) - mit Polsterung 18px oben/unten und Zeilenhoehe kommt ein Knopf
   schon ueber 60px, min-height sichert es zusaetzlich zu, auch wenn der
   Text mal auf eine kuerzere Zeile passt. */
.knopf {
    display: block;
    width: 100%;
    min-height: 56px;
    padding: 18px;
    margin: 10px 0;
    border: 2px solid transparent;
    border-radius: 14px;
    font-size: 19px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    color: white;
    background: var(--marke);
}
.knopf:active { background: var(--marke-dunkel); }
/* Flaechig statt nur umrandet: auf einem hellen Hintergrund wirkt ein
   reiner Rahmen schnell wie ein deaktivierter Knopf. Die helle Markenfarbe
   als Flaeche zeigt "das geht auch", bleibt aber sichtbar leiser als der
   volle Blauton von BEWERBEN. */
.knopf.sekundaer {
    background: var(--marke-hell);
    color: var(--marke-dunkel);
}
.knopf.sekundaer:active { background: #d3e3f7; }
.knopf.verwerfen {
    background: transparent;
    color: var(--rot);
    border: 2px solid var(--rand);
}
.knopf:disabled { opacity: 0.6; }

.karte {
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: 18px;
    padding: 24px;
    margin: 18px 0;
}

.karte .firma { font-size: 24px; font-weight: 700; margin-bottom: 2px; line-height: 1.25; }
.karte .ort { color: var(--text-mild); margin-bottom: 14px; }
/* "Passt, weil ...": der freundliche gelbe Hinweis, um den sich SPEC.md
   dreht. Der Balken links macht ihn auf den ersten Blick als "Gelb, gute
   Nachricht" erkennbar, statt nur eine blasse Flaeche zu sein. */
.karte .passt { background: var(--akzent-hell); color: var(--marke-dunkel); padding: 14px 16px;
    border-left: 4px solid var(--akzent); border-radius: 0 10px 10px 0;
    font-size: 17px; line-height: 1.4; margin-bottom: 4px; }

/* Absage-Karte (Artikel-22-Knopf, siehe SPEC.md "Nach der Absage"): eigene
   Farbe, damit sie sich sichtbar vom normalen Stellenangebot unterscheidet -
   das ist kein Angebot, das ist eine Nachfrage. */
.karte.absage-karte { border-color: var(--rot); }
.karte.absage-karte .passt { background: #fbeceb; color: var(--rot); border-left-color: var(--rot); }
/* Der Satz des zweiten Entfernungsbands: "etwas weiter weg als sonst".
   Gedaempft, nicht alarmierend - die Stelle ist ja passend, sie liegt nur
   ausserhalb des eingestellten Umkreises. */
.karte .hinweis { margin-top: 10px; color: var(--text-mild); font-size: 0.92em; }

/* Die zwei Hauptknoepfe der Karte nebeneinander statt untereinander -
   SPEC.md verlangt "klar getrennt und mit dem Daumen erreichbar". Nebeneinander
   sieht man auf einen Blick: zwei verschiedene Handlungen, nicht Schritt 1
   und Schritt 2. Gepolstert seitlich schmaler, damit ANSEHEN und BEWERBEN
   auch auf einem 320px breiten Telefon nicht umbrechen. */
.aktionen { display: flex; gap: 12px; margin: 16px 0 6px; }
.aktionen .knopf { flex: 1; margin: 0; padding-left: 8px; padding-right: 8px; }

/* Laengerer Einstiegstext, der wirklich gelesen werden muss (SPEC: "ohne
   Erklaerung bedienbar"). .mild bleibt fuer kleine Nebensaetze bei 15px -
   dieser Zusatz hebt die fuehrende Anleitung auf die geforderten 17px an,
   ohne alle anderen .mild-Stellen im Programm zu vergroessern. */
.mild.lead { font-size: 17px; line-height: 1.5; }

.band {
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--text-mild);
    margin-bottom: 4px;
}

/* Beispielkarten statt eigener Stellen (39. Lauf). Kraeftiger als das
   Testband, weil es etwas sagt, das sich von Tag zu Tag aendert - das
   Testband liest man nach dem ersten Mal nicht mehr. */
.beispielband {
    background: #fdecea;
    border: 1px solid #e2a39b;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 15px;
    margin-bottom: 14px;
}

.testband {
    background: #fff4e0;
    border: 1px solid #e8cd94;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    margin-bottom: 18px;
}

label { display: block; font-weight: 600; margin: 14px 0 4px; font-size: 15px; }
textarea, input[type=text] {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--rand);
    font-size: 16px;
    font-family: inherit;
}
textarea { min-height: 70px; }

.upload-feld {
    border: 2px dashed var(--marke);
    background: var(--marke-hell);
    border-radius: 14px;
    padding: 24px;
    text-align: center;
    margin: 16px 0;
}

.dateiliste { font-size: 14px; color: var(--text-mild); margin: 8px 0 0; }
.dateiliste a { color: var(--blau); }

.trenner { text-align: center; color: var(--text-mild); margin: 18px 0; font-size: 14px; }

.zaehler { text-align: center; color: var(--text-mild); font-size: 14px; margin-bottom: 4px; }

.fehler-hinweis {
    background: #fbeceb; border: 1px solid #e3a8a1; border-radius: 10px;
    padding: 12px; margin: 12px 0; font-size: 15px;
}

.abschnitt { margin-bottom: 22px; }
.abschnitt h3 { font-size: 16px; margin: 0 0 8px; color: var(--text-mild);
    text-transform: uppercase; letter-spacing: 0.05em; }

/* Eine Station der Stammakte: Lebenslauf-Zeile plus die Moeglichkeit, sie zu
   aendern. Der Lesetext steht ruhig da, das "ändern" bleibt klein - sonst
   sieht die Seite nach Formular aus, und Formulare sind laut SPEC genau das,
   was die Zielgruppe nicht will. */
.station { margin-bottom: 14px; }
.station-kopf { margin: 0 0 4px; }
.station-punkte {
    margin: 0 0 4px;
    padding-left: 20px;
    color: var(--text-mild);
    font-size: 16px;
}
.station-punkte li { margin-bottom: 2px; }

/* Das aufklappbare "ändern". Die Schrift bleibt klein und zurueckhaltend,
   damit der Blick beim Hauptknopf bleibt - die TREFFERFLAECHE aber nicht.

   Die 44 Pixel Mindesthoehe sind kein Schoenheitswert: Mit 6 Pixel Innenrand
   waren es gemessene 34 Pixel, und darunter trifft ein Daumen unzuverlaessig.
   Die Zielgruppe der SPEC sitzt am Telefon und ist ausdruecklich nicht
   technikaffin - wer dreimal danebentippt, haelt die App fuer kaputt.
   Nachgemessen im Browser, nicht geschaetzt. */
.aendern > summary {
    display: inline-block;
    color: var(--blau);
    font-size: 15px;
    padding: 11px 4px;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
}
.aendern > summary::-webkit-details-marker { display: none; }
.aendern > summary::before { content: "✎ "; }
.aendern[open] > summary { margin-bottom: 4px; }
.aendern[open] {
    border-left: 3px solid var(--rand);
    padding-left: 10px;
    margin-bottom: 16px;
}
.aendern label { margin: 8px 0 2px; font-size: 14px; }
.aendern textarea { min-height: 0; }


/* Zweitrangige Handlung: sichtbar, aber zieht den Blick nicht vom
   Hauptknopf weg. Siehe SPEC: jeder Bildschirm hat EINE offensichtliche
   Handlung. "spaeter" ist die Notausfahrt, nicht der Hauptweg. */
.knopf-leise {
    width: 100%;
    background: none;
    border: none;
    color: #6b6b6b;
    font-size: 1rem;
    padding: 0.9rem;
    margin-top: 0.4rem;
    text-decoration: underline;
    cursor: pointer;
}


/* --------------------------------------------------------------------------
   Geraetetest (/geraetetest). Gehoert zur Testphase und verschwindet mit ihr.
   Hier gilt die Regel "eine Handlung je Bildschirm" bewusst nicht: die Seite
   richtet sich nicht an einen Nutzer, sondern an Gabriel als Tester.
   -------------------------------------------------------------------------- */

/* Messzeile: links das, was gemessen wird, rechts das Ergebnis. Zwei Spalten,
   damit man mit einem Blick die Nein-Antworten findet. */
.messzeile {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--rand);
    font-size: 15px;
}
.messzeile span { color: var(--text-mild); }
.messzeile b { text-align: right; white-space: nowrap; }

.frage {
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: 14px;
    padding: 14px 16px 10px;
    margin-bottom: 12px;
}
.frage p { margin: 0 0 10px; font-size: 16px; }

/* Antwortknoepfe nebeneinander statt untereinander: sieben Fragen mit je
   vollbreiten Knoepfen waeren eine endlose Liste zum Scrollen. */
.wahl {
    display: inline-block;
    background: var(--bg);
    border: 1px solid var(--rand);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 6px 6px 0;
    font-size: 16px;
    font-family: inherit;
    color: var(--text);
    cursor: pointer;
}
.wahl:active { background: #e8e6df; }
.wahl.gewaehlt {
    background: var(--marke);
    border-color: var(--marke);
    color: #fff;
    font-weight: 600;
    opacity: 1;
}
/* Die nicht gewaehlten Antworten bleiben stehen, treten aber zurueck - so
   sieht man spaeter noch, was zur Auswahl stand. */
.wahl.verblasst { opacity: 0.35; }
.wahl:disabled { cursor: default; }

/* Das Formular der Notausfahrt (von_hand.html). Ein Feld je Zeile, die Frage
   darueber - auf einem Telefon ist alles nebeneinander unlesbar. Die Fragen
   stehen in Alltagssprache, siehe von_hand.py. */
.von-hand-feld { display: block; margin: 0 0 16px; }
.von-hand-feld > span { display: block; margin-bottom: 6px; font-size: 15px; }
.von-hand-feld em { font-style: normal; font-size: 14px; }
.von-hand-feld input { width: 100%; box-sizing: border-box; }

.fehler-hinweis p { margin: 0 0 8px; }
.fehler-hinweis p:last-child { margin-bottom: 0; }

/* Ein Pflichtfeld, das der Nutzer leer gelassen hat. Rot allein reicht
   nicht - wer rot-gruen-blind ist, sieht nur ein Feld wie jedes andere.
   Deshalb zusaetzlich der dickere Rand und das Wort in der Meldung oben. */
.von-hand-feld.fehlt > span { color: #a3271c; font-weight: 600; }
.von-hand-feld.fehlt input { border: 2px solid #a3271c; }

/* "Meine Daten" auf dem Kartenstapel: Loeschfrist und Loeschknopf.

   Zugeklappt und unauffaellig, weil die SPEC eine offensichtliche Handlung
   je Bildschirm verlangt - und die heisst hier BEWERBEN. Wer loeschen
   will, sucht danach; wer bewirbt, soll nicht darueber stolpern.

   Die 44 Pixel Mindesthoehe sind dieselbe gemessene Daumenregel wie bei
   .aendern weiter oben. Sie gilt auch fuer einen Knopf, den man selten
   braucht: gerade wer loeschen will, soll nicht dreimal danebentippen. */
.daten-fach { margin: 28px 0 8px; }
.daten-fach > summary {
    display: inline-block;
    color: var(--text-mild);
    font-size: 15px;
    padding: 11px 4px;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
}
.daten-fach > summary::-webkit-details-marker { display: none; }
.daten-fach > summary::before { content: "▸ "; }
.daten-fach[open] > summary::before { content: "▾ "; }
.daten-fach[open] {
    border-left: 3px solid var(--rand);
    padding-left: 10px;
}
.daten-fach p { margin: 4px 0 12px; }

/* Die beiden Adressen auf der Karte: wohin die Bewerbung jetzt geht und
   wohin sie später gehen wird. Bewusst nebeneinander und nicht in der
   Farbe des Testbands — wer ANSEHEN drückt, sucht genau diese Auskunft
   und soll sie nicht für eine Warnung halten. */
.adressen {
    border: 1px solid var(--rand);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 12px 0 18px;
    font-size: 15px;
    line-height: 1.5;
    /* Eine Mailadresse kann länger sein als das Telefon breit ist.
       Ohne das schiebt sie die Karte auf. */
    overflow-wrap: anywhere;
}
.adressen div + div { margin-top: 6px; }
.adressen em { font-style: normal; color: var(--text-mild); }

/* Die AGG-Frist in der Bewerbungsliste. Drei Zustände, und die Farbe ist
   nie das einzige Merkmal — wer rot-grün-blind ist, liest den Text.
   Deshalb sagt jeder Zustand in Worten, woran er ist. */
.frist {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.45;
    background: #f2f2ef;
    color: var(--text-mild);
}
.frist-knapp {
    background: #fdf6e3;
    color: #7a5a00;
    border-left: 3px solid #c8940a;
}
.frist-vorbei {
    background: #f7f7f7;
    color: #6b6b6b;
    text-decoration: none;
}

/* "Was hast du dort gemacht?" - Taetigkeiten zum Antippen (46. Lauf).
   Grosse Tippflaechen, weil das auf einem Telefon mit dem Daumen passiert. */
.taetigkeiten { border: 0; padding: 0; margin: 10px 0 14px; min-width: 0; }
.taetigkeiten legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 16px; }
.taetigkeiten legend .mild { font-weight: 400; }
.tipp {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 8px; padding: 12px 14px;
    background: var(--karte); border: 1px solid var(--rand); border-radius: 10px;
    font-weight: 400; font-size: 16px; line-height: 1.3; cursor: pointer;
}
.tipp input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--marke); }
.tipp:has(input:checked) { border-color: var(--marke); background: var(--marke-hell); }

/* Logo oben links (17.09.2026). Klein, damit jeder Bildschirm weiter
   EINE offensichtliche Handlung hat und das Logo nicht davon ablenkt. */
.marke { display: inline-block; margin: 0 0 8px; }
.marke img { display: block; width: 150px; height: auto; }

/* Installierknopf und iPhone-Hinweis (17.09.2026). Der Knopf ist gelb statt
   blau, damit er sich vom eigentlichen Weiter-Knopf der Seite abhebt. */
.installieren .knopf { background: var(--akzent); color: var(--marke-dunkel); margin: 0 0 16px; }
.installieren .knopf:active { background: #f2c200; }
.installieren-hinweis { background: var(--akzent-hell); border-radius: 12px; padding: 12px 14px; margin: 0 0 16px; font-size: 16px; }
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Dunkelmodus. Die meisten Farben stammen aus den Variablen oben und passen
   sich von selbst an, sobald --bg, --text, --karte usw. hier ueberschrieben
   werden. Nur Stellen, die eine feste Hex-Farbe statt einer Variable
   benutzen, brauchen eine eigene Zeile - jede davon ist unten nachgerechnet
   (Kontrast mindestens 4,5:1, siehe Bericht des Entwicklers).
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #15181d;
        --karte: #1e232b;
        --text: #f2f1ec;
        --text-mild: #b9b9b4;
        --marke-hell: #14243b;
        --akzent-hell: #3d3115;
        --rand: #3a3f47;
        --rot: #ff9a86;
        --blau: #7fb0ff;
    }

    /* Text auf hellem Gelb: in Hell ist var(--marke-dunkel) dunkelblau genug.
       Auf dem jetzt dunkelbraunen --akzent-hell waere dasselbe Dunkelblau
       fast unlesbar (Kontrast unter 2:1) - deshalb hier ein helles Gelb
       statt der Variable. Kontrast gemessen: 10,6:1 bzw. 8,5:1. */
    .karte .passt { color: #ffe9a8; }
    .karte.absage-karte .passt { background: #3a2420; color: #ffb4a8; }

    .beispielband { background: #3a2420; border-color: #6e372c; color: #f2d9d4; }
    .testband { background: #3a2f12; border-color: #7a5a1e; color: #f0e2bd; }
    .fehler-hinweis { background: #3a2420; border-color: #6e372c; color: #f2d9d4; }

    textarea, input[type=text] { background: #1e232b; color: var(--text); border-color: var(--rand); }
    .wahl { background: #22262d; border-color: var(--rand); color: var(--text); }
    .wahl:active { background: #2a2f37; }

    /* Der leise Knopf war auf Weiss schon knapp lesbar (4,8:1) - auf Dunkel
       faellt derselbe Grauton auf 3,3:1 und damit unter die Grenze. */
    .knopf-leise { color: var(--text-mild); }
    .knopf.sekundaer { color: #bcd6ff; }

    .von-hand-feld.fehlt > span { color: var(--rot); }
    .von-hand-feld.fehlt input { border-color: var(--rot); }

    .frist { background: #22262d; color: var(--text-mild); }
    .frist-knapp { background: #3a2f12; color: #f0d98a; border-left-color: #c8940a; }
    .frist-vorbei { background: #22262d; color: var(--text-mild); }
}

/* Links: eine Farbe fuer alle, und im Dunkelmodus eine helle.
   Gefunden am 18.09.2026 auf den Store-Bildern: "Daten loeschen" und der
   Hinweis zum Geraetetest standen dunkelblau auf fast schwarzem Grund -
   Kontrast unter 2:1, praktisch unlesbar. Die Browser-Standardfarbe
   (#0000ee) kennt keinen Dunkelmodus. */
a { color: var(--marke); }
a:visited { color: var(--marke-dunkel); }

@media (prefers-color-scheme: dark) {
    a, a:visited { color: var(--blau); }
}