/* ===========================
   Welle – Global Styles (v2.1)
   =========================== */

:root{
  --lightgrey:#e9ecef;        /* Haupt-Hintergrundflächen */
  --white:#ffffff;
  --anthrazit:#2c2c2c;        /* Text/Fuß */
  --bronze:#b48a50;           /* warmer Akzent (Focus/Hover) */
  --radius:14px;
  --shadow:0 6px 24px rgba(0,0,0,.08);
  --container:1160px;
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;background:#fff;color:#222;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
img{max-width:100%;display:block}
a{color:inherit}
.container{width:min(var(--container),92%);margin-inline:auto}
body, p, li, a, label, input, select, textarea, summary, small { color:#222; }
h1,h2,h3,h4,h5,h6{ color:#1b1b1b; letter-spacing:-0.01em; }

/* Typography tweaks */
h1{font-family:Poppins,Inter,sans-serif;font-weight:700}
.section p{line-height:1.7}

/* Links – Micro-Animation (Underline-Reveal) */
a.link{
  position:relative;
  font-weight:700;
  text-decoration:none;
  transition: color .25s ease;
}
a.link::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:100%; height:2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
a.link:hover{ color: var(--bronze); }
a.link:hover::after{ transform: scaleX(1); }

/* Buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:999px;border:2px solid var(--anthrazit);background:#fff;color:var(--anthrazit);font-weight:700;text-decoration:none;transition:.2s ease}
.btn:hover{transform:translateY(-1px)}
.btn.secondary{background:transparent;color:var(--anthrazit)}
.cta{padding:10px 16px;border-radius:999px;background:#fff;color:var(--anthrazit);font-weight:700;text-decoration:none;border:2px solid var(--anthrazit);box-shadow:var(--shadow)}

/* Forms */
input, select, textarea{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid #ddd;
  background:#fff;
}
label{font-weight:600;display:block;margin:6px 0 6px}
textarea{resize:vertical}

/* Header */
header{position:sticky;top:0;z-index:50;background:var(--lightgrey);backdrop-filter:saturate(180%) blur(8px);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;gap:10px;align-items:center;font-weight:700}
.brand .logo{width:40px;height:40px;border-radius:50%;background:#bbb;display:grid;place-items:center;color:#fff;font-family:Poppins,Inter,sans-serif}
.menu{display:flex;gap:22px;align-items:center}
.menu a{font-weight:500;text-decoration:none;opacity:.9}
.burger{display:none}
@media (max-width:880px){.menu{display:none}.burger{display:block}}

/* Mobile Drawer */
.drawer{position:fixed;inset:0 0 0 auto;width:min(78vw,360px);background:#fff;transform:translateX(100%);transition:.3s ease;box-shadow:-12px 0 24px rgba(0,0,0,.12);padding:24px}
.drawer.open{transform:none}
.drawer a{display:block;padding:14px 0;border-bottom:1px solid #eee;text-decoration:none;color:#222}
.drawer .cta{display:inline-block;margin-top:14px}

/* Hero (hellgrau, dunkle Typo) */
.hero{background:var(--lightgrey);color:#222;position:relative;isolation:isolate}
.hero .inner{display:grid;grid-template-columns:1fr;text-align:center;gap:0;align-items:center;padding:96px 0}
.hero h1{font-size:clamp(32px,4.6vw,56px);line-height:1.08;margin:0 0 14px}
.hero p{margin:0 0 20px;font-size:clamp(16px,2.2vw,20px);line-height:1.6;color:#333}

/* Sections */
.section{padding:54px 0}
.section--tight{padding:36px 0}
.section h2{font-family:Poppins,Inter,sans-serif;font-weight:700;font-size:clamp(22px,3.2vw,34px);margin:0 0 18px}
.muted{color:#555}

/* Leistungs-Kacheln – helles Weiß-Overlay auf Bildern + Kontrast-Trenner */
.tiles{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
@media (max-width:960px){.tiles{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.tiles{grid-template-columns:1fr}}
.tile{
  background:#fff;border:1px solid #eee;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);
  transition:transform .25s ease;
}
.tile:hover{transform:translateY(-4px)}
.tile .media{position:relative;overflow:hidden;height:170px}
.tile .media img{width:100%;height:100%;object-fit:cover;filter:brightness(0.95);transition:transform .4s ease}
.tile:hover .media img{transform:scale(1.02)}
/* Weißes Overlay – macht Bilder freundlicher und Text unten lesbar */
.tile .media::after{
  content:"";position:absolute;inset:0;
  background:rgba(255,255,255,.35);mix-blend-mode:lighten;
  transition:background .3s ease;
}
.tile:hover .media::after{background:rgba(255,255,255,.5)}
.tile .body{
  padding:16px;background:#fff;position:relative;z-index:1;
}
/* Feiner Separator zwischen Bild und Text (Kontrast-Booster) */
.tile .body::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background: linear-gradient(to right, rgba(0,0,0,.08), rgba(0,0,0,.04), rgba(0,0,0,.08));
}
.tile .body h3{margin:4px 0 6px;color:#111;font-weight:600}
.tile .body p{color:#333;font-size:15px;line-height:1.6;margin-bottom:10px}

/* Über uns – Partnerchips (integriert) */
.partners{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.partner-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid #eee;border-radius:999px;padding:8px 12px;background:#fff;box-shadow:var(--shadow)}
.partner-chip img{height:20px}

/* Referenzen-Grid */
.refs{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
.refs img{aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid #eee}
@media (max-width:900px){.refs{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.refs{grid-template-columns:1fr}}

/* FAQ */
details{background:#fff;border:1px solid #eee;border-radius:var(--radius);padding:14px 16px;margin-bottom:10px}
summary{font-weight:600;cursor:pointer}

/* CTA-Band (hellgrau) */
.cta-band{
  background:var(--lightgrey);color:#222;border-radius:var(--radius);padding:24px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;box-shadow:var(--shadow)
}
.cta-band :is(h2,p,small,a){color:#222}

/* Footer (dunkel) */
footer{background:var(--anthrazit);color:#fff;padding:36px 0;margin-top:40px}
footer a{opacity:.9;color:#fff}

/* Utilities */
.bg-grey{background:var(--lightgrey)}
.spaced{margin-top:10px}
.navlinks a{margin-right:14px}

/* Accessibility */
:focus-visible{outline:3px solid var(--bronze);outline-offset:2px}
.visually-hidden-focusable{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.visually-hidden-focusable:focus{
  position:static;width:auto;height:auto;padding:8px 12px;background:var(--bronze);color:#fff;border-radius:8px
}

/* Motion-Reduce */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}


/* Kontakt-Hero: Bild kleiner & harmonisch */
.hero--contact .inner{
  grid-template-columns: 1.1fr 0.9fr;   /* Text / Bild */
  align-items: center;
  padding: 72px 0;                      /* etwas kompakter als Startseite */
}
@media (max-width: 980px){
  .hero--contact .inner{ grid-template-columns: 1fr; }
  .contact-hero-card{ max-width: 520px; margin: 12px auto 0; }
}
.contact-hero-card{ max-width: 520px; justify-self: center; }
.contact-heroimg{
  height: 440px;                         /* kleiner als Standard */
  width: 200%;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: var(--shadow);
}

/* Checkbox & Datenschutzerklärung enger setzen */
label.consent{
  display:flex;
  gap:6px;
  align-items:center;
  margin-top:4px;
  line-height:1.4;
}
label.consent input[type="checkbox"]{
  transform:scale(1.1);
  margin-top:0;
}


/* Breadcrumbs (Brotkrumen) */
.crumbs{background:#f6f7f9;border-bottom:1px solid #eee;font-size:14px}
.crumbs .container{padding:8px 0}
.crumbs a{color:#555;text-decoration:none;border-bottom:1px dotted #bbb}
.crumbs a:hover{color:#222;border-color:#888}
.crumbs span{color:#999}