/* Instrument Serif — selbst gehostet (DSGVO) */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin-ext.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:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-italic-latin-ext.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}
:root{
  --bg:#FAF9F7; --ink:#141310; --btn:#F26B5E; --btn-dark:#141310; --muted:#6b675f; --body:#3d3a35; --body2:#4a463f;
  --card:#f0eeea; --card2:rgba(255,255,255,.6); --field:#fff; --soft:rgba(20,19,16,.06); --soft2:#f5f5f5;
  --glass:rgba(250,249,247,.72); --glass-strong:rgba(250,249,247,.85); --glass2:rgba(255,255,255,.45); --glass3:rgba(255,255,255,.55); --glass4:rgba(255,255,255,.5); --glass-line:rgba(255,255,255,.7);
  --line:rgba(20,19,16,.12); --line2:rgba(20,19,16,.16); --line3:rgba(20,19,16,.3);
}
html.dark{
  --bg:#191815; --ink:#F0EEE8; --btn:#F26B5E; --btn-dark:#2e2b26; --muted:#9c968a; --body:#c8c3ba; --body2:#bdb8ae;
  --card:#252320; --card2:rgba(255,255,255,.05); --field:#22201c; --soft:rgba(250,249,247,.08); --soft2:#23211d;
  --glass:rgba(25,24,21,.72); --glass-strong:rgba(25,24,21,.88); --glass2:rgba(255,255,255,.06); --glass3:rgba(255,255,255,.07); --glass4:rgba(255,255,255,.06); --glass-line:rgba(250,249,247,.14);
  --line:rgba(250,249,247,.14); --line2:rgba(250,249,247,.18); --line3:rgba(250,249,247,.32);
  color-scheme:dark;
}
html{scroll-behavior:smooth}
/* Clip nur auf Desktop — iOS Safari bricht position:sticky, sobald html/body clippen */
@media (min-width: 821px){ html,body{overflow-x:clip} }
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);transition:background .4s ease,color .4s ease;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none;transition:color .3s ease,opacity .3s ease}
a:hover{opacity:.6}
::selection{background:var(--ink);color:var(--bg)}
img{display:block}
summary::-webkit-details-marker{display:none}
summary::marker{content:none}

