/*
Theme Name:   Nerdventures Studio
Theme URI:    https://nerdventures.studio
Description:  Divi-5-Child-Theme für die nerdventures-studio-Website (Landing + Unterseiten + Header/Footer). Design lebt in Design Variables, Presets und Theme-Builder-Templates — hier nur das Ventil für nicht Divi-Abbildbares (Wellen-Trenner, H1-Marker, Polaroid-Karten/Tape, Testimonial-Sterne/Avatare, Prozess-Nummernkreise + Linie, WhatsApp-Fab, Nav-Aktiv-Unterstrich) 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
*/

/* =========================================================
   Projekt-CSS — das "Ventil für die letzten Prozente".
   Regeln: jede Regel gescoped (Section-/nv-*-Klasse), nie global
   auf Divi-Basisklassen. Werte aus den CSS Custom Properties unten
   (Spiegel der Divi Design Variables — identisch mit design-tokens.json).
   ========================================================= */

:root {
	--color-teal: #0AA5B4;
	--color-teal-dark: #00707D;
	--color-teal-hover: #088E9B;
	--color-amber: #FFC426;
	--color-amber-hover: #F5B000;
	--color-card: #FFFDF8;
	--color-white: #FFFFFF;
	--color-cream-white: #FAF5EC;
	--color-mint-light: #CFF3F1;
	--color-tint-cream: #F7F1E2;
	--color-bg-mint-deep: #DFF5F4;
	--color-text: #4C4A43;
	--color-text-nav: #3E4B4A;
	--color-text-muted: #6B685E;
	--color-border-input: #DDE8E6;
	--color-tape: rgba(0,112,125,0.8);
	--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;
	--radius-bar: 3px;
	--radius-tape: 2px;
	--radius-sm: 8px;
	--radius-input: 10px;
	--radius-pill: 999px;
	--size-photo-h-hero: 300px;
	--size-photo-h-uu: 260px;
	--size-avatar: 48px;
	--size-circle-sm: 52px;
	--size-tape: 76px;
	--size-tape-sm: 70px;
	--size-tape-xs: 64px;
	--size-img-before: 230px;
	--size-img-after: 300px;
}

/* ---------- A) Wellen-Trenner ----------
   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 im Section-Padding der Layouts eingerechnet. */

.warum-booking, .leistungen, .statement-band, .testimonials, .kontakt {
	position: relative;
}

.warum-booking::before, .leistungen::before,
.statement-band::before, .statement-band::after,
.testimonials::before, .testimonials::after, .kontakt::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	z-index: 1;
}

/* Warum Booking — Welle (Seitenfarbe der Hero-Section) oben */
.warum-booking::before {
	top: 0;
	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,0 L0,0 Z' fill='%23FBFAF8'/%3E%3C/svg%3E");
}

/* Leistungen — obere Welle trägt die Mint-Farbe der Über-uns-Section */
.leistungen::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");
}

/* Statement-Band (Teal) — Wellen oben (Creme-Warm) und unten (Seitenfarbe) */
.statement-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");
}
.statement-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");
}

/* Testimonials (Mint-Deep) — Wellen oben und unten (Seitenfarbe) */
.testimonials::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");
}
.testimonials::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");
}

/* Kontakt-CTA — obere Welle (Seitenfarbe) */
.kontakt::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");
}

/* Inhalt über den Wellen halten */
.warum-booking > .et_pb_row, .leistungen > .et_pb_row,
.statement-band > .et_pb_row, .testimonials > .et_pb_row,
.kontakt > .et_pb_row { position: relative; z-index: 2; }

/* ---------- B) Wortmarke (Header) ---------- */
.nv-logo p {
	margin: 0;
	/* !important: Divi gibt Text-Absätzen line-height 2 + padding-bottom 1em */
	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 — 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);
	padding-bottom: var(--space-4);
}
/* "Home" ist ein Anker-Item (s. o.) — gezielt über den href, nicht current-menu-item.
   Nur auf der Startseite selbst aktiv markieren (body.home), sonst leuchtet "Home"
   site-weit auf jeder Unterseite mit (globales Header-Template). */
body.home .nv-header .et_pb_menu a[href$="#top"] {
	color: var(--color-teal);
	font-weight: 700;
	border-bottom: 2.5px solid var(--color-amber);
	padding-bottom: var(--space-4);
}

/* ---------- D) H1-Marker (Amber-Unterstrich unter "Agentur.") ---------- */
.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);
	border-radius: var(--radius-bar);
}

/* ---------- 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-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; }

/* ---------- F) Blurbs: Icon-Zentrierung + Titelabstände ----------
   imageIcon.alignment rendert nicht (LEARNINGS) → Container-Flex.
   Modul-Header bringt padding-bottom mit → Abstände hier. */
.was-gaeste-sehen .et_pb_main_blurb_image {
	display: flex;
	flex-direction: row;
	justify-content: center;
	column-gap: 0;
	row-gap: 0;
}
.warum-booking .et_pb_blurb .et_pb_module_header {
	margin: var(--space-4) 0 var(--space-10);
	padding: 0;
	line-height: 1.35;
}
.was-gaeste-sehen .et_pb_module_header {
	margin: 0 0 var(--space-8);
	padding: 0;
}
/* Blurb-Container (Icon links): Divi-Default-padding-left 15px zurücknehmen */
.warum-booking .et_pb_blurb_container { padding-left: 0; }

