/* ============================================================
   Projektkarte (_includes/projekt-karte.html) samt gemeinsamer Bausteine.
   Genutzt von: projekte.html (Kopf + Galerie), Startseite (Referenzen-Slider),
   Projektdetailseite ("Weitere Projekte").
   Desktop-Maße in --e = 1 Entwurfspixel bei 1440 px (wie projekt-kopf.css).
   ============================================================ */
.pr-kopf, .pr-galerie, .pr-start, .pr-weitere {
  --e: min(calc(100vw / 1440), 1.25px);
  --rand: clamp(20px, 5vw, 48px);
  --pr-ink: #0f1012;
  --pr-ink2: #3c4046;
  --pr-ink3: #6b6f76; /* Entwurf #7a7e85, leicht dunkler für ausreichenden Kontrast */
  --pr-linie: #dcd8d0;
  --pr-or: #fe863d;
  --pr-or2: #ef7b36;
  /* Flacher Cremegrund wie im Entwurf: Punktmuster aus style.css hier aus */
  --grund: #f6f4f0;
  --muster-hell: none;
  color: var(--pr-ink);
}
:where(.pr-kopf, .pr-galerie, .pr-start, .pr-weitere) :where(p, h1, h2, h3, dl, dd, figure) { margin: 0; }

/* ---------- Bausteine ---------- */
.pr-kaps { text-transform: uppercase; letter-spacing: 0.3em; font-size: 11px; color: var(--pr-ink3); font-weight: 500; }
.pr-rund { display: inline-flex; align-items: center; font-weight: 500; color: var(--pr-ink); letter-spacing: -0.01em; }
.pr-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), background 0.25s;
}
.pr-kreis i { transition: transform 0.35s var(--ease); }
.pr-rund:hover .pr-kreis { transform: scale(1.06); background: #ff9552; }
.pr-rund:hover .ph-arrow-down { transform: translateY(2px); }
.pr-rund:hover .ph-arrow-right { transform: translateX(2px); }
.pr-rund:focus-visible { outline: 2px solid var(--pr-ink); outline-offset: 4px; border-radius: 999px; }

/* Sektionskopf: Kapitälchen, große enge Überschrift, rechts Aktion */
.pr-gkopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.pr-gkopf .pr-kaps { margin-bottom: 22px; }
.pr-gkopf h2 { max-width: none; font-weight: 600; letter-spacing: -0.07em; line-height: 0.9; }

/* ---------- Karte ---------- */
.pr-karte { display: block; container-type: inline-size; color: var(--pr-ink); outline: none; }
.pr-karte[hidden] { display: none; }
.pr-kbild { position: relative; display: block; overflow: hidden; aspect-ratio: 527 / 380; background: #e7e3dc; }
.pr-karte.ist-gross .pr-kbild { aspect-ratio: 737 / 500; }
.pr-kbild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.pr-karte:hover .pr-kbild img, .pr-karte:focus-visible .pr-kbild img { transform: scale(1.045); }
.pr-karte:focus-visible { outline: 2px solid var(--pr-ink); outline-offset: 8px; border-radius: 2px; }
.pr-kbadge { position: absolute; left: 18px; top: 18px; background: rgba(246, 244, 240, 0.92); border-radius: 999px; padding: 7px 14px; font-size: 12px; font-weight: 500; }
.pr-kkunde { display: block; margin-top: 22px; font-size: 14px; font-weight: 500; }
.pr-kkunde i { font-style: normal; margin: 0 0.6em; color: var(--pr-ink3); }
/* Ortsname: 72/92 px laut Entwurf, lange Namen schrumpfen auf die Kartenbreite (--len = Zeichenzahl) */
.pr-kort {
  display: flex; align-items: center; gap: 0.2em; margin-top: 4px; white-space: nowrap;
  font-weight: 200; letter-spacing: -0.05em; line-height: 1;
  font-size: min(72px, calc((100cqi - 72px) / var(--len) * 2.2));
}
.pr-strich { flex: 0 0 auto; width: 54px; height: 4px; background: var(--pr-or); margin-right: calc(18px - 0.2em); }
.pr-kdaten { display: flex; flex-wrap: wrap; row-gap: 6px; margin-top: 18px; }
.pr-kdaten > span { padding: 0 20px; border-left: 1px solid var(--pr-or); font-size: 14px; color: var(--pr-ink2); }
.pr-kdaten > span:first-child { padding-left: 0; border-left: 0; }
.pr-kdaten b { font-size: 24px; font-weight: 600; color: var(--pr-ink); margin-right: 5px; letter-spacing: -0.03em; }
.pr-kdaten > .pr-kohne { display: flex; align-items: flex-end; padding-bottom: 0.5em; } /* ohne Zahl: Text auf die Grundlinie der Nachbarn */
.pr-kgeld { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--pr-linie); font-size: 15px; color: var(--pr-ink2); }
.pr-kgeld i { color: var(--pr-or2); font-size: 18px; transition: transform 0.35s var(--ease); }
.pr-karte:hover .pr-kgeld i { transform: translateX(4px); }

/* ---------- Startseite: Referenzen-Slider (groß / klein versetzt im Wechsel) ---------- */
body > section.pr-start { background-color: var(--grund); padding: clamp(80px, 11vw, 120px) 0 clamp(72px, 9vw, 110px); overflow: hidden; }
.pr-start .pr-gkopf h2 { color: var(--pr-ink); }
.pr-sunter { max-width: 40ch; margin-top: 26px; font-size: clamp(18px, 1.7vw, 22px); font-weight: 300; line-height: 1.3; letter-spacing: -0.01em; color: var(--pr-ink2); }
.pr-saktion { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); flex-wrap: wrap; }
.pr-saktion .pr-rund { gap: 18px; font-size: 17px; }
.pr-saktion .pr-kreis { width: 54px; height: 54px; font-size: 20px; }
.pr-start .slider-nav button { border-color: var(--pr-linie); color: var(--pr-ink); }
.pr-start .slider-nav button:hover:not([aria-disabled="true"]) { border-color: var(--pr-or2); color: var(--pr-or2); }
.pr-start .slider-nav button[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.pr-start .slider-nav button:focus-visible { outline: 2px solid var(--pr-ink); outline-offset: 3px; }
/* Regionsfilter der Startseite: ruhige Chips, gleiche Sprache wie die Projekte-Seite */
.pr-sfilter { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.pr-sfilter[hidden] { display: none; }
.pr-sfilter 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-sfilter button:hover { border-color: var(--pr-ink3); color: var(--pr-ink); }
.pr-sfilter button[aria-pressed="true"] { background: var(--pr-or); border-color: var(--pr-or); color: var(--pr-ink); }
.pr-sfilter button i { font-style: normal; margin-left: 7px; opacity: 0.55; font-variant-numeric: tabular-nums; }
.pr-sfilter button:focus-visible { outline: 2px solid var(--pr-ink); outline-offset: 4px; border-radius: 999px; }
.pr-sstatus { margin-top: 14px; font-size: 14px; color: var(--pr-ink3); font-variant-numeric: tabular-nums; }
.pr-sstatus[hidden] { display: none; }

.pr-sslider {
  align-items: flex-start; gap: 20px; margin-top: 32px;
  /* Luft oben/unten, damit der Fokusrahmen der Karten nicht abgeschnitten wird */
  padding-block: 12px 16px;
}
.pr-sslider:focus-visible { outline: 2px solid var(--pr-ink); outline-offset: -2px; }
.pr-sslider > .pr-karte { flex: 0 0 auto; width: min(78vw, 520px); scroll-snap-align: start; }
.pr-sslider > .pr-karte:not(.ist-gross) { width: min(64vw, 420px); margin-top: 40px; }
.pr-sslider img { -webkit-user-drag: none; user-select: none; }

/* ---------- Detailseite: Weitere Projekte ---------- */
body > section.pr-weitere { background-color: var(--grund); padding: clamp(72px, 9vw, 110px) 0; }
.pr-weitere .pr-gkopf h2 { color: var(--pr-ink); }
.pr-wraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 56px 32px; margin-top: 48px; align-items: start; }

/* ---------- Desktop: Entwurf 1:1 ---------- */
@media (min-width: 1081px) {
  .pr-gkopf { padding: 0 calc(64 * var(--e)); }
  .pr-gkopf .pr-kaps { font-size: calc(11 * var(--e)); margin-bottom: calc(22 * var(--e)); }
  .pr-gkopf h2 { font-size: calc(88 * var(--e)); }
  .pr-kbadge { left: calc(18 * var(--e)); top: calc(18 * var(--e)); padding: calc(7 * var(--e)) calc(14 * var(--e)); font-size: calc(12 * var(--e)); }
  .pr-kkunde { margin-top: calc(22 * var(--e)); font-size: calc(14 * var(--e)); }
  .pr-kort { margin-top: calc(4 * var(--e)); font-size: min(calc(72 * var(--e)), calc((100cqi - 72 * var(--e)) / var(--len) * 2.2)); }
  .pr-karte.ist-gross .pr-kort { font-size: min(calc(92 * var(--e)), calc((100cqi - 72 * var(--e)) / var(--len) * 2.2)); }
  .pr-strich { width: calc(54 * var(--e)); height: calc(4 * var(--e)); margin-right: calc(18 * var(--e) - 0.2em); }
  .pr-kdaten { margin-top: calc(18 * var(--e)); }
  .pr-kdaten > span { padding: 0 calc(20 * var(--e)); font-size: calc(14 * var(--e)); }
  .pr-kdaten b { font-size: calc(24 * var(--e)); margin-right: calc(5 * var(--e)); }
  .pr-kgeld { margin-top: calc(16 * var(--e)); padding-top: calc(14 * var(--e)); font-size: calc(15 * var(--e)); }
  .pr-kgeld i { font-size: calc(18 * var(--e)); }

  /* Startseite/Detailseite: Kopf sitzt im .wrap-Raster der Seite, daher ohne eigenen Rand */
  .pr-start .pr-gkopf, .pr-weitere .pr-gkopf { padding: 0; }
  .pr-sunter { margin-top: calc(28 * var(--e)); font-size: calc(22 * var(--e)); }
  .pr-saktion .pr-rund { gap: calc(20 * var(--e)); font-size: calc(18 * var(--e)); }
  .pr-saktion .pr-kreis { width: calc(54 * var(--e)); height: calc(54 * var(--e)); font-size: calc(20 * var(--e)); }
  /* 560 + 48 + 420 + 48: bei 1440 px stehen zweieinhalb Karten, der Anschnitt rechts zeigt "mehr" */
  .pr-sslider { gap: calc(48 * var(--e)); margin-top: calc(64 * var(--e)); }
  .pr-sslider > .pr-karte { width: calc(560 * var(--e)); }
  .pr-sslider > .pr-karte:not(.ist-gross) { width: calc(420 * var(--e)); margin-top: calc(110 * var(--e)); }
  .pr-weitere .pr-gkopf h2 { font-size: calc(72 * var(--e)); }
  .pr-wraster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(40 * var(--e)); margin-top: calc(56 * var(--e)); }
  .pr-wraster > .pr-karte:nth-child(2) { margin-top: calc(80 * var(--e)); }
}

