/* Link-Seite Dennis Goldhammer - Designwechsel DG 19.09.2026.
   Zwei Ebenen:
   - DG-Container (diese Seite): keine Signalfarbe. Mitternacht und Papier,
     Linien aus Papier mit Alpha.
   - Programm-Ebene: jedes Programm hat eine eigene Signalfarbe. Hier nur OPM,
     und nur im Hero. Sonst traegt nichts Farbe.
   Alle Farbwerte stehen in token.css - hier nur Verweise.
   Alles rechtwinklig. Kein Schein, keine Animation. */
@import url("/stil/token.css");

:root{
  --schrift: 'Inter', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; border-radius:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100vh; min-height:100dvh;
  background:var(--mitternacht); color:var(--papier);
  font-family:var(--schrift); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--papier); text-underline-offset:3px; }
:focus-visible{ outline:2px solid var(--papier); outline-offset:3px; }

.seite{ width:100%; max-width:560px; margin:0 auto; padding:0 16px; }

/* ── Kopf ── */
.kopf{ text-align:center; padding:56px 0 28px; }
.portraet{
  width:96px; height:96px; margin:0 auto 20px; display:grid; place-items:center; overflow:hidden;
  background:var(--mitternacht); border:1px solid var(--linie-stark);
  font-weight:600; font-size:30px; letter-spacing:.02em; color:var(--papier);
}
.portraet img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); }
.name{ margin:0; font-size:clamp(28px,7.5vw,34px); font-weight:700; letter-spacing:-.02em; line-height:1.1; }
.versal{ margin:14px 0 0; font-family:var(--schrift); font-weight:200; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--papier); }
.zeile{ margin:10px 0 0; color:var(--leise); font-size:15px; }

/* ── Hero: Programm-Ebene OPM, das einzige Element mit Farbe und Glow ── */
.hero{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  margin:0 0 32px; padding:28px 20px 26px; text-align:center;
  background:var(--opm-grund); border:1px solid var(--opm-violet-500); color:var(--papier); text-decoration:none;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--opm-violet-500) 45%, transparent), 0 0 32px color-mix(in srgb, var(--opm-violet-500) 40%, transparent);
  transition:box-shadow .2s, border-color .2s;
}
a.hero:hover{ box-shadow:0 0 0 1px var(--opm-violet-500), 0 0 44px color-mix(in srgb, var(--opm-violet-500) 55%, transparent); }
.hero-kicker{ font-weight:300; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--opm-violet-300); }
.hero-titel{ font-size:clamp(24px,6.5vw,30px); font-weight:700; line-height:1.15; letter-spacing:-.02em; }
.hero-sub{ font-size:15px; }
.hero-meta{ margin-top:6px; font-size:13px; color:var(--opm-violet-300); letter-spacing:.02em; }

/* ── Gruppen ── */
.gruppe{ margin:0 0 28px; }
.gruppe-titel{ margin:0 0 12px; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--leise); text-align:center; }

.knoepfe{ display:grid; gap:8px; }
.knopf{
  display:flex; align-items:center; gap:12px; min-height:56px; padding:14px 18px;
  background:var(--mitternacht); border:1px solid var(--linie);
  color:var(--papier); text-decoration:none; font-size:16px;
  transition:border-color .2s;
}
.knopf svg{ flex:none; color:var(--papier); }
.knopf-mitte{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.knopf-label{ font-weight:500; }
.knopf-text{ font-size:14px; color:var(--leise); line-height:1.4; }
.knopf-status{ flex:none; padding:3px 10px; border:1px solid var(--linie-stark); font-size:12px; color:var(--leise); white-space:nowrap; }
a.knopf:hover{ border-color:var(--linie-stark); }

/* Kacheln: ein Raster, die Fugen sind 1px Grund - keine einzelnen Karten */
.raster{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; background:var(--linie); border:1px solid var(--linie); }
.kachel{
  display:flex; flex-direction:column; justify-content:flex-end; gap:2px; min-height:88px; padding:14px;
  background:var(--mitternacht); color:var(--papier); text-decoration:none;
  transition:background .2s;
}
.kachel-label{ font-weight:600; font-size:16px; overflow-wrap:anywhere; }
.kachel-unter{ font-size:13px; color:var(--leise); }
a.kachel:hover{ background:var(--mitternacht-hover); }

/* Eintraege ohne Ziel: sichtbar, aber erkennbar kein Link */
.knopf--ohne-ziel, .kachel--ohne-ziel, .hero--ohne-ziel{ opacity:.55; cursor:default; }
.knopf--ohne-ziel{ border-style:dashed; }

/* ── Fuss ── */
.fuss{ padding:12px 0 40px; text-align:center; }
/* Aufrecht wie die Rollenzeile im Kopf (DG 18.09.) - nichts ist kursiv. */
.fuss-zeile{ margin:0 0 12px; font-family:var(--schrift); font-weight:200; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--papier); }
.fuss-recht{ margin:0; font-size:13px; color:var(--leise); }
.fuss-recht span{ margin:0 6px; }
.fuss-recht a, .recht-links a{ color:var(--leise); }
.fuss-recht a:hover, .recht-links a:hover{ color:var(--papier); }
.recht-links a{ margin:0 10px; font-size:14px; }

/* ── Rechtsseiten ── */
.recht{ padding-top:40px; }
.recht h1{ font-size:clamp(26px,7vw,34px); margin:0 0 20px; letter-spacing:-.02em; }
.recht h2{ font-size:17px; margin:26px 0 8px; }
.zurueck{ margin:0 0 24px; font-size:14px; }
.platzhalter{ margin:0 0 16px; padding:16px; border:1px dashed var(--linie-stark); color:var(--leise); }
.platzhalter strong{ color:var(--papier); }

@media (prefers-reduced-motion: reduce){
  .hero, .knopf, .kachel{ transition:none; }
}
.leer{ min-height:1.5em; margin:0; }