/* =========================================================================
   #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'),
       url('../fonts/Fuchs-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

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

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

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

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

@font-face {
  font-family: 'Fuchs';
  src: url('../fonts/Fuchs-Black.woff2') format('woff2'),
       url('../fonts/Fuchs-Black.ttf') format('truetype');
  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) 0 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: 24px;
}

.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: 1fr 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-top: var(--block);
  padding-bottom: calc(2.6rem + 2.8rem);
}

.inhalt__kopf {
  max-width: 100%;
}

.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;
}

/* Kreis-Badge "KI-GENERIERT": klappt bei Rollover/Fokus auf, am Handy per Tap (.is-open) */
.ki-label {
  margin: 0;
}

.ki-label__toggle {
  display: inline-flex;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  overflow: hidden;
  cursor: pointer;
  transition: width .35s ease;
}

.ki-label__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
}

.ki-label__text {
  flex: 0 0 auto;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  font-size: clamp(.75rem, .65rem + .4vw, 1.0625rem);
  font-weight: 700;
  color: var(--violett);
  transition: max-width .35s ease, opacity .25s ease, padding .35s ease;
}

.ki-label__toggle.is-open {
  width: auto;
}

.ki-label__toggle.is-open .ki-label__text {
  max-width: 28rem;
  opacity: 1;
  padding: 0 1.1em 0 .6em;
  transition: max-width .35s ease, opacity .25s ease .1s, padding .35s ease;
}

/* Rollover nur bei echten Zeigegeraeten: auf Touch bleibt sonst der :hover haengen */
@media (hover: hover) and (pointer: fine) {
  .ki-label__toggle:hover {
    width: auto;
  }

  .ki-label__toggle:hover .ki-label__text {
    max-width: 28rem;
    opacity: 1;
    padding: 0 1.1em 0 .6em;
    transition: max-width .35s ease, opacity .25s ease .1s, padding .35s ease;
  }
}

.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__label {
  filter: drop-shadow(.055em .055em 0 var(--magenta-hell));
}

.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);

  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, 0);
  overflow: hidden;
  /* schneidet den Fuchs oben und unten an */
}

.service__inner {
  padding-top: 16px;
  display: grid;
  gap: clamp(1.4rem, 5vw, 2rem);
}

@media (min-width: 800px) {}

/* Auf dem Handy eine waagrechte Linie zwischen den beiden Karten, wie im Layout */
.service__strich {
  display: block;
  width: 100%;
  height: 1px;
  background: #000;
}

.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;
  }

  .service__inner {
    padding-top: 0;
    grid-template-columns: 1fr 1px 1fr;
    align-items: stretch;
  }

  .service__strich {
    width: 1px;
    height: 100%;
    justify-self: center;
  }
}

/* Rechte Karte: Fuchs gross und angeschnitten hinter Text und Button */
/* Auf dem Handy steht der Text mittig ueber dem Bild und der Knopf mittig
   darauf, statt seitlich versetzt wie in der Desktop-Bleed-Variante.
   align-content schiebt Ueberschrift und Knopf auseinander, damit der Fuchs
   dazwischen Platz hat und der Kopf nicht unter dem Text verschwindet. */
.service__karte--fuchs {
  min-height: clamp(20rem, 62vw, 26rem);
  align-content: space-between;
  text-align: center;
}

/* 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.
   Zwei Bilder statt eines: das Handy zeigt einen eigenen Freisteller ueber die
   volle Kartenbreite, Desktop den angeschnittenen Bleed-Fuchs. */
.service__fuchs {
  display: none;
}

.service__fuchs_mob {
  position: relative;
  order: 1;
  z-index: 0;
  pointer-events: none;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 60%;
  max-width: none;
}

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

.service__karte--fuchs .knopf {
  white-space: nowrap;
  justify-self: center;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  align-self: end;
  z-index: 2;
}

.service__karte--fuchs .knopf:hover {
  transform: translate(-50%, -2px);
  background: #c40726;
}

