/* =========================================================
   Leistungsseiten — Präfix fx-
   Für Haushaltsauflösung, Entrümpelung und Nachlassverwertung. Lädt nach rahmen.css und startseite.css
   und ergänzt nur, was dort fehlt. Die Startseite beruhigt, die Leistungsseite klärt und führt wie eine Räumung:
   Der Weg bekommt eine Achse, das Ergebnis ein Blatt. Variiert wird je Seite das Motiv, nicht der Aufbau.
   Regeln tragen .fx (body) davor, wenn sie Regeln aus startseite.css gleicher Stärke sicher schlagen müssen.
   Mobile-first, Breakpoints 900 / 1280. Farben nur über Tokens, Transparenzen als rgba() ihrer Werte.
   Radien: nur --radius-card, --radius-btn, 50 % (Kreise), --radius-mark (Logo-Motiv, 3 px).
   ========================================================= */

/* Wärme ohne Beige: dunklerer Fließtext und ein Lichtschein wie Abendsonne durchs Fenster.
   Diese Datei lädt nach rahmen.css, --text gilt deshalb nur auf den Leistungsseiten. */
.fx {
  --text: #3D4440;
  --licht: radial-gradient(60% 34rem at 92% 0, rgba(255, 214, 160, .26), rgba(255, 214, 160, 0) 72%);
  --fenster-verlauf: linear-gradient(to bottom, rgba(10, 46, 42, .86) 0%, rgba(10, 46, 42, .62) 22%, rgba(10, 46, 42, 0) 46%);
  --band-pad: clamp(4rem, 8vw, 7rem);
}


/* =========================================================
   1 · HERO (kürzer als die Startseite, Foto statt Video)
   ========================================================= */
/* Das große Fenster und die weiße Karte: Drei Bilder füllen den Hero von Rand zu Rand, die hellen Fugen wirken wie Sprossen.
   Die Karte nimmt das Angebotsblatt der Seite vorweg. Mobil steht das Fenster oben, die Karte liegt darüber; ab 1280 px ragt sie über die Naht.
   Der Hero bleibt ohne eigene Ebene, damit die runden Ecken der Leiste sichtbar bleiben: Die Karte liegt mit 51 über der Leiste,
   angedockt liegt die Leiste mit 52 wieder darüber. */
.fx .fx-hero--karte {
  --hero-titel: var(--teal-deep); --hero-text: var(--text); --hero-akzent: var(--teal-primary); --hero-linie: var(--teal-line);
  display: block; min-height: 0; overflow: visible; isolation: auto; background: var(--bg); color: var(--hero-text);
}
.fx-hero--karte .fx-hero__inner { padding: 0 0 1.5rem; }
.fx-fenster {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  height: 46vh; height: 46svh;
}
.fx-fenster__bild { position: relative; margin: 0; overflow: hidden; }
.fx-fenster__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Verlauf für die Lesbarkeit des Hauptmenüs über den hellen Bildern */
.fx-fenster::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--fenster-verlauf);
}
.fx-karte {
  position: relative; z-index: 51; margin-top: -3.5rem; padding: 1.25rem 1.25rem 1.5rem;
  background: var(--white); border-radius: var(--radius-card); box-shadow: var(--shadow-soft);
}

/* Auf der weißen Karte sind alle Farben des dunklen Heros gedreht. „Haushaltsauflösung“ ist das längste Wort der H1,
   es muss in voller Länge in die Maske passen, die Wörter brechen dort nicht. */
.fx-hero--karte .fx-hero__title { color: var(--hero-titel); font-size: clamp(1.55rem, 7.9vw, 2.3rem); margin: .75rem 0 1rem; }
.fx-hero__sub { font-size: 1.12rem; line-height: 1.55; color: var(--hero-text); max-width: 34rem; margin-bottom: 1.75rem; }
.fx-hero--karte .fx-crumb__item { color: var(--hero-akzent); }
.fx-hero--karte .fx-crumb__item + .fx-crumb__item::before { color: var(--hero-text); }
.fx-hero--karte .fx-crumb__a { color: var(--hero-titel); text-decoration-color: var(--hero-linie); }
.fx-hero--karte .fx-crumb__a:hover { text-decoration-color: currentColor; }
/* Der helle Fokusring aus rahmen.css ist für dunkle Heros gemacht, auf Weiß wäre er unsichtbar */
.fx-hero .fx-karte :focus-visible { outline-color: var(--hero-akzent); }
.fx-hero--karte .fx-tlink span { color: var(--hero-titel); text-decoration-color: var(--hero-linie); }
.fx-hero--karte .fx-tlink .fx-tlink__dim { color: var(--hero-text); }
.fx-hero--karte .fx-tlink:hover span { color: var(--hero-akzent); text-decoration-color: currentColor; }

