/* ───────────────────────────────────────────
   melvinvetterli.ch – Designsystem (Okt 2026)
   Gilt für alle Seiten. Seitenspezifisches: home.css, portfolio.css.
   Farben: 3 Paletten (data-palette auf <html>), jede Sektion hat
   einen Ton: .tone-dark / .tone-light.
   ─────────────────────────────────────────── */

/* ── Reset & Grundtypo ──────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--body); font-weight:400; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:700; margin:0; letter-spacing:-.02em; line-height:1.04; text-wrap:balance; }
h1{ font-size:clamp(2.6rem, 7vw, 6rem); }
h2{ font-size:clamp(2.1rem, 5vw, 4rem); }
h3{ font-size:clamp(1.3rem, 2vw, 1.7rem); line-height:1.15; letter-spacing:-.015em; }
h4{ font-size:1.05rem; line-height:1.25; letter-spacing:-.01em; }
p{ margin:0 0 1rem; text-wrap:pretty; }
.wrap{ width:100%; margin:0 auto; }
.lede{ font-size:clamp(1.05rem, 1.4vw, 1.2rem); max-width:52ch; line-height:1.55; }
:root{
  --display:"Satoshi", "Helvetica Neue", Arial, sans-serif;
  --body:"Switzer", "Helvetica Neue", Arial, sans-serif;
  --serif:"Young Serif", "Times New Roman", serif;
}

/* Buttons (Grundform) */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:1rem 1.5rem; font-family:var(--body); font-weight:600; font-size:.92rem; letter-spacing:.01em;
  border:1px solid transparent; white-space:nowrap;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .15s ease;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn__arrow{ position:relative; display:inline-block; width:.9rem; height:.9rem; }
.btn__arrow::before{
  content:""; position:absolute; width:.55rem; height:.55rem; top:.18rem; left:.1rem;
  border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg);
}

/* Textlink */
.tlink{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding-bottom:.35rem; border-bottom:1px solid currentColor;
  transition:color .25s, border-color .25s;
}
.tlink::after{ content:"→"; transition:transform .25s ease; }
.tlink:hover::after{ transform:translateX(.25rem); }

/* Navigation (Grundform) */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; border-bottom:1px solid transparent; transition:background .3s ease, border-color .3s ease; }
.nav.is-scrolled{ backdrop-filter:blur(16px) saturate(120%); -webkit-backdrop-filter:blur(16px) saturate(120%); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0 auto; padding-block:1.1rem; }
.logo{ display:inline-flex; align-items:center; line-height:1; }
.nav__links{ display:flex; align-items:center; gap:clamp(1.2rem, 2vw, 2.2rem); }
.nav__links a{ position:relative; padding:.3rem 0; font-size:.88rem; font-weight:500; transition:color .2s; }
.nav__links a[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; border-radius:2px; background:var(--c-accent); }
.nav__cta .btn{ padding:.7rem 1.1rem; font-size:.84rem; }
.nav__burger{ display:none; width:34px; height:34px; position:relative; }
.nav__burger span{ position:absolute; left:6px; right:6px; height:1.5px; transition:transform .3s, top .3s; }
.nav__burger span:nth-child(1){ top:12px; } .nav__burger span:nth-child(2){ top:21px; }
.nav.is-mobile-open .nav__burger span:nth-child(1){ top:16px; transform:rotate(45deg); }
.nav.is-mobile-open .nav__burger span:nth-child(2){ top:16px; transform:rotate(-45deg); }
.mobile-menu{
  position:fixed; inset:64px 0 0 0; z-index:40; padding:2.5rem var(--gutter);
  opacity:0; transform:translateY(-12px); pointer-events:none; transition:opacity .3s, transform .3s;
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
}
.nav.is-mobile-open + .mobile-menu{ opacity:1; transform:none; pointer-events:auto; }
.mobile-menu a{ display:block; padding:.7rem 0; border-bottom:1px solid; font-family:var(--display); font-weight:700; font-size:2.2rem; letter-spacing:-.02em; line-height:1.2; }
.mobile-menu a:last-of-type{ border-bottom:0; }
@media (max-width:1099px){ .nav__links{ display:none; } .nav__burger{ display:block; } }
@media (max-width:480px){ .nav__inner{ gap:.5rem; padding-block:.9rem; } .nav__cta .btn{ padding:.55rem .8rem; font-size:.74rem; } }

/* Footer (Grundform) */
footer{ padding:clamp(3.5rem, 6vw, 5rem) 0 2rem; font-size:.95rem; }
.footer-grid{ display:grid; gap:2.5rem; margin-bottom:3rem; }
@media (min-width:880px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr; } }
.footer-col h4{ font-family:var(--body); font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1.2rem; }
.footer-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.7rem; }
.footer-col a{ transition:color .2s; }
.footer-brand p{ margin-top:1.2rem; max-width:32ch; line-height:1.6; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-top:2rem; border-top:1px solid; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; }
.footer-social{ display:flex; gap:1.2rem; }