@keyframes menu-in{from{opacity:0;transform:perspective(1200px) rotateX(-14deg) translateY(-28px) scale(.98)}to{opacity:1;transform:perspective(1200px) rotateX(0) translateY(0) scale(1)}}
@keyframes menu-link-in{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:translateX(0)}}
@keyframes menu-mask-in{to{transform:translateY(0)}}
@keyframes menu-mask-out{to{transform:translateY(-130%)}}
@keyframes menu-link-out{to{opacity:0;transform:translateX(32px)}}
@keyframes menu-out{from{opacity:1;transform:perspective(1200px) rotateX(0) translateY(0) scale(1)}to{opacity:0;transform:perspective(1200px) rotateX(-12deg) translateY(-24px) scale(.98)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Reveal — armed by JS only, so content stays visible if JS never runs */
html.reveal-armed [data-reveal]{opacity:0;transform:translateY(48px);transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1)}
html.reveal-armed [data-reveal].in{opacity:1;transform:none}
/* Bild-Zoom beim Einscrollen (Parallax-Bilder ausgenommen, die steuert JS) */
html.reveal-armed [data-reveal]:not([data-parallax]) > img{transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
html.reveal-armed [data-reveal]:not(.in):not([data-parallax]) > img{transform:scale(1.12)}
/* Scroll-Progress */
#scroll-progress{position:fixed;top:0;left:0;width:100%;height:2px;background:var(--accent,#C94F32);transform:scaleX(0);transform-origin:0 50%;z-index:120;pointer-events:none}

/* Mobile fly-out menu */
#mobile-menu{display:none}
#mobile-menu.open{display:flex;animation:menu-in .38s cubic-bezier(.22,1,.36,1)}
#mobile-menu.closing{display:flex;animation:menu-out .28s ease forwards}
#mobile-menu.closing nav a [data-mm]{animation:menu-mask-out .25s ease forwards !important}
#mobile-menu nav a:active [data-mm] span:last-child{color:var(--accent,#C94F32)}

#wa-fab{display:none !important}
#sticky-cta{display:none; transform:translateY(150%); transition:transform .55s cubic-bezier(.22,1,.36,1)}
#sticky-cta.show{transform:none}
[data-mobile-only]{display:none !important}
[data-mobile-only-block]{display:none !important}

/* Card / button hover (desktop) */
@media (hover:hover){
  [data-hover-lift]{transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s}
  [data-hover-lift]:hover{transform:translateY(-4px)}
}

@media (max-width: 820px){
  [data-mobile-hide-inline]{display:none !important}
  [data-mobile-only-inline]{display:inline !important}
  [data-print-slider]{gap:10px !important}
  [data-print-track]{gap:10px !important}
  [data-print-track] > div{width:152px !important}
  #lux-nav [data-act="toggleTheme"]{margin-right:-26px; opacity:0; pointer-events:none; transition:margin-right .45s ease, opacity .45s ease}
  #lux-nav div:has([data-act="toggleMenu"].show) [data-act="toggleTheme"]{margin-right:0; opacity:1; pointer-events:auto}
  #lux-nav button[data-act="toggleMenu"]{opacity:0; pointer-events:none; width:0 !important; margin-left:-10px; padding:0; overflow:hidden; transition:opacity .45s ease, width .45s ease, margin-left .45s ease}
  #lux-nav button[data-act="toggleMenu"].show{opacity:1; pointer-events:auto; width:44px !important; margin-left:-8px; margin-right:6px}
  [data-mobile-only]{display:inline-flex !important}
  [data-mobile-only-block]{display:block !important}
  [data-mobile-only-block][data-print-track]{display:none !important}
  [data-m-top]{order:-1}
  #hero-img{aspect-ratio:16/9 !important}
  #hero-img img{object-position:50% 75% !important}
  button[data-mobile-only]{display:inline-flex !important}
  section{padding-top:42px !important}
  [data-screen-label="Warum AbiHoodie"]{margin-top:42px !important}
  #ueber-uns{margin-top:42px !important}
  #designideen{padding-top:30px !important}
  #designideen [data-mobile-2col]{gap:8px !important; margin-bottom:0 !important}
  #designideen [data-flip="4"], #designideen [data-flip="5"]{display:none !important}
  #designideen [data-hero-flip]{grid-column:1 / -1}
  #designideen [data-flip="hero"]{margin-bottom:3px !important}
  #designideen [data-mobile-stack][style*="margin-top"]{margin-top:14px !important}
  #designideen [data-sec-head]{margin-bottom:20px !important}
  [data-sec-head]{margin-bottom:26px !important; gap:16px !important}
  #lux-nav{padding:6px 0 6px 20px !important; width:calc(100vw - 48px) !important}
  #lux-nav > a:first-child{white-space:nowrap}
  #lux-nav > div > a{display:none !important}
  #lux-nav button[aria-label="Menü"]{width:38px !important; height:38px !important}
  [data-mobile-stack] > *{transform:none !important; align-self:stretch !important}
  [data-screen-label="Hero"] [data-m-top]{margin-top:0 !important}
  [data-mobile-flat]{border-left:none !important; padding-left:0 !important}
  #wa-fab{display:none !important}
  #sticky-cta{display:flex !important}
  footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px)) !important}
  [data-mobile-hide]{display:none !important}
  [data-mobile-stack]{display:flex !important; flex-direction:column !important; align-items:stretch !important}
  [data-mobile-stack] > *{position:static !important; padding-top:0 !important}
  [data-mobile-stack] > [data-card]{padding-top:28px !important}
  [data-mobile-stack] > [data-card="quote"]{padding-top:44px !important}
  [data-mobile-stack] ol li{grid-template-columns:56px 1fr !important}
  [data-mobile-1col]{grid-template-columns:1fr !important}
  [data-mobile-2col]{grid-template-columns:repeat(2,1fr) !important}
}

/* Sticky-CTA: sehr schmale Geräte — Musterpaket-Icon weicht, Text bleibt lesbar */
@media (max-width: 360px){
  #sticky-cta{right:12px !important}
}

/* Mobil: Haupt-CTA im Hero direkt unter der Subline, Vorteilsbox danach */
@media (max-width: 820px){
  #top [data-hero-cta]{margin-top:20px !important}
}

/* Mobil: Abschnittsnummer näher an die Überschrift (01, 04, 08, 10, 11) */
@media (max-width: 820px){
  #designideen [data-sec-head],
  #kollektion > div[data-mobile-stack]:first-of-type,
  #referenzen > div[data-mobile-stack]:first-of-type{gap:10px !important}
  #ueber-uns p[data-reveal]:first-child,
  #faq p[data-reveal]:first-child{margin-bottom:12px !important}
}

/* Trust-Strip (mobil, direkt unter dem Hero) */#trust-strip{display:none}
@media (max-width: 820px){
  #trust-strip{display:flex !important; align-items:center; justify-content:space-between; gap:8px; margin:14px 24px 0; padding:12px 14px; border-radius:16px; background:var(--glass2); border:1px solid var(--glass-line); box-shadow:0 8px 26px -18px rgba(20,19,16,.3)}
  #trust-strip > span{display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; min-width:0; text-align:center; font-size:9.5px; line-height:1.25; letter-spacing:.04em; color:var(--muted)}
  #trust-strip > span + span{border-left:1px solid var(--line)}
  #trust-strip strong{font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--ink)}
  #trust-strip span span{font-size:9px}
}

/* PAY-Mockup: Tipp- und Hover-Zustände */
#orga [data-chip], #orga [data-chip-active]{transition:background .25s, border-color .25s, color .25s, transform .25s}
#orga [data-chip]:active, #orga [data-chip-active]:active{transform:scale(.92)}
#orga [data-pay-btn]{cursor:pointer; transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s}
#orga [data-pay-btn]:active{transform:scale(.96) !important; box-shadow:0 6px 18px -8px rgba(242,107,94,.7) !important}
@media (hover:hover) and (pointer:fine){
  #orga [data-chip]:hover{border-color:#141310; color:#141310}
  #orga [data-pay-btn]:hover{transform:scale(1.02); box-shadow:0 12px 30px -12px rgba(242,107,94,.7)}
}

