/* Global color system and accessibility-safe light/dark mode */
:root{
  --on-accent:#09090b;
  --on-accent2:#ffffff;
  --accent-readable:#ffff00;
  --accent2-readable:#a98cff;
  --accent-soft:#292909;
  --accent2-soft:#21182f;
  --surface-low:#0d0d10;
  --surface-high:#17171c;
  --input-bg:#0c0c0f;
  --shadow:rgba(0,0,0,.28);
  --focus-ring:color-mix(in srgb,var(--accent) 48%,transparent);
}
html[data-theme="dark"]{
  --theme-bg:#09090b;
  --theme-panel:#111114;
  --theme-panel2:#17171b;
  --theme-card:#121216;
  --theme-card2:#17171c;
  --theme-text:#f7f7f8;
  --theme-muted:#a5a5af;
  --theme-line:rgba(255,255,255,.11);
  --theme-input:#0c0c0f;
  --theme-surface-low:#0d0d10;
  --theme-surface-high:#1a1a20;
  --theme-shadow:rgba(0,0,0,.30);
}
html[data-theme="light"]{
  --theme-bg:#f6f6f3;
  --theme-panel:#ffffff;
  --theme-panel2:#ededeb;
  --theme-card:#ffffff;
  --theme-card2:#eeeeec;
  --theme-text:#111114;
  --theme-muted:#5e5e68;
  --theme-line:rgba(14,14,18,.13);
  --theme-input:#ffffff;
  --theme-surface-low:#f0f0ed;
  --theme-surface-high:#e8e8e5;
  --theme-shadow:rgba(25,25,35,.11);
}
html[data-theme] body{
  --bg:var(--theme-bg);
  --panel:var(--theme-panel);
  --panel2:var(--theme-panel2);
  --card:var(--theme-card);
  --card2:var(--theme-card2);
  --text:var(--theme-text);
  --muted:var(--theme-muted);
  --line:var(--theme-line);
  --input-bg:var(--theme-input);
  --surface-low:var(--theme-surface-low);
  --surface-high:var(--theme-surface-high);
  --shadow:var(--theme-shadow);
  background-color:var(--bg);
  color:var(--text);
}
html[data-theme="light"] ::selection{background:var(--accent);color:var(--on-accent)}
html[data-theme="dark"] ::selection{background:var(--accent);color:var(--on-accent)}
.primary,.savebtn,.login-card button,.notice a,.manifesto-inner,.bio-link.featured,.block-link.featured{
  color:var(--on-accent)!important;
}
.section-kicker,.timeline-year,.step-label,header small,.logo span,.aside-brand>span,.avatar span,.badge{
  color:var(--accent-readable)!important;
}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--focus-ring)!important;
  outline-offset:2px;
}
.bio-icon{
  width:1em;height:1em;display:inline-flex;align-items:center;justify-content:center;
  line-height:1;vertical-align:-.125em;flex:0 0 auto;color:currentColor;
}
.bio-icon>svg{width:100%;height:100%;display:block}
.bio-icon[data-icon-status="error"]::before{content:"•";font-weight:900}
.theme-toggle-global{
  position:fixed;right:16px;top:16px;z-index:9999;width:44px;height:44px;
  display:grid;place-items:center;border:1px solid var(--line);border-radius:14px;
  background:color-mix(in srgb,var(--panel) 82%,transparent);backdrop-filter:blur(18px);
  color:var(--text);cursor:pointer;box-shadow:0 12px 34px var(--shadow);
}
.theme-toggle-global .bio-icon,[data-theme-toggle] .bio-icon{width:18px;height:18px}
html[data-theme="light"] .noise{opacity:.012}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}/* Iconify icons inherit the current accessible foreground color by default. */
.bio-icon:not([data-preserve-color]) svg [fill]:not([fill="none"]){fill:currentColor!important}
.bio-icon:not([data-preserve-color]) svg [stroke]:not([stroke="none"]){stroke:currentColor!important}

