/*
Theme Name:   Nerdventures Studio – Divi Child
Theme URI:    https://nerdventures.studio
Description:  Divi-5-Child-Theme für die nerdventures-studio-Website (Landing, Case Study, Über uns). Design lebt in Design Variables, Presets und Theme-Builder-Templates — hier nur das Ventil für nicht Divi-Abbildbares (Wellen-Trenner, Marker-Unterstriche, Deko-Overlaps, Foto-Platzhalter, Prozess-Nummern, Zell-Trennlinien) und lokale Fonts.
Author:       Nerdventures Studio
Author URI:   https://nerdventures.studio
Template:     Divi
Version:      1.0.0
License:      GPL-2.0-or-later
Text Domain:  nerdventures-studio-divi-child
*/

/* =========================================================
   Projekt-CSS — das "Ventil für die letzten 5 %" (hier per
   Nutzer-Entscheid bewusst breiter: alle Wellen-Trenner der
   drei Seiten leben als Data-URI-SVGs in diesem CSS).
   Regeln:
   - Jede Regel gescoped (Section-/nv-*-Klasse), nie global
     auf Divi-Basisklassen.
   - Werte aus den CSS Custom Properties unten (Spiegel der
     Divi Design Variables).
   ========================================================= */

/* Spiegel der Design Variables, die dieses CSS nutzt
   (Werte identisch mit global-variables.json / design-tokens.json). */
:root {
	--color-teal: #1C6E78;
	--color-teal-soft: #2A8B92;
	--color-heading: #173F49;
	--color-amber: #E3A32F;
	--color-amber-btn: #E9AE3F;
	--color-text: #4C4A43;
	--color-text-muted: #6B685E;
	--color-bg-mint-deep: #DCEBE9;
	--color-card: #FFFDF8;
	--color-tint-amber-light: #F7E9C9;
	--color-line: #E5DFD2;
	--color-line-soft: #ECE7DB;
	--color-dash-teal: #8FB8B4;
	--color-dash-amber: #E0BE7A;
	--font-accent: 'Caveat', cursive;
	--space-4: 4px;
	--space-6: 6px;
	--space-8: 8px;
	--space-10: 10px;
	--space-12: 12px;
	--space-14: 14px;
	--space-16: 16px;
	--space-18: 18px;
	--space-20: 20px;
	--space-22: 22px;
	--space-24: 24px;
	--radius-bar: 3px;
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-frame: 16px;
	--radius-img-lg: 28px;
	--radius-corner: 60px;
	--radius-corner-lg: 90px;
	--size-img-before: 230px;
	--size-img-after: 300px;
	--size-card-before: 400px;
	--size-card-after: 440px;
	--size-photo-circle: 170px;
	--size-decor: 170px;
	--size-decor-cs: 230px;
	--size-hero-img-uu: 460px;
	--size-step: 36px;
	/* Schatten: kein Divi-Variablentyp — Werte = design-tokens.json */
	--shadow-photo-sm: 0 10px 26px rgba(23, 63, 73, 0.12);
	--shadow-photo: 0 12px 30px rgba(23, 63, 73, 0.15);
	--shadow-photo-circle: 0 8px 20px rgba(23, 63, 73, 0.14);
}

/* ---------- A) Wellen-Trenner ----------
   Die Sektionsübergänge sind handgezeichnete SVG-Wellen — kein
   Divi-Pendant in exakter Form. Als absolut positionierte
   ::before/::after mit Data-URI (Farben eingebacken, var() geht
   in Data-URIs nicht). Die Wellenhöhe ist bei In-Flow-Wellen im
   Section-Padding der Layouts eingerechnet. */

.pain-points, .services, .nv-band, .cta,
.cs-start, .cs-process, .cs-results, .cs-feedback,
.nv-uu-band, .nv-uu-cta {
	position: relative;
}

