/* Team-Hub · Hausdesign der Zentrale (/root/zentrale/docs/DESIGN-SPEC.md): hell, Glas, Inter, Sidebar links.
   Akzent der App: Violett #6D5AE6 (Creative Strategist). Claude-Code-Anschlüsse immer in #D97757. */
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/InterDisplay-Light.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/InterDisplay-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/InterDisplay-Medium.woff2") format("woff2"); }

:root {
  --grund: #EFEFF1; --ink: #0E0F12; --ink-2: #474A52; --ink-3: #5A5E66;
  --linie: rgba(14,15,18,.08);
  --glas: rgba(255,255,255,.58); --glas-dicht: rgba(255,255,255,.80); --glas-rand: rgba(255,255,255,.9);
  --karte: rgba(255,255,255,.88);
  --schatten: 0 1px 0 rgba(255,255,255,.9) inset, 0 24px 48px -28px rgba(20,22,30,.22), 0 2px 6px -2px rgba(20,22,30,.06);
  --schatten-hoch: 0 1px 0 rgba(255,255,255,.95) inset, 0 40px 70px -30px rgba(20,22,30,.30), 0 6px 14px -6px rgba(20,22,30,.10);
  --gruen: #1F9D55; --rot: #C8333A; --lime: #D7F75B; --gelb-text: #8A5300; --gelb-punkt: #B26A00;
  --graphit: #111216; --graphit-ink: #ECEDEF; --graphit-ink-2: #A9ACB4;
  --akzent-app: #6D5AE6;
  --claude: #D97757; --claude-text: #A94F2E; --claude-flaeche: rgba(217,119,87,.10);
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --display: "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r-gross: 34px; --r: 26px;
  --weich: cubic-bezier(.2,.8,.2,1); --feder: cubic-bezier(.34,1.4,.5,1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: clip; }
html { scroll-padding-top: 96px; }
body { margin: 0; background: var(--grund); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5;
  letter-spacing: -.005em; font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; overflow-wrap: anywhere;
  padding-top: env(safe-area-inset-top, 0px); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--grund); }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
h1, h2, h3 { font-family: var(--display); }

/* Lebendiger Hintergrund: weiche Flecken, kein filter: blur() */
.hintergrund { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; transform: translateZ(0); }
.blob { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; }
.blob:nth-child(1) { background: radial-gradient(closest-side, rgba(255,154,84,.46), transparent); top: -22vmax; right: -14vmax; animation: treibenA 44s ease-in-out infinite; }
.blob:nth-child(2) { background: radial-gradient(closest-side, rgba(255,120,170,.34), transparent); top: 24vh; left: -20vmax; animation: treibenB 52s ease-in-out infinite; }
.blob:nth-child(3) { background: radial-gradient(closest-side, rgba(215,247,91,.46), transparent); top: 46vh; right: -22vmax; animation: treibenC 38s ease-in-out infinite; }
.blob:nth-child(4) { background: radial-gradient(closest-side, rgba(110,160,255,.38), transparent); bottom: -30vmax; left: 20vw; animation: treibenA 48s ease-in-out infinite reverse; }
.blob:nth-child(5) { background: radial-gradient(closest-side, rgba(170,150,255,.36), transparent); top: -18vmax; left: 24vw; animation: treibenB 34s ease-in-out infinite reverse; }
@keyframes treibenA { 0%,100% { transform: translate(0,0) rotate(0) scale(1); } 50% { transform: translate(-10vmax,8vmax) rotate(40deg) scale(1.16,.9); } }
@keyframes treibenB { 0%,100% { transform: translate(0,0) rotate(0) scale(1); } 50% { transform: translate(14vmax,-6vmax) rotate(-30deg) scale(.92,1.12); } }
@keyframes treibenC { 0%,100% { transform: translate(0,0) rotate(0) scale(1); } 50% { transform: translate(-8vmax,-12vmax) rotate(60deg) scale(1.1,.94); } }

