/*
Theme Name:   danimaas-design
Theme URI:    https://danimaas.com
Description:  Divi-5-Child-Theme für danimaas. (Webdesign für Coaches, Trainer &
              Selbstständige). Das Design lebt in Design Variables, Presets und
              Theme-Builder-Templates — hier steht nur, was sich dort nicht
              abbilden lässt (~5 %).
Author:       danimaas.
Author URI:   https://danimaas.com
Template:     Divi
Version:      1.0.0
License:      GPL-2.0-or-later
Text Domain:  danimaas-design
*/

/* Spiegel der Divi Design Variables — GENERIERT aus design/design-tokens.json
   (tools/make-child-theme.php). Nicht von Hand ändern: bei Token-Änderungen
   den Generator erneut laufen lassen. */
:root {

	/* ---- Farben ---- */
	--color-pink: #E01274;
	--color-pink-btn: #D80F6D;
	--color-pink-btn-hover: #C60F63;
	--color-pink-logo: #FB5E8E;
	--color-pink-tape: rgba(216,15,109,0.55);
	--color-ink: #1B171A;
	--color-ink-dark: #16121A;
	--color-ink-soft: #241F22;
	--color-ink-border: #292427;
	--color-text: #2A2529;
	--color-text-soft: #3A3438;
	--color-text-muted: #4E484C;
	--color-faint: #B9B2B5;
	--color-placeholder: #A39CA0;
	--color-mockup-line: #8B8489;
	--color-dot-pattern: #DDD6D9;
	--color-tape-gray: rgba(160,152,156,0.40);
	--color-muted-text: #7B7478;
	--color-bg-page: #FCFAFA;
	--color-bg-rose: #FAF2F5;
	--color-bg-rose-deep: #FAE3EC;
	--color-bg-rose-tint: #FDEDF4;
	--color-bg-form: #FDFBFC;
	--color-bg-neutral: #F5F1F2;
	--color-card: #FFFFFF;
	--color-border: #E4DFE1;
	--color-border-input: #DCD6D9;
	--color-line: #EFEAEC;
	--color-border-soft: #E0D5DA;
	--color-border-pink-soft: #F3D3E2;
	--color-swatch-sun: #FFD447;
	--color-swatch-mint: #42B8A5;

	/* ---- Schriften ---- */
	--font-body: 'Plus Jakarta Sans', sans-serif;
	--font-mono: 'IBM Plex Mono', monospace;
	--font-script: 'Caveat', cursive;
	--font-logo: 'Alfa Slab One', serif;
	--font-signature: 'Amsterdam Four', 'Yellowtail', cursive;

	/* ---- Zahlenwerte ---- */
	--font-size-h1: 57px;
	--font-size-h1-tablet: 42px;
	--font-size-h1-phone: 34px;
	--font-size-h1-md: 52px;
	--font-size-h1-md-tablet: 40px;
	--font-size-h1-md-phone: 32px;
	--font-size-h1-sm: 56px;
	--font-size-h1-sm-tablet: 42px;
	--font-size-h1-sm-phone: 32px;
	--font-size-h1-xs: 50px;
	--font-size-h1-xs-tablet: 38px;
	--font-size-h1-xs-phone: 30px;
	--font-size-h1-xxs: 48px;
	--font-size-h1-xxs-tablet: 36px;
	--font-size-h1-xxs-phone: 28px;
	--font-size-h2-lg: 40px;
	--font-size-h2-lg-tablet: 32px;
	--font-size-h2-lg-phone: 28px;
	--font-size-h2: 37px;
	--font-size-h2-tablet: 30px;
	--font-size-h2-phone: 26px;
	--font-size-h2-md: 36px;
	--font-size-h2-md-tablet: 29px;
	--font-size-h2-md-phone: 25px;
	--font-size-h2-sm: 34px;
	--font-size-h2-sm-tablet: 28px;
	--font-size-h2-sm-phone: 24px;
	--font-size-h3: 22px;
	--font-size-h3-tablet: 20px;
	--font-size-h3-phone: 19px;
	--font-size-h3-sm: 21px;
	--font-size-h3-xs: 17px;
	--font-size-item-title: 15px;
	--font-size-item-title-lg: 16px;
	--font-size-lead: 16.5px;
	--font-size-lead-phone: 15.5px;
	--font-size-lead-lg: 16px;
	--font-size-lead-lg-phone: 15px;
	--font-size-body-lg: 15.5px;
	--font-size-body: 15px;
	--font-size-nav: 14.5px;
	--font-size-sm: 14px;
	--font-size-card: 13.5px;
	--font-size-xs: 13px;
	--font-size-xs-sm: 12.5px;
	--font-size-eyebrow: 12.5px;
	--font-size-2xs: 12px;
	--font-size-tag: 11.5px;
	--font-size-eyebrow-sm: 11px;
	--font-size-3xs: 10.5px;
	--font-size-4xs: 9.5px;
	--font-size-logo: 46px;
	--font-size-logo-sm: 34px;
	--font-size-logo-num-lg: 40px;
	--font-size-logo-num: 30px;
	--font-size-signature: 52px;
	--font-size-signature-tablet: 42px;
	--font-size-signature-phone: 36px;
	--font-size-signature-lg: 64px;
	--font-size-signature-lg-tablet: 48px;
	--font-size-signature-lg-phone: 40px;
	--font-size-signature-md: 44px;
	--font-size-signature-md-tablet: 36px;
	--font-size-signature-md-phone: 30px;
	--font-size-signature-sm: 38px;
	--font-size-signature-sm-tablet: 32px;
	--font-size-signature-sm-phone: 28px;
	--font-size-signature-head: 21px;
	--font-size-signature-foot: 16px;
	--font-size-script-2xl: 74px;
	--font-size-script-2xl-tablet: 60px;
	--font-size-script-2xl-phone: 52px;
	--font-size-script-xl: 44px;
	--font-size-script-lg: 27px;
	--font-size-script: 25px;
	--font-size-script-md: 24px;
	--font-size-script-sm: 21px;
	--font-size-script-xs: 19px;
	--font-size-script-2xs: 28px;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;
	--font-line-logo: 0.95;
	--font-line-tight: 1.09;
	--font-line-tight-md: 1.1;
	--font-line-tight-lg: 1.12;
	--font-line-h2: 1.2;
	--font-line-h2-loose: 1.25;
	--font-line-snug: 1.3;
	--font-line-base: 1.5;
	--font-line-relaxed: 1.6;
	--font-line-relaxed-lg: 1.65;
	--font-line-loose: 1.7;
	--font-line-loose-lg: 1.75;
	--font-line-prose: 1.75;
	--font-line-prose-lg: 1.8;
	--font-track-h1: -1.5px;
	--font-track-h1-md: -1.2px;
	--font-track-h1-lg: -1.3px;
	--font-track-h1-xl: -1.4px;
	--font-track-h2: -0.8px;
	--font-track-h2-sm: -0.7px;
	--font-track-h2-lg: -1px;
	--font-track-logo: -2px;
	--font-track-logo-sm: -1.5px;
	--font-track-eyebrow: 2.5px;
	--font-track-eyebrow-hero: 1.5px;
	--font-track-counter: 1px;
	--space-4: 4px;
	--space-6: 6px;
	--space-7: 7px;
	--space-8: 8px;
	--space-9: 9px;
	--space-10: 10px;
	--space-11: 11px;
	--space-12: 12px;
	--space-14: 14px;
	--space-16: 16px;
	--space-18: 18px;
	--space-20: 20px;
	--space-22: 22px;
	--space-24: 24px;
	--space-26: 26px;
	--space-28: 28px;
	--space-30: 30px;
	--space-32: 32px;
	--space-34: 34px;
	--space-36: 36px;
	--space-38: 38px;
	--space-40: 40px;
	--space-44: 44px;
	--space-48: 48px;
	--space-52: 52px;
	--space-56: 56px;
	--space-60: 60px;
	--space-64: 64px;
	--space-70: 70px;
	--space-80: 80px;
	--space-90: 90px;
	--space-96: 96px;
	--space-page-x: 40px;
	--space-page-x-tablet: 32px;
	--space-page-x-phone: 20px;
	--radius-tag: 4px;
	--radius-sm: 6px;
	--radius-input: 8px;
	--radius-md: 10px;
	--radius-lg: 12px;
	--radius-card-sm: 14px;
	--radius-card: 16px;
	--radius-pill: 999px;
	--radius-full: 50%;
	--border-thin: 1px;
	--border-card: 1.3px;
	--border-btn: 1.5px;
	--border-btn-md: 1.6px;
	--border-btn-lg: 1.8px;
	--border-divider: 1.5px;
	--border-strong: 2px;
	--border-accent: 2.2px;
	--border-mockup: 2.5px;
	--border-dashed: 2px;
	--border-underline: 3px;
	--border-underline-lg: 4px;
	--border-underline-xl: 5px;
	--size-dot: 8px;
	--size-circle-icon: 40px;
	--size-circle-icon-sm: 32px;
	--size-circle-step: 38px;
	--size-btn-round: 44px;
	--size-btn-round-lg: 58px;
	--size-container: 1100px;
	--size-container-narrow: 1050px;
	--size-content-narrow: 980px;
	--size-content-narrow-sm: 930px;
	--size-hero-media: 420px;
	--size-portrait: 330px;
	--size-portrait-h: 360px;
	--size-portrait-lg: 340px;
	--size-portrait-lg-h: 400px;
	--size-prose: 480px;
	--size-prose-sm: 430px;
	--size-prose-md: 520px;
	--size-prose-lg: 600px;
	--size-prose-xs: 560px;
	--size-prose-2xs: 500px;
	--size-prose-cta: 800px;
	--opacity-dots: 0.7;
	--opacity-dots-sm: 0.55;
	--opacity-line-dashed: 0.4;

	/* ---- Schatten & Text ---- */
	--shadow-cta: 0 6px 18px rgba(216,15,109,0.28);
	--shadow-cta-sm: 0 5px 14px rgba(216,15,109,0.30);
	--shadow-cta-form: 0 6px 16px rgba(216,15,109,0.25);
	--shadow-btn-round: 0 4px 12px rgba(216,15,109,0.25);
	--shadow-wa-float: 0 8px 22px rgba(224,18,116,0.4);
	--shadow-card: 0 3px 10px rgba(27,23,26,0.04);
	--shadow-card-sm: 0 2px 6px rgba(27,23,26,0.03);
	--shadow-card-hl: 0 8px 24px rgba(216,15,109,0.12);
	--shadow-card-rot: 0 2px 8px rgba(27,23,26,0.05);
	--shadow-form: 0 4px 16px rgba(27,23,26,0.05);
	--shadow-polaroid: 0 14px 34px rgba(27,23,26,0.14);
	--shadow-sticky: 0 8px 20px rgba(27,23,26,0.12);
	--shadow-sticky-lg: 0 10px 24px rgba(27,23,26,0.14);
	--shadow-mockup: 5px 8px 0 rgba(41,36,39,0.06);
	--shadow-circle-badge: 0 6px 20px rgba(27,23,26,0.08);
	--shadow-hover-card: 0 16px 34px rgba(27,23,26,0.10);
	--text-price: Preis auf Anfrage;
	--text-email: hallo@danimaas.com;
	--text-whatsapp: +49 123 456789;
	--text-copyright: © 2026 danimaas.com;
	--text-slogan: MAASarbeit statt Massenabfertigung;
}

