/* Bausteine der Seiten */

.nur-schmal { display: none; }
.mitte { text-align: center; margin-top: 28px; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }

/* Einstieg */
.held { padding-top: clamp(20px, 3.4vw, 60px); padding-bottom: var(--abstand); align-items: end; row-gap: 32px; }
.held-text { grid-column: 1 / span 5; display: grid; gap: clamp(18px, 1.7vw, 28px); align-self: center; }
.held-bild { grid-column: 6 / -1; aspect-ratio: 3 / 2; }
.held-fuss { max-width: 30em; }
.seitenkopf { padding-top: clamp(28px, 4.5vw, 80px); padding-bottom: clamp(36px, 5vw, 80px); row-gap: 18px; }
.seitenkopf h1 { grid-column: 1 / span 8; }
.seitenkopf .lead { grid-column: 1 / span 7; }
.seitenkopf .knoepfe { grid-column: 1 / -1; margin-top: 8px; }
.breitbild { padding-inline: var(--rand); }
.breitbild .foto { aspect-ratio: 21 / 9; }

/* Zwei Spalten: Titel links, Inhalt rechts */
.spalte-links { grid-column: 1 / span 5; display: grid; gap: 18px; align-content: start; justify-items: start; }
.spalte-rechts { grid-column: 7 / -1; }
h2.spalte-links { display: block; }
.zeilen { border-top: 1px solid var(--linie); }
.zeilen li { padding: clamp(14px, 1.5vw, 24px) 0; border-bottom: 1px solid var(--linie); }
.zeilen h3 { margin-bottom: 4px; }
.zeilen p { color: var(--grau); max-width: 36em; }

/* Arbeiten */
.arbeit[href*="zweite-schicht"] img { object-position: 50% 82%; }
.arbeit[href*="letzte-faehre"] img { object-position: 50% 100%; }
.arbeiten-start { row-gap: clamp(36px, 5vw, 80px); align-items: start; }
.a-gross { grid-column: span 8; }
.a-klein { grid-column: span 4; }
.arbeiten-alle { row-gap: clamp(40px, 6vw, 96px); align-items: start; }
.arbeiten-alle .arbeit:nth-child(7n + 1) { grid-column: span 8; }
.arbeiten-alle .arbeit:nth-child(7n + 2) { grid-column: span 4; margin-top: clamp(0px, 6vw, 110px); }
.arbeiten-alle .arbeit:nth-child(7n + 3) { grid-column: span 4; }
.arbeiten-alle .arbeit:nth-child(7n + 4) { grid-column: span 8; }
.arbeiten-alle .arbeit:nth-child(7n + 5) { grid-column: span 5; }
.arbeiten-alle .arbeit:nth-child(7n + 6) { grid-column: span 7; margin-top: clamp(0px, 8vw, 150px); }
.arbeiten-alle .arbeit:nth-child(7n + 7) { grid-column: 3 / span 8; }

