/* ---------- Design-Variablen ---------- */
:root{
  --brand:#0a66c2;
}
/* Helles Theme (Standard) */
[data-theme="light"]{
  --text:#000000;
  --text-muted:#444444;
  --card-bg:#ffffffcc;
  --border:#00000022;
  --gh-bg:#f6f8fa;
  --gh-fg:#24292f;
  --gh-border:#d0d7de;
  --focus:#00000055;
  --btn-shadow:#0a66c288;
  --btn-shadow-hover:#0a66c2aa;
}
/* Dunkles Theme */
[data-theme="dark"]{
  --text:#ffffff;
  --text-muted:#e9e9f0cc;
  --card-bg:#0b0b14cc;
  --border:#ffffff22;
  --gh-bg:#0f172a;
  --gh-fg:#e5e7eb;
  --gh-border:#1f2937;
  --focus:#ffffffaa;
  --btn-shadow:#0a66c288;
  --btn-shadow-hover:#0a66c2aa;
}

/* --- Layout wie im Original (wichtig für Startseite) --- */
*, *::before, *::after{ box-sizing:border-box; }
html, body { height:100%; overflow-x:hidden; } /* ← zurück zu deinem Original */

body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  background:red;                    /* kein PNG mehr, nur Farbe */
  display:grid; place-items:center;  /* Card bleibt mittig wie vorher */
  padding:20px;
}
body::before{
  content:""; position:fixed; inset:0;
  background: radial-gradient(1200px 800px at 20% 20%, transparent 0 60%, #00000080 100%),
              linear-gradient(180deg, #00000040, #00000066);
  pointer-events:none;
}

.card{
  position:relative; z-index:1;
  width:100%; max-width:980px;               /* Original */
  padding:clamp(18px, 3.5vw, 40px);
  border-radius:28px;
  background:var(--card-bg);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px #00000055, inset 0 0 0 1px var(--border);
  display:flex; flex-direction:column; align-items:center; gap:clamp(16px, 3vw, 36px);
  text-align:center;
}
@media (min-width: 720px){
  .card{ flex-direction:row; align-items:center; text-align:left; }
}

/* Toggle-Leiste oben rechts im Card-Header */
.controls{
  position:absolute; top:12px; right:12px; z-index:5;
  display:flex; gap:8px; align-items:center;
}
.toggle{
  border:1px solid #0000001a; background:#ffffffd9; color:#24292f;
  border-radius:10px; padding:.42rem .6rem; line-height:1;
  font-size:.85rem; display:inline-flex; align-items:center; gap:.45rem;
  cursor:pointer; user-select:none; text-decoration:none;
}
[data-theme="dark"] .toggle{
  background:#0b0b14cc; color:#e5e7eb; border-color:#ffffff22;
}
.toggle svg{ width:1.05em; height:1.05em; display:block; }

/* Avatar */
.avatar{
  width:clamp(96px, 18vw, 160px);
  aspect-ratio:1/1;
  border-radius:50%; overflow:hidden; flex:0 0 auto;
  border:2px solid var(--border);
  box-shadow:0 10px 30px #0000006a;
  background:#ffffff12;
  display:grid; place-items:center; font-weight:700; letter-spacing:.02em;
  font-size:clamp(24px, 4.5vw, 36px); color:var(--text-muted);
}
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.content{ min-width:0; flex:1 1 auto; color:var(--text); }

h1{
  margin:0 0 .35em 0;
  font-size:clamp(28px, 6.2vw, 56px);
  line-height:1.08;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; /* Original */
}
p{ margin:.2em 0 1.1em 0; color:var(--text-muted); font-size:clamp(14px, 2.4vw, 18px); }

/* --- Codeblock + dezente Copy-UI --- */
.code-wrap{ position:relative; margin:1.2rem 0 0 0; }
pre{
  margin:0; background:var(--gh-bg); color:var(--gh-fg);
  border:1px solid var(--gh-border); border-radius:12px;
  overflow:auto; text-align:left; box-shadow: inset 0 1px 0 #ffffff33;
  padding:.9rem 0; max-width:100%;
  position:relative; z-index:1;
}
code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.95rem; counter-reset: line; display:block;
}
code .line{
  display:block; padding:0 1rem 0 6rem; position:relative; white-space:pre;
}
code .line::before{
  counter-increment: line; content: counter(line);
  position:absolute; left:0; width:4rem; text-align:right;
  color:#6e7781; user-select:none;
  border-right:1px solid var(--gh-border);
  padding-right:.5rem;
  margin-right:1rem;
}

/* Toolbar über dem Codeblock */
.code-actions{
  position:absolute; top:.5rem; right:.5rem;
  display:flex; gap:.4rem; align-items:center;
  opacity:0; transform: translateY(-2px);
  transition: opacity .15s ease, transform .15s ease;
  z-index:3;
  pointer-events:auto;
}
.code-wrap:focus-within .code-actions,
.code-wrap:hover .code-actions{ opacity:1; transform:none; }

.mode{
  border:1px solid #0000001a; background:#ffffffd9; color:#24292f;
  font-size:.8rem; line-height:1; padding:.28rem .45rem; border-radius:8px;
}
[data-theme="dark"] .mode{
  border-color:#ffffff22; background:#0b0b14cc; color:#e5e7eb;
}

.ghost{
  border:1px solid #0000001a; background:#ffffffd9; color:#24292f;
  border-radius:8px; padding:.32rem .5rem; line-height:1;
  font-size:.8rem; display:inline-flex; align-items:center; gap:.35rem;
  cursor:pointer;
}
[data-theme="dark"] .ghost{
  border-color:#ffffff22; background:#0b0b14cc; color:#e5e7eb;
}
.ghost svg{ width:1em; height:1em; display:block; }
.ghost:disabled{ opacity:.6; cursor:default; }

@media (max-width: 420px){
  .ghost span{ display:none; }
}

.buttons{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:1.2rem; }
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.85em 1.1em; border-radius:14px;
  background:var(--brand); color:white; text-decoration:none; font-weight:600;
  box-shadow: 0 6px 18px var(--btn-shadow), inset 0 0 0 1px #ffffff22;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px var(--btn-shadow-hover), inset 0 0 0 1px #ffffff33; }
.btn svg{ width:1.1em; height:1.1em; display:block; }

:focus-visible{ outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce){ .btn{ transition:none; } }

/* --- Responsive Fix wie im Original --- */
@media (max-width: 720px){
  .controls{
    position: static;
    align-self: flex-end;
    margin: -6px 0 8px 0;
  }
  .card{ padding-top: clamp(18px, 3.5vw, 40px); }
}
@media (max-width: 420px){
  .controls{ gap:6px; }
  .toggle{ padding:.36rem .54rem; font-size:.82rem; }
  .toggle span{ display:none; }
}

/* Dezent gestaltete Links im Footer */
.legal-link {
  font-size: 0.8rem;
  color: var(--text-muted);
  opacity: 0.8;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.legal-link:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ---------- NUR für Legal-Seiten (scoped via <html class="legal-page">) ---------- */

/* Rechts kein Abschneiden: erlaub horizontales Scrollen notfalls */
html.legal-page { overflow-x:auto; }

/* Card nie breiter als Viewport + etwas Luft oben/unten auf Mobile */
html.legal-page body { padding:20px; } /* gleiche Grund-Optik wie Startseite */
html.legal-page .card{
  width:min(980px, 100%);
  margin-inline:auto;
}

/* Inhalt bricht sauber um, Titel NICHT ellipsisieren */
html.legal-page h1{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}

/* Container für Rechtstexte mit sicheren Seitenabständen */
html.legal-page .legal-container{
  width:100%;
  max-width:680px;
  margin:0 auto;
  padding-inline: clamp(12px, 5vw, 24px);
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* --- Hilfsklassen für Accessibility & Footer (vermeidet Inline-Styles) --- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.site-footer {
  margin-top: 2rem;
  text-align: center;
}

/* optional: schmaler Content-Block ohne Inline-Style */
.content-narrow {
  max-width: 680px;
  margin: 0 auto;
}