/* Homemaz – Oberfläche im Aussehen des Leitstands: dunkles Schiefer, Glas, Türkis.
   Der obere Teil ist der Leitstand unverändert, die Homemaz-Bausteine stehen am Ende.
   Keine Fremdbibliothek, kein Bauschritt. */

@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #080c11;
  --flaeche: rgba(255, 255, 255, 0.05);
  --flaeche-2: rgba(255, 255, 255, 0.085);
  --flaeche-3: rgba(255, 255, 255, 0.13);
  --rand: rgba(255, 255, 255, 0.085);
  --rand-2: rgba(255, 255, 255, 0.16);
  --text: #eaf0f4;
  --text-2: #a7b4bd;
  --text-3: #6d7c87;
  --akzent: #2dd4bf;
  --akzent-2: color-mix(in srgb, var(--akzent) 62%, white);
  --akzent-tief: color-mix(in srgb, var(--akzent) 45%, black);
  --akzent-hauch: color-mix(in srgb, var(--akzent) 14%, transparent);
  --ok: #3ddc97;
  --warn: #f7c04a;
  --krit: #ff6b81;
  --info: #7cc4ff;
  --claude: #f0906a;
  --hermes: #9d8cff;
  --licht: #ffd27a;
  --waerme: #ff9a5c;
  --radius: 22px;
  --radius-2: 16px;
  --radius-3: 12px;
  --schatten: 0 10px 34px rgba(0, 0, 0, 0.34);
  --kurve: cubic-bezier(0.2, 0.8, 0.2, 1);
  --feder: cubic-bezier(0.34, 1.4, 0.5, 1);
  --leiste-h: 66px;
  --oben: env(safe-area-inset-top, 0px);
  --unten: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  font-feature-settings: "cv11", "ss01", "calt";
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  overflow: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: var(--akzent-2); text-decoration: none; }
h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; }
::selection { background: color-mix(in srgb, var(--akzent) 35%, transparent); }
.zahl { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* ---------- Hintergrund: Schiefer mit Tuerkis-Schein ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background:
  radial-gradient(120% 70% at 8% -12%, color-mix(in srgb, var(--akzent) 20%, transparent), transparent 58%),
  radial-gradient(90% 60% at 104% 8%, rgba(74, 110, 150, 0.30), transparent 60%),
  radial-gradient(110% 70% at 50% 118%, rgba(26, 60, 82, 0.55), transparent 62%),
  linear-gradient(180deg, #0c1219 0%, #080c11 55%, #070a0e 100%); }
.bg::before, .bg::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; }
.bg::before { width: 60vmax; height: 60vmax; left: -22vmax; top: -30vmax;
  background: conic-gradient(from 210deg, color-mix(in srgb, var(--akzent) 34%, transparent), rgba(56, 96, 140, 0.24), color-mix(in srgb, var(--akzent) 5%, transparent), color-mix(in srgb, var(--akzent) 34%, transparent));
  animation: treiben 46s ease-in-out infinite alternate; }
.bg::after { width: 52vmax; height: 52vmax; right: -24vmax; bottom: -30vmax;
  background: conic-gradient(from 40deg, rgba(60, 98, 150, 0.36), color-mix(in srgb, var(--akzent) 12%, transparent), rgba(30, 46, 70, 0.3), rgba(60, 98, 150, 0.36));
  animation: treiben 58s ease-in-out infinite alternate-reverse; }
@keyframes treiben { to { transform: translate3d(7vmax, 5vmax, 0) rotate(28deg) scale(1.08); } }
.korn { position: fixed; inset: 0; z-index: -1; opacity: 0.05; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }

/* ---------- Geruest ---------- */
#app { position: fixed; inset: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; }
.ansicht { overflow-y: auto; overflow-x: hidden; padding: calc(var(--oben) + 14px) 16px calc(var(--leiste-h) + var(--unten) + 26px);
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ansicht::-webkit-scrollbar { display: none; }
.ansicht > .seite-inhalt { max-width: 1480px; margin: 0 auto; animation: herein 0.34s var(--kurve) both; }
@keyframes herein { from { opacity: 0; transform: translateY(10px); } }
.ansicht > .seite-inhalt.fest { animation: none; }
@keyframes einblenden { from { opacity: 0; } }

.leiste { position: fixed; left: 12px; right: 12px; bottom: calc(var(--unten) + 10px); height: var(--leiste-h); z-index: 30;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center; padding: 0 6px;
  border-radius: 26px; background: rgba(18, 24, 32, 0.72); border: 1px solid var(--rand);
  -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.leiste button { position: relative; height: 54px; display: grid; place-items: center; gap: 2px; align-content: center;
  color: var(--text-3); font-size: 10.5px; font-weight: 560; letter-spacing: 0.02em; border-radius: 18px;
  transition: color 0.2s, transform 0.18s var(--kurve); }
.leiste button svg { width: 23px; height: 23px; stroke-width: 1.9; transition: transform 0.3s var(--feder); }
.leiste button:active { transform: scale(0.93); }
.leiste button.aktiv { color: var(--text); }
.leiste button.aktiv svg { color: var(--akzent); transform: translateY(-1px) scale(1.08); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--akzent) 55%, transparent)); }
.leiste button .marke { position: absolute; top: 6px; left: calc(50% + 7px); }

.seite { display: none; }
.marke { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--krit); color: #1b0b10;
  font-size: 10.5px; font-weight: 750; display: grid; place-items: center; box-shadow: 0 0 0 2px rgba(12, 16, 22, 0.9); }
.marke.warn { background: var(--warn); }
.marke.leise { background: var(--akzent); color: color-mix(in srgb, var(--akzent) 14%, black); }

/* Breite Bildschirme (Tablet, Querformat, Desktop): Seitenleiste statt Tableiste – ab 760 px, damit Tablets im Hochformat dazugehören (08.10.2026) */
@media (min-width: 760px) {
  #app { grid-template-columns: 92px 1fr; }
  .leiste { display: none; }
  .seite { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 0 18px;
    border-right: 1px solid var(--rand); background: rgba(12, 17, 23, 0.5);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
  .seite .zeichen { width: 44px; height: 44px; margin-bottom: 18px; }
  .seite button.nav { position: relative; width: 70px; height: 62px; border-radius: 18px; display: grid; place-items: center; gap: 3px;
    align-content: center; color: var(--text-3); font-size: 11px; font-weight: 560; transition: background 0.2s, color 0.2s; }
  .seite button.nav svg { width: 22px; height: 22px; stroke-width: 1.9; }
  .seite button.nav:hover { background: var(--flaeche); color: var(--text-2); }
  .seite button.nav.aktiv { background: var(--akzent-hauch); color: var(--text); }
  .seite button.nav.aktiv svg { color: var(--akzent); }
  .seite button.nav .marke { position: absolute; top: 7px; right: 12px; }
  .seite .fuss { margin-top: auto; display: grid; gap: 10px; justify-items: center; }
  .ansicht { padding: 30px 34px 40px; }
}

/* ---------- Grundbausteine ---------- */
.karte { position: relative; border-radius: var(--radius); padding: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.032));
  border: 1px solid var(--rand); box-shadow: var(--schatten), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.karte.klickbar { cursor: pointer; transition: transform 0.2s var(--kurve), border-color 0.2s, background 0.2s; }
.karte.klickbar:active { transform: scale(0.985); }
@media (hover: hover) { .karte.klickbar:hover { border-color: var(--rand-2); transform: translateY(-2px); } }
.karte.flach { box-shadow: none; }
.karte.eng { padding: 12px 14px; }
.karte.mitte > .ring { margin: 0 auto; }
.karte.glanz { border-color: color-mix(in srgb, var(--akzent) 30%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--akzent) 16%, transparent), rgba(255, 255, 255, 0.035) 62%); }

.abschnitt { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 4px 11px; }
.abschnitt h2 { font-size: 12px; font-weight: 680; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-3); }
.abschnitt a, .abschnitt button { font-size: 13px; font-weight: 600; color: var(--akzent-2); display: inline-flex; align-items: center; gap: 2px; }
.abschnitt a svg, .abschnitt button svg { width: 15px; height: 15px; }

.kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 2px 16px; min-height: 44px; }
.kopf h1 { font-size: 27px; font-weight: 720; letter-spacing: -0.025em; }
.kopf .unter { color: var(--text-2); font-size: 13.5px; margin-top: 2px; }
.kopf .rechts { display: flex; align-items: center; gap: 8px; }

