/* ══════════════════════════════════════════════════════════════════════
   SLYNE Glas — Glasebene über slyne.css (24.10.2026, Kai, erst lokal)
   ══════════════════════════════════════════════════════════════════════
   Lädt NACH slyne.css und überschreibt nur das Aussehen. Markup, IDs und
   Seitenlogik bleiben unangetastet: wer diese Datei aus den HTML-Seiten
   nimmt, hat wieder den alten Stand.

   „Liquid Glass“ gibt es von Apple nur für Apple-Plattformen, eine offizielle
   CSS-Fassung existiert nicht. Was hier steht, ist eine Annäherung aus
   backdrop-filter, Kantenlicht (inset-Schatten) und einem Glanz, der dem
   Zeiger folgt. Die Lichtbrechung der Navigationslinse (SVG-Verzerrung) kann
   nur Chromium; alle anderen bekommen dieselbe Linse ohne Verzerrung.

   Ecken: Knöpfe und Linse Pille · Karten 26px · Felder 14px · Mini 12px.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --r-sm:12px; --r-md:18px; --r-lg:26px;
  --sidebar:292px;

  --g-fill:rgba(255,245,243,0.045);
  --g-fill-2:rgba(255,245,243,0.10);
  --g-kante:rgba(255,245,243,0.14);
  --g-kante-hell:rgba(255,255,255,0.30);
  --g-blur:26px;
  --g-schatten:0 30px 70px -30px rgba(2,2,16,0.85), 0 2px 6px -2px rgba(2,2,16,0.4);

  /* Federn für CSS-Übergänge; die echten Federn rechnet Motion in glas.js */
  --feder:cubic-bezier(0.34,1.4,0.64,1);
  --sanft:cubic-bezier(0.16,1,0.3,1);
}

html { scrollbar-color:rgba(255,245,243,0.18) transparent; }
body { background:var(--bg-deep); }
::selection { background:rgba(242,154,88,0.35); color:var(--text); }

/* ══ Grund: Aurora, die atmet ═══════════════════════════════════════
   Glas braucht etwas hinter sich, sonst ist es nur eine graue Fläche.
   Die Blobs sind kräftiger als vorher und stehen seit 02.11.2026 still
   (vorher 90 s je Runde treibend — siehe .blob). */
.aurora { background:radial-gradient(120% 90% at 50% -10%, #0E0B3A 0%, var(--bg-deep) 62%); }
.aurora::after {
  background:
    radial-gradient(ellipse 80% 60% at 50% 10%, transparent 0%, rgba(4,4,28,0.55) 75%),
    linear-gradient(180deg, transparent 40%, rgba(4,4,28,0.85) 100%);
}
/* Lichtflecken stehen still (02.11.2026, Tempo): solange sie trieben, musste
   der Browser JEDE Glasfläche darüber in jedem Bild neu unscharf rechnen. */
.blob { filter:blur(110px); opacity:0.22; }
.blob-1 { top:-18%; left:-6%; }
.blob-2 { top:30%; left:38%; opacity:0.12; }
.blob-3 { top:-10%; right:-8%; opacity:0.26; }

/* Feines Korn auf einer festen Ebene. Nie auf scrollenden Flächen: dort
   zwingt es den Browser bei jedem Bild zum Neuzeichnen. */
.aurora::before {
  content:''; position:absolute; inset:-50%; z-index:1; opacity:0.07; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}

/* ══ Das Glas ════════════════════════════════════════════════════════
   Ein Rezept für alle Flächen. ::before trägt das Kantenlicht oben links
   und den Glanz unter dem Zeiger (--mx/--my setzt glas.js, --an blendet
   ihn weich ein). ::after zeichnet die leuchtende Kante, nur auf dem Ring,
   per Maske. */
.card, .tile, .login-card, .kanal-box, .leer, .tabelle-wrap, .banner,
.vorschlag, .toc {
  position:relative; isolation:isolate;
  background:linear-gradient(155deg, var(--g-fill-2) 0%, var(--g-fill) 42%, rgba(255,245,243,0.025) 100%);
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(170%);
  backdrop-filter:blur(var(--g-blur)) saturate(170%);
  border:1px solid var(--g-kante);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -1px 0 rgba(255,255,255,0.04),
    inset 1px 0 0 rgba(255,255,255,0.05),
    var(--g-schatten);
}
.card::before, .tile::before, .login-card::before {
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(420px circle at var(--mx,50%) var(--my,-20%), rgba(255,245,243,calc(0.03 * var(--an,0))), transparent 60%),
    radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,0.07), transparent 46%);
}
.card::after, .tile::after, .login-card::after {
  content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  padding:1px;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),
    rgba(242,154,88,0.38), rgba(176,110,220,0.2) 40%, transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:var(--an,0); transition:opacity 0.5s var(--sanft);
}

