/* ==========================================================================
   Formular und Modulauswahl — gemeinsames Stylesheet.

   Herausgelöst am 15.09.2026 aus dem <style>-Block von /wechsel/, weil
   /preise/ dasselbe Formular bekommt. Vorher stand das hier inline und
   hätte kopiert werden müssen; zwei Fassungen driften auseinander — bei
   FAQ-Text und JSON-LD ist genau das schon passiert (siehe Kopfkommentar
   von _tools/baue_module.py).

   Benutzt von:  /wechsel/   /preise/
   Braucht:      in-base.css (Farbtokens, Typoskala, .in-btn, Fokusring)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Formular. Es gibt im Repo keine einzige Regel fuer input/label/select —
   das hier ist die erste. Wiederverwendet werden nur die Farbtokens, die
   Typoskala, .in-btn und der gemeinsame Fokusring.
   16px auf den Eingabefeldern ist Absicht: darunter zoomt iOS beim Fokus
   automatisch hinein und der Nutzer sitzt in einer verschobenen Seite.
   -------------------------------------------------------------------------- */
/* Das Formular ist der einzige Ort dieser Seite, an dem etwas eingegeben
   wird. Es traegt deshalb - wie die hellen Baender - den umgehaengten
   Farbsatz: weisse Karte auf dunklem Band, helle Felder darin. Damit ist
   auf einen Blick zu sehen, dass hier getippt wird und nicht gelesen.
   Nachgerechnete Kontraste auf #FFFFFF:
     --in-text     #140A26  17,9:1
     --in-text-dim #4A4360   8,7:1
     --in-accent   #25659E   5,5:1
     --in-fehler   #B3261E   6,4:1 */
