/* unterseiten.css: Aufmacher-Szenen und Bausteine, die nur Unterseiten brauchen (01.10.2026).
   Getrennt von tj.css, damit die Startseite weniger CSS vor dem ersten Bild laden muss. Lädt nach tj.css. */
/* ======================================================================
   S4 Unterseiten: jede Seite bekommt ihr eigenes Element im Aufmacher (recherche/14 Abschnitt 5)
   Gemeinsam: links Wort, rechts Szene (am Handy darunter). Szenen sind Beispiele und so beschriftet.
   Ohne Bewegung (prefers-reduced-motion) steht jede Szene im Endzustand.
   ====================================================================== */
.seitenkopf__raster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.seitenkopf__raster h1 { max-width: 18ch; }
.seitenkopf__raster .seitenkopf__text { max-width: 34rem; }
.kszene { position: relative; }
.kszene__unterschrift { margin-top: .9rem; font-size: .8125rem; color: var(--leise); text-align: center; }
.kszene__karte { background: #fff; border-radius: 20px; box-shadow: 0 0 0 1px rgba(19,22,26,.06), 0 30px 60px -32px rgba(19,22,26,.38); padding: 1.1rem 1.2rem; }
.kszene__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .8125rem; color: var(--leise); margin-bottom: .8rem; }
.kszene__kopf b { color: var(--tinte); font-weight: 650; font-size: .9375rem; }
@media (max-width: 900px) {
  .seitenkopf__raster { grid-template-columns: 1fr; gap: 1.75rem; }
  .kszene-rahmen, .seitenkopf__raster > .kszene { max-width: 27rem; width: 100%; justify-self: center; }
}

/* Seitenleiste: nur noch ein Kasten, Theodor mit Foto und Nummer */
.seitenleiste .kasten--person { display: grid; gap: .2rem; }
.kasten--person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: .5rem; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--linie); }
.kasten--person .textlink { font-size: 1.05rem; }

