/* Kontakt. Baut auf web-entwicklung.css und atelier.css (helle Hero-Variante) auf. */

/* Schnellwege im Kopfbereich */
.wd .contact-hero .grid{grid-template-columns:1.05fr .95fr}
.wd .contact-hero h1{font-size:clamp(34px,4.4vw,54px);text-wrap:balance}
.wd .quick{display:grid;gap:12px}
.wd .qk{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--g200);border-radius:18px;padding:16px 20px;
  box-shadow:0 10px 26px rgba(11,37,48,.07);transition:transform .16s,box-shadow .16s,border-color .16s}
.wd .qk:hover{transform:translateY(-2px);border-color:#cfdbe1;box-shadow:0 16px 34px rgba(11,37,48,.11)}
.wd .qk .ic{width:48px;height:48px;border-radius:14px;background:var(--tint);color:var(--orange);display:grid;place-items:center;font-size:23px;flex:none}
.wd .qk > span:nth-child(2){flex:1;min-width:0}
.wd .qk small{display:block;color:var(--g500);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.wd .qk b{display:block;font-size:17px;overflow-wrap:anywhere}
.wd .qk > svg:last-child{color:var(--g400);font-size:18px;transition:transform .16s,color .16s}
.wd .qk:hover > svg:last-child{color:var(--orange);transform:translateX(3px)}

/* Formular (unverändert, Tailwind) und Seitenspalte */
.wd .contact-form-head{padding-bottom:10px}
.contact-split{background:#f8fafb;display:grid;grid-template-columns:1.25fr .75fr;gap:24px;align-items:start;
  padding:0 max(20px,calc((100% - 1140px) / 2)) clamp(64px,7vw,104px)}
.contact-form-card{background:#fff;border:1px solid #dde4e8;border-radius:22px;padding:clamp(22px,3vw,36px);box-shadow:0 18px 44px rgba(11,37,48,.08)}
.contact-form-card button[type=submit]{border-radius:12px;padding:14px 26px}
.wd.contact-side{background:transparent;display:grid;gap:16px}
.wd .side-card{background:#fff;border:1px solid var(--g200);border-radius:20px;padding:22px}
.wd .side-card h3{display:flex;gap:10px;align-items:center;font-size:17px;margin-bottom:14px}
.wd .side-card h3 svg{color:var(--orange);font-size:20px}
.wd .side-hours{display:grid;gap:4px;font-size:15px}
.wd .side-hours > div{display:flex;justify-content:space-between;gap:12px}
.wd .side-hours dd{margin:0;font-variant-numeric:tabular-nums}
.wd .side-list{list-style:none;padding:0;display:grid;gap:10px;font-size:15px}
.wd .side-list li{display:flex;gap:10px;align-items:center}
.wd .side-list svg{color:var(--teal);font-size:18px}

/* Anfahrt mit Karte */
.wd .directions{align-items:start}
.wd .dir-text{display:grid;gap:14px;color:var(--g700);font-size:16px;margin-top:6px}
.wd .map-card{background:#fff;border:1px solid var(--g200);border-radius:22px;overflow:hidden;box-shadow:0 18px 44px rgba(11,37,48,.08)}
.wd .map-card .map{height:clamp(260px,32vw,360px);position:relative;isolation:isolate}
.wd .leaflet-container img{max-width:none}
.wd .map-info{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 20px}
.wd .map-info small{display:block;color:var(--g500);font-size:13px}
.wd .map-links{display:flex;gap:8px;flex-wrap:wrap}
.wd .map-links a{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:650;padding:7px 13px;border-radius:99px;
  background:var(--g50);border:1px solid var(--g200)}
.wd .map-links a:hover{border-color:#cfdbe1}
.wd .map-links svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:980px){
 .wd .contact-hero .grid{grid-template-columns:1fr}
 .contact-split{grid-template-columns:1fr}
}

.wd .side-list-text li{align-items:flex-start;line-height:1.5}
.wd .side-list-text svg{margin-top:4px;flex:none;color:var(--orange)}