/* livegang.css – vermittlung.jobs, Produktionsergaenzungen (aus _pruefung/livegang/vorlagen, eingebunden
   von bereinigen.mjs als letztes Stylesheet). Keine Inline-Styles noetig (CSP style-src 'self'). */

/* ---------- Formulare: Versand ueber das eigene E-Mail-Programm ---------- */
.anhang {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 72px;
  margin: 0;
  padding: .9rem 1.1rem;
  border-radius: 14px;
  background: rgba(10, 22, 96, .35);
  box-shadow: inset 0 0 0 1px rgba(231, 200, 135, .24);
}
.anhang__icon { width: 44px; height: 44px; flex: none; padding: 11px; border-radius: 50%; color: var(--navy-950); background-image: var(--goldfolie); }
.anhang__text { display: flex; flex-direction: column; min-width: 0; font-weight: 600; font-size: .9375rem; line-height: 1.35; color: var(--ivory); overflow-wrap: anywhere; }
.anhang__hinweis { font-weight: 400; font-size: .8125rem; color: var(--text-3); }

.formular__mailto {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  border-radius: 16px;
  background: rgba(3, 10, 69, .72);
  box-shadow: inset 0 0 0 1px rgba(239, 192, 143, .45), 0 18px 40px -24px rgba(0, 1, 24, .9);
}
.formular__mailto:focus { outline: none; }
.formular__mailto:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 3px; }
.formular__mailto-icon { width: 40px; height: 40px; flex: none; padding: 9px; border-radius: 50%; color: var(--navy-950); background-image: var(--goldfolie); }
.formular__mailto-inhalt { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.formular__mailto-titel { margin: 0; font-weight: 600; color: var(--ivory); line-height: 1.4; }
.formular__mailto-text { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--text-2); overflow-wrap: anywhere; }
.formular__mailto-text a { color: var(--gold-300); text-decoration: underline; text-underline-offset: .18em; }
.formular__mailto-text a:is(:hover, :focus-visible) { color: var(--champagner-glanz); }
@media (prefers-reduced-motion: no-preference) {
  .formular__mailto.ist-neu { animation: mailto-hinweis .6s var(--ease-aus) both; }
}
@keyframes mailto-hinweis { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Zeichenzaehler der Nachrichtenfelder: oben rechts im Feld, unabhaengig von einer Fehlermeldung darunter */
.feld__zeichen { position: absolute; top: .55rem; right: 14px; z-index: 2; font-size: .6875rem; line-height: 1.3; letter-spacing: .02em; color: var(--text-3); pointer-events: none; }
.feld__zeichen.ist-knapp { color: var(--gold-300); }

/* Foto-Huellen als Bezugsrahmen (frueher fuer die Symbolbild-Etiketten, die Etiketten sind seit 15.09.2026 entfernt) */
.ablauf__fotos, .prozess__foto, .formularbereich__foto, .mosaik { position: relative; }

/* ---------- Hotfix 15.09.2026: mobiles Vollbild-Menue links abgeschnitten (iPhone Safari) ----------
   Ursache: Das Wasserzeichen .menue__marke steht mit right:-8vw um 8vw ueber den rechten Rand von .menue__innen
   hinaus. .menue__innen ist wegen overflow-y:auto ein Scrollcontainer, dessen overflow-x dadurch ebenfalls "auto"
   wird -> der ganze Menueinhalt ist um 8vw (390 px: 31 px) seitlich scrollbar. Ein leicht schraeger Daumen-Wisch
   in iOS Safari schiebt Nummern, "SPRACHE", DE-Chip und "Anrufen" um genau diesen Betrag nach links aus dem Bild;
   der Kopf liegt ausserhalb des Scrollcontainers und bleibt richtig.
   Fix: Das Wasserzeichen endet am rechten Rand und beschneidet sich selbst (gleiche Optik, kein Ueberstand mehr),
   zusaetzlich kann .menue__innen nie seitlich scrollen. */
.menue__innen { overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; }
.menue__marke { right: 0; width: calc(min(68vw, 420px) - 8vw); overflow: hidden; }
.menue__marke .mono { width: min(68vw, 420px); max-width: none; }
/* Kein seitlicher Seiten-Ueberlauf auf aelteren iOS-Versionen ohne overflow:clip (Safari < 16) */
@supports not (overflow: clip) { body { overflow-x: hidden; } }

/* ---------- Einheitlicher, fixierter Hintergrund #00022E (Kundenwunsch 15.09.2026) ----------
   "Der Hintergrund genau wie hier und immer fixiert": eine flache Navy-Flaeche (#00022E, wie hinter der mobilen
   Aktionsleiste) als fixierte Ebene hinter allen Seiten. Kein background-attachment:fixed (iOS ignoriert es).
   Sektionen sind durchsichtig: keine abschnittsweisen Farbwechsel (body[data-hg]), keine Wellen-Standbilder,
   kein Wellen-Canvas, keine Vignetten, kein Fuss-Glanz. Karten, Formulare und Leisten behalten ihre Flaechen.
   Die Selektoren mit "html body" schlagen die danach angehaengten Navy-Wellen-Regeln (.wellen-flaeche--navy). */
html { background-color: #00022e; }
body, body[data-hg] { background-color: transparent; transition: none; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background-color: #00022e; pointer-events: none; }
html body :is(.wellen-flaeche, .wellen-flaeche--ruhig, .wellen-flaeche--navy, .wellen-flaeche--navy-ruhig) { background-color: transparent; background-image: none; }
html body .wellen-flaeche > canvas[data-wellen], html body .wellen-vignette, html body .hero__vignette { display: none; }
.kopf::before, .fuss__glanz { display: none; }
.fuss { background-color: transparent; }

/* ---------- Hintergrund ohne Goldbaender: Navy-Satin-Standbilder (aus _quelle/marke/wellen/wellen.css,
   nur die .wellen-flaeche--navy/--navy-ruhig-Regeln, Pfade angepasst; WebGL-Varianten navy / navy-ruhig) ---------- */
.wellen-flaeche--navy {
  background-image: url("../img/wellen/wellen-navy-1920.jpg");
  background-image: image-set(
  url("../img/wellen/wellen-navy-1920.avif") type("image/avif"),
  url("../img/wellen/wellen-navy-1920.webp") type("image/webp"),
  url("../img/wellen/wellen-navy-1920.jpg") type("image/jpeg")
  );
}
@media (max-width: 1280px) {
  .wellen-flaeche--navy {
    background-image: url("../img/wellen/wellen-navy-1280.jpg");
    background-image: image-set(
    url("../img/wellen/wellen-navy-1280.avif") type("image/avif"),
    url("../img/wellen/wellen-navy-1280.webp") type("image/webp"),
    url("../img/wellen/wellen-navy-1280.jpg") type("image/jpeg")
    );
  }
}
@media (max-width: 768px) and (max-resolution: 1.49dppx) {
  .wellen-flaeche--navy {
    background-image: url("../img/wellen/wellen-navy-768.jpg");
    background-image: image-set(
    url("../img/wellen/wellen-navy-768.avif") type("image/avif"),
    url("../img/wellen/wellen-navy-768.webp") type("image/webp"),
    url("../img/wellen/wellen-navy-768.jpg") type("image/jpeg")
    );
  }
}
@media (max-width: 767px) and (orientation: portrait) {
  .wellen-flaeche--navy {
    background-image: url("../img/wellen/wellen-navy-mobil-828x1472.jpg");
    background-image: image-set(
    url("../img/wellen/wellen-navy-mobil-828x1472.avif") type("image/avif"),
    url("../img/wellen/wellen-navy-mobil-828x1472.webp") type("image/webp"),
    url("../img/wellen/wellen-navy-mobil-828x1472.jpg") type("image/jpeg")
    );
  }
}
.wellen-flaeche--navy-ruhig {
  background-image: url("../img/wellen/wellen-navy-ruhig-1920.jpg");
  background-image: image-set(
  url("../img/wellen/wellen-navy-ruhig-1920.avif") type("image/avif"),
  url("../img/wellen/wellen-navy-ruhig-1920.webp") type("image/webp"),
  url("../img/wellen/wellen-navy-ruhig-1920.jpg") type("image/jpeg")
  );
}
@media (max-width: 1280px) {
  .wellen-flaeche--navy-ruhig {
    background-image: url("../img/wellen/wellen-navy-ruhig-1280.jpg");
    background-image: image-set(
    url("../img/wellen/wellen-navy-ruhig-1280.avif") type("image/avif"),
    url("../img/wellen/wellen-navy-ruhig-1280.webp") type("image/webp"),
    url("../img/wellen/wellen-navy-ruhig-1280.jpg") type("image/jpeg")
    );
  }
}