/* Netlify-Honeypot */
.hp-field{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

/* Reveal (Grundform) */
.reveal{ opacity:0; }
.reveal.is-in{ opacity:1; transform:none; }
.no-js .reveal{ opacity:1; transform:none; }


/* ── Paletten ───────────────────────────────── */
:root,
[data-palette="wald"]{
  --c-dark:#0E241D;  --c-dark-2:#143128;  --c-dark-3:#1C3E33;
  --c-light:#F4F6EF; --c-light-p:#FCFDF9; --c-light-2:#E6EADF;
  --c-accent:#C3EE5E; --c-accent-deep:#2C7448; --c-on-accent:#0E241D;
  --c-ink-d:#F2F5EE; --c-ink-l:#10201A;
}
[data-palette="nacht"]{
  --c-dark:#121311;  --c-dark-2:#1B1D1A;  --c-dark-3:#262923;
  --c-light:#F4F4EF; --c-light-p:#FDFDFA; --c-light-2:#E7E8E0;
  --c-accent:#C9F45A; --c-accent-deep:#4A7A12; --c-on-accent:#121311;
  --c-ink-d:#F4F4EF; --c-ink-l:#141513;
}
[data-palette="graphit"]{
  --c-dark:#2B2522;  --c-dark-2:#36302C;  --c-dark-3:#433A35;
  --c-light:#F5F1EA; --c-light-p:#FCFAF6; --c-light-2:#E9E2D6;
  --c-accent:#A8E27E; --c-accent-deep:#2E7A3C; --c-on-accent:#221C19;
  --c-ink-d:#F3EFE8; --c-ink-l:#241E1B;
}

:root{
  --r:26px; --r-sm:14px;
  /* Ecken: oben links + unten rechts gerundet, die anderen zwei eckig */
  --sh:var(--r) 0 var(--r) 0; --sh-sm:var(--r-sm) 0 var(--r-sm) 0; --sh-xs:10px 0 10px 0; --sh-in:calc(var(--r) - 8px) 0 calc(var(--r) - 8px) 0;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --rec:#E5553F;
  --gutter:clamp(1.25rem, 4vw, 3rem);
  --sp:clamp(5rem, 10vw, 8.5rem);

  /* Icons (Tabler, MIT) als Masken */
  --i-heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572'/%3E%3C/svg%3E");
  --i-comment:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1'/%3E%3C/svg%3E");
  --i-send:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14l11 -11'/%3E%3Cpath d='M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5'/%3E%3C/svg%3E");
  --i-bookmark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 7v14l-6 -4l-6 4v-14a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4'/%3E%3C/svg%3E");
  --i-tiktok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 7.917v4.034a9.948 9.948 0 0 1 -5 -1.951v4.5a6.5 6.5 0 1 1 -8 -6.326v4.326a2.5 2.5 0 1 0 4 2v-11.5h4.083a6.005 6.005 0 0 0 4.917 4.917'/%3E%3C/svg%3E");
  --i-insta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v10a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4l0 -10'/%3E%3Cpath d='M8.5 12a3.5 3.5 0 1 0 7 0a3.5 3.5 0 0 0 -7 0'/%3E%3Cpath d='M17 7v.01'/%3E%3C/svg%3E");
  --i-linkedin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 11v5'/%3E%3Cpath d='M8 8v.01'/%3E%3Cpath d='M12 16v-5'/%3E%3Cpath d='M16 16v-3a2 2 0 1 0 -4 0'/%3E%3Cpath d='M3 7a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v10a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4l0 -10'/%3E%3C/svg%3E");
}

/* ── Töne ───────────────────────────────────── */
:root, .tone-dark, .nav, .mobile-menu{
  --bg:var(--c-dark); --panel:var(--c-dark-2); --panel-2:var(--c-dark-3);
  --fg:var(--c-ink-d); --hi:var(--c-accent);
  --btn-bg:var(--c-accent); --btn-fg:var(--c-on-accent);
}
.tone-light{
  --bg:var(--c-light); --panel:var(--c-light-p); --panel-2:var(--c-light-2);
  --fg:var(--c-ink-l); --hi:var(--c-dark);
  --btn-bg:var(--c-dark); --btn-fg:var(--c-accent);
}
.tone-accent{
  --bg:var(--c-accent);
  --panel:color-mix(in oklab, var(--c-on-accent) 7%, var(--c-accent));
  --panel-2:color-mix(in oklab, var(--c-on-accent) 13%, var(--c-accent));
  --fg:var(--c-on-accent); --hi:var(--c-on-accent);
  --btn-bg:var(--c-on-accent); --btn-fg:var(--c-accent);
}
:root, .tone-dark, .tone-light, .tone-accent, .nav, .mobile-menu{
  --fg-2:color-mix(in oklab, var(--fg) 72%, var(--bg));
  --fg-3:color-mix(in oklab, var(--fg) 50%, var(--bg));
  --line:color-mix(in oklab, var(--fg) 14%, var(--bg));
}
.tone-dark, .tone-light, .tone-accent{ background:var(--bg); color:var(--fg); }

/* ── Basis ──────────────────────────────────── */
body{ overflow-x:clip; background:var(--c-dark); color:var(--fg); }
h1,h2,h3,h4{ color:inherit; }
.wrap{ position:relative; max-width:1360px; padding:0 var(--gutter); }
.lede{ color:var(--fg-2); }
.hand{ font-family:var(--serif); font-weight:400; color:var(--hi); letter-spacing:0; }
::selection{ background:var(--c-accent); color:var(--c-on-accent); }

.skip{ position:fixed; left:1rem; top:-4rem; z-index:100; background:var(--c-accent); color:var(--c-on-accent); padding:.7rem 1rem; font-weight:600; border-radius:var(--sh-sm); }
.skip:focus{ top:1rem; }

/* Einheitlicher Sektionskopf */
/* Abschnittskopf: Überschrift, darunter Text, alles auf einer linken Kante */
.head{ display:flex; flex-direction:column; align-items:flex-start; gap:1.1rem; margin-bottom:clamp(2.5rem, 5vw, 3.6rem); }
.head h2, .fmt h2, .solo h2, .hello h2, .faq h2{
  font-size:clamp(2.3rem, 4.8vw, 4.2rem); font-weight:800; letter-spacing:-.035em; line-height:1;
}
.head__lede{ color:var(--fg-2); font-size:clamp(1.02rem, 1.3vw, 1.15rem); max-width:58ch; margin:0; }
.head__lede p{ margin-bottom:1.4rem; }

/* Buttons */
.btn{ border-radius:var(--sh-sm); }
.btn--lg{ padding:1.1rem 1.6rem; font-size:.98rem; }
.btn--primary{ background:var(--btn-bg); color:var(--btn-fg); box-shadow:none; }
.btn--dark{ background:var(--c-dark); color:var(--c-accent); }
.btn--dark:hover{ background:color-mix(in oklab, var(--c-dark) 85%, var(--c-accent)); }
.btn--primary:hover{ background:color-mix(in oklab, var(--btn-bg) 86%, var(--fg)); box-shadow:none; }
.btn--ghost{ color:var(--fg); border:1px solid color-mix(in oklab, var(--fg) 30%, var(--bg)); }
.btn--ghost:hover{ color:var(--hi); border-color:var(--hi); }
.btn--line{ border:1.5px solid var(--fg); color:var(--fg); background:transparent; }
.btn--line:hover{ background:var(--fg); color:var(--bg); }
a:focus-visible, button:focus-visible, summary:focus-visible{ outline:2px solid var(--hi); outline-offset:3px; }

/* Nav & Logo */
.logo__mark{
  --lh:2.3rem; display:block; height:var(--lh); width:calc(var(--lh) * 820 / 320);
  fill:var(--c-ink-d);
}
.nav__inner{ max-width:1360px; padding-inline:var(--gutter); }
.nav.is-scrolled{
  background:color-mix(in oklab, var(--c-dark) 88%, transparent);
  border-bottom-color:color-mix(in oklab, var(--c-ink-d) 10%, transparent);
}
.nav__links a{ color:var(--fg-2); }
.nav__links a:hover{ color:var(--c-accent); }
.nav__burger span{ background:var(--fg); }
.mobile-menu{ background:color-mix(in oklab, var(--c-dark) 97%, transparent); }
.mobile-menu a{ color:var(--fg); border-bottom-color:var(--line); }

/* Social-UI-Icons */
[class^="ic-"]{ display:block; background:currentColor; -webkit-mask:center / contain no-repeat; mask:center / contain no-repeat; }
.ic-heart{ -webkit-mask-image:var(--i-heart); mask-image:var(--i-heart); }
.ic-comment{ -webkit-mask-image:var(--i-comment); mask-image:var(--i-comment); }
.ic-send{ -webkit-mask-image:var(--i-send); mask-image:var(--i-send); }
.ic-bookmark{ -webkit-mask-image:var(--i-bookmark); mask-image:var(--i-bookmark); }
.ic-tiktok{ -webkit-mask-image:var(--i-tiktok); mask-image:var(--i-tiktok); }
.ic-insta{ -webkit-mask-image:var(--i-insta); mask-image:var(--i-insta); }
.ic-linkedin{ -webkit-mask-image:var(--i-linkedin); mask-image:var(--i-linkedin); }

/* ═════════════ KUNDEN: Logo-Wand ═════════════ */
.logos{ padding:var(--sp) 0; }
.logowall{
  --cols:4; --gap:.9rem;
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--gap);
}
.logowall > li{ flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); }
@media (max-width:980px){ .logowall{ --cols:3; } }
@media (max-width:700px){ .logowall{ --cols:2; --gap:.6rem; } }
.logowall li{
  display:grid; place-items:center; aspect-ratio:2.4 / 1; padding:1rem 1.4rem;
  border-radius:var(--sh); background:var(--panel); box-shadow:0 0 0 1px var(--line);
  transition:box-shadow .3s, transform .4s var(--ease-out);
}
.logowall li:hover{ box-shadow:0 0 0 1px var(--fg-3), 0 18px 40px -26px rgba(14,36,29,.45); transform:translateY(-2px); }
.logo-img{
  --h:calc(clamp(2rem, 3.4vw, 3.2rem) * var(--s, 1));
  display:block; width:min(78%, calc(var(--h) * var(--ar))); height:auto; aspect-ratio:var(--ar);
  background:var(--fg); transition:background .3s;
  -webkit-mask:var(--src) center / contain no-repeat; mask:var(--src) center / contain no-repeat;
}
.logo-txt{ font-family:var(--display); font-weight:800; font-size:clamp(1.15rem, 2vw, 1.7rem); letter-spacing:-.02em; color:var(--fg); text-align:center; }
.logo-txt--caps{ font-size:clamp(.85rem, 1.3vw, 1.1rem); letter-spacing:.3em; margin-right:-.3em; }
.logo-pic{ display:block; width:auto; max-width:78%; min-width:0; height:calc(clamp(2rem, 3.4vw, 3.2rem) * var(--s, 1)); object-fit:contain; }
.logo-combo{ display:flex; align-items:center; gap:.7rem; }
.logo-combo .logo-pic{ height:clamp(2.2rem, 3.6vw, 3.4rem); }
.logo-combo .logo-img{ height:clamp(2.2rem, 3.6vw, 3.4rem); }
.logo-combo .logo-txt{ font-size:clamp(1rem, 1.6vw, 1.4rem); white-space:nowrap; }


