/* /projekte, /projekte/<slug> (Angleichung Paket B) – css_extra in lib/seitenseo/projekte.php. Nur Tokens, Bewegung nur Farbwechsel, ≤ 6.144 B */
/* /projekte: Cramer breit, zwei Belege halb, weitere drittel; Werkstatt (F9) ab 1100 px mit Bild links */
.pj-presse,.pj-presse .cs-presse-buehne{height:100%}
.bs-projekt .kpi{margin-top:1rem}
.kpi-bild i{animation:none!important;opacity:1!important}   /* Punkte fest (sonst bis 121 Animationen) */
/* Presse: steht bei offenem Keks-Banner, 6 Takte statt endlos, Zähler bis 6, Deko ruhig; hell: Zahl weiß */
:root:is(.keks-offen:not(:has(#keks.raus)),:not(:has(#keks:not(.start),.keks-mini:not([hidden])))) .cs-presse *{animation-play-state:paused}
.cs-presse .cs-maschine *{animation-iteration-count:6}
.cs-presse .cs-m-rad{animation-iteration-count:13}
.cs-presse .cs-presse-zaehler b{animation-iteration-count:6.54}
.cs-presse :is(.cs-m-schwebe,.cs-m-turm-schein,.cs-m-lampe){animation:none}
html[data-design=hell] .cs-presse-zaehler b{color:inherit}
.pj-abschnitt+.pj-abschnitt{padding-top:0}
@media(min-width:640px) and (max-width:1099px){
  .pj-kunden>.bs-projekt:last-child:nth-child(even){grid-column:1/-1;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);column-gap:2rem;align-content:start}
  .pj-kunden>.bs-projekt:last-child:nth-child(even)>*{grid-column:2}
  .pj-kunden>.bs-projekt:last-child:nth-child(even)>.bs-projekt-bild{grid-column:1;grid-row:1/span 9;margin:0}
}
@media(min-width:760px) and (max-width:1099px){.pj-kunden .bs-projekt--breit ul.bs-zahlen{grid-column:1/-1;grid-row:10;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));column-gap:2rem}}
@media(min-width:1100px){
  .pj-kunden{grid-template-columns:repeat(6,minmax(0,1fr))}
  .pj-kunden>.bs-projekt{grid-column:span 2}
  .pj-kunden>.bs-projekt:is(:nth-child(2),:nth-child(3)){grid-column:span 3}
  .pj-kunden>.bs-projekt--breit{grid-column:1/-1}
  .pj-eigene{grid-template-columns:1fr 1fr}
  .pj-eigene>.bs-projekt--bild{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);column-gap:1.75rem;align-content:start}
  .pj-eigene>.bs-projekt--bild>*{grid-column:2}
  .pj-eigene .bs-projekt-bild{grid-column:1;grid-row:1/span 9;margin:0}
}
/* Projektseiten: Kopfbild ab 921 px (Handy: H1 = LCP), „Auf einen Blick“ als Zeile */
.pd-domain{margin-top:.625rem;font-size:max(.8125rem,13px);color:var(--muted2)}
.pd-kopfbild{margin:0;overflow:hidden;border:1px solid var(--line2);border-radius:var(--r-lg);background:var(--bg2);box-shadow:var(--bs-schatten)}
.pd-kopfbild img,.pd-bild img{display:block;width:100%;height:auto}
.pd-blick{display:grid;gap:1rem 2.5rem;margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.pd-blick dt,.cs-facts-titel{font-size:max(.75rem,12px);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.cs-facts-titel{margin-bottom:1rem}
.pd-blick dd{margin-top:.25rem;font-size:.95rem;color:var(--text)}
.pd-blick dd a{display:inline-block;padding:.625rem 0;margin-top:-.625rem}
@media(min-width:640px){.pd-blick{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}}
@media(max-width:920px){.pd-kopfbild{display:none}}
/* Text in einer Spalte; Handy: Geschichte vor der Seitenleiste */
:is(.pd-text,.pd-abnahme,.pd-einblicke,.pd-weitere){padding-block:calc(var(--sek-abstand)*.6)}
.pd-spalte{max-width:46rem}
.pd-spalte h2{margin:2.75rem 0 1rem;font-size:clamp(1.35rem,2.4vw,1.6rem);line-height:1.2;letter-spacing:-.02em}
.pd-spalte h2:first-child{margin-top:0}
.pd-spalte>p{color:var(--muted);font-size:1.02rem;line-height:1.75}
.pd-spalte .bs-punkte li{color:var(--text);font-size:1rem}
.cs-side{order:0}
/* Cramer: Kennzahlen fest (bs-zahlen), Spalten nach Platz für „5 Stellenanzeigen“ */
.cr-zahlen.bs-zahlen{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));column-gap:2rem;margin-top:0}
@media(min-width:820px){.cr-zahlen.bs-zahlen b{font-size:1.25rem}}
/* Cramer: Koralle nur für Handlung, Marken in Cyan; Kleines ≥ 13 px */
.cr-v-plus,.cr-text .zeit-marke{border-color:var(--line2);background:var(--cyan-soft);color:var(--cyan)}
.cr-text .zeitstrahl li.zeit-48::before{border-color:var(--cyan);background:var(--cyan)}
.cr-text .zeitstrahl li.zeit-48:first-child::after{background:var(--cyan)}
.cs-presse-zaehler{font-size:max(.75rem,12px)}
.cs-tags span,.galerie-raster :is(span,small),.galerie-reiter span,.cr-text .zeit-marke{font-size:max(.8125rem,13px)}
/* Ohne/Mit als Liste, Bausteine als Chips */
@media(min-width:760px){.pd-om{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}}
.pd-abnahme .bs-chips{margin-top:2rem}
/* Einblicke */
.pd-bilder{display:grid;gap:var(--bs-luecke);align-items:start}
.pd-bild{margin:0}
.pd-bild img{border:1px solid var(--line2);border-radius:var(--r-lg)}
.pd-bild--lang img{aspect-ratio:4/5;object-fit:cover;object-position:top}
.pd-bild figcaption{margin-top:.625rem;font-size:max(.8125rem,13px);color:var(--muted2)}
@media(min-width:760px){.pd-bilder{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
/* Weitere Projekte: Link „{Name} ansehen“, Zeile außerhalb */
.pd-weitere-liste{display:grid;gap:.75rem;list-style:none}
.pd-weitere-liste li{display:flex;align-items:center;gap:1rem;padding:.375rem 1rem .75rem .75rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);transition:border-color .18s}
.pd-weitere-liste li:has(a:hover){border-color:var(--cyan)}
.pd-weitere-liste span{min-width:0}
.pd-weitere-liste img,.pd-w-platz{flex:none;width:5rem;height:3.125rem;border-radius:.5rem;object-fit:cover;object-position:top}
.pd-w-platz{display:grid;place-items:center;background:var(--cyan-soft);color:var(--cyan);font-family:'Space Grotesk';font-weight:700}
.pd-weitere-liste small{display:block;font-size:max(.8125rem,13px);line-height:1.4;color:var(--muted)}
.pd-weitere-alle{margin-top:1rem}
@media(min-width:640px){.pd-weitere-liste{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.pd-weitere-liste{grid-template-columns:repeat(3,1fr)}.pd-weitere-liste:not(:has(>:nth-child(3))){grid-template-columns:1fr 1fr}}