/**
 * glattt Rechner — Frontend.
 *
 * SCHRIFT: Das Plugin bringt bewusst KEINE eigene Schriftart mit und setzt
 * nirgends eine font-family mit Namen. Alles erbt vom Theme (aktuell Dosis aus
 * Salient). Wechselt die Hausschrift, wechselt der Rechner automatisch mit.
 * Die einzigen erlaubten Angaben sind `font-family: inherit` dort, wo Browser
 * eigene Defaults setzen (button, input) — sonst faellt der Rechner still auf
 * Arial zurueck.
 *
 * Alle Farben stehen als Variablen am Wurzelelement, damit sie sich an einer
 * Stelle aendern lassen.
 */

.glr {
    --glr-gold: #E1B520;
    --glr-mint: #BCEEE2;
    --glr-tinte: #313131;
    --glr-grau: #7D7C7C;
    --glr-linie: #E6E2D8;
    --glr-flaeche: #F7F5F0;
    --glr-weiss: #FFFFFF;

    /* Durchmesser des Reglergriffs — gross genug fuer zwei Ziffern */
    --glr-griff: 2.6rem;

    color: var(--glr-tinte);
    max-width: 1100px;
    margin: 0 auto;
    /* Theme-Schrift bewusst nicht ueberschreiben */
}

/* Buttons und Inputs erben die Schrift nicht von selbst */
.glr button,
.glr input,
.glr output {
    font-family: inherit;
    font-size: inherit;
}

/* ------------------------------------------------------------------- Kopf */

.glr-kopf { text-align: center; margin-bottom: 1.75rem; }

/* Die Überschrift bekommt bewusst KEINE eigene Typografie: Grösse, Gewicht,
   Farbe und Versalien kommen aus den h1/h2-Regeln des Themes, damit sie sich
   in die Seite einfügt statt daneben zu stehen. Hier steht nur Layout. */
.glr-titel {
    margin: 0;
    text-wrap: balance;
}

/* Relativ zur geerbten Überschriftgrösse, damit der Zusatz mitwächst */
.glr-titel-zusatz {
    display: inline-block;
    font-size: .42em;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--glr-grau);
    vertical-align: super;
    margin-left: .35em;
}

/* ----------------------------------------------------------------- Raster */

/* align-items: stretch — die Ergebnisspalte läuft auf die volle Höhe der
   linken Spalte mit, statt oben zu kleben. Ihr Inhalt wird darin senkrecht
   zentriert. */
.glr-raster {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: stretch;
}

@media (min-width: 900px) {
    .glr-raster { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2.5rem; }
}

.glr-steuerung { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }

.glr-feld { display: flex; flex-direction: column; gap: .6rem; }

/* Geschlecht und Methode stehen nebeneinander und brechen erst um,
   wenn es wirklich eng wird. */
.glr-feld-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2.5rem;
}

.glr-label {
    font-size: .82rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--glr-grau);
}

/* ------------------------------------------------------------ Umschalter */

.glr-schalter {
    display: inline-flex;
    background: var(--glr-flaeche);
    border-radius: 999px;
    padding: .25rem;
    gap: .25rem;
    align-self: flex-start;
    max-width: 100%;
}

.glr-schalter-knopf {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--glr-grau);
    padding: .55rem 1.4rem;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.2;
    transition: background-color .18s ease, color .18s ease;
}

.glr-schalter-knopf:hover { color: var(--glr-tinte); }

.glr-schalter-knopf[aria-pressed="true"] {
    background: var(--glr-gold);
    color: var(--glr-weiss);
}

/* Kleinere Variante für den Ansichtswechsel — der steht neben der
   Zonen-Beschriftung und soll ihr nicht die Schau stehlen. */
.glr-schalter-klein .glr-schalter-knopf {
    padding: .35rem 1rem;
    font-size: .85rem;
}

/* Beschriftung links, Ansichtswechsel rechts — eine Zeile, bricht bei Enge um */
.glr-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1rem;
}

.glr-zeile .glr-label { margin: 0; }