@media (min-width: 800px) {
  .service__karte--fuchs .knopf {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
  }

  .service__karte--fuchs {
    min-height: clamp(14rem, 42vw, 20rem);
    align-content: normal;
    text-align: left;
  }

  .service__fuchs {
    display: block;
    position: absolute;
    z-index: 0;
    pointer-events: none;
    right: -30%;
    top: -9%;
    width: 149%;
    max-width: none;
  }

  .service__fuchs_mob {
    display: none;
  }

  .service {
    background: var(--gelb);
    color: #000;
    padding-block: clamp(1.6rem, 5vw, 2.6rem);
    overflow: hidden;
    /* schneidet den Fuchs oben und unten an */
  }

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

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

  .service__karte--fuchs .knopf:hover {
    transform: translateY(-2px);
  }
}

.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;
  height: 100dvh;
  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);
}

/* Farbe bleibt stabil, sonst verschwindet das X auf hellem Grund */
.modal__zu:hover {
  box-shadow: inset 0 .2rem .5rem rgb(0 0 0 / .4);
}

.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 {
  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;
}

/* Zwei Markups im DOM, CSS zeigt je Breite nur eines: mobil das Akkordeon
   (.kanaele--mobil), ab 820px die drei Karten nebeneinander (.kanaele--desktop). */
.kanaele.kanaele--desktop {
  display: none;
}

@media (min-width: 820px) {
  .kanaele.kanaele--mobil {
    display: none;
  }

  .kanaele.kanaele--desktop {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .kanaele--desktop li {
    display: grid;
  }

  .kanal-karte {
    align-content: start;
    gap: .3rem .5rem;
    padding: .6rem .8rem .75rem;
  }
}

.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;
}

/* Mobil: Kopfzeile aus Icon, Name und Pfeil als eigener Knopf, das Panel
   (Text + CTA) liegt als eigenes Element darunter, damit es als Akkordeon
   zuklappen kann. */
.kanal {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .35rem .6rem;
  width: 100%;
  padding: .7rem .8rem;
  border: 2px solid rgb(0 0 0 / .28);
  border-radius: var(--radius);
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: rgb(255 255 255 / .28);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: transform .2s var(--ease), background .2s, border-color .2s, color .2s, padding .25s var(--ease);
}

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

.kanal__panel {
  grid-column: 1 / -1;
  display: grid;
  padding: 0 .3rem;
}

.kanal__panel-inner {
  display: grid;
  gap: .3em;
  min-height: 0;
}

/* Desktop: die urspruengliche Karte, ein einziger Link mit Icon, Name, Pfeil
   und dem Text direkt darunter — kein Akkordeon, keine CTA-Zeile. */
.kanal-karte {
  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);
  font-size: 16px;
  transition: transform .2s var(--ease), background .2s, border-color .2s, color .2s;
}

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

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

.kanal-karte .kanal__text {
  grid-column: 1 / -1;
  display: grid;
  gap: .1em;
}

.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__name {
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: break-word;
}

.kanal__kurz {
  margin: 0;
  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 {
  margin: 0;
  font-size: .88em;
  line-height: 1.38;
  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;
}

/* Der rote Knopf, ueber den der Weg tatsaechlich geoeffnet wird — CTA statt
   Klick auf die ganze Kachel, sonst kaeme sich das mit dem Auf-/Zuklappen
   mobil in die Quere. Nur im mobilen Akkordeon-Panel im Einsatz. */
.kanal__cta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  margin-top: 0;
  margin-bottom: .8em;
  padding: .5em 1.3em;
  border-radius: 2em;
  background: var(--rot);
  color: #fff;
  font-weight: 900;
  font-size: .9em;
  text-decoration: none;
  min-height: var(--tap);
  transition: transform .2s var(--ease), background .2s;
}

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

.kanal__pfeil {
  width: 1.1rem;
  opacity: .5;
  transition: transform .25s var(--ease);
}

