/* =======================================
   xVineXus – Designsystem (Glass First)
   Farben: Weiß / Rot / Schwarz
   Fokus: Transparenz > Blur, sanfte Glows, Puls & Fades
   ======================================= */

:root{
  --bg:#0b0b0d;            /* Schwarzgrund */
  --bg-2:#141216;          /* Tiefe */
  --radial:#6a1f29;        /* dunkles Rot im Zentrum */
  --red:#e43f5a;           /* Primärrot */
  --red-2:#ff5b73;         /* Akzent */
  --text:#f5f7fb;          /* Weiß */
  --muted:#c9c9cf;         /* Sekundärtext */
  --glass:rgba(255,255,255,.06); /* Transparenz statt Blur */
  --border:rgba(255,255,255,.16);
  --shadow:0 8px 30px rgba(228,63,90,.25), 0 2px 8px rgba(0,0,0,.35);
  --radius:22px;
}

/* ===== Reset / Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  color:var(--text); background:var(--bg);
}

/* Hintergrund – sanftes Vignette mit rotem Kern */
.bg{
  background:
    radial-gradient(1200px 800px at 60% 50%, rgba(106,31,41,.35), transparent 60%),
    radial-gradient(900px 600px at 20% 10%, rgba(255,255,255,.06), transparent 50%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
}

.container{ width:min(1200px, 92vw); margin:0 auto; padding:clamp(16px, 2vw, 28px); }

/* ===== Header & Footer (full-bleed + inward curves) ===== */
.bar{ position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.bar-top{ padding:14px 20px; }
.bar-bottom{ padding:18px 20px; }

.bar::after{ /* zarte innere Rundung */
  content:""; position:absolute; inset:auto 0 0 0; height:20px; pointer-events:none;
  background:radial-gradient(120% 40px at 50% -10px, rgba(255,255,255,.18), rgba(255,255,255,0) 60%);
  filter:blur(12px); opacity:.6;
}
.bar-bottom::after{ inset:0 0 auto 0; background:radial-gradient(120% 40px at 50% 110%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%); }

.bar.bar-top{ background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); border-bottom-left-radius:var(--radius); border-bottom-right-radius:var(--radius); box-shadow:0 20px 40px rgba(0,0,0,.25) inset; }
.bar.bar-bottom{ background:linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,0)); border-top-left-radius:var(--radius); border-top-right-radius:var(--radius); box-shadow:0 -20px 40px rgba(0,0,0,.25) inset; }

.brand .brand-link{ color:var(--text); text-decoration:none; font-weight:800; letter-spacing:.2px; font-size:1.2rem; }
.brand .brand-link:hover{ text-shadow:0 0 20px rgba(255,255,255,.25); }

/* ===== Burger Menü (immer sichtbar) ===== */
.burger{ all:unset; cursor:pointer; width:44px; height:36px; display:grid; place-items:center; gap:4px; padding:4px 2px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid var(--border); box-shadow:var(--shadow); }
.burger span{ display:block; width:24px; height:2px; background:linear-gradient(90deg, var(--text), var(--red-2)); border-radius:10px; }

.menu-open .burger{ background:rgba(228,63,90,.15); }

.menu-panel{ position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(3px); display:grid; place-items:end; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.menu-open .menu-panel{ opacity:1; pointer-events:auto; }
.menu-inner{ width:min(420px, 92vw); height:100%; background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)); border-left:1px solid var(--border); box-shadow:-30px 0 60px rgba(0,0,0,.35); display:flex; flex-direction:column; padding:24px; gap:10px; transform:translateX(8%); animation:slideIn .35s ease forwards; border-top-left-radius:22px; border-bottom-left-radius:22px; }
@keyframes slideIn{ to{ transform:translateX(0);} }
.menu-item{ display:flex; align-items:center; justify-content:space-between; text-decoration:none; color:var(--text); padding:14px 16px; border-radius:16px; background:var(--glass); border:1px solid var(--border); box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .2s ease; }
.menu-item:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(228,63,90,.3); }
.menu-foot{ margin-top:auto; color:var(--muted); font-size:.9rem; opacity:.8; }

