/* Pitch-Seiten der Branchen, Aufbau eins zu eins nach der Vorlage, im Branding von hnvr.me (11.11.2026, PitchSeite.astro).
   Masse aus der Vorlage (gemessen bei 1440 px): Kapitelleiste links rund 65 px vom Rand bis zum Inhalt, Auftakt 66 px,
   Abschnittstitel 37 px, grosser Satz 105 px, Schluss 127 px, Flaechen mit 12 px Radius und 8 px Abstand zueinander.
   Farben: Die Vorlage arbeitet mit fuenf Flaechentoenen. Hier sind es Toene der eigenen Marke (Klassen p-ton-...):
   Tinte, tiefes Graphit, Fadenfarbe, zarter Fadenton, heller warmer Ton. Schriften Clash und DM.
   Keine Bewegung von selbst, kein Skript noetig; die Kapitelleiste bleibt beim Scrollen stehen (position: sticky). */
/* 11.11.2026, Tim: "man erkennt kaum etwas": schmalere Kapitelleiste, Bilder und Filme ueber die volle Breite ihrer Flaeche,
   Beispielseiten in drei statt vier Spalten, Bildkarte breiter als die Textkarte. */
.pv { --p-tinte: #14161A; --p-tief: #2A2E36; --p-faden: #FF7120; --p-zart: #FFE2D0; --p-hell: #ECEAE4; --p-auf-dunkel: #F5F4F0; --p-auf-hell: #14161A; --p-leise-dunkel: #C9CCD3; --p-leise-hell: #4A4E57;
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 0 var(--a3); width: min(1440px, 100% - 2 * var(--a3)); margin: var(--a6) auto var(--a12); align-items: start; }
@media (prefers-color-scheme: dark) { .pv { --p-hell: #1D2026; --p-zart: #3B2415; --p-tief: #262A32; --p-tinte: #000000; --p-auf-hell: #F5F4F0; --p-leise-hell: #B4B8C0; } }
html.k-ende .pv { --p-hell: #FFF1E7; --p-zart: #FFE2D0; --p-auf-hell: #14161A; --p-leise-hell: #4A4E57; --p-tinte: #14161A; --p-tief: #2A2E36; }

/* Flaechentoene */
.p-ton-tinte { background: var(--p-tinte); color: var(--p-auf-dunkel); --pt-leise: var(--p-leise-dunkel); --pt-linie: rgba(255, 255, 255, .16); }
.p-ton-tief { background: var(--p-tief); color: var(--p-auf-dunkel); --pt-leise: var(--p-leise-dunkel); --pt-linie: rgba(255, 255, 255, .16); }
.p-ton-faden { background: var(--p-faden); color: #14161A; --pt-leise: #2E1E12; --pt-linie: rgba(20, 22, 26, .2); }
.p-ton-zart { background: var(--p-zart); color: var(--p-auf-hell); --pt-leise: var(--p-leise-hell); --pt-linie: rgba(128, 128, 128, .3); }
.p-ton-hell { background: var(--p-hell); color: var(--p-auf-hell); --pt-leise: var(--p-leise-hell); --pt-linie: rgba(128, 128, 128, .3); }

/* Kapitelleiste wie in der Vorlage: oben die Marke, in der Mitte die Kapitel, unten der Ruf */
.pv-leiste { position: sticky; top: 96px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--a4); min-height: min(560px, calc(100vh - 140px)); padding: var(--a2) var(--a2) var(--a2) 0; border-right: 1px solid var(--linie-stark); font-size: var(--t1); }
.pv-marke { font: 600 var(--t3)/1 Clash, sans-serif; letter-spacing: -.02em; text-decoration: none; }
.pv-leiste ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pv-leiste ol a { text-decoration: none; color: var(--leise); }
.pv-leiste ol a:hover { color: var(--text); }
.pv-ruf { font-weight: 600; text-decoration: none; }

.pv-inhalt { display: grid; gap: var(--a1); min-width: 0; }
.pv-teil { min-width: 0; scroll-margin-top: 96px; }
.pv h3 { font: 500 clamp(26px, 2.6vw, 37px)/1.12 Clash, sans-serif; letter-spacing: -.02em; margin: 0; max-width: 22ch; text-wrap: balance; }
.pv h4 { font: 500 var(--t3)/1.25 Clash, sans-serif; letter-spacing: -.01em; margin: 0 0 var(--a2); }
.pv-flaeche, .pv-karte { border-radius: 12px; padding: clamp(20px, 2.4vw, 36px); min-width: 0; }
.pv-kopf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--a3) var(--a6); align-items: start; padding: var(--a6) clamp(12px, 1.6vw, 24px) var(--a3); }
.pv-kopf p { margin: 0; color: var(--leise); font-size: var(--t2); max-width: 52ch; }
.pv-quelle { margin: var(--a1) clamp(12px, 1.6vw, 24px) 0; font: 400 var(--t1)/1.3 DM, sans-serif; letter-spacing: 0; color: var(--leise); }
.pv-fliess { color: var(--leise); max-width: 60ch; margin: var(--a2) 0 0; }
.pv img, .pv video { display: block; max-width: 100%; height: auto; }

/* held: kleine Zeile, dreizeiliger Satz, darunter die Beispielseiten als Mauerwerk */
.pvf-held { padding: var(--a4) clamp(12px, 1.6vw, 24px) 0; }
.pv-vor { margin: 0 0 var(--a4); font: 400 clamp(18px, 1.7vw, 24px)/1.3 DM, sans-serif; }
.pv-held-titel { font: 400 clamp(32px, 4.6vw, 66px)/1.14 Clash, sans-serif; letter-spacing: -.025em; margin: 0 0 var(--a6); max-width: 22ch; }
.pv-schau { list-style: none; margin: 0 calc(-1 * clamp(12px, 1.6vw, 24px)) 0; padding: 0; columns: 3; column-gap: var(--a1); }
.pv-schau li { break-inside: avoid; margin: 0 0 var(--a1); }
.pv-schau img, .pv-schau video { width: 100%; border-radius: 12px; background: var(--p-hell); }
.pv-schau-film video { aspect-ratio: 9 / 14; object-fit: cover; }

/* zahlen: vier farbige Kacheln in einer Reihe, darunter die Marken */
.pv-zahlen { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a1); }
.pv-zahlen div { border-radius: 12px; padding: var(--a3); min-height: 250px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.pv-zahlen dd { margin: 0; font: 400 clamp(28px, 3.2vw, 46px)/1 Clash, sans-serif; letter-spacing: -.02em; }
.pv-zahlen dt { font-size: var(--t2); max-width: 16ch; overflow-wrap: break-word; hyphens: auto; }
.pv-zeichen { list-style: none; margin: var(--a1) 0 0; padding: var(--a3); display: flex; flex-wrap: wrap; gap: var(--a3) var(--a6); align-items: center; justify-content: space-between; background: #FFFFFF; border-radius: 12px; }
.pv-zeichen img { height: 26px; width: auto; }

/* marke: Titel, vier Merkmale in einer Reihe mit Trennlinien, darunter das grosse Bild */
.pv-merkmale, .pv-spalten { list-style: none; margin: var(--a4) 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a3); }
.pv-merkmale li, .pv-spalten li { padding-left: var(--a2); border-left: 1px solid var(--pt-linie, var(--linie-stark)); font-size: var(--t2); color: var(--pt-leise, var(--leise)); }
.pv-spalten { margin: var(--a4) clamp(12px, 1.6vw, 24px); }
.pv-flaeche .pv-spalten { margin-left: 0; margin-right: 0; }
.pv-breit { width: 100%; border-radius: 10px; }
.pv-spalten ~ .pv-buehne, .pv-buehne { display: grid; place-items: center; padding: clamp(16px, 2.4vw, 40px); }
.pv-buehne img { border-radius: 10px; width: 100%; }
.pv-spalten:has(li:nth-child(3):last-child), .pv-reiter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pv-marke + h3, .pv-spalten + h3 { margin: 0; }
.pv-spalten + .pv-flaeche { margin-top: var(--a1); }
.pvf-spalten > h3, .pvf-kacheln > h3, .pvf-beispiele > h3 { padding: var(--a6) clamp(12px, 1.6vw, 24px) 0; }

/* beispiele: eigene Projekte an dem Platz, den die Vorlage dafuer vorsieht */
.pv-projekte { list-style: none; margin: var(--a3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a1); }
.pv-projekte a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--a1) var(--a2); text-decoration: none; }
.pv-projekte img { grid-column: 1 / -1; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 12px; border: 1px solid var(--linie); }
.pv-projekte span { display: grid; font-size: var(--t2); color: var(--leise); padding: 0 4px; }
.pv-projekte strong { color: var(--text); }
.pv-projekte i { font-style: normal; padding-right: 4px; }

