/**
 * agenic Child-Theme – Schriftgrößen-Wähler (Barrierefreiheit)
 *
 * Schwebender Kreis über dem Widerruf-Kreis des Cookie-Banners. Beim Zeigen
 * oder Klick fahren drei Stufen nach links aus dem Kreis (A · A+ · A++).
 * Standard ist die Leiter aus tokens.css; eine größere Stufe hängt als Klasse
 * `ag-textgroesse-plus` / `-plusplus` am <html> (setzt inc/textgroesse.php im
 * Kopf, textgroesse.js bei der Wahl).
 *
 * Quellen:
 *   Entscheidung Vincent, 29.09.2026 (zweites Konzept): drei Stufen —
 *     14 / 16 · 16 / 18 · 17 / 20 (Klein-/Fließtext); Stufen fahren beim Hover
 *     nach links aus; „Best practice für Stufenwahl".
 *   Entscheidung Vincent, 30.09.2026 (siebtes Konzept, ersetzt „M ist
 *     Standard nur Desktop"): **Ursprungsgröße bleibt Standard** auf jedem
 *     Gerät — die Leiter aus tokens.css (Figma Copy/XS · Copy/S · Copy/M);
 *     dazu wählbar A+ (16 / 18) und A++ (17 / 20).
 *   Figma `icon-button` (676:116) Größe=M: 48 × 48, Radius radius/max, Icon 24.
 *   Figma `nav-item` (684:241) Typ=Pill, Theme=dark (nav-item.css): Radius max,
 *     Polster spacing/s × spacing/m, Copy/M 16/21 Light −2 %, Text/inverse,
 *     Hover und Aktiv Interaction/hover-tint--inverse 10 %, Aktiv zusätzlich
 *     Medium (Headline/S) — Farbe nie alleiniger Bedeutungsträger.
 *   Widerruf-Kreis in cookie-banner.css: Fläche Surface/darkest, Zeichen
 *     Text/inverse, Schatten --shadow-floating, Randabstand spacing/ml (tmp),
 *     mobil spacing/m; Hover 2 px anheben, Fläche Surface/dark.
 *   Ein-/Ausfahren wie die Suche-Palette (search-palette.css): Transitions mit
 *     @starting-style und `display … allow-discrete`, Öffnen duration/s (350),
 *     Schließen duration/xs (150), Staffel stagger/s (60), Versatz distance/shift.
 *   Token-Leiter --fs-100 12 · --fs-150 13 · --fs-200 14 · --fs-300 16 (tokens.css).
 *     Nutzung gemessen 29.09.2026: 94 · 20 · 139 · 92 Stellen.
 *   Projekt-Doc claude/schriftgroessen-knopf-29-09.md.
 *
 * Abweichungen, bewusst:
 *   - Stufen für 12 und 13 px (Copy/XS, 13er-Hilfsstufe) hat Vincent nicht
 *     genannt — fortgeschrieben: A+ +2 (14 / 15), A++ +3 (15 / 16). tmp.
 *   - Die Überschriftenstufen --fs-400 (18) und --fs-500 (20) bleiben — bei A+
 *     ist der Fließtext (18) so groß wie h5, bei A++ (20) so groß wie h4 und
 *     größer als h5. Entscheidung Vincent offen.
 *   - Pill-Schrift fest 16 px (Copy/M) statt var(--fs-300): Der Wähler soll
 *     beim Umschalten nicht unter dem Zeiger springen.
 *   - Nicht `.ag-icon-btn` aus ui.css (32 px, Chat-Ära, von nichts genutzt);
 *     nicht die Klassen aus nav-item.css: Das Plugin-CSS lädt nur mit dem
 *     Widget auf der Seite. Werte 1:1 übernommen, wie cookie-banner.css es mit
 *     button.css hält.
 *   - Kreis dunkel wie der Keks (Bildvorgabe Vincent 25.09.2026) statt
 *     icon-button Typ=Solid (Surface/brand) — und er bleibt dunkel: Ist eine
 *     größere Stufe gesetzt (`is-abweichend`, setzt das JS), wechselt das
 *     Zeichen „aA" zu „+" bzw. „++" (Entscheidung Vincent, 29.09.2026:
 *     „Iconwechsel" statt hellem Kreis). Das Zeichen steht in der
 *     Fließtextgröße seiner Stufe (var(--fs-300): 18 · 20), Medium wie die
 *     gewählte Pille.
 *   - Zeichen „A klein + A groß" als eigene SVG-Maske, 24er-Raster, Strich 1.5
 *     wie der Keks (kein Font Awesome, F25).
 *   - Randabstand und Luft zum Keks ohne Figma-Wert (tmp, wie Keks-Kreis).
 *
 * Spezifität: Elementors Kit-CSS setzt `.elementor-kit-7 button` (0,1,1) mit
 * Verlauf, Farbe, Polster und Radius (gemessen 29.09.2026, post-7.css). Die
 * Knöpfe tragen deshalb ihre Klasse doppelt (0,2,0), Muster aus
 * agenic_widgets/assets/css/button.css (K3-5, 04.09.2026) — unabhängig von
 * der Ladereihenfolge. Zweites Muster im Bestand: Reclaim-Regel in
 * elementor-bridge.css (`button.ag-chip`, hängt an der Reihenfolge) — nicht
 * gewählt, weil das eine gemeinsame Datei anfassen würde.
 * Mathefunktionen stehen einzeilig (WP-Rocket-Minifier, Regel 9).
 */

