/* golden-blade.de · Stylesheet
   Welt „Stahl & Blattgold“: gebürsteter Stahlgrund, tiefes Schwarz, Gold nur als Folie.
   Einzige Quelle der Gestaltung. Schriften lokal in /fonts (SIL OFL). */

/* ---------- Schriften ---------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-normal-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:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Azeret Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/azeret-mono-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Azeret Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/azeret-mono-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+1E00-1E9F,U+2113,U+A720-A7FF;}

@property --sp{syntax:'<percentage>';inherits:true;initial-value:46%}
@property --fa{syntax:'<angle>';inherits:true;initial-value:112deg}

/* ---------- Tokens ---------- */
:root{
  --steel:#e8eaea; --steel-2:#dde0e0; --steel-3:#c8cccc; --paper:#f7f8f7;
  --ink:#111213; --ink-2:#1d1f21; --ink-3:#2c2f32;
  --text:#141618; --text-2:#434850; --text-3:#565c63;
  --on-ink:#f1f1ee; --on-ink-2:#b8bcc0; --on-ink-3:#8d9296;
  --gold:#e3b547; --gold-text:#6f4f06; --gold-ink:#2b1f03;
  --line:rgba(17,18,19,.14); --line-2:rgba(17,18,19,.26); --line-ink:rgba(241,241,238,.14);
  --foil:linear-gradient(var(--fa),#94650b 0%,#b98518 calc(var(--sp) - 32%),#eac654 calc(var(--sp) - 12%),#fff3c4 var(--sp),#dcab31 calc(var(--sp) + 12%),#b98518 calc(var(--sp) + 32%),#94650b 100%);
  --display:'Archivo','Arial Narrow',system-ui,sans-serif;
  --body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Azeret Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(18px,4.4vw,56px);
  --shell:min(1240px,100% - 2 * var(--gutter));
  --r:10px; --r-lg:16px;
  --shadow:0 1px 1px rgba(17,18,19,.06),0 10px 28px rgba(17,18,19,.1);
  --shadow-ink:0 18px 44px rgba(0,0,0,.45);
  color-scheme:light;
  scrollbar-color:var(--text-3) var(--steel);
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;color:var(--text);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;
  background:var(--steel);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 1px,transparent 1px 3px,rgba(17,18,19,.018) 3px 4px,transparent 4px 7px);}
