/* ==========================================================================
   VLISTA — Komponenten
   Kopfzeile, Navigation, Schaltflächen, Marker.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Kopfzeile
   -------------------------------------------------------------------------- */

.vl-header {
  position: sticky;
  top: 0;
  z-index: var(--vl-z-header);
  background-color: color-mix(in srgb, var(--vl-paper) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: var(--vl-hairline) solid transparent;
  transition:
    border-color var(--vl-dur) var(--vl-ease),
    background-color var(--vl-dur) var(--vl-ease);
}

/* Wird von main.js gesetzt, sobald die Seite den Hero verlassen hat */
.vl-header[data-lifted="true"] {
  border-bottom-color: var(--vl-rule);
  background-color: color-mix(in srgb, var(--vl-paper) 96%, transparent);
}

/* Auf der Startseite legt sich der Kopf direkt über das Hero-Bild — ohne
   eigene Fläche, nur die Schrift schwebt frei überm Motiv. Der Schatten
   hält sie lesbar, egal wie hell oder dunkel das jeweilige Bild dort ist.
   Sobald gescrollt wird (data-lifted), verhält er sich wie überall sonst. */
.vl-header--ueberlagert:not([data-lifted="true"]) {
  background-color: transparent;
  backdrop-filter: none;
}

.vl-header--ueberlagert:not([data-lifted="true"]) .vl-header__inner {
  text-shadow: 0 1px 12px rgb(16 16 16 / 0.4);
}

.vl-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vl-gap-7);
  min-height: 4.25rem;
}

/* Wortmarke als Bild. Die Datei liegt in doppelter Auflösung vor, die
   Anzeigehöhe steht hier — erzeugt von tools/build_logo.py. */
.vl-mark {
  flex: none;
  display: block;
  line-height: 0;
}

.vl-mark img {
  display: block;
  height: 1.9rem;
  width: auto;
  /* reset.css legt allen Bildern eine Platzhalterfläche unter, damit Fotos
     beim Laden nicht flackern. Eine freigestellte Marke braucht das nicht —
     dort würde daraus ein sichtbarer Kasten. */
  background-color: transparent;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.vl-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(var(--vl-gap-5), 1.8vw, var(--vl-gap-7));
  list-style: none;
  margin: 0;
  padding: 0;
}

.vl-nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--vl-gap-3);
  color: var(--vl-ink);
  font-family: var(--vl-font-display);
  font-size: var(--vl-size-label);
  font-weight: 600;
  letter-spacing: var(--vl-track-label);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Unterstrich wächst aus der linken Kante — nicht aus der Mitte,
   das liest sich gerichteter. */
.vl-nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0.15rem;
  height: var(--vl-hairline);
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--vl-dur) var(--vl-ease);
}

.vl-nav__link:hover::after,
.vl-nav__link:focus-visible::after {
  transform: scaleX(1);
  /* Der Strich färbt sich beim Ansteuern, der Schriftzug bleibt schwarz —
     so bleibt die Zeile ruhig und die Rückmeldung trotzdem deutlich. */
  background-color: var(--vl-signal);
}

.vl-nav__link[aria-current="page"] {
  color: var(--vl-signal);
}

.vl-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Sprachwahl
   Sitzt als letzter Eintrag in der Navigation, damit sie rechts neben
   „Kontakt" steht und im schmalen Fenster von selbst ins eingeblendete Menü
   wandert.
   -------------------------------------------------------------------------- */

.vl-nav__sprache {
  display: flex;
  align-items: center;
}

/* Feiner Strich als Zäsur zur Navigation — die Sprachwahl ist ein Werkzeug,
   kein weiterer Menüpunkt. */
.vl-nav__sprache::before {
  content: "";
  width: var(--vl-hairline);
  height: 1rem;
  margin-right: clamp(var(--vl-gap-5), 1.8vw, var(--vl-gap-7));
  background-color: var(--vl-rule);
  flex: none;
}

.vl-sprache {
  position: relative;
}

.vl-sprache__knopf {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--vl-ink);
  cursor: pointer;
  transition: color var(--vl-dur) var(--vl-ease);
}

.vl-sprache__knopf:hover,
.vl-sprache__knopf[aria-expanded="true"] {
  color: var(--vl-signal);
}

.vl-sprache__globus {
  display: block;
}

.vl-sprache__liste {
  position: absolute;
  top: calc(100% + var(--vl-gap-4));
  right: 0;
  z-index: var(--vl-z-menu);
  min-width: 9rem;
  margin: 0;
  padding: var(--vl-gap-4) 0;
  list-style: none;
  background-color: var(--vl-paper);
  border: var(--vl-hairline) solid var(--vl-rule);
  box-shadow: 0 12px 32px rgb(16 16 16 / 0.1);
}

