:root{
  --accent:   var(--aqua);
  --accent-2: var(--aqua-deep);
  --bg:#0B0C10;
  --aqua:#00E4D3;
  --aqua-deep:#009E8E;
  --text:#E7F4F3;
  --muted:#9DB8B6;
  --card:#101319;
  --card-2:#0E1116;
  --border:rgba(255,255,255,.06);
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Exo 2', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: radial-gradient(1200px 600px at 70% 10%, #083a38 0%, var(--bg) 60%) no-repeat, var(--bg);
  color:var(--text);
  line-height:1.6;
}
.container{max-width:1150px;margin:0 auto;padding:0 20px}
.site-header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg, rgba(11,12,16,.9), rgba(11,12,16,.75));
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand .brand-mark{font-weight:700;letter-spacing:.3px;color:var(--aqua);}
.nav a{color:var(--muted);text-decoration:none;margin-left:18px;font-weight:600}
.nav .cta{color:#0B0C10;background:var(--aqua);padding:10px 14px;border-radius:12px}
.nav a:hover{color:var(--text)}
main{min-height:60vh}
.hero{
  --header-offset:72px;
  --hero-pad-top: clamp(48px, 12vh, 120px);
  --hero-pad-bottom: clamp(48px, 10vh, 120px);
  padding: var(--hero-pad-top) 0 var(--hero-pad-bottom);
  display:flex;
  align-items:center;
  min-height: calc(100vh - var(--header-offset));
}
.hero > .container{width:100%}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{font-size:54px;line-height:1.1;margin:0}
.claim{font-size:22px;color:#DFFAF7;margin:.2rem 0 1rem 0}
.sub{color:var(--muted);max-width:52ch}
.actions{display:flex;gap:14px;margin-top:18px}
.btn{display:inline-block;padding:12px 18px;border-radius:14px;text-decoration:none;font-weight:700;border:1px solid var(--border)}
.btn.primary{background:linear-gradient(135deg, var(--aqua), var(--aqua-deep));color:#041312;border:none;box-shadow:var(--shadow)}
.btn.ghost{color:var(--text);}

.section{padding:72px 0;border-top:1px solid var(--border)}
.section.alt{background:linear-gradient(180deg,var(--card),var(--card-2))}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
.card{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.bullets{padding-left:18px}
.dna, .roadmap{list-style:none;padding:0;margin:0}
.dna li, .roadmap li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px dashed var(--border)}
.dna li:last-child, .roadmap li:last-child{border-bottom:0}

.steps h2{margin-bottom:18px}
.step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{background:rgba(255,255,255,.03);border:1px solid var(--border);padding:16px;border-radius:14px;text-align:left}
.step .num{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--aqua),var(--aqua-deep));display:flex;align-items:center;justify-content:center;font-weight:800;color:#041312;margin-bottom:10px}

.page{padding:64px 0}
.page .container{max-width:900px}
.page h1{margin:0 0 16px 0}
.page .muted{color:var(--muted)}

.site-footer{border-top:1px solid var(--border);padding:24px 0;color:var(--muted)}
.footer-grid{display:flex;align-items:center;justify-content:space-between}
.mini{font-size:.9rem;color:var(--muted)}

@media (max-width: 900px){
  .hero-grid, .two-col, .step-grid{grid-template-columns:1fr}
  .step-grid{grid-template-columns:repeat(2,1fr)}
  .brand{height:58px}
  .nav{display:none}
  .hero{
    --header-offset:58px;
    --hero-pad-top: clamp(36px, 14vh, 72px);
    --hero-pad-bottom: clamp(36px, 14vh, 72px);
    min-height:auto;
    display:block;
  }
  .hero-grid{gap:28px}
  .hero h1{font-size:40px}
}


/* ===== v2.1 A+C additions (non-invasive) ===== */
.section{padding:42px 0}
.panel{background:#0e1218;border:1px solid var(--bd, #1E2A2F);border-radius:14px;padding:12px}
.mini{font-size:.92rem;color:var(--muted, #A6BEC1)}
.hero .demo{border:1px solid var(--bd, #1E2A2F);border-radius:14px;background:rgba(255,255,255,.03)}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid var(--bd, #1E2A2F);background:rgba(255,255,255,.03);color:var(--text, #E7F4F3);cursor:pointer}
.btn.primary{background:linear-gradient(135deg, var(--aqua, #00E4D3), var(--aqua-deep, #009E8E));color:#041312;border:0;font-weight:800}

/* Brand DNA grid */
.brandgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.brandgrid .panel{text-align:center}

/* How it works */
.howgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.howgrid img{width:100%;border-radius:10px;display:block}

/* Party mode teaser with glow */
.party-teaser{position:relative;overflow:hidden}
.party-teaser::before{
  content:''; position:absolute; inset:-40%; 
  background: radial-gradient(ellipse at 30% 30%, rgba(0,228,211,.14), transparent 50%),
              radial-gradient(ellipse at 70% 30%, rgba(124,77,255,.12), transparent 55%);
  filter: blur(22px); z-index:0;
}
.party-teaser .content{position:relative; z-index:1}

/* Icon row */
.iconrow{display:flex; gap:14px; flex-wrap:wrap; margin-top:10px}
.icon{display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--bd, #1E2A2F); border-radius:999px; background:rgba(255,255,255,.03)}
.icon svg{width:18px; height:18px}


/* --- MemoRiii assets integration --- */
.hero-mark { margin-top: 0.75rem; }
.hero-mark .hero-logo { max-width: 320px; width: 40vw; height: auto; display:block; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.35)); }

.gallery { padding: 3rem 0; }
.gallery .container { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 18px; }
.gallery figure { margin: 0; background: var(--card, #10151c); border: 1px solid var(--border, #253043); border-radius: 12px; overflow: hidden; }
.gallery img { width: 100%; height: auto; display:block; }
.gallery figcaption { padding: 10px 12px; font-size: 0.95rem; opacity: 0.9; }


/* --- Added: Vision bigline & Why-Form & Deep Layer --- */
.quote.card .bigline{font-size:1.15rem; line-height:1.5; font-weight:700; opacity:.95; margin-bottom:6px}
.why-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; align-items:start; margin-top:10px}
.why-item{display:flex; gap:8px; align-items:center; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:10px 12px}
.why-item.other{display:grid; grid-template-columns:100px 1fr; align-items:center}
.why-item.other input[type="text"]{width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:#0e1218; color:var(--text); outline:none}
.why-actions{grid-column:1/-1; display:flex; gap:10px; align-items:center; margin-top:4px}
.dev-row{display:flex; gap:10px; align-items:center}


/* --- WHY chart layout --- */
.why-wrap{gap:18px}
.why-left, .why-right{border:1px solid var(--border); background:var(--card); border-radius:12px; padding:16px}
.bar-chart{display:grid; gap:10px; margin-top:8px}
.bar-row{display:grid; grid-template-columns:160px 1fr; gap:10px; align-items:center}
.bar-label{font-size:.95rem; opacity:.9}
.bar-wrap{position:relative; height:28px; background:rgba(255,255,255,.06); border-radius:999px; overflow:hidden; border:1px solid var(--border)}
.bar{position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg,#59f,#9cf);}
.bar-val{position:absolute; right:10px; top:50%; transform:translateY(-50%); font-weight:700}
@media(max-width:900px){ .bar-row{grid-template-columns:1fr} }


/* Prevent label overlap on very small bars */
.bar-wrap .bar-val{pointer-events:none; mix-blend-mode:normal}


/* Modal & Auth */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; z-index:9999; padding:20px}
.modal-card{max-width:480px; margin:6vh auto; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:18px; position:relative}
.modal-close{position:absolute; right:10px; top:8px; background:transparent; border:0; color:var(--muted); font-size:22px; cursor:pointer}
.auth-form label{display:block; margin-bottom:10px}
.auth-form input{width:100%; padding:10px; border-radius:10px; border:1px solid var(--border); background:#0e1218; color:var(--text); outline:none}
.auth-form .row{display:flex; align-items:center; gap:8px; margin-top:8px}


/* optional: hide text brand if header gets tight */


/* v3.1 Header Simplified (single line) */
.site-header .brand{display:flex; align-items:center; gap:20px; justify-content:space-between}
.socials{display:flex; gap:10px; align-items:center}
.socials a svg{fill:var(--muted); transition:fill .2s}
.socials a:hover svg{fill:var(--accent)}
.lang-switch{display:flex; gap:6px; align-items:center}
.lang-switch button{background:transparent; border:1px solid var(--border); border-radius:6px; padding:4px 8px; color:var(--text); cursor:pointer; font-weight:600}
.lang-switch button.active,.lang-switch button:hover{background:var(--accent); color:#fff; border-color:var(--accent)}
@media(max-width:900px){
  .site-header .brand{flex-wrap:wrap; gap:12px}
  .lang-switch{order:3; width:100%; justify-content:center}
}


/* v3.1.1 Header single-line strict */
.site-header .brand{display:flex; align-items:center; gap:14px; justify-content:flex-start; flex-wrap:nowrap}
.site-header .brand > *{flex:0 0 auto}
.site-header .brand .brand-mark{white-space:nowrap}
.site-header .brand .nav{margin-left:auto; display:flex; align-items:center; gap:14px; flex-wrap:nowrap}
.socials{display:flex; gap:10px; align-items:center; flex:0 0 auto; white-space:nowrap}
.lang-switch{display:flex; gap:6px; align-items:center; flex:0 0 auto}
@media(max-width:900px){
  .site-header .brand{flex-wrap:wrap}
  .site-header .brand .nav{order:4; width:100%; justify-content:flex-end; margin-left:0; margin-top:6px}
}


/* v3.1.2 Nav-inline header */
.site-header .brand{display:flex; align-items:center; justify-content:flex-start}
.site-header .nav{display:flex; align-items:center; gap:16px; flex-wrap:nowrap; overflow-x:auto}
.nav-brand{font-weight:800; letter-spacing:.3px; opacity:.95; margin-right:6px}
.nav-lang button{background:transparent; border:1px solid var(--border); border-radius:6px; padding:3px 8px; color:var(--text); cursor:pointer; font-weight:600}
.nav-lang button.active,.nav-lang button:hover{background:var(--accent); color:#fff; border-color:var(--accent)}
.nav-socials{display:inline-flex; gap:8px; align-items:center}
.nav-socials svg{fill:var(--muted); transition:fill .2s}
.nav-socials a:hover svg{fill:var(--accent)}
/* make links align baseline */
.site-header .nav a{display:inline-flex; align-items:center; height:32px}


/* v3.2 Header: socials inside nav, one line */
.site-header .brand{display:flex; align-items:center; justify-content:flex-start}
.site-header .nav{display:flex; align-items:center; gap:16px; flex-wrap:nowrap}
.nav-socials{display:inline-flex; align-items:center; gap:8px}
.nav-socials svg{fill:var(--muted); transition:fill .2s}
.nav-socials a:hover svg{fill:var(--accent)}
/* keep links baseline */
.site-header .nav a{display:inline-flex; align-items:center; height:32px}

/* v3.2 Classic Inline Left Header */
.site-header .container {display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap;}
.brand-line {display:flex; align-items:center; gap:12px; flex-wrap:nowrap;}
.brand-mark a {color:var(--text); font-weight:800; text-decoration:none; font-size:1.1rem;}
.brand-mark a:hover {color:var(--accent);}
.social-icons {display:inline-flex; gap:8px; align-items:center;}
.social-icons svg {fill:var(--muted); transition:fill .2s;}
.social-icons a:hover svg {fill:var(--accent);}
.lang-switch {display:inline-flex; gap:6px; align-items:center;}
.lang-switch button {background:transparent; border:1px solid var(--border); border-radius:6px; padding:2px 7px; color:var(--text); cursor:pointer; font-weight:600;}
.lang-switch button.active, .lang-switch button:hover {background:var(--accent); color:#fff; border-color:var(--accent);}
.nav {display:flex; align-items:center; gap:16px; flex-wrap:nowrap;}

/* v4.2 spacing */
.brand-line{margin-right:18px}
.site-header .nav{gap:18px}
/* =========================================
   Hero-Art Layer (Logo-Glow + Klickbereich)
   ========================================= */

.hero-art{
  position:relative;
  display:grid;
  place-items:center;
  cursor:pointer;
  border-radius:clamp(22px, 4vw, 34px);
  padding:0;
  width:clamp(225px, 42vw, 800px);
  max-width:100%;
  aspect-ratio:auto;
  max-height:none;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .3s ease, filter .3s ease;
  box-shadow:
    0 0 0 0 rgba(30,230,178,0),
    inset 0 0 0 0 rgba(30,230,178,0);
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
}

.hero-art__layer{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(120% 90% at 12% 18%, rgba(0,228,211,.32), transparent 68%),
    radial-gradient(135% 120% at 88% 82%, rgba(124,77,255,.28), transparent 70%),
    linear-gradient(158deg, rgba(2,24,29,.65), rgba(3,16,22,.38));
  opacity:.9;
  transition:opacity .3s ease, transform .3s ease;
  z-index:0;
}

.hero-art img{
  width:100%;
  max-height:clamp(180px, 45vh, 420px);
  height:auto;
  border-radius:inherit;
  /* Nur den unsauberen Außenrand des Assets abfangen */
  clip-path: inset(1.6% 1.4% 1.8% 1.4% round 20px);
  position:relative;
  z-index:1;
  filter:drop-shadow(0 0 16px rgba(0,0,0,.28));
  transition:filter .3s ease, transform .3s ease;
}

@media (max-width: 900px){
  .hero-art{
    margin:24px auto 0;
    width:min(84vw, 500px);
    max-height:clamp(160px, 56vw, 360px);
    padding:0;
  }
  .hero-art img{
    width:100%;
  }
}

.hero-art:hover,
.hero-art:focus-visible{
  transform:translateY(-3px);
  box-shadow:
    0 18px 40px rgba(0,0,0,.45),
    0 0 28px 8px color-mix(in oklab, var(--accent) 18%, transparent);
}

.hero-art:hover .hero-art__layer,
.hero-art:focus-visible .hero-art__layer{
  opacity:1;
  transform:scale(1.03);
}

.hero-art:hover img,
.hero-art:focus-visible img{
  transform:scale(1.03);
  filter:drop-shadow(0 0 18px color-mix(in oklab, var(--accent) 28%, transparent));
}

/* Mobile/touch fine-tuning:
   Keep desktop proportions, but make the hero visual a bit larger on phones/tablets. */
@media (hover: none) and (pointer: coarse){
  .hero-art{
    width:clamp(520px, 78vw, 1120px);
  }
  .hero-art img{
    max-height:clamp(330px, 70vh, 600px);
  }
}

/* IDEA/Hero: Grafiken nicht riesig werden lassen */
.section-idea .idea-graphic,
.section-idea .idea-graphic img {
  display: block;
  max-width: 100%;
}

.section-idea .idea-graphic img {
  width: 100%;
  height: auto;
  max-height: clamp(260px, 32vh, 420px); /* <- Deckel drauf */
  object-fit: contain;                   /* keine Verzerrung */
  margin-inline: auto;                   /* schön zentriert */
}

.examples {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 8px;
}

.examples figure {
  margin: 0;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.examples img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.examples figcaption {
  font-size: .95rem;
  color: var(--muted);
  padding: 8px 10px;
}

@media(max-width:900px){
  .examples {
    grid-template-columns: repeat(2, 1fr);
  }
}
.placeholder {
  display: none !important;
}