/* ============================================================
   PHIL WILDSCHÜTZ — COASTAL ROUGH
   Redesign v2 · mobile-first · kein Build-Prozess
   Paletten: Concrete & Kelp (Start/Kontakt), Stormy Nautical
   (Über mich), Deep Ocean Noir (Arbeiten) — desaturiert,
   die Fotos liefern die Farbe.
   ============================================================ */

/* ── FONTS (selbst gehostet, DSGVO) ── */
@font-face { font-family:'Bebas Neue'; src:url('fonts/BebasNeue-latinext.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap;
  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; }
@font-face { font-family:'Bebas Neue'; src:url('fonts/BebasNeue-latin.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap;
  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:'Space Mono'; src:url('fonts/SpaceMono-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Space Mono'; src:url('fonts/SpaceMono-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Space Mono'; src:url('fonts/SpaceMono-Italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Cormorant Garamond'; src:url('fonts/CormorantGaramond-VariableFont_wght.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:'Cormorant Garamond'; src:url('fonts/CormorantGaramond-Italic-VariableFont_wght.woff2') format('woff2'); font-weight:100 900; font-style:italic; font-display:swap; }

/* ── SYSTEM ── */
:root {
  /* Palette 3: Concrete & Kelp — Standard (Start, Kontakt)
     Neutraleres Weiß: nur noch ein Hauch Wärme, kein Creme-Ton */
  --bg:#F8F7F2;
  --bg-soft:#E8E5DC;
  --ink:#1D2F34;         /* Asphalt Abyss */
  --accent:#2F7E87;      /* Kelp Depth */
  --accent-soft:#86B7B9; /* Sea Glass */
  --hair:rgba(29,47,52,.28);
  --hair-soft:rgba(29,47,52,.12);
  --display:'Bebas Neue',sans-serif;
  --mono:'Space Mono',monospace;
  --serif:'Cormorant Garamond',serif;
  --pad:20px;
}
/* Palette 2: Stormy Nautical — Über mich (neutraleres Weiß) */
body.theme-storm {
  --bg:#F4F4F1; --bg-soft:#D8DAD3; --ink:#103C44;
  --accent:#2D5F65; --accent-soft:#708A96;
  --hair:rgba(16,60,68,.28); --hair-soft:rgba(16,60,68,.12);
}
/* Palette 1: Deep Ocean Noir — Arbeiten */
body.theme-noir {
  --bg:#031827; --bg-soft:#06334A; --ink:#F4F7FB;
  --accent:#2D7FA0; --accent-soft:#0B5673;
  --hair:rgba(244,247,251,.3); --hair-soft:rgba(244,247,251,.14);
}
@media (min-width:768px) { :root { --pad:48px; } }
@media (min-width:1200px) { :root { --pad:64px; } }

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--bg); scroll-behavior:smooth; }
html:has(body.theme-noir) { background:#031827; }
html:has(body.theme-storm) { background:#F4F4F1; }
body {
  background:var(--bg); color:var(--ink);
  font-family:var(--mono); font-size:14px; line-height:1.65;
  overflow-x:hidden; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
::selection { background:var(--accent); color:var(--bg); }
img { max-width:100%; display:block; }
a { color:inherit; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }

/* ── CUSTOM CURSOR (Punkt + nachlaufender Ring, themenfarbig) ──
   Nur bei echten Zeigegeräten — Touch behält den System-Zeiger. */
#z-cur-dot, #z-cur-ring { display:none; }
@media (pointer:fine) {
  body, a, button { cursor:none; }
  #z-cur-dot, #z-cur-ring {
    display:block; position:fixed; top:0; left:0; z-index:10000;
    pointer-events:none; border-radius:50%; transform:translate(-50%,-50%);
  }
  #z-cur-dot {
    width:6px; height:6px; background:var(--accent);
    transition:width .2s,height .2s,background .2s;
  }
  #z-cur-ring {
    width:30px; height:30px; border:1px solid var(--hair);
    transition:width .25s,height .25s,border-color .25s;
  }
  #z-cur-dot.big { width:10px; height:10px; }
  #z-cur-ring.big { width:52px; height:52px; border-color:var(--accent); }
}

/* Filmkorn — Pflicht, extrem subtil (0.06) */
#z-grain {
  position:fixed; inset:-50%; width:200%; height:200%;
  z-index:9000; pointer-events:none; opacity:.06; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:280px 280px;
  animation:z-grain 9s steps(10) infinite;
  transition:opacity .18s ease;
}
body.theme-noir #z-grain { mix-blend-mode:screen; opacity:.05; }
/* Seitenwechsel: Grain zieht kurz an (0.06 → 0.15), dann Übergang */
#z-grain.pulse { opacity:.15; }
body.theme-noir #z-grain.pulse { opacity:.13; }
@keyframes z-grain {
  0%,100% { transform:translate(0,0); } 10% { transform:translate(-3%,-6%); }
  25% { transform:translate(-8%,3%); } 40% { transform:translate(4%,-9%); }
  55% { transform:translate(-5%,8%); } 70% { transform:translate(7%,2%); }
  85% { transform:translate(1%,6%); }
}

/* ── TYPO-BAUSTEINE ── */
.z-label {
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px; opacity:.75;
}
.z-label::before { content:''; width:7px; height:7px; background:var(--accent); flex-shrink:0; }
.z-display { font-family:var(--display); font-weight:400; text-transform:uppercase; line-height:.95; letter-spacing:-.015em; }
.z-serif-line { font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(20px,2.6vw,30px); line-height:1.35; }

/* ── HEADER ── */
.z-header {
  position:sticky; top:0; z-index:120;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px var(--pad);
  background:var(--bg);
  border-bottom:1px solid var(--hair);
}
.z-logo { display:block; width:100px; flex-shrink:0; }
.z-logo img { width:100%; height:auto; }
body.theme-noir .z-logo img { filter:invert(1) hue-rotate(180deg) brightness(1.4); }
.z-nav { display:none; }
@media (min-width:768px) {
  .z-nav { display:flex; gap:30px; align-items:baseline; }
  .z-nav a {
    font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:lowercase;
    text-decoration:none; position:relative; transition:color .2s; opacity:.85;
  }
  .z-nav a:hover { color:var(--accent); opacity:1; }
  .z-nav a.on { color:var(--accent); opacity:1; }
  .z-nav a.on::after { content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:var(--accent); }
  .z-nav a.z-nav-shop sup { font-size:8px; letter-spacing:0; }
}
.z-burger { display:block; width:40px; height:40px; position:relative; z-index:220; margin-right:-8px; }
.z-burger span { position:absolute; left:8px; right:8px; height:2px; background:var(--ink); transition:transform .3s cubic-bezier(.16,1,.3,1); }
.z-burger span:nth-child(1) { top:15px; }
.z-burger span:nth-child(2) { top:23px; }
.z-burger.open span:nth-child(1) { transform:translateY(4px) rotate(45deg); }
.z-burger.open span:nth-child(2) { transform:translateY(-4px) rotate(-45deg); }
@media (min-width:768px) { .z-burger { display:none; } }

/* Mobile-Menü */
.z-mnav {
  position:fixed; inset:0; z-index:110; background:var(--bg);
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  padding:0 var(--pad);
  visibility:hidden; opacity:0; transition:opacity .3s, visibility .3s;
}
.z-mnav.open { visibility:visible; opacity:1; }
.z-mnav a {
  font-family:var(--display); font-size:clamp(40px,12vw,64px); text-transform:uppercase; line-height:1.06;
  text-decoration:none; display:flex; align-items:baseline; gap:14px;
  border-bottom:1px solid var(--hair-soft); padding:10px 0;
  opacity:0; transform:translateY(14px);
}
.z-mnav.open a { animation:z-rise .5s cubic-bezier(.16,1,.3,1) forwards; }
.z-mnav.open a:nth-child(2){animation-delay:.05s} .z-mnav.open a:nth-child(3){animation-delay:.1s}
.z-mnav.open a:nth-child(4){animation-delay:.15s} .z-mnav.open a:nth-child(5){animation-delay:.2s}
.z-mnav a sup { font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--accent); }
.z-mnav a.on { color:var(--accent); }
.z-mnav-meta { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.55; margin-top:36px; line-height:2; }
@keyframes z-rise { to { opacity:1; transform:translateY(0); } }

/* ── TICKER (ruhig — vgl. Deus Customs marquee) ── */
.z-ticker { overflow:hidden; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.z-ticker-track { display:flex; width:max-content; animation:z-tick 40s linear infinite; }
.z-ticker-track > span {
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  padding:11px 0; white-space:nowrap; flex-shrink:0; opacity:.7;
}
.z-ticker-track em { font-style:normal; color:var(--accent-soft); padding:0 24px; }
@keyframes z-tick { to { transform:translateX(-50%); } }

/* ── PARALLAX (10–15 % Tempo-Unterschied, nur Desktop + feine Zeiger) ── */
[data-plx] { overflow:hidden; }
[data-plx] img { will-change:transform; }

/* ── REVEALS (selektiv, nicht auf allem) ── */
.rv { opacity:0; transform:translateY(16px); transition:opacity .8s cubic-bezier(.25,.46,.45,.94), transform .8s cubic-bezier(.25,.46,.45,.94); }
/* transform:none statt translateY(0): hebt den Stacking-Context wieder auf,
   sonst malen Überschriften über das gezoomte Hero-Video */
.rv.on { opacity:1; transform:none; }
.rv-d1 { transition-delay:.1s; } .rv-d2 { transition-delay:.2s; } .rv-d3 { transition-delay:.3s; }

/* ── FIGUREN / WORK-KARTEN ──
   Fotos liefern die Farbe: kein Dauer-Filter.
   Hover: minimale Skalierung + leichtes Altern (Entsättigung). */
.z-card { display:block; text-decoration:none; cursor:pointer; }
.z-card-img {
  position:relative; overflow:hidden; background:var(--bg-soft);
  box-shadow:0 16px 36px rgba(3,24,39,.16);
}
body.theme-noir .z-card-img { box-shadow:0 22px 50px rgba(0,0,0,.55); }
.z-card-img img {
  width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;
  transition:filter .5s ease, transform .8s cubic-bezier(.25,.46,.45,.94);
}
.z-card:hover .z-card-img img, .z-card:focus-visible .z-card-img img { transform:scale(1.02); filter:saturate(.88); }
.z-card figcaption, .z-cap { padding-top:10px; }
.z-cap-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.z-card-no { font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--accent); }
.z-card-meta { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:lowercase; opacity:.55; text-align:right; }
.z-card-title { font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(24px,3vw,36px); line-height:1; margin-top:4px; transition:color .2s; }
.z-card:hover .z-card-title, .z-card:focus-visible .z-card-title { color:var(--accent); }
.z-card-count { font-family:var(--mono); font-size:10px; letter-spacing:.1em; opacity:.5; }

/* ── LINK-STIL (handgezeichnete Linie wächst bei Hover) ── */
.z-link {
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:lowercase;
  text-decoration:none; display:inline-flex; align-items:center; gap:10px;
  padding-bottom:7px; position:relative; transition:color .2s;
}
.z-link::after {
  content:''; position:absolute; left:0; bottom:0; width:100%; height:5px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4.2 C 18 2.2, 34 5.4, 52 3.6 S 88 2.4, 119 3.9' fill='none' stroke='%232F7E87' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / 100% 100%;
  clip-path:inset(0 100% 0 0); transition:clip-path .45s cubic-bezier(.25,.46,.45,.94);
}
.z-link:hover { color:var(--accent); }
.z-link:hover::after { clip-path:inset(0 0 0 0); }
body.theme-storm .z-link::after { filter:hue-rotate(-8deg) brightness(.85); }
body.theme-noir .z-link::after { filter:brightness(1.6); }

/* ── FOOTER ── */
.z-footer { border-top:1px solid var(--hair); margin-top:clamp(60px,9vw,110px); }
.z-footer-motto {
  font-family:var(--display); text-transform:uppercase; line-height:.92;
  font-size:clamp(52px,12.5vw,170px);
  padding:clamp(28px,5vw,60px) var(--pad) clamp(20px,4vw,44px);
  letter-spacing:-.015em;
}
.z-footer-motto em { font-style:normal; color:var(--accent); }
.z-footer-grid { border-top:1px solid var(--hair); display:grid; grid-template-columns:1fr; }
.z-footer-cell { padding:20px var(--pad); border-bottom:1px solid var(--hair-soft); }
.z-footer-cell:last-child { border-bottom:0; }
@media (min-width:768px) {
  .z-footer-grid { grid-template-columns:1fr 1fr 1fr; }
  .z-footer-cell { border-bottom:0; border-right:1px solid var(--hair-soft); padding:26px var(--pad); }
  .z-footer-cell:last-child { border-right:0; }
}
.z-footer-cell h4 { font-family:var(--mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.z-footer-cell a, .z-footer-cell button {
  display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:lowercase;
  text-decoration:none; margin-right:18px; margin-bottom:6px; padding:0;
  border-bottom:1px solid var(--hair); transition:color .2s, border-color .2s;
}
.z-footer-cell a:hover, .z-footer-cell button:hover { color:var(--accent); border-color:var(--accent); }
.z-footer-cell p { font-size:11px; letter-spacing:.06em; opacity:.6; line-height:2; }

/* ── MODALS (Impressum / Datenschutz) ── */
.z-modal {
  position:fixed; inset:0; z-index:300; background:rgba(3,24,39,.55);
  display:flex; align-items:center; justify-content:center; padding:24px 16px;
  visibility:hidden; opacity:0; transition:opacity .25s, visibility .25s;
}
.z-modal.open { visibility:visible; opacity:1; }
.z-modal-box {
  background:var(--bg); border:1px solid var(--hair);
  box-shadow:0 18px 50px rgba(3,24,39,.28);
  max-width:560px; width:100%; max-height:84vh; overflow-y:auto;
  padding:40px 28px; position:relative;
  scrollbar-width:thin; scrollbar-color:var(--hair) transparent;
  transform:translateY(14px); transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.z-modal.open .z-modal-box { transform:translateY(0); }
#pw-datenschutz .z-modal-box { max-width:680px; }
.z-modal-box h2 { font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:30px; margin-bottom:24px; }
.z-modal-box h3 { font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:16px; letter-spacing:.03em; color:var(--accent); margin:26px 0 10px; }
.z-modal-box h3:first-of-type { margin-top:0; }
.z-modal-box h4 { font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin:18px 0 8px; }
.z-modal-box p, .z-modal-box li { font-family:var(--mono); font-size:11px; letter-spacing:.02em; line-height:1.9; opacity:.85; margin-bottom:12px; }
.z-modal-box ul { margin:4px 0 14px 18px; }
.z-modal-box li { margin-bottom:6px; }
.pw-imp-link { color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent); }
.pw-imp-close {
  position:sticky; top:0; float:right; margin:-24px -12px 0 0;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  background:var(--bg); border:1px solid var(--hair); padding:6px 10px;
  transition:background .2s, color .2s;
}
.pw-imp-close:hover { background:var(--ink); color:var(--bg); }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .z-ticker-track { animation:none; }
  #z-grain { animation:none; }
  .rv { opacity:1; transform:none; transition:none; }
  .z-mnav.open a { animation:none; opacity:1; transform:none; }
  *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}