/* ============================================================
   Projekt-Detailseite: Kopf nach Kundenentwurf (1536 x 1024).
   Alle Desktop-Maße in --u = 1 Entwurfspixel, skaliert mit der Breite.
   Überschreibt die alten .pj-kopf-Regeln aus style.css (Muster, Varianten).
   ============================================================ */
.seite-projekt {
  --u: min(calc(100vw / 1536), 1.25px);
  --kopf-grund: #f6f4f0;
  --pk-orange: #fe863d;
  --pk-grau: #6f6f6c;
}

/* ---------- Navigation: hell und transparent über dem Kopf ---------- */
body.seite-projekt { background: var(--kopf-grund); }
.seite-projekt .nav .wrap { max-width: none; }
.seite-projekt .nav-drop-btn,
.seite-projekt .nav-drop.is-active .nav-drop-btn { color: var(--ink-2); }
.seite-projekt .nav-drop:hover .nav-drop-btn,
.seite-projekt .nav-drop.open .nav-drop-btn { color: var(--ink); }
.seite-projekt .nav.scrolled { background: rgba(246, 244, 240, 0.9); }
.seite-projekt .nav-cta {
  background: var(--pk-orange); color: var(--ink); border: 0; box-shadow: none;
  font-weight: 500; animation: none;
  transition: background 0.25s, transform 0.35s var(--ease);
}
.seite-projekt .nav-cta::before,
.seite-projekt .nav-cta::after,
.seite-projekt .nav-cta span::before { display: none; }
.seite-projekt .nav-cta span::after {
  content: ""; width: 1.25em; height: 1.25em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M13 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M13 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.35s var(--ease);
}
.seite-projekt .nav-cta:hover { background: #ff9552; }
.seite-projekt .nav-cta:hover span::after { transform: translateX(3px); }

@media (min-width: 961px) {
  .seite-projekt .nav { height: calc(84 * var(--u)); }
  .seite-projekt .nav .wrap { padding-inline: calc(68 * var(--u)) calc(67 * var(--u)); }
  .seite-projekt .brand { gap: calc(14 * var(--u)); font-size: calc(20.5 * var(--u)); letter-spacing: 0; }
  .seite-projekt .brand-mark { width: calc(42 * var(--u)); height: calc(42 * var(--u)); }
  .seite-projekt .nav-links { gap: calc(43 * var(--u)); margin-right: calc(54 * var(--u)); }
  .seite-projekt .nav-links a, .seite-projekt .nav-drop-btn { font-size: calc(16.5 * var(--u)); }
  .seite-projekt .nav-links > a[aria-current="page"]::after { bottom: calc(-12 * var(--u)); height: 2.5px; background: var(--pk-orange); }
  .seite-projekt .nav-cta { height: calc(56 * var(--u)); padding: 0 calc(26 * var(--u)) 0 calc(28 * var(--u)); font-size: calc(17 * var(--u)); }
  .seite-projekt .nav-cta span { gap: calc(16 * var(--u)); }
}

/* ---------- Kopf: Grund ---------- */
.pj-kopf.pk {
  position: relative; background: var(--kopf-grund); background-image: none;
  padding: 0; overflow: hidden; color: var(--ink);
}
.pj-kopf.pk::before, .pj-kopf.pk::after { content: none; }
:where(.pk) :where(p, dl, dd, figure) { margin: 0; }

/* ---------- Desktop: Entwurf 1:1 ---------- */
@media (min-width: 1081px) {
  /* Text links, Foto + Ort rechts daneben: das Foto beginnt erst, wo der längste Textteil endet */
  .pk { min-height: calc(1024 * var(--u)); display: grid; grid-template-columns: max-content minmax(0, 1fr); }
  .pk-text {
    position: relative; z-index: 2; grid-area: 1 / 1;
    padding: calc(115 * var(--u)) calc(24 * var(--u)) calc(80 * var(--u)) calc(68 * var(--u));
    max-width: calc(900 * var(--u));
  }
  .pk-marke { font-size: calc(13 * var(--u)); letter-spacing: 0.33em; }
  .pk-marke span { margin: 0 0.75em; }
  .pk h1.pk-titel { margin-top: calc(26 * var(--u)); font-size: calc(106 * var(--u)); letter-spacing: -0.075em; line-height: 0.9; }
  .pk-claim { margin-top: calc(40 * var(--u)); font-size: calc(38 * var(--u)); line-height: 1.18; max-width: calc(540 * var(--u)); }
  .pk-mehr { margin-top: calc(40 * var(--u)); gap: calc(30 * var(--u)); font-size: calc(21 * var(--u)); }
  .pk-kreis { width: calc(62 * var(--u)); height: calc(62 * var(--u)); font-size: calc(22 * var(--u)); }
  .pk-zahlen { margin-top: calc(51 * var(--u)); }
  .pk-zahlen > div { padding: 0 calc(21 * var(--u)); }
  .pk-zahlen dt { font-size: calc(15 * var(--u)); }
  .pk-zahlen dd { margin-top: calc(-1 * var(--u)); font-size: calc(104 * var(--u)); }
  .pk-zahlen small { font-size: calc(17.5 * var(--u)); margin-left: calc(6 * var(--u)); }
  .pk-zahlen .pk-ohne { font-size: 0.46em; }
  .pk-daten { margin-top: calc(54 * var(--u)); }
  .pk-daten > div { padding: calc(4 * var(--u)) calc(29 * var(--u)) calc(6 * var(--u)) calc(30 * var(--u)); }
  .pk-daten dt { font-size: calc(13.5 * var(--u)); }
  .pk-daten dd { margin-top: calc(3 * var(--u)); font-size: calc(20 * var(--u)); }
  .pk-fuss { position: absolute; left: calc(68 * var(--u)); bottom: calc(28 * var(--u)); font-size: calc(10 * var(--u)); gap: calc(14 * var(--u)); }
  .pk-fuss::after { width: calc(97 * var(--u)); }

  .pk-bild {
    position: relative; z-index: 1; grid-area: 1 / 2; align-self: start;
    margin-top: calc(115 * var(--u)); height: calc(682 * var(--u));
  }
  .pk-lage { top: calc(29 * var(--u)); right: calc(67 * var(--u)); font-size: calc(14 * var(--u)); gap: calc(15 * var(--u)); }
  .pk-lage svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin-top: calc(-12 * var(--u)); }

  .pk-ort {
    position: relative; z-index: 1; grid-area: 1 / 2; align-self: end;
    height: calc(183 * var(--u)); margin: 0 calc(67 * var(--u)) calc(29 * var(--u)) 0;
  }
  .pk-kunde { font-size: calc(15 * var(--u)); gap: calc(12 * var(--u)); }
  .pk-ortname { margin-top: calc(-13 * var(--u)); gap: calc(28 * var(--u)); padding-right: calc(175 * var(--u)); height: calc(142 * var(--u)); }
  .pk-strich { width: calc(76 * var(--u)); height: calc(6 * var(--u)); }
  /* 10 Zeichen ("Rudolstadt") = 146 px; längere Orte schrumpfen, damit nichts überläuft */
  /* Spaltenbreite hängt jetzt vom Text links ab, darum an der Breite von .pk-ort messen:
     Platz für das Wort = Breite - Rand rechts (175) - Strich + Abstand (104), ~0,41 em je Zeichen */
  .pk-ort { container-type: inline-size; }
  .pk-ortname { font-size: min(calc(142 * var(--u)), calc((100cqw - 279 * var(--u)) * 2.44 / var(--len))); }
  .pk-motto { position: absolute; right: 0; top: calc(36 * var(--u)); font-size: calc(10.5 * var(--u)); line-height: 1.75; }
  .pk-firma { position: absolute; right: 0; bottom: 0; font-size: calc(10.5 * var(--u)); }
}

