@font-face{
  font-family:'Open Sans'; font-style:normal; font-weight:300 800; font-display:swap;
  src:url('/assets/fonts/OpenSans-Variable.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  color-scheme:light;
  --bg:#f5f2ed; --panel:#fff; --panel-2:#faf8f4; --border:#e6e2da; --border-2:#efece5;
  --text:#1b2429; --muted:#5f6b70; --faint:#95a0a5;
  --navy:#25333a; --navy-2:#2f434c; --rust:#186881; --rust-2:#1e7f9d; --gold:#f8b236; --gold-2:#e5a02a;
  --accent:#f8b236; --accent-strong:#e5a02a; --accent-weak:#fdf4e2; --accent-ink:#25333a;
  --green:#158a4d; --red:#d0342c; --amber:#b45309;
  --shadow:0 1px 2px rgba(15,20,35,.04),0 1px 3px rgba(15,20,35,.05);
  --shadow-md:0 10px 24px -8px rgba(23,32,57,.16),0 2px 6px rgba(23,32,57,.06);
  --shadow-lg:0 24px 48px -16px rgba(23,32,57,.28);
  /* Schriftgroessen: sieben Stufen fuer das ganze Tool. Jede Angabe im Tool
     greift auf eine davon zu, damit nichts mehr um ein halbes Pixel danebenliegt. */
  --fs-mark:11px; --fs-klein:12.5px; --fs-text:14px; --fs-gross:16px;
  --fs-zahl:20px; --fs-zahl-xl:28px; --fs-h1:38px;
  --radius:20px; --radius-sm:10px;
  --ease:cubic-bezier(.2,.7,.3,1);
  /* Seitenleiste: immer dunkles Marken-Blau, unabhaengig vom Hell/Dunkel-Modus */
  --side-bg:#186881; --side-text:rgba(255,255,255,.74); --side-text-dim:rgba(255,255,255,.55); --side-active-bg:rgba(255,255,255,.16); --side-active-text:#fff; --side-border:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
/* hidden muss staerker sein als die display-Regeln der Bauteile, sonst bleibt Verstecktes sichtbar */
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:'Open Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--fs-text);line-height:1.5;-webkit-font-smoothing:antialiased;font-feature-settings:'cv11','ss01'}
.dlogo{width:150px;height:auto;display:block;filter:brightness(0) invert(1)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--border);
  background:var(--panel);color:var(--text);padding:11px 18px;border-radius:14px;font-weight:600;font-size:var(--fs-text);
  cursor:pointer;text-decoration:none;transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease)}
