/* ===========================================================
   HYLA importer landing page
   Own stylesheet, no framework, no external resources.
   Colours, fonts and logo follow HYLA Styleguide June 2026:
   Coral #DE6640, Anthracite #343434, Cool grey #F0F0F0, Pure white.
   Layout follows the "Elegant / Technical" ratio (p. 5): white
   dominant, anthracite structure, coral as accent only.
   =========================================================== */

@font-face{font-family:"Hyla Sans";src:url("../fonts/Hyla-Sans-Regular.woff2") format("woff2"),url("../fonts/Hyla-Sans-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hyla Sans";src:url("../fonts/Hyla-Sans-Bold.woff2") format("woff2"),url("../fonts/Hyla-Sans-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Hyla Headline";src:url("../fonts/Hyla-Headline-Regular.woff2") format("woff2"),url("../fonts/Hyla-Headline-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hyla Headline";src:url("../fonts/Hyla-Headline-Bold.woff2") format("woff2"),url("../fonts/Hyla-Headline-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* Corporate colours, HYLA Styleguide June 2026, page 4.
     No other colours are used: greys are Anthracite with opacity. */
  --coral:#de6640;          /* HYLA Coral      */
  --ink:#343434;            /* HYLA Anthracite */
  --grey:#f0f0f0;           /* HYLA Cool grey  */
  --white:#fff;             /* Pure white      */
  --ink-soft:rgba(52,52,52,.68);
  --line:rgba(52,52,52,.14);
  --soft:var(--grey);
  --wrap:1200px;
  --sans:"Hyla Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --head:"Hyla Headline","Hyla Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--head);font-weight:400;line-height:1.12;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(2.3rem,5.5vw,4rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
p{margin:0 0 1em}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.center{text-align:center}
.center .intro,.center .lead{margin-left:auto;margin-right:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px}

.eyebrow{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--coral);margin:0 0 12px;font-weight:700}
.intro{color:var(--ink-soft);max-width:60ch}
.lead{font-size:1.1rem;max-width:56ch}
.claim{font-family:var(--head);font-size:1.25rem;color:var(--coral);margin:0 0 .6em}

/* ------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;text-decoration:none;
  border:1px solid var(--ink);padding:14px 26px;font-size:.9rem;font-weight:700;letter-spacing:.02em;
  border-radius:2px;cursor:pointer;font-family:var(--sans);transition:background .18s,border-color .18s,color .18s}
.btn:hover{background:var(--coral);border-color:var(--coral)}
.btn-light{background:#fff;color:var(--ink);border-color:#fff}
.btn-light:hover{background:var(--coral);border-color:var(--coral);color:#fff}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--soft);border-color:var(--ink);color:var(--ink)}
.ico{width:15px;height:15px;flex:0 0 auto}
.linklike{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline}

/* -------------------------------------------------------------- header
   Anthracite bar with the official white wordmark - the standard
   pairing from the styleguide. Buttons switch to the light variants. */
.site-head{position:sticky;top:0;z-index:60;background:rgba(52,52,52,.96);
  backdrop-filter:saturate(1.2) blur(8px)}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:94px}
.brand img{height:46px;width:auto}
.head-nav{display:flex;align-items:center;gap:10px}
.head-nav .btn{padding:11px 20px;font-size:.82rem;background:#fff;color:var(--ink);border-color:#fff}
.head-nav .btn:hover{background:var(--coral);border-color:var(--coral);color:#fff}
.head-nav .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.head-nav .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;min-height:78vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--ink)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(52,52,52,.15) 0%,rgba(52,52,52,.72) 100%)}
/* width:100% ist noetig, weil .hero ein Flex-Container ist: ohne das ist
   .wrap hier ein Flex-Element, schrumpft auf seine Inhaltsbreite und wird
   von margin:0 auto mittig gesetzt - der Text stand dadurch 196 px weiter
   rechts als jeder andere Abschnitt. */
.hero-inner{position:relative;z-index:2;width:100%;padding-top:96px;padding-bottom:80px}
.hero h1{color:#fff;max-width:20ch}
.hero .eyebrow{color:var(--coral)}
.hero .claim{color:#fff;opacity:.92}
.hero .lead{color:var(--grey)}
.hero--plain{min-height:auto}
.hero--plain::after{display:none}

/* ------------------------------------------------------------ sections */
.sec{padding:92px 0}
.sec--soft{background:var(--soft)}
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.split--rev .fig{order:-1}
.fig{margin:0;position:relative;overflow:hidden;border-radius:3px;background:var(--soft)}
.fig img{width:100%;height:auto}
.fig--empty{display:flex;align-items:center;justify-content:center;min-height:220px;border:1px dashed var(--line);
  color:var(--ink-soft);font-size:.85rem;text-align:center;padding:20px}
.fig.product{background:transparent}
.fig.product img{object-fit:contain}

/* ---------------------------------------------------- AI disclosure mark
   The letters "AI" in Hyla Sans Bold, white, no background. Wording only
   appears on hover, on focus and in the caption, so the picture stays the
   hero. The file itself is swappable centrally. */
.ai-mark{position:absolute;right:14px;bottom:14px;z-index:3;width:17px;height:17px;
  display:flex;align-items:center;justify-content:center;
  /* Kein Hintergrund und kein Kreis mehr: die Kennzeichnung ist jetzt nur
     das weisse "AI". Die Lesbarkeit auf hellen Bildern macht der Schatten
     in der SVG-Datei selbst. */
  background:none;color:#fff;cursor:help}
/* Das Zeichen wird als <img> eingebunden, damit HYLA es zentral tauschen
   kann. Es muss deshalb ausdruecklich von den Bildregeln der Galerie und
   der Figuren ausgenommen werden - sonst erbt es deren Hoehe. */
.ai-mark svg,.ai-mark img{width:17px !important;height:17px !important;display:block;
  max-width:17px;object-fit:contain;flex:0 0 auto;transform:none !important;transition:none}
.ai-mark::after{content:attr(data-label);position:absolute;right:0;bottom:calc(100% + 8px);
  background:var(--ink);color:#fff;font-size:.68rem;letter-spacing:.04em;line-height:1.3;
  padding:6px 9px;border-radius:2px;white-space:nowrap;opacity:0;pointer-events:none;
  transform:translateY(3px);transition:opacity .16s,transform .16s}
.ai-mark:hover::after,.ai-mark:focus-visible::after{opacity:1;transform:translateY(0)}
/* inside the gallery the mark sits at the top, so the label opens downwards
   and stays inside the tile (the tile clips its overflow) */
.gal .ai-mark{bottom:auto;top:14px}
.gal .ai-mark::after{top:calc(100% + 8px);bottom:auto;transform:translateY(-3px)}
.gal .ai-mark:hover::after,.gal .ai-mark:focus-visible::after{transform:translateY(0)}
.ai-note{color:var(--grey);font-weight:400;text-transform:none;letter-spacing:0;font-size:.8em}
figcaption .ai-note{opacity:.85}

/* ------------------------------------------------------------- gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:40px}
.gal{position:relative}
.gal > img{width:100%;height:270px;object-fit:cover;transition:transform .45s ease}
.gal:hover > img{transform:scale(1.04)}
.gal figcaption{position:absolute;inset:auto 0 0 0;padding:14px 16px;color:#fff;font-size:.84rem;
  background:linear-gradient(0deg,rgba(52,52,52,.78),rgba(52,52,52,0))}
.gallery[data-count="1"]{grid-template-columns:minmax(0,720px);justify-content:center}
.gallery[data-count="1"] .gal > img{height:auto;max-height:520px}

/* ---------------------------------------------------------------- team */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:40px;margin-top:44px;text-align:center}
.member .portrait{margin-bottom:16px}
.member .portrait img{aspect-ratio:4/5;object-fit:cover;width:100%}
.member .portrait.fig--empty{aspect-ratio:4/5;min-height:0}
.member .name{font-family:var(--head);font-size:1.15rem;margin:0}
.member .role{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);margin:4px 0 10px;font-weight:700}
.member .bio{font-size:.92rem;color:var(--ink-soft);max-width:30ch;margin:0 auto}

/* ------------------------------------------------------------ features */
.features{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:44px;text-align:center}
.feature img{width:52px;height:52px;margin:0 auto 16px}
.feature p{font-size:.95rem;margin:0 auto;max-width:24ch;color:var(--ink)}

/* -------------------------------------------------------- certificates */
.certs{display:flex;flex-wrap:wrap;gap:52px;align-items:center;justify-content:center;margin-top:40px}
.certs img{height:66px;width:auto;opacity:.85}

/* ------------------------------------------------------------- contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:36px}
.ci{margin:0 0 22px}
.ci span{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
.ci a,.ci strong{font-size:1.05rem;font-weight:700;text-decoration:none;color:var(--ink)}
.ci a:hover{color:var(--coral)}
/* Untereinander: in der Kontaktspalte liest sich eine kurze Liste besser
   als eine Zeile, und lange Kanalnamen brechen nicht mehr um. */
.ci .social,.social{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  /* muss die Label-Regel ".ci span" ueberschreiben, sonst erben die Links
     Kapitaelchen und Sperrung der Ueberschrift */
  font-size:inherit;letter-spacing:normal;text-transform:none;color:inherit;margin-bottom:0}
.social a{font-size:1.05rem;font-weight:700;text-decoration:none;color:var(--ink)}
.social a:hover{color:var(--coral)}
.social a:hover{color:var(--coral)}
.map{margin-top:36px;border:1px solid var(--line);background:var(--soft);min-height:300px;display:flex;align-items:center;justify-content:center}
.map iframe{width:100%;height:340px;border:0;display:block;
  /* Dauerhaft Graustufen - so gehoert die Karte zum HYLA-Bild und Google
     faerbt nicht mit eigenen Gruen- und Blautoenen dagegen. Rein per CSS,
     keine API, kein Schluessel. */
  filter:grayscale(1) contrast(1.04)}
.map-ask{padding:32px;text-align:center;max-width:46ch}
.map-ask p{color:var(--ink-soft);font-size:.92rem}

/* ----------------------------------------------------------- final cta */
.final{position:relative;overflow:hidden;color:#fff;padding:118px 0;background:var(--ink)}
.final-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.final::after{content:"";position:absolute;inset:0;background:rgba(52,52,52,.72)}
.final .wrap{position:relative;z-index:2}
.final h2{color:#fff}
.final .intro{color:var(--grey);margin-bottom:30px}

/* ------------------------------------------------------ Marke im Abschluss */
/* Eigenes Band, damit die Bild-Wortmarke fuer sich steht. Untergrund weiss:
   Coral hat dort 3,45:1 - auf Cool Grey nur 3,03:1, dort wirkt die Marke matt.
   Auf Anthrazit ist der Messwert besser, optisch aber gedeckt. */
.brandmark{background:#fff;padding:64px 0;text-align:center}
.brandmark img{height:clamp(67px,9.6vw,125px);width:auto;display:inline-block}

/* -------------------------------------------------------------- footer */
.site-foot{background:var(--ink);color:rgba(255,255,255,.74);padding:52px 0;font-size:.9rem}
.foot{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;flex-wrap:wrap}
.foot p{margin:0}
.foot-logo{height:35px;width:auto;margin-bottom:12px}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a,.foot-links button{color:rgba(255,255,255,.74);text-decoration:none}
.foot-links a:hover,.foot-links button:hover{color:#fff}

/* ------------------------------------------------------- consent banner */
.consent{position:fixed;inset:auto 0 0 0;z-index:120;padding:18px;display:flex;justify-content:center}
.consent[hidden]{display:none}
.consent-box{background:#fff;border:1px solid var(--line);box-shadow:0 12px 40px rgba(52,52,52,.18);
  max-width:640px;padding:24px 26px;border-radius:3px}
.consent-box h2{font-size:1.15rem;margin-bottom:.4em}
.consent-box p{font-size:.9rem;color:var(--ink-soft);margin-bottom:18px}
.consent-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.consent-actions .btn{padding:11px 20px;font-size:.85rem}
.consent-more{font-size:.85rem;color:var(--ink-soft)}

/* ------------------------------------------------------------ responsive */
@media (max-width:900px){
  .split,.contact-grid{grid-template-columns:1fr;gap:34px}
  .split--rev .fig{order:0}
  .sec{padding:64px 0}
  .hero{min-height:72vh}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .head-inner{min-height:64px;gap:8px}
  .brand img{height:35px}
  .head-nav{gap:6px}
  .head-nav .btn{padding:8px 11px;font-size:.7rem;gap:6px}
  .head-nav .btn .ico{width:12px;height:12px}
  .gal > img{height:220px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* --------------------------------------------------------------- legal */
.legal-page{padding:64px 0 90px;max-width:820px}
.legal-page h1{font-size:clamp(1.9rem,4vw,2.6rem)}
.legal-page p{color:var(--ink-soft)}
/* Zentral gepflegter Pflichtteil des Impressums - optisch abgesetzt, damit
   erkennbar ist, dass er nicht vom Importeur stammt. */
.legal-fixed{margin-top:40px;padding-top:8px;border-top:1px solid var(--line)}
.legal-fixed h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-soft);margin:26px 0 6px;font-weight:700}
.legal-fixed p{margin:0;color:var(--ink-soft)}
.legal-back{display:inline-block;margin-top:28px;font-weight:700;text-decoration:none}
.legal-back:hover{color:var(--coral)}

/* ---------------------------------------------------------------- video */
.videobox{margin:44px 0 0;background:var(--ink);border-radius:3px;overflow:hidden;
  aspect-ratio:16/9;display:flex}
.videobox video{width:100%;height:100%;display:block;background:var(--ink);
  /* contain statt cover: Poster und Video werden zentral schon auf 16:9
     gebracht, ein abweichendes eigenes Bild soll trotzdem vollstaendig zu
     sehen sein und nicht beschnitten werden. */
  object-fit:contain}

/* -------------------------------------------------- fade in while scrolling */
.fade{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.fade.is-in{opacity:1;transform:none}

/* --------------------------------------------------------------- lightbox */
.gal-zoom{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;
  cursor:zoom-in;padding:0;z-index:2}
.gal-zoom:focus-visible{outline:2px solid var(--coral);outline-offset:-4px}
.lb{position:fixed;inset:0;z-index:200;background:rgba(52,52,52,.94);display:flex;
  align-items:center;justify-content:center;padding:32px}
.lb[hidden]{display:none}
.lb-inner{position:relative;max-width:min(1200px,100%);max-height:100%;display:flex;
  align-items:center;justify-content:center}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-height:100%}
.lb-fig img{max-width:100%;max-height:78vh;width:auto;height:auto;object-fit:contain;border-radius:2px;
  background:var(--ink)}
.lb-fig figcaption{color:var(--grey);font-size:.9rem;text-align:center;max-width:70ch}
.lb-fig figcaption:empty{display:none}
.lb-btn{position:absolute;background:rgba(255,255,255,.9);color:var(--ink);border:0;width:44px;height:44px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3}
.lb-btn:hover{background:var(--coral);color:#fff}
.lb-btn svg{width:22px;height:22px}
.lb-close{top:-8px;right:-8px}
.lb-prev{left:-58px;top:50%;transform:translateY(-50%)}
.lb-next{right:-58px;top:50%;transform:translateY(-50%)}
body.lb-open{overflow:hidden}
@media (max-width:900px){
  .lb{padding:16px}
  .lb-close{top:0;right:0}
  .lb-prev{left:0;top:auto;bottom:0;transform:none}
  .lb-next{right:0;top:auto;bottom:0;transform:none}
  .lb-fig img{max-height:66vh}
}
@media (prefers-reduced-motion:reduce){
  .fade{opacity:1;transform:none}
}
.map-ask .map-alt{margin-top:14px;font-size:.85rem}
.map-ask .map-alt a{color:inherit;text-decoration:underline}