/* ===================================================================
   Projekte im Vorschlag „Flut": Übersicht (projekte.php) und Projektseite
   (projekt.php). Nur auf diesen Seiten geladen, nach flut.css.
   Regeln: docs/style-guide.md im OpenVuture-Ordner, Abschnitt „Projekte".
   =================================================================== */

/* Die Inhaltsseiten begrenzen Listen auf Lesebreite (flut.css, alte
   Seiten-Styles). Raster und Galerie sind Listen, aber keine Lesespalte. */
body.ov-flut #main .content-block :is(.projektraster, .projektraster > li, .projektgalerie__liste, .projektgalerie__liste > li) { max-width: none; }

/* ---------- Filter ----------
   Auf Apricot: umrandet in Lila, die gewählte Art gefüllt Lila mit Apricot. */
body.ov-flut .projektfilter { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 6vh; }
body.ov-flut .projektfilter[hidden] { display: none; }
body.ov-flut .projektfilter__wahl {
  padding: 10px 18px;
  border: 2px solid var(--lila);
  border-radius: 10px;
  background: transparent;
  color: var(--lila);
  font: 800 15px/1 var(--anzeige);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
body.ov-flut .projektfilter__wahl:hover { background: var(--schaum); }
body.ov-flut .projektfilter__wahl[aria-pressed="true"] { background: var(--lila); color: var(--apri); }

/* ---------- Raster und Karte ---------- */
body.ov-flut .projektraster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: clamp(28px, 3vw, 48px);
  grid-auto-rows: 1fr;   /* alle Karten gleich hoch, auch über die Reihen hinweg */
}
body.ov-flut .projektkarte { display: flex; }
body.ov-flut .projektkarte > .projektkarte__flaeche { flex: 1; }
body.ov-flut .projektkarte[hidden] { display: none; }
body.ov-flut .projektkarte__flaeche {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
  box-sizing: border-box;
  padding: clamp(22px, 2.4vw, 36px) clamp(22px, 2.4vw, 36px) 90px;
  border-radius: 48px 20px 44px 22px;
  background: var(--lila);
  color: var(--apri);
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(97, 63, 117, 0.35);
}
body.ov-flut .projektkarte:nth-child(even) .projektkarte__flaeche { border-radius: 20px 48px 22px 44px; }
body.ov-flut .projektkarte__bild {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  margin: 0 0 4px;
  border-radius: 34px 12px 30px 12px;
  overflow: hidden;
  isolation: isolate;
}
body.ov-flut .projektkarte:nth-child(even) .projektkarte__bild { border-radius: 12px 34px 12px 30px; }
body.ov-flut .projektkarte__bild img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Foto nie beschneiden: der Rand zeigt es weichgezeichnet (wie die Produktgalerie). */
body.ov-flut :is(.projektkarte__bild, .projektgalerie__bild)::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 .projektkarte__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
body.ov-flut .projektkarte__nr { font-family: var(--mono); font-weight: 700; font-size: 14px; letter-spacing: 0.2em; }
body.ov-flut .projektkarte__ic {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--apri);
  color: var(--lila);
  display: grid;
  place-items: center;
  overflow: hidden;
  font: 900 30px/1 var(--anzeige);
}
body.ov-flut .projektkarte__ic :is(img, .prj-icon__img) { width: 100%; height: 100%; object-fit: cover; }
body.ov-flut .projektkarte__ic .prj-icon__svg { display: block; width: 46%; height: 46%; }
body.ov-flut .projektkarte__ic .prj-icon__svg svg { width: 100%; height: 100%; }
body.ov-flut .projektkarte__titel {
  color: var(--apri);
  font-family: var(--anzeige);
  font-weight: 900;
  font-variation-settings: "wdth" 112, "opsz" 72;
  font-size: clamp(28px, 2.4vw, 40px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
body.ov-flut .projektkarte__text { color: var(--schaum); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.6; }
body.ov-flut .projektkarte__arten { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
body.ov-flut .projektkarte__mehr { margin-top: auto; font-weight: 800; font-size: 17px; transition: translate 0.35s var(--weich); }
body.ov-flut a.projektkarte__flaeche:hover .projektkarte__mehr { translate: 10px 0; }
body.ov-flut .projektkarte__linien { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 70px; opacity: 0.4; pointer-events: none; }
body.ov-flut .projektkarte__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 .projektkarte__linien path:nth-child(2) { animation-duration: 7s; opacity: 0.7; }
body.ov-flut .projektkarte__linien path:nth-child(3) { animation-duration: 4s; opacity: 0.45; }

/* ---------- Stand ----------
   Woran gerade gearbeitet wird, pulsiert; Geplantes ist ein Ring. */
body.ov-flut .projektstand { gap: 10px; font-size: 12px; }
body.ov-flut .projektstand i { background: currentColor; }
body.ov-flut .projektstand--steht i,
body.ov-flut .projektstand--geplant i { animation: none; }
body.ov-flut .projektstand--geplant i { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
body.ov-flut .projektleer { margin: 4vh 0; }
body.ov-flut .projektgithub { margin: 8vh 0 0; }
body.ov-flut .projektleer i { background: var(--lila); }

/* ---------- Projektseite: Kennzeichen und Links ---------- */
body.ov-flut .projektfakten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px clamp(32px, 5vw, 80px);
  margin: 0 0 8vh;
  padding: 0 0 4vh;
  border-bottom: 3px solid var(--lila);
}
body.ov-flut .projektfakten__liste { display: flex; flex-wrap: wrap; gap: 20px clamp(28px, 4vw, 64px); margin: 0; }
body.ov-flut .projektfakten__punkt { display: flex; flex-direction: column; gap: 6px; }
body.ov-flut .projektfakten__punkt dt { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.75; }
body.ov-flut .projektfakten__punkt dd { margin: 0; font-weight: 700; font-size: 18px; }
body.ov-flut .projektfakten__punkt .projektstand { font-size: 14px; }
body.ov-flut .projektfakten__links { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 36px; }

/* ---------- Bildergalerie ----------
   Das erste Bild gross, die weiteren daneben und darunter; jede Kachel 4:3,
   das Foto ganz darin. */
body.ov-flut .projektgalerie { margin: 0 0 10vh; }
body.ov-flut .projektgalerie__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
}
body.ov-flut .projektgalerie__kachel { margin: 0; }
/* 1: ein Bild. 2 und 4: gleich grosse Kacheln. 3: das erste gross, zwei
   daneben übereinander. Ab 5: das erste über zwei Spalten und Zeilen. */
body.ov-flut .projektgalerie--viele .projektgalerie__kachel:first-child,
body.ov-flut .projektgalerie--3 .projektgalerie__kachel:first-child { grid-column: span 2; grid-row: span 2; }
body.ov-flut .projektgalerie--1 .projektgalerie__liste { grid-template-columns: minmax(0, 1fr); max-width: 1100px; }
body.ov-flut .projektgalerie--3 .projektgalerie__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.ov-flut :is(.projektgalerie--2, .projektgalerie--4) .projektgalerie__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.ov-flut .projektgalerie__bild {
  position: relative;
  display: block;
  height: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 22px 10px 20px 10px;
  overflow: hidden;
  isolation: isolate;
  background: var(--lila);
  cursor: zoom-in;
}
body.ov-flut .projektgalerie__kachel:first-child .projektgalerie__bild { border-radius: 36px 12px 32px 12px; }
body.ov-flut .projektgalerie__bild img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.5s var(--weich); }
body.ov-flut .projektgalerie__bild:hover img { transform: scale(1.02); }

/* ---------- Lupe ---------- */
body.ov-flut .projektlupe {
  width: 100vw;
  max-width: none;
  height: 100svh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--band);
  color: var(--apri);
  overflow: hidden;
}
body.ov-flut .projektlupe::backdrop { background: #4C325D; }
body.ov-flut .projektlupe__buehne {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 72px max(16px, 7vw) 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
body.ov-flut .projektlupe__bild { min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; }
body.ov-flut .projektlupe__unter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; color: var(--schaum); font-size: 16px; text-align: center; }
body.ov-flut .projektlupe__zahl { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; }
body.ov-flut .projektlupe__knopf {
  position: absolute;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 10px;
  background: var(--apri);
  color: var(--lila);
  font: 800 28px/1 var(--anzeige);
  cursor: pointer;
}
body.ov-flut .projektlupe__knopf:hover { background: var(--schaum); }
body.ov-flut .projektlupe__knopf--zu { top: 14px; right: 14px; }
body.ov-flut .projektlupe__knopf--zurueck { left: 14px; top: 50%; translate: 0 -50%; }
body.ov-flut .projektlupe__knopf--weiter { right: 14px; top: 50%; translate: 0 -50%; }
body.ov-flut .projektlupe--einzeln .projektlupe__knopf:is(.projektlupe__knopf--zurueck, .projektlupe__knopf--weiter) { display: none; }

/* ---------- Bericht aus dem Editor ----------
   Absätze und Überschriften regelt flut.css (Inhaltsseiten); hier nur, was
   ein Bericht zusätzlich mitbringt: Bilder, Galerien, Videos, Zitate. */
body.ov-flut .projektseite .content-block > :is(figure, .wp-block-gallery, .wp-block-image, .wp-block-embed, .wp-block-video) {
  max-width: min(1100px, 100%);
  margin: 6vh 0;
}
body.ov-flut .projektseite .content-block :is(.wp-block-image, .wp-block-gallery) img { border-radius: 22px 10px 20px 10px; height: auto; }
body.ov-flut .projektseite .content-block > figure figcaption { margin-top: 10px; color: var(--lila); font-size: 15px; opacity: 0.85; text-align: left; }
body.ov-flut .projektseite .content-block > .wp-block-gallery figure figcaption { color: var(--schaum); }
body.ov-flut .projektseite .content-block .wp-block-embed iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 22px 10px 20px 10px; }
body.ov-flut .projektseite .content-block .wp-block-video video { width: 100%; border-radius: 22px 10px 20px 10px; }
body.ov-flut .projektseite .content-block > :is(blockquote, .wp-block-quote) {
  max-width: 60ch;
  margin: 6vh 0;
  padding: 0 0 0 28px;
  border-left: 3px solid var(--lila);
  font-weight: 600;
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.45;
}
body.ov-flut .projektseite .content-block > :is(blockquote, .wp-block-quote) cite { display: block; margin-top: 10px; font-family: var(--mono); font-size: 13px; font-style: normal; letter-spacing: 0.14em; }

