:root{
  --bg:#f7f8fb; --card:#ffffff; --ink:#0b0d12; --muted:#5b6270;
  --brand:#ff8c1a; --brand-2:#ffb703; --radius:16px;
  --shadow:0 10px 26px rgba(17,23,41,0.12); --maxw:1200px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b0d12; --card:#11151c; --ink:#e9ecf2; --muted:#a4adbd; --shadow:0 10px 26px rgba(0,0,0,0.35); }
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0; font:16px/1.6 Inter,system-ui,Segoe UI,Roboto,Arial; color:var(--ink); background:var(--bg);}
a{color:inherit; text-decoration:none} img{max-width:100%; height:auto}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:12px; border:0; cursor:pointer;
     font-weight:700; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#081013; box-shadow:0 8px 22px rgba(255,140,26,0.25)}
.btn.whapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  font-family: inherit;
  color: #fff; /* weiße Schrift für besseren Kontrast */
  background: linear-gradient(135deg, #25D366, #128C7E);
  transition: filter 0.2s ease, transform 0.1s ease;
}

.btn.whapp:hover {
  filter: brightness(1.05);
}

.btn.whapp:active {
  transform: scale(0.98);
}.btn.secondary{background:transparent; border:2px solid var(--brand); color:var(--ink)}
.badge{display:inline-block; padding:4px 10px; border-radius:999px; border:1px solid #e1e6f0; color:var(--muted); font-size:12px}
@media (prefers-color-scheme: dark){ .badge{border-color:#2a3140} }
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.70); backdrop-filter:blur(10px); border-bottom:2px solid rgba(255,140,26,0.28)}
@media (prefers-color-scheme: dark){ header{ background: rgba(15,18,25,0.60); } }
.nav{display:flex; align-items:center; justify-content:space-between; height:72px; gap:16px}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.3px}
.brand img{width:145px; height:75px; border-radius:8px}
nav ul{display:flex; list-style:none; padding:0; margin:0; gap:14px}
nav a{padding:8px 12px; border-radius:10px; color:var(--muted)}
nav a:hover, nav a[aria-current="page"]{ background: rgba(255,140,26,0.12); color:var(--ink); border:1px solid rgba(255,140,26,0.28); }
.menu-toggle{display:none}