.btn:hover{background:var(--panel-2);box-shadow:var(--shadow);transform:translateY(-1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
/* Beim Zeigen wird aus Gold Petrol, ueberall im Tool gleich. */
.btn.primary:hover{background:var(--rust);border-color:var(--rust);color:#fff;box-shadow:var(--shadow-md)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
/* Anmeldeknopf: beim Darüberfahren Petrol statt dunkler Gold. Gold auf Gold war
   kaum ein Unterschied, Petrol ist die Farbe, die das Tool ohnehin überall führt. */

/* Auth-Karten */
.authwrap{min-height:100vh;display:grid;place-items:center;padding:30px;
  background:radial-gradient(1200px 500px at 15% -10%,color-mix(in srgb,var(--navy) 16%,transparent),transparent),
             radial-gradient(900px 400px at 100% 110%,color-mix(in srgb,var(--rust) 10%,transparent),transparent),var(--bg)}
.authcard{width:100%;max-width:410px;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:36px 32px;text-align:center}
.authcard .dlogo{width:160px;margin:0 auto 24px;filter:none}
.authcard h1{font-size:var(--fs-zahl-xl);margin:0 0 8px;letter-spacing:-.005em;font-weight:400}
.authcard .lead{color:var(--muted);margin:0 0 24px;font-size:var(--fs-text)}
.authcard .btn{width:100%}
.foot-note{color:var(--faint);font-size:var(--fs-klein);margin:18px 0 0}
.msg{margin-top:14px;padding:10px 12px;border-radius:10px;font-size:var(--fs-klein);font-weight:600;text-align:left}
.msg.err{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
.msg.ok{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}

/* App-Layout */
.app{display:grid;grid-template-columns:252px 1fr;min-height:100vh;background:var(--bg)}
.side{background:linear-gradient(180deg,var(--side-bg) 0%,#12556a 100%);padding:22px 16px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 26px;text-decoration:none}
.nav{display:flex;flex-direction:column;gap:3px;margin-top:4px}
.nav a{position:relative;display:flex;align-items:center;gap:11px;padding:10px 14px;border-radius:10px;color:var(--side-text);text-decoration:none;font-weight:500;font-size:var(--fs-text);transition:background .15s var(--ease),color .15s var(--ease)}
.nav a svg{width:18px;height:18px;flex:none;opacity:.85}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.active{background:var(--side-active-bg);color:var(--side-active-text);font-weight:600}
.nav a.active svg{opacity:1}
.nav a.active::before{content:'';position:absolute;left:-16px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--gold)}
.nav-parent{padding:9px 10px 4px;color:var(--side-text-dim);font-weight:700;font-size:var(--fs-mark);text-transform:uppercase;letter-spacing:.5px;margin-top:6px}
/* Aufklappbare Gruppen in der Seitenleiste. Aufgeklappt ist der Normalfall: die
   Gruppen trennen optisch, sie verstecken nichts. Zuklappen kann, wer mag. */
.nav-gruppe{margin-top:10px}
.nav-gruppe:first-child{margin-top:0}
.nav-kopf{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px;
  padding:7px 10px 5px;border:none;background:none;cursor:pointer;text-align:left;
  color:var(--side-text-dim);font-weight:700;font-size:var(--fs-mark);text-transform:uppercase;letter-spacing:.5px;
  font-family:inherit;transition:color .15s var(--ease)}
.nav-kopf:hover{color:#fff}
.nav-pfeil{width:13px;height:13px;flex:none;opacity:.6;transition:transform .18s var(--ease)}
.nav-gruppe.zu .nav-pfeil{transform:rotate(-90deg)}
.nav-gruppe.zu .nav-kinder{display:none}
.nav-kinder{display:flex;flex-direction:column;gap:3px}
.nav-einzeln{margin-top:14px}
.nav-sub{display:block;padding:8px 10px 8px 22px;border-radius:9px;color:var(--side-text);text-decoration:none;font-weight:500}
.nav-sub:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-sub.active{background:var(--side-active-bg);color:var(--side-active-text);font-weight:600}
.side-foot{margin-top:auto;border-top:1px solid var(--side-border);padding-top:14px;display:flex;align-items:center;gap:10px}
.avatar{width:32px;height:32px;flex:none;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;font-weight:700;font-size:var(--fs-klein)}
.who{font-size:var(--fs-klein);font-weight:600;line-height:1.25;color:#fff;min-width:0}.who small{display:block;color:#4ade80;font-size:var(--fs-mark);font-weight:500;margin-top:3px}
.logout{margin-left:auto;color:var(--side-text-dim);font-size:var(--fs-klein);text-decoration:none;font-weight:600}
.logout:hover{color:#fff}
.main{padding:28px 32px 48px;min-width:0}
.top{display:flex;align-items:stretch;gap:14px;margin-bottom:28px;padding-bottom:22px;border-bottom:1px solid var(--border)}
/* Der Balken ist genau so hoch wie die erste Zeile der Ueberschrift und steht oben
   buendig mit ihr. Vorher streckte er sich ueber die ganze Kopfzeile und reichte damit
   weit unter den Titel, bis zur Erklaerung darunter. */
.top-accent{width:4px;border-radius:3px;background:linear-gradient(180deg,var(--navy),var(--gold));flex:none;
  align-self:flex-start;height:calc(var(--fs-h1) * 1.08)}
/* Überschrift und Unterzeile untereinander: die Unterzeile ist oft zu lang für eine Zeile */
.top-head{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0}
.top h1{font-size:var(--fs-h1);margin:0;font-weight:400;letter-spacing:-.005em;line-height:1.08}
/* Die Erklaerung unter der Ueberschrift ist ein Satz, keine Auszeichnung: normale
   Groesse, normales Gewicht, kein Rahmen. */
.top .sub{display:block;background:none;border:0;border-radius:0;padding:0;
  color:var(--muted);font-size:var(--fs-text);font-weight:400;line-height:1.5;max-width:900px}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px;align-self:center}
.empty{max-width:520px;margin:8vh auto 0;text-align:center;color:var(--muted)}
.empty-ico{font-size:var(--fs-h1);color:var(--navy);margin-bottom:8px}
.empty h2{color:var(--text);font-size:var(--fs-gross);margin:0 0 8px}
/* Karten, Tabelle, Formular (Nutzer-Seite) */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;max-width:720px}
/* Der Kartenkopf traegt drei Dinge auf einer Grundlinie: den Titel fett, daneben
   die Naeherbestimmung und ganz rechts die Zahl. Frueher stand der rechte Teil als
   Float daneben und sass dadurch ein paar Pixel zu hoch. */
.card-h{display:flex;align-items:baseline;gap:9px;padding:14px 18px;font-weight:700;
  font-size:var(--fs-gross);color:#fff;
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 45%,var(--rust) 100%)}
.tbl{width:100%;border-collapse:collapse}
.tbl thead{background:var(--panel-2);border-bottom:1px solid var(--border)}
.tbl thead th{text-align:left;font-size:var(--fs-klein);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;padding:12px 18px}
.tbl thead th.sortcol{cursor:pointer;user-select:none;position:relative;padding-right:24px}
.tbl thead th.sortcol:hover{opacity:.85}
.tbl thead th.sortcol::after{content:'';position:absolute;right:8px;top:50%;margin-top:-3px;border:4px solid transparent;opacity:.45}
.tbl thead th.sortcol.sort-asc::after{border-bottom-color:var(--muted);border-top-width:0;opacity:1}
.tbl thead th.sortcol.sort-desc::after{border-top-color:var(--muted);border-bottom-width:0;opacity:1}
/* th als Zeilen-Beschriftung innerhalb einer Tabelle (z. B. Systemdetails), kein Spalten-Kopf */
.tbl tbody th{text-align:left;font-weight:600;color:var(--muted);font-size:var(--fs-text);padding:12px 16px;border-bottom:1px solid var(--border-2);white-space:nowrap}
.tbl td{padding:13px 18px;border-bottom:1px solid var(--border-2)}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background .12s ease}
.tbl tbody tr:hover{background:var(--panel-2)}
.tbl tr.grouprow td{background:var(--panel-2);font-size:var(--fs-klein);text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--muted);padding:11px 18px}
.tbl tr.grouprow:hover{background:var(--panel-2)}
.tbl tr.grouprow .cnt{color:var(--faint);font-weight:600;margin-left:6px;text-transform:none;letter-spacing:normal}
.ugrp-heading{background:var(--panel-2);font-size:var(--fs-klein);text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--muted);padding:11px 18px;border-bottom:1px solid var(--border-2)}
.ugrp-heading .cnt{color:var(--faint);font-weight:600;margin-left:6px;text-transform:none;letter-spacing:normal}
.muted{color:var(--muted)}
.form{padding:16px}
.frow{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.frow label{width:80px;color:var(--muted);font-weight:600;font-size:var(--fs-klein)}
.form input,.form select,.form textarea,.linkbox input{flex:1;min-width:0;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:11px 13px;color:var(--text);font-size:var(--fs-text);font-family:inherit;transition:border-color .15s var(--ease)}
.form input:focus,.form select:focus,.form textarea:focus,.linkbox input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 14%,transparent)}
/* Mehrzeilige Felder: die Beschriftung steht oben, nicht auf halber Höhe daneben. */
.frow:has(textarea){align-items:flex-start}
.frow:has(textarea) label{padding-top:11px}
.form textarea{resize:vertical;line-height:1.5}
.linkbox{display:flex;gap:10px}
.linkbox input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-klein)}
#enroll-code,#enroll-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1px}
.st{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:var(--fs-mark);padding:5px 12px;border-radius:999px;color:#fff}
.st .d{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.85)}
.st.on{background:var(--green)}
.st.off{background:var(--red)}
.st.pending{background:var(--faint)}
.ubadge{display:inline-block;padding:5px 12px;border-radius:999px;font-size:var(--fs-mark);font-weight:700;color:#fff}
.ubadge.ok{background:var(--green)}
.ubadge.n{background:var(--amber)}

/* Updates-Ansicht */
.hidden{display:none}
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.toolbar .hint{color:var(--faint);font-size:var(--fs-klein)}
.filtersel{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:9px 14px;color:var(--text);font-size:var(--fs-text);font-weight:600;font-family:inherit;cursor:pointer;box-shadow:var(--shadow)}
.filtersel:focus{outline:none;border-color:var(--navy)}
.chk{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-klein);font-weight:600;color:var(--muted);cursor:pointer}
.seg{display:inline-flex;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px;box-shadow:var(--shadow)}
.seg button,.seg a{border:none;background:transparent;color:var(--muted);font-weight:600;font-size:var(--fs-klein);padding:8px 15px;border-radius:8px;cursor:pointer;text-decoration:none}
.seg button.active,.seg a.active{background:var(--navy);color:#fff}
.ugrp{border-bottom:1px solid var(--border-2)}
.ugrp:last-child{border-bottom:none}
.ugrp summary{list-style:none;display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer}
.ugrp summary::-webkit-details-marker{display:none}
.ugrp summary:hover{background:var(--panel-2)}
#view-byupdate .ugrp summary{display:grid;grid-template-columns:108px 1fr 68px 130px auto auto;align-items:center}
.tbl-updhead{display:grid;grid-template-columns:108px 1fr 68px 130px auto auto;align-items:center;gap:12px;padding:14px 18px;
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy) 45%,var(--rust) 100%);color:#fff;font-size:var(--fs-gross);font-weight:400}
.tbl-updhead .sortcol{cursor:pointer;user-select:none;position:relative;padding-right:18px}
.tbl-updhead .sortcol:hover{opacity:.85}
.tbl-updhead .sortcol::after{content:'';position:absolute;right:0;top:50%;margin-top:-3px;border:4px solid transparent;opacity:.45}
.tbl-updhead .sortcol.sort-asc::after{border-bottom-color:#fff;border-top-width:0;opacity:1}
.tbl-updhead .sortcol.sort-desc::after{border-top-color:#fff;border-bottom-width:0;opacity:1}
#view-bysite .usub .urow{display:grid;grid-template-columns:108px 1fr 68px 140px auto;align-items:center;padding-left:18px}
.urow-upd{display:grid;grid-template-columns:100px 1fr 68px 130px auto;gap:10px;padding:9px 16px}
.uicon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:var(--fs-klein);flex:none}
.uicon.core,.uicon.site{background:var(--accent-weak);color:var(--navy)}
.uicon.plugin{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber)}
.uicon.theme{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.uname{font-weight:600;font-size:var(--fs-text);min-width:0}
.uname small{display:block;color:var(--faint);font-size:var(--fs-mark);font-weight:500}
.uflag{display:flex;align-items:center}
.uver{font-size:var(--fs-klein);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.uver .to{color:var(--green);font-weight:700}
.ubadge2{font-size:var(--fs-mark);font-weight:700;background:var(--accent-weak);color:var(--navy);padding:4px 10px;border-radius:999px;white-space:nowrap}
.usub{background:var(--panel-2);border-top:1px solid var(--border-2)}
.urow{display:flex;align-items:center;gap:10px;padding:9px 16px 9px 46px;border-bottom:1px solid var(--border-2);font-size:var(--fs-klein)}
.urow:last-child{border-bottom:none}
.urow .cur{margin-left:auto;color:var(--faint);font-size:var(--fs-klein);font-variant-numeric:tabular-nums}
#view-bysite .usub .urow .cur{margin-left:0;white-space:nowrap}
.uacts{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.xbtn{width:34px;height:34px;border:1px solid var(--border);background:var(--panel);border-radius:10px;color:var(--faint);cursor:pointer;font-size:var(--fs-text);line-height:1;display:inline-grid;place-items:center;transition:all .15s var(--ease)}
.xbtn:hover{background:var(--red);color:#fff;border-color:var(--red)}
.xbtn svg{width:16px;height:16px}
.xbtn.run:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.xbtn.failed{background:var(--red);color:#fff;border-color:var(--red);cursor:default}
.xbtn.run.spin svg{animation:sh-spin 1s linear infinite}
.xbtn:disabled{opacity:.5;cursor:default}
/* Fleet-Kill-Switch: durchgehend gefuellt (nicht nur beim Hover), Rot/Gruen aus der gleichen Palette
   wie der Rest der Seite. Michael: bei duenn umrandeten Buttons war der Unterschied zwischen aktiven
   und inaktiven Plugins in einer langen Liste kaum zu erkennen, volle Flaeche ist eindeutiger. */
.xbtn.toggle-on{background:var(--green);color:#fff;border-color:var(--green)}
.xbtn.toggle-on:hover{background:color-mix(in srgb,var(--green) 80%,black)}
.xbtn.toggle-off{background:var(--red);color:#fff;border-color:var(--red)}
.xbtn.toggle-off:hover{background:color-mix(in srgb,var(--red) 80%,black)}
.xbtn.toggle-on.spin svg,.xbtn.toggle-off.spin svg{animation:sh-spin 1s linear infinite}
.mini{display:inline-flex;align-items:center;border:1px solid var(--border);background:var(--panel);padding:7px 13px;border-radius:8px;font-weight:600;font-size:var(--fs-klein);cursor:pointer;color:var(--muted);text-decoration:none;transition:all .15s var(--ease)}
.mini svg{width:14px;height:14px;flex:none}
.mini:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.mini:disabled{opacity:.6;cursor:default}
.mini.danger{background:var(--red);color:#fff;border-color:var(--red)}
.mini.danger:hover{background:color-mix(in srgb,var(--red) 80%,black);border-color:color-mix(in srgb,var(--red) 80%,black)}
.mini.success{background:var(--green);color:#fff;border-color:var(--green)}
.mini.success:hover{background:color-mix(in srgb,var(--green) 80%,black);border-color:color-mix(in srgb,var(--green) 80%,black)}
.banner-info{background:var(--accent-weak);color:var(--text);border:1px solid color-mix(in srgb,var(--navy) 20%,transparent);border-radius:12px;padding:11px 15px;margin-bottom:16px;font-size:var(--fs-klein)}
.siterow{display:flex;align-items:center;gap:11px}
.sitelink{color:inherit;text-decoration:none}
.sitelink:hover b{color:var(--navy)}
.favsm{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:var(--fs-text);flex:none;overflow:hidden}
.favsm img{width:100%;height:100%;object-fit:cover;display:block}
/* Seiten-Detail */
.crumb{color:var(--faint);font-size:var(--fs-klein);margin-bottom:14px}
.crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--navy)}
.hero{display:flex;align-items:center;gap:14px;margin-bottom:32px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--border)}
.hero h1{font-size:var(--fs-zahl-xl);margin:0;font-weight:400;letter-spacing:-.005em}
.hero .u{color:var(--muted);font-size:var(--fs-text)}
.hero .acts{margin-left:auto;display:flex;gap:8px;align-items:center}
.settings-menu{position:relative}
.settings-panel{position:absolute;right:0;top:calc(100% + 8px);background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);padding:14px;min-width:220px;z-index:30;text-align:left}
.spanel-label{display:block;font-size:var(--fs-mark);color:var(--muted);font-weight:600;margin-bottom:6px}
.settings-panel select{width:100%;font:inherit;font-size:var(--fs-text);font-weight:600;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--text)}
.settings-panel select:focus{outline:none;border-color:var(--navy)}
.fav-lg{width:50px;height:50px;border-radius:14px;background:var(--accent-weak);color:var(--navy);display:grid;place-items:center;font-weight:700;font-size:var(--fs-zahl);flex:none;overflow:hidden}
.fav-lg img{width:100%;height:100%;object-fit:cover;display:block}
.info{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
.ic{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);transition:box-shadow .18s var(--ease),transform .18s var(--ease);display:flex;align-items:center}
.info .ic:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.ic-top{display:flex;align-items:center;gap:14px;margin-bottom:0}
.ic .ico{width:38px;height:38px;border-radius:50%;background:var(--panel-2);display:grid;place-items:center;flex:none;color:var(--navy)}
.ic .ico svg{width:18px;height:18px}
.ic .k{font-size:var(--fs-klein);color:var(--muted);font-weight:600;display:block;margin-bottom:1px}
.ic .v{font-size:var(--fs-gross);font-weight:700;margin-top:1px;font-variant-numeric:tabular-nums}
.ic .v small{font-weight:500;color:var(--faint);font-size:var(--fs-klein)}
.stat4 .v{font-size:var(--fs-zahl);letter-spacing:-.02em;margin-top:1px}
/* Verlauf aus den eigenen Marken-Toenen: Tiefblau des Artriums nach Petrol. */
.ic.tile-hero{background:linear-gradient(135deg,var(--navy) 0%,#1d4f62 62%,var(--rust) 130%);border-color:transparent}
.ic.tile-hero .k{color:rgba(255,255,255,.72)}
.ic.tile-hero .v{color:#fff}
.ic.tile-hero .ico{background:rgba(255,255,255,.14);color:#fff}

/* ---------- Dashboard-Kopf: 4 Kacheln (Haelfte) + Update-Verlauf (Haelfte), fester 50/50-Split.
   Bewusst NICHT aspect-ratio (Wechselwirkung mit Grid-fr-Spalten war browserabhaengig unzuverlaessig,
   Chromium zeigte korrekte 50/50, live kam ca. 72/26 raus, vermutlich Safari-Grid-Eigenheit).
   Stattdessen der alte, browserunabhaengig zuverlaessige padding-Prozent-Trick: Hoehe wird strikt aus
   der eigenen Breite berechnet (padding-top:100% = Quadrat, 25% fuer die 4x so breite Verlauf-Karte),
   keine Rueckkopplung mit der Zeilenhoehe moeglich. ---------- */
/* Dieselbe Breite wie die Karten darunter. Ohne Grenze lief die Reihe auf breiten
   Bildschirmen immer weiter auseinander, waehrend die Tabellen stehen blieben. */
.dash-top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,4fr);gap:14px;
  margin-bottom:32px;align-items:start;max-width:1300px}
.dash-top .sq-wrap{position:relative;width:100%;padding-top:100%}
.dash-top .sq-wrap.chart-wrap{padding-top:25%}
.dash-top .sq-wrap > .ic,.dash-top .sq-wrap > .trend-card{position:absolute;inset:0;width:100%;height:100%;margin:0}
.dash-top .ic{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;padding:16px;overflow:hidden}
.dash-top .ic-top{flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.dash-top .ic .ico{width:32px;height:32px;flex:none}
.dash-top .ic .ico svg{width:16px;height:16px}
.dash-top .ic .k{font-size:var(--fs-klein)}
.dash-top .ic .v{font-size:var(--fs-zahl)}
.trend-card{max-width:none;display:flex;flex-direction:column}
.trend-title{display:block;padding:12px 16px 0;font-size:var(--fs-text);font-weight:700;color:var(--text)}
.trend-title .trend-sub{font-size:var(--fs-mark);font-weight:500;color:var(--muted)}
/* Sieben Gruppen passen nicht neben den Titel, deshalb eine eigene Zeile darunter */
.trend-legend{display:flex;flex-wrap:wrap;gap:3px 11px;margin:5px 0 0;font-size:var(--fs-mark);color:var(--muted);font-weight:600}
.trend-legend span{display:inline-flex;align-items:center;gap:5px}
.trend-legend i{width:7px;height:7px;border-radius:50%;display:inline-block}
.trend-chart-wrap{flex:1;padding:4px 16px 10px;min-height:0;min-width:0}
.trend-chart-wrap svg{width:100%;height:100%;display:block;min-height:0}
@media(max-width:960px){
  .dash-top{grid-template-columns:repeat(2,1fr)}
  .dash-top .sq-wrap.chart-wrap{grid-column:1 / -1;padding-top:35%}
}

.cols2{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}
.cols2 > div{display:flex}
.cols2 > div .card{flex:1;display:flex;flex-direction:column}
.tl{padding:6px 16px 12px}
.ev{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--border-2);font-size:var(--fs-klein)}
.ev:last-child{border-bottom:none}
.ev .when{margin-left:auto;color:var(--faint);font-size:var(--fs-mark);white-space:nowrap}
@media(max-width:960px){.info{grid-template-columns:repeat(2,1fr)}.cols2{grid-template-columns:1fr}}
.dotk{width:8px;height:8px;border-radius:2px;flex:none}
.dotk.core{background:var(--navy)}.dotk.plugin{background:var(--amber)}.dotk.theme{background:var(--green)}
.tbadge{display:inline-block;width:fit-content;padding:5px 12px;border-radius:999px;font-size:var(--fs-mark);font-weight:700;flex:none;color:#fff;text-align:center}
.tbadge.plugin{background:var(--amber)}
.tbadge.theme{background:var(--green)}
.tbadge.core{background:var(--navy);color:#fff}
.tbadge.lang{background:#7c4fd6}
.majtag{display:inline-block;padding:3px 9px;border-radius:999px;font-size:var(--fs-mark);font-weight:700;background:color-mix(in srgb,var(--rust) 14%,transparent);color:var(--rust);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.ibtn{width:36px;height:36px;border:1px solid var(--border);background:var(--panel);border-radius:10px;display:inline-grid;place-items:center;cursor:pointer;color:var(--muted);transition:all .15s var(--ease)}
.ibtn:hover{background:var(--panel-2);color:var(--navy);border-color:var(--navy);transform:translateY(-1px);box-shadow:var(--shadow)}
.ibtn svg{width:18px;height:18px}
.ibtn:disabled{opacity:.5;cursor:default;transform:none}
.ibtn.accent{background:var(--navy);border-color:var(--navy);color:#fff}
.ibtn.accent:hover{background:var(--navy-2);border-color:var(--navy-2);color:#fff}
.ibtn.spin svg{animation:sh-spin 1s linear infinite}
.ibtn.vulnbad{background:var(--red);border-color:var(--red);color:#fff}
.ibtn.vulnbad:hover{background:color-mix(in srgb,var(--red) 80%,black);border-color:color-mix(in srgb,var(--red) 80%,black)}
.ibtn.vulnok{background:var(--green);border-color:var(--green);color:#fff}
.ibtn.vulnok:hover{background:color-mix(in srgb,var(--green) 80%,black);border-color:color-mix(in srgb,var(--green) 80%,black)}
.ibtn.vulnunknown{background:var(--muted);border-color:var(--muted);color:#fff}
.ibtn.vulnunknown:hover{background:var(--faint);border-color:var(--faint)}
@keyframes sh-spin{to{transform:rotate(360deg)}}

/* ---------- Status-Maskottchen (globaler Auftrags-Anzeiger, freigestellt ohne Kachel) ---------- */
.statusind{height:84px;width:auto;flex:none;border:none;background:none;padding:0;margin:0;
  display:block;cursor:default}
.statusind:not(:first-child){margin-left:8px}
.statusind .si-mascot{height:100%;width:auto;display:block}
.statusind.running{animation:si-bob 1.1s var(--ease) infinite}
@keyframes si-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(max-width:820px){.statusind{height:70px}}

/* ---------- Eigenes Tooltip (data-tip statt Browser-Titel, erscheint sofort) ---------- */
[data-tip]{position:relative}
[data-tip]::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;
  transform:translate(-50%,4px);background:var(--navy);color:#fff;font-size:var(--fs-klein);font-weight:600;
  padding:7px 11px;border-radius:8px;white-space:nowrap;box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .1s ease,transform .1s ease;z-index:60;
}
[data-tip]::before{
  content:'';position:absolute;bottom:calc(100% + 6px);left:50%;width:8px;height:8px;background:var(--navy);
  border-radius:2px;transform:translate(-50%,4px) rotate(45deg);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .1s ease,transform .1s ease;z-index:59;
}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0)}
[data-tip]:hover::before,[data-tip]:focus-visible::before{opacity:1;visibility:visible;transform:translate(-50%,0) rotate(45deg)}
/* Letztes Icon in einer Karte: Tooltip rechtsbündig, sonst wird er vom abgerundeten Kartenrand abgeschnitten */
.card [data-tip]:last-child::after{left:auto;right:-8px;transform:translateY(4px)}
.card [data-tip]:last-child::before{left:auto;right:10px;transform:translateY(4px) rotate(45deg)}
.card [data-tip]:last-child:hover::after,.card [data-tip]:last-child:focus-visible::after{transform:translateY(0)}
.card [data-tip]:last-child:hover::before,.card [data-tip]:last-child:focus-visible::before{transform:translateY(0) rotate(45deg)}

/* ---------- Mobile Hauptmenü: Hamburger-Icon + Slide-in-Drawer statt fester/horizontaler Sidebar ---------- */
.mobile-topbar{display:none}
.sidebar-backdrop{display:none}
.mobile-site-list{display:none}
.mobile-list-head{display:none}
@media (max-width:820px){
  html,body{overflow-x:hidden;max-width:100vw}
  .mobile-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;top:0;left:0;right:0;height:56px;
    padding:0 16px;background:var(--side-bg);z-index:70;box-shadow:var(--shadow-md)}
  .mobile-menu-btn{width:38px;height:38px;flex:none;display:grid;place-items:center;border:none;border-radius:9px;
    background:rgba(255,255,255,.09);color:#fff;cursor:pointer}
  .mobile-menu-btn svg{width:21px;height:21px}
  .dlogo-sm{height:36px;width:auto;filter:brightness(0) invert(1)}
  .sidebar-backdrop{position:fixed;inset:0;background:rgba(10,12,20,.5);z-index:65;opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
  .sidebar-backdrop.open{opacity:1;pointer-events:auto}
  .app{grid-template-columns:1fr;padding-top:56px;max-width:100vw;overflow-x:hidden}
  .side{position:fixed;top:0;left:0;height:100vh;width:264px;z-index:68;
    transform:translateX(-100%);transition:transform .22s var(--ease);
    flex-direction:column;align-items:stretch;overflow-x:visible;overflow-y:auto;padding:72px 16px 22px}
  .side.open{transform:translateX(0);box-shadow:var(--shadow-lg)}
  /* Eigenes Logo im Drawer weg: die fixe Topbar zeigt es schon dauerhaft, ein zweites Mal direkt
     darunter sah nicht nur doppelt aus, es lag durch die hoehere Topbar (z-index 70 vs. 68) auch noch
     halb dahinter versteckt, wirkte dadurch abgeschnitten. Der Drawer beginnt jetzt direkt mit der
     Navigation, mit Abstand von oben (72px Padding), der Platz fuer die Topbar freihaelt. */
  .side .brand{display:none}
  .nav{flex-direction:column}
  .side-foot{display:flex}
  /* Kopfzeile jeder Seite (Farbbalken, Ueberschrift, Info-Pille, Kopf-Knoepfe): ohne Zeilenumbruch
     lief das bei schmalen Bildschirmen aus dem sichtbaren Bereich heraus und erzwang horizontales
     Scrollen auf jeder Seite, nicht nur in Tabellen. Reines flex-wrap reicht aber nicht: dann brach
     die Zeile teils schon zwischen dem duennen Farbbalken (.top-accent) und der Ueberschrift um, der
     Balken landete allein in einer eigenen Zeile ueber dem Titel statt daneben. .top-actions bekommt
     deshalb eine erzwungene eigene Zeile (flex-basis:100%), Farbbalken und Ueberschrift bleiben so
     immer zusammen auf der ersten Zeile. */
  /* Kopfzeile am Telefon als Raster: der Farbbalken steht neben der Ueberschrift,
     Neuladen und Maskottchen bleiben oben rechts in derselben Zeile. */
  .top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;
    column-gap:12px;row-gap:10px}
  /* In der Rasterzeile geben Maskottchen und Knoepfe die Hoehe vor. Balken und
     Ueberschrift stehen deshalb beide mittig, damit sie auf einer Linie sitzen. */
  .top-accent{grid-area:1/1;height:calc(var(--fs-zahl-xl) * 1.08);align-self:center}
  /* Der Kopfblock loest sich auf, damit Ueberschrift und Erklaerung eigene Zellen
     bekommen: die Ueberschrift oben neben dem Balken, die Erklaerung darunter ueber
     die ganze Breite. Sonst muesste sie sich die Zeile mit den Knoepfen teilen. */
  .top-head{display:contents}
  /* Lange Angebotsnamen brechen am Telefon um, statt unter das Maskottchen zu laufen.
     Die Silbentrennung greift, weil die Seite als deutsch ausgezeichnet ist. */
  .top-head > h1{grid-area:1/2/2/3;min-width:0;align-self:center;overflow-wrap:break-word;hyphens:auto}
  .top-head > :not(h1){grid-column:1/-1;grid-row:2}
  .top-actions{grid-area:1/3;margin-left:0;justify-content:flex-end;flex:none;align-self:center}
  .top h1{font-size:var(--fs-zahl-xl)}
}

@media (max-width:820px){
  #view-byupdate .ugrp summary,#view-bysite .usub .urow,.tbl-updhead,.urow-upd{grid-template-columns:84px 1fr auto}
  #view-byupdate .ugrp summary .uflag,#view-byupdate .ugrp summary .uver,#view-bysite .usub .urow .uflag,#view-bysite .usub .urow .uver,
  #view-byupdate .ugrp summary .ubadge2,.tbl-updhead .col-version,.tbl-updhead .col-sites,.urow-upd .uflag,.urow-upd .cur{display:none}
  /* Echte HTML-Tabelle (table-layout:fixed) auf der Uebersicht verhielt sich auf echtem Mobile
     Safari nachweislich anders als in jedem Test (mehrere Anlaeufe: display:none auf den versteckten
     Spalten, dann zusaetzlich width:0, dann eine <colgroup> mit expliziten <col>-Breiten, immer
     blieb der Seitenname unsichtbar). Statt weiter an table-layout:fixed zu reparieren, wird die
     Tabelle auf Mobile komplett durch eine zweite, parallele Liste ersetzt (.mobile-site-list in
     dashboard.php), die dasselbe Flexzeilen-Muster nutzt wie Backups/Updates/Kill-Switch, wo es
     nachweislich funktioniert. */
  .tbl-sites{display:none}
  .mobile-site-list{display:block}
  .mobile-list-head{display:block}
  .card{overflow-x:auto}
  .authwrap{padding:16px}
  .authcard{padding:28px 22px}
  .msrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:11px 16px;border-bottom:1px solid var(--border-2)}
  .msrow:last-child{border-bottom:none}
  .msrow .siterow{flex:1 1 160px;min-width:0}
  .msrow .siterow > span:last-child{min-width:0;overflow:hidden}
  .msrow .siterow b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* URL unter dem Namen mobil weg, Michael: der Name allein reicht, spart Platz in der Zeile. */
  .msrow .siterow .muted{display:none}
  .msrow-acts{display:flex;align-items:center;gap:8px;margin-left:auto}
  /* Auf der Uebersicht bleibt neben Login zusaetzlich das Sicherheits-Icon sichtbar (Michael: eine der
     wichtigsten Warnungen unterwegs), nur der DB+Dateien-Sammel-Knopf gibt es in der Mobile-Liste
     erst gar nicht (siehe dashboard.php). */

  /* Gemeinsames Zeilen-Muster (Backups pro Seite, Updates "Nach Seite" pro Seite, Kill-Switch pro Plugin):
     Icon + Name + Zaehl-Pille + ein oder zwei Aktions-Knoepfe passen bei langen Namen nicht mehr in eine
     Zeile. Statt horizontal zu ueberlaufen, darf die Zeile umbrechen, Name bekommt Ellipsis statt Umbruch
     mitten im Wort. */
  .ugrp summary{flex-wrap:wrap;row-gap:8px}
  .ugrp summary .uname{flex:1 1 140px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ugrp summary .uname small{white-space:normal;overflow:visible;text-overflow:clip}
  .urow{padding-left:18px;flex-wrap:wrap;row-gap:6px}

  /* Backups: auf dem Handy zaehlt vor allem der schnelle Sammel-Knopf, die zwei Einzel-Knoepfe (nur DB,
     nur Dateien) verschwinden aus der Kopfzeile, damit dort Platz fuer Name und Sammel-Knopf bleibt. */
  #backups-page .ugrp summary .js-backup,#backups-page .ugrp summary .js-backup-files{display:none}
}

/* ---------- Mehrtages-Kalender im Modul Termine ---------- */
.kal-kopf{display:flex;align-items:center;justify-content:center;gap:16px;margin:4px 0 14px}
.kal-spanne{font-weight:700;font-size:var(--fs-text);color:var(--navy);min-width:260px;text-align:center}
.kal-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.kal-monat{background:var(--panel-2);border:1px solid var(--border-2);border-radius:14px;padding:12px 12px 14px}
.kal-monat-h{text-align:center;font-weight:700;font-size:var(--fs-text);color:var(--navy);margin:2px 0 10px}
.kal-gitter{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.kal-wt{text-align:center;font-size:var(--fs-mark);font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);padding:2px 0 6px}
.kal-tag{aspect-ratio:1/1;display:grid;place-items:center;border:1px solid transparent;border-radius:9px;
  background:var(--panel);color:var(--text);font-size:var(--fs-klein);font-weight:600;cursor:pointer;
  transition:background .12s var(--ease),color .12s var(--ease),border-color .12s var(--ease)}
.kal-tag:hover:not(:disabled){background:var(--accent-weak);border-color:var(--accent)}
.kal-tag.leer{background:transparent;cursor:default;border-color:transparent}
.kal-tag.aus{color:var(--faint);background:transparent;cursor:not-allowed}
.kal-tag.wochenende:not(.gewaehlt):not(.belegt){color:var(--muted);background:var(--panel-2)}
.kal-tag.heute{box-shadow:inset 0 0 0 2px var(--rust-2)}
.kal-tag.belegt{background:color-mix(in srgb,var(--rust) 16%,transparent);color:var(--rust);cursor:not-allowed;font-weight:700}
.kal-tag.gewaehlt{background:var(--accent);border-color:var(--accent-strong);color:var(--accent-ink);font-weight:800}
/* Schliesszeiten-Kalender: gesetzliche Feiertage stehen nur da, sie lassen sich
   nicht pflegen (die Website rechnet sie selbst). Deshalb ein eigener, ruhiger Ton. */
.kal-tag.feiertag:not(.gewaehlt):not(.belegt){background:var(--tag-feier);border-color:var(--tag-feier-rand);color:var(--tag-feier-schrift);font-weight:700}
/* Ein aufgezogener Bereich: die Enden bekommen die runde Ecke, die Mitte bleibt eckig.
   Nur im Sperrzeiten-Kalender: im Terminkalender werden einzelne Tage gewaehlt,
   dort soll jeder Tag seine runde Ecke behalten. */
#sz-kal .kal-tag.gewaehlt{border-radius:0}
#sz-kal .kal-tag.gewaehlt.start{border-top-left-radius:9px;border-bottom-left-radius:9px}
#sz-kal .kal-tag.gewaehlt.ende{border-top-right-radius:9px;border-bottom-right-radius:9px}
#sz-kal .kal-tag.gewaehlt.start.ende{border-radius:9px}
.kal-gewaehlt{margin-top:16px;padding:12px 14px;background:var(--panel-2);border:1px solid var(--border-2);border-radius:12px}
.kal-gewaehlt-h{font-size:var(--fs-mark);font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.kal-chips{display:flex;flex-wrap:wrap;gap:6px}
.kal-chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--border);
  border-radius:999px;padding:5px 8px 5px 11px;font-size:var(--fs-klein);font-weight:600}
.kal-chip button{border:none;background:transparent;color:var(--faint);cursor:pointer;font-size:var(--fs-text);line-height:1;padding:0 2px}
.kal-chip button:hover{color:var(--red)}
.kal-legende{display:flex;flex-wrap:wrap;gap:16px;margin:14px 0 22px;font-size:var(--fs-klein);color:var(--muted)}
.kal-legende span{display:inline-flex;align-items:center;gap:6px}
.kal-legende i{width:12px;height:12px;border-radius:4px;display:inline-block}

.zusatzbox{margin-top:20px;padding:14px 16px;background:var(--panel-2);border:1px solid var(--border-2);border-radius:12px}
.vorschau{margin-top:16px;padding:14px 16px;background:var(--accent-weak);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:12px}
.vorschau-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:3px 0}
.vorschau-zeile span{font-size:var(--fs-klein);font-weight:600;color:var(--muted);flex:none}
.vorschau-zeile b{font-size:var(--fs-text);color:var(--navy);text-align:right}

@media (max-width:900px){
  .kal-wrap{grid-template-columns:1fr}
  .kal-spanne{min-width:0;font-size:var(--fs-text)}
}

/* ---------- Belegungskalender im Modul Auswertungen ---------- */
.bel-kopf{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.bel-nav{display:flex;align-items:center;gap:10px}
.bel-nav .ibtn{font-size:var(--fs-zahl);line-height:1;text-decoration:none;font-weight:600}
.bel-monat{font-size:var(--fs-zahl);font-weight:700;color:var(--navy);min-width:190px;text-align:center}
.bel-zahlen{display:flex;gap:22px;font-size:var(--fs-klein);color:var(--muted)}
.bel-zahlen b{display:block;font-size:var(--fs-zahl);font-weight:700;color:var(--navy);line-height:1.2}

.bel{padding:14px 16px 18px}
.bel-wt{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-bottom:6px}
.bel-wt div{font-size:var(--fs-mark);font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);padding:0 4px 4px}
.bel-woche{margin-bottom:4px;position:relative}
.bel-tage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
/* Die Zelle waechst mit der Zahl der Balken, die in dieser Woche liegen */
.bel-tag{min-height:calc(46px + var(--spuren,0) * 30px);background:var(--panel-2);border:1px solid var(--border-2);border-radius:10px;padding:5px 7px}
.bel-tag.fremd{background:transparent;border-color:transparent}
.bel-tag.fremd .bel-nr{color:var(--faint)}
.bel-tag.heute{border-color:var(--rust-2);box-shadow:inset 0 0 0 1px var(--rust-2)}
.bel-nr{font-size:var(--fs-klein);font-weight:700;color:var(--muted)}

/* Die Balken liegen ueber den Zellen, beginnend unter der Tageszahl */
.bel-spuren{position:absolute;left:0;right:0;top:28px;display:flex;flex-direction:column;gap:4px}
.bel-spur{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:0 1px}
.bel-balken{display:flex;align-items:center;gap:7px;min-width:0;height:26px;padding:0 9px;color:#fff;
  font-size:var(--fs-klein);font-weight:600;border-radius:4px;overflow:hidden;white-space:nowrap;cursor:default;
  box-shadow:0 1px 2px rgba(15,20,35,.14)}
.bel-balken.beginnt{border-top-left-radius:13px;border-bottom-left-radius:13px;padding-left:5px}
.bel-balken.endet{border-top-right-radius:13px;border-bottom-right-radius:13px}
.bel-balken.geplant{opacity:.62;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.22) 0 5px,transparent 5px 10px)}
.bel-kuerzel{flex:none;background:rgba(0,0,0,.22);border-radius:9px;padding:1px 6px;font-size:var(--fs-mark);font-weight:800;letter-spacing:.3px}
.bel-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.bel-zahl{flex:none;font-weight:800;background:rgba(255,255,255,.2);border-radius:9px;padding:1px 7px;font-size:var(--fs-mark)}
.bel-punkt{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:7px;vertical-align:baseline}

@media (max-width:900px){
  .bel-tag{min-height:calc(38px + var(--spuren,0) * 26px)}
  .bel-balken{height:22px;font-size:var(--fs-mark);padding:0 5px;gap:4px}
  .bel-spuren{top:24px}
  .bel-name{display:none}
  .bel-wt div{font-size:0}
  .bel-wt div::first-letter{font-size:var(--fs-mark)}
  .bel-zahlen{gap:16px}
}

/* ---------- Dialoge ---------- */
.dlg{border:none;padding:0;background:transparent;max-width:560px;width:calc(100% - 32px)}
.dlg::backdrop{background:rgba(23,32,57,.45);backdrop-filter:blur(2px)}
.dlg-inner{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:26px 26px 22px}
.dlg-h{margin:0 0 8px;font-size:var(--fs-zahl);font-weight:400;color:var(--navy);letter-spacing:-.005em}
.dlg-lead{margin:0 0 16px;color:var(--muted);font-size:var(--fs-text)}
.dlg-warn{background:color-mix(in srgb,var(--amber) 14%,transparent);color:var(--amber);
  border-radius:10px;padding:10px 12px;font-size:var(--fs-klein);font-weight:600;margin-bottom:14px}
.dlg-tbl{font-size:var(--fs-klein)}
.dlg-tbl th,.dlg-tbl td{padding:7px 10px}
.dlg-akt{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.btn.primary.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.primary.danger:hover{background:color-mix(in srgb,var(--red) 82%,black);border-color:color-mix(in srgb,var(--red) 82%,black)}
.dlg select,.dlg input[type=text]{width:100%}

/* Symbolknöpfe in Tabellenzeilen */
.uacts{display:inline-flex;align-items:center;gap:7px}
.xbtn.run:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* Anklickbare Balken im Belegungskalender */
.bel-balken.klickbar{text-decoration:none;cursor:pointer;transition:filter .12s var(--ease),transform .12s var(--ease)}
.bel-balken.klickbar:hover{filter:brightness(1.12);transform:translateY(-1px);box-shadow:0 3px 8px rgba(15,20,35,.22)}

/* Detailseite eines Termins: Buchungen links, Termin und Aktionen rechts */
.detail-spalten{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start;max-width:1300px}
.detail-spalten > .card,.detail-spalten .card{max-width:none}
.detail-spalten .notiz{display:block;max-width:220px}
@media (max-width:1000px){ .detail-spalten{grid-template-columns:1fr} }

/* Dauerhafter Hinweis auf Dinge, die zu klären sind */
.warnbalken{display:flex;gap:13px;align-items:flex-start;max-width:1300px;margin-bottom:18px;padding:14px 16px;
  background:color-mix(in srgb,var(--amber) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--amber) 38%,transparent);
  border-radius:14px;color:var(--text);font-size:var(--fs-text)}
.warnbalken > svg{width:20px;height:20px;flex:none;color:var(--amber);margin-top:1px}
.warnbalken b{color:var(--amber)}
.warn-liste{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.warn-liste a{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--navy) 30%,transparent);align-self:flex-start}
.warn-liste a:hover{border-bottom-color:var(--navy)}
.warn-fuss{margin-top:9px;color:var(--muted);font-size:var(--fs-klein)}
/* Zweiter Balken: eine offene Aufgabe, kein Alarm. Deshalb Petrol statt Bernstein. */
.warnbalken.info{background:color-mix(in srgb,var(--rust) 9%,var(--panel));border-color:color-mix(in srgb,var(--rust) 32%,transparent)}
.warnbalken.info > svg{color:var(--rust)}
.warnbalken.info b{color:var(--rust)}
.warn-btn{margin-top:11px}

/* Symbolknöpfe am rechten Rand: ihre Erklärung wächst nach innen statt nach außen.
   Sonst schneidet eine Karte mit overflow:hidden sie ab, und dort, wo nichts abschneidet,
   verbreitert das unsichtbare Pseudoelement die ganze Seite und erzeugt Querscrollen. */
.uacts [data-tip]::after,.top-actions [data-tip]::after{left:auto;right:0;transform:translate(0,4px)}
.uacts [data-tip]:hover::after,.uacts [data-tip]:focus-visible::after,
.top-actions [data-tip]:hover::after,.top-actions [data-tip]:focus-visible::after{transform:translate(0,0)}
.uacts [data-tip]::before,.top-actions [data-tip]::before{left:auto;right:13px;transform:translate(0,4px) rotate(45deg)}
.uacts [data-tip]:hover::before,.uacts [data-tip]:focus-visible::before,
.top-actions [data-tip]:hover::before,.top-actions [data-tip]:focus-visible::before{transform:translate(0,0) rotate(45deg)}

/* Kalender-Einstellungen */
.kal-hilfe{margin-top:20px;border-top:1px solid var(--border-2);padding-top:14px}
.kal-hilfe summary{cursor:pointer;font-weight:600;font-size:var(--fs-text);color:var(--navy);list-style:none}
.kal-hilfe summary::-webkit-details-marker{display:none}
.kal-hilfe summary::before{content:'▸ ';color:var(--faint)}
.kal-hilfe[open] summary::before{content:'▾ '}
.kal-hilfe p{color:var(--muted);font-size:var(--fs-klein);line-height:1.6;margin:12px 0 0}

/* Kalenderzellen sind mindestens zwei Balken hoch, damit der Monat nicht flach wirkt */
.bel-tag{min-height:calc(46px + max(var(--spuren,0), 2) * 30px)}
@media (max-width:900px){ .bel-tag{min-height:calc(38px + max(var(--spuren,0), 2) * 26px)} }

/* Übersicht: die beiden Karten unter den Kacheln nebeneinander */
.start-spalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start;max-width:1300px}
.start-spalten .card{max-width:none}
@media (max-width:1000px){ .start-spalten{grid-template-columns:1fr} }

/* Zahl offener Fälle in der Seitenleiste */
.nav-zahl{margin-left:auto;background:var(--gold);color:var(--navy);font-weight:800;font-size:var(--fs-mark);
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.nav a.active .nav-zahl{background:var(--gold);color:var(--navy)}

/* Auswertungen: Zeitraumwahl und Fußzeile mit PDF-Knopf */
.aus-kopf{display:flex;align-items:center;gap:16px;flex-wrap:wrap;max-width:1300px;margin-bottom:18px}
.aus-spanne{font-size:var(--fs-klein);color:var(--muted);font-weight:600}
.seg #btn-zeitraum{display:inline-flex;align-items:center;justify-content:center;padding:7px 12px}
.seg #btn-zeitraum.active{background:var(--navy);color:#fff}
.aus-fuss{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:14px 16px;border-top:1px solid var(--border-2)}
.aus-fuss span{color:var(--muted);font-size:var(--fs-klein);max-width:760px}
.dlg input[type=date]{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:9px;font:inherit;font-size:var(--fs-text);background:var(--panel);color:var(--text)}
.card-h-sub{margin-left:auto;font-size:var(--fs-klein);font-weight:400;opacity:.8;white-space:nowrap}
.card-h-nach{font-size:var(--fs-klein);font-weight:400;opacity:.75}
.card-h .ubadge2{align-self:center}
.tbl tfoot td{border-top:2px solid var(--border);background:var(--panel-2);padding:12px 14px}

/* Verteilung: zwei Kuchen nebeneinander, je Kuchen links und Legende rechts */
.kuchen-paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px;max-width:1300px;align-items:start}
.kuchen-paar .card{max-width:none}
.kuchen-box{display:grid;grid-template-columns:210px minmax(0,1fr);gap:18px;align-items:center;padding:18px 20px}
.kuchen{width:200px;height:200px;display:block;filter:drop-shadow(0 2px 6px rgba(15,20,35,.10))}
.kuchen-liste{display:flex;flex-direction:column;gap:1px;min-width:0}
.kuchen-zeile{display:grid;grid-template-columns:12px minmax(0,1fr) 56px;gap:9px;align-items:center;
  padding:6px 9px;border-radius:8px;font-size:var(--fs-klein)}
.kuchen-zeile:nth-child(odd){background:var(--panel-2)}
.kuchen-zeile i{width:11px;height:11px;border-radius:3px;display:block}
.kuchen-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kuchen-prozent{font-weight:800;color:var(--navy);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:1100px){
  .kuchen-paar{grid-template-columns:1fr}
}
@media (max-width:700px){
  .kuchen-box{grid-template-columns:1fr;justify-items:center}
  .kuchen-liste{width:100%}
}

/* Symbolknöpfe tragen ihren Ton dauerhaft, nicht erst beim Darüberfahren.
   So sieht man auf einen Blick, was eine Zeile anbietet und wie weit eine Aktion
   reicht: Gold führt nur woandershin, Blau ändert etwas Umkehrbares, Rot nimmt
   etwas aus dem Verkauf oder storniert. Beim Darüberfahren füllt sich die Fläche.
   Steht am Ende der Datei, damit es die geerbten Hover-Regeln von .xbtn und
   .xbtn.run überstimmt, die aus Sitehub stammen. */
.xbtn.ton-gold{color:var(--gold-2);border-color:color-mix(in srgb,var(--gold) 58%,transparent);
  background:color-mix(in srgb,var(--gold) 13%,var(--panel))}
.xbtn.ton-gold:hover{background:var(--gold);border-color:var(--gold);color:var(--accent-ink)}
.xbtn.ton-blau{color:var(--rust);border-color:color-mix(in srgb,var(--rust) 42%,transparent);
  background:color-mix(in srgb,var(--rust) 9%,var(--panel))}
.xbtn.ton-blau:hover{background:var(--rust);border-color:var(--rust);color:#fff}
.xbtn.ton-rot{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,transparent);
  background:color-mix(in srgb,var(--red) 8%,var(--panel))}
.xbtn.ton-rot:hover{background:var(--red);border-color:var(--red);color:#fff}
.xbtn.ton-gold:disabled,.xbtn.ton-blau:disabled,.xbtn.ton-rot:disabled{opacity:.45}

/* Modul Umfragen: der Aufbau einer Vorlage, Kategorien mit ihren Fragen darunter. */
.kat{border-bottom:1px solid var(--border-2);padding:0 0 4px}
.kat:last-of-type{border-bottom:none}
.kat-kopf{display:flex;align-items:flex-start;gap:12px;padding:14px 16px 10px;background:var(--panel-2)}
.kat-titel{min-width:0;flex:1}
.kat-titel b{font-size:var(--fs-text)}
.kat-titel .muted{margin-left:9px;font-size:var(--fs-klein)}
.kat-kopf .uacts{flex:none}
.frage{display:flex;align-items:flex-start;gap:12px;padding:11px 16px 11px 28px;border-top:1px solid var(--border-2)}
.frage:hover{background:color-mix(in srgb,var(--rust) 3%,transparent)}
.frage-text{min-width:0;flex:1;font-size:var(--fs-text)}
.frage .uacts{flex:none}
.ftyp{display:inline-block;font-size:var(--fs-mark);font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  padding:2px 7px;border-radius:6px;margin:0 6px 5px 0;background:var(--panel-2);color:var(--muted);border:1px solid var(--border)}
.ftyp-note{background:color-mix(in srgb,var(--gold) 20%,var(--panel));color:var(--gold-2);border-color:transparent}
.ftyp-freitext{background:color-mix(in srgb,var(--rust) 12%,var(--panel));color:var(--rust);border-color:transparent}
.ftyp-pflicht{background:color-mix(in srgb,var(--red) 10%,var(--panel));color:var(--red);border-color:transparent}
.ftyp-kern{background:var(--navy);color:#fff;border-color:transparent}
.fopt{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.fopt span{font-size:var(--fs-klein);background:var(--panel-2);border:1px solid var(--border);border-radius:7px;padding:2px 8px;color:var(--muted)}
.kat-fuss{padding:8px 16px 14px 28px}
/* Das Passwort eines Durchgangs: gut lesbar und zum Abtippen gedacht. */
.pw{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-klein);font-weight:700;
  letter-spacing:.5px;white-space:nowrap;
  background:var(--accent-weak);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);
  border-radius:7px;padding:3px 8px;color:var(--navy);user-select:all}

/* Felder in den Dialogen bekommen dieselbe Luft wie im Formular: sie waren dort
   schmal und eng gepolstert, weil .dlg seine eigenen Regeln mitbrachte. */
.dlg-inner input[type=text],.dlg-inner input[type=date],.dlg-inner input[type=number],
.dlg-inner select,.dlg-inner textarea{
  width:100%;min-width:0;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;
  padding:11px 13px;color:var(--text);font-size:var(--fs-text);font-family:inherit;line-height:1.5;
  transition:border-color .15s var(--ease)}
.dlg-inner textarea{resize:vertical}
.dlg-inner input:focus,.dlg-inner select:focus,.dlg-inner textarea:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 14%,transparent)}
.dlg-inner .frow{display:block;margin-bottom:0}
.dlg-inner .frow label{display:block;width:auto;margin-bottom:6px;color:var(--muted);font-weight:600;font-size:var(--fs-klein)}
/* Auswahl mit Erklärung darunter: die Beschriftung darf umbrechen. */
.wahl .chk{align-items:flex-start}
.wahl .chk input{margin-top:3px;flex:none}
.zugang{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.zugang-label{font-size:var(--fs-mark);font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);margin-bottom:6px}

/* Auswertung der Umfragen: Kacheln, Balken je Antwortmoeglichkeit, Freitexte. */
.ausw-kacheln{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:32px;max-width:1300px}
.ausw-kacheln .ic .v{font-size:var(--fs-zahl)}
.ausw-frage{padding:18px 0;border-top:1px solid var(--border-2)}
.ausw-frage:first-child{border-top:0}
.ausw-frage.ist-alt{opacity:.72}
.ausw-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:12px}
/* Die Frage ist die Überschrift ihres Blocks und war mit 14 Pixeln zu klein dafür.
   20 Pixel sind eine Stufe der Schriftgrößen-Leiter und reichen dafür aus. */
.ausw-text{margin:0 0 9px;font-size:var(--fs-zahl);font-weight:600;line-height:1.28;
  letter-spacing:-.005em;color:var(--navy)}
.ausw-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-klein)}
.ausw-zeit{background:color-mix(in srgb,var(--navy) 8%,var(--panel-2));border-radius:999px;padding:3px 10px;
  font-weight:600;color:var(--navy)}
/* Der Durchschnitt ist die Zahl, die man zuerst sucht: volle Flaeche in Petrol,
   Zahl in Weiss. Die Balken daneben tragen dafuer das Gold. */
.ausw-schnitt{flex:none;text-align:center;background:var(--rust);border:1px solid var(--rust);
  border-radius:14px;padding:9px 18px;min-width:98px;box-shadow:var(--shadow)}
.ausw-schnitt b{display:block;font-size:var(--fs-zahl-xl);font-weight:700;color:#fff;font-variant-numeric:tabular-nums;line-height:1.15}
.ausw-schnitt span{display:block;font-size:var(--fs-mark);color:rgba(255,255,255,.78);font-weight:600}
.ausw-balken{display:flex;flex-direction:column;gap:7px}
.ausw-zeile{display:grid;grid-template-columns:minmax(120px,240px) 1fr 108px;align-items:center;gap:12px}
.ausw-label{font-size:var(--fs-text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ausw-label .muted{font-weight:500}
.ausw-bahn{height:12px;border-radius:999px;background:color-mix(in srgb,var(--navy) 7%,var(--panel-2));overflow:hidden}
.ausw-fuell{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold-2),var(--gold))}
.ausw-zahl{font-size:var(--fs-klein);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.ausw-zahl .muted{font-weight:500;font-size:var(--fs-klein)}
.ausw-texte{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow:auto;padding-right:4px}
.ausw-texte blockquote{margin:0;background:var(--panel-2);border-left:3px solid var(--rust);border-radius:0 10px 10px 0;
  padding:11px 14px;font-size:var(--fs-text);line-height:1.55;color:var(--text)}
@media (max-width:1100px){
  .ausw-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ausw-zeile{grid-template-columns:minmax(90px,150px) 1fr 92px}
}

/* Uebersicht der Umfragen: eine Karte je Umfrage, die ganze Karte ist der Weg hinein. */
.uf-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1300px}
.uf-karte{display:flex;flex-direction:column;gap:14px;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;text-decoration:none;color:inherit;
  transition:box-shadow .18s var(--ease),transform .18s var(--ease),border-color .18s var(--ease)}
.uf-karte:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:color-mix(in srgb,var(--rust) 40%,var(--border))}
.uf-karte.ist-zu{opacity:.74}
.uf-kopf h2{margin:0 0 8px;font-size:var(--fs-gross);font-weight:600;line-height:1.3}
.uf-marken{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-klein)}
.uf-zahlen{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto}
.uf-boegen b{display:block;font-size:var(--fs-zahl-xl);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.uf-boegen span{display:block;font-size:var(--fs-klein);color:var(--muted);font-weight:600}
.ausw-schnitt.leer{background:var(--panel-2);border-color:var(--border)}
.ausw-schnitt.leer b{color:var(--faint)}
.ausw-schnitt.leer span{color:var(--muted)}
.uf-fuss{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--border-2);
  padding-top:11px;font-size:var(--fs-klein);color:var(--muted)}
.ausw-zurueck{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;
  font-size:var(--fs-klein);font-weight:600;margin-bottom:14px}
.ausw-zurueck:hover{color:var(--rust)}
.ausw-zurueck svg{width:15px;height:15px}
@media (max-width:1200px){ .uf-karten{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .uf-karten{grid-template-columns:1fr} }

/* Die drei Kacheln ueber der Umfrage-Uebersicht: die erste traegt den Verlauf wie auf
   dem Dashboard, die beiden anderen ein farbiges Symbolfeld. Die Zahl steht gross. */
.kacheln-drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.kacheln-drei .ic{padding:20px}
.kacheln-drei .ic .ico{width:44px;height:44px}
.kacheln-drei .ic .ico svg{width:21px;height:21px}
.kacheln-drei .ic .v{font-size:var(--fs-zahl-xl);line-height:1.1;letter-spacing:-.02em}
.kacheln-drei .ic .v small{font-size:var(--fs-klein);letter-spacing:0}
.kacheln-drei .ic.tile-hero .v small{color:rgba(255,255,255,.66)}
.ico-petrol{background:color-mix(in srgb,var(--rust) 14%,var(--panel)) !important;color:var(--rust) !important}
.ico-gold{background:color-mix(in srgb,var(--gold) 20%,var(--panel)) !important;color:var(--gold-2) !important}
@media (max-width:1100px){ .kacheln-drei{grid-template-columns:1fr} }

/* ===================================================================
   Telefon: aus jeder Tabellenzeile wird eine Karte.
   Die Spaltenbezeichnung steht vor dem Wert, der Name oben, die
   Knoepfe als Reihe darunter. Gesetzt wird das von tabellenFuersTelefon().
   =================================================================== */
/* Huelle um den Zellinhalt, gesetzt von tabellenFuersTelefon(). Am Rechner loest sie
   sich auf, am Telefon haelt sie den Wert als einen Block zusammen. */
.tbl td > .tz{display:contents}

@media (max-width:820px){
  .card-h{flex-wrap:wrap;row-gap:2px}
  .card-h-sub{margin-left:0;flex-basis:100%}
  .tbl thead{display:none}
  .tbl td > .tz{display:block;min-width:0}
  .tbl,.tbl tbody,.tbl tfoot,.tbl tr,.tbl td{display:block;width:auto}
  .tbl tr{padding:14px 16px;border-bottom:1px solid var(--border-2)}
  .tbl tr:last-child{border-bottom:0}
  .tbl tbody tr:nth-child(even){background:var(--panel-2)}
  .tbl td{padding:4px 0;border:0;display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    text-align:right;white-space:normal;overflow-wrap:anywhere}
  .tbl td::before{content:attr(data-sp);color:var(--muted);font-size:var(--fs-klein);font-weight:600;
    text-align:left;flex:none;max-width:45%}
  .tbl td[data-leer]{display:none}

  /* Die erste Zelle traegt den Namen: gross, ueber die ganze Breite, ohne Bezeichnung. */
  .tbl tbody tr > td:first-child,.tbl tfoot tr > td:first-child{display:block;text-align:left;
    font-size:var(--fs-gross);font-weight:700;padding:0 0 8px;line-height:1.3}
  .tbl tbody tr > td:first-child::before,.tbl tfoot tr > td:first-child::before{content:none}
  .tbl tbody tr > td:first-child b{font-weight:700}

  /* Knoepfe stehen unten in einer Reihe und sind mit dem Finger zu treffen. */
  .tbl td[data-knopfe]{display:flex;justify-content:flex-start;gap:10px;padding-top:12px;margin-top:6px;
    border-top:1px solid var(--border-2)}
  .tbl td[data-knopfe]::before{content:none}
  .tbl td[data-knopfe] .uacts{display:flex;gap:10px;margin-left:0;opacity:1;visibility:visible}
  .tbl td[data-knopfe] .xbtn{width:42px;height:42px}
  .tbl td[data-knopfe] .xbtn svg{width:19px;height:19px}
  .tbl td[data-knopfe] .btn{padding:10px 16px}

  /* Haekchen-Spalten (Rechte im Team) bleiben eine Zeile mit Kaestchen rechts. */
  .tbl td input[type=checkbox]{width:22px;height:22px}
}

/* ===================================================================
   Telefon: Dialoge sitzen unten am Rand statt in der Mitte.
   Der Daumen erreicht die Knoepfe, lange Dialoge scrollen in sich,
   statt oben und unten aus dem Bild zu laufen. Die Knopfreihe bleibt
   dabei immer sichtbar.
   =================================================================== */
@media (max-width:820px){
  .dlg{width:100%;max-width:none;margin:auto 0 0;max-height:94dvh}
  /* Unten schliesst die Knopfreihe ab, sie bringt ihren eigenen Abstand mit. */
  .dlg-inner{border-radius:20px 20px 0 0;border-bottom:0;max-height:94dvh;overflow-y:auto;
    padding:22px 18px 0}
  .dlg-h{font-size:var(--fs-gross)}
  .dlg-akt{position:sticky;bottom:0;background:var(--panel);
    margin:18px -18px 0;padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--border-2);gap:10px}
  .dlg-akt .btn{flex:1;min-height:46px;justify-content:center}
  /* Felder in Dialogen: gross genug zum Tippen, und iOS zoomt bei 16px nicht hinein. */
  .dlg-inner input[type=text],.dlg-inner input[type=date],.dlg-inner input[type=number],
  .dlg-inner select,.dlg-inner textarea{font-size:var(--fs-gross);padding:12px 13px}
  .dlg-tbl th,.dlg-tbl td{padding:6px 8px}
}

/* Auswahlfeld statt Segmentleiste, gesetzt von segmenteFuersTelefon(). */
.seg-wahl{display:none}
@media (max-width:820px){
  .seg{display:flex;width:100%;max-width:100%;align-items:center}
  /* Nur dort, wo wirklich ein Auswahlfeld gebaut wurde, treten die Reiter zurueck.
     Kurze Leisten mit zwei Reitern bleiben, wie sie sind. */
  .seg:has(.seg-wahl) a{display:none}
  .seg-wahl{display:block;flex:1;min-width:0;font:inherit;font-size:var(--fs-gross);font-weight:600;
    border:0;background:transparent;color:var(--text);padding:9px 8px;appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
    background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px}
  .seg-wahl:focus{outline:none}
}

@media (max-width:820px){
  /* Auswertung am Telefon: Beschriftung und Zahl in einer Zeile, der Balken darunter
     ueber die volle Breite. Nebeneinander bliebe fuer den Balken kaum Platz. */
  .ausw-zeile{grid-template-columns:1fr auto;grid-template-areas:"label zahl" "bahn bahn";row-gap:5px;column-gap:10px}
  .ausw-label{grid-area:label;white-space:normal}
  .ausw-zahl{grid-area:zahl}
  .ausw-bahn{grid-area:bahn;height:10px}
  .ausw-kopf{flex-direction:column;align-items:flex-start;gap:12px}
  .ausw-schnitt{align-self:stretch;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 16px}
  .ausw-schnitt b{font-size:var(--fs-zahl)}
  .ausw-kacheln,.kacheln-drei{grid-template-columns:1fr;gap:10px}
  .ausw-kacheln .ic{padding:14px 16px}
  .ausw-kacheln .ic-top{flex-direction:row;align-items:center;gap:14px}
  .uf-zahlen{flex-wrap:wrap}
}

/* Reihe von Haekchen (etwa die Bereiche beim Einladen). Am Rechner nebeneinander,
   am Telefon untereinander: vier Bereiche nebeneinander laufen dort ineinander. */
.chk-liste{display:flex;flex-wrap:wrap;gap:10px 20px}
.chk-zeile{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.chk-zeile input{width:18px;height:18px;flex:none}
@media (max-width:820px){
  .chk-liste{flex-direction:column;gap:14px;align-items:flex-start}
  .chk-zeile{width:100%;min-height:32px}
  .chk-zeile input{width:22px;height:22px}
  /* Formularzeilen: Beschriftung ueber das Feld, beides ueber die volle Breite. */
  .form .frow{display:block;margin-bottom:16px}
  /* Nur die Beschriftung der Zeile selbst, nicht die Haekchen-Beschriftungen darin. */
  .form .frow > label{display:block;width:auto;margin-bottom:6px}
  .form .frow > input,.form .frow > select,.form .frow > textarea{width:100%}
  .form .frow:has(textarea) label{padding-top:0}
}

/* Die Zusammenfassung der Freitextantworten. Sie steht ueber den Antworten und traegt
   mehr Gewicht als sie: die Antworten sind der Beleg, sie ist das Ergebnis. */
.dicht{position:relative;padding:2px 0 2px 18px;margin-bottom:18px}
/* Derselbe Balken wie neben der Seitenueberschrift: vier Pixel, Verlauf von Tiefblau
   nach Gold. Kein Kasten drumherum, der Text steht frei daneben. */
.dicht::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:3px;
  background:linear-gradient(180deg,var(--navy),var(--gold))}
.dicht-kopf{display:flex;align-items:center;gap:11px}
.dicht-ico{width:30px;height:30px;flex:none;border-radius:50%;background:var(--rust);color:#fff;
  display:grid;place-items:center}
.dicht-ico svg{width:17px;height:17px}
.dicht-kopf b{font-size:var(--fs-text);letter-spacing:.01em}
.dicht-kopf .btn{margin-left:auto;padding:8px 15px;font-size:var(--fs-klein)}
.dicht-text{margin-top:13px;font-size:var(--fs-gross);line-height:1.65;color:var(--text)}
.dicht-leer{margin:12px 0 0;font-size:var(--fs-klein);color:var(--faint)}
.dicht-fuss{margin:12px 0 0;font-size:var(--fs-mark);color:var(--faint);
  text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.dicht-alt{margin:10px 0 0;font-size:var(--fs-klein);color:var(--amber);font-weight:600}
.dicht-fehler{margin:12px 0 0;font-size:var(--fs-klein);color:var(--red);font-weight:600}
.dicht.laeuft{opacity:.65}
.dicht.laeuft .dicht-ico{animation:dicht-puls 1.1s var(--ease) infinite}
@keyframes dicht-puls{0%,100%{opacity:1}50%{opacity:.45}}
/* Ohne Zusammenfassung tritt der Kasten zurueck, er ist dann nur ein Angebot. */
.dicht.ist-leer::before{opacity:.4}
.dicht.ist-leer .dicht-ico{background:color-mix(in srgb,var(--rust) 14%,var(--panel));color:var(--rust)}

/* Ueberschrift ueber den einzelnen Antworten, damit die Rangfolge klar ist. */
.ausw-wortlaut{margin:0 0 8px;font-size:var(--fs-mark);color:var(--faint);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em}

@media (max-width:820px){
  .dicht{padding-left:14px}
  .dicht-kopf{flex-wrap:wrap}
  .dicht-kopf .btn{margin-left:0;width:100%;justify-content:center;min-height:42px;order:3}
}
}

/* Rezensionen: eine Karte je Stueck, Bild links, Text rechts. */
.rez-liste{display:flex;flex-direction:column;gap:16px;max-width:1300px}
.rez{display:flex;gap:18px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px}
.rez.ist-benutzt{opacity:.72}
.rez-bild{position:relative;flex:none;width:108px;height:108px;border-radius:14px;overflow:hidden;
  background:var(--panel-2);display:block;text-decoration:none}
.rez-bild img{width:100%;height:100%;object-fit:cover;display:block}
.rez-laden{position:absolute;left:0;right:0;bottom:0;padding:5px 0;text-align:center;
  background:rgba(23,32,57,.72);color:#fff;font-size:var(--fs-mark);font-weight:700;
  opacity:0;transition:opacity .15s var(--ease)}
.rez-bild:hover .rez-laden{opacity:1}
.rez-ohne{display:grid;place-items:center;color:var(--navy);font-size:var(--fs-zahl-xl);font-weight:700;
  background:color-mix(in srgb,var(--navy) 8%,var(--panel-2))}
.rez-text{min-width:0;flex:1;display:flex;flex-direction:column}
.rez-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.rez-kopf b{font-size:var(--fs-gross)}
.rez-kurs{background:color-mix(in srgb,var(--rust) 12%,var(--panel-2));color:var(--rust);
  border-radius:999px;padding:3px 11px;font-size:var(--fs-klein);font-weight:700}
.rez blockquote{margin:0;font-size:var(--fs-text);line-height:1.6;color:var(--text)}
.rez-fuss{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:14px;
  font-size:var(--fs-klein);color:var(--muted)}
.rez-akt{margin-left:auto;display:flex;align-items:center;gap:8px}
.rez-akt .btn{padding:7px 13px;font-size:var(--fs-klein)}
@media (max-width:820px){
  .rez{flex-direction:column;gap:14px}
  .rez-bild{width:100%;height:190px}
  .rez-laden{opacity:1}
  .rez-akt{margin-left:0;width:100%}
  .rez-akt .btn{flex:1;justify-content:center;min-height:42px}
}
.uf-rez-schalter{display:flex;align-items:flex-start;gap:10px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--border-2);font-size:var(--fs-text);color:var(--text);font-weight:400}
.uf-rez-schalter input{margin-top:3px;width:18px;height:18px;flex:none}
/* Der Kurs steht einmal an der Umfrage. Im Bogen fragt ihn deshalb niemand mehr ab. */
.uf-rez-kurs{margin-top:12px;padding-left:28px}
.uf-rez-kurs[hidden]{display:none}
.uf-rez-kurs > label{display:block;color:var(--muted);font-weight:600;font-size:var(--fs-klein);margin-bottom:6px}
.uf-rez-kurs > input{width:100%;max-width:340px;background:var(--panel-2);border:1px solid var(--border);
  border-radius:10px;padding:11px 13px;color:var(--text);font-size:var(--fs-text);font-family:inherit;
  transition:border-color .15s var(--ease)}