img,svg{display:block;max-width:100%}
p{margin:0}
h1,h2,h3{margin:0;text-wrap:balance}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1.5px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a,button,summary,label{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
code{font-family:var(--mono);font-size:.92em;letter-spacing:-.01em}
::selection{background:var(--ink);color:var(--gold)}
.sec--ink ::selection{background:var(--gold);color:var(--gold-ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.sec--ink :focus-visible{outline-color:var(--gold)}
input,textarea{caret-color:var(--gold-text)}
.shell{width:var(--shell);margin-inline:auto}
.skip{position:absolute;left:12px;top:-64px;z-index:200;background:var(--ink);color:var(--on-ink);padding:12px 16px;border-radius:8px;font-weight:700}
.skip:focus{top:12px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.foil{background-image:var(--foil);color:var(--gold-ink)}
.gold{color:var(--gold-text)}
.sec--ink .gold{color:var(--gold)}

/* ---------- Kopfleiste ---------- */
.bar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--steel) 86%,transparent);backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid var(--line)}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.bar nav{display:flex;align-items:center;gap:26px}
.bar nav a:not(.btn){font-weight:600;font-size:15px;text-decoration:none;color:var(--text-2);min-height:44px;display:inline-flex;align-items:center}
.bar nav a:not(.btn):hover{color:var(--text)}
.mark{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-family:var(--display);font-stretch:75%;font-weight:800;font-size:21px;letter-spacing:-.01em;white-space:nowrap}
.mark b{font-weight:800;color:var(--gold-text)}
.mark-ic{width:30px;height:15px}
.mark--light{color:var(--on-ink)}
.mark--light b{color:var(--gold)}

/* ---------- Knöpfe und Chips ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:14px 22px;border-radius:var(--r);font-family:var(--display);font-stretch:112%;font-weight:750;font-size:15px;letter-spacing:.01em;text-decoration:none;white-space:nowrap;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .25s}
.btn svg{width:18px;height:18px;flex:none;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:scale(.98)}
.btn--ink{background:var(--ink);color:var(--on-ink);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 8px 20px rgba(17,18,19,.18)}
.btn--ink:hover{background:#000;box-shadow:0 12px 26px rgba(17,18,19,.26)}
.btn--ghost{box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--text)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--text)}
.btn--foil{background-image:var(--foil);color:var(--gold-ink);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.btn--foil:hover{box-shadow:0 14px 32px rgba(0,0,0,.45)}
.btn--sm{min-height:44px;padding:10px 16px;font-size:14px}
.btn--lg{min-height:54px;padding:16px 26px;font-size:16px}
.btn--block{width:100%}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;border-radius:999px;font-weight:600;font-size:14.5px;box-shadow:inset 0 0 0 1.5px var(--line-2);transition:box-shadow .25s,background-color .25s,transform .25s var(--ease)}
.chip svg{width:16px;height:16px}
.chip:hover{box-shadow:inset 0 0 0 1.5px var(--text)}
.chip:active{transform:scale(.97)}
.chip[data-state="done"]{background:var(--ink);color:var(--on-ink);box-shadow:none}
.chip--dark{color:var(--on-ink);box-shadow:inset 0 0 0 1.5px var(--line-ink)}
.chip--dark:hover{box-shadow:inset 0 0 0 1.5px var(--on-ink)}
.chip--dark[data-state="done"]{background-image:var(--foil);color:var(--gold-ink)}

/* ---------- Hero ---------- */
.hero{padding:clamp(40px,7vw,104px) 0 clamp(56px,8vw,112px)}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:clamp(20px,3vw,40px) clamp(28px,5vw,72px);align-items:start}
.hero-main{padding-top:clamp(0px,1vw,12px)}
.wm{grid-column:1/-1;position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 .08em;margin:0 0 clamp(8px,1.5vw,20px) -.04em;font-family:var(--display);font-stretch:75%;font-weight:850;letter-spacing:-.035em;line-height:.86;padding-bottom:.2em;font-size:clamp(52px,12.6vw,172px);color:var(--ink)}
.wm-word{display:inline-block;animation:reveal 1.15s var(--ease) .15s both}
.wm-tld{display:inline-block;align-self:center;margin-top:.12em;padding:.1em .18em .12em;border-radius:.12em;font-size:.44em;letter-spacing:-.02em;line-height:1;transform:rotate(-5deg);box-shadow:0 10px 24px rgba(17,18,19,.22);animation:stampIn .8s var(--ease) 1.05s both}
.wm-cut{position:absolute;left:-2%;top:48%;width:104%;height:4px;border-radius:4px;background-image:var(--foil);transform-origin:left center;transform:rotate(-4deg) scaleX(0);opacity:0;animation:cut 1.15s var(--ease) .15s both;pointer-events:none}
@keyframes reveal{from{clip-path:inset(-.4em 100% -.4em -.2em)}to{clip-path:inset(-.4em -.3em -.4em -.2em)}}
@keyframes cut{0%{transform:rotate(-4deg) scaleX(0);opacity:1}70%{transform:rotate(-4deg) scaleX(1);opacity:1}100%{transform:rotate(-4deg) scaleX(1);opacity:0}}
@keyframes stampIn{from{opacity:0;transform:rotate(-16deg) scale(1.5)}60%{opacity:1;transform:rotate(-3deg) scale(.96)}to{opacity:1;transform:rotate(-5deg) scale(1)}}
.claim{font-size:clamp(22px,2.2vw,30px);font-weight:650;line-height:1.22;letter-spacing:-.018em;max-width:28ch;text-wrap:balance}
.say{margin-top:14px;max-width:56ch;color:var(--text-2);font-size:17.5px}
.rot-line{margin-top:22px;font-family:var(--display);font-stretch:100%;font-weight:700;font-size:clamp(19px,1.7vw,23px);letter-spacing:-.01em;min-height:1.5em}
.rot{display:inline-block;color:var(--gold-text);border-bottom:2px solid currentColor;transition:opacity .3s,transform .45s var(--ease)}
.rot.out{opacity:0;transform:translateY(-.35em)}
.rot.in{opacity:0;transform:translateY(.35em);transition:none}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.spec{position:relative;margin-top:18px;background:var(--paper);border-radius:var(--r-lg);padding:26px 24px 20px;box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
.spec dl{margin:0;display:grid}
.spec dl div{display:grid;grid-template-columns:108px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);align-items:baseline}
.spec dl div:last-child{border-bottom:0}
.spec dt{font-family:var(--display);font-stretch:125%;font-weight:750;text-transform:uppercase;letter-spacing:.09em;font-size:11px;color:var(--text-3)}
.spec dd{margin:0;font-family:var(--mono);font-size:14px;color:var(--text)}
.spec .chip{margin-top:14px;width:100%;justify-content:center}
.stamp{position:absolute;right:-14px;top:-18px;padding:10px 14px 9px;border-radius:8px;font-family:var(--display);font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:12px;transform:rotate(6deg);box-shadow:0 10px 22px rgba(17,18,19,.22)}