/* ===== Typo ===== */
.title{ font-size:clamp(1.6rem, 1.2rem + 2vw, 2.6rem); font-weight:800; margin:10px 0 6px; }
.subtitle{ color:var(--muted); margin:0 0 26px; }
.section{ padding:12px 0 40px; }

/* ===== Cards / Hero ===== */
.hero{ padding:12px 0 40px; }
.hero-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; }
.card{ position:relative; padding:20px; text-decoration:none; color:var(--text); border-radius:22px; border:1px solid var(--border); transition:transform .2s ease, box-shadow .25s ease; box-shadow:var(--shadow); }
.card:hover{ transform:translateY(-4px) scale(1.01); box-shadow:0 30px 60px rgba(228,63,90,.35); }
.card .icon{ font-size:30px; margin-bottom:8px; }
.card h3{ margin:2px 0 6px; font-size:1.15rem; }
.card p{ color:var(--muted); margin:0 0 14px; }

/* ===== Glass ===== */
.glass{ background:var(--glass); }
.float{ animation:floaty 6s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }

/* ===== Buttons ===== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:14px; border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); text-decoration:none; color:var(--text); font-weight:600; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 18px 42px rgba(228,63,90,.35); }
.btn:active{ transform:translateY(0) scale(.98); }

/* ===== Links ===== */
.link-list{ list-style:none; padding:0; margin:10px 0 0; display:grid; gap:14px; }
.link-item{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:16px; border-radius:18px; border:1px solid var(--border); box-shadow:var(--shadow); background:var(--glass); }
.link-item .icon{ font-size:22px; }
.link-item .info strong{ display:block; font-size:1rem; }
.link-item .info small{ color:var(--muted); }

/* ===== Downloads ===== */
.download-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:16px; }
.d-card{ padding:18px; border-radius:18px; border:1px solid var(--border); background:var(--glass); box-shadow:var(--shadow); }
.d-card h3{ margin:0 0 6px; }
.d-card p{ color:var(--muted); margin:0 0 12px; }

/* ===== Formular ===== */
.form{ padding:18px; border-radius:20px; background:var(--glass); border:1px solid var(--border); box-shadow:var(--shadow); }
.form .row{ display:flex; flex-direction:column; gap:6px; margin:12px 0; }
.form label{ font-weight:600; }
.form input,.form textarea{ width:100%; padding:12px 14px; border-radius:14px; border:1px solid var(--border); background:rgba(0,0,0,.25); color:var(--text); outline:none; transition:border .15s ease, box-shadow .2s ease; }
.form input:focus,.form textarea:focus{ border-color:rgba(228,63,90,.55); box-shadow:0 0 0 3px rgba(228,63,90,.25), 0 18px 42px rgba(228,63,90,.3); }
.hint{ color:var(--muted); margin-top:10px; }

/* ===== Minecraft ===== */
.mc{ padding:18px; border-radius:20px; border:1px solid var(--border); background:var(--glass); box-shadow:var(--shadow); }
.mc-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px dashed rgba(255,255,255,.12); }
.mc-row:last-child{ border-bottom:none; }
.mc-ip{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; letter-spacing:.3px; padding:10px 14px; border-radius:12px; background:rgba(0,0,0,.25); border:1px solid var(--border); }

