/* =============================================================================
   Loop UI – interne Bibliothek für öffentliche Seiten
   =============================================================================

   Gilt für alle Seiten außerhalb von Filament: Bestellformular, später weitere
   Formulare. Bewusst statisch ausgeliefert, ohne Vite – der Bestellprozess
   braucht keine Build-Pipeline, und eine kaputte npm-Umgebung soll die
   öffentliche Seite nicht blockieren.

   Vier Regeln halten die Datei als Bibliothek brauchbar:

   1. Alle Werte stehen als Design-Token in :root. Komponenten benutzen nur
      var(--token), nie Rohwerte. Ändert Loop die Markenfarbe, ist es eine
      Zeile statt einer Suche über die ganze Datei.
   2. Keine seitenspezifischen Selektoren. Was nur das Bestellformular braucht
      – Warenkorbzeilen, Summenblock, Rechnungssplits – liegt in
      order-form.css. Der Test dafür: wer ein zweites öffentliches Formular
      baut, lädt nur diese Datei und nichts fehlt.
   3. Schriften lokal. Ein Google-Fonts-Aufruf würde die IP jedes Bestellers
      an Google übertragen – auf einer Seite, auf der Hotels verbindlich
      bestellen, ist das ein unnötiges Datenschutzthema.
   4. Interaktivität über Alpine.js, das Livewire ohnehin mitbringt. Kein
      JS-Framework, kein Datepicker-Paket – dafür genügt input type="date".

   Die Werte sind 1:1 aus loop-plus übernommen, damit Bestellseite und
   Kundenportal gleich aussehen.
   ============================================================================= */

/* --- Schriften, lokal ausgeliefert --------------------------------------- */

/*
 * Nur die drei Schnitte, die wirklich verwendet werden (400, 600, 700), plus
 * Bebas Neue für Überschriften. Die Dateien stammen aus
 * loop-plus/src/assets/fonts. font-display: swap zeigt sofort Text in der
 * Ersatzschrift, statt den Inhalt zurückzuhalten.
 */
@font-face {
    font-family: 'Assistant';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/assistant-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Assistant';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/assistant-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Assistant';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/assistant-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/bebas-neue-400.woff2') format('woff2');
}

/* --- Design-Tokens -------------------------------------------------------- */

:root {
    /* Marke */
    --color-primary: #e1007a;
    --color-primary-hover: #b80064;

    /* Zarte Tönung der Markenfarbe – für die aktive Auswahl in Aufklapplisten. */
    --color-primary-soft: #fce4f1;
    --color-secondary: #791a17;
    --color-dark: #140609;

    /* Text und Flächen */
    --color-text-main: #444444;
    --color-text-muted: #7a7a7a;
    --color-default: #eaeaea;
    --color-border: #dcdcdc;
    --color-bg-subtle: #f7f7f7;
    --color-white: #ffffff;

    /* Zustände */
    --color-error: #ee0000;
    --color-warning: #ffba00;
    --color-success: #59c059;
    --color-info: #4cb4ff;

    /*
     * Eigenes Token für Rabattbeträge: dunkler als --color-success, damit ein
     * Minusbetrag auf weißem Grund lesbar bleibt. Stand vorher zweimal als
     * Rohwert im Code.
     */
    --color-discount: #3d9c3d;

    /*
     * Schatten und Fokusringe als Token.
     *
     * Sie standen vorher als rgba()-Rohwerte im Code – zehn Stellen, in denen
     * die Markenfarbe ein zweites Mal ausgeschrieben war. Ein Rebranding hätte
     * sie stillschweigend übersehen: `--color-primary` wäre geändert, der
     * Fokusring wäre weiter pink.
     *
     * `color-mix()` leitet die durchsichtige Fassung aus dem Token ab, statt
     * sie zu wiederholen. Damit gilt Regel 1 auch für halbtransparente Werte.
     */
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
    --focus-ring-strong: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent);
    --focus-ring-error: 0 0 0 3px color-mix(in srgb, var(--color-error) 13%, transparent);
    --shadow-card: 0 2px 12px color-mix(in srgb, var(--color-dark) 7%, transparent);
    --shadow-popover: 0 4px 14px color-mix(in srgb, var(--color-dark) 12%, transparent);

    /*
     * Zustandsfarben, die vorher als Rohwerte im Code standen. Sie leiten sich
     * nicht aus den Grundfarben ab, sondern sind eigene Abstufungen: der
     * Platzhalter muss heller sein als --color-text-muted, der Hover-Rand
     * dunkler als --color-border, und der Hover eines Textknopfs dunkler als
     * --color-error.
     */
    --color-placeholder: #b5b5b5;
    --color-border-hover: #c4c4c4;
    --color-error-hover: #b30000;

    /* Radien */
    --border-radius-tiny: 5px;
    --border-radius-small: 8px;
    --border-radius-medium: 20px;

    /* Typografie */
    --font-main: 'Assistant', -apple-system, Helvetica, Arial, sans-serif;
    --font-heading: 'Bebas Neue', 'Assistant', sans-serif;

    /* Abstände */
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1.25rem;
    --space-lg: 2rem;
}
/* --- Reset (minimal) ------------------------------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-main);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text-main);
    background: var(--color-white);
}

/*
    Links in der Markenfarbe statt im Browserblau. Ohne diese Regel sticht der
    Verweis auf die Teilnahmebedingungen als einziges Element in einer fremden
    Farbe aus der Seite heraus.

    Unterstrichen bleibt er: in einem Formular voller Beschriftungen ist Farbe
    allein kein verlaesslicher Hinweis darauf, dass etwas anklickbar ist -- und
    fuer Farbenblinde gar keiner.
*/
a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:hover,
a:focus-visible {
    color: var(--color-primary-hover);
}

