/* =====================================================================
   imkern.org – Design-System
   Übernommen aus dem verbindlichen Design-Ordner (index.html).
   Teil 1: Tokens & Basiskomponenten (unverändert übernommen)
   Teil 2: App-Ergänzungen (Sheets, App-Navigation, Utilities)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --grund:#fff; --flaeche:#FAF7F1; --senke:#F4EFE5;
  --honig:#E2A32B; --propolis:#8A4E15; --anthrazit:#1D1A16;
  --rauch:#71695D; --linie:#EDE6D9; --linie-stark:#DED4C2;
  --blatt:#3F7A34; --warn:#B8690C; --fehler:#A32E1E;
  --ui:'Poppins',system-ui,sans-serif; --lese:'Source Serif 4',Georgia,serif;
  --daten:'IBM Plex Mono',Consolas,monospace;
  --r-s:8px; --r-m:11px; --r-l:16px; --r-xl:24px;
  --s-2:8px; --s-3:14px; --s-4:24px; --s-5:40px; --s-6:72px;
  --sch-1:0 1px 2px rgba(29,26,22,.05);
  --sch-2:0 2px 4px rgba(29,26,22,.04), 0 12px 28px -12px rgba(29,26,22,.16);
  --rand:clamp(20px,5vw,48px);

  /* ---- Alias-Tokens (App-Komponenten nutzen dieselben Werte) ---- */
  --bg-app:var(--flaeche); --bg-surface:var(--grund); --bg-surface-hover:#FFFDF9; --bg-sink:var(--senke);
  --text-main:var(--anthrazit); --text-muted:var(--rauch); --text-faint:#A79E90;
  --border-light:var(--linie); --border-strong:var(--linie-stark); --border-focus:var(--propolis);
  --primary:var(--anthrazit); --primary-text:#fff; --honig-hover:#D0921F;
  --accent:var(--blatt); --accent-soft:#E3EFDD; --danger:var(--fehler); --danger-soft:#F9E1DC;
  --warn-soft:#FBE9D2; --info:var(--propolis); --info-soft:#F3E7D5;
  --radius-xl:var(--r-xl); --radius-lg:var(--r-l); --radius-md:var(--r-m); --radius-sm:var(--r-s); --radius-pill:9999px;
  --shadow-sm:var(--sch-1); --shadow-md:var(--sch-2); --shadow-sheet:0 -10px 40px rgba(29,26,22,.18);
  --font-sans:var(--ui); --font-serif:var(--lese); --font-mono:var(--daten);
}
*{box-sizing:border-box}
img,svg{max-width:100%}
.umflug{max-width:none !important}
html,body{margin:0; overflow-x:hidden; max-width:100%}
body{background:var(--grund); color:var(--anthrazit); font:400 17px/1.7 var(--lese); -webkit-font-smoothing:antialiased}

.wrap{max-width:960px; margin:0 auto; padding-left:var(--rand); padding-right:var(--rand)}
section{padding:var(--s-5) 0}
section + section{border-top:1px solid var(--linie)}

h1,h2,h3,h4,.ui{font-family:var(--ui)}
h1{font-size:clamp(30px,6vw,50px); line-height:1.05; font-weight:700; letter-spacing:-1.4px; margin:0 0 16px}
h2{font-size:clamp(21px,3vw,28px); font-weight:700; letter-spacing:-.6px; margin:0 0 10px}
h3{font-size:12px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase; color:var(--rauch); margin:var(--s-4) 0 var(--s-2)}
p{margin:0 0 16px; max-width:64ch}
.lead{font-size:20px; color:#4B443A}
.mono{font-family:var(--daten); font-size:13px}
.abschnitt-intro{margin-bottom:var(--s-4)}
a{color:var(--propolis)}

/* ---------- Ladeschicht ---------- */
.ladeschicht{position:fixed; inset:0; z-index:100; background:var(--grund);
  display:flex; align-items:center; justify-content:center;
  padding:var(--rand); transition:opacity .6s ease, visibility .6s ease}
.ladeschicht.weg{opacity:0; visibility:hidden}
.ladeLogo{width:min(440px,82vw); height:auto; display:block}

/* ---------- Kopfleiste ---------- */
.leiste{position:sticky; top:0; z-index:9; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--linie)}
.leiste .inner{max-width:960px; margin:0 auto; padding:14px var(--rand);
  display:flex; align-items:center; justify-content:space-between; gap:16px}
.kopfLogo{height:50px; width:auto; display:block}
.nav{display:flex; gap:18px; align-items:center}
.nav a{font-family:var(--ui); font-weight:600; font-size:14px; color:var(--anthrazit);
  text-decoration:none; padding:8px 2px; border-bottom:2px solid transparent; transition:border-color .15s}
.nav a:hover{border-bottom-color:var(--honig)}
.burger{display:none; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center;
  justify-content:center; background:none; border:0; cursor:pointer}
.burger span{width:22px; height:2px; background:var(--anthrazit); border-radius:2px; transition:transform .25s,opacity .2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.schatten{position:fixed; inset:0; background:rgba(29,26,22,.34); opacity:0; visibility:hidden;
  transition:opacity .25s,visibility .25s; z-index:8}
.schatten.auf{opacity:1; visibility:visible}

/* ---------- Held ---------- */
.held{position:relative; overflow:hidden; padding:64px 0 var(--s-5)}
.augen{display:inline-block; font-family:var(--ui); font-size:12px; font-weight:600;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--propolis); margin-bottom:14px}
.held .deko{position:absolute; right:-2%; top:10%; width:min(230px,32%); opacity:.15; z-index:0; pointer-events:none}
.held .inhalt{position:relative; z-index:1}

/* ---------- Knöpfe ---------- */
.knoepfe{display:flex; gap:12px; flex-wrap:wrap; margin-top:var(--s-4)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--ui); font-weight:600;
  font-size:15px; padding:13px 20px; border-radius:var(--r-m); border:1.5px solid transparent; cursor:pointer;
  background:var(--honig); color:var(--anthrazit); box-shadow:var(--sch-1);
  text-decoration:none; transition:background .16s,border-color .16s,transform .07s}
