/* =========================================================================
   QUADRONET Layout - Formulare (EXT:form) im Mikrodesign, Abschnitt 02
   -------------------------------------------------------------------------
   Ein Feld ist eine NISCHE in der Wand: dicker Rahmen, vertiefter
   Innenraum, Licht von oben. Beim Fokus glueht die Laibung orange -
   bewusst ohne Bewegung, wer tippt, will Ruhe im Bild.

   Die Klassen setzt Configuration/Form/Quadronet/config.yaml, das Markup
   ist das des Cores (bis auf Field, Required, Navigation, Confirmation).

   Abweichungen von der Bibliothek:
   - Markenorange #FF8800 (seit 21.10.2026) statt #E8651A.
   - Theme-Schrift (IBM Plex Sans) statt system-ui.
   - Raster als CSS Grid mit Container Query statt Bootstrap-Spalten.
   - Papier-Fassung (helle Nische) fuer Abschnitte mit frame-m-paper.

   Fallstricke (aus der Bibliothek, nicht wieder einbauen):
   - Schrift im Feld NICHT erben lassen -> font explizit setzen.
   - Autofill zerschiesst den dunklen Grund -> -webkit-box-shadow-Trick.
   - select option braucht eigene Farben, sonst weiss auf weiss (Windows).
   - Platzhalter ist Beispiel, nie Beschriftung.
   ========================================================================= */