/* Info-Karten-Hover (Warum Booking) */
.warum-booking .et_pb_blurb {
	transition: transform .25s ease, box-shadow .25s ease;
}
.warum-booking .et_pb_blurb:hover {
	transform: translateY(-8px);
	box-shadow: 0 16px 34px rgba(8,120,130,0.14);
}

/* ---------- G) Leistungs-Karten: Fuß nach unten, Preis-Akzentwort ---------- */
.leistungen .nv-service-card { height: 100%; }
.leistungen .nv-service-card .nv-card-foot { margin-top: auto; }
.leistungen .nv-price p { margin: 0; }
.leistungen .nv-price strong { font-weight: 800; }
.leistungen .nv-price-word {
	font-family: var(--font-accent);
	font-weight: 500;
	font-size: 20px;
	color: var(--color-amber);
}
.leistungen .nv-service-card {
	transition: transform .25s ease, box-shadow .25s ease;
}
.leistungen .nv-service-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 16px 34px rgba(8,120,130,0.14);
}

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

/* ---------- H) Bild-Module in Flex-Gruppen ----------
   Divi rendert Image-Module 100 % breit — in Flex-Zeilen quetschen sie die
   Nachbarn (LEARNINGS "Image-Modul: sizing.width rendert nicht").
   !important: Divi generiert pro Instanz .et_pb_image_N{width:100%}. */
.statement-band .et_pb_image,
.nv-card-head .et_pb_image,
.nv-cs-media .nv-cs-arrow {
	width: fit-content !important;
	flex: 0 0 auto;
}
/* Vorher/Konzept-Screenshots (feste Breiten + leichte Rotation, nicht preset-fähig) */
.nv-cs-media .nv-shot { flex: 0 1 auto; min-width: 0; }
.nv-shot-img img {
	border-radius: var(--radius-sm);
	max-width: 100%;
}
.nv-shot--before .nv-shot-img img {
	width: var(--size-img-before);
	box-shadow: 0 10px 26px rgba(8,120,130,0.14);
	transform: rotate(-2deg);
}
.nv-shot--after .nv-shot-img img {
	width: var(--size-img-after);
	box-shadow: 0 12px 30px rgba(8,120,130,0.14);
	transform: rotate(1.5deg);
}
.nv-cs-arrow { margin-top: 52px; }

/* ---------- I) Polaroid-Karten (Foto + Klebeband + Rotation) ---------- */
.nv-polaroid {
	position: relative;
	transition: transform .25s ease, box-shadow .25s ease;
}
.nv-hero-visual .nv-polaroid { max-width: 380px; margin-left: auto; }
.nv-about-visual .nv-polaroid { max-width: 360px; }
.nv-polaroid--r2 { transform: rotate(2deg); }
.nv-polaroid--rm2 { transform: rotate(-2deg); }
.nv-polaroid:hover {
	transform: rotate(0deg) translateY(-6px);
	box-shadow: 0 18px 38px rgba(8,120,130,0.2);
}
.nv-polaroid::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%) rotate(2deg);
	width: var(--size-tape);
	height: 20px;
	background: var(--color-tape);
	box-shadow: 0 1px 3px rgba(8,120,130,0.2);
	z-index: 2;
}
.nv-polaroid .et_pb_image,
.nv-polaroid .et_pb_image .et_pb_image_wrap { width: 100% !important; }
.nv-polaroid-img img {
	width: 100%;
	display: block;
	object-fit: cover;
	border-radius: var(--radius-sm);
	height: var(--size-photo-h-hero);
}
.nv-polaroid-img--uu img { height: var(--size-photo-h-uu); }
.nv-polaroid .nv-polaroid-img { margin-bottom: 0 !important; }

/* ---------- J) Testimonials (rotierte Polaroids, Sterne, Avatare) ---------- */
.nv-testi {
	position: relative;
	height: auto;
	transition: transform .25s ease, box-shadow .25s ease;
}
.nv-testi--r1 { transform: rotate(-2.5deg); }
.nv-testi--r2 { transform: rotate(1.5deg); margin-top: 26px; }
.nv-testi--r3 { transform: rotate(2.5deg); margin-top: 8px; }
.nv-testi:hover {
	transform: rotate(0deg) translateY(-6px);
	box-shadow: 0 18px 38px rgba(8,120,130,0.18);
}
.nv-testi::before {
	content: "";
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%) rotate(-2deg);
	width: var(--size-tape-sm);
	height: 18px;
	background: var(--color-tape);
	box-shadow: 0 1px 3px rgba(8,120,130,0.12);
	z-index: 2;
}
.nv-stars p {
	display: flex;
	gap: 3px;
	justify-content: center;
	margin: 0;
}
.nv-stars svg { flex: none; }
.nv-avatar p {
	width: var(--size-avatar);
	height: var(--size-avatar);
	border-radius: 50%;
	color: var(--color-card);
	font-size: 14px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	flex: none;
}
.nv-avatar.avatar--teal p { background: var(--color-teal); }
.nv-avatar.avatar--amber p { background: var(--color-amber); }
.nv-avatar.avatar--dark p { background: var(--color-teal-dark); }

