/* ============================================================
   KONTAKT – Kontaktinformationen (.kc-info) + Terminbereich (.kc-appt)
   Echtes HTML/CSS, individuell animierbare Icons, responsive.
   ============================================================ */

.kc-info, .kc-appt{
  position:relative; width:100%; box-sizing:border-box;
  font-family:'Jost',sans-serif; overflow:hidden;
}

/* ---------- Abschnitt 1: Kontaktinformationen ---------- */
/* Der Block wird per negativem margin-top echt nach oben gezogen und
   ueberlappt die Unterkante des Heros. Kein transform / kein position:relative-top,
   d. h. der urspruengliche Platz verschwindet vollstaendig und alle folgenden
   Abschnitte ruecken mit nach oben. */
:root{ --kc-overlap: clamp(40px, 5vw, 86px); }
.kc-info{
  /* obere --kc-overlap px transparent -> Hero scheint durch, darunter wieder Beige */
  background:linear-gradient(180deg,
    rgba(244,239,230,0) 0,
    rgba(244,239,230,0) var(--kc-overlap),
    #F4EFE6 var(--kc-overlap));
  padding:0 clamp(18px,3.4vw,52px) clamp(30px,3.6vw,56px);
  margin-top:calc(-1 * var(--kc-overlap));
  overflow:visible;           /* Kartenschatten darf ueber die Heros-Kante ragen */
  z-index:1;                  /* Karte liegt ueber dem Hero */
}
.kc-info-card{
  position:relative; max-width:1560px; margin:0 auto;
  background:#FFFFFF; border:1px solid #E6E1D3; border-radius:22px;
  box-shadow:0 22px 46px -30px rgba(51,68,58,.32), 0 2px 8px rgba(51,68,58,.05);
  padding:clamp(26px,3vw,44px) clamp(18px,3vw,44px);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(16px,2.4vw,36px);
}
/* Karte: Icon oben, darunter zentriert Überschrift, Haupt- und Zusatzinfo.
   Volle Kartenbreite für den Text, gleiche Breite und Höhe für alle vier. */
.kc-col{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  min-width:0; height:100%;
  padding:clamp(4px,.6vw,10px) clamp(10px,1.4vw,22px);
  box-sizing:border-box;
}
.kc-col + .kc-col::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px;
  background:linear-gradient(180deg,rgba(146,160,140,0),rgba(146,160,140,.55) 22%,rgba(146,160,140,.55) 78%,rgba(146,160,140,0));
}
.kc-ico{
  flex:none;
  width:clamp(64px,5.6vw,92px); height:clamp(64px,5.6vw,92px);
  margin-bottom:clamp(12px,1.2vw,18px);
}
.kc-ico img{width:100%; height:100%; object-fit:contain; display:block;}
.kc-txt{
  min-width:0; width:100%;
  display:flex; flex-direction:column; align-items:center;
}
.kc-lbl{
  display:block; font-size:clamp(13px,1vw,16px); font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:#18351F; margin:0 0 clamp(8px,.8vw,12px);
}
.kc-val{
  margin:0; font-size:clamp(15.5px,1.1vw,18px); font-weight:400; line-height:1.65;
  color:#2B2C2B; overflow-wrap:break-word; word-break:normal; hyphens:none;
}
.kc-val a{color:#2B2C2B; text-decoration:none; transition:color .3s ease;}
.kc-val a:hover{color:#3E7A50;}
.kc-sub{
  margin:clamp(8px,.8vw,12px) 0 0; font-size:clamp(13.5px,.92vw,15px);
  font-weight:300; line-height:1.6; color:#5C5D5C;
  overflow-wrap:break-word; word-break:normal;
}
/* Adresse: Name in einer Zeile, danach Straße und Ort */
.kc-col-adresse .kc-val br:first-of-type{display:none;}
/* E-Mail nie nach "kls-" umbrechen */
.kc-col-mail .kc-val, .kc-col-mail .kc-val a{white-space:nowrap; word-break:keep-all;}
/* Öffnungszeiten und Telefonzeiten in natürlichen Zeilen */
.kc-col-telefon .kc-sub, .kc-col-mail .kc-sub{max-width:26ch;}
.kc-deco-corner{position:absolute; right:-6px; top:-4px; width:clamp(90px,8vw,140px); height:auto; opacity:.85; pointer-events:none;}

/* ---------- Abschnitt 2: Termin ---------- */
.kc-appt{
  background:#F4EFE6;
  padding:0 clamp(18px,3.4vw,52px) clamp(30px,3.6vw,56px);
}
.kc-form + .kc-appt{margin-top:calc(-1 * clamp(4px,.8vw,14px));}
.kc-appt-card{
  position:relative; max-width:1560px; margin:0 auto; overflow:hidden;
  background:linear-gradient(105deg,#F0F3EA 0%,#F5F7F0 55%,#F2F5EC 100%);
  border:1px solid #DDE4D6; border-radius:22px;
  box-shadow:0 22px 46px -30px rgba(51,68,58,.34), inset 0 0 0 1px rgba(255,255,255,.7);
  padding:clamp(30px,3.4vw,52px) clamp(22px,3.6vw,64px);
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; column-gap:clamp(22px,3vw,52px);
}
.kc-appt-ico{width:clamp(110px,10.4vw,176px); height:clamp(110px,10.4vw,176px); position:relative; z-index:1;}
.kc-appt-ico{border-radius:50%; background:#E7EDE0; display:flex; align-items:center; justify-content:center;}
.kc-appt-ico img{width:52%; height:52%; display:block; object-fit:contain;}
.kc-appt-txt{position:relative; z-index:1; min-width:0;}
.kc-appt-h{
  margin:0 0 14px; font-family:'Cormorant Garamond',serif; font-weight:600;
  font-size:clamp(28px,2.55vw,42px); line-height:1.2; color:#1F4B33;
}
.kc-appt-p{margin:0; font-size:clamp(16px,1.2vw,20px); font-weight:300; line-height:1.6; color:#3D4A3F;}
.kc-appt-cta{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:14px;}
.kc-appt-book{
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  min-height:60px; padding:0 clamp(26px,3vw,48px); border-radius:40px;
  background:#3D5F49; color:#F2EFE6; text-decoration:none;
  font-size:clamp(14px,1.05vw,17px); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap; box-shadow:0 14px 26px -14px rgba(31,58,42,.7);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.kc-appt-book:hover{transform:translateY(-2px); background:#345340; box-shadow:0 18px 30px -14px rgba(31,58,42,.75);}
.kc-appt-book svg{width:22px; height:22px; flex:none;}
.kc-appt-note{font-size:clamp(14px,1vw,16px); color:#3D4A3F; font-weight:400;}
.kc-deco-leaf-l{position:absolute; left:8px; bottom:0; width:clamp(110px,10.5vw,180px); height:auto; opacity:.9; pointer-events:none; z-index:0;}
.kc-deco-leaf-r{position:absolute; right:0; bottom:0; width:clamp(90px,9vw,150px); height:auto; opacity:.55; pointer-events:none; z-index:0;}

/* ---------- Icon-Animation (dezentes Einblenden + Schweben, gestaffelt) ---------- */
@keyframes kcRise{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);}}
@keyframes kcFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);}}
.kc-ico{
  animation:kcRise .8s cubic-bezier(.22,.61,.36,1) both, kcFloat 5.5s ease-in-out infinite;
  animation-delay:var(--kc-delay,0s), calc(var(--kc-delay,0s) + .8s);
  will-change:transform;
}
.kc-ico-adresse{--kc-delay:.05s;}
.kc-ico-telefon{--kc-delay:.2s;}
.kc-ico-mail{--kc-delay:.35s;}
.kc-ico-zeiten{--kc-delay:.5s;}
.kc-ico-kalender{--kc-delay:.25s;}
@media (prefers-reduced-motion:reduce){
  .kc-ico{animation:none !important; opacity:1; transform:none;}
  .kc-appt-book{transition:none;}
}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  /* Zwei Spalten × zwei Zeilen, keine senkrechten Trenner mehr */
  .kc-info-card{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:clamp(18px,2.6vw,28px); column-gap:clamp(14px,2vw,26px);}
  .kc-col::before, .kc-col + .kc-col::before{display:none !important;}
  .kc-col{
    padding:clamp(20px,2.6vw,28px) clamp(14px,2vw,22px);
    border:1px solid rgba(146,160,140,.28); border-radius:16px;
    background:#FCFBF7;
  }
  .kc-appt-card{grid-template-columns:auto minmax(0,1fr); row-gap:26px;}
  .kc-appt-cta{grid-column:1 / -1; align-items:flex-start; flex-direction:row; flex-wrap:wrap; gap:16px 22px;}
  .kc-appt-h br, .kc-appt-p br{display:none;}
}

/* ---------- Mobil ---------- */
@media (max-width:640px){
  /* Eine Karte pro Zeile */
  .kc-info-card{grid-template-columns:minmax(0,1fr); row-gap:16px; padding:18px 16px;}
  .kc-col{
    padding:24px 18px !important;
    border:1px solid rgba(146,160,140,.3); border-radius:16px; background:#FCFBF7;
  }
  .kc-col::before{display:none !important;}
  .kc-ico{width:72px; height:72px; margin-bottom:14px;}
  .kc-lbl{font-size:13.5px;} .kc-val{font-size:16px;} .kc-sub{font-size:14px;}
  .kc-col-telefon .kc-sub, .kc-col-mail .kc-sub{max-width:30ch;}
  .kc-appt-card{grid-template-columns:1fr; text-align:center; justify-items:center; row-gap:20px; padding:32px 22px 34px;}
  .kc-appt-ico{width:120px; height:120px;}
  .kc-appt-h{font-size:clamp(26px,7vw,30px);}
  .kc-appt-p{font-size:16px;}
  .kc-appt-cta{align-items:center; justify-content:center; flex-direction:column; width:100%;}
  .kc-appt-book{width:100%; max-width:420px; min-height:56px; white-space:normal; text-align:center; letter-spacing:.1em; font-size:14px;}
  .kc-deco-leaf-l{width:110px; opacity:.55;}
  .kc-deco-leaf-r{width:80px; opacity:.4;}
}