/* ============================================================
   Slipac Systems – Kontaktseite mit kompaktem Anfrageformular
   Stand: 4. Oktober 2026

   Setzt tokens.css, base.css und seite.css voraus.
   Die Grundstile der Felder stehen in base.css.
   ============================================================ */

/* ---- Seitenkopf ---------------------------------------------- */

.seitenkopf--kompakt {
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) clamp(2rem, 1rem + 2vw, 3rem);
}

/* Das Formular rückt dicht an den Seitenkopf heran. */
.abschnitt--formular {
  padding-top: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* ---- Raster: Formular und Seitenspalte ----------------------- */

.kontakt {
  display: grid;
  gap: var(--abstand-6);
  align-items: start;
}

@media (min-width: 62rem) {
  .kontakt {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
    gap: var(--abstand-7);
  }

  .kontakt__seite {
    position: sticky;
    top: 110px;
  }
}

/* Elemente in einem Raster schrumpfen ohne min-width: 0 nicht unter
   ihre Inhaltsbreite und ragen am Handy über den Rand. */
.kontakt > * {
  min-width: 0;
}

/* ---- Formularkarte ------------------------------------------- */

.formular {
  padding: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);
  border: 1px solid rgba(8, 27, 51, 0.08);
  border-radius: var(--rundung-gross);
  background: var(--farbe-weiss);
  box-shadow: var(--schatten-gross);
}

.formular .feld {
  margin-bottom: var(--abstand-5);
}

.formular__pflicht-hinweis {
  margin-bottom: var(--abstand-5);
  font-size: var(--groesse-mini);
  color: var(--text-leise);
}

.formular .feld label,
.themen legend {
  font-size: var(--groesse-klein);
}

/* Zwei Felder nebeneinander, sobald Platz ist */
.feldraster {
  display: grid;
  gap: 0 var(--abstand-5);
}

@media (min-width: 40rem) {
  .feldraster {
    grid-template-columns: 1fr 1fr;
  }
}

.formular textarea {
  min-height: 9rem;
}

.freiwillig {
  font-weight: 400;
  color: var(--text-leise);
}

/* ---- Themenauswahl als Auswahlknöpfe ------------------------
   Echte Radio-Buttons bleiben im Formular und in der Tastatur-
   bedienung erhalten; sichtbar ist die ganze Beschriftung.
   ------------------------------------------------------------ */

.themen {
  border: 0;
  padding: 0;
  margin: 0 0 var(--abstand-6);
  min-width: 0;
}

.themen legend {
  padding: 0;
  margin-bottom: var(--abstand-3);
  font-weight: 600;
  color: var(--farbe-marineblau);
}

.themen__auswahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
}

.thema {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  min-height: 44px;
  padding: var(--abstand-2) var(--abstand-4);
  border: 1px solid var(--farbe-feldrahmen);
  border-radius: var(--rundung-voll);
  background: var(--farbe-weiss);
  color: var(--farbe-marineblau);
  font-size: var(--groesse-klein);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dauer) var(--kurve),
              background-color var(--dauer) var(--kurve),
              box-shadow var(--dauer) var(--kurve),
              transform var(--dauer) var(--kurve-weich);
}

/* Das Eingabefeld bleibt bedienbar, liegt aber unsichtbar
   unter der Beschriftung. */
.thema input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.thema:hover {
  border-color: var(--aktion);
  background: var(--hintergrund-ruhig);
}

.thema:has(input:focus-visible) {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

/* Ausgewählt: Fläche, Rahmen und Häkchen – nicht nur Farbe */
.thema:has(input:checked) {
  border-color: var(--aktion);
  background: var(--aktion);
  color: var(--farbe-weiss);
  box-shadow: var(--schatten-aktion);
}

.thema:has(input:checked)::before {
  content: "";
  width: 0.6em;
  height: 0.32em;
  margin-top: -0.2em;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

/* Symbol je Anlass (DECISIONS.md P-070) – dieselben wie bei den
   Leistungsbereichen. Ausgewählt ersetzt der Haken das Symbol. */
.thema__symbol {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--aktion);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.thema:has(input:checked) .thema__symbol {
  display: none;
}

.thema {
  -webkit-tap-highlight-color: transparent;
}

.thema:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .thema:active {
    transform: none;
  }
}

.formular[data-geprueft="ja"] .themen:has(input:invalid) .thema {
  border-color: var(--farbe-fehler);
}

/* ---- Einwilligung -------------------------------------------- */

.einwilligung {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-3);
  margin: var(--abstand-2) 0 var(--abstand-5);
  font-size: var(--groesse-mini);
  line-height: 1.55;
  color: var(--text-leise);
  cursor: pointer;
}