/* =========================================================
   Projekt-CSS — das „Ventil für die letzten 5 %".

   Hier steht NUR, was sich nicht über Design Variables, Presets
   oder Theme-Builder-Templates abbilden lässt:
     - Code-Modul-Komponenten (Browser-Mockup, Polaroid, Portfolio-
       Slider, Kontaktformular, Chips, Badges, Logo, Sticky-Notes)
     - Deko ohne Divi-Pendant (Kritzel-Anmerkungen, Schrägkanten,
       Kreis-um-Wort, MAAS-Balken, Rosa-Glow, Punkteraster)
     - Divi-Quirk-Fixes aus DIVI5-LEARNINGS.md
   Alles gescoped über dm-*-Klassen; keine Divi-Basisklasse global.
   ========================================================= */

/* ---- Seitenhintergrund ----
   Pflicht, nicht Kosmetik: Die Schrägkanten der Sektionen entstehen über
   clip-path — die weggeschnittenen Keile geben den Blick auf den
   BODY-Hintergrund frei. WordPress/Divi lassen den standardmäßig auf
   #FFFFFF, wodurch an JEDEM Sektionsübergang ein hell-weißer Keil sichtbar
   wurde (vom Nutzer gemeldet). Der Prototyp setzt hier
   `html, body { background: var(--color-bg-page) }` (#FCFAFA) — dieselbe
   Farbe wie die angrenzenden Sektionen, dadurch wirkt die Schräge als
   sauberer Übergang statt als weißer Riss. */
html, body { background: var(--color-bg-page); }

/* ---- Utility-Spans in Modul-Inhalten ---- */
.dm-pink { color: var(--color-pink); }
.dm-ink { color: var(--color-ink); }
.dm-sep { color: var(--color-faint); }

/* ---- Icon-Bildmodule: Divi rendert .et_pb_image_N{width:100%} und lädt es
       NACH dem Child-CSS — !important ist Pflicht (LEARNINGS) ---- */
.dm-pcard__icon.et_pb_module,
.dm-pcard__icon .et_pb_image_wrap { width: fit-content !important; flex: 0 0 auto !important; }
.dm-feature .et_pb_main_blurb_image .et_pb_image_wrap img,
.dm-pain-card .et_pb_main_blurb_image .et_pb_image_wrap img { display: block; }

/* ---- Eyebrow: Mono-Kicker mit pinkem Punkt ---- */
.dm-eyebrow .et_pb_text_inner p {
  display: flex; align-items: center; gap: var(--space-9);
  flex-wrap: wrap; margin: 0; padding: 0;
}
.dm-eyebrow__dot {
  width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-full);
  background: var(--color-pink); flex: none; display: inline-block;
}

/* ---- Heading-Marker (Unterstriche) ---- */
.dm-u__mark {
  display: inline-block; border-bottom: var(--border-underline-lg) solid var(--color-pink);
  padding-bottom: 2px;
}
.dm-u-pink { border-bottom: var(--border-strong) solid var(--color-pink); }
/* Divi setzt am Heading NUR die Familie aus der Variablen (ohne Fallback-Stack);
   das Zeichen ⸻ (U+2E3B) fehlt in Plus Jakarta Sans und landet dadurch in einer
   anderen Ersatzschrift als im Prototyp. Fallback deshalb explizit. */
.dm-dash {
  color: var(--color-pink); font-weight: var(--font-weight-regular);
  margin-left: 6px; font-family: var(--font-body);
}

/* ---- Kreis-um-Wort (EIN Snippet für alle Seiten, NORMALISIERUNG Punkt 8) ---- */
.dm-circle { position: relative; display: inline-block; padding: 0 10px; }
.dm-circle::after {
  content: ""; position: absolute; left: -14px; top: -8px;
  width: calc(100% + 28px); height: calc(100% + 18px); pointer-events: none;
  background: no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 90'%3E%3Cellipse cx='160' cy='45' rx='155' ry='38' fill='none' stroke='%23E01274' stroke-width='4' transform='rotate(-2 160 45)'/%3E%3Cpath d='M18 78 Q 120 96 265 74' fill='none' stroke='%23E01274' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.dm-circle--sm::after {
  left: -16px; top: -6px; width: calc(100% + 32px); height: calc(100% + 14px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 70'%3E%3Cellipse cx='150' cy='35' rx='146' ry='30' fill='none' stroke='%23E01274' stroke-width='5' transform='rotate(-1.5 150 35)' opacity='0.9'/%3E%3C/svg%3E");
}
.dm-circle--md::after {
  left: -12px; top: -6px; width: calc(100% + 24px); height: calc(100% + 14px);
}

/* ---- Signaturschrift „Amsterdam Four" (Claims/„Dani.") ---- */
.dm-signature {
  font-family: var(--font-signature);
  font-weight: var(--font-weight-regular);
  color: var(--color-pink-btn);
}
.dm-signature--about { font-size: var(--font-size-signature); }
@media (max-width: 980px) { .dm-signature--about { font-size: var(--font-size-signature-tablet); } }
@media (max-width: 767px) { .dm-signature--about { font-size: var(--font-size-signature-phone); } }
.dm-about-title .et_pb_module_header {
  display: flex; align-items: baseline; gap: var(--space-10); flex-wrap: wrap;
}
.dm-contact-title .dm-heart {
  font-family: var(--font-script); font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-script-xl); color: var(--color-ink-soft);
}
/* zweites, kleines pinkes Herz (Prototyp: zwei gestapelte Herzen) */
.dm-contact-title .dm-heart::after {
  content: "\2661"; font-size: var(--font-size-script-md); color: var(--color-pink);
  position: relative; top: -16px; margin-left: 2px;
}

/* ---- „MAAS…"-Heading mit Balken-Unterstrich (NORMALISIERUNG Punkt 7) ---- */
.dm-benefits-title .et_pb_module_header { display: flex; align-items: baseline; flex-wrap: wrap; }
/* "MAAS" + "arbeit" bilden EIN Wort — Bruch nur nach dem folgenden Leerzeichen
   erlauben (LEARNINGS-Ergänzung: Atomic-Inline-Grenzen sind sonst ein gültiger
   Zeilenumbruch-Punkt, s. dm-maas-word-Kommentar im PHP-Generator). */
.dm-maas-word { white-space: nowrap; }
/* Allgemeines Nowrap-Utility für Wort+Deko-Paare (Hero „einzigartig ⸻") */
.dm-nowrap { white-space: nowrap; }
.dm-maas {
  position: relative; display: inline-block;
  font-family: var(--font-signature); font-weight: var(--font-weight-regular);
  font-size: var(--font-size-signature); color: var(--color-pink-btn); padding-right: 4px;
}
.dm-maas__aas {
  font-family: var(--font-body); font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-h2); letter-spacing: -0.5px;
}
/* bottom:-16px (nicht +6px, wie ursprünglich) — gemessen per getBoundingClientRect
   auf .dm-maas/.dm-maas__aas: beide enden auf derselben Grundlinie wie der Balken-
   Container selbst, ein POSITIVER bottom-Wert setzt den Balken deshalb INNERHALB
   der Box (auf Höhe der Buchstaben-Unterlängen) statt darunter — sichtbar als
   Durchstreichung von „AAS"/„arbeit" statt als Unterstrich. Bug bestand auf ALLEN
   Breakpoints (auch 1440/980), nicht nur auf Phone (per Debug-Overlay verifiziert),
   der neue Wert ist deshalb an der Basisregel korrigiert, nicht nur in einer
   767px-Media-Query nachgezogen. */
.dm-maas__bar {
  position: absolute; left: -34px; right: -48px; bottom: -16px; height: 5px;
  background: var(--color-pink-btn); border-radius: 3px; transform: rotate(-1.5deg);
}
.dm-benefits-rest { font-weight: var(--font-weight-bold); margin-left: var(--space-12); }
@media (max-width: 980px) {
  .dm-maas { font-size: var(--font-size-signature-tablet); }
  .dm-maas__aas { font-size: var(--font-size-h2-tablet); }
  .dm-maas__bar { left: -20px; right: -28px; }
}
@media (max-width: 767px) {
  .dm-maas { font-size: var(--font-size-signature-phone); }
  .dm-maas__aas { font-size: var(--font-size-h2-phone); }
}

/* ---- Schrägkanten (NORMALISIERUNG Punkt 6): EIN wiederverwendbares Paar
       Klassen für alle Seiten statt pro Vorkommen neu ---- */
.dm-skew--top { clip-path: polygon(0 14px, 100% 0, 100% 100%, 0 100%); }
.dm-skew--bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 0 100%); }
.dm-skew--both { clip-path: polygon(0 14px, 100% 0, 100% calc(100% - 12px), 0 100%); }
.dm-skew--both-alt { clip-path: polygon(0 0, 100% 14px, 100% 100%, 0 calc(100% - 12px)); }

.dm-about { position: relative; clip-path: polygon(0 14px, 100% 0, 100% calc(100% - 12px), 0 100%); }
.dm-benefits { position: relative; clip-path: polygon(0 0, 100% 14px, 100% 100%, 0 calc(100% - 12px)); }

/* Rosa Radial-Glow (NORMALISIERUNG Punkt 11) */
.dm-about::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 300px;
  pointer-events: none;
  background: radial-gradient(ellipse 180px 260px at 8% 30%, rgba(233,152,187,0.55), transparent 70%),
              radial-gradient(ellipse 140px 300px at 2% 75%, rgba(238,178,203,0.5), transparent 70%);
}
@media (max-width: 980px) { .dm-about::before { display: none; } }

/* ---- Pain-Karten: Pfeil-Icon + Text vertikal zentriert ---- */
.dm-pain-card .et_pb_blurb_content { display: flex; flex-direction: row; align-items: center; }
.dm-pain-card .et_pb_main_blurb_image { margin: 0 var(--space-22) 0 0 !important; align-self: center; }
.dm-pain-card .et_pb_blurb_container { display: flex; align-items: center; }
.dm-pain-punch .et_pb_text_inner p { margin: 0; padding: 0; letter-spacing: -0.3px; }
.dm-pain-punch span {
  color: var(--color-ink-soft); font-weight: var(--font-weight-regular);
  font-size: var(--font-size-script-md);
}

/* ---- Feature-Blurbs (Warum ich): Divi gibt h4/h3 padding-bottom (LEARNINGS) ---- */
.dm-feature .et_pb_module_header { padding-bottom: 7px; margin: 0; line-height: var(--font-line-snug); }
.dm-feature .et_pb_blurb_container { padding-top: 0; }

