:root {
  --rot: #d52b1e;
  --rot-dunkel: #a81f15;
  --creme: #fffaf0;
  --papier-rand: #ece0cb;
  --tinte: #2b1d14;
  --tinte-2: #6b5545;
  --gold: #e2a03a;
  --tanne: #1f5c3f;
  --schrift-titel: "Alfa Slab One", Georgia, serif;
  --schrift-hand: "Caveat", "Segoe Print", cursive;
  --schrift-text: "Nunito Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: #fbf6ee;
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

/* ---------- Hintergrund: rot-weiss karierte Beizen-Tischdecke ---------- */
.ansicht {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
  background-color: #fbf6ee;
  background-image:
    radial-gradient(ellipse at center, transparent 30%, rgba(70, 15, 8, .5) 100%),
    linear-gradient(90deg, rgba(213, 43, 30, .42) 50%, transparent 0),
    linear-gradient(rgba(213, 43, 30, .42) 50%, transparent 0);
  background-size: 100% 100%, 56px 56px, 56px 56px;
}

/* ---------- Karte (wie eine Menükarte) ---------- */
.karte {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  background: var(--creme);
  border-radius: 24px;
  padding: 36px 32px 30px;
  text-align: center;
  box-shadow: 0 30px 70px rgba(70, 15, 8, .38);
  outline: 2px dashed rgba(213, 43, 30, .3);
  outline-offset: -12px;
  animation: auftauchen .45s ease-out;
}

.karte-schmal { max-width: 440px; }

@keyframes auftauchen {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.karte-kopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.flagge { width: 30px; height: 30px; }

.schild {
  background: #fff;
  border: 2px solid var(--tinte);
  border-radius: 5px;
  padding: 0 8px;
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .08em;
  line-height: 1.6;
}

.exil {
  font-family: var(--schrift-hand);
  font-size: 1.35rem;
  color: var(--tinte-2);
  margin-left: 2px;
}

.cordon {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 8px auto 2px;
}

.dampf path { animation: dampfen 3s ease-in-out infinite; }
.dampf path:nth-child(2) { animation-delay: .8s; }
.dampf path:nth-child(3) { animation-delay: 1.6s; }

@keyframes dampfen {
  0%   { opacity: 0; transform: translateY(6px); }
  40%  { opacity: .9; }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* ---------- Text ---------- */
.hoi {
  font-family: var(--schrift-hand);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--rot);
  margin: 0;
  transform: rotate(-3deg);
}

h1, h2 {
  font-family: var(--schrift-titel);
  font-weight: 400;
  line-height: 1.05;
  color: var(--tinte);
}

h1 { font-size: clamp(2.1rem, 8vw, 3rem); margin: .2em 0 .35em; }
h2 { font-size: 1.8rem; margin: .3em 0; }

.lead {
  color: var(--tinte-2);
  margin: 0 auto 26px;
  max-width: 30em;
}

.kicker {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 800;
  font-size: .8rem;
  color: var(--rot);
  margin: 22px 0 0;
}

/* ---------- Knöpfe ---------- */
.knoepfe { display: grid; gap: 14px; }

.knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 22px;
  border: 2px solid transparent;
  border-radius: 14px;
  font-family: inherit;
  font-weight: 800;
  font-size: 1.08rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s;
}

.knopf:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.knopf-rot {
  background: var(--rot);
  color: #fff;
  box-shadow: 0 4px 0 var(--rot-dunkel);
}

.knopf-rand {
  background: #fff;
  color: var(--tinte);
  border-color: var(--tinte);
  box-shadow: 0 4px 0 var(--tinte);
}

.knopf-kaese {
  background: #ffd34d;
  color: var(--tinte);
  box-shadow: 0 4px 0 #c99a12;
}

.knopf:hover { transform: translateY(-2px); }
.knopf-kaese:hover { box-shadow: 0 6px 0 #c99a12; background: #ffdb6b; }
.knopf-rot:hover { box-shadow: 0 6px 0 var(--rot-dunkel); }
.knopf-rand:hover { box-shadow: 0 6px 0 var(--tinte); background: #fff7e6; }
.knopf:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tinte); }
.knopf:disabled { opacity: .7; cursor: wait; transform: none; }

.knopf-klein {
  display: inline-flex;
  width: auto;
  padding: 10px 20px;
  font-size: .95rem;
}

.chips {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.chips li {
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--tinte-2);
}

/* ---------- Login ---------- */
.zurueck {
  position: absolute;
  top: 22px;
  left: 26px;
  color: var(--tinte-2);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
}

.zurueck:hover { color: var(--rot); }

.symbol { font-size: 2.6rem; margin-top: 18px; }

.label {
  display: block;
  text-align: left;
  font-weight: 800;
  font-size: .9rem;
  margin-bottom: 6px;
}

input[type="password"] {
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 14px;
  font-family: inherit;
  font-size: 1.1rem;
  color: var(--tinte);
  background: #fff;
  border: 2px solid var(--papier-rand);
  border-radius: 12px;
}

input[type="password"]:focus {
  outline: none;
  border-color: var(--rot);
  box-shadow: 0 0 0 4px rgba(213, 43, 30, .15);
}

.fehler {
  margin: -4px 0 14px;
  color: var(--rot-dunkel);
  font-weight: 700;
}

.wackeln { animation: wackeln .4s; }

@keyframes wackeln {
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

.trenner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 14px;
  color: var(--tinte-2);
  font-size: .9rem;
  font-weight: 700;
}

.trenner::before,
.trenner::after {
  content: "";
  flex: 1;
  border-top: 1px dashed var(--papier-rand);
}

/* ---------- Widgets auf der Startseite ---------- */
.ansicht-start { position: relative; align-content: center; overflow-x: clip; }

.ecken {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 540px;
  margin: 18px auto 0;
}

.widget {
  display: block;
  width: 270px;
  max-width: 100%;
  background: var(--creme);
  color: var(--tinte);
  text-decoration: none;
  text-align: left;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 14px 34px rgba(70, 15, 8, .3);
  outline: 2px dashed rgba(213, 43, 30, .25);
  outline-offset: -6px;
}

.widget-titel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rot);
}

