/* ===== Million Thoughts – Übergangsseite ===== */

/* ---- Lokal gehostete Schrift (DSGVO: kein Google-Fonts-Aufruf) ---- */
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:300 700;               /* Variable Font deckt 300–700 ab */
  font-display:swap;
  src:url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --bg:#ffffff;
  --text:#1d1d1d;
  --muted:#9a9a9a;
  --word-faded:#d6d6d6;
  --mauve:#b78cb1;
  --mauve-dark:#a576a0;
  --line:#cfcfcf;
  --icon:#b6c7b6;
  --icon-dark:#93a893;
  --footer-bg:#111114;
  --footer-h:48px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}

/* ---------- Landing Layout ---------- */
.stage{
  position:relative;
  display:flex;
  align-items:stretch;
  flex:1 1 auto;
  width:100%;
  min-height:0;
}

/* Video links – Panel exakt im Seitenverhältnis der Maske (724:1027), volle Höhe */
.video-panel{
  position:relative;
  flex:0 0 auto;
  height:calc(100vh - var(--footer-h));
  aspect-ratio:724 / 1027;   /* exakt unverzerrte Maske */
  max-width:52vw;
  overflow:hidden;
}
.video-panel video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 80%;   /* unteren Bildausschnitt zeigen -> Schriftzug oben im Video verschwindet */
  display:block;
}
/* Torn Frame Overlay (weiß, blendet sich in den Hintergrund) */
.video-panel .frame{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:fill;
  pointer-events:none;
  -webkit-user-select:none;user-select:none;
}
.frame-mobile{display:none;}   /* nur im Mobil-Breakpoint sichtbar */

/* Rechter Inhaltsbereich */
.content{
  position:relative;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 110px 40px 40px;
  text-align:center;
}

.center-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:34px;
  width:100%;
  max-width:760px;
}

/* Logo mittig über dem Wortdreher */
.logo{
  width:min(360px,46%);
  height:auto;
  margin-bottom:6px;
}

/* ---------- Roll-Wörter ---------- */
.roll{
  --line-h:clamp(46px,6vw,92px);
  height:calc(var(--line-h) * 3);
  overflow:hidden;
  position:relative;
  width:100%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 70%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 70%,transparent 100%);
}
.roll-list{
  list-style:none;margin:0;padding:0;
  transition:transform .6s cubic-bezier(.6,.04,.3,1);
}
.roll-list li{
  height:var(--line-h);
  line-height:var(--line-h);
  font-size:clamp(28px,4.4vw,64px);
  font-weight:300;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--word-faded);
  transition:color .5s ease,opacity .5s ease;
  white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.roll-list li.is-active{
  color:var(--text);
  font-weight:700;
  letter-spacing:.03em;
}

/* ---------- Buttons ---------- */
.buttons{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;}
.btn{
  display:inline-block;
  padding:15px 38px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .25s ease;
  border:1.5px solid transparent;
}
.btn.primary{background:var(--mauve);color:#fff;}
.btn.primary:hover{background:var(--mauve-dark);}
.btn.outline{background:transparent;color:var(--text);border-color:var(--line);}
.btn.outline:hover{border-color:var(--text);}

/* ---------- Coming Soon ---------- */
.coming-soon{
  font-size:clamp(18px,2.1vw,28px);
  font-weight:300;
  color:#2f2f2f;
  letter-spacing:.02em;
  margin:0;
}

/* ---------- Icon-Leiste rechts ---------- */
.icon-bar{
  position:absolute;
  top:50%;right:30px;
  transform:translateY(-50%);
  display:flex;flex-direction:column;
  gap:18px;
  z-index:5;
}
.icon-bar a{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;
  transition:transform .2s ease,opacity .2s ease;
  opacity:.95;
}
.icon-bar a:hover{transform:scale(1.12);opacity:1;}
.icon-bar img{width:100%;height:100%;display:block;}

/* ---------- Schwarzer Footer-Balken ---------- */
.site-footer{
  flex:none;
  background:var(--footer-bg);
  color:#cfcfd4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:15px 250px;
  font-size:13px;
  letter-spacing:.04em;
}
.site-footer .legal a{color:#cfcfd4;}
.site-footer .legal a:hover{color:#fff;}
.site-footer .legal .sep{margin:0 8px;color:#55555c;}
.site-footer .copy{color:#9a9aa2;white-space:nowrap;}

/* ---------- Responsive ---------- */
@media (max-width:1300px){
  .site-footer{padding:15px 90px;}
}
@media (max-width:1100px), (orientation:portrait) and (max-width:1366px){
  .stage{flex-direction:column;}
  /* Video unten, bündig mit dem Footer */
  .content{order:1;flex:1 1 auto;justify-content:flex-start;padding:46px 22px 34px;}
  .video-panel{
    order:2;
    flex:none;width:100%;max-width:none;margin:0;
    height:auto;
    aspect-ratio:353 / 343;   /* Verhältnis der Mobil-Maske */
  }
  .video-panel video{object-position:center 45%;}
  .frame-desktop{display:none;}
  .frame-mobile{display:block;}  /* ausgefranste Kante oben, unten gerade am Footer */
  .center-block{gap:26px;}
  .logo{width:min(260px,62%);margin-top:6px;}
  .roll{--line-h:clamp(38px,11vw,70px);}
  .roll-list li{font-size:clamp(17px,6.6vw,46px);letter-spacing:.02em;}
  .icon-bar{
    position:static;transform:none;
    flex-direction:row;justify-content:center;
    margin-top:30px;gap:20px;
  }
  .site-footer{
    flex-direction:column;gap:8px;
    text-align:center;padding:16px 18px;
  }
}

/* ---------- Legal-Unterseiten ---------- */
.legal-wrap{
  max-width:820px;
  margin:0 auto;
  padding:60px 24px 80px;
  flex:1 1 auto;
}
.legal-back{
  display:inline-block;
  margin-bottom:30px;
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mauve-dark);
}
.legal-back:hover{color:var(--text);}
.legal-logo{width:230px;height:auto;display:block;margin:0 auto 40px;}
.legal-content{line-height:1.7;color:#2b2b2b;}
.legal-content h1{font-size:30px;margin:0 0 24px;}
.legal-content h2{font-size:20px;margin:34px 0 10px;}
.legal-content h3{font-size:16px;margin:24px 0 8px;}
.legal-content p{margin:0 0 14px;}
.legal-content a{color:var(--mauve-dark);text-decoration:underline;}

/* ---------- Cookie-Consent-Banner (einfacher Modus) ---------- */
.mt-consent{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;
  max-width:560px;margin:0 auto;
  background:#fff;color:var(--text);
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.18);
  padding:18px 20px;
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}
.mt-consent[hidden]{display:none;}
.mt-consent-text{margin:0 0 14px;font-size:13.5px;line-height:1.55;}
.mt-consent-text a{color:var(--mauve-dark);text-decoration:underline;}
.mt-consent-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
.mt-consent-btn{
  border:0;border-radius:8px;padding:10px 18px;font-size:13.5px;font-weight:600;cursor:pointer;
  font-family:inherit;
}
.mt-consent-btn.solid{background:var(--mauve-dark);color:#fff;}
.mt-consent-btn.solid:hover{background:#8f6489;}
.mt-consent-btn.ghost{background:#f0ecf0;color:var(--mauve-dark);}
.mt-consent-btn.ghost:hover{background:#e6dde6;}
@media(max-width:420px){
  .mt-consent-actions{justify-content:stretch;}
  .mt-consent-btn{flex:1 1 auto;}
}