/* Automatisch aus style.css herausgeloest (CSS-Diaet, 02.09.2026).
   REGEL: Stile, die nur EINE Seite braucht, wohnen in css/seiten/<seite>.css.
   Gemeinsames wohnt in style.css. Wer hier etwas aendert, prueft mit
   werkzeuge/vor-upload-pruefen.sh und zieht die Cache-Stempel hoch. */

.pv-hero-grid { align-items: center; }

/* ---- Hero: Projekt-Überblickskarte -------------------------------------- */
.pv-ov {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 26px 18px;
  box-shadow: var(--shadow-lg);
}
.pv-ov-title {
  margin: 0 0 4px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--teal);
}
/* Zeile mit Kundenlogo links. Die Logos haben sehr verschiedene
   Seitenverhaeltnisse (von 1113x471 bis 903x1068), deshalb eine feste
   quadratische Flaeche mit object-fit: contain. */
.pv-ov-row {
  padding: 14px 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.pv-ov-logo {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  padding: 7px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.pv-ov-txt { min-width: 0; }
.pv-ov-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.pv-ov-row + .pv-ov-row { border-top: 1px solid var(--border); }
.pv-ov-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
}
.pv-ov-head strong { font-size: 15.5px; color: var(--ink); }
.pv-ov-time {
  font-size: 12px; font-weight: 700;
  color: var(--teal-muted);
  white-space: nowrap;
}
.pv-ov-meta { margin: 1px 0 8px; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.pv-ov-bar {
  height: 8px; border-radius: 4px;
  background: rgba(16,100,102,0.07);
  border: 1px solid rgba(16,100,102,0.14);
  overflow: hidden;
}
.pv-ov-fill {
  display: block; height: 100%;
  border-radius: 4px;
  transform-origin: left center;
}
/* Balkenlaenge = Zeitraum, proportional: 18 Monate = volle Breite */
/* Balkenlaengen proportional zum Zeitraum: 18 Monate = 100 %.
   Schwarzwaldbau laeuft seit rund 12 Monaten = 67 %. Vorher standen hier
   11 % fuer "zwei Drehtermine" - das liess eine laufende Zusammenarbeit
   wie einen einmaligen Kleinauftrag aussehen. (04.08.2026, Michis Hinweis) */
.pv-ov-fill--sb { width: 67%; background: var(--teal); }
.pv-ov-fill--fh { width: 100%; background: var(--peach); }
.pv-ov-fill--ph { width: 17%; background: var(--ink); opacity: 0.72; }
.pv-ov-result {
  display: inline-block;
  margin: 9px 0 0;
  padding: 5px 11px;
  border-radius: 8px;
  background: var(--teal-tint);
  font-size: 13.5px; font-weight: 700;
  color: var(--teal-dark);
}
.pv-ov-note { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--ink-soft); opacity: 0.8; }

/* ---- Die drei Case-Reihen ------------------------------------------------ */
.pv-cases h2 { margin: 8px 0 10px; }
.pv-caselist { display: grid; gap: 26px; margin-top: 34px; }
.pv-case {
  --case-accent: var(--teal);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(26,35,34,0.08);
  transition: transform 0.32s var(--ease-marke),
              box-shadow 0.32s ease,
              border-color 0.32s ease;
}
.pv-case--fh { --case-accent: var(--peach-dark); }
.pv-case--ph { --case-accent: var(--ink); }
.pv-case:hover,
.pv-case:has(.pv-case-title a:focus-visible) {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(16,100,102,0.26);
}
/* jede zweite Reihe: Bild rechts statt links */
.pv-case:nth-child(even) .pv-case-media { order: 2; }

.pv-case-media {
  position: relative;
  overflow: hidden;
  background: var(--teal-tint);
  min-height: 300px;
}
.pv-case-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.6s var(--ease-marke);
}
.pv-case:hover .pv-case-media img,
.pv-case:has(.pv-case-title a:focus-visible) .pv-case-media img { transform: scale(1.045); }

