/* ichlesmit - Design-System
   Rosa Fläche, schwarze Tinte, Zensurbalken, Screenshot-Ecken, Sticker.
   Reihenfolge: Schriften, Tokens, Basis, Typo, Layout, Bausteine, Abschnitte, Beitrag, Vorlieben */

/* ---------- Schriften (lokal, OFL) ---------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("../fonts/DMMono-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  /* Rosa aus dem Profilbild, als Skala */
  --rosa-50: #fff5f9;
  --rosa-100: #ffe4ef;
  --rosa-200: #ffcce0;
  --rosa-300: #fbaecd;
  --rosa-400: #f58fba; /* Markenrosa */
  --rosa-500: #ec5f9d;
  --rosa-600: #c92c73; /* Textakzent auf Papier, 4.9:1 */

  --tinte: #1a1118;
  --tinte-weich: #4d3b47;
  --papier: #fffafc;
  --weiss: #fff;
  --halm: #de3348; /* Strohhalm-Rot aus dem Logo */

  --schrift-titel: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --schrift-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --rand: clamp(1.25rem, 5vw, 3rem);
  --breite: 72rem;

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;

  --schatten: 5px 5px 0 var(--tinte);
  --schatten-akzent: var(--rosa-400);

  --aus: cubic-bezier(0.22, 1, 0.36, 1);
  --kopf-hoehe: 4rem;

  --z-kopf: 40;
  --z-schleier: 50;
  --z-menue: 60;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 1.5rem);
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--papier);
  color: var(--tinte);
  font: 400 1.0625rem/1.6 var(--schrift-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  flex: 1;
}

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

a {
  color: inherit;
  text-underline-offset: 3px;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-optical-sizing: auto;
  text-wrap: balance;
}

p,
ul,
ol {
  margin: 0;
}

p {
  text-wrap: pretty;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--tinte);
  outline-offset: 3px;
  border-radius: 6px;
}

.fl-tinte :focus-visible {
  outline-color: var(--rosa-300);
}

::selection {
  background: var(--tinte);
  color: var(--rosa-300);
}

[hidden] {
  display: none !important;
}

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

.sprung {
  position: absolute;
  left: var(--rand);
  top: 0.75rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--tinte);
  color: var(--weiss);
  border-radius: 999px;
  font-weight: 700;
  transform: translateY(-300%);
}
.sprung:focus {
  transform: none;
}

