/* =========================================================================
   Layout der Event-Micropage.
   Regel: hier steht kein Farbwert, keine Schriftfamilie und kein Radius -
   alles kommt aus tokens.css. Wer die Optik aendern will, aendert Tokens.
   ========================================================================= */

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

/* Das hidden-Attribut muss jede display-Regel schlagen. Ohne !important
   blendet .panel { display:flex } bzw. .tabs { display:flex } das Element
   wieder ein, weil eine Klassenregel den UA-Standard display:none ueberstimmt.
   Genau daran ist die Tab-Umschaltung im ersten Durchlauf gescheitert. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface-base);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Solange die Config nicht geladen ist, bleibt der Inhalt verborgen -
   verhindert, dass Platzhaltertexte kurz aufblitzen. */
body:not([data-ready]) main,
body:not([data-ready]) .site-header__inner { visibility: hidden; }

:where(a) { color: var(--text-link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:where(a):hover { color: var(--brand-accent-hover); }

:where(a, button, [tabindex], iframe, summary):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

img, svg, iframe { display: block; max-width: 100%; }

.shell {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* Sprungmarke fuer Tastatur- und Screenreader-Nutzung (BITV 2.0 / 2.4.1).
   position:fixed statt absolute, damit die Marke auch sichtbar wird, wenn
   jemand aus der Seitenmitte per Shift+Tab zurueckwandert. */
.skip-link {
  position: fixed; inset-inline-start: var(--gutter); top: -4rem;
  z-index: 50; padding: var(--space-1) var(--space-3);
  background: var(--brand-accent); color: var(--text-on-accent);
  font-weight: 600; border-radius: var(--radius-sm); text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--space-1); color: var(--text-on-accent); }

/* ---------- Header ------------------------------------------------------ */

.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--header-bg);
  border-bottom: 1px solid var(--hairline);
  transition: background-color 0.2s ease, backdrop-filter 0.2s ease;
}

/* Optional (theme.headerScroll = "translucent"): sobald die Seite gescrollt
   ist, wird die Kopfzeile leicht durchscheinend und legt eine Unschaerfe
   darunter. Ohne Scroll bleibt sie deckend, damit die Logos sauber stehen.
   color-mix wird von allen aktuellen Browsern unterstuetzt; faellt es aus,
   bleibt schlicht die deckende Farbe stehen - kein Schaden. */
[data-header-scroll="translucent"][data-scrolled="true"] .site-header,
[data-header-scroll="always"] .site-header,
[data-header-inset="on"][data-header-scroll="translucent"][data-scrolled="true"] .site-header__inner,
[data-header-inset="on"][data-header-scroll="always"] .site-header__inner {
  background: color-mix(in srgb,
              var(--header-bg) calc(var(--header-opacity) * 100%), transparent);
  backdrop-filter: blur(var(--header-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--header-blur)) saturate(140%);
}

/* Abgesetzte Kopfzeile: die Leiste sitzt nicht mehr an den Fensterkanten,
   sondern schwebt mit Abstand und runden Ecken. Sinnvoll, sobald die
   Kopfzeile schmaler ist als das Fenster - eine randlose Leiste mit
   runden Ecken saehe sonst abgeschnitten aus. */
[data-header-inset="on"] .site-header {
  background: transparent;
  border-bottom: 0;
  padding-top: var(--header-inset);
}
[data-header-inset="on"] .site-header__inner {
  background: var(--header-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--header-radius);
  padding-inline: var(--space-3);
}
[data-header-inset="on"][data-header-scroll="translucent"][data-scrolled="true"] .site-header,
[data-header-inset="on"][data-header-scroll="always"] .site-header {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* Raster statt Flexbox: so laesst sich die Logogruppe mittig setzen, ohne
   dass sie der Sprachwahl in die Quere kommt. Die Sprachwahl bleibt rechts
   und wandert nur dann nach links, wenn das Logo rechts steht. */
.site-header { color: var(--header-text); }
.site-header .select { color: var(--header-text); }

.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-height);
  max-width: var(--header-max);
  padding-block: var(--space-2);
}

.brand { transform: translateX(var(--brand-offset-x, 0)); }

.brand { display: flex; align-items: center; gap: var(--logo-gap); flex-wrap: wrap; }

