/* ============================================================
   Projekte-Übersicht (projekte.html): Hero + Galerie nach Kundenentwurf (1440 px).
   Desktop-Maße in --e = 1 Entwurfspixel, skaliert mit der Breite (wie projekt-kopf.css).
   Nav und Cremegrund kommen aus projekt-kopf.css (.seite-projekt).
   Farb-Tokens, Kaps/Rund/Kreis, Galerie-Kopf und die Karte selbst: projekt-karte.css.
   ============================================================ */

/* ---------- Gemeinsame Bausteine ---------- */
.pr-marke { color: var(--pr-or2); text-transform: uppercase; letter-spacing: 0.33em; font-size: 13px; font-weight: 500; line-height: 1.2; }
.pr-marke i { font-style: normal; margin: 0 0.7em; }
.pr-play:focus-visible, .pr-filter button:focus-visible {
  outline: 2px solid var(--pr-ink); outline-offset: 4px; border-radius: 999px;
}

/* ---------- Hero ---------- */
.pr-titel { font-weight: 600; line-height: 0.86; letter-spacing: -0.075em; color: var(--pr-ink); }
.pr-claim { font-weight: 300; line-height: 1.18; letter-spacing: -0.02em; }

.pr-film { position: relative; overflow: hidden; }
.pr-film video, .pr-film img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.pr-chip {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px;
  background: rgba(246, 244, 240, 0.9); border-radius: 999px; font-weight: 500; color: var(--pr-ink);
}
.pr-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--pr-or); }
/* Play-Knopf sitzt unten links im ausgeblendeten Bildteil (Maske in style.css), also dunkle Schrift auf Creme */
.pr-play { position: absolute; z-index: 2; display: flex; align-items: center; color: var(--pr-ink); text-align: left; }
.pr-play-kreis { flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--pr-or); color: var(--pr-ink); transition: transform 0.4s var(--ease); }
.pr-play:hover .pr-play-kreis { transform: scale(1.06); }
.pr-play-titel { display: block; font-weight: 500; }
.pr-play small { display: block; opacity: 0.85; letter-spacing: 0.02em; }

.pr-zahlen { display: grid; grid-template-columns: repeat(4, 1fr); }
.pr-zahlen > div { border-left: 1px solid var(--pr-or); }
.pr-zahlen > div:first-child { border-left: 0; padding-left: 0; }
.pr-zahlen dt { color: var(--pr-ink2); }
.pr-zahlen dd { display: flex; align-items: baseline; font-weight: 600; letter-spacing: -0.06em; line-height: 0.9; font-variant-numeric: tabular-nums; }
.pr-zahlen dd em { font-style: normal; font-weight: 500; letter-spacing: 0; }
.pr-zahlen dd.pr-zusatz { display: block; color: var(--pr-ink3); font-weight: 400; letter-spacing: 0; line-height: 1.4; }

.pr-kopf [data-enter] { opacity: 0; transform: translateY(22px); animation: enter 0.9s var(--ease) forwards; }
.pr-kopf .pr-film[data-enter] { transform: none; clip-path: inset(0 0 0 12%); animation: pr-film 1.2s var(--ease) 0.1s forwards; }
.pr-kopf [data-enter="2"] { animation-delay: 0.1s; }
.pr-kopf [data-enter="3"] { animation-delay: 0.22s; }
.pr-kopf [data-enter="4"] { animation-delay: 0.34s; }
@keyframes pr-film { to { opacity: 1; clip-path: inset(0); } }

