@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700;9..144,800&family=Inter+Tight:wght@200;300;400;500;600;700;800;900&family=Oswald:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700;800;900&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Bodoni+Moda:opsz,wght@6..96,500;6..96,700;6..96,900&family=Quicksand:wght@500;600;700&display=swap');
/* gdti-tokens.css — Design-Token-Angleich für Tools (KEIN Frame).
   Bringt Arbeits-Tools in die gdti-Familie: Brushed-Alu/Creme, Orange #FF6A00,
   Inter Tight, 2px-Borders, oK-Akzent. Workflow bleibt ungestört.
   Default = helle Creme-Welt (wie g--dtimes.ussume.com). */

:root{
  /* === CI-ORANGE — verbindlicher g--d-Markenton, EINE Quelle === */
  --ci-orange:#ef6a23; --ci-orange-rim:#c85618; --ci-orange-soft:rgba(239,106,35,.12);

  --gdti-orange:#FF6A00;
  --gf-bg:#efe6d8;           /* Seiten-HG creme */
  --gf-bg-deep:#e3d8c6;      /* etwas dunkler für Ränder/Leisten */
  /* gebürstetes Alu (Jens 7.6.): feine vertikale Schliff-Linien + sanfter Quer-Verlauf.
     Licht kommt aus rechts-unten (vom oK) -> heller Pol unten-rechts. */
  --gf-alu:
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, rgba(90,60,20,.06) 1px 2px, transparent 2px 4px),
    radial-gradient(130% 140% at 90% 105%, #ece2cf 0%, #dccfb6 34%, #ccbd9f 62%, #beae8d 100%),
    linear-gradient(118deg, #bdae8d 0%, #d8caac 30%, #cabb99 60%, #e0d3b6 100%);
  --gf-panel:#faf6ee;        /* heller HG hinter Texten/Karten (global creme; Alu nur lokal wo gewünscht) */
  --gf-ink:#20201d;          /* Text fast-schwarz */
  --gf-ink-soft:#6f6a61;     /* sekundär */
  --gf-accent:#FF6A00;
  /* ===== Echtes gebuerstetes Edelstahl (Knobs+Fader) — Jens 7.6. ===== */
  --gf-steel:
    conic-gradient(from 0deg,
      #fbfcfd 0deg, #c4c9ce 22deg, #f4f6f8 45deg, #aeb3b9 90deg, #f8fafb 135deg,
      #b8bdc3 180deg, #fbfcfd 205deg, #c0c5cb 250deg, #f4f6f8 290deg, #aeb3b9 330deg, #fbfcfd 360deg);
  --gf-steel-rim:#3b3f44;       /* dunkler Metallrand */
  --gf-knob-ring:#e6e8ea;       /* heller Chrom-Aussenring (Vorlage); pro Theme ueberschreibbar */
  --gf-steel-track:            /* Fader-Rinne: gebuerstet, laengs */
    repeating-linear-gradient(180deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.08) 1px 2px, transparent 2px 3px),
    linear-gradient(180deg, #6f757b 0%, #aab0b6 18%, #c6cbd0 50%, #9aa0a6 82%, #5c6166 100%);
  --gf-rule:#d9cdba;         /* Trennlinien */
  --gdti-font:'Inter Tight','Inter',system-ui,-apple-system,sans-serif;
  --gdti-serif:'Fraunces',Georgia,serif;   /* NUR Heads/Mag — nicht Routine */
  --gdti-radius:14px;
  --gdti-edge:2px solid #000;
}

/* dezentes Mini-Hexagon-Muster auf dem dunkleren HG */
body.gdti-tokens{
  margin:0;
  background:
    var(--gf-bg-deep)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48' viewBox='0 0 28 48'%3E%3Cpath d='M14 0l12 7v14l-12 7-12-7V7zM14 24l12 7v14l-12 7-12-7V31z' fill='none' stroke='%23000' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E");
  color:var(--gf-ink);
  font-family:var(--gdti-font);
  font-weight:400; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* Inhalts-Container: heller HG hinter allen Texten */
body.gdti-tokens .gdti-surface,
body.gdti-tokens .card,
body.gdti-tokens .panel{
  background:var(--gf-panel);
  color:var(--gf-ink);
  border:1px solid var(--gf-rule);
  border-radius:var(--gdti-radius);
}

/* Texte schwarz, Überschriften kräftig */
body.gdti-tokens h1, body.gdti-tokens h2, body.gdti-tokens h3{
  color:var(--gf-ink); font-weight:800; letter-spacing:-.01em;
}
body.gdti-tokens p, body.gdti-tokens li, body.gdti-tokens label{ color:var(--gf-ink); }
body.gdti-tokens .muted, body.gdti-tokens small{ color:var(--gf-ink-soft); }

/* Links: unterstrichen + orange */
body.gdti-tokens a{ color:var(--gf-accent); text-decoration:none; }
body.gdti-tokens a:hover{ color:#c9560f; }

/* Buttons in gdti-Manier */
body.gdti-tokens button,
body.gdti-tokens .btn{
  font-family:var(--gdti-font); font-weight:700;
  background:var(--gf-panel); color:var(--gf-ink);
  border:var(--gdti-edge); border-radius:11px;
  padding:8px 14px; cursor:pointer; transition:.15s;
}
body.gdti-tokens button:hover,
body.gdti-tokens .btn:hover{ background:var(--gf-accent); color:#fff; transform:translateY(-1px); }
body.gdti-tokens .btn-primary{ background:var(--gf-accent); color:#fff; }
body.gdti-tokens .btn-primary:hover{ background:#c9560f; }

/* Eingabefelder */
body.gdti-tokens input, body.gdti-tokens select, body.gdti-tokens textarea{
  font-family:var(--gdti-font);
  background:var(--gf-panel); color:var(--gf-ink);
  border:1px solid var(--gf-rule); border-radius:9px; padding:7px 10px;
}
body.gdti-tokens input:focus, body.gdti-tokens select:focus, body.gdti-tokens textarea:focus{
  outline:none; border-color:var(--gf-accent); box-shadow:0 0 0 2px rgba(239,108,26,.18);
}

/* oK-Akzent-Element (kleiner Orange-Kreis, festes UI-Zeichen) */
body.gdti-tokens .gdti-ok-dot{
  display:inline-block; width:14px; height:14px; border-radius:50%;
  background:var(--gf-accent); box-shadow:0 1px 3px rgba(0,0,0,.3);
  vertical-align:middle;
}

/* Trennlinien */
body.gdti-tokens hr{ border:0; border-top:1px solid var(--gf-rule); margin:18px 0; }

/* ============================================================
   THEME-FONTS (Jens 7.6.) — Schrift folgt dem Style.
   Welten-Logo (.wlogo) ist davon ausgenommen (feste Font in frame.css).
   KI + Default bleiben Inter Tight / Fraunces (Status quo).
   --gdti-font = UI/Fließtext · --gdti-serif = Heads/Titel
   ============================================================ */
/* Holz — Bodoni Moda: warm-klassisch, kräftige Serifen */
html[data-theme="holz"]{
  --gdti-font:'Bodoni Moda',Georgia,serif;
  --gdti-serif:'Bodoni Moda',Georgia,serif;
  /* Knob: warmes Messing/Bronze passend zum Wurzelholz */
  --gf-steel:conic-gradient(from 0deg,#f3e6cf 0deg,#b08d57 22deg,#f0dcb8 45deg,#8c6d3a 90deg,#f5e9d2 135deg,#a07d44 180deg,#f3e6cf 205deg,#9c7a40 250deg,#efdcb6 290deg,#8a6a37 330deg,#f3e6cf 360deg);
  --gf-steel-rim:#5a4220; --gf-knob-ring:#e8d4ad;
}
/* Beartaria Dawn — EB Garamond: weich, humanistisch, morgendlich */
html[data-theme="dawn"]{
  --gdti-font:'EB Garamond',Georgia,serif;
  --gdti-serif:'EB Garamond',Georgia,serif;
  /* Knob: rosé-gold, morgenwarm */
  --gf-steel:conic-gradient(from 0deg,#fdeee6 0deg,#d8a98f 22deg,#f7ddcf 45deg,#bd876a 90deg,#fbe7dc 135deg,#cf9a7e 180deg,#fdeee6 205deg,#c6906f 250deg,#f6dccc 290deg,#b6805f 330deg,#fdeee6 360deg);
  --gf-steel-rim:#6e4a36; --gf-knob-ring:#f0d8c8;
}
/* Paris — Playfair Display: Nacht-Eleganz, Didone-Kontrast */
html[data-theme="paris"]{
  --gdti-font:'Playfair Display',Georgia,serif;
  --gdti-serif:'Playfair Display',Georgia,serif;
  /* Knob: dunkler Gunmetal, Nacht-Eleganz */
  --gf-steel:conic-gradient(from 0deg,#aeb4bd 0deg,#5c636e 22deg,#9aa0aa 45deg,#41474f 90deg,#a4abb4 135deg,#535963 180deg,#aeb4bd 205deg,#4a5058 250deg,#969ca6 290deg,#3c424a 330deg,#aeb4bd 360deg);
  --gf-steel-rim:#23272d; --gf-knob-ring:#7e8590;
}
/* Hawaii — Quicksand: rund, freundlich, hell */
html[data-theme="hawaii"]{
  --gdti-font:'Quicksand','Inter Tight',sans-serif;
  --gdti-serif:'Quicksand','Inter Tight',sans-serif;
  /* Knob: helles Roségold-Chrom, sonnig */
  --gf-steel:conic-gradient(from 0deg,#fff6f0 0deg,#e8b9a0 22deg,#fce4d6 45deg,#d49a7e 90deg,#fdeadf 135deg,#e0aa8e 180deg,#fff6f0 205deg,#daa184 250deg,#fbe2d4 290deg,#d29478 330deg,#fff6f0 360deg);
  --gf-steel-rim:#9c6c52; --gf-knob-ring:#f7ddcf;
}
/* Neon Tokyo — Oswald: schmal, tech, vertikal-urban */
html[data-theme="tokyo"]{
  --gdti-font:'Oswald','Inter Tight',sans-serif;
  --gdti-serif:'Oswald','Inter Tight',sans-serif;
  /* Knob: kühler Neon-Stahl, urban-tech */
  --gf-steel:conic-gradient(from 0deg,#dfe9ef 0deg,#7e93a3 22deg,#cbd9e2 45deg,#5a7080 90deg,#d6e3ec 135deg,#6f8597 180deg,#dfe9ef 205deg,#62788a 250deg,#c7d6df 290deg,#536b7c 330deg,#dfe9ef 360deg);
  --gf-steel-rim:#2b3a45; --gf-knob-ring:#aec0cc;
}
/* default + ki: bewusst KEINE Regel -> Inter Tight/Fraunces aus :root */

/* ===== KI-Style: 3D-Wetter-Himmel als Default-HG (Jens 6.6.) ===== */
/* Bei aktivem KI-Style wird der body-HG transparent, damit #gf-sky3d (z-index:-3) durchkommt.
   Ein erzeugtes KI-Muster setzt --gf-bg-deep inline und überdeckt den Himmel wieder. */
html[data-theme="ki"]:not(.gf-own-img) body.gdti-tokens{
  background-color:transparent !important;
  background-image:none !important;
}

/* === gd-scroll-tail: IMMER 120px weiter scrollen als Inhalt (Jens 21.6.) === */
body{padding-bottom:120px!important;box-sizing:border-box;}