/* paar: dunkle Karte mit Pfeilliste neben heller Bildkarte, im Wechsel gespiegelt */
.pvf-paar { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--a1); align-items: stretch; margin-top: var(--a3); }
.pvf-paar--rechts { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.pvf-paar--rechts .pv-karte:first-child { order: 2; }
.pv-bildkarte { display: grid; gap: var(--a2); align-content: center; }
.pv-bildkarte img { border-radius: 10px; width: 100%; }
.pv-klein { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a1); }
.pv-pfeile { list-style: none; margin: var(--a4) 0 0; padding: 0; display: grid; gap: var(--a2); font-size: var(--t2); }
.pv-pfeile li { position: relative; padding-left: 28px; color: var(--pt-leise, var(--leise)); }
.pv-pfeile li::before { content: "\2192"; position: absolute; left: 0; top: 0; color: var(--p-faden); }
.p-ton-faden .pv-pfeile li::before { color: #14161A; }
.pv-pfeile strong { color: inherit; font-weight: 600; }
.pv-pfeile--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a2) var(--a6); }

/* reiter, kacheln */
.pv-reiter { list-style: none; margin: var(--a4) 0 0; padding: var(--a3); display: grid; gap: var(--a3); background: rgba(255, 255, 255, .5); border-radius: 10px; }
@media (prefers-color-scheme: dark) { .pv-reiter { background: rgba(255, 255, 255, .05); } }
.pv-reiter li { padding-left: var(--a2); border-left: 1px solid var(--pt-linie, var(--linie-stark)); }
.pv-reiter p, .pv-kacheln p { margin: 0; font-size: var(--t2); color: var(--pt-leise, var(--leise)); }
.pv-kacheln { list-style: none; margin: var(--a3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a1); }
.pv-kacheln li { border-radius: 12px; padding: var(--a3); min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--a4); min-width: 0; }
.pv-bildreihe { list-style: none; margin: var(--a1) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a1); }
.pv-bildreihe img { width: 100%; border-radius: 12px; }