/* Alle Logos werden auf dieselbe optische Hoehe gebracht; Breite frei. */
.brand__item { display: inline-flex; align-items: center; }
/* --logo-scale statt --logo-height anpassen: die Hoehe kann per config.json
   als Inline-Style am :root stehen und wuerde eine Media-Query ueberstimmen. */
.brand__item img {
  height: calc(var(--item-height, var(--logo-height)) * var(--logo-scale, 1));
  width: auto;
  object-fit: contain;
}
/* Trennstrich zwischen Veranstalter- und Partnerlogo */
.brand__divider {
  width: 1px; align-self: stretch; margin-block: 6px;
  background: var(--hairline);
}

/* Auf schmalen Geraeten Logos verkleinern statt umbrechen lassen -
   ein umgebrochener Header schiebt den Player unter die Falz. */
@media (max-width: 30rem) {
  .brand { --logo-scale: 0.75; gap: 0.75rem; flex-wrap: nowrap; }
  .brand__divider { display: none; }
  .site-header__inner { gap: var(--space-2); }
}

.header__controls { display: flex; align-items: center; gap: var(--space-2); }

/* Position der Logogruppe in der Kopfzeile.

   grid-row: 1 ist hier nicht Zierde: ohne die Angabe setzt der Browser
   die Elemente in der Reihenfolge des Markups. Soll das Logo (erstes
   Element) in Spalte 3 und die Sprachwahl (zweites) in Spalte 1 stehen,
   ist Spalte 1 in dieser Zeile schon ueberschritten - die Sprachwahl
   rutscht in eine zweite Zeile. Genau das war der Fehler. */
.site-header__inner > .brand,
.site-header__inner > .header__controls { grid-row: 1; align-self: center; }

[data-brand-position="start"] .brand { grid-column: 1; justify-self: start; }
[data-brand-position="start"] .header__controls { grid-column: 3; justify-self: end; }

[data-brand-position="center"] .site-header__inner { grid-template-columns: 1fr auto 1fr; }
[data-brand-position="center"] .brand { grid-column: 2; justify-self: center; }
[data-brand-position="center"] .header__controls { grid-column: 3; justify-self: end; }

[data-brand-position="end"] .brand { grid-column: 3; justify-self: end; }
[data-brand-position="end"] .header__controls { grid-column: 1; justify-self: start; }

/* ---------- Auswahlfelder (Sprache, Fassung) ---------------------------- */

.select {
  display: inline-flex; align-items: center; gap: var(--space-1);
  max-width: 100%; min-width: 0;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-body);
}
.select:hover { border-color: var(--brand-accent); }
.select__icon { flex: none; width: 1rem; height: 1rem; opacity: 0.85; }
.select__label {
  font-size: 0.8125rem; color: var(--text-muted); white-space: nowrap;
}
.select select {
  appearance: none; border: 0; background: transparent;
  min-width: 0; text-overflow: ellipsis;
  color: inherit; font: inherit; font-size: 0.875rem;
  padding-inline-end: 1rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 0.28rem center, right 0.05rem center;
  background-size: 0.3rem 0.3rem;
  background-repeat: no-repeat;
}
.select select:focus { outline: none; }
.select:focus-within { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.select option { background: var(--surface-raised); color: var(--text-strong); }

/* ---------- Titelbereich ------------------------------------------------ */

.intro { padding-block: var(--space-4) var(--space-3); }

/* Das Statusschild zitiert den Code-Kommentar-Kicker von bundescloud.de. */
.kicker {
  display: inline-flex; align-items: center; gap: 0.55em;
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--size-kicker);
  font-weight: 500;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--brand-accent);
}
.kicker[data-status="live"] { color: var(--brand-signal); }
.kicker__dot {
  width: 0.5em; height: 0.5em; border-radius: 50%;
  background: currentColor; flex: none;
}
.kicker[data-status="live"] .kicker__dot { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.intro__title {
  margin: 0;
  white-space: pre-line;      /* Zeilenumbrueche aus dem Editor bleiben */
  font-family: var(--font-display);
  font-size: var(--size-title);
  font-weight: var(--weight-title);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--text-strong);
  text-wrap: balance;
}

