/* =============================================================
   Buchungs-Ebene (Cal.com)
   Wird von jedem Element mit [data-open-contact] geoeffnet.
   Markup und Verhalten stehen in Style/booking.js — hier nur das Aussehen.
   Einbinden:  <link rel="stylesheet" href="<pfad>/Style/booking.css">
   ============================================================= */

/* Buchungs-Ebene: faehrt von unten herein und laesst oben rund 20 % der Seite stehen.
   Kein display-Wechsel, sonst liefe die Bewegung nicht — stattdessen visibility. */
.contact-layer{position:fixed;inset:0;z-index:200;visibility:hidden;pointer-events:none}
.contact-layer.open{visibility:visible;pointer-events:auto}
.cl-backdrop{position:absolute;inset:0;background:rgba(12,14,17,.35);opacity:0;transition:opacity .34s ease}
.contact-layer.open .cl-backdrop{opacity:1}
/* Die Ebene reicht bis knapp unter die Navigationspille (Pille endet bei 103 px). */
.cl-card{position:absolute;left:0;right:0;top:122px;bottom:0;padding-bottom:28px;background:#fff;
  border-radius:22px 22px 0 0;display:flex;flex-direction:column;justify-content:center;
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  box-shadow:0 -26px 64px -30px rgba(12,14,17,.6);
  transform:translateY(100%);transition:transform .46s cubic-bezier(.22,.72,.24,1)}
/* Passt der Inhalt nicht mehr, oben ausrichten — zentriert wuerde er sonst oben abgeschnitten. */
@media(max-height:820px){.cl-card{justify-content:flex-start}}
.contact-layer.open .cl-card{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.cl-card,.cl-backdrop{transition:none}}
/* Pfeil nach unten — die Ebene faehrt in dieselbe Richtung wieder heraus. */
.cl-close{position:sticky;top:12px;z-index:3;display:grid;place-items:center;margin:12px auto 0;width:46px;height:46px;
  border-radius:50%;border:none;background:rgba(14,58,74,.09);color:var(--navy);cursor:pointer;transition:background .15s,transform .15s}
.cl-close svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cl-close:hover{background:rgba(14,58,74,.18);transform:translateY(2px)}
@media(prefers-reduced-motion:reduce){.cl-close{transition:background .15s}}
/* Klassisches Schliessen-Kreuz in der oberen rechten Ecke der Ebene.
   Liegt ausserhalb der scrollenden Karte, damit es nie wegscrollt. */
.cl-x{position:absolute;top:138px;right:22px;z-index:4;display:grid;place-items:center;width:42px;height:42px;
  border-radius:50%;border:none;background:rgba(14,58,74,.09);color:var(--navy);font-size:23px;line-height:1;
  cursor:pointer;opacity:0;transform:translateY(18px);
  transition:opacity .3s .14s ease,transform .3s .14s ease,background .15s}
.contact-layer.open .cl-x{opacity:1;transform:none}
.cl-x:hover{background:rgba(14,58,74,.18)}
@media(prefers-reduced-motion:reduce){.cl-x{transition:background .15s}}
.cl-head{max-width:920px;margin:0 auto;padding:10px 24px 4px}
.cl-head .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);opacity:.72;margin-bottom:12px}
.cl-head .eyebrow .sq{width:9px;height:9px;background:var(--navy);border-radius:2px}
.cl-head h3{font-size:clamp(26px,3.4vw,38px);font-weight:900;letter-spacing:-.03em;color:var(--navy);line-height:1.06}
.cl-head p{font-size:16px;color:var(--navy);opacity:.82;line-height:1.55;max-width:56ch;margin-top:12px}
.contact-layer .cal-inline{min-width:0;width:100%;max-width:920px;margin:6px auto 0;border-radius:16px;background:#fff;box-shadow:0 30px 70px -34px rgba(14,58,74,.45)}
@media(max-width:560px){.cl-head{padding:8px 20px 4px}.cl-card{top:96px}.cl-x{top:110px;right:16px}}