/* ==========================================================================
   utilities.css — DA-Studio-Media-Service
   Selbstgeschriebene Utilities (Kap. 6). Greifen ausschliesslich auf Tokens
   aus tokens.css zu; keine arbitrary values, keine Roh-Farbwerte.
   Kein globaler Reset — Browser-Defaults auf Prosa-Elementen bleiben stehen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Basis
   -------------------------------------------------------------------------- */

html {
  /* Die Rinne bleibt reserviert, damit das Sperren des Scrollens beim Oeffnen
     des Menues die Seite nicht um die Scrollbar-Breite verschiebt. */
  scrollbar-gutter: stable;
  box-sizing: border-box;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  background: var(--color-surface);
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* `color` wird als *berechneter* Wert geerbt: Ein `data-theme` an einem Element
   dreht nur die Custom Properties — die Textfarbe, die der Vorfahr schon
   berechnet hat, bleibt stehen. Ohne diese Regel behaelt ein hell gethemter
   Abschnitt auf einer dunklen Seite den hellen Text und ist unlesbar. Genau das
   war auf `/hochzeiten` (aperture), `/unternehmen/imagevideos` (steps,
   text-section) und `/unternehmen/leistungen` (benefits) der Fall; `.statement`
   war nur deshalb in Ordnung, weil es `color` selbst deklariert.

   Steht bewusst hier und nicht in components.css: utilities.css laedt vorher,
   damit jede Komponente die Farbe weiter ueberschreiben kann. */
[data-theme] {
  color: var(--color-text);
}

img,
picture,
video,
svg {
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* Textlinks persistent unterstrichen (Kap. 9, WCAG 1.4.1) */

/* Der Farbwechsel im Hover laeuft weich (Kundenwunsch 07.08.2026: „grundsaetzlich
   alle Links"). Die Regel steht hier an der **Wurzel** und nicht je Komponente:
   damit tragen sie auch die Links, die keine eigene Klasse haben — der Fuss, die
   Prosa-Seiten, die Rechtstexte, die Sitemap.

   Komponenten, die ein eigenes `transition` deklarieren, ueberschreiben diese
   Zeile (Kurzschreibweise schreibt die ganze Liste). Geprueft ist deshalb, dass
   jede von ihnen `color` selbst mitfuehrt: `.btn`, `.gate__cta`, `.pill`,
   `.gate__legal a`, `.mainmenu__meta a`, `[data-layout="v02"] .duo__cta` — und
   seit heute auch `.mainmenu__button` und `.js .mainmenu__item`.

   Kein `all`: das wuerde auch `transform`, `opacity` und `background` einfangen
   und den Komponenten ins Handwerk pfuschen. */
a {
  color: var(--color-brand);
  text-decoration: underline;
  text-decoration-thickness: var(--border-hair);
  text-underline-offset: 0.15em;
  transition: color 0.3s ease;
}

a:hover,
a:focus-visible {
  color: var(--color-text);
}

:focus-visible {
  outline: var(--border-thick) solid var(--color-focus);
  outline-offset: var(--radius-s);
  border-radius: var(--radius-s);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Mindestgroesse interaktiver Controls — dichteunabhaengig (Kap. 5a) */
a[class*="btn"],
button,
summary,
input:not([type="hidden"]),
select,
textarea {
  min-height: var(--s-11);
}

textarea {
  min-height: var(--s-32);
}

/* Ausnahme: privacyControl (CMP). Der Dialog ist Fremdmarkup vom Firmen-CDN
   und bringt seine eigenen Groessen mit; unsere 44px wuerden seine Schalter
   und Eingaben auseinanderziehen. Zwei Faelle: das Element traegt die
   CMP-Klasse selbst (gleiche Spezifitaet wie oben — diese Regel steht
   deshalb danach), oder es liegt im CMP-Teilbaum.
   Wird die CMP aktualisiert, sind die beiden Praefixe hier zu pruefen. */
:is(a, button, summary, input, select, textarea):is([class*="privacy-control"], [class*="safe-surfer"]),
:is([id^="privacy-control"], [class*="privacy-control"], [class*="safe-surfer"])
  :is(a, button, summary, input, select, textarea) {
  min-height: 0;
}

hr {
  border: 0;
  border-top: var(--border-hair) solid var(--color-line);
}

::selection {
  background: var(--color-brand);
  color: var(--color-text-invert);
}

/* --------------------------------------------------------------------------
   2 · Barrierefreiheits-Helfer
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: var(--border-hair);
  height: var(--border-hair);
  margin: calc(var(--border-hair) * -1);
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3 · Anzeige & Position
   -------------------------------------------------------------------------- */

.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }

.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-none { flex: none; }
.flex-fill { flex: 1 1 auto; min-width: 0; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.self-end { align-self: flex-end; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { inset: 0; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }

.z-base { z-index: 1; }
.z-raised { z-index: 10; }
.z-overlay { z-index: 40; }
.z-chrome { z-index: 60; }

.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.list-none { list-style: none; margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   4 · Container & Textbreiten
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
}

.measure { max-width: var(--measure); }
.measure-narrow { max-width: var(--measure-narrow); }
.measure-wide { max-width: var(--measure-wide); }
.measure-center { margin-inline: auto; }

/* --------------------------------------------------------------------------
   5 · Abstand
   -------------------------------------------------------------------------- */

.p-comp { padding: var(--space-comp); }
.p-block { padding: var(--space-block); }
.p-group { padding: var(--space-group); }

.px-gutter { padding-inline: var(--space-gutter); }
.py-section { padding-block: var(--space-section); }
.py-group { padding-block: var(--space-group); }
.py-block { padding-block: var(--space-block); }
.pt-hero { padding-top: var(--space-hero); }
.pt-header { padding-top: var(--header-h); }
.pb-section { padding-bottom: var(--space-section); }
.pb-group { padding-bottom: var(--space-group); }
.pt-section { padding-top: var(--space-section); }
.pt-group { padding-top: var(--space-group); }
.pt-block { padding-top: var(--space-block); }

.m-0 { margin: 0; }
.mt-tight { margin-top: var(--space-tight); }
.mt-comp { margin-top: var(--space-comp); }
.mt-block { margin-top: var(--space-block); }
.mt-group { margin-top: var(--space-group); }
.mt-section { margin-top: var(--space-section); }
.mb-tight { margin-bottom: var(--space-tight); }
.mb-comp { margin-bottom: var(--space-comp); }
.mb-block { margin-bottom: var(--space-block); }
.mb-group { margin-bottom: var(--space-group); }

.gap-inline { gap: var(--space-inline); }
.gap-tight { gap: var(--space-tight); }
.gap-comp { gap: var(--space-comp); }
.gap-block { gap: var(--space-block); }
.gap-group { gap: var(--space-group); }

/* --------------------------------------------------------------------------
   6 · Typografie
   -------------------------------------------------------------------------- */

.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-display { font-size: var(--text-display); }
.text-display-lg { font-size: var(--text-display-lg); }

/* Reflow-Bedingung: ab --text-xl verbindlich (Kap. 5b) */
.text-xl,
.text-2xl,
.text-3xl,
.text-display,
.text-display-lg {
  hyphens: auto;
  overflow-wrap: break-word;
}

.font-regular { font-weight: var(--weight-regular); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }
.font-extrabold { font-weight: var(--weight-extrabold); }
.font-black { font-weight: var(--weight-black); }

.font-script { font-family: var(--font-script); }

.leading-tight { line-height: var(--leading-tight); }
.leading-snug { line-height: var(--leading-snug); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }

.tracking-display { letter-spacing: var(--tracking-display); }
.tracking-tight { letter-spacing: var(--tracking-tight); }
.tracking-wide { letter-spacing: var(--tracking-wide); }
.tracking-wider { letter-spacing: var(--tracking-wider); }
.tracking-widest { letter-spacing: var(--tracking-widest); }

.uppercase { text-transform: uppercase; }
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
.no-underline { text-decoration: none; }

/* --------------------------------------------------------------------------
   7 · Farbrollen
   -------------------------------------------------------------------------- */

.text-default { color: var(--color-text); }
.text-muted { color: var(--color-text-muted); }
.text-brand { color: var(--color-brand); }
.text-eyebrow { color: var(--color-eyebrow); }
.text-invert { color: var(--color-text-invert); }

.bg-surface { background: var(--color-surface); }
.bg-surface-alt { background: var(--color-surface-alt); }
.bg-sunken { background: var(--color-surface-sunken); }

.border-top { border-top: var(--border-hair) solid var(--color-line); }
.border-bottom { border-bottom: var(--border-hair) solid var(--color-line); }

/* --------------------------------------------------------------------------
   8 · Medien
   -------------------------------------------------------------------------- */

.img-fluid {
  display: block;
  width: 100%;
  height: auto;
}

.img-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   9 · Sichtbarkeit je Viewport (harter Nav-Umbruch, Kap. 7)
   -------------------------------------------------------------------------- */

.desktop-only,
.desktop-only-flex { display: none; }

@media (min-width: 1025px) {
  .desktop-only { display: block; }
  .desktop-only-flex { display: flex; }
  .mobile-only { display: none; }
}