/* Umschaltbare Bereiche: hidden muss gegen display:grid/flex gewinnen */
.glr-karte[hidden],
.glr-zonenliste[hidden] { display: none; }

/* --------------------------------------------------------------- Regler */

.glr-regler { display: flex; align-items: center; gap: .9rem; }

.glr-regler-knopf {
    appearance: none;
    border: 1px solid var(--glr-linie);
    background: var(--glr-weiss);
    color: var(--glr-tinte);
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
    transition: border-color .18s ease, color .18s ease;
}

.glr-regler-knopf:hover { border-color: var(--glr-gold); color: var(--glr-gold); }

/* Die Zahl sitzt IM Griff, nicht darüber. Dafür bleibt das native
   Eingabefeld für Bedienung und Tastatur zuständig, wird aber unsichtbar
   gemacht; der sichtbare Griff ist das <output> darüber. Es liegt bewusst
   auf pointer-events: none, damit Ziehen und Klicken am Original ankommen. */
.glr-regler-bahn {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    min-height: var(--glr-griff);
}

.glr-regler-eingabe {
    appearance: none;
    width: 100%;
    height: 3px;
    background: var(--glr-linie);
    border-radius: 999px;
    outline: none;
    margin: 0;
}

/* Griff unsichtbar, aber in voller Größe — sonst wandert der Greifpunkt */
.glr-regler-eingabe::-webkit-slider-thumb {
    appearance: none;
    width: var(--glr-griff);
    height: var(--glr-griff);
    border-radius: 50%;
    background: transparent;
    border: 0;
    cursor: grab;
}

.glr-regler-eingabe::-moz-range-thumb {
    width: var(--glr-griff);
    height: var(--glr-griff);
    border-radius: 50%;
    background: transparent;
    border: 0;
    cursor: grab;
}

.glr-regler-eingabe:active::-webkit-slider-thumb { cursor: grabbing; }
.glr-regler-eingabe:active::-moz-range-thumb { cursor: grabbing; }

.glr-regler-griff {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: var(--glr-griff);
    height: var(--glr-griff);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glr-weiss);
    border: 2px solid var(--glr-tinte);
    border-radius: 50%;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    pointer-events: none;
}

.glr-regler-eingabe:focus-visible + .glr-regler-griff {
    border-color: var(--glr-gold);
    box-shadow: 0 0 0 3px rgba(225, 181, 32, .3);
}

/* ---------------------------------------------------------- Koerperkarte */

.glr-karte {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
}

.glr-karte-basis,
.glr-karte-ebene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
}

.glr-karte-ebene {
    opacity: 0;
    transition: opacity .22s ease;
}

.glr-karte-ebene.is-an { opacity: 1; }

