/* finder.css — Pulse. Der eine Finder (Klassen .sf-*), seit 1.24.0 auf Tozans Größensystem: fließende Schriftgrößen (--font-size-*),
   fließende Abstände (--mini-gap, --grid-gap), Radien (--radius-*), Karten sind Tozans »item«-Karten im »balance«-Raster (3 Spalten).
   Aufbau seit 1.33.0 (Prototyp A, Focus-Sprache): Kopf (.sf-head) · Frage + Bereichs-Tabs als Karten (.sf-tools, nichts klebt) · Zeile mit Pillen, Zähler, Sortierung
   · zweispaltig: Filter-Spalte (.sf-filters: Suche oben, Gruppen als Fragen, Chips 18px, ohne Linien und ohne sichtbaren Rollbalken) und Karten (.sf-main). Unter 1024px klappen die Gruppen hinter »Filter zeigen«, die Suche bleibt sichtbar; auf der Startseite klappt die ganze Spalte (1.36.0).
   Farben: Violett #380348 = deine Auswahl (Sphäre, Chips, Pillen), Bereichsfarben = Bereich (Code Injection --ghost-accent-*), Creme #FDFCED.
   Brand-Regel: auf hellen Farben nur violette Schrift. Kontrast: Violett auf Gelb 9,8:1, Blau 10,1:1, Pink 8,5:1, Türkis 6,4:1; Zähler über 4,5:1; Rahmen von Bedienelementen rund 3:1.
   Touch: alle Bedienelemente mindestens 44px hoch am Handy. */
