/* Pulse – Designkern-Handschrift (Caroza-Niveau). Nur Block 1 MARKE ist Pulse-eigen. */
/* 1 MARKE */
:root {
  --nacht: #07060a; --nacht-2: #110d12; --nacht-3: #1c1216;
  --akzent: #a1000b; --mitte: #ff1e12; --hell: #ff6a55;
  --verlauf: linear-gradient(120deg, #a1000b 0%, #ff1e12 55%, #ff6a55 100%);
  --ok: #19a463; --warn: #d97706; --kritisch: #e11d48;
  --schrift: -apple-system, "SF Pro Display", "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
  --fg: #fff; --fg-2: rgba(255,255,255,.76); --fg-3: rgba(255,255,255,.52); --fg-4: rgba(255,255,255,.26);
  --glas: rgba(255,255,255,.06); --glas-rand: rgba(255,255,255,.13); --glas-licht: rgba(255,255,255,.3);
  --dock-h: 128px;
  --feder: cubic-bezier(.2,.9,.25,1.05);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--nacht); color: var(--fg); font: 16px/1.45 var(--schrift); font-feature-settings: "tnum"; }
body { overflow: hidden; }
em { font-style: normal; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
[hidden] { display: none !important; }

/* Bühne: drei weiche Lichter + Rauschen */
.buehne { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(120% 80% at 50% 110%, #3d0008 0%, transparent 60%), var(--nacht); }
.licht { position: absolute; width: 90vmax; height: 90vmax; border-radius: 50%; filter: blur(70px); opacity: .42; }
/* Chef 08.11. (Tipp-Haenger): die riesigen weichgezeichneten Lichter bekommen je eine eigene GPU-Ebene. Ohne das zeichnete WebKit
   bei JEDER Groessen-/Lagenaenderung der Leiste (Feld waechst, Tastatur) die blur(70px)-Flaechen samt Rauschen neu: ~190 ms je Bild
   im Simulator, am iPhone Haenger von mehreren Sekunden. Mit eigener Ebene ~33 ms. */
.licht { transform: translateZ(0); }
.l1 { background: radial-gradient(circle, #a1000b 0%, transparent 62%); left: -40vmax; top: -45vmax; }
.l2 { background: radial-gradient(circle, #ff1e12 0%, transparent 62%); right: -50vmax; top: 10vh; opacity: .26; }
.l3 { background: radial-gradient(circle, #ff6a55 0%, transparent 60%); left: -20vmax; bottom: -70vmax; opacity: .18; }
.rauschen { position: absolute; inset: 0; opacity: .075; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.logo { display: inline-block; flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--verlauf); position: relative; box-shadow: 0 18px 40px -16px rgba(255,30,18,.7), inset 0 1px 0 rgba(255,255,255,.45); }
.logo::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.95); border-right-color: transparent; transform: rotate(-30deg); }
.logo.klein { width: 26px; height: 26px; border-radius: 8px; } .logo.klein::after { inset: 7px; border-width: 2px; }

/* Anmeldung */
.login { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: env(safe-area-inset-top) 24px env(safe-area-inset-bottom); }
.marke { text-align: center; } .marke .logo { display: block; margin: 0 auto 14px; width: 58px; height: 58px; border-radius: 18px; } .marke .logo::after { inset: 15px; border-width: 3.5px; }
.marke h1 { margin: 0; font-size: 44px; letter-spacing: -.042em; line-height: .98; }
.marke p { margin: 8px 0 0; color: var(--fg-3); text-transform: uppercase; letter-spacing: .22em; font-size: 11px; }
.hinweis { color: var(--fg-2); margin: 14px 0 0; min-height: 1.4em; text-align: center; }
.pin-punkte { display: flex; gap: 14px; height: 14px; } .pin-punkte i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--fg-3); transition: .25s var(--feder); }
.pin-punkte i.voll { background: var(--verlauf); border-color: transparent; transform: scale(1.12); }
.pin-punkte.falsch { animation: wackeln .4s; } @keyframes wackeln { 25%,75% { transform: translateX(-8px); } 50% { transform: translateX(8px); } }
.pin-feld { display: grid; grid-template-columns: repeat(3, 76px); gap: 16px; margin-top: 8px; }
.pin-feld button { height: 76px; border-radius: 50%; background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); font-size: 28px; font-weight: 300; backdrop-filter: blur(20px); transition: transform .15s; }
.pin-feld button:active { transform: scale(.92); background: rgba(255,255,255,.14); }
.pin-feld button.leer { visibility: hidden; } .pin-feld button.klein { font-size: 15px; background: none; border: 0; box-shadow: none; }

/* Kopf */
.kopf { position: fixed; top: 0; left: 0; right: 0; z-index: 5; padding: calc(env(safe-area-inset-top) + 10px) 0 10px; background: linear-gradient(180deg, rgba(7,6,10,.92) 40%, rgba(7,6,10,0)); }
.kopf-zeile { display: flex; align-items: center; gap: 10px; padding: 0 18px 10px; }
.wort { font-size: 21px; letter-spacing: -.03em; }
.punkt { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 12px var(--ok); transition: .3s; } .punkt.aus { background: var(--kritisch); box-shadow: 0 0 12px var(--kritisch); }
.sessions { display: flex; gap: 8px; overflow-x: auto; padding: 0 18px 4px; scrollbar-width: none; scroll-snap-type: x proximity; } .sessions::-webkit-scrollbar { display: none; }
.chip { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: var(--glas); border: 1px solid var(--glas-rand); color: var(--fg-2); font-size: 14px; backdrop-filter: blur(30px) saturate(170%); transition: .35s var(--feder); }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--farbe); opacity: .9; }
.chip.aktiv { color: #fff; background: linear-gradient(120deg, rgba(161,0,11,.55), rgba(255,30,18,.4)); border-color: rgba(255,106,85,.5); box-shadow: inset 0 1px 0 var(--glas-licht), 0 14px 34px -18px rgba(255,30,18,.9); }
.chip.arbeitet i { animation: puls 1.2s infinite; } @keyframes puls { 50% { transform: scale(1.7); opacity: .4; } }

/* Ansichten */
.ansicht { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 98px); bottom: calc(var(--dock-h) + env(safe-area-inset-bottom)); overflow-y: auto; padding: 8px 18px 24px; -webkit-overflow-scrolling: touch; }
.titel { font-size: 30px; letter-spacing: -.042em; line-height: .98; margin: 8px 0 18px; text-wrap: balance; }

/* Orb: zeigt, was die Session gerade tut */
.orb-feld { display: flex; flex-direction: column; align-items: center; padding: 10px 0 14px; transition: .5s var(--feder); }
.orb-feld.klein { padding: 4px 0 20px; position: sticky; top: -8px; z-index: 3; margin: 0 -18px; background: linear-gradient(180deg, rgba(7,6,10,.99) 72%, rgba(7,6,10,0)); flex-direction: row; justify-content: center; gap: 12px; }
.orb-feld.klein .orb-werkzeug { margin: 0; max-width: 60%; } .orb-feld.klein .orb { width: 54px; height: 54px; } .orb-feld.klein .orb { width: 38px; height: 38px; } .orb-feld.klein .orb-text { font-size: 12px; margin: 0; }
.orb { position: relative; width: 118px; height: 118px; transition: .6s var(--feder); }
.orb b { position: absolute; inset: 22%; border-radius: 50%; background: var(--verlauf); box-shadow: 0 30px 60px -20px rgba(255,30,18,.8), inset 0 2px 0 rgba(255,255,255,.5); transform: scale(var(--pegel, 1)); transition: transform .08s; }
.orb i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255,106,85,.35); opacity: 0; }
.orb[data-zustand="ruhig"] b { animation: atmen 4s ease-in-out infinite; }
@keyframes atmen { 50% { transform: scale(.94); filter: brightness(.9); } }
.orb[data-zustand="hoert"] i { animation: welle 1.4s ease-out infinite; } .orb[data-zustand="hoert"] i:nth-child(2) { animation-delay: .45s; } .orb[data-zustand="hoert"] i:nth-child(3) { animation-delay: .9s; }
@keyframes welle { from { transform: scale(.55); opacity: .9; } to { transform: scale(1.25); opacity: 0; } }
.orb[data-zustand="versteht"] b, .orb[data-zustand="denkt"] b { background: conic-gradient(from 0deg, #a1000b, #ff1e12, #ff6a55, #a1000b); animation: drehen 1.6s linear infinite; }
.orb[data-zustand="denkt"] i { opacity: 1; border-style: dashed; animation: drehen 6s linear infinite reverse; }
@keyframes drehen { to { transform: rotate(360deg); } }
.orb[data-zustand="arbeitet"] b { background: conic-gradient(from 0deg, #a1000b, #ff6a55, #ff1e12, #a1000b); animation: drehen .9s linear infinite; }
.orb[data-zustand="arbeitet"] i:nth-child(1) { opacity: 1; inset: -6px; border: 2px solid transparent; border-top-color: #ff6a55; animation: drehen 1.1s linear infinite; }
.orb[data-zustand="spricht"] b { animation: sprechen .5s ease-in-out infinite alternate; }
@keyframes sprechen { from { transform: scale(.9); } to { transform: scale(1.06); } }
.orb[data-zustand="fehler"] b { background: linear-gradient(120deg, #e11d48, #f97316); }
.orb-text { margin: 10px 0 0; font-size: 13px; color: var(--fg-2); text-transform: uppercase; letter-spacing: .22em; transition: .3s; }
.orb-werkzeug { margin: 6px 0 0; min-height: 1.2em; font-size: 13px; color: var(--hell); max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .9; }

/* Nachrichten */
.nachrichten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.nachrichten li { max-width: 86%; padding: 11px 15px; border-radius: 20px; white-space: pre-wrap; word-wrap: break-word; animation: auf .55s var(--feder) both; font-size: 15.5px; text-wrap: pretty; }
@keyframes auf { from { opacity: 0; transform: translateY(14px) scale(.98); filter: blur(6px); } }
.nachrichten .chef { align-self: flex-end; background: linear-gradient(120deg, rgba(161,0,11,.85), rgba(255,30,18,.75)); border-bottom-right-radius: 6px; box-shadow: 0 20px 40px -24px rgba(255,30,18,.9); }
.nachrichten .session { align-self: flex-start; background: var(--glas); border: 1px solid var(--glas-rand); border-bottom-left-radius: 6px; backdrop-filter: blur(34px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.nachrichten .system { align-self: center; font-size: 13px; color: var(--fg-3); background: none; padding: 2px; }
.nachrichten .zeit { display: block; font-size: 11px; color: var(--fg-4); margin-top: 4px; }
.nachrichten .schritt { align-self: flex-start; font-size: 12.5px; color: var(--fg-3); padding: 3px 12px; background: none; display: flex; gap: 8px; align-items: center; }
.nachrichten .schritt::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mitte); box-shadow: 0 0 10px var(--mitte); }

/* Dock – bleibt IMMER unten (Dauerregel) */
.dock { position: fixed; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom) + 10px); z-index: 10; padding: 10px; border-radius: 28px; background: rgba(17,13,18,.62); border: 1px solid var(--glas-rand); backdrop-filter: blur(34px) saturate(170%); -webkit-backdrop-filter: blur(34px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 60px 120px -40px rgba(0,0,0,.8); }
/* Leiste hängt immer am unteren Rand des sichtbaren Bereichs; die Höhe des Bereichs misst app.js (--sicht-h) */
@media (display-mode: standalone) { .dock { top: calc(var(--sicht-h, 100dvh) - env(safe-area-inset-bottom) - 10px - var(--dock-h)); bottom: auto; } }
.eingabe { display: flex; gap: 8px; align-items: flex-end; }
.eingabe textarea { flex: 1; min-height: 44px; max-height: 140px; resize: none; padding: 11px 16px; border-radius: 22px; border: 1px solid var(--glas-rand); background: rgba(255,255,255,.05); color: #fff; font: 16px/1.35 var(--schrift); outline: none; }
.eingabe textarea:focus { border-color: rgba(255,106,85,.55); }
.knopf { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--glas); border: 1px solid var(--glas-rand); transition: .25s var(--feder); }
.knopf svg { width: 22px; height: 22px; fill: currentColor; }
.knopf.senden { background: var(--verlauf); border: 0; box-shadow: 0 14px 30px -14px rgba(255,30,18,.9); }
.knopf:active { transform: scale(.9); }
.knopf.mikro.an { background: linear-gradient(120deg, #e11d48, #f97316); border: 0; transform: scale(1.12); box-shadow: 0 0 0 calc(var(--pegel-ring, 0) * 14px) rgba(249,115,22,.25); }
.tabs { display: flex; gap: 4px; margin-top: 8px; }
.tab { flex: 1; padding: 8px 0; border-radius: 14px; font-size: 12.5px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .08em; transition: .3s; }
.tab.aktiv { color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.tab.vorlesen { flex: none; width: 44px; display: grid; place-items: center; letter-spacing: 0; } .tab.vorlesen svg { width: 20px; height: 20px; fill: currentColor; }
.tab.vorlesen[aria-pressed="true"] { color: var(--hell); }

/* Berichte + Ablage */
.karte { padding: 16px 18px; border-radius: 22px; background: var(--glas); border: 1px solid var(--glas-rand); backdrop-filter: blur(34px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); margin-bottom: 12px; animation: auf .55s var(--feder) both; }
.karte h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .22em; color: var(--hell); }
.karte .inhalt { white-space: pre-wrap; color: var(--fg-2); font-size: 15px; }
.datum { margin: 18px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .22em; color: var(--fg-3); }
.datei { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 12px 14px; }
.datei .typ { flex: none; width: 40px; height: 48px; border-radius: 10px; display: grid; place-items: center; font-size: 10px; font-weight: 700; letter-spacing: .08em; background: linear-gradient(160deg, rgba(161,0,11,.6), rgba(255,30,18,.35)); }
.datei b { display: block; font-weight: 600; font-size: 15px; } .datei small { color: var(--fg-3); }
.leer { color: var(--fg-3); text-align: center; padding: 40px 0; }

/* Blatt: nach unten wegziehen schließt (Dauerregel smarte Gesten) */
.blatt { position: fixed; inset: 0; z-index: 30; background: rgba(4,3,6,.55); backdrop-filter: blur(6px); display: flex; align-items: flex-end; }
.blatt-innen { width: 100%; height: 86vh; border-radius: 28px 28px 0 0; background: var(--nacht-2); border-top: 1px solid var(--glas-rand); padding: 10px 0 env(safe-area-inset-bottom); animation: hoch .45s var(--feder); display: flex; flex-direction: column; }
@keyframes hoch { from { transform: translateY(100%); } }
.griff { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--fg-4); margin: 0 auto 10px; }
#blatt-inhalt { flex: 1; overflow: auto; } #blatt-inhalt iframe, #blatt-inhalt img { width: 100%; height: 100%; border: 0; object-fit: contain; background: #fff; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Markenzusatz */
.by { display: block; margin-top: 6px; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--fg-2); font-weight: 500; }
.by.klein { display: inline; margin: 0 0 0 2px; font-size: 10px; letter-spacing: .2em; color: var(--fg-3); align-self: flex-end; padding-bottom: 3px; }

/* Verlauf aus dem Terminal, lange Texte, Vorlesen je Nachricht */
.nachrichten li.terminal { opacity: .92; }
.nachrichten li.lang .inhalt { display: block; max-height: 9.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); cursor: pointer; }
.nachrichten li.lang.offen .inhalt { max-height: none; -webkit-mask-image: none; mask-image: none; }
.nachrichten .zeit { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.nachrichten .hoeren { margin-left: auto; width: 32px; height: 32px; margin-block: -6px; display: grid; place-items: center; border-radius: 50%; color: var(--fg-3); background: rgba(255,255,255,.06); border: 0; }
.nachrichten .hoeren svg { width: 16px; height: 16px; fill: currentColor; }
.nachrichten .hoeren:active { color: var(--hell); background: rgba(255,255,255,.14); }
.session-karte { display: block; width: 100%; text-align: left; color: inherit; font: inherit; }
.session-karte .kopf2 { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.session-karte .kopf2 i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--farbe); box-shadow: 0 0 10px var(--farbe); }
.session-karte .kopf2 small { margin-left: auto; color: var(--fg-3); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.session-karte .vorschau { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--fg-2); font-size: 14.5px; }

/* Offene Punkte unter der Antwort (nur angezeigt, nie vorgelesen) */
.nachrichten details.punkte { display: block; margin-top: 10px; padding: 9px 12px 10px; border-radius: 14px; background: rgba(161,0,11,.08); border: 1px solid rgba(255,106,85,.16); white-space: normal; }
.nachrichten details.punkte summary { list-style: none; cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hell); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 8px; }
.nachrichten details.punkte summary::-webkit-details-marker { display: none; }
.nachrichten details.punkte summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid var(--fg-3); border-bottom: 1.5px solid var(--fg-3); transform: rotate(45deg); transition: transform .3s var(--feder); }
.nachrichten details.punkte[open] summary::after { transform: rotate(-135deg); }
.nachrichten details.punkte .liste { margin-top: 8px; white-space: pre-wrap; font-size: 14px; line-height: 1.5; color: var(--fg-2); font-variant-numeric: tabular-nums; }

/* Start vom Sperrbildschirm: iOS braucht einmal einen Fingertipp für Ton */
#start-knopf { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: rgba(7,6,10,.72); backdrop-filter: blur(24px); color: var(--fg); font-size: 17px; letter-spacing: .02em; }
#start-knopf .ring { width: 116px; height: 116px; border-radius: 50%; background: var(--verlauf); box-shadow: 0 30px 80px -30px rgba(255,30,18,.8), inset 0 1px 0 rgba(255,255,255,.5); animation: atmen 2.4s ease-in-out infinite; }
@keyframes atmen { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { #start-knopf .ring { animation: none; } }

/* Anhänge: Vorschau über dem Dock (Dock-Höhe bleibt fest) und Karten in der Nachricht */
.knopf.anhang svg { width: 21px; height: 21px; }
.anhaenge { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); display: flex; gap: 8px; overflow-x: auto; padding: 8px; border-radius: 22px; background: rgba(17,13,18,.72); border: 1px solid var(--glas-rand); backdrop-filter: blur(34px) saturate(170%); scrollbar-width: none; }
.anhaenge::-webkit-scrollbar { display: none; }
.chip-anhang { position: relative; flex: none; display: flex; align-items: center; gap: 8px; max-width: 220px; height: 48px; padding: 4px 4px 4px 4px; border-radius: 14px; background: var(--glas); border: 1px solid var(--glas-rand); overflow: hidden; font-size: 13px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.chip-anhang.laedt::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--fortschritt) * 100%); background: var(--verlauf); transition: width .2s; }
.chip-anhang.fehler { border-color: rgba(225,29,72,.6); }
.chip-anhang img, .chip-anhang .typ { flex: none; width: 38px; height: 38px; border-radius: 10px; object-fit: cover; }
.chip-anhang .typ, .anhang-karte .typ { display: grid; place-items: center; background: rgba(161,0,11,.2); color: var(--hell); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; }
.chip-anhang .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-anhang .weg { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; }
.chip-anhang .weg svg { width: 16px; height: 16px; fill: var(--fg-3); }
.anhang-leiste { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; white-space: normal; }
.anhang-karte { display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 10px 5px 5px; border-radius: 12px; background: rgba(255,255,255,.12); font-size: 13.5px; text-align: left; }
.anhang-karte .typ { flex: none; width: 34px; height: 34px; border-radius: 9px; }
.anhang-karte .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anhang-karte.bild { padding: 0; background: none; border-radius: 14px; overflow: hidden; }
.anhang-karte.bild img { display: block; width: 132px; height: 132px; object-fit: cover; }
.mit-anhang #v-chat { padding-bottom: 92px; }
.nachrichten details.punkte .punkte-hoeren { display: inline-flex; align-items: center; gap: 6px; width: auto; height: 32px; margin-top: 10px; padding: 0 12px; border-radius: 16px; font-size: 12.5px; font-weight: 600; color: var(--hell); background: rgba(255,106,85,.1); }
.nachrichten details.punkte .punkte-hoeren svg { width: 16px; height: 16px; fill: currentColor; }

/* Tastatur offen: Leiste direkt über der Tastatur, ohne Lücke (Chef 05.11.) */
.dock.tastatur { top: calc(var(--tastatur-unten, 100dvh) - 8px - var(--dock-h)) !important; bottom: auto !important; }
.eingabe textarea { scroll-padding-top: 11px; }

/* Pfeil zur letzten Nachricht, mittig über der Leiste */
#nach-unten { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(17,13,18,.72); border: 1px solid var(--glas-rand); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); box-shadow: 0 14px 30px -14px rgba(0,0,0,.8); }
#nach-unten[hidden] { display: none; }
#nach-unten svg { width: 24px; height: 24px; fill: currentColor; }
#nach-unten.neu::after { content: ""; position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--hell, #ff6a55); box-shadow: 0 0 10px var(--hell, #ff6a55); }
.anhaenge:not(:empty) ~ #nach-unten, .dock:has(.anhaenge:not(:empty)) #nach-unten { bottom: calc(100% + 96px); }

/* Rot-Thema (Chef 05.11.): Logo ist das Maschinenauge */
.logo { background: url(miraone-logo.svg?v=4) center/cover no-repeat !important; box-shadow: 0 18px 40px -16px rgba(255,30,18,.75) !important; }
.logo::before, .logo::after { display: none !important; }

/* Kopfzeile beim Arbeiten: Kreis gut sichtbar, Text einzeilig und mittig, keine Befehlszeile (Chef 05.11.) */
.orb-feld.klein { align-items: center; }
.orb-feld.klein .orb { width: 44px !important; height: 44px !important; }
.orb-feld.klein .orb-text { white-space: nowrap; font-size: 12.5px; }
.orb-feld.klein .orb-werkzeug { display: none; }
.logo { background-image: url(miraone-logo.svg?v=4) !important; }
.orb-feld.klein .orb b { inset: 10%; }
.orb-feld.klein .orb[data-zustand="arbeitet"] i:nth-child(1), .orb-feld.klein .orb[data-zustand="denkt"] i { inset: 1px; border-width: 2.5px; }
.orb-feld.klein .orb[data-zustand="arbeitet"] i:nth-child(1) { border-right-color: rgba(255,106,85,.45); }

/* MiraOne-Emblem als Kern (Chef 06.11.): oben beim Denken/Arbeiten das Logo mit seiner Animation statt der roten Kugel */
.orb b { background: url(miraone-kern.svg?v=4) center/contain no-repeat !important; box-shadow: none !important; inset: 4% !important; filter: drop-shadow(0 8px 18px rgba(255,30,18,.45)); }
.orb[data-zustand="denkt"] b, .orb[data-zustand="versteht"] b { animation: kernDenken 2.4s ease-in-out infinite !important; }
.orb[data-zustand="arbeitet"] b { animation: kernArbeiten 3s linear infinite !important; }
.orb[data-zustand="spricht"] b { animation: kernSprechen .5s ease-in-out infinite alternate !important; }
@keyframes kernDenken { 0% { transform: rotate(0) scale(.94); } 50% { transform: rotate(180deg) scale(1.04); } 100% { transform: rotate(360deg) scale(.94); } }
@keyframes kernArbeiten { to { transform: rotate(360deg); } }
@keyframes kernSprechen { from { transform: scale(.94); } to { transform: scale(1.06); } }
.orb-feld.klein .orb[data-zustand] i { display: none; }

/* Fragen (Chef 06.11.): Frage oben, Dokumente antippbar, Vorschläge als große Knöpfe, eigene Antwort unten */
.tab { position: relative; }
.tab .zahl { position: absolute; top: -9px; right: 0; margin: 0; }
.zahl { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; margin-left: 5px; border-radius: 999px; background: var(--verlauf); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0; vertical-align: 1px; box-shadow: 0 6px 14px -6px rgba(255,30,18,.9); }
.chip[data-fragen]:not([data-fragen=""])::after { content: attr(data-fragen); display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--verlauf); color: #fff; font-size: 10.5px; font-weight: 700; }
.fragen-unter { margin: -8px 0 12px; color: var(--fg-2); font-size: 15px; }
.fragen-weitere { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.fragen-weitere:empty { display: none; }
.chip.klein { padding: 6px 10px 6px 12px; font-size: 13px; }
.frage { padding: 18px; }
.frage-meta { margin: 0 0 8px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .2em; color: var(--hell); }
.karte h3.frage-text { margin: 0; font-size: 19px; line-height: 1.32; font-weight: 600; letter-spacing: -.012em; color: #fff; text-transform: none; text-wrap: pretty; }
.frage-kontext { margin: 8px 0 0; color: var(--fg-2); font-size: 15px; white-space: pre-wrap; }
.frage-docs { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.frage-doc { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 14px 6px 6px; border-radius: 16px; text-align: left; background: rgba(255,255,255,.05); border: 1px solid var(--glas-rand); transition: transform .15s; }
.frage-doc:active { transform: scale(.98); }
.frage-doc .typ { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 10px; font-weight: 700; letter-spacing: .06em; background: linear-gradient(160deg, rgba(161,0,11,.6), rgba(255,30,18,.35)); }
.frage-doc .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.frage-doc small { flex: none; color: var(--hell); font-size: 13px; }
.frage-optionen { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.frage-option { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 16px; text-align: left; font-size: 16px; background: rgba(255,255,255,.05); border: 1px solid var(--glas-rand); transition: .25s var(--feder); }
.frage-option i { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--fg-3); transition: .25s var(--feder); }
.frage-option.mehrfach i { border-radius: 6px; }
.frage-option[aria-checked="true"] { background: linear-gradient(120deg, rgba(161,0,11,.5), rgba(255,30,18,.32)); border-color: rgba(255,106,85,.6); box-shadow: inset 0 1px 0 var(--glas-licht), 0 14px 30px -18px rgba(255,30,18,.9); }
.frage-option[aria-checked="true"] i { border-color: #fff; background: #fff; box-shadow: inset 0 0 0 4px #c0101a; }
.frage-option:active { transform: scale(.985); }
.frage-eigen { display: block; width: 100%; min-height: 48px; max-height: 180px; margin-top: 12px; padding: 13px 16px; resize: none; border-radius: 16px; border: 1px solid var(--glas-rand); background: rgba(255,255,255,.04); color: #fff; font: 16px/1.4 var(--schrift); outline: none; }
.frage-eigen:focus { border-color: rgba(255,106,85,.55); }
.frage-senden { display: block; width: 100%; min-height: 50px; margin-top: 12px; padding: 12px 16px; border-radius: 999px; background: var(--verlauf); color: #fff; font-weight: 600; font-size: 16px; box-shadow: 0 16px 34px -16px rgba(255,30,18,.9); transition: .25s var(--feder); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frage-senden:disabled { background: rgba(255,255,255,.07); color: var(--fg-3); box-shadow: none; }
.frage-fehler { margin: 10px 0 0; color: #ff8a8a; font-size: 14px; }
.frage.beantwortet { animation: weg 1.4s var(--feder) both; }
@keyframes weg { 0% { opacity: 1; } 70% { opacity: 1; filter: blur(0); } 100% { opacity: 0; filter: blur(6px); transform: scale(.97); } }
.frage-ok { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; color: #fff; }
.frage-ok svg { flex: none; width: 26px; height: 26px; padding: 4px; border-radius: 50%; fill: #fff; background: var(--ok); }
.fragen-fertig { margin: 22px 0 8px; }
.fragen-fertig summary { cursor: pointer; list-style: none; font-size: 12px; text-transform: uppercase; letter-spacing: .22em; color: var(--fg-3); padding: 8px 0; }
.fragen-fertig summary::-webkit-details-marker { display: none; }
.frage-erledigt { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.07); }
.frage-erledigt b { font-weight: 500; font-size: 14.5px; color: var(--fg-2); }
.frage-erledigt span { font-size: 14px; color: var(--hell); }
.frage-erledigt small { font-size: 12px; color: var(--fg-3); }
.blatt-zu { position: absolute; top: 12px; right: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid var(--glas-rand); }
.blatt-zu svg { width: 20px; height: 20px; fill: #fff; }
.blatt-innen { position: relative; }
/* Blatt: Platz für den Schließen-Knopf, Bilder auf dunklem Grund (Weiß nur hinter PDFs) */
.blatt-innen { padding-top: 62px; }
.blatt-innen .griff { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); }
#blatt-inhalt img { background: transparent; }

/* Fragen-Reiter der App: schlicht, nur Fragen (Chef 06.11.) */
.nur-fragen #dock, .nur-fragen .kopf .sessions { display: none !important; }
.nur-fragen .ansicht { top: calc(env(safe-area-inset-top) + 64px) !important; bottom: env(safe-area-inset-bottom) !important; }
.in-app:not(.nur-fragen) .tab[data-ziel="fragen"] { display: none !important; }

/* In der iPhone-App liegt unten die App-Leiste (Naomi/Chat/Fragen/Einstellungen). Nach der Tastatur meldet WebKit
   den unteren Sicherheitsabstand manchmal als 0 – dann rutschte die Eingabe hinter die App-Leiste (Chef 06.11.).
   Darum in der App immer mindestens die Höhe der App-Leiste freihalten. */
.in-app .dock:not(.tastatur) { top: auto !important; bottom: calc(max(env(safe-area-inset-bottom), 83px) + 8px) !important; }
.in-app .ansicht { bottom: calc(var(--dock-h) + max(env(safe-area-inset-bottom), 83px) + 8px) !important; }
.in-app.nur-fragen .ansicht { bottom: calc(max(env(safe-area-inset-bottom), 83px) + 8px) !important; }

/* Fragen-Reiter als Karteikarten (Chef 06.11.) */
.nur-fragen .kopf, .nur-fragen #v-fragen > .titel, .nur-fragen #fragen-unter, .nur-fragen .fragen-weitere, .nur-fragen #fragen-fertig-box { display: none !important; }
.nur-fragen .ansicht { top: calc(env(safe-area-inset-top) + 8px) !important; }
.fk-kopf { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; margin: 4px 0 14px; }
.fk-titel { margin: 0; font-size: 26px; letter-spacing: -.02em; }
.fk-session { display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 13px; border-radius: 999px; background: var(--glas); border: 1px solid color-mix(in srgb, var(--farbe) 55%, transparent); max-width: 52vw; }
.fk-session[hidden] { display: none; }
.fk-session i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--farbe); box-shadow: 0 0 10px var(--farbe); }
.fk-session b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fk-session .zahl { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: grid; place-items: center; background: var(--fragen-farbe, #ff1e12); color: #fff; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fk-punkte { grid-column: 1 / -1; justify-self: center; display: flex; gap: 6px; margin-top: 6px; }
.fk-punkte span { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.3); transition: .3s var(--feder); }
.fk-punkte span.an { width: 22px; background: var(--fragen-farbe, #ff1e12); }
.fk-info { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 8px; color: var(--fg-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.fk-weiter { padding: 7px 14px; border-radius: 999px; background: var(--glas); border: 1px solid var(--glas-rand); color: var(--fg-2); font-size: 13.5px; }
.fk-karte.rein { animation: fkRein .38s var(--feder) both; }
.fk-karte.rein.von-rechts { animation-name: fkVonRechts; } .fk-karte.rein.von-links { animation-name: fkVonLinks; }
.fk-karte.raus-oben { animation: fkRausOben .32s ease-in forwards; } .fk-karte.raus-links { animation: fkRausLinks .28s ease-in forwards; }
@keyframes fkRein { from { opacity: 0; transform: translateY(40px) scale(.96); } }
@keyframes fkVonRechts { from { opacity: 0; transform: translateX(60px); } } @keyframes fkVonLinks { from { opacity: 0; transform: translateX(-60px); } }
@keyframes fkRausOben { to { opacity: 0; transform: translateY(-80px) rotate(-3deg) scale(.95); } }
@keyframes fkRausLinks { to { opacity: 0; transform: translateX(-110%) rotate(-6deg); } }
.nur-fragen .buehne { background: radial-gradient(90% 60% at 20% 0%, color-mix(in srgb, var(--fragen-farbe, #ff1e12) 28%, transparent), transparent 70%), radial-gradient(80% 50% at 90% 100%, color-mix(in srgb, var(--fragen-farbe, #ff1e12) 16%, transparent), transparent 70%), var(--nacht); }
.in-app.tastatur-offen.nur-fragen .ansicht { bottom: 0 !important; }
.in-app.tastatur-offen.nur-fragen .ansicht { padding-bottom: 40px; }
/* Chef 07.11.: Beim Tippen hing die Anzeige. Glas-Unschärfe ist am iPhone die teuerste Zeichenarbeit und wird bei
   jeder Tastatur- und Scrollbewegung neu gerechnet – solange getippt wird, ohne Unschärfe, dafür etwas dichter. */
.tastatur-offen *, .tastatur-offen *::before, .tastatur-offen *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.tastatur-offen .dock, .tastatur-offen .fk-karte { background-color: rgba(18, 8, 12, 0.94) !important; }

/* Links in Fragen (Chef 07.11.) */
.frage-link{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:3px;word-break:break-all}

/* Code-Schritt in der Fragen-Karte (Chef 07.11.) */
.frage-code .frage-meta { color: #ff8a70; }
.frage-gewaehlt { margin: 6px 0 2px; color: rgba(255,255,255,.62); font-size: 15px; }
.code-felder { display: grid; gap: 12px; margin: 14px 0 16px; }
.code-feld { display: grid; gap: 6px; }
.code-feld span { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #ff6b5a; font-weight: 600; }
.code-feld input { box-sizing: border-box; width: 100%; min-width: 0; font: 600 26px/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .28em; text-align: center; padding: 14px 12px;
  border-radius: 16px; border: 1px solid rgba(255,107,90,.45); background: rgba(255,255,255,.06); color: #fff; font-variant-numeric: tabular-nums; }
.code-feld input:focus { outline: none; border-color: #ff6b5a; box-shadow: 0 0 0 3px rgba(255,107,90,.18); }
.code-feld input::placeholder { font: 500 17px/1.2 -apple-system, system-ui, sans-serif; letter-spacing: 0; color: rgba(255,255,255,.35); }

/* Wortmarke (Chef 07.11.2026): der Stimmkranz ersetzt das O */
.wortmarke { display: block; height: auto; }
.wortmarke.gross { width: min(78vw, 340px); margin: 0 auto 6px; }
.wortmarke.klein { width: 118px; flex: none; }
.marke .wortmarke-h { margin: 0; line-height: 0; }

/* Session-Knopf statt Chip-Leiste (Chef 07.11.) */
.session-knopf { display: none; }
.in-app .kopf .sessions { display: none; }
.in-app .session-knopf { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 4px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--glas); border: 1px solid rgba(255,106,85,.45); color: #fff; font: 600 15px/1.1 inherit; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 var(--glas-licht); max-width: 70vw; }
.in-app .kopf { display: flex; flex-direction: column; align-items: stretch; }
.in-app .kopf .session-knopf { align-self: center; }
.session-knopf i, .session-wahl i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--farbe); }
.session-knopf span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-knopf b { width: 7px; height: 7px; border-right: 2px solid rgba(255,255,255,.7); border-bottom: 2px solid rgba(255,255,255,.7); transform: translateY(-2px) rotate(45deg); }
.session-menue { position: fixed; z-index: 50; left: 50%; top: calc(env(safe-area-inset-top) + 92px); transform: translateX(-50%); min-width: 230px; padding: 6px; border-radius: 18px; background: rgba(20,10,14,.82); border: 1px solid var(--glas-rand); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 24px 60px -24px rgba(0,0,0,.8); }
.session-wahl { display: flex; width: 100%; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 12px; background: none; color: var(--fg-2); font: 500 15px inherit; text-align: left; }
.session-wahl.aktiv { color: #fff; background: rgba(255,30,18,.22); }
.nur-fragen .session-knopf, .nur-fragen .session-menue { display: none !important; }
#v-chat.wisch-links { animation: wischL .28s ease-out; } #v-chat.wisch-rechts { animation: wischR .28s ease-out; }
@keyframes wischL { from { opacity: .4; transform: translateX(28px); } } @keyframes wischR { from { opacity: .4; transform: translateX(-28px); } }
@media (prefers-reduced-motion: reduce) { #v-chat.wisch-links, #v-chat.wisch-rechts { animation: none; } }

/* Einstellungen + Routinen (Chef 07.11.): Blatt mit Wisch-nach-unten-Schließen, ruhig, überfällig hervorgehoben */
.kopf-knopf { flex: none; width: 36px; height: 36px; margin: -6px -6px -6px 4px; border-radius: 50%; display: grid; place-items: center; color: var(--fg-3); transition: color .25s, background .25s; }
.kopf-knopf svg { width: 20px; height: 20px; fill: currentColor; } .kopf-knopf:active { background: var(--glas); color: #fff; }
.einst { padding: 0 18px 28px; }
.einst-titel { font-size: 28px; letter-spacing: -.04em; line-height: 1; margin: 0 0 18px; }
.einst-titel em { font-style: normal; background: linear-gradient(110deg, var(--hell), var(--mitte)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.einst-zurueck { display: inline-flex; align-items: center; gap: 4px; margin: -8px 0 12px -6px; padding: 6px 8px; border-radius: 12px; color: var(--fg-2); font-size: 15px; }
.einst-zurueck svg { width: 18px; height: 18px; fill: currentColor; }
.einst-gruppe { border-radius: 20px; background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); overflow: hidden; margin-bottom: 18px; animation: auf .55s var(--feder) both; }
.einst-zeile { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 16px; min-height: 56px; }
.einst-zeile + .einst-zeile { border-top: 1px solid rgba(255,255,255,.07); }
.einst-zeile .text { flex: 1; min-width: 0; } .einst-zeile b { display: block; font-weight: 600; font-size: 16px; } .einst-zeile small { display: block; color: var(--fg-3); font-size: 13px; margin-top: 2px; }
.einst-zeile .pfeil { flex: none; width: 18px; height: 18px; fill: var(--fg-4); }
.einst-kopf { margin: 0 4px 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .22em; color: var(--fg-3); display: flex; justify-content: space-between; gap: 12px; }
.einst-kopf span { letter-spacing: .06em; }
.einst-stand { margin: -6px 2px 18px; color: var(--fg-3); font-size: 13px; }
.routine { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 13px 16px; }
.routine + .routine { border-top: 1px solid rgba(255,255,255,.07); }
.routine b { font-weight: 500; font-size: 15px; line-height: 1.32; color: var(--fg); text-wrap: pretty; min-width: 0; overflow-wrap: anywhere; }
.routine small { grid-column: 1 / -1; color: var(--fg-3); font-size: 13px; }
.routine .status { align-self: start; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; white-space: nowrap; color: var(--fg-3); border: 1px solid var(--glas-rand); }
.routine.ueber { background: linear-gradient(90deg, rgba(225,29,72,.10), transparent 70%); }
.routine.ueber .status { color: #ffb4c0; border-color: rgba(225,29,72,.45); background: rgba(225,29,72,.14); }
.routine.ueber small { color: var(--fg-2); }

/* Chef 07.11.: Mikrofon neben Absenden im Chat der App entfernt – gesprochen wird im Naomi-Reiter */
.in-app #mikro { display: none !important; }

/* Chef 08.11.: Ansichten in der App beginnen unter dem gemessenen Kopf (vorher fest 98 px, Kopf ist ca. 114 px hoch) */
.in-app:not(.nur-fragen) .ansicht { top: var(--kopf-h, calc(env(safe-area-inset-top) + 116px)) !important; }
/* Orb-Band im Chat: eigene Ebene und deckender Grund, damit Nachrichtentext nicht durchscheint */
.orb-feld.klein { isolation: isolate; transform: translateZ(0); background: linear-gradient(180deg, rgb(7,6,10) 78%, rgba(7,6,10,0)); }
/* Fragen: Punkte = Fragen der Session; Randpunkte kleiner, wenn es weitergeht; Session-Knopf wechselt bei mehreren */
.fk-punkte { flex-wrap: nowrap; max-width: 100%; }
.fk-punkte span { flex: none; }
.fk-punkte span.rand { width: 4px; height: 4px; margin-block: 1px; }
.fk-session { cursor: default; }
.fk-session.mehrere { cursor: pointer; }
.fk-session.mehrere::after { content: ""; flex: none; width: 6px; height: 6px; margin: 0 4px 0 -2px; border-right: 1.5px solid var(--fg-3); border-bottom: 1.5px solid var(--fg-3); transform: rotate(-45deg); }

/* Chef 08.11.: Beim Tippen langer Texte keine Glas-Unschärfe hinter dem Eingabefeld neu berechnen (größte Bremse auf dem iPhone) */
#dock.tastatur, #dock.tastatur * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
#dock.tastatur { background: rgba(14,8,10,.97) !important; }
#text { contain: layout paint; overscroll-behavior: contain; }
.frage-eigen, .fk-karte textarea { contain: layout paint; }

/* Fern-Anmeldung (Chef 08.11.): Anmeldeseite des Arbeits-Chrome live, der Chef tippt selbst */
.frage-fern { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 56px; padding: 10px 16px; margin: 4px 0 10px; border-radius: 16px; text-align: left;
  background: linear-gradient(160deg, rgba(161,0,11,.55), rgba(255,30,18,.28)); border: 1px solid var(--glas-rand); color: #fff; }
.frage-fern b { font-size: 15.5px; } .frage-fern small { opacity: .75; font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fern { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; gap: 10px; padding: calc(env(safe-area-inset-top) + 10px) 14px calc(env(safe-area-inset-bottom) + 12px);
  background: #08080c; color: #fff; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.fern-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fern-kopf div { min-width: 0; display: flex; flex-direction: column; } .fern-kopf small { opacity: .7; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fern-zu { flex: none; min-height: 44px; padding: 0 18px; border-radius: 22px; background: rgba(255,255,255,.12); border: 1px solid var(--glas-rand); color: #fff; font-weight: 600; }
.fern-rahmen { position: relative; flex: none; width: min(100%, calc(54vh * 400 / 820)); aspect-ratio: 400 / 820; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #111; border: 1px solid var(--glas-rand); }
.fern-bild { display: block; width: 100%; height: 100%; object-fit: contain; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.fern-status { position: absolute; inset: auto 0 45% 0; text-align: center; font-size: 14px; opacity: .8; }
.fern-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fern-felder label { min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; opacity: .9; }
.fern-felder input { width: 100%; min-width: 0; box-sizing: border-box; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--glas-rand); background: rgba(255,255,255,.08); color: #fff; font-size: 16px; }
.fern-tasten { display: flex; flex-wrap: wrap; gap: 8px; }
.fern-tasten button { flex: 1 1 28%; min-height: 44px; padding: 0 12px; border-radius: 12px; background: rgba(255,255,255,.1); border: 1px solid var(--glas-rand); color: #fff; font-size: 14px; }
.fern-hinweis { font-size: 12.5px; line-height: 1.45; opacity: .7; margin: 0; }

/* Hinweis bei neuen Fragen (Chef 09.11.) */
#frage-hinweis { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 12px); z-index: 60; transform: translate(-50%, -140%);
  padding: 10px 18px; white-space: nowrap; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); color: #fff; font: 600 15px/1.2 inherit;
  background: rgba(30,30,34,.72); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .45s cubic-bezier(.2,.9,.25,1.15), opacity .3s; opacity: 0; }
#frage-hinweis.zeigen { transform: translate(-50%, 0); opacity: 1; }
#fragen-zahl.puls { animation: fragenPuls .9s ease 2; }
@keyframes fragenPuls { 50% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { #frage-hinweis { transition: opacity .2s; } #fragen-zahl.puls { animation: none; } }
/* Mail-Entwurf in Fragen (Chef 12.11.2026): Überschrift, An/Betreff getrennt und nicht fett, Text mit Absätzen */
.frage-mail { margin: 12px 0 4px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid var(--glas-rand); }
.frage-mail h4 { margin: 0 0 10px; font-size: 15px; font-weight: 650; }
.frage-mail dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--glas-rand); font-size: 14px; }
.frage-mail dt { color: var(--fg-3); font-weight: 400; }
.frage-mail dd { margin: 0; font-weight: 400; color: var(--fg); word-break: break-word; }
.frage-mail .mail-text p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; font-weight: 400; color: var(--fg-2); white-space: pre-wrap; }
.frage-mail .mail-text p:last-child { margin-bottom: 0; }

/* Fern-Anmeldung: unsichtbares Direktfeld öffnet die iPhone-Tastatur (Chef 12.11.) */
.fern-direkt { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; font-size: 16px; pointer-events: none; caret-color: transparent; background: transparent; color: transparent; }
.fern.fern-tippt .fern-rahmen { box-shadow: 0 0 0 2px rgba(255,90,70,.55); }

/* Überspringen unten rechts unter der Fragenkarte (Chef 12.11.) */
.fk-unten { display: flex; justify-content: flex-end; margin: 12px 4px 0; }
.fk-unten .fk-weiter { min-height: 40px; padding: 9px 18px; font-size: 15px; }