/* Die oeffentliche Seite eines Veranstalters.

   Sie borgt sich Kachel, Bewertungsliste und Reiterstreifen von den Seiten
   daneben (`app.css`, `event.css`); eigen ist nur der Kopf. */

/* Das Titelbild: ein breiter Streifen ueber dem Kopf, in den das Profilbild
   hineinragt. Feste Hoehe, weil ein Bild in jedem Seitenverhaeltnis kommen
   kann und ein Kopf, der mit dem Bild mitwaechst, die Liste darunter
   wegschiebt. */
/* Der Streifen liegt ueber beiden Spalten; darunter beginnen Blatt und
   Schiene nebeneinander. */
/* Der Streifen ist das Dach der Kopfkarte, nicht ein Bild darueber: Zwischen
   beiden liegt nichts. Die Zeilenluecke des Rasters faellt deshalb weg -- am
   Bild selbst zu ziehen half nicht, die Luecke sitzt zwischen den Feldern des
   Rasters und nicht an ihrem Inhalt. */
/* Ohne `:has()`: Nicht jeder Browser kennt es, und wo es fehlt, faellt die
   ganze Regel aus -- dann klaffte die Fuge wieder. Die Zeilenluecke faellt
   deshalb immer weg; ohne Titelbild bleibt die erste Reihe leer und null hoch,
   und das kostet nichts. */
.vp-seite { row-gap: 0; }
/* Ohne Titelbild gibt es den Streifen nicht -- und damit auch kein Feld dafuer.
   Bis zum 2. September 2026 blieb der leere Behaelter im Raster stehen: Er
   nahm die erste Zeile ein, die rechte Spalte rutschte hinein, und der Kopf
   des Veranstalters begann erst tausend Punkte weiter unten, unter einer
   weissen Flaeche. Wer keinen Streifen hat, faengt oben an. */
.vp-seite > #vp-cover:empty { display: none; }
.vp-seite > #vp-cover:not(:empty) { grid-column: 1 / -1; grid-row: 1; }
.vp-seite > #vp-cover:not(:empty) ~ .event-main,
.vp-seite > #vp-cover:not(:empty) ~ .rail.right { grid-row: 2; }
/* Auch rechts beginnt es sofort: In der Vorlage stehen Knopf und Kopfkarte
   auf derselben Linie unter dem Streifen.

   Und beide Spalten stehen auf demselben weissen Grund, der unter dem
   Titelbild weiterlaeuft -- durchgehend, auch zwischen den Karten. Sonst
   blitzte zwischen „Nachricht senden" und „Kontakt" der Seitengrund durch,
   und die Spalte zerfiel in Schnipsel. */
.vp-seite > #vp-cover:not(:empty) ~ .rail.right {
  margin-top: 0;
  /* Der weisse Grund der Spalte reicht nach links ueber die Rasterluecke
     hinweg: Sonst liefe zwischen Kopfkarte und Kontakt ein schmaler Streifen
     Seitengrund von oben nach unten, und die beiden Haelften fielen
     auseinander. Die Luecke bleibt als Abstand -- sie ist nur nicht mehr zu
     sehen. */
  margin-left: calc(-1 * var(--spacing-lg));
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-lg)
           calc(var(--spacing-lg) * 2);
  background: var(--color-surface-primary);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}

/* Das Hinweisfeld ist meistens leer -- als leerer Kasten zaehlte es trotzdem
   im Abstand der Spalte und schob die Kopfkarte um eine Zeilenluecke nach
   unten. Leer heisst hier: gar nicht da. */
#vp-notice:empty { display: none; }
/* Die Kopfkarte darf ueberlaufen: Das Profilbild ragt oben heraus, und eine
   Karte, die abschneidet, koepft es. */
.vp-kopf { overflow: visible; }
.vp-titelbild {
  height: 220px;
  background-color: var(--color-surface-secondary);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.vp-kopf-body {
  display: flex;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  align-items: flex-start;
}
/* Das Profilbild ragt in den Streifen hinein und braucht einen Rand gegen ihn
   -- sonst verschwaende ein dunkles Gesicht in einem dunklen Bild. */
.vp-seite > #vp-cover:not(:empty) ~ .event-main .vp-bild .head {
  margin-top: -92px;
  border: 4px solid var(--color-surface-primary);
}
/* Das Bild ist gross genug, um ein Gesicht zu sein, und rund wie ueberall
   sonst -- dieselbe Person soll auf jeder Seite gleich aussehen. */
.vp-bild .head {
  width: 88px; height: 88px;
  flex: none;
  margin-left: 0;
  font-size: 1.7rem;
}
.vp-bild .head svg.i { width: 40px; height: 40px; }
.vp-wer { display: flex; flex-direction: column; gap: var(--spacing-sm); min-width: 0; }
.vp-wer h1 { margin: 0; font: var(--typography-hero-title); font-size: 1.6rem; }
.vp-vollername { margin: calc(-1 * var(--spacing-xs)) 0 0; font: var(--typography-body); color: var(--color-text-secondary); }
.vp-wer .prose { margin: 0; }