/* ---------- README ---------- */
body.ov-flut .projektreadme { max-width: 980px; margin: 10vh 0 0; padding: 4vh 0 0; border-top: 3px solid var(--lila); }
body.ov-flut .projektreadme summary {
  cursor: pointer;
  font-family: var(--anzeige);
  font-weight: 900;
  font-variation-settings: "wdth" 108, "opsz" 72;
  font-size: clamp(24px, 2.2vw, 36px);
  text-transform: uppercase;
}
body.ov-flut .projektreadme__hinweis { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; }
body.ov-flut .projektreadme__text { font-size: 17px; line-height: 1.65; overflow-wrap: anywhere; }
body.ov-flut .projektreadme__text :is(img, video) { max-width: 100%; height: auto; }
body.ov-flut .projektreadme__text pre { overflow-x: auto; padding: 16px 18px; border-radius: 10px; background: var(--lila); color: var(--schaum); font: 500 14px/1.5 var(--mono); }
body.ov-flut .projektreadme__text :not(pre) > code { padding: 1px 6px; border-radius: 6px; background: var(--schaum); font: 500 0.9em var(--mono); }
body.ov-flut .projektreadme__text table { border-collapse: collapse; display: block; overflow-x: auto; }
body.ov-flut .projektreadme__text :is(th, td) { padding: 6px 12px; border: 1px solid var(--lila); }

