/*! pinzke.de · © 2026 Rico Pinzke · Alle Rechte vorbehalten */
/* ============================================================================
   pinzke.de — Portfolio-Landingpage. Self-contained (System-Fonts, Inline-SVG,
   keine externen Ressourcen). Design-System der Tools: dunkles Glass, Teal-
   Akzent, Dark/Light über [data-theme]. EIN Stylesheet.
   ============================================================================ */

/* ---- Theme-Tokens: Dunkel (Standard) ---- */
:root{
  --bg:#0f1720; --bg2:#0b121b; --panel:#16212e; --panel2:#1a2735;
  --ink:#e7edf3; --mut:#8aa0b2; --line:#26384a; --line2:#31465b;
  --teal:#1d9e75; --teal-ink:#3ed6a3; --blue:#3a7bd5; --good:#27c065;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --glass:rgba(13,20,29,.66);
}
:root[data-theme="light"]{
  --bg:#eef2f6; --bg2:#e6ecf2; --panel:#ffffff; --panel2:#f5f8fb;
  --ink:#152431; --mut:#5a6b7a; --line:#dbe4ec; --line2:#c6d3de;
  --teal:#128a63; --teal-ink:#0f7a58; --blue:#2f6fcc; --good:#1f9a52;
  --shadow:0 16px 40px rgba(35,60,90,.14);
  --glass:rgba(255,255,255,.72);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;
  min-height:100vh; min-height:100dvh; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* dezenter Hintergrund-Schimmer */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 55% at 78% -8%, rgba(29,158,117,.16), transparent 60%),
    radial-gradient(55% 50% at 8% 4%, rgba(58,123,213,.13), transparent 60%);
}
:root[data-theme="light"] body::before{
  background:
    radial-gradient(60% 55% at 80% -10%, rgba(18,138,99,.12), transparent 60%),
    radial-gradient(55% 50% at 6% 2%, rgba(47,111,204,.10), transparent 62%);
}
a{color:var(--teal-ink); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{width:min(1140px,92vw); margin-inline:auto}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== Glass-Nav ===== */
.nav{
  position:sticky; top:0; z-index:100; height:62px; display:flex; align-items:center;
  gap:14px; padding:0 max(4vw,16px);
  background:var(--glass); border-bottom:1px solid var(--line);
  backdrop-filter:saturate(150%) blur(16px); -webkit-backdrop-filter:saturate(150%) blur(16px);
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){ .nav{background:var(--bg2)} }
.brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:18px; color:var(--ink); letter-spacing:.01em}
.brand:hover{text-decoration:none}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(29,158,117,.22)}
.brand b{color:var(--teal-ink); font-weight:800}
.nav .spacer{flex:1}
.nav .nl{color:var(--mut); font-size:14px; padding:8px 13px; border-radius:9px}
.nav .nl:hover{color:var(--ink); background:var(--panel); text-decoration:none}
.tgl{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border:1px solid var(--line2); border-radius:10px; background:var(--panel); color:var(--ink);
  cursor:pointer; flex:0 0 auto;
}
.tgl:hover{border-color:var(--teal)}
.tgl svg{width:18px;height:18px}
.tgl .ic-sun{display:none}
:root[data-theme="light"] .tgl .ic-sun{display:block}
:root[data-theme="light"] .tgl .ic-moon{display:none}

/* ===== Hero ===== */
.hero{padding:76px 0 34px}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
  color:var(--teal-ink); text-transform:uppercase; letter-spacing:.12em;
  padding:5px 12px; border:1px solid var(--line2); border-radius:999px; background:var(--panel);
}
.hero h1{
  font-size:clamp(30px,5.4vw,52px); line-height:1.1; letter-spacing:-.02em; font-weight:800;
  margin:20px 0 0; max-width:16ch;
}
.hero h1 .g{background:linear-gradient(90deg,var(--teal-ink),var(--blue)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero .lead{font-size:clamp(16px,2.1vw,19px); color:var(--mut); max-width:60ch; margin:20px 0 0}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.chip{
  display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink);
  padding:8px 13px; border:1px solid var(--line); border-radius:11px; background:var(--panel);
}
.chip b{color:var(--teal-ink)}
.chip svg{width:15px;height:15px;color:var(--mut)}

/* ===== Section ===== */
.sec{padding:40px 0}
.sec-h{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:22px}
.sec-h h2{font-size:clamp(21px,3vw,27px); font-weight:800; letter-spacing:-.01em; margin:0}
.sec-h .sub{color:var(--mut); font-size:14.5px}

/* ===== Karten-Raster ===== */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:18px}
.card{
  position:relative; display:flex; flex-direction:column; gap:12px;
  padding:22px 22px 20px; border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  overflow:hidden;
}
.card::before{ /* Akzent-Kante oben */
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--accent,var(--teal)); opacity:.9;
}
.card.live:hover{transform:translateY(-4px); border-color:var(--line2); box-shadow:var(--shadow)}
.card-top{display:flex; align-items:center; gap:13px}
.ico{
  flex:0 0 auto; width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--accent,var(--teal)) 16%, transparent);
  color:var(--accent,var(--teal-ink)); border:1px solid color-mix(in srgb, var(--accent,var(--teal)) 32%, transparent);
}
.ico svg{width:24px;height:24px}
.card h3{margin:0; font-size:18px; font-weight:750; letter-spacing:-.01em; line-height:1.25}
.tag{font-size:11.5px; font-weight:600; color:var(--mut); text-transform:uppercase; letter-spacing:.08em}
.card p{margin:0; color:var(--mut); font-size:14.5px; flex:1}
.card p em{color:var(--ink); font-style:italic}
.card-foot{display:flex; align-items:center; gap:10px; margin-top:4px}
.open{
  display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:650;
  color:var(--accent,var(--teal-ink));
}
.card.live:hover .open{text-decoration:underline}
.open svg{width:15px;height:15px; transition:transform .16s ease}
.card.live:hover .open svg{transform:translateX(3px)}
.badge{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  color:var(--mut); padding:4px 10px; border:1px solid var(--line2); border-radius:999px; background:var(--bg2);
}
.badge .d{width:6px;height:6px;border-radius:50%;background:var(--mut)}
.badge.soon .d{background:var(--blue)}
a.card{color:inherit}
a.card:hover{text-decoration:none}