/* Handy: Besichtigung und Anruf sind zwei gleich breite Buttons. Am Computer bleibt die Nummer ein Textlink. */
.fx-hero--karte .fx-hero__actions { align-items: stretch; }
.fx-hero--karte .fx-btn { justify-content: space-between; }
.fx-hero__tel { display: none; }

/* Breadcrumb: sitzt anstelle der Eyebrow, Trenner kommen aus dem CSS */
.fx-crumb__list { display: flex; flex-wrap: wrap; align-items: center; }
.fx-crumb__item { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; font-weight: 500; }
.fx-crumb__item + .fx-crumb__item::before { content: '/'; content: '/' / ''; margin-inline: .6rem; }
.fx-crumb__a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em;
  transition: text-decoration-color .4s var(--ease);
}


/* =========================================================
   ÜBERSCHRIFTEN IN SCHMALEN SPALTEN
   .fx-h2 ist für fünf von zwölf Spalten zu groß.
   ========================================================= */
.fx-h2.fx-h2--spalte { font-size: clamp(1.75rem, 8.4vw, 2rem); }


/* =========================================================
   2 · IHRE SITUATION
   Wer in Trauer ist, sucht sich selbst und liest wenig: zwei Spalten, jede Lage ein Satz.
   Mobil: Kopf, Todesfall, Zeilen, Karte. Ab 900 px füllt die Karte die linke Spalte unter dem Kopf.
   ========================================================= */
.fx-sit { background-image: var(--licht); }
.fx-leit__titel { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; color: var(--teal-primary); margin-bottom: .6rem; }
.fx-leit__text { font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 500; line-height: 1.4; letter-spacing: -0.02em; color: var(--teal-deep); }
.fx-leit__mehr { margin-top: .5rem; }
.fx-leit__mehr a, .fx-mensch__fakten a { display: inline-flex; align-items: center; min-height: 44px; }
.fx-leit__mehr a, .fx-lage a, .fx-mensch__fakten a {
  font-weight: 600; color: var(--teal-primary);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;
  text-decoration-color: var(--teal-line); transition: text-decoration-color .4s var(--ease);
}
.fx-leit__mehr a:hover, .fx-lage a:hover, .fx-mensch__fakten a:hover { text-decoration-color: currentColor; }

.fx-lagen { margin-top: 1.5rem; }
.fx-lage { padding-block: 1rem 1.1rem; border-top: 1px solid var(--line); }
.fx-lage__titel { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; color: var(--teal-deep); margin-bottom: .2rem; }

.fx-fern { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--white); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }
.fx-fern__titel { font-family: var(--font-heading); font-size: clamp(1.25rem, 1.7vw, 1.4rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--teal-deep); margin-bottom: .6rem; }


/* =========================================================
   BÄNDER UND FLÄCHEN
   Jede Sektion legt sich mit runden Ecken 20 px über die davor: gleiche Ebene, die Reihenfolge im HTML entscheidet.
   Unten bleibt deshalb immer Platz für die 20 px, die die nächste Sektion abnimmt.
   --ground ist die Fläche hinter Bildrahmen im Band: Die Logo-Kerbe der Fotos schneidet in --cream, nicht in --bg.
   ========================================================= */
