/* youbooth Studio & Zentrale — Gestaltungsgrundlage.
   Warmes Papier, Tinte, Amber nur als Akzent. Navigation oben, Inhalt in Kacheln. Keine Fremdschriften. */
/* Die Hausschriften liegen auf dem eigenen Server — keine Fremdaufrufe.
   Schibsted Grotesk und IBM Plex Mono stehen unter der SIL Open Font
   License 1.1; die Lizenztexte liegen in assets/schrift/. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/schrift/IBMPlexMono-400-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/schrift/IBMPlexMono-400.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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/schrift/IBMPlexMono-500-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/schrift/IBMPlexMono-500.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;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/schrift/SchibstedGrotesk-400-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/schrift/SchibstedGrotesk-400.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;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/schrift/SchibstedGrotesk-500-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/schrift/SchibstedGrotesk-500.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;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/schrift/SchibstedGrotesk-700-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/schrift/SchibstedGrotesk-700.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;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/schrift/SchibstedGrotesk-800-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/schrift/SchibstedGrotesk-800.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{
  --papier:#F6F2EA;--papier2:#EFE9DC;--karte:#FFFFFF;--tinte:#141210;--tinte2:#4A453D;--tinte3:#6E675C;--linie:#E4DCCB;
  --amber:#F2B23E;--amber2:#FFD27A;--amber-tinte:#7A5200;--gruen:#1F7A4E;--gruen2:#DDF1E6;--rot:#C0392B;--rot2:#FBE3E0;--blau:#2F6FDE;--blau2:#E4ECFB;
  --sans:"Schibsted Grotesk","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;--mono:"IBM Plex Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
  --r:18px;--r2:12px;--schatten:0 1px 2px rgba(20,18,16,.05),0 8px 24px -12px rgba(20,18,16,.18)
}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--tinte);text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:3px}a:hover{text-decoration-color:var(--tinte)}
button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em;line-height:1.15}h1{font-size:30px;font-weight:800}h2{font-size:22px;font-weight:800}h3{font-size:16px;font-weight:700}
p{margin:0}.stumm{color:var(--tinte3)}.klein{font-size:13px}.mini{font-size:12px;color:var(--tinte3)}
.versteckt{display:none!important}
/* Rahmen */
.kopf{position:sticky;top:0;z-index:20;background:rgba(250,247,242,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
.kopf .innen{max-width:1320px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:18px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.03em;text-decoration:none}
.logo img{width:30px;height:30px;border-radius:9px}.logo small{font-weight:600;color:var(--tinte3);font-size:12px;margin-left:4px}
.tabs-haupt{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0;flex:0 1 auto;scroll-behavior:smooth}
/* Rollt die Leiste, verlaeuft ihr rechter Rand weich — sonst sieht niemand, dass dahinter noch Reiter liegen. */
/* Wird der Platz knapp, ruecken die Reiter erst enger zusammen — gerollt wird
   nur, wenn auch das nicht reicht. */
.tabs-haupt.eng a{padding:9px 9px;gap:5px}.tabs-haupt.eng a .zahl{padding:1px 5px}
.tabs-haupt.rollt{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent)}.tabs-haupt::-webkit-scrollbar{display:none}
.tabs-haupt a{display:flex;align-items:center;gap:7px;padding:9px 13px;border-radius:999px;font-weight:600;font-size:14px;color:var(--tinte2);text-decoration:none;white-space:nowrap}
.tabs-haupt a:hover{background:var(--papier2)}.tabs-haupt a.an{background:var(--tinte);color:#fff}
.tabs-haupt a .zahl{font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--amber);color:var(--tinte)}
.tabs-haupt a .kurz{display:none}
.tabs-haupt a.an .zahl{background:var(--amber)}
.tabs-haupt svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kopf .rechts{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none;min-width:0}
.kopf .rechts input{flex:0 1 190px;min-width:52px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--tinte);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.puls{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--tinte2);white-space:nowrap;flex:none}
.punkt{width:8px;height:8px;border-radius:50%;background:var(--gruen);display:inline-block;flex:none}
.punkt.aus{background:#C9C2B6}.punkt.warn{background:var(--amber)}.punkt.rot{background:var(--rot)}.punkt.lebt{box-shadow:0 0 0 0 rgba(46,125,91,.5);animation:atem 2s infinite}
@keyframes atem{0%{box-shadow:0 0 0 0 rgba(46,125,91,.45)}70%{box-shadow:0 0 0 8px rgba(46,125,91,0)}100%{box-shadow:0 0 0 0 rgba(46,125,91,0)}}
main{max-width:1320px;margin:0 auto;padding:28px 24px 80px}
.seitenkopf{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.seitenkopf .text{display:flex;flex-direction:column;gap:4px}.seitenkopf .aktionen{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.kicker{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-tinte)}
/* Kacheln */
.kacheln{display:grid;gap:16px;grid-template-columns:repeat(12,1fr);align-items:start}
.kachel{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);padding:20px 22px;box-shadow:var(--schatten);display:flex;flex-direction:column;gap:12px;min-width:0;grid-column:span 12}
/* k5 und k7 wurden im Studio benutzt, aber nie definiert: fuenf Kacheln
   fielen still auf volle Breite. Klasse ohne Regel = kaputtes Bild. */
.kachel.k4{grid-column:span 4}.kachel.k5{grid-column:span 5}.kachel.k6{grid-column:span 6}.kachel.k7{grid-column:span 7}.kachel.k8{grid-column:span 8}.kachel.k12{grid-column:span 12}.kachel.k3{grid-column:span 3}
.kachel>.titel{display:flex;align-items:center;gap:10px}.kachel>.titel h3{flex:1}.kachel>.titel a{font-size:13px;font-weight:600}
.kachel.dunkel{background:var(--tinte);color:#fff;border-color:var(--tinte)}.kachel.dunkel .stumm,.kachel.dunkel .mini{color:rgba(255,255,255,.6)}
.kachel.amber{background:linear-gradient(135deg,var(--amber2),var(--amber));border-color:transparent}
.zahl-gross{font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1}
.reihe{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--linie)}
.reihe:first-of-type{border-top:0}.reihe .text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.reihe .label{font-weight:600}.reihe .hint{font-size:12.5px;color:var(--tinte3);line-height:1.4}
.reihe .wert{font-size:13px;font-weight:700;white-space:nowrap;color:var(--tinte2)}
.etikett{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--papier2);color:var(--tinte2)}
/* Die Schrift der farbigen Etiketten ist einen Hauch dunkler als die Grundfarbe:
   auf ihrer hellen Flaeche erreichte sie sonst nur 4,24 (gruen), 4,45 (rot) und
   3,98 (blau) statt der noetigen 4,5. Die Flaechen und die Grundfarben bleiben. */