.glr-hits {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.glr-hit {
    fill: transparent;
    stroke: transparent;
    stroke-width: .4;
    cursor: pointer;
    transition: fill .18s ease, stroke .18s ease;
}

.glr-hit:hover { fill: rgba(225, 181, 32, .22); stroke: var(--glr-gold); }

/* Hinweis auf die Klickbarkeit: eine leise Welle läuft einmal über die Zonen,
   versetzt nach ihrer Reihenfolge. Läuft nur, solange niemand die Karte
   benutzt hat — danach nimmt das JS die Klasse wieder weg. */
@keyframes glr-puls {
    0%, 62%, 100% { fill: rgba(225, 181, 32, 0); }
    72%           { fill: rgba(225, 181, 32, .3); }
}

.glr-hits-hinweis .glr-hit {
    animation: glr-puls 3.4s ease-in-out infinite;
    animation-delay: calc(var(--glr-takt, 0) * 55ms);
}

/* Wer die Karte schon getroffen hat, braucht keinen Hinweis mehr */
.glr-hits-hinweis:hover .glr-hit { animation: none; }

/* Browser zeichnen auf SVG-Elementen mit tabindex einen eigenen Fokusrahmen um
   die Bounding-Box — ein dicker, abgerundeter Kasten quer über den Körper, in
   der System-Akzentfarbe. Der muss weg, und zwar auf :focus, nicht erst auf
   :focus-visible: Beim Mausklick ist nur :focus aktiv. */
.glr-hit:focus { outline: none; }

/* Tastaturbedienung behält eine sichtbare Rückmeldung — über Füllung und
   Kontur der Zone selbst, nicht über einen Kasten. */
.glr-hit:focus-visible {
    outline: none;
    fill: rgba(225, 181, 32, .28);
    stroke: var(--glr-tinte);
    stroke-width: .7;
}

.glr-karte-hinweis {
    text-align: center;
    color: var(--glr-grau);
    font-size: .9rem;
    margin: .5rem 0 0;
}

/* --------------------------------------------------------- Zonen als Liste */

.glr-zonenliste {
    list-style: none;
    margin: .25rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
    gap: .45rem;
}

.glr-zone-knopf {
    appearance: none;
    width: 100%;
    background: var(--glr-weiss);
    border: 1px solid var(--glr-linie);
    color: var(--glr-grau);
    border-radius: 999px;
    padding: .5rem .75rem;
    cursor: pointer;
    font-size: .85rem;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.glr-zone-knopf:hover { border-color: var(--glr-gold); color: var(--glr-tinte); }

.glr-zone-knopf.is-an {
    background: var(--glr-gold);
    border-color: var(--glr-gold);
    color: var(--glr-weiss);
}

/* -------------------------------------------------------------- Ergebnis */

.glr-ergebnis {
    background: var(--glr-mint);
    border-radius: .75rem;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    text-align: center;
    /* Kein sticky: Das verträgt sich nicht mit der gestreckten Spalte. */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Der Satz ist die Botschaft, nicht nur eine Beschriftung — deshalb groß und
   in normaler Schreibweise. Das Methodenwort trägt die Aussage und wird
   deutlich hervorgehoben. */
.glr-ergebnis-titel {
    font-size: clamp(1.05rem, 1.9vw, 1.35rem);
    line-height: 1.3;
    margin: 0 0 .5rem;
    color: var(--glr-tinte);
    text-wrap: balance;
}

.glr-ergebnis-methode {
    font-size: 1.45em;
    font-weight: 700;
    line-height: 1.1;
    display: inline-block;
    vertical-align: -.06em;
}

.glr-ergebnis-summe {
    font-size: clamp(2.1rem, 7vw, 3.2rem);
    line-height: 1.1;
    margin: 0;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.glr-ergebnis-detail {
    color: var(--glr-tinte);
    opacity: .75;
    font-size: .9rem;
    margin: .35rem 0 0;
    min-height: 1.2em;
}

/* Die Botschaft: Das Geld ist weg, mit dauerhafter Behandlung bliebe es da. */
.glr-ersparnis {
    margin: 1.1rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(49, 49, 49, .15);
    font-size: 1.1rem;
    line-height: 1.35;
    color: var(--glr-tinte);
}

.glr-wartekosten {
    margin: .45rem 0 0;
    font-size: .95rem;
    color: var(--glr-tinte);
    opacity: .8;
}

.glr-ersparnis[hidden],
.glr-wartekosten[hidden],
.glr-pillen[hidden] { display: none; }

/* Gewählte Zonen als Pillen — bei der Grafik-Ansicht sonst nicht ablesbar */
.glr-pillen {
    list-style: none;
    margin: .9rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
}

.glr-pille {
    background: rgba(255, 255, 255, .65);
    color: var(--glr-tinte);
    border-radius: 999px;
    padding: .22rem .7rem;
    font-size: .78rem;
    line-height: 1.4;
}

/* Der Button ist der Zweck der ganzen Karte — er darf auffallen:
   voll abgerundet, über die volle Breite, mit Tiefe, Pfeil und einem
   ruhigen Puls, der das Auge holt, ohne zu zappeln. */
.glr-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-top: 1.5rem;
    background: var(--glr-gold);
    color: var(--glr-weiss);
    text-decoration: none;
    padding: 1.05rem 1.9rem;
    border-radius: 999px;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.25;
    box-shadow: 0 6px 18px rgba(225, 181, 32, .45);
    animation: glr-cta-puls 2.8s ease-in-out infinite;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

@keyframes glr-cta-puls {
    0%, 100% { box-shadow: 0 6px 18px rgba(225, 181, 32, .45); }
    50%      { box-shadow: 0 8px 26px rgba(225, 181, 32, .75); }
}

.glr-cta:hover,
.glr-cta:focus-visible {
    color: var(--glr-weiss);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(225, 181, 32, .85);
    animation: none;
}

.glr-cta-pfeil {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    transition: transform .2s ease;
}

.glr-cta:hover .glr-cta-pfeil { transform: translateX(.25rem); }

.glr-cta:focus-visible { outline: 3px solid var(--glr-tinte); outline-offset: 3px; }

.glr-disclaimer {
    margin: 1.25rem 0 0;
    font-size: .74rem;
    line-height: 1.5;
    color: var(--glr-tinte);
    opacity: .65;
}

/* Auf schmalen Schirmen steht das Ergebnis unter der Auswahl und soll dort
   nicht künstlich in die Höhe gezogen werden. */
@media (max-width: 899px) {
    .glr-ergebnis { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .glr * { transition: none !important; animation: none !important; }
}

/* ============================================================ THEME-ABWEHR
 * Themes bringen eigene Regeln für button, ul, li und p mit, die spezifischer
 * sind als eine einzelne Klasse. Bei Salient sind es unter anderem:
 *
 *   body[data-button-style*="slightly_rounded"] button   (0,1,2) → radius 4px
 *   ul li                                                (0,0,2) → list-style: disc
 *   p                                                            → padding-bottom: 27px
 *   button, input, ul                                            → font-size 22px
 *
 * Eine Klasse allein (0,1,0) verliert dagegen. Deshalb werden die betroffenen
 * Werte hier mit vorangestelltem .glr erneut gesetzt: zwei Klassen schlagen
 * eine Klasse plus zwei Elemente. Kein !important nötig.
 *
 * Geprüft gegen alle 24 Stylesheets von glattt.com. Wechselt das Theme,
 * gehört dieser Block noch einmal gegengeprüft — die Werte sind dieselben wie
 * weiter oben, sie stehen hier nur ein zweites Mal mit höherem Gewicht.
 * ========================================================================= */

/* border-radius braucht als einziges ein !important: Salient setzt
 *   body[data-button-style*="slightly_rounded"] button { border-radius:4px !important }
 * und !important schlägt jede Spezifität. Ein eigenes !important gewinnt, weil
 * bei gleicher Wichtigkeit wieder die Spezifität entscheidet — und .glr plus
 * Klasse (0,2,0) liegt über Attribut plus zwei Elementen (0,1,2).
 * Alle anderen Werte hier kommen ohne aus. */
.glr .glr-schalter-knopf {
    border-radius: 999px !important;
    font-size: .95rem;
    line-height: 1.2;
}

.glr .glr-regler-knopf {
    border-radius: 50% !important;
    font-size: 1.15rem;
    line-height: 1;
}

.glr .glr-zone-knopf {
    border-radius: 999px !important;
    font-size: .85rem;
    line-height: 1.2;
    list-style: none;
}

/* Listen: kein Aufzählungszeichen, weder über list-style noch über ::marker */
.glr .glr-pillen,
.glr .glr-zonenliste {
    list-style: none;
    font-size: 1rem;
    line-height: 1.4;
}

.glr .glr-pille,
.glr .glr-zonenliste > li {
    list-style: none;
}

.glr .glr-pille::marker,
.glr .glr-zonenliste > li::marker { content: none; }

.glr .glr-pille { font-size: .78rem; line-height: 1.4; }

/* Absätze: das Theme hängt unten Abstand an, der die Karte auseinanderzieht */
.glr .glr-ergebnis p,
.glr .glr-karte-hinweis { padding: 0; }

/* Der Alters-Regler erbt sonst die vergrößerte Theme-Schrift */
.glr .glr-regler-eingabe { font-size: 1rem; }
.glr .glr-regler-griff { font-size: 1rem; line-height: 1; }