/* WohnOutlet24 -- eigene Marke, eigenes Design (Denis-Auftrag 2026-09-28).
 * Bewusst NICHT die Nachtschicht-Palette: eigenstaendiges Kundenprojekt, aus der
 * Referenz design/wohnoutlet24/*.dc.html uebernommen (Farben, Typografie,
 * Abstaende, Radien 1:1 aus der Vorlage). Schriften selbst ausgeliefert, siehe
 * static/wohnoutlet-schriften.css und static/fonts/LIZENZ.md.
 */
:root {
  --wo-bg: oklch(9% 0.01 300);
  --wo-bg-2: oklch(12% 0.012 300);
  --wo-bg-tief: oklch(8% 0.01 300);
  --wo-karte: oklch(15% 0.014 300);
  --wo-linie: oklch(100% 0 0 / 0.08);
  --wo-linie-stark: oklch(100% 0 0 / 0.14);
  --wo-text: oklch(97% 0.005 300);
  --wo-text-2: oklch(78% 0.015 280);
  --wo-text-3: oklch(70% 0.012 300);
  --wo-pink: oklch(60% 0.25 354);
  --wo-pink-hell: oklch(66% 0.25 354);
  --wo-pink-label: oklch(72% 0.2 354);
  --wo-lila: oklch(50% 0.22 300);
  --wo-gruen: oklch(70% 0.19 150);
  --wo-rot: oklch(65% 0.2 25);
  --wo-titel: 'Unbounded', sans-serif;
  --wo-text-font: 'Manrope', sans-serif;
  --wo-mono: 'JetBrains Mono', monospace;
}

.wo * { box-sizing: border-box; }
.wo { background: var(--wo-bg); color: var(--wo-text-2); font-family: var(--wo-text-font); overflow-x: hidden; }
.wo a { color: var(--wo-pink-label); text-decoration: none; }
.wo a:hover { color: oklch(80% 0.17 354); }
.wo img { max-width: 100%; }

/* ── Fortschrittsbalken oben ─────────────────────────────────────────────── */
.wo-fortschritt { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--wo-pink), var(--wo-lila)); }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.wo-nav-huelle { position: fixed; top: 14px; left: 0; right: 0; z-index: 110;
  padding: 0 clamp(12px, 3vw, 24px); }
.wo-nav-pille { pointer-events: auto; max-width: 1180px; margin: 0 auto; height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 8px 0 16px; border-radius: 999px; background: oklch(13% 0.012 300 / 0.42);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--wo-linie); transition: background .4s, box-shadow .4s, border-color .4s; }
.wo-nav-pille.ist-fest { background: oklch(13% 0.012 300 / 0.82); border-color: var(--wo-linie-stark);
  box-shadow: 0 24px 60px -24px oklch(0% 0 0 / 0.8); height: 58px; }
.wo-logo img { height: clamp(17px, 2.2vw, 22px); width: auto; display: block; }
.wo-nav-links { display: flex; align-items: center; gap: 2px; }
.wo-nav-links a { display: flex; align-items: center; padding: 10px 15px; border-radius: 999px;
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: oklch(80% 0.012 300);
  transition: background .25s, color .25s; }
.wo-nav-links a:hover, .wo-nav-links a.ist-aktiv { background: oklch(100% 0 0 / 0.08); color: var(--wo-text); }
.wo-nav-rechts { display: flex; align-items: center; gap: 8px; }
/* .wo a (Zeile 30) setzt color:var(--wo-pink-label) mit hoeherer Spezifitaet
   (Klasse+Element) als ein einfaches .wo-cta (nur Klasse) -- der Button-Text
   fiel dadurch auf gedaempftes Pink statt Weiss zurueck und war auf dem pinken
   Hintergrund kaum lesbar (Denis-Befund 2026-09-28). ".wo a.wo-cta" schlaegt
   ".wo a" eindeutig, unabhaengig von der Reihenfolge im Stylesheet. */
.wo a.wo-cta, .wo-cta { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px;
  border-radius: 999px; background: var(--wo-pink); color: oklch(99% 0.005 354);
  font-size: 14px; font-weight: 700; box-shadow: 0 8px 26px -8px oklch(60% 0.25 354 / 0.6);
  transition: transform .25s, background .25s, box-shadow .25s; white-space: nowrap; }
