/* ==========================================================================
   Quadriga Experience — Stylesheet
   Schriften liegen lokal unter assets/fonts/ (kein Google-CDN, kein
   Datentransfer in die USA, daher kein Cookie-Banner noetig).
   ========================================================================== */

@font-face{font-family:'Barlow';font-style:normal;font-weight:300;font-display:swap;
  src:url('fonts/barlow-300.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/barlow-400.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/barlow-condensed-400.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/barlow-condensed-700.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:700;font-display:swap;
  src:url('fonts/barlow-condensed-700-italic.woff2') format('woff2');}

:root{
  --eg:#0E2729; --em:#122A2C; --ev:#1D5153; --el:#439496;
  --cy:#00DCE1; --wh:#FFFFFF; --mu:rgba(255,255,255,0.45); --bo:rgba(255,255,255,0.1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--em);color:var(--wh);font-family:'Barlow',sans-serif;font-weight:300;
  line-height:1.6;overflow-x:hidden;}

/* Tastaturbedienung sichtbar machen */
:focus-visible{outline:2px solid var(--cy);outline-offset:3px;}

/* Sprungmarke fuer Screenreader und Tastatur */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--cy);color:var(--em);
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.75rem;letter-spacing:.2em;
  text-transform:uppercase;padding:.8rem 1.4rem;}
.skip:focus{left:0;}

/* ---------- Navigation ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;
  justify-content:space-between;padding:1.5rem 4rem;background:rgba(14,39,41,0.93);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--bo);}
.nl{font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--wh);text-decoration:none;display:flex;align-items:center;gap:.7rem;}
.nli{display:flex;gap:2.5rem;list-style:none;}
.nli a{font-family:'Barlow Condensed',sans-serif;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mu);text-decoration:none;transition:color .2s;}
.nli a:hover{color:var(--wh);}
.nli a.aktiv{color:var(--wh);}
.nc{font-family:'Barlow Condensed',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--em);background:var(--wh);border:none;padding:.65rem 1.6rem;
  cursor:pointer;text-decoration:none;transition:background .2s;}
.nc:hover{background:var(--cy);}

/* Burger nur auf schmalen Schirmen */
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.3);cursor:pointer;
  padding:.55rem .7rem;line-height:0;}
.burger span{display:block;width:20px;height:2px;background:var(--wh);transition:transform .25s,opacity .25s;}
.burger span+span{margin-top:5px;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- Hero ---------- */
/* Oben 7rem Abstand, damit die Ueberschrift nicht unter die fixierte
   Navigation rutscht. Ohne den Abstand wird sie oben abgeschnitten,
   sobald der Inhalt hoeher ist als das Browserfenster. */
.hero{min-height:100vh;position:relative;display:flex;align-items:flex-end;
  padding:7rem 4rem 5rem;overflow:hidden;}
.hbg{position:absolute;inset:0;background:
  linear-gradient(to bottom,rgba(14,39,41,.2) 0%,rgba(14,39,41,.6) 60%,var(--em) 100%),
  linear-gradient(120deg,var(--eg) 0%,#0d2e2f 50%,#091e20 100%);}
.hgr{position:absolute;inset:0;background-image:
  linear-gradient(rgba(0,220,225,.03) 1px,transparent 1px),
  linear-gradient(90deg,rgba(0,220,225,.03) 1px,transparent 1px);background-size:100px 100px;}
.hln{position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(to right,transparent,var(--cy),transparent);opacity:.4;top:55%;}
.hyr{position:absolute;bottom:4rem;right:4rem;font-family:'Barlow Condensed',sans-serif;
  font-size:18rem;font-weight:700;color:rgba(255,255,255,.03);line-height:1;user-select:none;
  letter-spacing:-.04em;pointer-events:none;}
.hc{position:relative;max-width:860px;}

/* ---------- Typografie ---------- */
.ey{font-family:'Barlow Condensed',sans-serif;font-size:.7rem;font-weight:400;letter-spacing:.3em;
  text-transform:uppercase;color:var(--cy);margin-bottom:1.2rem;display:flex;align-items:center;gap:1rem;}
.ey::before{content:'';display:block;width:32px;height:1px;background:var(--cy);flex:none;}
/* Die Groesse haengt an Fensterbreite UND -hoehe: min(8.5vw,11vh) sorgt
   dafuer, dass die vierzeilige Ueberschrift auch in flachen Fenstern
   (Laptop, Querformat) noch vollstaendig ins Bild passt. */
.hl{font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(2.75rem,min(8.5vw,11vh),9rem);font-weight:700;
  text-transform:uppercase;line-height:.92;letter-spacing:-.01em;margin-bottom:2rem;}
.hl em,.hl2 em{font-style:italic;color:var(--cy);}
.hl2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(2.5rem,5vw,5.5rem);font-weight:700;
  text-transform:uppercase;line-height:.95;letter-spacing:-.01em;margin-bottom:1.5rem;}
.hs{font-size:.95rem;color:var(--mu);max-width:480px;margin-bottom:2.5rem;line-height:1.8;}
.ha{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;}

/* ---------- Buttons ---------- */
.bp{font-family:'Barlow Condensed',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--em);background:var(--wh);border:none;padding:.9rem 2.2rem;
  cursor:pointer;text-decoration:none;transition:background .2s;display:inline-block;}
.bp:hover{background:var(--cy);}
.bo{font-family:'Barlow Condensed',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--wh);background:transparent;border:1px solid rgba(255,255,255,.3);
  padding:.9rem 2.2rem;cursor:pointer;text-decoration:none;transition:all .2s;display:inline-block;}
