
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;color:#0b1717;font:16px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial}
.wrapper{max-width:1120px;margin:0 auto;padding:0 16px}
header{position:sticky;top:0;background:#ffffffcc;backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #e7ecea;transition:box-shadow .2s ease}
header.scrolled{box-shadow:0 8px 20px rgba(0,0,0,.06)}
header .brand{display:flex;align-items:center;gap:12px;padding:10px 0}
.brand img{height:56px;width:auto}
nav a{margin-left:18px;color:#0b1717;text-decoration:none;border-bottom:1px solid transparent}
nav a:hover,nav a:focus-visible{border-color:#546b6a;outline:none}
h1{font-size:40px;line-height:1.1;margin:0 0 6px;font-weight:700}
h2{font-size:28px;margin:0 0 8px;font-weight:600}
.section{padding:56px 0}
.section .headline{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.section .headline:after{content:"";height:1px;background:#e7ecea;flex:1 1 auto}
.hero{border-bottom:1px solid #e7ecea}
.slider{position:relative;overflow:hidden;height:54vh;border-radius:14px}
@media (max-width:900px){ .slider{height:48vh} }
.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.slide.is-active{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;display:block;image-rendering:auto}
.slide--eberbach img{object-position:50% 30%}
.slide--landauer img{object-position:50% 40%}
.slide .overlay{position:absolute;left:0;right:0;bottom:0;padding:32px 24px 24px;background:linear-gradient(180deg,rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.35) 100%);color:#fff}
.overlay .kicker{font-size:12px;letter-spacing:.12em;opacity:.9;margin:0 0 4px;text-transform:uppercase}
.overlay h3{margin:0;font-size:28px;line-height:1.15}
.overlay p{margin:6px 0 0;font-size:14px;opacity:.95}
.btn{display:inline-block;padding:12px 20px;border:1px solid #546b6a;border-radius:16px;text-decoration:none;color:#0b1717;transition:transform .1s ease,background .2s ease,box-shadow .2s ease}
.btn:hover{background:rgba(196,215,209,.25)}
.btn:focus-visible{outline:2px solid #546b6a;outline-offset:2px}
.btn:active{transform:translateY(1px)}
.grid{display:grid;gap:16px;align-items:stretch}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:#fff;border:1px solid rgba(84,107,106,.25);border-radius:20px;box-shadow:0 6px 20px rgba(0,0,0,.06);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card img{width:100%;height:220px;object-fit:cover;display:block;transition:transform .25s ease}
.card:hover img{transform:scale(1.02)}
.card-link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.card-body{display:flex;flex-direction:column;gap:6px;padding:14px 16px;flex:1}
.card-body h3{margin:0}
.card-body .meta{font-size:13px;color:#5a6867}
.card-body .desc{margin:0;flex:1}
.card-footer{padding:0 16px 16px;margin-top:auto}
.card-link:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.10);border-color:rgba(84,107,106,.45)}
.card-link .chip{display:inline-block;font-size:13px;border:1px solid rgba(84,107,106,.35);padding:6px 10px;border-radius:999px;transition:background .2s ease,color .2s ease,border-color .2s ease}
.card-link:hover .chip{background:#546b6a;color:#fff;border-color:#546b6a}
.card-link:focus-visible{outline:2px solid #546b6a;outline-offset:4px}
.quote-band{padding:48px 0;background:linear-gradient(180deg,rgba(196,215,209,.18),rgba(196,215,209,.12))}
.quote{max-width:920px;margin:0 auto;text-align:center;font-size:26px;line-height:1.35;font-weight:600}
.quote:before,.quote:after{content:"";display:block;width:64px;height:2px;background:rgba(84,107,106,.35);margin:14px auto;border-radius:2px}
.services .card{background:rgba(196,215,209,.18);border-color:rgba(84,107,106,.25)}
.services .card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.10);border-color:rgba(84,107,106,.45)}
.contact-card{display:flex;flex-direction:column}
.contact-card h2{margin-bottom:8px}
.contact-box{border:1px dashed #e4eeeb;border-radius:14px;padding:12px;margin:6px 0 12px;background:rgba(196,215,209,.12)}
.contact-box strong{display:block}
.contact-sub{font-size:12px;color:#5a6867}
.contact-list{margin:8px 0 0;padding:0;list-style:none}
.contact-list li{margin:6px 0}
.divider{height:1px;background:#e7ecea;margin:14px 0}
.form-card h2{margin:0 0 8px}
form label{display:block;margin:10px 0 2px;font-weight:600}
form input,form textarea{width:100%;padding:10px;border:1px solid #cfd9d6;border-radius:12px}
form .row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (max-width:700px){ form .row{grid-template-columns:1fr}}
footer{border-top:1px solid #e7ecea;padding:24px 0;color:#5a6867}
.small{font-size:13px;color:#5a6867}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}
.to-top{position:fixed;right:16px;bottom:16px;width:40px;height:40px;border-radius:999px;border:1px solid rgba(84,107,106,.35);background:#fff;color:#0b1717;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.08);transition:transform .2s ease,opacity .2s ease}
.to-top:hover{background:rgba(196,215,209,.25)}
.to-top.show{opacity:1;transform:none}
.to-top[hidden]{opacity:0;transform:translateY(6px)}
@media (max-width: 1000px){ .grid-3{grid-template-columns:1fr} h1{font-size:34px}}

/* Social hover states */
.social a { color:#0b1717; opacity:.9; transition:opacity .2s ease, transform .15s ease; }
.social a:hover { opacity:1; transform:translateY(-1px); }
.social a:focus-visible { outline:2px solid #546b6a; outline-offset:3px; border-radius:8px; }


/* Social block in Kontaktkarte (centered) */
.social-block{
  border:1px solid #e4eeeb;
  background:rgba(196,215,209,.12);
  border-radius:14px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:100%;
}
.social-title{
  font-weight:600;
  font-size:14px;
  color:#0b1717;
  text-align:center;
}
.social-icons{
  display:flex;
  gap:12px;
  justify-content:center;
}
.social-icons a{
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px;
  border:1px solid rgba(84,107,106,.28);
  background:#fff;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
  color:#0b1717; opacity:.95;
}
.social-icons a:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  background:rgba(196,215,209,.18);
  border-color:rgba(84,107,106,.45);
  opacity:1;
}
.social-icons a:focus-visible{
  outline:2px solid #546b6a;
  outline-offset:3px;
}
