/* ==========================================================================
   iQLASE Landingpage – Stylesheet
   Farben, Typo und Maße aus dem Figma-Design (desktop forsch, 1920).
   ========================================================================== */

/* ---- Schriften (lokal, kein Google-CDN) ---- */
@font-face{font-family:"Inter";src:url("../fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("../fonts/inter-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Space Grotesk";src:url("../fonts/spacegrotesk-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Space Grotesk";src:url("../fonts/spacegrotesk-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}

/* ---- Design-Tokens ---- */
:root{
  --bg-page:#ecf6f5;
  --grad-top:#CAD9D8;
  --grad-bottom:#E2EAEA;
  --teal:#04595b;
  --orange:#ff630c;
  --orange-card:#e85300;
  --heading:#cc5414;
  --black:#000;
  --white:#fff;

  /* Typo-Skala: fluid zwischen Mobile und Desktop (Desktop-Zielwerte aus Figma) */
  --h1:clamp(34px,4.6vw,64px);
  --h2:clamp(26px,3.2vw,44px);
  --sub:clamp(19px,1.7vw,24px);
  --body:clamp(16px,1.15vw,18px);
  --button:clamp(19px,1.7vw,24px);
  --textlink:clamp(16px,1.15vw,18px);

  --maxband:1920px;   /* äußere Bandbreite mit Seiten-Hintergrund */
  --maxcontent:1440px;/* Content-Spalte */
  --radius:16px;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;font-family:"Inter",system-ui,Arial,sans-serif;color:var(--black);
  /* Seiten-Hintergrund: Verlauf, am Viewport verankert */
  background:linear-gradient(180deg,var(--grad-top) 0%,var(--grad-bottom) 100%) fixed;
  line-height:1.4;}
img{display:block;max-width:100%;}
a{color:inherit;}

/* ---- Band + Content-Container ---- */
.page{max-width:var(--maxband);margin:0 auto;background:var(--bg-page);position:relative;overflow:hidden;}
.inner{width:min(var(--maxcontent),100% - 40px);margin-inline:auto;}

/* ---- Sektionen: vertikale Abstände ---- */
.section{position:relative;z-index:1;padding-block:36px 30px;}
.section--lang{padding-block:24px 16px;}
.section--presse{padding-block:36px 48px;}

/* ---- Überschriften & Text ---- */
h1,h2{margin:0;color:var(--heading);font-family:"Space Grotesk",sans-serif;line-height:1.1;}
h1{font-weight:300;font-size:var(--h1);}
h2{font-weight:400;font-size:var(--h2);}
.sub{margin:0;color:var(--teal);font-weight:700;font-size:var(--sub);}
.body{margin:0;font-size:var(--body);max-width:892px;}
.stack{display:flex;flex-direction:column;gap:24px;align-items:flex-start;}

/* ---- Hero / Cover ---- */
.cover{position:relative;width:100%;aspect-ratio:1920 / 668;background:var(--bg-page);overflow:hidden;}
.cover video,.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.cover .cover__poster{display:none;}

/* ---- Sprachwahl ---- */
.lang{display:flex;gap:24px;justify-content:flex-end;font-size:var(--button);}
.lang a,.lang span{text-decoration:none;}
.lang .is-active{color:var(--teal);font-weight:400;}
.lang .is-link{color:var(--orange);font-weight:700;transition:color .2s ease;}
.lang .is-link:hover,.lang .is-link:focus-visible{color:var(--heading);}
.lang .sep{color:var(--teal);font-weight:400;}

/* ---- Benefits ---- */
.benefits__tiles{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:center;width:100%;}
.tile{flex:1 1 0;min-width:220px;max-width:455px;display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:32px 20px 28px;border:2px solid var(--white);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(245,241,231,.8) 0%,rgba(219,204,172,.8) 100%);}
.tile__icon{height:80px;display:flex;align-items:center;justify-content:center;}
.tile__icon img{height:100%;width:auto;}
.tile__label{margin:0;color:var(--teal);font-weight:700;font-size:var(--sub);letter-spacing:.48px;text-align:center;}