/* ---------- K) Prozess: Nummernkreise + gepunktete Linie ---------- */
.nv-steps { position: relative; }
.nv-steps::before {
	content: "";
	position: absolute;
	top: 26px;
	left: 16%;
	right: 16%;
	border-top: 2px dotted var(--color-teal);
	opacity: 0.5;
	z-index: 0;
}
.nv-step { padding: 0 30px; position: relative; }
.nv-num p {
	position: relative;
	z-index: 1;
	width: var(--size-circle-sm);
	height: var(--size-circle-sm);
	border-radius: 50%;
	color: var(--color-card);
	font-weight: 800;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--space-20) auto;
}
.nv-num.nv-num--teal p { background: var(--color-teal); box-shadow: 0 4px 12px rgba(8,120,130,0.25); }
.nv-num.nv-num--amber p { background: var(--color-amber); box-shadow: 0 4px 12px rgba(255,196,38,0.35); }

/* ---------- L) Kontakt: Eyebrow-Punkt, Notiz, Formular ---------- */
.nv-kontakt-eyebrow p {
	display: inline-flex;
	align-items: center;
	gap: var(--space-10);
	margin: 0;
}
.nv-kontakt-eyebrow .nv-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-amber);
	flex: none;
}
.nv-note {
	transform: rotate(3deg);
	transition: transform .25s ease, box-shadow .25s ease;
	position: relative;
	margin-top: 10px;
}
.nv-note:hover { transform: rotate(0deg) translateY(-6px); }
.nv-note::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%) rotate(-2deg);
	width: var(--size-tape-xs);
	height: 18px;
	background: var(--color-tape);
	box-shadow: 0 1px 3px rgba(8,120,130,0.2);
}
.nv-note-text p { margin: 0; }

/* Contact-Form-Modul an das Prototyp-Formular angleichen (Inputs, Abstände).
   !important nötig: Divi rendert pro Instanz eigenes CSS NACH dem Child-CSS
   (gleiches Muster wie bei .et_pb_image_N, s. DIVI5-LEARNINGS.md). */
/* Feld-Container: Divis 30px-Flex-row-gap killen (LEARNINGS „Flex-Gap 30px") —
   der Label→Input-Abstand soll allein die Label-margin (8px) sein. padding raus,
   den 18px-Abstand ZWISCHEN Feldern macht der row-gap des Form-Flex-Containers. */
.nv-form .et_pb_contact_field { row-gap: 0 !important; padding: 0 !important; }
.nv-form .et_pb_contact_form { row-gap: 18px !important; }
.nv-form .input,
.nv-form textarea,
.nv-form select {
	font-family: 'Nunito Sans', sans-serif !important;
	font-size: 14px !important;
	color: var(--color-text-nav) !important;
	padding: 13px 16px !important;
	border: 1px solid var(--color-border-input) !important;
	border-radius: var(--radius-input) !important;
	background-color: var(--color-white) !important;
	width: 100% !important;
}
.nv-form .input:focus,
.nv-form textarea:focus,
.nv-form select:focus { border-color: var(--color-teal) !important; }
/* Dropdown: Divis ::after-Pfeil sitzt an fixem top-Wert und driftet vom Select
   weg — ausblenden und eigenen, mittig sitzenden Chevron (teal-dark) als
   SVG-Background setzen; padding-right schafft Platz. */
.nv-form .et_pb_contact_field[data-type="select"]::after { content: none !important; }
.nv-form select.et_pb_contact_select {
	padding-right: 42px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2300707D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
}
/* Divis Feld-Label heißt .et_pb_contact_form_label (nicht -field-), ist per Default display:none
   (Divi nutzt den Feld-Titel sonst nur als Placeholder) — hier bewusst sichtbar gemacht. */
.nv-form .et_pb_contact_form_label {
	font-size: 13px !important;
	font-weight: 800 !important;
	color: var(--color-teal-dark) !important;
	margin-bottom: var(--space-8) !important;
	display: block !important;
}
/* Divis .et_contact_bottom_container bündelt Button+Captcha und ist per
   Default shrink-fit (flex:0 1 auto) — ohne Captcha bleibt es schmal und
   zieht .et_pb_button_wrapper/den Button mit. Kette bis zur Form durchreichen. */
.nv-form .et_contact_bottom_container,
.nv-form .et_pb_button_wrapper {
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
	align-self: stretch !important;
}
.nv-form .et_pb_button,
.nv-form .et_pb_contact_submit {
	background: var(--color-amber) !important;
	color: var(--color-card) !important;
	font-weight: 800;
	border: none !important;
	border-radius: var(--radius-pill) !important;
	padding: 15px 34px !important;
	box-shadow: 0 3px 10px rgba(255,196,38,0.35);
	width: 100% !important;
	display: block !important;
	text-align: center !important;
}
.nv-form .et_pb_button:hover,
.nv-form .et_pb_contact_submit:hover { background: var(--color-amber-hover) !important; }

/* ---------- M) WhatsApp Floating-Button (Code-Modul) ---------- */
.nv-fab-wa {
	position: fixed;
	right: 26px;
	bottom: 26px;
	z-index: 50;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-teal);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(8,120,130,0.35);
	transition: background .25s ease;
}
.nv-fab-wa:hover { background: var(--color-teal-hover); }

/* ---------- N) Footer-Zeile ---------- */
.nv-footer-links a + a { margin-left: 36px; }
.nv-footer-links a:hover, .nv-footer a:hover { color: var(--color-teal); }

