/* KEYTOS ENGINE · Theme „squarespace“ · Komponenten
   Nachbau des Designsystems von de.squarespace.com (Stand 05.10.2026): zwei Atome `.text--<rolle>` (12 Rollen)
   und `.cta--<variante>` (4 Varianten + `--light`), dazu Sektionen, Karten, Pillen, Akkordeon, Header mit
   Mobil-Menü, Footer, Reveal. Braucht tokens.css (davor einbinden) und fonts/fonts.css.
   Regeln: Hover nur in @media (hover:hover); jede Bewegung fällt unter prefers-reduced-motion auf
   Opacity/Endzustand zurück; Sektionen sind viewportbreit (Padding = Gutter), kein Max-Width-Container. */

/* ═══ 1 · Textrollen ═══════════════════════════════════════════════════════════════
   Zuordnung wie bei Squarespace: Hero-h1 = title3 · Sektions-h2 = subtitle1 · Abschluss-h2 = title1 ·
   Karten-h3 = subtitle3 (klein) bzw. subtitle2 (groß) · p = body · Labels/Badges = footnote ·
   Nav-Links/Überzeilen = eyebrow · Microcopy unter CTAs = subtitle3. */
.text { margin: 0; color: var(--primitive-black); font-family: var(--font-sans); font-weight: var(--weight-regular); }
.text--light { color: var(--primitive-white); }
/* Gedämpfter Text: auf Weiß gray-800 (7:1), auf Schwarz/dunklen Karten gray-400 (≥5,6:1) – gray-500 fällt auf beiden
   Gründen unter WCAG AA 4,5:1 (axe 12.10.2026: 37 Verstöße auf keytos.de/neu, alle dieser Token). */
