/*
Theme Name: German Legal Tech Awards
Theme URI: https://legaltechawards.de/
Author: Legal Tech Verband Deutschland e.V.
Description: Theme für die German Legal Tech Awards. Bringt Farben, Montserrat, den Vorhang und das Kachelmuster mit. Die Inhalte liegen als Blöcke in den Seiten und in den Einträgen des Plugins „GLTA Inhalte".
Version: 1.6.1
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: glta
*/

@font-face{
  font-family:"Montserrat";
  src:url("assets/fonts/montserrat-var.woff2") format("woff2-variations"),
      url("assets/fonts/montserrat-var.woff2") format("woff2");
  font-weight:400 800;font-style:normal;font-display:swap;
}

/* ===================================================================
   German Legal Tech Awards 2027 — Fassung 3
   Farben, Maße und das Muster nach den GLTA Design Guidelines.
   Das Kachelmuster ist als Vektor aus der Guideline-PDF gezogen,
   liegt in assets/muster-*.svg und wiederholt sich nahtlos.
   =================================================================== */
:root{
  --papier:#EEEFEA;
  --weiss:#FFF;
  --tief:#010002;
  --navy:#12143C;
  --v900:#2800EB;
  --v700:#553AD9;
  --v600:#6343E1;
  --v400:#9361FE;
  --magenta:#C964CF;

  --tinte:#0E0E12;
  /* Lesbarkeit: die Fließtexte waren zu blass. Zwei Stufen dunkler. */
  --tinte-72:rgba(14,14,18,.88);
  --tinte-60:rgba(14,14,18,.66);
  --tinte-40:rgba(14,14,18,.40);
  --linie:rgba(14,14,18,.16);

  --papier-88:rgba(255,255,255,.96);
  --papier-70:rgba(238,239,234,.82);
  --papier-45:rgba(238,239,234,.56);
  --linie-hell:rgba(238,239,234,.22);

  --rand:clamp(20px,5vw,64px);
  --breite:1240px;
  --kopf:78px;
  --muster:289px 408px;
}

*{box-sizing:border-box}
/* overflow-x: clip statt hidden — hidden würde den Body zum eigenen
   Scroll-Container machen; dann scrollt scrollIntoView() ins Leere
   und die hervorgehobene Kachel bliebe unsichtbar. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);
  font-family:"Montserrat",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.04;letter-spacing:-.03em}
p{margin:0}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--magenta);outline-offset:4px}

.bahn{max-width:var(--breite);margin:0 auto;padding-left:var(--rand);padding-right:var(--rand)}
.nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
section[id]{scroll-margin-top:calc(var(--kopf) + 12px)}
[hidden]{display:none!important}

/* -------------------------------------------------------------------
   Das Muster aus den Guidelines
   ------------------------------------------------------------------- */
.muster{position:absolute;inset:0;pointer-events:none;
  background:url("assets/muster-dunkel.svg") repeat;background-size:var(--muster)}
.muster-violett{background-image:url("assets/muster-violett.svg")}
/* Weicht nach rechts auf, damit der Text links ruhig bleibt */
.muster-verlauf{-webkit-mask-image:linear-gradient(90deg,transparent 30%,rgba(0,0,0,.22) 52%,rgba(0,0,0,.7) 78%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 30%,rgba(0,0,0,.22) 52%,rgba(0,0,0,.7) 78%,#000 100%)}
/* Das Muster bleibt Hintergrund: kräftig genug, um erkennbar zu sein,
   leise genug, dass jeder Text darüber sauber lesbar bleibt. */
.tafel > .muster,.fair > .muster{opacity:.34}

/* Blattform aus dem Logo */
.blatt{border-radius:78% 0 78% 0}
.blatt-gegen{border-radius:0 78% 0 78%}

/* Klammer — das Rahmenzeichen aus dem Logo */
.klammer{position:relative;padding:clamp(26px,3.4vw,44px)}
.klammer::before,.klammer::after{content:"";position:absolute;
  width:clamp(34px,4vw,58px);height:clamp(34px,4vw,58px);
  border:2px solid currentColor;opacity:.55}
.klammer::before{top:0;left:0;border-right:0;border-bottom:0}
.klammer::after{right:0;bottom:0;border-left:0;border-top:0}

/* -------------------------------------------------------------------
   Kopfzeile
   ------------------------------------------------------------------- */
.kopf{position:sticky;top:0;z-index:80;background:var(--tief);color:var(--papier);
  border-bottom:1px solid var(--linie-hell)}
.kopf-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;height:var(--kopf)}
.marke{justify-self:start;display:flex;align-items:center}
.marke img{height:40px;width:auto;display:block}
.menue{display:flex;justify-content:center;gap:clamp(16px,2vw,28px);font-size:12.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase}
.menue a{text-decoration:none;color:var(--papier-70);padding:8px 0;position:relative;
  transition:color .2s;white-space:nowrap}
.menue a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;
  background:var(--magenta);transition:right .28s cubic-bezier(.2,.7,.2,1)}
