/* =====================================================================
   Projekte v2 — /projekte-v2/ (Template page-templates/projekte-v2.php)
   Renderer: inc/projekte-v2.php · Verhalten: js/projekte-v2.js

   Token bewusst auf dem Baustein (.pv2), nicht im :root (Elementor-Globals).
   Optik: dunkel; Farbe nur Ackermann-Cyan #00ABD7 + Grau/Schwarz.
   Tags, Buttons und Hero-Slider sind Nachbauten der Elementor-Vorlagen
   auf /projekte/ (Werte dort gemessen, 03.09.2026):
     Button  Manrope 17/17 700, #000, Rand rgba(126,126,126,.51), Radius 5,
             Padding 13/27/15/25, Glow; Hover cyan + Glow 11px + „hang"
     Tag     System 12/18 400, +.2px, Versalien, cyan auf #000, Radius 4
   Kit-CSS `.elementor-kit-7 a:hover` schlägt eigene Link-Regeln → alle
   Link-Regeln mit `.pv2 `-Präfix; reset.css färbt button:hover #cc3366 →
   eigene Knöpfe mit expliziten Zuständen.
   Breakpoints wie im Bestand: 767 / 1023 / 1199.
   ===================================================================== */

.pv2 {
	--c-canvas: #0B0C0E;
	--c-text: #FFFFFF;
	--c-text-2: #D8D8D8;
	--c-text-3: #A8A8A8;
	--c-cyan: #00ABD7;
	--c-line: rgba(255, 255, 255, 0.19);
	--c-line-soft: rgba(255, 255, 255, 0.08);
	--c-rand: rgba(126, 126, 126, 0.4);
	--f-display: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--t-ui: 300ms;
	--w-max: 1290px;
	--w-slider: 1140px;
	--gutter: 30px;
	--header-h: 157px;    /* Elementor-Header (9430) liegt über dem Hero, wie auf /projekte/ (margin-top -157px) */
	--hero-h: 494px;      /* /projekte/ hat 594 — hier 100 px weniger */
	--hero-overlap: -110px; /* negativ = Abstand: Slider beginnt 110px UNTER dem Hero (Daniel 03.09.: 100px tiefer als die 40px-Überlappung; 06.09.: +50 px, Kommunikator endet an der blauen Linie) */

	position: relative;
	isolation: isolate;
	background: var(--c-canvas);
	color: var(--c-text);
	font-family: var(--f-system);
	overflow: clip;
}

.pv2 *,
.pv2 *::before,
.pv2 *::after { box-sizing: border-box; }

.pv2 .sr-only {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------
   Hintergrund — Radialverläufe + Gitter (viewport-fest, unter allem)
   --------------------------------------------------------------------- */

.pv2__bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	background:
		radial-gradient(ellipse 90% 60% at 50% 110%, rgba(0, 171, 215, 0.10), transparent 60%),
		linear-gradient(180deg, #0B0C0E 0%, #121316 55%, #0B0C0E 100%);
}

.pv2__bg-glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(40px);
}

.pv2__bg-glow--a {
	width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
	left: -18vw; top: -22vw;
	background: radial-gradient(circle, rgba(0, 171, 215, 0.18) 0%, rgba(0, 171, 215, 0.05) 40%, transparent 68%);
}

.pv2__bg-glow--b {
	width: 60vw; height: 60vw; max-width: 780px; max-height: 780px;
	right: -20vw; top: 34vh;
	background: radial-gradient(circle, rgba(0, 171, 215, 0.12) 0%, rgba(0, 171, 215, 0.04) 45%, transparent 70%);
}

.pv2__bg-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 10%, transparent 75%);
	mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 10%, transparent 75%);
}

/* ---------------------------------------------------------------------
   Gemeinsame Bausteine
   --------------------------------------------------------------------- */


/* Standard-Button der Seite (Elementor-Vorlage, gemessen auf /projekte/) */
.pv2 .pv2-btn,
.pv2 .pv2-btn:visited {
	display: inline-block;
	padding: 13px 27px 15px 25px;
	border: 1px solid rgba(126, 126, 126, 0.51);
	border-radius: 5px;
	background: #000;
	color: #FFF;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 17px;
	line-height: 17px;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 0 10px rgba(107, 107, 107, 0.5);
	transition: all 0.4s;
}

.pv2 .pv2-btn:hover,
.pv2 .pv2-btn:focus-visible {
	color: var(--c-cyan);
	background: #000;
	box-shadow: 0 0 10px 11px rgba(255, 255, 255, 0.19);
	outline: none;
	animation-name: pv2-hang-sink, pv2-hang;
	animation-duration: 0.3s, 1.5s;
	animation-delay: 0s, 0.3s;
	animation-timing-function: ease-out, ease-in-out;
	animation-iteration-count: 1, infinite;
	animation-fill-mode: forwards;
	animation-direction: normal, alternate;
}

@keyframes pv2-hang {
	0% { transform: translateY(8px); }
	50% { transform: translateY(4px); }
	100% { transform: translateY(8px); }
}
@keyframes pv2-hang-sink {
	100% { transform: translateY(8px); }
}