/* Die Note neben dem Namen -- dieselbe Zahl wie auf der Karte, mit demselben
   Stern davor. */
.vp-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font: var(--typography-body);
}
/* Die Farbe kommt aus `svg.i.gold` (app.css) -- derselbe Stern soll auf
   jeder Seite dieselbe Farbe haben. Hier steht nur seine Groesse. */
.vp-note svg.i { width: 17px; height: 17px; }
.vp-note .quiet { color: var(--color-text-tertiary); font: var(--typography-metadata); }

/* Kennzahlen: gross die Zahl, klein das Wort -- und nur die, die der Server
   wirklich hergibt. */
/* Die Zeile unter dem Namen steht jetzt in der Spalte neben dem Bild und
   nicht mehr quer unter der Kopfkarte: Seit wann, welche Form, wo -- das
   gehoert zum Namen und liest sich in einer Zeile. */
.vp-kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-lg);
  padding: 0;
  font: var(--typography-metadata);
  color: var(--color-text-secondary);
}
.vp-kennzahl { display: flex; align-items: center; gap: 6px; }
.vp-kennzahl svg.i {
  width: 16px; height: 16px;
  align-self: center;
  color: var(--color-text-tertiary);
}
.vp-kennzahl b { font: var(--typography-hero-title); font-size: 1.3rem; line-height: 1; }
.vp-kennzahl > span { font: var(--typography-metadata); color: var(--color-text-tertiary); }

/* Der Reiterstreifen sitzt auf der Unterkante der Kopfkachel, wie in der
   Veranstaltung. */
.vp-reiter { padding: 0 var(--spacing-lg); border-top: 1px solid var(--color-border-subtle); }

@media (max-width: 640px) {
  .vp-kopf-body { flex-direction: column; }
}

/* Netzauftritt und Kontakt -- nur eine Organisation bringt sie mit. */
/* Die Oeffnungszeiten als Tafel: Tag links, Zeiten rechts -- wie bei jedem
   Haus, das seine Zeiten aushaengt. Als Satz brach das in der schmalen Spalte
   auf drei Zeilen um, und wer den Samstag suchte, las alles. */
.vp-zeiten {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--spacing-sm);
  font: var(--typography-metadata);
}
.vp-zeiten th {
  text-align: left;
  font-weight: 500;
  color: var(--color-text-secondary);
  padding: 2px var(--spacing-md) 2px 0;
  white-space: nowrap;
  vertical-align: top;
}
.vp-zeiten td { padding: 2px 0; color: var(--color-text-primary); }

.vp-kontakt { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.vp-kontakt li { display: flex; align-items: center; gap: var(--spacing-sm); }
.vp-kontakt svg.i { width: 16px; height: 16px; color: var(--color-text-tertiary); flex: none; }
.vp-kontakt a { color: var(--color-brand-primary-action); text-decoration: none; }
.vp-kontakt a:hover { text-decoration: underline; }

/* Die Veranstaltungen dieses Veranstalters, untereinander.
   Eine Spalte und kein Raster: Die Zeilenkarte ist breit gebaut, und zwei
   davon nebeneinander liessen von jeder nur noch das Bild uebrig. */
.vp-liste {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* ------------------------------------------------------------- Der Filter --
   Spalten mit Radioknoepfen, durch Haarlinien getrennt: In jeder Spalte gilt
   genau eines, und das sagt ein Radioknopf von selbst. */
.vp-filter {
  margin-bottom: var(--spacing-lg);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
}
.vp-filterspalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.vp-filterspalte {
  padding: var(--spacing-lg);
  border-right: 1px solid var(--color-border-subtle);
}
.vp-filterspalte:last-child { border-right: 0; }
.vp-filterspalte h3 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-md);
  font: var(--typography-body);
  font-weight: 700;
}
.vp-filterspalte h3 svg.i {
  width: 17px;
  height: 17px;
  color: var(--color-brand-primary-action);
}

.vp-datum {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  padding: 7px var(--spacing-md);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-control);
  color: var(--color-text-secondary);
}
.vp-datum input { border: 0; background: none; font: var(--typography-body); color: inherit; }

/* Der Fuss: links das Zuruecksetzen, rechts die Trefferzahl als Weg zurueck
   zur Liste. */
.vp-filterfuss {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--color-border-subtle);
}
.vp-filterfuss .btn { margin-left: auto; }
.vp-zuruecksetzen {
  border: 0;
  background: none;
  font: var(--typography-body);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.vp-zuruecksetzen:hover:not([disabled]) { color: var(--color-brand-primary-action); }
.vp-zuruecksetzen[disabled] { opacity: .5; cursor: default; }

/* Der Ein-/Ausklapper steht rechts neben den Bahnschaltern. */
.vp-filterschalter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: auto;
  border: 1px solid var(--color-border-subtle);
  border-radius: 50%;
  background: var(--color-surface-primary);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.vp-filterschalter:hover { border-color: var(--color-brand-primary-action); }
/* Offen traegt es die Markenfarbe -- so sieht man am Zeichen selbst, in
   welchem Zustand es gerade steht. */
.vp-filterschalter.an {
  border-color: var(--color-brand-primary-action);
  color: var(--color-brand-primary-action);
}

/* Die drei Bahnschalter: Alle · Kommende · Vergangene.
   Runde Schalter mit ihrer Zahl darin -- sie sind keine Filter, sondern die
   Frage, welche Liste man ueberhaupt liest. Deshalb stehen sie ueber der
   Filterleiste und nicht in ihr. */
.vp-bahnen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}
.vp-bahn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 7px var(--spacing-lg);
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  background: var(--color-surface-primary);
  font: var(--typography-body);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.vp-bahn:hover { border-color: var(--color-text-tertiary); }
