/* ===================================================================
   Vorschlag „Flut" — das freigegebene Design auf der echten Seite
   ===================================================================
   Regeln: docs/style-guide.md im OpenVuture-Ordner. Kurz:
     - vier Farben, nie eine Farbe auf sich selbst
     - eine Schrift (Roboto Flex), drei Ebenen: Aussage, Titel, Text
     - jede Abschnittsgrenze ist die Welle (Drahtgitter), Bewegung haengt
       am Scrollen, prefers-reduced-motion stellt alles still hin
     - ein Knopf: Apricot, versetzter Rahmen, rutscht beim Hover hinein

   Alles haengt an body.ov-flut und liegt nach allen Theme-Styles. Die
   alten Bereichs-Klassen (ov-baender--*) bleiben am <body>, damit Shop und
   Formulare ihr Grundgeruest behalten; was hier steht, gewinnt darueber.
   =================================================================== */

@font-face {
  font-family: "Roboto Flex OV";
  src: url("fonts/roboto-flex-ov.woff2") format("woff2");
  font-weight: 400 1000;
  font-stretch: 100% 151%;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Mono OV";
  src: url("fonts/roboto-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Mono OV";
  src: url("fonts/roboto-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Caveat Signatur";
  src: url("../fonts/Caveat-signatur.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

body.ov-flut {
  --apri: #FFBB8A;
  --lila: #613F75;
  --band: #4C325D;
  --schaum: #FFE3CC;
  --anzeige: "Roboto Flex OV", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --mono: "Roboto Mono OV", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --rand: max(16px, 4vw);
  --weich: cubic-bezier(0.16, 1, 0.3, 1);
  --kopf-h: 96px;

  /* Die Schrift-Tokens des alten Themes auf die neue Schrift biegen: Shop,
     Formulare und Inhaltsseiten folgen damit, ohne jede Regel anzufassen. */
  --fd: var(--anzeige);
  --fs: var(--anzeige);
  --fm: var(--mono);

  margin: 0;
  padding: 0;
  background: var(--apri);
  color: var(--lila);
  font-family: var(--anzeige);
  font-size: 17px;
  line-height: 1.6;
  font-variation-settings: "wdth" 100, "opsz" 16;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
}
/* clip auch am html: sonst weitet ein zu breites Wort auf dem Handy das
   ganze Layout-Fenster auf. */
/* Fester Wert: die Farb-Tokens stehen erst am body */
html:has(body.ov-flut) { background: #FFBB8A; overflow-x: clip; }
body.ov-flut a { color: inherit; }
body.ov-flut :focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* ---------- Die drei Ebenen ---------- */
body.ov-flut .gross {
  font-family: var(--anzeige);
  font-weight: 900;
  font-variation-settings: "wdth" 118, "opsz" 144;
  letter-spacing: -0.02em;
  line-height: 0.9;
  margin: 0;
  color: inherit;
  text-wrap: balance;
}
body.ov-flut .text {
  margin: 0;
  font-weight: 400;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.65;
  max-width: 58ch;
}
body.ov-flut .etikett {
  margin: 0;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
body.ov-flut .nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Nebenaktionen sind Textlinks: die Linie zieht sich beim Hover zurueck. */
body.ov-flut .textlink {
  position: relative;
  font-weight: 800;
  font-size: 17px;
  text-decoration: none;
  padding-bottom: 4px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
  transition: background-size 0.35s var(--weich);
}
body.ov-flut .textlink span { display: inline-block; transition: translate 0.35s var(--weich); }
body.ov-flut .textlink:hover { background-size: 0% 2px; background-position: 100% 100%; }
body.ov-flut .textlink:hover span { translate: 6px 0; }

/* ---------- Der Knopf ----------
   Apricot, Lila-Schrift, kleine Ecken. Dahinter ein Rahmen, 7px versetzt;
   --hinter ist die Farbe des Grunds hinter dem Knopf. Auf Apricot ist der
   Rahmen Lila, sonst laege Apricot auf Apricot. */
body.ov-flut .knopfk,
body.ov-flut .knopfg {
  --rahmen: var(--apri);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border: 0;
  border-radius: 10px;
  background: var(--apri);
  color: var(--lila);
  font: 800 15px/1 var(--anzeige);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 7px 7px 0 -2.5px var(--hinter, var(--lila)), 7px 7px 0 0 var(--rahmen);
  transition: transform 0.25s var(--weich), box-shadow 0.25s var(--weich), background-color 0.2s;
}
body.ov-flut .knopfg { padding: 18px 30px; font-size: 18px; }
body.ov-flut .knopfk:hover, body.ov-flut .knopfg:hover,
body.ov-flut .knopfk[aria-expanded="true"] {
  transform: translate(2px, 2px);
  box-shadow: 5px 5px 0 -2.5px var(--hinter, var(--lila)), 5px 5px 0 0 var(--rahmen);
  background: var(--schaum);
}
body.ov-flut .knopfk:active,
body.ov-flut .knopfg:active {
  transform: translate(7px, 7px);
  box-shadow: 0 0 0 -2.5px var(--hinter, var(--lila)), 0 0 0 0 var(--rahmen);
  
}
body.ov-flut .knopfk:active, body.ov-flut .knopfg:active { transform: translate(7px, 7px) scale(0.98); }
body.ov-flut .knopfk svg:not(.knopf__pfeil) { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
body.ov-flut .knopfk:hover svg:not(.knopf__pfeil) { transform: rotate(-10deg) scale(1.12); }
body.ov-flut .knopf__pfeil { transition: transform 0.3s var(--weich); }
body.ov-flut .knopfk[aria-expanded="true"] .knopf__pfeil { transform: rotate(180deg); }
/* Auf hellem Grund: Knopf Lila, Rahmen Lila, Schrift Apricot */
body.ov-flut .auf-apri .knopfg,
body.ov-flut .auf-apri .knopfk {
  --hinter: var(--apri);
  --rahmen: var(--lila);
  background: var(--lila);
  color: var(--apri);
}
body.ov-flut .auf-apri .knopfg:hover,
body.ov-flut .auf-apri .knopfk:hover { background: var(--band); }

/* ---------- Kopfleiste ----------
   Gerade, in --band. Taucht beim Runterscrollen weg und kommt beim
   Hochscrollen zurueck (flut.js); bleibt, solange das Menue offen ist. */
body.ov-flut .kopf {
  --hinter: var(--band);
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) var(--rand) 18px;
  background: var(--band);
  color: var(--apri);
  box-shadow: 0 6px 24px rgba(40, 20, 50, 0.25);
  transition: transform 0.45s var(--weich);
}
body.ov-flut .kopf.weg { transform: translateY(-110%); }
body.ov-flut .kopf:focus-within { transform: none; }
/* Eingeloggt liegt die Admin-Leiste oben; die Kopfleiste rueckt darunter */
body.admin-bar.ov-flut .kopf { top: var(--wp-admin--admin-bar--height, 32px); }
body.ov-flut .kopf__logo { display: block; width: clamp(112px, 10.5vw, 168px); line-height: 0; color: var(--apri); flex: none; }
body.ov-flut .kopf__logo svg { width: 100%; height: auto; display: block; }
body.ov-flut .kopf__logo:hover svg,
body.ov-flut .fuss__logo:hover svg { animation: flut-wackeln 0.6s var(--weich); }
@keyframes flut-wackeln {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-6deg) scale(1.04); }
  60% { transform: rotate(4deg); }
}
body.ov-flut .kopf__nav { display: flex; align-items: center; gap: 16px; }
body.ov-flut .knopfk--korb { position: relative; }
body.ov-flut .kopf .cart-count {
  position: absolute;
  top: -9px;
  right: -9px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 11px;
  background: var(--schaum);
  color: var(--lila);
  box-shadow: 0 0 0 2px var(--band);
  font: 800 12px/22px var(--anzeige);
  text-align: center;
}
body.ov-flut .kopf .cart-count[hidden] { display: none; }

/* Leistungs-Menue: klappt unter dem Knopf auf, die Eintraege fallen
   nacheinander hinein. */
body.ov-flut .menue { position: relative; }
body.ov-flut .menue__liste {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: min(420px, 90vw);
  margin: 0;
  padding: 10px;
  list-style: none;
  background: var(--band);
  border-radius: 14px;
  box-shadow: inset 0 0 0 2px var(--apri), 6px 6px 0 var(--apri), 0 24px 60px rgba(20, 8, 28, 0.45);
  transform-origin: 85% 0;
  animation: flut-menue-auf 0.35s var(--weich);
}
body.ov-flut .menue__liste[hidden] { display: none; }
body.ov-flut .menue__liste li { margin: 0; animation: flut-menue-eintrag 0.4s var(--weich) both; }
body.ov-flut .menue__liste li:nth-child(2) { animation-delay: 0.04s; }
body.ov-flut .menue__liste li:nth-child(3) { animation-delay: 0.08s; }
body.ov-flut .menue__liste li:nth-child(4) { animation-delay: 0.12s; }
body.ov-flut .menue__liste li:nth-child(5) { animation-delay: 0.16s; }
body.ov-flut .menue__liste li:nth-child(6) { animation-delay: 0.2s; }
@keyframes flut-menue-auf { from { transform: scale(0.9) translateY(-8px); opacity: 0; } }
@keyframes flut-menue-eintrag { from { transform: translateX(16px); opacity: 0; } }
body.ov-flut .menue__punkt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 10px;
  color: var(--apri);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, transform 0.25s var(--weich);
}
body.ov-flut .menue__punkt:hover,
body.ov-flut .menue__punkt:focus-visible { background: var(--apri); color: var(--band); transform: translateX(4px); outline: none; }
body.ov-flut .menue__ic { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--apri); color: var(--band); display: grid; place-items: center; }
body.ov-flut .menue__punkt:hover .menue__ic,
body.ov-flut .menue__punkt:focus-visible .menue__ic { background: var(--band); color: var(--apri); }
body.ov-flut .menue__punkt b { display: block; font-weight: 800; font-size: 16px; line-height: 1.2; }
body.ov-flut .menue__punkt small { display: block; font-size: 13.5px; line-height: 1.3; }

/* Platz unter der festen Kopfleiste, wo kein Seitenkopf steht */
body.ov-flut .kopf-platz { height: calc(env(safe-area-inset-top, 0px) + var(--kopf-h) + 24px); }

/* Das Umbau-Band des alten Themes liegt unter der festen Leiste */
body.ov-flut .ov-umbau-banner { position: relative; z-index: 5; margin-top: calc(var(--kopf-h) + env(safe-area-inset-top, 0px)); }
body.ov-flut .ov-umbau-banner + .seitenkopf,
body.ov-flut .ov-umbau-banner + .kopf-platz { padding-top: 7vh; height: auto; }

/* ---------- Wellenkante ----------
   Der Grund ist die Farbe darueber, das Wasser (Canvas) die Farbe darunter. */
body.ov-flut .wkante {
  position: relative;
  height: clamp(140px, 22vh, 240px);
  margin-bottom: -1px;
  background: var(--lila);
}
body.ov-flut .wkante--apri { background: var(--apri); }
body.ov-flut .welle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ---------- Seitenkopf der Inhaltsseiten ----------
   Eine Aussage auf Lila. Der Titel ist die Aussage — keine Kennzeichnung
   darueber. */
body.ov-flut .seitenkopf {
  background: var(--lila);
  color: var(--apri);
  padding: calc(env(safe-area-inset-top, 0px) + var(--kopf-h) + 12vh) var(--rand) 2vh;
}
body.ov-flut .seitenkopf__innen { max-width: 1500px; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 5vh; }
body.ov-flut .seitenkopf__titel {
  font-size: clamp(48px, 8vw, 150px);
  line-height: 0.95;
  text-transform: uppercase;
  hyphens: manual;
  max-width: 100%;
  will-change: transform;
}
body.ov-flut .seitenkopf__lead {
  margin: 0;
  max-width: 44ch;
  color: var(--schaum);
  font-weight: 600;
  font-size: clamp(19px, 1.65vw, 28px);
  line-height: 1.4;
}
body.ov-flut .seitenkopf__zurueck { font-size: 16px; margin-top: 2vh; }

/* ---------- Schlusszeile (Ebbe) ----------
   Die Zeile rutscht beim Scrollen auf die Wasserlinie: oben Lila auf
   Apricot, unten Apricot auf Lila. */
body.ov-flut .ende {
  position: relative;
  height: 64vh;
  height: 64svh;
  overflow: hidden;
  background: var(--apri);
}
body.ov-flut .ende__schicht { position: absolute; inset: 0; display: grid; place-items: center; padding-inline: var(--rand); }
body.ov-flut .ende__schicht--oben { color: var(--lila); }
body.ov-flut .ende__schicht--unten { color: var(--apri); clip-path: inset(58% 0 0 0); }
body.ov-flut .ende .gross {
  font-size: clamp(38px, 6vw, 128px);
  font-variation-settings: "wdth" 104, "opsz" 144;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  transform: translateY(var(--ty, 0px));
}

/* ---------- Fuss ---------- */
body.ov-flut .fuss__kurve {
  display: block;
  width: 100%;
  height: clamp(48px, 5.6vw, 90px);
  margin-bottom: -1px;
  background: var(--lila);
  overflow: visible;
}
/* Im Kaufweg fehlt die Schlusszeile — der Schwung sitzt dann auf Apricot */
body.ov-flut--ruhig .fuss__kurve { background: var(--apri); }
body.ov-flut .kurve__flaeche { fill: var(--band); }
body.ov-flut .kurve__linie { fill: none; stroke: var(--apri); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
body.ov-flut--ruhig .kurve__linie { stroke: var(--lila); }
body.ov-flut .kurve__linie--2 { opacity: 0.45; }
body.ov-flut .fuss {
  --hinter: var(--band);
  background: var(--band);
  color: var(--apri);
  padding: 20px var(--rand) calc(env(safe-area-inset-bottom, 0px) + 22px);
  font-size: 15px;
  margin: 0;
}
body.ov-flut .fuss a { text-decoration: none; color: var(--apri); }
body.ov-flut .fuss__oben {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  gap: 40px clamp(24px, 4vw, 72px);
  align-items: start;
  padding: 24px 0 44px;
}
body.ov-flut .fuss__marke { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
body.ov-flut .fuss__logo { width: 150px; line-height: 0; }
body.ov-flut .fuss__logo svg { width: 100%; height: auto; display: block; }
body.ov-flut .fuss__satz { margin: 0; max-width: 30ch; color: var(--schaum); font-size: 15px; line-height: 1.55; }
body.ov-flut .fuss__titel { margin: 0 0 16px; color: var(--apri); }
body.ov-flut .fuss__nav { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
body.ov-flut .fuss__nav a { background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1.5px no-repeat; transition: background-size 0.3s var(--weich); padding-bottom: 2px; }
body.ov-flut .fuss__nav a:hover { background-size: 100% 1.5px; }
body.ov-flut .fuss__kontakt { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
body.ov-flut .fuss__social { display: flex; flex-wrap: wrap; gap: 8px; }
body.ov-flut .fuss .fuss__sozial {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; background: var(--apri); color: var(--band);
  transition: translate 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), rotate 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.ov-flut .fuss .fuss__sozial:hover { translate: 0 -6px; rotate: -8deg; }
/* Die Signatur schreibt sich, sobald der Fuss ins Bild kommt */
body.ov-flut .signatur {
  font-family: "Caveat Signatur", "Segoe Script", cursive;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.1;
  clip-path: inset(-0.3em 100% -0.4em -0.3em);
  transition: clip-path 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
}
body.ov-flut .fuss.da .signatur,
body.ov-flut:not(.flut-js) .signatur { clip-path: inset(-0.3em -0.4em -0.4em -0.3em); }
body.ov-flut .fuss__unten {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 20px 0 8px;
  border-top: 1px solid rgba(255, 187, 138, 0.25);
  font-size: 13px;
}
body.ov-flut .zahlung { display: flex; flex-wrap: wrap; gap: 6px; }
body.ov-flut .zahlung img { width: 40px; height: 26px; padding: 3px 5px; box-sizing: border-box; border-radius: 5px; background: #fff; object-fit: contain; }
body.ov-flut .stolz { justify-self: center; display: inline-flex; align-items: center; gap: 12px; font-weight: 700; }
body.ov-flut .stolz__flagge {
  width: 40px; height: 24px; border-radius: 4px; flex-shrink: 0;
  background-image: linear-gradient(180deg, #e40303 0 16.66%, #ff8c00 16.66% 33.33%, #ffed00 33.33% 50%, #008026 50% 66.66%, #004dff 66.66% 83.33%, #750787 83.33% 100%);
  box-shadow: 0 0 0 1px var(--apri);
}
body.ov-flut .fuss__copy { justify-self: end; margin: 0; }

/* Hinweis auf den Vorschlag, unten links */
body.ov-flut .flut-hinweis {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 1001;
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--band);
  color: var(--apri);
  box-shadow: 0 0 0 1.5px var(--apri);
  font: 700 12px/1.2 var(--anzeige);
}
body.ov-flut .flut-hinweis a { color: var(--schaum); }

/* ===================================================================
   Startseite
   =================================================================== */
body.ov-flut .start { display: block; margin: 0; padding: 0; }

/* ---------- Die Flut ----------
   Der Abschnitt ist dreimal so hoch wie das Fenster; die Buehne klebt,
   und der Scrollweg hebt den Wasserstand, bis alles unter Wasser steht. */
body.ov-flut .flut { position: relative; height: 300vh; background: var(--lila); }
body.ov-flut .flut__buehne {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--apri);
}
body.ov-flut .flut__schicht { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 40px; }
body.ov-flut .flut__schicht--oben { color: var(--lila); }
body.ov-flut .flut__schicht--unten { color: var(--apri); clip-path: inset(64% 0 0 0); }
body.ov-flut .flut .gross {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: min(16.8vw, 24.8vh);
  line-height: 0.84;
  transform-origin: 50% 60%;
}
body.ov-flut .flut .gross span { display: block; }
body.ov-flut .flut__wasser { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* ---------- Was ist OpenVuture ----------
   Der Text folgt Vutes Umriss (shape-outside aus dem Alphakanal). Oben die
   Aussage, riesig und von Hand umbrochen; der Text fuellt sich beim Lesen. */
body.ov-flut .was {
  --hinter: var(--lila);
  position: relative;
  z-index: 2;
  background: var(--lila);
  color: var(--apri);
  padding: 10vh var(--rand) 12vh;
}
body.ov-flut .was__fluss { --F: clamp(48px, 7.2vw, 150px); --V: min(90vh, 880px); display: flow-root; max-width: 1500px; margin: 4vh auto 0; }
body.ov-flut .was__vute {
  float: left;
  height: var(--V);
  width: auto;
  max-width: none;
  margin-left: -3vw;
  margin-top: calc(-3 * 1.02 * var(--F) - 4vh);
  shape-outside: url("../images/vute_left-hand_waving-960.webp");
  shape-image-threshold: 0.3;
  shape-margin: 30px;
  will-change: transform;
}
body.ov-flut .was__fang {
  margin: 2vh 0 4vh calc(var(--V) * 0.72 - 3vw);
  color: var(--apri);
  font-family: var(--anzeige);
  font-weight: 900;
  font-variation-settings: "wdth" 112, "opsz" 144;
  font-size: var(--F);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
body.ov-flut .was__fang span { display: block; will-change: transform; }
body.ov-flut .was__fang span:nth-child(2) { padding-left: 0.7em; }
body.ov-flut .was__fang span:nth-child(3) { padding-left: 1.4em; }
body.ov-flut .was__text {
  margin: 0 8vw 0 0;
  color: var(--schaum);
  font-weight: 600;
  font-size: clamp(19px, 1.65vw, 31px);
  line-height: 1.4;
  letter-spacing: -0.005em;
}
body.ov-flut .was__text strong { font-weight: inherit; }
body.ov-flut [data-fuell] .w { opacity: calc(0.28 + var(--f, 1) * 0.72); }
body.ov-flut .was__fluss .knopfg { margin-top: 30px; will-change: transform; }

/* ---------- Leistungen: ein Kartendeck, das geworfen wird ----------
   Die Buehne klebt; man sieht immer genau eine Karte. Ohne Skript und bei
   reduzierter Bewegung: eine normale Liste. */
body.ov-flut .leist { position: relative; background: var(--apri); }
body.ov-flut .leist__buehne { padding: 8vh var(--rand); display: flex; flex-direction: column; gap: 10vh; }
body.ov-flut .leist__kopf .gross { font-size: clamp(48px, 7vw, 132px); }
body.ov-flut .leist__stapel { position: relative; display: flex; flex-direction: column; gap: 4vh; }
body.ov-flut .leist__hinter,
body.ov-flut .leist__zahl { display: none; }
body.ov-flut.js-karten .leist__hinter {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  translate: 0 -30%;
  z-index: 0;
  display: flex;
  white-space: nowrap;
  pointer-events: none;
  font-weight: 900;
  font-variation-settings: "wdth" 125, "opsz" 144;
  font-size: clamp(90px, 15vw, 280px);
  line-height: 1;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px rgba(97, 63, 117, 0.35);
  will-change: transform;
}
body.ov-flut .leist__hinter span { padding-right: 0.5em; }
body.ov-flut.js-karten .leist__zahl {
  display: block;
  position: absolute;
  right: var(--rand);
  top: 110px;
  z-index: 0;
  margin: 0;
  font-weight: 900;
  font-variation-settings: "wdth" 125, "opsz" 144;
  font-size: clamp(80px, 11vw, 200px);
  line-height: 1;
  color: var(--lila);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  height: 1em;
}
body.ov-flut .leist__zahl span { display: block; will-change: transform; }
body.ov-flut.js-karten .leist__buehne {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  box-sizing: border-box;
  padding-top: 120px;
  padding-bottom: 6vh;
  overflow: hidden;
}
body.ov-flut.js-karten .leist__stapel { flex: 1; display: block; z-index: 1; }
body.ov-flut.js-karten .lkarte { position: absolute; left: 0; right: 0; top: 0; margin-inline: auto; }
body.ov-flut .lkarte {
  position: relative;
  width: min(1180px, 100%);
  height: min(54vh, 520px);
  box-sizing: border-box;
  padding: clamp(26px, 3.6vw, 60px);
  border-radius: 48px 20px 44px 22px;
  background: var(--lila);
  color: var(--apri);
  text-decoration: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(24px, 4vw, 72px);
  row-gap: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(97, 63, 117, 0.4);
  transform-origin: 50% 120%;
  will-change: transform;
  z-index: 1;
}
body.ov-flut .lkarte:nth-child(even) { border-radius: 20px 48px 22px 44px; }
body.ov-flut .lkarte__nr { grid-column: 1; grid-row: 1; margin: 0; font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: 0.2em; }
body.ov-flut .lkarte__ic {
  grid-column: 1; grid-row: 2;
  align-self: end;
  width: clamp(96px, 10vw, 150px);
  height: clamp(96px, 10vw, 150px);
  border-radius: 50%;
  background: var(--apri);
  color: var(--lila);
  display: grid;
  place-items: center;
  transform: translateX(calc((1 - var(--e, 1)) * -180px)) rotate(calc((1 - var(--e, 1)) * -200deg)) scale(calc(0.4 + var(--e, 1) * 0.6));
}
body.ov-flut .lkarte__ic svg { width: 46%; height: 46%; }
body.ov-flut .lkarte h3 {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: end;
  margin: 0;
  color: var(--apri);
  font-family: var(--anzeige);
  font-weight: 900;
  font-variation-settings: "wdth" 112, "opsz" 144;
  font-size: clamp(36px, 4.4vw, 80px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  hyphens: auto;
  transform: translate(calc((1 - var(--e, 1)) * 260px), calc((1 - var(--e, 1)) * 40px)) skewX(calc((1 - var(--e, 1)) * -12deg));
  opacity: calc(0.1 + var(--e, 1) * 0.9);
}
body.ov-flut .lkarte > p:not(.lkarte__nr) {
  grid-column: 2; grid-row: 3;
  margin: 0;
  color: var(--schaum);
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.5;
  max-width: 44ch;
  transform: translateX(calc((1 - var(--e2, 1)) * 160px));
  opacity: var(--e2, 1);
}
body.ov-flut .lkarte__mehr { grid-column: 1; grid-row: 3; align-self: end; font-weight: 800; font-size: 18px; opacity: var(--e2, 1); transition: translate 0.35s var(--weich); }
body.ov-flut .lkarte:hover .lkarte__mehr { translate: 10px 0; }
body.ov-flut .lkarte__linien {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 90px;
  opacity: 0.4;
  pointer-events: none;
}
body.ov-flut .lkarte__linien path { fill: none; stroke: var(--apri); stroke-width: 1.4; vector-effect: non-scaling-stroke; animation: flut-linien 5s linear infinite; }
body.ov-flut .lkarte__linien path:nth-child(2) { animation-duration: 7s; opacity: 0.7; }
body.ov-flut .lkarte__linien path:nth-child(3) { animation-duration: 4s; opacity: 0.45; }
@keyframes flut-linien { to { transform: translateX(-200px); } }

/* ---------- Laufband ---------- */
body.ov-flut .band {
  background: var(--lila);
  color: var(--apri);
  padding: 7vh 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1vh;
}
body.ov-flut .band__zeile {
  display: flex;
  white-space: nowrap;
  font-weight: 900;
  font-variation-settings: "wdth" 125, "opsz" 144;
  font-size: clamp(56px, 9vw, 150px);
  line-height: 1;
  letter-spacing: -0.02em;
  will-change: transform;
}
body.ov-flut .band__zeile span { padding-right: 0.4em; }
body.ov-flut .band__zeile--hohl { color: transparent; -webkit-text-stroke: 2px var(--apri); }

/* ---------- Selbst gebaut ---------- */
body.ov-flut .werk {
  --hinter: var(--lila);
  background: var(--lila);
  color: var(--apri);
  padding: 16vh var(--rand) 22vh;
}
body.ov-flut .werk__innen { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 14vh; }
body.ov-flut .werk .gross { font-size: clamp(64px, 13vw, 240px); display: flex; flex-direction: column; gap: 0.12em; line-height: 0.9; text-transform: uppercase; }
body.ov-flut .werk .gross span { display: block; will-change: transform; }
body.ov-flut .werk .gross span:last-child { align-self: flex-end; }
body.ov-flut .werk__reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 64px clamp(40px, 7vw, 140px); }
body.ov-flut .werk__teil { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; margin: 0; }
body.ov-flut .werk__ic { width: 64px; height: 64px; border-radius: 50%; background: var(--apri); color: var(--lila); display: grid; place-items: center; }
body.ov-flut .werk__teil h3 {
  margin: 0;
  color: var(--apri);
  font-family: var(--anzeige);
  font-weight: 900;
  font-variation-settings: "wdth" 110, "opsz" 72;
  font-size: clamp(28px, 2.8vw, 48px);
  line-height: 1.02;
  text-transform: uppercase;
  hyphens: auto;
}
body.ov-flut .werk__teil .text { color: var(--schaum); line-height: 1.75; }
body.ov-flut .status { margin: 0; display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
body.ov-flut .status i { width: 10px; height: 10px; border-radius: 50%; background: var(--apri); animation: flut-puls 1.8s ease-in-out infinite; flex: none; }
@keyframes flut-puls { 50% { transform: scale(1.5); opacity: 0.5; } }
body.ov-flut .nl-feld { display: flex; flex-wrap: wrap; gap: 18px; width: 100%; max-width: 560px; margin-top: 8px; }
body.ov-flut .nl-feld input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 16px 20px;
  border: 2px solid var(--apri);
  border-radius: 10px;
  background: transparent;
  color: var(--apri);
  font: 500 18px var(--anzeige);
}
body.ov-flut .nl-feld input::placeholder { color: rgba(255, 227, 204, 0.6); }
body.ov-flut .nl-hinweis { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--schaum); }

/* ---------- Stimmen ----------
   Die Note ist der Faenger, das Zitat steht ruhig daneben. Keine Kaesten. */
body.ov-flut .urteil { background: var(--apri); color: var(--lila); padding: 4vh var(--rand) 14vh; }
body.ov-flut .urteil__innen { max-width: 1500px; margin: 0 auto; display: flex; flex-direction: column; gap: 6vh; }
body.ov-flut .urteil__titel { font-size: clamp(44px, 6vw, 116px); }
body.ov-flut .urteil__titel span { display: block; will-change: transform; }
body.ov-flut .urteil__linie { display: block; height: 3px; background: var(--lila); transform-origin: 0 50%; }
body.ov-flut .urteil__reihe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
  gap: clamp(28px, 5vw, 96px);
  align-items: start;
  padding-top: 1vh;
}
body.ov-flut .note { margin: 0; font-weight: 900; font-variation-settings: "wdth" 118, "opsz" 144; font-size: clamp(110px, 13vw, 250px); line-height: 0.82; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
body.ov-flut .urteil__sterne { margin: 18px 0 8px; font-size: clamp(24px, 2.2vw, 36px); letter-spacing: 0.14em; }
body.ov-flut .urteil__sterne span { display: inline-block; }
body.ov-flut .urteil__sterne .leer { opacity: 0.3; }
body.ov-flut .stimme { margin: 0; display: flex; flex-direction: column; gap: 22px; }
body.ov-flut .stimme blockquote { margin: 0; padding: 0; border: 0; }
body.ov-flut .stimme blockquote p {
  margin: 0;
  font-weight: 700;
  font-variation-settings: "wdth" 102, "opsz" 72;
  font-size: clamp(26px, 2.8vw, 50px);
  line-height: 1.16;
  letter-spacing: -0.01em;
}
body.ov-flut .stimme figcaption { font-family: var(--mono); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; }
body.ov-flut .urteil__links { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 12px; }

/* ===================================================================
   Inhaltsseiten
   ===================================================================
   Der Inhalt kommt aus WordPress und steht auf Apricot, eine ruhige
   Lesespalte. Ueberschriften sind die Titel-Ebene, Text eine Farbe. */
body.ov-flut #main.main-content {
  margin: 0;
  padding: 4vh var(--rand) 8vh;
  max-width: none;
  background: var(--apri);
  color: var(--lila);
}
body.ov-flut #main.main-content > .content-block {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--lila);
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.7;
}
/* Nur der Fliesstext aus dem Editor: direkte Kinder der Inhaltsspalten.
   Karten, Formulare und Shop-Bausteine darin bringen ihre eigenen Regeln mit. */
body.ov-flut :is(.content-block, .leistung-content, .vute-content, .ov-error) > p,
body.ov-flut :is(.content-block, .leistung-content, .vute-content) > :is(ul, ol) > li { color: var(--lila); max-width: 68ch; }
body.ov-flut :is(.content-block, .leistung-content, .vute-content) > :is(h2, h3, h4),
body.ov-flut .ov-error__title {
  color: var(--lila);
  font-family: var(--anzeige);
  font-weight: 900;
  font-variation-settings: "wdth" 108, "opsz" 72;
  letter-spacing: -0.015em;
  line-height: 1.02;
  text-transform: uppercase;
  margin: 2.2em 0 0.7em;
}
body.ov-flut :is(.content-block, .leistung-content, .vute-content) > h2 { font-size: clamp(30px, 3.4vw, 60px); }
body.ov-flut :is(.content-block, .leistung-content, .vute-content) > h3 { font-size: clamp(24px, 2.2vw, 36px); }
body.ov-flut :is(.content-block, .leistung-content, .vute-content) > h4 { font-size: 20px; }
body.ov-flut :is(.content-block, .leistung-content, .vute-content) > :is(p, ul, ol) a:not([class]) { color: var(--lila); text-decoration-thickness: 2px; text-underline-offset: 3px; }
body.ov-flut :is(.content-block, .leistung-content, .vute-content) > ul.wp-block-list { margin: 0; padding-left: 1.2em; }
body.ov-flut :is(.content-block, .leistung-content, .vute-content) > ul.wp-block-list + ul.wp-block-list { margin-top: 0.3em; }
body.ov-flut :is(.content-block, .leistung-content, .vute-content) > :is(ul, ol) > li::marker { color: var(--lila); }
body.ov-flut :is(.content-block, .leistung-content, .vute-content) > hr { border: 0; height: 3px; background: var(--lila); margin: 8vh 0; max-width: 68ch; }

/* Suchtreffer und Beitragslisten (index.php): Titel-Ebene, Linie dazwischen */
body.ov-flut .post-entry { max-width: 68ch; padding: 0 0 6vh; margin: 0 0 6vh; border-bottom: 3px solid var(--lila); }
body.ov-flut .post-entry__title { margin: 0 0 8px; font-family: var(--anzeige); font-weight: 900; font-variation-settings: "wdth" 110, "opsz" 72; font-size: clamp(28px, 2.8vw, 48px); line-height: 1.02; text-transform: uppercase; }
body.ov-flut .post-entry__title a { color: var(--lila); text-decoration: none; }
body.ov-flut .post-entry .post-date { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; color: var(--lila); }
body.ov-flut .post-entry__excerpt p { color: var(--lila); }

/* Die alten Koepfe in den Vorlagen stehen jetzt oben im Seitenkopf */
body.ov-flut .leistung-head,
body.ov-flut .content-block > h1:first-child { display: none; }

/* ---------- Leistungsseite: gegliederter Inhalt ----------
   bausteine.php formt den Editor-Text um: Einleitung, Stichwort-Karten,
   Zwischenueberschrift, nummerierte Liste. */
body.ov-flut .leistung-content { max-width: none; counter-reset: punkt; }
/* Das alte Seiten-CSS haelt oben viel Abstand fuer seinen Plattenkopf frei */
body.ov-flut.ov-baender--seiten #main.main-content { padding-top: 4vh !important; }
body.ov-flut .leistung-content > p { max-width: 68ch; }
body.ov-flut .leistung-content > p.leistung-lead {
  max-width: 34ch;
  margin: 0 0 6vh;
  color: var(--lila);
  font-weight: 600;
  font-size: clamp(22px, 2.1vw, 36px);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
body.ov-flut .merkmale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(22px, 2.6vw, 44px);
  margin: 10vh 0;
  counter-reset: merkmal;
}
body.ov-flut .merkmal {
  counter-increment: merkmal;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(26px, 2.8vw, 44px);
  border-radius: 48px 20px 44px 22px;
  background: var(--lila);
  color: var(--apri);
  box-shadow: 0 30px 70px rgba(97, 63, 117, 0.35);
}
body.ov-flut .merkmal:nth-child(even) { border-radius: 20px 48px 22px 44px; }
body.ov-flut .merkmal::before {
  content: counter(merkmal, decimal-leading-zero);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2em;
}
body.ov-flut #main .merkmal .merkmal__titel {
  margin: 0;
  color: var(--apri);
  font-family: var(--anzeige);
  font-weight: 900;
  font-variation-settings: "wdth" 112, "opsz" 72;
  font-size: clamp(24px, 2.2vw, 36px);
  line-height: 1.02;
  text-transform: uppercase;
  hyphens: auto;
}
body.ov-flut .merkmal p { margin: 0; color: var(--schaum); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.6; }
body.ov-flut .merkmal p strong { color: var(--apri); }
body.ov-flut .leistung-content > h2.leistung-abschnitt {
  margin: 12vh 0 6vh;
  color: var(--lila);
  font-family: var(--anzeige);
  font-weight: 900;
  font-variation-settings: "wdth" 118, "opsz" 144;
  font-size: clamp(44px, 6.4vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
body.ov-flut .leistung-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 0 clamp(32px, 5vw, 96px);
  counter-reset: punkt;
  width: 100%;
  max-width: none !important;
}
body.ov-flut .leistung-liste li {
  counter-increment: punkt;
  display: grid;
  grid-template-columns: 3.2em 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 3px solid var(--lila);
  color: var(--lila);
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 600;
  line-height: 1.45;
  max-width: none !important;
}
body.ov-flut .leistung-liste li::before {
  content: counter(punkt, decimal-leading-zero);
  font-family: var(--anzeige);
  font-weight: 900;
  font-variation-settings: "wdth" 118, "opsz" 72;
  font-size: 1.4em;
  line-height: 1;
}

/* ---------- Leistungsseite: Anfrage als Karte ----------
   Links Titel, Einleitung und Vute, rechts das Formular. */
body.ov-flut .leistung-anfrage { margin-top: 14vh; }
body.ov-flut .leistung-anfrage__card {
  --hinter: var(--lila);
  position: relative;
  padding: clamp(28px, 4vw, 64px);
  border: 0;
  border-radius: 48px 20px 44px 22px;
  background: var(--lila);
  color: var(--apri);
  box-shadow: 0 30px 70px rgba(97, 63, 117, 0.4);
}
body.ov-flut #main .leistung-anfrage__card h2 {
  text-transform: uppercase;
  margin: 0 0 18px;
  color: var(--apri);
  font-size: clamp(36px, 4.4vw, 80px);
  font-variation-settings: "wdth" 112, "opsz" 144;
  max-width: 12ch;
}
body.ov-flut #main .leistung-anfrage__card p,
body.ov-flut #main .leistung-anfrage__card li { color: var(--schaum); }
body.ov-flut .leistung-anfrage__card {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  grid-template-areas: "titel form" "intro form" "vute form";
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
body.ov-flut .leistung-anfrage__card > h2 { grid-area: titel; }
body.ov-flut .leistung-anfrage__card > .leistung-anfrage__intro { grid-area: intro; }
body.ov-flut .leistung-anfrage__card > :is(form, .ov-anfrage-success, .leistung-anfrage__hint, .leistung-anfrage__admin, .wpforms-container) { grid-area: form; min-width: 0; }
/* Vute steht unten in der Karte, auf ihrem Boden — er laeuft nicht mit */
body.ov-flut .leistung-anfrage__mascot {
  grid-area: vute;
  position: static;
  align-self: end;
  width: min(100%, 340px);
  margin: 6vh 0 calc(-1 * clamp(28px, 4vw, 64px));
  pointer-events: none;
}
body.ov-flut .leistung-anfrage__mascot img { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 30px rgba(20, 8, 28, 0.35)); }
body.ov-flut .leistung-anfrage__intro { max-width: 36ch; margin: 0; font-size: clamp(17px, 1.35vw, 21px); }

/* Formularfelder auf Lila: hell gefuellt, lila Schrift — keine Farbe auf sich
   selbst. Auswahlfelder sind umrandet, das gewaehlte ist Apricot gefuellt. */
body.ov-flut .ov-anfrage-form .ov-form-label,
body.ov-flut .ov-anfrage-form legend { color: var(--apri); font-weight: 700; font-size: 15px; }
body.ov-flut .ov-anfrage-form input[type="text"],
body.ov-flut .ov-anfrage-form input[type="email"],
body.ov-flut .ov-anfrage-form input[type="tel"],
body.ov-flut .ov-anfrage-form input[type="number"],
body.ov-flut .ov-anfrage-form select,
body.ov-flut .ov-anfrage-form textarea {
  border: 2px solid var(--schaum);
  border-radius: 10px;
  background: var(--schaum);
  color: var(--lila);
  font: 500 17px/1.4 var(--anzeige);
  padding: 13px 16px;
  box-shadow: none;
}
body.ov-flut .ov-anfrage-form .ov-form-option { border-radius: 10px; }
body.ov-flut .ov-anfrage-form select option { color: var(--lila); background: var(--schaum); }
body.ov-flut .ov-anfrage-form input::placeholder,
body.ov-flut .ov-anfrage-form textarea::placeholder { color: rgba(97, 63, 117, 0.5); }
body.ov-flut .ov-anfrage-form input:focus,
body.ov-flut .ov-anfrage-form select:focus,
body.ov-flut .ov-anfrage-form textarea:focus { outline: 3px solid var(--apri); outline-offset: 2px; border-color: var(--apri); }
/* Auswahl: umrandet, gewaehlt gefuellt */
body.ov-flut .ov-anfrage-form .ov-form-option,
body.ov-flut .ov-bewertung-form .ov-form-option {
  background: transparent !important;
  border: 2px solid rgba(255, 187, 138, 0.6) !important;
  color: var(--apri) !important;
  transition: background-color 0.2s, border-color 0.2s;
}
body.ov-flut :is(.ov-anfrage-form, .ov-bewertung-form) .ov-form-option .ov-form-option-label { color: var(--apri) !important; }
body.ov-flut :is(.ov-anfrage-form, .ov-bewertung-form) .ov-form-option:hover { border-color: var(--apri) !important; }
body.ov-flut :is(.ov-anfrage-form, .ov-bewertung-form) .ov-form-option:has(input:checked) { background: var(--apri) !important; border-color: var(--apri) !important; }
body.ov-flut :is(.ov-anfrage-form, .ov-bewertung-form) .ov-form-option:has(input:checked) .ov-form-option-label { color: var(--lila) !important; }
body.ov-flut :is(.ov-anfrage-form, .ov-bewertung-form) .ov-form-option input { accent-color: var(--lila); }

/* Die vorhandenen Knoepfe auf die eine Knopf-Form bringen */
body.ov-flut .ov-form-submit,
body.ov-flut .nl-modal__submit,
body.ov-flut .nl-modal__btn--primary,
body.ov-flut #main .knopf,
body.ov-flut #main .nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 16px 26px;
  border: 0;
  border-radius: 10px;
  background: var(--apri);
  color: var(--lila);
  font: 800 17px/1 var(--anzeige);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 7px 7px 0 -2.5px var(--hinter, var(--lila)), 7px 7px 0 0 var(--apri);
  transition: transform 0.25s var(--weich), box-shadow 0.25s var(--weich), background-color 0.2s;
}
body.ov-flut .ov-form-submit:hover,
body.ov-flut .nl-modal__submit:hover,
body.ov-flut .nl-modal__btn--primary:hover,
body.ov-flut #main .knopf:hover,
body.ov-flut #main .nav-btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 5px 5px 0 -2.5px var(--hinter, var(--lila)), 5px 5px 0 0 var(--apri);
  background: var(--schaum);
}
body.ov-flut .ov-form-submit:active,
body.ov-flut .nl-modal__submit:active,
body.ov-flut .nl-modal__btn--primary:active,
body.ov-flut #main .knopf:active,
body.ov-flut #main .nav-btn:active {
  transform: translate(7px, 7px);
  box-shadow: 0 0 0 -2.5px var(--hinter, var(--lila)), 0 0 0 0 var(--apri);
  
}
/* Auf dem hellen Inhalt ist der Knopf Lila, sonst laege Apricot auf Apricot */
body.ov-flut #main .content-block > .knopf,
body.ov-flut #main .content-block > .nav-btn,
body.ov-flut #main .content-block > p > .nav-btn,
body.ov-flut #main.main-content > .content-block > .post-entry .nav-btn {
  --hinter: var(--apri);
  background: var(--lila);
  color: var(--apri);
  box-shadow: 7px 7px 0 -2.5px var(--apri), 7px 7px 0 0 var(--lila);
}