.card { border-radius:var(--r-lg); }
.card + .card { margin-top:var(--s-5); }

/* ── Kacheln: Zahlen groß, Bewegung beim Überfahren ───────────────── */
.tiles { gap:14px; }
.tile { border-radius:var(--r-lg); padding:22px 22px 20px; overflow:hidden;
        transition:transform 0.5s var(--feder), border-color 0.3s var(--sanft); }
.tile:hover { transform:translateY(-4px); border-color:rgba(255,245,243,0.22); }
.tile-label { font-size:0.7rem; letter-spacing:0.12em; color:var(--text-muted); }
.tile-wert { font-size:2.6rem; letter-spacing:-0.03em; margin-top:10px; }
.tile-wert.ok  { color:#7BE8A4; text-shadow:0 0 28px rgba(74,222,128,0.35); }
.tile-wert.err { color:#FF8080; text-shadow:0 0 28px rgba(242,66,66,0.4); }
.tile-wert.warn{ color:#F5B37C; }
/* Die erste Kachel trägt den Markenverlauf als Lichtfleck, damit die Reihe
   einen Anfang hat und nicht fünf gleiche Kästen sind. */
.tile:first-child { background:
    radial-gradient(140% 120% at 100% 0%, rgba(242,66,66,0.22), transparent 55%),
    radial-gradient(120% 120% at 0% 100%, rgba(132,66,220,0.26), transparent 60%),
    linear-gradient(155deg, var(--g-fill-2), var(--g-fill)); }

/* ══ Seitenleiste: schwebende Glasplatte ═════════════════════════════ */
.sidebar {
  margin:14px 0 14px 14px; height:calc(100dvh - 28px); top:14px;
  border-radius:30px;
  /* Fast deckend statt backdrop-filter (02.11.2026, Tempo): sieht vor dem
     dunklen Grund gleich aus, kostet aber kein Unschärferechnen. Farben aus
     dem alten Glas gemessen (oben der Schimmer von blob-1). */
  background:linear-gradient(180deg, rgba(74,31,73,0.96) 0%, rgba(62,25,62,0.96) 27%, rgba(23,16,56,0.96) 56%, rgba(17,17,53,0.96) 100%);
  border:1px solid var(--g-kante);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 0 1px rgba(255,255,255,0.02), var(--g-schatten);
  padding:22px 14px 16px;
  scrollbar-width:none;
  view-transition-name:leiste;
}
.sidebar::-webkit-scrollbar { display:none; }
.wordmark { font-size:1.55rem; }

.nav { position:relative; gap:3px; }
.nav-label { padding:14px 14px 6px; color:var(--text-dim); }
.nav-item {
  position:relative; z-index:1;
  border-radius:var(--r-pill); padding:10px 14px; gap:12px;
  transition:color 0.25s var(--sanft), transform 0.4s var(--feder);
}
.nav-item .num { display:none; }
.nav-item .sym { width:19px; height:19px; flex:none; opacity:0.75; transition:opacity 0.25s, transform 0.5s var(--feder); }
.nav-item:hover .sym { transform:scale(1.12) rotate(-4deg); opacity:1; }
.nav-item:active { transform:scale(0.97); }
.nav-item[aria-current="page"] { color:var(--text); }
.nav-item[aria-current="page"] .sym { opacity:1; color:var(--brand-2); }

/* Ohne glas.js (oder ohne Bewegung) bleibt die ruhige Markierung von vorher,
   nur runder. Mit glas.js übernimmt die Linse und die Fläche wird durchsichtig. */
.nav-item[aria-current="page"] { background:var(--g-fill-2); border-color:var(--g-kante); border-radius:var(--r-pill); }
.nav-item[aria-current="page"]::before { left:6px; height:16px; top:50%; translate:0 -50%; border-radius:3px; display:none; }
.hat-linse .nav-item[aria-current="page"],
.hat-linse .nav-item:hover { background:transparent; border-color:transparent; }

/* Die Linse: ein Glastropfen, der unter dem aktiven Punkt liegt und dem
   Zeiger mit Feder folgt (Motion, glas.js). */
.nav-linse {
  position:absolute; left:0; top:0; z-index:0; pointer-events:none;
  border-radius:var(--r-pill);
  background:linear-gradient(180deg, rgba(255,245,243,0.17), rgba(255,245,243,0.07));
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 1px rgba(255,255,255,0.10),
    inset 0 0 12px rgba(255,255,255,0.06),
    0 8px 22px -10px rgba(0,0,0,0.7);
  opacity:0;
}

.kanal-box { border-radius:20px; padding:14px 16px; }
.dot-status.an { position:relative; box-shadow:0 0 0 3px rgba(74,222,128,0.16), 0 0 10px var(--ok); }
/* Puls als eigener Ring mit transform/opacity — läuft auf der Grafikkarte;
   ein animierter box-shadow ließ die Leiste in jedem Bild neu malen. */
.dot-status.an::after {
  content:''; position:absolute; inset:-3px; border-radius:50%;
  box-shadow:0 0 0 2px rgba(74,222,128,0.45); animation:puls 2.8s ease-in-out infinite;
}
@keyframes puls { 0% { transform:scale(0.8); opacity:0.9; } 70%,100% { transform:scale(1.9); opacity:0; } }

.userbox { border-top-color:rgba(255,245,243,0.08); }
.avatar { box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 6px 18px -6px rgba(242,66,66,0.7); }
.icon-btn {
  display:inline-grid; place-items:center; width:36px; height:36px; padding:0;
  border-radius:50%; background:var(--g-fill); border-color:var(--g-kante);
  transition:transform 0.4s var(--feder), border-color 0.25s, color 0.25s;
}
.icon-btn .sym { width:17px; height:17px; }
.icon-btn-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.icon-btn:hover { transform:scale(1.08); }
.icon-btn:active { transform:scale(0.94); }

/* ══ Inhalt ══════════════════════════════════════════════════════════ */
.main { padding:40px 48px 64px; }
.page-head h1 { font-size:clamp(2.1rem,3.6vw,3.1rem); letter-spacing:-0.035em; }
.page-head p.sub { color:var(--text-muted); }

/* ── Knöpfe: Glas, Glanzstreif, Druck ─────────────────────────────── */
.btn { position:relative; overflow:hidden; isolation:isolate;
       transition:transform 0.45s var(--feder), box-shadow 0.3s var(--sanft), background-color 0.25s, border-color 0.25s; }
.btn:active:not(:disabled) { transform:scale(0.97) !important; transition-duration:0.12s; }
.btn-primary {
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -2px 6px rgba(120,20,40,0.25), 0 14px 34px -14px rgba(242,66,66,0.8);
}
.btn-primary:hover:not(:disabled) { transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -2px 6px rgba(120,20,40,0.25), 0 20px 44px -14px rgba(242,66,66,0.95); }
/* Glanzstreif, der beim Überfahren einmal durchläuft */
.btn-primary::after {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.45) 48%, transparent 66%);
  transform:translateX(-120%);
}
.btn-primary:hover:not(:disabled)::after { transform:translateX(120%); transition:transform 0.9s var(--sanft); }
.btn-ghost {
  background:linear-gradient(180deg, rgba(255,245,243,0.10), rgba(255,245,243,0.04));
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  border-color:var(--g-kante);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-ghost:hover:not(:disabled) { background:linear-gradient(180deg, rgba(255,245,243,0.16), rgba(255,245,243,0.06)); border-color:rgba(255,245,243,0.26); }
.btn-danger { background:rgba(242,66,66,0.06); box-shadow:inset 0 1px 0 rgba(255,180,180,0.12); }

/* ── Felder: eingelassenes Glas ───────────────────────────────────── */
input[type=text], input[type=email], input[type=password], input[type=url],
input[type=datetime-local], input[type=number], select, textarea {
  border-radius:14px; padding:12px 16px;
  background:rgba(4,4,28,0.42);
  border-color:rgba(255,245,243,0.12);
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.35), inset 0 -1px 0 rgba(255,255,255,0.04);
  transition:border-color 0.25s var(--sanft), box-shadow 0.35s var(--sanft), background-color 0.25s;
}
input:hover, select:hover, textarea:hover { border-color:rgba(255,245,243,0.2); }
input:focus, select:focus, textarea:focus {
  background:rgba(4,4,28,0.6); border-color:rgba(242,154,88,0.7);
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.35), 0 0 0 4px rgba(242,154,88,0.14), 0 0 24px -4px rgba(242,154,88,0.35);
}
.checkline input[type=checkbox] { accent-color:var(--brand-2); }