/* --- Layout -------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.main {
    padding-top: var(--space-lg);
    padding-bottom: 4rem;
}

.site-header {
    background: var(--color-dark);
    padding: var(--space-md) 0;
}

.brand {
    font-family: var(--font-heading);
    font-size: 2rem;
    letter-spacing: 0.06em;
    color: var(--color-white);
}

.brand span {
    color: var(--color-primary);
}

.layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-lg);
    align-items: start;
}

@media (max-width: 900px) {
    .layout {
        grid-template-columns: 1fr;
    }
}

/* --- Typografie ---------------------------------------------------------- */

.page-title {
    font-family: var(--font-heading);
    font-size: 2.75rem;
    line-height: 1.1;
    margin: 0 0 var(--space-xs);
    letter-spacing: 0.02em;
}

.page-lead {
    margin: 0 0 var(--space-lg);
    color: var(--color-text-muted);
}

/*
 * Überschriften in Magenta und Versalien wie auf world-of-loop.com – dort sind
 * alle Abschnittstitel in Bebas Neue und in der Markenfarbe gesetzt.
 */
.card-title {
    display: flex;
    align-items: center;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    color: var(--color-primary);
    margin: 0 0 var(--space-md);
}

.card-lead {
    margin: calc(var(--space-md) * -0.5) 0 var(--space-md);
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

/* --- Card ---------------------------------------------------------------- */

/*
 * Karten mit großem Radius und weichem Schatten statt Rahmen – so sind die
 * Event-Karten auf world-of-loop.com gebaut.
 */
.card {
    background: var(--color-white);
    border: 0;
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-card);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
}

/*
 * Sticky sitzt am Grid-Item, nicht an der Karte: mit `align-items: start` am
 * Grid ist die Spalte nur so hoch wie ihr Inhalt, dann hat eine sticky Karte
 * darin keinen Bewegungsraum und bleibt wirkungslos.
 */
/*
    Die breite Spalte. `min-width: 0` aus demselben Grund wie bei
    `.layout-side`: ein Grid-Item behält sonst seine Inhaltsbreite als
    Mindestbreite und schiebt das Raster auf, sobald ein langer Text darin
    steht.
*/
.layout-main {
    min-width: 0;
}

/*
    Die schmale Spalte klebt beim Scrollen oben – im Bestellformular hält sie
    den Summenblock sichtbar, während der Kunde die unteren Abschnitte
    ausfüllt.

    `min-width: 0` ist hier der entscheidende Teil: ein Grid-Item behält
    standardmäßig seine Inhaltsbreite als MINDESTbreite. Ohne die Angabe
    wächst diese Spalte über ihren 1fr-Anteil hinaus, sobald ein einzelner
    langer Text darin steht, und schiebt das ganze Raster waagerecht auf.
    Gemessen mit einem überlangen Produktnamen: die Spalte wuchs auf 590 px
    und das Raster lief 9 px über den Fensterrand hinaus. Mit der Angabe
    bleibt sie in ihrem Anteil und der Text darin wird gekürzt.
*/
.layout-side {
    position: sticky;
    top: var(--space-md);
    min-width: 0;
}

@media (max-width: 900px) {
    .layout-side {
        position: static;
    }
}