.menue a:hover,.menue a.aktiv{color:#fff}
.menue a:hover::after,.menue a.aktiv::after{right:0}
.kopf-cta{justify-self:end}
.brenner{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;
  padding:0 11px;background:none;border:0;cursor:pointer;justify-self:end}
.brenner span{display:block;height:2px;background:var(--papier);transition:transform .22s,opacity .18s}
.brenner[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.brenner[aria-expanded="true"] span:nth-child(2){opacity:0}
.brenner[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}


/* -------------------------------------------------------------------
   Schaltflächen
   ------------------------------------------------------------------- */
.knopf{display:inline-flex;align-items:center;gap:14px;text-decoration:none;border:0;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:19px 30px;position:relative;overflow:hidden;
  background:var(--v700);color:#fff;transition:background .22s}
.knopf .pfeil{transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.knopf:hover{background:var(--v900)}
.knopf:hover .pfeil{transform:translateX(6px)}
.knopf-hell{background:var(--papier);color:var(--tief)}
.knopf-hell:hover{background:#fff}
.knopf-klein{padding:13px 20px;font-size:12px}

/* -------------------------------------------------------------------
   Abschnittskopf
   ------------------------------------------------------------------- */
.marke-zeile{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:20px;
  border-top:1px solid var(--linie);padding-top:14px;margin-bottom:clamp(30px,4vw,52px)}
.marke-zeile .nr{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--v700)}
.marke-zeile .txt{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinte-72)}
.marke-zeile.ohne-nr{grid-template-columns:1fr}
.auf-dunkel .marke-zeile{border-top-color:var(--linie-hell)}
.auf-dunkel .marke-zeile .nr{color:var(--v400)}
.auf-dunkel .marke-zeile .txt{color:var(--papier-70)}

.tafel{padding:clamp(64px,9vw,132px) 0;position:relative}
.tafel-schmal{padding:clamp(44px,6vw,84px) 0}
h2{font-size:clamp(30px,4.6vw,58px)}
/* Vorspann: größer, kräftiger, dunkler — die alte Fassung war zu blass. */
/* Der Vorspann ist die Subheadline: groß, halbfett, hoher Kontrast. */
.vorspann{font-size:clamp(17px,1.6vw,21px);font-weight:600;color:var(--tinte-72);
  max-width:54ch;margin-top:22px;line-height:1.52;letter-spacing:-.005em}
.auf-dunkel{background:var(--tief);color:var(--papier)}
.auf-dunkel .vorspann{color:#fff}

/* -------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------- */
.hero{position:relative;background:var(--tief);color:var(--papier);overflow:hidden}
.hero-in{position:relative;z-index:2;
  padding-top:clamp(34px,4.2vw,58px);padding-bottom:clamp(30px,3.4vw,44px)}
/* Die Bildmarke steht als eigenes Motiv rechts neben dem Text. Der
   Schriftzug fehlt darin bewusst: Der Name steht direkt daneben als
   Überschrift, zweimal wäre er doppelt. */
.hero-signet{width:min(104px,24%);aspect-ratio:208 / 356;margin-bottom:clamp(22px,3vw,30px);
  position:relative}
.hero-signet img{display:block;width:100%;height:auto;position:relative;z-index:1}
.hero-signet::before{content:"";position:absolute;inset:-36% -42%;
  background:radial-gradient(56% 56% at 50% 50%,rgba(147,97,254,.40),transparent 72%)}
.hero h1{font-size:clamp(30px,4.6vw,60px);max-width:16ch;letter-spacing:-.035em;line-height:1.03}
.hero h1 em{font-style:normal;color:var(--v400)}
/* Der Claim steht jetzt unter dem ausgeschriebenen Namen. */
.hero-claim{margin-top:clamp(16px,1.8vw,22px);font-size:clamp(17px,1.75vw,23px);font-weight:700;
  color:#fff;letter-spacing:-.02em;line-height:1.3;max-width:26ch}
.hero-text{font-size:clamp(16.5px,1.4vw,18.5px);font-weight:500;color:var(--papier-88);max-width:56ch;
  margin-top:clamp(14px,1.6vw,20px);line-height:1.6}
.hero-tat{margin-top:clamp(32px,3.6vw,46px);display:flex;flex-wrap:wrap;gap:14px}

.eckdaten{position:relative;z-index:2;border-top:1px solid var(--linie-hell);
  display:grid;grid-template-columns:repeat(3,auto) 1fr;gap:0 clamp(28px,4vw,64px);
  padding:clamp(20px,2.2vw,26px) 0 clamp(26px,3vw,38px);font-size:13.5px}
.eckdaten b{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--v400);margin-bottom:5px}
.eckdaten span{color:var(--papier-88);font-weight:500}
.eckdaten .offen{color:var(--papier-45)}

/* Ab Tablet läuft der Kopfbereich über die volle Bahn: der Name in einer
   Zeile, darunter der Claim links und der Fließtext rechts, die Eckdaten
   gleichmäßig verteilt. Vorher stand alles in der linken Hälfte und rechts
   blieb tote Fläche.
   Die Schriftgröße ist so gedeckelt, dass „German Legal Tech Awards 2027"
   auf jeder Breite in eine Zeile passt. Wer den Text ändert, prüft das. */
@media(min-width:900px){
  .hero-in{display:grid;grid-template-columns:minmax(0,1fr) clamp(150px,15vw,210px);
    column-gap:clamp(32px,4.4vw,64px);align-items:center}
  .hero-signet{grid-column:2;grid-row:1 / span 4;justify-self:end;align-self:center;
    width:100%;margin-bottom:0}
  .hero-in > h1{grid-column:1;max-width:14ch;font-size:clamp(34px,4.9vw,64px)}
  .hero-claim{grid-column:1;max-width:34ch}
  .hero-text{grid-column:1;max-width:52ch}
  .hero-tat,.hero-in > .wp-block-buttons{grid-column:1}
  .eckdaten{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* -------------------------------------------------------------------
   Mission — Kachel mit dem Originalmuster
   ------------------------------------------------------------------- */
.mission{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,80px);align-items:start}
/* Das Zitat sitzt mittig in der Kachel, mit knappem Rand oben und unten.
   Ganz unten stand es zu tief, ganz oben klebte es an der Kante. */
.zitat{position:relative;background:var(--tief);color:var(--papier);overflow:hidden;
  padding:clamp(26px,3.1vw,40px) clamp(32px,4.4vw,56px);
  min-height:clamp(250px,28vw,360px);display:flex;
  flex-direction:column;justify-content:center}
.zitat::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(1,0,2,.72) 0%,rgba(1,0,2,.5) 50%,rgba(1,0,2,.72) 100%)}
.zitat blockquote{position:relative;z-index:2;margin:0;font-size:clamp(19px,2.2vw,27px);
  font-weight:700;line-height:1.34;letter-spacing:-.02em}
.zitat figcaption{position:relative;z-index:2;margin-top:20px;font-size:12px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--v400)}
/* Verlauf Schwarz nach Violett — Design Guidelines, Seite 7. Bewusst ein
   anderes Gestaltungsmittel als der Musterabschnitt „Der Abend" darunter. */
.zitat.zitat-verlauf{background:linear-gradient(146deg,#010002 0%,#1E0A3C 30%,#4A2BC4 68%,#8E56D6 100%)}
/* Auf dem Verlauf genügt ein gleichmäßiger Schleier: Er hält die Schrift
   lesbar, ohne die Farbe nach Violett hin abzudunkeln. */
.zitat.zitat-verlauf::after{background:
  linear-gradient(160deg,rgba(1,0,2,.26) 0%,rgba(1,0,2,.14) 46%,rgba(1,0,2,.30) 100%)}
.zitat-verlauf figcaption{color:rgba(255,255,255,.86)}

/* -------------------------------------------------------------------
   Der Abend
   ------------------------------------------------------------------- */
.abend{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,80px);align-items:start}
.saeulen{list-style:none;margin:clamp(30px,4vw,48px) 0 0;padding:0}
.saeulen li{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:baseline;
  padding:22px 0;border-top:1px solid var(--linie-hell)}
.saeulen li:last-child{border-bottom:1px solid var(--linie-hell)}
.saeulen .z{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--v400)}
.saeulen b{display:block;font-size:17.5px;letter-spacing:-.02em;margin-bottom:5px;color:#fff}
.saeulen p{color:var(--papier-88);font-size:16px;font-weight:500}
.nachsatz{margin-top:26px;font-size:14px;color:var(--papier-45);max-width:46ch}
.bild-rahmen{position:relative;margin:0}
.bild-rahmen img{width:100%;height:auto}
.bild-rahmen::before,.bild-rahmen::after{content:"";position:absolute;width:64px;height:64px;
  border:2px solid var(--papier);opacity:.85;z-index:3}
.bild-rahmen::before{top:-2px;left:-2px;border-right:0;border-bottom:0}
.bild-rahmen::after{right:-2px;bottom:-2px;border-left:0;border-top:0}
/* Platzhalter, solange das Gala-Motiv fehlt */
.bild-platz{position:relative;aspect-ratio:3 / 4;background:var(--tief);overflow:hidden;
  display:grid;place-items:center;text-align:center;padding:28px}
.bild-platz .muster{opacity:1;--muster:168px 237px}
.bild-platz span{position:relative;z-index:2;font-size:12px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--papier-70);line-height:1.8;
  background:rgba(1,0,2,.72);padding:14px 18px}

/* -------------------------------------------------------------------
   Kategorien
   ------------------------------------------------------------------- */
.kategorien{margin-top:clamp(34px,4.6vw,56px);border-top:1px solid var(--linie)}
.kat{display:grid;grid-template-columns:clamp(74px,9vw,132px) 1fr auto;align-items:center;
  gap:clamp(16px,2.6vw,40px);padding:clamp(22px,2.8vw,34px) 0;
  border-bottom:1px solid var(--linie);text-decoration:none;color:inherit;
  position:relative;transition:color .28s}
.kat .zahl{font-size:clamp(30px,4.4vw,56px);font-weight:800;letter-spacing:-.05em;
  color:var(--tinte-40);transition:color .28s;line-height:1}
.kat h3{font-size:clamp(18px,2.1vw,26px);letter-spacing:-.025em}
.kat .was{display:block;margin-top:8px;color:var(--tinte-72);font-size:15px;font-weight:500;
  max-width:62ch;transition:color .28s;line-height:1.55}
.kat .fahne{display:inline-block;vertical-align:middle;margin-left:12px;padding:5px 10px;
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:var(--magenta);color:#fff}
.kat .fahne-offen{background:none;color:var(--v700);border:1px solid var(--linie)}
.kat .rein{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--v700);white-space:nowrap;opacity:0;transform:translateX(-8px);
  transition:opacity .28s,transform .28s}
.kat::before{content:"";position:absolute;inset:0 calc(var(--rand) * -1);background:var(--v700);
  transform:scaleY(0);transform-origin:bottom;transition:transform .32s cubic-bezier(.2,.7,.2,1);z-index:-1}
.kat:hover{color:#fff}
.kat:hover::before{transform:scaleY(1)}
.kat:hover .zahl{color:rgba(255,255,255,.55)}
.kat:hover .was{color:rgba(255,255,255,.88)}
.kat:hover .fahne-offen{color:#fff;border-color:rgba(255,255,255,.5)}
.kat:hover .rein{color:#fff;opacity:1;transform:none}
.kategorien-wrap{position:relative;z-index:0}

.bedingungen{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:clamp(28px,3.4vw,40px);font-size:14px}
.bedingungen b{font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:11.5px;
  display:block;color:var(--v700);margin-bottom:5px}

/* -------------------------------------------------------------------
   Jury und Auswahl
   ------------------------------------------------------------------- */
.ablauf{list-style:none;margin:0 0 clamp(48px,6vw,84px);padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--linie)}
.ablauf li{padding:22px 24px 0 0;position:relative}
.ablauf li::before{content:"";position:absolute;top:-1px;left:0;width:38px;height:3px;background:var(--v700)}
.ablauf .z{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--v700);margin-bottom:10px}
.ablauf b{font-size:16.5px;letter-spacing:-.02em;font-weight:700}

.jury-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:clamp(26px,3.4vw,40px)}
.jury-kopf p{color:var(--tinte-72);font-size:15.5px;font-weight:500;max-width:52ch}
.jury{display:grid;align-items:start;grid-template-columns:repeat(6,1fr);gap:clamp(16px,2.2vw,30px)}
.j figure{margin:0;overflow:hidden;background:var(--v600);aspect-ratio:1}
.j figure img{width:100%;height:100%;object-fit:cover}
.j .platz{width:100%;aspect-ratio:1;background:
  repeating-linear-gradient(135deg,rgba(85,58,217,.16) 0 8px,transparent 8px 16px),rgba(85,58,217,.08);
  display:grid;place-items:center;text-align:center;padding:10px;
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--v700)}
/* Namen und Funktionen deutlich lesbarer als vorher */
.j b{display:block;margin-top:14px;font-size:15.5px;letter-spacing:-.015em;line-height:1.25}
.j span{display:block;font-size:13.5px;font-weight:500;color:var(--tinte-72);margin-top:4px;line-height:1.4}

/* -------------------------------------------------------------------
   Kein Pay-to-Win — eigenes Band, deutlich präsenter
   ------------------------------------------------------------------- */
.fair{position:relative;background:var(--tief);color:var(--papier);overflow:hidden}
.fair .muster{opacity:.34}
.fair-in{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(26px,3.4vw,56px);align-items:center;
  padding-block:clamp(48px,5.6vw,84px)}
.fair .schild{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--v400);margin-bottom:18px}
.fair h2{font-size:clamp(32px,4.8vw,62px);line-height:.98;letter-spacing:-.04em}
.fair h2 em{font-style:normal;color:var(--magenta)}
.fair p{font-size:clamp(15.5px,1.4vw,17.5px);font-weight:500;color:var(--papier-88);line-height:1.6}
.fair p + p{margin-top:16px}
.fair p b{color:#fff;font-weight:800}
.fair-kasten{background:rgba(1,0,2,.72);border:1px solid var(--linie-hell);
  padding:clamp(22px,2.6vw,32px);backdrop-filter:blur(2px)}

/* -------------------------------------------------------------------
   Rückblick-Banner auf der Startseite
   ------------------------------------------------------------------- */
/* Heller Streifen: steht zwischen dem dunklen „Kein Pay-To-Win" und der
   violetten Partner-Tafel und trennt die beiden voneinander. */
.rueckband{background:var(--papier);color:var(--tinte)}
.rueckband-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(22px,3vw,48px);padding-block:clamp(44px,5.4vw,78px)}
.rueckband .schild{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--v700);margin-bottom:14px}
.rueckband h2{font-size:clamp(28px,3.6vw,46px)}
.rueckband p{margin-top:12px;font-size:clamp(16px,1.5vw,18.5px);font-weight:500;
  color:var(--tinte-72);max-width:46ch}

