/* =========================================================
   YUSUF & SÖHNE — MOBILE ART DIRECTION LAYER
   2026-08-11
   Purpose: one maintainable mobile choreography layer.
   Loaded AFTER style.css so the desktop design system remains untouched.
   ========================================================= */

:root{
  --ys-mobile-gutter:16px;
  --ys-mobile-radius:26px;
  --ys-mobile-hero-x:58%;
  --ys-mobile-hero-y:50%;
  --ys-mobile-glass:rgba(255,255,255,.82);
}

/* A little more presence in the progress indicator on touch devices. */
@media (max-width:820px){
  .ys-progress{
    height:3px;
    background:linear-gradient(90deg,var(--ys-orange),#ff8a49);
    box-shadow:0 0 14px rgba(240,90,19,.28);
  }

  html,body{background:#f7f4ef}
  body{overscroll-behavior-y:none}
  .ys-page{overflow:clip;background:#fbfaf8}

  /* ---------- HEADER: quiet, premium, never competes with content ---------- */
  .ys-header{
    border-bottom-color:rgba(227,220,210,.7);
    background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(24px) saturate(165%);
    backdrop-filter:blur(24px) saturate(165%);
  }
  .ys-header.is-scrolled{box-shadow:0 12px 36px rgba(28,24,19,.06)}
  .ys-navbar,.ys-header.is-scrolled .ys-navbar{height:68px}
  .ys-menu-button{
    border-radius:15px;
    border-color:#e5ded5;
    background:rgba(255,255,255,.88);
    box-shadow:0 8px 22px rgba(28,24,19,.055);
  }

  /* ---------- CINEMATIC MOBILE HERO ----------
     Photo becomes the actual stage instead of a separate block below copy.
     Layer order: photo 0 / overlay 1 / copy 3 / float & scroll cue 5.
  ------------------------------------------------ */
  .ys-hero,
  .ys-page-hero{
    position:relative!important;
    display:block!important;
    isolation:isolate;
    min-height:clamp(690px,calc(100svh - 68px),870px)!important;
    height:auto!important;
    overflow:hidden;
    border-radius:0 0 30px 30px!important;
    background:#e8e2da;
  }

  .ys-hero-media,
  .ys-page-hero-media{
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    border-radius:0!important;
    overflow:hidden!important;
    background:#e7e1d9;
  }
  .ys-hero-media img,
  .ys-page-hero-media img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:var(--ys-mobile-hero-x) var(--ys-mobile-hero-y)!important;
    transform:scale(1.055);
    will-change:transform;
  }

  .ys-hero-overlay,
  .ys-page-hero-overlay{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none;
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.995) 0%,
        rgba(255,255,255,.982) 15%,
        rgba(255,255,255,.93) 31%,
        rgba(255,255,255,.75) 44%,
        rgba(255,255,255,.28) 59%,
        rgba(255,255,255,.03) 73%,
        rgba(13,12,11,.16) 100%),
      linear-gradient(90deg,rgba(255,255,255,.52),rgba(255,255,255,.05) 72%);
  }
  .ys-hero:after,
  .ys-page-hero:after{
    content:'';
    position:absolute;
    inset:auto 0 0;
    z-index:2;
    height:28%;
    pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(12,11,10,.13));
  }

  .ys-hero-grid,
  .ys-page-hero-grid{
    position:relative!important;
    z-index:3!important;
    display:block!important;
    min-height:inherit!important;
    width:calc(100% - 32px)!important;
  }
  .ys-hero-copy,
  .ys-page-hero-copy{
    position:relative;
    z-index:3;
    width:100%;
    max-width:none!important;
    padding:42px 0 285px!important;
  }
  .ys-page-hero-copy{padding-bottom:255px!important}
  .ys-hero-copy .ys-h1,.ys-page-hero-copy .ys-h1{max-width:9.6em!important}
  .ys-hero-copy .ys-lead,.ys-page-hero-copy .ys-lead{
    max-width:34ch!important;
    margin:18px 0 22px!important;
    color:#494641;
    text-shadow:0 1px 0 rgba(255,255,255,.38);
  }
  .ys-hero .ys-eyebrow,.ys-page-hero .ys-eyebrow{margin-bottom:13px}

  .ys-hero .ys-actions,.ys-page-hero .ys-actions{
    display:grid!important;
    grid-template-columns:1.08fr .92fr!important;
    gap:9px!important;
    width:100%;
    max-width:410px;
  }
  .ys-hero .ys-actions .ys-btn,.ys-page-hero .ys-actions .ys-btn{
    min-width:0!important;
    width:100%!important;
    min-height:49px;
    padding:12px 10px!important;
    border-radius:15px;
    font-size:.72rem!important;
  }
  .ys-hero .ys-btn-light,.ys-page-hero .ys-btn-light{
    background:rgba(255,255,255,.76);
    border-color:rgba(207,197,185,.9);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
  }

  .ys-trust{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:0!important;
    max-width:410px!important;
    margin-top:24px!important;
    padding:0!important;
    border:1px solid rgba(219,211,201,.82)!important;
    border-radius:18px!important;
    overflow:hidden;
    background:rgba(255,255,255,.62);
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
    box-shadow:0 12px 38px rgba(29,25,20,.055);
  }
  .ys-trust-item{
    max-width:none!important;
    min-height:53px!important;
    padding:10px!important;
    border:0!important;
    color:#4f4b45!important;
    font-size:.57rem!important;
    line-height:1.3!important;
  }
  .ys-trust-item:nth-child(odd){border-right:1px solid rgba(219,211,201,.72)!important}
  .ys-trust-item:nth-child(-n+2){border-bottom:1px solid rgba(219,211,201,.72)!important}
  .ys-trust-item i{font-size:.88rem!important}

  .ys-hero-float{
    z-index:5!important;
    left:16px!important;
    right:16px!important;
    bottom:18px!important;
    width:auto!important;
    min-height:80px;
    padding:8px 13px 8px 8px!important;
    border-radius:20px!important;
    border:1px solid rgba(255,255,255,.55)!important;
    background:rgba(255,255,255,.82)!important;
    -webkit-backdrop-filter:blur(22px) saturate(150%);
    backdrop-filter:blur(22px) saturate(150%);
    box-shadow:0 20px 50px rgba(16,14,12,.16)!important;
  }
  .ys-hero-float img{width:86px!important;height:64px!important;border-radius:14px!important}
  .ys-hero-float strong{font-size:.72rem!important}
  .ys-hero-float small{font-size:.56rem!important;margin-top:4px!important}
  .ys-hero-number{display:none!important}

  .ys-page-badge{
    margin-top:17px!important;
    padding:9px 12px!important;
    border-color:rgba(211,202,191,.82)!important;
    background:rgba(255,255,255,.7)!important;
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
  }

  .ys-scroll-cue{
    position:absolute;
    z-index:5;
    right:17px;
    bottom:20px;
    display:flex;
    align-items:center;
    gap:8px;
    color:#fff;
    font-size:.53rem;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
    text-shadow:0 2px 9px rgba(0,0,0,.25);
    pointer-events:none;
  }
  .ys-hero .ys-scroll-cue{bottom:110px}
  .ys-scroll-cue span{
    position:relative;
    width:26px;
    height:1px;
    overflow:hidden;
    background:rgba(255,255,255,.42);
  }
  .ys-scroll-cue span:after{
    content:'';
    position:absolute;
    inset:0;
    background:#fff;
    transform:translateX(-100%);
    animation:ysCue 1.9s ease-in-out infinite;
  }
  @keyframes ysCue{0%,15%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

  /* page-specific focal points keep real photos usable without separate mobile assets */
  body.ys-page-index{--ys-mobile-hero-x:67%;--ys-mobile-hero-y:55%}
  body.ys-page-heizung{--ys-mobile-hero-x:55%;--ys-mobile-hero-y:61%}
  body.ys-page-waermepumpe{--ys-mobile-hero-x:51%;--ys-mobile-hero-y:52%}
  body.ys-page-sanitaer{--ys-mobile-hero-x:57%;--ys-mobile-hero-y:48%}
  body.ys-page-badsanierung{--ys-mobile-hero-x:63%;--ys-mobile-hero-y:52%}
  body.ys-page-gasinstallation{--ys-mobile-hero-x:52%;--ys-mobile-hero-y:48%}
  body.ys-page-notdienst{--ys-mobile-hero-x:58%;--ys-mobile-hero-y:46%}
  body.ys-page-projekte{--ys-mobile-hero-x:64%;--ys-mobile-hero-y:52%}
  body.ys-page-ueber-uns{--ys-mobile-hero-x:55%;--ys-mobile-hero-y:46%}
  body.ys-page-kontakt{--ys-mobile-hero-x:57%;--ys-mobile-hero-y:50%}
  body.ys-page-kostenvoranschlag{--ys-mobile-hero-x:51%;--ys-mobile-hero-y:48%}
  body.ys-page-leistungen{--ys-mobile-hero-x:65%;--ys-mobile-hero-y:54%}
  body.ys-page-ratgeber{--ys-mobile-hero-x:56%;--ys-mobile-hero-y:62%}
  body.ys-page-standorte{--ys-mobile-hero-x:50%;--ys-mobile-hero-y:46%}
  body.ys-page-karriere{--ys-mobile-hero-x:55%;--ys-mobile-hero-y:44%}

  /* Emergency page deliberately moves from white to warm charcoal sooner. */
  body.ys-page-notdienst .ys-page-hero-overlay{
    background:
      linear-gradient(180deg,rgba(255,255,255,.99),rgba(255,255,255,.95) 27%,rgba(255,255,255,.67) 46%,rgba(18,17,15,.15) 70%,rgba(18,17,15,.38)),
      linear-gradient(90deg,rgba(255,255,255,.5),transparent 75%);
  }

  /* ---------- QUICK CHOICE: a touch rail, not a 2x3 app grid ---------- */
  .ys-service-dock{
    z-index:8!important;
    margin-top:-18px!important;
    padding:30px 0 34px!important;
    border-radius:26px 26px 0 0;
    background:#fff!important;
    border-bottom:1px solid var(--ys-line);
    box-shadow:0 -12px 34px rgba(27,23,18,.045);
  }
  .ys-service-title{
    margin:0 0 18px!important;
    text-align:center!important;
    font-size:1.23rem!important;
    letter-spacing:-.038em!important;
  }
  .ys-service-grid{
    display:flex!important;
    grid-template-columns:none!important;
    gap:9px!important;
    margin-right:-16px;
    padding:2px 16px 10px 0;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .ys-service-grid::-webkit-scrollbar{display:none}
  .ys-service-card{
    flex:0 0 128px!important;
    min-height:92px!important;
    border-radius:18px!important;
    scroll-snap-align:start;
    box-shadow:0 8px 24px rgba(29,25,20,.035);
  }
  .ys-service-card i{font-size:1.38rem!important}
  .ys-service-card span{font-size:.72rem!important}
  .ys-service-card.active{
    background:linear-gradient(180deg,#fff,#fff7f1)!important;
    border-color:#f0c1a6!important;
  }

  .ys-reveal{transform:translateY(38px) scale(.985)}

  /* ---------- SECTION RHYTHM: image / copy order intentionally alternates ---------- */
  .ys-section{padding:72px 0!important}
  .ys-section-air{padding:78px 0!important}
  .ys-section-compact{padding:48px 0!important}
  .ys-section-soft{background:linear-gradient(180deg,#fff,#f7f3ed)}

  .ys-editorial,.ys-editorial.reverse{
    display:flex!important;
    flex-direction:column!important;
    gap:29px!important;
  }
  .ys-editorial.reverse .ys-content{order:1!important}
  .ys-editorial.reverse .ys-media-frame,
  .ys-editorial.reverse .ys-media-stack{order:2!important}
  .ys-editorial:not(.reverse) .ys-media-frame,
  .ys-editorial:not(.reverse) .ys-media-stack{order:1!important}
  .ys-editorial:not(.reverse) .ys-content{order:2!important}
  .ys-content.right,.ys-content.center{justify-self:auto!important}
  .ys-editorial.reverse .ys-content{text-align:right;align-items:flex-end}
  .ys-editorial.reverse .ys-content .ys-copy{margin-left:auto}
  .ys-editorial.reverse .ys-eyebrow{justify-content:flex-end}
  .ys-editorial.reverse .ys-eyebrow:before{order:2}
  .ys-editorial.reverse .ys-text-link{align-self:flex-end}

  .ys-media-frame{
    position:relative;
    border-radius:var(--ys-mobile-radius)!important;
    box-shadow:0 18px 54px rgba(31,27,22,.095)!important;
    outline:1px solid rgba(255,255,255,.66);
    outline-offset:-1px;
  }
  .ys-media-frame:after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    box-shadow:inset 0 0 0 1px rgba(23,20,17,.035);
  }
  .ys-media-wide,.ys-media-tall,.ys-media-square{aspect-ratio:1.06/1!important}
  .ys-media-frame img{will-change:transform}
  .ys-media-caption{
    left:12px!important;
    bottom:12px!important;
    padding:8px 11px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.8)!important;
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
  }

  .ys-media-stack{gap:9px!important}
  .ys-media-stack .ys-media-frame:first-child{min-height:340px!important}
  .ys-media-stack .ys-media-frame:last-child{min-height:270px!important;margin-top:42px}

  /* ---------- STATEMENT: keep the architectural layer alive on mobile ---------- */
  .ys-statement{
    min-height:510px;
    padding:92px 0 116px!important;
    overflow:hidden;
    background:
      radial-gradient(circle at 84% 80%,rgba(240,90,19,.07),transparent 31%),
      linear-gradient(180deg,#f8f5f0,#f3eee7);
  }
  .ys-statement .ys-container{position:relative;z-index:2}
  .ys-statement .ys-h2{text-align:center;font-size:clamp(2.05rem,9.3vw,3.1rem)!important}
  .ys-statement .ys-copy{text-align:center;margin:19px auto 0}
  .ys-house{
    display:block!important;
    width:380px!important;
    right:-118px!important;
    bottom:-5px!important;
    opacity:.1!important;
    transform:rotate(-2deg);
  }
  .ys-ghost-word{display:block!important;top:34px!important;left:-12px!important;font-size:22vw!important;opacity:.026!important}

  /* ---------- PROJECTS: magazine feeling + clear active slide ---------- */
  .ys-project-head{gap:18px!important;margin-bottom:27px!important}
  .ys-project-head .ys-h2{max-width:9em}
  .ys-slider-controls{display:none!important}
  .ys-project-swiper{overflow:visible!important}
  .ys-project-slide{
    opacity:.58;
    transform:scale(.955);
    transform-origin:center bottom;
    transition:opacity .42s var(--ys-ease),transform .42s var(--ys-ease);
  }
  .ys-project-slide.swiper-slide-active{opacity:1;transform:scale(1)}
  .ys-project-card{border-radius:24px!important;overflow:hidden;box-shadow:0 18px 48px rgba(29,25,20,.08)!important}
  .ys-project-card-media{min-height:300px!important}
  .ys-project-card-media img{transform:scale(1.02)}
  .ys-project-body{padding:19px!important}
  .ys-swiper-progress{height:2px!important;background:#e5ded5!important}
  .ys-swiper-progress span{background:var(--ys-orange)!important}

  /* ---------- HUMAN STORY: image and copy become one tactile object ---------- */
  .ys-manifesto{
    gap:0!important;
    border-radius:28px!important;
    overflow:hidden;
    background:#fff;
    box-shadow:0 22px 60px rgba(31,27,22,.075)!important;
  }
  .ys-manifesto-media{min-height:430px!important}
  .ys-manifesto-copy{padding:34px 24px 38px!important}
  .ys-principles{margin-top:23px!important}
  .ys-principle{padding:15px 0!important}

  /* ---------- PROCESS: a line literally builds as the visitor scrolls ---------- */
  .ys-process{
    --ys-process-progress:0%;
    position:relative;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:2px!important;
    padding-left:8px;
  }
  .ys-process:before{
    content:''!important;
    display:block!important;
    position:absolute;
    left:27px;
    top:26px;
    bottom:30px;
    width:1px;
    background:#ded7ce;
  }
  .ys-process:after{
    content:'';
    position:absolute;
    left:27px;
    top:26px;
    width:2px;
    height:var(--ys-process-progress);
    max-height:calc(100% - 56px);
    background:linear-gradient(180deg,var(--ys-orange),#ff9d63);
    border-radius:999px;
    box-shadow:0 0 14px rgba(240,90,19,.2);
  }
  .ys-step{
    position:relative;
    z-index:2;
    display:grid!important;
    grid-template-columns:42px 1fr!important;
    gap:2px 15px!important;
    min-height:106px;
    padding:10px 0 12px!important;
    background:transparent!important;
  }
  .ys-step-num{
    grid-row:1/3!important;
    width:38px!important;
    height:38px!important;
    display:grid;
    place-items:center;
    margin:0!important;
    border:1px solid #e1d9d0;
    border-radius:50%;
    background:#fbfaf8;
    color:var(--ys-orange)!important;
    font-size:.65rem!important;
    font-weight:800;
  }
  .ys-step h4{margin:3px 0 4px!important}
  .ys-step p{margin:0!important}

  /* ---------- DATA STRIP: breathe ---------- */
  .ys-stat-strip{border-radius:24px!important;overflow:hidden;box-shadow:0 14px 40px rgba(29,25,20,.05)}
  .ys-stat{min-height:105px!important;padding:20px!important}
  .ys-stat strong{font-size:1.1rem!important}

  /* ---------- DARK EMERGENCY BAND: intentional single contrast beat ---------- */
  .ys-dark-band{
    position:relative;
    overflow:hidden;
    border-radius:24px!important;
    padding:25px!important;
    background:
      radial-gradient(circle at 90% 20%,rgba(240,90,19,.16),transparent 31%),
      linear-gradient(135deg,#1a1a18,#282723)!important;
    box-shadow:0 20px 52px rgba(18,16,13,.15);
  }
  .ys-dark-left{align-items:flex-start!important}
  .ys-24{flex:0 0 auto}

  /* ---------- FINAL CTA: an image stage, not another card ---------- */
  .ys-cta{
    position:relative!important;
    display:flex!important;
    align-items:flex-end!important;
    min-height:560px;
    padding:30px 24px 28px!important;
    overflow:hidden;
    border-radius:28px!important;
    background:#24221f!important;
    box-shadow:0 24px 70px rgba(27,23,18,.15)!important;
  }
  .ys-cta:before{
    content:'';
    position:absolute;
    z-index:1;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(19,18,16,.04) 28%,rgba(19,18,16,.35) 54%,rgba(19,18,16,.9) 92%);
  }
  .ys-cta>div:first-child{position:relative;z-index:3;color:#fff;width:100%}
  .ys-cta .ys-h2{color:#fff;font-size:clamp(2.2rem,10vw,3.25rem)!important}
  .ys-cta .ys-copy{color:rgba(255,255,255,.78)!important}
  .ys-cta .ys-eyebrow{color:#ff8950}
  .ys-cta .ys-btn-light{background:rgba(255,255,255,.92);border-color:transparent}
  .ys-cta .ys-contact-chip{color:rgba(255,255,255,.78)!important}
  .ys-cta-art{
    display:block!important;
    position:absolute!important;
    z-index:0;
    inset:0;
    width:100%!important;
    height:100%!important;
    border-radius:0!important;
  }
  .ys-cta-art img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:62% center!important}

  /* ---------- FOOTER ---------- */
  .ys-footer{background:#f2eee8!important}
  .ys-footer-main{gap:34px 18px!important}
  .ys-footer-main>div:first-child{padding-bottom:7px}
  .ys-footer-bottom{gap:10px!important}

  /* ---------- MOBILE DOCK: smaller visual footprint ---------- */
  .ys-mobile-dock{
    width:min(calc(100% - 28px),410px)!important;
    bottom:max(9px,env(safe-area-inset-bottom))!important;
    padding:5px!important;
    border-radius:17px!important;
    background:rgba(24,23,21,.91)!important;
    -webkit-backdrop-filter:blur(24px) saturate(160%)!important;
    backdrop-filter:blur(24px) saturate(160%)!important;
  }
  .ys-mobile-dock a{min-height:46px!important;border-radius:12px!important}

  /* ---------- FORMS / COMMON CARDS ---------- */
  .ys-form,.ys-job,.ys-feature,.ys-problem,.ys-area-card,.ys-project-feature{
    border-radius:22px!important;
  }
  input,select,textarea{font-size:16px!important}

  /* ---------- CHAPTER SIGNAL ---------- */
  .ys-chapter{position:relative}
  .ys-chapter>.ys-container{position:relative;z-index:1}
  .ys-chapter-mark{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-bottom:12px;
    color:#a29a90;
    font-size:.55rem;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
  }
  .ys-chapter-mark:before{content:'';width:13px;height:1px;background:#d2c9be}

  /* accessibility: maintain readable white-gradient heroes on narrow devices */
  @media (max-width:390px){
    .ys-hero,.ys-page-hero{min-height:760px!important}
    .ys-hero-copy,.ys-page-hero-copy{padding-top:36px!important;padding-bottom:292px!important}
    .ys-page-hero-copy{padding-bottom:270px!important}
    .ys-hero .ys-actions,.ys-page-hero .ys-actions{grid-template-columns:1fr 1fr!important}
    .ys-trust-item{font-size:.54rem!important}
    .ys-service-card{flex-basis:119px!important}
  }

  @media (max-width:350px){
    .ys-hero,.ys-page-hero{min-height:790px!important}
    .ys-hero .ys-actions,.ys-page-hero .ys-actions{grid-template-columns:1fr!important}
    .ys-hero-copy,.ys-page-hero-copy{padding-bottom:275px!important}
    .ys-trust{grid-template-columns:1fr!important}
    .ys-trust-item:nth-child(odd){border-right:0!important}
    .ys-trust-item:nth-child(-n+3){border-bottom:1px solid rgba(219,211,201,.72)!important}
  }
}

/* Tablet receives the same photo-as-stage idea but with more breathing space. */
@media (min-width:821px) and (max-width:1040px){
  .ys-hero,.ys-page-hero{min-height:760px!important}
  .ys-hero-media,.ys-page-hero-media{position:absolute!important;inset:0!important;height:100%!important}
  .ys-hero-overlay,.ys-page-hero-overlay{display:block!important;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.97) 38%,rgba(255,255,255,.6) 58%,rgba(255,255,255,.04) 82%)!important}
  .ys-hero-grid,.ys-page-hero-grid{min-height:inherit!important;display:grid!important;grid-template-columns:1.1fr .9fr!important}
  .ys-hero-copy,.ys-page-hero-copy{padding:74px 0 118px!important}
}

@media (prefers-reduced-motion:reduce){
  .ys-scroll-cue span:after{animation:none!important}
  .ys-project-slide{transition:none!important}
}