/* Satz, der sich beim Scrollen aufbaut */
.grosser-satz { grid-column: 1 / span 10; }
.satz-bild { margin-top: clamp(40px, 6vw, 96px); }
.film { grid-column: 1 / -1; display: grid; gap: 10px; }
.film .foto { aspect-ratio: 16 / 10; background: #000; }

/* Schritte als Karten, die sich aufeinanderlegen */
.stapel { display: grid; gap: var(--spalte); padding-inline: var(--rand); }
.stapel > li { position: sticky; top: calc(var(--kopf) * .4 + var(--i) * 14px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalte); align-items: stretch; padding: clamp(16px, 1.7vw, 28px); border-radius: var(--radius); background: var(--papier); box-shadow: 0 -1px 0 var(--linie); }
.stapel-text { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 10px; padding: clamp(6px, 1vw, 16px); }
.stapel-text .etikett { margin-bottom: auto; padding-bottom: 36px; }
.stapel-text p { color: var(--grau); max-width: 28em; }
.stapel-bild { grid-column: 6 / -1; aspect-ratio: 16 / 10; }

/* Betriebe: Laufband und Fotoreihen */
.betriebe { padding-block: var(--abstand) 0; overflow: hidden; }
.betriebe-kopf { row-gap: 14px; margin-bottom: clamp(28px, 3.6vw, 60px); }
.betriebe-kopf h2 { grid-column: 1 / span 6; }
.betriebe-kopf p { grid-column: 7 / span 5; align-self: end; }
.laufband { overflow: hidden; padding-block: .2em; border-block: 1px solid var(--linie); }
.lauf-innen { display: inline-flex; white-space: nowrap; color: var(--petrol); will-change: transform; }
.lauf-innen span { padding-right: .35em; }
.lauf-innen i { font-style: normal; color: var(--linie); padding-inline: .15em; }
.zug-rahmen { display: grid; gap: var(--spalte); margin-top: clamp(28px, 3.6vw, 60px); }
.zug { display: flex; gap: var(--spalte); padding-inline: var(--rand); width: max-content; }
.zug-bild { width: clamp(240px, 30vw, 560px); aspect-ratio: 3 / 2; flex: none; }
.betriebe-hinweis { padding: 12px var(--rand) 0; }

/* Bild wechselt mit dem Listeneintrag */
.wechsel { aspect-ratio: 3 / 2; }
.wechsel > * { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); z-index: 0; }
.wechsel > .vorher { clip-path: inset(0); z-index: 1; }
.wechsel > .an { clip-path: inset(0); z-index: 2; transition: clip-path .9s var(--weich); }
.spalte-rechts > .wechsel { margin-top: clamp(20px, 2.4vw, 40px); }
.wechsel-spalte { grid-column: 1 / span 5; }
.wechsel-spalte .wechsel { position: sticky; top: calc(var(--kopf) + 16px); aspect-ratio: 4 / 5; max-height: calc(100vh - var(--kopf) - 32px); width: 100%; }
.wechsel-liste { grid-column: 7 / -1; }
.leistung { display: grid; gap: 16px; align-content: center; min-height: 72vh; padding-block: 32px; border-top: 1px solid var(--linie); }
.leistung:first-child { border-top: 0; align-content: start; padding-top: 0; }
.leistung-bild { aspect-ratio: 3 / 2; }