/* ============ Responsive (Divi-Breakpoints 980 / 767) ============ */
@media (max-width: 980px) {
	/* Polaroids beim Stapeln: zentriert, max 420, Bild 5:4 (aus dem Prototyp) */
	.nv-hero-visual, .nv-about-visual { display: flex; justify-content: center; }
	.nv-hero-visual .nv-polaroid,
	.nv-about-visual .nv-polaroid { max-width: 420px; width: 100%; margin-left: 0; }
	.nv-polaroid-img img, .nv-polaroid-img--uu img { height: auto; aspect-ratio: 5 / 4; }
	/* Verbindungslinie aus, Versatz der Testimonials zurücksetzen */
	.nv-steps::before { display: none; }
	.nv-testi--r1, .nv-testi--r2, .nv-testi--r3 { margin-top: 0; }
	.nv-cs-media { flex-wrap: wrap; }
}

@media (max-width: 767px) {
	.nv-cs-arrow { display: none; }
	.nv-note-line p { flex-direction: column; }
}

/* =========================================================
   UNTERSEITEN (Phase 3, 2. Lauf): leistungen, case-studies,
   case-study, ueber-uns. Alle Regeln gescoped über Section-/nv-*-Klassen,
   nie global auf Divi-Basisklassen. Ergänzt (entfernt nichts) das Obige.
   ========================================================= */

/* --- Token-Spiegel: nur die für die Unterseiten-CSS neu benötigten Variablen --- */
:root {
	--color-amber-deep: #E0A400;
	--color-amber-text: #B47F1E;
	--color-teal-light: #7AD0CB;
	--color-teal-darker: #005B66;
	--color-text-soft: #57554D;
	--color-text-faint: #8A867A;
	--color-bg-page: #FBFAF8;
	--color-bg-cream: #F6F2E9;
	--color-bg-cream-warm: #F7F3EA;
	--color-bg-mint: #E9F2F1;
	--color-bg-tag: #E3F6F4;
	--color-tint-amber-2: #FFF3CD;
	--color-tint-mint: #CFF0EE;
	--color-bg-amber-soft: #FFF7DD;
	--color-border-warm: #EFEAE0;
	--color-divider-warm: #E5DFD2;
	--font-heading: 'Lora', serif;
	--font-body: 'Nunito Sans', sans-serif;
	--radius-card: 18px;
	--radius-card-lg: 20px;
	--radius-full: 50%;
	--size-circle-2xs: 34px;
	--size-circle-xs: 36px;
	--size-circle-md: 50px;
	--size-circle-lg: 64px;
	--size-circle-xl: 72px;
	--size-team-photo: 180px;
	--size-team-photo-h: 200px;
	--size-hero-photo-lg: 420px;
	--size-hero-photo-md: 320px;
	--font-size-h3: 19px;
	--font-size-h3-sm: 18px;
	--font-size-h3-lg: 21px;
	--font-size-h3-xl: 24px;
	--font-size-price: 32px;
	--font-size-price-sm: 28px;
	--font-size-meta: 12.5px;
	--font-size-tag: 11px;
	--font-size-eyebrow: 11px;
	--font-size-sm: 13px;
	--font-size-xs: 12px;
	--font-size-body: 15px;
	--font-size-body-sm: 14px;
	--font-size-stat: 14.5px;
	--font-size-accent-price: 20px;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;
	--font-line-snug: 1.3;
	--font-line-snug-lg: 1.45;
	--font-line-base: 1.5;
	--font-line-relaxed: 1.6;
	--font-line-loose: 1.65;
	--font-line-prose: 1.75;
	--font-line-prose-lg: 1.8;
	--border-thin: 1px;
	--border-btn: 1.5px;
	--border-dotted: 2px;
}

/* Section endet mit einem Bild-Modul als letztem Row-Kind → Divi vergibt
   automatisch et_pb_section_sticky und STREICHT das eigene padding-bottom
   der Section (LEARNINGS "Section mit Bild als letztem Modul"). Betrifft hier
   csd-ziele (letztes Goal-Icon) und uu-beide-seiten (Pfeil-Icon im Akzent). */
.csd-ziele.et_pb_section_sticky { padding-bottom: 54px !important; }
.uu-beide-seiten.et_pb_section_sticky { padding-bottom: 70px !important; }

