/* =====================================================================
   hall-of-fame.css
   Die Ehrentafel. Angelegt am 22.09.2026, neu gemacht am selben Tag.

   Der erste Versuch war im ruhigen Stil der Medienseiten gehalten. Das
   ist hier falsch: auf dieser Seite soll man stehen wollen. Sie ist
   kein Katalog, sie ist eine Auszeichnung. Darum die Sprache des
   Adventskalenders: warmes Gold auf tiefer Nacht, Leuchtschrift mit
   mehreren Schatten, Tafeln mit Rahmen und Schlagschatten, Oswald in
   Versalien fuer die grossen Zeilen, IBM Plex Mono gesperrt fuer die
   kleinen Angaben.

   Die Farben sind dieselben wie in advent2026/assets/css/advent.css,
   damit die beiden Seiten zusammengehoeren.

   Die alte Gestaltung steht in hall-of-fame.php weiter drin, ist dort
   aber mit if (false) abgeschaltet.
   ===================================================================== */

:root{
  --hof-nacht:#070A0F;
  --hof-nacht-2:#0C1119;
  --hof-tafel-1:#1B1710;
  --hof-tafel-2:#100D09;
  --hof-gold:#F7C874;
  --hof-gold-hell:#FFE9B8;
  --hof-gold-tief:#DE8C33;
  --hof-gold-schein:rgba(247,200,116,.55);
  --hof-schnee:#E9F0F8;
  --hof-frost:#8CA4BE;
  --hof-stumm:#78899E;
  --hof-kante:rgba(247,200,116,.28);
}

.hof-seite{
  position:relative;
  font-family:"Public Sans","Archivo",Arial,sans-serif;
  color:var(--hof-schnee);
  font-size:18px;line-height:1.7;letter-spacing:normal;text-align:center;
  width:100%;max-width:1180px;margin:0 auto;
  padding:clamp(2rem,5vw,4rem) clamp(16px,4vw,32px) clamp(3rem,7vw,5rem);
  min-height:80vh;

  /* Tiefe Nacht mit einem warmen Licht von oben, wie ein
     ausgeleuchteter Saal. Ueber die volle Fensterbreite, damit der
     blaue Seitenverlauf aus style.css nichts durchscheinen laesst. */
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(247,200,116,.16) 0%, rgba(247,200,116,0) 60%),
    radial-gradient(70% 50% at 50% 100%, rgba(78,223,240,.05) 0%, rgba(78,223,240,0) 70%),
    linear-gradient(180deg, var(--hof-nacht-2) 0%, var(--hof-nacht) 45%, #05070B 100%);
  box-shadow:0 0 0 100vmax var(--hof-nacht);
  clip-path:inset(0 -100vmax);
}
.hof-seite *{box-sizing:border-box;letter-spacing:normal}
.hof-seite h1,.hof-seite h2,.hof-seite h3{
  font-family:"Oswald",Impact,"Archivo",sans-serif !important;
  text-shadow:none;animation:none;background:none;
  -webkit-text-fill-color:currentColor;
}
main.hof-main{padding:0 !important;width:100%;max-width:100%}
main:has(> .hof-seite){padding:0;width:100%}

/* overflow-x hidden auf html und body macht daraus einen Scrollbereich
   und hebelt den klebenden Seitenkopf aus, siehe community-chat.css. */
html.hof-clip{overflow-x:clip !important}
body.hof-seite-an{overflow-x:clip !important}
body.hof-seite-an > header{
  position:sticky !important;top:0 !important;z-index:1000 !important;
}

/* Feiner Lichtstaub im Saal, sehr zurueckhaltend */
.hof-seite::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(247,200,116,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 12%, rgba(247,200,116,.35), transparent 60%),
    radial-gradient(1px 1px at 34% 42%, rgba(255,233,184,.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 55%, rgba(247,200,116,.3), transparent 60%),
    radial-gradient(1px 1px at 22% 72%, rgba(255,233,184,.3), transparent 60%),
    radial-gradient(1.5px 1.5px at 62% 84%, rgba(247,200,116,.25), transparent 60%);
}
.hof-seite > *{position:relative;z-index:1}