/* ---------- Sektionen ---------- */
.sec{position:relative;padding:clamp(76px,10vw,136px) 0}
.sec--ink{background:var(--ink);color:var(--on-ink);color-scheme:dark}
.sec--line::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(28px,5vw,72px);align-items:end;margin-bottom:clamp(36px,5vw,60px)}
.h2{font-family:var(--display);font-stretch:75%;font-weight:850;font-size:clamp(42px,6vw,82px);line-height:.92;letter-spacing:-.03em}
.lede{font-size:clamp(17.5px,1.35vw,20px);line-height:1.5;color:var(--text-2);max-width:52ch}
.sec--ink .lede{color:var(--on-ink-2)}

/* ---------- Beispiele: Bühne ---------- */
.stage{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;margin-bottom:clamp(32px,4vw,48px)}
.pv{border-radius:14px;overflow:hidden;background:var(--bg);color:var(--fg);box-shadow:0 0 0 1px var(--line-ink),var(--shadow-ink);transition:background-color .5s var(--ease),color .5s var(--ease)}
.pv-bar{display:flex;align-items:center;gap:12px;height:42px;padding:0 14px;background:#1b1d1f;color:var(--on-ink-2);font-size:13px}
.pv-dots{display:flex;gap:6px}
.pv-dots i{width:10px;height:10px;border-radius:50%;background:#3a3d41}
.pv-url{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:28px;margin:0 auto;max-width:300px;border-radius:7px;background:#2a2d30;font-family:var(--mono);font-size:12.5px;color:var(--on-ink)}
.pv-url svg{width:12px;height:12px;color:var(--gold)}
.pv-tag{font-family:var(--display);font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;padding:5px 8px;border-radius:6px;background-image:var(--foil);color:var(--gold-ink)}
.pv-screen{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/9.4;display:flex;flex-direction:column;padding:clamp(16px,2.4vw,30px) clamp(18px,3vw,40px);transition:opacity .35s var(--ease),transform .5s var(--ease)}
.pv-screen.swap{opacity:0;transform:translateY(10px)}
.pv-nav{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid color-mix(in srgb,var(--fg) 16%,transparent);font-size:13px}
.pv-logo{display:inline-flex;align-items:center;gap:8px;min-width:0}
.pv-logo .bn{font-size:15px;white-space:nowrap}
.pv-ic{width:22px;height:22px;color:var(--ac);flex:none}
.pv-links{display:flex;gap:18px;color:color-mix(in srgb,var(--fg) 72%,transparent);white-space:nowrap}
.pv-hero{margin-top:auto;padding-top:24px;display:grid;justify-items:start;gap:10px;max-width:40ch}
.pv-sub{font-size:12px;color:var(--ac)}
.pv-name{font-size:clamp(34px,5.4vw,72px);line-height:.92}
.pv-line{font-size:clamp(14px,1.25vw,17px);line-height:1.45;color:color-mix(in srgb,var(--fg) 82%,transparent)}
.pv-cta{margin-top:6px;display:inline-flex;align-items:center;min-height:38px;padding:8px 16px;border-radius:var(--br,8px);background:var(--ac);color:var(--bg);font-weight:700;font-size:14px}
.stage-info{display:grid;gap:14px;align-content:center}
.si-sub{font-family:var(--display);font-stretch:75%;font-weight:850;font-size:clamp(34px,3.6vw,50px);line-height:.95;letter-spacing:-.02em}
.si-idea{font-size:18px;color:var(--on-ink-2);max-width:34ch}
.si-addr{margin-top:6px;font-size:14px;color:var(--on-ink-3)}
.si-addr code{display:inline-block;margin-top:6px;font-size:15.5px;color:var(--gold);padding:6px 10px;border-radius:8px;background:var(--ink-3);overflow-wrap:anywhere}

/* ---------- Beispiele: Filter und Raster ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.filter{min-height:44px;padding:10px 16px;border-radius:999px;font-weight:600;font-size:14.5px;color:var(--on-ink-2);box-shadow:inset 0 0 0 1.5px var(--line-ink);transition:background-color .25s,color .25s,box-shadow .25s,transform .25s var(--ease)}
.filter:hover{color:var(--on-ink);box-shadow:inset 0 0 0 1.5px var(--on-ink-3)}
.filter:active{transform:scale(.97)}
.filter[aria-pressed="true"]{background:var(--on-ink);color:var(--ink);box-shadow:none}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ex{display:flex;flex-direction:column;text-align:left;border-radius:14px;background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-ink);overflow:hidden;transition:transform .45s var(--ease),box-shadow .35s var(--ease)}
.ex:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--on-ink-3),0 16px 34px rgba(0,0,0,.35)}
.ex:active{transform:scale(.985)}
.ex[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--gold),0 16px 34px rgba(0,0,0,.35)}
.ex[hidden]{display:none}
.ex-logo{position:relative;overflow:hidden;isolation:isolate;display:grid;place-items:center;align-content:center;gap:6px;aspect-ratio:16/9;padding:14px;background:var(--bg);color:var(--fg);text-align:center}
.ex-logo svg{width:28px;height:28px;color:var(--ac);transition:transform .5s var(--ease)}
.ex:hover .ex-logo svg{transform:translateY(-3px) rotate(-8deg) scale(1.08)}
.ex-logo .bn{transition:letter-spacing .5s var(--ease)}
.ex-pat{position:absolute;inset:0;z-index:-1;background:var(--pat,none);opacity:var(--pat-o,.6);pointer-events:none;transition:transform .8s var(--ease)}
.ex:hover .ex-pat{transform:scale(1.08)}
.ex-logo .bn{font-size:22px;line-height:1}
.ex-logo .bs{font-size:10.5px;color:var(--ac)}
.ex-body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.ex-title{font-weight:700;font-size:16.5px;color:var(--on-ink)}
.ex-idea{font-size:14.5px;line-height:1.45;color:var(--on-ink-2)}
.ex-foot{margin-top:auto;padding-top:10px;display:flex;flex-direction:column;gap:6px}
.ex-addr{font-size:12.5px;color:var(--gold);overflow-wrap:anywhere}
.ex-cat{font-size:12.5px;color:var(--on-ink-3)}

/* ---------- Markenbilder der Beispiele (frei erfunden) ---------- */
.bn{font-family:var(--display);font-stretch:var(--st,100%);font-weight:var(--fw,800);letter-spacing:var(--ls,0);text-transform:var(--tt,none);display:inline-block;transform:skewX(var(--sk,0deg))}
.bs{font-family:var(--display);font-stretch:125%;font-weight:700;text-transform:uppercase;letter-spacing:.16em}
.b-forge{--bg:#17120d;--fg:#efe5d5;--ac:#d09a45;--st:100%;--fw:800;--ls:.16em;--tt:uppercase;--br:2px}
.b-esports{--bg:#0b0b14;--fg:#ffffff;--ac:#f4c430;--st:62%;--fw:900;--ls:.01em;--tt:uppercase;--sk:-9deg;--br:4px}
.b-spirits{--bg:#e4ede7;--fg:#173a2d;--ac:#7c5c12;--st:115%;--fw:650;--ls:.14em;--tt:uppercase;--br:999px}
.b-barber{--bg:#0f2a24;--fg:#f3eee4;--ac:#d9b35c;--st:62%;--fw:900;--ls:.02em;--tt:uppercase;--br:6px}
.b-fencing{--bg:#fbfbfa;--fg:#121212;--ac:#7f5f0c;--st:100%;--fw:450;--ls:.28em;--tt:uppercase;--br:0}
.b-fantasy{--bg:#231a33;--fg:#efe2c0;--ac:#d9b35b;--st:88%;--fw:600;--ls:.01em;--tt:none;--br:3px}
.b-razor{--bg:#f3f0e9;--fg:#141414;--ac:#7a5a0b;--st:125%;--fw:300;--ls:.32em;--tt:uppercase;--br:0}
.b-skate{--bg:#e7f0f7;--fg:#0c2b44;--ac:#185f9a;--st:75%;--fw:850;--ls:-.01em;--tt:none;--br:10px}
.b-garden{--bg:#1e3a1b;--fg:#eef4e1;--ac:#d7bb4b;--st:92%;--fw:800;--ls:0;--tt:none;--br:999px}
.b-golf{--bg:#0f2d22;--fg:#f5f0e2;--ac:#caa443;--st:112%;--fw:400;--ls:.22em;--tt:uppercase;--br:2px}
.b-wind{--bg:#eef1f4;--fg:#1a2733;--ac:#8a6210;--st:100%;--fw:750;--ls:0;--tt:none;--br:6px}
.b-fight{--bg:#1b0f0e;--fg:#fff3ea;--ac:#e6a624;--st:62%;--fw:900;--ls:.03em;--tt:uppercase;--sk:-4deg;--br:3px}
.b-skate .pv-cta,.b-spirits .pv-cta,.b-fencing .pv-cta,.b-razor .pv-cta,.b-wind .pv-cta{color:#fff}

/* ---------- Weitere Ideen (Laufband) ---------- */
.more{background:var(--ink);padding:0 0 clamp(64px,8vw,104px);overflow:hidden;display:grid;gap:12px}
.more-track{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.more-row{display:flex;gap:12px;width:max-content;animation:roll 70s linear infinite}
.more-track--rev .more-row{animation-direction:reverse;animation-duration:80s}
.more:hover .more-row{animation-play-state:paused}
.more-row span{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:999px;font-family:var(--display);font-stretch:100%;font-weight:650;font-size:15px;color:var(--on-ink-2);box-shadow:inset 0 0 0 1px var(--line-ink);white-space:nowrap}
.more-track--rev .more-row span{color:var(--on-ink-3)}
@keyframes roll{to{transform:translateX(-50%)}}

/* ---------- Was der Name mitbringt ---------- */
.facts{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1.5px solid var(--text)}
.fact{padding:24px 24px 8px 0;border-right:1px solid var(--line);margin-right:24px}
.fact:last-child{border-right:0;margin-right:0}
.fact dt{font-family:var(--display);font-stretch:88%;font-weight:800;font-size:22px;line-height:1.15;letter-spacing:-.01em}
.fact dd{margin:12px 0 0;color:var(--text-2);font-size:16px;line-height:1.55}

/* ---------- Ablauf und Fragen ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,36px);position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:22px;height:2px;background-image:var(--foil);transform-origin:left;transform:scaleX(var(--draw,1));transition:transform 1.4s var(--ease)}
.step{position:relative}
.step-n{position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--on-ink);font-family:var(--mono);font-weight:600;font-size:16px;box-shadow:0 0 0 6px var(--steel)}
.step h3{margin-top:18px;font-family:var(--display);font-stretch:88%;font-weight:800;font-size:22px;letter-spacing:-.01em}
.step p{margin-top:8px;color:var(--text-2);font-size:16px}
.faq{margin-top:clamp(56px,7vw,88px);border-top:1.5px solid var(--text);max-width:880px}
.ask{border-bottom:1px solid var(--line-2)}
.ask summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:64px;padding:16px 0;cursor:pointer;font-weight:700;font-size:clamp(17px,1.4vw,19px)}
.ask summary::-webkit-details-marker{display:none}
.ask-ic{position:relative;flex:none;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);transition:transform .45s var(--ease),background-color .25s}
.ask-ic::before,.ask-ic::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.8px;margin:-.9px 0 0 -6px;background:currentColor;border-radius:2px}
.ask-ic::after{transform:rotate(90deg)}
.ask[open] .ask-ic{transform:rotate(135deg);background:var(--ink);color:var(--on-ink);box-shadow:none}
.ask p{padding:0 0 22px;max-width:68ch;color:var(--text-2)}

/* ---------- Angebot ---------- */
.offer-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,6vw,88px);align-items:start}
.offer-intro .lede{margin-top:22px}
.direct{margin-top:26px;color:var(--on-ink-3);font-size:15px}
.direct a{display:inline-block;margin-top:4px;padding:8px 0;color:var(--on-ink);font-weight:650;font-size:18px}
.offer-intro .chip{margin-top:10px}
.vcard{margin-top:30px;font-style:normal;font-family:var(--mono);font-size:14px;line-height:1.6;color:var(--on-ink-2)}
.vcard b{display:block;font-family:var(--body);font-size:17px;color:var(--on-ink);margin-bottom:2px}
.composer{background:var(--paper);color:var(--text);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px);box-shadow:var(--shadow-ink);color-scheme:light}
.composer form{display:grid;gap:18px;margin:0}
.field{display:grid;gap:7px;border:0;margin:0;padding:0;min-width:0}
.field label,.field legend{font-weight:650;font-size:14px;color:var(--text-2);padding:0}
.field input,.field textarea{width:100%;font:500 16.5px/1.45 var(--body);color:var(--text);background:#fff;border:1.5px solid var(--line-2);border-radius:var(--r);padding:12px 14px;min-height:50px;transition:border-color .2s,box-shadow .2s;appearance:none}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(227,181,71,.45)}
.field textarea{resize:vertical;min-height:110px}
.field textarea::placeholder{color:var(--text-3)}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.seg{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg span{display:inline-flex;align-items:center;min-height:44px;padding:9px 14px;border-radius:999px;font-weight:600;font-size:14.5px;box-shadow:inset 0 0 0 1.5px var(--line-2);transition:background-color .2s,color .2s,box-shadow .2s}
.seg label:hover span{box-shadow:inset 0 0 0 1.5px var(--text)}
.seg input:checked + span{background:var(--ink);color:var(--on-ink);box-shadow:none}
.seg input:focus-visible + span{outline:3px solid var(--ink);outline-offset:2px}
.note{font-size:14px;color:var(--text-3)}
.mailpv{margin-top:18px;border-top:1px dashed var(--line-2);padding-top:6px}
.mailpv summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:650;font-size:14.5px;color:var(--text-2)}
.mailpv pre{margin:4px 0 0;font:13.5px/1.55 var(--mono);white-space:pre-wrap;color:var(--text-2)}

/* ---------- Rechtliches ---------- */
.legal{padding:clamp(48px,7vw,96px) 0 clamp(64px,8vw,112px)}
.legal-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.legal-nav a{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:999px;font-weight:650;font-size:15px;text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.legal-nav a:hover{box-shadow:inset 0 0 0 1.5px var(--text)}
.legal-part{margin-top:clamp(48px,6vw,80px);scroll-margin-top:84px}
.legal-part h2{font-family:var(--display);font-stretch:75%;font-weight:850;font-size:clamp(32px,4vw,48px);letter-spacing:-.02em;line-height:1}
.legal-lede{margin-top:12px;max-width:70ch;color:var(--text-2);font-size:17.5px}
.lb{display:grid;grid-template-columns:220px minmax(0,1fr);gap:10px clamp(20px,3vw,40px);padding:22px 0;border-bottom:1px solid var(--line)}
.legal-lede + .lb{margin-top:26px;border-top:1.5px solid var(--text)}
.lb h3{font-weight:750;font-size:16.5px;line-height:1.35}
.lb p,.lb ul{max-width:70ch;color:var(--text-2);line-height:1.6}
.lb p + p{margin-top:10px}
.lb ul{margin:0;padding-left:1.1em;display:grid;gap:6px}
.lb a{color:var(--text)}
.lb .strong{font-weight:700;color:var(--text)}

/* ---------- Fußzeile ---------- */
.foot{background:var(--ink);color:var(--on-ink-2);padding:clamp(40px,5vw,60px) 0 36px;border-top:1px solid var(--line-ink)}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 28px}
.foot nav{display:flex;flex-wrap:wrap;gap:0 22px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:600;font-size:15px}
.foot nav a:hover{color:var(--on-ink);text-decoration:underline}
.fine{margin-top:22px;max-width:92ch;font-size:13.5px;line-height:1.6;color:var(--on-ink-3)}
.fine b{color:var(--on-ink-2);font-weight:600}

/* ---------- Enthüllung beim Scrollen ---------- */
html.js .rv{opacity:0;transform:translateY(18px)}
html.js .rv.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}

/* ---------- Touch: der Glanz wandert von selbst ---------- */
@media (hover:none){
  :root{animation:sheen 9s ease-in-out infinite}
  .ex:hover{transform:none}
}
@keyframes sheen{0%,100%{--sp:30%;--fa:98deg}50%{--sp:70%;--fa:128deg}}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  :root{animation:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .more-row{animation:none;flex-wrap:wrap;width:auto;padding:0 var(--gutter)}
  .more-row span:nth-child(n+25){display:none}
  .more-track--rev{display:none}
  .wm-cut{display:none}
  html.js .rv{opacity:1;transform:none}
}

/* ---------- Responsiv ---------- */
@media (max-width:1080px){
  .hero-in{grid-template-columns:1fr;align-items:start}
  .spec{max-width:460px}
  .stage{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .facts{grid-template-columns:1fr 1fr}
  .fact:nth-child(2){border-right:0;margin-right:0}
  .fact{padding-bottom:24px;border-bottom:1px solid var(--line)}
}
@media (max-width:820px){
  body{font-size:16.5px}
  .bar-in{height:60px}
  .hide-sm{display:none!important}
  .sec-head{grid-template-columns:1fr;align-items:start}
  .grid{grid-template-columns:1fr 1fr;gap:12px}
  .steps{grid-template-columns:1fr;gap:26px}
  .steps::before{left:22px;right:auto;top:0;bottom:0;width:2px;height:auto;transform-origin:top;transform:scaleY(var(--draw,1))}
  .step{display:grid;grid-template-columns:46px 1fr;gap:4px 18px}
  .step-n{grid-row:1/3}
  .step h3{margin-top:9px}
  .step p{grid-column:2;margin-top:0}
  .offer-in{grid-template-columns:1fr}
  .field-2{grid-template-columns:1fr}
  .lb{grid-template-columns:1fr;gap:6px}
  .pv-links{display:none}
  .pv-screen{aspect-ratio:auto;min-height:300px}
}
@media (max-width:560px){
  .wm{font-size:clamp(50px,15.6vw,90px)}
  .acts .btn{width:100%}
  .facts{grid-template-columns:1fr}
  .fact{border-right:0;margin-right:0}
  .ex-logo .bn{font-size:17px}
  .ex-body{padding:12px 12px 14px}
  .ex-title{font-size:15.5px}
  .ex-idea{font-size:14px}
  .stamp{right:-6px}
  .mark{font-size:19px}
}
@media (max-width:380px){
  .grid{grid-template-columns:1fr}
  .mark span{font-size:17px}
}
.mailpv summary{list-style:none;justify-content:space-between;gap:12px}
.mailpv summary::-webkit-details-marker{display:none}
.mailpv summary::after{content:"+";display:grid;place-items:center;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);font-weight:500;font-size:18px;line-height:1;transition:transform .35s var(--ease)}
.mailpv[open] summary::after{transform:rotate(45deg)}

/* ---------- Sprachschalter ---------- */
.lang{display:inline-flex;align-items:center;min-height:44px;padding:4px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line-2);text-decoration:none;font-family:var(--display);font-stretch:125%;font-weight:800;font-size:11.5px;letter-spacing:.08em;transition:box-shadow .25s}
.lang span{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;border-radius:999px;color:var(--text-3)}
.lang span.on{background:var(--ink);color:var(--on-ink)}
.lang:hover{box-shadow:inset 0 0 0 1.5px var(--text)}
.lang:hover span:not(.on){color:var(--text)}
.show-xs{display:none}

/* ---------- Filterzähler ---------- */
.filter{display:inline-flex;align-items:center;gap:8px}
.filter-n{font-family:var(--mono);font-size:12px;opacity:.7}

/* ---------- Vorschau: Wasserzeichen ---------- */
.pv-pat{--pat-o:.5}
.pv-mark{position:absolute;right:-3%;bottom:-10%;width:44%;color:var(--ac);opacity:.12;z-index:-1;pointer-events:none;transform:rotate(-12deg)}
.pv-mark svg{width:100%;height:auto;stroke-width:1.2}
.pv-nav,.pv-hero{position:relative}

/* ---------- Eigene Idee ---------- */
.try{margin-top:22px;padding:18px;border-radius:14px;background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-ink)}
.try label{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15.5px;color:var(--on-ink)}
.try label svg{width:18px;height:18px;color:var(--gold)}
.try-row{display:flex;gap:8px;margin-top:10px}
.try input{flex:1;min-width:0;min-height:44px;padding:10px 14px;border-radius:var(--r);border:1.5px solid var(--line-ink);background:var(--ink);color:var(--on-ink);font:500 16px/1.4 var(--body);caret-color:var(--gold)}
.try input::placeholder{color:var(--on-ink-3)}
.try input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(227,181,71,.3)}
.try-hint{margin-top:10px;font-size:14px;color:var(--on-ink-3)}
.b-custom{--bg:#111213;--fg:#f1f1ee;--ac:#e3b547;--st:75%;--fw:850;--ls:-.02em;--tt:none;--br:10px;--pat:repeating-linear-gradient(115deg,transparent 0 22px,rgba(227,181,71,.08) 22px 23px)}

/* ---------- Muster der Beispielmarken ---------- */
.b-forge{--pat:radial-gradient(120% 90% at 50% 120%,rgba(208,154,69,.35),transparent 60%),repeating-linear-gradient(135deg,transparent 0 10px,rgba(239,229,213,.035) 10px 11px)}
.b-esports{--pat:linear-gradient(transparent 0 0),repeating-linear-gradient(0deg,transparent 0 23px,rgba(244,196,48,.08) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,rgba(244,196,48,.08) 23px 24px)}
.b-spirits{--pat:radial-gradient(circle at 80% 20%,rgba(124,92,18,.16) 0 18%,transparent 19%),radial-gradient(circle at 15% 85%,rgba(23,58,45,.08) 0 26%,transparent 27%)}
.b-barber{--pat:repeating-linear-gradient(-45deg,rgba(217,179,92,.07) 0 14px,transparent 14px 28px)}
.b-fencing{--pat:linear-gradient(35deg,transparent 49.6%,rgba(127,95,12,.25) 49.6% 50.4%,transparent 50.4%),linear-gradient(-35deg,transparent 49.6%,rgba(18,18,18,.12) 49.6% 50.4%,transparent 50.4%)}
.b-fantasy{--pat:radial-gradient(1px 1px at 20% 30%,#efe2c0,transparent),radial-gradient(1px 1px at 70% 20%,#efe2c0,transparent),radial-gradient(1.5px 1.5px at 85% 70%,#d9b35b,transparent),radial-gradient(1px 1px at 35% 80%,#efe2c0,transparent),radial-gradient(60% 60% at 50% 50%,rgba(217,179,91,.14),transparent 70%)}
.b-razor{--pat:repeating-linear-gradient(90deg,transparent 0 30px,rgba(20,20,20,.05) 30px 31px)}
.b-skate{--pat:radial-gradient(120% 60% at 50% 100%,rgba(24,95,154,.16),transparent 60%),repeating-linear-gradient(170deg,transparent 0 40px,rgba(255,255,255,.7) 40px 41px)}
.b-garden{--pat:repeating-linear-gradient(90deg,rgba(215,187,75,.07) 0 3px,transparent 3px 9px)}
.b-golf{--pat:radial-gradient(circle at 50% 50%,transparent 0 30%,rgba(202,164,67,.12) 30% 30.6%,transparent 30.6% 45%,rgba(202,164,67,.1) 45% 45.6%,transparent 45.6%)}
.b-wind{--pat:linear-gradient(160deg,rgba(138,98,16,.08),transparent 55%),repeating-linear-gradient(0deg,transparent 0 28px,rgba(26,39,51,.05) 28px 29px)}
.b-fight{--pat:radial-gradient(80% 80% at 50% 100%,rgba(230,166,36,.2),transparent 65%),repeating-linear-gradient(-12deg,transparent 0 18px,rgba(255,243,234,.04) 18px 36px)}
.b-cook{--bg:#f6efe4;--fg:#3b2412;--ac:#b4471f;--st:100%;--fw:700;--ls:.04em;--tt:none;--br:999px;--pat:repeating-linear-gradient(90deg,rgba(180,71,31,.07) 0 16px,transparent 16px 32px),repeating-linear-gradient(0deg,rgba(180,71,31,.07) 0 16px,transparent 16px 32px);--pat-o:.8}
.b-streetwear{--bg:#e9e6df;--fg:#111;--ac:#111;--st:62%;--fw:900;--ls:-.02em;--tt:uppercase;--br:0;--pat:linear-gradient(90deg,transparent 0 70%,#c9a227 70% 72%,transparent 72%),repeating-linear-gradient(0deg,transparent 0 5px,rgba(17,17,17,.04) 5px 6px)}
.b-podcast{--bg:#15121c;--fg:#f4eefc;--ac:#c9a2ff;--st:88%;--fw:800;--ls:0;--tt:none;--br:999px;--pat:repeating-radial-gradient(circle at 50% 110%,transparent 0 14px,rgba(201,162,255,.1) 14px 15px)}
.b-laser{--bg:#0d1417;--fg:#e8f4f7;--ac:#45d4c8;--st:125%;--fw:700;--ls:.18em;--tt:uppercase;--br:2px;--pat:repeating-linear-gradient(0deg,transparent 0 15px,rgba(69,212,200,.07) 15px 16px),repeating-linear-gradient(90deg,transparent 0 15px,rgba(69,212,200,.07) 15px 16px),linear-gradient(105deg,transparent 49.7%,rgba(69,212,200,.5) 49.7% 50.3%,transparent 50.3%)}
.b-bar{--bg:#1d0f15;--fg:#f6e7d9;--ac:#e0a44f;--st:88%;--fw:500;--ls:.1em;--tt:uppercase;--br:999px;--pat:radial-gradient(70% 55% at 50% 0%,rgba(224,164,79,.25),transparent 70%)}
.b-boardgame{--bg:#123a4a;--fg:#fbf5e6;--ac:#f0bd4f;--st:75%;--fw:850;--ls:.01em;--tt:none;--br:8px;--pat:conic-gradient(from 45deg,rgba(240,189,79,.08) 0 25%,transparent 0 50%,rgba(240,189,79,.08) 0 75%,transparent 0);--pat-o:1}
.b-streetwear .ex-logo .bn,.b-streetwear .pv-name{text-decoration:line-through;text-decoration-thickness:.08em;text-decoration-color:#c9a227}
.b-cook .pv-cta,.b-streetwear .pv-cta{color:#fff}
.b-laser .pv-cta,.b-podcast .pv-cta{color:#0d0d10}

@media (max-width:820px){
  .try-row{flex-direction:column}
  .try-row .btn{width:100%}
}
@media (max-width:480px){
  .hide-xs{display:none}
  .show-xs{display:inline}
  .bar nav{gap:8px}
  .mark{font-size:17px;gap:7px}
  .mark-ic{width:24px;height:12px}
  .lang{padding:3px;font-size:10.5px;letter-spacing:.04em}
  .lang span{min-width:36px;height:36px}
  .bar .btn--sm{padding:10px 13px}
}
@media (max-width:360px){
  .mark span{display:none}
}