/* Lichtbestand · Unterseiten (Leistungen, Projekte, Vorgehen, Studio, Datenschutz, 404)
   Kopf, Fuß, Kontakt, Fragen, Knöpfe, Merkmale, Fakten (dl.werk-fakten) und Schilder kommen aus css/stil.css.
   Hier stehen nur die Bausteine der Unterseiten:
   .seitenkopf (ruhiger Ausschnitt des Startbilds: Handy in Schichten, die eine Lichtlinie, Brotkrumen, H1, Einstieg) · .block (Kopf links, Inhalt
   rechts; .block-breit: Inhalt über die ganze Breite) · .text (Fließtext) · .karten/.karte · .ablauf > ol.ablauf-liste
   (Schritte mit Lichtlinie aus js/seite.js) · .vergleich · .telefone (Handy-Bilder) · .hinweis · .weiter (Links am Blockende).
   Keine Inline-Styles, die CSP lässt nur Dateien von dieser Domain zu. */

/* ---------- Seitenkopf ----------
   Regel seit 23.10.2026 (kein Einheitsbild mehr):
   · Leistungsseiten und „App entwickeln lassen“: Mockup-Kopf .seitenkopf.mit-handys mit drei Handys der passenden App
     (Lernspiele → Waldzeit, Mediaguides → Fadenlauf, WebGIS und Mängelmelder → Wegwarte, PWA, Barrierefrei und
     App entwickeln lassen → je ein Handy jeder App), dazu die Projektseiten und /projekte/ (CSS weiter unten).
   · Ablauf, Über uns, Öffentliche Auftraggeber, Impressum, Datenschutz, 404: kein Bild, nur die Lichtlinie auf Tiefschwarz. */
/* Unterseiten durchgehend im tiefen Schwarz, damit unter dem Seitenkopf keine Kante entsteht */
body:has(.seitenkopf) { background: var(--tief); }
.fragen.block { background: none; }
.seitenkopf {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: var(--kopf-hoch);
  background: var(--tief);
}

/* Die eine Lichtlinie: waagerecht, mit einer 45°-Fase wie im Zeichen. Ein Band über die ganze Breite
   (viewBox 1600 × 220, „slice“: schmal bleibt die Fase in der Mitte sichtbar). Zeichnet sich einmal beim Laden. */
.seitenlicht { display: block; width: 100%; height: clamp(84px, 15svh, 190px); max-width: none; overflow: visible; mix-blend-mode: screen; pointer-events: none; }
.seitenlicht path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.licht-hof { stroke: var(--gelb); stroke-width: 130; opacity: .26; }
.licht-schein { stroke: var(--gelb); stroke-width: 26; opacity: .72; }
.licht-glut { stroke: #FFE14D; stroke-width: 6; }
.licht-kern { stroke: #FFFBE6; stroke-width: 1.2; opacity: .95; }
@media (prefers-reduced-motion: no-preference) {
  .seitenlicht path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: licht-zeichnen 1.9s cubic-bezier(.55, .05, .3, 1) .2s forwards; }
}
@keyframes licht-zeichnen { to { stroke-dashoffset: 0; } }

.seitenkopf-inhalt {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
  padding-bottom: clamp(48px, 7vw, 112px);
}
.brotkrumen ol {
  display: flex; flex-wrap: wrap; align-items: center;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--mono); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grau-2);
}
/* Schrägstrich am Ende des vorigen Eintrags: bricht die Zeile um, beginnt die neue mit einem Wort, nicht mit „/“ */
.brotkrumen li:not(:last-child)::after { content: "/"; margin: 0 .7em; color: var(--gelb); }
.brotkrumen a { display: inline-block; padding: 6px 0; color: var(--grau-1); text-decoration: underline 2px transparent; text-underline-offset: .35em; }
.brotkrumen a:hover { color: var(--weiss); text-decoration-color: var(--gelb); }
.brotkrumen [aria-current="page"] { color: var(--weiss); }
/* schmal und ab drei Einträgen ohne „Start“ (das Zeichen oben links führt dorthin): „Leistungen / Progressive Web Apps“ */
@media (max-width: 559px) {
  .brotkrumen li:first-child:nth-last-child(n+3) { display: none; }
}
.seitenkopf .werk-meta, .seitenkopf-inhalt > .kicker, .seitenkopf-text > .kicker { margin: clamp(22px, 3vw, 40px) 0 0; }
/* Zusatz im Kicker („· Für Museen …“) steht auch im Einstieg; schmal fällt er weg, damit der Kicker einzeilig bleibt */
@media (max-width: 699.98px) {
  .seitenkopf .kicker-ort { display: none; }
}
.seite-titel {
  margin-top: clamp(14px, 2vw, 24px);
  max-width: 18ch;
  font-family: var(--titel); font-weight: 870; font-stretch: var(--breit);
  font-size: clamp(2.125rem, .8rem + 5.6vw, 6.25rem);
  line-height: .94; letter-spacing: -.025em;
  text-wrap: balance; hyphens: manual; overflow-wrap: break-word;
}
.seite-einstieg {
  margin-top: clamp(20px, 2.6vw, 34px);
  max-width: 54ch;
  color: var(--grau-1);
  font-size: clamp(1.0625rem, .95rem + .45vw, 1.3125rem); line-height: 1.5;
  text-wrap: pretty;
}
.seite-einstieg a { font-weight: 600; text-decoration-thickness: 2px; text-decoration-color: var(--gelb); text-underline-offset: .22em; }
.seite-einstieg a:hover { color: var(--gelb); }
.seite-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; margin-top: clamp(24px, 3vw, 40px); }
.seitenkopf .schilder { max-width: 62rem; margin: clamp(32px, 4vw, 52px) 0 0; }
/* kleiner Kopf ohne Einstieg (Datenschutz, 404) */
.seitenkopf-klein .seitenlicht { height: clamp(72px, 11svh, 140px); }
.seitenkopf-klein .seitenkopf-inhalt { padding-bottom: clamp(24px, 4vw, 64px); }