/* Projektseite einer Studie */
.fall-kopf { padding-top: clamp(20px, 3.4vw, 60px); padding-bottom: clamp(48px, 7vw, 110px); align-items: end; row-gap: 32px; }
.fall-text { grid-column: 1 / span 5; display: grid; gap: clamp(16px, 1.6vw, 26px); justify-items: start; align-self: center; }
.fall-bild { grid-column: 6 / -1; aspect-ratio: 3 / 2; }
.fall-bild.hoch { aspect-ratio: 4 / 3; }
.fall-daten { display: grid; grid-template-columns: auto 1fr; gap: 3px 18px; font-size: clamp(14px, .2vw + 13.2px, 16px); border-top: 1px solid var(--linie); padding-top: 12px; width: 100%; }
.fall-daten dt { color: var(--grau); }
.fall-spalten { row-gap: 32px; }
.fall-spalten > div { grid-column: span 5; display: grid; gap: 12px; align-content: start; }
.fall-spalten > div + div { grid-column: 7 / -1; }
.geraete { align-items: start; row-gap: 24px; }
.browser { grid-column: 1 / span 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.browser-kopf { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #1d2428; color: #a9b8b9; font-size: 13px; }
.browser-kopf i { width: 10px; height: 10px; border-radius: 50%; background: #3c464b; }
.browser-kopf span { flex: 1; margin-left: 12px; padding: 3px 12px; border-radius: 999px; background: #10181c; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.browser video { width: 100%; aspect-ratio: 16 / 10; }
.handy-rahmen { grid-column: 10 / -1; padding: 7px; border-radius: 34px; background: #10181c; }
.handy-rahmen video { width: 100%; aspect-ratio: 390 / 844; border-radius: 27px; object-fit: cover; }
.fall-galerie { padding-block: clamp(48px, 6vw, 96px); background: var(--feld); color: var(--feldtext); overflow: hidden; display: grid; gap: var(--spalte); }
.fall-galerie .zug-bild { width: clamp(300px, 44vw, 800px); aspect-ratio: 16 / 10; }
.fall-galerie .zug-bild.schmal { width: clamp(160px, 17vw, 290px); aspect-ratio: 390 / 844; border-radius: 18px; }
.fall-galerie p { padding-inline: var(--rand); }
.mitnahme { row-gap: 22px; }
.mitnahme li { grid-column: span 4; display: grid; gap: 8px; align-content: start; border-top: 1px solid currentColor; padding-top: 14px; }
.mitnahme li p { color: var(--grau); }
.naechste { display: block; text-decoration: none; }
.naechste-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding-inline: var(--rand); margin-bottom: 16px; }
.naechste-kopf .textlink { flex: none; white-space: nowrap; }
.naechste .foto { margin-inline: var(--rand); aspect-ratio: 21 / 9; }
.naechste:hover .lage { scale: 1.05; }

/* Person */
.person { align-items: center; row-gap: 30px; }
.person-bild { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.person-text { grid-column: 7 / -1; display: grid; gap: clamp(16px, 1.6vw, 26px); justify-items: start; }

/* Pakete */
.pakete { row-gap: var(--spalte); }
.paket { grid-column: span 4; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: clamp(20px, 2.1vw, 34px); border-radius: var(--radius); background: var(--papier); }
.paket.dunkel { background: var(--tief); }
.auf-weiss .paket:not(.dunkel) { background: var(--nebel); }
.paket-preis { font-size: clamp(30px, 3.2vw, 54px); letter-spacing: -.024em; line-height: 1.05; }
.paket-satz { color: var(--grau); }
.paket.dunkel .paket-satz { color: #c6d1d1; }
.paket ul { flex: 1; display: grid; align-content: start; gap: 4px; margin: 8px 0 14px; padding-top: 14px; border-top: 1px solid var(--linie); width: 100%; }
.paket.dunkel ul { border-color: rgba(255,255,255,.22); }
.paket li { padding-left: 1em; text-indent: -1em; }
.paket li::before { content: "– "; }

/* Betreuung */
.plaene { row-gap: var(--spalte); }
.plan { grid-column: span 6; display: grid; gap: 10px; align-content: start; padding: clamp(20px, 2.1vw, 34px); border-radius: var(--radius); background: rgba(255,255,255,.07); }
.plan-preis { font-size: clamp(28px, 2.8vw, 46px); letter-spacing: -.022em; line-height: 1.1; }
.plan-preis span { font-size: .42em; letter-spacing: 0; color: #a9b8b9; }
.plan li { padding-left: 1em; text-indent: -1em; }
.plan li::before { content: "– "; }
.fussnote { grid-column: 1 / span 8; margin-top: 18px; }

/* Rechnung */
.rechnung { border-top: 1px solid var(--linie); }
.rechnung li { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.rechnung b { font-weight: 450; font-size: clamp(21px, 1.75vw, 28px); white-space: nowrap; letter-spacing: -.012em; }
.rechnung .summe { border-bottom: 2px solid var(--tinte); font-weight: 500; }

/* Ablauf */
.ablauf-liste { border-top: 1px solid var(--tinte); }
.ablauf-liste li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalte); row-gap: 8px; padding: clamp(18px, 2vw, 34px) 0; border-bottom: 1px solid var(--linie); }
.ablauf-nr { grid-column: span 1; color: var(--grau); }
.ablauf-liste h2 { grid-column: span 4; }
.ablauf-liste p { grid-column: span 5; color: var(--grau); }
.ablauf-zahlung { grid-column: span 2; text-align: right; }
.ablauf-zahlung b { display: block; font-weight: 450; font-size: clamp(19px, 1.5vw, 25px); }
.ablauf-zahlung span { font-size: 14px; color: var(--grau); }

/* Über mich */
.ueber-bild { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.ueber-text { grid-column: 7 / -1; display: grid; gap: 18px; align-content: start; }
.zitat-text > * + * { margin-top: .85em; }

/* Designvorschau */
.vorschau-links { grid-column: 1 / span 5; display: grid; gap: 18px; align-content: start; }
.vorschau-rechts { grid-column: 7 / -1; }
.haken { display: grid; gap: 6px; margin-top: 4px; }
.haken li { padding-left: 1.2em; text-indent: -1.2em; }
.haken li::before { content: "✓ "; color: var(--petrol); font-weight: 600; }

/* Website-Check */
.check-karte { grid-column: 1 / span 9; display: grid; gap: 22px; padding: clamp(24px, 3vw, 48px); border-radius: var(--radius); background: var(--nebel); min-height: 340px; align-content: space-between; }
.check-karte[hidden] { display: none; }
.check-balken { height: 3px; background: var(--linie); }
.check-balken i { display: block; height: 100%; width: 0; background: var(--tinte); transition: width .35s var(--weich); }
.check-frage { font-size: clamp(24px, 2.6vw, 42px); line-height: 1.12; letter-spacing: -.02em; }
.check-ergebnis[hidden] { display: none; }
.check-ergebnis { grid-column: 1 / span 9; display: grid; gap: 22px; }
.check-ergebnis:focus { outline: 0; }
.lecks { border-top: 1px solid var(--linie); }
.lecks li { padding: 14px 0; border-bottom: 1px solid var(--linie); color: var(--grau); }
.lecks strong { display: block; color: var(--tinte); font-weight: 500; margin-bottom: 2px; }
.textknopf { text-decoration: underline; text-underline-offset: .18em; }


/* Rechtliches */
.recht { grid-column: 1 / span 8; max-width: 44em; }
.recht h2 { font-size: 1.08em; font-weight: 550; letter-spacing: -.005em; margin: 1.7em 0 .3em; }
.recht-kurz { font-size: 1.16em; line-height: 1.32; }

@media (max-width: 860px) {
  .nur-breit { display: none; }
  .nur-schmal { display: block; }
  .held-text, .held-bild, .seitenkopf h1, .seitenkopf .lead, .spalte-links, .spalte-rechts, .grosser-satz, .person-bild, .person-text, .ueber-bild, .ueber-text, .vorschau-links, .vorschau-rechts, .check-karte, .check-ergebnis, .recht, .fussnote { grid-column: 1 / -1; }
  .spalte-rechts, .vorschau-rechts { margin-top: 28px; }
  .a-gross, .a-klein, .paket, .plan, .arbeiten-alle .arbeit:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
  .breitbild .foto { aspect-ratio: 3 / 2 !important; }
  .stapel > li { position: static; row-gap: 18px; }
  .stapel-text, .stapel-bild, .betriebe-kopf h2, .betriebe-kopf p, .wechsel-liste, .fall-text, .fall-bild, .fall-spalten > div, .fall-spalten > div + div, .browser, .mitnahme li { grid-column: 1 / -1; }
  .stapel-text .etikett { padding-bottom: 12px; }
  .wechsel-spalte { display: none; }
  .leistung { min-height: 0; padding-block: 28px; }
  .handy-rahmen { grid-column: 3 / span 8; }
  .naechste .foto { aspect-ratio: 3 / 2; }
  .ablauf-nr { grid-column: 1 / -1; }
  .ablauf-liste h2, .ablauf-liste p, .ablauf-zahlung { grid-column: 1 / -1; text-align: left; }
  .ablauf-zahlung b { display: inline; margin-right: 6px; }
}