/*
  FKK Objektservice — Redesign V2 (CR-2026-0074), Staging-only.

  Baut auf main.css/visuals.css auf (Tokens, Reset, Buttons, Formulare,
  Fokus-Ringe, Reduced-Motion — alles dort bleibt unveraendert und aktiv).
  Diese Datei ersetzt ausschliesslich die vorherige editorial.css
  (CR-2026-0067) als rein visuelle Kompositions-Ebene fuer Homepage und
  (nach Freigabe) die sechs Unterseiten. Keine neue Farbpalette — die
  Tokens aus main.css/:root (CR-2026-0069, vom Owner bestaetigt) werden
  unveraendert weiterverwendet.

  Bewusst NICHT von CR-2026-0067/0069 uebernommen: die Grid-Struktur der
  Services, die Hero-Bildkarte mit versetztem Farbblock, die Kartenreihen-
  Motion. Neue Komposition je Sektion, s. reports/website/
  redesign-v2-staging-2026-09-29/REPORT.md fuer die Begruendung je
  Abschnitt.
*/

/* ==========================================================================
   Hero — asymmetrische Ueberlappung statt gerahmter Bildkarte
   ========================================================================== */
.hero--editorial .hero__inner {
	grid-template-columns: 1fr;
}
@media (min-width: 960px) {
	.hero--editorial .hero__inner {
		grid-template-columns: 1.35fr 1fr;
		gap: 0;
		align-items: stretch;
		min-height: 640px;
	}
	.hero--editorial .hero__text {
		position: relative;
		z-index: 2;
		padding: clamp(56px, 9vw, 96px) clamp(28px, 4vw, 56px) clamp(56px, 9vw, 96px) 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.hero--editorial .hero__media {
		margin: 0 calc(-1 * clamp(24px, 4vw, 56px)) 0 -18vw;
	}
}
@media (min-width: 1180px) {
	.hero--editorial .hero__media { margin-left: -22vw; }
}

.hero--editorial .hero__media { align-self: stretch; }
.hero--editorial .hero__media-frame {
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
	outline: none;
}
@media (max-width: 959px) {
	.hero--editorial .hero__media-frame { aspect-ratio: 4/5; border-radius: var(--radius-lg); }
}
/* Der main.css-Farbblock hinter dem Bild passt nicht zur neuen,
   ueberlappenden Komposition -- hier bewusst deaktiviert. */
.hero--editorial .hero__media::before { content: none; }
.hero--editorial .hero__media-frame::after {
	background: linear-gradient(100deg, rgba(8,17,25,0.62) 0%, rgba(8,17,25,0.05) 42%, transparent 70%);
}
@media (max-width: 959px) {
	.hero--editorial .hero__media-frame::after {
		background: linear-gradient(0deg, rgba(8,17,25,0.55) 0%, transparent 42%);
	}
}

.hero--editorial .kicker { margin-bottom: 18px; }
.hero--editorial h1 { max-width: 13ch; }
.hero--editorial .hero__local { color: var(--accent-2); }

.hero--editorial .trust-strip {
	display: flex; flex-wrap: wrap; gap: 10px 0; margin-top: 34px; padding-top: 22px;
	border-top: 1px solid rgba(255,255,255,0.14); list-style: none;
}
.hero--editorial .trust-strip li {
	display: flex; gap: 8px; align-items: center; font-size: 0.86rem; color: #cfe3e2;
	padding: 0 18px; border-right: 1px solid rgba(255,255,255,0.16);
}
.hero--editorial .trust-strip li:last-child { border-right: none; }
.hero--editorial .trust-strip li:first-child { padding-left: 0; }
@media (max-width: 680px) {
	/* Inline-Trenner vertragen sich nicht mit Umbruch auf schmalen Screens
	   -- hier zurueck zu gestapelten Zeilen ohne Trennlinie. */
	.hero--editorial .trust-strip { flex-direction: column; gap: 10px; }
	.hero--editorial .trust-strip li { border-right: none; padding: 0; }
}

.hero--editorial .hero__badge {
	left: auto; right: 24px; bottom: 24px; top: auto;
	background: var(--paper-raised);
}
@media (max-width: 959px) {
	.hero--editorial .hero__badge { left: 8px; right: auto; bottom: -14px; }
}

/* Mask-Reveal beim Laden: Bild und Text schieben/blenden sich einmalig
   ein, sobald redesign-v2-motion.js die Klasse "motion-ready" auf <html>
   setzt (nur wenn IntersectionObserver verfuegbar UND kein
   Reduced-Motion) -- identisches Prinzip wie main.css's
   "html.js-reveal [data-reveal]": kein JS/JS-Fehler/Reduced-Motion ->
   Inhalt bleibt immer sofort sichtbar, nie dauerhaft versteckt. */
html.motion-ready .hero--editorial:not(.is-revealed) .hero__media {
	clip-path: inset(0 0 0 100%);
}
html.motion-ready .hero--editorial .hero__media { transition: clip-path 900ms var(--ease); }
html.motion-ready .hero--editorial:not(.is-revealed) .hero__text > * {
	opacity: 0; transform: translateY(16px);
}
html.motion-ready .hero--editorial .hero__text > * {
	transition: opacity 700ms var(--ease), transform 700ms var(--ease);
	transition-delay: calc(var(--i, 0) * 90ms + 200ms);
}

/* ==========================================================================
   Stat band — Kennzahlenleiste statt Kachel-Vierergruppe
   ========================================================================== */
.home-facts { background: var(--ink); }
.home-facts .stat-band { border-top: 1px solid rgba(255,255,255,0.14); padding-top: clamp(22px, 4vw, 30px); }
@media (min-width: 700px) {
	.home-facts .stat-band__item { border-left-color: rgba(255,255,255,0.14); }
}
.home-facts .stat-band__item strong { color: var(--accent-warm); font-size: clamp(1.6rem, 2vw, 2.1rem); }
.home-facts .stat-band__item span { color: #b9c8c7; }

/* ==========================================================================
   Leistungen — sticky Intro-Spalte + alternierende Bild/Text-Reihen
   ========================================================================== */
.home-services__grid { display: block; }
@media (min-width: 960px) {
	.home-services__grid { display: grid; grid-template-columns: 0.85fr 1.6fr; gap: 64px; align-items: start; }
	.home-services__intro { position: sticky; top: clamp(96px, 12vh, 160px); }
}
.home-services__intro .lead { margin-top: 14px; }
.home-services__b2b { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line-soft); }

.home-services__rows { display: flex; flex-direction: column; gap: clamp(56px, 8vw, 96px); margin-top: clamp(40px, 6vw, 0px); }
.service-row { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 700px) {
	.service-row { grid-template-columns: 1.1fr 1fr; gap: 44px; }
	.service-row--reverse .service-row__media { order: 2; }
	.service-row--reverse .service-row__body { order: 1; }
}
.service-row__media { position: relative; }
.service-row__frame {
	aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden;
	outline: 1px solid var(--line-soft); outline-offset: -1px;
}
.service-row__frame img { width: 100%; height: 100%; object-fit: cover; }
.service-row__index {
	position: absolute; left: 14px; top: 10px; z-index: 1; font-family: var(--font-display);
	font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 600; line-height: 1;
	color: rgba(255,255,255,0.92); text-shadow: 0 4px 20px rgba(8,17,25,0.55);
	pointer-events: none; user-select: none;
}
.service-row__body h3 { margin-top: 0; }
.service-row__body p { color: var(--muted); }

/* Mask-Reveal je Reihe beim Einscrollen (nur mit html.motion-ready, s.o.). */
html.motion-ready [data-motion-reveal="mask-row"] .service-row__frame { transition: clip-path 760ms var(--ease); }
html.motion-ready [data-motion-reveal="mask-row"]:not(.is-revealed) .service-row__frame { clip-path: inset(0 100% 0 0); }
html.motion-ready [data-motion-reveal="mask-row"].service-row--reverse:not(.is-revealed) .service-row__frame { clip-path: inset(0 0 0 100%); }
html.motion-ready [data-motion-reveal="mask-row"] .service-row__body { transition: opacity 620ms var(--ease) 120ms, transform 620ms var(--ease) 120ms; }
html.motion-ready [data-motion-reveal="mask-row"]:not(.is-revealed) .service-row__body { opacity: 0; transform: translateY(18px); }

/* ==========================================================================
   Google-Bewertungen — grosse redaktionelle Aussage statt Zweispalter
   ========================================================================== */
.home-reviews { background: var(--paper-muted); }
.home-reviews__inner {
	display: grid; grid-template-columns: 1fr; gap: 32px; align-items: end;
}
@media (min-width: 780px) {
	.home-reviews__inner { grid-template-columns: 1.3fr 1fr; gap: 40px; }
}
.home-reviews h2 { font-size: clamp(2rem, 3vw, 2.9rem); }
.review-summary {
	background: var(--paper-raised); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 36px);
	box-shadow: var(--shadow); text-align: center;
}
.review-summary__score { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 0; }
.review-summary__score strong { font-family: var(--font-display); font-size: 3.2rem; color: var(--ink); line-height: 1; }
.review-summary__score span { color: var(--muted); }
.review-summary__stars { color: var(--accent-warm); letter-spacing: 0.14em; font-size: 1.2rem; margin: 10px 0; }

