/* =====================================================================
   Spätsommer-Special (16.09. bis 15.10.2026) — Startseite, Erstentwurf, Kontakt.
   Sichtbar macht es aktion.js, und nur bis zum Enddatum; ohne JavaScript bleibt es aus.
   Nach der Aktion: aktion.css, aktion.js und die Blöcke mit data-aktion entfernen.
   ===================================================================== */
.special[hidden], .special-streifen[hidden] { display: none; }

/* Band unter dem Hero: Nachtblau mit Abendsonne hinter der Platz-Anzeige */
.special {
  position: relative; overflow: hidden;
  padding: 76px 0 80px;
  color: var(--auf-dunkel);
  background:
    radial-gradient(620px 380px at 76% 50%, rgba(214, 160, 84, .20), transparent 66%),
    linear-gradient(180deg, #0B141D 0%, #15110B 100%);
  border-top: 1px solid rgba(197, 164, 106, .35);
  border-bottom: 1px solid rgba(197, 164, 106, .35);
}
.special__anzeige { position: relative; isolation: isolate; }
.special__sonne {
  position: absolute; z-index: -1; left: 50%; top: 44%;
  width: 640px; height: 640px; transform: translate(-50%, -50%); pointer-events: none;
}
.special__grid {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
}
.special__grid > * { min-width: 0; }
.special h2 { color: var(--auf-dunkel-hell); margin: 14px 0 18px; }
.special h2 .accent { display: block; color: var(--gold-soft); font-style: italic; }
.special__text p { max-width: 560px; margin: 0; font-size: 1.05rem; line-height: 1.65; }
.special__preise { list-style: none; margin: 24px 0 32px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.special__preise li {
  padding: 9px 14px; font-size: .88rem; color: var(--auf-dunkel-hell);
  border: 1px solid rgba(216, 195, 156, .35); background: rgba(10, 19, 28, .45);
}
.special__preise b { color: var(--gold-soft); font-weight: 600; }

/* Platz-Anzeige: vergebene Plätze schraffiert und durchgestrichen, freie glimmen */
.plaetze { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.platz {
  aspect-ratio: 3 / 4; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid rgba(216, 195, 156, .4);
  background-color: rgba(11, 20, 29, .74);   /* dunkler Grund: Schrift bleibt vor der Sonne lesbar */
}
.platz b { font-family: var(--serif); font-weight: 500; font-size: 2.4rem; line-height: 1; color: var(--auf-dunkel-hell); }
.platz i { font-style: normal; font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.platz--weg {
  border-color: rgba(197, 164, 106, .22);
  background-image: repeating-linear-gradient(135deg, rgba(197, 164, 106, .13) 0 6px, transparent 6px 12px);
}
.platz--weg b { color: #8A929B; text-decoration: line-through; text-decoration-color: rgba(197, 164, 106, .75); text-decoration-thickness: 1px; }
.platz--weg i { color: var(--auf-dunkel-leise); }
.platz--frei {
  border-color: var(--gold);
  background-image: linear-gradient(rgba(197, 164, 106, .12), rgba(197, 164, 106, .12));
  box-shadow: 0 0 0 1px rgba(197, 164, 106, .25), 0 0 30px rgba(214, 160, 84, .22);
}
.platz--frei i { color: var(--gold-soft); }
@media (prefers-reduced-motion: no-preference) {
  .platz--frei { animation: platz-glimmen 3s ease-in-out infinite; }
}
@keyframes platz-glimmen {
  50% { box-shadow: 0 0 0 1px rgba(197, 164, 106, .5), 0 0 44px rgba(214, 160, 84, .42); }
}
.special__stand { margin: 16px 0 0; text-align: center; font-size: .92rem; color: var(--auf-dunkel); }
.special__stand strong { color: var(--auf-dunkel-hell); font-weight: 600; }

@media (max-width: 980px) {
  .special { padding: 56px 0 60px; }
  .special__grid { grid-template-columns: 1fr; gap: 36px; }
  .special__sonne { width: 460px; height: 460px; }
}
@media (max-width: 480px) {
  .plaetze { gap: 6px; }
  .platz b { font-size: 1.7rem; }
  .platz i { font-size: .52rem; letter-spacing: .08em; }
}

/* Schmaler Streifen über dem Formular der Kontaktseite */
.special-streifen {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px;
  max-width: 760px; margin: -24px auto 44px; padding: 16px 22px;
  border: 1px solid rgba(197, 164, 106, .4);
  background: linear-gradient(90deg, rgba(197, 164, 106, .12), rgba(214, 160, 84, .04));
  color: var(--auf-dunkel); font-size: .95rem; text-align: center;
}
.special-streifen strong { color: var(--gold-soft); font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.2rem; }
.plaetze--klein { display: inline-grid; grid-template-columns: repeat(5, 18px); gap: 5px; }
.plaetze--klein .platz { aspect-ratio: 1; }
.plaetze--klein .platz b, .plaetze--klein .platz i { display: none; }