/* Bewegung in #orga: Karten-Hover, schwebendes Handy, Mini-Demo der Bestellseite */
#orga [data-benefit]{transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1)}
@media (hover:hover) and (pointer:fine){
  #orga [data-benefit]:hover{transform:translateY(-4px); box-shadow:0 22px 50px -22px rgba(20,19,16,.34), inset 0 1px 0 rgba(255,255,255,.9)}
}
@media (prefers-reduced-motion: no-preference){
  #orga [data-phone]{animation:ah-float 7s ease-in-out infinite}
  #orga [data-pay-btn]{animation:ah-pay 7s ease-in-out infinite}
}
@keyframes ah-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes ah-spin-in{from{transform:scale(.86) rotateY(-105deg)}to{transform:scale(.86) rotateY(0deg)}}
@keyframes ah-float-m{0%,100%{transform:scale(.86) translateY(0)}50%{transform:scale(.86) translateY(-8px)}}
@keyframes ah-pay{0%,62%{transform:scale(1); box-shadow:none}70%{transform:scale(1.035); box-shadow:0 10px 26px -10px rgba(242,107,94,.75)}80%,100%{transform:scale(1); box-shadow:none}}

/* Vorteilskarten in #orga: kürzerer Einfahrweg, damit sie den Text darüber nicht überlappen */
#orga [data-mobile-2col]:not([data-steps]) > [data-reveal]:not(.in){transform:translateY(12px)}

/* Risiko-Sektion "Ihr organisiert die Abipullis?" */
@media (max-width: 820px){
  #orga [data-pay-panel]{position:static !important; width:auto !important; margin-right:0 !important}
  #orga [data-mobile-stack]{min-height:0 !important}
  #orga{padding-top:30px !important}
  #orga [data-sec-head]{margin-bottom:14px !important; gap:8px !important}
  #orga [data-mobile-stack]{gap:20px !important}
  #orga [data-sec-head][data-mobile-stack]{gap:10px !important}
  #orga [data-sec-head] > p:last-child{display:none !important}
  #orga [data-mobile-stack] > div:first-child > p{font-size:14px !important; line-height:1.6 !important}
  #orga [data-pay-panel]{perspective:1000px}
  #orga [data-cta-block]{margin-top:10px !important}
  #orga [data-cta-block] > div{align-items:center !important; text-align:center}
  #orga [data-pay-panel] > div{padding:0 !important; background:transparent !important; gap:8px !important}
  #orga [data-pay-panel] > div > div{max-width:238px !important; transform:scale(.86); transform-origin:top center; margin-bottom:-62px}
  #orga [data-phone]{animation-name:ah-float-m !important}
  #orga [data-pay-panel].in [data-phone]{animation:ah-spin-in 1s cubic-bezier(.22,1,.36,1) both, ah-float-m 7s ease-in-out infinite 1s !important}
  #orga [data-mobile-2col]:not([data-steps]) + div{margin-top:20px !important; align-items:center !important; text-align:center}
  #orga [data-pay-panel] > div > p{margin-bottom:2px !important}
  #orga [data-pay-panel] > div > p:nth-of-type(2){font-family:inherit !important; font-style:normal !important; font-weight:600 !important; letter-spacing:-.02em; color:var(--ink) !important; font-size:19px !important; max-width:none !important; line-height:1.25 !important; margin-top:-10px !important; width:100%; align-self:flex-start; text-align:left !important; order:-1; margin-bottom:14px !important}
  #orga [data-flow]{display:none !important}
  #orga [data-flow] [data-sep]{display:none !important}
  #orga > [aria-hidden="true"]{margin-top:40px !important}
  #orga [data-mobile-2col]:not([data-steps]){gap:10px !important}
  #orga [data-mobile-2col]:not([data-steps]) > div{padding:18px 16px 20px !important; gap:9px !important; border-radius:16px !important}
  #orga [data-mobile-2col]:not([data-steps]) h3{font-size:15px !important; line-height:1.3 !important}
  #orga [data-mobile-2col]:not([data-steps]) p:last-child{font-size:13px !important; line-height:1.5 !important}
  #orga [data-mobile-2col]:not([data-steps]) p:first-child{font-size:17px !important}
}