.in-formular{
  --in-bg:#F4F2F9; --in-surface:#FFFFFF; --in-surface-2:#EAE6F4;
  --in-text:#140A26; --in-text-dim:#4A4360;
  --in-border:rgba(20,10,38,.14);
  --in-accent:#25659E; --in-accent-line:#2D7ABE;
  --in-fehler:#B3261E;
  /* Zwei getrennte Randfarben: --in-border traegt die feinen Trennlinien
     der Karte, --in-feldrand die Kante der Bedienelemente. Auf Weiss
     kaeme --in-border nur auf 1,4:1 - ein Eingabefeld waere dann keins
     mehr, sondern eine helle Flaeche ohne Grenze. */
  --in-feldrand:rgba(20,10,38,.45);
  /* Der Fokusring steht hier auf Weiss statt auf Dunkel. Das helle Blau
     der Grundfarben kaeme dort auf 2,2:1 und waere kein Ring mehr. */
  --in-blue-bright:#25659E;
  background:var(--in-surface);border:1px solid var(--in-border);
  border-radius:16px;padding:32px;color:var(--in-text);
  box-shadow:0 18px 48px rgba(0,0,0,.45);
}
.in-feldgruppe{border:0;margin:0 0 28px;padding:0}
.in-feldgruppe legend{
  font-family:'Outfit',sans-serif;font-weight:600;font-size:var(--in-t-m);
  padding:0;margin:0 0 16px;
}
.in-felder{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.in-feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.in-feld-breit{grid-column:1 / -1}
.in-feld label{font-size:var(--in-t-xs);color:var(--in-text-dim);font-weight:600}
.in-feld label .in-opt{font-weight:400;text-transform:none}
.in-feld input,.in-feld select,.in-feld textarea{
  font-family:'Inter',sans-serif;font-size:16px;line-height:1.4;color:var(--in-text);
  background:var(--in-bg);border:1px solid var(--in-feldrand,var(--in-border));border-radius:8px;
  padding:13px 14px;width:100%;min-height:50px;
}
.in-feld textarea{min-height:110px;resize:vertical}
.in-feld select{appearance:none;padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,var(--in-text-dim) 50%),
                   linear-gradient(135deg,var(--in-text-dim) 50%,transparent 50%);
  background-position:calc(100% - 22px) 22px,calc(100% - 16px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.in-feld input:focus-visible,.in-feld select:focus-visible,.in-feld textarea:focus-visible{
  outline:2px solid var(--in-blue-bright);outline-offset:2px;border-color:transparent;
}
.in-feld input[aria-invalid="true"],.in-feld select[aria-invalid="true"],
.in-feld textarea[aria-invalid="true"]{border-color:var(--in-fehler,#F27E76)}
.in-fehler{font-size:var(--in-t-xs);color:var(--in-fehler,#F27E76);min-height:0}
.in-fehler:empty{display:none}
/* Dieselbe Zeile traegt auch neutrale Hinweise - etwa dass ein Code erst beim
   Absenden geprueft wird. In Fehlerrot liest sich das wie ein Problem. */
.in-fehler[data-art="hinweis"]{color:var(--in-text-dim)}

/* Honeypot. Bewusst nicht display:none — das erkennen manche Bots. */
.in-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Bestelluebersicht direkt ueber dem Absendeknopf */
.in-uebersicht{
  background:var(--in-bg);border:1px solid var(--in-accent-line);border-radius:12px;
  padding:20px 22px;margin:0 0 24px;
}
.in-uebersicht dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:8px 20px;font-size:var(--in-t-s)}
.in-uebersicht dt{color:var(--in-text-dim)}
.in-uebersicht dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.in-uebersicht .in-summe dt,.in-uebersicht .in-summe dd{
  font-weight:700;color:var(--in-text);border-top:1px solid var(--in-border);padding-top:10px;
}
.in-uebersicht dl > div{display:contents}
/* display:contents aus der Zeile darueber schlaegt das [hidden] des
   Browsers - ohne diese Regel bleiben ausgeblendete Zeilen stehen. */
.in-uebersicht dl > div[hidden]{display:none}

.in-zustimmung{display:flex;gap:12px;align-items:flex-start;margin:0 0 20px;font-size:var(--in-t-s)}
.in-zustimmung input{margin:2px 0 0;width:24px;height:24px;flex:0 0 24px;accent-color:var(--in-blue)}
.in-zustimmung a{color:var(--in-accent);text-decoration:underline;text-underline-offset:3px}

.in-bedingungen{
  font-size:var(--in-t-xs);color:var(--in-text-dim);line-height:1.7;
  margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--in-border);
}
.in-bedingungen li{margin-bottom:6px}

.in-status{font-size:var(--in-t-s);margin:16px 0 0}
.in-status:empty{display:none}
.in-status[data-art="fehler"]{color:var(--in-fehler,#F27E76)}
.in-status[data-art="laeuft"]{color:var(--in-text-dim)}

/* --------------------------------------------------------------------------
   Modulauswahl. Der Rabatt gilt auf alle Module, deshalb Ankreuzfelder
   statt eines Auswahlfelds — man muss sehen koennen, was zusammenkommt.
   -------------------------------------------------------------------------- */
.in-modulfrage{font-size:var(--in-t-xs);color:var(--in-text-dim);font-weight:600;margin:0 0 10px}
.in-modulliste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.in-modul{
  display:grid;grid-template-columns:26px 1fr auto;grid-template-rows:auto auto;
  gap:2px 12px;align-items:center;
  background:var(--in-bg);border:1px solid var(--in-feldrand,var(--in-border));border-radius:10px;
  padding:14px 16px;cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.in-modul:hover{border-color:var(--in-accent-line)}
/* 26 statt 24 px: der Messlauf zaehlt Tippziele unter 24 px, und bei
   genau 24 landet das Kaestchen an der Grenze. Angeklickt wird
   ohnehin die ganze Karte - das Kaestchen ist nur die Anzeige. */
.in-modul input{grid-row:1 / 3;width:26px;height:26px;margin:0;accent-color:var(--in-blue)}
.in-modul-name{font-size:var(--in-t-s);font-weight:600}
.in-modul-norm{grid-column:2;font-size:var(--in-t-xs);color:var(--in-text-dim)}
.in-modul-preis{
  grid-column:3;grid-row:1 / 3;
  font-family:'Outfit',sans-serif;font-weight:600;font-size:var(--in-t-s);
  font-variant-numeric:tabular-nums;
}
.in-modul:has(input:checked){background:var(--in-surface-2);border-color:var(--in-accent)}
.in-modul:has(input:focus-visible){outline:2px solid var(--in-blue-bright);outline-offset:2px}
.in-modul-hinweis{font-size:var(--in-t-xs);color:var(--in-text-dim);margin:12px 0 0}
/* Die Datenintegration ist keine Jahreslizenz, sondern eine einmalige
   Leistung. Sie steht deshalb ueber die volle Breite unter den Modulen
   und traegt den Zusatz direkt am Preis. */
.in-modul-breit{grid-column:1 / -1}
.in-modul-preis em{
  display:block;font-style:normal;font-weight:500;
  font-size:var(--in-t-xs);color:var(--in-text-dim);text-align:right;
}

@media (max-width:720px){
  .in-felder{grid-template-columns:1fr}
  .in-formular{padding:24px 20px}
  .in-modulliste{grid-template-columns:1fr}
}