/* ===== Animationen (Fades, Glows, Pulse) ===== */
.fade-in{ animation:fadeUp .6s ease both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
.glow{ text-shadow:0 0 18px rgba(255,255,255,.22), 0 0 40px rgba(228,63,90,.25); }
.pulse{ animation:pulseGlow 2.2s ease-in-out infinite; }
@keyframes pulseGlow{ 0%,100%{ box-shadow:var(--shadow);} 50%{ box-shadow:0 22px 56px rgba(228,63,90,.45); } }

/* ===== Footer ===== */
.foot-inner{ width:min(1200px, 92vw); margin:0 auto; text-align:center; color:var(--muted); }

/* ===== Toast ===== */
.toast{ position:fixed; left:50%; bottom:26px; transform:translate(-50%, 20px); background:rgba(0,0,0,.55); color:var(--text); padding:10px 14px; border-radius:12px; border:1px solid var(--border); opacity:0; transition:opacity .2s ease, transform .25s ease; z-index:50; }
.toast.show{ opacity:1; transform:translate(-50%, 0); }

/* ===== Responsive (automatisch, keine "wrap"-Container) ===== */
@media (min-width:1100px){ .title{ font-size:2.8rem; } }

/* ===== Bevorzugte reduzierte Bewegungen ===== */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}
/* Navbar Brand */
.navbar .brand{
  position:relative; font-weight:800; letter-spacing:.5px;
  background:linear-gradient(90deg,#ffd1d9 0%,#ff8aa3 40%,#ff415f 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 16px rgba(255,64,96,.35);
}
.navbar .brand::after{
  content:""; position:absolute; inset:-8px -14px; z-index:-1;
  border-radius:14px;
  box-shadow:0 0 40px 12px rgba(255,48,84,.25), 0 0 6px 1px rgba(255,48,84,.35) inset;
  pointer-events:none;
}
:root{ --glass: rgba(20,0,12,.55); --blur: 18px; --glow: rgba(255,48,84,.35); }

/* Burger Icon */
.burger{ position:fixed; top:18px; right:18px; z-index:60;
  width:46px;height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.08);
  background:rgba(20,20,22,.65); backdrop-filter:blur(6px); display:grid; place-items:center;
  box-shadow:0 0 18px var(--glow);
}
.burger span{ display:block; width:22px;height:2px; background:#fff; border-radius:2px; transition:.25s;
}
.burger span:nth-child(2){ margin:6px 0; }

/* → „X“, wenn offen */
.menu-open .burger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.menu-open .burger span:nth-child(2){ opacity:0; transform:scaleX(0); }
.menu-open .burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* Optional: Burger komplett ausblenden, wenn Menü offen */
/* .menu-open .burger{ opacity:0; pointer-events:none; } */

/* Overlay blockt Klicks + schließt */
.menu-overlay{ position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.35); backdrop-filter:blur(6px); }
.menu-overlay[hidden]{ display:none; }

/* Side Menu (mehr Blur, kein Durchklicken) */
.side-menu{
  position:fixed; top:0; right:0; height:100dvh; width:min(340px,88vw); z-index:50;
  background:var(--glass); backdrop-filter:blur(var(--blur));
  border-left:1px solid rgba(255,255,255,.08); box-shadow:-10px 0 40px rgba(0,0,0,.45), 0 0 40px var(--glow);
  -webkit-backdrop-filter:blur(var(--blur));
}
.side-menu[hidden]{ display:none; }

/* Wenn Menü offen: Seite nicht scrollen & Hero etwas „zurücknehmen“ */
.menu-open body, .menu-open html{ overflow:hidden; }
.menu-open .hero{ filter:blur(1.5px) brightness(.9); }

/* Alternative/zusätzlich: Hero kompakter auf kleinen Screens */
@media (max-width:900px){
  .hero{ padding-block:56px; }
  .hero h1{ font-size: clamp(28px,6vw,48px); }
}
/* Layout für Footer am Seitenende */
html, body { height:100%; }
body { display:flex; min-height:100%; flex-direction:column; }
main { flex:1 0 auto; }
/* dein Footer */
footer.site-footer { margin-top:auto; }
/* Fix: Menü rechts, fährt rein, überlagert (aber blockt Klicks) */
.side-menu{
  position:fixed; top:0; right:0; left:auto;
  height:100dvh; width:min(340px,88vw); z-index:50;
  background:rgba(20,0,12,.55); backdrop-filter:blur(18px);
  border-left:1px solid rgba(255,255,255,.08);
  box-shadow:-10px 0 40px rgba(0,0,0,.45), 0 0 40px rgba(255,48,84,.35);
  transform:translateX(110%);           /* Start: außerhalb rechts */
  transition:transform .28s ease-out;   /* smooth */
}
.menu-open #sideMenu{ transform:translateX(0); }

