/* ==========================================================================
   Colorativ Hörner – Startseite, Entwurf 2 (Vorschau)

   Liegt ueber apple.css. Aendert nur, was sich aendern soll; Navigation,
   Fusszeile und alle Unterseiten bleiben unberuehrt. Traeger ist die
   Body-Klasse .ch-v2 – ohne sie tut diese Datei gar nichts.

   Reihenfolge der Selektoren: .ch-doc.ch-v2 (0,3,0) schlaegt .ch-doc (0,2,0)
   aus apple.css unabhaengig davon, welche Datei zuerst geladen wird.
   ========================================================================== */

.ch-v2 {
	/* ---- Bewegung ----------------------------------------------------
	   Vorher lief alles ueber eine einzige Dauer von 0,4 s – auch das
	   Antippen eines Knopfes. Das fuehlt sich traege an, weil genau der
	   Moment gedehnt wird, in dem der Nutzer auf eine Antwort wartet.
	   Jetzt drei Stufen: Ruecmeldung sofort, Bewegung kurz, Einblenden ruhig. */
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

	--dur-press: 110ms;
	--dur-hover: 160ms;
	--dur-move: 220ms;
	--dur-reveal: 420ms;

	/* Startgroesse der Hero-Karte. Steht bewusst hier und nicht doppelt in
	   CSS und JavaScript – apple-v2.js liest genau diesen Wert aus. Vorher
	   sagte das Stylesheet 0.93 und das Skript 0.86; sichtbar war ein
	   kleiner Sprung beim Laden. */
	--hero-start: 0.88;
}

@media (min-width: 700px) {
	.ch-v2 {
		--hero-start: 0.78;
	}
}

/* --------------------------------------------------------------------------
   Typografie

   Auf dem Handy war die H1 auf 24,8 px festgenagelt (die untere Grenze des
   clamp-Werts) und der Untertitel auf 14,7 px. Fuer eine Zielgruppe bis 80
   ist beides zu klein, und die Ueberschrift wirkte neben dem grossen Bild
   wie eine Bildunterschrift statt wie die Ansage der Seite.
   -------------------------------------------------------------------------- */

.ch-doc.ch-v2 .ch-hero-copy h1 {
	font-size: clamp(2.1rem, 7.4vw, 4.6rem);
	line-height: 1.04;
	letter-spacing: -0.028em;
	margin: 0 0 14px;
}

.ch-doc.ch-v2 .ch-hero-copy .ch-hero-sub {
	font-size: clamp(1.02rem, 1.85vw, 1.32rem);
	line-height: 1.5;
	margin: 0 auto 24px;
	max-width: 34em;
}

/* Die Dachzeile brach auf dem Handy auf zwei Zeilen um – der Sperrsatz von
   0,14 em macht sie breiter, als sie aussieht. */
.ch-doc.ch-v2 .ch-hero-copy .ch-eyebrow {
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	margin-bottom: 12px;
}

@media (min-width: 700px) {
	.ch-doc.ch-v2 .ch-hero-copy .ch-eyebrow {
		font-size: 0.8rem;
		letter-spacing: 0.14em;
	}
}

.ch-doc.ch-v2 .ch-card p,
.ch-doc.ch-v2 .ch-step p {
	font-size: 1rem;
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* Auf dem Handy war der Scrollweg 155 vh: rund 450 px Scrollen, in denen
   sich fast nichts tut, weil die Karte dort ohnehin fast bildschirmfuellend
   startet. Kuerzer heisst: der Inhalt kommt frueher. */
.ch-doc.ch-v2 .ch-hero {
	height: 132vh;
}

@media (min-width: 900px) {
	.ch-doc.ch-v2 .ch-hero {
		height: 168vh;
	}
}

.ch-js .ch-doc.ch-v2 .ch-hero-media {
	transform: scale(var(--hero-start));
}

@media (min-width: 700px) {
	.ch-js .ch-doc.ch-v2 .ch-hero-media {
		transform: scale(var(--hero-start));
	}
}

/* Der Schleier lag gleichmaessig ueber dem ganzen Video und nahm ihm auch
   dort Licht, wo kein Text steht. Jetzt dunkelt er dort, wo die Schrift
   sitzt, und laesst die Raender frei. */
.ch-doc.ch-v2 .ch-hero-scrim {
	background:
		radial-gradient(120% 90% at 50% 55%, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.34) 55%, rgba(0, 0, 0, 0.18) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.42) 100%);
}

/* Der Scroll-Hinweis war ein Wort in Grossbuchstaben. Ein Pfeil, der sich
   ganz langsam hebt und senkt, sagt dasselbe ohne Text – und verschwindet
   weiterhin, sobald gescrollt wird. */
