/* ==========================================================================
   Inter — self-hosted.
   Two reasons, and both matter:
   1. Speed. Google Fonts costs two extra DNS + TLS handshakes to third-party
      origins before a single glyph can render, and the stylesheet is
      render-blocking. Serving from our own origin removes that entirely.
   2. Recht. A German site that calls fonts.googleapis.com hands the visitor's
      IP address to Google without consent — exactly what LG München I ruled
      on in 2022 (Az. 3 O 17493/20).
   Latin subset only, the eight cuts the site actually uses.
   ========================================================================== */
@font-face{font-family:"Inter";font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/inter-300.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:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-400.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:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/inter-500.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:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-600.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:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/inter-700.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:"Inter";font-style:normal;font-weight:800;font-display:swap;src:url("/fonts/inter-800.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:"Inter";font-style:italic;font-weight:300;font-display:swap;src:url("/fonts/inter-300-italic.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:"Inter";font-style:italic;font-weight:700;font-display:swap;src:url("/fonts/inter-700-italic.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}
/* ============================================================
   ACS3000 YACHT KERAMIK — shared design system
   One stylesheet for every page. Type, colour and spacing
   are defined here only, so nothing drifts between pages.
   ============================================================ */
:root{
  /* colour */
  --ink:#141514;
  --ink-2:#1e201e;
  --ink-3:#2a2c2a;
  --paper:#f2f0eb;
  --paper-2:#e8e6df;
  --white:#ffffff;
  --yellow:#fdc500;
  --muted-d:rgba(242,240,235,.62);   /* body text on dark */
  --muted-l:rgba(20,21,20,.62);      /* body text on light */
  --line-d:rgba(242,240,235,.16);
  --line-l:rgba(20,21,20,.16);
  /* layout */
  --shell:min(1440px,94vw);
  --nav-h:64px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

/* ---------- type scale ---------- */
.h-xl,.h-lg,.h-md,.h-sm{text-transform:uppercase;font-weight:700;letter-spacing:-.042em;line-height:.9}
.h-xl{font-size:clamp(34px,5.6vw,86px)}
.h-lg{font-size:clamp(28px,4vw,58px)}
.h-md{font-size:clamp(22px,2.4vw,36px)}
.h-sm{font-size:clamp(18px,1.5vw,24px);letter-spacing:-.03em}
.h-xl .dot,.h-lg .dot,.h-md .dot{color:var(--yellow)}

/* editorial hero variant: light weight + yellow italic */
.h-hero{font-size:clamp(34px,5.4vw,80px);font-weight:300;letter-spacing:-.035em;line-height:.98;text-transform:none}
.h-hero i{font-style:italic;color:var(--yellow);font-weight:300;display:block}

.eyebrow{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.eyebrow.y{color:var(--yellow)}
.eyebrow.m{color:var(--muted-l)}
.eyebrow.md{color:var(--muted-d)}
.eyebrow .bar{display:inline-block;width:22px;height:7px;background:var(--yellow);margin-right:12px;vertical-align:middle}
.lede{font-size:clamp(14px,1.05vw,16px);line-height:1.65;max-width:52ch}
.small{font-size:13px;line-height:1.6}
.tiny{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.on-dark{color:var(--paper)} .on-dark .lede,.on-dark .small{color:var(--muted-d)}
.on-light .lede,.on-light .small{color:var(--muted-l)}

/* ---------- layout ---------- */
.shell{width:var(--shell);margin:0 auto}
.sec{padding:clamp(56px,7vw,110px) 0}
.sec-tight{padding:clamp(38px,4vw,64px) 0}
.dark{background:var(--ink);color:var(--paper)}
.dark-2{background:var(--ink-2);color:var(--paper)}
.light{background:var(--paper);color:var(--ink)}
.split-2{display:grid;grid-template-columns:1fr 1fr}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr)}
.gap-1{gap:1px}.gap-s{gap:16px}.gap-m{gap:28px}
.pad{padding:clamp(28px,3.4vw,56px)}
.stack>*+*{margin-top:16px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:80;background:var(--ink);color:var(--paper)}
.nav-in{width:var(--shell);margin:0 auto;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;letter-spacing:-.045em}
.logo em{font-style:normal;background:var(--yellow);color:var(--ink);font-size:9px;font-weight:700;letter-spacing:.18em;padding:3px 6px}
.nav-links{display:flex;gap:30px}
.nav-links a{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-d);transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--paper)}
.nav-right{display:flex;align-items:center;gap:18px}
.lang{font-size:10px;letter-spacing:.16em;color:var(--muted-d)}
.burger{display:none;width:46px;height:46px;align-items:center;justify-content:center;flex-direction:column;gap:5px;margin-right:-8px}
.burger span{display:block;width:23px;height:2px;background:var(--paper);border-radius:2px;transition:transform .3s cubic-bezier(.3,1,.3,1)}
@media(max-width:900px){
  .nav-links{display:none}
  .burger{display:flex}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:15px 28px;border-radius:3.75rem;transition:background .35s cubic-bezier(.3,1,.3,1),color .35s cubic-bezier(.3,1,.3,1),border-color .35s cubic-bezier(.3,1,.3,1),box-shadow .35s cubic-bezier(.3,1,.3,1)}
.btn-y{background:var(--yellow);color:var(--ink)}
.btn-y:hover{background:var(--paper)}
.btn-o{border:1px solid currentColor}
.btn-o:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.btn-d{background:var(--ink);color:var(--paper)}
.btn-d:hover{background:var(--yellow);color:var(--ink)}
.link-u{display:inline-flex;gap:10px;align-items:center;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--yellow);padding-bottom:5px}

/* ---------- image slots ---------- */
.ph{position:relative;overflow:hidden;background:linear-gradient(155deg,#5c6a70,#232b2f 58%,#111517)}
.ph.sea{background:linear-gradient(180deg,#c9cfd1,#65767e 52%,#1c262b)}
.ph.warm{background:linear-gradient(150deg,#d8d2c3,#8d8370 52%,#3c382c)}
.ph.deck{background:linear-gradient(150deg,#e6dfcd,#a8977a 55%,#4a4231)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.ph.empty::before{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.2)}
.ph.empty::after{content:attr(data-ph);position:absolute;left:0;right:0;bottom:0;padding:14px 16px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66);background:linear-gradient(transparent,rgba(0,0,0,.5));line-height:1.6}
.zoom:hover .ph img{transform:scale(1.04)}
.scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,21,20,.88) 0%,rgba(20,21,20,.55) 46%,rgba(20,21,20,.15) 72%,rgba(20,21,20,.45) 100%)}
.scrim-b{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,21,20,.15) 40%,rgba(20,21,20,.85) 100%)}

/* ---------- cards ---------- */
.card{padding:clamp(22px,2vw,30px);display:flex;flex-direction:column;gap:12px;min-height:190px}
.card .k{font-size:10px;letter-spacing:.2em;font-weight:600;text-transform:uppercase}
.card.d{background:var(--ink);color:var(--paper)}
.card.l{background:var(--white);color:var(--ink)}
.card.y{background:var(--yellow);color:var(--ink)}
.card .icon{width:30px;height:30px;border:1px solid currentColor;display:grid;place-items:center;font-size:12px;opacity:.8}

/* yellow / dark tiles */
.tile{position:relative;min-height:230px;padding:26px;display:flex;flex-direction:column;justify-content:space-between}
.tile.y{background:var(--yellow);color:var(--ink)}
.tile.d{background:var(--ink-2);color:var(--paper)}
.tile .num{font-size:10px;letter-spacing:.2em;font-weight:600;opacity:.7}
.tile h3{font-size:clamp(20px,2vw,28px);text-transform:uppercase;letter-spacing:-.035em;font-weight:700;line-height:.95}
.tile .arrow{align-self:flex-end;width:30px;height:30px;border:1px solid currentColor;display:grid;place-items:center;font-size:12px}
.tile:hover .arrow{background:var(--ink);color:var(--yellow);border-color:var(--ink)}
.tile.d:hover .arrow{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}

/* proof / claim rows */
.claims{display:grid;grid-template-columns:repeat(3,1fr);background:var(--ink)}
.claims>div{padding:clamp(26px,3vw,44px);border-right:1px solid var(--line-d)}
.claims>div:last-child{border-right:0}
.claims h3{font-size:clamp(19px,1.9vw,27px);font-weight:400;letter-spacing:-.03em;line-height:1.1;color:var(--paper)}
.claims h3 b{font-weight:400;color:var(--yellow)}
.claims p{margin-top:12px;font-size:13px;color:var(--muted-d);max-width:34ch}

.band-y{background:var(--yellow);color:var(--ink)}
.band-y .row{display:flex;flex-wrap:wrap;gap:20px 44px;align-items:center;padding:18px 0;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--muted-d);padding:54px 0 40px}
.foot-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.foot-logo{font-weight:800;font-size:22px;letter-spacing:-.045em;color:var(--paper);line-height:1}
.foot-logo span{display:block;font-size:9px;font-weight:600;letter-spacing:.24em;color:var(--yellow);margin-top:7px}
.foot-cols{display:flex;gap:56px;flex-wrap:wrap}
.foot-cols h5{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);margin-bottom:14px;font-weight:600}
.foot-cols a{display:block;font-size:13px;padding:4px 0}
.foot-cols a:hover{color:var(--paper)}
.foot-legal{margin-top:44px;padding-top:20px;border-top:1px solid var(--line-d);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:10px;letter-spacing:.14em;text-transform:uppercase}

/* ---------- motion ---------- */
.up{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.up.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.up{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .grid-4{grid-template-columns:1fr 1fr}
  .claims{grid-template-columns:1fr}
  .claims>div{border-right:0;border-bottom:1px solid var(--line-d)}
}
@media(max-width:760px){
  .split-2,.grid-3,.grid-4{grid-template-columns:1fr}
}


/* ===== booth-derived system: diagonals, icons ===== */
.logo{flex-direction:column;align-items:flex-start;gap:2px;line-height:1}
.logo .l1{font-weight:800;font-size:20px;letter-spacing:-.04em}
.logo .l1 i{font-style:normal}
.logo .l2{font-style:italic;font-weight:700;font-size:10px;letter-spacing:.06em;color:var(--yellow)}

/* diagonal wedge device */
.diag-img{clip-path:polygon(0 14%,100% 0,100% 100%,0 100%)}
.diag-img-up{clip-path:polygon(0 0,100% 0,100% 86%,0 100%)}
.wedge-y{position:relative}
.wedge-y::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;background:var(--yellow);clip-path:polygon(0 62%,100% 0,100% 100%,0 100%);pointer-events:none}
.stripe{position:absolute;left:0;top:0;bottom:0;width:120px;background:var(--yellow);clip-path:polygon(0 0,100% 0,38% 100%,0 100%);z-index:2;pointer-events:none}
.hero-wedge{position:absolute;left:0;right:0;bottom:0;height:120px;background:var(--yellow);clip-path:polygon(0 46%,100% 0,100% 100%,0 100%);z-index:2}
.hero-wedge b{position:absolute;right:5vw;bottom:22px;color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
@media(max-width:760px){.hero-wedge{height:72px}.hero-wedge b{font-size:9px;right:4vw;bottom:12px}}
@media(max-width:760px){.stripe{width:34px}}

/* icon rows */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);background:var(--ink)}
.pillars>div{padding:clamp(28px,3.4vw,54px);border-right:1px solid var(--line-d);display:flex;flex-direction:column;gap:16px}
.pillars>div:last-child{border-right:0}
.ico{width:44px;height:44px;stroke:var(--yellow);fill:none;stroke-width:1.4}
.pillars h3{font-size:clamp(17px,1.6vw,22px);text-transform:uppercase;font-weight:700;letter-spacing:-.02em;color:var(--paper)}
.pillars .en{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-d)}
@media(max-width:860px){.pillars{grid-template-columns:1fr}.pillars>div{border-right:0;border-bottom:1px solid var(--line-d)}}

