/* ============================================================ gdti-copa.css · Control-Panel (untere Leiste, volle Breite) Story · Namechecker · QR + 5 Stimmungs-Schemata (live Hover) v0.1 · 2026-06-04 · Agi ============================================================ */ /* 5 STIMMUNGS-SCHEMATA als Variablen-Sets — werden per data-theme am gesetzt */ /* ====== THEMES — je eigene Bg-Struktur + Leisten-Oberfläche ====== */ :root,[data-theme="default"]{ /* gdti-Default — echter g--d-times-Look (gdtimes.ussume.com): warmer Grau→Cream-Verlauf, Pfirsich-Karten, schwarze Schrift */ --gf-bg-size:cover; --gf-bg-rep:no-repeat; --gf-bg:#efe6d8; /* HG-Verlauf: oben kühles Grau, unten warmes Cream (wie echte App) */ --gf-surface:linear-gradient(180deg,#cfc9c1 0%,#e4ddd2 38%,#efe6d8 100%); --gf-panel:#ffffff; /* Karten weiß */ --gf-tile:#f6dcc0; /* Pfirsich-Kachel (Events) */ --gf-ink:#20201d; --gf-ink-soft:#6f6a61; --gf-accent:#FF6A00; --gf-rule:#d9cdba; /* Über-Navi + Bottom-Bar: gebuerstetes Alu (Jens 7.6.: nicht weiss, wie gdti-Leisten) */ --gf-bar:linear-gradient(0deg,rgba(0,0,0,.12),rgba(255,255,255,.06)),var(--gf-alu); --gf-bar-edge:rgba(70,74,80,.55); --gf-bar-ink:#23262b; --gf-crumb-ink:rgba(32,32,29,.62); --gf-display-bg:radial-gradient(90% 130% at 0% 50%,rgba(255,160,70,.18),transparent 60%),radial-gradient(90% 130% at 100% 50%,rgba(255,160,70,.18),transparent 60%),linear-gradient(180deg,#ece5d8,#ddd3c2); --gf-display-edge:rgba(120,90,50,.32); --gf-world-ink:#20201d; --gf-world-dim-ink:rgba(32,32,29,.42); --gf-tile-edge:#d9cdba; --gf-panel-brush:none; } /* Default-HG: warmer Grau→Cream-Verlauf auf body (kein Muster) */ :root:not([data-theme]) body.gdti, [data-theme="default"] body.gdti{ background:var(--gf-surface)!important; background-attachment:fixed; } /* Inhalte: weiße Karten, schwarze Schrift (echter gdti-Look) */ [data-theme="default"] .gdti-card, :root:not([data-theme]) .gdti-card{ background:var(--gf-panel)!important; color:var(--gf-ink)!important; } /* Links: orange + unterstrichen */ [data-theme="default"] a:not(.gf-mi):not(.gdti-pill):not(.tab):not(.gf-world), :root:not([data-theme]) body.gdti a:not(.gf-mi):not(.gdti-pill):not(.tab):not(.gf-world){ color:var(--gf-accent,#FF6A00)!important; text-decoration:none; } [data-theme="holz"]{ /* Mahagoni-Wurzelholz (Mercedes-Armatur) */ --gf-bg:#0c1a12; --gf-panel:#f2ede3 url('tex/birch-wood-3.jpg'); --gf-ink:#15130f; --gf-ink-soft:#5a5348; --gf-accent:#d98a3f; --gf-rule:#cdbfa8; --gf-bg-size:cover,cover; --gf-bg-rep:no-repeat,no-repeat; --gf-surface:linear-gradient(180deg,rgba(6,18,11,.30),rgba(4,12,8,.42)),url('/assets/samt-smaragd.jpg'); /* Leiste = echtes poliertes Wurzelholz: dichte Maserwirbel + Glanz */ --gf-bar:linear-gradient(180deg,rgba(40,18,8,.22),rgba(20,9,4,.5)),url("/tex/wurzelholz.png"); --gf-bar-edge:#0e0705; --gf-tile:rgba(255,220,180,.10); --gf-tile-edge:rgba(210,150,90,.5); --gf-bar-ink:#f4dcc0; --gf-crumb-ink:rgba(244,220,192,.6); --gf-display-bg:linear-gradient(180deg,#cfe6cf,#aecfae); --gf-display-edge:#0e0705; --gf-world-ink:#2a1409; --gf-world-dim-ink:rgba(42,20,9,.42); } [data-theme="paris"]{ /* Nachts in Paris, Jazz-Club, verraucht */ --gf-bg:#0e1424; --gf-panel:#1c2747; --gf-ink:#eef2fb; --gf-ink-soft:#d8e2f6; --gf-accent:#e8b04b; --gf-rule:#2c3866; --gf-surface:radial-gradient(140% 120% at 70% 0%,#243b6b 0,#101729 60%,#0a0f1c 100%); --gf-bar:linear-gradient(180deg,#1c2540,#0d1220); --gf-bar-edge:rgba(0,0,0,.5); --gf-tile:rgba(232,176,75,.10); --gf-tile-edge:rgba(232,176,75,.35); --gf-bar-ink:#f3e9d4; --gf-crumb-ink:rgba(238,242,251,.6); --gf-display-bg:linear-gradient(180deg,#1c2747,#0d1424); --gf-display-edge:rgba(0,0,0,.5); --gf-world-ink:#eef2fb; --gf-world-dim-ink:rgba(238,242,251,.42); } [data-theme="hawaii"]{ /* Hawaii Beach — HELL: Sand + Türkiswasser, dunkle Schrift */ --gf-bg:#eaf7f4; --gf-panel:#f2ede3 url('tex/birch-wood-3.jpg'); --gf-ink:#0c3b3a; --gf-ink-soft:#4a807d; --gf-accent:#ff6f5e; --gf-rule:#bfe6e0; --gf-surface: radial-gradient(120% 80% at 50% 120%, #f7e6c4 0%, #f0d9a8 18%, transparent 42%), linear-gradient(180deg, #aee9ff 0%, #6fd3e0 26%, #3fb9c4 50%, #5ec9b8 64%, #f3e7c8 86%, #ecd9a6 100%); --gf-bar:linear-gradient(180deg,#6fd1c6,#3fb3a8); --gf-bar-edge:rgba(255,255,255,.45); --gf-tile:rgba(255,255,255,.55); --gf-tile-edge:rgba(12,59,58,.25); --gf-bar-ink:#0c3b3a; --gf-crumb-ink:rgba(12,59,58,.62); --gf-display-bg:linear-gradient(180deg,#bdeee6,#7fd9cf); --gf-display-edge:rgba(12,59,58,.3); --gf-world-ink:#0c3b3a; --gf-world-dim-ink:rgba(12,59,58,.45); } [data-theme="dawn"]{ /* Beartaria Dawn — warmes Morgenrot/Honig */ --gf-bg:#3a2417; --gf-panel:#241008; --gf-ink:#fff3e6; --gf-ink-soft:#ffdcb8; --gf-accent:#ff9d4d; --gf-rule:#6b4226; --gf-surface:radial-gradient(120% 130% at 50% 120%,#ff9d4d 0,#c25e22 35%,#3a2417 100%); --gf-bar:linear-gradient(180deg,#5a3620,#33200f); --gf-bar-edge:rgba(0,0,0,.4); --gf-tile:rgba(255,200,140,.12); --gf-tile-edge:rgba(255,180,110,.4); --gf-bar-ink:#ffe7cf; --gf-crumb-ink:rgba(255,243,230,.6); --gf-display-bg:linear-gradient(180deg,#3a2114,#1f0f06); --gf-display-edge:rgba(0,0,0,.4); --gf-world-ink:#ffe7cf; --gf-world-dim-ink:rgba(255,231,207,.44); } [data-theme="tokyo"]{ /* Neon Tokyo — schwarz, glühendes Neon-Grün */ --gf-bg:#060a07; --gf-panel:#0d1a12; --gf-ink:#eafff0; --gf-ink-soft:#cdf5da; --gf-accent:#2bff88; --gf-rule:#163e28; --gf-surface:radial-gradient(100% 80% at 80% 8%,#2bff8822 0,transparent 45%),radial-gradient(90% 70% at 12% 92%,#10ffc022 0,transparent 45%),#060a07; --gf-bar:linear-gradient(180deg,#0d160f,#050806); --gf-bar-edge:#2bff88; --gf-tile:rgba(43,255,136,.13); --gf-tile-edge:#2bff88; --gf-bar-ink:#eafff0; --gf-crumb-ink:rgba(234,255,240,.6); --gf-display-bg:linear-gradient(180deg,#0d160f,#050806); --gf-display-edge:#2bff88; --gf-world-ink:#eafff0; --gf-world-dim-ink:rgba(234,255,240,.42); --gf-display-radius:26px; } /* ——— Control-Panel-Leiste ——— */ .gf-copa{ position:fixed; left:24px; right:270px; bottom:18px; /* endet VOR oK·KI·CP-Block (Jens 8.6.: keine Klick-Ueberlappung) */ display:flex; align-items:center; gap:18px; z-index:55; height:72px; background:var(--gf-bar, linear-gradient(180deg,#2a2622,#1b1815)); border:2px solid var(--gf-bar-edge,rgba(0,0,0,.35)); color:var(--gf-bar-ink,#f3ece0); border-radius:36px; padding:0 24px; box-shadow:0 8px 30px rgba(0,0,0,.3); transition:background .35s, border-color .35s; } .gf-copa .grp{ display:flex; align-items:center; gap:9px; } .gf-copa .spacer{ flex:1 1 auto; min-width:10px; } .gf-copa .vsep{ width:1px; align-self:stretch; background:var(--gf-rule,#d9cdba); margin:4px 2px; } /* Aktions-btns (Story / Namechecker / QR) */ .gf-act{ display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; border:none; background:transparent; color:var(--gf-ink,#20201d); font-family:var(--gdti-font); } .gf-act .ico{ width:44px; height:44px; border-radius:50%; border:2px solid var(--gf-tile-edge,rgba(255,255,255,.22)); background:var(--gf-tile,rgba(255,255,255,.10)); color:var(--gf-bar-ink,#f3ece0); display:flex; align-items:center; justify-content:center; font-size:19px; transition:.16s; position:relative; overflow:hidden; } .gf-act .lbl{ font-size:8px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:rgba(243,236,224,.6); } .gf-act:hover .ico{ background:var(--gdti-orange,#FF6A00); border-color:var(--gdti-orange,#FF6A00); color:#fff; transform:translateY(-2px); } .gf-act:hover .lbl{ color:var(--gdti-orange,#FF6A00); } /* Story-btn GRÖSSER + Zeitungsseiten-Look */ .gf-act.story .ico{ width:44px; height:44px; border-radius:50%; flex-direction:column; gap:2px; padding:9px 9px 8px; align-items:stretch; justify-content:flex-start; background:#f4ede1; overflow:hidden; } .gf-act.story .np-h{ height:5px; background:var(--gf-ink,#2a2419); border-radius:1px; } .gf-act.story .np-row{ display:flex; gap:3px; flex:1; } .gf-act.story .np-img{ width:18px; background:var(--gf-accent,#FF6A00); border-radius:2px; opacity:.85; } .gf-act.story .np-lines{ flex:1; display:flex; flex-direction:column; gap:2px; justify-content:center; } .gf-act.story .np-lines i{ height:2px; background:var(--gf-ink-soft,#9a8f80); border-radius:1px; } .gf-act.story .np-lines i:nth-child(2){ width:80%; } .gf-act.story:hover .ico{ transform:translateY(-2px); border-color:var(--gf-accent,#FF6A00); } /* Namechecker-btn: typografische Anführungszeichen „ " */ .gf-act.namecheck .ico{ font-family:Georgia,'Times New Roman',serif; font-size:26px; font-weight:700; line-height:0; padding-top:6px; } /* QR-btn rund */ .gf-act.qr .ico{ border-radius:50%; } /* ——— 5 Stimmungs-btns ——— */ .gf-moods{ display:flex; align-items:center; gap:7px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } /* Swatches: RUND, alle gleiche Farbe + Groesse, randlos, nur 2px Schatten */ .gf-mood{ width:24px; height:24px; border-radius:50%; cursor:pointer; position:relative; flex:0 0 auto; border:0!important; background:var(--gf-tile,rgba(255,255,255,.16))!important; box-shadow:0 2px 4px rgba(0,0,0,.30); filter:none!important; transition:transform .20s, box-shadow .33s, background .27s; } .gf-mood:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(0,0,0,.30), inset 0 0 0 2px rgba(244,124,32,.85), 0 0 0 2px rgba(244,124,32,.85); } /* aktiv (bewusst gewaehlt): Inneres ambient-orange gefuellt, gedaempft (NICHT leuchtend wie oK), sanft atmend */ .gf-mood.active{ background:rgba(214,104,28,.62)!important; box-shadow:0 2px 5px rgba(0,0,0,.32), inset 0 0 0 2px rgba(244,124,32,.55); animation:gfmoodamb 3.6s ease-in-out infinite; } @keyframes gfmoodamb{ 0%,100%{ background:rgba(206,100,26,.55)!important; } 50%{ background:rgba(224,112,32,.70)!important; } } .gf-mood[data-name]:hover::after{ content:attr(data-name); position:absolute; bottom:32px; left:50%; transform:translateX(-50%); background:#1a1714; color:#fff; font-size:10px; font-weight:700; padding:3px 9px; border-radius:8px; white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.4); z-index:60; } /* ——— Theme GLOBAL: ganze Seite inkl. Hintergrund ——— */ html[data-theme]{ background:var(--gf-bg)!important; } html[data-theme]{ min-height:100%; background:var(--gf-surface)!important; background-attachment:fixed!important; background-size:var(--gf-bg-size,cover)!important; background-repeat:var(--gf-bg-rep,no-repeat)!important; } /* Holz-Samt HART verdrahtet — gewinnt über jeden Inline-State (KI/Foto). */ html[data-theme="holz"]{ background:linear-gradient(180deg,rgba(6,18,11,.30),rgba(4,12,8,.42)),url('/assets/samt-smaragd.jpg')!important; background-size:cover,cover!important; background-repeat:no-repeat,no-repeat!important; background-attachment:fixed!important; } html[data-theme="ki"][data-theme]{ background:transparent!important; } html.gf-own-img[data-theme]{ background:transparent!important; } html[data-theme] body{ min-height:100vh; background:transparent!important; color:var(--gf-ink); transition:color .4s; } /* Karten/Panels mitfärben (gängige Klassen) */ html[data-theme] .card, html[data-theme] .panel, html[data-theme] .gf-card, html[data-theme] .gdti-card, html[data-theme] .box{ background:var(--gf-panel)!important; background-size:340px!important; background-blend-mode:multiply!important; color:var(--gf-ink)!important; border-color:var(--gf-rule)!important; transition:background .4s,color .4s,border-color .4s; } html[data-theme] .gdti-card *{ color:var(--gf-ink)!important; } /* Fließtext-p mit inline ink-soft: bei dunklen Themes voll aufhellen (Lesbarkeit) */ html[data-theme="dawn"] .gdti-card p, html[data-theme="dawn"] .gdti-card p *, html[data-theme="tokyo"] .gdti-card p, html[data-theme="tokyo"] .gdti-card p *, html[data-theme="paris"] .gdti-card p, html[data-theme="paris"] .gdti-card p *{ color:var(--gf-ink)!important; opacity:.94; } html[data-theme] .gdti-card strong, html[data-theme] .gdti-card b{ color:var(--gf-ink)!important; } html[data-theme] .gdti-card code{ background:rgba(0,0,0,.18)!important; color:var(--gf-accent)!important; } html[data-theme] h1,html[data-theme] h2,html[data-theme] h3{ color:var(--gf-ink)!important; } html[data-theme] a{ color:var(--gf-accent)!important; } /* ============================================================ HANDY-LAYOUT (≤640px): 3 Sammel-btns Tools (li, fächert auf) · Style (mi, zeigt Swatches) · oK-Zone (re, mit CP+KI) ============================================================ */ .gf-copa-mobtoggle{ display:none; } /* die 3 Sammel-btns: nur mobil */ @media (max-width:640px){ .gf-copa{ left:10px; right:10px; bottom:10px; padding:7px 12px; gap:10px; justify-content:space-between; } /* Desktop-Inhalte verstecken, per Klassen ein-/ausblendbar */ .gf-copa .grp{ display:none; position:absolute; bottom:62px; left:10px; flex-direction:row; background:var(--gf-panel); border:2px solid var(--gf-rule); border-radius:18px; padding:8px 12px; box-shadow:0 8px 24px rgba(40,25,10,.22); } .gf-copa.tools-open .grp{ display:flex; } .gf-moods{ position:absolute; left:50%; bottom:62px; top:auto; transform:translateX(-50%); display:none; background:var(--gf-panel); border:2px solid var(--gf-rule); border-radius:18px; padding:8px 12px; box-shadow:0 8px 24px rgba(40,25,10,.22); } .gf-copa.style-open .gf-moods{ display:flex; } .gf-gdti{ display:none; } /* gdti steckt im Tools-Sammler */ .gf-copa .vsep{ display:none; } /* Die 3 Sammel-btns sichtbar */ .gf-copa-mobtoggle{ display:flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:50%; border:2px solid var(--gf-rule); background:var(--gf-panel); color:var(--gf-ink); font-size:13px; font-weight:700; cursor:pointer; font-family:var(--gdti-font); flex:0 0 auto; transition:.15s; } .gf-copa-mobtoggle.active{ background:var(--gf-accent); color:#fff; border-color:var(--gf-accent); } .gf-copa-mobtoggle .mi{ font-size:20px; } } @media (min-width:641px){ .gf-copa-mobtoggle{ display:none!important; } } /* gdti-Logo-btn rund (dunkle Leiste) */ .gf-gdti{ width:44px; height:44px; border-radius:50%; border:2px solid var(--gf-tile-edge,rgba(255,255,255,.22)); background:var(--gf-tile,rgba(255,255,255,.10)); color:var(--gf-bar-ink,#f3ece0); font-family:var(--gdti-font); font-weight:800; font-size:12px; cursor:pointer; transition:.16s; flex:0 0 auto; } .gf-gdti:hover{ background:var(--gdti-orange,#FF6A00); border-color:var(--gdti-orange,#FF6A00); color:#fff; } /* Holz aktiv: echte Maserung als Seiten-Hintergrund */ html[data-theme="holz"] .gf-copa, html[data-theme="holz"] .gf-overnav{ background-blend-mode:normal, normal; background-size:cover, cover; background-position:center; } /* ——— KI-Style: random-schimmernder Swatch + Theme + Dialog ——— */ .gf-mood.ki{ background:var(--gf-tile,rgba(255,255,255,.16))!important; } .gf-mood.ki.active{ background:rgba(214,104,28,.62)!important; box-shadow:0 2px 5px rgba(0,0,0,.32), inset 0 0 0 2px rgba(244,124,32,.55); animation:gfmoodamb 3.6s ease-in-out infinite; } /* KI-Theme = lebendiger Random-Verlauf bis User generiert */ [data-theme="ki"]{ --gf-bg:#F4EFE6; --gf-panel:#fdfbf6; --gf-ink:#1F1B17; --gf-ink-soft:#5a5348; --gf-accent:#FF6A00; --gf-rule:#d8d0c2; --gf-surface:radial-gradient(circle at 62% 20%, rgba(255,220,140,0.35) 0%, rgba(255,200,100,0.14) 36%, transparent 66%), radial-gradient(circle at 65% 25%, rgba(255,200,100,0.10) 0%, transparent 50%), #F4EFE6; --gf-bar:linear-gradient(180deg,#fbf7ef,#ece4d4); --gf-bar-edge:rgba(31,27,23,.16); --gf-tile:rgba(31,27,23,.06); --gf-tile-edge:rgba(244,124,32,.5); --gf-bar-ink:#1F1B17; } html[data-theme="ki"]{ background-attachment:fixed!important; background-size:cover!important; } @keyframes kibg{ 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} } /* KI-Dialog-Box (schwebt überm Style-btn) */ .gf-ki-box{ position:fixed; bottom:84px; left:50%; transform:translateX(-50%) translateY(8px); width:340px; max-width:92vw; background:var(--gf-display-bg,#1c1814); color:var(--gf-world-ink,#f3ece0); border:2px solid var(--gdti-orange,#FF6A00); border-radius:14px; padding:14px; box-shadow:0 12px 40px rgba(40,20,5,.28); z-index:120; opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; font-family:var(--gdti-font); } .gf-ki-box.open{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); } .gf-ki-head{ font-size:13px; font-weight:800; color:inherit; margin-bottom:8px; } .gf-ki-ta{ width:100%; box-sizing:border-box; min-height:64px; resize:vertical; font-family:var(--gdti-font); background:rgba(255,255,255,.14); color:inherit; caret-color:var(--gdti-orange); font-size:12px; border:1px solid rgba(128,128,128,.32); border-radius:9px; padding:8px; } .gf-ki-go{ margin-top:8px; width:100%; font-family:var(--gdti-font); font-size:12.5px; font-weight:700; padding:9px; border-radius:9px; border:none; background:var(--gdti-orange,#FF6A00); color:#fff; cursor:pointer; transition:.15s; } .gf-ki-go:hover{ background:#d95f12; } .gf-ki-hint{ font-size:10.5px; color:inherit; opacity:.62; margin-top:8px; line-height:1.55; } /* Holz: Inhalts-Karten dunkel (KEIN Birkenholz, dunkles Wurzelholz-Feeling) */ /* holz: Karten = Birkenholz + schwarze Schrift (erbt globale gdti-card/box-Regel). Kein dunkler Override mehr. */ html[data-theme="holz"] .box code, html[data-theme="holz"] .gdti-card code{ background:rgba(120,80,30,.12)!important; color:#7a4a18!important; } /* Paris/Dawn/Tokyo: ebenfalls KEIN Birken (nur default+hawaii hell-birke gewollt) */ html[data-theme="paris"] .box{ background-image:none!important; } html[data-theme="dawn"] .box{ background-image:none!important; } html[data-theme="tokyo"] .box{ background-image:none!important; } /* Holz-HG: grüner Samt — Textur-Kachelgröße + fixiert */ /* Hawaii: oranger Rahmen um Inhaltsblöcke */ html[data-theme="hawaii"] .gdti-card, html[data-theme="hawaii"] .box{ border:2px solid #FF6A00!important; box-shadow:0 6px 22px rgba(244,124,32,.18)!important; } /* --- Frame-Fix: nackter Hero-Text DIREKT auf body (kein Karten-Wrapper) lesbar auf dunklen Themes --- */ /* --- Hero-Lesbarkeit auf dunklen Themes: nackter Top-Level-Text (h1/h2/h3/.sub/lead-p) egal ob direkt auf body ODER in .wrap/main — aber NICHT in Karten (.box/.gdti-card/.note/.setup-card) --- */ .gf-dark-hero-target{} html[data-theme="holz"] > body > h1, html[data-theme="holz"] > body > h2, html[data-theme="holz"] > body > .sub, html[data-theme="holz"] > body > p.sub, html[data-theme="paris"] > body > h1, html[data-theme="paris"] > body > h2, html[data-theme="paris"] > body > .sub, html[data-theme="dawn"] > body > h1, html[data-theme="dawn"] > body > h2, html[data-theme="dawn"] > body > .sub, html[data-theme="tokyo"] > body > h1, html[data-theme="tokyo"] > body > h2, html[data-theme="tokyo"] > body > .sub, html[data-theme="holz-water"] > body > h1, html[data-theme="holz-water"] > body > h2, html[data-theme] > body > main > h1, html[data-theme] > body > main > .sub, html[data-theme] > body > .wrap > h1, html[data-theme] > body > .wrap > .sub{ color:#f4ecdf !important; text-shadow:0 2px 16px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.85); } /* Fließtext direkt in main/.wrap (kein Karten-Wrapper) auf dunklen Themes lesbar */ html[data-theme="holz"] main > p, html[data-theme="holz"] main > ul, html[data-theme="holz"] .wrap > p, html[data-theme="paris"] main > p, html[data-theme="paris"] main > ul, html[data-theme="paris"] .wrap > p, html[data-theme="dawn"] main > p, html[data-theme="dawn"] main > ul, html[data-theme="dawn"] .wrap > p, html[data-theme="tokyo"] main > p, html[data-theme="tokyo"] main > ul, html[data-theme="tokyo"] .wrap > p, html[data-theme="holz-water"] main > p, html[data-theme="holz-water"] main > ul{ color:#ece3d4 !important; text-shadow:0 1px 8px rgba(0,0,0,.6); } /* Karten-Inhalte NICHT aufhellen (Karten haben eigenen hellen HG) — breit gefasst */ html[data-theme] .box :is(h1,h2,h3,h4,p,li), html[data-theme] .gdti-card :is(h1,h2,h3,h4,p,li), html[data-theme] .note :is(h1,h2,h3,h4,p,li), html[data-theme] .setup-card :is(h1,h2,h3,h4,p,li), html[data-theme] .gate :is(h1,h2,h3,h4,p,li), html[data-theme] .card :is(h1,h2,h3,h4,p,li), html[data-theme] .kl-card :is(h1,h2,h3,h4,p,li), html[data-theme] .zsf-card :is(h1,h2,h3,h4,p,li), html[data-theme] [class*="card"] :is(h1,h2,h3,h4,p,li), html[data-theme] [class*="-box"] :is(h1,h2,h3,h4,p,li){ text-shadow:none !important; color:inherit !important; } /* Max-Spezifität-Fallback (body[class]-präfix gewinnt live gegen Aufheller) */ html:not([data-theme="paris"]):not([data-theme="dawn"]):not([data-theme="tokyo"]):not([data-theme="ki"]) body[class] [class*="card"] :is(h1,h2,h3,h4,p,li), html:not([data-theme="paris"]):not([data-theme="dawn"]):not([data-theme="tokyo"]):not([data-theme="ki"]) body[class] [class*="-box"] :is(h1,h2,h3,h4,p,li), html:not([data-theme="paris"]):not([data-theme="dawn"]):not([data-theme="tokyo"]):not([data-theme="ki"]) body[class] .box :is(h1,h2,h3,h4,p,li), html:not([data-theme="paris"]):not([data-theme="dawn"]):not([data-theme="tokyo"]):not([data-theme="ki"]) body[class] .note :is(h1,h2,h3,h4,p,li), html:not([data-theme="paris"]):not([data-theme="dawn"]):not([data-theme="tokyo"]):not([data-theme="ki"]) body[class] .gate-card :is(h1,h2,h3,h4,p,li), html:not([data-theme="paris"]):not([data-theme="dawn"]):not([data-theme="tokyo"]):not([data-theme="ki"]) body[class] .setup-card :is(h1,h2,h3,h4,p,li){ color:#2a2724 !important; text-shadow:none !important; } /* Dunkle Themes (paris/dawn/tokyo): Card-Text HELL erzwingen (gewinnt gegen alte #2a2724-Regel) */ html[data-theme="paris"] [class*="card"] :is(h1,h2,h3,h4,p,li,span,b,strong), html[data-theme="dawn"] [class*="card"] :is(h1,h2,h3,h4,p,li,span,b,strong), html[data-theme="tokyo"] [class*="card"] :is(h1,h2,h3,h4,p,li,span,b,strong), html[data-theme="ki"] [class*="card"] :is(h1,h2,h3,h4,p,li,span,b,strong){ color:var(--gf-ink)!important; text-shadow:none!important; } /* Fließtext-p (auch mit inline ink-soft) -> heller ink-soft, nicht ink-hart */ html[data-theme="paris"] [class*="card"] p[style], html[data-theme="dawn"] [class*="card"] p[style], html[data-theme="tokyo"] [class*="card"] p[style], html[data-theme="ki"] [class*="card"] p[style]{ color:var(--gf-ink-soft)!important; } /* seltene Variante: Watercolor-Smaragd statt Samt */ [data-theme="holz-water"]{ --gf-bg:#0d2a20; --gf-panel:#f2ede3 url('tex/birch-wood-3.jpg'); --gf-ink:#15130f; --gf-ink-soft:#5a5348; --gf-accent:#d98a3f; --gf-rule:#cdbfa8; --gf-bg-size:cover,cover; --gf-bg-rep:no-repeat,no-repeat; --gf-surface:linear-gradient(180deg,rgba(8,40,28,.18),rgba(6,30,22,.30)),url('/assets/watercolor-gruen.jpg'); --gf-bar:linear-gradient(180deg,rgba(40,18,8,.22),rgba(20,9,4,.5)),url("/tex/wurzelholz.png"); --gf-bar-edge:#0e0705; --gf-tile:rgba(255,220,180,.10); --gf-tile-edge:rgba(210,150,90,.5); --gf-bar-ink:#f4dcc0; --gf-crumb-ink:rgba(244,220,192,.6); --gf-display-bg:linear-gradient(180deg,#cfe6cf,#aecfae); --gf-display-edge:#0e0705; --gf-world-ink:#2a1409; --gf-world-dim-ink:rgba(42,20,9,.42); } /* Default: Hero-Titel/Sub auf Samt -> hell + Schatten (gilt für culture/etappen/quickies/utopia etc.) */ html[data-theme] header.hero h1, html[data-theme] header.hero h2, html[data-theme] header.hero .sub, html[data-theme] header.hero p{ color:#f4ecdf !important; text-shadow:0 2px 16px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.85); } /* Ausnahme: Seiten mit eigenem hellen cream-Hero -> body.gf-light-hero -> Titel dunkel (theme-unabhängig, max spezifisch) */ body.gf-light-hero header.hero h1, body.gf-light-hero header.hero h2, body.gf-light-hero header.hero .sub, body.gf-light-hero header.hero p{ color:#2a2724 !important; text-shadow:none !important; } /* ===== Scrollbalken — dezent, im Frame-Stil (Jens 4.6. 20:39) ===== Track: schwarz 50% · Greifer: Wurzelholz mit 1-2px Schatten ===== */ /* WebKit (Safari/Chrome) */ html[data-theme] ::-webkit-scrollbar, body[class] ::-webkit-scrollbar{ width:12px; height:12px; } html[data-theme] ::-webkit-scrollbar-track, body[class] ::-webkit-scrollbar-track{ background:rgba(0,0,0,.5); } html[data-theme] ::-webkit-scrollbar-thumb, body[class] ::-webkit-scrollbar-thumb{ background:#3a2414 url("/tex/wurzelholz.png"); background-size:120px; border-radius:7px; border:2px solid rgba(0,0,0,.5); box-shadow:inset 0 1px 2px rgba(255,210,160,.18), 0 1px 2px rgba(0,0,0,.55); } html[data-theme] ::-webkit-scrollbar-thumb:hover, body[class] ::-webkit-scrollbar-thumb:hover{ background-color:#4a2e18; } html[data-theme] ::-webkit-scrollbar-corner, body[class] ::-webkit-scrollbar-corner{ background:rgba(0,0,0,.5); } /* Firefox */ html[data-theme], body[class]{ scrollbar-width:thin; scrollbar-color:#3a2414 rgba(0,0,0,.5); } /* Scrollbar auch im DEFAULT-Style (kein data-theme nötig) */ ::-webkit-scrollbar{ width:12px; height:12px; } ::-webkit-scrollbar-track{ background:rgba(0,0,0,.5); } ::-webkit-scrollbar-thumb{ background:#3a2414 url("/tex/wurzelholz.png"); background-size:120px; border-radius:7px; border:2px solid rgba(0,0,0,.5); box-shadow:inset 0 1px 2px rgba(255,210,160,.18), 0 1px 2px rgba(0,0,0,.55); } ::-webkit-scrollbar-thumb:hover{ background-color:#4a2e18; } ::-webkit-scrollbar-corner{ background:rgba(0,0,0,.5); } html{ scrollbar-width:thin; scrollbar-color:#3a2414 rgba(0,0,0,.5); } /* ============================================================ BRÜCKE: Inhalts-Seiten (culture/quickies/etappen/crew/werte…) nutzen lokale --paper/--cream/--ink. Bei aktivem Theme mappen wir diese auf die Theme-Variablen → lesbar in jedem Stil. ============================================================ */ html[data-theme]{ --paper: var(--gf-bg); --cream: var(--gf-panel); --ink: var(--gf-ink); --ink-soft: var(--gf-ink-soft); --orange-soft: rgba(244,124,32,.18); } /* Karten/Boxen mit eigenem hellem HG -> Theme-Panel + heller Text */ html[data-theme] .area-card, html[data-theme] .rs-intro, html[data-theme] .placeholder, html[data-theme] .item, html[data-theme] .player-stub, html[data-theme] .sub-section .lead{ background:var(--gf-panel)!important; color:var(--gf-ink)!important; border-color:var(--gf-rule,rgba(255,255,255,.16))!important; } html[data-theme] .area-card *, html[data-theme] .item *, html[data-theme] .rs-intro *, html[data-theme] .placeholder *{ color:var(--gf-ink)!important; } /* Fließtext-Überschriften (h1-h3, .sub, .lead) sicher hell */ html[data-theme] h1, html[data-theme] h2, html[data-theme] h3, html[data-theme] .hero p.sub, html[data-theme] .area-card .ttl{ color:var(--gf-ink)!important; } /* Section-Label / it-sub / meta = ink-soft (heller Akzent) */ html[data-theme] .it-sub, html[data-theme] .it-meta, html[data-theme] .sec-label{ color:var(--gf-ink-soft)!important; } /* ===== oK Petal-Hover-Brücke (Jens 5.6.: Knöpfe verschwinden) ===== */ /* unsichtbares Pad unter/um die Petal-Ebene füllt die Lücke oK<->Blätter */ .petals-open .petal-layer::before{ content:''; position:absolute; right:-60px; bottom:-60px; width:240px; height:240px; pointer-events:auto; } /* Petals etwas größere klick-/hover-fläche */ .gdti-petal{ outline:8px solid transparent; outline-offset:-8px; } /* ===== KI-Style HG-Muster-Layer (Jens 6.6.: Bilder/Muster passend zu den Worten) ===== */ .gf-sky{ position:fixed; inset:0; z-index:-1; pointer-events:none; background-size:cover; background-position:center; transition:background .6s ease, opacity .6s ease; } /* ===== Wetter-Wolken-Layer (über gf-sky, unter Inhalt) ===== */ .gf-clouds{ position:fixed; inset:0; z-index:-1; pointer-events:none; background-size:cover; background-repeat:no-repeat; filter:blur(8px); transition:background .8s ease, opacity .8s ease; } /* ===== KI-Style Save/Load (Jens 6.6.) ===== */ .gf-ki-row{ display:flex; gap:8px; margin-top:8px; } .gf-ki-row button{ flex:1; padding:7px 8px; border-radius:9px; cursor:pointer; font:600 12px system-ui; border:1.5px solid var(--gf-rule,rgba(0,0,0,.15)); background:var(--gf-tile,rgba(0,0,0,.05)); color:var(--gf-ink,#222); transition:background .15s,border-color .15s; } .gf-ki-row button:hover{ background:var(--gdti-orange); border-color:var(--gdti-orange); color:#fff; } .gf-ki-list{ margin-top:8px; max-height:180px; overflow:auto; border-radius:9px; border:1px solid var(--gf-rule,rgba(0,0,0,.12)); background:var(--gf-tile,rgba(0,0,0,.03)); } .gf-ki-li{ display:flex; align-items:center; gap:8px; padding:7px 10px; cursor:pointer; font:13px system-ui; color:var(--gf-ink,#222); border-bottom:1px solid var(--gf-rule,rgba(0,0,0,.08)); } .gf-ki-li:last-child{ border-bottom:0; } .gf-ki-li:hover{ background:var(--gdti-orange); color:#fff; } .gf-ki-li .nm{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gf-ki-li .del{ border:0; background:transparent; color:inherit; opacity:.5; cursor:pointer; font-size:13px; } .gf-ki-li .del:hover{ opacity:1; } .gf-ki-li.muted{ color:var(--gf-ink-soft,#888); cursor:default; justify-content:center; } .gf-ki-li.muted:hover{ background:transparent; color:var(--gf-ink-soft,#888); } /* Inline-Namensfeld beim Speichern */ .gf-ki-namewrap{ display:flex; gap:6px; margin-top:8px; } .gf-ki-name{ flex:1; padding:7px 10px; border-radius:9px; font:13px system-ui; border:1.5px solid var(--gdti-orange); background:var(--gf-panel,#fff); color:var(--gf-ink,#222); } .gf-ki-nameok,.gf-ki-namex{ width:34px; border-radius:9px; cursor:pointer; font-size:14px; border:1.5px solid var(--gf-rule,rgba(0,0,0,.15)); background:var(--gf-tile,rgba(0,0,0,.05)); color:var(--gf-ink,#222); } .gf-ki-nameok:hover{ background:var(--gdti-orange); border-color:var(--gdti-orange); color:#fff; } /* Kontrast-Fix: KI-Box ist eigenes dunkles Panel -> Buttons/Liste fest hell, theme-unabhängig */ .gf-ki-box .gf-ki-row button{ background:rgba(255,255,255,.10) !important; color:#f2efe9 !important; border-color:rgba(255,255,255,.22) !important; } .gf-ki-box .gf-ki-row button:hover{ background:var(--gdti-orange) !important; border-color:var(--gdti-orange) !important; color:#fff !important; } .gf-ki-box .gf-ki-list{ background:rgba(0,0,0,.28) !important; border-color:rgba(255,255,255,.16) !important; } .gf-ki-box .gf-ki-li{ color:#f2efe9 !important; border-bottom-color:rgba(255,255,255,.10) !important; } .gf-ki-box .gf-ki-li:hover{ background:var(--gdti-orange) !important; color:#fff !important; } .gf-ki-box .gf-ki-li.muted{ color:#b8b2a6 !important; } .gf-ki-box .gf-ki-li.muted:hover{ background:transparent !important; color:#b8b2a6 !important; } .gf-ki-box .gf-ki-name{ background:rgba(0,0,0,.35) !important; color:#f2efe9 !important; } .gf-ki-box .gf-ki-nameok,.gf-ki-box .gf-ki-namex{ background:rgba(255,255,255,.10) !important; color:#f2efe9 !important; border-color:rgba(255,255,255,.22) !important; } /* Foto-echt Button-Reihe */ /* row2: Foto-echt + Eigenes Bild nebeneinander */ /* ===== KI-Box: runde Icon-Buttons (KKDS) ===== */ .gf-ki-iconrow{ display:flex; gap:10px; justify-content:center; margin:10px 0 8px; } .gf-ki-box .gf-ki-ico{ width:42px; height:42px; border-radius:50%!important; padding:0!important; display:flex; align-items:center; justify-content:center; position:relative; flex:0 0 auto!important; background:rgba(255,255,255,.10)!important; color:#f2efe9!important; border:2px solid rgba(255,255,255,.22)!important; cursor:pointer; box-shadow:0 2px 5px rgba(0,0,0,.30); transition:background .15s,border-color .15s,transform .12s; } .gf-ki-box .gf-ki-ico:hover{ background:var(--gdti-orange)!important; border-color:var(--gdti-orange)!important; color:#fff!important; transform:translateY(-2px); } .gf-ki-box .gf-ki-ico .ic{ font-size:19px; line-height:1; } .gf-ki-box .gf-ki-ico .spk{ position:absolute; top:-3px; right:-3px; font-size:11px; line-height:1; filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)); } .gf-ki-box .gf-ki-reset .ic{ font-size:16px; font-weight:700; } .gf-ki-box .gf-ki-reset:hover{ background:#b23a1a!important; border-color:#b23a1a!important; } /* Eingabe + Go-btn-Abstand in neuer Reihenfolge */ .gf-ki-box .gf-ki-ta{ margin-top:2px; } .gf-ki-box .gf-ki-go{ margin-top:8px; } /* Hover-Brücke: füllt den Spalt zwischen KI-Box und Style-Leiste, damit der Dialog beim langsamen Rüberfahren nicht verschwindet */ .gf-ki-box::after{ content:''; position:absolute; left:-20px; right:-20px; top:100%; height:96px; } .gf-ki-box .gf-ki-ta::placeholder{ color:#8a847c; } .gf-ki-iconrow .gf-ki-gap{ flex:0 0 14px; } .gf-ki-iconrow{ flex-wrap:nowrap; gap:8px; } /* ===== CP-Edit-System (Jens 6.6.) ===== */ .gd-edit-assist{ bottom:24px; left:24px; right:auto; transform:none; } .gd-edit-assist.open{ transform:none; left:24px; } body.gd-editing [data-gd-edit-on]{ outline:2px dashed var(--gdti-orange,#FF6A00); outline-offset:3px; border-radius:8px; cursor:text; transition:outline-color .15s; } body.gd-editing [data-gd-edit-on]:focus{ outline-style:solid; box-shadow:0 0 0 4px rgba(255,106,0,.12); } .gd-add-file{ width:100%; box-sizing:border-box; margin-top:6px; font-family:var(--gdti-font); font-size:12px; } .gd-add-list{ margin-top:8px; font-size:12px; color:inherit; opacity:.85; } .gd-add-row{ padding:3px 0; } .gd-toast{ position:fixed; left:50%; bottom:150px; transform:translateX(-50%) translateY(10px); background:#1c1814; color:#f3ece0; font-family:var(--gdti-font); font-size:12.5px; font-weight:600; padding:10px 16px; border-radius:11px; border:1.5px solid var(--gdti-orange,#FF6A00); box-shadow:0 8px 28px rgba(0,0,0,.35); z-index:200; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; max-width:78vw; text-align:center; } .gd-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } /* ===== Style-Btns auf 1 reduziert (Jens 7.6.): nur aktives Swatch sichtbar, Rest klappt bei Hover/Klick auf ===== */ .gf-moods{ overflow:visible; } .gf-moods .gf-mood{ max-width:24px; opacity:1; transition:transform .20s, box-shadow .33s, background .27s, max-width .37s ease, opacity .30s, margin .37s; } /* eingeklappt: nicht-aktive Swatches verschwinden (Breite 0) */ .gf-moods:not(:hover):not(.expanded) .gf-mood:not(.active){ max-width:0; opacity:0; margin-left:-3.5px; margin-right:-3.5px; pointer-events:none; } /* das aktive bekommt einen dezenten "mehr"-Hinweis-Ring solange eingeklappt */ .gf-moods:not(:hover):not(.expanded) .gf-mood.active{ box-shadow:0 2px 5px rgba(0,0,0,.32), inset 0 0 0 2px rgba(244,124,32,.55), 0 0 0 3px rgba(244,124,32,.18); } /* aufgeklappt (hover oder .expanded): alle voll da */ .gf-moods:hover .gf-mood, .gf-moods.expanded .gf-mood{ max-width:24px; opacity:1; margin-left:0; margin-right:0; pointer-events:auto; } /* ===== Style-Leiste: ganz rechts, nach LINKS aufklappend (Jens 7.6. 13:30) ===== */ /* KI ganz rechts -> Reihenfolge umkehren (DOM: default..ki), per row-reverse rendert ki rechts */ .gf-copa .gf-moods{ position:static !important; transform:none !important; pointer-events:none; left:auto !important; top:auto !important; margin-left:auto !important; /* schiebt die Gruppe an den rechten Rand der Leiste */ flex-direction:row-reverse; /* ki ganz rechts, default ganz links */ justify-content:flex-end; padding:6px 24px 6px 22px; /* rechts exakt 1x Swatch-Durchmesser (24px) von der Kante (Jens 7.6.) */ } /* eingeklappt: nur aktives Swatch sichtbar (= meist ganz rechts bei row-reverse, default ganz rechts) */ /* groessere Hover-Toleranz: die ganze .gf-moods-Box ist Hover-Target */ .gf-copa .gf-moods::before{ content:''; position:absolute; right:-8px; top:-8px; bottom:-8px; left:-8px; /* enge Bruecke nur um die Swatch-Gruppe (Jens 7.6.: nicht ueber halbe Leiste!) */ pointer-events:none; z-index:0; } .gf-copa .gf-moods{ position:relative; } /* Bezug fuer ::before */ /* KI-Swatch: ✨ Sternchen drauf */ .gf-mood.ki::before{ content:'\2728'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; line-height:1; pointer-events:none; filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)); } /* ===== 4+1 Aktions-btns links: ALLE exakt gleich gross + gleicher HG + Rollover (Jens 7.6.) ===== */ /* Groesse/Form vereinheitlichen (story-Zeitungslook neutralisieren). KEIN background!important -> Hover bleibt! */ .gf-act .ico, .gf-act.story .ico, .gf-act.grooves .ico, .gf-act.namecheck .ico, .gf-act.qr .ico{ width:44px; height:44px; padding:0; border-radius:50%; flex-direction:row; align-items:center; justify-content:center; font-size:19px; background:var(--gf-tile,rgba(255,255,255,.10)); border:2px solid var(--gf-tile-edge,rgba(255,255,255,.22)); } /* Rollover fuer ALLE (auch story+grooves) wieder garantieren */ .gf-act:hover .ico{ background:var(--gdti-orange,#FF6A00)!important; border-color:var(--gdti-orange,#FF6A00)!important; color:#fff!important; transform:translateY(-2px); } .gf-act:hover .lbl{ color:var(--gdti-orange,#FF6A00); } /* story-interne Zeitungs-Grafik ausblenden (falls noch im DOM) */ .gf-act.story .np-h,.gf-act.story .np-row,.gf-act.story .np-img,.gf-act.story .np-lines{ display:none!important; } /* ===== Ruhiges Hover-Verhalten (Jens 7.6.): aufgeklappt alle EINE Farbe, nur gehovertes hebt sich ab ===== */ .gf-copa .gf-moods:hover .gf-mood, .gf-copa .gf-moods.expanded .gf-mood{ filter:grayscale(.55) brightness(.82); transform:none; transition:filter .15s, transform .12s, box-shadow .12s; } .gf-copa .gf-moods:hover .gf-mood:hover, .gf-copa .gf-moods.expanded .gf-mood:hover{ filter:none; transform:translateY(-3px) scale(1.12); box-shadow:0 4px 12px rgba(0,0,0,.40), inset 0 0 0 2px rgba(255,255,255,.55); z-index:3; } /* aktives Swatch bleibt erkennbar, aber ohne Unruhe */ .gf-copa .gf-moods:hover .gf-mood.active:not(:hover), .gf-copa .gf-moods.expanded .gf-mood.active:not(:hover){ filter:grayscale(.2) brightness(.92); } /* FIX 9.6.: gf-moods-Box faengt keine Klicks mehr ab (Tool-btns drunter waren tot), nur Swatches selbst klickbar */ .gf-copa .gf-moods{ pointer-events:none; } .gf-copa .gf-moods .gf-mood{ pointer-events:auto; } .gf-copa .gf-moods::before{ pointer-events:none!important; }