/* ═══════════════════════════════════════════════════════════════════════
   nachsendeauftrag-service.de  –  Gemeinsames Stylesheet
   ─────────────────────────────────────────────────────────────────────
   Enthält NUR seitenübergreifende Basis-Styles:
     • Farbsystem (CSS Custom Properties)
     • Global Reset & Body
     • Header + Logo + Tagline
     • Footer
     • Lightbox (Info-Modal)
     • Buttons (primär)
     • Form-Titel (gelber Kopf)
     • Info-Button (ⓘ)
     • Basis-Responsive (Footer, Logo, Inner-Padding)

   Seitenspezifische Styles (Hero, Progress-Bar, Form-Felder, Steps etc.)
   bleiben INLINE in der jeweiligen HTML-Datei. So bleibt jede Seite
   unabhängig – Änderungen an Seite 3 brechen Seite 2 nicht.

   Reihenfolge: Diese Datei wird VOR dem inline-<style> geladen.
   Seitenspezifische Overrides müssen daher dort stehen, nicht hier.
   ═══════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────
   INTER  –  selbst gehostete Variable-Font
   OFL-Lizenz (rsms.me/inter). Alle Gewichte (100–900) in einer Datei.
   Keine Anfrage an fonts.googleapis.com oder fonts.gstatic.com →
   keine User-IP-Übermittlung an Google (LG München I, 20.01.2022).
   ───────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-roman.var.woff2') format('woff2-variations'),
       url('fonts/Inter-roman.var.woff2') format('woff2');
}


/* ─────────────────────────────────────────────────────────────────────
   FARBSYSTEM
   Niemals Farben direkt hardcoden – immer var(--...) verwenden.
   --yellow-mid ist bewusst identisch mit --yellow (historisch gewachsen).
   ───────────────────────────────────────────────────────────────────── */
:root {
  --yellow:        #fde48c;
  --yellow-dark:   #dcc858;
  --yellow-light:  #fffae4;
  --yellow-mid:    #fde48c;
  --yellow-border: #e0c858;
  --dark:          #2d2d2d;
  --mid:           #5a5a5a;
  --light:         #8a8a8a;
  --bg:            #f8f4e0;
  --bg-hero:       #f6f6f4;
  --white:         #ffffff;
  --border:        #e4dcb8;
  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-lg:     18px;
  --shadow-card:   0 4px 32px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
}


/* ─────────────────────────────────────────────────────────────────────
   RESET & BASIS
   ───────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', Arial, sans-serif;
  background: var(--bg);
  color: var(--dark);
  -webkit-font-smoothing: antialiased;
}

.inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Utility-Klasse: verhindert Umbruch innerhalb eines Inline-Chunks.
   Genutzt z. B. um Gesamtsumme-Zeile sauber an einer einzigen
   Stelle (vor der Klammer) brechen zu lassen. */
.nowrap { white-space: nowrap; }


/* ─────────────────────────────────────────────────────────────────────
   HEADER
   Gelber Balken mit Logo links, Tagline rechts.
   (Sticky ist auskommentiert; bei Bedarf in der HTML-Datei aktivieren.)
   ───────────────────────────────────────────────────────────────────── */
.header {
  background: var(--yellow);
  border-bottom: 1.5px solid var(--yellow-border);
  /* position: sticky; top: 0; z-index: 100; */
}

.header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Desktop: Header-Inhalt um 15% reduziert (18 → 15.3px). Mobile bleibt
     unberührt, da die Media-Query (max-width:640px) das Padding überschreibt. */
  padding-top: 15.3px;
  padding-bottom: 15.3px;
}

.logo-link {
  display: block;
  line-height: 0;
  text-decoration: none;
}

.logo-link svg {
  /* Desktop: 46 → 39.1px (−15%). Mobile überschreibt auf 48px. */
  height: 39.1px;
  width: auto;
  max-width: 100%;
  display: block;
  /* Vertikal an der OBER-/UNTERKANTE DES BRIEFUMSCHLAGS zentrieren, nicht
     am gesamten Logo: Der viewBox-Mittelpunkt liegt unter der Umschlag-
     Mitte (der Pfeil-im-Kreis ragt unten über den Umschlag hinaus), daher
     säße der Umschlag ohne Versatz ~3px zu hoch. translateY rückt ihn in
     die Header-Mitte. (Mobile-Wert in der Media-Query.) */
  transform: translateY(3px);
}

