/* Layout & Grid System */
.wrap{max-width:1400px; margin:0 auto; padding:12px 16px}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.grid{display:grid; gap:12px}
.two{grid-template-columns: 1fr 1fr}

/* Header & Navigation */
header{
  position:sticky; top:0; z-index:5;
  background: var(--header-bg); backdrop-filter: blur(6px);
  border-bottom:1px solid var(--border);
  padding: 12px 16px;
  min-height: 64px;
}

.headerbar{
  display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}

.header-title{margin:0}
.headerbar .controls{display:flex; gap:16px; align-items:center; margin-left:auto}
.control-group{display:flex; gap:4px; align-items:center}

/* Tab Bar & Navigation */
.tabbar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin:10px 0 16px;
}

.tabicons{display:flex; gap:8px; align-items:center}

.tabbtn{
  justify-content:flex-start;
  transition:all .15s ease;
}

.hoverlabel{
  justify-content:flex-start;
}

.tabbtn .label{
  max-width:0;
  overflow:hidden;
  white-space:nowrap;
  opacity:0;
  transition:all .15s ease;
}

.hoverlabel .label{
  max-width:0;
  overflow:hidden;
  white-space:nowrap;
  opacity:0;
  transition:all .15s ease;
}

.tabbtn:hover, .tabbtn:focus-visible{
  transform:scale(1.05);
}

/* nur aktiver Tab zeigt den Titel */
.tabbtn.active .label{
  max-width:180px;
  opacity:1;
}

.hoverlabel:hover .label, .hoverlabel:focus-visible .label{
  max-width:180px;
  opacity:1;
}

.tabbar .tabbtn{
  border:none;
  background:transparent;
  border-bottom:3px solid transparent;
  border-radius:0;
  padding:12px 16px;
  font-size:20px;
}

.tabbar .tabbtn .label{font-size:13px}

.tabbar .tabbtn.active{
  border-bottom-color:var(--brand);
  color:var(--brand);
  box-shadow:none;
}

.tabbtn.active{border-color:var(--brand); color:var(--brand); box-shadow:none}

/* Language Menu */
.langmenu{position:relative}
.langbtn{display:inline-flex; align-items:center; gap:6px}
.langdrop{
  position:absolute; right:0; top:40px; min-width:120px;
  background:var(--panel); border:1px solid var(--border);
  border-radius:10px; padding:6px; display:none; z-index:80;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.langdrop, .dropdown{animation:dropIn .2s ease-out}
.langdrop.open{display:block}
.langdrop button{
  width:100%; text-align:left; padding:8px 10px; border-radius:8px;
  border:1px solid transparent; background:transparent; color:var(--text); cursor:pointer;
}
.langdrop button:hover{border-color:var(--brand); background:rgba(34,211,238,.08)}

/* Bottom Navigation */
.bottom-nav{display:none}
body.gate-open .bottom-nav{display:none}
body.menus-hidden .langmenu{display:none}
body.menus-hidden #btnTheme{display:none}

/* Account Layout */
.account-header{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.account-fields{
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(260px,1fr);
  gap:16px;
  align-items:start;
}

.account-col{display:flex; flex-direction:column; gap:12px}
.account-row{display:flex; gap:10px; align-items:center; justify-content:space-between}
.account-row .btn{margin-left:auto}

/* Exam Header Layout */
.exam-header{
  display:grid;
  grid-template-columns:minmax(240px,1fr) auto;
  gap:12px;
  align-items:end;
}

.exam-right{
  display:grid;
  grid-auto-flow:column;
  gap:8px;
  align-items:end;
}

.exam-right .field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* Responsive Breakpoints */
@media (max-width: 900px){
  .account-fields{grid-template-columns:1fr}
  .account-row{flex-direction:column; align-items:stretch}
  .exam-header{grid-template-columns:1fr}
  .exam-right{grid-auto-flow:row; justify-items:stretch}
}

@media (max-width: 840px){
  .gate .accountGrid{grid-template-columns:1fr}
}

@media (max-width: 640px){
  .hoverlabel .label{
    max-width:180px;
    opacity:1;
  }
  .btn{padding:10px 12px; min-height:48px}
  .btn.iconbtn{width:44px; height:44px}
  .q-lang-btn{min-width:44px; min-height:44px; padding:8px 10px; font-size:12px}
  .wrap{padding:10px 12px}
  .tabicons{gap:4px; overflow-x:auto; padding:8px 4px 4px; -webkit-overflow-scrolling:touch; position:relative}
  .tabicons::after{
    content:'';
    position:sticky;
    right:0;
    top:0;
    height:100%;
    width:18px;
    pointer-events:none;
    background:linear-gradient(90deg, rgba(0,0,0,0), var(--bg));
  }
  .btn.iconbtn{width:44px; height:44px; font-size:14px}
  h1{font-size:18px}
  .gate .footerRow .row{justify-content:flex-start; flex-wrap:wrap}

  /* Mobile header adjustments */
  header{
    padding: 10px 12px;
    min-height: 56px;
  }

  .header-title{
    font-size: 16px;
  }

  .headerbar{
    gap: 8px;
  }

  /* Mobile main content padding */
  main{
    padding-bottom: 90px;
  }

  /* Prevent horizontal scroll */
  body{
    overflow-x: hidden;
  }
}