/* =========================================================
   VANTEDGE//WIKI — VICE CITY REDESIGN
   Neon / Sunset / Miami / Crime Editorial
   ========================================================= */

:root{
  --bg:#09080c;
  --bg2:#120b13;
  --surface:rgba(22,15,22,.78);
  --surface2:rgba(34,19,28,.72);

  --pink:#ff2b9d;
  --hotpink:#ff4fc3;
  --coral:#ff674d;
  --orange:#ff9a3d;
  --yellow:#ffd166;
  --cyan:#65e8e1;

  --text:#fff7f5;
  --muted:#b9a7ad;
  --dim:#75666d;

  --line:rgba(255,255,255,.12);
  --line-pink:rgba(101, 232, 225,.32);

  --danger:#ff465f;

  --shadow:0 25px 80px rgba(0,0,0,.55);
  --pink-glow:0 0 35px rgba(101, 232, 225,.25);
}

/* =========================================================
   RESET
   ========================================================= */

*{
  box-sizing:border-box;
  scrollbar-width:thin;
    scrollbar-color: #61616161 #0b080d;
}

html{
  scroll-behavior:smooth;
}

html,
body{
  margin:0;
  min-height:100%;
  background:
    radial-gradient(circle at 78% 12%,rgba(101, 232, 225,.18),transparent 28%),
    radial-gradient(circle at 20% 85%,rgba(255,103,77,.12),transparent 30%),
    linear-gradient(145deg,#07070a 0%,#100a10 45%,#09080c 100%);
  color:var(--text);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

body{
  overflow-x:hidden;
}

/* Film grain */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;

    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.018) 0px,
            rgba(255,255,255,0.018) 1px,
            transparent 1px,
            transparent 3px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(0,0,0,0.025) 0px,
            rgba(0,0,0,0.025) 1px,
            transparent 1px,
            transparent 3px
        );

    opacity: 0.35;
    mix-blend-mode: overlay;
}

/* Miami sunset atmosphere */
body:after{
  content:"";
  position:fixed;
  left:-15vw;
  right:-15vw;
  top:-25vh;
  height:70vh;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(
      ellipse at 50% 100%,
      rgba(255,85,123,.30),
      rgba(101, 232, 225,.10) 30%,
      transparent 68%
    );
  filter:blur(35px);
}

/* Chrome scrollbar */
::-webkit-scrollbar{
  width:6px;
  height:6px;
}

::-webkit-scrollbar-track{
  background:#0b080d;
}

::-webkit-scrollbar-thumb{
  background:linear-gradient(
    180deg,
    var(--pink),
    var(--orange)
  );
  border-radius:20px;
}

/* =========================================================
   APP
   ========================================================= */

.app{
  display:grid;
  grid-template-columns:285px 1fr;
  min-height:100vh;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  padding:24px 17px;
  border-right:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(
      180deg,
      rgba(13,8,13,.96),
      rgba(7,7,10,.92)
    );
  backdrop-filter:blur(25px);
  z-index:100;
  overflow:hidden;
}

/* Pink vertical glow */
.sidebar:after{
  content:"";
  position:absolute;
  right:-1px;
  top:10%;
  width:2px;
  height:80%;
  background:linear-gradient(
    transparent,
    var(--pink),
    var(--orange),
    transparent
  );
  opacity:.7;
  box-shadow:0 0 20px var(--pink);
}


.brand{
  display:flex;
  align-items:center;
  gap:13px;

  padding:8px 10px 31px;
}

.logo{
  width:43px;
  height:43px;

  display:grid;
  place-items:center;

  color:#fff;

  font-family:
    Impact,
    Haettenschweiler,
    sans-serif;

  font-size:21px;

  border:1px solid rgba(255,255,255,.22);
  border-radius:2px;

  background:
    linear-gradient(
      145deg,
      #26070d,
      #090506
    );

  box-shadow:
    inset 0 0 20px rgba(181,18,47,.18),
    0 8px 30px rgba(0,0,0,.7);

  transform:skew(-4deg);
}

.brand strong{
  display:block;
  color:#fff;
  font-size:14px;
  letter-spacing:2px;
  text-transform:uppercase;
}

.brand span{
  display:block;
  margin-top:4px;
  color:var(--dim);
  font-size:9px;
  letter-spacing:1.7px;
  text-transform:uppercase;
}

.nav-title{
  margin:0 10px 9px;
  color:#695861;
  font-size:9px;
  font-weight:800;
  letter-spacing:2.5px;
  text-transform:uppercase;
}

.nav button{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;

  padding:12px 13px;
  margin:4px 0;

  color:#9d8e94;
  background:transparent;

  border:1px solid transparent;
  border-radius:4px;

  cursor:pointer;
  text-align:left;

  transition:
    color .2s ease,
    background .2s ease,
    transform .2s ease,
    border .2s ease;
}

.nav button:before{
  content:"";
  position:absolute;
  left:-1px;
  top:20%;
  width:2px;
  height:60%;
  background:var(--pink);
  transform:scaleY(0);
  transition:.2s;
}

.nav button:hover,
.nav button.active{
  color:#fff;
  background:
    linear-gradient(
      90deg,
      rgba(101, 232, 225,.16),
      rgba(255,103,77,.05),
      transparent
    );
  border-color:rgba(101, 232, 225,.16);
  transform:translateX(4px);
}

.nav button.active{
  box-shadow:
    inset 3px 0 var(--pink),
    0 8px 30px rgba(101, 232, 225,.08);
}

.nav button.active:before{
  transform:scaleY(1);
}

.nav .ico{
  width:23px;
  color:var(--pink);
  font-size:15px;
  text-align:center;
  text-shadow:0 0 12px rgba(101, 232, 225,.6);
}

.nav .pink{
  color:var(--coral);
}

.side-status{
  position:absolute;
  left:17px;
  right:17px;
  bottom:18px;

  padding:13px;

  color:#89777f;
  font-size:10px;
  line-height:1.6;

  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  border-radius:4px;
}

.dot{
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:7px;

  border-radius:50%;
  background:#59e3a7;

  box-shadow:0 0 12px #59e3a7;
}

/* =========================================================
   MAIN
   ========================================================= */

main{
  min-width:0;
  padding:34px 40px 70px;
}

/* =========================================================
   TOPBAR
   ========================================================= */

.topbar{
  position:relative;
  min-height:220px;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;

  margin-bottom:30px;
  padding:30px 0 32px;

  overflow:hidden;

  border-bottom:1px solid rgba(255,255,255,.10);
}

/* Decorative sunset stripe */
.topbar:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:46%;
  height:2px;

  background:
    linear-gradient(
      90deg,
      var(--pink),
      var(--coral),
      var(--orange),
      transparent
    );

  box-shadow:0 0 20px rgba(101, 232, 225,.55);
}

.eyebrow{
  color:var(--pink);
  font-size:9px;
  font-weight:800;
  letter-spacing:3px;
  text-transform:uppercase;
}

h1{
  max-width:1000px;

  margin:10px 0 0;

  font-family:
    Impact,
    Haettenschweiler,
    "Arial Narrow Bold",
    sans-serif;

  font-size:clamp(42px,6vw,88px);
  line-height:.84;
  letter-spacing:-2px;
  text-transform:uppercase;

  text-shadow:
    0 4px 0 rgba(0,0,0,.5),
    0 15px 40px rgba(0,0,0,.4);
}

h1 em {
    font-style: normal;
    color: var(--pink) !important;
    text-shadow: 2px 2px 0 #00000094, 0 0 25px rgb(255 0 137 / 85%) !important;
}

.topbar .sub{
  max-width:700px;
  margin-top:15px;
  color:#a9989e;
  font-size:13px;
  line-height:1.6;
}

.clock{
  min-width:145px;
  padding:12px 15px;

  text-align:right;
  font-variant-numeric:tabular-nums;

  border:1px solid rgba(255,255,255,.12);
  border-radius:3px;

  background:rgba(255,255,255,.035);
  backdrop-filter:blur(15px);
}

.clock b{
  display:block;
  color:#fff;
  font-size:18px;
  letter-spacing:1px;
}

.clock span{
  display:block;
  margin-top:3px;
  color:#796a71;
  font-size:8px;
  letter-spacing:1.7px;
}