/* statement */
.statement{font-size:clamp(38px,7.4vw,116px);line-height:.86;letter-spacing:-.05em;text-transform:uppercase;font-weight:800}

/* refit */
.refit{display:grid;grid-template-columns:1.05fr 1fr;min-height:520px}
.refit .y{background:var(--yellow);color:var(--ink);padding:clamp(32px,4.4vw,72px);display:flex;flex-direction:column;justify-content:center}
.refit h2{font-size:clamp(34px,5vw,74px);line-height:.88;letter-spacing:-.05em;text-transform:uppercase;font-weight:800}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.trio .ico{width:34px;height:34px;stroke:var(--ink)}
.trio b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-top:12px}
.trio span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
@media(max-width:860px){.refit{grid-template-columns:1fr}}

/* test section: 60% yellow over ocean */
.test-y{background:var(--yellow);color:var(--ink);padding:clamp(40px,5vw,86px) 0 clamp(34px,4vw,70px)}
.test-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,4vw,70px);align-items:start}
.lab{border-top:2px solid var(--ink)}
.lab div{display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid rgba(20,21,20,.28);font-size:13px}
.lab b{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.7;font-weight:600}
.qr{width:96px;height:96px;background:
  repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 12px),
  repeating-linear-gradient(var(--ink) 0 6px,transparent 6px 12px);
  background-color:var(--yellow);border:5px solid var(--ink)}
.test-sea{height:clamp(180px,26vw,330px)}
@media(max-width:860px){.test-grid{grid-template-columns:1fr}}

/* surface grid 2x3 */
.surf{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.surf .cell{background:var(--white)}
.surf .ph{aspect-ratio:4/3}
.surf .t{padding:14px 16px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.surf h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:-.01em}
.surf span{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-l)}
@media(max-width:860px){.surf{grid-template-columns:1fr 1fr}}




/* ===== logo asset (embedded once, used in nav + footer) ===== */
.brandmark{background:url("/img/logo.webp") no-repeat left center;background-size:contain;display:block;position:relative}
.logo{display:block;padding:0}
.logo .brandmark{height:38px;width:114px}
.foot-logo .brandmark{height:56px;width:168px}
@media(max-width:760px){.logo .brandmark{height:30px;width:90px}.foot-logo .brandmark{height:44px;width:132px}}


/* ==========================================================================
   Extensions — yachtkeramik.de
   Everything above is the shared system carried over from the earlier
   generated pages. Below: the pieces this site needs that those didn't have.
   ========================================================================== */

/* ---------- logo asset ---------- */
/* logo.webp is a white monochrome mark. brightness(0) forces it black for
   use on yellow or paper grounds. */
.brandmark--dark { filter: brightness(0); }

/* ---------- two paths: B2C vs B2B ---------- */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-l); }
@media (max-width: 860px) { .paths { grid-template-columns: 1fr; } }

.path {
  position: relative;
  padding: clamp(30px, 4vw, 62px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 340px;
  background: var(--white);
  transition: background .35s cubic-bezier(.2,.7,.3,1);
}
.path.y { background: var(--yellow); }
.path.d { background: var(--ink); color: var(--paper); }
.path .num { font-size: 10px; letter-spacing: .2em; font-weight: 600; opacity: .65; text-transform: uppercase; }
.path h3 {
  font-size: clamp(24px, 3vw, 42px);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .92;
}
.path p { flex: 1; font-size: 14px; line-height: 1.65; max-width: 40ch; }
.path.d p { color: var(--muted-d); }
.path:not(.d) p { color: var(--muted-l); }
.path .btn { align-self: flex-start; }
.path:not(.y):not(.d):hover { background: var(--paper-2); }

/* ---------- scroll cue, shown on the mobile hero ---------- */
.hero-cue {
  display: none;
  position: absolute;
  left: 50%;
  /* Sits inside the first viewport. The extra offset keeps it clear of the
     browser's own bottom bar, and env() adds the home-indicator inset on
     phones that report one. */
  top: calc(100svh - 120px - env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 4;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(242,240,235,.85);
  pointer-events: none;
}
.hero-cue::after {
  content: "";
  width: 10px; height: 10px;
  border-right: 2px solid var(--yellow);
  border-bottom: 2px solid var(--yellow);
  transform: rotate(45deg);
  animation: cue 1.9s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes cue {
  0%,100% { transform: rotate(45deg) translate(0,0); opacity: .55; }
  50%     { transform: rotate(45deg) translate(3px,3px); opacity: 1; }
}

@media (max-width: 780px) {
  .hero-cue { display: flex; }
}

/* ==========================================================================
   Scroll story — yacht above the water, down through the surface, into it
   ========================================================================== */

.story { position: relative; background: var(--ink); height: 340svh; }
.story-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }


.story-copy {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding-bottom: clamp(96px, 13vh, 170px);
  opacity: 0;
  will-change: opacity, transform;
  pointer-events: none;
}
.story-copy.on { pointer-events: auto; }
.story-copy h1,
.story-copy h2 {
  font-size: clamp(34px, 5.6vw, 82px);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: .98;
  color: var(--paper);
  text-transform: none;
}
.story-copy h1 i,
.story-copy h2 i { font-style: italic; color: var(--yellow); font-weight: 300; display: block; }
.story-copy .lede { color: var(--muted-d); margin-top: 20px; }
.story-copy .acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* progress rail */
.story-rail {
  position: absolute;
  right: max(3vw, 20px); top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex; flex-direction: column; gap: 12px;
}
.story-rail span {
  width: 2px; height: 34px;
  background: rgba(242,240,235,.26);
  position: relative; overflow: hidden;
}
.story-rail span::after {
  content: ""; position: absolute; inset: 0;
  background: var(--yellow);
  transform: scaleY(0); transform-origin: top;
  transition: transform .35s cubic-bezier(.3,1,.3,1);
}
.story-rail span.on::after { transform: scaleY(1); }
@media (max-width: 780px) { .story-rail { display: none; } }

@media (max-width: 780px) {
  .story { height: 300svh; }
  .story-copy { padding-bottom: 76px; }
}

/* ---------- moving claim strip ---------- */
.marquee {
  background: var(--yellow); color: var(--ink);
  overflow: hidden;
  border-block: 2px solid var(--ink);
  padding: 15px 0;
}
.marquee-track {
  display: flex; align-items: center; gap: 46px;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee b {
  font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 14px;
}
.marquee b::before { content: ""; width: 7px; height: 7px; background: var(--ink); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- counters ---------- */
.counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-l); }
@media (max-width: 860px) { .counts { grid-template-columns: repeat(2, 1fr); } }
.count { background: var(--paper); padding: clamp(24px, 3vw, 42px); }
.count dt {
  font-size: clamp(38px, 5vw, 68px); font-weight: 800;
  letter-spacing: -.05em; line-height: 1; color: var(--ink);
}
.count dt em { font-style: normal; color: var(--yellow); }
.count dd { margin: 12px 0 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-l); line-height: 1.5; }

/* ---------- product video ---------- */
.video-wrap { position: relative; aspect-ratio: 16/9; background: var(--ink-2); overflow: hidden; }
.video-wrap video, .video-wrap iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.video-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: linear-gradient(150deg, #3c464b, #1a2226 60%, #111517);
  color: var(--paper); text-align: center; padding: 24px;
}
.video-play {
  width: 74px; height: 74px; border-radius: 50%;
  border: 2px solid var(--yellow); color: var(--yellow);
  display: grid; place-items: center; font-size: 20px;
  transition: background .35s cubic-bezier(.3,1,.3,1), color .35s cubic-bezier(.3,1,.3,1);
}
.video-play::before { content: "▶"; margin-left: 4px; }
.video-wrap:hover .video-play { background: var(--yellow); color: var(--ink); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line-l); }
.faq details { border-bottom: 1px solid var(--line-l); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 24px 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  font-size: clamp(16px, 1.7vw, 21px); font-weight: 600; letter-spacing: -.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 22px; font-weight: 400; color: var(--yellow);
  flex: none; line-height: 1; transition: transform .35s cubic-bezier(.3,1,.3,1);
}
.faq details[open] summary::after { content: "−"; transform: rotate(180deg); }
.faq .a { padding: 0 0 26px; color: var(--muted-l); font-size: 15px; line-height: 1.7; max-width: 76ch; }

