/* Startseite „Kino“ (am 30.09.2026 aus drei Entwürfen gewählt, Präfix ed- aus der Entwurfsphase) – Aufbau und große
   Überschriften wie eine Apple-Keynote, breite randlose Bilder, die ganze Seite durchgehend dunkel: keine weiße oder
   hellgraue Fläche. Signatur „Kino-Bänder“: Studiobilder über die volle Fensterbreite, oben und unten weich ins Schwarz
   geblendet, die Überschrift auf dem Bild oder daneben. Rhythmus nur über Schwarz-Abstufungen
   (#000 / --schwarz / --ed-panel / --graphit), Rot nur als Licht (Links, Knöpfe, kleine Markierungen).
   Geladen über $meta['css'] (Seiten::start), nach site.css; Farben, Schriften und Radien aus site.css. */

:root {
  --ed-luft: clamp(88px, 4rem + 6vw, 184px);          /* Innenabstand einer Bühne oben/unten, wie Entwurf A */
  --ed-luft-kopf: clamp(40px, 1.5rem + 3.5vw, 96px);  /* Überschrift → Bild/Raster */
  --ed-grau: #9CA1A9;                                 /* Beschriftungen/Nebentext auf Schwarz (Kontrast > 6 : 1) */
  --ed-leise: #8C9199;                                /* zweite Zeile der Überschrift (große Schrift, 6,2 : 1) */
  --ed-panel: #111113;                                /* dritte Schwarz-Abstufung: Kacheln, Vertrauen, FAQ */
  --ed-fuge: 6px;                                     /* Fugen im Kachelraster: schmaler Spalt aus reinem Schwarz */
  --ed-weich: cubic-bezier(.2, .8, .2, 1);
}

/* Kopf: seit 30.09.2026 auf allen Seiten schwarz (site.css „Kopf schwarz“) – hier keine eigene Regel mehr. */

/* Handy, erstes Filmbild (Marktvergleich M1): Suche und Preisversprechen gleich unter der Überschrift, der Erklärsatz und die
   Bewertung folgen darunter. Bei 390 × 844 liegt das Suchfeld so rund 65 px höher und klebt nicht mehr an der Aktionsleiste.
   Nur die Reihenfolge auf dem Bildschirm (order) – im Quelltext steht der Satz weiter vor der Suche; film.js bleibt unberührt. */
@media (max-width: 899px) {
  .seite-start .cap--erst { display: flex; flex-direction: column; }
  .seite-start .cap--erst .suche--film { margin-top: 4px; }
  .seite-start .cap--erst .film__unter { order: 1; margin: 12px 0 0; }
  .seite-start .cap--erst .film__beweis { order: 2; }
}

/* ---------- Bühne: Kopf mit Etikett, Überschrift, Satz, Links (wie Entwurf A, Farben auf Schwarz gedreht) ---------- */
.ed-buehne { padding-block: var(--ed-luft); }
.ed-kopf { text-align: center; }
.ed-kopf .etikett { margin-bottom: 1.5em; }
.ed-titel { font: 700 clamp(2.5rem, .7rem + 6.4vw, 6.5rem)/.97 var(--din); letter-spacing: -.03em; margin: 0 0 .34em; text-wrap: balance; color: var(--text-hell); }
.ed-titel__leise { display: block; color: var(--ed-leise); }
.ed-titel--links { text-align: left; font-size: clamp(2.3rem, 1rem + 4vw, 4.75rem); }
.ed-satz { max-width: 44ch; margin: 0 auto; font-size: clamp(1.125rem, 1rem + .55vw, 1.5rem); line-height: 1.45; color: var(--text-hell-2); text-wrap: balance; }
.ed-satz--links { margin-inline: 0; }
.ed-nb { white-space: nowrap; }

/* Textlinks wie in Entwurf A, aber immer in --glut (auf reinem Schwarz sichtbar; --rot bleibt Knöpfen vorbehalten) */
.ed-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 clamp(24px, 1rem + 1.6vw, 44px); margin: clamp(16px, .75rem + .8vw, 28px) 0 0; }
.ed-links--links { justify-content: flex-start; }
.ed-link { display: inline-flex; align-items: center; gap: .34em; min-height: 44px; font: 600 clamp(1.06rem, 1rem + .3vw, 1.25rem)/1.2 var(--din); letter-spacing: .005em; color: var(--glut); text-decoration: none; }
.ed-link::after, .ed-rat__mehr::after { content: ""; flex: none; width: .38em; height: .38em; border-top: .1em solid; border-right: .1em solid; transform: translateY(.03em) rotate(45deg); transition: transform .2s var(--ed-weich); }
.ed-link:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.ed-link:hover::after { transform: translate(.2em, .03em) rotate(45deg); }