/* ---------- Typo ---------- */
/* Laufweite hängt an der Größe: große Titel eng, Fließtext neutral, Etiketten weit */
.t-riese,
.t-gross,
.t-mittel {
  font-family: var(--schrift-titel);
  font-weight: 700;
}
.t-riese {
  font-size: clamp(2.9rem, 7.2vw, 6.2rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
}
.t-gross {
  font-size: clamp(2.1rem, 5.6vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.t-mittel {
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.t-lead {
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  line-height: 1.42;
  letter-spacing: -0.008em;
}
.etikett {
  font: 400 0.78rem/1.3 var(--schrift-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.weich {
  color: var(--tinte-weich);
}
.mass {
  max-width: 38rem;
}

/* Zensurbalken als Textauszeichnung */
.balken {
  padding: 0.04em 0.28em;
  background: var(--tinte);
  color: var(--weiss);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Wort unter dem Balken: der Balken zieht einmal weg, das Wort bleibt markiert */
.enthuellt {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  background: linear-gradient(transparent 58%, var(--weiss) 58% 92%, transparent 92%);
}
.enthuellt::after {
  content: "";
  position: absolute;
  inset: 0.02em -0.14em;
  background: var(--tinte);
  transform-origin: right center;
  animation: balken-weg 0.65s var(--aus) 0.9s both;
}
@keyframes balken-weg {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* ---------- Layout ---------- */
.huelle {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
}
.abschnitt {
  padding-block: clamp(4rem, 10vw, 7.5rem);
}
.abschnitt--eng {
  padding-block: clamp(3rem, 7vw, 5rem);
}
.stapel > * + * {
  margin-top: var(--abstand, 1.25rem);
}
.zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1rem;
  align-items: center;
}

.fl-rosa {
  background: var(--rosa-400);
  --schatten-akzent: var(--weiss);
}
.fl-hell {
  background: var(--rosa-100);
  --schatten-akzent: var(--rosa-500);
}
.fl-tinte {
  background: var(--tinte);
  color: var(--rosa-200);
  --schatten-akzent: var(--rosa-500);
}

.kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

/* ---------- Kopf ---------- */
/* Durchscheinende Leiste: Inhalt läuft darunter durch */
.kopf {
  position: sticky;
  top: 0;
  z-index: var(--z-kopf);
  background: rgb(245 143 186 / 0.78);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  backdrop-filter: saturate(170%) blur(18px);
}
/* Weiche Kante statt Trennlinie, nur wenn Inhalt darunter liegt */
.kopf::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto;
  height: 14px;
  background: linear-gradient(rgb(26 17 24 / 0.14), transparent);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.kopf[data-gescrollt]::after {
  opacity: 1;
}
.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--kopf-hoehe);
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font: 700 1.4rem/1 var(--schrift-titel);
  letter-spacing: -0.035em;
  text-decoration: none;
}
.marke__auge {
  width: 2rem;
  height: 2rem;
  flex: none;
}

.nav {
  display: none;
  align-items: center;
  gap: 0.25rem;
}
.nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 0.95rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.97rem;
  text-decoration: none;
  transition: background-color 150ms ease, transform 120ms var(--aus);
}
@media (hover: hover) {
  .nav a:hover {
    background: rgb(26 17 24 / 0.1);
  }
}
.nav a:active {
  transform: scale(0.96);
}
.nav a[aria-current="page"] {
  background: var(--tinte);
  color: var(--weiss);
}
.nav__bald {
  padding: 0.15rem 0.4rem;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font: 400 0.62rem/1 var(--schrift-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pfeil {
  width: 0.8em;
  height: 0.8em;
  flex: none;
}

.menue-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 2px solid var(--tinte);
  border-radius: 999px;
  background: var(--weiss);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 100ms var(--aus);
}
.menue-knopf:active {
  transform: scale(0.96);
}
.menue-knopf__striche {
  display: grid;
  gap: 5px;
  width: 1.1rem;
}
.menue-knopf__striche::before,
.menue-knopf__striche::after {
  content: "";
  height: 2.5px;
  border-radius: 2px;
  background: var(--tinte);
  transition: transform 220ms var(--aus);
}
.menue-knopf[aria-expanded="true"] .menue-knopf__striche::before {
  transform: translateY(3.75px) rotate(45deg);
}
.menue-knopf[aria-expanded="true"] .menue-knopf__striche::after {
  transform: translateY(-3.75px) rotate(-45deg);
}

/* Menü wächst aus dem Knopf oben rechts und geht auf demselben Weg zurück */
.schleier {
  position: fixed;
  inset: 0;
  z-index: var(--z-schleier);
  background: rgb(26 17 24 / 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, visibility 0s linear 160ms;
}
.menue {
  position: fixed;
  top: calc(var(--kopf-hoehe) + 0.5rem);
  right: var(--rand);
  left: var(--rand);
  z-index: var(--z-menue);
  padding: 0.75rem;
  border: 2px solid var(--tinte);
  border-radius: 22px;
  background: var(--papier);
  box-shadow: var(--schatten);
  transform-origin: calc(100% - 2.5rem) -1rem;
  transform: scale(0.9);
  opacity: 0;
  visibility: hidden;
  transition: transform 150ms ease-in, opacity 150ms ease-in, visibility 0s linear 150ms;
}
.menue a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0 1rem;
  border-radius: 14px;
  font: 700 1.6rem/1.1 var(--schrift-titel);
  letter-spacing: -0.03em;
  text-decoration: none;
}
.menue a:active,
.menue a[aria-current="page"] {
  background: var(--tinte);
  color: var(--weiss);
}
.menue-offen .menue {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: transform 260ms var(--aus), opacity 200ms ease-out, visibility 0s;
}
.menue-offen .schleier {
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease, visibility 0s;
}

@media (min-width: 48rem) {
  .nav {
    display: flex;
  }
  .menue-knopf,
  .menue,
  .schleier {
    display: none;
  }
}

/* ---------- Knopf ---------- */
/* Rückmeldung sitzt auf dem Druck: der Knopf fährt in seinen Schatten */
.knopf {
  --ks: var(--tinte);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3.25rem;
  padding: 0.7rem 1.45rem;
  border: 2px solid var(--tinte);
  border-radius: 999px;
  background: var(--weiss);
  color: var(--tinte);
  box-shadow: 4px 4px 0 var(--ks);
  font: 700 1rem/1.15 var(--schrift-text);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--aus), box-shadow 160ms var(--aus);
}
.knopf--tinte {
  --ks: var(--schatten-akzent);
  background: var(--tinte);
  color: var(--weiss);
}
.fl-tinte .knopf {
  --ks: var(--rosa-500);
}
.knopf--klein {
  min-height: 2.75rem;
  padding: 0.4rem 1.05rem;
  font-size: 0.93rem;
  box-shadow: 3px 3px 0 var(--ks);
}
@media (hover: hover) {
  .knopf:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--ks);
  }
}
.knopf:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--ks);
  transition-duration: 70ms;
}
.knopf[disabled],
.knopf[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  font-weight: 700;
  text-decoration-thickness: 2px;
}