.ch-doc.ch-v2 .ch-hero-hint {
	display: flex;
	align-items: center;
	gap: 8px;
	bottom: 10px;
	font-size: 0.72rem;
}

.ch-doc.ch-v2 .ch-hero-hint::after {
	content: "";
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-1px) rotate(45deg);
	animation: ch-hint 2.4s var(--ease-in-out) infinite;
}

@keyframes ch-hint {
	0%,
	70%,
	100% {
		transform: translateY(-1px) rotate(45deg);
	}
	85% {
		transform: translateY(3px) rotate(45deg);
	}
}

/* --------------------------------------------------------------------------
   Knoepfe und Links

   Drei Aenderungen, alle aus demselben Grund: die Rueckmeldung kam zu spaet.
   1. Hover dauert 160 statt 400 ms.
   2. Es gibt jetzt ueberhaupt einen Druckzustand – auf dem Handy war das
      Antippen bisher voellig stumm.
   3. Hover-Effekte gelten nur noch fuer echte Zeigegeraete. Auf dem Handy
      loest eine Beruehrung sonst den Hover-Zustand aus, der dann klebt.
   -------------------------------------------------------------------------- */

.ch-doc.ch-v2 .ch-btn {
	transition:
		transform var(--dur-hover) var(--ease-out),
		background-color var(--dur-hover) var(--ease-out);
}

.ch-doc.ch-v2 .ch-btn:active {
	transform: scale(0.97);
	transition-duration: var(--dur-press);
}

@media (hover: hover) and (pointer: fine) {
	.ch-doc.ch-v2 .ch-btn-primary:hover,
	.ch-doc.ch-v2 .ch-btn-dark:hover,
	.ch-doc.ch-v2 .ch-btn-light:hover {
		transform: scale(1.02);
	}
}

@media not all and (hover: hover) {
	.ch-doc.ch-v2 .ch-btn-primary:hover,
	.ch-doc.ch-v2 .ch-btn-dark:hover,
	.ch-doc.ch-v2 .ch-btn-light:hover {
		transform: none;
	}
}

.ch-v2 .ch-nav-cta,
.ch-v2 .ch-nav-phone {
	transition: background-color var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}

.ch-v2 .ch-nav-cta:active,
.ch-v2 .ch-nav-phone:active {
	transform: scale(0.97);
	transition-duration: var(--dur-press);
}

/* --------------------------------------------------------------------------
   Navigation: Trennkante erst, wenn etwas darunter liegt

   Ganz oben schwebt die Leiste ueber dem hellen Grund und braucht keine
   Kante. Sobald Inhalt darunterlaeuft, schon – sonst schwimmen Schrift und
   Bild ineinander. Umgeschaltet wird per Klasse, animiert wird nur opacity.
   -------------------------------------------------------------------------- */

.ch-v2 .ch-nav::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: rgba(255, 255, 255, 0.14);
	opacity: 0;
	transition: opacity var(--dur-move) linear;
	pointer-events: none;
}

.ch-v2 .ch-nav.is-scrolled::after {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Vertrauensband – neu

   Direkt unter dem Hero. Wer einen Handwerker sucht, entscheidet in den
   ersten Sekunden, ob er weiterliest. Die vier Punkte standen schon einmal
   auf der Seite (die alte Avada-Startseite hatte sie als Kacheln 01–04) und
   sind hier nur wieder sichtbar gemacht – ohne neue Versprechen.
   -------------------------------------------------------------------------- */

.ch-doc.ch-v2 .ch-trust {
	background: var(--bg);
	border-bottom: 1px solid rgba(29, 29, 31, 0.08);
	padding: 34px 0;
}

.ch-doc.ch-v2 .ch-trust-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px 32px;
}

@media (min-width: 560px) {
	.ch-doc.ch-v2 .ch-trust-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 40px;
	}
}

@media (min-width: 960px) {
	.ch-doc.ch-v2 .ch-trust-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 32px;
	}
}

.ch-doc.ch-v2 .ch-trust-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 10px 0;
}

