.start-buehne { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.start-links { position: relative; overflow: hidden; padding: clamp(28px, 6vw, 80px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; border-right: 1px solid var(--linie); }
.start-links .marke-gross { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: var(--t-l); letter-spacing: -0.02em; }
.start-links .marke-gross .logo-klein { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, var(--akzent-hoch), var(--akzent) 45%, var(--akzent-tief)); color: var(--akzent-ink); }
.start-links .marke-gross .logo-klein svg { width: 22px; height: 22px; }
.start-links h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.045em; max-width: 12ch; }
.start-links h1 em { font-style: normal; color: var(--akzent-text); }
.start-links p.lead { font-size: var(--t-l); color: var(--ink-2); max-width: 46ch; margin-top: 18px; }
.start-instrument { position: absolute; right: -120px; bottom: -120px; width: 520px; height: 520px; border-radius: 50%; border: 1px solid var(--linie-2); pointer-events: none; }
.start-instrument::before { content: ""; position: absolute; inset: 40px; border-radius: 50%; border: 1px dashed var(--linie-2); }
.start-instrument::after { content: ""; position: absolute; inset: 90px; border-radius: 50%; background: conic-gradient(from 200deg, var(--akzent-weich), transparent 30%); }
.start-fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 560px; }
.start-fakten div { padding: 12px 14px; border-radius: var(--r-m); background: var(--s1); border: 1px solid var(--linie); }
.start-fakten b { display: block; font-size: var(--t-xl); font-weight: 650; }
.start-fakten span { font-size: var(--t-xs); color: var(--ink-3); }
.start-rechts { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.anmelde-karte { width: min(420px, 100%); padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.knopf.discord { background: #5865f2; color: #fff; border-color: transparent; box-shadow: 0 10px 30px -12px rgba(88, 101, 242, 0.7); }
.knopf.discord:hover { background: #4752c4; }
@media (max-width: 900px) { .start-buehne { grid-template-columns: 1fr; } .start-links { border-right: 0; border-bottom: 1px solid var(--linie); } }

.server-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--a-4); }
.server-karte { padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.server-karte .kopfzeile { display: flex; align-items: center; gap: 14px; }
.server-karte .bild { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-weight: 700; background: var(--sv); flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.server-karte .name { font-weight: 620; font-size: var(--t-l); }
.server-karte .id { font-family: var(--mono); font-size: var(--t-2xs); color: var(--ink-3); }
.server-karte .zahlen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.server-karte .zahlen div { padding: 8px 10px; border-radius: var(--r-s); background: var(--s2); }
.server-karte .zahlen b { display: block; font-size: var(--t-l); font-weight: 640; }
.server-karte .zahlen span { font-size: var(--t-xs); color: var(--ink-3); }
.server-karte .fuss { display: flex; align-items: center; gap: 8px; }
.server-karte .fuss .knopf { margin-left: auto; }
.server-karte.fehlt { border-style: dashed; background: transparent; }

.ue-held { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--a-4); }
.ue-held .bereit { display: flex; align-items: center; gap: var(--a-6); padding: var(--a-6); }
.ue-held .bereit .info { flex: 1; min-width: 0; }
.ue-held .bereit .held-zahl small { font-size: var(--t-xl); color: var(--ink-3); font-weight: 560; letter-spacing: -0.01em; margin-left: 4px; }
.ue-held .bereit p { color: var(--ink-2); margin-top: 6px; max-width: 46ch; }
.ue-held .bereit .dg-legende { margin-top: 14px; }
.ue-checkliste .schritt .knopf { margin-left: auto; align-self: center; }
.mod-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.mod-kachel { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-m); background: var(--s1); border: 1px solid var(--linie); transition: border-color var(--d-mittel), background var(--d-mittel), transform var(--d-mittel) var(--e-aus); }
.mod-kachel:hover { border-color: var(--linie-2); background: var(--s2); transform: translateY(-1px); }
.mod-kachel .sym { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--s3); color: var(--ink-2); flex: none; }
.mod-kachel .sym svg { width: 18px; height: 18px; }
.mod-kachel.aktiv .sym { background: var(--akzent-weich); color: var(--akzent-text); }
.mod-kachel .t { flex: 1; min-width: 0; }
.mod-kachel .t b { display: block; font-weight: 580; font-size: var(--t-m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mod-kachel .t span { font-size: var(--t-xs); color: var(--ink-3); }
.ue-system .zeile { justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--linie); font-size: var(--t-m); }
.ue-system .zeile:first-child { border-top: 0; }
.ue-system .zeile b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ue-schnell { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ue-schnell a { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--r-m); background: var(--s2); border: 1px solid var(--linie); font-size: var(--t-m); font-weight: 560; transition: border-color var(--d-mittel), background var(--d-mittel); }
.ue-schnell a:hover { border-color: color-mix(in srgb, var(--akzent) 40%, var(--linie)); background: var(--s3); }
.ue-schnell a svg { width: 18px; height: 18px; color: var(--akzent-text); }
@media (max-width: 1100px) { .ue-held { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .ue-held .bereit { flex-direction: column; align-items: flex-start; } .ue-schnell { grid-template-columns: 1fr; } }

.ue-kopfkarte { display: flex; align-items: center; gap: var(--a-6); padding: var(--a-6); flex-wrap: wrap; }
.ue-kopf-links { display: flex; align-items: center; gap: var(--a-4); flex: 1 1 360px; min-width: 0; }
.ue-kopf-links .bild { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: var(--t-xl); font-weight: 700; background: var(--sv); flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 12px 30px -16px rgba(0, 0, 0, 0.8); }
.ue-kopf-links h2 { font-size: var(--t-2xl); margin: 4px 0 4px; }
.ue-kopf-rechts { display: flex; align-items: center; gap: var(--a-5); }
.ue-ring-zahl { font-size: 40px; }
.ue-note { display: flex; flex-direction: column; gap: 6px; }
.ue-note-wert { font-size: var(--t-2xl); font-weight: 650; letter-spacing: -0.02em; }
.ue-note-wert.gut { color: var(--gut); }
.ue-note-wert.warn { color: var(--warn); }
.ue-note-wert.krit { color: var(--krit); }
.ue-panel { padding-top: var(--a-5); }
.ue-spalten { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: var(--a-4); align-items: start; margin-bottom: var(--a-4); }
.ue-rechte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ue-recht { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--r-m); background: var(--s2); border: 1px solid var(--linie); }
.ue-recht b { display: block; font-weight: 600; }
.ue-recht .leise { font-size: var(--t-s); }
.ue-recht.weg { border-color: color-mix(in srgb, var(--krit) 45%, var(--linie)); background: linear-gradient(180deg, var(--krit-weich), transparent), var(--s2); }
.ue-link { border-radius: var(--r-s); padding-left: 6px !important; padding-right: 6px !important; margin: 0 -6px; transition: background var(--d-schnell); }
.ue-link:hover { background: var(--s2); }
@media (max-width: 1000px) { .ue-spalten { grid-template-columns: 1fr; } .ue-rechte { grid-template-columns: 1fr; } }

.zeitlinie { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--a-4); max-width: 920px; }
.zl-eintrag { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 18px; align-items: start; }
.zl-version { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding-top: 14px; position: sticky; top: calc(var(--kopf-h) + 16px); }
.zl-version .mono { font-size: var(--t-l); color: var(--ink-1); }
.up-gruppe { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; }
.up-gruppe ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); }
.up-gruppe code { font-size: var(--t-xs); }
@media (max-width: 720px) {
  .zl-eintrag { grid-template-columns: 1fr; gap: 8px; }
  .zl-version { flex-direction: row; align-items: center; position: static; padding-top: 0; }
  .up-gruppe { grid-template-columns: 1fr; gap: 6px; }
}