.vp-bahn.hier {
  border-color: transparent;
  background: var(--color-surface-brand-subtle, var(--color-surface-secondary));
  color: var(--color-brand-primary-action);
  font-weight: 700;
}
.vp-bahnzahl { font: var(--typography-metadata); opacity: .75; }

/* Die Zahl neben der Ueberschrift -- so gross wie sie, aber ruhiger. */
.vp-gesamt { margin-left: var(--spacing-sm); color: var(--color-text-tertiary); }

/* Der Nachladeknopf steht mittig unter der Liste: Er gehoert zu ihr und nicht
   an den Rand des Blattes. */
.vp-mehr {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: var(--spacing-md) auto 0;
}

/* Die Vorstellung steht in der Kopfkarte, unter Name und Kennzahlen: Der Satz,
   mit dem sich jemand vorstellt, gehoert neben seinen Namen und nicht hinter
   eine Linie. Ueber die ganze Breite, damit er nicht neben dem Bild in eine
   Spalte gequetscht wird. */
.vp-vorstellung {
  margin: 0;
  padding: 0 var(--spacing-lg) var(--spacing-lg);
  color: var(--color-text-secondary);
  max-width: 68ch;
}

/* „Alle anzeigen" sitzt rechts in der Kopfzeile des Abschnitts. */
.vp-alle { margin-left: auto; }

/* Der Knopf im Kopf steht rechts, auf Hoehe des Namens. */
/* „Folgen" steht ueber dem Kontakt in der Spalte rechts -- dort, wo alles
   steht, was man mit diesem Veranstalter tun kann. */
/* Folgen, teilen, schreiben stehen untereinander und beruehren sich nicht:
   Drei Knoepfe auf voller Breite ohne Abstand lesen sich als ein Block mit
   Trennstrichen, nicht als drei Dinge, die man tun kann. */
.vp-tat {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}
.vp-folgenknopf { width: 100%; justify-content: center; }

/* „Verifizierter Veranstalter" steht neben dem Namen, nicht darunter: Sie
   gehoert zu ihm wie ein Zusatz zum Titel. */
.vp-note { flex-wrap: wrap; }
/* Die Marke steht in derselben Zeile wie die Note, mit etwas Luft davor. */
.vp-note .vp-marke { margin-left: var(--spacing-lg); }
.vp-marke {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 0;
  padding: 4px var(--spacing-md);
  border-radius: 999px;
  background: var(--color-surface-success-subtle, var(--color-surface-secondary));
  font: var(--typography-metadata);
  font-weight: 600;
  color: var(--color-status-success, var(--color-text-secondary));
  vertical-align: middle;
  white-space: nowrap;
}
.vp-marke svg.i { width: 14px; height: 14px; }

@media (max-width: 560px) {
  .vp-titelbild { height: 130px; }
  .vp-seite > #vp-cover:not(:empty) ~ .event-main .vp-bild .head { margin-top: -62px; }
  .vp-marke { margin-left: 0; }
}

/* Was den Veranstalter ausmacht: vier kurze Angaben nebeneinander.
   Eine Reihe und keine Liste untereinander -- sie sind gleichrangig, und
   nebeneinander liest man sie in einem Blick. Wird es eng, brechen sie um. */
/* Die Kacheln stehen auf derselben Breite wie der Text darueber: die erste
   linksbuendig zu ihm, die letzte rechtsbuendig zum Rand. Mit `flex: 1` sass
   jede in ihrer eigenen Spalte und war darin mittig -- die erste begann
   deshalb sichtbar weiter innen als der Satz darueber.

   Und mehr Luft nach oben: Sie sind eine eigene Aussage und keine dritte
   Zeile des Absatzes. */
/* Ein Raster und kein Umbruch: Mit `space-between` und Kacheln in Inhaltsbreite
   stand jede Reihe anders -- vier oben, drei darunter, dann zwei, jede mit
   eigenen Abstaenden, und die letzte Reihe klebte links. Gleich breite Spalten
   ordnen die Kacheln untereinander, gleich wieviele es sind. */
.vp-angaben {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-lg) var(--spacing-md);
  margin-top: 40px;
}
.vp-angabe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
/* In jeder Kachel bleibt alles mittig -- das Zeichen ueber seinem Wort. */
.vp-angabe svg.i { color: var(--color-brand-primary-action); }
.vp-angabe b { font: var(--typography-body); }
.vp-angabe span { font: var(--typography-metadata); color: var(--color-text-secondary); }