/* Cookie-Banner Einblendung */
@keyframes cc-fade{from{opacity:0}to{opacity:1}}
@keyframes cc-pop{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
#cookie-root > div{animation:cc-fade .45s ease}
#cookie-root > div > div{animation:cc-pop .55s cubic-bezier(.22,1,.36,1)}
#cookie-root.cc-shown > div, #cookie-root.cc-shown > div > div{animation:none}

/* Dark-Mode-Toggle */
.ico-sun{display:none}
html.dark .ico-sun{display:block}
html.dark .ico-moon{display:none}
input,textarea,select{color:var(--ink)}
@media (max-width: 1160px){
  #lux-nav{gap:14px !important}
  #lux-nav a{white-space:nowrap}
  #lux-nav > [data-mobile-hide]{gap:12px !important; font-size:12px !important}
  #lux-nav > div > a{padding:10px 16px !important; font-size:12px !important}
  #lux-nav [data-act="toggleTheme"]{width:36px !important; height:36px !important}
}
/* Unter 1140px: Links passen nicht mehr in eine Zeile — Burger-Menü zeigen */
@media (max-width: 1140px){
  #lux-nav > [data-mobile-hide]{display:none !important}
  #lux-nav button[data-act="toggleMenu"]{display:inline-flex !important}
}
/* 1101–1280px: Detailbild leicht einrücken, damit es nicht in die Karten läuft */
@media (min-width: 1101px) and (max-width: 1280px){
  [data-screen-label="Hero"] [data-m-top] > div[data-reveal-delay="300"]{left:-48px !important; width:160px !important}
}
/* Desktop: Ideen-Karten editorial versetzt */
@media (min-width: 821px){
  #designideen [data-flip="1"], #designideen [data-flip="4"]{margin-top:0}
}
/* Tablet (821–1100px): Desktop-Look skaliert, Detailbild innerhalb der Spalte, Rating-Karte umbrechen lassen */
@media (min-width: 821px) and (max-width: 1100px){
  [data-screen-label="Hero"] [data-m-top] > div[data-reveal-delay="300"]{left:-15% !important; bottom:-16px !important; width:38% !important}
  [data-screen-label="Hero"] [data-hero-cta]{flex-direction:column; align-items:flex-start !important; gap:18px !important}
  [data-screen-label="Hero"] [data-hero-cta] > div:last-child{margin-top:0 !important}
  [data-screen-label="Hero"] h1{font-size:clamp(44px,8.5vw,110px) !important}
  [data-screen-label="Hero"] div[data-reveal-delay="200"]{grid-template-columns:repeat(3,minmax(0,164px)) !important; gap:12px !important}
  [data-screen-label="Hero"] div[data-reveal-delay="200"] > a{padding:16px 18px !important; gap:14px !important}
  [data-screen-label="Hero"] div[data-reveal-delay="200"] > a > p:last-child{font-size:17px !important}
  [data-screen-label="Stimmen"] [data-card] > p:first-child{flex-wrap:wrap}
  [data-screen-label="Stimmen"] [data-card] > p:first-child > span[style*="letter-spacing:2px"]{letter-spacing:1px !important; font-size:13px}
}
/* Kleines Tablet (821–1000px): nur das große Bild, kompakte Statistik-Karten */
@media (min-width: 821px) and (max-width: 1000px){
  [data-screen-label="Hero"] [data-m-top]{transform:none !important; align-self:stretch !important; display:flex; flex-direction:column; margin-top:-56px !important; margin-bottom:0 !important}
  [data-screen-label="Hero"] #hero-img{aspect-ratio:auto !important; flex:1; min-height:100%}
  [data-screen-label="Hero"] [data-m-top] > div[data-reveal-delay="300"]{display:none !important}
  [data-screen-label="Hero"] [data-mobile-2col]{grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:12px !important; margin-top:28px !important}
  [data-screen-label="Hero"] [data-mobile-2col] > div:nth-child(3),
  [data-screen-label="Hero"] [data-mobile-2col] > div:nth-child(5){display:none !important}
  [data-mobile-stack] > p[style*="grid-column:10 / span 3"]{grid-column:3 / -1 !important; margin-top:14px !important}
  [data-sec-head] > p[style*="grid-column:10 / span 3"]{grid-column:3 / -1 !important; margin-top:14px !important}
  [data-screen-label="Hero"] [data-mobile-2col] > div{padding:16px 14px 14px !important}
  [data-screen-label="Hero"] [data-mobile-2col] > div > p:nth-child(2){font-size:20px !important}
  [data-screen-label="Hero"] [data-mobile-2col] > div > p:nth-child(3){font-size:10px !important; letter-spacing:.1em !important}
  [data-screen-label="Hero"] [data-mobile-2col] > div > p:first-child{font-size:12px !important; letter-spacing:2px !important}
}
@media (max-width: 820px){
  [data-screen-label="Motive"] > div > div:first-child{margin-bottom:24px !important}
  [data-screen-label="Motive"] [data-print-slider] + p{margin-top:28px !important}
  #lux-nav [data-act="toggleTheme"]{width:38px !important; height:38px !important}
  [data-screen-label="Hero"] h1 + p{margin-top:16px !important}
  [data-screen-label="Hero"]{padding-top:88px !important}
  [data-screen-label="Hero"] [data-mobile-stack]{gap:16px !important}
  [data-screen-label="Hero"] h1{font-size:clamp(46px,12.5vw,60px) !important; margin-top:12px !important}
  [data-screen-label="Hero"] h1 + p{font-size:18px !important}
  [data-screen-label="Hero"] p[data-reveal-delay="100"]{font-size:18px !important; line-height:1.5 !important; max-width:none !important; margin-top:0 !important}
  [data-screen-label="Hero"] div[data-reveal-delay="140"]{display:none !important}
  [data-screen-label="Hero"] > [data-mobile-2col]{display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; margin-top:20px !important}
  [data-screen-label="Hero"] > [data-mobile-2col] > div{padding:14px 12px 13px !important; border-radius:14px !important}
  [data-screen-label="Hero"] > [data-mobile-2col] > div:nth-child(5){display:none !important}
  [data-screen-label="Hero"] > [data-mobile-2col] > div > p:first-child{font-size:11px !important; letter-spacing:1.5px !important}
  [data-screen-label="Hero"] > [data-mobile-2col] > div > p:nth-child(2){font-size:19px !important; margin-top:8px !important}
  [data-screen-label="Hero"] > [data-mobile-2col] > div > p:nth-child(3){font-size:9px !important; letter-spacing:.08em !important; margin-top:8px !important}
  [data-screen-label="Hero"] div[data-reveal-delay="140"]{margin-top:14px !important}
  [data-screen-label="Hero"] [data-hero-cta]{margin-top:16px !important; gap:22px 24px !important; flex-direction:column; align-items:flex-start !important}
  [data-screen-label="Hero"] [data-hero-cta] > div:last-child{order:-1}
  [data-screen-label="Hero"] h1 ~ div[data-reveal-delay="140"]{gap:8px !important; font-size:10px !important; letter-spacing:.14em !important; flex-wrap:nowrap !important; white-space:nowrap}
  /* Kontaktseite: Hero-Abstände kompakter */
  [data-screen-label="Kontakt-Hero"]{padding-top:92px !important}
  [data-screen-label="Kontakt-Hero"] [data-m-top]{margin:8px auto 6px !important}
  [data-screen-label="Kontakt-Hero"] h1{margin-top:14px !important}
  [data-screen-label="Kontakt-Hero"] > p{margin-top:14px !important}
  [data-screen-label="Kontakt-Hero"] [data-mobile-only-block]{margin-top:16px !important}
  #formular{padding-top:26px !important}
  #formular > div{gap:20px !important}
  #formular h2{font-size:24px !important; overflow-wrap:break-word}
  [data-mobile-stack] > *{min-width:0}
  /* "Warum AbiHoodie": Überschrift bleibt auch mobil sticky, Liste scrollt darunter durch */
  [data-screen-label="Warum AbiHoodie"]{padding-top:0 !important}
  [data-screen-label="Motive"] [data-mobile-stack][data-reveal]{gap:10px !important; margin-bottom:28px !important}
  #sparen [data-mobile-stack][data-reveal]{gap:10px !important; margin-bottom:24px !important}
  [data-screen-label="Stimmen"] > div[data-reveal]:first-child{margin-bottom:24px !important}
  #ablauf{padding-top:0 !important}
  #ablauf [data-mobile-stack] > div:first-child{position:-webkit-sticky !important; position:sticky !important; top:0 !important; z-index:5; background:linear-gradient(var(--bg) 88%, transparent); padding:84px 0 42px !important; margin:0 -24px; padding-left:24px !important; padding-right:24px !important}
  #ablauf [data-mobile-stack] > div:first-child p{margin-bottom:8px !important}
  #ablauf [data-mobile-stack] > div:first-child a{margin-top:20px !important}
  [data-screen-label="Warum AbiHoodie"] [data-mobile-stack] > div:first-child{position:-webkit-sticky !important; position:sticky !important; top:0 !important; z-index:5; background:linear-gradient(#131211 90%, rgba(19,18,17,0)); padding:84px 0 34px !important; margin:0 -24px; padding-left:24px !important; padding-right:24px !important}
  [data-screen-label="Warum AbiHoodie"] [data-mobile-stack] > div:first-child p{margin-bottom:6px !important}
}

/* Footer mobil */
@media (max-width: 820px){
  [data-foot="links"]{display:grid !important; grid-template-columns:1fr 1fr; gap:0 24px !important; width:100%}
  [data-foot="links"] a{display:block; padding:10px 0; border-bottom:1px solid rgba(250,249,247,.08); font-size:14px}
  [data-foot="contact"]{width:100%; justify-content:center !important; gap:12px 20px !important; padding:8px 0 0; font-size:14px}
  [data-foot="copy"]{text-align:center; margin-top:16px !important}
  footer [data-foot="row"]{gap:12px !important}
}

/* FAQ: Plus dreht sich beim Öffnen */
details summary > span{display:inline-block; transition:transform .35s cubic-bezier(.22,1,.36,1)}
details[open] summary > span{transform:rotate(45deg)}
/* Dark Mode: Fotos dezent abdunkeln */
html.dark img{filter:brightness(.88)}
@media (max-width: 1250px){
  [data-screen-label="Hero"] div[data-reveal-delay="80"][data-mobile-hide] > div:nth-child(3){grid-template-columns:1fr !important}
}
/* Hover-Lift für Hero-Karten */
@media (hover:hover){
  [data-screen-label="Hero"] [data-mobile-2col] > div:hover{transform:translateY(-4px)}
  [data-screen-label="Hero"] div[data-reveal-delay="80"][data-mobile-hide]{transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s}
  [data-screen-label="Hero"] div[data-reveal-delay="80"][data-mobile-hide]:hover{transform:translateY(-4px)}
}

@keyframes ahPulse{0%{box-shadow:0 0 0 0 rgba(62,92,63,.45)}70%{box-shadow:0 0 0 7px rgba(62,92,63,0)}100%{box-shadow:0 0 0 0 rgba(62,92,63,0)}}

/* Mobil: Hero-Bild über die H1 */
@media (max-width: 820px){
  [data-screen-label="Hero"]{display:flex !important; flex-direction:column; gap:16px}
  [data-screen-label="Hero"] > div:first-child > p:first-child{margin:6px 0 8px !important}
  [data-screen-label="Hero"] [data-hero-cta]{margin-top:-8px !important}
  [data-screen-label="Hero"] [data-hero-cta] > div:last-child{margin-top:0 !important}
  [data-screen-label="Hero"] > [data-mobile-stack]{display:contents !important}
  [data-screen-label="Hero"] > div:first-child{margin-bottom:0 !important}
  [data-screen-label="Hero"] > [data-mobile-2col]{display:none !important}
}

/* Mobil: Ablauf-CTA ans Ende der Sektion */
@media (max-width: 820px){
  #ablauf > [data-mobile-stack] > div:first-child > a,
  #ablauf > [data-mobile-stack] > div:first-child > p:last-of-type{display:none !important}
  #ablauf [data-ablauf-cta]{display:flex !important}
  #ablauf ol p{font-size:14px !important}
  [data-screen-label="Warum AbiHoodie"] h3 + p{font-size:14px !important}
  #faq details > p[style*="60ch"]{font-size:14px !important}
  #ueber-uns p[style*="max-width:480px"][style*="font-size:16px"]{font-size:14px !important}
  #kontakt > p[style*="max-width:440px"]{font-size:14px !important}
  #ablauf > [data-mobile-stack] > div:first-child{position:sticky !important; top:0 !important; align-self:flex-start !important}
}

/* 1001–1100px: Bildspalte tiefer ansetzen, damit sie die H1-Zeile nicht touchiert */
@media (min-width: 1001px) and (max-width: 1100px){
  [data-screen-label="Hero"] [data-m-top]{margin-top:-110px !important}
}

/* Highlight-Karte: mobil volle Breite, ab Tablet zentriert hervorgehoben */
@media (min-width: 821px){
  #designideen [data-mobile-2col]{grid-template-columns:repeat(4,1fr) !important}
  #designideen [data-hero-flip]{grid-column:span 2; grid-row:span 2; margin:0 !important; position:relative}
  #designideen [data-flip="4"], #designideen [data-flip="5"]{display:none}
}

/* Popup & Motivbänder: keine Textmarkierung beim Klicken */
#motiv-popup, #motiv-popup *, [data-print-slider], [data-print-slider] *, [data-flip], [data-flip] *{
  -webkit-user-select:none; -moz-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none;
}
#motiv-popup img, [data-print-slider] img, [data-flip] img{-webkit-user-drag:none; pointer-events:none}

/* Mobil: Skizze-Karte gleichmäßig innen abgesetzt */
@media (max-width: 820px){
  #idee-motiv > div > div{padding:18px !important}
  #idee-motiv > div > div[data-mobile-flat]{padding-top:0 !important; border-left:none !important; background:transparent !important}
  /* Mobil kürzen: Zusatzsatz und Nummern weg, Zitat kompakter */
  #idee-motiv [data-mobile-flat] p:nth-of-type(2){display:none !important}
  #idee-motiv [data-mobile-flat] p:first-of-type{font-size:16px !important; line-height:1.35 !important}
  #idee-motiv > div > div{padding:16px !important}
  #idee-motiv [data-mobile-flat]{gap:12px !important}
  #idee-motiv > div > div:first-child > p:first-child{margin-bottom:12px !important}
  #idee-motiv figcaption{margin-top:9px !important; font-size:10px !important}
  #idee-motiv figcaption span:first-child{display:none !important}
  #idee-motiv figcaption{gap:0 !important}
  #idee-motiv [data-mobile-flat] > a{display:none !important}
}

/* Mobil: CTA-Blöcke näher an den Inhalt (Designideen, Stimmen, Sparen) */
@media (max-width: 820px){
  #sparen > div[data-reveal]:last-of-type{margin-top:20px !important}
  #designideen [data-ideen-cta]{margin-top:10px !important; margin-bottom:22px !important}
  #designideen [data-ideen-cta] > p{text-align:center; max-width:none; white-space:nowrap; font-size:11.5px; line-height:1.5}
  #designideen{padding-bottom:28px !important; overflow:visible !important}
  #designideen [data-ideen-cta]{padding-bottom:6px}
}

/* Sehr breite Fenster: Textspalte im Hero atmen lassen */
@media (min-width: 1500px){
  [data-screen-label="Hero"] > [data-mobile-stack] > div:first-child{padding-right:clamp(0px,3vw,64px)}
  [data-screen-label="Hero"] h1 + p{max-width:46ch}
  [data-screen-label="Hero"] div[data-reveal-delay="80"][data-mobile-hide]{margin-top:34px}
  [data-screen-label="Hero"] [data-hero-cta]{margin-top:38px}
}

/* Sehr breite Fenster: Hero-Bild nicht unbegrenzt mitwachsen lassen */
@media (min-width: 1500px){
  [data-screen-label="Hero"] [data-m-top]{max-width:520px; justify-self:end}
}

/* Kollektion: Gruppen wie im Flyer, Desktop vier pro Reihe */
#kollektion [data-coll-more] > summary{list-style:none}
#kollektion [data-coll-more]:not([open]) > summary{margin-bottom:0 !important}
#kollektion [data-coll-more]:not([open]) + [data-reveal]{margin-top:6px !important}
#kollektion [data-coll-more] > summary::-webkit-details-marker{display:none}
#kollektion [data-coll-more][open] > summary > span{transform:none}
#kollektion [data-coll-more][open] > summary [data-more-icon]{transform:rotate(45deg)}
@media (hover:hover){
  #kollektion [data-coll-more] > summary:hover [data-more-icon]{color:var(--ink)}
}
@media (min-width: 821px){
  #kollektion > div, #kollektion > details{max-width:1080px; margin-left:auto; margin-right:auto}
  #kollektion [data-mobile-2col] > article > div:first-child{aspect-ratio:4 / 5 !important}
  #kollektion [data-mobile-2col]{grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:34px 26px}
  /* Oversize: Hero und Rest bilden am Desktop ein gemeinsames 12er-Raster */
  #kollektion [data-coll-hero], #kollektion [data-coll-rest]{display:contents !important}
  #kollektion [data-coll-hero] > article{grid-column:span 4}
  #kollektion [data-coll-rest] > article:nth-child(-n+2){grid-column:span 4}
  #kollektion [data-coll-rest] > article:nth-child(n+3){grid-column:span 3}
}

/* Mobil: Oversize Hoodie zuerst und über beide Spalten */
@media (max-width: 820px){
  #kollektion [data-mobile-2col]{
    max-width:none !important; margin:0 !important;
    grid-template-columns:none !important;
    grid-auto-flow:column;
    grid-auto-columns:63%;
    gap:12px !important;
    overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    padding-bottom:2px;
    scrollbar-width:none;
  }
  #kollektion [data-mobile-2col]::-webkit-scrollbar{display:none}
  #kollektion [data-mobile-2col] > article{scroll-snap-align:start}
  /* Ausblendkante rechts als Wisch-Hinweis */
  #kollektion [data-mobile-2col]{-webkit-mask-image:linear-gradient(to right, #000 0, #000 84%, rgba(0,0,0,.08) 100%); mask-image:linear-gradient(to right, #000 0, #000 84%, rgba(0,0,0,.08) 100%)}
  #kollektion [data-coll-oversize]{display:block !important}
  #kollektion [data-coll-hero]{margin-bottom:12px}
  #kollektion [data-coll-more] > summary{flex-direction:column; align-items:center !important; gap:7px !important; border-top:none !important; border-bottom:1px solid var(--line); padding-top:0 !important; padding-bottom:14px}
  /* Mobiler Takt: 12 / 24 / 28 */
  #kollektion > div, #kollektion > details{margin-top:28px !important}
  #kollektion > div[data-mobile-stack]:first-of-type{margin-top:0 !important; margin-bottom:24px !important}
  #kollektion > div > div[style*="border-top"]{padding-top:12px !important; margin-bottom:14px !important}
  #kollektion [data-coll-rest]{margin-top:0 !important}
  #kollektion [data-coll-more]:not([open]) + [data-reveal]{margin-top:14px !important}
  #kollektion [data-coll-more] > summary > span:last-child{align-self:center}
  #kollektion [data-mobile-2col] h3{font-size:16px !important}
  #kollektion [data-mobile-2col] h3 + span{font-size:15px !important}
  #kollektion [data-mobile-2col] article > p{font-size:12px !important; margin-top:5px !important}
  #kollektion [data-mobile-2col] h3 ~ *, #kollektion [data-mobile-2col] article > div:nth-child(2){margin-top:13px !important}
}

/* Mobil: Referenzen als Wisch-Galerie */
@media (max-width: 820px){
  #referenzen [data-ref-wrap] > [data-mobile-stack]{display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px !important; margin:0 -24px !important; padding:0 24px 4px !important; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  #referenzen [data-ref-wrap] > [data-mobile-stack]::-webkit-scrollbar{display:none}
  #referenzen [data-ref-wrap] > [data-mobile-stack] > figure{flex:0 0 78%; scroll-snap-align:center; align-self:stretch !important}
  #referenzen [data-ref-wrap] > [data-mobile-stack] > div[data-mobile-flat]{display:none !important}
  #referenzen{position:relative}
  #referenzen [data-ref-cta]{display:flex !important; flex-direction:column; align-items:flex-start; gap:12px; margin-top:22px}
  #referenzen [data-ref-wrap] > [data-mobile-stack] > figure figcaption{margin-top:10px !important}
  #referenzen [data-ref-wrap] > [data-mobile-stack]{position:relative}
  #referenzen [data-ref-fade]{display:block !important}
}

/* Mobil: Fade am rechten Rand der Referenz-Galerie */
@media (max-width: 820px){
  #referenzen [data-ref-wrap]{position:relative}
  #referenzen [data-ref-fade]{position:absolute; top:0; bottom:0; right:-24px; width:56px; pointer-events:none; z-index:2; background:linear-gradient(270deg, var(--bg) 0%, rgba(250,249,247,0) 100%)}
}

/* Mobil: Designideen kompakter */
@media (max-width: 820px){
  #designideen [data-flip="hero"]{margin-bottom:-45px !important}
  #designideen [data-flip="hero"] > div{aspect-ratio:1/1 !important}
  #designideen [data-mobile-2col]{gap:6px !important}
  #designideen [data-sec-head]{margin-bottom:-14px !important}
  #designideen [data-sec-head] > p:last-child{margin-top:-6px !important}
  [data-mobile-stack] > p[style*="font-size:16px"]{font-size:14px !important}
}

/* Kollektion: eigenes Tonband, damit die Produktkarten heller hervortreten */
#kollektion{ --coll-tint:#EBE8E2 }
html.dark #kollektion{ --coll-tint:#131210 }
#kollektion::before{content:''; position:absolute; z-index:-1; top:0; bottom:0; left:50%; transform:translateX(-50%); width:100vw; background:var(--coll-tint)}
#kollektion article > div:first-child{box-shadow:0 18px 40px -22px rgba(20,19,16,.35); background:#F5F4F2 !important}
html.dark #kollektion article > div:first-child{box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}

/* Einheitlicher Sektionstakt — Trennung über den oberen Abstand,
   dunkle Bänder trennen über den Farbwechsel und brauchen weniger Außenabstand */
@media (max-width: 820px){
  header, section{padding-top:48px !important; padding-bottom:0 !important}
  #designideen{padding-top:30px !important}
  [data-screen-label="Motive"], [data-screen-label="Warum AbiHoodie"], #ueber-uns{
    margin-top:24px !important; padding-top:48px !important; padding-bottom:48px !important}
  #kollektion, #sparen, #faq{padding-top:24px !important}
  footer{padding-top:48px !important; padding-bottom:56px !important}
  [data-sec-head]{margin-bottom:28px !important}
  #designideen [data-sec-head]{margin-bottom:-14px !important}
  #kollektion > [data-mobile-stack]:first-of-type,
  #referenzen > [data-mobile-stack]:first-of-type,
  #sparen > [data-mobile-stack]:first-of-type{margin-bottom:28px !important}
  #stimmen > div[data-reveal]:first-of-type{margin-bottom:28px !important}
}
@media (min-width: 821px){
  header, section{padding-bottom:0 !important}
  #designideen{padding-top:clamp(32px,4vh,48px) !important}
  [data-screen-label="Motive"], [data-screen-label="Warum AbiHoodie"], #ueber-uns{
    margin-top:clamp(28px,3.5vh,44px) !important;
    padding-top:clamp(52px,6.5vh,80px) !important;
    padding-bottom:clamp(52px,6.5vh,80px) !important}
  #kollektion, #sparen, #faq{padding-top:clamp(28px,3.5vh,44px) !important}
  footer{padding-top:clamp(40px,5vh,64px) !important}
}