.pain-points::before, .services::before, .nv-band::before, .nv-band::after,
.cta::before, .cs-start::before, .cs-process::before, .cs-process::after,
.cs-results::before, .cs-feedback::before, .cs-feedback::after,
.nv-uu-band::before, .nv-uu-band::after, .nv-uu-cta::before, .nv-uu-cta::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/* Landing: Warum-Booking — Welle ragt 64px über die Section hinauf (eigene Farbe) */
.pain-points::before, .cs-start::before {
	top: -64px;
	height: 64px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0,34 C120,62 260,6 420,22 C580,38 700,64 860,40 C1020,16 1120,4 1250,26 C1340,41 1400,22 1440,32 L1440,64 L0,64 Z' fill='%23F6F2E9'/%3E%3C/svg%3E");
}

/* Landing: Leistungen — obere Welle trägt die Mint-Farbe der Vorgänger-Section */
.services::before {
	top: 0;
	height: 48px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C140,48 300,4 470,20 C640,36 760,46 930,28 C1100,10 1220,6 1330,22 C1390,31 1420,18 1440,24 L1440,0 L0,0 Z' fill='%23E9F2F1'/%3E%3C/svg%3E");
}

/* Landing: Statement-Band (Teal) — Wellen oben (Creme-Warm) und unten (Seitenfarbe) */
.nv-band::before {
	top: 0;
	height: 36px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 36' preserveAspectRatio='none'%3E%3Cpath d='M0,16 C180,34 400,2 620,14 C840,26 1060,6 1250,18 C1340,23 1400,12 1440,17 L1440,0 L0,0 Z' fill='%23F7F3EA'/%3E%3C/svg%3E");
}
.nv-band::after {
	bottom: 0;
	height: 36px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 36' preserveAspectRatio='none'%3E%3Cpath d='M0,14 C160,2 380,32 600,20 C820,8 1040,28 1240,14 C1330,8 1400,20 1440,13 L1440,36 L0,36 Z' fill='%23FBFAF8'/%3E%3C/svg%3E");
}

/* Landing: Kontakt-CTA */
.cta::before {
	top: 0;
	height: 44px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C160,40 360,4 560,16 C760,28 960,42 1160,24 C1300,12 1390,26 1440,20 L1440,0 L0,0 Z' fill='%23FBFAF8'/%3E%3C/svg%3E");
}

/* Case Study: Prozess (oben Creme, unten Seitenfarbe) */
.cs-process::before {
	top: 0;
	height: 48px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C140,48 300,4 470,20 C640,36 760,46 930,28 C1100,10 1220,6 1330,22 C1390,31 1420,18 1440,24 L1440,0 L0,0 Z' fill='%23F6F2E9'/%3E%3C/svg%3E");
}
.cs-process::after {
	bottom: 0;
	height: 48px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,22 C160,4 380,42 600,26 C820,10 1040,38 1240,20 C1330,12 1400,26 1440,18 L1440,48 L0,48 Z' fill='%23FBFAF8'/%3E%3C/svg%3E");
}

/* Case Study: Ergebnisse (Seitenfarbe der Vorgänger-Section oben) */
.cs-results::before {
	top: 0;
	height: 48px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C140,48 300,4 470,20 C640,36 760,46 930,28 C1100,10 1220,6 1330,22 C1390,31 1420,18 1440,24 L1440,0 L0,0 Z' fill='%23FBFAF8'/%3E%3C/svg%3E");
}

/* Case Study: Feedback */
.cs-feedback::before {
	top: 0;
	height: 48px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C140,48 300,4 470,20 C640,36 760,46 930,28 C1100,10 1220,6 1330,22 C1390,31 1420,18 1440,24 L1440,0 L0,0 Z' fill='%23F6F2E9'/%3E%3C/svg%3E");
}
.cs-feedback::after {
	bottom: 0;
	height: 40px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0,16 C160,2 380,34 600,20 C820,6 1040,30 1240,16 C1330,10 1400,22 1440,15 L1440,40 L0,40 Z' fill='%23FBFAF8'/%3E%3C/svg%3E");
}