.raster { display: grid; gap: 12px; }
.raster.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster.auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.raster.auto-klein { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
.raster.auto-breit { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.stapel { display: grid; gap: 10px; }
.reihe { display: flex; align-items: center; gap: 10px; }
.reihe.zwischen { justify-content: space-between; }
.reihe.umbruch { flex-wrap: wrap; }
.wachsen { flex: 1; min-width: 0; }
.kuerzen { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leise { color: var(--text-2); }
.blass { color: var(--text-3); }
.klein { font-size: 13px; }
.winzig { font-size: 11.5px; }
.fett { font-weight: 650; }
.mitte { text-align: center; }

.laufband { display: flex; gap: 11px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 12px; scroll-snap-type: x proximity;
  scrollbar-width: none; }
.laufband::-webkit-scrollbar { display: none; }
.laufband > * { flex: 0 0 auto; scroll-snap-align: start; }
@media (min-width: 760px) { .laufband { margin: 0; padding: 2px 0 12px; flex-wrap: wrap; overflow: visible; } }

.punkt { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--text-3); }
.punkt.ok { background: var(--ok); box-shadow: 0 0 10px rgba(61, 220, 151, 0.7); }
.punkt.warn { background: var(--warn); box-shadow: 0 0 10px rgba(247, 192, 74, 0.6); }
.punkt.krit { background: var(--krit); box-shadow: 0 0 12px rgba(255, 107, 129, 0.8); animation: pochen 1.6s ease-in-out infinite; }
.punkt.aus, .punkt.unbekannt { background: #4a5661; }
.punkt.lebt { background: var(--akzent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--akzent) 60%, transparent); animation: welle 1.8s ease-out infinite; }
@keyframes pochen { 50% { transform: scale(1.25); opacity: 0.75; } }
@keyframes welle { to { box-shadow: 0 0 0 9px color-mix(in srgb, var(--akzent) 0%, transparent); } }

.symbol { width: 20px; height: 20px; flex: 0 0 auto; stroke-width: 1.9; }
.symbolkreis { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--flaeche-2); color: var(--text-2); transition: background 0.3s, color 0.3s, box-shadow 0.3s; }
.symbolkreis svg { width: 21px; height: 21px; stroke-width: 1.9; }
.symbolkreis.an { background: linear-gradient(145deg, rgba(255, 210, 122, 0.95), rgba(255, 170, 80, 0.9)); color: #3a2400;
  box-shadow: 0 6px 22px rgba(255, 196, 100, 0.38); }
.symbolkreis.akzent { background: var(--akzent-hauch); color: var(--akzent-2); }
.symbolkreis.claude { background: rgba(240, 144, 106, 0.16); color: var(--claude); }
.symbolkreis.hermes { background: rgba(157, 140, 255, 0.16); color: var(--hermes); }
.symbolkreis.ok { background: rgba(61, 220, 151, 0.14); color: var(--ok); }
.symbolkreis.warn { background: rgba(247, 192, 74, 0.15); color: var(--warn); }
.symbolkreis.krit { background: rgba(255, 107, 129, 0.16); color: var(--krit); }
.symbolkreis.klein { width: 34px; height: 34px; border-radius: 11px; }
.symbolkreis.klein svg { width: 17px; height: 17px; }
.symbolkreis.waerme { background: rgba(255, 154, 92, 0.18); color: var(--waerme); }

.pille { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 14px;
  background: var(--flaeche-2); border: 1px solid var(--rand); font-size: 12.5px; font-weight: 580; color: var(--text-2); white-space: nowrap; }
.pille svg { width: 14px; height: 14px; }
.pille.ok { color: var(--ok); background: rgba(61, 220, 151, 0.1); border-color: rgba(61, 220, 151, 0.24); }
.pille.warn { color: var(--warn); background: rgba(247, 192, 74, 0.1); border-color: rgba(247, 192, 74, 0.26); }
.pille.krit { color: var(--krit); background: rgba(255, 107, 129, 0.11); border-color: rgba(255, 107, 129, 0.3); }
.pille.akzent { color: var(--akzent-2); background: var(--akzent-hauch); border-color: color-mix(in srgb, var(--akzent) 30%, transparent); }
button.pille { transition: transform 0.15s var(--kurve), background 0.2s; }
button.pille:active { transform: scale(0.95); }
button.pille.gewaehlt { color: color-mix(in srgb, var(--akzent) 14%, black); background: var(--akzent); border-color: transparent; }

.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px;
  border-radius: 15px; font-weight: 640; font-size: 14.5px; background: var(--flaeche-2); border: 1px solid var(--rand);
  transition: transform 0.15s var(--kurve), background 0.2s, border-color 0.2s, opacity 0.2s; white-space: nowrap; }
.knopf svg { width: 18px; height: 18px; }
.knopf:active { transform: scale(0.96); }
.knopf:disabled { opacity: 0.45; pointer-events: none; }
.knopf.haupt { background: linear-gradient(180deg, color-mix(in srgb, var(--akzent) 86%, white), color-mix(in srgb, var(--akzent) 86%, black)); border-color: transparent; color: color-mix(in srgb, var(--akzent) 14%, black);
  box-shadow: 0 8px 26px color-mix(in srgb, var(--akzent) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.knopf.gefahr { color: var(--krit); border-color: rgba(255, 107, 129, 0.3); background: rgba(255, 107, 129, 0.1); }
.knopf.klein { height: 34px; padding: 0 13px; border-radius: 12px; font-size: 13px; }
.knopf.rund { width: 44px; padding: 0; border-radius: 50%; }
.knopf.rund.klein { width: 34px; }
.knopf.breit { width: 100%; }
.knopf.still { background: transparent; border-color: transparent; color: var(--text-2); }
@media (hover: hover) { .knopf:hover { background: var(--flaeche-3); } .knopf.haupt:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--akzent) 76%, white), color-mix(in srgb, var(--akzent) 92%, black)); } }

/* Schalter */
.schalter { position: relative; width: 50px; height: 30px; border-radius: 15px; background: rgba(255, 255, 255, 0.14); flex: 0 0 auto;
  transition: background 0.25s; }
.schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); transition: transform 0.32s var(--feder); }
.schalter.an { background: var(--akzent); }
.schalter.an::after { transform: translateX(20px); }
.schalter.licht.an { background: linear-gradient(90deg, #ffbe5c, #ffd98a); }
.schalter.wartet { opacity: 0.6; }

/* Regler */
input[type="range"].regler { -webkit-appearance: none; appearance: none; width: 100%; height: 36px; background: transparent; margin: 0;
  --wert: 50%; --farbe: var(--akzent); }
input[type="range"].regler::-webkit-slider-runnable-track { height: 36px; border-radius: 13px;
  background: linear-gradient(90deg, var(--farbe) 0, var(--farbe) var(--wert), rgba(255, 255, 255, 0.1) var(--wert)); }
input[type="range"].regler::-moz-range-track { height: 36px; border-radius: 13px;
  background: linear-gradient(90deg, var(--farbe) 0, var(--farbe) var(--wert), rgba(255, 255, 255, 0.1) var(--wert)); }
input[type="range"].regler::-webkit-slider-thumb { -webkit-appearance: none; width: 6px; height: 22px; margin-top: 7px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.92); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); transform: translateX(-9px); }
input[type="range"].regler::-moz-range-thumb { width: 6px; height: 22px; border: 0; border-radius: 3px; background: rgba(255, 255, 255, 0.92); }
input[type="range"].regler.licht { --farbe: #ffc766; }

/* Ring und Balken */
.ring { position: relative; display: grid; place-items: center; flex: 0 0 auto; }
.ring svg { transform: rotate(-90deg); overflow: visible; }
.ring circle { fill: none; stroke-linecap: round; }
.ring .bahn { stroke: rgba(255, 255, 255, 0.09); }
.ring .wert { stroke: var(--akzent); transition: stroke-dashoffset 0.9s var(--kurve), stroke 0.4s; filter: drop-shadow(0 0 6px currentColor); color: var(--akzent); }
.ring .wert.warn { stroke: var(--warn); color: var(--warn); }
.ring .wert.krit { stroke: var(--krit); color: var(--krit); }
.ring .wert.ok { stroke: var(--ok); color: var(--ok); }
.ring .wert.claude { stroke: var(--claude); color: var(--claude); }
.ring .mitte { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1.05; }
.balken { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.balken > i { display: block; height: 100%; border-radius: 4px; background: var(--akzent); transition: width 0.8s var(--kurve); }
.balken > i.warn { background: var(--warn); }
.balken > i.krit { background: var(--krit); }
.balken > i.ok { background: var(--ok); }
.kurve { display: block; width: 100%; height: 38px; }
.kurve path.linie { fill: none; stroke: var(--akzent); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.kurve path.flaeche { fill: url(#kurvenverlauf); opacity: 0.9; }

/* Blatt (Unten-Blatt auf dem Handy, Dialog am Schreibtisch) */
#blatt-ebene { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.schleier { position: absolute; inset: 0; background: rgba(4, 7, 10, 0.6); opacity: 0; transition: opacity 0.28s; pointer-events: auto;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.blatt { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92dvh; display: flex; flex-direction: column; pointer-events: auto;
  border-radius: 28px 28px 0 0; background: rgba(20, 27, 36, 0.92); border: 1px solid var(--rand-2); border-bottom: 0;
  -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.55); transform: translateY(104%); transition: transform 0.42s var(--kurve); }
.blatt .griff { width: 42px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); margin: 9px auto 2px; flex: 0 0 auto; }
.blatt .blattkopf { display: flex; align-items: center; gap: 12px; padding: 10px 18px 12px; flex: 0 0 auto; }
.blatt .blattkopf h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.blatt .inhalt { overflow-y: auto; padding: 4px 18px calc(var(--unten) + 24px); scrollbar-width: none; }
.blatt .inhalt::-webkit-scrollbar { display: none; }
.offen .schleier { opacity: 1; }
.offen .blatt { transform: none; }
@media (min-width: 760px) {
  .blatt { left: 50%; right: auto; bottom: 50%; width: min(620px, 92vw); max-height: 86dvh; border-radius: 28px; border-bottom: 1px solid var(--rand-2);
    transform: translate(-50%, 46%) scale(0.96); opacity: 0; transition: transform 0.34s var(--kurve), opacity 0.24s; }
  .blatt.breit { width: min(900px, 94vw); }
  .offen .blatt { transform: translate(-50%, 50%); opacity: 1; }
  .blatt .griff { display: none; }
  .blatt .blattkopf { padding-top: 18px; }
}

#toasts { position: fixed; left: 0; right: 0; bottom: calc(var(--leiste-h) + var(--unten) + 22px); z-index: 80; display: grid; gap: 8px;
  justify-items: center; pointer-events: none; padding: 0 16px; }
.toast { max-width: 520px; padding: 11px 16px; border-radius: 16px; background: rgba(28, 37, 48, 0.94); border: 1px solid var(--rand-2);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5); font-size: 14px; font-weight: 560; display: flex; gap: 9px; align-items: center;
  animation: toast-rein 0.34s var(--feder) both; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.toast svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--akzent); }