/* ---------- Preis finden: Suche und Geräteleiste, ganz in Schwarz ---------- */
.ed-preis { background: var(--schwarz); padding-block: var(--ed-luft) clamp(72px, 3rem + 4vw, 136px); }
.suche.ed-suche { max-width: 720px; margin: clamp(28px, 1rem + 2vw, 48px) auto 0; text-align: left; }
.ed-arten { list-style: none; margin: clamp(48px, 2rem + 3.5vw, 96px) auto 0; padding: 0; max-width: 1120px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ed-art { display: flex; flex-direction: column; align-items: center; padding: 10px 6px 12px; border-radius: 4px; text-align: center; text-decoration: none; color: var(--text-hell); transition: background-color .2s; }
.ed-art:hover { color: var(--text-hell); background: rgb(255 255 255 / .06); }
.ed-art__bild { display: block; width: 100%; height: clamp(84px, 4.5rem + 3vw, 132px); margin-bottom: 16px; transition: transform .4s var(--ed-weich); }
.ed-art__bild .buehne-geraet { width: 100%; height: 100%; }
.ed-art:hover .ed-art__bild { transform: translateY(-5px); }
.ed-art__name { font: 700 clamp(1rem, .92rem + .35vw, 1.2rem)/1.2 var(--din); letter-spacing: -.005em; }
.ed-art:hover .ed-art__name { color: #fff; }
.ed-art__preis { margin-top: 3px; font-size: .92rem; color: var(--ed-grau); }
.ed-beliebt { max-width: 920px; margin: clamp(40px, 2rem + 1.5vw, 64px) auto 0; text-align: center; }
.ed-beliebt__titel { display: block; margin-bottom: 14px; font: 400 .78rem/1.2 var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--ed-grau); }
.ed-beliebt .chip { margin: 0 3px 8px; background: var(--graphit); color: var(--text-hell); }
.ed-beliebt .chip:hover { background: var(--rot); color: #fff; }
@media (max-width: 699px) {
  .ed-arten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 4px; }
}
/* Acht Kacheln (MacBook und iMac eigen, 05.10.2026): vier je Reihe, am Handy kleiner */
.ed-arten--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 980px; }
@media (max-width: 699px) {
  .ed-arten--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 2px; }
  .ed-arten--8 .ed-art { padding: 8px 2px 10px; }
  .ed-arten--8 .ed-art__bild { height: 62px; margin-bottom: 10px; }
  .ed-arten--8 .ed-art__name { font-size: .86rem; }
  .ed-arten--8 .ed-art__preis { font-size: .74rem; }
}