/* =====================================================================
   Kopf: Leuchtschrift
   ===================================================================== */
.hof-hero{
  padding:0 0 clamp(2rem,4vw,3rem);
  background:none;text-align:center;
}
.hof-hero::before{content:none}

.hof-marke{
  margin:0 0 1.1rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--hof-gold);text-shadow:0 0 12px var(--hof-gold-schein);
}

.hof-hero h1{
  margin:0 0 1.4rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(2.4rem,8vw,5.4rem);line-height:.95;
  color:#FFF6E0;
  text-shadow:
    0 0 6px #FFD678,
    0 0 16px #FFB020,
    0 0 36px #FF8A00,
    0 3px 0 #7A3A00,
    0 8px 30px rgba(0,0,0,.8);
}

/* Der Brief von Max. Er soll lesbar bleiben und dem Gold nicht die
   Schau stehlen, steht darum auf einer ruhigen dunklen Tafel. */
.hof-brief{
  max-width:64ch;margin:2.2rem auto 0;
  padding:clamp(1.4rem,3vw,2.2rem) clamp(1.2rem,3vw,2.4rem);
  text-align:left;
  background:linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.02) 100%);
  border:1px solid rgba(247,200,116,.16);
  border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,233,184,.08);
}
.hof-hero p{
  margin:0 0 1rem;font-size:1.04rem;line-height:1.78;color:#D9E3EF;
}
.hof-hero p:last-child{margin-bottom:0}
.hof-hero p strong{color:var(--hof-gold-hell);font-weight:600}
.hof-hero p a{color:var(--hof-gold);text-decoration:none;border-bottom:1px solid currentColor}
.hof-brief p:first-child{
  font-family:"Oswald",Impact,sans-serif;font-weight:500;
  font-size:clamp(1.2rem,2.6vw,1.6rem);line-height:1.25;
  text-transform:uppercase;letter-spacing:.02em;
  color:#FFF6E0;text-shadow:0 0 14px rgba(247,200,116,.35);
  margin-bottom:1.3rem;
}
.hof-brief p:last-child{
  margin-top:1.6rem;
  font-family:"Oswald",Impact,sans-serif;font-size:1.2rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--hof-gold);
  text-shadow:0 0 14px var(--hof-gold-schein);
}

/* =====================================================================
   Zaehler-Tafeln
   ===================================================================== */
.hof-tafeln{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;
  margin:2.4rem 0 0;
}
.hof-tafel{
  min-width:170px;padding:1rem 1.4rem;
  background:linear-gradient(180deg, var(--hof-tafel-1) 0%, var(--hof-tafel-2) 100%);
  border:1px solid var(--hof-kante);border-radius:10px;
  box-shadow:0 10px 26px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,233,184,.12);
}
.hof-tafel-zahl{
  font-family:"Oswald",Impact,sans-serif;font-weight:700;
  font-size:clamp(1.8rem,4vw,2.6rem);line-height:1;
  color:#FFF6E0;
  text-shadow:0 0 10px #FFD678, 0 0 24px rgba(255,176,32,.7);
  font-variant-numeric:tabular-nums;
}
.hof-tafel-wort{
  margin-top:.35rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--hof-frost);
}

/* =====================================================================
   Das Scheinwerferfeld
   Einer nach dem anderen kommt ins Licht, wie beim Automaten die
   Walze, die stehen bleibt. Alle paar Sekunden wechselt der Name,
   mit dem Knopf darunter kann man selbst weiterdrehen.
   ===================================================================== */