.toast.fehler svg { color: var(--krit); }
.toast.raus { animation: toast-raus 0.3s ease-in both; }
@keyframes toast-rein { from { opacity: 0; transform: translateY(14px) scale(0.94); } }
@keyframes toast-raus { to { opacity: 0; transform: translateY(8px) scale(0.96); } }

.leer { display: grid; justify-items: center; gap: 8px; padding: 34px 20px; text-align: center; color: var(--text-2); }
.leer svg { width: 34px; height: 34px; color: var(--text-3); stroke-width: 1.5; }
.skelett { border-radius: var(--radius-2); background: linear-gradient(100deg, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.11) 50%, rgba(255, 255, 255, 0.05) 70%);
  background-size: 300% 100%; animation: schimmer 1.3s linear infinite; min-height: 80px; }
@keyframes schimmer { to { background-position: -150% 0; } }

.feld { width: 100%; height: 48px; padding: 0 15px; border-radius: 15px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--rand);
  outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.feld:focus { border-color: color-mix(in srgb, var(--akzent) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent) 13%, transparent); }
.feld::placeholder { color: var(--text-3); }
label.beschriftung { display: block; font-size: 12.5px; font-weight: 620; color: var(--text-2); margin: 0 3px 6px; }

/* ---------- Start ---------- */
.held { padding: 6px 4px 4px; display: grid; gap: 2px; }
.held .datum { color: var(--text-2); font-weight: 560; font-size: 14.5px; }
.held .uhr { font-size: clamp(76px, 23vw, 132px); font-weight: 230; letter-spacing: -0.055em; line-height: 0.95; margin: 2px 0 6px -4px;
  background: linear-gradient(180deg, #ffffff 20%, color-mix(in srgb, var(--akzent) 30%, white) 120%); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums; }
.held .uhr span { opacity: 0.55; animation: blinken 2s steps(2, jump-none) infinite; }
@keyframes blinken { 50% { opacity: 0.15; } }
.held .gruss { font-size: 22px; font-weight: 680; letter-spacing: -0.02em; }
.held .unterzeile { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }

.lagekarte { display: flex; align-items: center; gap: 16px; }
.lagekarte .titel { font-size: 21px; font-weight: 720; letter-spacing: -0.02em; }
.lagekarte.ok { border-color: rgba(61, 220, 151, 0.26); background: linear-gradient(150deg, rgba(61, 220, 151, 0.14), rgba(255, 255, 255, 0.03) 60%); }
.lagekarte.warn { border-color: rgba(247, 192, 74, 0.3); background: linear-gradient(150deg, rgba(247, 192, 74, 0.15), rgba(255, 255, 255, 0.03) 60%); }
.lagekarte.krit { border-color: rgba(255, 107, 129, 0.36); background: linear-gradient(150deg, rgba(255, 107, 129, 0.2), rgba(255, 255, 255, 0.03) 62%); }
.kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.kennzahl { padding: 10px 6px 9px; border-radius: 15px; background: rgba(0, 0, 0, 0.2); text-align: center; }
.kennzahl b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kennzahl span { font-size: 10.5px; color: var(--text-3); font-weight: 620; letter-spacing: 0.06em; text-transform: uppercase; }

.befund { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.befund .titel { font-weight: 640; line-height: 1.3; }
.befund .taten { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.befund .taten .knopf { padding: 0 11px; }   /* beide Knoepfe passen so auch auf dem Handy in eine Zeile */
.befund details { margin-top: 8px; }
.befund summary { cursor: pointer; color: var(--text-2); font-size: 13px; list-style: none; }
.befund summary::-webkit-details-marker { display: none; }
.befund ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 13px; color: var(--text-2); }

.komponist { display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 16px; border-radius: 24px; background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--rand); transition: border-color 0.2s, box-shadow 0.2s; }
.komponist:focus-within { border-color: color-mix(in srgb, var(--akzent) 50%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent) 10%, transparent); }
.komponist textarea { flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: transparent; padding: 10px 0; max-height: 180px;
  line-height: 1.4; font-size: 15.5px; }
.komponist textarea::placeholder { color: var(--text-3); }
.komponist .rund { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; color: var(--text-2);
  transition: transform 0.16s var(--kurve), background 0.2s, color 0.2s; }
.komponist .rund svg { width: 20px; height: 20px; }
.komponist .rund:active { transform: scale(0.9); }
.komponist .senden { background: linear-gradient(180deg, color-mix(in srgb, var(--akzent) 86%, white), color-mix(in srgb, var(--akzent) 86%, black)); color: color-mix(in srgb, var(--akzent) 14%, black); box-shadow: 0 6px 18px color-mix(in srgb, var(--akzent) 35%, transparent); }
.komponist .senden:disabled { background: var(--flaeche-2); color: var(--text-3); box-shadow: none; }
.komponist .senden.halt { background: rgba(255, 107, 129, 0.18); color: var(--krit); box-shadow: none; }
.komponist .mikro.nimmt { background: rgba(255, 107, 129, 0.2); color: var(--krit); animation: pochen 1.2s infinite; }

.agentwahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.agentkarte { display: grid; gap: 10px; text-align: left; }
.agentkarte .name { font-weight: 700; font-size: 16px; }
.agentkarte .wer { display: flex; align-items: center; gap: 11px; min-width: 0; }

.raumkachel { width: 148px; padding: 13px; display: grid; gap: 12px; }
.raumkachel .oben { display: flex; justify-content: space-between; align-items: flex-start; }
.raumkachel .name { font-weight: 660; }
.raumkachel .temp { font-size: 25px; font-weight: 640; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.raumkachel .temp small { font-size: 13px; color: var(--text-3); font-weight: 560; margin-left: 2px; }
.raumkachel.an { border-color: rgba(255, 205, 120, 0.34); background: linear-gradient(165deg, rgba(255, 200, 110, 0.2), rgba(255, 255, 255, 0.03) 70%); }

.maschine { width: 228px; display: grid; gap: 12px; }
.maschine .werte { display: flex; gap: 14px; align-items: center; }
.maschine .name { font-weight: 680; }
@media (min-width: 760px) { .maschine { width: auto; flex: 1 1 228px; max-width: 320px; } .raumkachel { width: auto; flex: 1 1 148px; max-width: 220px; } }
.raster > .maschine { width: auto; max-width: none; }

.short { width: 132px; display: grid; gap: 8px; text-align: left; }
.short .bild { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #10161d; border: 1px solid var(--rand); }
.short .bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--kurve); }
.short:active .bild img { transform: scale(1.04); }
.short .bild .dauer { position: absolute; right: 7px; bottom: 7px; padding: 2px 7px; border-radius: 8px; background: rgba(0, 0, 0, 0.62); font-size: 11px; font-weight: 650; }
.short .bild .abspielen { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.5)); }
.short .bild .abspielen svg { width: 30px; height: 30px; fill: #fff; stroke: none; opacity: 0.92; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6)); }
.short .bild .zustand { position: absolute; left: 7px; top: 7px; }
.short .titel { font-size: 12.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.dienst { display: grid; justify-items: center; gap: 7px; padding: 14px 6px 11px; border-radius: 20px; text-align: center; position: relative;
  background: var(--flaeche); border: 1px solid var(--rand); transition: transform 0.18s var(--kurve), background 0.2s; color: var(--text); }
.dienst:active { transform: scale(0.94); }
@media (hover: hover) { .dienst:hover { background: var(--flaeche-2); transform: translateY(-2px); } }
.dienst .bildchen { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.dienst .bildchen img { width: 28px; height: 28px; object-fit: contain; }
.dienst .bildchen img.umkehren { filter: invert(1) brightness(1.6); }
.dienst .bildchen b { font-size: 18px; color: var(--akzent-2); }
.dienst .name { font-size: 12.5px; font-weight: 620; line-height: 1.2; }
.dienst .text { font-size: 11px; color: var(--text-3); line-height: 1.2; }
.dienst .punkt { position: absolute; top: 10px; right: 10px; width: 7px; height: 7px; }
.dienstraster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
@media (min-width: 560px) { .dienstraster { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } }

.kamerabild { position: relative; border-radius: var(--radius); overflow: hidden; background: #0d1318; border: 1px solid var(--rand); aspect-ratio: 16 / 9; cursor: pointer; }
.kamerabild img { width: 100%; height: 100%; object-fit: cover; }
.kamerabild .schild { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px; align-items: center; padding: 5px 10px; border-radius: 12px;
  background: rgba(8, 12, 17, 0.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 12.5px; font-weight: 640; }
.kamerabild .live { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; align-items: center; padding: 4px 9px; border-radius: 10px;
  background: rgba(8, 12, 17, 0.62); font-size: 10.5px; font-weight: 720; letter-spacing: 0.08em; }

/* ---------- Chat ---------- */
.chat { display: grid; grid-template-columns: 1fr; height: 100%; min-height: 0; }
.chatseite { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--bg); animation: einblenden 0.22s ease-out both; }
.chatseite .bg-innen { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(100% 60% at 0% 0%, color-mix(in srgb, var(--akzent) 13%, transparent), transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(60, 98, 150, 0.2), transparent 60%), #090d12; }
.chatkopf { display: flex; align-items: center; gap: 10px; padding: calc(var(--oben) + 10px) 12px 10px; border-bottom: 1px solid var(--rand);
  background: rgba(12, 17, 23, 0.72); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); flex: 0 0 auto; }
.chatkopf .titel { font-weight: 680; font-size: 15.5px; line-height: 1.2; }
.verlauf { flex: 1; overflow-y: auto; padding: 18px 14px 12px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: none; }
.verlauf::-webkit-scrollbar { display: none; }
.verlauf > * { max-width: 860px; width: 100%; margin-left: auto; margin-right: auto; }
.blase { max-width: 100%; animation: herein 0.3s var(--kurve) both; }
.blase.ich { display: flex; flex-direction: column; align-items: flex-end; }
.blase.ich .text { max-width: 86%; padding: 11px 15px; border-radius: 22px 22px 6px 22px; white-space: pre-wrap; word-break: break-word;
  background: linear-gradient(160deg, color-mix(in srgb, var(--akzent) 30%, transparent), color-mix(in srgb, var(--akzent) 16%, transparent)); border: 1px solid color-mix(in srgb, var(--akzent) 30%, transparent); }
.blase.ich .wer { font-size: 11px; color: var(--text-3); margin: 0 8px 3px; font-weight: 600; }
.blase.agent { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; }
.blase.agent .koerper { min-width: 0; }
.blase .fuss { display: flex; gap: 10px; align-items: center; margin-top: 7px; font-size: 11.5px; color: var(--text-3); flex-wrap: wrap; }
.blase .fuss button { color: var(--text-3); display: inline-flex; gap: 4px; align-items: center; }
.blase .fuss button svg { width: 13px; height: 13px; }

.schritte { margin: 0 0 9px; border-radius: 14px; background: rgba(0, 0, 0, 0.22); border: 1px solid var(--rand); overflow: hidden; }
.schritte summary { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; list-style: none; }
.schritte summary::-webkit-details-marker { display: none; }
.schritte summary svg { width: 14px; height: 14px; }
.schritte summary .dreh { margin-left: auto; transition: transform 0.25s; }
.schritte[open] summary .dreh { transform: rotate(180deg); }
.schritte ol { margin: 0; padding: 2px 12px 10px; list-style: none; display: grid; gap: 5px; max-height: 260px; overflow-y: auto; }
.schritte li { display: grid; grid-template-columns: auto 1fr; gap: 8px; font-size: 12px; color: var(--text-2); align-items: baseline; }
.schritte li b { color: var(--text-3); font-weight: 650; font-size: 11px; white-space: nowrap; }
.schritte li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, "JetBrains Mono", Menlo, monospace; font-size: 11.5px; }
.schritte li.fehler span { color: var(--krit); }

.taetig { display: inline-flex; align-items: center; gap: 9px; color: var(--text-2); font-size: 13px; padding: 4px 0; }
.punkte3 { display: inline-flex; gap: 4px; }
.punkte3 i { width: 6px; height: 6px; border-radius: 50%; background: var(--akzent); animation: huepfen 1.1s ease-in-out infinite; }
.punkte3 i:nth-child(2) { animation-delay: 0.14s; }
.punkte3 i:nth-child(3) { animation-delay: 0.28s; }
@keyframes huepfen { 0%, 70%, 100% { transform: none; opacity: 0.45; } 35% { transform: translateY(-5px); opacity: 1; } }
.schreibmarke::after { content: ""; display: inline-block; width: 7px; height: 1.05em; margin-left: 2px; vertical-align: -0.18em; border-radius: 2px;
  background: var(--akzent); animation: blinken 1s steps(2, jump-none) infinite; }

.md { font-size: 15.5px; line-height: 1.58; word-break: break-word; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 10px; }
.md h1, .md h2, .md h3, .md h4 { margin: 16px 0 8px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.md h1 { font-size: 19px; } .md h2 { font-size: 17.5px; } .md h3 { font-size: 16px; } .md h4 { font-size: 15px; }
.md ul, .md ol { margin: 0 0 10px; padding-left: 22px; }
.md li { margin: 3px 0; }
.md li::marker { color: var(--text-3); }
.md code { font-family: ui-monospace, "JetBrains Mono", Menlo, monospace; font-size: 0.88em; padding: 2px 6px; border-radius: 7px; background: rgba(255, 255, 255, 0.09); }
.md pre { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.36); border: 1px solid var(--rand); overflow-x: auto; }
.md pre code { padding: 0; background: none; font-size: 12.5px; line-height: 1.5; }
.md blockquote { margin: 0 0 10px; padding: 2px 0 2px 13px; border-left: 3px solid var(--akzent-tief); color: var(--text-2); }
.md table { border-collapse: collapse; margin: 0 0 12px; font-size: 13.5px; display: block; overflow-x: auto; max-width: 100%; }
.md th, .md td { padding: 7px 11px; border-bottom: 1px solid var(--rand); text-align: left; vertical-align: top; }
.md th { color: var(--text-2); font-weight: 650; font-size: 12.5px; white-space: nowrap; }
.md hr { border: 0; border-top: 1px solid var(--rand); margin: 14px 0; }
.md a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--akzent-2) 40%, transparent); text-underline-offset: 3px; }
.md strong { font-weight: 680; color: #fff; }

.eingabe { flex: 0 0 auto; padding: 8px 12px calc(var(--unten) + 10px); background: linear-gradient(180deg, transparent, rgba(8, 12, 17, 0.9) 28%); }
.eingabe > * { max-width: 860px; margin: 0 auto; }
.eingabe .ueber { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; overflow-x: auto; scrollbar-width: none; }
.eingabe .ueber::-webkit-scrollbar { display: none; }

.faden { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; text-align: left; width: 100%; }
.faden .titel { font-weight: 640; }
.faden .vorschau { color: var(--text-2); font-size: 13px; }
.faden .zeit { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }

.nutzung { display: flex; gap: 14px; align-items: center; }
.nutzung .eintrag { display: flex; gap: 9px; align-items: center; }
.nutzung .eintrag b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; display: block; line-height: 1.1; }
.nutzung .eintrag span { font-size: 11px; color: var(--text-3); font-weight: 600; }