/* ---------- Newsletter-Fenster ---------- */
body.ov-flut .nl-modal { z-index: 2000; background: rgba(40, 20, 50, 0.6); backdrop-filter: none; }
body.ov-flut .nl-modal__box {
  --hinter: var(--band);
  background: var(--band);
  color: var(--apri);
  border: 0;
  border-radius: 20px 48px 22px 44px;
  box-shadow: inset 0 0 0 2px var(--apri), 8px 8px 0 var(--apri);
}
body.ov-flut .nl-modal__title { color: var(--apri); font-family: var(--anzeige); font-weight: 900; font-variation-settings: "wdth" 112, "opsz" 72; text-transform: uppercase; }
body.ov-flut .nl-modal__desc,
body.ov-flut .nl-modal__success,
body.ov-flut .nl-modal__already-text { color: var(--schaum); }
body.ov-flut .nl-modal__icon { background: var(--apri); color: var(--band); }
body.ov-flut .nl-modal__close { color: var(--apri); }
body.ov-flut .nl-modal__input { border: 2px solid var(--apri); border-radius: 10px; background: transparent; color: var(--schaum); }

/* ===================================================================
   Shop-Uebersicht
   ===================================================================
   Baender statt Platte: Kennzahlen auf Apricot, die Ware auf Lila, der
   Shoptext auf Apricot, Wellen dazwischen. Die Karten liegen auf Lila und
   sind deshalb Apricot. */