/* ── Tabelle: Zeilen als schwebende Streifen ──────────────────────── */
.tabelle-wrap { border-radius:20px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.12); }
th { background:rgba(255,245,243,0.03); color:var(--text-muted); }
td { border-bottom-color:rgba(255,245,243,0.06); }
tbody tr { transition:background-color 0.25s var(--sanft); }
tbody tr:hover { background:rgba(255,245,243,0.045); }
.mini, .mini-leer { border-radius:12px; }
.mini { box-shadow:0 8px 20px -10px rgba(0,0,0,0.8); transition:transform 0.45s var(--feder); }
tbody tr:hover .mini { transform:scale(1.06) rotate(-1.5deg); }

/* ── Status-Chips: getöntes Glas ──────────────────────────────────── */
.status, .ziel, .pill { -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
                        box-shadow:inset 0 1px 0 rgba(255,255,255,0.14); }
.status-ausstehend .zeichen { display:inline-block; animation:ticken 4s steps(4) infinite; }
@keyframes ticken { to { transform:rotate(360deg); } }

/* ── Meldungen ─────────────────────────────────────────────────────── */
.banner { border-radius:18px; }
.banner .banner-icon {
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-size:0.8rem; font-weight:700; background:rgba(255,245,243,0.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.25);
}
.banner.ok  .banner-icon { background:rgba(74,222,128,0.22); color:#7BE8A4; }
.banner.err .banner-icon { background:rgba(242,66,66,0.25); color:#FF9A9A; }
.banner.warn .banner-icon{ background:rgba(242,154,88,0.25); color:#F5B37C; }
.banner.info .banner-icon{ background:rgba(176,110,220,0.25); color:#D6B0F0; }

.leer { border-style:solid; border-radius:var(--r-lg); }

/* ── Rechte Schiene ────────────────────────────────────────────────── */
.rail-item { padding:8px 10px; margin:0 -10px; border-radius:14px; transition:background-color 0.25s; }
.rail-item:hover { background:rgba(255,245,243,0.05); }

/* ── Anmeldung ─────────────────────────────────────────────────────── */
.login-card { border-radius:32px; padding:56px 44px 44px;
  -webkit-backdrop-filter:blur(40px) saturate(180%); backdrop-filter:blur(40px) saturate(180%); }
.login-card .wordmark { font-size:2.4rem; }

/* ── Skelett beim Laden statt leerer Fläche ────────────────────────── */
.glas-skelett { display:grid; gap:10px; }
.glas-skelett span {
  display:block; height:72px; border-radius:16px;
  background:linear-gradient(100deg, rgba(255,245,243,0.04) 30%, rgba(255,245,243,0.10) 50%, rgba(255,245,243,0.04) 70%);
  background-size:300% 100%; animation:schimmer 1.6s linear infinite;
}
@keyframes schimmer { from { background-position:100% 0; } to { background-position:0 0; } }

/* ══ Seitenwechsel: die Leiste bleibt, der Inhalt gleitet ════════════
   Seitenübergreifende View Transitions (Chromium, Safari 18.2+). Wer sie
   nicht kann, lädt wie bisher. */
@view-transition { navigation:auto; }
.page { view-transition-name:inhalt; }
/* Kurz und ohne Unschärfe (02.11.2026, Tempo; vorher 0,22 s + 0,5 s mit blur) */
::view-transition-old(inhalt) { animation:0.12s var(--sanft) both raus; }
::view-transition-new(inhalt) { animation:0.2s var(--sanft) both rein; }
::view-transition-group(leiste) { animation:none; }
@keyframes raus { to { opacity:0; transform:translateY(-4px); } }
@keyframes rein { from { opacity:0; transform:translateY(6px); } }

/* ══ Handy: Kopfleiste oben, schwebende Tab-Leiste unten ════════════
   🩸 Die Seitenleiste darf hier KEIN backdrop-filter tragen: das macht sie
   zum Bezugsrahmen für position:fixed, und die Tab-Leiste klebte an der
   Leiste statt am Bildschirmrand. Das Glas sitzt deshalb auf .nav selbst. */
@media (max-width:900px) {
  .sidebar {
    position:sticky; top:8px; z-index:20; height:auto; margin:8px 8px 0;
    border-radius:24px; padding:10px 12px 10px 18px;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:rgba(11,10,46,0.82);
    view-transition-name:none;
  }
  .wordmark { font-size:1.2rem; }
  .userbox { margin-left:auto; gap:8px; }
  .nav {
    position:fixed; z-index:30; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom));
    flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    padding:6px; gap:2px; border-radius:30px;
    /* Fast deckend statt Unschärfe (02.11.2026): die Tab-Leiste liegt über
       scrollendem Inhalt und musste sonst bei jedem Scrollbild neu rechnen. */
    background:linear-gradient(180deg, rgba(30,27,78,0.985), rgba(18,16,58,0.985));
    border:1px solid rgba(255,245,243,0.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.28), 0 20px 50px -14px rgba(0,0,0,0.85);
  }
  .nav::-webkit-scrollbar { display:none; }
  .nav-item {
    flex:none; scroll-snap-align:start;
    flex-direction:column; gap:3px; padding:8px 12px 7px; min-width:68px;
    font-size:0.66rem; font-weight:500;
  }
  .nav-item .sym { width:22px; height:22px; }
  .nav-text { white-space:nowrap; }
  .main { padding:22px 16px 120px; }
  .tile-wert { font-size:2.1rem; }
  .tile:hover { transform:none; }
}

/* ══ Rücksicht ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce) {
  .blob, .dot-status.an::after, .status-ausstehend .zeichen { animation:none !important; }
  @view-transition { navigation:none; }
}
/* Wer weniger Transparenz will (macOS/iOS-Einstellung), bekommt volle
   Flächen mit derselben Form. Lesbarkeit geht vor Glas. */
@media (prefers-reduced-transparency:reduce) {
  .card, .tile, .login-card, .kanal-box, .leer, .tabelle-wrap, .banner, .sidebar, .nav, .btn-ghost, .vorschlag, .toc {
    background:#12113A !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  .nav-linse { background:rgba(255,245,243,0.14); -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* ══ Anmeldung: eigene Bühne (24.10., Kai: „ab dem Login anders“) ═══
   Links die Aussage mit drei schwebenden Vorschauen, rechts die Glaskarte.
   Dahinter eine Lichtkugel im Markenverlauf, die sich langsam dreht.
   Auf dem Handy bleibt nur die Karte, die Bühne wäre dort nur Ballast. */
.seite-login .login-wrap {
  position:relative; min-height:100dvh; overflow:hidden;
  grid-template-columns:minmax(0,1.1fr) minmax(0,440px);
  gap:clamp(40px,7vw,120px); align-items:center; justify-content:center;
  padding:clamp(24px,5vw,72px);
}
.login-orb {
  position:absolute; z-index:0; pointer-events:none;
  width:min(70vw,900px); aspect-ratio:1; right:-18vw; top:50%; translate:0 -50%;
  border-radius:50%; filter:blur(90px); opacity:0.3;
  background:conic-gradient(from 0deg, var(--brand-1), var(--brand-2), var(--brand-3), var(--brand-3-soft), var(--brand-1));
  animation:orb-drehen 40s linear infinite;
}
@keyframes orb-drehen { to { transform:rotate(360deg); } }

.login-buehne { position:relative; z-index:1; max-width:600px; }
.login-buehne .eyebrow { margin-bottom:22px; }
.login-buehne h1 {
  font-size:clamp(2.8rem,5.6vw,5rem); line-height:1.02; letter-spacing:-0.04em; word-spacing:0.1em;
  margin:0 0 22px;
}
.login-buehne p { color:var(--text-muted); font-size:1.08rem; line-height:1.6; max-width:46ch; margin:0; }

.login-chips { position:relative; margin-top:48px; height:170px; }
.login-chip {
  position:absolute; display:flex; align-items:center; gap:10px; white-space:nowrap;
  padding:12px 18px 12px 14px; border-radius:var(--r-pill); font-size:0.86rem;
  background:linear-gradient(160deg, rgba(255,245,243,0.13), rgba(255,245,243,0.04));
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--g-kante);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.28), 0 18px 40px -18px rgba(0,0,0,0.8);
}
.login-chip b { font-weight:600; }
.login-chip span:last-child { color:var(--text-muted); }
.login-chip:nth-child(1) { left:0; top:0; }
.login-chip:nth-child(2) { left:22%; top:62px; }
.login-chip:nth-child(3) { left:6%; top:124px; }
.chip-punkt { width:9px; height:9px; border-radius:50%; flex:none; }
.chip-punkt.geplant { background:var(--brand-2); box-shadow:0 0 10px var(--brand-2); }
.chip-punkt.live    { background:var(--ok); box-shadow:0 0 10px var(--ok); }
.chip-punkt.story   { background:var(--brand-3-soft); box-shadow:0 0 10px var(--brand-3-soft); }

.seite-login .login-card { z-index:1; width:100%; max-width:440px; }
.seite-login .login-card .wordmark { text-align:left; }
.seite-login .login-card .brand-pb { display:flex; justify-content:flex-start; margin-bottom:36px; }
.seite-login .login-card .btn { padding-block:14px; font-size:1rem; margin-top:14px; }
.glas-js .seite-login .login-card { opacity:0; }

@media (max-width:900px) {
  .seite-login .login-wrap { grid-template-columns:minmax(0,1fr); padding:20px; }
  .login-buehne { display:none; }
  .login-orb { width:120vw; right:-40vw; top:20%; }
  .seite-login .login-card { padding:44px 26px 30px; margin-inline:auto; }
}
@media (prefers-reduced-motion:reduce) {
  .login-orb { animation:none; }
  .glas-js .seite-login .login-card { opacity:1; }
}

/* ══ Übersicht: Liste, Ziel-Hinweis, Handy-Kacheln (24.10., Punkte 1–3) ══ */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.tile-fuss { color:var(--text-muted); }

/* 1 · Status wandert unter den Termin, die Aktionen werden Symbolknöpfe.
   Am Rechner sind sie leise da und werden beim Überfahren der Zeile klar;
   auf Touch-Geräten ohne Hover bleiben sie immer voll sichtbar. */
td.datum { vertical-align:top; }
td.datum .datum-wert { display:block; margin-bottom:10px; }
td.datum .status { display:inline-flex; }
td.datum .kanal-tag { margin-top:6px; }
.status-zelle { flex-direction:row; align-items:center; gap:0; }
.zeilen-aktionen { gap:4px; }
.aktion {
  display:inline-grid; place-items:center; width:36px; height:36px; padding:0;
  border-radius:50%; border:1px solid transparent; background:transparent;
  color:var(--text-muted); cursor:pointer;
  transition:background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.4s var(--feder), opacity 0.25s;
}
.aktion .sym { width:18px; height:18px; }
.aktion { text-decoration:none; }
.aktion span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.aktion:hover, .aktion:focus-visible { background:var(--g-fill-2); border-color:var(--g-kante); color:var(--text); transform:scale(1.08); }
.aktion:active { transform:scale(0.94); }
.aktion-weg:hover, .aktion-weg:focus-visible { background:rgba(242,66,66,0.14); border-color:rgba(242,66,66,0.4); color:#FF9A9A; }
@media (hover:hover) {
  tbody tr .aktion { opacity:0.45; }
  tbody tr:hover .aktion, tbody tr:focus-within .aktion { opacity:1; }
}
.aktionen-auf { display:none; }

/* 3 · Ohne Ziel geht nichts raus: deutlicher Hinweis mit Weg zur Lösung */
.ziel-fehlt {
  display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px;
  padding:7px 12px 7px 9px; border-radius:var(--r-pill); font-size:0.8rem; text-decoration:none;
  color:#F5B37C; background:rgba(242,154,88,0.1); border:1px solid rgba(242,154,88,0.35);
  box-shadow:inset 0 1px 0 rgba(255,220,190,0.12);
  transition:background-color 0.2s, border-color 0.2s, transform 0.4s var(--feder);
}
.ziel-fehlt .sym { width:16px; height:16px; flex:none; }
.ziel-fehlt b { color:var(--text); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(242,154,88,0.6); }
.ziel-fehlt:hover { background:rgba(242,154,88,0.18); border-color:rgba(242,154,88,0.6); transform:translateY(-1px); }

/* 2 + 1 am Handy: Kacheln als Wischreihe, Beiträge als Karten statt Tabelle */
@media (max-width:900px) {
  .tiles {
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    gap:10px; margin-inline:-16px; padding:4px 16px 12px; scroll-padding-inline:16px;
  }
  .tiles::-webkit-scrollbar { display:none; }
  .tile { flex:0 0 auto; min-width:128px; padding:14px 16px; border-radius:20px; scroll-snap-align:start; }
  .tile-label { font-size:0.62rem; }
  .tile-wert { font-size:1.8rem; margin-top:4px; }
  .tile-fuss { display:none; }
}
@media (max-width:700px) {
  [data-seite="uebersicht"] #liste .tabelle-wrap { overflow:visible; border:none; background:none; box-shadow:none;
                         -webkit-backdrop-filter:none; backdrop-filter:none; }
  [data-seite="uebersicht"] #liste table, [data-seite="uebersicht"] #liste tbody { display:block; }
  [data-seite="uebersicht"] #liste thead { display:none; }
  [data-seite="uebersicht"] #liste tr {
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 8px; position:relative;
    padding:14px 14px 14px 16px; margin-bottom:10px; border-radius:20px;
    background:rgba(255,245,243,0.04); border:1px solid rgba(255,245,243,0.09);
  }
  [data-seite="uebersicht"] #liste td { display:block; padding:0; border:none; min-width:0; width:auto; }
  [data-seite="uebersicht"] #liste td.datum { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  [data-seite="uebersicht"] #liste td.datum .datum-wert { margin:0; font-size:0.85rem; color:var(--text-muted); }
  [data-seite="uebersicht"] #liste td.text-zelle { grid-column:1 / -1; grid-row:2; }
  [data-seite="uebersicht"] #liste td.status-zelle { grid-column:2; grid-row:1; position:relative; z-index:3; }
  [data-seite="uebersicht"] #liste .aktionen-auf {
    display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%;
    color:var(--text-muted); background:var(--g-fill); border:1px solid var(--g-kante);
  }
  [data-seite="uebersicht"] #liste .aktionen-auf .sym { width:20px; height:20px; }
  [data-seite="uebersicht"] #liste .zeilen-aktionen {
    display:none; position:absolute; right:0; top:42px; z-index:5; flex-direction:column; gap:2px; padding:6px;
    border-radius:18px; background:#120F3A; border:1px solid var(--g-kante);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.16), 0 18px 40px -12px rgba(0,0,0,0.9);
  }
  [data-seite="uebersicht"] #liste .aktionen-auf[aria-expanded="true"] + .zeilen-aktionen { display:flex; }
  [data-seite="uebersicht"] #liste .aktion { width:auto; height:auto; padding:10px 14px; border-radius:12px; display:flex; gap:10px; justify-content:flex-start; opacity:1; }
  [data-seite="uebersicht"] #liste .aktion span { position:static; width:auto; height:auto; clip:auto; overflow:visible; font-size:0.9rem; }
  [data-seite="uebersicht"] #liste .zeile-inhalt { gap:12px; }
  [data-seite="uebersicht"] #liste { scroll-margin-top:110px; }
  /* Der Statusrand sitzt am Karten- statt am Zellrand */
  [data-seite="uebersicht"] #liste tr td:first-child { box-shadow:none; }
  [data-seite="uebersicht"] #liste tr.zeile-gepostet   { box-shadow:inset 3px 0 0 var(--ok); }
  [data-seite="uebersicht"] #liste tr.zeile-ausstehend { box-shadow:inset 3px 0 0 var(--brand-3-soft); }
  [data-seite="uebersicht"] #liste tr.zeile-fehler     { box-shadow:inset 3px 0 0 var(--err); }
  [data-seite="uebersicht"] #liste tr.zeile-teilweise, [data-seite="uebersicht"] #liste tr.zeile-teilweise-fehler { box-shadow:inset 3px 0 0 var(--warn); }
  [data-seite="uebersicht"] #liste tr.zeile-entwurf    { box-shadow:inset 3px 0 0 var(--text-dim); }
  .ziel-fehlt { display:flex; flex-wrap:wrap; border-radius:14px; padding:9px 12px; gap:4px 8px; }
  .ziel-fehlt span { flex:1 1 0; min-width:0; }
  .ziel-fehlt b { flex-basis:100%; padding-left:24px; }
  .page .card { padding:20px 16px; }
}