.uf-rez-kurs > input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 14%,transparent)}
.uf-rez-kurs > p{margin:7px 0 0;color:var(--muted);font-size:var(--fs-klein);max-width:520px;line-height:1.5}
/* Kurs und Zeitraum einer eingegangenen Rezension nachbessern. */
.rez-angaben{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:2px 0 10px}
.rez-angaben[hidden]{display:none}
.rez-angaben input{flex:1 1 180px;min-width:0;background:var(--panel-2);border:1px solid var(--border);
  border-radius:10px;padding:9px 12px;color:var(--text);font-size:var(--fs-klein);font-family:inherit}
.rez-angaben input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 14%,transparent)}
@media (max-width:820px){
  .uf-rez-kurs{padding-left:0}
  .uf-rez-kurs > input{max-width:none}
  .rez-angaben input{flex:1 1 100%}
  .rez-angaben .btn{flex:1;justify-content:center}
}

/* ===================================================================
   Ferien, Sperrzeiten und Feiertage in beiden Kalendern.
   Die Toene sind bewusst blass: im Buchungskalender liegen darueber
   die bunten Balken der Termine, die muessen vorn bleiben.
   =================================================================== */
:root{
  --tag-ferien:color-mix(in srgb,var(--rust) 13%,var(--panel));
  --tag-ferien-rand:color-mix(in srgb,var(--rust) 32%,transparent);
  --tag-ferien-schrift:var(--rust);
  --tag-sperr:color-mix(in srgb,var(--red) 11%,var(--panel));
  --tag-sperr-rand:color-mix(in srgb,var(--red) 28%,transparent);
  --tag-sperr-schrift:color-mix(in srgb,var(--red) 78%,var(--navy));
  --tag-feier:color-mix(in srgb,var(--navy) 9%,var(--panel));
  --tag-feier-rand:color-mix(in srgb,var(--navy) 22%,transparent);
  --tag-feier-schrift:var(--muted);
}
/* Buchungskalender */
.bel-tag{display:flex;flex-direction:column}
.bel-tag.hat-sperr{min-height:calc(62px + max(var(--spuren,0), 2) * 30px)}
.bel-tag.ferien{background:var(--tag-ferien);border-color:var(--tag-ferien-rand)}
.bel-tag.sperrzeit{background:var(--tag-sperr);border-color:var(--tag-sperr-rand)}
.bel-tag.feiertag{background:var(--tag-feier);border-color:var(--tag-feier-rand)}
.bel-tag.fremd.ferien,.bel-tag.fremd.sperrzeit,.bel-tag.fremd.feiertag{opacity:.45}
/* Die Bezeichnung steht unten in der Zelle, unter den Balken, und bleibt blass. */
.bel-sperr{margin-top:auto;font-size:var(--fs-mark);font-weight:600;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.72}
.bel-tag.ferien .bel-sperr{color:var(--tag-ferien-schrift)}
.bel-tag.sperrzeit .bel-sperr{color:var(--tag-sperr-schrift)}
.bel-tag.feiertag .bel-sperr{color:var(--tag-feier-schrift)}
.bel-legende{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:0 16px 16px;
  font-size:var(--fs-klein);color:var(--muted)}