@layer qn.theme {

  /* ----- Stellschrauben -------------------------------------------------- */
  form:has(.qf-feld) {
    --qf-wand: 6px;
    --qf-radius: 2px;
    --qf-tempo: .22s;
    --qf-feld-rgb: 20 26 31;          /* Innenraum (dunkel)          */
    --qf-wand-rgb: 52 82 103;         /* = Garagentor-Wand           */
    --qf-schrift: #fff;
    --qf-platzhalter: rgba(234, 244, 255, .5);
    --qf-licht-oben: rgba(15, 20, 24, .95);
    --qf-licht-links: rgba(22, 28, 33, .95);
    --qf-tiefe: inset 0 3px 12px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .05);
    --qf-glut: 255 136 0;             /* Markenorange als RGB         */
    --qf-fehler: #FF6B57;             /* 4,6:1 auf Carbon             */
    --qf-ok: #4FBE8B;

    container-type: inline-size;
    max-width: 52rem;
  }

  /* Papier: helle Nische, dunkle Schrift */
  .frame-m-paper form:has(.qf-feld) {
    --qf-feld-rgb: 255 255 255;
    --qf-wand-rgb: 22 36 47;
    --qf-schrift: var(--ink);
    --qf-platzhalter: rgba(76, 96, 114, .75);
    --qf-licht-oben: rgba(22, 36, 47, .30);
    --qf-licht-links: rgba(22, 36, 47, .22);
    --qf-tiefe: inset 0 2px 6px rgba(22, 36, 47, .16), 0 1px 0 rgba(255, 255, 255, .8);
    --qf-fehler: #B3261E;             /* 6,1:1 auf Papier             */
    --qf-ok: #1E7A50;
  }

  /* ----- Raster ---------------------------------------------------------- */
  .qf-reihe {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1rem, 2.4cqi, 1.6rem);
  }
  .qf-reihe > * { grid-column: span 12; }
  @container (min-width: 34rem) {
    .qf-reihe > .qf-m3  { grid-column: span 3; }
    .qf-reihe > .qf-m4  { grid-column: span 4; }
    .qf-reihe > .qf-m5  { grid-column: span 5; }
    .qf-reihe > .qf-m6  { grid-column: span 6; }
    .qf-reihe > .qf-m7  { grid-column: span 7; }
    .qf-reihe > .qf-m8  { grid-column: span 8; }
    .qf-reihe > .qf-m9  { grid-column: span 9; }
  }

  /* ----- Feld, Beschriftung, Hilfe -------------------------------------- */
  .qf-feld,
  .qf-gruppe { margin: 0 0 1.5rem; }

  .qf-label,
  .qf-gruppe > legend {
    display: block;
    margin: 0 0 .5rem;
    padding: 0;
    font: 600 .78rem/1.3 var(--qn-schriftfamilie);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--qn-schrift);
  }
  .qf-pflicht { margin-left: .25em; color: var(--orange-hell); font-weight: 600; }
  .frame-m-paper .qf-pflicht { color: var(--orange-ink); }

  .qf-hilfe {
    display: block;
    margin-top: .45rem;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--qn-schrift-leise);
  }

  /* ----- Die Nische ------------------------------------------------------ */
  .qf-nische { position: relative; display: block; }

  .qf-eingabe {
    display: block;
    width: 100%;
    min-height: 2.9em;                         /* Zielflaeche Finger */
    padding: .85em 1em;
    font: 400 1rem/1.4 var(--qn-schriftfamilie);
    color: var(--qf-schrift);
    background: linear-gradient(180deg, rgb(var(--qf-feld-rgb) / .95), rgb(var(--qf-feld-rgb) / .8));
    border: var(--qf-wand) solid;
    border-top-color: var(--qf-licht-oben);
    border-left-color: var(--qf-licht-links);
    border-right-color: rgb(var(--qf-wand-rgb) / .55);
    border-bottom-color: rgb(var(--qf-wand-rgb) / .7);
    border-radius: var(--qf-radius);
    box-shadow: var(--qf-tiefe);
    transition: border-color var(--qf-tempo) ease, box-shadow var(--qf-tempo) ease;
  }
  .qf-eingabe::placeholder { color: var(--qf-platzhalter); font-style: italic; opacity: 1; }

  .qf-eingabe:hover:not(:focus, [disabled]) { border-right-color: rgb(var(--qf-wand-rgb) / .85); }

  .qf-eingabe:focus,
  .qf-eingabe:focus-visible {
    outline: none;
    border-color: var(--orange);
    box-shadow:
      inset 0 3px 12px rgba(0, 0, 0, .45),
      0 0 0 3px rgb(var(--qf-glut) / .28),
      0 0 22px -4px rgb(var(--qf-glut) / .55);
  }

  textarea.qf-eingabe { min-height: 10em; resize: vertical; line-height: 1.6; }

  /* Auswahlliste: eigener Pfeil, die Liste selbst bleibt Systemsache */
  select.qf-eingabe { appearance: none; padding-right: 3em; cursor: pointer; }
  .qf-feld--select .qf-nische::after {
    content: "";
    position: absolute;
    right: 1.15em;
    top: 50%;
    width: .6em;
    height: .6em;
    border-right: 2.5px solid var(--orange);
    border-bottom: 2.5px solid var(--orange);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
  }
  select.qf-eingabe option { background: #1a2229; color: #fff; }

  /* Autofill (Chrome/Safari) faerbt sonst hellgelb */
  .qf-eingabe:-webkit-autofill,
  .qf-eingabe:-webkit-autofill:hover,
  .qf-eingabe:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--qf-schrift);
    -webkit-box-shadow: inset 0 0 0 1000px rgb(var(--qf-feld-rgb)) !important;
    caret-color: var(--qf-schrift);
    transition: background-color 9999s ease-out;
  }

  .qf-eingabe[disabled],
  .qf-eingabe[readonly] { opacity: .55; cursor: not-allowed; }

  /* ----- Ankreuzen: kleine Kaesten mit Tiefe ----------------------------- */
  .qf-gruppe { border: 0; padding: 0; min-width: 0; }
  .qf-gruppe--zeile [role="radiogroup"] {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.8rem;
  }

  .qf-wahl {
    display: flex;
    align-items: flex-start;
    gap: .75em;
    min-height: 2.75em;                        /* Zielflaeche Finger */
    padding: .45em 0;
    line-height: 1.5;
    cursor: pointer;
  }
  .qf-wahl label { cursor: pointer; }
  .qf-feld--wahl .qf-wahl label { max-width: 62ch; font-size: .92rem; }

  .qf-wahl input {
    appearance: none;
    flex: 0 0 auto;
    display: grid;
    place-content: center;
    width: 1.5em;
    height: 1.5em;
    margin: .05em 0 0;
    background: linear-gradient(180deg, rgb(var(--qf-feld-rgb) / .95), rgb(var(--qf-feld-rgb) / .75));
    border: 3px solid rgb(var(--qf-wand-rgb) / .8);
    box-shadow: inset 0 2px 7px rgba(0, 0, 0, .55);
    cursor: pointer;
    transition: border-color var(--qf-tempo) ease;
  }
  .qf-wahl input[type="radio"] { border-radius: 50%; }
  .qf-wahl input::before {
    content: "";
    width: .72em;
    height: .72em;
    background: var(--orange);
    clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 22%, 86% 8%, 39% 71%);
    transform: scale(0);
    transition: transform .16s cubic-bezier(.34, 1.5, .5, 1);
  }
  .qf-wahl input[type="radio"]::before { width: .6em; height: .6em; clip-path: circle(50%); }
  .qf-wahl input:checked { border-color: var(--orange); }
  .qf-wahl input:checked::before { transform: scale(1); }
  .qf-wahl input:focus-visible { outline: 3px solid var(--qn-fokus); outline-offset: 3px; }
  .frame-m-paper .qf-wahl input::before { background: var(--orange-ink); }
  .frame-m-paper .qf-wahl input:checked { border-color: var(--orange-ink); }

  /* ----- Fehler: Zeichen + Klartext, nicht nur Farbe --------------------- */
  .qf-eingabe[aria-invalid="true"] {
    border-color: var(--qf-fehler);
    box-shadow: var(--qf-tiefe), 0 0 0 3px color-mix(in srgb, var(--qf-fehler) 22%, transparent);
  }
  .is-invalid .qf-wahl input,
  .qf-wahl input[aria-invalid="true"] { border-color: var(--qf-fehler); }

  .qf-meldung {
    display: flex;
    align-items: flex-start;
    gap: .55em;
    margin-top: .55rem;
    font-size: .86rem;
    line-height: 1.45;
    font-weight: 600;
  }
  .qf-meldung svg { flex: 0 0 auto; width: 1.15em; height: 1.15em; margin-top: .1em; }
  .qf-meldung--fehler { color: var(--qf-fehler); }

  /* ----- Absenden -------------------------------------------------------- */
  .qf-aktion { margin-top: 2rem; }
  .qf-navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
  }
  .qf-pflichthinweis {
    margin: 0;
    font-size: .82rem;
    color: var(--qn-schrift-leise);
  }

  /* ----- Dankmeldung ----------------------------------------------------- */
  .qf-danke {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    max-width: 44rem;
    padding: 1.4rem 1.6rem;
    border-left: 4px solid var(--qf-ok, #4FBE8B);
    background: rgb(79 190 139 / .1);
  }
  .qf-danke:focus { outline: none; }
  .qf-danke__zeichen { flex: 0 0 auto; width: 1.8rem; height: 1.8rem; color: var(--qf-ok, #4FBE8B); }
  .qf-danke__text > * + * { margin-top: .6em; }
  .frame-m-paper .qf-danke { border-left-color: #1E7A50; background: rgb(30 122 80 / .08); }
  .frame-m-paper .qf-danke__zeichen { color: #1E7A50; }

  /* ----- Hinweis nach Sperre (qn_form_shield) ----------------------------
     Steht direkt VOR dem <form>. Ton: Hinweis, kein Fehler - der Absender
     hat meist nichts falsch gemacht (Zurueck-Taste, Doppelklick). */
  .qf-schild {
    max-width: 44rem;
    margin: 0 0 1.6rem;
    padding: 1rem 1.2rem 1rem 3rem;
    position: relative;
    border-left: 4px solid #8FB9D6;
    background: rgb(143 185 214 / .12);
    font-size: .95rem;
    line-height: 1.55;
  }
  .qf-schild::before {
    content: "i" / "";
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: 1.3rem;
    height: 1.3rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #8FB9D6;
    color: var(--ink);
    font: 600 .8rem/1 var(--qn-schriftfamilie);
  }
  .qf-schild--zuviel { border-left-color: #F2A93B; background: rgb(242 169 59 / .12); }
  .qf-schild--zuviel::before { content: "!" / ""; background: #F2A93B; }
  .frame-m-paper .qf-schild { border-left-color: #2F6F95; background: rgb(47 111 149 / .08); }
  .frame-m-paper .qf-schild::before { background: #2F6F95; color: #fff; }

  /* ----- Abschnitte (Fieldset mit Klasse qf-abschnitt), 25.10.2026 -------
     Erstes Formular damit: "Anfrage Website-Check". Legende wie eine
     kleine Zwischenueberschrift (Bebas), darunter eine feine Linie. */
  .qf-abschnitt {
    min-width: 0;
    margin: 0 0 2.4rem;
    padding: 0;
    border: 0;
  }
  .qf-abschnitt > legend {
    display: block;
    width: 100%;
    margin: 0 0 1.2rem;
    padding: 0 0 .45rem;
    border-bottom: 1px solid var(--qn-linie);
    font: 400 clamp(1.35rem, 2.4vw, 1.7rem)/1 var(--qn-schriftfamilie-ueberschrift);
    font-synthesis: none;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--qn-schrift);
  }
  .frame-m-paper .qf-abschnitt > legend { border-bottom-color: rgb(22 36 47 / .2); }

  /* ----- Mehrfachauswahl als Kacheln (qf-gruppe--kacheln) ----------------
     Jede Option ist eine kleine Nische; angehakt glueht die Kante orange.
     Die ganze Kachel ist Klickflaeche (das label umschliesst alles). */
  .qf-gruppe--kacheln [role="group"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: .7rem;
  }
  .qf-gruppe--kacheln .qf-wahlfeld { display: flex; }
  .qf-gruppe--kacheln .qf-wahl {
    flex: 1 1 auto;
    align-items: center;
    padding: .8em 1em;
    background: rgb(var(--qf-feld-rgb) / .55);
    border: 2px solid rgb(var(--qf-wand-rgb) / .55);
    border-radius: var(--qf-radius);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .35);
    transition: border-color var(--qf-tempo) ease, box-shadow var(--qf-tempo) ease;
  }
  .qf-gruppe--kacheln .qf-wahl:hover { border-color: rgb(var(--qf-wand-rgb) / .95); }
  .qf-gruppe--kacheln .qf-wahl:has(input:checked) {
    border-color: var(--orange);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .35), 0 0 18px -6px rgb(var(--qf-glut) / .6);
  }
  .qf-gruppe--kacheln .qf-wahl:has(input:focus-visible) { outline: 3px solid var(--qn-fokus); outline-offset: 3px; }
  .qf-gruppe--kacheln .qf-wahl input:focus-visible { outline: none; }
  .frame-m-paper .qf-gruppe--kacheln .qf-wahl { box-shadow: inset 0 1px 4px rgb(22 36 47 / .12); }
  .frame-m-paper .qf-gruppe--kacheln .qf-wahl:has(input:checked) { border-color: var(--orange-ink); }
  .qf-gruppe--kacheln .qf-hilfe { margin-top: .7rem; }

  /* ----- Hinweis "aus dem Check uebernommen" (anfrage-uebergabe.js) ------
     Steht wie .qf-schild VOR dem Formular. Ton: Bestaetigung. */
  .qf-uebernahme {
    max-width: 44rem;
    margin: 0 0 1.6rem;
    padding: .9rem 1.2rem;
    border-left: 4px solid var(--orange);
    background: rgb(var(--qf-glut, 255 136 0) / .1);
    font-size: .95rem;
    line-height: 1.55;
  }
  .frame-m-paper .qf-uebernahme { border-left-color: var(--orange-ink); background: rgb(163 87 0 / .07); }

  /* ----- Honigtopf: fuer Menschen und Vorlesesoftware unsichtbar --------- */
  .qf-falle {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  /* ----- Windows-Kontrastmodus: Rahmen muessen bleiben ------------------- */
  @media (forced-colors: active) {
    .qf-eingabe,
    .qf-wahl input { border: 2px solid ButtonBorder; box-shadow: none; }
    .qf-eingabe:focus { outline: 2px solid Highlight; outline-offset: 2px; }
    .qf-wahl input:checked::before { background: Highlight; }
    .qf-gruppe--kacheln .qf-wahl { border: 2px solid ButtonBorder; }
    .qf-gruppe--kacheln .qf-wahl:has(input:checked) { border-color: Highlight; }
  }
}