.wo a.wo-cta:hover, .wo-cta:hover { background: var(--wo-pink-hell); color: oklch(99% 0.005 354); }
.wo-burger { display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 6px; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--wo-linie-stark);
  background: oklch(100% 0 0 / 0.04); cursor: pointer; padding: 0; }
.wo-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--wo-text);
  transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.wo-burger.ist-offen { background: var(--wo-pink); }
.wo-burger.ist-offen span:first-child { transform: translateY(4px) rotate(45deg); }
.wo-burger.ist-offen span:last-child { transform: translateY(-4px) rotate(-45deg); }

.wo-nach-oben { position: fixed; right: 24px; bottom: 24px; z-index: 100; width: 52px; height: 52px;
  border-radius: 999px; border: 1px solid var(--wo-linie-stark); background: oklch(13% 0.012 300 / 0.7);
  backdrop-filter: blur(12px); color: var(--wo-text); font-size: 18px; cursor: pointer;
  align-items: center; justify-content: center; display: flex; opacity: 0; pointer-events: none;
  transition: opacity .35s, background .25s, border-color .25s; }
.wo-nach-oben.ist-sichtbar { opacity: 1; pointer-events: auto; }
.wo-nach-oben:hover { background: var(--wo-pink); border-color: var(--wo-pink); }

.wo-menue { position: fixed; inset: 0; z-index: 105; background: oklch(9% 0.012 300 / 0.97);
  backdrop-filter: blur(24px); display: flex; flex-direction: column; justify-content: space-between;
  padding: 112px 24px calc(32px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.wo-menue[hidden] { display: none; }
.wo-menue-links { display: flex; flex-direction: column; gap: 6px; }
.wo-menue-links a { display: flex; align-items: baseline; gap: 16px; padding: 10px 0;
  font-family: var(--wo-titel); font-weight: 500; font-size: clamp(28px, 8vw, 44px);
  letter-spacing: -0.03em; color: var(--wo-text); }
.wo-menue-links a span { font-family: var(--wo-mono); font-size: 12px; color: var(--wo-pink-label); }
.wo-menue-fuss { display: flex; flex-direction: column; gap: 12px; margin-top: 40px; }
.wo-menue-fuss > a { display: flex; justify-content: center; align-items: center; gap: 10px; height: 56px;
  border-radius: 999px; background: var(--wo-pink); color: oklch(99% 0.005 354); font-weight: 700; font-size: 16px; }
.wo-menue-tel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wo-menue-tel a { display: flex; justify-content: center; align-items: center; height: 52px;
  border-radius: 999px; border: 1px solid var(--wo-linie-stark); color: var(--wo-text); font-weight: 600; font-size: 14px; }

.wo-bottombar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 100; display: none; gap: 6px; padding: 6px; border-radius: 24px;
  background: oklch(13% 0.012 300 / 0.86); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--wo-linie-stark); box-shadow: 0 20px 50px -16px oklch(0% 0 0 / 0.8);
  transform: translateY(calc(100% + 40px)); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.wo-bottombar.ist-sichtbar { transform: translateY(0); }
.wo-bottombar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; height: 56px; border-radius: 18px; color: var(--wo-text); font-size: 12px; font-weight: 700; }
.wo-bottombar a:last-child { flex: 1.3; background: var(--wo-pink); color: oklch(99% 0.005 354); }
.wo-bottombar a span { font-size: 17px; line-height: 1; }

@media (max-width: 900px) {
  .wo-nav-links, .wo-cta { display: none; }
  .wo-burger { display: flex; }
  .wo-bottombar.ist-bereit { display: flex; }
  .wo-nach-oben { display: none; }
}

/* ── Hero / Sektionen allgemein ──────────────────────────────────────────── */
.wo-hero { position: relative; overflow: hidden; padding: clamp(130px,17vw,190px) clamp(18px,4vw,40px) clamp(64px,9vw,110px);
  background: radial-gradient(900px 480px at 50% 0%, oklch(60% 0.25 354 / 0.2), transparent 70%), var(--wo-bg-2); }