.bel-legende span{display:inline-flex;align-items:center;gap:6px}
.bel-legende i{width:12px;height:12px;border-radius:4px;display:inline-block}
.bel-legende i.ferien{background:var(--tag-ferien);box-shadow:inset 0 0 0 1px var(--tag-ferien-rand)}
.bel-legende i.sperrzeit{background:var(--tag-sperr);box-shadow:inset 0 0 0 1px var(--tag-sperr-rand)}
.bel-legende i.feiertag{background:var(--tag-feier);box-shadow:inset 0 0 0 1px var(--tag-feier-rand)}
.bel-legende-text{color:var(--faint)}
/* Terminkalender */
.kal-tag.ferien:not(.gewaehlt):not(.belegt){background:var(--tag-ferien);border-color:var(--tag-ferien-rand);color:var(--tag-ferien-schrift);font-weight:700}
.kal-tag.sperrzeit:not(.gewaehlt):not(.belegt){background:var(--tag-sperr);border-color:var(--tag-sperr-rand);color:var(--tag-sperr-schrift);font-weight:700}
.kal-legende i.kal-leg.ferien{background:var(--tag-ferien);box-shadow:inset 0 0 0 1px var(--tag-ferien-rand)}
.kal-legende i.kal-leg.sperrzeit{background:var(--tag-sperr);box-shadow:inset 0 0 0 1px var(--tag-sperr-rand)}
.kal-legende i.kal-leg.feiertag{background:var(--tag-feier);box-shadow:inset 0 0 0 1px var(--tag-feier-rand)}
@media (max-width:900px){
  .bel-tag.hat-sperr{min-height:calc(54px + max(var(--spuren,0), 2) * 26px)}
  .bel-sperr{font-size:10px}
}
/* Am Telefon ist eine Zelle keine 50 Pixel breit. Dort steht von "Herbstferien" nur
   noch ein abgeschnittenes Wortende, das niemandem hilft. Die Farbe und die Legende
   darunter tragen die Auskunft allein. */