/* Tags wie .tag-button auf der Projekt-Detailseite (Links → Filter) */
.pv2-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.pv2 .pv2-tag,
.pv2 .pv2-tag:visited {
	display: block;
	padding: 5px 12px;
	border: 1px solid var(--c-rand);
	border-radius: 4px;
	background: #000;
	color: var(--c-cyan);
	font-family: var(--f-system);
	font-size: 12px;
	line-height: 18px;
	font-weight: 400;
	letter-spacing: 0.2px;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color var(--t-ui), color var(--t-ui);
}

.pv2 .pv2-tag:hover,
.pv2 .pv2-tag:focus-visible {
	border-color: var(--c-cyan);
	color: var(--c-cyan);
	outline: none;
}

.pv2-tags__more {
	padding: 5px 4px;
	color: var(--c-text-3);
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 0.2px;
}

/* ---------------------------------------------------------------------
   Hero — Höhe wie /projekte/. Roboter LINKS, mittig unter dem Logo (Daniel
   03.09.), Text rechts, bündig mit „Web Design" im Menü. Video läuft per
   mix-blend-mode:lighten in den Hintergrund (Schwarz bleibt unsichtbar), dazu
   weiche Masken an allen Seiten — keine Kanten. Der Clip läuft autonom.
   --------------------------------------------------------------------- */

.pv2-hero {
	/* Mitte des Header-Logos (9430): ab 1350 px an der 1290er-Kante, darunter
	   bei 30 px mit schrumpfender Breite (gemessen 258…202 px) */
	--logo-cx: calc(max(30px, 50% - 645px) + 129px);
	/* Linke Kante von „Web Design" im Menü: rechte Rahmenkante − 873 px (gemessen 1280–1600) */
	--menu-x: calc(100% - max(30px, (100% - var(--w-max)) / 2) - 873px);
	--robot-h: var(--hero-h); /* 494 px → 3:4-Rahmen 370 px breit (Daniel 04.09.: mehr Freiheit, Hand nicht beschneiden) */
	--robot-top: 206px; /* Kopf beginnt hier (Logo endet bei 122 px; Daniel: +66 px) */
	position: relative;
	height: var(--hero-h);
	margin-top: calc(-1 * var(--header-h));
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: var(--header-h) 0 0;
	text-align: left;
}

/* Bühne reicht unter den Hero-Rand, damit der Roboter weich ausläuft. */
.pv2-hero__media {
	position: absolute;
	inset: 0 0 min(-60px, var(--hero-overlap));
	overflow: hidden;
	pointer-events: none;
}
/* Alpha-Modus (js setzt .is-alpha, wenn die VP9-Alpha-Fassung spielt): kein Blend nötig, der
   Hero darf einen Stacking-Kontext bilden und die Figur ragt über die Bandlinie (Daniel 04.09.:
   „Hand über alles drüber"). Im Blend-Modus darf der Hero KEINEN z-index haben (Kasten). */
.pv2.is-alpha .pv2-hero { z-index: 3; }
.pv2.is-alpha .pv2-hero__media { inset: 0; overflow: visible; }
.pv2.is-alpha .pv2-hero__figur--video { mix-blend-mode: normal; }

/* Glow: vom Roboter weit nach rechts in den Hero gezogen (Daniel: ausdehnen) */
.pv2-hero__glow {
	position: absolute;
	left: calc(var(--logo-cx) - 320px);
	top: 20px;
	width: 1240px; height: 620px;
	border-radius: 50%;
	background: radial-gradient(ellipse at 28% 50%, rgba(0, 171, 215, 0.26) 0%, rgba(0, 171, 215, 0.10) 35%, rgba(0, 171, 215, 0.04) 60%, transparent 78%);
	filter: blur(34px);
	animation: pv2-atmen 7s ease-in-out infinite;
}

@keyframes pv2-atmen {
	0%, 100% { opacity: 0.75; transform: scale(0.97); }
	50% { opacity: 1; transform: scale(1.03); }
}

/* Figur-Rahmen: trägt die feste Lage des Roboters. Der Blend-Modus liegt am Rahmen;
   so bleibt das auf 0 gedrückte Schwarz des Clips unsichtbar. lighten = max() je Kanal,
   screen hätte den Grund um ~8 Stufen aufgehellt. */
