/* ============================================================
   VS Ried — Komponenten
   Portiert aus _ds/_ds_bundle.js (Claude Design). Dort injizieren
   die React-Komponenten ihr CSS zur Laufzeit per <style>-Tag; hier
   steht es statisch, weil es keine Laufzeit gibt.

   Optik und Klassennamen sind unverändert übernommen. Geändert
   wurden ausschließlich Farbzuweisungen, die WCAG AA verfehlt
   haben — jede Änderung ist an Ort und Stelle vermerkt.
   ============================================================ */


/* ------------------------------------------------------------
   Layout-Helfer (aus Chrome.jsx)
   ------------------------------------------------------------ */

.vs-wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.vs-wrap--sm { max-width: var(--container-sm); }

.vs-grid-2, .vs-grid-3, .vs-grid-4 {
  display: grid;
  gap: var(--space-5);
}
.vs-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.vs-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.vs-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }


/* ------------------------------------------------------------
   Button
   ------------------------------------------------------------ */

.vsbtn {
  font-family: var(--font-text);
  font-weight: var(--fw-extra);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.vsbtn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.vsbtn[disabled], .vsbtn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}

.vsbtn--sm { font-size: var(--fs-sm);   padding: 8px 16px;  min-height: 36px; }
.vsbtn--md { font-size: var(--fs-body); padding: 12px 22px; min-height: var(--hit); }
.vsbtn--lg { font-size: var(--fs-lead); padding: 16px 30px; min-height: 56px; }

/* primär — "Sticker"-Effekt.
   Original: background --color-brand (#2EA6E5) mit weißer Schrift = 2.73:1.
   Jetzt --color-brand-fill = 4.55:1. */
.vsbtn--primary {
  background: var(--color-brand-fill);
  color: var(--text-on-fill);
  box-shadow: var(--shadow-pop);
}
.vsbtn--primary:hover:not([disabled]) {
  background: var(--c-blue-900);
  transform: translateY(-1px);
  box-shadow: 0 6px 0 rgba(35,35,35,0.14);
}
.vsbtn--primary:active:not([disabled]) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(35,35,35,0.14);
}

/* sekundär — Umriss.
   Original: Schrift --color-brand-hover (blue-700) = 4.22:1 auf Weiß. */
.vsbtn--secondary {
  background: var(--surface-card);
  color: var(--c-blue-800);
  border-color: var(--color-brand-fill);
}
.vsbtn--secondary:hover:not([disabled]) {
  background: var(--color-brand-soft);
  color: var(--c-blue-900);       /* auf blue-100 gemessen */
  transform: translateY(-1px);
}
.vsbtn--secondary:active:not([disabled]) { transform: translateY(1px); }

/* ghost — nur Text */
.vsbtn--ghost { background: transparent; color: var(--c-blue-800); }
.vsbtn--ghost:hover:not([disabled]) {
  background: var(--color-brand-soft);
  color: var(--c-blue-900);
}

/* Akzent — pinker Sticker.
   Original: --c-pink mit weißer Schrift = 2.77:1. */
.vsbtn--accent {
  background: var(--fill-pink);
  color: var(--text-on-fill);
  box-shadow: var(--shadow-pop);
}
.vsbtn--accent:hover:not([disabled]) {
  background: var(--c-pink-900);
  transform: translateY(-1px);
  box-shadow: 0 6px 0 rgba(35,35,35,0.14);
}
.vsbtn--accent:active:not([disabled]) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(35,35,35,0.14);
}


/* ------------------------------------------------------------
   Card
   ------------------------------------------------------------ */