/* Über uns: Beide-Seiten-Band — obere Welle ragt 44px hinauf (eigene Farbe) */
.nv-uu-band::before {
	top: -44px;
	height: 44px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0,22 C180,44 420,4 660,18 C900,32 1120,8 1300,20 C1380,25 1420,14 1440,19 L1440,44 L0,44 Z' fill='%23DCEBE9'/%3E%3C/svg%3E");
}
.nv-uu-band::after {
	bottom: 0;
	height: 44px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C160,4 380,40 600,24 C820,8 1040,36 1240,18 C1330,10 1400,24 1440,16 L1440,44 L0,44 Z' fill='%23FBFAF8'/%3E%3C/svg%3E");
}

/* Über uns: CTA-Band */
.nv-uu-cta::before {
	top: 0;
	height: 30px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0,14 C180,28 400,2 620,12 C840,22 1060,4 1250,15 C1340,19 1400,10 1440,14 L1440,0 L0,0 Z' fill='%23FBFAF8'/%3E%3C/svg%3E");
}
.nv-uu-cta::after {
	bottom: 0;
	height: 30px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 30' preserveAspectRatio='none'%3E%3Cpath d='M0,14 C160,2 380,26 600,16 C820,6 1040,24 1240,12 C1330,7 1400,18 1440,12 L1440,30 L0,30 Z' fill='%23FBFAF8'/%3E%3C/svg%3E");
}

/* ---------- B) Wortmarke (Header) ----------
   Zweizeiliges Text-Logo mit Farbwechsel-Unterstrich und
   gesperrtem Sub — als einzelnes Modul nicht preset-fähig. */

.nv-logo p {
	margin: 0;
	/* !important: Divi gibt Text-Absätzen line-height 2 und padding-bottom 1em
	   (QA-vermessen: 22px Textzeile + 22px Padding) */
	line-height: 1 !important;
	padding: 0 !important;
}

.nv-logo__name {
	font-weight: 800;
	font-size: 22px;
	color: var(--color-teal);
	letter-spacing: -0.01em;
}

.nv-logo__name span {
	color: var(--color-amber);
}

.nv-logo__sub {
	font-weight: 700;
	font-size: 11px;
	color: var(--color-amber);
	letter-spacing: 0.42em;
	margin-top: var(--space-4) !important;
}

/* ---------- C) Header: aktiver Menüpunkt ----------
   Unterstrich nur für echte Seiten (Über uns, Case Study) —
   Anker-Items bekommen von WP fälschlich current-menu-item
   (LEARNINGS), daher :not([href*="#"]). */

.nv-header .et_pb_menu .current-menu-item > a:not([href*="#"]) {
	color: var(--color-teal);
	font-weight: 700;
	border-bottom: 2.5px solid var(--color-amber-btn);
	padding-bottom: var(--space-4);
}

/* ---------- D) H1-Marker (Amber-Unterstrich unter Wörtern) ---------- */

.nv-hl {
	position: relative;
	display: inline-block;
}

.nv-hl::after {
	content: "";
	position: absolute;
	left: 2px;
	right: 6px;
	bottom: 2px;
	height: 5px;
	background: var(--color-amber-btn);
	border-radius: var(--radius-bar);
}

.nv-hl--teal {
	color: var(--color-teal);
}

.nv-hl--teal::after {
	left: 0;
	right: 0;
	height: 4px;
}

/* ---------- E) Check- und Häkchen-Listen (Markup in Text-Modulen) ---------- */

.nv-checks p {
	display: flex;
	gap: var(--space-12);
	align-items: flex-start;
	margin: 0 0 var(--space-14) !important;
	padding: 0;
}

.nv-checks p:last-child {
	margin-bottom: 0 !important;
}

.nv-checks svg {
	flex: none;
	margin-top: 1px;
}

.nv-checks--lg p {
	gap: var(--space-16);
	margin-bottom: var(--space-18) !important;
}

.nv-checks--lg p:last-child {
	margin-bottom: 0 !important;
}

