/* ==========================================================================
   DOM – Marken-Grundstil
   Typografie und wiederkehrende Gestaltungselemente, die auf Website UND
   Druckmedien gleich aussehen sollen. Layout gehört NICHT hierher, sondern
   in das jeweilige Medium (site/css/site.css, print/css/print.css).

   Einbinden:  fonts.css → tokens.css → brand.css
   ========================================================================== */

.dom {
  font-family: var(--dom-font-text);
  font-size: var(--dom-fs-m);
  line-height: var(--dom-lh-text);
  color: var(--dom-text);
  background: var(--dom-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Überschriften ------------------------------------------------------- */
.dom h1, .dom h2, .dom h3, .dom .dom-h1, .dom .dom-h2, .dom .dom-h3 {
  font-family: var(--dom-font-display);
  color: var(--dom-heading);
  line-height: var(--dom-lh-tight);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-wrap: balance;
  margin: 0 0 0.5em;
}
.dom h1, .dom .dom-h1 { font-size: var(--dom-fs-3xl); font-weight: 600; }
.dom h2, .dom .dom-h2 { font-size: var(--dom-fs-2xl); }
.dom h3, .dom .dom-h3 { font-size: var(--dom-fs-xl); }
.dom h1 em, .dom h2 em, .dom h3 em {
  font-style: italic;
  font-weight: 500;
  color: var(--dom-akzent-gross);
}

.dom p { margin: 0 0 1em; text-wrap: pretty; }
.dom a { color: var(--dom-link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.dom a:hover { text-decoration-thickness: 2px; }
.dom :focus-visible { outline: 3px solid var(--dom-terrakotta); outline-offset: 3px; border-radius: 4px; }

/* Kleine Großbuchstaben-Zeile über Überschriften */
.dom-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--dom-font-text);
  font-size: var(--dom-fs-xs);
  font-weight: 700;
  letter-spacing: var(--dom-tracking-caps);
  text-transform: uppercase;
  color: var(--dom-akzent-text);
  margin-bottom: var(--dom-space-3);
}
.dom-eyebrow::before {
  content: "";
  width: 0.7em; height: 0.7em;
  border-radius: 50%;
  background: var(--dom-verlauf-erde);
}

.dom-lead { font-size: var(--dom-fs-l); line-height: 1.55; color: var(--dom-text); }

/* --- Zitat --------------------------------------------------------------- */
.dom-zitat {
  position: relative;
  margin: 0;
  padding: 0;
  font-family: var(--dom-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--dom-fs-xl);
  line-height: 1.35;
  color: var(--dom-espresso);
  text-wrap: balance;
}
.dom-zitat::before {
  content: "\201C";
  display: block;
  font-size: 3.2em;
  line-height: 1;
  height: 0.5em;
  color: var(--dom-terrakotta);
  font-style: normal;
}
.dom-zitat cite, .dom-zitat footer {
  display: block;
  margin-top: var(--dom-space-4);
  font-family: var(--dom-font-text);
  font-style: normal;
  font-size: var(--dom-fs-s);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--dom-text-muted);
}

/* --- Satz-Leiter ("Ich darf …") ------------------------------------------- */
.dom-mantra {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--dom-font-display);
  font-size: var(--dom-fs-xl);
  font-weight: 600;
  line-height: 1.3;
  color: var(--dom-espresso);
}
.dom-mantra li { position: relative; padding: 0.15em 0 0.15em 1.1em; }
.dom-mantra li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 0.45em; height: 0.45em;
  border-radius: 50%;
  background: var(--dom-terrakotta);
}
.dom-mantra li:nth-child(2)::before { background: var(--dom-senf); }
.dom-mantra li:nth-child(3)::before { background: var(--dom-zimt); }

/* --- Schaltflächen ------------------------------------------------------- */
.dom-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.85em 1.5em;
  border-radius: var(--dom-radius-rund);
  border: 2px solid var(--dom-action);
  background: var(--dom-action);
  color: #fff;
  font-family: var(--dom-font-text);
  font-weight: 700;
  font-size: var(--dom-fs-s);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.dom .dom-btn { color: #fff; text-decoration: none; }
.dom-btn:hover { background: var(--dom-action-hover); border-color: var(--dom-action-hover); transform: translateY(-1px); }
.dom .dom-btn--leise { background: transparent; color: var(--dom-espresso); border-color: rgb(59 42 30 / .35); }
.dom .dom-btn--leise:hover { background: rgb(59 42 30 / .06); border-color: var(--dom-espresso); }

/* --- Schlagwort-Pille ---------------------------------------------------- */
.dom-tag {
  display: inline-block;
  padding: 0.4em 0.95em;
  border-radius: var(--dom-radius-rund);
  background: var(--dom-sand);
  border: var(--dom-linie);
  color: var(--dom-espresso);
  font-size: var(--dom-fs-s);
  font-weight: 600;
}

/* --- Karte --------------------------------------------------------------- */
.dom-karte {
  background: #fff;
  border-radius: var(--dom-radius-m);
  border: var(--dom-linie);
  padding: var(--dom-space-5);
}

/* --- Ornament: drei Blätter als Trenner ---------------------------------- */
.dom-trenner {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: var(--dom-space-6) auto;
  border: 0;
}
.dom-trenner::before, .dom-trenner::after, .dom-trenner > span {
  content: "";
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--dom-senf);
}
.dom-trenner > span { background: var(--dom-terrakotta); }
.dom-trenner::after { background: var(--dom-zimt); }

/* --- Dunkle Fläche (Abendpflaume) ---------------------------------------- */
.dom-dunkel {
  background: var(--dom-espresso);
  color: var(--dom-on-dark);
}
.dom-dunkel h1, .dom-dunkel h2, .dom-dunkel h3, .dom-dunkel .dom-zitat, .dom-dunkel .dom-mantra { color: var(--dom-on-dark); }
.dom-dunkel h2 em, .dom-dunkel h3 em, .dom-dunkel .dom-eyebrow { color: var(--dom-accent-on-dark); }
.dom-dunkel a { color: var(--dom-senf); }
.dom-dunkel .dom-zitat cite { color: rgb(250 246 239 / .75); }