/* ---------- Gemeinsame Typografie ---------- */
.pk-marke { color: #ef7b36; text-transform: uppercase; font-weight: 500; line-height: 1.2; }
.pk-marke span { display: inline-block; }
.pk-titel {
  font-weight: 600; line-height: 0.86; letter-spacing: -0.045em; color: #0f1012;
  text-wrap: nowrap;
}
.pk-claim { font-weight: 300; line-height: 1.14; letter-spacing: -0.02em; color: var(--ink); }
.pk-mehr { display: inline-flex; align-items: center; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.pk-kreis {
  flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%;
  background: var(--pk-orange); color: var(--ink); transition: transform 0.4s var(--ease), background 0.25s;
}
.pk-mehr:hover .pk-kreis { transform: scale(1.06); background: #ff9552; }
.pk-mehr:hover .pk-kreis i { transform: translateX(2px); }
.pk-kreis i { transition: transform 0.35s var(--ease); }

.pk-zahlen, .pk-daten { display: flex; }
.pk-zahlen > div, .pk-daten > div { border-left: 1.5px solid var(--pk-orange); }
.pk-zahlen > div:first-child, .pk-daten > div:first-child { border-left: 0; padding-left: 0; }
.pk-zahlen dt, .pk-daten dt { color: var(--ink-2); font-weight: 400; letter-spacing: -0.005em; }
.pk-daten dt { color: var(--pk-grau); font-weight: 300; }
.pk-zahlen dd { display: flex; align-items: baseline; font-weight: 600; line-height: 0.9; letter-spacing: -0.08em; font-variant-numeric: tabular-nums; color: #0f1012; }
.pk-zahlen small { font-weight: 500; letter-spacing: 0; color: var(--ink); }
.pk-daten dd { font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.pk-fuss, .pk-motto, .pk-firma { color: var(--pk-grau); text-transform: uppercase; letter-spacing: 0.3em; font-weight: 500; }
.pk-fuss { display: flex; align-items: center; }
.pk-fuss::after { content: ""; height: 1px; background: currentColor; opacity: 0.5; }

.pk-bild { overflow: hidden; } /* kein Grund: das Foto läuft per Maske (style.css) in den Kopf aus */
.pk-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Lesbarkeitsschutz für die Bildbeschriftung oben rechts, egal wie hell der Himmel ist */
.pk-bild::after {
  content: ""; position: absolute; top: 0; right: 0; width: 60%; height: 40%; pointer-events: none;
  background: radial-gradient(100% 100% at 100% 0%, rgba(246, 244, 240, 0.55), rgba(246, 244, 240, 0.18) 45%, transparent 75%);
}
.pk-lage { position: absolute; z-index: 1; display: flex; align-items: center; color: var(--ink); font-weight: 500; letter-spacing: -0.005em; }
.pk-lage span { position: relative; }
.pk-lage span::after { content: ""; position: absolute; left: 0; bottom: -0.6em; width: 1.4em; height: 2px; background: var(--pk-orange); }
.pk-lage svg { fill: none; stroke: currentColor; stroke-width: 1.3; flex: 0 0 auto; }

.pk-kunde { display: flex; align-items: center; font-weight: 500; color: var(--ink); letter-spacing: 0.01em; }
.pk-ortname { display: flex; align-items: flex-start; }
.pk-strich { flex: 0 0 auto; align-self: flex-end; margin-bottom: 0.507em; background: var(--pk-orange); }
.pk-ortwort { align-self: flex-end; font-weight: 200; line-height: 1; letter-spacing: -0.045em; color: #0f1012; white-space: nowrap; margin-left: -0.04em; }

/* ---------- Einblenden (gleiches Muster wie .hero [data-enter]) ---------- */
.pk [data-enter] { opacity: 0; transform: translateY(22px); animation: enter 0.9s var(--ease) forwards; }
.pk .pk-bild[data-enter] { transform: none; clip-path: inset(0 0 0 12%); animation: pk-bild 1.2s var(--ease) 0.1s forwards; }
.pk [data-enter="2"] { animation-delay: 0.1s; }
.pk [data-enter="3"] { animation-delay: 0.22s; }
.pk [data-enter="4"] { animation-delay: 0.34s; }
.pk [data-enter="5"] { animation-delay: 0.46s; }
.pk [data-enter="6"] { animation-delay: 0.58s; }
@keyframes pk-bild { to { opacity: 1; clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) {
  .pk [data-enter], .pk .pk-bild[data-enter] { animation: none; opacity: 1; transform: none; clip-path: none; }
}

/* ---------- Tablet / Handy: Foto oben, Text darunter ---------- */
@media (max-width: 1080px) {
  .pj-kopf.pk { --fade-x: var(--fade-voll); display: flex; flex-direction: column; padding-top: var(--nav-h); }
  .pk-bild { order: 1; position: relative; aspect-ratio: 4 / 3; max-height: 72vh; width: 100%; }
  .pk-ort { order: 2; position: relative; padding: 18px clamp(20px, 5vw, 48px) 0; }
  .pk-text { order: 3; position: relative; padding: clamp(36px, 6vw, 56px) clamp(20px, 5vw, 48px) 80px; }
  .pk-marke { font-size: 12px; letter-spacing: 0.3em; }
  .pk-marke span { margin: 0 0.8em; }
  .pk h1.pk-titel { margin-top: 20px; font-size: clamp(44px, 10vw, 96px); text-wrap: balance; }
  .pk-claim { margin-top: 22px; font-size: clamp(24px, 4.4vw, 36px); }
  .pk-mehr { margin-top: 30px; gap: 20px; font-size: 18px; }
  .pk-kreis { width: 54px; height: 54px; font-size: 20px; }
  .pk-zahlen { margin-top: 40px; flex-wrap: wrap; row-gap: 24px; }
  .pk-zahlen > div { padding: 0 clamp(16px, 3vw, 28px); }
  .pk-zahlen dt { font-size: 14px; }
  .pk-zahlen dd { margin-top: 6px; font-size: clamp(56px, 12vw, 96px); }
  .pk-zahlen small { font-size: 16px; margin-left: 5px; }
  .pk-zahlen .pk-ohne { font-size: 0.6em; }
  .pk-daten { margin-top: 36px; flex-wrap: wrap; row-gap: 18px; }
  .pk-daten > div { padding: 2px clamp(16px, 3vw, 28px); }
  .pk-daten dt { font-size: 13px; }
  .pk-daten dd { margin-top: 6px; font-size: 18px; }
  .pk-fuss { position: absolute; left: clamp(20px, 5vw, 48px); bottom: 32px; font-size: 10px; gap: 12px; }
  .pk-fuss::after { width: 80px; }
  .pk-lage { top: 18px; right: clamp(16px, 4vw, 32px); font-size: 13.5px; gap: 12px; }
  .pk-lage svg { width: 20px; height: 20px; margin-top: -10px; }
  .pk-kunde { font-size: 14px; gap: 10px; }
  .pk-ortname { margin-top: 4px; gap: clamp(14px, 3vw, 26px); }
  .pk-strich { width: clamp(36px, 7vw, 76px); height: clamp(4px, 0.6vw, 6px); }
  .pk-ortname { font-size: min(clamp(56px, 15vw, 146px), calc(150vw / var(--len))); }
  .pk-motto { position: absolute; right: clamp(20px, 5vw, 48px); top: 20px; font-size: 10px; line-height: 1.7; text-align: right; }
  .pk-firma { display: none; }
}
@media (max-width: 560px) {
  .pk-bild { aspect-ratio: 4 / 3.2; }
  .pk-motto { display: none; }
  .pk-ortname { font-size: min(18vw, calc(128vw / var(--len))); }
  .pk-zahlen > div { padding: 0 14px; }
  .pk-zahlen dd { font-size: clamp(40px, 13.5vw, 72px); }
  .pk-zahlen small { font-size: 14px; }
  .pk-daten > div:nth-child(3) { border-left: 0; padding-left: 0; flex-basis: 100%; }
}