/* ===================================================================
 * Startseite.
 *
 * Als Datei, nicht als <style>-Block — Inline-Stile sind verboten
 * (style-src 'self') und werden stillschweigend verworfen.
 * =================================================================== */

body { background: var(--bg); }

/* --- Kopf ----------------------------------------------------------- */

.start-hero {
    padding: 2.5rem 1rem 2rem;
    background:
        radial-gradient(circle at 12% 0%, var(--accent-soft), transparent 55%),
        var(--surface);
    border-bottom: 1px solid var(--line);
}

.start-hero-inner {
    max-width: 60rem;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.start-logo { flex: none; border-radius: 18px; }

.start-eyebrow {
    color: var(--accent);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 800;
}

.start-hero h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0.15rem 0 0.5rem; }
.start-claim { max-width: 42rem; color: var(--text-muted); }

/* --- Inhalt ---------------------------------------------------------- */

.start {
    max-width: 60rem;
    margin: 0 auto;
    padding: 1.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.start-block { display: flex; flex-direction: column; gap: 0.85rem; }

.start-h2 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.05rem;
}

.start-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--status, var(--text-muted));
}

.start-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 0.85rem;
}

.start-grid-3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

/* --- Kachel je Feuerwehr --------------------------------------------- */

.brigade {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.1rem;
}

/* Ein laufender Einsatz ist die wichtigste Information der Seite. Er
   bekommt eine Kante in der Alarmfarbe — nicht nur ein Wort. */
.brigade-live { border-left: 5px solid var(--status-alarm); }

.brigade-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.brigade-head h3 { font-size: 1.15rem; }
.brigade-keyword { font-size: 1.05rem; font-weight: 700; }
.brigade-numbers { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.brigade-demo {
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    border: 1px dashed var(--line-strong);
    font-size: 0.85rem;
}

.brigade-demo code {
    padding: 0.05rem 0.35rem;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 700;
}

.brigade-links { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: auto; }
.brigade-links .button { text-decoration: none; min-height: 2.7rem; padding: 0 0.9rem; font-size: 0.9rem; }

/* --- Erklärkacheln ---------------------------------------------------- */

.start-step { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.1rem; }
.start-step .icon { color: var(--accent); }
.start-step h3 { font-size: 1rem; }
.start-step p { font-size: 0.88rem; }

/* --- Fuß -------------------------------------------------------------- */

.start-foot {
    max-width: 60rem;
    margin: 0 auto;
    padding: 1rem 1rem calc(2rem + var(--safe-bottom));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--line);
    font-size: 0.85rem;
}

.start-foot .button { text-decoration: none; min-height: 2.5rem; padding: 0 0.8rem; }

/* Die Verweise in der Fusszeile waren 18 Bildpunkte hoch.
 *
 * Am Rechner mit der Maus faellt das nicht auf, am Handy schon: Ein Ziel
 * unter etwa 24 Bildpunkten trifft ein Finger nur mit Zielen, und die
 * Anleitung wird gerade dort gelesen, wo man eine Hand frei hat und die
 * andere nicht. Das Polster vergroessert die Trefferflaeche, ohne die
 * Zeile optisch aufzublasen. */
.start-foot a:not(.button) {
    display: inline-block;
    padding: 0.35rem 0;
    min-height: 1.5rem;
}

/* --- Anmeldeseiten ---------------------------------------------------- */

.login {
    max-width: 26rem;
    margin: 0 auto;
    padding: 3rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-card { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.9rem; }
.login-card h1 { font-size: 1.35rem; }
.login-card .button { width: 100%; }
.login-back { text-align: center; }
.login-back a { color: var(--text-muted); }

/* --- Einstieg per Code ------------------------------------------------
 *
 * Vier Ziffern, groß genug für nasse Finger und einen Blick aus zwei
 * Metern. Steht ganz oben, weil der Code der kürzeste Weg hinein ist.
 * ------------------------------------------------------------------- */

.start-code { display: flex; flex-direction: column; gap: 0.5rem; }
.start-code label { font-weight: 700; }

.start-code-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: stretch; }

/* Das Feld ist so breit wie vier Ziffern und nicht breiter.
 *
 * `.input` steht auf `width: 100%` — als Flex-Kind hat das die
 * Grundbreite überstimmt, und das Feld zog sich über die halbe Seite.
 * Ein handbreites Eingabefeld für vier Zeichen sieht nicht nach
 * „vier Ziffern" aus, sondern nach „hier kommt ein Satz hinein". */