body.ov-flut .projektende { margin: 10vh 0 0; }

/* ---------- Telefone ---------- */
@media (max-width: 700px) {
  body.ov-flut .projektgalerie__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.ov-flut :is(.projektgalerie--3, .projektgalerie--viele) .projektgalerie__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.ov-flut :is(.projektgalerie--3, .projektgalerie--viele) .projektgalerie__kachel:first-child { grid-column: 1 / -1; grid-row: auto; }
  body.ov-flut .projektfakten { justify-content: flex-start; }
  body.ov-flut .projektlupe__knopf--zurueck, body.ov-flut .projektlupe__knopf--weiter { top: auto; bottom: 14px; translate: none; }
  body.ov-flut .projektlupe__buehne { padding: 72px 12px 84px; }
}

@media (prefers-reduced-motion: reduce) {
  body.ov-flut .projektkarte__linien path { animation: none; }
  body.ov-flut .projektkarte__mehr, body.ov-flut .projektgalerie__bild img { transition: none; }
}

/* ---------- Logo im Seitenkopf der Projektseite ----------
   Wie der Kreis der Karte: Apricot auf Lila, das Zeichen in Lila. Nur
   Projekte mit eigenem Logo bekommen ihn (ov_flut_projektzeichen). */
body.ov-flut .seitenkopf__titelzeile { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); max-width: 100%; }
body.ov-flut .seitenkopf__titelzeile .seitenkopf__titel { min-width: 0; }
body.ov-flut .seitenkopf__zeichen {
  flex: 0 0 auto;
  width: clamp(64px, 7.5vw, 136px);
  height: clamp(64px, 7.5vw, 136px);
  border-radius: 50%;
  background: var(--apri);
  color: var(--lila);
  display: grid;
  place-items: center;
  overflow: hidden;
}
body.ov-flut .seitenkopf__zeichen :is(img, .prj-icon__img) { width: 100%; height: 100%; object-fit: cover; }
body.ov-flut .seitenkopf__zeichen .prj-icon__svg { display: block; width: 52%; height: 52%; }
body.ov-flut .seitenkopf__zeichen .prj-icon__svg svg { width: 100%; height: 100%; }
@media (max-width: 700px) {
  body.ov-flut .seitenkopf__titelzeile { flex-direction: column; align-items: flex-start; }
  body.ov-flut .seitenkopf__zeichen { width: 64px; height: 64px; }
}