/* Im Kopf bleibt der Text ein Anriss: zwei Zeilen, dann ist Schluss --
   die ganze Vorstellung steht unter „Ueber uns". */
.vp-vorstellung p { margin: 0 0 var(--spacing-sm); }
.vp-vorstellung p:last-child { margin-bottom: 0; }

/* „Ueber uns" steht als Ganzes in der Kopfkarte: der Satz und darunter, was
   den Veranstalter ausmacht. Beides gehoert zusammen und traegt deshalb
   dieselbe Einrueckung wie der Kopf darueber. */
.vp-ueberuns {
  /* Viel Luft nach oben: „Ueber uns" ist ein eigener Gedanke und keine
     weitere Zeile unter dem Namen. Der Abstand trennt, wo keine Linie
     stehen soll.

     Zur Seite und nach unten mehr, als die Karte hoch ist rund: Ihre Ecken
     haben 18 Punkt Radius, der Rand hatte 16 -- die Rundung lief also durch
     die aeussersten Angaben hindurch, „Gegruendet" links und „Ehrenamtlich"
     rechts standen in der Kurve. Ein Rand, der kleiner ist als der Radius,
     ist keiner. */
  padding: 48px var(--spacing-xl) var(--spacing-xl);
}
/* Der Kopf haelt seinen eigenen Fussabstand nicht mehr, wenn „Ueber uns"
   folgt: Zwei Abstaende uebereinander sind einer zu viel, und der obere
   soll der von „Ueber uns" sein. */
/* Auch hier ohne `:has()`: Der Kopf endet immer ohne Fussabstand, und was
   darunter kommt, bringt seinen eigenen mit. */
.vp-kopf-body { padding-bottom: 0; }
.vp-ueberuns h2 {
  margin: 0 0 var(--spacing-md);
  font: var(--typography-section-title);
}
.vp-ueberuns .vp-vorstellung { padding: 0; max-width: 68ch; }

/* Die Spalte rechts: Kontakt, Verweise, Karte. Sie steht neben dem Blatt und
   gilt in jedem Reiter -- wie man jemanden erreicht, haengt nicht davon ab,
   was man gerade liest. */
.vp-kontakt {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vp-kontakt li { display: flex; gap: var(--spacing-md); align-items: flex-start; }
.vp-kontakt svg.i {
  flex: none;
  margin-top: 2px;
  color: var(--color-text-tertiary);
}
.vp-kontakt a { color: inherit; }
.vp-kontakt a:hover { color: var(--color-brand-primary-action); }

/* Die Verweise als Reihe kleiner Zeichen -- ohne Text: Die Adresse dahinter
   steht in der Beschriftung fuer die Vorlesehilfe. */
.vp-verweise {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border-subtle);
}
.vp-verweis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 50%;
  color: var(--color-text-secondary);
}
.vp-verweis:hover {
  border-color: currentColor;
}
/* Jede Marke in ihrer Farbe: Ein Kreis mit einem grauen „f" darin ist ein
   Zeichen, das man lesen muss -- in Blau erkennt man es. Wer keine eigene
   Farbe hat, bleibt in der Schrift der Seite. */