/* 24 Pixel: empfohlene Mindestgröße für ein Bedienelement */
.einwilligung input {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--aktion);
}

.formular[data-geprueft="ja"] .einwilligung:has(input:invalid) {
  color: var(--farbe-fehler);
}

.pflicht,
.formular__pflicht-hinweis span {
  color: var(--farbe-fehler);
  font-weight: 700;
}

/* Rückmeldungen zum Versand werden fokussiert und zusätzlich über
   aria-live vorgelesen. Farbe ist nie das einzige Merkmal: Erfolg und
   Fehler enthalten immer einen vollständigen Text. */
.formularstatus {
  margin-bottom: var(--abstand-6);
  padding: var(--abstand-4) var(--abstand-5);
  border: 2px solid var(--aktion);
  border-radius: var(--rundung-klein);
  background: var(--hintergrund-ruhig);
  color: var(--text);
  font-weight: 600;
}

.formularstatus[hidden] {
  display: none !important;
}

.formularstatus[data-art="fehler"] {
  border-color: var(--farbe-fehler);
  background: #FFF4F2;
}

.formularstatus[data-art="erfolg"] {
  border-color: #287A4B;
  background: #F1FAF5;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--abstand-4);
  align-items: center;
}

.formularstatus__text {
  min-width: 0;
}

/* Erfolgssymbol: grüner Kreis, Haken zeichnet sich einmal.
   Bei reduzierter Bewegung steht es sofort fertig da (tokens.css). */
.formularstatus__symbol {
  display: block;
  width: 3rem;
  height: 3rem;
}

.formularstatus__kreis {
  fill: #287A4B;
  transform-box: fill-box;
  transform-origin: center;
  animation: erfolg-kreis 360ms var(--kurve-weich) both;
}

.formularstatus__haken {
  fill: none;
  stroke: var(--farbe-weiss);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: erfolg-haken 420ms 220ms var(--kurve-weich) forwards;
}

