/* wsa-ecosondas.com — Übergangsseite. Gemeinsames Stylesheet für ES und EN. */

/* ---------- Schriften (lokal, kein Drittanbieter-Request) ---------- */
@font-face{
  font-family:Inter;
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url(/fonts/inter-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter Tight";
  font-style:normal;
  font-weight:700 800;
  font-display:swap;
  src:url(/fonts/inter-tight-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- Farbtokens ----------
   Kontraste sind gegen WCAG AA geprüft: alle Textfarben erreichen mindestens
   4.5:1 auf ihrem Hintergrund, grosse Schrift mindestens 3:1. */
:root{
  color-scheme:light dark;

  --bg:#ffffff;
  --ink:#0f172a;          /* 17.4:1 auf --bg */
  --ink-soft:#475569;     /*  8.6:1 */
  --ink-faint:#64748b;    /*  4.8:1 */
  --line:#e2e8f0;

  --accent:#0d9488;       /* nur grosse Schrift und Icons */
  --accent-text:#0f766e;  /*  5.0:1 — kleine Schrift */
  --cta-bg:#0f766e;
  --cta-bg-hover:#115e59;
  --cta-fg:#ffffff;
  --cta-shadow:13,148,136;

  --glow:rgba(20,184,166,.13);
  --ping:#14b8a6;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#070b11;
    --ink:#f1f5f9;
    --ink-soft:#b6c2d1;
    --ink-faint:#8b9bb0;   /* 7.0:1 auf --bg */
    --line:#1c2734;

    --accent:#2dd4bf;
    --accent-text:#5eead4;
    --cta-bg:#14b8a6;
    --cta-bg-hover:#2dd4bf;
    --cta-fg:#04211e;
    --cta-shadow:0,0,0;

    --glow:rgba(20,184,166,.16);
    --ping:#14b8a6;
  }
}

/* ---------- Grundgeruest ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ---------- Sonar-Ping im Hintergrund ---------- */
.ambient{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:radial-gradient(60rem 40rem at 50% 38%,var(--glow),transparent 70%);
}
.ambient svg{
  position:absolute;
  left:50%;
  top:38%;
  width:min(140vw,72rem);
  height:auto;
  transform:translate(-50%,-50%);
  opacity:.5;
}
.ambient circle{
  fill:none;
  stroke:var(--ping);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  transform-origin:400px 400px;
  opacity:0;
}
@media (prefers-reduced-motion:no-preference){
  .ambient circle{animation:ping 6s ease-out infinite}
  .ambient circle:nth-child(2){animation-delay:1.5s}
  .ambient circle:nth-child(3){animation-delay:3s}
  .ambient circle:nth-child(4){animation-delay:4.5s}
  @keyframes ping{
    0%{opacity:0;transform:scale(.35)}
    18%{opacity:.55}
    100%{opacity:0;transform:scale(1)}
  }
}
/* Ohne Animation bleiben zwei ruhige Ringe stehen statt eines leeren Feldes. */
@media (prefers-reduced-motion:reduce){
  .ambient circle:nth-child(1){opacity:.35;transform:scale(.6)}
  .ambient circle:nth-child(3){opacity:.2;transform:scale(1)}
}

/* ---------- Rahmen ---------- */
.shell{
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:60rem;
  margin:0 auto;
  padding:1.5rem 1.5rem 0;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  font-size:.8125rem;
  color:var(--ink-faint);
}
.domain{letter-spacing:.02em}
.langs{display:flex;align-items:center;gap:.5rem}
.langs a{
  color:var(--ink-faint);
  text-decoration:none;
  padding:.15rem .1rem;
  border-bottom:1px solid transparent;
  transition:color .15s,border-color .15s;
}
.langs a:hover{color:var(--ink)}
.langs a[aria-current="true"]{
  color:var(--ink);
  border-bottom-color:var(--accent);
}
.langs .sep{color:var(--line)}

/* ---------- Hero ---------- */
main{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:3rem 0;
}

.eyebrow{
  display:inline-block;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent-text);
  margin:0 0 2rem;
}

h1{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.75rem;
  margin:0 0 1.75rem;
  font-weight:400;
  font-size:1rem;
  line-height:1;
}
h1 .from{
  font-size:clamp(1rem,3.4vw,1.375rem);
  font-weight:500;
  color:var(--ink-faint);
  letter-spacing:-.01em;
}
h1 .to{
  font-family:"Inter Tight",Inter,system-ui,sans-serif;
  font-size:clamp(2.75rem,11vw,5.5rem);
  font-weight:800;
  letter-spacing:-.035em;
  color:var(--ink);
}
h1 .ref{color:var(--accent)}
.arrow{
  width:1.125rem;
  height:1.125rem;
  color:var(--accent);
  flex:none;
}

.lead{
  max-width:34rem;
  margin:0 0 2.5rem;
  font-size:clamp(1rem,2.6vw,1.125rem);
  color:var(--ink-soft);
  text-wrap:balance;
}
.lead strong{font-weight:600;color:var(--ink)}

.cta{
  display:inline-flex;
  align-items:center;
  gap:.625rem;
  background:var(--cta-bg);
  color:var(--cta-fg);
  font-size:1rem;
  font-weight:600;
  text-decoration:none;
  padding:.9375rem 1.75rem;
  border-radius:.5rem;
  box-shadow:0 1px 2px rgba(var(--cta-shadow),.2),0 8px 24px -8px rgba(var(--cta-shadow),.45);
  transition:background .15s,transform .15s,box-shadow .15s;
}
.cta:hover{
  background:var(--cta-bg-hover);
  transform:translateY(-1px);
  box-shadow:0 1px 2px rgba(var(--cta-shadow),.2),0 12px 28px -8px rgba(var(--cta-shadow),.55);
}
.cta:active{transform:translateY(0)}
.cta svg{width:1.0625rem;height:1.0625rem;flex:none}
@media (prefers-reduced-motion:reduce){
  .cta{transition:background .15s}
  .cta:hover{transform:none}
}

.services{
  margin:2.5rem 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:.5rem .875rem;
  font-size:.8125rem;
  color:var(--ink-faint);
}
.services li{display:flex;align-items:center;gap:.875rem}
.services li::after{
  content:"";
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--line);
}
.services li:last-child::after{display:none}

/* ---------- Fuss ---------- */
footer{
  position:relative;
  z-index:1;
  width:100%;
  max-width:60rem;
  margin:0 auto;
  padding:1.5rem;
  border-top:1px solid var(--line);
  font-size:.8125rem;
  color:var(--ink-faint);
  text-align:center;
}
footer a{color:var(--ink-soft);text-decoration:none}
footer a:hover{color:var(--ink);text-decoration:underline}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:.25rem;
}

/* ---------- Breakpoints ---------- */
@media (max-width:39.999rem){
  /* Umbricht die Leistungsliste, wuerden am Zeilenende Trennpunkte
     baumeln. Unterhalb dieser Breite traegt der Abstand allein. */
  .services li::after{display:none}
  .services{gap:.375rem 1.25rem}
}
@media (min-width:40rem){
  h1{flex-direction:row;gap:1.25rem}
  .arrow{transform:rotate(-90deg)}
}