@media (prefers-reduced-motion: no-preference) {
  .seitenkopf-inhalt > * { animation: seite-herein .9s cubic-bezier(.2, .7, .2, 1) both; }
  .seitenkopf-inhalt > :nth-child(2) { animation-delay: .06s; }
  .seitenkopf-inhalt > :nth-child(3) { animation-delay: .12s; }
  .seitenkopf-inhalt > :nth-child(4) { animation-delay: .18s; }
  .seitenkopf-inhalt > :nth-child(n+5) { animation-delay: .24s; }
}
@keyframes seite-herein { from { opacity: 0; translate: 0 .8rem; } }

/* ---------- Blöcke: Kopf (Kicker, H2, kurzer Text) links und angeheftet, Inhalt rechts ---------- */
.block { position: relative; padding-top: clamp(72px, 9vw, 150px); }
.block + .kontakt { margin-top: clamp(96px, 12vw, 190px); }
.block-innen {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
  display: grid; gap: clamp(32px, 4vw, 52px);
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--linie);
}
.block-kopf { display: grid; gap: 20px; align-content: start; }
.block-kopf > .kicker { margin-bottom: clamp(4px, 1.4vw, 18px); }
.block-kopf h2 { font-size: clamp(2rem, 1rem + 2.6vw, 3.625rem); line-height: .98; }
.block-inhalt { min-width: 0; }
/* Varianten: ohne Haarlinie oben; immer einspaltig (z. B. Datenschutz, Hinweis) */
.block-innen.block-ohne-linie { border-top: 0; padding-top: 0; }
.block-innen.block-einspaltig { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .block-innen { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(48px, 6vw, 120px); }
  .block-kopf { position: sticky; top: calc(var(--kopf-flach) + 32px); align-self: start; }
  /* breit: Kopf oben (H2 links, Text rechts), Inhalt über die ganze Breite */
  .block-breit .block-innen { grid-template-columns: minmax(0, 1fr); }
  /* H2 und Text beginnen oben auf einer Höhe (kein Loch über der H2, wenn der Text länger ist) */
  .block-breit .block-kopf { position: static; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; column-gap: clamp(40px, 6vw, 120px); }
  .block-breit .block-kopf > .kicker { grid-column: 1 / -1; }
  .block-breit .block-kopf .abschnitt-text { margin-top: .5em; }
  .block-breit .block-kopf > .werk-meta { grid-column: 2; }
}
/* Laptopbreiten: die H2 der Kopfspalte (.8fr) kleiner, sonst stehen einzelne Wörter in eigenen Zeilen */
@media (min-width: 1000px) and (max-width: 1599.98px) {
  .block-kopf h2, .fragen-kopf h2 { font-size: clamp(2rem, .9rem + 2vw, 3rem); }
}
/* Etiketten zum Block („Eigenentwicklung“) in eigener Zeile unter dem Text */
.block-kopf > .werk-meta { margin: 0; }
/* Abstand nach dem Seitenkopf: Knöpfe und erste Haarlinie nicht zu weit auseinander */
.seitenkopf + .block, .sprungleiste + .block { padding-top: clamp(56px, 6vw, 96px); }