.hof-buehne{
  position:relative;overflow:hidden;
  margin:2.6rem auto 0;max-width:720px;
  padding:clamp(1.8rem,4vw,2.8rem) clamp(1.2rem,3vw,2rem) clamp(1.4rem,3vw,2rem);
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(247,200,116,.20) 0%, rgba(247,200,116,0) 70%),
    linear-gradient(180deg, #14100A 0%, #0A0806 100%);
  border:1px solid rgba(247,200,116,.3);
  border-radius:16px;
  box-shadow:0 22px 60px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,233,184,.14);
}
/* Der Lichtkegel von oben */
.hof-buehne::before{
  content:"";position:absolute;left:50%;top:-8%;
  width:74%;height:150%;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 0%, rgba(255,233,184,.16) 0%, rgba(255,233,184,0) 70%);
  pointer-events:none;
}
.hof-buehne-marke{
  position:relative;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--hof-gold);text-shadow:0 0 12px var(--hof-gold-schein);
}
.hof-buehne-feld{
  position:relative;min-height:190px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:1.2rem 0 .4rem;
}
.hof-buehne-bild{
  width:88px;height:88px;border-radius:50%;object-fit:cover;background:#0E1218;
  border:2px solid var(--hof-gold);
  box-shadow:0 0 30px rgba(247,200,116,.45), inset 0 0 14px rgba(0,0,0,.7);
}
.hof-buehne-name{
  margin-top:.9rem;
  font-family:"Oswald",Impact,sans-serif;font-weight:700;
  font-size:clamp(1.6rem,5vw,2.6rem);line-height:1.05;
  text-transform:uppercase;letter-spacing:.03em;color:#FFF6E0;
  text-shadow:0 0 8px #FFD678, 0 0 22px #FFB020, 0 3px 0 #7A3A00;
  text-align:center;
}
.hof-buehne-zeile{
  margin-top:.55rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--hof-frost);
}
.hof-buehne-zeile b{color:var(--hof-gold);font-weight:600}

/* Der Wechsel: kurz ausblenden, leicht nach oben, wie eine Walze */
.hof-buehne-feld.hof-dreht .hof-buehne-bild,
.hof-buehne-feld.hof-dreht .hof-buehne-name,
.hof-buehne-feld.hof-dreht .hof-buehne-zeile{
  animation:hofWalze .34s ease-in;
}
@keyframes hofWalze{
  0%{opacity:1;transform:translateY(0)}
  45%{opacity:0;transform:translateY(-14px)}
  55%{opacity:0;transform:translateY(14px)}
  100%{opacity:1;transform:translateY(0)}
}

.hof-buehne-knopf{
  position:relative;margin-top:1rem;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.5rem 1.3rem;cursor:pointer;
  font-family:"Oswald",Impact,sans-serif;font-weight:500;
  font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  color:#FFE9B8;background:rgba(247,200,116,.08);
  border:1px solid rgba(247,200,116,.4);border-radius:999px;
  transition:background .25s ease,border-color .25s ease,transform .15s ease;
}
.hof-buehne-knopf:hover{background:rgba(247,200,116,.16);border-color:var(--hof-gold);transform:scale(1.03)}
.hof-buehne-knopf:active{transform:scale(.97)}

/* Die Lämpchen zeigen, wo man gerade ist */
.hof-lampen{display:flex;gap:.35rem;justify-content:center;margin-top:.9rem;flex-wrap:wrap}
.hof-lampe{
  width:7px;height:7px;border-radius:50%;
  background:rgba(247,200,116,.22);transition:background .3s ease,box-shadow .3s ease;
}
.hof-lampe.an{background:var(--hof-gold);box-shadow:0 0 10px var(--hof-gold-schein)}

/* =====================================================================
   Die Namen
   ===================================================================== */
.supporter-section{padding:clamp(2.6rem,6vw,4.2rem) 0 0;background:none}
.supporter-section::before{content:none}