/* --- Wellen-Trenner (baked Data-URI, Farben eingebacken) --- */
.l-studio-care, .l-band, .cs-projekte, .cs-band, .csd-ausgangspunkt, .csd-ziele,
.csd-prozess, .csd-ergebnisse, .csd-feedback, .uu-beide-seiten { position: relative; }
.l-studio-care::before, .l-band::before, .l-band::after, .cs-projekte::before,
.cs-band::before, .cs-band::after, .csd-ausgangspunkt::before, .csd-ziele::before,
.csd-prozess::before, .csd-prozess::after, .csd-ergebnisse::before,
.csd-feedback::before, .csd-feedback::after, .uu-beide-seiten::before, .uu-beide-seiten::after {
	content: ""; position: absolute; left: 0; right: 0; pointer-events: none;
	background-repeat: no-repeat; background-size: 100% 100%; z-index: 1;
}
.l-studio-care::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 54' preserveAspectRatio='none'%3E%3Cpath d='M0,28 C160,52 340,6 540,20 C740,34 900,50 1080,30 C1220,15 1340,10 1440,26 L1440,0 L0,0 Z' fill='%23FBFAF8'/%3E%3C/svg%3E");
}
.l-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='%23DFF5F4'/%3E%3C/svg%3E");
}
.l-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='%23F6F2E9'/%3E%3C/svg%3E");
}
.cs-projekte::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,24 C150,44 320,6 500,18 C680,30 840,44 1020,26 C1160,12 1300,10 1440,22 L1440,0 L0,0 Z' fill='%23FBFAF8'/%3E%3C/svg%3E");
}
.cs-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='%23F6F2E9'/%3E%3C/svg%3E");
}
.cs-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='%23E9F2F1'/%3E%3C/svg%3E");
}
.csd-ausgangspunkt::before {
	top: 0;
	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");
}
.csd-ziele::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,24 C150,44 320,6 500,18 C680,30 840,44 1020,26 C1160,12 1300,10 1440,22 L1440,0 L0,0 Z' fill='%23F6F2E9'/%3E%3C/svg%3E");
}
.csd-prozess::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");
}
.csd-prozess::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");
}
.csd-ergebnisse::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");
}
.csd-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");
}
.csd-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");
}
.uu-beide-seiten::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,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='%23DFF5F4'/%3E%3C/svg%3E");
}
.uu-beide-seiten::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");
}
.l-studio-care > .et_pb_row, .l-band > .et_pb_row, .cs-projekte > .et_pb_row,
.cs-band > .et_pb_row, .csd-ausgangspunkt > .et_pb_row, .csd-ziele > .et_pb_row,
.csd-prozess > .et_pb_row, .csd-ergebnisse > .et_pb_row, .csd-feedback > .et_pb_row,
.uu-beide-seiten > .et_pb_row { position: relative; z-index: 2; }

/* --- Bild-Module in Flex-Kontexten schrumpfen lassen (LEARNINGS Image-sizing) --- */
.nv-stat-icon .et_pb_image, .csd-meta-icon .et_pb_image, .l-info-icon .et_pb_image,
.nv-tier-head .et_pb_image, .nv-tier-ideal .et_pb_image, .uu-love-icon .et_pb_image,
.csd-goal-num .et_pb_image, .l-inclusive .et_pb_image, .l-band .et_pb_image,
.cs-band .et_pb_image, .uu-band-accent .et_pb_image, .uu-conn-arrows .et_pb_image,
.csd-goals-squiggle, .uu-globe {
	width: fit-content !important;
	flex: 0 0 auto;
}
.nv-stat-icon .et_pb_image { margin: 0 auto 16px auto !important; }
.csd-meta-icon .et_pb_image { margin: 0 auto 10px auto !important; }

/* --- Hero-Bausteine der Unterseiten --- */
.nv-hl--teal { color: var(--color-teal); }
.nv-polaroid-img--lg img { height: var(--size-hero-photo-lg); }
.nv-polaroid-img--md img { height: var(--size-hero-photo-md); }
.cs-hero .nv-eyebrow-center p, .cs-hero .nv-kontakt-eyebrow p { justify-content: center; }
.nv-eyebrow-deco p { display: flex; align-items: center; justify-content: center; margin: 0; }
.nv-pakete-lead { max-width: var(--size-prose-md, 560px) !important; margin-left: auto !important; margin-right: auto !important; }
.csd-back p { margin: 0; }
.csd-back a { display: inline-flex; align-items: center; gap: 10px; color: var(--color-teal); font-weight: 700; }
.csd-back svg { flex: none; }

/* --- Tarif-Karten (Website-Pakete + Studio Care) --- */
.nv-tier { position: relative; border: var(--border-thin) solid var(--color-border-warm); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: transform .25s ease, box-shadow .25s ease; }
.nv-tier:hover { transform: translateY(-8px); box-shadow: 0 16px 34px rgba(8,120,130,0.14); }
.nv-tier--feature { border: var(--border-btn) solid var(--color-amber); box-shadow: var(--shadow-card-lg); }
.nv-tier--feature:hover { box-shadow: 0 20px 40px rgba(255,196,38,0.22); }
/* Divi setzt auf Modul-Wrappern selbst position:relative — ein top:-13px am
   inneren <p> positioniert sich dadurch relativ zum (leeren, aber trotzdem
   flow-positionierten) Modul-Wrapper statt zur Karte, was das Badge ~30px zu
   tief hängen ließ. Fix: das Modul selbst absolut positionieren, <p> normal. */
