/* ==========================================================================
   Rechnungs-Fix.de – Editor-Ergänzungen 3.8.0
   --------------------------------------------------------------------------
   Diese Datei wird NUR auf /erstellen/ geladen (dort stehen die Formular-
   Klappfelder und der DATEV-Export). Die erzeugte Tailwind-Datei
   /assets/css/site.css bleibt unangetastet – sie kommt aus dem Build
   (_build/) und wird hier nicht überschrieben.

   Inhalt:
     1. Klappfelder des Formulars – sanftes Aufklappen, Fokus, Tastatur
     2. DATEV-Export – Modal und Einstellungs-Abschnitt
   ========================================================================== */

/* ==========================================================================
   1. KLAPPFELDER (.formular-abschnitt)
   --------------------------------------------------------------------------
   Die Klappfelder sind <details>/<summary>. Damit ist die Bedienung per
   Tastatur (Tab auf den Kopf, Enter/Leertaste klappt auf und zu) bereits
   nativ gegeben und muss nicht nachgebaut werden.

   Aufgeklappt wird der Inhalt nicht hart eingeblendet, sondern kurz
   eingeblendet (200 ms). Bewusst nur opacity und keine Höhen-Animation:
   eine Höhen-Animation müsste die vom Browser gesteuerte <details>-Höhe
   überschreiben und würde beim schnellen Umschalten flackern. 200 ms liegt
   unter der geforderten Obergrenze von 250 ms.

   Zugeklappt wird nicht animiert: das Zuklappen ist im Browser sofort
   wirksam, und ein nachträgliches Ausblenden würde den bereits
   verschwundenen Inhalt nicht mehr zeigen (nur noch "Geister-Höhe").
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .formular-abschnitt[open] > *:not(summary) {
        animation: rf-klappfeld-auf 200ms ease-out;
    }
}

@keyframes rf-klappfeld-auf {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Der Kopf bleibt auch bei Tastaturbedienung deutlich sichtbar.
   site.css setzt für :focus bereits einen Ring; hier nur der Kopf-Kontrast. */
.formular-abschnitt > summary:focus-visible {
    outline: 3px solid #0369a1;
    outline-offset: 2px;
    border-radius:0;
}

/* Der aufgeklappte Kopf bekommt keine zusätzliche Höhe – verhindert das
   frühere "Springen" beim Umschalten zwischen zwei Feldern. */
.formular-abschnitt > summary {
    min-height: 3.25rem;
}

/* ==========================================================================
   2. DATEV-EXPORT
   ========================================================================== */

/* Der Schalter im Einstellungsmenü nutzt die vorhandenen Tailwind-Klassen.
   Nur die Beschriftungszeile des Abschnitts braucht eine eigene Regel, weil
   das Menü seine Überschriften als <p> mit Tailwind-Klassen setzt. */
.datev-feld-hinweis {
    line-height: 1.5;
}

/* Regelzeile im DATEV-Modal (Konto / Gegenkonto): zweispaltig, auf schmalen
   Bildschirmen untereinander. */
.datev-raster {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .datev-raster {
        grid-template-columns: 1fr 1fr;
    }
}

/* Fehlermeldung im Modal – gleiche Optik wie die übrigen Formularfehler. */
.datev-fehler {
    border-radius:0;
    border: 1px solid #fecdd3;
    background-color: #fff1f2;
    color: #9f1239;
    font-size: 0.75rem;
    line-height: 1.5;
    padding: 0.75rem;
}