/* seo-1111 (11.11.2026, Robin): Startseiten-Styles aus index.html ausgelagert.
   Reihenfolge der frueheren <style>-Bloecke unveraendert; die beiden
   kritischen Mini-Bloecke (gt-warte-gruss, sz-aus) bleiben inline. */

/* mk-anker-2010: „Durchsuche 132 Tools“ passt am Telefon nur etwas kleiner (Feld rund 150px Text); 16px Schrift im Feld bleibt (kein Zoom unter iOS) */
@media (max-width:560px){.search::placeholder{font-size:13px}}

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/inter-800.woff2') format('woff2')}

:root{
  --bg:#07070c; --bg-2:#0b0b14;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.075);
  --border:rgba(255,255,255,.09);
  --border-2:rgba(255,255,255,.17);
  --text:#f4f4f8; --text-soft:#c3c3d2; --text-mute:#9c9cb0; --text-dim:#7d7d92;
  --violet:#a78bfa; --cyan:#22d3ee; --pink:#f472b6; --green:#34d399; --orange:#fb923c; --blue:#60a5fa;
  --r-sm:10px; --r:14px; --r-lg:20px; --pill:999px;
  /* Alles, was vorher als fester Dunkelwert im Regelwerk stand — sonst
     bleibt es im Hellmodus dunkel, egal was --bg sagt. */
  --topbar-bg:rgba(7,7,12,.72);
  --filter-bg:rgba(7,7,12,.94); --filter-bg-0:rgba(7,7,12,0);
  --gitter:rgba(255,255,255,.028);
  --feld-bg:rgba(255,255,255,.05); --feld-bg-fokus:rgba(255,255,255,.075);
  --marke:linear-gradient(112deg,#c4b5fd 0%,#67e8f9 48%,#f9a8d4 100%);
  --hinweis-bg:rgba(14,14,22,.94); --hinweis-fg:#fed7aa;
  --g-gruen:#5d9e7a;   /* die einzige gruene Stelle, wie in gdesign.css */
  --nadel-fest:#ef6b63;   /* Nadel der festen Kachel (nicht loesbar), 04.10.2026 */
  /* Marken, die gauth.js in seinen eigenen Regeln liest (Anmeldefenster,
     Konto- und Verwaltungsdialog). Ohne sie greifen dort die Rueckfallwerte
     aus gdesign — gruenlich getoente Graustufen, die neben dieser Seite
     fremd aussehen. Gesetzt werden genau die vier, die gauth braucht. */
  --accent:var(--g-gruen); --accent-dim:rgba(93,158,122,.13);
  --dialog-bg:#14141f;   /* deckend, siehe Regeln zu .gauth-modal */
  --text-muted:var(--text-mute); --warn:var(--orange);
  --topbar-h:56px;
  /* Eine Hoehe fuer alles, was in der Kopfleiste nebeneinander steht:
     Suchfeld, Rubrikwahl und der Kasten der Marke. Vorher hatte jedes
     Bauteil seine eigene aus Polsterung und Schriftgroesse gerechnete
     Hoehe — 42px beim Feld, 40px bei der Auswahl, 29px beim Zeichen. Das
     sah man an den Kanten. Jetzt steht die Zahl an einer Stelle. */
  --feld-h:42px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  /* ── Glas ──────────────────────────────────────────────────────────
     Drei Marken bauen das Material, und zwar in der Reihenfolge, in der
     echtes Glas gelesen wird:
       --kante   die helle Oberkante — Licht, das sich in der Scheibe
                 bricht. Sie macht aus einer getoenten Flaeche eine
                 Scheibe mit Dicke.
       --glanz   der Streiflicht-Verlauf ueber die Flaeche, von oben
                 links nach unten rechts auslaufend.
       --glas-schatten  zwei Schatten: ein harter, kurzer direkt unter
                 dem Rand (Kontakt) und ein weiter, weicher (Abstand
                 zur Seite). Ein einzelner Schatten sieht flach aus.
     Bewusst KEIN backdrop-filter auf den Karten: Hinter ihnen liegt nur
     der Seitengrund, es gibt also nichts zu verzerren — und 48 eigene
     Weichzeichner-Ebenen sind auf dem Telefon der sicherste Weg zu
     ruckelndem Scrollen. Weichgezeichnet wird nur, was tatsaechlich
     ueber Inhalt liegt: die Kopfleiste. */
  --kante:rgba(255,255,255,.20);
  --kante-weich:rgba(255,255,255,.07);
  --kante-unten:rgba(0,0,0,.22);   /* Dicke: die Scheibe hat auch eine Unterseite */
  --glanz:linear-gradient(155deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 34%,transparent 62%);
  --glas-schatten:0 1px 2px rgba(0,0,0,.32),0 10px 26px -14px rgba(0,0,0,.60);
}
/* ── Hellmodus (folgt dem System, kein Umschalter) ──────────────────────
   Dunkel bleibt der Grundfall, Hell kommt aus der Medienabfrage — dieselbe
   Systematik wie in gdesign.css. Umgestellt wird ausschliesslich über die
   Marken oben; keine Regel weiter unten kennt einen Modus.
   Zwei Werte sind mehr als eine Umkehrung:
   - Der Farbverlauf. Die Pastelltoene tragen auf Schwarz, auf Papierweiss
     sind sie kaum zu lesen (#c4b5fd auf #f6f6f9 ergibt 1,8:1). Hell nimmt
     deshalb die gesaettigten Fassungen derselben Farben.
   - Die Flaechen. Im Dunkeln sind es weisse Schleier, hell muessen es
     dunkle sein, sonst verschwinden Karten und Kacheln im Grund.
   Der Grund ist bewusst nicht #fff: die grossen Farbschleier hinter dem
   Inhalt (.bg) brauchen einen Ton, an dem sie sich brechen koennen. */
@media(prefers-color-scheme:light){
  :root{
    --bg:#f6f6f9; --bg-2:#eeeef4;
    --surface:rgba(16,16,32,.035);
    --surface-2:rgba(16,16,32,.062);
    --border:rgba(16,16,32,.10);
    --border-2:rgba(16,16,32,.17);
    --text:#14141c; --text-soft:#3a3a4a; --text-mute:#5b5b6d; --text-dim:#76768a;
    --topbar-bg:rgba(246,246,249,.78);
    --filter-bg:rgba(246,246,249,.94); --filter-bg-0:rgba(246,246,249,0);
    --gitter:rgba(16,16,32,.05);
    --feld-bg:rgba(255,255,255,.8); --feld-bg-fokus:#fff;
    --marke:linear-gradient(112deg,#7c3aed 0%,#0891b2 48%,#db2777 100%);
    --hinweis-bg:rgba(255,255,255,.95); --hinweis-fg:#9a3412;
    --g-gruen:#2e7a50;
    --nadel-fest:#c4352c;
    --accent-dim:rgba(46,122,80,.12);
    --dialog-bg:#fff;
    --warn:#a06e14;
    --shadow:0 14px 40px rgba(20,20,45,.12);
    /* Im Hellen kommt das Licht von derselben Seite, traegt aber auf
       Papierweiss nur als deutlich hellere Kante — und der Schatten muss
       weicher und kaelter sein, sonst wirkt er wie Schmutz. */
    --kante:rgba(255,255,255,.9);
    --kante-weich:rgba(255,255,255,.6);
    --kante-unten:rgba(20,20,45,.06);
    --glanz:linear-gradient(155deg,rgba(255,255,255,.85),rgba(255,255,255,.3) 34%,transparent 62%);
    --glas-schatten:0 1px 2px rgba(20,20,45,.05),0 10px 26px -14px rgba(20,20,45,.20);
  }
  /* Die Bauteil-Regeln zu diesem Modus stehen NICHT hier, sondern am Ende
     des Stylesheets. Grund: Sie haben dieselbe Spezifitaet wie die
     Grundregeln weiter unten, und bei Gleichstand gewinnt die spaetere —
     hier oben wuerden sie von .bg::before, .tag-intern und .brand-mark
     ueberstimmt. Marken sind davon nicht betroffen, die werden erst beim
     Auslesen aufgeloest. */
}

/* ── Was gauth.js selbst in die Seite haengt ────────────────────────────
   gauth baut sich eine eigene Leiste oben rechts (#gauth-bar) samt
   Platzhalter darunter und, fuer nicht angemeldete Besucher, ein
   Hinweisband ueber dem Inhalt. Beides ist hier doppelt: Oben rechts
   steht schon der Knopf dieser Kopfzeile, und ein Band in Warnfarbe
   ueber der Ueberschrift waere die erste Farbflaeche der Seite — fuer
   einen Hinweis, der auf einer Startseite ohne Eingaben nichts sichert.
   Verborgen, nicht entfernt: die Knoepfe in der Leiste sind der Weg zum
   Anmeldefenster (siehe authBtn im Skript), sie muessen im Dokument
   bleiben. Dialoge und Anmeldefenster von gauth sind ausdruecklich NICHT
   betroffen. */
#gauth-bar,#gauth-bar-space,#gauth-hinweis{display:none!important}

/* Die Gestaltung der gauth-Dialoge (Anmelden, Konto, Verwaltung) steht seit
   30.09.2026 zentral in /libs/gauth.js und ist auf allen Seiten gleich.
   Hier bewusst keine eigenen Regeln mehr dafuer. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.5;
  min-height:100vh;-webkit-font-smoothing:antialiased;
  font-size:15px;
}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:0;top:0;padding:10px 16px;background:var(--cyan);color:#04121a;
  font-weight:700;border-radius:0 0 var(--r-sm) 0;z-index:300;transform:translateY(-140%)}
.skip:focus{transform:none}

/* ── Hintergrund: zwei weiche Lichtfelder + feines Raster. Fixiert, damit beim
      Scrollen durch 48 Karten nichts flimmert. ───────────────────────────── */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg::before,.bg::after{content:"";position:absolute}
/* Weiche Kanten kommen aus den Farbstopps, nicht aus filter:blur(). Der
   Weichzeichner lag auf zwei fixierten Flaechen von 640 bzw. 520px — zwei
   grosse Ebenen, die der Browser bei jedem Scrollbild vorhalten muss. Ein
   Radialverlauf mit mehreren Stopps sieht gleich aus und kostet nichts. */
.bg::before{width:820px;height:820px;top:-28%;left:-18%;
  background:radial-gradient(circle closest-side,
    rgba(124,58,237,.42) 0%,rgba(124,58,237,.26) 34%,
    rgba(124,58,237,.10) 62%,transparent 100%)}
.bg::after{width:680px;height:680px;top:-10%;right:-20%;
  background:radial-gradient(circle closest-side,
    rgba(6,182,212,.30) 0%,rgba(6,182,212,.17) 36%,
    rgba(6,182,212,.06) 64%,transparent 100%)}
.grid-lines{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--gitter) 1px,transparent 1px),
                   linear-gradient(90deg,var(--gitter) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,#000 0,transparent 70%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,transparent 70%)}
.wrap{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:0 24px}

/* ── Kopf: NUR Marke, Zähler und Anmelde-Schalter. Die Rubriken stehen
      ausschliesslich in der Filterleiste (eine Navigationsebene). ────────── */
/* topbar und nicht head: gauth baut seinen Dialogen eine Kopfzeile mit
   genau dieser Klasse (.gauth-modal .head). Bei „head“ griffen die Regeln
   hier mit — der Konto-Dialog bekam die Hoehe der Seitenleiste (124px am
   Telefon) und einen leeren Block ueber den Knoepfen. Klassennamen sind
   auf dieser Seite global, also traegt der eigene Kopf einen eigenen. */
/* Die Leiste ist die einzige Flaeche, die ueber Inhalt liegt — nur hier
   ist ein Weichzeichner mehr als Zierde. Statt der 1px-Linie unten ein
   weicher Auslauf (siehe ::after): Eine harte Trennlinie zerschneidet das
   Bild, ein Auslauf laesst den Inhalt unter der Scheibe verschwinden.
   Die helle Oberkante gibt der Scheibe Dicke, der Schatten Abstand. */
.topbar{position:sticky;top:0;z-index:90;min-height:var(--topbar-h);
  background:var(--topbar-bg);backdrop-filter:blur(22px) saturate(1.8);
  -webkit-backdrop-filter:blur(22px) saturate(1.8);
  box-shadow:inset 0 1px 0 var(--kante),0 1px 0 var(--kante-weich),
             0 12px 28px -20px rgba(0,0,0,.7)}
.topbar::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px;
  pointer-events:none;background:linear-gradient(to bottom,var(--topbar-bg),transparent)}
/* Drei Spalten statt einer Reihe: links die Marke, in der Mitte die
   Bedienfelder, rechts die Anmeldung. Der Trick sind die beiden gleich
   grossen 1fr-Spalten aussen — dadurch liegt die Mittelspalte exakt in der
   Bildmitte, egal wie breit ihre Nachbarn sind. Mit einer Flex-Reihe war
   die Mitte immer nur „der Rest": Sobald der Knopf rechts von „Anmelden"
   auf einen kurzen Vornamen wechselte, wanderte sie mit.
   min-width:0 an den Aussenspalten, damit ein langer Name die Mitte nicht
   aus der Spur druecken kann. */
.topbar-in{max-width:1240px;margin:0 auto;padding:0 24px;min-height:var(--topbar-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px}
.topbar-in > *{min-width:0}
.topbar-mitte{display:flex;align-items:center;gap:10px;
  width:min(700px,44vw);min-width:0}
.switch{justify-self:end}
/* Halbe Desktop-Breite (701-1100px): Bei 1fr auto 1fr blieb fuer die Mitte
   nur min(700px,44vw) - bei 740px rund 320px fuer Rubrik und Suche, der
   Platzhalter wurde abgeschnitten. Hier bekommt die Mitte den ganzen
   Restplatz; ueber 1100px bleibt der Kopf zentriert, mobil unveraendert. */
@media(max-width:1100px) and (min-width:701px){
  .topbar-in{grid-template-columns:auto minmax(0,1fr) auto}
  .topbar-mitte{width:auto;max-width:700px;margin:0}
}
/* ── Suchfeld in der Kopfleiste (statt in der Filterzeile) ───────────────
   Das Feld ist die haeufigste Handlung der Seite und steht jetzt dort, wo
   es beim Scrollen ohnehin immer sichtbar bleibt: in der klebenden Leiste.
   Es nimmt den Raum zwischen Marke und rechter Gruppe ein und ist nach oben
   begrenzt — ueber etwa 560px wirkt ein Suchfeld wie ein Adressfeld und
   zieht mehr Aufmerksamkeit als der Inhalt darunter.
   Flacher und runder als vorher: in einer 56px hohen Leiste braucht es die
   volle Feldhoehe nicht, und die Pillenform nimmt die Form der Rubrik-Chips
   darunter auf. */
.topbar .search-wrap{flex:1 1 140px;min-width:0;max-width:none}
.topbar .search{height:var(--feld-h);padding:0 38px;font-size:.92rem;border-radius:var(--pill)}
.topbar .search-ico{left:13px}
.topbar .search-ico svg{width:16px;height:16px}
.topbar .search-clear{right:5px;padding:6px}

/* ── Rubrikwahl in der Leiste ───────────────────────────────────────────
   Dieselbe Pillenform wie das Suchfeld daneben, damit die beiden als ein
   Bedienfeld gelesen werden: hier einschraenken, dort suchen.
   appearance:none, weil das Systemfeld sonst seinen eigenen Rahmen und
   seinen eigenen Pfeil mitbringt — beides passt nicht zur Leiste. Der
   Pfeil daneben ist deshalb selbst gezeichnet und liegt ueber dem Feld
   (pointer-events:none), damit ein Klick darauf trotzdem die Liste
   oeffnet.
   Die Liste selbst zeichnet das Betriebssystem; ueber color-scheme folgt
   sie dem Modus, ohne dass hier etwas zu setzen ist. */
.kat-wrap{position:relative;flex-shrink:0}
.kat{appearance:none;-webkit-appearance:none;
  height:var(--feld-h);padding:0 32px 0 14px;border-radius:var(--pill);
  border:1px solid var(--border-2);background:var(--feld-bg);color:var(--text-soft);
  box-shadow:inset 0 1px 0 var(--kante-weich);
  font:inherit;font-size:.9rem;font-weight:550;cursor:pointer;outline:none;
  transition:border-color .2s,background .2s,color .2s}
.kat:hover{color:var(--text);border-color:var(--border-2);background:var(--feld-bg-fokus)}
.kat:focus-visible{border-color:rgba(167,139,250,.6);box-shadow:0 0 0 4px rgba(167,139,250,.13)}
.kat-pfeil{position:absolute;right:11px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;pointer-events:none;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  color:var(--text-dim)}
.brand-block{display:flex;flex-direction:column;min-width:0}
/* gap:0 — Zeichen und Wort gehoeren zusammen und werden als ein Name
   gelesen. Der Kasten des Zeichens bringt rechts von den Balken schon Luft
   mit, ein zusaetzlicher Abstand reisst beides auseinander.
   Eine Stufe groesser als vorher (1,02rem): Die Marke steht in der Leiste
   allein links und darf der Anker der Seite sein. */
/* Hoehe aus --feld-h, damit die Marke oben und unten mit dem Suchfeld
   daneben abschliesst. line-height:1, weil die Zeilenhoehe sonst ihre
   eigene Hoehe mitbringt und das Wort aus der Mitte schiebt. */
.brand{display:flex;align-items:center;gap:0;text-decoration:none;color:var(--text);
  height:var(--feld-h);
  font-weight:700;font-size:1.72rem;line-height:1;letter-spacing:-.025em}
/* ── Die Marke ──────────────────────────────────────────────────────────
   Bis v1.3 stand hier eine Kachel mit Farbverlauf und einem gesetzten "G"
   darin — ein Platzhalter. Jetzt steht das echte Zeichen: nachgezeichnet
   aus favicon.png, Bildpunkt fuer Bildpunkt abgemessen. Die Marke sitzt
   dort im Feld 180x180 zwischen 33 und 146, die Strichbreite ist 22, die
   Oeffnung rechts liegt zwischen y=63 und y=85, der Querbalken zwischen
   y=85 und y=105 und beginnt bei x=84. Nachgerechnet: von 8428 gesetzten
   Bildpunkten der Vorlage weichen 4 ab, und das sind die abgerundeten
   Ecken.
   Sechs Rechtecke in einem Pfad statt eines Umrisses: Die Form ist eine
   Vereinigung aus Balken, und als solche bleibt sie lesbar und
   nachrechenbar. fill kommt von currentColor, die Farbe von --g-gruen —
   dem einzigen Gruen der gTools, wie in gdesign.css.
   Kein Kasten mehr darum: Das Zeichen ist selbst schon geschlossen. */
/* Kasten um das Zeichen: Er trennt die Marke vom Wort, nachdem der Abstand
   dazwischen auf 0 steht — dieselbe Fassung wie auf der bisherigen
   Startseite. Die Polsterung liegt innen, damit die Balken den Rahmen nicht
   beruehren. */
/* Das Zeichen ist so hoch wie das Suchfeld — es ist die obere und untere
   Kante der Marke. Die Polsterung bleibt in em: Sie haelt die Balken vom
   Rahmen weg und folgt damit der Schrift, nicht der Kastenhoehe. */
.brand-mark{width:var(--feld-h);height:var(--feld-h);flex-shrink:0;
  padding:.28em;box-sizing:border-box;
  border:1px solid var(--border-2);border-radius:9px}
/* Fuellung und Rand stehen im SVG selbst, nicht hier (13.09.2026):
   dunkles Zeichen mit duennem weissem Rand, in beiden Systemmodi
   gleich. Vorher lief die Fuellung ueber currentColor und --g-gruen und
   kippte damit mit dem Modus; das Zeichen war im Dunkelmodus hell, im
   Hellmodus dunkel. Jetzt ist es eines. */
.topbar-spacer{flex:1}
/* Der Zaehler stand bis v1.3 als eigene Angabe neben dem Suchfeld. Zwei
   Elemente fuer eine Aussage: das Feld fragt "welches Tool?", der Zaehler
   sagt "es sind 38" — zusammen gelesen ergibt das den Satz, den der
   Platzhalter jetzt allein traegt ("37 Tools durchsuchen"). Nebenbei war
   der Platzhalter in der schmaleren Leiste ohnehin abgeschnitten
   ("Tool suchen — z. B."), weil er Beispiele nannte, die der Zaehler nicht
   brauchte.
   Am Schirm also weg — auf Papier bleibt er: dort ist das Feld ausgeblendet
   (.search-wrap im Druckteil), und die Kopfzeile des Ausdrucks soll die
   Anzahl weiter nennen. Der Druckteil setzt ihn deshalb auf display:inline
   zurueck. */
.topbar-count{display:none;font-size:.78rem;color:var(--text-mute);white-space:nowrap}
.switch{display:inline-flex;align-items:center;gap:9px;padding:7px 13px 7px 11px;border-radius:var(--pill);
  box-shadow:inset 0 1px 0 var(--kante-weich);
  background:var(--surface);border:1px solid var(--border-2);color:var(--text-soft);
  font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .2s,border-color .2s,color .2s}
.switch:hover{background:var(--surface-2);color:var(--text)}
.switch .led{width:8px;height:8px;border-radius:50%;background:var(--text-dim);transition:background .2s,box-shadow .2s}
/* Angemeldet: Der Knopf bleibt neutral, nur der Punkt wechselt die Farbe.
   Vorher trug der ganze Knopf das Gruen — Rahmen, Flaeche und Schrift in
   #a7f3d0 auf gruen getoentem Grund. Das war die lauteste Stelle der
   Seite fuer die nebensaechlichste Aussage („du bist angemeldet"), und im
   Hellmodus stand hellmintgruene Schrift auf hellem Grund: gemessen 2,2:1,
   also unter jeder Lesbarkeitsschwelle.
   Der Punkt allein sagt es genauso — dieselbe Sprache wie ein Statuspunkt
   in einer Werkzeugleiste — und der Name daneben bleibt in der normalen
   Textfarbe lesbar. Kein Leuchten mehr: Ein Schein um einen 8px-Punkt ist
   auf dem Telefon ein gruener Fleck. */
.switch[aria-pressed="true"]{color:var(--text)}
.switch[aria-pressed="true"] .led{background:var(--g-gruen)}

/* ── Auftakt ───────────────────────────────────────────────────────────── */
/* Hero kompakter (v1.3): Der Mittelteil stand vorher mit 36px Vorlauf und
   3,15rem Ueberschrift so hoch, dass auf einem 13-Zoll-Schirm von der
   Tool-Liste nur noch die erste Kachelreihe zu sehen war. Die Reihenfolge
   der Zeilen bleibt, nur Luft und Grad sind zurueckgenommen — die
   Ueberschrift traegt weiter, weil der Verlauf sie ohnehin heraushebt. */
/* Unten ohne Polster, dazu 4px zurueck: Was unter dem Vorspann folgt, ist
   die erste Rubrik-Ueberschrift. Der Kastenabstand ist schon 0 — was noch
   dazwischen stand, war die Luft, die die Zeilenhoehen ueber und unter den
   Buchstaben freilassen. Die Zeilenhoehen sind gekuerzt (siehe .lead und
   .sec-head h2), die letzten 4px holt dieser negative Abstand.
   Weiter geht es nicht: Dann stossen die Unterlaengen des Vorspanns
   („Werkzeuge") in die Oberkante von „Lohn". */
.hero{padding:26px 0 0;margin-bottom:-4px;text-align:center}
/* Eine Zeile, auf jeder Breite (v1.3).
   nowrap erzwingt sie, der Grad muss dann mitgehen — sonst laeuft die Zeile
   aus dem Fenster. Ausgemessen mit der echten Schrift und dem echten
   Tracking: Der Satz braucht je Pixel Schriftgrad rund 19,1px Breite, die
   groesste einzeilige Groesse ist also etwa 0,0487 x Fensterbreite
   (nachgerechnet: 15,5px bei 320, 17,5 bei 360, 19 bei 390, 21 bei 430).
   Ab 561px greift der clamp unten, dort ist Luft genug — bei 768px waeren
   37px moeglich, gesetzt sind 24.
   Der Preis steht im Bericht: Am Telefon ist die Ueberschrift damit
   19px bzw. 15px gross und liegt naeher am Fliesstext (14,9px), als es
   eine Ueberschrift sonst tun sollte. Das war die Entscheidung fuer die
   eine Zeile. */
.hero .hero-h1{margin:6px 0 7px;font-size:clamp(1.5rem,3.1vw,2.15rem);font-weight:800;
  letter-spacing:-.035em;line-height:1.1;white-space:nowrap}
.hero .hero-h1 .grad{background:var(--marke);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* Kachelname "G-Tools Kanzlei.": das Wort nach "G-Tools" im Verlauf wie in der Ueberschrift (05.10.2026) */
.card-title .grad{background:var(--marke);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* Zeilenhoehe 1,3 statt der 1,5 vom Koerper: Der Vorspann ist eine Zeile,
   die Zeilenhoehe wird dort nicht zum Lesen gebraucht, sondern liegt nur
   als Luft ueber und unter den Buchstaben — und genau die stand zwischen
   ihm und der ersten Ueberschrift. Bei zwei Zeilen (unter 390px) bleibt
   1,3 lesbar. */
.hero p.lead{font-size:.93rem;line-height:1.3;color:var(--text-mute);max-width:520px;margin:0 auto}



/* ── Filterleiste: Suche + Rubriken, klebt unter dem Kopf ───────────────── */
/* Die Rubrik-Kacheln scrollen seit v1.3 mit dem Inhalt (vorher klebten sie
   unter der Kopfleiste). Zusammen belegten Leiste und Filterzeile beim
   Scrollen rund 110px Hoehe — auf einem 13-Zoll-Schirm ein Sechstel der
   Ansicht, dauerhaft, fuer eine Auswahl, die man einmal trifft. Klebend
   bleibt allein die Kopfleiste mit dem Suchfeld; das ist die Handlung, die
   man auch mitten in der Liste noch braucht.
   Damit entfallen auch Verlauf und Weichzeichner: Beides gab es nur, damit
   die durchlaufenden Karten unter der Zeile nicht hart abgeschnitten
   wirkten. */
/* Ohne sichtbare Statuszeile traegt die Zeile nichts mehr — sie bleibt
   nur als Platz fuer den Fall, dass die Meldung erscheint. */
.filters{padding:0}
.filters-in{max-width:1240px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;gap:7px}
.search-row{display:flex;gap:10px;align-items:stretch}
.search-wrap{position:relative;flex:1;min-width:0}
.search{width:100%;padding:13px 44px 13px 44px;border-radius:var(--r);
  border:1px solid var(--border-2);background:var(--feld-bg);color:var(--text);
  box-shadow:inset 0 1px 0 var(--kante-weich);
  font:inherit;font-size:1rem;outline:none;
  transition:border-color .22s,box-shadow .22s,background .22s}
.search::placeholder{color:var(--text-dim)}
.search:focus{border-color:rgba(167,139,250,.6);background:var(--feld-bg-fokus);
  box-shadow:inset 0 1px 0 var(--kante-weich),0 0 0 4px rgba(167,139,250,.13)}
.search-ico{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--text-mute);pointer-events:none}
.search-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:none;
  padding:7px;border:0;border-radius:var(--pill);background:transparent;color:var(--text-mute);cursor:pointer}
.search-clear svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.search-clear:hover{color:var(--text);background:var(--surface-2)}
.search-wrap.has-text .search-clear{display:block}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:var(--pill);
  border:1px solid var(--border);background:var(--surface);color:var(--text-soft);
  font:inherit;font-size:.8rem;font-weight:550;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s,transform .18s}
.chip:hover{background:var(--surface-2);color:var(--text);border-color:var(--border-2);transform:translateY(-1px)}
.chip b{font-weight:600;font-size:.72rem;color:var(--text-dim);font-variant-numeric:tabular-nums}
/* .chip traegt jetzt nur noch der Knopf "Filter zuruecksetzen" im
   Leerzustand — die Rubrikzeile ist einem Auswahlfeld gewichen. Die
   Zustandsregeln bleiben stehen, weil sie nichts kosten und der Knopf
   sonst seinen Fokusring verlieren wuerde. */
.chip[aria-pressed="true"]{background:linear-gradient(135deg,#c4b5fd,#67e8f9);border-color:transparent;
  color:#08080f;font-weight:700}
.chip[aria-pressed="true"] b{color:rgba(8,8,15,.62)}
.chip-intern[aria-pressed="true"]{background:linear-gradient(135deg,#93c5fd,#a5f3fc)}
/* Die Statuszeile stand dauerhaft da und nannte im Ruhezustand dieselbe
   Zahl wie der Platzhalter im Suchfeld daneben ("37 Tools") — eine Zeile
   Hoehe fuer eine Wiederholung, und am Telefon war sie ein Teil des
   leeren Bandes ueber der ersten Rubrik.
   Jetzt erscheint sie erst, wenn gesucht oder eingeschraenkt wird, also
   sobald die Zahl eine Antwort ist und keine Feststellung. Verborgen wird
   sie ueber clip-path und nicht ueber display:none: Als aria-live-Bereich
   muss sie im Baum bleiben, sonst meldet sie Vorleseprogrammen nichts. */
.status{font-size:.78rem;color:var(--text-dim);
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.status.aktiv{position:static;width:auto;height:auto;clip-path:none;min-height:1.2em}

/* ── Rubriken und Karten ───────────────────────────────────────────────── */
main{padding-bottom:8px}
/* Fuss unten halten (07.10.2026, Robin): Bei wenig Inhalt (Rubriken
   zugeklappt) steht der Fuss am unteren Bildschirmrand, die Luft sitzt
   zwischen Rubriken und Fuss. Bei viel Inhalt folgt er wie bisher dem
   Inhalt. 100dvh (sichtbare Hoehe am Handy), 100vh als Rueckfall. Nur
   Bildschirm, der Druck bleibt unberuehrt. */
@media screen{
  body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
  body>main{flex:1 0 auto}
  body>.foot{flex-shrink:0}
}
/* Sprungziel der Kacheln: nur noch die Kopfleiste plus etwas Luft — die
   Filterzeile klebt nicht mehr darueber. */
/* --kleb-h setzt das Skript auf Mobil: die Hoehe, die von der Kopfleiste
   beim Scrollen tatsaechlich stehen bleibt (siehe kopfKleben). Ohne die
   Marke ist sie nur etwa halb so hoch wie die Leiste. */
/* Kein Polster oben mehr. Zwischen dem Vorspann und der ersten
   Ueberschrift bleibt nur, was die Zeilenhoehen beider Zeilen ohnehin
   ueber und unter den Buchstaben freilassen — gemessen 0px Kastenabstand,
   sichtbar rund eine halbe Zeile. Weiter zusammen geht nur noch mit einem
   negativen Abstand, und der wuerde die Unterlaengen des Vorspanns in die
   Ueberschrift schieben. */
.toolsec{padding:0 0 4px;scroll-margin-top:calc(var(--kleb-h,var(--topbar-h)) + 18px)}
/* Luft UEBER einer Zwischenueberschrift (17.09.2026). Vorher standen dort
   nur 4px, waehrend unter der Ueberschrift 28px folgen (12px Polster +
   16px Abstand) — die Ueberschrift klebte damit am vorigen Abschnitt,
   statt ihren eigenen einzuleiten. Eine Ueberschrift gehoert naeher an
   das, was sie ankuendigt, als an das, was vor ihr steht.
   Nur zwischen zwei Abschnitten, damit der erste nicht vom Kopf abrutscht.
   clamp, damit es am Telefon nicht zu viel Hoehe frisst. */
.toolsec + .toolsec{margin-top:clamp(30px,3.2vw,36px)}
/* Aufbau seit v1.3: zwei Zeilen statt einer.
   Vorher standen Titel, Unterzeile und Zaehler in einer Flex-Zeile, und die
   Unterzeile bekam den Rest — bei schmalerem Fenster wurde sie mit einer
   Ellipse abgeschnitten ("Einkommensteuer, USt, Fristen, Referen…"). Eine
   Erklaerung, die man nicht zu Ende lesen kann, ist keine.
   Jetzt gehoert der Zaehler zum Titel (er zaehlt, was unter dieser
   Ueberschrift liegt) und die Unterzeile steht als eigene Zeile darunter,
   wo sie umbrechen darf. */
/* Auslaufende Linie statt durchgezogener Kante: Sie beginnt unter der
   Ueberschrift und verliert sich nach rechts — dieselbe Idee wie die
   weiche Unterkante der Leiste. Als Hintergrundbild und nicht als border,
   weil ein Rahmen keinen Verlauf tragen kann. */
.sec-head{padding-bottom:12px;margin-bottom:16px;
  background:linear-gradient(90deg,var(--border-2) 0%,var(--border) 45%,transparent 100%)
    bottom left/100% 1px no-repeat}
.sec-head h2{display:flex;align-items:center;gap:9px;
  font-size:1.06rem;line-height:1.1;font-weight:700;letter-spacing:-.01em}
.sec-sub{margin-top:3px;font-size:.8rem;color:var(--text-dim);line-height:1.4}
/* Intern-Ueberschrift seit 30.09.2026 wie alle anderen Rubriken (vorher
   hellblau #bfdbfe, im hellen Modus kaum lesbar). */
.sec-note{margin:-6px 0 16px;padding:11px 14px;border-radius:var(--r-sm);font-size:.78rem;line-height:1.5;
  color:#cfe2fb;background:rgba(96,165,250,.09);border:1px solid rgba(96,165,250,.25)}
.sec-note code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.94em;color:#e0f2fe}

.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
/* Aufbau seit v1.3: Flex-Spalte statt Raster.
   Im Raster lagen Kopf und Marken in festen Zeilen; sobald eine
   Beschreibung zweizeilig war und die daneben einzeilig, standen die Marken
   der beiden Karten auf verschiedenen Hoehen — in einer Reihe aus vier
   Karten ergab das eine unruhige Kante.
   Jetzt haelt height:100% die Karte auf Reihenhoehe, .card-body nimmt Kopf
   und Text, und .card-meta wird mit margin-top:auto an die Unterkante
   gedrueckt. Damit liegen alle Marken einer Reihe auf einer Linie, egal wie
   lang die Beschreibung ist. */
.card{position:relative;display:flex;flex-direction:column;justify-content:space-between;
  height:100%;gap:10px;padding:14px 15px;border-radius:18px;
  background-color:var(--surface);background-image:var(--glanz);
  border:1px solid var(--border);text-decoration:none;color:inherit;overflow:hidden;
  box-shadow:inset 0 1px 0 var(--kante-weich),inset 0 -1px 0 var(--kante-unten),
             var(--glas-schatten);
  transition:transform .2s ease,background-color .2s,border-color .2s,box-shadow .2s}
.card-body{position:relative;z-index:1;display:flex;align-items:flex-start;gap:12px;min-width:0}
.card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .25s;
  background:linear-gradient(135deg,rgba(167,139,250,.09),transparent 55%,rgba(34,211,238,.06))}
/* Beim Ueberfahren hebt die Karte an — dann muss die Kante heller werden
   und der weite Schatten tiefer, sonst steigt sie ohne Licht. */
.card:hover,.card:focus-visible{transform:translateY(-3px);background-color:var(--surface-2);
  border-color:var(--border-2);
  box-shadow:inset 0 1px 0 var(--kante),inset 0 -1px 0 var(--kante-unten),
             0 2px 4px rgba(0,0,0,.28),var(--shadow)}
.card:hover::before{opacity:1}
.card-icon{flex-shrink:0;width:38px;height:38px;border-radius:13px;display:grid;
  place-items:center;font-size:1.15rem;
  background-color:var(--surface-2);background-image:var(--glanz);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 var(--kante-weich),inset 0 -1px 0 var(--kante-unten);
  position:relative;z-index:1;transition:transform .2s}
.card:hover .card-icon{transform:scale(1.07)}
/* Die sechs Farbtoenungen hinter den Emojis sind entfallen. Die Emojis
   bringen ihre eigenen Farben mit; eine zweite, andersfarbige Flaeche
   darunter ergab bei 47 Karten einen Flickenteppich, und bei einigen
   Kombinationen (gruene Kachel unter gruenem Schein) verlor das Zeichen
   seine Kante. Alle Kacheln tragen jetzt dieselbe ruhige Flaeche aus
   --surface-2 mit feinem Rand; die Farbe kommt vom Zeichen. */
.card-text{position:relative;z-index:1;min-width:0}
.card-title{display:block;font-size:.9rem;font-weight:650;letter-spacing:-.012em;line-height:1.25}
/* Kopfzeile der Kachel (02.10.2026, nach Vorbild MK-Uebersicht): Titel und
   Etiketten in einer Zeile statt eigener Etikettenzeile unten. Passt ein
   Etikett nicht mehr in die Zeile, rutscht es in eine unsichtbare zweite
   Zeile — halb gezeigt wird keins. Der Titel wird nie gekuerzt. Rechts
   16px frei fuer Pin und Pfeil. */
.card-kopf{display:flex;align-items:center;gap:8px;min-width:0;padding-right:16px}
.card-kopf .card-title{flex:0 0 auto;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-kopf .card-meta{flex:1 1 0;min-width:0;margin:0;padding:0;flex-wrap:wrap;height:20px;overflow:hidden;align-content:flex-start;align-items:center}
/* Ein einzelnes zu breites Etikett bliebe sonst als erstes Element in der
   ersten Zeile und wuerde abgeschnitten. Das unsichtbare Element davor
   (Breite 0, gap ausgeglichen) macht es zum zweiten — es rutscht dann
   wie die anderen in die verborgene zweite Zeile. */
.card-kopf .card-meta::before{content:"";width:0;height:20px;margin-right:-5px}
.card-kopf .tag{flex:0 0 auto}
/* Beschreibung hoechstens eine Zeile, danach "…" — in allen Rubriken, am
   Rechner wie am Handy (Robin, 03.10.2026). Der volle Text steht im
   Quelltext, in der Suche und als Tooltip (title, per Skript gesetzt). */
.card-desc{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
  margin-top:3px;font-size:.775rem;color:var(--text-mute);line-height:1.42}
/* Einzeilige Beschreibungen in allen Tool-Rubriken (25.10.2026). */
@media screen{.card-desc{line-height:1.42;min-height:1.42em}}
.card-meta{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:5px;
  margin-top:auto;padding-left:50px}   /* 38px Kachel + 12px Abstand */
.tag{font-size:.66rem;font-weight:600;padding:2px 8px;border-radius:var(--pill);
  background:var(--surface-2);color:var(--text-mute);white-space:nowrap;
  box-shadow:inset 0 1px 0 var(--kante-weich)}
.tag-beta{background:rgba(251,146,60,.17);color:#fed7aa}
.tag-intern{background:rgba(96,165,250,.18);color:#dbeafe}
/* Spielesammlung (08.10.2026): offene Einladungen als rote Zahl am Symbol,
   wie frueher auf /mk/. Nur am Schirm. */
.card .card-icon .sp-zahl{position:absolute;top:-7px;right:-7px;z-index:2;min-width:20px;height:20px;
  padding:0 6px;box-sizing:border-box;border-radius:999px;background:#e5484d;color:#fff;
  font:700 12px/20px var(--font);text-align:center;box-shadow:0 0 0 2px var(--bg);pointer-events:none}
@media print{.card .card-icon .sp-zahl{display:none}}
/* Rubrik Spiele (08.10.2026): die Zahl offener Einladungen steht an der
   Ueberschrift, nicht mehr am Symbol einer einzelnen Kachel. */
.sec-head h2 .sp-zahl{display:inline-block;vertical-align:3px;margin-left:8px;min-width:20px;height:20px;
  padding:0 6px;box-sizing:border-box;border-radius:999px;background:#e5484d;color:#fff;
  font:700 12px/20px var(--font);text-align:center;letter-spacing:0}
@media print{.sec-head h2 .sp-zahl{display:none}}
.card-go{position:absolute;top:13px;right:13px;width:13px;height:13px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--text-dim);
  opacity:0;transform:translate(-3px,3px);transition:opacity .2s,transform .2s,color .2s}
.card:hover .card-go,.card:focus-visible .card-go{opacity:1;transform:none;color:var(--violet)}


/* Leere Rubriken und Leermeldung */
.toolsec.is-empty{display:none}
[hidden]{display:none!important}
.empty{display:none;padding:56px 20px;text-align:center;border:1px dashed var(--border-2);
  border-radius:var(--r-lg);background:var(--surface)}
.empty.on{display:block}
.empty strong{display:block;font-size:1rem;margin-bottom:6px}
.empty p{color:var(--text-mute);font-size:.86rem}
.empty button{margin-top:14px}
.locked{padding:18px;border-radius:var(--r);text-align:center;font-size:.82rem;color:var(--text-mute);
  background:var(--surface);border:1px dashed var(--border-2)}


/* ── Umbrüche ──────────────────────────────────────────────────────────── */
@media(max-width:1080px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:820px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{padding:20px 0 0}
}
/* Ab hier reicht die Zeile fuer Marke, Feld und Knopf nicht mehr: das Feld
   rutscht in eine zweite Zeile unter die Marke. Die Leiste wird dadurch
   hoeher, und weil die Filterzeile mit top:var(--topbar-h) darunter klebt,
   wird die Marke gleich mit hochgesetzt — sonst schoebe sich die eine unter
   die andere. */
/* ── Kopf am Telefon ───────────────────────────────────────────────────
   Angeordnet wie auf der bisherigen Startseite, weil sich die Reihenfolge
   dort bewaehrt hat: erst wer die Seite ist, dann wer man selbst ist, dann
   die Suche.

     Zeile 1   Marke links, Anmeldung rechts
     Zeile 2   "created by Robin Glowania" unter der Marke
     Linie     die Unterkante der Leiste
     Zeile 3   Suchfeld ueber die ganze Breite

   Die Unterzeile ist ab 820px ausgeblendet — sie waere neben der schmalen
   Marke Beiwerk. Am Telefon ist der Kopf dagegen der einzige Ort, an dem
   die Seite sich vorstellt, deshalb kommt sie hier zurueck.
   align-items:flex-start statt center: Die Marke ist jetzt zweizeilig, der
   Anmelde-Knopf einzeilig — mittig gestellt saesse er auf halber Hoehe
   zwischen Name und Unterzeile statt auf einer Linie mit dem Namen.
   Die Marke traegt eine Stufe mehr Groesse als am Rechner: dort steht sie
   neben Feld und Zaehler, hier allein in der Zeile und darf der Anker
   sein. */
@media(max-width:700px){
  /* 124 war die Hoehe mit der Unterzeile unter der Marke. Ohne sie braucht
     die Leiste nur noch 92px (bei 700px 112px, weil dort mehr Polster
     steht) — gemessen mit abgeschaltetem min-height. Der Wert bleibt als
     Mindesthoehe stehen, damit die Leiste nicht bei jeder Schriftgroesse
     eine andere Hoehe hat. */
  :root{--topbar-h:112px;--feld-h:44px}
  /* Seit nur noch die zweite Zeile klebt, ist der stehende Streifen rund
     55px hoch — die Scheibe liegt damit direkt neben dem Suchfeld und
     nicht als Tiefe unter einer breiten Leiste. Sie bleibt Glas, aber
     dichter (85 statt 72 Prozent) und mit kleinerem Radius: Sonst liest
     man die Karten, die darunter durchlaufen, als Schleier mit, und der
     Weichzeichner ist der teuerste Effekt der Seite — er wird bei jedem
     Scrollbild neu gerechnet. */
  :root{--topbar-bg:rgba(7,7,12,.85)}
  @media(prefers-color-scheme:light){ :root{--topbar-bg:rgba(246,246,249,.88)} }
  .topbar{backdrop-filter:blur(14px) saturate(1.6);
    -webkit-backdrop-filter:blur(14px) saturate(1.6)}
  /* Zurueck zur Reihe: Zeile 1 Marke und Anmeldung, Zeile 2 die Mitte.
     Als Raster waere die Mitte eine dritte Spalte von 44vw — am Telefon
     ist dafuer kein Platz. */
  .topbar-in{display:flex;flex-wrap:wrap;align-items:flex-start;row-gap:10px;padding:10px 24px}
  .topbar-mitte{order:3;flex:1 1 100%;width:auto}
  .brand-block{order:1}
  .brand{font-size:1.72rem}
  .switch{order:2;margin-left:auto;margin-top:2px;padding:6px 12px 6px 10px}
  /* Den erzwungenen Umbruch von vorher (ein leerer Flex-Posten mit voller
     Breite) braucht es nicht mehr: Die Mitte ist ein eigener Kasten mit
     flex-basis 100% und faengt damit von sich aus eine neue Zeile an —
     gleich wie lang der Name im Knopf daneben ist. */
  .kat-wrap{flex:0 0 auto}
  .kat{padding:0 30px 0 12px;font-size:.85rem}
  /* Basis 120px statt auto: Der Flex-Umbruch entscheidet nach der
     gewuenschten Groesse der Elemente, und mit "auto" ist die des
     Suchfeldes seine Inhaltsbreite — zusammen mit dem Auswahlfeld mehr als
     die Zeile hat, also brach es in eine eigene. Mit kleiner Basis bleiben
     beide in einer Zeile und teilen den Platz. */
  .topbar .search-wrap{flex:1 1 120px;max-width:none;min-width:0}
  .topbar .search{padding:0 30px 0 34px}
  /* iOS vergroessert die ganze Seite, sobald ein Feld mit einer Schrift
     unter 16px den Fokus bekommt — und zoomt danach nicht von selbst
     zurueck. 16px ist die Schwelle, an der Safari nichts mehr veraendert.
     Bewusst NICHT ueber maximum-scale im viewport: das verbietet auch das
     Zoomen von Hand und schliesst Menschen mit schwacher Sehkraft aus.
     Die Regel stand als „.search{font-size:16px}" weiter unten und war
     wirkungslos: .topbar .search traegt zwei Klassen und gewinnt, egal wie
     spaet die andere Regel kommt. Deshalb hier dieselbe Selektorform.
     Nur das Textfeld: Die Rubrikwahl oeffnet auf iOS ein eigenes Rad und
     zoomt nicht, mit 16px waere sie aber 24px breiter — bei 320px
     Fensterbreite reicht dann der Platz fuer das Suchfeld daneben nicht
     mehr und die Leiste waechst um eine Zeile. */
  .topbar .search{font-size:16px}
  .topbar .search-ico{left:11px}
}
/* Unter 360px reichen 288px Inhaltsbreite nicht fuer Marke (1,15rem) und
   Knopf in einer Zeile — der Knopf brach um und die Leiste wuchs auf 142px.
   Dort also zurueck auf die Grundgroesse und der Knopf ohne Leuchtpunkt:
   Er sagt seinen Zustand ohnehin im Wort. */
@media(max-width:360px){
  :root{--topbar-h:90px}
  .kat{padding:0 28px 0 10px;font-size:.8rem}
  .brand{font-size:1.45rem}
  :root{--feld-h:40px}
  .switch .led{display:none}
  .switch{padding:6px 11px;gap:0}
}

@media(max-width:560px){
  .grid{grid-template-columns:1fr}
  .topbar-in{padding:8px 16px}
  /* Enger als am Rechner: Auf dem Telefon liegt alles untereinander, und
     jeder Abstand kostet eine halbe Kachel Sichtbarkeit.
     Nach UNTEN gilt das Gegenteil (09.09.2026): Am Rechner steht die
     Auftaktzeile mittig und weit von der ersten Rubrik entfernt, auf dem
     Telefon rutscht "Lohn" mit dem negativen Abstand von -4px direkt an
     sie heran — beide Zeilen sind dann fast gleich lang und stehen
     buendig uebereinander, und die Rubrik liest sich wie eine dritte
     Zeile des Auftakts. Deshalb hier 12px Luft statt -4px; der Wert ist
     bewusst kleiner als der Abstand zwischen zwei Rubriken (16px), damit
     die erste nicht weiter weg steht als ihre Nachfolger. */
  .hero{padding:18px 0 0;margin-bottom:12px}
  .toolsec{padding:0 0 2px}
  .foot{margin-top:12px;padding:14px 0 20px}
  .wrap,.topbar-in,.filters-in{padding:0 16px}
  /* Die Ueberschrift ist auf eine Zeile gezwungen (white-space:nowrap),
     die Groesse muss sich also nach der Breite richten. Gemessen, bei
     welcher Groesse der Satz gerade noch in eine Zeile passt: 6,41vw bei
     320px, 6,79vw bei 560px. Genommen sind 6vw — die Reserve deckt ab,
     dass eine andere Schrift-Auslieferung (Systemschrift statt Inter) ein
     paar Prozent breiter baut. (Bis zur Kuerzung des Satzes am 07.09.2026
     standen hier 4,7vw; der alte, laengere Titel brauchte das.) */
  .hero .hero-h1{font-size:min(2.15rem,6vw)}
  /* Beschreibung auch am Handy genau zwei Zeilen (02.10.2026), damit alle
     Kacheln gleich hoch sind. */
}
/* Dieselbe iOS-Schwelle fuer Geraete, die breiter als 700px sind und
   trotzdem getippt werden — ein iPad im Querformat faellt sonst durch
   beide Raster. Hier ist Platz genug, deshalb auch die Rubrikwahl. */
@media(pointer:coarse) and (min-width:701px){
  .topbar .search,.topbar .kat{font-size:16px}
}

/* Wer Transparenz abbestellt hat, bekommt Flaechen statt Scheiben: voller
   Grund, kein Weichzeichner, kein Streiflicht — und statt der weichen
   Unterkante wieder eine sichtbare Linie, damit die Leiste eine Grenze
   hat. (Systemeinstellung „Transparenz reduzieren", u.a. iOS und macOS.) */
@media(prefers-reduced-transparency:reduce){
  .topbar{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;
    border-bottom:1px solid var(--border);box-shadow:none}
  .topbar::after{display:none}
  .card,.card-icon{background-image:none;box-shadow:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ── Hellmodus, zweiter Teil: die Bauteile ────────────────────────────────
   Steht bewusst hier unten, nach den Grundregeln — siehe die Begruendung
   oben im Marken-Block. */
@media(prefers-color-scheme:light){
  /* Die beiden Farbschleier hinter dem Inhalt: im Hellen deutlich
     zurueckhaltender, sonst faerben sie den Papierton ein und es entsteht
     eine sichtbare Kante, wo die Filterzeile sie abdeckt. */
  .bg::before{background:radial-gradient(circle,rgba(124,58,237,.11) 0%,transparent 70%)}
  .bg::after{background:radial-gradient(circle,rgba(6,182,212,.09) 0%,transparent 70%)}
  /* Die Abzeichen tragen Schriftfarben fuer dunklen Grund (#ddd0ff, #fed7aa,
     #dbeafe) und sind auf Papierweiss nicht zu lesen — hier die gesaettigten
     Gegenstuecke derselben Farbfamilie. Die Flaechen bleiben unveraendert,
     sie liegen bei gleicher Deckung in beiden Modi richtig. */
  .tag-beta{color:#9a3412}
  .tag-intern{color:#1d4ed8}
  /* Der Kasten der Marke steht auf dem Verlauf; hell ist der gesaettigt,
     die Schrift darauf bleibt deshalb weiss statt fast schwarz. */
}

/* ── Druck ─────────────────────────────────────────────────────────────────
   Papier bekommt eine eigene Gestalt, keine Kopie des Schirms: heller Grund,
   die Karten als schmale Liste mit ausgeschriebener Adresse, Bedienelemente
   raus, Rubriken zusammengehalten. So passen alle Tools auf zwei Seiten. */
@page{margin:14mm}
@media print{
  :root{--text:#111;--text-soft:#333;--text-mute:#444;--text-dim:#666;--border:#ccc;--border-2:#bbb}
  body{background:#fff;color:#111;font-size:10pt}
  /* .search-wrap steht seit v1.3 in der Kopfleiste und muss dort eigens
     ausgeblendet werden — vorher fiel es mit .filters weg. */
  .bg,.grid-lines,.filters,.skip,.switch,.card-go,.foot,
  .empty,.search-wrap,.kat-wrap{display:none!important}
  .topbar{position:static;top:auto;min-height:0;background:none;box-shadow:none;
    border-bottom:1px solid #bbb;backdrop-filter:none}
  .topbar::after{display:none}
  .topbar-in,.wrap{max-width:none;padding:0}
  .topbar-count{display:inline;color:#444}
  /* Auf Papier bleibt das Zeichen dunkel; der weisse Rand faellt weg —
     auf Weiss ist er unsichtbar und kostet im Druck nur Kante. */
  .brand-mark path{fill:#111;stroke:none}
  .hero{padding:8pt 0 10pt;text-align:left}
  .hero .hero-h1{font-size:20pt;margin:6pt 0 4pt}
  .hero .hero-h1 .grad,.card-title .grad{-webkit-text-fill-color:#111;color:#111;background:none}
  .hero p.lead{margin:0;max-width:none;color:#333;font-size:10pt}
  .toolsec{padding:0;margin-bottom:9pt;break-inside:auto;page-break-inside:auto;
    orphans:3;widows:3}
  /* Der Bildschirmabstand in px bleibt draussen — auf Papier sorgt schon
     margin-bottom:9pt gegen 6pt unter der Ueberschrift fuer die Staffelung. */
  .toolsec + .toolsec{margin-top:0}
  /* Intern wird NICHT eigens fuer Papier freigegeben: der Ausdruck zeigt
     genau das, was auf dem Schirm sichtbar ist. Angemeldet also mit, sonst
     ohne — sonst stuenden interne Adressen auf einem Blatt fuer Mandanten. */
  /* background:none nimmt den auslaufenden Verlauf weg — auf Papier zieht
     eine durchgezogene Linie, die auch ohne Hintergrunddruck erscheint. */
  .sec-head{margin-bottom:6pt;padding-bottom:3pt;background:none;
    border-bottom:1px solid #999;break-after:avoid;page-break-after:avoid}
  .sec-head h2{font-size:12pt;gap:6pt}
  .sec-sub{margin-top:1pt;font-size:8.8pt;color:#555}
  .toolsec-intern .sec-head h2{color:#111}
  .grid{display:block}
  /* Auf Papier bleibt die Karte eine Zeile. Wichtig seit dem Umbau auf
     Flexbox (v1.3): flex-direction ausdruecklich zuruecksetzen — der Schirm
     stellt die Karte als Spalte, und ohne diese Zeile stapelten Kachel,
     Text und Marken im Ausdruck untereinander. Dasselbe fuer .card-body,
     der am Schirm Kachel und Text nebeneinander haelt. */
  .card{display:flex;flex-direction:row;align-items:baseline;gap:8pt;height:auto;
    padding:2.6pt 0;border:0;border-bottom:1px dotted #ccc;
    border-radius:0;background:none;background-image:none;box-shadow:none;
    break-inside:avoid;page-break-inside:avoid}
  .card-body{display:flex;flex-direction:row;align-items:baseline;gap:6pt;flex:1;min-width:0}
  .card::before{display:none}
  .card-icon{width:auto;height:auto;border:0;background:none;background-image:none;
    box-shadow:none;font-size:10pt}
  .card-text{flex:1}
  .card-title{display:inline;font-size:10.5pt;font-weight:700}
  .card-title::after{content:" · gtools.me/" attr(data-print);font-weight:400;font-size:8.5pt;color:#666}
  .card-desc{display:block;-webkit-line-clamp:none;margin-top:1pt;font-size:8.8pt;color:#444}
  .card-meta{margin:0;padding-left:0;flex-shrink:0}
  /* Druck: Titel, Adresse und Etiketten duerfen umbrechen, alle Etiketten
     sichtbar. */
  .card-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:1pt 8pt;padding-right:0}
  .card-kopf .card-title{white-space:normal;overflow:visible;max-width:none}
  .card-kopf .card-meta{flex:0 0 auto;height:auto;overflow:visible}
  .card-desc{min-height:0}
  .tag{background:none;border:1px solid #bbb;color:#444;font-size:7.5pt;box-shadow:none}
  .tag-beta,.tag-intern{color:#111}
}

/* ── Kopf wie MK-Uebersicht (02.10.2026) ─────────────────────────────
   Kopfzeile: Abstand zwischen Zeichen und Wortmarke 8px, Wortmarke 1.5rem
   (vorher 1.72rem ohne Abstand), am Handy 1.3rem / 1.1rem wie bei MK.
   Kopfbereich: Unterzeile entfernt (s. Markup), Ueberschrift kleiner,
   weniger Abstand — die erste Rubrik rueckt nach oben. */
@media screen{
  .brand{gap:8px;font-size:1.5rem}
  /* Abstand zur ersten Rubrik wie bei MK: dort -6px + 8px Kopf-Abstand der
     Rubrik = 2px. Hier hat die Rubrik keinen eigenen Abstand oben, daher
     direkt 2px (-6px ueberlappte). */
  .hero{padding:12px 0 0;margin-bottom:2px}
  .hero .hero-h1{font-size:clamp(1.3rem,2.2vw,1.65rem);margin:4px 0 0}
}
@media screen and (max-width:700px){.brand{font-size:1.3rem}}
@media screen and (max-width:360px){.brand{font-size:1.1rem}}
@media print{
  .hero{padding:4pt 0 6pt}
  .hero .hero-h1{font-size:16pt;margin:0}
}

/* ── Kopfzeile wie MK-Uebersicht, Feinabgleich (02.10.2026) ──────────
   Felder an derselben Stelle wie bei MK: Wortmarke und Rubrikwahl so breit
   wie dort (MK-Tools bzw. die laengeren MK-Rubriknamen), am Handy Rubrikwahl
   und Suchfeld je halbe Breite, Konto-Schalter dort nur als Punkt. */
@media screen and (min-width:701px){
  /* .brand-block{min-width:156px} entfallen (02.10.2026): ohne Schriftzug
     ruecken die Felder wie bei MK direkt ans Zeichen. */
  .kat{min-width:197px}
}
@media screen and (max-width:700px){
  :root{--topbar-h:98px}   /* wie MK, vorher 112px */
  .topbar-mitte{margin:0}
  .switch{margin-top:0;align-self:center;padding:8px 14px}
}
@media screen and (max-width:360px){:root{--topbar-h:90px}}
/* Sehr schmale Handys: nur der Punkt, sonst laeuft die Zeile ueber. */
@media screen and (max-width:360px){.switch[aria-pressed="true"] .switch-text{display:none}.switch[aria-pressed="true"]{gap:0}}
@media screen and (max-width:560px){
  /* Seit 03.10.2026: angemeldet steht neben dem Punkt der Vorname (wie
     MK), abgemeldet bleibt es beim Punkt. Bis 360px nur der Punkt, siehe
     unten. max-width nur als Notbremse fuer Konten ohne Namen, deren
     Anmeldename (E-Mail) sonst die Zeile sprengen koennte. */
  .switch[aria-pressed="false"] .switch-text{display:none}
  .switch[aria-pressed="true"]{gap:8px}
  .switch[aria-pressed="true"] .switch-text{max-width:42vw;overflow:hidden;text-overflow:ellipsis}
  .switch{padding:9px 12px}
  .switch .led{display:block}
  .topbar-mitte .kat-wrap{flex:1 1 0;min-width:0}
  .topbar-mitte .kat-wrap .kat{width:100%}
  .topbar-mitte .search-wrap{flex:1 1 0;min-width:0}
}
/* ── Handy: Rubrikwahl und Suche in der Kopfzeile (04.10.2026) ──────────
   Bis 560px steht alles in EINER Zeile: Marke links, in der freien Mitte
   Rubrikwahl und Suche, rechts der Punkt. Der Vorname neben dem Punkt
   entfaellt dort (wie bei MK) — er braucht den Platz, und der Knopf traegt
   seinen Namen weiter im aria-label. Felder 44px hoch (Tippflaeche), Schrift
   16px (iOS zoomt sonst beim Fokus). Die Leiste klebt jetzt als Ganzes;
   die zweite Zeile mit dem negativen top-Versatz gibt es hier nicht mehr
   (siehe kopfKleben). Zwischen 561 und 700px bleibt es bei zwei Zeilen. */
@media screen and (max-width:560px){
  :root{--topbar-h:60px}
  .topbar-in{flex-wrap:nowrap;align-items:center;gap:8px;row-gap:0;padding:8px 16px}
  .brand-block{order:1;flex:0 0 auto}
  .topbar-mitte{order:2;flex:1 1 0;min-width:0;gap:6px}
  .switch{order:3;margin:0;align-self:center;flex:0 0 auto;box-sizing:border-box;
    /* quadratisch wie das Logo (Feldhoehe, 40px bei <=360px), Rand/Flaeche wie Auswahl und Suche */
    width:var(--feld-h);height:var(--feld-h);padding:0;justify-content:center;gap:0;
    border-radius:9px;background:var(--feld-bg);border:1px solid var(--border-2);
    box-shadow:inset 0 1px 0 var(--kante-weich)}
  .switch:hover{background:var(--feld-bg-fokus)}
  .brand-mark{background:var(--feld-bg);box-shadow:inset 0 1px 0 var(--kante-weich)}
  /* Auswahl und Suche: abgerundet-rechteckig wie Logo-Kasten und Punkt-Viereck */
  .topbar .kat,.topbar .search{border-radius:9px}
  .switch[aria-pressed="true"]{gap:0}
  .switch[aria-pressed="true"] .switch-text{display:none}
  .topbar-mitte .kat-wrap{flex:1 1 0}
  .topbar-mitte .search-wrap{flex:1 1 0}
  .topbar .kat{font-size:16px;padding:0 22px 0 10px;text-overflow:ellipsis}
  .kat-pfeil{right:7px;width:12px;height:12px}
  .topbar .search{padding:0 8px 0 28px}
  .topbar .search:not(:placeholder-shown){padding-right:26px}   /* Platz fuer das Leeren-Kreuz erst mit Text */
  .topbar .search-ico{left:9px}
  .topbar .search-ico svg{width:14px;height:14px}
  .topbar .search-clear{right:2px}
  /* Das eingebaute Kreuz des Browsers doppelte das eigene Leeren-Kreuz. */
  .topbar .search::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
}


/* ── Rubriken einklappbar wie in der MK-Uebersicht (02.10.2026) ──────
   Knopf rechts im Rubrikkopf, Zustand je Browser. Seit 07.10.2026 (Robin)
   auch der Schnellzugriff (#sec-schnell), gleicher Knopf mit Zahl. Bei
   Suche oder Rubrikwahl sind alle Rubriken offen (der Schnellzugriff ist
   dann ohnehin ausgeblendet). */
.sec-head{position:relative;cursor:pointer;padding-right:44px;user-select:none}
.sec-zu{position:absolute;right:0;top:50%;transform:translateY(calc(-50% - 6px));display:flex;align-items:center;gap:6px;height:30px;padding:0 9px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-dim);font:inherit;font-size:.74rem;cursor:pointer}
.sec-zu:hover,.sec-zu:focus-visible{color:inherit;border-color:var(--border-2)}
.sec-zu svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.sec-zu .sec-anz{display:none}
.toolsec.zu .sec-zu svg,#sec-schnell.zu .sec-zu svg{transform:rotate(180deg)}
.toolsec.zu .sec-zu .sec-anz,#sec-schnell.zu .sec-zu .sec-anz{display:inline}
.toolsec.zu .grid,#sec-schnell.zu .grid{display:none}
.toolsec.zu .sec-head,#sec-schnell.zu .sec-head{margin-bottom:4px}
body.filter-aktiv .toolsec.zu .grid{display:grid}
body.filter-aktiv .sec-zu{visibility:hidden}
@media print{
  .sec-zu{display:none!important}
  .toolsec.zu .grid{display:grid!important}
  .sec-head{padding-right:0}
}


/* ── Kopfzeile nur mit Zeichen (02.10.2026) ──────────────────────────
   Die Wortmarke "G-Tools" ist am Bildschirm ausgeblendet, im Druck steht
   sie neben dem Zeichen. Name fuer Vorlesen: aria-label am Link. */
@media screen{.brand-name{display:none}}

/* ── Nadel: an den Schnellzugriff anheften (03.10.2026, wie /mk/) ─────
   Gemeinsame Vorgabe Startseite und MK-Uebersicht (Robin, 03.10.2026):
   oben rechts an jeder Kachel, Knopf 24px am Rechner und 32px am Handy,
   SVG-Nadel 15px um 35 Grad gedreht. Nicht angeheftet grau und leise
   (--text-dim, Deckkraft .5, beim Ueberfahren .9, ohne Zeiger .6),
   angeheftet gefuellt in der Akzentfarbe --g-gruen. Werte wie .fav-btn
   in /mk/index.html. Knoepfe entstehen erst per Skript — im
   ausgelieferten HTML steht nichts davon. */
.kb-pin{position:absolute;top:4px;right:4px;z-index:4;width:24px;height:24px;padding:0;border:0;border-radius:9px;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-dim);-webkit-tap-highlight-color:transparent}
.kb-pin svg{display:block;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(35deg);opacity:.5;filter:drop-shadow(0 0 2px var(--surface));transition:opacity .15s}
.card:hover .kb-pin svg,.kb-pin:focus-visible svg{opacity:.9}
@media(hover:none){.kb-pin svg{opacity:.6}}
.kb-pin[aria-pressed="true"]{color:var(--g-gruen)}
.kb-pin[aria-pressed="true"] svg{fill:currentColor;opacity:1}
.kb-pin:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--g-gruen) 55%,transparent)}
#tools .card .card-go{right:34px}
@media(max-width:560px){#tools .kb-pin{top:3px;right:3px;width:32px;height:32px}#tools .card .card-go{right:42px}#tools .card-kopf{padding-right:26px}}
.kb-live{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media print{.kb-pin{display:none!important}}

/* Handy: mehr Luft zwischen Ueberschrift und erster Rubrik (02.10.2026).
   Steht bewusst HINTER dem Block "Kopf wie MK-Uebersicht" (dort
   .hero{margin-bottom:2px} fuer alle Breiten), sonst gewinnt jener. */
@media screen and (max-width:560px){.hero{margin-bottom:30px}}

/* ── Schnellzugriff (03.10.2026, wie /mk/) ────────────────────────────
   Angeheftete Kacheln (Nadel an der Kachel) ganz oben, nur wenn es
   welche gibt. Gespeichert je Konto ("g-start-schnellzugriff", Abgleich
   ueber gauth), ohne Anmeldung nur in diesem Browser. Reihenfolge wie in der normalen Ansicht:
   nach Rubrik, darin alphabetisch.
   Bei Suche oder Rubrikwahl und im Druck ausgeblendet. Der Block ist
   keine .toolsec: Filter und Zaehler lassen ihn aus. Einklappbar wie die
   Rubriken (seit 07.10.2026, siehe "Rubriken einklappbar"). */
.favsec{padding:0 0 4px;margin-bottom:clamp(30px,3.2vw,36px);scroll-margin-top:calc(var(--kleb-h,var(--topbar-h)) + 18px)}
/* Platzhalter fuer Kacheln, die erst nach der Anmeldung kommen (04.10.2026):
   gleiche Groesse wie eine Kachel im Schnellzugriff, ohne Inhalt, leise
   pulsierend (nicht bei "weniger Bewegung"). */
#sec-schnell .sz-platz{pointer-events:none;box-shadow:none;background-image:none}
#sec-schnell .sz-platz .card-icon{background-image:none;box-shadow:none}
.sz-platz-zeile{display:block;height:10px;width:60%;border-radius:5px;background:var(--surface-2)}
@media (prefers-reduced-motion:no-preference){#sec-schnell .sz-platz{animation:sz-puls 1.4s ease-in-out infinite}}
@keyframes sz-puls{50%{opacity:.55}}
body.filter-aktiv #sec-schnell{display:none}
/* Kompakte Kacheln: nur Symbol und Titel.
   Zusatzknoepfe (.tf: TestFlight/Download) nur in der Rubrik Apps by G;
   in angehefteten Kopien ausgeblendet, einheitliche Hoehe (13.10.2026, Robin). */
@media screen{
  #sec-schnell .grid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:8px}
  #sec-schnell .card{height:62px;min-height:62px;max-height:62px;padding:9px 11px;gap:0;justify-content:center;border-radius:14px;overflow:hidden;box-sizing:border-box}
  #sec-schnell .card-desc,#sec-schnell .card-meta,#sec-schnell .card-go,#sec-schnell .tf{display:none!important}
  #sec-schnell .card-body{align-items:center;gap:9px;min-width:0}
  #sec-schnell .card-icon{width:34px;height:34px;font-size:1.05rem;flex-shrink:0}
  #sec-schnell .card-icon-app img{width:34px;height:34px;border-radius:8px}
  #sec-schnell .card-tf .card-kopf{flex-wrap:nowrap;row-gap:0}
  #sec-schnell .card-kopf{padding-right:22px;min-width:0}
  #sec-schnell .card-title{font-size:.84rem;line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal}
}
@media screen and (max-width:560px){
  #sec-schnell .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #sec-schnell .card{height:62px;min-height:62px;max-height:62px;padding:8px 9px}
  #sec-schnell .card-icon{width:30px;height:30px;font-size:.95rem}
  #sec-schnell .card-icon-app img{width:30px;height:30px;border-radius:7px}
  #sec-schnell .card-body{gap:8px}
  #sec-schnell .card-title{font-size:.78rem;line-height:1.2;-webkit-line-clamp:3}
}
@media print{#sec-schnell{display:none!important}}
/* Rubrik „Verwaltung“ (09.10.2026, nur Admins, entsteht per Skript): Verwaltungsseiten
   gehoeren nicht auf ein Blatt mit Werkzeugen – im Druck immer weg. */
@media print{#sec-verwaltung{display:none!important}}
/* Schnellzugriff nach Rubrik einfaerben (08.10.2026, Robin, wie G-Tools Kanzlei
   „Variante D“, Werte aus /libs/mk-start.css): getoente Kachel in der Farbe
   ihrer Rubrik und darunter klein der Rubrikname. data-rubrik und
   .card-rubrik setzt der Schnellzugriff beim Klonen. Die feste Kachel
   G-Tools Kanzlei liegt in keiner Rubrik und bleibt ungetoent. Druck: der
   Schnellzugriff wird ohnehin nicht gedruckt. */
@media screen{
  #sec-schnell .card{height:auto;min-height:62px}
  #sec-schnell .card[data-rubrik]{--rb:var(--text-dim);
    background-color:var(--surface);
    border-color:var(--border)}
  #sec-schnell .card[data-rubrik]:hover,#sec-schnell .card[data-rubrik]:focus-visible{
    background-color:var(--surface-2);border-color:var(--border-2)}
  #sec-schnell .card[data-rubrik="lohn"]{--rb:#f0a656}
  #sec-schnell .card[data-rubrik="steuern"]{--rb:#7ea2f0}
  #sec-schnell .card[data-rubrik="finanzen"]{--rb:#5fc796}
  #sec-schnell .card[data-rubrik="alltag"]{--rb:#57c9da}
  #sec-schnell .card[data-rubrik="spiele"]{--rb:#ea83b1}
  #sec-schnell .card[data-rubrik="apps"]{--rb:#e2c35a}   /* Apps by G (10.10.2026), seit rubriken-umbau-0311 Mac-Apps */
  #sec-schnell .card[data-rubrik="dokumente"]{--rb:#f0a656}   /* rubriken-umbau-0311 */
  #sec-schnell .card[data-rubrik="intern"],#sec-schnell .card[data-rubrik="verwaltung"]{--rb:#b394f2}
  #sec-schnell .card-rubrik{display:block;margin-top:1px;font-size:.68rem;font-weight:600;line-height:1.2;
    letter-spacing:.01em;color:var(--rb);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media screen and (prefers-color-scheme:light){
  #sec-schnell .card[data-rubrik]{background-color:var(--surface)}
  #sec-schnell .card[data-rubrik="lohn"]{--rb:#a35a0c}
  #sec-schnell .card[data-rubrik="steuern"]{--rb:#2f5bb7}
  #sec-schnell .card[data-rubrik="finanzen"]{--rb:#1d7a4e}
  #sec-schnell .card[data-rubrik="alltag"]{--rb:#0d7889}
  #sec-schnell .card[data-rubrik="spiele"]{--rb:#a8336a}
  #sec-schnell .card[data-rubrik="apps"]{--rb:#85690a}   /* Apps by G (10.10.2026), seit rubriken-umbau-0311 Mac-Apps */
  #sec-schnell .card[data-rubrik="dokumente"]{--rb:#a35a0c}   /* rubriken-umbau-0311 */
  #sec-schnell .card[data-rubrik="intern"],#sec-schnell .card[data-rubrik="verwaltung"]{--rb:#6a3fb8}
}
@media screen and (max-width:560px){
  #sec-schnell .card[data-rubrik] .card-title{-webkit-line-clamp:2}
  #sec-schnell .card-rubrik{font-size:.64rem}
}
/* App-Kacheln kompakt (13.10.2026, Robin): Knopf rechts neben Beschreibung,
   Plattform-Pills bleiben; kurzer Knopftext (Volltext als title); am Telefon etwas kompakter. */
.card-icon-app{padding:0;overflow:hidden;background:none;border:0;box-shadow:none}
.card-icon-app img{display:block;width:38px;height:38px;border-radius:9px}
#tools .toolsec:not(#sec-schnell):not(:is(#sec-apps,#sec-dokumente)) .card-icon-app{border-radius:8px!important}#tools .toolsec:not(#sec-schnell):not(:is(#sec-apps,#sec-dokumente)) .card-icon-app img{width:100%;height:100%;border-radius:8px;object-fit:contain}
.card-tf{gap:8px}
.card-tf .card-text{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:start;width:100%}
.card-tf .card-kopf{grid-column:1/-1;padding-right:16px}
.card-tf .card-desc{grid-column:1;grid-row:2;align-self:center;min-width:0;margin-top:0}
@media screen{.card-tf .card-desc{min-height:0}}
.tf{position:relative;z-index:1;grid-column:2;grid-row:2;display:flex;align-items:center;align-self:center;justify-self:end;padding-left:0;flex-shrink:0;max-width:100%}
.tf-knopf{font-size:.72rem;font-weight:600;padding:5px 11px;border-radius:var(--pill);background:var(--accent-dim);color:var(--text);border:1px solid var(--border-2);white-space:nowrap;transition:border-color .2s;line-height:1.2}
.card-tf:hover .tf-knopf{border-color:var(--accent)}
.card-tf .card-kopf{flex-wrap:nowrap;row-gap:0}
.card-tf .card-kopf .card-meta{flex:1 1 0;min-width:0;height:20px;overflow:hidden}
.card-tf .card-kopf .card-meta::before{content:"";width:0;height:20px;margin-right:-5px}
@media screen and (max-width:560px){
  .card-tf .card-text{column-gap:8px}
  .tf-knopf{font-size:.7rem;padding:5px 10px}
}
@media print{.tf-knopf{background:none;color:#000;border:1px solid #bbb}}
/* Zwei Knoepfe (TestFlight + Google Play, Mockup 15.10.2026): eigene Zeile unter dem Text, nebeneinander */
.card-tf2 .card-desc{grid-column:1/-1}
.card-tf2 .tf{grid-column:1/-1;grid-row:3;justify-self:start;gap:6px;margin-top:6px;flex-wrap:wrap}
.card-tf:hover .tf-knopf:hover{border-color:var(--accent)}
/* Apps by G: alle Kacheln gleich gross (Robin 17.10.2026). Alle Grid-Zeilen so hoch wie die hoechste
   Kachel (grid-auto-rows:1fr), Kachel fuellt die Zeile, Badge-Zeile sitzt unten buendig. Nur :is(#sec-apps,#sec-dokumente), nur Bildschirm. */
@media screen{
  :is(#sec-apps,#sec-dokumente) .grid{grid-auto-rows:1fr}
  :is(#sec-apps,#sec-dokumente) .grid>.card{height:100%;justify-content:flex-start}
  :is(#sec-apps,#sec-dokumente) .card-tf .card-body{flex:1 1 auto}
  :is(#sec-apps,#sec-dokumente) .card-tf .card-text{align-self:stretch;grid-template-rows:auto auto 1fr}
  :is(#sec-apps,#sec-dokumente) .card-tf2 .tf{align-self:end;align-content:flex-end}
}
/* Store-Badges einer Kachel nebeneinander (Robin 17.10.2026 17:25), dafuer etwas kleiner: 30 -> 27 px.
   Umbruch nur, wenn die Spalte zu schmal ist (Desktop-Fenster unter ca. 1185 px, ca. 561-600 px). Tippflaeche per ::after ca. 37 px. */
@media screen{
  :is(#sec-apps,#sec-dokumente) .tf-knopf.sb{height:27px;gap:5px;padding:0 8px 0 7px}
  :is(#sec-apps,#sec-dokumente) .tf-knopf.sb .sb-ic{width:15px;height:15px}
  :is(#sec-apps,#sec-dokumente) .tf-knopf.sb .sb-t{font-size:11.3px}
  :is(#sec-apps,#sec-dokumente) .tf-knopf.sb .sb-t small{font-size:6.8px}
  :is(#sec-apps,#sec-dokumente) .tf-knopf.sb-img{padding:0}
  :is(#sec-apps,#sec-dokumente) .tf-knopf.sb-img img{height:27px}
  :is(#sec-apps,#sec-dokumente) .tf-knopf.sb::after{inset:-5px -3px}
  :is(#sec-apps,#sec-dokumente) .card-tf2 .tf{gap:5px}
  /* Drei Badges in einer Kachel (Serverfach: TestFlight, Download macOS, Google Play; Robin 18.10.2026 05:14):
     kompaktere Form nur fuer .card-tf3, damit alle drei bei 1280/768/390 px auf eine Zeile passen (Kacheln bleiben 120 px).
     Hoehe 27 px wie die anderen Badges; Google-Play-Grafik proportional 22 px (nicht verzerrt); Zeile darf 6 px in den rechten Rand. */
  :is(#sec-apps,#sec-dokumente) .card-tf3 .tf{gap:3px;margin-right:-6px;max-width:calc(100% + 6px)}
  :is(#sec-apps,#sec-dokumente) .card-tf3 .tf-knopf.sb{padding:0 4px 0 3px;gap:2px}
  :is(#sec-apps,#sec-dokumente) .card-tf3 .tf-knopf.sb .sb-ic{width:11px;height:11px}
  :is(#sec-apps,#sec-dokumente) .card-tf3 .tf-knopf.sb .sb-t{font-size:9.5px;letter-spacing:-.02em}
  :is(#sec-apps,#sec-dokumente) .card-tf3 .tf-knopf.sb .sb-t small{font-size:6px;letter-spacing:0}
  :is(#sec-apps,#sec-dokumente) .card-tf3 .tf-knopf.sb-img{padding:0}
  :is(#sec-apps,#sec-dokumente) .card-tf3 .tf-knopf.sb-img img{height:22px;width:auto}
  /* ym-kachel-merch-2010 (Robin 23:44): YOmimiGA mit drei Badges in Normalgroesse; eine Zeile ab dem Icon, wenn die Kachel breit genug ist, sonst Umbruch. */
  :is(#sec-apps,#sec-dokumente) .card-ym3{container-type:inline-size}
  @container (min-width:290px){
    :is(#sec-apps,#sec-dokumente) .card-ym3 .tf{margin-left:-50px;max-width:calc(100% + 50px)}
  }
}
/* Store-Badges statt Knoepfe, Plattform-Pills raus (Robin 16.10.2026 23:02).
   Offizielle Grafiken lokal unter /img/badges/ (Google Play DE, Chrome Web Store);
   TestFlight, Download und Web als eigene Badges im selben Stil (kein Apple-Badge:
   der ist laut Apple nur fuer Apps erlaubt, die im App Store sind). */
.tf-knopf.sb{position:relative;display:inline-flex;align-items:center;gap:6px;height:30px;box-sizing:border-box;padding:0 10px 0 8px;border-radius:6px;background:#000;color:#fff;border:1px solid #a6a6a6;font-family:var(--font);white-space:nowrap}
.tf-knopf.sb .sb-ic{width:17px;height:17px;flex:0 0 auto;fill:currentColor}
.tf-knopf.sb .sb-t{display:flex;flex-direction:column;align-items:flex-start;font-size:12.5px;font-weight:600;line-height:1.02;letter-spacing:-.01em}
.tf-knopf.sb .sb-t small{font-size:7.5px;font-weight:500;letter-spacing:.01em;margin-bottom:1px}
.tf-knopf.sb-img{padding:0;border:0;background:none;border-radius:6px}
.tf-knopf.sb-img img{display:block;height:30px;width:auto;border-radius:6px}
/* Badges 30 px hoch (Robin 17.10.2026, vorher 36/34 px): unsichtbar erweiterte Tippflaeche, ca. 38 px */
.tf-knopf.sb::after{content:"";position:absolute;inset:-5px -4px}
.tf-knopf.web-knopf:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card-tf:hover .tf-knopf.sb,.card-tf:hover .tf-knopf.sb:hover{border-color:#fff}
.card-tf:hover .tf-knopf.sb-img{border:0;box-shadow:0 0 0 1px var(--accent)}
@media(prefers-color-scheme:light){.tf-knopf.sb{border-color:#000}.card-tf:hover .tf-knopf.sb,.card-tf:hover .tf-knopf.sb:hover{border-color:var(--accent)}}
@media print{.tf-knopf.sb{background:none;color:#000;border:1px solid #bbb}}
/* Karten nur fuer bestimmte Konten (data-nur-konten-karte, wie MK 05.10.2026) */
.toolsec.gesperrt,.card.gesperrt{display:none!important}

.sec-sub .gp-hinweis{opacity:.85}
.card-rubrik{display:none}
/* ── Rubrik „Apps by G“ (10.10.2026, umbenannt aus „Apps &
   Add-ons“ · G-Tools Originals) ─────────
   Der Titel ist ein einziger Textknoten — Schnellzugriff (rubrikMarke liest
   den ersten Textknoten), Rubrikwahl und Ueberschrift zeigen denselben
   Namen. Den frueheren Zusatz (.sec-zusatz) gibt es nicht mehr.
   Nie umbrechen, auch nicht bei „Apps by G“. */
#h-apps{align-items:baseline;white-space:nowrap;-webkit-hyphens:none;hyphens:none}
@media print{
  /* Externe Kachel: statt „gtools.me/…“ steht das Ziel (data-print-extern). */
  .card-title[data-print-extern]::after{content:" · " attr(data-print-extern)}
}
/* Lange Einzelwörter in Kacheltiteln (09.10.2026, Robin): KEINE Silbentrennung – das Skript
   „Kacheltitel einpassen“ verkleinert im Schnellzugriff nur den betroffenen Titel. */
.card-title{-webkit-hyphens:manual;hyphens:manual}
/* Schmale Handys: im Schnellzugriff etwas mehr Platz für den Titel (kleineres Symbol, engere Abstände). */
@media screen and (max-width:400px){
  #sec-schnell .card{padding:8px 7px}
  #sec-schnell .card-icon{width:26px;height:26px;font-size:.85rem}
  #sec-schnell .card-body{gap:7px}
  #sec-schnell .card-kopf{padding-right:20px}
}
/* Sehr schmal (bis 340 px, z. B. iPhone SE): Symbol im Schnellzugriff weglassen, der Titel bekommt die Breite. */
@media screen and (max-width:340px){
  #sec-schnell .card-icon{display:none}
  #sec-schnell .card{padding:8px 9px}
}
/* Nadel der festen Kachel (MK-Tools): angeheftet, aber nicht bedienbar.
   Im Schnellzugriff rot und gefuellt (Robin, 04.10.2026), gleiche Form und
   Groesse wie die gruenen — ein <span>, kein Knopf; ein Tipp darauf loest
   nichts aus und oeffnet die Kachel auch nicht (siehe Klick-Handler). */
.kb-pin[aria-disabled="true"]{cursor:default}
.kb-pin.kb-pin-fest{color:var(--nadel-fest)}
.kb-pin.kb-pin-fest svg{fill:currentColor;opacity:1}

/* ── Fuss ohne "Hilfe-Chat"-Link (03.10.2026, Robin) ──────────────────
   Den Link samt Trenner setzt /libs/gauth.js in die Fusszeile (vor
   "Feedback"). Auf der Startseite laeuft der Hilfe-Chat ueber den runden
   Knopf unten rechts (#gauth-ch-fab, ebenfalls aus gauth.js), der Link
   ist doppelt. Er wird hier nur ausgeblendet: gauth.js ist gemeinsam fuer
   alle Werkzeuge, dort bleibt er. "Feedback" bleibt unveraendert. */
/* Alles, was gauth.js fuer den Chat in den Fuss setzt (Link, Symbol,
   Trenner): Kennungen bzw. Klassen beginnen mit "gauth-ch". Der runde
   Knopf haengt am body, nicht im Fuss, und bleibt sichtbar. */
.foot [id^="gauth-ch"],.foot [class*="gauth-ch"]{display:none!important}
/* Kopfleiste ab 561px (Tablet/Desktop), Robin 05.10.2026: Logo-Feld, Rubrikwahl, Suche und Konto-Knopf
   als einzelne Felder wie auf dem Handy und in /mk - 9px Rundung, gleicher Rand und Feldhintergrund,
   alle gleich hoch (--feld-h). Nur Bildschirm, der Druck bleibt unberuehrt. */
@media screen and (min-width:561px){
  .brand-mark{background:var(--feld-bg);box-shadow:inset 0 1px 0 var(--kante-weich)}
  .topbar .kat,.topbar .search{border-radius:9px}
  .switch{box-sizing:border-box;height:var(--feld-h);padding-top:0;padding-bottom:0;border-radius:9px;
    background:var(--feld-bg);border:1px solid var(--border-2);box-shadow:inset 0 1px 0 var(--kante-weich)}
  .switch:hover{background:var(--feld-bg-fokus)}
}

/* ═════ Kopfleiste wie die Tools und die Kanzlei-Startseite (05.10.2026, Robin) ═════
   Eine Zeile auf jeder Breite: links G-Zeichen im quadratischen Kasten (Handy: daneben das Filter-Symbol),
   Titel in der Leiste mittig zur Seite, rechts Lupe (klappt nach links auf, der Titel bleibt stehen),
   dann Anmelden bzw. die Initialen. Maße kommen aus /libs/mk-kopf.css (--mk-sym-h, --mk-titel,
   --mk-such-*), Aussehen aus den --kl-*-Stellschrauben (dieselben Werte wie am Ende von gdesign.css).
   Verhalten (Suche auf/zu, Titel einpassen) steht im Skript „Kopfleiste“ am Seitenende.
   Nur Bildschirm; der Druck bleibt eigen. */
@media screen{
  :root{
    --kl-feld-h:42px;
    --kl-bg:color-mix(in srgb,var(--bg) 78%,transparent);
    --kl-linie-1:var(--border-2);--kl-linie-2:var(--border);
    --kl-kasten-rand:var(--border-2);--kl-kasten-bg:var(--surface);--kl-kasten-hover:var(--surface-2);
    --feld-h:var(--kl-feld-h);--topbar-h:calc(var(--kl-feld-h) + 22px);
  }
}
@media screen and (max-width:600px){:root{--kl-feld-h:40px}}
@media screen{
  .hero{display:none}
  .topbar{min-height:0;background:var(--kl-bg);box-shadow:none;
    backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6)}
  .topbar::after{display:none}
  .topbar{margin-bottom:16px}
  .topbar-in{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
    flex-wrap:nowrap;gap:12px;min-height:0;padding:12px 24px 10px}
  .topbar-in::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:1px;pointer-events:none;
    background:linear-gradient(90deg,var(--kl-linie-1) 0%,var(--kl-linie-2) 45%,transparent 100%)}
  .brand-block,.topbar-mitte,.switch{order:0}
  .topbar-mitte{position:relative;display:flex;align-items:center;gap:10px;width:auto;max-width:none;margin:0;flex:none;min-width:0}

  /* Kästen: gleiche Höhe, Rand, Fläche und 9 px Rundung wie in den Tools */
  .brand-mark{box-sizing:border-box;width:var(--kl-feld-h);height:var(--kl-feld-h);
    padding:calc((var(--kl-feld-h) - 2px - var(--mk-sym-h) / .633) / 2);
    border:1px solid var(--kl-kasten-rand);border-radius:9px;background:var(--kl-kasten-bg);box-shadow:none}
  .brand:hover .brand-mark{border-color:var(--g-gruen)}
  .topbar .kat,.topbar .search,.switch{box-sizing:border-box;height:var(--kl-feld-h);
    border:1px solid var(--kl-kasten-rand);border-radius:9px;background-color:var(--kl-kasten-bg);box-shadow:none}
  .topbar .kat:hover,.topbar .search:hover,.switch:hover{background-color:var(--kl-kasten-hover)}
  .topbar .kat:focus-visible,.topbar .search:focus{border-color:rgba(167,139,250,.6);background-color:var(--feld-bg-fokus);box-shadow:0 0 0 4px rgba(167,139,250,.13)}

  /* Titel in der Leiste (Größe/Versatz rechnet das Skript) */
  .topbar .kopf-titel{display:block;box-sizing:border-box;order:1;flex:1 1 auto;min-width:0;
    margin:0 calc(var(--kl-feld-h) + 12px) 0 0;padding:0;height:var(--kl-feld-h);
    text-align:center;white-space:nowrap;overflow:hidden;
    font-size:var(--mk-titel);font-weight:800;letter-spacing:-.035em;line-height:var(--kl-feld-h);transition:opacity .15s}
  .kopf-titel .grad{background:var(--marke);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

  /* Rubrikwahl */
  .topbar .kat-wrap{flex:0 0 150px;width:150px}
  .topbar .kat{width:100%;min-width:0;padding:0 26px 0 12px;font-size:.85rem;text-overflow:ellipsis}
  .topbar .kat-pfeil{right:9px}

  /* Suche: Lupe, klappt nach links auf */
  .topbar .search-wrap{position:absolute;right:0;top:0;z-index:2;flex:none;min-width:0;max-width:none;
    width:var(--kl-feld-h);height:var(--kl-feld-h);transition:width .18s ease}
  .topbar .search{width:100%;padding:0!important}
  .topbar .search-ico svg{display:block;width:calc(var(--mk-sym-h) / .8);height:calc(var(--mk-sym-h) / .8)}
  .topbar-mitte:not(.such-offen) .search{cursor:pointer;color:transparent;caret-color:transparent}
  .topbar-mitte:not(.such-offen) .search::placeholder{color:transparent}
  .topbar-mitte:not(.such-offen) .search-ico{left:50%;transform:translate(-50%,-50%);color:var(--text-soft)}
  .topbar-mitte.such-offen .search-wrap{width:var(--mk-such-w,min(var(--mk-such-max),calc(100% - 160px)))}
  .topbar-mitte.such-offen .search{padding:0 calc(var(--kl-feld-h) + 2px) 0 38px!important}
  .topbar-mitte.such-offen .kopf-titel{opacity:1;visibility:visible}
  .topbar-mitte.such-offen.such-eng .kopf-titel,.topbar-mitte .kopf-titel.kt-weg{opacity:0;visibility:hidden}
  .topbar .search::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
  .topbar .topbar-mitte.such-offen .search-clear{display:flex;align-items:center;justify-content:center;
    right:0;top:0;transform:none;width:var(--kl-feld-h);height:var(--kl-feld-h);padding:0;border-radius:9px;color:var(--text-soft)}
  .topbar .topbar-mitte.such-offen .search-clear svg{width:calc(var(--mk-sym-h) * 1.4);height:calc(var(--mk-sym-h) * 1.4)}
  .topbar .topbar-mitte.such-offen .search-clear:hover{color:var(--text);background:var(--kl-kasten-hover)}

  /* Konto: abgemeldet und angemeldet gleich großes Quadrat (--kl-feld-h),
     damit die Kopfzeile nicht springt (knopf-1112). Abgemeldet Personen-Zeichen
     (wie schon am Handy), angemeldet die Initialen. */
  .switch{margin:0;align-self:center;justify-self:end;width:var(--kl-feld-h);min-width:var(--kl-feld-h);height:var(--kl-feld-h);
    justify-content:center;gap:0;padding:0;color:var(--text);font-size:14px;font-weight:600}
  .switch .led{display:none}
  .switch[aria-pressed="false"] .switch-text{display:none}
  .switch[aria-pressed="false"]::before{content:"";display:block;flex:none;width:calc(var(--mk-sym-h) / .86);height:calc(var(--mk-sym-h) / .86);
    background:currentColor;opacity:.9;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%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='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E") center/contain no-repeat}
  .switch[aria-pressed="true"]{width:var(--kl-feld-h);padding:0}
  .switch[aria-pressed="true"] .switch-text{display:inline;max-width:none}
}
@media screen and (max-width:600px){
  .topbar-in{gap:8px;padding:12px 16px 10px}
  .topbar-in::after{left:16px;right:16px}
}
@media screen and (max-width:560px){
  .topbar .topbar-mitte{gap:6px}
  .topbar .kopf-titel{margin-right:calc(var(--kl-feld-h) + 6px)}
  .topbar .topbar-mitte .kat-wrap{order:0;flex:0 0 var(--kl-feld-h);width:var(--kl-feld-h);margin:0}
  .topbar .topbar-mitte .kat-wrap .kat{color:transparent;padding:0!important;text-indent:-999px;cursor:pointer}
  .topbar .kat-pfeil{display:none}
  .topbar .topbar-mitte .kat-wrap::after{content:"";position:absolute;inset:0;margin:auto;pointer-events:none;
    width:calc(var(--mk-sym-h) / .72);height:calc(var(--mk-sym-h) / .72);background:var(--text-soft);opacity:.9;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18l-7 8v6l-4 2v-8z'/%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='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18l-7 8v6l-4 2v-8z'/%3E%3C/svg%3E") center/contain no-repeat}
  .topbar .topbar-mitte.rubrik-aktiv .kat-wrap::after{background:var(--violet)}
  .topbar-mitte.such-offen .search-wrap{width:100%}
  .topbar-mitte.such-offen .search{padding:0 calc(var(--kl-feld-h) + 2px) 0 32px!important}
  .topbar-mitte.such-offen .kopf-titel,.topbar-mitte.such-offen .kat-wrap{opacity:0;visibility:hidden}
  .switch[aria-pressed="false"]{width:var(--kl-feld-h);padding:0;color:var(--text-soft)}
  .switch[aria-pressed="false"] .led,.switch[aria-pressed="false"] .switch-text{display:none}
  /* Abgemeldet: Personen-Zeichen wie in den Tools (06.10.2026) */
  .switch[aria-pressed="false"]::before{content:"";display:block;flex:none;width:calc(var(--mk-sym-h) / .86);height:calc(var(--mk-sym-h) / .86);
    background:currentColor;opacity:.9;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%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='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E") center/contain no-repeat}
}
/* Handy ohne Rubrik-Filter (06.10.2026, Robin): in der Leiste nur G-Logo, Titel, Lupe und Konto.
   Kein Platzhalter – der Titel rückt nach, das Skript „Kopfleiste“ setzt ihn wieder mittig zur Seite. */
@media screen and (max-width:560px){.topbar .topbar-mitte .kat-wrap{display:none}}
@media(prefers-reduced-transparency:reduce){.topbar{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}}
/* Druck: Titel steht im Kopfbereich (.hero-h1, bei Mitarbeitern „G-Tools Public.“) - nicht doppelt neben dem Zeichen */
@media print{.kopf-titel,.brand-name{display:none!important}}
/* ── Hinweis „Neu im Changelog Public.“ (09.10.2026, Robin; vorher „Neu in G-Tools“) ──
   Wie auf /mk/: Karte über den Rubriken, zeigt freigegebene Einträge aus dem
   öffentlichen Änderungsprotokoll (/changelog/, Daten: /auth/changelog-public.php),
   die dieser Browser noch nicht gesehen hat. Gelesen-Stand nur im Browser
   (localStorage „g-changelog-gelesen“), kein Konto, keine Nutzung. Beim allerersten
   Besuch wird still alles Bisherige als gelesen gemerkt – die Karte erscheint erst
   für später freigegebene Einträge. X oder Besuch von /changelog/ = gelesen.
   Bei aktiver Suche und im Druck ausgeblendet. */
.cl-wrap{margin-top:6px;margin-bottom:14px}
.cl-wrap[hidden]{display:none}
.cl-box{position:relative;border:1px solid var(--border-2);border-radius:18px;background:var(--surface);
  padding:14px 52px 12px 16px}
@media(prefers-reduced-motion:no-preference){.cl-box{animation:cl-ein .25s ease-out}}
@keyframes cl-ein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.cl-kopf{margin:0;font-size:.95rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.cl-x{position:absolute;top:6px;right:6px;width:38px;height:38px;border:0;border-radius:var(--pill);
  background:transparent;color:var(--text-mute);cursor:pointer;font:inherit;font-size:22px;line-height:1}
.cl-x:hover{background:var(--surface-2);color:var(--text)}
.cl-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cl-liste{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.cl-zeile{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cl-art{font-size:.64rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1;
  padding:3px 7px;border-radius:var(--pill);border:1px solid var(--border-2);color:var(--text-soft)}
.cl-art.neu{background:var(--accent-dim);border-color:var(--accent);color:var(--text)}
.cl-titel{font-weight:600;font-size:.9rem;line-height:1.3;overflow-wrap:anywhere;color:var(--text);text-decoration:none}
a.cl-titel:hover{text-decoration:underline}
.cl-dat{font-size:.74rem;color:var(--text-dim)}
.cl-txt{margin:2px 0 0;font-size:.8rem;line-height:1.4;color:var(--text-mute);overflow-wrap:anywhere}
.cl-fuss{margin-top:10px;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.78rem;color:var(--text-dim)}
.cl-fuss a{color:var(--text-soft);font-weight:600;text-decoration:none}
.cl-fuss a:hover{color:var(--text);text-decoration:underline}
.cl-fuss a:focus-visible,a.cl-titel:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
body.filter-aktiv .cl-wrap{display:none}
@media(max-width:560px){.cl-box{padding:12px 46px 10px 13px}.cl-x{top:4px;right:4px}.neu-rest{display:none}}
/* Karte wie „Neu im Changelog Kanzlei.“ (14.10.2026, cl-1410): voller Text mit Absätzen/Listen/fett
   und Vorschaubilder mit Großansicht (Stile wie /libs/mk-start.css). */
.cl-txt p{margin:0 0 .45em}
.cl-txt p:last-child,.cl-txt ul:last-child{margin-bottom:0}
.cl-txt ul{margin:0 0 .45em;padding:0 0 0 1.1em;list-style:disc}
.cl-txt li{margin:0 0 .15em}
.cl-txt strong{font-weight:700;color:var(--text-soft)}
.cl-bilder{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.cl-bild{padding:0;margin:0;border:1px solid var(--border-2);border-radius:10px;overflow:hidden;background:var(--surface-2);
  cursor:zoom-in;line-height:0;max-width:100%;transition:border-color .15s,transform .15s}
.cl-bild:hover{border-color:var(--accent)}
.cl-bild:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cl-bild img{display:block;height:92px;width:auto;max-width:100%;object-fit:cover}
@media(max-width:560px){.cl-bild img{height:72px}}
.cl-lb{position:fixed;inset:0;z-index:3000;display:none;align-items:center;justify-content:center;
  padding:56px 64px;background:rgba(4,4,10,.88);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.cl-lb.open{display:flex}
.cl-lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.cl-lb button{position:absolute;width:44px;height:44px;margin:0;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:var(--pill);
  background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:24px;line-height:1;cursor:pointer}
.cl-lb button:hover{background:rgba(255,255,255,.18)}
.cl-lb button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cl-lb-zu{top:10px;right:10px}
.cl-lb-zur{left:10px;top:50%;transform:translateY(-50%)}
.cl-lb-vor{right:10px;top:50%;transform:translateY(-50%)}
.cl-lb-zahl{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:rgba(255,255,255,.85);font-size:.82rem;pointer-events:none}
.cl-lb button[hidden],.cl-lb-zahl[hidden]{display:none}
@media(max-width:560px){.cl-lb{padding:60px 8px 66px}.cl-lb-zur,.cl-lb-vor{top:auto;bottom:10px;transform:none}.cl-lb-zahl{bottom:22px}}
@media print{.cl-lb{display:none!important}}
@media print{.cl-wrap{display:none!important}}
/* dep-helferlein-2310 (Robin 14:52): Web-App-Kacheln zeigen klein, dass es die App gibt (TestFlight / Google Play) */
/* 14:57: Beschreibung dieser Kacheln nur 1 Zeile (statt Mindesthoehe 2 Zeilen), dafuer etwas groessere Knoepfe – Kachel nicht hoeher als vorher */
.card-text:has(.app-mini) .card-desc{display:block!important;min-height:0!important;-webkit-line-clamp:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-mini{display:flex;flex-wrap:nowrap;gap:6px;margin-top:5px;align-items:center}
/* 15:27: wie Store-Abzeichen (Vorbild portfolio-performance.info): schwarz, Symbol + zweizeilige Schrift; Google Play = offizielles Abzeichen */
.app-mini .am-k{display:inline-flex;align-items:center;box-sizing:border-box;height:24px;border-radius:5px;cursor:pointer;flex:none;line-height:1}
.app-mini .am-tf,.app-mini .am-apk{gap:4px;padding:0 7px 0 4px;background:#000;color:#fff;border:1px solid #a6a6a6}
/* onside-1011: Onside-Badge ohne Icon */
.app-mini .am-os{gap:4px;padding:0 7px 0 4px;background:#000;color:#fff;border:1px solid #a6a6a6;justify-content:center}
.am-os{gap:4px;padding:0 7px 0 4px;background:#000;color:#fff;border:1px solid #a6a6a6;justify-content:center}
.app-mini .am-tf .am-tfi{width:16px;height:16px;flex:none}
.app-mini .am-apk .am-apki{width:16px;height:16px;flex:none}
.app-mini .am-t{display:flex;flex-direction:column;align-items:flex-start;font:600 11px/1 var(--font,inherit);letter-spacing:-.01em;white-space:nowrap}
.app-mini .am-t small{font-size:6.5px;font-weight:500;letter-spacing:.01em;margin-bottom:1px;opacity:.95}
.app-mini .am-gp{padding:0;background:none;border:0}
.app-mini .am-gp img{display:block;height:24px;width:auto;border-radius:5px}
.app-mini .am-k:hover,.app-mini .am-k:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent,#888)}
#sec-schnell .app-mini{display:none}
@media print{.app-mini{display:none}}


@media screen{
  a.card.karte-admin{border-color:#3b82f6!important}
  a.card.karte-admin:hover,a.card.karte-admin:focus-visible{border-color:#60a5fa!important}
}
@media screen and (prefers-color-scheme:light){
  a.card.karte-admin{border-color:#2563eb!important}
  a.card.karte-admin:hover,a.card.karte-admin:focus-visible{border-color:#1d4ed8!important}
}
/* fire-suchabstand-2110 (Robin 21.10.2026): kleiner Abstand zwischen Lupe und Cursor/Text im Suchfeld, auch beim Tippen.
   text-indent statt Leerzeichen; phPasst/noetig rechnen ihn mit ein. ID-Selektor: schlaegt alle .search-Polster. */
#q.search{text-indent:.3em}


/* Apps by G fuer alle sichtbar, Klick erfordert Anmeldung (13.10.2026, Robin). G-Tools-App: eigene Umrandung (Kanzlei-Akzent). */
@media screen{
  a.card.karte-gapp{border-color:rgba(168,85,247,.85)!important;box-shadow:0 0 0 1px rgba(168,85,247,.35) inset}
  a.card.karte-gapp:hover,a.card.karte-gapp:focus-visible{border-color:#a855f7!important}
}
.ap-hinweis{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);padding:20px}
.ap-hinweis-box{max-width:380px;width:100%;background:var(--dialog-bg,#14141f);color:var(--text,#eee);border:1px solid var(--border-2,rgba(255,255,255,.18));border-radius:16px;padding:22px 22px 18px;box-shadow:0 20px 60px rgba(0,0,0,.5);font:inherit}
.ap-hinweis-box h2{margin:0 0 8px;font-size:1.1rem}
.ap-hinweis-box p{margin:0 0 18px;line-height:1.5;color:var(--text-dim,#bbb);font-size:.92rem}
.ap-hinweis-box button{float:right;font:inherit;font-weight:600;padding:8px 22px;border-radius:999px;border:1px solid var(--border-2,#555);background:var(--surface-2,#222);color:inherit;cursor:pointer}
.ap-hinweis-box button:hover{border-color:var(--accent,#a855f7)}
.tf-schritte{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
.tf-schritt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--border-2,rgba(255,255,255,.18));border-radius:12px;background:var(--surface-2,rgba(255,255,255,.04));color:inherit;text-decoration:none;font-weight:600;font-size:.95rem}
.tf-schritt:hover{border-color:var(--accent,#a855f7)}
.tf-schritt .tf-pfeil{color:var(--text-dim,#bbb);font-weight:400}
.ap-hinweis-box .tf-kurz{margin:0 0 14px;font-size:.85rem}
.ap-hinweis-box::after{content:"";display:block;clear:both}


/* Channelfox TV-Testversionen, 25.10.2026: eigene Downloadzeile. */
:is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests .tv-install-hint{flex:0 0 100%;font-size:10px;line-height:1.4;color:var(--text-mute);white-space:normal;margin-top:3px}
:is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests .tf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;max-width:100%;margin-right:0}
:is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests .tv-downloads{display:contents}

:is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests .tf-knopf.sb{display:flex;justify-content:center;align-items:center;width:100%;min-width:0;height:32px;margin:0;padding:0 2px;gap:2px;border:1px solid #a6a6a6;border-radius:6px;background:#000;box-sizing:border-box}
:is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests .tf-knopf.sb .sb-ic{width:10px;height:10px;flex:0 0 10px}
:is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests .tf-knopf.sb .sb-t{font-size:9.5px;letter-spacing:-.02em}
:is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests .tf-knopf.sb .sb-t small{font-size:6px;letter-spacing:0}
:is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests .tf-knopf.sb-img{padding:2px}
:is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests .tf-knopf.sb-img img{display:block;width:100%;height:100%;object-fit:contain;border-radius:4px}
:is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests .tv-install-hint{grid-column:1/-1}
:is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests:hover .tf-knopf.sb{border:1px solid var(--accent)}


/* Eigene Plattform-Symbole für direkte TV-Testdownloads. */
:is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests .tf-knopf.sb .tv-platform-icon{width:14px;height:14px;flex:0 0 14px}
:is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests .tv-dual-label{font-size:8.5px;line-height:1.04}


/* Einheitliche Store-Banner: Channelfox als Hoehenreferenz (32px). */
@media screen {
  :is(#sec-apps,#sec-dokumente) .tf-knopf.sb { height:32px; min-height:32px; box-sizing:border-box; }
  :is(#sec-apps,#sec-dokumente) .tf-knopf.sb-img { padding:0; display:inline-flex; align-items:center; }
  :is(#sec-apps,#sec-dokumente) .tf-knopf.sb-img img { display:block; height:32px; width:auto; max-width:100%; object-fit:contain; }
  :is(#sec-apps,#sec-dokumente) .card-tf3 .tf-knopf.sb-img img { height:32px; width:auto; }
  :is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests .tf-knopf.sb-img { padding:0; }
  :is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests .tf-knopf.sb-img img { height:100%; width:100%; object-fit:contain; }
}


/* Store- und Download-Badges: einheitliche Aussenmasse 69 x 32 px. */
@media screen {
  :is(#sec-apps,#sec-dokumente) .tf-knopf.sb,
  :is(#sec-apps,#sec-dokumente) .card-tf3 .tf-knopf.sb,
  :is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests .tf-knopf.sb,
  :is(#sec-apps,#sec-dokumente) .app-mini .am-k {
    width:69px !important; min-width:69px !important; max-width:69px !important;
    height:32px !important; min-height:32px !important; max-height:32px !important;
    flex:0 0 69px !important; box-sizing:border-box !important;
    padding:0 3px !important; gap:2px !important;
    justify-content:center; align-items:center;
  }
  :is(#sec-apps,#sec-dokumente) .tf-knopf.sb .sb-t {font-size:7.5px !important;line-height:1.05;letter-spacing:-.15px}
  :is(#sec-apps,#sec-dokumente) .tf-knopf.sb .sb-t small {font-size:5.6px !important;line-height:1.05}
  :is(#sec-apps,#sec-dokumente) .tf-knopf.sb .sb-ic {width:11px !important;height:11px !important;flex:0 0 11px !important}
  :is(#sec-apps,#sec-dokumente) .tf-knopf.sb-img {padding:0 !important;overflow:hidden}
  :is(#sec-apps,#sec-dokumente) .tf-knopf.sb-img img,
  :is(#sec-apps,#sec-dokumente) .card-tf3 .tf-knopf.sb-img img,
  :is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests .tf-knopf.sb-img img,
  :is(#sec-apps,#sec-dokumente) .app-mini .am-gp img {
    display:block;width:100% !important;height:100% !important;
    max-width:100% !important;max-height:100% !important;
    object-fit:fill;border-radius:5px;
  }
  :is(#sec-apps,#sec-dokumente) .card-tf3 .tf {margin-right:0;max-width:100%;gap:5px;flex-wrap:wrap}
  :is(#sec-apps,#sec-dokumente) .card-tf2 .tf {flex-wrap:wrap}
  :is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests .tf {grid-template-columns:repeat(3,69px);gap:6px;justify-content:start}
  :is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests .tf-knopf.sb .tv-platform-icon {width:10px;height:10px;flex:0 0 10px}
  :is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests .tv-dual-label {font-size:6.6px;line-height:1.02}
  :is(#sec-apps,#sec-dokumente) .app-mini {flex-wrap:wrap}
  :is(#sec-apps,#sec-dokumente) .app-mini .am-k {font-size:7.5px !important;overflow:hidden}
  :is(#sec-apps,#sec-dokumente) .app-mini .am-gp {padding:0 !important}
}


/* Alle App-Badges auf der gesamten Startseite, auch ausserhalb von :is(#sec-apps,#sec-dokumente). */
@media screen {
  .app-mini {display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
  .app-mini .am-k {display:inline-flex !important;align-items:center;justify-content:center;
    width:69px !important;min-width:69px !important;max-width:69px !important;
    height:32px !important;min-height:32px !important;max-height:32px !important;
    flex:0 0 69px !important;box-sizing:border-box !important;overflow:hidden;}
  .app-mini .am-tf,.app-mini .am-os,.app-mini .am-apk {padding:0 3px !important;gap:2px !important;}
  .app-mini .am-tf .am-tfi,.app-mini .am-apk .am-apki {width:11px !important;height:11px !important;flex:0 0 11px !important;}
  .app-mini .am-t {font-size:8px !important;line-height:1.04 !important;letter-spacing:-.15px;}
  .app-mini .am-t small {font-size:5.5px !important;line-height:1.04 !important;margin-bottom:1px;}
  .app-mini .am-gp {padding:0 !important;background:#000 !important;}
  .app-mini .am-gp img {display:block;width:69px !important;height:32px !important;max-width:69px !important;
    max-height:32px !important;object-fit:fill;border-radius:5px;}
}


/* Serverfach: alle drei Store-Badges wie Channelfox in einer Reihe. */
@media screen {
  :is(#sec-apps,#sec-dokumente) .card-tf3:not(.card-tv-tests) .tf {
    display:grid !important;
    grid-template-columns:repeat(3,69px) !important;
    grid-auto-flow:column !important;
    gap:5px !important;
    width:max-content !important;
    max-width:100% !important;
    margin-right:0 !important;
    flex-wrap:nowrap !important;
    justify-self:start !important;
  }
  :is(#sec-apps,#sec-dokumente) .card-tf3:not(.card-tv-tests) .tf-knopf.sb {
    width:69px !important; min-width:69px !important; max-width:69px !important;
    height:32px !important; min-height:32px !important;
    box-sizing:border-box !important;
  }
}


/* Kategorie- und Status-Badges neben Kartentiteln ausblenden; Store-Badges bleiben sichtbar. */
@media screen {
  #tools .card-kopf .card-meta { display:none !important; }
}


/* Channelfox: drei feste Spalten, weitere Plattformen nur nach unten aufklappen. */
@media screen {
 :is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests .tf {
   display:grid !important;
   grid-template-columns:repeat(3,69px) !important;
   gap:6px !important;
   width:219px !important;
   max-width:100% !important;
   justify-content:start !important;
   align-content:start !important;
   overflow:visible !important;
 }
 :is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests .cf-more-toggle {
   display:flex;align-items:center;justify-content:center;gap:3px;
   width:69px;height:32px;box-sizing:border-box;
   background:#1b1d25;color:white;border:1px solid #535968;border-radius:6px;
   font-size:15px;font-weight:750;cursor:pointer;user-select:none;
 }
 :is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests .cf-more-toggle:hover,
 :is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests .cf-more-toggle:focus-visible {outline:2px solid var(--accent,#8b82fa);outline-offset:1px}
 :is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests .cf-more-toggle span {font-size:12px}
 :is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests .tv-downloads {display:none !important}
 :is(#sec-apps,#sec-alltag,#sec-dokumente) .card-tv-tests.cf-expanded .tv-downloads {display:contents !important}
}


/* Einheitliche Kartenhoehe in allen normalen Tool-Rubriken.
   Die vier Spalten bleiben gleich breit; Badges bleiben 69 x 32 px.
   Ausklappbare App-Karten duerfen bei Bedarf nach unten wachsen. */
@media screen {
  #tools .toolsec:not(#sec-schnell) > .grid {
    grid-auto-rows:minmax(108px, auto);
    align-items:stretch;
  }
  #tools .toolsec:not(#sec-schnell) > .grid > .card {
    box-sizing:border-box;
    min-height:108px;
    height:100%;
  }
  /* Eine geoeffnete Channelfox-Kachel vergroessert nur ihre eigene Reihe. */
  #tools :is(#sec-apps,#sec-dokumente) .grid { grid-auto-rows:minmax(108px,auto); }
}
@media screen and (max-width:560px) {
  #tools .toolsec:not(#sec-schnell) > .grid > .card { min-height:108px; }
}


/* Tool-Kacheln wie die kompakte Linksammlung: fuenf Spalten auf Desktop.
   Download-Badges bleiben 69x32px und werden nicht abgeschnitten. */
@media screen and (min-width:1181px) {
  #tools .toolsec:not(#sec-schnell) > .grid {
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:9px;
    grid-auto-rows:minmax(80px,auto);
    align-items:stretch;
  }
  #tools .toolsec:not(#sec-schnell) > .grid > .card {
    min-height:80px;
    height:100%;
    padding:9px 10px;
    gap:3px;
    border-radius:15px;
  }
  #tools .toolsec:not(#sec-schnell) .card-body {gap:8px}
  #tools .toolsec:not(#sec-schnell) .card-icon {width:34px;height:34px;flex:0 0 34px}
  #tools .toolsec:not(#sec-schnell) .card-title {font-size:.82rem;line-height:1.2}
  #tools .toolsec:not(#sec-schnell) .card-desc {display:none}
  #tools .toolsec:not(#sec-schnell) .card-tf2 .tf {margin-top:3px}
  #tools :is(#sec-apps,#sec-dokumente) .grid {grid-auto-rows:minmax(80px,auto)}
}
@media screen and (min-width:821px) and (max-width:1180px) {
  #tools .toolsec:not(#sec-schnell) > .grid {grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(86px,auto)}
  #tools .toolsec:not(#sec-schnell) > .grid > .card {min-height:86px;padding:10px 11px;gap:5px}
}
@media screen and (max-width:820px) {
  #tools .toolsec:not(#sec-schnell) > .grid > .card {min-height:86px}
}


/* Public G-Tools: Tool-Rubriken haben dieselben Grid- und Kachelmasse wie Schnellzugriff. */
@media screen {
  #tools .toolsec:not(#sec-schnell) > .grid,
  #tools :is(#sec-apps,#sec-dokumente) .grid {
    grid-template-columns:repeat(auto-fill,minmax(205px,1fr)) !important;
    grid-auto-rows:62px !important;
    gap:8px !important;
    align-items:stretch;
  }
  #tools .toolsec:not(#sec-schnell) > .grid > .card {
    box-sizing:border-box !important;
    height:62px !important;
    min-height:62px !important;
    max-height:62px !important;
    padding:9px 11px !important;
    border-radius:14px !important;
    gap:0 !important;
    overflow:hidden;
    position:relative;
  }
  #tools .toolsec:not(#sec-schnell) .card-body {gap:9px !important;align-items:center;min-width:0}
  #tools .toolsec:not(#sec-schnell) .card-icon {width:34px !important;height:34px !important;flex:0 0 34px !important}
  #tools .toolsec:not(#sec-schnell) .card-title {font-size:.84rem !important;line-height:1.25 !important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  #tools .toolsec:not(#sec-schnell) .card-desc {display:none !important}
  /* Download-Buttons bleiben 69x32 und liegen innerhalb der 62px-Kachel. */
  #tools .toolsec:not(#sec-schnell) .card-tf2 .card-body {align-items:flex-start}
  #tools .toolsec:not(#sec-schnell) .card-tf2 .card-icon {width:28px !important;height:28px !important;flex-basis:28px !important}
  #tools .toolsec:not(#sec-schnell) .card-tf2 .card-text {display:block !important;min-width:0}
  #tools .toolsec:not(#sec-schnell) .card-tf2 .card-title {font-size:.78rem !important;white-space:nowrap;display:block;text-overflow:ellipsis;overflow:hidden}
  #tools .toolsec:not(#sec-schnell) .card-tf2 .tf {position:absolute !important;bottom:3px;right:8px;left:auto;display:flex !important;gap:5px !important;margin:0 !important;flex-wrap:nowrap !important;max-width:calc(100% - 43px);overflow:hidden;align-self:auto;justify-self:auto}
  #tools .toolsec:not(#sec-schnell) .card-tf2 .tf .tf-knopf {flex:0 0 69px;width:69px;height:32px}
  /* Aufgeklappte Channelfox-Downloads benoetigen bewusst mehr Hoehe. */
  #tools :is(#sec-apps,#sec-alltag,#sec-dokumente) .grid > .card.card-tv-tests.cf-expanded {height:auto !important;min-height:62px !important;max-height:none !important;overflow:visible}
}
@media screen and (max-width:560px) {
  #tools .toolsec:not(#sec-schnell) > .grid,
  #tools :is(#sec-apps,#sec-dokumente) .grid {grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  #tools .toolsec:not(#sec-schnell) > .grid > .card {padding:8px 9px !important}
  #tools .toolsec:not(#sec-schnell) .card-icon {width:30px !important;height:30px !important;flex-basis:30px !important}
}


@media screen {
 #tools section.toolsec .grid > a.card.has-download-menu {position:relative!important;overflow:hidden!important;padding-right:49px!important}
 #tools section.toolsec .grid > a.card.has-download-menu .tf,
 #tools section.toolsec .grid > a.card.has-download-menu .app-mini,
 #tools section.toolsec .grid > a.card.has-download-menu .card-tv-tests,
 #tools section.toolsec .grid > a.card.has-download-menu .cf-more-toggle {display:none!important}
 #tools section.toolsec .grid > a.card.has-download-menu .card-body {align-items:center!important;gap:9px!important}
 #tools section.toolsec .grid > a.card.has-download-menu .card-text {min-width:0!important;display:block!important}
 #tools section.toolsec .grid > a.card.has-download-menu .card-title {white-space:normal!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;font-size:.84rem!important}
 .gt-download-trigger {position:absolute;right:8px;top:50%;transform:translateY(-50%);width:33px;height:33px;border-radius:10px;border:1px solid var(--border,rgba(130,140,160,.3));background:var(--surface,rgba(150,160,175,.12));color:inherit;display:grid;place-items:center;cursor:pointer;z-index:4;box-shadow:0 1px 3px #0001}
 .gt-download-trigger:hover,.gt-download-trigger[aria-expanded="true"] {background:rgba(110,135,180,.2)}
 .gt-download-trigger svg {width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
 #gt-download-popover {position:fixed;z-index:999999;width:max-content;max-width:min(340px,calc(100vw - 20px));padding:12px;border-radius:14px;border:1px solid rgba(130,140,160,.3);background:var(--card-bg,var(--surface,#f6f6f9));color:var(--text,#1b1b23);box-shadow:0 12px 35px #0003;box-sizing:border-box}
 #gt-download-popover[hidden] {display:none!important}
 #gt-download-popover .gt-pop-title {font-size:13px;font-weight:700;margin-bottom:9px;padding-right:22px}
 #gt-download-popover .gt-pop-close {position:absolute;right:7px;top:6px;border:0;background:transparent;color:inherit;cursor:pointer;font-size:20px;line-height:1;padding:3px 7px}
 #gt-download-popover .gt-pop-items {display:flex;flex-wrap:wrap;gap:7px;max-width:300px}
 #gt-download-popover .gt-pop-item {border:0;background:transparent;padding:0;cursor:pointer;color:inherit;display:flex;align-items:center;justify-content:center;min-width:69px;min-height:32px;border-radius:6px}
 #gt-download-popover .gt-pop-item:hover {outline:2px solid #6d86ca;outline-offset:2px}
 #gt-download-popover .gt-pop-item .tf-knopf,#gt-download-popover .gt-pop-item .am-k {pointer-events:none!important;display:flex!important;visibility:visible!important;opacity:1!important}
 #gt-download-popover .gt-pop-item .tf-knopf {width:69px!important;height:32px!important;max-width:69px!important;flex:0 0 69px!important}
 #gt-download-popover .gt-pop-item .tf-knopf img {max-width:100%!important;max-height:100%!important;object-fit:contain!important}
 #gt-download-popover .gt-pop-item .am-k {width:69px!important;height:32px!important}
 #gt-download-popover .gt-pop-item .am-k img {max-width:69px!important;max-height:32px!important;object-fit:contain!important}
}


/* channelfox-alltag-0511: kompakte Download-Karte wie zuvor in Erweiterungen & TV, nur fuer Channelfox in Alltag. */
#sec-alltag .grid > a.card.card-tv-tests.has-download-menu {height:62px!important;min-height:62px!important;max-height:62px!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;overflow:hidden!important;padding:7px 49px 7px 10px!important;isolation:isolate!important}
#sec-alltag .grid > a.card.card-tv-tests.has-download-menu .card-body {display:flex!important;align-items:center!important;position:static!important;min-width:0!important;width:100%!important;height:auto!important;margin:0!important;padding:0!important;gap:9px!important;transform:none!important}
#sec-alltag .grid > a.card.card-tv-tests.has-download-menu .card-icon {position:static!important;flex:0 0 35px!important;margin:0!important;transform:none!important}
#sec-alltag .grid > a.card.card-tv-tests.has-download-menu .card-text {position:static!important;flex:1 1 auto!important;min-width:0!important;max-width:100%!important;width:auto!important;margin:0!important;padding:0!important;transform:none!important;overflow:hidden!important}
#sec-alltag .grid > a.card.card-tv-tests.has-download-menu .card-kopf {display:block!important;position:static!important;margin:0!important;padding:0!important;min-width:0!important}
#sec-alltag .grid > a.card.card-tv-tests.has-download-menu .card-title {position:static!important;display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;max-width:100%!important;margin:0!important;padding:0!important;line-height:1.3!important;font-size:13px!important;transform:none!important}
#sec-alltag .grid > a.card.card-tv-tests.has-download-menu .card-desc,
#sec-alltag .grid > a.card.card-tv-tests.has-download-menu .tf,
#sec-alltag .grid > a.card.card-tv-tests.has-download-menu .app-mini,
#sec-alltag .grid > a.card.card-tv-tests.has-download-menu .tv-downloads,
#sec-alltag .grid > a.card.card-tv-tests.has-download-menu .tf-knopf,
#sec-alltag .grid > a.card.card-tv-tests.has-download-menu .am-k,
#sec-alltag .grid > a.card.card-tv-tests.has-download-menu .cf-more-toggle,
#sec-alltag .grid > a.card.card-tv-tests.has-download-menu .card-go {display:none!important;visibility:hidden!important}
#sec-alltag .grid > a.card.card-tv-tests.has-download-menu .gt-download-trigger {position:absolute!important;top:50%!important;right:8px!important;left:auto!important;transform:translateY(-50%)!important;width:33px!important;height:33px!important;min-width:33px!important;display:grid!important;place-items:center!important;z-index:20!important}
@media(max-width:560px){#sec-alltag .grid > a.card.card-tv-tests.has-download-menu{padding-right:49px!important}}


/* Kompakte App-Karten: nur Name/Icon plus Download-Auswahl. */
:is(#sec-apps,#sec-dokumente) .grid > a.card.has-download-menu {height:62px!important;min-height:62px!important;max-height:62px!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;overflow:hidden!important;padding:7px 49px 7px 10px!important}
:is(#sec-apps,#sec-dokumente) .grid > a.card.has-download-menu .card-body {display:flex!important;align-items:center!important;position:static!important;min-width:0!important;width:100%!important;height:auto!important;margin:0!important;padding:0!important;gap:9px!important;transform:none!important}
:is(#sec-apps,#sec-dokumente) .grid > a.card.has-download-menu .card-icon {position:static!important;flex:0 0 35px!important;margin:0!important;transform:none!important}
:is(#sec-apps,#sec-dokumente) .grid > a.card.has-download-menu .card-text {position:static!important;flex:1 1 auto!important;min-width:0!important;max-width:100%!important;width:auto!important;margin:0!important;padding:0!important;transform:none!important;overflow:hidden!important}
:is(#sec-apps,#sec-dokumente) .grid > a.card.has-download-menu .card-kopf {display:block!important;position:static!important;margin:0!important;padding:0!important;min-width:0!important}
:is(#sec-apps,#sec-dokumente) .grid > a.card.has-download-menu .card-title {position:static!important;display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;max-width:100%!important;margin:0!important;padding:0!important;line-height:1.3!important;font-size:13px!important;transform:none!important}
:is(#sec-apps,#sec-dokumente) .grid > a.card.has-download-menu .card-desc,
:is(#sec-apps,#sec-dokumente) .grid > a.card.has-download-menu .tf,
:is(#sec-apps,#sec-dokumente) .grid > a.card.has-download-menu .app-mini,
:is(#sec-apps,#sec-dokumente) .grid > a.card.has-download-menu .card-go {display:none!important}
:is(#sec-apps,#sec-dokumente) .grid > a.card.has-download-menu .gt-download-trigger {position:absolute!important;top:50%!important;right:8px!important;left:auto!important;transform:translateY(-50%)!important;width:33px!important;height:33px!important;min-width:33px!important;display:grid!important;place-items:center!important;z-index:20!important}
#gt-download-popover .gt-pop-items {display:grid!important;grid-template-columns:repeat(3,69px)!important;gap:7px!important;max-width:none!important}
#gt-download-popover .gt-pop-item {width:69px!important;height:32px!important;min-width:69px!important;min-height:32px!important;overflow:hidden!important}
#gt-download-popover .gt-pop-item .tf-knopf, #gt-download-popover .gt-pop-item .am-k {box-sizing:border-box!important;width:69px!important;height:32px!important;min-width:69px!important;max-width:69px!important;min-height:32px!important;max-height:32px!important;overflow:hidden!important}
@media(max-width:560px){:is(#sec-apps,#sec-dokumente) .grid > a.card.has-download-menu{padding-right:49px!important}}


/* Prevent legacy badge positioning from escaping compact app cards. */
:is(#sec-apps,#sec-dokumente) a.card.has-download-menu .tf,
:is(#sec-apps,#sec-dokumente) a.card.has-download-menu .app-mini,
:is(#sec-apps,#sec-dokumente) a.card.has-download-menu .tv-downloads,
:is(#sec-apps,#sec-dokumente) a.card.has-download-menu .tf-knopf,
:is(#sec-apps,#sec-dokumente) a.card.has-download-menu .am-k,
:is(#sec-apps,#sec-alltag,#sec-dokumente) a.card.has-download-menu .cf-more-toggle,
:is(#sec-apps,#sec-dokumente) a.card.has-download-menu .card-tf3,
:is(#sec-apps,#sec-dokumente) a.card.has-download-menu .card-tf2 {display:none!important;visibility:hidden!important}
:is(#sec-apps,#sec-dokumente) a.card.has-download-menu {isolation:isolate!important;overflow:hidden!important}
#gt-download-popover {width:247px!important;max-width:calc(100vw - 20px)!important;overflow:hidden!important}
#gt-download-popover .gt-pop-items {grid-template-columns:repeat(3,69px)!important;gap:5px!important}
#gt-download-popover .gt-pop-item,
#gt-download-popover .gt-pop-item .tf-knopf,
#gt-download-popover .gt-pop-item .am-k {position:static!important;inset:auto!important;transform:none!important;float:none!important;margin:0!important;display:flex!important;visibility:visible!important;opacity:1!important;overflow:hidden!important}
#gt-download-popover .gt-pop-item .tf-knopf img,
#gt-download-popover .gt-pop-item .am-k img {width:100%!important;height:100%!important;object-fit:contain!important}


/* Vollstaendig deckendes Menue: keine durchscheinenden Karten oder Texte. */
#gt-download-popover {
  background:#ffffff !important;
  background-image:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  color:#151923 !important;
  border:1px solid #c8ceda !important;
  box-shadow:0 16px 45px rgba(18,25,45,.30) !important;
  isolation:isolate !important;
  opacity:1 !important;
  width:247px !important;
  min-height:96px !important;
  padding:13px !important;
}
#gt-download-popover::before,#gt-download-popover::after {content:none !important;display:none !important}
#gt-download-popover .gt-pop-title {color:#151923 !important;font-size:13px !important;line-height:1.35 !important;margin:0 22px 12px 0 !important;position:relative !important;z-index:1 !important}
#gt-download-popover .gt-pop-close {color:#293042 !important;background:#edf0f5 !important;border-radius:6px !important;z-index:2 !important}
#gt-download-popover .gt-pop-items {position:relative !important;z-index:1 !important;display:grid !important;grid-template-columns:repeat(3,69px) !important;gap:5px !important;align-items:start !important}
#gt-download-popover .gt-pop-item {position:relative !important;width:69px !important;height:32px !important;min-width:69px !important;min-height:32px !important;padding:0 !important;margin:0 !important;overflow:hidden !important;background:transparent !important;box-shadow:none !important;opacity:1 !important}
#gt-download-popover .gt-pop-item > * {position:static !important;inset:auto !important;transform:none !important;margin:0 !important;opacity:1 !important;visibility:visible !important;max-width:69px !important;max-height:32px !important}
#gt-download-popover .gt-pop-item img {display:block !important;width:69px !important;height:32px !important;max-width:69px !important;max-height:32px !important;object-fit:contain !important;opacity:1 !important}
@media(prefers-color-scheme:dark){#gt-download-popover{background:#171c27 !important;color:#f7f8fb !important;border-color:#566074 !important}#gt-download-popover .gt-pop-title{color:#f7f8fb !important}#gt-download-popover .gt-pop-close{color:#f7f8fb !important;background:#343c4c !important}}


/* Render downloads independently of the source card's positioning styles. */
#gt-download-popover .gt-pop-item .gt-rendered-badge{box-sizing:border-box!important;position:relative!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:1px!important;width:69px!important;height:32px!important;min-width:69px!important;min-height:32px!important;max-width:69px!important;max-height:32px!important;padding:2px 3px!important;border:1px solid #3c3c3c!important;border-radius:5px!important;background:#050505!important;color:#fff!important;overflow:hidden!important;white-space:nowrap!important;line-height:1!important;text-align:center!important;transform:none!important;inset:auto!important;float:none!important;opacity:1!important;visibility:visible!important}
#gt-download-popover .gt-pop-item .gt-rendered-badge small{display:block!important;font-size:6px!important;font-weight:500!important;color:#fff!important;line-height:1!important;margin:0!important;padding:0!important}
#gt-download-popover .gt-pop-item .gt-rendered-badge strong{display:block!important;font-size:10px!important;font-weight:750!important;color:#fff!important;line-height:1.1!important;margin:0!important;padding:0!important}
#gt-download-popover .gt-pop-item .gt-rendered-badge .gt-badge-image{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;margin:0!important;padding:0!important;position:static!important;transform:none!important}


/* onside-badge-1011: offizielles kleines buntes Onside-Badge (schwarzer Grund),
   in Hell und Dunkel dasselbe Asset. Artwork unveraendert.
   Hoehe 32 px, Breite 89 px (Proportion 111:40 / 444:160), nicht auf 69x32 stauchen.
   Google Play (google-play-de.png 646x192) und ggf. Chrome Web Store: gleiche Hoehe 32 px,
   Breite folgt der Grafik (~108 px), nicht beschneiden, Artwork unveraendert. */
.os-badge{position:relative;display:block;width:89px;height:32px;line-height:0}
.os-badge-img{display:block;width:89px;height:32px;margin:0;padding:0;border:0}
.os-badge-img img{display:block;width:89px;height:32px;max-width:89px;max-height:32px;object-fit:contain;border:0;border-radius:0}
.app-mini .am-k.am-os,
:is(#sec-apps,#sec-dokumente,#sec-alltag,#sec-finanzen) .app-mini .am-k.am-os,
:is(#sec-apps,#sec-dokumente) .app-mini .am-k.am-os {
  width:89px!important;min-width:89px!important;max-width:89px!important;
  height:32px!important;min-height:32px!important;max-height:32px!important;
  flex:0 0 89px!important;padding:0!important;gap:0!important;
  background:none!important;border:0!important;box-shadow:none!important;
  overflow:visible!important;justify-content:center;align-items:center;
  border-radius:0;
}
.app-mini .am-k.am-os:hover,.app-mini .am-k.am-os:focus-visible{box-shadow:0 0 0 2px var(--accent,#888)}
.app-mini .am-k.am-gp,
:is(#sec-apps,#sec-dokumente,#sec-alltag,#sec-finanzen) .app-mini .am-k.am-gp,
:is(#sec-apps,#sec-dokumente) .app-mini .am-k.am-gp {
  width:auto!important;min-width:0!important;max-width:none!important;
  height:32px!important;min-height:32px!important;max-height:32px!important;
  flex:0 0 auto!important;padding:0!important;gap:0!important;
  background:none!important;border:0!important;overflow:visible!important;
  justify-content:center;align-items:center;
}
.app-mini .am-k.am-gp img,
:is(#sec-apps,#sec-dokumente,#sec-alltag,#sec-finanzen) .app-mini .am-k.am-gp img,
:is(#sec-apps,#sec-dokumente) .app-mini .am-k.am-gp img {
  display:block!important;width:auto!important;height:32px!important;
  min-width:0!important;max-width:none!important;max-height:32px!important;
  object-fit:contain!important;border-radius:0!important;padding:0!important;
}
.tf-knopf.gp-knopf.sb-img,
:is(#sec-apps,#sec-dokumente,#sec-alltag) .tf-knopf.gp-knopf.sb-img,
:is(#sec-apps,#sec-dokumente,#sec-alltag) .card-tv-tests .tf-knopf.gp-knopf.sb-img {
  width:auto!important;min-width:0!important;max-width:none!important;
  height:32px!important;min-height:32px!important;max-height:32px!important;
  flex:0 0 auto!important;padding:0!important;overflow:visible!important;
  background:none!important;border:0!important;
}
.tf-knopf.gp-knopf.sb-img img,
:is(#sec-apps,#sec-dokumente,#sec-alltag) .tf-knopf.gp-knopf.sb-img img {
  display:block!important;width:auto!important;height:32px!important;
  min-width:0!important;max-width:none!important;max-height:32px!important;
  object-fit:contain!important;border-radius:0!important;
}
#gt-download-popover:has(.os-badge),
#gt-download-popover:has(img[src*="google-play"]),
#gt-download-popover:has(img[src*="chrome-web-store"]){
  width:max-content!important;max-width:calc(100vw - 20px)!important;
}
#gt-download-popover:has(.os-badge) .gt-pop-items,
#gt-download-popover:has(img[src*="google-play"]) .gt-pop-items,
#gt-download-popover:has(img[src*="chrome-web-store"]) .gt-pop-items{
  display:flex!important;flex-wrap:wrap!important;grid-template-columns:none!important;
  gap:7px!important;align-items:center!important;max-width:100%!important;
}
#gt-download-popover .gt-pop-item:has(.os-badge),
#gt-download-popover .gt-pop-item .gt-rendered-onside{
  width:89px!important;min-width:89px!important;max-width:89px!important;
  height:32px!important;min-height:32px!important;max-height:32px!important;
  overflow:visible!important;padding:0!important;border:0!important;background:none!important;
}
#gt-download-popover .gt-pop-item:has(.os-badge) > *,
#gt-download-popover .gt-pop-item .gt-rendered-onside{
  max-width:89px!important;max-height:32px!important;padding:0!important;border:0!important;background:none!important;
}
#gt-download-popover .gt-pop-item:has(.os-badge) img,
#gt-download-popover .gt-pop-item .os-badge img,
#gt-download-popover .gt-pop-item .gt-rendered-onside img{
  width:89px!important;height:32px!important;max-width:89px!important;max-height:32px!important;
  object-fit:contain!important;
}
#gt-download-popover .gt-pop-item .am-k.am-os{
  width:89px!important;min-width:89px!important;max-width:89px!important;
  height:32px!important;overflow:visible!important;padding:0!important;background:none!important;border:0!important;
}
#gt-download-popover .gt-pop-item:has(img[src*="google-play"]),
#gt-download-popover .gt-pop-item:has(img[src*="chrome-web-store"]),
#gt-download-popover .gt-pop-item:has(.am-gp){
  width:auto!important;min-width:0!important;max-width:none!important;
  height:32px!important;min-height:32px!important;max-height:32px!important;
  overflow:visible!important;padding:0!important;
}
#gt-download-popover .gt-pop-item:has(img[src*="google-play"]) > *,
#gt-download-popover .gt-pop-item:has(img[src*="chrome-web-store"]) > *,
#gt-download-popover .gt-pop-item .gt-rendered-badge:has(img[src*="google-play"]),
#gt-download-popover .gt-pop-item .gt-rendered-badge:has(img[src*="chrome-web-store"]){
  width:auto!important;min-width:0!important;max-width:none!important;
  height:32px!important;max-height:32px!important;padding:0!important;border:0!important;background:none!important;
  overflow:visible!important;
}
#gt-download-popover .gt-pop-item:has(img[src*="google-play"]) img,
#gt-download-popover .gt-pop-item:has(img[src*="chrome-web-store"]) img,
#gt-download-popover .gt-pop-item .am-k.am-gp img,
#gt-download-popover .gt-pop-item img[src*="google-play"],
#gt-download-popover .gt-pop-item img[src*="chrome-web-store"]{
  width:auto!important;height:32px!important;min-width:0!important;max-width:none!important;max-height:32px!important;
  object-fit:contain!important;border-radius:0!important;
}
#gt-download-popover .gt-pop-item .am-k.am-gp,
#gt-download-popover .gt-pop-item .tf-knopf.gp-knopf{
  width:auto!important;min-width:0!important;max-width:none!important;
  height:32px!important;overflow:visible!important;padding:0!important;background:none!important;border:0!important;
  flex:0 0 auto!important;
}

#gt-download-popover .gt-pop-item .gt-rendered-badge.gt-rendered-with-icon{
  flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;
  gap:3px!important;padding:0 4px 0 3px!important;
}
#gt-download-popover .gt-pop-item .gt-rendered-badge .gt-badge-icon{
  width:11px!important;height:11px!important;min-width:11px!important;flex:0 0 11px!important;
  fill:currentColor;display:block!important;position:static!important;overflow:visible!important;
}
#gt-download-popover .gt-pop-item .gt-rendered-badge .gt-badge-text{
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;
  min-width:0!important;flex:1 1 auto!important;line-height:1!important;overflow:hidden!important;
}
#gt-download-popover .gt-pop-item .gt-rendered-badge.gt-rendered-with-icon small,
#gt-download-popover .gt-pop-item .gt-rendered-badge.gt-rendered-with-icon strong{text-align:left!important}

/* Win/Mac-Textknöpfe so breit wie Onside: 89x32 (Popover + Kachel). Play bleibt ~108. */
.tf-knopf.sb[data-kurz="Windows"],
.tf-knopf.sb[data-kurz="macOS"],
.tf-knopf.sb[data-kurz="Download"]:not(.sb-img):not([data-tf]),
:is(#sec-apps,#sec-dokumente,#sec-alltag) .tf-knopf.sb[data-kurz="Windows"],
:is(#sec-apps,#sec-dokumente,#sec-alltag) .tf-knopf.sb[data-kurz="macOS"],
:is(#sec-apps,#sec-dokumente,#sec-alltag) .tf-knopf.sb[data-kurz="Download"]:not(.sb-img):not([data-tf]),
:is(#sec-apps,#sec-dokumente) .card-tf3:not(.card-tv-tests) .tf-knopf.sb[data-kurz="Windows"],
:is(#sec-apps,#sec-dokumente) .card-tf3:not(.card-tv-tests) .tf-knopf.sb[data-kurz="macOS"],
:is(#sec-apps,#sec-dokumente) .card-tf3:not(.card-tv-tests) .tf-knopf.sb[data-kurz="Download"]:not(.sb-img):not([data-tf]){
  width:89px!important;min-width:89px!important;max-width:89px!important;
  height:32px!important;min-height:32px!important;max-height:32px!important;
  flex:0 0 89px!important;box-sizing:border-box!important;overflow:hidden!important;
}
#gt-download-popover .gt-pop-item:has(.gt-rendered-winmac),
#gt-download-popover .gt-pop-item .gt-rendered-badge.gt-rendered-winmac{
  width:89px!important;min-width:89px!important;max-width:89px!important;
  height:32px!important;min-height:32px!important;max-height:32px!important;
  box-sizing:border-box!important;
}


/* start-1011 (10.11.2026): Popover aus dem Inhalt statt 3x69-Grid. TestFlight zeigt
   "Beta testen mit TestFlight" vollständig; Play ~108x32, Onside/WinMac 89x32. */
#gt-download-popover{
  width:max-content!important;
  max-width:calc(100vw - 20px)!important;
  overflow:visible!important;
}
#gt-download-popover .gt-pop-items{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-start!important;
  align-items:center!important;
  grid-template-columns:none!important;
  gap:7px!important;
  max-width:100%!important;
  width:auto!important;
}
#gt-download-popover .gt-pop-item{
  width:auto!important;min-width:0!important;max-width:none!important;
  height:32px!important;min-height:32px!important;max-height:32px!important;
  flex:0 0 auto!important;justify-content:flex-start!important;
  overflow:visible!important;padding:0!important;
}
#gt-download-popover .gt-pop-item > *{
  max-width:none!important;max-height:32px!important;
}
#gt-download-popover .gt-pop-item .gt-rendered-badge.gt-rendered-with-icon:not(.gt-rendered-winmac){
  width:auto!important;min-width:89px!important;max-width:none!important;
  height:32px!important;min-height:32px!important;max-height:32px!important;
  box-sizing:border-box!important;
  padding:0 6px 0 4px!important;
  gap:4px!important;
  overflow:visible!important;
}
#gt-download-popover .gt-pop-item .gt-rendered-badge.gt-rendered-with-icon:not(.gt-rendered-winmac) .gt-badge-text{
  flex:0 1 auto!important;min-width:0!important;overflow:visible!important;
}
#gt-download-popover .gt-pop-item .gt-rendered-badge.gt-rendered-with-icon .gt-badge-text small,
#gt-download-popover .gt-pop-item .gt-rendered-badge.gt-rendered-with-icon .gt-badge-text strong{
  white-space:nowrap!important;
}

/* start-1011 Nachtrag (10.11.2026): eigener TestFlight-Knopf an das App-Store-Badge
   angelehnt – schwarz, Rand #a6a6a6, stärker gerundet, vorhandenes Strahlen-Icon,
   zweizeilige weiße Typo. Kein Apple-Artwork, kein Apple-Logo. */
#gt-download-popover .gt-pop-item .gt-rendered-badge.gt-rendered-with-icon.gt-rendered-testflight{
  width:auto!important;min-width:96px!important;max-width:none!important;
  height:32px!important;min-height:32px!important;max-height:32px!important;
  box-sizing:border-box!important;
  padding:0 7px 0 5px!important;
  gap:5px!important;
  background:#000!important;
  color:#fff!important;
  border:1px solid #a6a6a6!important;
  border-radius:8px!important;
  overflow:visible!important;
}
#gt-download-popover .gt-pop-item .gt-rendered-badge.gt-rendered-testflight .gt-badge-icon{
  width:16px!important;height:16px!important;min-width:16px!important;flex:0 0 16px!important;
  color:#fff!important;fill:currentColor!important;
}
#gt-download-popover .gt-pop-item .gt-rendered-badge.gt-rendered-testflight .gt-badge-text{
  flex:0 1 auto!important;min-width:0!important;overflow:visible!important;
}
#gt-download-popover .gt-pop-item .gt-rendered-badge.gt-rendered-testflight .gt-badge-text small{
  color:#fff!important;font-size:6.5px!important;font-weight:500!important;line-height:1.05!important;
}
#gt-download-popover .gt-pop-item .gt-rendered-badge.gt-rendered-testflight .gt-badge-text strong{
  color:#fff!important;font-size:11px!important;font-weight:750!important;line-height:1.05!important;
  letter-spacing:-.01em!important;
}
#tools .tf-knopf.sb.tf-eigen,
#tools .tf-knopf.sb[data-kurz="TestFlight"]{
  min-width:96px!important;
  height:32px!important;min-height:32px!important;max-height:32px!important;
  padding:0 7px 0 5px!important;gap:5px!important;
  background:#000!important;color:#fff!important;
  border:1px solid #a6a6a6!important;border-radius:8px!important;
}
#tools .tf-knopf.sb.tf-eigen .sb-ic,
#tools .tf-knopf.sb[data-kurz="TestFlight"] .sb-ic{
  width:16px!important;height:16px!important;flex:0 0 16px!important;
}
#tools .tf-knopf.sb.tf-eigen .sb-t,
#tools .tf-knopf.sb[data-kurz="TestFlight"] .sb-t{
  font-size:11px!important;line-height:1.05!important;letter-spacing:-.01em!important;
}
#tools .tf-knopf.sb.tf-eigen .sb-t small,
#tools .tf-knopf.sb[data-kurz="TestFlight"] .sb-t small{
  font-size:6.5px!important;font-weight:500!important;line-height:1.05!important;margin-bottom:1px!important;
}
#tools .app-mini .am-k.am-tf,
#tools .app-mini .am-k[data-am="tf"]{
  width:auto!important;min-width:96px!important;max-width:none!important;
  height:32px!important;min-height:32px!important;max-height:32px!important;
  flex:0 0 auto!important;
  padding:0 7px 0 5px!important;gap:5px!important;
  background:#000!important;color:#fff!important;
  border:1px solid #a6a6a6!important;border-radius:8px!important;
  overflow:visible!important;
}
#tools .app-mini .am-k.am-tf .am-tfi,
#tools .app-mini .am-k[data-am="tf"] .am-tfi{
  width:16px!important;height:16px!important;flex:0 0 16px!important;
}
#tools .app-mini .am-k.am-tf .am-t,
#tools .app-mini .am-k[data-am="tf"] .am-t{
  font-size:11px!important;line-height:1.05!important;letter-spacing:-.01em!important;
}
#tools .app-mini .am-k.am-tf .am-t small,
#tools .app-mini .am-k[data-am="tf"] .am-t small{
  font-size:6.5px!important;line-height:1.05!important;margin-bottom:1px!important;
}
/* bn-apk-1011 (10.11.2026, Robin): APK-Knopf genauso groß wie der TestFlight-Knopf */
#tools .app-mini .am-k.am-apk,
#tools .app-mini .am-k[data-am="apk"]{
  width:auto!important;min-width:96px!important;max-width:none!important;
  height:32px!important;min-height:32px!important;max-height:32px!important;
  flex:0 0 auto!important;
  padding:0 7px 0 5px!important;gap:5px!important;
  background:#000!important;color:#fff!important;
  border:1px solid #a6a6a6!important;border-radius:8px!important;
  overflow:visible!important;
}
#tools .app-mini .am-k.am-apk .am-apki,
#tools .app-mini .am-k[data-am="apk"] .am-apki{
  width:16px!important;height:16px!important;flex:0 0 16px!important;
}
#tools .app-mini .am-k.am-apk .am-t,
#tools .app-mini .am-k[data-am="apk"] .am-t{
  font-size:11px!important;line-height:1.05!important;letter-spacing:-.01em!important;
}
#tools .app-mini .am-k.am-apk .am-t small,
#tools .app-mini .am-k[data-am="apk"] .am-t small{
  font-size:6.5px!important;line-height:1.05!important;margin-bottom:1px!important;
}


/* App-Logos innerhalb des verkleinerten Icon-Containers halten. */
:is(#sec-apps,#sec-dokumente) .grid > .card .card-icon-app {
  box-sizing:border-box !important;
  display:grid !important;
  place-items:center !important;
  overflow:visible !important;
}
:is(#sec-apps,#sec-dokumente) .grid > .card .card-icon-app img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  border-radius:8px;
}
:is(#sec-apps,#sec-dokumente) .grid > a.card.has-download-menu .card-icon-app {
  width:35px !important;
  height:35px !important;
  flex:0 0 35px !important;
}


/* Gemeinsame Geometrie: 24px Download ueber 24px Pin, mit 8px vertikalem Abstand.
   Die reservierte Textflaeche gilt auch fuer dynamische Schnellzugriff-Kopien. */
@media screen {
  #tools :is(section.toolsec,#sec-schnell) .grid > .card {
    box-sizing:border-box!important;
    height:62px!important;min-height:62px!important;max-height:62px!important;
  }
  #tools :is(section.toolsec,#sec-schnell) .grid > .card :is(.kb-pin,.fav-btn) {
    top:50%!important;right:8px!important;left:auto!important;bottom:auto!important;
    width:33px!important;height:33px!important;min-width:33px!important;
    margin:0!important;transform:translateY(-50%)!important;
  }
  #tools :is(section.toolsec,#sec-schnell) .grid > .card {padding-right:49px!important}
  #tools :is(section.toolsec,#sec-schnell) .grid > .card.has-download-menu {
    padding-right:42px!important;
  }
  #tools :is(section.toolsec,#sec-schnell) .grid > .card.has-download-menu .gt-download-trigger {
    box-sizing:border-box!important;
    top:2px!important;right:8px!important;left:auto!important;bottom:auto!important;
    width:24px!important;height:24px!important;min-width:24px!important;
    margin:0!important;transform:none!important;
  }
  #tools :is(section.toolsec,#sec-schnell) .grid > .card.has-download-menu :is(.kb-pin,.fav-btn) {
    top:34px!important;right:8px!important;width:24px!important;height:24px!important;min-width:24px!important;transform:none!important;
  }
  #tools :is(section.toolsec,#sec-schnell) .grid > .card.has-download-menu .card-body {
    min-width:0!important;width:100%!important;padding-right:0!important;
  }
  #tools :is(section.toolsec,#sec-schnell) .grid > .card.has-download-menu .card-text {
    min-width:0!important;flex:1 1 auto!important;overflow:hidden!important;
  }
  #tools :is(section.toolsec,#sec-schnell) .grid > .card.has-download-menu .card-kopf {
    min-width:0!important;padding-right:0!important;
  }
  #tools :is(section.toolsec,#sec-schnell) .grid > .card.has-download-menu .card-title {
    min-width:0!important;max-width:100%!important;overflow:hidden!important;
    text-overflow:ellipsis!important;white-space:nowrap!important;display:block!important;
  }
  #tools :is(section.toolsec,#sec-schnell) .grid > .card.has-download-menu .card-go {display:none!important}
}
@media screen and (min-width:1181px) {
  #tools :is(section.toolsec,#sec-schnell) > .grid {grid-template-columns:repeat(5,minmax(0,1fr))!important}
}


/* Vorhandene Beschreibungsdaten: eine Zeile unter dem Namen.
   Rechts bleiben feste, getrennte Bereiche fuer Download und Stecknadel. */
@media screen {
  #tools#tools#tools .grid > a.card {
    position:relative !important;box-sizing:border-box !important;
    height:62px !important;min-height:62px !important;max-height:62px !important;
    padding:8px 42px 8px 10px !important;display:flex !important;
    flex-direction:column !important;justify-content:center !important;gap:0 !important;overflow:hidden !important;
  }
  #tools#tools#tools .grid > a.card.has-download-menu {padding-right:42px !important}
  /* Suche: [hidden] muss gegen die display:flex-Regel oben gewinnen (sonst bleiben ausgeblendete Kacheln sichtbar) */
  #tools#tools#tools .grid > a.card[hidden] {display:none !important}
  #tools#tools#tools .grid > a.card .card-body {
    display:flex !important;align-items:center !important;gap:8px !important;
    position:static !important;width:100% !important;min-width:0 !important;
    margin:0 !important;padding:0 !important;flex:0 1 auto !important;
  }
  #tools#tools#tools .grid > a.card .card-icon {
    width:30px !important;height:30px !important;flex:0 0 30px !important;
  }
  #tools#tools#tools .grid > a.card .card-text {
    position:static !important;display:block !important;flex:1 1 0 !important;min-width:0 !important;
    width:auto !important;max-width:100% !important;overflow:hidden !important;
    margin:0 !important;padding:0 !important;
  }
  #tools#tools#tools .grid > a.card .card-kopf {position:static !important;display:block !important;min-width:0 !important;margin:0 !important;padding:0 !important}
  #tools#tools#tools .grid > a.card .card-title {
    display:block !important;white-space:nowrap !important;text-overflow:ellipsis !important;
    overflow:hidden !important;max-width:100% !important;min-height:0 !important;
    font-size:13px !important;line-height:17px !important;margin:0 !important;padding:0 !important;
    -webkit-line-clamp:unset !important;
  }
  #tools#tools#tools .grid > a.card .card-desc {
    display:block !important;white-space:nowrap !important;text-overflow:ellipsis !important;
    overflow:hidden !important;max-width:100% !important;min-height:0 !important;
    font-size:11px !important;line-height:14px !important;font-weight:400 !important;
    color:var(--text-mute) !important;margin:2px 0 0 !important;padding:0 !important;
    -webkit-line-clamp:unset !important;
  }
  #tools#tools#tools .grid > a.card .card-meta,
  #tools#tools#tools .grid > a.card .card-go {display:none !important}
  #tools#tools#tools .grid > a.card .kb-pin,
  #tools#tools#tools .grid > a.card .fav-btn {
    position:absolute !important;left:auto !important;right:5px !important;
    top:50% !important;transform:translateY(-50%) !important;
    width:30px !important;height:30px !important;
  }
  #tools#tools#tools .grid > a.card .gt-download-trigger {
    position:absolute !important;right:8px !important;left:auto !important;top:2px !important;bottom:auto !important;
    transform:none !important;width:24px !important;height:24px !important;min-width:24px !important;
    box-sizing:border-box !important;margin:0 !important;
  }
  #tools#tools#tools .grid > a.card.has-download-menu :is(.kb-pin,.fav-btn) {
    right:8px !important;left:auto !important;top:34px !important;bottom:auto !important;
    transform:none !important;width:24px !important;height:24px !important;min-width:24px !important;
    box-sizing:border-box !important;margin:0 !important;
  }
}
@media screen and (min-width:1181px) {
  #tools#tools#tools .toolsec > .grid {grid-template-columns:repeat(5,minmax(0,1fr)) !important;grid-auto-rows:62px !important}
}

/* Rubriken ohne Unterzeile, kompakter (07.11.2026) */.toolsec .sec-sub{display:none}#sec-schnell .sec-sub,#sec-favoriten .sec-sub{display:none!important}.toolsec .sec-head,#sec-schnell .sec-head{padding-bottom:0;margin-bottom:10px}
/* Rubrikfilter ausgeblendet (07.11.2026) – Markup bleibt erhalten */.kat-wrap{display:none!important}

/* sfach-fuss-1011 (10.11.2026): Badges nicht mehr absolut in der Kachel.
   Channelfox (.card-tv-tests) hat seinen eigenen Block und bleibt unverändert.
   Nur die Kachel-Regeln; der Fuß liegt zentral in /libs/gdesign-fuss.css. */
@media screen {
  #tools #sec-alltag .grid > a.card.has-download-menu:not(.card-tv-tests) {
    position:relative !important;
    height:62px !important;min-height:62px !important;max-height:62px !important;
    box-sizing:border-box !important;overflow:hidden !important;isolation:isolate !important;
  }
  #tools #sec-alltag .grid > a.card.has-download-menu:not(.card-tv-tests) .tf,
  #tools #sec-alltag .grid > a.card.has-download-menu:not(.card-tv-tests) .tf-knopf,
  #tools #sec-alltag .grid > a.card.has-download-menu:not(.card-tv-tests) .app-mini,
  #tools #sec-alltag .grid > a.card.has-download-menu:not(.card-tv-tests) .am-k,
  #tools #sec-alltag .grid > a.card.has-download-menu:not(.card-tv-tests) .card-go {
    display:none !important;visibility:hidden !important;
  }
}


/* bn-apk-1011 (10.11.2026, Robin): APK-Badge der Startseite – gleiche Größe wie der TestFlight-Knopf */
@media screen {
  .app-mini .am-apk{gap:4px;padding:0 7px 0 4px;background:#000;color:#fff;border:1px solid #a6a6a6}
  .app-mini .am-apk .am-apki{width:16px;height:16px;flex:none}
  #tools .app-mini .am-k.am-apk,
  #tools .app-mini .am-k[data-am="apk"]{
    width:auto!important;min-width:96px!important;max-width:none!important;
    height:32px!important;min-height:32px!important;max-height:32px!important;
    flex:0 0 auto!important;
    padding:0 7px 0 5px!important;gap:5px!important;
    background:#000!important;color:#fff!important;
    border:1px solid #a6a6a6!important;border-radius:8px!important;
    overflow:visible!important;
  }
  #tools .app-mini .am-k.am-apk .am-apki,
  #tools .app-mini .am-k[data-am="apk"] .am-apki{
    width:16px!important;height:16px!important;flex:0 0 16px!important;
  }
  #tools .app-mini .am-k.am-apk .am-t,
  #tools .app-mini .am-k[data-am="apk"] .am-t{
    font-size:11px!important;line-height:1.05!important;letter-spacing:-.01em!important;
  }
  #tools .app-mini .am-k.am-apk .am-t small,
  #tools .app-mini .am-k[data-am="apk"] .am-t small{
    font-size:6.5px!important;line-height:1.05!important;margin-bottom:1px!important;
  }
}
/* bn-apk-1011 (10.11.2026, Robin): APK im Download-Popover im Stil des TestFlight-Knopfs */
#gt-download-popover .gt-pop-item .gt-rendered-badge.gt-rendered-with-icon.gt-rendered-apk{
  width:auto!important;min-width:96px!important;max-width:none!important;
  height:32px!important;min-height:32px!important;max-height:32px!important;
  box-sizing:border-box!important;
  padding:0 7px 0 5px!important;gap:5px!important;
  background:#000!important;color:#fff!important;
  border:1px solid #a6a6a6!important;border-radius:8px!important;
  overflow:visible!important;
}
#gt-download-popover .gt-pop-item .gt-rendered-badge.gt-rendered-apk .gt-badge-icon{
  width:16px!important;height:16px!important;min-width:16px!important;flex:0 0 16px!important;
}
#gt-download-popover .gt-pop-item .gt-rendered-badge.gt-rendered-apk .gt-badge-text{
  flex:0 1 auto!important;min-width:0!important;overflow:visible!important;
}
#gt-download-popover .gt-pop-item .gt-rendered-badge.gt-rendered-apk .gt-badge-text small{
  color:#fff!important;font-size:6.5px!important;font-weight:500!important;line-height:1.05!important;
}
#gt-download-popover .gt-pop-item .gt-rendered-badge.gt-rendered-apk .gt-badge-text strong{
  color:#fff!important;font-size:11px!important;font-weight:750!important;line-height:1.05!important;letter-spacing:-.01em!important;
}
/* apk-alle-1011 (10.11.2026, Robin): APK-Knopf in der .tf-Reihe (Serverfach, Channelfox) */
@media screen {
  #tools .tf .tf-knopf.tf-apk{
    width:69px!important;min-width:69px!important;max-width:69px!important;
    height:32px!important;min-height:32px!important;max-height:32px!important;
    box-sizing:border-box!important;flex:0 0 69px!important;
    padding:0 3px!important;gap:2px!important;
    justify-content:center;align-items:center;
    background:#000!important;color:#fff!important;
    border:1px solid #a6a6a6!important;border-radius:6px!important;
  }
  #tools .tf .tf-knopf.tf-apk .sb-ic{width:11px!important;height:11px!important;flex:0 0 11px!important}
  #tools .tf .tf-knopf.tf-apk .sb-t{font-size:7.5px!important;line-height:1.05}
  #tools .tf .tf-knopf.tf-apk .sb-t small{font-size:5.6px!important;line-height:1.05}
  /* Channelfox: die feste 3er-Reihe bleibt; der vierte Knopf bricht bei Bedarf in
     die nächste Zeile und läuft nicht aus der Kachel. In der kompakten Alltags-
     Kachel bleibt er wie die anderen .tf-Knöpfe im Download-Popover. */
  #tools .card-tv-tests .tf .tf-knopf.tf-apk{
    grid-column:auto;width:100%!important;min-width:0!important;max-width:100%!important;flex:none!important;
  }
}


@media screen and (prefers-color-scheme:dark){
  .card-icon-app img{filter:invert(1)}
}


.g-spiel-zahl{position:absolute;top:-7px;right:-9px;z-index:2;min-width:19px;height:19px;padding:0 5px;box-sizing:border-box;border-radius:999px;
  background:rgb(229,72,77);color:#fff;font:700 11.5px/19px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-align:center;
  box-shadow:0 0 0 2px var(--bg,#fff);pointer-events:none;font-variant-numeric:tabular-nums;}
@media print{.g-spiel-zahl{display:none!important;}}


html.km-app #tools a.card,html.km-app #tools a.card *{-webkit-touch-callout:none}
.km{position:fixed;z-index:9999;min-width:220px;max-width:calc(100vw - 16px);padding:5px;border-radius:12px;
  background:var(--card,#fff);color:inherit;border:1px solid rgba(127,127,127,.25);
  box-shadow:0 10px 30px rgba(0,0,0,.25);font:inherit;font-size:15px}
@media (prefers-color-scheme:dark){.km{background:#1f2023;color:#eee}}
.km button{display:block;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:8px;
  background:none;color:inherit;font:inherit;cursor:pointer}
.km button:hover,.km button:focus-visible{background:rgba(127,127,127,.15);outline:none}
@media print{.km{display:none}}


/* seo-1111 (11.11.2026, Robin): Einleitung unter dem Hero und Marke im oeffentlichen Footer. */
/* kurz-slug-1111 (11.11.2026, Robin): Einleitung ohne kuenstliche 520px-Breite, am Desktop eine Zeile, mobil darf umbrechen. */
.hero-einleitung{margin:0 auto 14px;font-size:.9rem;line-height:1.4;color:var(--text-dim);text-align:center}
/* start-zeile-1111 (11.11.2026, Robin): Einleitung am Telefon in einer Zeile.
   Gemessen: 447px bei 14,4px, also rund 31em Textbreite. 2,7vw statt der
   knapp passenden 2,8vw lassen Reserve fuer die Systemschrift, falls Inter
   nicht laedt; oben bei 0,9rem gedeckelt wie am Rechner. */
@media screen and (max-width:560px){
  .hero-einleitung{white-space:nowrap;font-size:clamp(.5625rem,2.7vw,.9rem)}
}
/* Unter 340px wird es zu eng: dort wieder umbrechen statt abschneiden. */
@media screen and (max-width:340px){
  .hero-einleitung{white-space:normal}
}
.foot .g-fuss-marke{color:var(--text-dim)}
@media print{.hero-einleitung{color:#333;font-size:10pt;margin:0}.foot .g-fuss-marke{color:#333}}