/* ---------- Sprungleiste „Auf dieser Seite“ (nur sehr lange Seiten): einfache Liste von Ankern, ohne JavaScript ---------- */
.sprungleiste {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin: 0 auto;
  display: grid; gap: 14px;
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--linie);
}
.sprungleiste-titel { font-family: var(--mono); font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--grau-2); }
.sprungleiste ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); gap: 0 clamp(16px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none; }
.sprungleiste a {
  display: flex; align-items: baseline; gap: .7em;
  min-height: 44px; padding: 11px 0 10px;
  border-bottom: 1px solid var(--linie);
  font-weight: 650; line-height: 1.25; text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
.sprungleiste-nr { flex: none; font-family: var(--mono); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; color: var(--gelb); }
.sprungleiste a:hover { color: var(--gelb); border-color: var(--gelb); }
@media (min-width: 1000px) {
  .sprungleiste { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(48px, 6vw, 120px); align-items: start; }
  .sprungleiste-titel { padding-top: 13px; }
}
@media (prefers-reduced-motion: reduce) { .sprungleiste a { transition: none; } }

/* ---------- Fließtext ---------- */
.text { container-type: inline-size; max-width: 68ch; }
.text > * + * { margin-top: 1em; }
.text p, .text li { color: var(--grau-1); text-wrap: pretty; }
.text h2, .text h3 {
  margin-top: 2.2em;
  font-family: var(--titel); font-weight: 800; font-stretch: var(--breit);
  line-height: 1.15; letter-spacing: -.01em; text-wrap: balance;
  color: var(--weiss);
}
.text h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); }
.text h3 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); }
.text > h2:first-child, .text > h3:first-child { margin-top: 0; }
.text h2 + *, .text h3 + * { margin-top: .6em; }
.text strong { color: var(--weiss); font-weight: 650; }
.text ul:not([class]) { padding-left: 1.2em; }
.text ul:not([class]) li + li { margin-top: 6px; }
.text li::marker { color: var(--gelb); }
.text a:not([class]) { font-weight: 600; text-decoration-thickness: 2px; text-decoration-color: var(--gelb); text-underline-offset: .22em; }
.text a:not([class]):hover { color: var(--gelb); }
.text .merkmale { margin: 1.4em 0; }
/* Listen laufen bis zur Textkante, nicht 34rem kurz davor */
.text .merkmale, .block-inhalt > .merkmale { max-width: none; }
.text .werk-fakten { margin-top: 1.4em; max-width: none; }
/* Platz für „Barrierefreiheit“; schmal (≤ 430 px) gilt die Container-Regel aus stil.css: Etikett über dem Text */
@container (min-width: 431px) {
  .text .werk-fakten > div { grid-template-columns: 10.5rem minmax(0, 1fr); }
}
.stand { color: var(--grau-2); font-family: var(--mono); font-size: .875rem; }
.text > .stand { margin-top: 48px; }

/* ---------- Karten ---------- */
/* Raster ohne Restkacheln: schmal eine Spalte, ab 560 px zwei (eine übrige letzte Karte über die ganze Breite);
   in breiten Blöcken ab 1000 px drei je Reihe auf einem Sechserraster: zwei oder vier Karten je zur Hälfte,
   bei fünf die letzten beiden zur Hälfte (3 + 2), bei sieben die letzte über die ganze Breite. */
