/* JARVIS-App · Gestaltung V4: Licht statt Raster, ein lebendiger Kern, Wissen in ruhigen Leisten. */
@property --a1{syntax:'<color>';inherits:true;initial-value:#22D3EE}
@property --a2{syntax:'<color>';inherits:true;initial-value:#4F46E5}
@property --ai{syntax:'<number>';inherits:true;initial-value:.45}
@property --ang{syntax:'<angle>';inherits:true;initial-value:0deg}
:root{
  --bg:#02040B; --ink:#EEF4FA; --dim:#A3B1C2; --faint:#7C8BA1; --cyan:#22D3EE; --orange:#FF8A3D; --ok:#34D399; --rot:#FB7185;
  --rand:rgba(255,255,255,.09); --flaeche:rgba(15,23,42,.46); --glas:rgba(13,20,36,.72);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
  --anzeige:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased;
  --a1:#22D3EE;--a2:#4F46E5;--ai:.45;transition:--a1 1.2s ease,--a2 1.2s ease,--ai 1.2s ease}
button{font:inherit;color:inherit}
.weg{position:absolute;left:-9999px}
[hidden]{display:none !important}

/* Licht, Körnung, Kern */
.aura{position:fixed;inset:0;pointer-events:none;z-index:0;translate:calc(var(--mx,0)*26px) calc(var(--my,0)*20px)}
.aura::before{content:"";position:absolute;left:50%;top:46%;width:150vmax;height:150vmax;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 50%,color-mix(in oklab,var(--a1) calc(var(--ai)*34%),transparent) 0%,color-mix(in oklab,var(--a2) calc(var(--ai)*22%),transparent) 18%,transparent 42%)}
.aura i{position:absolute;left:50%;top:46%;width:95vmin;height:95vmin;transform:translate(-50%,-50%) rotate(var(--ang));border-radius:50%;filter:blur(70px);opacity:calc(.25 + var(--ai)*.35);
  background:conic-gradient(from 0deg,var(--a1),transparent 22%,var(--a2) 40%,transparent 60%,var(--a1) 78%,transparent);animation:dreh 48s linear infinite}
.aura::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 75% at 50% 46%,transparent 40%,rgba(1,2,8,.85) 100%)}
@keyframes dreh{to{--ang:360deg}}
.korn{position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.08;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#kern{position:fixed;left:50%;top:46%;width:min(84vmin,780px);height:min(84vmin,780px);transform:translate(-50%,-50%);z-index:1;translate:calc(var(--mx,0)*-14px) calc(var(--my,0)*-10px);transition:opacity .8s}
body.laedt #kern,body.gesperrt #kern{opacity:.55}
#kern{transition:opacity .8s,top .7s cubic-bezier(.2,.8,.2,1),width .7s cubic-bezier(.2,.8,.2,1),height .7s cubic-bezier(.2,.8,.2,1)}
/* Einrichtung: Kern weicht nach oben, Formular bekommt Platz */
body:has(#einr:not([hidden])) #kern{top:24%;width:min(46vmin,420px);height:min(46vmin,420px)}
.anmeldung:has(#einr:not([hidden])) #anm-knopf{display:none}

/* Kantenlicht: hört zu (bunt) oder wartet auf Face ID (orange) */
.kante{position:fixed;inset:0;pointer-events:none;z-index:24;opacity:0;transition:opacity .7s ease;--e1:#22D3EE;--e2:#818CF8;--e3:#F0ABFC;--e4:#7DD3FC;animation:dreh 3.2s linear infinite}
.kante.an{opacity:1} .kante.warm{opacity:1;--e1:#FF8A3D;--e2:#FDBA74;--e3:#F97316;--e4:#FFD8B0;animation-duration:5s}
.kante i{position:absolute;inset:0;padding:2px;background:conic-gradient(from var(--ang),var(--e1),var(--e2),var(--e3),var(--e4),var(--e1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.kante .g{position:absolute;inset:0;filter:blur(22px);opacity:.9} .kante .g i{padding:14px}

/* Kopfzeile */
.kopf{position:fixed;z-index:6;top:0;left:0;right:0;display:flex;align-items:center;gap:14px;
  padding:calc(16px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) 0 max(24px,env(safe-area-inset-left,0px))}
.marke{font:600 15px var(--anzeige);letter-spacing:.28em}
.zustand{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rand);border-radius:999px;padding:5px 11px}
.zustand i{width:7px;height:7px;border-radius:50%;background:var(--a1);box-shadow:0 0 8px var(--a1)}
.wartet{font:500 12px var(--sans);color:#FFE3CF;background:rgba(255,138,61,.14);border:1px solid rgba(255,138,61,.5);border-radius:999px;padding:6px 12px;cursor:pointer;white-space:nowrap}
.uhr{margin-left:auto;font:500 11px var(--mono);color:var(--faint);letter-spacing:.06em;font-variant-numeric:tabular-nums;white-space:nowrap}
body.gesperrt .zustand,body.gesperrt .wartet{display:none !important}

/* Leisten */
.leiste{position:fixed;z-index:5;top:72px;display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 200px);transition:opacity .5s var(--ease),filter .5s var(--ease);
  translate:calc(var(--mx,0)*-5px) calc(var(--my,0)*-4px)}
.leiste.links{left:max(24px,env(safe-area-inset-left,0px));width:280px}
.leiste.rechts{right:max(24px,env(safe-area-inset-right,0px));width:310px}
.leiste h2{margin:6px 0 0;font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
body.stimme .leiste{opacity:.3;filter:saturate(.5)} body.stimme .leiste:hover{opacity:1;filter:none}
body.gesperrt .nur-angemeldet,body.laedt .nur-angemeldet{display:none !important}
.tafel{background:var(--flaeche);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:6px;display:flex;flex-direction:column;overflow:auto;scrollbar-width:none}
.tafel::-webkit-scrollbar{display:none}
.eintrag{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:baseline;padding:8px 10px;border-radius:10px;background:transparent;border:0;text-align:left;cursor:pointer;width:100%}
.eintrag:hover,.eintrag:focus-visible{background:rgba(255,255,255,.05);outline:0}
.eintrag b{font:400 12px var(--mono);color:var(--cyan);font-variant-numeric:tabular-nums}
.eintrag span{font-size:14px;line-height:1.35}
.eintrag small{display:block;font-size:12px;color:var(--faint);margin-top:2px}
.eintrag.vertraulich span{color:var(--dim)}
.eintrag.dringend b{color:var(--orange)}
.eintrag.frage b{color:var(--orange)}
.leer{padding:10px;font-size:13px;color:var(--faint)}
.reiter{display:flex;gap:4px}
.reiter button{flex:1;background:transparent;border:1px solid transparent;border-radius:10px;padding:6px 8px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);cursor:pointer}
.reiter button[aria-selected="true"]{color:var(--ink);border-color:var(--rand);background:var(--flaeche)}
.reiter b{color:var(--orange);font-weight:500}
.agent{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.04)}
.agent .nm{font-size:14px}
.agent .st{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);align-self:center}
.agent .st.ok{color:var(--ok)} .agent .st.pause{color:var(--orange)}
.agent .mt{grid-column:1/-1;font:400 12px var(--mono);color:var(--dim)}
.zeile{font:400 12px/1.5 var(--mono);color:var(--dim);display:grid;grid-template-columns:44px 1fr;gap:10px;padding:5px 10px}
.zeile b{font-weight:400;color:var(--faint)} .zeile em{font-style:normal;color:var(--cyan)}

/* Text in der Mitte: ganzer Satz sofort, Wörter leuchten im Sprechtempo */
#text{position:fixed;left:50%;bottom:calc(112px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(820px,calc(100% - 48px));text-align:center;z-index:4;display:flex;flex-direction:column;gap:10px}
#zustand-gross{font:500 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:color-mix(in oklab,var(--a1) 85%,white);min-height:14px}
#du{font-size:15px;color:var(--dim);min-height:20px;font-style:italic}
#sagt{font:400 clamp(20px,2.3vw,28px)/1.38 var(--anzeige);letter-spacing:-.015em;max-width:34ch;margin:0 auto;min-height:1.4em;text-wrap:balance;transition:opacity .18s ease}
#sagt.weg{opacity:0}
#sagt.rein,#du.rein{animation:rein .45s ease both}
@keyframes rein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
#sagt .w{color:rgba(226,236,248,.30);transition:color .32s ease,text-shadow .5s ease}
#sagt .w.an{color:#F2F8FF;text-shadow:0 0 22px color-mix(in oklab,var(--a1) 35%,transparent)}
#sagt small{display:block;margin-top:8px;font:400 14px var(--sans);color:var(--faint);letter-spacing:0}

/* Karte (Freigabe, Details) */
.karte{position:fixed;z-index:12;left:50%;top:46%;transform:translate(-50%,-50%);width:min(380px,calc(100% - 32px));max-height:calc(100vh - 220px);overflow:auto;
  background:var(--glas);border:1px solid var(--rand);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:12px;
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 80px rgba(2,6,23,.6);animation:aufgehen .7s cubic-bezier(.16,1.15,.3,1) both}
.karte.heiss{border-color:rgba(255,138,61,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 44px rgba(255,138,61,.22),0 30px 80px rgba(2,6,23,.6)}
@keyframes aufgehen{from{opacity:0;transform:translate(-50%,-50%) scale(.6);filter:blur(12px)}to{opacity:1;transform:translate(-50%,-50%) scale(1);filter:none}}
.karte .zu{position:absolute;right:10px;top:8px;background:transparent;border:0;color:var(--faint);font-size:22px;cursor:pointer;width:36px;height:36px;border-radius:50%}
.karte .zu:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.k{font:500 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);padding-right:34px}
.karte.heiss .k{color:var(--orange)}
.t{font:500 18px/1.3 var(--anzeige);letter-spacing:-.01em}
.s{font-size:14px;line-height:1.5;color:var(--dim);white-space:pre-wrap}
.bezug{font-size:13px;color:#FFE3CF;background:rgba(255,138,61,.1);border:1px solid rgba(255,138,61,.3);border-radius:10px;padding:8px 10px}
.wahl{display:flex;flex-direction:column;gap:6px}
.wahl label{display:flex;gap:10px;align-items:center;font-size:14px;padding:8px 10px;border:1px solid var(--rand);border-radius:10px;cursor:pointer}
.wahl input[type=text]{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--rand);border-radius:10px;color:var(--ink);font:400 14px var(--sans);padding:10px}
.knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.knoepfe button,.haupt,.leise{border-radius:12px;padding:11px 16px;font-size:14px;font-weight:500;cursor:pointer;border:1px solid var(--rand);background:rgba(255,255,255,.05);color:var(--ink)}
.knoepfe button.ja,.haupt{background:var(--cyan);border-color:var(--cyan);color:#03141A}
.knoepfe button.faceid{background:var(--orange);border-color:var(--orange);color:#1A0A00}
.knoepfe button:disabled,.haupt:disabled{opacity:.5;cursor:default}
.leise{background:transparent;border-color:transparent;color:var(--dim);padding:8px}
.hinweis{font-size:12.5px;color:var(--faint);min-height:1em}
.hinweis.fehler{color:var(--rot)}
.fid{display:flex;align-items:center;gap:12px;font-size:14px}
.ring{width:40px;height:40px;flex:none}
.ring circle{fill:none;stroke-width:3}
.ring .bg{stroke:rgba(255,138,61,.2)}
.ring .fg{stroke:var(--orange);stroke-dasharray:126;stroke-dashoffset:126;transition:stroke-dashoffset 1.6s ease;transform:rotate(-90deg);transform-origin:50% 50%}
.ring.los .fg{stroke-dashoffset:0} .ring.fertig .fg{stroke:var(--ok);stroke-dashoffset:0}
.schritte{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.schritte li{display:grid;grid-template-columns:14px 1fr;gap:10px;align-items:center;font-size:12.5px;color:var(--faint)}
.schritte li::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor;justify-self:center}
.schritte li.an{color:#FFE3CF} .schritte li.an::before{background:var(--orange);border-color:var(--orange)}
.schritte li.ok{color:var(--dim)} .schritte li.ok::before{background:var(--ok);border-color:var(--ok)}

/* Anmeldung */
.anmeldung{position:fixed;z-index:12;left:50%;bottom:calc(60px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(380px,calc(100% - 32px));
  display:flex;flex-direction:column;gap:12px;align-items:stretch;text-align:center}
.anmeldung .t{font-size:26px}
.einrichten{display:flex;flex-direction:column;gap:8px;text-align:left}
.einrichten label{font-size:12px;color:var(--faint)}
.einrichten input{background:rgba(255,255,255,.05);border:1px solid var(--rand);border-radius:12px;color:var(--ink);font:500 16px var(--mono);padding:12px;letter-spacing:.06em}

/* Befehlsleiste */
.leiste-unten{position:fixed;z-index:7;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));width:min(680px,calc(100% - 32px));
  border-radius:999px;padding:8px;display:flex;align-items:center;gap:8px;background:var(--glas);border:1px solid var(--rand);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.leiste-unten input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font:400 16px var(--sans);padding:0 14px;height:48px}
.leiste-unten input::placeholder{color:var(--faint)}
.kbd{font:500 11px var(--mono);color:var(--faint);background:transparent;border:1px solid var(--rand);border-radius:6px;padding:3px 6px;cursor:pointer}
.rund{width:48px;height:48px;border-radius:50%;border:1px solid var(--rand);background:rgba(255,255,255,.04);display:grid;place-items:center;cursor:pointer;flex:none;transition:transform .3s cubic-bezier(.2,.9,.25,1.4),box-shadow .3s,background .3s}
.rund svg{width:20px;height:20px}
.rund:disabled{opacity:.35;cursor:default}
.mik{background:var(--cyan);border-color:var(--cyan);color:#03141A;box-shadow:0 0 24px rgba(34,211,238,.35)}
body.stimme .mik{background:var(--rot);border-color:var(--rot);box-shadow:0 0 24px rgba(251,113,133,.4)}
button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* Befehle (⌘K) */
.befehle{position:fixed;inset:0;z-index:30;display:grid;place-items:start center;padding-top:16vh;background:rgba(2,6,23,.55);opacity:0;pointer-events:none;transition:opacity .28s var(--ease)}
.befehle.offen{opacity:1;pointer-events:auto}
.befehle .kasten{width:min(560px,calc(100% - 32px));border-radius:18px;padding:8px;background:var(--glas);border:1px solid var(--rand);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.befehle input{width:100%;background:transparent;border:0;outline:0;color:var(--ink);font:400 17px var(--sans);padding:14px 14px 12px}
.befehle ul{list-style:none;margin:0;padding:4px 0 2px;border-top:1px solid var(--rand)}
.befehle li button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;background:transparent;border:0;border-radius:12px;font-size:15px;padding:11px 14px;cursor:pointer;text-align:left}
.befehle li button span{font:500 11px var(--mono);color:var(--faint)}
.befehle li button:hover,.befehle li button.sel{background:rgba(34,211,238,.10)}

/* iPhone */
@media (max-width:820px){
  #kern{width:min(116vw,560px);height:min(116vw,560px);top:44%}
  .uhr{display:none}
  .leiste.rechts{display:none}
  .leiste.links{left:16px;right:16px;width:auto;top:64px;max-height:28vh}
  .leiste.links h2{display:none} #fristen,#fristen-k{display:none}
  .kbd{display:none}
  #text{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .karte{top:44%}
  body.eingang-offen .leiste.rechts{display:flex;left:12px;right:12px;width:auto;top:auto;bottom:calc(96px + env(safe-area-inset-bottom,0px));max-height:58vh;z-index:11;background:var(--glas);border:1px solid var(--rand);border-radius:20px;padding:10px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  body.eingang-offen .leiste.links,body.eingang-offen #text{opacity:0;pointer-events:none}
}
@media (prefers-reduced-motion:reduce){
  .aura i,.kante{animation:none} .karte{animation:none}
  .aura,#kern,.leiste{translate:none}
}