.vl-sprache__liste[hidden] {
  display: none;
}

.vl-sprache__eintrag {
  display: block;
  padding: var(--vl-gap-4) var(--vl-gap-6);
  font-family: var(--vl-font-display);
  font-size: var(--vl-size-label);
  font-weight: 600;
  letter-spacing: var(--vl-track-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--vl-ink);
  transition:
    background-color var(--vl-dur-fast) var(--vl-ease),
    color var(--vl-dur-fast) var(--vl-ease);
}

.vl-sprache__eintrag:hover {
  background-color: var(--vl-paper-shade);
}

/* Die aktive Sprache trägt die Signalfarbe und einen Punkt — ohne ihn wäre
   am Globus allein nicht zu sehen, worin man gerade liest. */
.vl-sprache__eintrag[aria-current="true"] {
  color: var(--vl-signal);
}

.vl-sprache__eintrag[aria-current="true"]::before {
  content: "•";
  margin-right: 0.4em;
}

/* Umschalter für schmale Ansichten */
.vl-burger {
  display: none;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  flex: none;
}

.vl-burger__bars,
.vl-burger__bars::before,
.vl-burger__bars::after {
  display: block;
  width: 1.375rem;
  height: 1.5px;
  background-color: var(--vl-ink);
  transition: transform var(--vl-dur) var(--vl-ease), opacity var(--vl-dur-fast) linear;
}

.vl-burger__bars::before,
.vl-burger__bars::after {
  content: "";
  position: absolute;
}

.vl-burger__bars::before { transform: translateY(-0.4rem); }
.vl-burger__bars::after  { transform: translateY(0.4rem); }

.vl-burger[aria-expanded="true"] .vl-burger__bars {
  background-color: transparent;
}

.vl-burger[aria-expanded="true"] .vl-burger__bars::before {
  transform: translateY(0) rotate(45deg);
}

.vl-burger[aria-expanded="true"] .vl-burger__bars::after {
  transform: translateY(0) rotate(-45deg);
}


/* --------------------------------------------------------------------------
   Schaltflächen
   -------------------------------------------------------------------------- */

.vl-btn {
  --vl-btn-fg: var(--vl-paper);
  --vl-btn-bg: var(--vl-ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--vl-gap-4);
  padding: var(--vl-gap-4) var(--vl-gap-6);
  overflow: hidden;
  color: var(--vl-btn-fg);
  background-color: var(--vl-btn-bg);
  font-family: var(--vl-font-display);
  font-size: var(--vl-size-label);
  font-weight: 600;
  letter-spacing: var(--vl-track-label);
  text-transform: uppercase;
  isolation: isolate;
}

/* Signalfläche fährt von unten ein */
.vl-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--vl-signal);
  transform: translateY(101%);
  transition: transform var(--vl-dur) var(--vl-ease);
}

.vl-btn:hover::before,
.vl-btn:focus-visible::before {
  transform: translateY(0);
}

.vl-btn__arrow {
  transition: transform var(--vl-dur) var(--vl-ease);
}

.vl-btn:hover .vl-btn__arrow,
.vl-btn:focus-visible .vl-btn__arrow {
  transform: translateX(0.35rem);
}

.vl-btn--ghost {
  --vl-btn-fg: var(--vl-ink);
  --vl-btn-bg: transparent;
  border: var(--vl-hairline) solid var(--vl-ink);
}

.vl-btn--ghost:hover,
.vl-btn--ghost:focus-visible {
  --vl-btn-fg: var(--vl-paper);
}

/* Runde Schaltfläche, etwa zum Neumischen des Feeds */
/* Ohne Rahmen und Fläche — der Knopf trägt sich über die Schrift selbst,
   deshalb eine Stufe kräftiger und weiter gesperrt als die Rubrikzeilen. */
.vl-round {
  display: inline-flex;
  align-items: center;
  gap: var(--vl-gap-4);
  padding: var(--vl-gap-3) 0;
  border: 0;
  background: none;
  color: var(--vl-ink);
  font-family: var(--vl-font-display);
  font-size: var(--vl-size-small);
  font-weight: 700;
  letter-spacing: var(--vl-track-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--vl-dur-fast) var(--vl-ease);
}

.vl-round:hover,
.vl-round:focus-visible {
  color: var(--vl-signal);
}

.vl-round__icon {
  display: inline-block;
  transition: transform var(--vl-dur-slow) var(--vl-ease);
}

.vl-round:hover .vl-round__icon {
  transform: rotate(180deg);
}