.fx .fx-band, .fx .fx-plain {
  position: relative; z-index: 3;
  margin-top: calc(-1 * var(--radius-card));
  padding-bottom: calc(var(--band-pad) + var(--radius-card));
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
/* Die Haarlinie folgt der Rundung und trägt den leisen Unterschied von --cream zu --bg */
.fx .fx-band {
  --ground: var(--cream);
  padding-top: calc(var(--band-pad) + var(--radius-card));
  background: var(--cream);
  box-shadow: 0 -1px 0 var(--line);
}
.fx .fx-plain { padding-top: clamp(4.5rem, 9vw, 8rem); background: var(--bg) var(--licht) no-repeat; }


/* =========================================================
   3 · ABLAUF: DUNKLES BAND MIT WAAGERECHTER ACHSE
   Die einzige dunkle Sektion zwischen Hero und Kontakt, sie gibt der Seite den Rhythmus.
   ========================================================= */
.fx .fx-ablauf { padding-bottom: calc(var(--band-pad) + var(--radius-card) - 1.5rem); background: var(--teal-deep); color: var(--cream-85); box-shadow: none; }
.fx .fx-ablauf .fx-eyebrow { color: var(--teal-accent-soft); }
.fx .fx-ablauf .fx-h2 { color: var(--cream); }
.fx .fx-flow--achse { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* Kein Bühnenablauf: startseite.js setzt weiter is-active und is-done, hier bleibt das wirkungslos */
.fx-anim .fx .fx-flow--achse .fx-step .fx-step__ico,
.fx-anim .fx .fx-flow--achse .fx-step .fx-step__body,
.fx-anim .fx .fx-flow--achse .fx-step .fx-step__title { opacity: 1; transform: none; }
.fx .fx-flow--achse .fx-step::after { display: none; }

.fx .fx-flow--achse .fx-step::before { border-left-color: var(--line-dark); }
.fx .fx-flow--achse .fx-step__ico { color: var(--cream); }
/* Die Logo-Ecke ist „frei“: Unterwegs bleibt sie Kontur, sie füllt sich erst, wenn die Linie das Ende erreicht. Ohne JS steht sie gefüllt da. */
.fx .fx-flow--achse .fx-step__ico .fx-acc { fill: transparent; stroke: var(--teal-accent-soft); stroke-width: 2.34; }
.fx .fx-flow--achse .fx-step:last-child .fx-acc { transition: fill .8s var(--ease) 1.2s; }
html:not(.fx-anim) .fx .fx-flow--achse .fx-step:last-child .fx-acc,
.fx .fx-flow--achse .fx-step:last-child.is-visible .fx-acc { fill: var(--teal-accent-soft); }
.fx .fx-flow--achse .fx-step__kicker { color: var(--teal-accent-soft); }
/* Das Icon wartet gedimmt, der Text kommt erst, wenn die Linie ihn erreicht: Halb sichtbarer Text wäre für einen Moment schlecht lesbar */
.fx-anim .fx .fx-flow--achse .fx-step:not(.is-visible) .fx-step__ico { opacity: .22; }
.fx-anim .fx .fx-flow--achse .fx-step:not(.is-visible) .fx-step__head,
.fx-anim .fx .fx-flow--achse .fx-step:not(.is-visible) .fx-step__body p { opacity: 0; }
.fx-anim .fx .fx-flow--achse .fx-step__head,
.fx-anim .fx .fx-flow--achse .fx-step__body p { transition: opacity .7s var(--ease); }
/* Drei Titel gleichzeitig: Sie ordnen sich der Display-Zeile des Blatts unter */
.fx .fx-flow--achse .fx-step__title { font-size: clamp(1.35rem, 1.9vw, 1.65rem); color: var(--cream); }


/* =========================================================
   4 · FESTPREIS: DAS WEISSE BLATT
   Eine Spalte, keine Links-Rechts-Teilung. Die Kerbe sitzt außen unten rechts (Werte aus .fx-frame::after).
   Unten Innenabstand in Kerbenhöhe, damit nichts unter die Kerbe läuft.
   ========================================================= */
.fx-blatt {
  --ground: var(--bg);
  --blatt-pad: clamp(1.25rem, 4vw, 3.5rem);
  position: relative;
  padding: var(--blatt-pad) var(--blatt-pad) calc(clamp(44px, 6vw, 72px) + 1rem);
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}
.fx-blatt::after {
  content: ''; position: absolute; right: -1px; bottom: -1px;
  width: clamp(44px, 6vw, 72px); aspect-ratio: 1; pointer-events: none;
  background: var(--teal-primary);
  border-top: 6px solid var(--ground); border-left: 6px solid var(--ground);
  border-radius: 0 0 var(--radius-card) 0;
}
/* Mobil begrenzt die Zeile „Unser Festpreis ist“ die Größe: Sie muss in eine Zeile passen */
.fx .fx-blatt .fx-statement { font-size: clamp(1.6rem, 8.6vw, 2.25rem); margin-top: 1.25rem; }
.fx .fx-blatt .fx-vow__lede { margin-top: 1.5rem; padding-bottom: 0; max-width: 34rem; }
.fx .fx-blatt .fx-vow { margin-top: clamp(2rem, 4vw, 3rem); column-gap: var(--col-gap); }
.fx .fx-blatt .fx-vow__item { padding-block: 1.25rem; }
.fx .fx-blatt .fx-vow__item::before { border-top-color: var(--cream-dark); }
/* Die Logo-Marke springt mit jeder Leistung auf, wie ein Haken auf dem Angebot */
.fx-anim .fx-vow__item:not(.is-visible) .fx-mark { transform: scale(0); }
/* Die Linie läuft über die volle Breite, der Text bleibt bei 40 rem */
.fx .fx-blatt .fx-vow__note { margin-top: 0; max-width: none; padding-right: max(0px, calc(100% - 40rem)); border-top-color: var(--cream-dark); }

/* Der Kostenrechner ist unser digitaler Vorsprung. Mobil folgt er auf die Leistungen, damit „Im Festpreis enthalten“ hält, was es verspricht.
   Ab 900 px rückt er unter die Lede, ab 1280 px neben den Festpreis-Satz. */
.fx-rechner { --ground: var(--teal-deep); display: grid; row-gap: 1.25rem; margin-top: 1.5rem; padding: clamp(1.5rem, 2.6vw, 2rem); background: var(--teal-deep); border-radius: var(--radius-card); color: var(--cream-85); font-size: 1.02rem; }
.fx-rechner .fx-eyebrow { color: var(--teal-accent-soft); }
.fx-rechner__titel { font-family: var(--font-heading); font-size: clamp(1.35rem, 2vw, 1.6rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: var(--cream); margin: .75rem 0 .5rem; }
.fx-rechner .fx-btn { justify-content: space-between; }
.fx-rechner :focus-visible { outline-color: var(--teal-accent-soft); }

/* Am Ende des Blatts die Regel, die Vertrauen schafft, und direkt daneben die Handlung */
.fx-blatt__schluss { display: grid; row-gap: 1.5rem; justify-items: start; margin-top: 1.5rem; padding-top: 1.75rem; border-top: 1px solid var(--cream-dark); }
/* Zwei Wege am Ende des Blatts, gleich breit untereinander: Formular und Anruf */
.fx-blatt__aktion { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; }
.fx-blatt__aktion .fx-btn { justify-content: space-between; }
.fx-blatt__zahlung { font-family: var(--font-heading); font-size: clamp(1.55rem, 2.8vw, 2.25rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; color: var(--teal-deep); margin-bottom: .6rem; }
.fx-blatt__zahlung em, .fx-rechner__titel em, .fx-mensch__karte .fx-h2 em { white-space: nowrap; }


/* =========================================================
   5 · VORHER / NACHHER
   Die Fotos sind echt: nur Ton, keine Retusche. Dasselbe warme Licht wie im Hero, damit Wunsch und Wirklichkeit als ein Licht gelesen werden.
   ========================================================= */
.fx-wall .fx-frame__in img { filter: saturate(1.06) contrast(.96) brightness(1.03); }
.fx-wall .fx-frame__in::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 205, 150, .14), rgba(255, 205, 150, 0) 60%); mix-blend-mode: soft-light;
}
/* Die Fotos öffnen sich von oben, eins nach dem anderen. Kürzer als .fx-frame: startseite.js schaltet nach 1,4 s auf Nachher. */
.fx-anim .fx-wall .fx-tile[data-clip] .fx-frame__in { clip-path: inset(0 0 100% 0 round var(--radius-card)); transition: clip-path 1s var(--ease) calc(var(--i, 0) * 120ms); }
.fx-anim .fx-wall .fx-tile[data-clip].is-visible .fx-frame__in { clip-path: inset(0 0 0 0 round var(--radius-card)); }
.fx-anim .fx-wall .fx-tile[data-clip] .fx-tile__cap { opacity: 0; transition: opacity .6s var(--ease) calc(var(--i, 0) * 120ms + .5s); }
.fx-anim .fx-wall .fx-tile[data-clip].is-visible .fx-tile__cap { opacity: 1; }


/* =========================================================
   6 · ANSPRECHPARTNER
   Reihenfolge der Zweifel: Preis, Beleg, Gesicht, letzte Fragen. Die Karte liegt über dem Porträt.
   Mobil verdeckt sie die Kerbe, deshalb steht die Kerbe erst ab 900 px.
   ========================================================= */
.fx-mensch__bild .fx-frame::after { display: none; }
.fx-mensch__bild .fx-frame__in { aspect-ratio: 4 / 5; }
.fx-mensch__karte {
  position: relative; margin: -3.5rem .75rem 0; padding: clamp(1.5rem, 3.5vw, 3rem);
  background: var(--white); border-radius: var(--radius-card); box-shadow: var(--shadow-soft);
}
.fx-mensch__text { margin-top: 1.25rem; max-width: 34rem; }
/* Weiß auf Weiß: Die Telefonkarte verliert hier ihre eigene Fläche */
.fx .fx-mensch__karte .fx-call { margin-top: 1.5rem; padding: 0; background: none; box-shadow: none; }
.fx-mensch__fakten { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--cream-dark); font-size: 1.02rem; }
.fx-mensch__hinweis { margin-top: .75rem; font-size: 1rem; }