/* =========================================================
   PAGES
   ========================================================= */

.page{
  display:none;
  animation:pageIn .45s ease both;
}

.page.active{
  display:block;
}

@keyframes pageIn{
  from{
    opacity:0;
    transform:translateY(15px);
  }

  to{
    opacity:1;
    transform:none;
  }
}

/* =========================================================
   SECTION HEADERS
   ========================================================= */

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin:32px 0 15px;
  padding-bottom:11px;

  border-bottom:1px solid rgba(255,255,255,.07);
}

.section-head h2{
  margin:0;

  font-size:14px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
}

.section-head span{
  color:#74666c;
  font-size:9px;
  font-weight:700;
  letter-spacing:1.8px;
  text-transform:uppercase;
}

/* =========================================================
   GRIDS
   ========================================================= */

.grid{
  display:grid;
  gap:15px;
}

.stats{
  grid-template-columns:repeat(4,1fr);
}

.layout2{
  grid-template-columns:1.35fr .85fr;
}

.tip-grid{
  grid-template-columns:repeat(3,1fr);
}

/* =========================================================
   CARDS
   ========================================================= */

.card{
  position:relative;
  overflow:hidden;

  padding:20px;

  border:1px solid rgba(255,255,255,.09);
  border-radius:4px;

  background:
    linear-gradient(
      145deg,
      rgba(31,20,29,.86),
      rgba(12,10,14,.88)
    );

  box-shadow:var(--shadow);

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

/* Top chrome line */
.card:before{
  content:"";

  position:absolute;
  top:0;
  left:0;
  right:0;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.5),
      transparent
    );

  opacity:.35;
}

.card:after{
  content:"";

  position:absolute;
  width:100px;
  height:100px;

  right:-50px;
  top:-50px;

  border-radius:50%;

  background:rgba(101, 232, 225,.10);
  filter:blur(25px);

  transition:.4s;
}

.card:hover{
  transform:translateY(-4px);
  border-color:rgba(101, 232, 225,.30);

  box-shadow:
    0 25px 80px rgba(0,0,0,.6),
    0 0 35px rgba(101, 232, 225,.08);
}

.card:hover:after{
  background:rgba(255,103,77,.16);
}

/* =========================================================
   STAT CARDS
   ========================================================= */

.stats .card{
  min-height:145px;
}

.label{
  color:#88777e;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.8px;
  text-transform:uppercase;
}

.metric{
  margin-top:8px;

  font-family:
    Impact,
    Haettenschweiler,
    "Arial Narrow Bold",
    sans-serif;

  font-size:38px;
  line-height:1;

  letter-spacing:1px;
}

.metric.cyan{
  color:var(--cyan);
}

.metric.pink{
  color:var(--pink);
}

.metric.blue{
  color:var(--orange);
}

.sub{
  color:var(--muted);
  font-size:16px;
  line-height:1.55;
}

/* =========================================================
   RANK SYSTEM
   ========================================================= */

.rank-grid{
  grid-template-columns:1fr;
  gap:10px;
}

.rank-item{
  display:grid;
  grid-template-columns:105px 1fr;
  align-items:center;
  gap:18px;

  padding:14px 17px;
}

.rank-item img{
  filter:
    drop-shadow(0 10px 20px rgba(0,0,0,.7));
  transition:.3s;
}

.rank-item:hover img{
  transform:scale(1.08) rotate(-2deg);
}

.rank-item h3{
  font-family:
    Impact,
    Haettenschweiler,
    sans-serif;

  letter-spacing:1px;
  text-transform:uppercase;
}

.rank-item p{
  color:#a8989e !important;
}

/* =========================================================
   GUIDES / TIPS
   ========================================================= */

.tip{
  min-height:185px;
}

.tip .num{
font-family:Impact, Open-Sans, sans-serif;

  font-size:42px;
  line-height:1;

  color:var(--pink) !important;

  text-shadow:
    2px 2px 0 rgba(255,103,77,.5),
    0 0 20px rgba(101, 232, 225,.25);
}

.tip h3{
  margin:12px 0 7px;

font-size:15px;
  letter-spacing:1px;
  text-transform:uppercase;
}

.tip p{
  color:#9f8d94 !important;
  font-size:12.5px;
  line-height:1.65;
    font-size: 16px;
}

/* =========================================================
   FILTERS
   ========================================================= */

.filter-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}

.filter-btn{
  padding:10px 15px;

  color:#8d7d84;
  background:rgba(255,255,255,.025);

  border:1px solid rgba(255,255,255,.10);
  border-radius:3px;

  cursor:pointer;
  font-size:10px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;

  transition:.2s;
}

.filter-btn:hover{
  color:#fff;
  transform:translateY(-1px);
}

.filter-btn.btn-temp:hover,
.filter-btn.btn-temp.active{
  color:var(--cyan);
  border-color:var(--cyan);
  background:rgba(101,232,225,.08);
  box-shadow:0 0 20px rgba(101,232,225,.12);
}

.filter-btn.btn-fine:hover,
.filter-btn.btn-fine.active{
  color:var(--pink);
  border-color:var(--pink);
  background:rgba(101, 232, 225,.09);
  box-shadow:var(--pink-glow);
}

.filter-btn.btn-perm:hover,
.filter-btn.btn-perm.active{
  color:var(--danger);
  border-color:var(--danger);
  background:rgba(255,70,95,.08);
}

.sanction-group{
  display:none;
}

.sanction-group.active{
  display:grid;
  gap:10px;
}

/* =========================================================
   INTERFACE SCREENSHOTS
   ========================================================= */

.interface-shell{
  display:grid;
  grid-template-columns:1fr;
  gap:15px;
}

.image-container{
  position:relative;
  overflow:hidden;

  width:100%;

  border:1px solid rgba(255,255,255,.12);
  border-radius:4px;

  background:#060508;

  box-shadow:
    0 30px 90px rgba(0,0,0,.7),
    0 0 40px rgba(101, 232, 225,.05);
}

.image-container:after{
  content:"";

  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    linear-gradient(
      120deg,
      transparent 40%,
      rgba(255,255,255,.06),
      transparent 60%
    );

  transform:translateX(-100%);
  transition:1s;
}

.image-container:hover:after{
  transform:translateX(100%);
}

.image-container img{
  display:block;
  width:100%;
  height:auto;
}

.hotspot{
  position:absolute;

  border:1px dashed rgba(101, 232, 225,.65);
  background:rgba(101, 232, 225,.07);

  cursor:pointer;
  border-radius:2px;

  transition:.2s;
}

.hotspot:hover{
  background:rgba(101, 232, 225,.22);
  border-color:#fff;

  box-shadow:
    0 0 20px rgba(101, 232, 225,.5),
    inset 0 0 20px rgba(101, 232, 225,.08);
}

/* =========================================================
   DIALOG ARCHIVE
   ========================================================= */

.dialog-layout{
  grid-template-columns:250px 1fr;
}

.dialog-nav button{
  width:100%;

  margin-bottom:7px;
  padding:12px;

  color:#94838a;
  background:rgba(255,255,255,.025);

  border:1px solid rgba(255,255,255,.08);
  border-radius:3px;

  cursor:pointer;
  text-align:left;

  font-size:10px;
  font-weight:800;
  letter-spacing:.7px;
  text-transform:uppercase;

  transition:.2s;
}

.dialog-nav button:hover,
.dialog-nav button.active{
  color:#fff;

  border-color:var(--pink);

  background:
    linear-gradient(
      90deg,
      rgba(101, 232, 225,.16),
      transparent
    );

  box-shadow:
    inset 3px 0 var(--pink),
    0 0 20px rgba(101, 232, 225,.08);
}

/* Variant tabs */
.variant-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:16px;
}

.variant-btn{
  padding:8px 12px;

  color:#97878d;
  background:rgba(255,255,255,.025);

  border:1px solid rgba(255,255,255,.09);
  border-radius:3px;

  cursor:pointer;
  font-size:9px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
}

.variant-btn:hover,
.variant-btn.active{
  color:#fff;
  border-color:var(--pink);
  background:rgba(101, 232, 225,.10);
}

/* =========================================================
   CHAT BUBBLES
   ========================================================= */

.bubble{
  position:relative;

  padding:12px 15px;
  margin-bottom:9px;

  border-radius:3px;

  font-size:12px;
  line-height:1.6;
}

