/* 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; }

.knopf {
    display: block;
    width: 100%;
    padding: 18px;
    margin: 10px 0;
    border: none;
    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); }
.knopf.sekundaer {
    background: transparent;
    color: var(--text);
    border: 2px solid var(--rand);
}
.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: 22px;
    margin: 18px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.karte .firma { font-size: 22px; font-weight: 700; margin-bottom: 2px; }
.karte .ort { color: var(--text-mild); margin-bottom: 14px; }
.karte .passt { background: var(--akzent-hell); color: var(--marke-dunkel); padding: 10px 12px;
    border-radius: 10px; font-size: 15px; 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); }
/* 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; }

.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(--rand);
    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; }