.pv-case-body {
  display: flex; flex-direction: column;
  gap: 15px;
  padding: 40px 46px 36px;
}
.pv-case-eyebrow {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 10px;
  margin: 0;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--teal);
}
.pv-case-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 12px; font-weight: 800; font-style: normal; line-height: 1;
  color: var(--case-accent); border: 2px solid var(--case-accent);
  opacity: 0.85; vertical-align: middle;
  letter-spacing: 0; text-transform: none;
  margin-right: 10px;
}
.pv-dot { color: var(--teal-muted-light); }
.pv-case-title {
  margin: 0;
  font-size: clamp(22px, 2.3vw, 29px);
  line-height: 1.18;
  letter-spacing: -0.02em;
}
.pv-case-title a { color: var(--ink); text-decoration: none; }
/* Die ganze Reihe klickbar: der Titel-Link legt sich unsichtbar darueber */
.pv-case-title a::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--radius-lg);
}
/* Ergebnis typografisch vorn, mit Akzentstrich je Case */
.pv-case-result {
  position: relative;
  display: flex; flex-direction: column; gap: 5px;
  margin: 4px 0 0;
  padding-top: 16px;
}
.pv-case-result::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 52px; height: 3px;
  background: var(--case-accent);
  border-radius: 2px;
}
.pv-case-result strong {
  font-size: clamp(23px, 2.2vw, 29px);
  font-weight: 800;
  color: var(--teal-dark);
  letter-spacing: -0.02em;
  line-height: 1.14;
  font-variant-numeric: tabular-nums;
}
.pv-case-result span { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ink-soft); }

.pv-case-services {
  margin: 2px 0 0;
  font-size: 13px; font-weight: 600;
  color: var(--ink-soft);
  opacity: 0.85;
}
.pv-more {
  display: inline-flex; align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  font-size: 14.5px; font-weight: 700;
  color: var(--teal-dark);
}
.pv-arrow { transition: transform 0.25s var(--ease-marke); }
.pv-case:hover .pv-arrow,
.pv-case:has(.pv-case-title a:focus-visible) .pv-arrow { transform: translateX(4px); }

/* ---- Das Prinzip (dunkel) ------------------------------------------------ */
.pv-prinzip {
  padding: var(--space-md) 0;
  background: var(--ink);
  color: rgba(255,255,255,0.82);
}
.pv-prinzip h2 {
  color: var(--white);
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.15;
  margin: 8px 0 16px;
}
.pv-prinzip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  margin-top: 26px;
}
.pv-pr { border-top: 1px solid rgba(255,255,255,0.16); padding-top: 16px; }
.pv-pr-num {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 13px; font-weight: 800; font-style: normal; line-height: 1;
  background: var(--white); color: var(--teal);
  border: 2px solid var(--border);
  background: transparent; color: var(--peach); border-color: var(--peach);
  opacity: 0.9;
  margin-bottom: 10px;
}
.pv-pr h3 { margin: 0 0 6px; font-size: 16.5px; color: var(--white); }
.pv-pr p { margin: 0; font-size: 14.5px; line-height: 1.62; color: rgba(255,255,255,0.68); }

/* Prozesslinie: zeichnet sich beim Reveal von links nach rechts */
.pv-flow {
  margin-top: 40px;
  padding: 26px 30px 22px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
}
.pv-flow-steps {
  list-style: none; margin: 0; padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.pv-flow-steps::before {
  content: '';
  position: absolute; top: 8px; left: 9px; right: 9px;
  height: 2px;
  background: rgba(255,255,255,0.22);
}
.pv-flow-step { position: relative; }
.pv-flow-marker {
  position: relative; z-index: 1;
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--peach);
  margin-bottom: 10px;
}
.pv-flow-step strong { display: block; font-size: 15px; color: var(--white); }
.pv-flow-link {
  display: inline-block;
  margin-top: 24px;
  font-size: 14.5px; font-weight: 600;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.34);
  padding-bottom: 2px;
}
.pv-flow-link:hover { border-color: var(--peach); }
.pv-flow-link span { display: inline-block; margin-left: 5px; }