/* Overlay blockt Klicks sicher */
.menu-overlay{ position:fixed; inset:0; z-index:40;
  background:rgba(0,0,0,.35); backdrop-filter:blur(6px);
}
.menu-overlay[hidden], .side-menu[hidden]{ display:none; }

/* Kein Seitenscrolling, dezent Hero dämpfen */
.menu-open html, .menu-open body{ overflow:hidden; }
.menu-open .hero{ filter:blur(1.2px) brightness(.92); }

/* Burger bleibt rechts oben */
.burger{ position:fixed; top:18px; right:18px; z-index:60; }
.navbar .brand{
  position:relative; font-weight:800;
  background:linear-gradient(90deg,#ffd1d9,#ff8aa3,#ff415f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 16px rgba(255,64,96,.35);
}
.navbar .brand::after{
  content:""; position:absolute; inset:-8px -14px; z-index:-1; border-radius:14px;
  box-shadow:0 0 40px 12px rgba(255,48,84,.25), 0 0 6px 1px rgba(255,48,84,.35) inset;
  pointer-events:none;
}
.side-menu{
  position:fixed; top:0; right:0; bottom:0; left:auto;
  height:100svh; width:min(360px,88vw); z-index:50;
  transform:translateX(110%); transition:transform .28s ease-out; will-change:transform;
  background:rgba(20,0,12,.55); backdrop-filter:blur(18px);
  border-left:1px solid rgba(255,255,255,.08);
  box-shadow:-10px 0 40px rgba(0,0,0,.45), 0 0 40px rgba(255,48,84,.35);
}
.menu-open #sideMenu{ transform:translateX(0); }
/* Seite immer volle Höhe */
html, body {
  height: 100%;
}

/* Layout mit flexiblem Hauptinhalt */
body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Hauptbereich füllt alles über dem Footer */
main {
  flex: 1 0 auto;
}

/* Footer sitzt am Boden, egal wie kurz die Seite ist */
footer.site-footer {
  margin-top: auto;
  text-align: center;
  padding: 14px 0;
  font-size: 0.9rem;
  color: #aaa;
  background: rgba(16, 16, 18, 0.75);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.25);
}
/* === Footer Variante B === */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100%; }
main { flex: 1 0 auto; }
footer.site-footer {
  margin-top: auto;
  text-align: center;
  padding: 14px 0;
  font-size: 0.9rem;
  color: #aaa;
  background: rgba(16,16,18,0.75);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 -2px 20px rgba(0,0,0,0.25);
}

/* === Navbar & Burger === */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: rgba(16,16,18,0.75);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
}

.brand {
  font-weight: 800;
  background: linear-gradient(90deg,#ffd1d9,#ff8aa3,#ff415f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 16px rgba(255,64,96,.35);
}

.burger {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 100;
}
.burger span {
  width: 24px;
  height: 2px;
  background: white;
  transition: .25s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* === Menü === */
.side-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px,88vw);
  background: rgba(20,0,12,.55);
  backdrop-filter: blur(18px);
  border-left: 1px solid rgba(255,255,255,0.08);
  box-shadow: -10px 0 40px rgba(0,0,0,.45), 0 0 40px rgba(255,48,84,.35);
  transform: translateX(110%);
  transition: transform .28s ease-out;
  z-index: 50;
}
.menu-open #sideMenu { transform: translateX(0); }

.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  transition: opacity .2s;
  z-index: 40;
}
.menu-overlay[hidden] { display: none; }