/* ---------- hover-lift cards ---------- */
.lift { transition: transform .45s cubic-bezier(.3,1,.3,1), box-shadow .45s cubic-bezier(.3,1,.3,1); }
.lift:hover { transform: translateY(-6px); box-shadow: 0 30px 54px -32px rgba(20,21,20,.42); }

/* Reduced motion: the scroll story becomes a plain hero.
   This block used to target .story-layer, which stopped existing when the
   three cross-faded photographs were replaced by one panned image. The result
   was that .story-copy got opacity:1 while .story-pan stayed absolutely
   positioned — so all three captions rendered on top of each other. */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }

  .story { height: auto; }
  .story-stage { position: relative; height: 78svh; min-height: 420px; }
  .story-pan {
    position: absolute; inset: 0;
    height: 100%;
    transform: none !important;
  }
  /* Show the opening caption only. The later beats are narrative, and the
     same points are made again in the sections below. */
  .story-copy { opacity: 1 !important; transform: none !important; }
  .story-copy[data-step="1"],
  .story-copy[data-step="2"] { display: none; }
  .story-rail, .hero-cue { display: none; }
}

/* ==========================================================================
   Round the images again — the system is otherwise hard-edged, so full-bleed
   and story frames stay square.
   ========================================================================== */
:root { --r-img: clamp(12px, 1.4vw, 22px); }

.ph { border-radius: var(--r-img); }
.cell { border-radius: var(--r-img); overflow: hidden; }
.video-wrap, .ba { border-radius: var(--r-img); }
.story-stage .ph,
.split-2 > .ph,
.story-pan { border-radius: 0; }

/* Slow drift so still water still moves */
@keyframes drift {
  0%, 100% { transform: scale(1.06) translate3d(0, 0, 0); }
  50%      { transform: scale(1.13) translate3d(0, -1.6%, 0); }
}
.ph-drift img { animation: drift 24s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ph-drift img { animation: none; } }

/* ==========================================================================
   Story: one continuous image, panned from the yacht down to the reef
   ========================================================================== */
.story-pan {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: max(190svh, calc(100vw * 1672 / 941));
  z-index: 0;
  will-change: transform;
}
.story-pan img { width: 100%; height: 100%; object-fit: cover; display: block; }

.story-scrim {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(20,21,20,.90) 0%, rgba(20,21,20,.30) 44%, rgba(20,21,20,.06) 74%),
    linear-gradient(90deg, rgba(20,21,20,.58), transparent 62%);
}

/* ==========================================================================
   Before / after slider
   ========================================================================== */
.ba {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  cursor: ew-resize;
  background: var(--ink-2);
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba .before {
  clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0);
}
.ba-line {
  position: absolute; top: 0; bottom: 0;
  left: var(--x, 50%);
  width: 2px; background: var(--yellow);
  z-index: 3; pointer-events: none;
}
.ba-knob {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--yellow); color: var(--ink);
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700; letter-spacing: -.02em;
  box-shadow: 0 8px 26px -8px rgba(0,0,0,.6);
}
.ba-tag {
  position: absolute; top: 16px; z-index: 4;
  padding: 7px 14px; border-radius: 3.75rem;
  background: rgba(20,21,20,.72); color: var(--paper);
  font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  pointer-events: none;
}
.ba-tag.l { left: 16px; }
.ba-tag.r { right: 16px; background: var(--yellow); color: var(--ink); }

/* ==========================================================================
   Interactive yacht diagram
   ========================================================================== */
.yacht { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(24px, 3.5vw, 56px); align-items: center; }
@media (max-width: 900px) { .yacht { grid-template-columns: 1fr; } }

/* .yacht-svg was the old hand-drawn diagram; the drawing is an <img> now. */
.yacht-figure .body { fill: none; stroke: var(--paper); stroke-width: 2; opacity: .5; }
.yacht-figure .sea { fill: rgba(242,240,235,.08); }
.yacht-figure .zone {
  fill: rgba(253,197,0,0);
  stroke: rgba(253,197,0,0);
  stroke-width: 2;
  cursor: pointer;
  transition: fill .35s cubic-bezier(.3,1,.3,1), stroke .35s cubic-bezier(.3,1,.3,1);
}
.yacht-figure .zone:hover,
.yacht-figure .zone.on { fill: rgba(253,197,0,.30); stroke: var(--yellow); }
.yacht-figure .pin { fill: var(--yellow); opacity: 0; transition: opacity .3s; }
.yacht-figure .zone.on + .pin, .yacht-figure .zone:hover + .pin { opacity: 1; }

.yacht-list { display: flex; flex-direction: column; gap: 1px; background: var(--line-d); }
.yacht-list button {
  text-align: left;
  background: var(--ink-2);
  color: var(--paper);
  padding: 16px 20px;
  display: flex; align-items: baseline; gap: 14px;
  transition: background .3s cubic-bezier(.3,1,.3,1);
  width: 100%;
}
.yacht-list button:hover, .yacht-list button.on { background: var(--yellow); color: var(--ink); }
.yacht-list b { font-size: 10px; letter-spacing: .18em; opacity: .65; flex: none; }
.yacht-list span { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.02em; }
.yacht-list em { display: block; font-style: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin-top: 3px; }

/* ---- Fixes ------------------------------------------------------------- */

/* The slider was grabbing the native image drag instead of the handle. */
.ba img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Zone markers stay faintly visible so the diagram reads as interactive. */
.yacht-figure .pin { opacity: .38; }
.yacht-figure .zone.on + .pin,
.yacht-figure .zone:hover + .pin { opacity: 1; r: 7; }
.yacht-figure .deck { fill: rgba(242,240,235,.05); stroke: var(--paper); stroke-width: 2; opacity: .55; }
.yacht-figure .rig { fill: none; stroke: var(--paper); stroke-width: 2; opacity: .45; stroke-linecap: round; }

/* ---- Water beading loop ------------------------------------------------ */
.bead {
  position: relative;
  min-height: clamp(360px, 52vw, 620px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--ink);
}
.bead video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.bead::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(20,21,20,.88) 0%, rgba(20,21,20,.52) 46%, rgba(20,21,20,.10) 80%),
    linear-gradient(to top, rgba(20,21,20,.55), transparent 55%);
}
.bead-in { position: relative; z-index: 2; padding-block: clamp(40px, 6vw, 80px); }
.bead-in h2 { color: var(--paper); max-width: 14ch; }
.bead-in .lede { color: var(--muted-d); margin-top: 18px; }

/* ---- Round everything that holds an image ------------------------------ */
.paths { gap: clamp(12px, 1.6vw, 20px); background: none; }
.path { border-radius: var(--r-img); }
.split-round { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 20px); }
@media (max-width: 900px) { .split-round { grid-template-columns: 1fr; } }
.split-round > * { border-radius: var(--r-img); overflow: hidden; }
.bead { border-radius: var(--r-img); }
.pillars { border-radius: var(--r-img); overflow: hidden; }