.wo-hero-schmal { padding-bottom: clamp(48px,7vw,84px); text-align: center; }
.wo-hero-schmal > div { max-width: 700px; margin: 0 auto; }
.wo-eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--wo-mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--wo-text-3); margin-bottom: 18px; justify-content: center; }
.wo-eyebrow span:first-child { color: var(--wo-pink-label); }
.wo-eyebrow i { width: 28px; height: 1px; background: oklch(100% 0 0 / 0.25); display: block; }
.wo h1, .wo h2, .wo h3 { font-family: var(--wo-titel); letter-spacing: -0.03em; color: var(--wo-text); font-weight: 500; margin: 0; }
.wo h1 { font-size: clamp(30px,5.5vw,64px); line-height: 1.04; }
.wo h2 { font-size: clamp(30px,5vw,52px); line-height: 1.05; }
.wo-sektion { padding: clamp(64px,9vw,120px) clamp(18px,4vw,40px); }
.wo-sektion-inhalt { max-width: 1180px; margin: 0 auto; }
.wo-lead { margin: 16px 0 0; font-size: 16px; line-height: 1.65; color: var(--wo-text-3); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.wo-knopf-rund { width: 52px; height: 52px; border-radius: 999px; border: 1px solid var(--wo-linie-stark);
  background: oklch(100% 0 0 / 0.04); color: var(--wo-text); font-size: 20px; cursor: pointer; }
.wo-knopf-rund:hover { background: var(--wo-pink); border-color: var(--wo-pink); }

/* ── Karten allgemein ────────────────────────────────────────────────────── */
.wo-karte { background: var(--wo-karte); border: 1px solid var(--wo-linie); border-radius: 24px; padding: 32px; }

/* ── Angebote-Slider ─────────────────────────────────────────────────────── */
.wo-angebote-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.wo-angebote-werkzeuge { display: flex; align-items: center; gap: 10px; }
/* Kann nicht mit max-width:1180px + margin:auto zentriert werden -- die Karten
   muessen ueber overflow-x:auto weiter scrollen koennen als der 1180px-Rahmen.
   Stattdessen (1:1 aus der Referenz): linker Einzug rechnet die Zentrierung
   selbst aus, sonst kleben die Karten bei breiten Fenstern links am Rand fest,
   waehrend die Ueberschrift darueber brav bei 1180px zentriert ist (Denis-Befund
   2026-09-28: "aktuelle Angebote ist aktuell noch links und nicht zentriert"). */
.wo-slider { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain; margin-top: 40px;
  padding: 14px max(clamp(18px,4vw,40px), calc((100vw - 1180px) / 2 + 40px)) 30px;
  scroll-padding-left: max(clamp(18px,4vw,40px), calc((100vw - 1180px) / 2 + 40px)); }
.wo-slider::-webkit-scrollbar { display: none; }
.wo-angebot-karte { flex: 0 0 clamp(272px,80vw,380px); scroll-snap-align: start; }
/* display:block noetig, wenn das Angebot einen Kleinanzeigen-Link hat und die
   Kachel deshalb ein <a> statt eines <div> ist -- Links sind sonst inline und
   die height:100%-Ketten der Slider-Karte brechen (Denis: Klick auf eine
   Angebotskachel soll direkt zur hinterlegten Kleinanzeigen-Seite fuehren). */
.wo-angebot-innen { display: flex; flex-direction: column; position: relative; height: 100%; border-radius: 26px; overflow: hidden;
  background: var(--wo-karte); border: 1px solid var(--wo-linie); transition: border-color .25s; }
.wo a.wo-angebot-innen:hover { border-color: color-mix(in srgb, var(--wo-pink) 55%, transparent); color: inherit; }
.wo-angebot-bild { position: relative; aspect-ratio: 4/3; flex: 0 0 auto; background: oklch(20% 0.014 300); }
.wo-angebot-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wo-angebot-badge { position: absolute; top: 14px; left: 14px; height: 32px; display: flex; align-items: center;
  padding: 0 12px; border-radius: 999px; background: var(--wo-pink); color: oklch(99% 0.005 354);
  font-family: var(--wo-titel); font-weight: 600; font-size: 13px; }
.wo-angebot-nr { position: absolute; top: 14px; right: 14px; height: 32px; display: flex; align-items: center;
  padding: 0 12px; border-radius: 999px; background: oklch(12% 0.012 300 / 0.8); color: oklch(92% 0.006 300);
  font-family: var(--wo-mono); font-size: 11px; letter-spacing: .06em; }
/* flex-Spalte, damit der Preis (margin-top:auto) immer unten sitzt -- egal ob die
   Beschreibung zwei oder drei Zeilen braucht (Denis: Preis/Strich sollen bei
   unterschiedlichen Textlaengen auf gleicher Hoehe bleiben). */
.wo-angebot-rumpf { flex: 1; display: flex; flex-direction: column; padding: 24px 24px 26px; }
.wo-angebot-rumpf h3 { font-size: 20px; }
.wo-angebot-rumpf p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--wo-text-2); }
.wo-angebot-preis { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--wo-linie); }
.wo-angebot-preis-alt { font-size: 14px; color: oklch(62% 0.012 300); text-decoration: line-through; }
.wo-angebot-preis-neu { font-family: var(--wo-titel); font-weight: 600; font-size: 34px; letter-spacing: -0.04em;
  color: oklch(70% 0.22 354); }