.logo-link img {
  height: 58px;
  width: auto;
  display: block;
}

.header-tagline {
  font-family: 'Inter', Arial, sans-serif;
  /* Desktop: 22 → 18.7px (−15%). Mobile blendet die Tagline ohnehin aus. */
  font-size: 18.7px;
  font-weight: 500;
  color: #111111dd;
  letter-spacing: -0.5px;
  text-align: right;
  line-height: 1.4;
}


/* ─────────────────────────────────────────────────────────────────────
   FORM-TITEL  (gelber Kopf der Formular-Karte)
   Wird auf Seite 1 + 2 identisch verwendet. Padding der form-body wird
   je nach Seite überschrieben (inline), weil Formular-Inhalte andere
   Abstände brauchen.
   ───────────────────────────────────────────────────────────────────── */
.form-title {
  background: var(--yellow);
  color: var(--dark);
  padding: 20px 26px 18px;
  border-bottom: 2px solid var(--yellow-border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.form-title-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(0,0,0,0.55);
}

.form-title-heading {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dark);
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

.form-title-heading strong { font-weight: 800; }
.form-title-heading em     { font-weight: 400; font-style: normal; }


/* ─────────────────────────────────────────────────────────────────────
   INFO-BUTTON (ⓘ)
   In Abschnittsüberschriften und Labels. Bei Klick öffnet sich die
   Lightbox. data-title und data-tooltip müssen auf dem Button sitzen.

   ⚠ data-tooltip IMMER mit einfachen Anführungszeichen begrenzen, wenn
     der Inhalt deutsche Anführungszeichen „..." enthält – sonst bricht
     der Browser das Attribut vorzeitig ab.
   ───────────────────────────────────────────────────────────────────── */
.info-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--light);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: color 0.15s;
}
.info-btn:hover { color: var(--dark); }
.info-btn svg { width: 14px; height: 14px; }

.info-tooltip-wrap {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}


/* ─────────────────────────────────────────────────────────────────────
   LIGHTBOX  –  zentriertes Info-Modal
   position: fixed + inset: 0 → überdeckt den gesamten Viewport.
   Muss im HTML direkt vor </body> stehen, außerhalb aller scrollenden
   Container.

   ⚠ Beim Öffnen: document.documentElement.style.overflow = 'hidden'
     (NICHT body!) – Chrome-Bug verschiebt position:fixed-Elemente,
     wenn body overflow:hidden gesetzt bekommt.
   ───────────────────────────────────────────────────────────────────── */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.52);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox-overlay.visible { display: flex; }

.lightbox-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px 26px;
  max-width: 420px;
  width: 100%;
  position: relative;
  box-shadow: 0 12px 48px rgba(0,0,0,0.22);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.lightbox-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 10px;
  padding-right: 24px;
}

.lightbox-card-text {
  font-size: 14.5px;
  color: var(--mid);
  line-height: 1.72;
}
/* Tooltip-Absätze: jeder Absatz wird mit <span class="tt-p"> umschlossen
   und zum Block-Element gemacht. Folge-Absätze bekommen einen kleinen
   Top-Abstand — etwas weniger als eine ganze Leerzeile, analog zum
   Abstand zwischen Titel und Body (margin-bottom: 10px oben). */
.lightbox-card-text .tt-p { display: block; }
.lightbox-card-text .tt-p + .tt-p { margin-top: 5px; }

.lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--light);
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.lightbox-close:hover { color: var(--dark); background: #f0f0ee; }
.lightbox-close svg { width: 15px; height: 15px; }


/* ─────────────────────────────────────────────────────────────────────
   DIVIDER
   ───────────────────────────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1.5px solid #eae4c4;
  margin: 4px 0 18px;
}


/* ─────────────────────────────────────────────────────────────────────
   PRIMÄR-BUTTON  (gelber CTA)
   Seite 1 nutzt einen margin-top:4px-Override inline, weil der Button
   dort direkt nach einem divider kommt.
   ───────────────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--yellow);
  color: var(--dark);
  border: none;
  border-radius: 100px;
  padding: 18px 28px;
  font-size: 18px;
  /* font-weight: 800 → 700 (eine Inter-Stufe weniger fett, auf Wunsch).
     Greift für die „Weiter"-Buttons auf Schritt 1 + 2. Schritt 3 nutzt
     den separaten .btn-absenden („Kostenpflichtig bestellen") und ist
     davon nicht betroffen. */
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 18px rgba(255,218,100,0.45);
  transition: all 0.15s ease;
  letter-spacing: -0.1px;
}
.btn-primary:hover {
  background: #ebc848;
  box-shadow: 0 6px 24px rgba(255,218,100,0.55);
  transform: translateY(-2px);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(255,218,100,0.3);
}


/* ─────────────────────────────────────────────────────────────────────
   FORM-HINT  (kleiner Hinweis unter dem CTA, z. B. „Daten verschlüsselt")
   ───────────────────────────────────────────────────────────────────── */
.form-hint {
  font-size: 14px;
  color: var(--light);
  text-align: center;
  margin-top: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.form-hint svg { flex-shrink: 0; }


/* ─────────────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────────────── */
.footer {
  background: #3a3a3a;
}

.footer .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-copy {
  font-size: 15px;
  color: #aaa;
  font-weight: 500;
}

.footer-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-links a {
  font-size: 15px;
  color: #aaa;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}
.footer-links a:hover { color: var(--yellow); }

/* Footer-Trigger für „Cookie-Einstellungen": <button> sieht wie <a> aus,
   damit der Re-Open-Button visuell in die Link-Reihe passt. CSP-konform
   (kein inline-onclick); Listener in js/consent.js. */
.footer-links button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 15px;
  color: #aaa;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s;
  font-family: 'Inter', Arial, sans-serif;
}
.footer-links button:hover { color: var(--yellow); }


/* ─────────────────────────────────────────────────────────────────────
   RESPONSIVE BASIS  –  Tablet (≤ 900px)
   Footer wird zentriert. Seitenspezifische Anpassungen (Hero, Progress-
   Bar etc.) stehen im jeweiligen Inline-Style.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .footer .inner { justify-content: center; text-align: center; }
  .footer-links  { justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────────────
   RESPONSIVE BASIS  –  Mobil (≤ 640px)
   Header, Logo, Footer-Texte. Alles, was seitenspezifisch ist (Hero,
   Form-Felder etc.), wird im jeweiligen Inline-Style überschrieben.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .inner { padding: 0 16px; }

  .header .inner {
    /* Asymmetrisches Padding (17 oben / 11 unten = Summe 28 = vorherige
       14+14) verschiebt das Logo 3 px tiefer im Header, ohne die Header-
       Höhe zu verändern. Auf Wunsch in der Mobile-Iteration: das Logo
       wirkt etwas „gegroundeter" als perfekt vertikal-zentriert. */
    padding-top: 17px;
    padding-bottom: 11px;
    justify-content: center;
  }
  .logo-link svg { height: 48px; transform: translateY(1px); }
  .header-tagline { display: none; }

  /* Footer auf Mobile: Copy + Link-Reihe gestapelt zentriert. Statt
     Flex-Layout mit harten Zeilenumbrüchen werden die Links als
     inline-Text mit Mittelpunkt-Separatoren ausgegeben (Wiki-Style) —
     der Browser wraps natürlich an Wortgrenzen, das wirkt fluide und
     unabhängig von der Anzahl/Länge der Links. */
  .footer .inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .footer-links {
    display: block;
    text-align: center;
    line-height: 1.8;
  }
  .footer-links > * { display: inline; }
  /* Mittelpunkt-Separator zwischen Items — außer am Zeilen-Ende
     (Items 3 und 5, s. unten) und nach dem letzten Item. */
  .footer-links > *:not(:last-child)::after {
    content: ' · ';
    color: #6f6f6f;
    margin: 0 2px;
  }
  /* Erzwingt Zeilenumbruch → Layout 3+2+3.
     Umbruch NACH Item 3 (Häufige Fragen, <a>): ::after display:block —
     der Block-Pseudo beendet die Inline-Zeile, alles danach beginnt neu.
     Umbruch NACH Item 5 (Cookie-Einstellungen) lässt sich NICHT über
     dessen ::after lösen: <button> rendert ::before/::after im eigenen
     Box-Inneren statt als Folge-Element (Pseudo ist „gefangen"). Daher
     den Umbruch VOR Item 6 (Kontakt, <a>) per ::before erzwingen. */
  .footer-links > *:nth-child(3)::after {
    content: '';
    display: block;
    margin: 0;
  }
  .footer-links > *:nth-child(6)::before {
    content: '';
    display: block;
    width: 100%;
  }
  /* Item 5 (Cookie-Einstellungen) ist Zeilenende von Zeile 2 → kein
     Trenner-Punkt. Der <button> rendert seinen ::after im Inneren, der
     dort sichtbare „ · " soll am Zeilenende weg. */
  .footer-links > *:nth-child(5)::after {
    content: '';
  }
  .footer-links a,
  .footer-links button { font-size: 14px; }
  .footer-copy { font-size: 14px; }
}