.vp-verweis-facebook { color: #1877f2; }
.vp-verweis-instagram { color: #d6249f; }
.vp-verweis-linkedin { color: #0a66c2; }
.vp-verweis-youtube { color: #d92d20; }
.vp-verweis-mail { color: #15803d; }

.vp-kartenort {
  display: flex;
  gap: var(--spacing-sm);
  margin: 0 0 6px;
  font: var(--typography-metadata);
}
.vp-kartenort span { white-space: pre-line; }
.vp-kartenort svg.i { flex: none; color: var(--color-brand-primary-action); }
/* Das Schild auf der Karte ist zugleich der Griff: Ein Klick auf die
   Anschrift oeffnet die Wahl der Karte. Drei Verweise nebeneinander waeren
   drei Angebote fuer dieselbe Frage. */
/* Untereinander und nicht nebeneinander: Nebeneinander teilten sich Anschrift
   und Verweis die Breite des Schildes, und aus „Sommergasse 118, 69469
   Weinheim" wurden fuenf Zeilen zu je einem Wort. */
.vp-kartenwahl summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  cursor: pointer;
  list-style: none;
}
.vp-kartenwahl summary::-webkit-details-marker { display: none; }
/* Buendig zur Anschrift, weil er in ihrer Spalte steht -- nicht, weil hier
   die Breite des Zeichens nachgerechnet wuerde. Die Rechnung stand hier
   (18 + 8) und war zweimal falsch: Sie galt nur, solange das Zeichen 18 Punkt
   misst, und sie wirkte gar nicht, weil `.panel details summary` aus
   event.css spezifischer ist und die Spalte mittig stellt. Struktur schlaegt
   Arithmetik. */
.vp-kartenauf {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--color-brand-primary-action);
  font: var(--typography-metadata);
  font-weight: 600;
  white-space: nowrap;
}
.vp-kartenauf svg.i { width: 15px; height: 15px; }
.vp-kartenwahl[open] .vp-kartenauf svg.i { transform: rotate(180deg); }
/* Aufgeklappt bleibt das Schild im Bild: Die Karte schneidet ab, was ueber
   sie hinausragt -- ein Weg, den man nicht sieht, ist keiner. */
.vp-kartenwahl[open] { max-height: calc(100% - 24px); overflow-y: auto; }
.vp-kartenliste {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-border-subtle);
}
.vp-kartenkopf {
  margin: 0 0 2px;
  color: var(--color-text-tertiary);
  font: var(--typography-caption);
}
.vp-kartenliste a {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 6px 4px;
  border-radius: 8px;
  color: var(--color-text-primary);
  font: var(--typography-metadata);
  font-weight: 600;
}
.vp-kartenliste a span { flex: 1; min-width: 0; }
.vp-kartenliste a svg.i { width: 16px; height: 16px; flex: none; color: var(--color-text-secondary); }
.vp-kartenliste a:hover { background: var(--color-surface-secondary); }
.vp-kartenliste a:hover svg.i { color: var(--color-brand-primary-action); }


/* Die Karte: ein Ausschnitt, darunter die Anschrift und der Weg nach
   draussen. Die Kacheln kommen von OpenStreetMap, dasselbe Modul wie auf der
   Veranstaltungsseite. */
/* Die Karten der Spalte stehen mit Abstand untereinander -- sie liegen in
   einem eigenen Behaelter, und der brachte keinen mit: Ohne diese Zeilen
   klebten Kontakt, Karte und Marke aneinander.

   Als Klasse und nicht mehr an der Kennung: Dieselbe Spalte steht auch in der
   Vorschau im Konto, und dort klebten sie wieder. */
.vp-spaltenstapel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Die Karte fuellt ihre Kachel; die Anschrift liegt als Schild darauf. */
.vp-karte { position: relative; }
.vp-kartenflaeche {
  height: 200px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-surface-secondary);
}
.vp-kartenschild {
  position: absolute;
  right: var(--spacing-md);
  bottom: var(--spacing-md);
  /* Breit genug fuer eine Anschrift in zwei Zeilen -- und nie breiter als die
     Karte, auf der es liegt. */
  min-width: min(260px, 86%);
  max-width: 86%;
  padding: var(--spacing-md);
  border-radius: var(--radius-control);
  background: var(--color-surface-primary);
  box-shadow: var(--elevation-card);
}

/* ------------------------------------------------------------ Der Kopf ---
   Nach der Vorlage: grosses Bild, grosser Name, viel Luft -- und das Ganze
   auf weissem Grund, der unter dem Titelstreifen weiterlaeuft. Oben ohne
   Rundung: Dort sitzt der Streifen, und zwei Rundungen uebereinander waeren
   eine Naht. */
/* Ohne Rahmen: Der Kopf ist kein Kasten auf der Seite, sondern die Seite
   selbst unter ihrem Titelbild. Gezeichnet wird an ihm nur die Haarlinie ueber
   den Reitern -- die trennt etwas, ein Rahmen ringsum trennt nichts. */
/* Unten eckig, weil dort die Veranstaltungen anschliessen.
   Beide Flaechen sind weiss und stossen ohne Luecke aneinander -- rundete der
   Kopf trotzdem seine Unterkante, schnitt die Rundung zwei Kerben in eine
   Flaeche, die durchlaeuft. Gerundet wird am Ende der Spalte, nicht in ihrer
   Mitte. */
.vp-kopf {
  border: 0;
  border-radius: 0;
}
/* Steht darunter nichts, ist der Kopf selbst das Ende und rundet wieder. */
.vp-seite:has(#vp-body:empty) .vp-kopf {
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.vp-kopf-body {
  gap: var(--spacing-xl);
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
}
.vp-bild .head {
  width: 132px; height: 132px;
  font-size: 2.4rem;
}
.vp-bild .head svg.i { width: 56px; height: 56px; }
.vp-wer { gap: var(--spacing-md); }
.vp-wer h1 { font-size: 2.1rem; letter-spacing: -.01em; }
.vp-note { gap: var(--spacing-sm); font-size: 1.05rem; }
.vp-note svg.i { width: 20px; height: 20px; }
.vp-note b { font-size: 1.15rem; }
.vp-kennzahlen { gap: var(--spacing-sm) var(--spacing-xl); font-size: .95rem; }
.vp-kennzahl svg.i { width: 17px; height: 17px; }

/* Die Angaben tragen mehr Luft und ein groesseres Zeichen -- sie sind das,
   was nach dem Namen haengen bleibt.

   Der waagerechte Abstand stand hier auf null: Solange die Kacheln als Flex
   mit `space-between` lagen, verteilte das den Platz von selbst. Im Raster
   heisst null aber null -- die Spalten stiessen aneinander, und „Barrierefrei"
   klebte an „Familienfreundlich". */
.vp-angaben { gap: var(--spacing-xl) var(--spacing-lg); }
.vp-angabe { gap: 6px; }
.vp-angabe svg.i { width: 26px; height: 26px; }
.vp-angabe b { font-size: 1rem; }

/* Die Reiterleiste gehoert zur Liste darunter und traegt darum deren Flaeche.
   Sie schwebte bis zum 9. September 2026 als eigenes Pill zwischen Kopf und
   Liste, mit einer Haarlinie darunter: Was dasselbe umschaltet und zeigt, las
   sich als zweierlei. Die Linie steht jetzt ueber der Leiste -- sie trennt vom
   Kopf, nicht von der Liste. */
.vp-reiterleiste {
  margin: 0;
  /* Oben ohne Innenrand: Die Luft ueber und unter der Schrift bringt der
     Reiter selbst mit, beides gleich. Mit zwoelf Punkten hier sass das Wort
     zwanzig Punkte unter der Linie und acht ueber dem Strich. */
  padding: 0 var(--spacing-lg);
  border: 0;
  border-top: 1px solid var(--color-border-subtle);
  border-radius: 0;
  background: var(--color-surface-primary);
  box-shadow: none;
}
/* `.tabs` bringt aus `event.css` einen Abstand nach unten mit -- dort steht die
   Leiste ueber freiem Grund. Hier steht die Liste darunter, und zwoelf Punkte
   dazwischen waren genau der dunkle Streifen, der beide auseinanderriss. */
.vp-reiterleiste .tabs { margin-bottom: 0; }
/* Und keine zweite Linie unter der Leiste: Die Liste stoesst ohne Kante an. */
.vp-reiterleiste + .vp-veranstaltungen { border-top: 0; }

/* Reiter und keine Kapseln: `.tabs` aus `event.css` setzt einen gerundeten
   Kasten mit einer Kapsel darin -- das ist die Form fuer zwei Knoepfe, die
   ueber freiem Grund stehen. Hier stehen sie auf dem Blatt der Liste, und ein
   gerundeter Kasten darauf sieht aus wie ein Fremdkoerper.

   Stattdessen, wie in der Vorlage: eine Haarlinie unter der Reihe, und der
   gewaehlte traegt seinen Strich darauf. */
.vp-reiterleiste .tabs {
  border-radius: 0;
  background: none;
  padding: 0;
  gap: 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.vp-reiterleiste .tab {
  border-radius: 0;
  background: none;
  padding: var(--spacing-md);
  /* Der Strich ist immer da, nur meist unsichtbar: Sonst spraenge die Zeile
     um zwei Punkte, sobald jemand den Reiter wechselt. */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--color-text-secondary);
}
.vp-reiterleiste .tab:hover { color: var(--color-text-primary); }
.vp-reiterleiste .tab.active {
  background: none;
  /* `.tab.active` aus `event.css` hebt die Kapsel mit einem Schatten ab --
     auf der Linie legte er einen dunklen Kasten um den gewaehlten Reiter. */
  box-shadow: none;
  color: var(--color-brand-primary-action);
  border-bottom-color: var(--color-brand-primary-action);
}

/* Drei Vorschlaege nebeneinander; darunter bricht es auf eine Spalte um. */
.vp-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-lg);
}
/* Die Zeilenkarte wird hier zur Stapelkarte: Bild quer oben, Text darunter --
   dieselbe Form wie die Kopfkarten im Entdecken. Ohne diese drei Zeilen behielte
   sie ihr schmales Bild an der Seite und quetschte den Text daneben. */