/* ═════════════ Social-UI im Smartphone (Startseite + Portfolio) ═════════════ */
/* Reel-UI */
.ui-reel{ position:absolute; inset:0; pointer-events:none; color:#F5F5F2; background:linear-gradient(to top, rgba(0,0,0,.5), transparent 28%); }
.ui-reel > i{ position:absolute; right:6%; width:9%; aspect-ratio:1; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.ui-reel > i:nth-child(1){ bottom:34%; } .ui-reel > i:nth-child(2){ bottom:26%; } .ui-reel > i:nth-child(3){ bottom:18%; }
.ui-lines{
  position:absolute; left:6%; bottom:6%; width:56%; height:4.4%;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 44% 32% no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 100% 22% no-repeat;
  opacity:.9;
}
/* Feed-UI (Instagram-ähnlich, hell) */
.ui-feed-top{ position:absolute; left:5%; right:5%; top:6.2%; height:4%; display:flex; align-items:center; gap:4%; }
.ui-avatar{ height:100%; aspect-ratio:1; border-radius:50%; background:conic-gradient(var(--c-accent), var(--c-accent-deep), var(--c-accent)); }
.ui-handle{ height:28%; width:34%; border-radius:4px; background:#1b1d1a; opacity:.85; }
.ui-sponsored{ font-size:max(6px, calc(var(--pw) * .042)); color:#555; margin-left:auto; font-weight:500; }
.ui-feed-media{ position:absolute; left:0; right:0; top:11.5%; height:56.4%; overflow:hidden; background:#000; }
.ui-feed-media video{ width:100%; height:100%; object-fit:cover; }
.ui-feed-actions{ position:absolute; left:5%; right:5%; top:70.5%; height:4.2%; display:flex; gap:5%; color:#1b1d1a; }
.ui-feed-actions i{ height:100%; aspect-ratio:1; }
.ui-feed-actions i:last-child{ margin-left:auto; }
.ui-lines--dark{ color:#1b1d1a; top:78%; bottom:auto; left:5%; }
.ui-cta{
  position:absolute; left:0; right:0; top:67.9%; height:2.1%;
  display:none;
}
.phone[data-slot="4"] .ui-cta{
  display:flex; align-items:center; padding:0 5%; height:4.6%;
  background:var(--c-accent); color:var(--c-on-accent);
  font-size:max(6px, calc(var(--pw) * .05)); font-weight:700;
}
.phone[data-slot="4"] .ui-feed-actions{ top:74.6%; }
.phone[data-slot="4"] .ui-lines--dark{ top:82%; }

/* Format-Symbole (16:9, 9:16, 4:5) */
.r{ display:inline-block; flex:none; border:1.5px solid var(--hi); border-radius:2px; }
.r--wide{ width:1.2rem; height:.68rem; }
.r--tall{ width:.56rem; height:1rem; }
.r--feed{ width:.72rem; height:.9rem; }
.r--photo{ width:1.05rem; height:.78rem; position:relative; }
.r--photo::after{ content:''; position:absolute; inset:0; margin:auto; width:.34rem; height:.34rem; border:1.5px solid var(--hi); border-radius:50%; }

.tlink{ color:var(--fg); border-bottom-color:var(--line); margin-top:1rem; }
.tlink:hover{ color:var(--hi); border-color:var(--hi); }

/* ═════════════ FAQ ═════════════ */
.faq{ padding:var(--sp) 0; }
.faq__grid{ display:flex; flex-direction:column; gap:clamp(2.5rem, 5vw, 3.6rem); }
.faq__list{ max-width:58rem; }
.faq__list{ display:flex; flex-direction:column; gap:.6rem; }
.faq details{ border-radius:var(--sh-sm); background:var(--panel); padding:0 1.4rem; box-shadow:0 0 0 1px var(--line); }
.faq summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
  padding:1.3rem 0; font-family:var(--display); font-weight:700; font-size:clamp(1.05rem, 1.5vw, 1.25rem); letter-spacing:-.015em; transition:color .25s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; flex:none; width:.9rem; height:.9rem;
  background:linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition:transform .4s var(--ease-out);
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq summary:hover{ color:var(--hi); }
.faq details p{ color:var(--fg-2); margin:0 0 1.4rem; max-width:62ch; }
.faq details a{ color:var(--hi); border-bottom:1px solid currentColor; }

/* ═════════════ FINAL ═════════════ */
.final{ padding:clamp(6rem, 13vw, 11rem) 0; }
.final__h{ font-size:clamp(3rem, 9vw, 8.6rem); font-weight:800; letter-spacing:-.045em; line-height:.92; max-width:12ch; margin-bottom:2rem; }
.final__sub{ font-size:clamp(1.05rem, 1.4vw, 1.25rem); color:var(--fg-2); max-width:48ch; margin-bottom:2.4rem; }
.final__cta{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* Footer */
footer.tone-dark{ background:color-mix(in oklab, var(--c-dark) 82%, #000); color:var(--fg-2); border-top:1px solid var(--line); }
footer .footer-col h4{ color:var(--fg-3); }
footer .footer-col a{ color:var(--fg-2); }
footer .footer-col a:hover{ color:var(--hi); }
footer .footer-brand .logo__mark{ --lh:3.4rem; }
footer .footer-bottom{ border-top-color:var(--line); color:var(--fg-3); }

/* Reveal: Dissolve */
.reveal{ transform:translateY(18px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay:var(--rd, 0ms); }

/* Palette-Umschalter (nur lokale Vorschau) */
.pal{
  position:fixed; z-index:90; left:1rem; bottom:1rem;
  display:flex; align-items:center; gap:.4rem; padding:.45rem .5rem .45rem .8rem;
  border-radius:999px; background:#111; color:#eee; font:600 .75rem/1 var(--body);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.6);
}
.pal button{ display:flex; align-items:center; gap:.35rem; padding:.35rem .55rem; border-radius:999px; color:#ccc; font-size:.75rem; }
.pal button[aria-pressed="true"]{ background:#2a2a2a; color:#fff; }
.pal button i{ width:.9rem; height:.9rem; border-radius:50%; border:2px solid var(--a); background:var(--d); }

@media (prefers-reduced-motion: reduce){
  .hero__scroll i{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .crew__list li, .crew__list li::after, .crew__sum{ transition-duration:.01s; transition-delay:0s; }
  .tile__body{ transition:none; }
}

/* ═════════════ Sektionen & Überschriften (alle Seiten) ═════════════ */
.sec{ padding:var(--sp) 0; }
h1 em, h2 em, h3 em{ font-style:normal; color:var(--hi); }
.tone-light h1 em, .tone-light h2 em{ color:inherit; background:linear-gradient(transparent 62%, var(--c-accent) 62% 92%, transparent 92%); }

/* Seitenkopf der Unterseiten */
.phero{ padding:clamp(8.5rem, 16vw, 12rem) 0 clamp(3.5rem, 7vw, 5.5rem); position:relative; overflow:hidden; }
.phero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 45% 75% at 88% 30%, color-mix(in oklab, var(--c-accent) 12%, transparent), transparent 70%);
  -webkit-mask:linear-gradient(to bottom, #000 45%, transparent 100%); mask:linear-gradient(to bottom, #000 45%, transparent 100%);
}
.phero .wrap{ position:relative; z-index:1; }
.phero h1{ font-size:clamp(2.8rem, 6.6vw, 6.2rem); font-weight:800; letter-spacing:-.04em; line-height:.96; max-width:16ch; margin-bottom:1.6rem; }
.phero p{ color:var(--fg-2); font-size:clamp(1.05rem, 1.4vw, 1.22rem); max-width:52ch; margin:0; }
.phero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.facts{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2.2rem; padding:0; list-style:none; }
.facts li{ padding:.6rem 1rem; border-radius:var(--sh-xs); background:var(--panel); box-shadow:0 0 0 1px var(--line); font-size:.9rem; }
.facts b{ color:var(--hi); font-weight:700; margin-right:.35rem; }

/* Karten (Werte, Workshop-Resultate, Zielgruppen, Kontaktwege) */
.cards{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); }
.card{ display:flex; flex-direction:column; padding:clamp(1.5rem, 2.4vw, 2.1rem); border-radius:var(--sh); background:var(--panel); box-shadow:0 0 0 1px var(--line); }
.card__n{ display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%; margin-bottom:1.1rem; font-family:var(--display); font-weight:800; font-size:.95rem; background:var(--c-dark); color:var(--c-accent); }
.tone-dark .card__n{ background:var(--c-accent); color:var(--c-on-accent); }
.card h3{ font-size:1.3rem; margin-bottom:.7rem; }
.card p{ color:var(--fg-2); font-size:.97rem; margin:0; }
a.card{ transition:transform .4s var(--ease-out), box-shadow .3s; }
a.card:hover{ transform:translateY(-3px); box-shadow:0 0 0 1px var(--fg-3), 0 20px 40px -28px rgba(0,0,0,.45); }
.card__kicker{ font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); margin-bottom:.6rem; }
.card__value{ font-family:var(--display); font-weight:800; font-size:clamp(1.2rem, 1.8vw, 1.5rem); letter-spacing:-.02em; margin-bottom:.4rem; word-break:break-word; }

/* Zitat */
.quote{ padding:clamp(4rem, 9vw, 7rem) 0; }
.quote blockquote{ margin:0; font-family:var(--display); font-weight:800; letter-spacing:-.03em; line-height:1.08; font-size:clamp(1.9rem, 4.4vw, 3.6rem); max-width:22ch; }
.quote blockquote em{ font-style:normal; color:var(--hi); }
.quote cite{ display:block; margin-top:1.4rem; font-style:normal; color:var(--fg-3); font-size:.92rem; }

/* Bild + Text */
.split{ display:grid; gap:clamp(2rem, 5vw, 5rem); }
@media (min-width:900px){ .split{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:center; } }
.split__img{ margin:0; overflow:hidden; border-radius:var(--sh); aspect-ratio:4 / 5; }
.split__img img{ width:100%; height:100%; object-fit:cover; object-position:40% 30%; }
.split__text p{ color:var(--fg-2); font-size:clamp(1.02rem, 1.25vw, 1.14rem); max-width:56ch; }
.split__text p strong{ color:var(--fg); }

/* Programm / Agenda */
.agenda{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; max-width:62rem; }
.agenda li{ display:grid; grid-template-columns:5.5rem minmax(0,1fr); gap:.3rem 1.4rem; padding:1.3rem 1.5rem; border-radius:var(--sh-sm); background:var(--panel); box-shadow:0 0 0 1px var(--line); }
.agenda time{ font-family:var(--display); font-weight:800; font-size:1.05rem; color:var(--hi); padding-top:.1rem; }
.agenda h3{ font-size:1.15rem; margin:0 0 .3rem; }
.agenda p{ grid-column:2; margin:0; color:var(--fg-2); font-size:.95rem; }
.agenda li > div{ min-width:0; }
@media (max-width:560px){ .agenda li{ grid-template-columns:1fr; } .agenda p{ grid-column:1; } }

/* Formulare */
.form{ display:grid; gap:1rem 1.1rem; grid-template-columns:1fr 1fr; }
.form .full{ grid-column:1 / -1; }
@media (max-width:640px){ .form{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field label{ font-size:.86rem; font-weight:600; color:var(--fg-2); }
.field input, .field select, .field textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--fg);
  padding:.85rem 1rem; border-radius:var(--sh-sm);
  background:var(--panel); border:1px solid var(--line);
  transition:border-color .2s, box-shadow .2s;
}
.field textarea{ min-height:9rem; resize:vertical; }
.field select{
  appearance:none; padding-right:2.6rem;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 1.25rem) 55%, calc(100% - .95rem) 55%; background-size:.35rem .35rem; background-repeat:no-repeat;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--hi); box-shadow:0 0 0 3px color-mix(in oklab, var(--c-accent) 35%, transparent); }
.field input::placeholder, .field textarea::placeholder{ color:var(--fg-3); }
.checkbox{ display:flex; gap:.75rem; align-items:flex-start; font-size:.9rem; color:var(--fg-2); }
.checkbox input{ margin-top:.2rem; width:1.1rem; height:1.1rem; accent-color:var(--c-accent); flex:none; }
.checkbox a{ color:var(--fg); text-decoration:underline; text-underline-offset:3px; }
.form__submit{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem; margin-top:.4rem; }
.form__note{ font-size:.86rem; color:var(--fg-3); }

/* Kontakt: Formular + Kalender */
.contact{ display:grid; gap:clamp(2.5rem, 5vw, 4rem); }
@media (min-width:1000px){ .contact{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:start; } }
.contact h2{ font-size:clamp(1.8rem, 3vw, 2.6rem); font-weight:800; letter-spacing:-.03em; margin-bottom:1rem; }
.contact__col > p{ color:var(--fg-2); max-width:52ch; margin-bottom:1.8rem; }
.checks{ list-style:none; margin:0 0 1.6rem; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.checks li{ position:relative; padding-left:1.6rem; font-size:.97rem; }
.checks li::before{ content:""; position:absolute; left:0; top:.32em; width:1rem; height:1rem; border-radius:50%; background:radial-gradient(circle, var(--c-on-accent) 0 22%, var(--c-accent) 24%); }
.calendly{
  position:relative; min-height:22rem; border-radius:var(--sh); overflow:hidden;
  background:radial-gradient(80% 80% at 100% 0%, color-mix(in oklab, var(--c-accent) 18%, transparent), transparent 60%), var(--c-dark);
  color:var(--c-ink-d); display:grid; place-items:center; text-align:center; padding:2rem;
}
.calendly__inner{ display:flex; flex-direction:column; align-items:center; gap:.8rem; max-width:30ch; }
.calendly__tag{ font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-accent); }
.calendly__title{ font-family:var(--display); font-weight:800; font-size:1.6rem; letter-spacing:-.02em; line-height:1.1; }
.calendly__sub{ font-size:.86rem; color:color-mix(in oklab, var(--c-ink-d) 70%, transparent); }
.calendly .btn--primary{ background:var(--c-accent); color:var(--c-on-accent); margin-top:.6rem; }
.calendly.is-loaded{ min-height:44rem; padding:0; background:#fff; }

/* Rechtstexte */
.legal{ padding:clamp(3.5rem, 7vw, 5.5rem) 0 var(--sp); }
.legal__body{ max-width:46rem; }
.legal__body h2{ font-size:clamp(1.35rem, 2.2vw, 1.75rem); font-weight:800; letter-spacing:-.02em; margin:2.6rem 0 .8rem; }
.legal__body h2:first-child{ margin-top:0; }
.legal__body h3{ font-size:1.1rem; margin:1.6rem 0 .6rem; }
.legal__body p, .legal__body li{ color:var(--fg-2); font-size:1rem; }
.legal__body ul{ padding-left:1.2rem; margin:0 0 1rem; }
.legal__body a{ color:var(--fg); text-decoration:underline; text-underline-offset:3px; }
.legal__placeholder{ background:color-mix(in oklab, var(--c-accent) 45%, transparent); color:var(--c-ink-l); padding:0 .3em; border-radius:4px; }

/* Danke */
.thanks{ min-height:100svh; display:flex; align-items:center; padding:8rem 0 5rem; }
.thanks h1{ font-size:clamp(2.6rem, 6vw, 5.4rem); font-weight:800; letter-spacing:-.04em; line-height:.98; max-width:16ch; margin-bottom:1.4rem; }
.thanks p{ color:var(--fg-2); max-width:48ch; font-size:1.1rem; }
.thanks__badge{ display:inline-grid; place-items:center; width:3.4rem; height:3.4rem; border-radius:50%; margin-bottom:1.6rem; background:var(--c-accent); color:var(--c-on-accent); font-size:1.5rem; font-weight:800; }

/* Video-Einbettung (Wistia, Klick zum Laden) */
.vid{ position:relative; display:block; overflow:hidden; border-radius:var(--sh); background:#000 center / cover no-repeat; aspect-ratio:16 / 9; }
.vid--tall{ aspect-ratio:9 / 16; }
.vid--feed{ aspect-ratio:4 / 5; }
.vid__play{
  position:absolute; z-index:2; left:50%; top:50%; translate:-50% -50%;
  width:4.2rem; height:4.2rem; border-radius:50%; background:var(--c-accent);
  box-shadow:0 10px 30px -8px rgba(0,0,0,.5); transition:transform .3s var(--ease-out);
}
.vid__play::after{ content:""; position:absolute; left:54%; top:50%; translate:-50% -50%; border-style:solid; border-width:.62rem 0 .62rem 1rem; border-color:transparent transparent transparent var(--c-on-accent); }
.vid:hover .vid__play{ transform:scale(1.08); }

/* Cookie-Banner + Klick-zum-Laden im neuen Look (überschreibt consent.css) */
.consent{ background:color-mix(in oklab, var(--c-dark) 96%, transparent); color:var(--c-ink-d); border-top-color:color-mix(in oklab, var(--c-ink-d) 14%, transparent); }
.consent__copy a{ color:var(--c-accent); }
.consent__copy p, .consent__row-text span, .consent__toggle{ color:color-mix(in oklab, var(--c-ink-d) 72%, transparent); }
.consent__btn{ border-radius:var(--sh-sm); color:var(--c-ink-d); border-color:color-mix(in oklab, var(--c-ink-d) 24%, transparent); font-weight:600; }
.consent__btn:hover{ color:var(--c-accent); border-color:var(--c-accent); }
.consent__btn--primary, .consent__btn--primary:hover{ background:var(--c-accent); border-color:var(--c-accent); color:var(--c-on-accent); }
.consent__settings{ border-radius:var(--sh-sm); }
.consent__toggle-track{ border-radius:99px; }
.consent__toggle-track::after{ border-radius:50%; }
.consent__toggle input:checked + .consent__toggle-track{ background:var(--c-accent); }
.consent__toggle input:checked + .consent__toggle-track::after{ background:var(--c-on-accent); }
.embed-load:focus-visible{ outline-color:var(--c-accent); }
.embed-load--has-poster::before{ background:linear-gradient(180deg, transparent 40%, color-mix(in oklab, var(--c-dark) 55%, transparent)); }
.embed-load--has-poster:hover::before{ background:linear-gradient(180deg, transparent 50%, color-mix(in oklab, var(--c-dark) 35%, transparent)); }
.embed-load--has-poster .vid__play{ z-index:2; }
.embed-load__notice.is-error{ background:color-mix(in oklab, var(--c-dark) 88%, transparent); border-radius:var(--sh-sm); color:var(--c-ink-d); }
.embed-load__notice.is-error b{ color:var(--c-accent); }
.embed-load.is-loaded .vid__play{ display:none; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ═════════════ Geräte-Renderings (Blender, tools/blender) ═════════════
   Das Bild liegt oben, die Bildschirmfläche darin ist transparent. Darunter liegt der
   Bildschirminhalt (1000 px breit) und wird per matrix3d (site.js) perspektivisch eingepasst. */
.dv{ position:relative; margin:0; aspect-ratio:var(--ar); overflow:hidden; }
.dv__img{ position:absolute; inset:0; z-index:2; width:100%; height:100%; pointer-events:none; user-select:none; }
.dv__screen{
  position:absolute; left:0; top:0; z-index:1; width:1000px; height:calc(1000px / var(--sa));
  transform-origin:0 0; overflow:hidden; background:#000; visibility:hidden; --pw:1000px;
}
.dv.is-fit .dv__screen{ visibility:visible; }
.dv--phone .dv__screen{ border-radius:124px; }
.dv--monitor .dv__screen{ border-radius:4px; }
.dv__screen::after{
  content:""; position:absolute; inset:0; z-index:9; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.025) 38%, rgba(255,255,255,0) 38.3%);
}
.dv__screen > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Reels im Handy ganz zeigen: Bildschirm ist schmaler als 9:16, «cover» würde links und rechts die Untertitel abschneiden */
.dv--phone .dv__screen > video{ object-fit:contain; }

/* Sprachumschalter (DE/EN) */
.nav__cta{ display:flex; align-items:center; gap:.6rem; }
.nav__lang{
  display:inline-grid; place-items:center; min-width:2.6rem; height:2.6rem; padding:0 .6rem;
  border-radius:var(--sh-xs); box-shadow:inset 0 0 0 1px var(--line);
  font-size:.82rem; font-weight:800; letter-spacing:.08em; color:var(--fg-2); transition:color .25s, box-shadow .25s;
}
.nav__lang:hover{ color:var(--fg); box-shadow:inset 0 0 0 1px var(--fg-3); }
.mobile-menu .nav__lang{ width:auto; height:auto; padding:.5rem .9rem; margin-top:1rem; font-size:1rem; }

/* Über mich: Zahlen aus dem Lebenslauf */
.stats{ padding:var(--sp) 0; }
.stats__list{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.stats__list li{ padding:clamp(1.4rem, 2.4vw, 2rem); border-radius:var(--sh); background:var(--panel); box-shadow:0 0 0 1px var(--line); }
.stats__list b{ display:block; margin-bottom:.7rem; font-family:var(--display); font-weight:800; font-size:clamp(2rem, 3.6vw, 3rem); letter-spacing:-.04em; line-height:1; color:var(--hi); white-space:nowrap; }
.stats__list span{ color:var(--fg-2); font-size:.97rem; }