body.ov-flut .seitenkopf__innen--zwei {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, 6vw, 120px);
}
/* Der Shop-Titel ist ein ganzer Satz aus dem Backend, keine Ein-Wort-Aussage */
body.ov-flut .seitenkopf--shop .seitenkopf__titel { font-size: clamp(40px, 5.4vw, 104px); }
body.ov-flut .seitenkopf__text { display: flex; flex-direction: column; align-items: flex-start; gap: 5vh; min-width: 0; flex: 1 1 auto; }
body.ov-flut .seitenkopf__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 36px; --hinter: var(--lila); }
body.ov-flut .schaufenster {
  flex: 0 0 auto;
  width: clamp(240px, 30vw, 460px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--apri);
  text-decoration: none;
  /* kein will-change: flut.js setzt es nur waehrend der Bewegung */
}
body.ov-flut .schaufenster__bild {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 48px 20px 44px 22px;
  background: var(--schaum);
  box-shadow: 10px 10px 0 var(--apri), 0 30px 70px rgba(20, 8, 28, 0.35);
}
body.ov-flut .schaufenster__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--weich); }
body.ov-flut .schaufenster:hover .schaufenster__bild img { transform: scale(1.05); }
body.ov-flut .schaufenster__schild { display: flex; justify-content: space-between; gap: 16px; font-weight: 800; font-size: 17px; }
body.ov-flut .schaufenster__preis,
body.ov-flut .schaufenster__preis * { color: var(--schaum); font-weight: 700; }