/* =========================================================
   7 · FAQ MIT EINZUGSGEBIET
   Das Gebiet ist für die Suche wichtig, nicht für die erste Orientierung. Mobil steht es nach den Fragen.
   ========================================================= */
.fx-gebiet__text { max-width: 34rem; }
.fx-gebiet__text strong { color: var(--teal-deep); }
.fx-gebiet .fx-svcline { margin-top: 1rem; column-gap: 1.25rem; }


/* =========================================================
   8 · KONTAKT
   Die Karte nimmt die Angst vor dem Anruf: So wenig wollen wir am Telefon wissen.
   ========================================================= */
.fx-cta__title em { display: block; }
.fx-cta__kopf { row-gap: 2.5rem; align-items: center; }
.fx-anruf { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--white); border-radius: var(--radius-card); color: var(--text); }
/* Anruf-Link in der weißen Karte: Der Grundstil von .fx-tlink ist für dunklen Grund (04.11.2026) */
.fx-anruf .fx-tlink { flex-wrap: wrap; gap: .15rem .6rem; margin-top: .75rem; color: var(--teal-deep); }
.fx-anruf .fx-tlink span { text-decoration-color: var(--cream-dark); }
.fx-anruf .fx-tlink .fx-tlink__dim { color: var(--text); text-decoration: none; }
.fx-anruf .fx-tlink:hover span { color: var(--teal-primary); text-decoration-color: currentColor; }
.fx-anruf__titel { font-family: var(--font-heading); font-size: clamp(1.25rem, 1.7vw, 1.4rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--teal-deep); margin-bottom: 1rem; }
.fx-anruf__liste li { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 1rem; padding-block: .8rem; border-top: 1px solid var(--cream-dark); color: var(--teal-deep); font-weight: 500; line-height: 1.45; }
.fx-anruf__liste li::before { content: ''; width: 12px; height: 12px; margin-top: .4rem; background: var(--teal-primary); border-radius: 0 0 var(--radius-mark) 0; }
.fx-anruf__fuss { padding-top: 1rem; border-top: 1px solid var(--cream-dark); font-size: 1.02rem; }


