/*
Theme Name:   danimaascom
Theme URI:    https://danimaas.com
Description:  Divi-5-Child-Theme für danimaas. (Webdesign für Coaches, Trainer & Selbstständige). Design lebt in Design Variables, Presets & Theme-Builder-Templates; hier nur das Child-CSS-Ventil für nicht-native Muster.
Author:       danimaas.
Author URI:   https://danimaas.com
Template:     Divi
Version:      1.0.0
License:      GPL-2.0-or-later
Text Domain:  danimaascom
*/

/* =========================================================
   Projekt-CSS — nur nicht-native Muster (Browser-Mockup,
   Polaroid, Portfolio-Slider, Kontaktformular, Chips, Logo,
   Badges, Kritzel-Deko, Schräg-Kanten, MAAS-Balken, Wort-
   Kreise) + Divi-Quirk-Fixes (DIVI5-LEARNINGS.md).
   Alles gescoped über dm-* / Section-Klassen.
   ========================================================= */

/* ---- Spiegel der Design Variables (für dieses Custom CSS) ---- */
:root {
  --dm-pink: #E01274;
  --dm-pink-btn: #D80F6D;
  --dm-pink-btn-hover: #C60F63;
  --dm-pink-logo: #FB5E8E;
  --dm-ink: #1B171A;
  --dm-ink-dark: #16121A;
  --dm-ink-soft: #241F22;
  --dm-ink-border: #292427;
  --dm-text: #2A2529;
  --dm-text-soft: #3A3438;
  --dm-text-muted: #4E484C;
  --dm-faint: #B9B2B5;
  --dm-placeholder: #A39CA0;
  --dm-mockup-line: #8B8489;
  --dm-dot-pattern: #DDD6D9;
  --dm-bg-page: #FCFAFA;
  --dm-bg-rose: #FAF2F5;
  --dm-bg-rose-deep: #FAE3EC;
  --dm-bg-form: #FDFBFC;
  --dm-card: #FFFFFF;
  --dm-border: #E4DFE1;
  --dm-border-input: #DCD6D9;
  --dm-line: #EFEAEC;
  --dm-border-soft: #E0D5DA;
  --dm-tape: rgba(216,15,109,0.55);
  --dm-font-body: 'Plus Jakarta Sans', sans-serif;
  --dm-font-mono: 'IBM Plex Mono', monospace;
  --dm-font-script: 'Caveat', cursive;
  --dm-font-logo: 'Alfa Slab One', serif;
  --dm-font-signature: 'Yellowtail', cursive;
  --dm-radius-pill: 999px;
  --dm-shadow-cta-sm: 0 5px 14px rgba(216,15,109,0.30);
  --dm-shadow-card: 0 3px 10px rgba(27,23,26,0.04);
  --dm-shadow-card-sm: 0 2px 6px rgba(27,23,26,0.03);
  --dm-shadow-mockup: 5px 8px 0 rgba(41,36,39,0.06);
  --dm-shadow-polaroid: 0 14px 34px rgba(27,23,26,0.14);
  --dm-shadow-form: 0 4px 16px rgba(27,23,26,0.05);
}

.dm-pink { color: var(--dm-pink); }
.dm-sep { color: var(--dm-faint); }

/* ---- Icon-Bildmodule: Divi rendert .et_pb_image_N{width:100%} (LEARNINGS) ---- */
.dm-pcard__icon.et_pb_module,
.dm-pcard__icon .et_pb_image_wrap { width: fit-content !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: 9px; margin: 0; padding: 0;
  flex-wrap: wrap;
}
.dm-eyebrow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dm-pink); flex: none; display: inline-block; }

/* ---- Heading-Marker (Unterstriche) ---- */
.dm-u__mark { display: inline-block; border-bottom: 4px solid var(--dm-pink); padding-bottom: 2px; }
.dm-u-pink { border-bottom: 2px solid var(--dm-pink); }
.dm-dash { color: var(--dm-pink); font-weight: 400; }

/* ---- Wort-Kreis (H1 „einzigartig" / Kontakt „gemeinsam") ---- */
.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");
}

/* ---- Signatur „Dani." (Yellowtail-Ersatz für Amsterdam Four) ---- */
.dm-signature { font-family: var(--dm-font-signature); font-weight: 400; font-size: 52px; color: var(--dm-pink-btn); }
@media (max-width: 980px) { .dm-signature { font-size: 42px; } }
@media (max-width: 767px) { .dm-signature { font-size: 36px; } }
.dm-about-title .et_pb_module_header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dm-contact-title .dm-heart { font-family: var(--dm-font-script); font-weight: 600; font-size: 44px; color: var(--dm-ink-soft); }

