/* Herkunft: docs/brainstorming/website/unterseiten/veranstalter/seite.css — wird als /landing/veranstalter.css ausgespielt. */
/* seite.css — /veranstalter (wandert später nach /landing/veranstalter.css).
   Baut auf landing.css auf; hier nur Seitenspezifisches. Ton: ruhiger als die
   Landing — Creme-Grund, Aubergine-Typo, wenige gezielte Farbflächen. */

/* ---------- Hero ---------- */
.v-hero {
  position: relative;
  padding: 3.4rem 1.2rem 3.8rem;
  overflow: hidden;
}
.v-hero__inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  z-index: 2;
  text-align: center;
}
.v-flaechen { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.v-flaechen i { position: absolute; display: block; border: 4px solid var(--aubergine); }
.v-flaechen .vf--amber {
  background: var(--amber);
  width: 26vw; height: 15rem;
  right: -9vw; top: 1.4rem;
  transform: rotate(7deg);
}
.v-flaechen .vf--teal {
  background: var(--teal);
  width: 22vw; height: 9rem;
  left: -8vw; top: 8rem;
  transform: rotate(-6deg);
}
.v-flaechen .vf--punkt {
  background: var(--koralle);
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  border-width: 3px;
  left: 14vw; top: 2.4rem;
}
.v-hero__tag { display: inline-block; margin-bottom: 1.1rem; transform: rotate(-2deg); }
.v-claim { margin-bottom: 1.2rem; }
.v-claim .zeile { display: block; letter-spacing: -0.02em; }
.v-claim .zeile--a {
  font-size: clamp(2.4rem, 7.5vw, 6.5rem);
  color: var(--koralle);
  text-shadow: 0.05em 0.05em 0 var(--aubergine);
  transform: rotate(-1.5deg);
}
.v-claim .zeile--b {
  font-size: clamp(1.5rem, 4vw, 3.4rem);
  color: var(--aubergine);
  text-shadow: 0.06em 0.06em 0 var(--amber);
  transform: rotate(0.8deg);
  margin-top: 0.5rem;
}
.v-sub {
  font-size: clamp(1.02rem, 1.9vw, 1.25rem);
  font-weight: 600;
  max-width: 42rem;
  margin: 0 auto 1.8rem;
}
.v-sub strong { font-weight: 800; }
.v-cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
@media (max-width: 900px) {
  .v-flaechen .vf--amber { right: -18vw; width: 38vw; }
  .v-flaechen .vf--teal { left: -18vw; width: 34vw; }
  /* Aufgeklebter Creme-Streifen wie auf der Landing: Text bleibt lesbar,
     falls eine Fläche doch bis unter ihn reicht */
  .v-sub { background: var(--creme); border-radius: 14px; padding: 0.6rem 1rem; }
}
@media (max-width: 560px) {
  .v-flaechen .vf--punkt { display: none; }
}

/* ---------- Datenbasis: Fakten-Plakate ---------- */
.fakten {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.fakt {
  background: var(--creme);
  border: 4px solid var(--aubergine);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--aubergine);
  padding: 1.6rem 1.4rem 1.5rem;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.fakt:nth-child(1) { background: var(--teal); transform: rotate(-1.3deg); }
.fakt:nth-child(2) { background: var(--amber); transform: rotate(0.9deg) translateY(0.8rem); }
.fakt:nth-child(3) { background: var(--koralle); transform: rotate(-0.8deg); }
.fakt:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 9px 10px 0 var(--aubergine); }
.fakt__zahl {
  display: block;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  color: var(--aubergine);
  text-shadow: 0.05em 0.05em 0 var(--creme);
}
.fakt__label {
  display: block;
  margin-top: 0.4rem;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.35;
}

/* ---------- Korrektur-Zettel ---------- */
.korrektur {
  margin-top: 3.2rem;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2.6rem;
  align-items: center;
}
.zettel--korrektur {
  transform: rotate(-1.8deg);
  border-radius: 8px;
  max-width: 26rem;
}
.zettel--korrektur h3 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
}
.zettel--korrektur p { font-size: 0.95rem; font-weight: 600; }
.korrektur__link {
  display: inline-block;
  margin-top: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 3px solid var(--koralle);
  padding-bottom: 0.1rem;
}
.korrektur__link:hover, .korrektur__link:focus-visible { background: var(--creme-tief); }
.korrektur__link:focus-visible { outline: 3px dashed var(--teal); outline-offset: 3px; }
.korrektur__text { font-weight: 600; max-width: 34rem; }
@media (max-width: 900px) {
  .fakten { grid-template-columns: 1fr; max-width: 24rem; margin: 0 auto; }
  .fakt:nth-child(2) { transform: rotate(0.9deg); }
  .korrektur { grid-template-columns: 1fr; }
  .zettel--korrektur { margin: 0 auto; }
}