/* ── Stufen: die Leiter unterhalb der Überschriften wächst ─────────── */
/* Standard = tokens.css (12 · 13 · 14 · 16), keine Regel nötig. Die zwei
   größeren Stufen wirken auf jede Stelle, die var(--fs-100/150/200/300)
   liest, auch auf body (base.css) und die Elementor-Globale „Text"
   (elementor-bridge.css). Selektor html.klasse (0,1,1) schlägt :root (0,1,0)
   aus tokens.css unabhängig von der Ladereihenfolge. */

html.ag-textgroesse-plus {
    --fs-100: 14px; /* tmp — 12 → 14 (+2, fortgeschrieben) */
    --fs-150: 15px; /* tmp — 13 → 15 (+2, fortgeschrieben) */
    --fs-200: 16px; /* 14 → 16, Entscheidung Vincent */
    --fs-300: 18px; /* 16 → 18, Entscheidung Vincent */
}

html.ag-textgroesse-plusplus {
    --fs-100: 15px; /* tmp — 12 → 15 (+3, fortgeschrieben) */
    --fs-150: 16px; /* tmp — 13 → 16 (+3, fortgeschrieben) */
    --fs-200: 17px; /* 14 → 17, Entscheidung Vincent */
    --fs-300: 20px; /* 16 → 20, Entscheidung Vincent */
}

/* ── Der Wähler: Leiste links, Kreis rechts ─────────────────────────── */

.ag-textgroesse {
    /* L3 — Maße, 1:1 wie der Widerruf-Kreis (cookie-banner.css) */
    --ag-textgroesse-groesse: var(--field-height-m);  /* Figma icon-button M → Form/field-height-m (48) */
    --ag-textgroesse-icon: 24px;                      /* Figma icon-button M, Icon 24; kein Größen-Token im Code */
    --ag-textgroesse-abstand: var(--spacing-ml);      /* tmp — Randabstand ohne Figma-Wert */
    --ag-textgroesse-luft: var(--spacing-m);          /* tmp — Luft zum Keks-Kreis darunter */
    --ag-textgroesse-fuge: var(--spacing-s);          /* Figma nav-item itemSpacing spacing/s (8) — Leiste ↔ Kreis, Pille ↔ Pille */
    --ag-textgroesse-ausfahrweg: calc(var(--ag-textgroesse-groesse) + var(--ag-textgroesse-fuge)); /* Leiste startet hinter dem Kreis */
    /* L3 — Farben des Kreises (bleiben in jeder Stufe) */
    --ag-textgroesse-flaeche: var(--color-surface-darkest);
    --ag-textgroesse-flaeche-hover: var(--color-surface-dark);
    --ag-textgroesse-zeichen: var(--color-text-inverse-soft);
    /* L3 — Pillen (nav-item Typ=Pill, Theme=dark) */
    --ag-textgroesse-stufe-fg: var(--color-text-inverse-soft);
    --ag-textgroesse-stufe-bg-hover: var(--color-interaction-hover-tint-inverse);
    --ag-textgroesse-stufe-bg-aktiv: var(--color-interaction-hover-tint-inverse);
    --ag-textgroesse-stufe-fs: 16px;                  /* Copy/M, bewusst fest — s. Kopf */
    --ag-textgroesse-stufe-lh: calc(21 / 16);

    position: fixed;
    right: var(--ag-textgroesse-abstand);
    bottom: var(--ag-textgroesse-abstand);
    z-index: 9998; /* wie der Widerruf-Kreis, unter dem Banner */
    display: flex;
    flex-direction: row-reverse; /* DOM: Kreis, dann Leiste (Tab-Reihenfolge) — optisch Leiste links */
    align-items: center;
    gap: var(--ag-textgroesse-fuge);
    font-family: var(--font-sans);
}