.pv2-hero__figur--video,
.pv2-hero__figur--bild { mix-blend-mode: lighten; }
.pv2-hero__figur {
	/* --arw (Breite/Höhe des Clips) und --mitte (Roboter-Achse im Bild) kommen aus dem
	   Sidecar per Inline-Style; Vorgabe 3:4 mittig. Roboter-Achse liegt auf der Logo-Achse. */
	--arw: 0.75;
	--mitte: 0.5;
	position: absolute;
	left: calc(var(--logo-cx) - var(--robot-h) * var(--arw) * var(--mitte));
	top: calc(var(--robot-top) - var(--robot-h) * 0.16);
	width: calc(var(--robot-h) * var(--arw));
	height: var(--robot-h);
}
.pv2 .pv2-hero__robot,
.pv2 .pv2-hero__video {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center top;
}
/* v4-Standbild ist bereits als quadratischer, dunkel auslaufender Anker komponiert. */
.pv2 .pv2-hero__robot {
	top: 0;
	height: 100%;
	object-fit: contain;
}
.pv2 .pv2-hero__video {
	/* Nur unten auslaufen — seitlich/oben keine Maske mehr: das auf 0 gedrückte Schwarz ist mit
	   lighten ohnehin unsichtbar, und die Handgeste reicht bis an den Rahmenrand (Daniel 04.09.) */
	-webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
}

/* Text: linke Kante = „Web Design" im Menü, Untertext in voller Breite */
.pv2-hero__text {
	position: relative;
	margin: 0 0 0 var(--menu-x);
	padding-right: var(--gutter);
	max-width: none;
	flex: 1 1 auto;
	transform: translateY(50px); /* Daniel 09.09.: „Projekte“ auf Höhe des Roboterkopfs */
}

.pv2-hero__title {
	margin: 0 0 22px;
	font-family: var(--f-display);
	font-weight: 800;
	font-size: 50px;
	line-height: 60px;
	letter-spacing: -2px;
	color: var(--c-text);
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}

/* Daniel 06.09. (2. Runde): Lead 200 leichter (600 → 400), Textblock nur so breit wie der erste
   Satz (~660 px, „bis zum roten Strich"); darunter leicht abgesetzt der Ziel-Satz wieder in 600 */
.pv2-hero__lead {
	margin: 0;
	max-width: 660px;
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 20px;
	line-height: 32px;
	color: var(--c-text);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
}
/* Daniel 06.09.: auf Desktop Umbruch nach „…Projekte.", zweiter Satz als eigene Zeile */
.pv2-hero__lead-satz { display: block; }
/* Daniel 08.09.: Fließtext wie auf der aktuellen Projektseite — Manrope 600, 20/32 (screen2);
   dazu den Block ab dem zweiten Satz nach unten ziehen (rote Box im Screenshot). */
.pv2-hero__lead-satz--leicht { font-weight: 600; margin-top: 26px; }
.pv2-hero__ziel {
	margin: 14px 0 0;
	max-width: 660px;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 20px;
	line-height: 32px;
	color: var(--c-text);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
}
.pv2-liste, .pv2-filter { scroll-margin-top: 40px; }

/* Buttons unter dem Lead: „Alle Projekte" (Sprung zur Liste) + „Überzeugt > Kontakt!" */
.pv2-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 22px;
	margin-top: 34px; /* 08.09.: Block tiefer, nutzt den Raum bis zur Bandlinie (Daniel: rote Box) */
}

/* ---------------------------------------------------------------------
   Slider — Nachbau der Elementor-Slides auf /projekte/: 1140er Bühne,
   Bild 438 links, Text 438 rechts, Caret-Pfeile außen am 1290er Rahmen.
   Greift um --hero-overlap in den Hero hinein.
   --------------------------------------------------------------------- */

/* Als eigenes Band vom Hero abgesetzt (Daniel: „versumpft sonst"): dunklere Fläche,
   feine Haarlinie oben mit Cyan-Schimmer, unten Haarlinie zur Liste. */
.pv2-slider {
	position: relative;
	z-index: 2;
	margin-top: calc(-1 * var(--hero-overlap));
	padding: 89px var(--gutter) 97px; /* Daniel: +33 px oben und unten */
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.035) 100%);
	border-top: 1px solid rgba(0, 171, 215, 0.55);
	border-bottom: 1px solid rgba(0, 171, 215, 0.55);
	box-shadow:
		0 -1px 18px rgba(0, 171, 215, 0.28), 0 1px 18px rgba(0, 171, 215, 0.28),
		inset 0 1px 28px rgba(0, 171, 215, 0.12), inset 0 -1px 28px rgba(0, 171, 215, 0.12);
}

.pv2-slider__wrap {
	position: relative;
	max-width: var(--w-max);
	margin: 0 auto;
	padding: 0 calc((var(--w-max) - var(--w-slider)) / 2);
}

/* Daniel 06.09. (2. Runde): Pfeile modern — nur der Pfeil, transparent, ohne Kasten, mit Schlagschatten;
   Hover cyan + leichtes Wachsen. Vertikal über top zentriert, NICHT über transform (Schwebe-Animation). */