/* ---- Buttons sitting on a yellow ground -------------------------------- */
/* .btn-d and .btn-o both hovered *to* yellow, which vanished on yellow. */
.btn-d { border: 2px solid var(--ink); }
.btn-d:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.band-y .btn-o:hover,
.path.y .btn-o:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dark .btn-d:hover, .dark-2 .btn-d:hover,
.path.d .btn-d:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }

/* ---- Video used as a section background -------------------------------- */
.media-video { position: relative; width: 100%; height: 100%; min-height: clamp(300px, 42vw, 640px); overflow: hidden; }
.media-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- Mobile story: use the phone crop, pan gently ---------------------- */
@media (max-width: 780px) {
  .story { height: 290svh; }
  .story-pan { height: 125svh; }
}

/* ---- Path cards: interactive on hover ---------------------------------- */
.path {
  overflow: hidden;
  transition: transform .5s cubic-bezier(.3,1,.3,1), box-shadow .5s cubic-bezier(.3,1,.3,1);
}
.path:hover { transform: translateY(-8px); box-shadow: 0 36px 60px -34px rgba(20,21,20,.5); }

/* cursor-following sheen */
.path::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%),
                              rgba(255,255,255,.22), transparent 46%);
  opacity: 0;
  transition: opacity .45s cubic-bezier(.3,1,.3,1);
  pointer-events: none;
}
.path.d::after { background: radial-gradient(520px circle at var(--mx,50%) var(--my,0%), rgba(253,197,0,.20), transparent 46%); }
.path:hover::after { opacity: 1; }

/* corner arrow that slides out on hover */
.path-arrow {
  position: absolute;
  top: clamp(18px, 2.2vw, 30px); right: clamp(18px, 2.2vw, 30px);
  width: 46px; height: 46px;
  border: 2px solid currentColor;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px;
  opacity: .35;
  transition: opacity .45s cubic-bezier(.3,1,.3,1), transform .45s cubic-bezier(.3,1,.3,1);
}
.path:hover .path-arrow { opacity: 1; transform: translate(4px, -4px) rotate(-45deg); }

.path h3 { transition: transform .45s cubic-bezier(.3,1,.3,1); }
.path:hover h3 { transform: translateX(6px); }
.path .num { transition: letter-spacing .45s cubic-bezier(.3,1,.3,1); }
.path:hover .num { letter-spacing: .28em; }

@media (max-width: 700px) {
  .path { min-height: 0; padding: 26px 22px 28px; gap: 10px; }
  .path p { flex: none; }
  .path-arrow { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .path, .path h3, .path .num, .path-arrow { transition: none; }
  .path:hover { transform: none; }
}

/* ---- Yacht diagram now uses the technical drawing ---------------------- */
.yacht-figure { position: relative; aspect-ratio: 1672 / 941; }
.yacht-art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  /* already white lines on transparency - see tools/make-lineart.ps1 */
  opacity: .82;
}
.yacht-zones { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* ---- Yellow footer ----------------------------------------------------- */
footer {
  background: var(--yellow);
  color: rgba(20, 21, 20, .72);
  border-top: 2px solid var(--ink);
}
/* the mark is a white monochrome file — force it black for the yellow ground */
footer .brandmark { filter: brightness(0); }
footer .foot-logo { color: var(--ink); }
footer .foot-cols h5 { color: var(--ink); opacity: .55; }
footer .foot-cols a { color: rgba(20, 21, 20, .78); }
footer .foot-cols a:hover { color: var(--ink); }
footer .foot-legal {
  border-top-color: rgba(20, 21, 20, .28);
  color: rgba(20, 21, 20, .62);
}
footer .foot-legal a { color: rgba(20, 21, 20, .78); }
footer .foot-legal a:hover { color: var(--ink); }

/* ---- Yacht diagram on a light ground -----------------------------------
   The transparent/blended versions kept rendering as a black slab in some
   browsers. A plain black-on-white JPEG on a light section removes every
   compositing step, so there is nothing left to go wrong. */
.yacht-art { opacity: 1; }
.yacht-light .pin,
.yacht-light .pin { fill: var(--ink); }
.yacht-light .zone:hover, .yacht-light .zone.on { fill: rgba(253,197,0,.34); stroke: var(--ink); }
.yacht-light .yacht-list { background: var(--line-l); }
.yacht-light .yacht-list button { background: var(--white); color: var(--ink); }
.yacht-light .yacht-list button:hover,
.yacht-light .yacht-list button.on { background: var(--yellow); color: var(--ink); }
.yacht-light .yacht-list b { opacity: .5; }
.yacht-light .yacht-list em { opacity: .62; }

/* ---- Product pack shots ------------------------------------------------ */
.packs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
}
.pack {
  background: var(--white);
  border-radius: var(--r-img);
  padding: 20px 18px 24px;
  text-align: center;
  position: relative;
  transition: transform .45s cubic-bezier(.3,1,.3,1), box-shadow .45s cubic-bezier(.3,1,.3,1);
}
.pack:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -28px rgba(20,21,20,.4); }
.pack img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transition: transform .55s cubic-bezier(.3,1,.3,1);
}
.pack:hover img { transform: scale(1.05); }
.pack b {
  display: block;
  margin-top: 14px;
  font-size: 14px; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.3;
}
.pack span {
  display: block; margin-top: 6px;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-l);
}
.pack .step {
  position: absolute; top: 14px; left: 14px;
  background: var(--yellow); color: var(--ink);
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  padding: 4px 9px; border-radius: 3.75rem;
}
.pack.is-cleaner .step { background: var(--ink); color: var(--yellow); }

/* ---- Pack-shot badge must stay above the scaling image ----------------- */
.pack .step { z-index: 2; }
.pack img { position: relative; z-index: 1; }

/* ==========================================================================
   Oberflächen-Rechner + Formulare
   ========================================================================== */

.step-h { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.step-n {
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  color: var(--muted-l); flex: none;
}

/* ---- boat type ---- */
.types { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.2vw, 14px); }
@media (max-width: 980px) { .types { grid-template-columns: 1fr 1fr; } }

.type {
  position: relative;
  text-align: left;
  background: var(--white);
  border: 2px solid transparent;
  border-radius: var(--r-img);
  padding: 20px 18px;
  transition: background .3s cubic-bezier(.3,1,.3,1), border-color .3s cubic-bezier(.3,1,.3,1),
              transform .3s cubic-bezier(.3,1,.3,1);
}
.type:hover { transform: translateY(-3px); }
.type[aria-pressed="true"] { background: var(--yellow); border-color: var(--ink); }
/* Waren h4 - eine Ueberschrift im Button sprengt die Gliederung und wird von
   Screenreadern als Sprungziel angeboten, obwohl es keins ist. */
.type b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.type p { font-size: 12px; line-height: 1.5; color: var(--muted-l); margin-top: 6px; }
.type[aria-pressed="true"] p { color: rgba(20,21,20,.72); }
.type .tick {
  position: absolute; top: 14px; right: 14px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--line-l);
  display: grid; place-items: center;
  font-size: 11px; color: transparent;
}
.type[aria-pressed="true"] .tick { border-color: var(--ink); background: var(--ink); color: var(--yellow); }

/* ---- dimensions ---- */
.dims { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(16px, 2vw, 26px); }
.dim > label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-l); }
.dim .row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.dim input[type="number"] {
  width: 96px; flex: none;
  padding: 10px 12px;
  border: 1px solid var(--line-l);
  border-radius: 8px;
  background: var(--white);
  font-weight: 600;
}
.dim input[type="range"] { flex: 1; min-width: 80px; accent-color: var(--yellow); }
.dim .u { font-size: 12px; color: var(--muted-l); flex: none; }

/* ---- surface chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  background: var(--white);
  border: 2px solid var(--line-l);
  border-radius: var(--r-img);
  padding: 13px 18px;
  text-align: left;
  transition: background .3s cubic-bezier(.3,1,.3,1), border-color .3s cubic-bezier(.3,1,.3,1);
}
.chip:hover { border-color: rgba(20,21,20,.42); }
.chip[aria-pressed="true"] { background: var(--yellow); border-color: var(--ink); }
.chip b { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: -.02em; }
.chip span { display: block; font-size: 11px; color: var(--muted-l); margin-top: 3px; }
.chip[aria-pressed="true"] span { color: rgba(20,21,20,.7); }

/* ---- result panel ---- */
.calc { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(24px, 3.4vw, 52px); align-items: start; }
@media (max-width: 1000px) { .calc { grid-template-columns: 1fr; } }