.bubble small{
  display:block;
  margin-bottom:4px;

  font-size:8px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.bubble.kunde{
  margin-right:auto;

  color:#eee;

  background:rgba(101,232,225,.045);
  border:1px solid rgba(101,232,225,.16);
}

.bubble.kunde small {
    color: #55ffd9;
}

.bubble.mod {
    margin-left: auto;
    color: #fff;
    background: rgb(231 101 232 / 6%);
    border: 1px solid rgb(247 109 232 / 37%);
    text-align: right;
}

.bubble.mod small {
    color: #f50091;
}

/* =========================================================
   RULES
   ========================================================= */

.rule{
  display:flex;
  gap:12px;

  padding:12px 0;

  border-bottom:1px solid rgba(255,255,255,.06);

  font-size:11px;
  line-height:1.6;
}

.rule:last-child{
  border-bottom:0;
}

.rule i{
  color:var(--pink);
  font-style:normal;
  font-weight:900;
}

/* =========================================================
   MODAL
   ========================================================= */

.modal{
  position:fixed;
  inset:0;
  z-index:1000;

  display:grid;
  place-items:center;

  padding:20px;

  background:rgba(5,3,7,.86);
  backdrop-filter:blur(16px);

  opacity:0;
  pointer-events:none;

  transition:.25s;
}

.modal.open{
  opacity:1;
  pointer-events:auto;
}

.modal-box{
  position:relative;

  width:min(720px,100%);
  max-height:82vh;
  overflow:auto;

  padding:28px;

  border:1px solid rgba(101, 232, 225,.45);
  border-radius:4px;

  background:
    linear-gradient(
      145deg,
      rgba(30,17,27,.98),
      rgba(10,8,12,.98)
    );

  box-shadow:
    0 40px 120px rgba(0,0,0,.8),
    0 0 50px rgba(101, 232, 225,.12);

  transform:translateY(15px) scale(.97);
  transition:.3s;
}

.modal.open .modal-box{
  transform:none;
}

.modal-box:before{
  content:"";

  position:absolute;
  left:0;
  right:0;
  top:0;

  height:2px;

  background:
    linear-gradient(
      90deg,
      var(--pink),
      var(--coral),
      var(--orange),
      transparent
    );
}

.modal-box h2{
  margin:0 45px 16px 0;

font-size:25px;
  letter-spacing:1px;
  text-transform:uppercase;
}

.modal-box .close{
  position:absolute;
  top:20px;
  right:20px;

  width:32px;
  height:32px;

  color:#fff;
  background:rgba(255,255,255,.04);

  border:1px solid rgba(255,255,255,.12);
  border-radius:3px;

  cursor:pointer;
  font-size:22px;

  transition:.2s;
}

.modal-box .close:hover{
  color:#fff;
  border-color:var(--pink);
  background:var(--pink);
}

.modal-text{
  color:#b7a6ac;
  font-size:12px;
  line-height:1.75;
}

.modal-text img{
  display:block;

  width:100%;
  height:auto;

  margin:12px 0;

  border:1px solid rgba(101, 232, 225,.22);
  border-radius:3px;

  cursor:zoom-in;

  box-shadow:
    0 15px 40px rgba(0,0,0,.5);

  transition:.3s;
}

.modal-text img:hover{
  transform:scale(1.015);
  border-color:var(--pink);
  box-shadow:
    0 0 30px rgba(101, 232, 225,.20);
}

/* =========================================================
   MOBILE
   ========================================================= */

.mobile-toggle{
  display:none;

  position:fixed;
  right:15px;
  top:15px;
  z-index:500;

  width:43px;
  height:43px;

  color:#fff;

  background:
    linear-gradient(
      145deg,
      var(--pink),
      var(--coral)
    );

  border:0;
  border-radius:50%;

  box-shadow:
    0 10px 30px rgba(0,0,0,.5),
    0 0 20px rgba(101, 232, 225,.25);

  cursor:pointer;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1100px){

  .app{
    grid-template-columns:235px 1fr;
  }

  main{
    padding:28px 25px 60px;
  }

  .stats{
    grid-template-columns:repeat(2,1fr);
  }

  .tip-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:760px){

  .app{
    display:block;
  }

  .sidebar{
    position:fixed;
    inset:0 auto 0 0;

    width:min(290px,88vw);

    transform:translateX(-105%);
    transition:.3s;
  }

  .sidebar.open{
    transform:none;
  }

  .mobile-toggle{
    display:block;
  }

  .side-status{
    display:none;
  }

  main{
    padding:18px 15px 50px;
  }

  .topbar{
    min-height:0;
    padding-top:60px;
    align-items:flex-start;
  }

  .topbar .clock{
    display:none;
  }

  h1{
    font-size:clamp(44px,14vw,70px);
  }

  .section-head{
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }

  .stats,
  .tip-grid,
  .layout2,
  .dialog-layout{
    grid-template-columns:1fr;
  }

  .rank-item{
    grid-template-columns:75px 1fr;
  }

  .rank-item img{
    width:75px !important;
    height:75px !important;
  }

  .filter-tabs{
    flex-direction:column;
  }

  .filter-btn{
    width:100%;
  }
}

@media(max-width:480px){

  .brand{
    padding-bottom:20px;
  }

  .card{
    padding:16px;
  }

  .rank-item{
    grid-template-columns:1fr;
    text-align:center;
  }

  .rank-item img{
    margin:auto;
  }

  .metric{
    font-size:34px;
  }
}

/* =========================================================
EFFIZIENZ
========================================================= */

.efficiency-intro h3{
margin:8px 0 12px;
color:var(--cyan);
font-size:18px;
}

.efficiency-intro p{
line-height:1.7;
}

.efficiency-kpis{
margin-top:15px;
}

.efficiency-kpi .num{
font-size:38px;
}

.efficiency-link{
display:inline-block;
margin:5px 6px 0 0;
padding:7px 10px;
color:var(--pink);
border: 1px solid #00ffcc45;
border-radius:3px;
text-decoration:none;
font-size:10px;
font-weight:800;
text-transform:uppercase;
transition:.2s;
}

.efficiency-link:hover{
color:#fff;
border-color:var(--pink);
background:rgba(101, 232, 225,.1);
}

.efficiency-text{
display:flex;
gap:16px;
align-items:flex-start;
margin-top:15px;
}

.efficiency-text .num{
color:var(--cyan);
font-size:30px;
}

.efficiency-text h3{
margin:6px 0;
}

.efficiency-text p{
margin-bottom:0;
}

.efficiency-note{
display:flex;
gap:14px;
align-items:flex-start;
margin-top:15px;
border-color:rgba(255,209,102,.2);
}

.efficiency-note > span{
font-size:22px;
}

.efficiency-note p{
margin:0;
line-height:1.7;
}

/* =========================================================
WARTESCHLANGE
========================================================= */

.queue{
margin-bottom:20px;
}

.queue-window{
position:relative;
overflow:hidden;
padding:10px 0 18px;
}

.queue-track{
display:flex;
gap:10px;
width:max-content;
transform:translateX(0);
}

.queue-block{
width:145px;
min-height:95px;
flex-shrink:0;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:7px;

text-align:center;
padding:12px;

background:rgba(255,255,255,.025);
border:1px solid var(--line);
border-radius:4px;

color:#fff;
font-size:10px;
font-weight:800;
letter-spacing:.7px;
text-transform:uppercase;

transition:
transform .45s ease,
opacity .45s ease;
}

.queue-block span{
font-size:23px;
}

.queue-block.active-customer{
border-color:rgba(101,232,225,.35);
}

.queue-block.active-customer span{
color:var(--cyan);
}

.queue-block.new-customer{
border-color:rgba(67,167,255,.35);
}

.queue-block.new-customer span{
color:#43a7ff;
}

.queue-block.asa{
border-color:rgba(101, 232, 225,.35);
}

.queue-block.asa span{
color:var(--pink);
}

.queue-block.icebreaker{
border-color:rgba(255,209,102,.35);
}

.queue-block.icebreaker span{
color:var(--yellow);
}

.queue-warning{
display:flex;
gap:12px;
align-items:flex-start;

padding:13px 15px;

border:1px solid rgba(255,209,102,.2);
border-radius:4px;

background:rgba(255,209,102,.025);
}

.queue-warning > span{
font-size:19px;
}

.queue-warning p{
margin:0;
color:var(--muted);
font-size:11px;
line-height:1.6;
}

.queue-warning strong{
color:#fff;
}

/* Mobile */
@media(max-width:760px){

.efficiency-text{
flex-direction:column;
}

.queue-block{
width:120px;
min-height:85px;
font-size:9px;
}
}


/* =========================================================
   BUTTONS & FUNKTIONEN — INFORMATION GUIDE
   ========================================================= */

.nav-section-gap{
  height:10px;
  margin:8px 9px 7px;
  border-top:1px solid rgba(255,255,255,.055);
  position:relative;
}
.nav-section-gap:after{
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width:42px;
  height:1px;
  background:linear-gradient(90deg,var(--pink),transparent);
  box-shadow:0 0 10px rgba(101, 232, 225,.3);
}

/* The guide is intentionally a single clean container per category.
   Every action below is its own card, with generous separation. */
.button-info-section{
  position:relative;
  margin-top:28px;
  padding:24px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:7px;
  background:
    linear-gradient(145deg,rgba(28,16,27,.82),rgba(9,8,12,.94));
  box-shadow:0 24px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.025);
  overflow:hidden;
}
.button-info-section:first-of-type{margin-top:10px;}
.button-info-section:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg,var(--pink),var(--orange),transparent);
  box-shadow:0 0 22px rgba(101, 232, 225,.28);
}
.button-info-section:after{
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  right:-180px;
  top:-190px;
  border-radius:50%;
  background:rgba(101, 232, 225,.065);
  filter:blur(38px);
  pointer-events:none;
}

