/* =====================================================================
   tafel.css
   Die gemeinsame Grundlage fuer alle neu gestalteten Seiten.
   Angelegt am 23.09.2026.

   Vorgeschichte: Die Seiten waren zuerst im ruhigen Schwarz-Weiss
   gehalten. Das war der Community zu hart. Vorbild ist jetzt die
   Spendenseite aus dem Stream: der blaue Seitenverlauf bleibt
   sichtbar, der Inhalt sitzt auf einer dunklen, leicht
   durchscheinenden Tafel mit weichem Rand und Schatten, Poppins als
   Schrift, Farbe ist erlaubt.

   Wer eine Seite umstellt, bindet diese Datei ein und gibt dem
   aeusseren Kasten die Klasse "tafel". Alles andere kommt aus den
   Werten hier, damit die naechste Aenderung dieser Art nur eine
   Datei betrifft und nicht zehn.

       <link rel="stylesheet" href="/assets/css/tafel.css">
       <div class="tafel"> ... </div>
   ===================================================================== */

:root{
  /* Flaechen */
  --tf-tafel-1:rgba(10,16,28,.72);
  --tf-tafel-2:rgba(6,10,18,.82);
  --tf-innen:rgba(255,255,255,.04);
  --tf-innen-tief:rgba(0,0,0,.26);

  /* Schrift */
  --tf-text:#FFFFFF;
  --tf-leise:#B6C4D4;
  --tf-stumm:#8195A9;

  /* Linien */
  --tf-linie:rgba(255,255,255,.12);
  --tf-rand:rgba(0,255,255,.16);
  --tf-rand-hell:rgba(0,255,255,.45);

  /* Farben mit Bedeutung */
  --tf-kasse:#00FFFF;      /* Handel, Aktion, Knoepfe */
  --tf-blau:#8AA8FF;
  --tf-orange:#FF8A3D;
  --tf-gelb:#FFCC33;
  --tf-gold:#FFD700;
  --tf-rot:#FF6B6B;
  --tf-gruen:#5BE49B;

  --tf-schrift:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* =====================================================================
   Die Tafel
   ===================================================================== */
.tafel{
  width:100%;max-width:1000px;
  margin:clamp(16px,3vw,32px) auto clamp(24px,4vw,48px);
  padding:clamp(28px,5vw,48px) clamp(18px,4vw,36px) clamp(36px,6vw,56px);

  font-family:var(--tf-schrift);
  color:var(--tf-text);
  font-size:17px;line-height:1.7;letter-spacing:normal;text-align:left;

  background:linear-gradient(180deg, var(--tf-tafel-1) 0%, var(--tf-tafel-2) 100%);
  border:1px solid var(--tf-rand);
  border-radius:20px;
  box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.tafel *{box-sizing:border-box;letter-spacing:normal}

/* main bringt aus style.css 2rem Polster und align-items:center mit.
   Beides ist hier richtig, die Tafel soll ja mittig stehen und Luft
   ringsum haben. Nur zu schmal darf sie nicht werden. */
main:has(> .tafel){width:100%}

/* Die Ueberschriften der alten Seite bringen Neon und Grossbuchstaben
   mit. Auf der Tafel gilt die ruhige Fassung. */
.tafel h1,.tafel h2,.tafel h3,.tafel h4{
  font-family:var(--tf-schrift) !important;
  text-transform:none !important;
  text-shadow:none !important;
  animation:none !important;
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
  color:var(--tf-text);
  line-height:1.15;margin:0 0 .6rem;
}
.tafel h1{
  font-size:clamp(1.9rem,5.5vw,2.8rem);font-weight:700;
  text-shadow:0 2px 20px rgba(0,255,255,.16) !important;
}
.tafel h2{font-size:clamp(1.4rem,3.6vw,2rem);font-weight:600}
.tafel h3{font-size:clamp(1.15rem,2.6vw,1.4rem);font-weight:600}
.tafel p{margin:0 0 1rem;color:var(--tf-leise)}
.tafel a{color:var(--tf-kasse);text-decoration:none}
.tafel a:hover{text-decoration:underline}

/* Kleine Beschriftung ueber einem Abschnitt, mit auslaufender Linie */
.tafel .tf-label{
  display:flex;align-items:center;gap:.9rem;
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tf-stumm);margin:0 0 14px;
}
.tafel .tf-label::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg, rgba(0,255,255,.3), rgba(0,255,255,0));
}

/* =====================================================================
   Kaesten auf der Tafel
   ===================================================================== */