/* Grundgerüst */
.app { position: relative; z-index: 1; display: grid; grid-template-columns: 276px minmax(0,1fr); min-height: 100vh; }
.sidebar { position: sticky; top: env(safe-area-inset-top, 0px); height: calc(100vh - env(safe-area-inset-top, 0px)); overflow-y: auto;
  padding-block: 22px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: 12px; display: flex; flex-direction: column; }
.sidebar-innen { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: 18px 14px; border-radius: var(--r-gross);
  background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--schatten); }
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; padding: 0 6px; }
.marke-kreis { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); display: grid; grid-template-columns: repeat(2,7px); gap: 5px; place-content: center; flex: none; }
.marke-kreis i { width: 7px; height: 7px; border-radius: 50%; background: var(--grund); }
.marke-kreis i:nth-child(2) { background: #A99BFF; }
.marke-name { font-size: 16px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.marke-name span { display: block; color: var(--ink-3); font-weight: 400; font-size: 13px; }
.marke-mobil { display: none; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-titel { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 14px 12px 6px; }
.nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 10px; border-radius: 14px; text-decoration: none; color: var(--ink-2);
  font-size: 14.5px; font-weight: 500; transition: background .25s var(--weich), color .25s var(--weich); }
.nav a:hover { background: var(--glas-dicht); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--ink); color: #fff; }
.nav-icon { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--akzent) 14%, white); color: color-mix(in oklab, var(--akzent) 66%, black); }
.nav a[aria-current="page"] .nav-icon { background: color-mix(in srgb, var(--akzent) 70%, var(--ink)); color: #fff; }
.nav-icon svg { width: 17px; height: 17px; }
.nav-text { flex: 1; min-width: 0; }
.zaehler { font-size: 12px; font-variant-numeric: tabular-nums; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--linie); }
.nav a[aria-current="page"] .zaehler { background: rgba(255,255,255,.18); }
.profil-karte { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 20px; background: var(--glas-dicht); border: 1px solid var(--glas-rand); text-decoration: none; }
.profil-karte:hover { box-shadow: var(--schatten); }
.avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 14px; font-weight: 500; color: #fff;
  background: radial-gradient(circle at 30% 25%, #9C8CFF, #5B45D6); }
.avatar-admin { background: radial-gradient(circle at 30% 25%, #4A4E57, #0E0F12); }
.profil-text { min-width: 0; }
.profil-text b { display: block; font-size: 14px; font-weight: 500; line-height: 1.2; }
.profil-text span { display: block; font-size: 12.5px; color: var(--ink-3); line-height: 1.3; }

/* Hauptbereich */
.haupt { min-width: 0; padding-left: clamp(16px, 2.4vw, 32px); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-bottom: 72px; }
.haupt-innen { width: min(1080px, 100%); margin-inline: auto; }
.kopfzeile { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: 12px; padding-block: 20px 14px; }
.kopfzeile.ist-gescrollt::before { content: ""; position: absolute; inset: 0 -40px; z-index: -1; background: rgba(239,239,241,.94); box-shadow: 0 1px 0 var(--linie); }
.menue-knopf { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--glas-rand); background: var(--glas-dicht); place-items: center; cursor: pointer; flex: none; }
.menue-knopf svg { width: 20px; height: 20px; }
.suche { position: relative; flex: 1 1 260px; max-width: 420px; display: flex; align-items: center; margin: 0; }
.suche svg { position: absolute; left: 15px; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.suche input { width: 100%; height: 44px; border-radius: 999px; border: 1px solid var(--glas-rand); background: var(--glas-dicht); box-shadow: var(--schatten);
  padding: 0 16px 0 42px; font-size: 16px; color: var(--ink); }
.suche input::placeholder { color: var(--ink-3); }

/* Ansicht */
.ansicht { padding-top: clamp(12px, 3vh, 32px); }
.ansicht:focus { outline: none; }
.eyebrow { font-size: 14px; font-weight: 500; color: var(--ink-3); }
.titel-gross { margin: .25em 0 0; font-size: clamp(40px, 6.4vw, 88px); font-weight: 400; letter-spacing: -.048em; line-height: .98; text-wrap: balance; }
.titel-gross b { font-weight: 500; }
.winken-hand { display: inline-block; transform-origin: 72% 78%; animation: winken 1.6s var(--feder) .5s backwards; }
.titel { margin: .2em 0 0; font-size: clamp(32px, 4vw, 50px); font-weight: 400; letter-spacing: -.04em; line-height: 1.02; text-wrap: balance; }
.unter { margin: 14px 0 28px; max-width: 56ch; font-family: var(--display); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.45; color: var(--ink-2); letter-spacing: -.01em; }
.rollen-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -10px; }
.chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; padding: 7px 12px; border-radius: 999px; background: var(--glas-dicht); border: 1px solid var(--glas-rand); white-space: nowrap; }
.chip-dunkel { background: var(--ink); color: #fff; border-color: transparent; }
.punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--gelb-punkt); display: inline-block; }
.punkt-gruen { background: var(--gruen); } .punkt-grau { background: #9A9DA4; }
.aktuell { margin-top: 24px; display: flex; gap: 12px; align-items: flex-start; max-width: 780px; padding: 14px 18px; border-radius: 22px; background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--schatten); }
.aktuell-pille { flex: none; font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 999px; background: var(--lime); color: #0E0F12; }
.aktuell p { margin: 0; font-size: 14px; color: var(--ink-2); }
.aktuell strong { color: var(--ink); font-weight: 500; }
.block-titel { margin: clamp(36px, 5vh, 56px) 0 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.block-titel h2 { margin: 0; font-size: clamp(21px, 2.2vw, 26px); font-weight: 400; letter-spacing: -.03em; }
.block-titel span { font-size: 13px; color: var(--ink-3); }
.leer { padding: 22px 24px; border-radius: var(--r); background: var(--glas); border: 1px dashed var(--ink-3); color: var(--ink-2); }

/* Favoriten gross */
.favoriten { display: flex; flex-wrap: wrap; gap: 18px; }
.fav { position: relative; flex: 1 1 280px; min-width: 0; animation: auf .7s var(--weich) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
.fav-innen { position: relative; display: flex; flex-direction: column; min-height: 280px; border-radius: var(--r); overflow: hidden;
  background: radial-gradient(120% 90% at 78% 8%, color-mix(in oklab, var(--akzent) 48%, white) 0%, transparent 55%),
              radial-gradient(140% 120% at 20% 110%, color-mix(in oklab, var(--akzent) 78%, black) 0%, transparent 60%), var(--akzent);
  box-shadow: var(--schatten); transition: transform .5s var(--weich), box-shadow .5s var(--weich); }
.fav-motiv { position: relative; flex: 1; min-height: 130px; }
.fav-scheibe { position: absolute; right: 24px; top: 22px; width: 88px; height: 88px; border-radius: 30%; display: grid; place-items: center; background: rgba(255,255,255,.92);
  box-shadow: 0 24px 40px -18px rgba(0,0,0,.35); transform: rotate(-8deg); color: color-mix(in oklab, var(--akzent) 70%, black);
  animation: schweben 6s ease-in-out infinite; animation-delay: calc(var(--verzug, 0) * -1.7s); }
.fav-scheibe svg { width: 40px; height: 40px; }
.fav-quelle { position: absolute; left: 16px; top: 16px; font-size: 12px; font-weight: 500; padding: 6px 11px; border-radius: 999px; background: rgba(0,0,0,.34); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.fav-karte { margin: 10px; padding: 16px 64px 16px 18px; border-radius: 20px; background: var(--karte); display: grid; gap: 5px; }
.fav-karte strong { font-family: var(--display); font-size: clamp(20px, 2vw, 25px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.fav-karte span { font-size: 14px; color: var(--ink-2); }
.fav .deck { position: absolute; inset: 0; z-index: 1; border-radius: var(--r); }
.fav .stern-form.fav-stern { position: absolute; right: 22px; bottom: 22px; z-index: 2; }
@keyframes schweben { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes winken { 0% { transform: scale(.4) rotate(-20deg); } 30% { transform: scale(1) rotate(14deg); } 45% { transform: rotate(-8deg); } 60% { transform: rotate(14deg); } 75% { transform: rotate(-4deg); } 100% { transform: rotate(0); } }
@keyframes auf { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }

/* Ablauf */
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; counter-reset: schritt; }
.ablauf li { padding: 16px 16px 18px; border-radius: 22px; background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--schatten); counter-increment: schritt; min-width: 0; }
.ablauf li::before { content: counter(schritt); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; margin-bottom: 12px; font-size: 13px; font-weight: 500;
  font-variant-numeric: tabular-nums; background: var(--akzent-app); color: #fff; }
.ablauf strong { display: block; font-size: 15px; font-weight: 500; letter-spacing: -.015em; line-height: 1.25; }
.ablauf span { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }

/* Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.kacheln.zwei { grid-template-columns: repeat(2, minmax(0,1fr)); }
.kachel { position: relative; min-width: 0; animation: auf .6s var(--weich) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
.kachel-innen { position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 188px; padding: 18px; border-radius: var(--r); overflow: hidden;
  background: linear-gradient(150deg, rgba(255,255,255,.72) 30%, color-mix(in srgb, var(--akzent) 20%, rgba(255,255,255,.62)) 100%);
  border: 1px solid var(--glas-rand); box-shadow: var(--schatten); transition: transform .5s var(--weich), box-shadow .5s var(--weich); }
.kachel.ist-cc .kachel-innen { border: 1.5px solid color-mix(in srgb, var(--claude) 55%, transparent); }
.kachel .deck, .ordner .deck { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.kachel-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--akzent) 13%, white); color: color-mix(in oklab, var(--akzent) 62%, black); }
.icon svg { width: 20px; height: 20px; }
.kachel-name { font-family: var(--display); font-size: 19px; font-weight: 500; letter-spacing: -.025em; line-height: 1.15; }
.kachel-text { font-size: 14px; color: var(--ink-2); line-height: 1.45; flex: 1; }
.kachel-fuss { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.quelle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.quelle i { width: 8px; height: 8px; border-radius: 50%; background: var(--q); }
.status { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--gelb-text); font-weight: 500; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gelb-punkt); flex: none; }
.cc-band { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--claude-text); padding: 4px 9px 4px 7px; border-radius: 999px; background: var(--claude-flaeche); }
.cc-band svg { width: 14px; height: 14px; color: var(--claude); }
.stern-form { position: relative; z-index: 2; margin: 0; }
.stern-knopf { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--glas-rand); background: var(--glas-dicht); display: grid; place-items: center; cursor: pointer; transition: transform .4s var(--feder); }
.stern-knopf svg { width: 19px; height: 19px; color: var(--ink-3); }
.stern-knopf[aria-pressed="true"] svg { color: #E59A12; fill: #E59A12; }
.stern-knopf:active { transform: scale(.9); }
@media (hover: hover) and (pointer: fine) {
  .kachel:hover .kachel-innen, .fav:hover .fav-innen { transform: translateY(-5px); box-shadow: var(--schatten-hoch); }
  .stern-knopf:hover { transform: scale(1.08); }
  .ordner:hover { box-shadow: var(--schatten); }
}

/* Karten */
.karte { grid-column: 1 / -1; border-radius: var(--r); padding: clamp(20px, 3vw, 28px); background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--schatten); }
.karte h2, .karte h3 { margin: 0 0 6px; font-size: 20px; font-weight: 500; letter-spacing: -.025em; }
.karte > p { margin: 0; color: var(--ink-2); max-width: 66ch; }
.karte-platzhalter { background: transparent; border: 1.5px dashed var(--ink-3); box-shadow: none; }
.karte-erfolg { border: 1.5px solid color-mix(in srgb, var(--gruen) 45%, transparent); margin-bottom: 18px; }
.wege { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.weg { padding: 15px 17px; border-radius: 18px; background: var(--glas-dicht); border: 1px solid var(--glas-rand); min-width: 0; }
.weg b { display: block; font-size: 15px; font-weight: 500; margin-bottom: 3px; }
.weg span { font-size: 14px; color: var(--ink-2); }
.link-kopie { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.link-kopie code { flex: 1 1 320px; min-width: 0; font-family: var(--mono); font-size: 13px; padding: 12px 14px; border-radius: 14px; background: var(--glas-dicht); border: 1px solid var(--glas-rand); overflow-wrap: anywhere; }

/* Claude Code */
.cc-karte { grid-column: 1 / -1; border-radius: var(--r); padding: clamp(20px, 3vw, 28px); color: var(--graphit-ink); border: 1px solid rgba(217,119,87,.45);
  background: radial-gradient(80% 140% at 100% 0%, rgba(217,119,87,.30), transparent 60%), radial-gradient(70% 120% at 0% 100%, rgba(217,119,87,.10), transparent 60%), var(--graphit);
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 24px; align-items: center; }
.cc-kopf { display: flex; align-items: center; gap: 10px; }
.cc-logo { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--claude); color: #fff; flex: none; }
.cc-logo svg { width: 22px; height: 22px; }
.cc-karte small { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #F0A483; }
.cc-karte h3 { margin: 12px 0 8px; font-size: 21px; font-weight: 500; letter-spacing: -.025em; color: var(--graphit-ink); }
.cc-karte p { margin: 0; font-size: 14px; color: var(--graphit-ink-2); }
.prompt { border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); padding: 16px; display: grid; gap: 12px; min-width: 0; }
.prompt code { font-family: var(--mono); font-size: 13px; line-height: 1.55; color: #F2F2F3; white-space: pre-wrap; }
.kopieren { justify-self: start; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: #F2F2F3; color: #0E0F12; font-size: 14px; font-weight: 500; cursor: pointer; }
.kopieren:focus-visible { outline-color: #fff; }
.cc-info { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 24px; padding: clamp(20px, 3vw, 28px); border-radius: var(--r);
  background: linear-gradient(150deg, rgba(255,255,255,.72) 30%, color-mix(in srgb, var(--claude) 20%, rgba(255,255,255,.62)) 100%);
  border: 1.5px solid color-mix(in srgb, var(--claude) 45%, transparent); box-shadow: var(--schatten); }
.cc-info-text { display: flex; gap: 14px; align-items: flex-start; }
.cc-info h2 { margin: 4px 0 8px; font-size: 20px; font-weight: 500; letter-spacing: -.025em; }
.cc-info p { margin: 0 0 10px; color: var(--ink-2); font-size: 14.5px; max-width: 58ch; }
.anschluesse { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.anschluesse li { display: grid; grid-template-columns: minmax(0,auto) minmax(0,1fr) auto; gap: 10px; align-items: baseline; padding: 10px 14px; border-radius: 14px; background: var(--glas-dicht); border: 1px solid var(--glas-rand); }
.anschluesse b { font-size: 14px; font-weight: 500; }
.anschluesse span { font-size: 13px; color: var(--ink-2); }
.anschluesse em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--claude-text); }

/* Drive: gleiche Daten, zwei Ansichten (Kacheln / Liste), umgeschaltet über eine Klasse */
.drive-leiste { display: flex; justify-content: flex-end; margin: -12px 0 4px; }
.segment { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--glas); border: 1px solid var(--glas-rand); }
.segment button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; font-size: 13.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.segment button svg { width: 16px; height: 16px; }
.segment button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.drive-gruppe { margin-top: 18px; }
.drive-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px 14px 20px; border-radius: 22px; background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--schatten); }
.drive-pfad { font-size: 15px; color: var(--ink-3); }
.drive-pfad b { color: var(--ink); font-family: var(--display); font-weight: 500; font-size: 18px; letter-spacing: -.02em; }
.drive-kopf-aktion { display: flex; align-items: center; gap: 10px; }
.drive-ordner { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 12px; }
.drive-liste-kopf { display: none; }
.ordner { position: relative; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; grid-template-areas: "icon . aktion" "text text text"; row-gap: 10px; align-items: center;
  padding: 14px; border-radius: 18px; background: var(--glas-dicht); border: 1px solid var(--glas-rand); transition: box-shadow .4s var(--weich); }
.ordner-icon { grid-area: icon; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, #2F7BEA 13%, white); color: color-mix(in oklab, #2F7BEA 70%, black); }
.ordner-icon svg { width: 19px; height: 19px; }
.ordner-text { grid-area: text; min-width: 0; }
.ordner-text b { display: block; font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.ordner-text span { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.ordner-aktion { grid-area: aktion; display: flex; align-items: center; gap: 6px; }
.ordner-aktion .stern-knopf { width: 36px; height: 36px; }
.ordner-pfeil { display: none; font-size: 15px; color: var(--ink-3); width: 24px; text-align: center; }
.drive-ansicht.als-liste .drive-ordner { display: block; border-radius: 22px; background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--schatten); padding: 4px 10px; }
.drive-ansicht.als-liste .drive-liste-kopf { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr) 90px; gap: 12px; padding: 10px 10px 8px 58px; font-size: 12px; font-weight: 500; color: var(--ink-3); border-bottom: 1px solid var(--linie); }
.drive-ansicht.als-liste .ordner { grid-template-columns: 36px minmax(0,1fr) 90px; grid-template-areas: "icon text aktion"; column-gap: 12px; background: transparent; border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; padding: 8px 4px; min-height: 56px; }
.drive-ansicht.als-liste .ordner:last-child { border-bottom: 0; }
.drive-ansicht.als-liste .ordner-text { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: 12px; align-items: center; }
.drive-ansicht.als-liste .ordner-text span { margin: 0; }
.drive-ansicht.als-liste .ordner-aktion { justify-content: flex-end; }
.drive-ansicht.als-liste .ordner-pfeil { display: inline-block; }

/* Formulare */
.formular { border-radius: var(--r-gross); background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--schatten); padding: clamp(18px, 3vw, 28px); display: grid; gap: 18px; max-width: 820px; margin: 0; }
.formular-eng { background: transparent; border: 0; box-shadow: none; padding: 16px 0 4px; max-width: none; }
.feld { display: grid; gap: 7px; min-width: 0; }
.feld-gruppe { border: 0; padding: 0; margin: 0; }
.label { font-size: 13px; font-weight: 500; padding: 0; }
.feld input[type=text], .feld input[type=email], .feld input[type=password], .feld input[type=url], .feld input[type=number], .feld select {
  width: 100%; height: 50px; border-radius: 14px; border: 1px solid #8A8D94; background: var(--glas-dicht); padding: 0 14px; font-size: 16px; color: var(--ink); }
.feld input:focus-visible, .feld select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.feld input[readonly] { background: transparent; border-style: dashed; }
.feld-raster { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.feld-breit { grid-column: 1 / -1; }
.wert { font-size: 15px; color: var(--ink-2); }
.hilfe { font-size: 13px; color: var(--ink-3); margin: 0; }
.optionen { display: flex; flex-wrap: wrap; gap: 10px; }
.option { position: relative; display: inline-flex; }
.option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.option span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #8A8D94; background: var(--glas-dicht); font-size: 14px; font-weight: 500; }
.option input:checked + span { background: var(--ink); color: #fff; border-color: transparent; }
.option-schalter input:checked + span::before { content: "✓"; }
.option input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--ink); color: #fff;
  font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; transition: transform .35s var(--feder); }
.knopf svg { width: 18px; height: 18px; }
.knopf:active { transform: scale(.97); }
.knopf-leise { background: var(--glas-dicht); color: var(--ink); border: 1px solid var(--glas-rand); }
.knopf-klein { min-height: 40px; padding: 0 14px; font-size: 13px; }
.knopf-gross { min-height: 54px; font-size: 15px; width: 100%; }
.knopf-gefahr { background: transparent; color: var(--rot); border: 1px solid color-mix(in srgb, var(--rot) 50%, transparent); }
.knopf:disabled { opacity: .4; cursor: default; }
.knopf-reihe { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.meldung { margin: 0; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--rot) 10%, white); color: #8E1F25; font-weight: 500; font-size: 14px; }
.meldung-ok { background: color-mix(in srgb, var(--gruen) 12%, white); color: #145C33; }
.fav-liste { display: grid; gap: 8px; }
.fav-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 16px; background: var(--glas-dicht); border: 1px solid var(--glas-rand); }
.fav-zeile > span { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; }
.fav-zeile form { margin: 0; }
.abmelden { margin-top: 28px; }

/* Verwaltung */
.tabelle { border-radius: var(--r-gross); background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--schatten); padding: 6px clamp(14px, 2.4vw, 24px); }
.team-zeile, .link-zeile { display: grid; grid-template-columns: 40px minmax(0,1.2fr) minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.link-zeile { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) auto; }
.team-zeile:last-child, .link-zeile:last-child { border-bottom: 0; }
.team-zeile.ist-aus { opacity: .6; }
.team-name b, .link-name b { display: block; font-weight: 500; font-size: 15px; }
.team-name span, .team-rolle span, .link-name span, .link-sicht span { display: block; font-size: 13px; color: var(--ink-3); }
.team-rolle, .link-sicht { font-size: 14px; }
.team-details { grid-column: 1 / -1; }
.team-details summary, .neu-details summary { cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--ink-2); min-height: 32px; display: inline-flex; align-items: center; }
.neu-details { margin-bottom: 8px; }
.neu-details summary { font-size: 16px; color: var(--ink); }

/* Anmeldung */
.eingang { position: relative; z-index: 1; min-height: 100vh; width: min(460px, 100%); margin-inline: auto; display: flex; flex-direction: column; justify-content: center; gap: 20px;
  padding-block: 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.eingang .marke { padding: 0; }
.eingang-titel { margin: 0; font-size: clamp(42px, 9vw, 62px); font-weight: 400; letter-spacing: -.045em; line-height: 1; }
.eingang-satz { margin: 0; color: var(--ink-2); font-family: var(--display); font-size: 18px; line-height: 1.4; }
.eingang-karte { gap: 16px; }

.treffer-kopf { margin: 8px 0 16px; font-size: 15px; color: var(--ink-2); }

/* Menü-Blatt fürs Handy */
.blatt { border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 520px; max-height: 86vh; border-radius: 28px 28px 0 0; background: var(--grund); color: var(--ink); }
.blatt::backdrop { background: rgba(10,11,13,.4); }
.blatt-innen { padding: 18px max(16px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 14px; }
.blatt-kopf { display: flex; justify-content: space-between; align-items: center; }

@media (max-width: 1180px) { .ablauf { grid-template-columns: repeat(3, minmax(0,1fr)); } .kacheln { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0,1fr); }
  .sidebar { display: none; }
  .menue-knopf, .marke-mobil { display: flex; }
  .menue-knopf { display: grid; }
  .kopfzeile { flex-wrap: wrap; }
  .suche { order: 3; max-width: none; flex-basis: 100%; }
  .haupt { padding-left: max(16px, env(safe-area-inset-left, 0px)); }
  .ablauf { grid-template-columns: 1fr; }
  .ablauf li { display: grid; grid-template-columns: 28px minmax(0,1fr); column-gap: 14px; padding: 14px 16px; }
  .ablauf li::before { margin: 0; grid-row: span 2; }
  .wege, .cc-karte, .cc-info, .feld-raster { grid-template-columns: 1fr; }
  .team-zeile { grid-template-columns: 40px minmax(0,1fr); }
  .team-zeile > *:nth-child(3), .team-zeile > *:nth-child(4) { grid-column: 2; justify-self: start; }
  .link-zeile { grid-template-columns: minmax(0,1fr) auto; }
  .link-sicht { grid-column: 1; grid-row: 2; }
  .drive-ansicht.als-liste .drive-liste-kopf { display: none; }
  .drive-ansicht.als-liste .ordner { grid-template-columns: 36px minmax(0,1fr) auto; }
  .drive-ansicht.als-liste .ordner-text { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 560px) {
  .kacheln, .kacheln.zwei { grid-template-columns: 1fr; }
  .kachel-innen { min-height: 0; }
  .aktuell { flex-direction: column; gap: 8px; }
  .fav-innen { min-height: 250px; }
  .anschluesse li { grid-template-columns: 1fr auto; }
  .anschluesse span { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } }