/* ===========================
   DIE HALLE × Planyo – Fluid Theme (ohne feste Breiten)
   =========================== */

/* ----- Scope & Design-Tokens ----- */
.dh-planyo,
#planyo_content{
  --c-accent: #EB6D3A;
  --c-text:   #1E1E1E;
  --c-muted:  #777;
  --c-line:   #E7E7E7;
  --radius:   10px;
  --step-size: 28px;
  --gap-y:    18px;
  --sticky-top: 96px; /* nur Versatz, keine Breite */
  color: var(--c-text);
  font: inherit;
}

/* Branding raus */
#planyo_content .powered_by_planyo,
#planyo_content .poweredby,
#planyo_content img[alt*="planyo"],
#planyo_content a[href*="planyo.com"]{ display:none !important; }

/* ===========================
   Layout – fluid, ohne feste Breiten
   =========================== */
.dh-planyo{
  display: grid;
  grid-template-columns: 2fr 1fr; /* rein relativ */
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  width: 100%;
}

.dh-summary-target{
  position: sticky;
  top: var(--sticky-top);
  align-self: start;
}

/* Alles in #planyo_content darf fließen */
#planyo_content,
#planyo_content *{ max-width: 100%; box-sizing: border-box; }

/* Iframes/Calendar immer fluid */
#planyo_content iframe{ width: 100% !important; height: auto; }

/* Responsive Breakpoint – 1 Spalte */
@media (max-width: 960px){
  .dh-planyo{ grid-template-columns: 1fr; }
  .dh-summary-target{ position: static; margin-top: 16px; }
}

/* ===========================
   Steps
   =========================== */
#planyo_content .reservation_steps,
#planyo_content .planyo_reservation_steps{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap: 10px; margin: 8px 0 22px;
}
#planyo_content .reservation_step,
#planyo_content .planyo_reservation_step{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center;
  text-align:center; position: relative; min-width: 0;
}
#planyo_content .reservation_step_img,
#planyo_content .planyo_reservation_step .step-circle{
  width: var(--step-size); height: var(--step-size);
  border-radius: 999px; border: 2px solid var(--c-text);
  background:#fff; color: var(--c-text);
  display:flex; align-items:center; justify-content:center;
  font-weight: 700; font-size: 13px; line-height: 1; z-index: 1;
}
#planyo_content .reservation_step::after,
#planyo_content .planyo_reservation_step::after{
  content:""; position:absolute; top: calc(var(--step-size)/2 - 1px); left: 50%; right:-50%;
  border-top: 2px dashed var(--c-line); z-index: 0;
}
#planyo_content .reservation_step:last-child::after,
#planyo_content .planyo_reservation_step:last-child::after{ display:none; }
#planyo_content .reservation_step.completed .reservation_step_img,
#planyo_content .planyo_reservation_step.completed .step-circle{
  background: var(--c-accent); color:#fff; border-color: var(--c-accent);
}
#planyo_content .reservation_step_img.current,
#planyo_content .planyo_reservation_step.current .step-circle{
  background: var(--c-text); color:#fff; border-color: var(--c-text);
}
#planyo_content .reservation_step_title,
#planyo_content .planyo_reservation_step .step-title{
  margin-top: 6px; font-size: 12px; line-height: 1.25; color: var(--c-muted);
  max-width: 12ch;
}
#planyo_content .reservation_steps::before,
#planyo_content .planyo_reservation_steps::before{ display:none !important; }

/* ===========================
   Formular: Labels/Abstände/Inputs
   =========================== */
#planyo_content .form-group{ margin: 20px 0; }

#planyo_content h2, 
#planyo_content .section_title{
  margin: 26px 0 10px; font-weight: 800;
}

/* Überflüssige Headline (Ressourcenname) über Datum ausblenden */
#planyo_content #row_resource_name,
#planyo_content #row_resource_name #resource_name{ display:none !important; }

/* Section-Header (z. B. „Teilnehmer“, „Teilnehmerdaten“) */
#planyo_content h3{
  margin: 28px 0 12px; font-weight: 800;
}

/* Extra Luft nach Teilnehmer-Selects */
#planyo_content #rental_prop_Teilnehmer + div,
#planyo_content #rental_prop_Teilnehmerdaten_1{ margin-top: 16px; }

#planyo_content label{
  font-weight: 700; margin: 0 0 6px; display:block;
}

/* Inputs – fluid, ohne Rahmenkästen */
#planyo_content input[type="text"],
#planyo_content input[type="email"],
#planyo_content input[type="tel"],
#planyo_content input[type="number"],
#planyo_content input[type="date"],
#planyo_content select,
#planyo_content textarea{
  width: 100%;
  background: transparent; color: var(--c-text);
  border: none; border-bottom: 2px solid var(--c-text);
  padding: 12px 2px 10px; border-radius: 0; outline: none; box-shadow: none;
  font: inherit;
}
#planyo_content select{ padding-right: 2.2em; }
#planyo_content input:focus,
#planyo_content select:focus,
#planyo_content textarea:focus{ border-bottom-color: var(--c-accent); }

#planyo_content .help-block{ margin-top: 6px; color: var(--c-muted); }

/* Personen-Boxen */
#planyo_content .person_box,
#planyo_content .planyo_person_box{
  border: 2px solid var(--c-text);
  border-radius: var(--radius);
  padding: 16px 18px; margin: 16px 0;
}

/* ===========================
   Timeslots
   =========================== */
#planyo_content .time_slot,
#planyo_content .planyo_time_slot{
  border: 2px solid var(--c-accent);
  border-radius: 8px;
  padding: 10px 12px;
  display:inline-flex; align-items:center; gap:6px;
  margin: 8px 10px 8px 0;
  background:#fff; color: var(--c-text);
  cursor:pointer; transition: background .15s ease, color .15s ease, transform .06s ease;
}
#planyo_content .time_slot:hover{ transform: translateY(-1px); }
#planyo_content .time_slot.selected,
#planyo_content .planyo_time_slot.selected{ background: var(--c-accent); color:#fff; }

/* ===========================
   Buttons
   =========================== */
#planyo_content .button,
#planyo_content .planyo_button,
#planyo_content input[type="submit"],
#planyo_content button,
#planyo_content .next_button,
#planyo_content .prev_button,
#planyo_content .pay_button,
#planyo_content .submit_button{
  appearance:none;
  background: transparent; color: var(--c-accent);
  border: 3px solid var(--c-accent); border-radius: var(--radius);
  text-transform: uppercase; font-weight: 800; letter-spacing: .4px;
  padding: 14px 22px; cursor:pointer;
  transition: transform .06s ease, background .15s ease, color .15s ease;
}
#planyo_content .button:hover,
#planyo_content .planyo_button:hover,
#planyo_content input[type="submit"]:hover,
#planyo_content button:hover,
#planyo_content .next_button:hover,
#planyo_content .prev_button:hover,
#planyo_content .pay_button:hover,
#planyo_content .submit_button:hover{
  background: var(--c-accent); color:#fff;
}
#planyo_content .prev_button::before{ content:"« "; }
#planyo_content .next_button::after{ content:" »"; }

#planyo_content .nav_buttons,
#planyo_content .buttons_row{
  display:flex; justify-content:space-between; gap:16px; margin-top: 18px;
}

/* ===========================
   Übersicht (rechts) – Card
   =========================== */
#planyo_content .price_info_div,
#planyo_content .reservation_summary,
#planyo_content .summary_box{
  border: 3px solid var(--c-accent); border-radius: var(--radius);
  background:#fff; color: var(--c-text);
  padding: 20px 22px; margin-top: 22px;
}
.dh-summary-target .price_info_div,
.dh-summary-target .reservation_summary,
.dh-summary-target .summary_box{
  margin-top: 0; /* in der eigenen Spalte keine Zusatzmargen */
}
#planyo_content .price_info_div h3,
#planyo_content .reservation_summary .title{ 
  margin: 0 0 14px; color: var(--c-accent); font-weight: 800; 
  font-size: clamp(20px, 2.2vw, 28px);
}
#planyo_content .price_info_div table{ width:100%; border-collapse:separate; border-spacing:0 12px; }
#planyo_content .price_info_div td{ padding:0; vertical-align:top; }
#planyo_content .price_info_div td:first-child{ font-weight:700; width:auto; }

/* ===========================
   Hinweise/Fehler
   =========================== */
#planyo_content .error, #planyo_content .planyo_error{ color:#B00020; font-weight:600; margin-top:6px; }
#planyo_content #res_form_req_flds_note{
  background: #FFF7E6; border: 1px solid #FFE0B2; border-radius: 8px;
  margin: 12px 0; padding: 8px 10px !important; color:#7A4A00;
}

/* ===========================
   Focus sichtbarer (A11y)
   =========================== */
#planyo_content :is(a,button,[role="button"],input,select,textarea):focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-accent) 35%, white);
  border-color: var(--c-accent);
  border-radius: 6px;
}

/* ===========================
   Mobile Tweaks
   =========================== */
@media (max-width: 767px){
  #planyo_content{ --step-size: 24px; }
  #planyo_content .reservation_step_title{ font-size: 11px; max-width: 10ch; }
  #planyo_content .nav_buttons, #planyo_content .buttons_row{ flex-direction:column; }
}

/* ===== Summary standardmäßig verstecken (inline im Formular) ===== */
#planyo_content .ratebox .price_info_div,
#planyo_content .reservation_summary,
#planyo_content .summary_box,
#planyo_content #price_info_div,
#planyo_content #price_info{
  display: none; /* Basis */
}

/* Nur die durch JS markierten Inline-Elemente ausblenden (failsafe) */
#planyo_content .dh-summary--hidden{ display: none !important; }

/* In einem expliziten Ziel-Container (.dh-summary-only) ist die Kopie sichtbar */
.dh-summary-only .price_info_div,
.dh-summary-only .reservation_summary,
.dh-summary-only .summary_box,
.dh-summary-only #price_info_div,
.dh-summary-only #price_info{
  display: block !important;
}

/* Optional: Card-Optik für die standalone Summary */
.dh-summary-only :is(.price_info_div,.reservation_summary,.summary_box){
  border: 3px solid var(--c-accent); border-radius: var(--radius);
  background:#fff; color:var(--c-text);
  padding: 20px 22px; margin: 0; /* eigenständig, keine Extramargen nötig */
}
.dh-summary-only .title,
.dh-summary-only h3{
  margin: 0 0 12px; color: var(--c-accent); font-weight: 800;
  font-size: clamp(20px,2.2vw,28px);
}

/* ===== Buttons – ALLE Varianten abholen (inkl. Bootstrap) ===== */
#planyo_content :is(
  .button,
  .planyo_button,
  .next_button,
  .prev_button,
  .pay_button,
  .submit_button,
  .btn,              /* Bootstrap */
  .btn-primary,      /* Bootstrap */
  .btn-lg            /* Bootstrap */
),
#planyo_content :is(input[type="button"], input[type="submit"], button){
  appearance:none;
  background: transparent;
  color: var(--c-accent);
  border: 3px solid var(--c-accent);
  border-radius: var(--radius);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .4px;
  padding: 14px 22px;
  cursor:pointer;
  transition: transform .06s ease, background .15s ease, color .15s ease, border-color .15s ease;
  line-height: 1.2;
}

/* Bootstrap-Reset (sonst kommen da Box-Shadows/Hintergründe rein) */
#planyo_content .btn{ background-image:none; box-shadow:none; }

/* Hover/Focus */
#planyo_content :is(
  .button,.planyo_button,.next_button,.prev_button,.pay_button,.submit_button,
  .btn,.btn-primary,.btn-lg,
  input[type="button"], input[type="submit"], button
):hover,
#planyo_content :is(
  .button,.planyo_button,.next_button,.prev_button,.pay_button,.submit_button,
  .btn,.btn-primary,.btn-lg,
  input[type="button"], input[type="submit"], button
):focus-visible{
  background: var(--c-accent); color:#fff; outline:none;
}

