/* ===========================================================================
   hidden schlaegt ALLES (V13.18)

   Das Attribut `hidden` kommt aus dem Browser-Standardstylesheet, und das
   verliert gegen jede Regel aus dieser Datei. `.lob-form{display:flex}` hat
   deshalb das versteckte Lob-Formular trotzdem angezeigt - der Knopf zum
   Aufklappen war da, aber es war ja schon offen.

   Beim Schieber (V12.91) habe ich das damals einzeln geflickt
   (.auto-pfeil[hidden]). Das hier gilt fuer alles, auch fuer das naechste
   Mal.
   =========================================================================== */
[hidden]{display:none !important}

:root{
  --bg:#0b1120; --bg2:#131c31; --card:#16203a; --card2:#1d2a47;
  --ink:#e2e8f0; --muted:#94a3b8; --line:#2b3a58;
  --accent:#38bdf8; --accent2:#22d3ee; --good:#34d399; --warn:#fbbf24; --bad:#f87171;
  --grad:linear-gradient(135deg,#38bdf8,#34d399);
  --radius:14px;
  /* Hoehe der Topbar. Daran haengen das Seitenmenue und die klebende
     Tabellen-Kopfzeile – beide muessen genau darunter halten. */
  --topbar-h:3.75rem;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(52,211,153,.10), transparent 60%),
    radial-gradient(900px 520px at -10% -5%, rgba(56,189,248,.14), transparent 60%),
    linear-gradient(180deg,#0d1526 0%, var(--bg) 45%);
  background-attachment:fixed;
  color:var(--ink); line-height:1.5; min-height:100vh;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}
h1{font-size:1.5rem;margin:.2rem 0 1rem;
  background:linear-gradient(90deg,#e2e8f0,#7dd3fc);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
h2{font-size:1.15rem;margin:.2rem 0 .8rem}
.req{color:var(--accent);font-weight:700}

/* Topbar
   WICHTIG: backdrop-filter darf NICHT direkt auf .topbar liegen – es macht die
   Topbar zum Containing Block fuer position:fixed-Kinder, wodurch das mobile
   Burger-Panel (.mainnav) auf Header-Hoehe eingeklemmt wird. Deshalb liegt der
   Blur auf einem ::before-Pseudo-Element (hat keine Kinder). */
.topbar{background:transparent;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.topbar::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(15,23,42,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.topbar::after{content:"";display:block;height:2px;background:var(--grad);opacity:.65}
.topbar-inner{display:flex;align-items:center;gap:.6rem;padding:.55rem .9rem;max-width:1280px;margin:0 auto}
.brand{font-weight:700;font-size:1.1rem;color:var(--ink);white-space:nowrap;display:flex;align-items:center;gap:.45rem}
.brand:hover{text-decoration:none}
.brandlogo{width:26px;height:26px;border-radius:7px;display:block}
.btn-ghost{border:1px solid var(--line);border-radius:8px;padding:.25rem .6rem}

/* Hauptnavigation – am Rechner eine feste Spalte links (V12.16).
   Sie klebt beim Scrollen mit, statt oben wegzulaufen. Einklappen gibt es
   bewusst nicht: Der Platz ist da, und ein Menue, das man erst aufmachen muss,
   kostet bei jedem Wechsel einen Klick. */
.shell{display:flex;align-items:flex-start;gap:1.2rem;max-width:1280px;margin:0 auto}
.mainnav{display:flex;flex-direction:column;gap:.1rem;align-items:stretch;
  flex:0 0 232px;width:232px;position:sticky;top:var(--topbar-h);max-height:calc(100vh - 4.4rem);
  overflow-y:auto;padding:1.2rem .5rem 1rem}
.mainnav a{display:flex;align-items:flex-start;gap:.5rem;color:var(--muted);font-size:.92rem;
  padding:.42rem .6rem;border-radius:8px;line-height:1.3}
.mainnav a .ic{font-size:1.05rem;width:1.5rem;text-align:center;flex:0 0 auto}
/* Lange Bezeichnungen ("eCharge App Einstellungen") duerfen umbrechen statt
   abgeschnitten zu werden – abgeschnittene Menuepunkte kann man nicht lesen. */
.mainnav a .lbl{white-space:normal;overflow-wrap:anywhere}
.mainnav a:hover{color:var(--ink);background:var(--card2);text-decoration:none}
.mainnav a.active{color:var(--ink);font-weight:600;
  background:linear-gradient(90deg,rgba(56,189,248,.22),rgba(52,211,153,.16))}
.navgruppe{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  opacity:.75;padding:.9rem .65rem .25rem}
.navgruppe:first-child{padding-top:.2rem}
.navsep{height:1px;background:var(--line);margin:.45rem .3rem}

/* Burger (nur mobil) */
.burger{display:none;flex-direction:column;gap:4px;background:transparent;border:0;cursor:pointer;padding:.35rem;border-radius:8px}
.burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Profil-Dropdown */
.profile{position:relative;margin-left:auto}
.profile-btn{display:inline-flex;align-items:center;gap:.45rem;background:var(--card2);border:1px solid var(--line);
  border-radius:999px;padding:.25rem .5rem .25rem .3rem;color:var(--ink);cursor:pointer;font-size:.9rem}
.profile-btn:hover{border-color:var(--accent)}
.avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#04293a;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.pname{max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.caret{color:var(--muted);font-size:.8rem}
.profile-menu{position:absolute;right:0;top:calc(100% + .4rem);min-width:210px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.5);padding:.4rem;
  display:none;flex-direction:column;gap:.15rem;z-index:60}
.profile-menu.open{display:flex}
.pm-head{padding:.5rem .6rem;border-bottom:1px solid var(--line);margin-bottom:.2rem;font-size:.92rem}
.pm-item{display:block;text-align:left;width:100%;background:transparent;border:0;color:var(--ink);
  padding:.55rem .6rem;border-radius:8px;font-size:.92rem;cursor:pointer}
.pm-item:hover{background:var(--card2);text-decoration:none}

.navscrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50}
.navscrim.show{display:block}

@media(max-width:980px){
  .burger{display:flex}
  .brand-txt{display:none}
  .pname{display:none}
  .shell{display:block}
  /* Die Schublade beginnt UNTER der Kopfzeile, nicht bei 0.
     Vorher lag ihr erster Eintrag hinter der Leiste (die hat z-index 60, die
     Schublade 50) – „Dashboard" war oben angeschnitten. Ein blosser
     Innenabstand haette es auch verdeckt, aber beim Scrollen in der Liste
     waere der erste Eintrag wieder darunter gewandert. Unter der Leiste
     anzufangen stimmt in jeder Stellung – und das ✕ zum Schliessen bleibt
     sichtbar und anklickbar. */
  .mainnav{position:fixed;top:var(--topbar-h);left:0;bottom:0;width:80vw;max-width:300px;flex:0 0 auto;
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:.1rem;background:var(--bg2);
    border-right:1px solid var(--line);max-height:none;
    padding:.9rem .6rem 1.5rem;transform:translateX(-100%);transition:transform .28s ease;z-index:50;overflow-y:auto}
  /* Auf iPhones mit Insel oder Kerbe kommt der sichere Bereich noch dazu.
     Eigene Zeile, damit ein Browser ohne env() die Zeile darueber behaelt. */
  .mainnav{top:calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
    padding-bottom:calc(1.5rem + env(safe-area-inset-bottom, 0px))}
  .mainnav.open{transform:translateX(0)}
  .mainnav a{font-size:1rem;padding:.7rem .7rem}
  .mainnav a .ic{font-size:1.2rem;width:1.6rem;text-align:center}
  .navsep{width:auto;height:1px;margin:.4rem .2rem}
}

.wrap{flex:1 1 auto;min-width:0;max-width:1000px;margin:0 auto;padding:1.2rem 1rem 3rem}
.foot{text-align:center;color:var(--muted);padding:1.5rem;font-size:.85rem}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:1rem 0}
.card{background:linear-gradient(160deg,var(--card2) 0%,var(--card) 55%);
  border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;
  box-shadow:0 8px 24px rgba(2,8,23,.35);
  transition:transform .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-2px);border-color:#3b5378}
.card.big{grid-column:span 2}
.card.accent{background:linear-gradient(135deg,#0c4a6e,#155e75);border-color:#0e7490}
.card-label{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.card-value{font-size:1.8rem;font-weight:700;margin-top:.25rem}
.card-value.small{font-size:1.1rem}
.card-sub{color:var(--muted);font-size:.85rem;margin-top:.2rem}
/* Preis-Kachel wird per JS eingefärbt (grün=PV .. orange=Netz); Sub-Text hell lesbar */
.price-card{transition:background .4s ease,border-color .4s ease}
.price-card .card-label,.price-card .card-sub{color:rgba(255,255,255,.85)}

/* Smartphone: mindestens zwei Kacheln nebeneinander */
@media(max-width:560px){
  .cards{grid-template-columns:repeat(2,1fr);gap:.55rem;margin:.7rem 0}
  .card{padding:.7rem .75rem}
  .card-value{font-size:1.35rem}
  .card-label{font-size:.72rem}
  .card.big{grid-column:1 / -1}
  .wrap{padding:1rem .7rem 3rem}
}

/* eCharge Control */
.echarge-control h2{color:var(--accent2)}
.ctl-actions{display:flex;flex-wrap:wrap;gap:.7rem 1rem;align-items:flex-end;margin-top:.4rem}
.ctl-actions .btn{margin-top:0}
.ctl-current{display:flex;gap:.5rem;align-items:flex-end}
.ctl-current label{margin:0}
.ctl-more{align-self:center;font-size:.9rem}
@media(max-width:560px){
  .ctl-actions{gap:.6rem}
  .ctl-actions>form{flex:1 1 100%}
  .ctl-actions .btn{width:100%}
  .ctl-current{flex:1 1 100%}
  .ctl-current select{flex:1}
}

.panel{background:linear-gradient(165deg,rgba(56,189,248,.05) 0%,transparent 30%),var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;margin:1.2rem 0;
  box-shadow:0 10px 30px rgba(2,8,23,.30)}

/* Status pill */
.pill{display:inline-block;padding:.15rem .6rem;border-radius:999px;font-size:.85rem;font-weight:600}
.pill.charging{background:linear-gradient(90deg,rgba(56,189,248,.20),rgba(52,211,153,.22));
  color:var(--good);border:1px solid rgba(52,211,153,.35)}
.pill.idle{background:rgba(148,163,184,.15);color:var(--muted)}

/* Hinweis: Ladestrom-Befehl unterwegs */
.pending-hint{display:inline-flex;align-items:center;gap:.3rem;color:var(--warn);font-size:.85rem;
  background:rgba(251,191,36,.10);border:1px solid rgba(251,191,36,.30);border-radius:999px;padding:.2rem .65rem}

/* Forms */
label{display:block;margin:.7rem 0 .2rem;font-size:.9rem;color:var(--muted)}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=date],
input[type=time],input[type=datetime-local],select,textarea{
  width:100%;padding:.6rem .7rem;background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:9px;font-size:1rem
}
input[type=date],input[type=time],input[type=datetime-local]{color-scheme:dark;font-family:inherit}
/* moderner Datum+Zeit-Picker */
.dtpick{position:relative}
.dtpick input[type=datetime-local]{padding:.7rem .8rem;font-size:1.05rem;font-variant-numeric:tabular-nums}
.dtpick input[type=datetime-local]::-webkit-calendar-picker-indicator{
  filter:invert(.7) sepia(1) saturate(4) hue-rotate(160deg);cursor:pointer;font-size:1.2rem}
/* Schieberegler sind ausgenommen: Ein Eingabefeld bekommt beim Hineinklicken
   sinnvollerweise einen Rahmen, ein Schieber sieht damit aus wie ein Fehler –
   und genau der blaue Kasten um den Zeitstrahl kam von hier. */
input:not([type=range]):focus,select:focus,textarea:focus{
  outline:2px solid var(--accent);border-color:var(--accent)}
.btn{display:inline-block;background:var(--grad);color:#04293a;border:0;border-radius:9px;
  padding:.6rem 1.1rem;font-size:1rem;font-weight:700;cursor:pointer;margin-top:.8rem;
  box-shadow:0 4px 14px rgba(56,189,248,.25);transition:filter .15s ease,transform .15s ease}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-danger{background:linear-gradient(135deg,#f87171,#fb923c);color:#3a0a0a;
  box-shadow:0 4px 14px rgba(248,113,113,.25)}
.btn-sm{padding:.35rem .7rem;font-size:.85rem;margin:0}
/* Fremder Ladevorgang: Knopf bleibt SICHTBAR (Transparenz, was gerade läuft),
   aber unmissverständlich ausgegraut und nicht anklickbar (siehe
   dashboard.php $canControl / control.php ctl_darf_steuern()). */
.btn:disabled,.btn[disabled],select:disabled{
  background:var(--panel,#1e293b)!important;color:var(--muted,#94a3b8)!important;
  box-shadow:none!important;cursor:not-allowed!important;opacity:.55;filter:none!important}
.btn:disabled:hover,.btn[disabled]:hover{transform:none;filter:none!important}
.row{display:flex;gap:1rem;flex-wrap:wrap}
.row>*{flex:1;min-width:160px}

/* Tables */
table{width:100%;border-collapse:collapse;margin:.5rem 0}
th,td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--line);font-size:.92rem}
th{color:var(--muted);font-weight:600}
tr:hover td{background:var(--card2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* Die Kopfzeile bleibt stehen, solange man in der Tabelle ist (V12.22).
   Drei Dinge muessen dafuer stimmen:

   1. Der Halt liegt UNTER der Topbar, nicht bei 0 – sonst verschwindet die
      Kopfzeile hinter ihr. Deshalb --topbar-h, dieselbe Groesse, an der auch
      das Seitenmenue haengt.
   2. Die Kopfzeile braucht einen eigenen, deckenden Hintergrund. Ohne ihn
      scrollen die Zeilen sichtbar durch sie hindurch – Tabellenzellen sind von
      Haus aus durchsichtig.
   3. Die Trennlinie kommt als box-shadow, NICHT als border. Bei
      border-collapse:collapse gehoert der Rand der Tabelle und nicht der
      Zelle; beim Kleben bleibt er zurueck und die Kopfzeile schwebt ohne
      Unterkante ueber den Daten.

   Der Selektor trifft bewusst nur die erste Zeile. Stuende hier bloss "th",
   klebte in einer Tabelle mit Zeilenkoepfen jede einzelne Zeile oben fest. */
thead th, tr:first-child > th{
  position:sticky; top:var(--topbar-h); z-index:5;
  background:var(--card); box-shadow:inset 0 -1px 0 var(--line)}

/* Breite Tabellen: eine Huelle, die NUR dann zum Scroll-Kasten wird, wenn die
   Tabelle wirklich nicht in die Breite passt.

   Das „nur dann" ist der Kern. overflow-x macht die Huelle zum
   Scroll-Container, und eine klebende Kopfzeile haelt sich danach an DIESEM
   Container statt an der Seite. Scrollt der Container selbst nicht, wandert
   die Kopfzeile beim Blaettern doch wieder aus dem Bild – genau daran ist sie
   hier beim ersten Anlauf gescheitert. Wird die Huelle dagegen zum Kasten mit
   eigener Hoehe, klebt die Kopfzeile an dessen Oberkante, und das ist genau
   das gewuenschte Verhalten.

   Ob eine Tabelle zu breit ist, weiss erst der Browser. Deshalb setzt eine
   Handvoll Zeilen in app.js die Klasse .rutscht – ohne JavaScript bleibt es
   beim bisherigen Verhalten (die Seite laeuft seitwaerts). */
.tabbox.rutscht{overflow:auto;max-height:calc(100vh - var(--topbar-h) - 3.5rem);
  border:1px solid var(--line);border-radius:10px}
.tabbox.rutscht thead th, .tabbox.rutscht tr:first-child > th{top:0}
/* Am Telefon nur seitwaerts: Ein Kasten mit eigener Hoehe waere dort ein
   zweites Scrollfeld auf einem ohnehin kleinen Schirm. */
@media(max-width:760px){ .tabbox.rutscht{max-height:none;overflow-y:visible} }

/* Lange Listen mit fester Kastenhoehe statt endlosem Wachsen (V12.39):
   die Ereignis-Liste („Was zuletzt passiert ist") und das KI-Protokoll
   („Letzte Aufrufe") zeigen von Haus aus nur noch ungefaehr 8 Zeilen und
   scrollen darunter WEITER, statt die Seite immer laenger zu machen.

   Anders als .tabbox.rutscht (nur bei zu breiten Tabellen, dann volle
   Resthoehe) ist das hier IMMER an, unabhaengig von der Breite - deshalb
   eigene Klassen statt einer weiteren Bedingung an .rutscht. Absichtlich
   NACH .tabbox.rutscht notiert: bei gleicher Anzahl Klassen im Selektor
   gewinnt bei einem Konflikt (Tabelle ist zugleich zu breit UND zu lang)
   die spaeter stehende Regel, hier also die feste Zeilenzahl-Hoehe statt
   der vollen Resthoehe.

   Zwei Groessen, weil die Ereignis-Liste durch die kleinen Vorschaubilder
   (.hist-mini, 44px hoch) deutlich hoehere Zeilen hat als eine reine
   Text-Tabelle wie das KI-Protokoll. */
.tabbox.scroll8-img{overflow:auto;max-height:34rem;border:1px solid var(--line);border-radius:10px}
.tabbox.scroll8-txt{overflow:auto;max-height:27rem;border:1px solid var(--line);border-radius:10px}
.tabbox.scroll8-img thead th, .tabbox.scroll8-img tr:first-child > th,
.tabbox.scroll8-txt thead th, .tabbox.scroll8-txt tr:first-child > th{top:0}

/* Zahl und Einheit (V12.22): „13,0" gross, „km/h" klein darunter. Die Spalte
   heisst dann nach der Sache statt nach der Einheit, und der Wert bleibt auch
   ohne Blick auf die Kopfzeile eindeutig. */
.wert{display:block}
.einh{display:block;font-size:.72rem;color:var(--muted);line-height:1.25}

/* Bars (simple analytics) */
.bar{height:10px;background:var(--line);border-radius:6px;overflow:hidden}
.bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--good))}

/* Chat */
.chatbox{max-height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:.6rem;padding:.2rem}
.chatmsg{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:.5rem .8rem;max-width:85%}
.chatmsg.mine{align-self:flex-end;background:#173a52;border-color:#1e4e6e}
.chatmeta{font-size:.78rem;margin-bottom:.15rem}
.chattext{white-space:pre-wrap;word-break:break-word}
.chatreacts{margin-top:.3rem;display:flex;gap:.3rem;flex-wrap:wrap;align-items:center}
.chip-react{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:.05rem .5rem;
  color:var(--ink);font-size:.85rem;cursor:pointer}
.chip-react.mine{border-color:var(--accent);background:rgba(56,189,248,.12)}
.chatreacts .palette{display:none;gap:.15rem}
.chatmsg:hover .palette{display:inline-flex}
.chip-pal{background:transparent;border:0;font-size:.95rem;cursor:pointer;opacity:.55;padding:0 .12rem}
.chip-pal:hover{opacity:1}

/* Badges */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem;margin:1rem 0}
.badge{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;text-align:center}
.badge.locked{opacity:.45;filter:grayscale(1)}
.badge-ic{font-size:2rem;line-height:1}
.badge-nm{font-weight:700;margin-top:.4rem}
.badge-ds{font-size:.82rem;margin-top:.2rem;min-height:2.4em}
.badge-dt{margin-top:.5rem;font-size:.85rem;color:var(--good)}
.badge.locked .badge-dt{color:var(--muted)}
.badgestrip{display:flex;flex-wrap:wrap;gap:.5rem;margin:.2rem 0 1rem}
.bchip{display:inline-flex;align-items:center;gap:.35rem;background:var(--card2);border:1px solid var(--line);
  border-radius:999px;padding:.3rem .7rem;font-size:.85rem;color:var(--ink)}
.bchip:hover{border-color:var(--accent);text-decoration:none}
.bchip.more{color:var(--muted)}

/* Diagramm */
.rangebar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.6rem 0 1rem}
.rangebar .spacer{flex:1}
.rbtn{display:inline-block;background:var(--card2);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:.4rem .8rem;font-size:.9rem;cursor:pointer}
.rbtn:hover{border-color:var(--accent);text-decoration:none}
.rbtn.active{background:var(--accent);color:#04293a;border-color:var(--accent);font-weight:700}
.chk{display:inline-flex;align-items:center;gap:.35rem;color:var(--muted);font-size:.9rem}
.chk input{width:auto}
.chartwrap{position:relative;height:min(62vh,520px);width:100%}
.chartwrap canvas{display:block;width:100%;height:100%}
.chartlegend{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:.2rem 0 .6rem}
.legitem{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;color:var(--ink);cursor:pointer;user-select:none}
.legitem i{width:12px;height:12px;border-radius:3px;display:inline-block}
.legitem.off{opacity:.4;text-decoration:line-through}

/* Kameras */
.cams{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.cams figure{margin:0}
/* Feste Bildflaeche. Das Minutenbild kommt aus dem Hauptstrom (16:9), das
   LIVE-Bild aus dem Substrom (meist 4:3) - ohne festes Seitenverhaeltnis
   springt die halbe Seite bei jedem Wechsel, und im Sekundentakt flackert
   sie dauerhaft. "cover" schneidet lieber einen Rand ab, als die Hoehe zu
   aendern. */
.cams img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;display:block;
  border-radius:10px;border:1px solid var(--line);background:#000}
.cams figcaption{color:var(--muted);font-size:.85rem;margin-top:.35rem}
.cam-hint{color:var(--muted);font-size:.68rem;margin:.5rem 0 0;opacity:.7}

/* Toast */
.toast{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%) translateY(140%);
  background:#0b1220;color:var(--ink);border:1px solid var(--accent);border-radius:12px;
  padding:.7rem 1.1rem;font-size:.92rem;max-width:min(92vw,460px);box-shadow:0 10px 30px rgba(0,0,0,.45);
  opacity:0;transition:transform .35s ease,opacity .35s ease;z-index:1000;pointer-events:none;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* Queue */
ol.queue{margin:.3rem 0;padding-left:1.4rem}
ol.queue li{padding:.35rem 0}
ol.queue li.me{color:var(--accent);font-weight:700}
.queue-note{color:var(--muted);font-size:.85rem;font-weight:400;margin:.15rem 0 .1rem;
  background:var(--card2);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;
  padding:.25rem .6rem;display:inline-block;max-width:100%}

/* Flash */
.flash{padding:.6rem .9rem;border-radius:9px;margin:.6rem 0;font-size:.92rem}
.flash-ok{background:rgba(52,211,153,.15);color:var(--good)}
.flash-err{background:rgba(248,113,113,.15);color:var(--bad)}
.flash-warn{background:rgba(251,191,36,.15);color:var(--warn)}

/* Login */
.login-page{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:1rem}
.login-card{background:linear-gradient(165deg,rgba(56,189,248,.07) 0%,transparent 35%),var(--card);
  border:1px solid var(--line);border-radius:18px;
  padding:2.2rem 2rem;width:100%;max-width:380px;text-align:center;
  box-shadow:0 20px 60px rgba(2,8,23,.55)}
.login-card h1{margin:0}
.login-card form{text-align:left}
.login-card .btn{width:100%;margin-top:1.1rem}
.login-logo{width:76px;height:76px;border-radius:20px;margin:0 auto .8rem;display:block;
  box-shadow:0 10px 30px rgba(56,189,248,.35)}
/* Kamera-Zustimmung (V12.47): dieselbe Karte wie beim Login, nur breiter -
   der Hinweistext braucht mehr Platz als Benutzername/Passwort. */
.consent-card{max-width:560px;text-align:left}
.consent-card h1{text-align:center}
.consent-card .cam-icon{font-size:2.6rem;display:block;text-align:center;margin-bottom:.4rem}
.consent-card ul{margin:.6rem 0;padding-left:1.3rem}
.consent-card li{margin:.3rem 0}
.consent-card .consent-actions{display:flex;gap:.7rem;margin-top:1.3rem;flex-wrap:wrap}
.consent-card .consent-actions form{flex:1 1 auto;min-width:180px}
.consent-card .btn{width:100%;margin-top:0}
.consent-card .btn-ghost2{background:transparent;color:var(--ink);border:1px solid var(--line);
  border-radius:9px;padding:.6rem 1.1rem;font-size:1rem;font-weight:700;cursor:pointer;width:100%}


/* Überschuss-PV-Laden */
.pv-auto-hint{margin:.6rem 0 0;font-size:.9rem;color:var(--good);
  background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.25);
  border-radius:10px;padding:.5rem .7rem}
.btn.btn-off{background:transparent;color:var(--ink);border:1px solid var(--line)}
.brand-theme{font-size:1rem;line-height:1}

.pv-auto-hint.pv-auto-paused{color:var(--warn);
  background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.28)}

/* --- Fleetmap: Fahrtwege auf der Straßenkarte (V12.15) ------------------- */
.fm-box{position:relative;width:100%;height:520px;overflow:hidden;background:#0b1220;
  border:1px solid var(--line);border-radius:12px;cursor:grab;touch-action:none}
.fm-tiles{position:absolute;inset:0}
.fm-tile{position:absolute;width:256px;height:256px;user-select:none;pointer-events:none;
  /* Die Kacheln sind für helle Oberflächen gemacht. Auf dunklem Grund würden
     sie blenden – deshalb leicht abgedunkelt und entsättigt. */
  filter:brightness(.78) saturate(.85) contrast(1.05)}
.fm-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fm-svg .fm-pt{pointer-events:auto;cursor:pointer}
.fm-svg .fm-pt:hover{r:7}
.fm-hud{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;
  align-items:flex-end;padding:.4rem .6rem;pointer-events:none;font-size:.72rem;color:#cbd5e1}
.fm-scale{background:#0f172acc;border-radius:6px;padding:.15rem .45rem;display:flex;
  align-items:center;gap:.4rem}
.fm-scale span{display:inline-block;height:8px;border:2px solid #cbd5e1;border-top:0}
.fm-attrib{background:#0f172acc;border-radius:6px;padding:.15rem .45rem}
.fm-tip{position:absolute;z-index:5;display:none;pointer-events:none;max-width:220px;
  background:#0f172af2;color:#e2e8f0;border:1px solid #334155;border-radius:8px;
  padding:.4rem .55rem;font-size:.78rem;line-height:1.35;box-shadow:0 8px 24px #0009}
.fm-xxl{position:fixed;inset:0;z-index:80;background:#0b1220;padding:0}
.fm-xxl .fm-box{height:100vh;border-radius:0;border:0}
.fm-xxl-close{position:fixed;top:.8rem;right:.8rem;z-index:82}
.fm-legend{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.78rem;
  color:var(--muted,#94a3b8);margin-top:.45rem}
.fm-legend i{display:inline-block;width:44px;height:8px;border-radius:4px;
  background:linear-gradient(90deg,hsl(210,78%,55%),hsl(105,78%,55%),hsl(0,78%,55%))}

/* --- Klappbare Abschnitte ------------------------------------------------ */
.fold-head{display:flex;align-items:center;gap:.5rem;cursor:pointer;user-select:none}
.fold-head h2{margin:0}
.fold-arrow{transition:transform .15s ease;color:var(--muted,#94a3b8);font-size:.85rem}
.panel.zu .fold-arrow{transform:rotate(-90deg)}
.panel.zu .fold-body{display:none}
.fold-tools{margin-left:auto;display:flex;gap:.4rem;align-items:center}

/* --------------------------------------------------------------------------
   Reihenfolge der Abschnitte (V12.25)
   Die Pfeile sitzen rechts in der Kopfzeile, gleich neben den Werkzeugen. Sie
   erscheinen erst beim Ueberfahren des Abschnitts – sichtbar genug, um sie zu
   finden, leise genug, um nicht wie eine Bedienung auszusehen.
   -------------------------------------------------------------------------- */
.panel-move{display:inline-flex;gap:.2rem;margin-left:.4rem;opacity:0;transition:opacity .15s ease}
.panel:hover .panel-move,.panel-move:focus-within{opacity:1}
/* Badges (V12.50): dieselben Pfeile, aber die Kachel traegt die Klasse
   .badge statt .panel - eigener Hover-Auslöser dafuer. */
.badge:hover .panel-move{opacity:1}
.badge-nm{display:inline-flex;align-items:center;gap:.3rem;flex-wrap:wrap;justify-content:center}
.badge .panel-move{margin-left:0;vertical-align:middle}
.badge .panel-move .btn{padding:.15rem .4rem;font-size:.75rem}
.panel-move .btn{background:transparent;color:var(--muted);border:1px solid var(--line);
  padding:.05rem .4rem;line-height:1.3;font-size:.85rem}
.panel-move .btn:hover{color:var(--ink)}
.fold-tools+.panel-move{margin-left:.4rem}
.fold-head:not(:has(.fold-tools)) .panel-move{margin-left:auto}
@media (hover:none){.panel-move{opacity:1}}

/* --------------------------------------------------------------------------
   Verlauf mit Bildern und Zeitstrahl (V12.25)
   -------------------------------------------------------------------------- */
.hist-stats{margin:.1rem 0 .6rem}
.hist-filter{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .9rem}
.hist-chip{display:inline-flex;align-items:center;gap:.4rem;margin:0;padding:.2rem .6rem;
  border:1px solid var(--line);border-radius:999px;font-size:.85rem;cursor:pointer;
  background:rgba(148,163,184,.06)}
.hist-chip input{width:auto;margin:0}
.hist-chip b{color:var(--muted);font-weight:600;font-size:.78rem}
.hist-chip:has(input:not(:checked)){opacity:.45}

.hist-view{border:1px solid var(--line);border-radius:var(--radius);padding:.8rem;
  background:rgba(148,163,184,.04);margin-bottom:1rem}
.hist-bilder{display:flex;gap:.7rem;flex-wrap:wrap}
.hist-bilder figure{margin:0;flex:1 1 320px;min-width:0;max-width:560px}
/* Hoehe begrenzt: Sonst schiebt ein einzelnes Bild den Zeitstrahl und die
   Liste aus dem Sichtfeld – und beim Durchspringen will man genau die sehen. */
.hist-bilder img{display:block;width:100%;height:auto;max-height:42vh;object-fit:contain;
  border-radius:10px;border:1px solid var(--line);background:rgba(2,8,23,.35)}
.hist-bilder figcaption{font-size:.78rem;margin-top:.2rem}
.hist-kopf{margin:.6rem 0 .3rem}
.hist-kopf .hist-titel{font-size:1.05rem}
.hist-leiste{display:flex;align-items:center;gap:.6rem}
.hist-leiste .btn{background:transparent;color:var(--ink);border:1px solid var(--line);flex:0 0 auto}
.hist-range{flex:1 1 auto;width:auto;accent-color:var(--accent);cursor:pointer}
.hist-spanne{font-size:.8rem;text-align:right;margin-top:.2rem}

.hist-tab td{vertical-align:middle}
.hist-mini{width:86px}
.hist-mini img{display:block;width:78px;height:44px;object-fit:cover;border-radius:6px;
  border:1px solid var(--line)}
.hist-row{cursor:pointer}
.hist-row:hover{background:rgba(56,189,248,.06)}
.hist-row.hist-an{background:rgba(56,189,248,.13);
  box-shadow:inset 3px 0 0 var(--accent)}

/* --------------------------------------------------------------------------
   Fokusrahmen (V12.27)
   Safari legt nach einem Mausklick einen blauen Schein um Knoepfe – auf den
   Pfeilen des Zeitstrahls sah das aus wie ein Fehler. Weg damit; wer mit der
   TASTATUR unterwegs ist, braucht die Markierung aber wirklich, und die bleibt
   ueber :focus-visible erhalten.
   -------------------------------------------------------------------------- */
.btn:focus,.hist-range:focus,.panel-move .btn:focus{outline:none;box-shadow:none}
.btn:focus-visible,.hist-range:focus-visible,.panel-move .btn:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}

/* Rückleitung von einer System-Unterseite zur Sammelseite (inc/layout.php,
   system_zurueck()). Klein und über dem Titel: Sie soll den Weg zurück
   zeigen, ohne mit der Überschrift zu konkurrieren. */
.sysback{margin:0 0 .2rem;font-size:.85rem}
.sysback a{color:var(--muted);text-decoration:none}
.sysback a:hover{color:var(--ink)}

/* Ankreuzfeld "bei Erreichen pausieren" beim Ladebedarf (dashboard.php).
   Eigene Klasse, weil es in einer flex-Zeile mit Eingabefeldern und Knöpfen
   steht und dort sonst mittig ausgerichtet würde. */
.need-pause{display:flex;align-items:center;gap:.45rem;margin:.4rem 0 0;
  font-size:.9rem;cursor:pointer}
.need-pause input{margin:0}

/* Fahrzeugbild statt des 🚗-Emoji (V12.48, tesla_car_icon_html() in
   inc/tesla.php). Als Ersatz fuer ein einzelnes Textzeichen inline in
   Ueberschriften und Kartenbeschriftungen - Hoehe an der Zeile ausgerichtet,
   nicht an der Bildgroesse. */
.car-ico{height:1.25em;width:auto;vertical-align:-.28em;margin-right:.15em}
h1 .car-ico,h2 .car-ico{height:1.15em}

/* Reichweite neben dem Ladestand auf der Tesla-Dashboard-Kachel (V12.49),
   klein und gedaempft, damit der Ladestand selbst die Hauptzahl bleibt. */
.range-hint{font-size:1rem;font-weight:500;color:var(--muted)}

/* Smart Home Aktionen (V12.49): eigener, etwas auffaelligerer Rahmen fuer das
   Panel ganz unten auf dem Dashboard – ein Blickfang analog zu den
   Kamerabildern direkt darueber, statt schlichter Formularknoepfe in einer
   Reihe. Die Knopf-Grundfarbe ist dieselbe wie bei .btn (var(--grad)), nur
   groesser, rund und mit Symbol. */
.sh-panel{background:linear-gradient(165deg,rgba(52,211,153,.10) 0%,transparent 40%),var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.3rem 1.5rem}
.sh-panel h2{margin:0 0 .3rem}
.sh-hint{color:var(--muted);font-size:.9rem;margin:0 0 1.1rem}
.sh-grid{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.3rem}
.sh-form{display:inline-flex;align-items:center;gap:.5rem}
.sh-btn{display:inline-flex;align-items:center;gap:.7rem;background:var(--grad);color:#04293a;
  border:0;border-radius:999px;padding:.55rem 1.3rem .55rem .55rem;font-weight:700;font-size:1.02rem;
  cursor:pointer;box-shadow:0 8px 22px rgba(52,211,153,.25);
  transition:filter .15s ease,transform .15s ease;margin:0}
.sh-btn:hover{filter:brightness(1.08);transform:translateY(-2px)}
.sh-btn:active{transform:translateY(0)}
.sh-ico{display:inline-flex;align-items:center;justify-content:center;width:2.3rem;height:2.3rem;
  border-radius:50%;background:rgba(4,41,58,.16);font-size:1.25rem;flex:0 0 auto;line-height:1}
.sh-label{white-space:nowrap}
.sh-status{color:var(--muted);font-size:.82rem}
@media(max-width:560px){
  .sh-grid{gap:.8rem}
  .sh-form{flex:1 1 100%}
  .sh-btn{flex:1 1 auto;justify-content:flex-start}
}

/* Vorschaubild in der Videoliste (V12.60). Feste Flaeche fuer Bild UND
   Platzhalter, damit die Tabelle nicht zappelt, waehrend die Bilder
   nacheinander nachgeladen werden. */
.clip-thumb{width:96px;height:54px;object-fit:cover;display:block;border-radius:6px;
  border:1px solid var(--line);background:#000}
.clip-thumb-leer{display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:1.1rem}

/* Video-Überlagerung (V12.63). Feste Höhenbegrenzung über dvh statt vh:
   auf dem Handy rutscht die Leiste sonst unter die Browserzeile. */
.clip-lb{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.82);
  display:flex;align-items:center;justify-content:center;padding:1rem}
.clip-lb-box{max-width:min(96vw,1100px);width:100%;display:flex;flex-direction:column;gap:.6rem}
.clip-lb-video{width:100%;max-height:78dvh;max-height:78vh;background:#000;
  border-radius:10px;border:1px solid var(--line)}
.clip-lb-leiste{display:flex;gap:.5rem;justify-content:flex-end}

/* Antworten zu Ladewuenschen (V12.64). Eingerueckt und mit Linie, damit
   sichtbar bleibt, zu welchem Eintrag der Faden gehoert. */
.queue-antw{margin-top:.35rem}
.req-faden{margin:.5rem 0 .2rem;padding-left:.7rem;border-left:2px solid var(--line)}
.req-faden .chatbox{max-height:14rem}

/* Leiste waehrend einer Sitzungsuebernahme (V12.69/V12.71).
   Unten festgeklebt und kraeftig orange: es soll unmoeglich sein, zu
   vergessen, dass man als jemand anderem unterwegs ist. Die Fusszeile
   bekommt Platz darunter, sonst verdeckt die Leiste den letzten Absatz –
   inklusive der Sicherheitszone am unteren Rand moderner Handys. */
.agiere-banner{position:fixed;left:0;right:0;bottom:0;z-index:900;
  background:#f97316;color:#1a1005;font-weight:700;text-align:center;
  padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom,0px));
  box-shadow:0 -6px 18px rgba(0,0,0,.35)}
.agiere-banner b{font-weight:800}
.agiere-banner a{color:#1a1005;text-decoration:underline;margin-left:.5rem;
  white-space:nowrap}
body.agiere-an{padding-bottom:4.6rem}
@media(max-width:560px){
  .agiere-banner{font-size:.88rem;text-align:left}
  body.agiere-an{padding-bottom:6.4rem}
}

/* Profilfotos (V12.70). EIGENER Namensraum "pfoto": .avatar gibt es schon,
   das ist das Namenskuerzel in der Topbar. Es zu ueberschreiben hat dort die
   Hoehe verschoben – die Browser-Tests haben das gemeldet. */
.pfoto-gross{width:120px;height:120px;border-radius:50%;object-fit:cover;display:block;
  border:1px solid var(--line);background:#0003}
.pfoto-leer{display:flex;align-items:center;justify-content:center;font-size:2.4rem;color:var(--muted)}
.pfoto{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:1px solid var(--line);background:#0003}
.pfoto-txt{display:flex;align-items:center;justify-content:center;font-size:.8rem;
  font-weight:700;color:var(--ink);background:#ffffff1a}
.queue-kopf{display:flex;align-items:center;gap:.55rem}
.queue-ueber{font-size:.8rem;color:var(--muted);margin:.15rem 0 0 2.4rem}

/* Meine Autos (V12.72). Karten mit festem Bildfeld, damit die Liste nicht
   zappelt, waehrend die Vorschaubilder nacheinander nachgeladen werden. */
.auto-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:.8rem}
.auto-karte{display:flex;gap:.8rem;align-items:center;text-decoration:none;color:inherit}
.auto-bild{width:104px;height:64px;object-fit:cover;border-radius:8px;flex:0 0 auto;
  border:1px solid var(--line);background:#0003}
.auto-bild-leer{display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:var(--muted)}
.auto-text{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.auto-text .muted{font-size:.82rem}
.auto-galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.7rem;margin-top:.8rem}
.auto-galerie-bild img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;
  border:1px solid var(--line);background:#000;display:block}
.auto-galerie-bild form{margin-top:.25rem;text-align:right}

/* Steuerkacheln auf dem Dashboard (V12.74).
   Die Status-Kachel spannte ueber zwei Spalten (.card.big) – auf breiten
   Bildschirmen passten dadurch nur drei Kacheln in die Zeile, und
   "Voraussichtlich fertig" rutschte allein in die naechste. Hier vier feste
   Spalten, damit alle vier nebeneinander stehen; die Status-Kachel behaelt
   ihre Breite ueber die groessere Mindestbreite, nicht ueber einen
   Spaltensprung. */
@media(min-width:1000px){
  .ctl-cards{grid-template-columns:1.6fr 1fr 1fr 1.2fr}
  .ctl-cards .card.big{grid-column:auto}
}
@media(min-width:700px) and (max-width:999px){
  .ctl-cards{grid-template-columns:repeat(2,1fr)}
  .ctl-cards .card.big{grid-column:auto}
}

/* Dateiauswahl (V12.75).
   Das Feld sieht sonst aus wie aus einem anderen Jahrzehnt: weisser
   Systemknopf auf dunklem Grund, danebenstehend "Keine ausgewaehlt" in
   Systemschrift. Der Knopf laesst sich seit ::file-selector-button gestalten;
   das Feld selbst bekommt denselben Rahmen wie jedes andere Eingabefeld.
   -webkit-file-upload-button steht daneben fuer aeltere Safari-Fassungen –
   das ist genau der Browser, aus dem hier die Handyfotos kommen. */
input[type=file]{
  width:100%;padding:.45rem .5rem;background:var(--bg);color:var(--muted);
  border:1px solid var(--line);border-radius:9px;font-size:.92rem;
  font-family:inherit;cursor:pointer}
input[type=file]::file-selector-button,
input[type=file]::-webkit-file-upload-button{
  margin-right:.7rem;padding:.45rem .9rem;border:1px solid var(--line);
  border-radius:8px;background:linear-gradient(160deg,var(--card2),var(--card));
  color:var(--ink);font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;
  transition:border-color .18s ease,transform .12s ease}
input[type=file]::file-selector-button:hover,
input[type=file]::-webkit-file-upload-button:hover{border-color:var(--accent)}
input[type=file]::file-selector-button:active,
input[type=file]::-webkit-file-upload-button:active{transform:translateY(1px)}
input[type=file]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Knoepfe in einer Formularzeile sollen nicht ueber die ganze Restbreite
   laufen – der "Hinzufuegen"-Knopf war so breit wie ein Banner. */
.row > .btn{flex:0 0 auto;align-self:flex-end}

/* Profilfoto in der Topbar (V12.76). Nur Fuellung und Rahmen – Groesse und
   Form kommen weiter aus .avatar, damit die Kopfzeile ihre Hoehe behaelt. */
.avatar-foto{object-fit:cover;background:#0003;padding:0}

/* Community (V12.76). Karten mit festem Bildfeld – die Liste soll nicht
   zappeln, waehrend die Fotos nacheinander nachgeladen werden. */
.cmm-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:1rem}
.cmm-kopf{display:flex;align-items:center;gap:.7rem}
.cmm-foto{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:1px solid var(--line);background:#0003}
.cmm-foto-txt{display:flex;align-items:center;justify-content:center;
  font-weight:700;color:var(--ink);background:#ffffff1a}
.cmm-gross .cmm-foto{width:96px;height:96px}
.cmm-name{min-width:0}
.cmm-about{font-size:.9rem;color:var(--muted);margin:.6rem 0 0;white-space:pre-line}
.cmm-autos{display:flex;flex-direction:column;gap:.5rem;margin-top:.7rem}
.cmm-auto{display:flex;align-items:center;gap:.6rem;font-size:.88rem}
.cmm-auto img{width:76px;height:48px;object-fit:cover;border-radius:7px;flex:0 0 auto;
  border:1px solid var(--line);background:#0003}
.cmm-auto-leer{width:76px;height:48px;display:flex;align-items:center;justify-content:center;
  border-radius:7px;border:1px solid var(--line);background:#0003;flex:0 0 auto}
.pfoto-link{display:inline-flex;text-decoration:none;border-radius:50%}
.pfoto-link:hover .pfoto{border-color:var(--accent)}
.profil-lb-box{max-width:min(94vw,30rem)}
.profil-lb-inhalt{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.1rem;max-height:74dvh;max-height:74vh;overflow:auto}

/* Bildchen im Chat (V12.77). Kleiner als in der Warteschlange, damit die
   Kopfzeile einer Nachricht nicht hoeher wird als der Text darunter. */
.chatmeta{display:flex;align-items:center;gap:.45rem}
.pfoto-klein{width:26px;height:26px;font-size:.7rem}

/* Feature-Kino auf der Anmeldeseite (V12.80).
   Die Folien liegen UEBEREINANDER (grid, alle in Zelle 1/1) und werden per
   Deckkraft getauscht. Mit display:none wuerde die Buehne bei jedem Wechsel
   ihre Hoehe aendern und die Anmeldemaske darunter huepfen. */
.login-page{align-items:flex-start}
.login-buehne{display:flex;flex-direction:column;align-items:center;gap:1.2rem;
  width:100%;max-width:640px;margin:auto;padding:2rem 0}
.kino{width:100%;background:linear-gradient(165deg,rgba(56,189,248,.10),transparent 60%),var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.5rem 1.1rem;
  overflow:hidden;position:relative}
.kino::before{content:"";position:absolute;inset:-40% -10% auto -10%;height:70%;
  background:radial-gradient(60% 60% at 50% 0,rgba(52,211,153,.16),transparent 70%);
  pointer-events:none}
.kino-folien{display:grid;min-height:9.5rem}
.kino-folie{grid-area:1/1;opacity:0;transform:translateY(10px);
  transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.kino-folie.an{opacity:1;transform:none;pointer-events:auto}
.kino-icon{font-size:2.1rem;display:block;line-height:1}
.kino-folie h2{margin:.5rem 0 .3rem;font-size:1.25rem}
.kino-folie p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.5}
.kino-punkte{display:flex;gap:.4rem;justify-content:center;padding-top:1rem}
.kino-punkt{width:7px;height:7px;padding:0;border:none;border-radius:50%;
  background:var(--line);cursor:pointer;transition:background .3s ease,width .3s ease}
.kino-punkt.an{width:20px;border-radius:4px;
  background:linear-gradient(135deg,var(--accent),var(--accent2))}
.login-hinweis{font-size:.85rem;color:var(--muted);margin:.9rem 0 0;line-height:1.5}
.login-fuss{font-size:.8rem;color:var(--muted);text-align:center}
.login-fuss a{color:var(--muted)}
@media(max-width:560px){
  .kino{padding:1.2rem 1.1rem .9rem}
  .kino-folien{min-height:11rem}
  .kino-folie h2{font-size:1.1rem}
}
/* Wer weniger Bewegung eingestellt hat, sieht nur die erste Folie – das
   Skript schaltet dann gar nicht erst weiter. */
@media(prefers-reduced-motion:reduce){
  .kino-folie{transition:none}
  .kino-punkte{display:none}
}

/* Rechtsseiten (V12.80). Schmale Spalte und ruhige Abstaende – das liest
   niemand freiwillig, also soll es wenigstens nicht anstrengen. */
.recht{width:100%;max-width:640px;text-align:left;line-height:1.6}
.recht h1{margin:0 0 .3rem}
.recht h2{margin:1.6rem 0 .4rem;font-size:1.08rem}
.recht h3{margin:1.1rem 0 .25rem;font-size:.97rem;color:var(--accent)}
.recht p,.recht li{color:var(--ink);font-size:.93rem}
.recht ul{margin:.4rem 0 0;padding-left:1.1rem}
.recht li{margin-bottom:.35rem}

/* Bild statt Symbol im Feature-Kino (V12.81). Feste Flaeche, damit die
   Buehne beim Wechsel zwischen Bild- und Symbolfolien nicht springt. */
.kino-bild{width:100%;max-height:13rem;object-fit:contain;border-radius:10px;
  border:1px solid var(--line);background:#0006;display:block}
.showcase-vorschau{width:120px;height:74px;object-fit:cover;border-radius:8px;
  border:1px solid var(--line);background:#0003;display:block}
@media(max-width:560px){ .kino-bild{max-height:9rem} }

/* Auswahl des aktuellen Autos (V12.82). Knoepfe statt Auswahlfeld: ein Klick
   statt aufklappen-waehlen-bestaetigen, und man sieht ohne Zutun, welches
   gerade gilt. */
/* flex-wrap steht seit V12.93 im Schieber-Block weiter unten –
   hier wuerde es das seitliche Scrollen aushebeln. */
.auto-wahl-liste{display:flex;gap:.6rem;margin:0}
.auto-wahl-knopf{display:flex;flex-direction:column;gap:.15rem;text-align:left;
  padding:.6rem .9rem;border-radius:10px;border:1px solid var(--line);
  background:var(--card2);color:var(--ink);cursor:pointer;min-width:11rem;
  transition:border-color .18s ease,transform .12s ease}
.auto-wahl-knopf:hover{border-color:var(--accent)}
.auto-wahl-knopf:active{transform:translateY(1px)}
.auto-wahl-knopf .muted{font-size:.78rem}
.auto-wahl-knopf.an{border-color:transparent;
  background:linear-gradient(135deg,rgba(56,189,248,.22),rgba(52,211,153,.18));
  box-shadow:inset 0 0 0 2px var(--accent)}

/* Fahrzeugbild als Menuesymbol und in Ueberschriften (V12.83). Auf die
   Groesse der uebrigen Symbole gebracht, damit die Zeile ihre Hoehe behaelt. */
.nav-ico{width:1.25rem;height:auto;vertical-align:-.2em}
h2 > .car-ico{width:1.4rem;height:auto;vertical-align:-.15em;margin-right:.15rem}
.upl-hinweis{font-size:.75rem;margin-top:.25rem}

/* Zeile "Es laedt gerade ... mit ..." (V12.84). Der gepunktete Unterstrich
   zeigt, dass mehr dahintersteckt – sonst probiert niemand den Mouseover. */
.lade-zeile{margin:-.2rem 0 .8rem;font-size:.95rem}
.lade-person,.lade-auto{text-decoration:none;color:inherit;
  border-bottom:1px dotted var(--muted);cursor:pointer}
.lade-typ{font-size:.82rem}

/* Karte beim Zeigen auf Person oder Fahrzeug (V12.88). Fest am Bildschirm,
   damit sie beim Scrollen nicht mitwandert – geschlossen wird sie ohnehin. */
.hoverkarte{position:fixed;z-index:1200;max-width:22rem;pointer-events:none}
.hoverkarte-inhalt{background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:.85rem .95rem;
  box-shadow:0 14px 34px rgba(0,0,0,.45);font-size:.9rem;line-height:1.45}
.hoverkarte .cmm-foto{width:52px;height:52px}
.hoverkarte .cmm-about{margin-top:.5rem}
.karte-auto-bild{width:100%;max-height:9rem;object-fit:cover;border-radius:9px;
  border:1px solid var(--line);background:#0003;display:block;margin-bottom:.6rem}
.karte-auto-kopf{font-size:.98rem}
.karte-auto-liste{margin:.45rem 0 0;padding-left:1.05rem;color:var(--muted)}
.karte-auto-liste li{margin-bottom:.15rem}

/* Autoauswahl als Schieber (V12.91).
   Eine Zeile statt einer Spalte: drei Autos untereinander kosteten auf dem
   Handy den halben Bildschirm. Die Spur scrollt seitlich (mit Wischen), die
   Pfeile blendet das Skript nur ein, wenn es wirklich etwas zu scrollen gibt. */
.auto-wahl h2{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}
.auto-wahl-sub{font-size:.82rem;font-weight:400}
.auto-slider{display:flex;align-items:stretch;gap:.35rem;position:relative}
.auto-wahl-liste{display:flex;flex-wrap:nowrap;gap:.5rem;margin:0;overflow-x:auto;
  scroll-behavior:smooth;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  padding-bottom:.2rem}
/* Die Leiste selbst bleibt unsichtbar – sie wuerde die Kachel hoeher machen,
   und gewischt wird ohnehin. */
.auto-wahl-liste::-webkit-scrollbar{height:0}
.auto-wahl-liste{scrollbar-width:none}
.auto-wahl-knopf{scroll-snap-align:start;min-width:0;flex:0 0 auto;max-width:15rem;
  padding:.45rem .8rem;gap:.1rem}
.auto-wahl-knopf b{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auto-wahl-knopf .muted{font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auto-pfeil{flex:0 0 auto;width:1.9rem;border:1px solid var(--line);border-radius:9px;
  background:var(--card2);color:var(--ink);font-size:1.15rem;line-height:1;cursor:pointer;
  transition:border-color .18s ease}
.auto-pfeil:hover{border-color:var(--accent)}
@media(max-width:560px){
  .auto-wahl-sub{display:none}
  .auto-wahl-knopf{max-width:11rem}
}

/* Belegungsleiste: zwei Chips nebeneinander statt untereinander (V12.93).
   Nowrap allein reichte nicht – die Chips sind so breit, dass auf dem Handy
   trotzdem nur einer je Zeile passte. Als Raster teilen sie sich die Breite
   und kuerzen den Text notfalls mit Auslassungspunkten. */
/* Belegungsleiste auf dem Handy (V12.98).
   Dritter Anlauf, diesmal ohne Kunststueck. Zwei Spalten haben zweimal nicht
   funktioniert: entweder wurde der Text abgeschnitten, oder er lief aus dem
   Chip heraus, weil eine Flex-Zeile nicht von selbst umbricht.
   Jetzt EIN Chip je Zeile ueber die volle Breite – das kann nicht
   ueberlaufen – dafuer so flach wie moeglich. Lieber vier duenne Zeilen als
   zwei kaputte. */
@media(max-width:620px){
  .occ-strip{display:flex !important;flex-direction:column;align-items:stretch;
    gap:.25rem !important;margin:.2rem 0 .5rem !important}
  .occ-chip{width:100%;justify-content:flex-start;border-radius:10px;
    padding:.28rem .6rem;font-size:.82rem;line-height:1.3;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Der Text darf schrumpfen, das Puenktchen nicht. */
  .occ-chip > :not(.occ-dot){min-width:0;overflow:hidden;text-overflow:ellipsis}
}

/* Fuhrpark im selben Schieber (V12.94). Die Kacheln behalten ihr Aussehen,
   laufen aber in einer Zeile statt im Raster – sonst stapeln sich vier
   Fahrzeuge auf dem Handy untereinander. */
.fuhr-spur{display:flex !important;flex-wrap:nowrap;gap:.6rem;overflow-x:auto;
  scroll-behavior:smooth;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  padding-bottom:.2rem;grid-template-columns:none !important}
.fuhr-spur::-webkit-scrollbar{height:0}
.fuhr-spur{scrollbar-width:none}
.fuhr-spur > .card{flex:0 0 auto;min-width:11rem;max-width:15rem;scroll-snap-align:start}

/* Badges im Schieber (V12.95). Sie sind nett, aber keine Information, die
   eine eigene Zeile verdient – erst recht nicht drei. */
.badge-slider{margin:.2rem 0 1rem}
.badgestrip{flex-wrap:nowrap;overflow-x:auto;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;margin:0;padding-bottom:.15rem;
  scroll-snap-type:x proximity}
.badgestrip::-webkit-scrollbar{height:0}
.badgestrip{scrollbar-width:none}
.badgestrip > .bchip{flex:0 0 auto;scroll-snap-align:start}

/* Smart-Home-Knoepfe auf Schriftgroesse (V12.95).
   Vorher: runder Knopf mit 2,3-rem-Symbolkreis, fetter Schatten, viel
   Polsterung – drei Aktionen fuellten damit eine halbe Handyhoehe. Jetzt
   sind es Knoepfe in Textgroesse, die nebeneinander in eine Zeile passen. */
.sh-grid{gap:.45rem !important}
.sh-form{gap:.35rem}
.sh-btn{gap:.4rem;padding:.3rem .8rem;font-size:.9rem;font-weight:600;
  box-shadow:0 3px 10px rgba(52,211,153,.18)}
.sh-btn:hover{transform:none;filter:brightness(1.1)}
.sh-ico{width:auto;height:auto;background:none;font-size:1rem;border-radius:0}
.sh-status{font-size:.76rem}
@media(max-width:560px){
  .sh-btn{font-size:.86rem;padding:.28rem .7rem}
}

/* Kampagnen-Hinweis (V12.99). Auffaellig genug, dass man ihn liest, ruhig
   genug, dass er beim dritten Mal nicht aergert – deshalb ein farbiger
   Rand statt einer vollflaechigen Warnfarbe. */
.kampagne{border-color:var(--accent2);
  background:linear-gradient(150deg,rgba(52,211,153,.10),transparent 55%),var(--card)}
.kampagne h2{margin:0 0 .4rem}
.kmp-text{margin:0;line-height:1.6}
.kmp-frist{margin:.6rem 0 0;color:var(--warn)}
.kmp-knoepfe{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.9rem}
.kmp-fuss{font-size:.78rem;margin:.7rem 0 0}

/* Lob (V13.08). Die Leinwand liegt UEBER der Karte, faengt aber keine Klicks
   ab – und raeumt sich nach dem Konfetti selbst weg. */
.lob-karte{position:relative;overflow:hidden;border-color:var(--accent2);
  background:linear-gradient(160deg,rgba(52,211,153,.14),transparent 60%),var(--card)}
.lob-karte canvas{position:absolute;inset:0;pointer-events:none}
.lob-inhalt{position:relative}
.lob-karte h2{margin:0 0 .4rem}
.lob-text{font-size:1.05rem;line-height:1.55;margin:0}
.lob-bild-gross{display:block;margin-top:.8rem;max-width:100%;width:300px;height:auto;
  border-radius:10px;border:1px solid var(--line)}
.lob-form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.5rem 0 .2rem;
  padding-left:.7rem;border-left:2px solid var(--accent2)}
.lob-form input[type=text]{flex:1 1 14rem}
/* Kamerasymbol statt Dateiauswahl (V13.09). Das Eingabefeld ist versteckt;
   sichtbar ist nur dieses kleine Symbol, und ein Klick darauf oeffnet auf
   dem Handy direkt die Kamera. */
.lob-cam{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;
  padding:.3rem .55rem;border:1px solid var(--line);border-radius:9px;
  background:var(--card2);transition:border-color .18s ease}
.lob-cam:hover{border-color:var(--accent)}
.lob-cam-ico{font-size:1rem;line-height:1}
.lob-cam-txt{font-size:.78rem;color:var(--accent2)}
.lob-cam.an{border-color:var(--accent2)}
/* In der Community */
.cmm-lob{display:flex;gap:.6rem;align-items:flex-start;padding:.6rem 0;
  border-top:1px solid var(--line)}
.cmm-lob:first-of-type{border-top:none}
.cmm-lob img.lob-thumb{width:64px;height:48px;object-fit:cover;border-radius:8px;
  border:1px solid var(--line);flex:0 0 auto}
.cmm-lob-text{min-width:0;font-size:.9rem;line-height:1.5}
.cmm-lobzahl{font-size:.82rem;color:var(--accent2);margin:.5rem 0 0}
.lob-weg{margin:0;flex:0 0 auto}
.lob-weg .btn{background:transparent;color:var(--muted);border:1px solid var(--line);padding:.2rem .45rem}
.lob-weg .btn:hover{color:var(--bad);border-color:var(--bad)}

/* Erfolgsgeschichte (V13.12). Lesetext, deshalb schmaler als der Rest der
   App und mit mehr Luft zwischen den Zeilen. */
.story{max-width:46rem;line-height:1.75}
.story h2{margin:2.2rem 0 .7rem;font-size:1.25rem;color:var(--accent)}
.story p{margin:0 0 1rem}
.story ul,.story ol{margin:0 0 1rem;padding-left:1.3rem}
.story li{margin-bottom:.5rem}
.story-lehre{border-left:3px solid var(--accent2);padding:.1rem 0 .1rem .9rem;
  color:var(--ink);background:linear-gradient(90deg,rgba(52,211,153,.07),transparent 70%)}
.story-ende{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line);
  font-style:italic;color:var(--muted)}
@media(max-width:560px){.story h2{font-size:1.12rem}}

/* Admin-Übersicht (V13.13) */
.ad-online{display:flex;flex-wrap:wrap;gap:.9rem}
.ad-person{display:flex;align-items:center;gap:.55rem;padding:.45rem .7rem;
  border:1px solid var(--line);border-radius:12px;background:var(--card2)}
.ad-tag{font-size:.68rem;background:var(--accent);color:#04121f;border-radius:999px;
  padding:.05rem .4rem;vertical-align:middle;margin-left:.2rem}
.ad-zahlen{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr))}
.ad-kachel{border:1px solid var(--line);border-radius:12px;background:var(--card2);padding:.7rem .8rem}
.ad-ico{font-size:1.1rem;line-height:1}
.ad-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-top:.3rem}
.ad-wert{font-size:1.45rem;font-weight:700;line-height:1.2;margin-top:.1rem}
.ad-sub{font-size:.76rem;color:var(--muted)}
/* Verlauf: Säulen, kein Diagramm-Werkzeug – 14 Zahlen brauchen keine Bibliothek. */
.ad-verlauf{display:flex;align-items:flex-end;gap:.35rem;height:8rem}
.ad-verlauf .ad-tag{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;background:none;padding:0;margin:0;font-size:inherit;color:inherit}
.ad-saeule{background:linear-gradient(180deg,var(--accent),var(--accent2));
  border-radius:5px 5px 0 0;min-height:2px}
.ad-tagtext{font-size:.66rem;color:var(--muted);text-align:center;padding-top:.3rem;
  white-space:nowrap;overflow:hidden}
.ad-zeile{display:flex;align-items:center;gap:.6rem;padding:.25rem 0;font-size:.86rem}
.ad-zeile-name{flex:0 0 9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-zeile-bar{flex:1 1 auto;height:.5rem;background:var(--card2);border-radius:999px;overflow:hidden}
.ad-zeile-bar > span{display:block;height:100%;background:var(--accent);border-radius:999px}
.ad-zeile-zahl{flex:0 0 3.2rem;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
@media(max-width:560px){
  .ad-zeile-name{flex-basis:6.5rem}
  .ad-verlauf{height:6rem}
}

/* Bildchen auf den Systemkacheln (V13.13). Strichzeichnungen in der
   Akzentfarbe – neun bunte Symbole nebeneinander sähen aus wie ein
   Ramschladen. */
.sys-bild{width:1.6rem;height:1.6rem;color:var(--accent);display:block}
.sys-card:hover .sys-bild{color:var(--accent2)}
.sys-icon{display:flex;align-items:center;justify-content:center;min-height:1.6rem}

/* Flash (V13.14). Die Bilder haben ihren eigenen dunklen Grund – auf den
   dunklen Flaechen der App faellt der Uebergang nicht auf, und ein weicher
   Schatten holt sie vollends heran. */
.flash-gruss{width:120px;height:120px;border-radius:22px;display:block;margin:0 auto .6rem;
  box-shadow:0 10px 30px rgba(0,0,0,.45)}
.flash-unter{margin:.1rem 0 1rem;font-size:.9rem;color:var(--muted);text-align:center}
.story-banner{width:100%;max-width:46rem;height:auto;border-radius:16px;display:block;
  margin:0 0 1.4rem;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.story-flash{display:flex;gap:1rem;align-items:flex-start;margin:2rem 0 0;
  padding:1rem;border:1px solid var(--line);border-radius:14px;background:var(--card2)}
.story-flash img{border-radius:14px;flex:0 0 auto}
.story-flash p{margin:0}
@media(max-width:560px){
  .flash-gruss{width:92px;height:92px}
  .story-flash{flex-direction:column;align-items:center;text-align:center}
}

/* Flash-Posen (V13.15). Die Bilder tragen ihren eigenen dunklen Grund, der
   zwischen --bg und --card liegt, und laufen am Rand weich aus – auf jeder
   dunklen Flaeche der App verschwindet der Uebergang. */
.flash-pose{display:block;width:110px;height:110px;margin:0 0 .5rem}
.flash-pose.klein{width:64px;height:64px;margin:0}
.flash-rechts{position:absolute;top:.4rem;right:.6rem;width:96px;height:96px;
  opacity:.9;pointer-events:none}
.kampagne{position:relative}
.kampagne h2,.kampagne .kmp-text{padding-right:5.5rem}
h2.mit-flash{display:flex;align-items:center;gap:.5rem}
.story-pose{float:right;width:150px;height:150px;margin:0 0 .6rem 1rem;shape-outside:circle(50%)}
.lob-karte .flash-pose{width:110px;height:110px}
@media(max-width:560px){
  .flash-rechts{width:70px;height:70px}
  .kampagne h2,.kampagne .kmp-text{padding-right:4rem}
  .story-pose{float:none;margin:0 auto .8rem;width:120px;height:120px}
  .flash-pose{width:88px;height:88px}
}

/* Lob-Bereich am Ende des Warteschlangen-Eintrags (V13.17). Deutlich
   abgesetzt vom Antwortfeld darueber – die beiden Gesten sollen sich nicht
   ins Gehege kommen. */
.lob-bereich{margin-top:.9rem;padding-top:.7rem;border-top:1px dashed var(--line)}
.req-faden.offen{display:block}
.chatzeile{padding:.3rem 0;font-size:.88rem;line-height:1.45}
.chatzeile + .chatzeile{border-top:1px solid var(--line)}

/* Dokumentation (V13.19) */
.dok-suche{display:flex;align-items:center;gap:.7rem;margin:.6rem 0 1rem}
.dok-suche input{flex:1 1 auto;max-width:34rem}
.dok-nav{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.dok-nav a{font-size:.82rem;padding:.25rem .6rem;border:1px solid var(--line);
  border-radius:999px;color:var(--muted);text-decoration:none}
.dok-nav a:hover{border-color:var(--accent);color:var(--ink)}
.dok h2{margin-top:0}
.dok h3{font-size:1rem;margin:1.3rem 0 .4rem;color:var(--accent2)}
.dok p{line-height:1.65}
.dok ul,.dok ol{line-height:1.7}
.dok-ascii{font-size:.72rem;line-height:1.35;overflow-x:auto;background:var(--bg);
  padding:.9rem;border-radius:10px;border:1px solid var(--line);color:var(--muted)}
.dok-bild{margin:.6rem 0 1.2rem;text-align:center}
.dok-bild img{max-width:100%;height:auto;background:var(--bg);border:1px solid var(--line);
  border-radius:12px;padding:.5rem}
.dok-bild p{font-size:.8rem;margin:.4rem 0 0}
.dok-tabellen{display:flex;flex-wrap:wrap;gap:.35rem}
.dok-tab{font-size:.78rem;padding:.2rem .5rem;border:1px solid var(--line);
  border-radius:8px;background:var(--card2);white-space:nowrap}
.dok-tab .muted{font-size:.72rem;margin-left:.3rem}
@media(max-width:560px){.dok-ascii{font-size:.58rem}}

/* Fahrten zusammenfassen (V13.20) */
.tm-vorschlag{border-color:var(--accent2)}
.tm-zeile{display:flex;align-items:center;gap:.8rem;padding:.5rem 0;margin:0;
  border-top:1px solid var(--line)}
.tm-zeile:first-of-type{border-top:none}
.tm-text{flex:1 1 auto;min-width:0;font-size:.88rem;line-height:1.45}
.tm-pill{background:#0e7490;color:#cffafe}
.tm-gruppe > td{background:linear-gradient(90deg,rgba(14,116,144,.12),transparent 40%)}
.tm-trenn{background:none;border:none;color:var(--muted);font-size:.72rem;
  text-decoration:underline;cursor:pointer;padding:0}
.tm-trenn:hover{color:var(--bad)}
@media(max-width:620px){
  .tm-zeile{flex-direction:column;align-items:stretch;gap:.4rem}
}

/* Erledigungstouren und Ablehnen (V13.21) */
.tm-zeile{align-items:flex-start}
.tm-zeile.rund{border-left:3px solid var(--accent2);padding-left:.7rem}
.tm-knoepfe{display:flex;flex-direction:column;gap:.35rem;align-items:flex-end;flex:0 0 auto}
.tm-nein{background:none;border:none;color:var(--muted);font-size:.76rem;cursor:pointer;
  padding:.15rem 0;text-decoration:underline}
.tm-nein:hover{color:var(--bad)}
.tm-teile{margin-top:.5rem;display:flex;flex-direction:column;gap:.3rem}
.tm-teil{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:0;
  font-size:.84rem;background:var(--card2);border:1px solid var(--line);
  border-radius:9px;padding:.3rem .5rem}
@media(max-width:620px){
  .tm-knoepfe{flex-direction:row;align-items:center;justify-content:space-between;width:100%}
}

/* Zeiten und Eingabefelder am Vorschlag (V13.22) */
.tm-zeiten{display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-size:.82rem;margin:.25rem 0}
.tm-zeiten .muted{font-size:.8rem}
.tm-angaben{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;justify-content:flex-end}
.tm-feld select,.tm-feld input{font-size:.8rem;padding:.25rem .4rem;min-width:8rem}
.tm-feld input{min-width:11rem}
.tm-teil{flex-wrap:wrap}
.tm-teil-titel{flex:1 1 100%}
@media(max-width:620px){
  .tm-angaben{justify-content:stretch}
  .tm-feld{flex:1 1 100%}
  .tm-feld select,.tm-feld input{width:100%}
}

/* Tour-Panel (V13.23) */
.tour-panel{margin:.5rem 0 0;font-size:.85rem}
.tour-panel > summary{cursor:pointer;color:var(--accent);font-size:.82rem;
  list-style:none;padding:.15rem 0}
.tour-panel > summary::-webkit-details-marker{display:none}
.tour-panel > summary::before{content:'▸ ';transition:none}
.tour-panel[open] > summary::before{content:'▾ '}
.tour-panel.klein{margin-top:.25rem}
.tour-panel.klein > summary{font-size:.72rem}
.tour-inhalt{padding:.5rem 0 0}
.tour-karte{width:100%;height:auto;max-height:15rem;background:var(--bg);
  border:1px solid var(--line);border-radius:10px;display:block}
.tour-zahlen{display:grid;gap:.4rem;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));
  margin:.7rem 0}
.tour-zahlen > div{background:var(--card2);border:1px solid var(--line);border-radius:9px;
  padding:.35rem .5rem}
.tour-label{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted)}
.tour-stationen{list-style:none;margin:.4rem 0 0;padding:0;counter-reset:etappe}
.tour-stationen > li{padding:0 0 0 1.4rem;position:relative}
.tour-etappe{padding:.25rem 0;border-left:2px solid var(--accent);margin-left:-1.4rem;
  padding-left:1.4rem}
.tour-halt{margin:.1rem 0 .1rem -1.4rem;padding:.2rem 0 .2rem 1.4rem;font-size:.8rem;
  color:var(--warn);border-left:2px dashed var(--line)}
@media(max-width:560px){.tour-karte{max-height:11rem}}

/* Tourkarte: starr, mit Knopf zum Einpassen (V13.25) */
.tour-karte-box{position:relative;height:16rem;border:1px solid var(--line);
  border-radius:10px;overflow:hidden;background:var(--bg)}
.tour-zentrieren{position:absolute;top:.5rem;right:.5rem;z-index:5;
  background:rgba(11,17,32,.82);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;font-size:.74rem;padding:.25rem .5rem;cursor:pointer}
.tour-zentrieren:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:560px){.tour-karte-box{height:12rem}}


/* Flash weint (V13.38): freundlicher Hinweis bei tiefem Guthaben-Minus.
   Bewusst keine Warnflaeche - Flash schaut traurig, mehr nicht. Die Traenen sind
   zwei CSS-Tropfen auf dem Gesicht der Denker-Pose; die Position haengt am Bild. */
.flash-weint-box{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;
  border-color:rgba(96,165,250,.35)}
.flash-weint{position:relative;flex:0 0 auto;width:92px;height:92px;
  animation:flashSchluchz 2.8s ease-in-out infinite;transform-origin:50% 90%}
.flash-weint .flash-pose{width:92px;height:92px;margin:0}
.flash-weint-text{flex:1 1 15rem;min-width:0}
.flash-weint .traene{position:absolute;width:8px;height:12px;border-radius:50% 50% 55% 55%/35% 35% 65% 65%;
  background:linear-gradient(#bfe6ff,#4aa8f0);box-shadow:0 0 6px rgba(120,200,255,.7);opacity:0;
  animation:flashTraene 2.4s ease-in infinite}
.flash-weint .t1{left:39%;top:58%}
.flash-weint .t2{left:55%;top:56%;animation-delay:1.1s}
@keyframes flashTraene{
  0%{opacity:0;transform:translateY(0) scale(.6)}
  12%{opacity:.95;transform:translateY(0) scale(1)}
  85%{opacity:.85;transform:translateY(30px) scale(1)}
  100%{opacity:0;transform:translateY(38px) scale(.8)}}
@keyframes flashSchluchz{
  0%,100%{transform:rotate(-3deg) translateY(0)}
  12%{transform:rotate(-3deg) translateY(2px)}
  24%{transform:rotate(-3deg) translateY(0)}
  36%{transform:rotate(-3deg) translateY(2px)}
  48%{transform:rotate(-3deg) translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .flash-weint{animation:none;transform:rotate(-3deg)}
  .flash-weint .traene{animation:none;opacity:.9;transform:translateY(14px)}
}

/* App-Gefuehl (V13.49): in der angemeldeten Oberflaeche nicht markieren, nicht
   nachschlagen, nicht ziehen. Nur Bedienkomfort, kein Kopierschutz.
   "html.app-frei" setzt ein Skript im <head>, wenn der Nutzer es im Profil
   abgeschaltet hat (localStorage) – noch VOR dem ersten Rendern, sonst blitzt die
   gesperrte Fassung bei jedem Seitenaufruf kurz auf. */
:root:not(.app-frei) body.app-lock{
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
:root:not(.app-frei) body.app-lock :is(img,a,button){-webkit-user-drag:none}
/* Ausnahmen: alles, was man abtippen, kopieren oder weitergeben koennen muss.
   Safari braucht bei Eingabefeldern das -webkit-user-select:text AUSDRUECKLICH,
   sonst nimmt es die Sperre vom <body> und die Felder lassen sich nicht fuellen.
   Die Liste steht noch einmal in assets/app.js (AUSNAHMEN) fuer das Rechtsklick-Menue. */
:root:not(.app-frei) body.app-lock :is(input,textarea,select,[contenteditable],[contenteditable] *,
  pre,code,kbd,samp,.chatmsg,.chattext,.flash-err,[role="alert"],.selectable,.selectable *){
  -webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.erweitert{margin-top:1rem}
.erweitert > summary{cursor:pointer;color:var(--muted);font-size:.85rem}
.erweitert[open] > summary{margin-bottom:.6rem}