@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);
  --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}
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:14px;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:14px;
  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}
.btn.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong);box-shadow:var(--shadow-md)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* 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:210px;margin:0 auto 26px;filter:none}
.authcard h1{font-size:26px;margin:0 0 8px;letter-spacing:-.005em;font-weight:400}
.authcard .lead{color:var(--muted);margin:0 0 24px;font-size:13.5px}
.authcard .btn{width:100%}
.foot-note{color:var(--faint);font-size:12px;margin:18px 0 0}
.msg{margin-top:14px;padding:10px 12px;border-radius:10px;font-size:13px;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:13.5px;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(--rust-2)}
.nav-parent{padding:9px 10px 4px;color:var(--side-text-dim);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin-top:6px}
.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:12px}
.who{font-size:12.5px;font-weight:600;line-height:1.25;color:#fff;min-width:0}.who small{display:block;color:#4ade80;font-size:10.5px;font-weight:500;margin-top:3px}
.logout{margin-left:auto;color:var(--side-text-dim);font-size:12px;text-decoration:none;font-weight:600}
.logout:hover{color:#fff}
.main{padding:28px 32px 48px;min-width:0}
.top{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:22px;border-bottom:1px solid var(--border)}
.top-accent{width:4px;height:32px;border-radius:3px;background:linear-gradient(180deg,var(--navy),var(--gold));flex:none}
.top-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.top h1{font-size:38px;margin:0;font-weight:400;letter-spacing:-.005em}
.top .sub{display:inline-flex;align-items:center;gap:7px;background:color-mix(in srgb,var(--navy) 9%,var(--panel));
  border:1px solid color-mix(in srgb,var(--navy) 24%,var(--border));
  border-radius:999px;color:var(--navy);font-size:13.5px;font-weight:700;padding:7px 16px 7px 12px}
.top .sub::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--rust);flex:none}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.empty{max-width:520px;margin:8vh auto 0;text-align:center;color:var(--muted)}
.empty-ico{font-size:40px;color:var(--navy);margin-bottom:8px}
.empty h2{color:var(--text);font-size:18px;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}
.card-h{padding:14px 18px;font-weight:400;font-size:18px;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:12px;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:14px;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:13px;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:13px;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:13px}
.form input,.form select,.linkbox input{flex:1;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:11px 13px;color:var(--text);font-size:14px;font-family:inherit;transition:border-color .15s var(--ease)}
.form input:focus,.form select:focus,.linkbox input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 14%,transparent)}
.linkbox{display:flex;gap:10px}
.linkbox input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
#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:11.5px;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:11.5px;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:12px}
.filtersel{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:9px 14px;color:var(--text);font-size:13.5px;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:12.5px;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:13px;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:18px;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:13px;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:14px;min-width:0}
.uname small{display:block;color:var(--faint);font-size:11.5px;font-weight:500}
.uflag{display:flex;align-items:center}
.uver{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.uver .to{color:var(--green);font-weight:700}
.ubadge2{font-size:11.5px;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:13px}
.urow:last-child{border-bottom:none}
.urow .cur{margin-left:auto;color:var(--faint);font-size:12px;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:15px;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:12px;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:12.5px}
.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:14px;flex:none;overflow:hidden}
.favsm img{width:100%;height:100%;object-fit:cover;display:block}
/* Seiten-Detail */
.crumb{color:var(--faint);font-size:12.5px;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:22px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--border)}
.hero h1{font-size:28px;margin:0;font-weight:400;letter-spacing:-.005em}
.hero .u{color:var(--muted);font-size:13.5px}
.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:11.5px;color:var(--muted);font-weight:600;margin-bottom:6px}
.settings-panel select{width:100%;font:inherit;font-size:14px;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:21px;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:22px}
.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:12.5px;color:var(--muted);font-weight:600;display:block;margin-bottom:1px}
.ic .v{font-size:16px;font-weight:700;margin-top:1px;font-variant-numeric:tabular-nums}
.ic .v small{font-weight:500;color:var(--faint);font-size:12px}
.stat4 .v{font-size:22px;letter-spacing:-.02em;margin-top:1px}
.ic.tile-hero{background:linear-gradient(135deg,var(--navy) 0%,#232f56 60%,var(--rust) 160%);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. ---------- */
.dash-top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,4fr);gap:14px;margin-bottom:22px;align-items:start}
.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:12px}
.dash-top .ic .v{font-size:19px}
.trend-card{max-width:none;display:flex;flex-direction:column}
.trend-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding:14px 18px 0;font-size:13.5px;font-weight:700;color:var(--text)}
.trend-title .trend-sub{font-size:11.5px;font-weight:500;color:var(--muted)}
.trend-legend{display:inline-flex;gap:12px;margin-left:auto;font-size:11px;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:6px 18px 14px;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:12.5px}
.ev:last-child{border-bottom:none}
.ev .when{margin-left:auto;color:var(--faint);font-size:11.5px;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:11px;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:10px;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:12px;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. */
  .top{flex-wrap:wrap;row-gap:10px}
  .top h1{font-size:26px}
  .top-actions{margin-left:0;flex-basis:100%;justify-content:flex-end}
}