/* Disabled */
#planyo_content :is(
  .button,.planyo_button,.next_button,.prev_button,.pay_button,.submit_button,
  .btn,.btn-primary,.btn-lg,
  input[type="button"], input[type="submit"], button
)[disabled],
#planyo_content :is(
  .button,.planyo_button,.next_button,.prev_button,.pay_button,.submit_button,
  .btn,.btn-primary,.btn-lg,
  input[type="button"], input[type="submit"], button
).disabled{
  opacity:.45; cursor:not-allowed;
  background: transparent; color: var(--c-accent);
  border-color: var(--c-accent);
}

/* Vor/Zurück Pfeile */
#planyo_content #multipage_prev::before{ content:"« "; }
#planyo_content #multipage_next::after{  content:" »"; }

/* Button-Reihen */
#planyo_content #res_form_buttons,
#planyo_content .nav_buttons,
#planyo_content .buttons_row{
  display:flex; gap:16px; justify-content:flex-start; flex-wrap:wrap; margin-top: 18px;
}

/* ===== Abstand/Typo-Feinschliff bleibt erhalten (aus deinem aktuellen CSS) ===== */
/* ===== Standalone-Übersicht – Container-Verhalten ===== */
.dh-summary-only{
  position: sticky;
  top: var(--sticky-top, 96px);
  align-self: start;
}

/* Die verschobene Summary selbst */
.dh-summary-only .dh-summary-card{
  border: 3px solid var(--c-accent);
  border-radius: var(--radius, 10px);
  background: #fff;
  color: var(--c-text, #1E1E1E);
  padding: 20px 22px;
  margin: 0;            /* als eigener Block, keine Extramargen */
  width: 100%;
  box-sizing: border-box;
}

/* Titel & Typo wie im Formular rechts geplant */
.dh-summary-only .dh-summary-card .title,
.dh-summary-only .dh-summary-card h2,
.dh-summary-only .dh-summary-card h3{
  margin: 0 0 12px;
  color: var(--c-accent);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 28px);
}

/* Innenlayout der Summary (Tabellen/Listen) */
.dh-summary-only .dh-summary-card table{
  width: 100%; border-collapse: separate; border-spacing: 0 10px;
}
.dh-summary-only .dh-summary-card td{ padding: 0; vertical-align: top; }

/* Falls Planyo nur Plain-Paragraphs liefert: etwas Rhythmus */
.dh-summary-only .dh-summary-card p{ margin: 6px 0; }

/* Mobile: Sticky aus, falls stört */
@media (max-width: 960px){
  .dh-summary-only{ position: static; margin-top: 16px; }
}
/* Standalone-Container: sticky + Offset unter dem Site-Header */
.dh-summary-only{
  position: sticky;
  top: clamp(72px, 8vh, 120px);
  align-self: start;
  z-index: 3; /* vor Footer/Newsletter etc. */
}

/* Die verschobene Summary selbst (echter Node bekommt diese Klasse im JS) */
.dh-summary-only .dh-summary-card{
  border: 3px solid var(--c-accent);
  border-radius: var(--radius, 10px);
  background: #fff;
  color: var(--c-text, #1E1E1E);
  padding: 22px 24px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Typo-Größen – alles in der Summary etwas größer & luftiger */
.dh-summary-only .dh-summary-card,
.dh-summary-only .dh-summary-card p,
.dh-summary-only .dh-summary-card li{
  font-size: clamp(16px, 1.05rem, 18px);
  line-height: 1.5;
}
.dh-summary-only .dh-summary-card .title,
.dh-summary-only .dh-summary-card h2,
.dh-summary-only .dh-summary-card h3{
  margin: 0 0 12px;
  color: var(--c-accent);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 30px);
}

/* Key-Value-Optik (Datum, Uhrzeit, Teilnehmer, Preis) klarer machen */
.dh-summary-only .dh-summary-card strong{ font-weight: 800; }
.dh-summary-only .dh-summary-card table{ width:100%; border-collapse:separate; border-spacing:0 10px; }
.dh-summary-only .dh-summary-card td{ padding:0; vertical-align:top; }
.dh-summary-only .dh-summary-card td:first-child{ white-space:nowrap; padding-right:10px; }