html.motion-ready [data-motion-reveal="mask-fade"] { transition: opacity 640ms var(--ease), transform 640ms var(--ease); }
html.motion-ready [data-motion-reveal="mask-fade"]:not(.is-revealed) { opacity: 0; transform: translateY(20px); }

/* ==========================================================================
   Team / Ueber uns — Bild-Parallax + Pull-Quote
   ========================================================================== */
.home-team .two-col { align-items: stretch; }
.home-team__text { display: flex; flex-direction: column; justify-content: center; }
.home-team__pull {
	font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 2vw, 1.7rem);
	color: #fff; max-width: 16ch; margin: 4px 0 22px; line-height: 1.3;
}
.home-team__media { overflow: hidden; border-radius: var(--radius-lg); }
.home-team__media .image-frame { border-radius: 0; box-shadow: none; outline: none; height: 100%; }
.home-team__media .image-frame img {
	transform: translateY(var(--parallax-y, 0px)) scale(1.12);
	will-change: transform;
}
@media (prefers-reduced-motion: reduce), (max-width: 959px) {
	.home-team__media .image-frame img { transform: none; }
}

/* ==========================================================================
   Einsatzgebiet — typografische Liste statt Chip-Raster
   ========================================================================== */
.area-list {
	list-style: none; padding: 0; margin: clamp(28px, 4vw, 40px) 0 0; display: flex; flex-wrap: wrap;
	justify-content: flex-start; gap: 0; font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.5rem);
}
/* Nur zentriert, wenn die umgebende Sektion selbst zentriert ist (genau
   main.css's bestehendes .section--center .area-chips-Muster) -- auf den
   linksbuendigen Unterseiten-Sektionen bleibt die Liste linksbuendig,
   damit sie nicht zwischen linksbuendigem Kicker/H2 und Folgetext
   "schwimmt". */