body.ov-flut #main.flut-shop { padding: 0; background: var(--apri); }
body.ov-flut .shopband { padding: 6vh var(--rand) 10vh; }
body.ov-flut .shopband--apri { background: var(--apri); color: var(--lila); }
body.ov-flut .shopband--lila { background: var(--lila); color: var(--apri); padding-top: 4vh; padding-bottom: 6vh; --hinter: var(--lila); }
body.ov-flut #main.flut-shop .shopband > .content-block {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  box-shadow: none;
  color: var(--apri);
  background: none;
}

/* Kennzahlen: die Zahl ist die Aussage, darunter ein Satz */
body.ov-flut .shop2-nutzen {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(40px, 6vw, 120px);
  border: 0;
  background: none;
}
body.ov-flut .shop2-kz { position: relative; border: 0; padding: 0; background: none; }
body.ov-flut.ov-shop2 .shop2-kz .shop2-kz__griff,
body.ov-flut.ov-shop2 .shop2-kz:first-child .shop2-kz__griff {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lila);
  text-align: left;
  cursor: pointer;
}
body.ov-flut.ov-shop2 .shop2-kz .shop2-kz__griff > * { grid-column: auto; }
body.ov-flut.ov-shop2 .shop2-kz .shop2-kz__griff:is(:hover, :focus-visible, [aria-expanded="true"]) { background: none; }
body.ov-flut .shop2-kz__zeichen { width: 56px; height: 56px; border-radius: 50%; background: var(--lila); color: var(--apri); display: grid; place-items: center; }
body.ov-flut .shop2-kz__wert {
  font-family: var(--anzeige);
  font-weight: 900;
  font-variation-settings: "wdth" 118, "opsz" 144;
  font-size: clamp(30px, 4.3vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  align-self: stretch;
  max-width: 100%;
  color: var(--lila);
}
body.ov-flut .shop2-kz__text { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: var(--lila); max-width: 30ch; }
body.ov-flut .shop2-kz__mehr {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 15px; color: var(--lila);
  padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
  transition: background-size 0.35s var(--weich);
}
body.ov-flut .shop2-kz__griff:hover .shop2-kz__mehr { background-size: 0% 2px; background-position: 100% 100%; }
body.ov-flut .shop2-kz__erklaerung::before { display: none; }
body.ov-flut .shop2-kz .shop2-kz__erklaerung { display: none; visibility: visible; opacity: 1; transform: none; }
body.ov-flut .shop2-kz:hover .shop2-kz__erklaerung,
body.ov-flut .shop2-kz:focus-within .shop2-kz__erklaerung,
body.ov-flut .shop2-kz .shop2-kz__griff[aria-expanded="true"] + .shop2-kz__erklaerung { display: block; }
body.ov-flut .shop2-kz .shop2-kz__erklaerung {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 20;
  width: min(420px, 100%);
  box-sizing: border-box;
  margin: 0;
  padding: 18px 20px;
  border: 0;
  border-radius: 20px 10px 20px 10px;
  background: var(--lila);
  color: var(--schaum);
  font-size: 16px;
  line-height: 1.55;
  box-shadow: none;
}

/* Leiste: Suche, Anzahl, Filter, Sortierung — auf Lila, also Apricot-Raender */
body.ov-flut .shop-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  position: static;
  margin: 0 0 7vh;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body.ov-flut .shop-controls__left,
body.ov-flut .shop-controls__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
body.ov-flut .shop-search {
  display: flex; align-items: center; gap: 10px;
  min-width: min(360px, 100%);
  padding: 0 14px;
  border: 2px solid var(--apri);
  border-radius: 10px;
  background: transparent;
  color: var(--apri);
}
body.ov-flut .shop-search__input,
body.ov-flut .shop-search__input:focus {
  flex: 1; min-width: 0;
  padding: 14px 0;
  border: 0; outline: 0; box-shadow: none;
  background: transparent;
  color: var(--schaum);
  font: 500 17px var(--anzeige);
}
body.ov-flut .shop-search .shop-search__input { color: var(--schaum); }
body.ov-flut .shop-search .shop-search__input::placeholder { color: rgba(255, 227, 204, 0.6); }
body.ov-flut .shop-search .shop-search__icon,
body.ov-flut .shop-search .shop-search__clear { color: var(--apri); }
body.ov-flut .shop-search:focus-within { outline: 3px solid var(--schaum); outline-offset: 2px; }
body.ov-flut .woocommerce-result-count { margin: 0; color: var(--schaum); font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
body.ov-flut .woocommerce-ordering select.orderby {
  padding: 13px 40px 13px 16px;
  border: 2px solid var(--apri);
  border-radius: 10px;
  background-color: transparent;
  color: var(--apri);
  font: 700 15px var(--anzeige);
}
body.ov-flut .woocommerce-ordering select.orderby option { color: var(--lila); background: var(--schaum); }
body.ov-flut .shop-filter-dropdown {
  border: 0;
  border-radius: 14px;
  background: var(--band);
  box-shadow: inset 0 0 0 2px var(--apri), 6px 6px 0 var(--apri), 0 24px 60px rgba(20, 8, 28, 0.45);
}
body.ov-flut .shop-filter-pill {
  border: 2px solid var(--apri);
  border-radius: 10px;
  background: transparent;
  color: var(--apri);
  font: 700 15px var(--anzeige);
}
body.ov-flut .shop-filter-pill.active,
body.ov-flut .shop-filter-pill:hover { background: var(--apri); color: var(--band); }

/* Kategorie-Kopf: der Name als Titel, keine Linie */
body.ov-flut .shop-cat-section { margin: 0 0 10vh; }
body.ov-flut .shop-cat-header { display: flex; align-items: baseline; gap: 18px; margin: 0 0 5vh; }
body.ov-flut .shop-cat-title {
  color: var(--apri);
  font-family: var(--anzeige);
  font-weight: 900;
  font-variation-settings: "wdth" 118, "opsz" 144;
  font-size: clamp(40px, 5vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
body.ov-flut .shop-cat-line { display: none; }
body.ov-flut .shop-cat-count { background: none; color: var(--schaum); font-family: var(--mono); font-size: 15px; letter-spacing: 0.14em; }

/* Produktkarten: immer die Gegenfarbe des Grunds. Auf Apricot (Warenkorb,
   Kategorien) sind sie Lila, im lila Band der Shop-Uebersicht Apricot. */
body.ov-flut ul.products { --k-grund: var(--lila); --k-schrift: var(--apri); --k-bild: var(--schaum); }
body.ov-flut .shopband--lila ul.products { --k-grund: var(--apri); --k-schrift: var(--lila); }
body.ov-flut ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: clamp(28px, 3vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.ov-flut ul.products::before,
body.ov-flut ul.products::after { display: none; }
body.ov-flut ul.products li.product {
  --hinter: var(--k-grund);
  position: relative;
  display: flex;
  flex-direction: column;
  width: auto !important;
  margin: 0 !important;
  padding: 16px 16px 24px;
  border: 0;
  border-radius: 48px 20px 44px 22px;
  background: var(--k-grund);
  color: var(--k-schrift);
  box-shadow: 0 30px 70px rgba(20, 8, 28, 0.35);
  transition: transform 0.35s var(--weich);
}
body.ov-flut ul.products li.product:nth-child(even) { border-radius: 20px 48px 22px 44px; }
body.ov-flut ul.products li.product:hover { transform: translateY(-6px); }
body.ov-flut ul.products li.product a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1; gap: 14px; color: var(--k-schrift); text-decoration: none; }
body.ov-flut ul.products li.product a img,
body.ov-flut ul.products li.product img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  margin: 0;
  border: 0;
  border-radius: 36px 12px 32px 12px;
  background: var(--k-bild);
  box-shadow: none;
}
body.ov-flut ul.products li.product:nth-child(even) a img,
body.ov-flut ul.products li.product:nth-child(even) img { border-radius: 12px 36px 12px 32px; }
body.ov-flut ul.products li.product .woocommerce-loop-product__title {
  margin: 6px 8px 0;
  padding: 0;
  color: var(--k-schrift);
  font-family: var(--anzeige);
  font-weight: 900;
  font-variation-settings: "wdth" 108, "opsz" 72;
  font-size: clamp(22px, 1.8vw, 30px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  hyphens: auto;
}
body.ov-flut ul.products li.product .price,
body.ov-flut ul.products li.product .price * { margin: 0 8px; color: var(--k-schrift); font-weight: 800; font-size: 19px; }
body.ov-flut ul.products li.product .price * { margin: 0; }
body.ov-flut.ov-shop2 ul.products li.product .button,
body.ov-flut ul.products li.product .button {
  align-self: flex-start;
  width: auto;
  max-width: calc(100% - 23px);
  margin: 18px 8px 7px;
  padding: 13px 20px;
  border: 0;
  border-radius: 10px;
  background: var(--k-schrift);
  color: var(--k-grund);
  font: 800 15px/1 var(--anzeige);
  text-decoration: none;
  box-shadow: 7px 7px 0 -2.5px var(--k-grund), 7px 7px 0 0 var(--k-schrift);
  transition: transform 0.25s var(--weich), box-shadow 0.25s var(--weich), background-color 0.2s;
}
body.ov-flut.ov-shop2 ul.products li.product .button:hover,
body.ov-flut ul.products li.product .button:hover {
  transform: translate(2px, 2px);
  box-shadow: 5px 5px 0 -2.5px var(--k-grund), 5px 5px 0 0 var(--k-schrift);
  background: var(--schaum);
  color: var(--lila);
}
body.ov-flut.ov-shop2 ul.products li.product .button:active,
body.ov-flut ul.products li.product .button:active {
  transform: translate(7px, 7px);
  box-shadow: 0 0 0 -2.5px var(--k-grund), 0 0 0 0 var(--k-schrift);
  
  color: var(--lila);
}
body.ov-flut .shop2-plaketten { position: absolute; top: 28px; left: 28px; z-index: 2; display: flex; gap: 6px; }
body.ov-flut .shop2-plakette {
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--k-schrift);
  color: var(--k-grund);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body.ov-flut ul.products li.product .onsale { background: var(--k-schrift); color: var(--k-grund); border-radius: 6px; }
body.ov-flut.ov-shop2 .shop2-sort .shop2-sort__knopf {
  border: 0;
  border-radius: 10px;
  background: var(--apri);
  color: var(--lila);
  font-family: var(--anzeige);
  font-weight: 800;
  box-shadow: 7px 7px 0 -2.5px var(--lila), 7px 7px 0 0 var(--apri);
  transition: transform 0.25s var(--weich), box-shadow 0.25s var(--weich), background-color 0.2s;
}
body.ov-flut.ov-shop2 .shop2-sort .shop2-sort__knopf:is(:hover, [aria-expanded="true"]) {
  transform: translate(2px, 2px);
  box-shadow: 5px 5px 0 -2.5px var(--lila), 5px 5px 0 0 var(--apri);
  background: var(--schaum);
  color: var(--lila);
}
body.ov-flut.ov-shop2 .shop2-sort .shop2-sort__knopf:active {
  transform: translate(7px, 7px);
  box-shadow: 0 0 0 -2.5px var(--lila), 0 0 0 0 var(--apri);
  
  color: var(--lila);
}
body.ov-flut.ov-shop2 .shop2-sort__liste { border-radius: 14px; }
/* Sortier-Knopf von shop2.js: auf Apricot (Kategorie, Suche) in Lila */
body.ov-flut.ov-shop2 #main.main-content:not(.flut-shop) .shop2-sort .shop2-sort__knopf { background: var(--lila); color: var(--apri); box-shadow: 7px 7px 0 -2.5px var(--apri), 7px 7px 0 0 var(--lila); }
/* Farbpunkte: Ueberfahren zeigt die Farbe im Kartenbild, Klick oeffnet sie */
body.ov-flut .kartenfarben { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 8px 0; }
body.ov-flut .kartenfarbe {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--farbe);
  box-shadow: 0 0 0 2px var(--k-grund), 0 0 0 4px transparent;
  transition: box-shadow 0.2s, transform 0.25s var(--weich);
}
body.ov-flut .kartenfarbe:hover,
body.ov-flut .kartenfarbe:focus-visible,
body.ov-flut .kartenfarbe.ist-da { box-shadow: 0 0 0 2px var(--k-grund), 0 0 0 4px var(--k-schrift); transform: scale(1.1); outline: none; }
body.ov-flut ul.products li.product img { transition: opacity 0.2s; }
/* „Demnaechst mehr": ein leerer Platz mit gestricheltem Rand, kein Kasten */
body.ov-flut ul.products li.shop2-bald {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 32px;
  border: 2px dashed var(--apri);
  border-radius: 48px 20px 44px 22px;
  background: none;
  color: var(--apri);
}
body.ov-flut .shop2-bald__zeichen { width: 56px; height: 56px; border-radius: 50%; background: var(--apri); color: var(--lila); display: grid; place-items: center; }
body.ov-flut .shop2-bald__titel { font-weight: 900; font-variation-settings: "wdth" 110, "opsz" 72; font-size: 28px; line-height: 1.05; text-transform: uppercase; color: var(--apri); }
body.ov-flut .shop2-bald__text { color: var(--schaum); font-size: 16px; line-height: 1.55; }
body.ov-flut .shop-no-results p { color: var(--schaum); }

/* Hohlschrift hinter der Ware: die Kategorienamen laufen beim Scrollen quer */
body.ov-flut .shopband--lila { position: relative; }
body.ov-flut .ware__rahmen { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
body.ov-flut .shopband--lila > .content-block { position: relative; z-index: 1; }
body.ov-flut .ware__hinter {
  position: absolute;
  left: 0;
  top: 38%;
  z-index: 0;
  display: flex;
  white-space: nowrap;
  pointer-events: none;
  font-family: var(--anzeige);
  font-weight: 900;
  font-variation-settings: "wdth" 125, "opsz" 144;
  font-size: clamp(110px, 17vw, 320px);
  line-height: 1;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 187, 138, 0.22);
  will-change: transform;
}
body.ov-flut .ware__hinter span { padding-right: 0.5em; }
body.ov-flut .shop-warum__titel span { display: block; will-change: transform; }
body.ov-flut .shop-warum__titel span:nth-child(even) { padding-left: 0.8em; }
body.ov-flut ul.products li.product { will-change: transform; }

/* Warum: die Aussage, dann zwei Spalten Text */
body.ov-flut .shop-warum { padding-top: 6vh; padding-bottom: 2vh; }
body.ov-flut .shop-warum__titel {
  max-width: 1500px;
  margin: 0 auto 10vh;
  font-size: clamp(56px, 10vw, 190px);
  line-height: 0.9;
  text-transform: uppercase;
}
body.ov-flut .shop-warum__spalten {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px clamp(40px, 7vw, 140px);
}

/* ===================================================================
   Produktseite
   ===================================================================
   Die Karte des Ladens bleibt (Lila auf Apricot), bekommt aber die
   asymmetrischen Ecken, die Anzeige-Schrift und den einen Knopf. */
body.ov-flut.single-product #main.main-content { position: relative; padding-top: 2vh; }
/* Hinter der Produktkarte laeuft das Drahtgitter-Wasser, nur die Linien
   (flut.js legt die Leinwand an). Die Karte liegt darueber. */
/* Das Bild steht oben in seiner Spalte statt mittig in einer hohen Zeile */
body.ov-flut.ov-shop2.single-product div.product .woocommerce-product-gallery { align-self: start; justify-content: flex-start; }
/* Hinter der Karte, im Seitengrund: ein grosses Drahtgitter-Wasser, nur
   Linien (flut.js legt die Leinwand an). Die Karte beginnt tiefer, damit
   das Gitter beim Oeffnen schon ueber ihr zu sehen ist. */
/* Fest im Bildschirm, ueber die ganze Flaeche, in der untersten Ebene: der
   Inhaltsbereich ist durchsichtig, Schlusszeile und Fuss decken es ab. */
body.ov-flut.single-product #main.main-content { position: relative; z-index: auto !important; background: transparent !important; }
/* Der Body-Grund laege sonst ueber der Leinwand; den Apricot-Grund traegt html */
body.ov-flut.single-product { background: transparent; }
body.ov-flut .gitter-grund { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; opacity: 0.75; }
body.ov-flut.single-product #main.main-content > :not(.gitter-grund) { position: relative; z-index: 1; }
body.ov-flut.ov-shop2.single-product div.product {
  --hinter: var(--lila);
  /* Die Karte nimmt den Raum ein; ein Streifen Gitter bleibt darueber und
     an den Seiten sichtbar */
  width: min(1640px, 92vw);
  max-width: none;
  margin: 8vh auto 0;
  grid-template-columns: minmax(0, 1.15fr) minmax(380px, 0.85fr);
  border-radius: 48px 20px 44px 22px;
  background: var(--lila);
  color: var(--apri);
  box-shadow: 0 30px 70px rgba(97, 63, 117, 0.4);
}
body.ov-flut.ov-shop2.single-product div.product::before { border-radius: inherit; }
body.ov-flut.ov-shop2.single-product div.product .product_title {
  color: var(--apri);
  font-family: var(--anzeige);
  font-weight: 900;
  font-variation-settings: "wdth" 112, "opsz" 144;
  font-size: clamp(38px, 4.4vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  hyphens: manual;
}
body.ov-flut.ov-shop2.single-product div.product .shop2-marke { font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--apri); }
body.ov-flut.ov-shop2.single-product div.product p.price,
body.ov-flut.ov-shop2.single-product div.product p.price * {
  color: var(--apri);
  font-family: var(--anzeige);
  font-weight: 900;
  font-variation-settings: "wdth" 110, "opsz" 72;
  font-size: clamp(28px, 2.4vw, 40px);
}
body.ov-flut.ov-shop2.single-product div.product .woocommerce-product-details__short-description,
body.ov-flut.ov-shop2.single-product div.product .woocommerce-product-details__short-description p { color: var(--schaum); font-size: 17px; line-height: 1.6; }
body.ov-flut.ov-shop2.single-product div.product .woocommerce-product-gallery__image img,
body.ov-flut.ov-shop2.single-product div.product .flex-viewport { border-radius: 36px 12px 32px 12px; }
/* Produktfotos ganz zeigen: product.css schneidet sie mit object-fit: cover aufs
   Quadrat zu, bei 4:3-Fotos fiel dabei das Logo in der Ecke weg. Das Quadrat
   bleibt als feste Buehne: mit aspect-ratio: auto nimmt WordPress' Lazy-Load
   (sizes="auto", contain-intrinsic-size 3000x1500) die Hoehe und der Slider wird
   1500px hoch. */
body.ov-flut.ov-shop2.single-product div.product .woocommerce-product-gallery__image img { object-fit: contain; }
/* Der Rand um ein Foto, das nicht quadratisch ist, zeigt das Foto selbst, stark
   weichgezeichnet. Die Bild-URL setzt flut.js als --ov-galerie-blur aus dem
   data-thumb der Folie; isolation haelt ::before unter Bild und Zoom-Ebene. */
body.ov-flut.ov-shop2.single-product div.product .woocommerce-product-gallery__image { position: relative; overflow: hidden; isolation: isolate; }
body.ov-flut.ov-shop2.single-product div.product .woocommerce-product-gallery__image::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ov-galerie-blur, none) center / cover no-repeat;
  filter: blur(28px) saturate(1.1); transform: scale(1.25);
}
body.ov-flut.ov-shop2.single-product div.product .flex-control-thumbs img { border-radius: 10px; }
body.ov-flut.ov-shop2.single-product .shop2-swatch { border-radius: 10px; font-family: var(--anzeige); font-weight: 800; }
body.ov-flut.ov-shop2.single-product .shop2-swatch.shop2-swatch--farbe { border-radius: 50%; }
body.ov-flut.ov-shop2.single-product div.product form.cart .quantity input.qty {
  height: 50px;
  border: 2px solid var(--apri);
  border-radius: 10px;
  background: transparent;
  color: var(--schaum);
  font: 800 17px var(--anzeige);
}
body.ov-flut.ov-shop2.single-product div.product form.cart .single_add_to_cart_button {
  height: auto;
  padding: 16px 28px;
  border: 0;
  border-radius: 10px;
  background: var(--apri);
  color: var(--lila);
  font: 800 17px/1 var(--anzeige);
  box-shadow: 7px 7px 0 -2.5px var(--lila), 7px 7px 0 0 var(--apri);
  transition: transform 0.25s var(--weich), box-shadow 0.25s var(--weich), background-color 0.2s;
}
body.ov-flut.ov-shop2.single-product div.product form.cart .single_add_to_cart_button:hover:not(:disabled):not(.disabled) {
  transform: translate(2px, 2px);
  box-shadow: 5px 5px 0 -2.5px var(--lila), 5px 5px 0 0 var(--apri);
  background: var(--schaum);
}
body.ov-flut.ov-shop2.single-product div.product form.cart .single_add_to_cart_button:active:not(:disabled):not(.disabled) {
  transform: translate(7px, 7px);
  box-shadow: 0 0 0 -2.5px var(--lila), 0 0 0 0 var(--apri);
  
}
body.ov-flut.ov-shop2.single-product div.product .woocommerce-tabs .panel h2 {
  font-family: var(--anzeige);
  font-weight: 900;
  font-variation-settings: "wdth" 110, "opsz" 72;
  text-transform: uppercase;
}

/* ===================================================================
   Kaufweg und Konto: dieselben Knoepfe, Felder und Karten
   =================================================================== */
body.ov-flut .woocommerce .button,
body.ov-flut .woocommerce button.button,
body.ov-flut .woocommerce a.button,
body.ov-flut .woocommerce input.button,
body.ov-flut .woocommerce #respond input#submit,
body.ov-flut .ov-korb-leer__knopf,
body.ov-flut .wc-block-components-button:not(.is-link),
body.ov-flut .ov-btn,
body.ov-flut .content-block .ov-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 24px;
  border: 0;
  border-radius: 10px;
  background: var(--lila);
  color: var(--apri);
  font: 800 16px/1 var(--anzeige);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 7px 7px 0 -2.5px var(--apri), 7px 7px 0 0 var(--lila);
  transition: transform 0.25s var(--weich), box-shadow 0.25s var(--weich), background-color 0.2s;
}
body.ov-flut .woocommerce .button:hover,
body.ov-flut .woocommerce button.button:hover,
body.ov-flut .woocommerce a.button:hover,
body.ov-flut .woocommerce input.button:hover,
body.ov-flut .ov-korb-leer__knopf:hover,
body.ov-flut .wc-block-components-button:not(.is-link):hover,
body.ov-flut .ov-btn:hover,
body.ov-flut .content-block .ov-btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 5px 5px 0 -2.5px var(--apri), 5px 5px 0 0 var(--lila);
  background: var(--band);
  color: var(--apri);
}
body.ov-flut .woocommerce .button:active,
body.ov-flut .woocommerce button.button:active,
body.ov-flut .woocommerce a.button:active,
body.ov-flut .woocommerce input.button:active,
body.ov-flut .ov-korb-leer__knopf:active,
body.ov-flut .wc-block-components-button:not(.is-link):active,
body.ov-flut .ov-btn:active,
body.ov-flut .content-block .ov-btn:active {
  transform: translate(7px, 7px);
  box-shadow: 0 0 0 -2.5px var(--apri), 0 0 0 0 var(--lila);
  
  color: var(--apri);
}
/* Karten des Kaufwegs sind Lila — dort ist der Knopf Apricot */
body.ov-flut .woocommerce-form-login .button,
body.ov-flut .woocommerce-form-register .button,
body.ov-flut .ov-korb-leer__karte .ov-korb-leer__knopf,
body.ov-flut .cart-collaterals .button,
body.ov-flut .woocommerce-checkout-payment .button,
body.ov-flut .woocommerce-MyAccount-content .button {
  background: var(--apri);
  color: var(--lila);
  box-shadow: 7px 7px 0 -2.5px var(--lila), 7px 7px 0 0 var(--apri);
}
body.ov-flut .woocommerce-form-login .button:hover,
body.ov-flut .woocommerce-form-register .button:hover,
body.ov-flut .ov-korb-leer__karte .ov-korb-leer__knopf:hover,
body.ov-flut .cart-collaterals .button:hover,
body.ov-flut .woocommerce-checkout-payment .button:hover,
body.ov-flut .woocommerce-MyAccount-content .button:hover {
  background: var(--schaum);
  color: var(--lila);
  box-shadow: 0 0 0 -2.5px var(--lila), 0 0 0 0 var(--apri);
}
/* Die Knoepfe des Kaufwegs tragen im alten Theme vier und mehr Klassen und
   Pillenform — hier dieselbe Form wie ueberall. */