/* ─────────────────────────────────────────────────────────────────────
   CONSENT-BANNER (Cookies und Tracking)
   Eingeblendet beim Erstbesuch und bei Re-Open über den Footer-Link.
   Markup wird von js/consent.js erzeugt; Sichtbarkeit über die Klasse
   .consent-banner--visible. Erfüllt EDPB-/DSK-Vorgaben:
     • Accept- und Reject-Button gleichberechtigt (gleiche Größe).
     • Granular: Statistik/Marketing einzeln abwählbar.
     • Notwendig nicht abwählbar (immer aktiv, gechecktes/disabled-Feld).
   ───────────────────────────────────────────────────────────────────── */
.consent-banner {
  display: none;
  position: fixed;
  /* Desktop: kompakte Karte unten LINKS (nicht mehr breit unten zentriert).
     Schmale Breite → quadratisch bis Hochformat. */
  left: 16px; right: auto; bottom: 16px;
  z-index: 1000;
  /* Heller, leicht warmer Grauton — neutral gegenüber dem CTA-Gelb,
     trennt sich spürbar vom weißen Seitenhintergrund. */
  background: #f6f6f4;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  width: 360px;
  max-width: calc(100vw - 32px);
  /* Bei langem Inhalt (Layer 2, Hochformat) im Viewport bleiben + scrollen. */
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  margin: 0;
  color: var(--dark);
}
.consent-banner--visible { display: block; }

.consent-inner {
  padding: 24px 28px 22px;
}

.consent-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.2px;
  margin: 0 0 10px;
  color: var(--dark);
}
.consent-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--mid);
  margin: 0 0 16px;
}
.consent-link {
  color: var(--dark);
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-underline-offset: 3px;
  font-weight: 500;
}
.consent-link:hover { color: var(--mid); }

/* ─── Kategorien ─────────────────────────────────────────────────── */
.consent-cats {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  border-top: 1px solid var(--border);
}
.consent-cat {
  padding: 12px 0 12px;
  border-bottom: 1px solid var(--border);
}
.consent-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--dark);
}
.consent-cat-checkbox {
  width: 18px; height: 18px;
  /* accent-color auf var(--dark) — Checkboxen nutzen im Funnel kein Gelb. */
  accent-color: var(--dark);
  cursor: pointer;
  flex-shrink: 0;
}
.consent-cat-checkbox:disabled { cursor: default; }
.consent-cat-name { line-height: 1.3; }
.consent-cat-locked {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--mid);
  margin-left: 4px;
}
.consent-cat-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--mid);
  margin: 6px 0 0 28px;
}

/* ─── Buttons: gleich groß, gleich prominent (EDPB-Konformität) ──── */
/* Buttons gestapelt (eine pro Zeile) — auf Desktop wie Mobile. */
.consent-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Beide Buttons bewusst optisch gleich (EDPB-/DSK-Vorgabe: keine
   visuelle Bevorzugung von "Alle akzeptieren"). Gefüllt-Blau im
   Material-Stil — abgegrenzt vom CTA-Gelb der Seite, damit das
   Cookie-Banner nicht mit dem Funnel-CTA konkurriert. Schriftstärke
   bewusst normal (kein 700) — das ganze Banner führt nur in der
   Überschrift fette Schrift. */
.consent-btn {
  width: 100%;
  padding: 9px 20px;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
  line-height: 1.2;
  text-align: center;
  background: #0b57c9;
  color: #fff;
  border: 1.5px solid #0b57c9;
}
.consent-btn:hover {
  background: #084199;
  border-color: #084199;
}
/* „Alle akzeptieren" steht oben (wie Mobile). DOM-Reihenfolge bleibt
   reject → accept (Screenreader/Tab gehen nicht steuernd zu accept hin). */
.consent-actions .consent-btn[data-action="accept-all"] { order: -1; }

/* ─── Sekundäre Aktionen: Text-Links (Einstellungen / Zurück) ────── */
.consent-sub-actions {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.consent-link-btn {
  background: none;
  border: none;
  padding: 4px 6px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  /* Gleiche Linkfarbe wie die Buttons darüber/darunter (#0B57C9). */
  color: #0b57c9;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: #0b57c9;
  text-underline-offset: 3px;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.consent-link-btn:hover {
  color: #084199;
  text-decoration-color: #084199;
}
.consent-link-btn:focus-visible {
  outline: 2px solid #0b57c9;
  outline-offset: 3px;
  border-radius: 3px;
}
/* „Einstellungen" (Layer 1) als sekundärer Outline-Button — volle Breite,
   weiß mit blauem Rand/Schrift, gleiche Form wie der Button-Stack darüber.
   „← Zurück" (Layer 2) bleibt bewusst ein Text-Link. */
.consent-sub-actions .consent-link-btn[data-action="open-settings"] {
  width: 100%;
  padding: 9px 20px;
  border-radius: 100px;
  border: 1.5px solid #0b57c9;
  background: #fff;
  color: #0b57c9;
  text-decoration: none;
  text-align: center;
  font-size: 14.5px;
  transition: color 0.15s, border-color 0.15s;
}
.consent-sub-actions .consent-link-btn[data-action="open-settings"]:hover {
  background: #fff;
  color: #084199;
  border-color: #084199;
}

/* ─── Rechtstext-Links (Layer 1) ─────────────────────────────────── */
.consent-legal-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
}
.consent-legal-sep {
  color: var(--mid);
  user-select: none;
}

/* ─── Responsive (Mobile) ────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Auf Mobile dunkler Backdrop hinter dem Banner — fokussiert die
     Aufmerksamkeit auf die Cookie-Entscheidung. Pointer-events:none
     lässt das Banner selbst klickbar bleiben. */
  body.consent-locked::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
    pointer-events: none;
  }
  /* Mobile: zentrierte Modal-Karte (volle Breite minus Rand) statt der
     Desktop-Ecke unten links. Breite/Position der Basis zurücksetzen. */
  .consent-banner {
    left: 8px; right: 8px; width: auto; max-width: none;
    top: 50%; bottom: auto;
    transform: translateY(-50%);
    border-radius: var(--radius-md);
  }
  .consent-inner { padding: 18px 18px 16px; }
  .consent-title { font-size: 17px; }
  .consent-desc { font-size: 13.5px; }
  .consent-cat-desc { font-size: 12.5px; margin-left: 26px; }
  /* Button-Stil (Stapelung, „Alle akzeptieren" oben, „Einstellungen" als
     Outline-Button) kommt jetzt aus den Basis-Styles — hier nur noch die
     etwas kompakteren Mobile-Maße. */
  .consent-btn { padding: 8px 16px; font-size: 14px; }
  .consent-sub-actions .consent-link-btn[data-action="open-settings"] {
    padding: 8px 16px; font-size: 14px;
  }
}