.start-code-input {
    flex: 0 0 auto;
    width: 8.5rem;
    min-height: 3rem;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-align: center;
    font-variant-numeric: tabular-nums;

    /* Die Sperrung hängt AUCH hinter der letzten Ziffer. Ohne Ausgleich
     * sitzt der Text um ein halbes Zeichen zu weit links, und man sieht
     * es, ohne sagen zu können, woran es liegt. */
    text-indent: 0.35em;
}

/* Der Platzhalter muss wie ein Platzhalter aussehen.
 *
 * Fett, dunkel und gesperrt sah „1234" aus wie ein bereits
 * eingetragener Code — man tippt nicht, weil man meint, es stehe schon
 * etwas drin. */
.start-code-input::placeholder {
    font-weight: 400;
    letter-spacing: 0.35em;
    color: var(--text-muted);
    opacity: 0.55;
}

.start-code-row .button { flex: 0 0 auto; min-height: 3rem; }

.brigade-code { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--text-muted); }
.brigade-code strong { font-size: 1.15rem; letter-spacing: 0.2em; color: var(--text); font-variant-numeric: tabular-nums; }
.start-more { margin: 1.25rem 0 0; }

/* --- Die Wehrenliste --------------------------------------------------
 *
 * Eine Zeile je Feuerwehr. Es werden viele, und eine Kachel mit drei
 * Zahlen und drei Knöpfen ist bei dreißig Wehren eine Tapete.
 *
 * Die ganze Zeile ist der Weg in den Einsatz; rechts daneben sitzt als
 * einziger eigener Knopf die Verwaltung. Zwei Türen, mehr nicht.
 * ------------------------------------------------------------------- */

.start-oben {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 0.9rem;
    margin: 0 0 1.75rem;
    align-items: stretch;
}

.start-kachel {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-decoration: none;
    color: inherit;
}

.start-kachel strong { font-size: 1.05rem; }
.start-kachel .icon-lg { color: var(--accent); }

a.start-kachel:hover,
a.start-kachel:focus-visible { border-color: var(--accent); }

/* Die PINs des Testzugangs. Sie stehen offen da — bei einer echten Wehr
 * käme dieser Block nie vor. */
.start-pins {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.15rem 0.6rem;
    margin: 0.5rem 0 0.25rem;
    font-size: 0.9rem;
    align-content: start;
    justify-content: start;
}

.start-pins dt { color: var(--text-muted); }

.start-pins dd {
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
}

.start-demo-links { display: flex; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; flex-wrap: wrap; }
.start-demo-links .button { min-height: 2.5rem; padding: 0 0.9rem; text-decoration: none; }

.wehr-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }

.wehr {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    overflow: hidden;
}

/* Wo etwas läuft, steht ein roter Balken an der Kante. Er ersetzt die
 * frühere Kachelfarbe: dieselbe Aussage, ein Zwanzigstel der Fläche. */
.wehr-live { border-left: 4px solid var(--status-alarm, #b42318); }

.wehr-haupt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    text-decoration: none;
    color: inherit;
}

.wehr-haupt:hover,
.wehr-haupt:focus-visible { background: var(--surface-2); }

.wehr-punkt { flex: 0 0 auto; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--text-muted); }
.wehr-punkt[data-status="alarm"] { background: var(--status-alarm, #b42318); }

.wehr-text { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.wehr-name { font-size: 1.02rem; }

/* Eine Zeile, und wenn sie nicht passt, mit Auslassungspunkten. Ein
 * umbrechendes Stichwort macht aus dem Einzeiler wieder eine Kachel. */
.wehr-lage {
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wehr-haupt .pill { flex: 0 0 auto; margin-left: auto; }

.wehr-admin {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    text-decoration: none;
}

/* Unter 34 rem verschwindet das „im Einsatz"-Schild — der rote Balken
 * und das Stichwort sagen dasselbe, und die Breite ist knapp. */
@media (max-width: 34rem) {
    .wehr-haupt .pill { display: none; }
    .wehr-name { font-size: 0.98rem; }
}

.start-anlegen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.start-anlegen h3 { margin: 0 0 0.25rem; }
.start-anlegen p { margin: 0; max-width: 44rem; }
.start-anlegen .button { text-decoration: none; min-height: 2.75rem; padding: 0 1.1rem; }