body.ov-flut.ov-baender--shop table.cart td.actions .button,
body.ov-flut.ov-baender--shop table.shop_table td.actions .button,
body.ov-flut.ov-baender--shop .wc-proceed-to-checkout a.checkout-button,
body.ov-flut.ov-baender--shop #payment #place_order,
body.ov-flut.ov-baender--shop .wc-block-components-checkout-place-order-button,
body.ov-flut.ov-baender--shop .wc-block-checkout__actions .wc-block-components-checkout-place-order-button {
  border: 0;
  border-radius: 10px;
  font-family: var(--anzeige);
  font-weight: 800;
  transition: transform 0.25s var(--weich), box-shadow 0.25s var(--weich), background-color 0.2s;
}
/* Auf der lila Summenkarte: Apricot mit Apricot-Rahmen */
body.ov-flut.ov-baender--shop .wc-proceed-to-checkout a.checkout-button,
body.ov-flut.ov-baender--shop #payment #place_order {
  background: var(--apri);
  color: var(--lila);
  box-shadow: 7px 7px 0 -2.5px var(--lila), 7px 7px 0 0 var(--apri);
}
body.ov-flut.ov-baender--shop .wc-proceed-to-checkout a.checkout-button:hover,
body.ov-flut.ov-baender--shop #payment #place_order:hover {
  transform: translate(2px, 2px);
  box-shadow: 5px 5px 0 -2.5px var(--lila), 5px 5px 0 0 var(--apri);
  background: var(--schaum);
  color: var(--lila);
}
body.ov-flut.ov-baender--shop .wc-proceed-to-checkout a.checkout-button:active,
body.ov-flut.ov-baender--shop #payment #place_order:active {
  transform: translate(7px, 7px);
  box-shadow: 0 0 0 -2.5px var(--lila), 0 0 0 0 var(--apri);
  
  color: var(--lila);
}
/* Die Block-Kasse setzt ihre Knoepfe mit !important als Pille. Der
   Bestellknopf steht auf Apricot: Lila mit Lila-Rahmen. */