.button-info-heading{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "kicker label"
    "title label";
  align-items:end;
  gap:5px 22px;
  margin-bottom:20px;
  padding:0 2px 16px;
  border-bottom:1px solid rgba(255,255,255,.075);
}
.guide-kicker{
  grid-area:kicker;
  display:block;
  color:var(--pink);
  font-size:9px;
  font-weight:900;
  letter-spacing:2.7px;
  text-transform:uppercase;
}
.button-info-heading h3{
  grid-area:title;
  margin:0;
  color:#fff;
  font-size:20px;
  line-height:1.15;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.guide-side-label{
  grid-area:label;
  color:#75666d;
  font-size:8px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  align-self:center;
  white-space:nowrap;
}

.button-info-list{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.button-info-item{
  position:relative;
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  align-items:center;
  gap:16px;
  min-height:88px;
  box-sizing:border-box;
  padding:16px 18px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:6px;
  background:
    linear-gradient(105deg,rgba(255,255,255,.042),rgba(255,255,255,.012) 65%),
    rgba(7,6,10,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
  transition:border-color .22s ease,background .22s ease,transform .22s ease,box-shadow .22s ease;
}
.button-info-item:before{
  content:"";
  position:absolute;
  left:-1px;
  top:12px;
  bottom:12px;
  width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,rgba(101, 232, 225,.8),rgba(101, 232, 225,0));
  opacity:.3;
  transition:opacity .22s ease,box-shadow .22s ease;
}
.button-info-item:hover{
  transform:translateY(-1px);
  border-color:rgba(101, 232, 225,.30);
  background:
    linear-gradient(105deg,rgba(101, 232, 225,.075),rgba(255,255,255,.014) 68%),
    rgba(7,6,10,.45);
  box-shadow:0 14px 34px rgba(0,0,0,.24), inset 2px 0 var(--pink);
}
.button-info-item:hover:before{opacity:1;box-shadow:0 0 14px rgba(101, 232, 225,.35);}

.button-info-index{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  color:var(--pink);
  border:1px solid rgba(101, 232, 225,.25);
  background:linear-gradient(145deg,rgba(101, 232, 225,.09),rgba(101, 232, 225,.025));
  border-radius:5px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.6px;
  box-shadow:inset 0 0 15px rgba(101, 232, 225,.025);
}

.button-info-copy{
  min-width:0;
  position:relative;
}
.button-info-icon {
    display: inline-grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-right: 8px;
    vertical-align: -7px;
    color: var(--cyan);
    border: 1px solid rgba(101, 232, 225, .22);
    border-radius: 4px;
    background: rgba(101, 232, 225, .045);
    font-size: 24px;
    line-height: 1;
    box-shadow: 0 0 12px rgba(101, 232, 225, .035);
}
.button-info-copy h4{
  display:inline-block;
  margin:0 0 6px;
  color:#fff;
  font-size:18px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
}
.button-info-copy p{
  margin:0;
  color:#a9979e;
  font-size:16px;
  line-height:1.7;
  max-width:980px;
}
.button-info-copy p strong{color:#fff;}

/* Image-enabled actions keep the card structure, but get a visual preview. */
.button-info-item-media{
  grid-template-columns:44px minmax(0,1fr) 190px;
  min-height:118px;
}
.button-info-item-media .guide-image-trigger{
  position:relative;
  height:84px;
  overflow:hidden;
  border:1px solid rgba(101, 232, 225,.20);
  border-radius:5px;
  background:#060508;
  cursor:zoom-in;
  outline:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.button-info-item-media .guide-image-trigger:before{
  content:"CLICK TO OPEN";
  position:absolute;
  left:8px;
  bottom:7px;
  z-index:2;
  padding:4px 6px;
  color:#fff;
  background:rgba(5,5,8,.76);
  border:1px solid rgba(255,255,255,.10);
  border-radius:3px;
  font-size:7px;
  font-weight:900;
  letter-spacing:1.5px;
  opacity:0;
  transform:translateY(3px);
  transition:opacity .2s ease,transform .2s ease;
}
.button-info-item-media .guide-image-trigger:hover,
.button-info-item-media .guide-image-trigger:focus-visible{
  border-color:rgba(101, 232, 225,.62);
  box-shadow:0 0 25px rgba(101, 232, 225,.13);
  transform:translateY(-1px);
}
.button-info-item-media .guide-image-trigger:hover:before,
.button-info-item-media .guide-image-trigger:focus-visible:before{
  opacity:1;
  transform:translateY(0);
}
.button-info-item-media .guide-image-trigger:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.09),transparent 65%);
  transform:translateX(-100%);
  transition:1s;
}
.button-info-item-media .guide-image-trigger:hover:after{transform:translateX(100%);}
.button-info-item-media .guide-image-trigger img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.button-info-item-media .guide-image-trigger:hover img{transform:scale(1.04);}

.modal-guide-image{
  display:block;
  width:auto;
  max-width:100%;
  max-height:68vh;
  margin:0 auto;
  object-fit:contain;
  border:1px solid rgba(101, 232, 225,.38);
  border-radius:4px;
  box-shadow:0 0 35px rgba(101, 232, 225,.12);
}

@media (max-width:900px){
  .button-info-section{padding:18px;}
  .button-info-item-media{grid-template-columns:42px minmax(0,1fr) 150px;}
  .button-info-item-media .guide-image-trigger{height:78px;}
}

@media (max-width:760px){
  .button-info-section{padding:16px; margin-top:20px;}
  .button-info-heading{grid-template-columns:1fr; grid-template-areas:"kicker" "title" "label"; gap:5px;}
  .guide-side-label{justify-self:start; margin-top:3px;}
  .button-info-item{grid-template-columns:38px minmax(0,1fr); gap:12px; min-height:82px; padding:14px;}
  .button-info-index{width:32px;height:32px;}
  .button-info-item-media{grid-template-columns:38px minmax(0,1fr);}
  .button-info-item-media .guide-image-trigger{grid-column:1 / -1; height:150px; margin-top:2px;}
}

@media (max-width:480px){
  .button-info-section{padding:13px;}
  .button-info-heading h3{font-size:17px;}
  .button-info-list{gap:10px;}
  .button-info-item{padding:13px 12px;}
  .button-info-copy p{font-size:10.5px;}
}

/* =========================================================
   VERSCHIEBEN FEATURE
   ========================================================= */

.sanction-feature{
  margin-top:28px;
}

.move-card{
  position:relative;
  overflow:hidden;
  padding:24px;
}

.move-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:var(--orange);
  box-shadow:0 0 18px rgba(255,154,61,.45);
}

