/* Verwaltung Sport Alm Bayrischzell
   ----------------------------------
   Bewusst nuechtern. Wer hier hereinkommt, will eine Zahl aendern und
   wieder raus. Grosse Klickflaechen, kraeftige Schrift, viel Luft.
   Keine Effekte, die vom Inhalt ablenken. */

:root {
  --v-tinte: #1c1c1c;
  --v-grau: #5c5c5c;
  --v-linie: #d8d8d8;
  --v-flaeche: #f6f6f6;
  --v-signal: #86b62d;
  --v-warn: #c0392b;
  --v-radius: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;              /* bewusst gross, wird oft am Handy bedient */
  line-height: 1.5;
  color: var(--v-tinte);
  background: #fff;
}

h1 { font-size: 1.7rem; margin: 0 0 .3em; }
h2 { font-size: 1.15rem; margin: 0 0 .4em; }

/* ---------- Kopf ---------- */

/* ==========================================================
   Rahmen: Navigation links, Inhalt rechts
   ========================================================== */

.vrahmen { display: grid; grid-template-columns: 258px 1fr; min-height: 100vh; }

/* Die Leiste bleibt beim Scrollen stehen. Bei langen Seiten wie der
   Textverwaltung waere es sonst laestig, zum Wechseln erst hochzuscrollen. */
.vleiste {
  background: #1c1c1c; color: #d0d0d0;
  display: flex; flex-direction: column;
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
}

