/* Anfrage-Dialog, gemeinsam fuer alle Seiten.
   Bewusst eine statische Datei und kein <style> in der Komponente: Astro
   haengt Komponentenstile an ein gemeinsames Buendel, und das riss am
   12.08.2026 das CSS-Budget von 30 kB (SiteHeader-Buendel auf 32748 Byte).
   Gleiches Vorgehen wie bei /styles/vi-search.css. */
/* Bewusst hier und nicht in home-v2.css: die Startseite laedt home-v2.css,
   die uebrigen 115 Seiten nicht. Genau diese Falle hat am 10.08.2026 die
   Mobilnavigation auf 114 Seiten unbedienbar gemacht. */
.vi-request-dialog-native {
  width: min(920px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  margin: auto;
  padding: 32px;
  border: 0;
  border-radius: 16px;
  background: var(--paper, #f7f5f0);
  color: var(--ink, #14181a);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .36);
  overflow: auto;
}
.vi-request-dialog-native::backdrop {
  background: rgba(17, 20, 21, .68);
}
.vi-request-dialog-native .vi-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.vi-request-dialog-native .vi-dialog-head h2 {
  margin: 8px 0 0;
  font-family: Bebas, Impact, sans-serif;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: .98;
  font-size: clamp(2.3rem, 5vw, 4rem);
}
.vi-request-dialog-native .vi-dialog-head h2:focus-visible {
  outline: 3px solid rgba(0, 167, 142, .3);
  outline-offset: 4px;
}
.vi-request-dialog-native .vi-dialog-head > button {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid var(--line, #d8d4cc);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.vi-request-dialog-native .vi-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--teal-dark, #00806d);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.vi-request-dialog-native .vi-kicker::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--teal, #00a78e);
}
.vi-request-dialog-native .request-section {
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
}
@media (max-width: 720px) {
  .vi-request-dialog-native { padding: 20px; }
}

/* Das Anfrageformular selbst. Bis 12.08.2026 ein Komponentenstil von
   DocumentRequestPanel; seit das Formular auf JEDER Seite steht, landete
   es im gemeinsamen Astro-Buendel und riss dessen 30-kB-Budget. Die
   Regeln sind am Dialog verankert, weil sie ohne Astros Begrenzung sonst
   frei im Dokument staenden. */
.vi-request-dialog-native .request-section { background: var(--paper-2); }
.vi-request-dialog-native .request-form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; }
.vi-request-dialog-native .request-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vi-request-dialog-native .request-form label { display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: .72rem; font-weight: 700; }
/* 16px minimum: the label sets .72rem and fields inherit it, which made iOS
   Safari zoom on focus in the primary conversion form. */
.vi-request-dialog-native .request-form input:not([type="checkbox"]), .vi-request-dialog-native .request-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); padding: 12px 13px; min-height: 46px; font-size: 1rem; font-weight: 400; }
.vi-request-dialog-native .request-form textarea { resize: vertical; }
.vi-request-dialog-native .request-details { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.vi-request-dialog-native .request-details summary { cursor: pointer; color: var(--teal-dark); font-size: .75rem; font-weight: 700; }
.vi-request-dialog-native .request-optional-grid { margin-top: 18px; }
.vi-request-dialog-native .request-form input:focus-visible, .vi-request-dialog-native .request-form textarea:focus-visible { outline: 3px solid rgba(0, 167, 142, .22); outline-offset: 2px; border-color: var(--teal); }
.vi-request-dialog-native .request-form-wide { grid-column: 1 / -1; }
.vi-request-dialog-native .consent { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 10px; margin-top: 20px; font-weight: 400 !important; }
.vi-request-dialog-native .consent input { margin-top: 4px; accent-color: var(--teal); }
.vi-request-dialog-native .consent a { text-decoration: underline; text-underline-offset: 2px; }
.vi-request-dialog-native .request-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.vi-request-dialog-native .request-status { color: var(--teal-dark); font-size: .74rem; }
.vi-request-dialog-native .request-note { color: var(--muted); font-size: .7rem; margin: 18px 0 0; }
.vi-request-dialog-native .honeypot { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 720px) {
  .vi-request-dialog-native .request-form { padding: 22px; }
  .vi-request-dialog-native .request-form-grid { grid-template-columns: 1fr; }
  .vi-request-dialog-native .request-form-wide { grid-column: auto; }
  .vi-request-dialog-native .request-actions .button { width: 100%; }
}

/* Der Dialog trug seine Ueberschrift zweimal: einmal als Dialogkopf
   ("Anwendung und Unterlagen anfragen") und gleich darunter die eigene
   Ueberschrift des Formularabschnitts ("Die passende Einordnung fuer Ihren
   Prozess."). Auf der Startseite fiel das kaum auf; seit der Dialog auf allen
   116 Seiten steht, fuellten die zwei Ueberschriften bei 390 px den GANZEN
   ersten Bildschirm, und das erste Eingabefeld lag darunter.
   Die Ueberschrift bleibt im Dokument, weil aria-labelledby des Abschnitts auf
   sie zeigt - sie wird nur nicht mehr gemalt. Der Einleitungssatz mit der
   E-Mail-Adresse bleibt sichtbar. */
.vi-request-dialog-native .request-section > .section-heading > div:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.vi-request-dialog-native .request-section > .section-heading {
  display: block;
  margin-bottom: 0;
}