/* Sail Spares theme — values transcribed from the original *.dc.html design + docs/feedback.md. */

/* ───────── fonts (self-hosted, SIL OFL) ───────── */
@font-face { font-family:'Figtree'; font-style:normal; font-display:swap; font-weight:300 900;
  src:url(../fonts/figtree-latin-wght-normal.woff2) format('woff2-variations');
  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:'Figtree'; font-style:normal; font-display:swap; font-weight:300 900;
  src:url(../fonts/figtree-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-display:swap; font-weight:400; src:url(../fonts/ibm-plex-mono-latin-400-normal.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:'IBM Plex Mono'; font-style:normal; font-display:swap; font-weight:500; src:url(../fonts/ibm-plex-mono-latin-500-normal.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:'IBM Plex Mono'; font-style:normal; font-display:swap; font-weight:600; src:url(../fonts/ibm-plex-mono-latin-600-normal.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:'IBM Plex Mono'; font-style:normal; font-display:swap; font-weight:400; src:url(../fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-display:swap; font-weight:500; src:url(../fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-display:swap; font-weight:600; src:url(../fonts/ibm-plex-mono-latin-ext-600-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ───────── tokens ───────── */
:root {
  --accent:#daf415; --ink:#121111; --grey:#6e6e6b; --light:#f3f3f1; --body:#3a3a37;
  --font:'Figtree','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',monospace;
  /* full width on every screen: the gutter grows with the screen (feedback: no 1560px cap) */
  --gut:clamp(18px,4vw,96px);
  --header-h:clamp(64px,7vw,88px);
}

/* ───────── base (from the design's global styles) ───────── */
*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; padding:0; background:#fff; }
body { font-family:var(--font); color:var(--ink); -webkit-font-smoothing:antialiased; }
img, video { display:block; max-width:100%; height:auto; }
a { color:var(--ink); text-decoration:none; }
:where(a):hover { color:#3a3a37; } /* zero specificity: component colours win, like the design's inline styles */
h1, h2, h3, h4, p, ul, ol { margin:0; padding:0; }
ul { list-style:none; }
button { font-family:inherit; cursor:pointer; }
input, select, textarea { font-family:inherit; }
::selection { background:var(--accent); color:var(--ink); }

.screen-reader-text { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.skip-link:focus { clip:auto; width:auto; height:auto; z-index:100; top:8px; left:8px; background:var(--accent); color:var(--ink); padding:12px 18px; font-weight:700; }

.site-logo--invert { filter:invert(1); mix-blend-mode:lighten; }

/* ───────── header ───────── */
.site-header { position:sticky; top:0; z-index:60; background:var(--ink); border-bottom:1px solid rgba(255,255,255,.1); }
.admin-bar .site-header { top:32px; }
@media (max-width:782px) { .admin-bar .site-header { top:46px; } }
@media (max-width:600px) { .admin-bar .site-header { top:0; } }

.site-header__bar { padding:0 var(--gut); height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-header__logo { display:flex; align-items:center; flex:0 0 auto; }
.site-header__logo img { height:clamp(42px,4.2vw,60px); width:auto; } /* bigger than the design (user, 2026-09-25) */

.site-nav { display:flex; align-items:center; gap:clamp(12px,1.5vw,26px); }
.site-nav__link { color:#fff; font-size:13px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; padding:6px 0; border-bottom:2px solid transparent; transition:border-color .18s ease, color .18s ease; }
.site-nav__link:hover, .site-nav__link.is-current { border-bottom-color:var(--accent); color:#fff; }
.site-nav__tools { display:flex; align-items:center; gap:14px; padding-left:clamp(8px,1vw,18px); margin-left:clamp(2px,.6vw,10px); border-left:1px solid rgba(255,255,255,.16); }

.cart-pill { position:relative; display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; padding:9px 16px; border-radius:999px; transition:background .18s ease, color .18s ease, border-color .18s ease; }
.cart-pill:hover { background:var(--accent); color:var(--ink); border-color:var(--accent); }

.cart-badge { min-width:25px; height:25px; padding:0 6px; border-radius:999px; background:var(--ink); color:#fff; border:2px solid var(--accent); font-family:var(--mono); font-size:11px; font-weight:600; line-height:1; display:flex; align-items:center; justify-content:center; }
.cart-badge--pill { position:absolute; right:-13px; bottom:-8px; }
.cart-badge--square { position:absolute; top:-8px; right:-8px; min-width:23px; height:23px; padding:0 5px; }

.site-header__mobile { display:none; align-items:center; gap:10px; }
.icon-btn { position:relative; width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid rgba(255,255,255,.22); border-radius:4px; color:#fff; padding:0; }
.icon-btn:hover { color:#fff; }
.burger { flex-direction:column; gap:6px; }
.burger span { display:block; width:20px; height:2px; background:#fff; }

/* desktop nav from 1180px, exactly where the design switches */
@media (max-width:1179.98px) {
  .site-nav { display:none; }
  .site-header__mobile { display:flex; }
}

/* full-screen phone menu */
.mobile-menu { position:fixed; inset:0; background:var(--ink); z-index:80; display:flex; flex-direction:column; padding:24px; overflow-y:auto; }
.mobile-menu[hidden] { display:none; }
.mobile-menu__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; }
.mobile-menu__head img { height:34px; width:auto; }
.mobile-menu__close { font-size:22px; line-height:1; }
.mobile-menu__nav { display:flex; flex-direction:column; gap:2px; }
.mobile-menu__nav a { color:#fff; font-size:26px; font-weight:700; letter-spacing:-.01em; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.mobile-menu__nav a:hover { color:#fff; }
.mobile-menu__cart { margin-top:28px; display:inline-flex; align-items:center; justify-content:center; background:var(--accent); color:var(--ink); font-size:14px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:18px 24px; border-radius:999px; gap:12px; }
.mobile-menu__cart:hover { color:var(--ink); }
html.menu-open, html.menu-open body { overflow:hidden; }

/* ───────── footer: desktop = original design ───────── */
.site-footer { background:var(--ink); color:#fff; }
.site-footer__inner { padding:clamp(48px,6vw,88px) var(--gut) clamp(28px,3vw,40px); }
.site-footer__cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(28px,3vw,48px); }
.site-footer__brand img { height:42px; width:auto; }
.site-footer__tagline { color:rgba(255,255,255,.72); font-size:15px; line-height:1.6; margin-top:20px; max-width:34ch; }
.site-footer__group summary { list-style:none; font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); pointer-events:none; }
.site-footer__group summary::-webkit-details-marker { display:none; }
.site-footer__group ul { display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.site-footer__group a { color:rgba(255,255,255,.82); font-size:15px; }
.site-footer__group a:hover { color:rgba(255,255,255,.82); }
.site-footer__address { color:rgba(255,255,255,.82); font-size:15px; line-height:1.5; }
.site-footer__group a.site-footer__email { color:#fff; border-bottom:2px solid var(--accent); }

.site-footer__notes { margin-top:clamp(28px,3.4vw,44px); padding-top:20px; border-top:1px solid rgba(255,255,255,.12); display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; }
.site-footer__notes p { font-size:12px; line-height:1.6; color:rgba(255,255,255,.55); }
.site-footer__note-no { font-weight:700; color:rgba(255,255,255,.82); margin-right:6px; }
.site-footer__notes a, .site-footer__notes a:hover { color:rgba(255,255,255,.82); font-weight:700; border-bottom:2px solid var(--accent); }

.site-footer__bottom { margin-top:clamp(24px,3vw,40px); padding-top:22px; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; }
.site-footer__bottom p { font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:rgba(255,255,255,.5); }
.site-footer__bottom .site-footer__image-note { color:rgba(255,255,255,.32); }

.site-footer__legal { display:none; }

/* ───────── footer: phones = approved compact version ───────── */
@media (max-width:859px) {
  .site-footer__inner { padding:36px var(--gut) 24px; }
  .site-footer__cols { grid-template-columns:1fr; gap:0; }
  .site-footer__brand { margin-bottom:22px; }
  .site-footer__brand img { height:38px; }
  .site-footer__tagline { color:rgba(255,255,255,.6); font-size:14px; margin-top:14px; max-width:32ch; }
  .site-footer__group { border-top:1px solid rgba(255,255,255,.12); }
  .site-footer__group summary { pointer-events:auto; cursor:pointer; padding:16px 0; display:flex; justify-content:space-between; color:#fff; }
  .site-footer__group summary::after { content:'+'; color:var(--accent); font-size:16px; }
  .site-footer__group[open] summary::after { content:'–'; }
  .site-footer__group ul { gap:0; margin-top:0; padding-bottom:16px; }
  .site-footer__group li { margin-top:10px; }
  .site-footer__group a, .site-footer__address { font-size:14px; color:rgba(255,255,255,.8); }
  .site-footer__group .is-legal { display:none; } /* legal links have their own row on phones */
  .site-footer__notes, .site-footer__bottom { display:none; }
  .site-footer__legal { display:flex; flex-wrap:wrap; gap:8px 18px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); font-size:13px; color:rgba(255,255,255,.6); }
  .site-footer__legal a, .site-footer__legal a:hover { color:rgba(255,255,255,.6); }
  .site-footer__copy { width:100%; margin-top:6px; }
}

/* ───────── shared components ───────── */
/* phone-only / desktop-only elements (important: component display rules must not override the hiding) */
@media (min-width:860px) { .m-only { display:none !important; } }
@media (max-width:859px) { .d-only { display:none !important; } }
/* per-block visibility chosen in the editor (block style "Nur Desktop" / "Nur Handy") */
@media (min-width:860px) { .is-style-nur-handy { display:none !important; } }
@media (max-width:859px) { .is-style-nur-desktop { display:none !important; } }

.kicker { font-family:var(--mono); font-size:clamp(11px,1.1vw,13px); letter-spacing:.22em; text-transform:uppercase; color:var(--grey); }
.kicker--accent { color:var(--accent); }
.text-link { font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); border-bottom:2px solid var(--accent); padding-bottom:6px; }
.text-link:hover { color:var(--ink); }

/* buttons: every button turns lime on hover; lime buttons lift (design + feedback) */
.btn { display:inline-flex; align-items:center; justify-content:center; font-family:var(--font); font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:16px 26px; border-radius:999px; min-height:52px; border:0; text-align:center; cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.btn--lg { font-size:clamp(14px,1.2vw,16px); padding:18px clamp(24px,2.6vw,36px); min-height:56px; }
.btn--lime { background:var(--accent); color:var(--ink); }
.btn--lime:hover { color:var(--ink); transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.28); }
.btn--lg.btn--lime:hover { box-shadow:0 14px 30px rgba(0,0,0,.45); }
.btn--ink { background:var(--ink); color:#fff; }
.btn--outline-light { background:transparent; border:1px solid rgba(255,255,255,.6); color:#fff; }
.btn--outline { background:transparent; border:1px solid rgba(18,17,17,.4); color:var(--ink); }
.btn--ink:hover, .btn--outline-light:hover, .btn--outline:hover { background:var(--accent); border-color:var(--accent); color:var(--ink); }
@media (hover:none) { .btn:hover { transform:none; box-shadow:none; } }

.fn-ref { color:inherit; font-size:.7em; font-weight:700; vertical-align:super; margin-left:3px; }
.fn-ref:hover { color:inherit; }

/* ───────── block: Startseite-Hero ───────── */
/* exactly one screen below the header; text block sits higher than in the original (feedback) */
.ss-hero { position:relative; background:var(--ink); height:calc(100svh - var(--header-h)); min-height:520px; display:flex; align-items:center; overflow:hidden; }
.admin-bar .ss-hero { height:calc(100svh - var(--header-h) - 32px); }
.ss-hero__media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ss-hero::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(100deg,rgba(18,17,17,.92) 0%,rgba(18,17,17,.72) 38%,rgba(18,17,17,.22) 78%,rgba(18,17,17,.35) 100%); }
.ss-hero::after { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg,rgba(18,17,17,.85) 0%,rgba(18,17,17,0) 45%); }
.ss-hero__inner { position:relative; z-index:2; width:100%; padding:clamp(56px,min(12vw,14vh),140px) var(--gut) 6vh; }
.ss-hero .kicker { color:var(--accent); margin-bottom:clamp(18px,2vw,26px); }
.ss-hero h1 { color:#fff; font-size:clamp(40px,min(7.6vw,12vh),104px); font-weight:800; line-height:.96; letter-spacing:-.025em; max-width:16ch; text-wrap:balance; }
.ss-hero__text { color:rgba(255,255,255,.86); font-size:clamp(16px,1.5vw,20px); line-height:1.6; max-width:62ch; margin-top:clamp(20px,2.4vw,30px); text-wrap:pretty; }
.ss-hero__ctas { display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(28px,3.4vw,44px); }
.ss-hero__cue { display:none; }
@media (max-width:859px) {
  .ss-hero { min-height:0; align-items:flex-end; }
  .admin-bar .ss-hero { height:calc(100svh - var(--header-h)); }
  .ss-hero__inner { padding-bottom:96px; }
  .ss-hero__cue { display:block; position:absolute; z-index:2; left:50%; bottom:22px; transform:translateX(-50%); background:none; border:0; padding:6px; color:var(--accent); animation:ss-bob 1.8s ease-in-out infinite; }
}
@keyframes ss-bob { 0%,100% { transform:translate(-50%,0); } 50% { transform:translate(-50%,8px); } }
@media (prefers-reduced-motion:reduce) { .ss-hero__cue { animation:none; } }

/* ───────── block: Drei Wege ───────── */
.ss-ways__head { background:var(--ink); padding:clamp(34px,4vw,66px) var(--gut) clamp(14px,1.6vw,24px); }
.ss-ways__head .kicker { color:var(--accent); }
.ss-ways__head h2 { color:#fff; font-size:clamp(26px,3vw,44px); font-weight:800; letter-spacing:-.02em; line-height:1.08; margin-top:10px; max-width:24ch; text-wrap:balance; }
/* photo more visible: taller section, anchored at the top, fixed (parallax) on desktop (feedback) */
.ss-ways__photo { position:relative; background-repeat:no-repeat; background-attachment:fixed; background-size:cover; background-position:center top; }
.ss-ways__photo::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(18,17,17,.55) 0%,rgba(18,17,17,.05) 30%,rgba(18,17,17,.1) 70%,rgba(18,17,17,.45) 100%); }
.ss-ways__band { display:none; }
.ss-ways__grid { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2vw,34px); align-items:stretch; padding:clamp(80px,10vw,180px) var(--gut) clamp(110px,14vw,240px); }
/* cards: black with white text, no lime top line (feedback) */
.ss-way { background:var(--ink); color:#fff; padding:clamp(24px,2.3vw,38px); display:flex; flex-direction:column; min-height:clamp(300px,min(27vw,45vh),400px); box-shadow:0 24px 60px rgba(0,0,0,.28); }
.ss-way h3 { font-size:clamp(20px,1.75vw,27px); font-weight:700; line-height:1.16; letter-spacing:-.01em; }
.ss-way__text { color:rgba(255,255,255,.8); font-size:clamp(15px,1.1vw,17px); line-height:1.62; margin-top:26px; text-wrap:pretty; }
.ss-way__cta { margin-top:auto; padding-top:24px; }
.ss-way__go { display:none; }
@media (max-width:879px) { .ss-ways__grid { grid-template-columns:minmax(0,1fr); } }
@media (max-width:859px) {
  .ss-ways__head { padding:40px var(--gut) 22px; }
  .ss-ways__head h2 { font-size:26px; }
  /* phones: photo as a band on top, then three compact black rows; no parallax */
  .ss-ways__photo { background-image:none !important; }
  .ss-ways__photo::before { display:none; }
  .ss-ways__band { display:block; height:220px; background-size:cover; background-position:center top; }
  .ss-ways__grid { padding:0; gap:1px; background:rgba(255,255,255,.12); }
  .ss-way { min-height:0; box-shadow:none; padding:22px var(--gut); display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:center; }
  .ss-way__text { margin:0; font-size:15px; grid-column:1; }
  .ss-way__cta { display:none; }
  .ss-way__go { display:grid; place-items:center; grid-row:1 / span 2; grid-column:2; width:44px; height:44px; border-radius:50%; background:transparent; border:1px solid rgba(255,255,255,.5); color:#fff; font-size:18px; font-weight:700; }
  .ss-way__go--accent { background:var(--accent); border-color:var(--accent); color:var(--ink); }
  .ss-way__go:hover { color:#fff; }
  .ss-way__go--accent:hover { color:var(--ink); }
}

/* ───────── block: Beliebte Produkte (homepage card style) ───────── */
.ss-products { position:relative; z-index:2; background:#fff; padding:clamp(56px,7vw,110px) var(--gut); }
.ss-products__head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; }
.ss-products__head h2 { font-size:clamp(28px,3.6vw,52px); font-weight:800; letter-spacing:-.02em; line-height:1.05; margin-top:12px; }
.ss-products__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:clamp(20px,2.2vw,34px); margin-top:clamp(30px,3.6vw,52px); }
.hp-card { display:flex; flex-direction:column; }
.hp-card__img { display:block; background:var(--light); aspect-ratio:4/3; overflow:hidden; }
.hp-card__img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.hp-card__img:hover img { transform:scale(1.04); }
.hp-card__row { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:18px; }
.hp-card__name { font-size:clamp(17px,1.35vw,20px); font-weight:700; letter-spacing:-.01em; line-height:1.3; }
.hp-card__price { font-family:var(--mono); font-size:clamp(15px,1.2vw,17px); font-weight:600; white-space:nowrap; }
.hp-card__price del { opacity:.5; margin-right:6px; }
.hp-card__price ins { text-decoration:none; }
.hp-card__note { font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--grey); margin-top:10px; }
@media (max-width:859px) {
  .ss-products { padding:48px var(--gut); }
  /* phones: swipe row, cards ~75 % wide, next card peeks in (feedback) */
  .ss-products__grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin:30px calc(-1 * var(--gut)) 0; padding:4px var(--gut) 18px; scrollbar-width:none; }
  .ss-products__grid::-webkit-scrollbar { display:none; }
  .ss-products__grid > * { flex:0 0 76%; scroll-snap-align:start; scroll-margin-left:var(--gut); }
}

/* ───────── block: Newsletter-Banner (homepage design, reused everywhere) ───────── */
.ss-newsletter { position:relative; z-index:2; background:var(--ink); overflow:hidden; }
.ss-newsletter__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ss-newsletter::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(18,17,17,.94) 0%,rgba(18,17,17,.8) 52%,rgba(18,17,17,.5) 100%); }
.ss-newsletter__inner { position:relative; z-index:2; padding:clamp(56px,7vw,110px) var(--gut); }
.ss-newsletter__box { max-width:720px; }
.ss-newsletter .kicker { color:var(--accent); }
.ss-newsletter h2 { color:#fff; font-size:clamp(28px,3.6vw,52px); font-weight:800; letter-spacing:-.02em; line-height:1.05; margin-top:14px; text-wrap:balance; }
.ss-newsletter__text { color:rgba(255,255,255,.85); font-size:clamp(16px,1.4vw,19px); line-height:1.6; margin-top:18px; max-width:60ch; text-wrap:pretty; }
.ss-newsletter__form { display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,3vw,38px); }
.ss-newsletter__form input[type=email] { flex:1 1 260px; min-height:56px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28); border-radius:999px; color:#fff; font-size:16px; padding:0 24px; outline:none; transition:border-color .18s ease, background .18s ease; }
.ss-newsletter__form input[type=email]::placeholder { color:rgba(255,255,255,.6); }
.ss-newsletter__form input[type=email]:focus { border-color:var(--accent); background:rgba(255,255,255,.12); }
.ss-newsletter__form .btn { min-height:56px; font-size:clamp(14px,1.2vw,16px); padding:0 clamp(26px,2.6vw,38px); }
.ss-newsletter__form .btn:hover { box-shadow:0 14px 30px rgba(0,0,0,.45); }
.ss-newsletter__fine { font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:rgba(255,255,255,.55); margin-top:16px; }
.ss-newsletter__done { color:rgba(255,255,255,.85); font-size:clamp(16px,1.4vw,19px); line-height:1.6; margin-top:clamp(26px,3vw,38px); }
@media (max-width:859px) {
  .ss-newsletter__inner { padding:48px var(--gut); }
  .ss-newsletter h2 { font-size:26px; }
  .ss-newsletter__text { font-size:15px; }
  .ss-newsletter__form { flex-direction:column; }
  .ss-newsletter__form input[type=email], .ss-newsletter__form .btn { flex:none; width:100%; }
}

.ss-icon { width:34px; height:34px; }
.ss-body strong, .ss-body b { font-weight:700; color:var(--ink); }
.ss-body a, .ss-body a:hover { color:var(--ink); font-weight:700; border-bottom:2px solid var(--accent); }
.ss-body a.fn-ref { font-weight:700; border:0; color:inherit; }

/* ───────── block: Seitenkopf mit Bild (e.g. Über uns) ───────── */
.ss-pagehero { position:relative; background:var(--ink); min-height:clamp(380px,56vh,640px); display:flex; align-items:flex-end; overflow:hidden; }
.ss-pagehero__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ss-pagehero::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(100deg,rgba(18,17,17,.78) 0%,rgba(18,17,17,.5) 40%,rgba(18,17,17,.1) 78%,rgba(18,17,17,.2) 100%); }
.ss-pagehero::after { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg,rgba(18,17,17,.66) 0%,rgba(18,17,17,0) 48%); }
.ss-pagehero__inner { position:relative; z-index:2; width:100%; padding:clamp(48px,6.5vw,88px) var(--gut) clamp(36px,4.4vw,60px); }
.ss-pagehero .kicker { color:var(--accent); margin-bottom:clamp(18px,2vw,26px); }
.ss-pagehero h1 { color:#fff; font-size:clamp(40px,min(7.6vw,12vh),104px); font-weight:800; line-height:.96; letter-spacing:-.025em; max-width:18ch; text-wrap:balance; }
.ss-pagehero__text { color:rgba(255,255,255,.86); font-size:clamp(16px,1.5vw,20px); line-height:1.6; max-width:62ch; margin-top:clamp(20px,2.4vw,30px); text-wrap:pretty; }
@media (max-width:859px) {
  .ss-pagehero { min-height:0; height:62svh; }
  .ss-pagehero h1 { font-size:38px; }
  .ss-pagehero__text { font-size:16px; }
}

/* ───────── block: Mission (statement + four pillars) ───────── */
.ss-mission { background:#fff; padding:clamp(64px,8vw,120px) var(--gut) clamp(56px,7vw,100px); }
/* statement smaller than in the original (feedback: ~22–32px) */
.ss-mission__statement { font-size:clamp(22px,2.4vw,32px); font-weight:800; letter-spacing:-.02em; line-height:1.2; color:var(--ink); max-width:34ch; margin:clamp(20px,2.4vw,30px) auto 0; text-align:center; text-wrap:balance; }
.ss-mission__pillars { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); gap:clamp(28px,3.4vw,48px); margin-top:clamp(72px,9vw,128px); }
.ss-pillar { border-top:2px solid rgba(18,17,17,.16); padding-top:16px; }
.ss-pillar:first-child { border-top-color:var(--accent); }
.ss-pillar__n { font-family:var(--mono); font-size:13px; letter-spacing:.14em; color:var(--grey); }
.ss-pillar__icon { display:none; }
.ss-pillar h3 { font-size:18px; font-weight:700; letter-spacing:-.01em; line-height:1.3; margin-top:10px; text-wrap:balance; }
.ss-pillar p { font-size:14px; line-height:1.55; color:var(--body); margin-top:8px; text-wrap:pretty; }
.ss-mission__ctas { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:clamp(56px,7vw,96px); }
.ss-mission__ctas .btn { padding:0 28px; }
.ss-mission__ctas .btn--lime:hover { box-shadow:0 12px 26px rgba(0,0,0,.2); }
@media (max-width:859px) {
  .ss-mission__statement { font-size:22px; }
  /* phones: 2×2 equal tiles, icon on top, no numbers, no descriptions; first tile black (feedback) */
  .ss-mission__pillars { grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:10px; margin-top:32px; }
  .ss-pillar, .ss-pillar:first-child { border:0; background:var(--light); padding:30px 14px 22px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; gap:14px; min-height:156px; }
  .ss-pillar:first-child { background:var(--ink); color:#fff; }
  .ss-pillar:first-child .ss-pillar__icon { color:var(--accent); }
  .ss-pillar__n, .ss-pillar p { display:none; }
  .ss-pillar__icon { display:flex; align-items:center; justify-content:center; width:34px; height:34px; order:-1; flex:none; }
  .ss-pillar__icon img { width:34px; height:34px; object-fit:contain; }
  .ss-pillar h3 { font-size:15px; line-height:1.3; margin-top:0; max-width:16ch; }
  .ss-mission__ctas { margin-top:28px; }
}

/* ───────── block: Text + Bild (halb/halb, e.g. Wer wir sind) ───────── */
.ss-split { display:flex; flex-wrap:wrap; min-height:clamp(420px,52vw,620px); }
.ss-split__text { flex:1 1 420px; min-width:0; background:var(--light); display:flex; align-items:center; }
.ss-split__box { padding:clamp(48px,6vw,88px) clamp(20px,3vw,44px); max-width:560px; margin:0 auto; width:100%; }
.ss-split h2 { font-size:clamp(26px,3.2vw,42px); font-weight:800; letter-spacing:-.022em; line-height:1.12; margin-top:14px; text-wrap:balance; }
.ss-split__body { font-size:clamp(16px,1.3vw,18px); line-height:1.65; color:var(--body); margin-top:clamp(20px,2.4vw,28px); text-wrap:pretty; }
.ss-split__media { flex:1 1 420px; min-width:0; }
.ss-split__media img { width:100%; height:100%; min-height:clamp(320px,40vw,480px); object-fit:cover; }
@media (max-width:859px) {
  /* phones: headline first, short text, full-width image, no grey gap */
  .ss-split { min-height:0; }
  .ss-split__text { background:#fff; }
  .ss-split__box { padding:8px var(--gut) 28px; }
  .ss-split__media img { min-height:0; height:auto; aspect-ratio:4/3; }
}

/* ───────── block: Refit-Projekt (portrait + before/after) ───────── */
.ss-refit1 { background:#fff; padding:clamp(72px,9vw,140px) var(--gut); }
.ss-refit1__grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(40px,5vw,88px); align-items:stretch; }
/* portrait stretches so its bottom edge lines up with the before/after photos (feedback) */
.ss-refit1__portrait { position:relative; min-height:420px; }
.ss-refit1__portrait img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 72%; background:var(--light); }
.ss-refit1__content { display:flex; flex-direction:column; align-items:flex-start; }
.ss-refit1 h2 { font-size:clamp(32px,4vw,60px); font-weight:800; line-height:1.02; letter-spacing:-.024em; margin-top:14px; max-width:16ch; text-wrap:balance; }
.ss-refit1__body { font-size:clamp(16px,1.35vw,19px); line-height:1.6; color:var(--body); margin-top:22px; max-width:56ch; text-wrap:pretty; }
.ss-refit1 .btn { margin-top:clamp(24px,2.6vw,34px); padding:0 30px; min-height:56px; }
.ss-refit1 .btn--lime:hover { box-shadow:0 14px 30px rgba(0,0,0,.2); }
.ss-ba { align-self:stretch; display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.4vw,20px); margin-top:clamp(32px,3.4vw,48px); }
.ss-ba figure { margin:0; position:relative; }
/* 2:1 photos, never crop the boats (feedback) */
.ss-ba img { width:100%; aspect-ratio:2/1; object-fit:contain; background:var(--light); }
.ss-ba figcaption { position:absolute; top:12px; left:12px; background:#fff; color:var(--ink); font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:5px 9px; }
@media (max-width:859px) {
  .ss-refit1 { padding:56px var(--gut); }
  .ss-refit1__grid { grid-template-columns:1fr; gap:0; }
  .ss-refit1__portrait { display:none; }
  .ss-refit1 h2 { font-size:32px; }
  .ss-ba { grid-template-columns:1fr; gap:10px; margin-top:24px; }
  .ss-refit1 .btn { margin-top:24px; order:5; }
}

/* ───────── block: Refit-Reise (timeline + gallery) ───────── */
.ss-refit2 { background:#fff; padding:clamp(24px,3vw,48px) var(--gut) clamp(72px,9vw,140px); }
.ss-refit2 h2 { font-size:clamp(34px,5.2vw,82px); font-weight:800; letter-spacing:-.028em; line-height:1; margin-top:16px; max-width:17ch; text-wrap:balance; }
/* body text starts further left: columns 4:6 (feedback) */
.ss-refit2__cols { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr); gap:48px; margin-top:clamp(32px,4vw,56px); }
.ss-refit2__body { grid-column:2; font-size:clamp(17px,1.5vw,21px); line-height:1.6; color:var(--body); text-wrap:pretty; }
.ss-timeline { list-style:none; display:flex; flex-wrap:wrap; row-gap:32px; margin-top:clamp(48px,6vw,88px); }
.ss-timeline li { position:relative; flex:1 1 150px; min-width:0; border-top:1px solid rgba(18,17,17,.18); padding:20px 16px 0 0; }
.ss-timeline li::before { content:''; position:absolute; top:-6px; left:0; width:11px; height:11px; border-radius:999px; background:var(--ink); }
.ss-timeline__n { display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--grey); }
.ss-timeline__label { display:block; font-size:clamp(16px,1.4vw,20px); font-weight:700; margin-top:6px; color:var(--ink); }
.ss-timeline li.is-now { border-top-color:var(--accent); }
.ss-timeline li.is-now::before { background:var(--accent); box-shadow:0 0 0 5px rgba(218,244,21,.22); }
.ss-timeline li.is-now .ss-timeline__n { color:var(--accent); }
.ss-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); gap:clamp(14px,1.6vw,24px); margin-top:clamp(40px,5vw,72px); }
.ss-gallery figure { margin:0; min-width:0; }
.ss-gallery img { width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--light); }
@media (max-width:859px) {
  /* phones: short text, only the first photo, button (feedback) */
  .ss-refit2 { padding:24px var(--gut) 56px; }
  .ss-refit2 h2 { font-size:30px; line-height:1.05; }
  .ss-refit2__cols { grid-template-columns:1fr; margin-top:18px; }
  .ss-refit2__body { grid-column:1; font-size:16px; }
  .ss-timeline { display:none; }
  .ss-gallery { display:block; margin-top:24px; }
  .ss-gallery figure:not(:first-child) { display:none; }
  .ss-gallery img { aspect-ratio:4/3; }
  .ss-refit2 .btn { margin-top:28px; }
}

/* ───────── block: Bild + Text (Teaser, e.g. Mach mit) ───────── */
.ss-teaser { background:#fff; padding:clamp(64px,8vw,130px) var(--gut); display:flex; flex-wrap:wrap; gap:clamp(36px,5vw,72px); align-items:center; }
.ss-teaser__media { flex:1 1 340px; min-width:0; max-width:480px; margin:0; }
.ss-teaser__media img, .ss-teaser__mimg img { width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--light); box-shadow:0 24px 60px rgba(18,17,17,.16); }
.ss-teaser__text { flex:1.2 1 400px; min-width:0; }
.ss-teaser h2 { font-size:clamp(28px,3.6vw,48px); font-weight:800; letter-spacing:-.022em; line-height:1.08; margin-top:14px; max-width:20ch; text-wrap:balance; }
.ss-teaser__body { font-size:clamp(16px,1.4vw,19px); line-height:1.6; color:var(--body); margin-top:clamp(18px,2vw,26px); max-width:56ch; text-wrap:pretty; }
.ss-teaser .btn { padding:0 30px; min-height:56px; margin-top:clamp(22px,2.6vw,34px); }
.ss-teaser .btn--lime:hover { box-shadow:0 14px 30px rgba(0,0,0,.2); }
.ss-teaser__mimg { display:none; }
@media (max-width:859px) {
  /* phones: headline first, then image, one sentence, button (feedback) */
  .ss-teaser { padding:56px var(--gut); gap:0; }
  .ss-teaser__media { display:none; }
  .ss-teaser__mimg { display:block; margin-top:22px; }
  .ss-teaser__mimg img { box-shadow:none; }
  .ss-teaser__body { font-size:16px; }
  .ss-teaser .btn { margin-top:24px; }
}

/* ───────── block: Willkommen (2/3 welcome · 1/3 newsletter) ───────── */
.ss-welcome { background:var(--light); display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); align-items:stretch; }
.ss-welcome__left { display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,3.4vw,56px); align-items:center; padding:clamp(48px,5vw,80px) clamp(32px,4vw,64px) clamp(48px,5vw,80px) var(--gut); }
/* round photo with the original two interrupted rings */
.ss-welcome__photo { position:relative; width:clamp(150px,15vw,220px); aspect-ratio:1; margin:clamp(24px,2.3vw,30px); }
.ss-welcome__photo img { position:relative; width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:center 40%; background:#fff; }
.ss-welcome__photo::before, .ss-welcome__photo::after { content:''; position:absolute; border-radius:50%; border:1px solid rgba(18,17,17,.2); pointer-events:none; }
.ss-welcome__photo::before { inset:calc(-1 * clamp(12px,1.1vw,15px));
  -webkit-mask-image:conic-gradient(#000 0deg 24deg, transparent 60deg 90deg, #000 126deg 195deg, transparent 245deg 275deg, #000 330deg 360deg);
  mask-image:conic-gradient(#000 0deg 24deg, transparent 60deg 90deg, #000 126deg 195deg, transparent 245deg 275deg, #000 330deg 360deg); }
.ss-welcome__photo::after { inset:calc(-1 * clamp(24px,2.3vw,30px));
  -webkit-mask-image:conic-gradient(#000 0deg 168deg, transparent 196deg 222deg, #000 256deg 276deg, transparent 308deg 340deg, #000 360deg);
  mask-image:conic-gradient(#000 0deg 168deg, transparent 196deg 222deg, #000 256deg 276deg, transparent 308deg 340deg, #000 360deg); }
.ss-welcome h2 { font-size:clamp(24px,2.4vw,36px); font-weight:800; line-height:1.12; letter-spacing:-.02em; max-width:24ch; text-wrap:balance; }
.ss-welcome__body { font-size:clamp(15px,1.2vw,17px); line-height:1.6; color:var(--body); margin-top:12px; max-width:52ch; text-wrap:pretty; }
.ss-welcome__sig { font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey); margin-top:14px; }
/* newsletter as its own block, full-bleed to top, bottom and the right edge (feedback) */
.ss-nlc { position:relative; overflow:hidden; background:var(--ink); color:#fff; padding:clamp(40px,4vw,64px) var(--gut) clamp(40px,4vw,64px) clamp(32px,3vw,56px); display:flex; flex-direction:column; justify-content:center; }
.ss-nlc__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ss-nlc::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(18,17,17,.94),rgba(18,17,17,.8) 60%,rgba(18,17,17,.6)); }
.ss-nlc > *:not(.ss-nlc__img) { position:relative; z-index:2; }
.ss-nlc .kicker { color:var(--accent); }
.ss-nlc h3 { font-size:clamp(20px,1.7vw,26px); font-weight:800; line-height:1.12; letter-spacing:-.015em; margin-top:12px; }
.ss-nlc__text { font-size:15px; line-height:1.55; color:rgba(255,255,255,.85); margin-top:12px; }
.ss-nlc .ss-newsletter__form { flex-direction:column; gap:10px; margin-top:20px; }
.ss-nlc .ss-newsletter__form input[type=email] { flex:none; min-height:50px; font-size:15px; padding:0 20px; }
.ss-nlc .ss-newsletter__form .btn { min-height:50px; font-size:14px; padding:0 20px; }
.ss-nlc__fine { font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:rgba(255,255,255,.55); margin-top:12px; }
@media (max-width:859px) {
  .ss-welcome { grid-template-columns:1fr; }
  .ss-welcome__left { grid-template-columns:1fr; gap:22px; padding:48px var(--gut); }
  .ss-welcome__photo { width:120px; margin:26px; }
  .ss-welcome h2 { font-size:24px; }
  .ss-nlc { padding:40px var(--gut); }
}

/* ───────── Seitenkopf with buttons (e.g. Mitmachen) ───────── */
.ss-pagehero--action::before { background:linear-gradient(100deg,rgba(18,17,17,.9) 0%,rgba(18,17,17,.62) 42%,rgba(18,17,17,.18) 82%,rgba(18,17,17,.34) 100%); }
.ss-pagehero--action::after { background:linear-gradient(0deg,rgba(18,17,17,.82) 0%,rgba(18,17,17,0) 52%); }
.ss-pagehero--action .ss-pagehero__inner { padding:clamp(56px,min(10vw,12vh),140px) var(--gut) clamp(28px,3.4vw,44px); }
.ss-pagehero__ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(18px,2vw,26px); max-width:420px; }
.ss-pagehero__ctas .btn { flex:1 1 140px; padding:0 26px; min-height:56px; letter-spacing:.08em; }
.ss-pagehero__ctas .btn--lime:hover { background:#fff; transform:none; box-shadow:none; }
.ss-pagehero__fine { font-family:var(--mono); font-size:12px; line-height:1.6; letter-spacing:.04em; color:rgba(255,255,255,.64); margin-top:14px; }
@media (max-width:859px) {
  .ss-pagehero--action { height:auto; }
  .ss-pagehero--action .ss-pagehero__inner { padding-top:180px; padding-bottom:36px; }
  .ss-pagehero--action h1 { font-size:36px; }
  .ss-pagehero__fine { font-size:11px; }
}

/* Seitenkopf layout "text right, capitals" (e.g. FAQ) */
.ss-pagehero--split::before { background:linear-gradient(100deg,rgba(18,17,17,.9) 0%,rgba(18,17,17,.62) 42%,rgba(18,17,17,.18) 82%,rgba(18,17,17,.34) 100%); }
.ss-pagehero--split::after { background:linear-gradient(0deg,rgba(18,17,17,.82) 0%,rgba(18,17,17,0) 52%); }
.ss-pagehero--split .ss-pagehero__inner { padding:clamp(56px,min(10vw,12vh),140px) var(--gut) clamp(36px,4.5vw,76px); display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,72px); align-items:flex-end; }
.ss-pagehero--split .ss-pagehero__main { flex:2 1 620px; min-width:0; }
.ss-pagehero--split .kicker { margin-bottom:clamp(14px,1.8vw,22px); }
.ss-pagehero--split h1 { font-size:clamp(36px,min(6.2vw,11vh),104px); font-weight:900; line-height:.94; letter-spacing:-.04em; text-transform:uppercase; max-width:none; }
.ss-pagehero--split .ss-pagehero__side { flex:1 1 320px; min-width:0; max-width:420px; }
.ss-pagehero--split .ss-pagehero__text { font-size:clamp(16px,1.25vw,19px); line-height:1.55; color:rgba(255,255,255,.88); margin-top:0; }
@media (max-width:859px) { .ss-pagehero--split .ss-pagehero__inner { gap:18px; } }

/* ───────── block: FAQ-Liste (automatic, grouped by topic) ───────── */
.ss-faq { background:#fff; padding:clamp(56px,7vw,110px) var(--gut); display:flex; flex-direction:column; gap:clamp(44px,6vw,92px); }
.ss-faq__group { display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,72px); align-items:flex-start; }
.ss-faq__group h2 { flex:1 1 280px; min-width:0; max-width:420px; font-size:clamp(22px,2.4vw,34px); font-weight:800; letter-spacing:-.026em; line-height:1.08; text-wrap:balance; }
.ss-faq__list { flex:2 1 520px; min-width:0; max-width:980px; border-top:1px solid rgba(18,17,17,.16); }
.ss-faq__item { border-bottom:1px solid rgba(18,17,17,.16); }
.ss-faq__item summary { list-style:none; cursor:pointer; width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; min-height:64px; }
.ss-faq__item summary::-webkit-details-marker { display:none; }
.ss-faq__q { font-size:clamp(17px,1.4vw,20px); font-weight:700; line-height:1.3; letter-spacing:-.012em; }
.ss-faq__icon { display:inline-flex; font-size:22px; line-height:1; color:var(--ink); transition:transform .2s ease; flex:0 0 auto; }
.ss-faq__item[open] .ss-faq__icon { transform:rotate(45deg); }
.ss-faq__a { padding:0 0 22px; }
.ss-faq__a p { color:var(--body); font-size:16px; line-height:1.65; max-width:64ch; text-wrap:pretty; }
.ss-faq__a p + p { margin-top:12px; }
.ss-faq__a a { color:var(--ink); font-weight:700; border-bottom:2px solid var(--accent); }
.ss-faq__a ul { list-style:disc; padding-left:20px; margin-top:10px; color:var(--body); line-height:1.65; }

/* ───────── block: Newsletter-Kopf (hero with sign-up form on the right) ───────── */
.ss-nlhero { position:relative; background:var(--ink); min-height:clamp(380px,56vh,640px); display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; }
.ss-nlhero__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ss-nlhero::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(100deg,rgba(18,17,17,.9) 0%,rgba(18,17,17,.62) 42%,rgba(18,17,17,.18) 82%,rgba(18,17,17,.34) 100%); }
.ss-nlhero::after { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg,rgba(18,17,17,.82) 0%,rgba(18,17,17,0) 52%); }
.ss-nlhero__inner { position:relative; z-index:2; width:100%; padding:clamp(56px,min(10vw,12vh),140px) var(--gut) clamp(44px,6vw,112px); display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,72px); align-items:flex-start; }
.ss-nlhero__main { flex:2 1 560px; min-width:0; }
.ss-nlhero .kicker { color:var(--accent); margin-bottom:clamp(14px,1.8vw,22px); }
.ss-nlhero h1 { color:#fff; font-size:clamp(36px,min(6.2vw,11vh),104px); font-weight:900; line-height:.94; letter-spacing:-.04em; text-transform:uppercase; text-wrap:balance; }
.ss-nlhero__text { font-size:clamp(17px,1.4vw,21px); line-height:1.6; color:rgba(255,255,255,.88); margin-top:clamp(18px,2.4vw,34px); max-width:44ch; text-wrap:pretty; }
.ss-nlhero__side { flex:1 1 320px; min-width:0; max-width:460px; }
.ss-nlform { display:flex; flex-direction:column; gap:14px; border-top:1px solid rgba(255,255,255,.22); padding-top:clamp(20px,2.2vw,30px); }
.ss-nlform input[type=text], .ss-nlform input[type=email] { min-height:56px; background:#fff; border:1px solid rgba(18,17,17,.18); border-radius:999px; color:var(--ink); font-size:16px; padding:0 22px; outline:none; }
.ss-nlform input[type=text]:focus, .ss-nlform input[type=email]:focus { border-color:var(--ink); }
.ss-nlform__consent { display:flex; align-items:flex-start; gap:12px; cursor:pointer; padding:4px 0; }
.ss-nlform__consent input { width:22px; height:22px; margin-top:2px; accent-color:var(--ink); flex:0 0 auto; }
.ss-nlform__consent span { color:rgba(255,255,255,.88); font-size:14px; line-height:1.55; }
/* privacy link white (it was near-black on the dark background — feedback) */
.ss-nlform__consent a, .ss-nlform__consent a:hover { color:#fff; font-weight:600; border-bottom:2px solid var(--accent); }
.ss-nlform .btn { min-height:58px; letter-spacing:.08em; padding:0 30px; }
.ss-nlform .btn--lime:hover { background:#fff; transform:none; box-shadow:none; }
/* letter-spacing 0 so the line fits on one line from ~1440px, wraps naturally below (feedback, option A) */
.ss-nlform__doi { font-family:var(--mono); font-size:12px; line-height:1.7; letter-spacing:0; color:rgba(255,255,255,.64); }
.ss-nldone { background:var(--accent); color:var(--ink); padding:clamp(24px,2.6vw,34px); }
.ss-nldone[hidden] { display:none; }
.ss-nldone .kicker { color:var(--ink); font-size:11px; letter-spacing:.2em; margin:0; }
.ss-nldone h2 { font-size:clamp(22px,2.2vw,30px); font-weight:800; letter-spacing:-.024em; margin-top:12px; }
.ss-nldone p { font-size:15px; line-height:1.6; margin-top:12px; text-wrap:pretty; }

/* ───────── block: Info-Spalten (three short columns, first one lime) ───────── */
.ss-infocols { background:#fff; padding:clamp(44px,5.4vw,80px) var(--gut); display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(20px,2.4vw,36px); }
.ss-infocol { border-top:3px solid rgba(0,0,0,.15); padding-top:18px; }
.ss-infocol:first-child { border-top-color:var(--accent); }
.ss-infocol__label { font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); }
.ss-infocol p:not(.ss-infocol__label) { font-size:15px; line-height:1.6; margin-top:10px; text-wrap:pretty; }
.ss-infocol a { font-weight:700; border-bottom:2px solid var(--accent); }

/* ───────── block: Frage-nicht-dabei (grey band, text left + button) ───────── */
.ss-cta { background:var(--light); padding:clamp(56px,7vw,110px) var(--gut); display:flex; flex-wrap:wrap; align-items:flex-end; gap:clamp(24px,4vw,72px); }
.ss-cta h2 { font-size:clamp(20px,2vw,26px); font-weight:800; letter-spacing:-.01em; }
.ss-cta p { color:var(--grey); font-size:15px; line-height:1.6; margin-top:8px; }
.ss-cta .btn { padding:16px 30px; flex:0 0 auto; }

/* ───────── block: Zweispaltig (label left, text right; also the black notice bar) ───────── */
.ss-cols { background:#fff; padding:clamp(56px,7vw,124px) var(--gut); display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,72px); align-items:flex-start; }
.ss-cols--grau { background:var(--light); }
.ss-cols__label { flex:1 1 280px; min-width:0; max-width:420px; }
.ss-cols__label .kicker, .ss-label { font-size:11px; letter-spacing:.24em; }
.ss-cols__main { flex:2 1 520px; min-width:0; max-width:980px; }
.ss-cols h2 { font-size:clamp(25px,3.2vw,50px); font-weight:800; line-height:1.05; letter-spacing:-.028em; text-wrap:balance; }
.ss-cols__body { font-size:clamp(17px,1.4vw,21px); line-height:1.6; color:var(--body); margin-top:clamp(18px,2vw,32px); max-width:62ch; text-wrap:pretty; }
.ss-cols--hinweis { background:var(--ink); padding:clamp(44px,5.5vw,92px) var(--gut); }
.ss-cols--hinweis .kicker { color:var(--accent); }
.ss-cols--hinweis .ss-cols__body { color:#fff; font-size:clamp(20px,2.4vw,34px); font-weight:800; line-height:1.2; letter-spacing:-.022em; max-width:32ch; margin-top:0; text-wrap:balance; }
@media (max-width:859px) {
  .ss-cols { padding:44px var(--gut); gap:0; }
  .ss-cols h2 { font-size:26px; margin-top:10px; }
  .ss-cols__body { font-size:16px; margin-top:14px; }
  .ss-cols--hinweis { padding:22px var(--gut); }
  .ss-cols--hinweis .ss-cols__body { font-size:17px; margin-top:8px; }
}

/* ───────── block: Schritte (numbered circles joined by a vertical line) ───────── */
.ss-steps { background:var(--light); padding:clamp(56px,7vw,124px) var(--gut); display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,72px); align-items:flex-start; }
.ss-steps--weiss { background:#fff; }
.ss-steps__intro { flex:1 1 280px; min-width:0; max-width:420px; display:flex; flex-direction:column; gap:clamp(14px,1.8vw,24px); }
.ss-steps__intro .kicker { font-size:11px; letter-spacing:.24em; }
.ss-steps__intro h2 { font-size:clamp(25px,3.2vw,50px); font-weight:800; line-height:1.05; letter-spacing:-.028em; text-wrap:balance; }
.ss-steps__intro p { font-size:16px; line-height:1.6; color:var(--body); max-width:34ch; text-wrap:pretty; }
.ss-steps .btn { align-self:flex-start; padding:0 26px; letter-spacing:.08em; margin-top:clamp(6px,1vw,14px); }
.ss-steps__main { flex:2 1 520px; min-width:0; max-width:980px; }
.ss-steps__list { list-style:none; display:flex; flex-direction:column; }
.ss-steps__list li { position:relative; display:flex; gap:clamp(16px,2vw,28px); padding-bottom:clamp(26px,2.8vw,40px); }
.ss-steps__list li:last-child { padding-bottom:0; }
.ss-steps__list li:not(:last-child)::before { content:''; position:absolute; left:21px; top:48px; bottom:4px; border-left:1.5px solid rgba(18,17,17,.35); }
.ss-steps__num { flex:0 0 44px; width:44px; height:44px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--ink); background:var(--light); border:1.5px solid var(--ink); position:relative; }
.ss-steps--weiss .ss-steps__num { background:#fff; }
.ss-steps__list li:last-child .ss-steps__num { background:var(--accent); border-color:var(--accent); }
.ss-steps__c { flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; gap:6px clamp(8px,2vw,32px); padding-top:9px; }
.ss-steps__c h3 { flex:1 1 200px; min-width:0; font-size:clamp(18px,1.5vw,23px); font-weight:700; letter-spacing:-.016em; line-height:1.25; }
.ss-steps__c p { flex:1.4 1 260px; min-width:0; font-size:16px; line-height:1.6; color:var(--body); text-wrap:pretty; }
.ss-steps__main .btn { margin-top:18px; }
@media (max-width:859px) {
  .ss-steps { padding:44px var(--gut); gap:0; }
  .ss-steps__intro h2 { font-size:26px; }
  .ss-steps__list { margin-top:22px; }
}

/* ───────── block: Gesuche (automatic list) ───────── */
.ss-wanted { background:#fff; }
.ss-wanted__head { padding:clamp(40px,4.5vw,76px) var(--gut) clamp(36px,4vw,60px); display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,72px); align-items:flex-end; }
.ss-wanted__title { flex:2 1 520px; min-width:0; }
.ss-wanted__title .kicker { font-size:11px; letter-spacing:.24em; }
.ss-wanted__title h2 { font-size:clamp(25px,3.2vw,50px); font-weight:800; line-height:1.05; letter-spacing:-.028em; margin-top:clamp(14px,1.8vw,26px); text-wrap:balance; }
.ss-wanted__note { flex:1 1 280px; min-width:0; max-width:420px; font-size:16px; line-height:1.6; color:var(--body); text-wrap:pretty; }
.ss-wanted__grid { padding:0 var(--gut) clamp(40px,4.5vw,76px); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:clamp(16px,2vw,32px); }
.ss-want { display:flex; flex-direction:column; gap:12px; padding:clamp(20px,2.2vw,30px) 0; border-top:1px solid rgba(18,17,17,.16); }
.ss-want__ref { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); }
.ss-want h3 { font-size:clamp(18px,1.6vw,23px); font-weight:700; letter-spacing:-.016em; line-height:1.2; text-wrap:balance; }
.ss-want__why { font-size:15px; line-height:1.6; color:var(--body); text-wrap:pretty; margin-bottom:12px; }
.ss-want .btn { margin-top:auto; align-self:flex-start; font-size:13px; letter-spacing:.08em; padding:0 22px; min-height:48px; }
.ss-wanted__hint { display:none; }
@media (max-width:859px) {
  /* phones: swipe row of cards */
  .ss-wanted__head { padding:44px var(--gut) 0; gap:0; }
  .ss-wanted__title h2 { font-size:26px; margin-top:10px; }
  .ss-wanted__grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin-top:22px; padding:0 var(--gut) 8px; scrollbar-width:none; }
  .ss-wanted__grid::-webkit-scrollbar { display:none; }
  .ss-want { flex:0 0 80%; scroll-snap-align:start; scroll-margin-left:var(--gut); background:#fff; border:1px solid rgba(18,17,17,.12); padding:18px; }
  .ss-wanted__hint { display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); padding:10px var(--gut) 44px; }
}

/* ───────── block: Abschluss (headline + button) ───────── */
.ss-closing { background:#fff; padding:clamp(56px,7vw,124px) var(--gut); display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,72px); align-items:flex-end; }
.ss-closing--grau { background:var(--light); }
.ss-closing__text { flex:2 1 520px; min-width:0; }
.ss-closing h2 { font-size:clamp(25px,3.2vw,50px); font-weight:800; line-height:1.05; letter-spacing:-.028em; max-width:22ch; text-wrap:balance; }
.ss-closing__cta { flex:1 1 280px; min-width:0; max-width:420px; }
.ss-closing .btn { padding:0 30px; min-height:58px; letter-spacing:.08em; }
@media (max-width:859px) {
  .ss-closing { padding:44px var(--gut); flex-direction:column; align-items:flex-start; gap:24px; }
  .ss-closing__text, .ss-closing__cta { flex:none; }
  .ss-closing h2 { font-size:26px; }
}

/* ───────── block: Formular-Dialog (Mitmachen) ───────── */
.ss-dialog { position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; border:0; padding:clamp(16px,4vh,64px) 18px; background:transparent; overflow-y:auto; }
.ss-dialog[open] { display:flex; align-items:flex-start; justify-content:center; }
.ss-dialog::backdrop { background:rgba(18,17,17,.55); }
.ss-dialog__box { background:#fff; width:100%; max-width:560px; padding:clamp(22px,2.6vw,38px); box-shadow:0 30px 80px rgba(0,0,0,.35); display:flex; flex-direction:column; gap:18px; }
.ss-dialog__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.ss-dialog__kicker { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); }
.ss-dialog h2 { font-size:clamp(20px,2vw,26px); font-weight:800; letter-spacing:-.018em; line-height:1.14; margin-top:8px; }
.ss-dialog__close { width:48px; height:48px; background:transparent; border:1px solid rgba(18,17,17,.22); border-radius:4px; font-size:22px; line-height:1; color:var(--ink); flex:0 0 auto; }
.ss-dialog__ref { background:var(--light); border-left:3px solid var(--accent); padding:14px 16px; }
.ss-dialog__ref[hidden] { display:none; }
.ss-dialog__ref-label { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); }
.ss-dialog__ref-title { font-size:15px; line-height:1.5; font-weight:600; margin-top:6px; }
.ss-dialog__ref-meta { font-family:var(--mono); font-size:12px; color:var(--grey); margin-top:4px; }
.ss-dialog__placeholder { font-family:var(--mono); font-size:12px; color:var(--grey); border:1px dashed rgba(18,17,17,.3); padding:16px; }
html.dialog-open { overflow:hidden; }

.btn--sm { min-height:44px; padding:10px 18px; font-size:12px; }

/* ───────── block: Kontakt-Kopf (compact grey band, FAQ pointer right) ───────── */
/* header + tiles share one centred column, so they line up on very wide screens */
.ss-contacthead, .ss-tiles { --tiles-max:calc(4 * 380px + 3 * 22px + 2 * var(--gut)); }
.ss-contacthead { background:var(--light); padding:clamp(32px,3.6vw,56px) 0 clamp(28px,3vw,44px); }
.ss-contacthead__inner { max-width:var(--tiles-max); margin:0 auto; padding:0 var(--gut); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px 64px; align-items:end; }
.ss-contacthead h1 { font-size:clamp(32px,3.4vw,54px); font-weight:800; line-height:1.02; letter-spacing:-.022em; margin-top:12px; }
.ss-contacthead__sub { font-size:clamp(15px,1.2vw,18px); line-height:1.55; color:var(--body); margin-top:12px; max-width:52ch; }
.ss-contacthead__aside { max-width:360px; }
.ss-contacthead__aside p { font-size:15px; color:var(--body); line-height:1.55; margin-top:10px; }
.ss-contacthead__aside .kicker { margin-top:0; }
.ss-contacthead__aside .text-link { display:inline-block; margin-top:12px; font-size:12px; padding-bottom:4px; }
@media (max-width:859px) {
  .ss-contacthead { padding:40px 0 28px; }
  .ss-contacthead__inner { grid-template-columns:1fr; gap:26px; }
  .ss-contacthead h1 { font-size:40px; }
}

/* ───────── block: Kacheln (contact tiles; phone = compact rows) ───────── */
.ss-tiles { padding:clamp(28px,3vw,48px) 0 clamp(56px,7vw,110px); }
.ss-tiles__grid { max-width:var(--tiles-max); margin:0 auto; padding:0 var(--gut); display:grid; grid-template-columns:repeat(4,minmax(0,380px)); gap:clamp(14px,1.4vw,22px); }
.ss-tile { display:flex; flex-direction:column; background:var(--light); color:var(--ink); transition:transform .25s ease, box-shadow .25s ease; }
.ss-tile:hover { color:var(--ink); transform:translateY(-4px); box-shadow:0 22px 46px rgba(18,17,17,.18); }
.ss-tile__img { aspect-ratio:16/10; overflow:hidden; }
.ss-tile__img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.ss-tile:hover .ss-tile__img img { transform:scale(1.04); }
.ss-tile__b { display:flex; flex-direction:column; gap:6px; padding:16px 18px 20px; flex:1; }
.ss-tile__n { font-family:var(--mono); font-size:11px; color:var(--grey); }
.ss-tile h3 { font-size:clamp(16px,1.2vw,19px); line-height:1.25; font-weight:700; }
.ss-tile p { font-size:14px; color:var(--body); line-height:1.5; margin-bottom:12px; }
/* the buttons of all tiles sit on one line, pinned to the bottom (feedback) */
.ss-tile .btn { margin-top:auto; align-self:flex-start; }
.ss-tile:hover .btn { background:var(--accent); }
.ss-tile__go { display:none; }
@media (hover:none) { .ss-tile:hover { transform:none; box-shadow:none; } .ss-tile:hover .ss-tile__img img { transform:none; } }
@media (max-width:1100px) and (min-width:860px) { .ss-tiles__grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:859px) {
  .ss-tiles { padding:28px 0 48px; }
  .ss-tiles__grid { grid-template-columns:1fr; gap:10px; }
  .ss-tile { display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 14px; padding:18px; }
  .ss-tile__img, .ss-tile__n, .ss-tile .btn { display:none; }
  .ss-tile__b { padding:0; gap:4px; }
  .ss-tile h3 { font-size:17px; }
  .ss-tile p { font-size:14px; margin-bottom:0; }
  .ss-tile__go { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--ink); color:#fff; font-size:18px; }
}

/* ───────── block: Formular-Split (dark photo column + lime form column; literal original) ───────── */
.ss-formsplit { display:grid; grid-template-columns:.85fr 1.15fr; align-items:stretch; }
.ss-formsplit__visual { position:relative; background:var(--ink); overflow:hidden; min-height:clamp(320px,38vw,560px); }
.ss-formsplit__visual > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ss-formsplit__visual::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(18,17,17,.76) 0%,rgba(18,17,17,.5) 38%,rgba(18,17,17,.9) 100%); }
.ss-formsplit--leicht .ss-formsplit__visual::after { background:linear-gradient(180deg,rgba(18,17,17,.7) 0%,rgba(18,17,17,.4) 40%,rgba(18,17,17,.88) 100%); }
.ss-formsplit__in { position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:space-between; gap:clamp(26px,3vw,44px); padding:clamp(26px,3.2vw,60px); }
.ss-formsplit--leicht .ss-formsplit__in { gap:clamp(28px,3vw,48px); }
.ss-formsplit__back { font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.7); align-self:flex-start; }
.ss-formsplit__back:hover { color:#fff; }
.ss-formsplit .kicker { font-size:clamp(11px,1.1vw,13px); letter-spacing:.2em; color:var(--accent); }
.ss-formsplit h1 { color:#fff; font-size:clamp(32px,min(4.4vw,8vh),68px); font-weight:900; letter-spacing:-.038em; line-height:.96; text-transform:uppercase; margin-top:16px; max-width:14ch; text-wrap:balance; }
.ss-formsplit__lead { color:rgba(255,255,255,.82); font-size:clamp(15px,1.2vw,18px); line-height:1.6; margin-top:16px; max-width:44ch; text-wrap:pretty; }
.ss-formsplit__tag { font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:rgba(255,255,255,.5); max-width:36ch; }
.ss-formsplit__how summary { display:none; list-style:none; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.ss-formsplit__how summary::-webkit-details-marker { display:none; }
.ss-formsplit__steps { display:flex; flex-direction:column; gap:14px; border-top:1px solid rgba(255,255,255,.2); padding-top:20px; }
.ss-formsplit__step { display:flex; gap:14px; }
.ss-formsplit__step span { font-family:var(--mono); font-size:12px; color:var(--accent); flex:0 0 auto; }
.ss-formsplit__step p { color:rgba(255,255,255,.8); font-size:14px; line-height:1.5; }
.ss-formsplit__form { background:var(--accent); color:var(--ink); padding:clamp(28px,3.2vw,64px); display:flex; flex-direction:column; justify-content:center; }
.ss-formsplit__form-in { display:flex; flex-direction:column; gap:20px; width:100%; max-width:620px; }
.ss-formsplit__form h2 { font-size:clamp(24px,2.6vw,36px); font-weight:800; letter-spacing:-.02em; }
.ss-formsplit__note { font-family:var(--mono); font-size:11px; line-height:1.7; letter-spacing:.04em; color:rgba(18,17,17,.75); border-top:1px solid rgba(18,17,17,.25); padding-top:14px; }
.ss-formsplit__note a { color:var(--ink); font-weight:600; border-bottom:1px solid var(--ink); }
.ss-formsplit__placeholder { font-family:var(--mono); font-size:12px; border:1px dashed rgba(18,17,17,.45); padding:22px; background:rgba(255,255,255,.35); }
@media (max-width:979px) { .ss-formsplit { grid-template-columns:minmax(0,1fr); } }
@media (max-width:859px) {
  .ss-formsplit__tag { display:none; } /* phones: no small tagline (feedback) */
  /* phones: steps as a collapsible box under "Wie funktioniert's:", closed by default */
  .ss-formsplit__how { border-top:1px solid rgba(255,255,255,.2); padding-top:14px; }
  .ss-formsplit__how summary { display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
  .ss-formsplit__how summary::after { content:'+'; font-size:16px; }
  .ss-formsplit__how[open] summary::after { content:'–'; }
  .ss-formsplit__how .ss-formsplit__steps { border-top:0; padding-top:0; margin-top:14px; }
}

/* ───────── shop: search field in the Seitenkopf (Shop page) ───────── */
.ss-shopsearch { display:flex; align-items:stretch; background:#fff; border:1px solid rgba(18,17,17,.2); border-radius:999px; overflow:hidden; max-width:560px; margin-top:clamp(18px,2vw,26px); }
.ss-shopsearch input { flex:1 1 auto; min-width:0; min-height:56px; background:transparent; border:0; outline:none; font-size:16px; padding:0 8px 0 22px; color:var(--ink); }
.ss-shopsearch input::-webkit-search-cancel-button { display:none; }
.ss-shopsearch button { flex:0 0 auto; min-height:56px; background:var(--ink); color:#fff; border:0; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:0 22px; cursor:pointer; transition:background .18s ease, color .18s ease; }
.ss-shopsearch button:hover { background:var(--accent); color:var(--ink); }
.ss-pagehero--action:has(.ss-shopsearch) .ss-pagehero__inner { padding-bottom:clamp(32px,4vw,52px); }
@media (max-width:859px) { .ss-shopsearch { margin-top:22px; } }

/* ───────── block: Kategorie-Karten (black caption bar, lime arrow — feedback option A) ───────── */
.ss-cats { background:#fff; padding:clamp(56px,7vw,110px) var(--gut) clamp(28px,3vw,48px); }
.ss-cats__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:clamp(20px,2.2vw,34px); }
.ss-cat { display:flex; flex-direction:column; background:var(--light); box-shadow:0 18px 40px rgba(18,17,17,.12); transition:transform .2s ease, box-shadow .2s ease; }
.ss-cat:hover { transform:translateY(-4px); box-shadow:0 22px 46px rgba(18,17,17,.18); }
.ss-cat__img { display:block; aspect-ratio:4/3; overflow:hidden; }
.ss-cat__img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.ss-cat:hover .ss-cat__img img { transform:scale(1.04); }
.ss-cat__cap { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:20px 22px; background:var(--ink); color:#fff; font-size:clamp(17px,1.35vw,20px); font-weight:700; letter-spacing:-.01em; line-height:1.3; }
.ss-cat__cap::after { content:'→'; font-weight:400; color:var(--accent); }
.ss-cat:hover .ss-cat__cap { color:#fff; }
@media (hover:none) { .ss-cat:hover { transform:none; } }
@media (max-width:859px) {
  .ss-cats { padding:40px var(--gut) 8px; }
  /* phones: compact rows instead of big image cards */
  .ss-cats__grid { grid-template-columns:1fr; gap:10px; }
  .ss-cat { flex-direction:row; box-shadow:0 8px 20px rgba(18,17,17,.08); }
  .ss-cat__img { flex:0 0 96px; aspect-ratio:1; }
  .ss-cat__cap { flex:1; font-size:17px; padding:14px 18px; }
}

/* ───────── the one shop product card (Shop "Beliebt diese Woche"; no label boxes — feedback) ───────── */
.pcard { position:relative; display:flex; flex-direction:column; background:#fff; box-shadow:0 12px 30px rgba(18,17,17,.10); transition:transform .2s ease, box-shadow .2s ease; }
.pcard:hover { transform:translateY(-4px); box-shadow:0 22px 46px rgba(18,17,17,.18); }
.pcard__img { display:block; background:var(--light); aspect-ratio:1/1; overflow:hidden; }
.pcard__img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.pcard:hover .pcard__img img { transform:scale(1.04); }
.pcard__body { display:flex; flex-direction:column; gap:8px; padding:16px 18px 20px; flex:1; }
.pcard__meta { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); }
.pcard__name { font-size:clamp(16px,1.25vw,18px); font-weight:700; line-height:1.3; letter-spacing:-.012em; }
.pcard__name a, .pcard__name a:hover { color:var(--ink); }
/* the whole card is one link (the button sits above it) */
.pcard__name a::after { content:''; position:absolute; inset:0; z-index:1; }
.pcard__note { font-size:14px; line-height:1.45; color:var(--grey); }
.pcard__price { font-family:var(--mono); font-size:15px; font-weight:600; margin-top:auto; padding-top:6px; }
.pcard__price del { opacity:.5; margin-right:6px; font-weight:400; }
.pcard__price ins { text-decoration:none; }
.pcard__btn { position:relative; z-index:2; margin-top:10px; width:100%; }
/* personalised demo tile inside the square image (boat name in mono capitals — keep, feedback) */
.pcard__demo { width:100%; height:100%; display:grid; place-items:center; background:#1c1b1b; }
.pcard__demo span { width:72%; aspect-ratio:1.45; border-radius:14px; display:grid; place-items:center; font-family:var(--mono); font-size:clamp(12px,1.1vw,16px); letter-spacing:.2em; text-transform:uppercase; box-shadow:0 18px 40px rgba(0,0,0,.45); transition:transform .5s ease; }
.pcard:hover .pcard__demo span { transform:scale(1.04); }
@media (hover:none) { .pcard:hover { transform:none; } }
@media (max-width:859px) {
  .pcard__meta, .pcard__note, .pcard__btn { display:none; } /* phones: title + price only, whole card tappable */
}

/* product row with shop cards (Shop page "Beliebt diese Woche") */
.ss-products--shop { padding:clamp(28px,3.4vw,56px) var(--gut) clamp(56px,7vw,110px); }
.ss-products--shop .ss-products__head { gap:16px; padding-top:clamp(24px,3vw,40px); border-top:1px solid rgba(18,17,17,.14); }
.ss-products--shop .ss-products__head h2 { font-size:clamp(25px,3.2vw,50px); letter-spacing:-.028em; margin-top:0; }
.ss-products--shop .ss-products__head .kicker + h2 { margin-top:12px; }
.ss-products--shop .text-link { font-size:12px; padding-bottom:5px; }
.ss-products--shop .ss-products__grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:clamp(14px,1.6vw,24px); margin-top:clamp(20px,2.4vw,34px); }
@media (max-width:859px) {
  .ss-products--shop { padding:32px var(--gut) 48px; }
  .ss-products--shop .ss-products__grid { display:flex; margin-top:24px; }
  .ss-products--shop .pcard__body { padding:12px 12px 14px; gap:6px; }
  .ss-products--shop .pcard__name { font-size:14px; }
}

/* "Teil nicht dabei?" band, large (shop) */
.ss-cta--large { padding:clamp(56px,7vw,110px) var(--gut); }
.ss-cta--large > div:first-child { flex:2 1 520px; min-width:0; }
.ss-cta--large h2 { font-size:clamp(25px,3.2vw,50px); font-weight:800; letter-spacing:-.028em; line-height:1.05; }
.ss-cta--large p { font-size:clamp(16px,1.3vw,19px); line-height:1.6; color:var(--body); margin-top:clamp(14px,1.6vw,22px); max-width:44ch; text-wrap:pretty; }
.ss-cta--large .ss-cta__action { flex:1 1 280px; min-width:0; max-width:420px; }
.ss-cta--large .btn { padding:0 30px; min-height:58px; letter-spacing:.08em; }
.ss-cta--stacked { display:block; padding:clamp(40px,4.5vw,72px) var(--gut); }
.ss-cta--stacked .ss-cta__action { max-width:none; margin-top:clamp(26px,2.8vw,40px); }

/* ───────── shop category page ───────── */
.ss-pagehero--cat { flex-direction:column; align-items:stretch; justify-content:flex-end; }
.ss-pagehero--cat .ss-pagehero__inner { padding:clamp(56px,min(10vw,12vh),140px) var(--gut) clamp(28px,3.4vw,52px); }
.ss-pagehero--cat.is-compact .ss-pagehero__inner { padding-bottom:clamp(36px,4.5vw,76px); }
.ss-pagehero--cat h1 { font-size:clamp(38px,min(6.6vw,11vh),92px); line-height:.98; }
.ss-cattabs { position:relative; z-index:2; display:flex; gap:8px; overflow-x:auto; padding:0 var(--gut) clamp(24px,3vw,44px); }
.ss-cattab { flex:0 0 auto; white-space:nowrap; display:inline-flex; align-items:center; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:0 18px; min-height:46px; border-radius:999px; border:1px solid rgba(255,255,255,.4); color:#fff; transition:background .18s ease, color .18s ease, border-color .18s ease; }
.ss-cattab:hover { color:#fff; border-color:#fff; }
.ss-cattab.is-active, .ss-cattab.is-active:hover { background:var(--accent); border-color:var(--accent); color:var(--ink); }

.ss-catlist { background:#fff; padding:clamp(36px,4.5vw,76px) var(--gut) clamp(56px,7vw,110px); }
.ss-catlist.is-compact { padding-top:clamp(56px,7vw,110px); }
.ss-catbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; padding-bottom:16px; border-bottom:1px solid rgba(18,17,17,.14); }
.ss-catbar__count, .ss-sort__label { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); }
.ss-sort label { display:flex; align-items:center; gap:10px; }
.ss-sort select { min-height:48px; background:var(--light); border:1px solid rgba(18,17,17,.18); border-radius:4px; font-size:15px; padding:0 12px; color:var(--ink); outline:none; }
.ss-catgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:clamp(20px,2.4vw,40px); margin-top:clamp(24px,3vw,44px); }
/* only a few products: keep the card width instead of stretching them across the screen */
.ss-catgrid:has(> :nth-child(-n+3):last-child) { grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); }
.ss-catlist.is-compact .ss-catgrid { grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); margin-top:0; }
.ss-catlist__empty { font-size:clamp(16px,1.3vw,19px); line-height:1.6; color:var(--body); margin-top:clamp(24px,3vw,44px); max-width:52ch; }
.ss-pagination .nav-links { display:flex; gap:8px; justify-content:center; margin-top:clamp(36px,4vw,60px); }
.ss-pagination .page-numbers { display:inline-grid; place-items:center; min-width:46px; min-height:46px; border:1px solid rgba(18,17,17,.2); border-radius:999px; font-family:var(--mono); font-size:13px; color:var(--ink); }
.ss-pagination .page-numbers.current { background:var(--ink); border-color:var(--ink); color:#fff; }
@media (max-width:859px) {
  .ss-pagehero--cat { min-height:300px; height:auto; }
  .ss-pagehero--cat .ss-pagehero__inner { padding-top:120px; padding-bottom:32px; }
  .ss-pagehero--cat h1 { font-size:38px; }
  .ss-catlist { padding:18px var(--gut) 48px; }
  .ss-catlist.is-compact { padding-top:28px; }
  .ss-catbar { gap:8px; padding:0 0 10px; border:0; }
  /* category filter = one segmented switch with equal parts (mockup) */
  .ss-segment { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; width:100%; border:1px solid rgba(18,17,17,.18); border-radius:999px; padding:4px; }
  .ss-segment a { border-radius:999px; padding:10px 4px; font-size:13px; font-weight:600; text-align:center; color:var(--ink); white-space:nowrap; }
  .ss-segment a.is-active { background:var(--ink); color:#fff; }
  .ss-catbar__count { display:none; }
  .ss-sort { width:100%; display:flex; justify-content:flex-end; }
  .ss-sort label { gap:4px; }
  .ss-sort__label { font-family:var(--font); font-size:13px; letter-spacing:0; text-transform:none; }
  .ss-sort__label::after { content:':'; }
  .ss-sort select { min-height:0; border:0; padding:4px 2px; font-size:13px; font-weight:700; background:transparent; }
  .ss-catgrid, .ss-catgrid:has(> :nth-child(-n+3):last-child), .ss-catlist.is-compact .ss-catgrid { grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
  .ss-catgrid .pcard__body { padding:12px 12px 14px; gap:6px; }
  .ss-catgrid .pcard__name { font-size:14px; }
}

/* ───────── Forminator forms in the design (no Forminator styling; "Design: Keins") ─────────
   Default = dialog style (Mitmachen, Frage zum Artikel): light inputs, mono labels.
   Contact pages (.ss-formsplit__form, lime column): white inputs, bold labels — literal originals. */
.forminator-ui.forminator-custom-form { display:flex !important; flex-direction:column; gap:16px; margin:0; }
.forminator-ui .forminator-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:16px; margin:0; }
.forminator-ui .forminator-row.forminator-hidden, .forminator-ui .forminator-hidden, .forminator-ui .forminator-row:has(> .forminator-col[style*="display: none"]:only-child) { display:none; }
.forminator-ui .forminator-col { width:auto; max-width:none; padding:0; min-width:0; }
.forminator-ui .forminator-field { display:flex; flex-direction:column; gap:8px; margin:0; }
.forminator-ui .forminator-label { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); margin:0; }
.forminator-ui .forminator-required { display:none; }
.forminator-ui .forminator-input, .forminator-ui .forminator-textarea, .forminator-ui select, .forminator-ui .forminator-datepicker { width:100%; min-height:56px; background:var(--light); border:1px solid rgba(18,17,17,.18); border-radius:4px; font-family:var(--font); font-size:16px; padding:0 18px; color:var(--ink); outline:none; transition:border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.forminator-ui .forminator-textarea { min-height:140px; padding:16px 18px; line-height:1.55; resize:vertical; }
.forminator-ui .forminator-input:focus, .forminator-ui .forminator-textarea:focus, .forminator-ui select:focus { border-color:var(--ink); background:#fff; }
.forminator-ui .forminator-error-message, .forminator-ui .forminator-description.forminator-error { font-size:13px; line-height:1.4; color:#b42318; }
.forminator-ui .forminator-has_error .forminator-input, .forminator-ui .forminator-has_error .forminator-textarea { border-color:#b42318; box-shadow:0 0 0 1px #b42318; }
.forminator-ui .forminator-response-message { font-size:15px; line-height:1.5; }
.forminator-ui .forminator-response-message:empty, .forminator-ui .forminator-response-message[aria-hidden="true"] { display:none; }
.forminator-ui .forminator-response-message.forminator-error { border-left:3px solid var(--ink); background:var(--light); padding:14px 16px; font-weight:600; }
.forminator-ui .forminator-response-message.forminator-error p { margin:0; }
.forminator-ui .forminator-button-submit { align-self:flex-start; min-height:58px; background:var(--ink); color:#fff; border:0; border-radius:999px; font-family:var(--font); font-size:15px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:0 28px; cursor:pointer; transition:background .18s ease, color .18s ease; }
.forminator-ui .forminator-button-submit:hover { background:var(--accent); color:var(--ink); }
.forminator-ui .forminator-row-last .forminator-col { display:flex; }
.forminator-ui .forminator-row-last .forminator-field { width:100%; }
.forminator-ui.forminator-custom-form .forminator-button-submit[disabled] { opacity:.5; }

/* upload: dashed drop zone + file list (assets/js/forms.js adds the texts) */
.forminator-ui .forminator-multi-upload, .forminator-ui .forminator-file-upload { position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; border:1px dashed rgba(18,17,17,.45); border-radius:2px; background:rgba(255,255,255,.35); padding:22px; cursor:pointer; transition:background .15s ease; }
.forminator-ui .forminator-multi-upload:hover, .forminator-ui .forminator-multi-upload.is-dragover { background:rgba(255,255,255,.6); }
.forminator-ui .forminator-multi-upload input[type=file], .forminator-ui .forminator-file-upload input[type=file] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.forminator-ui .forminator-multi-upload > :not(input):not(.ss-drop__title):not(.ss-drop__types) { display:none; }
.ss-drop__title { font-size:14px; font-weight:700; }
.ss-drop__types { font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:rgba(18,17,17,.7); }
.forminator-ui .forminator-uploaded-files { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.forminator-ui .forminator-uploaded-files:empty { display:none; }
.forminator-ui .forminator-uploaded-files li { display:flex; align-items:center; justify-content:space-between; gap:10px; background:#fff; padding:9px 12px; border-radius:2px; font-size:13px; }
.forminator-ui .forminator-uploaded-files .forminator-uploaded-file--image, .forminator-ui .forminator-uploaded-files .forminator-img-preview { display:none; }
.forminator-ui .forminator-uploaded-files .forminator-uploaded-file--title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:400; margin:0; }
.forminator-ui .forminator-uploaded-files .forminator-uploaded-file--size { display:none; }
.forminator-ui .forminator-uploaded-files button { background:transparent; border:0; color:var(--grey); font-size:16px; line-height:1; cursor:pointer; padding:0; }
.forminator-ui .forminator-uploaded-files .forminator-error-message { font-size:12px; }

/* "Ich möchte: Abgeben | Leihen" as a segmented switch (Ausrüstung form; forms.js wraps the options in a track) */
.forminator-ui .ss-seg [role="radiogroup"] { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.ss-seg__track { display:inline-flex; gap:4px; background:rgba(255,255,255,.3); border-radius:999px; padding:4px; max-width:100%; }
.ss-dialog .ss-seg__track { background:var(--light); }
body .forminator-ui .ss-seg .forminator-radio { position:relative; display:inline-flex; align-items:center; margin:0; border-radius:999px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:0 22px; min-height:44px; cursor:pointer; background:transparent; color:inherit; transition:background .15s ease, color .15s ease; }
body .forminator-ui .ss-seg .forminator-radio input { position:absolute; opacity:0; width:1px; height:1px; }
body .forminator-ui .ss-seg .forminator-radio-bullet { display:none; }
body .forminator-ui .ss-seg .forminator-radio.forminator-is_checked, body .forminator-ui .ss-seg .forminator-radio:has(input:checked) { background:var(--ink); color:#fff; }
body .forminator-ui .ss-seg .forminator-radio:has(input:focus-visible) { outline:2px solid var(--ink); outline-offset:2px; }
.ss-form__info { font-size:14px; line-height:1.55; color:rgba(18,17,17,.8); margin:0; }
.ss-form__privacy { font-family:var(--mono); font-size:12px; line-height:1.5; color:var(--grey); margin:0; }
.ss-form__privacy a { color:var(--ink); border-bottom:1px solid currentColor; }

/* success card (thank-you message) */
.forminator-ui .forminator-response-message.forminator-success { padding:0; background:none; border:0; }
.ss-form__done { background:#fff; padding:clamp(28px,3vw,44px); max-width:560px; }
.ss-form__done-kicker { font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--grey); margin:0; }
.ss-form__done h2 { font-size:clamp(22px,2.4vw,32px); font-weight:800; letter-spacing:-.02em; margin-top:12px; }
.ss-form__done p { color:var(--grey); font-size:15px; line-height:1.6; margin-top:12px; }
.ss-form__done .ss-form__done-kicker { margin-top:0; font-size:12px; }
.ss-form__done-acts { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.ss-form__done-acts .btn { font-size:13px; padding:15px 26px; min-height:0; }
.ss-form__done--small { padding:0; background:none; }
.ss-form__done--small p { font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink); margin:0; }
body .forminator-ui.forminator-custom-form.is-sent > :not(.forminator-response-message) { display:none !important; }

/* contact pages: the literal originals (white inputs on lime, bold labels, lifting submit) */
.ss-formsplit__form .forminator-ui.forminator-custom-form { gap:20px; max-width:620px; }
.ss-formsplit__form .forminator-ui .forminator-label { font-family:var(--font); font-size:12px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--ink); margin-bottom:-1px; }
.ss-formsplit__form .forminator-ui .forminator-input, .ss-formsplit__form .forminator-ui .forminator-textarea, .ss-formsplit__form .forminator-ui select, .ss-formsplit__form .forminator-ui .forminator-datepicker { min-height:0; padding:14px 15px; border:0; border-radius:2px; background:#fff; font-size:15px; }
.ss-formsplit__form .forminator-ui .forminator-textarea { min-height:140px; }
.ss-formsplit__form .forminator-ui .forminator-input:focus, .ss-formsplit__form .forminator-ui .forminator-textarea:focus, .ss-formsplit__form .forminator-ui select:focus { box-shadow:0 0 0 2px var(--ink); }
.ss-formsplit__form .forminator-ui .forminator-button-submit { font-size:14px; letter-spacing:.07em; padding:17px 34px; min-height:54px; transition:background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; }
.ss-formsplit__form .forminator-ui .forminator-button-submit:hover { transform:translateY(-2px); box-shadow:0 14px 28px rgba(18,17,17,.25); }
.ss-formsplit__form .forminator-ui .forminator-response-message.forminator-error { background:#fff; }
@media (max-width:859px) {
  .forminator-ui .forminator-row { grid-template-columns:1fr; }
  .forminator-ui .forminator-button-submit { align-self:stretch; } /* the final submit button of a form is full width on phones (feedback) */
}
/* Forminator's grid stylesheet (always loaded) uses flex rows with negative margins — the design grid wins here */
body .forminator-ui.forminator-custom-form .forminator-row { display:grid !important; margin:0 !important; }
body .forminator-ui.forminator-custom-form .forminator-row.forminator-hidden { display:none !important; }
body .forminator-ui.forminator-custom-form .forminator-col { margin:0 !important; padding:0 !important; flex:none !important; width:auto !important; max-width:none !important; }
body .forminator-ui.forminator-custom-form .forminator-field { margin:0 !important; }
body .forminator-ui.forminator-custom-form .forminator-row-inside { margin:0 !important; }
body .forminator-ui.forminator-custom-form .forminator-row:has(> .forminator-col[style*="display: none"]:only-child), body .forminator-ui.forminator-custom-form .forminator-row:has(> .forminator-col.forminator-hidden:only-child) { display:none !important; }

/* newsletter forms: honeypot + status line */
.ss-hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.ss-nlmsg { flex-basis:100%; font-family:var(--mono); font-size:12px; line-height:1.5; letter-spacing:.04em; color:inherit; opacity:.85; margin:4px 0 0; }
.ss-nlmsg:empty { display:none; }

/* ───────── legal pages (template "Rechtstext"; docs/mockups/rechtliches.html) ───────── */
.ss-legalhead { background:var(--light); padding:clamp(32px,3.6vw,56px) var(--gut) 0; }
.ss-legalhead h1 { font-size:clamp(32px,3.4vw,54px); font-weight:800; line-height:1.02; letter-spacing:-.022em; margin-top:12px; hyphens:auto; overflow-wrap:break-word; }
.ss-legalhead__stand { font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--grey); margin-top:14px; }
.ss-legalnav { display:flex; gap:6px; margin-top:clamp(24px,2.6vw,36px); overflow-x:auto; scrollbar-width:none; }
.ss-legalnav::-webkit-scrollbar { display:none; }
.ss-legalnav a { flex:0 0 auto; font-size:14px; font-weight:700; padding:14px 18px 12px; border-bottom:3px solid transparent; color:var(--body); }
.ss-legalnav a:hover { color:var(--ink); border-bottom-color:rgba(18,17,17,.2); }
.ss-legalnav a.is-active { color:var(--ink); border-bottom-color:var(--ink); background:#fff; }
.ss-legal { background:#fff; padding:clamp(36px,4vw,72px) var(--gut) clamp(64px,7vw,120px); display:grid; grid-template-columns:minmax(200px,260px) minmax(0,720px); gap:clamp(32px,5vw,96px); }
.ss-legal__toc { position:sticky; top:calc(var(--header-h) + 24px); align-self:start; }
.ss-legal__toc summary { list-style:none; font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); pointer-events:none; }
.ss-legal__toc summary::-webkit-details-marker { display:none; }
.ss-legal__toc ol { list-style:none; margin:14px 0 0; padding:0; border-left:1px solid rgba(18,17,17,.14); }
.ss-legal__toc a { display:block; padding:7px 0 7px 14px; margin-left:-1px; border-left:2px solid transparent; font-size:14px; line-height:1.4; color:var(--body); }
.ss-legal__toc a:hover { color:var(--ink); }
.ss-legal__toc a.is-current { color:var(--ink); font-weight:700; border-left-color:var(--accent); }
.ss-legal__article { min-width:0; }
.ss-legal__ph { background:var(--light); border-left:4px solid var(--accent); padding:16px 18px; font-size:14px; line-height:1.55; margin-bottom:clamp(28px,3vw,44px); }
.ss-legal__ph strong { font-weight:800; }
.ss-legal mark { background:rgba(218,244,21,.45); color:inherit; padding:0 3px; }
.ss-legal__txt { font-size:16px; line-height:1.7; color:var(--body); }
.ss-legal__txt h2 { font-size:clamp(21px,1.8vw,26px); font-weight:800; letter-spacing:-.012em; line-height:1.2; color:var(--ink); margin:clamp(40px,4vw,56px) 0 14px; scroll-margin-top:calc(var(--header-h) + 24px); }
.ss-legal__txt h2:first-child, .ss-legal__txt > h2:first-of-type { margin-top:0; }
.ss-legal__txt h2 .n { font-family:var(--mono); font-size:.62em; font-weight:500; letter-spacing:.04em; color:var(--grey); margin-right:10px; vertical-align:.12em; }
.ss-legal__txt h3 { font-size:17px; font-weight:800; color:var(--ink); margin:26px 0 8px; }
.ss-legal__txt > * + p { margin-top:14px; }
.ss-legal__txt ul, .ss-legal__txt ol { margin:14px 0 0; padding-left:22px; }
.ss-legal__txt ul { list-style:disc; }
.ss-legal__txt ol { list-style:decimal; }
.ss-legal__txt ol li::marker { font-family:var(--mono); font-size:.85em; color:var(--grey); }
.ss-legal__txt ul li::marker { color:var(--grey); }
.ss-legal__txt li + li { margin-top:6px; }
.ss-legal__txt a { color:var(--ink); font-weight:600; border-bottom:2px solid var(--accent); }
.ss-legal__txt strong { color:var(--ink); }
.ss-legal__txt address { font-style:normal; background:var(--light); padding:18px 20px; margin-top:14px; line-height:1.65; }
.ss-legal__txt table { width:100%; border-collapse:collapse; margin-top:16px; font-size:15px; }
.ss-legal__txt th { text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey); font-weight:500; padding:0 12px 10px 0; border-bottom:2px solid var(--ink); }
.ss-legal__txt td { padding:12px 12px 12px 0; border-bottom:1px solid rgba(18,17,17,.12); vertical-align:top; }
.ss-legal__txt td:last-child, .ss-legal__txt th:last-child { text-align:right; padding-right:0; white-space:nowrap; }
.ss-legal__txt .box { border:1px solid rgba(18,17,17,.2); padding:clamp(18px,2vw,28px); margin-top:18px; }
.ss-legal__txt .box .mono { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); }
.ss-legal__txt .box > * + p { margin-top:14px; }
.ss-legal__txt .box .line { border-bottom:1px solid rgba(18,17,17,.35); height:30px; }
.ss-legal__txt form, .ss-legal__txt .woocommerce { margin-top:18px; }
.ss-legal__print { margin-top:clamp(40px,4vw,56px); padding-top:22px; border-top:1px solid rgba(18,17,17,.14); display:flex; flex-wrap:wrap; gap:12px 24px; }
.ss-legal__print .text-link { font-size:12px; padding-bottom:4px; }
@media (max-width:859px) {
  .ss-legalhead h1 { font-size:38px; }
  .ss-legalnav { margin:22px calc(-1 * var(--gut)) 0; padding:0 var(--gut); }
  .ss-legalnav a { padding:12px 14px 10px; }
  .ss-legal { grid-template-columns:minmax(0,1fr); gap:24px; }
  .ss-legal__toc { position:static; background:var(--light); padding:14px 16px; }
  .ss-legal__toc summary { pointer-events:auto; cursor:pointer; display:flex; justify-content:space-between; color:var(--ink); }
  .ss-legal__toc summary::after { content:'+'; font-size:16px; line-height:1; }
  .ss-legal__toc[open] summary::after { content:'\2212'; }
  .ss-legal__toc ol { margin-top:10px; }
  .ss-legal__txt { font-size:15.5px; }
  .ss-legal__txt table { font-size:14px; }
}
@media print {
  .site-header, .site-footer, .ss-legalnav, .ss-legal__toc, .ss-legal__print, .ss-legal__ph { display:none !important; }
  .ss-legal { display:block; padding:0; }
  .ss-legalhead { background:none; padding:0 0 16px; }
}
/* forms inside legal pages (Germanized "Vertrag widerrufen") */
.ss-legal__txt form .form-row { display:flex; flex-direction:column; gap:8px; margin:0 0 16px; }
.ss-legal__txt form label { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); font-weight:400; }
.ss-legal__txt form .required { color:var(--grey); border:0; text-decoration:none; }
.ss-legal__txt form .input-text, .ss-legal__txt form select, .ss-legal__txt form textarea { width:100%; min-height:56px; background:var(--light); border:1px solid rgba(18,17,17,.18); border-radius:4px; font-size:16px; padding:0 18px; color:var(--ink); outline:none; }
.ss-legal__txt form .input-text:focus { border-color:var(--ink); background:#fff; }
.ss-legal__txt form button, .ss-legal__txt form .button { display:inline-flex; align-items:center; min-height:56px; background:var(--ink); color:#fff; border:0; border-radius:999px; font-family:var(--font); font-size:15px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:0 28px; cursor:pointer; transition:background .18s ease, color .18s ease; }
.ss-legal__txt form button:hover, .ss-legal__txt form .button:hover { background:var(--accent); color:var(--ink); }

/* laptops (little height): the big headings and hero spacing above now also scale with the screen height
   (min(…vw, …vh)), so the first screen shows headline, text and buttons — unchanged on big monitors */