/* Gleicher Spezifitaets-Grund wie bei .wo-cta oben -- ist selbst ein <a>. */
.wo a.wo-angebot-mehr, .wo-angebot-mehr { display: flex; flex-direction: column; justify-content: space-between; height: 100%;
  min-height: 420px; padding: 30px; border-radius: 26px; overflow: hidden; color: oklch(99% 0.005 354);
  background: linear-gradient(150deg, var(--wo-pink), var(--wo-lila)); }
.wo-angebot-mehr .wo-eyebrow { justify-content: flex-start; margin: 0; opacity: .85; }
.wo-fortschritt-slider { max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px,4vw,40px); }
.wo-fortschritt-slider-bahn { height: 2px; border-radius: 2px; background: oklch(100% 0 0 / 0.08); overflow: hidden; }
.wo-fortschritt-slider-bahn i { display: block; height: 100%; width: 40%; background: var(--wo-pink); border-radius: 2px; }

/* ── Filialen ────────────────────────────────────────────────────────────── */
.wo-filialen-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,460px),1fr)); gap: 20px; margin-top: 48px; }
.wo-filiale { display: flex; flex-direction: column; height: 100%; border-radius: 28px; overflow: hidden;
  background: var(--wo-karte); border: 1px solid var(--wo-linie); }
.wo-filiale-bild { position: relative; height: clamp(220px,26vw,300px); overflow: hidden; background: oklch(20% 0.014 300); }
.wo-filiale-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wo-filiale-bild::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, oklch(9% 0.01 300 / .3), transparent 40%, oklch(12% 0.012 300 / .92)); }
.wo-filiale-status { position: absolute; top: 16px; left: 16px; z-index: 1; display: flex; align-items: center; gap: 9px;
  height: 36px; padding: 0 14px; border-radius: 999px; background: oklch(12% 0.012 300 / .7);
  border: 1px solid var(--wo-linie-stark); backdrop-filter: blur(10px); font-size: 13px; font-weight: 600; color: oklch(94% 0.006 300); }
.wo-filiale-status i { width: 8px; height: 8px; border-radius: 50%; }
.wo-filiale-titel { position: absolute; left: 24px; bottom: 18px; z-index: 1; }
.wo-filiale-titel .label { font-family: var(--wo-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: oklch(80% 0.01 300); }
.wo-filiale-titel .name { font-family: var(--wo-titel); font-weight: 500; font-size: clamp(30px,4vw,44px); letter-spacing: -0.04em; line-height: 1.05; color: oklch(98% 0.005 300); }
.wo-filiale-rumpf { padding: clamp(20px,3vw,30px); display: flex; flex-direction: column; gap: 18px; flex: 1; }
.wo-filiale-zeilen { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr)); gap: 16px; }
/* Adresse und Abholadresse nebeneinander, Telefon immer eine Zeile darunter -- so haben
   Herten (ohne Abholadresse) und Herne gleich viele Zeilen und die Oeffnungszeiten
   beginnen auf gleicher Hoehe. */
