/* TravTools · © MUNLabs
 * shared.css — Basis des Design-Systems
 * Zentrale Design-Tokens, Basis-Typografie, Hintergrund,
 * Scrollbars, Keyframes und Utility-Klassen. Wird als ERSTE Datei geladen.
 * Alle anderen Dateien greifen ausschliesslich auf diese Tokens zu.
 * ------------------------------------------------------------------
 * Farbwelt: Royalblau (Flaechen/Tiefe), Gold (Akzente/Aktionen), Weiss (Text).
 */

/* =========================================================
   0) REGISTRIERTE EIGENSCHAFTEN (animierbare Winkel/Alphas)
   ========================================================= */
@property --tt-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --tt-beam{syntax:"<number>";inherits:false;initial-value:0}
@property --tt-sweep{syntax:"<percentage>";inherits:false;initial-value:-40%}

/* =========================================================
   1) DESIGN-TOKENS (Dark ist das einzige Theme)
   ========================================================= */
:root{
  /* --- Hintergruende (Royalblau, tief) --- */
  --tt-bg-0:#03071a;
  --tt-bg-1:#050c24;
  --tt-bg-2:#081331;
  --tt-bg-3:#0d1b40;

  /* --- Glas-Oberflaechen --- */
  --tt-surface:rgba(13,27,66,.66);
  --tt-surface-2:rgba(18,36,86,.72);
  --tt-surface-3:rgba(26,48,108,.62);
  --tt-surface-solid:#0c1838;
  --tt-surface-hover:rgba(47,91,230,.20);
  --tt-surface-hover-solid:#142554;
  --tt-surface-input:rgba(3,9,30,.62);
  --tt-surface-glass:rgba(170,192,255,.045);
  --tt-surface-glass-2:rgba(170,192,255,.075);

  /* --- Linien --- */
  --tt-line:rgba(170,192,255,.12);
  --tt-line-soft:rgba(170,192,255,.07);
  --tt-line-strong:rgba(170,192,255,.22);
  --tt-line-solid:#1c2d60;
  --tt-line-gold:rgba(242,193,74,.32);
  --tt-line-gold-soft:rgba(242,193,74,.16);
  --tt-line-blue:rgba(77,124,255,.42);

  /* --- Text (Weiss) --- */
  --tt-text:#f4f7ff;
  --tt-text-soft:rgba(230,236,255,.86);
  --tt-muted:#a4b2da;
  --tt-faint:#7484ad;
  --tt-faint-2:#5a6a92;
  --tt-ink:#eef3ff;
  --tt-ink-soft:rgba(236,240,255,.74);

  /* --- Marke --- */
  --tt-gold:#f2c14a;
  --tt-gold-2:#d9a83a;
  --tt-gold-3:#ffd97a;
  --tt-gold-ink:#171c33;
  --tt-blue:#3d6cf5;
  --tt-blue-2:#2d54e0;
  --tt-blue-3:#7b9dff;
  --tt-blue-deep:#1a3fb5;
  --tt-royal:#2f5be6;
  --tt-royal-2:#1e3fbf;

  /* --- Semantik --- */
  --tt-green:#3ddc84;
  --tt-green-2:#86efac;
  --tt-red:#ff5c5c;
  --tt-red-2:#fca5a5;
  --tt-orange:#ffb545;
  --tt-yellow:#eab308;
  --tt-purple:#b18cff;
  --tt-cyan:#5eead4;
  --tt-info:#6fb6ff;

  /* --- Radien --- */
  --tt-radius-xs:8px;
  --tt-radius-sm:12px;
  --tt-radius-md:16px;
  --tt-radius-lg:20px;
  --tt-radius-xl:26px;
  --tt-radius-pill:999px;

  /* --- Schatten & Glow --- */
  --tt-shadow-1:0 8px 24px rgba(1,4,18,.34);
  --tt-shadow-2:0 18px 44px rgba(1,4,18,.44);
  --tt-shadow-3:0 30px 70px rgba(1,4,18,.58);
  --tt-hi:inset 0 1px 0 rgba(255,255,255,.07);
  --tt-glow-gold:0 0 24px rgba(242,193,74,.18);
  --tt-glow-gold-strong:0 0 38px rgba(242,193,74,.34);
  --tt-glow-gold-soft:0 0 16px rgba(242,193,74,.10);
  --tt-glow-blue:0 0 28px rgba(61,108,245,.28);
  --tt-glow-red:0 0 22px rgba(255,92,92,.28);
  --tt-glow-green:0 0 22px rgba(61,220,132,.26);
  --tt-focus-ring:0 0 0 3px rgba(242,193,74,.18), 0 0 20px rgba(242,193,74,.16);

  /* --- Typografie --- */
  --tt-font:"Inter","Outfit",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --tt-font-mono:"JetBrains Mono","Fira Code",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* --- Bewegung --- */
  --tt-ease:cubic-bezier(.2,.8,.2,1);
  --tt-ease-out:cubic-bezier(.16,1,.3,1);
  --tt-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --tt-fast:.18s;
  --tt-med:.32s;
  --tt-slow:.55s;

  /* --- Layout --- */
  --tt-sb-w:292px;
  --tt-space:24px;
  --tt-space-mobile:14px;
  --tt-top-h:66px;

  /* --- Gradienten --- */
  --tt-grad-gold:linear-gradient(180deg,#f9d46c 0%,#f2c14a 48%,#d9a83a 100%);
  --tt-grad-gold-h:linear-gradient(90deg,#fff2c9 0%,#f2c14a 55%,#d9a83a 100%);
  --tt-grad-gold-pan:linear-gradient(110deg,#d9a83a 0%,#f2c14a 30%,#ffe08a 50%,#f2c14a 70%,#d9a83a 100%);
  --tt-grad-blue:linear-gradient(180deg,#4f7dff,#2d54e0);
  --tt-grad-royal:linear-gradient(135deg,#3d6cf5,#1e3fbf);
  --tt-grad-text:linear-gradient(90deg,#ffffff 0%,#ffe9b5 45%,#f2c14a 100%);
  --tt-grad-card:linear-gradient(180deg,rgba(170,192,255,.06) 0%,rgba(170,192,255,.02) 100%);
  --tt-grad-hair:linear-gradient(90deg,transparent,rgba(242,193,74,.85),transparent);
  --tt-grad-beam:conic-gradient(from var(--tt-angle) at 50% 50%,transparent 0deg,transparent 250deg,rgba(242,193,74,var(--tt-beam)) 300deg,rgba(123,157,255,var(--tt-beam)) 330deg,transparent 360deg);

  /* =========================================================
     LEGACY-ALIASE (bestehende Dateien greifen weiter darauf zu)
     ========================================================= */
  --bg:var(--tt-bg-1);
  --line:var(--tt-line);
  --muted:var(--tt-muted);
  --text:var(--tt-text);
  --panel:var(--tt-surface);
  --panel2:var(--tt-surface-2);
  --hover:var(--tt-surface-hover);
  --brandBlue:#1a3fb5;
  --brandBlue2:#2f5be6;
  --brandGold:var(--tt-gold);
  --brandGold2:var(--tt-gold-3);
  --good:var(--tt-green);
  --border:var(--tt-line);
  --borderSoft:var(--tt-line-strong);
  --inputBorder:var(--tt-line);
  --inputBorderFocus:var(--tt-line-gold);
  --darkBg:var(--tt-bg-1);
  --bg-dark:var(--tt-bg-1);
  --bg-input:var(--tt-surface-input);
  --darkPanel:var(--tt-surface-solid);
  --darkPanel2:var(--tt-surface-hover-solid);
  --bg-card:var(--tt-surface-solid);
  --bg-panel:var(--tt-surface-solid);
  --bg-header:var(--tt-surface-solid);
  --lineColor:var(--tt-line);
  --text-main:var(--tt-text);
  --text-muted:var(--tt-muted);
  --textMuted:var(--tt-muted);
  --accent:var(--tt-gold);
  --blue:var(--tt-blue);

  /* Sidebar-Aliase */
  --tt-sb-bg-1:#060f2c;
  --tt-sb-bg-2:#0a1636;
  --tt-sb-line:rgba(170,192,255,.10);
  --tt-sb-line-soft:rgba(170,192,255,.06);
  --tt-sb-text:rgba(245,247,255,.96);
  --tt-sb-muted:rgba(198,208,236,.66);
  --tt-sb-gold:var(--tt-gold);
  --tt-sb-blue:var(--tt-blue-deep);

  /* UI-Aliase (final_ui_pass / ui_global / premium / buttons) */
  --tt-ui-radius-sm:var(--tt-radius-xs);
  --tt-ui-radius:var(--tt-radius-sm);
  --tt-ui-radius-lg:var(--tt-radius-md);
  --tt-ui-panel:var(--tt-surface-solid);
  --tt-ui-panel-soft:var(--tt-surface-glass);
  --tt-ui-line:var(--tt-line);
  --tt-ui-line-strong:var(--tt-line-gold);
  --tt-ui-blue:rgba(47,91,230,.18);
  --tt-ui-blue-glow:rgba(47,91,230,.22);
  --tt-ui-shadow:var(--tt-shadow-2);
  --tt-ui-shadow-soft:var(--tt-shadow-1);
  --tt-card-radius:var(--tt-radius-md);
  --tt-input-radius:var(--tt-radius-sm);
  --tt-shadow:var(--tt-shadow-2);
  --tt-card-bg:var(--tt-grad-card);
  --tt-card-border:var(--tt-line);
  --tt-gold-line:linear-gradient(180deg,rgba(255,217,122,.95),rgba(242,193,74,.35));
  --tt-hover-bg:var(--tt-surface-hover);
  --tt-hover-border:var(--tt-line-gold);
  --tt-hover-glow:0 0 0 1px rgba(242,193,74,.14) inset, var(--tt-glow-gold-soft);
  --pr-gold:var(--tt-gold);
  --pr-gold2:var(--tt-gold-2);
  --pr-glow-gold:rgba(242,193,74,.22);
  --pr-panel-1:var(--tt-surface-2);
  --pr-panel-2:var(--tt-surface);
  --pr-line:var(--tt-line);
  --pr-shadow:var(--tt-shadow-2);
  --pr-hi:var(--tt-hi);
  --btn-h:40px;
  --btn-r:12px;
  --gold-grad:var(--tt-grad-gold);
  --gold-fg:var(--tt-gold-ink);
  --gold-bd:rgba(242,193,74,.55);
  --gold-glow:0 8px 20px rgba(1,4,18,.28), 0 0 18px rgba(242,193,74,.22);
  --neu-bg:rgba(170,192,255,.06);
  --neu-fg:#eef2ff;
  --neu-bd:rgba(170,192,255,.18);
  --dan-bg:rgba(255,92,92,.10);
  --dan-fg:#ffb4b4;
  --dan-bd:rgba(255,92,92,.45);
  --ac-gold:var(--tt-gold);
  --ac-gold-2:var(--tt-gold-2);
  --ac-card-bg:var(--tt-surface-glass);
  --ac-line:var(--tt-line);
  --ac-line-soft:var(--tt-line-soft);
  --ac-muted:var(--tt-muted);
  --ac-faint:var(--tt-faint);
  --tt-radius-xs-legacy:8px;
}

/* =========================================================
   2) BASIS
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:dark}
html:focus-within{scroll-behavior:smooth}
body{
  min-height:100%;
  margin:0;
  color:var(--tt-text);
  font-family:var(--tt-font);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  /* Flaechige Farbe; die Verlaeufe liegen auf der fixierten Ambient-Ebene (kein background-attachment:fixed,
     das bei jedem Scrollen neu gezeichnet wuerde). */
  background-color:var(--tt-bg-1);
}
::selection{background:rgba(242,193,74,.34);color:#fff}
a{color:var(--tt-blue-3);text-decoration:none;transition:color var(--tt-fast) var(--tt-ease)}
a:hover{color:#fff}
img,svg,video{max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.muted{color:var(--tt-muted)}
hr{border:0;border-top:1px solid var(--tt-line);margin:18px 0}
code,kbd,pre{font-family:var(--tt-font-mono)}
kbd{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 6px;border-radius:7px;font-size:11px;font-weight:800;
  color:var(--tt-text-soft);background:rgba(170,192,255,.08);border:1px solid var(--tt-line-strong);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.35);
}

/* Eingaben: Fokus-Ring einheitlich (Detailoptik in forms.css / premium.css) */
input,select,textarea{border-color:var(--inputBorder)}
input:focus,select:focus,textarea:focus{
  border-color:var(--inputBorderFocus)!important;
  box-shadow:var(--tt-focus-ring);
}
input[type="checkbox"],input[type="radio"]{accent-color:var(--tt-gold)}

/* Fokus-Sichtbarkeit fuer Tastatur */
:focus-visible{outline:2px solid rgba(242,193,74,.55);outline-offset:2px;border-radius:6px}
:focus:not(:focus-visible){outline:none}

/* =========================================================
   3) SCROLLBARS — schmal, glasig, gold beim Hover
   ========================================================= */
*{scrollbar-width:thin;scrollbar-color:rgba(242,193,74,.35) rgba(170,192,255,.05)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:rgba(170,192,255,.04);border-radius:999px}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(242,193,74,.45),rgba(217,168,58,.35));
  border-radius:999px;border:2px solid transparent;background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(255,217,122,.75),rgba(242,193,74,.6));background-clip:padding-box}
*::-webkit-scrollbar-corner{background:transparent}

/* =========================================================
   4) AMBIENT-HINTERGRUND (fixierte Ebene, vom Layout eingefuegt)
   Bewusst statisch: keine Dauer-Animation, kein Weichzeichner, kein Blend-Modus.
   Die Ebene wird einmal gerastert und beim Scrollen nur verschoben.
   ========================================================= */
.tt-ambient{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(1400px 900px at 10% 6%, rgba(47,91,230,.30), transparent 60%),
    radial-gradient(1100px 760px at 90% 12%, rgba(242,193,74,.13), transparent 62%),
    radial-gradient(900px 620px at 55% 100%, rgba(30,63,191,.26), transparent 62%),
    linear-gradient(180deg,#081437 0%,#050c24 55%,#03071a 100%);
}
.tt-ambient span{position:absolute;border-radius:50%;opacity:.7}
.tt-ambient .tt-orb-a{width:64vw;height:64vw;left:-20vw;top:-26vw;background:radial-gradient(circle,rgba(61,108,245,.38) 0%,rgba(61,108,245,.14) 34%,rgba(61,108,245,0) 66%)}
.tt-ambient .tt-orb-b{width:50vw;height:50vw;right:-18vw;top:-10vw;background:radial-gradient(circle,rgba(242,193,74,.22) 0%,rgba(242,193,74,.08) 34%,rgba(242,193,74,0) 64%)}
.tt-ambient .tt-orb-c{width:56vw;height:56vw;left:24vw;bottom:-34vw;background:radial-gradient(circle,rgba(30,63,191,.34) 0%,rgba(30,63,191,.12) 36%,rgba(30,63,191,0) 66%)}
/* Aurora-Schleier: statischer, weicher Verlauf */
.tt-ambient::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background:
    linear-gradient(115deg,transparent 28%,rgba(47,91,230,.14) 44%,rgba(242,193,74,.08) 56%,transparent 72%),
    linear-gradient(65deg,transparent 38%,rgba(123,157,255,.08) 50%,transparent 62%);
}
.tt-ambient::after{
  content:"";position:absolute;inset:0;opacity:.30;
  background-image:
    linear-gradient(rgba(170,192,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(170,192,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 40% 0%,rgba(0,0,0,.9),transparent 70%);
  mask-image:radial-gradient(ellipse at 40% 0%,rgba(0,0,0,.9),transparent 70%);
}
.tt-sb,.tt-standalone-shell,.wartung-shell{position:relative;z-index:1}
/* .tt-main ohne eigenen Stapelkontext: fixierte Modale/Overlays aus dem Inhalt liegen so ueber der Sidebar */
.tt-main{position:relative;z-index:auto}

/* =========================================================
   5) KEYFRAMES (global verfuegbar)
   ========================================================= */
@keyframes tt-fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes tt-fade-in{from{opacity:0}to{opacity:1}}
@keyframes tt-scale-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes tt-rise-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes tt-shimmer{0%{background-position:-160% 0}100%{background-position:260% 0}}
@keyframes tt-text-shine{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes tt-title-shine{from{background-position:-220% 0}to{background-position:0 0}}
@keyframes tt-pulse-gold{0%,100%{box-shadow:0 0 0 0 rgba(242,193,74,0)}50%{box-shadow:0 0 24px 2px rgba(242,193,74,.36)}}
@keyframes tt-pulse-red{0%,100%{box-shadow:0 0 0 0 rgba(255,92,92,0)}50%{box-shadow:0 0 22px 2px rgba(255,92,92,.45)}}
@keyframes tt-pulse-ring{0%{box-shadow:0 0 0 0 rgba(242,193,74,.45)}100%{box-shadow:0 0 0 10px rgba(242,193,74,0)}}
@keyframes tt-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes tt-spin{to{transform:rotate(360deg)}}
@keyframes tt-angle{to{--tt-angle:360deg}}
@keyframes tt-glow-breathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes tt-line-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tt-progress-stripes{from{background-position:0 0}to{background-position:40px 0}}
@keyframes ttmg-fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes ttmg-shimmer{0%{background-position:-150% 0}100%{background-position:250% 0}}
@keyframes ttpg-fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes ttpg-shimmer{0%{background-position:-150% 0}100%{background-position:250% 0}}
@keyframes slideIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* =========================================================
   6) UTILITIES
   ========================================================= */
.tt-glass{background:var(--tt-surface);border:1px solid var(--tt-line);border-radius:var(--tt-radius-md);box-shadow:var(--tt-shadow-2),var(--tt-hi)}
.tt-gold-text{background:var(--tt-grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.tt-glow{box-shadow:var(--tt-glow-gold)}
.tt-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--tt-gold-3);text-shadow:0 0 14px rgba(242,193,74,.25)}
.tt-eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--tt-grad-gold-h);box-shadow:0 0 10px rgba(242,193,74,.5)}
.tt-divider{height:1px;background:linear-gradient(90deg,transparent,var(--tt-line-strong),transparent);margin:16px 0}
.tt-skip-link{position:absolute;left:-9999px;top:8px;z-index:100000;padding:10px 14px;border-radius:10px;background:var(--tt-gold);color:var(--tt-gold-ink);font-weight:800}
.tt-skip-link:focus{left:12px}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* =========================================================
   7) TOPBAR-WERKZEUGE (Bell/Welten/Uhr) — Detailoptik in sidebar.css
   ========================================================= */
.tt-top-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.tt-top-right{display:flex;align-items:center;gap:10px}
.tt-worldpick{display:flex;flex-wrap:wrap;gap:10px}
.tt-worldpick-row{margin:0}

/* Block 1 – einheitliche Aussenabstaende und Vollbreite mit Sidebar. */
.tt-top,.tt-page,.tt-page-foot{padding-left:var(--tt-space);padding-right:var(--tt-space)}
.tt-page{width:100%;max-width:none;margin:0 auto}
.tt-page > :first-child{margin-top:0}
.tt-auth-wrap,.tt-login-wrap{max-width:1180px;margin:0 auto}
@media (max-width:980px){.tt-top,.tt-page,.tt-page-foot{padding-left:var(--tt-space-mobile);padding-right:var(--tt-space-mobile)}}