.intro__title em { font-style: normal; color: var(--brand-accent); }
/* Die zweite Titelzeile bekommt eigene Schrift, Groesse und Gewicht -
   im Configurator ueber "Zusatz" gesetzt. */
.intro__title small {
  display: block;
  font-family: var(--font-title-sub);
  font-size: var(--size-title-sub);
  font-weight: var(--weight-title-sub);
  letter-spacing: 0;
  color: var(--text-muted);
}

.intro__meta {
  margin: var(--space-2) 0 0;
  font-family: var(--font-meta, var(--font-mono));
  font-size: var(--size-meta, 0.9375rem);
  color: var(--text-meta);
}

.intro__feeds { margin-top: var(--space-3); }

/* ---------- Buehne ------------------------------------------------------ */

.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--stage-gap);
  align-items: start;
}

/* Layout "panel": Player und Q&A nebeneinander, ab 1024px */
/* Ab der Umbruchbreite stehen Player und Panel nebeneinander. Darunter
   greift die Regel nicht, das Grid faellt auf eine Spalte zurueck und das
   Panel rutscht unter den Player - ohne weiteres Zutun. */
@media (min-width: 64rem) {
  .stage[data-layout="panel"],
  .stage[data-layout="playlist"] {
    grid-template-columns: minmax(0, 1fr) var(--panel-width);
    /* Panel exakt so hoch wie der Player. Eine feste Hoehe wuerde je nach
       Seitenverhaeltnis darueber oder darunter herausragen. */
    align-items: stretch;
  }
  .stage[data-layout="panel"] .panel,
  .stage[data-layout="playlist"] .panel { height: auto; }

  /* Panelhoehe unabhaengig vom Player: dann gilt auch nebeneinander die
     eingestellte Hoehe, und der Player kann frei wachsen. */
  .stage[data-panel-match="off"] { align-items: start; }
  .stage[data-panel-match="off"] .panel { height: var(--panel-height); }
}

/* Die Playerflaeche ist der Container fuer die Groessenabfragen. Damit
   richtet sich die Hoehe nach der Breite der Flaeche statt nach der des
   Fensters - das ist der Unterschied, sobald ein Panel daneben steht.

   Wichtig: die Breite sitzt hier und nicht am Rahmen darin. Ein Container
   kann sich nicht selbst gestalten, also muss die Flaeche, die abgefragt
   wird, genau so breit sein wie der Rahmen - sonst antwortet die Abfrage
   auf die falsche Breite. */
.stage__player {
  container-type: inline-size;
  container-name: stage;
  width: var(--stage-width);
  max-width: 100%;
  margin-inline: auto;
}

/* Groesse der Playerflaeche. Welcher Modus gilt, setzt app.js aus
   config.stage.player.sizing als data-sizing. */
/* Die Mindesthoehe gilt in jedem Modus. Zusammen mit einem Seitenverhaeltnis
   ergibt sie max(Mindesthoehe, Verhaeltnis) - genau das, was Player brauchen,
   die eine Liste mit eigener Mindesthoehe neben das Video stellen. */
.frame { min-height: var(--stage-min-height); }
.frame[data-sizing="ratio"]    { aspect-ratio: var(--stage-ratio); }
.frame[data-sizing="fixed"]    { height: var(--stage-height); }
.frame[data-sizing="viewport"] { height: var(--stage-vh); }
.frame[data-sizing="auto"]     { height: var(--stage-height); }
/* "responsive": app.js erzeugt dazu Container-Abfragen aus den
   Haltepunkten der Konfiguration. Ohne Treffer gilt der letzte Eintrag. */
.frame[data-sizing="responsive"] { aspect-ratio: var(--stage-ratio); }

.frame {
  position: relative;
  width: 100%;                /* die Breite steuert .stage__player */
  background: var(--frame-bg);
  border: var(--frame-border) solid var(--frame-border-color);
  border-radius: var(--frame-radius);
  overflow: hidden;
  box-shadow: var(--frame-shadow);
}
.frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Unterhalb der Umbruchbreite steht das Panel unter dem Player und bekommt
   die konfigurierte Hoehe. Daneben richtet es sich exakt nach dem Player
   (siehe align-items: stretch weiter unten). */
