/**
 * com_academy — Frontend-Formulare (Beratungsanfrage, Evaluation).
 * Fokus: gut bedienbar, auch für ältere Besucher (große Touch-Ziele,
 * klare Beschriftung, responsive).
 */

/*
 * Einheitliche Rundungen.
 *
 * Bewusst in JEDER Stylesheet-Datei wiederholt, nicht nur in einer.
 *
 * Die Ansichten laden unterschiedliche Dateien: portal.css im
 * Tutorenportal, profiles.css bei den Profilen, requests.css bei den
 * Anfragen. Standen die Variablen nur in forms.css, waren sie auf den
 * übrigen Seiten unbekannt — und eine unbekannte Variable ohne Ersatzwert
 * ergibt GAR KEINE Rundung. Genau deshalb waren die Knöpfe plötzlich
 * eckig.
 *
 * Zusätzlich trägt jede Verwendung einen Ersatzwert, falls diese Zeilen
 * einmal überschrieben werden.
 *
 *   btn / field  999px  -> der Browser begrenzt auf die halbe Höhe,
 *                          das ergibt immer eine runde Seite.
 *   box            8px  -> Karten und Kästen.
 *   textarea      16px  -> mehrzeilige Felder; voll rund sähe dort
 *                          aus wie eine Kapsel.
 */
:root {
    --academy-radius-btn: 999px;
    --academy-radius-field: 999px;
    --academy-radius-box: 8px;
    --academy-radius-textarea: 16px;
}



.academy-request-form .control-group,
.academy-evaluation-form .control-group {
    margin-bottom: 1.1rem;
}

.academy-request-form .control-label,
.academy-evaluation-form .control-label {
    font-weight: 600;
    margin-bottom: 0.35rem;
}

/* Große, gut greifbare Eingabefelder */
.academy-request-form input,
.academy-request-form select,
.academy-request-form textarea {
    font-size: 1.05rem;
    padding: 0.6rem 0.7rem;
}

/* Geburtsdatum/-zeit: die Teil-Listen nebeneinander */
.academy-birth-selects {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}

.academy-birth-part {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 8rem;
    min-width: 7rem;
    margin: 0;
}

.academy-birth-part > span {
    font-size: 0.9rem;
    color: #555;
}

.academy-birth-part select {
    width: 100%;
    min-height: 2.9rem;      /* große Touch-Ziele */
    font-size: 1.05rem;
}

/* Kalender-Variante */
.academy-birth-date {
    max-width: 16rem;
    min-height: 2.9rem;
    font-size: 1.1rem;
}

/* Auf sehr schmalen Handys untereinander, aber lesbar */
@media (max-width: 480px) {
    .academy-birth-part {
        flex: 1 1 100%;
    }
}

/* ============================================================
   Evaluation: horizontale Radios
   ============================================================ */

/* Einfache Radios (Ja/Nein, Sehr gut...) horizontal nebeneinander */
.academy-evaluation-form fieldset.radio,
.academy-evaluation-form .controls fieldset {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.academy-evaluation-form fieldset.radio label,
.academy-evaluation-form .controls fieldset label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 400;
    margin: 0;
    cursor: pointer;
}

.academy-evaluation-form .control-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