.result {
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-img);
  padding: clamp(24px, 2.6vw, 38px);
  position: sticky; top: calc(var(--nav-h) + 18px);
}
@media (max-width: 1000px) { .result { position: static; } }
.result .tot {
  font-size: clamp(40px, 5.4vw, 68px); font-weight: 800;
  letter-spacing: -.05em; line-height: 1; color: var(--yellow);
}
.rows, .sets { margin-top: 18px; }
.rows > div, .sets > div {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line-d);
  font-size: 13px; color: var(--muted-d);
}
.rows > div b, .sets > div b { color: var(--paper); font-weight: 600; }
.rows .est { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.sent { display: none; margin-top: 18px; padding: 16px 18px; background: var(--yellow); color: var(--ink); border-radius: 10px; font-size: 13px; }
.sent.show { display: block; }

/* ---- forms ---- */
.field { display: block; margin-bottom: 18px; }
.field > span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-l); margin-bottom: 8px; }
.field > span .req { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line-l);
  border-radius: 8px;
  background: var(--white);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); outline: none; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 640px) { .f2 { grid-template-columns: 1fr; } }

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.6; color: var(--muted-l); }
.consent input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--ink); }
.consent a { text-decoration: underline; }

.form-note { font-size: 12px; color: var(--muted-l); margin-top: 14px; }
.form-msg { display: none; margin-top: 18px; padding: 16px 18px; border-radius: 10px; font-size: 14px; }
.form-msg.ok { display: block; background: var(--yellow); color: var(--ink); }
.form-msg.err { display: block; background: #fde8e8; color: #7a1020; }

/* which-path chooser */
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .choice { grid-template-columns: 1fr; } }
.choice .type { min-height: 116px; }

/* ---- Clearance for the yellow stripe -----------------------------------
   The stripe is 120px wide on desktop and 34px below 760px, so the copy
   inset has to follow it. This used to be a hard-coded 84px inline, which
   cost a quarter of the screen width on a phone. */
.story-copy { padding-left: 84px; }
.hero-inset { padding: 70px 0 70px 84px; }

@media (max-width: 760px) {
  .story-copy { padding-left: 0; }
  .hero-inset { padding: 54px 0 54px 0; }
}

/* ==========================================================================
   Mobile corrections
   ========================================================================== */

/* 1 — The three-beat scroll story is a desktop idea. On a phone there is not
   enough scroll distance for three captions to cross-fade cleanly, so the
   hero becomes a single statement over the photograph. The waterline and
   biocide-free points are made again in the sections below, so nothing is
   lost. */
@media (max-width: 780px) {
  .story { height: 235svh; }
  .story-pan { height: 132svh; }
  /* Two beats on a phone: the yacht above, then the reef below. The middle
     one (the waterline) is the bridge between them and reads as repetition
     once the other two are this close together. */
  .story-copy[data-step="1"] { display: none; }
}

/* 2 — Full-bleed blocks must not be rounded: the corners let the page
   background show through as two pale notches against the yellow band. */
.pillars { border-radius: 0; }

/* 3 — The corner arrow is a hover affordance, and hover does not exist on
   touch. It was crowding the headline on narrow cards. */
@media (max-width: 700px) {
  .path-arrow { display: none; }
  .path h3 { padding-right: 0; }
}

/* ==========================================================================
   Seitenwechsel — View Transitions, Preloading, Ladeanzeige
   ========================================================================== */

/* Cross-document view transitions. Chrome/Edge and Safari 18.2+ animate
   between pages natively; everywhere else this is simply ignored and the
   navigation stays exactly as it is today. No framework, no router. */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: vt-out .26s cubic-bezier(.3, 1, .3, 1) both;
}
::view-transition-new(root) {
  animation: vt-in .40s cubic-bezier(.3, 1, .3, 1) both;
}
@keyframes vt-out { to   { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(16px); } }

/* The header and footer stay put while the content between them changes —
   that is what makes it read as one application rather than a page reload. */
.nav    { view-transition-name: yk-nav; }
footer  { view-transition-name: yk-footer; }

/* ---- thin progress bar for a navigation that is actually slow ---------- */
.nav-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px; width: 0;
  background: var(--yellow);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: width .25s cubic-bezier(.3, 1, .3, 1), opacity .25s;
}
.nav-progress.on { opacity: 1; }

/* ---- full overlay, only if it is really taking a while ---------------- */
.page-loading {
  position: fixed; inset: 0;
  z-index: 290;
  background: var(--ink);
  display: grid; place-items: center;
  gap: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s cubic-bezier(.3, 1, .3, 1);
}
.page-loading.on { opacity: 1; pointer-events: auto; }
.page-loading .mark {
  font-weight: 800; font-size: 22px; letter-spacing: -.045em; color: var(--paper);
}
.page-loading .mark i { font-style: normal; color: var(--red); }
.page-loading .bar {
  width: 120px; height: 2px; background: rgba(242,240,235,.2); overflow: hidden;
}
.page-loading .bar span {
  display: block; height: 100%; width: 40%;
  background: var(--yellow);
  animation: load-sweep 1.1s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes load-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* ---- first paint: lift the content in once, gently ------------------- */
@keyframes page-enter { from { opacity: 0; transform: translateY(10px); } }
.js main, .js > header.dark, .js > .story {
  animation: page-enter .5s cubic-bezier(.3, 1, .3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .page-loading .bar span { animation: none; width: 100%; }
  .js main, .js > header.dark, .js > .story { animation: none; }
}

/* ---- Form identity: badge + photo band -------------------------------- */
.hero-band { background: var(--ink); min-height: clamp(240px, 34vw, 420px); display: grid; align-items: center; }
.hero-band .ph img { width: 100%; height: 100%; object-fit: cover; }

.form-badge {
  display: inline-block;
  background: var(--yellow); color: var(--ink);
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 3.75rem;
}
.form-badge.is-trade { background: var(--paper); color: var(--ink); }

/* ---- Photo upload ----------------------------------------------------- */
.drop {
  /* Ohne display:block bleibt das <label> inline. Ein Inline-Kasten mit
     Block-Kindern (b, span) wird vom Browser AUFGETRENNT - er zeichnet dann
     nur kurze Rahmenstuecke vor und hinter den Bloecken, statt eines
     geschlossenen Rechtecks. Genau das war auf dem Handy zu sehen. */
  display: block;
  position: relative;
  border: 2px dashed var(--line-l);
  border-radius: var(--r-img);
  background: var(--white);
  padding: clamp(22px, 3vw, 34px);
  text-align: center;
  transition: border-color .25s cubic-bezier(.3,1,.3,1), background .25s cubic-bezier(.3,1,.3,1);
  cursor: pointer;
}
.drop:hover, .drop.is-over { border-color: var(--ink); background: var(--paper-2); }
.drop b { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.drop span { display: block; margin-top: 8px; font-size: 12.5px; color: var(--muted-l); }

.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 14px; }
.shot { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: var(--paper-2); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot button {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(20,21,20,.78); color: #fff;
  font-size: 14px; line-height: 1;
  display: grid; place-items: center;
}
.shot .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--yellow); width: 0; transition: width .3s; }
.shot.err { outline: 2px solid var(--red); }

/* ==========================================================================
   Mobile-Nachbesserungen, zweite Runde
   ========================================================================== */

@media (max-width: 760px) {
  /* The stripe is 34px wide here and the shell only insets ~11px, so text set
     flush to the shell ran straight over the yellow. Clear it properly. */
  .story-copy { padding-left: 34px; }

  /* Less to read on a small screen. The headline and the two buttons carry
     the message; the supporting sentence is repeated by the claim strip and
     the three pillars immediately below. */
  .story-copy .lede { display: none; }
  .story-copy h1,
  .story-copy h2 { font-size: clamp(30px, 8.6vw, 40px); }
  .story-copy .acts { margin-top: 22px; }
}

/* Step numbers were 62% grey on off-white — legible in theory, faint in
   practice next to a 40px black headline. */
.step-n { color: rgba(20, 21, 20, .78); font-size: 12px; }
.dark .step-n, .dark-2 .step-n { color: rgba(242, 240, 235, .75); }

/* ---- Ladeanzeige: Wasserlinie statt Fortschrittsbalken ---------------- */
.page-loading .wave { width: 132px; height: 34px; overflow: visible; }
.page-loading .wave path {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 90 260;
  animation: wave-run 1.9s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes wave-run {
  from { stroke-dashoffset: 350; }
  to   { stroke-dashoffset: 0; }
}
.page-loading .mark { letter-spacing: -.045em; }
.page-loading .hint {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(242,240,235,.45);
}
@media (prefers-reduced-motion: reduce) {
  .page-loading .wave path { animation: none; stroke-dasharray: none; }
}
/* The first-paint lift is now shorter — with fonts local and the hero
   preloaded there is far less to wait for, so a long fade just adds delay. */
.js main, .js > header.dark, .js > .story, .js > header.hero-band {
  animation-duration: .32s;
}

/* Word-by-word blur-in was removed. Splitting the text nodes let the browser
   break inside German compounds ("PA SST", "SELBS T"), and a blur filter on
   dozens of inline-blocks is one of the more expensive things you can ask a
   browser to do while scrolling. Headings use the section reveal instead. */

/* ==========================================================================
   Sprachwechsel: oben auf dem Desktop, mobil im Vollbild-Menü und im Footer
   ========================================================================== */

.foot-lang a { color: rgba(20, 21, 20, .7); }
.foot-lang a:hover { color: var(--ink); }
.foot-lang b { color: var(--ink); }

/* ---- Kennzahlen: das Plus gehört an die Zahl, nicht auf die Grundlinie -- */
.count dt em {
  font-style: normal;
  color: var(--yellow);
  font-size: .55em;
  vertical-align: .45em;
  margin-left: .04em;
}
@media (max-width: 860px) {
  .count { text-align: center; }
  .count dd { max-width: 26ch; margin-inline: auto; }
}

/* ==========================================================================
   Text auf Fotos lesbar machen
   Ein Verlauf allein reicht bei hellen Bildern nicht. Die Textspalte bekommt
   zusätzlich eine eigene, weiche Abdunklung.
   ========================================================================== */
.hero-band .scrim,
header.dark > .scrim {
  background:
    linear-gradient(90deg, rgba(20,21,20,.94) 0%, rgba(20,21,20,.80) 42%,
                    rgba(20,21,20,.42) 70%, rgba(20,21,20,.55) 100%);
}
.hero-band .shell,
header.dark > .shell { text-shadow: 0 1px 24px rgba(20, 21, 20, .55); }

@media (max-width: 900px) {
  /* On a phone the text column spans the whole width, so a horizontal
     gradient cannot help. Darken the whole frame instead. */
  .hero-band .scrim,
  header.dark > .scrim {
    background:
      linear-gradient(180deg, rgba(20,21,20,.62) 0%, rgba(20,21,20,.86) 55%,
                      rgba(20,21,20,.94) 100%);
  }
  .hero-band .lede,
  header.dark > .shell .lede { color: rgba(242, 240, 235, .88); }
}

/* ==========================================================================
   Mobile: Label/Wert-Zeilen stapeln statt gegeneinander drücken
   ========================================================================== */
@media (max-width: 700px) {
  /* space-between with a right-aligned value only works while the value fits
     on one line. On a phone it wraps and the two columns collide. */
  .lab div {
    display: block;
    padding: 12px 0;
  }
  .lab b {
    display: block;
    margin-bottom: 5px;
  }
  .lab span {
    display: block;
    text-align: left;
  }

  /* Same problem in the dashboard and portal detail lists. */
  .det-grid > div { display: block; }
  .det-grid b { display: block; margin-bottom: 4px; }
  .det-grid span { display: block; text-align: left; }
}

/* The native file input must never show — the whole .drop block is the
   control. Belt and braces, since a stale stylesheet once let it through. */
.drop input[type="file"] {
  position: absolute !important;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  padding: 0; margin: -1px;
}
/* Sichtbarer Zustand, wenn das versteckte Feld den Tastaturfokus hat -
   sonst waere die Flaeche fuer Tastaturnutzer unsichtbar bedienbar. */
.drop:focus-within {
  border-color: var(--ink);
  background: var(--paper-2);
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--yellow);
}

/* ---- Rechtstexte ------------------------------------------------------- */
.legal { max-width: 74ch; }
.legal h2 {
  font-size: clamp(19px, 2.1vw, 26px);
  text-transform: none;
  letter-spacing: -.03em;
  margin-top: clamp(30px, 4vw, 46px);
  padding-top: clamp(20px, 3vw, 30px);
  border-top: 1px solid var(--line-l);
}
.legal h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.legal h3 { font-size: 15px; text-transform: none; letter-spacing: -.01em; margin-top: 22px; }
.legal p, .legal li { font-size: 15px; line-height: 1.75; color: var(--ink-3); }
.legal p { margin-top: 12px; }
.legal ul { margin: 12px 0 0 20px; }
.legal li { margin-top: 7px; }
.legal a { text-decoration: underline; }
.legal address { font-style: normal; margin-top: 12px; line-height: 1.8; font-size: 15px; }
.legal .meta { font-size: 13px; color: var(--muted-l); margin-top: 28px; }
.legal table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
.legal th, .legal td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-l); vertical-align: top; }
.legal th { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-l); font-weight: 600; }

