/* ============================================================
   dabejo.de — gemeinsames Stylesheet
   Seiten setzen eine Body-Klasse: .page-home / .page-doc / .page-404
   ============================================================ */

/* ---------- Lokale Schrift: Hanken Grotesk (Variable Font, Gewicht 400–800) ---------- */
@font-face{
  font-family:"Hanken Grotesk";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Hanken Grotesk";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Design-Tokens ---------- */
:root{
  --text:#15151a;
  --text-2:#5f5f66;
  --text-3:#9a9aa2;
  --text-inv:#fafafa;
  --line:rgba(20,20,30,.10);
  --line-2:rgba(20,20,30,.16);
  --panel:rgba(255,255,255,.5);
  --panel-2:rgba(255,255,255,.42);
  --card:rgba(255,255,255,.55);
  --ph:#e9e9ec;
  --shadow:rgba(20,20,20,.4);
  --fallback:linear-gradient(120deg,#e9edff 0%,#e6f6f6 45%,#f0ecff 100%);
  --sans:"Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  color-scheme:light;
}
:root.dark{
  --text:#ECECEF;
  --text-2:#A6A6AE;
  --text-3:#70707a;
  --text-inv:#15151a;
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.18);
  --panel:rgba(255,255,255,.06);
  --panel-2:rgba(255,255,255,.05);
  --card:rgba(255,255,255,.05);
  --ph:#1c1c22;
  --shadow:rgba(0,0,0,.6);
  --fallback:linear-gradient(120deg,#0c1430 0%,#0a1f24 38%,#1c1018 70%,#120a24 100%);
  color-scheme:dark;
}

/* ---------- Basis ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; } }

body{ color:var(--text); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; background:var(--fallback); }
a{ color:inherit; text-decoration:none; }
img{ display:block; }

/* Unterseiten (Recht/404): fixierter Hintergrund, volle Höhe */
body.page-doc{ line-height:1.65; background-attachment:fixed; min-height:100vh; }
body.page-404{ background-attachment:fixed; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }

.wrap{ max-width:1080px; margin-inline:auto; padding-inline:clamp(18px,4vw,40px); }
.wrap.doc{ max-width:780px; }

/* Shader-Hintergrund (nur Startseite) */
#bg{ position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; pointer-events:none; }

/* ---------- Kopf ---------- */
header{ position:fixed; top:0; left:0; right:0; z-index:20; background:var(--panel); backdrop-filter:saturate(1.5) blur(16px); border-bottom:1px solid var(--line); }
.page-doc header{ position:sticky; }
.bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-block:14px; }
.nm{ font-size:1.2rem; font-weight:700; letter-spacing:-.02em; }
.bar-right{ display:flex; align-items:center; gap:clamp(14px,2.5vw,22px); flex-wrap:wrap; }
nav.menu{ display:flex; gap:clamp(14px,2.5vw,24px); font-size:.94rem; color:var(--text-2); flex-wrap:wrap; }
nav.menu a{ position:relative; padding-bottom:2px; transition:color .2s; }
nav.menu a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--text); transition:width .25s; }
nav.menu a:hover{ color:var(--text); }
nav.menu a:hover::after{ width:100%; }

.theme-toggle{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2); background:var(--panel); color:var(--text); cursor:pointer; transition:background .2s, border-color .2s, transform .15s; }
.theme-toggle:hover{ transform:translateY(-1px); }
.theme-toggle svg{ width:18px; height:18px; }
.i-sun{ display:none; }
:root.dark .i-sun{ display:block; }
:root.dark .i-moon{ display:none; }
@media (max-width:560px){ .bar{ padding-block:11px; } .nm{ font-size:1.08rem; } nav.menu{ gap:13px; font-size:.88rem; } section{ scroll-margin-top:100px; } }

/* Inhalt über dem Shader */
main, footer{ position:relative; z-index:1; }

