/* R4X v928 · Tool hero icon stabilization
   Purpose: keep legacy tool icons functional but stop them from dominating the tool start screens.
   Applied to Project Check and Kauf Check.
*/
#s-intro .intro-hero{
  grid-template-columns:76px minmax(0,1fr)!important;
  gap:22px!important;
  align-items:flex-start!important;
  margin-bottom:28px!important;
}

#s-intro .intro-hero-icon{
  width:76px!important;
  height:76px!important;
  align-self:flex-start!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 10px 22px rgba(0,0,0,.22)!important;
  overflow:hidden!important;
}

#s-intro .intro-hero-icon img{
  width:54px!important;
  height:54px!important;
  object-fit:contain!important;
  filter:none!important;
}

#s-intro .intro-hero-icon::before,
#s-intro .intro-hero-icon::after,
#s-intro .intro-card::before,
#s-intro .intro-card::after{
  display:none!important;
  content:none!important;
}

#s-intro .big-title{
  max-width:780px!important;
}

@media(max-width:1100px){
  #s-intro .intro-hero{
    grid-template-columns:68px minmax(0,1fr)!important;
    gap:18px!important;
  }
  #s-intro .intro-hero-icon{
    width:68px!important;
    height:68px!important;
  }
  #s-intro .intro-hero-icon img{
    width:48px!important;
    height:48px!important;
  }
}

@media(max-width:720px){
  #s-intro .intro-hero{
    grid-template-columns:52px minmax(0,1fr)!important;
    gap:13px!important;
    margin-bottom:18px!important;
  }
  #s-intro .intro-hero-icon{
    width:52px!important;
    height:52px!important;
    border-radius:14px!important;
  }
  #s-intro .intro-hero-icon img{
    width:38px!important;
    height:38px!important;
  }
}


/* R4X v997 · Mobile Startscreen Fix für Projekt Check und Kauf Check
   Ursache: Das globale Canva-Icon-Tile ist mobil 88px breit. Die ältere Startscreen-Grid-Spalte war deutlich schmaler. Dadurch liefen Icon, Kurztext und Kicker ineinander.
   Lösung: Nur auf diesen beiden Startscreens wird die Grid-Spalte an die echte Icon-Kachel angepasst und der Kicker wieder im Textbereich geführt.
*/
@media(max-width:720px){
  body[data-nav-tool="Kauf Check"] #s-intro .intro-hero,
  body[data-nav-tool="Projekt Check"] #s-intro .intro-hero{
    display:grid!important;
    grid-template-columns:88px minmax(0,1fr)!important;
    gap:14px!important;
    align-items:center!important;
    min-height:88px!important;
    margin:0!important;
    position:relative!important;
  }

  body[data-nav-tool="Kauf Check"] #s-intro .intro-hero-icon:has(img[src*="/assets/r4x-canva-icons/"]),
  body[data-nav-tool="Projekt Check"] #s-intro .intro-hero-icon:has(img[src*="/assets/r4x-canva-icons/"]){
    grid-column:1!important;
    grid-row:1!important;
    width:88px!important;
    height:88px!important;
    min-width:88px!important;
    min-height:88px!important;
    max-width:88px!important;
    max-height:88px!important;
    padding:10px!important;
    border-radius:20px!important;
    align-self:center!important;
    justify-self:start!important;
    overflow:hidden!important;
  }

  body[data-nav-tool="Kauf Check"] #s-intro .intro-hero-icon img[src*="/assets/r4x-canva-icons/"],
  body[data-nav-tool="Projekt Check"] #s-intro .intro-hero-icon img[src*="/assets/r4x-canva-icons/"]{
    width:64px!important;
    height:64px!important;
    max-width:64px!important;
    max-height:64px!important;
    object-fit:contain!important;
    position:static!important;
    filter:none!important;
  }

  body[data-nav-tool="Kauf Check"] #s-intro .intro-copy,
  body[data-nav-tool="Projekt Check"] #s-intro .intro-copy{
    grid-column:2!important;
    grid-row:1!important;
    min-width:0!important;
    min-height:88px!important;
    padding:0 38px 0 0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    position:relative!important;
  }

  body[data-nav-tool="Kauf Check"] #s-intro .intro-copy>.kicker,
  body[data-nav-tool="Projekt Check"] #s-intro .intro-copy>.kicker{
    position:static!important;
    display:block!important;
    margin:0 0 5px!important;
    font-size:9.5px!important;
    line-height:1.1!important;
    letter-spacing:.13em!important;
    color:var(--gold)!important;
    white-space:normal!important;
  }

  body[data-nav-tool="Kauf Check"] #s-intro .r4x-batch1-mobile-short,
  body[data-nav-tool="Projekt Check"] #s-intro .r4x-batch1-mobile-short{
    display:block!important;
    max-width:100%!important;
    margin:0!important;
    font-size:18px!important;
    line-height:1.15!important;
    letter-spacing:-.02em!important;
  }

  body[data-nav-tool="Kauf Check"] #s-intro .r4x-batch1-mobile-info summary,
  body[data-nav-tool="Projekt Check"] #s-intro .r4x-batch1-mobile-info summary{
    right:12px!important;
    top:12px!important;
  }
}

@media(max-width:380px){
  body[data-nav-tool="Kauf Check"] #s-intro .intro-hero,
  body[data-nav-tool="Projekt Check"] #s-intro .intro-hero{
    grid-template-columns:76px minmax(0,1fr)!important;
    gap:12px!important;
    min-height:76px!important;
  }

  body[data-nav-tool="Kauf Check"] #s-intro .intro-hero-icon:has(img[src*="/assets/r4x-canva-icons/"]),
  body[data-nav-tool="Projekt Check"] #s-intro .intro-hero-icon:has(img[src*="/assets/r4x-canva-icons/"]){
    width:76px!important;
    height:76px!important;
    min-width:76px!important;
    min-height:76px!important;
    max-width:76px!important;
    max-height:76px!important;
    padding:9px!important;
    border-radius:18px!important;
  }

  body[data-nav-tool="Kauf Check"] #s-intro .intro-hero-icon img[src*="/assets/r4x-canva-icons/"],
  body[data-nav-tool="Projekt Check"] #s-intro .intro-hero-icon img[src*="/assets/r4x-canva-icons/"]{
    width:56px!important;
    height:56px!important;
    max-width:56px!important;
    max-height:56px!important;
  }

  body[data-nav-tool="Kauf Check"] #s-intro .intro-copy,
  body[data-nav-tool="Projekt Check"] #s-intro .intro-copy{
    min-height:76px!important;
    padding-right:34px!important;
  }

  body[data-nav-tool="Kauf Check"] #s-intro .r4x-batch1-mobile-short,
  body[data-nav-tool="Projekt Check"] #s-intro .r4x-batch1-mobile-short{
    font-size:17px!important;
  }
}