.move-content{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,380px);
  gap:28px;
  align-items:center;
}

.move-copy{
  min-width:0;
}

.move-copy h3{
  font-size:24px;
  letter-spacing:.5px;
}

.move-hint{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:18px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:var(--muted);
}

.move-hint span:first-child{
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
    border: 1px solid #4cffd270;
    border-radius: 6px;
    color: #00f5c8;
    font-weight: 900;
}


/* Anklickbare GIF-Vorschau */

.move-preview{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:1px solid rgba(255,154,61,.28);
  border-radius:14px;
  overflow:hidden;
  background:#08080d;
  cursor:pointer;
  appearance:none;
  text-align:left;

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.move-preview img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 10;
  object-fit:cover;

  transition:transform .35s ease;
}

.move-preview-overlay{
  position:absolute;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:7px;

  background:rgba(5,5,10,.58);

  opacity:0;

  transition:opacity .25s ease;

  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:1.5px;
}

.move-preview-overlay span{
  display:grid;
  place-items:center;

  width:42px;
  height:42px;

  border:1px solid var(--orange);
  border-radius:50%;

  color:var(--orange);
  font-size:20px;

  box-shadow:0 0 18px rgba(255,154,61,.3);
}

.move-preview:hover{
  transform:translateY(-3px);
  border-color:var(--orange);

  box-shadow:
    0 10px 30px rgba(0,0,0,.3),
    0 0 24px rgba(255,154,61,.12);
}

.move-preview:hover img{
  transform:scale(1.045);
}

.move-preview:hover .move-preview-overlay{
  opacity:1;
}

.move-preview:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
}


/* Mobile */

@media (max-width:760px){

  .move-content{
    grid-template-columns:1fr;
    gap:20px;
  }

}

/* === INTERFACE INFO PANELS === */
.interface-with-info {
  grid-template-columns: minmax(260px, 330px) minmax(0, 1fr) !important;
  align-items: start;
  gap: 18px;
}

.interface-info {
  position: sticky;
  top: 18px;
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid rgba(0,255,204,.22);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(0,255,204,.045), rgba(8,12,18,.92)),
    rgba(10,14,20,.94);
  box-shadow: 0 0 24px rgba(0,255,204,.06), inset 0 1px 0 rgba(255,255,255,.025);
  color: #e0e0e0;
  font-size: .82rem;
  line-height: 1.45;
}

.interface-info-title {
  color: var(--cyan, #00ffcc);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,255,204,.55);
}

.info-item {
  margin-bottom: 14px;
}

.info-item > span {
  color: var(--cyan, #00ffcc);
  margin-right: 3px;
}

.info-item em {
  color: #4ade80;
  font-style: normal;
}

.info-item .gold,
.info-hours .gold {
  color: #ffd700;
}

.info-item ul,
.bonus-box ul {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.info-item li {
  color: #a3a3a3;
  font-size: .78rem;
  margin: 2px 0;
}

.bonus-box,
.warning-box,
.hint-box {
  border-radius: 8px;
  padding: 11px;
  margin-bottom: 13px;
}

.bonus-box {
  border-left: 3px solid var(--cyan, #00ffcc);
  background: rgba(0,255,204,.045);
}

.bonus-box strong {
  color: var(--cyan, #00ffcc);
}

.bonus-box li {
  color: #e0e0e0;
  font-size: .77rem;
  margin: 3px 0;
}

.warning-box {
  border: 1px solid rgba(255,77,77,.4);
  background: rgba(255,77,77,.045);
}

.warning-box strong {
  display: block;
  color: #ff4d4d;
  margin-bottom: 5px;
}

.warning-box span {
  color: #ffccd5;
  font-size: .76rem;
  line-height: 1.35;
}

.hint-box {
  border: 1px solid rgba(0,255,204,.35);
  background: rgba(0,255,204,.045);
  text-align: center;
  color: var(--cyan, #00ffcc);
  font-size: .76rem;
  font-weight: 700;
  margin-bottom: 0;
}

@media (max-width: 980px) {
  .interface-with-info {
    grid-template-columns: 1fr !important;
  }

  .interface-info {
    position: relative;
    top: auto;
  }
}
/* =========================================================
   PROFILPFLEGE
   ========================================================= */

.profile-intro{
  margin-bottom:15px;
  padding:24px;
  border-color:rgba(101, 232, 225,.18);
}

.profile-intro h2{
  margin:8px 0 10px;
  font-size:24px;
  letter-spacing:.3px;
}

.profile-intro p{
  max-width:900px;
  margin:7px 0 0;
  color:#b9a7ad;
  font-size:16px;
  line-height:1.7;
}

.profile-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.78fr) minmax(0,1fr);
  gap:15px;
  align-items:start;
}

.profile-card{
  min-width:0;
  padding:20px;
}

.profile-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.profile-card-head h3{
  margin:6px 0 0;
  font-size:17px;
  letter-spacing:.4px;
}

.profile-status{
  flex:none;
  padding:5px 7px;
  border:1px solid rgb(255 43 43 / 35%);
  color:#ff2b2b;
  background:rgba(101, 232, 225,.06);
  border-radius:3px;
  font-size:8px;
  font-weight:900;
  letter-spacing:1.3px;
}

.profile-status.cyan{
  color:var(--cyan);
  border-color:rgba(101,232,225,.3);
  background:rgba(101,232,225,.05);
}

.profile-status.empty{
  color:#8f8087;
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.025);
}

.profile-section-title{
  margin:17px 0 5px;
  color:var(--cyan);
  font-size:8px;
  font-weight:900;
  letter-spacing:1.8px;
  text-transform:uppercase;
}

.profile-row{
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.055);
  font-size:11px;
}

.profile-row span{color:#96868d;}
.profile-row strong{
  color:#fff7f5;
  font-weight:700;
  text-align:right;
}

.profile-row strong:empty::after{content:'—';}

.profile-check{
  display:flex;
  align-items:center;
  gap:9px;
  margin:9px 0 2px;
  padding:10px;
  border:1px solid rgba(101,232,225,.16);
  border-radius:4px;
  background:rgba(101,232,225,.035);
  color:#c8d3d1;
  font-size:10px;
}

.profile-check input{
  appearance:none;
  width:15px;
  height:15px;
  margin:0;
  border:1px solid rgba(255,255,255,.25);
  border-radius:3px;
  background:#0b0a0e;
  cursor:pointer;
}

.profile-check input:checked{
	border-color: var(--cyan);
    background: #53e0f7c7;
    box-shadow: 0 0 12px rgb(101 232 225 / 94%);
}

.profile-check input:checked + span + i{opacity:1;}
.profile-check i{
  margin-left:auto;
  color:#0a1110;
  opacity:0;
  font-size:10px;
  font-style:normal;
  font-weight:900;
}

.profile-spacer{height:15px;}

.profile-chat{
  padding:17px 0 8px;
}

.profile-bubble{
  width:88%;
  margin:0 0 10px;
  padding:11px 12px;
  border-radius:5px;
  font-size:11px;
  line-height:1.5;
}

.profile-bubble small{
  display:block;
  margin-bottom:3px;
  font-size:7px;
  font-weight:900;
  letter-spacing:1.5px;
}

.profile-bubble.mod{
  margin-left:auto;
  color:#fff;
	background: rgb(231 101 232 / 6%);
	border: 1px solid rgb(247 109 232 / 37%);
  text-align:right;
}

.profile-bubble.mod small{
    color: #f500d5;
}

.profile-bubble.kunde{
  color:#e7eeee;
  border:1px solid rgba(101,232,225,.18);
  background:rgba(101,232,225,.045);
}

.profile-bubble.kunde small{color:var(--cyan);}

.profile-chat-note{
  margin-top:8px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.07);
  color:#82737a;
  font-size:9px;
  line-height:1.55;
}

.profile-chat-note span{color:var(--cyan); margin-right:5px;}

@media(max-width:1100px){
  .profile-grid{grid-template-columns:1fr 1fr;}
  .profile-chat-card{grid-column:1 / -1;}
}

@media(max-width:760px){
  .profile-grid{grid-template-columns:1fr;}
  .profile-chat-card{grid-column:auto;}
}
/* =========================================================
   PROFILFARBEN & HINWEIS-BOXEN
   ========================================================= */

.profile-status-section{
  margin:24px 0 18px;
  padding:16px;
  border:1px solid rgba(148,163,184,.15);
  border-radius:10px;
  background:rgba(255,255,255,.025);
}

.profile-status-title{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:13px;
  color:#cbd5e1;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
}

.status-title-icon{
  color:#94a3b8;
  font-size:.65rem;
}

.profile-status-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.profile-status-card{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:54px;
  padding:10px 13px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;
  background:rgba(255,255,255,.025);
  transition:transform .2s ease,background .2s ease;
}

.profile-status-card:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.045);
}