/* --- Formularfelder ------------------------------------------------------ */

/*
    `fieldset` bringt vom Browser einen eigenen Rahmen und Innenabstand mit.
    Eine Gruppe von Auswahlknöpfen sähe damit anders aus als jedes andere Feld
    im Formular – der Rahmen muss weg, die semantische Gruppierung bleibt.
    Sie ist der Grund, warum hier überhaupt ein `fieldset` steht: ein
    Screenreader liest die Beschriftung aus `legend` zu jedem Knopf mit vor.
*/
fieldset {
    min-width: 0;
    padding: 0;
    border: 0;
}

/*
    `margin: 0` wäre hier falsch: der Abstand nach unten kommt aus `.field`,
    aber nach OBEN liefert das vorhergehende Element keinen – eine
    Auswahlgruppe direkt unter einem Kontrollkästchen klebte sonst an dessen
    Beschriftung. Nur die Seiten werden zurückgesetzt.
*/
fieldset.field {
    margin-top: var(--space-md);
    margin-right: 0;
    margin-left: 0;
}

legend {
    padding: 0;
}

.field {
    margin-bottom: var(--space-md);
}

.field-label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 0.9375rem;
}

.field-input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--color-text-main);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-tiny);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field-input::placeholder {
    color: var(--color-placeholder);
}

.field-input:hover {
    border-color: var(--color-border-hover);
}

.field-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.field-input.is-invalid {
    border-color: var(--color-error);
}

.field-input.is-invalid:focus {
    box-shadow: var(--focus-ring-error);
}

.field-input:disabled {
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.field-hint {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.field-error {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-error);
}

.field-success {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-discount);
}

.field-input-sm {
    padding: 0.4rem 0.6rem;
    font-size: 0.875rem;
}

.field-textarea {
    resize: vertical;
    min-height: 4rem;
    line-height: 1.45;
}

.field-row {
    display: flex;
    gap: var(--space-sm);
}

/*
    Felder in einer Reihe teilen sich den Platz gleichmäßig, ohne dass jedes
    einzeln eine Breitenklasse braucht.

    Nötig, weil `<x-ui::field>` den Behälter selbst rendert: eine Klasse am
    Komponenten-Tag landet am `<input>`, nicht am umgebenden `.field`. Ohne
    diese Regel behält jedes Feld seine Inhaltsbreite und die Reihe bricht
    ungleichmäßig. `.field-row-narrow` und `.field-row-wide` überschreiben sie
    weiterhin, wenn eine Reihe absichtlich ungleich geteilt wird.
*/
.field-row > .field {
    flex: 1 1 0;
    min-width: 0;
}

.field-row-narrow {
    flex: 0 0 33%;
}

.field-row-wide {
    flex: 1;
}

.field-row-half {
    flex: 1 1 50%;
    min-width: 0;
}

@media (max-width: 560px) {
    .field-row {
        flex-direction: column;
        gap: 0;
    }

    .field-row-narrow,
    .field-row-half {
        flex: 1;
    }
}

/* --- Select --------------------------------------------------------------
   Der eigene Pfeil ist einer der Punkte, die ein Framework mitbringt und die
   man hier von Hand bauen muss – inklusive appearance-Reset für alle Browser.
   ------------------------------------------------------------------------- */

.select-wrap {
    position: relative;
    display: block;
}

.select-wrap select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.25rem;
    cursor: pointer;
    background-color: var(--color-white);
}

.select-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0.9rem;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: -0.35rem;
    border-right: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transform: rotate(45deg);
    pointer-events: none;
}