/* ---------- Ladezeit: dunkles Feld in Nachtblau, zwei Handys laden um die Wette ---------- */
.seitenkopf--nacht .seitenkopf__raster { background: var(--nachtblau); color: #e9eef6; border-radius: 28px; padding: clamp(1.4rem, 4vw, 3rem); position: relative; isolation: isolate; overflow: hidden; }
.seitenkopf--nacht .seitenkopf__raster::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 85% 10%, rgba(224,176,74,.16), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgba(80,130,200,.18), transparent 70%); }
.seitenkopf--nacht h1 { color: #fff; }
.seitenkopf--nacht .seitenkopf__text { color: #b9c5d6; }
.seitenkopf--nacht .etikett { color: var(--messing); }
.seitenkopf--nacht .brot, .seitenkopf--nacht .brot a { color: #9fb0c6; }
.seitenkopf--nacht .kszene__unterschrift { color: #9fb0c6; }
.rennen { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.8rem, 2.5vw, 1.5rem); }
.rennen__handy { text-align: center; }
.rennen__schirm { position: relative; aspect-ratio: 9 / 17.5; border-radius: 26px; background: #fff; box-shadow: 0 0 0 6px #0b1424, 0 0 0 7px rgba(255,255,255,.12), 0 24px 50px -20px rgba(0,0,0,.6); overflow: hidden; }
.rennen__balken { position: absolute; left: 10%; right: 10%; top: 46%; height: 5px; border-radius: 3px; background: #e7eaef; overflow: hidden; }
.rennen__balken i { position: absolute; inset: 0; background: var(--leise); transform-origin: left; }
.rennen__handy--flink .rennen__balken i { background: var(--tanne); }
.rennen__seite { position: absolute; inset: 0; display: grid; align-content: start; gap: 7%; padding: 18% 10% 10%; }
.rennen__seite b { display: block; height: 22%; min-height: 3rem; border-radius: 10px; background: linear-gradient(135deg, var(--tanne), var(--tanne-tief)); }
.rennen__seite s { display: block; height: .5rem; border-radius: 4px; background: #e3e6ea; }
.rennen__seite s:nth-of-type(2) { width: 75%; }
.rennen__seite s:nth-of-type(3) { width: 85%; }
.rennen__seite u { justify-self: start; text-decoration: none; font: 650 .75rem/1 var(--text); color: #fff; background: var(--tanne); border-radius: 999px; padding: .55rem .9rem; margin-top: 6%; }
.rennen__name { margin-top: .9rem; font-size: .8125rem; color: #b9c5d6; }
.rennen__name b { display: block; font: 650 clamp(1.4rem, 1rem + 1.4vw, 2rem)/1.1 var(--titel); color: #fff; font-variant-numeric: tabular-nums; margin-top: .2rem; }
.rennen__handy--flink .rennen__name b { color: var(--messing); }
.rennen__nochmal { display: block; margin: 1rem auto 0; font: 600 .875rem/1 var(--text); color: #e9eef6; background: rgba(255,255,255,.08); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); border-radius: 999px; padding: .65rem 1rem; cursor: pointer; }
.rennen__nochmal:hover { background: rgba(255,255,255,.14); }
@media (prefers-reduced-motion: no-preference) {
  .rennen__handy--lahm .rennen__balken i { animation: lahm 4.8s linear both; }
  .rennen__handy--lahm .rennen__balken { animation: weg .2s ease 4.8s both; }
  .rennen__handy--lahm .rennen__seite { animation: da .35s ease 4.8s both; }
  .rennen__handy--flink .rennen__balken i { animation: flink 1.7s cubic-bezier(.3,.6,.4,1) both; }
  .rennen__handy--flink .rennen__balken { animation: weg .2s ease 1.7s both; }
  .rennen__handy--flink .rennen__seite { animation: da .35s ease 1.7s both; }
}
.rennen.wartet *, .rennen.wartet { animation-play-state: paused !important; }
@media (max-width: 600px) { .rennen__schirm { aspect-ratio: 9 / 13.5; border-radius: 22px; } }
@keyframes lahm { 0% { transform: scaleX(0); } 18% { transform: scaleX(.3); } 40% { transform: scaleX(.36); } 55% { transform: scaleX(.6); } 82% { transform: scaleX(.66); } 100% { transform: scaleX(1); } }
@keyframes flink { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes weg { to { opacity: 0; } }
@keyframes da { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Relaunch: Prüfliste vor dem Umzug, Zeile für Zeile grün ---------- */
.pruefliste ol { list-style: none; display: grid; gap: .1rem; margin: 0; padding: 0; }
.pruefliste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid #efece5; font-size: .8125rem; }
.pruefliste code { font: 500 .78rem/1.35 ui-monospace, "SF Mono", Menlo, monospace; color: var(--tinte); overflow-wrap: anywhere; }
.pruefliste code em { font-style: normal; color: var(--leise); }
.pruefliste .ok { width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--tanne); display: grid; place-items: center; }
.pruefliste .ok::before { content: ""; width: .55rem; height: .3rem; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.pruefliste__fuss { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .9rem; font-weight: 650; font-size: .9375rem; }
.siegel { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--messing); color: var(--tinte); font: 700 .625rem/1.05 var(--text); text-align: center; letter-spacing: .02em; box-shadow: inset 0 0 0 3px rgba(255,255,255,.45), 0 6px 16px -6px rgba(138,92,18,.55); }
.pruefliste__stand { color: var(--tanne); font-weight: 650; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .pruefliste .ok { animation: haken-pruef .4s var(--kurve) both; animation-delay: calc(.5s + var(--i) * .32s); }
  .pruefliste .siegel { animation: stempel .5s cubic-bezier(.3,1.6,.5,1) 2.6s both; }
}
@keyframes haken-pruef { from { opacity: 0; transform: scale(.4); background: #d6d2c8; } 60% { background: #d6d2c8; } to { opacity: 1; transform: none; } }
@keyframes stempel { from { opacity: 0; transform: scale(1.6) rotate(-14deg); } to { opacity: 1; transform: rotate(-8deg); } }
.siegel { transform: rotate(-8deg); }

/* Schutzweg: die sechs Schritte als senkrechter Zeitstrahl mit Zeitpunkt in Messing */
.schutzweg { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; position: relative; }
.schutzweg::before { content: ""; position: absolute; left: .45rem; top: .6rem; bottom: .6rem; width: 2px; background: linear-gradient(var(--messing), var(--tanne)); border-radius: 1px; }
.schutzweg li { position: relative; padding: 0 0 1.4rem 2.2rem; }
.schutzweg li::before { content: ""; position: absolute; left: 0; top: .35rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--grund); box-shadow: inset 0 0 0 3px var(--messing); }
.schutzweg h3 { margin: 0; font-size: 1.05rem; }
.schutzweg .wann { display: block; font: 650 .75rem/1.2 var(--text); color: var(--messing-schrift); letter-spacing: .03em; margin-bottom: .2rem; }
.schutzweg p { margin-top: .3rem; }

/* ---------- Preis: Bausteine fallen in einen Seitenrahmen ---------- */
.bausteine__rahmen { display: grid; gap: .5rem; padding: .3rem 0 0; }
.baustein { display: grid; grid-template-columns: minmax(0, 1fr) 4.2rem; align-items: center; gap: .8rem; padding: .7rem .85rem; border-radius: 12px; background: var(--f, var(--tanne-hell)); color: var(--tinte); font-size: .8125rem; }
.baustein b { font-weight: 650; display: block; font-size: .875rem; }
.baustein span { color: rgba(19,22,26,.7); }
.baustein i { height: .5rem; border-radius: 3px; background: rgba(19,22,26,.12); position: relative; overflow: hidden; }
.baustein i::after { content: ""; position: absolute; inset: 0; width: var(--w); background: rgba(19,22,26,.55); border-radius: 3px; }
.baustein--1 { --f: var(--tanne-hell); --w: 100%; }
.baustein--2 { --f: var(--creme); --w: 75%; }
.baustein--3 { --f: #e9edf3; --w: 50%; }
.baustein--4 { --f: #efece5; --w: 50%; }
.baustein--5 { --f: #e6efe9; --w: 50%; }
.bausteine__fuss { display: flex; justify-content: space-between; align-items: center; margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed var(--linie); font-weight: 650; font-size: .9375rem; }
.bausteine__fuss span { font-weight: 400; color: var(--leise); font-size: .8125rem; }
@media (prefers-reduced-motion: no-preference) {
  .baustein { animation: fallen .6s cubic-bezier(.3,1.35,.5,1) both; animation-delay: calc(.3s + var(--i) * .16s); }
  .bausteine__fuss { animation: da .4s ease 1.4s both; }
}
@keyframes fallen { from { opacity: 0; transform: translateY(-38px) rotate(var(--r, -2deg)); } to { opacity: 1; transform: none; } }
/* Was immer dabei ist: als Kassenzettel */
.quittung { background: #fffdf6; max-width: 30rem; margin: 1rem 0 1.6rem; padding: 1.3rem 1.3rem 1.6rem; font-size: .9375rem; position: relative; box-shadow: 0 18px 40px -26px rgba(19,22,26,.4);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; }
.quittung h3 { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--messing-schrift); text-align: center; margin-bottom: .8rem; }
.quittung ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.quittung li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; border-bottom: 1px dotted #d9d2c0; padding-bottom: .5rem; }
.quittung li::after { content: "inklusive"; color: var(--tanne); font-weight: 600; font-size: .8125rem; align-self: end; }
.quittung__summe { display: flex; justify-content: space-between; gap: 1rem; margin-top: .9rem; font-weight: 650; }
.quittung__summe span:last-child { text-align: right; font-weight: 400; color: var(--leise); font-size: .875rem; }

/* ---------- SEO: Ergebnisliste, „Ihr Betrieb“ rückt nach oben ---------- */
.treffer { --zeile: 3.55rem; }
.treffer__suche { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: 999px; background: #f2f0eb; font-size: .875rem; margin-bottom: .9rem; }
.treffer__suche svg { width: 1rem; height: 1rem; flex: none; }
.treffer ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.treffer li { height: calc(var(--zeile) - .35rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: 0 .85rem; border-radius: 12px; font-size: .8125rem; background: #fbfaf8; box-shadow: 0 0 0 1px #efece5; }
.treffer li b { display: block; font-weight: 650; font-size: .875rem; color: #1a4fb3; }
.treffer li span { color: var(--leise); }
.treffer li.ihr { background: var(--creme); box-shadow: 0 0 0 1.5px var(--messing), 0 10px 24px -14px rgba(138,92,18,.6); position: relative; z-index: 1; }
.treffer li.ihr b { color: var(--tinte); }
.treffer .stern { font-weight: 650; color: var(--messing-schrift); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .treffer li { animation: runter .9s var(--kurve) 1s both; }
  .treffer li.ihr { animation: hoch .9s var(--kurve) 1s both; }
}
@keyframes runter { from { transform: translateY(calc(-1 * var(--zeile))); } to { transform: none; } }
@keyframes hoch { from { transform: translateY(calc(3 * var(--zeile))); } to { transform: none; } }

/* ---------- Betreuung: ein Nachrichtenverlauf baut sich auf ---------- */
.verlauf { display: grid; gap: .55rem; }
.verlauf__kopf { display: flex; align-items: center; gap: .6rem; padding-bottom: .8rem; margin-bottom: .2rem; border-bottom: 1px solid #efece5; font-size: .8125rem; color: var(--leise); }
.verlauf__kopf img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.verlauf__kopf b { display: block; color: var(--tinte); font-size: .9375rem; }
.blase { max-width: 82%; padding: .6rem .85rem; border-radius: 18px; font-size: .875rem; line-height: 1.4; position: relative; }
.blase small { display: block; font-size: .6875rem; opacity: .7; margin-top: .2rem; text-align: right; }
.blase--kunde { background: #efece5; justify-self: start; border-bottom-left-radius: 6px; }
.blase--wir { background: var(--tanne); color: #fff; justify-self: end; border-bottom-right-radius: 6px; }
.blase--bild { padding: .45rem; }
.blase__bild { background: #fff; color: var(--tinte); border-radius: 12px; padding: .65rem .75rem; font-size: .8125rem; }
.blase__bild b { display: block; font-size: .75rem; color: var(--tanne); margin-bottom: .2rem; }
.tippen { justify-self: end; display: flex; gap: .25rem; padding: .7rem .85rem; border-radius: 18px; background: #e3eee8; }
.tippen i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--tanne); opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .verlauf > .blase, .verlauf > .tippen { animation: da .45s var(--kurve) both; animation-delay: calc(.4s + var(--i) * .9s); }
  .verlauf__platz > .blase { animation: da .45s var(--kurve) both; animation-delay: calc(.4s + var(--i) * .9s); }
  .verlauf__platz > .tippen { animation: da .3s ease calc(.4s + var(--i) * .9s) both, weg .2s ease calc(.4s + (var(--i) + 1) * .9s) forwards; }
  .tippen i { animation: punkt 1s ease-in-out infinite; }
  .tippen i:nth-child(2) { animation-delay: .15s; } .tippen i:nth-child(3) { animation-delay: .3s; }
}
@media (prefers-reduced-motion: reduce) { .tippen { display: none; } }
@keyframes punkt { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.verlauf__platz { display: grid; justify-items: end; }
.verlauf__platz > * { grid-area: 1 / 1; }
.verlauf__platz > .tippen { align-self: start; }

/* ---------- Vorschau: Formular im Aufmacher, Drei-Tage-Leiste ---------- */
.seitenkopf--formular .formular { box-shadow: 0 0 0 1px rgba(19,22,26,.06), 0 30px 60px -32px rgba(19,22,26,.38); }
.seitenkopf--formular .haken { margin-top: 1.2rem; }
.zusage-theo { display: flex; gap: .8rem; align-items: center; margin-top: 1.4rem; font-size: .9375rem; }
.zusage-theo img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.zusage-theo em { font-style: normal; display: block; color: var(--leise); font-size: .8125rem; }
.drei-tage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: clamp(1.6rem, 4vw, 2.6rem); position: relative; list-style: none; padding: 0; }
.drei-tage::before { content: ""; position: absolute; left: 0; right: 0; top: .5rem; height: 2px; background: linear-gradient(90deg, var(--tanne), var(--messing)); }
.drei-tage li { position: relative; padding: 1.5rem 1rem 0 0; font-size: .875rem; }
.drei-tage li::before { content: ""; position: absolute; left: 0; top: 0; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--grund); box-shadow: inset 0 0 0 3px var(--tanne); }
.drei-tage li:last-child::before { box-shadow: inset 0 0 0 3px var(--messing); background: var(--messing); }
.drei-tage b { display: block; font: 650 .75rem/1.2 var(--text); color: var(--messing-schrift); letter-spacing: .03em; margin-bottom: .25rem; }
@media (max-width: 600px) {
  .drei-tage { grid-template-columns: 1fr; gap: 1rem; }
  .drei-tage::before { left: .5rem; right: auto; top: .5rem; bottom: .5rem; width: 2px; height: auto; background: linear-gradient(var(--tanne), var(--messing)); }
  .drei-tage li { padding: 0 0 0 2rem; }
}

/* ---------- Leistungen: Röntgenblick, jede Leistung zeigt auf ihre Stelle im Handy ---------- */
.roentgen { position: relative; height: 22rem; padding: 0; overflow: hidden; }
.roentgen__handy { position: absolute; left: 1.4rem; top: 1.4rem; bottom: -2rem; width: 9.5rem; border-radius: 24px; background: #fbfaf8; box-shadow: 0 0 0 5px var(--tinte), 0 20px 40px -20px rgba(19,22,26,.5); }
.roentgen__handy > span { position: absolute; left: 10%; right: 10%; display: block; border-radius: 8px; }
.r-titel { top: 9%; height: 7%; background: #e3e6ea; }
.r-bild { top: 19%; height: 20%; background: linear-gradient(135deg, var(--tanne), var(--tanne-tief)); }
.r-text { top: 43%; height: 18%; background: repeating-linear-gradient(#e3e6ea 0 .45rem, transparent .45rem .95rem); }
.r-knopf { top: 64%; height: 9%; right: 35% !important; background: var(--tanne); border-radius: 999px !important; color: #fff; font: 650 .6875rem/1 var(--text); display: grid !important; place-items: center; }
.r-tempo { top: 82%; height: 6%; background: var(--creme); }
.roentgen__marken { list-style: none; margin: 0; padding: 0; }
.roentgen__marken li { position: absolute; left: 13.6rem; right: 1rem; top: var(--y); transform: translateY(-50%); font-size: .8125rem; color: var(--leise); line-height: 1.35; }
.roentgen__marken li b { display: block; color: var(--tinte); font-size: .9375rem; font-weight: 650; }
.roentgen__marken li::before { content: ""; position: absolute; right: calc(100% + .5rem); top: 50%; width: 3.6rem; height: 0; border-top: 1.5px dashed var(--messing); transform-origin: right; }
.roentgen__marken li::after { content: ""; position: absolute; right: calc(100% + 4.05rem); top: calc(50% - .3rem); width: .6rem; height: .6rem; border-radius: 50%; background: var(--messing); }
@media (prefers-reduced-motion: no-preference) {
  .roentgen__marken li { animation: da .5s var(--kurve) both; animation-delay: calc(.5s + var(--i) * .25s); }
  .roentgen__marken li::before { animation: linie .5s var(--kurve) both; animation-delay: calc(.35s + var(--i) * .25s); }
}
@keyframes linie { from { transform: scaleX(0); } to { transform: none; } }
@media (max-width: 420px) { .roentgen__handy { width: 7.6rem; left: 1rem; } .roentgen__marken li { left: 11.2rem; } .roentgen__marken li::before { width: 2.6rem; } .roentgen__marken li::after { right: calc(100% + 3.05rem); } }

/* ---------- Projekte: drei echte Handy-Aufnahmen, wie auf dem Tisch ausgelegt ---------- */
.auslage { position: relative; height: clamp(20rem, 34vw, 27rem); }
.auslage figure { position: absolute; top: 50%; left: 50%; width: clamp(8.5rem, 13vw, 11rem); margin: 0; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 0 0 5px var(--tinte), 0 26px 50px -24px rgba(19,22,26,.55); transform: translate(-50%, -50%) translateX(var(--x)) rotate(var(--r)); transition: transform .45s var(--kurve); }
.auslage figure img { display: block; width: 100%; height: auto; aspect-ratio: 400 / 866; object-fit: cover; object-position: top; }
.auslage figure:nth-child(1) { --x: -78%; --r: -7deg; z-index: 1; }
.auslage figure:nth-child(2) { --x: 0%; --r: 0deg; z-index: 2; }
.auslage figure:nth-child(3) { --x: 78%; --r: 7deg; z-index: 1; }
@media (hover: hover) { .auslage figure:hover { transform: translate(-50%, -54%) translateX(var(--x)) rotate(calc(var(--r) * .5)); z-index: 3; } }
@media (prefers-reduced-motion: no-preference) { .auslage figure { animation: auffaechern .9s var(--kurve) .2s both; } }
@keyframes auffaechern { from { transform: translate(-50%, -46%) translateX(0) rotate(0); opacity: 0; } to { opacity: 1; } }

/* ---------- Über uns: wir zwei, mit Rolle ---------- */
.wir-zwei { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.wir-zwei figure { margin: 0; background: #fff; border-radius: 20px; padding: .6rem .6rem .9rem; box-shadow: 0 0 0 1px rgba(19,22,26,.06), 0 26px 50px -30px rgba(19,22,26,.45); transform: rotate(var(--r)); }
.wir-zwei figure:nth-child(1) { --r: -2.5deg; margin-top: 1.6rem; }
.wir-zwei figure:nth-child(2) { --r: 2deg; }
.wir-zwei img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
.wir-zwei figcaption { padding: .7rem .3rem 0; font-size: .8125rem; color: var(--leise); }
.wir-zwei figcaption b { display: block; font-size: 1rem; color: var(--tinte); }
@media (prefers-reduced-motion: no-preference) { .wir-zwei figure { animation: fallen .7s cubic-bezier(.3,1.3,.5,1) both; animation-delay: calc(.2s + var(--i) * .18s); } }

/* ---------- FAQ: Theodors Anruf ---------- */
.anruf-handy { width: min(16rem, 100%); margin: 0 auto; aspect-ratio: 9 / 15; border-radius: 34px; background: linear-gradient(170deg, #22403a, #0f1916); box-shadow: 0 0 0 6px var(--tinte), 0 30px 60px -30px rgba(19,22,26,.6); color: #fff; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; padding: 2.2rem 1.4rem 1.8rem; text-align: center; position: relative; overflow: hidden; }
.anruf-handy small { font-size: .75rem; color: #a9c2ba; }
.anruf-handy__bild { position: relative; width: 5.2rem; height: 5.2rem; align-self: center; }
.anruf-handy__bild img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; position: relative; z-index: 1; }
.anruf-handy__bild::before, .anruf-handy__bild::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px rgba(127,196,176,.5); }
.anruf-handy b { display: block; font: 600 1.25rem/1.2 var(--kopf); margin-top: .3rem; }
.anruf-handy__knoepfe { display: flex; gap: 3rem; }
.anruf-handy__knoepfe i { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: #d9483b; }
.anruf-handy__knoepfe i:last-child { background: #34c759; }
.anruf-handy__knoepfe svg { width: 1.3rem; height: 1.3rem; fill: #fff; }
.anruf-handy__knoepfe i:first-child svg { transform: rotate(135deg); }
@media (prefers-reduced-motion: no-preference) {
  .anruf-handy__bild::before { animation: ring 2.4s ease-out infinite; }
  .anruf-handy__bild::after { animation: ring 2.4s ease-out 1.2s infinite; }
  .anruf-handy__knoepfe i:last-child { animation: wippen 1.6s ease-in-out infinite; }
}
@keyframes ring { from { transform: scale(1); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
@keyframes wippen { 0%, 100% { transform: none; } 50% { transform: translateY(-4px); } }
.faq-sprung { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin-top: 1.8rem; }
.faq-sprung a { display: block; padding: .9rem 1rem; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(19,22,26,.06); text-decoration: none; color: var(--tinte); font-weight: 600; font-size: .9375rem; transition: box-shadow .2s, transform .2s var(--kurve); }
.faq-sprung a span { display: block; font-weight: 400; font-size: .8125rem; color: var(--leise); margin-top: .15rem; }
.faq-sprung a:hover { transform: translateY(-2px); box-shadow: 0 0 0 1.5px var(--tanne); }
@media (max-width: 900px) { .faq-sprung { grid-template-columns: 1fr 1fr; } }

/* ---------- Standort: gezeichnete Karte ---------- */
.karte-svg { display: block; width: 100%; height: auto; }
.karte-svg .weg { fill: none; stroke: var(--linie); stroke-width: 1.5; }
.karte-svg .grenze { fill: none; stroke: #b9b3a6; stroke-width: 1.2; stroke-dasharray: 4 5; }
.karte-svg .ring { fill: rgba(29,107,88,.07); stroke: var(--tanne); stroke-width: 1.2; stroke-dasharray: 1; }
.karte-svg .ort { fill: var(--tinte); }
.karte-svg .heim { fill: var(--messing); stroke: #fff; stroke-width: 3; }
.karte-svg text { font: 500 12px var(--text); fill: var(--leise); }
.karte-svg text.gross { font: 650 14px var(--text); fill: var(--tinte); }
.karte-svg text.flaeche { font: 600 10px var(--text); letter-spacing: .14em; fill: #a49d8e; }
@media (prefers-reduced-motion: no-preference) {
  .karte-svg .ring { stroke-dashoffset: 1; animation: strich 1.4s var(--kurve) .4s forwards; }
  .karte-svg .heim { animation: stempel .6s cubic-bezier(.3,1.6,.5,1) .2s both; transform-box: fill-box; transform-origin: center; }
}
.zwei-spalten .faq-sprung { grid-template-columns: 1fr 1fr; margin-top: 0; }
.person:not(:has(img)) { box-shadow: inset 0 3px 0 var(--messing), 0 0 0 1px rgba(19,22,26,.06); align-self: start; }
.anruf-handy, .anruf-handy * { text-decoration: none; } .anruf-handy:focus-visible { outline: 3px solid var(--messing); outline-offset: 6px; }

/* ======================================================================
   S5 (01.10.2026 spät): Abwechslung bei den Aufmachern (Jerry: „nicht überall gleich“)
   mitte = zentriert, Szene darunter · spiegel = Bild links · breit = große Überschrift links, Text rechts, Reihe darunter
   ====================================================================== */
.seitenkopf--mitte .huelle { text-align: center; }
.seitenkopf--mitte .brot { justify-content: center; }
.seitenkopf--mitte h1 { max-width: 20ch; margin-inline: auto; }
.seitenkopf--mitte .seitenkopf__text { max-width: 40rem; margin-inline: auto; }
.seitenkopf--mitte .aufmacher__knoepfe { justify-content: center; }
.seitenkopf--mitte .kszene-rahmen, .seitenkopf--mitte .wir-zwei { max-width: 34rem; margin: clamp(1.8rem, 4vw, 2.8rem) auto 0; text-align: left; }
.seitenkopf--mitte .wir-zwei { max-width: 38rem; }
@media (min-width: 901px) { .seitenkopf--spiegel .seitenkopf__raster { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } .seitenkopf--spiegel .seitenkopf__raster > :first-child { order: 2; } }

/* Leistungen: fünf Kacheln steigen nacheinander auf */
.lkacheln { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; margin-top: clamp(1.8rem, 4vw, 2.8rem); text-align: left; }
.lkachel { display: grid; gap: .3rem; align-content: start; padding: 1.1rem 1rem 1.2rem; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(19,22,26,.06), 0 18px 36px -28px rgba(19,22,26,.4); text-decoration: none; color: var(--tinte); transition: transform .3s var(--kurve), box-shadow .3s; }
.lkachel svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: var(--tanne); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: .5rem; }
.lkachel b { font: 600 1rem/1.25 var(--kopf); }
.lkachel span { font-size: .8125rem; color: var(--leise); }
.lkachel:hover { transform: translateY(-4px); box-shadow: 0 0 0 1.5px var(--tanne), 0 22px 40px -26px rgba(19,22,26,.45); }
@media (prefers-reduced-motion: no-preference) { .lkachel { animation: aufsteigen .7s var(--kurve) both; animation-delay: calc(.25s + var(--i) * .1s); } }
@keyframes aufsteigen { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 1000px) { .lkacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lkachel:last-child { grid-column: 1 / -1; } }

/* Projekte: Überschrift groß links, Text rechts unten, Handys als Reihe */
.seitenkopf__teilung { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
.seitenkopf--breit h1 { max-width: 16ch; font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.6rem); }
.seitenkopf--breit .seitenkopf__text { margin-top: 0; }
.reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); margin-top: clamp(2rem, 4vw, 3rem); max-width: 50rem; margin-inline: auto; }
.reihe figure { margin: 0; border-radius: 26px; overflow: hidden; box-shadow: 0 0 0 5px var(--tinte), 0 30px 60px -32px rgba(19,22,26,.55); background: #fff; }
.reihe figure:nth-child(2) { transform: translateY(-1.5rem); }
.reihe img { display: block; width: 100%; height: auto; aspect-ratio: 400 / 600; object-fit: cover; object-position: top; }
@media (prefers-reduced-motion: no-preference) { .reihe figure { animation: aufsteigen .8s var(--kurve) both; animation-delay: calc(.2s + var(--i) * .14s); } .reihe figure:nth-child(2) { animation-name: aufsteigen-mitte; } }
@keyframes aufsteigen-mitte { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(-1.5rem); } }
@media (max-width: 900px) {
  .seitenkopf__teilung { grid-template-columns: 1fr; gap: .9rem; }
  .reihe { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; padding: 1rem 16px 1.6rem; margin-inline: -16px; scrollbar-width: none; }
  .reihe::-webkit-scrollbar { display: none; }
  .reihe figure { flex: 0 0 54%; scroll-snap-align: center; }
  .reihe figure:nth-child(2) { transform: none; animation-name: aufsteigen; }
}

/* FAQ: Suchfeld filtert live */
.faq-suche { display: flex; align-items: center; gap: .6rem; max-width: 32rem; margin: 1.6rem auto 0; padding: .3rem .4rem .3rem 1rem; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(19,22,26,.08), 0 16px 34px -26px rgba(19,22,26,.45); }
.faq-suche[hidden] { display: none; }
.faq-suche svg { width: 1.1rem; height: 1.1rem; flex: none; fill: none; stroke: var(--leise); stroke-width: 2.2; stroke-linecap: round; }
.faq-suche input { flex: 1; min-width: 0; border: 0; background: none; font: 400 1rem/1.4 var(--text); padding: .7rem .2rem; color: var(--tinte); outline: none; }
.faq-suche:focus-within { box-shadow: 0 0 0 2px var(--tanne), 0 16px 34px -26px rgba(19,22,26,.45); }
.faq-suche__leer { margin-top: .8rem; font-size: .875rem; color: var(--leise); min-height: 1.3em; }
.frage[hidden], .faq-gruppe[hidden] { display: none; }

/* Funktionale iOS-Farben nur in Handy-Szenen (recherche/15): Blau für Links, Rot für „zu langsam“ */
.rennen__handy--lahm .rennen__balken i { background: var(--ios-rot); }
.rennen__handy--lahm .rennen__name b { color: #ff8a8f; }
.treffer li b { color: var(--ios-blau); }

.treffer.wartet li { opacity: 0; animation: none; }
.treffer.getippt li { animation: einreihen .5s var(--kurve) both; animation-delay: calc(var(--n, 0) * 90ms); }
.treffer.getippt li:nth-child(2) { --n: 1; } .treffer.getippt li:nth-child(3) { --n: 2; } .treffer.getippt li:nth-child(4) { --n: 3; }
.treffer.getippt li:not(.ihr) { animation: einreihen .5s var(--kurve) both, runter .9s var(--kurve) .9s both; animation-delay: calc(var(--n) * 90ms), .9s; }
.treffer.getippt li.ihr { animation: hoch-ein .5s var(--kurve) .3s both, hoch .9s var(--kurve) .9s both; }
@keyframes einreihen { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }
@keyframes hoch-ein { from { opacity: 0; transform: translateY(calc(3 * var(--zeile) + 8px)); } to { opacity: 1; transform: translateY(calc(3 * var(--zeile))); } }
.treffer__suche span::after { content: ""; display: inline-block; width: 1.5px; height: 1em; background: var(--tinte); margin-left: 2px; vertical-align: -2px; }
.treffer.getippt .treffer__suche span::after { display: none; }
@media (prefers-reduced-motion: no-preference) { .treffer.wartet .treffer__suche span::after { animation: blinken 1s steps(1) infinite; } }
@keyframes blinken { 50% { opacity: 0; } }
.faq-sprung[hidden] { display: none; }
/* oben verankert statt senkrecht zentriert: ändert sich beim Schriftwechsel die Texthöhe, rutscht nichts (CLS) */

/* ---------- Preis-Baukasten: zusammenklicken, Aufwand sehen, ohne Euro ---------- */
.baukasten { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.5rem); align-items: start; background: #fff; border-radius: 26px; padding: clamp(1.2rem, 3.5vw, 2.4rem); box-shadow: 0 0 0 1px rgba(19,22,26,.06), 0 30px 60px -40px rgba(19,22,26,.4); }
.bk__wahl h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); }
.bk__hinweis { color: var(--leise); font-size: .9375rem; margin-top: .4rem; }
.bk__gruppe { border: 0; padding: 0; margin: 1.3rem 0 0; }
.bk__gruppe legend { font-weight: 650; font-size: .9375rem; margin-bottom: .55rem; padding: 0; }
.bk__chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.wahl-chip { position: relative; cursor: pointer; }
.wahl-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.wahl-chip span { display: inline-block; padding: .55rem .9rem; border-radius: 999px; font-size: .875rem; background: var(--grund); box-shadow: inset 0 0 0 1.5px var(--linie); transition: background .2s, box-shadow .2s, color .2s; }
.wahl-chip:hover span { box-shadow: inset 0 0 0 1.5px var(--tanne); }
.wahl-chip input:checked + span { background: var(--tanne); color: #fff; box-shadow: none; }
.wahl-chip input:focus-visible + span { outline: 3px solid var(--messing); outline-offset: 2px; }
.bk__ergebnis { position: sticky; top: calc(var(--kopfzeile) + 1.5rem); background: var(--grund); border-radius: 20px; padding: 1.4rem; display: grid; gap: .6rem; }
.bk__etikett { font-size: .8125rem; color: var(--leise); font-weight: 600; }
.bk__stufe { font: 650 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--kopf); letter-spacing: -.02em; }
.bk__balken { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; }
.bk__balken i { height: .55rem; border-radius: 3px; background: #e4e0d6; transition: background .35s var(--kurve), transform .35s var(--kurve); }
.bk__balken i.an { background: var(--tanne); }
.bk__balken i.an:nth-child(4), .bk__balken i.an:nth-child(5) { background: var(--messing); }
.bk__satz { font-size: .9375rem; color: var(--tinte); }
.bk__klein { font-size: .8125rem; color: var(--leise); }
.bk__ergebnis .knopf { margin-top: .4rem; justify-content: center; }
.bk__ergebnis:not(.ist-bereit) [data-bk-link] { }
@media (max-width: 900px) { .baukasten { grid-template-columns: 1fr; } .bk__ergebnis { position: static; } }
.rennen__nochmal[hidden] { display: none; }
@media (max-width: 900px) { .auslage figure { animation: none !important; } }