/* Grafische Ergänzungen. Die ursprüngliche style.css bleibt unverändert. */
img{max-width:100%}
.home-intro{position:relative}
.home-intro h1{text-wrap:balance}
.intro-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1rem;align-items:center}
.intro-body .lead{margin:0;padding:.35rem 0}
.intro-art{margin:0;min-width:0}
.intro-art img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.hero-tool{margin-top:1.35rem}
.hero-tool input,.hero-tool select,form.calc input,form.calc select{box-shadow:inset 0 1px 2px rgba(0,0,0,.025)}
.page-heading{display:flex;gap:.8rem;align-items:flex-start;margin:0 0 1.15rem}
.page-heading h1{margin:0;flex:1;min-width:0}
.page-icon{width:3.2rem;height:3.2rem;flex:none;padding:.22rem}
.toollist .tool-stamp{display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:start;gap:.15rem}
.tool-stamp img{display:block;width:3.3rem;height:3.3rem;max-width:none}
.toollist a.t{line-height:1.3}
.toollist .go{display:inline-flex;gap:.45rem;align-items:center;min-height:2.75rem}
.toollist .go::after{content:"";display:block;width:.42rem;height:.42rem;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.toollist li:focus-within{background:rgba(255,255,255,.75)}
@media(hover:hover){.toollist li:hover{background:rgba(255,255,255,.65)}}
header.site .wrap{padding-top:.55rem;padding-bottom:.55rem;row-gap:.45rem}
nav.main{display:flex;flex-wrap:wrap;gap:1.1rem}
nav.main a{margin-left:0;display:inline-flex;align-items:center;min-height:2rem}
@media(max-width:600px){
  .intro-body{display:block}
  .intro-body .lead{padding:0}
  .intro-art{max-width:17rem;margin:.2rem auto 0}
  .intro-art img{max-height:10.5rem;object-fit:contain}
  .hero-tool{margin-top:.75rem}
  .page-heading{gap:.65rem}
  .page-icon{width:2.8rem;height:2.8rem}
}
@media(max-width:560px){
  .toollist .tool-stamp{grid-row:1/4}
  .tool-stamp img{width:2.8rem;height:2.8rem}
  .toollist .go{grid-column:2;grid-row:3;justify-self:start;font-size:.9rem;min-height:2.4rem}
  .toollist li{gap:.2rem .75rem;padding:1rem 0}
  .toollist a.t,.toollist span.d{grid-column:2}
  .toollist span.d{font-size:.94rem}
}
@media(max-width:380px){
  header.site .wrap{justify-content:center}
  nav.main{justify-content:center;width:100%}
}
@media print{
  .intro-art,.page-icon,.tool-stamp{display:none!important}
  .intro-body,.page-heading{display:block}
  .toollist li{display:block!important}
  .toollist span.d,.toollist a{display:block}
  .hero-tool,form.calc{box-shadow:none!important}
}

/* Möbelfronten: Maßblatt, Schieferblau und Eiche. */
.hero-tool{box-shadow:3px 3px 0 #e0e4e3;border-color:#75828c}
.hero-tool::before{content:"";position:absolute;top:-1px;left:1.2rem;width:3.6rem;height:3px;background:var(--oak)}
form.calc{border-top:2px solid #8294a1;box-shadow:0 3px 10px rgba(27,36,48,.035)}
.page-icon{background:#eceae3;border:1px solid #dcded7;border-radius:4px}
.toollist li{grid-template-columns:3.5rem minmax(0,1fr) auto;gap:.25rem 1rem;padding:1.05rem .25rem}
.toollist .tool-stamp{grid-column:1;grid-row:1/3;color:var(--oak-deep);font-family:var(--body);font-size:.69rem;font-weight:600;letter-spacing:.08em;line-height:1}
.toollist a.t{grid-column:2}
.toollist span.d{grid-column:2}
@media(max-width:560px){.toollist li{grid-template-columns:2.8rem minmax(0,1fr);padding:1rem 0;gap:.2rem .75rem}.toollist .tool-stamp{grid-row:1/4}}