/* Intro paragraph on a legal page: sets the frame before the numbered clauses. */
.legal .lead {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 clamp(26px, 3.4vw, 38px);
  padding-bottom: clamp(22px, 3vw, 30px);
  border-bottom: 1px solid var(--line-l);
}
.legal .lead + h2 { margin-top: 0; border-top: 0; padding-top: 0; }

/* ---- Cookie-Hinweis ------------------------------------------------------ */
.ck {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 900;
  margin-inline: auto;
  max-width: 620px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 18px;
  padding: clamp(18px, 2.4vw, 24px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
  transform: translateY(14px);
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
}
.ck.in { opacity: 1; transform: none; }
.ck h2 {
  font-size: 15px;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--paper);
}
.ck p {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(242, 240, 235, .74);
  margin-top: 8px;
}
.ck p a { color: var(--yellow); text-decoration: underline; }
.ck-row { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.ck-row .btn { flex: 1 1 auto; justify-content: center; }
.ck-row .btn-ghost {
  border: 1px solid rgba(242, 240, 235, .28);
  color: var(--paper);
  background: transparent;
}
.ck-row .btn-ghost:hover { border-color: var(--paper); background: rgba(242, 240, 235, .08); }
.ck-row[hidden] { display: none; }

/* ---- Kategorien ---- */
.ck-groups {
  margin-top: 18px;
  border-top: 1px solid rgba(242, 240, 235, .16);
  max-height: min(46vh, 340px);
  overflow-y: auto;
}
.ck-group { padding: 15px 0; border-bottom: 1px solid rgba(242, 240, 235, .1); }
.ck-group:last-child { border-bottom: 0; padding-bottom: 4px; }
.ck-group p { margin-top: 5px; padding-left: 52px; font-size: 12.5px; line-height: 1.55; }

/* Schalter: die echte Checkbox bleibt bedienbar und wird nur unsichtbar
   darübergelegt - Tastatur, Screenreader und Autofill funktionieren weiter. */
.ck-sw { display: flex; align-items: center; gap: 14px; cursor: pointer; position: relative; }
.ck-sw.is-locked { cursor: default; }
.ck-sw input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: inherit;
}
.ck-track {
  flex: 0 0 auto;
  width: 38px; height: 22px;
  border-radius: 999px;
  background: rgba(242, 240, 235, .18);
  border: 1px solid rgba(242, 240, 235, .3);
  position: relative;
  transition: background .25s ease, border-color .25s ease;
}
.ck-track::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--paper);
  transition: transform .25s cubic-bezier(.3, 1, .3, 1);
}
.ck-sw input:checked ~ .ck-track { background: var(--yellow); border-color: var(--yellow); }
.ck-sw input:checked ~ .ck-track::after { transform: translateX(16px); background: var(--ink); }
.ck-sw input:disabled ~ .ck-track { opacity: .55; }
.ck-sw input:focus-visible ~ .ck-track { outline: 2px solid var(--yellow); outline-offset: 3px; }
.ck-label { font-size: 14px; font-weight: 600; color: var(--paper); }
.ck-label em {
  font-style: normal; font-weight: 400; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(242, 240, 235, .5); margin-left: 8px;
}

@media (max-width: 460px) {
  .ck-row { flex-direction: column-reverse; }
  .ck-group p { padding-left: 0; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ck { transition: none; transform: none; }
  .ck-track, .ck-track::after { transition: none; }
}

/* Cookie table: three columns do not fit a phone, so each row becomes a block
   with the header text carried in as a label. */
@media (max-width: 560px) {
  .legal table, .legal tbody, .legal tr, .legal td { display: block; width: 100%; }
  .legal thead, .legal tr:first-child th { display: none; }
  .legal tr { border-bottom: 1px solid var(--line-l); padding: 12px 0; }
  .legal td { border: 0; padding: 2px 0; }
  .legal td:first-child { font-weight: 600; color: var(--ink); }
  .legal td:last-child { font-size: 13px; color: var(--muted-l); }
}

/* ==========================================================================
   Vollbild-Menü (Mobil)
   Gelb, weil das die Farbe der Serie ist und ein dunkles Overlay auf einer
   ohnehin dunklen Navigation nichts trennt. Unten liegt die Wasserlinie mit
   der Schildkröte - dieselbe Geschichte wie im Hero, nur ruhiger.
   ========================================================================== */
.lang a { display: inline-block; padding: 5px 4px; margin: -5px -4px; }
.lang b { color: var(--paper); font-weight: 600; }

/* Ein Schalter fuer alle Innenmasse des Menues: solange der Browser dvh
   kennt, richten sie sich nach der wirklich sichtbaren Hoehe. vh waere die
   Flaeche ohne Browser- und Systemleisten - danach zu rechnen ist genau der
   Grund, warum unten etwas abgeschnitten wurde. */
.mm { --vh: 1vh; }
@supports (height: 1dvh) { .mm { --vh: 1dvh; } }

.mm {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* 100vh meint auf dem Handy die Flaeche OHNE die Browser- und
     Systemleisten - solange die Adressleiste sichtbar ist, ragt das Menue
     darunter hinaus und der untere Rand wird abgeschnitten. dvh misst, was
     gerade wirklich zu sehen ist. vh bleibt als Rueckfall fuer alte Browser. */
  height: 100vh;
  height: 100dvh;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--yellow);
  color: var(--ink);
  opacity: 0;
  transition: opacity .3s ease;
  overscroll-behavior: contain;
}
.mm[hidden] { display: none; }
.mm.in { opacity: 1; }

