/*
 * KassenWERFT - Gestaltung
 *
 * Leitgedanke: Das hier ist eine Kasse auf einem fremden Handy, oft in
 * schlechtem Licht und mit einer Hand bedient. Daraus folgt alles Weitere -
 * grosse Flaechen, hoher Kontrast, Betraege in tabellarischen Ziffern, und
 * die wichtigste Schaltflaeche immer in Daumenreichweite am unteren Rand.
 *
 * Keine Abhaengigkeiten: kein Framework, keine Web-Fonts. Eine Kasse darf
 * nicht davon abhaengen, dass ein fremder Server erreichbar ist.
 */

/* ---------------------------------------------------------------- Tokens */

:root {
    /* Petrol als Markenfarbe - maritim, ruhig, und dunkel genug fuer weisse
       Schrift ohne Kontrastprobleme. */
    --marke: #0f5c63;
    --marke-hell: #147c85;
    --marke-blass: #e6f2f3;

    --grund: #f7f6f3;
    --flaeche: #ffffff;
    --rand: #e2ded7;
    --rand-stark: #c9c3b8;

    --text: #1c1a17;
    --text-leise: #6b655c;

    --gut: #17683a;
    --gut-blass: #e6f3ea;
    --warten: #8a5a00;
    --warten-blass: #fdf3e0;
    --schlecht: #a4232b;
    --schlecht-blass: #fbeaea;

    --radius: 14px;
    --radius-klein: 9px;
    --schatten: 0 1px 2px rgba(28, 26, 23, .06), 0 4px 14px rgba(28, 26, 23, .05);
    --tastfeld: 48px;

    --schrift: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------ Grundlagen */

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font-family: var(--schrift);
    font-size: 16px;
    line-height: 1.5;
    /* Verhindert das Zoomen beim Doppeltippen auf Schaltflaechen. */
    touch-action: manipulation;
}

h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }
p { margin: 0; }

a { color: var(--marke); }