/* ---------- Chips ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.05rem;
  border: 2px solid var(--tinte);
  border-radius: 999px;
  background: var(--weiss);
  font-weight: 700;
  font-size: 0.93rem;
  text-decoration: none;
  transition: transform 120ms var(--aus), background-color 150ms ease;
}
.chip:active {
  transform: scale(0.96);
}
.chip[aria-current="true"] {
  background: var(--tinte);
  color: var(--weiss);
}

/* ---------- Screenshot-Ecken ---------- */
.schnitt {
  position: relative;
}
.schnitt::after {
  --c: var(--weiss);
  --l: 22px;
  --d: 4px;
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  background:
    linear-gradient(var(--c) 0 0) top left / var(--l) var(--d) no-repeat,
    linear-gradient(var(--c) 0 0) top left / var(--d) var(--l) no-repeat,
    linear-gradient(var(--c) 0 0) top right / var(--l) var(--d) no-repeat,
    linear-gradient(var(--c) 0 0) top right / var(--d) var(--l) no-repeat,
    linear-gradient(var(--c) 0 0) bottom left / var(--l) var(--d) no-repeat,
    linear-gradient(var(--c) 0 0) bottom left / var(--d) var(--l) no-repeat,
    linear-gradient(var(--c) 0 0) bottom right / var(--l) var(--d) no-repeat,
    linear-gradient(var(--c) 0 0) bottom right / var(--d) var(--l) no-repeat;
  filter: drop-shadow(0 0 1.5px rgb(26 17 24 / 0.55));
}

