/* ===== Base Theme ===== */
:root{
  --fg: #111218;
  --bg: #ffffff;
  --muted: #596074;
  --accent: #0e74d3;
  --line: #e6edf7;
  --card: #f6f9ff;
  --chip: #ffffff;
  --shadow: 0 10px 26px rgba(0,0,0,.18);
  --hero-tint: rgba(10,16,24,.18);
  color-scheme: light;
}
:root[data-theme="dark"]{
  --fg: #e9f0ff;
  --bg: #0b1220;
  --muted: #9fb3cc;
  --accent: #3ea0ff;
  --line: #1b2436;
  --card: #111a2b;
  --chip: #ffffff;
  --shadow: 0 14px 36px rgba(0,0,0,.42);
  --hero-tint: rgba(6,10,14,.52);
  color-scheme: dark;
}

/* ===== Resets ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--fg);background:var(--bg);font:500 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:.18em}
a:focus-visible,button:focus-visible{outline:2px dashed #ffe28a;outline-offset:3px}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:1rem;top:1rem;background:#000;color:#fff;padding:.5rem .75rem;border-radius:.5rem;z-index:1000}

/* ===== Header / Nav ===== */
.head{position:sticky;top:0;z-index:5;display:flex;gap:.8rem;align-items:center;justify-content:space-between;padding:.6rem 1rem;background:color-mix(in srgb, var(--bg), transparent 12%);backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--line)}
.logo{font-weight:800;letter-spacing:.02em;color:var(--fg);text-decoration:none}
.menu{border:0;background:transparent;color:var(--fg);font-size:1.4rem}
.nav{display:flex;gap:.8rem;align-items:center}
.nav a{color:var(--fg);text-decoration:none;padding:.35rem .6rem;border-radius:.6rem}
.nav a:hover{background:color-mix(in srgb, var(--fg), transparent 92%)}
.theme{border:1px solid var(--line);background:transparent;color:var(--fg);padding:.35rem .6rem;border-radius:.6rem}

/* Mobile Nav collapse */
@media (max-width: 760px){
  .nav{display:none}
  .nav.open{display:flex;flex-direction:column;position:absolute;right:1rem;top:3rem;background:color-mix(in srgb, var(--bg), transparent 8%);padding:.6rem;border-radius:.6rem;border:1px solid var(--line)}
}
/* Desktop: Burger ausblenden */
@media (min-width: 992px){
  .menu{display:none}
}

/* ===== Hero ===== */
.hero{position:relative;padding:clamp(48px,8vw,96px) 1rem;text-align:center}
.hero::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:220px;                /* bei Bedarf 160–320 anpassen */
  z-index:0; pointer-events:none;
  background: linear-gradient(to bottom, transparent 100%, var(--bg) 100%);}
.hero > *{position:relative;z-index:1}
.title{margin:0 0 .2rem 0;font-size:clamp(28px,6vw,42px);line-height:1.1}
.tagline,.punch{margin:.25rem 0;color:var(--fg)}
.hero h1,.hero .tagline{ text-shadow:0 1px 2px rgba(0,0,0,.25) }

/* Hintergrundbild-Schicht */
.bg-layer{position:fixed;inset:0;z-index:-1;background-size:cover;background-position:center;opacity:.42;filter:grayscale(100%) contrast(1.1) brightness(.5)}
:root[data-theme="light"] .bg-layer{opacity:.36;filter:grayscale(90%) contrast(1.05) brightness(.82)}