.ag-textgroesse[hidden] {
    display: none; /* bis textgroesse.js übernimmt; ohne JS bleibt der Wähler weg */
}

/* Mit Complianz: über dem Keks-Kreis (Abstand + Kreis + Luft) */
.ag-textgroesse--ueber-cookie {
    bottom: calc(var(--ag-textgroesse-abstand) + var(--ag-textgroesse-groesse) + var(--ag-textgroesse-luft));
}

/* ── Der Kreis ───────────────────────────────────────────────────────── */

.ag-textgroesse__knopf.ag-textgroesse__knopf {
    position: relative;
    z-index: 1; /* über der Leiste, die hinter ihm hervorfährt */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--ag-textgroesse-groesse);
    height: var(--ag-textgroesse-groesse);
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-max);
    background: var(--ag-textgroesse-flaeche); /* Kurzform: löscht auch das Verlaufs-Bild des Kits */
    box-shadow: var(--shadow-floating);
    color: var(--ag-textgroesse-zeichen);
    font-family: var(--font-sans);
    font-size: var(--fs-300);             /* „+" / „++" in der Fließtextgröße der Stufe: 18 · 20 (Vincent 29.09.: „insgesamt kleiner") */
    line-height: 1;
    font-weight: var(--fw-medium);        /* wie die gewählte Pille */
    letter-spacing: -0.02em;
    text-transform: none;
    cursor: pointer;
    transition: transform var(--motion-fast) var(--motion-ease-standard), background-color var(--motion-hover) var(--motion-ease-standard), color var(--motion-hover) var(--motion-ease-standard);
}

/* Stufenzeichen und „aA" liegen übereinander (absolut, vom Flex-Kreis zentriert)
   und blenden weich um — duration/xs wie das Schließen der Leiste (Vincent 29.09.) */
.ag-textgroesse__zeichen,
.ag-textgroesse__knopf.ag-textgroesse__knopf::before {
    position: absolute;
    transition: opacity var(--motion-duration-xs) var(--motion-ease-standard);
}

/* Zeichen der Stufe („+" / „++") — nur sichtbar, wenn eine größere Stufe gesetzt ist */
.ag-textgroesse__zeichen {
    display: block;
    opacity: 0;
}