.hero{padding:56px 0 24px}
.hero-grid{display:grid; gap:24px; grid-template-columns:1.2fr .8fr; align-items:center}
.hero h1{font-size: clamp(30px, 4.2vw, 56px); line-height:1.06; margin:8px 0 12px}
.hero p{color:var(--muted); font-size:18px}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
.hero .visual{border-radius:24px; overflow:hidden; border: 1px solid rgba(255,140,26,0.22);
              background: radial-gradient(320px 140px at 30% 10%, rgba(255,140,26,0.14), transparent),linear-gradient(180deg,#fff,#f4f7fb)}
@media (prefers-color-scheme: dark){ .hero .visual{ background: radial-gradient(320px 140px at 30% 10%, rgba(255,140,26,0.12), transparent),linear-gradient(180deg,#0d1118,#0b0d12) } }

.grid{display:grid; gap:18px}
.cards{grid-template-columns:repeat(auto-fit, minmax(230px, 1fr))}
.card{background:var(--card); border:1px solid rgba(255,140,26,0.22); border-radius:16px; padding:18px; box-shadow:var(--shadow)}
.card h3{margin:0 0 8px; font-size:18px}
.card.warn {
  border: 1px solid rgba(255,140,26,0.35);
  background: linear-gradient(0deg, rgba(255,183,3,0.12), rgba(255,183,3,0.12)), var(--card);
  margin-bottom: 16px;
}
.card.warn h3 {
  margin-top: 0;
}

.section{padding:42px 0}
.section h2{font-size:28px; margin:0 0 10px; position:relative; padding-bottom:6px}
.section h2::after{content:""; position:absolute; left:0; bottom:-4px; width:64px; height:4px; border-radius:4px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));}
.sub{color:var(--muted); margin:0 0 18px}

.table{width:100%; border-collapse:collapse; border:1px solid #e9edf5; border-radius:12px; overflow:hidden}
.table th,.table td{padding:12px 14px; text-align:left}
.table tr:nth-child(odd){background:#fbfcff}
.table tr:nth-child(even){background:#f5f7fc}
.table th{background: linear-gradient(180deg, rgba(255,140,26,0.08), rgba(255,183,3,0.02));}
@media (prefers-color-scheme: dark){
 .table{border-color:#1f2633}
 .table tr:nth-child(odd){background:#12161f}
 .table tr:nth-child(even){background:#0e1219}
 .table th{background:#161b25}
}

.form{display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(220px,1fr))}
.form label{display:block; font-weight:600; font-size:14px; margin-bottom:6px}
.form input, .form textarea, .form select{width:100%; padding:10px 12px; border-radius:10px; border:1px solid #d7dce6; background:#fff; color:#0b0d12}
@media (prefers-color-scheme: dark){ .form input, .form textarea, .form select{ background:#0e1219; color:#e9ecf2; border-color:#2a3140 } }
.form textarea{min-height:120px; grid-column:1/-1}

.map-consent{border:1px dashed #c7ceda; padding:18px; border-radius:12px; text-align:center; background:#fff}
@media (prefers-color-scheme: dark){ .map-consent{background:#0e1219; border-color:#2a3140} }

footer{padding:28px 0 48px; color:var(--muted); border-top:2px solid rgba(255,140,26,0.28)}

.reveal{opacity:0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease}
.reveal.show{opacity:1; transform:none}

.price-grid{ display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* --- Hover/Fokus-Expand nur mit CSS --- */
.pi{
  cursor: pointer;                 /* zeigt Interaktivität */
  --more-max: 220px;               /* maximale Höhe für den Text */
  transition: box-shadow .2s ease, transform .2s ease;
}
.pi:hover{
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  transform: translateY(-2px);
}

/* Detailtext standardmäßig verstecken */
.pi-body p{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s ease, opacity .25s ease;
}

/* Beim Hover ODER Tastatur-Fokus öffnen */
.pi:hover .pi-body p,
.pi:focus-within .pi-body p{
  max-height: var(--more-max);
  opacity: 1;
}

/* Tastatur-Fokus gut sichtbar machen */
.pi:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,140,26,.25), 0 8px 24px rgba(0,0,0,.06);
}

/* Weniger Bewegung, wenn vom User gewünscht */
@media (prefers-reduced-motion: reduce){
  .pi, .pi-body p{ transition: none; }
}

/* ===========================================
   MODAL DELUXE — glossy, glow & smooth vibes
   =========================================== */

/* Backdrop: animierbar + leichter Vignette-Glow */
.modal-backdrop{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;

  /* mehr Tiefe durch Layer */
  background:
    radial-gradient(60% 80% at 50% 10%, rgba(255,140,26,.12), transparent 60%),
    rgba(6,8,12,.60);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility .28s linear, backdrop-filter .28s ease;
}
.modal-backdrop.open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Glass-Effekt, wenn verfügbar */
@supports (backdrop-filter: blur(12px)){
  .modal-backdrop{ backdrop-filter: blur(12px) saturate(1.05); background: rgba(6,8,12,.45); }
}

/* Dialog-Karte */
.modal{
  position: relative;
  width: min(920px, 98vw);
  max-height: min(92vh, 100dvh - 48px);
  background: var(--card);
  color: var(--ink);
  border-radius: 18px;
  border: 1px solid #e1e6f0;
  box-shadow:
    0 22px 60px rgba(0,0,0,.20),
    0 4px 16px rgba(0,0,0,.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;

  /* Startzustand (für Pop-In) */
  transform: translateY(20px) scale(.96);
  opacity: 0;
  transition:
    transform .36s cubic-bezier(.16,1,.3,1),
    opacity   .22s ease,
    box-shadow .22s ease;
}
/* Glow-Border via Maske (nur Rand leuchtet) */
.modal::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  padding: 1px;                           /* Randstärke */
  background: conic-gradient(
    from 0deg at 50% 50%,
    var(--brand, #ff8c1a),
    var(--brand-2, #ffb703),
    var(--brand, #ff8c1a)
  );
  background-size: 200% 200%;
  animation: border-flow 8s linear infinite;
  /* nur den Rand zeigen */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .85;
}
/* zarte Innenreflexion */
.modal::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background:
    radial-gradient(1200px 220px at 50% -40px, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(800px 120px at 50% 100%, rgba(0,0,0,.06), transparent 60%);
  pointer-events: none;
}

/* aktiv (beim Öffnen) */
.modal-backdrop.open .modal{
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: modal-pop .6s cubic-bezier(.22,1,.36,1);
}

@keyframes border-flow{
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes modal-pop{
  0%   { transform: translateY(28px) scale(.96); }
  55%  { transform: translateY(-2px) scale(1.015); }
  100% { transform: translateY(0) scale(1); }
}

@media (prefers-color-scheme: dark){
  .modal{ border-color:#1f2633; }
}

/* Header — satten Verlauf + feine Unterlinie */
.modal header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 18px;
  border-bottom: 1px solid #e9edf5;
  background: linear-gradient(180deg, rgba(255,140,26,0.16), rgba(255,183,3,0.08));
  position: relative;
}
@media (prefers-color-scheme: dark){
  .modal header{ border-bottom-color:#202736; }
}
.modal header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.07), transparent);
}
.modal header h3{ margin:0; font-size:18px; letter-spacing:.2px; }

/* Close-Button – crispy Micro-Interactions */
.modal .close{
  background: rgba(255,255,255,.6);
  border: 1px solid #d7dce6;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  backdrop-filter: saturate(1.1);
  transition:
    transform .14s ease,
    background .14s ease,
    border-color .14s ease,
    box-shadow .14s ease,
    filter .14s ease;
}
.modal .close:hover{ background: rgba(255,255,255,.9); transform: translateY(-1px); }
.modal .close:active{ transform: translateY(0); filter: brightness(.96); }
.modal .close:focus-visible{
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);
}

/* Content – Stagger-Reveal für direkte Kinder */
.modal main{
  padding: 20px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: touch;
}
.modal-backdrop.open .modal main > *{
  animation: item-fade .4s ease both;
}
.modal-backdrop.open .modal main > *:nth-child(1){ animation-delay: .02s; }
.modal-backdrop.open .modal main > *:nth-child(2){ animation-delay: .06s; }
.modal-backdrop.open .modal main > *:nth-child(3){ animation-delay: .10s; }
.modal-backdrop.open .modal main > *:nth-child(4){ animation-delay: .14s; }
.modal-backdrop.open .modal main > *:nth-child(5){ animation-delay: .18s; }

@keyframes item-fade{
  from{ opacity:0; transform: translateY(6px); }
  to  { opacity:1; transform: translateY(0); }
}

/* Steps – lebendiger Active-Gradient + zarter Glow */
.modal .steps{ display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.step-chip{
  font-size:12px;
  border:1px solid #d7dce6;
  border-radius:999px;
  padding:5px 12px;
  color:var(--muted);
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}
.step-chip:hover{ transform: translateY(-1px); border-color:#cfd6e3; }
.step-chip.active{
  border-color: var(--brand);
  color:#0b0d12;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  background-size: 220% 220%;
  animation: chip-sheen 2.2s ease infinite;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 28%, transparent);
}
@keyframes chip-sheen{
  0%{   background-position: 0% 50%; }
  50%{  background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* Step-Transitions (sanftes Ein-/Ausblenden) */
.modal .fieldset{
  display: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
}
.modal .fieldset.show{
  display: block;
  opacity: 1;
  transform: none;
}
/* Footer */
.modal footer{
  display:flex; gap:10px; justify-content:space-between;
  padding: 16px 18px;
  border-top:1px solid #e9edf5;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.025));
}
@media (prefers-color-scheme: dark){
  .modal footer{ border-top-color:#202736; }
}
.modal .actions{ display:flex; gap:10px; }
.modal .hint{ color: var(--muted); font-size: 13px; }

/* Buttons – glossy + Primär-Glow + Ripple */
.modal .actions button,
.modal .actions .btn{
  position: relative;
  appearance: none;
  border: 1px solid #d7dce6;
  background: #fff;
  color: #000;
  padding: 11px 16px;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease, background .18s ease;
  overflow: hidden; /* für Ripple */
}
.modal .actions .btn:hover,
.modal .actions button:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
  border-color:#cfd6e3;
}
.modal .actions .btn:active,
.modal .actions button:active{
  transform: translateY(0);
  filter: brightness(.98);
}
/* Ripple aus der Mitte (ohne JS) */
.modal .actions .btn:active::after,
.modal .actions button:active::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(180px 180px at 50% 50%, rgba(0,0,0,.08), transparent 60%);
  opacity:.9; transform: scale(0); animation: ripple .5s ease forwards;
}
@keyframes ripple{ to{ transform: scale(1); opacity: 0; } }

/* Primär-Variante mit Glow */
.modal .actions .btn.primary,
.modal .actions button.primary{
  border-color: transparent;
  color:#0b0d12;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 16px 36px color-mix(in srgb, var(--brand) 40%, transparent);
}
.modal .actions .btn.primary:hover,
.modal .actions button.primary:hover{
  box-shadow: 0 20px 48px color-mix(in srgb, var(--brand) 48%, transparent);
}

/* Tastatur-Fokus am ganzen Dialog */
.modal:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent),
    0 22px 60px rgba(0,0,0,.20),
    0 4px 16px rgba(0,0,0,.08);
}

/* dezente Scrollbar */
.modal main::-webkit-scrollbar{ width: 10px; }
.modal main::-webkit-scrollbar-thumb{
  border-radius: 10px;
  background: rgba(0,0,0,.18);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.modal main{ scrollbar-color: rgba(0,0,0,.28) transparent; }

/* Optional: animiertes Ausblenden (JS setzt .closing kurz vor dem Entfernen) */
.modal-backdrop.closing{ opacity: 0 !important; visibility: hidden !important; }
.modal-backdrop.closing .modal{
  transform: translateY(10px) scale(.985);
  opacity: 0;
  transition-duration: .22s;
}

/* Motion-Respect */
@media (prefers-reduced-motion: reduce){
  .modal-backdrop, .modal, .modal::before, .modal .close, .step-chip, .modal .actions .btn, .modal .actions button, .modal main > *{
    transition: none !important;
    animation: none !important;
  }
}

/* Progress hübsch + animiert */
.progress{ margin:6px 0 12px; }
.progress .bar{
  height: 8px;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 30%, transparent);
  transition: width .45s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.progress .labels{
  display:flex; justify-content:space-between; gap:8px;
  font-size:12px; color:var(--muted); margin-top:6px;
}
.progress .labels span.active{ color: var(--ink); font-weight: 600; }

/* Datepicker */
.datepop{ position:absolute; z-index:1000; background:var(--card); color:var(--ink); border:1px solid #d7dce6; border-radius:12px; padding:8px; box-shadow:var(--shadow); display:none }
.datepop header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px }
.datepop header button{ border:1px solid #d7dce6; background:transparent; border-radius:8px; padding:4px 6px }
.dategrid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:4px }
.dategrid button{ padding:6px 0; border:1px solid #d7dce6; background:transparent; border-radius:8px }
.dategrid button:hover{ background: rgba(255,140,26,0.12); border-color: rgba(255,140,26,0.28) }
.dategrid .muted{ opacity:.5 }
@media (prefers-color-scheme: dark){ .datepop, .datepop header button, .dategrid button{ border-color:#2a3140; color:var(--ink) } }

/* Callbar */
.callbar{ position:sticky; bottom:0; z-index:40; background:rgba(255,255,255,0.90); backdrop-filter:blur(8px); border-top:2px solid rgba(255,140,26,0.28) }
@media (prefers-color-scheme: dark){ .callbar{ background:rgba(15,18,25,0.85) } }
.callbar .inner{ display:flex; gap:12px; padding:10px 16px; justify-content:space-between }
.callbar .inner a{ flex:1; text-align:center }
/* v3.6.2 accordion */
.accordion{ display:grid; gap:10px; }
.acc-item{ border:1px solid rgba(255,140,26,0.20); border-radius:12px; background:var(--card); overflow:hidden; }
.acc-head{ padding:12px 14px; cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; }
.acc-head::-webkit-details-marker{ display:none; }
.acc-title{ font-weight:700; }
.acc-indicator{ font-weight:700; opacity:.6; transition: transform .2s ease; }
.acc-item[open] .acc-indicator{ transform:rotate(45deg); }
.acc-body{ padding: 0 14px 12px; color:var(--ink); }
.acc-body p{ margin: 8px 0; color: var(--muted); }
.acc-body ul{ margin: 8px 0 8px 20px; }

/* v3.6.3 warning card */
.card.warn{
  border: 1px solid rgba(255,140,26,0.35);
  background:
    linear-gradient(0deg, rgba(255,183,3,0.12), rgba(255,183,3,0.12)),
    var(--card);
}
.card.warn h3{ margin-top:0 }

/* v3.6.6 payments */
.pay-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:12px; }
.pay-item{ display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid rgba(255,140,26,0.22); border-radius:12px; background:var(--card); }
.pay-ico{ width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; background:rgba(255,140,26,0.10); }

/* v3.6.8 Datenschutz toggle */
.toggle-datenschutz-button{ transition: transform .03s ease, filter .2s ease; }
.toggle-datenschutz-button:hover{ filter: brightness(1.05); }
.toggle-datenschutz-button:active{ transform: translateY(1px); }

/* v3.6.9 Impressum toggle */
.toggle-impressum-button{ transition: transform .03s ease, filter .2s ease; }
.toggle-impressum-button:hover{ filter: brightness(1.05); }
.toggle-impressum-button:active{ transform: translateY(1px); }

/* v3.7.0 Über mich */
.about-wrap{ display:block; }
.about-card{ border:1px solid rgba(255,140,26,0.22); background: var(--card); border-radius:16px; padding:16px; box-shadow: 0 6px 24px rgba(0,0,0,0.06); }
.about-head{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.about-photo{ width:56px; height:56px; border-radius:14px; background: linear-gradient(135deg, rgba(255,140,26,0.18), rgba(255,183,3,0.18)); display:flex; align-items:center; justify-content:center; font-weight:800; }
.about-name{ margin:0; }
.about-sub{ margin:2px 0 0; color: var(--muted); }
.about-body p{ margin:10px 0; color: var(--ink); }
.about-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.about-pill{ padding:6px 10px; border:1px solid rgba(255,140,26,0.30); border-radius:999px; background: rgba(255,140,26,0.08); font-size:14px; }
.about-cta{ display:flex; gap:10px; margin-top:12px; }
.btn.ghost{ background: transparent; border:1px solid rgba(255,140,26,0.50); }
@media (min-width: 860px){
  .about-card{ padding:20px; }
  .about-photo{ width:64px; height:64px; border-radius:16px; }
}

/* --- Termin-Modal: schöner 2-Spalten-Layout für Schritt "Mitteilung" --- */
.modal .two-col {
  display: grid;
  grid-template-columns: 1fr 380px; /* links flexibel, rechts fester Bereich */
  gap: 24px;
  align-items: start;
}

.modal .two-col .col textarea#nachricht {
  min-height: 160px;
  width: 100%;
  resize: vertical;
}

.modal .two-col .col .inline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  line-height: 1.3;
  margin-top: .75rem;
  user-select: none;
}

/* hCaptcha ordentlich halten */
.captcha-wrap {
  display: flex;
  justify-content: flex-start; /* bei Bedarf "flex-end" wenn rechtsbündig gewünscht */
}
.captcha-wrap .h-captcha {
  transform-origin: top left;
}

/* Kleine Bildschirme: einspaltig, hCaptcha leicht skaliert */
@media (max-width: 980px) {
  .modal .two-col {
    grid-template-columns: 1fr;
  }
  .captcha-wrap .h-captcha {
    transform: scale(.92);
  }
}

/* Sehr kleine Bildschirme */
@media (max-width: 420px) {
  .captcha-wrap .h-captcha {
    transform: scale(.85);
  }
}

/* Progress-Leiste/Stepper: kein horizontaler Scrollbalken mehr */
.progress, .stepper, .modal .progress {
  overflow: hidden;
}

/* Buttons in der Modal-Fußleiste gleichmäßig verteilen */
.modal .footer-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Slider Bilder */
.slideshow-container {
    max-width: 1000px;
    margin: 40px auto;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.slide {
    display: none;
    width: 100%;
    height: 450px;
    object-fit: cover;
    animation: fade 1.2s ease-in-out;
}

@keyframes fade {
    from {opacity: 0.4}
    to {opacity: 1}
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    padding: 12px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 22px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    z-index: 10;
    background-color: rgba(0,0,0,0.5);
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}
.multi-slideshow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 10px;
}

.multi-slideshow img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    transition: transform 0.5s ease;
    animation: fadeInZoom 1s ease-in-out;
}

@keyframes fadeInZoom {
    0% {opacity: 0; transform: scale(0.95);}
    100% {opacity: 1; transform: scale(1);}
}

.datepop .disabled {
  opacity: .45;
  cursor: not-allowed;
  text-decoration: line-through;
}