/* TravTools · © MUNLabs
 * sidebar.css — App-Geruest (Sidebar · Topbar · Glocke · Popups · Welten · Mobile)
 * Alle Tokens kommen aus shared.css. Diese Datei definiert das
 * komplette App-Geruest. Keine Funktionsaenderung, nur Optik und Bewegung.
 * Hover-Effekte arbeiten mit Licht (Glow, Verlauf, Kante) — nie mit Versatz.
 */

/* =========================================================
   1) SIDEBAR-GERUEST
   ========================================================= */
.tt-sb{
  position:fixed; inset:0 auto 0 0;
  width:var(--tt-sb-w);
  height:100vh; min-height:0;
  display:flex; flex-direction:column;
  color:var(--tt-sb-text);
  background:
    radial-gradient(520px 400px at 8% -4%, rgba(61,108,245,.30), transparent 62%),
    radial-gradient(380px 340px at 100% 6%, rgba(242,193,74,.13), transparent 60%),
    radial-gradient(520px 520px at 50% 110%, rgba(30,63,191,.30), transparent 62%),
    linear-gradient(180deg, rgba(8,18,48,.985), rgba(4,10,30,.99));
  border-right:1px solid rgba(242,193,74,.10);
  box-shadow:22px 0 70px rgba(1,4,18,.46), inset -1px 0 0 rgba(170,192,255,.04);
  z-index:50;
  overflow:hidden;
  transition:width var(--tt-med) var(--tt-ease), transform var(--tt-med) var(--tt-ease);
}
/* feine goldene Lichtkante rechts oben */
.tt-sb::before{
  content:""; position:absolute; top:0; right:0; width:1px; height:42%;
  background:linear-gradient(180deg, rgba(242,193,74,.6), rgba(242,193,74,0));
  pointer-events:none;
}
.tt-sb::after{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  pointer-events:none;
}
.tt-head{flex:0 0 auto}

/* =========================================================
   2) BRAND
   ========================================================= */
.tt-brand{
  position:relative;
  display:flex; align-items:center; gap:10px;
  padding:12px 12px 11px;
  border-bottom:1px solid var(--tt-sb-line);
  background:linear-gradient(180deg, rgba(170,192,255,.05), rgba(170,192,255,0));
  flex:0 0 auto;
}
.tt-brand-mark{
  width:46px; height:46px; flex:0 0 auto;
  display:grid; place-items:center; position:relative;
  border-radius:14px; text-decoration:none;
}
/* Kein Leucht-Effekt („Taschenlampe") mehr hinter dem Logo */
.tt-mark-glow{display:none !important;}
.tt-brand-mark img{
  position:relative; width:46px; height:46px; object-fit:contain; display:block;
  filter:drop-shadow(0 8px 16px rgba(1,4,18,.5));
  transition:filter var(--tt-med) var(--tt-ease);
}
.tt-brand-mark:hover img{filter:drop-shadow(0 8px 16px rgba(1,4,18,.5)) drop-shadow(0 0 12px rgba(242,193,74,.35))}
.tt-brand-text{display:flex; flex-direction:column; justify-content:center; line-height:1.05; min-width:0}
.tt-brand-title{
  font-weight:950; font-size:24px; letter-spacing:.2px;
  background:var(--tt-grad-text); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:none; filter:drop-shadow(0 0 14px rgba(242,193,74,.22));
  white-space:nowrap;
}
.tt-brand-sub{
  margin-top:4px; font-size:9.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tt-sb-muted); white-space:nowrap;
}
.tt-brand-sub .tt-brand-dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--tt-gold);box-shadow:0 0 8px var(--tt-gold);margin:0 6px 2px;vertical-align:middle}
.tt-brand-sub a{color:inherit;text-decoration:none;transition:color .15s ease}
.tt-brand-sub a:hover{color:var(--tt-gold)}

/* Einklappen (Desktop) */
.tt-sb-collapse{
  margin-left:auto; flex:0 0 auto;
  width:30px; height:30px; border-radius:9px;
  border:1px solid var(--tt-sb-line); background:rgba(170,192,255,.05); color:rgba(255,255,255,.8);
  display:inline-grid; place-items:center; font-size:12px; cursor:pointer;
  transition:background var(--tt-fast) var(--tt-ease), border-color var(--tt-fast) var(--tt-ease), color var(--tt-fast) var(--tt-ease), box-shadow var(--tt-fast) var(--tt-ease);
}
.tt-sb-collapse:hover{background:rgba(242,193,74,.14); border-color:rgba(242,193,74,.45); color:#fff; box-shadow:var(--tt-glow-gold-soft), inset 0 0 0 1px rgba(242,193,74,.2)}

/* Burger (nur Mobile) */
.tt-burger{
  margin-left:auto; display:none;
  width:38px; height:38px; border-radius:11px;
  border:1px solid var(--tt-sb-line); background:rgba(170,192,255,.06); color:#fff;
  font-size:17px; cursor:pointer;
}

/* =========================================================
   3) SUCHE
   ========================================================= */
.tt-sb-tools{
  display:flex; align-items:center; gap:8px;
  padding:10px 10px 9px;
  border-bottom:1px solid var(--tt-sb-line-soft);
  flex:0 0 auto;
}
.tt-search-wrap{position:relative; flex:1; min-width:0; display:flex; align-items:center}
.tt-search-ic{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:rgba(214,222,241,.55); font-size:12px; pointer-events:none; z-index:2;
  transition:color var(--tt-fast) var(--tt-ease), filter var(--tt-fast) var(--tt-ease);
}
.tt-search-wrap:focus-within .tt-search-ic{color:var(--tt-gold);filter:drop-shadow(0 0 6px rgba(242,193,74,.7))}
.tt-search{
  flex:1; min-width:0; width:100% !important;
  height:38px !important; min-height:38px !important; padding:0 50px 0 36px !important;
  border-radius:11px !important;
  border:1px solid rgba(170,192,255,.14) !important;
  background:linear-gradient(180deg, rgba(3,9,30,.72), rgba(8,18,44,.70)) !important;
  color:#fff !important; outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
  transition:border-color var(--tt-med) var(--tt-ease), box-shadow var(--tt-med) var(--tt-ease), background var(--tt-med) var(--tt-ease);
  font-size:13px !important;
}
.tt-search::placeholder{color:rgba(214,222,241,.5)}
.tt-search::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.tt-search:hover{border-color:rgba(170,192,255,.26) !important}
.tt-search:focus{
  border-color:rgba(242,193,74,.55) !important;
  box-shadow:var(--tt-focus-ring), inset 0 1px 0 rgba(255,255,255,.05) !important;
  background:rgba(3,9,30,.9) !important;
}
.tt-search-kbd{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  pointer-events:none; font-family:var(--tt-font); letter-spacing:.02em;
  opacity:.7; height:20px; min-width:20px; font-size:10px;
  transition:opacity var(--tt-fast) var(--tt-ease);
}
.tt-search-wrap:focus-within .tt-search-kbd{opacity:0}

/* =========================================================
   4) NAVIGATION
   ========================================================= */
.tt-nav{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  padding:8px 8px 14px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 16px), transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 16px), transparent 100%);
}
.tt-nav::-webkit-scrollbar{display:none}