/*
    Aufklappliste in Loop-Farben statt im Systemblau des Betriebssystems.

    Warum das überhaupt möglich ist: die geöffnete Liste eines `<select>` war
    lange ein Fenster des Betriebssystems, für CSS unerreichbar. Mit
    `appearance: base-select` rendert Chromium sie stattdessen im Dokument –
    damit greifen eigene Farben, und `::picker(select)` ist ansprechbar.

    Bewusst in `@supports` gekapselt und ohne Ersatzlösung: Firefox und Safari
    kennen die Eigenschaft nicht und zeigen weiter die Liste des Systems. Das
    ist eine Verbesserung dort, wo sie geht, und nirgends ein Rückschritt. Ein
    selbstgebautes Aufklappmenü in JavaScript wäre die Alternative – es müsste
    Tastaturbedienung, Bildschirmleser und das Verhalten auf Telefonen von Hand
    nachbauen, alles Dinge, die das eigene Element mitbringt.

    Der Anlass: `loop-plus` nutzt durchgehend PrimeNG-Auswahlfelder (18
    Dateien, kein einziges natives `<select>`) und zeigt damit Loop-Farben.
    Das Systemblau wäre hier ein Bruch gegenüber dem Kundenportal.
*/
@supports (appearance: base-select) {
    .select-wrap select,
    .select-wrap select::picker(select) {
        appearance: base-select;
    }

    /*
        Der eigene Pfeil muss weg: `base-select` bringt einen mit, sonst
        stehen zwei nebeneinander.
    */
    .select-wrap:has(select)::after {
        display: none;
    }

    .select-wrap select::picker-icon {
        color: var(--color-primary);
        transition: transform 0.15s ease;
    }

    .select-wrap select:open::picker-icon {
        transform: rotate(180deg);
    }

    .select-wrap select::picker(select) {
        padding: 0.25rem;
        background: var(--color-white);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-tiny);
        box-shadow: var(--shadow-popover);
    }

    /*
        Textfarbe ausdrücklich setzen, sonst nimmt der Browser seine eigene:
        die aktive Auswahl bekommt von Chromium weißen Text, gedacht für den
        blauen Systemhintergrund. Auf der zarten Tönung hier ergäbe das Weiß
        auf Rosa – gemessen ein Kontrast von etwa 1,2 zu 1 und damit
        unlesbar.
    */
    .select-wrap option {
        padding: 0.45rem 0.6rem;
        color: var(--color-text-main);
        border-radius: var(--border-radius-tiny);
    }

    /*
        Beim Überfahren die Markenfarbe, bei der aktiven Auswahl nur eine
        zarte Tönung: zwei kräftige Flächen gleichzeitig würden den Blick
        teilen, statt zu zeigen, wo der Zeiger steht.
    */
    .select-wrap option:hover,
    .select-wrap option:focus {
        color: var(--color-white);
        background: var(--color-primary);
    }

    .select-wrap option:checked {
        font-weight: 600;
        color: var(--color-text-main);
        background: var(--color-primary-soft);
    }

    .select-wrap option:checked:hover {
        color: var(--color-white);
        background: var(--color-primary);
    }

    /* Das Häkchen, das `base-select` vor die aktive Auswahl setzt. */
    .select-wrap option::checkmark {
        color: var(--color-primary);
    }
}

/* --- Input-Gruppe (Feld + Anhang) ---------------------------------------- */

/*
    Eingabefeld und Knopf als eine Einheit.

    `align-items: stretch` ist nicht überflüssig: ohne die Angabe richtet der
    Browser den Knopf an der Schriftlinie aus statt ihn auf Feldhöhe zu
    ziehen. Ein Knopf mit kleinerem Innenabstand bleibt dann niedriger als das
    Feld und sitzt sichtbar versetzt – die beiden wirken nicht mehr
    zusammengehörig.
*/
.input-group {
    display: flex;
    align-items: stretch;
}

/*
    Der Fokusring umschließt die GANZE Gruppe, nicht nur das Eingabefeld.

    Vorher lag er allein am Feld und endete dort, wo der Knopf beginnt – ein
    an drei Seiten offenes Rechteck, das mitten im Element abbricht. Feld und
    Knopf sind aber optisch eine Einheit (gemeinsame Kanten, geteilte Radien),
    also muss die Rückmeldung diese Einheit umranden.

    Umgesetzt über `:focus-within` auf dem Behälter, während das Feld selbst
    seinen eigenen Ring ablegt. Ein `z-index`-Kniff, der den Ring über den
    Knopf legt, wäre die Alternative – er würde den Knopfrand aber
    überzeichnen und sähe an der Nahtstelle schmutzig aus.
*/
.input-group:focus-within {
    border-radius: var(--border-radius-tiny);
    box-shadow: var(--focus-ring);
}

.input-group:focus-within .field-input {
    border-color: var(--color-primary);
}

.input-group .field-input:focus {
    box-shadow: none;
}

/*
    Der Knopf bekommt beim Tastatur-Fokus keinen eigenen Ring mehr, sonst
    liegen zwei Ringe übereinander. Erkennbar bleibt er über den Ring der
    Gruppe.
*/
.input-group .btn:focus-visible {
    outline: none;
}

.input-group .field-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group-suffix {
    display: inline-flex;
    align-items: center;
    padding: 0 0.75rem;
    background: var(--color-default);
    border: 1px solid var(--color-border);
    border-left: 0;
    border-radius: 0 var(--border-radius-tiny) var(--border-radius-tiny) 0;
    color: var(--color-text-muted);
}

