/* =========================================================
   wir.cy — Coming Soon
   1  Tokens
   2  Base
   3  Topbar / Sprache / Burger
   4  Drawer
   5  Hero
   6  Kacheln
   7  Vormerken
   8  Claim / Footer
   9  Motion
   10 Responsive
   ========================================================= */

/* ---------- 1 Tokens ---------- */
:root{
  --navy-900:#04162E;
  --navy-800:#08203D;
  --navy-700:#0E2B4C;
  --brand-navy:#012452;
  --teal:#2BC8C2;
  --teal-600:#1FA8A3;
  --teal-soft:#69DAC8;
  --orange:#FD7D01;

  --ink:#FFFFFF;
  --ink-80:rgba(255,255,255,.82);
  --ink-60:rgba(255,255,255,.64);
  --ink-45:rgba(255,255,255,.46);

  --glass:rgba(9,26,48,.46);
  --glass-strong:rgba(7,22,42,.68);
  --glass-line:rgba(255,255,255,.16);
  --glass-line-hi:rgba(255,255,255,.34);

  --r-xl:26px;
  --r-lg:20px;
  --r-md:16px;
  --r-pill:999px;

  --shadow:0 24px 60px -28px rgba(0,0,0,.75);
  --font-display:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-body:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-script:"Caveat","Segoe Script","Bradley Hand",cursive;

  --pad-x:clamp(18px,3.4vw,40px);
  --hero-mobile-h:clamp(300px,46svh,470px);
}

/* ---------- 2 Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  background:var(--navy-900);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none !important}
h1,h2{margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.08}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{
  position:absolute;left:50%;top:-100px;transform:translateX(-50%);z-index:100;
  background:var(--teal);color:#04202A;font-weight:700;padding:10px 18px;border-radius:0 0 12px 12px;
}
.skip-link:focus-visible{top:0}

:where(a,button,input,[tabindex]):focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  border-radius:8px;
}

/* Glas-Rezept */
.glass{
  background:var(--glass);
  border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  backdrop-filter:blur(16px) saturate(130%);
}
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .glass{background:var(--glass-strong)}
}

/* ---------- 3 Topbar ---------- */
.topbar{
  position:absolute;
  inset:0 0 auto 0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:clamp(16px,2.4vw,26px) var(--pad-x);
  padding-top:calc(clamp(16px,2.4vw,26px) + env(safe-area-inset-top));
}
.topbar__brand{display:none}
.topbar__brand img{width:112px}
.topbar__actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}

/* Sprache */
.lang{position:relative}
.lang__btn{
  display:flex;align-items:center;gap:9px;
  padding:9px 14px 9px 10px;
  border-radius:var(--r-pill);
  background:var(--glass);
  border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  backdrop-filter:blur(16px) saturate(130%);
  color:var(--ink);
  transition:border-color .2s ease,background .2s ease;
}
.lang__btn:hover{border-color:var(--glass-line-hi)}
.lang__flag{display:flex;width:22px;height:22px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.22) inset}
.flag{width:22px;height:22px}
[data-lang="de"] .lang__btn .flag--en,
[data-lang="en"] .lang__btn .flag--de{display:none}
.lang__code{font-family:var(--font-display);font-weight:600;font-size:14px;letter-spacing:.02em}
.lang__chev{width:15px;height:15px;fill:none;stroke:var(--ink-80);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s ease}
.lang__btn[aria-expanded="true"] .lang__chev{transform:rotate(180deg)}

.lang__menu{
  position:absolute;right:0;top:calc(100% + 8px);
  min-width:168px;padding:6px;
  border-radius:var(--r-md);
  background:var(--glass-strong);
  border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  box-shadow:var(--shadow);
  z-index:40;
}
.lang__menu button{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 10px;border-radius:10px;
  font-size:14.5px;color:var(--ink-80);text-align:left;
}
.lang__menu button:hover{background:rgba(255,255,255,.08);color:var(--ink)}
.lang__menu button[aria-selected="true"]{color:var(--teal)}

/* Burger */
.burger{
  display:none;
  width:44px;height:44px;
  flex-direction:column;justify-content:center;align-items:center;gap:6px;
}
.burger span{
  display:block;width:26px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .26s ease,opacity .2s ease;
}
.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)}

