/* ============================================================
   gdti-frame.css · Universal-Rahmen für ALLE g--d-Seiten
   Über-Navi (Welten-Ring) oben + Control-Panel unten.
   Setzt auf gdti.css (Tokens) auf. Lädt zusätzlich gdti-nav.css.
   v0.1 · 2026-06-04 · Agi
   ============================================================ */

:root{
  --gf-overnav-h: 64px;
  --gf-copa-h: 82px; /* Ee 260727-0202 korrigiert: fehlte global, calc()-Stellen liefen auf falschem 90px-Fallback. Echter Wert = Toolbar-Hoehe (64px) + ihr eigener Bottom-Abstand zum Viewport-Rand (18px, sie schwebt) = 82px, per computed-style verifiziert. */
  --gf-world-gap: 0px;             /* Dock-Vergrößerung übernimmt Abstand */
  --gf-ring-bg: linear-gradient(180deg,#2a2622,#1b1815);
}

/* Seite bekommt oben Platz für die Über-Navi */
body.gf-has-frame{ padding-top: var(--gf-overnav-h); }

/* ========== ÜBER-NAVI (oben, volle Breite) ========== */
.gf-overnav{
  position:fixed; top:0; left:0; right:0; height:var(--gf-overnav-h); z-index:90;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 26px; gap:14px;
  background:var(--gf-bar, var(--gf-ring-bg));
  border-bottom:2px solid var(--gf-bar-edge, rgba(0,0,0,.35));
  background-size:cover, 200px 100%;
  box-shadow:0 2px 14px rgba(0,0,0,.25);
  font-family:var(--gdti-font);
}

/* —— LINKS: Breadcrumbs (oben) + Titel (darunter) —— */
.gf-left{ justify-self:start; display:flex; flex-direction:column; gap:3px; min-width:0; padding-left:8px; }
.gf-crumbs{ display:flex; align-items:center; gap:5px; font-size:10px; letter-spacing:.04em;
  color:var(--gf-crumb-ink,rgba(255,255,255,.55)); text-transform:uppercase; }
.gf-crumbs a{ color:var(--gf-crumb-ink,rgba(255,255,255,.6)); text-decoration:none; padding:1px 5px; border-radius:8px; transition:.15s; }
.gf-crumbs a:hover{ background:var(--gdti-orange); color:#fff; }
.gf-crumbs .sep{ opacity:.4; }
.gf-title{ font-weight:800; font-size:21px; letter-spacing:-.02em; color:var(--gf-bar-ink,#fff); line-height:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* —— MITTE: Welten-Ring im VU-Meter-Display hinter Glas —— */
.gf-display{
  justify-self:center; position:relative;
  width:172px; height:52px; border-radius:var(--gf-display-radius,11px); overflow:hidden;
  background:var(--gf-display-bg, radial-gradient(120% 140% at 50% 0%, #14110e 0%, #0b0907 100%));
  border:2px solid var(--gf-display-edge,#000); box-shadow:inset 3px -3px 9px rgba(255,166,90,.22), inset -3px 3px 9px rgba(0,0,0,.30);
  cursor:pointer; user-select:none; touch-action:pan-y;
}
/* seitlicher Verlauf entfernt (Jens 7.6.) — harte Kante, kein Fade L/R */
.gf-display{ -webkit-mask:none; mask:none; }
.gf-display.gf-holding{ cursor:grabbing; overflow:visible; z-index:95;
  -webkit-mask:none; mask:none; }
.gf-display.gf-holding .gf-ring{ overflow:visible; }
/* Glasscheibe-Reflex */
.gf-display::after{ content:''; position:absolute; inset:0; pointer-events:none; border-radius:10px;
  background:
    radial-gradient(90% 90% at 92% 100%, rgba(255,180,110,.22) 0%, transparent 50%),
    linear-gradient(315deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 28%, transparent 52%);
}
/* ganz leichter oranger Glow an den Highlight-Seiten (Lichtquelle = oK rechts-unten) */
.gf-display{ box-shadow:inset 3px -3px 9px rgba(255,166,90,.22), inset -3px 3px 9px rgba(0,0,0,.30),
  0 0 0 1px rgba(255,106,0,.10), 4px 6px 16px -6px rgba(255,106,0,.28); }
/* dunkler Schatten links-oben, dezent */
.gf-display::before{ content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(95% 95% at 8% 0%, rgba(0,0,0,.26), transparent 58%); }

.gf-ring{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.gf-world{
  position:absolute; top:50%; left:50%; transform-origin:center;
  font-weight:800; letter-spacing:-.02em; white-space:nowrap;
  transition:transform .28s cubic-bezier(.22,1,.36,1), opacity .28s, color .2s, filter .28s;
  color:#fff;
}
.gf-world .wsub{ display:block; font-size:7px; letter-spacing:.35em; text-transform:uppercase;
  color:rgba(255,255,255,.45); text-align:center; margin-top:1px; font-weight:600; }
.gf-world.center .wsub{ color:#8a3d08!important; }
/* Welten-Logo: FESTE Font, theme-unabhängig (Jens 7.6. — Logo bleibt immer gleich) */
.gf-world .wlogo{ font-family:'Inter Tight','Inter',system-ui,sans-serif !important; }
/* Welt-Tierchen-Dots im Logo (g ··· d) */
.gf-world .wlogo .dot{ display:inline-block; width:.34em; height:.34em; border-radius:50%; }
/* MoAI 260721 korrigiert: .gf-world.center sitzt IMMER auf der hellen .gf-display-Pille (gemessen: hellgruen/creme, nie dunkel) -> dunkler Text, kein Textschatten noetig, theme-unabhaengig. */
.gf-world.center{ color:#181410!important; text-shadow:none!important; filter:none!important; }
.gf-world.dim{ color:rgba(255,255,255,.55)!important; text-shadow:0 1px 2px rgba(0,0,0,.5)!important; filter:none!important; }
.gf-world.dim .wsub{ color:rgba(255,255,255,.4)!important; opacity:.85; }
.gf-overnav{ color:var(--gf-bar-ink,#f3ece0); transition:background .5s, border-color .5s; }

/* —— RECHTS: Tierchen-Reihe (Spirit-Animals, bunt rund) + eigenes + Inneres —— */
.gf-right{ justify-self:end; display:flex; align-items:center; gap:10px; }
.gf-critters{ display:flex; align-items:center; gap:-4px; }
/* Spirit-Animal-Token: runder Farbkreis, kein Glow. Weiße Augen via .eyes-Overlay */
.gf-critter{ width:27px; height:27px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:14px;
  cursor:pointer; position:relative; transition:transform .18s ease, opacity .25s; border:none;
  overflow:visible; }
/* AI-Tierchen (Ra & Co): flat quadratisch statt rund */
.gf-critter.ai{ border-radius:5px; }
/* weiße Augen-Paar (zwei Punkte) */
.gf-critter .eyes{ position:absolute; top:8px; left:0; right:0; display:flex; justify-content:center; gap:5px; pointer-events:none; }
.gf-critter .eyes i{ width:5px; height:5px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); }
.gf-critter .eyes i::after{ content:''; display:block; width:2px; height:2px; border-radius:50%; background:#222; margin:1.5px auto 0; }
.gf-critter:hover{ filter:brightness(1.12); opacity:1!important; z-index:6!important; }
.gf-critter{ transition:transform .15s, opacity .15s, filter .15s; }
/* blass = nicht aktiv */
/* Hover-Tooltip: weiter weg, dunkler HG, klarer Kontrast + kleiner Pfeil */
.gf-critter[data-name]:hover::after{ content:attr(data-name); position:absolute; top:40px; left:50%;
  transform:translateX(-50%); background:#1a1714; color:#fff; font-size:11px; font-weight:700;
  padding:4px 10px; border-radius:10px; white-space:nowrap; z-index:60; letter-spacing:.01em;
  box-shadow:0 4px 14px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.12); }
.gf-critter[data-name]:hover::before{ content:''; position:absolute; top:33px; left:50%;
  transform:translateX(-50%); border:5px solid transparent; border-bottom-color:#1a1714; z-index:60; }
/* eigenes Tierchen: etwas größer, orange Ring */
.gf-mine{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:16px; cursor:pointer; transition:.15s; position:relative; border:2px solid var(--gdti-orange); }
.gf-mine:hover{ transform:scale(1.1); }
/* Inneres: Name-Pill mit ▾ wie im gdti-SS "Je ▾" */
.gf-inner{ display:flex; align-items:center; gap:5px; padding:5px 11px; border-radius:var(--gdti-radius-pill,22px);
  background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.22); color:#fff;
  font-weight:700; font-size:13px; cursor:pointer; transition:.15s; }
.gf-inner .av{ width:22px; height:22px; border-radius:50%; background:var(--gdti-orange); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.gf-inner:hover{ background:var(--gdti-orange); border-color:var(--gdti-orange); }

@media(max-width:820px){
  .gf-display{ width:200px; }
  .gf-critters .gf-critter:nth-child(n+4){ display:none; }
  .gf-title{ font-size:17px; }
}
@media(max-width:560px){
  .gf-display{ width:150px; height:42px; }
  .gf-crumbs{ display:none; }
}

/* —— Je-Dropdown (Inneres-Menü) stylish —— */
.gf-inner{ position:relative; }
.gf-menu{ position:absolute; top:46px; right:0; min-width:208px;
  background:var(--gf-panel,#1c1814); border:2px solid var(--gdti-orange,#FF6A00); border-radius:14px;
  box-shadow:0 12px 40px rgba(40,20,5,.28);
  padding:10px; z-index:120; opacity:0; transform:translateY(-8px) scale(.96); pointer-events:none;
  transition:opacity .18s, transform .18s; font-family:var(--gdti-font); }
.gf-menu.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.gf-menu .head{ display:flex; align-items:center; gap:9px; padding:6px 6px 10px; border-bottom:1px solid rgba(255,255,255,.14); margin-bottom:6px; }
.gf-menu .head .big{ width:38px; height:38px; border-radius:50%; background:var(--gdti-orange); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; }
.gf-menu .head b{ font-size:14px; color:var(--gf-ink,#f3ece0)!important; display:block; }
.gf-menu .head small{ font-size:11px; color:var(--gf-ink-soft,#b8b2a6); }
.gf-menu .gf-mi, .gf-menu a.gf-mi{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:11px; cursor:pointer;
  font-size:13px; color:var(--gf-ink,#f2efe9)!important; text-decoration:none; transition:background .13s, color .13s; }
.gf-mi .ic{ width:20px; text-align:center; font-size:15px; }
.gf-mi:hover{ background:var(--gdti-orange)!important; color:#fff!important; }
.gf-menu .sep{ height:1px; background:rgba(255,255,255,.14); margin:5px 4px; }

/* —— g--d Logo-Augen: orange oo hinter den -- (gdti-Move) —— */
/* g--d Logo-Augen: oo orange (innen gefüllt) GENAU unter den -- */
.gf-world .wlogo .gd-eyes{ position:relative; display:inline-block; letter-spacing:.04em; }
/* orange Augen-"oo" — gefüllt, leicht runder Eindruck */
.gf-world .wlogo .gd-eyes .gd-oo{ color:var(--gdti-orange,#FF6A00); -webkit-text-fill-color:var(--gdti-orange,#FF6A00); font-weight:inherit; letter-spacing:-.04em; }
/* die "--" = zugekniffene Augenstriche: vertikal MITTIG über die oo, in Display-Tinte, schmal */
.gf-world .wlogo .gd-eyes .gd-dd{ position:absolute; left:0; right:0; top:50%; transform:translateY(-52%);
  text-align:center; letter-spacing:-.02em; color:var(--gf-world-ink,#fff); pointer-events:none;
  font-weight:700; font-size:.82em; }
.gf-world .wlogo .gd-d{ margin-left:.02em; }

/* —— Globale Suche (Ra 260623) —— */
.gf-search{ position:relative; margin-top:3px; }
.gf-search-in{ width:170px; max-width:38vw; font:inherit; font-size:12px; padding:4px 10px;
  border-radius:999px; border:1px solid var(--gf-bar-edge,rgba(70,74,80,.4));
  background:var(--gf-panel,rgba(255,255,255,.12)); color:var(--gf-bar-ink,#f3ece0); outline:none; transition:.15s; }
.gf-search-in:focus{ border-color:var(--gdti-orange,#FF6A00); width:230px; }
.gf-search-in::placeholder{ color:var(--gf-crumb-ink,rgba(255,255,255,.5)); }
.gf-search-pop{ position:absolute; top:30px; left:0; min-width:280px; max-width:380px; z-index:120;
  background:var(--gf-panel,#1c1814); color:var(--gf-bar-ink,#f3ece0);
  border:1px solid var(--gf-bar-edge,rgba(0,0,0,.4)); border-radius:12px; overflow:hidden;
  box-shadow:0 14px 40px rgba(0,0,0,.35); }
.gf-search-hit{ display:flex; flex-direction:column; gap:1px; padding:8px 13px; text-decoration:none;
  color:inherit; border-bottom:1px solid rgba(128,128,128,.14); transition:.12s; }
.gf-search-hit:last-child{ border-bottom:0; }
.gf-search-hit:hover{ background:var(--gdti-orange,#FF6A00); color:#fff; }
.gf-search-t{ font-size:13px; font-weight:700; line-height:1.2; }
.gf-search-sub{ font-size:10.5px; opacity:.7; letter-spacing:.02em; }
.gf-search-none{ padding:10px 13px; font-size:12px; opacity:.65; }
@media (max-width:760px){ .gf-search{ display:none; } }

/* —— Suche-Position-Fix (Ra 260623): zwischen Titel und Welten-Umschalter, KEINE Hoehenzugabe —— */
.gf-left{ flex-direction:row; align-items:center; gap:16px; }
.gf-left-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.gf-search{ margin-top:0; align-self:center; }
.gf-search-pop{ top:calc(100% + 6px); }

/* —— Suche kompakt, Ring nie ueberlappen (Ra 260623 v2) —— */
.gf-left{ overflow:visible; }
.gf-left-txt{ flex:0 1 auto; }
.gf-search{ flex:0 0 auto; margin-left:auto; }
.gf-search-in{ width:120px; }
.gf-search-in:focus{ width:120px; }            /* kein Layout-Wachstum -> kein Ring-Push */
.gf-search-pop{ right:auto; left:0; }

/* —— Suche v3: passt in 63px-Luecke, Overlay-Aufklappen statt Ring-Push (Ra 260623) —— */
.gf-search{ margin-left:0; }
.gf-search-in{ width:46px; padding:4px 8px; transition:width .18s ease, background .15s; cursor:pointer; }
.gf-search-in:focus{ width:200px; position:relative; z-index:130; cursor:text; }
.gf-search{ position:relative; }
.gf-search-pop{ left:0; right:auto; min-width:240px; }

/* —— Suche v4: Fokus klappt als Overlay auf (raus aus Flow), Ring bleibt fix (Ra 260623) —— */
.gf-search-in:focus{ position:absolute; top:50%; transform:translateY(-50%); left:0; width:240px; z-index:131;
  box-shadow:0 4px 18px rgba(0,0,0,.3); }
.gf-search{ min-width:46px; }

/* E2 Suchfeld-Fix (Sprint1, Jens 10.07.2026): Kontrast defekt (gemessen 1.14:1) + falsche Position
   (eine vorherige .gf-search{margin-left:auto} Regel schob das Feld ganz an den rechten Rand
   statt zwischen Titel und Weltenring, wie urspruenglich gedacht). Fix: zurueck in den linken
   Block, Token-Kontrast garantiert lesbar in allen 7 Styles, Ausklapp-Breite wird per JS auf
   Sicherheitsabstand VOR dem Weltenring begrenzt (siehe gdti-frame.js buildSearch). */
.gf-search{ margin-left:0 !important; flex:0 0 auto; }
/* .gf-overnav erzwingt --t-card lokal auf weiss (Chrome-Pille-Look) OHNE die -foreground
   mitzuziehen -> bei dunklen Themes (tokyo) blieb der Text hell-auf-erzwungen-weiss (1.1:1).
   Deshalb HIER fixe, theme-unabhaengige Dunkel/Hell-Paarung statt Theme-Token: */
.gf-search-in{ color:hsl(220 15% 16%) !important; background:hsl(0 0% 100%) !important; border-color:hsl(var(--t-border)) !important; }
.gf-search-in::placeholder{ color:hsl(220 8% 42%) !important; opacity:1; }
.gf-search-in:focus{ border-color:hsl(var(--t-primary,25 85% 53%)) !important; }
.gf-search-pop{ background:hsl(var(--t-card)) !important; color:hsl(var(--t-card-foreground)) !important; border-color:hsl(var(--t-border)) !important; }
.gf-search-hit{ border-bottom-color:hsl(var(--t-border) / .5) !important; }
.gf-search-sub{ color:hsl(var(--t-muted-foreground)) !important; opacity:1 !important; }

/* Memory 345 / E2-Wurzel: .gf-title ohne max-width laesst die linke Spalte (Titel+Suche)
   auf schmalen Viewports ueber den Weltenring hinauswachsen -> Ueberlappungen. Feste
   Obergrenze + Ellipsis statt endlosem Wachstum. */
.gf-title{ max-width:38vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:640px){ .gf-title{ max-width:52vw; } }

/* E2 finale Loesung (Jens 10./11.07.2026): Statt Breite am Titel-Ende zu begrenzen (Titel
   fuellt je nach Laenge fast die ganze linke Grid-Spalte), wird das Suchfeld JETZT per JS
   RECHTS am Weltenring verankert (position:absolute, right dynamisch berechnet). Dadurch ist
   eine Ueberlappung mit dem Ring strukturell unmoeglich, unabhaengig von Titel-Laenge/Viewport. */
.gf-search{ position:absolute !important; top:50%; transform:translateY(-50%); margin:0 !important; z-index:95; }
.gf-search-in:focus{ position:static !important; transform:none !important; box-shadow:0 4px 18px rgba(0,0,0,.3); }


/* MoAI 260717 readable search hardening — titles large enough, hover white-on-orange */
.gf-search-pop{background:hsl(var(--t-card)) !important;color:hsl(var(--t-card-foreground)) !important;border:2px solid hsl(var(--t-border)) !important;}
.gf-search-hit:hover{background:var(--gdti-orange,#FF6A00) !important;color:#fff !important;}
.gf-search-hit:hover *{color:#fff !important;}
.gf-search-t{font-size:15.5px !important;font-weight:850 !important;color:hsl(var(--t-card-foreground)) !important;}
.gf-search-sub{font-size:12.5px !important;color:hsl(var(--t-muted-foreground)) !important;opacity:1 !important;}


/* MoAI 260719 DE/EN Standard-Komponente — rechts neben dem Weltenkreis */
.gf-center{justify-self:center;display:flex;align-items:center;gap:8px;min-width:0;}
.gf-center .gf-display{justify-self:auto;}
.gf-lang-switch{display:flex;align-items:center;gap:3px;padding:3px;border-radius:999px;background:var(--gf-panel);border:1.5px solid var(--gdti-orange);box-shadow:0 4px 16px hsl(var(--t-ink,24 22% 14%) / .16);font-family:var(--gdti-font);}
.gf-lang-switch button{appearance:none;border:0;border-radius:999px;background:transparent;color:var(--gf-ink);font:800 11px/1 var(--gdti-font);letter-spacing:.04em;padding:7px 8px;cursor:pointer;min-width:30px;}
.gf-lang-switch button.on{background:var(--gdti-orange);color:var(--gf-bar-ink);}
.gf-lang-switch button:hover,.gf-lang-switch button:focus-visible{outline:2px solid var(--gdti-orange);outline-offset:2px;}
@media(max-width:820px){.gf-center{gap:5px}.gf-lang-switch{padding:2px}.gf-lang-switch button{font-size:10px;padding:6px 6px;min-width:26px}}
@media(max-width:560px){.gf-center{gap:4px}.gf-lang-switch button{font-size:9px;padding:5px 5px;min-width:23px}}

/* MoAI 260719 DE/EN mobile Bestandsschutz: Ring + Sprachswitch bleiben im Viewport */
@media(max-width:560px){
  .gf-overnav{padding:0 8px;gap:6px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);}
  .gf-left{padding-left:0;max-width:76px;min-width:0;gap:6px;}
  .gf-left-txt{max-width:76px;min-width:0;}
  .gf-title{max-width:72px;}
  .gf-center .gf-display{width:128px;}
  .gf-critters,.gf-mine{display:none;}
  .gf-right{gap:4px;min-width:0;}
  .gf-inner{padding:4px 7px;font-size:12px;}
  .gf-inner .av{width:20px;height:20px;}
}

/* MoAI 260719 emergency: DE/EN size parity with Suche pill. */
.gf-lang-switch{height:30px;min-height:30px;padding:0 3px;}
.gf-lang-switch button{height:24px;min-height:24px;padding:0 8px;font-size:10.5px;line-height:24px;}
@media(max-width:820px){.gf-lang-switch{height:28px;min-height:28px}.gf-lang-switch button{height:22px;min-height:22px;line-height:22px;font-size:10px;padding:0 6px;}}

/* MoAI 260719 emergency follow-up: DE/EN exakt Suchfeld-Hoehe. */
.gf-lang-switch{height:27px;min-height:27px;padding:0 3px;box-sizing:border-box;}
.gf-lang-switch button{height:21px;min-height:21px;line-height:21px;padding:0 7px;box-sizing:border-box;}
@media(max-width:820px){.gf-lang-switch{height:27px;min-height:27px}.gf-lang-switch button{height:21px;min-height:21px;line-height:21px;padding:0 6px;}}


/* ============================================================
   Ee 260727-0155: g--d STANDARD ICON-BUTTON (KKDS) — IMMER-REGEL
   Ab jetzt fuer JEDEN neuen Icon-Button (Upload, Anhang, Werkzeug-
   Buttons etc.) diese Klasse verwenden statt eigene Ad-hoc-Styles.
   Basis: identisches Muster wie .gf-act .ico (bewaehrter Bottom-
   Dock-Kreis), aber auf --t-* Tokens umgestellt, damit sie AUCH
   ausserhalb des dunklen Bottom-Bars (z.B. auf hellen Karten/Docks)
   korrekt lesbar bleibt. Rund, 2px Rahmen, Hover-Lift+Orange,
   NIE Emoji als Icon — eigenes <svg> als Kind.
   ============================================================ */
.gd-icon-btn{
  width:44px; height:44px; border-radius:50%;
  border:2px solid hsl(var(--t-border));
  background:hsl(var(--t-card));
  color:hsl(var(--t-card-foreground));
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; transition:.16s;
  font-size:19px; box-sizing:border-box;
}
.gd-icon-btn svg{ width:20px; height:20px; display:block; }
.gd-icon-btn:hover,.gd-icon-btn:focus-visible{
  background:var(--gdti-orange,#FF6A00); border-color:var(--gdti-orange,#FF6A00);
  color:#fff; transform:translateY(-2px); outline:none;
}
.gd-icon-btn.sm{ width:36px; height:36px; }
.gd-icon-btn.sm svg{ width:17px; height:17px; }

/* ==============================================================
   KKDS Button-System (Jens-Auftrag 260803) -- kanonisch, sitewide.
   Gilt fuer .btn / .gd-icon-btn / .gd-pill-option ueberall auf der Site,
   damit JEDE neue Seite automatisch KKDS-korrekte Buttons bekommt, ohne
   dass Ee/Ra das pro Seite von Hand nachbauen muessen.

   Zustaende (Jens woertlich):
   - Hover: IMMER orange HG + weisse Schrift/Icon/Rahmen.
   - Ausgewaehlt (.is-selected / [aria-pressed=true]): IMMER weisse Schrift/Icon,
     Rahmen NICHT explizit weiss (bleibt wie im Umfeld -- keine Rahmenfarbe hier setzen).
   - Active/gerade geklickt (:active): schwarzer Rahmen.
   ============================================================== */
:is(.btn,.gd-icon-btn,.gd-pill-option):hover,
:is(.btn,.gd-icon-btn,.gd-pill-option):focus-visible{
  background:var(--gdti-orange,#FF6A00) !important;
  color:#fff !important;
  border-color:var(--gdti-orange,#FF6A00) !important;
  outline:none;
}
:is(.btn,.gd-icon-btn,.gd-pill-option).is-selected,
:is(.btn,.gd-icon-btn,.gd-pill-option)[aria-pressed="true"]{
  background:var(--gdti-orange,#FF6A00);
  color:#fff;
  /* Rahmenfarbe bewusst NICHT gesetzt -- bleibt wie im Umfeld (Jens-Vorgabe) */
}
:is(.btn,.gd-icon-btn,.gd-pill-option):active{
  border-color:#000 !important;
}

/* --- Action Button (Basis) --- */
.btn{font-size:14px;font-weight:700;padding:9px 16px;border-radius:9px;border:1px solid transparent;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:.14s;}
.btn.primary{background:var(--gdti-orange,#FF6A00);color:#fff;border-color:var(--gdti-orange,#FF6A00);}

/* --- Action Button "alt" (nicht orange, aber gut lesbar) -- zwei Kontext-Varianten:
       .alt-dark = fuer Buttons auf dunklem Umfeld (schwarzer HG, weisse Schrift/Rahmen)
       .alt-light = fuer Buttons auf hellem Umfeld (creme/weisser HG, dunkle Schrift/Rahmen) --- */
.btn.alt-dark{background:#000;color:#fff;border-color:#fff;}
/* Ee 260803-1710: !important -- .gd-doc a/copa-Ketten-Blocker gewannen sonst gegen die dunkle Text-Vorgabe. */
.btn.alt-light{background:hsl(var(--t-card)) !important;color:hsl(var(--t-card-foreground)) !important;border-color:hsl(var(--t-card-foreground) / .28) !important;}

/* --- Action Button rund: siehe .gd-icon-btn oben, gleiche Hover/Selected/Active-Zustaende gelten automatisch --- */

/* --- Optionswahl = Pill (Einzelauswahl, ggf. mit Haekchen bei "zusaetzlich aktiviert") --- */
.gd-pill-option{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;padding:6px 14px;border-radius:999px;border:1px solid hsl(var(--t-card-foreground) / .22);background:hsl(var(--t-card));color:hsl(var(--t-card-foreground));cursor:pointer;text-decoration:none;transition:.14s;}
.gd-pill-option .chk{display:none;font-size:12px;}
.gd-pill-option.is-selected .chk{display:inline;}

/* --- Wahl mehrerer Optionen = zusammenhaengende Pills (Segmented Group) --- */
.gd-pill-group{display:inline-flex;border-radius:999px;overflow:hidden;border:1px solid hsl(var(--t-card-foreground) / .22);}
.gd-pill-group .gd-pill-option{border-radius:0;border:none;border-right:1px solid hsl(var(--t-card-foreground) / .16);}
.gd-pill-group .gd-pill-option:last-child{border-right:none;}