/* =====================================================================
   pages/projekte.css · Team Projekte · Übersicht /projekte/ (Skizze 05) und 13 Case-Seiten (Skizze 06)
   Seitenkopf-System aus b12.css (.kopf, .kopf__oben, .feld, .feld--band, .h1u, .gegenstimme, .listentitel).
   Bilder randlos; wo eine Arbeit gezeigt wird, liegt das Bild auf der Kante Amber/Weiß.
   Keine Akzentränder, kein uppercase, keine Verläufe, kein backdrop-filter, kein 100vw.
   ===================================================================== */

/* ---------- Bilder (randlos, Formate je Gruppe) ---------- */
.bild { margin: 0; }
.bild picture { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; }
.bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bild--mobil picture { aspect-ratio: 390 / 844; }
.bild--frei picture { aspect-ratio: var(--ar, 16 / 9); }
.bild figcaption { margin-top: 12px; color: var(--b-grau-hell); }
.auf-dunkel .bild figcaption { color: var(--b-grau-dunkel); }

/* =====================================================================
   CASE-KOPF (Skizze 06): H1 Kundenname + Gegenstimme · Feld als Steckbrief · Titelbild hängt ins Weiß
   hoch: Text Spalten 1–6, Bild 8–12 (4 : 5 bzw. eigenes Format) · quer: Text 1–5, Bild 6–12 (16 : 9)
   Überhang über die Feldkante: 72 px mobil, 216 px ab 1024 px (Bild unten bündig, Rand unten = −(Überhang + Feldpolster))
   ===================================================================== */
.c-feld__satz { font-size: 20px; line-height: 1.5; max-width: 30em; }
.c-feld__link { margin-top: 24px; }
.steckbrief { margin-top: 32px; }
.steckbrief > div { border-top: 1px solid var(--b-schwarz); padding-block: 12px 14px; display: grid; gap: 4px; }
.steckbrief > div:last-child { border-bottom: 1px solid var(--b-schwarz); }
.steckbrief dd { margin: 0; }
.c-feld .c-feld__bild { margin: 40px 0 -120px; position: relative; z-index: 1; }   /* .c-feld: schlägt die Kern-Regel .kopf figure { margin: 0 } */
.c-feld__bild--45 picture { aspect-ratio: 4 / 5; }
.c-feld__bild:not(.c-feld__bild--45) picture { aspect-ratio: var(--ar, 16 / 9); }
.c-kopf + section { padding-top: calc(var(--sek) + 72px); }
@media (min-width: 768px) { .steckbrief > div { grid-template-columns: 9em minmax(0, 1fr); align-items: baseline; } }
@media (min-width: 1024px) {
  .c-feld .c-feld__bild { grid-row: 1; align-self: end; margin: 0 0 -280px; }
  .c-kopf--hoch .c-feld__haupt { grid-column: 1 / 7; }
  .c-kopf--hoch .c-feld__bild { grid-column: 8 / 13; }
  .c-kopf--quer .c-feld__haupt { grid-column: 1 / 6; }
  .c-kopf--quer .c-feld__bild { grid-column: 6 / 13; }
  .c-kopf--quer .steckbrief > div { grid-template-columns: 7.5em minmax(0, 1fr); }
  /* hoch: das erste Kapitel beginnt neben dem hängenden Bild (Skizze), Überschrift und Text in Spalte 1–7 */
  .c-kopf--hoch + section { padding-top: var(--sek); }
  .c-kopf--hoch + .c-erstes .kapitel__h2 { max-width: calc((100% - 264px) / 12 * 7 + 144px); }
  .c-kopf--hoch + .c-erstes.kapitel--mit-bild { padding-top: calc(var(--sek) + 216px); }
  /* quer: das Bild ist breiter als die Textspalte, das erste Kapitel beginnt unter ihm */
  .c-kopf--quer + section { padding-top: calc(216px + 96px); }
}

/* unter: Titelbild mit amberfarbenem/orangem Grund (Thorsten Hess, Adidas × Snipes). Auf dem Feld verschwimmt die Kante,
   deshalb trägt das Feld nur Text (Satz links, Steckbrief rechts) und das Bild beginnt 40 px unter dem Feld im Weiß,
   rechts neben dem ersten Kapitel (Asymmetrie wie Skizze 06, nur ohne Überlappung mit Amber). */