@media (max-width: 1080px) {
  .pr-gkopf { flex-direction: column; align-items: flex-start; padding: 0 var(--rand); }
  .pr-gkopf h2 { font-size: clamp(46px, 9vw, 88px); }
  .pr-start .pr-gkopf, .pr-weitere .pr-gkopf { padding: 0; }
  .pr-weitere .pr-gkopf h2 { font-size: clamp(40px, 7vw, 64px); }
  .pr-kbild, .pr-karte.ist-gross .pr-kbild { aspect-ratio: 3 / 2; }
  .pr-kort { font-size: min(92px, calc((100cqi - 72px) / var(--len) * 2.2)); }
}
@media (max-width: 560px) {
  .pr-kort { font-size: min(64px, calc((100cqi - 60px) / var(--len) * 2.2)); }
  .pr-strich { width: 40px; margin-right: calc(14px - 0.2em); }
  .pr-kdaten > span { padding: 0 14px; }
  .pr-kgeld { font-size: 14px; }
  .pr-start h2 br { display: none; }
  .pr-sslider > .pr-karte { width: 84vw; }
  .pr-sslider > .pr-karte:not(.ist-gross) { width: 76vw; margin-top: 32px; }
  .pr-sslider .pr-kdaten > span { padding: 0 10px; }
  .pr-sslider .pr-kdaten b { font-size: 21px; }
  .pr-sslider .pr-kgeld { font-size: 13px; }
}