/* Der Fokusring ist sonst gelb - auf Gelb unsichtbar. */
.mm :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.mm-bar {
  flex: 0 0 auto;
  height: var(--nav-h);
  padding: 0 5vw;
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}
.mm-x {
  width: 44px; height: 44px;
  margin-right: -10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  border-radius: 50%;
  transition: background .25s;
}
.mm-x:hover { background: rgba(20, 21, 20, .07); }

/* Alles auf einen Blick: die Hoehen haengen an --vh, damit das Menue auch auf
   einem kurzen Geraet ohne Scrollen komplett hineinpasst. */
.mm-body {
  flex: 1 1 auto;
  min-height: 0;
  /* auto statt hidden: passt normalerweise alles ohne Scrollen hinein, aber
     falls doch nicht, wird gescrollt statt heimlich abgeschnitten. */
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  /* Die untere Systemleiste von Android und die Home-Indikator-Zone von iOS
     liegen ueber der Seite. Ohne den Sicherheitsabstand wird die letzte Zeile
     angeschnitten - genau das ist auf einem Samsung passiert. */
  padding: clamp(4px, calc(1.4 * var(--vh)), 20px) 5vw
           calc(clamp(18px, calc(3 * var(--vh)), 44px) + env(safe-area-inset-bottom, 0px));
  position: relative;
  z-index: 2;
}

/* ---- Claim unter dem Logo ---- */
.mm-claim {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .17em;
  line-height: 1.7;
  text-transform: uppercase;
  color: rgba(20, 21, 20, .66);
  margin-bottom: clamp(12px, calc(2.2 * var(--vh)), 26px);
}

/* ---- die grossen Punkte ---- */
.mm-nav { list-style: none; margin: 0; flex: 0 0 auto; }
.mm-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(26px, calc(5.3 * var(--vh)), 44px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.08;
  /* Grosse, weit auseinanderstehende Ziele: die Punkte sind das Wichtigste im
     Menue, werden mit dem Daumen getroffen und oft nicht vom schaerfsten Auge. */
  padding: clamp(9px, calc(1.7 * var(--vh)), 16px) 0;
  color: var(--ink);
}
/* Aktuelle Seite: nur ein Punkt. Die Schrift bleibt voll lesbar - abgedunkelt
   sah sie aus wie deaktiviert. */
.mm-nav a[aria-current="page"] > span::after {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(20, 21, 20, .45);
  margin-left: 12px;
  vertical-align: middle;
}

/* ---- Systeme als kleine Produktkacheln ---- */
/* margin-top:auto auf beiden Bloecken verteilt den Rest gleichmaessig, statt
   allen Leerraum ueber dem Knopf zu sammeln. */
.mm-sys { flex: 0 0 auto; margin-top: auto; padding-top: clamp(8px, calc(1.8 * var(--vh)), 34px); }
.mm-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding-bottom: clamp(6px, calc(1 * var(--vh)), 12px);
  border-bottom: 1px solid rgba(20, 21, 20, .18);
}
.mm-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: clamp(9px, calc(1.5 * var(--vh)), 14px);
}
.mm-chip {
  display: block;
  color: var(--ink);
  transition: transform .3s cubic-bezier(.3, 1, .3, 1);
}
.mm-chip:active { transform: scale(.97); }
.mm-chip-img {
  display: block;
  /* Feste Hoehe statt aspect-ratio + max-height: die Kombination hat bei
     gedeckelter Hoehe auch die BREITE mitgezogen, weil das Verhaeltnis
     erhalten blieb. Die Kacheln schrumpften dadurch auf die halbe Spalte
     und die Beschriftungen standen scheinbar frei im Raum. */
  width: 100%;
  height: clamp(96px, calc(16 * var(--vh)), 190px);
  background: var(--white);
  border-radius: 14px;
  overflow: hidden;
}
.mm-chip-img img {
  width: 100%; height: 100%;
  /* contain, nicht cover: die Kachel bekommt durch max-height ein anderes
     Seitenverhaeltnis als das Bild, und cover haette dann oben und unten
     etwas abgeschnitten - genau deshalb sass die Flasche schief. */
  object-fit: contain;
  object-position: center;
  padding: 5px;
  mix-blend-mode: multiply;
}
/* Beschriftung mit Pfeil: macht sichtbar, dass die Kachel ein Weg ist. */
.mm-chip-t {
  display: block;
  margin-top: clamp(6px, calc(1 * var(--vh)), 10px);
  text-align: center;
}
.mm-chip-t b {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.25;
}

/* ---- Abschluss: CTA, Nebenlinks, Sprache ---- */
.mm-foot { flex: 0 0 auto; margin-top: auto; padding-top: clamp(10px, calc(2 * var(--vh)), 40px); }
/* Zwei Zeilen, beide von Kante zu Kante verteilt. Vorher liefen vier Links
   umher und der Sprachwechsel landete allein in einer dritten Zeile - das
   kostete Hoehe, die jetzt den Produktbildern gehoert. */
/* Untergeordnete Wege: klein, mit Symbol, durch feine Striche getrennt.
   Sie stehen bewusst unter dem Anfrage-Knopf, nicht daneben. */
.mm-util {
  display: flex;
  margin-top: clamp(7px, calc(1.7 * var(--vh)), 20px);
  padding-top: clamp(7px, calc(1.7 * var(--vh)), 20px);
  border-top: 1px solid rgba(20, 21, 20, .18);
}
.mm-util a {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 1px 3px;
  font-size: 10.5px;
  line-height: 1.15;
  color: rgba(20, 21, 20, .78);
  border-left: 1px solid rgba(20, 21, 20, .16);
}
.mm-util a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-util a:first-child { border-left: 0; }
.mm-util a:hover { color: var(--ink); }
.mm-util svg {
  width: 13px; height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mm-lang {
  display: block;
  text-align: center;
  margin-top: clamp(7px, calc(1.5 * var(--vh)), 18px);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(20, 21, 20, .55);
}
.mm-lang b { color: var(--ink); font-weight: 600; }


/* ---- Auftritt: Punkte laufen kurz nacheinander ein ---- */
.mm-nav li, .mm-acts, .mm-sys, .mm-foot {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.3, 1, .3, 1);
}
.mm.in .mm-nav li,
.mm.in .mm-acts,
.mm.in .mm-sys,
.mm.in .mm-foot { opacity: 1; transform: none; }
.mm.in .mm-nav li:nth-child(1) { transition-delay: .06s; }
.mm.in .mm-nav li:nth-child(2) { transition-delay: .10s; }
.mm.in .mm-nav li:nth-child(3) { transition-delay: .14s; }
.mm.in .mm-nav li:nth-child(4) { transition-delay: .18s; }
.mm.in .mm-nav li:nth-child(5) { transition-delay: .22s; }
.mm.in .mm-acts { transition-delay: .26s; }
.mm.in .mm-sys  { transition-delay: .29s; }
.mm.in .mm-foot { transition-delay: .32s; }

/* Burger wird zum X, solange das Menü offen ist. */
body.mm-open { overflow: hidden; }

@media (min-width: 901px) {
  .mm { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .mm, .mm-nav li, .mm-acts, .mm-sys, .mm-foot { transition: none; }
}
@media (max-width: 380px) {
  .mm-chip b { font-size: 11px; }
  .mm-chip-s { display: none; }
}

/* ==========================================================================
   Barrierefreiheit
   Kein Overlay-Widget: die Punkte hier wirken auf die Seite selbst.
   ========================================================================== */

/* Sprunglink - erst sichtbar, wenn er den Fokus hat. */
.skip {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 300;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 3.75rem;
  transition: top .2s ease;
}
.skip:focus { top: 12px; }

/* Ein Fokusring, der auf jedem Untergrund sichtbar bleibt: dunkle Kontur auf
   Gelb und Papier, gelber Ring auf Dunkelblau-Schwarz. Vorher war der Ring
   gelb - im gelben Footer also unsichtbar. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--yellow);
}
.mm :focus-visible,
.band-y :focus-visible,
footer :focus-visible {
  outline-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(242, 240, 235, .9);
}

/* Fusszeile: Ueberschriften der Spalten sind jetzt Absaetze, damit die
   Ueberschriften-Ebenen der Seite nicht von h2 auf h5 springen. */
.foot-cols .foot-h {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--paper); margin-bottom: 14px; font-weight: 600;
}
footer .foot-cols .foot-h { color: rgba(20, 21, 20, .72); }

.foot-a11y {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(20, 21, 20, .2);
  max-width: 78ch;
}
.foot-a11y .foot-h {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600; color: rgba(20, 21, 20, .72); margin-bottom: 10px;
}
.foot-a11y p { font-size: 13px; line-height: 1.7; color: rgba(20, 21, 20, .78); }
.foot-a11y a { text-decoration: underline; }
.foot-a11y a:hover { color: var(--ink); }