/* ---- Preiskarten ---- */
/* overflow:visible ist Pflicht: Divi gibt Gruppen mit border-radius automatisch
   overflow:hidden (zum Clippen der runden Ecken). Das schnitt das „MEISTGEWÄHLT"-
   Badge ab, das mit top:-16px bewusst oben über die Karte hinausragt (vom Nutzer
   gemeldet: „oben abgeschnitten"). Der Prototyp hat overflow:visible auf .pcard;
   im Karteninneren ragt nichts über die runden Ecken, das Clipping ist also
   verzichtbar. Divi-Instanz-CSS lädt nach dem Child-CSS → !important nötig. */
.dm-pcard { position: relative; overflow: visible !important; }
/* Badge (Fund C): jetzt ein divi/text-Modul; die Absolut-Positionierung sitzt
   am MODUL selbst (cssClass dm-pcard__badge-wrap), nicht an einem inneren
   <span> — sonst wäre der Divi-Modul-Wrapper der Containing Block statt der
   Karte (LEARNINGS „Modul-Wrapper ist selbst flow-positioniert"). Typografie/
   Farbe kommen aus dem Preset „DM Badge". */
.dm-pcard__badge-wrap {
  position: absolute !important; top: -16px; left: 22px; z-index: 2;
  background: var(--color-pink-btn);
  padding: 7px 16px; border-radius: var(--radius-tag) var(--radius-tag) var(--radius-tag) 0;
  white-space: nowrap;
}
.dm-pcard__badge-wrap .et_pb_text_inner p { padding: 0 !important; margin: 0 !important; line-height: 1.8 !important; }
.dm-pcard__meta .et_pb_text_inner p { margin: 0; padding: 0; }
.dm-pcard__meta-sub { color: var(--color-text-muted); font-weight: var(--font-weight-semibold); }
.dm-pcard .dm-pink { font-family: var(--font-mono); font-weight: var(--font-weight-medium); }
.dm-pcard__btn .et_pb_button { display: flex; width: 100%; }

/* ---- Häkchen-Listen ---- */
.dm-ticks .et_pb_text_inner p {
  display: flex; gap: var(--space-11); align-items: flex-start;
  margin: 0 0 var(--space-12); padding: 0; line-height: var(--font-line-base);
}
.dm-ticks .et_pb_text_inner p:last-child { margin-bottom: 0; }
.dm-ticks svg { flex: none; margin-top: 3px; }

/* =========================================================
   Code-Modul-Komponenten (Markup 1:1 aus dem Prototyp).
   Layout-CSS gehört an .et_pb_code_inner, nicht an die
   Modulklasse (LEARNINGS „Code-Modul-Inhalt liegt in
   .et_pb_code_inner").
   ========================================================= */

/* ---- Logo (Header + Footer) ----
   dm_logo() (Fund A/B): divi/group statt Code-Modul. DM-Monogramm bleibt
   Deko (Code-Modul); Firmenname + Slogan sind divi/text und damit editierbar.
   Der Firmenname überlagert absolut das Monogramm — das ABSOLUTE Element ist
   das TEXT-MODUL selbst (.dm-logo__script sitzt als cssClass am Modul-
   Wrapper), nicht ein inneres <span> (LEARNINGS „Modul-Wrapper ist selbst
   flow-positioniert"); Containing Block ist die Badge-Gruppe
   (.dm-logo__badge, per Divi-Default position:relative). */
.dm-logo { color: var(--color-ink); }
.dm-logo__badge { display: inline-block; padding: 2px 16px; }
.dm-logo__mono {
  font-family: var(--font-logo); font-size: var(--font-size-logo);
  line-height: var(--font-line-logo); color: var(--color-pink-logo);
  letter-spacing: var(--font-track-logo); display: inline-block; user-select: none;
}
.dm-logo__script {
  position: absolute !important; top: 50%; left: 50%; transform: translate(-50%, -52%);
  white-space: nowrap; color: #111; pointer-events: none;
}
/* Text-Modul-Absätze erben line-height 2 + padding-bottom 1em (LEARNINGS) */
.dm-logo__script .et_pb_text_inner p,
.dm-logo__slogan .et_pb_text_inner p {
  line-height: 1 !important; padding: 0 !important; margin: 0 !important;
}
.dm-logo__script .et_pb_text_inner p { white-space: nowrap; }
.dm-logo__divider {
  width: var(--border-btn); height: 34px; background: var(--color-border-input); flex: none;
}
/* „MAAS" farbig — .dm-pink ist die geteilte Utility-Klasse (color:pink) */
.dm-logo--sm .dm-logo__badge { padding: 2px 12px; }
.dm-logo--sm .dm-logo__mono {
  font-size: var(--font-size-logo-sm); letter-spacing: var(--font-track-logo-sm);
}
.dm-logo--sm .dm-logo__script { font-size: var(--font-size-signature-foot) !important; }

/* ---- Chips ---- */
.dm-chips { display: flex; flex-wrap: wrap; gap: var(--space-12); max-width: var(--size-prose-md); }
.dm-chip {
  display: inline-flex; align-items: center; gap: var(--space-8);
  border: var(--border-card) solid var(--color-border);
  background: var(--color-card); border-radius: var(--radius-pill);
  padding: 9px 18px; font-family: var(--font-mono); font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium); color: var(--color-text);
}
.dm-chips--sm { gap: var(--space-10); max-width: var(--size-prose-sm); }
.dm-chips--sm .dm-chip { padding: 8px 16px; }
.dm-chip__dot {
  width: 7px; height: 7px; border-radius: var(--radius-full);
  background: var(--color-pink); flex: none;
}

/* ---- Hero-Visual (Browser-Mockup + Deko) ---- */
.dm-hero-visual { position: relative; padding-top: var(--space-64); }
/* Punkteraster hinter dem Mockup auf Nutzerwunsch entfernt (20.07.2026) —
   galt für alle vier Vorkommen (Landing-Hero, Über-mich-Polaroid,
   Herzensprojekt, Case-Study-Hero). Der Prototyp hat es, die Umsetzung
   wirkte dem Nutzer aber zu präsent. */
.dm-note--hero {
  /* top: -28px statt 0 — hebt die Notiz aus dem Mockup heraus. Zuvor überlappte
     ihre Unterkante das Mockup um 17px (wie im Prototyp); der Nutzer wünscht
     hier einen kleinen Abstand zur Skizze. */
  position: absolute; top: -28px; right: 56px; z-index: 2;
  font-family: var(--font-script); font-size: var(--font-size-script-lg);
  font-weight: var(--font-weight-semibold); color: var(--color-pink);
  transform: rotate(-6deg); line-height: var(--font-line-snug); text-align: center;
}
.dm-note--hero span { font-size: var(--font-size-script-md); }
.dm-mockup {
  position: relative; background: #fff;
  border: var(--border-mockup) solid var(--color-ink-border);
  border-radius: var(--radius-lg); transform: rotate(1.2deg);
  box-shadow: var(--shadow-mockup);
}
/* Browser-Leiste kommt in ZWEI Bauformen vor:
   1. Hero-Wireframe (dm_mockup_wireframe_html): die ganze .dm-mockup steckt in
      EINEM Code-Modul, .dm-mockup__bar ist darin ein einfaches <div> mit den
      Punkten als direkten Kindern.
   2. Screenshot-Mockup (dm_mockup_shot, Funde G/H/J): .dm-mockup__bar ist ein
      eigenes Code-Modul, sein Inhalt liegt in .et_pb_code_inner.
   Die Trennlinie sitzt am Leisten-Element selbst (beide Formen). Das
   Flex-Layout + Padding der Punkte muss aber dort greifen, wo die Punkte
   tatsächlich liegen: beim <div> direkt (Fall 1) bzw. in .et_pb_code_inner
   (Fall 2, LEARNINGS „Code-Modul-Inhalt liegt in .et_pb_code_inner"). Die
   frühere Regel deckte NUR Fall 2 ab — dadurch fehlten dem Hero-Mockup
   Leisten-Padding und Trennlinie, die Punkte klebten oben links (Nutzer:
   „die skizze passt noch nicht"). */
.dm-mockup__bar { border-bottom: var(--border-mockup) solid var(--color-ink-border); }
.dm-mockup__bar:not(.et_pb_module),
.dm-mockup__bar .et_pb_code_inner {
  display: flex; align-items: center; gap: var(--space-9); padding: 15px 20px;
}
/* :not(.dm-mockup__url) Pflicht — sonst gewinnt diese Regel (Klasse+Tag,
   0,1,1) gegen die alleinstehende .dm-mockup__url-Klasse (0,1,0) und
   quetscht die URL-Pille auf 11px Höhe (border-radius:50% auf einer
   flex:1-breiten, 11px-hohen Box ergibt eine spitze Linsenform statt
   der abgerundeten Pille — sichtbar geworden erst durch Fund G/H/J, war
   aber ein latenter Spezifitäts-Bug im geteilten .dm-mockup__bar-Muster). */
.dm-mockup__bar span:not(.dm-mockup__url) {
  width: 11px; height: 11px; border-radius: var(--radius-full);
  border: var(--border-strong) solid var(--color-ink-border);
}
/* Screenshot-Bild (Fund G/J): Divi rendert .et_pb_image_N{width:100%} NACH
   dem Child-CSS — !important Pflicht (LEARNINGS „Image-Modul: sizing.width"). */
.dm-mockup__shot .et_pb_image_wrap img { display: block !important; width: 100% !important; height: auto !important; }
.dm-mockup__body { padding: 30px 34px 32px; }
.dm-mockup__row {
  display: grid; grid-template-columns: 150px 1fr; gap: var(--space-32);
  align-items: start; margin-bottom: var(--space-30);
}
.dm-mockup__img { width: 150px; height: 118px; }
.dm-mockup__lines {
  display: flex; flex-direction: column; gap: var(--space-14); padding-top: var(--space-8);
}
.dm-mockup__lines > div { height: 11px; border-radius: var(--radius-sm); }
.dm-mockup__checks {
  display: flex; flex-direction: column; gap: 13px;
  font-family: var(--font-mono); font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium); color: var(--color-ink-soft);
}
.dm-mockup__checks > div { display: flex; align-items: center; gap: var(--space-14); }
.dm-mockup__checks span {
  color: var(--color-pink); font-size: 19px; font-weight: var(--font-weight-bold);
}
.dm-mockup__checks em {
  font-style: normal; border-bottom: var(--border-mockup) solid var(--color-pink); padding-bottom: 2px;
}

/* ---- Über mich: Badges ---- */
.dm-badges { display: flex; gap: var(--space-14); flex-wrap: wrap; }
.dm-badge {
  display: inline-flex; align-items: center; gap: var(--space-11);
  background: var(--color-card); border: var(--border-card) solid var(--color-border);
  border-radius: var(--radius-md); padding: 13px 22px;
  font-size: var(--font-size-card); font-weight: var(--font-weight-bold);
  color: var(--color-ink); box-shadow: var(--shadow-card-sm);
}
.dm-badge .dm-pink { font-size: 18px; }
.dm-badge__sm { font-size: 16px; }