/* ===== Icons: sofort sichtbar, vollständig im Rahmen, kontrastreich ===== */
.bio-icon{
  min-width:1em;
  min-height:1em;
  overflow:visible!important;
  color:currentColor;
}
.bio-icon>svg{
  width:90%!important;
  height:90%!important;
  max-width:90%!important;
  max-height:90%!important;
  display:block!important;
  overflow:visible!important;
  margin:auto!important;
}
.bio-icon[data-icon-status="loading"]{opacity:.78}
.bio-icon[data-icon-status="ready"]{opacity:1}
.bio-icon[data-icon-status="fallback"]{opacity:.92}
.bio-icon[data-icon-status="loading"]>svg{animation:bioIconPulse 1.1s ease-in-out infinite}
@keyframes bioIconPulse{50%{opacity:.48}}

.circle,.social-icons a,.nav nav a,.theme-button,.theme-toggle-global,
.icon-picker-button,.icon-result,.item-icon,.timeline-item-icon,.project-card-icon{
  color:var(--text)!important;
}
.primary,.nav-linktree,.savebtn,.block-link.featured,.bio-link.featured,.manifesto-inner{
  color:var(--on-accent)!important;
}
.primary .bio-icon,.nav-linktree .bio-icon,.savebtn .bio-icon,
.block-link.featured .bio-icon,.bio-link.featured .bio-icon,.manifesto-inner .bio-icon{
  color:var(--on-accent)!important;
}

/* ===== First-paint correctness ===== */
html.bio-preparing *,html.bio-preparing *::before,html.bio-preparing *::after{
  transition:none!important;
  animation-play-state:paused!important;
}
.bio-icon{
  box-sizing:border-box;
  padding:.06em;
}
.bio-icon>svg{
  width:88%!important;
  height:88%!important;
  max-width:88%!important;
  max-height:88%!important;
  object-fit:contain;
}


/* ===== Stability V10: semantic interactive surfaces ===== */
:root{
  --featured-bg:var(--accent);
  --featured-text:var(--on-accent);
  --featured-border:var(--accent);
  --featured-icon-bg:color-mix(in srgb,var(--featured-text) 12%,transparent);
  --primary-bg:var(--accent);
  --primary-text:var(--on-accent);
}

/* Primary actions: background and foreground always move together. */
.primary,
.savebtn,
.login-card button,
.nav-linktree,
.notice a{
  background:var(--primary-bg)!important;
  color:var(--primary-text)!important;
  border-color:color-mix(in srgb,var(--primary-bg) 72%,var(--line))!important;
}
.primary *,
.savebtn *,
.login-card button *,
.nav-linktree *,
.notice a *{
  color:inherit!important;
}

/* Featured links: beat every glass/outline/gradient card rule. */
body[data-cards] .bio-link.featured,
.bio-link.featured,
body[data-cards] .block-link.featured,
.block-link.featured{
  background:linear-gradient(110deg,var(--featured-bg),color-mix(in srgb,var(--accent2) 18%,var(--featured-bg)))!important;
  color:var(--featured-text)!important;
  border-color:var(--featured-border)!important;
  box-shadow:0 16px 46px color-mix(in srgb,var(--featured-bg) 16%,transparent)!important;
}
.bio-link.featured *,
.block-link.featured *{
  color:inherit!important;
}
.bio-link.featured .bio-link-icon,
.block-link.featured .block-icon{
  background:var(--featured-icon-bg)!important;
  color:var(--featured-text)!important;
}
.bio-link.featured .bio-icon,
.block-link.featured .bio-icon,
.bio-link.featured svg,
.block-link.featured svg{
  color:var(--featured-text)!important;
}

/* Manifesto/accent panels get matching foreground too. */
.manifesto-inner{
  background:var(--featured-bg)!important;
  color:var(--featured-text)!important;
}
.manifesto-inner *{color:inherit!important}

/* Generic icon rendering is inherited from its actual surface. */
.bio-icon,
.bio-icon>svg{
  color:inherit!important;
}

/* Light/dark normal surfaces always use theme text, not hard-coded black/white. */
.circle,
.social-icons a,
.socials a,
.project-card,
.bio-link:not(.featured),
.block-link:not(.featured),
.timeline-item-icon,
.project-card-icon,
.item-icon,
.icon-picker-button{
  color:var(--text)!important;
}