/* ---------- Signatur: Kino-Bänder – Studiobild über die volle Fensterbreite, oben/unten weich ins Schwarz ---------- */
.ed-band { position: relative; background: #000; }
.ed-band__bild { margin: 0; line-height: 0; overflow: hidden; }
.ed-band__bild img {
  display: block; width: 100%; height: clamp(420px, 108vw, 620px); object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
@media (min-width: 800px) {
  .ed-band__bild img { height: clamp(380px, 44vw, 760px); }
}

/* Variante --top (Display): Überschrift überlappt den oberen Bildrand, ein Schleier sorgt für Lesbarkeit */
/* Der Schleier reicht bis unter die Links: Satz und rote Links standen sonst mitten auf den hellen Glasrissen. */
.ed-band--top .ed-band__scrim { position: absolute; inset: 0 0 auto 0; height: 82%; background: linear-gradient(180deg, rgb(0 0 0 / .9) 0%, rgb(0 0 0 / .76) 38%, rgb(0 0 0 / .46) 64%, rgb(0 0 0 / 0) 100%); pointer-events: none; }
.ed-band--top .ed-band__kopf { position: absolute; inset: 0 0 auto 0; padding-top: clamp(40px, 4.5vw, 72px); text-align: center; }
.ed-band--top .ed-satz, .ed-band--top .ed-links { text-shadow: 0 0 2px rgb(0 0 0 / .9), 0 1px 14px rgb(0 0 0 / .85); }
.ed-band--top .ed-titel__leise { text-shadow: 0 1px 18px rgb(0 0 0 / .7); }
@media (max-width: 799px) {
  /* Etikett, zweizeilige Überschrift, Satz und Links sind auf schmalen Fenstern zusammen höher als bei breiter
     Bühne – der Schleier reicht darum weiter herunter, sonst gerät der Satz auf einen hellen Bildteil. */
  .ed-band--top .ed-band__scrim { height: 86%; background: linear-gradient(180deg, rgb(0 0 0 / .92) 0%, rgb(0 0 0 / .7) 45%, rgb(0 0 0 / .38) 72%, rgb(0 0 0 / 0) 100%); }
  /* Höher als die anderen Bänder: dann zeigt das Bild seine ganze Höhe und der Riss (bei ~⅔) liegt unter den Links */
  .ed-band--top .ed-band__bild img { height: clamp(520px, 148vw, 640px); }
}

/* Variante --seite (Datenrettung, Firmen & Händler, wie .eb-daten): Text links auf dem Bild, Verlauf ins Schwarz */
.ed-band--seite { overflow: hidden; }
.ed-band--seite .ed-band__bild { position: relative; }
.ed-band--seite .ed-band__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #000 0%, rgb(0 0 0 / 0) 40%); pointer-events: none; }
.ed-band__inhalt { position: relative; padding-block: clamp(40px, 3vw, 64px) clamp(56px, 2rem + 5vw, 120px); text-align: left; }
.ed-band__inhalt > * { max-width: 34rem; }
.ed-band__preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 22px 0 4px; }
.ed-band__preis strong { font: 700 clamp(2.3rem, 1.7rem + 2vw, 3.4rem)/1 var(--din); letter-spacing: -.012em; color: var(--text-hell); white-space: nowrap; }
.ed-band__preis span { font-size: .86rem; line-height: 1.4; color: var(--ed-grau); }
@media (min-width: 1000px) {
  .ed-band--seite { display: flex; align-items: center; min-height: min(58vw, 860px); }
  .ed-band--seite .ed-band__bild { position: absolute; inset: 0; height: 100%; }
  .ed-band--seite .ed-band__bild img { height: 100%; }
  .ed-band--seite .ed-band__bild::after {
    background: linear-gradient(90deg, rgb(0 0 0 / .95) 0%, rgb(0 0 0 / .82) 30%, rgb(0 0 0 / .25) 58%, rgb(0 0 0 / 0) 76%), linear-gradient(0deg, rgb(0 0 0 / .65), transparent 26%);
  }
  .ed-band__inhalt { padding-block: clamp(80px, 3rem + 4vw, 144px); }
}

/* ---------- Signatur: 2 × 2-Kacheln wie Entwurf A, alle dunkel, Bild bis an den Kachelrand ---------- */
.ed-kacheln { background: #000; padding: var(--ed-fuge); }
.ed-kacheln__raster { list-style: none; margin: 0 auto; padding: 0; max-width: 1760px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ed-fuge); }
.ed-kachel { position: relative; display: flex; flex-direction: column; min-height: clamp(560px, 30rem + 12vw, 740px); border-radius: 4px; overflow: hidden; isolation: isolate;
  text-align: center; background: var(--ed-panel); color: var(--text-hell); }
.ed-kachel__text { position: relative; z-index: 2; padding: clamp(40px, 2rem + 1.6vw, 64px) clamp(20px, 3vw, 48px) 0; }
.ed-kachel__titel { font: 700 clamp(2.1rem, 1.3rem + 2.2vw, 3.4rem)/1 var(--din); letter-spacing: -.025em; margin: 0 0 .28em; color: var(--text-hell); }
.ed-kachel__satz { max-width: 34ch; margin: 0 auto; font-size: clamp(1.05rem, .98rem + .3vw, 1.25rem); line-height: 1.45; color: var(--text-hell-2); }
.ed-kachel__zusatz { margin: 12px 0 0; font: 700 clamp(1rem, .96rem + .2vw, 1.125rem)/1.3 var(--din); letter-spacing: .01em; color: #fff; }
.ed-status { display: flex; justify-content: center; align-items: center; }
.ed-kachel .ed-links { margin-top: 8px; }
.ed-kachel__bild { position: relative; flex: 1 1 auto; min-height: 240px; margin: -6% 0 0; }
.ed-kachel__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%); mask-image: linear-gradient(180deg, transparent 0, #000 30%); }
.ed-kachel--post .ed-kachel__bild img { object-position: 70% 55%; }
.ed-kachel--pc .ed-kachel__bild img { object-position: 64% 50%; }
/* Okular: ganzer Kreis sichtbar, Kachel so schwarz wie das Bild (#000) – kein Rand sichtbar */
.ed-kachel--daten { background: #000; }
.ed-kachel--daten .ed-kachel__bild img { inset: 0 0 5%; height: 95%; object-fit: contain; object-position: 50% 100%; }
.ed-kachel__foto { flex: 1 1 auto; display: grid; place-items: center; padding: 28px 24px clamp(32px, 3vw, 56px); }
.ed-kachel__foto .schild__platte { width: min(100%, 400px); box-shadow: 0 0 0 1px rgb(255 255 255 / .1); }
.ed-kachel--laden .schild__unter { color: var(--ed-grau); }
@media (max-width: 733px) {
  .ed-kacheln__raster { grid-template-columns: minmax(0, 1fr); }
  .ed-kachel { min-height: 0; }
  .ed-kachel__bild { flex: none; aspect-ratio: 16 / 10; min-height: 0; margin-top: 4px; }
}

/* ---------- Einsendung: vier Schritte; ab 900 px stehendes Bild, das beim Scrollen wechselt (start.js) ---------- */
.ed-post { background: var(--schwarz); }
.ed-schritte { margin-top: var(--ed-luft-kopf); }
.ed-schritte__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(40px, 2rem + 2vw, 64px); }
.ed-schritt__bild { position: relative; margin: 0 0 20px; border-radius: 4px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ed-panel); }
.ed-schritt__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* karton-offen ist – anders als die übrigen Studiobilder – auf hellgrauem Grund fotografiert. Ein Schleier deckt das
   helle Umfeld ab; Karton, Klebeband und Cutter (rechts der Mitte) bleiben klar erkennbar. Dieselbe Form dient dem
   stehenden Bild rechts (.ed-bild-wrap--dunkler, dort auf einem eigenen Rahmen statt der Abbildung selbst, weil dort
   vier Bilder übereinanderliegen und sich beim Scrollen überblenden). */
.ed-schritt__bild--dunkler::after, .ed-bild-wrap--dunkler::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 42% 60% at 67% 50%, transparent 46%, rgb(0 0 0 / .96) 92%);
}
.ed-schritt__nr { margin: 0 0 .6em; font: 400 .78rem/1.2 var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--ed-grau); }
.ed-schritt__titel { font: 700 clamp(1.5rem, 1.15rem + 1.3vw, 2.5rem)/1.04 var(--din); letter-spacing: -.02em; margin: 0 0 .35em; color: var(--text-hell); }
.ed-schritt__text { margin: 0; max-width: 34ch; font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem); line-height: 1.5; color: var(--text-hell-2); }
.ed-schritte__buehne { display: none; }
/* Tablet (mit und ohne JavaScript) sowie Desktop ohne JavaScript: Karten in zwei Spalten */
@media (min-width: 600px) and (max-width: 899px) {
  .ed-schritte__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
@media (min-width: 900px) {
  .ed-schritte:not(.ed-kino) .ed-schritte__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
@media (min-width: 900px) {
  .ed-schritte.ed-kino { --ed-spalt: clamp(48px, 6vw, 112px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--ed-spalt); align-items: start;
    --ed-inhalt: calc(min(100vw, var(--breite) + 2 * var(--gutter)) - 2 * var(--gutter));
    --ed-bh: calc((var(--ed-inhalt) - var(--ed-spalt)) * 7 / 12 * .625 + 19px); }
  .ed-kino .ed-schritte__liste { gap: 0; }
  .ed-kino .ed-schritt { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; opacity: .3; transition: opacity .5s ease; }
  .ed-kino .ed-schritt.ist-an { opacity: 1; }
  .ed-kino .ed-schritt__bild { display: none; }
  .ed-kino .ed-schritte__buehne { display: block; position: sticky; top: max(calc(var(--kopf-h) + 24px), calc((100vh + var(--kopf-h) - var(--ed-bh)) / 2)); }
  .ed-schritte__rahmen { position: relative; aspect-ratio: 16 / 10; border-radius: 4px; overflow: hidden; background: var(--ed-panel); }
  .ed-bild-wrap { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
  .ed-bild-wrap.ist-an { opacity: 1; }
  .ed-bild-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ed-schritte__fortschritt { display: flex; gap: 6px; margin-top: 16px; }
  .ed-schritte__fortschritt span { flex: 1; height: 3px; border-radius: 2px; background: var(--graphit-2); transition: background-color .4s; }
  .ed-schritte__fortschritt span.ist-an { background: var(--glut); }
}
@media (min-width: 1100px) {
  .ed-schritte:not(.ed-kino) .ed-schritte__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Werkbank: Explosionszeichnung randlos auf Schwarz, vier Bauteile nummeriert (wie Entwurf A) ---------- */
.ed-werkbank { background: #000; padding-bottom: clamp(64px, 3rem + 4vw, 128px); }
.ed-wb { max-width: 1440px; margin: var(--ed-luft-kopf) auto 0; padding-inline: clamp(0px, 2vw, 32px); }
.ed-wb__bild { position: relative; }
.ed-wb__bild img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
.ed-wb__linien { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ed-wb__linien path { fill: none; stroke: rgb(255 255 255 / .42); stroke-width: 1.4; }
.ed-wb__linien path.ist-an { stroke: var(--glut); stroke-width: 2; }
.ed-wb__punkt, .ed-wb__ballon { position: absolute; translate: -50% -50%; border-radius: 50%; pointer-events: none; }
.ed-wb__punkt { width: 9px; height: 9px; background: #fff; }
.ed-wb__punkt.ist-an { background: var(--glut); }
.ed-wb__ballon { display: grid; place-items: center; width: clamp(26px, 1.1rem + 1.3vw, 44px); aspect-ratio: 1; background: rgb(10 10 11 / .86); border: 1.5px solid rgb(255 255 255 / .78);
  color: #fff; font: 700 clamp(.8rem, .68rem + .5vw, 1.15rem)/1 var(--din); }
.ed-wb__ballon.ist-an { background: var(--rot); border-color: var(--glut); }
.ed-wb__legende { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 20px; font: 400 .8rem/1.2 var(--din); letter-spacing: .14em; text-transform: uppercase; color: var(--text-hell-2); }
.ed-wb__legende span { display: inline-flex; align-items: center; }
.ed-wb__legende b { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 9px; border: 1px solid rgb(255 255 255 / .6); border-radius: 50%; font-weight: 700; letter-spacing: 0; color: #fff; }
.ed-wb__legende span:first-child b { background: var(--rot); border-color: var(--glut); }
.ed-wb__hinweis { margin: 18px auto 0; text-align: center; font-size: .95rem; text-wrap: balance; color: var(--text-hell-2); }
@media (max-width: 599px) {
  .ed-wb__legende { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 10px 26px; }
}

/* ---------- Vertrauen: vier belegte Zahlen, dunkles Panel als dritte Schwarz-Abstufung ---------- */
.ed-vertrauen { background: var(--ed-panel); }
.ed-fakten { list-style: none; margin: var(--ed-luft-kopf) auto 0; padding: 0; max-width: 1120px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 24px; text-align: center; }
.ed-fakt__link { display: block; text-decoration: none; color: inherit; }
.ed-fakt__link:hover { color: inherit; }
.ed-fakt__link:hover .ed-fakt__text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.ed-fakt__wert { display: block; margin-bottom: 14px; font: 700 clamp(3rem, 2rem + 3vw, 5.25rem)/.95 var(--din); letter-spacing: -.035em; color: var(--text-hell); font-variant-numeric: tabular-nums; }
.ed-fakt__wert small { font-size: .4em; letter-spacing: 0; color: var(--ed-grau); }
.ed-fakt__text { display: block; max-width: 24ch; margin: 0 auto; line-height: 1.45; color: var(--text-hell-2); }
.ed-fakt__stand { display: block; margin-top: 6px; font-size: .82rem; color: var(--ed-grau); }
@media (max-width: 899px) { .ed-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 16px; } }

/* ---------- Ratgeber: vier dunkle Karten ---------- */
.ed-rat { background: var(--schwarz); }
.ed-rat__liste { list-style: none; margin: var(--ed-luft-kopf) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ed-rat__karte { display: flex; flex-direction: column; height: 100%; min-height: 280px; padding: 30px 28px 24px; border-radius: 4px; background: var(--graphit); color: var(--text-hell); text-decoration: none;
  transition: transform .35s var(--ed-weich), background-color .35s var(--ed-weich); }
.ed-rat__karte:hover { color: var(--text-hell); transform: translateY(-4px); background: var(--graphit-2); }
.ed-rat__thema { margin-bottom: 14px; font: 400 .74rem/1.2 var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--ed-grau); }
.ed-rat__titel { font: 700 clamp(1.3rem, 1.1rem + .6vw, 1.6rem)/1.12 var(--din); letter-spacing: -.01em; margin: 0 0 .55em; color: var(--text-hell); }
.ed-rat__satz { flex: 1; font-size: .98rem; line-height: 1.5; color: var(--text-hell-2); }
.ed-rat__mehr { display: inline-flex; align-items: center; gap: .34em; margin-top: 20px; font: 600 1.05rem/1.2 var(--din); color: var(--glut); }
.ed-rat__karte:hover .ed-rat__mehr { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.ed-rat .ed-links { margin-top: clamp(24px, 1rem + 1.5vw, 40px); }
@media (max-width: 1099px) { .ed-rat__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .ed-rat__liste { grid-template-columns: minmax(0, 1fr); } .ed-rat__karte { min-height: 0; } }

/* ---------- Häufige Fragen: gleicher Baustein, dunkles Panel ---------- */
.ed-faq .faq { background: var(--ed-panel); padding-block: var(--ed-luft); color: var(--text-hell); }
.ed-faq .faq .h2 { text-align: center; font-size: clamp(2.3rem, 1rem + 4vw, 4.5rem); letter-spacing: -.028em; line-height: 1; margin-bottom: .9em; color: var(--text-hell); }
.ed-faq .faq__liste { border-top-color: var(--graphit-2); }
.ed-faq .faq__eintrag { border-bottom-color: var(--graphit); }
.ed-faq .faq__eintrag summary { color: var(--text-hell); }
.ed-faq .faq__eintrag summary::after { background: linear-gradient(var(--glut), var(--glut)) center / 100% 2px no-repeat, linear-gradient(var(--glut), var(--glut)) center / 2px 100% no-repeat; }
.ed-faq .faq__antwort { color: var(--text-hell-2); }
.ed-faq .faq__antwort a { color: var(--text-hell); }

/* ---------- Dezentes Einblenden (start.js setzt die Klassen nur unterhalb des ersten Bildschirms) ---------- */
html.js .ed-verdeckt { opacity: 0; transform: translateY(28px); }
html.js .ed-verdeckt.ed-da { opacity: 1; transform: none; transition: opacity 1s var(--ed-weich), transform 1s var(--ed-weich); }

@media (prefers-reduced-motion: reduce) {
  html.js .ed-verdeckt { opacity: 1; transform: none; }
  .ed-kino .ed-schritt, .ed-schritte__rahmen img, .ed-art__bild, .ed-rat__karte, .ed-link::after { transition: none; }
}

/* ---------- Direkt zur Reparatur: Themenseiten nach Schaden, vier Spalten mit feinen Linien ---------- */
.ed-leistungen { background: #000; }
.ed-leistungen__raster { display: grid; gap: 36px 40px; margin-top: var(--ed-luft-kopf); }
@media (min-width: 640px) { .ed-leistungen__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ed-leistungen__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ed-leistungen__titel { margin: 0; padding-bottom: 12px; border-bottom: 1px solid rgb(255 255 255 / .28); font: 400 .78rem/1.2 var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--ed-grau); }
.ed-leistungen__liste { list-style: none; margin: 0; padding: 0; }
.ed-leistungen__liste a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 10px 0; border-bottom: 1px solid rgb(255 255 255 / .1);
  font: 600 1.06rem/1.25 var(--din); color: var(--text-hell); text-decoration: none; }
.ed-leistungen__liste a::after { content: ""; flex: none; width: .38em; height: .38em; border-top: .1em solid var(--ed-grau); border-right: .1em solid var(--ed-grau); transform: rotate(45deg); transition: transform .2s var(--ed-weich), border-color .2s; }
.ed-leistungen__liste a:hover { color: #fff; }
.ed-leistungen__liste a:hover::after { border-color: var(--glut); transform: translateX(3px) rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .ed-leistungen__liste a::after { transition: none; } }

/* ---------- Schlanke Fassung (Founder 05.10.2026: „zu kompliziert und durcheinander – so einfach wie ein Shopify-Shop“) ----------
   Startfilm als Einstieg (bleibt, Founder 05.10.), danach fünf Abschnitte statt elf. */
.sf-titel { font-size: clamp(2.1rem, 1rem + 3.6vw, 4rem); }
.sf-arten.ed-preis { padding-block: clamp(56px, 2.5rem + 3vw, 112px); }
.sf-arten .ed-kopf .etikett { margin-bottom: 1em; }
.sf-arten .ed-arten { margin-top: clamp(28px, 1rem + 2vw, 56px); }

.sf-schritte { background: var(--ed-panel); padding-block: clamp(56px, 2.5rem + 3vw, 112px); }
.sf-schritte .sf-titel, .sf-fakten .sf-titel, .sf-mehr .sf-titel { text-align: center; margin-bottom: clamp(28px, 1.25rem + 2vw, 52px); }
.sf-schritte__liste { list-style: none; margin: 0 auto; padding: 0; max-width: 1120px; display: grid; gap: 14px; counter-reset: sf; }
@media (min-width: 760px) { .sf-schritte__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.sf-schritt { counter-increment: sf; position: relative; padding: 22px 22px 24px; border: 1px solid var(--graphit); border-radius: 12px; background: #0B0B0C; }
.sf-schritt::before { content: counter(sf); position: absolute; top: 16px; right: 20px; font: 700 2.2rem/1 var(--din); color: var(--graphit-2); }
.sf-schritt__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(160 0 0 / .2); color: var(--glut); }
.sf-schritt__icon svg { width: 22px; height: 22px; }
.sf-schritt__titel { margin: 16px 0 6px; font: 700 1.3rem/1.2 var(--din); color: var(--text-hell); }
.sf-schritt p { margin: 0; color: var(--text-hell-2); line-height: 1.5; }
.sf-schritte .ed-links { margin-top: 24px; }

.sf-fakten { background: var(--schwarz); padding-block: clamp(56px, 2.5rem + 3vw, 112px); }
.sf-fakten .ed-fakten { margin-top: 0; }

.sf-mehr { background: var(--ed-panel); padding-block: clamp(56px, 2.5rem + 3vw, 112px); }
.sf-karten { list-style: none; margin: 0 auto; padding: 0; max-width: 1120px; display: grid; gap: 12px; }
@media (min-width: 640px) { .sf-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .sf-karten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sf-karte { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px 20px; border: 1px solid var(--graphit); border-radius: 12px; background: #0B0B0C; color: var(--text-hell); text-decoration: none; transition: border-color .2s; }
.sf-karte:hover { border-color: var(--rot); }
.sf-karte:focus-visible { outline: 3px solid var(--rot); outline-offset: 2px; }
.sf-karte__titel { font: 700 1.25rem/1.2 var(--din); }
.sf-karte__text { color: var(--text-hell-2); font-size: .95rem; line-height: 1.5; }
.sf-karte__fuss { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; color: var(--glut); font: 600 .95rem var(--din); }
.sf-themen { margin-top: clamp(32px, 1.5rem + 2vw, 56px); }

/* ---------- Riss wegwischen (Founder 14.10.2026, partials/riss.php, erlebnis.js) ----------
   Unter dem Startfilm: Handy mit gesprungenem Glas, der Sprung lässt sich wegwischen. Reines Schwarz wie das Filmende,
   das Handy kippt leicht mit der Maus (3D), beim Heilen leuchtet es von hinten rot. Zustände über data-zustand:
   ganz (ohne Skript: heiles Display, Suche sichtbar) → kaputt (Hinweis) → heil (Suche, „Repariert“ auf dem Display). */
/* Nur seitlich abschneiden (roter Schein ums Handy): nach unten muss die Trefferliste der Suche über den Abschnitt hinausragen
   dürfen – mit overflow: hidden war sie am Handy nach einem Treffer abgeschnitten (Founder 15.10.2026: „Dropdown viel zu klein“) */
.sf-riss { position: relative; z-index: 2; background: #000; padding-block: clamp(56px, 2.5rem + 3vw, 112px); overflow-x: clip; }
@supports not (overflow: clip) { .riss__schein { inset: -14% -8%; } }
.riss { display: grid; grid-template-areas: "kopf" "feld" "unten"; justify-items: center; text-align: center; gap: 22px; max-width: 1060px; margin: 0 auto; }
@media (min-width: 860px) {
  .riss { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kopf feld" "unten feld"; justify-items: start; align-items: end; text-align: left; column-gap: clamp(48px, 7vw, 120px); row-gap: 18px; }
  .riss__unten { align-self: start; }
}
.riss__kopf { grid-area: kopf; }
.riss__kopf .etikett { margin: 0 0 1em; }
.riss__titel { margin: 0; max-width: 11ch; font: 700 clamp(2.1rem, 1rem + 3.6vw, 4rem)/.97 var(--din); letter-spacing: -.03em; color: var(--text-hell); text-wrap: balance; }
@media (max-width: 859px) { .riss__titel { margin-inline: auto; } }

.riss__feld { grid-area: feld; perspective: 1100px; padding: 12px 0; }
.riss__kipp { position: relative; width: clamp(196px, 54vw, 220px); transform-style: preserve-3d; }
@media (min-width: 860px) { .riss__kipp { width: clamp(240px, 21vw, 280px); } }
.riss__geraet { display: block; width: 100%; height: auto; aspect-ratio: 210 / 414; filter: drop-shadow(0 34px 38px rgb(0 0 0 / .7)); }
/* Bildschirm der Zeichnung (Symbol „insel“: x 11–189, y 11–399, Radius 27 im viewBox −5 −2 210 414) */
.riss__schirm { position: absolute; left: 7.619%; top: 3.14%; width: 84.762%; height: 93.72%; border-radius: 15.17% / 6.96%; overflow: hidden; }
.riss__insel { position: absolute; left: 37.14%; top: 5.556%; width: 25.71%; height: 3.865%; border-radius: 999px; background: #000; }
.riss__glas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: none; transition: opacity .7s var(--ed-weich); }
.riss__glanz { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 32%, rgb(255 255 255 / .08) 46%, transparent 60%) no-repeat; background-size: 260% 100%; background-position: var(--glanz, 60%) 0; }
.riss__finger { position: absolute; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none; opacity: 0;
  border: 1.5px solid rgb(255 255 255 / .7); background: radial-gradient(closest-side, rgb(255 255 255 / .22), rgb(255 255 255 / .04)); transition: opacity .25s; }
.riss.ist-zeiger .riss__finger, .riss.ist-vorfuehrung .riss__finger { opacity: 1; }
/* Bildschirm unter dem Glas: leuchtet rot von unten – was man wegwischt, gibt ihn frei; Haken und Wort erst beim Heilen */
.riss__heil { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px;
  background: radial-gradient(120% 70% at 50% 108%, rgb(255 59 47 / .62), rgb(160 0 0 / .28) 42%, transparent 72%), radial-gradient(90% 45% at 18% 0%, rgb(255 255 255 / .1), transparent 62%), linear-gradient(180deg, #1d1e23, #0b0b0d 62%); }
.riss__haken, .riss__heil-text { opacity: 0; transform: scale(.9); transition: opacity .5s .25s, transform .6s .25s var(--ed-weich); }
.riss__haken { width: 34%; height: auto; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.riss__haken circle { stroke: var(--glut); stroke-dasharray: 132; stroke-dashoffset: 132; transition: stroke-dashoffset .8s .3s var(--ed-weich); }
.riss__haken path { stroke: #fff; stroke-dasharray: 32; stroke-dashoffset: 32; transition: stroke-dashoffset .45s .85s var(--ed-weich); }
.riss__heil-text { font: 700 clamp(1.1rem, .9rem + .6vw, 1.4rem)/1 var(--din); letter-spacing: .02em; color: #fff; }
.riss__schein { position: absolute; inset: -14% -46%; border-radius: 50%; pointer-events: none; opacity: 0; transform: translateZ(-60px);
  background: radial-gradient(closest-side, rgb(255 59 47 / .42), rgb(160 0 0 / .14) 55%, transparent 75%); transition: opacity 1s var(--ed-weich); }
.riss[data-zustand="heil"] .riss__haken, .riss[data-zustand="heil"] .riss__heil-text { opacity: 1; transform: none; }
.riss[data-zustand="heil"] .riss__haken circle, .riss[data-zustand="heil"] .riss__haken path { stroke-dashoffset: 0; }
.riss[data-zustand="heil"] .riss__glas { opacity: 0; pointer-events: none; }
.riss[data-zustand="heil"] .riss__schein { opacity: 1; }

.riss__unten { grid-area: unten; display: grid; width: 100%; max-width: 30rem; }
.riss__vorher, .riss__nachher { grid-area: 1 / 1; transition: opacity .45s var(--ed-weich), visibility .45s; }
.riss__vorher { visibility: hidden; opacity: 0; }
.riss[data-zustand="kaputt"] .riss__vorher { visibility: visible; opacity: 1; }
.riss[data-zustand="kaputt"] .riss__nachher { visibility: hidden; opacity: 0; }
.riss__hinweis { margin: 0 0 4px; font-size: 1.06rem; line-height: 1.5; color: var(--text-hell-2); }
.riss__knopf, .riss__nochmal { min-height: 44px; padding: 8px 0; border: 0; background: none; cursor: pointer; font: 500 .95rem var(--sans); color: var(--ed-grau); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.riss__knopf:hover, .riss__nochmal:hover { color: #fff; }
.riss__satz { margin: 0; font-size: 1.06rem; line-height: 1.5; color: var(--text-hell-2); }
.suche--riss { margin: 18px 0 4px; max-width: none; text-align: left; }
.suche--riss .suche__feld { height: 58px; background: rgb(255 255 255 / .96); border-color: transparent; }
.suche--riss .suche__feld:focus { border-color: var(--glut); }
.suche--riss .suche__liste { max-height: min(46vh, 340px); color: var(--schwarz); }
.riss__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 24px; margin: 0; }
@media (min-width: 860px) { .riss__links { justify-content: flex-start; } }
html.ruhig .riss__haken, html.ruhig .riss__heil-text, html.ruhig .riss__glas, html.ruhig .riss__schein, html.ruhig .riss__vorher, html.ruhig .riss__nachher { transition-duration: .01s; transition-delay: 0s; }
html.ruhig .riss__haken circle, html.ruhig .riss__haken path { transition: none; }