.vscard {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
.vscard--interactive:hover,
.vscard--interactive:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
/* Der Akzentstreifen ist rein dekorativ — hier dürfen die reinen
   Markenfarben stehen, es steht kein Text darauf. */
.vscard__accent { height: 8px; width: 100%; flex: none; }
/* Bilder in Karten immer im selben Seitenverhältnis, sonst wird
   eine Reihe aus Karten unterschiedlich hoch. */
.vscard > img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.vscard__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.vscard__body--tight { padding: var(--space-4); }

/* Ganze Karte klickbar, ohne verschachtelte Links:
   Der Titel-Link spannt sich unsichtbar über die Karte. */
.vscard--interactive { position: relative; }
.vscard--interactive .vscard__link::after {
  content: "";
  position: absolute;
  inset: 0;
}


/* ------------------------------------------------------------
   Badge
   Original nutzte die -700-Töne auf -100-Flächen: brand 3.57,
   warning 2.88, accent 3.34 — alle unter 4.5. Jetzt -900.
   ------------------------------------------------------------ */

.vsbadge {
  font-family: var(--font-text);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  line-height: 1.4;
  white-space: nowrap;
}
.vsbadge__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.vsbadge--brand   { background: var(--c-blue-100);   color: var(--c-blue-900); }
.vsbadge--success { background: var(--c-teal-100);   color: var(--c-teal-900); }
.vsbadge--warning { background: var(--c-orange-100); color: var(--c-orange-900); }
.vsbadge--danger  { background: var(--c-red-100);    color: var(--c-red-900); }
.vsbadge--accent  { background: var(--c-pink-100);   color: var(--c-pink-900); }
.vsbadge--purple  { background: var(--c-purple-100); color: var(--c-purple-900); }
.vsbadge--lilac   { background: var(--c-lilac-100);  color: var(--c-lilac-900); }
.vsbadge--yellow  { background: var(--c-yellow-100); color: var(--c-yellow-900); }
.vsbadge--neutral { background: var(--c-cloud);      color: var(--c-slate); }

/* Gefüllte Variante mit weißer Schrift — Flächen aus --fill-* */
.vsbadge--solid { color: var(--text-on-fill); }
.vsbadge--solid.vsbadge--brand   { background: var(--fill-blue); }
.vsbadge--solid.vsbadge--success { background: var(--fill-teal); }
.vsbadge--solid.vsbadge--warning { background: var(--fill-orange); }
.vsbadge--solid.vsbadge--danger  { background: var(--fill-red); }
.vsbadge--solid.vsbadge--accent  { background: var(--fill-pink); }
.vsbadge--solid.vsbadge--purple  { background: var(--fill-purple); }
.vsbadge--solid.vsbadge--lilac   { background: var(--fill-lilac); }
.vsbadge--solid.vsbadge--yellow  { background: var(--fill-yellow); }


/* ------------------------------------------------------------
   Alert
   ------------------------------------------------------------ */

.vsalert {
  font-family: var(--font-text);
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: var(--border-width) solid transparent;
  align-items: flex-start;
}
.vsalert__icon { flex: none; font-size: 20px; line-height: 1.3; }
.vsalert__body { display: flex; flex-direction: column; gap: 2px; }
.vsalert__title {
  font-weight: var(--fw-extra);
  color: var(--text-strong);
  font-size: var(--fs-body);
}
.vsalert__text { font-size: var(--fs-sm); color: var(--text-body); }

.vsalert--info    { background: var(--c-blue-100);   border-color: var(--c-blue-800); }
.vsalert--success { background: var(--c-teal-100);   border-color: var(--c-teal-800); }
.vsalert--warning { background: var(--c-orange-100); border-color: var(--c-orange-800); }
.vsalert--danger  { background: var(--c-red-100);    border-color: var(--c-red-800); }

/* Symbolfarben: -900, weil sie auf der Tönung stehen */
.vsalert--info .vsalert__icon    { color: var(--c-blue-900); }
.vsalert--success .vsalert__icon { color: var(--c-teal-900); }
.vsalert--warning .vsalert__icon { color: var(--c-orange-900); }
.vsalert--danger .vsalert__icon  { color: var(--c-red-900); }


/* ------------------------------------------------------------
   Avatar
   Hintergrund aus --fill-*, weil weiße Initialen darauf stehen.
   ------------------------------------------------------------ */

.vsavatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--text-on-fill);
  overflow: hidden;
  flex: none;
  user-select: none;
}
.vsavatar img { width: 100%; height: 100%; object-fit: cover; }
.vsavatar--sm { width: 32px; height: 32px; font-size: 13px; }
.vsavatar--md { width: 44px; height: 44px; font-size: 17px; }
.vsavatar--lg { width: 64px; height: 64px; font-size: 24px; }
.vsavatar--xl { width: 120px; height: 120px; font-size: 44px; }

/* Eckige Variante — Hochformat 4:5, abgerundet wie die Karten.
   Der Radius kommt aus demselben Token wie die Karte (--radius-lg),
   damit Porträts und Karten dieselbe Sprache sprechen. */
.vsavatar--eckig { border-radius: var(--radius-lg); }
.vsavatar--eckig.vsavatar--md { width: 72px;  height: 90px; }
.vsavatar--eckig.vsavatar--lg { width: 112px; height: 140px; }
.vsavatar--eckig.vsavatar--xl { width: 216px; height: 270px; }  /* 50 % größer als zuvor (144 × 180) */


/* ------------------------------------------------------------
   Input / Formularfeld
   ------------------------------------------------------------ */

.vsfield {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-text);
}
.vsfield__label {
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--text-strong);
}
.vsfield__req { color: var(--c-red-800); margin-left: 2px; }   /* war --c-red */