/* ---------- 4 Drawer ---------- */
.drawer{
  position:fixed;z-index:29;
  left:var(--pad-x);right:var(--pad-x);
  top:calc(72px + env(safe-area-inset-top));
  padding:10px;
  border-radius:var(--r-lg);
  background:var(--glass-strong);
  border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  box-shadow:var(--shadow);
  animation:drop .24s ease both;
}
.drawer a{
  display:block;padding:12px 16px;border-radius:12px;
  font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--ink-80);
}
.drawer a:hover,.drawer a:active{background:rgba(255,255,255,.08);color:var(--ink)}
@keyframes drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* ---------- 5 Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(80px,10.5vh,128px) var(--pad-x) clamp(18px,3.4vh,40px);
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute;inset:0;z-index:-2;
  background-image:url("../img/hero.jpg");
  background-size:cover;
  background-position:center 58%;
  transform:scale(1.02);
  animation:drift 44s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.09)}}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 70% at 50% 34%,rgba(4,18,38,.10) 0%,rgba(4,18,38,.44) 62%,rgba(4,18,38,.72) 100%),
    linear-gradient(180deg,rgba(4,18,38,.48) 0%,rgba(4,18,38,.16) 26%,rgba(4,18,38,.40) 66%,rgba(4,18,38,.88) 100%);
}

.hero__inner{
  position:relative;
  width:100%;
  max-width:1120px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:clamp(15px,2.5vh,28px);
}
.hero__copy{display:flex;flex-direction:column;align-items:center;gap:clamp(7px,1.2vh,15px)}
.hero__logo{width:clamp(178px,min(18vw,23vh),268px);filter:drop-shadow(0 10px 30px rgba(0,0,0,.45))}
.hero__title{
  font-size:clamp(2.2rem,min(5.4vw,7.2vh),4.5rem);
  text-shadow:0 6px 34px rgba(2,12,26,.5);
}
.hero__title em{font-style:normal;color:var(--teal)}
.hero__script{
  font-family:var(--font-script);
  font-weight:600;
  font-size:clamp(1.38rem,min(2.7vw,3.6vh),2.3rem);
  line-height:1.15;
  color:var(--ink);
  text-shadow:0 4px 22px rgba(2,12,26,.5);
}
.hero__lede{
  max-width:46ch;
  font-size:clamp(1rem,1.25vw,1.14rem);
  color:var(--ink-80);
  text-shadow:0 2px 16px rgba(2,12,26,.6);
}

