.akustik-tool{
max-width:1200px;
margin:0 auto;
border:2px solid #a20002;
padding:20px;
font-family:sans-serif;
}
.akustik-tool h2{
color: #a20002;
text-align: center;
}

.akustik-tool h4{
color: #a20002;
font-weight:700;
}

/* Titel */

.akustik-tool h2{
margin:0 0 15px 0;
padding-bottom:10px;
border-bottom:2px solid #a20002;
}

/* Layout */

.ak-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#577593;
border-bottom: 2px solid #a20002;
  margin-bottom:20px;
}

.ak-header-title{
  font-size:1.6rem;
  font-weight:600;
}

.ak-header-logo img{
  height:36px;
}

.ak-layout{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
}

/* Linke Seite */

.ak-left{
display:flex;
flex-direction:column;
gap:20px;
  min-width:0;
}

/* Hinweis */

.ak-hint{
background:#fff;
padding:12px;
}

/* Grundriss */

.ak-sketch{
background:#ffffff;
border:0px solid #ddd;
padding:15px;
height:300px;

display:flex;
align-items:center;
justify-content:center;
}

.ak-sketch svg{
  width:100%;
  max-height:260px;
  height:auto;
  pointer-events:none;
}

svg text{
  fill:#666;
  font-size:11px;
}
.ak-wall-active{
  stroke:#a20002;
  stroke-width:6;
}

.ak-wall-material{
  display:flex;
  align-items:center;
  gap:6px;
}

.akustik-tool .ak-copy-wall-material{

  font-size:0.8rem;
  padding:3px 8px;

  background:#e8eef3;
  color:#577593;

  border:1px solid #577593;
  border-radius:4px;

  cursor:pointer;
  transition:all 0.15s ease;

}

.akustik-tool .ak-copy-wall-material:hover{

  background:#577593;
  color:#fff;

}


/* Rechte Seite */

.ak-right{
display:flex;
flex-direction:column;
gap:20px;
}

.ak-layout2{
grid-template-columns:1fr;
}
#floor-block{
grid-column:1;
}

#ceiling-block{
grid-column:2;
}

.ak-sketch,
.ak-hint{
pointer-events:none;
}

.ak-oben{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-bottom:20px;
align-items:start;
}

.ak-unten{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
align-items:start;
}

/* Formular */

.ak-form{
background:#f7f7f7;
padding:20px;
border:1px solid #ddd;

display:flex;
flex-direction:column;
gap:16px;
}

/* jede Formularzeile */

.ak-row{
display:grid;
grid-template-columns:180px 1fr;
align-items:center;
gap:12px;
}

/* Labels */

.ak-row label{
text-align:right;
font-weight:600;
}

/* Eingabefelder */

.ak-row input,
.ak-row select{
width:100%;
padding:8px;
border:1px solid #bbb;
box-sizing:border-box;
}

/* Maße Grid */

.ak-measure-grid{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:15px;
}

.ak-measure-grid .ak-field{
grid-template-columns:120px 1fr;
}

/* Nutzung */

.ak-usage{
max-width:350px;
}

/* Ergebnisse */

.ak-results{
background:#f7f7f7;
border:1px solid #ddd;
padding:15px;

display:flex;
flex-direction:column;
gap:8px;
}

/* Tsoll Hervorhebung */

.ak-tsoll{
margin-top:0px;
padding:8px 15px;

background:#dbe6ef;
border:1px solid #c3d1de;

display:grid;
grid-template-columns:auto auto 1fr;
column-gap:8px;
align-items:center;
}

.ak-tsoll-label{
font-weight:600;
}

.ak-tsoll-value{
font-weight:700;
}

.ak-tsoll-norm{
color:#555;
}

/* Button */

.ak-next{
text-align:right;
}

.akustik-tool button{
padding:10px 16px;
border:1px solid #999;
background:#eee;
cursor:pointer;
}

.akustik-tool button:hover{
background:#ddd;
}

.ak-surface-warning{
  border-left:4px solid #a20002;
  background:rgba(162,0,2,0.05);
}

.ak-nav{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
margin-top:20px;
border-top: 2px solid #a20002;
padding-top: 10px;
}

.ak-nav button{
  position:relative;
  z-index:2;
}

.ak-nav-center{
  text-align:center;
  pointer-events:none;
}

.ak-nav button:first-child{
  justify-self:start;
}

.ak-nav button:last-child{
  justify-self:end;
}

.ak-surface-block{
margin-top:0px;
}

.ak-surface-row{
display:grid;
grid-template-columns:140px 100px 1fr;
gap:15px;
align-items:center;
margin-bottom:10px;
}

.ak-surface-label{
font-weight:600;
}

.ak-surface-area{
text-align:left;
}

.ak-surface-row select{
width:100%;
padding:8px;
border:1px solid #bbb;
}

.ak-surface-actions{
  display:flex;
  gap:10px;
  justify-content:flex-start;
}

.ak-surface-actions button{
  padding:6px 10px;
  font-size:0.9rem;
}

.ak-surface-buttons{
  display:flex;
  gap:10px;
  margin-top:10px;
}

.ak-surface-buttons button{
  padding:8px 12px;
  font-size:0.9rem;
  white-space:nowrap;
}

.ak-chart{
  width:100%;
  max-height:500px;
  margin-bottom:25px;
}

.ak-chart canvas{
  width:100% !important;
  height:420px !important;
}

.ak-results-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}

.ak-result-row{
display:flex;
justify-content:space-between;
margin-bottom:6px;
}

.ak-result-row span{
color:#444;
}