.nv-checks--lg svg {
	margin-top: 0;
}

.nv-ticks p {
	display: flex;
	gap: var(--space-10);
	align-items: center;
	margin: 0 0 var(--space-10) !important;
	padding: 0;
}

.nv-ticks p:last-child {
	margin-bottom: 0 !important;
}

.nv-ticks svg {
	flex: none;
}

.nv-ticks--sm p {
	margin-bottom: var(--space-8) !important;
}

/* ---------- F) Blurbs: Icon-Zentrierung + Titelabstände ----------
   imageIcon.alignment rendert nicht (LEARNINGS) → Container-Flex.
   Modul-Header (h3) bringt padding-bottom mit → Abstände hier. */

.guest-needs .et_pb_main_blurb_image,
.cs-start .et_pb_blurb_position_top .et_pb_main_blurb_image,
.uu-values .et_pb_main_blurb_image {
	display: flex;
	flex-direction: row;
	justify-content: center;
	column-gap: 0;
	row-gap: 0;
}

.pain-points .et_pb_blurb .et_pb_module_header,
.cs-start .et_pb_blurb_position_left .et_pb_module_header {
	margin: var(--space-4) 0 var(--space-10);
	padding: 0;
	line-height: 1.35;
}

.guest-needs .et_pb_module_header {
	margin: 0 0 var(--space-8);
	padding: 0;
}

.cs-start .et_pb_blurb_position_top .et_pb_module_header {
	margin: 0 0 var(--space-10);
	padding: 0;
}

.uu-values .et_pb_module_header {
	margin: 0 0 var(--space-12);
	padding: 0;
}

/* Blurb-Container (Icon links): Divi-Default-padding-left 15px —
   der Icon-Abstand kommt bereits aus der Icon-Margin (Preset) */
.pain-points .et_pb_blurb_container,
.cs-start .et_pb_blurb_container,
.uu-loves .et_pb_blurb_container {
	padding-left: 0;
}

/* ---------- G) Leistungs-Karten: Fuß nach unten, volle Höhe ---------- */

.services .nv-service-card {
	height: 100%;
}

.services .nv-service-card .nv-card-foot {
	margin-top: auto;
}

.services .nv-price p {
	margin: 0;
}

.services .nv-price strong {
	font-weight: 800;
}

.services .nv-price-word {
	font-family: var(--font-accent);
	font-weight: 500;
	font-size: 20px;
	color: var(--color-amber);
}

/* Partnerschafts-Notiz: Pfeil + Handschrift in einer Zeile */
.nv-note p {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-12);
	margin: 0;
}

.nv-note svg {
	flex: none;
	margin-top: -8px;
}

/* ---------- H0) Bild-Module in Flex-Gruppen ----------
   Divi rendert Image-Module 100 % breit — in Flex-Zeilen quetschen
   sie die Nachbar-Module (LEARNINGS "Image-Modul: sizing.width
   rendert nicht"). Deko-Bilder auf shrink-to-fit. */

/* !important: Divi generiert pro Instanz .et_pb_image_N{width:100%},
   geladen NACH dem Child-CSS — Spezifität allein reicht nicht überall. */
.nv-band .et_pb_image,
.nv-teaser-media .et_pb_image,
.nv-compare .nv-compare-arrow,
.nv-uu-band .et_pb_row .et_pb_image,
.nv-uu-cta .et_pb_image,
.services .nv-service-card .et_pb_image {
	width: fit-content !important;
	flex: 0 0 auto;
}

/* Teaser-Bildstapel: schrumpfen wie im Prototyp (Bilder skalieren
   über max-width:100% mit — sonst Overflow bei ≤980) */
.nv-teaser-media .nv-shot {
	flex: 0 1 auto;
	min-width: 0;
}

.nv-teaser-media .nv-shot .et_pb_image {
	width: 100% !important;
}

.nv-compare .nv-polaroid--before {
	width: var(--size-card-before) !important;
	max-width: 100%;
	flex: 0 1 auto;
}