.pv2-slider__btn {
	position: absolute;
	top: calc(50% - 40px);
	left: 4px;
	z-index: 3;
	width: 80px; height: 80px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: #FFF;
	cursor: pointer;
	white-space: normal;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
	transition: color var(--t-ui), filter var(--t-ui);
}
.pv2-slider__btn--next { left: auto; right: 4px; }
.pv2 .pv2-slider__btn:hover,
.pv2 .pv2-slider__btn:focus-visible {
	background: transparent;
	border: 0;
	color: var(--c-cyan);
	box-shadow: none;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 12px rgba(0, 171, 215, 0.55));
	outline: none;
}
.pv2 .pv2-slider__btn:hover svg,
.pv2 .pv2-slider__btn:focus-visible svg { transform: scale(1.12); }
.pv2 .pv2-slider__btn:active,
.pv2 .pv2-slider__btn:focus { background: transparent; border: 0; box-shadow: none; }
.pv2 .pv2-slider__btn:focus:not(:focus-visible):not(:hover) { color: #FFF; }
.pv2-slider__btn[disabled] { opacity: 0.3; cursor: default; }
.pv2-slider__btn svg { display: block; width: 64px; height: 64px; transform: scale(.8); transform-origin: center; transition: transform var(--t-ui); }

.pv2-slider__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	outline: none;
}
.pv2-slider__track::-webkit-scrollbar { display: none; }

.pv2-slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	display: grid;
	grid-template-columns: 560px 438px; /* Daniel 06.09.: Laptop größer (vorher 438) */
	column-gap: 54px;
	justify-content: center;
	align-items: center;
	padding: 0 40px;
}

.pv2-slide__media { display: block; }
.pv2 .pv2-slide__media .pv2-bild {
	display: block;
	width: 100%;
	height: auto;
}


.pv2-slide__title {
	margin: 0 0 6px;
	font-family: var(--f-display);
	font-weight: 800;
	font-size: 38px;
	line-height: 54px;
	color: var(--c-text);
}
.pv2 .pv2-slide__title a,
.pv2 .pv2-slide__title a:visited { color: var(--c-text); text-decoration: none; }
.pv2 .pv2-slide__title a:hover { color: var(--c-cyan); }