/* Mobil: Social Proof im Hero entfällt — steht direkt darunter im Trust-Strip */
@media (max-width: 820px){
  [data-screen-label="Hero"] [data-hero-cta] > div:last-child{display:none !important}
}

/* Sparen-Sektion mit mehr Luft nach oben */
#sparen{padding-top:clamp(56px,7vh,96px) !important}

/* Kontaktsektion: Luft zum Laufband darunter (die globale Regel setzt padding-bottom:0) */
#kontakt{padding-bottom:clamp(48px,6vh,80px) !important}

/* Zwei dunkle Bänder direkt hintereinander: kein heller Spalt dazwischen */
[data-screen-label="Warum AbiHoodie"] + #ueber-uns{margin-top:0 !important}

/* Desktop: Hero-Textspalte 20px tiefer, Bildpaar bleibt an seiner Position */
@media (min-width: 821px){
  [data-screen-label="Hero"] > div:first-child{margin-top:60px}

}

/* Hero-Bildpaar: Position (schlägt den Inline-Wert) */
@media (min-width: 1101px){
  [data-screen-label="Hero"] [data-m-top]{margin-top:-300px !important}
}

/* Navigation etwas tiefer, Hero-Inhalt bleibt an seiner Position */
@media (min-width: 821px){
  #lux-nav{top:40px !important}
  [data-screen-label="Hero"]{padding-top:78px !important}
}

/* Wortmarke */
.logo-mark{display:block;width:auto;height:auto}
html.dark nav .logo-mark{filter:invert(1)}
footer .logo-mark{filter:invert(1)}