/* Libelle Raummiete – nutzt die Design-Tokens des Themes libelle-dark (mit Ersatzwerten) */
.lb-raum, .lb-raum-pakete, .lb-raum-extras, .lb-raum-storno, .lb-raum-paynote {
  --r-bg: var(--bg-2, #120a26);
  --r-bg2: var(--bg-3, #1b1038);
  --r-ink: var(--ink, #f4f0ff);
  --r-ink2: var(--ink-2, #c9bde6);
  --r-ink3: var(--ink-3, #8f82b3);
  --r-line: var(--line, rgba(176, 140, 255, 0.22));
  --r-acc: var(--pink, #ff3d9a);
  --r-ok: var(--green, #3dff9a);
  --r-rad: var(--radius, 14px);
}

.lb-raum { display: grid; gap: 1.1rem; max-width: 860px; margin: 0 auto; color: var(--r-ink); }
/* Rasterkinder duerfen schmaler als ihr Inhalt werden, sonst schiebt eine lange Zeile die Seite in die Breite */
.lb-raum > * { min-width: 0; }
.lb-raum p, .lb-raum-pakete p, .lb-raum-extras p { max-width: none; }
.lb-raum-step { background: var(--r-bg); border: 1px solid var(--r-line); border-radius: var(--r-rad); padding: 1.2rem 1.3rem 1.3rem; }
.lb-raum-step h3 { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; font-size: 1.15rem; font-family: var(--font-body, inherit); font-weight: 700; }
.lb-raum-num { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--r-acc); color: #14051f; font-size: .95rem; font-weight: 700; flex: none; }
.lb-raum-klein { color: var(--r-ink3); font-size: .86rem; line-height: 1.45; }
.lb-raum-loading { color: var(--r-ink2); }
.lb-raum-error { color: #ffd0d8; background: rgba(255, 61, 110, .14); border: 1px solid rgba(255, 61, 110, .5); border-radius: 10px; padding: .7rem .9rem; margin: 0 0 .9rem; }

/* Kalender */
.lb-raum-cal { max-width: 430px; }
.lb-raum-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.lb-raum-cal-head strong { font-size: 1.05rem; }
#lb-raum .lb-raum-nav { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--r-line); background: transparent; color: var(--r-ink); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0; }
#lb-raum .lb-raum-nav:hover:not(:disabled) { border-color: var(--r-acc); color: var(--r-acc); background: transparent; }
#lb-raum .lb-raum-nav:disabled { opacity: .25; cursor: default; }
.lb-raum-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.lb-raum-wd { text-align: center; font-size: .78rem; color: var(--r-ink3); padding: .2rem 0; }
#lb-raum .lb-raum-day { aspect-ratio: 1 / 1; min-height: 40px; border-radius: 10px; border: 1px solid rgba(61, 255, 154, .45); background: rgba(61, 255, 154, .08); color: var(--r-ink); font-size: .98rem; font-weight: 500; cursor: pointer; padding: 0; box-shadow: none; }
#lb-raum .lb-raum-day:hover:not(:disabled) { background: rgba(61, 255, 154, .2); color: var(--r-ink); }
#lb-raum .lb-raum-day.is-off { border-color: transparent; background: transparent; color: var(--r-ink3); opacity: .45; cursor: default; text-decoration: line-through; }
#lb-raum .lb-raum-day.is-sel { background: var(--r-acc); border-color: var(--r-acc); color: #14051f; font-weight: 700; }
.lb-raum-legend { display: flex; align-items: center; gap: .45rem; margin: .7rem 0 0; font-size: .84rem; color: var(--r-ink3); }
.lb-raum-dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 4px; border: 1px solid rgba(61, 255, 154, .6); background: rgba(61, 255, 154, .15); }
.lb-raum-dot.is-off { border-color: var(--r-line); background: transparent; margin-left: .7rem; }

/* Pakete im Formular */
.lb-raum-pks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.lb-raum-pk { position: relative; display: grid; gap: .15rem; padding: .9rem 1rem; border: 1px solid var(--r-line); border-radius: 12px; background: var(--r-bg2); cursor: pointer; }
.lb-raum-pk input { position: absolute; opacity: 0; pointer-events: none; }
.lb-raum-pk:hover { border-color: var(--r-acc); }
.lb-raum-pk.is-sel { border-color: var(--r-acc); box-shadow: 0 0 0 1px var(--r-acc) inset; }
.lb-raum-pk:focus-within { outline: 2px solid var(--r-acc); outline-offset: 2px; }
.lb-raum-pk.is-off { opacity: .45; cursor: default; }
.lb-raum-pk.is-off:hover { border-color: var(--r-line); }
.lb-raum-pk-h { font-weight: 700; font-size: 1.05rem; }
.lb-raum-pk-p { font-family: var(--font-head, inherit); font-size: 1.5rem; color: var(--r-acc); line-height: 1.2; }

/* Felder */
.lb-raum-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
.lb-raum-wide { grid-column: 1 / -1; }
.lb-raum-field { display: grid; gap: .3rem; font-size: .92rem; color: var(--r-ink2); }
.lb-raum-field > span { font-weight: 500; }
.lb-raum input[type="text"], .lb-raum input[type="email"], .lb-raum input[type="tel"], .lb-raum select, .lb-raum textarea {
  width: 100%; box-sizing: border-box; padding: .65rem .75rem; border-radius: 10px; border: 1px solid var(--r-line);
  background: var(--bg, #07040f); color: var(--r-ink); font: inherit; font-size: 1rem;
}
.lb-raum input:focus, .lb-raum select:focus, .lb-raum textarea:focus { outline: 2px solid var(--r-acc); outline-offset: 1px; border-color: var(--r-acc); }
.lb-raum-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .94rem; color: var(--r-ink2); cursor: pointer; }
.lb-raum-check input { width: 1.15rem; height: 1.15rem; margin: .2rem 0 0; flex: none; accent-color: var(--r-acc); }
.lb-raum-check a { color: var(--r-acc); }
.lb-raum-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Extras */
.lb-raum-addons { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.lb-raum .lb-raum-addons { padding-left: 0; }
.lb-raum-addon { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .9rem; padding: .7rem .9rem; border: 1px solid var(--r-line); border-radius: 12px; background: var(--r-bg2); }
.lb-raum-addon.is-sel { border-color: var(--r-acc); }
.lb-raum-addon img { width: 84px; height: 60px; object-fit: cover; border-radius: 8px; grid-column: 1; }
.lb-raum-addon-t { display: grid; gap: .1rem; grid-column: 2; }
.lb-raum-addon:not(:has(img)) .lb-raum-addon-t { grid-column: 1 / 3; }
.lb-raum-addon-p { white-space: nowrap; font-weight: 700; }
.lb-raum-qty { display: flex; align-items: center; gap: .35rem; }
#lb-raum .lb-raum-qty button { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--r-line); background: transparent; color: var(--r-ink); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0; }
#lb-raum .lb-raum-qty button:hover:not(:disabled) { border-color: var(--r-acc); color: var(--r-acc); background: transparent; }
#lb-raum .lb-raum-qty button:disabled { opacity: .3; cursor: default; }
.lb-raum-qty output { min-width: 1.6rem; text-align: center; font-weight: 700; }

/* Zusammenfassung */
.lb-raum-sum { margin: 0 0 1rem; }
.lb-raum-sum > div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--r-line); }
.lb-raum-sum dt { color: var(--r-ink2); font-weight: 400; min-width: 0; overflow-wrap: break-word; word-break: normal; }
.lb-raum-sum dd { margin: 0; text-align: right; white-space: nowrap; flex: none; }
/* Terminzeile: Beschriftung bleibt ganz, Datum darf umbrechen (schmale Bildschirme) */
.lb-raum-sum .lb-raum-sum-date dt { flex: none; }
.lb-raum-sum .lb-raum-sum-date dd { white-space: normal; flex: 1 1 auto; min-width: 0; }
.lb-raum-nw { white-space: nowrap; }
.lb-raum-sum .lb-raum-total { border-bottom: 0; padding-top: .7rem; font-size: 1.25rem; }
.lb-raum-sum .lb-raum-total dt, .lb-raum-sum .lb-raum-total dd { color: var(--r-ink); font-weight: 700; }
:is(#lb-raum, #lb-raum-storno) .lb-raum-btn { display: inline-block; width: 100%; padding: .95rem 1.4rem; border: 0; border-radius: 999px; background: var(--r-acc); color: #14051f; font: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer; margin-bottom: .7rem; }
:is(#lb-raum, #lb-raum-storno) .lb-raum-btn:hover:not(:disabled) { filter: brightness(1.1); background: var(--r-acc); color: #14051f; }
:is(#lb-raum, #lb-raum-storno) .lb-raum-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Preisübersicht (Shortcode libelle_raummiete_pakete) */
.lb-raum-pakete { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0 1.6rem; }
.lb-raum-paket { background: var(--r-bg); border: 1px solid var(--r-line); border-radius: var(--r-rad); padding: 1.2rem 1.3rem; }
.lb-raum-paket p { margin: 0 0 .35rem; }
.lb-raum-paket-h { font-weight: 700; font-size: 1.1rem; color: var(--r-ink); }
.lb-raum-paket-preis { font-family: var(--font-head, inherit); font-size: 2.2rem; line-height: 1.15; color: var(--r-acc); }
.lb-raum-extras-h { margin: 0 0 .7rem; }
ul.lb-raum-extras, .single-content ul.lb-raum-extras { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .7rem; }
.lb-raum-extras li { display: flex; gap: .9rem; align-items: center; background: var(--r-bg); border: 1px solid var(--r-line); border-radius: 12px; padding: .8rem 1rem; }
.lb-raum-extras img { width: 110px; height: 76px; object-fit: cover; border-radius: 8px; flex: none; }
.lb-raum-preis { color: var(--r-acc); font-weight: 700; white-space: nowrap; }

/* Zahlseite und Storno-Seite */
.lb-raum-paynote { margin: 0 0 1.4rem; padding: .9rem 1.1rem; border: 1px solid var(--r-acc); border-radius: 12px; background: rgba(255, 61, 154, .08); color: var(--r-ink); }
.lb-raum-storno { max-width: 720px; margin: 3rem auto 4rem; color: var(--r-ink); }
#lb-raum-storno .lb-raum-btn { width: auto; }
.lb-raum-hinweis { padding: .9rem 1.1rem; border: 1px solid var(--r-ok); border-radius: 12px; background: rgba(61, 255, 154, .08); }
.lb-raum-tabelle { width: 100%; border-collapse: collapse; margin: 1rem 0 1.4rem; }
.lb-raum-tabelle th, .lb-raum-tabelle td { text-align: left; vertical-align: top; padding: .55rem .4rem; border-bottom: 1px solid var(--r-line); }
.lb-raum-tabelle th { width: 34%; color: var(--r-ink2); font-weight: 500; }

@media (max-width: 640px) {
  .lb-raum-step { padding: 1rem .9rem 1.1rem; }
  .lb-raum-fields { grid-template-columns: 1fr; }
  .lb-raum-addon { grid-template-columns: auto 1fr auto; row-gap: .5rem; }
  .lb-raum-addon-t { grid-column: 2 / 4; }
  .lb-raum-addon:not(:has(img)) .lb-raum-addon-t { grid-column: 1 / 4; }
  .lb-raum-addon-p { grid-column: 1 / 3; }
  .lb-raum-qty { grid-column: 3; justify-self: end; }
}
@media (prefers-reduced-motion: no-preference) {
  #lb-raum .lb-raum-day, .lb-raum-pk, :is(#lb-raum, #lb-raum-storno) .lb-raum-btn { transition: background-color .15s, border-color .15s, filter .15s; }
}

/* Die Button-Regel des Themes hat hohe Spezifität: innerhalb des Formulars zurücksetzen */
:is(#lb-raum, #lb-raum-storno) button { letter-spacing: normal; text-transform: none; box-shadow: none; min-width: 0; white-space: nowrap; }
#lb-raum .lb-raum-day, #lb-raum .lb-raum-nav, #lb-raum .lb-raum-qty button { display: flex; align-items: center; justify-content: center; line-height: 1; }
:is(#lb-raum, #lb-raum-storno) .lb-raum-btn { display: inline-flex; align-items: center; justify-content: center; white-space: normal; line-height: 1.3; }
/* Farben: das Theme setzt Button-Farben mit !important, daher hier ebenso */
#lb-raum .lb-raum-day { background: rgba(61, 255, 154, .08) !important; color: var(--r-ink) !important; transform: none; }
#lb-raum .lb-raum-day:hover:not(:disabled) { background: rgba(61, 255, 154, .22) !important; }
#lb-raum .lb-raum-day.is-off { background: transparent !important; color: var(--r-ink3) !important; }
#lb-raum .lb-raum-day.is-sel { background: var(--r-acc) !important; color: #fff !important; }
#lb-raum .lb-raum-nav, #lb-raum .lb-raum-qty button { background: transparent !important; transform: none; }
#lb-raum .lb-raum-nav:hover:not(:disabled), #lb-raum .lb-raum-qty button:hover:not(:disabled) { color: var(--r-acc) !important; }
:is(#lb-raum, #lb-raum-storno) .lb-raum-btn { background: var(--r-acc) !important; color: #fff !important; box-shadow: 0 0 24px rgba(255, 61, 154, .45); }
:is(#lb-raum, #lb-raum-storno) .lb-raum-btn:disabled { box-shadow: none; }

/* Aufgeklappte Auswahllisten (Startzeit, Personen): helle Schrift auf dunklem Grund, gewählter Eintrag in Akzentfarbe */
#lb-raum select { color-scheme: dark; }
#lb-raum select option, #lb-raum select optgroup { background-color: var(--bg-3, #1b1038); color: var(--ink, #f4f0ff); }
#lb-raum select option:disabled { color: var(--ink-3, #8f82b3); }
#lb-raum select option:checked { background-color: var(--pink, #ff3d9a); color: #14051f; }