.widget-klein {
  margin: 4px 0 0;
  font-size: .72rem;
  line-height: 1.35;
  color: var(--tinte-2);
}

.widget-aktie .tradingview-widget-container { min-height: 70px; }

.widget-musik { transition: transform .15s; }
.widget-musik:hover { transform: translateY(-2px) rotate(.5deg); }
.widget-musik:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.musik { display: flex; align-items: center; gap: 12px; }

.musik-cover {
  position: relative;
  flex: none;
  width: 112px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: var(--tinte);
}

.musik-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.musik-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.1rem;
  background: rgba(0, 0, 0, .25);
}

.musik-text { display: grid; gap: 2px; min-width: 0; }
.musik-text strong { font-size: .98rem; line-height: 1.2; }
.musik-text span { font-size: .82rem; color: var(--tinte-2); }

.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.eq i { width: 3px; background: var(--rot); border-radius: 1px; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: .25s; }
.eq i:nth-child(3) { animation-delay: .5s; }

@keyframes eq {
  0%, 100% { height: 3px; }
  50%      { height: 12px; }
}

/* Fussball */
.spiele { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.spiel {
  display: grid;
  grid-template-columns: 30px 1fr auto 46px;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px dashed var(--papier-rand);
  font-size: .82rem;
  line-height: 1.25;
}

.spiel:first-child { border-top: 0; }

.spiel-liga {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
  color: var(--tinte-2);
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-radius: 5px;
  padding: 1px 0;
}

.spiel-teams, .spiel-tore { display: grid; gap: 1px; }
.spiel-teams span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spiel-tore { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }

.spiel-status {
  font-size: .7rem;
  font-weight: 700;
  color: var(--tinte-2);
  text-align: right;
}

.spiel-live .spiel-status { color: var(--rot); }
.spiel-live .spiel-status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--rot);
  vertical-align: 1px;
  animation: pulsieren 1.2s ease-in-out infinite;
}

@keyframes pulsieren { 50% { opacity: .25; } }

.widget-leer { font-size: .85rem; color: var(--tinte-2); padding: 4px 0; }

/* News */
.widget-news { transition: transform .15s; }
.widget-news:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.news-titel {
  margin: 0 0 6px;
  font-weight: 800;
  font-size: .95rem;
  line-height: 1.3;
  min-height: 3.9em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: opacity .35s;
}

.news-titel.ausblenden { opacity: 0; }

.news-punkte { display: flex; gap: 4px; margin-top: 8px; }
.news-punkte i { width: 6px; height: 6px; border-radius: 50%; background: var(--papier-rand); }
.news-punkte i.aktiv { background: var(--rot); }

@media (min-width: 1200px) {
  .ecken {
    position: absolute;
    inset: 20px;
    width: auto;
    max-width: none;
    margin: 0;
    display: block;
    pointer-events: none;
  }
  .ecken > .widget { position: absolute; pointer-events: auto; }
  .widget-aktie { top: 0; left: 0; transform: rotate(-1.5deg); }
  .widget-musik { top: 0; right: 0; transform: rotate(1.5deg); }
  .widget-fussball { bottom: 0; left: 0; transform: rotate(1deg); }
  .widget-news { bottom: 0; right: 0; transform: rotate(-1deg); }
  .widget-musik:hover { transform: rotate(1.5deg) translateY(-2px); }
  .widget-news:hover { transform: rotate(-1deg) translateY(-2px); }
}

/* ---------- Mitgliederbereich ---------- */
.knopf-kalender { margin: -6px auto 18px; }
.riesig {
  font-family: var(--schrift-titel);
  font-size: clamp(4.5rem, 22vw, 7rem);
  line-height: 1;
  color: var(--rot);
  margin: .08em 0 .1em;
}

.datum-gross {
  font-weight: 800;
  font-size: 1.3rem;
  margin: 0 0 20px;
}

.ort {
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-radius: 16px;
  padding: 18px;
  margin: 0 0 20px;
}

.ort p { margin: 0 0 12px; }

/* ---------- Gäste: Winter ---------- */
.ansicht-winter {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, #2c6b50 0%, #17402f 45%, #0d261c 100%);
}

.bald {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 14px;
  background: var(--rot);
  color: #fff;
  border-radius: 999px;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

.baum {
  display: block;
  width: 110px;
  margin: 16px auto 6px;
}

.titel-winter { font-size: clamp(1.8rem, 7vw, 2.4rem); }

.noch {
  font-family: var(--schrift-hand);
  font-size: 1.8rem;
  color: var(--tanne);
  margin: 0;
}

.schnee {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.flocke {
  position: absolute;
  top: -20px;
  color: #fff;
  opacity: .8;
  animation: fallen linear infinite;
}

@keyframes fallen {
  to { transform: translate(var(--drift, 0), 110vh); }
}

/* ---------- Handy ---------- */
@media (max-width: 480px) {
  .karte { padding: 30px 20px 24px; }
  .zurueck { top: 18px; left: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .karte, .dampf path, .wackeln, .eq i, .spiel-live .spiel-status::before { animation: none; }
  .news-titel { transition: none; }
  .eq i { height: 8px; }
  .knopf { transition: none; }
  .schnee { display: none; }
}