/* Volle Wortmarke statt Zeichen + Titel (ov_flut_projektwortmarke) */
body.ov-flut .seitenkopf__wortmarke { margin: 0; line-height: 0; color: var(--apri); }
body.ov-flut .seitenkopf__wortzeile {
  display: flex; flex-direction: column; align-items: flex-start; gap: clamp(48px, 9vh, 112px);
  width: 100%; padding-bottom: clamp(64px, 11vh, 128px);
  border-bottom: 2px solid var(--apri);
}
body.ov-flut .seitenkopf__wortzeile .seitenkopf__lead {
  max-width: none; text-wrap: balance;
  font: 800 clamp(24px, 3vw, 52px)/1.1 var(--anzeige); letter-spacing: -0.01em;
}
/* Project Tofu: Play und Farbpunkte dicht unter der Linie, die Bühne rückt
   hoch, damit Knöpfe und Modell zusammen stehen. Der Kopf liegt dabei über
   der Bühne, so bleiben Text, Linie und Knöpfe sichtbar und klickbar. */
body.ov-flut .seitenkopf:has(.seitenkopf__wortzeile) { position: relative; z-index: 1; }
body.ov-flut .seitenkopf__wortzeile + .tofu-steuerung { margin-top: 0; }
body.ov-flut .seitenkopf:has(.seitenkopf__wortzeile) + .tofu-buehne--bewegt { margin-top: -10vh; margin-top: -10svh; }
@media (max-width: 700px) {
  /* Hochkant steht das Modell mittig im hohen Rahmen, also weiter hoch. */
  body.ov-flut .seitenkopf:has(.seitenkopf__wortzeile) + .tofu-buehne--bewegt { margin-top: -25vh; margin-top: -25svh; }
}
body.ov-flut .seitenkopf__wortmarke svg { display: block; height: clamp(120px, 14vw, 250px); width: auto; max-width: 100%; }
body.ov-flut .seitenkopf__vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 700px) {
  body.ov-flut .seitenkopf__wortmarke svg { height: auto; width: min(100%, 340px); }
  body.ov-flut .seitenkopf__wortzeile { gap: 36px; }
  body.ov-flut .seitenkopf__wortzeile .seitenkopf__lead { font-size: clamp(22px, 6.2vw, 28px); }
}