/* =========================================================
   BEWEGUNG
   Ohne JS und bei reduzierter Bewegung steht alles im Endzustand.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fx-fenster-bild { from { transform: scale(1.06); } to { transform: none; } }
  .fx-anim .fx-fenster__bild img { animation: fx-fenster-bild 1.8s var(--ease) both; }
  .fx-anim .fx-fenster__bild:nth-child(2) img { animation-delay: .12s; }
  .fx-anim .fx-fenster__bild:nth-child(3) img { animation-delay: .24s; }
}


/* =========================================================
   BREAKPOINTS
   ========================================================= */
/* Sehr schmale Handys: Die fetten Wörter brechen nicht, sie müssen in die Zeile passen */
@media (max-width: 359px) {
  .fx-h2 { font-size: 1.7rem; }
  .fx .fx-blatt .fx-statement { font-size: 1.5rem; }
}

@media (min-width: 900px) {
  /* Hero: Das Fenster läuft von Rand zu Rand hinter der Karte */
  .fx .fx-hero--karte { display: flex; align-items: flex-end; min-height: 84vh; min-height: 84svh; }
  .fx-fenster { position: absolute; inset: 0; height: auto; gap: 7px; }
  .fx-hero--karte .fx-hero__inner { padding: 7rem 0 calc(2rem + var(--radius-card)); }
  .fx-karte { grid-column: 6 / 13; margin-top: 0; padding: clamp(1.75rem, 3vw, 2.75rem); }
  .fx-sub.is-stuck { z-index: 52; }
  .fx-hero--karte .fx-hero__actions { align-items: flex-start; }
  .fx-hero__anruf { display: none; }
  .fx-hero__tel { display: inline-flex; }

  .fx-hero--karte .fx-hero__title { font-size: clamp(2.1rem, 3.2vw, 2.9rem); }

  .fx-h2.fx-h2--spalte { font-size: clamp(2rem, 3.3vw, 2.75rem); }

  /* Situation: Links Kopf und Karte, rechts Todesfall und Zeilen. Beide Spalten sind etwa gleich hoch, es bleibt keine leere Strecke. */
  .fx-sit__grid { grid-template-rows: auto 1fr; }
  .fx-sit__list { grid-row: 1 / 3; }
  .fx-fern { grid-column: 1 / 6; grid-row: 2; }

  /* Sprungziele: Die Leiste ist angedockt bis ca. 129 px, scroll-padding-top reicht nicht für die runde Bandkante */
  .fx .fx-band, .fx .fx-plain { scroll-margin-top: 1.5rem; }

  /* Achse: drei gleiche Spalten. Die Schritte lösen die Bühne-Abstände aus startseite.css ab. */
  .fx .fx-flow--achse .fx-flow__steps {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 0;
    padding: 0;
  }
  /* Jeder Schritt spannt drei Zeilen (Icon, Kopf, Text) und teilt sie per Subgrid mit seinen Nachbarn:
     Kopf und Text beginnen in allen Spalten auf gleicher Höhe, auch wenn ein Titel umbricht. */
  .fx .fx-flow--achse .fx-step {
    grid-template-columns: minmax(0, 1fr); grid-row: span 3; grid-template-rows: subgrid;
    row-gap: 0; column-gap: 0; padding-bottom: 0;
  }
  .fx .fx-flow--achse .fx-step__body { display: contents; }
  .fx .fx-flow--achse .fx-step__ico { margin-bottom: 1.5rem; }
  .fx .fx-flow--achse .fx-step__body p:last-child { max-width: 22rem; }
  /* Linie auf Icon-Mitte (Icon 64 px), beginnt 1 rem nach dem Icon und endet 1 rem vor dem nächsten.
     Der letzte Schritt hat keine (startseite.css). --teal-accent-soft mit 55 %, dafür gibt es keinen Token. */
  .fx .fx-flow--achse .fx-step::before {
    left: calc(64px + 1rem); right: calc(1rem - var(--col-gap));
    top: 31px; bottom: auto; border-left: 0;
    border-top: 2px solid rgba(159, 225, 203, .55); transform-origin: left center;
  }

  /* Festpreis: Das Blatt ist zwölf Spalten breit, die Liste läuft in zwei Spalten */
  .fx .fx-blatt .fx-statement { font-size: clamp(2rem, 4.6vw, 4rem); }
  .fx-blatt { display: grid; grid-template-columns: minmax(0, 1fr); }
  .fx-rechner { grid-row: 2; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; align-items: center; }
  .fx .fx-blatt .fx-vow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-blatt__schluss { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(2rem, 5vw, 4rem); align-items: center; }

  /* Bildwand mit drei Räumen: großes Bild + zwei hohe Kacheln über beide Reihen.
     Eigene Spalten, in drei von zwölf Spalten wären die hohen Kacheln zu schmal für die Hochformate. */
  .fx-wall.fx-wall--drei { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
  .fx-wall--drei .fx-tile { grid-column: auto; grid-row: 1 / 3; }

  /* FAQ: Links Überschrift und Gebiet, rechts die Fragen */
  .fx-faq { grid-template-rows: auto 1fr; }
  .fx-faq .fx-faq__head { position: static; grid-column: 1 / 6; grid-row: 1; }
  .fx-faq .fx-faq__list { grid-column: 7 / 13; grid-row: 1 / 3; }
  /* Das Gebiet bleibt neben den Antworten stehen, sonst liegt links eine leere Fläche */
  .fx-gebiet { grid-column: 1 / 6; grid-row: 2; position: sticky; top: 10rem; align-self: start; }

  /* Ansprechpartner: Die Karte überlappt das Porträt um eine Spalte, die Kerbe bleibt links unten frei */
  .fx-mensch__bild { grid-column: 1 / 6; grid-row: 1; }
  .fx-mensch__bild .fx-frame::after { display: block; }
  .fx-mensch__karte { grid-column: 5 / 13; grid-row: 1; align-self: center; margin: 0; }

  /* Kontakt: Links die Einladung, rechts die Karte */
  .fx-cta__links { grid-column: 1 / 8; }
  .fx-anruf { grid-column: 8 / 13; }
}

/* Die Linie der Achse wächst einmal ein, von Schritt zu Schritt. startseite.js setzt is-visible auf jedes .fx-step. */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .fx-anim .fx .fx-flow--achse .fx-step::before { transform: scaleX(0); transition: transform .9s var(--ease) .15s; }
  .fx-anim .fx .fx-flow--achse .fx-step:nth-child(2)::before { transition-delay: .5s; }
  .fx-anim .fx .fx-flow--achse .fx-step.is-visible::before { transform: scaleX(1); }
  /* Alle drei Schritte stehen in einer Zeile: Erst die Verzögerung lässt den Weg von links nach rechts laufen */
  .fx .fx-flow--achse .fx-step:nth-child(2) :is(.fx-step__ico, .fx-step__head, .fx-step__body p) { transition-delay: .4s; }
  .fx .fx-flow--achse .fx-step:nth-child(3) :is(.fx-step__ico, .fx-step__head, .fx-step__body p) { transition-delay: .8s; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-anim .fx .fx-flow--achse .fx-step:not(.is-visible) :is(.fx-step__ico, .fx-step__head, .fx-step__body p) { opacity: 1; }
  .fx-anim .fx-vow__item:not(.is-visible) .fx-mark { transform: none; }
  .fx-anim .fx-wall .fx-tile[data-clip] .fx-frame__in { clip-path: inset(0 0 0 0 round var(--radius-card)); }
  .fx-anim .fx-wall .fx-tile[data-clip] .fx-tile__cap { opacity: 1; }
}

@media (min-width: 1280px) {
  /* Hero: Die Karte ragt über die Naht. Label und Links der Leiste wären 842 px breit und liefen unter die Karte. */
  .fx-karte { grid-column: 7 / 13; margin-bottom: -8rem; }
  .fx-hero--karte .fx-hero__inner { padding-bottom: 0; }
  .fx-hero--karte ~ .fx-sub .fx-sub__lab { display: none; }
  .fx-hero--karte ~ .fx-sit { padding-top: calc(clamp(5rem, 10vw, 8.5rem) + 3rem); }

  /* Blatt in den Spalten 2 bis 11. Neben dem Festpreis-Satz ist erst hier genug Platz für den Kostenrechner. */
  .fx-blatt { grid-column: 2 / 12; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 3.5rem); }
  .fx-blatt > * { grid-column: 1 / -1; }
  .fx-blatt__kopf { grid-column: 1; grid-row: 1; align-self: center; }
  .fx-rechner { grid-column: 2; grid-row: 1; grid-template-columns: minmax(0, 1fr); margin-top: 0; }
}