.vleiste__marke {
  display: block; padding: 20px 20px 18px; text-decoration: none;
  border-bottom: 1px solid #2e2e2e;
}
.vleiste__marke-gross { display: block; color: #fff; font-weight: 700; font-size: 1.05rem; }
.vleiste__marke-klein { display: block; color: #8a8a8a; font-size: .78rem; letter-spacing: .04em; }

.vnavi { flex: 1; padding: 14px 0; }
.vnavi__gruppe {
  margin: 18px 20px 6px; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .08em; color: #6a6a6a;
}
.vnavi__liste { list-style: none; margin: 0; padding: 0; }

.vnavi__punkt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 20px; color: #d0d0d0; text-decoration: none; font-size: .92rem;
  border-left: 3px solid transparent;
}
.vnavi__punkt:hover { background: #262626; color: #fff; }
/* Der aktive Punkt traegt Farbe UND Flaeche. Nur Farbe ist auf dunklem
   Grund zu schwach, das war in der alten Kopfzeile schon grenzwertig. */
.vnavi__punkt.ist-hier {
  background: #2b2b2b; color: #fff; border-left-color: var(--v-signal);
}
.vnavi__symbol { width: 18px; height: 18px; flex: none; opacity: .75; }
.vnavi__punkt.ist-hier .vnavi__symbol { opacity: 1; color: var(--v-signal); }

.vnavi__punkt--spaeter { color: #5f5f5f; cursor: default; }
.vnavi__punkt--spaeter:hover { background: none; color: #5f5f5f; }
/* Die Leiste ist schmal, deshalb darf die Marke nicht umbrechen. Sonst
   steht "in" und "Arbeit" untereinander und der Punkt wird doppelt hoch. */
.vnavi__punkt--spaeter em {
  font-style: normal; font-size: .64rem; margin-left: auto;
  background: #2b2b2b; padding: 2px 6px; border-radius: 999px; color: #7a7a7a;
  white-space: nowrap; flex: none;
}
.vnavi__punkt--spaeter > span { overflow: hidden; text-overflow: ellipsis; }

.vleiste__fuss {
  border-top: 1px solid #2e2e2e; padding: 14px 20px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.vleiste__ansehen { color: #d0d0d0; font-size: .88rem; }
.vleiste__wer { margin: 0; color: #9a9a9a; font-size: .78rem; line-height: 1.4; word-break: break-all; }
.vleiste__wer strong { color: #e6e6e6; font-weight: 600; }
.vcode { font-family: ui-monospace, Menlo, monospace; font-size: 1.35rem; letter-spacing: .08em; background: #fff; padding: 6px 12px; border-radius: 6px; border: 1px dashed var(--v-linie); display: inline-block; margin: 6px 0; }
.vzugaenge { width: 100%; border-collapse: collapse; margin: 8px 0 18px; }
.vzugaenge th, .vzugaenge td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--v-linie); font-size: .92rem; vertical-align: middle; }
.vzugaenge th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--v-grau); }
.vformular-schmal { display: grid; gap: 8px; max-width: 420px; }
.vformular-schmal input { padding: 12px; font: inherit; border: 1px solid var(--v-linie); border-radius: var(--v-radius); }
.vformular-schmal label { font-size: .88rem; font-weight: 600; margin-top: 6px; }
.vleiste__ansehen:hover { color: #fff; }

/* Sprungmarke fuer die Tastaturbedienung. Sichtbar nur, wenn sie den
   Fokus hat, sonst waere sie ein Fremdkoerper. */
.vsprung {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--v-signal); color: #1c1c1c; padding: 10px 16px; font-weight: 600;
}
.vsprung:focus { left: 0; }

.vabmelden { margin: 0; }
.vabmelden button {
  background: none; border: 1px solid #4a4a4a; color: #d0d0d0;
  padding: 7px 14px; border-radius: 6px; cursor: pointer; font: inherit; font-size: .85rem;
  width: 100%;
}
.vabmelden button:hover { border-color: #888; color: #fff; }

.vinhalt { max-width: 1040px; padding: 30px 34px 90px; }

/* ---------- Meldungen ---------- */

.vmeldung {
  padding: 12px 16px; border-radius: var(--v-radius); margin: 0 0 22px;
  border-left: 4px solid var(--v-signal); background: #f2f7e8;
}
.vmeldung--schlecht { border-left-color: var(--v-warn); background: #fdf0ee; }

.vhinweis { color: var(--v-grau); margin: 0 0 26px; max-width: 60ch; }
.vklein { font-size: .88rem; color: var(--v-grau); }
.vzurueck { margin: 0 0 8px; }
.vzurueck a { color: var(--v-grau); text-decoration: none; font-size: .92rem; }

/* ---------- Kacheln auf der Übersicht ---------- */

.vkacheln {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px; margin: 26px 0 34px;
}
.vkachel {
  display: block; padding: 20px; text-decoration: none; color: inherit;
  border: 1px solid var(--v-linie); border-radius: var(--v-radius);
  background: #fff;
}
.vkachel:hover { border-color: var(--v-tinte); }
.vkachel__name { display: block; font-size: 1.15rem; font-weight: 700; }
.vkachel__stand { display: block; font-size: .85rem; color: var(--v-signal); font-weight: 600; margin: 2px 0 8px; }
.vkachel__text { display: block; font-size: .92rem; color: var(--v-grau); }

/* ---------- Liste der Preislisten ---------- */

.vliste { list-style: none; margin: 0 0 34px; padding: 0; }
.vliste li { border-bottom: 1px solid var(--v-linie); }
.vliste a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 4px; text-decoration: none; color: inherit;
}
.vliste a:hover { background: var(--v-flaeche); }
.vliste__name { font-weight: 600; }
.vliste__zahl { color: var(--v-grau); font-size: .9rem; }

/* ---------- Tabelle zum Bearbeiten ---------- */

.vtabellenrahmen { overflow-x: auto; border: 1px solid var(--v-linie); border-radius: var(--v-radius); }
.vtabelle { width: 100%; border-collapse: collapse; font-size: .95rem; }
.vtabelle th {
  text-align: left; padding: 10px 8px; background: var(--v-flaeche);
  font-size: .82rem; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--v-linie); white-space: nowrap;
}
.vtabelle td { padding: 6px; border-bottom: 1px solid #ececec; vertical-align: top; }
.vtabelle__bez { min-width: 220px; }
.vtabelle__weg { width: 54px; text-align: center; }
.vtabelle__neu td { background: #fbfbfb; }

.vtabelle input[type="text"] {
  width: 100%; padding: 9px 10px; font: inherit;
  border: 1px solid var(--v-linie); border-radius: 6px; background: #fff;
}
.vtabelle input[type="text"]:focus {
  outline: 2px solid var(--v-signal); outline-offset: -1px; border-color: var(--v-signal);
}
/* Zahlenspalten schmaler und rechtsbuendig, wie auf der Webseite */
.vtabelle td:not(.vtabelle__bez) input { text-align: right; min-width: 78px; }
.vklein-feld { margin-top: 5px; font-size: .85rem !important; }
.vtabelle input[type="checkbox"] { width: 20px; height: 20px; }

/* ---------- Knoepfe ---------- */

.vaktionen { display: flex; gap: 12px; align-items: center; margin: 22px 0 10px; flex-wrap: wrap; }
.vknopf {
  display: inline-block; padding: 13px 26px; font: inherit; font-weight: 600;
  border: 0; border-radius: var(--v-radius); cursor: pointer;
  background: var(--v-signal); color: #14210a; text-decoration: none;
}
.vknopf:hover { background: #77a327; }
.vknopf--still { background: none; border: 1px solid var(--v-linie); color: var(--v-tinte); }
.vknopf--still:hover { background: var(--v-flaeche); border-color: var(--v-tinte); }

/* ---------- Kasten ---------- */

.vkasten {
  border: 1px solid var(--v-linie); border-radius: var(--v-radius);
  padding: 20px; background: var(--v-flaeche); max-width: 62ch;
}
.vkasten p { margin: 0 0 10px; }
.vkasten p:last-child { margin-bottom: 0; }
.vkasten code { background: #fff; padding: 2px 6px; border-radius: 4px; font-size: .9em; }

/* ---------- Anmeldeseite ----------
   Neu gestaltet zum Livegang (06.10.2026, Michaels Wunsch): mittig, ruhig,
   im Schwarz der Webseite, damit man sofort sieht, wo man ist. Das Foto
   im Hintergrund ist auf Michaels Wunsch wieder raus, schlicht schwarz. */

.vanmeldeseite {
  min-height: 100vh; margin: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 16px;
  background: #000;
}
.vanmeldung { width: min(100%, 420px); }
.vanmeldung__kopf { text-align: center; margin-bottom: 26px; }
.vanmeldung__logo { width: 190px; height: auto; display: inline-block; }
.vanmeldung__karte {
  background: #fff; border-radius: 14px; padding: 34px 34px 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.25);
}
.vanmeldung h1 { margin: 0 0 4px; font-size: 1.45rem; letter-spacing: -.01em; }
.vanmeldung__unter { margin: 0 0 22px; color: var(--v-grau); font-size: .95rem; }
.vanmeldung__formular { display: grid; gap: 8px; }
.vanmeldung__formular label { font-size: .86rem; font-weight: 600; margin-top: 6px; }
.vanmeldung__formular input {
  padding: 13px 14px; font: inherit; font-size: 1rem;
  border: 1px solid var(--v-linie); border-radius: var(--v-radius); background: #fafafa;
}
.vanmeldung__formular input:focus {
  outline: 3px solid rgba(134,182,45,.35); border-color: var(--v-signal); background: #fff;
}
.vknopf--voll { width: 100%; margin-top: 16px; padding: 14px; }
.vanmeldung__hilfe { margin: 18px 0 0; font-size: .82rem; color: var(--v-grau); text-align: center; }
.vanmeldung__fuss { text-align: center; margin: 20px 0 0; font-size: .86rem; }
.vanmeldung__fuss a { color: rgba(255,255,255,.75); text-decoration: none; }
.vanmeldung__fuss a:hover { color: #fff; text-decoration: underline; }
.vanmeldung .vmeldung { margin: 0 0 14px; }

.vnurvorleser {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

@media (max-width: 700px) {
  /* Die beiden Regeln fuer .vkopf__innen und .vmenue standen hier bis zum
     Umbau auf die Seitenleiste. Beide Klassen gibt es nicht mehr. */
  .vinhalt { padding: 22px 14px 60px; }
  .vknopf { width: 100%; text-align: center; }
  .vaktionen { flex-direction: column; align-items: stretch; }
}

/* Zusatzfeld einklappbar: Es braucht nur eine von acht Zeilen, steht aber
   sonst leer unter jeder. */
.vzusatz { margin-top: 4px; }
.vzusatz summary {
  cursor: pointer; font-size: .78rem; color: var(--v-grau);
  list-style: none; padding: 2px 0;
}
.vzusatz summary::-webkit-details-marker { display: none; }
.vzusatz summary::before { content: '+ '; font-weight: 700; }
.vzusatz summary:hover { color: var(--v-tinte); }
.vzusatz[open] summary::before { content: '– '; }

/* Bereiche, die noch nicht gebaut sind. Sichtbar, aber nicht anklickbar:
   Ein Menuepunkt, der ins Leere fuehrt, ist schlimmer als keiner. */
.vkachel--spaeter { opacity: .55; cursor: default; }
.vkachel--spaeter:hover { border-color: var(--v-linie); }
/* Der Zusatz " in Arbeit" wurde hier frueher per CSS angehaengt. Seit die
   Kacheln aus verwaltung_bereiche() kommen, steht er als Marke im HTML.
   Beides zusammen ergab "Oeffnungszeiten in Arbeit in Arbeit". */

.vliste__wo { display: block; font-size: .8rem; font-weight: 400; color: var(--v-grau); margin-top: 2px; }

/* ---------- Bilder ---------- */

.vbilder { display: grid; gap: 18px; margin-top: 26px; }

.vbild {
  display: grid; gap: 20px;
  grid-template-columns: 220px 1fr;
  align-items: start;
  border: 1px solid var(--v-linie); border-radius: var(--v-radius);
  padding: 18px; background: #fff; margin: 0;
}

.vbild__vorschau {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px;
  background: var(--v-flaeche); display: flex; align-items: center; justify-content: center;
}
.vbild__vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vbild__leer { font-size: .82rem; color: #9a9a9a; }

.vbild__text h2 { margin: 0 0 12px; font-size: 1.08rem; }
.vbild__marke { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 4px; }
.vbild__text input[type="text"] {
  width: 100%; padding: 10px; font: inherit;
  border: 1px solid var(--v-linie); border-radius: 6px;
}
.vbild__text input[type="text"]:focus { outline: 2px solid var(--v-signal); border-color: var(--v-signal); }
.vbild__text .vklein { margin: 6px 0 0; }

.vbild__aktionen { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* Das echte Dateifeld ist unsichtbar, geklickt wird die Beschriftung.
   Sonst sieht es auf jedem Browser anders und meist unschön aus. */
.vbild__waehlen { position: relative; overflow: hidden; cursor: pointer; }
.vbild__waehlen input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%;
}

@media (max-width: 640px) {
  .vbild { grid-template-columns: 1fr; }
  .vbild__vorschau { aspect-ratio: 16 / 9; }
}

/* Saison-Schalter auf der Übersicht */
/* Der alte Saisonmiete-Kasten stand hier und ist nach Verwaltung > Saison
   umgezogen. Seine Regeln (.vschalter, .vschalter__stand) sind entfallen,
   weil sie niemand mehr benutzt hat.
   Haken mit Beschriftung daneben, nicht auseinandergezogen. */
.vhaken { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; cursor: pointer; }
.vhaken input { width: 18px; height: 18px; flex: none; }

/* ==========================================================
   Saison umschalten
   ========================================================== */

/* Was gerade gilt, gross und farbig. Wer die Seite oeffnet, soll den
   Stand in einer halben Sekunde erfassen, ohne zu lesen. */
.vsaison {
  border-radius: var(--v-radius);
  padding: 22px 26px;
  margin-bottom: 26px;
  border: 2px solid;
}
.vsaison--winter { background: #eef4fb; border-color: #b8d0ea; }
.vsaison--sommer { background: #f2f8e8; border-color: #c3dd95; }
.vsaison__marke {
  margin: 0; font-size: .82rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--v-grau);
}
.vsaison__name { margin: 2px 0 0; font-size: 2rem; font-weight: 700; line-height: 1.1; }
.vsaison--winter .vsaison__name { color: #1c5390; }
.vsaison--sommer .vsaison__name { color: #4d7a12; }
.vsaison__stand { margin: 6px 0 0; font-size: .85rem; color: var(--v-grau); }

.vblock {
  border: 1px solid var(--v-linie);
  border-radius: var(--v-radius);
  padding: 22px 26px;
  margin-bottom: 26px;
}
.vblock h2 { margin-top: 0; font-size: 1.1rem; }

/* Winter und Sommer nebeneinander, damit der Unterschied sichtbar ist,
   bevor geklickt wird. Auf dem Handy untereinander. */
.vvergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 18px 0; }
.vvergleich h3 { margin: 0 0 8px; font-size: .95rem; }
.vvergleich ul { margin: 0; padding-left: 18px; }
.vvergleich li { margin-bottom: 5px; font-size: .9rem; line-height: 1.45; }

.vhinweis--wichtig {
  background: #fdf6e3; border-left: 3px solid #d9a441;
  padding: 12px 16px; border-radius: 0 var(--v-radius) var(--v-radius) 0;
}

.vsaison__form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }
.vknopf--gross { font-size: 1rem; padding: 14px 26px; }

.vkachel--saison .vkachel__stand { font-weight: 700; color: var(--v-tinte); }

.vblock code {
  background: var(--v-flaeche); padding: 2px 6px; border-radius: 4px;
  font-size: .82rem; word-break: break-all;
}

@media (max-width: 700px) {
  .vvergleich { grid-template-columns: 1fr; gap: 18px; }
  .vsaison__name { font-size: 1.6rem; }
}

/* ==========================================================
   Mediathek
   ========================================================== */

.vhochladen { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.vhochladen__feld { flex: 1 1 220px; }
.vhochladen__feld input { width: 100%; }

.vfilter {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
  margin: 24px 0 16px;
}
.vfilter__suche { display: flex; gap: 8px; margin: 0; }
.vfilter__suche input { min-width: 220px; }
.vfilter__arten { display: flex; gap: 6px; flex-wrap: wrap; }
.vfilter__arten a {
  padding: 6px 14px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--v-linie); color: var(--v-tinte); font-size: .88rem;
}
.vfilter__arten a:hover { border-color: var(--v-tinte); }
.vfilter__arten a.ist-hier {
  background: var(--v-tinte); color: #fff; border-color: var(--v-tinte);
}

/* Raster statt Liste: Bei Bildern entscheidet das Auge, nicht der Dateiname. */
.vmedien {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}
.vmedium {
  margin: 0; border: 1px solid var(--v-linie); border-radius: var(--v-radius);
  overflow: hidden; display: flex; flex-direction: column; background: #fff;
}
.vmedium__bild { aspect-ratio: 4 / 3; background: var(--v-flaeche); overflow: hidden; }
.vmedium__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* PDFs haben kein Vorschaubild. Statt einer leeren Flaeche eine klare
   Kennzeichnung, die zugleich der Link zur Datei ist. */
.vmedium__pdf {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; color: var(--v-tinte); padding: 12px; text-align: center;
}
.vmedium__pdf:hover { background: #ececec; }
.vmedium__pdfmarke {
  background: var(--v-warn); color: #fff; font-weight: 700; font-size: .8rem;
  padding: 4px 12px; border-radius: 4px; letter-spacing: .06em;
}
.vmedium__pdfname { font-size: .78rem; color: var(--v-grau); word-break: break-all; }

.vmedium__text { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.vmedium__titel { margin: 0; font-weight: 600; font-size: .92rem; line-height: 1.3; }
.vmedium__text .vklein { margin: 0; }

.vmedium__benutzt { margin: 4px 0 0; font-size: .78rem; color: #2f6d1f; }
.vmedium__frei    { margin: 4px 0 0; font-size: .78rem; color: var(--v-grau); }

.vmedium__mehr { margin-top: 8px; }
.vmedium__mehr summary { cursor: pointer; font-size: .84rem; color: var(--v-grau); }
.vmedium__mehr summary:hover { color: var(--v-tinte); }
.vmedium__mehr form { margin: 10px 0 0; }
.vmedium__mehr input[type="text"] { width: 100%; }
.vmedium__mehr code { font-size: .72rem; word-break: break-all; }

.vknopf--warn { background: var(--v-warn); border-color: var(--v-warn); color: #fff; }
.vknopf--warn:hover:not([disabled]) { background: #a5312a; border-color: #a5312a; }
.vknopf[disabled] { opacity: .45; cursor: not-allowed; }

@media (max-width: 640px) {
  .vfilter { flex-direction: column; align-items: stretch; }
  .vfilter__suche input { min-width: 0; flex: 1; }
}

/* Auswahl aus der Mediathek in der Bilderverwaltung */
.vbild__mediathek { margin: -8px 0 22px; padding-left: 2px; font-size: .86rem; }
.vbild__mediathek a { color: var(--v-grau); }
.vbild__mediathek a:hover { color: var(--v-tinte); }
.vbild__mediathek.ist-offen {
  border: 1px solid var(--v-linie); border-radius: var(--v-radius);
  padding: 14px 16px; margin-bottom: 26px; background: var(--v-flaeche);
}
.vbild__mediathek-kopf {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin: 0 0 4px; flex-wrap: wrap;
}
.vbild__mediathek-kopf a { text-decoration: none; }
.vwahl {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px; margin-top: 12px;
}
.vwahl__form { margin: 0; }
.vwahl__stueck {
  width: 100%; padding: 0; border: 2px solid transparent; border-radius: 6px;
  background: var(--v-flaeche); cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column; text-align: left;
}
.vwahl__stueck img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.vwahl__stueck span {
  font-size: .7rem; padding: 4px 6px; color: var(--v-grau);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vwahl__stueck:hover { border-color: var(--v-tinte); }
/* Das Bild, das gerade an dieser Stelle steht, ist markiert. */
.vwahl__stueck.ist-hier { border-color: var(--v-signal); }
.vwahl__stueck.ist-hier span { color: var(--v-tinte); font-weight: 600; }

/* ==========================================================
   Texte
   ========================================================== */

.vseiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.vseite {
  display: block; padding: 16px 18px; border: 1px solid var(--v-linie);
  border-radius: var(--v-radius); text-decoration: none; color: var(--v-tinte);
  background: #fff;
}
.vseite:hover { border-color: var(--v-tinte); }
.vseite--leer { opacity: .55; }
.vseite__name { display: block; font-weight: 600; margin-bottom: 3px; }
.vseite__stand { display: block; font-size: .82rem; color: var(--v-grau); }

.vzurueck { margin: 0 0 6px; font-size: .88rem; }
.vtitel2 { margin: 0 0 6px; font-size: 1.5rem; }

.vhilfe summary { font-weight: 600; cursor: pointer; }
.vhilfe ul { margin: 12px 0 8px; padding-left: 18px; }
.vhilfe li { margin-bottom: 5px; font-size: .9rem; }
.vhilfe code {
  background: var(--v-flaeche); padding: 1px 6px; border-radius: 4px; font-size: .85rem;
}

.vtexte { margin-top: 22px; }
.vtextfeld {
  border: 1px solid var(--v-linie); border-left-width: 3px;
  border-radius: var(--v-radius); padding: 14px 16px; margin-bottom: 14px; background: #fff;
}
/* Geaenderte Felder sind sofort erkennbar, ohne dass man vergleichen muss. */
.vtextfeld.ist-geaendert { border-left-color: var(--v-signal); background: #fbfdf7; }
.vtextfeld__kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 6px; flex-wrap: wrap;
}
.vtextfeld__kopf label { font-weight: 600; font-size: .92rem; }
.vtextfeld__marke {
  font-size: .74rem; color: #4d7a12; background: #eef5e2;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.vtextfeld input[type="text"], .vtextfeld textarea { width: 100%; }
.vtextfeld textarea { line-height: 1.5; resize: vertical; font-family: inherit; }
.vtextfeld__standard { margin: 8px 0 0; font-size: .78rem; color: var(--v-grau); }
.vtextfeld__standard span { font-style: italic; }

.vtexte__fuss {
  position: sticky; bottom: 0; background: #fff; padding: 14px 0;
  border-top: 1px solid var(--v-linie); margin-top: 8px;
}

.vzuruecksetzen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vzuruecksetzen form { margin: 0; }

.vabschnitt {
  border: 1px solid var(--v-linie); border-radius: var(--v-radius);
  padding: 16px 18px; margin-bottom: 14px; background: #fff;
}
.vabschnitt.ist-versteckt { opacity: .6; border-style: dashed; }
.vabschnitt label { display: block; margin-bottom: 10px; }
.vabschnitt input[type="text"], .vabschnitt textarea { width: 100%; }
.vabschnitt textarea { font-family: inherit; line-height: 1.5; resize: vertical; }
.vabschnitt__reihe { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.vabschnitt__reihe .vhaken { margin-bottom: 0; }
.vabschnitt__werkzeuge {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--v-linie);
}
.vabschnitt__werkzeuge form { margin: 0; }
.vabschnitt--neu summary { font-weight: 600; cursor: pointer; }
.vabschnitt--neu form { margin-top: 14px; }


/* Auf schmalen Schirmen wandert die Leiste nach oben und wird flach.
   Eine 232 Pixel breite Spalte neben dem Inhalt geht auf dem Handy nicht,
   und ein Ausklappmenue braeuchte JavaScript fuer eine Sache, die auch
   ohne geht. */
@media (max-width: 860px) {
  .vrahmen { grid-template-columns: 1fr; }
  .vleiste { position: static; height: auto; }
  .vnavi { display: flex; flex-wrap: wrap; gap: 2px 0; padding: 8px 12px 12px; }
  .vnavi__gruppe {
    width: 100%; margin: 10px 8px 2px;
  }
  .vnavi__liste { display: flex; flex-wrap: wrap; gap: 4px; }
  .vnavi__punkt { padding: 7px 12px; border-left: 0; border-radius: 6px; }
  .vnavi__punkt.ist-hier { border-left: 0; }
  .vleiste__fuss { flex-direction: row; align-items: center; justify-content: space-between; }
  .vabmelden button { width: auto; }
  .vinhalt { padding: 22px 16px 70px; }
}

/* Wartung: unauffaellig unten, wird selten gebraucht */
.vwartung { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--v-linie); }
.vwartung summary { cursor: pointer; font-size: .85rem; color: var(--v-grau); }
.vwartung summary:hover { color: var(--v-tinte); }
.vwartung p { margin: 12px 0; max-width: 62ch; }

/* Überschrift, in die ein ganzer Absatz geschrieben wurde */
.vtextfeld.ist-zulang { border-left-color: #d9a441; background: #fdfaf3; }
.vtextfeld__warnung {
  margin: 0 0 10px; padding: 10px 14px; font-size: .85rem; line-height: 1.5;
  background: #fdf3dd; border-radius: var(--v-radius); color: #6b4f10;
}

/* Farbauswahl für das Statusfeld */
.vfarben { border: 0; margin: 0 0 16px; padding: 0; }
.vfarben legend { padding: 0; margin-bottom: 8px; }
.vfarbe {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; margin-bottom: 6px; cursor: pointer;
  border: 1px solid var(--v-linie); border-left-width: 4px; border-radius: var(--v-radius);
}
.vfarbe:hover { border-color: var(--v-tinte); }
.vfarbe input { margin-top: 3px; flex: none; }
.vfarbe span { display: flex; flex-direction: column; gap: 1px; }
.vfarbe strong { font-size: .92rem; }
.vfarbe em { font-style: normal; font-size: .8rem; color: var(--v-grau); }
/* Die Farbe des Balkens entspricht der auf der Seite */
.vfarbe--start     { border-left-color: #86b62d; }
.vfarbe--achtung   { border-left-color: #d9a441; }
.vfarbe--rueckgabe { border-left-color: #c0392b; }
.vfarbe:has(input:checked) { background: var(--v-flaeche); border-color: var(--v-tinte); }

/* Angaben zum Betrieb */
.vbetrieb__feld {
  border: 1px solid var(--v-linie); border-radius: var(--v-radius);
  padding: 14px 16px; margin-bottom: 12px; background: #fff;
}
.vbetrieb__feld > label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.vbetrieb__feld input[type="text"],
.vbetrieb__feld input[type="email"],
.vbetrieb__feld input[type="url"] { width: 100%; }
.vbetrieb__feld .vklein { margin: 6px 0 0; }
.vbetrieb__feld .vhaken { margin-bottom: 0; }

/* Eingabefelder in den Blöcken nutzen die Breite.
   Ohne diese Regel bleiben sie auf Browser-Standardbreite stehen, also
   rund 20 Zeichen, und der Rest des Blocks bleibt leer. */
.vblock input[type="text"],
.vblock input[type="url"],
.vblock input[type="email"],
.vblock textarea { width: 100%; max-width: 62ch; }
/* Nur die Beschriftungen ueber einem Eingabefeld sind Bloecke. Haken und
   Farbauswahl bleiben nebeneinander, sonst rutscht der Auswahlknopf ueber
   den Text. Genau das ist beim ersten Versuch passiert, weil ".vblock label"
   spezifischer ist als ".vfarbe" und die Flex-Regel ueberschrieben hat. */
.vblock label { display: block; margin-bottom: 12px; }
.vblock .vhaken,
.vblock .vfarbe { display: flex; }

/* ==========================================================
   Aktuelles (Ticker)
   ========================================================== */

.vzeitraum { display: flex; gap: 16px; flex-wrap: wrap; }
.vzeitraum label { flex: 1 1 200px; }
.vzeitraum input { width: 100%; }

.vmeldung {
  border: 1px solid var(--v-linie); border-left-width: 4px;
  border-radius: var(--v-radius); padding: 16px 18px; margin-bottom: 14px; background: #fff;
}
/* Die Farbe am Rand entspricht der auf der Seite */
.vmeldung--info    { border-left-color: #9a9a9a; }
.vmeldung--gut     { border-left-color: #86b62d; }
.vmeldung--achtung { border-left-color: #d9a441; }
/* Meldungen, die gerade nicht laufen, treten zurueck */
.vmeldung.ist-still { opacity: .62; background: var(--v-flaeche); }

.vmeldung__kopf { margin-bottom: 10px; }
.vmeldung__lage { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--v-grau); }
.vmeldung__punkt {
  width: 8px; height: 8px; border-radius: 50%; background: var(--v-signal); flex: none;
}
.vmeldung__punkt--aus { background: #b8b8b8; }

.vmeldung label { display: block; margin-bottom: 12px; }
.vmeldung input[type="text"] { width: 100%; }
.vmeldung__reihe { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.vmeldung__reihe .vhaken { margin-bottom: 0; }
.vmeldung__werkzeuge {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--v-linie);
}
.vmeldung__werkzeuge form { margin: 0; }

/* Farbauswahl im Ticker, dieselbe Optik wie beim Saisonstand */
.vfarbe--ticker-info    { border-left-color: #9a9a9a; }
.vfarbe--ticker-gut     { border-left-color: #86b62d; }
.vfarbe--ticker-achtung { border-left-color: #d9a441; }

/* Der Meldungstext darf die volle Breite nutzen.
   Die allgemeine Regel begrenzt Eingabefelder auf 62 Zeichen, was für
   Fließtext richtig ist. Eine Ticker-Zeile will man aber ganz sehen,
   sonst schreibt man länger als man denkt. */
.vblock .vzeitraum input,
.vblock input[name="text"] { max-width: none; }

/* Marke "in Arbeit" auf den Kacheln.
   Als kleine Kapsel wie in der Seitenleiste, nicht kursiv im Namen: So
   bricht sie nicht mitten um und liest sich als Zustand, nicht als Teil
   der Überschrift. */
.vkachel__name em {
  font-style: normal; font-size: .68rem; white-space: nowrap;
  background: #e4e4e4; color: #6a6a6a;
  padding: 2px 8px; border-radius: 999px; margin-left: 6px;
  vertical-align: middle;
}

/* ==========================================================
   Öffnungszeiten
   ========================================================== */

.vsaisonwahl { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.vsaisonwahl__punkt {
  flex: 1 1 200px; padding: 14px 18px; border: 1px solid var(--v-linie);
  border-radius: var(--v-radius); text-decoration: none; color: var(--v-tinte);
  background: #fff;
}
.vsaisonwahl__punkt:hover { border-color: var(--v-tinte); }
.vsaisonwahl__punkt strong { display: block; font-size: .98rem; }
.vsaisonwahl__punkt em { font-style: normal; font-size: .8rem; color: var(--v-grau); }
.vsaisonwahl__punkt.ist-hier {
  border-color: var(--v-tinte); border-width: 2px; background: var(--v-flaeche);
}

.vzeittabelle { width: 100%; border-collapse: collapse; margin: 16px 0; }
.vzeittabelle th, .vzeittabelle td { padding: 7px 10px 7px 0; text-align: left; vertical-align: middle; }
.vzeittabelle thead th {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--v-grau); border-bottom: 1px solid var(--v-linie); padding-bottom: 8px;
}
.vzeittabelle tbody th { font-weight: 600; font-size: .92rem; width: 8.5em; }
.vzeittabelle input[type="time"] { width: 8.5em; }
/* Geschlossene Tage treten zurück, damit man sie beim Überfliegen erkennt */
.vzeittabelle tr.ist-zu tbody th, .vzeittabelle tr.ist-zu th { color: var(--v-grau); font-weight: 400; }

.vzeittabelle--sonder tbody th { width: auto; font-weight: 400; }
.vzeittabelle--sonder form { margin: 0; }

.vsondertag {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--v-linie);
}
.vsondertag label { margin-bottom: 0; }
.vsondertag__hinweis { flex: 1 1 220px; }
.vsondertag__hinweis input { width: 100%; }

@media (max-width: 640px) {
  .vzeittabelle, .vzeittabelle thead, .vzeittabelle tbody,
  .vzeittabelle tr, .vzeittabelle th, .vzeittabelle td { display: block; }
  .vzeittabelle thead { display: none; }
  .vzeittabelle tr { border-bottom: 1px solid var(--v-linie); padding-bottom: 10px; margin-bottom: 10px; }
  .vzeittabelle td { display: inline-block; }
}

/* Google als Quelle für die Öffnungszeiten */
.vgoogle.ist-an { border-left: 4px solid var(--v-signal); }
.vgoogle__lage {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #f3f8ea; padding: 10px 14px; border-radius: var(--v-radius);
  font-size: .88rem; margin: 12px 0;
}
.vgoogle__jetzt { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--v-linie); }
/* Gesperrte Felder sollen erkennbar sein, nicht nur nicht bedienbar */
.vzeittabelle input[disabled] { background: var(--v-flaeche); color: var(--v-grau); cursor: not-allowed; }

/* ==========================================================
   Besucherzahlen
   ========================================================== */

/* Zeitraumwahl. Bewusst wie die Saisonwahl aufgebaut, nur schmaler:
   Wer das eine bedienen kann, erkennt das andere sofort wieder. */
.vzeitwahl { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.vzeitwahl__punkt {
  padding: 8px 14px; border: 1px solid var(--v-linie); border-radius: var(--v-radius);
  text-decoration: none; color: var(--v-tinte); background: #fff; font-size: .88rem;
}
.vzeitwahl__punkt:hover { border-color: var(--v-tinte); }
.vzeitwahl__punkt.ist-hier {
  border-color: var(--v-tinte); border-width: 2px; background: var(--v-flaeche); font-weight: 600;
}

/* Die zwei grossen Zahlen oben. */
.vzahlen { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.vzahlen__feld {
  flex: 1 1 200px; padding: 16px 18px; background: var(--v-flaeche);
  border-radius: var(--v-radius);
}
.vzahlen__feld strong { display: block; font-size: 2rem; line-height: 1.1; }
.vzahlen__feld span { display: block; font-size: .92rem; font-weight: 600; margin-top: 2px; }
.vzahlen__feld em { font-style: normal; font-size: .8rem; color: var(--v-grau); }

/* Balken statt Diagramm: braucht kein JavaScript, druckt sauber und ist
   auch auf dem Handy lesbar. Die Breite kommt als Prozentwert aus PHP. */
.vbalken__zelle { width: 45%; padding-right: 0 !important; }
.vbalken {
  display: block; height: 9px; border-radius: 5px;
  background: var(--v-signal); min-width: 2px;
}

/* In der Verlaufstabelle stehen viele Zeilen, deshalb enger gesetzt. */
.vzeittabelle--verlauf tbody th { font-weight: 400; font-size: .86rem; width: 9em; }
.vzeittabelle--verlauf td { font-size: .86rem; }

@media (max-width: 620px) {
  .vzahlen__feld strong { font-size: 1.6rem; }
  .vbalken__zelle { width: 30%; }
}