/* Webfire Online-Shop – Admin-Oberfläche (eigene Seite, nutzt app.css als Basis) */
:focus-visible{outline:2px solid var(--fire);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} }
html{overflow-y:scroll;scrollbar-gutter:stable}   /* Scrollbar immer da -> kein horizontaler Sprung beim Tab-Wechsel */
.shopbody{background:var(--bg);min-height:100vh}
.shoptop{display:flex;align-items:center;gap:12px;min-height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 18px 0;background:var(--side);color:#fff;position:sticky;top:0;z-index:30}
.shoptop .bd{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--fire),var(--fire-2));display:grid;place-items:center;font-weight:800;color:#fff;font-family:var(--head)}
.shoptop img.bd{object-fit:cover;background:none;padding:0}
.shoptop .ti{font-family:var(--head);font-weight:700;font-size:16px}
.shoptop .em{color:#aab3c2;font-size:12.5px;font-weight:600}
.shoptop .back{margin-left:auto;color:#cfd6e2;font-size:13px;font-weight:600;border:1px solid #2b3445;padding:8px 14px;border-radius:10px}
.shoptop .back:hover{background:#1a212c;color:#fff}

.shopwrap{display:grid;grid-template-columns:228px 1fr;align-items:start;max-width:1180px;margin:0 auto;padding:22px 20px 60px;gap:22px}
.shopnav{position:sticky;top:78px;display:flex;flex-direction:column;gap:4px}
.shopnav a{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:11px;font-weight:600;font-size:14px;color:var(--ink-2);cursor:pointer}
.shopnav a svg{width:19px;height:19px;flex:none;opacity:.85}
.shopnav a .snav-ic{width:21px;height:21px;flex:none;object-fit:contain}
.shopnav a:hover{background:#fff}
.shopnav a.on{background:#fff;color:var(--fire-2);box-shadow:var(--shadow-sm)}
.shopnav a.on svg{opacity:1}
.shopnav .badge{margin-left:auto;background:var(--fire);color:#fff;font-size:11px;font-weight:800;border-radius:999px;padding:1px 8px}

.shopmain{min-width:0}
.loadbox{display:flex;align-items:center;gap:12px;color:var(--muted);padding:40px}
.spin{width:18px;height:18px;border:2px solid #d3d9e3;border-top-color:var(--fire);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

.page-h{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.page-h h1{font-size:23px;margin:0}
.page-h .btn{margin-left:auto}

/* ---------- Einstellungen: Themen links, Inhalt rechts ----------
   Die Einstellungen waren eine einzige lange Seite. Bei einem Shop kommen zu
   viele Themen zusammen, um sie sinnvoll untereinander zu stapeln – deshalb
   dasselbe Muster, das Shopify und WooCommerce nutzen. Auf schmalen Schirmen
   klappt die Leiste über den Inhalt, damit nichts abgeschnitten wird. */
.setwrap{display:grid;grid-template-columns:216px 1fr;gap:22px;align-items:start}
.setnav{display:flex;flex-direction:column;gap:2px;position:sticky;top:16px}
.setnav a{display:block;padding:9px 12px;border-radius:10px;cursor:pointer;border:1px solid transparent}
.setnav a:hover{background:var(--surface-2)}
.setnav a.on{background:var(--surface-2);border-color:var(--line)}
.setnav .sn-l{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:650;color:var(--ink)}
.setnav .sn-d{display:block;font-size:11.5px;color:var(--muted);margin-top:1px;line-height:1.3}
.setnav a.on .sn-l{color:var(--fire,#e05900)}
.setbody{min-width:0}
.seth{font-size:17px;margin:0 0 14px}
/* Hinweistext unter einem Eingabefeld */
.hint{display:block;font-size:12px;color:var(--muted);margin-top:5px;line-height:1.4}
/* Warnzähler an einem Navigationspunkt */
.badge.warn{background:var(--red);color:#fff}
/* Zeichen-Symbole für Bereiche ohne eigene Bilddatei */
.snav-tx{display:inline-grid;place-items:center;font-weight:800;font-size:15px;line-height:1}
@media(max-width:860px){
  .setwrap{grid-template-columns:1fr;gap:14px}
  .setnav{position:static;flex-direction:row;flex-wrap:wrap;gap:6px}
  .setnav a{flex:1 1 auto;text-align:center;border:1px solid var(--line)}
  .setnav .sn-l{justify-content:center}
  .setnav .sn-d{display:none}   /* Untertitel kosten auf dem Handy nur Platz */
}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi-c{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:16px}
.kpi-c .k{color:var(--muted);font-size:12.5px;font-weight:600}
.kpi-c .v{font-family:var(--head);font-size:25px;font-weight:800;margin-top:5px;line-height:1.1}
.kpi-c .v small{font-size:13px;color:var(--muted);font-weight:600}

/* Chart */
.chartcard{margin-top:18px}
.bars{display:flex;align-items:flex-end;gap:8px;height:150px;padding:8px 4px 0}
.bars .bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;min-width:0}
.bars .bar .col{width:100%;max-width:34px;background:linear-gradient(180deg,var(--fire),var(--fire-2));border-radius:6px 6px 3px 3px;min-height:3px;transition:height .3s}
.bars .bar .lab{font-size:10.5px;color:var(--muted);white-space:nowrap}
.bars .bar .val{font-size:10px;color:var(--ink-2);font-weight:700;opacity:0;transition:.15s}
.bars .bar:hover .val{opacity:1}

/* Tabellen / Listen */
.tbl{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tbl th{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;padding:12px 14px;background:var(--surface-2);font-weight:700}
.tbl td{padding:12px 14px;border-top:1px solid var(--line);font-size:14px;vertical-align:middle}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:#fafbfd}
.thumb{width:42px;height:42px;border-radius:9px;object-fit:cover;background:var(--surface-2);border:1px solid var(--line);flex:none}
.thumb.ph{display:grid;place-items:center;color:var(--muted)}
.pname{display:flex;align-items:center;gap:11px}
.pname .nm{font-weight:600}
.pname .sub{font-size:12px;color:var(--muted)}
.strike{color:var(--muted);text-decoration:line-through;font-size:12.5px;margin-left:6px}

.empty{background:var(--card);border:1px dashed var(--line);border-radius:var(--r);padding:46px 20px;text-align:center;color:var(--muted)}
.empty .big{font-size:34px;margin-bottom:8px}

.top-list{list-style:none;margin:0;padding:0}
.top-list li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.top-list li:first-child{border-top:0}
.top-list .rk{width:22px;height:22px;border-radius:6px;background:var(--fire-soft);color:var(--fire-2);font-size:12px;font-weight:800;display:grid;place-items:center;flex:none}
.top-list .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-list .q{color:var(--muted);font-size:13px} .top-list .u{font-weight:700;min-width:84px;text-align:right}
/* Dashboard-Ausbau */
.kdelta{font-size:12px;font-weight:800;vertical-align:middle;margin-left:4px} .kdelta.up{color:var(--ok)} .kdelta.dn{color:var(--red)}
.sec-strong{margin-left:auto;font-family:var(--head);font-weight:800;font-size:16px}
.sec-sub{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:16px 0 8px}
.bars .col.z{background:var(--surface-2)}
.tbl.mini td{padding:9px 8px;font-size:13.5px} .tbl.mini .sub{font-size:11.5px;color:var(--muted);margin-top:1px;font-weight:400}
.strow{display:inline-flex;align-items:center;gap:8px;margin:0 14px 10px 0} .strow .c{font-weight:800;font-family:var(--head)}
.statusgrid{display:flex;flex-wrap:wrap;align-items:center}
.attn-i{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.attn-i:first-of-type{border-top:0}
.attn-i .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.attn-i.big{padding:4px 0 12px} .attn-i.big .t{font-weight:700;font-size:14px}
.attn-n{font-family:var(--head);font-weight:800;font-size:22px;line-height:1}

/* Banner */
.banner{display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:var(--r);margin-bottom:18px}
.banner.warn{background:#FFF6E0;border:1px solid #f1dca0;color:#7a5b00}
.banner.ok{background:#E6F7EF;border:1px solid #b9e8d2;color:#0f7a52}
.banner .t{font-weight:700}
.banner .btn{margin-left:auto}

/* Switch */
.sw{position:relative;display:inline-block;width:42px;height:24px;flex:none}
.sw input{display:none}
.sw .sl{position:absolute;inset:0;background:#cfd6e2;border-radius:999px;transition:.2s}
.sw .sl:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.sw input:checked+.sl{background:var(--fire)}
.sw input:checked+.sl:before{transform:translateX(18px)}

/* Forms */
.field{margin-bottom:15px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.field .hint{font-size:12px;color:var(--muted);margin-top:5px}
.inp,.field input[type=text],.field input[type=number],.field textarea,.field select{
  width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:14px;background:#fff;color:var(--ink)}
.field textarea{min-height:90px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.inline{display:flex;align-items:center;gap:10px}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px}
.seg button{border:0;background:transparent;padding:8px 14px;border-radius:8px;font-weight:600;font-size:13px;color:var(--ink-2)}
.seg button.on{background:#fff;color:var(--fire-2);box-shadow:var(--shadow-sm)}
.sec-h .more{margin-left:auto;background:0;border:0;color:var(--fire-2);font-weight:700;font-size:13px;cursor:pointer;padding:5px 9px;border-radius:8px;transition:background .15s}
.sec-h .more:hover{background:var(--fire-soft)}

.codebox{background:#0f141b;color:#d7e0ee;border-radius:11px;padding:14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;white-space:pre-wrap;word-break:break-all;position:relative}
.codebox .cp{position:absolute;top:8px;right:8px;background:#1d2735;color:#cfd6e2;border:0;border-radius:7px;padding:5px 10px;font-size:12px;font-weight:700}

/* Modal */
.ov{position:fixed;inset:0;background:rgba(10,14,20,.5);display:flex;align-items:flex-start;justify-content:center;padding:34px 16px;z-index:60;overflow:auto}
.modal{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);width:100%;max-width:620px;overflow:hidden}
.modal .mh{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal .mh h3{margin:0;font-size:17px}
.modal .mh .x{margin-left:auto;cursor:pointer;color:var(--muted);width:32px;height:32px;border-radius:9px;background:#eef1f6;
  display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;flex:0 0 auto;transition:background .15s,color .15s}
.modal .mh .x:hover{background:#e2e6ee;color:var(--ink)}
.modal .mb{padding:20px;max-height:70vh;overflow:auto}
.modal .mf{display:flex;gap:10px;padding:14px 20px;border-top:1px solid var(--line);background:var(--surface-2)}
.modal .mf .btn{flex:1}
.zrow{border:1px solid var(--line);border-radius:11px;padding:12px;margin-bottom:10px;display:flex;flex-direction:column;gap:6px}
.zrow .inp{width:100%}
.cat-row{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.cat-row .inp{flex:1}
/* Feste Breite von 34px galt nur für den reinen ✕-Button. Sobald Text danebensteht
   („✕ entfernen" in den Versandzonen), lief der Inhalt aus dem Button heraus und
   überlagerte sich mit dem Icon. Jetzt wächst der Button mit dem Inhalt. */
.catbtn{min-width:38px;height:38px;padding:0 10px;border:1px solid var(--line);background:#fff;border-radius:9px;color:var(--ink-2);
  font-size:15px;font-family:inherit;cursor:pointer;flex:none;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;line-height:1}
.catbtn:hover:not([disabled]){background:var(--surface-2)}
.catbtn[disabled]{opacity:.35;cursor:default}
.catbtn.del{color:var(--red)}
.catbtn.del:hover:not([disabled]){background:#fdecec;border-color:#f3c9c9}
/* Der „entfernen"-Button einer Zone soll nicht über die volle Zeile gehen */
.zrow .catbtn.del{align-self:flex-start;font-size:13px;font-weight:600}
.imgdrop{border:1px dashed var(--line);border-radius:11px;padding:14px;text-align:center;color:var(--muted);cursor:pointer;font-size:13px;transition:border-color .12s,background .12s,color .12s}
.imgdrop img{max-height:120px;border-radius:9px;margin-bottom:8px}
.imgdrop:hover{border-color:var(--fire)}
/* Bild schwebt über der Fläche. pointer-events aus, damit das Vorschaubild
   im Inneren den Zug nicht abfängt und dragleave auslöst. */
.imgdrop.dragover{border-color:var(--fire);border-width:2px;background:rgba(255,122,0,.10);color:var(--ink)}
.imgdrop.dragover *{pointer-events:none}

.stwrap{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.badge-st{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.st-neu{background:#E8F1FF;color:#1c5fc0} .st-bezahlt{background:#E6F7EF;color:#0f7a52}
.st-versandt{background:var(--fire-soft);color:var(--fire-2)} .st-abgeschlossen{background:#EEF1F6;color:#56607a}
.st-storniert{background:#FDE7E7;color:var(--red)}
.st-retoure{background:#FFF3DB;color:#9a6a00} .st-erstattet{background:#E6F7EF;color:#0a7d3c}

/* Rückerstattung in der Bestellung */
.refbox{margin-top:14px;border:1px solid var(--line);border-radius:11px;padding:12px 13px;background:var(--card,#fff)}
.refbox .rh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.refbox.done{background:#E6F7EF;border-color:#bfe6d2;color:#0a7d3c;font-weight:600}
.refbox.warn{background:#FFF7E8;border-color:#f0dcae}

/* E-Mail-Vorlagen */
.tplcard textarea{min-height:120px;font-family:inherit;line-height:1.5}
.tplfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;flex-wrap:wrap}
.tplfoot code,.field code{background:var(--fire-soft,#fff0e6);color:var(--fire-2,#c8551a);padding:1px 5px;border-radius:5px;font-size:11px}
/* Farbwähler als Swatch, nicht als vollbreiter Farbbalken (sah aus wie ein Fehler) */
input[type=color]{width:76px;height:42px;padding:4px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;vertical-align:middle}
.colorfield{display:flex;align-items:center;gap:10px}
.colorfield .hex{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--ink-2)}

/* Checkboxen im Markenlook. Vorher blieben sie das native Blau in 13×13 px –
   direkt neben den orangen Toggles sah das aus wie ein Darstellungsfehler,
   und als Klickfläche waren sie zu klein.
   Die versteckten Inputs der Toggle-Schalter (.sw input) sind ausgenommen. */
input[type=checkbox]:not(.sw input){width:18px;height:18px;accent-color:var(--fire);cursor:pointer;flex:none;margin:0}
label.inline,.inline label{cursor:pointer}

.ordmeta{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;font-size:13.5px;margin:4px 0 16px}
.ordmeta .k{color:var(--muted);font-size:12px}
.oitems{width:100%;border-collapse:collapse;font-size:13.5px}
.oitems td{padding:8px 0;border-top:1px solid var(--line)}
.oitems tr:first-child td{border-top:0}
.osum{margin-top:10px;font-size:14px}
.osum .r{display:flex;justify-content:space-between;padding:3px 0}
.osum .r.tot{font-weight:800;font-size:16px;border-top:1px solid var(--line);margin-top:5px;padding-top:8px}

#toastRoot{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:#10141b;color:#fff;padding:11px 18px;border-radius:11px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow);animation:tin .2s}
.toast.err{background:var(--red)}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}

@media(max-width:820px), (pointer:coarse) and (hover:none) and (max-width:1400px){
  .shopwrap{grid-template-columns:1fr;padding:14px 14px 44px;gap:14px}
  .shopmain{overflow-x:auto}
  /* Seiten-Nav -> horizontale Pillen-Leiste.
     Vorher: overflow-x:auto ohne sichtbare Scrollbar. Auf Tablet/schmalem Fenster
     rutschte „Einstellungen" damit unsichtbar aus dem Bild – es sah aus, als fehle
     der Punkt. Jetzt umbrechen statt scrollen: alle Punkte bleiben sichtbar. */
  .shopnav{position:static;flex-direction:row;flex-wrap:wrap;overflow-x:visible;gap:6px;padding:2px 0 8px}
  .shopnav a{white-space:nowrap;padding:9px 13px;background:#fff;border:1px solid var(--line)}
  .shopnav a.on{border-color:var(--fire)}
  .shopnav .badge{margin-left:6px}
  /* Top-Bar kompakt */
  .shoptop{gap:9px;padding-left:14px;padding-right:14px}
  .shoptop .ti{font-size:15px}
  .shoptop .em{display:none}
  .shoptop .back{padding:7px 11px;font-size:12.5px}
  /* Überschriften-Zeile umbrechen lassen, Aktionen voll breit */
  .page-h{flex-wrap:wrap;gap:10px;margin-bottom:14px}
  .page-h h1{font-size:20px;flex:1 1 auto}
  .page-h .btn{margin-left:0!important;width:100%}
  .page-h .seg{margin-left:0}
  /* KPIs kompakter */
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi-c{padding:13px}
  .kpi-c .v{font-size:20px}
  .row2{grid-template-columns:1fr}
  .ordmeta{grid-template-columns:1fr}
  .hidesm{display:none}
  /* Große Tabellen (Produkte/Bestellungen) -> gestapelte Karten, kein Gequetsche */
  .tbl:not(.mini){display:block;border:0;background:transparent;box-shadow:none;overflow:visible}
  .tbl:not(.mini) thead{display:none}
  .tbl:not(.mini) tbody{display:block}
  .tbl:not(.mini) tr{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);padding:12px 14px;margin-bottom:12px}
  .tbl:not(.mini) td{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 0;border:0;font-size:13.5px;white-space:normal}
  .tbl:not(.mini) td[data-th]::before{content:attr(data-th);color:var(--muted);font-size:12px;font-weight:600;flex:0 0 auto}
  /* Titelzeile (Produktname / Bestell-Nr.) ohne Label, als Kopf der Karte */
  .tbl:not(.mini) td[data-th="Produkt"]::before,.tbl:not(.mini) td[data-th="Nr."]::before{display:none}
  .tbl:not(.mini) td[data-th="Produkt"],.tbl:not(.mini) td[data-th="Nr."]{padding:0 0 9px;margin-bottom:5px;border-bottom:1px solid var(--line);font-weight:700}
  .tbl:not(.mini) td[data-th="Status"]{justify-content:space-between}
  .tbl:not(.mini) td[data-th="Aktiv"]{justify-content:space-between}
  /* Mini-Tabelle (Dashboard) nur kompakter */
  .tbl.mini td{padding:9px 8px;font-size:13px}
  .thumb{width:36px;height:36px}
  .pname .sub{font-size:11px}
  /* Modals als Bottom-Sheet (wie in der App) */
  .ov{padding:0;align-items:flex-end}
  .modal{max-width:100%!important;width:100%;border-radius:20px 20px 0 0;max-height:94vh;display:flex;flex-direction:column;animation:shsheet .24s cubic-bezier(.32,.72,0,1)}
  .modal::before{content:"";display:block;width:40px;height:4px;border-radius:99px;background:#d7dce4;margin:8px auto 0;flex:none}
  .modal .mb{max-height:none;flex:1 1 auto;overflow:auto}
  .modal .mf{position:sticky;bottom:0;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  @keyframes shsheet{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
  /* Eingaben 16px -> kein iOS-Zoom beim Fokus */
  .inp,.field input,.field textarea,.field select{font-size:16px}
}
/* Schmale Phones: KPI-Kacheln einspaltig & luftig (nicht mehr gequetscht) */
@media (max-width:560px){
  .kpis{grid-template-columns:1fr;gap:12px}
  .kpi-c{padding:16px 18px}
  .kpi-c .k{font-size:13px}
  .kpi-c .v{font-size:25px;margin-top:6px}
}

/* ================================================================
   Eigenständige Shop-App – ergänzt am 16.09.2026
   Anmeldemaske, Einrichtungs-Link, Zustandsmarken in den Zugängen.
   ================================================================ */

/* --- Anmeldung -------------------------------------------------- */
/* Solange niemand angemeldet ist, verschwindet der App-Rahmen komplett.
   Ein leeres Menü hinter einer Anmeldemaske sieht nach Fehler aus. */
body.anmeldung .shoptop,
body.anmeldung .shopwrap{ display:none }
body.anmeldung{ background:var(--side); }

#authRoot{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:24px; padding-bottom:max(24px, env(safe-area-inset-bottom));
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(255,122,0,.18), transparent 60%),
    var(--side);
  overflow-y:auto;
}
#authRoot[hidden]{ display:none }

.authcard{
  width:100%; max-width:380px;
  background:var(--card); border-radius:var(--r);
  padding:30px 26px 24px; box-shadow:var(--shadow);
  text-align:center;
}
.authlogo{ width:56px; height:56px; border-radius:14px; margin-bottom:14px }
.authcard h1{ font-family:var(--head); font-size:22px; margin:0 0 6px; color:var(--ink) }
.authsub{ color:var(--muted); font-size:14px; margin:0 0 20px }
.authcard form{ text-align:left }
.authcard label{
  display:block; font-size:13px; font-weight:600;
  color:var(--ink-2); margin:0 0 6px;
}
.authcard input{
  width:100%; padding:12px 13px; margin:0 0 14px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  font:inherit; font-size:16px;   /* 16px: darunter zoomt iOS beim Antippen hinein */
  background:var(--surface-2); color:var(--ink);
}
.authcard input:focus{
  outline:none; border-color:var(--fire);
  background:#fff; box-shadow:0 0 0 3px rgba(255,122,0,.12);
}
.authcard .btn{ width:100%; margin-top:4px }
.authhint{ color:var(--muted); font-size:12.5px; margin:16px 0 0; line-height:1.5 }

.authmsg{
  background:#fdeced; color:#a3272b; border:1px solid #f3cdce;
  border-radius:var(--r-sm); padding:10px 12px;
  font-size:13.5px; text-align:left; margin:0 0 16px;
}
.authmsg[hidden]{ display:none }

/* --- Zustandsmarken in der Zugangsliste ------------------------- */
.pill{
  display:inline-block; padding:3px 9px; border-radius:999px;
  font-size:12px; font-weight:600; white-space:nowrap;
  background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line);
}
.pill.ok  { background:#e7f7f0; color:#12684a; border-color:#c3ebda }
.pill.warn{ background:#fdeced; color:#a3272b; border-color:#f3cdce }

/* --- Abmelden im Kopf ------------------------------------------- */
.shoptop .abmelden{
  margin-left:auto; display:flex; align-items:center; gap:10px;
}
.shoptop .whoami{
  color:rgba(255,255,255,.72); font-size:13px;
  max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media(max-width:700px){
  .shoptop .whoami{ display:none }   /* auf dem Handy zählt der Platz mehr als der Name */
  .authcard{ padding:26px 20px 20px }
}