.btn:active{transform:translateY(1px)}
.btn:hover{background:var(--honig-hover)}
.btn:focus-visible{outline:2.5px solid var(--propolis); outline-offset:2px}
.btn-primaer{background:var(--anthrazit); color:#fff; box-shadow:var(--sch-1)}
.btn-primaer:hover{background:#332D26}
.btn-honig{background:var(--honig); color:var(--anthrazit); box-shadow:var(--sch-1)}
.btn-honig:hover{background:#D0921F}
.btn-weiss{background:#fff; color:var(--anthrazit); border-color:var(--linie-stark); box-shadow:var(--sch-1)}
.btn-weiss:hover{background:#FFFDF9; border-color:#C6B79C}
.btn-sekundaer{background:#fff; color:var(--anthrazit); border-color:var(--linie-stark)}
.btn-sekundaer:hover{background:var(--flaeche)}
.btn-still{background:transparent; color:var(--propolis)}
.btn-still:hover{background:var(--flaeche)}
.btn-gefahr{background:var(--fehler); color:#fff}
.btn-gefahr:hover{background:#8A2416}
.btn-s{font-size:13px; padding:9px 14px; border-radius:var(--r-s)}
.btn-l{font-size:17px; padding:16px 26px}
.btn:disabled{opacity:.38; cursor:not-allowed}

/* App-Button-Schreibweise (kompatibel zur SPA: .btn = Honig, .ghost/.dark/.danger/.sm) */
.btn.ghost{background:#fff; color:var(--anthrazit); border-color:var(--linie-stark)}
.btn.ghost:hover{background:var(--bg-surface-hover); border-color:#C6B79C}
.btn.dark{background:var(--anthrazit); color:#fff}
.btn.dark:hover{background:#332D26}
.btn.danger{background:var(--danger-soft); color:var(--fehler); border-color:transparent; box-shadow:none}
.btn.danger:hover{opacity:.9; background:var(--danger-soft)}
.btn.sm{font-size:14px; padding:10px 16px; min-height:40px}
/* Im App-Bereich sind Buttons standardmäßig voll breit (außer kleine). */
.app-body .btn{width:100%; justify-content:center}
.app-body .btn.sm, .app-body .btn.btn-s{width:auto}
.raster{display:flex; flex-wrap:wrap; gap:12px; align-items:center; max-width:100%}

/* ---------- Logo-Galerie ---------- */
.logogitter{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--s-2)}
.logofeld{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-l);
  padding:var(--s-3) var(--s-4); display:flex; align-items:center; justify-content:center; min-height:110px}
.logofeld.dunkel{background:var(--anthrazit); border-color:#332E27}
.logofeld svg{max-width:100%; height:auto; max-height:56px}
.logofeld.icon svg{max-height:80px}
.bez{font-family:var(--ui); font-size:12px; color:var(--rauch); margin:8px 2px var(--s-3)}

/* ---------- Farben ---------- */
.farben{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:var(--s-2)}
.farbe{border-radius:var(--r-m); overflow:hidden; border:1px solid var(--linie); background:#fff}
.farbe .feld{height:58px}
.farbe .txt{padding:9px 11px; font-family:var(--ui); font-size:12px; line-height:1.4}
.farbe b{display:block; font-weight:600; font-size:13px}
.farbe span{color:var(--rauch); font-family:var(--daten); font-size:11px}

/* ---------- Schrift ---------- */
.typ{border-left:2px solid var(--honig); padding-left:var(--s-3); margin-bottom:var(--s-4)}
.typ .name{font-family:var(--ui); font-size:11px; letter-spacing:.9px; text-transform:uppercase; color:var(--rauch); margin-bottom:4px}

/* ---------- Bildflächen ---------- */
.grossbild{position:relative; border-radius:var(--r-xl); overflow:hidden; min-height:230px;
  background:linear-gradient(140deg,#FAE9C6,#DFB86A); display:flex; align-items:flex-end}
.grossbild .biene{position:absolute; right:-4%; top:8%; width:44%; opacity:.5; z-index:1; pointer-events:none}
.grossbild .inhalt{position:relative; z-index:2; padding:var(--s-4); color:#2A2116; max-width:34ch}
.grossbild h3{color:#6C5423; margin-top:0}
.karten{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:var(--s-3); margin-top:var(--s-3)}
.bildkarte{background:#fff; border:1px solid var(--linie); border-radius:var(--r-l); overflow:hidden; box-shadow:var(--sch-2)}
.bildkarte .bild{aspect-ratio:16/9; background:linear-gradient(140deg,#FDF3DE,#EFD5A2); display:flex; align-items:center; justify-content:center}
.bildkarte .bild svg{width:34%; opacity:.34}
.bildkarte .text{padding:16px 18px 22px}
.bildkarte h4{margin:0 0 4px; font-size:18px; font-weight:600}
.bildkarte .meta{font-family:var(--ui); font-size:12px; color:var(--rauch); margin-bottom:8px}
.bildkarte p{font-size:15px; color:#4B443A; margin:0}

/* ---------- Formular ---------- */
.formraster{display:flex; flex-wrap:wrap; gap:var(--s-4)}
.spalte{flex:1 1 300px; min-width:0; max-width:100%}
.feldgruppe{margin-bottom:var(--s-3)}
label{display:block; font-family:var(--ui); font-weight:600; font-size:13px; margin-bottom:6px}
.hinweis{font-family:var(--ui); font-size:12.5px; color:var(--rauch); margin-top:6px}
.fehlertext{font-family:var(--ui); font-size:12.5px; color:var(--fehler); margin-top:6px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=tel],input[type=url],input[type=search],select,textarea{width:100%; max-width:100%; font:400 15px/1.4 var(--ui); color:var(--anthrazit);
  background:#fff; border:1.5px solid var(--linie-stark); border-radius:var(--r-m); padding:12px 14px; transition:border-color .16s,box-shadow .16s}
textarea{resize:vertical; min-height:92px}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--propolis); box-shadow:0 0 0 4px rgba(226,163,43,.28)}
input.fehler{border-color:var(--fehler)}
.wahl{display:flex; align-items:center; gap:10px; font-family:var(--ui); font-size:15px; margin-bottom:10px; cursor:pointer}
.wahl input{accent-color:var(--propolis); width:18px; height:18px; margin:0}
.schalter{position:relative; display:inline-block; width:46px; height:26px; flex:none}
.schalter input{opacity:0; width:0; height:0; position:absolute}
.bahn{position:absolute; inset:0; background:#D5C9B2; border-radius:99px; transition:background .2s}
.bahn::before{content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; box-shadow:var(--sch-1); transition:transform .2s}
.schalter input:checked + .bahn{background:var(--honig)}
.schalter input:checked + .bahn::before{transform:translateX(20px)}

/* ---------- Marken ---------- */
.marke{display:inline-flex; align-items:center; gap:7px; font-family:var(--ui); font-weight:600;
  font-size:12px; padding:5px 12px; border-radius:99px; background:var(--senke); color:#5B5145}
.marke.honig{background:#FBEDCF; color:#7A5406}
.marke.blatt{background:#E3EFDD; color:#2C5223}
.marke.warn{background:#FBE9D2; color:#83490A}
.marke.fehler{background:#F9E1DC; color:#7C2315}
.punkt{width:7px; height:7px; border-radius:50%; background:currentColor}

/* ---------- Datenkarten ---------- */
.datenkarten{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:var(--s-3)}
.datenkarte{background:#fff; border:1px solid var(--linie); border-radius:var(--r-l); padding:var(--s-3) var(--s-3) var(--s-4); box-shadow:var(--sch-2)}
.datenkarte h4{margin:0 0 3px; font-size:18px; font-weight:600}
.datenkarte .ort{font-family:var(--ui); font-size:12px; color:var(--rauch); margin-bottom:var(--s-3)}
.werte{display:flex; gap:var(--s-3); margin-bottom:var(--s-3)}
.wert{flex:1}
.wert .zahl{font-family:var(--daten); font-size:22px; font-weight:500; letter-spacing:-.6px}
.wert .b{font-family:var(--ui); font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--rauch)}

/* ---------- Bänder ---------- */
.band{display:flex; gap:12px; padding:15px 17px; border-radius:var(--r-m); border:1px solid; margin-bottom:var(--s-2); font-size:15.5px}
.band p{margin:0; max-width:none}
.band b{font-family:var(--ui); font-size:14px; display:block; margin-bottom:3px}
.band.info{background:#FAF6EC; border-color:#E6D9BE}
.band.gut{background:#F1F7EE; border-color:#D3E5CB}
.band.warn{background:#FDF3E5; border-color:#F0DCBB}
.band.schlecht{background:#FCEDE9; border-color:#F0D2CA}

/* ---------- Reiter + Tabelle ---------- */
.reiter{display:inline-flex; gap:3px; background:var(--flaeche); padding:4px; border-radius:99px; border:1px solid var(--linie); margin-bottom:var(--s-3); max-width:100%; overflow-x:auto}
.reiter button{font-family:var(--ui); font-weight:600; font-size:14px; background:none; border:none; padding:9px 16px; cursor:pointer; color:var(--rauch); border-radius:99px; white-space:nowrap}
.reiter button[aria-selected=true]{background:#fff; color:var(--anthrazit); box-shadow:var(--sch-1)}
.tabelle{border:1px solid var(--linie); border-radius:var(--r-l); overflow-x:auto; box-shadow:var(--sch-1); max-width:100%}
table{width:100%; border-collapse:collapse; background:#fff; min-width:520px}
th{font-family:var(--ui); font-size:11.5px; letter-spacing:.8px; text-transform:uppercase; text-align:left; color:var(--rauch); background:var(--flaeche); padding:12px 16px; border-bottom:1px solid var(--linie)}
td{padding:13px 16px; border-bottom:1px solid #F4EEE3; font-size:15.5px}
tbody tr:last-child td{border-bottom:none}
td.num{font-family:var(--daten); font-size:14px; text-align:right}
.fuell{height:10px; background:var(--senke); border-radius:99px; overflow:hidden; max-width:360px; margin-top:var(--s-3)}
.fuell i{display:block; height:100%; background:linear-gradient(90deg,#EFC15E,var(--honig)); border-radius:99px}

/* ---------- Subdomain-Logos ---------- */
.subgitter{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s-3)}
.subfeld{border:1px solid var(--linie); border-radius:var(--r-l); overflow:hidden; background:#fff;
  box-shadow:var(--sch-2); display:flex; flex-direction:column; transition:transform .15s, box-shadow .15s}
.subfeld:hover{transform:translateY(-2px); box-shadow:0 4px 8px rgba(29,26,22,.06), 0 18px 36px -16px rgba(29,26,22,.22)}
.subfeld .streifen{height:5px}
.subfeld .flaeche{padding:var(--s-5) var(--s-4); display:flex; align-items:center; justify-content:center;
  min-height:104px; background:var(--flaeche)}
.subfeld svg{max-width:100%; height:auto; max-height:40px; display:block}
.subfeld .info{padding:14px var(--s-4) 18px; display:flex; flex-direction:column; gap:5px}
.subfeld .domain{font-family:var(--daten); font-size:13.5px; color:var(--anthrazit); font-weight:500; word-break:break-all}
.subfeld .zweck{font-family:var(--ui); font-size:12.5px; color:var(--rauch); line-height:1.45}

/* ---------- Ladeanzeigen ---------- */
.lader{display:flex; align-items:flex-start; gap:var(--s-4) var(--s-5); flex-wrap:wrap; justify-content:center}
.lader figure{margin:0; text-align:center; font-family:var(--ui); font-size:12.5px; color:var(--rauch)}
.lader svg{width:128px; height:128px; display:block; margin:0 auto 12px}
.lader .breit .loaderLogo{width:min(300px,80vw); height:auto; max-height:none; margin:0 auto 10px}
.lader .breit{flex:1 1 260px}

/* ---------- Flug-Button ---------- */
.flugbuehne{position:relative; background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--r-l); height:236px; overflow:hidden; max-width:100%;
  display:flex; align-items:center; justify-content:center;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.flugfeld{position:relative; display:block; width:240px; height:52px}
.knopf-flug{width:240px; height:52px; padding:0 14px 0 46px; justify-content:center}
.umflug{position:absolute; left:50%; top:50%; width:464px; height:276px;
  transform:translate(-50%,-50%); pointer-events:none; overflow:visible}
.umflug .fl{transform-box:fill-box; transform-origin:50% 88%}
.flugfeld.laedt .umflug .fl{animation:schlag .13s linear infinite}
@keyframes schlag{50%{transform:scaleY(.7)}}
.txt-laedt{display:none}
.flugfeld.laedt .txt-ruhe{display:none}
.flugfeld.laedt .txt-laedt{display:inline}

/* ---------- Fuß ---------- */
.fuss-band{border-top:1px solid var(--linie); margin-top:var(--s-5)}
.fuss{max-width:960px; margin:0 auto; padding:var(--s-5) var(--rand);
  font-family:var(--ui); font-size:14px; color:var(--rauch);
  display:flex; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; align-items:center}
.fuss .marke-fuss{flex:0 0 auto; max-width:100%}
.fuss .marke-fuss svg{height:30px; width:auto; max-width:100%; display:block}
.fuss > span:last-child{flex:1 1 auto; min-width:0}
.fuss a{color:var(--rauch); text-decoration:none}
.fuss a:hover{color:var(--propolis)}

/* =====================================================================
   Teil 2 – App-Ergänzungen (imkern.org SaaS)
   ===================================================================== */

/* Utilities */
.stack{display:flex; flex-direction:column; gap:var(--s-3)}
.row{display:flex; gap:var(--s-3); align-items:center; flex-wrap:wrap}
.row.zwischen{justify-content:space-between}
.spacer{flex:1}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.text-rauch{color:var(--rauch)}
.zentriert{text-align:center}
.klein{font-size:13px; font-family:var(--ui)}
.gitter-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s-3)}
.karte{background:#fff; border:1px solid var(--linie); border-radius:var(--r-l); padding:var(--s-4); box-shadow:var(--sch-1)}
.karte-flach{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-l); padding:var(--s-4)}
.trenner{border:0; border-top:1px solid var(--linie); margin:var(--s-4) 0}
.leer{text-align:center; color:var(--rauch); font-family:var(--ui); padding:var(--s-5) var(--s-4)}
.leer svg{width:64px; height:64px; opacity:.4; margin-bottom:var(--s-3)}

/* App-Kopf (schlanke Leiste im /my-Bereich) */
/* App-Bereich ist sans-first (Poppins); Marketing/Blog bleibt Source-Serif-Lesetext. */
.app-body{background:var(--flaeche); font-family:var(--ui); font-size:16px; line-height:1.5}
.app-body p{max-width:none}

/* Shell + Kopf/Island/Footer für Konto/Preisliste/Blog (konsistent mit app.php) */
.shell{max-width:900px; margin:0 auto; min-height:100dvh; padding:0 16px 130px}
.app-head{padding:24px 0 18px}
.app-head .hd-row{display:flex; align-items:center; justify-content:space-between; gap:16px}
.app-head .brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.app-head .brand svg{height:34px; width:auto}
.hd-tools{display:flex; align-items:center; gap:10px}
.hd-season{font-family:var(--daten); font-size:13px; font-weight:500; color:var(--rauch); background:#fff; border:1px solid var(--linie); border-radius:99px; padding:6px 12px}
.avatar{width:40px; height:40px; border-radius:50%; background:var(--honig); color:var(--anthrazit); display:grid; place-items:center; font-family:var(--ui); font-weight:600; text-decoration:none; border:1px solid var(--linie-stark)}

/* Zentrale untere Hauptnavigation (mobil-first: Icon über Label; Desktop: Reihe) */
.island{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom)); z-index:50;
  width:min(500px,calc(100% - 24px)); background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  border:1px solid var(--linie); border-radius:24px; display:flex; padding:6px; box-shadow:var(--sch-2)}
.island a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; flex:1 1 0; min-width:0;
  padding:8px 3px; border-radius:16px; color:var(--rauch); cursor:pointer; font-family:var(--ui); font-size:11px;
  font-weight:600; text-decoration:none; transition:background .18s,color .18s}
.island a .lbl{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.island a:hover{color:var(--anthrazit); background:var(--flaeche)}
.island a.on{color:var(--anthrazit); background:var(--honig); box-shadow:var(--sch-1)}
.island svg{width:21px; height:21px; flex:none}
.island a.island-brand{display:none}
@media (min-width:560px) and (max-width:999.98px){
  .island{border-radius:99px; padding:7px}
  .island a{flex-direction:row; gap:7px; font-size:13.5px; padding:11px 10px; border-radius:99px}
}
@media (max-width:360px){ .island a{font-size:10px} .island svg{width:20px; height:20px} }

/* Desktop: untere Pille wird zur linken Sidebar */
@media (min-width:1000px){
  .app-body{padding-left:240px}
  .island{
    left:0; top:0; bottom:0; transform:none; width:240px; height:100dvh;
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:4px;
    border:0; border-right:1px solid var(--linie); border-radius:0;
    padding:22px 16px; background:rgba(255,255,255,.92)}
  .island a{flex:0 0 auto; flex-direction:row; justify-content:flex-start; gap:12px;
    padding:12px 14px; border-radius:12px; font-size:15px}
  .island svg{width:21px; height:21px}
  .island a.island-brand{display:flex; align-items:center; padding:4px 12px 20px; margin-bottom:2px}
  .island a.island-brand:hover{background:none}
  .island a.island-brand svg{height:30px; width:auto}
  .shell{padding-bottom:48px}
  .app-head .brand{display:none}
  .app-head .hd-row{justify-content:flex-end}
}

.app-foot{margin-top:44px; padding:32px 0 12px; border-top:1px solid var(--linie)}
.foot-grid{display:flex; gap:24px; flex-wrap:wrap; justify-content:space-between; align-items:flex-start}
.foot-brand{max-width:260px}
.foot-brand svg{height:30px; margin-bottom:10px}
.foot-brand p{font-size:13px; color:var(--rauch); line-height:1.6; margin:0}
.foot-cols{display:flex; gap:40px; flex-wrap:wrap}
.foot-col h4{font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--rauch); font-weight:600; margin-bottom:12px; font-family:var(--ui)}
.foot-col a{display:block; font-family:var(--ui); font-size:14px; color:var(--rauch); text-decoration:none; padding:4px 0}
.foot-col a:hover{color:var(--propolis)}
.foot-bottom{margin-top:24px; padding-top:16px; border-top:1px solid var(--linie); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-family:var(--ui); font-size:12.5px; color:var(--rauch)}
.app-haupt{max-width:960px; margin:0 auto; padding:var(--s-4) var(--rand) 96px}
.app-titel{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-bottom:var(--s-4); flex-wrap:wrap}
.app-titel h1{font-size:clamp(24px,4vw,32px); margin:0}

/* Sheet – einheitliches Formular-Overlay (App + öffentliche Seiten).
   Sichtbar über .open (App/app.js) oder .auf (ui.js). */
.veil, .sheet-schatten{position:fixed; inset:0; background:rgba(29,26,22,.5); z-index:60; display:none;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
.veil.open, .sheet-schatten.auf{display:block; animation:veilIn .2s}
@keyframes veilIn{from{opacity:0}to{opacity:1}}
.sheet{position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:61;
  width:min(600px,calc(100% - 24px)); background:#fff; border:1px solid var(--linie); border-radius:28px;
  padding:16px 24px 32px; display:none; animation:sheetUp .3s cubic-bezier(.19,1,.22,1);
  box-shadow:var(--shadow-sheet); max-height:88dvh; overflow-y:auto}
.sheet.open, .sheet.auf{display:block}
@keyframes sheetUp{from{transform:translate(-50%,60px); opacity:0}to{transform:translate(-50%,0); opacity:1}}
.grab, .sheet-griff{width:40px; height:5px; border-radius:3px; background:var(--linie-stark); margin:0 auto 22px}
.sheet h2{margin-bottom:var(--s-2)}
.sheet h3{font-family:var(--ui); font-size:24px; font-weight:700; letter-spacing:-.5px; margin-bottom:6px}
.sheet .sub{font-size:15px; color:var(--rauch); margin-bottom:22px; border-bottom:1px solid var(--linie); padding-bottom:18px}
.sheet-kopf{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s-3)}
.sheet-schliessen{background:none; border:0; cursor:pointer; color:var(--rauch); font-size:26px; line-height:1; padding:4px 8px}
.sheet-sec{font-family:var(--ui); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint);
  font-weight:600; margin:28px 0 16px; display:flex; align-items:center; gap:12px}
.sheet-sec::after{content:""; flex:1; height:1px; background:var(--linie)}
@media (max-width:400px){ .sheet{padding-left:18px; padding-right:18px} }

/* Karten-Container (Leaflet) */
.karte-leaflet{width:100%; height:340px; border-radius:var(--r-l); overflow:hidden; border:1px solid var(--linie); z-index:1}
.karte-voll{position:absolute; inset:0; height:100%; border-radius:0; border:0}

/* Listenkarten (Tabellen als Karten auf Mobile) */
.listenkarte{display:flex; align-items:center; gap:var(--s-3); background:#fff; border:1px solid var(--linie);
  border-radius:var(--r-l); padding:var(--s-3) var(--s-4); box-shadow:var(--sch-1); text-decoration:none; color:inherit}
.listenkarte:hover{border-color:var(--linie-stark); background:#FFFDF9}
.listenkarte .haupt{flex:1; min-width:0}
.listenkarte .haupt b{font-family:var(--ui); font-size:16px; display:block}
.listenkarte .haupt .sub{font-family:var(--ui); font-size:13px; color:var(--rauch)}
.listenkarte .pfeil{color:var(--linie-stark); flex:none}

/* Kennzahl-Kacheln */
.kennzahlen{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--s-3)}
.kennzahl{background:#fff; border:1px solid var(--linie); border-radius:var(--r-l); padding:var(--s-3) var(--s-4); box-shadow:var(--sch-1)}
.kennzahl .zahl{font-family:var(--daten); font-size:26px; font-weight:500; letter-spacing:-.6px; display:block}
.kennzahl .b{font-family:var(--ui); font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--rauch)}

/* Auth-Karte (Login/Registrierung) */
.auth-schirm{min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:var(--s-4) var(--rand)}
.auth-karte{width:min(420px,100%); background:#fff; border:1px solid var(--linie); border-radius:var(--r-xl);
  box-shadow:var(--sch-2); padding:var(--s-5) var(--s-4)}
.auth-karte .logo{display:block; height:44px; margin:0 auto var(--s-4)}

@media (max-width:720px){
  .leiste .inner{padding-top:12px; padding-bottom:12px}
  .kopfLogo{height:42px}
  .burger{display:flex}
  .nav{position:fixed; top:0; right:0; z-index:9; height:100dvh; width:min(78vw,300px);
    flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:6px;
    background:#fff; box-shadow:-12px 0 40px -18px rgba(29,26,22,.4);
    padding:84px 24px 24px; transform:translateX(100%); transition:transform .28s cubic-bezier(.22,.61,.36,1)}
  .nav.auf{transform:translateX(0)}
  .nav a{font-size:18px; padding:12px 0; width:100%; border-bottom:1px solid var(--linie)}
  .held{padding:44px 0 var(--s-4)}
  .grossbild .biene{width:56%; right:-8%; opacity:.42}
  .grossbild .inhalt{max-width:none}
}
@media (max-width:560px){ .flugbuehne{padding:var(--s-3) 0} }
@media (max-width:440px){ .farben{grid-template-columns:repeat(2,1fr)} .raster .btn{flex:1 1 100%; justify-content:center} }
@media (min-width:721px){ .app-haupt{padding-bottom:var(--s-5)} }
@media (prefers-reduced-motion: reduce){*{animation-duration:.001s !important; transition-duration:.001s !important}}

/* =====================================================================
   Teil 3 – App-Komponenten (my.imkern.org / app.php)
   Poppins für UI & Überschriften, IBM Plex Mono für Zahlen.
   ===================================================================== */
.btn-block{width:100%; justify-content:center}

/* Inline-CRUD (Bearbeiten/Löschen an Listeneinträgen) */
.detail-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px}
.crud{display:inline-flex; gap:5px; align-items:center; flex:none}
.ibtn{width:30px; height:30px; display:inline-grid; place-items:center; border:1px solid var(--linie); background:#fff; border-radius:9px; color:var(--rauch); cursor:pointer; flex:none; padding:0; transition:color .15s,border-color .15s,background .15s}
.ibtn:hover{color:var(--anthrazit); border-color:var(--linie-stark); background:var(--flaeche)}
.ibtn.danger:hover{color:var(--danger); border-color:var(--danger)}
.task-item .ibtn{margin-left:auto}

/* KPIs */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.kpi{background:var(--bg-surface); border:1px solid var(--linie); border-radius:var(--r-l); padding:16px}
.kpi b{font-family:var(--daten); font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.2; letter-spacing:-.02em; display:block}
.kpi b small{font-size:13px; font-weight:500; color:var(--rauch)}
.kpi span{font-family:var(--ui); font-size:12.5px; font-weight:500; color:var(--rauch); margin-top:4px; display:block}
@media (max-width:600px){ .kpis{grid-template-columns:repeat(2,1fr)} .kpi{padding:14px} }

/* Views */
.view{display:none}
.view.active{display:block; animation:appFade .22s ease-out}
@keyframes appFade{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.sec{display:flex; align-items:baseline; justify-content:space-between; margin:30px 0 16px; gap:12px}
.sec h2{font-family:var(--ui); font-size:clamp(22px,3vw,26px); font-weight:700; letter-spacing:-.5px; margin:0}
.sec .n{font-family:var(--ui); font-size:14px; font-weight:500; color:var(--rauch); font-variant-numeric:tabular-nums}
.font-serif{font-family:var(--ui)} /* im App-Kontext bewusst sans (globaler Standard) */

/* Karten */
.card{background:var(--bg-surface); border:1px solid var(--linie); border-radius:var(--r-xl); padding:22px; margin-bottom:14px; cursor:pointer; box-shadow:var(--sch-1); transition:box-shadow .2s, border-color .2s, transform .1s}
.card:hover{border-color:var(--linie-stark); box-shadow:var(--sch-2)}
.card:active{transform:scale(.99)}
.card-static, .card-static:hover{cursor:default; border-color:var(--linie); box-shadow:var(--sch-1); transform:none}
.card-title{font-family:var(--ui); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); margin-bottom:14px}

/* iconbtn / back */
.iconbtn{width:44px; height:44px; border-radius:var(--r-m); border:1px solid var(--linie); background:var(--bg-surface); color:var(--anthrazit); display:grid; place-items:center; cursor:pointer; transition:background .2s, border-color .2s; box-shadow:var(--sch-1); flex:0 0 auto}
.iconbtn:hover{background:var(--bg-surface-hover); border-color:var(--linie-stark)}
.back{display:inline-flex; align-items:center; gap:8px; font-family:var(--ui); font-size:15px; font-weight:600; color:var(--rauch); background:var(--bg-surface); border:1px solid var(--linie); border-radius:99px; cursor:pointer; margin-bottom:20px; padding:8px 16px; transition:color .2s, border-color .2s; box-shadow:var(--sch-1)}
.back:hover{color:var(--anthrazit); border-color:var(--linie-stark)}

/* Pills */
.pill{display:inline-flex; align-items:center; gap:6px; font-family:var(--ui); font-size:13px; font-weight:600; padding:6px 12px; border-radius:99px; white-space:nowrap; background:var(--bg-surface); border:1px solid var(--linie)}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.pill.ok{color:var(--blatt); background:var(--accent-soft); border-color:transparent}
.pill.warn{color:var(--warn); background:var(--warn-soft); border-color:transparent}
.pill.bad{color:var(--fehler); background:var(--danger-soft); border-color:transparent}
.pill.info{color:var(--propolis); background:var(--info-soft); border-color:transparent}
.pill.honig{color:var(--propolis); background:#FBEDCF; border-color:transparent}
.qdot{width:12px; height:12px; border-radius:50%; display:inline-block; vertical-align:text-top; margin-right:6px; border:1px solid rgba(29,26,22,.15)}

/* KV */
.kv{display:flex; flex-direction:column; gap:4px}
.kv span{font-family:var(--ui); font-size:11.5px; color:var(--text-faint); letter-spacing:.05em; text-transform:uppercase; font-weight:600}
.kv b{font-family:var(--ui); font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--anthrazit)}

/* Chips */
.row-scroll{display:flex; gap:8px; overflow-x:auto; padding-bottom:12px; scrollbar-width:none; margin-bottom:16px}
.row-scroll::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto; border:1px solid var(--linie); background:var(--bg-surface); border-radius:99px; padding:8px 16px; font-family:var(--ui); font-size:14px; font-weight:500; color:var(--rauch); cursor:pointer; transition:all .2s; box-shadow:var(--sch-1)}
.chip:hover{border-color:var(--linie-stark); color:var(--anthrazit)}
.chip.on{background:var(--anthrazit); color:#fff; border-color:var(--anthrazit)}

/* Segment-Balken */
.seg{display:inline-flex; gap:3px; vertical-align:middle}
.seg i{width:14px; height:6px; border-radius:3px; background:var(--linie)}
.seg i.f{background:var(--anthrazit)}
.seg.hot i.f{background:var(--fehler)}

/* Karte */
.map-wrap{width:100%; height:210px; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--linie); margin-bottom:16px; box-shadow:var(--sch-1); position:relative; z-index:1}
#apiaryMap{width:100%; height:100%; z-index:1}
.leaflet-control{z-index:2 !important}

/* Dashboard-Karten */
.dash-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:22px}
.dash-card{background:var(--bg-surface); border:1px solid var(--linie); border-radius:var(--r-xl); padding:20px; box-shadow:var(--sch-1)}
.dash-card h3{font-family:var(--ui); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); font-weight:600; margin-bottom:12px; display:flex; align-items:center; gap:8px}
.dash-card .val{font-family:var(--ui); font-size:20px; font-weight:600; color:var(--anthrazit); line-height:1.3}
.dash-card .sub{font-family:var(--ui); font-size:14px; color:var(--rauch); margin-top:4px}
@media (max-width:600px){ .dash-grid{grid-template-columns:1fr; gap:12px} }

/* Aufgaben */
.task-item{display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--linie)}
.task-item:last-child{border-bottom:none; padding-bottom:0}
.task-item .check{width:24px; height:24px; border-radius:7px; border:2px solid var(--linie-stark); flex:0 0 auto; cursor:pointer; display:grid; place-items:center; transition:all .2s; color:#fff}
.task-item .check.done{background:var(--blatt); border-color:var(--blatt)}
.task-item .txt{flex:1; font-family:var(--ui); font-size:15px; color:var(--anthrazit); font-weight:500}
.task-item .txt.done{text-decoration:line-through; color:var(--text-faint)}
.task-item .meta{font-family:var(--ui); font-size:13px; color:var(--rauch); font-weight:400; display:block; margin-top:2px}
.task-item .badge{font-family:var(--ui); font-size:11px; padding:2px 6px; border-radius:5px; background:var(--warn-soft); color:var(--warn); font-weight:600; text-transform:uppercase; margin-right:8px}

/* Völker */
.v-top{display:flex; align-items:center; gap:16px}
.v-num{width:48px; height:48px; border-radius:var(--r-m); background:var(--flaeche); border:1px solid var(--linie); display:grid; place-items:center; font-family:var(--daten); font-weight:600; font-size:18px; flex:0 0 auto}
.v-name{font-family:var(--ui); font-size:22px; font-weight:700; letter-spacing:-.4px; line-height:1.2; margin-bottom:2px}
.v-meta{font-family:var(--ui); font-size:14px; color:var(--rauch)}
.v-right{margin-left:auto}
.v-row2{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:22px; padding-top:18px; border-top:1px solid var(--linie)}
@media (max-width:600px){ .v-row2{grid-template-columns:1fr 1fr} .v-top{align-items:flex-start; flex-direction:column; gap:12px} .v-right{margin-left:0} }
.dgrid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:22px; padding-top:18px; border-top:1px solid var(--linie)}
.actions2{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0 28px}

/* Historie */
.entry{background:var(--bg-surface); border:1px solid var(--linie); border-radius:var(--r-l); padding:20px; margin-bottom:12px; box-shadow:var(--sch-1)}
.e-hd{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.e-date{font-family:var(--ui); font-weight:600; font-size:15px; font-variant-numeric:tabular-nums}
.e-w{font-family:var(--ui); font-size:14px; color:var(--rauch)}
.e-hd .seg{margin-left:auto}
.chips-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.mchip{font-family:var(--ui); background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-s); padding:6px 10px; font-size:13px; color:var(--rauch); font-weight:500}
.mchip b{color:var(--anthrazit); font-weight:600; margin-left:4px; font-variant-numeric:tabular-nums}
.e-give{font-family:var(--ui); font-size:14px; display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.e-give .p{color:var(--blatt); font-weight:600}
.e-give .m{color:var(--fehler); font-weight:600}
.e-note{font-family:var(--ui); font-size:15px; color:var(--anthrazit); line-height:1.6; padding:14px; background:var(--flaeche); border-radius:var(--r-m); border:1px solid var(--linie)}
.treat{display:flex; align-items:center; gap:12px; background:var(--bg-surface); border:1px solid var(--linie); border-radius:var(--r-l); padding:16px 18px; margin-bottom:10px; box-shadow:var(--sch-1)}
.treat .ic{width:38px; height:38px; border-radius:var(--r-s); background:var(--info-soft); color:var(--propolis); display:grid; place-items:center; flex:0 0 auto}
.treat b{font-family:var(--ui); display:block; font-size:15px}
.treat span{font-family:var(--ui); font-size:13px; color:var(--rauch)}
.treat .d{margin-left:auto; font-family:var(--ui); font-size:13px; color:var(--rauch); font-variant-numeric:tabular-nums}

/* Produktion */
.c-hd{display:flex; align-items:flex-start; gap:16px}
.c-id{font-family:var(--daten); font-size:12px; font-weight:600; letter-spacing:.05em; color:var(--rauch); background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-s); padding:4px 8px; display:inline-block; margin-bottom:8px}
.c-sorte{font-family:var(--ui); font-size:22px; font-weight:700; letter-spacing:-.4px; margin-bottom:4px}
.c-sub{font-family:var(--ui); font-size:14px; color:var(--rauch)}
.c-hd .pill{margin-left:auto; flex:0 0 auto}
.bar{height:6px; border-radius:3px; background:var(--linie); margin:22px 0 12px; overflow:hidden}
.bar i{display:block; height:100%; background:linear-gradient(90deg,#EFC15E,var(--honig)); border-radius:3px}
.bar-lbl{display:flex; justify-content:space-between; font-family:var(--ui); font-size:13px; font-weight:500; color:var(--rauch); font-variant-numeric:tabular-nums}
.c-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:22px; padding-top:18px; border-top:1px solid var(--linie)}
@media (max-width:600px){ .c-grid{grid-template-columns:1fr 1fr} }
.hist-row{display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--linie); font-family:var(--ui); font-size:15px}
.hist-row:last-child{border-bottom:none}
.hist-row .sign{width:32px; height:32px; border-radius:var(--r-s); display:grid; place-items:center; font-weight:600; font-size:16px; flex:0 0 auto; background:var(--flaeche); border:1px solid var(--linie)}
.hist-row .sign.p{color:var(--blatt); background:var(--accent-soft); border-color:transparent}
.hist-row .d{margin-left:auto; color:var(--rauch); font-variant-numeric:tabular-nums; font-size:14px}

/* Gläser */
.jars{display:grid; grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); gap:8px; margin-bottom:12px}
.jar{aspect-ratio:1; border-radius:var(--r-s); border:1.5px solid var(--linie-stark); background:var(--bg-surface); font-family:var(--daten); font-size:12px; font-weight:600; color:var(--rauch); cursor:pointer; transition:transform .1s}
.jar:active{transform:scale(.94)}
.jar.st-im_lager, .jar.st-Lager{background:var(--accent-soft); border-color:transparent; color:var(--blatt)}
.jar.st-verkauf, .jar.st-Verkauf{background:var(--bg-surface); border-color:var(--linie); color:var(--text-faint)}
.jar.st-geschenk, .jar.st-Geschenk{background:var(--bg-surface); border-color:var(--anthrazit); color:var(--anthrazit)}
.jar.st-eigenbedarf, .jar.st-Eigenbedarf{background:var(--bg-surface); border-color:var(--warn); color:var(--warn)}
.jar.st-bruch, .jar.st-Bruch{background:var(--bg-surface); border-color:var(--fehler); color:var(--fehler)}
.jar-legend{display:flex; gap:14px; flex-wrap:wrap; font-family:var(--ui); font-size:12.5px; color:var(--rauch); margin-bottom:8px}
.jar-legend span{display:inline-flex; align-items:center; gap:6px}
.jar-legend i{width:12px; height:12px; border-radius:4px; border:1.5px solid; display:inline-block}

/* Lager */
.search{display:flex; align-items:center; gap:12px; background:var(--bg-surface); border:1px solid var(--linie); border-radius:var(--r-l); padding:14px 18px; margin-bottom:18px; transition:border-color .2s; box-shadow:var(--sch-1)}
.search:focus-within{border-color:var(--border-focus)}
.search input{border:none; outline:none; background:none; font-family:var(--ui); font-size:16px; flex:1; color:var(--anthrazit)}
.search input::placeholder{color:var(--text-faint)}
.search svg{flex:0 0 auto; color:var(--text-faint)}
.good{display:flex; align-items:center; gap:16px; background:var(--bg-surface); border:1px solid var(--linie); border-radius:var(--r-xl); padding:18px; margin-bottom:12px; cursor:pointer; transition:border-color .2s, box-shadow .2s, transform .1s; box-shadow:var(--sch-1)}
.good:hover{border-color:var(--linie-stark); box-shadow:var(--sch-2)}
.good:active{transform:scale(.99)}
.gthumb{width:54px; height:54px; border-radius:var(--r-m); background:var(--flaeche); border:1px solid var(--linie); flex:0 0 auto; display:grid; place-items:center; font-family:var(--ui); font-weight:700; font-size:24px; color:var(--rauch); overflow:hidden}
.gthumb img{width:100%; height:100%; object-fit:cover}
.g-name{font-family:var(--ui); font-weight:600; font-size:16px; margin-bottom:6px}
.g-tags{display:flex; gap:6px; flex-wrap:wrap}
.tagc{font-family:var(--ui); font-size:12px; font-weight:600; color:var(--rauch); background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-s); padding:4px 8px}
.g-right{margin-left:auto; text-align:right; flex:0 0 auto}
.g-total{font-family:var(--daten); font-weight:600; font-size:20px; font-variant-numeric:tabular-nums}
.g-sub{font-family:var(--ui); font-size:13px; color:var(--text-faint); margin-top:2px}
.area{margin-bottom:24px}
.area-hd{font-family:var(--ui); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); font-weight:600; margin-bottom:12px; display:flex; align-items:center; gap:12px}
.area-hd::after{content:""; flex:1; height:1px; background:var(--linie)}
.item{display:flex; align-items:center; gap:16px; padding:14px; border-radius:var(--r-l); border:1px solid transparent; cursor:pointer; transition:background .2s, border-color .2s}
.item:hover{background:var(--bg-surface-hover); border-color:var(--linie); box-shadow:var(--sch-1)}
.i-qty{font-family:var(--daten); font-weight:600; font-size:16px; min-width:48px; height:40px; flex:0 0 auto; display:grid; place-items:center; border-radius:var(--r-s); background:var(--bg-surface); border:1px solid var(--linie); padding:0 12px; font-variant-numeric:tabular-nums; box-shadow:var(--sch-1)}
.i-name{font-family:var(--ui); font-weight:600; font-size:16px}
.i-note{font-family:var(--ui); font-size:14px; color:var(--rauch); margin-top:4px}
.i-right{margin-left:auto; display:flex; align-items:center; gap:16px; flex:0 0 auto}
.i-badge{font-family:var(--ui); font-size:12px; font-weight:600; color:var(--warn); background:var(--warn-soft); border-radius:var(--r-s); padding:6px 10px; border:none; cursor:pointer; text-transform:uppercase; letter-spacing:.02em}
.empty{text-align:center; color:var(--text-faint); padding:44px 16px; font-family:var(--ui); font-size:15px; border:2px dashed var(--linie); border-radius:var(--r-xl); font-weight:500}
.tag-edit{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.tagx{display:inline-flex; align-items:center; gap:6px; font-family:var(--ui); font-size:13px; font-weight:600; color:var(--anthrazit); background:var(--flaeche); border:1px solid var(--linie); border-radius:99px; padding:6px 8px 6px 12px}
.tagx button{border:none; background:none; cursor:pointer; color:var(--text-faint); display:grid; place-items:center}
.tag-add, .om-row{display:flex; gap:8px}
.tag-add input, .om-row input{flex:1}

/* App-Formfelder */
.f{margin-bottom:22px}
.f label{display:block; font-family:var(--ui); font-size:12.5px; font-weight:600; color:var(--rauch); margin-bottom:10px; text-transform:uppercase; letter-spacing:.05em}
.f input, .f select, .f textarea{width:100%; border:1px solid var(--linie-stark); border-radius:var(--r-m); background:var(--bg-surface); padding:14px 16px; font-family:var(--ui); font-size:16px; color:var(--anthrazit); appearance:none; transition:border-color .2s, box-shadow .2s; box-shadow:var(--sch-1)}
.f input:focus, .f select:focus, .f textarea:focus{outline:none; border-color:var(--border-focus); box-shadow:0 0 0 4px rgba(226,163,43,.22)}
.f textarea{resize:vertical; min-height:84px}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.fhint{font-family:var(--ui); font-size:12.5px; font-weight:600; margin-top:8px}
.fhint.ok{color:var(--blatt)} .fhint.warn{color:var(--warn)} .fhint.bad{color:var(--fehler)}

/* Segment-Control */
.segc{display:flex; background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-m); padding:4px; gap:4px; flex-wrap:wrap}
.segc button{flex:1 1 auto; min-width:80px; border:none; background:transparent; border-radius:var(--r-s); padding:10px; font-family:var(--ui); font-size:14px; font-weight:600; color:var(--rauch); cursor:pointer; transition:all .2s; min-height:44px}
.segc button:hover{color:var(--anthrazit)}
.segc button.on{background:var(--bg-surface); color:var(--anthrazit); box-shadow:var(--sch-1); border:1px solid var(--linie)}
.qchips{display:flex; gap:8px; flex-wrap:wrap}
.qchips button{border:1px solid var(--linie-stark); background:var(--bg-surface); border-radius:99px; padding:10px 16px; font-family:var(--ui); font-size:14px; font-weight:600; color:var(--rauch); cursor:pointer; transition:all .2s; box-shadow:var(--sch-1)}
.qchips button:hover{border-color:var(--text-faint); color:var(--anthrazit)}
.qchips button.on{background:var(--honig); border-color:var(--honig); color:var(--anthrazit); box-shadow:none}

/* Bewertung 1-4 */
.rate-row{display:flex; align-items:center; gap:16px; margin-bottom:12px}
.rate-row>span{font-family:var(--ui); font-size:15px; font-weight:500; width:118px; flex:0 0 auto}
.rate{display:flex; gap:8px; flex:1}
.rate button{flex:1; height:44px; border:1px solid var(--linie-stark); border-radius:var(--r-s); background:var(--bg-surface); font-family:var(--daten); font-size:16px; font-weight:600; color:var(--rauch); cursor:pointer; transition:all .2s; box-shadow:var(--sch-1)}
.rate button:hover{border-color:var(--text-faint); color:var(--anthrazit)}
.rate button.on{background:var(--anthrazit); border-color:var(--anthrazit); color:#fff; box-shadow:none}
@media (max-width:400px){ .rate-row>span{width:92px; font-size:14px} .segc button{min-width:68px; font-size:13px; padding:9px 8px} }

/* Stepper */
.fstep{display:flex; align-items:center; justify-content:space-between; background:var(--bg-surface); border:1px solid var(--linie-stark); border-radius:var(--r-m); padding:6px; box-shadow:var(--sch-1)}
.fstep button{width:44px; height:44px; border-radius:var(--r-s); border:none; background:var(--flaeche); font-size:20px; font-weight:500; color:var(--anthrazit); cursor:pointer; transition:background .2s}
.fstep button:hover{background:var(--linie)}
.fstep b{font-family:var(--daten); font-size:18px; font-weight:600; font-variant-numeric:tabular-nums}
.fstep b small{font-size:13px; color:var(--rauch); font-family:var(--ui); margin-left:4px}
.qty-edit{display:flex; align-items:center; justify-content:center; gap:32px; margin:16px 0 22px}
.qty-edit button{width:56px; height:56px; border-radius:50%; border:1px solid var(--linie-stark); background:var(--bg-surface); font-size:28px; font-weight:500; color:var(--anthrazit); cursor:pointer; box-shadow:var(--sch-1); transition:transform .1s}
.qty-edit button:active{transform:scale(.95); background:var(--flaeche)}
.qty-val{font-family:var(--daten); font-size:36px; font-weight:500; min-width:80px; text-align:center; font-variant-numeric:tabular-nums}

/* QR / Kundenansicht */
.qr-wrap{display:flex; gap:18px; align-items:center; background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-l); padding:18px}
#qrBox{width:108px; height:108px; flex:0 0 auto; background:#fff; border-radius:var(--r-m); display:grid; place-items:center; padding:6px; box-shadow:var(--sch-1)}
#qrBox img, #qrBox canvas{display:block}
.qr-info{font-family:var(--ui); font-size:13px; color:var(--rauch); line-height:1.5}
.qr-info b{color:var(--anthrazit); font-size:14px}
.qr-info span{font-family:var(--daten); font-size:11px; word-break:break-all; color:var(--propolis)}
.consumer{border:1px solid var(--linie); border-radius:var(--r-xl); overflow:hidden; margin-top:12px; background:var(--bg-surface); box-shadow:var(--sch-1)}
.cons-hd{background:var(--anthrazit); color:#fff; padding:28px 24px; text-align:center}
.cons-hd .brand{justify-content:center; font-family:var(--ui); font-weight:700; font-size:15px; color:#E7C98A; display:block}
.cons-hd .sorte{font-family:var(--ui); font-size:24px; font-weight:700; letter-spacing:-.4px; margin:6px 0 2px}
.cons-hd .sub{font-family:var(--ui); font-size:13px; opacity:.8}
.cons-body{padding:8px 24px 20px}
.cons-row{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--linie); font-family:var(--ui); font-size:14px}
.cons-row span{color:var(--rauch)}
.cons-row b{font-variant-numeric:tabular-nums}
.cons-note{font-family:var(--ui); font-size:13px; color:var(--rauch); line-height:1.6; margin-top:14px; padding:14px; background:var(--flaeche); border-radius:var(--r-m)}
.stat-btns{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.stat-btns button{padding:14px; border:1px solid var(--linie-stark); background:var(--bg-surface); border-radius:var(--r-m); font-family:var(--ui); font-weight:600; font-size:14px; cursor:pointer; color:var(--anthrazit); box-shadow:var(--sch-1); transition:all .2s}
.stat-btns button:hover{border-color:var(--text-faint)}
.stat-btns button.full{grid-column:1 / -1; background:var(--accent-soft); color:var(--blatt); border-color:transparent}
.imgs{display:flex; gap:10px; flex-wrap:wrap}
.imgt{position:relative; width:72px; height:72px; border-radius:var(--r-m); overflow:hidden; border:1px solid var(--linie)}
.imgt img{width:100%; height:100%; object-fit:cover}
.imgt button{position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; border:none; background:rgba(29,26,22,.7); color:#fff; cursor:pointer; display:grid; place-items:center}
.img-add{width:72px; height:72px; border-radius:var(--r-m); border:2px dashed var(--linie-stark); background:var(--flaeche); color:var(--text-faint); cursor:pointer; display:grid; place-items:center}

/* Toast */
.toast{position:fixed; left:50%; transform:translate(-50%,10px); bottom:104px; z-index:70; background:var(--anthrazit); color:#fff; font-family:var(--ui); font-size:15px; font-weight:600; padding:14px 26px; border-radius:99px; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; box-shadow:var(--sch-2); max-width:calc(100% - 32px); text-align:center}
.toast.show{opacity:1; transform:translate(-50%,0)}