/* =========================================================================
   #MakeItReal Wohntraum Challenge 2026 — Prototyp
   Mobile first. Basis-Styles gelten fuer das Handy, Media Queries bauen
   nach oben aus. Reihenfolge der Breakpoints: 600 / 900 / 1280.
   ========================================================================= */

/* ------------------------------------------------------------ Schriften */
@font-face {
  font-family: 'Fuchs';
  src: url('../fonts/Fuchs-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fuchs';
  src: url('../fonts/Fuchs-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Fuchs';
  src: url('../fonts/Fuchs-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fuchs';
  src: url('../fonts/Fuchs-RegularItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Fuchs';
  src: url('../fonts/Fuchs-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fuchs';
  src: url('../fonts/Fuchs-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- Tokens */
:root {
  --gelb: #ffef00;
  --violett: #150a37;
  --violett-tief: #0e0626;
  --magenta: #ce1f81;
  --magenta-hell: #d02082;
  --rot: #e6082e;
  /* Schwaebisch Hall */
  --grau: #e2e8ec;
  /* Rechtsfooter */
  --schwarz: #12121a;

  /* Das Artboard ist 1920 breit und nutzt sie voll aus, deshalb kein 1440er Deckel.
     Der Seitenrand trifft bei 1920px die Layout-Werte (144px) und bleibt mobil schmal. */
  --seite: min(1920px, 100%);
  --luft: clamp(1rem, 8.41vw - 1.1rem, 9rem);
  --block: clamp(2.5rem, 7vw, 5.5rem);
  /* vertikaler Blockabstand */
  --radius: clamp(.9rem, 3vw, 1.5rem);
  --tap: 2.75rem;
  /* 44px Mindest-Trefferflaeche */

  /* Am Desktop-Artboard kalibriert: bei 1920px Viewport treffen die Groessen
     die Layout-Werte 1:1 (Body 30, Lead 35, H2 35, Service 39.9, Small 27.5).
     Die Untergrenzen liegen bewusst UEBER dem Mobile-Artboard — dort waere der
     Fliesstext bei 1080pt/360pt nur rund 12px und damit unlesbar. */
  --t-body: clamp(1.0625rem, .855rem + .85vw, 1.875rem);
  /* 17 -> 30 */
  --t-lead: clamp(1.1875rem, .933rem + 1.05vw, 2.1875rem);
  /* 19 -> 35 */
  --t-h2: clamp(1.375rem, 1.168rem + .85vw, 2.1875rem);
  /* 22 -> 35 */
  --t-h3: clamp(1.3125rem, 1.011rem + 1.24vw, 2.494rem);
  /* 21 -> 39.9, Service */
  --t-small: clamp(.875rem, .66rem + .88vw, 1.719rem);
  /* 14 -> 27.5 */
  --t-marke: clamp(1.25rem, .315rem + 3.84vw, 4.919rem);
  /* 20 -> 78.7, Massstab des Kopf-Lockups */

  --ease: cubic-bezier(.22, 1, .36, 1);
}

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: 'Fuchs', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--gelb);
  background: var(--violett);
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

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

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--magenta);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.wrap {
  width: var(--seite);
  margin-inline: auto;
  padding-inline: var(--luft);
}

/* --------------------------------------------------------------- Header */
/* Nicht sticky: im Layout ist der Balken 167 von 3275pt hoch, als mitlaufende
   Leiste wuerde die Wortmarke in Layout-Groesse zu viel Bildschirm fressen.
   Die Dauerpraesenz uebernimmt der Stoerer unten rechts. */
.kopf {
  background: var(--gelb);
  /* Das Lockup ist niedriger als die frueher gesetzte Wortmarke (56.2 statt
     78.7 bei 1920px). Die Polsterung faengt das auf, damit der gelbe Balken
     genau so hoch bleibt wie bisher: 114px auf Desktop, 36px auf dem Handy. */
  padding: clamp(.678rem, .404rem + 1.168vw, 1.806rem) var(--luft);
  display: flex;
  justify-content: center;
}

.kopf a {
  display: flex;
  align-items: center;
  min-width: 0;
  text-decoration: none;
}

/* Ein Bild, kein Bausatz. Ziegel und Wortmarke stecken zusammen in
   svg/logo-platzhalter.svg, die Proportion ist dort fest eingebacken. Damit
   kann die Wortmarke nicht mehr umbrechen und haengt an keiner Schrift.
   Der Faktor 8.599 bringt das Lockup bei 1920px auf die 676.8 des Artboards.
   max-width laesst es bei starkem Zoom mitschrumpfen statt ueberzulaufen; es
   muss getrennt von width stehen, weil ein min(100%, ...) hier im Kreis
   liefe: der Anker bekommt seine Breite erst vom Bild. */
.kopf__logo {
  display: block;
  height: auto;
  width: calc(var(--t-marke) * 8.599);
  max-width: 100%;
}

/* ----------------------------------------------------------------- Hero */
.hero {
  background: var(--violett) url('../prototype-img/bg-chevron.jpg') center / cover;
  padding: clamp(2rem, 8vw, 4.5rem) var(--luft) clamp(1.5rem, 5vw, 3rem);
  text-align: center;
}

.hero__titel {
  width: min(100%, 60rem);
  margin-inline: auto;
}

.hero__powered {
  font-weight: 300;
  font-size: var(--t-small);
  margin: clamp(.4rem, 1.5vw, .9rem) 0 0;
}

/* ------------------------------------------------- Gelber Einstiegsblock */
/* Die Buehne bildet den gelben Balken ab; Haus und Lockup liegen absolut darin
   und duerfen oben und unten herauslaufen, genau wie im Artboard.
   Alle Prozentwerte sind am Original vermessen, nicht geschaetzt:
   Desktop  Balken y 907..1366 | Haus y 778..1503 x 249..975 | Lockup y 1014..1339 x 126..637
   Mobil    Balken y 643..1050 | Haus y 520..1232 x -106..606 | Lockup y 833..1036 x 479..910 */
.einstieg {
  background: var(--gelb);
  color: #000;
  padding-block: clamp(1.2rem, 4vw, 2rem);
}

.einstieg__inner {
  display: grid;
  gap: clamp(1rem, 4vw, 2.5rem);
  align-items: center;
}

.einstieg__buehne {
  position: relative;
  margin-inline: calc(var(--luft) * -1);
  /* Layout misst ab Seitenkante, nicht ab Textrand */
  aspect-ratio: 1080 / 470;
  /* Balkenhoehe gestapelt */
  --haus-l: -8%;
  --haus-w: 70%;
  --haus-t: -24%;
  --haus-h: 168%;
  --lock-l: 48%;
  --lock-w: 39%;
  --lock-t: 36%;
}

.einstieg__buehne>* {
  position: absolute;
}

.einstieg__haus {
  left: var(--haus-l);
  width: var(--haus-w);
  top: var(--haus-t);
  height: var(--haus-h);
  object-fit: contain;
  object-position: center;
}

/* Box im exakten Seitenverhaeltnis des SVG. Vorher stand das Lockup per
   object-fit mittig in einer zu breiten Box, dadurch entstand Leerraum an den
   Seiten und alles, was daran andockt, sass falsch. */
.einstieg__lockupbox {
  left: var(--lock-l);
  top: var(--lock-t);
  width: var(--lock-w);
  aspect-ratio: var(--lock-ar, 519 / 333);
  z-index: 1;
}

.einstieg__lockup {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Sternchen am Gewinn-Claim, wie im Feinkonzept vorgesehen. Sitzt am rechten
   unteren Ende des Lockups, direkt hinter "gewinnen!". */
.einstieg__stern {
  position: absolute;
  left: 98%;
  top: 60%;
  color: var(--magenta);
  font-weight: 900;
  line-height: 1;
  font-size: clamp(1.1rem, .55rem + 2.1vw, 2.6rem);
  pointer-events: none;
}

/* Fussnote am Fuss des gelben Blocks, wie im Feinkonzept */
.fussnote {
  font-size: clamp(.75rem, .62rem + .35vw, 1rem) !important;
  font-weight: 300;
  line-height: 1.35;
  margin-top: 1.1em !important;
  opacity: .82;
}

.fussnote a {
  text-decoration: underline;
  text-underline-offset: .15em;
}

.einstieg p {
  margin: 0 0 .7em;
  font-size: var(--t-lead);
}

.einstieg p:last-child {
  margin-bottom: 0;
}

.einstieg b,
.einstieg strong {
  font-weight: 900;
}

/* Erst ab grossem Desktop: Buehne links, Text rechts. Frueher umgebrochen
   wurde die Textspalte so schmal, dass die Reihe hoch und die Buehne klein wurde. */
@media (min-width: 1180px) {
  .einstieg__inner {
    grid-template-columns: 1.62fr 1fr;
  }

  .einstieg__buehne {
    margin-inline: 0;
    /* abgestimmte Werte, nicht ueberschreiben ohne Gegenblick aufs Artboard */
    aspect-ratio: 1017 / 540;
    --haus-l: 25%;
    --haus-w: 78%;
    --haus-t: -15.3%;
    --haus-h: 158%;
    --lock-l: 2.7%;
    --lock-w: 58%;
    --lock-t: 14.8%;
  }
}

/* Voting: Herzen, Haus und Daumen als drei Ebenen uebereinander.
   Desktop  Balken y 907..1366 | Haus y 727..1512 x 185..969 | Lockup y 1053..1287 x 72..551
   Mobil    Balken y 642..1282 | Haus y 421..1285 x -232..632 | Lockup y 1056..1245 x 31..417 */
.einstieg__buehne--voting {
  aspect-ratio: 1080 / 640;
  --haus-l: -21.5%;
  --haus-w: 80%;
  --haus-t: -34.5%;
  --haus-h: 135%;
  --lock-l: 2.9%;
  --lock-w: 35.7%;
  --lock-t: 64.7%;
  --lock-ar: 487 / 242;
  --deko-l: 22%;
  --deko-w: 40%;
  --deko-t: 6%;
  --deko-h: 70%;
}

@media (min-width: 1180px) {
  .einstieg__buehne--voting {
    aspect-ratio: 1017 / 459;
    --haus-l: 18.2%;
    --haus-w: 77.1%;
    --haus-t: -39.2%;
    --haus-h: 171%;
    --lock-l: 7.1%;
    --lock-w: 47.1%;
    --lock-t: 31.8%;
    --lock-ar: 487 / 242;
    --deko-l: 49.9%;
    --deko-w: 51.3%;
    --deko-t: -6.3%;
    --deko-h: 117.4%;
  }
}

/* Herzen und Daumen haben ihre eigene Bezugsflaeche, nicht die des Hauses */
.einstieg__deko {
  left: var(--deko-l);
  width: var(--deko-w);
  top: var(--deko-t);
  height: var(--deko-h);
  object-fit: contain;
}

.einstieg__deko--vorn {
  z-index: 2;
}

/* --------------------------------------------------------------- Inhalt */
.inhalt {
  /* kein background-attachment: fixed — auf iOS unzuverlaessig und teuer */
  background: var(--violett) url('../prototype-img/bg-chevron.jpg') center / cover;
  padding-block: var(--block);
}

.inhalt__kopf {
  max-width: 52rem;
}

.inhalt__kopf h2 {
  font-size: var(--t-h2);
  font-weight: 900;
  margin: 0 0 .4em;
  line-height: 1.15;
}

.inhalt__kopf p {
  margin: 0 0 .6em;
  font-weight: 300;
  font-size: var(--t-lead);
}

.inhalt__kopf .u {
  text-decoration: underline;
  text-underline-offset: .18em;
}

.linkbtn {
  text-decoration: underline;
  text-underline-offset: .18em;
  font-weight: 700;
  padding: .15em .2em;
  margin: -.15em -.2em;
}

.linkbtn:hover {
  color: #fff;
}

/* ---------------------------------------------------- Kategorie-Kacheln */
/* Mobile: eine Spalte, Bild gross genug um die Machart zu erkennen.
   Ab 600px zwei, ab 1100px drei Spalten (Desktop-Anmutung 3 + 2). */
.kacheln {
  list-style: none;
  margin: clamp(1.5rem, 5vw, 2.5rem) 0 0;
  margin-bottom: 70px;
  padding: 0;
  display: grid;
  gap: clamp(1.6rem, 5vw, 2.4rem);
}

@media (min-width: 600px) {
  .kacheln {
    grid-template-columns: repeat(4, 3fr);
  }

  .kacheln>li {
    grid-column: span 2;
  }

  .kacheln>li:nth-child(5) {
    grid-column: 2 / span 2;
  }
}

@media (min-width: 1100px) {
  .kacheln {
    grid-template-columns: repeat(6, 1fr);
  }

  .kacheln>li {
    grid-column: span 2;
  }

  .kacheln>li:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .kacheln>li:nth-child(5) {
    grid-column: 4 / span 2;
  }
}

/* Der Rahmen clippt das Bild, das Label liegt darueber und darf ueberstehen.
   container-type erlaubt es, die Labelgroesse an die Kachelbreite zu binden —
   im Layout ist das Label rund 17 Prozent der Kachelbreite hoch. */
.kachel {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  container-type: inline-size;
  transition: transform .35s var(--ease);
}

.kachel__rahmen {
  position: relative;
  display: block;
  border: 3px solid var(--gelb);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  transition: box-shadow .35s var(--ease);
}

.kachel:hover,
.kachel:focus-visible {
  transform: translateY(-4px);
}

.kachel:hover .kachel__rahmen {
  box-shadow: 0 .8rem 2rem rgb(0 0 0 / .45);
}

.kachel__bild {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (min-width: 1100px) {
  .kachel__bild {
    aspect-ratio: 4 / 3;
  }
}

/* Ruhezustand: das Standbild ist leicht zurueckgenommen, die Kachel wartet.
   Beim Ueberfahren kommt es auf volle Deckkraft und das Bewegtbild legt sich
   darueber. Erste Videosekunde und Standbild zeigen dasselbe Motiv, deshalb
   sieht man den Wechsel nicht, nur das Anlaufen der Bewegung. */
.kachel__bild {
  opacity: .72;
  transition: opacity .35s var(--ease);
}

.kachel:hover .kachel__bild,
.kachel:focus-visible .kachel__bild,
.kachel.spielt .kachel__bild {
  opacity: 1;
}

/* Die dritte Regel greift auf dem Handy: dort gibt es kein :hover, die aktive
   Kachel wird ueber die Klasse hell. Am Rechner hellt schon der Zeiger auf,
   bevor das Video geladen ist. */

.kachel__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s var(--ease);
}

/* Erst einblenden, wenn wirklich Bilder kommen. Die Klasse setzt app.js beim
   playing-Ereignis, sonst blitzt der schwarze Rahmen durch. */
.kachel.spielt .kachel__video {
  opacity: 1;
}

/* Ohne Zeiger uebernimmt die laufende Kachel auch das Anheben und den
   Schatten, damit der Wechsel beim Scrollen sichtbar wird. */
@media (hover: none) {
  .kachel.spielt {
    transform: translateY(-4px);
  }

  .kachel.spielt .kachel__rahmen {
    box-shadow: 0 .8rem 2rem rgb(0 0 0 / .45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kachel__video {
    display: none;
  }
}

/* Label sitzt auf der Unterkante, halb ueber dem Bild — wie im Layout */
.kachel__label {
  position: absolute;
  left: 6%;
  bottom: 0;
  height: 17cqw;
  font-size: 17cqw;
  line-height: 1;
  transform: translateY(32%);
  color: var(--gelb);
  filter: drop-shadow(.055em .055em 0 var(--magenta-hell));
  pointer-events: none;
}

.label {
  display: block;
  height: 100%;
  width: auto;
  aspect-ratio: var(--ratio);
  background-color: currentColor;
  -webkit-mask-image: var(--src);
  mask-image: var(--src);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* url() in Custom Properties wird relativ zum Stylesheet aufgeloest,
   deshalb stehen die Masken hier und nicht im style-Attribut. */
.label--pixel {
  --src: url('../prototype-svg/label-pixel.svg');
  --ratio: 2.222;
}

.label--digital {
  --src: url('../prototype-svg/label-digital.svg');
  --ratio: 2.847;
}

.label--craft {
  --src: url('../prototype-svg/label-craft.svg');
  --ratio: 2.667;
}

.label--sketch {
  --src: url('../prototype-svg/label-sketch.svg');
  --ratio: 3.117;
}

.label--wildcard {
  --src: url('../prototype-svg/label-wildcard.svg');
  --ratio: 4.146;
}

.kachel__i {
  position: absolute;
  top: .55rem;
  right: .55rem;
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  color: var(--gelb);
}

.kachel__i::before {
  content: '';
  position: absolute;
  inset: .45rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: rgb(21 10 55 / .55);
  backdrop-filter: blur(2px);
}

.kachel__i span {
  position: relative;
  font-weight: 900;
  font-size: 1rem;
  line-height: 1;
}


.folgen {
  margin: clamp(1.6rem, 5vw, 2.6rem) 0 0;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-size: var(--t-small);
}

.folgen b {
  font-weight: 900;
}

.folgen svg {
  width: 1.6em;
  height: 1.6em;
}

/* Handle und Icon sind ein gemeinsames Ziel, damit nicht nur das kleine
   Instagram-Zeichen die Trefferflaeche stellt. Die senkrechte Polsterung
   bringt den Link auf die 44 Punkte Mindesthoehe. */
.folgen__ziel {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding-block: .35rem;
  min-height: var(--tap);
  text-decoration: none;
}

.folgen__ziel:hover b,
.folgen__ziel:focus-visible b {
  text-decoration: underline;
  text-underline-offset: .18em;
}

.folgen__icon {
  display: inline-flex;
}

/* ------------------------------------------------------ Voting: Kategorien */
/* Mobile: horizontal wischbare Leiste mit Snap. Ab 900px alle fuenf nebeneinander. */
.tabs {
  display: flex;
  gap: .6rem;
  margin: .7rem 0 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: .25rem calc(var(--luft) * -1 + var(--luft)) 1rem;
  margin-inline: calc(var(--luft) * -1);
  padding-inline: var(--luft);
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

@media (min-width: 900px) {
  .tabs {
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    gap: 1rem;
  }
}

.tab {
  position: relative;
  flex: 0 0 min(42vw, 11rem);
  scroll-snap-align: center;
  container-type: inline-size;
  border: 3px solid var(--gelb);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s;
  opacity: .62;
}

.tab img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.tab__label {
  position: absolute;
  z-index: 1;
  left: 6%;
  right: 6%;
  bottom: 3cqw;
  height: 15cqw;
  font-size: 15cqw;
  line-height: 1;
  color: var(--gelb);
  filter: drop-shadow(.05em .05em 0 var(--magenta-hell));
}

.tab__label {
  display: grid;
  place-items: center;
}

.tab__label .label {
  -webkit-mask-position: center;
  mask-position: center;
}

.tab[aria-selected='true'] {
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: 0 0 0 3px var(--violett), 0 0 1.6rem .2rem rgb(255 239 0 / .55);
}

.tab:hover {
  opacity: 1;
}

/* Verlauf unter dem Label, damit die Schrift auf jedem Bild traegt */
.tab::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(transparent, rgb(9 4 24 / .82));
  pointer-events: none;
}

@media (min-width: 900px) {
  .tab {
    flex: 1 1 0;
  }
}

.tabsteuerung {
  display: none;
}

@media (min-width: 900px) {
  .tabsteuerung {
    display: flex;
    gap: .5rem;
  }

  .tabsteuerung button {
    width: var(--tap);
    height: var(--tap);
    border: 2px solid var(--gelb);
    border-radius: 50%;
    display: grid;
    place-items: center;
  }

  .tabsteuerung button:hover {
    background: var(--gelb);
    color: var(--violett);
  }
}

.tabkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(1.2rem, 4vw, 2rem);
}

.tabkopf__hinweis {
  margin: 0;
  font-size: var(--t-small);
  font-weight: 300;
  opacity: .75;
}

@media (min-width: 900px) {
  .tabkopf__hinweis {
    display: none;
  }
}

.gridkopf {
  margin: clamp(.8rem, 3vw, 1.2rem) 0 0;
  font-size: var(--t-small);
  font-weight: 300;
}

.gridkopf b {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.gridkopf__eigene {
  color: var(--magenta-hell);
  font-weight: 700;
}

/* ------------------------------------------------------ Voting: Einreichungen */
/* Mobile: eine Spalte, grosse Karte. Das Bild traegt die Entscheidung,
   Name und Herz sitzen darunter mit voller Trefferflaeche. */
.einreichungen {
  list-style: none;
  margin: clamp(1.2rem, 4vw, 2rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 3.5vw, 1.6rem);
}

@media (min-width: 600px) {
  .einreichungen {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .einreichungen {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .einreichungen {
    grid-template-columns: repeat(5, 1fr);
  }
}

.karte {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--gelb);
  border-radius: var(--radius);
  background: rgb(255 255 255 / .03);
  overflow: hidden;
}

.karte__bild {
  position: relative;
}

.karte__bild img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (min-width: 600px) {
  .karte__bild img {
    aspect-ratio: 1 / 1;
  }
}

.karte__leer {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  color: rgb(255 239 0 / .5);
  font-size: var(--t-small);
  text-align: center;
  padding: 1rem;
}

@media (min-width: 600px) {
  .karte__leer {
    aspect-ratio: 1 / 1;
  }
}

.karte__zoom {
  position: absolute;
  inset: 0;
  width: 100%;
}

.karte__i {
  position: absolute;
  top: .35rem;
  right: .35rem;
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  color: var(--gelb);
}

.karte__i::before {
  content: '';
  position: absolute;
  inset: .5rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: rgb(21 10 55 / .6);
}

.karte__i span {
  position: relative;
  font-weight: 900;
  font-size: .95rem;
}

.karte__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem .8rem;
  min-height: var(--tap);
}

.karte__name {
  font-size: var(--t-small);
  line-height: 1.2;
}

.karte__name b {
  display: block;
  font-weight: 700;
}

.karte__name span {
  font-weight: 300;
  opacity: .8;
}

.herz {
  position: relative;
  flex: 0 0 auto;
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  color: var(--gelb);
}

.herz svg {
  width: 1.75rem;
  height: 1.75rem;
  overflow: visible;
}

.herz path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  transition: fill .25s, stroke .25s;
}

.herz[aria-pressed='true'] {
  color: var(--magenta-hell);
}

.herz[aria-pressed='true'] path {
  fill: currentColor;
  stroke: currentColor;
}

.herz[aria-pressed='true'] svg {
  animation: pop .45s var(--ease);
}

@keyframes pop {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.35);
  }

  100% {
    transform: scale(1);
  }
}

/* aufsteigende Herzchen beim Voten, wie im Layout angedeutet */
.herz__blubber {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.herz__blubber i {
  position: absolute;
  left: 50%;
  bottom: 40%;
  width: .7rem;
  height: .7rem;
  background: var(--magenta-hell);
  opacity: 0;
  clip-path: path('M6 11S1 7.2 1 4.2A2.7 2.7 0 0 1 6 2.6 2.7 2.7 0 0 1 11 4.2C11 7.2 6 11 6 11z');
  animation: steigen 1.1s var(--ease) forwards;
}

.herz__blubber i:nth-child(2) {
  animation-delay: .1s;
}

.herz__blubber i:nth-child(3) {
  animation-delay: .2s;
}

@keyframes steigen {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(.5);
  }

  25% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--x, 0px)), -3.2rem) scale(1.25);
  }
}

.leerlauf {
  padding: clamp(2rem, 8vw, 4rem) 0;
  text-align: center;
  font-weight: 300;
}

/* -------------------------------------------------------------- Service */
/* Im Artboard ist der Fuchs ein angeschnittenes Key Visual, keine kleine
   Illustration: Desktop 63% der Seitenbreite (y 2680..3892 bei Block 2733..3202),
   mobil sogar 126% mit Ueberstand ueber die rechte Kante.
   Das Kuvert misst 22,8% (Desktop) bzw. 35,6% (mobil) der Seitenbreite. */
.service {
  background: var(--gelb);
  color: #000;
  padding-block: clamp(1.6rem, 5vw, 2.6rem);
  overflow: hidden;
  /* schneidet den Fuchs oben und unten an */
}

.service__inner {
  display: grid;
  gap: clamp(1.4rem, 5vw, 2rem);
}

@media (min-width: 800px) {
  .service__inner {
    grid-template-columns: 1fr 1px 1fr;
    align-items: stretch;
  }

  .service__strich {
    background: #000;
    width: 1px;
    justify-self: center;
  }
}

.service__strich {
  display: none;
}

@media (min-width: 800px) {
  .service__strich {
    display: block;
  }
}

.service__karte {
  position: relative;
  display: grid;
  gap: clamp(.8rem, 3vw, 1.4rem);
}

.service__karte>* {
  position: relative;
  z-index: 1;
}

.service__karte h2 {
  font-size: var(--t-h3);
  font-weight: 400;
  margin: 0;
  line-height: 1.2;
}

.service__karte h2 b {
  display: block;
  font-weight: 900;
}

/* Linke Karte: Text mittig ueber dem Kuvert, Button darunter rechts */
.service__karte--mail {
  text-align: center;
}

/* mobil bewusst kleiner als die 92% Breite, die eine gestapelte Spalte ergaebe:
   im Artboard steht das Kuvert neben dem Fuchs und misst dort 35,6% der Seite */
.service__karte--mail .bild {
  width: 62%;
  max-width: 28rem;
  margin-inline: auto;
}

.service__karte--mail .knopf {
  justify-self: center;
}

@media (min-width: 800px) {
  .service__karte--mail .bild {
    width: 100%;
  }

  .service__karte--mail .knopf {
    justify-self: end;
    margin-top: -1.5rem;
  }
}

/* Rechte Karte: Fuchs gross und angeschnitten hinter Text und Button */
.service__karte--fuchs {
  min-height: clamp(14rem, 42vw, 20rem);
}

/* Layout Desktop: PNG-Box x 621..1834 bei rechter Karte 960..1776,
   also left -41,5% und Breite 148,7% der Karte, Oberkante knapp ueber dem Block. */
.service__fuchs {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  right: -34%;
  top: -6%;
  width: 132%;
  max-width: none;
}

.service__karte--fuchs h2 {
  max-width: 58%;
}

.service__karte--fuchs .knopf {
  justify-self: start;
  align-self: end;
}

@media (min-width: 800px) {
  .service__fuchs {
    right: -30%;
    top: -9%;
    width: 149%;
  }

  .service__karte--fuchs h2 {
    max-width: 52%;
  }
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  background: var(--rot);
  color: #fff;
  padding: .5em 1.5em;
  border-radius: 2em;
  font-size: var(--t-body);
  text-decoration: none;
  min-height: var(--tap);
  transition: transform .25s var(--ease), background .25s;
}

.knopf:hover {
  transform: translateY(-2px);
  background: #c40726;
}

/* ------------------------------------------------------------ Rechtsfuss */
.rechtsfuss {
  background: var(--grau);
  color: #1b1b23;
  padding: clamp(.9rem, 3vw, 1.4rem) var(--luft);
  text-align: center;
  font-size: var(--t-small);
  font-weight: 300;
}

.rechtsfuss a {
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* ---------------------------------------------------------- Rechtsseiten */
/* Teilnahmebedingungen und Datenschutz. Bewusst ruhig: heller Grund, eine
   Spalte, begrenzte Zeilenlaenge. Das ist Lesetext, kein Kampagnenraum, und
   er soll nicht mit der Challenge um Aufmerksamkeit ringen. Die Klammer zur
   Kampagne halten Kopf, Fuss und die Magenta-Links. */
.rechtsseite {
  background: #fff;
  color: var(--violett);
  padding: clamp(1.5rem, 5vw, 3.5rem) var(--luft) clamp(3rem, 8vw, 6rem);
}

.rechtsseite__innen {
  max-width: 46rem;
  margin-inline: auto;
}

.rechtsseite__zurueck {
  font-size: var(--t-small);
  margin: 0 0 clamp(1.2rem, 4vw, 2rem);
}

.rechtsseite__zurueck a::before {
  content: '\2190\00a0';
  text-decoration: none;
}

.rechtsseite h1 {
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem);
  line-height: 1.15;
  margin: 0 0 .6em;
  text-wrap: balance;
}

.rechtsseite__unterzeile {
  font-size: var(--t-lead);
  font-weight: 900;
  color: var(--magenta);
  margin: -.4em 0 1.2em;
}

.rechtsseite p,
.rechtsseite li {
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 300;
  overflow-wrap: break-word;
}

/* Der Vorspann steht nach der Grundregel, damit er sie ueberschreibt und
   nicht andersherum. */
.rechtsseite .rechtsseite__vorspann {
  font-size: 1.1875rem;
}

.rechtsseite p {
  margin: 0 0 1em;
}

.rechtsseite b {
  font-weight: 700;
}

.rechtsseite a {
  color: var(--magenta);
  text-decoration: underline;
  text-underline-offset: .15em;
}

.rechtsseite .rechtsseite__zurueck a {
  font-weight: 700;
  text-decoration: none;
}

.rechtsseite .rechtsseite__zurueck a:hover {
  text-decoration: underline;
}

.rechtsseite h2 {
  font-size: clamp(1.0625rem, .98rem + .35vw, 1.3125rem);
  line-height: 1.25;
  margin: 2.2em 0 .7em;
}

.rechtsseite h3 {
  font-size: 1rem;
  margin: 0 0 .5em;
}

/* Roemische Ziffern fuer die Paragrafen, damit der Querverweis auf „Punkt IV"
   in Ziffer III aufgeht. Zaehler statt list-style, weil die Nummer neben der
   Ueberschrift stehen muss und nicht neben dem ersten Absatz. */
.paragrafen {
  list-style: none;
  counter-reset: para;
  margin: 0;
  padding: 0;
}

.paragrafen>li {
  counter-increment: para;
}

.paragrafen>li>h2 {
  margin-top: 2.4em;
}

.paragrafen>li:first-child>h2 {
  margin-top: 1.6em;
}

.paragrafen>li>h2::before {
  content: counter(para, upper-roman) '. ';
  color: var(--magenta);
}

.stufe2 {
  counter-reset: unter;
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
}

.stufe2>li {
  counter-increment: unter;
  position: relative;
  padding-inline-start: 1.9em;
  margin-bottom: .9em;
}

@media (min-width: 700px) {
  .stufe2>li {
    padding-inline-start: 2.4em;
  }
}

.stufe2>li::before {
  content: counter(unter) '.';
  position: absolute;
  inset-inline-start: 0;
  font-weight: 700;
  color: var(--magenta);
}

.stufe2>li>p:last-child {
  margin-bottom: 0;
}

.stufe3 {
  margin: 0 0 1em;
  padding-inline-start: 1.4em;
}

.stufe3>li {
  margin-bottom: .45em;
}

.stufe3--zahl {
  list-style: decimal;
}

/* Verantwortliche Stelle und Datenschutzbeauftragter stehen im Dokument
   nebeneinander, das bleibt hier bis 640px erhalten und stapelt darunter. */
.kontaktblock {
  display: grid;
  gap: 1.2rem clamp(1.5rem, 4vw, 2.5rem);
  margin: 0 0 1.5em;
  padding: clamp(1rem, 3vw, 1.5rem);
  background: var(--grau);
  border-radius: var(--radius);
}

@media (min-width: 640px) {
  .kontaktblock {
    grid-template-columns: 1fr 1fr;
  }
}

.kontaktblock__feld>*:last-child {
  margin-bottom: 0;
}

.rechtsseite__stand {
  margin-top: 2.5em;
  padding-top: 1.2em;
  border-top: 1px solid rgb(21 10 55 / .15);
  font-size: var(--t-small);
}

/* ---------------------------------------------------------------- Modals */
.buehne {
  position: fixed;
  inset: 0 0 2.6rem;
  z-index: 100;
  /* 2.6rem = Prototyp-Leiste */
  display: grid;
  place-items: end center;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
}

.buehne[hidden] {
  display: none;
}

@media (min-width: 700px) {
  .buehne {
    place-items: center;
    padding: 2rem;
  }
}

.buehne__grund {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgb(8 4 22 / .55);
  backdrop-filter: blur(7px) saturate(.9);
  -webkit-backdrop-filter: blur(7px) saturate(.9);
  animation: einblenden .3s var(--ease);
}

@keyframes einblenden {
  from {
    opacity: 0;
  }
}

/* Der Dialog ist sein eigener Bezugsrahmen fuer Schriftgroessen. Beim
   Browser-Zoom schrumpft der Viewport in CSS-Pixeln, waehrend rem-Werte
   gleich bleiben: der Text braucht dann relativ mehr Platz und laeuft aus dem
   Dialog. min() nimmt beim Zoom den an die Dialogbreite gekoppelten Wert,
   max() haelt eine lesbare Untergrenze fuer schmale Handydialoge. */
.modal {
  container-type: inline-size;
  /* cqi faengt schmale Dialoge ab, dvh flache Fenster. Beim Zoom schrumpfen
     beide, deshalb greifen die Werte genau dann, wenn der Platz knapp wird. */
  /* dvh faengt den Zoom ab, denn dabei schrumpft vor allem die nutzbare Hoehe.
     cqi ist bewusst grosszuegig und greift erst bei sehr schmalen Dialogen,
     sonst wuerde es auf dem Handy die Schrift unnoetig klein machen. */
  --m-h2: max(1.05rem, min(var(--t-h2), 7.5cqi, 3.5dvh));
  --m-h3: max(1rem, min(var(--t-h3), 6.6cqi, 3.1dvh));
  --m-lead: max(.95rem, min(var(--t-lead), 5.3cqi, 2.5dvh));
  --m-body: max(1rem, min(var(--t-body), 4.6cqi, 2.3dvh));
  --m-small: max(.8rem, min(var(--t-small), 3.7cqi, 1.9dvh));

  position: relative;
  width: 100%;
  max-height: calc(88dvh - 2.6rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: clamp(1.5rem, 6vw, 2.5rem);
  animation: hochfahren .38s var(--ease);
}

@media (min-width: 700px) {
  .modal {
    max-width: 44rem;
    border-radius: var(--radius);
    animation: aufziehen .3s var(--ease);
  }
}

@keyframes hochfahren {
  from {
    transform: translateY(12%);
    opacity: 0;
  }
}

@keyframes aufziehen {
  from {
    transform: scale(.96);
    opacity: 0;
  }
}

.modal--gelb {
  background: var(--gelb);
  color: #000;
}

.modal--dunkel {
  background: var(--violett) url('../prototype-img/bg-chevron.jpg') center / cover;
  color: var(--gelb);
  border: 2px solid var(--gelb);
  text-align: center;
}

.modal--medien {
  background: var(--violett);
  color: var(--gelb);
  padding: 0;
  overflow: hidden;
}

/* Griff fuer das Bottom-Sheet auf dem Handy */
.modal::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: .25rem;
  border-radius: 2px;
  background: currentColor;
  opacity: .3;
  margin: -.6rem auto 1rem;
}

@media (min-width: 700px) {
  .modal::before {
    display: none;
  }
}

.modal--medien::before {
  display: none;
}

.modal__zu {
  position: absolute;
  top: .5rem;
  right: .5rem;
  z-index: 2;
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: rgb(255 255 255 / .12);
}

.modal--gelb .modal__zu {
  background: rgb(0 0 0 / .05);
}

.modal__zu:hover {
  background: currentColor;
  color: var(--gelb);
}

.modal--gelb .modal__zu:hover {
  color: var(--gelb);
}

.modal__zu svg {
  width: 1.1rem;
  height: 1.1rem;
}

.modal h2 {
  font-size: var(--m-h2);
  font-weight: 900;
  margin: 0 0 .5em;
  line-height: 1.15;
  padding-right: 2.6rem;
}

/* zentrierte Meldungen: Text unter dem Schliessen-Knopf beginnen lassen */
.modal--dunkel h2 {
  padding-right: 0;
  margin-top: 1.8rem;
}

.modal h3 {
  font-size: var(--m-lead);
  font-weight: 900;
  margin: 1.2em 0 .2em;
}

.modal p {
  margin: 0 0 .8em;
  font-size: var(--m-body);
}

.modal p:last-child {
  margin-bottom: 0;
}

.modal .klein {
  font-size: var(--m-small);
}

/* ------------------------------------------------ Einreichungs-Workflow */
.workflow__lead {
  font-weight: 300;
  margin-bottom: 1.4em !important;
}

.workflow__reihe {
  display: grid;
  gap: clamp(.5rem, 2vw, 1rem);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 620px) {
  .workflow__reihe {
    grid-template-columns: repeat(4, 1fr);
  }
}

.wf {
  display: grid;
  justify-items: center;
  gap: .3rem;
  padding: clamp(.6rem, 2vw, 1rem) .4rem;
  border: 3px solid transparent;
  border-radius: var(--radius);
  color: #000;
  text-align: center;
  transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s;
}

.wf:hover {
  transform: translateY(-3px);
}

/* Der Rahmen haengt am Hover, nicht an der Auswahl, damit er mitwandert. */
.wf--aktiv {
  border-color: var(--magenta);
  background: rgb(206 31 129 / .09);
}

/* An der Hoehe ausgerichtet statt an der Breite: das @-Kuvert aus dem Layout
   ist deutlich breiter als die anderen drei Motive und waere sonst zu flach.
   Die Breite bleibt auf die Spalte begrenzt, contain regelt den Rest. */
.wf__icon {
  display: block;
  width: 100%;
  height: clamp(3.4rem, 13vw, 5.2rem);
}

.wf__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wf__nr {
  font-weight: 900;
  font-size: var(--m-small);
  line-height: 1;
  color: var(--magenta);
  letter-spacing: .06em;
}

.wf__name {
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  font-size: max(.82rem, min(clamp(.9rem, .78rem + .5vw, 1.4rem), 4cqi, 2.4dvh));
  letter-spacing: -.01em;
}

/* Fester Textbereich, damit beim Wechseln nichts springt */
.workflow__text {
  margin-top: clamp(1rem, 3vw, 1.6rem);
  padding-top: clamp(.8rem, 2.5vw, 1.2rem);
  border-top: 2px solid rgb(0 0 0 / .25);
  min-height: 7.5em;
}

@media (min-width: 620px) {
  .workflow__text {
    min-height: 6em;
  }
}

/* Ab Tablet bekommt die Box eine feste Hoehe und der Textbereich scrollt in
   sich. Ohne das waechst die Box beim Schritt mit den drei Einreichungswegen
   um rund 30 Pixel, die Icon-Reihe rutscht unter dem Mauszeiger weg, und
   Hover und Verlassen loesen sich gegenseitig endlos aus. */
@media (min-width: 700px) {

  /* Breiter als die uebrigen Dialoge, damit die drei Einreichungswege
     nebeneinander passen und der lange Instagram-Text wenige Zeilen braucht.
     Je breiter die Spalten, desto flacher der Dialog. */
  .modal--workflow {
    max-width: 66rem;
    padding: 1.5rem 2rem 1.3rem;
  }

  /* Bei flachen Fenstern, etwa nach starkem Zoom, passt der laengste Schritt
     nicht mehr in die Hoehe. Dann scrollt nur der Textbereich, damit Ueberschrift
     und Schritt-Reihe stehen bleiben und man die Orientierung behaelt. */
  @media (max-height: 800px) {
    .modal--workflow {
      height: calc(88dvh - 2.6rem);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .modal--workflow>* {
      flex: 0 0 auto;
    }

    .modal--workflow .workflow {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .modal--workflow .workflow__text {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
    }
  }

  .modal--workflow h2 {
    margin-bottom: .3em;
  }

  .modal--workflow .workflow__lead {
    margin-bottom: .7em !important;
  }

  .modal--workflow .wf {
    padding: .35rem .4rem .45rem;
  }

  .modal--workflow .wf__icon {
    height: min(clamp(2.9rem, 9vw, 4.2rem), 6.5dvh);
  }

  .modal--workflow .workflow__text {
    margin-top: .7rem;
    padding-top: .7rem;
  }
}

/* Alle vier Texte liegen im selben Grid-Feld uebereinander. Der Bereich ist
   damit immer so hoch wie der laengste Schritt, unabhaengig von Fensterbreite
   und Schriftladung. visibility statt display, damit die inaktiven Platz
   behalten, aber weder anklickbar noch fuer Screenreader lesbar sind. */
.workflow__text {
  display: grid;
}

.wf-inhalt {
  grid-area: 1 / 1;
  visibility: hidden;
}

.wf-inhalt[data-aktiv] {
  visibility: visible;
}

/* Ab hier passen die drei Wege nebeneinander */
@media (min-width: 820px) {
  .kanaele {
    grid-template-columns: repeat(3, 1fr);
  }

  /* die li sind die Grid-Items, die Hoehe muss an den Link durchgereicht werden */
  .kanaele li {
    display: grid;
  }

  .kanal {
    align-content: start;
  }

  .kanal {
    gap: .3rem .5rem;
    padding: .6rem .8rem .75rem;
  }

  .kanal__text {
    margin-top: .1rem;
  }
}

.workflow__text>p {
  margin-bottom: .6em;
}

.workflow__text b {
  font-weight: 900;
}

/* Die drei Einreichungswege als anklickbare Zeilen mit App-Icon.
   Gestapelt statt nebeneinander, weil der Instagram-Text mit dem
   Pflicht-Wording in einer Drittelspalte nicht lesbar waere. */
.kanaele {
  list-style: none;
  margin: .7em 0 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}

/* Kopfzeile aus Icon, Name und Pfeil, darunter der Text ueber die volle
   Breite. min-width 0 ueberall, sonst zwingt der lange Hashtag die
   Grid-Spalte breiter als die Kachel und der Text laeuft heraus. */
.kanal {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .35rem .6rem;
  padding: .7rem .8rem;
  border: 2px solid rgb(0 0 0 / .28);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  background: rgb(255 255 255 / .28);
  transition: transform .2s var(--ease), background .2s, border-color .2s;
}

.kanal>* {
  min-width: 0;
}

.kanal__text {
  grid-column: 1 / -1;
}

.kanal__text>* {
  min-width: 0;
}

.kanal:hover,
.kanal:focus-visible {
  transform: translateY(-2px);
  background: #fff;
  border-color: #000;
}

.kanal__icon {
  width: 2.1rem;
  display: grid;
  place-items: center;
}

.kanal__icon svg {
  width: 100%;
  height: auto;
}

/* Discord ist eine Flaeche, Instagram und Brief sind Konturen. Optisch angleichen. */
.kanal__icon--discord svg {
  width: 108%;
}

.kanal__icon--brief svg {
  width: 104%;
}

.kanal__text {
  display: grid;
  gap: .1em;
}

.kanal__name {
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: break-word;
}

.kanal__kurz {
  font-size: .82em;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
  opacity: .72;
}

.kanal__kurz em {
  font-style: normal;
  font-weight: 400;
}

.kanal__body {
  font-size: .88em;
  line-height: 1.38;
  margin-top: .3em;
  overflow-wrap: anywhere;
}

/* der Klammerzusatz tritt zurueck, bleibt aber durch die Signalfarbe praesent */
.kanal__body .hinweis {
  display: block;
  margin-top: .5em;
  font-size: .88em;
  font-weight: 700;
  color: var(--magenta);
}

.kanal__body b {
  font-weight: 900;
}

.kanal__pfeil {
  width: 1.1rem;
  opacity: .5;
}

.kanal:hover .kanal__pfeil {
  opacity: 1;
}

@media (max-width: 519px) {
  .kanal__pfeil {
    display: none;
  }
}

/* ------------------------------------------------------------- Stoerer */
/* Loest den Konzept-Punkt "hier noch prominenter als Button" auf. */
/* Mobil eine flache Pille, damit moeglichst wenig Inhalt verdeckt wird;
   ab Tablet der runde Sticker aus dem Kampagnen-Look. */
.stoerer {
  position: fixed;
  z-index: 90;
  right: .8rem;
  bottom: calc(2.6rem + .8rem);
  display: flex;
  align-items: center;
  gap: .32em;
  padding: .7em 1.1em;
  border-radius: 2em;
  rotate: -3deg;
  background: var(--gelb);
  color: #000;
  border: 3px solid var(--magenta);
  box-shadow: 0 .5rem 1.6rem rgb(9 4 22 / .45);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  font-size: .92rem;
  animation: wippen 4s var(--ease) infinite;
}

@media (min-width: 700px) {
  .stoerer {
    right: clamp(1rem, 3vw, 2.4rem);
    bottom: calc(2.6rem + clamp(1rem, 3vw, 2.4rem));
    display: grid;
    place-content: center;
    gap: .08em;
    width: clamp(7rem, 11vw, 9.5rem);
    aspect-ratio: 1;
    padding: 0;
    border-radius: 50%;
    rotate: -8deg;
    font-size: clamp(.95rem, .8rem + .35vw, 1.25rem);
    line-height: 1.05;
  }
}

.stoerer[hidden],
.stoerer[data-weg] {
  display: none;
}

.stoerer:hover {
  rotate: 0deg;
  transform: scale(1.06);
}

.stoerer__zeile2 {
  color: var(--magenta);
}

@keyframes wippen {

  0%,
  88%,
  100% {
    rotate: -8deg;
  }

  92% {
    rotate: -2deg;
  }

  96% {
    rotate: -11deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stoerer {
    animation: none;
  }
}

/* Zoom-Modal einer Einreichung */
/* Bild begrenzen, damit Name und Beschreibung ohne Scrollen sichtbar bleiben */
.medien__bild {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 48dvh;
  object-fit: cover;
  background: #ff00ff;
}

.medien__text {
  padding: clamp(1rem, 4vw, 1.6rem);
}

.medien__text h2 {
  font-size: var(--m-lead);
  margin: 0 0 .3em;
  padding: 0;
}

.medien__text h2 i {
  font-weight: 400;
}

.medien__text p {
  font-weight: 300;
  font-size: var(--m-small);
}

.medien__zaehler {
  margin-top: .8em;
  font-size: var(--t-small);
  opacity: .75;
}

/* Sticky- und Danke-Meldungen */
.meldung {
  display: grid;
  gap: 1rem;
  justify-items: center;
}

.meldung h2 {
  padding: 0;
}

.meldung p {
  font-weight: 300;
}

.meldung__gross {
  font-weight: 900;
  font-size: var(--m-h2);
}

.meldung__gross i {
  font-weight: 300;
}

.meldung img {
  width: min(62%, 15rem);
}

.meldung__twitch {
  display: inline-flex;
  align-items: center;
  gap: .4em;
}

.meldung__twitch svg {
  width: 4.5em;
  height: auto;
}

/* ------------------------------------------------------- Prototyp-Leiste */
.proto {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .72rem;
  background: rgb(10 6 24 / .93);
  color: #cfc7ff;
  border-top: 1px solid rgb(255 255 255 / .16);
  backdrop-filter: blur(10px);
}

.proto__zeile {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .6rem;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}

.proto__zeile::-webkit-scrollbar {
  display: none;
}

@media (min-width: 900px) {
  .proto__zeile {
    flex-wrap: wrap;
    overflow: visible;
  }
}

.proto__titel {
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .66rem;
}

.proto select,
.proto button.proto__opt {
  background: rgb(255 255 255 / .1);
  color: #fff;
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: .4rem;
  padding: .3rem .5rem;
  font: inherit;
}

.proto__spacer {
  flex: 1 1 auto;
}

.proto__note {
  color: #8f86bd;
}

@media (max-width: 899px) {
  .proto__note {
    display: none;
  }
}

.proto__zu {
  color: #fff;
  padding: .2rem .5rem;
}

.proto[data-offen='nein'] .proto__zeile>*:not(.proto__auf) {
  display: none;
}

.proto__auf {
  display: none;
}

.proto[data-offen='nein'] .proto__auf {
  display: block;
}

/* Hinweis, wenn kein JavaScript laeuft */
.kein-js {
  margin: 0;
  padding: .9em var(--luft);
  background: var(--rot);
  color: #fff;
  font-size: var(--t-small);
  font-weight: 700;
  text-align: center;
}

/* --------------------------------------------------------- Phasen-Banner */


.phasen-hinweis {
  background: var(--magenta);
  color: #fff;
  text-align: center;
  padding: .7em var(--luft);
  font-size: var(--t-small);
  font-weight: 700;
  margin-block: 1em;
}

.phasen-hinweis a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 2px;
}

.phasen-hinweis a:hover {
  color: var(--gelb);
}

.leerlauf a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .18em;
}

.meldung a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* El consentimiento debe quedar por encima del cargador y aceptar clics
   aunque algún recurso visual tarde más de lo esperado en cargar. */
.cookie-banner.cookie-banner--visible {
  z-index: 300;
}

.cookie-banner .cookie-btn {
  border: 2px solid var(--magenta);
  color: var(--violett);
  background: transparent;
}

.cookie-banner .cookie-btn--accept,
.cookie-banner .cookie-btn--save {
  color: var(--violett);
  background: var(--magenta);
  border-color: var(--magenta);
}

.cookie-banner .cookie-btn--accept:hover,
.cookie-banner .cookie-btn--save:hover {
  background: var(--magenta-hell);
  border-color: var(--magenta-hell);
}

.cookie-banner .cookie-btn--options:hover,
.cookie-banner .cookie-btn--decline:hover {
  color: var(--violett);
  background: color-mix(in srgb, var(--magenta) 12%, transparent);
  border-color: var(--magenta-hell);
}