.panel {
  display: flex; flex-direction: column;
  height: var(--panel-height);
  background: var(--surface-raised);
  border: var(--panel-border) solid var(--panel-border-color);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  overflow: hidden;
}
.panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-display); font-weight: 600;
  color: var(--text-strong);
}
.panel__title { margin: 0; font: inherit; }
.panel__body { position: relative; flex: 1; min-height: 0; }
.panel__body > iframe { width: 100%; height: 100%; border: 0; }

/* Einwilligungs-Platzhalter, solange Slido nicht geladen ist */
.consent {
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--space-3); height: 100%;
  padding: var(--space-4) var(--space-3);
  text-align: start;
}
.consent p { margin: 0; font-size: 0.9375rem; color: var(--text-muted); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  align-self: start;
  padding: 0.7rem 1.25rem;
  border: 0; border-radius: var(--radius-pill);
  background: var(--brand-accent); color: var(--text-on-accent);
  font: inherit; font-weight: 600; font-size: 0.9375rem;
  cursor: pointer; text-decoration: none;
}
.button:hover { background: var(--brand-accent-hover); color: var(--text-on-accent); }

/* Tab-Umschaltung: auf Mobil immer, auf Desktop nur bei layout="tabs" */
.tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-1); }
.tab {
  flex: 1; padding: 0.6rem 1rem;
  border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  background: transparent; color: var(--text-muted);
  font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer;
}
.tab[aria-selected="true"] {
  background: var(--brand-accent); color: var(--text-on-accent);
  border-color: var(--brand-accent);
}

/* Die Sichtbarkeit der Tab-Leiste steuert app.js (applyTabs), weil sie im
   Markup ausserhalb von .stage liegt und eine CSS-Regel hier nicht greift. */

/* ---------- Programm / Playlist ----------------------------------------- */

.playlist { margin: 0; padding: 0; list-style: none; overflow-y: auto; }
.playlist__item { border-bottom: 1px solid var(--hairline); }
.playlist__button {
  display: grid; gap: 0.15rem; width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0; background: transparent; color: var(--text-body);
  font: inherit; text-align: start; cursor: pointer;
}
.playlist__button:hover { background: var(--surface-sunken); }
.playlist__button[aria-current="true"] {
  background: var(--surface-sunken);
  box-shadow: inset 3px 0 0 var(--brand-accent);
}
.playlist__title { font-weight: 600; color: var(--text-strong); }
.playlist__time { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-muted); }

/* ---------- Support / Hinweiskarte -------------------------------------- */

.card {
  margin-block: var(--space-3);
  padding: var(--space-3);
  background: var(--card-bg);
  border: var(--card-border) solid var(--card-border-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.card__title {
  margin: 0 0 0.35rem;
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  color: var(--card-title);
}
.card p { margin: 0; font-size: 0.9375rem; color: var(--card-text); }

/* ---------- Bloecke unter der Buehne ------------------------------------ */

.blocks {
  display: grid;
  gap: var(--blocks-gap);
  margin-block: var(--stage-gap) var(--space-3);
}

/* Die Karte bringt einen eigenen Aussenabstand mit. Im Blockraster
   zaehlt allein der gap - sonst bleibt bei "Abstand 0" der Kartenrand
   stehen und der eingestellte Wert scheint ohne Wirkung. */
.blocks > .card,
.blocks > .block { margin-block: 0; }

.block { /* erbt die Kartenoptik, siehe .card */ }
.block__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  color: var(--card-title);
}
.block__body > :first-child { margin-top: 0; }
.block__body > :last-child { margin-bottom: 0; }
.block__body { font-size: 0.9375rem; color: var(--card-text); }
.block__body p { margin: 0 0 0.6rem; }
.block__body ul, .block__body ol { margin: 0 0 0.6rem; padding-inline-start: 1.3em; }
.block__body strong { color: var(--card-strong); }

/* Medienblock (Bild oder Video). Ohne Seitenverhaeltnis bestimmt das
   Medium selbst die Hoehe; mit Seitenverhaeltnis steht der Rahmen fest und
   das Medium wird hineingerechnet - "cover" fuellt und schneidet ab,
   "contain" zeigt alles und laesst Raender. */
.block--media {
  padding: 0; background: none; border: 0; box-shadow: none;
  width: 100%; max-width: var(--block-max, 100%);
  margin-inline: auto;
}
.block--media .block__frame {
  overflow: hidden;
  border-radius: var(--card-radius);
  background: var(--frame-bg);
}
.block--media[data-ratio="on"] .block__frame { aspect-ratio: var(--block-ratio); }
.block--media img,
.block--media video {
  display: block; width: 100%; height: 100%;
  object-fit: var(--block-fit, contain);
}
.block--media[data-ratio="off"] img,
.block--media[data-ratio="off"] video { height: auto; }
.block--media figcaption {
  margin-top: 0.4rem; font-size: 0.8125rem; color: var(--text-muted);
}

/* Eingebettete Seite: eigene Hoehe, gleiche Einwilligungssperre wie Slido. */
.block__embed {
  position: relative;
  height: var(--block-height, 420px);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-sunken);
}
.block__embed > iframe { width: 100%; height: 100%; border: 0; }