/* Avatar */
.avatar{width:200px;height:200px;border-radius:14px;background:radial-gradient(ellipse at 50% 40%, #fff 0%, #fff0 60%);padding:6px;filter:var(--shadow);margin:0 auto}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:12px;padding:.7rem 1rem;border:1px solid var(--line);background:transparent;color:var(--fg);text-decoration:none;transition:transform .15s ease, filter .15s ease}
.btn.primary{background:linear-gradient(135deg,#4facfe,#00f2fe);border:0;color:#001c2a;font-weight:800}
.btn:hover{transform:translateY(-2px);filter:brightness(1.03)}

/* ===== Sections ===== */
.block{max-width:52rem;margin:0 auto;padding:clamp(24px,6vw,40px) 1rem;border-top:1px solid var(--line)}

#about.block{ border-top: 0 }
.block h2{margin:.2rem 0 .6rem 0;font-size:1.25rem}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem}
.cards li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.9rem}

/* Details / FAQ */
details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.8rem;margin:.6rem 0}
summary{cursor:pointer;font-weight:700}

/* Footer */
.foot{text-align:center;padding:1.4rem 1rem;border-top:1px solid var(--line);color:var(--muted)}

/* === Kontakt: einheitliche Kacheln, hoher Kontrast, mobil/desktop === */
:root{
  --tile-w: 210px;
  --tile-h: 130px;
  --tile-r: 16px;
  --icon: 30px;
  --badge: 42px;
}
:root[data-theme="dark"]{
  /* dunkleres Card-Theme */
  --card: #111a2b;
  --line: #1b2436;
}

/* === Kontakt: Icons in Textfarbe, einheitliche Kacheln === */
:root{ --i:48px; --label:.95rem; }              /* Desktop-Icongröße + Label */
@media (max-width:991px){ :root{ --i:34px; --label:.85rem; } } /* Mobil größer als vorher */

.contact-grid{ display:grid; justify-content:center; }
.contact-list{ list-style:none; margin:0; padding:0; }

/* Desktop: 3x2 Kacheln zentriert */
@media (min-width:992px){
  .contact-list{
    display:grid;
    grid-template-columns:repeat(3,210px);
    grid-auto-rows:130px;
    gap:1.6rem 2.2rem;
    justify-content:center;
    justify-items:center;
    text-align:center;
  }
  .contact-list li{ width:100%; }
  .contact-list a{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
    width:100%; height:100%;
    border-radius:16px; background:var(--card); border:1px solid var(--line);
    color:var(--fg); text-decoration:none; font-weight:600; font-size:var(--label);
    box-shadow:0 12px 28px rgba(0,0,0,.12);
  }
  .contact-list a:hover{ filter:brightness(1.03); }
}

/* Mobil: kompakte Buttons, Text kleiner */
@media (max-width:991px){
  .contact-list{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }
  .contact-list a{
    display:flex; flex-direction:column; align-items:center; gap:.35rem;
    min-width:72px; padding:.5rem .6rem;
    border-radius:12px; background:var(--card); border:1px solid var(--line);
    color:var(--fg); text-decoration:none; font-size:var(--label);
    box-shadow:0 6px 16px rgba(0,0,0,.12);
  }
}

/* Einheitliche Icon-Darstellung in currentColor via Masken */
.contact-list a img{ display:none; }                  /* externe SVG-Dateien ausblenden */
.contact-list a svg{ width:var(--i); height:var(--i); } /* dein Inline-Email-SVG bleibt */

/* ::before NUR für Social-Links rendern, nicht für .mail */
.contact-list a[href*="linkedin.com"]::before,
.contact-list a[href*="xing.com"]::before,
.contact-list a[href*="github.com"]::before,
.contact-list a[href*="x.com"]::before,
.contact-list a[href*="twitter.com"]::before,
.contact-list a[href*="instagram.com"]::before{
  content:"";
  width:var(--i); height:var(--i);
  background: currentColor;
  -webkit-mask: var(--icon) no-repeat center / 100% 100%;
          mask: var(--icon) no-repeat center / 100% 100%;
}

/* Icon-Zuordnung */
.contact-list a[href*="linkedin.com"]{ --icon:url("assets/brand/linkedin.svg"); }
.contact-list a[href*="xing.com"]    { --icon:url("assets/brand/xing.svg"); }
.contact-list a[href*="github.com"]  { --icon:url("assets/brand/github.svg"); }
.contact-list a[href*="x.com"],
.contact-list a[href*="twitter.com"] { --icon:url("assets/brand/x.svg"); }
.contact-list a[href*="instagram.com"]{ --icon:url("assets/brand/instagram.svg"); }

/* Falls der Mail-Link eine Klasse hat, zusätzlich hart absichern */
.contact-list a.mail::before{ content:none !important; }
/* Print */
@media print{
  .head,.theme,.menu{display:none}
  .block{border:0}
}
/* Avatar-Glow weg, sonst doppelte Aura */
.avatar{ background:none }

/* Großer Halo hinter Titel + Portrait */
.hero{ position:relative;isolation: isolate; }
.hero > *{ position:relative; z-index:1 }        /* Inhalt über dem Halo */
.hero::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:7rem;                                      /* höher ziehen = mehr hinter Überschrift */
  width:clamp(220px, 70vw, 200px);
  height:clamp(220px, 70vw, 200px);
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(ellipse at 50% 45%,
      rgba(255,255,255,.85) 0%,
      rgba(255,255,255,.40) 35%,
      rgba(255,255,255,.10) 60%,
      rgba(255,255,255,0) 75%);
  filter:blur(10px);
  opacity:.96;
}

/* Dunkles Thema: etwas schwächer */
:root[data-theme="dark"] .hero::after{
  background:
    radial-gradient(ellipse at 50% 45%,
      rgba(255,255,255,.45) 0%,
      rgba(255,255,255,.18) 38%,
      rgba(255,255,255,0) 70%);
  opacity:1;
}
/* Pull-Quote */
.pullquote{
  margin: 1rem auto 0;
  max-width: 46rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .9rem 1rem;
  text-align: center;
  box-shadow: var(--shadow);
}
.pullquote blockquote{
  margin: 0;
  font: 600 1.05rem/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: var(--fg);
}
@media (max-width:720px){
  .pullquote{ padding:.75rem .8rem }
  .pullquote blockquote{ font-size:1rem }
}