/* =====================================================
   MpLinks – Design-System der öffentlichen Seite.
   Kern: Themes setzen NUR CSS-Variablen, die Bausteine lesen sie. So kommt eine
   neue Vorlage ohne eine einzige neue Regel für Avatar/Button/Icon aus.
   ===================================================== */

/* ── Grundwerte (Basis "minimal"), gelten bis ein Theme sie überschreibt ── */
.bl {
  --bl-accent:        #2563eb;
  --bl-bg:            #f4f5f7;
  --bl-card-bg:       transparent;
  --bl-text:          #16181d;
  --bl-name-color:    #16181d;
  --bl-muted:         #6b7280;
  --bl-btn-bg:        #ffffff;
  --bl-btn-text:      #16181d;
  --bl-btn-border:    rgba(0,0,0,.08);
  --bl-btn-shadow:    0 1px 2px rgba(0,0,0,.06);
  --bl-btn-hover-bg:  #eef0f3;
  --bl-btn-hover-text:#16181d;
  --bl-radius:        16px;
  --bl-social-size:   42px;
  --bl-social-svg:    22px;
  --bl-link-icon:     20px;

  min-height: 100vh;
  background: var(--bl-bg);
  color: var(--bl-text);
  font-family: 'Lato', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Die sechs Vorlagen ──────────────────────────────
   Jede setzt nur Variablen; Besonderheiten (Verlauf, Glow, Blur) folgen darunter. */

.bl-minimal { }   /* = Grundwerte */

.bl-dark {
  --bl-accent:#3b82f6; --bl-bg:#0d1117; --bl-text:#f3f4f6; --bl-muted:#9aa3b2;
  --bl-btn-bg:#1c2128; --bl-btn-hover-bg:#262d36; --bl-btn-text:#f3f4f6;
  --bl-btn-hover-text:#f3f4f6; --bl-name-color:#f3f4f6;
  --bl-btn-border:rgba(255,255,255,.08);
  --bl-btn-shadow:0 1px 2px rgba(0,0,0,.4);
}

.bl-gradient {
  --bl-accent:#2563eb; --bl-bg:#5b21b6; --bl-text:#ffffff; --bl-muted:#e9d5ff;
  --bl-btn-bg:#7c3aed; --bl-btn-hover-bg:#8b5cf6; --bl-btn-text:#ffffff;
  --bl-btn-hover-text:#ffffff; --bl-name-color:#ffffff;
  --bl-btn-border:rgba(255,255,255,.22);
  --bl-btn-shadow:0 2px 10px rgba(0,0,0,.18);
  background: linear-gradient(160deg, var(--bl-accent), #7e22ce 55%, #db2777);
}
/* Halbtransparente Buttons über dem Verlauf – nur bei "solid" (outline/soft
   bringen ihre eigene Optik mit). */
.bl-gradient .bl-link.is-solid {
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.bl-gradient .bl-link.is-solid:hover { background: rgba(255,255,255,.26); }
/* Hervorgehoben: weiß gefüllt mit Akzent-Text (statt Akzent auf Verlauf) */
.bl-gradient .bl-link.is-hl {
  background: #ffffff; color: var(--bl-accent); border-color: transparent;
}
.bl-gradient .bl-link.is-hl:hover { background: #ffffff; color: var(--bl-accent); }

.bl-neon {
  --bl-accent:#22d3ee; --bl-bg:#060a0d; --bl-text:#e8fff7; --bl-muted:#8fb6ad;
  --bl-btn-bg:#0c171d; --bl-btn-hover-bg:#122029; --bl-btn-text:#e8fff7;
  --bl-btn-hover-text:#e8fff7; --bl-name-color:#e8fff7;
  --bl-btn-border: var(--bl-accent);
  --bl-btn-shadow: 0 0 0 1px color-mix(in srgb, var(--bl-accent) 40%, transparent),
                   0 0 14px color-mix(in srgb, var(--bl-accent) 22%, transparent);
}
.bl-neon .bl-name { text-shadow: 0 0 12px color-mix(in srgb, var(--bl-accent) 45%, transparent); }
.bl-neon .bl-avatar {
  box-shadow: 0 0 0 2px var(--bl-accent),
              0 0 22px color-mix(in srgb, var(--bl-accent) 45%, transparent);
}
.bl-neon .bl-link:hover {
  box-shadow: 0 0 0 1px var(--bl-accent),
              0 0 20px color-mix(in srgb, var(--bl-accent) 38%, transparent);
}
.bl-neon .bl-social {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bl-accent) 35%, transparent);
}

.bl-glass {
  --bl-accent:#7c3aed; --bl-bg:#c4b5fd; --bl-text:#1a2233; --bl-muted:#4b5563;
  --bl-btn-bg:rgba(255,255,255,.55); --bl-btn-hover-bg:rgba(255,255,255,.75);
  --bl-btn-text:#1a2233; --bl-btn-hover-text:#1a2233; --bl-name-color:#1a2233;
  --bl-card-bg: rgba(255,255,255,.35);
  --bl-btn-border: rgba(255,255,255,.6);
  --bl-btn-shadow: 0 4px 18px rgba(31,41,55,.12);
  background: linear-gradient(135deg, #a5b4fc, #f0abfc 50%, #fcd34d);
}
.bl-glass .bl-card, .bl-glass .bl-link, .bl-glass .bl-social {
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.bl-glass .bl-card { background: var(--bl-card-bg); border-radius: 22px; padding: 26px 18px; }

.bl-paper {
  --bl-accent:#b4622d; --bl-bg:#f3e9d8; --bl-text:#3a2f25; --bl-muted:#8a7a68;
  --bl-btn-bg:#fffaf2; --bl-btn-hover-bg:#ffffff; --bl-btn-text:#3a2f25;
  --bl-btn-hover-text:#3a2f25; --bl-name-color:#3a2f25;
  --bl-btn-border: #e7dcca;
  --bl-btn-shadow: 0 2px 0 #e7dcca;         /* harte Offset-Schatten statt weicher */
  font-family: 'Georgia', 'Times New Roman', serif;
}
.bl-paper .bl-link:hover { box-shadow: 0 4px 0 #e7dcca; }
.bl-paper .bl-social { box-shadow: 0 2px 0 #e7dcca; }

/* ── Button-Formen ──────────────────────────────────── */
.bl-shape-rounded { --bl-radius: 16px; }
.bl-shape-pill    { --bl-radius: 999px; }
.bl-shape-square  { --bl-radius: 4px; }

/* ── Icon-Größen (Kreis / SVG / Link-Icon) ──────────── */
.bl-icons-small  { --bl-social-size:34px; --bl-social-svg:18px; --bl-link-icon:16px; }
.bl-icons-medium { --bl-social-size:42px; --bl-social-svg:22px; --bl-link-icon:20px; }
.bl-icons-large  { --bl-social-size:52px; --bl-social-svg:28px; --bl-link-icon:26px; }
.bl-icons-xlarge { --bl-social-size:64px; --bl-social-svg:36px; --bl-link-icon:32px; }

/* ── Aufbau ─────────────────────────────────────────── */
.bl-wrap { max-width: 580px; margin: 0 auto; padding: 44px 18px 56px; }
.bl-card { text-align: center; }

.bl-avatar-box { display: flex; justify-content: center; margin-bottom: 14px; }
.bl-avatar {
  width: 104px; height: 104px; border-radius: 50%; object-fit: cover;
  display: block; background: color-mix(in srgb, var(--bl-text) 10%, transparent);
}
/* Platzhalter: erster Buchstabe des Namens */
.bl-avatar-ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; font-weight: 800; color: #fff;
  background: var(--bl-accent);
}

.bl-name-row { display: flex; align-items: center; justify-content: center; gap: 6px; }
.bl-name { font-size: 22px; font-weight: 800; color: var(--bl-name-color); margin: 0; }
.bl-verified { width: 19px; height: 19px; color: var(--bl-accent); flex-shrink: 0; }

.bl-bio {
  color: var(--bl-muted); font-size: 14.5px; line-height: 1.6;
  margin: 8px auto 0; max-width: 46ch; white-space: pre-wrap;   /* Umbrüche bleiben */
}

/* Social-Kreise */
.bl-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px 0; }
.bl-social {
  width: var(--bl-social-size); height: var(--bl-social-size);
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bl-btn-bg); color: var(--bl-btn-text);
  border: 1px solid var(--bl-btn-border);
  text-decoration: none; transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.bl-social svg { width: var(--bl-social-svg); height: var(--bl-social-svg); display: block; }
.bl-social:hover { background: var(--bl-btn-hover-bg); }

/* Zwischenüberschrift */
.bl-heading {
  color: var(--bl-muted); font-size: 12px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  margin: 26px 0 10px; text-align: left;
}

/* Link-Button */
.bl-links { display: flex; flex-direction: column; gap: 11px; margin-top: 0; }
/* Die erste Zwischenüberschrift direkt nach den Icons braucht keinen extra
   Abstand oben – sonst ist der Abstand unter den Icons größer als darüber. */
.bl-links > .bl-heading:first-child { margin-top: 0; }
.bl-link {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--bl-radius);
  background: var(--bl-btn-bg); color: var(--bl-btn-text);
  border: 1px solid var(--bl-btn-border); box-shadow: var(--bl-btn-shadow);
  text-decoration: none; font-size: 15px; font-weight: 600;
  transition: background .16s ease, box-shadow .16s ease, color .16s ease, border-color .16s ease;
}
.bl-link:hover {
  background: var(--bl-btn-hover-bg); color: var(--bl-btn-hover-text);
}
.bl-link-icon {
  width: var(--bl-link-icon); height: var(--bl-link-icon);
  font-size: calc(var(--bl-link-icon) * .92); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bl-link-icon svg { width: 100%; height: 100%; display: block; }
.bl-link-title { flex: 1; text-align: center; }
/* Pfeil rechts: rutscht beim Hover nach rechts und wird deutlicher */
.bl-chev {
  width: 16px; height: 16px; flex-shrink: 0; opacity: .35;
  transition: transform .16s ease, opacity .16s ease;
}
.bl-link:hover .bl-chev { transform: translateX(3px); opacity: .75; }

/* Füllungen */
.bl-link.is-outline {
  background: transparent; border-color: currentColor; box-shadow: none;
}
.bl-link.is-outline:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.bl-link.is-soft {
  background: color-mix(in srgb, var(--bl-accent) 10%, var(--bl-btn-bg));
  border-color: color-mix(in srgb, var(--bl-accent) 22%, transparent);
}
.bl-link.is-soft:hover { background: color-mix(in srgb, var(--bl-accent) 18%, var(--bl-btn-bg)); }

/* Hervorgehoben: Akzentfarbe mit weißem Text */
.bl-link.is-hl {
  background: var(--bl-accent); color: #fff; border-color: transparent;
}
.bl-link.is-hl:hover { background: color-mix(in srgb, var(--bl-accent) 85%, #000); color: #fff; }

/* Fußzeile */
.bl-footer { margin-top: 34px; text-align: center; color: var(--bl-muted); font-size: 12.5px; }
.bl-legal { display: flex; justify-content: center; gap: 14px; margin-top: 7px; flex-wrap: wrap; }
.bl-legal a { color: var(--bl-muted); text-decoration: none; }
.bl-legal a:hover { text-decoration: underline; }

.bl-empty { text-align: center; color: var(--bl-muted); padding: 40px 0; }

/* Tastatur-Bedienung sichtbar machen */
.bl-link:focus-visible, .bl-social:focus-visible, .bl-legal a:focus-visible {
  outline: 2px solid var(--bl-accent); outline-offset: 3px;
}

/* Wer keine Bewegung will, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .bl-link, .bl-social, .bl-chev { transition: none !important; }
  .bl-link:hover, .bl-social:hover { transform: none !important; }
  .bl-link:hover .bl-chev { transform: none !important; }
}

@media (max-width: 480px) {
  .bl-wrap { padding: 32px 14px 44px; }
  .bl-avatar { width: 88px; height: 88px; }
  .bl-avatar-ph { font-size: 34px; }
  .bl-name { font-size: 19px; }
}

/* Twitch-Live-Anzeige (Modul "twitch", falls vorhanden) */
.bl-tw-row { display: flex; justify-content: center; margin-top: 22px; }

/* Twitch-Live-Player: nur sichtbar, wenn live. 16:9, abgerundet wie die Karte. */
.bl-tw-player-row { margin-top: 22px; }
.bl-tw-player { width: 100%; border-radius: 14px; overflow: hidden; background: #000; }
.bl-tw-player iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Steht der Player oben, sitzt der „Folgen"-Button mit etwas Luft darunter und
   bekommt zum Folgenden wieder Abstand. */
.bl-tw-player-row + .bl-tw-row { margin-top: 14px; }