/* ---- Polaroid (divi/group: Foto = Bild-Modul, Unterschrift = Text-Modul) ----
   Rahmen (Hintergrund, Padding, Schatten) kommt aus den Gruppen-Attributen,
   NICHT von hier. Hier stehen nur Rotation, Klebeband und die feste Fotogröße
   — Letztere, weil `module.decoration.sizing.width` am Bild-Modul nicht
   rendert (LEARNINGS „Image-Modul: sizing.width rendert nicht"). */
.dm-polaroid-wrap { align-items: center; }
.dm-polaroid { transform: rotate(-2.4deg); position: relative; width: max-content; }
.dm-polaroid--alt { transform: rotate(2deg); }

/* Klebeband: Deko, deshalb ::before statt eigenem Modul */
.dm-polaroid::before {
  content: ""; position: absolute; top: -14px; left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  width: 110px; height: 30px; background: var(--color-pink-tape);
  box-shadow: 0 1px 3px rgba(27,23,26,0.12); z-index: 2;
}
.dm-polaroid--alt::before { transform: translateX(-50%) rotate(3deg); }

/* Divi gibt jeder Bild-Instanz `.et_pb_image_N { width:100% }` NACH dem
   Child-CSS — Breite/Höhe brauchen deshalb !important (LEARNINGS). */
.dm-polaroid .et_pb_image,
.dm-polaroid .et_pb_image .et_pb_image_wrap {
  width: var(--size-portrait) !important; display: block;
}
.dm-polaroid--lg .et_pb_image,
.dm-polaroid--lg .et_pb_image .et_pb_image_wrap { width: var(--size-portrait-lg) !important; }
.dm-polaroid .et_pb_image .et_pb_image_wrap img {
  width: 100% !important; height: var(--size-portrait-h) !important;
  object-fit: cover !important; object-position: top center; display: block;
}
.dm-polaroid--lg .et_pb_image .et_pb_image_wrap img { height: var(--size-portrait-lg-h) !important; }
.dm-polaroid--gray .et_pb_image .et_pb_image_wrap img { filter: grayscale(1); }

/* Bildunterschrift: Typografie kommt aus dem Preset „DM Script"; hier nur
   der Absatz-Reset (Divi gibt <p> line-height 2 + padding-bottom 1em) */
.dm-polaroid__caption p { line-height: 1.2 !important; padding: 0 !important; margin: 0; }
.dm-polaroid__caption span { color: var(--color-pink); }

@media (max-width: 400px) {
  .dm-polaroid .et_pb_image,
  .dm-polaroid .et_pb_image .et_pb_image_wrap,
  .dm-polaroid--lg .et_pb_image,
  .dm-polaroid--lg .et_pb_image .et_pb_image_wrap { width: 260px !important; }
  .dm-polaroid .et_pb_image .et_pb_image_wrap img,
  .dm-polaroid--lg .et_pb_image .et_pb_image_wrap img { height: 284px !important; }
}

/* ---- Portfolio-Slider: natives divi/group-carousel (9 Projekte) ----
   Karten-Fläche/Rahmen/Radius/Schatten kommen aus der Modul-Dekoration
   (dm_portfolio_slider()); hier bleibt nur, was das Modul nicht kann:
   Innenabstand der Folien und die feste Bildgeometrie. */
.dm-pf-carousel .et_pb_group_carousel_slide { padding: 0 var(--space-12); }
/* Bildgeometrie: `sizing.width` am Bild-Modul rendert nicht, und Divis
   Instanz-CSS (.et_pb_image_N) lädt NACH dem Child-CSS — daher !important
   (DIVI5-LEARNINGS „Image-Modul: sizing.width rendert nicht"). */
.dm-pf-slide__img,
.dm-pf-slide .et_pb_image { width: 100% !important; }
.dm-pf-slide__img .et_pb_image_wrap,
.dm-pf-slide .et_pb_image .et_pb_image_wrap { display: block; width: 100% !important; }
.dm-pf-slide__img .et_pb_image_wrap img,
.dm-pf-slide .et_pb_image .et_pb_image_wrap img {
  display: block; width: 100% !important; aspect-ratio: 2 / 1;
  object-fit: contain !important; object-position: center;
}
/* Text-Module: Divi gibt Absätzen line-height 2 + padding-bottom 1em
   (DIVI5-LEARNINGS „Text-Modul: Absätze erben line-height 2"). */
.dm-pf-slide__name .et_pb_text_inner p,
.dm-pf-slide__tag .et_pb_text_inner p { line-height: 1.35 !important; padding-bottom: 0 !important; }
/* Punkte-Navigation: Optik des Prototyps (10px, rosa aktiv) */
.dm-pf-carousel .et_pb_group_carousel_dots { margin-top: var(--space-22); gap: var(--space-10); }
.dm-pf-carousel .et_pb_group_carousel_dot { width: 10px; height: 10px; }