/* ---- Forward (Weiche) ---- */
.section--forward{background:rgba(172,210,211,.4);}
.cards{display:flex;flex-wrap:wrap;gap:40px;justify-content:center;width:100%;}
.card{flex:1 1 0;min-width:260px;display:flex;flex-direction:column;align-items:center;gap:24px;
  padding:16px 16px 24px;border:2px solid var(--white);border-radius:var(--radius);
  background:linear-gradient(180deg,#d3c5a9 0%,#e4ddcc 100%);text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease;}
.card:hover,.card:focus-visible{transform:translateY(-4px);box-shadow:0 12px 28px rgba(4,89,91,.18);outline:none;}
.card__img{width:100%;aspect-ratio:606 / 341;border-radius:6px;overflow:hidden;}
.card__img img{width:100%;height:100%;object-fit:cover;}
.card__link{display:flex;align-items:center;gap:12px;color:var(--orange-card);font-weight:700;font-size:var(--button);letter-spacing:.48px;text-transform:capitalize;text-align:center;transition:color .2s ease;}
.card__link svg{flex:none;width:22px;height:19px;}
.card:hover .card__link,.card:focus-visible .card__link{color:var(--heading);}

/* ---- Presse / News ---- */
.news{display:flex;flex-wrap:wrap;gap:40px;width:100%;}
.news__card{flex:1 1 0;min-width:240px;background:var(--white);border-radius:var(--radius);
  display:flex;flex-direction:column;gap:8px;justify-content:center;padding:16px 20px;text-decoration:none;}
.news__card p{margin:0;font-weight:700;}
.news__title{color:var(--black);font-size:var(--body);}
.news__link{color:var(--orange);font-size:var(--textlink);transition:color .2s ease;}
.news__card:hover .news__link,.news__card:focus-visible .news__link{color:var(--heading);}
.news__spacer{flex:1 1 0;min-width:240px;}

/* ---- Footer ---- */
.footer{background:var(--white);}
.footer__wrap{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:flex-end;padding-block:8px;}
.footer__col{flex:1 1 0;min-width:220px;}
.footer__logo{width:190px;max-width:100%;margin-bottom:16px;}
.footer address{font-style:normal;font-size:18px;line-height:2;padding-inline:4px;}
.footer .mail{font-weight:700;color:var(--orange);text-decoration:none;transition:color .2s ease;}
.footer .mail:hover,.footer .mail:focus-visible{color:var(--heading);}
.footer__imprint{font-size:18px;line-height:2;}
.footer__imprint a{display:block;font-weight:700;color:var(--orange);text-decoration:none;transition:color .2s ease;}
.footer__imprint a:hover,.footer__imprint a:focus-visible{color:var(--heading);}
.footer__imprint .copy{color:var(--black);}
.footer__social{min-width:160px;} /* bewusst frei – reserviert für Social Icons */

/* ---- Parallax ---- */
.parallax{position:absolute;top:560px;left:50%;width:min(3382px,180%);transform:translateX(-50%);
  z-index:0;pointer-events:none;opacity:.9;}
.parallax img{width:100%;height:auto;}

/* ---- Scroll-Reveal: sichtbar per Default; nur bei aktivem JS animiert ---- */
.reveal{opacity:1;transform:none;}
.js .reveal{opacity:0;transform:translateY(24px);}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease;}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
  .reveal,.js .reveal{opacity:1;transform:none;}
  .parallax{transform:translateX(-50%);}
}

/* ---- Breakpoints (Anker: Tablet 768, Mobile 390) ---- */
@media (max-width:768px){
  .section{padding-block:28px 24px;}
  .footer__wrap{flex-direction:column;align-items:stretch;}
  .footer__social{display:none;} /* leer – auf Mobile ausgeblendet */
}
@media (max-width:560px){
  .benefits__tiles{flex-direction:column;align-items:stretch;}
  .tile{max-width:none;}
  .cards{flex-direction:column;}
  .news{flex-direction:column;}
  .news__spacer{display:none;}
  .tile__label{white-space:normal;}
}