/* =========================================
   MATAWOW MAIN UI
   Patch 1: background + header + footer + shell
   Basis: bestehende Klassen, kein neues Header-System
   ========================================= */

:root{
  --mw-bg-1:#05070c;
  --mw-bg-2:#070a10;
  --mw-bg-3:#04060a;

  --mw-fg:#eaf0f8;
  --mw-muted:#b7c0cc;

  --mw-stroke:rgba(255,255,255,.12);
  --mw-stroke-soft:rgba(255,255,255,.08);

  --mw-header-bg:rgba(10,13,20,0.55);
  --mw-header-bg-strong:rgba(10,13,20,0.72);

  --mw-footer-fg:rgba(234,240,248,.92);
  --mw-footer-sub:rgba(234,240,248,.72);

  --mw-wrap:1320px;
}

/* ===== GLOBAL ===== */
html{
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  color:var(--mw-fg);
  font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  background:
    radial-gradient(1200px 600px at 50% -20%, rgba(58,160,255,.22), transparent 60%),
    radial-gradient(800px 500px at 15% 10%, rgba(109,94,247,.18), transparent 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(32,224,178,.12), transparent 60%),
    linear-gradient(180deg, var(--mw-bg-1) 0%, var(--mw-bg-2) 40%, var(--mw-bg-3) 100%);

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{
  color:inherit;
  text-decoration:none;
}

main{
  flex:1 0 auto;
}

.wrap{
  width:100%;
  max-width:var(--mw-wrap);
  margin:0 auto;
  padding:0 20px;
}

/* ===== SCROLLBAR ===== */
*::-webkit-scrollbar{
  width:10px;
  height:10px;
}
*::-webkit-scrollbar-track{
  background:transparent;
}
*::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14);
  border-radius:999px;
  border:3px solid transparent;
  background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.22);
  border:3px solid transparent;
  background-clip:content-box;
}

/* ===== HEADER ===== */
.header-blur{
  position:sticky;
  top:0;
  z-index:999;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: var(--mw-header-bg);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.25s ease, border-color 0.25s ease, padding 0.25s ease;
}

.header-blur.shrink{
  background: var(--mw-header-bg-strong);
  border-bottom-color: rgba(255,255,255,0.12);
  padding-block: 6px;
}

.hdr{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  min-height:64px;              /* stabiler Header */
  padding:14px 0;
  max-width:none;
  margin:0;
}

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

.brand-header,
.brand-main,
#mwHomeLink{
  font-family:Poppins, sans-serif;
  font-size:28px;
  font-weight:800;
  letter-spacing:-0.5px;
  color:#f0f4ff;
  text-transform:lowercase;
  white-space:nowrap;
  text-decoration:none !important;
}

#mwHomeLink{
  cursor:pointer;
  transition:opacity .15s ease, transform .15s ease;
}
#mwHomeLink:hover{
  opacity:.85;
}
#mwHomeLink:active{
  transform:translateY(1px);
}

.hdr-center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  color:#d2daf5;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:15px;
  white-space:nowrap;
  pointer-events:none;
  opacity:.88;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;

  min-width:420px;      /* mehr Platz für Logout + Profil + Verified + Admin */
  min-height:40px;

  flex-wrap:nowrap;
  white-space:nowrap;
}
.nav > *{
  flex:0 0 auto;
}

.nav-link,
.nav-button{
  white-space:nowrap;
}

.nav-link{
  color:#e8ecf7;
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  opacity:.85;
  transition:opacity .2s ease;
}
.nav-link:hover{
  opacity:1;
  text-decoration:underline;
}

.nav-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:7px 16px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  color:#f8faff;
  border:1px solid rgba(255,255,255,0.18);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  backdrop-filter:blur(6px);
  transition:background .2s, border-color .2s, transform .2s;
}

.nav-button:hover{
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.30);
}

.nav-button:active{
  transform:scale(0.97);
}

/* ===== PAGE HERO BASICS ===== */
.page-hero{
  margin:18px 0 12px;
  text-align:center;
}
.page-hero .page-title{
  margin:0;
  font-family:Poppins, sans-serif;
  font-size:28px;
  font-weight:800;
  letter-spacing:-0.04em;
  color:#f9fafb;
}
.page-hero .page-subtitle{
  margin:6px 0 0;
  font-size:.95rem;
  font-weight:600;
  color:#f9fafb;
  opacity:.92;
}

/* ===== FOOTER ===== */
.footer,
footer{
  background:transparent;
}

.footer{
  padding:0 0 22px;
}

.footer > .wrap{
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:22px;
  padding-left:20px;
  padding-right:20px;
}

.foot{
  width:100%;
  margin:0;
  padding:0;
  color:var(--mw-footer-fg);
}

.foot hr{
  border:none;
  border-top:1px solid rgba(255,255,255,.06);
  margin:14px 0 18px;
}

.foot-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:22px;
  flex-wrap:wrap;
}

.foot-brand{
  color:rgba(234,240,248,.96);
  font-size:15.5px;
  line-height:1.55;
}

.links{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  align-items:center;
}

.links a{
  color:rgba(234,240,248,.88);
  font-weight:600;
  text-decoration:none;
  opacity:.88;
}
.links a:hover{
  opacity:1;
  text-decoration:none;
}

.foot-copy{
  margin-top:8px;
  color:var(--mw-footer-sub);
  font-size:13px;
}

/* offer-footer variant */
.foot-left{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.foot-left-top{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}
.footer-brand{
  font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:26px;
  font-weight:800;
  letter-spacing:-0.4px;
  color:rgba(234,240,248,.96);
  text-decoration:none;
  line-height:1.05;
}
.foot-dash{
  opacity:.9;
  font-weight:600;
}
.foot-tagline{
  font-weight:600;
  opacity:.92;
}
.foot-sub{
  font-size:14px;
  opacity:.72;
  color:rgba(234,240,248,.72);
}
.foot-links{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  align-items:center;
}
.foot-links a{
  color:rgba(234,240,248,.88);
  font-weight:600;
  text-decoration:none;
  opacity:.88;
}
.foot-links a:hover{
  opacity:1;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px){
  .nav{
    min-width:unset;
  }
}

@media (max-width: 720px){
  .wrap{
    padding:0 14px;
  }

  .hdr{
    min-height:60px;
    padding:12px 0;
  }

  .hdr-center{
    display:none;
  }

  .brand-header,
  .brand-main,
  #mwHomeLink{
    font-size:24px;
  }

  .nav{
    min-width:auto;
    gap:10px;
  }

  .nav-link{
    font-size:13px;
  }

  .nav-button{
    min-height:34px;
    padding:6px 14px;
    font-size:13px;
  }

.footer > .wrap{
  padding-left:14px;
  padding-right:14px;
}
  .foot-top{
    gap:14px;
  }
}