/* =========================================================
   LEO — Webdesign Portfolio
   Cabinet Grotesk + Satoshi · warm paper + electric accent
   ========================================================= */

/* Self-hosted fonts (Fontshare, licensed free) — no third-party request,
   so no visitor IP leaves to api.fontshare.com (DSGVO-clean). */
@font-face { font-family: 'Cabinet Grotesk'; src: url('assets/fonts/cabinet-grotesk-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('assets/fonts/cabinet-grotesk-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('assets/fonts/cabinet-grotesk-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('assets/fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('assets/fonts/satoshi-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('assets/fonts/satoshi-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --paper:   #f2efe8;
  --paper-2: #e9e5db;
  --ink:     #141310;
  --ink-2:   #1d1b16;
  --accent:  #ff4a1c;
  --muted:   #6e685c;
  --muted-2: #9b9484;
  --line:    rgba(20, 19, 15, 0.12);
  --display: 'Cabinet Grotesk', sans-serif;
  --body:    'Satoshi', sans-serif;
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h:   84px;
  --gutter:  max(5vw, calc(50vw - 640px)); /* matches .container right edge */
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body { font-family: var(--body); font-weight: 400; background: var(--paper); color: var(--ink); line-height: 1.6; overflow-x: clip; }   /* clip (not hidden) keeps position:sticky working */
h1, h2, h3, .display { font-family: var(--display); font-weight: 800; line-height: 0.98; letter-spacing: -0.02em; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
::selection { background: var(--accent); color: #fff; }

.container { width: min(1280px, 90%); margin: 0 auto; }
section { padding: clamp(72px, 11vw, 150px) 0; position: relative; }

.eyebrow { font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--accent); display: inline-flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--accent); }

/* ---------- BUTTONS (pill, magnetic) ---------- */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 17px 36px; border-radius: 60px; font-family: var(--body); font-size: 0.92rem; font-weight: 700; transition: color 0.35s var(--ease), border-color 0.35s; border: 1.5px solid var(--ink); }
.btn > span { position: relative; z-index: 1; }              /* base label */
.btn-fill { background: var(--ink); color: var(--paper); }
.btn-fill:hover { border-color: var(--accent); }
.btn-line { background: transparent; color: var(--ink); }
.btn-light { border-color: rgba(242,239,232,0.4); color: var(--paper); }
.btn-dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }   /* solid dark — reads on the orange CTA band */

/* ink-spread fill on hover (Robin Delaporte sprite mask, like Vasili).
   .fill is a duplicate label in the hover colours, revealed by the ragged
   sprite mask — so the text is always readable: base shows in empty areas,
   fill shows in inked areas. */
.btn .fill { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none;
  -webkit-mask: url(assets/ink-sprite.png) no-repeat; mask: url(assets/ink-sprite.png) no-repeat;
  -webkit-mask-size: 2300% 100%; mask-size: 2300% 100%;
  -webkit-mask-position: 100% 0; mask-position: 100% 0; }   /* rest = empty frame */
.btn-fill .fill { background: var(--accent); color: #fff; }  /* dark button -> orange ink + white label */
.btn-line .fill { background: var(--ink);   color: var(--paper); }  /* outline -> dark ink + cream label */
.btn-light .fill { background: var(--paper); color: var(--ink); }   /* dark-section -> light ink + dark label */
.btn-dark .fill { background: var(--paper); color: var(--ink); }    /* dark button -> cream ink + dark label */
@keyframes inkIn  { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes inkOut { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }

/* ---------- LOADER ---------- */
#loader { position: fixed; inset: 0; z-index: 9999; background: var(--ink); display: flex; align-items: center; justify-content: center; transition: opacity 0.45s var(--ease), visibility 0.45s; }
#loader.done { opacity: 0; visibility: hidden; }
#loader .l { position: relative; font-family: var(--display); font-weight: 800; font-size: 3rem; color: var(--paper); }
#loader .l b { color: var(--accent); }
#loader .logo-spark { width: 46px; height: 46px; top: -20px; right: -40px; }

/* ---------- HEADER ---------- */
header { position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 800; display: flex; align-items: center; transition: background 0.4s var(--ease); }
header.scrolled { background: rgba(242,239,232,0.9); backdrop-filter: blur(12px); }   /* constant height — only the backdrop changes on scroll, so the menu button never shifts */
.nav { display: flex; align-items: center; justify-content: space-between; }
.logo { position: relative; font-family: var(--display); font-weight: 800; font-size: 1.7rem; letter-spacing: -0.03em; }
.logo b { color: var(--accent); }
/* ink-spark by the "o" — same strokes as the click burst */
.logo-spark { position: absolute; top: -11px; right: -24px; width: 28px; height: 28px; overflow: visible; pointer-events: none; }
.logo-spark path { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: sparkDraw 5s ease-in-out infinite; }
.logo-spark path:nth-child(1) { animation-delay: 0s; }
.logo-spark path:nth-child(2) { animation-delay: .12s; }
.logo-spark path:nth-child(3) { animation-delay: .24s; }
.logo-spark path:nth-child(4) { animation-delay: .36s; }
@keyframes sparkDraw {
  0%   { stroke-dashoffset: 1; }   /* hidden */
  12%  { stroke-dashoffset: 0; }   /* drawn in */
  86%  { stroke-dashoffset: 0; }   /* hold */
  100% { stroke-dashoffset: -1; }  /* wipe out, then loop redraws */
}
/* ===== Vasili's clone-roll as a crisp slot-reel, with PER-FACE colors.
   Like him: MENÜ = dark pill / light text, ✕ = accent pill / dark text.
   The pill is a clipping window; the colored faces roll → the colour
   changes exactly at the moment ✕ rolls in. ===== */
.menu-btn { position: fixed; top: 19px; right: var(--gutter); display: inline-block; height: 46px; border-radius: 60px; overflow: hidden; z-index: 950; padding: 0; background: transparent; transition: top 0.35s var(--ease); }   /* vertically centered in the 84px header — fixed, never shifts on scroll */
.menu-btn.open { top: 16px; }   /* when open, align with the panel (top:14) */
.mb-reel { display: flex; flex-direction: column; transform: translateY(0); }   /* closed rest = Menü (no will-change — it escaped the button's overflow clip during the top transition) */
.menu-btn.open .mb-reel { transform: translateY(-138px); }                                              /* open rest = ✕ — governed by the class, not the animation */
.mb-face { height: 46px; flex: none; display: flex; align-items: center; justify-content: center; padding: 0 28px; white-space: nowrap; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }
.mb-face.is-menu { background: var(--ink); color: var(--paper); }
.mb-face.is-x    { background: var(--accent); color: #fff; font-size: 1rem; }
/* orange ink fill on hover (same sprite mask as .btn-fill) — duplicate MENÜ in hover colours */
.menu-btn .mb-fill { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  padding: 0 28px; white-space: nowrap; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
  background: var(--accent); color: #fff; pointer-events: none;
  -webkit-mask: url(assets/ink-sprite.png) no-repeat; mask: url(assets/ink-sprite.png) no-repeat;
  -webkit-mask-size: 2300% 100%; mask-size: 2300% 100%;
  -webkit-mask-position: 100% 0; mask-position: 100% 0; }   /* rest = empty frame */
.menu-btn.open .mb-fill { display: none; }   /* no Menü-fill over the ✕ state */
@keyframes reelOpen {
  0%,  12% { transform: translateY(0);       }   /* Menü  (dark) */
  32%, 44% { transform: translateY(-46px);   }   /* roll → Menü  (dark) */
  64%, 76% { transform: translateY(-92px);   }   /* roll → ✕  (accent) */
  100%     { transform: translateY(-138px);  }   /* roll → ✕  (accent) */
}
@keyframes reelClose {
  0%,  12% { transform: translateY(-138px);  }   /* ✕  (accent) */
  32%, 44% { transform: translateY(-92px);   }   /* roll → ✕  (accent) */
  64%, 76% { transform: translateY(-46px);   }   /* roll → Menü  (dark) */
  100%     { transform: translateY(0);       }   /* roll → Menü  (dark) */
}

/* ---------- CLICK BURST FX ---------- */
.clickfx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9500; overflow: hidden; }
.clickfx-burst { position: fixed; width: 120px; height: 120px; transform: translate(-50%, -50%); overflow: visible; }
.clickfx-burst path { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-dashoffset: var(--start); animation: clickfx-wipe 0.92s var(--ease) var(--delay) forwards; }
.clickfx-burst.on-accent path { stroke: var(--ink); }   /* black strokes on the orange ✕ button */
@keyframes clickfx-wipe { to { stroke-dashoffset: var(--end); } }

/* ---------- SIDE MENU — panel morphs out of the button ---------- */
.menu { position: fixed; top: 14px; right: var(--gutter); width: min(380px, 88vw); z-index: 900; padding: 82px 36px 36px; pointer-events: none;
        --bw: 130px; --bh: 60px; --bx: -24px; --by: 18px;
        --mb: cubic-bezier(.76, 0, .24, 1);      /* his panel-morph easing */
        --mi: cubic-bezier(.215, .61, .355, 1); }/* his item-reveal easing */
.menu::before { content: ''; position: absolute; top: 0; right: 0; z-index: -1; width: var(--bw); height: var(--bh);
        background: var(--ink); border: 1.5px solid transparent; border-radius: 26px; transform: translate(var(--bx), var(--by));
        transition: width .75s var(--mb), height .75s var(--mb), transform .75s var(--mb), border-color .5s ease .25s; }
.menu.open { pointer-events: auto; }
.menu.open::before { width: 100%; height: 100%; transform: translate(0, 0); border-color: rgba(242, 239, 232, 0.22); }   /* light outline reads on dark sections */
.menu nav, .menu .m-foot { position: relative; z-index: 1; }   /* keep links above the morphing ::before */
.menu nav { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.menu nav a { display: inline-flex; align-items: center; color: var(--paper);
        font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 4.5vw, 2.1rem); letter-spacing: -0.02em; padding: 9px 0;
        opacity: 0; transform: translateX(28px); transition: opacity .35s linear, transform .65s var(--mi), color .25s; }
.menu.open nav a { opacity: 1; transform: translateX(0); transition-delay: calc(.55s + var(--i) * .1s); }   /* his timing */
/* arrow slides out left→right on hover and pushes the label right (like Vasili) */
.menu nav a .arr { display: inline-flex; align-items: center; overflow: hidden; max-width: 0; transform: translateX(-0.7em);
        transition: max-width .6s cubic-bezier(.65,0,.35,1), transform .6s cubic-bezier(.65,0,.35,1); }
.menu nav a .arr svg { width: 1.5em; height: auto; display: block; stroke-width: 1.5; }   /* thinner than the letters */
.menu nav a:hover { color: var(--accent); }
.menu nav a:hover .arr { max-width: 1.8em; transform: translateX(0); }
.menu .m-foot { margin-top: 26px; padding-top: 20px; border-top: 1px solid transparent; display: flex; flex-direction: column; gap: 7px; transition: border-color .4s ease; }
.menu.open .m-foot { border-top-color: rgba(242,239,232,.16); }   /* only show the footer rule when the panel is open — otherwise it leaks as a fixed line over dark sections */
.menu .m-foot a, .menu .m-foot span { color: var(--muted-2); font-size: .86rem; font-weight: 500;
        opacity: 0; transform: translateX(22px); transition: opacity .35s linear, transform .65s var(--mi), color .25s; }
.menu.open .m-foot a, .menu.open .m-foot span { opacity: 1; transform: translateX(0); transition-delay: calc(.7s + var(--i) * .1s); }   /* his footer timing */
.menu .m-foot a:hover { color: var(--accent); }

/* ---------- HERO ---------- */
/* sticky hero — the page body slides up and overlaps it on scroll (Vasili curtain) */
.hero { min-height: 100vh; display: flex; align-items: center; padding-top: 88px; padding-bottom: 40px; position: sticky; top: 0; z-index: 1; background: var(--paper-2); }
.page-body { position: relative; z-index: 2; background: var(--paper); border-radius: 30px 30px 0 0; box-shadow: 0 -26px 70px rgba(20, 19, 15, 0.13); overflow: hidden; }   /* clip content (marquee borders) to the rounded top corners */
.hero__in { max-width: 1000px; }
.hero h1 { font-size: clamp(2.3rem, min(7.5vw, 8.4vh), 6.4rem); margin: 16px 0 0; position: relative; }
.hero h1 .accent { color: var(--accent); }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: block; }
.hero p { font-size: clamp(1rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 540px; margin: 20px 0 28px; }
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hero__scroll { position: absolute; bottom: 30px; left: 0; right: 0; }
.hero__scroll .container { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; }

/* ---------- MARQUEE ---------- */
.marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; overflow: hidden; white-space: nowrap; }
.marquee__t { display: inline-flex; animation: marq 26s linear infinite; }
.marquee__t span { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.4rem); text-transform: uppercase; letter-spacing: -0.01em; padding: 0 28px; display: inline-flex; align-items: center; }
.marquee__t span::after { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; margin-left: 28px; vertical-align: middle; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- SECTION HEAD ---------- */
.s-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: clamp(40px, 6vw, 72px); flex-wrap: wrap; }
.s-head h2 { font-size: clamp(2.4rem, 6vw, 4.4rem); max-width: 14ch; }
.s-head p { color: var(--muted); max-width: 380px; }

/* ---------- LEISTUNGEN ---------- */
.serv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.serv { background: var(--paper); padding: 44px 34px; transition: background 0.4s var(--ease); position: relative; overflow: hidden; }
.serv:hover { background: var(--paper-2); }
/* a radial glow tracks the cursor across each card */
.serv::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s; pointer-events: none;
  background: radial-gradient(240px at var(--mx) var(--my), rgba(255, 74, 28, 0.22), transparent 65%); }
.serv:hover::before { opacity: 1; }
.serv .num, .serv h3, .serv p { position: relative; z-index: 1; }
.serv .num { font-family: var(--display); font-weight: 700; color: var(--accent); font-size: 0.9rem; }
.serv h3 { font-size: 1.9rem; margin: 16px 0 10px; }
.serv p { color: var(--muted); font-size: 0.96rem; }

/* key words in headings — a warm gradient flows endlessly through the letters
   (scoped to h1/h2; the split-lead word keeps its own letter-reveal + solid accent,
    because background-clip:text breaks across its per-letter inline-block spans) */
h1 .accent, h2 .accent {
  background: linear-gradient(90deg, #ff4a1c, #ffb05a, #ff4a1c, #ff7a3c);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradtext 4s linear infinite;
}
/* on the orange CTA band an orange word vanishes — flow a light gradient instead */
.cta-band .accent {
  background: linear-gradient(90deg, #fff, #ffe6d2, #fff, #ffd9bd);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@keyframes gradtext { to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) { h1 .accent, h2 .accent { animation: none; } }

/* ---------- FÜR WEN — editorial niche list ---------- */
.niches { list-style: none; border-top: 1px solid var(--line); }
.niche { display: flex; align-items: baseline; justify-content: space-between; gap: 28px;
  padding: clamp(20px, 2.6vw, 30px) 0 clamp(20px, 2.6vw, 30px) 0; border-bottom: 1px solid var(--line);
  position: relative; transition: padding-left 0.45s var(--ease); }
.niche::before { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 2px; background: var(--accent);
  transform: translateY(-50%); transition: width 0.45s var(--ease); }
.niche .n-name { font-family: var(--display); font-weight: 700; font-size: clamp(1.55rem, 4.2vw, 3rem);
  letter-spacing: -0.02em; line-height: 1.05; transition: color 0.3s var(--ease); }
.niche .n-desc { color: var(--muted); font-size: 0.92rem; letter-spacing: 0.04em; text-align: right;
  white-space: nowrap; transition: color 0.3s var(--ease); }
@media (hover: hover) {
  .niche:hover { padding-left: clamp(22px, 2.6vw, 44px); }
  .niche:hover::before { width: clamp(12px, 1.8vw, 28px); }
  .niche:hover .n-name { color: var(--accent); }
  .niche:hover .n-desc { color: var(--ink); }
}
@media (max-width: 640px) {
  .niche { flex-direction: column; gap: 6px; align-items: flex-start; }
  .niche .n-desc { text-align: left; white-space: normal; }
}

/* ---------- ABLAUF — 4-step process ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 30px; }
.step { position: relative; padding-top: 24px; border-top: 2px solid var(--ink); }
.step__n { font-family: var(--display); font-weight: 700; font-size: 0.9rem; color: var(--accent); letter-spacing: 0.12em; }
.step h3 { font-size: 1.45rem; margin: 14px 0 10px; letter-spacing: -0.01em; }
.step p { color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; gap: 40px 30px; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- CTA BAND (accent) ---------- */
.cta-band { background: var(--accent); color: var(--ink); text-align: center; }
.cta-band h2 { font-size: clamp(2rem, 5vw, 3.6rem); max-width: 18ch; margin: 0 auto; letter-spacing: -0.02em; line-height: 1.06; }
.cta-band p { max-width: 480px; margin: 20px auto 0; font-size: 1.05rem; color: rgba(20,19,15,0.72); }
.cta-band__btns { display: flex; gap: 16px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }

/* ---------- PROJEKTE (cases) ---------- */
.cases { display: flex; flex-direction: column; gap: clamp(28px, 5vw, 64px); }
.case { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.case:nth-child(even) .case__media { order: 2; }
.case__media { position: relative; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; background: var(--ink); cursor: pointer; }
/* WebGL liquid-morph canvas (injected by hover-effect) + no-JS fallback image */
.case__media canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; z-index: 1; display: block; }
.case__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.case__media.liquid-on .case__fallback { opacity: 0; }   /* hide fallback once canvas is live */
.case__media .tag { position: absolute; top: 16px; left: 16px; z-index: 3; background: var(--paper); color: var(--ink); padding: 6px 14px; border-radius: 30px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.case__body .meta { display: flex; gap: 18px; color: var(--muted); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.case__body h3 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 14px; }
.case__body p { color: var(--muted); margin-bottom: 22px; max-width: 440px; }
.case__body .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.case__body .tags i { font-style: normal; font-size: 0.78rem; color: var(--ink); border: 1px solid var(--line); padding: 5px 12px; border-radius: 30px; }
.case__link { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 0.95rem; }
.case__link:hover { color: var(--accent); }
.case__link svg { width: 16px; transition: transform 0.3s; }
.case__link:hover svg { transform: translate(3px,-3px); }

/* ---------- WARUM ---------- */
.warum { background: var(--ink); color: var(--paper); }
.warum .s-head h2 { color: var(--paper); }
.warum .s-head p { color: var(--muted-2); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.why { padding-top: 26px; border-top: 1px solid rgba(242,239,232,0.16); }
.why .ic { color: var(--accent); width: 30px; height: 30px; margin-bottom: 16px; }
.why .ic svg { width: 100%; height: 100%; }
.why h3 { font-size: 1.4rem; margin-bottom: 8px; }
.why p { color: var(--muted-2); font-size: 0.94rem; }

/* ---------- ABOUT ---------- */
.about__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
.about__photo img { width: 100%; height: auto; display: block; border-radius: 18px;
  box-shadow: 0 30px 60px rgba(20,19,15,0.13); }
@media (max-width: 820px) {
  .about__grid { grid-template-columns: 1fr; gap: 44px; }
  .about__photo { max-width: 340px; }
}
.about p { font-size: clamp(1.5rem, 3.4vw, 2.6rem); font-family: var(--display); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.about p .accent { color: var(--accent); }
/* split-letter reveal — each letter pivots up from its baseline (like the hero intro, per-letter) */
.about p.split-lead .word { display: inline-block; }
.about p.split-lead .ch, .about p.split-lead .ch > span { display: inline-block; }
.about__sub { font-family: var(--body) !important; font-size: 1.05rem !important; font-weight: 400 !important; color: var(--muted); margin-top: 26px; max-width: 560px; line-height: 1.6 !important; }
.about__partner { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 12px 18px; border: 1.5px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 40px; text-decoration: none; color: var(--ink); font-size: 0.9rem; line-height: 1.4; transition: border-color .2s, background .2s; max-width: 480px; }
.about__partner:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.about__partner svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); }
.about__partner strong { color: var(--accent); }

/* ---------- KONTAKT ---------- */
.kontakt { background: var(--ink); color: var(--paper); text-align: center; }
.kontakt .eyebrow { justify-content: center; }
.kontakt h2 { font-size: clamp(2.6rem, 7vw, 6rem); margin: 18px 0 30px; }
.kontakt h2 a { text-decoration: none; transition: color 0.3s; }
.kontakt h2 a:hover { color: var(--accent); }
.kontakt__cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.kontakt__links { margin-top: 40px; display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; color: var(--muted-2); }
.kontakt__links a { color: var(--paper); font-weight: 500; }
.kontakt__links a:hover { color: var(--accent); }

/* ---------- FOOTER ---------- */
footer { background: var(--ink); color: var(--muted-2); padding: 30px 0; border-top: 1px solid rgba(242,239,232,0.1); }
footer .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 0.84rem; }
footer .logo { color: var(--paper); font-size: 1.3rem; }
footer .logo-spark { width: 22px; height: 22px; top: -9px; right: -18px; }
.footer-legal { display: inline-flex; gap: 20px; }
.footer-legal a { color: var(--muted-2); transition: color 0.25s var(--ease); }
.footer-legal a:hover { color: var(--accent); }

/* ---------- LANGUAGE SWITCH (menu + footer) ---------- */
.lang-switch { display: inline-flex; gap: 2px; align-items: center; }
.lang-switch button { font-family: var(--body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--muted-2); padding: 5px 10px; border-radius: 30px; transition: color 0.25s, background 0.25s; }
.lang-switch button:hover { color: var(--paper); }
.lang-switch button.active { color: var(--ink); background: var(--accent); }
/* inside the menu panel: stay hidden with the rest of the menu until it opens (no leak) */
.menu .m-foot .lang-switch { margin-top: 10px; opacity: 0; transform: translateX(22px); transition: opacity .35s linear, transform .65s var(--mi); }
.menu.open .m-foot .lang-switch { opacity: 1; transform: translateX(0); transition-delay: .8s; }

/* ---------- REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}.reveal[data-d="3"]{transition-delay:.24s}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .serv-grid, .why-grid { grid-template-columns: 1fr; }
  .case, .case:nth-child(even) .case__media { grid-template-columns: 1fr; }
  .case:nth-child(even) .case__media { order: 0; }
  .s-head { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal, .menu nav a, .menu .m-foot a, .menu .m-foot span { opacity: 1 !important; transform: none !important; }
  .logo-spark path { animation: none !important; stroke-dashoffset: 0 !important; }   /* keep spark drawn */
}

/* ---------- LEGAL PAGES (Impressum / Datenschutz) ---------- */
.legal { padding: clamp(120px, 16vh, 200px) 0 clamp(70px, 10vh, 120px); }
.legal .container { max-width: 760px; }
.legal .back { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 34px; }
.legal .back svg { width: 26px; height: 14px; }
.legal h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.1rem, 6vw, 3.4rem);
  letter-spacing: -0.02em; line-height: 1.04; margin-bottom: 14px; }
.legal .lede { color: var(--muted); font-size: 1rem; margin-bottom: 46px; max-width: 60ch; }
.legal h2 { font-family: var(--display); font-weight: 700; font-size: 1.4rem; margin: 40px 0 12px; }
.legal h3 { font-weight: 700; font-size: 1.02rem; margin: 24px 0 6px; }
.legal p, .legal li { color: var(--ink); font-size: 0.98rem; line-height: 1.7; }
.legal p { margin-bottom: 14px; }
.legal ul { list-style: none; margin: 0 0 14px; padding: 0; }
.legal li { position: relative; padding-left: 20px; margin-bottom: 6px; }
.legal li::before { content: ''; position: absolute; left: 0; top: 11px; width: 7px; height: 2px; background: var(--accent); }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal .ph { background: rgba(255, 74, 28, 0.12); color: var(--accent); padding: 1px 7px; border-radius: 4px;
  font-family: var(--display); font-weight: 700; font-size: 0.86em; }
.legal .note { margin-top: 50px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper-2); color: var(--muted); font-size: 0.88rem; }
.legal .updated { color: var(--muted); font-size: 0.85rem; margin-top: 36px; }