/* =========================================================
   NACHLASSVERWERTUNG (body.nv), die bewusste Ausnahme vom Aufbau
   Wer hier landet, hat meist jemanden verloren: ein Bild statt drei, ein Brief statt Verkaufsblock,
   die Bilder tragen die Wärme, Bewegung ist langsam, der Preis steht nicht im Vordergrund.
   ========================================================= */
/* Bewegung: langsamer und kürzer im Weg, nichts steigt Wort für Wort auf */
.fx-anim .nv [data-fade] { transform: translateY(10px); transition: opacity 1.6s var(--ease), transform 1.6s var(--ease); }
.fx-anim .nv [data-fade].is-visible { transform: none; }

/* Hero: ein großes Bild statt drei Fenster */
.nv-fenster { grid-template-columns: minmax(0, 1fr); }
.nv-fenster .fx-fenster__bild img { object-position: 40% 50%; }

/* Brief von Marcel: Die Karte aus dem Ansprechpartner-Block wird zum Briefbogen */
.nv-brieftext { margin-top: 1.5rem; max-width: 36rem; display: grid; row-gap: 1rem; font-size: 1.15rem; line-height: 1.75; }
.nv-unterschrift { margin-top: 1.5rem; color: var(--teal-deep); font-size: 1.15rem; }
.nv-unterschrift strong { font-weight: 700; }