.kanal:hover .kanal__pfeil,
.kanal-karte:hover .kanal__pfeil {
  opacity: 1;
}

/* Unter 820px ist der Kanal ein Akkordeon: grid-template-rows 0fr->1fr animiert
   das Auf- und Zuklappen, overflow: hidden am inneren Wrapper clipt den Inhalt
   waehrend der Animation. Der offene Kopf faerbt sich magenta wie im Referenzvideo. */
@media (max-width: 819px) {
  .kanal__panel {
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .35s var(--ease), opacity .25s var(--ease);
  }

  .kanal__panel-inner {
    overflow: hidden;
    padding-top: 0;
    margin-top: 0;
    border-top: 2px solid rgb(0 0 0 / .18);
  }

  .kanal-item--offen .kanal__panel {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .kanal-item--offen .kanal__panel-inner {
    padding-top: .7rem;
    margin-top: .6rem;
  }

  .kanal-item--offen .kanal {
    background: var(--magenta);
    border-color: var(--magenta);
    color: #fff;
  }

  .kanal-item--offen .kanal__pfeil {
    transform: rotate(180deg);
  }

  /* Kollabiert bewusst knapper: die grosszuegige Polsterung ist nur noetig,
     wenn das Panel darunter tatsaechlich offen ist. */
  .kanal {
    padding: .5rem .7rem;
  }

  .kanal-item--offen .kanal {
    /*padding: .85rem 1rem;*/
  }

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

/* ------------------------------------------------------------- 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. */
/* Die Schiene ist sticky, nicht fixed: als letztes Kind von .oben (Hero bis
   Kategorien) reicht ihr Rahmen genau bis zum Ende der Kategorien-Sektion.
   Dadurch bleibt der Knopf beim Scrollen im Bild, laeuft aber nie ueber die
   Service-Sektion oder den Footer. justify-content schiebt den Knopf an den
   rechten Rand, pointer-events lassen Klicks daneben ungestoert durch. */
.stoerer-schiene {
  position: sticky;
  bottom: 0;
  z-index: 90;
  display: flex;
  justify-content: flex-end;
  padding: 0 .8rem;
  pointer-events: none;
}

@media (min-width: 700px) {
  .stoerer-schiene {
    padding: 0 clamp(1rem, 3vw, 2.4rem) 0;
  }
}

.stoerer {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: .32em;
  position: absolute;
  bottom: 40px;
  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 {
    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(--grau);
  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);
}

.login-page {
  min-height: calc(100vh - 10rem);
  display: grid;
  place-items: center;
  padding: var(--block) var(--luft);
  background: var(--gelb);
}

.login-card {
  width: min(100%, 28rem);
  padding: clamp(1.5rem, 5vw, 3rem);
  color: var(--violett);
  background: #fff;
  border: 2px solid var(--magenta);
  border-radius: var(--radius);
}

.login-card h1 {
  margin-bottom: 1.5rem;
}

.login-card form {
  display: grid;
  gap: .75rem;
}

.login-card label {
  font-weight: 700;
}

.login-card input {
  min-height: 2.75rem;
  padding: .5rem .75rem;
  border: 2px solid var(--grau);
  border-radius: .35rem;
  font: inherit;
}

.login-card input:focus {
  outline: 3px solid color-mix(in srgb, var(--magenta) 35%, transparent);
  border-color: var(--magenta);
}

.login-card button {
  min-height: 2.75rem;
  margin-top: .75rem;
  padding: .5rem 1rem;
  border: 2px solid var(--magenta);
  border-radius: .35rem;
  color: var(--violett);
  background: var(--magenta);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.login-card button:hover {
  background: var(--magenta-hell);
  border-color: var(--magenta-hell);
}

.login-error {
  margin-bottom: 1rem;
  padding: .75rem;
  color: #8b1025;
  background: #ffe6eb;
  border-left: 4px solid var(--rot);
}