/* KW Ad-Hero: Google-Ads-Landingpage-Hero (3 Varianten: direct/award-first/werkstatt).
 * Selbsttragend seit #1364/#1365/#1366-Sammelpunkt (Foreman 17.08.): die Groessen-
 * regeln lebten bisher NUR in themes/koenigswieser-2026/css/ads-landing.css, das
 * ausschliesslich vom alten template-ads-landing.php geladen wird -- page-lp.php
 * (das tatsaechlich genutzte LP-Template, #1362) laedt diese Datei nie. Ergebnis auf
 * allen 3 LPs (5150/5155/5162): das Hintergrundbild rendert in nativer Pixelgroesse,
 * H1/Unterzeile/Button liegen auf Desktop ~1400px unter der Falz. 1:1 aus
 * ads-landing.css uebernommen (gleiche Selektoren, render.php aendert sich nicht),
 * keine Wertaenderung. ads-landing.css bleibt unangetastet fuer den Fall, dass
 * template-ads-landing.php wieder aktiv wird (0 Seiten nutzen es aktuell laut
 * DB-Abfrage 17.08., siehe Bau-Report).
 */
.kw-ad-hero { position: relative; background: var(--color-primary-dark, #7a1c33); color: #fff; overflow: hidden; min-height: 580px; }
.kw-ad-hero__bg { position: absolute; inset: 0; }
.kw-ad-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.65; }
.kw-ad-hero__overlay { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(122,28,51,0.92), rgba(122,28,51,0.75) 60%, rgba(90,20,38,0.65)); }
.kw-ad-hero__inner { position: relative; max-width: var(--container-max, 1280px); margin: 0 auto; padding: 48px clamp(1rem, 4vw, 2rem); display: flex; flex-direction: column; justify-content: center; min-height: 580px; }
.kw-ad-hero__content { max-width: 36rem; }
.kw-ad-hero__eyebrow { display: inline-flex; align-items: center; padding: 6px 14px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); border-radius: 100px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.kw-ad-hero__title { font-size: clamp(32px, 6vw, 60px); font-weight: 700; line-height: 1.05; margin: 0 0 16px; letter-spacing: -1px; text-transform: uppercase; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,0.5); overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
.kw-ad-hero__sub { font-size: 18px; line-height: 1.5; color: #fff; margin: 0 0 16px; text-shadow: 0 1px 8px rgba(0,0,0,0.4); }
.kw-ad-hero__bullets { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 10px; }
.kw-ad-hero__bullets li { padding-left: 28px; position: relative; color: #fff; }
.kw-ad-hero__bullets li::before { content: "✓"; position: absolute; left: 0; color: var(--color-accent-light, #e2d2bb); font-weight: 700; font-size: 18px; }
.kw-ad-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.kw-ad-hero__trust { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-accent-light, #e2d2bb); }

/* CTA-Kontrast (#1364 Foreman): sitewide .kw-btn-primary ist bordeaux/weiss --
   auf dem bordeaux Hero-Hintergrund/Overlay (~#752433) faellt die bordeaux
   Buttonflaeche (#97233F) praktisch mit dem Hintergrund zusammen (Kontrast
   ~1,2:1, Messung 18.08.). Nur innerhalb .kw-ad-hero umgedreht: weisse Flaeche,
   dunkler Text -- Kontrast >7:1 gegen Weiss UND gegen den Hero-Hintergrund.
   Sitewide .kw-btn-primary (components.css/kw-blocks.css) bleibt unangetastet. */
.kw-ad-hero .kw-btn-primary {
	background: #fff;
	color: var(--color-primary-dark, #7a1c33);
	box-shadow: 0 4px 16px rgba(0,0,0,0.28);
}
.kw-ad-hero .kw-btn-primary:hover {
	background: var(--color-accent-light, #e2d2bb);
	color: var(--color-primary-dark, #7a1c33);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.32);
}

/* Scroll-Hinweis (#1364 Foreman, Optik #1382 3.7 -- 1:1 aus reports/issue-1382/
   designer-lieferung-2-uebergabe/scroll-hinweis.html uebernommen, nur Selektoren
   auf .kw-ad-hero__scroll-hint-* umbenannt): reines Symbol, kein Textstring --
   Name kommt nur als aria-label (kw_t, DE-Rueckfall) fuer Screenreader. Absolut
   positioniert innerhalb .kw-ad-hero (bereits position:relative+overflow:
   hidden weiter oben) -- CLS-neutral, kein Einfluss auf Dokumentfluss/Hoehe.
   Klick scrollt zur naechsten Sektion (render.php-Inline-Script, unveraendert).
   Ad-Hero-Hintergrund ist immer der dunkle Bordeaux-Overlay-Fall -- deshalb nur
   die helle Vorlagen-Variante uebernommen, kein dunkles Gegenstueck noetig. */
.kw-ad-hero__scroll-hint {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	color: rgba(255,255,255,0.85);
	cursor: pointer;
	z-index: 2;
}
.kw-ad-hero__scroll-hint-maus {
	width: 24px;
	height: 38px;
	border: 2px solid currentColor;
	border-radius: 13px;
	display: flex;
	justify-content: center;
	padding-top: 7px;
	box-sizing: border-box;
	backdrop-filter: blur(4px);
}
.kw-ad-hero__scroll-hint-punkt {
	width: 4px;
	height: 8px;
	border-radius: 2px;
	background: currentColor;
	animation: kw-ad-hero-scroll-punkt 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.kw-ad-hero__scroll-hint-chevron {
	font-size: 12px;
	line-height: 1;
	animation: kw-ad-hero-scroll-chevron 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.kw-ad-hero__scroll-hint:hover .kw-ad-hero__scroll-hint-maus,
.kw-ad-hero__scroll-hint:focus-visible .kw-ad-hero__scroll-hint-maus {
	background: rgba(255,255,255,0.12);
}
@keyframes kw-ad-hero-scroll-punkt {
	0%, 100% { transform: translateY(0); opacity: 1; }
	60%      { transform: translateY(10px); opacity: 0.2; }
	80%      { transform: translateY(0); opacity: 0; }
}
@keyframes kw-ad-hero-scroll-chevron {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
	.kw-ad-hero__scroll-hint-punkt,
	.kw-ad-hero__scroll-hint-chevron { animation: none; }
}

/* Variante --award-first: Award-Badge */
.kw-ad-hero--award-first .kw-ad-hero__inner { display: grid; gap: 32px; align-items: center; }
.kw-ad-hero__award-badge { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; background: #fff; color: var(--color-primary, #97233f); border-radius: 50%; width: 180px; height: 180px; box-shadow: 0 16px 48px rgba(0,0,0,0.25); transform: rotate(-4deg); margin-bottom: 16px; }
.kw-ad-hero__award-num { font-size: 56px; font-weight: 700; line-height: 0.9; color: var(--color-primary, #97233f); }
.kw-ad-hero__award-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; line-height: 1.3; margin-top: 4px; color: #1a1a1a; }

/* Variante --werkstatt: Signature */
.kw-ad-hero--werkstatt .kw-ad-hero__bg img { object-position: 65% center; opacity: 0.7; }
.kw-ad-hero__signature { display: flex; align-items: center; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.2); margin-top: 16px; }
.kw-ad-hero__signature-text { font-style: italic; font-size: 14px; color: var(--color-accent-light, #e2d2bb); margin: 0; line-height: 1.4; }
.kw-ad-hero__signature-text strong { font-style: normal; color: #fff; display: block; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 2px; }

@media (min-width: 1024px) {
	/* Hoehe leicht reduziert (#1364 Foreman, Plan-Punkt 1): vorher min-height
	   720px + Padding 96px liess auf allen 3 LPs 0px des Folgeabschnitts sichtbar
	   (gemessen 1280x800: Hero real 912px durch Content, Folgeabschnitt startet
	   erst bei 982px -- weit unter dem 800px-Fold). Kleineres Padding/min-height
	   schneidet den Folgeabschnitt bei hohen Desktop-Viewports leicht an, ohne
	   Titel/Bullet-Groessen anzufassen (Wortlaut/Typo unveraendert). */
	.kw-ad-hero { min-height: 620px; }
	.kw-ad-hero__inner { min-height: 620px; padding: 56px clamp(1rem, 4vw, 2rem); }
	.kw-ad-hero__content { max-width: 40rem; }
	.kw-ad-hero--award-first .kw-ad-hero__inner { grid-template-columns: 1fr 0.6fr; }
	.kw-ad-hero__award-badge { width: 260px; height: 260px; padding: 32px; justify-self: end; align-self: center; transform: rotate(-6deg); }
	.kw-ad-hero__award-num { font-size: 88px; }
	.kw-ad-hero__award-label { font-size: 12px; }
}