/* Zeichen: A klein + A groß auf gemeinsamer Grundlinie, 24er-Raster, Strich 1.5 */
.ag-textgroesse__knopf.ag-textgroesse__knopf::before {
    content: "";
    display: block;
    width: var(--ag-textgroesse-icon);
    height: var(--ag-textgroesse-icon);
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 18l3-7.5 3 7.5M3.7 15.5h3.6M10.5 18l5-13 5 13M12.3 13.5h6.4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 18l3-7.5 3 7.5M3.7 15.5h3.6M10.5 18l5-13 5 13M12.3 13.5h6.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Hover wie der Keks-Kreis: 2 px anheben */
.ag-textgroesse__knopf.ag-textgroesse__knopf:hover {
    transform: translateY(-2px);
    background: var(--ag-textgroesse-flaeche-hover);
}

.ag-textgroesse__knopf.ag-textgroesse__knopf:focus-visible {
    outline: 2px solid var(--color-interaction-focus-ring);
    outline-offset: 2px;
}

/* Größere Stufe gesetzt: Iconwechsel — statt „aA" steht „+" bzw. „++" im Kreis.
   Klasse setzt textgroesse.js. */
.ag-textgroesse.is-abweichend .ag-textgroesse__knopf.ag-textgroesse__knopf::before {
    opacity: 0;
}

.ag-textgroesse.is-abweichend .ag-textgroesse__zeichen {
    opacity: 1;
}

/* ── Die Leiste mit den Stufen ───────────────────────────────────────── */
/* Geschlossen: display none. Öffnen und Schließen laufen als Transition mit
   @starting-style und allow-discrete (Muster search-palette.css); Browser
   ohne @starting-style zeigen die Leiste schlicht ohne Übergang. Die Leiste
   startet hinter dem Kreis (Kreis liegt per z-index darüber) und fährt nach
   links auf ihren Platz. Öffnen duration/s, Schließen
   duration/xs. */

.ag-textgroesse__stufen {
    display: none;
    align-items: center;
    gap: var(--ag-textgroesse-fuge);
    min-height: var(--ag-textgroesse-groesse);
    padding: var(--spacing-xs); /* Figma spacing/xs (4): Pillen bündig in der 48er-Leiste */
    border-radius: var(--radius-max);
    background: var(--color-surface-darkest);
    box-shadow: var(--shadow-floating);
    opacity: 0;
    translate: var(--ag-textgroesse-ausfahrweg) 0;
    transition: opacity var(--motion-duration-xs) var(--motion-ease-standard), translate var(--motion-duration-xs) var(--motion-ease-standard), display var(--motion-duration-xs) allow-discrete;
}

.ag-textgroesse.is-offen .ag-textgroesse__stufen {
    display: flex;
    opacity: 1;
    translate: 0 0;
    transition-duration: var(--motion-duration-s);
}

@starting-style {
    .ag-textgroesse.is-offen .ag-textgroesse__stufen {
        opacity: 0;
        translate: var(--ag-textgroesse-ausfahrweg) 0;
    }
}

/* ── Die Stufen (Pillen) ─────────────────────────────────────────────── */

.ag-textgroesse__stufe.ag-textgroesse__stufe {
    --ag-textgroesse-verzug: calc(var(--ag-textgroesse-reihe, 0) * var(--motion-stagger-s)); /* Staffel: A++ zuerst (nah am Kreis), dann A+, dann A */

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: var(--spacing-s) var(--spacing-m);  /* Figma nav-item Pill 8 / 16 */
    border: 0;
    border-radius: var(--radius-max);
    background: transparent;
    box-shadow: none;
    color: var(--ag-textgroesse-stufe-fg);
    font-family: var(--font-sans);
    font-size: var(--ag-textgroesse-stufe-fs);
    line-height: var(--ag-textgroesse-stufe-lh);
    font-weight: var(--fw-light);
    letter-spacing: -0.02em;                         /* Copy/M −2 % */
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    opacity: 1;
    translate: 0 0;
    transition: background-color var(--motion-hover) var(--motion-ease-standard) 0s, opacity var(--motion-duration-s) var(--motion-ease-standard) var(--ag-textgroesse-verzug), translate var(--motion-duration-s) var(--motion-ease-standard) var(--ag-textgroesse-verzug);
}

.ag-textgroesse__stufe:nth-child(1) { --ag-textgroesse-reihe: 2; } /* A */
.ag-textgroesse__stufe:nth-child(2) { --ag-textgroesse-reihe: 1; } /* A+ */
.ag-textgroesse__stufe:nth-child(3) { --ag-textgroesse-reihe: 0; } /* A++ */

@starting-style {
    .ag-textgroesse.is-offen .ag-textgroesse__stufe.ag-textgroesse__stufe {
        opacity: 0;
        translate: var(--motion-distance-shift) 0;
    }
}

.ag-textgroesse__stufe.ag-textgroesse__stufe:hover {
    background: var(--ag-textgroesse-stufe-bg-hover);
    color: var(--ag-textgroesse-stufe-fg);
}

/* Gewählt: Fläche + Schriftgewicht (Farbe nie alleiniger Bedeutungsträger) */
.ag-textgroesse__stufe.ag-textgroesse__stufe[aria-checked="true"] {
    background: var(--ag-textgroesse-stufe-bg-aktiv);
    color: var(--ag-textgroesse-stufe-fg);
    font-weight: var(--fw-medium);
}

.ag-textgroesse__stufe.ag-textgroesse__stufe:focus-visible {
    outline: 2px solid var(--color-interaction-focus-ring);
    outline-offset: 2px;
}

/* Mobil: Randabstand auf den Seitenrand (Figma Layout/padding/mobile 16) */
@media (max-width: 767px) {
    .ag-textgroesse {
        --ag-textgroesse-abstand: var(--spacing-m);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ag-textgroesse__knopf.ag-textgroesse__knopf,
    .ag-textgroesse__knopf.ag-textgroesse__knopf::before,
    .ag-textgroesse__zeichen,
    .ag-textgroesse__stufen,
    .ag-textgroesse.is-offen .ag-textgroesse__stufen,
    .ag-textgroesse__stufe.ag-textgroesse__stufe {
        transition: none;
    }
}