.c-kopf--unter + section { padding-top: 40px; }
.c-mit-titelbild .c-titelbild { margin: 0 0 56px; }
.c-titelbild picture { aspect-ratio: 4 / 5; }
.c-titelbild-allein { padding-top: 40px; }
@media (min-width: 1024px) {
  .c-kopf--unter .c-feld__haupt { grid-column: 1 / 7; }
  .c-kopf--unter .c-feld__dazu { grid-column: 8 / 13; }
  .c-kopf--unter .c-feld__dazu .steckbrief { margin-top: 0; }
  .c-kopf--unter + section { padding-top: var(--sek); }
  .c-mit-titelbild .c-titelbild { grid-column: 8 / 13; grid-row: 1 / span 2; align-self: start; margin: calc(40px - var(--sek)) 0 0; }
  .c-mit-titelbild .kapitel__h2 { grid-column: 1 / 8; grid-row: 1; }
  .c-mit-titelbild .kapitel__raster { grid-column: 1 / 8; grid-row: 2; display: block; }
  .c-titelbild-allein .c-titelbild { grid-column: 8 / 13; }
}

/* =====================================================================
   ÜBERSICHT /projekte/ (Skizze 05): H1 + Einleitung · Band mit allen Kundennamen ·
   erste Karte auf der Bandkante, Karten geboxt auf 1240 (groß + Paare), schwarzes Textband wie S4
   ===================================================================== */
.pu-oben { row-gap: 28px; }
.pu-oben__text { max-width: 32em; }
.namen { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 2px 0; }
.namen li { font: 700 clamp(19px, 17.6px + .376vw, 23px)/1.35 var(--f-display); font-stretch: 100%; }
.namen li:not(:last-child)::after { content: "·"; padding-inline: 12px; font-weight: 400; }
.namen a { text-decoration: none; }
.namen a:hover, .namen a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.pu-band .feld__inhalt { padding-bottom: 96px; }
.pu-aktuell { position: relative; margin-top: -64px; padding-bottom: var(--sek); }
.pu-karte { position: relative; }
.pu-karte picture { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; }
.pu-karte--gross picture { aspect-ratio: 1240 / 531; }
.pu-karte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pu-karte__band { background: var(--b-schwarz); color: var(--b-weiss); padding: 24px 72px 28px 24px; display: grid; gap: 10px; position: relative; }
.pu-karte__band .display-m { font-size: clamp(26px, 20px + 1.69vw, 48px); }
.pu-karte__band h3 { hyphens: manual; }
.pu-karte__band h3 a { text-decoration: none; }
.pu-karte__band h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pu-karte__band h3 a:focus-visible { outline: none; }
.pu-karte:has(a:focus-visible) { outline: 3px solid var(--b-schwarz); outline-offset: 4px; }
.pu-karte__text { max-width: 44em; }
.pu-karte__mehr { position: absolute; right: 24px; bottom: 28px; }
.pu-karte:hover .pu-karte__mehr .pill__kreis { transform: translate(3px, -1px) scale(1.05); }
.pu-karte:hover h3 a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.pu-paar { margin-top: 24px; display: grid; gap: 24px; align-items: start; }
@media (min-width: 768px) { .pu-paar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .pu-oben .h1u { grid-column: 1 / 13; }
  .pu-oben__text { grid-column: 8 / 13; }
  .pu-band .feld__inhalt { padding-bottom: 152px; }
  .pu-aktuell { margin-top: -112px; }
  .pu-karte__band { padding: 28px 120px 32px 32px; }
  .pu-karte__mehr { right: 32px; bottom: 32px; }
}

/* =====================================================================
   CASE-INHALT · Aufgabe → Umsetzung (Schwarz, Stücke rasten Zeile für Zeile ein, b12.js .rastet) →
   Leistungen → Ergebnis → Weiter → Amber-Flut
   ===================================================================== */
/* ---------- Kapitel (Aufgabe, Text mit Bild) ---------- */
.kapitel { padding-block: var(--sek); background: var(--b-weiss); }
.kapitel.auf-dunkel { background: var(--b-schwarz); color: var(--b-weiss); }
.kapitel__raster { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
.kapitel__text > p + p, .kapitel__intro > p + p { margin-top: 20px; }
.kapitel--text:not(.kapitel--mit-bild) .kapitel__text > p:first-child { font-size: clamp(19px, 17.6px + .38vw, 22px); line-height: 1.5; }
.kapitel__text, .kapitel__intro { max-width: 36em; }
.kapitel__bilder { display: grid; gap: 24px; }
.kapitel__bilder .bild { width: 100%; }
.kapitel__bilder .bild--mobil { max-width: 320px; }
@media (min-width: 900px) {
  .kapitel__raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-top: 56px; }
  .kapitel__text { grid-column: 7 / 13; }
  .kapitel--mit-bild .kapitel__bilder { grid-column: 1 / 6; grid-row: 1; align-self: start; }
  .kapitel--mit-bild .kapitel__text { grid-row: 1; }
  /* zweites weißes Textkapitel in Folge: Text wechselt auf die linke Seite (Rhythmus statt Wiederholung) */
  .kapitel--links .kapitel__text { grid-column: 1 / 7; }
}