.bo:hover{border-color:var(--cy);color:var(--cy);}

/* ---------- Laufband ---------- */
.mq{overflow:hidden;background:var(--ev);padding:.85rem 0;white-space:nowrap;
  border-top:1px solid #246164;border-bottom:1px solid #246164;}
.mq-t{display:inline-block;animation:mq 25s linear infinite;}
@keyframes mq{to{transform:translateX(-50%)}}
.mi{font-family:'Barlow Condensed',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.25em;
  text-transform:uppercase;color:rgba(255,255,255,.7);margin-right:3rem;}
.ms{display:inline-block;width:4px;height:4px;background:var(--cy);vertical-align:middle;
  margin-right:3rem;margin-bottom:1px;}

/* ---------- Kennzahlen ---------- */
.sb{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--bo);
  border-bottom:1px solid var(--bo);}
.si{padding:2.5rem 2rem;text-align:center;border-right:1px solid var(--bo);}
.si:last-child{border-right:none;}
.sn{font-family:'Barlow Condensed',sans-serif;font-size:3.5rem;font-weight:700;color:var(--cy);
  line-height:1;margin-bottom:.3rem;letter-spacing:-.02em;}
.sl{font-family:'Barlow Condensed',sans-serif;font-size:.65rem;letter-spacing:.25em;
  text-transform:uppercase;color:var(--mu);}

/* ---------- Sektionen ---------- */
section{padding:7rem 4rem;}
.vorspann{height:100px;}
.shr{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:3.5rem;}
.shb{margin-bottom:3.5rem;}

/* ---------- Highlight-Band ---------- */
.hb{background:var(--ev);border-top:2px solid var(--cy);padding:3.5rem 4rem;display:flex;
  align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;}
.ht{font-family:'Barlow Condensed',sans-serif;font-size:.65rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--cy);margin-bottom:.6rem;}
.htt{font-family:'Barlow Condensed',sans-serif;font-size:clamp(1.6rem,3vw,2.8rem);font-weight:700;
  text-transform:uppercase;line-height:.95;letter-spacing:-.01em;}
.htt em{font-style:italic;color:var(--cy);}

/* ---------- Erlebnis-Karten ---------- */
.eg{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bo);}
.ec{background:var(--eg);text-decoration:none;color:inherit;display:block;transition:background .2s;
  border-top:2px solid transparent;}
a.ec:hover{background:#0f2d2f;border-top-color:var(--cy);}
.et{height:200px;position:relative;background:var(--em);display:flex;align-items:center;
  justify-content:center;border-bottom:1px solid var(--bo);}
.et::after{content:'';position:absolute;bottom:0;left:0;right:0;height:30%;
  background:linear-gradient(to top,rgba(0,220,225,.06),transparent);}
.etl{position:absolute;top:1rem;left:0;font-family:'Barlow Condensed',sans-serif;font-size:.6rem;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;background:var(--cy);color:var(--em);
  padding:.3rem .9rem;z-index:1;}
.eb{padding:1.8rem;}
.ee{font-family:'Barlow Condensed',sans-serif;font-size:.62rem;letter-spacing:.25em;
  text-transform:uppercase;color:var(--mu);margin-bottom:.5rem;}
.en{font-family:'Barlow Condensed',sans-serif;font-size:1.5rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;margin-bottom:.8rem;line-height:1.05;}
.ed{font-size:.83rem;color:var(--mu);line-height:1.7;margin-bottom:1.5rem;}
.em2{display:flex;gap:1.5rem;border-top:1px solid var(--bo);padding-top:1.2rem;}
.emi{font-family:'Barlow Condensed',sans-serif;font-size:.62rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--mu);}
.emi strong{display:block;color:var(--wh);font-size:.78rem;font-weight:700;margin-bottom:.1rem;}

