.appointment-page { background: #f5f3ee; }
.appointment-intro { position: relative; isolation: isolate; overflow: hidden; padding: 64px 24px 148px; background: radial-gradient(ellipse at 80% 15%, #58343c 0, #330e13 55%, #240b10 100%); color: #fff; }
.appointment-intro-inner { position: relative; z-index: 1; max-width: 940px; margin: auto; text-align: center; }
.appointment-intro h1 { margin: 0; font: 500 clamp(30px, 3.2vw, 44px)/1.12 Cormorant, Georgia, serif; text-wrap: balance; }
.appointment-intro h1 strong { font-weight: 600; }
.appointment-intro-inner > p { max-width: 700px; margin: 16px auto 28px; color: #e0d3d1; font-size: 16px; line-height: 1.6; text-wrap: balance; }
.appointment-video { margin-top: 28px; width: min(100%, 700px); margin: 28px auto 0; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: #1c1517; box-shadow: 0 20px 55px #18040840; }
.appointment-video video, .appointment-video-placeholder, .appointment-video-placeholder > img { display: block; width: 100%; height: 100%; }
.appointment-video video { object-fit: contain; }
.appointment-video-placeholder { position: relative; }
.appointment-video-placeholder > img { object-fit: cover; object-position: 61% 38%; }
.appointment-video-caption { position: absolute; inset: auto 0 0; padding: 50px 24px 24px; color: #fff; background: linear-gradient(transparent, #1a0d15ed); text-align: left; }
.appointment-video-caption > span { display: inline-block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; padding: 7px 10px; background: #330e13; border: 1px solid #ffffff60; border-radius: 3px; }
.appointment-video-caption p { margin: 10px 0 0; font-size: 15px; line-height: 1.5; max-width: 440px; }
.appointment-booking { position: relative; width: min(1140px, calc(100% - 48px)); margin: -86px auto 0; padding-bottom: 72px; scroll-margin-top: 110px; }
.appointment-card { background: #fff; border-radius: 14px; padding: 12px; box-shadow: 0 18px 48px #330e1310; }
/* Reserve space only until Calendly reports its actual height. No fixed
   minimum height: the calendar and longer questions form need different sizes. */
.appointment-widget { width: 100%; min-width: 0; height: 750px; }
.appointment-widget iframe { display: block; width: 100%; min-width: 0; border: 0; }
.appointment-page [hidden] { display: none !important; }
.appointment-status { color: #665652; font-size: 14px; text-align: center; line-height: 1.6; margin: 0; }
.appointment-status:not(:empty) { padding: 20px 16px; }
.appointment-help { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 24px; padding: 22px 16px; font-size: 12px; color: #665652; text-align: center; line-height: 1.6; }
.appointment-help button { border: 0; background: transparent; font: inherit; color: inherit; padding: 4px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.appointment-return { display: block; width: fit-content; margin: 28px auto 0; font-size: 14px; color: #665652; }
.appointment-noscript { text-align: center; color: #665652; font-size: 14px; }
@media(max-width: 767px) {
  .appointment-intro { padding: 36px 20px 92px; }
  .appointment-intro h1 { font-size: clamp(28px, 7vw, 36px); }
  .appointment-intro-inner > p { font-size: 14px; margin: 14px auto 22px; }
  .appointment-video-caption { padding: 36px 16px 14px; }
  .appointment-video-caption p { font-size: 12px; margin-top: 7px; }
  .appointment-video-caption > span { font-size: 10px; padding: 5px 7px; }
  .appointment-booking { width: 100%; margin-top: -52px; padding-bottom: 48px; }
  .appointment-card { padding: 0; border-radius: 0; }
  .appointment-widget { height: 1000px; }
}
@media(max-width: 343px) { .appointment-booking { width: 100%; } .appointment-card { border-radius: 0; } }

/* Original brand ampersand, decorative and behind the video/content. */
.appointment-intro::before { content: ""; position: absolute; z-index: 0; left: -100px; top: 20px; width: min(72vw, 850px); height: 820px; background: url("assets/markenzeichen-original.svg") center/contain no-repeat; opacity: .13;  pointer-events: none; }
@media(max-width: 767px) { .appointment-intro::before { left: -110px; top: 80px; width: 550px; height: 500px; opacity: .10; } .appointment-video { margin-top: 24px; } }

/* Click-to-load booking video: native media engine, local corporate controls. */
.brand-video { position: relative; width:100%; height:100%; background:#180b0e; color:#fff; }
.brand-video [hidden] { display:none !important; }
.brand-video video { display:block; width:100%; height:100%; object-fit:contain; }
.video-start { position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-end; padding:0 0 7%; box-sizing:border-box; flex-direction:column; gap:12px; border:0; color:white; background:linear-gradient(transparent 65%,#180b0e26); cursor:pointer; font:600 15px Montserrat,sans-serif; }
.video-start > span:first-child { display:grid; place-items:center; padding-left:4px; width:76px; height:76px; border-radius:50%; border:2px solid #ffffffc0; background:#b43830; box-shadow:0 6px 28px #0004; font-size:28px; }
.video-start:hover > span:first-child { background:#c44338; transform:scale(1.05); }
.video-controls { position:absolute; bottom:0; left:0; right:0; display:flex; align-items:center; gap:10px; padding:10px 12px; background:#330e13f5; font:500 12px Montserrat,sans-serif; }
.video-controls button,.video-controls select { min-height:40px; min-width:40px; border:1px solid #ffffff50; border-radius:4px; background:#330e13; color:#fff; font:600 12px Montserrat,sans-serif; cursor:pointer; padding:5px 8px; }
.video-controls button:hover { background:#693039; }
.video-controls input { flex:1; min-width:35px; accent-color:#f16758; cursor:pointer; }
.video-controls output { white-space:nowrap; font-variant-numeric:tabular-nums; }
.brand-video :focus-visible { outline:3px solid #ffb2a8; outline-offset:2px; }
.video-status { position:absolute; left:12px; right:12px; top:12px; padding:8px 12px; background:#330e13ed; color:#fff; font:500 13px/1.4 Montserrat,sans-serif; margin:0; }
.video-fallback { position:absolute; inset:35% 10% auto; padding:18px; color:white; background:#330e13f5; text-align:center; font:500 14px/1.6 Montserrat,sans-serif; }
.video-fallback a { color:white; text-decoration:underline; }
.video-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.brand-video:fullscreen { display:flex; align-items:center; justify-content:center; }
@media(max-width:500px) { .video-controls { gap:5px; padding:6px; } .video-controls button,.video-controls select { padding:4px; min-width:34px; } .video-controls output { font-size:10px; } .video-start > span:first-child { width:60px; height:60px; font-size:24px; } }

.video-controls { transition:opacity .2s ease; }
.video-idle .video-controls { opacity:0; pointer-events:none; }
.video-idle { cursor:none; }
@media(prefers-reduced-motion:reduce) { .video-controls { transition:none; } }

.brand-video:not(.video-started) video { filter:brightness(1.12); }

.video-controls [data-video-play] { font-size:24px; line-height:1; }

/* Compact appointment intro without changing video dimensions. */
.appointment-intro { padding: 24px 24px 54px; }
.appointment-intro h1 { font-size: clamp(28px, 2.8vw, 38px); line-height: 1.08; }
.appointment-video { margin-top: 16px; }
.appointment-booking { margin-top: -24px; padding-bottom: 32px; }
.appointment-card { padding: 0; }
.appointment-help { padding: 10px 12px; }
@media (max-width: 767px) {
 .appointment-intro { padding: 22px 16px 38px; }
 .appointment-video { margin-top: 14px; }
 .appointment-booking { margin-top: -14px; padding-bottom: 24px; }
}

/* Contrast backing only for the start label, leaving the circular play button unchanged. */
.video-start > span:last-child { background: rgba(0, 0, 0, .62); color: #fff; padding: 8px 14px; border-radius: 8px; line-height: 1.35; }

/* Raise the decorative ampersand and extend the colored area below the video. */
.appointment-intro::before { top: -65px; }
.appointment-intro { padding-bottom: 94px; }
@media (max-width: 767px) {
 .appointment-intro::before { top: -10px; }
 .appointment-intro { padding-bottom: 66px; }
}