/* =============================================
   DESIGN (Karten-Redesign): Kopfleiste, Sheets, Bereichskalender, Schrittbuchung.
   Wird NACH style.css geladen und überschreibt dessen Layout-Regeln.
   Tokens (Farben/Radien) kommen aus style.css (:root, vom Gurp-Forum übernommen).
   ============================================= */
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('libs/fonts/dm-mono/dm-mono-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('libs/fonts/dm-mono/dm-mono-500-latin.woff2') format('woff2'); }

:root {
  /* Fallback-Tokens: falls eine gecachte, ältere style.css geladen wird */
  --green-100: #e6eae1; --green-500: #56604c; --green-700: #3a4233;
  --orange-500: #a4502f;
  --neutral-50: #f3eee6; --neutral-100: #ede6db; --neutral-200: #e0d7ca; --neutral-300: #d6ccbd; --neutral-400: #afa091;
  --neutral-500: #8e8072; --neutral-600: #6b5e51; --neutral-700: #4b3e33;
  --button-color: #56604c; --bg-surface: #f3eee6; --bg-subtle: #ede6db; --border: #e0d7ca;
  --mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --ink: var(--green-700);
  --tint: #e6eae1;
  --card: #fff;
  --edge: 14px;
  --topbar-h: 66px;
}
[hidden] { display: none !important; }
body { background: var(--bg-map); }
h1, h2, h3, .sb-title, .rp-title, .modal-title, .sb-total b { font-family: 'Baloo 2', 'Maven Pro', system-ui, sans-serif; }
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }

/* ---------- Bausteine ---------- */
.mono-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--neutral-600); font-weight: 500; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 6px; }
.sec-meta { font-size: 0.9rem; font-weight: 700; }
.sheet-link { background: none; border: 0; padding: 4px 2px; font: inherit; font-size: 0.9rem; font-weight: 700; color: var(--button-color); cursor: pointer; white-space: nowrap; }
.sheet-link:hover { text-decoration: underline; }
.sheet-link.left { align-self: flex-start; font-weight: 600; opacity: .85; }
.btn-primary { background: var(--button-color); color: #fff; border: 0; border-radius: 22px; padding: 16px 26px; font-weight: 700; font-size: 1.02rem; cursor: pointer; box-shadow: var(--shadow-sm); }
.btn-primary:hover { filter: brightness(1.25); }
.btn-primary.wide { width: 100%; }
.btn-primary:disabled { background: var(--neutral-400); cursor: not-allowed; filter: none; }
.close-btn.round { width: 44px; height: 44px; flex: none; border-radius: 50%; background: #e7e1d4; color: var(--text-primary); font-size: 1rem; display: flex; align-items: center; justify-content: center; border: 0; margin: 0; }
.close-btn.round:hover { background: var(--neutral-200); }
.avatar { width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--button-color); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; }
.avatar.sm { width: 42px; height: 42px; background: #e3ece6; color: var(--button-color); font-size: .88rem; }
.avatar.sm.pet { background: #f8e3da; color: #b24a34; }
.avatar.sm.car { background: #dfe9f1; color: #3d6c88; }
.badge { font-size: 0.78rem; font-weight: 700; padding: 3px 11px; border-radius: 999px; }
.badge.free { background: #e6eae1; color: #56604c; }
.badge.booked { background: #f6ddd6; color: #b24a34; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--border); font-weight: 600; font-size: .88rem; }
.tag-elec { color: #8a6200; }
.pill-ok { background: #e6eae1; color: #56604c; border-radius: 999px; font-size: .72rem; font-weight: 700; padding: 2px 9px; margin-left: 4px; white-space: nowrap; }
.note { color: var(--neutral-600); font-size: .92rem; }
.chev { color: var(--neutral-500); font-size: .82rem; }
.link-danger { background: none; border: 0; padding: 4px 0; font: inherit; font-size: .9rem; font-weight: 600; color: #b24a34; cursor: pointer; text-align: left; }

/* Segment-Schalter (Tabs, Egal/Mit/Ohne, Zelt/Wohnwagen, Saisons) */
.seg { display: flex; gap: 4px; padding: 4px; background: var(--neutral-100); border-radius: 22px; }
.seg > button, .seg > .seg-opt { flex: 1; min-width: 0; border: 0; background: transparent; padding: 12px 8px; border-radius: 18px; font: inherit; font-weight: 700; font-size: .92rem; color: var(--neutral-700); cursor: pointer; text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; }
.seg > button.active, .seg > .seg-opt:has(input:checked) { background: #fff; color: var(--text-primary); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.seg .seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg i.fa-bolt { color: var(--orange-500); }

/* ---------- Kopfleiste ---------- */
.map-wrap { z-index: 0; }
.topbar {
  position: absolute; z-index: 30; top: var(--edge); left: var(--edge); right: var(--edge);
  display: flex; align-items: center; gap: 18px;
  background: var(--bg-surface); border-radius: 28px; box-shadow: var(--shadow-md);
  height: var(--topbar-h); padding: 0 16px 0 20px;
}
.tb-row { display: contents; }
.tb-brand { order: 1; display: flex; align-items: center; padding-right: 18px; border-right: 1px solid var(--border); height: 40px; }
.tb-logo { height: 38px; width: auto; display: block; }
.tb-logo-fallback { font-family: 'Baloo 2', sans-serif; font-weight: 700; color: var(--button-color); }
.tb-dates { order: 2; display: flex; align-items: center; gap: 14px; background: none; border: 0; padding: 4px 6px; font: inherit; color: inherit; cursor: pointer; border-radius: 18px; text-align: left; }
.tb-dates:hover { background: var(--neutral-100); }
.tb-cal-icon { display: none; color: var(--button-color); font-size: 1.25rem; }
.tb-d-desktop { display: flex; align-items: center; gap: 14px; }
.tb-d-mobile { display: none; }
.tb-block { display: flex; flex-direction: column; line-height: 1.15; }
.tb-block small { font-size: .74rem; color: var(--neutral-600); font-weight: 500; }
.tb-block b { font-size: 1.02rem; font-weight: 700; white-space: nowrap; }
.tb-arrow { color: var(--neutral-500); font-size: 1.1rem; }
.tb-nights { font-family: var(--mono); font-size: .8rem; color: var(--neutral-600); white-space: nowrap; }
.tb-filter { display: none; }
.tb-chips { order: 3; display: flex; align-items: center; gap: 8px; padding-left: 18px; border-left: 1px solid var(--border); height: 40px; }
.chip { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 9px 15px; border-radius: 999px; font: inherit; font-size: .92rem; font-weight: 700; color: var(--text-primary); cursor: pointer; white-space: nowrap; }
.chip:hover { background: var(--neutral-100); }
.chip.active { background: var(--ink); color: #fff; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.dot-free { background: var(--button-color); }
.dot-elec { background: #e6a817; }
.tb-right { order: 5; margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tb-right .auth-btn { height: 42px; border-radius: 999px; box-shadow: none; background: transparent; border: 0; padding: 0 14px; font-weight: 700; }
.tb-right .auth-btn:hover { background: var(--neutral-100); }
.tb-right .auth-btn.primary { background: var(--button-color); color: #fff; }
.tb-right .auth-btn.primary:hover { filter: brightness(1.25); background: var(--button-color); }
#auth-buttons { display: flex; gap: 6px; }
.user-badge { width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--button-color); color: #fff; border: 0; font-weight: 700; font-size: 1rem; display: flex; align-items: center; justify-content: center; box-shadow: none; }
.user-badge:hover { background: var(--button-color); filter: brightness(1.25); }
.user-dropdown { top: calc(100% + 12px); border: 0; box-shadow: var(--shadow-lg); }
.lp-info-dropdown { top: calc(100% + 12px); border: 0; }

.ld-free { background: var(--button-color); }
.ld-elec { background: #e6a817; border: 0; }
.ld-booked { background: #a8a39a; }

/* ---------- Karte: Pins als Punkte ---------- */
.pin .pc { width: 14px; height: 14px; border: 0; border-radius: 50%; font-size: 0; color: transparent; box-shadow: 0 1px 4px rgba(0,0,0,.35); margin: 0 auto; transition: transform .12s; }
.pin { display: flex; align-items: center; justify-content: center; }
.pin.free .pc { background: var(--button-color); }
.pin.free.elec .pc { background: #e6a817; color: transparent; }
.pin.booked .pc, .pin.booked.elec .pc { background: #a8a39a; opacity: 1; }
.pin.booked { pointer-events: auto; }
.pin:hover .pc { transform: scale(1.5); }
.pin.selected .pc { outline: 0; transform: scale(1.7); box-shadow: 0 0 0 3px var(--ink), 0 2px 6px rgba(0,0,0,.4); }
#leaflet-map.z-num .pin .pc { width: 24px; height: 24px; font-size: .68rem; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; }
#leaflet-map.z-num .pin.free.elec .pc { color: #2b2100; }
body.style-hybrid .pin.free:not(.elec) .pc { background: #7ed957; color: #143d1f; }
body.style-hybrid .ld-free { background: var(--button-color); }
.pin.split-partner .pc, .pin.split-selected .pc, .pin.split-partner-selected .pc { width: 20px; height: 20px; }
.split-exit { position: fixed; z-index: 60; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--ink); color: #fff; border: 0; border-radius: 999px; padding: 12px 20px; font: inherit; font-weight: 700; box-shadow: var(--shadow-lg); cursor: pointer; }

/* Kartenknöpfe */
.zoom-btns { left: auto; right: var(--edge); bottom: 46px; border-radius: 26px; background: rgba(255,255,255,.94); box-shadow: var(--shadow-md); }
.zb { background: transparent; color: var(--text-primary); border-top-color: var(--border); width: 46px; height: 46px; }
.zb:hover { background: #fff; }
.map-style-switch { left: auto; right: var(--edge); bottom: 152px; }
.ms-toggle { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.94); }
.ms-thumb { border-radius: 50%; }
.leaflet-container .leaflet-control-attribution { border: 0; background: rgba(255,255,255,.88); border-radius: 999px; padding: 2px 10px; margin: 0 var(--edge) 12px 0 !important; color: var(--text-primary); font-size: .72rem; }
.admin-toggle { top: 92px; left: auto; right: var(--edge); background: var(--bg-surface); color: var(--text-primary); font-weight: 700; padding: 8px 16px; box-shadow: var(--shadow-md); }
.admin-panel { top: 136px; left: auto; right: var(--edge); bottom: auto; max-height: calc(100dvh - 160px); overflow-y: auto; border: 0; }
.add-hint { top: 92px; }

/* ---------- Overlays als Sheets ---------- */
.overlay { background: rgba(20, 30, 24, .45); }
.sheet-overlay { align-items: center; justify-content: center; }
.sheet { position: relative; background: var(--bg-surface); border-radius: 28px; box-shadow: var(--shadow-lg); width: min(500px, 94vw); max-height: 90dvh; display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.sheet .sheet-handle { display: none; }
.sheet-head { display: flex; align-items: center; gap: 12px; padding: 22px 22px 14px; border-bottom: 1px solid var(--border); }
.sheet-head h2 { margin: 0; flex: 1; font-size: 1.45rem; line-height: 1.1; }
.sheet-body { flex: 1; overflow-y: auto; padding: 16px 22px 20px; display: flex; flex-direction: column; gap: 14px; }
.sheet-foot { padding: 14px 22px 20px; border-top: 1px solid var(--border); }
.sheet-overlay.open > .sheet { animation: sheet-in .25s cubic-bezier(.2, .8, .2, 1); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

/* Bereichskalender */
.rc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.rc-head b { font-family: 'Baloo 2', sans-serif; font-size: 1.1rem; }
.rc-nav { background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--neutral-700); cursor: pointer; width: 38px; height: 38px; border-radius: 50%; }
.rc-nav:hover { background: var(--neutral-100); }
.rc-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.rc-dn { text-align: center; font-size: .78rem; color: var(--neutral-600); font-weight: 600; padding: 6px 0; }
.rc-cell { height: 44px; display: flex; align-items: center; justify-content: center; position: relative; }
.rc-cell button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; font: inherit; font-weight: 600; font-size: .98rem; color: var(--text-primary); cursor: pointer; position: relative; z-index: 1; }
.rc-cell button:hover:not(:disabled) { background: var(--neutral-100); }
.rc-cell.dis button { color: var(--neutral-400); cursor: default; font-weight: 500; }
.rc-cell.booked button { text-decoration: line-through; }
.rc-cell.today button { box-shadow: inset 0 0 0 1.5px var(--neutral-500); }
.rc-cell.mid::before, .rc-cell.has-range-r::before, .rc-cell.has-range-l::before { content: ''; position: absolute; top: 2px; bottom: 2px; background: var(--tint); }
.rc-cell.mid::before { left: 0; right: 0; }
.rc-cell.has-range-r::before { left: 50%; right: 0; }
.rc-cell.has-range-l::before { left: 0; right: 50%; }
.rc-cell.mid:nth-child(7n + 1)::before { left: 4px; border-radius: 20px 0 0 20px; }
.rc-cell.mid:nth-child(7n)::before { right: 4px; border-radius: 0 20px 20px 0; }
.rc-cell.start button, .rc-cell.end button { background: var(--button-color); color: #fff; box-shadow: none; }
.rc-cell.start button:hover:not(:disabled), .rc-cell.end button:hover:not(:disabled) { background: var(--button-color); }

/* Suche anpassen */
#search-sheet .sheet-body { gap: 12px; }
#search-sheet #ss-cal, #cal-wrap { background: transparent; }
.split-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: transparent; border: 1.5px dashed var(--neutral-400); border-radius: 22px; padding: 14px 16px; font: inherit; color: inherit; cursor: pointer; }
.split-card .sc-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.split-card small { color: var(--neutral-700); font-size: .86rem; line-height: 1.3; }
.sw { width: 50px; height: 30px; flex: none; border-radius: 999px; background: #d9d3c5; position: relative; transition: background .2s; }
.sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.split-card.active { border-style: solid; border-color: var(--button-color); background: #fff; }
.split-card.active .sw { background: var(--button-color); }
.split-card.active .sw::after { transform: translateX(20px); }
.ss-counts { border-top: 1px solid var(--border); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.ss-count-row { display: flex; gap: 16px; flex-wrap: wrap; }
.ss-count-row em { font-style: normal; font-family: var(--mono); color: var(--neutral-600); font-size: .85rem; }

/* Liste */
.ls-list { display: flex; flex-direction: column; gap: 8px; }
.ls-row { display: flex; align-items: center; gap: 14px; width: 100%; background: #fff; border: 0; border-radius: 20px; padding: 14px 16px; font: inherit; text-align: left; cursor: pointer; }
.ls-row:hover { box-shadow: 0 0 0 2px var(--button-color) inset; }
.ls-text { flex: 1; display: flex; flex-direction: column; }
.ls-text small { color: var(--neutral-600); }
.ld { width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block; }

/* ---------- Stellplatz-Sheet & Konto-Sheet ---------- */
.sheet-panel { position: absolute; z-index: 40; background: var(--bg-surface); box-shadow: var(--shadow-lg); border: 0; border-radius: 28px; display: none; flex-direction: column; overflow: hidden; }
.sheet-panel.open { display: flex; animation: panel-in .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes panel-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.sidebar.sheet-panel { left: var(--edge); right: auto; top: calc(var(--topbar-h) + var(--edge) * 2); bottom: var(--edge); width: 430px; max-height: none; }
.right-panel.sheet-panel { right: var(--edge); left: auto; top: calc(var(--topbar-h) + var(--edge) * 2); bottom: var(--edge); width: 430px; }
.right-panel.sheet-panel.open { animation-name: panel-in-r; }
@keyframes panel-in-r { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.sheet-panel .sheet-handle { display: none; }
.sb-head, .rp-head { display: flex; align-items: center; gap: 14px; padding: 20px 20px 14px; border-radius: 0; background: transparent; border-bottom: 1px solid var(--border); }
.sb-head-text, .rp-head-text { flex: 1; min-width: 0; }
.sb-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sb-title, .rp-title { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.sb-sub, .rp-sub { color: var(--neutral-700); font-size: .92rem; margin-top: 3px; }
.sb-back { background: none; border: 0; font-size: 1.3rem; line-height: 1; padding: 0 6px 0 0; cursor: pointer; color: var(--button-color); font-weight: 700; }
.sb-body { flex: 1; overflow-y: auto; padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 14px; }
.sb-step { display: flex; flex-direction: column; gap: 14px; }
.pano { height: 190px; border-radius: 22px; overflow: hidden; background: repeating-linear-gradient(135deg, #e9e3d6 0 12px, #efe9dd 12px 24px); color: var(--neutral-600); font-family: var(--mono); font-size: .85rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.pano-icon { opacity: .5; }
.sb-tags { display: flex; flex-wrap: wrap; gap: 8px; }
#cal-wrap { background: #fff; border-radius: 24px; padding: 14px 12px 10px; }
.sel-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); font-size: .95rem; }
.ss-hint { color: var(--neutral-700); }
.sb-hint { color: var(--neutral-700); font-size: .9rem; line-height: 1.4; margin: 0; }
.sb-foot { display: flex; align-items: center; gap: 14px; padding: 14px 20px 18px; border-top: 1px solid var(--border); background: var(--bg-surface); }
.sb-total { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sb-total b { font-size: 1.7rem; line-height: 1.05; }
.sb-total-sub { background: none; border: 0; padding: 0; text-align: left; font: inherit; font-size: .82rem; color: var(--neutral-700); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.sb-foot .book-btn { width: auto; flex: none; padding: 17px 32px; border-radius: 22px; font-size: 1.05rem; font-weight: 700; background: var(--button-color); }
.sb-foot .book-btn:hover:not(:disabled) { background: var(--button-color); filter: brightness(1.25); }
.sb-foot .book-btn:disabled { background: var(--neutral-400); filter: none; }
.price-box { display: none; background: #fff; border-radius: 22px; padding: 14px 16px; }
.price-box.show { display: flex; }
#sidebar[data-mode="split"] .price-box { display: flex; }
.guest-form { gap: 12px; }
.book-login-required { background: #fff; border-radius: 22px; padding: 16px; }

/* Hauptreisende, Mitreisende */
.main-card { background: #fff; border-radius: 22px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.main-card-row { display: flex; align-items: center; gap: 12px; }
.mc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mc-text small { color: var(--neutral-700); overflow: hidden; text-overflow: ellipsis; }
.main-card .avatar { width: 46px; height: 46px; font-size: .95rem; }
.section-hint { color: var(--neutral-700); font-size: .85rem; line-height: 1.35; }
.traveler-list { display: flex; flex-direction: column; gap: 8px; }
.person-row { position: relative; display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid transparent; border-radius: 20px; padding: 11px 14px; cursor: pointer; }
.person-row:has(input:checked) { border-color: var(--button-color); }
.person-row input { position: absolute; opacity: 0; pointer-events: none; }
.person-row .chk { width: 24px; height: 24px; flex: none; border-radius: 8px; border: 2px solid var(--neutral-300); background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.person-row .chk.radio { border-radius: 50%; }
.person-row input:checked + .chk { background: var(--button-color); border-color: var(--button-color); }
.person-row input:checked + .chk::after { content: '✓'; color: #fff; font-size: .85rem; font-weight: 700; line-height: 1; }
.pr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pr-text small { color: var(--neutral-600); font-size: .82rem; }
.pr-price { font-weight: 700; font-size: .88rem; white-space: nowrap; }
.pr-price.free { color: #56604c; }
.add-inline-btn { align-self: flex-start; background: none; border: 0; padding: 4px 2px; font: inherit; font-weight: 700; font-size: .95rem; color: var(--button-color); cursor: pointer; }
.add-inline-btn:hover { background: none; text-decoration: underline; }
.inline-form { background: #fff; border-radius: 20px; padding: 14px; }
.extra-tents { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 20px; padding: 12px 14px; }
.et-text { flex: 1; display: flex; flex-direction: column; }
.et-text small { color: var(--neutral-700); font-size: .8rem; }
.qty-stepper { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: 999px; background: #fff; overflow: hidden; }
.qty-btn { width: 40px; height: 40px; border: 0; background: transparent; font-size: 1.2rem; cursor: pointer; color: var(--neutral-700); }
.qty-btn:hover { background: var(--neutral-100); }
.qty-stepper input[type=number] { width: 38px; border: 0; padding: 0; text-align: center; font-weight: 700; background: transparent; box-shadow: none; border-radius: 0; -moz-appearance: textfield; }
.if-actions { display: flex; gap: 8px; }
.if-actions button { flex: 1; padding: 12px; border-radius: 18px; font-weight: 700; border: 0; cursor: pointer; }
.if-save { background: var(--button-color); color: #fff; }
.if-save:hover { background: var(--button-color); filter: brightness(1.25); }
.if-cancel { background: #fff; color: var(--text-primary); border: 1px solid var(--border) !important; }

/* Eingabefelder */
input[type=text], input[type=email], input[type=password], input[type=date], input[type=tel], input[type=number], select, textarea {
  background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 13px 16px; font-size: 1rem; color: var(--text-primary);
}
input:focus, select:focus, textarea:focus { border-color: var(--button-color); box-shadow: 0 0 0 3px rgba(31, 68, 54, .15); }
.fl { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 700; flex: 1; min-width: 0; }
.fl input, .fl select { font-weight: 500; }
.pf-group { display: flex; flex-direction: column; gap: 12px; }
.pf-row { display: flex; gap: 12px; }
.pf-row.phone-row { display: flex; gap: 0; }
.pf-row.phone-row select { width: 130px; flex: none; border-radius: 20px 0 0 20px; border-right: 0; }
.pf-row.phone-row input { border-radius: 0 20px 20px 0; }
.pf { width: 100%; }

/* Konto */
.rp-tabs { margin: 14px 20px 0; flex: none; border-bottom: 0; }
.rp-tab { border-bottom: 0 !important; color: var(--neutral-700); }
.rp-tab.active { background: #fff; color: var(--text-primary) !important; }
.rp-body { flex: 1; overflow-y: auto; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.rp-section { display: flex; flex-direction: column; gap: 14px; }
.rp-foot { position: sticky; bottom: -20px; margin: 0 -20px -20px; padding: 14px 20px 18px; background: var(--bg-surface); border-top: 1px solid var(--border); }
.booking-card { background: #fff; border: 0; border-radius: 22px; padding: 14px 16px; box-shadow: var(--shadow-sm); }
.booking-status { background: #e6eae1; color: #56604c; font-weight: 700; }
.person-card { background: #fff; border: 0; border-radius: 0; padding: 0; }
#traveler-cards, #dog-cards, #vehicle-cards { background: #fff; border-radius: 22px; overflow: hidden; gap: 0; }
.person-card + .person-card { border-top: 1px solid var(--border); }
.person-card-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; }
.person-info { flex: 1; min-width: 0; }
.person-name { font-weight: 700; }
.person-sub { color: var(--neutral-600); font-size: .85rem; }
.person-edit-form { background: var(--bg-subtle); padding: 12px 16px; border-radius: 0; gap: 10px; }
.person-edit-form input { width: 100%; }
.pe-row { display: flex; gap: 8px; }
.plate { font-family: var(--mono); font-weight: 500; border: 1.5px solid var(--text-primary); border-radius: 6px; padding: 1px 7px; }
.add-card-btn { background: transparent; border: 1.5px dashed var(--neutral-400); border-radius: 22px; padding: 14px; font-weight: 700; color: var(--button-color); }
.add-card-btn:hover { background: #fff; }
.m-ok { color: #56604c; font-weight: 700; }

/* ---------- Preise ---------- */
#info-sheet { width: min(980px, 95vw); }
#info-overlay:not([data-kind="prices"]) #info-sheet { width: min(640px, 95vw); }
#info-sheet .modal-head { padding: 24px 28px 8px; align-items: flex-start; border: 0; margin: 0; }
#info-sheet .modal-title { font-size: 2rem; }
.modal-sub { color: var(--neutral-700); margin-top: 4px; }
#info-modal-body { padding: 0 28px 24px; overflow-y: auto; flex: 1; }
#info-modal-close { display: none; }
.pl-mobile { display: none; }
.pl-grid { display: grid; grid-template-columns: 1fr 160px 160px 160px; align-items: stretch; }
.pl-head { border-bottom: 2px solid var(--button-color); }
.pl-col { text-align: right; padding: 14px 16px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; }
.pl-head .pl-col small { font-family: var(--mono); color: var(--neutral-600); font-weight: 400; font-size: .72rem; }
.pl-head .pl-col.hot { background: var(--button-color); color: #fff; border-radius: 16px 16px 0 0; }
.pl-head .pl-col.hot small { color: rgba(255,255,255,.7); }
.pl-sec { margin: 22px 0 6px; }
.pl-row { border-top: 1px solid var(--border); }
.pl-row .pl-col.hot { background: #e6eae1; font-weight: 700; }
.pl-name { display: flex; flex-direction: column; padding: 14px 0; }
.pl-name small { color: var(--neutral-600); font-size: .85rem; font-weight: 400; }

/* ---------- Modals (Login etc.) ---------- */
.modal { background: var(--bg-surface); border-radius: 28px; }
.modal-tabs { background: var(--neutral-100); border-radius: 20px; padding: 4px; border-bottom: 0; gap: 4px; }
.modal-tab { border-radius: 16px; border-bottom: 0 !important; font-weight: 700; color: var(--neutral-700); }
.modal-tab.active { background: #fff; color: var(--text-primary) !important; }
.m-btn { background: var(--button-color); border-radius: 20px; padding: 14px; }
.m-btn.secondary { background: #fff; color: var(--text-primary); border: 1px solid var(--border); }
.mf label { font-weight: 700; color: var(--text-primary); }
.split-cursor-hint { background: var(--ink); }
.faq-q-btn { font-weight: 700; }

/* =============================================
   MOBIL / TABLET (< 1024px)
   ============================================= */
@media (max-width: 1023.98px) {
  :root { --edge: 12px; }
  .topbar {
    display: grid; grid-template-columns: 1fr; gap: 10px; height: auto; padding: 0;
    background: transparent; box-shadow: none; border-radius: 0;
  }
  .tb-row { display: flex; align-items: center; gap: 10px; }
  .tb-row1 { justify-content: space-between; }
  .tb-brand { order: 0; padding: 10px 18px; background: var(--bg-surface); border-radius: 24px; border: 0; height: auto; box-shadow: var(--shadow-md); }
  .tb-logo { height: 30px; }
  .tb-right { order: 0; margin-left: 0; gap: 10px; }
  .tb-right .auth-btn { box-shadow: var(--shadow-md); background: var(--bg-surface); height: 52px; padding: 0 18px; }
  #btn-register { display: none; }
  .user-badge { width: 54px; height: 54px; box-shadow: var(--shadow-md); font-size: 1.1rem; }
  .tb-row2 { background: #fff; border-radius: 24px; padding: 10px 10px 10px 14px; box-shadow: var(--shadow-md); gap: 10px; }
  .tb-dates { order: 0; flex: 1; background: transparent; border-radius: 0; padding: 0; gap: 12px; min-width: 0; }
  .tb-dates:hover { background: transparent; }
  .tb-cal-icon { display: block; }
  .tb-d-desktop { display: none; }
  .tb-d-mobile { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
  .tb-d-mobile b { font-size: 1.05rem; white-space: nowrap; }
  .tb-d-mobile small { color: var(--neutral-700); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tb-filter { display: inline-flex; align-items: center; gap: 8px; border: 0; background: var(--neutral-100); border-radius: 18px; padding: 14px 18px; font: inherit; font-weight: 700; cursor: pointer; flex: none; }
  .tb-chips { order: 0; border: 0; padding: 0 0 4px; height: auto; gap: 8px; overflow-x: auto; }
  .chip { background: var(--bg-surface); box-shadow: var(--shadow-sm); padding: 11px 17px; }
  .chip.active { background: var(--ink); }
  .zoom-btns { display: none; }
  .map-style-switch { bottom: 46px; right: var(--edge); }
  body.sheet-open .map-style-switch { display: none; }
  .admin-toggle { top: auto; bottom: 110px; right: var(--edge); left: auto; }
  .admin-panel { top: auto; bottom: 156px; left: var(--edge); right: var(--edge); width: auto; max-height: 40dvh; }
  .split-exit { bottom: 24px; }

  .sheet-overlay { align-items: flex-end; }
  .sheet { width: 100%; max-height: 92dvh; border-radius: 28px 28px 0 0; }
  .sheet .sheet-handle { display: block; position: static; width: 44px; height: 5px; background: var(--neutral-300); border-radius: 3px; margin: 10px auto 0; padding: 0; transform: none; touch-action: none; }
  .sheet-overlay.open > .sheet { animation: sheet-up .28s cubic-bezier(.2, .8, .2, 1); }
  @keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
  .sheet-head { padding: 14px 20px 12px; }
  #info-sheet, #info-overlay:not([data-kind="prices"]) #info-sheet { width: 100%; }

  .sheet-panel, .sidebar.sheet-panel, .right-panel.sheet-panel {
    left: 0; right: 0; top: auto; bottom: 0; width: auto; height: min(92dvh, 820px); max-height: none;
    border-radius: 28px 28px 0 0; z-index: 45;
  }
  .sheet-panel.open { animation: sheet-up .28s cubic-bezier(.2, .8, .2, 1); }
  .sheet-panel .sheet-handle { display: block; position: static; width: 44px; height: 5px; background: var(--neutral-300); border-radius: 3px; margin: 10px auto 0; padding: 0; transform: none; touch-action: none; flex: none; }
  .sb-head, .rp-head { padding: 12px 18px 12px; }
  .sb-foot { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

  .pl-desktop { display: none; }
  .pl-mobile { display: block; }
  .pl-seasons { margin: 6px 0 14px; }
  .pl-seasons > button { flex-direction: column; gap: 2px; padding: 10px 4px; }
  .pl-seasons small { font-family: var(--mono); font-weight: 400; font-size: .68rem; color: var(--neutral-600); }
  .pl-mobile .pl-sec { margin: 18px 0 8px; display: block; }
  .pl-card { background: #fff; border-radius: 22px; padding: 4px 16px; }
  .pl-line { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
  .pl-line:first-child { border-top: 0; }
  .pl-line .pl-name { flex: 1; padding: 0; }
  .pl-line .pl-price { font-weight: 700; white-space: nowrap; }
  #info-sheet .modal-head { padding: 12px 20px 8px; }
  #info-sheet .modal-title { font-size: 1.8rem; }
  #info-modal-body { padding: 0 20px 22px; }
}

/* Alte Filter-Farben (style.css) für die neuen Chips neutralisieren */
.chip#elec-filter, .chip#no-elec-filter, .chip#elec-filter:not(.active), .chip#no-elec-filter:not(.active) { background: transparent; color: var(--text-primary); border: 0; width: auto; }
.chip#elec-filter:hover, .chip#no-elec-filter:hover { background: var(--neutral-100); }
.chip#elec-filter.active, .chip#no-elec-filter.active { background: var(--ink); color: #fff; border: 0; }
@media (max-width: 1023.98px) {
  .chip#elec-filter, .chip#no-elec-filter, .chip#elec-filter:not(.active), .chip#no-elec-filter:not(.active) { background: var(--bg-surface); }
  .chip#elec-filter.active, .chip#no-elec-filter.active { background: var(--ink); }
}
.split-card#split-btn, .split-card#split-btn:not(.active), .split-card#split-btn:not(.active):hover { background: transparent; color: var(--text-primary); border: 1.5px dashed var(--neutral-400); width: 100%; font-weight: 400; }
.split-card#split-btn.active, .split-card#split-btn.active:hover, .filter-btn#split-btn.active { background: #fff; color: var(--text-primary); border: 1.5px solid var(--button-color); }
.split-card b { font-weight: 700; color: var(--text-primary); }
.pf-row.phone-row select { width: 118px; padding-left: 12px; padding-right: 6px; font-size: .88rem; text-overflow: ellipsis; }
#info-overlay #info-sheet { width: min(980px, 95vw); }
#info-overlay:not([data-kind="prices"]) #info-sheet { width: min(640px, 95vw); }
.pl-grid { grid-template-columns: minmax(0, 1fr) 150px 150px 150px; }
@media (max-width: 1023.98px) { #info-overlay #info-sheet, #info-overlay:not([data-kind="prices"]) #info-sheet { width: 100%; } }

.ss-count-row .leg { display: inline-flex; flex-direction: row; align-items: center; gap: 7px; font-size: .9rem; color: var(--text-primary); }

/* ---------- Feinschliff Kopfleiste ---------- */
:root { --topbar-h: 76px; }
.topbar { padding: 0 14px 0 8px; gap: 16px; }
.tb-brand { padding-right: 16px; height: 56px; }
.tb-logo { height: 58px; }

/* Alle / Mit Strom / Ohne Strom als ein Schalter */
.tb-chips.seg { padding: 4px; gap: 2px; height: auto; border: 0; background: var(--neutral-100); border-radius: 999px; }
.tb-chips .chip, .tb-chips .chip#elec-filter, .tb-chips .chip#no-elec-filter,
.tb-chips .chip#elec-filter:not(.active), .tb-chips .chip#no-elec-filter:not(.active) { padding: 9px 16px; background: transparent; box-shadow: none; }
.tb-chips .chip:hover { background: rgba(255,255,255,.6); }
.tb-chips .chip.active, .tb-chips .chip#elec-filter.active, .tb-chips .chip#no-elec-filter.active { background: var(--ink); color: #fff; }

/* Sprachwahl: nur die aktuelle Flagge, Klick öffnet die übrigen */
.lang-wrap { position: relative; }
.lang-current { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.lang-current:hover { background: var(--neutral-100); }
.lang-current .flag-icon, .lang-menu .flag-icon { width: 26px; height: 26px; }
.lang-menu { position: absolute; z-index: 60; top: calc(100% + 10px); right: 0; display: none; flex-direction: column; gap: 2px; padding: 6px; background: var(--bg-surface); border-radius: 26px; box-shadow: var(--shadow-lg); }
.lang-menu.open { display: flex; }
.lang-menu .lang-btn { width: 44px; height: 44px; padding: 0; border-radius: 50%; opacity: 1; justify-content: center; background: none; }
.lang-menu .lang-btn:hover { background: var(--neutral-100); }
.lang-menu .lang-btn.active { display: none; }

@media (max-width: 1023.98px) {
  :root { --topbar-h: 76px; }
  .topbar { padding: 0; gap: 10px; }
  .tb-brand { padding: 8px 16px; height: auto; }
  .tb-logo { height: 40px; }
  .lang-current { width: 54px; height: 54px; background: var(--bg-surface); box-shadow: var(--shadow-md); }
  .tb-info-btn { width: 54px; height: 54px; padding: 0; font-size: 0; justify-content: center; border-radius: 50%; }
  .tb-info-btn i { font-size: 1.25rem; }
  .tb-chips.seg { width: 100%; background: var(--bg-surface); box-shadow: var(--shadow-md); }
  .tb-chips .chip { flex: 1; justify-content: center; padding: 11px 6px; }
  .tb-chips .chip, .tb-chips .chip#elec-filter:not(.active), .tb-chips .chip#no-elec-filter:not(.active) { background: transparent; }
  .tb-chips .chip.active, .tb-chips .chip#elec-filter.active, .tb-chips .chip#no-elec-filter.active { background: var(--ink); }
  .sidebar.sheet-panel, .right-panel.sheet-panel { top: auto; }
}

/* Feinschliff 2: Logo-Abstand links, deutlicherer Schalter */
.topbar { padding-left: 22px; }
.tb-chips.seg { background: #e2dccd; padding: 5px 8px 5px 5px; }
.tb-chips .chip, .tb-chips .chip#elec-filter, .tb-chips .chip#no-elec-filter,
.tb-chips .chip#elec-filter:not(.active), .tb-chips .chip#no-elec-filter:not(.active) { padding: 10px 20px; }
.tb-chips .chip:hover { background: rgba(255,255,255,.55); }
@media (max-width: 1023.98px) {
  .topbar { padding-left: 0; }
  .tb-chips.seg { background: var(--bg-surface); padding: 4px; }
  .tb-chips .chip, .tb-chips .chip#elec-filter:not(.active), .tb-chips .chip#no-elec-filter:not(.active) { padding: 11px 6px; }
}

/* Gleitender Auswahl-Balken im Schalter */
.seg.has-thumb { position: relative; }
.seg-thumb { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 999px; background: var(--ink); pointer-events: none; z-index: 0; }
.seg.thumb-ready .seg-thumb { transition: transform .28s cubic-bezier(.4, 0, .2, 1), width .28s cubic-bezier(.4, 0, .2, 1); }
.seg.has-thumb > button, .tb-chips.seg .chip, .tb-chips.seg .chip.active, .tb-chips.seg .chip#elec-filter.active, .tb-chips.seg .chip#no-elec-filter.active {
  position: relative; z-index: 1; background: transparent !important; box-shadow: none !important; transition: color .2s;
}
.tb-chips.seg .chip:hover { background: transparent !important; }
#ss-elec .seg-thumb { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.12); border-radius: 18px; }
#ss-elec > button.active { color: var(--text-primary); }
#pf-lang-seg > button { padding: 10px 8px; }
#pf-lang-seg .flag-icon { width: 28px; height: 28px; }
.rp-tab { white-space: nowrap; }
.pl-grid { grid-template-columns: minmax(0, 1fr) 200px 200px; }
.pl-range { font-family: var(--mono); font-size: .8rem; color: var(--neutral-600); margin: 2px 2px 0; }
.pl-seasons > button { padding: 13px 8px; }
.pl-head .pl-col small { font-size: .74rem; }

/* Footer ohne Preis (nur Weiter / Jetzt buchen, volle Breite); die Preisberechnung steht im zweiten
   Schritt dauerhaft sichtbar, leicht gruen hinterlegt - im ersten Schritt gibt es noch keinen Preis */
.sb-total { display: none; }
#sidebar .sb-foot .book-btn { flex: 1; width: 100%; }
#sidebar[data-step="2"] .price-box { display: flex; }
.price-box { background: #e6eae1; }

/* Dropdowns (Konto/Infos): Innenabstand passend zur grossen Rundung, Eintraege mit eigener Rundung beim Hover */
.user-dropdown, .lp-info-dropdown { padding: 10px 8px; }
.user-dropdown .ud-item, .lp-info-dropdown .ud-item { padding: 10px 16px; border-radius: 14px; }
.user-dropdown .ud-sep { margin: 6px 8px; }

/* Strom-Schalter in der Kopfleiste: der Auswahl-Balken passt sich der Option an
   (Alle = grau, Mit Strom = gelb wie der Punkt, Ohne Strom = dunkel) */
#tb-chips .seg-thumb { background: #7a776f; }
#tb-chips.thumb-ready .seg-thumb { transition: transform .28s cubic-bezier(.4, 0, .2, 1), width .28s cubic-bezier(.4, 0, .2, 1), background-color .28s; }
#tb-chips:has(#elec-filter.active) .seg-thumb { background: #e6a817; }
#tb-chips:has(#no-elec-filter.active) .seg-thumb { background: var(--button-color); }
#tb-chips .chip#elec-filter.active { color: #2a2208; }
#tb-chips .chip#elec-filter.active .dot { background: #2a2208; }

/* "Ohne Strom": etwas mehr Luft links/rechts (Desktop) */
@media (min-width: 1024px) {
  .tb-chips.seg .chip#no-elec-filter, .tb-chips.seg .chip#no-elec-filter:not(.active) { padding-left: 26px; padding-right: 26px; }
}

/* Strom-Schalter im Such-Sheet: gleiches Farbdesign wie in der Kopfleiste (Egal grau, Mit gelb, Ohne dunkel) */
#ss-elec .seg-thumb { background: #7a776f; box-shadow: none; }
#ss-elec.thumb-ready .seg-thumb { transition: transform .28s cubic-bezier(.4, 0, .2, 1), width .28s cubic-bezier(.4, 0, .2, 1), background-color .28s; }
#ss-elec:has([data-v="elec"].active) .seg-thumb { background: #e6a817; }
#ss-elec:has([data-v="noelec"].active) .seg-thumb { background: var(--button-color); }
#ss-elec > button.active { color: #fff; }
#ss-elec > [data-v="elec"].active { color: #2a2208; }
#ss-elec > [data-v="elec"].active i.fa-bolt { color: #2a2208; }

/* Blitz-Icon bei "Mit": gelb wie der Strom-Punkt (aktiv bleibt dunkel auf dem gelben Balken) */
#ss-elec > [data-v="elec"] i.fa-bolt { color: #e6a817; }
#ss-elec > [data-v="elec"].active i.fa-bolt { color: #2a2208; }

/* Sprachauswahl im Konto: gleitender weisser Balken */
#pf-lang-seg .seg-thumb { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.12); border-radius: 18px; }

/* Telefon-Vorwahl: schmaler, eigener Pfeil mit mehr Abstand zum rechten Rand */
.pf-row.phone-row select#pf-phone-cc {
  width: 104px; padding-left: 16px; padding-right: 32px; text-overflow: clip;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%232a2a26' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
}

/* Panorama: Vollbild-Knopf rund, mit FontAwesome-Icon und genug Abstand zur abgerundeten Ecke */
.pano .pnlm-controls-container { top: 12px; left: 12px; }
.pano .pnlm-controls { margin: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: var(--shadow-md); overflow: hidden; }
.pano .pnlm-fullscreen-toggle-button { width: 38px; height: 38px; background-image: none !important; display: flex; align-items: center; justify-content: center; }
.pano .pnlm-fullscreen-toggle-button::before { font-family: 'Font Awesome 5 free'; font-weight: 900; content: "\f424"; font-size: 15px; color: var(--text-primary); }

/* MDI-Icons (Pictogrammers) als Maske, faerben sich wie Font-Icons ueber "color" */
.mdi-i { display: inline-block; width: 1em; height: 1em; background-color: currentColor; vertical-align: -0.125em;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.mdi-i::before { content: none !important; }
.mdi-grill { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.06,2C7.88,3.17 8.17,4.16 8.95,4.97C9.45,5.47 9.61,6.14 9.42,7H10.41C10.53,6.45 10.55,6 10.45,5.55C10.36,5.13 10.05,4.63 9.5,4.03C9.05,3.47 8.89,2.8 9.05,2H8.06M10.55,2C10.36,3.17 10.66,4.16 11.44,4.97C11.94,5.47 12.09,6.14 11.91,7H12.89C13,6.45 13.03,6 12.94,5.55C12.84,5.13 12.53,4.63 12,4.03C11.53,3.47 11.38,2.8 11.53,2H10.55M13.08,2C12.89,3.17 13.19,4.16 13.97,4.97C14.47,5.47 14.61,6.14 14.39,7H15.42C15.55,6.45 15.56,6 15.47,5.55C15.38,5.13 15.06,4.63 14.53,4.03C14.06,3.47 13.91,2.8 14.06,2H13.08M5,8C5,9.42 5.39,10.7 6.14,11.84C6.87,12.96 7.91,13.85 9.14,14.39L5.16,20.44C5.06,20.56 5,20.75 5,21C5,21.41 5.16,21.69 5.44,21.84C5.56,21.94 5.75,22 6,22C6.41,22 6.69,21.84 6.84,21.56L7.83,19.97H14.2C14.41,20.55 14.79,21.05 15.28,21.42C15.78,21.8 16.36,22 17,22C17.83,22 18.53,21.69 19.13,21.09C19.72,20.5 20,19.8 20,19C20,18.17 19.72,17.47 19.13,16.88C18.53,16.28 17.83,16 17,16C16.36,16 15.78,16.17 15.28,16.55C14.78,16.92 14.42,17.41 14.2,18H9.14L11.11,14.95C11.27,15 11.56,15 12,15C12.44,15 12.73,15 12.89,14.95L13.88,16.5C14.29,15.96 14.84,15.54 15.47,15.28L14.91,14.39C16.03,13.89 17,13 17.79,11.77C18.59,10.5 19,9.27 19,8H5M17,18C17.3,18 17.53,18.09 17.72,18.28C17.91,18.47 18,18.72 18,19C18,19.27 17.91,19.5 17.72,19.71C17.54,19.91 17.28,20 17,20C16.74,20 16.5,19.91 16.29,19.71C16.09,19.5 16,19.26 16,19C16,18.7 16.09,18.47 16.29,18.28C16.5,18.09 16.73,18 17,18Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.06,2C7.88,3.17 8.17,4.16 8.95,4.97C9.45,5.47 9.61,6.14 9.42,7H10.41C10.53,6.45 10.55,6 10.45,5.55C10.36,5.13 10.05,4.63 9.5,4.03C9.05,3.47 8.89,2.8 9.05,2H8.06M10.55,2C10.36,3.17 10.66,4.16 11.44,4.97C11.94,5.47 12.09,6.14 11.91,7H12.89C13,6.45 13.03,6 12.94,5.55C12.84,5.13 12.53,4.63 12,4.03C11.53,3.47 11.38,2.8 11.53,2H10.55M13.08,2C12.89,3.17 13.19,4.16 13.97,4.97C14.47,5.47 14.61,6.14 14.39,7H15.42C15.55,6.45 15.56,6 15.47,5.55C15.38,5.13 15.06,4.63 14.53,4.03C14.06,3.47 13.91,2.8 14.06,2H13.08M5,8C5,9.42 5.39,10.7 6.14,11.84C6.87,12.96 7.91,13.85 9.14,14.39L5.16,20.44C5.06,20.56 5,20.75 5,21C5,21.41 5.16,21.69 5.44,21.84C5.56,21.94 5.75,22 6,22C6.41,22 6.69,21.84 6.84,21.56L7.83,19.97H14.2C14.41,20.55 14.79,21.05 15.28,21.42C15.78,21.8 16.36,22 17,22C17.83,22 18.53,21.69 19.13,21.09C19.72,20.5 20,19.8 20,19C20,18.17 19.72,17.47 19.13,16.88C18.53,16.28 17.83,16 17,16C16.36,16 15.78,16.17 15.28,16.55C14.78,16.92 14.42,17.41 14.2,18H9.14L11.11,14.95C11.27,15 11.56,15 12,15C12.44,15 12.73,15 12.89,14.95L13.88,16.5C14.29,15.96 14.84,15.54 15.47,15.28L14.91,14.39C16.03,13.89 17,13 17.79,11.77C18.59,10.5 19,9.27 19,8H5M17,18C17.3,18 17.53,18.09 17.72,18.28C17.91,18.47 18,18.72 18,19C18,19.27 17.91,19.5 17.72,19.71C17.54,19.91 17.28,20 17,20C16.74,20 16.5,19.91 16.29,19.71C16.09,19.5 16,19.26 16,19C16,18.7 16.09,18.47 16.29,18.28C16.5,18.09 16.73,18 17,18Z'/%3E%3C/svg%3E"); }
.mdi-seesaw { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.68 13.26L22.04 15.23L2.35 18.77L2 16.8L4.95 16.27L4.6 14.3C4.5 13.76 4.86 13.24 5.41 13.14C5.95 13.04 6.47 13.4 6.57 13.95L6.92 15.91L16.76 14.15L16.41 12.18C16.31 11.63 16.67 11.11 17.22 11C17.76 10.92 18.28 11.28 18.38 11.82L18.73 13.79L21.68 13.26M10.06 18.4L8 22H16L13.58 17.77L10.06 18.4Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.68 13.26L22.04 15.23L2.35 18.77L2 16.8L4.95 16.27L4.6 14.3C4.5 13.76 4.86 13.24 5.41 13.14C5.95 13.04 6.47 13.4 6.57 13.95L6.92 15.91L16.76 14.15L16.41 12.18C16.31 11.63 16.67 11.11 17.22 11C17.76 10.92 18.28 11.28 18.38 11.82L18.73 13.79L21.68 13.26M10.06 18.4L8 22H16L13.58 17.77L10.06 18.4Z'/%3E%3C/svg%3E"); }
.marker-icon .mdi-i { width: 1.2em; height: 1.2em; margin-bottom: 0; vertical-align: baseline; }
.mtype-btn .mdi-i { width: 1.15em; height: 1.15em; }

/* Mobil: kein Filter-Knopf (Zeitraum-Karte oeffnet die Suche), Info-Knopf ohne Unterstreichung,
   "Alle" bleibt lesbar, solange der gleitende Balken noch nicht positioniert ist */
@media (max-width: 1023.98px) {
  .tb-filter { display: none !important; }
  .tb-row2 { padding: 12px 16px; }
  .tb-info-btn, .tb-info-btn * { text-decoration: none !important; }
  .tb-info-btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
  #tb-chips:not(.thumb-ready) .chip.active { color: var(--text-primary) !important; }
}

/* Mobil: Zeitraum + Strom-Schalter in EINER Karte ganz oben; Logo und die drei Knoepfe darunter */
@media (max-width: 1023.98px) {
  .tb-row2 { order: -1; flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .tb-row2 .tb-dates { flex: 1 1 100%; }
  .tb-row2 .tb-chips.seg { order: 3; flex: 1 1 100%; width: 100%; background: var(--neutral-100); box-shadow: none; padding: 4px; }
  .tb-row1 { order: 1; }
}
/* Info-Knopf: schlichtes "i" (ohne Kreis) exakt mittig */
.tb-info-btn i { display: inline-block; text-align: center; }
@media (max-width: 1023.98px) {
  .tb-info-btn { display: flex; align-items: center; justify-content: center; padding: 0; }
  .tb-info-btn i { display: block; width: 1em; margin: 0; font-size: 1.35rem; line-height: 1; text-align: center; }
}

/* Mobil: Strom-Schalter nur so breit wie sein Inhalt */
@media (max-width: 1023.98px) {
  .tb-row2 .tb-chips.seg { flex: 0 0 auto; width: auto; max-width: 100%; align-self: flex-start; }
  .tb-row2 .tb-chips.seg .chip { flex: 0 0 auto; padding: 10px 16px; }
}

/* Zeitraum-Karte: ab 600px Zeitraum links und Strom-Schalter rechts in EINER Zeile,
   darunter (schmale Handys) untereinander mit vollbreitem Schalter */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .tb-row2 { flex-wrap: nowrap; align-items: center; }
  .tb-row2 .tb-dates { flex: 1 1 auto; }
  .tb-row2 .tb-chips.seg { order: 0; flex: 0 0 auto; width: auto; margin-left: auto; align-self: center; }
}
@media (max-width: 599.98px) {
  .tb-row2 .tb-chips.seg { flex: 1 1 100%; width: 100%; align-self: stretch; }
  .tb-row2 .tb-chips.seg .chip { flex: 1; justify-content: center; padding: 10px 6px; }
}

/* =============================================
   Kopfleiste nach Mockup (2026-10-08): Datumsblock mit Kalender-Kachel,
   Strom-Schalter mit Icons, Infos mit Kreis-i, Sprache "DE v", Avatar.
   Unter 1024px Mobil-Struktur; 748-1023px mit Desktop-Leistenstil (Logo in der Leiste).
   ============================================= */
.tb-d-new, .lc-code, .lc-chev, .chip-ico { display: none; }
.tb-d-desktop { display: none !important; }
.tb-info-ico { width: 22px; height: 22px; flex: none; }
@media (max-width: 1023.98px) { .tb-info-btn .tb-info-ico { width: 1.35rem; height: 1.35rem; } }
@media (min-width: 748px) {
  :root { --topbar-h: 84px; }
  .topbar { border-radius: 34px; padding: 0 16px 0 22px; gap: 20px; background: #f3eee6; }
  .tb-brand { height: 60px; padding-right: 22px; }

  .tb-dates { gap: 14px; padding: 6px 10px 6px 6px; }
  .tb-cal-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: none; border-radius: 15px; background: #e7e0d5; color: var(--ink); font-size: 1.1rem; }
  .tb-d-new { display: flex; flex-direction: column; line-height: 1.25; }
  .tb-d-new b { font-size: 1.04rem; font-weight: 700; white-space: nowrap; }
  .tb-d-new small { font-size: .86rem; color: var(--neutral-600); white-space: nowrap; }
  .tb-dates:hover { background: rgba(0,0,0,.04); }

  .tb-chips { padding-left: 20px; }
  .tb-chips.seg { background: #e0d7ca; }
  .tb-chips .dot { display: none; }
  .tb-chips .chip-ico { display: inline-block; flex: none; font-size: .95rem; width: 1em; height: 1em; }
  .tb-chips .chip-ico-svg { width: 1.05rem; height: 1.05rem; }
  .tb-chips .fa-bolt.chip-ico { color: #e6931f; }
  #tb-chips .chip#elec-filter.active .chip-ico { color: #2a2208; }
  #tb-chips .seg-thumb { background: var(--ink); }
  #tb-chips:not(.thumb-ready) .chip.active { background: var(--ink); color: #fff !important; }

  .tb-right { gap: 8px; }
  /* rechts nur Icons ohne Beschriftung: Infos, Sprache, Konto */
  .tb-right .tb-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; font-size: 0; color: var(--ink); }
  .tb-right .tb-info-btn .tb-info-ico { width: 26px; height: 26px; }
  .lang-current { width: 46px; height: 46px; padding: 0; border-radius: 50%; }
  .lang-current .flag-icon { width: 28px; height: 20px; border-radius: 3px; }
  .user-badge { width: 52px; height: 52px; font-size: 1.15rem; }
}

/* 748-1023px: Struktur wie Mobil (Leiste oben, Infos/Sprache/Konto als eigene runde Knoepfe
   darunter rechts), aber die Leiste im Desktop-Stil MIT Logo darin */
@media (min-width: 748px) and (max-width: 1023.98px) {
  .topbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; height: var(--topbar-h); padding: 0 14px 0 22px; background: #f3eee6; border-radius: 34px; box-shadow: var(--shadow-md); }
  .tb-row, .tb-row1, .tb-row2 { display: contents; }
  .tb-brand { order: 1; padding: 0 16px 0 0; height: 60px; background: none; box-shadow: none; border-radius: 0; border-right: 1px solid var(--border); }
  .tb-logo { height: 52px; }
  .tb-dates { order: 2; flex: 0 1 auto; min-width: 0; padding: 6px 10px 6px 6px; gap: 14px; }
  .tb-dates:hover { background: rgba(0,0,0,.04); }
  .tb-d-mobile { display: none; }
  .tb-d-new { display: flex; }
  .tb-row2 .tb-chips.seg { order: 3; flex: 0 0 auto; width: auto; margin-left: auto; align-self: center; background: #e0d7ca; box-shadow: none; padding: 5px 8px 5px 5px; border: 0; }
  .tb-row2 .tb-chips.seg .chip { flex: 0 0 auto; padding: 10px 18px; }
  .tb-right { position: absolute; top: calc(100% + 10px); right: 0; order: 0; margin: 0; gap: 10px; }
  .lang-current, .tb-right .tb-info-btn, .user-badge { width: 52px; height: 52px; }
  .user-badge { box-shadow: var(--shadow-md); }
}

/* 1024-1199px: ausgeloggt wuerde die Leiste ueberlaufen - nur "Anmelden", Schalter etwas enger */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  #btn-register { display: none; }
  .tb-chips .chip, .tb-chips .chip#elec-filter, .tb-chips .chip#no-elec-filter,
  .tb-chips .chip#elec-filter:not(.active), .tb-chips .chip#no-elec-filter:not(.active),
  .tb-chips.seg .chip#no-elec-filter, .tb-chips.seg .chip#no-elec-filter:not(.active) { padding: 10px 14px; }
}

/* Unter 748px: Leistenstil bleibt (Datum mit Kalender-Kachel, Strom-Schalter mit Icons), aber das
   Logo steht ausserhalb unter der Leiste (links), die drei Knoepfe auf derselben Zeile rechts */
@media (max-width: 747.98px) {
  .tb-row2 { background: #f3eee6; border-radius: 30px; padding: 14px; }
  .tb-cal-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: none; border-radius: 15px; background: #e7e0d5; color: var(--ink); font-size: 1.1rem; }
  .tb-d-mobile { display: none; }
  .tb-d-new { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
  .tb-d-new b { font-size: 1.02rem; font-weight: 700; white-space: nowrap; }
  .tb-d-new small { font-size: .86rem; color: var(--neutral-600); white-space: nowrap; }
  .tb-row2 .tb-chips.seg { background: #e0d7ca; }
  .tb-chips .dot { display: none; }
  .tb-chips .chip-ico { display: inline-block; flex: none; font-size: .95rem; width: 1em; height: 1em; }
  .tb-chips .chip-ico-svg { width: 1.05rem; height: 1.05rem; }
  .tb-chips .fa-bolt.chip-ico { color: #e6931f; }
  #tb-chips .chip#elec-filter.active .chip-ico { color: #2a2208; }
  #tb-chips .seg-thumb { background: var(--ink); }
  #tb-chips:not(.thumb-ready) .chip.active { background: var(--ink); color: #fff !important; }
}

/* Fussleiste: nur unter 748px sichtbar */
.site-foot { display: none; }
.map-info-list { list-style: none; display: flex; flex-direction: column; gap: 12px; color: var(--text-primary); line-height: 1.45; }
.map-info-list a { color: var(--button-color); font-weight: 700; }

/* Unter 748px: oben nur Logo + die drei Knoepfe, die Leiste (Zeitraum + Strom-Schalter) sitzt unten
   ueber einer festen Fussleiste (Impressum, Datenschutz, Karten-Info); der Leaflet-Hinweis steht im Modal */
@media (max-width: 747.98px) {
  :root { --foot-h: 42px; --tb-bar-h: 84px; --bottom-ui: calc(var(--foot-h) + var(--tb-bar-h) + var(--edge) * 2 + env(safe-area-inset-bottom, 0px)); }
  .leaflet-control-attribution { display: none !important; }
  .site-foot {
    display: flex; position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; align-items: center; justify-content: center; gap: 8px;
    height: calc(var(--foot-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #f3eee6; box-shadow: 0 -1px 0 var(--border);
  }
  .site-foot button { background: none; border: 0; font: inherit; font-size: .82rem; font-weight: 600; color: var(--neutral-700); padding: 10px 8px; cursor: pointer; }
  .site-foot button:hover { color: var(--ink); }
  .foot-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--neutral-400); flex: none; }
  .tb-row2 { position: fixed; z-index: 30; left: var(--edge); right: var(--edge); bottom: calc(var(--foot-h) + var(--edge) + env(safe-area-inset-bottom, 0px)); }
  .tb-logo { height: 52px; }
  .tb-brand { padding: 8px 20px; }
  .map-style-switch { bottom: var(--bottom-ui); }
  .admin-toggle { bottom: calc(var(--bottom-ui) + 56px); }
  .admin-panel { bottom: calc(var(--bottom-ui) + 108px); }
  .split-exit { bottom: var(--bottom-ui); }
}

/* "Ohne Strom": durchgestrichener Blitz als SVG (bolt-solid-full_no.svg), dunkles Gruen wie die Pins ohne Strom, aktiv (dunkler Balken) weiss */
.tb-chips .chip-bolt-off { color: var(--button-color); }
#tb-chips .chip#no-elec-filter.active .chip-bolt-off { color: #fff; }
#tb-chips:not(.thumb-ready) .chip#no-elec-filter.active { background: var(--button-color); }

/* Unter 600px: Strom-Schalter nur mit Icons (Blitz / durchgestrichener Blitz), "Alle" behaelt den Text;
   Zeitraum links, Schalter rechts in EINER Zeile ohne Umbruch */
@media (max-width: 599.98px) {
  .tb-row2 { flex-wrap: nowrap; padding: 12px; gap: 8px; }
  .tb-row2 .tb-dates { flex: 1 1 auto; min-width: 0; gap: 10px; }
  .tb-cal-icon { width: 40px; height: 40px; font-size: 1rem; border-radius: 13px; }
  .tb-d-new { min-width: 0; }
  .tb-d-new b { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; }
  .tb-d-new small { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; }
  .tb-row2 .tb-chips.seg { order: 0; flex: 0 0 auto; width: auto; margin-left: auto; align-self: center; padding: 4px; gap: 0; }
  .tb-chips .chip-label { display: none; }
  .tb-row2 .tb-chips.seg .chip { flex: 0 0 auto; padding: 10px 12px; }
  .tb-chips .chip-ico { font-size: 1.15rem; }
}

/* FAQ (2026-10-17): Fragen als eigene Karten, Abschnitte als Mono-Ueberschrift, runder Pfeil, lesbarere Antworten */
.faq-section { font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--neutral-600); margin: 22px 4px 10px; }
.faq-section.first { margin-top: 2px; }
.faq-item { background: #fff; border: 1px solid rgba(30, 34, 27, .08) !important; border-radius: 18px; margin-bottom: 8px; transition: border-color .2s, box-shadow .2s; }
.faq-item:last-child { border-bottom: 1px solid rgba(30, 34, 27, .08) !important; }
.faq-item:hover { border-color: rgba(30, 34, 27, .18) !important; }
.faq-item.open { border-color: color-mix(in srgb, var(--button-color) 35%, transparent) !important; box-shadow: 0 8px 20px -14px rgba(30, 34, 27, .45); }
.faq-q-btn { padding: 14px 14px 14px 18px !important; gap: 14px !important; font-weight: 700; font-size: .98rem; line-height: 1.35; border-radius: 18px; }
.faq-q-btn:focus-visible { outline: 2px solid var(--button-color); outline-offset: -2px; }
.faq-caret { width: 30px; height: 30px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(30, 34, 27, .06); color: var(--ink) !important; font-size: .72rem; transition: transform .25s, background-color .2s, color .2s; }
.faq-item.open .faq-caret { transform: rotate(180deg); background: var(--button-color); color: #fff !important; }
.faq-a { padding: 0 18px 16px !important; font-size: .95rem !important; line-height: 1.6; color: var(--text-primary) !important; }
#info-overlay[data-kind="faq"] #info-modal-body { padding-bottom: 4px; }
/* Spielplatz (Wippe): das Symbol liegt im SVG unten (y 11-22 von 24), deshalb im Kreis optisch mittig nach oben schieben */
.marker-icon .mdi-seesaw { transform: translateY(-0.19em); margin-bottom: 0 !important; }

/* Ab 1024px (Kopfleiste in einer Zeile): Zeitraum + Strom-Schalter mittig in der Kopfleiste (Logo links und Konto rechts teilen
   sich den Rest gleich, dadurch steht die Mitte genau in der Bildschirmmitte) */
@media (min-width: 1024px) {
  .tb-brand { flex: 1 1 0; min-width: max-content; border-right: 0; padding-right: 0; }
  .tb-right { flex: 1 1 0; min-width: max-content; justify-content: flex-end; margin-left: 0; }
  .tb-chips { border-left: 0; }
}

/* 360°-Vollbild-Knopf: Pannellum setzt den Button auf display:block, das Icon klebte oben links -> absolut zentrieren */
.pano .pnlm-fullscreen-toggle-button { position: relative; }
.pano .pnlm-fullscreen-toggle-button::before { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; line-height: 1; }

/* 360°-Vollbild: Stellplatz-Nadel unten mittig (gruen = ohne Strom, gelb = mit Strom, wie die Punkte auf der Karte) */
.pano-fs-top { justify-content: flex-end !important; }
.pano-fs-pin {
  position: absolute; left: 50%; bottom: max(28px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); display: flex; flex-direction: column; align-items: center;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); pointer-events: none;
}
.pano-fs-pin-head {
  min-width: 64px; height: 64px; padding: 0 12px; box-sizing: border-box; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--button-color); color: #fff; border: 3px solid #fff;
  font-family: 'Baloo 2', 'Maven Pro', sans-serif; font-size: 1.6rem; line-height: 1;
}
.pano-fs-pin-head b { font-weight: 700; }
.pano-fs-pin-head i { font-size: 1.05rem; }
/* Spitze der Nadel */
.pano-fs-pin::after {
  content: ''; width: 0; height: 0; margin-top: -2px;
  border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 14px solid #fff;
}
.pano-fs-pin::before {
  content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); z-index: 1; width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid var(--button-color);
}
.pano-fs-pin.elec .pano-fs-pin-head { background: #e6a817; color: #2a2208; }
.pano-fs-pin.elec::before { border-top-color: #e6a817; }
/* Grill- und Spielplatz-Icon im Marker-Kreis etwas groesser (MDI-Symbole wirken neben den Font-Icons kleiner) */
.marker-icon .mdi-grill, .marker-icon .mdi-seesaw { width: 1.45em; height: 1.45em; }

/* Sprache: Flagge rund wie die uebrigen Rundknoepfe */
/* Flagge fuellt den Knopf bis auf einen schmalen weissen Rand (wie der Avatar) */
.lang-current { background: #fff !important; padding: 0 !important; }
.lang-current .flag-icon { width: calc(100% - 6px) !important; height: calc(100% - 6px) !important; border-radius: 50% !important; box-shadow: none; }
/* Info, Sprache, Konto: drei gleich grosse weisse Rundknoepfe; Info als schlichtes "i" ohne Ring, exakt mittig */
.tb-right .tb-info-btn, .lang-current, .user-badge { width: 48px !important; height: 48px !important; flex: none; }
@media (max-width: 1023.98px) { .tb-right .tb-info-btn, .lang-current, .user-badge { width: 52px !important; height: 52px !important; } }
.tb-info-btn { position: relative; background: #fff !important; border: 0 !important; border-radius: 50% !important; box-shadow: var(--shadow-md) !important; }
.tb-info-btn .tb-info-ico { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: auto !important; height: auto !important; margin: 0 !important; font-size: 1.15rem !important; line-height: 1; color: var(--ink); }
.tb-info-btn:hover { filter: brightness(.97); }
.tb-right .tb-info-btn { font-size: 0 !important; padding: 0 !important; }


/* Breite Bildschirme: Zeitraum in die Breite gezogen - Anreise -> Abreise nebeneinander (Mono-Label ueber
   Baloo-Datum), Naechte als eigene Pille, alles in einer Zeile */
@media (min-width: 1400px) {
  .tb-dates { gap: 18px; padding: 6px 10px 6px 6px; }
  .tb-cal-icon { width: 52px !important; height: 52px !important; border-radius: 17px !important; font-size: 1.3rem !important; display: flex !important; align-items: center; justify-content: center; }
  .tb-dates .tb-d-new, .tb-dates .tb-d-mobile { display: none !important; }
  .tb-dates .tb-d-desktop { display: flex !important; align-items: center; gap: 22px; }
  .tb-d-desktop .tb-block small { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--neutral-600); }
  .tb-d-desktop .tb-block b { font-family: 'Baloo 2', 'Maven Pro', sans-serif; font-size: 1.45rem; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; }
  .tb-d-desktop .tb-arrow { font-size: 1.3rem; color: var(--neutral-400); }
  .tb-d-desktop .tb-nights { font-size: .8rem; letter-spacing: .06em; padding: 7px 14px; border-radius: 999px; background: rgba(30, 34, 27, .07); color: var(--ink); }
}


/* 360°: Nadir-Scheibe mit Stellplatz-Nummer (Hotspot bei pitch -90, siehe panoNadirSpot in app.js) */
.pano-nadir { width: 0; height: 0; pointer-events: none !important; }
.pano-nadir-disc {
  position: absolute; left: -270px; top: -270px; width: 540px; height: 540px; box-sizing: border-box;
  border-radius: 50%; border: 14px solid #fff; background: var(--button-color); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); transform-origin: 50% 50%; backface-visibility: hidden;
  font-family: 'Baloo 2', 'Maven Pro', sans-serif; text-align: center;
}
.pano-nadir-disc small { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.pano-nadir-disc b { font-size: 208px; font-weight: 700; line-height: .9; letter-spacing: -.02em; }
.pano-nadir-disc i { font-size: 68px; margin-bottom: 8px; }
.pano-nadir-disc .nadir-bolt-off { width: 72px; height: 72px; margin-bottom: 8px; }
.pano-nadir-disc.elec { background: #e6a817; color: #2a2208; }