/* Betraege immer mit gleich breiten Ziffern - sonst tanzen die Spalten. */
.betrag, .num, td.num, .summe-wert {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ---------------------------------------------------------------- Gerüst */

.seite {
    max-width: 46rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.kopf {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--marke);
    color: #fff;
}

.kopf__innen {
    max-width: 46rem;
    margin: 0 auto;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 56px;
}

.kopf__marke {
    font-weight: 700;
    letter-spacing: .01em;
    color: #fff;
    text-decoration: none;
    font-size: 1.0625rem;
}

.kopf__marke span { font-weight: 400; opacity: .75; }

.kopf__rest { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.kopf__link {
    color: #fff;
    text-decoration: none;
    font-size: .875rem;
    padding: .4rem .6rem;
    border-radius: var(--radius-klein);
    opacity: .85;
}
.kopf__link:hover, .kopf__link[aria-current="page"] { background: rgba(255, 255, 255, .14); opacity: 1; }

.inhalt { padding: 1.25rem 0 6rem; }

/* Abstand fuer die feste Leiste am unteren Rand. */
.inhalt--mit-leiste { padding-bottom: 7.5rem; }

/* ------------------------------------------------------------- Meldungen */

.meldung {
    display: flex;
    gap: .6rem;
    padding: .8rem .9rem;
    border-radius: var(--radius-klein);
    margin-bottom: 1rem;
    font-size: .9375rem;
    border: 1px solid transparent;
}
.meldung--error { background: var(--schlecht-blass); border-color: #f0c9c9; color: var(--schlecht); }
.meldung--success { background: var(--gut-blass); border-color: #c4e2ce; color: var(--gut); }

/* --------------------------------------------------------------- Artikel */

.artikelgitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.artikel {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.artikel__text { padding: .85rem .85rem .6rem; flex: 1; }
.artikel__name { font-weight: 620; }
.artikel__beschreibung {
    color: var(--text-leise);
    font-size: .8125rem;
    margin-top: .15rem;
}
.artikel__preis {
    font-size: 1.25rem;
    font-weight: 680;
    margin-top: .5rem;
    font-variant-numeric: tabular-nums;
}

.artikel form { margin: 0; }

.artikel__knopf {
    width: 100%;
    min-height: var(--tastfeld);
    border: 0;
    border-top: 1px solid var(--rand);
    background: var(--marke-blass);
    color: var(--marke);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}
.artikel__knopf:active { background: #d3e7e9; }

/* ------------------------------------------------------------ Warenkorb */

.korb { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.korbzeile {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: .8rem .9rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .3rem .8rem;
    align-items: center;
}

.korbzeile__name { font-weight: 620; }
.korbzeile__einzel { color: var(--text-leise); font-size: .8125rem; }
.korbzeile__summe { font-weight: 650; font-variant-numeric: tabular-nums; }

.mengensteuerung {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .35rem;
}

.mengensteuerung form { margin: 0; }

.mengenknopf {
    width: var(--tastfeld);
    height: var(--tastfeld);
    border: 1px solid var(--rand-stark);
    background: var(--flaeche);
    border-radius: var(--radius-klein);
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text);
}
.mengenknopf:active { background: var(--grund); }

.mengenanzeige {
    min-width: 2.5rem;
    text-align: center;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.entfernen {
    margin-left: auto;
    background: none;
    border: 0;
    color: var(--text-leise);
    font: inherit;
    font-size: .875rem;
    text-decoration: underline;
    cursor: pointer;
    padding: .5rem;
    min-height: var(--tastfeld);
}
.entfernen:hover { color: var(--schlecht); }

/* -------------------------------------------------------- Untere Leiste */

.leiste {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: var(--flaeche);
    border-top: 1px solid var(--rand);
    /* Sicherer Abstand zur Wischleiste auf iPhones. */
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 18px rgba(28, 26, 23, .07);
}

.leiste__innen {
    max-width: 46rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: .9rem;
}

.leiste__summe { line-height: 1.2; }
.leiste__label { font-size: .75rem; color: var(--text-leise); text-transform: uppercase; letter-spacing: .05em; }
.summe-wert { font-size: 1.375rem; font-weight: 700; }

/* ---------------------------------------------------------- Schaltflächen */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--tastfeld);
    padding: .7rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--radius-klein);
    background: var(--marke);
    color: #fff;
    font: inherit;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}
.knopf:hover { background: var(--marke-hell); }
.knopf:disabled { opacity: .5; cursor: not-allowed; }

.knopf--gross { width: 100%; font-size: 1.0625rem; min-height: 54px; }
.knopf--weiter { margin-left: auto; flex: 1; }

.knopf--leise {
    background: var(--flaeche);
    color: var(--text);
    border-color: var(--rand-stark);
}
.knopf--leise:hover { background: var(--grund); }

.knopf--gefahr { background: var(--schlecht); }
.knopf--gefahr:hover { background: #8d1d24; }

/* -------------------------------------------------------------- Zustände */

.status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 650;
    border: 1px solid transparent;
    white-space: nowrap;
}
.status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }

.status--paid { background: var(--gut-blass); color: var(--gut); border-color: #c4e2ce; }
.status--open, .status--pending, .status--authorized { background: var(--warten-blass); color: var(--warten); border-color: #f0dcb4; }
.status--failed, .status--canceled, .status--expired { background: var(--schlecht-blass); color: var(--schlecht); border-color: #f0c9c9; }

/* --------------------------------------------------------- Ergebnisseite */

.ergebnis {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 1.75rem 1.25rem;
    text-align: center;
}

.ergebnis__zeichen {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 1rem;
    font-size: 2rem;
    line-height: 1;
}
.ergebnis__zeichen--gut { background: var(--gut-blass); color: var(--gut); }
.ergebnis__zeichen--warten { background: var(--warten-blass); color: var(--warten); }
.ergebnis__zeichen--schlecht { background: var(--schlecht-blass); color: var(--schlecht); }

.ergebnis__betrag {
    font-size: 2.25rem;
    font-weight: 720;
    font-variant-numeric: tabular-nums;
    margin: .35rem 0 .15rem;
    letter-spacing: -.02em;
}

.ergebnis__hinweis { color: var(--text-leise); font-size: .9375rem; margin-top: .5rem; }

.referenz {
    display: inline-block;
    margin-top: 1rem;
    padding: .3rem .65rem;
    background: var(--grund);
    border: 1px solid var(--rand);
    border-radius: var(--radius-klein);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .875rem;
}

/* ------------------------------------------------------------ Positionen */

.positionen { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.positionen th {
    text-align: left;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-leise);
    font-weight: 650;
    padding: .4rem .5rem;
    border-bottom: 1px solid var(--rand);
}
.positionen td { padding: .55rem .5rem; border-bottom: 1px solid var(--rand); }
.positionen tfoot td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--rand-stark); }
.positionen .num { text-align: right; }

/* ----------------------------------------------------------------- Karten */

.karte {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 1.1rem;
}

.karte + .karte, .karte + .abschnitt, .abschnitt + .abschnitt { margin-top: 1.25rem; }

.abschnitt__kopf {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    margin-bottom: .7rem;
}
.abschnitt__kopf h2 { margin: 0; }
.abschnitt__kopf .knopf { margin-left: auto; }

.kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .75rem;
}

.kennzahl {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: .9rem 1rem;
}
.kennzahl__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-leise); }
.kennzahl__wert { font-size: 1.625rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: .15rem; }

/* ------------------------------------------------------------- Formulare */

.feld { margin-bottom: 1rem; }
.feld label { display: block; font-weight: 620; margin-bottom: .3rem; font-size: .9375rem; }
.feld__hinweis { color: var(--text-leise); font-size: .8125rem; margin-top: .25rem; }

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="password"],
.feld input[type="number"],
.feld textarea {
    width: 100%;
    min-height: var(--tastfeld);
    padding: .6rem .75rem;
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius-klein);
    background: var(--flaeche);
    color: var(--text);
    /* Unter 16px zoomt iOS beim Fokussieren hinein. */
    font: inherit;
    font-size: 16px;
}