.etikett.gruen{background:var(--gruen2);color:#2C7857}.etikett.rot{background:var(--rot2);color:#B83729}.etikett.amber{background:#FFF1D6;color:var(--amber-tinte)}.etikett.blau{background:var(--blau2);color:#2B67CC}
.leer{padding:26px 8px;text-align:center;color:var(--tinte3);font-size:14px}
/* Knoepfe, Felder */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:999px;border:0;background:var(--tinte);color:#fff;font-weight:700;font-size:14px;white-space:nowrap;text-decoration:none;transition:transform .08s,background .15s}
.knopf:hover{background:#2a2722}.knopf:active{transform:scale(.97)}.knopf:disabled{opacity:.4;cursor:default}
.knopf.hell{background:var(--karte);color:var(--tinte);border:1px solid var(--linie)}.knopf.hell:hover{background:var(--papier2)}
.knopf.amber{background:var(--amber);color:var(--tinte)}.knopf.amber:hover{background:var(--amber2)}
.knopf.rot{background:var(--rot);color:#fff}.knopf.klein{padding:7px 12px;font-size:13px}.knopf.gross{padding:14px 22px;font-size:16px}
.knopf svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feld{display:flex;flex-direction:column;gap:6px}.feld label{font-size:13px;font-weight:600;color:var(--tinte2)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=time],select,textarea{width:100%;padding:10px 12px;border-radius:var(--r2);border:1px solid var(--linie);background:#fff;font-size:14px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:var(--amber)}
textarea{min-height:90px;resize:vertical}input[type=range]{accent-color:var(--tinte);width:100%}
input[type=color]{width:44px;height:34px;padding:2px;border:1px solid var(--linie);border-radius:9px;background:#fff}
.schalter{position:relative;width:44px;height:26px;border-radius:13px;background:#D8D1C5;border:0;flex:none;transition:background .15s}
.schalter::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.schalter.an{background:var(--gruen)}.schalter.an::after{transform:translateX(18px)}
.segmente{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--papier2);flex-wrap:wrap}
.segmente button{padding:6px 12px;border-radius:999px;border:0;background:transparent;font-weight:600;font-size:13px;color:var(--tinte2)}
.segmente button.an{background:#fff;color:var(--tinte);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{padding:6px 11px;border-radius:999px;border:1px solid var(--linie);background:#fff;font-size:12.5px;font-weight:600}
.chip.an{background:var(--tinte);color:#fff;border-color:var(--tinte)}
/* Einstellungen */
.einst-layout{display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:start}
.einst-nav{position:sticky;top:80px;display:flex;flex-direction:column;gap:3px}
.einst-nav button{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r2);border:0;background:transparent;font-weight:600;text-align:left;color:var(--tinte2)}
.einst-nav button:hover{background:var(--papier2)}.einst-nav button.an{background:var(--tinte);color:#fff}
.einst-nav button .n{margin-left:auto;font-size:11px;opacity:.6}
.einst-feld{display:grid;grid-template-columns:1fr 240px;gap:14px;align-items:center;padding:11px 0;border-top:1px solid var(--linie)}
.einst-feld:first-of-type{border-top:0}.einst-feld .text{min-width:0}.einst-feld .label{font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.einst-feld .hint{font-size:12.5px;color:var(--tinte3);line-height:1.4}.einst-feld .steuer{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.einst-feld .einheit{font-size:12px;color:var(--tinte3);white-space:nowrap}
.herkunft{font-size:11px;font-weight:700;letter-spacing:.05em;padding:1px 6px;border-radius:5px;background:var(--papier2);color:var(--tinte3);text-transform:uppercase}
.herkunft.eigen{background:#FFF1D6;color:var(--amber-tinte)}
.einst-feld.geaendert .label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);display:inline-block}
/* Tabellen */
.tabelle{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;box-shadow:var(--schatten)}
.tabelle .kopfzeile{display:flex;align-items:center;gap:12px;padding:16px 20px;flex-wrap:wrap;border-bottom:1px solid var(--linie)}
.tabelle .spalten,.tabelle .tz{display:grid;gap:14px;align-items:center;padding:12px 20px}
.tabelle .spalten{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinte3);background:var(--papier);border-bottom:1px solid var(--linie)}
.tabelle .tz{border-bottom:1px solid var(--linie)}.tabelle .tz:last-child{border-bottom:0}.tabelle .tz:hover{background:#FCFAF6}
.tabelle .haupt{font-weight:700}.tabelle .sub{font-size:12px;color:var(--tinte3)}
/* Galerie, Medien */
.galerie-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.galerie-raster .bild{position:relative;border-radius:var(--r2);overflow:hidden;background:var(--papier2);aspect-ratio:1;cursor:pointer}
.galerie-raster img{width:100%;height:100%;object-fit:cover;display:block}
.galerie-raster .art{position:absolute;left:8px;bottom:8px;font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;background:rgba(20,18,16,.7);color:#fff}
.vorschau{width:100%;border-radius:var(--r2);display:block;background:#111}
/* Dialoge, Meldungen */
.schleier{position:fixed;inset:0;background:rgba(20,18,16,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
.dialog{background:#fff;border-radius:22px;padding:24px 26px;width:100%;max-width:540px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 80px rgba(0,0,0,.35);max-height:92vh;overflow:auto}
.dialog .aktionen{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:60}
.toast{background:var(--tinte);color:#fff;padding:11px 15px;border-radius:14px;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.3);max-width:380px}
.toast.fehler{background:var(--rot)}.toast.gut{background:var(--gruen)}
.hinweis{padding:12px 14px;border-radius:var(--r2);background:#FFF1D6;color:var(--amber-tinte);font-size:13.5px;line-height:1.5}
.hinweis.rot{background:var(--rot2);color:var(--rot)}.hinweis.blau{background:var(--blau2);color:var(--blau)}
.anmelden{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(800px 500px at 70% 10%,#FFF1D6,transparent 60%),var(--papier)}
.anmelden .box{width:100%;max-width:420px;background:#fff;border:1px solid var(--linie);border-radius:26px;padding:30px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--schatten)}
code{font-family:var(--mono);font-size:12.5px;background:var(--papier2);padding:2px 6px;border-radius:6px}
pre.roh{margin:0;font-family:var(--mono);font-size:12px;white-space:pre-wrap;background:var(--papier);padding:12px;border-radius:var(--r2);max-height:50vh;overflow:auto}
.boxkarte{display:flex;flex-direction:column;gap:14px}
.boxkarte .kopfzeile{display:flex;align-items:center;gap:12px}
.boxkarte .bild{aspect-ratio:16/10;border-radius:var(--r2);background:#1a1816;overflow:hidden;position:relative;display:grid;place-items:center;color:rgba(255,255,255,.5);font-size:13px}
.boxkarte .bild img{width:100%;height:100%;object-fit:cover;display:block}
.boxkarte .bild .zustand{position:absolute;left:10px;top:10px}
.kennwerte{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.kennwert{padding:10px 12px;border-radius:var(--r2);background:var(--papier);display:flex;flex-direction:column;gap:2px}
.kennwert.warn{background:#FFF1D6}.kennwert.warn b{color:var(--amber-tinte)}
.kennwert b{font-size:16px;letter-spacing:-.02em}.kennwert span{font-size:11.5px;color:var(--tinte3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fernknoepfe{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fernknoepfe .knopf{padding:12px 8px;flex-direction:column;gap:6px;font-size:12.5px;border-radius:var(--r2)}.fernknoepfe .knopf svg{width:20px;height:20px}
.welten{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.welt{border-radius:var(--r2);padding:12px;display:flex;flex-direction:column;gap:6px;cursor:pointer;border:2px solid transparent;min-height:84px;justify-content:flex-end}
.welt.an{border-color:var(--tinte);box-shadow:0 0 0 3px #fff inset}.welt b{font-size:13px}.welt i{display:block;width:26px;height:8px;border-radius:4px}
.pipeline{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.stufe{flex:1;min-width:150px;background:var(--papier);border-radius:var(--r2);padding:10px;display:flex;flex-direction:column;gap:8px}
.stufe .titel{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tinte3);display:flex;justify-content:space-between}
.karte-klein{background:#fff;border:1px solid var(--linie);border-radius:10px;padding:9px 10px;font-size:13px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.karte-klein:hover{border-color:var(--tinte)}.karte-klein b{font-size:13px}.karte-klein span{font-size:11.5px;color:var(--tinte3)}
/* Einsatzplan: der Monat als Gitter. Die Farbe sagt die Lage — weiss ist
   frei, amber teilweise gebunden, rot voll, grau gesperrt. */
.planKopf{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.planKopf b{font-size:15px}
.planGitter{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.planWt{text-align:center;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tinte3);padding:2px 0}
.planTag{min-height:78px;border:1px solid var(--linie);border-radius:var(--r2);background:var(--karte);padding:6px 7px;display:flex;flex-direction:column;gap:3px;cursor:pointer;overflow:hidden}
.planTag:hover{border-color:var(--tinte)}
.planTag.leer{border:0;background:none;cursor:default;min-height:0}
.planTag.heute{box-shadow:inset 0 0 0 2px var(--amber)}
.planTag.teils{background:var(--amber2)}
.planTag.voll{background:var(--rot2);border-color:var(--rot)}
.planTag.gesperrt{background:var(--papier2);color:var(--tinte3)}
.planZahl{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.planEintrag{font-size:11px;font-weight:600;background:rgba(20,18,16,.08);border-radius:5px;padding:1px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.planMini{font-size:10.5px;color:var(--tinte3)}
@media(max-width:640px){.planTag{min-height:56px}.planEintrag{display:none}}
.balken{display:flex;gap:4px;align-items:flex-end;height:90px}.balken i{flex:1;background:var(--amber);border-radius:4px 4px 0 0;min-height:3px;position:relative}
.balken i.leer{background:var(--papier2)}
.balken-achse{display:flex;gap:4px;margin-top:6px}.balken-achse span{flex:1;text-align:center;font-size:9.5px;color:var(--tinte3)}
@media (max-width:960px){.kachel.k3,.kachel.k4,.kachel.k5,.kachel.k6,.kachel.k7,.kachel.k8,.kachel.k12{grid-column:span 12}.einst-layout{grid-template-columns:1fr}.einst-nav{position:static;flex-direction:row;flex-wrap:wrap}.einst-feld{grid-template-columns:1fr}.einst-feld .steuer{justify-content:flex-start}.kopf .innen{height:auto;flex-wrap:wrap;padding:10px 16px}main{padding:18px 16px 60px}}
/* Handy: die Hauptnavigation wird zur festen Leiste unten, damit alle Punkte erreichbar bleiben */
@media (max-width:700px){
  /* backdrop-filter am Kopf wuerde einen Bezugsrahmen fuer position:fixed bilden - am Handy darum ohne */
  .kopf{backdrop-filter:none;background:var(--papier)}
  .kopf .innen{height:56px;flex-wrap:nowrap;padding:0 14px;gap:10px}
  .kopf .rechts{gap:8px;min-width:0;flex:1;justify-content:flex-end}
  /* Zentrale: dort steht ein Suchfeld im Kopf - der Puls weicht, damit nichts ueberlaeuft */
  .kopf .rechts:has(input) .puls{display:none}
  .kopf .rechts input{width:auto!important;min-width:0;flex:1 1 60px}
  .tabs-haupt{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;overflow:visible;
    background:var(--papier);border-top:1px solid var(--linie);padding:7px 2px calc(7px + env(safe-area-inset-bottom))}
  .tabs-haupt a{flex-direction:column;justify-content:center;gap:3px;padding:4px 2px;border-radius:12px;font-size:9.5px;letter-spacing:-.01em;position:relative;min-width:0;color:var(--tinte2)}
  .tabs-haupt a .lang{display:none}.tabs-haupt a .kurz{display:block}
  .tabs-haupt a>span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .tabs-haupt a:hover{background:none}
  .tabs-haupt a.an{background:none;color:var(--tinte);font-weight:800}
  .tabs-haupt a.an svg{stroke-width:2.3;stroke:var(--amber-tinte)}
  .tabs-haupt svg{width:20px;height:20px}
  .tabs-haupt a .zahl{position:absolute;top:0;left:calc(50% + 5px);font-size:9px;line-height:14px;padding:0 5px}
  main{padding:16px 14px calc(86px + env(safe-area-inset-bottom))}
  .kennwert span{white-space:normal;overflow:visible;line-height:1.25}
  .toasts{left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom))}
  /* Am Handy zwei Spalten, damit lange Beschriftungen wie "Als Fernbedienung" nicht ueberstehen */
  .fernknoepfe{grid-template-columns:repeat(2,1fr)}
  .fernknoepfe .knopf{white-space:normal;text-align:center;line-height:1.25}
}

/* ---------- KI-Studio ---------------------------------------------------
   Drei Spalten: Gruppen, gewaehlte Gruppe, Stile. Auf schmalen Schirmen
   untereinander. Gesperrte Gruppen bleiben sichtbar, aber matt — der
   Betreiber soll sehen, was es gaebe, und warum es nicht geht. */
.ki-hauptschalter{display:flex;align-items:center;gap:16px;padding:14px 18px;margin:0 0 14px;
  background:var(--karte);border:1px solid var(--linie);border-radius:14px}
.ki-hauptschalter .text{flex:1;display:flex;flex-direction:column;gap:2px}
.ki-hauptschalter .label{font-weight:700}
.ki-hauptschalter .hint{font-size:.82rem;color:var(--tinte3)}

.ki-studio{display:grid;grid-template-columns:minmax(200px,270px) minmax(0,1fr) minmax(230px,330px);
  gap:14px;align-items:start}
@media (max-width:1100px){.ki-studio{grid-template-columns:1fr}}

.ki-spalte{background:var(--karte);border:1px solid var(--linie);border-radius:14px;
  padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px}
.ki-spalte .feld{margin-top:8px}

.ki-gruppe{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:10px 12px;border:0;border-radius:10px;background:transparent;color:inherit;
  font:inherit;cursor:pointer}
.ki-gruppe:hover{background:rgba(127,127,127,.12)}
.ki-gruppe .name{flex:1;font-weight:600}
.ki-gruppe .zahl{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinte3)}
.ki-gruppe.auf{background:var(--amber);color:var(--tinte)}
.ki-gruppe.auf .zahl{color:var(--tinte);opacity:.8;font-weight:700}
.ki-gruppe.gesperrt .name{color:var(--tinte2);font-weight:500}

.ki-zweiwahl,.ki-stufen{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.ki-zweiwahl.breit{margin:14px 0 4px}
.ki-zweiwahl button,.ki-stufen button{flex:1;min-width:84px;padding:9px 12px;border:1px solid var(--linie);
  border-radius:999px;background:var(--papier2);color:var(--tinte2);font:inherit;font-size:.85rem;cursor:pointer}
.ki-zweiwahl button:hover,.ki-stufen button:hover{border-color:var(--tinte3)}
/* Die gewaehlte Seite traegt Amber UND fette Schrift — an einer Pillenreihe
   ist Farbe allein zu wenig, wenn jemand sie nicht unterscheiden kann. */
.ki-zweiwahl button.auf,.ki-stufen button.auf{background:var(--amber);color:var(--tinte);
  border-color:var(--amber);font-weight:800}

.ki-mitte{background:var(--karte);border:1px solid var(--linie);border-radius:14px;padding:20px}
.ki-mitte h1{margin:.1em 0 .3em;font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.05}

.ki-warnung{display:flex;flex-direction:column;gap:2px;margin:12px 0 0;padding:11px 14px;
  border-radius:10px;background:rgba(184,55,41,.12);border:1px solid rgba(184,55,41,.35);
  font-size:.86rem}

.ki-buehne{position:relative;margin:14px 0 10px;border-radius:12px;overflow:hidden;background:#000}
.ki-buehne img{display:block;width:100%;height:auto;max-height:340px;object-fit:cover}
.ki-rahmen{position:absolute;border:2px solid rgba(255,255,255,.85);border-radius:6px;
  box-shadow:0 0 0 9999px rgba(0,0,0,.12) inset}
.ki-rahmen span{position:absolute;left:0;top:-1.55em;padding:2px 6px;border-radius:5px;
  background:rgba(0,0,0,.78);color:#fff;font-size:.66rem;letter-spacing:.04em;white-space:nowrap}
.ki-marke{position:absolute;left:10px;bottom:10px;padding:4px 9px;border-radius:6px;
  background:rgba(0,0,0,.78);color:#fff;font-size:.68rem;letter-spacing:.04em}

.ki-regler{display:flex;align-items:center;gap:12px;margin-top:6px}
.ki-regler input[type=range]{flex:1;accent-color:var(--amber)}
.ki-wert{min-width:3.6em;text-align:right;font-family:var(--mono);color:var(--amber);font-weight:700}

.ki-stile{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.ki-stil{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px 11px;
  border:1px solid var(--linie);border-radius:10px;background:transparent;color:inherit;
  font:inherit;cursor:pointer}
.ki-stil .name{font-weight:700;font-size:.86rem}
.ki-stil .kurz{font-size:.74rem;color:var(--tinte3);line-height:1.25}
.ki-stil.auf{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
/* Gesperrt heisst nicht unlesbar: der Betreiber soll sehen, was es gaebe.
   Darum kein Wegblenden, sondern gestrichelter Rand und matte Flaeche. */
.ki-stil.gesperrt{border-style:dashed;background:var(--papier2);cursor:not-allowed}
.ki-stil.gesperrt .name{color:var(--tinte2);font-weight:600}

.ki-schalter{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--linie)}
.ki-schalter .text{flex:1;display:flex;flex-direction:column;gap:1px}
.ki-schalter .label{font-weight:600;font-size:.88rem}
.ki-schalter .hint{font-size:.75rem;color:var(--tinte3);line-height:1.3}

/* ---------- Befehlspalette und Kuerzel ---------- */
.schleier.palette{align-items:flex-start;padding-top:12vh}
.p-kasten{width:min(620px,92vw);background:var(--karte);border:1px solid var(--linie);border-radius:16px;box-shadow:0 30px 80px -20px rgba(0,0,0,.45);overflow:hidden}
.p-suchzeile{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--linie)}
.p-suchzeile svg{width:18px;height:18px;stroke:var(--tinte3);fill:none;stroke-width:1.8}
.p-suchzeile input{border:0;outline:0;background:transparent;flex:1;font-size:15px;color:inherit}
.p-liste{max-height:min(52vh,460px);overflow:auto;padding:6px}
.p-gruppe{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinte3);padding:10px 12px 4px}
.p-eintrag{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;cursor:pointer;font-size:14px}
.p-eintrag:hover,.p-eintrag.an{background:var(--papier)}
.p-eintrag.an{outline:1.5px solid var(--amber)}
.p-name{font-weight:600}
.p-hinweis{color:var(--tinte3);font-size:12.5px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
kbd{font-family:var(--mono,monospace);font-size:10.5px;padding:2px 7px;border-radius:6px;border:1px solid var(--linie);background:var(--papier);color:var(--tinte3)}

/* ---------- Antwortkopf: erst die Lage, dann die Zahlen ---------- */
.antwort{display:flex;align-items:center;gap:12px}
.antwort .punkt{width:11px;height:11px}
.kennleiste{display:flex;gap:26px;flex-wrap:wrap;padding:14px 20px;background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);align-items:center}
.kennleiste .k{display:flex;flex-direction:column;gap:1px}
.kennleiste .k b{font-size:21px;letter-spacing:-.02em}
.kennleiste .k span{font-size:11.5px;color:var(--tinte3)}
.kennleiste .balken{flex:1;min-width:160px;height:36px}

/* ---------- Der Einlauf: was dich braucht, je Zeile eine Aktion ---------- */
.einlauf{display:flex;flex-direction:column;gap:0}
.einlauf .reihe{border-top:1px solid var(--linie);padding:11px 2px}
.einlauf .reihe:first-of-type{border-top:0}
.einlauf-leer{display:flex;align-items:center;gap:10px;padding:18px 4px;color:var(--tinte3);font-size:14px}
.einlauf-leer .punkt{background:var(--gruen)}

/* ---------- Tagesleiste: die naechsten sieben Tage ---------- */
.tagesleiste{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.tag-spalte{border:1px solid var(--linie);border-radius:12px;padding:10px 10px 12px;min-height:86px;display:flex;flex-direction:column;gap:6px;background:var(--papier)}
.tag-spalte.heute{border-color:var(--amber);background:var(--karte)}
.tag-spalte .datum{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinte3)}
.tag-spalte.heute .datum{color:var(--amber);font-weight:700}
.tag-eintrag{font-size:12px;font-weight:600;padding:5px 8px;border-radius:8px;background:var(--karte);border:1px solid var(--linie);cursor:pointer;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag-eintrag.laeuft{background:var(--amber);border-color:transparent;color:#141210}
.tag-eintrag.anfrage{border-style:dashed;color:var(--tinte3);font-weight:500}
.tag-frei{font-size:11.5px;color:var(--tinte3);opacity:.6}

/* ---------- Boxen als Zeilen: Zustand und Griff in einer Zeile ---------- */
.boxzeile{display:flex;align-items:center;gap:12px;padding:12px 2px;border-top:1px solid var(--linie)}
.boxzeile:first-of-type{border-top:0}
.boxzeile .name{font-weight:700;min-width:120px}
.boxzeile .meta{color:var(--tinte3);font-size:12.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.boxzeile .griffe{display:flex;gap:6px;flex-wrap:wrap}
.boxzeile .mini-bild{width:56px;height:34px;border-radius:6px;background:var(--tinte);object-fit:cover;flex-shrink:0}

/* ---------- Flottenbalken (Zentrale): Versionen auf einen Blick ---------- */
.flotte{display:flex;height:26px;border-radius:8px;overflow:hidden;border:1px solid var(--linie)}
.flotte i{display:block;height:100%}
.flotte-legende{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--tinte3)}
.flotte-legende i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

@media (max-width:860px){.tagesleiste{grid-template-columns:repeat(4,1fr)}.tag-spalte:nth-child(n+5){display:none}.boxzeile{flex-wrap:wrap}.kennleiste{gap:16px}}
@media (max-width:560px){.tagesleiste{display:flex;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}.tag-spalte{min-width:118px;flex:0 0 auto}.tag-spalte:nth-child(n+5){display:flex}}

/* Der Vorlagen-Editor: drei Spalten, solange Platz ist.

   Vorher stand hier ein festes Drei-Spalten-Raster ohne Umbruchpunkt. Am
   Handy und am schmalen Tablet schob es die Seite waagerecht auf, und
   Ebenenliste, Buehne und Eigenschaften standen zusammengequetscht
   nebeneinander statt untereinander. */
.vorlageneditor{grid-template-columns:minmax(220px,260px) minmax(0,1fr) minmax(260px,320px)}
@media (max-width:1100px){
  /* Zwei Spalten: Buehne oben ueber die volle Breite, darunter die beiden Leisten. */
  .vorlageneditor{grid-template-columns:minmax(0,1fr) minmax(260px,320px)}
  .vorlageneditor>*:nth-child(2){grid-column:1/-1;order:-1}
}
@media (max-width:760px){
  .vorlageneditor{grid-template-columns:minmax(0,1fr)}
  .vorlageneditor>*:nth-child(2){grid-column:auto}
}