/* ---------- Besucher: Split mit Festivalseiten-Karte ---------- */
.v-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem;
  align-items: center;
}
.v-split__text .sektion__titel { transform: rotate(-0.6deg); }
.festkarte {
  position: relative;
  max-width: 26rem;
  margin: 0 auto;
  background: var(--creme);
  border: 4px solid var(--aubergine);
  border-radius: 22px;
  box-shadow: 10px 10px 0 var(--teal);
  padding: 1.4rem 1.4rem 1.2rem;
  transform: rotate(-1.6deg);
  transition: transform 0.2s ease;
}
.festkarte:hover { transform: rotate(-0.3deg) translateY(-4px); }
.festkarte__sticker { position: absolute; top: -1.1rem; right: -1rem; transform: rotate(6deg); z-index: 3; }
.festkarte__kopf {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}
.festkarte__kopf img { height: 40px; width: auto; }
.festkarte__name strong {
  display: block;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 1.05rem;
  line-height: 1.1;
}
.festkarte__name span { font-size: 0.8rem; font-weight: 700; opacity: 0.8; }
.festkarte__slots { list-style: none; display: grid; gap: 0.5rem; }
.festkarte__slots li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0.7rem;
  border: 2.5px solid var(--aubergine);
  border-radius: 12px;
  background: #fff;
  padding: 0.5rem 0.7rem;
}
.festkarte__zeit { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; }
.festkarte__act { font-family: var(--display); text-transform: uppercase; font-size: 0.9rem; }
.festkarte__buehne { font-size: 0.7rem; font-weight: 600; opacity: 0.8; }
.festkarte__fuss {
  margin-top: 0.9rem;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  opacity: 0.85;
}
.v-punkte { list-style: none; margin-top: 1.4rem; display: grid; gap: 0.9rem; }
.v-punkte li { display: flex; gap: 0.7rem; align-items: baseline; font-weight: 500; }
.v-punkte li::before {
  content: "★";
  color: var(--koralle);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.v-punkte li:nth-child(2)::before { color: var(--teal); }
.v-punkte li:nth-child(3)::before { color: var(--amber); }
.v-punkte strong { font-weight: 800; }
@media (max-width: 900px) {
  .v-split { grid-template-columns: 1fr; }
  .v-split > .festkarte { order: 2; }
}

/* ---------- Ausblick-Band: Portal ---------- */
.v-band {
  background: var(--creme-tief);
  border-top: 6px solid var(--aubergine);
  border-bottom: 6px solid var(--aubergine);
  margin-top: 2rem;
}
.plan-karten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}
/* overflow: visible überschreibt das hidden der Basis-.plakat — sonst wird
   der „Geplant"-Sticker an der Kartenkante abgeschnitten */
.plan-karte { padding-bottom: 1.6rem; overflow: visible; }
.plan-karte__sticker {
  position: absolute;
  top: -1.1rem;
  right: -0.7rem;
  transform: rotate(7deg);
  z-index: 3;
}
.plan-karte__sticker:hover { transform: rotate(3deg) translateY(-4px) scale(1.06); }
.plan-fuss {
  margin-top: 2.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem 2rem;
}
.plan-fuss p { font-weight: 600; max-width: 34rem; }
.plan-fuss strong { font-weight: 800; }
@media (max-width: 900px) {
  .plan-karten { grid-template-columns: 1fr; max-width: 26rem; margin: 0 auto; gap: 2rem; }
}