/* ---- „MAAS…"-Heading (Warum ich) ---- */
.dm-benefits-title .et_pb_module_header { display: flex; align-items: baseline; flex-wrap: wrap; }
.dm-maas { position: relative; display: inline-block; font-family: var(--dm-font-signature); font-weight: 400; color: var(--dm-pink-btn); padding-right: 4px; }
.dm-maas__script { font-family: var(--dm-font-signature); }
.dm-maas__bar { position: absolute; left: -20px; right: -30px; bottom: 6px; height: 5px; background: var(--dm-pink-btn); border-radius: 3px; transform: rotate(-1.5deg); }
.dm-benefits-rest { font-weight: 700; margin-left: 12px; }

/* ---- Schräg-Kanten + Rosa-Glow (Über mich / Warum ich) ---- */
.dm-about { position: relative; clip-path: polygon(0 14px, 100% 0, 100% calc(100% - 12px), 0 100%); }
.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,.55), transparent 70%),
              radial-gradient(ellipse 140px 300px at 2% 75%, rgba(238,178,203,.5), transparent 70%);
}
.dm-benefits { position: relative; clip-path: polygon(0 0, 100% 14px, 100% 100%, 0 calc(100% - 12px)); }
@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 22px 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(--dm-ink-soft); font-weight: 400; font-size: 24px; }

/* ---- Feature-Blurbs (Warum ich) ---- */
.dm-feature .et_pb_module_header { padding-bottom: 7px; margin: 0; line-height: 1.3; }
.dm-feature .et_pb_blurb_container { padding-top: 0; }

/* ---- Service-Karten ---- */
.dm-pcard { position: relative; }
.dm-pcard__badge {
  position: absolute; top: -16px; left: 22px; z-index: 2;
  background: var(--dm-pink-btn); color: #fff;
  font-family: var(--dm-font-mono); font-size: 12px; font-weight: 600; letter-spacing: 1.5px;
  padding: 7px 16px; border-radius: 4px 4px 4px 0;
}
.dm-pcard__meta .et_pb_text_inner p { margin: 0; padding: 0; }
.dm-pcard__meta-sub { color: var(--dm-text-muted); font-weight: 600; }
.dm-pcard .dm-pink { font-family: var(--dm-font-mono); font-weight: 500; }

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

/* ---- Mail-Link ---- */
.dm-mail .et_pb_text_inner p { margin: 0; padding: 0; }
.dm-mail a { display: inline-flex; align-items: center; gap: 14px; }
.dm-mail svg { flex: none; }

/* =========================================================
   Code-Modul-Komponenten (Markup 1:1 aus dem Prototyp)
   ========================================================= */

/* ---- Logo (Header + Footer) ---- */
.dm-logo { display: inline-flex; align-items: center; gap: 14px; color: var(--dm-ink); text-decoration: none; }
.dm-logo__mono { position: relative; font-family: var(--dm-font-logo); font-size: 46px; line-height: .95; color: var(--dm-pink-logo); letter-spacing: -2px; display: inline-block; padding: 2px 16px; user-select: none; }
.dm-logo__script { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -52%); white-space: nowrap; font-family: var(--dm-font-signature); font-size: 21px; line-height: 1; color: #111; pointer-events: none; }
.dm-logo__divider { width: 1.5px; height: 34px; background: var(--dm-border-input); flex: none; }
.dm-logo__slogan { font-family: var(--dm-font-body); font-weight: 700; font-size: 11px; letter-spacing: .3px; color: #111; line-height: 1.5; }
.dm-logo__slogan span { color: var(--dm-pink); }
/* Mono + Script überlagern sich: relatives Wrapper-Span ums Monogramm */
.dm-logo__mono { }
.dm-logo { position: relative; }
.dm-logo .dm-logo__script { left: 16px; transform: translateY(-52%); top: 50%; }

/* ---- Chips (Hero) ---- */
.dm-chips { display: flex; flex-wrap: wrap; gap: 12px; max-width: 520px; }
.dm-chip { display: inline-flex; align-items: center; gap: 8px; border: 1.3px solid var(--dm-border); background: var(--dm-card); border-radius: var(--dm-radius-pill); padding: 9px 18px; font-family: var(--dm-font-mono); font-size: 12px; font-weight: 500; color: var(--dm-text); }
.dm-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dm-pink); }