/* weiter: Text in Spalten, darunter die Reihe der Anbindungen */
.pv-anbindungen { list-style: none; margin: 0; padding: var(--a3) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a1); border-top: 1px solid var(--pt-linie, var(--linie-stark)); }
.pv-anbindungen img { width: 100%; border-radius: 8px; background: #FFFFFF; }

/* dunkel: Bild links, Titel und Liste rechts */
.pv-zwei { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--a6); align-items: center; }

/* akkordeon: in der Vorlage klappbare Zeilen, hier offen untereinander */
.pv-akkordeon { margin: 0; border: 1px solid var(--linie-stark); border-radius: 12px; overflow: hidden; }
.pv-akkordeon div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--a3) var(--a6); padding: var(--a3) clamp(16px, 2vw, 28px); border-bottom: 1px solid var(--linie-stark); }
.pv-akkordeon div:last-child { border-bottom: 0; }
.pv-akkordeon dt { font: 500 var(--t3)/1.25 Clash, sans-serif; letter-spacing: -.01em; }
.pv-akkordeon dd { margin: 0; color: var(--leise); font-size: var(--t2); }

/* gross und schluss: der grosse Satz */
.pv-raster { background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px); background-size: 10px 10px; padding-top: var(--a6); padding-bottom: var(--a8); }
.pv .pv-riesig { font: 400 clamp(38px, 7.2vw, 105px)/1.04 Clash, sans-serif; letter-spacing: -.035em; max-width: 13ch; margin: 0 0 var(--a3); }
.pv-raster p { margin: 0; font-size: clamp(17px, 1.6vw, 22px); max-width: 38ch; color: var(--pt-leise); }
.pv-ende { padding-top: var(--a8); padding-bottom: var(--a8); }
.pv-ende .pv-riesig { font-size: clamp(40px, 8.6vw, 127px); margin-bottom: var(--a6); }