body.ov-flut.ov-baender--shop .wc-block-components-button:not(.is-link) { border-radius: 10px !important; }
body.ov-flut.ov-baender--shop .wc-block-components-checkout-place-order-button {
  background: var(--lila) !important;
  color: var(--apri) !important;
  box-shadow: 7px 7px 0 -2.5px var(--apri), 7px 7px 0 0 var(--lila) !important;
}
body.ov-flut.ov-baender--shop .wc-block-components-checkout-place-order-button:not(:disabled):hover {
  transform: translate(2px, 2px);
  box-shadow: 5px 5px 0 -2.5px var(--apri), 5px 5px 0 0 var(--lila) !important;
  background: var(--band) !important;
}
body.ov-flut.ov-baender--shop .wc-block-components-checkout-place-order-button:not(:disabled):active {
  transform: translate(7px, 7px);
  box-shadow: 0 0 0 -2.5px var(--apri), 0 0 0 0 var(--lila) !important;
  
}
body.ov-flut.ov-baender--shop .wc-block-components-checkout-place-order-button:disabled { opacity: 0.55; }
/* In der Warenkorb-Tabelle (Lila): Apricot, Rahmen Apricot */
body.ov-flut.ov-baender--shop table.cart td.actions .button {
  background: var(--apri);
  color: var(--lila);
  box-shadow: 7px 7px 0 -2.5px var(--lila), 7px 7px 0 0 var(--apri);
}
body.ov-flut.ov-baender--shop table.cart td.actions .button:hover {
  transform: translate(2px, 2px);
  box-shadow: 5px 5px 0 -2.5px var(--lila), 5px 5px 0 0 var(--apri);
  background: var(--schaum);
}
body.ov-flut.ov-baender--shop table.cart td.actions .button:active {
  transform: translate(7px, 7px);
  box-shadow: 0 0 0 -2.5px var(--lila), 0 0 0 0 var(--apri);
  
}
body.ov-flut.ov-baender--shop table.cart .quantity input.qty { border-radius: 10px; }
body.ov-flut .woocommerce form .input-text,
body.ov-flut .woocommerce form select,
body.ov-flut .woocommerce form textarea,
body.ov-flut .woocommerce-page form .input-text {
  border-radius: 10px;
  font-family: var(--anzeige);
}
body.ov-flut .woocommerce-form-login,
body.ov-flut .woocommerce-form-register,
body.ov-flut .ov-korb-leer__karte,
body.ov-flut .ov-korb-info,
body.ov-flut .cart_totals,
body.ov-flut .woocommerce-MyAccount-navigation,
body.ov-flut .woocommerce-MyAccount-content,
body.ov-flut #customer_details,
body.ov-flut #order_review,
body.ov-flut .woocommerce-order { border-radius: 48px 20px 44px 22px; }
body.ov-flut .woocommerce-info,
body.ov-flut .woocommerce-message,
body.ov-flut .woocommerce-error { border-radius: 10px; }
body.ov-flut #main .woocommerce h2,
body.ov-flut #main .woocommerce h3,
body.ov-flut .ov-korb-info__titel {
  font-family: var(--anzeige);
  font-weight: 900;
  font-variation-settings: "wdth" 110, "opsz" 72;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
body.ov-flut .ov-korb-empfehlung__kopf h2 { font-size: clamp(32px, 3.6vw, 64px); line-height: 0.95; }

/* ===================================================================
   Warenkorb
   ===================================================================
   Links die Posten und darunter „Gut zu wissen" mit Vute, rechts die
   Summe als klebende Karte. Die Posten lesen sich wie Karten-Titel. */
body.ov-flut.woocommerce-cart .content-block > .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: clamp(28px, 3vw, 56px);
  align-items: start;
}
body.ov-flut.woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }
body.ov-flut.woocommerce-cart .woocommerce-cart-form { grid-column: 1; min-width: 0; }
/* Keine feste Zeile: steht ein Hinweis oben, rutschen beide gemeinsam
   darunter, sonst beginnen Posten und Summe auf derselben Linie. */
body.ov-flut.woocommerce-cart .cart-collaterals { grid-column: 2; position: static; width: auto; float: none; margin: 0; }
body.ov-flut.woocommerce-cart .content-block > .woocommerce { grid-auto-flow: row dense; }
body.ov-flut.woocommerce-cart .ov-korb-empfehlung { grid-column: 1 / -1; }
body.ov-flut.woocommerce-cart table.cart {
  border: 0;
  border-radius: 48px 20px 44px 22px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(97, 63, 117, 0.4);
}
body.ov-flut.woocommerce-cart table.cart thead th { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; }
/* Die Bildspalte bekommt ihre Breite fest, sonst quetscht die Tabelle das Bild */
body.ov-flut.woocommerce-cart table.cart :is(th, td).product-thumbnail { width: 112px !important; min-width: 112px; }
body.ov-flut.woocommerce-cart table.cart td.product-thumbnail img {
  width: 96px !important;
  height: 96px !important;
  max-width: none !important;
  object-fit: cover !important;
  border-radius: 22px 10px 20px 10px;
  background: var(--schaum);
}
body.ov-flut.woocommerce-cart table.cart td.product-name > a {
  font-family: var(--anzeige);
  font-weight: 900;
  font-variation-settings: "wdth" 110, "opsz" 72;
  font-size: clamp(20px, 1.7vw, 28px);
  line-height: 1.05;
  text-transform: uppercase;
  text-decoration: none;
}
body.ov-flut.woocommerce-cart table.cart td.product-subtotal { font-weight: 900; font-size: 20px; }
/* Unter den Posten nur „Gut zu wissen", gleich breit wie die Posten-Karte */
body.ov-flut.woocommerce-cart .ov-korb-unten { display: block; margin-top: clamp(28px, 3vw, 56px); }
body.ov-flut.woocommerce-cart .ov-korb-unten .fox-mascot { display: none; }
body.ov-flut.woocommerce-cart .ov-korb-info { width: auto; max-width: none; margin: 0; }
body.ov-flut .ov-korb-info { box-shadow: 0 30px 70px rgba(97, 63, 117, 0.4); }
body.ov-flut .ov-korb-info__titel { font-size: clamp(24px, 2vw, 34px); }
body.ov-flut.woocommerce-cart .cart_totals { box-shadow: 0 30px 70px rgba(97, 63, 117, 0.4); }
body.ov-flut.woocommerce-cart .cart_totals h2 { font-size: clamp(20px, 1.5vw, 26px); line-height: 1.05; hyphens: manual; }
/* baender-shop.css haelt Kopf und erste Karte mit 64px !important
   auseinander; hier trennt schon die Welle. */
body.ov-flut.ov-baender--shop #main.main-content { padding-top: 2vh !important; }
body.ov-flut.woocommerce-cart .woocommerce-notices-wrapper:not(:has(*)) { display: none; }
body.ov-flut.woocommerce-cart .cart_totals .order-total :is(th, td) { font-family: var(--anzeige); font-weight: 900; font-size: 24px; }
/* Der Kassenknopf: baender-shop.css setzt Farbe und Pille mit !important */
body.ov-flut.ov-baender--shop .wc-proceed-to-checkout a.checkout-button {
  border-radius: 10px !important;
  width: calc(100% - 7px) !important;
  margin: 0 7px 7px 0 !important;
  padding: 18px 24px;
  font-size: 18px;
}
body.ov-flut .woocommerce-message {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 0;
  border-radius: 10px;
  background: var(--lila);
  color: var(--apri);
}
body.ov-flut .woocommerce-message::before { color: var(--apri); }
body.ov-flut .woocommerce-message .button { --hinter: var(--lila); background: var(--apri); color: var(--lila); box-shadow: 7px 7px 0 -2.5px var(--lila), 7px 7px 0 0 var(--apri); order: 2; }

/* ===================================================================
   Kaufweg: ein Muster fuer Warenkorb, Kasse und Konto
   ===================================================================
   Hauptspalte und Seitenspalte, oben buendig. Jeder Block ist dieselbe
   lila Karte, jedes Feld dasselbe Feld (Apricot-Rand, heller Text), jede
   Ueberschrift dieselbe Titel-Ebene. Das alte Shop-CSS setzt vieles davon
   mit !important — deshalb steht es hier an den Stellen auch. */
body.ov-flut.ov-baender--shop {
  --k-rund: 36px 14px 32px 14px;
  --k-pad: clamp(22px, 2.4vw, 36px);
  --k-schatten: 0 24px 60px rgba(97, 63, 117, 0.35);
}
body.ov-flut.ov-baender--shop #main.main-content > .content-block { max-width: 1320px; }

/* --- Die Karte ------------------------------------------------------ */
body.ov-flut.ov-baender--shop :is(
  .wc-block-components-checkout-step,
  .wc-block-components-express-payment,
  .wc-block-checkout__sidebar,
  .woocommerce-MyAccount-navigation,
  .woocommerce-MyAccount-content,
  .woocommerce-form-login,
  .woocommerce-form-register,
  .cart_totals,
  .ov-korb-info
) {
  background: var(--lila) !important;
  background-color: var(--lila) !important;
  color: var(--apri) !important;
  border: 0 !important;
  border-radius: var(--k-rund) !important;
  box-shadow: var(--k-schatten) !important;
  padding: var(--k-pad) !important;
  margin: 0 0 clamp(18px, 2vw, 28px) !important;
}
body.ov-flut.ov-baender--shop :is(.wc-block-components-checkout-step, .woocommerce-MyAccount-content, .cart_totals, .wc-block-checkout__sidebar) :is(p, span, li, td, th, label, legend, dt, dd, small, strong, em) { color: inherit; }
body.ov-flut.ov-baender--shop :is(.wc-block-components-checkout-step, .woocommerce-MyAccount-content, .wc-block-checkout__sidebar, .cart_totals) a:not(.button):not([class*="button"]) { color: var(--apri); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* --- Titel in den Karten -------------------------------------------- */
body.ov-flut.ov-baender--shop :is(
  .wc-block-components-checkout-step__title,
  .wc-block-components-express-payment__title,
  .wc-block-checkout__sidebar .wc-block-components-title,
  .woocommerce-MyAccount-content h2,
  .woocommerce-MyAccount-content h3,
  .woocommerce-MyAccount-content legend,
  .cart_totals h2,
  .ov-korb-info__titel
) {
  margin: 0 0 16px !important;
  padding: 0 !important;
  color: var(--apri) !important;
  font-family: var(--anzeige) !important;
  font-weight: 900 !important;
  font-variation-settings: "wdth" 110, "opsz" 72;
  font-size: clamp(20px, 1.6vw, 26px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  background: none !important;
}
body.ov-flut.ov-baender--shop .wc-block-components-checkout-step__heading { margin: 0 0 12px; }
body.ov-flut.ov-baender--shop .wc-block-components-checkout-step__description { color: var(--schaum) !important; }
/* Die Schritt-Nummern der Kasse: Apricot-Kreis mit Lila */
body.ov-flut.ov-baender--shop .wc-block-components-checkout-step__container::before,
body.ov-flut.ov-baender--shop .wc-block-components-checkout-step::before { color: var(--lila) !important; background: var(--apri) !important; }

/* --- Felder ------------------------------------------------------- */
body.ov-flut.ov-baender--shop :is(
  .wc-block-components-text-input input,
  .wc-block-components-textarea,
  .wc-blocks-components-select__select,
  .components-combobox-control__input,
  .wc-block-components-combobox input,
  form .form-row input.input-text,
  form .form-row textarea,
  form .form-row select,
  .woocommerce-Input,
  form.login input.input-text,
  form.register input.input-text,
  .coupon input.input-text,
  table.cart .quantity input.qty
) {
  background: var(--schaum) !important;
  background-color: var(--schaum) !important;
  color: var(--lila) !important;
  border: 2px solid var(--schaum) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-family: var(--anzeige) !important;
  font-size: 16px !important;
}
body.ov-flut.ov-baender--shop :is(form .form-row select, .wc-blocks-components-select__select) option { color: var(--lila); background: var(--schaum); }
body.ov-flut.ov-baender--shop :is(.wc-block-components-text-input input, .woocommerce-Input, form .form-row input.input-text, .wc-block-components-textarea):focus {
  outline: 3px solid var(--apri) !important;
  outline-offset: 2px;
  border-color: var(--apri) !important;
}
/* Die Block-Kasse legt die Beschriftung IN das Feld — dort Lila */
body.ov-flut.ov-baender--shop :is(.wc-block-components-text-input, .wc-blocks-components-select, .wc-block-components-combobox) label { color: var(--lila) !important; }
body.ov-flut.ov-baender--shop :is(.wc-blocks-components-select__expand, .wc-block-components-address-autocomplete-icon) { fill: var(--lila) !important; color: var(--lila) !important; }
body.ov-flut.ov-baender--shop :is(form .form-row label, .woocommerce-form-login label) { color: var(--apri) !important; font-weight: 700; }
body.ov-flut.ov-baender--shop :is(.wc-block-components-text-input input, .woocommerce-Input)::placeholder { color: rgba(97, 63, 117, 0.5) !important; }
body.ov-flut.ov-baender--shop fieldset { border: 2px solid rgba(255, 187, 138, 0.45); border-radius: 18px; padding: 18px 20px 6px; margin: 18px 0; }
body.ov-flut.ov-baender--shop .woocommerce-form-row em,
body.ov-flut.ov-baender--shop form .form-row .description { color: var(--schaum); font-style: normal; font-size: 14px; }

/* Auswahlfelder (Versand, Zahlung): Apricot-Rand, gewaehlt Apricot gefuellt */
body.ov-flut.ov-baender--shop :is(.wc-block-components-radio-control__option, .wc-block-components-radio-control-accordion-option) {
  background: transparent !important;
  border: 2px solid rgba(255, 187, 138, 0.55) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
body.ov-flut.ov-baender--shop :is(.wc-block-components-radio-control__option--checked-option-highlighted, .wc-block-components-radio-control-accordion-option--checked-option-highlighted) {
  background: var(--apri) !important;
  border-color: var(--apri) !important;
}
body.ov-flut.ov-baender--shop :is(.wc-block-components-radio-control__option--checked-option-highlighted, .wc-block-components-radio-control-accordion-option--checked-option-highlighted) :is(span, label, div) { color: var(--lila) !important; }
body.ov-flut.ov-baender--shop :is(.wc-block-components-radio-control__label, .wc-block-components-radio-control__description, .wc-block-components-checkbox__label, .wc-block-checkout__guest-checkout-notice, .wc-block-checkout__terms, .wc-block-checkout__add-note) { color: var(--apri) !important; }
body.ov-flut.ov-baender--shop .wc-block-components-checkbox .wc-block-components-checkbox__input { border: 2px solid var(--apri) !important; background: transparent !important; border-radius: 5px; }
body.ov-flut.ov-baender--shop .wc-block-components-checkbox .wc-block-components-checkbox__input:checked { background: var(--apri) !important; }
body.ov-flut.ov-baender--shop .wc-block-components-checkbox__mark { fill: var(--lila) !important; }
body.ov-flut.ov-baender--shop .wc-block-components-address-card { border: 2px solid rgba(255, 187, 138, 0.45) !important; border-radius: 12px !important; background: none !important; }
body.ov-flut.ov-baender--shop .wc-block-components-address-card * { color: var(--apri) !important; }

/* --- Kasse: zwei Spalten, oben buendig ------------------------------ */
body.ov-flut.ov-baender--shop .wc-block-checkout { max-width: none; margin: 0; }
body.ov-flut.ov-baender--shop .wc-block-components-sidebar-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
  margin: 0 !important;
}
body.ov-flut.ov-baender--shop .wc-block-components-sidebar-layout > .wc-block-components-notices,
body.ov-flut.ov-baender--shop .wc-block-components-sidebar-layout > :not(.wc-block-checkout__main):not(.wc-block-checkout__sidebar) { grid-column: 1 / -1; }
body.ov-flut.ov-baender--shop .wc-block-checkout__main { grid-column: 1; width: auto !important; padding: 0 !important; margin: 0 !important; }
body.ov-flut.ov-baender--shop .wc-block-checkout__main form.wc-block-checkout__form,
body.ov-flut.ov-baender--shop .wc-block-checkout__main .wc-block-components-express-payment { max-width: none; width: auto; }
/* Nichts laeuft beim Scrollen mit — baender-shop.css macht Summe,
   Bestelluebersicht und Kaufspalte sticky. */
body.ov-flut.ov-baender--shop .cart_totals,
body.ov-flut.ov-baender--shop.single-product div.product .summary { position: static !important; top: auto !important; }
body.ov-flut.ov-baender--shop .wc-block-checkout__sidebar { grid-column: 2; width: auto !important; position: static !important; top: auto !important; }
/* Express-Kasse: der Titel sitzt sonst als Legende auf der Kartenkante */
body.ov-flut.ov-baender--shop .wc-block-components-express-payment__title-container { position: static !important; display: block !important; border: 0 !important; margin: 0 0 16px !important; padding: 0 !important; background: none !important; }
body.ov-flut.ov-baender--shop .wc-block-components-express-payment__title-container::before,
body.ov-flut.ov-baender--shop .wc-block-components-express-payment__title-container::after { display: none !important; }
body.ov-flut.ov-baender--shop .wc-block-components-express-payment__title { position: static !important; background: none !important; padding: 0 !important; text-align: left; }
body.ov-flut.ov-baender--shop .wc-block-components-express-payment__content { border: 0 !important; padding: 0 !important; box-shadow: none !important; background: none !important; }
body.ov-flut.ov-baender--shop .wc-block-checkout__sidebar :is(h2, .wc-block-components-checkout-order-summary__title-text, .wc-block-components-order-summary__button-text, .wc-block-components-checkout-order-summary__title) {
  color: var(--apri) !important;
  font-family: var(--anzeige) !important;
  font-weight: 900 !important;
  font-variation-settings: "wdth" 110, "opsz" 72;
  font-size: clamp(20px, 1.6vw, 26px) !important;
  text-transform: uppercase;
}
body.ov-flut.ov-baender--shop .wc-block-checkout__sidebar .wc-block-components-totals-footer-item :is(.wc-block-components-totals-item__label, .wc-block-components-totals-item__value) { font-family: var(--anzeige); font-weight: 900 !important; font-size: 22px !important; }
body.ov-flut.ov-baender--shop .wc-block-components-express-payment-continue-rule { color: var(--lila); }
body.ov-flut.ov-baender--shop .wc-block-components-express-payment-continue-rule::before,
body.ov-flut.ov-baender--shop .wc-block-components-express-payment-continue-rule::after { border-color: var(--lila); }
body.ov-flut.ov-baender--shop .wc-block-checkout__actions { padding: 0 !important; }

/* --- Konto: Navigation links, Inhalt rechts ------------------------- */
body.ov-flut.ov-baender--shop.woocommerce-account .content-block > .woocommerce {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
body.ov-flut.ov-baender--shop.woocommerce-account .content-block > .woocommerce > :not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) { grid-column: 1 / -1; }
body.ov-flut.ov-baender--shop .woocommerce-MyAccount-navigation { width: auto !important; float: none !important; position: static !important; }
body.ov-flut.ov-baender--shop .woocommerce-MyAccount-content { width: auto !important; float: none !important; min-width: 0; }
body.ov-flut.ov-baender--shop .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
body.ov-flut.ov-baender--shop .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; border: 0; }
body.ov-flut.ov-baender--shop .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  background: none !important;
  color: var(--apri) !important;
  font-weight: 800;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, transform 0.25s var(--weich);
}
body.ov-flut.ov-baender--shop .woocommerce-MyAccount-navigation li a:hover { background: rgba(255, 187, 138, 0.14) !important; transform: translateX(4px); }
body.ov-flut.ov-baender--shop .woocommerce-MyAccount-navigation li.is-active a { background: var(--apri) !important; color: var(--lila) !important; }
body.ov-flut.ov-baender--shop .woocommerce-MyAccount-content > p { font-size: 17px; line-height: 1.65; color: var(--schaum) !important; }
/* Hinweise IN einer Karte: keine Karte in der Karte, sondern ein Rand */
body.ov-flut.ov-baender--shop .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-notice) {
  /* pages.css blendet .woocommerce-message ueberall aus (dort ersetzt ein
     Toast die Warenkorb-Meldung); im Konto sind es echte Auskuenfte. */
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  margin: 0 0 18px !important;
  padding: 16px 18px !important;
  border: 2px solid rgba(255, 187, 138, 0.55) !important;
  border-radius: 12px !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--apri) !important;
}
body.ov-flut.ov-baender--shop .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message)::before { display: none; }
body.ov-flut.ov-baender--shop .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message) .button { order: 2; margin: 0 7px 7px 0 !important; float: none !important; }
body.ov-flut.ov-baender--shop .woocommerce-MyAccount-content table { border-collapse: collapse; width: 100%; background: none !important; border: 0 !important; }
body.ov-flut.ov-baender--shop .woocommerce-MyAccount-content :is(th, td) { border: 0 !important; border-bottom: 1px solid rgba(255, 187, 138, 0.3) !important; background: none !important; padding: 12px 8px !important; color: var(--apri) !important; }
body.ov-flut.ov-baender--shop .woocommerce-Addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
body.ov-flut.ov-baender--shop .woocommerce-Addresses .woocommerce-Address { width: auto !important; float: none !important; border: 2px solid rgba(255, 187, 138, 0.45); border-radius: 18px; padding: 18px; }
body.ov-flut.ov-baender--shop .woocommerce-MyAccount-content address { color: var(--schaum); font-style: normal; line-height: 1.6; }