/* Klickblock & Blur bei offenem Menü */
.menu-open main, .menu-open header, .menu-open footer { pointer-events: none; }
.menu-open .burger, .menu-open .side-menu { pointer-events: auto; }
.menu-open .hero { filter: blur(1.2px) brightness(.92); }
.menu-open html, .menu-open body { overflow: hidden; }
/* --- Reset & Basics --- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; display: flex; flex-direction: column; min-height: 100%; background:#0f0f12; color:#fff; font-family: system-ui, sans-serif; }

/* --- Navbar --- */
header { position: relative; z-index: 5; }
.navbar{
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; padding:12px 18px;
  background:rgba(16,16,18,.75); border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.brand{
  font-weight:800;
  background:linear-gradient(90deg,#ffd1d9,#ff8aa3,#ff415f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 16px rgba(255,64,96,.35);
}

/* --- Burger --- */
.burger{
  position: relative; width:44px; height:44px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px;
  border:none; background:transparent; cursor:pointer; z-index:10000; /* MAX */
}
.burger span{ width:24px; height:2px; background:#fff; transition:.25s; border-radius:2px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:scaleX(0); }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* --- Offcanvas (rechts) --- */
.side-menu{
  position:fixed; top:0; right:0; bottom:0; width:min(360px,88vw);
  background:rgba(20,0,12,.55); backdrop-filter:blur(18px);
  border-left:1px solid rgba(255,255,255,.08);
  box-shadow:-10px 0 40px rgba(0,0,0,.45), 0 0 40px rgba(255,48,84,.35);
  transform:translateX(110%); transition:transform .28s ease-out; z-index:9000;
}
.menu-open #sideMenu{ transform:translateX(0); }

/* --- Overlay --- */
.menu-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.42); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .2s ease; z-index:8000;
}
.menu-overlay[hidden]{ display:none; }
.menu-open .menu-overlay{ opacity:1; }

/* --- Inhalt --- */
main{ flex:1 0 auto; position:relative; z-index:1; }
.hero{ padding:64px 18px; }
.menu-open main, .menu-open header, .menu-open footer{ pointer-events:none; }
.menu-open .side-menu, .menu-open .burger{ pointer-events:auto; }
.menu-open html, .menu-open body{ overflow:hidden; }
.menu-open .hero{ filter:blur(1.2px) brightness(.92); }

/* --- Footer (Variante B, unten & volle Breite) --- */
footer.site-footer{
  margin-top:auto; align-self:stretch; width:100%;
  text-align:center; padding:14px 0; font-size:.9rem; color:#aaa;
  background:rgba(16,16,18,.75); border-top:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px); box-shadow:0 -2px 20px rgba(0,0,0,.25);
}
/* ===== Reset & Base ===== */
/* ===== Burger (fixed, immer klickbar) ===== */
.burger{
position: fixed; top: 18px; right: 18px; /* garantiert rechts oben */
width: 46px; height: 46px; z-index: 10000;
display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
background: rgba(20,20,22,.65); backdrop-filter: blur(6px);
box-shadow: 0 0 18px rgba(255,48,84,.35);
cursor: pointer;
}
.burger span{ width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: .25s; }
/* → X wenn offen (Fallback über aria-expanded) */
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; transform: scaleX(0); }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }


/* ===== Offcanvas (rechts) ===== */
.side-menu{
position: fixed; top: 0; right: 0; bottom: 0; left: auto;
width: min(360px, 88vw);
background: rgba(20,0,12,.55);
border-left: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
box-shadow: -10px 0 40px rgba(0,0,0,.45), 0 0 40px rgba(255,48,84,.35);
transform: translateX(110%);
transition: transform .28s ease-out;
z-index: 9500;
}
.menu-open #sideMenu{ transform: translateX(0); }


/* Overlay blockt Klicks */
.menu-overlay{
position: fixed; inset: 0; z-index: 9000;
background: rgba(0,0,0,.42); backdrop-filter: blur(6px);
opacity: 0; transition: opacity .2s ease;
}
.menu-overlay[hidden]{ display: none; }
.menu-open .menu-overlay{ opacity: 1; }


/* Kein Durchklicken & dezent dimmen */
.menu-open main, .menu-open header, .menu-open footer{ pointer-events: none; }
.menu-open .side-menu, .menu-open .burger{ pointer-events: auto; }
.menu-open html, .menu-open body{ overflow: hidden; }
.menu-open .hero{ filter: blur(1.2px) brightness(.92); }