.nv-compare .nv-polaroid--after {
	width: var(--size-card-after) !important;
	max-width: 100%;
	flex: 0 1 auto;
}

/* Polaroid-Fotos füllen ihre Karte (fit-content-Regel oben greift
   hier nicht — eigene Instanz-Regel von Divi setzt bereits 100 %) */
.nv-compare .nv-polaroid .et_pb_image,
.nv-compare .nv-polaroid .et_pb_image .et_pb_image_wrap,
.nv-compare .nv-polaroid .et_pb_image img {
	width: 100% !important;
}

/* Ergebnis-Icons: Instanz-Regel .et_pb_image_N{width:100%} streckt
   Radius/Schatten zur Ellipse — auf Icon-Breite begrenzen */
.cs-results .et_pb_image {
	width: fit-content !important;
	flex: 0 0 auto;
}

/* ---------- H1) Divi "sticky image" entschärfen ----------
   Sektionen, deren letzte Spalte mit einem Bild-Modul endet, bekommen
   et_pb_section_sticky und verlieren ihr Bottom-Padding — die
   Prototyp-Paddings wiederherstellen (Werte = Layout-JSONs). */

.hero.et_pb_section_sticky { padding-bottom: 48px !important; }
.about.et_pb_section_sticky { padding-bottom: 36px !important; }
.nv-band.et_pb_section_sticky { padding-bottom: 50px !important; }
.cta.et_pb_section_sticky { padding-bottom: 40px !important; }
.cs-hero.et_pb_section_sticky { padding-bottom: 56px !important; }
.nv-compare.et_pb_section_sticky { padding-bottom: 60px !important; }
.cs-feedback.et_pb_section_sticky { padding-bottom: 94px !important; }
.nv-uu-band.et_pb_section_sticky { padding-bottom: 70px !important; }

/* ---------- H) Case-Study-Teaser: gedrehte Screenshots ----------
   Rotation/feste Screenshot-Breiten sind nicht preset-fähig. */

.nv-shot--before img {
	width: var(--size-img-before);
	max-width: 100%;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-photo-sm);
	transform: rotate(-2deg);
}

.nv-shot--after img {
	width: var(--size-img-after);
	max-width: 100%;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-photo);
	transform: rotate(1.5deg);
}

.nv-teaser-arrow {
	flex: none;
	margin-top: 52px; /* Pfeil sitzt auf Bildhöhe (Originalmaß) */
}

/* ---------- I) Deko-Overlaps (band-decor.png) ---------- */

.nv-band .et_pb_row,
.cs-compare .et_pb_row {
	position: relative;
}

.nv-band .nv-band-decor {
	position: absolute;
	right: 0;
	top: -46px;
	height: calc(100% + 100px);
	width: auto;
	z-index: 2;
}

.nv-band .nv-band-decor img,
.nv-band .nv-band-decor .et_pb_image_wrap {
	height: 100%;
	width: auto;
}

.nv-compare-decor {
	position: absolute;
	right: -14px;
	bottom: -30px;
	height: var(--size-decor-cs);
	width: auto;
}

.nv-compare-decor img,
.nv-compare-decor .et_pb_image_wrap {
	height: 100%;
	width: auto;
}

.nv-uu-band-decor {
	margin-top: -60px;
}

.nv-uu-band-decor img {
	width: var(--size-decor);
}

.nv-compare-arrow {
	flex: none;
	margin-top: var(--space-10);
}

/* ---------- J) Meta-Leiste im Case-Study-Hero (Markup im Text-Modul) ---------- */

.nv-meta .et_pb_text_inner {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	column-gap: 0;
	row-gap: 0;
}

.nv-meta__cell {
	text-align: center;
	padding: 0 var(--space-22);
	border-left: 1px solid var(--color-line);
}

.nv-meta__cell:first-child {
	padding-left: 0;
	border-left: none;
}

.nv-meta__cell:last-child {
	/* Prototyp: 150px content-box + 2×22px Padding → hier border-box */
	max-width: 172px;
}