/* Alle Knoepfe in lila Karten des Kaufwegs: Apricot, Rahmen Apricot */
body.ov-flut.ov-baender--shop :is(.woocommerce-MyAccount-content, .woocommerce-form-login, .woocommerce-form-register, .cart_totals) :is(.button, button[type="submit"]) {
  background: var(--apri) !important;
  color: var(--lila) !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 14px 22px !important;
  font: 800 16px/1 var(--anzeige) !important;
  box-shadow: 7px 7px 0 -2.5px var(--lila), 7px 7px 0 0 var(--apri) !important;
  transition: transform 0.25s var(--weich), box-shadow 0.25s var(--weich), background-color 0.2s;
}
body.ov-flut.ov-baender--shop :is(.woocommerce-MyAccount-content, .woocommerce-form-login, .woocommerce-form-register, .cart_totals) :is(.button, button[type="submit"]):hover {
  transform: translate(2px, 2px);
  box-shadow: 5px 5px 0 -2.5px var(--lila), 5px 5px 0 0 var(--apri) !important;
  background: var(--schaum) !important;
}
body.ov-flut.ov-baender--shop :is(.woocommerce-MyAccount-content, .woocommerce-form-login, .woocommerce-form-register, .cart_totals) :is(.button, button[type="submit"]):active {
  transform: translate(7px, 7px);
  box-shadow: 0 0 0 -2.5px var(--lila), 0 0 0 0 var(--apri) !important;
  
}

/* Anmelden (abgemeldet): Titel ueber der Karte, Karte volle Spaltenbreite */
body.ov-flut.ov-baender--shop.woocommerce-account:not(.logged-in) .content-block > .woocommerce { display: block; max-width: 720px; }
body.ov-flut.ov-baender--shop.woocommerce-account:not(.logged-in) .content-block > .woocommerce > h2 { margin: 0 0 18px; font-size: clamp(28px, 2.6vw, 44px); }

/* ===================================================================
   Bewertungen
   =================================================================== */
body.ov-flut .ov-bewertungen-wrap { max-width: 1500px; margin: 0; }
body.ov-flut .ov-bewertungen-wrap > h1,
body.ov-flut .ov-bewertungen-section--form > h2 { display: none; }
body.ov-flut .ov-bewertungen-intro { color: var(--lila); font-size: clamp(19px, 1.6vw, 26px); font-weight: 600; line-height: 1.4; max-width: 44ch; margin: 0 0 8vh; }
/* Die Note als Aussage, wie auf der Startseite */
body.ov-flut .ov-bewertungen-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 32px;
  margin: 0 0 10vh;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--lila);
}
body.ov-flut .ov-bewertungen-avg-score {
  color: var(--lila);
  font-family: var(--anzeige);
  font-weight: 900;
  font-variation-settings: "wdth" 118, "opsz" 144;
  font-size: clamp(110px, 13vw, 250px);
  line-height: 0.82;
  letter-spacing: -0.03em;
}
body.ov-flut .ov-bewertungen-avg-stars { display: flex; gap: 6px; color: var(--lila); }
body.ov-flut .ov-bewertungen-avg-stars svg { width: clamp(24px, 2.2vw, 36px); height: auto; }
body.ov-flut .ov-bewertungen-count { font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--lila); }
body.ov-flut .ov-google-review-btn {
  --hinter: var(--apri);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 24px;
  border: 0;
  border-radius: 10px;
  background: var(--lila);
  color: var(--apri);
  font: 800 16px/1 var(--anzeige);
  text-decoration: none;
  box-shadow: 7px 7px 0 -2.5px var(--apri), 7px 7px 0 0 var(--lila);
  transition: transform 0.25s var(--weich), box-shadow 0.25s var(--weich), background-color 0.2s;
}
body.ov-flut .ov-google-review-btn:hover { transform: translate(2px, 2px); box-shadow: 5px 5px 0 -2.5px var(--apri), 5px 5px 0 0 var(--lila); background: var(--band); }
body.ov-flut .ov-google-review-btn:active { transform: translate(7px, 7px); box-shadow: 0 0 0 -2.5px var(--apri), 0 0 0 0 var(--lila);  }
body.ov-flut .ov-bewertungen-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: clamp(28px, 3vw, 48px); }
body.ov-flut .ov-bewertung-card {
  padding: clamp(24px, 3vw, 44px);
  border: 0;
  border-radius: 48px 20px 44px 22px;
  background: var(--lila);
  color: var(--apri);
  box-shadow: 0 30px 70px rgba(97, 63, 117, 0.4);
}
body.ov-flut .ov-bewertung-card:nth-child(even) { border-radius: 20px 48px 22px 44px; }
body.ov-flut .ov-bewertung-card * { color: var(--apri); border-color: rgba(255, 187, 138, 0.3); }
body.ov-flut .ov-bewertung-card__name { font-family: var(--anzeige); font-weight: 900; font-variation-settings: "wdth" 110, "opsz" 72; font-size: 28px; text-transform: uppercase; }
body.ov-flut .ov-bewertung-card__date { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; }
body.ov-flut .ov-bewertung-card p,
body.ov-flut .ov-bewertung-card blockquote { color: var(--schaum); font-size: clamp(18px, 1.5vw, 24px); font-weight: 600; line-height: 1.45; }
/* bewertungen.css setzt die Farbe mit !important — nur so kommt man darueber */
body.ov-flut .ov-bewertung-card .ov-bewertung-card__text { color: var(--schaum) !important; margin-top: 18px !important; }
/* Sterne in den vier Farben: voll in der Schriftfarbe, leer blass */
body.ov-flut .ov-star--full .ov-star-svg { fill: currentColor; stroke: currentColor; }
body.ov-flut .ov-star--empty .ov-star-svg { fill: none; stroke: currentColor; opacity: 0.5; }
body.ov-flut .ov-star-label .ov-star-svg,
body.ov-flut .ov-stars-input:hover .ov-star-label .ov-star-svg { fill: none; stroke: var(--apri); }
body.ov-flut .ov-stars-input:hover .ov-star-label:hover .ov-star-svg,
body.ov-flut .ov-stars-input:hover .ov-star-label:hover ~ .ov-star-label .ov-star-svg,
body.ov-flut .ov-star-radio:checked + .ov-star-label .ov-star-svg,
body.ov-flut .ov-star-radio:checked ~ .ov-star-label .ov-star-svg { fill: var(--apri); stroke: var(--apri); }
body.ov-flut .ov-star-radio:focus-visible + .ov-star-label { outline: 3px solid var(--schaum); outline-offset: 2px; border-radius: 6px; }
/* Formular: dieselbe Karte wie die Anfrage auf den Leistungsseiten */
body.ov-flut .ov-bewertungen-section--form { max-width: none; }
body.ov-flut .ov-bewertung-form {
  --hinter: var(--lila);
  max-width: 1100px;
  padding: clamp(28px, 4vw, 64px);
  border: 0;
  border-radius: 48px 20px 44px 22px;
  background: var(--lila);
  color: var(--apri);
  box-shadow: 0 30px 70px rgba(97, 63, 117, 0.4);
}
body.ov-flut .ov-bewertung-form .ov-form-label,
body.ov-flut .ov-bewertung-form legend { color: var(--apri); font-weight: 700; font-size: 15px; }
body.ov-flut .ov-bewertung-form .ov-form-hint-inline { color: var(--schaum); }
body.ov-flut .ov-bewertung-form .ov-form-input,
body.ov-flut .ov-bewertung-form textarea {
  border: 2px solid var(--schaum);
  border-radius: 10px;
  background: var(--schaum);
  color: var(--lila);
  font: 500 17px/1.4 var(--anzeige);
  padding: 13px 16px;
}
body.ov-flut .ov-bewertung-form .ov-form-option { border-radius: 10px; }
body.ov-flut .ov-bewertung-form .ov-star-label { color: var(--apri); }

/* ===================================================================
   404 und Vute
   =================================================================== */