.vsinput {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  color: var(--text-strong);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  min-height: var(--hit);
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
/* Platzhalter war --c-mist und damit zu blass. Platzhaltertext ist
   ohnehin kein Ersatz für ein Label — beides wird gesetzt. */
.vsinput::placeholder { color: var(--text-muted); opacity: 1; }
.vsinput:hover:not(:disabled) { border-color: var(--c-slate); }
.vsinput:focus {
  outline: none;
  border-color: var(--color-brand-fill);
  box-shadow: 0 0 0 3px var(--color-brand-soft);
}
.vsinput:disabled {
  background: var(--surface-sunken);
  color: var(--text-muted);
  cursor: not-allowed;
}
.vsinput--error { border-color: var(--c-red-800); }
.vsinput--error:focus { box-shadow: 0 0 0 3px var(--c-red-100); }

.vsfield__hint { font-size: var(--fs-xs); color: var(--text-muted); }
.vsfield__hint--error { color: var(--c-red-800); font-weight: var(--fw-bold); }


/* ------------------------------------------------------------
   Nur für Screenreader
   ------------------------------------------------------------ */

.vs-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ------------------------------------------------------------
   Offene Stellen — Ersatz für den Flyer

   Die alte Seite bestand aus einem einzigen Bild. Diese Komponenten nehmen
   dessen Elemente auf (Rahmen, Häkchen in den Schulfarben, Kontaktfeld),
   sind aber Text: auffindbar, vorlesbar, vergrößerbar, kopierbar.

   Der Umriss-Rahmen statt einer farbigen Fläche ist Absicht. Eine gefüllte
   Karte bräuchte für jeden Text darauf 4.5:1 und würde die helleren
   Schulfarben ausschließen; als 2 px Umriss ist er ein grafisches Element
   und braucht nur 3:1 — dafür genügen die 800er-Werte.
   ------------------------------------------------------------ */

.vs-stelle {
  max-width: 65ch;
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-5) var(--space-6);
  background: var(--surface-card);
  border: var(--border-width) solid var(--c-teal-800);
  border-radius: var(--radius-lg);
}

.vs-stelle--teal   { border-color: var(--c-teal-800); }
.vs-stelle--blue   { border-color: var(--c-blue-800); }
.vs-stelle--pink   { border-color: var(--c-pink-800); }
.vs-stelle--orange { border-color: var(--c-orange-800); }
.vs-stelle--purple { border-color: var(--c-purple-800); }
.vs-stelle--lilac  { border-color: var(--c-lilac-800); }

.vs-stelle__titel {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--text-strong);
}

/* Umfang und Beginn als Chips. Zwei Angaben, nach denen zuerst geschaut
   wird — deshalb vor der Liste und optisch abgesetzt. */
.vs-stelle__fakten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}

.vs-stelle__fakt {
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
}

/* --- Häkchenliste --- */

.vs-haken {
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.vs-haken__zeile {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.vs-haken__zeile + .vs-haken__zeile { margin-top: var(--space-3); }

.vs-haken__kreis {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  /* Mitwachsend mit der Textzeile, damit der Kreis bei vergrößerter
     Schrift nicht neben der Zeile hängen bleibt. */
  margin-top: 0.0625rem;
  border: var(--border-width) solid currentColor;
  border-radius: var(--radius-pill);
}

.vs-haken__kreis--teal   { color: var(--c-teal-800); }
.vs-haken__kreis--blue   { color: var(--c-blue-800); }
.vs-haken__kreis--pink   { color: var(--c-pink-800); }
.vs-haken__kreis--lilac  { color: var(--c-lilac-800); }
/* Orange bleibt definiert, wird vom Template aber nicht verwendet: auf 3:1
   abgedunkelt wirkt es bräunlich. */
.vs-haken__kreis--orange { color: var(--c-orange-800); }
.vs-haken__kreis--purple { color: var(--c-purple-800); }
.vs-haken__kreis--red    { color: var(--c-red-800); }

/* --- Kontaktfeld am Ende --- */

.vs-bewerbung {
  max-width: 65ch;
  padding: var(--space-6) var(--space-5);
  text-align: center;
  background: var(--c-teal-100);
  border-radius: var(--radius-lg);
}

.vs-bewerbung__titel {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  /* 900er-Wert, weil der Hintergrund hier teal-100 ist und nicht die Seite. */
  color: var(--c-teal-900);
}

.vs-bewerbung__text {
  margin: var(--space-3) 0 0;
  color: var(--text-body);
}

.vs-bewerbung__wege {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
}

.vs-bewerbung__link {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  font-weight: var(--fw-bold);
  color: var(--text-on-fill);
  text-decoration: none;
  background: var(--fill-teal);
  border-radius: var(--radius-pill);
}

.vs-bewerbung__link:hover,
.vs-bewerbung__link:focus-visible {
  /* Bleibt explizit, obwohl a:hover in tokens.css inzwischen auf Links ohne
     Klasse eingeschränkt ist: Weiß auf dunkelgrün ist hier die Zusicherung,
     nicht die Folge einer Regel woanders. */
  color: var(--text-on-fill);
  background: var(--c-teal-900);
  /* Unterstreichung im Hover, weil die Fläche allein bei Farbenblindheit
     nicht zwingend als Zustandswechsel erkennbar ist. */
  text-decoration: underline;
}