/* ===========================================================================
   Sales Awards 2026 — Nominierungsseite
   ===========================================================================
   Diese Datei ist ABSICHTLICH nicht an src/styles/tokens.css gebunden.

   Die Kampagne hat eine eigene Bildsprache (schwarzer Grund, reines Rot,
   Creme statt Weiß), die mit der Hauptseite nichts zu tun hat. Sie an die
   Tokens zu hängen hieße, ein Dutzend Werte dort zu ergänzen, die sonst
   niemand benutzt — und damit den Farbwächter zum Schiedsrichter über eine
   Gestaltung zu machen, die absichtlich anders ist. Als Datei unter `public/`
   liest `scripts/pruefe-farben.mjs` sie nicht (er prüft .css/.ts/.tsx in
   `src/`), und das ist hier die richtige Grenze und keine Umgehung.

   Was NICHT verhandelbar war: die Schriften kommen aus dem eigenen Haus.
   Der Entwurf lud sie von fonts.googleapis.com. Dieses Projekt hostet seine
   Schriften seit jeher selbst — aus zwei Gründen, die beide hier gelten:
   `font-src 'self'` in der CSP (src/lib/csp.ts) lässt das Google-CDN gar
   nicht zu, und der Grund für diese Regel steht im Kopf von src/lib/fonts.ts:
   kein Google-CDN wegen DSGVO.
   =========================================================================== */

/* Inter liegt bereits im Repo (src/styles/fonts/) und ist hierher kopiert.
   Kopiert und nicht verlinkt: `next/font/local` hasht die Dateinamen in den
   Build, eine statische Datei unter `public/` kann den Pfad nicht kennen. */