/* ---- Kontakt: Links, Formular, Sticky ---- */
.dm-contact-links .et_pb_code_inner {
  display: flex; flex-direction: column; gap: var(--space-14); margin-bottom: var(--space-20);
}
.dm-mail-btn, .dm-wa-btn {
  display: inline-flex; align-items: center; gap: var(--space-10);
  background: var(--color-pink); color: #fff; border-radius: var(--radius-pill);
  padding: 13px 24px; font-size: var(--font-size-nav); font-weight: var(--font-weight-bold);
  width: max-content; box-shadow: var(--shadow-cta-sm); text-decoration: none;
}
.dm-mail-btn:hover, .dm-wa-btn:hover { background: var(--color-pink-btn-hover); color: #fff; }
/* ---- Kontaktformular (natives divi/contact-form) ----
   Optik (Hintergrund, Rahmen, Radien, Feld-/Button-Typografie) steckt im
   Preset „DM Formular", NICHT hier. Unten stehen ausschließlich die vier
   strukturellen Divi-Eigenheiten aus DIVI5-LEARNINGS, die sich nicht über
   Attribute lösen lassen. Divi lädt sein Instanz-CSS NACH dem Child-CSS und
   ist spezifischer — deshalb durchgängig !important. */

/* 1) Feld-Labels sind per Default display:none (Klasse heißt contact_FORM_label,
      nicht contact_field_label). Der Prototyp zeigt sie über dem Feld. */
.dm-cform .et_pb_contact_form_label {
  display: block !important;
  font-size: var(--font-size-eyebrow); font-weight: var(--font-weight-bold);
  color: var(--color-text); margin-bottom: 7px;
}

/* 2) Jedes .et_pb_contact_field ist ein Flex-Column-Container mit Divis
      row-gap:30px (--module-gutter) + eigenem padding; beides addiert sich
      zum Label→Input- und Feld→Feld-Abstand. Zurücksetzen, Abstände steuern
      die Label-margin (oben) und der Form-row-gap (hier). */
.dm-cform .et_pb_contact_field { row-gap: 0 !important; padding: 0 !important; }
.dm-cform .et_pb_contact_form { row-gap: var(--space-18) !important; }

/* 3) Divis Select-Pfeil ist ein ::after-Dreieck mit FIXEM top-Wert und driftet,
      sobald sich die Feldhöhe ändert. Ausblenden, eigenen Chevron mittig als
      background-image (Farbe eingebacken — var() geht in Data-URIs nicht).
      background-COLOR statt Shorthand, sonst wird das Bild gelöscht. */
.dm-cform .et_pb_contact_field[data-type="select"]::after { content: none !important; }
.dm-cform select.et_pb_contact_select {
  appearance: none; -webkit-appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%234E484C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  padding-right: 42px !important;
}

/* 4) .et_contact_bottom_container (Wrapper um den Submit) ist das echte
      shrink-to-fit Flex-Item — eine Breitenangabe nur am Button reicht nicht. */
.dm-cform .et_contact_bottom_container,
.dm-cform .et_pb_button_wrapper {
  width: 100% !important; flex: 1 1 100% !important; align-self: stretch !important;
}
.dm-cform .et_pb_contact_submit { width: 100% !important; }

/* 5) Nachrichten-Feld höher, damit das Formular unten etwa mit der Sticky-
      Notiz der Intro-Spalte abschließt (Nutzerwunsch, gilt für Landing +
      Über mich). WICHTIG: Das Divi-Kontaktformular ist ein UMBRECHENDER
      Flex-Row (die 50%-breiten Name-/E-Mail-Felder liegen deshalb nebeneinander)
      — kein Flex-Column. Ein vertikales „fill" über flex-grow ist hier nicht
      möglich, ohne das Nebeneinander zu zerstören. Deshalb der direkte Weg,
      den der Nutzer auch nennt: feste, höhere Textfeld-Höhe. Ein fester Wert
      hält die Höhe zudem auf allen Seiten GLEICH (Nutzervorgabe); die linken
      Spalten der beiden Seiten sind unterschiedlich hoch, ein exaktes
      Bündig-Abschließen auf beiden zugleich ist damit ohnehin nicht möglich. */
.dm-cform textarea.et_pb_contact_message { resize: vertical; min-height: 230px; }
.dm-cform ::placeholder { color: var(--color-placeholder); }
.dm-cform .et_pb_contact_field input:focus,
.dm-cform .et_pb_contact_field select:focus,
.dm-cform .et_pb_contact_field textarea:focus { border-color: var(--color-pink) !important; }

/* ---- Sticky-Notes (NORMALISIERUNG Punkt 3) ---- */
.dm-sticky-wrap { position: relative; }
.dm-sticky {
  position: absolute; background: var(--color-bg-form);
  border: var(--border-thin) solid var(--color-border-soft); text-align: center; z-index: 3;
}
.dm-sticky__tape {
  position: absolute; top: -10px; width: 52px; height: 20px; background: var(--color-tape-gray);
}
.dm-sticky__tape--l { left: -14px; transform: rotate(-38deg); }
.dm-sticky__tape--r { right: -14px; transform: rotate(38deg); }
.dm-sticky__text {
  font-family: var(--font-script); font-weight: var(--font-weight-semibold);
  color: var(--color-ink-soft);
}
.dm-sticky--benefits {
  right: 0; top: -16px; width: 180px; box-shadow: var(--shadow-sticky);
  transform: rotate(4deg); padding: 26px 18px 20px;
}
.dm-sticky--benefits .dm-sticky__heart { color: var(--color-pink); font-size: 15px; }
.dm-sticky--benefits .dm-sticky__text {
  font-size: var(--font-size-script-xs); line-height: var(--font-line-snug);
}
/* Die Kontakt-Notiz soll am UNTEREN Rand der Intro-Spalte kleben (Prototyp:
   .contact__intro ist der Containing Block). Der Deko-Wrapper steht als
   letztes Modul der Spalte und hat Höhe 0 — bezöge sich das absolute Element
   auf ihn, landete es im Footer (LEARNINGS „Modul-Wrapper ist selbst
   flow-positioniert"). Deshalb: Wrapper static, SPALTE relativ. */
.dm-contact .et_pb_column:first-child { position: relative; }
.dm-contact .dm-sticky-wrap { position: static; }
.dm-sticky--contact {
  right: 0; bottom: -20px; width: 160px; box-shadow: var(--shadow-sticky-lg);
  transform: rotate(-5deg); padding: 24px 18px 20px;
}
.dm-sticky--contact .dm-sticky__text {
  font-size: var(--font-size-script-sm); line-height: var(--font-line-h2-loose);
}

/* ---- Footer + globaler WhatsApp-Button ----
   Fund B: Slogan/Copyright sind jetzt ein divi/text-Modul (Typografie kommt
   aus dem Preset „DM Footer Text"); Layout (flex/gap) kommt aus der
   divi/group „Footer-Inhalt", hier nur noch Rahmen/Abstand, die kein
   Decoration-Attribut abbildet. */
.dm-footer-inner {
  border-top: var(--border-strong) solid var(--color-ink-border);
  padding-top: var(--space-26);
}
.dm-footer-text .et_pb_text_inner p { padding: 0 !important; margin: 0 !important; }
.dm-footer-heart { color: var(--color-pink); font-size: var(--font-size-body); }
.dm-footer-links a { color: var(--color-text-muted); }
.dm-footer-links a:hover { color: var(--color-pink); }
.dm-footer-links .et_pb_text_inner p { padding-bottom: 0 !important; }

.dm-wa-float {
  position: fixed; right: 26px; bottom: 26px; z-index: 50;
  width: var(--size-btn-round-lg); height: var(--size-btn-round-lg);
  border-radius: var(--radius-full); background: var(--color-pink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-wa-float); color: #fff;
}
.dm-wa-float:hover { background: var(--color-pink-btn-hover); color: #fff; }
.dm-wa-float svg { width: 30px; height: 30px; }
/* Der Wrapper darf im Fluss keinen Platz belegen */
.dm-wa-float-wrap { position: absolute; width: 0; height: 0; }

/* ---- Divi-Quirk-Fixes (LEARNINGS) ---- */
/* Text-Modul-Absätze erben line-height 2 + padding-bottom 1em */
.dm-eyebrow .et_pb_text_inner p,
.dm-pcard__meta .et_pb_text_inner p,
.dm-pain-punch .et_pb_text_inner p { padding-bottom: 0 !important; }

/* Header-Menu: „Home"-Anker nur auf der echten Startseite aktiv markieren
   (WordPress markiert sonst ALLE Anker-Menüpunkte als current-menu-item) */
body.home .dm-header .et_pb_menu a[href$="#top"] { color: var(--color-pink); }

/* =========================================================
   Frei schwebende Kritzel-Anmerkungen (Caveat) — reine Deko,
   deshalb Child-CSS. Nur Desktop ≥981px; Position relativ zur
   zentrierten Container-Mitte (viewport-robust).
   Nach jedem \A ein Leerzeichen: sonst frisst der CSS-Parser den
   Umbruch als längeren Unicode-Escape (LEARNINGS).
   ========================================================= */
@media (min-width: 981px) {
  .dm-pain, .dm-services, .dm-portfolio { position: relative; }
  .dm-pain::before, .dm-pain::after, .dm-services::after, .dm-portfolio::after {
    font-family: var(--font-script); pointer-events: none; z-index: 3;
  }
  /* Kennst du das: großes „?" links + „Zeit, das zu ändern." rechts.
     Positionen center-relativ am Prototyp gemessen (page center = 720):
     „?" linke Kante bei -643px, Notiz linke Kante bei +563px vom Zentrum;
     top relativ zur Section (Prototyp „?" 118 / Notiz 130, +16px weil die
     Site-Karten 16px tiefer starten als im Prototyp).
     Notiz linksbündig wie im Prototyp (nicht zentriert). Nur EIN Leerzeichen
     nach \A — das terminiert die Hex-Escape-Sequenz und wird selbst
     konsumiert (LEARNINGS); zwei Leerzeichen erzeugten eine sichtbare
     Einrückung der Folgezeilen. */
  .dm-pain::before {
    content: "?"; position: absolute; left: calc(50% - 643px); top: 134px;
    font-size: var(--font-size-script-2xl); font-weight: var(--font-weight-semibold);
    color: var(--color-pink); transform: rotate(-10deg);
  }
  .dm-pain::after {
    content: "Zeit,\A das zu\A ändern."; white-space: pre; text-align: left;
    position: absolute; left: calc(50% + 563px); top: 146px;
    font-size: var(--font-size-script-lg); font-weight: var(--font-weight-semibold);
    color: var(--color-ink-soft); line-height: 1.15;
  }
  /* Leistungen: „Kein Blabla. Nur das, was du wirklich brauchst." */
  .dm-services::after {
    content: "Kein Blabla.\A  Nur das, was\A  du wirklich brauchst."; white-space: pre; text-align: right;
    position: absolute; right: calc(50% - 548px); top: 60px;
    font-size: var(--font-size-script); font-weight: var(--font-weight-semibold);
    color: var(--color-ink-soft); line-height: var(--font-line-h2-loose);
  }
  /* Portfolio: „Echte Projekte. Echte Menschen." */
  .dm-portfolio::after {
    content: "Echte Projekte.\A  Echte Menschen."; white-space: pre; text-align: right;
    position: absolute; right: calc(50% - 540px); top: 62px;
    font-size: var(--font-size-script); font-weight: var(--font-weight-semibold);
    color: var(--color-ink-soft); line-height: var(--font-line-h2-loose);
  }
}

/* =========================================================
   Mobile-Overflow-Fixes (LEARNINGS „Buttons shrinken nicht",
   rotierte/geklebte Deko): kein horizontaler Scroll ≤980/767.
   ========================================================= */
@media (max-width: 980px) {
  /* Deko ist ab Tablet ausgeblendet (NORMALISIERUNG „Breakpoints") — das
     Punkteraster ragt sonst über den Sektionsrand hinaus (gemessen: +8px @980,
     +20px @375; von overflow-x:clip zwar aufgefangen, aber sichtbar beschnitten) */
  .dm-note--hero, .dm-sticky { display: none; }
  .dm-hero, .dm-about, .dm-benefits, .dm-services, .dm-portfolio, .dm-contact,
  .dm-header, .dm-footer { overflow-x: clip; }
  html, body { overflow-x: clip; }
}
@media (max-width: 767px) {
  .dm-hero-visual { padding-top: var(--space-20); }
  .dm-mockup__row { grid-template-columns: 96px 1fr; gap: var(--space-18); }
  .dm-mockup__img { width: 96px; height: auto; }
  .dm-mockup__body { padding: 22px 22px 24px; }
  .dm-hero-cta, .dm-header-cta { flex-direction: column; align-items: stretch; }
  .dm-hero-cta .et_pb_button, .dm-header-cta .et_pb_button {
    width: 100%; text-align: center; box-sizing: border-box;
  }
  .dm-hero-cta .et_pb_button_module_wrapper,
  .dm-header-cta .et_pb_button_module_wrapper { flex: 1 1 100%; width: 100%; }
  .dm-chips, .dm-chips--sm { max-width: 100%; }
  .dm-wa-float { right: 16px; bottom: 16px; }
}

/* =========================================================
   STUFE 2 — Unterseiten (Über mich, Pakete, Portfolio,
   Case Studies, Case Study).

   Gleiche Regel wie in style-body.css: hier steht NUR, was
   Design Variables, Presets oder Theme-Builder-Templates
   nicht können — Code-Modul-Komponenten, Deko ohne
   Divi-Pendant und Divi-Quirk-Fixes aus DIVI5-LEARNINGS.md.
   Alles gescoped über dm-*-Klassen.
   ========================================================= */

/* ---- Varianten der Stufe-1-Bausteine ---- */
.dm-eyebrow--center .et_pb_text_inner p { justify-content: center; }
.dm-u__mark--xl { border-bottom-width: var(--border-underline-xl); padding-bottom: 3px; }
.dm-signature--hero { font-size: var(--font-size-signature-lg); }
.dm-signature--md { font-size: var(--font-size-signature-md); }
.dm-signature--inline { font-size: 21px; }
@media (max-width: 980px) {
  .dm-signature--hero { font-size: var(--font-size-signature-lg-tablet); }
  .dm-signature--md { font-size: var(--font-size-signature-md-tablet); }
}
@media (max-width: 767px) {
  .dm-signature--hero { font-size: var(--font-size-signature-lg-phone); }
  .dm-signature--md { font-size: var(--font-size-signature-md-phone); }
}
.dm-btn-row .et_pb_button { white-space: nowrap; }
.dm-chips--center { justify-content: center; max-width: none; }
.dm-chips-wrap--center .et_pb_code_inner { display: flex; justify-content: center; }

/* Deko-Notizen (Caveat) — Basis + Varianten; ab Tablet ausgeblendet */
.dm-note {
  font-family: var(--font-script); font-weight: var(--font-weight-semibold);
  color: var(--color-pink); line-height: var(--font-line-snug); text-align: center;
  position: absolute; z-index: 2; pointer-events: none;
}
.dm-note--kaffee { left: -120px; bottom: 10px; font-size: var(--font-size-script-lg); transform: rotate(-8deg); }
/* --feature/--cs-hero: Position sitzt jetzt am MODUL-Wrapper
   (.dm-feature-note/.dm-cs-hero-note, Funde G/J), hier nur noch
   Typografie/Rotation. */
.dm-note--feature { font-size: var(--font-size-script-lg); transform: rotate(-5deg); }
.dm-note--cs-hero { font-size: var(--font-size-script-lg); transform: rotate(-5deg); }
.dm-note--cs-hero span { font-size: 23px; }

/* Aktiver Menüpunkt: die Nav zeigt auf echte Seiten-URLs, deshalb greift
   .current-menu-item genau einmal (LEARNINGS „Anker-Menüpunkte") */
.dm-header .et_pb_menu .current-menu-item > a {
  color: var(--color-pink); font-weight: var(--font-weight-bold);
  border-bottom: var(--border-strong) solid var(--color-pink); padding-bottom: 2px;
}

/* =========================================================
   Über mich
   ========================================================= */
.dm-abouthero-visual { position: relative; width: max-content; margin: 0 auto; }
/* Punkteraster auf Nutzerwunsch entfernt (20.07.2026) — s. style-body.css */
.dm-abouthero-visual > .et_pb_module { position: relative; z-index: 1; }
/* Kaffee-Notiz absolut am MODUL-Wrapper positionieren, nicht am inneren <div>:
   der Divi-Wrapper ist selbst flow-positioniert, sonst bezöge sich das
   absolute Kind auf ihn statt auf die Gruppe (LEARNINGS „Modul-Wrapper ist
   selbst flow-positioniert"). */
.dm-abouthero-note { position: absolute !important; left: -120px; bottom: 10px; z-index: 3; }
.dm-abouthero-note .dm-note--kaffee { position: static; left: auto; bottom: auto; }
.dm-abouthero-title .et_pb_module_header { display: block; }

/* ---- Werdegang-Timeline: das 150/40/1fr-Raster gibt es in /24 nicht ---- */
/* Achtung: KEINE `.dm-tl-row > .et_pb_module`-Sammelregel für flex — die wäre
   spezifischer als `.dm-tl__content` und machte die Inhaltsspalte unschrumpfbar
   (Folge: auf dem Phone lief der Text aus der Sektion und wurde von
   overflow-x:clip abgeschnitten — im scrollWidth NICHT sichtbar). */
.dm-tl__label { flex: 0 0 150px; padding-top: var(--space-4); }
.dm-tl__label .et_pb_text_inner p { padding-bottom: 0 !important; margin: 0; }
.dm-tl__rail { flex: 0 0 40px; align-self: stretch; }
.dm-tl__rail .et_pb_code_inner {
  display: flex; flex-direction: column; align-items: center; height: 100%; row-gap: 0;
}
.dm-tl__dot {
  width: 14px; height: 14px; border-radius: var(--radius-full);
  border: var(--border-underline) solid var(--color-pink);
  background: #fff; flex: none; margin-top: 5px;
}
.dm-tl__dot--filled { background: var(--color-pink); }
.dm-tl__line { width: 2.5px; flex: 1; background: #EBCBD9; }
/* min-width:0 ist Pflicht: Flex-Items schrumpfen sonst nicht unter ihre
   min-content-Breite und schieben den Text aus der Sektion. */
.dm-tl__content { flex: 1 1 auto; min-width: 0; padding-bottom: var(--space-38); }
.dm-tl__content .et_pb_module { max-width: 100%; }
.dm-tl-row--last .dm-tl__content { padding-bottom: 0; }
.dm-tl__text .et_pb_text_inner p { padding-bottom: 0 !important; }

/* ---- Nummer-Karten (Arbeitsweise, Portfolio-Standard, Ergebnis) ---- */
.dm-num-card__num .et_pb_text_inner p { margin: 0; padding-bottom: 0 !important; line-height: 1 !important; }
.dm-result-item { text-align: center; padding: 0 22px; }
.dm-result-item .et_pb_text_inner p { padding-bottom: 0 !important; }

/* ---- Fun Facts: leicht rotierte Karten ---- */
.dm-facts-title .et_pb_module_header { display: block; }
.dm-fact-card { max-width: 330px; }
.dm-fact-card .et_pb_text_inner p { padding-bottom: 0 !important; }
.dm-facts-grid .dm-fact-card:nth-child(1) { transform: rotate(-1deg); }
.dm-facts-grid .dm-fact-card:nth-child(2) { transform: rotate(1.2deg); }
.dm-facts-grid .dm-fact-card:nth-child(3) { transform: rotate(-0.8deg); }
.dm-facts-grid .dm-fact-card:nth-child(4) { transform: rotate(0.9deg); }
.dm-facts-grid .dm-fact-card:nth-child(5) { transform: rotate(-1.4deg); }
.dm-facts-grid .dm-fact-card:nth-child(6) { transform: rotate(1.1deg); }

/* ---- Meine Werte ---- */
.dm-value-item {
  border-bottom: var(--border-card) solid var(--color-border);
  padding-bottom: var(--space-16); width: 100%;
}
.dm-value-item__num { flex: 0 0 auto; }
.dm-value-item__body { flex: 1 1 auto; }
.dm-value-item .et_pb_text_inner p { padding-bottom: 0 !important; }

/* ---- Kontakt-Variante mit Kicker ---- */
.dm-contact-kicker .et_pb_text_inner p { padding-bottom: 0 !important; transform: rotate(-2deg); }
/* Ohne Sticky-Notiz braucht die CTA-Variante den relative-Trick nicht */
.dm-contact--cta .et_pb_column:first-child { position: static; }

/* Kritzel-Anmerkung „Schritt für Schritt" (nur Desktop).
   Nach jedem \A ein Leerzeichen (LEARNINGS „content: \A vor Hex-Buchstabe"). */
@media (min-width: 981px) {
  .dm-steps { position: relative; }
  .dm-steps::after {
    content: "Schritt für Schritt —\A  ganz entspannt."; white-space: pre; text-align: right;
    position: absolute; right: calc(50% - 540px); top: 70px;
    font-family: var(--font-script); font-size: var(--font-size-script);
    font-weight: var(--font-weight-semibold); color: var(--color-ink-soft);
    line-height: 1.25; transform: rotate(2deg); pointer-events: none; z-index: 3;
  }
}

/* =========================================================
   Seiten-Hero (zentriert) + CTA-Sektionen
   ========================================================= */
/* Kein flankierendes Punkteraster: der Prototyp hat in den zentrierten
   Seiten-Heros (Pakete/Portfolio/Case Studies) keins — Deko-Punkte gibt es
   nur hinter dem Über-mich-Polaroid und um das Landing-Wireframe.
   `position:relative` bleibt: Containing Block für die Kritzel-Notiz unten. */
.dm-page-hero { position: relative; overflow-x: clip; }
/* Case-Studies-Hero: Kritzel-Notiz (eigenständig, ohne Punkteraster-Basis) */
@media (min-width: 981px) {
  .dm-cs-hero-page::before {
    content: "Echte Projekte,\A  echte Ergebnisse"; white-space: pre; text-align: center;
    position: absolute; right: 80px; top: 60px; pointer-events: none;
    font-family: var(--font-script); font-size: var(--font-size-script-lg);
    font-weight: var(--font-weight-semibold); color: var(--color-pink);
    transform: rotate(6deg); line-height: 1.1;
  }
}
.dm-page-hero__title .et_pb_module_header { display: block; }
.dm-page-hero__claim .et_pb_text_inner p,
.dm-page-hero__lead .et_pb_text_inner p,
.dm-cta__kicker .et_pb_text_inner p,
.dm-cta__lead .et_pb_text_inner p,
.dm-section-claim .et_pb_text_inner p { padding-bottom: 0 !important; }
.dm-cta__kicker .et_pb_text_inner p { transform: rotate(-3deg); }
.dm-cs-cta .dm-cta__kicker .et_pb_text_inner p { transform: none; }
/* Unterstrich-Balken unter „Echte Unikate." (Portfolio-Hero) */
.dm-underline-abs { position: relative; display: inline-block; padding-bottom: 4px; }
.dm-underline-abs::after {
  content: ""; position: absolute; left: -24px; right: -14px; bottom: 0;
  height: 5px; background: var(--color-pink); border-radius: 3px;
}

/* Trennlinie mit Punkt (Pakete) */
.dm-divider .et_pb_code_inner {
  display: flex; flex-direction: row; align-items: center; column-gap: var(--space-22); row-gap: 0;
}
.dm-divider__line { flex: 1; height: 1.5px; background: linear-gradient(90deg, transparent, var(--color-border)); }
.dm-divider__line--r { background: linear-gradient(90deg, var(--color-border), transparent); }
.dm-divider__dot { width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--color-pink); flex: none; }

/* =========================================================
   Preiskarten — Ergänzungen der Pakete-Seite
   ========================================================= */
/* Fund C: Badge ist jetzt selbst das Text-Modul (dm-pcard__badge-wrap), kein
   verschachteltes <span> mehr — Center-Variante direkt am Modul. */
.dm-pcard__badge-wrap--center { left: 50%; transform: translateX(-50%); border-radius: var(--radius-tag); }
.dm-pcard__subtitle .et_pb_text_inner p {
  margin: 0; padding-bottom: 0 !important;
  font-size: var(--font-size-tag); letter-spacing: 1.5px;
}
.dm-pcard__price .et_pb_text_inner p { padding-bottom: 0 !important; }
.dm-pcard__meta-inline {
  color: var(--color-pink); font-family: var(--font-mono);
  font-size: var(--font-size-tag); font-weight: var(--font-weight-medium);
}
.dm-pcard__period {
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-muted);
}
.dm-pcard__plus .et_pb_text_inner p {
  margin: 0; padding-bottom: 0 !important; color: var(--color-pink);
  font-weight: var(--font-weight-semibold); letter-spacing: 1.2px;
}
/* Fund D: „Ideal für"-Kasten ist jetzt eine divi/group (Rahmen/Label = Deko)
   mit einem divi/text-Modul für den Freitext (Typografie kommt aus dem
   Preset „DM Pcard Ideal Text"). */
.dm-pcard__ideal {
  background: var(--color-bg-rose); border-radius: var(--radius-md); padding: 16px 18px;
}
.dm-pcard__ideal-label {
  font-family: var(--font-mono); font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-semibold); letter-spacing: 1.5px;
  color: var(--color-pink); margin-bottom: var(--space-6);
}
.dm-pcard__ideal .et_pb_text_inner p { margin: 0 !important; padding: 0 !important; }