.feld input:focus, .feld textarea:focus, .knopf:focus-visible, a:focus-visible, button:focus-visible {
    outline: 2px solid var(--marke);
    outline-offset: 2px;
}

/* --------------------------------------------------------------- Listen */

.liste { list-style: none; margin: 0; padding: 0; }

.listeneintrag {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .25rem;
    border-bottom: 1px solid var(--rand);
    text-decoration: none;
    color: inherit;
}
.listeneintrag:last-child { border-bottom: 0; }
.listeneintrag:hover { background: var(--grund); }
.listeneintrag__haupt { min-width: 0; flex: 1; }
.listeneintrag__titel { font-weight: 620; }
.listeneintrag__unter { color: var(--text-leise); font-size: .8125rem; }
.listeneintrag__rechts { text-align: right; display: grid; gap: .25rem; justify-items: end; }

.leer {
    text-align: center;
    color: var(--text-leise);
    padding: 2.5rem 1rem;
}
.leer__zeichen { font-size: 2rem; display: block; margin-bottom: .5rem; opacity: .5; }

/* -------------------------------------------------------------- Filter */

.filterreihe { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filter {
    padding: .4rem .75rem;
    border: 1px solid var(--rand-stark);
    border-radius: 999px;
    background: var(--flaeche);
    color: var(--text);
    text-decoration: none;
    font-size: .875rem;
}
.filter[aria-current="true"] { background: var(--marke); border-color: var(--marke); color: #fff; }

/* --------------------------------------------------------------- Sonstiges */

.zurueck {
    display: inline-block;
    color: var(--text-leise);
    text-decoration: none;
    font-size: .9375rem;
    margin-bottom: .75rem;
}
.zurueck:hover { color: var(--text); }

.tabellenrahmen { overflow-x: auto; }

.rohdaten {
    background: var(--grund);
    border: 1px solid var(--rand);
    border-radius: var(--radius-klein);
    padding: .8rem;
    font-size: .8125rem;
    overflow-x: auto;
    margin: 0;
}

@media (min-width: 40rem) {
    h1 { font-size: 1.75rem; }
    .korbzeile { grid-template-columns: 1fr auto auto; }
    .mengensteuerung { grid-column: auto; margin-top: 0; }
}