.vorschlaege { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.willkommen { margin: auto; display: grid; justify-items: center; gap: 14px; text-align: center; padding: 20px 10px; }
.willkommen .gross { width: 72px; height: 72px; border-radius: 24px; }
.willkommen .gross svg { width: 34px; height: 34px; }
.willkommen h2 { font-size: 23px; font-weight: 720; letter-spacing: -0.02em; }

@media (min-width: 760px) {
  .chatseite { position: static; inset: auto; z-index: auto; background: none; height: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rand); }
  .chatseite .bg-innen { display: none; }
  .chatkopf { padding-top: 12px; background: rgba(255, 255, 255, 0.03); }
  .chat.zweispaltig { grid-template-columns: 340px 1fr; gap: 16px; height: calc(100dvh - 70px); }
  .chat.zweispaltig .liste { overflow-y: auto; scrollbar-width: none; padding-right: 2px; }
  .zurueck { display: none !important; }
}

/* ---------- Haus ---------- */
.raumkarte { display: grid; gap: 13px; }
.raumkarte .kopfzeile { display: flex; align-items: center; gap: 12px; }
.raumkarte .name { font-size: 16.5px; font-weight: 690; letter-spacing: -0.01em; }
.messwerte { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--text-2); font-size: 13px; margin-top: 1px; }
.messwerte span { display: inline-flex; gap: 4px; align-items: center; }
.messwerte svg { width: 13px; height: 13px; flex: 0 0 auto; }
.raumkarte.an { border-color: rgba(255, 205, 120, 0.32); background: linear-gradient(165deg, rgba(255, 200, 110, 0.17), rgba(255, 255, 255, 0.03) 66%); }
.zusatz { display: flex; flex-wrap: wrap; gap: 7px; }