.vp-reihe .event-card.row {
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
}
.vp-reihe .event-card.row .art {
  width: 100%;
  aspect-ratio: 16 / 9;
  align-self: auto;
}

/* „Alle Events ansehen" -- ein Weg, kein Knopf. */
.vp-alle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  border: 0;
  background: none;
  font: var(--typography-body);
  font-weight: 600;
  color: var(--color-brand-primary-action);
  cursor: pointer;
}
.vp-alle svg.i { width: 16px; height: 16px; }
.vp-abschnitt { font: var(--typography-section-title); }

/* Der Kasten zur Marke: das Zeichen gross, der Satz darunter. */
.vp-geprueft-kopf {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-sm);
  color: var(--color-status-success, var(--color-text-primary));
}
.vp-geprueft .quiet { margin: 0; font: var(--typography-metadata); }

@media (max-width: 560px) {
  .vp-bild .head { width: 96px; height: 96px; }
  .vp-wer h1 { font-size: 1.5rem; }
}

/* In der Reihe darf der Titel umbrechen: Die Karte ist schmal, und
   „Fermentieren für Anfänger" auf ein „Fer…" zu kuerzen sagt nichts mehr.
   In der Liste bleibt es bei einer Zeile -- dort ist die Breite da. */
.vp-reihe .event-card .title {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
/* Die Kategorie bleibt einzeilig und gekuerzt: Umgebrochen schob sie die
   Marke „Deine Veranstaltung" auf die naechste Zeile und die Kopfzeile
   auseinander. „Gemeinschaft" laesst sich an drei Buchstaben erraten. */

/* Auf durchgehend weissem Grund traegt jede Karte nur noch eine weiche Linie
   -- kein Schatten. Ein Schatten hebt etwas von seinem Grund ab; hier ist der
   Grund derselbe, und die Karten sollen sich abteilen, nicht abheben.

   Zwischen den Karten der linken Spalte bleibt der Seitengrund stehen: Dort
   trennt der Abstand, und weiss auf weiss haette nichts mehr getrennt. */
.vp-seite > #vp-cover:not(:empty) ~ .event-main .panel,
.vp-seite > #vp-cover:not(:empty) ~ .rail.right .panel {
  box-shadow: none;
}