/* vergleich */
.pvf-vergleich .pv-kopf { padding: 0 0 var(--a4); }
.pvf-vergleich .pv-kopf p { color: var(--pt-leise); }
.pv-rollen { overflow-x: auto; background: rgba(255, 255, 255, .6); border-radius: 10px; }
@media (prefers-color-scheme: dark) { .pv-rollen { background: rgba(255, 255, 255, .05); } }
.pv-tafel { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--t1); }
.pv-tafel th, .pv-tafel td { text-align: left; vertical-align: top; padding: var(--a3) var(--a2); border-bottom: 1px solid var(--pt-linie); border-left: 1px solid var(--pt-linie); }
.pv-tafel tr > :first-child { border-left: 0; }
.pv-tafel tr:last-child th, .pv-tafel tr:last-child td { border-bottom: 0; }
.pv-tafel thead th { font: 600 var(--t1)/1.2 DM, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.pv-tafel tbody th { font-weight: 600; width: 16%; }
.pv-tafel td strong { display: block; margin-bottom: 6px; font-size: var(--t2); }
.pv-tafel td p { margin: 0 0 8px; color: var(--pt-leise); }
.pv-tafel .pv-quelle { margin: 0; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--pt-leise); }
.pv-eigen { background: rgba(255, 113, 32, .12); }

/* Lange deutsche Woerter trennen statt abschneiden */
.pv h3, .pv h4, .pv-tafel th, .pv-tafel td, .pv-akkordeon dt { overflow-wrap: break-word; hyphens: auto; }