.ch-doc.ch-v2 .ch-trust-item svg {
	flex: 0 0 auto;
	width: 21px;
	height: 21px;
	margin-top: 2px;
	fill: none;
	stroke: var(--accent-strong);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ch-doc.ch-v2 .ch-trust-item b {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 2px;
}

.ch-doc.ch-v2 .ch-trust-item span {
	display: block;
	font-size: 0.94rem;
	line-height: 1.45;
	color: var(--muted);
}

/* --------------------------------------------------------------------------
   Ablauf – neu

   Die haeufigste unausgesprochene Frage vor einem Anruf ist "was passiert
   dann?". Drei Schritte, keine Bilder, keine neuen Zusagen: der Text
   wiederholt nur, was die Seite ohnehin verspricht (kostenlos, unverbindlich,
   ehrliche Beratung).
   -------------------------------------------------------------------------- */

.ch-doc.ch-v2 .ch-steps {
	display: grid;
	gap: 14px;
	counter-reset: schritt;
}

@media (min-width: 760px) {
	.ch-doc.ch-v2 .ch-steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 22px;
	}
}

.ch-doc.ch-v2 .ch-step {
	position: relative;
	background: var(--bg);
	border-radius: var(--radius);
	padding: 26px 24px 28px;
	box-shadow: 0 6px 24px rgba(29, 29, 31, 0.06);
}

.ch-doc.ch-v2 .ch-step::before {
	counter-increment: schritt;
	content: counter(schritt, decimal-leading-zero);
	display: block;
	margin-bottom: 12px;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--accent-strong);
	font-variant-numeric: tabular-nums;
}

.ch-doc.ch-v2 .ch-step h3 {
	font-size: 1.22rem;
	font-weight: 600;
	margin: 0 0 6px;
}