/* -------------------------------------------------------------------
   Partner / Abbinder — ohne Muster, mit „Powered by"
   ------------------------------------------------------------------- */
/* Verlauf Magenta nach Violett — Design Guidelines, Seite 7. */
.partner-tafel{background:linear-gradient(118deg,#C964CF 0%,#8E52E0 46%,#553AD9 100%);color:#fff}
.partner{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,5vw,72px);align-items:center}
.partner-tafel .marke-zeile{border-top-color:rgba(255,255,255,.34)}
.partner-tafel .marke-zeile .nr{color:#fff}
.partner-tafel .marke-zeile .txt{color:rgba(255,255,255,.86)}
.partner-tafel .vorspann{color:#fff}
.karte{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;
  background:rgba(1,0,2,.30);padding:clamp(22px,2.6vw,32px)}
.karte img{width:clamp(88px,10vw,124px);height:clamp(88px,10vw,124px);object-fit:cover}
.karte b{display:block;font-size:19px;letter-spacing:-.02em}
.karte .rolle{display:block;font-size:14px;font-weight:500;color:rgba(255,255,255,.86);
  margin:5px 0 14px;line-height:1.4}
.karte a{display:inline-block;font-size:14px;color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.55);padding:6px 0 4px;word-break:break-word}
.karte a:hover{border-bottom-color:#fff}

/* Powered by + Partnerlogos, nach dem Vorbild des Startup-Verbands */
.band{background:var(--tief);color:var(--papier);padding:clamp(44px,5.4vw,72px) 0}
.band-titel{margin:0 0 clamp(22px,2.6vw,30px);font-size:12px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--v400)}
.band + .band{padding-top:0}
.band-trenner{border-top:1px solid var(--linie-hell);padding-top:clamp(36px,4.4vw,56px)}
.logoreihe{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,2.4vw,34px)}
.logoreihe > *{display:flex;align-items:center;justify-content:center;
  height:clamp(40px,4.4vw,58px);text-decoration:none}
.logoreihe img{max-height:100%;width:auto;object-fit:contain}
.logoreihe .platz{min-width:clamp(150px,15vw,200px);border:1px dashed var(--linie-hell);
  color:var(--papier-45);font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;padding:0 18px}
.logoreihe.klein > *{height:clamp(46px,5vw,68px)}
.logoreihe a{transition:opacity .2s}
.logoreihe a:hover{opacity:.72}

/* -------------------------------------------------------------------
   Gewinner — jetzt auf der Rückblick-Seite
   ------------------------------------------------------------------- */
.gewinner{display:grid;grid-template-columns:clamp(150px,20vw,260px) 1fr;gap:clamp(24px,3.4vw,48px);
  align-items:center;padding:clamp(28px,3.4vw,44px) 0;border-top:1px solid var(--linie)}
.gewinner .platz{aspect-ratio:1;background:
  repeating-linear-gradient(135deg,rgba(85,58,217,.16) 0 8px,transparent 8px 16px),rgba(85,58,217,.08);
  display:grid;place-items:center;text-align:center;padding:16px;font-size:12px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--v700)}