/* ---------- Ueber uns ---------- */
.ag{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center;}
.av{position:relative;height:480px;}
.am{position:absolute;top:0;left:0;right:80px;bottom:80px;background:var(--ev);
  border-top:2px solid var(--cy);display:flex;align-items:center;justify-content:center;}
.aa{position:absolute;bottom:0;right:0;width:180px;height:180px;background:var(--cy);display:flex;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.5rem;}
.aan{font-family:'Barlow Condensed',sans-serif;font-size:3rem;font-weight:700;color:var(--em);line-height:1;}
.aat{font-family:'Barlow Condensed',sans-serif;font-size:.6rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--em);margin-top:.3rem;opacity:.8;}
.at p{color:var(--mu);margin-bottom:1.2rem;font-size:.95rem;line-height:1.85;}
.ap{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bo);margin-top:2.5rem;}
.pi{background:var(--eg);padding:1.5rem;border-top:2px solid transparent;transition:border-color .2s;}
.pi:hover{border-top-color:var(--cy);}
.pn{font-family:'Barlow Condensed',sans-serif;font-size:1.5rem;font-weight:700;color:var(--cy);margin-bottom:.6rem;}
.pt{font-family:'Barlow Condensed',sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--wh);margin-bottom:.4rem;}
.pp{font-size:.8rem;color:var(--mu);line-height:1.6;}

/* ---------- Zeitstrahl ---------- */
.tl{padding-left:2rem;position:relative;margin-top:3rem;}
.tl::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(to bottom,var(--cy),transparent);}
.ti{padding:0 0 2rem 2rem;position:relative;}
.ti::before{content:'';position:absolute;left:-.4rem;top:.5rem;width:8px;height:8px;
  background:var(--cy);border:2px solid var(--em);}
.td{font-family:'Barlow Condensed',sans-serif;font-size:2rem;font-weight:700;text-transform:uppercase;
  color:var(--cy);line-height:1;margin-bottom:.3rem;}
.tx{font-size:.83rem;color:var(--mu);line-height:1.6;}

/* ---------- Flotte ---------- */
.fg{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bo);margin-top:3rem;}
.fi2{background:var(--eg);padding:2rem 1.5rem;text-align:center;border-top:2px solid transparent;transition:all .2s;}
.fi2:hover{background:#0f2d2f;border-top-color:var(--cy);}
.fy{font-family:'Barlow Condensed',sans-serif;font-size:2.5rem;font-weight:700;color:var(--cy);
  line-height:1;margin-bottom:.3rem;letter-spacing:-.02em;}
.fm{font-family:'Barlow Condensed',sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--wh);margin-bottom:.3rem;}
.fd{font-size:.75rem;color:var(--mu);}

/* ---------- Service ---------- */
.sg{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bo);margin-top:3rem;}
.sx{background:var(--eg);padding:2rem 1.8rem;border-top:2px solid transparent;transition:all .2s;}
.sx:hover{border-top-color:var(--cy);background:#0f2d2f;}
.sxn{font-family:'Barlow Condensed',sans-serif;font-size:3rem;font-weight:700;color:var(--cy);
  line-height:1;margin-bottom:1rem;opacity:.6;letter-spacing:-.02em;}
.sxt{font-family:'Barlow Condensed',sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--wh);margin-bottom:.6rem;}
.sxp{font-size:.82rem;color:var(--mu);line-height:1.7;}

/* ---------- Kontakt ---------- */
.cg{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:start;}
.fg2{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.2rem;}
.fg2 label{font-family:'Barlow Condensed',sans-serif;font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mu);}
.fg2 input,.fg2 select,.fg2 textarea{background:var(--eg);border:1px solid var(--bo);
  border-top:2px solid var(--bo);color:var(--wh);font-family:'Barlow',sans-serif;font-weight:300;
  font-size:.88rem;padding:.85rem 1rem;outline:none;transition:border-color .2s;width:100%;border-radius:0;}
.fg2 input:focus,.fg2 select:focus,.fg2 textarea:focus{border-top-color:var(--cy);}
.fg2 input::placeholder,.fg2 textarea::placeholder{color:var(--mu);}
.fg2 select option{background:var(--eg);}
.fg2 textarea{min-height:120px;resize:vertical;}
.fzeile{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}

/* Einwilligung */
.fok{display:flex;gap:.8rem;align-items:flex-start;margin:.5rem 0 1.6rem;}
.fok input{width:16px;height:16px;flex:none;margin-top:.25rem;accent-color:var(--cy);}
.fok label{font-size:.8rem;color:var(--mu);line-height:1.6;}
.fok a{color:var(--cy);}