.mt {
    margin-top: var(--space-md);
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.25rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--border-radius-tiny);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-strong);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover:not(:disabled) {
    background: var(--color-primary-hover);
}

.btn-secondary {
    background: var(--color-white);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-secondary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.btn-link {
    background: none;
    padding: 0.3rem 0.4rem;
    font-weight: 400;
    color: var(--color-error);
    text-decoration: underline;
}

.btn-link:hover:not(:disabled) {
    color: var(--color-error-hover);
}

.btn-sm {
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
}

.btn-block {
    width: 100%;
    margin-top: var(--space-md);
}

/* --- Wiederholte Zeilen (Teilnehmer, Splits) ----------------------------- */

.repeat-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--space-sm);
    align-items: start;
    margin-bottom: var(--space-sm);
}

/* --- Checkbox und Radio -------------------------------------------------- */

.checkbox,
.radio {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: var(--space-sm);
    font-size: 0.9375rem;
    line-height: 1.4;
    cursor: pointer;
}

.checkbox input,
.radio input {
    flex: 0 0 auto;
    margin-top: 0.2rem;
    accent-color: var(--color-primary);
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.radio + .radio {
    margin-top: 0.5rem;
}

.mt-md {
    margin-top: var(--space-md);
}

.mt-lg {
    margin-top: var(--space-lg);
}

/* --- Abschnittsnummer ---------------------------------------------------------
   Offener Magenta-Ring, kein gefüllter Kreis: world-of-loop.com setzt vor jede
   Überschrift genau so einen Ring. Eine gefüllte Fläche wirkt daneben fremd.
   ---------------------------------------------------------------------------- */

.step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-right: 0.6rem;
    font-family: var(--font-main);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-primary);
    background: transparent;
    border: 3px solid var(--color-primary);
    border-radius: 50%;
    vertical-align: middle;
}

/* --- Hinweisboxen -------------------------------------------------------- */

.alert {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--border-radius-tiny);
    border-left: 3px solid;
    margin-bottom: var(--space-md);
    font-size: 0.9375rem;
}

.alert:last-child {
    margin-bottom: 0;
}

.alert-info {
    background: color-mix(in srgb, var(--color-info) 10%, transparent);
    border-color: var(--color-info);
}

.alert-warning {
    background: color-mix(in srgb, var(--color-warning) 12%, transparent);
    border-color: var(--color-warning);
}

.alert-success {
    background: color-mix(in srgb, var(--color-success) 12%, transparent);
    border-color: var(--color-success);
}

.alert-error {
    background: color-mix(in srgb, var(--color-error) 8%, transparent);
    border-color: var(--color-error);
}


/* --- Symbol-Knopf --------------------------------------------------------- */

/*
    Ein Knopf, der nur ein Symbol trägt. Gehört in die Bibliothek, weil er
    nichts über Bestellungen weiß.

    Die Fläche ist bewusst 2,25rem groß, auch wenn das Symbol kleiner ist:
    darunter wird das Ziel auf einem Telefon zu klein, um es zuverlässig zu
    treffen. Bei einem Knopf, der etwas entfernt, ist ein Fehlgriff besonders
    ärgerlich.

    Grau im Ruhezustand, rot beim Überfahren: das Entfernen soll nicht um
    Aufmerksamkeit mit dem Absende-Knopf konkurrieren, aber im Moment des
    Zeigens klar sagen, was es tut.
*/
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    color: var(--color-text-muted);
    background: none;
    border: 0;
    border-radius: var(--border-radius-tiny);
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}

.btn-icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.btn-icon:hover,
.btn-icon:focus-visible {
    color: var(--color-error);
    background: var(--color-bg-subtle);
}

/*
    Sichtbarer Fokusrahmen. Ein Symbol-Knopf ohne Text ist für jemanden, der
    mit der Tastatur navigiert, sonst unauffindbar.
*/
.btn-icon:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* --- Ausgeblendet, aber vorhanden ---------------------------------------- */

/*
    Für das Fangfeld gegen automatisierte Einsendungen.

    Bewusst `position: absolute` mit Verschiebung aus dem Bild und nicht
    `display: none`: manche Automatiken überspringen Felder, die als
    ausgeblendet erkennbar sind, und füllen nur, was im Layout steht. So sieht
    das Feld für sie wie ein normales Textfeld aus, für einen Menschen ist es
    unsichtbar und über `tabindex="-1"` auch nicht erreichbar.
*/
.is-hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}