/* Mein Garten – Mobile Finishing v2
   Ziel: Teilplanungen, Gesamtbudget und Umsetzungsreihenfolge auf Handys
   nochmals deutlich kompakter und ruhiger darstellen. */

@media (max-width:720px){
  /* 1) Teilplanungen: redundante Statusboxen raus, Projektinfo auf eine Zeile. */
  .q-dashboard-page .qmg-mobile-collapse--parts .q-area-cards{
    gap:.34rem!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--parts .q-area-card{
    padding:.5rem .54rem!important;
    border-radius:12px!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--parts .q-area-card__top{
    gap:.34rem!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--parts .q-area-card__top>div{
    gap:.32rem!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--parts .q-area-card__top>div>span{
    font-size:.92rem!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--parts .q-area-card h3{
    font-size:.86rem!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--parts .q-status{
    padding:.2rem .36rem!important;
    font-size:.55rem!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--parts .q-area-card__meta{
    gap:.26rem!important;
    margin:.32rem 0!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--parts .q-area-card__meta div{
    padding:.32rem .4rem!important;
    border-radius:8px!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--parts .q-area-card__meta span{
    font-size:.55rem!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--parts .q-area-card__meta strong{
    font-size:.7rem!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--parts .q-selected-plan--open{
    display:none!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--parts .q-extra-summary{
    display:flex!important;
    align-items:center!important;
    gap:.35rem!important;
    min-width:0!important;
    margin:.3rem 0!important;
    padding:.34rem .42rem!important;
    border-radius:9px!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--parts .q-extra-summary strong{
    flex:0 0 auto!important;
    margin:0!important;
    font-size:.56rem!important;
    white-space:nowrap!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--parts .q-extra-summary span{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:.64rem!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--parts .q-result-peek{
    margin:.28rem 0!important;
    padding:.34rem .42rem!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--parts .q-area-card .button{
    min-height:36px!important;
    margin-top:.26rem!important;
    padding:.4rem .5rem!important;
    border-radius:10px!important;
    font-size:.69rem!important;
  }

  /* 2) Gesamtbudget: die drei Erklärboxen verschwinden auf Mobile komplett.
     :has() greift auch dann, wenn ein weiterer Wrapper zwischen Sektion und Tabelle liegt. */
  .q-dashboard-page .qmg-mobile-collapse--budget > :not(.q-section-title):not(:has(.q-budget-table)){
    display:none!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--budget :has(> .q-budget-table) > :not(.q-budget-table){
    display:none!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--budget .q-budget-wrap,
  .q-dashboard-page .qmg-mobile-collapse--budget .q-budget-card{
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--budget .q-budget-table{
    margin:0!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--budget .q-budget-table tbody{
    gap:.28rem!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--budget .q-budget-table tr{
    padding:.22rem .44rem!important;
    border-radius:10px!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--budget .q-budget-table td{
    padding:.22rem 0!important;
    gap:.42rem!important;
    font-size:.63rem!important;
    line-height:1.2!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--budget .q-budget-table td:before{
    flex-basis:39%!important;
    font-size:.54rem!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--budget .q-budget-table td>*{
    max-width:61%!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--budget .q-budget-choice{
    font-size:.53rem!important;
  }

  /* 3) Umsetzungsreihenfolge: auf Mobile als echte kompakte Liste statt 8 großer Karten. */
  .q-dashboard-page .qmg-mobile-collapse--timeline .q-timeline{
    display:grid!important;
    gap:0!important;
    overflow:hidden!important;
    border:1px solid rgba(20,72,88,.10)!important;
    border-radius:12px!important;
    background:#fff!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--timeline .q-timeline-item{
    position:relative!important;
    grid-template-columns:25px minmax(0,1fr)!important;
    gap:.4rem!important;
    margin:0!important;
    padding:.48rem .5rem!important;
    border:0!important;
    border-bottom:1px solid rgba(20,72,88,.08)!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--timeline .q-timeline-item:last-child{
    border-bottom:0!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--timeline .q-timeline-item__nr{
    width:23px!important;
    height:23px!important;
    font-size:.61rem!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--timeline .q-timeline-item h3{
    margin:0!important;
    font-size:.73rem!important;
    line-height:1.2!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--timeline .q-timeline-item p{
    display:-webkit-box!important;
    overflow:hidden!important;
    margin:.08rem 0 0!important;
    font-size:.59rem!important;
    line-height:1.25!important;
    -webkit-line-clamp:1!important;
    -webkit-box-orient:vertical!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--timeline .q-timeline-item__tag{
    display:none!important;
  }
}

@media (max-width:390px){
  .q-dashboard-page .qmg-mobile-collapse--parts .q-area-card{
    padding:.46rem!important;
  }
  .q-dashboard-page .qmg-mobile-collapse--timeline .q-timeline-item h3{
    font-size:.7rem!important;
  }
}