.klima { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px; border-radius: 18px; background: rgba(0, 0, 0, 0.2); }
.klima .soll { font-size: 34px; font-weight: 620; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1; }
.klima .soll small { font-size: 15px; color: var(--text-3); font-weight: 560; }
.stufen { display: flex; gap: 8px; }

.lampe { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 0; }
.lampe + .lampe { border-top: 1px solid var(--rand); }
.lampe .regler { grid-column: 1 / -1; }
.szenen { display: flex; flex-wrap: wrap; gap: 8px; }

.schnell { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .schnell { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.schnellkarte { display: grid; gap: 10px; padding: 14px; text-align: left; align-content: start; }
.schnellkarte .name { font-weight: 660; }
.schnellkarte .knoepfe { display: flex; gap: 8px; margin-top: 2px; }

.ereignisse { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.ereignisse::-webkit-scrollbar { display: none; }
.ereignis { flex: 0 0 auto; width: 112px; display: grid; gap: 5px; text-align: left; }
.ereignis img { width: 112px; height: 112px; object-fit: cover; border-radius: 16px; border: 1px solid var(--rand); background: #10161d; }
@media (min-width: 760px) { .ereignisse { margin: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; } }

/* ---------- Lage ---------- */
.gastzeile { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 11px 2px; }
.gastzeile + .gastzeile { border-top: 1px solid var(--rand); }
.gastzeile .name { font-weight: 620; }
.gastzeile .kennung { font-size: 11px; color: var(--text-3); font-weight: 650; letter-spacing: 0.04em; }
.gastzeile .mini { display: grid; gap: 4px; width: 78px; }
.gastzeile .mini .balken { height: 4px; }
.gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.monitorkachel { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 14px; background: var(--flaeche); border: 1px solid var(--rand); font-size: 13px; font-weight: 580; }
.reiter { display: flex; gap: 6px; padding: 4px; border-radius: 16px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--rand); overflow-x: auto; scrollbar-width: none; }
.reiter::-webkit-scrollbar { display: none; }
.reiter button { height: 34px; padding: 0 14px; border-radius: 12px; font-size: 13.5px; font-weight: 620; color: var(--text-2); white-space: nowrap; transition: background 0.2s, color 0.2s; }
.reiter button.aktiv { background: var(--flaeche-3); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.plattenzeile { display: grid; grid-template-columns: 78px 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; color: var(--text-2); }

/* ---------- Mehr ---------- */
.menue { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
@media (min-width: 720px) { .menue { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
.menuekarte { display: grid; gap: 12px; text-align: left; padding: 16px; }
.menuekarte .name { font-weight: 680; font-size: 15.5px; }
.zeilenliste > * + * { border-top: 1px solid var(--rand); }
.listenzeile { display: flex; align-items: center; gap: 12px; padding: 13px 2px; width: 100%; text-align: left; }
.code { font-family: ui-monospace, "JetBrains Mono", Menlo, monospace; font-size: 22px; font-weight: 650; letter-spacing: 0.08em; padding: 16px; border-radius: 16px;
  background: rgba(0, 0, 0, 0.3); border: 1px dashed color-mix(in srgb, var(--akzent) 45%, transparent); text-align: center; color: var(--akzent-2); user-select: all; }
video.spieler { width: 100%; max-height: 68dvh; border-radius: 20px; background: #000; display: block; }
.protokollzeile { display: grid; grid-template-columns: auto 1fr; gap: 11px; padding: 11px 2px; font-size: 13.5px; }
.protokollzeile + .protokollzeile { border-top: 1px solid var(--rand); }

/* ---------- Anmeldung ---------- */
.anmeldung { min-height: 100dvh; display: grid; place-items: center; padding: 24px; overflow-y: auto; }
.anmeldung .rahmen { width: min(400px, 100%); display: grid; gap: 18px; }
.anmeldung .zeichen { width: 76px; height: 76px; margin: 0 auto 4px; filter: drop-shadow(0 12px 30px color-mix(in srgb, var(--akzent) 35%, transparent)); }
.anmeldung h1 { text-align: center; font-size: 30px; font-weight: 740; letter-spacing: -0.03em; }
.anmeldung .fehler { color: var(--krit); font-size: 13.5px; font-weight: 580; min-height: 20px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Start: am Schreibtisch drei Spalten ---------- */
@media (min-width: 760px) {
  .held { grid-template-columns: auto 1fr; align-items: end; column-gap: 34px; padding-bottom: 8px; }
  .held .datum { grid-column: 1 / -1; }
  .held .uhr { font-size: 120px; grid-row: 2 / span 2; margin-bottom: 0; }
  .held .gruss { font-size: 28px; align-self: end; }
  .held .unterzeile { margin-top: 6px; align-self: start; }
  .start-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; align-items: start; }
  .start-raster > div:nth-child(3) { grid-column: 1 / -1; }
}
@media (min-width: 1500px) {
  .start-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); }
  .start-raster > div:nth-child(3) { grid-column: auto; }
}

/* =====================================================================
   Homemaz – Bausteine für Kadirs Inhalte, im selben Stil
   ===================================================================== */
body.ohne-leiste .leiste, body.ohne-leiste .seite { display: none; }
body.ohne-leiste #app { grid-template-columns: 1fr; }
body.ohne-leiste .ansicht { padding: 0; }
.dreht { animation: drehen 1s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
.zurueckknopf { margin-left: -8px; }
.kopf h1 { min-width: 0; }
button.karte { text-align: left; color: inherit; font: inherit; width: 100%; }
.laufband > button.karte { width: auto; }
.laufband { scroll-padding-left: 16px; }
.pille.gross { height: 36px; padding: 0 14px; border-radius: 18px; font-size: 13.5px; color: var(--text); }
.pille.gross svg { width: 16px; height: 16px; color: var(--akzent-2); }
.pille.still { background: transparent; color: var(--text-3); }
.pille.still svg { color: var(--text-3); }
.pille.info { color: var(--info); background: rgba(124, 196, 255, 0.1); border-color: rgba(124, 196, 255, 0.26); }
.knopf.an { background: var(--akzent-hauch); border-color: color-mix(in srgb, var(--akzent) 34%, transparent); color: var(--akzent-2); }
.wartet { opacity: 0.55; pointer-events: none; }

/* Meldungen */
.meldung.krit { border-color: rgba(255, 107, 129, 0.34); background: linear-gradient(150deg, rgba(255, 107, 129, 0.15), rgba(255, 255, 255, 0.03) 62%); }
.meldung.warn { border-color: rgba(247, 192, 74, 0.26); background: linear-gradient(150deg, rgba(247, 192, 74, 0.1), rgba(255, 255, 255, 0.03) 60%); }

/* Zuhause-Schalter */
.laufband > button.schalterkachel { width: 124px; }
.schalterkachel .name { font-size: 14px; }
.schalterkachel > div { min-width: 0; }

/* Wetter */
.wettersymbol { width: 58px; height: 58px; border-radius: 19px; background: linear-gradient(150deg, rgba(124, 196, 255, 0.24), color-mix(in srgb, var(--akzent) 14%, transparent)); color: #dff3ff; }
.wettersymbol svg { width: 30px; height: 30px; stroke-width: 1.7; }
.wettertemp { font-size: 40px; font-weight: 300; letter-spacing: -0.04em; line-height: 1; }
.stunden { display: flex; gap: 4px; overflow-x: auto; margin: 14px -16px 0; padding: 0 16px 2px; scrollbar-width: none; }
.stunden::-webkit-scrollbar { display: none; }
.stunde { flex: 0 0 auto; min-width: 46px; display: grid; justify-items: center; gap: 5px; padding: 8px 4px; border-radius: 14px; background: rgba(0, 0, 0, 0.18); }
.stunde svg { width: 18px; height: 18px; color: var(--text-2); }
.stunde b { font-size: 13.5px; font-weight: 650; }
.stunde .regen { color: var(--info); min-height: 14px; font-weight: 620; }

/* 3D-Drucker */
.druckwerte { display: flex; gap: 16px; align-items: center; margin-top: 14px; }
.spulen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.spule { display: grid; justify-items: center; gap: 3px; padding: 10px 4px 8px; border-radius: 15px; background: rgba(0, 0, 0, 0.2); }
.spule i { --farbe: #56636e; width: 36px; height: 36px; border-radius: 50%; margin-bottom: 3px;
  background: radial-gradient(circle, #0c1117 0 22%, var(--farbe) 24% 100%); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 0 0 5px rgba(255, 255, 255, 0.08); }
.spule.unbekannt i { background: transparent; box-shadow: none; border: 2px dashed var(--warn); }
.spule.unbekannt b { color: var(--warn); }

/* Säulen und Kennzeilen */
.saeulen { display: flex; align-items: flex-end; gap: 3px; }
.saeulen i { flex: 1; min-width: 0; border-radius: 4px 4px 2px 2px; background: var(--akzent); }
.achse { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); margin-top: 5px; font-variant-numeric: tabular-nums; }
.werteraster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wert { padding: 11px 12px; border-radius: 16px; background: rgba(0, 0, 0, 0.2); min-width: 0; }
.wert span { display: block; font-size: 10.5px; color: var(--text-3); font-weight: 620; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wert b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wert.gross b { font-size: 22px; }

/* Lage: Prozesse, Laufwerke, Netzbild, Säulenpaare, Häkchen */
.symbolkreis.info { background: rgba(124, 196, 255, 0.15); color: var(--info); }
.prozesszeile { display: grid; grid-template-columns: minmax(0, 1fr) 50px 50px; gap: 8px; align-items: start; padding: 7px 0; font-size: 13px; text-align: right; }
.prozesszeile > :first-child { text-align: left; }
.prozesszeile + .prozesszeile { border-top: 1px solid var(--rand); }
.prozesszeile.kopfzeile { font-size: 11px; color: var(--text-3); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 0; }
.prozesszeile.kopfzeile button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--text-3); text-align: right; }
.prozesszeile.kopfzeile button.aktiv { color: var(--akzent-2); }
.prozesszeile .befehl { font-family: ui-monospace, "JetBrains Mono", Menlo, monospace; font-size: 10.5px; }
.laufwerk { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(0, 0, 0, 0.24); border: 1px solid var(--rand); }
.laufwerk.schlaeft b, .laufwerk.schlaeft .symbolkreis { opacity: 0.62; }
.led { width: 7px; height: 7px; border-radius: 50%; background: #4a5661; flex: 0 0 auto; }
.led.bereit { background: var(--ok); box-shadow: 0 0 8px rgba(61, 220, 151, 0.7); }
.led.zugriff { background: var(--info); box-shadow: 0 0 9px rgba(124, 196, 255, 0.9); animation: blinken 0.5s steps(2, jump-none) infinite; }
.dreht-langsam svg { animation: drehen 2.4s linear infinite; }

.netzbild { position: relative; aspect-ratio: 360 / 615; }
.netzbild > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.netzknoten { position: absolute; transform: translate(-50%, -24px); display: grid; justify-items: center; gap: 2px; width: 31%; text-align: center; }
.netzknoten .symbolkreis svg { width: 22px; height: 22px; }
.netzknoten .symbolkreis { width: 48px; height: 48px; border-radius: 50%; margin-bottom: 3px; background-color: #121a22; border: 1.5px solid currentColor;
  box-shadow: 0 0 18px -4px currentColor; }
.netzknoten b { font-size: 12.5px; font-weight: 660; max-width: 100%; }
.netzknoten span { font-size: 11px; color: var(--text-2); max-width: 100%; font-variant-numeric: tabular-nums; }
.netzknoten.breit { width: 86%; }
.netzknoten.aus .symbolkreis { color: var(--text-3); box-shadow: none; }
.netzknoten.aus b { color: var(--text-2); }
.angriff { position: absolute; left: var(--x); top: var(--y); width: 7px; height: 7px; border-radius: 50%; background: var(--krit); box-shadow: 0 0 9px rgba(255, 107, 129, 0.8);
  animation: abprallen 5.4s ease-in-out infinite; }
@keyframes abprallen { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 12% { opacity: 1; } 46% { opacity: 1; transform: translate(calc((50% - var(--x)) * 2.6), calc((25% - var(--y)) * 4.4)) scale(1); }
  56% { opacity: 0.9; transform: translate(calc((50% - var(--x)) * 2.3), calc((25% - var(--y)) * 3.8)) scale(1.5); } 100% { opacity: 0; transform: translate(0, 0) scale(0.4); } }

.doppelsaeulen { display: flex; gap: 6px; margin-top: 12px; }
.doppelsaeulen > div { flex: 1; min-width: 0; display: grid; gap: 6px; justify-items: center; }
.doppelsaeulen .paar { height: 110px; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.doppelsaeulen .paar i { width: 42%; max-width: 16px; border-radius: 4px 4px 2px 2px; }
.doppelsaeulen span { font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

input.haken { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--rand-2); background: rgba(0, 0, 0, 0.25);
  flex: 0 0 auto; margin: 0; display: grid; place-items: center; transition: background 0.2s, border-color 0.2s; }
input.haken:checked { background: var(--akzent); border-color: transparent; }
input.haken:checked::after { content: ""; width: 10px; height: 6px; border-left: 2.4px solid #04211d; border-bottom: 2.4px solid #04211d; transform: translateY(-1.5px) rotate(-45deg); }
input.haken:disabled { opacity: 0.4; }
label.listenzeile { cursor: pointer; }
select.feld { -webkit-appearance: none; appearance: none; padding-right: 15px; }

.menuekarte > div { min-width: 0; }

/* Haus: Kameras, Aufnahmen, Aquarium, Auto, Strom, Gaming-PC */
.kamerakachel { display: grid; gap: 7px; text-align: left; color: inherit; }
.kamerakachel .kamerabild { border-radius: 18px; }
.steuerkreuz { display: grid; justify-items: center; gap: 8px; margin-top: 16px; }
.zeitleiste { position: relative; height: 30px; margin-top: 12px; border-radius: 15px; background: rgba(0, 0, 0, 0.24); }
.zeitleiste i { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08); }
.clipzeile { display: flex; align-items: center; gap: 12px; padding: 8px; }
.clipzeile .vorschau { position: relative; width: 104px; aspect-ratio: 16 / 9; border-radius: 13px; overflow: hidden; background: #10161d; flex: 0 0 auto; }
.clipzeile .vorschau img { width: 100%; height: 100%; object-fit: cover; }
.clipzeile .vorschau span { position: absolute; right: 5px; bottom: 5px; padding: 1px 6px; border-radius: 7px; background: rgba(0, 0, 0, 0.66); font-size: 10.5px; font-weight: 650; }
svg.gefuellt { fill: currentColor; }

.becken { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rand); aspect-ratio: 360 / 170; box-shadow: var(--schatten); }
.becken svg { display: block; width: 100%; height: 100%; }
.becken .strahlen path { fill: rgba(255, 255, 255, 0.07); }
.becken .fisch { animation: schwimmen-rechts linear infinite; }
.becken .fisch.links { animation-name: schwimmen-links; }
@keyframes schwimmen-rechts { from { transform: translateX(-40px); } to { transform: translateX(400px); } }
@keyframes schwimmen-links { from { transform: translateX(400px) scaleX(-1); } to { transform: translateX(-40px) scaleX(-1); } }
.becken .pflanze { transform-origin: bottom; animation: wiegen 6s ease-in-out infinite alternate; }
@keyframes wiegen { to { transform: skewX(5deg); } }
.becken .blase { fill: rgba(255, 255, 255, 0.4); animation: steigen 5.2s linear infinite; }
@keyframes steigen { to { transform: translateY(-160px); opacity: 0; } }
.becken.aus .fisch { opacity: 0.55; }

.autobild { position: relative; display: flex; align-items: flex-end; gap: 0; height: 132px; margin-top: 14px; padding: 8px 10px; border-radius: 18px;
  background: radial-gradient(90% 120% at 70% 30%, rgba(124, 196, 255, 0.14), transparent 70%), rgba(0, 0, 0, 0.22); overflow: hidden; }
.autobild .box { height: 96px; width: auto; flex: 0 0 auto; position: relative; z-index: 2; }
.autobild .wagen { flex: 1; min-width: 0; height: 110px; object-fit: contain; object-position: right bottom; position: relative; z-index: 1; }
.autobild .wagen.ersatz { display: grid; place-items: center; font-size: 34px; font-weight: 800; letter-spacing: -0.03em; color: rgba(255, 255, 255, 0.5); }
.autobild svg { position: absolute; left: 44px; bottom: 6px; width: 44%; height: 62px; z-index: 3; overflow: visible; }
.autobild svg path { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.autobild:not(.steckt) svg { display: none; }
.autobild.laedt svg path { stroke: var(--info); stroke-dasharray: 9 9; animation: stromfluss 0.9s linear infinite; filter: drop-shadow(0 0 5px rgba(124, 196, 255, 0.7)); }
@keyframes stromfluss { to { stroke-dashoffset: -18; } }
.zielbalken { position: relative; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.09); margin-top: 14px; }
.zielbalken i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #23b877, var(--ok)); box-shadow: 0 0 14px rgba(61, 220, 151, 0.45); }
.zielbalken span { position: absolute; top: -4px; width: 3px; height: 20px; margin-left: -1.5px; border-radius: 2px; background: rgba(255, 255, 255, 0.75); }

.reifenbild { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 54px 0; padding: 26px 16px; }
.reifenwert { display: grid; gap: 1px; }
.reifenwert b { font-size: 18px; }
.reifenwert.fr, .reifenwert.rr { text-align: right; }
.wagenform { position: absolute; left: 50%; top: 14px; bottom: 14px; width: 74px; margin-left: -37px; border-radius: 30px 30px 22px 22px; border: 1.5px solid var(--rand-2);
  background: rgba(255, 255, 255, 0.04); display: grid; justify-items: center; align-content: start; padding-top: 3px; }
.wagenform i { position: absolute; width: 9px; height: 26px; border-radius: 4px; background: #8a96a0; }
.wagenform .vl { left: -5px; top: 24px; } .wagenform .vr { right: -5px; top: 24px; } .wagenform .hl { left: -5px; bottom: 22px; } .wagenform .hr { right: -5px; bottom: 22px; }

.kurvenrahmen { position: relative; margin-top: 10px; padding-left: 44px; }
.kurvenrahmen > span { position: absolute; left: 0; font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.kurvenrahmen > span:first-child { top: -2px; } .kurvenrahmen > span:nth-child(2) { bottom: -2px; }
.kurvenstapel { position: relative; height: 70px; }
.kurvenstapel > svg { position: absolute; inset: 0; }

.strombild .stromknoten { width: 30%; }
.stromknoten .symbolkreis { color: var(--text-3); }
.stromknoten .symbolkreis.warn { color: var(--warn); background-color: #1a1710; }
.stromknoten.gross .symbolkreis { width: 60px; height: 60px; box-shadow: 0 0 30px -2px rgba(247, 192, 74, 0.6); }
.stromknoten.gross .symbolkreis svg { width: 27px; height: 27px; }
.stromknoten.gross { transform: translate(-50%, -30px); }

.kuehlbild { position: relative; aspect-ratio: 320 / 250; }
.kuehlbild > svg { position: absolute; left: 0; top: 8%; width: 100%; height: 84%; overflow: visible; }
.kuehlbild .rohr { fill: none; stroke: url(#kuehlverlauf); stroke-width: 9; opacity: 0.85; }
.kuehlbild .fluss { fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 2.4; stroke-dasharray: 12 16; stroke-linecap: round; animation: stromfluss-lang 1.6s linear infinite; }
@keyframes stromfluss-lang { to { stroke-dashoffset: -28; } }
.kuehlbild .lamellen path { stroke: rgba(255, 255, 255, 0.4); stroke-width: 2; }
.kuehlbild .stelle { fill: #121a22; stroke-width: 3; }
.kuehlmarke { position: absolute; display: grid; white-space: nowrap; }
.kuehlmarke.rechts { transform: translateX(-100%); text-align: right; }
.kuehlmitte { position: absolute; left: 36%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; }
.kuehlmitte b { font-size: 21px; letter-spacing: -0.02em; white-space: nowrap; }

/* Einstellungen und Größen */
.md { font-size: calc(15.5px * var(--chat-skala, 1)); }
.blase.ich .text { font-size: calc(15px * var(--chat-skala, 1)); }
.einstellzeile { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rand); display: grid; gap: 8px; }
.farbwahl { width: 38px; height: 38px; border-radius: 50%; background: var(--farbe); border: 3px solid transparent; box-shadow: 0 0 0 1px var(--rand-2); transition: transform 0.15s var(--kurve); }
.farbwahl.gewaehlt { border-color: #fff; box-shadow: 0 0 16px -2px var(--farbe); transform: scale(1.06); }
.dienst-bild { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.07); overflow: hidden; flex: 0 0 auto; }
.dienst-bild img { width: 26px; height: 26px; object-fit: contain; }
.dienst-bild b { font-size: 17px; color: var(--akzent-2); }

/* Terminal */
.terminalseite .terminalfeld { flex: 1; min-height: 0; padding: 6px 6px 0; }
.terminalseite .terminalfeld .xterm { height: 100%; }
.terminaltasten { flex: 0 0 auto; display: grid; gap: 5px; padding: 6px 6px calc(var(--unten) + 8px); background: rgba(12, 17, 23, 0.9); border-top: 1px solid var(--rand); }
.terminaltasten .reihe { gap: 5px; }
.terminaltasten button { flex: 1; height: 36px; border-radius: 10px; background: var(--flaeche-2); border: 1px solid var(--rand); font-size: 12.5px; font-weight: 620; color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.terminaltasten button svg { width: 15px; height: 15px; }
.terminaltasten button:active { background: var(--flaeche-3); }
.terminaltasten button.aktiv { background: var(--akzent); color: color-mix(in srgb, var(--akzent) 14%, black); border-color: transparent; }

/* Chat-Zusätze */
.suchfeld { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 15px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--rand); color: var(--text-3); }
.suchfeld input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; }
.suchfeld input::placeholder { color: var(--text-3); }
.blase.ich .anhang { max-width: 70%; max-height: 260px; border-radius: 18px; margin-bottom: 6px; border: 1px solid var(--rand); }
.eingabe .ueber:empty { display: none; }

/* ---------- AVA LAB Workstation: Ergänzungen ---------- */
.held .uhr.zustand { font-size: clamp(72px, 22vw, 124px); }
.held .uhr.zustand.aus { background: linear-gradient(180deg, #ffd0d6 20%, #ff6b81 120%); -webkit-background-clip: text; background-clip: text; }
.minibild { width: 42px; height: 42px; border-radius: 14px; object-fit: cover; flex: 0 0 auto; background: #10161d; border: 1px solid var(--rand); }
.statuszeichen { display: grid; place-items: center; flex: 0 0 auto; }
.zweizeilig { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.dreizeilig { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.ringreihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ringwert { display: grid; justify-items: center; gap: 7px; }
.ringwert > span { font-size: 11.5px; color: var(--text-2); }
.ringwert .mitte b { font-size: 15px; font-weight: 680; letter-spacing: -0.02em; display: block; }
.ringwert .mitte small { font-size: 10px; color: var(--text-2); display: block; }
.grosswert { font-size: 25px; font-weight: 640; letter-spacing: -0.03em; line-height: 1.2; }
.grosswert small { font-size: 13px; color: var(--text-3); font-weight: 560; margin-left: 3px; letter-spacing: 0; }
.balken.unbestimmt i { width: 35%; animation: wandern 1.4s ease-in-out infinite alternate; }
@keyframes wandern { from { margin-left: 0; } to { margin-left: 65%; } }
.livebild { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 16px; background: #05080b; }
.ausgaben { display: grid; gap: 8px; }
.ausgabebild { width: 100%; max-height: 62dvh; object-fit: contain; border-radius: 18px; background: #05080b; }
.feld.mehrzeilig { height: auto; padding: 12px 15px; resize: vertical; line-height: 1.45; }
.medienraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
@media (min-width: 720px) { .medienraster { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
.medium { display: grid; gap: 7px; text-align: left; min-width: 0; }
.medium .bild { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: #10161d; border: 1px solid var(--rand); }
.medium .bild img { width: 100%; height: 100%; object-fit: cover; }
.medium .dauer { position: absolute; right: 7px; bottom: 7px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 8px; background: rgba(0, 0, 0, 0.62); font-size: 11px; font-weight: 650; }
.medium .dauer svg { width: 10px; height: 10px; fill: currentColor; stroke: none; }
.medium .favmarke { position: absolute; left: 7px; top: 7px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.62); color: var(--warn); }
.medium .favmarke svg { width: 13px; height: 13px; fill: currentColor; }
/* Noten 1–6 (Galerie) */
.medium .notenmarke { position: absolute; right: 7px; top: 7px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; display: grid; place-items: center; background: rgba(0, 0, 0, 0.62); color: var(--nf); font-size: 13px; font-weight: 800; border: 1.5px solid var(--nf); }
.medium .notenmarke.vision { border-style: dashed; opacity: 0.8; }
.notenleiste { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.notenknopf { height: 44px; border-radius: 14px; font-size: 18px; font-weight: 800; color: var(--nf); background: color-mix(in srgb, var(--nf) 10%, transparent); border: 1px solid color-mix(in srgb, var(--nf) 35%, transparent); transition: transform 0.15s var(--feder), background 0.2s; }
.notenknopf:active { transform: scale(0.94); }
.notenknopf.aktiv { background: var(--nf); color: #081014; border-color: var(--nf); }
.medium .titel { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.abspielknopf { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: var(--akzent-hauch); border: 1px solid color-mix(in srgb, var(--akzent) 30%, transparent); color: var(--akzent-2); }
.abspielknopf svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.heatmap { display: grid; grid-template-columns: 22px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
.heatmap i { aspect-ratio: 1; border-radius: 3px; background: var(--akzent); }
.klappe summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; min-height: 28px; }
.klappe summary::-webkit-details-marker { display: none; }
.klappe .dreh { transition: transform 0.25s; color: var(--text-3); }
.klappe[open] .dreh { transform: rotate(180deg); }
.logfenster { height: calc(100dvh - var(--oben) - var(--unten) - var(--leiste-h) - 150px); overflow: auto; padding: 12px; font-family: ui-monospace, "JetBrains Mono", Menlo, monospace; font-size: 11.5px; line-height: 1.5; }
.logfenster > div { white-space: pre-wrap; word-break: break-word; color: var(--text-2); }
.logfenster > div > span { color: var(--text-3); margin-right: 8px; }
.logfenster > div.warn { color: var(--warn); } .logfenster > div.krit { color: var(--krit); }
.anmeldung { min-height: 100dvh; display: grid; place-items: center; padding: calc(var(--oben) + 24px) 20px calc(var(--unten) + 24px); }
.symbolkreis.info { background: rgba(124, 196, 255, 0.15); color: var(--info); }
.chatbild { display: block; max-width: 100%; max-height: 60dvh; border-radius: 18px; margin: 8px 0; border: 1px solid var(--rand); }

/* Jarvis: Gedankengang einer Antwort, per Tippen auf die Antwort auf- und zuklappbar */
.denken { margin:0 0 10px; padding:10px 12px; border-left:2px solid var(--akzent, #3fe0c5); border-radius:0 12px 12px 0; background:rgba(255,255,255,.04); font-size:14px; color:var(--leise, #93a1ad); }
.denken[hidden] { display:none; }
.denken .md > :first-child { margin-top:0; } .denken .md > :last-child { margin-bottom:0; }
.blase.agent .koerper { cursor:pointer; }
.denkzeichen { display:inline-flex; align-items:center; gap:4px; }
.denkzeichen svg { width:13px; height:13px; }

/* Modell-Raster (Bibliothek und Übersicht) */
.modellraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .modellraster { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
.modell { display: flex; flex-direction: column; gap: 6px; padding: 12px 13px; border-radius: 18px; background: var(--flaeche-1, rgba(255,255,255,.05)); border: 1px solid var(--rand); min-width: 0; }
.modell.aktiv { border-color: color-mix(in srgb, var(--akzent) 55%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--akzent) 18%, transparent); }
.modell .art { font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modell.aktiv .art { color: var(--akzent); }
.modell .name { font-weight: 640; font-size: 14px; line-height: 1.25; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Eingabeblatt (Designname, Auftrag an Jarvis) */
.textfeld { width: 100%; padding: 13px 14px; border-radius: 14px; background: rgba(0,0,0,.28); border: 1px solid var(--rand); color: var(--text); font: inherit; resize: none; }
.textfeld:focus { outline: none; border-color: var(--akzent); }
.medium.design .titel { font-size: 16px; }

/* Jarvis-Chat: STOP statt Senden, solange Jarvis arbeitet */
.komponist .rund.senden.stop { background: var(--krit); color: #fff; box-shadow: 0 0 18px color-mix(in srgb, var(--krit) 45%, transparent); }
.komponist .rund.senden.stop:disabled { opacity: .55; }

/* Bibliothek (04.10.2026): Datensatz-Raster, Lizenz-Ampel, Modellwahl */
.dsraster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.dsbild { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 2px solid var(--ok); padding: 0; background: var(--flaeche); }
.dsbild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dsbild span { position: absolute; right: 4px; top: 4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #081014; }
.dsbild span svg { width: 12px; height: 12px; }
.dsbild.aus { border-color: var(--rand); }
.dsbild.aus img { opacity: 0.3; filter: grayscale(1); }
.dsbild.aus span { background: var(--krit); color: #fff; }
.ampel { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.basiskarte { border: 1.5px solid var(--rand); transition: border-color 0.2s, background 0.2s; }
.basiskarte.gewaehlt { border-color: var(--akzent); background: var(--akzent-hauch); }

/* ---- Verlauf einer Jarvis-Antwort (05.10.2026): Einfach / Genau ---- */
.ablauf { margin:0 0 10px; border:1px solid var(--rand); border-radius:14px; background:color-mix(in srgb, var(--flaeche-2) 70%, transparent); font-size:13.5px; }
.ablauf > summary { display:flex; align-items:center; gap:8px; padding:9px 12px; cursor:pointer; list-style:none; color:var(--text-2); }
.ablauf > summary::-webkit-details-marker, .ablauf details > summary::-webkit-details-marker { display:none; }
.ablauf > summary svg { width:16px; height:16px; flex:none; }
.ablauf > summary .ab-pfeil { transition:transform .2s; opacity:.6; }
.ablauf[open] > summary .ab-pfeil { transform:rotate(180deg); }
.ablauf .ab-kurz { color:var(--text-3); font-weight:400; }
.ab-modus { display:flex; gap:4px; margin:0 12px 8px; padding:3px; border-radius:10px; background:var(--flaeche-3); width:max-content; }
.ab-modus button { border:0; background:none; color:var(--text-2); padding:5px 14px; border-radius:8px; font:inherit; font-size:12.5px; }
.ab-modus button.aktiv { background:var(--akzent-hauch, rgba(255,255,255,.08)); color:var(--text); font-weight:600; }
.ab-liste { display:flex; flex-direction:column; padding:0 8px 8px; }
.ab-zeile, .ab-schritt > summary, .ab-denken > summary, .ab-bot > summary { display:flex; align-items:center; gap:7px; padding:6px 4px; min-height:30px; color:var(--text); }
.ab-zeile.leise, .ab-denken > summary { color:var(--text-3); font-style:italic; }
.ab-zeile svg, .ab-schritt > summary svg, .ab-denken > summary svg, .ab-bot > summary svg { width:15px; height:15px; flex:none; opacity:.85; }
.ab-text1 { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ab-zeit { flex:none; color:var(--text-3); font-size:12px; font-variant-numeric:tabular-nums; }
.ab-status { display:inline-flex; flex:none; }
.ab-status.ok { color:var(--ok); } .ab-status.krit, .ab-zeile.krit, .ab-schritt.krit > summary { color:var(--krit); }
.ab-status.warn { color:var(--warn); } .ab-status.akzent { color:var(--akzent); }
.ab-schritt, .ab-denken, .ab-bot { border-top:1px solid var(--rand); }
.ab-schritt > summary, .ab-denken > summary, .ab-bot > summary { cursor:pointer; list-style:none; }
.ab-schritt[open] > summary .ab-text1 { white-space:normal; }
.ab-feld { margin:2px 4px 8px 26px; }
.ab-feld.krit { color:var(--krit); }
.ab-titel { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3); margin-bottom:3px; }
.ab-text { white-space:pre-wrap; word-break:break-word; font-size:12.5px; color:var(--text-2); max-height:340px; overflow:auto; user-select:text; background:var(--flaeche-3); border-radius:8px; padding:7px 9px; }
.ab-feld code { font-size:12px; color:var(--text-3); word-break:break-all; }
.ab-denken .md, .ab-bot .md { margin:2px 4px 8px 26px; font-size:13px; color:var(--text-2); user-select:text; }
.ab-bot { margin-left:22px; border-left:2px solid var(--akzent); border-top:0; border-radius:0 10px 10px 0; background:rgba(255,255,255,.03); margin-bottom:6px; }
.ab-botname { display:inline-flex; align-items:center; gap:5px; font-weight:600; flex:none; }
.ab-bot > summary .ab-kurz { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ab-gruppe { margin:8px 12px 2px; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3); }
.ab-renders { display:flex; flex-wrap:wrap; gap:6px; padding:2px 12px 12px; }
.ab-render { position:relative; width:54px; height:54px; border-radius:10px; overflow:hidden; border:1px solid var(--rand); background:var(--flaeche-3); padding:0; display:grid; place-items:center; color:var(--text-3); }
.ab-render img { width:100%; height:100%; object-fit:cover; }
.ab-render i { position:absolute; right:3px; bottom:3px; width:16px; height:16px; border-radius:50%; background:rgba(0,0,0,.55); display:grid; place-items:center; color:#fff; }
.ab-render i svg { width:10px; height:10px; }
.ab-render.error, .ab-render.cancelled { color:var(--krit); }
.ab-zeile.knopflos { border:0; background:none; font:inherit; text-align:left; width:100%; cursor:pointer; }

/* ---------- Chat: Ergebnis im Verlauf, Fortschritt, eigenes Bild, Probe (06.10.2026) ---------- */
.ergebnis { margin: 10px 0 4px; }
.ergebnis .chatbild { margin: 0; cursor: zoom-in; }
.chatclip { display: block; width: 100%; max-height: 62dvh; border-radius: 18px; background: #000; border: 1px solid var(--rand); }
.ergebnis.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.ergebnis .kachel { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; border: 1px solid var(--rand); background: var(--flaeche-3); padding: 0; display: grid; place-items: center; color: var(--text-3); }
.ergebnis .kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ergebnis .kachel span svg { width: 26px; height: 26px; }
.ergebnis .kachel i { position: absolute; right: 7px; bottom: 7px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); display: grid; place-items: center; color: #fff; }
.ergebnis .kachel i svg { width: 13px; height: 13px; }
.ergebnis .kachel b { position: absolute; left: 7px; top: 7px; padding: 2px 8px; border-radius: 9px; background: rgba(0, 0, 0, 0.6); color: var(--warn); font-size: 11px; font-weight: 650; }
.ergebnis .kachel:active { transform: scale(0.97); }
.probemarke { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 3px 10px; border-radius: 10px; font-size: 12px; font-weight: 650;
  color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.probemarke svg { width: 14px; height: 14px; }
.probewahl { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.probewahl .knopf { height: 46px; }
.fortgang { margin: 4px 0 10px; max-width: 420px; }
.fortgang[hidden] { display: none; }
.fortgang .balken { margin-bottom: 5px; }
.anhaenge { display: flex; gap: 8px; padding: 0 6px 8px; flex-wrap: wrap; }
.anhaenge[hidden] { display: none; }
.anhangchip { position: relative; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; border: 1px solid var(--rand); background: var(--flaeche-3); display: grid; place-items: center; color: var(--text-3); }
.anhangchip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anhangchip button { position: absolute; right: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, 0.66); color: #fff; display: grid; place-items: center; }
.anhangchip button svg { width: 12px; height: 12px; }
.anhangchip.laedt svg { width: 22px; height: 22px; }
.komponist.mit-anhang { padding-left: 8px; }