.profile-status-card .status-dot{
  flex:0 0 10px;
  width:10px;
  height:10px;
  border-radius:50%;
  box-shadow:0 0 10px currentColor;
}

.profile-status-card strong{
  display:block;
  font-size:.82rem;
}

.profile-status-card small{
  display:block;
  margin-top:2px;
  color:#94a3b8;
  font-size:.7rem;
}

/* STATUS-FARBEN */
.profile-status-card.boost{
  border-color:rgba(255,0,0,.22);
}

.profile-status-card.boost .status-dot{
  background:#ff0000;
  color:#ff0000;
}

.profile-status-card.boost strong{
  color:#ff3333;
}

.profile-status-card.paid{
  border-color:rgba(255,255,38,.22);
}

.profile-status-card.paid .status-dot{
  background:#ffff26;
  color:#ffff26;
}

.profile-status-card.paid strong{
  color:#ffff26;
}

.profile-status-card.new{
  border-color:rgba(0,217,0,.22);
}

.profile-status-card.new .status-dot{
  background:#00d900;
  color:#00d900;
}

.profile-status-card.new strong{
  color:#00e600;
}

.profile-status-card.inactive{
  border-color:rgba(150,150,150,.18);
}

.profile-status-card.inactive .status-dot{
  background:#666;
  color:#888;
}

.profile-status-card.inactive strong{
  color:#aaa;
}

/* HINWEIS-BOXEN */
.profile-callout{
  display:flex;
  align-items:flex-start;
  gap:13px;
  margin-top:12px;
  padding:14px 16px;
  border-radius:9px;
  background:rgba(255,255,255,.025);
}

.profile-callout .callout-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 28px;
  width:28px;
  height:28px;
  border-radius:7px;
  font-size:.9rem;
  font-weight:800;
}

.profile-callout .callout-content{
  flex:1;
}

.profile-callout strong{
  display:block;
  margin-bottom:4px;
  font-size:.84rem;
}

.profile-callout p{
  margin:0;
  font-size:.8rem;
  line-height:1.55;
}

/* WARNUNG */
.profile-callout.warning{
  border:1px solid rgba(239,68,68,.22);
  border-left:3px solid #ef4444;
  background:rgba(239,68,68,.055);
}

.profile-callout.warning .callout-icon{
  color:#f87171;
  background:rgba(239,68,68,.12);
}

.profile-callout.warning strong{
  color:#f87171;
}

.profile-callout.warning p{
  color:#fca5a5;
}

/* WICHTIG */
.profile-callout.success{
  border:1px solid rgba(34,197,94,.22);
  border-left:3px solid #22c55e;
  background:rgba(34,197,94,.055);
}

.profile-callout.success .callout-icon{
  color:#4ade80;
  background:rgba(34,197,94,.12);
}

.profile-callout.success strong{
  color:#4ade80;
}

.profile-callout.success p{
  color:#86efac;
}

/* MOBILE */
@media(max-width:650px){
  .profile-status-grid{
    grid-template-columns:1fr;
  }

  .profile-callout{
    padding:12px;
  }
}
/* ========================================================= DOPPELTE UHR ========================================================= */ .clocks { display: flex; align-items: stretch; gap: 10px; flex-shrink: 0; } .clock { min-width: 125px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(255,255,255,.025); text-align: center; } .clock b { display: block; font-size: 1.05rem; letter-spacing: 1px; line-height: 1.2; } .clock span { display: block; margin-top: 4px; color: #94a3b8; font-size: .62rem; font-weight: 700; letter-spacing: 1px; white-space: nowrap; } /* Mobile */ @media (max-width: 700px) { .clocks { width: 100%; } .clock { flex: 1; min-width: 0; } }


/* =========================================================
   HOME
   ========================================================= */

.home-intro {
  margin-bottom: 26px;
}

.home-info-card h2 {
  margin: 10px 0 12px;
}

.home-info-card p {
  max-width: 900px;
  margin: 0 0 12px;
  color: #94a3b8;
  line-height: 1.7;
}

.home-info-card p:last-child {
  margin-bottom: 0;
}

.home-info-card.important {
  border-color: rgba(239, 68, 68, .18);
}

.home-info-card.important .label {
  color: #f87171;
}

.home-success {
  margin-top: 18px !important;
  padding: 11px 13px;
  border-left: 3px solid #22c55e;
  border-radius: 6px;
  background: rgba(34, 197, 94, .055);
  color: #86efac !important;
}


/* =========================================================
   CORE MODULES
   ========================================================= */

.core-modules {
  align-items: stretch;
}

.module-navigation {
  min-height: 100%;
}

.module-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}

.module-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px;
  background: rgba(255,255,255,.025);
  color: #cbd5e1;
  cursor: pointer;
  text-align: left;
  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.module-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(34,211,238,.3);
  background: rgba(34,211,238,.055);
}

.module-btn span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  border-radius: 5px;
  background: rgba(34,211,238,.08);
  color: #67e8f9;
  font-size: .65rem;
  font-weight: 700;
}

.module-btn strong {
  font-size: .78rem;
}


/* =========================================================
   ASA DES TAGES
   ========================================================= */

.asa-card {
  display: flex;
  flex-direction: column;
}

.asa-display {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  margin: 18px 0;
  padding: 24px;
  border: 1px solid rgba(236,72,153,.16);
  border-radius: 9px;
  background: rgba(236,72,153,.035);
}

.asa-number {
  margin-bottom: 12px;
  color: #f472b6;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.asa-text {
  color: #e2e8f0;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.5;
}

.asa-random-btn {
  width: 100%;
  padding: 11px 15px;
  border: 1px solid rgba(236,72,153,.25);
  border-radius: 7px;
  background: rgba(236,72,153,.07);
  color: #f9a8d4;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
  transition:
    background .2s ease,
    border-color .2s ease;
}

.asa-random-btn:hover {
  border-color: rgba(236,72,153,.45);
  background: rgba(236,72,153,.12);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .module-buttons {
    grid-template-columns: 1fr;
  }

  .asa-display {
    min-height: 130px;
  }

}

/* Ergänzung für Guide-Bild-Trigger und Hover-Effekte */
.guide-image-trigger {
  cursor: zoom-in;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.guide-image-trigger:hover {
  transform: scale(1.02);
  border-color: var(--pink) !important;
  box-shadow: 0 0 20px rgba(101, 232, 225, 0.3);
}

.modal-guide-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
}
/* =========================================================
   VANTEDGE//WIKI — HACKER CORE OVERRIDE
   ========================================================= */
