/* ============================================================
   Snorkeling Duck – Corporate Design 2026 (Vorschau-Ebene)
   Quelle der Wahrheit: Obsidian 🐤-05-brand/noor-design-wissen.md (A0, G)
   Schriften lokal (DSGVO): Bricolage Grotesque (Headlines), Plus Jakarta Sans (Text), JetBrains Mono (Zahlen/Labels)
   ============================================================ */
@font-face { font-family: 'Bricolage Grotesque'; src: url('../fonts/bricolage-var.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrains-mono-var.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }
/* 28.09.2026 (Basti): Überschriften bleiben in Fraunces – Bricolage-Umleitung entfernt, Bricolage bleibt nur geladen */

:root {
  /* Farben (Rollen 60/30/10) */
  --sd-yellow: #F5C518;   /* Signal: CTA, Markierung */
  --sd-yellow-dk: #C8A200;
  --sd-navy: #031E36;     /* Anker: dunkle Flächen, Text auf hell */
  --sd-navy-deep: #021526;/* zweite Tiefe für Verläufe/Karten */
  --sd-cream: #FFF5E0;    /* Grund heller Abschnitte */
  --sd-teal: #00A896;     /* Sekundär: Links, Icons, Info */
  --sd-coral: #FF6B47;    /* Zweit-Akzent sparsam */
  --sd-ink-soft: rgba(3,30,54,.72);
  /* Schriften */
  --sd-font-head: 'Fraunces', Georgia, serif; /* Basti 28.09.: zurück auf Fraunces */
  --sd-font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --sd-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* Skalen: Abstand 4-er Raster, Typo Verhältnis 1,25 */
  --sd-s1: 4px; --sd-s2: 8px; --sd-s3: 12px; --sd-s4: 16px; --sd-s5: 24px; --sd-s6: 32px; --sd-s7: 48px; --sd-s8: 64px; --sd-s9: 96px;
  --sd-radius: 16px; --sd-radius-l: 24px;
  /* bestehende Theme-Variablen auf das System ziehen */
  --duck: var(--sd-yellow); --duck-dk: var(--sd-yellow-dk); --duck-on: var(--sd-navy);
  --blue: var(--sd-teal); --green: var(--sd-teal);
}

/* Headlines: Bricolage mit enger Laufweite, echte Groß-/Kleinschreibung, Hervorhebung über Farbe statt Kursiv-Imitat */
.sd-ci h1, .sd-ci h2, .sd-ci .ht, .sd-ci .sh { font-family: var(--sd-font-head) !important; }

.sd-ci h1 em, .sd-ci h2 em, .sd-ci .ht em, .sd-ci .sh em { color: var(--sd-yellow); }
/* Zahlen, Preise, Labels in Mono (ruhig, technisch, gut lesbar) */
.sd-ci .fp-price, .sd-ci .pkg-price, .sd-ci .hv, .sd-ci .eye, .sd-ci .port-tag, .sd-ci .ps-num, .sd-ci .why-num { font-family: var(--sd-font-mono) !important; letter-spacing: 0; }
.sd-ci .eye { font-weight: 500; letter-spacing: .08em; }
/* Hell/Dunkel im Wechsel: Ablauf + Über mich auf Creme, Text in Navy */
.sd-ci .process, .sd-ci .about { background: var(--sd-cream) !important; color: var(--sd-navy); }
.sd-ci .process :is(h2,h3,.sh,.ps-title), .sd-ci .about :is(h2,h3,.sh,.ac-name) { color: var(--sd-navy) !important; }
.sd-ci .process :is(p,.sub,.ps-desc,li), .sd-ci .about :is(p,.sub,li,.ac-item,.ac-role) { color: var(--sd-ink-soft) !important; }
.sd-ci .process .sh em, .sd-ci .about .sh em { color: var(--sd-navy); background: linear-gradient(transparent 58%, var(--sd-yellow) 58%); padding: 0 .08em; }
.sd-ci .process .ps { background: #fff; border-color: rgba(3,30,54,.12); }
.sd-ci .about .ac-dot { background: var(--sd-teal); }
/* Tauchgang-Band (ersetzt großen Teaser) */
.sd-tg-band { background: var(--sd-yellow); color: var(--sd-navy); padding: var(--sd-s6) clamp(20px,5vw,56px); }
.sd-tg-band__in { max-width: 1100px; margin: 0 auto; display: flex; gap: var(--sd-s5); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.sd-tg-band__k { font-family: var(--sd-font-mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 var(--sd-s1); }
.sd-tg-band__t { font-family: var(--sd-font-head); font-weight: 900; font-size: clamp(1.4rem, 3vw, 2rem); margin: 0; line-height: 1.1; }
.sd-tg-band__s { margin: var(--sd-s2) 0 0; font-size: .95rem; color: var(--sd-ink-soft); }
.sd-tg-band__btn { display: inline-block; background: var(--sd-navy); color: var(--sd-cream) !important; font-weight: 700; padding: 14px 26px; border-radius: 999px; text-decoration: none; }
.sd-tg-band__btn:focus-visible { outline: 3px solid var(--sd-navy); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .sd-ci .reveal { transition: none !important; opacity: 1 !important; transform: none !important; } }