/* ============================================================
   V2-SCHAUFENSTER v2 (Stand: PROBE, nur probe-schaufenster.html)
   Rollout-Fassung 14.08. (nach 5 Feedback-Runden):
   - gerades, großes, KLICKBARES Band statt Schräg-Sticker (+ Pfeil)
   - 1-2-3-Stepper in der Maske (mit Haken ab Schritt 2) + Masken-Glow
   - Mobil: mini2 weicht im Schaufenster-Modus, Preis-Doppelung raus,
     Live-Preis präsenter (Glanz), Datumsfeld-Überlauf gefixt
   ============================================================ */

/* Der Ausgang mitten im Funnel entfällt */
.sofort-mehr{display:none!important}

/* ---- Schaufenster-Modus der Galerie ---- */
.mo-mosaik.sf-an > *:not(.sf-wrap){display:none!important}
.sf-wrap{grid-column:1/-1;position:relative;display:flex;flex-direction:column;gap:8px;min-width:0}

/* Falle: .mo-mosaik button setzt global width/height 100 % — hart zurückstellen */
.mo-mosaik .sf-wrap button{width:auto;height:auto;display:inline-flex;align-items:center;
  justify-content:center;padding:0;border:0;background:none;cursor:pointer}

/* ---- Gerades Band (klickbar → Maske) ---- */
.sf-band{display:flex;align-items:stretch;gap:8px}
.mo-mosaik .sf-wrap .sf-band-cta{flex:1;min-width:0;display:flex;align-items:center;gap:14px;text-align:left;
  background:#0F8A3D;color:#fff;border-radius:6px;padding:12px 16px;
  box-shadow:0 6px 16px rgba(9,60,30,.35);transition:background .15s ease}