@media (max-width:760px){
  .bel-sperr{display:none}
  .bel-tag.hat-sperr{min-height:calc(38px + max(var(--spuren,0), 2) * 26px)}
}
/* Sperrzeiten-Liste: als was ein Eintrag in den Kalendern gilt. */
.sz-art{display:inline-block;margin-left:8px;font-size:var(--fs-mark);font-weight:700;
  padding:2px 8px;border-radius:999px;vertical-align:1px}
.sz-art.ferien{background:var(--tag-ferien);color:var(--tag-ferien-schrift);box-shadow:inset 0 0 0 1px var(--tag-ferien-rand)}
.sz-art.sperrzeit{background:var(--tag-sperr);color:var(--tag-sperr-schrift);box-shadow:inset 0 0 0 1px var(--tag-sperr-rand)}

/* ===================================================================
   Uebersicht: was als Naechstes ansteht.
   Jede Zeile traegt die Farbe ihres Angebots, damit sich der Blick an
   derselben Farbe orientiert wie im Belegungskalender.
   =================================================================== */
.nae-liste{padding:6px 8px 2px}
.nae{display:flex;align-items:center;gap:14px;padding:12px;border-radius:14px;
  text-decoration:none;color:inherit;position:relative}
.nae + .nae{margin-top:2px}
.nae::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--f)}
.nae.klickbar{transition:background .14s var(--ease)}
.nae.klickbar:hover{background:color-mix(in srgb,var(--f) 7%,var(--panel-2))}
/* Der Datumsblock: Tageszahl gross, Monat klein darunter, getoent in der Angebotsfarbe */
.nae-datum{flex:none;width:52px;height:52px;border-radius:14px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;line-height:1.05;margin-left:11px;
  background:color-mix(in srgb,var(--f) 13%,var(--panel-2));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--f) 26%,transparent)}
