/* Meissner App – Corporate Design: Dunkelblau #1B3A5C, Orange #F39200. Schriften liegen lokal in schriften/. */

@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('../schriften/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url('../schriften/barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('../schriften/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 600; font-display: swap; src: url('../schriften/barlow-semi-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 700; font-display: swap; src: url('../schriften/barlow-semi-condensed-700.woff2') format('woff2'); }

:root {
    --blau: #1B3A5C;
    --blau-hell: #274A70;
    --blau-linie: #6F8BA8;
    --orange: #F39200;
    --grund: #F3F5F8;
    --flaeche: #FFFFFF;
    --flaeche-blau: #E8EEF5;
    --linie: #CFD8E3;
    --text: #14263A;
    --text-leise: #4A5F75;
    --text-auf-blau: #C9D6E4;
    --fehler: #A12A2A;
    --fehler-grund: #FBE9E9;
    --schrift: Barlow, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --schrift-titel: 'Barlow Semi Condensed', Barlow, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--grund);
    color: var(--text);
    font-family: var(--schrift);
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3, p { margin: 0; }
button, input { font-family: inherit; }
button { cursor: pointer; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.app {
    max-width: 480px;
    min-height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: var(--grund);
}

/* Kopfbereich */
.kopf {
    background: var(--blau);
    color: #fff;
    padding: calc(20px + env(safe-area-inset-top)) 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.kopf--schmal { padding-bottom: 20px; gap: 6px; }

.kopf-zeile { display: flex; justify-content: space-between; align-items: center; }

.marke {
    font-family: var(--schrift-titel);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.marke span { color: var(--orange); }

.kopf-titel {
    font-family: var(--schrift-titel);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
}
.kopf-untertitel { font-size: 16px; color: var(--text-auf-blau); }

.konto-knopf {
    width: 44px;
    height: 44px;
    margin: -6px -6px -6px 0;
    border-radius: 4px;
    border: 1px solid var(--blau-linie);
    background: var(--blau-hell);
    color: #fff;
    font-family: var(--schrift-titel);
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zurueck {
    min-height: 44px;
    margin-left: -8px;
    padding: 0 10px 0 4px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
}

/* Inhalt */
.inhalt { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 14px; }

.abschnitt {
    font-family: var(--schrift-titel);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-leise);
}

/* Kacheln des Hauptbildschirms */
.kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.kachel {
    min-height: 178px;
    padding: 16px;
    background: var(--flaeche);
    border: 2px solid var(--linie);
    border-radius: 4px;
    color: var(--text);
    text-align: left;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}
.kachel--primaer { background: var(--blau); border-color: var(--blau); color: #fff; }

.kachel-symbol {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    background: var(--flaeche-blau);
    display: flex;
    align-items: center;
    justify-content: center;
}
.kachel-symbol svg { stroke: var(--blau); }
.kachel--primaer .kachel-symbol { background: var(--orange); }
.kachel--primaer .kachel-symbol svg { stroke: var(--text); }

.kachel-titel {
    display: block;
    font-family: var(--schrift-titel);
    font-size: clamp(19px, 5.6vw, 23px);
    font-weight: 700;
    line-height: 1.1;
}
.kachel-text { display: block; margin-top: 3px; font-size: 14px; color: var(--text-leise); }
.kachel--primaer .kachel-text { color: var(--text-auf-blau); }

/* Formulare */
.karte {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 4px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feld { display: flex; flex-direction: column; gap: 6px; }
.feld label { font-size: 14px; font-weight: 600; color: var(--text-leise); }
.feld input {
    height: 52px;
    padding: 0 14px;
    border: 2px solid var(--linie);
    border-radius: 4px;
    background: #fff;
    color: var(--text);
    font-size: 18px;
}
.feld input:focus { border-color: var(--blau); outline: none; }
.feld-zeile { display: flex; gap: 8px; }
.feld-zeile input { flex: 1; min-width: 0; }

.knopf {
    min-height: 56px;
    padding: 0 18px;
    border-radius: 4px;
    border: 2px solid var(--blau);
    background: #fff;
    color: var(--blau);
    font-family: var(--schrift-titel);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.knopf--primaer { background: var(--orange); border-color: var(--orange); color: var(--text); }
.knopf--klein { min-height: 52px; font-size: 16px; font-weight: 600; letter-spacing: 0; }
.knopf[disabled] { opacity: .6; cursor: default; }

.hinweis {
    padding: 12px 14px;
    border-radius: 4px;
    background: #FFF6E6;
    border: 1px solid #F0C98A;
    font-size: 15px;
    line-height: 1.4;
}

.fehler {
    padding: 12px 14px;
    border-radius: 4px;
    background: var(--fehler-grund);
    border: 1px solid #E3B3B3;
    color: var(--fehler);
    font-size: 15px;
    font-weight: 500;
}

.daten { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 16px; }
.daten dt { color: var(--text-leise); }
.daten dd { margin: 0; font-weight: 500; word-break: break-word; }

.laedt { padding: 40px 20px; text-align: center; color: var(--text-leise); }

#blazor-error-ui {
    background: #FFF6E6;
    border-top: 2px solid var(--orange);
    bottom: 0;
    display: none;
    left: 0;
    padding: 12px 20px;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 12px; top: 10px; }

/* FocusOnNavigate setzt den Fokus auf die Überschrift; sie soll dabei keinen Rahmen bekommen. */
h1:focus { outline: none; }

/* ---- Bedarfsmeldung ---------------------------------------------------------------------------- */

.kopf-vorzeile {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-auf-blau);
}

.erfolg {
    padding: 12px 14px;
    border-radius: 4px;
    background: #E7F4EA;
    border: 1px solid #A9D5B2;
    color: #1E5A2E;
    font-size: 15px;
    font-weight: 500;
}

.leer { padding: 24px 4px; color: var(--text-leise); font-size: 17px; line-height: 1.45; }
.fussnote { margin-top: 6px; padding: 0 4px; font-size: 13px; line-height: 1.45; color: var(--text-leise); }

/* Zeilen der Listen */
.zeile {
    padding: 14px 16px;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.zeile-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zeile-titel { font-size: 17px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.zeile-meta { font-size: 14px; color: var(--text-leise); overflow-wrap: anywhere; }
.zeile-menge { flex-shrink: 0; font-family: var(--schrift-titel); font-size: 22px; font-weight: 700; color: var(--blau); }

.marke-klein {
    align-self: flex-start;
    margin-top: 3px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #FDE9C7;
    color: #7A4A00;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.marke-klein--leise { background: var(--flaeche-blau); color: var(--text-leise); }

.knopf--gefahr { border-color: var(--fehler); color: var(--fehler); }

/* Untere Leiste */
.navi {
    position: sticky;
    bottom: 0;
    z-index: 5;
    min-height: 76px;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--flaeche);
    border-top: 1px solid var(--linie);
    display: flex;
    align-items: stretch;
}
.navi-eintrag {
    flex: 1;
    min-width: 0;
    padding: 0 2px;
    border-top: 4px solid transparent;
    color: var(--text-leise);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.navi-eintrag svg { stroke: currentColor; }
.navi-eintrag[aria-current="page"] { color: var(--blau); border-top-color: var(--blau); font-weight: 700; }
.navi-neu {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    margin: -22px 6px 0;
    border: 4px solid var(--grund);
    border-radius: 30px;
    background: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Formular Anfordern */
.feld-name { font-size: 14px; font-weight: 600; color: var(--text-leise); }
.feld-hinweis { font-size: 14px; color: var(--text-leise); line-height: 1.4; }

.textknopf {
    align-self: flex-start;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--blau);
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
}
.textknopf[disabled] { opacity: .5; }

.gewaehlt {
    padding: 10px 12px;
    border: 2px solid var(--blau);
    border-radius: 4px;
    background: var(--flaeche-blau);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.gewaehlt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gewaehlt-text strong { font-size: 17px; overflow-wrap: anywhere; }
.gewaehlt-text small { font-size: 14px; color: var(--text-leise); overflow-wrap: anywhere; }

.vorschlaege {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--linie);
    border-radius: 4px;
    background: #fff;
}
.vorschlaege li + li { border-top: 1px solid #E3E9F0; }
.vorschlag {
    width: 100%;
    min-height: 52px;
    padding: 8px 14px;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.vorschlag strong { font-size: 16px; font-weight: 600; }
.vorschlag small { font-size: 13px; color: var(--text-leise); }
.vorschlag--frei { background: #FFF6E6; font-size: 15px; font-weight: 600; justify-content: center; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
    min-height: 44px;
    padding: 0 18px;
    border: 2px solid var(--linie);
    border-radius: 22px;
    background: #fff;
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
}
.chip--an { border-color: var(--blau); background: var(--blau); color: #fff; }

.stepper { display: grid; grid-template-columns: 64px 1fr 64px; height: 52px; }
.stepper button {
    border: 2px solid var(--blau);
    background: #fff;
    color: var(--blau);
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
}
.stepper button:first-child { border-radius: 4px 0 0 4px; }
.stepper button:last-child { border-radius: 0 4px 4px 0; }
.stepper input {
    height: 52px;
    min-width: 0;
    border: 0;
    border-top: 2px solid var(--blau);
    border-bottom: 2px solid var(--blau);
    border-radius: 0;
    text-align: center;
    font-family: var(--schrift-titel);
    font-size: 26px;
    font-weight: 700;
    -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Kommissionierung */
.tabs { display: flex; gap: 8px; padding: 10px 20px; background: var(--blau); overflow-x: auto; }
.tab {
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--blau-linie);
    border-radius: 22px;
    background: transparent;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}
.tab[aria-selected="true"] { background: #fff; border-color: #fff; color: var(--blau); font-weight: 700; }

.werkzeugzeile { display: flex; justify-content: space-between; align-items: center; margin-bottom: -4px; }

.gruppe-kopf { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.gruppe-kopf h2 { font-size: 17px; font-weight: 700; }
.gruppe-liste { background: #fff; border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; }

.auswahlzeile {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.auswahlzeile + .auswahlzeile { border-top: 1px solid #E3E9F0; }
.auswahlzeile--an { background: #FFF6E6; }
.auswahlzeile input[type="checkbox"] { flex-shrink: 0; width: 26px; height: 26px; margin: 0; accent-color: var(--blau); }
.auswahl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.aktionsleiste {
    position: sticky;
    bottom: calc(76px + env(safe-area-inset-bottom));
    z-index: 4;
    padding: 12px 20px 14px;
    background: #fff;
    border-top: 1px solid var(--linie);
    box-shadow: 0 -6px 16px rgba(18, 38, 58, .08);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.aktionsleiste-text { font-size: 14px; font-weight: 600; color: var(--text-leise); }
.aktionsleiste-knoepfe { display: flex; gap: 8px; }
.aktionsleiste-knoepfe .knopf { flex: 1; min-height: 52px; font-size: 17px; }
.aktionsleiste-knoepfe .knopf--primaer { flex: 1.3; }

.kachel-marke {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 3px;
    background: var(--orange);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Zähler auf dem Symbol der unteren Leiste */
.navi-symbol { position: relative; display: inline-flex; }
.navi-zahl {
    position: absolute;
    top: -7px;
    right: -14px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--orange);
    color: var(--text);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.vorschlag-hinweis { padding: 10px 14px; font-size: 13px; color: var(--text-leise); background: var(--grund); }

/* Hinweis auf eine neue App-Version (siehe js/start.js) */
#update-hinweis {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 2000;
    max-width: 456px;
    margin: 0 auto;
    padding: 12px 14px;
    border-radius: 4px;
    background: var(--blau);
    color: #fff;
    box-shadow: 0 6px 20px rgba(18, 38, 58, .3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
}
#update-hinweis button {
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 4px;
    background: var(--orange);
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
}