/* ══ Restliche Seiten (24.10.): Formular-Bausteine, Zielwahl, Benutzer ══ */
/* Häkchen und Auswahlpunkte in Glas statt Browser-Weiß. Eigene Zeichnung per
   ::after, damit sie in jedem Browser gleich aussehen; Tastatur bleibt nativ. */
input[type=checkbox], input[type=radio] {
  -webkit-appearance:none; appearance:none; flex:none; margin:0;
  width:20px; height:20px; display:inline-grid; place-items:center; cursor:pointer;
  border-radius:7px; background:rgba(255,245,243,0.06); border:1px solid rgba(255,245,243,0.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
  transition:background-color 0.2s, border-color 0.2s, transform 0.35s var(--feder);
}
input[type=radio] { border-radius:50%; }
input[type=checkbox]::after {
  content:''; width:10px; height:5px; margin-top:-3px;
  border:2px solid #fff; border-top:0; border-right:0;
  transform:rotate(-45deg) scale(0); transition:transform 0.3s var(--feder);
}
input[type=radio]::after {
  content:''; width:8px; height:8px; border-radius:50%; background:#fff;
  transform:scale(0); transition:transform 0.3s var(--feder);
}
input[type=checkbox]:checked, input[type=radio]:checked {
  background:var(--gradient-btn); border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 14px -4px rgba(242,154,88,0.7);
}
input[type=checkbox]:checked::after { transform:rotate(-45deg) scale(1); }
input[type=radio]:checked::after { transform:scale(1); }
input[type=checkbox]:hover:not(:disabled), input[type=radio]:hover:not(:disabled) { border-color:rgba(255,245,243,0.45); }
input[type=checkbox]:active:not(:disabled), input[type=radio]:active:not(:disabled) { transform:scale(0.9); }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline:2px solid var(--brand-2); outline-offset:2px; }
input[type=checkbox]:disabled, input[type=radio]:disabled { opacity:0.45; cursor:not-allowed; }