.section--center .area-list { justify-content: center; }
.area-list li {
	padding: 8px 20px; color: var(--ink); position: relative;
}
.area-list li::after {
	content: "\00b7"; position: absolute; right: -3px; top: 50%; transform: translateY(-50%);
	color: var(--line); font-size: 1.4em;
}
.area-list li:last-child::after { content: none; }
.area-list li.is-base { color: var(--accent); font-weight: 650; }

html.motion-ready [data-motion-reveal="stagger"] li {
	transition: opacity 480ms var(--ease), transform 480ms var(--ease);
	transition-delay: calc(var(--i, 0) * 45ms);
}
html.motion-ready [data-motion-reveal="stagger"]:not(.is-revealed) li { opacity: 0; transform: translateY(10px); }

/* ==========================================================================
   Kontakt-Abschluss — grossformatiges Closing statt Zweispalter
   ========================================================================== */
.home-contact { background: var(--ink); }
.home-contact__inner {
	display: grid; grid-template-columns: 1fr; gap: 28px;
}
@media (min-width: 700px) {
	.home-contact__inner { grid-template-columns: 1.4fr 1fr; align-items: end; gap: 40px; }
}
.home-contact h2 { font-size: clamp(2.1rem, 4vw, 3.2rem); font-style: italic; color: #fff; }
.home-contact p { color: #c9d7d8; }
/* .btn--dark ist fuer helle Sektionen gedacht (dunkler Button auf hellem
   Grund) -- auf dem neuen Navy-Closing waere er unsichtbar. main.css's
   eigenes --btn-bg/--btn-fg-Custom-Property-System ist genau fuer so
   einen Fall gedacht: Farbe hier ueberschreiben, Button-Mechanik/Markup
   unveraendert lassen. */
.home-contact .btn--dark { --btn-bg: var(--accent-warm); --btn-fg: #fff; margin-top: 4px; }

/* ==========================================================================
   Unterseiten — Designsystem konsistent uebertragen (CR-2026-0074)
   ========================================================================== */
/* Hero ohne Foto (Unterseiten haben keins) -- gleiche restrained
   Mask-Fade-Sprache wie Reviews/Kontakt auf der Startseite, kein neues
   Bild/keine neue Komposition noetig. */
html.motion-ready .hero--page .wrap { transition: opacity 640ms var(--ease), transform 640ms var(--ease); }
html.motion-ready .hero--page:not(.is-revealed) .wrap { opacity: 0; transform: translateY(16px); }

/* Einsatzgebiet-Liste auf allen Unterseiten wie auf der Startseite:
   dieselbe .area-list-Komponente statt des alten Chip-Rasters (gleicher
   Inhalt/dieselbe Reihenfolge, nur die dekorativen Pin-Icons entfallen —
   entspricht der bereits auf der Startseite vollzogenen Aenderung).
   Ausrichtung s. .section--center .area-list oben bei der Hero-Sektion. */

/* Ablauf-/Prozess- und FAQ-Bloecke nutzen bereits main.js's bestehendes
   [data-reveal]-System (gleiche dezente Eintritts-Animation) -- keine
   zweite, konkurrierende Motion-Schicht noetig oder hinzugefuegt. */

/* --------------------------------------------------------------------
   UX-Korrektur (Owner, 2026-09-29): Anchor-Sprung zum bestehenden
   Anfrageformular respektiert den Sticky-Header. Der primaere Hero-CTA
   auf allen vier Formular-Seiten (Gartenservice/Umzug/Entruempelung/
   Firmenkunden) verlinkt bereits auf #anfrage -- vorher landete die
   Formular-Ueberschrift ohne Offset hinter dem position:sticky-Header
   versteckt. Reiner Scroll-Offset- und Fokus-Fix: kein neues Formular,
   keine Formularlogik, keine URL-/Tracking-Aenderung.
   -------------------------------------------------------------------- */
#anfrage { scroll-margin-top: 96px; }
/* tabindex="-1" macht die Sektion fuer den Anchor-Sprung fokussierbar
   (Screenreader/Tastatur landen dort bewusst hoerbar), soll aber bei
   Maus-Klick auf den CTA keinen Fokusring um die ganze Sektion zeigen --
   :focus-visible uebernimmt nur den echten Tastatur-/AT-Fall. */
#anfrage:focus { outline: none; }
#anfrage:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ==========================================================================
   Reduced Motion — vollstaendige, eigene Abdeckung (ersetzt editorial.css)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html.motion-ready .hero--editorial .hero__media,
	html.motion-ready .hero--editorial .hero__text > *,
	html.motion-ready .hero--page .wrap,
	html.motion-ready [data-motion-reveal] .service-row__frame,
	html.motion-ready [data-motion-reveal] .service-row__body,
	html.motion-ready [data-motion-reveal="mask-fade"],
	html.motion-ready [data-motion-reveal="stagger"] li {
		opacity: 1; transform: none; clip-path: none; transition: none;
	}
}

/* Eigener, konsistenter Fokusring (ersetzt editorial.css's globale
   Umdefinition — main.css's komponentenspezifische Ringe bleiben
   unberuehrt und aktiv). */
.service-row a:focus-visible,
.area-list li:focus-visible {
	outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px;
}