.nae-datum b{font-size:var(--fs-zahl);font-weight:800;color:var(--f)}
.nae-datum span{font-size:var(--fs-mark);font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:color-mix(in srgb,var(--f) 70%,var(--muted))}
.nae-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.nae-name{font-weight:700;font-size:var(--fs-gross);line-height:1.25;color:var(--navy);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nae-sub{font-size:var(--fs-klein);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nae-rechts{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.nae-wann{font-size:var(--fs-mark);font-weight:700;padding:3px 10px;border-radius:999px;
  background:var(--panel-2);color:var(--muted);box-shadow:inset 0 0 0 1px var(--border-2);white-space:nowrap}
/* Was heute oder morgen ansteht, soll ins Auge fallen. */
.nae-wann.nah{background:var(--accent-weak);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent)}
.nae-zahl{font-size:var(--fs-klein);color:var(--muted);white-space:nowrap}
.nae-zahl b{color:var(--navy);font-weight:800}
.nae-fuss{padding:10px 20px 16px;font-size:var(--fs-klein)}
.nae-fuss a{color:var(--rust);text-decoration:none;font-weight:600}
.nae-fuss a:hover{text-decoration:underline}
@media (max-width:560px){
  .nae{gap:10px;padding:10px 8px}
  .nae-datum{width:46px;height:46px;border-radius:12px;margin-left:8px}
  .nae-name{font-size:var(--fs-text)}
  .nae-rechts{align-items:flex-end}
  .nae-zahl{font-size:var(--fs-mark)}
}
/* Ein Termin, der nicht im Shop steht, sagt das gleich in der Zeile. */
.nae-hinweis{margin-left:7px;font-size:var(--fs-mark);font-weight:700;color:var(--amber)}
/* Die Knopfreihe unter dem Zugang einer Umfrage. Am Telefon untereinander. */
.uf-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
@media (max-width:640px){
  .uf-knoepfe{display:grid;grid-template-columns:1fr}
  .uf-knoepfe .btn{width:100%}
}
/* Die Zeile über den Kacheln einer Umfrage: links zurück, rechts der PDF-Knopf. */
.ausw-leiste{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;max-width:1300px}
.ausw-leiste .ausw-zurueck{margin-bottom:0}
.ausw-leiste .btn{gap:8px}
@media (max-width:560px){
  .ausw-leiste{display:grid;grid-template-columns:1fr}
  .ausw-leiste .btn{width:100%;justify-content:center}
}