@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}
}

/* ===================================================================
   Umfrage-Frontend: Passwort, Fragebogen, Dank.
   Reine Formulare ohne JavaScript, deshalb steckt jede Rueckmeldung
   im CSS: die ausgewaehlte Antwort faerbt sich ueber :checked.
   =================================================================== */
body.fb{background:
  radial-gradient(1100px 460px at 12% -12%,color-mix(in srgb,var(--navy) 13%,transparent),transparent),
  radial-gradient(800px 380px at 100% 108%,color-mix(in srgb,var(--rust) 9%,transparent),transparent),var(--bg);
  min-height:100vh;display:flex;flex-direction:column}
.fb-wrap{width:100%;max-width:720px;margin:0 auto;padding:40px 20px 24px;flex:1}
.fb-wrap-schmal{max-width:470px;display:grid;align-content:center}
.fb-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:34px 30px;text-align:center}
.fb-logo{width:170px;height:auto;display:block;margin:0 auto 22px}
.fb-logo-klein{width:132px;margin-bottom:34px}
.fb-card h1,.fb-kopf h1{font-size:27px;margin:0 0 10px;font-weight:400;letter-spacing:-.005em;line-height:1.25}
.fb-lead{color:var(--muted);margin:0 0 20px;font-size:14.5px;line-height:1.6}
.fb-fussnote{color:var(--faint);font-size:12.5px;margin:16px 0 0;line-height:1.5}
.fb-anon{color:var(--faint);font-size:12.5px;text-align:center;margin:18px 0 0}
.fb-label{display:block;text-align:left;font-weight:700;font-size:13px;margin:0 0 7px;color:var(--text)}
.fb-pw{width:100%;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:var(--panel-2);
  font:inherit;font-size:19px;font-weight:700;letter-spacing:.12em;text-align:center;text-transform:uppercase;color:var(--text)}
.fb-pw::placeholder{color:var(--faint);font-weight:500;letter-spacing:.08em}
.fb-pw:focus{outline:none;border-color:var(--rust);box-shadow:0 0 0 3px color-mix(in srgb,var(--rust) 16%,transparent)}
.fb-btn{display:block;width:100%;margin-top:18px;padding:14px 20px;border:1px solid var(--accent);border-radius:14px;
  background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:700;font-size:15px;cursor:pointer;
  text-align:center;text-decoration:none;transition:background .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease)}
/* Beim Zeigen wird aus Gold Petrol, genau wie beim Anmeldeknopf der Regie. */
.fb-btn:hover{background:var(--rust);border-color:var(--rust);color:#fff;box-shadow:var(--shadow-md);transform:translateY(-1px)}
.fb-btn-still{background:var(--panel);border-color:var(--border);color:var(--muted);font-weight:600;margin-top:12px}
.fb-btn-still:hover{background:var(--panel-2);border-color:var(--border);color:var(--text)}
/* Der Weg zur Website ist der einzige Knopf, der beim Zeigen golden wird. */
.fb-btn-web:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-md)}
.fb-fehler{color:var(--red);font-size:13px;font-weight:600;margin:10px 0 0;text-align:left}
.fb-haken{width:64px;height:64px;margin:6px auto 18px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--green) 13%,transparent);color:var(--green)}
.fb-haken svg{width:34px;height:34px}
.fb-danke-gross{font-size:40px;font-weight:400;letter-spacing:-.01em;margin:0 0 6px}
.fb-card .fb-danke-gross+.fb-btn{margin-top:22px}

