/* Collection page (collection.php). Head: the name alone, centred. Products: the mascot
   large on the left (sticky), the cards beside it. TOFU wears the Tofu page's look. */

/* Tofu's own type, from the Tofu page's folder (licences in tofu-seite/fonts/) */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(tofu-seite/fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(tofu-seite/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: "DT Risya"; src: url(tofu-seite/fonts/dt-risya.woff2) format("woff2"); font-display: block; }

/* full width: the generic content padding of #main does not apply here */
/* ov-baender--shop sets padding-top with !important (flut.css), so this one needs it too */
body.ov-flut.tax-ov_collection #main.main-content.coll-seite { padding: 0 !important; max-width: none; background: transparent; }
body.ov-flut .coll-seite__kopf { background: var(--band); color: var(--apri); padding: 8vh 0 2vh; overflow: hidden; }
body.ov-flut .coll-seite__titel {
  margin: 0;
  color: inherit;
  font: 900 clamp(40px, 9vw, 168px)/0.88 var(--anzeige);
  font-variation-settings: "wdth" 125, "opsz" 144;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.ov-flut :is(.coll-seite__lauf, .coll-seite__hohl) { display: inline-flex; will-change: transform; }
body.ov-flut :is(.coll-seite__lauf, .coll-seite__hohl) span { padding-right: 0.35em; }

/* products band: the shop's lila band, the name in outline type running behind the cards */
body.ov-flut .coll-seite__ware { position: relative; overflow: hidden; background: var(--apri); padding: clamp(70px, 7.2vw, 145px) var(--rand) 10vh; }  /* room for Vute's head above the plate (the band clips) */
body.ov-flut .coll-seite__hohl {
  position: absolute; left: 0; top: 52%; z-index: 0; white-space: nowrap; pointer-events: none;
  font: 900 clamp(140px, 18vw, 320px)/1 var(--anzeige); font-variation-settings: "wdth" 125, "opsz" 144; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 2px rgba(97, 63, 117, 0.14);
}

/* the stage plate: the resting point; the mascot breaks out over its top edge, water lines at its foot */
body.ov-flut .coll-seite__buehne {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
  min-height: clamp(280px, 22vw, 430px);
  margin: 0 0 clamp(40px, 6vh, 80px);
  border-radius: 22px;
  background: var(--lila); color: var(--apri);
  box-shadow: 0 30px 70px rgba(20, 8, 28, 0.3);
}
body.ov-flut .coll-seite__text { position: relative; z-index: 1; padding: clamp(24px, 4vw, 72px); padding-right: calc(clamp(280px, 27vw, 540px) + clamp(16px, 2.5vw, 56px) + 24px); display: grid; gap: 14px; }
body.ov-flut .coll-seite__zeile {
  margin: 0; color: inherit;
  font: 900 clamp(48px, 6.4vw, 120px)/0.95 var(--anzeige);  /* twice the first size (vredix 2026-11-05) */ font-variation-settings: "wdth" 125, "opsz" 144; text-transform: uppercase; text-wrap: balance;
}
body.ov-flut .coll-seite__zahl { font: 800 18px/1 var(--anzeige); }
body.ov-flut .coll-seite__figur {
  /* Vute stands on the plate's floor at the right and breaks out over its top edge with head and
     shoulders; the plate keeps its own height (vredix 2026-11-05) */
  position: absolute; z-index: 2;
  right: clamp(16px, 2.5vw, 56px);
  bottom: clamp(14px, 1.6vw, 30px);
  width: clamp(280px, 27vw, 540px);
}
body.ov-flut .coll-seite__maskottchen { width: 100%; height: auto; display: block; }
/* #noAI under Vute's left shoe: an SVG over the same 960 square as the picture */
body.ov-flut .coll-seite__noai { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
body.ov-flut .coll-seite__noai text { font-family: "Caveat Signatur", "Segoe Script", cursive; font-weight: 600; font-size: 46px; fill: var(--apri); }

/* the cards: the shop's own (variant C), apricot on lila, tilted alternately like in the shop */
body.ov-flut .coll-seite__liste { position: relative; z-index: 1; min-width: 0; }
body.ov-flut .coll-seite ul.products { --k-grund: var(--lila); --k-schrift: var(--apri); --k-bild: var(--schaum); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 40px 28px; }
@media (min-width: 1500px) { body.ov-flut .coll-seite ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
body.ov-flut .coll-seite ul.products li.product { rotate: -0.8deg; }
/* the cards here are larger than in the shop: title, dots and tag grow with them (vredix 2026-11-05) */
body.ov-flut .coll-seite ul.products li.product .woocommerce-loop-product__title { font-size: clamp(19px, 1.45vw, 27px); }
body.ov-flut .coll-seite ul.products li.product .kartenfarben { gap: clamp(10px, 0.8vw, 14px); }
body.ov-flut .coll-seite ul.products li.product .kartenfarbe { width: clamp(22px, 1.6vw, 30px); height: clamp(22px, 1.6vw, 30px); }
body.ov-flut .coll-seite ul.products li.product :is(.price, .price *) { font-size: clamp(18px, 1.3vw, 24px); }
body.ov-flut .coll-seite ul.products li.product:nth-child(even) { rotate: 0.9deg; }

/* ---- TOFU: teal head, sand band, coral plate, bone cards, ink tag (vorschlag/tofu-seite/tofu.css) ---- */
body.ov-flut .coll-seite--tofu { --t-teal: #2E9A92; --t-coral: #E2694A; --t-sand: #DCD5C6; --t-bone: #F1EADB; --t-ink: #111111; }
body.ov-flut .coll-seite--tofu .coll-seite__kopf { background: var(--t-teal); color: var(--t-ink); padding: 12vh 0 8vh; }
body.ov-flut .coll-seite--tofu :is(.coll-seite__titel, .coll-seite__hohl, .coll-seite__zeile) {
  font-family: "DT Risya", "Archivo Black", Impact, sans-serif; font-weight: 400; font-variation-settings: normal; letter-spacing: 0.01em; text-transform: none;
}
body.ov-flut .coll-seite--tofu .coll-seite__titel { font-size: clamp(64px, 13vw, 260px); line-height: 0.86; }
/* ink ground: teal cards with bone picture wells need a ground of another family, sand read as the well's own colour
   (vredix 2026-11-06) */
body.ov-flut .coll-seite--tofu .coll-seite__ware { background: #141413; }
body.ov-flut .coll-seite--tofu .coll-seite__hohl { -webkit-text-stroke: 2px rgba(17, 17, 17, 0.12); }
/* no fill of its own: the plate is drawn by ::before/::after, the cut between them stays transparent */
body.ov-flut .coll-seite--tofu .coll-seite__buehne { color: var(--t-ink); box-shadow: none; }
body.ov-flut .coll-seite--tofu .coll-seite__zeile { font-size: clamp(56px, 7.6vw, 144px); line-height: 0.9; }
body.ov-flut .coll-seite--tofu .coll-seite__zahl { font-family: "Archivo", var(--anzeige); }
body.ov-flut .coll-seite--tofu .coll-seite__text { padding-right: calc(clamp(340px, 38vw, 760px) + clamp(16px, 2.5vw, 56px)); }
body.ov-flut .coll-seite--tofu ul.products li.product { box-shadow: none; }
body.ov-flut .coll-seite--tofu ul.products li.product :is(.woocommerce-loop-product__title, .price, .price *) { font-family: "Archivo", var(--anzeige); font-stretch: 112%; font-variation-settings: normal; }
body.ov-flut .coll-seite--tofu .shop2-plakette { font-family: "Archivo", var(--anzeige); }

@media (max-width: 760px) {
  body.ov-flut .coll-seite__kopf { padding-top: 6vh; }
  body.ov-flut .coll-seite__buehne { grid-template-columns: 1fr; margin-top: 0; }
  body.ov-flut .coll-seite__ware { padding-top: 132px; }
  body.ov-flut .coll-seite__figur { position: relative; right: auto; bottom: auto; order: -1; width: 78%; margin: -120px auto 0; }
  body.ov-flut .coll-seite__text { padding: 8px 24px 24px; }
}

/* the spacer under the fixed header takes the head's colour, so no strip shows above it */
body.ov-flut.tax-ov_collection .kopf-platz { background: var(--band); }
body.ov-flut.tax-ov_collection.term-tofu .kopf-platz { background: #2E9A92; }

/* The plate is cut open where the line runs: the bar is two pieces (::before above, ::after below)
   with a truly transparent gap between them, so whatever lies behind (ground, outline type) shows
   through; the line sits in the gap in the plate's colour, the count at the bottom left
   (vredix 2026-11-05) */
body.ov-flut .coll-seite__buehne {
  --platte: var(--lila);
  grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto 1fr;
  background: none; box-shadow: none;
}
body.ov-flut .coll-seite--tofu .coll-seite__buehne { --platte: var(--t-coral); }
body.ov-flut .coll-seite__buehne::before,
body.ov-flut .coll-seite__buehne::after { content: ""; grid-column: 1; align-self: stretch; z-index: 0; background: var(--platte); filter: drop-shadow(0 18px 30px rgba(20, 8, 28, 0.18)); }
body.ov-flut .coll-seite--tofu .coll-seite__buehne::before,
body.ov-flut .coll-seite--tofu .coll-seite__buehne::after { filter: none; }
body.ov-flut .coll-seite__buehne::before { grid-row: 1; border-radius: 22px 22px 0 0; }
body.ov-flut .coll-seite__buehne::after { grid-row: 3; border-radius: 0 0 22px 22px; }
body.ov-flut .coll-seite__text { display: contents; }
body.ov-flut .coll-seite__zeile {
  grid-row: 2; grid-column: 1; z-index: 1;
  padding: 0.22em calc(clamp(280px, 27vw, 540px) + clamp(16px, 2.5vw, 56px) + 24px) 0.16em clamp(24px, 4vw, 72px);
  background: none; color: var(--platte);
}
body.ov-flut .coll-seite__zahl { grid-row: 3; grid-column: 1; z-index: 1; align-self: end; justify-self: start; margin: 0 0 clamp(18px, 2vw, 34px) clamp(24px, 4vw, 72px); }
body.ov-flut .coll-seite--tofu .coll-seite__zeile { padding-right: calc(clamp(340px, 38vw, 760px) + clamp(16px, 2.5vw, 56px)); }
@media (max-width: 760px) {
  body.ov-flut .coll-seite__buehne { grid-template-rows: auto auto auto; }
  body.ov-flut .coll-seite__figur { grid-row: 1; grid-column: 1; z-index: 1; }
  body.ov-flut .coll-seite__zeile { padding: 0.22em 24px 0.16em; }
  body.ov-flut .coll-seite__zahl { margin: 20px 0 22px 24px; }
}

/* The plate replaces the running head (vredix 2026-11-05): the page starts with the products band,
   and the line "<Name> Collection" runs endlessly through the plate's cut, behind the mascot */
body.ov-flut .coll-seite__zeile { padding: 0.22em 0 0.16em; overflow: hidden; white-space: nowrap; text-wrap: nowrap; }
body.ov-flut .coll-seite__zeile .coll-seite__lauf { display: inline-flex; }
body.ov-flut .coll-seite--tofu .coll-seite__zeile { padding-right: 0; }
body.ov-flut.tax-ov_collection .kopf-platz { background: var(--apri); }
body.ov-flut.tax-ov_collection.term-tofu .kopf-platz { background: var(--t-sand, #DCD5C6); }
body.ov-flut .coll-seite__ware { padding-top: clamp(100px, 7.6vw, 150px); }  /* room for Vute's head and ears, little more */
@media (max-width: 760px) {
  body.ov-flut .coll-seite__zeile { padding: 0.22em 0 0.16em; }
  body.ov-flut .coll-seite__ware { padding-top: 132px; }
}

/* Plate docked to the header and across the full width; its lower part runs into the wave
   (vredix 2026-11-05). The mascot now stands inside the plate. */
body.ov-flut .coll-seite__buehne {
  margin: 0; border-radius: 0;
  min-height: calc(clamp(280px, 27vw, 540px) + clamp(24px, 2.4vw, 44px));  /* little air above Vute */
}
body.ov-flut .coll-seite__buehne::before,
body.ov-flut .coll-seite__buehne::after { border-radius: 0; filter: none; }
body.ov-flut .coll-seite__figur { right: var(--rand); bottom: clamp(10px, 1.4vw, 24px); }
body.ov-flut .coll-seite__zahl { margin-left: var(--rand); }
body.ov-flut .coll-seite .wkante { height: clamp(90px, 12vh, 150px); }
body.ov-flut.tax-ov_collection .kopf-platz { background: var(--lila); }
body.ov-flut.tax-ov_collection.term-tofu .kopf-platz { background: var(--t-coral, #E2694A); }
body.ov-flut .coll-seite__ware { padding-top: 4vh; }
@media (max-width: 760px) {
  body.ov-flut .coll-seite__figur { margin: 12px auto 0; }
  body.ov-flut .coll-seite__ware { padding-top: 4vh; }
}

/* The cut and its running line go through the full width, behind the mascot; he wears a thick
   outline in the plate's colour, like a sticker, which separates him from the strip (vredix 2026-11-05) */
body.ov-flut .coll-seite__zeile { margin-right: 0; }

/* TOFU (vredix 2026-11-05): the mascot is only the block with its face, as in the Tofu page's
   wordmark, not the device; the cards wear the Tofu teal instead of bone on the light sand ground */
/* the block sits on the running line's middle (= the plate's middle, rows 1 and 3 are equal), turned
   slightly right, 10 % smaller than first built (vredix 2026-11-05) */
body.ov-flut .coll-seite--tofu .coll-seite__figur { width: clamp(244px, 30.4vw, 609px); top: 50%; bottom: auto; transform: translateY(-50%) rotate(4deg); }
body.ov-flut .coll-seite__block { display: block; width: 100%; height: auto; overflow: visible; }
body.ov-flut .coll-seite__block .tb-wand { fill: var(--t-coral); }
body.ov-flut .coll-seite__block .tb-b { fill: var(--t-bone); }
body.ov-flut .coll-seite__block .tb-f { fill: var(--t-ink); }
body.ov-flut .coll-seite__block .tb-m { fill: none; stroke: var(--t-ink); stroke-width: 3.12; stroke-linecap: round; }
/* picture well in bone: it must differ from the sand ground behind the cards (vredix 2026-11-05) */
body.ov-flut .coll-seite--tofu ul.products { --k-grund: var(--t-teal); --k-schrift: var(--t-ink); --k-bild: var(--t-bone); }

/* the plate's transparent cut shows the page ground: ink like the products band below
   (the shop's apricot ground showed through before) */
body.ov-flut.tax-ov_collection.term-tofu { background: #141413; }
@media (max-width: 760px) {
  body.ov-flut .coll-seite--tofu .coll-seite__figur { top: auto; transform: rotate(4deg); width: 79%; }
}

/* ---- TOFU header in the Tofu page's look (vredix 2026-11-05): the plain near-black bar with the coral
   logo and flat sand tabs in ink (tofu-seite/tofu.css .tkopf/.ttab); the menu opens as a bone panel.
   Only on the collection page itself; product pages keep the shop's header. ---- */
body.ov-flut.term-tofu.tax-ov_collection .kopf { --hinter: #141413; background: #141413; box-shadow: none; }
body.ov-flut.term-tofu.tax-ov_collection .kopf__logo svg.ov-logo { color: #E2694A; }
body.ov-flut.term-tofu.tax-ov_collection .kopf__nav { gap: 6px; }
body.ov-flut.term-tofu.tax-ov_collection .kopf .knopfk {
  height: 44px; padding: 0 15px; border-radius: 9px; box-shadow: none;
  background: #DCD5C6; color: #111111;
  font: 650 15px/1 "Archivo", var(--anzeige); font-stretch: 108%; letter-spacing: 0;
  transition: transform .2s, background-color .2s;
}
body.ov-flut.term-tofu.tax-ov_collection .kopf .knopfk:hover { transform: translateY(-1px); box-shadow: none; background: #F1EADB; }
body.ov-flut.term-tofu.tax-ov_collection .kopf .knopfk:active { transform: none; box-shadow: none; }
body.ov-flut.term-tofu.tax-ov_collection .kopf .knopfk[aria-expanded="true"] { transform: none; box-shadow: none; background: #E2694A; }
body.ov-flut.term-tofu.tax-ov_collection .kopf .cart-count { background: #E2694A; color: #111111; box-shadow: 0 0 0 2px #141413; }
body.ov-flut.term-tofu.tax-ov_collection .menue__liste { background: #F1EADB; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
body.ov-flut.term-tofu.tax-ov_collection .menue__punkt { color: #111111; border-radius: 9px; font-family: "Archivo", var(--anzeige); }
body.ov-flut.term-tofu.tax-ov_collection .menue__punkt:hover,
body.ov-flut.term-tofu.tax-ov_collection .menue__punkt:focus-visible { background: #DCD5C6; color: #111111; }
body.ov-flut.term-tofu.tax-ov_collection .menue__ic { background: #DCD5C6; color: #111111; }
body.ov-flut.term-tofu.tax-ov_collection .menue__punkt:hover .menue__ic,
body.ov-flut.term-tofu.tax-ov_collection .menue__punkt:focus-visible .menue__ic { background: #E2694A; color: #111111; }
body.ov-flut.term-tofu.tax-ov_collection .menue__liste li.menue__gruppe { color: #111111; font-family: "Archivo", var(--anzeige); letter-spacing: 0; text-transform: none; font-size: 13px; opacity: 0.6; }
@media (prefers-reduced-motion: reduce) {
  body.ov-flut.term-tofu.tax-ov_collection .kopf .knopfk { transition: none; }
  body.ov-flut.term-tofu.tax-ov_collection .kopf .knopfk:hover { transform: none; }
}
@media (max-width: 700px) {
  body.ov-flut.term-tofu.tax-ov_collection .kopf .knopfk { height: auto; padding: 10px 12px; }
}