/* Kopf mit Einleitung: H2 über die volle Breite, Einleitung rechts */
.kapitel__kopf { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
.kapitel__intro { color: var(--b-grau-hell); }
.auf-dunkel .kapitel__intro { color: var(--b-grau-dunkel); }
.kapitel__intro:empty { display: none; }
@media (min-width: 900px) {
  .kapitel__kopf { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .kapitel__kopf .h2 { grid-column: 1 / -1; }
  .kapitel__intro { grid-column: 7 / 13; }
}

/* ---------- Umsetzung (Schwarz): Schritte als Sechseck-Zeilen ohne Ziffern ---------- */
.schritte { margin-top: 56px; border-bottom: 1px solid var(--b-linie-dunkel); }
.schritt { border-top: 1px solid var(--b-linie-dunkel); padding-block: 24px 28px; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
.schritt h3 {
  display: flex; align-items: center; gap: .32em;
  font: 800 clamp(26px, 19.4px + 1.76vw, 44px)/1.05 var(--f-display); font-stretch: 100%; letter-spacing: -.01em;
  hyphens: auto; -webkit-hyphens: auto;
}
.schritt h3 span { min-width: 0; }
.schritt p { color: var(--b-grau-dunkel); max-width: 34em; }
@media (min-width: 900px) {
  .schritt { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding-block: 32px; }
  .schritt h3 { grid-column: 1 / 8; font-stretch: var(--stretch); }
  .schritt p { grid-column: 8 / 13; }
}
.kapitel__bilder--breit { margin-top: 72px; }

/* ---------- Leistungen: Umfang als ein Satz, Lieferungen als Zeilen ---------- */
.leistungen { padding-block: var(--sek); background: var(--b-weiss); }
.leistungen__raster { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
.umfang { display: flex; flex-wrap: wrap; font: 250 clamp(26px, 19.4px + 1.76vw, 44px)/1.3 var(--f-display); font-stretch: 100%; max-width: 26em; }
.umfang li { white-space: nowrap; }
.umfang li:not(:last-child)::after { content: "·"; padding-inline: .32em; }
.geliefert { border-bottom: 1px solid var(--b-schwarz); }
.geliefert li { border-top: 1px solid var(--b-schwarz); padding-block: 20px 24px; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
.geliefert h3 { font: 700 clamp(21px, 19.6px + .38vw, 24px)/1.2 var(--f-display); font-stretch: 100%; }
.geliefert p { color: var(--b-grau-hell); }
.leistungen__weiter { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 0 32px; }
.leistungen__mobil .bild { max-width: 320px; }
@media (min-width: 900px) {
  .leistungen__raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-top: 64px; }
  .leistungen__liste { grid-column: 1 / 11; }
  .leistungen--mit-bild .leistungen__mobil { grid-column: 1 / 5; grid-row: 1; align-self: start; position: sticky; top: calc(var(--hdr-h) + 32px); }
  .leistungen--mit-bild .leistungen__liste { grid-column: 6 / 13; grid-row: 1; }
  .geliefert li { grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 24px; }
  .geliefert h3 { grid-column: 1 / 4; }
  .geliefert p { grid-column: 4 / 8; }
  .leistungen:not(.leistungen--mit-bild) .geliefert li { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .leistungen:not(.leistungen--mit-bild) .geliefert h3 { grid-column: 1 / 5; }
  .leistungen:not(.leistungen--mit-bild) .geliefert p { grid-column: 5 / 11; }
}

/* ---------- Ergebnis: Faktzeilen schwer neben leicht (wie B12 neben MEDIA) ---------- */
.ergebnis__fakten { margin-top: 56px; }
.ergebnis__fakten .fakt { padding-block: 18px 20px; }
.ergebnis__fakten .fakt__wort { font-size: clamp(28px, 22.6px + 1.42vw, 46px); }
.fakt__zu { color: var(--b-grau-hell); }
.auf-dunkel .fakt__zu { color: var(--b-grau-dunkel); }
.ergebnis__stimme, .leitsatz { margin: 96px 0 0; }
.kapitel--ergebnis:not(.auf-dunkel) .stimme blockquote, .kapitel--ergebnis:not(.auf-dunkel) .stimme__rolle { color: var(--b-grau-hell); }
.leitsatz blockquote { margin: 0; }
.leitsatz blockquote p { font: 800 clamp(30px, 24.6px + 1.42vw, 48px)/1.08 var(--f-display); font-stretch: var(--stretch); letter-spacing: -.01em; hyphens: manual; max-width: 18em; }
.leitsatz figcaption { margin-top: 20px; color: var(--b-grau-hell); }
.auf-dunkel .leitsatz figcaption { color: var(--b-grau-dunkel); }
@media (min-width: 900px) {
  .ergebnis__fakten { width: calc(10 / 12 * 100%); }
  .ergebnis__stimme { width: calc(9 / 12 * 100%); margin-left: auto; }
}

/* ---------- Weiter / Zurück zwischen den Cases ---------- */
.weiter { padding-block: var(--sek); background: var(--b-weiss); }
.weiter__liste { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--b-schwarz); }
.weiter__liste li { border-top: 1px solid var(--b-schwarz); display: grid; }
.weiter__liste a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; column-gap: 24px; row-gap: 6px; padding: 24px 0 28px; text-decoration: none; }
.weiter__liste .meta { grid-column: 1; grid-row: 1; color: var(--b-grau-hell); }
.weiter__name { grid-column: 1; grid-row: 2; font: 800 clamp(30px, 21.2px + 2.35vw, 56px)/1.05 var(--f-display); font-stretch: var(--stretch); letter-spacing: -.01em; hyphens: manual; }
.weiter__zeile { grid-column: 1; grid-row: 3; align-self: start; color: var(--b-grau-hell); }
.weiter__kreis { grid-column: 2; grid-row: 3; align-self: end; width: 48px; height: 48px; border-radius: 50%; background: var(--b-amber); color: var(--b-schwarz); display: grid; place-items: center; transition: transform 320ms var(--feder); }
.weiter__kreis svg { width: 18px; height: 18px; }
.weiter__zurueck .weiter__kreis svg { transform: rotate(180deg); }
.weiter__liste a:hover .weiter__name, .weiter__liste a:focus-visible .weiter__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.weiter__vor a:hover .weiter__kreis, .weiter__vor a:focus-visible .weiter__kreis { transform: translate(3px, -1px) scale(1.05); }
.weiter__zurueck a:hover .weiter__kreis, .weiter__zurueck a:focus-visible .weiter__kreis { transform: translate(-3px, -1px) scale(1.05); }
.weiter__alle { margin-top: 28px; }
@media (min-width: 900px) {
  .weiter__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border-bottom: 0; }
  .weiter__liste li { border-bottom: 1px solid var(--b-schwarz); }
  .weiter__liste a { padding: 32px 0 36px; min-height: 220px; }
}


/* Register der acht älteren Projekte (Schwarz) mit klebendem Bildfenster */
/* Register der acht älteren Projekte (Schwarz) mit klebendem Bildfenster */
.pu-register { background: var(--b-schwarz); color: var(--b-weiss); padding-block: var(--sek); }
.register { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr); }
.register__liste { border-bottom: 1px solid var(--b-linie-dunkel); }
.register__zeile { border-top: 1px solid var(--b-linie-dunkel); }
.register__zeile a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; row-gap: 4px; align-items: end; padding-block: 22px 26px; text-decoration: none; }
.register__bild { grid-column: 1 / -1; display: block; margin-bottom: 18px; }
.register__bild picture { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; }
.register__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.register__name { grid-column: 1; font: 800 clamp(30px, 21.2px + 2.35vw, 56px)/1.05 var(--f-display); font-stretch: var(--stretch); letter-spacing: -.01em; transition: transform 380ms var(--feder); overflow-wrap: anywhere; hyphens: manual; }
.register__zeile-text { grid-column: 1; color: var(--b-grau-dunkel); }
.register__pfeil { grid-column: 2; grid-row: 2 / span 2; width: 44px; height: 44px; border-radius: 50%; background: var(--b-amber); color: var(--b-schwarz); display: grid; place-items: center; transition: transform 320ms var(--feder); }
.register__pfeil svg { width: 16px; height: 16px; }
.register__zeile a:focus-visible { outline: 3px solid var(--b-amber); outline-offset: 4px; }
.register__fenster { display: none; }
@media (min-width: 900px) {
  .register { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .register__liste { grid-column: 1 / 8; }
  .register__bild { display: none; }
  .register__zeile a { padding-block: 26px 30px; }
  .register__pfeil { grid-row: 1 / span 2; transform: scale(.82); }
  .register__zeile.ist-aktiv .register__name, .register__zeile a:hover .register__name, .register__zeile a:focus-visible .register__name { transform: translateX(14px); }
  .register__zeile.ist-aktiv .register__pfeil, .register__zeile a:hover .register__pfeil { transform: scale(1); }
  .register__fenster { display: block; grid-column: 8 / 13; position: sticky; top: calc(var(--hdr-h) + 40px); }
  .register__fenster picture { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; }
  .register__fenster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 380ms var(--feder); }
  .register__fenster img.ist-aktiv { opacity: 1; }
}