@font-face{font-family:'Inter';src:url('assets/Inter-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/Inter-500-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/Inter-600-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('assets/Inter-700-latin.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Bowlby One';src:url('assets/BowlbyOne-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --bg:#000000;
  --card:#0d0d0d;
  --card2:#131311;
  --cream:#f3ecdd;
  --cream2:#d6cdb8;
  --muted:#7a7264;
  --red:#ff0000;
  --blue:#4d9fff;
  --line:rgba(255,255,255,0.10);
  --line-strong:rgba(255,255,255,0.22);

  /* Die Display-Schrift steht hier und nur hier — im Entwurf stand
     'Archivo Black' an sieben Stellen.

     Entschieden am 07.08.2026 (#416): Es wird 'Bowlby One'. Nicht aus
     Geschmack, sondern weil die Frage messbar war — sie IST die Display-
     Schrift der Plattform (`--font-display` in src/styles/tokens.css), die
     Datei liegt seit jeher im Repo, und die Awards-Seite ist eine Unterseite
     von sdrsofgermany.com und keine eigene Marke.

     Archivo Black hätte eine zweite Schriftdatei bedeutet, eine zweite
     Ausleihe und einen zweiten Auftritt auf derselben Domain. Der Entwurf
     kannte diesen Zusammenhang nicht.

     Von einem CDN geladen wird nichts — aus demselben Grund wie oben. */
  --font-display:'Bowlby One','Arial Black',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--cream);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
body{min-height:100vh;overflow-x:hidden}
.wrap{max-width:920px;margin:0 auto;padding:28px 22px 120px;position:relative}

/* ---------- typography ---------- */
.display{font-family:var(--font-display);text-transform:uppercase;line-height:0.98;letter-spacing:-0.01em}
.red{color:var(--red)}
.label{font-size:12px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:12px;margin-bottom:22px}
.label::before{content:"";width:26px;height:2px;background:var(--blue);display:inline-block;flex:none}
.sub{color:var(--cream2);font-size:16px;max-width:560px;margin-top:16px}
.muted{color:var(--muted)}

/* ---------- header ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:46px}
.topbar img{height:76px;width:auto;display:block}
.datebadge{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-strong);border-radius:50px;padding:8px 15px;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--cream2);font-weight:500}
.datebadge .dot{width:7px;height:7px;border-radius:50%;background:var(--red);display:inline-block}

/* ---------- screens ---------- */
.screen{display:none;animation:fade .45s ease both}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ---------- progress ---------- */
.progress{margin-bottom:34px}
.progress-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px}
.prog-label{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--cream2);font-weight:600}
.prog-step{font-size:11px;letter-spacing:0.1em;color:var(--muted)}
.progress-track{position:relative;height:5px;background:var(--line);border-radius:5px}
.progress-fill{position:relative;height:100%;width:8%;background:linear-gradient(90deg,#ff2b2b,#e00000);border-radius:5px;transition:width .55s cubic-bezier(.4,0,.2,1);box-shadow:0 0 12px rgba(255,0,0,.55)}
.progress-fill::after{content:"";position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:#ff2b2b;box-shadow:0 0 10px rgba(255,0,0,.9),0 0 0 3px rgba(0,0,0,.5)}

/* ---------- live counter ---------- */
.livecount{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--cream2);background:var(--card);border:1px solid var(--line);border-radius:50px;padding:9px 16px}
.livecount b{color:var(--cream);font-weight:700}
.livecount .ld{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 8px rgba(255,0,0,.9);animation:pulse 1.6s infinite;flex:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero .livecount{margin-top:26px}

/* ---------- disco ball (nur noch auf dem Dankeschirm) ---------- */
.hero-grid{display:flex;flex-direction:row-reverse;align-items:center;gap:34px}
.hero-text{flex:1;min-width:0}
.discowrap{flex:none;width:300px;height:300px;pointer-events:none}
.disco{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 45px rgba(255,255,255,.16));-webkit-mask:radial-gradient(circle at 50% 50%,#000 68%,transparent 90%);mask:radial-gradient(circle at 50% 50%,#000 68%,transparent 90%)}
.thanks-disco{width:230px;height:230px;margin:0 auto 4px}

/* ---------- Polaroids im Hero (Entwurf v24) ----------

   Zwei gegeneinander gedrehte Abzüge, in denen jeweils ein Stapel aus fünf
   Fotos überblendet. Der Stapel liegt übereinander (`position:absolute`),
   sichtbar ist das mit `.active`; deshalb braucht `.pl-photo` eine feste
   Grösse, sonst hätte der Behälter ohne Fluss-Kind die Höhe null.

   Die beiden Abzüge starten bei verschiedenen Bildern (`data-start` im HTML)
   — sonst zeigen sie zu jedem Zeitpunkt dasselbe Motiv, und die zwei Rahmen
   sähen aus wie ein Anzeigefehler. */
.polaroid-stage{flex:none;display:flex;justify-content:center;align-items:flex-start;gap:0}
.polaroid{position:relative;background:var(--cream);padding:11px 11px 34px;border-radius:4px;box-shadow:0 18px 44px rgba(0,0,0,.7)}
.pl-photo{position:relative;width:168px;height:168px;overflow:hidden;background:var(--card)}
.pl-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.pl-img.active{opacity:1}
.pl-a{transform:rotate(-5deg);z-index:1}
.pl-b{transform:rotate(5deg);margin-top:38px;margin-left:-46px;z-index:2}
.pl-sticker{position:absolute;width:52px;height:52px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;box-shadow:0 5px 14px rgba(0,0,0,.45);z-index:3}
.pl-sticker img{width:62%;height:62%;object-fit:contain}
.pl-sticker-tr{top:-16px;right:-14px;transform:rotate(9deg)}
.pl-sticker-tc{top:-22px;left:50%;transform:translateX(-50%) rotate(-8deg)}

/* Wer Bewegung reduziert haben will, bekommt ein Standbild. `seite.js` legt
   dann gar nicht erst einen Stapel an; die Regel hier ist die zweite Hälfte
   davon und greift auch, wenn jemand die Einstellung im laufenden Fenster
   umstellt — dann läuft der Zeitgeber weiter, aber ohne Blende. */
@media (prefers-reduced-motion: reduce){
  .pl-img{transition:none}
}

@media(max-width:860px){
  .hero-grid{flex-direction:column;gap:14px}
  .discowrap{width:200px;height:200px;margin:0 auto}
  .thanks-disco{width:190px;height:190px}
  /* `scale` verkleinert nur die Darstellung, nicht den Platz — die Bühne
     belegt weiter ihre volle Höhe. Der negative Rand darunter holt genau die
     20 % zurück, die sonst als Loch zwischen Bild und Text stünden. */
  .polaroid-stage{margin:0 auto -46px;transform:scale(.8);transform-origin:top center}
}

/* ---------- toast (pop-up on step 2) ---------- */
.toast{position:fixed;left:22px;bottom:22px;z-index:60;display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line-strong);border-radius:14px;padding:13px 15px;box-shadow:0 14px 44px rgba(0,0,0,.65);max-width:320px;transform:translateY(160%);opacity:0;transition:transform .55s cubic-bezier(.2,.85,.25,1),opacity .4s}
.toast.show{transform:translateY(0);opacity:1}
.toast .ld{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 8px rgba(255,0,0,.9);animation:pulse 1.6s infinite;flex:none}
.toast .tx{font-size:13.5px;color:var(--cream2);line-height:1.4}
.toast .tx b{color:var(--cream);font-weight:700}
.toast .x{background:none;border:none;color:var(--muted);font-size:17px;cursor:pointer;padding:0 2px;line-height:1;align-self:flex-start}
.toast .x:hover{color:var(--cream2)}
/* Toast und Gewinnspiel-Pop-up teilen sich unter 860px die Flaeche.
   Vorher hatten beide `left:14px; right:14px; bottom:14px` - also denselben
   Anker und dieselbe Breite. Beide `z-index:60`, das Pop-up steht spaeter im
   Markup und lag deshalb komplett ueber dem Toast: Gemessen bei 500px
   Fensterbreite standen beide auf `bottom 886`, der Toast war mit seiner
   vollen Hoehe von 47px verdeckt und auf dem Schirm gar nicht zu sehen.

   `display:contents` auf breiten Schirmen: Der Behaelter erzeugt keine Box,
   die beiden behalten ihre eigene feste Position (Toast unten links, Pop-up
   oben rechts neben der Spalte). Nur unter 860px wird er zum Stapel, und die
   Kinder geben ihre eigene Positionierung ab.

   `:not(.show){display:none}` ist noetig, weil ein verstecktes Kind sonst
   seinen Platz im Stapel behaelt - das Pop-up saesse dann 47px zu hoch,
   solange der Toast noch nicht da ist. Der Preis: Auf schmalen Schirmen
   erscheinen beide ohne die Einfahr-Bewegung. Das ist der richtige Tausch -
   die Bewegung ist Schmuck, das Verdecken war ein Fehler. */
.meldungen{display:contents}

@media(max-width:860px){
  .meldungen{position:fixed;left:14px;right:14px;bottom:14px;z-index:60;
             display:flex;flex-direction:column;gap:10px;pointer-events:none}
  /* Beide Kinder ausdruecklich benannt statt `>*`: `.rafflepop` steht weiter
     unten in dieser Datei und traegt dieselbe Spezifitaet (0,1,0) - eine
     Regel mit `>*` verliert deshalb gegen sie und greift nur beim Toast.
     Beim ersten Anlauf war genau das der Fall: Der Toast stand im Stapel,
     das Pop-up blieb auf `position:fixed; bottom:22px` und lag weiter
     darueber. Gemessen, nicht vermutet. */
  .meldungen>.toast,.meldungen>.rafflepop{position:static;left:auto;right:auto;
               top:auto;bottom:auto;width:auto;max-width:none;pointer-events:auto}
  .meldungen>.toast:not(.show),.meldungen>.rafflepop:not(.show){display:none}
}

/* ---------- buttons ---------- */
.btn{font-family:'Inter',sans-serif;font-weight:600;font-size:15px;border:none;cursor:pointer;border-radius:50px;padding:15px 30px;transition:transform .15s ease,opacity .15s ease;display:inline-flex;align-items:center;gap:9px}
.btn:active{transform:scale(.97)}
.btn-red{background:linear-gradient(180deg,#ff2b2b 0%,#e00000 100%);color:var(--cream);text-transform:uppercase;letter-spacing:0.06em;font-weight:700;border:1px solid rgba(255,90,90,.85);box-shadow:0 0 24px rgba(255,0,0,.55), 0 0 4px rgba(255,0,0,.6), inset 0 1px 0 rgba(255,255,255,.22)}
.btn-red:hover{box-shadow:0 0 34px rgba(255,0,0,.75), 0 0 6px rgba(255,0,0,.7), inset 0 1px 0 rgba(255,255,255,.28)}
.btn-ghost{background:transparent;color:var(--cream);border:1px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--cream2)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px;align-items:center}
.back{background:none;border:none;color:var(--muted);font-family:'Inter';font-size:14px;cursor:pointer;padding:6px 0;margin-bottom:26px;display:inline-flex;gap:7px;align-items:center}
.back:hover{color:var(--cream2)}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:14px;margin-top:34px}
.grid.cols2{grid-template-columns:1fr 1fr}
.pick{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;cursor:pointer;text-align:left;transition:border-color .18s,background .18s,transform .18s;position:relative;color:var(--cream);font-family:'Inter'}
.pick:hover{border-color:var(--line-strong);background:var(--card2);transform:translateY(-2px)}
.pick .kicker{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.pick .name{font-family:var(--font-display);text-transform:uppercase;font-size:24px;line-height:1;letter-spacing:-0.01em}
.pick .desc{color:var(--cream2);font-size:14px;margin-top:12px;line-height:1.5}
.pick .partner{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:18px}
.pick .partner b{color:var(--cream2);font-weight:600}
.pick .arrow{position:absolute;top:22px;right:22px;color:var(--red);font-size:20px;opacity:0;transition:opacity .18s}
.pick:hover .arrow{opacity:1}
.pick .num{font-family:var(--font-display);color:var(--red);font-size:15px;margin-right:12px}

.awardrow .name{font-size:20px}
.pick.used{opacity:.4;cursor:not-allowed;pointer-events:none}
.pick .badge-done{position:absolute;top:22px;right:22px;color:#5fbf6f;font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase}
.award-cta{color:var(--red);font-size:13px;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;margin-top:16px}
.awardrow:hover .award-cta{text-decoration:underline}

/* ---------- forms ---------- */
.field{margin-top:20px}
.field label{display:block;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--cream2);margin-bottom:9px;font-weight:500}
.field label .opt{color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400}
.input{width:100%;background:var(--card);border:1px solid var(--line-strong);border-radius:11px;padding:15px 16px;color:var(--cream);font-family:'Inter';font-size:15px;transition:border-color .15s}
.input::placeholder{color:#5a5548}
.input:focus{outline:none;border-color:var(--red)}
.person-block{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:20px;margin-top:18px}
.person-block .ptitle{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:4px}

.toggle{display:flex;gap:0;border:1px solid var(--line-strong);border-radius:50px;overflow:hidden;margin-bottom:10px;width:fit-content}
.toggle button{background:transparent;border:none;color:var(--muted);font-family:'Inter';font-weight:600;font-size:13px;padding:10px 22px;cursor:pointer}
.toggle button.on{background:var(--red);color:var(--cream)}

/* ---------- consent + partners ---------- */
.check{display:flex;gap:13px;align-items:flex-start;margin-top:18px;cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;width:22px;height:22px;flex:none;border:1px solid var(--line-strong);border-radius:6px;background:var(--card);cursor:pointer;margin-top:1px;position:relative;transition:.15s}
.check input:checked{background:var(--red);border-color:var(--red)}
.check input:checked::after{content:"✓";position:absolute;color:var(--cream);font-size:14px;top:-1px;left:4px}
.check span{font-size:13.5px;color:var(--cream2);line-height:1.5}
/* Der Partnerkasten ist mit v24 vom Karton zum Glas geworden: heller Schleier
   statt eigener Grundfarbe, kräftigere Kante, eine Lichtkante oben innen.

   Was aus dem Entwurf NICHT mitgekommen ist: `backdrop-filter:blur(16px)
   saturate(120%)`. Hinter diesem Kasten liegt nichts als `--bg` — eine
   einfarbige Fläche. Weichzeichnen und Sättigen von Schwarz ergibt Schwarz;
   die Regel kostet auf jedem Bildlauf eine eigene Ebene im Compositor und
   ändert kein Pixel. Kommt dort je ein Bild oder ein Verlauf dahinter, gehört
   sie zurück — dann tut sie auch etwas. */
.partnerbox{background:rgba(255,255,255,.06);border:1px solid var(--line-strong);border-radius:18px;padding:26px;margin-top:36px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 20px 50px rgba(0,0,0,.4)}
.partnerbox h4{font-family:var(--font-display);text-transform:uppercase;font-size:17px;letter-spacing:-0.01em;margin-bottom:10px}
.partnerbox p{font-size:13.5px;color:var(--cream2);line-height:1.55}
.partnerbox .plogos{margin-top:0;margin-bottom:18px;gap:26px;align-items:center}
.rafflepop{position:fixed;top:150px;right:22px;width:300px;z-index:60;background:var(--card2);border:1px solid rgba(255,0,0,.45);border-radius:16px;padding:20px 20px 18px;box-shadow:0 16px 50px rgba(0,0,0,.6),0 0 26px rgba(255,0,0,.28);transform:translateX(135%);opacity:0;transition:transform .55s cubic-bezier(.2,.85,.25,1),opacity .4s}
.rafflepop.show{transform:none;opacity:1}
.rafflepop .rlabel{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:6px}
.rafflepop .rtitle{font-family:var(--font-display);text-transform:uppercase;font-size:22px;letter-spacing:-0.01em;line-height:1;margin-bottom:9px}
.rafflepop p{font-size:13px;color:var(--cream2);line-height:1.5}
.rafflepop .check{margin-top:14px}
.rafflepop .check span{font-size:13px}
.rafflepop .x{position:absolute;top:11px;right:14px;background:none;border:none;color:var(--muted);font-size:17px;cursor:pointer;line-height:1}
.rafflepop .x:hover{color:var(--cream2)}
/* Oben rechts ist nur Platz, wenn das Pop-up neben der 920px-Spalte steht statt
   auf ihr. Die Kante des Pop-ups liegt bei `100vw - 322` (22px Abstand + 300px
   Breite), die rechte Kante der Schrittanzeige bei `(100vw + 920)/2 - 22` —
   gleich bei 1520px. Darunter schob sich das Pop-up ueber den Zaehler und
   schnitt ihn ab: bei 1500px Fensterbreite 10px, gemessen in Produktion, wobei
   `elementFromPoint` auf dem Zaehler `rafflepop show` zurueckgab. Also unten
   rechts, wo nur der Toast konkurriert — und der sitzt unten LINKS (`.toast`,
   `max-width:320px`), passt also bis hinunter zu 860px daneben. 1560 statt
   1520, damit zwischen beiden 40px Luft bleibt und nicht null. */
@media(max-width:1559px){.rafflepop{top:auto;bottom:22px}}

/* community box on thanks */
.communitybox{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;margin-top:30px}
.communitybox .clogo{height:44px;width:auto;display:block;margin-bottom:14px}
.communitybox p{font-size:14px;color:var(--cream2);line-height:1.55;margin-bottom:18px}
.dslink{color:var(--blue);text-decoration:underline}
.plogos{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.plogos .p{border:1px solid var(--line-strong);border-radius:9px;padding:10px 18px;font-family:var(--font-display);font-size:14px;letter-spacing:0.02em;text-transform:uppercase;color:var(--cream)}

/* ---------- nomination list / cart ---------- */
.cart{margin-top:30px;border-top:1px solid var(--line);padding-top:22px}
.cart .ct{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.nom{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px 17px;margin-bottom:10px}
.nom .who{font-weight:600;font-size:15px}
.nom .meta{font-size:12.5px;color:var(--muted);margin-top:3px}
.nom .rm{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;line-height:1;padding:2px 4px}
.nom .rm:hover{color:var(--red)}

/* ---------- big confirm number ---------- */
.bigconfirm{font-family:var(--font-display);font-size:clamp(46px,9vw,80px);line-height:0.92;text-transform:uppercase;letter-spacing:-0.02em;margin-bottom:10px}

/* ---------- hero ---------- */
.eyebrow{font-size:clamp(19px,3.4vw,32px);letter-spacing:-0.01em;margin-bottom:16px;line-height:1}
.hero .hero-head{font-size:clamp(36px,6.4vw,64px);margin-top:8px}

/* ---------- sponsor / logo chips ---------- */
.logochip{display:inline-flex;align-items:center}
.logochip img{max-height:22px;width:auto;display:block;opacity:.9}
/* Im Partnerkasten stehen die Marken gross und in ihrer eigenen Farbe — er ist
   die einzige Stelle der Seite, an der sie der Gegenstand sind und nicht die
   Fussnote unter einer Kategorie. */
.plogos .pfin img{max-height:26px;opacity:.95}
/* Gongs helle Fassung ist gestapelt und quadratisch — Stern über Wortzeichen,
   nicht nebeneinander wie bei den drei anderen. Die 26px darüber sind bei ihnen
   reine Tinte (alle drei Dateien sind randlos beschnitten, gemessen); bei Gong
   verteilen sich dieselben 26px auf zwei Zeilen und einen Zwischenraum.

   Gemessen an der Datei (950px gerendert, Zeilen mit Farbe gezählt):
   Stern 56,1% der Höhe, Wortzeichen 29,1%. Daraus

       max-height 26px → Stern 14,6px, Wortzeichen  7,6px  ← zu klein
       max-height 46px → Stern 25,8px, Wortzeichen 13,4px

   46px setzt also den STERN auf die 26px der Nachbarmarken; das Wortzeichen
   liegt als zweite Zeile darunter. Das ist die Aufteilung aus dem Entwurf
   (v25) und keine eigene Erfindung. */
.plogos .pfin.sq img{max-height:46px}
.sponsor{display:flex;align-items:center;gap:13px;margin-top:18px;flex-wrap:wrap}
.sponsor .lbl{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.sponsor .tbd{font-size:12px;letter-spacing:0.06em;color:var(--muted);font-style:italic}
.award-sponsor{margin:24px 0 4px}
.award-sponsor .logochip img{max-height:28px}

.err{color:var(--red);font-size:13px;margin-top:14px;display:none}
.err.show{display:block}

/* ---------- Fusszeile ----------
   Auf JEDEM Schirm. Sie ist der einzige Weg von dieser Seite zurück — und die
   einzige Stelle, an der das Impressum steht.

   Seit #620 derselbe Aufbau wie auf den übrigen Seiten: drei Spalten und eine
   Rechtszeile darunter, nachgebaut aus
   `src/components/marketing/entwurf/fussbereich.tsx`. Was daran abweicht und
   warum die Adressen absolut bleiben, steht im HTML daneben. */
.fuss{margin-top:80px;padding-top:44px;border-top:1px solid var(--line);font-size:14px}
.fuss a{color:var(--cream2);text-decoration:none}
.fuss a:hover{color:var(--red)}

/* Drei Spalten wie im Fuss der Hauptseite, im selben Verhältnis (1.4 / 1 / 1).
   Die Marke bekommt mehr, weil dort die Wortmarke und der Satz stehen. */
.fuss-spalten{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.fuss-marke img{width:58px;height:58px;display:block}
.fuss-marke p{margin-top:16px;font-size:14px;line-height:1.6;color:var(--cream)}
.fuss-spalte{display:flex;flex-direction:column;gap:10px;align-content:start}
.fuss-titel{font-size:12px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.fuss-ort{color:var(--muted)}

/* Die Rechtszeile sitzt unter einer eigenen Linie, das Zeichen rechts —
   auch das aus dem Vorbild. `margin-left:auto` statt einer festen Breite,
   damit die Zeile beim Umbruch nicht auseinanderfällt. */
.fuss-recht{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;font-size:13px;color:var(--muted)}
.fuss-recht .fuss-copy{margin-left:auto}

@media(max-width:640px){
  .grid.cols2{grid-template-columns:1fr}
  .wrap{padding:22px 18px 110px}
  .topbar img{height:60px}
  .btn-row{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
  .back{margin-bottom:20px}
  .fuss{margin-top:56px;padding-top:32px}
  .fuss-spalten{grid-template-columns:1fr;gap:32px}
  .fuss-recht{margin-top:32px}
  /* Ohne das klebt das Zeichen nach dem Umbruch am rechten Rand, allein in
     einer eigenen Zeile. */
  .fuss-recht .fuss-copy{margin-left:0;width:100%}
}

/* ---------- Ersatz fuer die style="…"-Attribute des Entwurfs ----------
   Ein `style="…"`-Attribut braucht `'unsafe-inline'` in style-src. Die
   Richtlinie dieses Projekts arbeitet mit Nonce, und eine statische Datei hat
   keine. Die sechs Werte stehen deshalb hier. */
.h-gross{font-size:clamp(30px,7vw,54px)}
.h-mittel{font-size:clamp(28px,6.5vw,48px)}
.h-riesig{font-size:clamp(34px,8vw,66px)}
.abstand-oben{margin-top:14px}
.nom .who,.nom .meta b,.again-hervor{color:var(--cream)}

/* ---------- Absende-Zustand ----------
   Der Entwurf kannte ihn nicht: `submitAll()` lief synchron in ein
   console.log. Jetzt geht eine echte Anfrage raus, und zwischen Klick und
   Antwort liegt Zeit, in der die Seite sagen muss, was sie tut — sonst
   drueckt man ein zweites Mal. */
.btn.laedt{opacity:.6;cursor:progress}