/* Der Inhalt des Kontaktkastens steht auf einer Linie mit seiner Ueberschrift.
   Der Kasten selbst bringt keinen Innenabstand mit; ohne diese Zeile standen
   die Zeichen sechzehn Pixel weiter links als das Wort „Kontakt" darueber.
   Oben keiner: Dort steht schon die Ueberschrift mit ihrem eigenen. */
.vp-spalte .panel-body {
  padding: 0 var(--spacing-lg) var(--spacing-lg);
}

/* Der Kasten zur Marke hat keine Ueberschriftzeile -- sein Inhalt braucht
   deshalb ringsum Abstand, oben wie unten. */
.vp-geprueft .panel-body { padding: var(--spacing-lg); }

/* Der Folgen-Knopf steht ohne Fuellung da -- weiss mit Rand, das Wort in der
   Markenfarbe, wie in der Vorlage. Abgeschaltet bleibt er sichtbar: Auf dem
   eigenen Profil sieht die Seite sonst anders aus als bei allen anderen. */
.vp-folgenknopf:not(.quiet) {
  background: var(--color-surface-primary);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-brand-primary-action);
}
.vp-folgenknopf:not(.quiet) svg.i { color: var(--color-brand-primary-action); }
/* Abgeschaltet, aber nicht ausgegraut: Der Knopf gehoert zum Bild der Seite
   und soll dort stehen, wie er steht. Dass er gerade nicht geht, sagt sein
   Titel -- und der Zeiger, der sich nicht in eine Hand verwandelt. */
.vp-folgenknopf[disabled] { opacity: 1; cursor: not-allowed; }

/* Der Titel darf umbrechen, die Note rutscht dann mit: Ohne Umbruch legte
   sich „5,0 (3 Bewertungen)" ueber die zweite Zeile des Titels. */
.vp-reihe .title-row { flex-wrap: wrap; padding-right: 0; }

/* Die Veranstaltungen stehen auf demselben Bogen wie der Kopf, nur durch eine
   Linie getrennt. Es gab dort einmal Reiter -- sie hatten drei Namen und einen
   Inhalt; was sie trennten, trennt jetzt der Strich. */
.vp-veranstaltungen {
  background: var(--color-surface-primary);
  border-top: 1px solid var(--color-border-subtle);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.vp-veranstaltungen > header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
}
.vp-veranstaltungen-body { padding: 0 var(--spacing-lg) var(--spacing-lg); }
/* Oben kein Rand, weil dort sonst die erste Karte sitzt -- die bringt ihren
   Abstand mit. Steht statt der Liste nur ein Satz da („Noch keine
   Bewertungen."), fehlt er: Der Satz klebte unter den Reitern an der Kante,
   und der leere Raum stand darunter, als waere die Liste nur nicht geladen.
   Also bekommt er den Abstand selbst -- oben wie unten derselbe. */
.vp-veranstaltungen-body > .hint:first-child {
  margin: 0;
  padding: var(--spacing-lg) 0 0;
}

/* Kopf und Veranstaltungen sind ein Blatt: kein Spalt dazwischen. Der Fusstext
   holt sich seinen Abstand selbst zurueck. */
.vp-seite .event-main { gap: 0; }
.vp-seite .event-main > .foot-note { margin-top: var(--spacing-xl); }

/* Die Schiene klebt -- aber nur, wenn sie hineinpasst.
   Sie ist hoeher als der Bildschirm (Kontakt, Karte, Marke, Anfragen), und
   ein klebendes Feld, das nicht hineinpasst, klebt gar nicht: Es scrollt mit
   und laeuft oben unter die Kopfleiste. Deshalb bekommt sie eine Hoehe und
   rollt in sich selbst -- „Nachricht senden" steht dann immer da, wo man ihn
   sucht. */
@media (min-width: 900px) {
  .vp-seite > #vp-cover:not(:empty) ~ .rail.right {
    /* Ausdruecklich klebend: `discover.css` stellt jede rechte Schiene unter
       1400 Pixeln statisch -- eine Regel fuer das Entdecken, die diese Seite
       mitliest, weil sie dieselbe Datei laedt. */
    position: sticky;
    /* Direkt unter der Kopfleiste: Ihren Abstand bringt die Schiene mit
       ihrem eigenen Innenrand schon mit -- beides zusammen war ein Band. */
    top: var(--appbar-hoehe, 61px);
    align-self: start;
    max-height: calc(100vh - var(--appbar-hoehe, 61px) - var(--spacing-lg));
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* Ein Schalter in einer Filterspalte: eine eigene Zeile mit weicher Linie,
   davor der Haken. Das Wort bleibt dunkel -- die Farbe traegt der Haken, und
   zwei farbige Dinge nebeneinander streiten sich. */
.vp-schalterwahl {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  padding: 9px var(--spacing-md);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-control);
  cursor: pointer;
  color: var(--color-text-primary);
}
.vp-schalterwahl:last-child { margin-bottom: 0; }
.vp-schalterwahl:hover { border-color: var(--color-text-tertiary); }