/* ---- Transparenz (kompakt, weiss) ---------------------------------------- */
.pv-trans { padding: var(--space-sm) 0; background: var(--white); }
.pv-trans h2 {
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.15;
  margin: 8px 0 16px;
}
.pv-trans-marks {
  list-style: none;
  display: flex; flex-wrap: wrap;
  gap: 12px 36px;
  margin: 22px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--border);
}
.pv-trans-marks li {
  display: flex; align-items: center;
  gap: 10px;
  font-size: 14px; font-weight: 700;
  color: var(--teal-dark);
}
.pv-trans-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--peach);
  flex-shrink: 0;
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 980px) {
  .pv-case { grid-template-columns: 1fr; }
  .pv-case:nth-child(even) .pv-case-media { order: 0; }
  .pv-case-media { min-height: 0; aspect-ratio: 16 / 9; }
  .pv-case-media img { position: static; height: 100%; }
  .pv-case-body { padding: 26px 26px 26px; }
  .pv-prinzip-grid { grid-template-columns: 1fr; gap: 22px; }
  .pv-flow-steps { grid-template-columns: 1fr; gap: 18px; }
  /* Linie vertikal statt horizontal */
  .pv-flow-steps::before { top: 9px; bottom: 9px; left: 8px; right: auto; width: 2px; height: auto; }
  .pv-flow-step { padding-left: 34px; }
  .pv-flow-step .pv-flow-marker { position: absolute; left: 0; top: 0; margin: 0; }}


/* ---- Bewegung reduzieren ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pv-case, .pv-case-media img, .pv-arrow { transition: none; }
  .pv-case:hover { transform: none; }
  .pv-case:hover .pv-case-media img { transform: none; }}



/* ==========================================================================
   MOBILE-FEINSCHLIFF (Mobile-Audit 31.07.2026)
   Gilt ausschliesslich bis 640px. Desktop und Tablet bleiben unberuehrt.
   ========================================================================== */
@media (max-width: 640px) {
  
  /* dazu passend: die Zeitangabe der Ueberblickskarte darf in der schmalen
     Karte umbrechen statt sie aufzuspannen (bei 390px bleibt sie einzeilig) */
  .pv-ov-time { white-space: normal; }
  
  /* /projekte/ Case-Reihen: Die Eyebrow ist ein Flex-Container, der Trennpunkt
     ein eigenes Flex-Item. Mobil bricht die Zeile immer vor dem zweiten Label,
     der Punkt blieb als einzelnes Zeichen am Zeilenende haengen
     ("01 SCHWARZWALDBAU ·" / "ZWEI DREHTERMINE"). Er wird nur unsichtbar
     gemacht, nicht ausgeblendet - display:none wuerde die beiden Textknoten zu
     einem Flex-Item verschmelzen und die 10px Luecke zwischen den Labels
     verschwinden lassen. */
  .pv-case-eyebrow .pv-dot { color: transparent; }}


/* --- /projekte/, Prinzip-Zeitachse ------------------------------------ */
/* Dieselbe Schwaeche: die Linie lief 240px ueber die vierte Station
   "Entwicklung ueber Zeit" hinaus. Sie endet jetzt in deren Mitte (vier
   gleiche Spalten, 24px Abstand, Marker 18px). Erst ab 981px, weil die Linie
   darunter senkrecht steht und dort right:auto braucht. */
@media (min-width: 981px) {
  .pv-flow-steps::before { right: calc(25% - 27px); }}


@media (max-width: 640px) {

  /* --- /projekte/ ------------------------------------------------------ */
  /* In der Uebersichtskarte brach die rechtsstehende Zeitangabe "Zwei
     Drehtermine" zweizeilig um und rutschte unter die Grundlinie des Titels;
     die Zeile wurde fast doppelt so hoch wie die beiden darunter. */
  .pv-ov-head { flex-wrap: wrap; }
  .pv-ov-time { flex: none; }
  .pv-ov-row { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .pv-ov-logo { width: 44px; height: 44px; padding: 6px; border-radius: 10px; }}


/* Zeitraum-Abschnitt auf /projekte/ (04.08.2026). Alles andere kommt aus
   .pv-prinzip; hier nur die Textbreite der beiden Fliesstext-Absaetze und
   der Abstand des Schlusssatzes. Ohne den klebt er direkt unter der ersten
   Karte, weil .pv-prinzip-grid seinen Abstand nur nach OBEN setzt.
   (04.08.2026, im Bildschirmfoto aufgefallen) */
.pv-zr-intro { max-width: 62ch; }
.pv-prinzip-grid + .pv-zr-intro { margin-top: 40px; }