/* Honigtopf gegen Spam — fuer Menschen unsichtbar */
.hnt{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* Meldungen */
.meld{border-top:2px solid var(--cy);background:var(--eg);padding:1.2rem 1.4rem;margin-bottom:2rem;}
.meld.fehler{border-top-color:#FF6B5A;}
.meld p{font-size:.85rem;color:rgba(255,255,255,.8);}
.meld ul{margin:.5rem 0 0 1.1rem;font-size:.85rem;color:rgba(255,255,255,.8);}
.meldt{font-family:'Barlow Condensed',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cy);margin-bottom:.4rem;}
.meld.fehler .meldt{color:#FF6B5A;}

.cdi{display:flex;align-items:flex-start;gap:1.5rem;padding:1.2rem 0;border-bottom:1px solid var(--bo);}
.cdl{font-family:'Barlow Condensed',sans-serif;font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mu);min-width:90px;padding-top:.1rem;}
.cdv{font-size:.88rem;color:rgba(255,255,255,.75);line-height:1.6;}
.cdv a{color:rgba(255,255,255,.75);text-decoration:none;transition:color .2s;}
.cdv a:hover{color:var(--cy);}

/* ---------- Rechtstexte ---------- */
.lc{max-width:720px;color:rgba(255,255,255,.65);font-size:.9rem;line-height:1.9;margin-top:2.5rem;}
.ls{font-family:'Barlow Condensed',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.25em;
  text-transform:uppercase;color:var(--cy);margin:2.5rem 0 .8rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--bo);}
.lc p{margin-bottom:1rem;}
.lc a{color:var(--cy);}

/* ---------- Footer ---------- */
footer{background:var(--eg);border-top:2px solid var(--cy);padding:2.5rem 4rem;display:flex;
  justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;}
.flo{font-family:'Barlow Condensed',sans-serif;font-size:.82rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--wh);}
.fco{font-family:'Barlow Condensed',sans-serif;font-size:.62rem;letter-spacing:.18em;color:var(--mu);
  text-transform:uppercase;}
.fli{display:flex;gap:2rem;list-style:none;flex-wrap:wrap;}
.fli a{font-family:'Barlow Condensed',sans-serif;font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mu);text-decoration:none;transition:color .2s;}
.fli a:hover{color:var(--cy);}

/* ---------- Schmale Schirme ---------- */
@media(max-width:900px){
  nav{padding:1rem 1.5rem;}
  .burger{display:block;}
  .nli{position:fixed;top:60px;left:0;right:0;background:rgba(14,39,41,.98);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--bo);flex-direction:column;gap:0;padding:.5rem 1.5rem 1.5rem;
    display:none;}
  .nli.offen{display:flex;}
  .nli li{border-bottom:1px solid var(--bo);}
  .nli li:last-child{border-bottom:none;}
  .nli a{display:block;padding:1rem 0;font-size:.8rem;}
  section{padding:4rem 1.5rem;}
  .hero{padding:5.5rem 1.5rem 3.5rem;}
  .sb{grid-template-columns:repeat(2,1fr);}
  .si:nth-child(2){border-right:none;}
  .si:nth-child(1),.si:nth-child(2){border-bottom:1px solid var(--bo);}
  .ag,.cg{grid-template-columns:1fr;gap:3rem;}
  .eg{grid-template-columns:1fr;}
  .fg{grid-template-columns:repeat(2,1fr);}
  .sg{grid-template-columns:1fr;}
  .fzeile{grid-template-columns:1fr;gap:0;}
  footer{flex-direction:column;gap:1.2rem;text-align:center;}
  .fli{justify-content:center;}
  .hyr{display:none;}
  .hb{padding:2.5rem 1.5rem;}
  .shr{flex-direction:column;align-items:flex-start;gap:1.5rem;}
  .av{height:380px;}
  .am{right:60px;bottom:60px;}
  .aa{width:140px;height:140px;}
  .aan{font-size:2.2rem;}
}

/* ---------- Flache Fenster ----------
   Auf niedrigen Bildschirmen (Laptop, Fenster nicht auf voller Hoehe) werden
   die Abstaende gestrafft, damit der Hero ohne Scrollen komplett sichtbar
   bleibt. Oben bleiben 104 px — mehr als die 88 px hohe Navigation. */
@media(max-height:760px){
  .hero{padding-top:6.5rem;padding-bottom:3rem;}
  .hl{margin-bottom:1.5rem;}
  .hs{margin-bottom:1.75rem;}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .mq-t{animation:none;}
  *{transition-duration:.01ms !important;}
}

/* ---------- Druck ---------- */
@media print{
  nav,.burger,.mq,.hyr{display:none;}
  body{background:#fff;color:#000;}
  section{padding:1rem 0;}
}