@media (max-width: 1000px) {
  .pv { grid-template-columns: 1fr; }
  .pv-leiste { position: static; min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--a2) var(--a3); padding: 0 0 var(--a2); border-right: 0; border-bottom: 1px solid var(--linie-stark); margin-bottom: var(--a2); }
  .pv-leiste ol { display: flex; flex-wrap: wrap; gap: 8px 18px; }
  .pv-schau { columns: 2; }
  .pv-zahlen, .pv-merkmale, .pv-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-anbindungen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pv-kopf, .pv-zwei, .pv-akkordeon div { grid-template-columns: 1fr; gap: var(--a2); }
}
@media (max-width: 640px) {
  .pv-schau { columns: 1; }
  .pvf-paar, .pvf-paar--rechts, .pv-kacheln, .pv-projekte, .pv-reiter, .pv-spalten:has(li:nth-child(3):last-child), .pv-pfeile--zwei, .pv-bildreihe { grid-template-columns: 1fr; }
  .pvf-paar--rechts .pv-karte:first-child { order: 0; }
  .pv-merkmale, .pv-spalten { grid-template-columns: 1fr; }
  .pv-zahlen div { min-height: 150px; }
  .pv-anbindungen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Formen ohne eigene Besonderheit: Abstand zum Abschnitt davor wie in der Vorlage */
.pvf-paar--links .pv-karte:first-child { order: 0; }
.pvf-zahlen, .pvf-marke, .pvf-reiter, .pvf-akkordeon, .pvf-text, .pvf-weiter, .pvf-dunkel, .pvf-infra, .pvf-gross, .pvf-vergleich, .pvf-schluss { display: block; }

/* Auf den Pitch-Seiten steht links die Kapitelleiste; der Faden im Seitenrand liefe durch ihre Schrift und entfaellt hier */
main:has(.pv) .u-faden, main:has(.pv) .u-perle { display: none; }

/* Uebrige Bilder eines Abschnitts: damit kein Bild der Vorlage fehlt */
.pv-rest { list-style: none; margin: var(--a1) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a1); }
.pv-rest img { width: 100%; border-radius: 12px; background: var(--p-hell); }
.pv-rest--klein { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: var(--a2); background: #FFFFFF; border-radius: 12px; align-items: center; }
.pv-rest--klein img { background: transparent; border-radius: 6px; }
@media (max-width: 640px) { .pv-rest { grid-template-columns: 1fr; } .pv-rest--klein { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- 11.11.2026, Verbesserung der Pitches: laufendes Band der Beispielseiten und mitlaufende Kapitelleiste ---- */
/* Band: zwei Reihen ziehen langsam gegeneinander. Jede Reihe ist doppelt gesetzt und laeuft um die halbe Breite, dadurch nahtlos.
   Bei "weniger Bewegung" stehen die Reihen und lassen sich von Hand schieben. */
.pv-band { margin: 0 calc(-1 * clamp(12px, 1.6vw, 24px)); overflow: hidden; display: grid; gap: var(--a1); border-radius: 12px; }
.pv-reihe { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--a1); width: max-content; animation: pv-ziehen 70s linear infinite; }
/* Die Filmreihe steht und laesst sich schieben (sieben laufende Filme genuegen), die Bildreihe darunter zieht */
.pv-reihe--a { animation: none; width: auto; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; }
.pv-reihe--a li { scroll-snap-align: start; }
.pv-reihe--b { animation-duration: 80s; }
.pv-reihe li { flex: none; }
.pv-reihe video, .pv-reihe img { height: clamp(260px, 30vw, 420px); width: auto; border-radius: 12px; background: var(--p-hell); }
.pv-reihe--b img { height: clamp(180px, 20vw, 300px); }
@keyframes pv-ziehen { to { transform: translateX(calc(-50% - var(--a1) / 2)); } }
.pv-band:hover .pv-reihe, .pv-band:focus-within .pv-reihe { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .pv-reihe { animation: none; } .pv-band { overflow-x: auto; } .pv-reihe li[aria-hidden] { display: none; } }
/* Kapitelleiste: aktuelles Kapitel und Lesestand */
.pv-leiste ol a[aria-current] { color: var(--text); font-weight: 600; }
.pv-leiste ol a[aria-current]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--p-faden); }
.pv-stand { position: absolute; right: -2px; top: 0; bottom: 0; width: 3px; }
.pv-stand i { display: block; width: 100%; height: 100%; background: var(--p-faden); transform: scaleY(0); transform-origin: top; border-radius: 3px; }
@media (max-width: 1000px) { .pv-stand { display: none; } }

/* ---- 11.11.2026, 13:03 und 13:09, Tim: "auf die ganze breite der seite", "die pitche sehen noch anders aus als die originalen
   udn passe auch die proportionen an". Masse der Vorlage bei 1440 px (gemessen, vorlage/restaurants-abschnitte.json):
   Kapitelleiste links am Fensterrand, rund 195 px breit und so hoch wie das Fenster (oben die Marke, in der Mitte die Kapitel,
   unten der Ruf); der Inhalt reicht von dort bis an den rechten Fensterrand, Flaechen mit 8 px Abstand und 12 px Radius.
   Auftakt 66,5 px, Abschnittstitel 36,75 px, grosser Satz 105 px, Schluss 127,5 px, alles in leichter Schrift.
   Die Groessen sind hier an die Fensterbreite gebunden (66,5 / 1440 = 4,62 vw), damit die Proportionen bei jeder Breite stimmen. ---- */