.downloads { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; }
.downloads a {
  display: flex; align-items: baseline; gap: 0.6em;
  padding: 0.55rem 0;
  border-top: 1px solid var(--hairline);
  text-decoration: none;
}
.downloads li:first-child a { border-top: 0; }
.downloads a:hover .downloads__label { text-decoration: underline; }
.downloads__label { flex: 1; color: var(--text-link); font-weight: 600; }
.downloads__meta { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-muted); }

/* ---------- Footer ------------------------------------------------------ */

/* Abgesetzte Fusszeile - dieselbe Logik wie bei der Kopfzeile. */
[data-footer-inset="on"] .site-footer {
  background: transparent;
  border-top: 0;
  padding-bottom: var(--footer-inset);
}
[data-footer-inset="on"] .site-footer__inner {
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--footer-radius);
  padding: var(--space-2) var(--space-3);
}

.site-footer {
  margin-top: auto;
  padding-block: var(--space-3);
  border-top: 1px solid var(--hairline);
  background: var(--surface-raised);
}
.site-footer__brand {
  display: flex; align-items: center; gap: var(--logo-gap);
  transform: translateX(var(--footer-brand-offset-x, 0));
}
/* Position des Fusszeilenlogos - "center" schiebt es zwischen die Links
   und den Rechtevermerk, "end" ans Ende. */
[data-footer-brand-position="start"] .site-footer__brand { order: 0; }
[data-footer-brand-position="center"] .site-footer__brand { order: 1; margin-inline: auto; }
[data-footer-brand-position="end"] .site-footer__brand { order: 3; }
[data-footer-brand-position="end"] #legalLinks { order: 0; }
.site-footer__brand img {
  height: calc(var(--footer-logo-height, 22px) * var(--logo-scale, 1));
  width: auto; object-fit: contain;
}

.site-footer__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--space-2);
  min-height: var(--footer-height);
  max-width: var(--footer-max);
  font-size: 0.875rem; color: var(--text-muted);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Knopf, der wie ein Fusszeilen-Link aussieht (Datenschutzeinstellungen). */
.link-button {
  padding: 0; border: 0; background: none;
  color: var(--text-link); font: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
}
.link-button:hover { color: var(--brand-accent-hover); }

/* ---------- Einwilligungs-Banner ---------------------------------------- */

/* Anlehnung an den Cookie-Banner auf gl-systemhaus.de. sticky statt fixed:
   klebt beim Scrollen unten, verdeckt am Seitenende aber nicht die Fusszeile. */
.consent-banner {
  position: sticky; bottom: 0; z-index: 10;
  background: var(--surface-raised);
  box-shadow: var(--shadow-banner);
  color: var(--text-strong);
}
.consent-banner__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-2);
}
.consent-banner__text { flex: 1 1 32rem; }
.consent-banner__text p { margin: 0; font-size: 0.875rem; line-height: 1.7; }
.consent-banner__text p + p { margin-top: var(--space-1); }
.consent-banner__text a { color: inherit; }
.consent-banner__title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display); font-weight: 700; font-size: 1.125rem;
}