.tt-group{
  position:relative;
  margin:0 0 6px;
  border:1px solid rgba(170,192,255,.08);
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(170,192,255,.05), rgba(170,192,255,.018));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 18px rgba(1,4,18,.22);
  transition:border-color var(--tt-med) var(--tt-ease), box-shadow var(--tt-med) var(--tt-ease), background var(--tt-med) var(--tt-ease);
  animation:tt-fade-in .5s var(--tt-ease-out) both;
}
.tt-group:nth-child(2){animation-delay:.04s}
.tt-group:nth-child(3){animation-delay:.08s}
.tt-group:nth-child(4){animation-delay:.12s}
.tt-group:nth-child(5){animation-delay:.16s}
.tt-group:nth-child(6){animation-delay:.20s}
.tt-group:nth-child(7){animation-delay:.24s}
.tt-group:nth-child(n+8){animation-delay:.28s}
.tt-group:hover{border-color:rgba(170,192,255,.14)}
.tt-group[data-open="true"]{
  border-color:rgba(242,193,74,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 22px rgba(1,4,18,.26), 0 0 0 1px rgba(242,193,74,.04), 0 0 24px rgba(242,193,74,.05);
}
/* Gold-Haarlinie oben bei geoeffneter Gruppe */
.tt-group[data-open="true"]::before{
  content:""; position:absolute; left:12%; right:12%; top:0; height:1px;
  background:var(--tt-grad-hair); opacity:.8; pointer-events:none;
}
.tt-group-btn{
  width:100%; display:flex; align-items:center; gap:9px;
  padding:8px 9px;
  background:linear-gradient(90deg, rgba(61,108,245,.22), rgba(61,108,245,.05) 45%, transparent 70%);
  background-size:220% 100%; background-position:100% 0;
  border:0; color:var(--tt-sb-text); cursor:pointer;
  font-weight:800; font-size:12.5px; letter-spacing:.12px;
  text-align:left; position:relative;
  transition:background-position var(--tt-slow) var(--tt-ease), color var(--tt-fast) var(--tt-ease);
}
.tt-group-btn:hover{background-position:0 0; color:#fff}
.tt-group-btn:hover .tt-ico{border-color:rgba(242,193,74,.4); box-shadow:0 0 14px rgba(242,193,74,.22), inset 0 1px 0 rgba(255,255,255,.08)}
.tt-group[data-open="true"] .tt-group-btn{color:#fff}
.tt-group[data-open="true"] .tt-group-btn .tt-ico{
  background:linear-gradient(180deg, rgba(242,193,74,.28), rgba(242,193,74,.08));
  border-color:rgba(242,193,74,.42);
  box-shadow:0 0 14px rgba(242,193,74,.24), inset 0 0 10px rgba(242,193,74,.10);
}

.tt-ico{
  width:24px; height:24px; min-width:24px;
  display:inline-grid; place-items:center;
  font-size:12.5px; line-height:1;
  border-radius:7px;
  background:rgba(170,192,255,.06);
  border:1px solid rgba(170,192,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:background var(--tt-med) var(--tt-ease), border-color var(--tt-med) var(--tt-ease), box-shadow var(--tt-med) var(--tt-ease), filter var(--tt-med) var(--tt-ease);
}
.tt-txt{flex:1; text-align:left; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tt-chev{
  transition:transform var(--tt-med) var(--tt-ease), opacity var(--tt-fast) var(--tt-ease), color var(--tt-fast) var(--tt-ease);
  opacity:.55; font-size:15px; line-height:1;
}
.tt-group-btn:hover .tt-chev{opacity:1; color:var(--tt-gold-3)}
.tt-group[data-open="true"] > .tt-group-btn .tt-chev{transform:rotate(90deg); opacity:1; color:var(--tt-gold)}
.tt-group-body{
  display:none;
  padding:1px 4px 5px;
  background:linear-gradient(180deg, rgba(3,9,30,.22), rgba(3,9,30,.02));
}
.tt-group[data-open="true"] .tt-group-body{display:block; animation:tt-fade-in .26s var(--tt-ease)}

.tt-item,.tt-sub-btn{
  width:100%; display:flex; align-items:center; gap:8px;
  padding:6px 8px; border:0; color:#eef2ff;
  cursor:pointer; text-align:left; position:relative; border-radius:8px;
  font-size:12.5px; font-weight:600;
  background:linear-gradient(90deg, rgba(61,108,245,.30), rgba(61,108,245,.08) 55%, transparent 80%);
  background-size:220% 100%; background-position:100% 0;
  box-shadow:inset 0 0 0 1px rgba(123,157,255,0);
  transition:background-position var(--tt-slow) var(--tt-ease), box-shadow var(--tt-med) var(--tt-ease), color var(--tt-fast) var(--tt-ease);
}
.tt-item .tt-ico,.tt-sub-btn .tt-ico{width:22px;height:22px;min-width:22px;font-size:11.5px;background:rgba(170,192,255,.045);border-color:rgba(170,192,255,.07)}
/* Lichtkante links: waechst aus der Mitte */
.tt-item::before{
  content:""; position:absolute; left:0; top:22%; bottom:22%; width:2px; border-radius:2px;
  background:linear-gradient(180deg, var(--tt-blue-3), var(--tt-gold));
  box-shadow:0 0 10px rgba(123,157,255,.8);
  transform:scaleY(0); transform-origin:center; opacity:0;
  transition:transform var(--tt-med) var(--tt-ease-out), opacity var(--tt-fast) var(--tt-ease);
}
.tt-item:hover,.tt-sub-btn:hover{
  background-position:0 0;
  box-shadow:inset 0 0 0 1px rgba(123,157,255,.18);
  color:#fff;
}
.tt-item:hover::before{transform:scaleY(1); opacity:1}
.tt-item:hover .tt-ico,.tt-sub-btn:hover .tt-ico{border-color:rgba(242,193,74,.4);background:rgba(242,193,74,.10);box-shadow:0 0 12px rgba(242,193,74,.25);filter:saturate(1.2)}
/* aktiver Eintrag: Gold + linker Glow-Balken */
.tt-item.active{
  background:linear-gradient(90deg, rgba(242,193,74,.24), rgba(242,193,74,.05) 70%, transparent);
  background-size:100% 100%; background-position:0 0;
  color:#fff; font-weight:800;
  box-shadow:inset 0 0 0 1px rgba(242,193,74,.22), 0 0 22px rgba(242,193,74,.10);
}
.tt-item.active::before{
  top:18%; bottom:18%; width:3px; transform:scaleY(1); opacity:1;
  background:var(--tt-grad-gold);
  box-shadow:0 0 12px rgba(242,193,74,.9), 0 0 22px rgba(242,193,74,.45);
  animation:tt-glow-breathe 3s ease-in-out infinite;
}
.tt-item.active .tt-ico{
  background:linear-gradient(180deg, rgba(242,193,74,.34), rgba(242,193,74,.10));
  border-color:rgba(242,193,74,.55);
  box-shadow:0 0 14px rgba(242,193,74,.32);
}
.tt-ext{opacity:.7; font-size:11px; transition:opacity var(--tt-fast) var(--tt-ease), color var(--tt-fast) var(--tt-ease)}
.tt-item:hover .tt-ext{opacity:1; color:var(--tt-gold)}

/* Untergruppen */
.tt-sub{margin-top:1px; border-radius:9px; overflow:hidden}
.tt-sub-btn{font-weight:700}
.tt-sub-body{
  display:none; padding:1px 0 3px 0; position:relative;
  background:rgba(3,9,30,.32); border-radius:9px;
}
.tt-sub-body::before{
  content:""; position:absolute; left:19px; top:6px; bottom:8px; width:1px;
  background:linear-gradient(180deg, rgba(242,193,74,.45), rgba(123,157,255,.10));
}
.tt-sub[data-open="true"]{background:rgba(170,192,255,.025)}
.tt-sub[data-open="true"] .tt-sub-body{display:block; animation:tt-fade-in .26s var(--tt-ease)}
.tt-sub[data-open="true"] .tt-sub-btn .tt-chev{transform:rotate(90deg); color:var(--tt-gold); opacity:1}
.tt-item-sub{
  font-size:12px; font-weight:600; opacity:.96;
  padding:6px 8px 6px 32px;
}
.tt-item-sub::after{
  content:""; width:5px; height:5px; border-radius:99px;
  background:rgba(242,193,74,.55); box-shadow:0 0 8px rgba(242,193,74,.5);
  position:absolute; left:17px; top:50%; transform:translateY(-50%);
  transition:background var(--tt-fast) var(--tt-ease), box-shadow var(--tt-fast) var(--tt-ease);
}
.tt-item-sub:hover::after,.tt-item-sub.active::after{background:var(--tt-gold);box-shadow:0 0 10px rgba(242,193,74,1), 0 0 18px rgba(242,193,74,.6)}
.tt-item-sub .tt-ico{display:none}
.tt-item-sub.active::before{left:5px}

/* =========================================================
   5) FOOTER + USER-CHIP
   ========================================================= */
.tt-foot{
  flex:0 0 auto; margin-top:auto;
  padding:9px 9px 10px;
  border-top:1px solid var(--tt-sb-line);
  color:var(--tt-sb-muted);
  font-size:11.5px;
  background:linear-gradient(180deg, rgba(170,192,255,.025), rgba(170,192,255,0));
}
.tt-foot-line{font-weight:800;color:rgba(255,255,255,.90)}
.tt-foot-sub{margin-top:6px; text-align:center; font-size:10.5px; letter-spacing:.04em}
.tt-foot-sub a{color:rgba(255,255,255,.72)}
.tt-foot-sub a:hover{color:var(--tt-gold)}
.tt-foot-legal{margin-top:5px; text-align:center; font-size:10.5px; letter-spacing:.04em}
.tt-foot-legal a{color:rgba(255,255,255,.60); text-decoration:none; transition:color .15s ease}
.tt-foot-legal a:hover{color:var(--tt-gold)}
.tt-foot-legal .tt-foot-sep{margin:0 7px; color:rgba(255,255,255,.28)}

.tt-user-chip{
  display:flex; align-items:center; gap:9px;
  padding:7px 8px;
  border-radius:11px;
  border:1px solid rgba(170,192,255,.10);
  background:linear-gradient(180deg, rgba(170,192,255,.06), rgba(170,192,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 20px rgba(1,4,18,.24);
  text-decoration:none; color:inherit; position:relative; overflow:hidden;
  transition:border-color var(--tt-med) var(--tt-ease), box-shadow var(--tt-med) var(--tt-ease), background var(--tt-med) var(--tt-ease);
}
.tt-user-chip::after{
  content:""; position:absolute; top:0; bottom:0; width:40%; left:0;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.10), transparent);
  transform:translateX(-160%) skewX(-18deg); transition:transform var(--tt-slow) var(--tt-ease); pointer-events:none;
}
.tt-user-chip:hover{border-color:rgba(242,193,74,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 24px rgba(242,193,74,.14), inset 0 0 0 1px rgba(242,193,74,.12)}
.tt-user-chip:hover::after{transform:translateX(300%) skewX(-18deg)}
.tt-user-avatar{
  width:32px; height:32px; min-width:32px; border-radius:10px;
  display:grid; place-items:center; font-weight:900; font-size:13px; color:var(--tt-gold-ink);
  background:var(--tt-grad-gold);
  box-shadow:0 0 16px rgba(242,193,74,.35), inset 0 1px 0 rgba(255,255,255,.5);
  position:relative;
  transition:box-shadow var(--tt-med) var(--tt-ease);
}
.tt-user-chip:hover .tt-user-avatar{box-shadow:0 0 22px rgba(242,193,74,.6), inset 0 1px 0 rgba(255,255,255,.5)}
.tt-user-avatar::after{
  content:""; position:absolute; right:-3px; bottom:-3px; width:10px; height:10px; border-radius:50%;
  background:var(--tt-green); border:2px solid #0a1636; box-shadow:0 0 8px rgba(61,220,132,.8);
}
.tt-user-meta{min-width:0; flex:1; display:flex; flex-direction:column; gap:2px}
.tt-user-name{font-weight:800; color:#fff; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:5px}
.tt-user-sub{font-size:10.5px; color:var(--tt-sb-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tt-user-lvl{
  flex:0 0 auto; padding:3px 7px; border-radius:999px; font-size:9.5px; font-weight:900; letter-spacing:.08em;
  color:var(--tt-gold-3); background:rgba(242,193,74,.10); border:1px solid rgba(242,193,74,.3);
  box-shadow:0 0 12px rgba(242,193,74,.14);
}
.tt-user-logout{
  flex:0 0 auto; width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
  color:rgba(255,255,255,.7); background:rgba(170,192,255,.05); border:1px solid rgba(170,192,255,.10);
  text-decoration:none; font-size:12px; transition:all var(--tt-fast) var(--tt-ease);
}
.tt-user-logout:hover{color:#fff;background:rgba(255,92,92,.16);border-color:rgba(255,92,92,.45);box-shadow:var(--tt-glow-red)}

/* =========================================================
   6) HAUPTBEREICH + TOPBAR
   ========================================================= */
.tt-main{
  margin-left:var(--tt-sb-w);
  min-height:100vh; display:flex; flex-direction:column;
  background:transparent;
  transition:margin-left var(--tt-med) var(--tt-ease), width var(--tt-med) var(--tt-ease);
}
.tt-top{
  position:sticky; top:0; z-index:40;
  min-height:var(--tt-top-h);
  display:flex; align-items:center;
  background:linear-gradient(180deg, rgba(6,14,40,.96), rgba(6,14,40,.90));
  border-bottom:1px solid rgba(170,192,255,.08);
  padding:10px 22px;
  box-shadow:0 10px 30px rgba(1,4,18,.24);
}
.tt-top::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, rgba(242,193,74,0), rgba(242,193,74,.55) 30%, rgba(61,108,245,.5) 70%, rgba(61,108,245,0));
  opacity:.75; pointer-events:none;
}
.tt-top-titlebox{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto}
.tt-top-icon{
  width:40px;height:40px;min-width:40px;display:grid;place-items:center;border-radius:12px;font-size:17px;
  color:var(--tt-gold-3);
  background:linear-gradient(180deg, rgba(242,193,74,.20), rgba(242,193,74,.05));
  border:1px solid rgba(242,193,74,.34);
  box-shadow:0 0 20px rgba(242,193,74,.18), inset 0 1px 0 rgba(255,255,255,.08);
  animation:tt-scale-in .5s var(--tt-ease-out) backwards;
}
.tt-top-titlewrap{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}
.tt-top-title{
  font-weight:900; letter-spacing:.2px; font-size:19px; line-height:1.1;
  background:linear-gradient(90deg,#ffffff 0%,#ffe9b5 16%,#f2c14a 30%,#ffe9b5 44%,#ffffff 58%,#ffffff 100%);
  background-size:260% 100%; background-position:0 0;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 0 16px rgba(242,193,74,.28));
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  animation:tt-title-shine 2.2s var(--tt-ease-out) 1 backwards;
}
.tt-top-subtitle{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tt-muted); line-height:1.2;
}
.tt-top-subtitle .tt-crumb-sep{opacity:.45}
.tt-top-subtitle .tt-crumb-world{color:var(--tt-gold-3)}
.tt-top-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}

/* Uhr-Pille */
.tt-top-clock{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:900; font-size:12px; letter-spacing:.06em; font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.92);
  height:34px; padding:0 12px;
  border:1px solid rgba(170,192,255,.14);
  background:linear-gradient(180deg, rgba(170,192,255,.09), rgba(170,192,255,.035));
  border-radius:10px; line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color var(--tt-med) var(--tt-ease), box-shadow var(--tt-med) var(--tt-ease);
}
.tt-top-clock:hover{border-color:rgba(123,157,255,.45); box-shadow:var(--tt-glow-blue), inset 0 1px 0 rgba(255,255,255,.06)}
.tt-top-clock::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--tt-green); box-shadow:0 0 10px var(--tt-green);
  animation:tt-glow-breathe 2.2s ease-in-out infinite;
}

/* r84: Zwei Uhren – die eigene Zeit und, sobald eine Welt gewaehlt ist, die
   Serverzeit dieser Welt. Die Beschriftung steht klein unter der Zahl, damit
   auf einen Blick klar ist, nach welcher Uhr man liest. Die Serverzeit ist
   golden: sie gilt im Spiel, nach ihr wird abgeschickt. */
.tt-top-clocks{display:flex;align-items:stretch;gap:8px;flex:0 0 auto}
.tt-top-clocks .tt-top-clock{gap:8px;padding:0 11px}
.tt-top-clocks .tt-top-clock b{font-weight:900;font-size:13px;line-height:1.05}
.tt-top-clocks .tt-top-clock > span{
  display:block;font-weight:800;font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:rgba(200,212,245,.62);line-height:1.05;white-space:nowrap;
}
.tt-top-clocks .tt-top-clock{flex-direction:row;align-items:center}
.tt-top-clocks .tt-top-clock > span{margin-left:1px}
.tt-top-clock.is-srv{
  color:var(--tt-gold-3);
  border-color:rgba(242,193,74,.26);
  background:linear-gradient(180deg, rgba(242,193,74,.12), rgba(242,193,74,.045));
}
.tt-top-clock.is-srv:hover{border-color:rgba(242,193,74,.5); box-shadow:0 0 0 3px rgba(242,193,74,.12), inset 0 1px 0 rgba(255,255,255,.06)}
.tt-top-clock.is-srv::before{background:var(--tt-gold-3); box-shadow:0 0 10px rgba(242,193,74,.7)}
.tt-top-clock.is-srv > span{color:rgba(242,193,74,.72)}
/* Schmaler Bildschirm: die Beschriftungen weg, die Zahlen bleiben – die
   Serverzeit ist am Gold zu erkennen. */
@media (max-width:1240px){ .tt-top-clocks .tt-top-clock > span{display:none} }

/* Welten-Button (Topbar) */
.tt-top-right > .tt-btn-mini[data-tt-world-open]{
  height:34px !important; padding:0 12px !important; border-radius:10px !important;
  background:linear-gradient(180deg, rgba(170,192,255,.09), rgba(170,192,255,.035)) !important;
  color:#fff !important; border:1px solid rgba(170,192,255,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important; font-size:12px !important;
  transition:border-color var(--tt-med) var(--tt-ease), box-shadow var(--tt-med) var(--tt-ease), background var(--tt-med) var(--tt-ease) !important;
}
.tt-top-right > .tt-btn-mini[data-tt-world-open]:hover{border-color:rgba(242,193,74,.5) !important; box-shadow:0 0 20px rgba(242,193,74,.22), inset 0 0 0 1px rgba(242,193,74,.14) !important; background:rgba(242,193,74,.12) !important; color:#fff !important}
.tt-top-right > .tt-btn-mini[data-tt-world-open] .tt-chev{font-size:15px;transform:rotate(90deg);opacity:.8;transition:transform var(--tt-med) var(--tt-ease)}
.tt-top-right > .tt-btn-mini[data-tt-world-open][aria-expanded="true"] .tt-chev{transform:rotate(-90deg)}
.tt-top-world-ic{color:var(--tt-gold);font-size:12px;filter:drop-shadow(0 0 6px rgba(242,193,74,.5))}

/* Glocke */
.tt-bell{
  position:relative; appearance:none;
  height:34px; width:38px; padding:0;
  border:1px solid rgba(170,192,255,.14);
  background:linear-gradient(180deg, rgba(170,192,255,.09), rgba(170,192,255,.035));
  color:#fff; border-radius:10px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 18px rgba(1,4,18,.2);
  transition:border-color var(--tt-med) var(--tt-ease), box-shadow var(--tt-med) var(--tt-ease), background var(--tt-med) var(--tt-ease);
}
.tt-bell:hover{border-color:rgba(242,193,74,.5); box-shadow:0 0 20px rgba(242,193,74,.22), inset 0 0 0 1px rgba(242,193,74,.14); background:rgba(242,193,74,.12)}
.tt-bell:hover .tt-bell-ic{color:var(--tt-gold-3); filter:drop-shadow(0 0 8px rgba(242,193,74,.8))}
.tt-bell-ic{font-size:15px; filter:drop-shadow(0 0 6px rgba(242,193,74,.25)); transition:color var(--tt-fast) var(--tt-ease), filter var(--tt-fast) var(--tt-ease)}
.tt-bell-badge{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px;
  display:inline-flex; align-items:center; justify-content:center; padding:0 5px;
  font-size:10.5px; font-weight:900; border-radius:999px; color:#fff;
  border:2px solid #081334;
  background:linear-gradient(180deg, #ff6b6b, #d92b2b);
  box-shadow:0 0 12px rgba(255,92,92,.7), 0 6px 14px rgba(1,4,18,.35);
}
.tt-bell.has-unread{border-color:rgba(255,92,92,.4); animation:tt-pulse-red 2.2s ease-in-out infinite}
.tt-bell.has-unread .tt-bell-ic{animation:tt-bell-ring 2.6s ease-in-out infinite; transform-origin:top center}
@keyframes tt-bell-ring{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(12deg)}88%{transform:rotate(-10deg)}92%{transform:rotate(7deg)}96%{transform:rotate(-4deg)}}
@keyframes tt-bell-glow{0%{box-shadow:0 8px 18px rgba(1,4,18,.22)}50%{box-shadow:0 8px 18px rgba(1,4,18,.22),0 0 20px rgba(255,85,85,.16)}100%{box-shadow:0 8px 18px rgba(1,4,18,.22)}}

/* =========================================================
   7) POPUPS (Glocke & Welten) — einheitliche Modale
   ========================================================= */
[data-tt-bell-popup],[data-tt-world-popup]{
  position:fixed!important; inset:0!important;
  display:flex; align-items:center; justify-content:center; padding:18px;
  background:rgba(2,6,20,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  z-index:999999!important;
  animation:tt-fade-in .22s var(--tt-ease);
}
[data-tt-bell-popup][hidden],[data-tt-world-popup][hidden]{display:none!important}
[data-tt-bell-popup] .tt-popup-card,[data-tt-world-popup] .tt-popup-card{
  position:relative;
  width:min(820px, calc(100vw - 40px)); max-height:min(84vh, 780px);
  display:flex; flex-direction:column;
  border-radius:20px; overflow:hidden;
  border:1px solid rgba(242,193,74,.22);
  background:linear-gradient(180deg, rgba(18,34,80,.985), rgba(6,12,34,.99));
  box-shadow:0 34px 80px rgba(1,4,18,.6), 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 50px rgba(242,193,74,.08);
  animation:tt-scale-in .3s var(--tt-ease-out);
}
[data-tt-bell-popup] .tt-popup-card::before,[data-tt-world-popup] .tt-popup-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px; z-index:2;
  background:var(--tt-grad-hair); background-size:200% 100%; animation:tt-shimmer 6s linear infinite;
}
.tt-popup-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid rgba(170,192,255,.09);
  background:linear-gradient(180deg, rgba(170,192,255,.05), transparent);
  flex:0 0 auto;
}
.tt-popup-title{
  font-weight:900; letter-spacing:.2px; font-size:16px; color:#fff;
  display:flex; align-items:center; gap:10px;
}
.tt-popup-title::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--tt-gold); box-shadow:0 0 12px var(--tt-gold);
  animation:tt-glow-breathe 2.6s ease-in-out infinite;
}
.tt-popup-head-actions{display:flex; align-items:center; gap:8px}
.tt-popup-close{
  appearance:none; width:34px; height:34px; padding:0; border-radius:10px;
  border:1px solid rgba(170,192,255,.14); background:rgba(170,192,255,.07); color:#fff;
  display:inline-grid; place-items:center; cursor:pointer; font-size:14px;
  transition:all var(--tt-med) var(--tt-ease);
}
.tt-popup-close:hover{background:rgba(255,92,92,.16); border-color:rgba(255,92,92,.45); box-shadow:var(--tt-glow-red); transform:rotate(90deg)}
.tt-popup-body{padding:16px 18px 18px; max-height:min(66vh, 640px); overflow:auto; flex:1 1 auto}

/* Glocke: Liste */
.tt-bell-list{display:flex; flex-direction:column; gap:10px}
.tt-bell-item{
  display:flex; gap:12px; align-items:flex-start; padding:12px;
  border-radius:14px; border:1px solid rgba(170,192,255,.09);
  background:linear-gradient(180deg, rgba(170,192,255,.05), rgba(170,192,255,.018));
  transition:border-color var(--tt-med) var(--tt-ease), background var(--tt-med) var(--tt-ease), box-shadow var(--tt-med) var(--tt-ease);
  position:relative; overflow:hidden;
  animation:tt-fade-up .45s var(--tt-ease-out) backwards;
}
.tt-bell-item:nth-child(2){animation-delay:.05s}
.tt-bell-item:nth-child(3){animation-delay:.10s}
.tt-bell-item:nth-child(4){animation-delay:.15s}
.tt-bell-item:nth-child(n+5){animation-delay:.20s}
.tt-bell-item:hover{border-color:rgba(242,193,74,.32); background:rgba(242,193,74,.06); box-shadow:0 0 22px rgba(242,193,74,.08)}
.tt-bell-item.is-unread{border-color:rgba(242,193,74,.32); box-shadow:0 0 0 1px rgba(242,193,74,.10) inset, 0 0 22px rgba(242,193,74,.10)}
.tt-bell-item.is-unread::before{
  content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:3px;
  background:var(--tt-grad-gold); box-shadow:0 0 12px rgba(242,193,74,.7);
}
.tt-bell-item.is-read{opacity:.72}
.tt-bell-item-ic{
  width:36px; height:36px; min-width:36px; display:flex; align-items:center; justify-content:center;
  border-radius:11px; background:rgba(242,193,74,.10); border:1px solid rgba(242,193,74,.25);
  box-shadow:0 0 14px rgba(242,193,74,.12); font-size:15px;
}
.tt-bell-item-title{font-weight:900; margin-bottom:4px; color:#fff}
.tt-bell-item-text{color:var(--tt-text-soft); font-size:13px; line-height:1.4}
.tt-bell-item-actions,.tt-bell-item-actions2{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.tt-bell-empty{padding:34px 12px; text-align:center; color:var(--tt-muted); font-size:13.5px}
.tt-bell-empty i{display:block; font-size:28px; margin-bottom:10px; color:var(--tt-gold); filter:drop-shadow(0 0 10px rgba(242,193,74,.4))}
.tt-remind{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.tt-remind-in{
  width:78px !important; min-height:34px !important; height:34px !important;
  border-radius:10px !important; border:1px solid rgba(170,192,255,.16) !important;
  background:rgba(2,6,20,.32) !important; color:#fff !important; padding:0 10px !important; outline:none;
}
.tt-remind-in:focus{box-shadow:var(--tt-focus-ring) !important}
.tt-bell-item-main{flex:1 1 auto; min-width:0}
.tt-bell-item-title{overflow-wrap:anywhere}
.tt-bell-item-text{overflow-wrap:anywhere; white-space:pre-line}
.tt-bell-item-time{margin-top:6px; font-size:11.5px; letter-spacing:.3px; text-transform:uppercase; color:var(--tt-muted)}
.tt-bell-item-actions .tt-btn-mini,.tt-bell-item-actions2 .tt-btn-mini{height:32px !important; min-height:32px !important; padding:0 12px !important; font-size:12px !important}
.tt-bell-item-actions2{margin-top:8px}
[data-tt-bell-popup] .tt-bell-item .tt-bell-purge{display:none !important}
[data-tt-bell-popup].tt-archive-mode .tt-bell-item .tt-bell-purge{display:inline-flex !important}
[data-tt-bell-popup].tt-archive-mode .tt-bell-item [data-tt-delete],[data-tt-bell-popup].tt-archive-mode .tt-bell-item .tt-bell-item-actions2{display:none !important}
.tt-bell-item.is-archived{opacity:.62}
.tt-bell-empty[hidden]{display:none !important}

/* Welten-Auswahl */
.tt-worldpick{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:10px}
.tt-worldpick-row{margin:0; display:flex}
.tt-worldpick-row .tt-btn-mini,
.tt-wp-actions > .tt-btn-mini{
  width:100% !important; height:44px !important; justify-content:flex-start !important;
  padding:0 14px !important; border-radius:12px !important; font-size:13px !important;
  background:linear-gradient(90deg, rgba(242,193,74,.18), rgba(242,193,74,.04) 60%, rgba(170,192,255,.04)) !important;
  background-size:220% 100% !important; background-position:100% 0 !important;
  color:#eef2ff !important; border:1px solid rgba(170,192,255,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important; gap:10px !important;
  position:relative; overflow:hidden;
  transition:background-position var(--tt-slow) var(--tt-ease), border-color var(--tt-med) var(--tt-ease), box-shadow var(--tt-med) var(--tt-ease) !important;
}
.tt-worldpick-row .tt-btn-mini::before,
.tt-wp-actions > .tt-btn-mini::before{
  content:""; width:8px; height:8px; border-radius:50%; flex:0 0 auto;
  background:rgba(255,255,255,.22); transition:all var(--tt-med) var(--tt-ease);
}
.tt-worldpick-row .tt-btn-mini:hover,
.tt-wp-actions > .tt-btn-mini:hover{border-color:rgba(242,193,74,.5) !important; background-position:0 0 !important; box-shadow:0 0 20px rgba(242,193,74,.16), inset 0 0 0 1px rgba(242,193,74,.14) !important; color:#fff !important}
.tt-worldpick-row .tt-btn-mini:hover::before,
.tt-wp-actions > .tt-btn-mini:hover::before{background:var(--tt-gold); box-shadow:0 0 10px var(--tt-gold)}
.tt-worldpick-row .tt-btn-mini.is-active,
.tt-worldpick-row .tt-btn-mini[style*="outline"]{
  outline:none !important;
  background:linear-gradient(90deg, rgba(242,193,74,.24), rgba(242,193,74,.06)) !important;
  background-size:100% 100% !important;
  border-color:rgba(242,193,74,.55) !important; color:#fff !important;
  box-shadow:0 0 20px rgba(242,193,74,.18), inset 0 0 0 1px rgba(242,193,74,.2) !important;
}
.tt-worldpick-row .tt-btn-mini.is-active::before,
.tt-worldpick-row .tt-btn-mini[style*="outline"]::before{background:var(--tt-gold); box-shadow:0 0 10px var(--tt-gold)}
.tt-worldpick-label{
  display:flex; align-items:center; gap:10px; margin:16px 0 10px;
  font-size:11px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:var(--tt-gold-3);
}
.tt-worldpick-label::after{content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(242,193,74,.4), transparent)}

/* Seite */
.tt-page{padding:24px 22px 18px; flex:1; animation:tt-fade-up .42s var(--tt-ease-out) backwards}
.tt-page-foot{
  padding:12px 22px; border-top:1px solid rgba(170,192,255,.08);
  color:rgba(255,255,255,.62); font-size:12px;
}
.tt-page-foot-inner{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tt-page-foot-inner a{color:rgba(255,255,255,.82);text-decoration:none}
.tt-page-foot-inner a:hover{color:var(--tt-gold)}

/* Ladebalken (Seitenwechsel) */
.tt-progress-top{
  position:fixed; left:0; top:0; height:3px; width:0; z-index:1000000;
  background:linear-gradient(90deg, var(--tt-gold-3), var(--tt-gold), var(--tt-blue-3));
  box-shadow:0 0 14px rgba(242,193,74,.8), 0 0 30px rgba(61,108,245,.5);
  opacity:0; transition:width .4s var(--tt-ease), opacity .3s ease;
  pointer-events:none;
}
.tt-progress-top.is-on{opacity:1}

/* Toasts */
.tt-toast-host{position:fixed; right:18px; bottom:18px; z-index:1000001; display:flex; flex-direction:column; gap:10px; pointer-events:none}
.tt-toast-host .tt-toast{
  pointer-events:auto; min-width:260px; max-width:min(420px, calc(100vw - 36px));
  padding:12px 14px; border-radius:14px; display:flex; align-items:center; gap:10px;
  border:1px solid rgba(242,193,74,.3); color:#fff; font-weight:700; font-size:13.5px;
  background:linear-gradient(180deg, rgba(18,34,80,.96), rgba(6,12,34,.98));
  box-shadow:0 20px 50px rgba(1,4,18,.5), 0 0 24px rgba(242,193,74,.12);
  animation:tt-toast-in .38s var(--tt-ease-out);
}
@keyframes tt-toast-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.tt-toast-host .tt-toast.ok{border-color:rgba(61,220,132,.4)}
.tt-toast-host .tt-toast.err{border-color:rgba(255,92,92,.45)}

/* =========================================================
   8) EINGEKLAPPTE SIDEBAR (Desktop)
   ========================================================= */
.tt-sb-collapsed{--tt-sb-w:78px}
.tt-sb-collapsed .tt-brand{flex-direction:column; gap:8px; padding:12px 8px 10px}
.tt-sb-collapsed .tt-brand-mark{width:44px;height:44px}
.tt-sb-collapsed .tt-brand-mark img{width:44px;height:44px}
.tt-sb-collapsed .tt-brand-text{display:none}
.tt-sb-collapsed .tt-sb-collapse{margin-left:0}
.tt-sb-collapsed .tt-sb-collapse i{transform:rotate(180deg)}
.tt-sb-collapsed .tt-sb-tools{padding:8px 8px}
.tt-sb-collapsed .tt-search{padding:0 !important; text-indent:-9999px; width:40px !important; margin:0 auto}
.tt-sb-collapsed .tt-search-ic{left:50%; transform:translate(-50%,-50%)}
.tt-sb-collapsed .tt-search-kbd{display:none}
.tt-sb-collapsed .tt-nav{padding:8px 8px 14px}
.tt-sb-collapsed .tt-group{border-radius:12px}
.tt-sb-collapsed .tt-group-btn{justify-content:center; padding:8px 6px}
.tt-sb-collapsed .tt-txt,.tt-sb-collapsed .tt-chev,.tt-sb-collapsed .tt-ext{display:none}
.tt-sb-collapsed .tt-group-body{padding:2px 4px 6px}
.tt-sb-collapsed .tt-item,.tt-sb-collapsed .tt-sub-btn{justify-content:center; padding:7px 4px}
.tt-sb-collapsed .tt-item-sub{padding:7px 4px}
.tt-sb-collapsed .tt-item-sub::after{position:static; transform:none; width:8px; height:8px}
.tt-sb-collapsed .tt-item-sub .tt-ico{display:none}
.tt-sb-collapsed .tt-sub-body::before{display:none}
.tt-sb-collapsed .tt-item.active::before{top:20%;bottom:20%}
.tt-sb-collapsed .tt-foot{padding:8px 8px 10px}
.tt-sb-collapsed .tt-user-chip{padding:7px; justify-content:center}
.tt-sb-collapsed .tt-user-meta,.tt-sb-collapsed .tt-user-lvl,.tt-sb-collapsed .tt-user-logout{display:none}
.tt-sb-collapsed .tt-foot-sub{display:none}
.tt-sb-collapsed .tt-foot-legal{display:none}
/* Tooltips bei eingeklappter Sidebar: native title-Attribute (sidebar.js) — nichts wird abgeschnitten */

/* =========================================================
   9) MOBILE
   ========================================================= */
@media (max-width:980px){
  .tt-burger{display:inline-grid;place-items:center}
  .tt-sb-collapse{display:none}
  .tt-sb{transform:translateX(-102%);width:min(92vw, 300px);box-shadow:none}
  body.tt-sb-open .tt-sb{transform:translateX(0);box-shadow:30px 0 80px rgba(1,4,18,.6)}
  .tt-sb-collapsed{--tt-sb-w:0px}
  .tt-main{margin-left:0}
  .tt-top{padding:10px 14px}
  .tt-top-title{font-size:17px}
  .tt-top-icon{width:36px;height:36px;min-width:36px;font-size:15px;border-radius:11px}
  .tt-top-subtitle{display:none}
  /* r84: Auf dem Handy bleibt die Serverzeit stehen – sie ist die, nach der
     abgeschickt wird. Die eigene Zeit hat das Handy selbst oben stehen; ohne
     gewaehlte Welt bleibt sie als einzige Uhr aber sichtbar. */
  .tt-top-clocks > .tt-top-clock:not(.is-srv):not(:only-child){display:none}
  .tt-top-clocks .tt-top-clock > span{display:none}
  .tt-top-world-txt{display:none}
  .tt-top-right > .tt-btn-mini[data-tt-world-open]{padding:0 10px !important; gap:4px !important}
}