/* ---------- 6 Kacheln ---------- */
.tiles{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(12px,1.6vw,22px);
}
.tile{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  width:clamp(88px,8.4vw,112px);
}
.tile__box{
  display:grid;place-items:center;
  width:100%;aspect-ratio:11/8;
  border-radius:var(--r-md);
  background:var(--glass);
  border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  backdrop-filter:blur(14px) saturate(130%);
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.tile:hover .tile__box{transform:translateY(-4px);border-color:var(--glass-line-hi);background:rgba(255,255,255,.12)}
.tile__label{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(12.5px,1vw,14px);
  color:var(--ink-80);
  text-shadow:0 2px 12px rgba(2,12,26,.6);
}
.ico{
  width:clamp(26px,2.4vw,31px);height:auto;
  fill:none;stroke:var(--ink);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.ico--24{stroke-width:1.3}
.ico .a{stroke:var(--teal)}
.ico .b{stroke:var(--orange)}

/* ---------- 7 Vormerken ---------- */
.signup{
  width:min(560px,100%);
  padding:clamp(18px,2.4vh,28px) clamp(20px,3vw,34px) clamp(15px,1.9vh,22px);
  border-radius:var(--r-xl);
  background:var(--glass);
  border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  backdrop-filter:blur(18px) saturate(130%);
  box-shadow:var(--shadow);
  text-align:center;
}
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .signup,.tile__box,.lang__btn{background:var(--glass-strong)}
}
.signup__title{font-size:clamp(1.25rem,1.9vw,1.5rem);letter-spacing:-.01em}
.signup__text{margin-top:8px;font-size:15px;color:var(--ink-80)}

.signup__form{display:flex;gap:10px;margin-top:15px}
.field{position:relative;flex:1;display:flex;align-items:center}
.field__ico{
  position:absolute;left:15px;width:19px;height:19px;pointer-events:none;
  fill:none;stroke:var(--ink-45);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.field input{
  width:100%;
  padding:14px 16px 14px 44px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);
  border:1px solid var(--glass-line);
  font-size:15px;
  transition:border-color .2s ease,background .2s ease;
}
.field input::placeholder{color:var(--ink-45)}
.field input:hover{border-color:var(--glass-line-hi)}
.field input:focus{outline:none;border-color:var(--teal);background:rgba(255,255,255,.1)}
.signup__form.is-invalid .field input{border-color:#FF8A8A}

.btn{
  padding:14px 26px;
  border-radius:var(--r-pill);
  background:var(--teal);
  color:#03222B;
  font-family:var(--font-display);font-weight:600;font-size:15px;
  white-space:nowrap;
  box-shadow:0 12px 28px -14px rgba(43,200,194,.9);
  transition:transform .18s ease,background .2s ease,box-shadow .2s ease;
}
.btn:hover{background:#3FD6D0;transform:translateY(-2px);box-shadow:0 18px 34px -16px rgba(43,200,194,1)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.6;pointer-events:none}

.signup__msg{
  margin-top:12px;font-size:14.5px;line-height:1.45;
  color:var(--teal);min-height:0;
}
.signup.is-done .signup__form,
.signup.is-done .signup__note{display:none}
.signup.is-done .signup__msg{margin-top:16px;font-size:15.5px;font-weight:500}
.signup__msg:empty{display:none}
.signup__msg.is-error{color:#FF9E9E}

.signup__note{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:12px;font-size:13px;color:var(--ink-45);
}
.lock{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 8 Claim / Footer ---------- */
.claim{
  width:clamp(212px,min(23vw,30vh),320px);
  opacity:.96;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.45));
}
.foot{
  padding:0 var(--pad-x) calc(18px + env(safe-area-inset-bottom));
  background:var(--navy-900);
  text-align:center;
}
.foot p{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font-size:12.5px;color:var(--ink-45)}
.foot a{transition:color .2s ease}
.foot a:hover{color:var(--teal)}

/* ---------- 9 Motion ---------- */
.reveal{animation:rise .7s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .hero__bg{transform:none}
}

/* ---------- 10 Responsive ---------- */
@media (max-width:1024px){
  .tile{width:clamp(92px,13vw,112px)}
}

@media (max-width:760px){
  .topbar{padding-block:16px}
  .topbar__brand{display:block}
  .burger{display:flex}

  .hero{
    display:block;
    padding:calc(84px + env(safe-area-inset-top)) 18px 34px;
    min-height:auto;
  }
  .hero__bg{
    inset:0 0 auto 0;
    height:var(--hero-mobile-h);
    background-position:24% 60%;
    animation:none;
    transform:none;
  }
  .hero__scrim{
    inset:0 0 auto 0;
    height:calc(var(--hero-mobile-h) + 2px);
    background:
      linear-gradient(180deg,rgba(4,18,38,.72) 0%,rgba(4,18,38,.22) 30%,rgba(4,18,38,.30) 58%,rgba(4,22,46,.86) 88%,var(--navy-900) 100%);
  }
  .hero__inner{
    max-width:520px;
    margin-inline:auto;
    gap:22px;
    text-align:left;
    align-items:stretch;
  }

  .hero__copy{
    align-items:flex-start;
    gap:12px;
    /* Text bleibt im Foto-Bereich, Kacheln beginnen darunter */
    min-height:calc(var(--hero-mobile-h) - 104px);
  }
  .hero__logo{display:none}
  .hero__title{font-size:clamp(2.1rem,10vw,2.9rem)}
  .hero__script{font-size:clamp(1.35rem,6.2vw,1.8rem)}
  .hero__lede{font-size:15.5px;max-width:34ch}

  /* Kacheln: 3 Spalten × 2 Reihen, Label in der Kachel */
  .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .tile{
    width:auto;
    gap:10px;
    padding:18px 6px 15px;
    border-radius:var(--r-lg);
    background:var(--glass);
    border:1px solid var(--glass-line);
    -webkit-backdrop-filter:blur(16px) saturate(130%);
    backdrop-filter:blur(16px) saturate(130%);
  }
  .tile__box{
    width:auto;aspect-ratio:auto;
    background:none;border:0;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .tile:hover .tile__box{transform:none;background:none}
  .tile:active{border-color:var(--glass-line-hi)}
  .ico{width:29px}
  .tile__label{font-size:12.5px;text-align:center;line-height:1.2}

  .signup{width:100%;padding:24px 20px 20px;text-align:center}
  .signup__form{flex-direction:column;gap:12px;margin-top:20px}
  .btn{width:100%;padding:16px 20px}
  .claim{width:min(300px,78%);margin-inline:auto}
}

@media (max-width:400px){
  .tiles{gap:10px}
  .tile{padding:15px 4px 12px}
  .tile__label{font-size:11.5px}
  .hero__lede{font-size:15px}
}

/* Sehr flache Fenster (Landscape-Handys) */
@media (max-height:620px) and (min-width:761px){
  .hero{min-height:auto;padding-top:96px;padding-bottom:48px}
  .hero__logo{width:190px}
}