/* ---------- Kompakte Rasterkarte (Übersicht, klasse "ist-klein") ----------
   Gleicher Aufbau, Maße relativ zur Kartenbreite (cqi), damit 4 Karten nebeneinander
   passen. Höhere Spezifität als die Entwurfsmaße oben, daher in allen Breiten gültig. */
.pr-karte.ist-klein .pr-kbild { aspect-ratio: 4 / 3; }
.pr-karte.ist-klein .pr-kbadge { left: 12px; top: 12px; padding: 5px 11px; font-size: 11.5px; }
.pr-karte.ist-klein .pr-kkunde { margin-top: 16px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-karte.ist-klein .pr-kort { margin-top: 4px; min-height: 48px; /* lange Ortsnamen werden kleiner, die Zeile bleibt gleich hoch */ font-size: min(44px, calc((100cqi - 44px) / var(--len) * 2.1)); }
.pr-karte.ist-klein .pr-strich { width: 32px; height: 3px; margin-right: calc(12px - 0.2em); }
.pr-karte.ist-klein .pr-kdaten { margin-top: 14px; }
.pr-karte.ist-klein .pr-kdaten > span { padding: 0 clamp(8px, 3.5cqi, 14px); font-size: 12.5px; }
.pr-karte.ist-klein .pr-kdaten > span:first-child { padding-left: 0; }
.pr-karte.ist-klein .pr-kdaten b { font-size: clamp(17px, 6.4cqi, 22px); margin-right: 3px; }
.pr-karte.ist-klein .pr-kgeld { gap: 10px; margin-top: 12px; padding-top: 11px; font-size: 13px; line-height: 1.35; }
.pr-karte.ist-klein .pr-kgeld i { font-size: 16px; }
.pr-kbadge.ist-beispiel { background: rgba(15, 16, 18, 0.86); color: #fff; }

/* Dezenter Hinweis: zu diesem Projekt gibt es ein Video des Kunden (spielt auf der Projektseite) */
.pr-kvideo {
  position: absolute; right: 18px; top: 18px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(15, 16, 18, 0.78); color: #fff;
  border-radius: 999px; padding: 6px 12px; font-size: 11.5px; font-weight: 500;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.pr-kvideo i { font-size: 11px; color: var(--accent-bright); }
.pr-karte.ist-klein .pr-kvideo { right: 12px; top: 12px; padding: 5px 10px; font-size: 11px; }
.pr-feat-bild { position: relative; }
.pr-feat-bild .pr-kvideo { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .pr-kbild img, .pr-kreis, .pr-kgeld i { transition: none; }
  .pr-karte:hover .pr-kbild img, .pr-karte:focus-visible .pr-kbild img { transform: none; }
}