.nv-tier-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); }
.nv-tier-badge p { background: var(--color-amber); color: var(--color-card); font-size: var(--font-size-eyebrow); font-weight: 800; letter-spacing: 0.16em; padding: 6px 18px; border-radius: var(--radius-pill); white-space: nowrap; margin: 0; }
.nv-tier-title h3 { text-align: center; line-height: var(--font-line-snug); }
.nv-tier--web .nv-tier-title h3 { font-size: var(--font-size-h3-lg) !important; }
.nv-tier--care .nv-tier-title h3 { color: var(--color-teal) !important; }
.nv-tier-kicker p { text-align: center; font-size: var(--font-size-eyebrow); font-weight: 800; letter-spacing: 0.22em; color: var(--color-teal); margin: 10px 0 18px; }
.nv-tier-kicker--amber p { color: var(--color-amber-deep); }
.nv-tier-kicker--muted p { color: var(--color-text-muted); }
.nv-tier-desc p { text-align: center; font-size: var(--font-size-sm); line-height: 1.7; color: var(--color-text-soft); margin: 0 0 20px; }
.nv-tier-plus p { text-align: center; font-size: var(--font-size-eyebrow); font-weight: 800; letter-spacing: 0.14em; color: var(--color-teal); margin: 0 0 10px; }
.nv-tier-list { flex: 1 1 auto; }
.nv-tier-list p { justify-content: flex-start; align-items: flex-start; }
.nv-tier-list span { color: var(--color-text-nav); }
.nv-tier-price { margin: 26px 0 18px !important; }
.nv-tier-price--care { margin: 0 0 18px !important; }
.nv-tier-price p { text-align: center; margin: 0; }
.nv-tier-price .cur { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.nv-tier-price .amt { font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-price); color: var(--color-teal-dark); }
.nv-tier-price--care .amt { font-size: var(--font-size-price-sm); }
.nv-tier-price .amt--sm { font-size: var(--font-size-h3-xl); }
.nv-tier-price .unit { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.nv-tier-btn .et_pb_button { display: block !important; width: 100% !important; text-align: center !important; }
.nv-tier-ideal { background: var(--color-bg-tag); border-radius: 0 0 17px 17px; margin: 20px -26px -26px -26px !important; padding: 18px 26px 22px !important; }
.nv-tier-ideal-label p { font-size: 10.5px; font-weight: 800; letter-spacing: 0.18em; color: var(--color-teal-dark); margin: 0 0 5px; }
.nv-tier-ideal-text p { font-size: var(--font-size-meta); line-height: 1.65; color: var(--color-text-soft); margin: 0; }

/* --- Inklusive-Banner (Leistungen) --- */
.l-inclusive { background: var(--color-card); border-radius: var(--radius-card); padding: 22px 34px; box-shadow: 0 4px 16px rgba(8,120,130,0.07); margin-top: 26px !important; }
.l-inclusive-text { flex: 1; }
.l-inclusive-label p { font-size: var(--font-size-sm); font-weight: 800; color: var(--color-teal); margin: 0 0 4px; }
.l-inclusive-title h3 { font-size: var(--font-size-h3) !important; }
.l-inclusive-text p { font-size: var(--font-size-sm); line-height: 1.7; color: var(--color-text-soft); margin: 0; }

/* --- Studio-Care-Intro + Gratis-Badge (Code-Modul) --- */
.l-care-intro { margin-bottom: 36px !important; }
.l-care-intro .nv-h2-caveat { font-family: var(--font-accent); font-weight: 500; color: var(--color-teal); }
.l-care-badge-col { display: flex; align-items: center; justify-content: center; }
.l-care-badge { position: relative; width: 214px; height: 214px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin: 0 auto; }
.l-care-badge__text { position: relative; text-align: center; font-size: var(--font-size-sm); font-weight: 800; color: var(--color-teal); line-height: 1.6; }
.l-care-badge__text .free { color: var(--color-amber); font-size: var(--font-size-stat); letter-spacing: 0.05em; }

/* --- Info-Reihe (Studio-Care-Fuß) --- */
.l-info-row { background: var(--color-card); border-radius: var(--radius-card); padding: 26px 0; margin-top: 26px !important; }
.l-info-item { flex: 1; padding: 0 30px; }
.l-info-item + .l-info-item { border-left: var(--border-thin) solid var(--color-border-warm); }
.l-info-title p { font-size: var(--font-size-sm); font-weight: 800; color: var(--color-teal-dark); margin: 0 0 6px; }
.l-info-text p { font-size: var(--font-size-meta); line-height: 1.65; color: var(--color-text-soft); margin: 0; }

/* --- Projekt-Karten (Case Studies) --- */
.nv-project { background: var(--color-card); border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 8px 22px rgba(8,120,130,0.08); transition: transform .25s ease, box-shadow .25s ease; }
.nv-project:hover { transform: translateY(-8px); box-shadow: 0 18px 38px rgba(8,120,130,0.16); }
.nv-project-media { position: relative; }
/* Divis Bild-Modul-Core-CSS (.et_pb_image .et_pb_image_wrap img) ist
   spezifischer als eine 1-Klassen-Regel und gewinnt sonst (LEARNINGS
   "Divi generiert pro Instanz Bild-CSS nach dem Child-CSS") — !important. */
.nv-project-photo img { width: 100% !important; height: 210px !important; object-fit: cover !important; display: block !important; border-radius: 0 !important; }
/* Gleicher Fix wie bei .nv-tier-badge: Divi-Modul-Wrapper selbst absolut
   positionieren statt das innere <p>, sonst hängt der Badge zu tief
   (relativ zum flow-positionierten, leeren Modul-Wrapper statt zum Foto). */
.nv-project-badge { position: absolute; top: 14px; left: 14px; }
.nv-project-badge p { color: var(--color-card); font-size: 10px; font-weight: 800; letter-spacing: 0.14em; padding: 6px 14px; border-radius: var(--radius-pill); margin: 0; }
.nv-project-badge--live p { background: var(--color-teal); }
.nv-project-badge--wip p { background: var(--color-amber); }
.nv-project-photo, .nv-project-photo .et_pb_image_wrap { width: 100% !important; }
.nv-project-body { padding: 24px 26px 26px; flex: 1; }
.nv-project-loc p { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-eyebrow); font-weight: 700; color: var(--color-text-muted); margin: 0 0 8px; }
.nv-project-title h3 { font-size: var(--font-size-h3-lg) !important; }
.nv-project-sub p { margin: 0 0 12px; }
.nv-project-text p { margin: 0 0 18px; }
.nv-project-tags p { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.nv-tag { background: var(--color-bg-tag); color: var(--color-teal-dark); font-size: var(--font-size-tag); font-weight: 700; padding: 5px 12px; border-radius: var(--radius-pill); }
.nv-tag--amber { background: var(--color-tint-amber-2); color: var(--color-amber-text); }
.nv-project-link p { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--color-teal); margin: 0; }
.nv-project-link a { color: var(--color-teal); display: inline-flex; align-items: center; gap: 10px; }
.nv-project-link--muted p, .nv-project-link--muted a { color: var(--color-text-faint); }
.nv-project--cta { background: transparent; border: 2px dashed var(--color-teal-light); box-shadow: none; padding: 40px 30px; text-align: center; }
.nv-project--cta:hover { background: var(--color-bg-tag); box-shadow: none; transform: none; }
.nv-project-plus p { width: var(--size-circle-lg); height: var(--size-circle-lg); border-radius: 50%; background: var(--color-teal); display: flex; align-items: center; justify-content: center; margin: 0 0 20px; box-shadow: 0 6px 16px rgba(8,120,130,0.25); }
.nv-project--cta .nv-project-text p { max-width: 240px; margin: 0 auto 22px; }