/* ===== Footer Variante B (unten) ===== */
footer.site-footer{
margin-top: auto; /* schiebt Footer an das Seitenende */
text-align: center; display: flex; justify-content: center; align-items: center;
padding: 14px 16px; font-size: .9rem; color: #aaa;
background: rgba(16,16,18,.75); border-top: 1px solid rgba(255,255,255,.08);
backdrop-filter: blur(10px); box-shadow: 0 -2px 20px rgba(0,0,0,.25);


/* Full-bleed, selbst wenn Footer in einem schmalen Container hängt */
position: relative; left: 50%; right: 50%; width: 100vw;
margin-left: -50vw; margin-right: -50vw;
}


/* Motion-Respect */
@media (prefers-reduced-motion: reduce){
.side-menu{ transition: none; }
.menu-overlay{ transition: none; }
.burger span{ transition: none; }
}
/* Reset & Layout (Footer B) */
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;display:flex;flex-direction:column;min-height:100%;background:#0f0f12;color:#fff;font-family:Inter,system-ui,sans-serif}
main{flex:1 0 auto}

/* Navbar clean */
.navbar{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:rgba(16,16,18,.78);
  border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px)}
.brand{font-weight:800;letter-spacing:.4px;background:linear-gradient(90deg,#ffd1d9,#ff8aa3,#ff415f);
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 16px rgba(255,64,96,.35)}

/* Burger (immer klickbar) */
.burger{position:fixed;top:18px;right:18px;width:46px;height:46px;display:flex;flex-direction:column;gap:6px;justify-content:center;align-items:center;
  border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(20,20,22,.65);backdrop-filter:blur(6px);
  box-shadow:0 0 18px rgba(255,48,84,.35);cursor:pointer;z-index:10000}
.burger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Offcanvas rechts */
.side-menu{position:fixed;top:0;right:0;bottom:0;width:min(360px,88vw);background:rgba(20,0,12,.55);
  border-left:1px solid rgba(255,255,255,.08);backdrop-filter:blur(18px);box-shadow:-10px 0 40px rgba(0,0,0,.45),0 0 40px rgba(255,48,84,.35);
  transform:translateX(110%);transition:transform .28s ease-out;z-index:9500}
.menu-open #sideMenu{transform:translateX(0)}
.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.42);backdrop-filter:blur(6px);opacity:0;transition:opacity .2s;z-index:9000}
.menu-overlay[hidden],.side-menu[hidden]{display:none}
.menu-open .menu-overlay{opacity:1}

/* Sperre Durchklicken + leicht dimmen */
.menu-open main,.menu-open header,.menu-open footer{pointer-events:none}
.menu-open .side-menu,.menu-open .burger{pointer-events:auto}
.menu-open html,.menu-open body{overflow:hidden}
.menu-open .hero{filter:blur(1.1px) brightness(.92)}

/* Footer Variante B – unten & zentriert (ohne Tricks) */
footer.site-footer{
  position:static; left:auto; right:auto; width:100%;
  margin:0; margin-top:auto; padding:14px 16px; text-align:center;
  background:rgba(16,16,18,.78); border-top:1px solid rgba(255,255,255,.08); backdrop-filter:blur(10px);
  color:#aaa; box-shadow:0 -2px 20px rgba(0,0,0,.25)
}
/* falls Alt-CSS reinfunkt: */
footer.site-footer{float:none !important}
/* Button & Linien kompakter */
.burger{ width:36px; height:36px; gap:5px; }   /* vorher 46x46 */
.burger span{ width:20px; height:2px; }        /* vorher 24px */
/* Burger IN der Navbar (rechts) */
.navbar{display:flex;align-items:center;justify-content:space-between}
.burger{
  position:static; /* statt fixed */
  width:36px;height:36px;gap:5px;margin-left:auto;
  background:transparent;border:0;box-shadow:none;z-index:auto;
}
.burger span{width:20px;height:2px}