/* ---- Hero-Visual (Browser-Mockup + Deko) ---- */
.dm-hero-visual { position: relative; padding-top: 64px; }
.dm-hero-dots { position: absolute; right: -40px; top: 120px; bottom: -30px; width: 420px; background-image: radial-gradient(var(--dm-dot-pattern) 1.6px, transparent 1.6px); background-size: 24px 24px; opacity: .7; }
.dm-note--hero { position: absolute; top: 0; right: 56px; font-family: var(--dm-font-script); font-size: 27px; font-weight: 600; color: var(--dm-pink); transform: rotate(-6deg); line-height: 1.3; text-align: center; z-index: 2; }
.dm-note--hero span { font-size: 24px; }
.dm-mockup { position: relative; background: #fff; border: 2.5px solid var(--dm-ink-border); border-radius: 12px; transform: rotate(1.2deg); box-shadow: var(--dm-shadow-mockup); }
.dm-mockup__bar { display: flex; align-items: center; gap: 9px; padding: 15px 20px; border-bottom: 2.5px solid var(--dm-ink-border); }
.dm-mockup__bar span { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--dm-ink-border); }
.dm-mockup__body { padding: 30px 34px 32px; }
.dm-mockup__row { display: grid; grid-template-columns: 150px 1fr; gap: 32px; align-items: start; margin-bottom: 30px; }
.dm-mockup__img { width: 150px; height: 118px; }
.dm-mockup__lines { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.dm-mockup__lines > div { height: 11px; border-radius: 6px; }
.dm-mockup__checks { display: flex; flex-direction: column; gap: 13px; font-family: var(--dm-font-mono); font-size: 14px; font-weight: 500; color: var(--dm-ink-soft); }
.dm-mockup__checks > div { display: flex; align-items: center; gap: 14px; }
.dm-mockup__checks span { color: var(--dm-pink); font-size: 19px; font-weight: 700; }
.dm-mockup__checks em { font-style: normal; border-bottom: 2.5px solid var(--dm-pink); padding-bottom: 2px; }
@media (max-width: 767px) {
  .dm-hero-dots { display: none; }
  .dm-mockup__row { grid-template-columns: 110px 1fr; gap: 20px; }
  .dm-mockup__img { width: 110px; height: auto; }
  .dm-mockup__body { padding: 22px 22px 24px; }
}

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

/* ---- Polaroid (Über mich) ---- */
.dm-polaroid { background: #fff; padding: 14px 14px 52px; box-shadow: var(--dm-shadow-polaroid); transform: rotate(-2.4deg); position: relative; width: max-content; margin: 0 auto; }
.dm-polaroid__tape { position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-4deg); width: 110px; height: 30px; background: var(--dm-tape); box-shadow: 0 1px 3px rgba(27,23,26,.12); }
.dm-polaroid__photo { width: 330px; height: 360px; }
.dm-slot { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #EDE6E9; border: 2px dashed var(--dm-border-input); filter: grayscale(1); }
.dm-slot span { font-family: var(--dm-font-mono); font-size: 12px; color: var(--dm-mockup-line); text-align: center; line-height: 1.6; padding: 0 10px; }
.dm-polaroid__caption { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-family: var(--dm-font-script); font-size: 24px; font-weight: 600; color: var(--dm-ink-soft); }
.dm-polaroid__caption span { color: var(--dm-pink); }
@media (max-width: 400px) { .dm-polaroid__photo { width: 260px; height: 284px; } }

/* ---- Portfolio-Slider ---- */
.dm-portfolio-card { background: var(--dm-card); border: 1.3px solid var(--dm-border); border-radius: 16px; padding: 34px 34px 26px; box-shadow: var(--dm-shadow-card); }
.dm-slider { overflow: hidden; border-radius: 10px; }
.dm-slider__track { display: flex; transition: transform .55s cubic-bezier(.22,1,.36,1); }
.dm-slide { flex: none; width: 50%; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 16px; }
.dm-slide__img { width: 100%; aspect-ratio: 2 / 1; background-size: contain; background-position: center; background-repeat: no-repeat; }
.dm-slide__name { font-size: 15px; font-weight: 800; color: var(--dm-ink-dark); margin-bottom: 3px; text-align: center; }
.dm-slide__tag { font-family: var(--dm-font-mono); font-size: 11.5px; color: var(--dm-text-muted); text-align: center; }
.dm-portfolio-controls { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 22px; padding-top: 20px; border-top: 1.3px solid var(--dm-line); }
.dm-portfolio-counter { font-family: var(--dm-font-mono); font-size: 12.5px; font-weight: 600; color: var(--dm-text); letter-spacing: 1px; }
.dm-portfolio-nav { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--dm-pink); background: #fff; color: var(--dm-pink); font-size: 19px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.dm-portfolio-nav:hover { background: #FDEDF4; }
.dm-portfolio-nav--next { background: var(--dm-pink-btn); color: #fff; box-shadow: 0 4px 12px rgba(216,15,109,.25); }
.dm-portfolio-nav--next:hover { background: var(--dm-pink-btn-hover); }
.dm-portfolio-dots { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.dm-dot { width: 10px; height: 10px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: var(--dm-border-soft); transition: background .3s; }
.dm-dot.is-active { background: var(--dm-pink-btn); }
@media (max-width: 980px) {
  .dm-slider { overflow: visible; }
  .dm-slider__track { flex-direction: column; gap: 30px; transform: none !important; transition: none; }
  .dm-slide { width: 100%; }
  .dm-portfolio-controls, .dm-portfolio-dots { display: none; }
}

/* ---- Kontakt: Links + Formular ---- */
.dm-wa-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--dm-pink); color: #fff; border-radius: var(--dm-radius-pill); padding: 13px 24px; font-size: 14.5px; font-weight: 700; width: max-content; box-shadow: var(--dm-shadow-cta-sm); text-decoration: none; }
.dm-wa-btn:hover { background: var(--dm-pink-btn-hover); }
.dm-cform { background: var(--dm-bg-form); border: 1.3px solid var(--dm-border); border-radius: 16px; padding: 30px 32px 32px; box-shadow: var(--dm-shadow-form); display: flex; flex-direction: column; gap: 18px; }
.dm-cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dm-cform label { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--dm-text); }
.dm-cform input, .dm-cform select, .dm-cform textarea { border: 1.3px solid var(--dm-border-input); border-radius: 8px; padding: 12px 14px; font-size: 14px; font-family: var(--dm-font-body); background: #fff; color: var(--dm-ink); outline: none; }
.dm-cform textarea { resize: vertical; min-height: 96px; }
.dm-cform input:focus, .dm-cform select:focus, .dm-cform textarea:focus { border-color: var(--dm-pink); }
.dm-cform__submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--dm-pink-btn); color: #fff; border: none; border-radius: 10px; padding: 16px 24px; font-size: 15px; font-weight: 700; font-family: var(--dm-font-body); cursor: pointer; box-shadow: 0 6px 16px rgba(216,15,109,.25); }
.dm-cform__submit:hover { background: var(--dm-pink-btn-hover); }
@media (max-width: 767px) { .dm-cform__row { grid-template-columns: 1fr; } }

/* ---- Footer ---- */
.dm-footer-inner { display: flex; align-items: center; justify-content: center; gap: 18px; border-top: 2px solid var(--dm-ink-border); padding-top: 26px; flex-wrap: wrap; }
.dm-footer .dm-logo--sm .dm-logo__mono { font-size: 34px; letter-spacing: -1.5px; padding: 2px 12px; }
.dm-footer .dm-logo--sm .dm-logo__script { font-size: 16px; }
.dm-footer-text { font-family: var(--dm-font-mono); font-size: 12px; color: var(--dm-text-muted); }
.dm-footer-heart { color: var(--dm-pink); font-size: 15px; }
.dm-footer-links a { color: var(--dm-text-muted); }
.dm-footer-links a:hover { color: var(--dm-pink); }

/* ---- Divi-Quirk-Fixes (LEARNINGS) ---- */
/* Text-Modul-Absätze: Divi gibt p line-height 2 + padding-bottom 1em */
.dm-eyebrow .et_pb_text_inner p, .dm-mail .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; }
/* Menu-Modul: transparenter Hintergrund ist im Layout gesetzt; Hamburger ≤980 = Divi-Standard */

/* =========================================================
   Mobile-Overflow-Fixes (LEARNINGS „Buttons shrinken nicht",
   „Deko-Overlaps"): kein horizontaler Scroll ≤980/767.
   Gescoped über dm-*-Sektionsklassen (keine Divi-Basisklassen).
   ========================================================= */
@media (max-width: 980px) {
  /* Kritzel-Deko: auf Tablet/Phone ausblenden (Prototyp-Verhalten) */
  .dm-note--hero { display: none; }
  /* Dekobedingter Überstand der geklebten/rotierten Elemente wegschneiden */
  .dm-hero, .dm-about, .dm-benefits, .dm-services, .dm-portfolio, .dm-contact { overflow-x: clip; }
  /* Header-CTA: volle Breite, Buttons zentriert (Buttons shrinken sonst nicht) */
  .dm-header-cta { width: 100%; justify-content: center; }
  .dm-header-cta .et_pb_button_module_wrapper { flex: 1 1 auto; }
  .dm-header-cta .et_pb_button { width: 100%; text-align: center; box-sizing: border-box; }
}
@media (max-width: 767px) {
  .dm-hero-visual { padding-top: 20px; }
  .dm-mockup__row { grid-template-columns: 96px 1fr; gap: 18px; }
  .dm-mockup__img { width: 96px; height: auto; }
  /* Hero- + Header-CTA: Buttons gestapelt, volle Breite (Buttons shrinken nicht) */
  .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%; }
  /* Chips dürfen die Spalte nicht sprengen */
  .dm-chips { max-width: 100%; }
}