/* Der Haken selbst gezeichnet: Das Kaestchen des Systems sieht auf jedem
   Betriebssystem anders aus, und diese Anwendung zeichnet ihre Schalter
   ueberall selbst. */
.vp-schalterwahl input {
  appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: 6px;
  background: var(--color-surface-primary);
  cursor: inherit;
}
.vp-schalterwahl input:checked {
  border-color: var(--color-brand-primary-action);
  background: var(--color-brand-primary-action)
    /* Der Haken als Bild: ein Pfad, keine zweite Schriftart. */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 15px no-repeat;
}
.vp-schalterwahl input:focus-visible {
  outline: 2px solid var(--color-brand-primary-action);
  outline-offset: 2px;
}
/* Der letzte laesst sich nicht ausschalten -- und sieht dabei aus wie vorher:
   Ein ausgegrauter Haken saehe aus, als gaelte er nicht mehr. */
.vp-schalterwahl input[disabled] { cursor: default; }
.vp-schalterwahl:has(input[disabled]) { cursor: default; }

/* Die selbst gewaehlte Spanne: zwei Datumsfelder mit einem Strich dazwischen. */
.vp-zeitraum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}
.vp-bis { color: var(--color-text-tertiary); }

/* Der Knopf zur Spanne steht unter den Wahlen und zeigt, was gilt. */
.vp-spanne {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  margin-top: var(--spacing-sm);
  padding: 9px var(--spacing-md);
  border: 1px solid var(--color-brand-primary-action);
  border-radius: var(--radius-control);
  background: var(--color-surface-primary);
  font: var(--typography-body);
  color: var(--color-brand-primary-action);
  text-align: left;
  cursor: pointer;
}

/* Was gerade einschraenkt, steht als Marke ueber der Liste -- auch wenn der
   Filter zugeklappt ist. Sonst sah man eine kurze Liste und wusste nicht, ob
   sie kurz ist oder nur beschnitten. */
.vp-marken {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}
.vp-filtermarke {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px var(--spacing-sm) 5px var(--spacing-md);
  border-radius: 999px;
  background: var(--color-surface-brand-subtle, var(--color-surface-secondary));
  font: var(--typography-metadata);
  font-weight: 600;
  color: var(--color-brand-primary-action);
}
.vp-filtermarke button {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: .75;
}
.vp-filtermarke button:hover { opacity: 1; }
.vp-filtermarke svg.i { width: 14px; height: 14px; }
.vp-markenweg {
  margin-left: var(--spacing-sm);
  border: 0;
  background: none;
  font: var(--typography-metadata);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.vp-markenweg:hover { color: var(--color-brand-primary-action); }

/* Der Folgen-Schalter im Kopf, unter der Note.
 *
 * Dieselbe Stelle wie in der App: neben dem Namen naehme er ihm die Breite,
 * und der bricht dann um. Links ausgerichtet und nur so breit wie sein Wort --
 * ein Knopf ueber die halbe Karte sieht aus wie die Hauptsache, und die
 * Hauptsache ist der Veranstalter. */
/* `.vp-tat-kopf` gab es fuer die Knoepfe unter dem Namen. Sie stehen seit dem
   9. September 2026 oben in der Spalte -- zusammen mit „Nachricht senden",
   wo man sie sucht --, und die Klasse wird nirgends mehr vergeben. */

/* Welche Veranstaltung eine Stimme meint. Ein Verweis, weil man beim Lesen
   fast immer wissen will, worueber gesprochen wird. */
.vp-stimme-event {
  display: block;
  margin-top: 2px;
  font: var(--typography-metadata);
  color: var(--color-brand-primary-action);
  text-decoration: none;
}
.vp-stimme-event:hover { text-decoration: underline; }
/* Die Antwort des Veranstalters steht eingerueckt darunter -- sie gehoert zur
   Stimme und ist nicht die naechste. */
.vp-stimme-antwort {
  margin: var(--spacing-xs) 0 0 var(--spacing-md);
  padding-left: var(--spacing-md);
  border-left: 2px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
}

/* Die Sternenreihe im Reiter „Bewertungen".
   Ohne `.review-stars`: Diese Klasse faerbt ihre Sterne in die Hausfarbe
   (`event.css`), und hier sollen sie golden sein -- derselbe Stern wie ueber
   dem Namen. Gold und Grau kommen damit aus `svg.i.gold` und `svg.i.muted`;
   hier steht nur die Groesse und die Luft zum Wort. */
.tab .vp-reitersterne { display: inline-flex; margin-right: 6px; vertical-align: -2px; }
.tab .vp-reitersterne svg.i { width: 13px; height: 13px; margin-right: 1px; }