.wo-filiale-zeilen { grid-template-columns: repeat(2, minmax(0,1fr)); }
.wo-filiale-zeilen > .wo-zeile-voll { grid-column: 1 / -1; }
@media (max-width: 420px) { .wo-filiale-zeilen { grid-template-columns: 1fr; } }
.wo-label { font-family: var(--wo-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: oklch(62% 0.012 300); margin-bottom: 6px; }
.wo-oeffnungszeiten-zeile { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; color: var(--wo-text-3); }
.wo-oeffnungszeiten-zeile.ist-heute { color: oklch(94% 0.006 300); font-weight: 600; }
.wo-oeffnungszeiten-tag { display: flex; align-items: center; gap: 8px; }
.wo-oeffnungszeiten-tag span { font-family: var(--wo-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--wo-pink-label); }
.wo-karte-karte { height: 190px; border-radius: 18px; overflow: hidden; border: 1px solid var(--wo-linie);
  filter: invert(0.9) hue-rotate(180deg) saturate(0.55) contrast(0.95); }
.wo-karte-karte iframe { width: 100%; height: 100%; border: 0; display: block; }
.wo-filiale-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.wo-filiale-aktionen a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.wo-filiale-aktionen a:first-child { background: var(--wo-pink); color: oklch(99% 0.005 354); }
.wo-filiale-aktionen a:last-child { border: 1px solid var(--wo-linie-stark); color: var(--wo-text); }

/* ── Galerie ─────────────────────────────────────────────────────────────── */
.wo-galerie-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 32px 0 24px; }
.wo-chip { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--wo-linie-stark); background: transparent;
  color: var(--wo-text-3); font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--wo-text-font); }
.wo-chip.ist-aktiv { background: var(--wo-pink); border-color: var(--wo-pink); color: oklch(99% 0.005 354); }
/* Bento-Raster: "Groß"/"Klein" wird pro Foto im Admin gewaehlt (data-groesse),
   grid-auto-flow:dense packt kleine Fotos automatisch in die Luecken, die ein
   grosses Foto sonst offen liesse -- kein Foto muss selbst wissen, wo es landet
   (Denis: "alles andere wird dann auch so immer drumherum gebaut"). */
.wo-galerie-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
  grid-auto-rows: clamp(140px,15vw,210px); grid-auto-flow: dense; gap: 12px; }
.wo-galerie-grid button { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 16px; overflow: hidden;
  position: relative; width: 100%; height: 100%; transition: box-shadow .3s; }
/* Pinker Ring + Lichtschein beim Hover -- 1:1 aus der Referenz (style-hover Box-Shadow). */
.wo-galerie-grid button:hover { box-shadow: 0 0 0 2px var(--wo-pink), 0 20px 50px -20px color-mix(in srgb, var(--wo-pink) 60%, transparent); }
.wo-galerie-grid button[data-groesse="gross"] { grid-column: span 2; grid-row: span 2; }
.wo-galerie-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
/* Filial-Chip unten links auf jeder Kachel -- Denis: "man hat direkt gesehen,
   ob Herne oder Herten" (1:1 aus der Referenz uebernommen). */
.wo-galerie-badge { position: absolute; left: 10px; bottom: 10px; height: 28px; display: flex; align-items: center;
  padding: 0 11px; border-radius: 999px; background: oklch(10% 0.01 300 / 0.7); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); font-family: var(--wo-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: oklch(94% 0.006 300); pointer-events: none; }
.wo-galerie-grid button:hover img { transform: scale(1.06); }
.wo-lightbox { position: fixed; inset: 0; z-index: 200; background: oklch(6% 0.01 300 / .96); display: flex;
  align-items: center; justify-content: center; padding: 24px; }
