/* language: CSS, file: public/welcome.css, target: Tankary Startseite
   Setzt auf den Variablen aus styles.css auf – eigenes Layout für die Landing. */
.landing{ --maxw:1180px; }
.landing::before{
  background:
    radial-gradient(1100px 720px at 8% -8%, rgba(8,145,178,.30), transparent 60%),
    radial-gradient(900px 620px at 96% 2%, rgba(16,185,129,.20), transparent 60%),
    radial-gradient(1200px 900px at 46% 118%, rgba(14,116,144,.26), transparent 62%),
    linear-gradient(180deg, #03070e 0%, #040b14 48%, #03070e 100%);
}
.landing::after{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.32;
  background-image:linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 6%, #000 0%, transparent 58%);
  -webkit-mask-image:radial-gradient(circle at 50% 6%, #000 0%, transparent 58%);
}
.landing .land-nav, .landing main, .landing .land-footer{ position:relative; z-index:1; }

/* ---------- Blasen ---------- */
.land-bubbles{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.land-bubbles span{
  position:absolute; bottom:-14vh; display:block; border-radius:50%;
  border:1px solid rgba(103,232,249,.22); background:radial-gradient(circle at 34% 30%, rgba(103,232,249,.16), transparent 68%);
  animation:rise 26s linear infinite;
}
.land-bubbles span:nth-child(1){ left:6%;  width:16px; height:16px; animation-duration:24s; animation-delay:0s; }
.land-bubbles span:nth-child(2){ left:18%; width:9px;  height:9px;  animation-duration:31s; animation-delay:5s; }
.land-bubbles span:nth-child(3){ left:37%; width:22px; height:22px; animation-duration:38s; animation-delay:9s; }
.land-bubbles span:nth-child(4){ left:62%; width:12px; height:12px; animation-duration:28s; animation-delay:3s; }
.land-bubbles span:nth-child(5){ left:78%; width:18px; height:18px; animation-duration:34s; animation-delay:12s; }
.land-bubbles span:nth-child(6){ left:91%; width:8px;  height:8px;  animation-duration:22s; animation-delay:7s; }
@keyframes rise{
  0%{ transform:translate3d(0,0,0) scale(.9); opacity:0; }
  12%{ opacity:.9; }
  85%{ opacity:.55; }
  100%{ transform:translate3d(14px,-118vh,0) scale(1.25); opacity:0; }
}

/* ---------- Navigation ---------- */
.land-nav{
  position:sticky; top:0; z-index:20;
  padding:.75rem max(1rem, calc((100vw - var(--maxw)) / 2 + 1rem));
  display:flex; align-items:center; gap:1.2rem;
  backdrop-filter:blur(16px) saturate(130%); -webkit-backdrop-filter:blur(16px) saturate(130%);
  background:linear-gradient(180deg, rgba(4,10,18,.92), rgba(4,10,18,.55));
  border-bottom:1px solid rgba(255,255,255,.07);
}
.land-brand{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--display); font-weight:700; }
.land-mark{
  width:2.1rem; height:2.1rem; display:grid; place-items:center; border-radius:13px;
  color:#03151a; background:linear-gradient(135deg,#22d3ee,#0ea5a4 58%,#34d399);
  box-shadow:0 10px 24px -12px rgba(34,211,238,.9), inset 0 1px 0 rgba(255,255,255,.5);
}
.land-mark svg{ width:1.18rem; height:1.18rem; }
.land-word{ font-size:1.06rem; letter-spacing:-.02em; color:#eaf6ff; }
.land-word span{
  background:linear-gradient(100deg,#67e8f9,#34d399); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.land-links{ display:flex; gap:.25rem; margin-left:auto; }
.land-links a{
  padding:.42rem .68rem; border-radius:10px; font-size:.82rem; font-weight:600; color:#a9c0d3;
  transition:color .18s, background .18s;
}
.land-links a:hover{ color:#eaf6ff; background:rgba(255,255,255,.06); }
.land-nav-actions{ display:flex; align-items:center; gap:.45rem; }
.land-nav-actions .btn-sm{ padding:.46rem .8rem; font-size:.78rem; }
@media (max-width:820px){ .land-links{ display:none; } .land-nav-actions{ margin-left:auto; } }

/* ---------- Hero ---------- */
main{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1rem,3vw,1.6rem); }
.hero{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.6rem,4vw,3.4rem); align-items:center;
  padding:clamp(2.4rem,6vw,4.2rem) 0 clamp(1.6rem,3vw,2.4rem);
}
.hero-kicker{
  display:inline-flex; align-items:center; gap:.5rem; width:fit-content;
  padding:.3rem .7rem; border-radius:999px; font-size:.72rem; font-weight:600; color:#a7f3d0;
  border:1px solid rgba(52,211,153,.3); background:rgba(52,211,153,.1);
}
.pulse-dot{ width:.45rem; height:.45rem; border-radius:50%; background:#34d399; box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:pulse 2.4s ease-out infinite; }
.pulse-aqua{ background:#22d3ee; box-shadow:0 0 0 0 rgba(34,211,238,.6); }
@keyframes pulse{ 70%{ box-shadow:0 0 0 7px rgba(52,211,153,0); } 100%{ box-shadow:0 0 0 0 rgba(52,211,153,0); } }

.hero h1{
  margin:1.1rem 0 0; font-family:var(--display); font-weight:700;
  font-size:clamp(2.5rem,6.2vw,4.5rem); line-height:.98; letter-spacing:-.035em; color:#f2fbff;
  text-wrap:balance;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(96deg,#67e8f9 4%,#22d3ee 34%,#34d399 78%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-lead{ margin-top:1.05rem; max-width:46ch; font-size:clamp(.92rem,1.2vw,1.02rem); line-height:1.62; color:#a6bccc; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
.btn-lg{ padding:.78rem 1.15rem; font-size:.88rem; border-radius:15px; }
.hero-note{ margin-top:.7rem; font-size:.72rem; color:#6c8399; }
.hero-facts{ display:flex; gap:clamp(1.1rem,3vw,2.2rem); margin:1.8rem 0 0; padding-top:1.3rem; border-top:1px solid rgba(255,255,255,.08); }
.hero-facts div{ display:flex; flex-direction:column; gap:.1rem; }
.hero-facts dt{ font-family:var(--display); font-size:1.28rem; font-weight:600; color:#eaf6ff; font-variant-numeric:tabular-nums; }
.hero-facts dd{ margin:0; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; color:#7d94a8; }

/* ---------- Becken-Karte im Hero ---------- */
.hero-visual{ position:relative; }
.tank-card{ padding:1rem 1rem 1.1rem; border-radius:24px; }
.tank-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; }
.tank-name{ font-family:var(--display); font-size:.98rem; font-weight:600; color:#eaf6ff; margin-top:.1rem; }
.tank-thumbs{ display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem; margin-top:.85rem; }
.tank-thumbs figure{
  position:relative; margin:0; aspect-ratio:1/1; border-radius:13px; overflow:hidden;
  background:linear-gradient(150deg, rgba(34,211,238,.14), rgba(6,20,30,.5));
  border:1px solid rgba(255,255,255,.08);
}
.tank-thumbs figure::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(3,7,14,0) 58%, rgba(3,7,14,.34));
}
.tank-thumbs img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .35s ease; }
.tank-thumbs img.is-ready{ opacity:1; }
.tank-thumbs .shimmer{
  position:absolute; inset:0; background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.09) 50%, transparent 80%);
  background-size:220% 100%; animation:sweep 1.5s linear infinite;
}
@keyframes sweep{ to{ background-position:-220% 0; } }
.tank-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.85rem; flex-wrap:wrap; }

.float-chip{
  position:absolute; padding:.5rem .75rem; border-radius:14px; font-size:.78rem; font-weight:600; color:#e6f6ff;
  display:flex; flex-direction:column; gap:.05rem; line-height:1.2; pointer-events:none;
  background:rgba(6,16,26,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 22px 40px -24px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.09);
  animation:drift 7s ease-in-out infinite;
}
.float-a{ top:-1.9rem; right:-1.4rem; }
.float-b{ bottom:-2.7rem; right:1.2rem; left:auto; animation-delay:-3.2s; }
@keyframes drift{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@media (max-width:1180px){ .float-a{ right:-.4rem; } .float-b{ left:-.4rem; } }
@media (max-width:980px){
  .hero{ grid-template-columns:minmax(0,1fr); }
  .float-chip{ display:none; }
}

/* ---------- Sektionen ---------- */
.land-section{ padding:clamp(2.4rem,5vw,4rem) 0; }
.section-head{ margin-bottom:1.7rem; }
.section-head.split{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; }
.eyebrow{ font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#4fd1c5; }
.section-head h2{ margin-top:.5rem; font-size:clamp(1.5rem,3.2vw,2.15rem); line-height:1.14; letter-spacing:-.03em; color:#f1faff; }
.section-head h2 .muted{ color:#7f97ab; font-weight:500; }
.section-lead{ margin-top:.65rem; max-width:58ch; font-size:.9rem; line-height:1.6; color:#9db1c2; }

/* ---------- Features ---------- */
.feature-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.85rem; }
@media (max-width:980px){ .feature-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .feature-grid{ grid-template-columns:minmax(0,1fr); } }
.feature{ padding:1.15rem 1.1rem 1.25rem; border-radius:20px; transition:transform .22s, border-color .22s, box-shadow .22s; }
.feature:hover{ transform:translateY(-3px); border-color:rgba(34,211,238,.3); box-shadow:0 34px 60px -40px rgba(34,211,238,.55); }
.feature-ico{ width:2.3rem; height:2.3rem; display:grid; place-items:center; border-radius:13px; margin-bottom:.8rem; }
.feature-ico svg{ width:1.18rem; height:1.18rem; }
.ico-aqua{ color:#a5f3fc; background:rgba(34,211,238,.13); border:1px solid rgba(34,211,238,.26); }
.ico-reef{ color:#a7f3d0; background:rgba(52,211,153,.13); border:1px solid rgba(52,211,153,.26); }
.ico-violet{ color:#ddd6fe; background:rgba(167,139,250,.14); border:1px solid rgba(167,139,250,.28); }
.feature h3{ font-family:var(--display); font-size:.98rem; font-weight:600; color:#eaf6ff; }
.feature p{ margin-top:.4rem; font-size:.82rem; line-height:1.58; color:#93a9bb; }

/* ---------- Katalog-Galerie ---------- */
.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:.7rem; }
.art-card{
  position:relative; aspect-ratio:4/5; border-radius:16px; overflow:hidden; margin:0;
  background:linear-gradient(155deg, rgba(34,211,238,.12), rgba(6,20,30,.62));
  border:1px solid rgba(255,255,255,.08);
}
.art-card img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .55s ease, transform .6s ease; }
.art-card img.is-ready{ opacity:1; }
.art-card:hover img.is-ready{ transform:scale(1.045); }
.art-card figcaption{
  position:absolute; inset:auto 0 0 0; padding:.8rem .7rem .62rem;
  background:linear-gradient(0deg, rgba(3,7,14,.92), rgba(3,7,14,.55) 52%, transparent);
}
.art-card .art-name{ font-family:var(--display); font-size:.82rem; font-weight:600; color:#f0faff; line-height:1.2; }
.art-card .art-sci{ margin-top:.12rem; font-size:.66rem; font-style:italic; color:#8ba3b6; }
.art-card .shimmer{
  position:absolute; inset:0; background:linear-gradient(100deg, transparent 22%, rgba(255,255,255,.08) 50%, transparent 78%);
  background-size:220% 100%; animation:sweep 1.5s linear infinite;
}


/* ---------- Community-Band ---------- */
.band-inner{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:1.6rem; align-items:center;
  padding:clamp(1.4rem,3.4vw,2.2rem); border-radius:26px;
  background:linear-gradient(140deg, rgba(34,211,238,.10), rgba(52,211,153,.06) 46%, rgba(6,20,30,.5));
}
.band-inner .section-lead{ margin-bottom:1.1rem; }
.band-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.band-list li{ display:flex; align-items:center; gap:.6rem; font-size:.86rem; color:#c6dae8; }
.tick{ position:relative; flex:0 0 auto; width:1.15rem; height:1.15rem; border-radius:50%;
  background:rgba(52,211,153,.16); border:1px solid rgba(52,211,153,.34); }
.tick::after{ content:''; position:absolute; left:.34rem; top:.24rem; width:.34rem; height:.58rem;
  border-right:2px solid #6ee7b7; border-bottom:2px solid #6ee7b7; transform:rotate(38deg); }
@media (max-width:860px){ .band-inner{ grid-template-columns:minmax(0,1fr); } }

/* ---------- FAQ ---------- */
.faq{ display:flex; flex-direction:column; gap:.6rem; }
.faq details{ padding:.95rem 1.1rem; border-radius:18px; }
.faq summary{
  cursor:pointer; list-style:none; font-family:var(--display); font-size:.92rem; font-weight:600; color:#eaf6ff;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; font-size:1.15rem; font-weight:400; color:#67e8f9; }
.faq details[open] summary::after{ content:'–'; }
.faq details p{ margin-top:.6rem; font-size:.84rem; line-height:1.6; color:#98aec0; }

/* ---------- Abschluss-CTA ---------- */
.final-cta{ padding-bottom:clamp(2rem,4vw,3rem); }
.cta-box{
  text-align:center; padding:clamp(1.8rem,4vw,3rem) clamp(1.2rem,3vw,2.4rem); border-radius:28px;
  background:radial-gradient(700px 320px at 50% 0%, rgba(34,211,238,.16), transparent 70%), rgba(255,255,255,.03);
}
.cta-box h2{ font-size:clamp(1.5rem,3.4vw,2.2rem); letter-spacing:-.03em; color:#f2fbff; line-height:1.15; }

/* ---------- Footer ---------- */
.land-footer{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1rem,3vw,1.6rem) 2rem; }
.footer-main{
  display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,.8fr)); gap:1.4rem;
  padding:1.6rem 0 1.4rem; border-top:1px solid rgba(255,255,255,.08);
}
.footer-brand p{ margin-top:.7rem; line-height:1.6; }
.footer-col{ display:flex; flex-direction:column; gap:.42rem; }
.footer-col a{ font-size:.82rem; color:#9db1c2; transition:color .16s; width:fit-content; }
.footer-col a:hover{ color:#67e8f9; }
.footer-head{ font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#6f879b; margin-bottom:.15rem; }
.footer-legal{ padding:.9rem 1.05rem; border-radius:16px; margin-top:.6rem; scroll-margin-top:90px; }
.footer-legal p.tiny{ margin-top:.35rem; line-height:1.65; }
.legal-slot{ color:#fecdd3; border-bottom:1px dashed rgba(251,113,133,.55); padding-bottom:1px; }
.legal-slot.is-filled{ color:inherit; border-bottom:0; padding-bottom:0; }
.legal-slot a{ color:#67e8f9; text-decoration:none; border-bottom:1px solid rgba(103,232,249,.35); }
.legal-slot a:hover{ border-bottom-color:#67e8f9; }
.footer-copy{ margin-top:1.2rem; text-align:center; }
@media (max-width:820px){
  .footer-main{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .gallery{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
  .tank-thumbs{ grid-template-columns:repeat(2,1fr); }
  .hero-facts{ gap:1rem; }
  .footer-main{ grid-template-columns:minmax(0,1fr); }
  .land-nav-actions .btn-ghost{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .land-bubbles, .float-chip, .pulse-dot, .tank-thumbs .shimmer, .art-card .shimmer{ animation:none !important; }
  .pulse-dot{ box-shadow:0 0 0 3px rgba(52,211,153,.18); }
  .feature:hover{ transform:none; }
  .art-card:hover img.is-ready{ transform:none; }
}

.cta-box .section-lead{ margin:.7rem auto 1.4rem; }