/* --- Case-Study Meta-Strip --- */
.csd-meta-item { text-align: center; padding: 0 22px; }
.csd-meta-item:first-child { padding-left: 0; }
.csd-meta-item + .csd-meta-item { border-left: var(--border-thin) solid var(--color-divider-warm); }
.csd-meta-label p { font-size: var(--font-size-meta); font-weight: 800; color: var(--color-teal-dark); margin: 0; }
.csd-meta-value p { font-size: var(--font-size-xs); color: var(--color-text-muted); margin: 3px 0 0; line-height: 1.5; }

/* --- Ziele 2×2 --- */
.csd-goals-grid > .et_pb_module { flex: 0 1 calc(50% - 17px); }
.csd-goal-num p { margin: 0; }
.csd-goal-title p { font-size: var(--font-size-body); font-weight: 800; color: var(--color-teal-dark); margin: 0 0 6px; }
.csd-goal-text p { font-size: var(--font-size-sm); line-height: 1.7; color: var(--color-text-soft); margin: 0; }

/* --- 5-Schritt-Prozess-Timeline --- */
.csd-steps { position: relative; }
.csd-steps::before { content: ""; position: absolute; top: 17px; left: 10%; right: 10%; border-top: var(--border-dotted) dotted var(--color-teal); opacity: 0.45; z-index: 0; }
.csd-pstep { position: relative; z-index: 1; padding: 0 12px; }
.csd-pstep-num p { width: var(--size-circle-xs); height: var(--size-circle-xs); 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: var(--font-size-sm); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.csd-pstep-title p { font-size: var(--font-size-body-sm); font-weight: 800; color: var(--color-teal-dark); text-align: center; margin: 0 0 10px; }
.csd-pstep-text p { font-size: var(--font-size-meta); line-height: 1.7; color: var(--color-text-soft); margin: 0; }

/* --- Vorher/Nachher (Code-Modul, Prototyp-Klassen) --- */
.csd-beforeafter-wrap .beforeafter { display: flex; align-items: flex-start; justify-content: center; gap: 40px; flex-wrap: wrap; }
/* Mockup-Spalten haben feste Inline-Breiten (380/470px) → auf schmalen
   Viewports über max-width kappen, sonst horizontaler Overflow @375. */
.csd-beforeafter-wrap .beforeafter > div { max-width: 100%; }
.csd-beforeafter-wrap .mockup-cap { font-family: var(--font-accent); font-weight: 500; font-size: 26px; margin-bottom: 12px; }
.csd-beforeafter-wrap .mockup-cap small { font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: 700; }
.csd-beforeafter-wrap .mockup-notes { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.csd-beforeafter-wrap .mockup-note { display: flex; gap: 8px; align-items: center; }
.csd-beforeafter-wrap .mockup-note span { font-size: var(--font-size-xs); color: var(--color-text-soft); }

/* --- Design-Entscheidungs-Karten (Deko-Kopf = Code-Modul, Body nativ) --- */
.csd-design { border-top: var(--border-thin) solid var(--color-border-warm); }
.csd-design-card { background: var(--color-card); border: var(--border-thin) solid var(--color-border-warm); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); transition: transform .25s ease, box-shadow .25s ease; }
.csd-design-card:hover { transform: translateY(-8px); box-shadow: 0 16px 34px rgba(8,120,130,0.14); }
.csd-design-body { padding: 24px 26px 28px; }
.csd-design-h3 h3 { font-size: var(--font-size-h3-sm) !important; }
.csd-design-body p { font-size: var(--font-size-sm); line-height: 1.75; color: var(--color-text-muted); }

/* --- Stat-Reihen (Ergebnisse + Werte) --- */
.csd-stats > .et_pb_column, .uu-stats > .et_pb_column { text-align: center; padding: 0 22px; }
.csd-stats > .et_pb_column + .et_pb_column, .uu-stats > .et_pb_column + .et_pb_column { border-left: var(--border-thin) solid var(--color-divider-warm); }
.nv-stat-title h3 { font-size: var(--font-size-h3-sm) !important; }
.nv-stat-text p { font-size: var(--font-size-meta); line-height: 1.7; color: var(--color-text-muted); }

/* --- Feedback (Pull-Quote | CTA-Karte) --- */
.csd-pq-mark p { font-family: var(--font-heading); font-size: 64px; line-height: 0.8; color: var(--color-teal); margin: 0; }
.csd-pq-text p { color: var(--color-teal); }
.csd-pq-author p { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-soft); margin: 16px 0 0; }
.csd-feedback-cta { transition: transform .25s ease, box-shadow .25s ease; }
.csd-feedback-cta:hover { transform: translateY(-8px); box-shadow: 0 16px 34px rgba(8,120,130,0.14); }
.csd-cta-title p { font-size: var(--font-size-body); font-weight: 800; color: var(--color-teal-dark); margin: 0 0 10px; }
.csd-cta-text p { font-size: var(--font-size-sm); line-height: 1.7; color: var(--color-text-muted); margin: 0; }