.text--muted { color: var(--color-gray-800); }
.section--dark .text--muted, .conversion .text--muted, .footer .text--muted, .stats .text--muted, .mobile-menu .text--muted,
.card:not(.card--light) .text--muted, .text--light.text--muted { color: var(--color-gray-400); }
.card--light .text--muted { color: var(--color-gray-800); }
.text--display  { font-weight: 300; letter-spacing: -.06em; line-height: 1.04; font-size: clamp(48px, 29.0909vw - 2.81818rem, 64px); }
.text--title1   { font-weight: 300; letter-spacing: -.05em; line-height: 1.04; font-size: clamp(48px, 2.27273rem + 3.63636vw, 50px); }
.text--title2   { font-weight: 300; letter-spacing: -.05em; line-height: 1.04; font-size: clamp(44px, 2.02273rem + 3.63636vw, 46px); }
.text--title3   { font-weight: 300; letter-spacing: -.06em; line-height: 1.04; font-size: clamp(38px, .920455rem + 7.27273vw, 42px); }
.text--title4   { letter-spacing: -.04em; line-height: 1.08; font-size: clamp(34px, 10.9091vw - .0568182rem, 40px); }
.text--subtitle1 { letter-spacing: -.04em; line-height: 1.08; font-size: 22px; }
.text--subtitle2 { letter-spacing: -.02em; line-height: 1.08; font-size: 20px; }
.text--subtitle3 { font-weight: 500; letter-spacing: -.01em; line-height: 1.2; font-size: 18px; }
.text--body      { letter-spacing: -.001em; font-size: 15px; line-height: 1.4; text-wrap: pretty; }
.text--body-medium { letter-spacing: -.001em; font-size: 15px; font-weight: 500; line-height: 1.4; text-wrap: pretty; }
.text--footnote  { font-size: 12px; line-height: 1.4; }
.text--eyebrow   { text-transform: uppercase; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0; }
/* Fließtext-Links: 1-px-Unterstreichung aus zwei Verlaufshälften (kein text-decoration) */
.text--body a, .text--footnote a, .text--body-medium a {
  color: inherit; text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-position: 0 100%, 100% 100%; background-repeat: no-repeat; background-size: 51% 1px, 50% 1px;
}
@media (min-width: 375px) {
  .text--display { font-size: clamp(64px, 2.98374rem + 4.33604vw, 80px); }
  .text--title1  { font-size: clamp(50px, 2.23577rem + 3.79404vw, 64px); }
  .text--title2  { font-size: clamp(46px, 2.4939rem + 1.62602vw, 52px); }
  .text--title3  { font-size: clamp(42px, 1.98984rem + 2.71003vw, 52px); }
  .text--title4  { font-size: 40px; }
  .text--subtitle1 { font-size: 26px; }
}
@media (min-width: 744px) {
  .text--display { font-size: clamp(80px, 10.8696vw - .0543478rem, 110px); }
  .text--title1  { font-size: clamp(64px, 9.42029vw - .380435rem, 90px); }
  .text--title2  { font-size: clamp(52px, 2.57609rem + 1.44928vw, 56px); }
  .text--title3  { font-size: clamp(52px, 2.57609rem + 1.44928vw, 56px); }
  .text--subtitle2 { font-size: 24px; }
  .text--subtitle3 { font-size: 20px; }
}
@media (min-width: 1020px) {
  .text--display { font-size: clamp(110px, 11.5385vw - .480769rem, 140px); }
  .text--title1  { font-size: clamp(90px, 3.17308rem + 3.84615vw, 100px); }
  .text--title2  { font-size: clamp(56px, .0673077rem + 5.38462vw, 70px); }
  .text--title3  { font-size: clamp(56px, 2.51923rem + 1.53846vw, 60px); }
  .text--title4  { font-size: clamp(40px, .0480769rem + 3.84615vw, 50px); }
  .text--subtitle1 { font-size: 32px; }
  .text--subtitle2 { font-size: 26px; }
}
@media (min-width: 1280px) {
  .text--display { font-size: clamp(140px, 12.5vw - 1.25rem, 160px); }
  .text--title1  { font-size: 100px; }
  .text--title2  { font-size: clamp(70px, 3.375rem + 1.25vw, 72px); }
  .text--title3  { font-size: clamp(60px, 1.75rem + 2.5vw, 64px); }
  .text--title4  { font-weight: 300; font-size: clamp(50px, .125rem + 3.75vw, 56px); }
  .text--subtitle1 { font-size: 36px; }
}
@media (min-width: 1440px) {
  .text--display { font-size: clamp(160px, .625rem + 10.4167vw, 210px); }
  .text--title1  { font-size: clamp(100px, 2.5rem + 4.16667vw, 120px); }
  .text--title2  { font-size: clamp(72px, 7.08333vw - 1.875rem, 106px); }
  .text--title3  { font-size: clamp(64px, 2.5rem + 1.66667vw, 72px); }
  .text--title4  { font-size: clamp(56px, .125rem + 3.75vw, 74px); }
  .text--subtitle1 { font-size: 40px; }
}
@media (min-width: 1920px) {
  .text--subtitle1 { font-size: 50px; }
  .text--subtitle2 { font-size: 34px; }
  .text--subtitle3 { font-size: 24px; }
}

/* ═══ 2 · Buttons (eine Geometrie: 23/28 px → 60 px hoch, Radius 4, 14 px Versalien 500) ═══
   HTML: <a class="cta cta--primary cta--has-arrow" href="…"><span class="cta__label">Projekt anfragen</span>
         <span data-arrow="true" aria-hidden="true"><span class="cta__arrow-icon">→</span></span></a> */