/* Fragebogen */
.fb-kopf{text-align:center;margin-bottom:26px}
.fb-kopf .fb-lead{margin-bottom:0;max-width:540px;margin-left:auto;margin-right:auto}
.fb-balken{background:color-mix(in srgb,var(--red) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--red) 32%,var(--border));
  color:var(--red);border-radius:14px;padding:13px 16px;font-size:13.5px;font-weight:600;margin-bottom:20px}
.fb-form{display:flex;flex-direction:column;gap:22px}
.fb-kat{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px 24px 6px}
.fb-kat h2{font-size:19px;font-weight:600;margin:0 0 4px;letter-spacing:-.005em}
.fb-kat-text{color:var(--muted);font-size:13.5px;margin:0 0 4px}
.fb-frage{padding:20px 0;border-top:1px solid var(--border-2)}
.fb-kat h2+.fb-frage,.fb-kat-text+.fb-frage{border-top:0}
.fb-frage.hat-fehler{border-left:3px solid var(--red);margin-left:-24px;padding-left:21px;
  background:color-mix(in srgb,var(--red) 4%,transparent)}
.fb-frage-kopf{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
/* Die Zahl ist so gross wie die Frage daneben und sitzt auf deren erster Zeile.
   Die kleinen Zugaben gleichen die Schrift selbst aus: die Ziffern von Open Sans
   stehen in ihrer Vorschubbreite gemessen 0,9 Pixel zu weit links und liegen durch
   die Unterlaenge der Schrift 0,5 Pixel zu tief. */
.fb-nr{flex:none;width:31px;height:31px;border-radius:50%;background:var(--rust);
  color:#fff;display:flex;align-items:center;justify-content:center;line-height:1;
  font-size:15.5px;font-weight:700;margin-top:-3px;padding:0 0 2px 2px}
.fb-frage-text{margin:0;font-size:15.5px;font-weight:600;line-height:1.45}
.fb-pflicht{color:var(--gold-2);margin-left:4px;font-weight:700}
.fb-hinweis{color:var(--muted);font-size:13px;margin:5px 0 0;line-height:1.5}
.fb-hinweis-klein{font-size:12.5px;color:var(--faint);margin-top:8px}

/* Noten: Radios liegen unsichtbar unter ihrer Beschriftung. */
.fb-note-radio,.fb-wahl-radio,.fb-wahl-check{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
/* Fuenf Stufen in einem festen Raster: gleich breite Felder, eine Reihe. */
.fb-noten{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.fb-note{border:1px solid var(--border);border-radius:13px;background:var(--panel-2);min-width:0;
  padding:11px 3px;text-align:center;cursor:pointer;transition:background .12s var(--ease),border-color .12s var(--ease),transform .12s var(--ease)}
.fb-note:hover{background:color-mix(in srgb,var(--rust) 9%,var(--panel));border-color:color-mix(in srgb,var(--rust) 45%,var(--border))}
.fb-note-zahl{display:block;font-size:17px;font-weight:700;color:var(--text);line-height:1.2}
.fb-note-wort{display:block;font-size:10.5px;color:var(--muted);margin-top:3px;line-height:1.2}
/* Steht das Wort schon im Knopf, braucht es die Zeile darunter nicht. */
.fb-noten-enden{display:none;justify-content:space-between;gap:10px;color:var(--faint);font-size:11.5px;margin:8px 2px 0}
.fb-note-radio:checked+.fb-note{background:var(--rust);border-color:var(--rust);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.fb-note-radio:checked+.fb-note .fb-note-zahl{color:#fff}
.fb-note-radio:checked+.fb-note .fb-note-wort{color:rgba(255,255,255,.82)}
.fb-note-radio:focus-visible+.fb-note{outline:2px solid var(--rust);outline-offset:2px}

/* Einfach- und Mehrfachauswahl */
.fb-wahl{display:flex;flex-direction:column;gap:8px}
.fb-opt{display:flex;align-items:center;gap:11px;border:1px solid var(--border);border-radius:13px;
  background:var(--panel-2);padding:12px 14px;cursor:pointer;font-size:14.5px;line-height:1.4;
  transition:background .12s var(--ease),border-color .12s var(--ease)}
.fb-opt:hover{background:color-mix(in srgb,var(--rust) 7%,var(--panel));border-color:color-mix(in srgb,var(--rust) 40%,var(--border))}
.fb-kreis,.fb-kasten{flex:none;width:19px;height:19px;border:2px solid color-mix(in srgb,var(--navy) 30%,var(--border));
  background:var(--panel);position:relative;transition:border-color .12s var(--ease),background .12s var(--ease)}
.fb-kreis{border-radius:50%}
.fb-kasten{border-radius:6px}
.fb-wahl-radio:checked+.fb-opt,.fb-wahl-check:checked+.fb-opt{background:var(--rust);border-color:var(--rust);color:#fff;font-weight:600}
.fb-wahl-radio:checked+.fb-opt .fb-kreis{border-color:#fff;background:transparent}
.fb-wahl-radio:checked+.fb-opt .fb-kreis::after{content:'';position:absolute;inset:3px;border-radius:50%;background:#fff}
.fb-wahl-check:checked+.fb-opt .fb-kasten{border-color:#fff;background:#fff}
.fb-wahl-check:checked+.fb-opt .fb-kasten::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid var(--rust);border-width:0 2.5px 2.5px 0;transform:rotate(42deg)}
.fb-wahl-radio:focus-visible+.fb-opt,.fb-wahl-check:focus-visible+.fb-opt{outline:2px solid var(--rust);outline-offset:2px}

.fb-text{width:100%;padding:13px 15px;border:1px solid var(--border);border-radius:13px;background:var(--panel-2);
  font:inherit;font-size:14.5px;line-height:1.6;color:var(--text);resize:vertical;min-height:112px}
.fb-text::placeholder{color:var(--faint)}
.fb-text:focus{outline:none;border-color:var(--rust);background:var(--panel);box-shadow:0 0 0 3px color-mix(in srgb,var(--rust) 14%,transparent)}

.fb-absenden{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px 24px;text-align:center}
.fb-absenden .fb-fussnote{margin:0 0 4px}
.fb-foot{max-width:720px;margin:0 auto;padding:22px 20px 30px;display:flex;justify-content:center;gap:18px;
  color:var(--faint);font-size:12px;flex-wrap:wrap}
/* Datenschutz und Impressum gehoeren zusammen. Am Telefon reicht die Zeile nicht fuer
   alle drei Angaben, dann rutschen die beiden Links gemeinsam in die zweite. */
.fb-foot-recht{display:inline-flex;gap:18px}
.fb-foot a{color:var(--faint);text-decoration:none}
.fb-foot a:hover{color:var(--rust);text-decoration:underline}

@media (max-width:640px){
  .fb-wrap{padding:26px 14px 18px}
  .fb-card{padding:26px 20px;border-radius:18px}
  .fb-kat{padding:20px 18px 4px;border-radius:18px}
  .fb-frage.hat-fehler{margin-left:-18px;padding-left:15px}
  .fb-card h1,.fb-kopf h1{font-size:23px}
  .fb-noten{gap:5px}
  .fb-note{padding:13px 2px}
  .fb-note-zahl{font-size:17px}
  .fb-note-wort{display:none}
  .fb-noten-enden{display:flex}
  .fb-absenden{padding:18px 16px;border-radius:18px}
}

/* ===================================================================
   Schrittweise Fuehrung durch den Bogen. Alles hier greift erst,
   wenn das Skript den Bogen umgehaengt hat: ohne Skript bleibt die
   Liste, wie sie ist.
   =================================================================== */
.fb-fortschritt{margin-bottom:14px}
.fb-fortschritt-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:7px}
.fb-fortschritt-kat{color:var(--faint);font-weight:500;text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-fortschritt-bahn{height:6px;border-radius:999px;overflow:hidden;
  background:color-mix(in srgb,var(--navy) 10%,var(--panel))}
.fb-fortschritt-balken{height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--rust),var(--rust-2));transition:width .35s var(--ease)}

.fb-buehne{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:26px 24px;overflow:hidden}
.schrittweise .fb-buehne .fb-frage{padding:0;border-top:0;margin:0}
.schrittweise .fb-buehne .fb-frage.hat-fehler{border-left:0;margin-left:0;padding-left:0;background:none}
.schrittweise .fb-buehne .fb-frage-text{font-size:17.5px;line-height:1.35}
.schrittweise .fb-buehne .fb-nr{width:34px;height:34px;font-size:17.5px;margin-top:-4px}
.schrittweise .fb-absenden{text-align:left}
.fb-steuerung{display:flex;gap:10px;align-items:stretch}
.fb-steuerung .fb-btn{margin-top:0;flex:1;width:auto}
.fb-steuerung .fb-btn-still{flex:0 0 auto;padding-left:24px;padding-right:24px}
.fb-steuerung .fb-btn[hidden]{display:none}

@keyframes fb-rein-rechts{from{opacity:0;transform:translateX(38px)}to{opacity:1;transform:none}}
@keyframes fb-rein-links{from{opacity:0;transform:translateX(-38px)}to{opacity:1;transform:none}}
.fb-frage.rein-rechts{animation:fb-rein-rechts .26s var(--ease) both}
.fb-frage.rein-links{animation:fb-rein-links .26s var(--ease) both}
@media (prefers-reduced-motion:reduce){
  .fb-frage.rein-rechts,.fb-frage.rein-links{animation:none}
  .fb-fortschritt-balken{transition:none}
}
@media (max-width:640px){
  .fb-buehne{padding:20px 18px;border-radius:18px}
  .schrittweise .fb-buehne .fb-frage-text{font-size:16.5px}
}
.fb-wieder-da{margin:9px 0 0;font-size:12.5px;color:var(--rust);font-weight:600}

/* Der freiwillige Rezensionsblock auf der Dankeseite. Er steht unter dem Dank, weil
   der Bogen da schon abgeschickt ist: niemand muss hier noch etwas tun. */
.fb-rez{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px}
.fb-rez h2{margin:0 0 10px;font-size:19px;font-weight:600;line-height:1.3}
.fb-rez-lead{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.6}
.fb-rez-feld{margin-top:16px}
.fb-rez-feld label{display:block;font-weight:700;font-size:13px;margin-bottom:6px}
.fb-rez-feld input[type=text]{width:100%;padding:13px 15px;border:1px solid var(--border);border-radius:13px;
  background:var(--panel-2);font:inherit;font-size:14.5px;color:var(--text)}
.fb-rez-feld input[type=text]:focus{outline:none;border-color:var(--rust);background:var(--panel);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--rust) 14%,transparent)}
.fb-rez-feld input[type=file]{width:100%;font:inherit;font-size:13.5px;color:var(--muted)}
.fb-rez-feld input[type=file]::file-selector-button{font:inherit;font-weight:600;font-size:13.5px;
  border:1px solid var(--border);background:var(--panel-2);color:var(--text);
  border-radius:11px;padding:9px 14px;margin-right:12px;cursor:pointer}
.fb-rez-feld input[type=file]::file-selector-button:hover{background:var(--panel);border-color:var(--rust)}
.fb-rez-reihe{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fb-rez-reihe .fb-rez-feld{margin-top:16px}
.fb-rez-ok{margin-top:18px;align-items:flex-start}
.fb-rez-ok .fb-kasten{margin-top:2px}
/* Die beiden Wege am Schluss stehen gleichrangig nebeneinander: absenden oder
   weitergehen. Erst am schmalen Telefon rutschen sie uebereinander. */
.fb-rez-knoepfe{margin-top:24px}
/* Traegt die Dankeseite den Block, darf sie breiter werden als die blosse Karte. */
.fb-wrap-rez{max-width:560px;align-content:start}
.fb-wrap-rez .fb-rez{margin-top:18px}
@media (max-width:640px){
  .fb-rez{padding:20px 18px;border-radius:18px}
  .fb-rez-reihe{grid-template-columns:1fr;gap:0}
}
@media (max-width:430px){
  .fb-rez-knoepfe{flex-direction:column-reverse}
  .fb-rez-knoepfe .fb-btn-still{padding-left:20px;padding-right:20px}
}