/* Gleich gross und gleich gut sichtbar: Ablehnen muss so leicht sein wie Zustimmen. */
.consent-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.consent-banner__button {
  min-width: 10rem; padding: var(--space-1) 1.7rem;
  border: 1px solid var(--text-strong); border-radius: var(--radius-banner-button);
  background: transparent; color: var(--text-strong);
  font-family: var(--font-display); font-weight: 500; font-size: var(--size-body);
  text-transform: uppercase; cursor: pointer;
}
.consent-banner__button:hover { background: var(--hairline); }
/* Dunkle Schrift statt weiss wie auf der Website: Weiss auf Orange erreicht kein WCAG AA. */
.consent-banner__button--accept {
  border-color: var(--brand-accent);
  background: var(--brand-accent); color: var(--text-on-accent);
}
.consent-banner__button--accept:hover {
  border-color: var(--brand-accent-hover);
  background: var(--brand-accent-hover);
}

@media (max-width: 30rem) {
  .consent-banner__actions { flex-direction: column; width: 100%; }
}

/* ---------- Rechtsseiten (Impressum, Datenschutz) ----------------------- */

.back-link { font-size: 0.875rem; white-space: nowrap; }

.prose {
  padding-block: var(--space-4) var(--space-5);
  max-width: 68ch;               /* Lesbarkeit geht hier vor Bildschirmbreite */
  margin-inline: auto;
}
.prose h1 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--size-title);
  font-weight: var(--weight-title);
  line-height: 1.15;
  color: var(--text-strong);
}
.prose h2 {
  margin: var(--space-4) 0 var(--space-1);
  font-family: var(--font-display);
  font-size: 1.125rem; font-weight: 600;
  color: var(--text-strong);
}
.prose p { margin: 0 0 var(--space-2); }
/* Lange URLs in Rechtstexten duerfen umbrechen, sonst scrollt die Seite auf dem Handy quer. */
.prose a { overflow-wrap: anywhere; }

/* Hinweis, dass der Text eine Vorlage ist - faellt beim Befuellen auf und
   wird beim Anpassen mitgeloescht. */
.prose__note {
  padding: var(--space-2) var(--space-3);
  border-inline-start: 3px solid var(--brand-accent);
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  color: var(--text-muted);
}


/* ---------- Ziehgriffe fuer die Vorschau im Configurator ---------------

   Nur aktiv, wenn die Seite im Configurator eingebettet ist
   (html[data-editing="on"]). In der ausgelieferten Seite existieren diese
   Elemente nicht - sie werden erst zur Laufzeit erzeugt. */

.grip {
  position: absolute; z-index: 5;
  background: transparent;
  border: 0; padding: 0;
  transition: background-color .12s ease;
}
.grip::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--brand-accent); opacity: 0; border-radius: 99px;
  transition: opacity .12s ease;
}
.grip:hover::after, .grip[data-active="true"]::after { opacity: .9; }

.grip--e { top: 0; bottom: 0; inset-inline-end: -5px; width: 12px; cursor: ew-resize; }
.grip--e::after { width: 4px; height: 44px; }
.grip--w { top: 0; bottom: 0; inset-inline-start: -5px; width: 12px; cursor: ew-resize; }
.grip--w::after { width: 4px; height: 44px; }
.grip--s { inset-inline: 0; bottom: -5px; height: 12px; cursor: ns-resize; }
.grip--s::after { height: 4px; width: 44px; }

/* Waehrend des Ziehens soll der Mauszeiger nicht im iframe haengenbleiben. */
[data-resizing="true"] iframe { pointer-events: none; }
[data-resizing="true"] { user-select: none; }

.grip__value {
  position: absolute; inset-inline-end: 8px; bottom: 8px;
  padding: 2px 7px; border-radius: 99px;
  background: var(--brand-accent); color: var(--text-on-accent);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  pointer-events: none;
}


/* ---------- Fehlende Bilder in der Vorschau -----------------------------

   Ein Logo, dessen Datei fehlt, wuerde sonst einfach verschwinden. In der
   Vorschau des Configurators soll stattdessen auffallen, welcher Pfad ins
   Leere zeigt. In der ausgelieferten Seite passiert nichts davon. */

[data-editing="on"] img[data-missing="true"] {
  min-width: 120px; min-height: var(--logo-height);
  padding: 4px 8px;
  border: 1px dashed var(--brand-signal);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--brand-signal) 12%, transparent);
  color: var(--brand-signal);
  font-family: var(--font-mono); font-size: 11px;
}