.ak-result-row strong{
font-weight:600;
}

.ak-products-panel{

  padding-left:25px;
  display:flex;
  flex-direction:column;
 min-width:0; 
}

.ak-right2{
  border-left:1px solid #ddd;
padding-right: 10px;
}

.ak-product-row{
display:grid;
grid-template-columns:120px 1fr 36px;
gap:10px;
align-items:center;
margin-bottom:10px;
}

.ak-surface-area{
display:flex;
align-items:center;
gap:5px;
}

.ak-product-row select,
.ak-product-row input{
    max-width:100%;
  height:32px;
  box-sizing:border-box;

}
.ak-product-row .ak-surface-area{
  display:flex;
  align-items:center;
  gap:6px;
}

.product-material{
width:100%;
min-width:260px;
}



.akustik-tool .ak-primary-button{
  background:#a20002;
  color:white;
  border:none;
  padding:10px 18px;
  font-size:0.95rem;
  cursor:pointer;
  border-radius:3px;
}

.akustik-tool .ak-primary-button:hover{
  background:#7d0001;
}

.ak-results-panel{
  background:#f9f9f9;
  border:1px solid #ddd;
  padding:18px 20px;
  border-radius:4px;
}

.ak-results-panel h4{
  margin:0 0 14px 0;
  color:#577593;
}

.ak-result-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  align-items:center;
  padding:8px 0;
  border-bottom:1px solid #e6e6e6;
}

.ak-result-row:last-child{
  border-bottom:none;
}

.ak-result-row span{
  color:#444;
  line-height:1.3;
}

.ak-result-row strong{
  font-weight:600;
  color:#111;
  text-align:right;
  white-space:nowrap;
}

#result-tist{
color:#577593;
}

#result-tsoll{
color:#666;
}

#result-tneu{
color:#a20002;
font-weight:600;
}

.ak-report{
margin-top:20px;
padding-top:15px;
border-top:1px solid #ddd;
}

.ak-report-improvement,
.ak-report-recommendation{
display:flex;
justify-content:space-between;
margin:8px 0;
}

.ak-report-text{
margin-top:15px;
line-height:1.5;
color:#333;
}

.ak-report-note{
margin-top:20px;
font-size:0.9rem;
color:#555;
line-height:1.4;
}

.ak-contact{
  margin-top:auto;
  text-align:right;
  font-size:0.9rem;
  color:#555;
}

.ak-nav{
  display:flex;
  align-items:center;
}

.ak-nav button:first-child{
  margin-right:auto;
}

.ak-nav button:last-child{
  margin-left:auto;
}

.ak-nav-center{
  margin:0 auto;
}

.exporting .ak-nav{
  display:none;
}
.exporting button{
  display:none;
}

.item-size,
.product-size{
  width:60px;
}

/* Responsive */

@media (max-width:768px){

.ak-layout{
grid-template-columns:1fr;
}


  .ak-hint{
    order:1;
  }

  .ak-form{
    order:2;
  }
  .ak-sketch{
    order:3;
  }

  .ak-results{
    order:4;
  }

  .ak-tsoll{
    order:5;
  }

.ak-tsoll{
grid-template-columns:1fr auto;
row-gap:4px;
}

.ak-tsoll-label{
grid-column:1;
}

.ak-tsoll-value{
grid-column:2;
text-align:right;
}

.ak-tsoll-norm{
grid-column:1 / -1;
font-size:0.85rem;
color:#666;
}

.ak-sketch{
  width:100%;
height:220px;
  max-width:400px;
}

.ak-row{
grid-template-columns:1fr;
}

.ak-row label{
text-align:left;
}

.ak-next{
text-align:left;
}

.ak-oben{
grid-template-columns:1fr;
}

.ak-unten{
grid-template-columns:1fr;
}

  .ak-surface-row{
    display:flex;
    flex-direction:column;
    gap:6px;
  }

  .ak-surface-area{
    display:flex;
    justify-content:flex-start;
    gap:6px;
  }

  .ak-surface-row select{
    width:100%;
    max-width:100%;
  }

 .ak-surface-buttons{
    display:flex;
    flex-direction:column;
    gap:8px;
  }


 .ak-nav{
    justify-content:space-between;
  }

 .ak-nav-center{
    display:none;
  }


.ak-results-layout{
display:grid;
grid-template-columns:1fr;
gap:20px;
}

/* Wrapper auflösen */

.ak-left2,
.ak-right2{
display:contents;
}

/* Reihenfolge */

.ak-results{order:1;}

.ak-products{order:2;}

.ak-evaluation{order:3;}

.ak-hint2{order:4;}

.ak-contact-panel{order:5;}

/* rechte Spalte optisch neutralisieren */

.ak-products-panel{
border-left:none;
padding-left:0;
margin-top:5px;
}



  .ak-product-row{
    display:grid;
    grid-template-columns: 1fr auto;
    gap:8px;
    align-items:start;
  }

  .ak-product-row > div:nth-child(1){
    grid-column:1 / 2;
  }

  .ak-product-row > div:nth-child(2){
    grid-column:1 / 2;
  }

  .ak-product-row > div:nth-child(3){
    grid-column:2 / 3;
    grid-row:1 / 3;
    display:flex;
    justify-content:flex-end;
  }

  .ak-product-row .item-material,
  .ak-product-row .product-material{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .ak-product-row .ak-surface-area{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
  }

  .ak-product-row input[type="number"]{
    width:100%;
    max-width:90px;
    min-width:0;
  }

.ak-contact{
  margin-top:20px;
  text-align:left;
  font-size:0.9rem;
  color:#555;
}


}