@keyframes erfolg-kreis {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes erfolg-haken {
  to { stroke-dashoffset: 0; }
}

@media (max-width: 30rem) {
  .formularstatus__symbol {
    width: 2.5rem;
    height: 2.5rem;
  }
}

.formular[data-geprueft="ja"] input:invalid,
.formular[data-geprueft="ja"] textarea:invalid {
  border-color: var(--farbe-fehler);
  border-width: 2px;
}


/* ---- Absendeknopf ------------------------------------------ */

.knopf--gross {
  width: 100%;
  min-height: 56px;
  font-size: var(--groesse-text);
}

.knopf--gross:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.formular__nachricht {
  margin-top: var(--abstand-4);
}

.formular__cookie {
  margin: calc(-1 * var(--abstand-2)) 0 0;
  font-size: var(--groesse-mini);
}

.formular__direkt {
  margin-top: var(--abstand-3);
}

/* ---- Seitenspalte -------------------------------------------- */

.kontakt__seite {
  display: grid;
  gap: var(--abstand-5);
}

.kontaktkarte {
  padding: var(--abstand-6);
  border-radius: var(--rundung-gross);
}

.kontaktkarte h2 {
  margin-bottom: var(--abstand-3);
  font-family: var(--schrift-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--laufweite-weit);
  text-transform: uppercase;
}

.kontaktkarte p {
  font-size: var(--groesse-klein);
}

.kontaktkarte p:last-child {
  margin-bottom: 0;
}

.kontaktkarte--dunkel {
  background:
    radial-gradient(24rem 14rem at 90% 0%, rgba(21, 94, 239, 0.32), transparent 60%),
    linear-gradient(160deg, #0B2240 0%, var(--farbe-marineblau) 100%);
  color: var(--text-leise-auf-dunkel);
}

.kontaktkarte--dunkel h2 {
  color: var(--farbe-hellblau);
}

.kontakt__email {
  margin-bottom: var(--abstand-3);
  font-size: var(--groesse-lead);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.kontaktkarte--dunkel .kontakt__email a {
  color: var(--farbe-weiss);
  text-decoration-color: var(--farbe-hellblau);
}

.kontaktkarte--hell {
  border: var(--linie);
  background: var(--hintergrund-ruhig);
}

.kontaktkarte--hell h2 {
  color: var(--aktion);
}

.weiter {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: weiter;
  font-size: var(--groesse-klein);
}

.weiter li {
  position: relative;
  padding-left: var(--abstand-7);
  counter-increment: weiter;
}

.weiter li + li {
  margin-top: var(--abstand-4);
}

.weiter li::before {
  content: counter(weiter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--schrift-mono);
  font-weight: 600;
  color: var(--aktion);
}

/* ---- Seitenkopf mit fliegendem Briefumschlag (P-076) -----------
   Die Grafik aus umschlagflug() in app/symbole.php steht am Computer
   rechts neben dem Text, am Handy klein darunter. Sie spielt einmal:
   Spur zeichnet sich, Umschlag fliegt herein und landet, dann erscheint
   der Haken. Bei reduzierter Bewegung steht alles sofort am Ziel. */

.kontakt-kopf {
  display: grid;
  gap: var(--abstand-3);
  align-items: center;
}

.kontakt-kopf__bild {
  justify-self: end;
  width: min(100%, 12rem);
}

@media (min-width: 48rem) {
  .kontakt-kopf {
    grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
    gap: var(--abstand-6);
  }

  .kontakt-kopf__bild {
    width: 100%;
  }
}

@media (min-width: 62rem) {
  .kontakt-kopf {
    grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
  }
}

.umschlagflug {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.umschlagflug__schein {
  fill: rgba(21, 94, 239, 0.07);
}

.umschlagflug__spur {
  fill: none;
  stroke: var(--aktion);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1 11;
  opacity: 0.6;
}

.umschlagflug__maske {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 12;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.umschlagflug__schatten {
  fill: rgba(8, 27, 51, 0.12);
}

.umschlagflug__umschlag {
  fill: var(--farbe-weiss);
  stroke: var(--farbe-marineblau);
  stroke-width: 3;
}

.umschlagflug__klappe,
.umschlagflug__falz {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.umschlagflug__klappe {
  stroke: var(--farbe-marineblau);
  stroke-width: 3;
}

.umschlagflug__falz {
  stroke: #9AA9BC;
  stroke-width: 2;
}

.umschlagflug__marke circle {
  fill: var(--aktion);
}

.umschlagflug__marke path {
  fill: none;
  stroke: var(--farbe-weiss);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.umschlagflug__brief,
.umschlagflug__marke,
.umschlagflug__schatten {
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .umschlagflug__maske {
    animation: umschlag-spur 1.5s cubic-bezier(0.3, 0.6, 0.3, 1) 0.25s both;
  }

  .umschlagflug__brief {
    animation: umschlag-flug 1.9s cubic-bezier(0.22, 0.9, 0.3, 1) 0.25s both;
  }

  .umschlagflug__schatten {
    animation: umschlag-schatten 1.9s ease-out 0.25s both;
  }

  .umschlagflug__marke {
    animation: umschlag-marke 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 2.05s both;
  }
}

@keyframes umschlag-spur {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes umschlag-flug {
  0% { opacity: 0; transform: translate(-250px, 112px) rotate(-22deg) scale(0.4); }
  12% { opacity: 1; }
  45% { transform: translate(-150px, 42px) rotate(-14deg) scale(0.7); }
  76% { transform: translate(6px, -8px) rotate(5deg) scale(1.04); }
  89% { transform: translate(-2px, 2px) rotate(-2deg) scale(0.99); }
  100% { opacity: 1; transform: none; }
}

@keyframes umschlag-schatten {
  0%, 60% { opacity: 0; transform: scale(0.4); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes umschlag-marke {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: scale(1); }
}

/* ---- Hinweise „Gut zu wissen“ in der Seitenspalte -------------- */

.kontakt__hinweise {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--groesse-klein);
  color: var(--text-leise);
}

.kontakt__hinweise li + li {
  margin-top: var(--abstand-4);
}

.kontakt__hinweise a {
  display: block;
  margin-bottom: var(--abstand-1);
  font-weight: 600;
  color: var(--aktion);
}