.pv { display: grid; grid-template-columns: 13.54vw minmax(0, 1fr); gap: 0; width: 100%; margin: var(--a6) 0 var(--a12); align-items: start; }
.pv-leiste { position: sticky; top: 0; height: 100vh; min-height: 0; padding: 1.5vw 1vw 1.5vw 1.1vw; border-right: 1px solid var(--linie-stark); font-size: clamp(11px, .86vw, 14px); transition: none; }
.kopf:not(.m-weg) ~ main .pv-leiste { top: 0; padding-top: 96px; }
.pv-inhalt { gap: 8px; padding: 0 8px 0 8px; }
.pv-flaeche, .pv-karte { border-radius: 12px; padding: clamp(18px, 1.67vw, 28px); }
.pv-kopf { padding: 4.2vw 1.4vw 1.6vw; }
.pvf-held { padding: 2.6vw 1.4vw 0; }
.pv h3, .pv-karte h3, .pvf-paar h3, .pvf-dunkel h3 { font: 400 clamp(24px, 2.55vw, 40px)/1.14 Clash, sans-serif; letter-spacing: -.02em; max-width: 24ch; }
.pv h4 { font: 400 clamp(16px, 1.25vw, 20px)/1.25 Clash, sans-serif; }
.pv-kopf p, .pv-fliess { font-size: clamp(14px, 1.05vw, 17px); }
.pv-vor { font-size: clamp(17px, 1.7vw, 26px); margin-bottom: 2vw; }
.pv-held-titel { font: 400 clamp(30px, 4.62vw, 72px)/1.14 Clash, sans-serif; letter-spacing: -.025em; max-width: 24ch; margin-bottom: 3vw; }
.pv .pv-riesig { font-size: clamp(38px, 7.29vw, 112px); }
.pv-reihe video, .pv-reihe img { height: clamp(240px, 27vw, 420px); border-radius: 12px; }
.pv-reihe--b img { height: clamp(170px, 19vw, 300px); }
@media (max-width: 1000px) {
  .pv { grid-template-columns: 1fr; }
  .pv-leiste { position: sticky; top: 0; z-index: 20; height: auto; flex-direction: row; flex-wrap: nowrap; align-items: center; overflow-x: auto; gap: var(--a3); padding: 12px 16px; border: 0; margin: 0;
    background: var(--p-tinte); color: var(--p-auf-dunkel); font-size: var(--t1); }
  .kopf:not(.m-weg) ~ main .pv-leiste { top: 84px; padding-top: 12px; }
  .pv-marke { color: var(--p-auf-dunkel); }
  .pv-leiste ol { flex-wrap: nowrap; white-space: nowrap; gap: var(--a3); }
  .pv-leiste ol a { color: var(--p-leise-dunkel); }
  .pv-leiste ol a[aria-current] { color: var(--p-auf-dunkel); }
  .pv-ruf { color: var(--p-faden); white-space: nowrap; }
  .pv-held-titel { font-size: clamp(28px, 7.4vw, 44px); }
  .pv h3, .pv-karte h3, .pvf-paar h3, .pvf-dunkel h3 { font-size: clamp(22px, 5.6vw, 32px); }
}
/* Proportionen der Flaechen nach der Vorlage (Hoehe der Vorlage bei 1440 px geteilt durch 1440, als vw):
   Zahlenkacheln 375 px, Karten im Paar rund 620 px, grosser Satz 647 px, Schluss 752 px mit 127,5 px Schrift,
   Anbindungen als eine Reihe zum Weiterschieben statt mehrerer Zeilen, Vergleichstabelle mit hohen Zeilen. */