body.ov-flut .ov-error {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  grid-template-areas: "bild code" "bild titel" "bild text" "bild knoepfe" "bild suche";
  align-content: start;
  column-gap: clamp(32px, 6vw, 120px);
  row-gap: 22px;
  text-align: left;
}
body.ov-flut .ov-error .ov-vute-confused { grid-area: bild; align-self: center; width: 100%; max-width: 420px; }
body.ov-flut .ov-error .ov-vute-confused img { width: 100%; height: auto; }
body.ov-flut .ov-error__code {
  grid-area: code;
  margin: 0;
  color: var(--lila);
  font-family: var(--anzeige);
  font-weight: 900;
  font-variation-settings: "wdth" 125, "opsz" 144;
  font-size: clamp(110px, 16vw, 280px);
  line-height: 0.82;
  letter-spacing: -0.03em;
  opacity: 1;
}
body.ov-flut .ov-error .ov-error__title { grid-area: titel; margin: 0; font-size: clamp(30px, 3.4vw, 60px); }
body.ov-flut .ov-error__text { grid-area: text; margin: 0; }
body.ov-flut .ov-error__actions .ov-btn { flex: 0 0 auto; width: auto; }
body.ov-flut .ov-error__actions { grid-area: knoepfe; display: flex; flex-wrap: wrap; gap: 22px 28px; margin: 12px 0 0; justify-content: flex-start; }
body.ov-flut .ov-error__search { grid-area: suche; display: flex; flex-wrap: wrap; gap: 22px; margin: 20px 0 0; max-width: 560px; justify-content: flex-start; }
body.ov-flut .ov-error__search input[type="search"] {
  flex: 1 1 240px;
  min-width: 0;
  padding: 14px 18px;
  border: 2px solid var(--lila);
  border-radius: 10px;
  background: transparent;
  color: var(--lila);
  font: 500 17px var(--anzeige);
}
body.ov-flut .ov-error__search input[type="search"]::placeholder { color: rgba(97, 63, 117, 0.6); }

body.ov-flut .vute-header { display: block; float: right; width: min(40%, 480px); margin: -18vh 0 4vh 6vw; }
body.ov-flut .vute-header img { width: 100%; height: auto; display: block; }
body.ov-flut .vute-header h1 { display: none; }
body.ov-flut .vute-content { max-width: none; }

/* ===================================================================
   Schmal
   =================================================================== */
@media (max-width: 820px) {
  body.ov-flut .flut .gross { font-size: 18.4vw; font-variation-settings: "wdth" 100, "opsz" 144; }
  body.ov-flut .was__vute { float: none; display: block; height: min(52vh, 420px); margin: 0 auto 12px; shape-outside: none; }
  body.ov-flut .was__fang { font-size: 11vw; margin-left: 0; }
  body.ov-flut .was__text { margin-right: 0; }
  body.ov-flut .lkarte { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto auto; height: min(70vh, 600px); }
  body.ov-flut .lkarte__nr, body.ov-flut .lkarte__ic, body.ov-flut .lkarte h3,
  body.ov-flut .lkarte > p:not(.lkarte__nr), body.ov-flut .lkarte__mehr { grid-column: 1; grid-row: auto; }
  body.ov-flut .lkarte__ic { width: 72px; height: 72px; align-self: start; }
  body.ov-flut .lkarte h3 { font-size: 9vw; }
  body.ov-flut.js-karten .leist__buehne { padding-top: 96px; }
  body.ov-flut .urteil__reihe { grid-template-columns: 1fr; }
  body.ov-flut .fuss__oben { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.ov-flut .fuss__marke { grid-column: 1 / -1; }
  body.ov-flut .fuss__unten { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  body.ov-flut .fuss__copy { justify-self: center; }
  body.ov-flut .leistung-anfrage__card { grid-template-columns: 1fr; grid-template-areas: "vute" "titel" "intro" "form"; grid-template-rows: none; }
  body.ov-flut .leistung-anfrage__mascot { position: static; width: 150px; margin: -90px 0 0 auto; }
  body.ov-flut .leistung-anfrage__intro { margin-bottom: 28px; }
  body.ov-flut .seitenkopf__innen--zwei { flex-direction: column; align-items: flex-start; }
  body.ov-flut.woocommerce-cart .content-block > .woocommerce { grid-template-columns: 1fr; }
  body.ov-flut.woocommerce-cart .cart-collaterals { grid-column: 1; position: static; }
  body.ov-flut.woocommerce-cart table.cart :is(th, td).product-thumbnail { width: 80px !important; min-width: 80px; }
  body.ov-flut.woocommerce-cart table.cart td.product-thumbnail img { width: 72px !important; height: 72px !important; }
  body.ov-flut.ov-baender--shop .wc-block-components-sidebar-layout { grid-template-columns: 1fr; }
  body.ov-flut.ov-baender--shop .wc-block-checkout__sidebar { grid-column: 1; position: static !important; }
  body.ov-flut.ov-baender--shop.woocommerce-account .content-block > .woocommerce { grid-template-columns: 1fr; }
  body.ov-flut.ov-baender--shop .woocommerce-MyAccount-navigation { position: static; }
  body.ov-flut .schaufenster { width: min(100%, 420px); }
  body.ov-flut .shop2-nutzen,
  body.ov-flut .shop-warum__spalten { grid-template-columns: 1fr; }
  body.ov-flut .ov-error { grid-template-columns: 1fr; grid-template-areas: "bild" "code" "titel" "text" "knoepfe" "suche"; }
  body.ov-flut .ov-error .ov-vute-confused { max-width: 240px; }
  body.ov-flut .vute-header { float: none; width: min(80%, 360px); margin: -6vh auto 4vh; }
}
@media (max-width: 700px) {
  body.ov-flut { --kopf-h: 74px; }
  body.ov-flut .kopf { padding-top: calc(env(safe-area-inset-top, 0px) + 14px); padding-bottom: 14px; }
  body.ov-flut .kopf__nav { gap: 12px; }
  /* Auf dem Handy nur die Icons; der Name steht fuer Vorleser weiter da */
  body.ov-flut .knopfk { padding: 10px 12px; gap: 0; }
  body.ov-flut .kopf .knopfk__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body.ov-flut .kopf .knopfk svg { width: 20px; height: 20px; }
  body.ov-flut .kopf .knopf__pfeil { display: none; }
  body.ov-flut .menue__liste { position: fixed; left: 12px; right: 12px; width: auto; top: calc(env(safe-area-inset-top, 0px) + var(--kopf-h) + 8px); }
  body.ov-flut .seitenkopf { padding-top: calc(env(safe-area-inset-top, 0px) + var(--kopf-h) + 8vh); }
  body.ov-flut .seitenkopf__titel { font-size: clamp(38px, 11vw, 64px); }
}

/* ===================================================================
   Ruhig: bei reduzierter Bewegung steht alles an seinem Platz
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.ov-flut .kopf, body.ov-flut .lkarte__ic, body.ov-flut .lkarte__mehr, body.ov-flut .lkarte > p,
  body.ov-flut .signatur, body.ov-flut .textlink, body.ov-flut .textlink span, body.ov-flut .fuss__sozial,
  body.ov-flut .knopfk, body.ov-flut .knopfg { transition: none; }
  body.ov-flut .ende .gross { white-space: normal; }
  body.ov-flut .lkarte__linien path, body.ov-flut .status i,
  body.ov-flut .menue__liste, body.ov-flut .menue__liste li { animation: none; }
  body.ov-flut .signatur { clip-path: none; }
}

/* ===================================================================
   Handy — Nachbesserungen 2026-09-26 (Rueckmeldung vom iPhone)
   =================================================================== */
/* Die Sprachwahl unten rechts geht mit der Kopfleiste weg (runter scrollen)
   und kommt mit ihr wieder; sie lag sonst dauernd ueber dem Inhalt. */
body.ov-flut .ov-lang-mini { transition: opacity 0.3s var(--weich), transform 0.3s var(--weich); }
body.ov-flut.kopf-weg .ov-lang-mini { opacity: 0; transform: translateY(12px); pointer-events: none; }
/* Kartentitel brechen nie im Wort; flut.js verkleinert sie, wenn noetig */
body.ov-flut .lkarte h3 { hyphens: manual; }
/* Luft zwischen Farbpunkten und Knopf der Produktkarte */
body.ov-flut ul.products li.product .kartenfarben { margin-bottom: 12px; }

@media (max-width: 1100px) {
  /* Produktseite in einer Spalte. Die Zwei-Spalten-Regel galt sonst auch
     hier, die erste Spalte wurde 0 px breit: der Text stand Wort fuer Wort
     untereinander, Farben und Groessen als schmale Streifen. */
  body.ov-flut.ov-shop2.single-product div.product {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "gallery" "summary" "tabs";
  }
  body.ov-flut.ov-shop2.single-product div.product .woocommerce-product-gallery { grid-area: gallery; }
  body.ov-flut.ov-shop2.single-product div.product .summary { grid-area: summary; }
}

@media (max-width: 820px) {
  /* Kartendeck: die Karte fuellt genau den Platz unter der Ueberschrift
     und bleibt damit im sichtbaren Fenster, auch mit Safaris Leisten. */
  body.ov-flut.js-karten .lkarte { height: auto; bottom: 0; max-height: 600px; }
}

@media (max-width: 700px) {
  /* Die Flut: kuerzerer Weg, sonst stand drei Bildschirme lang dasselbe Bild */
  body.ov-flut .flut { height: 220vh; height: 220svh; }
  /* Vute passt in die Breite */
  body.ov-flut .was__vute { width: min(100%, 420px); height: auto; }
  /* Kartendeck: die grosse Zahl lag ueber der Ueberschrift; jede Karte
     zaehlt selbst („01 / 06") */
  body.ov-flut.js-karten .leist__zahl { display: none; }
  body.ov-flut.js-karten .leist__buehne { padding-top: calc(var(--kopf-h) + 24px); padding-bottom: 3svh; gap: 3svh; }
  body.ov-flut .lkarte { padding: 24px; row-gap: 14px; }
  body.ov-flut .lkarte h3 { font-size: 8.4vw; }
  body.ov-flut .lkarte__ic { width: 60px; height: 60px; }
  /* Shop-Kopf: Luft zum Link darueber, und der versetzte Rahmen der Karte
     bleibt im Bild */
  body.ov-flut .schaufenster { width: calc(100% - 12px); margin-top: 24px; }
  /* Erklaerungen im Shop: auf dem Handy im Fluss statt schwebend — schwebend
     lagen sie ueber dem naechsten Abschnitt (Ausnahme im Styleguide) */
  body.ov-flut .shop2-kz .shop2-kz__erklaerung { position: static; width: 100%; margin-top: 12px; }
}

/* Handy, Runde 2 (2026-09-26) */
@media (max-width: 700px) {
  /* Kartendeck: die Karte ist so hoch wie ihr Inhalt, ohne Leerraum zwischen
     Symbol und Titel */
  body.ov-flut.js-karten .lkarte { bottom: auto; height: auto; max-height: none; }
  body.ov-flut .lkarte { grid-template-rows: none; grid-auto-rows: auto; align-content: start; row-gap: 16px; padding-bottom: 36px; }
  body.ov-flut .lkarte h3 { align-self: start; margin-top: 18px; }
  /* Bewertungen: die drei Links untereinander statt zwei plus einer */
  body.ov-flut .urteil__links { flex-direction: column; align-items: flex-start; gap: 14px; }
  body.ov-flut .urteil { padding-bottom: 8vh; }
  /* Fuss: „Dranbleiben" ueber die ganze Breite, die Symbole in einer Reihe */
  body.ov-flut .fuss__oben > :last-child { grid-column: 1 / -1; }
  /* Shop-Kopf: das einzelne Produkt steht auf dem Handy verloren zwischen Text
     und Ware — die Ware kommt direkt darunter ohnehin */
  body.ov-flut .seitenkopf--shop .schaufenster { display: none; }
  /* Seitenende: die Schlusszeile braucht auf dem Handy weniger Hoehe */
  body.ov-flut .ende { height: 42vh; height: 42svh; }
}

/* Tablet (2026-09-26): „Was ist OpenVuture" gestapelt statt umflossen. Mit
   hochkantem Tablet war Vute so hoch (90vh), dass fuer den Text nur ein
   Streifen neben seiner Form blieb — ein, zwei Woerter pro Zeile. */
@media (min-width: 701px) and (max-width: 1100px) {
  body.ov-flut .was__vute { float: none; display: block; width: auto; height: min(48vh, 520px); margin: 0 auto 24px; shape-outside: none; }
  body.ov-flut .was__fang { margin-left: 0; }
  body.ov-flut .was__text { margin-right: 0; max-width: 62ch; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  /* Kartendeck auf dem Tablet: eine Spalte, so hoch wie der Inhalt — die
     zweispaltige Desktop-Karte liess oben die halbe Karte leer */
  body.ov-flut .lkarte { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto; align-content: start; height: auto; row-gap: 18px; }
  body.ov-flut .lkarte__nr, body.ov-flut .lkarte__ic, body.ov-flut .lkarte h3,
  body.ov-flut .lkarte > p:not(.lkarte__nr), body.ov-flut .lkarte__mehr { grid-column: 1; grid-row: auto; }
  body.ov-flut .lkarte h3 { align-self: start; margin-top: 12px; font-size: clamp(36px, 6vw, 64px); }
  body.ov-flut.js-karten .lkarte { bottom: auto; height: auto; max-height: none; }
}
/* Hochformat ab Tablet (Tablets, aufgeklappte Foldables): die Buehne des
   Kartendecks ist bildschirmhoch, die Karte nicht — sie steht jetzt mittig
   im freien Raum statt oben mit leerer Haelfte darunter. Die Ueberschrift
   haelt Abstand zur Kopfleiste, wie hoch die auch ist. */
@media (min-width: 701px) and (max-aspect-ratio: 1/1) {
  body.ov-flut.js-karten .leist__buehne { padding-top: calc(var(--kopf-h) + 40px); }
  /* Die Flut: kuerzerer Weg, im Hochformat stand sie sonst drei Bildschirme lang still */
  body.ov-flut .flut { height: 220vh; height: 220svh; }
  /* „Was ist OpenVuture" gestapelt: im Hochformat ist Vute (90vh) so hoch,
     dass neben seiner Form nur ein schmaler Textstreifen blieb */
  body.ov-flut .was__vute { float: none; display: block; width: auto; height: min(48vh, 560px); margin: 0 auto 24px; shape-outside: none; }
  body.ov-flut .was__fang { margin-left: 0; }
  body.ov-flut .was__text { margin-right: 0; max-width: 62ch; }
  /* Die Karte einspaltig wie auf dem Tablet; flach und breit ging sie im
     hohen Bildschirm unter */
  body.ov-flut .lkarte { width: min(900px, 100%); grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto; align-content: start; row-gap: 18px; }
  body.ov-flut .lkarte__nr, body.ov-flut .lkarte__ic, body.ov-flut .lkarte h3,
  body.ov-flut .lkarte > p:not(.lkarte__nr), body.ov-flut .lkarte__mehr { grid-column: 1; grid-row: auto; }
  body.ov-flut .lkarte h3 { align-self: start; margin-top: 12px; font-size: clamp(36px, 5.6vw, 72px); }
  body.ov-flut.js-karten .lkarte { top: 0; bottom: 0; height: fit-content; max-height: 100%; margin-block: auto; }
}