.section-title{
  margin:0 0 1.8rem;
  font-family:"Oswald",Impact,sans-serif;font-weight:500;
  font-size:clamp(1.1rem,2.4vw,1.5rem);
  letter-spacing:.24em;text-transform:uppercase;text-align:center;
  color:var(--hof-gold-hell);
  text-shadow:0 0 14px var(--hof-gold-schein);
  position:relative;
}
/* Zwei Linien links und rechts vom Titel, wie eine Gravur */
.section-title::after{
  content:"";display:block;width:120px;height:2px;margin:.9rem auto 0;
  background:linear-gradient(90deg, transparent, var(--hof-gold), transparent);
  box-shadow:0 0 12px var(--hof-gold-schein);
}

.supporters-grid{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}

/* Eine Namenstafel */
.supporter-card{
  position:relative;overflow:hidden;
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  column-gap:1rem;row-gap:0;align-items:center;
  padding:1.1rem 1.2rem;text-align:left;
  background:linear-gradient(180deg, var(--hof-tafel-1) 0%, var(--hof-tafel-2) 100%);
  border:1px solid var(--hof-kante);
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,233,184,.1);
  transition:transform .18s ease, box-shadow .3s ease, border-color .3s ease;
}
.supporter-card::before{content:none}
.supporter-card:hover{
  transform:translateY(-3px) scale(1.015);
  border-color:rgba(247,200,116,.6);
  box-shadow:0 18px 44px rgba(0,0,0,.65),
             0 0 24px rgba(247,200,116,.22),
             inset 0 1px 0 rgba(255,233,184,.16);
}

.supporter-avatar{
  grid-row:1 / span 3;grid-column:1;
  width:64px;height:64px;border-radius:50%;object-fit:cover;
  background:#0E1218;
  border:2px solid rgba(247,200,116,.45);
  box-shadow:0 0 16px rgba(247,200,116,.25), inset 0 0 12px rgba(0,0,0,.6);
  transform:none;
}
.supporter-card:hover .supporter-avatar{
  border-color:var(--hof-gold);
  box-shadow:0 0 22px rgba(247,200,116,.5), inset 0 0 12px rgba(0,0,0,.6);
  transform:none;
}

.supporter-name{
  grid-column:2;align-self:end;
  font-family:"Oswald",Impact,sans-serif;font-weight:500;
  font-size:1.18rem;line-height:1.2;letter-spacing:.01em;
  color:#FFF6E0;text-shadow:0 1px 10px rgba(0,0,0,.6);
  overflow-wrap:anywhere;
}
.supporter-tier{
  grid-column:2;
  margin-top:.28rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--hof-gold);
  display:inline-block;justify-self:start;
  padding:.16rem .5rem;
  border:1px solid rgba(247,200,116,.35);border-radius:3px;
  background:rgba(247,200,116,.07);
}
.supporter-since{
  grid-column:2;align-self:start;
  margin-top:.4rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--hof-stumm);font-variant-numeric:tabular-nums;
}

/* VIP: hellere Tafel, kraeftigeres Gold, ein langsamer Glanz laeuft
   darueber. Wer das sieht, soll es haben wollen. */
.supporter-card.vip{
  background:linear-gradient(180deg, #2A2114 0%, #171108 100%);
  border-color:rgba(247,200,116,.55);
  box-shadow:0 14px 36px rgba(0,0,0,.6),
             0 0 22px rgba(247,200,116,.18),
             inset 0 1px 0 rgba(255,233,184,.18);
}
.supporter-card.vip::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg, transparent 0%, rgba(255,233,184,.16) 50%, transparent 100%);
  transform:skewX(-18deg);
  animation:hofGlanz 5.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes hofGlanz{
  0%,70%{left:-60%}
  100%{left:130%}
}
.supporter-card.vip .supporter-avatar{
  border-color:var(--hof-gold);
  box-shadow:0 0 22px rgba(247,200,116,.45), inset 0 0 12px rgba(0,0,0,.6);
}
.supporter-card.vip .supporter-name{
  color:#FFF6E0;
  text-shadow:0 0 12px rgba(247,200,116,.45), 0 1px 10px rgba(0,0,0,.6);
}
.supporter-card.vip .supporter-tier{
  color:#1A1206;background:linear-gradient(180deg, var(--hof-gold-hell), var(--hof-gold-tief));
  border-color:transparent;font-weight:600;
  text-shadow:none;
}
.supporter-card.vip:hover{
  border-color:var(--hof-gold-hell);
  box-shadow:0 20px 48px rgba(0,0,0,.7),
             0 0 34px rgba(247,200,116,.35),
             inset 0 1px 0 rgba(255,233,184,.24);
}