.nv-meta__cell svg {
	display: block;
	margin: 0 auto var(--space-10);
}

.nv-meta__cell p {
	margin: 0 !important;
	padding: 0;
}

.nv-meta__label {
	font-size: 12.5px;
	font-weight: 800;
	color: var(--color-heading);
}

.nv-meta__sub {
	font-size: 12px;
	color: var(--color-text-muted);
	margin-top: 3px !important;
	line-height: 1.5;
}

/* ---------- K) Prozess: Nummernkreise + gepunktete Linie ---------- */

.nv-steps {
	counter-reset: nv-step;
	position: relative;
}

.nv-steps::before {
	content: "";
	position: absolute;
	top: 17px;
	left: 10%;
	right: 10%;
	border-top: 2px dotted var(--color-teal);
	opacity: 0.45;
}

.nv-step {
	padding: 0 var(--space-14);
	/* Divi-Flex-Gap (30px) zwischen ::before-Kreis und Text unterbinden (LEARNINGS Flex-Gap) */
	row-gap: 0;
}

.nv-step::before {
	counter-increment: nv-step;
	content: counter(nv-step);
	position: relative;
	z-index: 1;
	width: var(--size-step);
	height: var(--size-step);
	border-radius: 50%;
	border: 1.8px solid var(--color-teal);
	background: var(--color-bg-mint-deep);
	color: var(--color-teal);
	font-weight: 800;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--space-20);
}

.nv-step .nv-step__title {
	font-size: 14px;
	font-weight: 800;
	color: var(--color-heading);
	margin: 0 0 var(--space-10) !important;
	/* Divis p-padding-bottom (1em) streckte den Schritt um ~19px */
	padding: 0 !important;
}

.nv-step p {
	margin: 0;
}

/* ---------- L) Zell-Trennlinien (Ziele / Ergebnisse / Werte / Das lieben wir) ---------- */

.nv-cells > .et_pb_column {
	padding: 0 var(--space-22);
}

.nv-cells > .et_pb_column + .et_pb_column {
	border-left: 1px solid var(--color-line);
}

.nv-cells--soft > .et_pb_column + .et_pb_column {
	border-left-color: var(--color-line-soft);
}

/* ---------- M) Polaroid-Bilder + Feedback-Foto ---------- */

.nv-polaroid-img img {
	border-radius: var(--radius-sm);
	width: 100%;
}

.nv-photo-round,
.nv-photo-round .et_pb_image_wrap {
	width: var(--size-photo-circle);
	height: var(--size-photo-circle);
	border-radius: 50%;
	overflow: hidden;
}

.nv-photo-round {
	box-shadow: var(--shadow-photo-circle);
}

.nv-photo-round img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nv-quote .nv-quote-mark {
	flex: 0 0 auto;
	width: auto;
}

/* ---------- N) Foto-Platzhalter (aus dem Prototyp: image-slots) ----------
   Echte Fotos fehlen noch — gestrichelte Slots wie im Entwurf. */

/* Divi-Text-Inner füllt die Modulhöhe nicht → Label klebte oben statt mittig */
.nv-photo-slot .et_pb_text_inner {
	height: 100%;
}

.nv-photo-slot p {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-10);
	text-align: center;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.26em;
	color: var(--color-teal);
	margin: 0;
	height: 100%;
}

.nv-photo-slot svg {
	opacity: 0.7;
}

/* Über-uns-Hero: Slot liegt mittig über dem Bild */
.nv-uu-hero-visual {
	position: relative;
}

.nv-uu-hero-img img {
	width: 100%;
	height: var(--size-hero-img-uu);
	object-fit: cover;
	/* Radius am img: Modul-Radius clippt object-fit-Bilder nicht (LEARNINGS) */
	border-radius: var(--radius-img-lg) var(--radius-img-lg) var(--radius-img-lg) var(--radius-corner-lg);
}