/* Der Weg: drei große Bilder statt einer Zeitachse */
.nv-weg__kopf { max-width: 40rem; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.nv-station { display: grid; row-gap: 1.5rem; }
.nv-station + .nv-station { margin-top: clamp(3rem, 8vw, 6.5rem); }
.nv-station .fx-frame__in { aspect-ratio: 4 / 5; }
.nv-station__titel { font-family: var(--font-heading); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; color: var(--teal-deep); margin: .75rem 0 .75rem; }
.nv-station__text { max-width: 30rem; font-size: 1.12rem; }

/* Worauf Sie sich verlassen können: leise, ohne Blatt und ohne dunkle Karte.
   Die Wohnungsabnahme der Haushaltsauflösung (.ha-abnahme) teilt diese Form: Ihre Reihe steht direkt über der FAQ und bricht deren Spalten auf. */
.nv-zusagen__liste, .ha-abnahme__liste { display: grid; column-gap: var(--col-gap); margin-top: clamp(2rem, 4vw, 3rem); }
.nv-zusage, .ha-abnahme__punkt { padding-block: 1.25rem 1.5rem; border-top: 1px solid var(--line); }
.nv-zusage__titel, .ha-abnahme__titel { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; color: var(--teal-deep); margin-bottom: .3rem; }
.nv-zusagen__rechner { margin-top: 1rem; }
.nv-zusagen__rechner a {
  font-weight: 600; color: var(--teal-primary);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;
  text-decoration-color: var(--teal-line); transition: text-decoration-color .4s var(--ease);
}
.nv-zusagen__rechner a:hover { text-decoration-color: currentColor; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes nv-bild { from { transform: scale(1.04); } to { transform: none; } }
  .fx-anim .nv-fenster .fx-fenster__bild img { animation: nv-bild 3.2s var(--ease) both; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-anim .nv [data-fade] { transform: none; }
}

@media (min-width: 900px) {
  /* Die Karte liegt links auf der Wand, das Band an den Briefen bleibt frei */
  .nv .fx-karte { grid-column: 1 / 8; }
  .nv-station { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
  .nv-station__bild { grid-column: 1 / 7; }
  .nv-station__wort { grid-column: 8 / 13; }
  .nv-station:nth-child(even) .nv-station__bild { grid-column: 7 / 13; grid-row: 1; }
  .nv-station:nth-child(even) .nv-station__wort { grid-column: 1 / 6; grid-row: 1; }
  .nv-zusagen__liste, .ha-abnahme__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  /* Die Karte ragt über die Naht, der Brief hält Abstand */
  .nv .fx-karte { grid-column: 1 / 7; }
  .fx .nv-brief { padding-top: calc(clamp(4.5rem, 9vw, 8rem) + 8rem); }
}

/* =========================================================
   ENTRÜMPELUNG (en-): ENTSORGUNG MIT FOTO
   Das Foto trägt den Abschnitt und zeigt die Sortierung, von der der Text spricht.
   Handy: Kopf, Foto, Zeilen. Das Foto bleibt dort quer, damit es die Zeilen nicht wegdrückt. Der Ausschnitt hält Hände und Platte.
   Ab 900 px links Kopf und Zeilen, rechts das volle Hochformat, gegenläufig zum Porträt im nächsten Abschnitt.
   Ist der Text länger als das Foto, läuft das Foto mit. Ist das Foto länger, schließen die Zeilen mit seiner Unterkante ab.
   ========================================================= */
.en-entsorgung { row-gap: 2rem; }
.en-entsorgung__bild .fx-frame__in { aspect-ratio: 5 / 4; }
/* Nur Ton: Das kräftige Blau der Jacke soll neben den ruhigeren Fotos der Bildwand nicht herausstechen */
.en-entsorgung__bild img { position: absolute; inset: 0; object-position: 50% 56%; filter: saturate(.85); }
.en-entsorgung .fx-lagen { margin-top: 0; }
.en-entsorgung .fx-lage:last-child { padding-bottom: 0; }

@media (min-width: 900px) {
  .en-entsorgung { grid-template-rows: auto 1fr; }
  .en-entsorgung__kopf, .en-entsorgung__liste { grid-column: 1 / 7; }
  .en-entsorgung__liste { align-self: end; }
  .en-entsorgung__bild { grid-column: 8 / 13; grid-row: 1 / 3; align-self: start; position: sticky; top: 10rem; }
  .en-entsorgung__bild .fx-frame__in { aspect-ratio: 3 / 4; }
  .en-entsorgung__bild img { object-position: 50% 50%; }
}