/* ============================================================================
   ADHS Mittelfranken – Liquid Glass für Buttons, Felder und Rahmen
   Stand 11/2026 (10.11.: Abschnitt 8) · ergänzt die Inline-Styles der Seiten, überschreibt nichts am Layout.

   Entscheidung Basti, 02.11.2026: „alle Buttons und Rahmen sollten Liquid Glass
   Optik bekommen" und „überall anpassen, wo es noch passt".

   Drei Regeln, nach denen hier gearbeitet wurde:
   1. KONTRAST GEHT VOR OPTIK. Die Seite ist auf WCAG 2.1 AA festgelegt.
      Gefüllte Buttons (Lime auf Dunkelgrün) bleiben deshalb deckend; das Glas
      steckt in Kante, Verlauf und Tiefe, nicht in der Durchsichtigkeit.
      Durchsichtig werden nur Flächen, hinter denen heller Papierton liegt.
   2. backdrop-filter braucht etwas hinter sich. Über einer einfarbigen Fläche
      passiert sichtbar nichts, deshalb zusätzlich saturate/brightness und die
      Deko-Blobs der Seite (.bgshapes) als Hintergrundspiel.
   3. Sparsam. Die Seite hat 10/2026 bewusst Schatten-Karten gegen Linien
      getauscht. Das Glas sitzt an Bedienelementen, nicht auf Textblöcken.
   ========================================================================= */

:root{
  /* Glasflächen über hellem Papier */
  --g-fill:        rgba(252,253,248,.58);
  --g-fill-hover:  rgba(252,253,248,.78);
  --g-edge:        rgba(31,56,32,.16);
  /* saturate zieht die Farbe des Hintergrunds durch das Glas, das ist die
     Web-Entsprechung zu Apples „color is informed by surrounding content";
     brightness hebt die Fläche leicht an wie eine echte Linse. */
  --g-blur:        blur(14px) saturate(180%) brightness(1.05);
  /* Specular: heller Lichtsaum oben, zarter Schattensaum unten */
  --g-spec:        inset 0 1px 0 rgba(255,255,255,.80), inset 0 -1px 0 rgba(31,56,32,.07);
  /* Tiefe: enger Kontaktschatten + weiter Umgebungsschatten */
  --g-lift:        0 1px 2px rgba(29,42,28,.10), 0 10px 22px -10px rgba(29,42,28,.28);
  --g-lift-hover:  0 2px 4px rgba(29,42,28,.12), 0 16px 30px -12px rgba(29,42,28,.34);
  /* Linsenkante nach Apple: „reflects and refracts its surroundings".
     Oben der Lichtsaum, an den Seiten ein kühler und ein warmer Saum als
     chromatische Aberration, unten der Schattensaum. Alles inset, liegt also
     unter dem Text und kann den Kontrast nicht senken. */
  --g-lens:        inset 0 1px 0 rgba(255,255,255,.82),
                   inset 1px 0 0 rgba(150,215,255,.20),
                   inset -1px 0 0 rgba(255,205,140,.18),
                   inset 0 -1px 0 rgba(31,56,32,.09);
  /* Das Glanzlicht (--g-spot) steht NICHT hier. Eine Custom Property löst
     var() dort auf, wo sie deklariert ist; auf :root gibt es kein --mx, also
     blieb das Licht fest auf 50 % -15 %, egal wohin der Zeiger fuhr. Gefunden
     von Noor am 02.11. Deshalb wird --g-spot weiter unten am Element selbst
     deklariert. */
  /* Glasflächen auf den dunklen Bändern */
  --g-dark-fill:   rgba(255,255,255,.10);
  --g-dark-hover:  rgba(255,255,255,.14);
  --g-dark-edge:   rgba(255,255,255,.34);
  --g-dark-spec:   inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.18);
}

/* Glanzlicht an Lime-Buttons. Hier am Element deklariert, damit var(--mx) am
   Element aufgelöst wird. Registrierte Eigenschaften, damit Betreten und
   Verlassen sanft gleiten statt zu springen. */