.gewinner .titel{display:inline-block;padding:6px 12px;background:var(--magenta);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.gewinner h3{font-size:clamp(24px,3vw,36px)}
.gewinner .org{color:var(--tinte-72);margin:8px 0 14px;font-size:15.5px;font-weight:500}
.gewinner .grund{color:var(--tinte-72);font-size:15.5px;font-weight:500;max-width:62ch}
.jahrgang{margin-top:clamp(52px,6vw,88px)}
.jahrgang:first-of-type{margin-top:0}

/* -------------------------------------------------------------------
   Nominierung — neun Kästen, je Kategorie ein Formular
   ------------------------------------------------------------------- */
.formkasten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px);
  margin-top:clamp(34px,4.4vw,56px)}
.fk{display:flex;flex-direction:column;background:var(--weiss);border:1px solid var(--linie);
  padding:clamp(24px,2.6vw,34px);position:relative;transition:border-color .22s,transform .22s}
.fk:hover{border-color:var(--v700);transform:translateY(-3px)}
.fk .nr{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--v700);margin-bottom:14px}
.fk h3{font-size:clamp(18px,1.9vw,22px);letter-spacing:-.025em;line-height:1.15}
.fk .fahne{display:inline-block;align-self:flex-start;margin-top:12px;padding:5px 10px;font-size:11px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;background:var(--magenta);color:#fff}
/* Inhalt sitzt oben, der Knopf immer unten an der Kante — auch wenn die
   Kacheln unterschiedlich viel Text haben. */
.fk{justify-content:space-between}
.fk-oben{display:block}
.fk p{margin-top:14px;font-size:14.5px;font-weight:500;color:var(--tinte-72);line-height:1.58}
.fk .knopf{margin-top:clamp(22px,2.4vw,30px);align-self:flex-start;padding:15px 22px;font-size:12px}
/* Aus der Kategorienliste der Startseite angesprungen */
.fk{scroll-margin-top:calc(var(--kopf) + 28px)}
.fk.hervor{border:2px solid var(--v700);box-shadow:0 0 0 6px rgba(85,58,217,.12)}
.fk.hervor::before{content:"Deine Auswahl";position:absolute;top:-1px;left:-2px;
  background:var(--v700);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;padding:6px 12px}
.fk.hervor .fk-oben{padding-top:18px}
.fk.fehlt{background:rgba(85,58,217,.05);border-style:dashed}

.hinweiszeile{margin-top:clamp(30px,3.4vw,44px);font-size:14px;font-weight:500;
  line-height:1.65;color:var(--tinte-72);max-width:78ch}
.hinweiszeile a{color:var(--v700);text-underline-offset:3px}

/* -------------------------------------------------------------------
   Fußzeile
   ------------------------------------------------------------------- */
.fuss{background:var(--tief);color:var(--papier-45);padding:clamp(30px,3.6vw,44px) 0;font-size:12.5px;
  border-top:1px solid var(--linie-hell)}
.fuss-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.fuss a{color:inherit;text-decoration:none;display:inline-block;padding:9px 0;margin-left:24px}
.fuss a:hover{color:var(--magenta)}

/* Zurück-Verweis */
.zurueck{margin-bottom:clamp(18px,2.2vw,26px)}
.zurueck a{display:inline-flex;align-items:center;gap:10px;color:var(--v400);
  text-decoration:none;font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.zurueck a:hover{color:var(--magenta)}

/* -------------------------------------------------------------------
   Rechtstexte
   ------------------------------------------------------------------- */
.rechtstext{max-width:74ch}
.rechtstext h2{font-size:clamp(20px,2.2vw,28px);letter-spacing:-.025em;line-height:1.2;
  margin:clamp(40px,4.4vw,60px) 0 clamp(14px,1.4vw,18px);padding-top:clamp(20px,2.2vw,28px);
  border-top:1px solid var(--linie)}
.rechtstext > :first-child{margin-top:0;padding-top:0;border-top:0}
.rechtstext p{font-size:15.5px;line-height:1.72;color:var(--tinte-72);margin:0 0 15px}
.rechtstext strong{color:var(--tinte);font-weight:800}
.rechtstext a{color:var(--v700);text-decoration:underline;text-underline-offset:3px}
.rechtstext ul{margin:0 0 15px;padding-left:20px;font-size:15.5px;line-height:1.72;color:var(--tinte-72)}
.rechtstext li{margin-bottom:5px}

/* -------------------------------------------------------------------
   Einblenden beim Scrollen
   ------------------------------------------------------------------- */
.ein{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1)}
.ein.da{opacity:1;transform:none}

/* -------------------------------------------------------------------
   Vorhang — die Lichttextur aus den Guidelines, nur im Hero
   ------------------------------------------------------------------- */
.vorhang{position:absolute;inset:-10% -4% -4% 0;pointer-events:none;z-index:1}
.vorhang::before,.vorhang::after{content:"";position:absolute;inset:0}
.vorhang::before{
  background:
    repeating-linear-gradient(90.6deg,rgba(147,97,254,0) 0 34px,rgba(147,97,254,.40) 34px 58px,rgba(147,97,254,0) 58px 96px),
    repeating-linear-gradient(89.4deg,rgba(85,58,217,0) 0 62px,rgba(85,58,217,.60) 62px 104px,rgba(85,58,217,0) 104px 176px),
    repeating-linear-gradient(90.9deg,rgba(238,239,234,0) 0 15px,rgba(238,239,234,.07) 15px 21px,rgba(238,239,234,0) 21px 44px),
    repeating-linear-gradient(90.2deg,rgba(238,239,234,0) 0 118px,rgba(238,239,234,.10) 118px 132px,rgba(238,239,234,0) 132px 268px);
  filter:blur(13px);
  -webkit-mask-image:linear-gradient(90deg,transparent 4%,rgba(0,0,0,.10) 30%,rgba(0,0,0,.72) 62%,#000 92%);
  mask-image:linear-gradient(90deg,transparent 4%,rgba(0,0,0,.10) 30%,rgba(0,0,0,.72) 62%,#000 92%);
  will-change:transform;
  animation:vorhang-oeffnen 26s ease-in-out infinite alternate}
.vorhang::after{
  background:
    radial-gradient(76% 120% at 100% 30%,rgba(99,67,225,.40),transparent 66%),
    radial-gradient(40% 80% at 78% 108%,rgba(40,0,235,.32),transparent 70%)}
/* Der Vorhang öffnet sich langsam: Die Lichtbahnen wandern nicht nur,
   sie ziehen sich dabei auch um sieben Prozent auseinander. Ein Zyklus
   dauert 26 Sekunden hin und ebenso lange zurück, also gut eine Minute.
   Bewegt wird nur verschoben und gestreckt, nichts neu gezeichnet.
   Wer im System weniger Bewegung eingestellt hat, sieht ein Standbild;
   das regelt der Block prefers-reduced-motion weiter unten. */
@keyframes vorhang-oeffnen{
  from{transform:translate3d(-22px,0,0) scaleX(1)}
  to  {transform:translate3d(26px,0,0) scaleX(1.07)}}

/* -------------------------------------------------------------------
   Schmalere Bildschirme
   ------------------------------------------------------------------- */
@media(max-width:1080px){
  .jury{grid-template-columns:repeat(4,1fr)}
  .ablauf{grid-template-columns:repeat(2,1fr);gap:0 24px}
  .ablauf li{padding-bottom:22px}
  .formkasten{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .menue{position:absolute;left:0;right:0;top:var(--kopf);display:none;flex-direction:column;
    gap:0;background:var(--tief);border-bottom:1px solid var(--linie-hell);
    padding:4px var(--rand) 18px;box-shadow:0 26px 44px rgba(1,0,2,.5)}
  .menue.offen{display:flex}
  .menue a{font-size:14px;letter-spacing:.12em;padding:16px 0;border-bottom:1px solid var(--linie-hell)}
  .menue a:last-child{border-bottom:0}
  .menue a::after{display:none}
  .brenner{display:flex}
  .kopf-cta{display:none}
  .kopf-in{grid-template-columns:1fr auto}
  .mission,.abend,.partner,.fair-in{grid-template-columns:1fr}
  .eckdaten{grid-template-columns:repeat(2,1fr);gap:20px 28px}
  .kat{grid-template-columns:clamp(56px,12vw,80px) 1fr;gap:16px}
  .kat .rein{display:none}
  .gewinner{grid-template-columns:clamp(120px,26vw,180px) 1fr}
}
@media(max-width:620px){
  .jury{grid-template-columns:repeat(2,1fr)}
  .ablauf{grid-template-columns:1fr}
  .formkasten{grid-template-columns:1fr}
  .eckdaten{grid-template-columns:1fr 1fr;gap:16px 20px}
  .karte{grid-template-columns:1fr}
  .gewinner{grid-template-columns:1fr}
  .knopf{width:100%;justify-content:space-between}
  .fk .knopf{width:100%}
  .fuss-in{flex-direction:column;align-items:flex-start;gap:4px}
  .fuss a{margin-left:0;padding:11px 0}
  :root{--muster:200px 282px}
}
@media(max-width:820px){
  .hero .muster{opacity:.45}
  .vorhang{inset:-6% -6% -4% 0}
}
@media(prefers-reduced-motion:reduce){
  /* Der Stern allein trifft keine Pseudo-Elemente. Ohne ::before und
     ::after liefe der Vorhang trotz abgeschalteter Bewegung weiter. */
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .ein{opacity:1;transform:none}
}


/* ===================================================================
   Ergänzungen für WordPress

   Oben steht die Gestaltung, wie sie auch im statischen Entwurf steht.
   Hier darunter kommt nur dazu, was der Block-Editor an eigenem Gerüst
   mitbringt: die Kern-Blöcke bekommen dasselbe Aussehen wie die von
   Hand geschriebenen Elemente.
   =================================================================== */
.wp-block-group{margin-block:0}
.entry-content > *{margin-block:0}
.alignwide,.alignfull{max-width:none}
.aligncenter{margin-left:auto;margin-right:auto}
.wp-block-image{margin:0}
.wp-block-image img{width:100%;height:auto;display:block}

/* Abstände zwischen Blöcken innerhalb unserer Abschnitte */
.tafel .bahn > * + *,.fair-in > * + *{margin-top:22px}
.tafel .bahn > .marke-zeile + *{margin-top:0}
/* Die vier Schritte bekommen oben und unten mehr Luft, damit sie sich
   von der Überschrift und vom Jury-Raster darunter absetzen. */
.tafel .bahn > .ablauf-liste{margin-top:clamp(40px,5vw,66px)}

/* Knöpfe aus dem Button-Block sehen aus wie .knopf */
.wp-block-buttons{margin:0;display:flex;flex-wrap:wrap;gap:14px}
.hero-in .wp-block-buttons{margin-top:clamp(32px,3.6vw,46px)}
.wp-block-button__link{display:inline-flex;align-items:center;gap:14px;text-decoration:none;border:0;
  font-family:inherit;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:19px 30px;border-radius:0;background:var(--v700);color:#fff;transition:background .22s}
.wp-block-button__link:hover{background:var(--v900)}
.wp-block-button__link::after{content:"→";transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.wp-block-button__link:hover::after{transform:translateX(6px)}
.wp-block-button.is-style-hell .wp-block-button__link{background:var(--papier);color:var(--tief)}
.wp-block-button.is-style-hell .wp-block-button__link:hover{background:#fff}

/* Hinweise, die nur im Editor sichtbar sind */
.glta-editor-hinweis{display:none}
.editor-styles-wrapper .glta-editor-hinweis{display:block}

/* -------------------------------------------------------------------
   Kern-Blöcke in unser Aussehen bringen
   ------------------------------------------------------------------- */

/* Zitatkachel: der Quote-Block sitzt in unserer .zitat-Fläche */
.zitat .wp-block-quote{border:0;margin:0;padding:0;position:relative;z-index:2;
  font-size:clamp(19px,2.2vw,27px);font-weight:700;letter-spacing:-.03em;line-height:1.24}
.zitat .wp-block-quote p{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}
.zitat .quelle{position:relative;z-index:2;margin-top:20px;font-size:12px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--v400)}
.zitat-verlauf .quelle{color:rgba(255,255,255,.86)}

/* Die drei Kernaussagen — entspricht der Liste .saeulen im Entwurf.
   Die Buchstaben zählt der Browser, damit die Liste im Editor eine
   ganz normale Liste bleibt. */
.saeulen-liste{counter-reset:saeule;list-style:none;margin:clamp(30px,4vw,48px) 0 0;padding:0}
.saeulen-liste li{counter-increment:saeule;position:relative;
  padding:22px 0 22px clamp(38px,4.4vw,54px);border-top:1px solid var(--linie-hell);
  font-size:16px;font-weight:500;color:var(--papier-88);line-height:1.55}
.saeulen-liste li:last-child{border-bottom:1px solid var(--linie-hell)}
.saeulen-liste li::before{content:counter(saeule,upper-alpha);position:absolute;left:0;top:24px;
  font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--v400)}
.saeulen-liste strong{display:block;color:#fff;font-size:17.5px;font-weight:800;
  letter-spacing:-.02em;margin-bottom:5px}
/* Auf hellem Grund — etwa auf der Nominierungsseite */
.tafel:not(.auf-dunkel) .saeulen-liste li{border-color:var(--linie);color:var(--tinte-72)}
.tafel:not(.auf-dunkel) .saeulen-liste li::before{color:var(--v700)}
.tafel:not(.auf-dunkel) .saeulen-liste strong{color:var(--tinte)}

/* Die vier Prozessschritte — entspricht .ablauf im Entwurf */
.ablauf-liste{list-style:none;margin:0 0 clamp(76px,9.5vw,132px);padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 clamp(16px,2.4vw,32px);
  border-top:1px solid var(--linie)}
.ablauf-liste li{padding:22px 24px 0 0;position:relative;font-size:16.5px;font-weight:700;
  letter-spacing:-.02em;line-height:1.28}
.ablauf-liste li::before{content:"";position:absolute;top:-1px;left:0;width:38px;height:3px;
  background:var(--v700)}
.ablauf-liste strong{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;
  color:var(--v700);margin-bottom:10px;text-transform:uppercase}

/* Bedingungen unter den Kategorien — entspricht .bedingungen */
.bedingungen-liste{list-style:none;margin:clamp(28px,3.4vw,40px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:12px 40px;font-size:14px}
.bedingungen-liste strong{display:block;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  font-size:11.5px;color:var(--v700);margin-bottom:5px}

/* Hinweis über der vorausgewählten Kategorie */
.kat-hinweis{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--v700);margin-bottom:14px}
.kat-hinweis b{display:block;font-size:16px;letter-spacing:-.01em;text-transform:none;
  color:var(--tinte);margin-top:4px}

@media(max-width:1080px){ .ablauf-liste li{padding-bottom:22px} }
@media(max-width:620px){ .ablauf-liste{grid-template-columns:1fr} }