.sf { --sf-violet: var(--ghost-accent-color, #380348); --sf-yellow: #FFBC21; --sf-cream: #FDFCED; --sf-line: rgba(56,3,72,.14); --sf-line-strong: rgba(56,3,72,.45); --sf-tools-h: 0px;
  --sf-articles: var(--ghost-accent-articles, #FFBC21); --sf-lessons: var(--ghost-accent-lessons, #90D2FF); --sf-games: var(--ghost-accent-games, #EAA6C7); --sf-resources: var(--ghost-accent-resources, #00B3C1);
  --sf-gap: calc(var(--mini-gap) / 1.4); margin-top: 0; }
/* Linien folgen der Schriftfarbe (hell: dunkel-transparent, dunkel: creme-transparent), wie im Prototyp */
@supports (color: color-mix(in srgb, red 10%, transparent)) { .sf { --sf-line: color-mix(in srgb, var(--color-font-one, #030E16) 14%, transparent); --sf-line-strong: color-mix(in srgb, var(--color-font-one, #030E16) 45%, transparent); } }
.sf-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Kopf: Titel, Lead, Einstieg, Zeile »Aktuell«. Kein Hero-Bild. */
.sf-head { padding: var(--mini-gap) 0 0; max-width: 46em; } /* Luft zum Kopf, dort steht auf den Zielgruppen-Seiten die Wortmarke (1.29.0) */
.sf-h1 { font-size: var(--font-size-xxxl); line-height: 1.02; letter-spacing: -.01em; margin: 0 0 .35em; }
.sf-lead { font-size: var(--font-size-s); line-height: 1.45; margin: 0 0 .7em; }
.sf-intro { font-size: var(--font-size-xxs); line-height: 1.55; }
.sf-intro p { margin: 0 0 .7em; opacity: .85; }
.sf-intro p:last-child { margin-bottom: 0; }
.sf-intro ul { list-style: none; margin: .8em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25em .6em; align-items: baseline; }
.sf-intro ul::before { content: var(--sf-now, "Aktuell:"); font-weight: var(--font-weight-bold); }
.sf-intro li { margin: 0; padding: 0; }
.sf-intro li + li::before { content: "·"; margin-right: .6em; opacity: .5; }
.sf-intro li a { color: var(--color-font-one); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sf-intro li a:hover { text-decoration-thickness: 2px; }
.sf-intro li strong { font-weight: inherit; }

/* ---------- Kopf des Finders (1.33.0, Prototyp A in Fuekos Focus-Sprache): Frage, darunter die Bereiche als Tab-Karten. Nichts klebt mehr. */
.sf-tools { margin: var(--mini-gap) 0 0; display: flex; flex-direction: column; gap: var(--mini-gap); }
.sf-switch-wrap { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.sf-ask { font-size: var(--font-size-l); font-weight: var(--font-weight-bold); line-height: 1.1; margin: 0 0 1.4rem; }
.sf-switch { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; margin: 0; padding: 0; background: none; border-radius: 0; max-width: none; }
/* Tab-Karte (1.34.0): nur Titel groß und Zahl, keine Erklärzeile (Andy, 15.09.). Aktiv nach Theme-Setting finder_tab_style: Fill = Fläche in der Bereichsfarbe (Standard), Ring = Creme + Ring. */
.sf-switch button { display: flex; flex-direction: column; justify-content: flex-end; min-height: 9rem; width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--color-font-one); padding: 1.1rem 1.2rem 1.9rem; /* unten mehr Luft: der Titel steht dort, wo er mit der Zahl darunter stand (1.34.6) */
  border: 1.5px solid var(--sf-line); border-radius: var(--radius-large); background: transparent; transition: border-color .15s, background .15s, color .15s; }
.sf-switch button:hover { border-color: var(--color-font-one); }
.sf-switch button[data-bereich="articles"] { --sf-ring: var(--sf-articles); --sf-tile: var(--sf-articles); }
.sf-switch button[data-bereich="lessons"] { --sf-ring: var(--sf-lessons); --sf-tile: var(--sf-lessons); }
.sf-switch button[data-bereich="games"] { --sf-ring: var(--sf-games); --sf-tile: var(--sf-games); }
.sf-switch button[data-bereich="resources"] { --sf-ring: var(--sf-resources); --sf-tile: var(--sf-resources); }
.sf-switch button.sf-all { --sf-ring: var(--sf-violet); --sf-tile: var(--sf-violet); }
/* Fill (Standard, auch ohne Setting): gewählter Bereich in seiner Farbe, Schrift Violett; »Alles« Violett mit Creme */
.sf-switch button.on { background: var(--sf-tile); border-color: transparent; color: #380348; }
.sf-switch button.sf-all.on { color: var(--sf-cream); }
.sf-switch button.on:hover { border-color: transparent; }
/* Ring (Stufe 1): Creme-Fläche mit Ring in der Bereichsfarbe; per Code Injection: .sf-switch.is-ring … oder die Klasse in tools.hbs setzen */
.sf-switch.is-ring button.on { background: var(--color-two, #F5F3E0); color: var(--color-font-one); box-shadow: inset 0 0 0 2px var(--sf-ring, var(--sf-violet)); }
.sf-sw-main { display: block; font-size: var(--font-size-l); font-weight: var(--font-weight-bold); line-height: 1; letter-spacing: -.01em; margin: 0; }
.sf-sw-sub { display: none; }
.sf-sw-count { display: none; } /* 1.34.4: keine Zahl in der Kachel (Andy), die Zeile darunter zählt; Zähler bleibt im Markup (finder.js setzt ihn weiter) */
.sf-switch button.on .sf-sw-count { opacity: .8; }
.sf-sw-count .sf-c { font-size: inherit; opacity: 1; margin: 0; }
.sf-switch button.is-empty { opacity: .45; cursor: default; }
.sf-ico { width: 1.3em; height: 1.1em; flex: 0 0 auto; }
/* Zeile unter den Tabs: Filter-Knopf (Handy), Pillen der gewählten Filter, Zähler, Sortierung (Zufall, Neueste, Empfohlen, A bis Z) */
.sf-tools-row { display: flex; flex-wrap: wrap; gap: var(--sf-gap) var(--mini-gap); align-items: baseline; }
.sf-active { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; align-self: center; }
.sf-active button { font: inherit; font-size: var(--font-size-xxxs); line-height: 1.2; padding: .4em .8em .4em .95em; border: 0; border-radius: var(--radius-full);
  background: var(--sf-violet); color: var(--sf-cream); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.sf-active button b { font-weight: 400; opacity: .7; }
.sf-active button:hover b { opacity: 1; }
/* Eine Zeile für einen Gedanken (1.34.2, Fueko-Logik): »9 von 371 Spiele, sortiert nach Zufall«; Sortierung ist Text mit Pfeil, kein Pillen-Feld */
.sf-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35em; margin-left: auto; font-size: var(--font-size-xxs); }
.sf-status { font-weight: var(--font-weight-bold); white-space: nowrap; }
#sf-count:not(:empty)::after { content: ","; } /* Komma direkt am Zähler (Andy, 15.09.) */
#sf-reset { font: inherit; font-size: var(--font-size-xxxs); background: none; border: none; cursor: pointer; color: var(--color-font-one); opacity: .6; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
#sf-reset::before { content: "·"; margin-right: .6em; text-decoration: none; display: inline-block; }
#sf-reset[hidden] { display: none; }
#sf-reset:hover { opacity: 1; }
.sf-sort-wrap { margin: 0; display: inline-flex; align-items: baseline; gap: .35em; font-size: var(--font-size-xxs); white-space: nowrap; }
.sf-sort-label { opacity: .7; }
.sf-sort { font: inherit; font-size: inherit; min-height: 0; padding: 0 1.3em 0 0; cursor: pointer; border: 0; border-bottom: 1.5px solid var(--sf-line-strong); border-radius: 0;
  background: transparent; color: var(--color-font-one); appearance: none; -webkit-appearance: none; font-weight: var(--font-weight-bold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23380348' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0 center; background-size: .8em; }
.sf-sort:hover { border-bottom-color: var(--color-font-one); }
.sf-sort:focus { outline: none; border-bottom-color: var(--sf-violet); }
.sf-filter-toggle { display: none; align-items: center; gap: 8px; font: inherit; font-size: var(--font-size-xxs); font-weight: var(--font-weight-bold); min-height: 2.75rem; padding: .5em 1.1em;
  border: 1.5px solid var(--sf-line); border-radius: var(--radius-full); background: transparent; color: var(--color-font-one); cursor: pointer; } /* sichtbar unter 1024px und auf der Startseite (1.36.0) */
.sf-filter-toggle[aria-expanded="true"] { background: var(--color-font-one); color: var(--color-body, #FDFCED); }
.sf-n[hidden] { display: none; }
.sf-n { display: inline-block; font-size: .78em; line-height: 1.4; background: var(--sf-yellow); color: #380348; border-radius: var(--radius-full); padding: .1em .55em; letter-spacing: 0; }
.sf-c { font-size: .85em; opacity: .55; margin-left: .4em; font-variant-numeric: tabular-nums; font-weight: 400; }
.sf-c[hidden] { display: none; }
.sf-chips button.is-empty { opacity: .35; cursor: default; }
.sf-chips .sf-c { display: none; } /* 1.34.1: Zahlen nur am Ergebnis (»9 von 371«) und an den Tabs, nicht an jedem Chip (Fueko-Logik); Chips ohne Treffer bleiben ausgegraut. Zurück: Zeile löschen. */

/* Eine Suche statt zwei (1.34.2): auf Finder-Seiten und der Startseite verschwindet die Lupe im Kopf, das Finder-Feld filtert live */
[data-finder] .header-search { display: none !important; }

/* ---------- Zwei Spalten: Filter links (Sidebar-Muster, keine Linien, kein sichtbarer Rollbalken), Karten rechts */
.sf-layout { display: grid; grid-template-columns: 20rem minmax(0, 1fr); gap: 2.5rem; align-items: start; padding: var(--mini-gap) 0 0; } /* Luft zwischen Zähler/Sortierung und Raster (Andy, 15.09.: »Neueste klebt am Artikel«) */
.sf-filters { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow: auto; scrollbar-width: none; display: grid; gap: 1.6rem; align-content: start; }
.sf-filters::-webkit-scrollbar { display: none; }
#sf-q { width: 100%; margin: 0; padding: .85em 1em; min-height: 2.75rem; font: inherit; font-size: var(--font-size-xxs); color: var(--color-font-one);
  background: transparent; border: 1.5px solid var(--sf-line); border-radius: var(--radius-full); }
#sf-q::placeholder { color: var(--color-font-one); opacity: .5; }
#sf-q:hover { border-color: var(--color-font-one); }
#sf-q:focus { outline: none; border-color: var(--sf-violet); }
.sf-groups { display: grid; gap: 1.6rem; }
.sf-group { display: grid; gap: .7rem; padding: 0; border: 0; }
.sf-group[hidden] { display: none; }
.sf-label { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; width: 100%; padding: 0; margin: 0; cursor: pointer; text-align: left;
  font: inherit; font-size: var(--font-size-s); font-weight: var(--font-weight-bold); line-height: 1.2; background: none; border: 0; color: var(--color-font-one); min-height: 0; }
.sf-label-q { flex: 1 1 auto; }
.sf-label-hint { font-size: var(--font-size-xxxs); font-weight: 400; opacity: .55; white-space: nowrap; }
.sf-label .sf-n { flex: 0 0 auto; }
.sf-label .sf-n[hidden] { display: none; }
.sf-group.is-closed .sf-label-hint::after { content: " +"; }
.sf-group.is-closed .sf-chips, .sf-group.is-closed .sf-select, .sf-group.is-closed .sf-show-rest { display: none; }
.sf-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; }
.sf-chips button { font: inherit; font-size: var(--font-size-xs); line-height: 1.2; padding: .5em .85em; min-height: 2.4rem; cursor: pointer; border: 1.5px solid var(--sf-line); border-radius: var(--radius-full);
  background: transparent; color: var(--color-font-one); transition: background .12s, color .12s, border-color .12s; }
.sf-chips button:hover { border-color: var(--color-font-one); }
.sf-chips button.on { background: var(--sf-violet); border-color: var(--sf-violet); color: var(--sf-cream); }
.sf-chips button.on .sf-c { opacity: .8; }
.sf-chips button[title] { cursor: help; }
.sf-chips button.is-empty:hover { border-color: var(--sf-line); }
.sf-chips button.sf-rest { display: none; } /* gekürzte Gruppe (data-show): der Rest hinter »Weitere zeigen« */
.sf-show-rest { justify-self: start; font: inherit; font-size: var(--font-size-xxxs); cursor: pointer; background: none; border: 0; padding: 0; color: var(--color-font-one); opacity: .6; text-decoration: underline; text-underline-offset: 3px; }
.sf-show-rest:hover { opacity: 1; }
.sf-show-rest[hidden] { display: none; }
.sf-select { width: 100%; margin: 0; font: inherit; font-size: var(--font-size-xxs); min-height: 2.4rem; padding: .4em 2.2em .4em 1em; cursor: pointer; max-width: 100%;
  border: 1.5px solid var(--sf-line); border-radius: var(--radius-full); background: transparent; color: var(--color-font-one); appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23380348' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8em center; background-size: .9em; }
.sf-select:hover { border-color: var(--color-font-one); }
.sf-select.on { background-color: var(--sf-violet); color: var(--sf-cream); border-color: var(--sf-violet); }
.sf-select:focus { outline: 3px solid rgba(56,3,72,.22); }

/* Pfeil der Auswahlfelder im Dark Mode creme statt violett (Daten-URI kann kein currentColor) */
[data-color-scheme="dark"] .sf-sort, [data-color-scheme="dark"] .sf-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDFCED' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { [data-color-scheme="auto"] .sf-sort, [data-color-scheme="auto"] .sf-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDFCED' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } }

/* ---------- Zeile über dem Raster, wenn ein Eingang vorwählt (/parents/ zeigt Elternmaterial): ehrlich sagen, was man sieht, ein Klick zeigt alles */
.sf-sphere-note { margin: 0 0 var(--mini-gap); font-size: var(--font-size-xxs); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.sf-sphere-note[hidden] { display: none; }
.sf-sphere-note button { font: inherit; font-size: var(--font-size-xxxs); min-height: 2.25rem; padding: .35em 1em; cursor: pointer; border: 1px solid var(--sf-line-strong); border-radius: var(--radius-full); background: transparent; color: var(--color-font-one); }
.sf-sphere-note button:hover { border-color: var(--color-font-one); }

/* ---------- Merkliste */
.sf-pinned { margin: 0 0 var(--mini-gap); padding: calc(var(--mini-gap) / 1.2) var(--mini-gap); background: var(--color-two, #F5F3E0); border-radius: var(--radius-medium); }
.sf-pinned-label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--font-size-xxxs); letter-spacing: .08em; text-transform: uppercase; font-weight: var(--font-weight-bold); opacity: .85; }
.sf-pinned-label svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
.sf-pinned-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sf-pinned-item { display: inline-flex; align-items: center; gap: .55rem; padding: .25rem .35rem .25rem .25rem; min-height: 2.5rem; background: var(--color-body, #FDFCED); border-radius: var(--radius-full);
  text-decoration: none; color: var(--color-font-one); font-size: var(--font-size-xxxs); font-weight: var(--font-weight-bold); line-height: 1.25; max-width: 100%; }
.sf-pinned-item span { padding: .1rem 0; }
.sf-pinned-item img { width: 2rem; height: 2rem; border-radius: var(--radius-full); object-fit: cover; margin: 0; flex: 0 0 auto; }
.sf-pinned-item:hover span { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sf-unpin { width: 1.75rem; height: 1.75rem; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: var(--radius-full); background: none; cursor: pointer;
  color: var(--color-font-one); font-size: .85em; line-height: 1; padding: 0; opacity: .55; }
.sf-unpin:hover { opacity: 1; background: rgba(56,3,72,.1); }

/* ---------- Karten: Tozans item-Karten (Bild, Titel, Auszug) im balance-Raster, dazu Badges und Lesezeichen */
.sf-grid.g-loop { gap: calc(var(--grid-gap) / 2) calc(var(--grid-gap) / 3.4); }
.sf-card { position: relative; }
.sf-card .item-excerpt { display: none; } /* seit 1.32.1 kein Auszug auf den Karten */
.sf-card .item-excerpt.was { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: .3em 0 0; max-width: none; opacity: .75; line-height: 1.45; }
.sf-card .sf-title { font-weight: var(--font-weight-bold); line-height: 1.22; margin: 0; } /* nicht .item-title: die Code Injection setzt dafür 2rem !important (Startseiten-Look) */
.sf-card .sf-title a { color: inherit; text-decoration: none; }
.sf-card:hover .sf-title a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.sf-card .item-img { border-radius: var(--radius-small); background: var(--color-two, #F5F3E0); overflow: hidden; }
.sf-card .item-content { display: flex; flex-direction: column; gap: 6px; }
.sf-badges { order: -1; display: flex; flex-wrap: wrap; gap: 6px; margin: .35em 0 0; padding: 0; } /* .35em Luft zum Bild (Andy, 08.09.: Badges klebten am Bild) */
.sf-badges:empty { display: none; }
.sf-badges em { font-style: normal; font-size: var(--font-size-xxxs); line-height: 1.2; letter-spacing: .01em; padding: .25em .7em; border-radius: var(--radius-full); background: rgba(56,3,72,.08); }
/* Bereichs-Badge immer fett, auch hinter »Heute für dich« (1.32.1; vorher :first-child) */
.sf-badges em.sf-b-articles, .sf-badges em.sf-b-lessons, .sf-badges em.sf-b-games, .sf-badges em.sf-b-resources { font-weight: var(--font-weight-bold); }
.sf-badges em.sf-b-articles { background: var(--sf-articles); color: #380348; }
.sf-badges em.sf-b-lessons { background: var(--sf-lessons); color: #380348; }
.sf-badges em.sf-b-games { background: var(--sf-games); color: #380348; }
.sf-badges em.sf-b-resources { background: var(--sf-resources); color: #380348; }
.sf-pin { position: absolute; top: .6rem; right: .6rem; z-index: 2; width: 2.5rem; height: 2.5rem; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: none; border-radius: var(--radius-full); background: rgba(253,252,237,.92); color: #380348; transition: background .15s, color .15s; } /* Violett statt --color-font-one: im Dark Mode war das Icon creme auf creme (Andy, 08.09.) */
.sf-pin svg { width: 1.25rem; height: 1.25rem; display: block; }
.sf-pin[aria-pressed="true"] { background: var(--sf-violet); color: var(--sf-yellow); }
.sf-pin[aria-pressed="true"] svg path { fill: currentColor; }
.sf-pin:hover { background: var(--sf-yellow); color: #380348; }
.sf-pin[aria-pressed="true"]:hover { background: rgba(253,252,237,.92); color: #380348; }
.sf-pin[aria-pressed="true"]:hover svg path { fill: none; }
/* Lesezeichen erst beim Berühren (1.35.0): auf Geräten mit Maus erscheint der Knopf beim Überfahren oder per Tastatur; gemerkte bleiben sichtbar; Touch zeigt ihn immer */
@media (hover: hover) and (pointer: fine) {
  .sf-card .sf-pin { opacity: 0; transition: opacity .15s, background .15s, color .15s; }
  .sf-card:hover .sf-pin, .sf-card:focus-within .sf-pin, .sf-card .sf-pin[aria-pressed="true"] { opacity: 1; }
}
/* Skelett, bis die Daten da sind: Rasterplätze in Kartenform, kein Springen */
.sf-skel .item-img { background: var(--color-two, #F5F3E0); }
.sf-skel-line { display: block; height: .9em; border-radius: var(--radius-small); background: var(--color-two, #F5F3E0); }
.sf-skel-line.short { width: 60%; }
.sf-empty { margin: 0 0 var(--mini-gap); padding: var(--mini-gap); text-align: center; background: var(--color-two, #F5F3E0); border-radius: var(--radius-medium); font-size: var(--font-size-xxs); }
.sf-empty button { font: inherit; font-size: var(--font-size-xxxs); min-height: 2.5rem; margin-left: .6em; padding: .45em 1.2em; cursor: pointer; border: 1.5px solid var(--color-font-one); border-radius: var(--radius-full); background: transparent; color: var(--color-font-one); }
.sf-empty button:hover { background: var(--sf-violet); border-color: var(--sf-violet); color: var(--sf-cream); }
.sf-empty[hidden] { display: none; }
.sf-empty-sub { display: block; margin-top: 12px; font-size: var(--font-size-xxxs); opacity: .8; }
.sf-empty-sub[hidden] { display: none; }
.sf-loading, .sf-failed { margin: 12px 0; font-size: var(--font-size-xxs); opacity: .8; }
.sf-loading[hidden], .sf-failed[hidden] { display: none; }
.sf-failed a { color: var(--color-font-one); text-decoration: underline; text-underline-offset: 3px; }
.sf-more-wrap { text-align: center; margin-top: var(--grid-gap); }
#sf-more { font: inherit; font-family: var(--font-family-subheading); font-size: var(--font-size-xxs); font-weight: var(--font-weight-medium); min-height: 3rem; padding: .55em 1.8em; cursor: pointer; border: 2px solid var(--color-font-one); border-radius: var(--radius-full);
  background: transparent; color: var(--color-font-one); transition: background .15s, color .15s; }
#sf-more:hover { background: var(--sf-violet); border-color: var(--sf-violet); color: var(--sf-cream); }
.sf-toast { position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%); z-index: 90; background: var(--sf-violet); color: var(--sf-cream); font-size: var(--font-size-xxs);
  padding: .8em 1.5em; border-radius: var(--radius-full); box-shadow: 0 6px 24px rgba(56,3,72,.25); max-width: calc(100% - 2rem); text-align: center; }
.sf-toast a { color: var(--sf-yellow); text-decoration: underline; }

/* ---------- Tablet und Handy: Tabs kompakt (zwei Spalten, »Alles« über die Breite, ohne Erklärzeile), Gruppen hinter »Filter zeigen«, Suche bleibt sichtbar, Einstieg eingeklappt */
@media (max-width: 1024px) {
  .sf-intro p { display: none; }
  .sf-intro ul { margin-top: 0; }
  .sf-tools { gap: var(--sf-gap); }
  .sf-layout { grid-template-columns: 1fr; gap: var(--mini-gap); padding-top: var(--sf-gap); }
  .sf-filters { position: static; max-height: none; overflow: visible; gap: var(--sf-gap); }
  .sf-groups { display: none; padding-top: .4rem; }
  .sf-filters.is-open .sf-groups { display: grid; }
  .sf-filter-toggle { display: inline-flex; }
  .sf-chips button { min-height: 2.75rem; padding: .5em 1.1em; }
  .sf-select { min-height: 2.75rem; }
  .sf-result { margin-left: 0; }
  .sf-tools-row { align-items: baseline; }
}
@media (max-width: 620px) {
  .sf-ask { font-size: var(--font-size-m); margin-bottom: 1rem; }
  .sf-switch { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .sf-switch button { min-height: 6rem; padding: .85rem .95rem 1.35rem; border-radius: var(--radius-medium); }
  .sf-switch button:first-child { grid-column: 1 / -1; min-height: 5rem; }
  .sf-sw-main { font-size: var(--font-size-m); }
}

/* ---------- Startseite: Finder ohne Kopf; die Tagesempfehlung ist die erste Karte (seit 1.28.0, vorher eine Zeile) */
.sf-home .sf { padding-top: 0; }
/* Startseite als Einstieg (1.36.0, Fueko-Logik, Andy: »probieren wir es«): die Karten über die ganze Breite, die Filter-Spalte (Suche und Fragen) klappt an jeder Breite hinter »Filter zeigen« wie am Handy.
   Offen erscheint sie links wie auf /games/ und /lessons/ (finder.js setzt .is-filters-open am Abschnitt). Zurück: diesen Block löschen, die Zeile in finder.js beim Toggle und data-finder="true" in index.hbs wieder setzen. */
.sf-home .sf-layout { grid-template-columns: 1fr; gap: var(--mini-gap); padding-top: var(--mini-gap); } /* auch am Handy die volle Luft zwischen Zähler und Karten, weil das Suchfeld dort nicht mehr dazwischen steht */
.sf-home .sf-filters { display: none; }
.sf-home .sf-filters.is-open { display: grid; }
.sf-home .sf-filter-toggle { display: inline-flex; }
@media (min-width: 1025px) {
  .sf-home .sf.is-filters-open .sf-layout { grid-template-columns: 20rem minmax(0, 1fr); gap: 2.5rem; }
}
.sf-card.is-daily .item-img { outline: 3px solid var(--sf-violet); outline-offset: 3px; }
.sf-badges em.sf-b-daily { background: var(--sf-violet); color: var(--sf-cream); font-weight: var(--font-weight-bold); }