.wo-lightbox[hidden] { display: none; }
.wo-lightbox img { max-width: min(90vw,1100px); max-height: 82vh; object-fit: contain; border-radius: 12px; }
.wo-lightbox-schliessen, .wo-lightbox-vor, .wo-lightbox-zurueck { position: absolute; width: 52px; height: 52px;
  border-radius: 999px; border: 1px solid var(--wo-linie-stark); background: oklch(13% 0.012 300 / .8);
  color: var(--wo-text); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.wo-lightbox-schliessen { top: 20px; right: 20px; }
.wo-lightbox-vor { right: 20px; top: 50%; transform: translateY(-50%); }
.wo-lightbox-zurueck { left: 20px; top: 50%; transform: translateY(-50%); }

/* ── Über-uns Grid ───────────────────────────────────────────────────────── */
.wo-vorteile { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 24px; margin-top: 48px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.wo-footer { position: relative; overflow: hidden; background: var(--wo-bg-tief); color: oklch(80% 0.012 300);
  padding: clamp(56px,8vw,96px) clamp(18px,4vw,40px) 0; border-top: 1px solid var(--wo-linie); }
.wo-footer-grid { max-width: 1180px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr)); gap: clamp(32px,4vw,48px); }
.wo-footer-marke { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.wo-footer-marke img { height: 24px; width: auto; }
.wo-footer-marke p { margin: 0; font-size: 14px; line-height: 1.7; color: oklch(68% 0.012 300); max-width: 260px; }
.wo-footer-marke a { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px;
  border-radius: 999px; background: var(--wo-pink); color: oklch(99% 0.005 354); font-size: 14px; font-weight: 700; }
.wo-footer h3 { font-family: var(--wo-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wo-pink-label); margin-bottom: 18px; font-weight: 400; }
.wo-footer-spalte { display: flex; flex-direction: column; gap: 11px; font-size: 14px; }
.wo-footer-spalte a { color: oklch(82% 0.01 300); }
.wo-footer-spalte a:hover { color: oklch(98% 0.005 300); }
.wo-footer-filiale { font-size: 14px; line-height: 1.55; margin-bottom: 14px; }
.wo-footer-filiale .name { color: oklch(96% 0.005 300); font-weight: 700; }
.wo-footer-filiale .adresse { color: oklch(70% 0.012 300); }
.wo-footer-marke-riesig { margin-top: clamp(48px,7vw,80px); font-family: var(--wo-titel); font-weight: 600;
  font-size: 10.4vw; line-height: 1; letter-spacing: -0.06em; white-space: nowrap; text-align: center;
  color: oklch(100% 0 0 / 0.045); user-select: none; padding-bottom: .12em; }
.wo-footer-marke-riesig span { color: oklch(60% 0.25 354 / 0.3); }
.wo-footer-zeile { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 12px; padding: 22px 0 calc(100px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--wo-linie);
  font-family: var(--wo-mono); font-size: 11px; letter-spacing: .08em; color: oklch(58% 0.012 300); }

/* ── Rechtstexte ─────────────────────────────────────────────────────────── */
.wo-rechtstext { max-width: 760px; margin: 0 auto; font-size: 16px; line-height: 1.8; color: var(--wo-text-2); }
.wo-rechtstext h2 { font-size: 20px; margin: 0 0 14px; }
.wo-rechtstext h3 { font-size: 17px; color: oklch(90% 0.008 280); margin: 0 0 12px; }
.wo-rechtstext p { margin: 0 0 24px; }
.wo-rechtstext .stark { font-weight: 600; color: oklch(88% 0.01 280); margin-bottom: 8px; }

@media (max-width: 720px) {
  .wo-angebote-kopf, .wo-vorteile { gap: 16px; }
}

/* ── Reveal-Animation ────────────────────────────────────────────────────── */
[data-reveal] { opacity: 0; transform: translateY(32px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
[data-reveal].ist-sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ── Hero-Parallax, Marquee, Wasserzeichen, Drift (1:1 aus der Referenz --
   Denis-Befund 2026-09-28: "das sieht in Claude Design anders aus", und der
   eigentliche Grund war ein fehlendes isolation:isolate auf #top, das die
   negativ-indizierten Bild-/Verlaufs-Ebenen komplett unsichtbar gemacht hat.
   Diese Ebenen hier hinter dem Foto machen den Unterschied zur "flachen"
   Fassung aus, --sy wird per JS beim Scrollen gesetzt (wohnoutlet.js). ── */
@keyframes wo-heroZoom { from { transform: scale(1.18); } to { transform: scale(1.04); } }
.wo-hero-bild { transform: translate3d(0, calc(var(--sy, 0) * 0.35px), 0); will-change: transform; }
.wo-hero-parallax { transform: translateY(calc(var(--sy, 0) * -0.16px)); opacity: calc(1 - var(--sy, 0) / 650); }

@keyframes wo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes wo-marquee-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.wo-wasserzeichen { will-change: transform; }

@keyframes wo-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, -40px) scale(1.15); } }

/* Eigenes Pfeil-Icon statt des Zeichens "↗" -- iOS/Safari stellt diesen
   Unicode-Pfeil als buntes Emoji dar, das auf dem Handy "kacke" aussah
   (Denis-Befund 2026-09-28, aus wohnoutlet24/pfeil.jpeg freigestellt). */
.wo-pfeil { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; object-fit: contain; }
.wo-pfeil--gross { display: block; width: 64px; height: 64px; }