/* =========================================================
   Care-Pakete
   ========================================================= */
/* Der Kreis-Badge hängt absolut an der SPALTE (nicht am Modul-Wrapper) */
.dm-care-head { position: relative; }
.dm-care-badge {
  position: absolute; right: 0; top: -10px; width: 190px; height: 190px;
  border-radius: var(--radius-full); background: #fff; box-shadow: var(--shadow-circle-badge);
  transform: rotate(4deg); z-index: 3;
}
.dm-care-badge .et_pb_code_inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; row-gap: 6px; column-gap: 0; text-align: center;
}
.dm-care-badge__heart { color: var(--color-pink); font-size: var(--font-size-h3); }
.dm-care-badge__text { font-size: var(--font-size-sm); font-weight: var(--font-weight-extrabold); line-height: 1.35; }
/* Eine durchgehende Karte mit Innentrennern (Prototyp `.care__foot`) —
   deshalb columnGap 0 an der Row und die Rahmen zellenweise hier. */
.dm-care-foot .et_pb_column {
  background: #fff; padding: 28px var(--space-34);
  border-top: var(--border-card) solid var(--color-border);
  border-bottom: var(--border-card) solid var(--color-border);
}
.dm-care-foot .et_pb_column:first-child {
  border-left: var(--border-card) solid var(--color-border);
  border-top-left-radius: var(--radius-card); border-bottom-left-radius: var(--radius-card);
}
.dm-care-foot .et_pb_column:last-child {
  border-right: var(--border-card) solid var(--color-border);
  border-top-right-radius: var(--radius-card); border-bottom-right-radius: var(--radius-card);
}
.dm-care-foot .et_pb_column + .et_pb_column { border-left: var(--border-card) solid var(--color-line); }
.dm-care-foot__ico {
  flex: none; width: var(--size-circle-icon); height: var(--size-circle-icon);
  border-radius: var(--radius-full); border: var(--border-strong) solid var(--color-pink);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-pink); font-size: 17px; font-weight: var(--font-weight-extrabold);
}
.dm-care-foot__ico--light { font-weight: var(--font-weight-regular); }
.dm-care-foot__ico-wrap { flex: 0 0 auto; }
.dm-care-foot__body { flex: 1 1 auto; }
.dm-care-foot .et_pb_text_inner p { padding-bottom: 0 !important; }

/* =========================================================
   Portfolio-Seite
   ========================================================= */
/* (Die frühere „split"-Steuerleiste des Code-Modul-Sliders entfällt — der
   native divi/group-carousel bringt Pfeile und Punkte selbst mit; die
   Portfolio-Seite nutzt jetzt dieselbe Optik wie die Landing-Sektion.) */