:root{--bg:#030609;--bg2:#061014;--surface:rgba(5,14,18,.86);--surface2:rgba(7,20,25,.78);--pink:#00f5c8;--hotpink:#35ffe0;--coral:#00b7ff;--orange:#39ff88;--yellow:#d7ff55;--cyan:#55e7ff;--text:#e9fff9;--muted:#8fb5b0;--dim:#496965;--line:rgba(90,255,230,.13);--line-pink:rgba(0,245,200,.28);--danger:#ff4d6d;--shadow:0 24px 90px rgba(0,0,0,.72);--pink-glow:0 0 35px rgba(0,245,200,.22)}
html,body{background:radial-gradient(circle at 82% 8%,rgba(0,245,200,.08),transparent 24%),radial-gradient(circle at 12% 90%,rgba(0,183,255,.07),transparent 28%),linear-gradient(135deg,#020406 0%,#031015 52%,#020507 100%)}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body::before{z-index:9999;opacity:.42;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 4px),linear-gradient(rgba(0,245,200,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(0,245,200,.018) 1px,transparent 1px);background-size:auto,36px 36px,36px 36px;mix-blend-mode:screen}
body::after{background:radial-gradient(ellipse at 50% 100%,rgba(0,245,200,.12),rgba(0,183,255,.055) 30%,transparent 68%);filter:blur(42px)}
body>.app::before{
	content:"";
	position:fixed;
	inset:0;
	pointer-events:none;
	z-index:9998;

	background:
		linear-gradient(
			180deg,
			transparent 0%,
			rgba(0,245,200,.035) 49%,
			transparent 51%
		);

	background-size:100% 1280px;
	background-repeat:repeat-y;

	animation:hackerScan 12s linear infinite;
	will-change:background-position;
}

@keyframes hackerScan{
	0%{
		background-position:0 0;
	}
	100%{
		background-position:0 1280px;
	}
}
.sidebar{border-right:1px solid rgba(0,245,200,.14);background:linear-gradient(180deg,rgba(2,10,13,.98),rgba(1,6,9,.96));box-shadow:18px 0 60px rgba(0,0,0,.38)}
.sidebar:after{background:linear-gradient(180deg,transparent,var(--pink),var(--coral),transparent);box-shadow:0 0 24px var(--pink);animation:sidePulse 3s ease-in-out infinite}
@keyframes sidePulse{0%,100%{opacity:.45}50%{opacity:1}}
.logo{border-color:rgba(0,245,200,.38);background:linear-gradient(145deg,#06221e,#020708);box-shadow:inset 0 0 25px rgba(0,245,200,.1),0 8px 30px rgba(0,0,0,.75),0 0 18px rgba(0,245,200,.1);color:var(--pink)}
.brand strong{color:#eafffa;text-shadow:0 0 14px rgba(0,245,200,.18)}.brand span,.side-status{color:#527773}.nav-title{color:#42635f}
.nav button{color:#71918d;border-radius:3px}.nav button:before{background:var(--pink)}
.nav button:hover,.nav button.active{color:#eafffa;background:linear-gradient(90deg,rgba(0,245,200,.11),rgba(0,183,255,.035),transparent);border-color:rgba(0,245,200,.18);transform:translateX(5px)}
.nav button.active{box-shadow:inset 3px 0 var(--pink),0 8px 30px rgba(0,245,200,.07)}.nav .ico{color:var(--pink);text-shadow:0 0 14px rgba(0,245,200,.7)}.nav .pink{color:#ff4d6d}
.side-status{border-color:rgba(0,245,200,.11);background:rgba(0,245,200,.018)}.dot{background:#39ff88;box-shadow:0 0 12px #39ff88}
.topbar{border-bottom-color:rgba(0,245,200,.12)}.topbar:after{width:62%;height:1px;background:linear-gradient(90deg,var(--pink),var(--coral),transparent);box-shadow:0 0 22px rgba(0,245,200,.6)}
.eyebrow{color:var(--pink);text-shadow:0 0 14px rgba(0,245,200,.35)}
h1{text-shadow:0 4px 0 rgba(0,0,0,.6),0 18px 50px rgba(0,0,0,.5),0 0 28px rgba(0,245,200,.08)}h1 em{color:var(--pink)!important;text-shadow:2px 2px 0 #000,0 0 25px rgba(0,245,200,.7)!important}.topbar .sub{color:#789792}
.clock{border-color:rgba(0,245,200,.16);background:rgba(0,245,200,.025);box-shadow:inset 0 1px rgba(255,255,255,.035)}.clock b{color:var(--pink);text-shadow:0 0 14px rgba(0,245,200,.5)}.clock span{color:#4c6b67}
.page{animation:cyberPageIn .55s cubic-bezier(.2,.8,.2,1) both}@keyframes cyberPageIn{0%{opacity:0;transform:translateY(12px);filter:blur(5px)}65%{opacity:1;filter:blur(0)}100%{transform:none}}
.section-head{border-bottom-color:rgba(0,245,200,.09)}.section-head h2{text-shadow:0 0 16px rgba(0,245,200,.15)}.section-head span,.label{color:#52736e}
.card{border-color:rgba(0,245,200,.11);border-radius:5px;background:linear-gradient(145deg,rgba(7,22,25,.9),rgba(2,9,12,.93));box-shadow:var(--shadow)}.card:before{background:linear-gradient(90deg,transparent,rgba(0,245,200,.55),transparent)}.card:after{background:rgba(0,245,200,.07)}.card:hover{transform:translateY(-5px);border-color:rgba(0,245,200,.32);box-shadow:0 25px 80px rgba(0,0,0,.65),0 0 38px rgba(0,245,200,.09)}.card:hover:after{background:rgba(0,183,255,.1)}.sub{color:#8aa8a4}
.filter-btn,.variant-btn{border-color:rgba(0,245,200,.13);background:rgba(0,245,200,.02)}.filter-btn:hover,.variant-btn:hover{border-color:rgba(0,245,200,.4);box-shadow:0 0 18px rgba(0,245,200,.08)}.filter-btn.btn-fine:hover,.filter-btn.btn-fine.active{color:var(--pink);border-color:var(--pink);background:rgba(0,245,200,.08);box-shadow:var(--pink-glow)}
.module-btn{border-color:rgba(0,245,200,.1);background:rgba(0,245,200,.018)}.module-btn:hover{border-color:rgba(0,245,200,.38);background:rgba(0,245,200,.06);box-shadow:0 0 24px rgba(0,245,200,.07)}.module-btn span{background:rgba(0,245,200,.08);color:var(--pink)}
.metric.cyan,.efficiency-intro h3{color:var(--cyan)}.metric.pink,.tip .num{color:var(--pink)!important}.metric.blue{color:var(--coral)}.tip .num{text-shadow:2px 2px 0 rgba(0,183,255,.28),0 0 22px rgba(0,245,200,.25)}
.dialog-nav button{border-color:rgba(0,245,200,.1);background:rgba(0,245,200,.018)}.dialog-nav button:hover,.dialog-nav button.active{border-color:var(--pink);background:linear-gradient(90deg,rgba(0,245,200,.11),transparent);box-shadow:inset 3px 0 var(--pink),0 0 22px rgba(0,245,200,.08)}

.image-container{
	border-color:rgba(0,245,200,.15);
	box-shadow:
		0 30px 90px rgba(0,0,0,.75),
		0 0 42px rgba(0,245,200,.055);
}

.image-container:after{
	background:linear-gradient(
		120deg,
		transparent 40%,
		rgba(0,245,200,.1),
		transparent 60%
	);
}

/* Sweep nur beim Hover */
.image-container:hover:after{
	animation:interfaceSweep .8s ease-out;
}

@keyframes interfaceSweep{
	0%{
		transform:translateX(-110%);
	}
	100%{
		transform:translateX(110%);
	}
}
.hotspot{border-color:rgba(0,245,200,.65);background:rgba(0,245,200,.055)}.hotspot:hover{background:rgba(0,245,200,.18);border-color:#fff;box-shadow:0 0 24px rgba(0,245,200,.5),inset 0 0 20px rgba(0,245,200,.08)}
.button-info-section{border-color:rgba(0,245,200,.11);background:linear-gradient(145deg,rgba(7,22,25,.88),rgba(2,8,11,.95))}.button-info-section:before{background:linear-gradient(180deg,var(--pink),var(--coral),transparent);box-shadow:0 0 22px rgba(0,245,200,.3)}.button-info-section:after{background:rgba(0,245,200,.055)}.guide-kicker{color:var(--pink)}.button-info-item{border-color:rgba(0,245,200,.09);background:linear-gradient(105deg,rgba(0,245,200,.032),rgba(255,255,255,.008) 68%),rgba(1,7,9,.4)}.button-info-item:hover{border-color:rgba(0,245,200,.3);background:linear-gradient(105deg,rgba(0,245,200,.075),rgba(255,255,255,.01) 68%),rgba(1,7,9,.48);box-shadow:0 14px 34px rgba(0,0,0,.28),inset 2px 0 var(--pink)}
.modal{background:rgba(0,5,7,.9);backdrop-filter:blur(18px) saturate(1.2)}.modal-box{border-color:rgba(0,245,200,.42);background:linear-gradient(145deg,rgba(5,22,24,.98),rgba(1,7,10,.99));box-shadow:0 40px 120px rgba(0,0,0,.88),0 0 55px rgba(0,245,200,.1)}.modal-box:before{background:linear-gradient(90deg,var(--pink),var(--coral),transparent)}.modal-box .close:hover{background:var(--pink);color:#00100c;box-shadow:0 0 20px rgba(0,245,200,.4)}.modal-text{color:#9ab8b4}.modal-text img{border-color:rgba(0,245,200,.22)}.modal-text img:hover{border-color:var(--pink);box-shadow:0 0 30px rgba(0,245,200,.22)}
.queue-block{border-color:rgba(0,245,200,.13);background:rgba(0,245,200,.018)}.queue-block.asa{border-color:rgba(0,245,200,.35)}.queue-block.asa span{color:var(--pink)}.queue-warning{border-color:rgba(215,255,85,.2);background:rgba(215,255,85,.02)}
.mobile-toggle{background:linear-gradient(145deg,var(--pink),var(--coral));color:#00100d;box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 24px rgba(0,245,200,.25)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
.system-hud{position:fixed;right:18px;bottom:18px;z-index:500;display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid rgba(0,245,200,.16);border-radius:4px;background:rgba(1,8,10,.82);backdrop-filter:blur(12px);color:#6faaa2;font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1.2px;box-shadow:0 12px 35px rgba(0,0,0,.45),0 0 20px rgba(0,245,200,.04)}.system-hud .pulse{width:6px;height:6px;border-radius:50%;background:#39ff88;box-shadow:0 0 12px #39ff88;animation:hudPulse 1.5s ease-in-out infinite}@keyframes hudPulse{50%{opacity:.35;transform:scale(.75)}}

/* =========================================================
   PROFILPFLEGE — 20 / 60 / 20 LAYOUT
   ========================================================= */

.profile-grid{
  display:grid;
  grid-template-columns:minmax(190px, 20%) minmax(0, 60%) minmax(190px, 20%);
  gap:15px;
  align-items:stretch;
}

.profile-card{
  min-width:0;
}

/* Der Chat nutzt die größere mittlere Fläche */
.profile-chat-card{
  min-width:0;
}

/* Auf kleineren Bildschirmen wieder sinnvoll stapeln */
@media(max-width:1100px){
  .profile-grid{
    grid-template-columns:1fr 1fr;
  }

  .profile-chat-card{
    grid-column:1 / -1;
    order:2;
  }
}

@media(max-width:760px){
  .profile-grid{
    grid-template-columns:1fr;
  }

  .profile-chat-card{
    grid-column:auto;
    order:initial;
  }
}

/* =========================================================
   PROFILSTATUS — NEON STATUS PANELS
   ========================================================= */

.profile-status-section{
  position:relative;
  margin:26px 0 20px;
  padding:18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.012)
    );

  box-shadow:
    0 18px 45px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.025);

  overflow:hidden;
}

/* dezente Neon-Linie oben */
.profile-status-section::before{
  content:"";
  position:absolute;
  top:0;
  left:8%;
  right:8%;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--pink),
      var(--coral),
      var(--orange),
      transparent
    );

  box-shadow:
    0 0 18px rgba(101, 232, 225,.45);

  opacity:.7;
}

/* Hintergrund-Glow */
.profile-status-section::after{
  content:"";
  position:absolute;
  width:280px;
  height:180px;
  right:-120px;
  top:-120px;

  border-radius:50%;
  background:rgba(101, 232, 225,.07);
  filter:blur(45px);

  pointer-events:none;
}


/* ---------------------------------------------------------
   TITEL
   --------------------------------------------------------- */

.profile-status-title{
  position:relative;
  z-index:1;

  display:flex;
  align-items:center;
  gap:9px;

  margin-bottom:15px;

  color:#d7cbd0;
  font-size:9px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
}

.status-title-icon{
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: var(--pink);
    border: 1px solid #00ffcc5c;
    border-radius: 50%;
    background: #00ffcc2e;
    font-size: 7px;
    box-shadow: 0 0 14px #00ffcc80;
}


/* ---------------------------------------------------------
   STATUS GRID
   --------------------------------------------------------- */

.profile-status-grid{
  position:relative;
  z-index:1;

  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}


/* ---------------------------------------------------------
   STATUS CARD
   --------------------------------------------------------- */

.profile-status-card{
  position:relative;

  display:flex;
  align-items:center;
  gap:12px;

  min-height:68px;
  padding:12px 13px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.012)
    );

  overflow:hidden;

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}


/* kleine Statuslinie links */
.profile-status-card::before{
  content:"";

  position:absolute;
  left:0;
  top:10px;
  bottom:10px;

  width:2px;

  border-radius:2px;

  background:currentColor;

  opacity:.45;

  box-shadow:0 0 12px currentColor;

  transition:
    opacity .25s ease,
    box-shadow .25s ease;
}


/* diagonaler Lichtreflex */
.profile-status-card::after{
  content:"";

  position:absolute;
  top:-80%;
  left:-30%;

  width:35%;
  height:260%;


  pointer-events:none;
}


}


/* Hover */
.profile-status-card:hover{
  transform:translateY(-3px);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.018)
    );
}

.profile-status-card:hover::before{
  opacity:1;
  box-shadow:0 0 18px currentColor;
}


/* ---------------------------------------------------------
   STATUS DOT
   --------------------------------------------------------- */

.profile-status-card .status-dot{
  position:relative;
  z-index:1;

  flex:0 0 13px;

  width:13px;
  height:13px;

  border-radius:50%;

  box-shadow:
    0 0 7px currentColor,
    0 0 18px currentColor;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.profile-status-card:hover .status-dot{
  transform:scale(1.18);

  box-shadow:
    0 0 8px currentColor,
    0 0 22px currentColor;
}


/* ---------------------------------------------------------
   TEXT
   --------------------------------------------------------- */

.profile-status-card > div{
  position:relative;
  z-index:1;

  min-width:0;
}

.profile-status-card strong{
  display:block;

  font-size:11px;
  font-weight:900;
  letter-spacing:.8px;
  text-transform:uppercase;

  white-space:nowrap;
}

.profile-status-card small{
  display:block;

  margin-top:4px;

  color:#8e8187;
  font-size:8px;
  font-weight:700;
  letter-spacing:.4px;

  white-space:nowrap;
}


/* =========================================================
   STATUS-FARBEN
   ========================================================= */

/* BOOST — ROT */

.profile-status-card.boost{
  color:#ff3333;
  border-color:rgba(255,40,40,.24);

  background:
    linear-gradient(
      145deg,
      rgba(255,40,40,.075),
      rgba(255,40,40,.015)
    );
}

.profile-status-card.boost strong{
  color:#ff4b4b;
}

.profile-status-card.boost .status-dot{
  background:#ff3030;
}


/* EINGEZAHLT — GELB */

.profile-status-card.paid{
  color:#ffff26;
  border-color:rgba(255,255,38,.24);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,38,.065),
      rgba(255,255,38,.012)
    );
}

.profile-status-card.paid strong{
  color:#ffff4d;
}

.profile-status-card.paid .status-dot{
  background:#ffff26;
}


/* NEUKUNDE — GRÜN */

.profile-status-card.new{
  color:#00e600;
  border-color:rgba(0,230,0,.24);

  background:
    linear-gradient(
      145deg,
      rgba(0,230,0,.065),
      rgba(0,230,0,.012)
    );
}

.profile-status-card.new strong{
  color:#22ef22;
}

.profile-status-card.new .status-dot{
  background:#00e600;
}


/* NICHT AUFGELADEN — GRAU */

.profile-status-card.inactive{
  color:#999;
  border-color:rgba(150,150,150,.20);

  background:
    linear-gradient(
      145deg,
      rgba(150,150,150,.045),
      rgba(150,150,150,.01)
    );
}

.profile-status-card.inactive strong{
  color:#b8b8b8;
}

.profile-status-card.inactive .status-dot{
  background:#777;
  box-shadow:0 0 7px #777;
}


/* ---------------------------------------------------------
   RESPONSIVE STATUS
   --------------------------------------------------------- */

@media(max-width:900px){
  .profile-status-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:650px){
  .profile-status-grid{
    grid-template-columns:1fr;
  }

  .profile-status-card{
    min-height:60px;
  }
}

p{
  font-size:16px;
}