/* ---------- Galerie ---------- */
.pr-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.pr-filter[hidden] { display: none; }
.pr-filter button {
  border: 1px solid var(--pr-linie); border-radius: 999px; padding: 10px 18px;
  font-size: 14px; font-weight: 500; color: var(--pr-ink2); transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.pr-filter button:hover { border-color: var(--pr-ink3); color: var(--pr-ink); }
.pr-filter button[aria-pressed="true"] { background: var(--pr-ink); border-color: var(--pr-ink); color: #fff; }

/* Zwei Filterleisten untereinander: oben Region, darunter Art/Kategorie */
.pr-filterbox { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; min-width: 0; }
.pr-filter-region button i { font-style: normal; margin-left: 7px; opacity: 0.55; font-variant-numeric: tabular-nums; }
/* Region ist die grobe Auswahl: etwas ruhiger als die Kategorie-Leiste darunter */
.pr-filter-region button[aria-pressed="true"] { background: var(--pr-or); border-color: var(--pr-or); color: var(--pr-ink); }
.pr-filter-region button[aria-pressed="true"] i { opacity: 0.7; }
.pr-status { margin: 18px var(--rand) 0; text-align: right; font-size: 14px; color: var(--pr-ink3); font-variant-numeric: tabular-nums; }
.pr-status[hidden] { display: none; }

.pr-neu { display: inline-block; background: var(--pr-ink); color: #fff; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; font-weight: 500; }
.pr-feat[hidden] { display: none; }
.pr-feat-text { display: flex; flex-direction: column; }
.pr-feat-text h3 { font-weight: 600; letter-spacing: -0.07em; line-height: 0.9; }
.pr-feat-claim { font-weight: 300; line-height: 1.2; }
.pr-feat-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--pr-linie); }
.pr-feat-zahlen > div { border-left: 1px solid var(--pr-or); }
.pr-feat-zahlen > div:first-child { border-left: 0; padding-left: 0; }
.pr-feat-zahlen dt { font-size: 13px; color: var(--pr-ink2); }
.pr-feat-zahlen dd { font-weight: 600; letter-spacing: -0.05em; line-height: 1.1; white-space: nowrap; }
.pr-feat-bild { overflow: hidden; background: #e7e3dc; }
.pr-feat-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pr-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 64px 28px; align-items: start; margin-top: 72px; padding: 0 var(--rand); }
@media (max-width: 1199px) { .pr-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .pr-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 24px; } }
@media (max-width: 560px) { .pr-raster { grid-template-columns: minmax(0, 1fr); } }
.pr-hinweis { max-width: 72ch; margin: 56px var(--rand) 0; font-size: 13px; line-height: 1.5; color: var(--pr-ink3); }

/* ---------- Desktop: Entwurf 1:1 ---------- */
@media (min-width: 1081px) {
  /* Text und Film nebeneinander statt übereinander: der Film beginnt erst, wo der Text endet */
  .pr-kopf { position: relative; height: calc(964 * var(--e)); padding: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: start; }
  .pr-text { position: relative; z-index: 2; padding: calc(124 * var(--e)) calc(24 * var(--e)) 0 calc(64 * var(--e)); pointer-events: none; }
  .pr-text a { pointer-events: auto; }
  .pr-kopf .pr-marke { font-size: calc(13 * var(--e)); }
  .pr-titel { margin-top: calc(26 * var(--e)); font-size: calc(112 * var(--e)); white-space: nowrap; }
  .pr-claim { margin-top: calc(38 * var(--e)); font-size: calc(34 * var(--e)); }
  .pr-kopf .pr-rund { margin-top: calc(44 * var(--e)); gap: calc(26 * var(--e)); font-size: calc(20 * var(--e)); }
  .pr-kopf .pr-kreis { width: calc(62 * var(--e)); height: calc(62 * var(--e)); font-size: calc(22 * var(--e)); }
  .pr-film { z-index: 1; margin-top: calc(84 * var(--e)); height: calc(640 * var(--e)); }
  .pr-chip { right: calc(40 * var(--e)); top: calc(30 * var(--e)); padding: calc(9 * var(--e)) calc(16 * var(--e)); font-size: calc(13 * var(--e)); }
  .pr-play { left: calc(36 * var(--e)); bottom: calc(34 * var(--e)); gap: calc(18 * var(--e)); }
  .pr-play-kreis { width: calc(64 * var(--e)); height: calc(64 * var(--e)); font-size: calc(20 * var(--e)); }
  .pr-play-titel { font-size: calc(17 * var(--e)); }
  .pr-play small { font-size: calc(13 * var(--e)); }
  .pr-zahlen { position: absolute; z-index: 2; left: calc(64 * var(--e)); right: calc(64 * var(--e)); bottom: calc(40 * var(--e)); }
  .pr-zahlen > div { padding: 0 calc(36 * var(--e)); }
  .pr-zahlen dt { font-size: calc(14 * var(--e)); }
  .pr-zahlen dd { margin-top: calc(8 * var(--e)); font-size: calc(84 * var(--e)); }
  .pr-zahlen dd em { font-size: calc(22 * var(--e)); margin-left: calc(6 * var(--e)); }
  .pr-zahlen dd.pr-zusatz { margin-top: calc(12 * var(--e)); font-size: calc(14 * var(--e)); }

  .pr-galerie { padding: calc(120 * var(--e)) 0 calc(90 * var(--e)); }
  .pr-filterbox { max-width: 60%; }
  .pr-filter button { padding: calc(10 * var(--e)) calc(18 * var(--e)); font-size: calc(14 * var(--e)); }
  .pr-status { margin: calc(20 * var(--e)) calc(64 * var(--e)) 0; font-size: calc(14 * var(--e)); }

  .pr-feat { margin: calc(48 * var(--e)) 0 0 calc(64 * var(--e)); display: grid; grid-template-columns: calc(580 * var(--e)) 1fr; gap: calc(56 * var(--e)); }
  .pr-feat-text { padding: calc(10 * var(--e)) 0 calc(6 * var(--e)); }
  .pr-neu { font-size: calc(12 * var(--e)); padding: calc(7 * var(--e)) calc(12 * var(--e)); }
  .pr-feat .pr-marke { margin-top: calc(30 * var(--e)); font-size: calc(13 * var(--e)); }
  .pr-feat-text h3 { margin-top: calc(22 * var(--e)); font-size: calc(76 * var(--e)); }
  .pr-feat-claim { margin-top: calc(26 * var(--e)); font-size: calc(24 * var(--e)); }
  .pr-feat-zahlen { margin-top: auto; }
  .pr-feat-zahlen > div { padding: calc(22 * var(--e)) 0 0 calc(22 * var(--e)); }
  .pr-feat-zahlen dt { font-size: calc(13 * var(--e)); }
  .pr-feat-zahlen dd { margin-top: calc(6 * var(--e)); font-size: calc(40 * var(--e)); }
  .pr-feat-link { margin-top: calc(30 * var(--e)); gap: calc(20 * var(--e)); font-size: calc(18 * var(--e)); }
  .pr-feat-link .pr-kreis { width: calc(54 * var(--e)); height: calc(54 * var(--e)); font-size: calc(20 * var(--e)); }
  .pr-feat-bild { height: calc(600 * var(--e)); }

  .pr-raster { margin-top: calc(96 * var(--e)); padding: 0 calc(64 * var(--e)); gap: calc(80 * var(--e)) calc(32 * var(--e)); }
  .pr-hinweis { margin: calc(72 * var(--e)) calc(64 * var(--e)) 0; font-size: calc(13 * var(--e)); }
}