/* Punkteraster auf Nutzerwunsch entfernt (20.07.2026) — s. style-body.css */
.dm-feature-media { position: relative; }
/* Notiz absolut am MODUL-Wrapper positionieren, nicht am inneren <div>
   (LEARNINGS „Modul-Wrapper ist selbst flow-positioniert") — analog
   .dm-abouthero-note/.dm-note--kaffee. */
.dm-feature-note { position: absolute !important; right: 6px; bottom: -34px; z-index: 2; }
.dm-feature-note .dm-note--feature { position: static; }
.dm-mockup--rot-neg { transform: rotate(-1.2deg); }
.dm-mockup--shot { overflow: hidden; position: relative; }
.dm-mockup__url {
  flex: 1; margin-left: var(--space-6); background: var(--color-bg-neutral);
  border-radius: 5px; padding: 4px 12px; font-family: var(--font-mono);
  font-size: 10px; color: var(--color-text-muted);
}
.dm-mockup__bar--sm .et_pb_code_inner { padding: 13px 18px; }
.dm-mockup__bar--sm span:not(.dm-mockup__url) { width: 9px; height: 9px; }
.dm-ticks--lg .et_pb_text_inner p { gap: var(--space-12); }
/* Branchen-Chips (Fund F): jetzt divi/group je Chip mit 2 divi/text-Modulen;
   Layout (flex/gap) kommt aus der Divi-Gruppe, hier nur noch Optik. */
.dm-branches-grid { max-width: 860px; margin: 0 auto; }
.dm-branch-chip {
  background: #fff; border: var(--border-card) solid var(--color-border);
  border-radius: var(--radius-pill); padding: 12px 22px; box-shadow: var(--shadow-card-sm);
}
.dm-branch-chip .et_pb_text_inner p { padding: 0 !important; margin: 0 !important; }
.dm-branches-grid .dm-branch-chip:nth-child(odd) { transform: rotate(-0.7deg); }
.dm-branches-grid .dm-branch-chip:nth-child(even) { transform: rotate(0.8deg); }
.dm-branches-foot .et_pb_text_inner p {
  padding-bottom: 0 !important; transform: rotate(-3deg); font-size: 24px;
}

/* =========================================================
   Schrägkanten der Case-Study-Seiten (44px statt 14px)
   ========================================================= */
.dm-skew--top44 { clip-path: polygon(0 44px, 100% 0, 100% 100%, 0 100%); }
.dm-skew--cs-top { clip-path: polygon(0 44px, 100% 0, 100% calc(100% - 44px), 0 100%); }
.dm-skew--cs-bottom { clip-path: polygon(0 0, 100% 44px, 100% 100%, 0 calc(100% - 44px)); }

/* =========================================================
   Case Studies (Übersicht)
   ========================================================= */
.dm-cscard {
  position: relative; background: var(--color-card);
  border: var(--border-card) solid var(--color-border);
  border-radius: var(--radius-card); overflow: hidden;
  box-shadow: var(--shadow-card-sm); color: var(--color-ink);
  transition: transform .25s ease, box-shadow .25s ease;
}
.dm-cscard:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover-card); }
/* Screenshot (Fund H): shot-wrap/shot sind jetzt divi/group (Layout kommt
   aus der Divi-Gruppe selbst, kein .et_pb_code_inner mehr nötig — nur noch
   Padding/Höhe, die kein Decoration-Attribut abbildet). */
.dm-cscard__shot-wrap { flex: 1.05 1 0; background: var(--color-bg-rose-tint); height: 100%; padding: 34px 34px 0; }
.dm-cscard__shot {
  width: 100%; background: #fff;
  border: var(--border-mockup) solid var(--color-ink-border);
  border-radius: 12px 12px 0 0; border-bottom: none; overflow: hidden;
  box-shadow: 5px 0 0 rgba(41,36,39,0.06);
}
/* Bild statt background-image-Div (Fund H) — Divi lädt .et_pb_image_N{width:100%}
   NACH dem Child-CSS, !important Pflicht (LEARNINGS). */
.dm-cscard__img .et_pb_image_wrap img {
  display: block !important; width: 100% !important; aspect-ratio: 2/1 !important;
  object-fit: cover !important; object-position: top center !important;
}
.dm-cscard__body { flex: 1 1 0; padding: 38px 40px; }
/* Meta-Chips (Fund I): jetzt divi/text je Chip, Layout kommt aus der
   umschließenden divi/group „Chips". */
.dm-cscard__chip {
  border: var(--border-card) solid var(--color-border); background: var(--color-bg-page);
  border-radius: var(--radius-pill); padding: 6px 14px;
}
.dm-cscard__link {
  display: inline-flex; align-items: center; gap: var(--space-9);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-pink);
}
/* Overlay-Link macht die ganze Karte klickbar (Prototyp: <a> um alles) */
.dm-cscard__overlay { position: absolute; inset: 0; z-index: 4; }
.dm-cscard__overlay .et_pb_code_inner, .dm-cscard__overlay a { display: block; width: 100%; height: 100%; }
.dm-cscard .et_pb_text_inner p { padding-bottom: 0 !important; }
.dm-cs-placeholder .et_pb_text_inner p { padding-bottom: 0 !important; }

/* =========================================================
   Case Study (Detail)
   ========================================================= */
/* Fund J: Screenshot ist jetzt dm_mockup_shot() (divi/group + divi/image);
   Punkteraster als ::before an der Gruppe, Notiz absolut am MODUL-Wrapper
   (.dm-cs-hero-note), analog .dm-feature-media/.dm-feature-note. */
/* Punkteraster auf Nutzerwunsch entfernt (20.07.2026) — s. style-body.css */
.dm-cs-hero-media { position: relative; padding-top: 40px; }
.dm-cs-hero-note { position: absolute !important; top: -6px; right: 60px; z-index: 2; }
.dm-cs-hero-note .dm-note--cs-hero { position: static; }
.dm-cs-back {
  display: inline-flex; align-items: center; gap: var(--space-10);
  font-size: var(--font-size-card); font-weight: var(--font-weight-bold); color: var(--color-pink);
}
.dm-cs-stats > .et_pb_module { flex: 1 1 0; min-width: 0; }
.dm-cs-stat { text-align: center; padding: 0 var(--space-24); }
.dm-cs-stat:first-child { padding-left: 0; }
.dm-cs-stat + .dm-cs-stat { border-left: var(--border-divider) solid var(--color-border); }
.dm-cs-stat .et_pb_text_inner p { padding-bottom: 0 !important; }
.dm-cs-stat__sub .et_pb_text_inner p { margin-top: 2px; }

/* Kreis-Icons (Ausgangslage ✕, Ziele ✓) */
.dm-circle-ico {
  display: inline-flex; width: 42px; height: 42px; border-radius: var(--radius-full);
  border: var(--border-strong) solid var(--color-pink);
  align-items: center; justify-content: center;
  color: var(--color-pink); font-size: 19px; font-weight: var(--font-weight-bold);
}
.dm-goal-item__ico-wrap { flex: 0 0 auto; }
.dm-goal-item__body { flex: 1 1 auto; }
.dm-goal-item__ico {
  display: inline-flex; width: var(--size-circle-icon-sm); height: var(--size-circle-icon-sm);
  border-radius: var(--radius-full); background: var(--color-pink); color: #fff;
  align-items: center; justify-content: center;
  font-size: var(--font-size-item-title); font-weight: var(--font-weight-extrabold);
}
.dm-goals-grid > .et_pb_module { flex: 0 1 calc(50% - var(--space-32) / 2); }
.dm-goals__title .et_pb_module_header { display: block; }
.dm-goals .et_pb_text_inner p { padding-bottom: 0 !important; }

/* Prozess: 5 Schritte + gestrichelte Verbindungslinie als ::before der ROW.
   Ein absolut positioniertes Code-Modul bezöge sich auf die SPALTE
   (LEARNINGS „Modul-Wrapper ist selbst flow-positioniert"). */
.dm-process-steps { position: relative; }
.dm-process-steps::before {
  content: ""; position: absolute; top: 19px; left: 10%; right: 10%;
  border-top: var(--border-dashed) dashed var(--color-pink);
  opacity: var(--opacity-line-dashed); pointer-events: none;
}
.dm-process-step { text-align: center; padding: 0 14px; position: relative; z-index: 1; }
.dm-process-step__num {
  display: flex; align-items: center; justify-content: center;
  width: var(--size-circle-step); height: var(--size-circle-step);
  border-radius: var(--radius-full); border: var(--border-strong) solid var(--color-pink);
  background: var(--color-bg-rose-tint); color: var(--color-pink);
  font-weight: var(--font-weight-extrabold); font-size: var(--font-size-item-title);
}
.dm-process-step__num-wrap .et_pb_code_inner { display: flex; justify-content: center; row-gap: 0; }
.dm-process-step .et_pb_text_inner p { padding-bottom: 0 !important; }

/* ---- Vorher/Nachher (NORMALISIERUNG Punkt 12; Fund K) ----
   Das „Vorher"-Wireframe bleibt EIN Code-Modul (bewusst, s. o.); „Nachher" ist
   jetzt divi/image (Screenshot) + divi/text (die 4 Vergleichspunkte).
   Äußeres Layout (Reihe/Spalte, Gap) kommt aus den Divi-Gruppen selbst. */
.dm-compare__col { flex: none; width: 360px; }
.dm-compare__col--after { width: 470px; }
.dm-compare__label {
  font-family: var(--font-script); font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-script); color: var(--color-placeholder); margin-bottom: var(--space-12);
}
.dm-compare__label--after { color: var(--color-pink); }
.dm-compare__label small { font-family: var(--font-body); font-size: var(--font-size-2xs); font-weight: var(--font-weight-bold); }
.dm-compare__frame {
  border: var(--border-strong) solid var(--color-border-input);
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--color-bg-neutral); filter: grayscale(0.3);
}
.dm-compare__frame--after {
  border: var(--border-mockup) solid var(--color-ink-border); background: #fff;
  box-shadow: var(--shadow-mockup); filter: none;
}
/* Bild-Modul statt <img> im Code-Modul-String (Fund K) — Divi lädt
   .et_pb_image_N{width:100%} NACH dem Child-CSS, !important Pflicht (LEARNINGS). */
.dm-compare__frame--after .et_pb_image_wrap img { display: block !important; width: 100% !important; height: auto !important; }
/* .dm-compare__bar sitzt im „Vorher"-Rahmen als roher <div> (Code-Modul-Inhalt,
   unverändert) UND im „Nachher"-Rahmen jetzt als EIGENES Code-Modul —
   Layout-CSS deshalb zusätzlich auf .et_pb_code_inner (LEARNINGS
   „Code-Modul-Inhalt liegt in .et_pb_code_inner"; die direkte Regel bleibt
   für den rohen Vorher-<div> nötig). */
