/* Kontakt – gerhild.ch; baut auf bestehendem style.css auf */
.kontakt-page{background:#f7faf7}
.kontakt-hero{min-height:510px;display:grid;grid-template-columns:minmax(0,48%) minmax(0,52%);background:#f5f9f5}
.kontakt-hero-copy{padding:46px clamp(28px,5vw,78px) 36px;position:relative;z-index:1;background:linear-gradient(90deg,#f5f9f5 85%,rgba(245,249,245,.93))}
.kontakt-hero-copy h1{font:normal clamp(34px,3.1vw,53px)/1.12 Georgia,'Times New Roman',serif;color:#00683e;margin:0 0 5px}
.kontakt-hero-copy h2{font:clamp(21px,2vw,31px)/1.2 Georgia,'Times New Roman',serif;letter-spacing:.04em;color:#343434;margin:0 0 18px}
.kontakt-green-line{width:76px;height:2px;background:#008f4f;margin:0 0 25px}
.kontakt-hero-copy p,.kontakt-hero-copy address{font:normal 17px/1.52 Arial,Helvetica,sans-serif;max-width:480px;margin:0 0 13px}
.kontakt-hero-copy address{color:#00683e;font-style:normal}
.kontakt-hero-copy .kontakt-phone{font-size:25px;font-weight:700;margin-bottom:4px}
.kontakt-hero-copy a{color:#00683e;text-decoration:none}
.kontakt-hero-copy .kontakt-hint{font-size:15px;margin-top:12px;color:#445149}
.kontakt-photo{min-height:510px;background-image:url('assets/kontakt-blumen-telefon.jpg');background-repeat:no-repeat;background-position:center center;background-size:cover}
.kontakt-details{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-top:43px;padding-bottom:62px;gap:0}
.kontakt-detail{padding:0 24px 0 28px;min-width:0;border-left:1px solid #cfe0d1}
.kontakt-detail:first-child{border-left:0;padding-left:0}
.kontakt-icon{width:62px;height:62px;border-radius:50%;background:#e3efe5;color:#00683e;display:grid;place-items:center;font:normal 33px Georgia,serif;margin-bottom:20px}
.kontakt-detail h3{font:normal clamp(21px,1.7vw,26px)/1.18 Georgia,serif;color:#00683e;margin:0 0 17px}
.kontakt-detail p{font-size:16px;line-height:1.55;margin:0 0 22px}
.kontakt-detail-link{display:inline-block;color:#008f4f;font-size:clamp(17px,1.7vw,24px);font-weight:700;text-decoration:none;overflow-wrap:anywhere}
.kontakt-mail{font-size:clamp(15px,1.4vw,21px)}
.kontakt-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 17px;border-radius:12px;color:white;background:#007b4a;text-decoration:none;font-size:16px;line-height:1.2;white-space:nowrap}
.kontakt-button:hover,.kontakt-button:focus-visible{background:#005f3a}
@media(max-width:1000px){.kontakt-details{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}.kontakt-detail:nth-child(3){border-left:0;padding-left:0}}
@media(max-width:700px){.kontakt-hero{grid-template-columns:1fr}.kontakt-hero-copy{padding:36px 24px 28px}.kontakt-photo{min-height:300px}.kontakt-details{grid-template-columns:1fr;padding-top:34px;padding-bottom:35px;gap:25px}.kontakt-detail,.kontakt-detail:nth-child(3){border-left:0;border-top:1px solid #cfe0d1;padding:22px 0 0}.kontakt-detail:first-child{border-top:0;padding-top:0}}

/* Kontakt: weicher Bildverlauf nach links */
.kontakt-photo {
    position: relative;
    overflow: hidden;
}

.kontakt-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        #f5f9f5 0%,
        rgba(245,249,245,0.85) 12%,
        rgba(245,249,245,0.35) 32%,
        transparent 55%
    );
    pointer-events: none;
}

/* Parkplatzsymbol */
.kontakt-detail:nth-child(3) .kontakt-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 2px solid #008f4f;
    border-radius: 6px;
    font: bold 25px Arial, sans-serif;
    color: #008f4f;
}

/* Kontakt: weicher Übergang zum hellgrünen Hintergrund */
.kontakt-photo::after {
    background: linear-gradient(
        to right,
        #eaf3ec 0%,
        rgba(234,243,236,0.97) 8%,
        rgba(234,243,236,0.75) 22%,
        rgba(234,243,236,0.30) 40%,
        transparent 62%
    );
}

/* Einheitliche Symbole für ÖV und Parkplatz */
.kontakt-detail:nth-child(2) .kontakt-icon,
.kontakt-detail:nth-child(3) .kontakt-icon {
    width: 62px;
    height: 62px;
    border: 0;
    border-radius: 50%;
    background: #e3efe5;
    color: #00683e;
    display: grid;
    place-items: center;
}