/* ---------- Tablet / Handy: Film oben, Text darunter, alles einspaltig ---------- */
@media (max-width: 1080px) {
  .pr-kopf { --fade-x: var(--fade-voll); display: flex; flex-direction: column; padding-top: var(--nav-h); }
  .pr-film { order: 1; aspect-ratio: 16 / 10; max-height: 70vh; width: 100%; }
  .pr-text { order: 2; padding: clamp(32px, 6vw, 56px) var(--rand) 0; }
  .pr-titel { margin-top: 18px; font-size: clamp(48px, 10.5vw, 112px); }
  .pr-claim { margin-top: 24px; font-size: clamp(22px, 4vw, 34px); }
  .pr-kopf .pr-rund { margin-top: 30px; gap: 20px; font-size: 18px; }
  .pr-kreis { width: 54px; height: 54px; font-size: 20px; }
  .pr-chip { right: 16px; top: 16px; padding: 8px 14px; font-size: 13px; }
  .pr-play { left: 18px; bottom: 18px; gap: 14px; }
  .pr-play-kreis { width: 54px; height: 54px; font-size: 18px; }
  .pr-play-titel { font-size: 16px; }
  .pr-play small { font-size: 12.5px; }
  .pr-zahlen { order: 3; margin: clamp(44px, 7vw, 64px) var(--rand) 0; grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .pr-zahlen > div { padding: 0 clamp(16px, 3vw, 32px); }
  .pr-zahlen > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .pr-zahlen dt { font-size: 14px; }
  .pr-zahlen dd { margin-top: 8px; font-size: clamp(48px, 9vw, 84px); }
  .pr-zahlen dd em { font-size: 18px; margin-left: 5px; }
  .pr-zahlen dd.pr-zusatz { margin-top: 10px; font-size: 14px; }

  .pr-galerie { padding: clamp(80px, 11vw, 120px) 0 80px; }
  .pr-filter { justify-content: flex-start; }
  .pr-filterbox { align-items: stretch; width: 100%; margin-top: 28px; }
  .pr-status { text-align: left; }

  .pr-feat { margin-top: 40px; display: flex; flex-direction: column; }
  .pr-feat-bild { order: -1; aspect-ratio: 4 / 3; max-height: 70vh; }
  .pr-feat-text { padding: 32px var(--rand) 0; }
  .pr-feat .pr-marke { margin-top: 26px; font-size: 12px; }
  .pr-feat-text h3 { margin-top: 18px; font-size: clamp(42px, 8vw, 76px); }
  .pr-feat-claim { margin-top: 20px; font-size: clamp(19px, 3vw, 24px); }
  .pr-feat-zahlen { margin-top: 32px; }
  .pr-feat-zahlen > div { padding: 20px 0 0 20px; }
  .pr-feat-zahlen dd { margin-top: 6px; font-size: clamp(28px, 5vw, 40px); }
  .pr-feat-link { margin-top: 28px; gap: 18px; font-size: 17px; }

}
@media (max-width: 560px) {
  .pr-zahlen { grid-template-columns: 1fr; row-gap: 28px; }
  .pr-zahlen > div, .pr-zahlen > div:nth-child(odd) { border-left: 1px solid var(--pr-or); padding-left: 18px; }
  .pr-zahlen dd { font-size: clamp(48px, 15vw, 64px); }
  .pr-feat-zahlen { grid-template-columns: 1fr; }
  .pr-feat-zahlen > div, .pr-feat-zahlen > div:first-child {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 14px 0; border-left: 0; border-bottom: 1px solid var(--pr-linie);
  }
  .pr-feat-zahlen dd { margin: 0; font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-kopf [data-enter], .pr-kopf .pr-film[data-enter] { animation: none; opacity: 1; transform: none; clip-path: none; }
}
.pr-play[hidden] { display: none; }

/* ============================================================
   Varianten für die übrigen Unterseiten (Produkte, Karriere, Kontakt, Region, Rechner, Rechtliches)
   --satz:      Satz-Überschrift statt Zwei-Wort-Titel, bricht um und ist kleiner
   --ohne-bild: kein Foto, Text in voller Breite
   Ohne Kennzahlenreihe wächst der Kopf mit dem Inhalt statt fester Höhe.
   ============================================================ */
.pr-pfad a { color: inherit; }
.pr-pfad a:hover { color: var(--pr-ink); }
.pr-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; }
.pr-kopf .pr-ctas .pr-rund { margin-top: 0; }
.pr-kopf .rk-punkte { margin-top: 26px; }

@media (min-width: 1081px) {
  .pr-kopf:not(:has(.pr-zahlen)) { height: auto; padding-bottom: calc(96 * var(--e)); }
  .pr-kopf--satz { grid-template-columns: calc(660 * var(--e)) minmax(0, 1fr); }
  .pr-kopf--satz .pr-titel { white-space: normal; max-width: 15ch; font-size: calc(80 * var(--e)); line-height: 0.95; letter-spacing: -0.06em; }
  .pr-kopf--satz .pr-claim { font-size: calc(24 * var(--e)); max-width: 30ch; }
  .pr-ctas { margin-top: calc(44 * var(--e)); }
  .pr-kopf--ohne-bild { grid-template-columns: minmax(0, 1fr); height: auto; padding-bottom: calc(80 * var(--e)); }
  .pr-kopf--ohne-bild .pr-text { padding-right: calc(64 * var(--e)); }
  .pr-kopf--ohne-bild .pr-zahlen { position: static; margin: calc(72 * var(--e)) calc(64 * var(--e)) 0; }
}
@media (max-width: 1080px) {
  .pr-kopf--ohne-bild .pr-titel { hyphens: auto; overflow-wrap: anywhere; }
  .pr-kopf:not(:has(.pr-zahlen)) { padding-bottom: clamp(48px, 8vw, 80px); }
  .pr-kopf--satz .pr-titel { font-size: clamp(38px, 8.4vw, 80px); line-height: 0.98; letter-spacing: -0.06em; }
  .pr-kopf--satz .pr-claim { font-size: clamp(19px, 3.2vw, 24px); }
  .pr-ctas { margin-top: 30px; }
}
.pr-titel .region-word { color: var(--pr-or2); white-space: nowrap; }

/* Kennzahl als Wort statt Zahl (z. B. „Rundum sorglos“) */
.pr-zahlen dd .pr-wort { font-size: 0.5em; letter-spacing: -0.03em; line-height: 1.05; }