/* Knopf auf dunklem Grund — kehrt die Farbrollen um. */
.vl-btn--light {
  background-color: var(--vl-paper);
  color: var(--vl-ink);
  border-color: var(--vl-paper);
}

.vl-btn--light::before {
  background-color: var(--vl-signal);
}

.vl-btn--light:hover,
.vl-btn--light:focus-visible {
  color: var(--vl-paper);
}

/* --------------------------------------------------------------------------
   Anfrageformular
   Steht auf der dunklen Fusszeile. Felder ohne Kasten, nur mit Grundlinie —
   dieselbe Haltung wie die Haarlinien im übrigen Satz.
   -------------------------------------------------------------------------- */

.vl-form {
  margin-top: var(--vl-gap-8);
  max-width: 44rem;
}

/* Die Falle für Formularroboter. Nicht `display: none` — manche Roboter
   überspringen unsichtbare Felder gezielt. So steht es im Satz, ist für
   Menschen aber nicht erreichbar. */
.vl-form__falle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.vl-form__reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--vl-gap-6);
}

.vl-form__feld {
  display: flex;
  flex-direction: column;
  gap: var(--vl-gap-3);
  margin-block: 0 var(--vl-gap-6);
}

.vl-form__feld label {
  font-family: var(--vl-font-display);
  font-size: var(--vl-size-label);
  font-weight: 600;
  letter-spacing: var(--vl-track-label);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--vl-night-ink) 72%, transparent);
}

.vl-form__zusatz {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  opacity: 0.6;
}

.vl-form input[type="text"],
.vl-form input[type="email"],
.vl-form select,
.vl-form textarea {
  width: 100%;
  padding: var(--vl-gap-4) 0;
  border: 0;
  border-bottom: var(--vl-hairline) solid
    color-mix(in srgb, var(--vl-night-ink) 30%, transparent);
  border-radius: 0;
  background: none;
  color: var(--vl-night-ink);
  font-family: var(--vl-font-body);
  font-size: var(--vl-size-base);
  transition: border-color var(--vl-dur-fast) var(--vl-ease);
}

.vl-form textarea {
  resize: vertical;
  min-height: 5rem;
}

/* Die Klappliste erbt die Systemfarben nicht — beide Seiten setzen. */
.vl-form select option {
  background-color: var(--vl-night);
  color: var(--vl-night-ink);
}

.vl-form input:focus-visible,
.vl-form select:focus-visible,
.vl-form textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--vl-signal);
}

.vl-form input[aria-invalid="true"],
.vl-form select[aria-invalid="true"],
.vl-form textarea[aria-invalid="true"] {
  border-bottom-color: var(--vl-signal);
}

/* Zustimmung: Kästchen und Text nebeneinander, Fehler darunter. */
.vl-form__feld--zustimmung {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--vl-gap-4);
  margin-top: var(--vl-gap-7);
}

.vl-form__feld--zustimmung input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  accent-color: var(--vl-signal);
}

.vl-form__feld--zustimmung label {
  font-family: var(--vl-font-body);
  font-size: var(--vl-size-small);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
}

.vl-form__feld--zustimmung a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.vl-form__feld--zustimmung .vl-form__fehler {
  grid-column: 1 / -1;
}

.vl-form__fehler {
  font-family: var(--vl-font-body);
  font-size: var(--vl-size-small);
  color: var(--vl-signal);
  min-height: 0;
}

.vl-form__fehler:empty {
  display: none;
}

.vl-form__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vl-gap-6);
  margin-top: var(--vl-gap-7);
}

.vl-form__meldung {
  margin: 0;
  font-family: var(--vl-font-body);
  font-size: var(--vl-size-small);
  color: color-mix(in srgb, var(--vl-night-ink) 80%, transparent);
}

.vl-form__meldung:empty {
  display: none;
}

/* ---------------------------------------------------------------------------
   Datenschutzhinweis beim ersten Besuch

   Gestaltet wie der Rest der Seite: harte Kanten, Archivo Narrow in Versalien
   für Bedienelemente, Playfair kursiv als Gegenstimme in der Überschrift,
   Signalblau nur dort, wo etwas anklickbar ist.

   Er liegt im Markup und wird erst vom Skript entfernt — ohne JavaScript
   bleibt er lesbar stehen. Das Merkmal data-hinweis-gelesen auf <html> setzt
   scripts/hinweis-fruh.js, bevor die Seite zum ersten Mal gezeichnet wird.
   --------------------------------------------------------------------------- */

.vl-hinweis {
  position: fixed;
  inset: 0;
  z-index: 200;                       /* über der überlagerten Kopfzeile */
  display: grid;
  place-items: center;
  padding: clamp(1rem, 0.5rem + 2vw, 3rem);
  background: color-mix(in oklab, var(--vl-ink) 62%, transparent);
  backdrop-filter: blur(3px) saturate(0.9);
  animation: vl-hinweis-grund 260ms ease-out both;
  overflow-y: auto;
}