/* Datum, Auswahl und Dateiwahl im dunklen Schema des Browsers */
input, select, textarea { color-scheme:dark; }
input[type=file] { font-size:0.85rem; color:var(--text-muted); max-width:100%; }
input[type=file]::file-selector-button {
  margin-right:12px; padding:8px 16px; border-radius:var(--r-pill); cursor:pointer;
  font:inherit; font-weight:600; color:var(--text);
  background:var(--g-fill-2); border:1px solid var(--g-kante);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);
  transition:background-color 0.2s, border-color 0.2s;
}
input[type=file]::file-selector-button:hover { background:rgba(255,245,243,0.12); border-color:rgba(255,245,243,0.3); }

/* Zielwahl (Beitrag, Jahresplan): jedes Konto ist eine antippbare Glaszeile,
   die gewählte leuchtet. Die ganze Zeile ist Klickfläche über das label. */
#ziele { display:grid; gap:8px; margin-top:6px; }
#ziele .checkline {
  position:relative; padding:0; border-radius:16px;
  background:rgba(255,245,243,0.035); border:1px solid rgba(255,245,243,0.1);
  transition:background-color 0.2s, border-color 0.2s;
}
#ziele .checkline input { position:absolute; left:14px; top:50%; translate:0 -50%; }
#ziele .checkline label { flex:1; display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; padding:13px 14px 13px 46px; }
#ziele .checkline:hover { background:rgba(255,245,243,0.06); }
#ziele .checkline:has(input:checked) { background:rgba(242,154,88,0.09); border-color:rgba(242,154,88,0.42); }
#ziele .checkline:has(input:disabled) { opacity:0.75; }