/* ---------- Karte ---------- */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  padding: 0;
  list-style: none;
}
.karte {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 2px solid var(--tinte);
  border-radius: var(--radius-m);
  background: var(--weiss);
  box-shadow: var(--schatten);
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 180ms var(--aus), box-shadow 180ms var(--aus);
}
@media (hover: hover) {
  .karte:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--tinte);
  }
}
.karte:active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--tinte);
  transition-duration: 70ms;
}
.karte__bild {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-bottom: 2px solid var(--tinte);
  background: var(--rosa-300);
}
.karte__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.karte__bild--leer {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0.28) 0 14px, transparent 14px 28px),
    var(--rosa-300);
}
.karte__bild--leer svg {
  width: 42%;
  height: auto;
}
.karte__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.1rem 1.15rem 1.3rem;
}
.karte__titel {
  font: 700 1.38rem/1.12 var(--schrift-titel);
  letter-spacing: -0.022em;
}
.karte__kurz {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  color: var(--tinte-weich);
  font-size: 0.98rem;
  line-height: 1.5;
}
.karte__hinweis {
  align-self: start;
  margin-top: auto;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  background: var(--tinte);
  color: var(--weiss);
  font: 400 0.7rem/1.3 var(--schrift-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.leer {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 2px dashed rgb(26 17 24 / 0.45);
  border-radius: var(--radius-m);
}

/* ---------- Hinweisbox ---------- */
.hinweis {
  display: flex;
  gap: 0.75rem;
  align-items: start;
  padding: 0.95rem 1.1rem;
  border: 2px solid var(--tinte);
  border-radius: var(--radius-s);
  background: var(--weiss);
  font-weight: 700;
  line-height: 1.4;
}
.hinweis svg {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  margin-top: 0.1rem;
}

/* ---------- Sticker ---------- */
/* Position kommt aus CSS, die Bewegung setzt site.js per transform */
.bogen {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 1 / 1;
  border: 2px dashed rgb(26 17 24 / 0.4);
  border-radius: var(--radius-l);
  background: rgb(255 255 255 / 0.2);
}
.bogen--breit {
  aspect-ratio: 16 / 10;
}
.bogen__hinweis {
  position: absolute;
  top: calc(100% + 0.7rem);
  right: 0.25rem;
  left: 0.25rem;
  text-align: right;
  pointer-events: none;
}
.sticker {
  position: absolute;
  z-index: 1;
  font-size: clamp(0.82rem, 4.5cqi, 1.4rem);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.sticker__blatt {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0.62em 1em;
  border-radius: 999px;
  background: var(--weiss);
  color: var(--tinte);
  box-shadow: 0 0 0 0.3em var(--weiss), 0 0.15em 0 0.3em rgb(26 17 24 / 0.16), 0 0.6em 1em 0.1em rgb(26 17 24 / 0.22);
  font: 700 1em/1 var(--schrift-titel);
  letter-spacing: -0.025em;
  white-space: nowrap;
  transform: rotate(calc(var(--dreh, 0deg) + var(--neig, 0deg))) scale(var(--gross, 1));
  transition: transform 260ms var(--aus), box-shadow 260ms var(--aus);
}
.sticker.ist-gegriffen {
  cursor: grabbing;
}
.sticker.ist-gegriffen .sticker__blatt {
  --gross: 1.07;
  box-shadow: 0 0 0 0.3em var(--weiss), 0 0.2em 0 0.3em rgb(26 17 24 / 0.1), 0 1.3em 1.8em 0.2em rgb(26 17 24 / 0.3);
  transition-duration: 140ms;
}

.sticker--tinte .sticker__blatt {
  background: var(--tinte);
  color: var(--weiss);
}
.sticker--rosa .sticker__blatt {
  background: var(--rosa-500);
}
.sticker--zettel .sticker__blatt {
  padding: 0.8em 0.95em;
  border-radius: 0.5em;
  line-height: 1.02;
  text-align: left;
  white-space: normal;
  width: 7.4em;
}
.sticker--auge .sticker__blatt {
  width: 5.2em;
  height: 5.2em;
  padding: 0;
  background: var(--rosa-200);
}
.sticker--auge svg {
  width: 68%;
}
/* Rot-weißer Rand wie der Strohhalm im Logo */
.sticker--halm .sticker__blatt {
  width: 6.4em;
  height: 6.4em;
  padding: 0;
  background:
    radial-gradient(circle, var(--weiss) 0 58%, transparent 59%),
    repeating-conic-gradient(var(--halm) 0 15deg, var(--weiss) 15deg 30deg);
  font-size: 0.82em;
}
.sticker--shot .sticker__blatt {
  padding: 1.5em 1.3em;
  border-radius: 0.7em;
  background: var(--tinte);
  color: var(--weiss);
  font: 400 0.72em/1.25 var(--schrift-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sticker--shot .sticker__blatt::after {
  --l: 0.9em;
  --d: 0.22em;
  content: "";
  position: absolute;
  inset: 0.55em;
  background:
    linear-gradient(#fff 0 0) top left / var(--l) var(--d) no-repeat,
    linear-gradient(#fff 0 0) top left / var(--d) var(--l) no-repeat,
    linear-gradient(#fff 0 0) top right / var(--l) var(--d) no-repeat,
    linear-gradient(#fff 0 0) top right / var(--d) var(--l) no-repeat,
    linear-gradient(#fff 0 0) bottom left / var(--l) var(--d) no-repeat,
    linear-gradient(#fff 0 0) bottom left / var(--d) var(--l) no-repeat,
    linear-gradient(#fff 0 0) bottom right / var(--l) var(--d) no-repeat,
    linear-gradient(#fff 0 0) bottom right / var(--d) var(--l) no-repeat;
}

/* Startplätze auf dem Bogen */
.sticker--1 { left: 5%;  top: 9%;  --dreh: -7deg; }
.sticker--2 { left: 63%; top: 5%;  --dreh: 9deg; }
.sticker--3 { left: 34%; top: 34%; --dreh: 4deg; }
.sticker--4 { left: 4%;  top: 52%; --dreh: -11deg; }
.sticker--5 { left: 52%; top: 62%; --dreh: -4deg; }
.sticker--6 { left: 14%; top: 79%; --dreh: 3deg; }

.bogen--breit .sticker--1 { left: 4%;  top: 12%; }
.bogen--breit .sticker--2 { left: 78%; top: 8%; }
.bogen--breit .sticker--3 { left: 38%; top: 16%; }
.bogen--breit .sticker--4 { left: 8%;  top: 50%; }
.bogen--breit .sticker--5 { left: 60%; top: 52%; }
.bogen--breit .sticker--6 { left: 30%; top: 72%; }

/* ---------- Start: Bühne ---------- */
.buehne {
  padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(4.5rem, 9vw, 7rem);
  overflow: hidden;
}
.buehne__raster {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}
.buehne .bogen {
  width: 100%;
  max-width: 30rem;
}
@media (min-width: 60rem) {
  .buehne__raster {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }
  .buehne .bogen {
    max-width: none;
  }
}
.buehne__text > * + * {
  margin-top: 1.5rem;
}
.buehne__text .t-riese {
  margin-top: 0.9rem;
}
.buehne__text .t-riese span {
  display: block;
}

/* Einmaliger Auftritt beim Laden */
.buehne__text > * {
  animation: auftritt 0.6s var(--aus) both;
}
.buehne__text > :nth-child(2) { animation-delay: 60ms; }
.buehne__text > :nth-child(3) { animation-delay: 120ms; }
.buehne__text > :nth-child(4) { animation-delay: 180ms; }
.buehne .bogen {
  animation: auftritt 0.7s var(--aus) 160ms both;
}
@keyframes auftritt {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

/* ---------- Start: Abschnitte ---------- */
.zwei {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
}
@media (min-width: 56rem) {
  .zwei {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .zwei--kante {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.fakten {
  display: grid;
  gap: 1rem;
  padding: 0;
  list-style: none;
}
.fakt {
  padding: 1.3rem 1.4rem 1.45rem;
  border: 2px solid var(--tinte);
  border-radius: var(--radius-m);
  background: var(--weiss);
  box-shadow: var(--schatten);
}
.fakt p {
  margin-top: 0.45rem;
  color: var(--tinte-weich);
}

.regeln {
  display: grid;
  gap: 0;
  padding: 0;
  list-style: none;
  counter-reset: regel;
}
.regeln li {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
  padding-block: 1.15rem;
  border-top: 2px solid rgb(255 204 224 / 0.28);
  counter-increment: regel;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.38;
  color: var(--weiss);
}
.regeln li::before {
  content: counter(regel, decimal-leading-zero);
  color: var(--rosa-400);
  font: 400 0.85rem/1 var(--schrift-mono);
  letter-spacing: 0.06em;
}
.regeln--hell li {
  border-top-color: rgb(26 17 24 / 0.18);
  color: var(--tinte);
}
.regeln--hell li::before {
  color: var(--rosa-600);
}
.fl-tinte h2 {
  color: var(--rosa-300);
}

.nummer {
  display: inline-block;
  font: 700 clamp(3.2rem, 11vw, 7rem)/0.9 var(--schrift-titel);
  letter-spacing: -0.045em;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
}

.stellen {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  padding: 0;
  list-style: none;
}
.stelle {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  height: 100%;
  padding: 1.25rem 1.35rem 1.4rem;
  border: 2px solid var(--tinte);
  border-radius: var(--radius-m);
  background: var(--weiss);
}
.stelle a {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.stelle__ruf {
  font: 700 1.7rem/1.1 var(--schrift-titel);
  letter-spacing: -0.03em;
}

/* ---------- Seitenkopf (Unterseiten) ---------- */
.seitenkopf {
  padding-block: clamp(2.75rem, 7vw, 5rem) clamp(2.5rem, 6vw, 4rem);
}
.seitenkopf > .huelle > * + * {
  margin-top: 1.1rem;
}

/* ---------- Beitrag ---------- */
.beitrag__kopf {
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4rem);
}
.beitrag__kopf > .huelle > * + * {
  margin-top: 1.15rem;
}
.beitrag__titel {
  max-width: 20ch;
  font-size: clamp(2.1rem, 6.2vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.038em;
}
.beitrag__koerper {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(2.25rem, 6vw, 4rem) clamp(3.5rem, 8vw, 6rem);
}
@media (min-width: 60rem) {
  .beitrag__koerper--mit-bild {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    align-items: start;
  }
  .beitrag__bild {
    position: sticky;
    top: calc(var(--kopf-hoehe) + 1.5rem);
  }
}
.beitrag__bild {
  margin: 0;
  overflow: hidden;
  max-width: 26rem;
  border: 2px solid var(--tinte);
  border-radius: var(--radius-m);
  box-shadow: var(--schatten);
  background: var(--rosa-300);
}
.beitrag__bild img {
  width: 100%;
  height: auto;
}

.prosa {
  max-width: 40rem;
  font-size: 1.125rem;
  line-height: 1.7;
  overflow-wrap: break-word;
}
.prosa > * + * {
  margin-top: 1.15em;
}
.prosa h2 {
  margin-top: 2em;
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -0.022em;
}
.prosa h3 {
  margin-top: 1.7em;
  font-size: 1.32rem;
  line-height: 1.18;
  letter-spacing: -0.015em;
}
.prosa a {
  color: var(--rosa-600);
  font-weight: 700;
  text-decoration-thickness: 2px;
}
.prosa ul,
.prosa ol {
  padding-left: 1.3em;
}
.prosa li + li {
  margin-top: 0.4em;
}
/* Zitate stehen wie im Screenshot: weiß auf Schwarz */
.prosa blockquote {
  margin-inline: 0;
  padding: 1.05rem 1.3rem;
  border-radius: var(--radius-s);
  background: var(--tinte);
  color: var(--weiss);
  font-weight: 700;
  line-height: 1.5;
}
.prosa blockquote > * + * {
  margin-top: 0.7em;
}
.prosa img {
  height: auto;
  border: 2px solid var(--tinte);
  border-radius: var(--radius-m);
  box-shadow: var(--schatten);
}

.quellen {
  max-width: 40rem;
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--tinte);
}
.quellen ol {
  margin-top: 0.8rem;
  padding-left: 1.3em;
}
.quellen li + li {
  margin-top: 0.35rem;
}
.quellen a {
  overflow-wrap: anywhere;
}
.beitrag__aktionen {
  margin-top: 2.25rem;
}

/* Rechtstexte */
.recht {
  max-width: 44rem;
}
.recht h2 {
  margin-top: 2.2em;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.recht h3 {
  margin-top: 1.6em;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.recht > * + * {
  margin-top: 0.9em;
}
.recht ul {
  padding-left: 1.3em;
}
.recht a {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.offen {
  padding: 0.05em 0.35em;
  border-radius: 4px;
  background: #ffe45c;
  font-weight: 700;
}

/* ---------- Fuß ---------- */
.fuss {
  padding-block: clamp(3rem, 7vw, 5rem) 2rem;
  overflow: hidden;
}
.fuss__raster {
  display: grid;
  gap: 2rem;
}
@media (min-width: 48rem) {
  .fuss__raster {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}
.fuss ul {
  display: grid;
  gap: 0.1rem;
  padding: 0;
  list-style: none;
}
.fuss li a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  color: var(--weiss);
  font-weight: 700;
  text-decoration: none;
}
@media (hover: hover) {
  .fuss li a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }
}
.fuss__marke {
  margin-top: clamp(2rem, 6vw, 4rem);
  color: var(--rosa-400);
  font: 700 clamp(4.2rem, 21vw, 17rem)/0.8 var(--schrift-titel);
  letter-spacing: -0.06em;
  white-space: nowrap;
  user-select: none;
}
.fuss__unten {
  margin-top: 1.5rem;
  color: var(--rosa-300);
}

/* ---------- Einblenden beim Scrollen ---------- */
.js .auf {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease-out, transform 0.7s var(--aus);
}
.js .auf.ist-da {
  opacity: 1;
  transform: none;
}

/* ---------- Vorlieben ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
  }
  .enthuellt::after {
    display: none;
  }
  .js .auf {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .menue,
  .menue-offen .menue {
    transform: none;
    transition: opacity 150ms ease, visibility 0s;
  }
  .knopf,
  .karte,
  .chip,
  .sticker__blatt {
    transition-duration: 0.01ms;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .kopf {
    background: var(--rosa-400);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .bogen {
    background: var(--rosa-300);
  }
}

@media (prefers-contrast: more) {
  :root {
    --tinte-weich: var(--tinte);
    --rosa-600: #9c1554;
  }
  .kopf {
    background: var(--rosa-400);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 2px solid var(--tinte);
  }
}

@media print {
  .kopf,
  .menue,
  .schleier,
  .fuss,
  .bogen {
    display: none;
  }
}