/* Verwaltung der Vorfuehr-Version (P16a). Look der Einrichtungsseite (30_geraet/usb_einrichtung)
   und der Projektseite (90_projektseite): Schwarz, Karten #11161A, Blau #4DA8FF, Pillenknoepfe.
   Handy zuerst, ab 721 px breiter. Schrift IBM Plex nur, wenn sie lokal liegt. */
@font-face{font-family:"Plex Sans";src:local("IBM Plex Sans"),local("IBMPlexSans");font-weight:400}
@font-face{font-family:"Plex Sans";src:local("IBM Plex Sans SemiBold"),local("IBMPlexSans-SemiBold");font-weight:600}
@font-face{font-family:"Plex Mono";src:local("IBM Plex Mono"),local("IBMPlexMono");font-weight:400}

:root{
  color-scheme:dark;
  --schwarz:#000000; --text:#F2F4F5; --karte:#11161A; --zeile:#0A0E11; --rand:#2A333A;
  --grau:#8C99A3; --dunkel:#5B6770; --hell:#C9D2D8; --blau:#4DA8FF; --blau-hell:#8CC6FF;
  --blau-tinte:#00121F; --gruen:#3DD6C4; --rot:#FF4D3D; --warnung:#FFC266;
  --sans:"Plex Sans","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Plex Mono","IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--schwarz);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
a{color:var(--blau-hell)}
code,.mono{font-family:var(--mono)}
h1{font-size:26px;line-height:1.15;font-weight:600;letter-spacing:-.01em;margin:22px 0 6px}
h2{font-size:18px;font-weight:600;margin:0 0 10px}
p{margin:0 0 10px}
.unter{color:var(--grau);font-size:15px;margin-bottom:16px}
.klein{font-size:13.5px;color:var(--grau)}
.leise{color:var(--dunkel)}
.gross{font-size:18px;font-weight:600}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.etikett{display:block;font-size:12.5px;color:var(--grau);text-transform:uppercase;letter-spacing:.06em;font-family:var(--mono)}

/* Kopf */
.kopf{position:sticky;top:0;z-index:20;background:rgba(0,0,0,.92);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--rand)}
.kopf-innen{max-width:1120px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.marke{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;min-width:0;flex:1}
.zeichen{width:38px;height:38px;border-radius:50%;border:2px solid var(--rot);display:grid;place-items:center;
  color:var(--rot);flex:none}
.marke-text{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.marke-text b{font-size:16px}
.marke-text small{font-size:12.5px;color:var(--grau);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abmelden{display:flex;align-items:center;gap:10px;flex:none}
.rolle{display:none;font-size:13.5px;color:var(--grau)}
.reiter{max-width:1120px;margin:0 auto;padding:0 16px 10px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.reiter::-webkit-scrollbar{display:none}
.reiter a{color:var(--grau);text-decoration:none;font-size:14.5px;padding:7px 13px;border-radius:999px;white-space:nowrap;
  border:1px solid transparent}
.reiter a:hover{color:var(--text);border-color:var(--rand)}
.reiter a.aktiv{color:var(--blau-tinte);background:var(--blau);font-weight:600}

/* Inhalt */
.rahmen{max-width:1120px;margin:0 auto;padding:0 16px 40px}
.fuss{max-width:1120px;margin:0 auto;padding:18px 16px calc(28px + env(safe-area-inset-bottom));color:var(--dunkel);
  font-size:13px;border-top:1px solid var(--rand)}
.karte{background:var(--karte);border-radius:20px;padding:18px 16px;margin-bottom:12px;min-width:0}
.schmal-karte{max-width:460px}
.ohne-sitzung .rahmen h1{margin-top:28px}
.raster{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.raster-breit{display:grid;gap:12px}
.spalten{display:grid;gap:12px;align-items:start}
.liste{display:grid;gap:12px;min-width:0}
.liste .karte,.raster-breit .karte{margin-bottom:0}
.leiste-oben{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.leiste-oben .unter{margin:0;flex:1 1 260px}
.leer{color:var(--grau);background:var(--karte);border-radius:20px;padding:22px 16px;margin:0}

/* Kacheln der Uebersicht */
.kachel{display:flex;flex-direction:column;gap:4px;background:var(--karte);border-radius:18px;padding:14px;min-height:104px;
  color:var(--text);text-decoration:none;border:1px solid transparent;position:relative}
.kachel:hover{border-color:var(--rand)}
.kachel:active{transform:scale(.99);background:var(--zeile)}
.kachel .wert{font-size:28px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.kachel .was{font-size:13.5px;color:var(--grau);line-height:1.3}
.kachel .zusatz{font-size:12.5px;color:var(--dunkel);margin-top:auto}
.kachel::after{content:"›";position:absolute;right:12px;top:8px;color:var(--dunkel);font-size:20px}
.firma-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.firma-kopf > div{display:flex;flex-direction:column;gap:2px;min-width:0}

/* Eintraege */
.eintrag-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.eintrag-kopf > div{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.daten{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14.5px;margin:0 0 6px}
.daten dt{color:var(--grau)}
.daten dd{margin:0;color:var(--hell);overflow-wrap:anywhere}
.chip{display:inline-block;font-size:12.5px;padding:2px 10px;border-radius:999px;border:1px solid var(--rand);
  color:var(--hell);white-space:nowrap}
.chip.gruen{border-color:rgba(61,214,196,.5);color:var(--gruen)}
.chip.gelb{border-color:rgba(255,194,102,.5);color:var(--warnung)}
.chip.rot{border-color:rgba(255,77,61,.5);color:#ffb3aa}
details.aufklappen{border-top:1px solid var(--rand);margin-top:8px;padding-top:4px}
details.aufklappen > summary{cursor:pointer;color:var(--blau-hell);font-size:14.5px;padding:8px 0;list-style:none}
details.aufklappen > summary::-webkit-details-marker{display:none}
details.aufklappen > summary::before{content:"▸ ";color:var(--grau)}
details.aufklappen[open] > summary::before{content:"▾ "}
details.aufklappen form{margin:6px 0 12px}

/* Formulare */
.formular{display:flex;flex-direction:column;gap:12px}
.feld{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}
.feld > span,.feld > legend{font-size:14px;color:var(--hell);padding:0}
input,select,textarea{font:inherit;color:var(--text);background:var(--schwarz);border:1px solid var(--rand);border-radius:12px;
  min-height:44px;padding:0 14px;width:100%;min-width:0}
textarea{padding:10px 14px;line-height:1.5;resize:vertical;min-height:110px}
select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--grau) 50%),
  linear-gradient(135deg,var(--grau) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
input[type=file]{padding:9px 14px}
input[type=checkbox],input[type=radio]{width:auto;min-height:0;accent-color:var(--blau)}
input::placeholder,textarea::placeholder{color:var(--dunkel)}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{
  outline:2px solid var(--blau);outline-offset:2px}
input:user-invalid,textarea:user-invalid{border-color:var(--warnung)}
.gross-feld{font-size:24px;letter-spacing:.2em;text-align:center;max-width:220px}
.wahlen{display:flex;flex-wrap:wrap;gap:8px}
.wahl{display:flex;align-items:center;gap:8px;background:var(--zeile);border:1px solid var(--rand);border-radius:12px;
  padding:9px 14px;cursor:pointer}
.wahl:has(input:checked){border-color:var(--blau)}
.zeile-form{flex-direction:row;flex-wrap:wrap;align-items:flex-end}
.zeile-form .feld{flex:1 1 200px}
.knopfreihe{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}
.knopfreihe form{margin:0}

/* Knoepfe: jeder antwortet auf Ueberfahren, Druck und Tastatur */
.knopf,.knopf-rand,.knopf-rot{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;
  padding:0 22px;border-radius:23px;font:inherit;font-size:15.5px;font-weight:600;cursor:pointer;text-decoration:none;
  transition:background .12s,border-color .12s,transform .06s;white-space:nowrap}
.knopf{border:0;background:var(--blau);color:var(--blau-tinte)}
.knopf:hover{background:var(--blau-hell)}
.knopf-rand{border:1px solid var(--rand);background:transparent;color:var(--text)}
.knopf-rand:hover{border-color:var(--grau)}
.knopf-rot{border:1px solid rgba(255,77,61,.5);background:transparent;color:#ffb3aa}
.knopf-rot:hover{border-color:var(--rot)}
.knopf:active,.knopf-rand:active,.knopf-rot:active{transform:scale(.97)}
.knopf-rand.schmal{min-height:38px;padding:0 14px;border-radius:19px;font-size:14px}
button:disabled,.arbeitet{opacity:.55;cursor:progress}
.formular > .knopf{align-self:flex-start}

/* Meldungen */
.meldung{border-radius:14px;padding:11px 14px;font-size:14.5px;background:var(--zeile);color:var(--hell);margin:0 0 14px}
.meldung.ok{color:var(--gruen);border:1px solid rgba(61,214,196,.35)}
.meldung.fehler{color:var(--warnung);border:1px solid rgba(255,194,102,.4)}
.meldung.hinweis{color:var(--hell);border:1px solid var(--rand)}
.hinweis-karte{border:1px solid rgba(255,194,102,.4)}

/* Einladungscode */
.code-anzeige{font-size:30px;letter-spacing:.08em;text-align:center;background:var(--zeile);border:1px dashed var(--blau);
  border-radius:16px;padding:16px 8px;margin:10px 0 14px;color:var(--text);user-select:all;overflow-wrap:anywhere}

/* Logo-Vorschau im Geraeterahmen */
.vorschau-karte{display:flex;flex-direction:column;align-items:center;gap:14px}
.geraet-rahmen{padding:10px;border-radius:40px;background:linear-gradient(160deg,#2a2f37,#14171c 60%);border:1px solid #333944;
  box-shadow:0 18px 36px rgba(0,0,0,.45)}
.geraet-rahmen img{display:block;width:205px;height:251px;border-radius:28px;background:#000}
.leer-bild{width:227px;height:273px;display:grid;place-items:center;color:var(--dunkel)}

/* Koppeln */
.anleitung{margin:0 0 14px;padding-left:20px;display:grid;gap:6px;color:var(--hell);font-size:15px}
.schritte{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.schritte li{display:flex;align-items:center;gap:10px;color:var(--dunkel);font-size:15px}
.schritte li::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--rand);flex:none}
.schritte li.laeuft{color:var(--hell)}
.schritte li.laeuft::before{border-color:var(--blau);border-top-color:transparent;animation:drehen 1s linear infinite}
.schritte li.fertig{color:var(--text)}
.schritte li.fertig::before{background:var(--gruen);border-color:var(--gruen)}
.schritte li.fehler{color:var(--warnung)}
.schritte li.fehler::before{background:var(--warnung);border-color:var(--warnung)}
@keyframes drehen{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.schritte li.laeuft::before{animation:none}}

/* Postfach */
.tage{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 14px;padding:2px 16px}
.tage::-webkit-scrollbar{display:none}
.tag-chip{display:flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:none;color:var(--grau);font-size:14px;
  padding:7px 12px;border-radius:999px;border:1px solid var(--rand)}
.tag-chip small{font-family:var(--mono);font-size:12px;background:var(--zeile);border-radius:999px;padding:0 7px}
.tag-chip.aktiv{background:var(--blau);color:var(--blau-tinte);border-color:var(--blau);font-weight:600}
.tag-chip.aktiv small{background:rgba(0,18,31,.18)}
.post-liste{display:grid;gap:10px;margin-bottom:90px}
.post{display:flex;gap:4px;background:var(--karte);border-radius:18px;border:1px solid transparent}
.post:has(input:checked){border-color:var(--blau)}
.post-wahl{display:flex;align-items:flex-start;padding:16px 4px 16px 14px;cursor:pointer}
.post-wahl input{width:22px;height:22px}
.post-inhalt{padding:12px 16px 12px 6px;min-width:0;flex:1}
.post-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:4px}
.post-text{margin:0;color:var(--hell);white-space:pre-wrap;overflow-wrap:anywhere}
.aktionsleiste{position:fixed;left:0;right:0;bottom:0;z-index:15;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(17,22,26,.96);border-top:1px solid var(--rand);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.aktionsleiste .klein{flex:1 1 100%}
.aktionsleiste .knopf{flex:2 1 170px}
.aktionsleiste .knopf-rot{flex:1 1 90px}
.teile{display:grid;gap:10px;margin-bottom:12px}
.teil{margin-bottom:0}
.teil-kopf{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.teil-kopf b{font-size:14px}
.teil-knoepfe{margin-left:auto;display:flex;gap:6px}
.reihenfolge input{width:52px;min-height:38px;text-align:center;padding:0 4px}

/* ab Tablet und PC */
@media (min-width:721px){
  h1{font-size:30px;margin-top:28px}
  .kopf-innen,.reiter,.rahmen,.fuss{padding-left:28px;padding-right:28px}
  .rolle{display:inline}
  .karte{padding:22px 24px}
  .raster{grid-template-columns:repeat(3,1fr)}
  .raster-breit{grid-template-columns:repeat(2,1fr)}
  .spalten{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .tage{margin:0 0 16px;padding:2px 0}
  .aktionsleiste{left:50%;right:auto;bottom:16px;transform:translateX(-50%);width:min(680px,calc(100% - 56px));
    border:1px solid var(--rand);border-radius:20px;padding:12px 16px}
  .aktionsleiste .klein{flex:1 1 auto}
  .aktionsleiste .knopf,.aktionsleiste .knopf-rot{flex:0 0 auto}
}
@media (min-width:1000px){
  .raster{grid-template-columns:repeat(6,1fr)}
  .raster-breit{grid-template-columns:repeat(3,1fr)}
}