@property --mx{ syntax:'<percentage>'; inherits:false; initial-value:50%; }
@property --my{ syntax:'<percentage>'; inherits:false; initial-value:-15%; }
.btn-p, .wa, .joinbtn, .cta a.p, .qt-go.ready, .mform button{
  --g-spot: radial-gradient(80px 60px at var(--mx) var(--my),
              rgba(255,255,255,.50), rgba(255,255,255,0) 62%);
}

/* ── 1. Gefüllte Buttons (Lime) ─────────────────────────────────────────────
   Deckend, damit der Kontrast bleibt. Glas entsteht durch den Verlauf von hell
   nach satt, den Lichtsaum an der Oberkante und zwei gestapelte Schatten.      */
.btn-p,
.wa,
.cta a.p,
.qt-go.ready,
.mform button,
.joinbtn{
  background-image:
    var(--g-spot),
    linear-gradient(168deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, var(--lime, #e4fd97) 0%, var(--lime-d, #cdee72) 100%);
  box-shadow: var(--g-lens), var(--g-lift);
  border: 1px solid rgba(31,56,32,.14);
  transition: box-shadow .18s ease, transform .18s cubic-bezier(.22,1,.36,1), filter .18s ease;
}
.btn-p:hover,
.wa:hover,
.cta a.p:hover,
.qt-go.ready:hover,
.mform button:hover,
.joinbtn:hover{
  box-shadow: var(--g-spec), var(--g-lift-hover);
  transform: translateY(-1px);
  filter: saturate(1.06);
}
/* Die Seiten setzen beim Hover `background: var(--lime-d)` als Kurzform. Das
   setzt background-image auf none und löschte das Glas (Noor, 02.11.: „der Hero-
   Button verliert beim Hover sein Glas"). Hier die Ebenen neu legen. */
.btn-p:hover, .wa:hover, .joinbtn:hover, .qt-go.ready:hover, .mform button:hover{
  background-image:
    var(--g-spot),
    linear-gradient(168deg, rgba(255,255,255,.40) 0%, rgba(255,255,255,0) 46%);
}

.btn-p:active,
.wa:active,
.cta a.p:active,
.qt-go.ready:active{
  /* Apple: beim Antippen fließendes Morphen. Hier leichtes Eindrücken plus
     Verkleinern, kurze Dauer, damit es nicht nach Spielerei aussieht. */
  transform: translateY(0) scale(.978);
  box-shadow: inset 0 2px 5px rgba(29,42,28,.20), inset 0 1px 0 rgba(255,255,255,.35);
  transition-duration: .09s;
}

.btn-t:active, .tab:active, .qt-go:active, .vt-go:active, .run:active,
.supbtn:active, .cta a.s:active, .sf-btn:active, .qt-opts label:active span,
.pager button:active{
  transform: scale(.978);
  transition-duration: .09s;
}

/* ── 2. Umrandete Bedienelemente über hellem Grund ──────────────────────────
   Hier darf die Fläche durchsichtig werden: dahinter liegt Papierton, der
   Text bleibt dadurch weit über den AA-Grenzen.                                */
.btn-t,
.tab,
.filter-tab,
.qt-go,
.vt-go,
.run,
.supbtn,
.pager button:not([aria-current="true"]):not(:hover){
  background-color: var(--g-fill);
  border: 1px solid var(--g-edge);
  box-shadow: var(--g-lens), var(--g-lift);
  transition: background-color .18s ease, box-shadow .18s ease,
              transform .18s cubic-bezier(.22,1,.36,1);
}
/* Beim Hover färben viele Seiten die Fläche selbst um, DUNKEL mit heller Schrift
   (.qt-go, .vt-go, .tab, .pager button). Würde das Glas hier die Fläche auf
   hell setzen, stünde helle Schrift auf heller Fläche: gemessen 1,06 bis 1,92:1
   (02.11., Hover-Sweep über 177 Zustände). Deshalb setzt das Glas beim Hover
   nur noch Tiefe und Anhebung. Die Fläche gehört der Seite. */
.btn-t:hover,
.tab:hover,
.filter-tab:hover,
.qt-go:hover,
.qt-opts label:hover span,
.vt-go:hover,
.run:hover,
.pager button:hover{
  box-shadow: var(--g-spec), var(--g-lift-hover);
  transform: translateY(-1px);
}
/* Nur wo die Seite beim Hover die Schriftfarbe NICHT ändert, darf die Fläche
   heller werden. */
.btn-t:hover,
.filter-tab:hover,
.qt-opts label:hover span{
  background-color: var(--g-fill-hover);
}

/* Antwortpillen tragen bewusst weniger Tiefe als die großen Buttons: bei fünf
   Pillen je Frage kommen sonst zu viele Schlagschatten zusammen und übertönen
   die Trennlinien zwischen den Fragen (Noor, 02.11.). */
.qt-opts span{
  background-color: var(--g-fill);
  border: 1px solid var(--g-edge);
  box-shadow: var(--g-lens), 0 1px 2px rgba(29,42,28,.08);
  transition: background-color .18s ease, box-shadow .18s ease;
}

/* Aktiver Zustand.
   WICHTIG: Hier KEINEN Lime-Verlauf auflegen. Die Seiten färben aktive Tabs
   selbst dunkel und setzen helle Schrift dazu; ein Lime-Verlauf darüber ergab
   helle Schrift auf Lime (1,2:1, im Blog am 02.11. gemessen). Nur ein zarter
   weißer Lichtschleier, der auf dunkler wie auf heller Fläche funktioniert. */
.tab[aria-pressed="true"],
.filter-tab.active{
  background-image: linear-gradient(168deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 52%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.16), var(--g-lift);
}

/* Die Antwortpillen des Selbstchecks sind Lime MIT dunkler Schrift, dort passt
   der Lime-Verlauf.
   WICHTIG: Die Auswahl darf nicht nur am Farbton hängen (WCAG 1.4.1). Vor der
   Korrektur unterschieden sich gewählt und ungewählt praktisch nur durch Lime:
   Rand 0,22 gegen 0,16 Deckkraft, Schriftstärke bei beiden 600. Deshalb hier
   wieder ein kräftiger dunkler Rand und fettere Schrift als zweites Merkmal. */
.qt-opts input:checked + span{
  background-color: var(--lime, #e4fd97);
  background-image:
    linear-gradient(168deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, var(--lime, #e4fd97) 0%, var(--lime-d, #cdee72) 100%);
  border: 2px solid var(--ink, #23311f);
  font-weight: 800;
  box-shadow: var(--g-spec), var(--g-lift);
}

/* ── 3. Elemente auf den dunklen Bändern ────────────────────────────────────
   Helles Glas statt dunklem, sonst verschwindet die Kante im Hintergrund.      */
.cta a.s,
.fcols .fb .supbtn{
  background-color: var(--g-dark-fill);
  border: 1px solid var(--g-dark-edge);
  box-shadow: var(--g-dark-spec), 0 10px 24px -14px rgba(0,0,0,.35);
  transition: background-color .18s ease, transform .18s cubic-bezier(.22,1,.36,1);
}
/* Das Licht erscheint nur als Reaktion auf die Maus, nicht als Dauerfleck.
   Stärke bewusst klein: Fläche .14 plus Licht .10 ergibt im Lichtzentrum
   rund .23 Weiß auf dem Band. Mit .26 Licht fiel heller Text auf 3,75:1,
   AA verlangt 4,5:1. Apple musste genau diese Stelle über Monate nachjustieren
   („problematic for legibility and contrast is inherent to the material"). */
.cta a.s:hover,
.fcols .fb .supbtn:hover{
  --g-spot-dark: radial-gradient(80px 60px at var(--mx) var(--my),
                   rgba(255,255,255,.10), rgba(255,255,255,0) 62%);
  background-color: var(--g-dark-hover);
  background-image: var(--g-spot-dark);
  transform: translateY(-1px);
}

/* Plaketten auf den dunklen Bändern */
.badge[class]{
  box-shadow: var(--g-dark-spec);
}

/* Pille im Artikel-Kicker (dunkelgrün auf Papier) */
.ahero .kicker .pill{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 14px -8px rgba(29,42,28,.5);
}

/* ── 3b. Dunkel gefüllte Buttons (Pine mit Lime-Text) ───────────────────────
   Füllung bleibt unangetastet, nur Lichtsaum und Tiefe kommen dazu.           */
.kform button,
.fbform button,
.searchbar button,
.studmore a,
.pager button[aria-current="true"],
.sf-btn.active,
button.full,
.a11y-fab{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.18), var(--g-lift);
  transition: box-shadow .18s ease, transform .18s ease;
}
.kform button:hover,
.fbform button:hover,
.searchbar button:hover,
.studmore a:hover,
button.full:hover,
.a11y-fab:hover{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.18), var(--g-lift-hover);
  transform: translateY(-1px);
}

/* Filter-Chips im Verzeichnis: im Ruhezustand Glas, aktiv bleiben die
   Status-Farben deckend, sonst leidet die Unterscheidbarkeit.                 */
.sf-btn:not(.active),
button.ghost,
.chip[class]:not([class="chip"]),
.sif-sbm{
  background-color: var(--g-fill);
  border-color: var(--g-edge);
  box-shadow: var(--g-spec), 0 1px 2px rgba(29,42,28,.08), 0 6px 14px -8px rgba(29,42,28,.22);
}
.sf-btn:not(.active):hover,
button.ghost:hover,
.sif-sbm:hover{
  background-color: var(--g-fill-hover);
  box-shadow: var(--g-spec), var(--g-lift-hover);
}

/* ── 4. Formularfelder ──────────────────────────────────────────────────────
   Gleiche Sprache wie die Buttons, damit Formulare nicht abfallen.             */
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="url"],
form input[type="search"],
form input[type="password"],
form select,
form textarea{
  background-color: var(--g-fill);
  /* Feldrand deutlich dunkler als bei Buttons: bei Textfeldern ist der Rand
     die EINZIGE Abgrenzung, WCAG 1.4.11 verlangt dafür 3:1. Mit .16 waren es
     1,3:1 (Saanvi, 02.11.). */
  border: 1px solid rgba(31,56,32,.58);
  box-shadow: var(--g-spec), inset 0 2px 6px rgba(29,42,28,.05);
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
form input:focus,
form select:focus,
form textarea:focus{
  background-color: rgba(255,255,255,.88);
  border-color: var(--pine, #2d3e2c);
  box-shadow: var(--g-spec), 0 0 0 3px rgba(45,62,44,.14);
}

/* Formulare, die auf einem dunklen Band sitzen, brauchen DUNKLES Glas.
   Sonst trifft helle Schrift auf helle Fläche: im Melde-Formular des
   Verzeichnisses waren das am 02.11. gemessene 1,10:1 statt 4,5:1.
   Die Selektoren sind absichtlich spezifischer als die Regeln oben. */
.mform input[type="text"],
.mform input[type="email"],
.mform input[type="url"],
.mform input[type="tel"],
.mform select,
.mform textarea{
  background-color: rgba(255,255,255,.10);
  border: 1px solid var(--g-dark-edge);
  box-shadow: var(--g-dark-spec), inset 0 2px 6px rgba(0,0,0,.18);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mform input[type="text"]:focus,
.mform input[type="email"]:focus,
.mform input[type="url"]:focus,
.mform input[type="tel"]:focus,
.mform select:focus,
.mform textarea:focus{
  background-color: rgba(255,255,255,.18);
  border-color: var(--lime, #e4fd97);
  box-shadow: var(--g-dark-spec), 0 0 0 3px rgba(228,253,151,.30);
}
.mform input::placeholder,
.mform textarea::placeholder{ color: rgba(238,244,219,.68); }

/* Formulare mit eigenen, klassenbasierten Feldregeln.
   `.kform input[type=text]` (0,2,1) schlägt `form input[type="text"]` (0,1,2),
   deshalb hatten Kontakt- und Hinweisformular gar kein Glas bekommen
   (Noor, 02.11.: „wirken fast reinweiß"). Mit `form.` davor gewinnt es sauber.
   NICHT dabei: `.sel select` im Verzeichnis. Das sind Inline-Auswahlfelder in
   einem Fließsatz, die sollen wie Text wirken und nicht wie Kästen. */
form.kform input[type="text"],
form.kform input[type="email"],
form.kform textarea,
form.fbform input,
form.fbform textarea{
  background-color: var(--g-fill);
  border: 1px solid rgba(31,56,32,.58);
  box-shadow: var(--g-spec), inset 0 2px 6px rgba(29,42,28,.05);
}
form.kform input:focus,
form.kform textarea:focus,
form.fbform input:focus,
form.fbform textarea:focus{
  background-color: rgba(255,255,255,.88);
  border-color: var(--pine, #2d3e2c);
  box-shadow: var(--g-spec), 0 0 0 3px rgba(45,62,44,.14);
}

/* ── 5. Rahmen: Hinweis- und Merkkästen ─────────────────────────────────────
   Die Linien-Blöcke der Seite bleiben unangetastet, die wenigen echten
   Kästen bekommen die Glaskante.                                              */
.note,
.minidisc,
.disc{
  /* nur Lichtsaum, kein Schlagschatten: die Seite hat 10/2026 bewusst
     Schatten-Karten gegen Linien getauscht (Noor, 02.11.) */
  box-shadow: var(--g-spec);
  border-top: 1px solid rgba(255,255,255,.55);
  border-right: 1px solid var(--g-edge);
  border-bottom: 1px solid var(--g-edge);
}
.note{
  background-color: rgba(220,233,196,.62);
  /* Links eckig: der 4-px-Balken lief vorher an den runden Ecken mit und sah
     verbogen aus (Noor, 02.11.). Rechts bleibt es rund. */
  border-radius: 0 18px 18px 0;
}

/* ── 5b. Fokus ─────────────────────────────────────────────────────────────
   Der Fokusring der Seite ist Pine. Auf den dunklen Bändern ist das Pine auf
   Pine: gemessen 1,00:1, gefordert sind 3:1 (Saanvi, 02.11.). Dort Lime.
   Das ist Altbestand, trifft aber genau die neuen Glas-Buttons. */
.cta :focus-visible,
footer :focus-visible,
.melden :focus-visible,
.fcols :focus-visible{
  outline: 3px solid var(--lime, #e4fd97);
  outline-offset: 3px;
}

/* Die Filter-Auswahlfelder im Verzeichnis hatten outline:none und zeigten den
   Fokus nur über einen Sage-Hintergrund (1,14:1). */
.sel select:focus-visible{
  outline: 3px solid var(--pine, #2d3e2c);
  outline-offset: 2px;
}

/* ── 6. Echtes Glas, nur wenn der Browser es kann ───────────────────────────
   Ohne Unterstützung bleiben Fläche, Kante und Tiefe von oben stehen.          */
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))){
  form.kform input[type="text"], form.kform input[type="email"], form.kform textarea,
  form.fbform input, form.fbform textarea,
  .btn-t, .tab, .filter-tab, .qt-go, .qt-opts span, .vt-go, .run, .supbtn,
  .sf-btn:not(.active), button.ghost, .sif-sbm, .cta a.s, .note,
  form input[type="text"], form input[type="email"], form input[type="tel"],
  form input[type="url"], form input[type="search"], form input[type="password"],
  form select, form textarea{
    -webkit-backdrop-filter: var(--g-blur);
    backdrop-filter: var(--g-blur);
  }
  /* Die Kopfleiste bekommt BEWUSST kein Glas. Sie klebt beim Scrollen, und
     sobald eines der dunklen Bänder darunter durchläuft, fällt der Navigations-
     text auf 3,1:1 (AA verlangt 4,5:1). Selbst bei 92 % Deckung bleiben es nur
     4,47:1, dann wäre vom Glas nichts mehr übrig. Nachgerechnet am 02.11.2026.
     Die Leiste bleibt deckend mit ihrer Linie nach unten. */
}

/* ── 7. Rücksicht ───────────────────────────────────────────────────────────
   Wer Transparenz oder Bewegung reduziert haben will, bekommt deckende
   Flächen und keine Hover-Bewegung.                                           */
/* Übergänge für das wandernde Glanzlicht. Steht bewusst am Ende der Datei: Die
   Regeln der Lime- und Dunkel-Gruppe weiter oben setzen eigene `transition`-
   Listen, und bei gleicher Spezifität gewinnt die spätere. Oben stehend
   sprang das Licht beim Verlassen sofort zurück (gemessen 02.11.). */
.btn-p, .wa, .joinbtn, .cta a.p, .qt-go.ready, .mform button,
.cta a.s, .fcols .fb .supbtn{
  transition: --mx .22s ease-out, --my .22s ease-out,
              background-color .18s ease, box-shadow .18s ease, filter .18s ease,
              transform .18s cubic-bezier(.22,1,.36,1);
}

/* ── 8. Ein Hauptknopf, überall gleich ──────────────────────────────────────
   Basti, 10.11.2026: „alle Buttons sollten aussehen wie die neu erstellten.
   Es ist nicht überall angepasst." Inventur über alle 54 Seiten: zehn Sorten
   hingen noch am alten Dunkelgrün oder waren Lime ohne Glas (Suchen, Alle
   Studien, Verzeichnis öffnen, Projekt unterstützen, Hinweis senden, Nachricht
   senden, Text kopieren, Auswerten, Starter). Sie bekommen hier dieselbe
   Fläche wie .btn-p. Zustands-Anzeigen (aktiver Tab, aktiver Filter, aktuelle
   Seite) bleiben dunkel: dort bedeutet Dunkel „gewählt".
   :is() hebt alle Einträge auf dieselbe Spezifität, damit die Hover-Regeln
   der Seiten (`background: var(--pine-d)`) nicht wieder durchschlagen. */
:is(.searchbar button, .studmore a, .vt-go, .pharma.light .support .supbtn, .fbform button, .kform button, .kiblock button, .run, .starter .go, .sresult button:not(.ghost)){
  --g-spot: radial-gradient(80px 60px at var(--mx) var(--my),
              rgba(255,255,255,.50), rgba(255,255,255,0) 62%);
  color: var(--pine-d, #1d2a1c) !important;
  background-color: var(--lime, #e4fd97);
  background-image:
    var(--g-spot),
    linear-gradient(168deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, var(--lime, #e4fd97) 0%, var(--lime-d, #cdee72) 100%);
  border: 1px solid rgba(31,56,32,.14);
  box-shadow: var(--g-lens), var(--g-lift);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: --mx .22s ease-out, --my .22s ease-out,
              background-color .18s ease, box-shadow .18s ease, filter .18s ease,
              transform .18s cubic-bezier(.22,1,.36,1);
}
:is(.searchbar button, .studmore a, .vt-go, .pharma.light .support .supbtn, .fbform button, .kform button, .kiblock button, .run, .starter .go, .sresult button:not(.ghost)):hover{
  background-color: var(--lime-d, #cdee72);
  background-image:
    var(--g-spot),
    linear-gradient(168deg, rgba(255,255,255,.40) 0%, rgba(255,255,255,0) 46%);
  box-shadow: var(--g-spec), var(--g-lift-hover);
  transform: translateY(-1px);
  filter: saturate(1.06);
}
:is(.searchbar button, .studmore a, .vt-go, .pharma.light .support .supbtn, .fbform button, .kform button, .kiblock button, .run, .starter .go, .sresult button:not(.ghost)):active{
  transform: translateY(0) scale(.978);
  box-shadow: inset 0 2px 5px rgba(29,42,28,.20), inset 0 1px 0 rgba(255,255,255,.35);
  transition-duration: .09s;
}
/* Gesperrte Knöpfe heben sich nicht an */
:is(.searchbar button, .studmore a, .vt-go, .pharma.light .support .supbtn, .fbform button, .kform button, .kiblock button, .run, .starter .go, .sresult button:not(.ghost)):disabled{ transform: none; filter: none; box-shadow: var(--g-lens); }

@media (prefers-reduced-transparency: reduce){
  /* Die Selektoren müssen dieselbe Form haben wie oben, sonst verlieren sie.
     `form input` (0,1,1) schlägt `form input[type="text"]` (0,1,2) NICHT, und
     die Felder blieben durchsichtig, obwohl der Kommentar etwas anderes
     versprach (Saanvi, 02.11.). */
  .btn-t, .tab, .filter-tab, .qt-go, .qt-opts span, .vt-go, .run, .supbtn,
  .sf-btn:not(.active), button.ghost, .sif-sbm,
  form input[type="text"], form input[type="email"], form input[type="tel"],
  form input[type="url"], form input[type="search"], form input[type="password"],
  form select, form textarea,
  form.kform input[type="text"], form.kform input[type="email"], form.kform textarea,
  form.fbform input, form.fbform textarea{
    background-color: #fcfdf8;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .note{ background-color: var(--sage, #dce9c4); -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* Alles, was auf einem dunklen Band sitzt, wird DECKEND DUNKEL. Mit der
     hellen Fläche von oben stünde dort helle Schrift auf fast Weiß. */
  .cta a.s,
  .fcols .fb .supbtn,
  .mform input[type="text"], .mform input[type="email"],
  .mform input[type="url"], .mform input[type="tel"],
  .mform select, .mform textarea{
    background-color: #44543f;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce){
  .btn-p, .wa, .cta a.p, .qt-go, .btn-t, .tab, .filter-tab, .vt-go, .run,
  .supbtn, .cta a.s, .a11y-fab, .qt-opts span, .fcols .fb .supbtn,
  .fbform button, .kform button, .mform button, button.full, .sf-btn,
  .joinbtn, .studmore a, .searchbar button, .pager button{
    transition: none !important;
  }
  :is(.searchbar button, .studmore a, .vt-go, .pharma.light .support .supbtn, .fbform button, .kform button, .kiblock button, .run, .starter .go, .sresult button:not(.ghost)){ transition: none !important; }
  :is(.searchbar button, .studmore a, .vt-go, .pharma.light .support .supbtn, .fbform button, .kform button, .kiblock button, .run, .starter .go, .sresult button:not(.ghost)):hover{ transform: none !important; }
  .btn-p:hover, .wa:hover, .cta a.p:hover, .qt-go:hover, .btn-t:hover,
  .tab:hover, .filter-tab:hover, .vt-go:hover, .run:hover, .cta a.s:hover,
  .a11y-fab:hover, .qt-opts label:hover span, .fcols .fb .supbtn:hover,
  .fbform button:hover, .kform button:hover, .mform button:hover,
  button.full:hover, .sf-btn:not(.active):hover{
    transform: none !important;
  }
}

/* ── 9. Pillen: eine Sorte ──────────────────────────────────────────────────
   Basti, 11.11.2026: „auf der Startseite gibt es immer noch welche, die nicht
   angepasst wurden". Übrig waren die acht Regions-Pillen im Verzeichnis-Teaser
   (flaches Sage ohne Kante) und die Auswahl im Hinweisformular (weiß mit Rand,
   gewählt dunkelgrün). Beide sehen jetzt aus wie die Antwort-Pillen des
   Selbstchecks: helles Glas, gewählt Lime mit dunklem Rand und fetter Schrift.
   Wenig Tiefe, weil viele Pillen nebeneinander stehen (siehe .qt-opts span). */
.vt-reg a,
.fbtypes label{
  background-color: var(--g-fill);
  border: 1px solid var(--g-edge);
  box-shadow: var(--g-lens), 0 1px 2px rgba(29,42,28,.08);
  color: var(--pine-d, #1d2a1c);
  transition: background-color .18s ease, box-shadow .18s ease,
              transform .18s cubic-bezier(.22,1,.36,1);
}
.vt-reg a:hover,
.fbtypes label:hover{
  background-color: var(--g-fill-hover);
  box-shadow: var(--g-spec), var(--g-lift-hover);
  transform: translateY(-1px);
}
.vt-reg a:active,
.fbtypes label:active{ transform: scale(.978); transition-duration: .09s; }
/* Gewählt: Lime plus dunkler Rand plus fette Schrift, also nie nur Farbe (WCAG 1.4.1) */
.fbtypes input:checked + label{
  background-color: var(--lime, #e4fd97);
  background-image:
    linear-gradient(168deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, var(--lime, #e4fd97) 0%, var(--lime-d, #cdee72) 100%);
  border: 2px solid var(--ink, #23311f);
  color: var(--pine-d, #1d2a1c);
  font-weight: 800;
  box-shadow: var(--g-spec), var(--g-lift);
}
.fbtypes input:focus-visible + label{ outline: 3px solid var(--pine, #2d3e2c); outline-offset: 3px; }
@media (prefers-reduced-transparency: reduce){
  .vt-reg a, .fbtypes label{ background-color: #fcfdf8; }
}
@media (prefers-reduced-motion: reduce){
  .vt-reg a, .fbtypes label{ transition: none !important; }
  .vt-reg a:hover, .fbtypes label:hover{ transform: none !important; }
}

/* LESEBREITE:START */
/* ── 10. Lesebreite: Fließtext wie auf einer Nachrichtenseite ──────────────
   Die Textspalte war 1000 px breit (rund 95 Zeichen je Zeile), das liest sich
   anstrengend. Absätze und Aufzählungen enden jetzt bei etwa 70 Zeichen.
   Ausgenommen: die Zeilen der Regionsseiten (.orte, .rliste), dort braucht
   die Breite die Tabellenform. */
.prose :is(p, ul, ol){ max-width: 740px; }
.prose :is(.orte, .rliste) :is(p, ul, ol){ max-width: none; }
/* Hinweis „KI-generiert“ in Fuß und Kopf: schlicht, aber lesbar */
.disc .kihint{ font-weight: 700; color: var(--ink); }
.disc .kihint a{ color: var(--pine); font-weight: 700; border-bottom: 2px solid rgba(31,86,69,.3); }
.ahero .by a.inl, .hero .by a.inl{ color: var(--pine); font-weight: 700; border-bottom: 2px solid rgba(31,86,69,.3); }
/* KI-Zeile in der Kopfzeile der Beiträge: immer eine eigene Zeile, nie ein Trennpunkt am Zeilenende */
.by .kiby{ flex-basis: 100%; }
/* LESEBREITE:END */

/* INFOKAESTEN:START */
/* ── 11. Hinweis- und Info-Kästen: überall runde Ecken ─────────────────────
   Basti, 11.11.2026: „alle Info-Kästchen oder Hinweis-Kasten ebenfalls abgerundete Ecken".
   Vorher war .note links eckig (Balken lief an den Rundungen verbogen mit, Noor 02.11.) und
   .disc (Fußzeile) ein Kasten ohne Fläche mit eckigem Balken. Jetzt: ringsum rund, der Balken
   ist ein Hintergrund-Streifen im Randbereich und wird von der Rundung sauber beschnitten.
   Der Rand links bleibt transparent erhalten, damit sich der Text nicht verschiebt. */
.note, .disc, .minidisc{
  border-radius: 18px;
  background-repeat: no-repeat;
  background-origin: border-box;
}
.note{
  border-left: 4px solid transparent;
  background-image: linear-gradient(var(--clay, #2d3e2c), var(--clay, #2d3e2c));
  background-size: 4px 100%;
}
.disc{
  border-left: 4px solid transparent;
  background-color: rgba(220,233,196,.5);
  background-image: linear-gradient(var(--clay, #2d3e2c), var(--clay, #2d3e2c));
  background-size: 4px 100%;
  padding: 14px 18px 14px 20px;
}
.minidisc{ border-left: 4px solid transparent; background-image: linear-gradient(var(--clay, #2d3e2c), var(--clay, #2d3e2c)); background-size: 4px 100%; }
/* INFOKAESTEN:END */