@font-face { font-family: "Rubik"; font-weight: 400; font-display: swap; src: url("/fonts/rubik-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Rubik"; font-weight: 600; font-display: swap; src: url("/fonts/rubik-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Rubik"; font-weight: 800; font-display: swap; src: url("/fonts/rubik-latin-800-normal.woff2") format("woff2"); }

/* CI des Redesigns: Anthrazitgrau und Elfenbeinweiß. Die dritte Stufe ist der hellere
   Streifen des Zebramusters und trägt nur Flächen, nie Text. */
:root {
  --anthrazit: #0f1721;
  --streifen: #222a35;
  --elfenbein: #fafaf2;
  --helligkeit: 1;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--anthrazit);
  color: var(--elfenbein);
  font-family: "Rubik", system-ui, sans-serif;
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
}

.buehne-flaeche {
  position: relative;
  overflow: hidden;
  background: var(--anthrazit);
}

.folie {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.folie img {
  display: block;
  filter: brightness(var(--helligkeit));
}

/* Auch die Titelfolie wird nie beschnitten: Hochformat-Handys würden sonst das Logo verlieren. */
/* Absolut positioniert statt als Grid-Kind: in einer zentrierten Grid-Zelle hat das Bild
   keine feste Höhe, und hohe Bilder liefen im Querformat unten aus der Fläche. */
.folie.titel img,
.folie.bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Auf Beamer-Formaten (4:3 bis 16:9) füllt das Titelbild die Fläche; das Logo liegt mittig
   und bleibt ganz. Breiter oder hochkant wird nicht beschnitten. */
@media (min-aspect-ratio: 4/3) and (max-aspect-ratio: 16/9) {
  .folie.titel img { object-fit: cover; }
}

.folie.bild img {
  inset: 2.5%;
  width: 95%;
  height: 95%;
}

.folie.kapitel {
  place-items: center start;
  padding: 0 6%;
}

.folie.kapitel h1 {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.01em;
}

.folie.kapitel h1 span { display: inline-block; white-space: nowrap; }

.versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

button {
  font: inherit;
  color: var(--elfenbein);
  background: var(--streifen);
  border: 2px solid transparent;
  border-radius: 12px;
  min-height: 56px;
  padding: 0 18px;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

button:focus-visible { outline: 3px solid var(--elfenbein); outline-offset: 3px; }
button:disabled { opacity: 0.35; cursor: default; }