.karten { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) {
  .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .karten > :where(.karte:last-child:nth-child(odd)) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .block-breit .karten { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .block-breit .karten > .karte { grid-column: span 2; }
  .block-breit .karten > .karte:nth-child(3n+1):last-child:not(:first-child) { grid-column: 1 / -1; }
  .block-breit .karten > .karte:first-child:nth-last-child(2), .block-breit .karten > .karte:first-child:nth-last-child(2) ~ .karte,
  .block-breit .karten > .karte:first-child:nth-last-child(4), .block-breit .karten > .karte:first-child:nth-last-child(4) ~ .karte,
  .block-breit .karten > .karte:nth-child(3n+1):nth-last-child(2), .block-breit .karten > .karte:nth-child(3n+1):nth-last-child(2) + .karte { grid-column: span 3; }
}
.karte {
  --f: 14px;
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px 24px 26px;
  background: #111111;
  border: 1px solid var(--linie);
  clip-path: polygon(var(--f) 0, 100% 0, 100% 100%, 0 100%, 0 var(--f));
}
/* gelbe Kante genau auf der Fase: eine schmale Fläche zwischen den Linien x + y = f und x + y = f + 3 px
   (−1 px, weil die Karte einen Rand hat und der Pseudo-Kasten innerhalb des Rands beginnt) */
.karte::before {
  content: ""; position: absolute; left: -1px; top: -1px;
  width: calc(var(--f) + 3px); height: calc(var(--f) + 3px);
  background: var(--gelb);
  clip-path: polygon(0 var(--f), var(--f) 0, calc(var(--f) + 3px) 0, 0 calc(var(--f) + 3px));
}
.karte-nr { font-family: var(--mono); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; color: var(--gelb); }
.karte h3 {
  font-family: var(--titel); font-weight: 800; font-stretch: var(--breit);
  font-size: clamp(1.1875rem, 1rem + .6vw, 1.5rem); line-height: 1.15; letter-spacing: -.01em;
  text-wrap: balance; hyphens: manual;
}
/* nur Absätze ohne Klasse: .karte-nr und .karte-fuer behalten ihre Mono-Etiketten */
.karte p:not([class]) { color: var(--grau-1); font-size: 1rem; line-height: 1.55; text-wrap: pretty; }
.karte-fuer { font-family: var(--mono); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; color: var(--weiss); }
.karte .pfeillink { margin-top: auto; align-self: flex-start; }
@media (max-width: 559px) {
  .karte { padding: 20px 18px 22px; gap: 8px; }
}
.karten + .text, .text + .karten, .karten + .weiter, .vergleich + .text, .telefone + .text, .ablauf + .weiter, .text + .weiter,
.projektkarten + .text, .text + .projektkarten { margin-top: clamp(28px, 3.4vw, 44px); }
/* Text nach der Schrittliste (Projektseiten „Lösung“): mit Abstand und Haarlinie, damit er nicht wie Schritt 06 wirkt */
.ablauf + .text { margin-top: clamp(36px, 4.4vw, 56px); padding-top: 28px; border-top: 1px solid var(--linie); }

/* ---------- Ablauf: nummerierte Schritte an einer senkrechten Lichtlinie (js/seite.js zeichnet sie mit dem Scrollen) ---------- */
.ablauf { position: relative; }
.ablauf .faden { z-index: 0; }
.ablauf-liste { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; }
/* ohne js/seite.js: eine stille Linie */
.ablauf:not(.hat-faden)::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: rgb(255 212 0 / .45); }
.ablauf-schritt { position: relative; z-index: 1; padding: 0 0 clamp(36px, 5vw, 56px) 52px; }
.ablauf-schritt:last-child { padding-bottom: 0; }
.ablauf-knoten {
  position: absolute; left: 0; top: 2px;
  width: 14px; height: 14px;
  background: var(--schwarz); border: 2px solid var(--gelb); rotate: 45deg;
  transition: background-color .35s ease, box-shadow .35s ease;
}
.ablauf-schritt.ist-erreicht .ablauf-knoten { background: var(--gelb); box-shadow: 0 0 0 5px rgb(255 212 0 / .14), 0 0 24px 4px rgb(255 212 0 / .5); }
.ablauf-nr { font-family: var(--mono); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; line-height: 18px; color: var(--gelb); }
.ablauf-schritt h3 {
  margin-top: 8px;
  font-family: var(--titel); font-weight: 800; font-stretch: var(--breit);
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance;
}
.ablauf-schritt p:not(.ablauf-nr) { margin-top: 10px; max-width: 60ch; color: var(--grau-1); text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { .ablauf-knoten { transition: none; } }

/* ---------- Vergleich: drei Wege nebeneinander, gleiche Zeilen ---------- */
.vergleich { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
/* mittelbreit zwei Spalten, eine übrige letzte Karte über die ganze Breite (statt allein in einer halben Reihe) */
@media (min-width: 560px) and (max-width: 999.98px) {
  .vergleich { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vergleich > .karte:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .vergleich { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
}
.vergleich .karte { gap: 14px; }
.vergleich .karte.ist-unsere { border-color: var(--gelb); }
.vergleich dl { margin: 0; border-bottom: 1px solid var(--linie); }
.vergleich dl > div { padding: 12px 0 13px; border-top: 1px solid var(--linie); }
.vergleich dt { font-family: var(--mono); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gelb); line-height: 1.3; }
.vergleich dd { margin: 5px 0 0; color: var(--grau-1); font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
.vergleich .etikett { position: absolute; top: 22px; right: 22px; }

/* ---------- Handy-Bilder ---------- */
.telefone { display: grid; gap: clamp(36px, 4vw, 64px) clamp(24px, 3vw, 48px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin: 0; padding: 0; list-style: none; }
/* immer drei Handys: ab 600 px alle drei in einer Reihe (bei 768 sonst zwei und eins) */
@media (min-width: 600px) { .telefone { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* was nach den Handys kommt, liegt über deren Schatten (die Bilder bilden durch filter eine eigene Ebene) */
.telefone + * { position: relative; }
.telefon-bild { display: grid; gap: 22px; justify-items: center; align-content: start; margin: 0; }
.telefon-bild img { width: min(100%, 290px); height: auto; filter: drop-shadow(0 28px 36px rgb(0 0 0 / .75)); }
/* position: relative, damit der Schatten des Bilds (eigene Ebene durch filter) nicht über der Unterschrift liegt */
.telefon-bild figcaption { position: relative; max-width: 34ch; color: var(--grau-1); font-size: 1rem; line-height: 1.5; text-align: center; text-wrap: pretty; }
.telefon-bild figcaption strong { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gelb); }
@media (max-width: 599px) {
  .telefon-bild { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; justify-items: start; gap: 20px; }
  .telefon-bild figcaption { text-align: left; }
}

/* ---------- Hinweis (z. B. „Eigenentwicklung“) ---------- */
/* gebaut wie .karte: Fläche mit 45°-Fase und gelber Fasenkante, Haarlinie ringsum */
.hinweis {
  --f: 14px;
  position: relative;
  display: grid; gap: 8px;
  max-width: 68ch;
  padding: 20px 24px 22px;
  border: 1px solid var(--linie);
  background: #111111;
  clip-path: polygon(var(--f) 0, 100% 0, 100% 100%, 0 100%, 0 var(--f));
}
.hinweis::before {
  content: ""; position: absolute; left: -1px; top: -1px;
  width: calc(var(--f) + 3px); height: calc(var(--f) + 3px);
  background: var(--gelb);
  clip-path: polygon(0 var(--f), var(--f) 0, calc(var(--f) + 3px) 0, 0 calc(var(--f) + 3px));
}
.hinweis-titel { font-family: var(--mono); font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gelb); }
/* Block mit nur einem Hinweis: weniger Luft davor */
.block:has(> .block-innen.block-ohne-linie) { padding-top: clamp(32px, 4vw, 56px); }
.hinweis p:not(.hinweis-titel) { color: var(--grau-1); font-size: 1rem; }

/* ---------- Links am Ende eines Blocks ---------- */
.weiter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 32px; }

@media (forced-colors: active) {
  .seitenlicht { display: none; }
  .karte, .hinweis { border: 1px solid CanvasText; }
}

/* ==== Runde 2 · Agent A (Mediaguides, WebGIS, Mängelmelder, Studio): nur zwischen diesen Marken ergänzen ==== */
/* ==== Ende Agent A ==== */

/* ==== Runde 2 · Agent B (PWA, Barrierefreie Apps, Öffentliche Auftraggeber, Vorgehen): nur zwischen diesen Marken ergänzen ==== */
/* ==== Ende Agent B ==== */

/* ==== Runde 2 · Agent C (Fadenlauf, Wegwarte, Impressum, Datenschutz): nur zwischen diesen Marken ergänzen ==== */
/* ==== Ende Agent C ==== */

/* ---------- Mockup-Kopf (Projektseiten, /projekte/, Leistungsseiten, App entwickeln lassen), 23.10.2026 ----------
   .seitenkopf.mit-handys: statt des Startbilds drei gerahmte Handys (assets/img/*-360.webp/-720.webp), gestaffelt in
   der Tiefe: .seitenkopf-handy.ist-vorn groß in der Mitte, .ist-links und .ist-rechts kleiner und weiter hinten.
   Aufbau: .seitenkopf-inhalt > div.seitenkopf-text (Brotkrumen, Meta, H1, Einstieg, Aktionen), div.seitenkopf-handys
   (drei img), optional ul.schilder. Schmal stehen die Handys unter dem Einstieg, ab 1000 px rechts neben dem Text,
   unter der Lichtlinie. Beim Laden steigen die Handys einmal auf (nur ohne reduced motion). */
/* H1 kleiner als im Textkopf: Sie steht neben den Handys in der schmaleren Textspalte */
.mit-handys .seite-titel { font-size: clamp(2.125rem, .8rem + 4.2vw, 5rem); max-width: none; }
.seitenkopf-handys {
  position: relative;
  width: min(100%, 32rem);
  aspect-ratio: 100 / 97;
  margin: clamp(44px, 8vw, 64px) auto 0;
}
.mit-handys .seitenkopf-handys + .schilder { margin-top: clamp(40px, 6vw, 56px); }
/* Höhe ergibt sich aus der Breite (width/height am img); alle stehen unten auf derselben Linie */
.seitenkopf-handy {
  position: absolute; bottom: 0;
  height: auto;
  filter: drop-shadow(0 26px 32px rgb(0 0 0 / .8));
}
.seitenkopf-handy.ist-vorn { left: 28%; width: 44%; z-index: 3; }
.seitenkopf-handy.ist-links { left: 0; bottom: 12%; width: 37%; z-index: 2; }
.seitenkopf-handy.ist-rechts { right: 0; bottom: 5%; width: 37%; z-index: 1; }
/* die hinteren etwas dunkler, damit die Tiefe lesbar ist (nicht durchsichtig) */
.seitenkopf-handy.ist-links, .seitenkopf-handy.ist-rechts { filter: brightness(.78) drop-shadow(0 20px 26px rgb(0 0 0 / .75)); }

@media (min-width: 1000px) {
  .mit-handys .seitenkopf-inhalt {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "text handys" "schilder handys";
    column-gap: clamp(40px, 5vw, 104px);
  }
  .mit-handys .seitenkopf-text { grid-area: text; }
  .mit-handys .seitenkopf-inhalt > .schilder { grid-area: schilder; align-self: start; }
  .mit-handys .seitenkopf-handys + .schilder { margin-top: clamp(32px, 4vw, 52px); }
  /* etwas nach oben, damit die Oberkante der Handys mit den Brotkrumen abschließt */
  .seitenkopf-handys {
    grid-area: handys; align-self: center; justify-self: end;
    width: min(100%, 36rem);
    margin: calc(clamp(84px, 15svh, 190px) * -.45) 0 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .mit-handys .seitenkopf-inhalt > .seitenkopf-text, .mit-handys .seitenkopf-inhalt > .seitenkopf-handys { animation: none; }
  .mit-handys .seitenkopf-text > * { animation: seite-herein .9s cubic-bezier(.2, .7, .2, 1) both; }
  .mit-handys .seitenkopf-text > :nth-child(2) { animation-delay: .06s; }
  .mit-handys .seitenkopf-text > :nth-child(3) { animation-delay: .12s; }
  .mit-handys .seitenkopf-text > :nth-child(4) { animation-delay: .18s; }
  .mit-handys .seitenkopf-text > :nth-child(n+5) { animation-delay: .24s; }
  .mit-handys .seitenkopf-inhalt > .schilder { animation-delay: .3s; }
  .seitenkopf-handy { animation: handy-herein 1.1s cubic-bezier(.2, .7, .2, 1) backwards; }
  .seitenkopf-handy.ist-vorn { animation-delay: .15s; }
  .seitenkopf-handy.ist-links { animation-delay: .3s; }
  .seitenkopf-handy.ist-rechts { animation-delay: .42s; }
}
@keyframes handy-herein { from { opacity: 0; translate: 0 2.5rem; } }