.hof-leer{
  grid-column:1 / -1;padding:2.5rem 0;text-align:center;
  font-family:"Oswald",Impact,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hof-stumm);font-size:1rem;
}

/* =====================================================================
   Aufruf am Ende
   ===================================================================== */
.cta-section{
  margin-top:clamp(3rem,7vw,5rem);
  padding:clamp(2.2rem,5vw,3.4rem) clamp(1.2rem,3vw,2.4rem);
  text-align:center;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(247,200,116,.1) 0%, rgba(247,200,116,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.015) 100%);
  border:1px solid rgba(247,200,116,.2);
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,233,184,.1);
}
.cta-section::before{content:none}
.cta-title{
  margin:0 0 .8rem;
  font-family:"Oswald",Impact,sans-serif;font-weight:700;
  font-size:clamp(1.6rem,4.4vw,2.8rem);line-height:1.05;
  text-transform:uppercase;letter-spacing:.03em;
  color:#FFF6E0;
  text-shadow:0 0 6px #FFD678, 0 0 18px #FFB020, 0 3px 0 #7A3A00;
}
.cta-text{
  margin:0 auto 1.8rem;max-width:56ch;
  font-size:1.05rem;line-height:1.7;color:#D9E3EF;
}
.cta-buttons{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center}

.cta-btn{
  display:inline-block;position:relative;
  padding:.85rem 2.1rem;border-radius:8px;
  font-family:"Oswald",Impact,sans-serif;font-weight:700;
  font-size:1.02rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;
  color:#1A1206;
  background:linear-gradient(180deg, var(--hof-gold-hell) 0%, var(--hof-gold) 45%, var(--hof-gold-tief) 100%);
  border:1px solid rgba(255,233,184,.6);
  box-shadow:0 10px 26px rgba(0,0,0,.55), 0 0 22px rgba(247,200,116,.3);
  transition:transform .15s ease, box-shadow .3s ease, filter .3s ease;
}
.cta-btn:hover{
  transform:scale(1.04);
  box-shadow:0 12px 32px rgba(0,0,0,.6), 0 0 34px rgba(247,200,116,.55);
  filter:brightness(1.06);
}
.cta-btn:active{transform:scale(.98)}

.cta-btn.secondary{
  background:transparent;color:#E9F0F8;
  border:1px solid rgba(233,240,248,.28);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.cta-btn.secondary:hover{
  border-color:var(--hof-gold);color:var(--hof-gold-hell);
  box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 20px rgba(247,200,116,.25);
  filter:none;
}

.cta-hinweis{
  margin:1.8rem auto 0;max-width:56ch;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.12em;line-height:1.9;
  color:var(--hof-stumm);text-transform:uppercase;
}

/* =====================================================================
   Kleine Fenster
   ===================================================================== */
@media (max-width:720px){
  .hof-seite{font-size:17px}
  .supporters-grid{grid-template-columns:1fr}
  .hof-tafel{min-width:0;flex:1 1 140px;padding:.85rem 1rem}
  .cta-btn{width:100%;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .hof-seite *{transition:none !important;animation:none !important}
  .supporter-card:hover{transform:none}
  .cta-btn:hover{transform:none}
  .supporter-card.vip::after{display:none}
}