:root[data-hinweis-gelesen] .vl-hinweis { display: none; }

@keyframes vl-hinweis-grund { from { opacity: 0; } to { opacity: 1; } }

.vl-hinweis__blatt {
  position: relative;
  width: min(44rem, 100%);
  background: var(--vl-paper);
  /* Ein Streifen Signalblau an der Oberkante statt eines Rahmens ringsum:
     setzt einen Akzent, ohne die Fläche einzurahmen. */
  border-top: 3px solid var(--vl-signal);
  padding: clamp(1.6rem, 1.1rem + 2vw, 2.75rem);
  box-shadow: 0 2rem 5rem color-mix(in oklab, var(--vl-ink) 45%, transparent);
  animation: vl-hinweis-auf 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes vl-hinweis-auf {
  from { opacity: 0; transform: translateY(1.75rem) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.vl-hinweis__titel {
  margin: 0 0 0.85rem;
  font-family: var(--vl-font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--vl-ink);
}

/* Die kursive Gegenstimme — dasselbe Muster wie in allen Überschriften. */
.vl-hinweis__titel em {
  font-family: var(--vl-font-accent);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.vl-hinweis__text {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(0.92rem, 0.88rem + 0.15vw, 1rem);
  line-height: 1.65;
  color: var(--vl-ink-soft);
}

.vl-hinweis__text strong { color: var(--vl-ink); font-weight: 600; }

/* --- Aufklappbare Einzelheiten ------------------------------------------- */

.vl-hinweis__details {
  margin-top: 1.4rem;
  border-top: 1px solid var(--vl-rule);
  padding-top: 1rem;
}

.vl-hinweis__details > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  padding: 0.15rem 0;
  font-family: var(--vl-font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vl-signal);
  list-style: none;                   /* Standarddreieck weg */
}

.vl-hinweis__details > summary::-webkit-details-marker { display: none; }

/* Eigenes Zeichen statt des Dreiecks: dreht beim Aufklappen. */
.vl-hinweis__details > summary::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-0.1em, -0.1em);
  transition: transform var(--vl-duration-fast, 150ms) ease;
}

.vl-hinweis__details[open] > summary::before {
  transform: rotate(-135deg) translate(-0.15em, -0.15em);
}

.vl-hinweis__details > summary:hover { color: var(--vl-ink); }

.vl-hinweis__details > summary:focus-visible {
  outline: 2px solid var(--vl-signal);
  outline-offset: 4px;
}

.vl-hinweis__liste {
  margin: 1.1rem 0 0;
  /* Viel Text soll die Fläche nicht sprengen; der Rest wird gescrollt. */
  max-height: min(34vh, 20rem);
  overflow-y: auto;
  padding-right: 0.5rem;
}

.vl-hinweis__punkt + .vl-hinweis__punkt {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in oklab, var(--vl-rule) 55%, transparent);
}

.vl-hinweis__punkt dt {
  margin-bottom: 0.3rem;
  font-family: var(--vl-font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vl-ink);
}

.vl-hinweis__punkt dd {
  margin: 0;
  max-width: 66ch;
  font-size: 0.855rem;
  line-height: 1.6;
  color: var(--vl-ink-soft);
}

/* --- Fuss ---------------------------------------------------------------- */

.vl-hinweis__fuss {
  margin-top: 1.75rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--vl-rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem 2rem;
}

.vl-hinweis__knopf { flex: 0 0 auto; }

.vl-hinweis__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vl-hinweis__links a {
  color: var(--vl-ink-mute);
  text-decoration: none;
  border-bottom: 1px solid var(--vl-rule);
  padding-bottom: 0.15em;
  transition: color var(--vl-duration-fast, 150ms) ease,
              border-color var(--vl-duration-fast, 150ms) ease;
}

.vl-hinweis__links a:hover {
  color: var(--vl-ink);
  border-bottom-color: var(--vl-signal);
}

.vl-hinweis__links a:focus-visible {
  outline: 2px solid var(--vl-signal);
  outline-offset: 3px;
}

/* Schmale Fenster: Knopf über die volle Breite, Links darunter. */
@media (max-width: 30rem) {
  .vl-hinweis { place-items: end center; }
  .vl-hinweis__fuss { flex-direction: column; align-items: stretch; }
  .vl-hinweis__knopf { justify-content: center; width: 100%; }
  .vl-hinweis__links { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .vl-hinweis,
  .vl-hinweis__blatt { animation: none; }
  .vl-hinweis__details > summary::before { transition: none; }
}