/* ===== Über mich — als Cards (Bio + Kompetenz-Wolke) ===== */
#ueber .grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
@media (max-width:760px){ #ueber .grid{grid-template-columns:1fr} }
.about-card .me{
  width:72px; height:72px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  border:2px solid var(--line2);
}
.about-card .bio{flex:1; margin-top:2px}
.about-card .bio p{margin:0 0 11px; color:var(--mut); font-size:15px}
.about-card .bio p:last-child{margin-bottom:0}
.about-card .bio strong{color:var(--ink)}
.cloud{
  display:flex; flex-wrap:wrap; gap:9px 14px; align-items:baseline;
  line-height:1.15; padding:2px 0 0;
}
.cloud span{color:var(--mut); font-weight:500; white-space:nowrap}
/* Bewegte 3D-Kugel (nur wenn JS aktiv). Fallback = statische Flex-Wolke oben. */
.cloud.is-sphere{
  position:relative; display:block; width:100%; height:360px; padding:0; margin:8px 0 0;
  touch-action:none; cursor:grab; -webkit-tap-highlight-color:transparent;
}
.cloud.is-sphere span{
  position:absolute; left:50%; top:50%; margin:0;
  will-change:transform,opacity; backface-visibility:hidden;
}
@media (max-width:560px){ .cloud.is-sphere{height:300px} }
.cloud .w1{font-size:11.5px; opacity:.72}
.cloud .w2{font-size:13px}
.cloud .w3{font-size:14.5px; color:var(--ink); opacity:.86}
.cloud .w4{font-size:16.5px; color:var(--ink); font-weight:650}
.cloud .w5{font-size:19px; color:var(--teal-ink); font-weight:700}

/* ===== Kontaktformular ===== */
.kwrap{max-width:680px}
.kform{display:grid; gap:16px; margin-top:4px}
.kf-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.kf-field{display:flex; flex-direction:column; gap:6px}
.kf-field > span{font-size:13.5px; color:var(--ink); font-weight:600}
.kf-field em{color:var(--teal-ink); font-style:normal}
.kf-field small{color:var(--mut); font-weight:400}
.kf-field input, .kf-field textarea{
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:var(--panel2); border:1px solid var(--line2); border-radius:10px;
  padding:11px 13px; outline:none; transition:border-color .15s, box-shadow .15s;
}
.kf-field input:focus, .kf-field textarea:focus{
  border-color:var(--teal); box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent);
}
.kf-field textarea{resize:vertical; min-height:140px; line-height:1.5}
.kf-consent{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--mut)}
.kf-consent input{margin-top:3px; width:16px; height:16px; flex:0 0 auto; accent-color:var(--teal)}
.kf-consent a{color:var(--teal-ink)}
.kf-consent em{color:var(--teal-ink); font-style:normal}
.kf-actions{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:2px}
.btn-send{
  display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:15px; font-weight:650;
  color:#08130e; background:var(--teal); border:0; border-radius:10px; padding:12px 22px; cursor:pointer;
  transition:filter .15s, transform .1s;
}
.btn-send:hover{filter:brightness(1.08)} .btn-send:active{transform:translateY(1px)}
.kf-hint{font-size:13px; color:var(--mut)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-note{border-radius:12px; padding:14px 16px; margin:0 0 20px; font-size:14.5px; color:var(--ink)}
.form-note strong{color:var(--ink)}
.form-note.ok{background:color-mix(in srgb, var(--good) 15%, transparent); border:1px solid color-mix(in srgb, var(--good) 42%, transparent)}
.form-note.bad{background:color-mix(in srgb, #ff6a52 13%, transparent); border:1px solid color-mix(in srgb, #ff6a52 42%, transparent)}
.form-note ul{margin:7px 0 0; padding-left:18px} .form-note.bad li{color:var(--mut)}
@media (max-width:560px){ .kf-row{grid-template-columns:1fr} }

/* ===== Footer ===== */
.foot{border-top:1px solid var(--line); margin-top:30px; padding:30px 0 44px}
.foot-in{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px}
.foot .brand{font-size:16px}
.foot .spacer{flex:1}
.foot a{color:var(--mut); font-size:14px}
.foot a:hover{color:var(--ink)}
.foot .cr{color:var(--mut); font-size:13px; width:100%; margin-top:6px}

/* ===== Rechtstext-Seiten ===== */
.doc{padding:44px 0 60px; max-width:74ch}
.doc h1{font-size:clamp(26px,4vw,36px); font-weight:800; letter-spacing:-.02em; margin:0 0 8px}
.doc h2{font-size:20px; font-weight:750; margin:34px 0 8px}
.doc p,.doc li{color:var(--mut); font-size:15px}
.doc strong{color:var(--ink)}
.doc a{color:var(--teal-ink)}
.back{display:inline-flex; align-items:center; gap:7px; color:var(--mut); font-size:14px; margin-bottom:6px}
.back svg{width:15px;height:15px}

@media (max-width:640px){
  .hero{padding:52px 0 24px}
  .nav .nl.hideS{display:none}
  .grid{grid-template-columns:1fr}
}