/* ===========================================================================
   Markenregal der AUREON-App
   Baut auf guideline-app.css auf (dieselben Tokens, dieselbe Formsprache).
   =========================================================================== */

/* --- Kopfzeile mit aktiver Marke ----------------------------------------- */
.kopf__marke{
  display:flex; align-items:center; gap:8px; flex:1; min-width:0;
  padding:5px 9px 5px 5px; border-radius:var(--r-pille);
  background:var(--flaeche-2); border:1px solid var(--linie);
  transition:background .18s, transform .18s var(--kurve);
}
.kopf__marke:active{ transform:scale(.97); }
.kopf__marke img{
  width:24px; height:24px; flex:none; border-radius:7px;
  object-fit:contain; background:#fff; padding:2px;
}
.kopf__marke b{
  font-size:13.5px; font-weight:700; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.kopf__marke svg{ width:13px; height:13px; flex:none; color:var(--text-still); }

/* --- Regal ---------------------------------------------------------------- */
.regal{ display:grid; gap:10px; }

.marke{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:14px; border-radius:var(--r-karte);
  background:var(--flaeche); border:1px solid var(--linie);
  transition:border-color .2s, transform .28s var(--kurve-feder), box-shadow .28s;
}
.marke:active{ transform:scale(.985); }
@media (hover:hover){
  .marke:hover{ border-color:rgba(232,192,122,.4); transform:translateY(-3px);
                box-shadow:0 16px 34px -22px rgba(0,0,0,.7); }
}
.marke__bild{
  width:48px; height:48px; flex:none; border-radius:12px;
  background:#fff; display:grid; place-items:center; padding:6px;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.6);
}
.marke__bild img{ width:100%; height:100%; object-fit:contain; }
.marke__t{ flex:1; min-width:0; }
.marke__name{
  display:block; font-family:var(--anzeige); font-size:15.5px; font-weight:800;
  letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.marke__kurz{
  display:block; font-size:11.5px; color:var(--text-still); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.marke__pfeil{ width:16px; height:16px; flex:none; color:var(--text-still); }

/* Freier Platz - traegt bewusst KEINEN Namen. Er behauptet nichts, er zeigt
   nur, dass hier mehr hineinpasst. */
.platz{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:14px; border-radius:var(--r-karte);
  background:transparent; border:1px dashed var(--linie);
  transition:border-color .2s, background .2s;
}
.platz:active{ background:var(--flaeche-2); }
@media (hover:hover){ .platz:hover{ border-color:rgba(232,192,122,.35); } }
.platz__bild{
  width:48px; height:48px; flex:none; border-radius:12px;
  background:var(--flaeche-2); display:grid; place-items:center;
  color:var(--text-still);
}
.platz__bild svg{ width:19px; height:19px; }
.platz__t{ flex:1; min-width:0; }
.platz__name{ display:block; font-size:13.5px; font-weight:700; color:var(--text-leise); }
.platz__kurz{ display:block; font-size:11.5px; color:var(--text-still); margin-top:2px; }

/* --- Codeeingabe ---------------------------------------------------------- */
.code{ margin-top:6px; }
.code__feld{ display:flex; gap:9px; align-items:stretch; }
.code__ein{
  flex:1; min-width:0; min-height:52px; padding:12px 15px;
  font-family:var(--anzeige); font-size:16px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text);
  background:var(--flaeche-2); border:1px solid var(--linie);
  border-radius:14px; outline:none;
  transition:border-color .18s, background .18s;
  -webkit-appearance:none; appearance:none;
}
.code__ein::placeholder{ letter-spacing:.06em; font-weight:700; color:var(--text-still); text-transform:none; }
.code__ein:focus{ border-color:rgba(232,192,122,.55); background:var(--flaeche); }
.code__ein[aria-invalid="true"]{ border-color:var(--rot); }
.code__los{
  flex:none; width:52px; border-radius:14px; background:var(--rot); color:#fff;
  display:grid; place-content:center;
  transition:transform .18s var(--kurve), opacity .18s;
}
.code__los:active{ transform:scale(.94); }
.code__los[disabled]{ opacity:.4; pointer-events:none; }
.code__los svg{ width:19px; height:19px; }
.code__dreher{
  width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(255,255,255,.3); border-top-color:#fff;
  animation:codeDreh .7s linear infinite;
}
@keyframes codeDreh{ to{ transform:rotate(360deg) } }
html.ruht .code__dreher{ animation-play-state:paused; }

.code__meldung{
  display:flex; align-items:flex-start; gap:9px;
  padding:11px 13px; border-radius:12px; margin-top:10px;
  font-size:12.5px; line-height:1.45;
}
.code__meldung svg{ width:15px; height:15px; flex:none; margin-top:2px; }
.code__meldung--fehler{ background:rgba(229,20,42,.11); color:var(--rot); }
.code__meldung--gut{ background:rgba(74,222,128,.11); color:var(--gruen); }

.regal__zahl{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--text-still); }
.regal__punkt{ width:6px; height:6px; border-radius:50%; background:var(--gruen); flex:none; }

/* --- Gesperrter Bereich (noch keine Marke gewaehlt) ----------------------- */
.gesperrt{ text-align:center; padding:34px 18px; border:1px dashed var(--linie); border-radius:var(--r-karte); }
.gesperrt__sym{
  width:52px; height:52px; border-radius:15px; margin:0 auto 14px;
  background:var(--flaeche-2); color:var(--text-still); display:grid; place-content:center;
}
.gesperrt__sym svg{ width:22px; height:22px; }
.gesperrt h2{ font-family:var(--anzeige); font-size:18px; font-weight:800; margin:0 0 7px; }
.gesperrt p{ font-size:13px; color:var(--text-leise); margin:0 0 16px; line-height:1.55; }

/* ===========================================================================
   DASHBOARD  —  1:1 aus dashboard.html, in App-Form
   Die Seitenleiste der Seite wird hier zur waagerechten Chipreihe: dieselben
   sieben Ansichten, dieselbe Reihenfolge, dieselben Zaehlerblasen.
   Kachel-, Karten- und Balkenmasse sind unveraendert aus dashboard.html.
   =========================================================================== */
.dchips{ display:flex; gap:8px; overflow-x:auto; padding:2px 14px 12px; margin:0 -14px;
         scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.dchips::-webkit-scrollbar{ display:none; }
.dchip{
  position:relative; flex:none; padding:9px 14px; border-radius:var(--r-pille);
  background:var(--flaeche-2); border:1px solid var(--linie);
  font-size:12.5px; font-weight:700; color:var(--text-leise); white-space:nowrap;
  transition:background .18s, color .18s, border-color .18s, transform .18s var(--kurve-feder);
}
.dchip:active{ transform:scale(.96); }
.dchip[aria-pressed="true"]{ background:rgba(229,20,42,.13); border-color:rgba(229,20,42,.3); color:var(--text); }
.dchip__zahl{
  display:inline-grid; place-content:center; margin-left:6px;
  min-width:17px; height:17px; padding:0 5px; border-radius:var(--r-pille);
  background:var(--rot); color:#fff; font-size:9.5px; font-weight:800; line-height:1;
}

/* Kennzahl-Kacheln - Masse 1:1 aus dashboard.html */
.zahlen{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.kachel{
  background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--r-karte); padding:13px 13px 14px;
  transition:border-color .2s, transform .28s var(--kurve-feder), box-shadow .28s;
}
@media (hover:hover){
  .kachel:hover{ border-color:rgba(229,20,42,.28); transform:translateY(-5px) scale(1.02);
                 box-shadow:0 18px 40px -22px rgba(0,0,0,.7); }
}
.kachel__kopf{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.kachel__sym{ width:30px; height:30px; border-radius:9px; display:grid; place-content:center; }
.kachel__sym svg{ width:15px; height:15px; }
.kachel__was{ font-size:11px; line-height:1.35; color:var(--text-leise); font-weight:600; margin:0 0 3px; }
.kachel__wert{
  font-family:var(--anzeige); font-size:21px; font-weight:800; letter-spacing:-.02em;
  margin:0; line-height:1.1; font-variant-numeric:tabular-nums;
}
.kachel__wert small{ font-size:12px; font-weight:600; color:var(--text-still); }
.kachel__note{ font-size:10.5px; color:var(--text-still); margin:5px 0 0; }

/* Balken 1:1 aus dashboard.html */
.balken{ margin-bottom:14px; }
.balken:last-child{ margin-bottom:0; }
.balken__kopf{ display:flex; justify-content:space-between; gap:8px; font-size:12.5px; margin-bottom:6px; }
.balken__kopf b{ font-weight:700; font-variant-numeric:tabular-nums; }
.balken__bahn{ height:7px; border-radius:99px; background:var(--flaeche-2); overflow:hidden; }
.balken__fuell{ height:100%; border-radius:99px; transition:width .8s var(--kurve-weich); }

/* Erfolge */
.erfolg{ display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--linie); }
.erfolg:last-child{ border-bottom:0; }
.erfolg__ring{
  width:30px; height:30px; flex:none; border-radius:50%;
  border:2px solid var(--linie); display:grid; place-content:center;
  color:var(--text-still); font-size:10px; font-weight:800;
}
.erfolg[data-da="1"] .erfolg__ring{ border-color:var(--gruen); color:var(--gruen); }
.erfolg__t{ flex:1; min-width:0; }
.erfolg__n{ display:block; font-size:13.5px; font-weight:600; }
.erfolg__d{ display:block; font-size:11.5px; color:var(--text-still); margin-top:1px; }
.erfolg__p{ flex:none; font-size:11.5px; font-weight:700; color:var(--text-still); font-variant-numeric:tabular-nums; }

/* Videostand */
.vstand{ display:flex; align-items:baseline; gap:6px; margin-bottom:12px; }
.vstand__gross{ font-family:var(--anzeige); font-size:34px; font-weight:800; letter-spacing:-.02em; line-height:1; }
.vstand__von{ font-size:13px; color:var(--text-still); font-weight:600; }
.vdrei{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.vdrei > div{ background:var(--flaeche-2); border-radius:11px; padding:10px; text-align:center; }
.vdrei b{ display:block; font-family:var(--anzeige); font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; }
.vdrei span{ display:block; font-size:10.5px; color:var(--text-still); margin-top:2px; }

/* Betreuer */
.betreuer{ display:flex; align-items:center; gap:-6px; margin-bottom:11px; }
.betreuer__k{
  width:38px; height:38px; border-radius:50%; margin-right:-8px;
  background:var(--flaeche-2); border:2px solid var(--flaeche);
  display:grid; place-content:center; font-size:12px; font-weight:800; color:var(--text-leise);
}

/* Schalter */
.schalter{ display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--linie); }
.schalter:last-child{ border-bottom:0; }
.schalter__t{ flex:1; min-width:0; }
.schalter__n{ display:block; font-size:13.5px; font-weight:600; }
.schalter__d{ display:block; font-size:11.5px; color:var(--text-still); margin-top:2px; line-height:1.45; }
.schalter__k{
  flex:none; width:46px; height:27px; border-radius:99px; margin-top:2px;
  background:var(--flaeche-2); border:1px solid var(--linie); position:relative;
  transition:background .24s var(--kurve), border-color .24s;
}
.schalter__k::after{
  content:""; position:absolute; top:2px; left:2px; width:21px; height:21px;
  border-radius:50%; background:var(--text-still);
  transition:transform .24s var(--kurve-feder), background .24s;
}
.schalter__k[aria-pressed="true"]{ background:rgba(74,222,128,.22); border-color:rgba(74,222,128,.45); }
.schalter__k[aria-pressed="true"]::after{ transform:translateX(19px); background:var(--gruen); }