.pv2-slide__typ {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 24px;
	color: var(--c-text-3);
}
.pv2-slide__text {
	margin: 0 0 18px;
	font-family: var(--f-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 26px;
	color: var(--c-text-2);
}

/* ---------------------------------------------------------------------
   Filter — Chips in der Tag-Familie (4px, Versalien 12px)
   --------------------------------------------------------------------- */

.pv2-liste { padding: 120px var(--gutter) 120px; } /* Daniel: 100 px mehr Abstand zur Linie */
.pv2-liste { background-color: #15181d; } /* etwas heller als der Seitengrund #0b0c0e (Daniel 12.09.) */
.pv2-chip--schlagwort .pv2-chip__x { margin-left: 10px; font-size: 18px; line-height: 1; opacity: .85; }
.pv2 .pv2-chip[hidden] { display: none !important; } /* display der Chips würde hidden sonst überstimmen */

.pv2-filter,
.pv2-grid {
	max-width: var(--w-max);
	margin: 0 auto;
}

/* Filter: v4-Ganzkörper-Kommunikator mit Ackermann-Brustlogo RECHTS,
   links Intro + Kategorien (die Chips brechen in mehrere Reihen — gewollt), darunter Status + Schalter */
.pv2-filter {
	--presenter-w: 350px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--presenter-w);
	grid-template-rows: auto auto auto;
	column-gap: 56px;
	row-gap: 28px;
	align-items: end;
	margin-bottom: 40px;
}
.pv2-filter__intro { grid-column: 1; grid-row: 1; max-width: 760px; align-self: end; }
.pv2-filter__title {
	margin: 0 0 14px;
	font-family: var(--f-display);
	font-weight: 800;
	font-size: 50px;   /* wie die Abschnittstitel der übrigen Seiten (gemessen 06.09.: 50/800/−2px) */
	line-height: 60px;
	letter-spacing: -2px;
	color: var(--c-text);
}
.pv2-filter__lead {
	margin: 0;
	font-family: var(--f-display);
	font-weight: 500;
	font-size: 17px;
	line-height: 28px;
	color: var(--c-text-2);
}

/* Ganzkörper-Kommunikator: Kopf und Füße bleiben vollständig sichtbar. Die Takes sind
   freigestellt (VP9-Alpha) oder liegen auf Schwarz (MP4 für Safari); lighten bettet beides
   in den dunklen Seitenhintergrund ein. */
.pv2-presenter {
	grid-column: 2;
	grid-row: 1 / 3;
	align-self: end;
	justify-self: end;
	position: relative;
	width: var(--presenter-w);
	height: calc(var(--presenter-w) * 1.5);
}
.pv2-presenter__media {
	position: absolute;
	inset: 0;
	overflow: visible;
	mix-blend-mode: lighten;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
/* Bühne = Vereinigungsbox aller Takes (Seitenverhältnis per Inline-Style), unten mittig.
   Jeder Take liegt mit seinem eigenen Ausschnitt darin (left/top/width/height inline). */
.pv2-presenter__buehne {
	position: absolute;
	bottom: 0;
	left: 50%;
	height: 100%;
	transform: translateX(-50%);
}
.pv2 .pv2-presenter__bild,
.pv2 .pv2-presenter__take {
	position: absolute;
	display: block;
	max-width: none;
}
.pv2 .pv2-presenter__bild { inset: 0; width: 100%; height: 100%; }
.pv2 .pv2-presenter__take { opacity: 0; object-fit: fill; transition: opacity .28s ease; }
.pv2 .pv2-presenter__take.is-an { opacity: 1; }
/* Standbild erst verstecken, wenn der erste Take voll eingeblendet ist — sonst schimmert es
   durch die freigestellten Flächen (Geisterarm beim Winken). */
.pv2-presenter--laeuft .pv2-presenter__bild { visibility: hidden; }

.pv2-filter__chips {
	grid-column: 1;
	grid-row: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Kategorien-Chips: groß und präsent, gebaut wie der Standard-Button (schwarz, Rand, Schatten,
   Hover cyan) — Daniel 06.09. */
.pv2-chip,
.pv2-chip:hover,
.pv2-chip:focus {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 20px 14px;
	border: 1px solid rgba(126, 126, 126, 0.51);
	border-radius: 5px;
	background: #000;
	color: #FFF;
	font-family: var(--f-display);
	font-size: 15px;
	line-height: 18px;
	font-weight: 700;
	letter-spacing: 0.2px;
	text-transform: uppercase;
	white-space: normal;
	box-shadow: 0 0 10px rgba(107, 107, 107, 0.35);
	cursor: pointer;
	transition: border-color var(--t-ui), color var(--t-ui), background var(--t-ui), box-shadow var(--t-ui), transform var(--t-ui);
}

.pv2-chip:hover,
.pv2-chip:focus-visible {
	border-color: var(--c-cyan);
	color: var(--c-cyan);
	transform: translateY(-2px);
	box-shadow: 0 0 10px 6px rgba(255, 255, 255, 0.12);
	outline: none;
}

.pv2-chip.is-active,
.pv2-chip.is-active:hover,
.pv2-chip.is-active:focus {
	border-color: var(--c-cyan);
	background: var(--c-cyan);
	color: #000;
	transform: none;
}

.pv2-chip__n {
	font-family: var(--f-system);
	font-size: 12px;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	color: var(--c-cyan);
}
.pv2-chip:hover .pv2-chip__n { color: inherit; }
.pv2-chip.is-active .pv2-chip__n { color: rgba(0, 0, 0, 0.65); }

/* Status links, Spalten-Umschalter rechts */
.pv2-filter__zeile {
	grid-column: 1 / -1;
	grid-row: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: -8px;
}
.pv2-filter__schalter { display: flex; align-items: center; gap: 28px; }
.pv2-filter__status {
	margin: 0;
	font-size: 13px;
	color: var(--c-text-3);
	font-variant-numeric: tabular-nums;
}
.pv2-filter__n { color: var(--c-text); font-weight: 600; }

.pv2-spalten { display: flex; gap: 8px; }
.pv2-spalten__btn,
.pv2-spalten__btn:hover,
.pv2-spalten__btn:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 36px;
	padding: 0;
	border: 1px solid rgba(126, 126, 126, 0.51);
	border-radius: 5px;
	background: #000;
	color: var(--c-text-3);
	box-shadow: none;
	cursor: pointer;
	transition: border-color var(--t-ui), color var(--t-ui), background var(--t-ui);
}
.pv2-spalten__btn svg { fill: currentColor; }
.pv2-spalten__btn:hover,
.pv2-spalten__btn:focus-visible { color: var(--c-cyan); border-color: var(--c-cyan); outline: none; }
.pv2-spalten__btn.is-active,
.pv2-spalten__btn.is-active:hover { background: var(--c-cyan); border-color: var(--c-cyan); color: #000; }

.pv2-filter__leer {
	grid-column: 1 / -1;
	grid-row: 4;
	margin: 0;
	color: var(--c-text-3);
}

/* Ansicht der Referenzen (Daniel 06.09.): Laptop (Montage wie gehabt) | Browserfenster | nur Screenshot.
   Browser/Screenshot zeigen den Bildschirm-Ausschnitt derselben Montage (Bildschirm liegt in allen
   Listenbildern bei x 12,8–88,2 % / y 5,5–71,1 %, gemessen 06.09. über Bilddifferenzen). */
.pv2-card__screen, .pv2-card__view { display: contents; }
.pv2-card__chrome { display: none; }
.pv2-grid--browser .pv2-card__stage,
.pv2-grid--nackt .pv2-card__stage { align-items: center; }
.pv2-grid--browser .pv2-card__screen,
.pv2-grid--nackt .pv2-card__screen {
	display: block;
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
	transition: transform 400ms ease, box-shadow 400ms ease;
}
.pv2-grid--browser .pv2-card__view,
.pv2-grid--nackt .pv2-card__view {
	display: block;
	position: relative;
	aspect-ratio: 1207 / 723;
	overflow: hidden;
	background: #fff;
}
.pv2-grid--browser .pv2-card__view .pv2-bild,
.pv2-grid--nackt .pv2-card__view .pv2-bild {
	width: 100%;
	transform: scale(1.3255) translate(-12.81%, -5.54%);
	transform-origin: 0 0;
}
/* Fensterleiste hellgrau wie ein echtes Browserfenster, Ampelpunkte gedämpft (Daniel 12.09.). */
.pv2-grid--browser .pv2-card__chrome {
	display: block;
	position: relative;
	height: 30px;
	background: linear-gradient(#e7e9ed, #d8dbe0);
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.pv2-grid--browser .pv2-card__chrome::before {
	content: "";
	position: absolute; top: 10.5px; left: 12px;
	width: 9px; height: 9px; border-radius: 50%;
	background: #de8f89;
	box-shadow: 15px 0 0 #dcc083, 30px 0 0 #95c29f;
}
.pv2-grid--browser .pv2-card__chrome::after {
	content: "";
	position: absolute; top: 7px; left: 60px; right: 14px; height: 16px;
	border-radius: 8px;
	background: #f8f9fb;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
/* Hover: keine Umrandung, nur der Glow der Buttons (.pv2-btn:hover). */
.pv2-grid--browser .pv2-card:hover .pv2-card__screen,
.pv2-grid--browser .pv2-card:focus-within .pv2-card__screen,
.pv2-grid--nackt .pv2-card:hover .pv2-card__screen,
.pv2-grid--nackt .pv2-card:focus-within .pv2-card__screen {
	transform: translateY(-6px);
	box-shadow: 0 26px 60px rgba(0, 0, 0, 0.65), 0 0 10px 11px rgba(255, 255, 255, 0.19);
}
.pv2-grid--browser .pv2-card:hover .pv2-card__view .pv2-bild,
.pv2-grid--browser .pv2-card:focus-within .pv2-card__view .pv2-bild,
.pv2-grid--nackt .pv2-card:hover .pv2-card__view .pv2-bild,
.pv2-grid--nackt .pv2-card:focus-within .pv2-card__view .pv2-bild {
	transform: scale(1.365) translate(-12.81%, -5.54%);
}

/* ---------------------------------------------------------------------
   Raster — dreispaltig, ohne Kästen; Bühne 4:3 mit MacBook-Montage (1600×1102)
   unten bündig — Websites: Daniels Beitragsbild, Apps: Montage aus seinem Rahmen
   (Daniel 03.09.: nie hochkant, Geräte-Sets nur in der Detailansicht)
   --------------------------------------------------------------------- */

.pv2-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 64px 40px;
}
/* Anordnung (Daniel 09.09.): 2/3/Liste, Wahl bleibt im localStorage (js) */
.pv2-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px 56px; }
.pv2-grid--liste { grid-template-columns: 1fr; gap: 76px; }
.pv2-grid--liste .pv2-card {
	display: grid;
	grid-template-columns: minmax(0, 56%) minmax(280px, 1fr);
	gap: 54px;
	align-items: center;
}
.pv2-grid--liste .pv2-card__stage { margin-bottom: 0; }
.pv2-grid--liste .pv2-card__body { align-items: flex-start; text-align: left; }
.pv2-grid--liste .pv2-card__title { font-size: 38px; line-height: 48px; }
.pv2-grid--liste .pv2-card__details { display: block; }
.pv2-grid--liste .pv2-card__body .pv2-btn { align-self: flex-start; margin-top: 0; }

.pv2-card {
	position: relative;
	display: flex;
	flex-direction: column;
}

.pv2 .pv2-card__stage {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	aspect-ratio: 4 / 3;
	margin: 0 0 22px;
	padding: 0;
	background: radial-gradient(ellipse 55% 26% at 50% 100%, rgba(0, 171, 215, 0.16), transparent 70%);
}
.pv2 .pv2-card__stage .pv2-bild {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	transition: transform 400ms ease;
}
.pv2-grid:not(.pv2-grid--browser):not(.pv2-grid--nackt) .pv2-card:hover .pv2-card__stage .pv2-bild,
.pv2-grid:not(.pv2-grid--browser):not(.pv2-grid--nackt) .pv2-card:focus-within .pv2-card__stage .pv2-bild { transform: translateY(-6px); }

.pv2-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	text-align: center;
}
.pv2-card__body .pv2-btn { margin-top: auto; align-self: center; }
.pv2-card__details { display: none; }
.pv2-card__sub {
	margin: 0 0 18px;
	font-size: 16px;
	line-height: 24px;
	color: var(--c-text-3);
}
.pv2-card__text {
	margin: 0 0 18px;
	font-family: var(--f-display);
	font-weight: 500;
	font-size: 16px;
	line-height: 26px;
	color: var(--c-text-2);
}

.pv2-card__title {
	margin: 0 0 6px;
	font-family: var(--f-display);
	font-weight: 800;
	font-size: 22px;
	line-height: 30px;
	color: var(--c-text);
}
.pv2 .pv2-card__title a,
.pv2 .pv2-card__title a:visited { color: var(--c-text); text-decoration: none; }
.pv2 .pv2-card__title a:hover { color: var(--c-cyan); }

.pv2-card[hidden],
.pv2-slide[hidden] { display: none; }

.pv2-card.is-neu { animation: pv2-auf 320ms ease both; }
@keyframes pv2-auf {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

.pv2-bild--leer {
	aspect-ratio: 16 / 11;
	background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 8px, transparent 8px 16px);
}

/* ---------------------------------------------------------------------
   CTA — ohne Kasten, Trennlinie oben
   --------------------------------------------------------------------- */

.pv2-cta { padding: 0 var(--gutter) 120px; }

.pv2-cta__inner {
	max-width: var(--w-max);
	margin: 0 auto;
	padding: 72px 0 0;
	border-top: 1px solid var(--c-line);
	text-align: center;
}

.pv2-cta__title {
	margin: 0 0 12px;
	font-family: var(--f-display);
	font-weight: 800;
	font-size: 38px;
	line-height: 54px;
	color: var(--c-text);
}

.pv2-cta__text {
	margin: 0 auto 28px;
	max-width: 36em;
	color: var(--c-text-2);
	font-size: 16px;
	line-height: 26px;
}

/* Angebot KI-Telefonassistent (vg-843ca01b) — Karte in der Machart von „Eigene Anwendungen". */
.pv2-telefon { padding: 96px var(--gutter) 0; }
.pv2-telefon__inner {
	max-width: var(--w-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr);
	gap: 56px;
	align-items: center;
	padding: clamp(28px, 4vw, 56px);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 14px;
	background: radial-gradient(circle at 85% 0, #172938 0, #0d1219 55%);
}
.pv2-telefon__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	color: var(--c-cyan);
	font: 700 12px/1.2 var(--f-display);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.pv2-telefon__neu {
	padding: 4px 9px;
	border: 1px solid var(--c-cyan);
	border-radius: 4px;
	background: rgba(0, 171, 215, 0.16);
	color: var(--c-text);
	letter-spacing: 0.08em;
}
.pv2-telefon__title {
	margin: 0 0 18px;
	font: 800 clamp(30px, 3.4vw, 44px)/1.12 var(--f-display);
	letter-spacing: -0.02em;
	color: var(--c-text);
}
.pv2-telefon__lead {
	max-width: 40em;
	margin: 0 0 28px;
	font-family: var(--f-display);
	font-size: 17px;
	line-height: 28px;
	color: var(--c-text-2);
}
.pv2-telefon__punkte {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}
.pv2-telefon__punkt {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 18px 20px;
	border: 1px solid var(--c-rand);
	border-radius: 7px;
	background: #000;
}
.pv2-telefon__punkt strong { font: 700 16px/1.3 var(--f-display); color: var(--c-text); }
.pv2-telefon__punkt span,
.pv2-telefon__ablauf,
.pv2-telefon__hinweis,
.pv2-telefon__beispiel-hinweis { font-family: var(--f-display); }
.pv2-telefon__punkt span { font-size: 14px; line-height: 22px; color: var(--c-text-3); }
.pv2-telefon__ablauf { max-width: 40em; margin: 0 0 10px; font-size: 16px; line-height: 26px; color: var(--c-text-2); }
.pv2-telefon__hinweis { margin: 0 0 28px; font-size: 14px; line-height: 22px; color: var(--c-text-3); }
.pv2-telefon__beispiel {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 26px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.45);
}
.pv2-telefon__beispiel-titel { font: 700 12px/1.2 var(--f-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-3); }
.pv2-telefon__zeile { max-width: 88%; padding: 14px 16px; border-radius: 12px; }
.pv2-telefon__zeile p { margin: 4px 0 0; font: 500 16px/1.5 var(--f-display); color: var(--c-text); }
.pv2-telefon__wer { font: 700 11px/1.2 var(--f-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-3); }
.pv2-telefon__zeile--anrufer { align-self: flex-start; background: #1a1f27; border-bottom-left-radius: 4px; }
.pv2-telefon__zeile--assistent { align-self: flex-end; background: rgba(0, 171, 215, 0.14); border: 1px solid rgba(0, 171, 215, 0.35); border-bottom-right-radius: 4px; }
.pv2-telefon__zeile--assistent .pv2-telefon__wer { color: var(--c-cyan); }
.pv2-telefon__beispiel-hinweis { margin: 4px 0 0; font-size: 12px; line-height: 18px; color: var(--c-text-3); }
@media (max-width: 1024px) {
	.pv2-telefon__inner { grid-template-columns: 1fr; gap: 36px; }
	.pv2-telefon__punkte { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.pv2-telefon { padding-top: 64px; }
	.pv2-telefon__inner { padding: 24px 18px; }
}

/* ---------------------------------------------------------------------
   Responsiv
   --------------------------------------------------------------------- */

@media (max-width: 1199px) {
	.pv2-hero__title { font-size: 40px; line-height: 48px; letter-spacing: -1.5px; margin-bottom: 16px; }
	.pv2-hero__lead, .pv2-hero__ziel { font-size: 16px; line-height: 26px; max-width: 28em; }
	.pv2-hero { --logo-cx: 145px; --robot-h: calc(var(--hero-h) - 70px); --robot-top: 190px; --menu-x: calc(var(--logo-cx) + var(--robot-h) * 0.375 + 40px); }
	.pv2-slide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; padding: 0 30px; }
	.pv2-slide__title { font-size: 32px; line-height: 44px; }
	.pv2-grid { gap: 56px 32px; }
	.pv2-filter { --presenter-w: 300px; column-gap: 36px; }
}

@media (max-width: 1023px) {
	/* Roboter mittig hinter dem Text (object-fit zentriert; kein transform — das
	   belegt die Schwebe-Animation) */
	.pv2-hero { padding-left: var(--gutter); }
	/* Figur als Hintergrund hinter dem Text: volle Breite, abgedunkelt, ohne Parallaxe */
	.pv2-hero__figur { left: 0; width: 100%; top: 100px; height: calc(var(--hero-h) - 60px); transform: none; opacity: 0.4; }
	.pv2 .pv2-hero__robot { top: 0; height: 100%; }
	.pv2-hero__figur--video { mix-blend-mode: normal; }
	.pv2 .pv2-hero__video { object-fit: contain; }
	.pv2-hero__text { margin-left: 0; max-width: 700px; padding-right: 0; }
	.pv2-hero__glow { left: 50%; margin-left: -400px; width: 800px; height: 560px; }
	.pv2-slider__wrap { padding: 0 44px; }
	.pv2-slider__btn { left: 0; }
	.pv2-slider__btn--next { left: auto; right: 0; }
	.pv2-slide { grid-template-columns: 1fr; row-gap: 20px; padding: 0 8px; }
	.pv2-slide__media { max-width: 438px; }
	.pv2-filter { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 22px; }
	.pv2-filter__intro, .pv2-filter__chips, .pv2-filter__zeile, .pv2-filter__leer, .pv2-presenter { grid-column: 1; grid-row: auto; }
	.pv2-filter__title { font-size: 36px; line-height: 44px; letter-spacing: -1.2px; }
	.pv2-presenter, .pv2-spalten { display: none; }
	.pv2-chip, .pv2-chip:hover, .pv2-chip:focus { padding: 10px 14px 11px; font-size: 13px; }
	.pv2-grid, .pv2-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; }
	.pv2-grid--liste { grid-template-columns: 1fr; gap: 64px; }
	.pv2-grid--liste .pv2-card { grid-template-columns: minmax(0, 54%) minmax(260px, 1fr); gap: 36px; }
	.pv2-grid--liste .pv2-card__title { font-size: 32px; line-height: 42px; }
}

@media (max-width: 767px) {
	.pv2 { --gutter: 20px; --header-h: 0px; --hero-h: 450px; --hero-overlap: 30px; }
	/* Hero wächst mit dem Text (zweiter Lead-Satz + zwei Buttons, 06.09.), Buttons enden über dem Band */
	.pv2-hero { padding-top: 70px; padding-bottom: 80px; height: auto; min-height: var(--hero-h); }
	.pv2-hero__text { transform: translateY(20px); }
	.pv2-hero__figur { top: 70px; height: calc(var(--hero-h) - 60px); }
	.pv2-hero__ctas { gap: 14px 16px; margin-top: 24px; }
	.pv2-hero__glow { width: 420px; height: 420px; margin-left: -210px; top: 0; }
	.pv2-hero__title { font-size: 32px; line-height: 40px; letter-spacing: -1px; margin-bottom: 14px; }
	.pv2-hero__lead, .pv2-hero__ziel { font-size: 17px; line-height: 27px; }
	.pv2-slider { padding-bottom: 50px; }
	/* Mobil: Pfeil-Kästen (06.09.) nicht über den Text legen, sondern als Reihe unter die Folie */
	.pv2-slider__wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding: 0; }
	.pv2-slider__track { order: 1; width: 100%; }
	.pv2-slider__btn { position: static; order: 2; width: 56px; height: 56px; margin-top: 12px; }
	.pv2-slider__btn--next { order: 3; }
	.pv2-slider__btn svg { width: 48px; height: 48px; }
	.pv2-slide__title { font-size: 26px; line-height: 34px; }
	.pv2-grid, .pv2-grid--2, .pv2-grid--liste { grid-template-columns: 1fr; gap: 48px; }
	.pv2-grid--liste .pv2-card { grid-template-columns: 1fr; gap: 20px; }
	.pv2-grid--liste .pv2-card__title { font-size: 26px; line-height: 34px; }
	.pv2-cta__inner { padding-top: 48px; }
	.pv2-cta__title { font-size: 30px; line-height: 40px; }
	.pv2__bg-grid { background-size: 48px 48px; }
}

@media (prefers-reduced-motion: reduce) {
	.pv2 *, .pv2 *::before, .pv2 *::after { animation: none !important; transition-duration: 0.01ms !important; }
	.pv2-slider__track { scroll-behavior: auto; }
}