.ch-doc.ch-v2 .ch-step p {
	color: var(--muted);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Leistungskarten
   -------------------------------------------------------------------------- */

.ch-doc.ch-v2 .ch-card {
	transition:
		transform var(--dur-move) var(--ease-out),
		box-shadow var(--dur-move) var(--ease-out);
}

.ch-doc.ch-v2 .ch-card:active {
	transform: scale(0.985);
	transition-duration: var(--dur-press);
}

.ch-doc.ch-v2 .ch-card-img img {
	transition: transform 420ms var(--ease-out);
}

/* Der Pfeil ruecht beim Ueberfahren ein Stueck nach rechts – die Karte ist
   ein Link, und das ist der billigste Weg, das auch zu zeigen. */
.ch-doc.ch-v2 .ch-card-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ch-doc.ch-v2 .ch-card-more::after {
	content: "→";
	transition: transform var(--dur-move) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.ch-doc.ch-v2 .ch-card:hover {
		transform: translateY(-4px);
	}

	.ch-doc.ch-v2 .ch-card:hover .ch-card-more::after {
		transform: translateX(4px);
	}
}

@media not all and (hover: hover) {
	.ch-doc.ch-v2 .ch-card:hover {
		transform: none;
		box-shadow: 0 8px 30px rgba(29, 29, 31, 0.07);
	}

	.ch-doc.ch-v2 .ch-card:hover .ch-card-img img {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Vorher / Nachher

   Neu: ein Hinweis, dass man ziehen kann. Er verschwindet, sobald man es
   getan hat – ein Schild, das nach dem ersten Gebrauch nicht mehr noetig ist.
   -------------------------------------------------------------------------- */

.ch-doc.ch-v2 .ch-compare-hint {
	position: absolute;
	left: 50%;
	bottom: 14px;
	z-index: 5;
	transform: translateX(-50%);
	padding: 7px 14px;
	border-radius: 980px;
	background: rgba(0, 0, 0, 0.62);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	white-space: nowrap;
	pointer-events: none;
	transition: opacity var(--dur-move) linear;
}

.ch-doc.ch-v2 .ch-compare-stage.is-used .ch-compare-hint {
	opacity: 0;
}

/* Der Griff wuchs bisher nicht mit. Ein kurzer Druckzustand macht spuerbar,
   dass er angefasst ist. */
.ch-doc.ch-v2 .ch-compare-knob {
	transition: transform var(--dur-press) var(--ease-out);
}

.ch-doc.ch-v2 .ch-compare-stage:active .ch-compare-knob {
	transform: scale(1.08);
}

/* --------------------------------------------------------------------------
   Einsatzgebiet – neu
   -------------------------------------------------------------------------- */

.ch-doc.ch-v2 .ch-area {
	display: grid;
	gap: 26px;
	align-items: center;
}

@media (min-width: 860px) {
	.ch-doc.ch-v2 .ch-area {
		grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
		gap: 56px;
	}
}

.ch-doc.ch-v2 .ch-area-list {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ch-doc.ch-v2 .ch-area-list li {
	padding: 8px 15px;
	border-radius: 980px;
	background: rgba(29, 29, 31, 0.05);
	font-size: 0.94rem;
	font-weight: 500;
	color: var(--ink);
}

/* --------------------------------------------------------------------------
   Einblenden beim Scrollen

   Vorher blendete der ganze Kartenblock als ein Stueck ein: sobald seine
   Oberkante sichtbar wurde, liefen alle neun Karten los – auf dem Handy also
   auch die sechs, die noch weit unterhalb des Bildschirms standen. Jetzt
   bekommt jede Karte ihren eigenen Beobachter, und die Verzoegerung gilt nur
   noch innerhalb einer Reihe.
   -------------------------------------------------------------------------- */

.ch-doc.ch-v2 .ch-reveal,
.ch-doc.ch-v2 .ch-reveal-item {
	transition:
		opacity var(--dur-reveal) var(--ease-out),
		transform var(--dur-reveal) var(--ease-out);
}

.ch-js .ch-doc.ch-v2 .ch-reveal-item {
	opacity: 0;
	transform: translateY(16px);
}

.ch-js .ch-doc.ch-v2 .ch-reveal-item.is-in {
	opacity: 1;
	transform: none;
}

/* Nur die Position innerhalb der Reihe zaehlt, damit die letzte Karte nicht
   eine halbe Sekunde nach der ersten kommt. */
@media (min-width: 620px) {
	.ch-js .ch-doc.ch-v2 .ch-cards .ch-reveal-item:nth-child(2n) {
		transition-delay: 60ms;
	}
}

@media (min-width: 960px) {
	.ch-js .ch-doc.ch-v2 .ch-cards .ch-reveal-item:nth-child(3n + 2) {
		transition-delay: 60ms;
	}

	.ch-js .ch-doc.ch-v2 .ch-cards .ch-reveal-item:nth-child(3n) {
		transition-delay: 120ms;
	}
}

/* --------------------------------------------------------------------------
   Weniger Bewegung

   Nicht "keine Bewegung": Ein- und Ausblenden bleibt, weil es beim Verstehen
   hilft. Weg faellt alles, was die Position aendert.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ch-js .ch-doc.ch-v2 .ch-reveal-item {
		opacity: 1 !important;
		transform: none !important;
	}

	.ch-doc.ch-v2 .ch-hero-hint::after {
		animation: none;
	}

	.ch-doc.ch-v2 .ch-btn:active,
	.ch-doc.ch-v2 .ch-card:active,
	.ch-doc.ch-v2 .ch-compare-stage:active .ch-compare-knob {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Vorschau-Hinweis. Faellt mit der Vorschau weg.
   -------------------------------------------------------------------------- */

.ch-preview-note {
	position: fixed;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	z-index: 3000;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: calc(100vw - 24px);
	padding: 9px 16px;
	border-radius: 980px;
	background: rgba(29, 29, 31, 0.9);
	color: #fff;
	font: 600 0.82rem/1.3 var(--font);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.ch-preview-note {
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}
}

/* --------------------------------------------------------------------------
   Nachjustiert nach der Messung am Geraet
   -------------------------------------------------------------------------- */

/* 96 px Abstand oben und unten stammen aus einer Seite mit fuenf Abschnitten.
   Mit neun wird daraus auf dem Handy viel Leerlauf zwischen den Inhalten. */
.ch-doc.ch-v2 .ch-sec {
	padding: 74px 0;
}

@media (min-width: 900px) {
	.ch-doc.ch-v2 .ch-sec {
		padding: 112px 0;
	}
}

.ch-doc.ch-v2 .ch-head {
	margin-bottom: 40px;
}

/* Vier gestapelte Punkte ergaben auf dem Handy 436 px Vertrauensband – mehr
   als eine halbe Bildschirmhoehe, bevor der erste Inhalt kommt. Zwei Spalten
   schon ab 420 px (die allermeisten Handys sind 390–430 px breit). */
.ch-doc.ch-v2 .ch-trust-item {
	gap: 11px;
	padding: 7px 0;
}

@media (min-width: 420px) {
	.ch-doc.ch-v2 .ch-trust-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px 32px;
	}
}

@media (min-width: 960px) {
	.ch-doc.ch-v2 .ch-trust-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 32px;
	}
}

/* Der Vorschau-Hinweis brach auf drei Zeilen um. */
.ch-preview-note {
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
	font-size: 0.78rem;
}

/* Ein position:fixed-Element mit left:50% und ohne right bekommt als
   verfuegbare Breite nur die restlichen 50 % des Fensters – auf dem Handy
   also 188 px. Genau daran brach der Hinweis auf drei Zeilen um.
   width:max-content nimmt die Breite stattdessen vom Inhalt. */
.ch-preview-note {
	width: max-content;
	max-width: calc(100vw - 24px);
}