/* Semantisches Differenzial (Q4): Label links | 7 Radios | Label rechts */
.academy-sd {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.academy-sd-row {
    display: grid;
    grid-template-columns: 12rem 1fr 12rem;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid #eee;
}

.academy-sd-left {
    text-align: right;
    color: #444;
}

.academy-sd-right {
    text-align: left;
    color: #444;
}

.academy-sd-scale {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.academy-sd-opt {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

.academy-sd-opt input {
    width: 1.3rem;
    height: 1.3rem;
    cursor: pointer;
}

/* Responsive: auf schmalen Schirmen Labels über/unter die Skala */
@media (max-width: 720px) {
    .academy-sd-row {
        grid-template-columns: 1fr;
        gap: 0.4rem;
        text-align: center;
    }
    .academy-sd-left,
    .academy-sd-right {
        text-align: center;
        font-weight: 600;
    }
    .academy-sd-scale {
        justify-content: space-around;
    }
}

/* ============================================================
   Profil-Selbstpflege (Frontend) — aufgeräumtes Karten-Layout
   ============================================================ */

.academy-profile-edit {
    max-width: 820px;
}

.academy-profile-edit h1 {
    margin-bottom: .3rem;
}

.academy-profile-edit .academy-profile-intro {
    margin-bottom: 1.5rem;
}

/* Jedes Fieldset als saubere Karte */
.academy-profile-edit .academy-fieldset {
    border: 1px solid #e2e2e2;
    border-radius: var(--academy-radius-box, 8px);
    padding: 1.25rem 1.5rem;
    margin: 0 0 1.25rem;
    background: #fff;
}

.academy-profile-edit .academy-fieldset > legend {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--academy-primary, #432333);
    border: none;
    margin: 0 0 1rem;
    padding: 0;
    width: auto;
}

/* Felder innerhalb der Karte */
.academy-profile-edit .control-group {
    margin-bottom: 1rem;
}

.academy-profile-edit .control-group:last-child {
    margin-bottom: 0;
}

.academy-profile-edit .control-label {
    font-weight: 500;
    margin-bottom: .3rem;
    display: block;
}

.academy-profile-edit input[type="text"],
.academy-profile-edit input[type="email"],
.academy-profile-edit input[type="tel"],
.academy-profile-edit input[type="url"],
.academy-profile-edit select,
.academy-profile-edit textarea {
    width: 100%;
    max-width: 480px;
    min-height: 2.7rem;
    padding: .5rem .7rem;
    font-size: 1rem;
}

/* Aktuelles Profilbild */
.academy-profile-current-image {
    border: 1px solid #e2e2e2;
}

/* Rollen-Text-Blöcke etwas absetzen */
.academy-profile-edit .academy-role-block {
    background: #faf9f7;
}

/* Aktionsleiste */
.academy-profile-edit .academy-profile-actions {
    display: flex;
    gap: .6rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.academy-profile-edit .academy-profile-actions .btn {
    min-width: 8rem;
    min-height: 2.8rem;
}

/* Account-Hinweis dezenter */
.academy-account-hint {
    max-width: 820px;
}

/* ============================================================
   Profil-Kopfzeile (Anzeige + Bearbeiten) — Bild + Name
   ============================================================ */

.academy-profile-view-head,
.academy-profile-edit-head {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0 0 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e2e2e2;
}

.academy-profile-view-avatar,
.academy-profile-edit-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #f0ece6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.academy-profile-view-avatar img,
.academy-profile-edit-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.academy-avatar-initials {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--academy-primary, #432333);
}

.academy-profile-view-head-text,
.academy-profile-edit-head-text {
    flex: 1;
    min-width: 0;
}

.academy-profile-view-head-text h1,
.academy-profile-edit-head-text h1 {
    margin: 0 0 .2rem;
    font-size: 1.6rem;
}

.academy-profile-view-role,
.academy-profile-edit-role {
    margin: 0;
    color: var(--academy-primary, #432333);
    font-weight: 500;
}

.academy-profile-edit-btn {
    flex-shrink: 0;
    align-self: center;
}

/* ============================================================
   Variante B: zweispaltiges Feld-Layout in den Fieldsets
   ============================================================ */

.academy-profile-edit .academy-fieldset .control-group {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: .4rem 1rem;
    align-items: center;
    margin-bottom: .85rem;
}

.academy-profile-edit .academy-fieldset .control-label {
    margin: 0;
    text-align: right;
    color: #555;
    font-weight: 500;
}

.academy-profile-edit .academy-fieldset .controls {
    min-width: 0;
}

.academy-profile-edit .academy-fieldset .controls input,
.academy-profile-edit .academy-fieldset .controls select,
.academy-profile-edit .academy-fieldset .controls textarea {
    max-width: 100%;
    width: 100%;
}

.academy-image-note {
    grid-column: 1 / -1;
    font-size: .9375rem;
    margin: .3rem 0 0;
}

/* Auf schmalen Schirmen: Labels wieder über die Felder */
@media (max-width: 640px) {
    .academy-profile-view-head,
    .academy-profile-edit-head {
        flex-wrap: wrap;
    }
    .academy-profile-edit-btn {
        width: 100%;
    }
    .academy-profile-edit .academy-fieldset .control-group {
        grid-template-columns: 1fr;
    }
    .academy-profile-edit .academy-fieldset .control-label {
        text-align: left;
    }
}

/* ============================================================
   Anzeige-Seite: Definitionsliste als sauberes Raster
   ============================================================ */

.academy-profile-view .academy-profile-card {
    border: 1px solid #e2e2e2;
    border-radius: var(--academy-radius-box, 8px);
    padding: 1.5rem;
    background: #fff;
}

.academy-profile-dl {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: .6rem 1.25rem;
    margin: 0;
}

.academy-profile-dl dt {
    text-align: right;
    color: #777;
    font-weight: 500;
}

.academy-profile-dl dd {
    margin: 0;
    color: #222;
}

.academy-role-summary {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #eee;
}

.academy-role-summary h3 {
    font-size: 1.1rem;
    color: var(--academy-primary, #432333);
    margin: 0 0 .4rem;
}

.academy-role-motto {
    color: #555;
    margin: 0 0 .5rem;
}

@media (max-width: 640px) {
    .academy-profile-dl {
        grid-template-columns: 1fr;
        gap: .1rem 0;
    }
    .academy-profile-dl dt {
        text-align: left;
        margin-top: .6rem;
    }
}

/* --- Captcha (1.0.66) ---------------------------------------------------
   Das Proof-of-Work-Captcha arbeitet unsichtbar. Der Container bekommt nur
   etwas Luft, damit das Widget (falls es eines rendert) nicht am Absenden-
   Knopf klebt. */
.academy-captcha,
.control-group .academy-captcha {
    margin-block: .5rem;
}

/* --- Formularsystem (1.0.67) ------------------------------------------ */

.academy-form-intro {
    margin-block-end: 1.5rem;
}

.academy-form .control-group {
    margin-block-end: 1rem;
}

.academy-form .control-label {
    font-weight: 600;
    margin-block-end: .25rem;
}

/* Zusammengesetzte Felder (Tag/Monat/Jahr, Stunde/Minute) nebeneinander. */
.academy-composite {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.academy-composite-part {
    flex: 1 1 6rem;
    min-width: 5rem;
}

.academy-composite-part select,
.academy-composite-part input {
    width: 100%;
}

/* Semantisches Differenzial: Begriff links, Skala, Begriff rechts. */
.academy-scale-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.academy-scale-left,
.academy-scale-right {
    flex: 1 1 8rem;
}

.academy-scale-right {
    text-align: right;
}

.academy-scale-values {
    display: flex;
    gap: .5rem;
    justify-content: center;
}

.academy-scale-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: .875rem;
    cursor: pointer;
}

.academy-form-submit {
    margin-block-start: 1.5rem;
}

@media (max-width: 575.98px) {
    .academy-scale-right {
        text-align: left;
    }
}

/* --- Danke-Seite (1.0.78) --------------------------------------------- */
.academy-form-thanks .academy-thanks-body {
    margin-block: 1rem 1.75rem;
}

.academy-form-thanks .academy-thanks-actions {
    margin-block-start: 1.5rem;
}

/* =====================================================================
   Formularsystem (com_academy Formulare) — 1.0.79

   Das Template "astropraxis" bringt bewusst kein CSS-Framework mit.
   Klassen wie .row, .col-md-*, .control-group oder .visually-hidden
   haben dort also keine Wirkung. Alles, was das Formular braucht, steht
   deshalb hier — konsequent unter .academy-form verschachtelt, damit es
   nichts außerhalb beeinflusst und ein später doch vorhandenes Bootstrap
   nicht stört.
   ===================================================================== */

.academy-form {
    --academy-primary: #432333;
    --academy-accent: #ef4339;
    --academy-border: #d3d3d8;
    --academy-gap: .75rem;
}

/* ---- Raster ---- */
.academy-form .row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: calc(var(--academy-gap) / -2);
}

.academy-form [class^="col-md-"],
.academy-form [class*=" col-md-"] {
    flex: 0 0 100%;
    max-width: 100%;
    padding-inline: calc(var(--academy-gap) / 2);
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .academy-form .col-md-1  { flex-basis: 8.3333%;  max-width: 8.3333%; }
    .academy-form .col-md-2  { flex-basis: 16.6667%; max-width: 16.6667%; }
    .academy-form .col-md-3  { flex-basis: 25%;      max-width: 25%; }
    .academy-form .col-md-4  { flex-basis: 33.3333%; max-width: 33.3333%; }
    .academy-form .col-md-5  { flex-basis: 41.6667%; max-width: 41.6667%; }
    .academy-form .col-md-6  { flex-basis: 50%;      max-width: 50%; }
    .academy-form .col-md-7  { flex-basis: 58.3333%; max-width: 58.3333%; }
    .academy-form .col-md-8  { flex-basis: 66.6667%; max-width: 66.6667%; }
    .academy-form .col-md-9  { flex-basis: 75%;      max-width: 75%; }
    .academy-form .col-md-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
    .academy-form .col-md-11 { flex-basis: 91.6667%; max-width: 91.6667%; }
    .academy-form .col-md-12 { flex-basis: 100%;     max-width: 100%; }
}

/* ---- Feldblöcke ---- */
.academy-form .control-group {
    margin-block-end: 1rem;
}

.academy-form .control-label {
    display: block;
    margin-block-end: .3rem;
    font-weight: 600;
    color: var(--academy-primary);
}

.academy-form .control-label label {
    font-weight: inherit;
}

/* Pflichtkennzeichen.
   Nur das Sternchen wird eingefärbt, NICHT das Label. Joomla vergibt die
   Klasse "required" am <label> selbst — wer sie mit einfärbt, macht jede
   Pflichtbeschriftung dauerhaft rot, obwohl noch gar nichts falsch ist.
   Rot ist eine Fehlerfarbe und sollte erst dann auftauchen, wenn wirklich
   etwas fehlt. */
.academy-form .star,
.academy-form .control-label .star {
    color: var(--academy-accent);
    margin-inline-start: .15rem;
}

.academy-form label,
.academy-form label.required,
.academy-form .control-label label {
    color: inherit;
}

/* Fehlerzustand: Joomlas Validierung setzt die Klasse "invalid" auf Feld
   und Beschriftung. ERST dann wird es rot. */
.academy-form label.invalid,
.academy-form .control-label label.invalid,
.academy-form .control-label.invalid {
    color: var(--academy-accent);
}

/* ---- Nur für Screenreader ---- */
.academy-form .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---- Auswahlgruppen ----
   Joomla rendert Radio- und Mehrfachauswahlfelder in einem <fieldset> mit
   <legend>. Die Legende wiederholt die Beschriftung, die eine Zeile höher
   schon steht. Sie bleibt im Dokument (Screenreader brauchen sie zur
   Gruppierung), wird aber nicht angezeigt — sonst steht dieselbe Frage
   zweimal untereinander, einmal davon in einem Kasten. */
.academy-form .controls fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
}

.academy-form .controls fieldset > legend {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* :not(.academy-optionset) — sonst wirkt der zusätzliche Abstand unter
   jedem Label auch auf das eigene Markup weiter unten und reißt die
   Zeilen unnötig weit auseinander. */
.academy-form .controls fieldset:not(.academy-optionset) label,
.academy-form .form-check label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-block-end: .35rem;
    font-weight: 400;
}

.academy-form .controls fieldset:not(.academy-optionset) input[type="radio"],
.academy-form .controls fieldset:not(.academy-optionset) input[type="checkbox"] {
    inline-size: auto;
    margin: 0;
}

/* ---- Eingabefelder ---- */
.academy-form input[type="text"],
.academy-form input[type="email"],
.academy-form input[type="tel"],
.academy-form input[type="url"],
.academy-form input[type="number"],
.academy-form input[type="date"],
.academy-form select,
.academy-form textarea {
    inline-size: 100%;
    padding: .5rem .65rem;
    border: 1px solid var(--academy-border);
    border-radius: var(--academy-radius-textarea, 16px);
    background: #fff;
    font: inherit;
    color: inherit;
    box-sizing: border-box;
}

.academy-form textarea {
    min-block-size: 8rem;
    resize: vertical;
}

.academy-form input:focus-visible,
.academy-form select:focus-visible,
.academy-form textarea:focus-visible {
    outline: 2px solid var(--academy-accent);
    outline-offset: 1px;
    border-color: var(--academy-accent);
}

.academy-form .invalid,
.academy-form input.invalid,
.academy-form select.invalid,
.academy-form textarea.invalid {
    border-color: var(--academy-accent);
}

/* ---- Zusammengesetzte Felder (Tag/Monat/Jahr, Stunde/Minute) ---- */
.academy-form .academy-composite {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.academy-form .academy-composite-part {
    flex: 1 1 6rem;
}

.academy-form .academy-composite-part select {
    inline-size: 100%;
}

/* ---- Skala (semantisches Differenzial) ---- */
.academy-form .academy-scale-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.academy-form .academy-scale-left,
.academy-form .academy-scale-right {
    flex: 1 1 8rem;
    color: var(--academy-primary);
}

.academy-form .academy-scale-right {
    text-align: end;
}

.academy-form .academy-scale-values {
    display: flex;
    gap: .35rem;
}

.academy-form .academy-scale-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    font-size: .85rem;
}

/* ---- Absenden ---- */
.academy-form .academy-form-submit {
    margin-block-start: 1.25rem;
}

.academy-form .btn,
.academy-form button[type="submit"] {
    display: inline-block;
    padding: .6rem 1.4rem;
    border: 0;
    border-radius: var(--academy-radius-btn, 999px);
    background: var(--academy-primary);
    color: #fff;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* Die Schriftfarbe wird hier ausdrücklich wiederholt (1.17.12). Ohne sie
   trägt nur der Hintergrund die Änderung, und die Farbe fällt auf die
   Regel des Templates zurück: dessen `.btn-primary:hover` setzt die
   Schrift auf die Akzentfarbe. Da beide Regeln gleich stark sind,
   entscheidet die Ladereihenfolge — das Template gewinnt, und auf dem
   accentfarbenen Grund steht dann rote Schrift auf rotem Grund. */
.academy-form .btn:hover,
.academy-form button[type="submit"]:hover {
    background: var(--academy-accent);
    color: #fff;
}

/* ---- Ausrichtung von Auswahloptionen (1.0.80) ----
   Nebeneinander gilt erst ab 576px. Darunter stapeln die Optionen wieder,
   weil nebeneinanderstehende Auswahlknöpfe auf einem Telefon zu dicht
   beieinander liegen, um sie sicher zu treffen. */
/* Die frühere Fassung dieser Regeln zielte auf Joomlas Markup und wurde
   durch den Abschnitt "Auswahlknöpfe und Ankreuzlisten" weiter unten
   ersetzt. Zwei Regelsätze für dieselbe Sache widersprechen sich sonst
   gegenseitig, je nachdem welcher zuletzt gilt. */

/* ---- Kästchen nach dem Text ---- */
.academy-form .academy-box-after .controls label {
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: .5rem;
}

/* ---- Beschreibung unter dem Feld ---- */
.academy-form .academy-field-hint {
    margin: .3rem 0 0;
    font-size: .9375rem;
    line-height: 1.45;
    color: #6b6069;
}

/* ---- Mindestgröße der Klickfläche ----
   Auswahlknöpfe und Kästchen sind auf Touchgeräten sonst schwer zu treffen. */
.academy-form .controls input[type="radio"],
.academy-form .controls input[type="checkbox"] {
    inline-size: 1.05rem;
    block-size: 1.05rem;
    flex: 0 0 auto;
}

.academy-form .controls label {
    min-block-size: 1.75rem;
    cursor: pointer;
}

/* ---- Einzelnes Ankreuzfeld ----
   Seit 1.1.23 benutzt es dasselbe Markup wie die Ankreuzlisten. Die
   früheren Sonderregeln für Anordnung, Abstand und Ausrichtung sind
   deshalb entfallen — sie hätten den gemeinsamen Regeln widersprochen und
   je nach Reihenfolge mal die eine, mal die andere gewonnen. Genau daher
   kam der sichtbare Unterschied zwischen dem ersten Kästchen und den
   dreien darunter.

   Übrig bleibt die Ausrichtung des Hinweistexts: Er soll unter dem TEXT
   beginnen, nicht unter dem Kästchen. */
.academy-form .academy-checkbox .academy-field-hint {
    margin-inline-start: 1.95rem;
}

.academy-form .academy-checkbox-after .academy-field-hint {
    margin-inline-start: 0;
}

/* ---- Hinweis des Handlers (1.0.97) ---- */
.academy-form .academy-form-notice {
    margin-block-end: 1rem;
    padding: .75rem 1rem;
    border-inline-start: 4px solid var(--academy-accent);
    background: #fdf3f2;
    border-radius: 0 4px 4px 0;
}

/* =====================================================================
   Auswahlknöpfe und Ankreuzlisten (1.1.21)

   Eigenes Markup statt Joomlas Feldausgabe, damit ein einzelnes
   Ankreuzfeld, eine Ankreuzliste und Auswahlknöpfe GLEICH aussehen.
   Vorher unterschied sich das Markup je Feldtyp — daran scheiterte auch
   die Einstellung "nebeneinander".

   Vorbild ist die alte Joomla-3-Fassung: großzügige Abstände, Kästchen
   und Text auf einer Linie, klar getrennte Zeilen.
   ===================================================================== */

.academy-form .academy-optionset {
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0;

    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.academy-form .academy-option {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.academy-form .academy-option input[type="radio"],
.academy-form .academy-option input[type="checkbox"] {
    flex: 0 0 auto;
    inline-size: 1.35rem;
    block-size: 1.35rem;
    margin: 0;

    /*
     * Mittig zur ersten Textzeile.
     *
     * Die Zeilenhöhe beträgt 1.5rem, das Kästchen 1.35rem — die Differenz
     * halbiert ergibt den Versatz. Mit align-items:flex-start allein säße
     * das Kästchen an der Oberkante des Blocks und damit sichtbar über dem
     * Text, genau wie zuvor.
     */
    margin-block-start: calc((1.5rem - 1.35rem) / 2);

    accent-color: var(--academy-primary);
    cursor: pointer;
}

.academy-form .academy-option label {
    display: block;
    margin: 0;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    cursor: pointer;
}

/* Nebeneinander — erst ab 576px. Darunter bleiben die Optionen
   untereinander, weil sie sonst zu dicht zum Treffen liegen. */
@media (min-width: 576px) {
    .academy-form .academy-options-inline .academy-optionset {
        flex-direction: row;
        flex-wrap: wrap;
        gap: .55rem 2rem;
        align-items: center;
    }
}

/* Kästchen nach dem Text: Reihenfolge umkehren, links ausgerichtet lassen —
   sonst klebt das Kästchen am rechten Seitenrand. Gilt für Listen wie für
   einzelne Kästchen, weil beide dasselbe Markup verwenden. */
.academy-form .academy-box-after .academy-option,
.academy-form .academy-checkbox-after .academy-option {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.academy-form .academy-box-after .academy-option label,
.academy-form .academy-checkbox-after .academy-option label {
    flex: 0 1 auto;
}

/* Einzelnes Ankreuzfeld auf dieselbe Linie bringen wie die Listen —
   sonst sieht "Ich bin Einsteiger/in" anders aus als die drei Zeilen
   darunter, obwohl es dasselbe Element ist. */
/* Die früheren Sonderregeln für das einzelne Ankreuzfeld sind entfallen:
   Es benutzt jetzt dasselbe Markup wie die Listen (.academy-optionset >
   .academy-option) und damit automatisch dieselben Maße und Abstände.
   Zwei getrennte Regelsätze für dasselbe Bedienelement laufen sonst
   früher oder später auseinander — genau das war zu sehen. */

/* .academy-checkbox setzt am Container nur noch die Anordnung; Größe,
   Abstand und Ausrichtung kommen aus den gemeinsamen Regeln. */

.academy-form .academy-optionlist .control-label {
    margin-block-end: .5rem;
}

/* ---- Klickfläche (1.1.22) ----
   Das Kästchen selbst misst 1.35rem (≈22px) und liegt damit unter den
   empfohlenen 24px für Touchbedienung. Statt das Kästchen zu überdehnen,
   wird die ganze Zeile klickbar: Ein Klick auf den Text schaltet die
   Option mit, weil label und input über die id verbunden sind. Die
   Mindesthöhe stellt sicher, dass auch kurze Beschriftungen ein
   ausreichend großes Ziel ergeben. */
.academy-form .academy-option {
    min-block-size: 1.75rem;
    padding-block: .1rem;
}

.academy-form .academy-option label {
    /* Auf die volle Zeilenbreite ziehen, damit auch der Leerraum rechts
       neben kurzen Texten trifft. */
    flex: 1 1 auto;
}

@media (min-width: 576px) {
    /* Nebeneinander: NICHT auf volle Breite ziehen, sonst schiebt die erste
       Option alle weiteren aus der Zeile. */
    .academy-form .academy-options-inline .academy-option label {
        flex: 0 0 auto;
    }
}

/* ---- Lange Beschriftungen (1.1.24) ----
   Einwilligungstexte laufen über mehrere Zeilen. Ohne diese Regeln säße
   das Kästchen an der Blockmitte und die Zeilen klebten aneinander. */
.academy-form .academy-option label a {
    color: var(--academy-primary);
    text-decoration: underline;
}

.academy-form .academy-option label a:hover,
.academy-form .academy-option label a:focus-visible {
    color: var(--academy-accent);
}

.academy-form .academy-field-hint a {
    color: inherit;
    text-decoration: underline;
}

/* =====================================================================
   Anfrage- und Bewertungsformular: gleiche Gestaltung wie das
   Formularsystem (1.4.8)

   Das Template bringt KEIN Bootstrap mit — "form-control" ist dort nur
   für Login und Benutzerkonto gestaltet. Die Felder dieser beiden
   Formulare fielen deshalb auf Browser-Standardbreite zurück und wirkten
   schmal und uneinheitlich.

   Statt eigener Regeln bekommen sie dieselbe Gestaltung wie .academy-form.
   Zwei Regelsätze für dasselbe Aussehen laufen sonst früher oder später
   auseinander.
   ===================================================================== */

.academy-request-form,
.academy-evaluation-form {
    --academy-primary: #432333;
    --academy-accent: #ef4339;
    --academy-border: #d3d3d8;

    max-inline-size: 46rem;
}

.academy-request-form input[type="text"],
.academy-request-form input[type="email"],
.academy-request-form input[type="tel"],
.academy-request-form input[type="date"],
.academy-request-form select,
.academy-request-form textarea,
.academy-evaluation-form input[type="text"],
.academy-evaluation-form input[type="email"],
.academy-evaluation-form select,
.academy-evaluation-form textarea {
    inline-size: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--academy-border);
    border-radius: var(--academy-radius-textarea, 16px);
    background: #fff;
    font: inherit;
    font-size: 1.05rem;
    color: inherit;
    box-sizing: border-box;
}

/* Mindesthöhe für Touch: 2.75rem sind 44px — der übliche Richtwert für
   ein sicher treffbares Ziel. Ohne die Angabe kämen die Felder je nach
   Schriftgröße knapp darunter. */
.academy-request-form input[type="text"],
.academy-request-form input[type="email"],
.academy-request-form input[type="tel"],
.academy-request-form input[type="date"],
.academy-request-form select,
.academy-evaluation-form input[type="text"],
.academy-evaluation-form input[type="email"],
.academy-evaluation-form select {
    min-block-size: 2.75rem;
}

.academy-request-form textarea,
.academy-evaluation-form textarea {
    min-block-size: 8rem;
    resize: vertical;
}

.academy-request-form input:focus-visible,
.academy-request-form select:focus-visible,
.academy-request-form textarea:focus-visible,
.academy-evaluation-form input:focus-visible,
.academy-evaluation-form select:focus-visible,
.academy-evaluation-form textarea:focus-visible {
    outline: 2px solid var(--academy-primary);
    outline-offset: 1px;
    border-color: var(--academy-primary);
}

/* Pflichtkennzeichen: nur das Sternchen, nicht die ganze Beschriftung. */
.academy-request-form .star,
.academy-evaluation-form .star {
    color: var(--academy-accent);
}

.academy-request-form label.required,
.academy-evaluation-form label.required {
    color: inherit;
}

/* ---- Ankreuzfelder: Kästchen und Text in EINER Zeile ----
   Joomla rendert sie als .form-check mit dem Text im Label darüber; ohne
   Bootstrap stand das Kästchen allein unter der Beschriftung. */
.academy-request-form .form-check,
.academy-evaluation-form .form-check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0;
    padding: 0;
}

.academy-request-form .form-check-input,
.academy-evaluation-form .form-check-input {
    flex: 0 0 auto;
    inline-size: 1.35rem;
    block-size: 1.35rem;
    margin: 0;
    margin-block-start: calc((1.5rem - 1.35rem) / 2);
    accent-color: var(--academy-primary);
    cursor: pointer;
}

/* Der Einwilligungstext steht bei diesen Formularen in der Beschriftung
   ÜBER dem Kästchen. Damit die Zeile trotzdem zusammenwirkt, rückt das
   Kästchen an den Text heran statt darunter zu stehen. */
.academy-request-form .control-group:has(.form-check) .control-label,
.academy-evaluation-form .control-group:has(.form-check) .control-label {
    margin-block-end: .4rem;
}

.academy-request-form .controls > a,
.academy-evaluation-form .controls > a {
    display: inline-block;
    margin-block-start: .35rem;
    color: var(--academy-primary);
    text-decoration: underline;
}

/* ---- Absendeknopf ---- */
/* Knopf in der Primärfarbe, nicht im Akzentrot — so wie auf der
   Landingpage. Rot bleibt der Fehlerfarbe vorbehalten. */
.academy-request-form .btn,
.academy-evaluation-form .btn {
    display: inline-block;
    padding: .75rem 1.6rem;
    border: 0;
    border-radius: var(--academy-radius-btn, 999px);
    background: var(--academy-primary);
    color: #fff;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.academy-request-form .btn:hover,
.academy-request-form .btn:focus-visible,
.academy-evaluation-form .btn:hover,
.academy-evaluation-form .btn:focus-visible {
    background: #5a3145;
    color: #fff;
}

/* Geburtsdatum: nicht über die volle Breite ziehen. */
.academy-request-form .academy-birth-date {
    max-inline-size: 16rem;
}

/* ---- Einwilligungen: Kästchen links, Text rechts (1.4.8) ---- */
.academy-request-form .academy-consent .controls,
.academy-evaluation-form .academy-consent .controls {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.academy-request-form .academy-consent .form-check,
.academy-evaluation-form .academy-consent .form-check {
    flex: 0 0 auto;
}

.academy-request-form .academy-consent .academy-consent-text,
.academy-evaluation-form .academy-consent .academy-consent-text {
    flex: 1 1 auto;
    line-height: 1.5;
}

.academy-request-form .academy-consent label,
.academy-evaluation-form .academy-consent label {
    display: inline;
    font-weight: 400;
    cursor: pointer;
}

/* ---- Spaltenraster für das Anfrageformular (1.4.9) ----
   Bis zu drei Felder je Zeile, wie auf der Landingpage. Die Breiten stehen
   im Template, weil dieses Formular fest verdrahtet ist und seine
   Konfiguration nicht aus dem Backend bezieht. */
.academy-request-form .academy-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
}

.academy-request-form .academy-grid > .control-group {
    flex: 1 1 100%;
    min-inline-size: 0;
}

/*
 * Gestaffelt statt einem Sprung.
 *
 * Von einer auf drei Spalten bei 700px wäre zu abrupt: Auf einem Tablet im
 * Hochformat stünden dann drei Felder nebeneinander, die je knapp 200px
 * breit sind — für "Nachname" oder eine E-Mail-Adresse zu wenig.
 *
 * Deshalb zwei Stufen: ab 560px zwei Spalten, ab 900px drei. Felder mit
 * halber Breite bleiben ab 560px bei zwei.
 */
@media (min-width: 560px) {
    .academy-request-form .academy-grid > .academy-col-2,
    .academy-request-form .academy-grid > .academy-col-3 {
        flex: 1 1 calc(50% - .5rem);
    }
}

@media (min-width: 900px) {
    .academy-request-form .academy-grid > .academy-col-3 {
        flex: 1 1 calc(33.333% - .667rem);
    }
}

/* Der Geburtsblock und die Einwilligungen bleiben immer volle Breite —
   sie stehen außerhalb der Spaltenlogik. */
.academy-request-form .academy-grid > .academy-birth,
.academy-request-form .academy-grid > .academy-birthtime,
.academy-request-form .academy-grid > .academy-consent {
    flex: 1 1 100%;
}

/* ---- Kleine Bildschirme (1.4.10) ----
   Auf schmalen Geräten zählt jeder Millimeter: engere Abstände zwischen den
   Feldern, aber unveränderte Zielgrößen. Wer klein tippt, soll nicht auch
   noch schlechter treffen. */
@media (max-width: 559px) {
    .academy-request-form .control-group,
    .academy-evaluation-form .control-group {
        margin-bottom: .9rem;
    }

    .academy-request-form,
    .academy-evaluation-form {
        max-inline-size: 100%;
    }

    /* Der Absendeknopf über die volle Breite — mit dem Daumen sicher
       erreichbar und unübersehbar. */
    .academy-request-form .btn,
    .academy-evaluation-form .btn {
        inline-size: 100%;
        text-align: center;
    }
}

/* Sehr große Bildschirme: Das Formular nicht ins Uferlose ziehen. Lange
   Zeilen sind schwer zu lesen, und ein Eingabefeld über 40rem wirkt leer. */
@media (min-width: 1400px) {
    .academy-request-form,
    .academy-evaluation-form {
        max-inline-size: 52rem;
    }
}

/* =====================================================================
   Abschnitte (1.11.0)

   Gliedern lange Formulare. Als <fieldset> umgesetzt — das dafür
   vorgesehene Element; Browser geben ihm allerdings eigene Abstände und
   Rahmen mit, die hier zurückgesetzt werden.
   ===================================================================== */

.academy-form .academy-section {
    /*
     * Volle Breite ausdrücklich erzwingen.
     *
     * Der Abschnitt liegt in einer Rasterzeile (display:flex). Ein fieldset
     * bringt dort eigene Breitenregeln mit und schrumpft auf seinen Inhalt —
     * zugeklappte Abschnitte reihten sich deshalb nebeneinander, jeder so
     * breit wie seine Überschrift.
     *
     * flex-basis statt nur width: In einer Flex-Zeile entscheidet die Basis,
     * nicht die Breite.
     */
    flex: 0 0 100%;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

/* ---- Aufklappbare Abschnitte als eigenständige Blöcke ----
   Ein zugeklappter Abschnitt muss als Ganzes erkennbar sein: Rahmen,
   Hintergrund für die Kopfzeile, deutlicher Abstand. Ohne das wirken zwei
   geschlossene Abschnitte wie zwei Überschriften ohne Zusammenhang. */
.academy-form .academy-section--toggle {
    border: 1px solid var(--academy-border);
    border-radius: var(--academy-radius-box, 8px);
    overflow: hidden;
}

.academy-form .academy-section--toggle > .academy-section-title {
    margin: 0;
    background: #f5f3f6;
    border-block-end: 1px solid transparent;
}

.academy-form .academy-section--toggle.is-open > .academy-section-title {
    border-block-end-color: var(--academy-border);
}

.academy-form .academy-section--toggle .academy-section-toggle {
    padding: .9rem 1rem;
}

.academy-form .academy-section--toggle .academy-section-text,
.academy-form .academy-section--toggle .academy-section-body {
    padding-inline: 1rem;
}

.academy-form .academy-section--toggle .academy-section-text {
    padding-block-start: 1rem;
}

.academy-form .academy-section--toggle .academy-section-body {
    padding-block-end: 1rem;
}

/* ---- Feste Abschnitte: nur Trennlinie, kein Kasten ---- */
.academy-form .academy-section:not(.academy-section--toggle) {
    margin-block-end: 2rem;
    border-block-start: 2px solid var(--academy-border);
    padding-block-start: 1.25rem;
}

.academy-form .academy-section:not(.academy-section--toggle):first-of-type {
    border-block-start: 0;
    padding-block-start: 0;
}

/* legend sitzt bei fieldset standardmäßig IM Rahmen und bringt eigene
   Abstände mit — beides hier neutralisiert. */
.academy-form .academy-section-title {
    display: block;
    inline-size: 100%;
    margin: 0 0 .75rem;
    padding: 0;
    float: none;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--academy-primary);
}

.academy-form .academy-section-text {
    margin-block-end: 1rem;
    line-height: 1.6;
}

/* ---- Aufklappbare Abschnitte ---- */
.academy-form .academy-section-toggle {
    display: flex;
    align-items: center;
    gap: .6rem;
    inline-size: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 1.25rem;
    font-weight: 700;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

/* Dreieck aus reinem CSS: kein Zeichensatz, kein Bild, dreht sich beim
   Öffnen. */
.academy-form .academy-section-toggle::before {
    content: "";
    flex: 0 0 auto;
    inline-size: 0;
    block-size: 0;
    border-inline-start: .45rem solid currentColor;
    border-block-start: .35rem solid transparent;
    border-block-end: .35rem solid transparent;
    transition: transform .15s;
}

.academy-form .academy-section.is-open .academy-section-toggle::before {
    transform: rotate(90deg);
}

.academy-form .academy-section-toggle:focus-visible {
    outline: 2px solid var(--academy-primary);
    outline-offset: 2px;
}

/* Ohne JavaScript bleibt alles sichtbar — hidden wird erst per Skript
   gesetzt. Diese Regel stellt nur sicher, dass es dann auch greift. */
.academy-form .academy-section-body[hidden],
.academy-form .academy-section-text[hidden] {
    display: none;
}

/* ---- Skala: Frage und Ausweichoption (1.11.1) ---- */
.academy-form .academy-scale-block {
    padding-block: 1rem;
    border-block-end: 1px solid var(--academy-border);
}

.academy-form .academy-scale-question {
    margin-block-end: .75rem;
    line-height: 1.5;
}

/* "kann ich noch nicht bewerten" gehört optisch nicht zur Zahlenreihe —
   es ist keine Abstufung, sondern eine Verweigerung der Abstufung. */
.academy-form .academy-scale-na {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-inline-start: 1.5rem;
    font-size: .875rem;
    color: var(--academy-muted, #666);
    cursor: pointer;
}

.academy-form .academy-scale-na input {
    margin: 0;
}

@media (max-width: 700px) {
    .academy-form .academy-scale-na {
        display: flex;
        margin-inline-start: 0;
        margin-block-start: .6rem;
    }
}