.mo-mosaik .sf-wrap .sf-band-cta:hover{background:#0C7834}
.sf-band-cta .dot{width:9px;height:9px;border-radius:50%;background:#fff;flex:0 0 auto;animation:sfPuls 2s infinite}
.sf-band-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.sf-band-txt b{font-family:'Oswald',sans-serif;font-weight:600;font-size:19px;letter-spacing:.07em;
  text-transform:uppercase;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-band-txt small{font-size:12.5px;opacity:.94;font-family:'Manrope',sans-serif}
.sf-band .sf-pfeil{margin-left:auto;flex:0 0 auto;width:50px;height:50px;border-radius:50%;
  background:#fff;color:#0F8A3D;font-size:27px;font-weight:800;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 3px 12px rgba(0,0,0,.28)}
@keyframes sfPuls{0%,100%{opacity:1}50%{opacity:.35}}

/* ---- animierte Schubser-Pfeile ---- */
.sf-pfeil{display:inline-block;animation:sfNick 1.5s ease-in-out infinite}
@keyframes sfNick{0%,100%{transform:translateX(0)}50%{transform:translateX(9px)}}
.sf-pfeil-ab{animation-name:sfNickAb}
@keyframes sfNickAb{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){
  .sf-pfeil,.sf-band-cta .dot,.pp-links::after{animation:none!important}
}

/* ---- Hauptbild + Thumbs ---- */
.sf-haupt{margin:0;position:relative;overflow:hidden;border-radius:6px;background:#0e1626;aspect-ratio:2/1}
.sf-haupt img,.sf-haupt iframe{width:100%;height:100%;object-fit:cover;display:block;border:0}
/* Falle aus der V2-Liste: display:block überstimmt [hidden] — hart durchsetzen */
.sf-haupt img[hidden],.sf-haupt iframe[hidden]{display:none!important}
.sf-haupt iframe{touch-action:pan-y} /* horizontal = Kuula dreht, vertikal = Seite scrollt */
.sf-haupt .sf-leer{display:flex;align-items:center;justify-content:center;height:100%;font-size:52px}
.sf-cap{position:absolute;left:12px;bottom:10px;color:#fff;font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 5px rgba(0,0,0,.75);pointer-events:none}

.sf-thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.mo-mosaik .sf-thumbs button{flex:0 0 auto;width:96px;height:64px;padding:0;
  border:2px solid transparent;border-radius:6px;overflow:hidden;background:#16283E;display:block}
.mo-mosaik .sf-thumbs button.an{border-color:#1D5FD6}
.sf-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.sf-t360 span{display:block;color:#fff;font-family:'Oswald',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.08em;line-height:1.25;text-transform:uppercase;text-align:center}

/* ---- Hinweis in der Maske: die angeklickte Wohnung reist mit (beide
   Versionen; wird es eng, weicht die Promo-Kachel — Platz-Wache im JS) ---- */
.sf-hin{display:flex;gap:8px;align-items:flex-start;background:#EAF6EE;border:1px solid #BFE3CC;
  border-radius:6px;padding:8px 10px;margin:0 0 10px;color:#0B5B2A;font-size:.88rem;line-height:1.3}
.sf-hin i{font-style:normal;flex:0 0 auto}
.sf-hin b{color:#0A4A22}

/* ---- Promo-Kachel: mobil in der Maske ---- */
.sf-promo{background:#F6F8FA;border:1px solid #E6EAF0;border-radius:6px;
  padding:9px 11px;margin:0 0 10px;line-height:1.35}
@media(min-width:1101px){.sf-promo{display:none}}
.sf-promo b{display:block;font-family:'Oswald',sans-serif;font-weight:600;font-size:14.5px;
  letter-spacing:.04em;text-transform:uppercase;color:#16283E;margin-bottom:2px}
.sf-promo span{font-size:.84rem;color:#41536A}
.sf-promo em{font-style:normal;color:#0F8A3D;font-weight:700;white-space:nowrap}
/* Platz-Wache: bei Engstand (Innen-Scroll droht) weicht die Promo-Kachel */
.m2.sf-eng .sf-promo{display:none}

/* ---- Desktop-Promo-Kachel in der Navy-Lücke über der Maske ---- */
.sf-promo-desk{display:none}
@media(min-width:1101px){
  .sf-promo-desk{display:block;position:absolute;z-index:6;cursor:pointer;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);border-radius:6px;
    padding:8px 12px;line-height:1.3;backdrop-filter:blur(2px)}
  .sf-promo-desk:hover{background:rgba(255,255,255,.11)}
  .sf-promo-desk.aus{display:none}
  .kopf-split.s2-aktiv .sf-promo-desk{display:none}
  .sf-promo-desk b{display:block;font-family:'Oswald',sans-serif;font-weight:600;font-size:14px;
    letter-spacing:.05em;text-transform:uppercase;color:#fff;margin-bottom:2px}
  .sf-promo-desk span{font-size:.8rem;color:#C6D3E4}
  .sf-promo-desk em{font-style:normal;color:#7FD6A1;font-weight:700;white-space:nowrap}
}
/* Google-Element wird vom JS exakt um den nötigen Hub hochgesetzt
   (posPromoDesk) — kein blinder CSS-Versatz */

/* ---- 1-2-3-Stepper oben in der Maske ---- */
.sf-steps{display:flex;align-items:center;gap:5px;margin:0 0 7px;
  font:600 10.5px/1.2 'Manrope',sans-serif;color:#5A6B80}
.sf-step{display:flex;align-items:center;gap:5px;white-space:nowrap;min-width:0}
.sf-step i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:17px;height:17px;border-radius:50%;border:2px solid #C9D3DF;color:#5A6B80;
  font:700 10px/1 'Oswald',sans-serif}
.sf-step.an{color:#16283E}
.sf-step.an i{border-color:#1D5FD6;background:#1D5FD6;color:#fff}
.sf-step.ok{color:#0F8A3D}
.sf-step.ok i{border-color:#0F8A3D;background:#0F8A3D;color:#fff}
.sf-lin{flex:1;height:2px;min-width:8px;background:#E6EAF0;border-radius:1px}
.sf-steps .txtkurz{display:none}
@media(max-width:1279px){
  .sf-steps .txtlang{display:none}
  .sf-steps .txtkurz{display:inline}
}

/* ---- Masken-Hervorhebung: blauer Ring + Puls beim Band-Klick ---- */
.m2{box-shadow:0 0 0 3px rgba(29,95,214,.30),0 18px 44px rgba(9,17,30,.30)}
@keyframes sfMaskPuls{
  0%,100%{box-shadow:0 0 0 3px rgba(29,95,214,.30),0 18px 44px rgba(9,17,30,.30)}
  50%{box-shadow:0 0 0 7px rgba(29,95,214,.55),0 18px 44px rgba(9,17,30,.30)}
}
.m2.sf-puls{animation:sfMaskPuls 1.1s ease 2}
@media(prefers-reduced-motion:reduce){.m2.sf-puls{animation:none}}

/* ---- Unverbindlich-Zeile unter dem Masken-CTA (nur mobil als eigene
   Zeile; Desktop traegt die Botschaft in der CTA-Unterzeile) ---- */
.sf-unv{display:none;margin-top:9px;text-align:center;font-size:.87rem;color:#5A6B80;line-height:1.35}
.sf-unv b{color:#0F8A3D}
@media(max-width:1100px){.sf-unv{display:block}}

/* ---- Schritt 2: Auswahl-Kopf + Chips-Zeile + Markierung (GROSS) ---- */
.sf-s2kopf{margin:2px 0 6px;color:#16283E;font:700 20px/1.3 'Manrope',sans-serif}
.sf-s2kopf b{color:#0F8A3D}
.sf-s2chips{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;
  font:700 15px/1.3 'Manrope',sans-serif;color:#41536A}
.sf-s2chips span{background:#F6F8FA;border:1px solid #E6EAF0;border-radius:99px;padding:8px 14px;white-space:nowrap}
.sf-s2chips .c-gruen{background:#EAF6EE;border-color:#BFE3CC;color:#0B5B2A}
.sf-s2chips .sf-pfeil{color:#0F8A3D;font-size:19px;font-weight:800}
.s2-karte.sf-wkarte{outline:3px solid #0F8A3D;outline-offset:-3px}
.s2-tag.sf-wunsch{background:#0F8A3D;font-size:15px;padding:10px 18px}
.s2-kombiK .s2-tag.sf-wunsch{top:auto}
/* Ablauf-Panel (1-2-3 neben der E-Mail-Eingabe) war „sehr klein" — größer */
.s2-schritte li{font-size:14.5px!important;line-height:1.45}
.s2-schritte li b{font-size:16px}

/* ---- Mobil ---- */
@media(max-width:1100px){
  .sf-haupt{aspect-ratio:16/10;min-height:180px}
  .sf-band{flex-direction:row}
  .mo-mosaik .sf-wrap .sf-band-cta{padding:10px 12px;gap:10px}
  .sf-band-txt b{font-size:15px;white-space:normal;line-height:1.2}
  .sf-band-txt small{font-size:11.5px}
  .sf-band .sf-pfeil{width:42px;height:42px;font-size:23px}
  .mo-mosaik .sf-thumbs button{width:82px;height:58px}

  /* WhatsApp-Block konkurriert im Schaufenster-Modus nicht mit der Maske */
  .sf-modus .mini2{display:none!important}

  /* Preis-Doppelung raus: der Live-Preis oben ist die eine Wahrheit */
  .mini2-preis{display:none!important}

  /* Live-Preis präsenter + dezenter Glanz alle ~5 s */
  .pp-wert{font-size:1.9rem}
  .pp-links{position:relative;overflow:hidden}
  .pp-links::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.28) 50%,transparent 68%);
    transform:translateX(-110%);animation:sfGlanz 5s ease-in-out infinite}

  /* Datumsfeld lief rechts über den Rand */
  .m2-feld{min-width:0}
  #fVon{width:100%;max-width:100%;min-width:0;box-sizing:border-box;-webkit-appearance:none;appearance:none}
}
@keyframes sfGlanz{0%,55%{transform:translateX(-110%)}75%,100%{transform:translateX(110%)}}

/* ---- Sofort-Band: nach erster horizontaler Geste frei scrollbar ---- */
#sofortStreifen{touch-action:pan-y}   /* horizontal = Band, vertikal = Seite */
.sofort.sf-scroll .sofort-bahn,#sofortStreifen.sf-scroll #sofortBahn{
  animation:none!important;transform:none!important;
  overflow-x:auto;width:100%;max-width:100%;scrollbar-width:thin;
  padding-bottom:6px;cursor:grab}
#sofortStreifen.sf-scroll #sofortBahn:active{cursor:grabbing}

/* ---- Mobil: Mini-Review-Link unter der Maske entfällt — stattdessen
   das echte Google-Element (wie Desktop) oben rechts neben der Überschrift ---- */
@media(max-width:1100px){
  .kopf-zeile a{display:none!important}
  .kopf{position:relative}
  /* Heller Mobil-Hero: Navy-Schrift + Gold-Sterne (Desktop-Anmutung, angepasste Farben),
     kompakt neben der zweiten H1-Zeile ("für Ihr Team") */
  .gtrust{display:flex!important;position:absolute;top:128px;right:12px;z-index:5;
    align-items:center;gap:7px;background:none;border:0;padding:0;box-shadow:none;
    bottom:auto;left:auto;transform:none;text-decoration:none}
  .gtrust .gt-logo svg{width:22px;height:22px;display:block}
  .gtrust .gt-note{font-family:'Oswald',sans-serif;font-weight:600;font-size:19px;color:#16283E;line-height:1}
  .gtrust .gt-rechts{display:flex;flex-direction:column;gap:2px}
  .gtrust .gt-sterne{display:flex;gap:1px}
  .gtrust .gt-sterne svg{width:10px;height:10px;fill:#FBBC04}
  .gtrust .gt-rechts small{display:none}
}