/* Benutzer: Freigaben als Reihe, Aktionen untereinander statt abgeschnitten */
[data-seite="benutzer"] #liste .ziele { display:flex; flex-wrap:wrap; gap:6px; max-width:300px; }
[data-seite="benutzer"] #liste .zeilen-aktionen { flex-direction:column; align-items:stretch; gap:6px; }
[data-seite="benutzer"] #liste td { vertical-align:top; }
[data-seite="benutzer"] #liste td:nth-child(5) .kanal-tag { white-space:nowrap; }
@media (max-width:700px) {
  [data-seite="benutzer"] #liste .tabelle-wrap { overflow:visible; border:none; background:none; box-shadow:none;
                                                 -webkit-backdrop-filter:none; backdrop-filter:none; }
  [data-seite="benutzer"] #liste table, [data-seite="benutzer"] #liste tbody { display:block; }
  [data-seite="benutzer"] #liste thead { display:none; }
  [data-seite="benutzer"] #liste tr {
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 10px;
    padding:16px; margin-bottom:12px; border-radius:20px;
    background:rgba(255,245,243,0.04); border:1px solid rgba(255,245,243,0.09);
  }
  [data-seite="benutzer"] #liste td { display:block; padding:0; border:none; min-width:0; }
  [data-seite="benutzer"] #liste td:nth-child(1) { grid-area:1 / 1; }
  [data-seite="benutzer"] #liste td:nth-child(2) { grid-area:1 / 2; }
  [data-seite="benutzer"] #liste td:nth-child(3) { grid-area:2 / 1 / 3 / -1; }
  [data-seite="benutzer"] #liste td:nth-child(4) { grid-area:3 / 1; align-self:center; }
  [data-seite="benutzer"] #liste td:nth-child(5) { grid-area:3 / 2; text-align:right; }
  [data-seite="benutzer"] #liste td:nth-child(6) { grid-area:4 / 1 / 5 / -1; }
  [data-seite="benutzer"] #liste .ziele { max-width:none; }
  [data-seite="benutzer"] #liste .zeilen-aktionen { flex-direction:row; flex-wrap:wrap; }
  [data-seite="benutzer"] #liste .zeilen-aktionen .btn { flex:1 1 auto; }
}

/* Konten: Abstand zwischen „Konto hinzufügen“ und den Kontokarten */
#konten > .card:first-child { margin-top:var(--s-5); }
#konten > .card + .card { margin-top:var(--s-5); }