/**
 * mod_academy_formstart
 *
 * Eigenständig gestaltet, weil das Template "astropraxis" kein CSS-Framework
 * mitbringt. Alles unter .academy-formstart verschachtelt, damit nichts
 * außerhalb beeinflusst wird.
 */

/* Das Modul steht mal in einem dunklen Kasten, mal auf hellem Grund.
   Statt zwei Fassungen zu pflegen, erbt es die Textfarbe seiner Umgebung
   und arbeitet ansonsten mit currentColor. Der dunkle Kasten laesst sich
   ueber die Einstellung "Darstellung" zuschalten. */
.academy-formstart {
    --fs-primary: #432333;
    --fs-accent: #ef4339;

    padding: 0;
    background: transparent;
    color: inherit;
    border-radius: 2px;
    box-sizing: border-box;
}

/* Eigener dunkler Kasten */
.academy-formstart--kasten {
    padding: 2rem 2.25rem 2.5rem;
    background: var(--fs-primary);
    color: #fff;
}

.academy-formstart-heading {
    margin: 0 0 .75rem;
    font-size: 1.6rem;
    line-height: 1.25;
    color: inherit;
}

.academy-formstart-intro {
    margin: 0 0 1.25rem;
    line-height: 1.5;
    color: inherit;
    opacity: .85;
}

.academy-formstart-form {
    display: flex;
    flex-direction: column;
    gap: 3.125rem;
}

/* Der zarte Rand faellt im dunklen Kasten kaum auf, macht das Feld auf
   hellem Grund aber ueberhaupt erst sichtbar. */
.academy-formstart-input {
    inline-size: 100%;
    padding: .85rem 1.25rem;
    border: 1px solid rgba(67, 35, 51, .18);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    color: #22202a;
    box-sizing: border-box;
}

.academy-formstart-input:focus-visible {
    outline: 2px solid var(--fs-accent);
    outline-offset: 2px;
}

.academy-formstart-button {
    align-self: flex-start;
    inline-size: 80%;
    padding: .85rem 1.75rem;
    border: 0;
    border-radius: 999px;
    background: var(--fs-accent);
    color: #fff;
    font: inherit;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
}

.academy-formstart-button:hover,
.academy-formstart-button:focus-visible {
    background: #d63a30;
}

.academy-formstart-privacy {
    margin: 1rem 0 0;
    font-size: .8rem;
    line-height: 1.45;
    color: inherit;
    opacity: .75;
}

.academy-formstart-privacy a {
    color: inherit;
    text-decoration: underline;
}

/* Nur für Screenreader — das Template bringt die Klasse nicht mit. */
.academy-formstart .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Der Knopf nimmt 80 Prozent der Breite ein und steht links. Frueher
   wurde er ab 600px auf die volle Breite gezogen — dadurch war er genauso
   breit wie das Eingabefeld und wirkte schwer.
   Auf schmalen Bildschirmen waere eine Verkuerzung hinderlich, dort
   nutzt er die ganze Breite. */
@media (max-width: 575px) {
    .academy-formstart-button { inline-size: 100%; }
}