@media (min-width: 1001px) {
  .pv-zahlen div { min-height: 26vw; padding: 1.67vw; }
  .pv-zahlen dd { font-size: 2.9vw; }
  .pv-zahlen dt { font-size: 1.1vw; }
  .pvf-paar .pv-karte { min-height: 43vw; }
  .pv-flaeche.pv-raster { min-height: 44vw; align-content: end; }
  .pv-flaeche.pv-ende { min-height: 51vw; display: flex; flex-direction: column; justify-content: center; }
  .pv .pv-ende .pv-riesig { font-size: 8.85vw; max-width: 12ch; }
  .pv-flaeche.pv-buehne { min-height: 46vw; }
  .pv-kacheln > li, .pv-kacheln > div { min-height: 15vw; }
  .pv-reiter { padding: 2.4vw; min-height: 18vw; align-content: center; }
  .pv-anbindungen { display: flex; overflow-x: auto; gap: 8px; scroll-snap-type: x proximity; padding-bottom: 6px; }
  .pv-anbindungen > li { flex: 0 0 12.6vw; min-height: 12.6vw; scroll-snap-align: start; }
  .pv-tafel { font-size: 1.02vw; }
  .pv-tafel th, .pv-tafel td { padding: 2.6vw 1.5vw; }
  .pv-tafel td strong { font-size: 1.25vw; margin-bottom: .7vw; }
}

/* Schmale Kopfzeile der Branchenseite ueber dem Pitch (statt Seitenkopf und Buehnenbild): eine Zeile, danach beginnt der Pitch */
.pv-kopfzeile { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto; gap: var(--a2) var(--a6); align-items: end; padding: clamp(20px, 2.4vw, 40px) 1.4vw clamp(14px, 1.4vw, 24px) calc(13.54vw + 8px + 1.4vw); }
.pv-kopfzeile .krumen { margin-bottom: 6px; }
.pv-kopfzeile h1 { margin: 0; font: 600 clamp(18px, 1.5vw, 26px)/1.2 Clash, sans-serif; letter-spacing: -.01em; }
.pv-kopfzeile p { margin: 0; max-width: 64ch; font-size: clamp(14px, 1.05vw, 17px); color: var(--leise); }
.pv-kopfzeile + .pv { margin-top: 0; }
@media (max-width: 1000px) { .pv-kopfzeile { grid-template-columns: 1fr; padding: var(--a3) 16px var(--a2); align-items: start; } .pv-kopfzeile .knopf { justify-self: start; } }
/* 11.11.2026, 14:52: Nachmessung der Vorlage bei 1920, 1440, 1024 und 390 px (pitch/vorlage-breiten.mjs).
   Die Vorlage waechst ohne Obergrenze mit der Fensterbreite (Auftakt 88,7 px bei 1920, 47,3 px bei 1024), die Leiste bleibt
   dabei rund 205 px breit. Am Handy sind Auftakt, Abschnittstitel und grosser Satz gleich gross (28 px), der Schluss 41 px,
   die Zahlenkacheln flache Zeilen (66 px hoch, zwei nebeneinander). */
@media (min-width: 1001px) {
  .pv { grid-template-columns: 205px minmax(0, 1fr); }
  .pv-kopfzeile { padding-left: calc(205px + 8px + 2.5vw); }
  .pvf-held { padding-left: 2.5vw; }
  .pv-kopf { padding-left: 2.5vw; }
  .pv-held-titel { font-size: 4.62vw; }
  .pv h3, .pv-karte h3, .pvf-paar h3, .pvf-dunkel h3 { font-size: 2.552vw; }
  .pv h4 { font-size: 1.25vw; }
  .pv .pv-riesig { font-size: 7.29vw; }
  .pv-vor { font-size: 1.7vw; }
  .pv-kopf p, .pv-fliess { font-size: max(13px, 1.05vw); }
}
@media (max-width: 1000px) {
  .pv-held-titel { font-size: clamp(26px, 7.22vw, 44px); }
  .pv h3, .pv-karte h3, .pvf-paar h3, .pvf-dunkel h3 { font-size: clamp(24px, 7.22vw, 44px); }
  .pv .pv-riesig { font-size: clamp(26px, 7.22vw, 44px); }
  .pv .pv-ende .pv-riesig { font-size: clamp(34px, 10.55vw, 64px); }
  .pv-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-zahlen div { min-height: 17vw; padding: 3vw; flex-direction: column; justify-content: center; gap: 2px; }
  .pv-zahlen dd { font-size: clamp(20px, 5.6vw, 34px); }
  .pv-zahlen dt { font-size: clamp(11px, 3vw, 15px); max-width: none; }
}