/* Sicherheitsnetz: kein horizontaler Scroll durch rotierte/geklebte Deko
   (H1-Dash, Mockup, Sticky) — nur mobil, Desktop unberührt. clip statt hidden
   erhält position:sticky. */
@media (max-width: 980px) {
  html, body { overflow-x: clip; }
}

/* QA #3: zweites (kleines pinkes) Herz im Kontakt-Titel */
.dm-contact-title .dm-heart::after {
  content: "♡"; font-family: var(--dm-font-script); font-weight: 600;
  font-size: 24px; color: var(--dm-pink); position: relative; top: -16px; margin-left: 2px;
}

/* =========================================================
   QA #2: Frei schwebende Kritzel-Anmerkungen (Caveat).
   Reine Deko → Child-CSS (CLAUDE.md). Nur Desktop ≥981px;
   Position relativ zur zentrierten Container-Mitte (viewport-robust).
   ========================================================= */
@media (min-width: 981px) {
  .dm-pain, .dm-services, .dm-benefits, .dm-portfolio, .dm-contact { position: relative; }
  .dm-pain::before, .dm-pain::after, .dm-services::after, .dm-benefits::after,
  .dm-portfolio::after, .dm-contact::before {
    font-family: var(--dm-font-script); pointer-events: none; z-index: 3;
  }

  /* Kennst du das: großes „?" (links) + „Zeit, das zu ändern." (rechts) */
  .dm-pain::before {
    content: "?"; position: absolute; left: calc(50% - 525px); top: 300px;
    font-size: 74px; font-weight: 600; color: var(--dm-pink); transform: rotate(-10deg);
  }
  .dm-pain::after {
    content: "Zeit,\A das zu\A ändern."; white-space: pre; text-align: center;
    position: absolute; left: calc(50% + 478px); top: 320px;
    font-size: 27px; font-weight: 600; color: var(--dm-ink-soft); line-height: 1.15;
  }
  /* Leistungen: „Kein Blabla. Nur das, was du wirklich brauchst." (rechts oben) */
  .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: 25px; font-weight: 600; color: var(--dm-ink-soft); line-height: 1.25;
  }
  /* Warum ich: Sticky-Note „Ehrlich. Direkt. Auf den Punkt." (rechts) */
  .dm-benefits::after {
    content: "♡\A Ehrlich.\A Direkt.\A Auf den Punkt."; white-space: pre; text-align: center;
    position: absolute; right: calc(50% - 540px); top: 40px; width: 150px;
    padding: 20px 16px 18px; background: var(--dm-bg-form); border: 1px solid var(--dm-border-soft);
    box-shadow: 0 8px 20px rgba(27,23,26,.12); transform: rotate(4deg);
    font-size: 18px; font-weight: 600; color: var(--dm-ink-soft); line-height: 1.35;
  }
  /* Portfolio: „Echte Projekte. Echte Menschen." (rechts) */
  .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: 25px; font-weight: 600; color: var(--dm-ink-soft); line-height: 1.25;
  }
  /* Kontakt: Sticky-Note „Ich freu mich auf dein Projekt! ♡" (links unten) */
  .dm-contact::before {
    content: "Ich freu\A mich auf dein\A Projekt! ♡"; white-space: pre; text-align: center;
    position: absolute; left: calc(50% - 250px); bottom: 70px; width: 170px;
    padding: 22px 16px 20px; background: var(--dm-bg-form); border: 1px solid var(--dm-border-soft);
    box-shadow: 0 10px 24px rgba(27,23,26,.14); transform: rotate(-5deg);
    font-size: 21px; font-weight: 600; color: var(--dm-ink-soft); line-height: 1.25;
  }
}