/* Aussehen angelehnt an troax.com: Farben, Schriften (Nunito Sans / League Gothic), klare Kanten */

@font-face {
  font-family: "Nunito Sans"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("fonts/nunito-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "League Gothic"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/league-gothic-latin.woff2") format("woff2");
}

:root {
  /* Troax-Farben */
  --blau: #0083c3;          /* blue-1: Akzent, Knöpfe, Links */
  --blau-dunkel: #195685;   /* blue-2: Flächen, Fußzeile */
  --blau-hell: #9db9d5;     /* blue-3 */
  --stahl: #3a557c;         /* comp */
  --dunkelgrau: #5b5d62;
  --staub: #dad9d6;         /* dust: Linien */
  --hellgrau: #f5f5f5;      /* semi-gray: Hintergründe */
  --text: #1e1e1e;
  --gruen: #1d8776; --orange: #f5ac50; --rot: #ea515a;

  --ok: var(--gruen); --ok-hg: #e4f3f0;
  --fehler: #c2323b; --fehler-hg: #fdecec;
  --info: var(--blau-dunkel); --info-hg: #e8f1f8;
  --warn: #8a5a00; --warn-hg: #fdf2e0;

  --titel: "League Gothic", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: "Nunito Sans", system-ui, sans-serif; font-size: 16px; color: var(--text);
       background: #fff; line-height: 1.55; display: flex; flex-direction: column; min-height: 100vh; }
.innen { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
a { color: var(--blau); }
a:hover { color: var(--blau-dunkel); }
small { color: var(--dunkelgrau); }

h1, h2, h3 { font-family: var(--titel); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: 1.05; }
h1 { font-size: 2.8rem; margin: 0 0 .4em; }
h2 { font-size: 1.8rem; margin: 1.2em 0 .5em; color: var(--blau-dunkel); }
h1 .marke-status { font-family: "Nunito Sans", sans-serif; text-transform: none; letter-spacing: 0; }

/* --- Kopfzeile ---------------------------------------------------------- */
.kopf { background: #fff; border-bottom: 1px solid var(--staub); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; }
.kopf-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; min-height: 72px; }
.marke { font-family: var(--titel); font-size: 2rem; text-transform: uppercase; color: var(--text); text-decoration: none; letter-spacing: .02em; }
.marke:hover { color: var(--text); }
.marke-zusatz { color: var(--blau); }
.menue { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.menue a, .link-knopf { position: relative; color: var(--text); text-decoration: none; font-weight: 700; font-size: .85rem;
                        text-transform: uppercase; letter-spacing: .06em; padding: 24px 0; }
.menue a::after, .link-knopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 5px;
                                     background: var(--blau); opacity: 0; transform: skewX(-20deg); transition: opacity .2s; }
.menue a:hover::after, .link-knopf:hover::after, .menue a.aktiv::after { opacity: 1; }
.wer { color: var(--dunkelgrau); font-size: .85rem; }
.inline { display: inline; margin: 0; }
.link-knopf { background: none; border: 0; cursor: pointer; font-family: inherit; }

/* --- Inhalt -------------------------------------------------------------- */
main { flex: 1; padding-block: 40px 56px; }

.buehne { background: var(--blau-dunkel); color: #fff; margin-top: -40px; margin-bottom: 40px; padding-block: 56px; }
.buehne h1 { font-size: 3.6rem; margin-bottom: .2em; }
.buehne p { max-width: 640px; font-size: 1.1rem; }
.buehne .knopf-zweit { background: transparent; color: #fff; border-color: #fff; }
.buehne .knopf-zweit:hover { background: #fff; color: var(--blau-dunkel); }

.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.kachel { background: var(--hellgrau); padding: 20px 24px; border-top: 5px solid var(--blau); }
.kachel h3 { font-size: 1.5rem; margin: 0 0 .3em; }
.kachel p { margin: 0; color: var(--dunkelgrau); }

.hinweis { background: var(--hellgrau); border-left: 5px solid var(--blau); padding: 12px 16px; }
.meldung { padding: 12px 16px; border-left: 5px solid; }
.meldung ul { margin: 0; padding-left: 20px; }
.meldung-ok { background: var(--ok-hg); color: var(--ok); }
.meldung-fehler { background: var(--fehler-hg); color: var(--fehler); }
.meldung-info { background: var(--info-hg); color: var(--info); }

/* --- Knöpfe -------------------------------------------------------------- */
.knopf { display: inline-block; background: var(--blau); color: #fff; border: 2px solid var(--blau); border-radius: 0;
         padding: 10px 26px; font: inherit; font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em;
         cursor: pointer; text-decoration: none; transition: background .2s, border-color .2s; }
.knopf:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); color: #fff; }
.knopf-zweit { background: transparent; color: var(--blau); }
.knopf-zweit:hover { background: var(--blau); border-color: var(--blau); }
.knopf-zeile { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* --- Formulare ----------------------------------------------------------- */
.formular { max-width: 680px; }
.formular-schmal { max-width: 400px; }
.formular fieldset { border: 0; background: var(--hellgrau); margin: 0 0 20px; padding: 16px 20px 8px; }
.formular legend { float: left; width: 100%; font-family: var(--titel); font-size: 1.4rem; text-transform: uppercase;
                   color: var(--blau-dunkel); padding: 0; margin-bottom: 8px; }
.formular label { display: block; margin-bottom: 14px; font-weight: 600; font-size: .95rem; }
.formular label small { font-weight: 400; }
.formular input:not([type=checkbox]), .formular select, .formular textarea {
  display: block; width: 100%; margin-top: 4px; padding: 9px 11px; border: 1px solid var(--staub); border-radius: 0;
  background: #fff; font: inherit; font-weight: 400; }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: 2px solid var(--blau); outline-offset: -1px; border-color: var(--blau); }
.formular .zeile { display: flex; gap: 12px; flex-wrap: wrap; }
.formular .zeile label { flex: 1 1 200px; }
.formular .zeile label.schmal { flex: 0 1 120px; }
.formular .haken { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.formular .haken input { margin-top: 5px; accent-color: var(--blau); }
.falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* --- Daten und Tabellen -------------------------------------------------- */
.daten { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; }
.daten dt { color: var(--dunkelgrau); }
.daten dd { margin: 0; }
.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.spalten h2:first-child { margin-top: 0; }

.reiter { display: flex; flex-wrap: wrap; gap: 8px; }
.reiter a { padding: 6px 14px; border: 1px solid var(--staub); text-decoration: none; color: var(--text);
            font-size: .85rem; font-weight: 600; }
.reiter a:hover { border-color: var(--blau); }
.reiter a.aktiv { background: var(--blau-dunkel); color: #fff; border-color: var(--blau-dunkel); }
.suche { display: flex; gap: 8px; margin: 16px 0 20px; max-width: 560px; }
.suche input { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--staub); font: inherit; }
.suche input:focus { outline: 2px solid var(--blau); outline-offset: -1px; }

.tabelle-rahmen { overflow-x: auto; }
.tabelle { border-collapse: collapse; width: 100%; font-size: .95rem; }
.tabelle th, .tabelle td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--staub); vertical-align: top; }
.tabelle th { background: var(--blau-dunkel); color: #fff; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.tabelle tbody tr:hover { background: var(--hellgrau); }

.marke-status { display: inline-block; font-size: .75rem; font-weight: 700; padding: 3px 10px; white-space: nowrap;
                vertical-align: middle; text-transform: uppercase; letter-spacing: .04em; }
.status-wartet { background: var(--warn-hg); color: var(--warn); }
.status-bestandskunde { background: var(--ok-hg); color: var(--ok); }
.status-neukunde_vorkasse { background: var(--info-hg); color: var(--info); }
.status-gesperrt { background: var(--fehler-hg); color: var(--fehler); }

.rechtstext { white-space: pre-line; max-width: 800px; }

/* --- Fußzeile ------------------------------------------------------------ */
.fuss { background: var(--blau-dunkel); color: #fff; padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px)); font-size: .9rem; }
.fuss-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.fuss a { color: #fff; text-decoration: none; }
.fuss a:hover { text-decoration: underline; color: #fff; }
.fuss-marke { font-family: var(--titel); font-size: 1.4rem; text-transform: uppercase; }

@media (max-width: 600px) {
  h1 { font-size: 2.2rem; }
  .buehne h1 { font-size: 2.6rem; }
  .menue a, .link-knopf { padding: 8px 0; }
  .kopf-zeile { padding-block: 10px; }
}

/* --- Katalog ------------------------------------------------------------- */
.logo { height: 40px; width: auto; margin-right: 12px; vertical-align: middle; }
.fuss-adresse { margin-top: 4px; opacity: .85; }

.filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 16px; align-items: end;
          background: var(--hellgrau); padding: 16px 20px; margin-bottom: 16px; }
.filter label { display: block; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--dunkelgrau); }
.filter input, .filter select { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; border: 1px solid var(--staub);
                                border-radius: 0; background: #fff; font: inherit; font-size: .95rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.filter input:focus, .filter select:focus { outline: 2px solid var(--blau); outline-offset: -1px; }
.filter-suche { grid-column: 1 / -1; }
.filter-knoepfe { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.filter-zurueck { font-size: .9rem; }
.treffer { color: var(--dunkelgrau); font-size: .9rem; }

.artikel-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.artikel-karte { display: flex; flex-direction: column; border: 1px solid var(--staub); color: var(--text); text-decoration: none;
                 background: #fff; transition: border-color .2s, box-shadow .2s; }
.artikel-karte:hover { border-color: var(--blau); box-shadow: 0 4px 14px rgba(25, 86, 133, .12); color: var(--text); }
.artikel-bild { aspect-ratio: 4 / 3; background: #fff; display: flex; align-items: center; justify-content: center; padding: 12px;
                border-bottom: 1px solid var(--hellgrau); }
.artikel-bild img { max-width: 100%; max-height: 100%; object-fit: contain; }
.artikel-text { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; }
.artikel-nr { font-size: .8rem; font-weight: 700; color: var(--blau); letter-spacing: .04em; }
.artikel-titel { font-weight: 700; line-height: 1.3; }
.artikel-info { display: flex; flex-wrap: wrap; gap: 4px; }
.artikel-preis { margin-top: auto; font-weight: 800; font-size: 1.15rem; color: var(--blau-dunkel); }
.artikel-preis small { font-weight: 400; font-size: .8rem; }
.artikel-preis.gross { font-size: 1.8rem; margin: .2em 0 .6em; }
.artikel-ve { font-size: .85rem; color: var(--dunkelgrau); }
.etikett { font-size: .72rem; font-weight: 700; padding: 1px 7px; background: var(--blau-dunkel); color: #fff; letter-spacing: .04em; }
.etikett-hell { background: var(--hellgrau); color: var(--dunkelgrau); border: 1px solid var(--staub); }

.blaettern { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 32px; flex-wrap: wrap; }

.artikel-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
.artikel-detail-bild { border: 1px solid var(--staub); padding: 20px; text-align: center; }
.artikel-detail-bild img { max-height: 420px; object-fit: contain; }
.artikel-detail-bild small { display: block; margin-top: 8px; }
.artikel-detail h1 { font-size: 2.4rem; margin-top: .2em; text-transform: none; }
.artikel-zeilen { padding-left: 20px; }
.zurueck-link { font-size: .9rem; }
@media (max-width: 760px) { .artikel-detail { grid-template-columns: 1fr; gap: 20px; } }

/* --- Admin: Katalog ------------------------------------------------------ */
.upload { background: var(--hellgrau); padding: 4px 24px 20px; margin-bottom: 32px; }
.upload h2 { margin-top: .8em; }
.upload-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.upload-form input[type=file] { background: #fff; border: 1px solid var(--staub); padding: 8px; max-width: 100%; }
.knopf-klein { padding: 5px 12px; font-size: .75rem; }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin: 24px 0; }
.kennzahlen div { background: var(--hellgrau); border-top: 5px solid var(--blau); padding: 14px 18px; }
.kennzahlen strong { display: block; font-family: var(--titel); font-size: 2.4rem; font-weight: 400; line-height: 1; color: var(--blau-dunkel); }
.kennzahlen span { color: var(--dunkelgrau); font-size: .9rem; }
.warnungen { background: var(--warn-hg); color: var(--warn); padding: 12px 16px 12px 36px; border-left: 5px solid var(--orange); }

/* --- Warenkorb und Bestellung -------------------------------------------- */
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.artikel-link { display: flex; flex-direction: column; flex: 1; color: var(--text); text-decoration: none; }
.artikel-link:hover { color: var(--text); }
.in-warenkorb { display: flex; align-items: center; gap: 6px; padding: 0 14px 14px; flex-wrap: wrap; }
.in-warenkorb input[type=number] { width: 72px; padding: 6px 8px; border: 1px solid var(--staub); font: inherit; }
.in-warenkorb select { padding: 6px 4px; border: 1px solid var(--staub); font: inherit; background: #fff; }
.in-warenkorb .einheit { font-size: .85rem; color: var(--dunkelgrau); }
.in-warenkorb .knopf { margin-left: auto; }
.in-warenkorb-gross { padding: 16px 0; }
.in-warenkorb-gross .knopf { margin-left: 8px; padding: 10px 26px; font-size: .9rem; }
.in-warenkorb input:focus, .in-warenkorb select:focus { outline: 2px solid var(--blau); outline-offset: -1px; }

.menue-warenkorb .zaehler { display: inline-block; min-width: 20px; padding: 0 6px; background: var(--blau); color: #fff;
                            font-size: .75rem; line-height: 20px; text-align: center; border-radius: 10px; }

.rechts { text-align: right !important; }
.warenkorb td { vertical-align: middle; }
.wk-bild img { width: 64px; height: 48px; object-fit: contain; }
.wk-menge { white-space: nowrap; }
.wk-menge input { width: 80px; padding: 6px 8px; border: 1px solid var(--staub); font: inherit; }
.tabelle tfoot td { border-bottom: 0; font-size: 1.05rem; padding-top: 14px; }
.link-entfernen { background: none; border: 0; color: var(--fehler); cursor: pointer; font: inherit; font-size: .85rem; text-decoration: underline; padding: 0; }
.knopf-zeile-rechts { justify-content: flex-end; }

.kasse { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.kasse-uebersicht { background: var(--hellgrau); padding: 4px 20px 16px; position: sticky; top: 90px; }
.kasse-uebersicht h2 { margin-top: .6em; }
.tabelle-kompakt td { padding: 8px 6px; font-size: .9rem; }
.tabelle-kompakt tr:hover { background: none; }
.tabelle-kompakt .summe td { font-weight: 800; border-bottom: 0; padding-top: 12px; }
@media (max-width: 860px) { .kasse { grid-template-columns: 1fr; } .kasse-uebersicht { position: static; } }

.danke { font-size: 1.05rem; margin-bottom: 24px; }
.fehlertext { color: var(--fehler); }

/* --- Verfügbarkeit und Artikelverwaltung --------------------------------- */
.verfuegbarkeit { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; }
.verfuegbarkeit::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.verfuegbarkeit-ja { color: var(--gruen); }
.verfuegbarkeit-nein { color: #b86e00; }

.knopf-erklaerung { align-self: center; color: var(--dunkelgrau); font-size: .9rem; }
.sammel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .9rem; }
.tabelle-dicht th, .tabelle-dicht td { padding: 6px 8px; font-size: .88rem; vertical-align: middle; }
.artikel-verwaltung { max-height: 75vh; overflow: auto; border: 1px solid var(--staub); }
.artikel-verwaltung thead th { position: sticky; top: 0; z-index: 1; }
.artikel-verwaltung .mitte { text-align: center; }
.artikel-verwaltung input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--blau); cursor: pointer; }
.artikel-verwaltung select { padding: 4px 6px; border: 1px solid var(--staub); font: inherit; font-size: .85rem; font-weight: 700; background: #fff; }
.artikel-verwaltung select.verfuegbar-1 { color: var(--gruen); }
.artikel-verwaltung select.verfuegbar-0 { color: #b86e00; }
.artikel-verwaltung tr.ausgeblendet td:not(:first-child) { opacity: .45; }
.speicher-hinweis { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); margin: 0;
                    background: var(--gruen); color: #fff; padding: 10px 16px; font-weight: 700; opacity: 0;
                    transition: opacity .2s; pointer-events: none; }
.speicher-hinweis.sichtbar { opacity: 1; }
.speicher-hinweis.fehler { background: var(--fehler); }

/* --- Katalog von Hand überschreiben -------------------------------------- */
.meldung-warnung { background: var(--warn-hg); color: var(--warn); }
.ueberschreiben { flex-basis: 100%; background: var(--warn-hg); border-left: 5px solid var(--orange); padding: 14px 18px; }
.ueberschreiben .haken { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; color: var(--warn); font-weight: 600; }
.ueberschreiben .haken input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--orange); }
.knopf-warnung { background: #b86e00; border-color: #b86e00; }
.knopf-warnung:hover { background: #8a5200; border-color: #8a5200; }

/* --- Kurzmeldung (z. B. „In den Warenkorb gelegt“) ------------------------ */
.kurzmeldung { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: auto; z-index: 20;
               max-width: min(420px, calc(100vw - 40px)); margin: 0; background: var(--gruen); color: #fff;
               padding: 12px 18px; font-weight: 700; box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
               opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; pointer-events: none; }
.kurzmeldung.sichtbar { opacity: 1; transform: none; }
.kurzmeldung.fehler { background: var(--fehler); }
.artikel-karte { scroll-margin-top: 90px; }


/* --- Zwei-Faktor-Anmeldung ----------------------------------------------- */
.code-feld { font-size: 1.4rem !important; letter-spacing: .2em; text-align: center; font-variant-numeric: tabular-nums; }
.link-text { background: none; border: 0; padding: 0; color: var(--blau); text-decoration: underline; cursor: pointer; font: inherit; font-size: .9rem; }
.schritte { max-width: 680px; padding-left: 22px; }
.schritte > li { margin-bottom: 20px; }
.qr { margin: 12px 0 8px; }
.qr img { display: block; width: 250px; height: 250px; border: 1px solid var(--staub); background: #fff; }
.geheimnis { font-family: ui-monospace, monospace; font-size: 1.05rem; letter-spacing: .08em; background: var(--hellgrau);
             padding: 8px 12px; display: inline-block; margin-top: 4px; word-break: break-all; }
.notfallcodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; max-width: 640px;
                list-style: none; padding: 16px; background: var(--hellgrau); border-left: 5px solid var(--blau);
                font-family: ui-monospace, monospace; font-size: 1.15rem; }
.wahl-liste { display: grid; gap: 10px; margin-bottom: 16px; }
.formular .wahl { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 12px 16px; background: #fff;
                  border: 1px solid var(--staub); cursor: pointer; font-weight: 400; }
.formular .wahl:has(input:checked) { border-color: var(--blau); outline: 2px solid var(--blau); outline-offset: -2px; }
.formular .wahl input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--blau); }