.tf-kasten{
  background:var(--tf-innen);
  border:1px solid var(--tf-linie);
  border-radius:14px;
  padding:16px 18px;
  transition:border-color .25s ease, box-shadow .3s ease, transform .2s ease;
}
.tf-kasten:hover{
  border-color:var(--tf-rand-hell);
  box-shadow:0 10px 26px rgba(0,0,0,.45), 0 0 22px rgba(0,255,255,.14);
}
.tf-kasten.tf-klickbar{cursor:pointer}
.tf-kasten.tf-klickbar:hover{transform:translateY(-3px)}

/* =====================================================================
   Bedienteile
   ===================================================================== */
.tf-feld{
  width:100%;
  background:var(--tf-innen-tief);
  border:1px solid var(--tf-linie);
  border-radius:12px;color:var(--tf-text);
  font-family:var(--tf-schrift);font-size:15px;line-height:1.6;
  padding:14px 16px;outline:none;
  transition:border-color .2s, box-shadow .25s, background .2s;
}
.tf-feld::placeholder{color:var(--tf-stumm)}
.tf-feld:focus{
  border-color:var(--tf-rand-hell);background:rgba(0,0,0,.34);
  box-shadow:0 0 0 3px rgba(0,255,255,.1);
}

.tf-knopf{
  position:relative;overflow:hidden;display:inline-block;
  background:linear-gradient(135deg,#7DFFF6 0%,#00FFFF 35%,#00A8CC 100%);
  border:none;border-radius:12px;color:#062026;
  font-family:var(--tf-schrift);font-size:16px;font-weight:700;
  padding:14px 26px;cursor:pointer;text-decoration:none;text-align:center;
  box-shadow:0 12px 30px rgba(0,0,0,.45), 0 0 24px rgba(0,255,255,.24);
  transition:transform .15s ease, box-shadow .3s ease, filter .3s ease;
}
.tf-knopf:hover{
  transform:translateY(-2px);text-decoration:none;
  box-shadow:0 16px 38px rgba(0,0,0,.5), 0 0 38px rgba(0,255,255,.45);
  filter:brightness(1.04);
}
.tf-knopf:active{transform:translateY(0)}
.tf-knopf:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;filter:grayscale(.5)}

.tf-knopf-leise{
  display:inline-block;
  background:transparent;color:var(--tf-text);
  border:1px solid var(--tf-linie);border-radius:12px;
  font-family:var(--tf-schrift);font-size:15px;font-weight:500;
  padding:12px 22px;cursor:pointer;text-decoration:none;text-align:center;
  transition:border-color .2s,color .2s,background .2s;
}
.tf-knopf-leise:hover{
  border-color:var(--tf-rand-hell);color:var(--tf-kasse);
  background:rgba(0,255,255,.06);text-decoration:none;
}

/* Kleine Kennzeichnung, zum Beispiel eine Stufe oder ein Zustand */
.tf-marke{
  display:inline-block;
  font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:.16rem .5rem;border-radius:4px;
  border:1px solid var(--tf-linie);color:var(--tf-stumm);
}
.tf-marke.tf-kasse{border-color:rgba(0,255,255,.45);color:var(--tf-kasse);background:rgba(0,255,255,.08)}
.tf-marke.tf-gold{border-color:rgba(255,215,0,.45);color:var(--tf-gold);background:rgba(255,215,0,.08)}
.tf-marke.tf-rot{border-color:rgba(255,107,107,.45);color:var(--tf-rot);background:rgba(255,107,107,.08)}

/* =====================================================================
   Der Seitenkopf bleibt oben stehen.
   overflow-x hidden auf html und body macht daraus einen Scrollbereich
   und hebelt position sticky aus. clip verhindert dasselbe, ohne einen
   Scrollbereich zu erzeugen. Steht auch in style.css, hier noch einmal
   als Netz fuer den Fall, dass es dort wieder herausfaellt.
   ===================================================================== */
html.tf-clip{overflow-x:clip !important}
body.tf-seite{overflow-x:clip !important}
body.tf-seite > header{position:sticky !important;top:0 !important;z-index:1000 !important}

@media (max-width:600px){
  .tafel{
    border-radius:16px;font-size:16px;
    padding:22px 16px 30px;
  }
}
@media (prefers-reduced-motion:reduce){
  .tafel *{transition:none !important;animation:none !important}
  .tf-kasten.tf-klickbar:hover,.tf-knopf:hover{transform:none}
}