/* Kontrast auf Gelb: .62 Deckkraft ergab 4.33:1 und lag damit unter der
   Grenze von 4.5:1 fuer normalen Text. */
footer .foot-legal { color: rgba(20, 21, 20, .76); }
footer .foot-legal a { color: rgba(20, 21, 20, .82); }
.mm-eyebrow { color: rgba(20, 21, 20, .72); }
.mm-chip-s  { color: rgba(20, 21, 20, .72); }
.mm-util a { color: rgba(20, 21, 20, .78); }
.mm-lang    { color: rgba(20, 21, 20, .72); }

/* Klickflaechen: WCAG 2.2 verlangt mindestens 24x24 CSS-Pixel. */
.mm-util a { min-height: 30px; }
.foot-legal a { display: inline-block; padding: 4px 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .skip { transition: none; }
}

/* Der Sprachwechsel steht mobil nur noch im Menü - oben war er neben Logo,
   CTA und Burger die vierte Sache in einer 64px hohen Leiste. */
@media (max-width: 900px) {
  .nav-right .lang { display: none; }
}

/* Quer gehaltenes Telefon: da passt nichts mehr ohne Scrollen. */
@media (max-width: 900px) and (max-height: 460px) {
  .mm-body { overflow-y: auto; }
  .mm-sys { display: none; }
}

/* ---- 404 ---- */
.nf-count { font-size: 14px; color: var(--muted-l); margin-top: 22px; }
.nf-count b { color: var(--ink); font-variant-numeric: tabular-nums; }
.nf-acts { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0 6px; }

/* Dekoration darf nie über der Schrift liegen. Der gelbe Keil (.stripe) liegt
   auf z-index 2. .story-copy steht schon auf 3 und wird hier bewusst NICHT
   angefasst - die Bahn ist absolut positioniert, ein position:relative hätte
   sie aus ihrer Lage am unteren Rand gerissen. */
.hero-inset { z-index: 3; }

/* ==========================================================================
   Touch-Verhalten
   ========================================================================== */

/* Der blaue Kasten, den Android und iOS beim Antippen kurz über Links und
   Knöpfe legen. Er ist die einzige Rückmeldung, die der Browser von sich aus
   gibt - deshalb wird er hier nicht ersatzlos entfernt, sondern durch eine
   eigene ersetzt (siehe unten). Sonst fühlen sich Taps tot an.
   Die Eigenschaft vererbt sich; html genügt, die Liste fängt Elemente ab, die
   sie in einigen Android-Browsern doch neu setzen. */
html,
a, button, label, summary, input, select, textarea,
[role="button"], [tabindex] {
  -webkit-tap-highlight-color: transparent;
}

/* Eigene Rückmeldung, nur auf Geräten ohne Mauszeiger: kurz eindrücken.
   Der Tastatur-Fokusring bleibt davon unberührt. */
@media (hover: none) {
  .btn:active,
  .nav .logo:active,
  .mm-nav a:active,
  .mm-util a:active,
  .foot-cols a:active,
  .type:active,
  .path:active {
    transform: scale(.978);
  }
  .btn, .mm-nav a, .mm-util a, .foot-cols a, .type, .path {
    transition: transform .12s cubic-bezier(.3, 1, .3, 1);
  }
  .mm-nav a:active,
  .mm-util a:active,
  .foot-cols a:active { opacity: .6; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:active, .mm-nav a:active, .mm-util a:active,
  .foot-cols a:active, .type:active, .path:active { transform: none; }
}

/* ---- Menü: Symbole, Winkel, abgesetzter Partner-Weg ---- */
.mm-nav a > span { flex: 1 1 auto; min-width: 0; }
.mm-chev {
  width: 22px; height: 22px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .38;
  transition: transform .25s cubic-bezier(.3, 1, .3, 1), opacity .25s;
}
.mm-nav a:hover .mm-chev,
.mm-nav a:active .mm-chev { opacity: .8; transform: translateX(3px); }
.mm-ico {
  width: 19px; height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .5;
}
.mm-arr {
  /* Grundmass zwingend: ein Inline-SVG ohne width/height faellt sonst auf
     300x150 zurueck. Genau das waere auf dem Desktop passiert, wo die
     Handy-Regeln fuer den Anfrage-Knopf nicht greifen. */
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Der B2B-Weg ist kein weiterer Produktpunkt, sondern ein anderer Adressat.
   Deshalb steht er abgesetzt und in anderer Form - nicht als sechste Zeile
   in derselben Liste. */
/* Zwei gleich hohe Wege nebeneinander: der Umriss fuer Betriebe, die
   gefuellte Flaeche fuer die Anfrage. Das spart die Hoehe von zwei
   gestapelten Knoepfen und macht den Unterschied der Adressaten sichtbar. */
.mm-acts {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: clamp(12px, calc(2.2 * var(--vh)), 26px);
}
.mm-partner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 10px;
  border: 1px solid rgba(20, 21, 20, .34);
  border-radius: 3.75rem;
  color: var(--ink);
  transition: background .25s, border-color .25s;
}
.mm-partner:hover { background: rgba(20, 21, 20, .06); border-color: var(--ink); }
.mm-partner b { font-size: 13px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; }
.mm-partner svg {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mm-cta { gap: 10px; padding: 13px 12px; justify-content: center; width: 100%; }
.mm-cta .mm-arr { width: 17px; height: 17px; }

/* Die Trennlinie über dem Partner-Weg gehört optisch zur Liste. */
.mm-nav { padding-bottom: clamp(10px, calc(1.8 * var(--vh)), 18px); border-bottom: 1px solid rgba(20, 21, 20, .18); }

/* Auf kurzen Geräten zuerst das Entbehrliche: die Zeile unter dem Logo
   wiederholt, was das Logo schon sagt. Lieber sie streichen als das Menü
   scrollen lassen. */
@media (max-height: 740px) {
  .mm-claim { display: none; }
}

/* ---- „3000" in Gelb -------------------------------------------------------
   Ohne zweite Bilddatei: dieselbe Logodatei dient als Maske, darüber liegt
   Gelb, und clip-path schneidet daraus genau das Feld der Ziffern aus
   (obere Zeile, rechts von „ACS"). Die Werte stammen aus der Datei selbst:
   Textband y 14..96 von 240, Ziffern ab x 265 von 720.
   Auf gelbem Grund greift weiter brightness(0) und färbt alles schwarz -
   ein gelbes „3000" wäre dort unsichtbar. */
.brandmark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--yellow);
  -webkit-mask: url("/img/logo.webp") no-repeat left center;
          mask: url("/img/logo.webp") no-repeat left center;
  -webkit-mask-size: contain;
          mask-size: contain;
  clip-path: inset(4% 0 58.5% 36.3%);
  pointer-events: none;
}
/* Auf hellem Grund ist das ganze Zeichen einfarbig - dort stört der Ausschnitt
   nur, weil brightness(0) ihn ohnehin schwarz macht. */
.brandmark--dark::after,
footer .brandmark::after { display: none; }

/* ==========================================================================
   Kopfzeile auf dem Handy: flacher, luftiger, Anfrage als Umriss
   ========================================================================== */
@media (max-width: 900px) {
  /* Luftiger, nicht enger: die Zielgruppe ist nicht 25. Eine hohe Leiste mit
     grossen Zielen liest und trifft sich leichter als eine schmale. */
  :root { --nav-h: 68px; }

  /* Der Burger klebte durch -8px am Rand. Jetzt steht er im Raster. */
  .burger { margin-right: 0; }

  /* Umriss statt Fläche: nimmt weniger Gewicht in einer flachen Leiste ein
     und lässt Logo und Menü nebeneinander atmen. */
  .nav-cta {
    background: transparent;
    color: var(--yellow);
    border: 1px solid var(--yellow);
    gap: 9px;
    padding: 12px 20px;
    font-size: 11.5px;
    letter-spacing: .12em;
  }
  .nav-cta:hover,
  .nav-cta:active { background: var(--yellow); color: var(--ink); }
  .nav-cta .mm-arr { width: 15px; height: 15px; }
  .nav-right { gap: 12px; }
}

/* Auf sehr schmalen Geräten reicht der Platz für Wort plus Pfeil nicht mehr. */
@media (max-width: 380px) {
  .nav-cta { padding: 9px 14px; }
  .nav-cta .mm-arr { display: none; }
}

/* Auf sehr kurzen Ansichten gilt die Rangfolge, die zählt: die vier Punkte,
   der Partner-Weg, die Systeme, die Anfrage. Die Sprachzeile steht ohnehin
   im Footer jeder Seite und weicht hier zuerst. */
@media (max-height: 700px) {
  /* Wo Platz ist, duerfen die Flaschen gross sein; wo nicht, haben die vier
     Punkte Vorrang. */
  .mm-chip-img { height: calc(15 * var(--vh)); }
}
@media (max-height: 660px) {
  .mm-lang { display: none; }
}