.nv-photo-slot--hero {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 280px;
	height: 300px;
	background: rgba(255, 253, 248, 0.82);
	border: 2px dashed var(--color-dash-teal);
	border-radius: var(--radius-frame);
}

/* Team: runde gestrichelte Foto-Rahmen */
.nv-photo-slot--circle {
	width: 180px;
	height: 200px;
	border: 2px dashed var(--color-dash-teal);
	border-radius: 50%;
	background: var(--color-bg-mint-deep);
	box-sizing: border-box; /* wie im Original explizit gesetzt */
	padding: var(--space-6);
	margin: 0 auto;
}

.nv-photo-slot--amber {
	border-color: var(--color-dash-amber);
	background: var(--color-tint-amber-light);
}

/* ---------- O) Case-Study-/Über-uns-Hero: Eckradien am Bild ---------- */

.nv-cs-hero-visual img {
	width: 100%;
	border-radius: 0 0 0 var(--radius-corner);
}

/* ---------- P) Team-Mittelblock: rotierte Handschrift + Pfeile ---------- */

.nv-team-middle {
	padding-top: 60px;
}

.nv-team-script {
	transform: rotate(-6deg);
}

.nv-team-script span {
	color: var(--color-amber);
}

.nv-team-arrows .et_pb_text_inner p {
	display: flex;
	justify-content: space-between;
	margin: var(--space-10) 0 0;
	padding: 0 var(--space-6);
}

/* ---------- Q) Nav-Links (Zurück / Nächstes Projekt) + Footer-Zeile ---------- */

.nv-navlink p {
	margin: 0;
}

.nv-navlink a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-10);
}

.nv-navlink svg {
	flex: none;
}

.nv-footer-links a + a {
	margin-left: 36px;
}

.nv-cta-center {
	flex: 1;
}

/* ============ Responsive (Divi-Breakpoints 980 / 767) ============ */

@media (max-width: 980px) {
	/* Deko-Overlaps kollidieren mit Text auf schmalen Viewports */
	.nv-band .nv-band-decor,
	.nv-compare-decor,
	.nv-band-decor-col {
		display: none;
	}

	/* Zell-Trennlinien: 2×2-Raster → nur die 2. Spalte je Zeile behält die
	   Linie. Reset als `+ .et_pb_column`, sonst verliert er (0,2,0) gegen
	   die Desktop-Regel (0,3,0). */
	.nv-cells > .et_pb_column,
	.nv-cells > .et_pb_column + .et_pb_column {
		border-left: none;
		padding: 0 var(--space-12);
	}

	.nv-cells > .et_pb_column:nth-child(even) {
		border-left: 1px solid var(--color-line);
	}

	.nv-cells--soft > .et_pb_column:nth-child(even) {
		border-left-color: var(--color-line-soft);
	}

	.nv-team-middle {
		padding-top: var(--space-16);
		/* Prototyp: Mittelblock ("Gemeinsam bringen wir …") ans Ende der gewrappten Row */
		order: 5;
	}

	/* Meta-Leiste: 2×2 */
	.nv-meta .et_pb_text_inner {
		flex-wrap: wrap;
		row-gap: var(--space-16);
	}

	.nv-meta__cell {
		flex: 1 1 40%;
	}

	.nv-meta__cell:nth-child(odd) {
		border-left: none;
		padding-left: 0;
	}
}

@media (max-width: 767px) {
	.nv-steps::before {
		display: none;
	}

	.nv-teaser-arrow,
	.nv-compare-arrow,
	.nv-hide-phone {
		display: none;
	}

	.nv-cells > .et_pb_column,
	.nv-cells > .et_pb_column + .et_pb_column,
	.nv-cells > .et_pb_column:nth-child(even) {
		padding: 0;
		/* gestapelt: alle Trennlinien aus — die spezifischeren Varianten
		   sind nötig gegen die Desktop-`+`- und die 980er-even-Regel */
		border-left: none;
	}

	/* Meta-Leiste bleibt wie im Prototyp auch auf Phone 2×2 (Regeln von 980) */
}