.cta { color: var(--primitive-black); cursor: pointer; text-decoration: none; }
.cta:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
/* Sprunglink „Zum Inhalt": unsichtbar, bis er per Tab den Fokus bekommt (Fokusring kommt aus tokens.css: body :focus-visible) */
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 1000; padding: 12px 16px; border-radius: var(--radius-button); background: var(--primitive-white); color: var(--primitive-black); font-family: var(--font-sans); font-size: 14px; font-weight: 500; text-decoration: none; }
.skip-link:focus-visible { top: 12px; }
/* Druck-Feedback: minimal kleiner beim Klicken (nicht bei reduzierter Bewegung) */
@media (prefers-reduced-motion: no-preference) {
  .cta--primary, .cta--primary-subtle, .cta--secondary, .pills__pill { transition-property: color, background-color, box-shadow, transform; transition-duration: var(--dur-fast); transition-timing-function: var(--ease-cubic-in-out); }
  .cta--primary:active, .cta--primary-subtle:active, .cta--secondary:active, .pills__pill:active { transform: scale(.98); }
}
.cta--light { color: var(--primitive-white); }
.cta--primary, .cta--primary-subtle, .cta--secondary {
  --cta-arrow-gap: 8px; --cta-arrow-margin-right: -4px; --cta-hover-offset: 2px;
  display: inline-flex; justify-content: center; align-items: center; overflow: hidden;
  padding: 23px 28px; border: none; border-radius: var(--radius-button);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 1em; text-transform: uppercase;
  background: var(--primitive-black); color: var(--primitive-white);
  transition: color var(--dur-fast) var(--ease-cubic-in-out), background-color var(--dur-fast) var(--ease-cubic-in-out), box-shadow var(--dur-fast) var(--ease-cubic-in-out);
}
.cta--primary.cta--light, .cta--primary-subtle.cta--light { background: var(--primitive-white); color: var(--primitive-black); }
.cta--secondary { --cta-arrow-gap: 17px; background: transparent; color: var(--primitive-black); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .2); }
.cta--secondary.cta--light { color: var(--primitive-white); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2); }
.cta--tertiary {
  display: inline-flex; padding: 4px 0; border: 0; border-radius: 0; background: transparent;
  font-size: 14px; font-weight: 500; line-height: 1em; text-transform: uppercase;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-position: 0 100%, 100% 100%; background-repeat: no-repeat; background-size: 51% 2px, 50% 2px;
}
.cta--block { display: flex; width: 100%; }
.cta span[data-arrow=true] { display: inline-flex; align-items: center; width: 1em; overflow: hidden; flex-shrink: 0; margin-left: var(--cta-arrow-gap); margin-right: var(--cta-arrow-margin-right); transition: transform .25s var(--ease-cubic-in-out); }
.cta .cta__arrow-icon { display: block; line-height: 1; transform: translate(-100%); transition: transform var(--dur-base) var(--ease-cubic-in-out); }
.cta--has-arrow .cta__label { display: inline-flex; align-items: center; line-height: 1; transform: translateX(calc(var(--cta-arrow-gap) / 2 + .5em + var(--cta-arrow-margin-right) / 2)); transition: transform var(--dur-base) var(--ease-cubic-in-out); }
@media (hover: hover) {
  .cta--primary:hover { background: var(--color-gray-200); color: var(--primitive-black); }
  .cta--primary.cta--light:hover { background: var(--color-gray-900); color: var(--primitive-white); }
  .cta--primary-subtle:hover { background: var(--color-gray-800); }
  .cta--primary-subtle.cta--light:hover { background: var(--color-gray-200); }
  .cta--secondary:hover { box-shadow: inset 0 0 0 2px var(--primitive-black); }
  .cta--secondary.cta--light:hover { background: var(--primitive-white); color: var(--primitive-black); box-shadow: inset 0 0 0 2px var(--primitive-white); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cta--has-arrow:hover .cta__label { transform: translateX(calc(-6px + var(--cta-hover-offset))); }
  .cta--has-arrow:hover span[data-arrow=true] { transform: translateX(var(--cta-hover-offset)); }
  .cta--has-arrow:hover .cta__arrow-icon { transform: translate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cta, .cta * { transition: none !important; }
  .cta--has-arrow .cta__label { transform: none; }
  .cta--has-arrow span[data-arrow=true] { width: auto; }
  .cta--has-arrow .cta__arrow-icon { transform: none; }
}

/* ═══ 3 · Sektionen & Layout ═══════════════════════════════════════════════════════ */
.section { padding: var(--section-padding) var(--grid-gutter-width); }
.section--dark { background: var(--primitive-black); color: var(--primitive-white); }
.section--no-padding-top { padding-top: 0; }
.section--tight { padding-top: 40px; padding-bottom: 40px; }
/* Überschrift-Block: Eyebrow → Titel (max. 6 Spalten) → Text (24 px) → CTA (40 px) */
.headline { max-width: 100%; }
.headline__eyebrow { margin: 0 0 40px; }
.headline__title { margin: 0; max-width: 100%; text-wrap: balance; }
.headline__body { margin: 24px 0 0; max-width: 100%; }
/* Breitenkappung erst ab Tablet: 8 Spalten ab 744, die Squarespace-6-Spalten ab 1020 (mobil volle Breite) */
@media (min-width: 744px) { .headline__title, .headline__body { max-width: calc(var(--grid-column-width) * 8 + var(--grid-gutter-width) * 7); } }
@media (min-width: 1020px) { .headline__title, .headline__body { max-width: calc(var(--grid-column-width) * 6 + var(--grid-gutter-width) * 5); } }
.headline__cta { margin-top: 40px; }
.headline--center { text-align: center; }
.headline--center .headline__title, .headline--center .headline__body { margin-left: auto; margin-right: auto; }
/* Zweispaltige Headline ab 1020: Titel links, Text rechts (je 6 Spalten) */
@media (min-width: 1020px) {
  .headline--split { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--grid-gutter-width); align-items: end; }
  .headline--split .headline__body { margin-top: 0; }
  .headline--split .headline__cta { grid-column: 1 / -1; }
}
/* Hero: schwarz, Medium mit Abdunkelung, Titel zentriert, CTA, Microcopy */
.hero { position: relative; overflow: hidden; padding: 160px var(--grid-gutter-width) 120px; text-align: center; background: var(--primitive-black); color: var(--primitive-white); }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: var(--overlay-media); }
.hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.hero__title { margin: 0 auto; max-width: calc(var(--grid-column-width) * 11 + var(--grid-gutter-width) * 10); text-wrap: balance; }
.hero__eyebrow { margin-bottom: 24px; }
.hero__cta { margin: 24px 0 16px; }
.hero__micro { margin: 0; }
@media (min-width: 1440px) { .hero { padding: 240px var(--grid-gutter-width) 80px; } .hero__cta { margin: 32px 0 24px; } }
/* Zahlen-Strip (Zähler title3 + Label footnote) */
.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 48px 120px; padding: 80px var(--grid-gutter-width); background: var(--primitive-black); color: var(--primitive-white); text-align: center; }
.stats__item { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 1280px) { .stats { padding: 120px 40px; } }
/* Abschluss-/Conversion-Band: h2.title1 + CTA, 1-px-Linie unten */
.conversion { position: relative; display: grid; grid-template-areas: "heading" "body" "cta"; padding: var(--section-padding) var(--grid-gutter-width); background: var(--primitive-black); color: var(--primitive-white); }
.conversion::after { content: ""; position: absolute; left: var(--grid-gutter-width); right: var(--grid-gutter-width); bottom: 0; height: 1px; background: var(--line-on-dark); }
.conversion__title { grid-area: heading; margin: 0 0 32px; }
.conversion__body { grid-area: body; margin: 0 0 80px; }
.conversion__cta { grid-area: cta; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
@media (min-width: 1280px) {
  .conversion { grid-template-columns: auto 1fr; grid-template-areas: "heading body" "cta cta"; align-items: end; }
  .conversion__title { margin-bottom: 40px; }
  .conversion__body { margin: 0 0 40px 40px; }
}
/* Rasterhelfer: Karten in 1 → 2 → 3/4 Spalten (Gaps 16/24/40 wie der Gutter) */
.grid { display: grid; gap: var(--grid-gutter-width); grid-template-columns: 1fr; }
@media (min-width: 744px)  { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stack { display: flex; flex-direction: column; gap: 24px; }
.mt-40 { margin-top: 40px; } .mt-64 { margin-top: 64px; } .mt-80 { margin-top: 80px; }

/* ═══ 4 · Karten, Badges, Pillen, Toggle, Akkordeon, Eingabe ═══════════════════════ */
.card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; overflow: hidden; border-radius: var(--radius-card); padding: 24px; background: var(--panel-dark-2); color: var(--primitive-white); transition: box-shadow .3s var(--ease-cubic-in-out); }
.card--light { background: var(--primitive-white); border: 1px solid var(--color-gray-200); color: var(--primitive-black); }
.card--glass { background: #fff3; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 32px; box-shadow: inset 0 1px 0 #ffffff33, inset 0 0 0 1px #ffffff14; }
@media (prefers-reduced-transparency: reduce) { .card--glass { background: var(--panel-dark-2); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.card--outline-dark { background: transparent; border: 1px solid var(--color-gray-800); padding: 30px; transition: border-color .3s; }
.card--large { padding: 32px; aspect-ratio: 16 / 10; }
.card__media { margin: -24px -24px 12px; aspect-ratio: 16 / 10; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-cubic-in-out); }
.card__arrow { position: absolute; right: 24px; bottom: 24px; width: 22px; height: 22px; }
.card p { margin: 0; }
@media (hover: hover) and (min-width: 1020px) {
  .card:hover { box-shadow: var(--shadow-200); }
  .card:hover .card__media img { transform: scale(1.05); }
  .card--outline-dark:hover { border-color: var(--primitive-white); box-shadow: none; }
}
.pricing-card { display: flex; flex-direction: column; gap: 40px; padding: 32px 32px 40px; border-radius: var(--radius-pricing); background: var(--primitive-white); color: var(--primitive-black); box-shadow: 0 -1px 30px #00000008, 0 81px 49px #00000005, 0 36px 36px #00000008, 0 9px 20px #00000008; }
.pricing-card--emphasized { box-shadow: 0 -1px 30px #0000001a, 0 78px 47px #0000000d, 0 35px 35px #00000017, 0 9px 19px #0000001a; }
.badge { display: inline-block; padding: 8px 16px; border-radius: 30px; background: var(--color-blue); color: var(--primitive-white); }
.badge--pale { background: var(--color-blue-pale); color: var(--color-blue); }
.tag { display: inline-block; padding: 8px 12px; border-radius: 30px; background: #fff3; backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); color: var(--primitive-white); }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 4px; border-radius: var(--radius-pill); }
.pills__pill { padding: 12px 16px; border: 0; border-radius: var(--radius-pill); background: transparent; font-size: 15px; cursor: pointer; }
.pills__pill[aria-pressed=true] { background: rgba(0, 0, 0, .08); }
.section--dark .pills__pill[aria-pressed=true] { background: rgba(255, 255, 255, .12); }
.toggle { display: inline-flex; padding: 4px; border-radius: 1000px; background: rgba(0, 0, 0, .05); }
.toggle__button { padding: 16px; border: 0; border-radius: 1000px; background: transparent; color: var(--color-gray-800); cursor: pointer; }
.toggle__button[aria-checked=true] { background: var(--primitive-white); color: var(--primitive-black); box-shadow: rgba(0, 0, 0, .09) 0 2px 2px, rgba(0, 0, 0, .05) 0 6px 3px, rgba(0, 0, 0, .01) 0 10px 4px; }
/* FAQ als native <details> – nur eins offen (JS im Demo) */
.faq { list-style: none; margin: 0; padding: 0; }
.faq__item { position: relative; }
.faq__item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-on-light); }
.faq__item:last-child::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--line-on-light); }
.section--dark .faq__item::before, .section--dark .faq__item:last-child::after { background: var(--color-gray-800); }
.faq__title { display: flex; justify-content: space-between; align-items: center; gap: 24px; width: 100%; padding: 24px 0; cursor: pointer; list-style: none; }
.faq__title::-webkit-details-marker { display: none; }
.faq__title::after { content: "+"; flex-shrink: 0; font-size: 28px; font-weight: 300; line-height: 1; transition: transform .25s var(--ease-cubic-in-out); }
details[open] > .faq__title::after { transform: rotate(45deg); }
.faq__body { margin: 0 0 24px; max-width: 100%; }
@media (min-width: 744px) { .faq__body { max-width: calc(var(--grid-column-width) * 8 + var(--grid-gutter-width) * 7); } }
@media (min-width: 744px) { .faq__title { padding: 32px 0; } }
/* Eingabe (E-Mail-Capture-Muster): 62 px hoch, Radius 8, Button rechts */
.input-wrap { display: flex; height: 62px; background: var(--primitive-white); border-radius: var(--radius-card); overflow: hidden; }
.input-wrap:focus-within { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.input-wrap:has([aria-invalid=true]) { box-shadow: 0 0 0 2px var(--color-error); }
.input { flex: 1; min-width: 0; padding: 0 24px; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--primitive-black); }
.input::placeholder { color: var(--color-gray-800); }
.input-wrap .cta { border-radius: 0; }

/* ═══ 5 · Header (fixed, transparent → Schwarz nach Scroll; Desktop-Nav erst ab 1280) ═══ */
.header { position: fixed; top: 0; left: 0; z-index: 900; display: flex; justify-content: space-between; align-items: center; gap: var(--grid-gutter-width); width: 100%; height: var(--global-nav-height); padding: 0 var(--grid-gutter-width); background: transparent; color: var(--primitive-white); transition: background-color .5s var(--ease-quart-out), top .3s var(--ease-quad-in-out); }
.header--has-scrolled { background: var(--primitive-black); }
.header--on-light { color: var(--primitive-black); }                     /* Variante für weiße Heros */
.header--on-light.header--has-scrolled { background: var(--primitive-white); border-bottom: 1px solid var(--line-on-light); }
.header__logo { display: flex; align-items: center; height: 30px; color: inherit; text-decoration: none; font-weight: 500; font-size: 18px; letter-spacing: -.02em; }
.header__nav { display: none; flex: 3 0 0; justify-content: center; align-items: center; gap: 32px; height: 100%; margin: 0; padding: 0; list-style: none; }
.header__nav-item { display: flex; align-items: center; gap: 4px; height: 100%; }
.header__nav-item a { color: inherit; text-decoration: none; }
.header__account { display: none; align-items: center; gap: 32px; }
.header__account > a:not(.cta) { color: inherit; text-decoration: none; }
.header__hamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; width: 32px; height: 32px; padding: 0 4px; background: none; border: 0; cursor: pointer; }
.header__hamburger-bar { width: 24px; height: 2px; background: currentColor; transition: rotate .25s var(--ease-quart-out), translate .25s var(--ease-quart-out) .25s; }
.header__hamburger[aria-expanded=true] .header__hamburger-bar:first-child { rotate: 45deg; translate: 0 5px; }
.header__hamburger[aria-expanded=true] .header__hamburger-bar:last-child { rotate: -45deg; translate: 0 -5px; }
.mobile-menu { position: fixed; inset: 0; z-index: 800; display: flex; flex-direction: column; padding: var(--global-nav-height) var(--grid-gutter-width) 16px; background: var(--primitive-black); color: var(--primitive-white); border-top: 1px solid var(--line-on-dark); visibility: hidden; overflow-y: auto; }
.mobile-menu--is-open { visibility: visible; animation: var(--dur-slow) var(--ease-quart-out) forwards swipeIn; }
@keyframes swipeIn { 0% { clip-path: polygon(101% 0%, 100% 0%, 101% 100%, 116% 100%); } to { clip-path: polygon(0% 0%, 101% 0%, 101% 101%, 0% 101%); } }
.mobile-menu__row { border-bottom: 1px solid var(--line-on-dark); }
.mobile-menu__row:first-child { border-top: 1px solid var(--line-on-dark); }
.mobile-menu__heading { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 0; background: none; border: 0; color: inherit; text-decoration: none; text-align: left; }
.mobile-menu__footer { margin-top: auto; display: grid; gap: 16px; padding-top: 24px; }
.megamenu { position: absolute; top: 100%; margin-top: 12px; padding: 40px; border-radius: var(--radius-card); background: var(--primitive-black); color: var(--primitive-white); box-shadow: var(--shadow-menu); }
.megamenu__divider { width: 1px; background: var(--divider-dark); }
.megamenu__eyebrow { color: var(--color-gray-500); }
.megamenu__blade { padding: 16px; border-radius: var(--radius-blade); background: var(--color-gray-900); }
body.menu-open { overflow: hidden; }
@media (min-width: 1280px) { .header__nav, .header__account { display: flex; } .header__hamburger, .mobile-menu { display: none; } }
@media (prefers-reduced-motion: reduce) { .mobile-menu--is-open { animation: none; } .header, .header__hamburger-bar { transition: none; } }

/* ═══ 6 · Footer (schwarz, 4-Spalten-Linkraster ab 1020, mobil Akkordeon) ═════════════ */
.footer { position: relative; z-index: 10; padding: 0 var(--grid-gutter-width); background: var(--primitive-black); color: var(--primitive-white); }
.footer__content { display: flex; flex-direction: column-reverse; gap: 40px; padding: 40px 0; }
.footer__aux { display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.footer__links { display: grid; grid-template-columns: 1fr; }
.footer__group { padding: 16px 0; border-bottom: 1px solid var(--line-on-dark); }
.footer__group-heading { display: flex; justify-content: space-between; width: 100%; background: none; border: 0; color: var(--primitive-white); cursor: pointer; list-style: none; }
.footer__group-heading::-webkit-details-marker { display: none; }
.footer__group-heading::after { content: "↓"; }
.footer__group[open] .footer__group-heading::after { content: "↑"; }
.footer__group-list { display: flex; flex-direction: column; gap: 12px; padding: 16px 0 0; margin: 0; list-style: none; }
.footer__link { font-size: 15px; color: var(--color-gray-500); text-decoration: none; transition: color .3s; }
.footer__link:hover { color: var(--primitive-white); }
.footer__fineprint { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 0 40px; }
.footer__fineprint-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--color-gray-500); }
.footer__fineprint-list a { color: inherit; text-decoration: none; }
.footer__locale-button { padding: 12px; border: 0; border-radius: 8px; background: var(--panel-dark-1); color: var(--primitive-white); font-size: 13px; }
@media (min-width: 1020px) {
  .footer__content { flex-direction: column; border-bottom: 1px solid var(--line-on-dark); }
  .footer__aux { flex-direction: row; justify-content: space-between; padding-bottom: 40px; border-bottom: 1px solid var(--line-on-dark); text-align: left; }
  .footer__links { grid-template-columns: repeat(4, 1fr); column-gap: 24px; }
  .footer__group { padding: 0; border: 0; }
  .footer__group-heading { font-size: 13px; margin-bottom: 16px; pointer-events: none; }
  .footer__group-heading::after, .footer__group[open] .footer__group-heading::after { content: none; }
  .footer__group-list { gap: 8px; padding: 0; }
  .footer__link { font-size: 13px; }
  .footer__fineprint { flex-direction: row; justify-content: space-between; padding: 12px 0 24px; }
  .footer__locale-button { padding: 8px 0; background: none; }
}
@media (min-width: 1280px) { .footer__content { flex-direction: row; } .footer__aux { flex: 1; flex-direction: column; align-items: flex-start; border: 0; padding: 0; } .footer__links { flex: 2; column-gap: 40px; } }

/* ═══ 7 · Reveal (IntersectionObserver setzt .is-visible; ohne JS alles sichtbar) ═══════ */
.js .reveal { opacity: 0; transform: translateY(25px); transition: opacity var(--dur-slow) var(--ease-quart-out), transform var(--dur-slow) var(--ease-quart-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { transform: none; transition: opacity .3s; } }