/* --- Über uns: Hero-Bullets --- */
.uu-hero-bullets { margin-top: 32px !important; }
.uu-hero-bullet p { display: flex; gap: 16px; align-items: flex-start; margin: 0; }
.uu-hero-bullet svg { flex: none; }
.uu-hero-bullet span { font-size: var(--font-size-body-sm); font-weight: 600; color: var(--color-text-nav); line-height: 1.6; }

/* --- Über uns: Beide-Seiten-Band --- */
.uu-globe { opacity: 0.5; margin: 0 auto; }
.uu-band-caveat p { color: var(--color-teal); }
.uu-band-p p { max-width: 460px; }
.uu-band-accent-text p { color: var(--color-teal); line-height: 1.35; }

/* --- Über uns: Werte-/Team-/Love-Blöcke --- */
.uu-team-sec { border-top: var(--border-thin) solid var(--color-border-warm); }
.uu-team { grid-template-columns: var(--size-team-photo) 1fr 210px 1fr var(--size-team-photo) !important; column-gap: 34px !important; align-items: start !important; }
.uu-team-photo { width: var(--size-team-photo); height: var(--size-team-photo-h); border: var(--border-btn) solid var(--color-teal); border-radius: 50%; background: var(--color-bg-tag); padding: 6px; margin: 0 auto; }
.uu-team-photo--amber { border-color: var(--color-amber); background: var(--color-tint-amber-2); }
.uu-team-photo-img, .uu-team-photo-img .et_pb_image_wrap { width: 100% !important; }
.uu-team-photo-img img { width: 100% !important; height: 184px !important; object-fit: cover !important; border-radius: 50% !important; display: block !important; }
.uu-bio-name h3 { font-size: var(--font-size-h3-xl) !important; }
.uu-bio-role p { color: var(--color-teal); }
.uu-bio-p p { font-size: var(--font-size-sm); line-height: 1.75; color: var(--color-text-soft); }
.uu-bio-love p { font-size: var(--font-size-sm); font-weight: 800; color: var(--color-teal-dark); margin: 0; }
.uu-bio-checks span { font-weight: 400; color: var(--color-text-soft); }
.uu-connector { padding-top: 60px; text-align: center; }
.uu-conn-text p { color: var(--color-teal); transform: rotate(-6deg); margin: 0; }
.uu-conn-text .nv-amber { color: var(--color-amber); }
.uu-conn-arrows { width: 100%; padding: 0 6px; margin-top: 10px; }
.uu-love { padding: 0 22px; }
.uu-love-text p { font-size: var(--font-size-sm); line-height: 1.7; color: var(--color-text-nav); margin: 0; }
.uu-love-row > .et_pb_column + .et_pb_column { border-left: var(--border-thin) solid var(--color-divider-warm); }

/* ============ Responsive Unterseiten (980 / 767) ============ */
@media (max-width: 980px) {
	.csd-meta-item, .csd-meta-item + .csd-meta-item { border-left: none; padding: 0; flex: 1 1 40%; }
	.l-info-item + .l-info-item { border-left: none; border-top: var(--border-thin) solid var(--color-border-warm); padding-top: 22px; }
	.csd-stats > .et_pb_column + .et_pb_column, .uu-stats > .et_pb_column + .et_pb_column,
	.uu-love-row > .et_pb_column + .et_pb_column { border-left: none; }
	.csd-steps::before { display: none; }
	.uu-team { grid-template-columns: 1fr 1fr !important; }
	.uu-connector { grid-column: 1 / -1; padding-top: 0; }
	.uu-globe { width: 90px !important; height: 90px; }
}
@media (max-width: 767px) {
	.csd-meta-item, .csd-meta-item + .csd-meta-item { flex: 1 1 100%; }
	.csd-goals-grid > .et_pb_module { flex: 1 1 100%; }
	.uu-team { grid-template-columns: 1fr !important; }
	.nv-tier-btn .et_pb_button { width: 100% !important; }
}