/* SteFly Startseite – Styles für die Code-Module der neuen Startseite.
   Alles ist auf .sfy (Sektionen) bzw. .rp (Flug-Wiedergabe) begrenzt, der Rest der Website bleibt unberührt. */

/* ---------- Grundlagen ---------- */
.sfy{container-type:inline-size;container-name:sfy;font-family:'Lato',Helvetica,Arial,sans-serif;color:#333333;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-align:left}
.sfy *,.sfy *::before,.sfy *::after{box-sizing:border-box}
.sfy h1,.sfy h2,.sfy h3,.sfy h4,.sfy p,.sfy ul,.sfy li{padding:0;font-family:inherit}
.sfy h1,.sfy h2,.sfy h3,.sfy h4{text-transform:none}
.sfy ul{list-style:none}
.sfy li::before{content:none}
.sfy a{color:#222222;text-decoration:none;transition:none}
.sfy a:hover{color:#000000}
.sfy video{max-width:none;height:auto}
.sfy button{font-family:inherit}
.sfy a:focus-visible,.sfy button:focus-visible,.sfy input:focus-visible{outline:2px solid #16181C;outline-offset:3px}
.sfy section[id]{scroll-margin-top:96px}

.sfy .ul:hover{text-decoration:underline}
.sfy .mul{mix-blend-mode:multiply}
.sfy .split{display:flex;gap:72px;align-items:center}
.sfy .show-s{display:none}
.sfy .tile img{transition:transform .4s ease}
.sfy .tile:hover img{transform:scale(1.03)}

@container sfy (max-width: 1000px){
  .sfy .split{gap:48px}
}
@container sfy (max-width: 760px){
  .sfy .split{flex-direction:column;gap:36px;align-items:stretch}
  .sfy .split > *{flex:none !important;width:100%}
  .sfy .hide-s{display:none !important}
  .sfy .show-s{display:flex !important}
  .sfy .band{height:460px !important}
  .sfy .trust{flex-direction:column;gap:10px !important;align-items:flex-start !important}
  .sfy .trust .sep{display:none}
  .sfy .heroin{padding-top:20px !important;padding-bottom:56px !important;gap:70px !important}
  .sfy .heroimgcol{order:-1}
  .sfy .heroimg{aspect-ratio:4 / 3 !important}
  .sfy .heroinst{width:118px !important;left:10px !important;bottom:-52px !important}
  .sfy .acc{grid-template-columns:1fr !important}
  .sfy .flgrid{grid-template-columns:1fr 1fr !important}
  .sfy .flmeta{flex-direction:column !important;gap:2px !important}
  .sfy .flhero{grid-column:1 / -1;grid-row:auto !important;min-height:0 !important;aspect-ratio:4 / 3}
  .sfy .steps{grid-template-columns:1fr !important}
}
@media (prefers-reduced-motion: reduce){
  .sfy .tile img{transition:none}
}

/* ---------- Flug-Wiedergabe ---------- */
.rp{container-type:inline-size;container-name:rp;width:100%;font-family:'Lato',Helvetica,Arial,sans-serif;color:#333333;display:flex;flex-direction:column}
.rp *{box-sizing:border-box}
.rp h2,.rp p{padding:0;font-family:inherit}
.rp a{text-decoration:none}
.rp button{font-family:inherit;line-height:1.15;text-transform:none;letter-spacing:normal}
.rp button:focus-visible,.rp a:focus-visible,.rp input:focus-visible{outline:2px solid #16181C;outline-offset:3px}
.rp-stage{display:grid;grid-template-columns:minmax(0,1fr) 400px minmax(0,1fr);gap:48px;align-items:center}
.rp-left{text-align:right;align-items:flex-end}
.rp-chaps{position:relative;height:46px;margin-top:8px}
.rp-chap{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.rp-mapbox{width:230px}
.rp-baro{height:220px}
.rp-mtext{display:none}
.rp input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;border:0;padding:0}
@container rp (max-width: 900px){
  .rp-stage{grid-template-columns:minmax(0,1fr) 320px minmax(0,1fr);gap:28px}
  .rp-mapbox{width:180px}
}
@container rp (max-width: 700px){
  .rp-stage{grid-template-columns:minmax(0,1fr) auto;gap:16px 14px;align-items:start}
  .rp-disp{grid-column:1 / -1;grid-row:1;justify-self:center;width:270px !important}
  .rp-left{grid-column:1;grid-row:2;text-align:left;align-items:flex-start}
  .rp-right{grid-column:2;grid-row:2}
  .rp-mapbox{width:124px}
  .rp-quote{display:none !important}
  .rp-ltext{display:none}
  .rp-mtext{display:block}
  .rp-ptitle{font-size:20px !important}
  .rp-baro{height:150px}
  .rp-chaps{height:auto;display:flex;flex-wrap:wrap;gap:6px}
  .rp-chap{position:static !important;transform:none !important;flex:1 1 30%;font-size:13px !important;padding:4px 8px !important}
  .rp-ticks div:nth-child(even){display:none}
  .rp-h2{font-size:28px !important}
}

/* ---------- Live-Preise ---------- */
.sfy .sfy-preis .woocommerce-Price-amount,.sfy .sfy-preis bdi{font:inherit;color:inherit}
.sfy .sfy-hinweis a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.sfy .sfy-hinweis a:hover{color:inherit;opacity:.8}