.dm-compare__bar, .dm-compare__bar .et_pb_code_inner {
  display: flex; align-items: center; gap: var(--space-9); padding: 12px 16px;
  border-bottom: var(--border-strong) solid var(--color-border-input); background: #fff;
}
.dm-compare__frame--after .dm-compare__bar { border-bottom: var(--border-mockup) solid var(--color-ink-border); }
.dm-compare__dot {
  width: 9px; height: 9px; border-radius: var(--radius-full);
  border: var(--border-strong) solid var(--color-ink-border); flex: none;
}
.dm-compare__frame:not(.dm-compare__frame--after) .dm-compare__dot { border-color: var(--color-faint); }
.dm-mockup__url--muted { color: var(--color-placeholder); }
.dm-compare__body { padding: 18px; }
.dm-compare__avatar-row { display: flex; gap: 14px; align-items: center; margin-bottom: var(--space-16); }
.dm-compare__avatar { width: 52px; height: 52px; border-radius: var(--radius-full); background: var(--color-border-input); flex: none; }
.dm-compare__lines { flex: 1; }
.dm-compare__bar1 { height: 9px; width: 60%; border-radius: 5px; background: #C9C2C6; margin-bottom: 7px; }
.dm-compare__bar2 { height: 8px; width: 80%; border-radius: 5px; background: var(--color-border-input); }
.dm-compare__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dm-compare__grid span { aspect-ratio: 1; display: block; background: #D5CED2; }
.dm-compare__grid span:nth-child(2), .dm-compare__grid span:nth-child(6) { background: #C9C2C6; }
.dm-compare__grid span:nth-child(3), .dm-compare__grid span:nth-child(4) { background: var(--color-border-input); }
.dm-compare__notes { margin-top: var(--space-14); }
/* Vergleichspunkte sind jetzt divi/text (Fund K) — Icon+Text-Reihe deshalb am
   <p> in .et_pb_text_inner (analog .dm-ticks), nicht am Modul-Wrapper. */
.dm-compare__note-line .et_pb_text_inner p {
  display: flex; gap: var(--space-9); align-items: center; margin: 0; padding: 0;
}
.dm-compare__note-line--bad span { color: var(--color-placeholder); font-weight: var(--font-weight-bold); }
.dm-compare__note-line--good span { color: var(--color-pink); font-weight: var(--font-weight-bold); font-size: 15px; }
.dm-compare__arrow { flex: none; margin-top: 150px; }
@media (min-width: 981px) {
  .dm-compare-wrap { position: relative; }
  .dm-compare-wrap::after {
    content: "Was für ein\A  Unterschied!"; white-space: pre; text-align: center;
    position: absolute; right: calc(50% - 545px); top: 150px;
    font-family: var(--font-script); font-size: var(--font-size-script-lg);
    font-weight: var(--font-weight-semibold); color: var(--color-pink);
    transform: rotate(6deg); line-height: 1.15; pointer-events: none; z-index: 3;
  }
}

/* ---- Design-Entscheidungen ---- */
.dm-decision-card { overflow: hidden; }
.dm-decision__preview .et_pb_code_inner {
  background: var(--color-bg-rose-tint); padding: 24px;
  display: flex; flex-direction: row; justify-content: center; column-gap: 14px; row-gap: 0;
}
.dm-decision__preview--center .et_pb_code_inner {
  flex-direction: column; align-items: center; text-align: center;
  padding: 22px 24px; row-gap: 0; column-gap: 0;
}
.dm-decision__preview--tight .et_pb_code_inner { row-gap: 9px; }
.dm-decision__body { padding: 24px 26px 28px; flex: 1 1 auto; }
.dm-decision__body .et_pb_text_inner p { padding-bottom: 0 !important; }
.dm-swatch { text-align: center; }
.dm-swatch__dot { width: 44px; height: 44px; border-radius: var(--radius-full); margin: 0 auto var(--space-6); }
.dm-swatch__label { font-family: var(--font-mono); font-size: var(--font-size-4xs); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); }
.dm-decision__typo-h { font-size: var(--font-size-item-title-lg); font-weight: var(--font-weight-extrabold); color: var(--color-ink-dark); }
.dm-decision__typo-s { font-family: var(--font-script); font-size: 22px; color: var(--color-pink); margin-top: 2px; }
.dm-decision__typo-m { font-family: var(--font-mono); font-size: var(--font-size-4xs); color: var(--color-placeholder); margin-top: var(--space-8); letter-spacing: 1px; }
.dm-decision__cta-badge {
  display: inline-block; background: var(--color-pink); color: #fff;
  font-size: var(--font-size-2xs); font-weight: var(--font-weight-extrabold);
  padding: 8px 20px; border-radius: var(--radius-pill); box-shadow: var(--shadow-cta-sm);
}
.dm-decision__cta-note { font-family: var(--font-mono); font-size: var(--font-size-4xs); font-weight: var(--font-weight-semibold); color: var(--color-pink); }

/* ---- Ergebnis-Kennzahlen: Trennlinien ---- */
.dm-results-grid > .et_pb_column + .et_pb_column { border-left: var(--border-divider) solid var(--color-border-pink-soft); }

/* ---- Feedback ---- */
.dm-feedback__mark-wrap { flex: 0 0 auto; }
.dm-feedback__body { flex: 1 1 auto; }
.dm-feedback__mark { font-family: var(--font-logo); font-size: 64px; line-height: 0.8; color: var(--color-pink-logo); }
.dm-feedback__text .et_pb_text_inner p, .dm-feedback__author .et_pb_text_inner p { padding-bottom: 0 !important; }
.dm-feedback__card { position: relative; }
.dm-feedback__card-note {
  position: absolute; top: -30px; right: -14px;
  font-family: var(--font-script); font-size: var(--font-size-script);
  font-weight: var(--font-weight-semibold); color: var(--color-pink);
  transform: rotate(5deg); pointer-events: none;
}
.dm-feedback__card .et_pb_text_inner p { padding-bottom: 0 !important; }

/* =========================================================
   Responsive der Unterseiten (Divi-Breakpoints 980/767)
   ========================================================= */
@media (max-width: 980px) {
  /* Punkteraster des Über-mich-Heros ist ein ::before an der Polaroid-Gruppe
     (früher ein eigenes <div class="dm-abouthero-dots">) — beim Ausblenden
     mitziehen, sonst ragt es auf Tablet/Phone über den Rand. */
  /* Die ::before-Punkteraster sind seit 20.07.2026 ganz entfernt (Nutzerwunsch)
     — hier stehen nur noch die Deko-Notizen. */
  .dm-note, .dm-abouthero-note, .dm-feature-note, .dm-cs-hero-note,
  .dm-feedback__card-note { display: none; }
  .dm-about-hero, .dm-werdegang, .dm-steps, .dm-facts, .dm-values,
  .dm-pakete-hero, .dm-pakete-websites, .dm-care, .dm-pakete-cta,
  .dm-portfolio-hero, .dm-feature-project, .dm-standard, .dm-branches, .dm-portfolio-cta,
  .dm-cs-hero-page, .dm-cs-cards, .dm-cs-cta,
  .dm-cs-hero, .dm-cs-skew, .dm-goals, .dm-compare-wrap, .dm-decisions, .dm-feedback { overflow-x: clip; }

  /* Timeline schmaler (NORMALISIERUNG Breakpoints) */
  .dm-tl__label { flex: 0 0 110px; }
  .dm-tl__rail { flex: 0 0 30px; }

  /* Care-Info-Streifen: gestapelt, Trenner wird zur Oberlinie */
  .dm-care-foot .et_pb_column,
  .dm-care-foot .et_pb_column:first-child,
  .dm-care-foot .et_pb_column:last-child,
  .dm-care-foot .et_pb_column + .et_pb_column {
    border-left: var(--border-card) solid var(--color-border);
    border-right: var(--border-card) solid var(--color-border);
    border-radius: 0; padding: var(--space-22) var(--space-24);
  }
  .dm-care-foot .et_pb_column:first-child {
    border-top-left-radius: var(--radius-card); border-top-right-radius: var(--radius-card);
  }
  .dm-care-foot .et_pb_column:last-child {
    border-bottom-left-radius: var(--radius-card); border-bottom-right-radius: var(--radius-card);
  }

  /* Prozess: 2 Spalten — die Verbindungslinie ergibt dann keinen Sinn mehr */
  .dm-process-steps::before { display: none; }

  /* Vorher/Nachher gestapelt (flex-direction:column kommt jetzt aus der
     divi/group „Vorher-Nachher" selbst, layoutTablet), Pfeil gedreht */
  .dm-compare__col, .dm-compare__col--after { width: 100%; max-width: 420px; }
  .dm-compare__arrow { transform: rotate(90deg); margin: 0; }

  /* Ergebnis: 2 Spalten — Trenner nur zwischen den Paaren
     (Resets in allen spezifischeren Varianten, LEARNINGS „Zell-Trennlinien") */
  .dm-results-grid > .et_pb_column,
  .dm-results-grid > .et_pb_column + .et_pb_column { border-left: none; }
  .dm-results-grid > .et_pb_column:nth-child(even) { border-left: var(--border-divider) solid var(--color-border-pink-soft); }

  .dm-cscard__shot-wrap { padding: 26px 26px 0; }
  .dm-cscard__body { padding: 28px 26px; }
  .dm-goals-grid > .et_pb_module { flex: 0 1 100%; }
  html, body { overflow-x: clip; }
}
@media (max-width: 767px) {
  .dm-cs-stats { align-items: stretch; }
  .dm-cs-stat, .dm-cs-stat:first-child {
    border-left: none !important; padding-left: 0; padding-right: 0; text-align: left;
  }
  .dm-cs-stat .et_pb_text_inner p { text-align: left !important; }
  .dm-results-grid > .et_pb_column,
  .dm-results-grid > .et_pb_column + .et_pb_column,
  .dm-results-grid > .et_pb_column:nth-child(even) {
    border-left: none; border-top: var(--border-divider) solid var(--color-border-pink-soft);
    padding-top: var(--space-20);
  }
  .dm-results-grid > .et_pb_column:first-child { border-top: none; padding-top: 0; }
  .dm-result-item { padding: 0; }
  .dm-branches-grid .dm-branch-chip { transform: none; }
  .dm-cscard__shot-wrap { padding: 20px 20px 0; }
  .dm-cscard__body { padding: 24px 20px; }
  /* Phone-Stacking der Fun-Facts-Karten: hier darf der Fixbreiten-Cap weg
     (volle Breite gewünscht) — bei Tablet (980) MUSS max-width:330px aber
     bestehen bleiben, sonst wächst jede Karte auf ihre Textbreite und der
     Flex-Wrap kann nicht mehr 2 pro Zeile stapeln (Fix „Fun-Facts Tablet"). */
  .dm-fact-card { max-width: none; }
  .dm-facts-grid .dm-fact-card { transform: none; }
}

/* Weitere Flex-Inhaltsspalten: dieselbe min-width-Falle */
.dm-value-item__body, .dm-goal-item__body, .dm-care-foot__body,
.dm-feedback__body, .dm-cscard__body { min-width: 0; }