/* ---------- Hero (Startseite) ---------- */
.hero{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; justify-content:center; position:relative; padding-block:96px; }
.hero-inner{ width:100%; }
.hero .eyebrow{ font-size:1rem; font-weight:500; color:var(--text-2); margin-bottom:.5rem; }
.hero h1{ font-size:clamp(3.4rem,15vw,10rem); font-weight:800; line-height:.9; letter-spacing:-.04em; color:var(--text); }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1{ background:linear-gradient(105deg,#6a8cff,#b56be0 28%,#ff7e6b 52%,#ffb35c 68%,#4fc2c9 86%,#6a8cff); background-size:220% 220%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:flow 10s ease-in-out infinite; }
}
@keyframes flow{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
@media (prefers-reduced-motion: reduce){ .hero h1{ animation:none; } }
.hero .hsub{ margin-top:1.1rem; font-size:clamp(1.08rem,2.6vw,1.45rem); color:var(--text-2); max-width:46ch; }
.hero-scroll{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:5px; color:var(--text-2); font-size:.78rem; font-weight:600; letter-spacing:.06em; }
.hero-scroll svg{ width:20px; height:20px; animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }
@media (max-height:540px){ .hero-scroll{ display:none; } }
@media (prefers-reduced-motion: reduce){ .hero-scroll svg{ animation:none; } }

/* ---------- Abschnitte (Startseite) ---------- */
section{ scroll-margin-top:88px; }
.sec{ padding-block:clamp(54px,9vw,104px); }
.sec + .sec{ border-top:1px solid var(--line); }
.sec.soft{ background:var(--panel-2); }
.page-home h2{ font-size:clamp(1.7rem,4.2vw,2.6rem); font-weight:700; letter-spacing:-.025em; line-height:1.1; }
.lead{ color:var(--text-2); margin-top:12px; max-width:56ch; font-size:1.06rem; }

/* ---------- Über mich ---------- */
.about{ display:grid; grid-template-columns:1.4fr .85fr; gap:clamp(30px,6vw,68px); align-items:start; }
@media (max-width:720px){ .about{ grid-template-columns:1fr; gap:28px; } }
.about .prose{ margin-top:18px; }
.about .prose p{ margin-bottom:1em; }
.about .prose p.dim{ color:var(--text-2); }
.portrait{ border-radius:12px; overflow:hidden; background:var(--ph); box-shadow:0 14px 36px -18px var(--shadow); }
.portrait img{ width:100%; aspect-ratio:4/5; object-fit:cover; }

/* ---------- Fotos-Raster ---------- */
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:clamp(26px,4vw,40px); }
@media (max-width:760px){ .grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }
.cell{ position:relative; aspect-ratio:1; overflow:hidden; border-radius:10px; background:var(--ph); cursor:pointer; box-shadow:0 10px 28px -18px var(--shadow); }
.cell img{ width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.2,.7,.3,1); }
.cell:hover img{ transform:scale(1.06); }
.cell .veil{ position:absolute; inset:0; background:rgba(15,15,15,.34); opacity:0; transition:opacity .25s; display:flex; align-items:flex-end; padding:13px; }
.cell:hover .veil{ opacity:1; }
.cell .veil span{ color:#fff; font-weight:600; font-size:.9rem; }

/* ---------- Projekte ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,34px); margin-top:clamp(26px,4vw,40px); }
@media (max-width:760px){ .cards{ grid-template-columns:1fr; } }
.card{ display:block; }
.card .thumb{ border-radius:10px; overflow:hidden; background:var(--ph); box-shadow:0 10px 28px -18px var(--shadow); }
.card .thumb img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .5s ease; }
.card:hover .thumb img{ transform:scale(1.04); }
.card h3{ font-size:1.2rem; font-weight:700; margin-top:15px; }
.card p{ color:var(--text-2); font-size:.98rem; margin-top:.25em; }
.card .more{ display:inline-block; margin-top:.5em; font-weight:600; font-size:.95rem; border-bottom:1px solid transparent; transition:border-color .2s; }
.card:hover .more{ border-color:var(--text); }

/* ---------- Kontakt ---------- */
.contact .mail{ display:inline-block; margin-top:18px; font-size:clamp(1.3rem,3.2vw,1.9rem); font-weight:700; letter-spacing:-.02em; border-bottom:2px solid var(--text); padding-bottom:3px; transition:opacity .2s; word-break:break-word; }
.contact .mail:hover{ opacity:.65; }

/* Social-Kacheln */
.socials-grid{ display:flex; flex-wrap:wrap; gap:20px 16px; margin-top:30px; }
.tile{ width:84px; display:flex; flex-direction:column; align-items:center; gap:9px; text-decoration:none; }
.tile .box{ width:84px; height:84px; border-radius:20px; color:#fff; display:grid; place-items:center; border:1px solid rgba(255,255,255,.16); box-shadow:0 14px 28px -16px rgba(20,20,30,.45); transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s; }
.tile .box svg{ width:38px; height:38px; }
.tile:hover .box{ transform:translateY(-5px) scale(1.04); box-shadow:0 24px 40px -16px rgba(20,20,30,.5); }
.tile .name{ font-size:.85rem; font-weight:600; color:var(--text-2); transition:color .2s; }
.tile:hover .name{ color:var(--text); }
@media (max-width:420px){ .socials-grid{ gap:16px 14px; } .tile{ width:72px; } .tile .box{ width:72px; height:72px; border-radius:17px; } .tile .box svg{ width:32px; height:32px; } }

/* ---------- Fuß ---------- */
footer{ border-top:1px solid var(--line); padding-block:28px 40px; }
.page-doc footer{ margin-top:40px; }
footer .wrap{ display:flex; flex-wrap:wrap; gap:6px 22px; justify-content:space-between; color:var(--text-3); font-size:.84rem; }
footer a{ color:var(--text-2); } footer a:hover{ color:var(--text); }
footer .meaning b{ color:var(--text-2); font-weight:600; }

/* ---------- Lightbox ---------- */
.lb{ position:fixed; inset:0; z-index:90; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.94); padding:28px; }
.lb.open{ display:flex; }
.lb img{ max-width:92vw; max-height:88vh; object-fit:contain; border-radius:8px; }
.lb button{ position:absolute; background:transparent; border:0; color:#fff; cursor:pointer; opacity:.85; transition:opacity .2s; }
.lb button:hover{ opacity:1; }
.lb .x{ top:16px; right:20px; font-size:2.1rem; line-height:1; }
.lb .nav{ top:50%; transform:translateY(-50%); font-size:3rem; line-height:1; padding:8px 16px; }
.lb .prev{ left:6px; } .lb .next{ right:6px; }
@media (max-width:560px){ .lb .nav{ font-size:2.2rem; } }

/* ---------- Preloader (minimal) ---------- */
#preloader{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:var(--fallback); transition:opacity .5s ease, visibility .5s ease; }
#preloader.done{ opacity:0; visibility:hidden; }
.pl-mark{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.pl-name{ font-weight:800; font-size:1.45rem; letter-spacing:-.02em; color:var(--text-2); }
.pl-bar{ position:relative; width:128px; height:2px; border-radius:2px; background:var(--line-2); overflow:hidden; }
.pl-bar::after{ content:""; position:absolute; top:0; bottom:0; left:-42%; width:42%; border-radius:2px; background:linear-gradient(90deg,#6a8cff,#b56be0,#ff7e6b); animation:plslide 1.1s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes plslide{ to{ left:100%; } }
@media (prefers-reduced-motion:reduce){ #preloader{ transition:none; } .pl-bar::after{ animation:none; left:0; width:100%; } }

/* ============================================================
   Unterseiten: Impressum / Datenschutz (.page-doc)
   ============================================================ */
.page-doc main{ padding-block:clamp(48px,9vw,96px); }
.page-doc .back{ display:inline-flex; align-items:center; gap:7px; font-size:.92rem; font-weight:600; color:var(--text-2); text-decoration:none; margin-bottom:22px; transition:color .2s; }
.page-doc .back:hover{ color:var(--text); }
.page-doc .back svg{ width:16px; height:16px; }
.page-doc h1{ font-size:clamp(2.1rem,6vw,3rem); font-weight:800; letter-spacing:-.03em; line-height:1.05; }
.page-doc h2{ font-size:1.18rem; font-weight:700; letter-spacing:-.01em; margin-top:2em; }
.page-doc h3{ font-size:1.02rem; font-weight:700; margin-top:1.3em; }
.page-doc p, .page-doc address{ color:var(--text-2); margin-top:.7em; font-style:normal; }
.page-doc ul{ color:var(--text-2); margin-top:.7em; padding-left:1.25em; }
.page-doc li{ margin-top:.3em; }
.page-doc .doc a{ color:var(--text); text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--line-2); transition:text-decoration-color .2s; }
.page-doc .doc a:hover{ text-decoration-color:var(--text); }
.page-doc .ph{ display:inline-block; padding:1px 8px; border-radius:6px; background:rgba(255,170,80,.18); border:1px dashed rgba(190,120,30,.5); color:#9a5a12; font-weight:600; font-size:.92em; }
:root.dark .page-doc .ph{ background:rgba(255,180,90,.12); border-color:rgba(255,180,90,.4); color:#f0b56b; }
.page-doc .updated{ margin-top:3em; font-size:.85rem; color:var(--text-3); }

/* ============================================================
   404-Seite (.page-404)
   ============================================================ */
.page-404 .brandbar{ position:absolute; top:0; left:0; right:0; padding:18px clamp(18px,4vw,40px); }
.page-404 main{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:96px clamp(18px,5vw,40px); }
.page-404 .code{ font-size:clamp(6rem,28vw,16rem); font-weight:800; line-height:.85; letter-spacing:-.05em; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .page-404 .code{ background:linear-gradient(105deg,#6a8cff,#b56be0 28%,#ff7e6b 52%,#ffb35c 68%,#4fc2c9 86%,#6a8cff); background-size:220% 220%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:flow 10s ease-in-out infinite; }
}
@media (prefers-reduced-motion:reduce){ .page-404 .code{ animation:none; } }
.page-404 h1{ font-size:clamp(1.4rem,4vw,2rem); font-weight:700; letter-spacing:-.02em; margin-top:.4em; }
.page-404 main p{ color:var(--text-2); margin-top:.7em; font-size:1.05rem; max-width:42ch; }
.page-404 .home{ display:inline-flex; align-items:center; gap:9px; margin-top:2.2em; padding:13px 24px; border-radius:999px; border:1px solid var(--line-2); background:var(--panel); backdrop-filter:saturate(1.5) blur(12px); color:var(--text); font-weight:600; font-size:.98rem; text-decoration:none; transition:transform .15s, border-color .2s; }
.page-404 .home:hover{ transform:translateY(-2px); border-color:var(--text); }
.page-404 .home svg{ width:18px; height:18px; }

/* ---------- Reise-Karte „Da war ich schon" ---------- */
.mapcard{ position:relative; margin:0; background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:18px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 16px 40px -20px var(--shadow); }
.maptip{ position:absolute; left:0; top:0; transform:translate(-50%,-145%); pointer-events:none;
  background:var(--text); color:var(--text-inv); font-size:.82rem; font-weight:700; letter-spacing:.01em;
  padding:5px 10px; border-radius:8px; white-space:nowrap; opacity:0; z-index:6;
  box-shadow:0 8px 20px -8px var(--shadow); transition:opacity .12s ease; }
.maptip.on{ opacity:1; }
.mapwrap{ width:100%; }
.emap{ width:100%; height:auto; display:block; }
.emap .cn{ fill:var(--ph); stroke:var(--line-2); stroke-width:0.4;
  transition:fill .25s ease, opacity .25s ease; }
.emap .cn-on{ fill:#6a8cff; stroke:rgba(255,255,255,.45); stroke-width:0.4; cursor:help;
  transition:fill .15s ease; }
.emap .cn-on:hover{ fill:#aab9ff; stroke-width:0.8; }
.maplegend{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:15px; }
.maplegend .mk{ display:inline-flex; align-items:center; gap:8px; font-size:.88rem;
  font-weight:600; color:var(--text-2); }
.maplegend .mk i{ width:12px; height:12px; border-radius:50%; flex:none; }
.maplegend .mk.on i{ background:#6a8cff; }
.maplegend .mk.off i{ background:var(--ph); border:1px solid var(--line-2); }
.maplegend .names{ flex:1 1 240px; min-width:200px; font-size:.9rem; color:var(--text);
  font-weight:500; }
@media(max-width:560px){ .maplegend .names{ order:3; flex-basis:100%; } }