/* damit er beim offenen Menü klickbar bleibt */
.menu-open main, .menu-open footer{pointer-events:none}
.menu-open header{pointer-events:auto; z-index:10002}
/* --- Z-Index-Fix: Side-Menu über Navbar, Overlay darunter --- */
header, .navbar { position: relative; z-index: 10000 !important; }
.menu-overlay   { z-index:  9000 !important; }   /* dimmt Seite, aber nicht über dem Menü */
.side-menu      { z-index: 11000 !important; }   /* liegt sichtbar über der Navbar */
.menu-open header { pointer-events: none; }
.menu-open .side-menu { pointer-events: auto; }
/* ===== Arch-Glass Background (rot/weiß/schwarz) ===== */
:root{
  --bg:#0b0b0d;          /* Schwarzbasis */
  --r:20,0,12,.45;         /* Rot (RGB für rgba-Combos) */
  --white:255,255,255;
}

.app-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    /* rote Glows / Lichtkegel */
    radial-gradient(1200px 600px at 15% 30%, rgba(var(--r),.12) 0, transparent 60%),
    radial-gradient(900px 500px at 85% 65%, rgba(var(--r),.10) 0, transparent 70%),
    radial-gradient(600px 320px at 50% 110%, rgba(var(--r),.18) 0, transparent 70%),

    /* zarter weißer Schein nach unten */
    linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 60%),

    /* leichte Top-Highlight-Kante */
    radial-gradient(1400px 60% at 50% -10%, rgba(255,255,255,.06) 0, transparent 70%),

    /* Basis */
    linear-gradient(180deg, var(--bg) 0%, #0b0b0d 60%, #0a0a0c 100%);
  /* Fallback-Hintergrundfarbe */
  background-color: var(--bg);
}

/* Overlay-Layer: feines Raster + Vignette */
.app-bg::before{
  content:""; position:absolute; inset:-2px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 2px),
    radial-gradient(80% 60% at 50% 120%, rgba(0,0,0,.6), transparent 60%);
  mix-blend-mode: overlay;
  opacity:.6;
}

/* Körnung (SVG-Fractal Noise via Data-URI) */
.app-bg::after{
  content:""; position:absolute; inset:0;
  background: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">\
<filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter>\
<rect width="100%" height="100%" filter="url(%23n)" opacity="0.04"/></svg>');
  background-size:180px 180px;
  mix-blend-mode:soft-light;
  opacity:.8;
}

/* Stelle sicher, dass Content über dem BG liegt */
header, main, footer{ position:relative; z-index:1; }
.card,.panel{
  background: rgba(20,0,12,.45);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 40px rgba(255,48,84,.12);
}
/* --- Kontaktseite: Glasoptik --- */
.section.contact{ padding:48px 18px; max-width:1100px; margin:0 auto; }
.section.contact .title{ font-size:clamp(28px,5vw,44px); margin:0 0 22px; }

.contact-card.glass{
  background: rgba(20,0,12,.45);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:22px;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 50px rgba(255,48,84,.14), 0 2px 0 rgba(255,255,255,.04) inset;
}

.form-row{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.form-row label{ font-size:.9rem; color:#cfcfd2; }
.form-row input, .form-row textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:#fff; outline:none; transition:border .15s, box-shadow .15s, background .15s;
}
.form-row input::placeholder, .form-row textarea::placeholder{ color:#9ca0a8; }
.form-row input:focus, .form-row textarea:focus{
  border-color: rgba(255,48,84,.55);
  box-shadow: 0 0 0 3px rgba(255,48,84,.2);
  background: rgba(255,255,255,.06);
}

.actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; }
.btn{
  appearance:none; border:1px solid rgba(255,255,255,.08); border-radius:12px;
  padding:10px 16px; cursor:pointer; text-decoration:none; color:#fff;
  background: rgba(16,16,18,.6); backdrop-filter: blur(6px);
}
.btn.primary{
  background: linear-gradient(180deg, rgba(255,48,84,.85), rgba(255,48,84,.65));
  border-color: rgba(255,48,84,.6);
  box-shadow: 0 6px 22px rgba(255,48,84,.35);
}
.btn.primary:hover{ filter:brightness(1.05); }
.btn.ghost{ background: transparent; }

@media (max-width:640px){
  .contact-card.glass{ padding:16px; }
}
location ^~ /static/ { alias /root/xWebsite/app/static/; access_log off; }