/* ============================================================
   Max Krumbiegel — Baustellenseite / digitale Visitenkarte
   Abgeleitet aus relaunch/assets/css/stil.css (Marken-Design).
   BEWUSST OHNE JavaScript: beide Farbwelten ausschließlich über
   prefers-color-scheme — kein Umschalter, kein localStorage.
   ============================================================ */

/* ---------- Schriften (selbst gehostet, keine externen Quellen) ---------- */
@font-face{font-family:"Sora";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/sora-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/sora-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-latin-600-normal.woff2") format("woff2")}

/* ---------- Marken-Tokens + Theme HELL (Standard) ---------- */
:root{
  --navy:#0B132B;
  --tuerkis:#00D1C1;

  --bg:#FFFFFF;
  --bg-alt:#F3F5F7;
  --surface:#FFFFFF;
  --ink:#0B132B;
  --ink-soft:rgba(11,19,43,.78);
  --muted:rgba(11,19,43,.56);
  --line:rgba(11,19,43,.12);
  --line-strong:rgba(11,19,43,.22);
  --akzent:#00D1C1;
  --akzent-text:#007A70;          /* türkiser TEXT, hell abgedunkelt für Kontrast */
  --akzent-weich:rgba(0,209,193,.10);
  --netz-deckkraft:.5;
  --schatten:0 10px 30px rgba(11,19,43,.06);

  --sora:"Sora","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --inter:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --maxw:1180px;
  --gut:clamp(20px,4.5vw,56px);
  --r:10px;
  --r-btn:999px;
  color-scheme:light;
}

/* ---------- Theme DUNKEL (nur über System-Einstellung) ---------- */
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0B132B;
    --bg-alt:#0F1834;
    --surface:#101A38;
    --ink:#FFFFFF;
    --ink-soft:rgba(255,255,255,.82);
    --muted:rgba(255,255,255,.58);
    --line:rgba(255,255,255,.14);
    --line-strong:rgba(255,255,255,.28);
    --akzent:#00D1C1;
    --akzent-text:#00D1C1;
    --akzent-weich:rgba(0,209,193,.10);
    --netz-deckkraft:.55;
    --schatten:0 10px 30px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}

/* Logo-Varianten je Farbwelt */
.nur-dunkel{display:none}
@media (prefers-color-scheme:dark){
  .nur-hell{display:none}
  .nur-dunkel{display:block}
}

/* ---------- Basis ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink-soft);
  font-family:var(--inter);font-size:1.03rem;font-weight:400;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
}
img,svg{max-width:100%}
a{color:var(--akzent-text);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:3px}
h1,h2{font-family:var(--sora);color:var(--ink);letter-spacing:-.015em}
strong{color:var(--ink);font-weight:600}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- Bühne (Startseite): eine ruhige, zentrierte Karte ---------- */
.buehne{
  position:relative;overflow:hidden;flex:1;
  display:grid;place-items:center;
  padding:clamp(28px,6vw,72px) var(--gut);
}
.netz{
  position:absolute;right:-60px;bottom:-40px;width:min(56vw,760px);height:auto;
  opacity:var(--netz-deckkraft);pointer-events:none;user-select:none;z-index:0;
}
.visitenkarte{
  position:relative;z-index:1;
  width:100%;max-width:640px;
  background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);
  box-shadow:var(--schatten);
  padding:clamp(30px,6vw,58px) clamp(22px,5vw,54px);
  text-align:center;
}
.vk-logo{width:clamp(52px,8vw,66px);height:auto;margin:0 auto 18px;display:block}
.vk-name{
  margin:0;font-weight:300;
  font-size:clamp(2rem,1.3rem+3.4vw,3rem);line-height:1.12;letter-spacing:-.02em;
}
.vk-zeile{
  margin:10px 0 0;font-size:clamp(.98rem,.9rem+.4vw,1.1rem);font-weight:400;
  color:var(--ink-soft);line-height:1.6;
}
.vk-strich{
  display:block;width:44px;height:3px;border-radius:2px;border:0;
  background:var(--tuerkis);margin:24px auto;
}
.vk-hinweis{
  margin:0 0 26px;font-size:.86rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.vk-kontakt{font-style:normal}
.vk-kontakt-zeile{
  font-family:var(--sora);font-weight:400;
  font-size:clamp(1rem,.92rem+.5vw,1.25rem);color:var(--ink);
  margin:0 0 6px;overflow-wrap:break-word;
}
.vk-kontakt-zeile a{color:var(--ink)}
.vk-kontakt-zeile a:hover{color:var(--akzent-text)}
.vk-aktionen{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;
  margin-top:26px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 26px;border-radius:var(--r-btn);
  font-family:var(--inter);font-size:.97rem;font-weight:600;letter-spacing:.01em;
  transition:transform .18s,box-shadow .18s,background .18s,border-color .18s;
  text-decoration:none;
}
.btn:hover{text-decoration:none}
.btn-primaer{background:var(--tuerkis);color:var(--navy)}
.btn-primaer:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,209,193,.35)}
.btn-sekundaer{border:1px solid var(--line-strong);color:var(--ink);background:transparent}
.btn-sekundaer:hover{border-color:var(--akzent)}
.btn .pfeil{transition:transform .18s}
.btn:hover .pfeil{transform:translateX(3px)}

/* ---------- Kopf (nur Rechtsseiten): Logo, keine Navigation ---------- */
.kopf{border-bottom:1px solid var(--line);background:var(--bg)}
.kopf-innen{display:flex;align-items:center;height:76px}
.logo{display:flex;align-items:center}
.logo img{height:30px;width:auto}

/* ---------- Rechtsseiten ---------- */
.rechtstext{width:100%;max-width:800px;margin-inline:auto;padding:clamp(44px,6vw,80px) var(--gut)}
.rechtstext h1{font-weight:300;font-size:clamp(2.1rem,1.4rem+3vw,3.2rem);margin:0 0 32px}
.rechtstext h2{font-family:var(--sora);font-weight:400;font-size:1.2rem;margin:34px 0 12px}
.rechtstext p,.rechtstext li{line-height:1.75;margin:0 0 12px}
.rechtstext ul{list-style:none;padding:0;margin:0 0 12px}
.rechtstext li{position:relative;padding-left:1.4em}
.rechtstext li::before{content:"";position:absolute;left:0;top:.66em;width:6px;height:6px;border-radius:50%;background:var(--tuerkis)}
.rechtstext .zurueck{display:inline-block;margin-top:36px;font-weight:600}

/* ---------- Fuß ---------- */
.fuss{border-top:1px solid var(--line);padding:26px var(--gut);background:var(--bg-alt)}
.fuss-zeile{margin:0;font-size:.88rem;color:var(--muted);text-align:center}
.fuss-zeile a{color:var(--muted)}
.fuss-zeile a:hover{color:var(--akzent-text)}

/* ---------- Responsiv ---------- */
@media (max-width:620px){
  .netz{right:-120px;width:420px}
  .logo img{height:28px}
  .vk-aktionen{flex-direction:column}
  .vk-aktionen .btn{width:100%;justify-content:center}
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:no-preference){
  .netz{animation:netz-schweben 14s ease-in-out infinite alternate}
  @keyframes netz-schweben{from{transform:translateY(0)}to{transform:translateY(-14px)}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}