@charset "UTF-8";
/* ===== ICOMOON ICON FONT ===== */
@font-face {
  font-family: 'icomoon';
  src: url('fonts/icomoon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* ===== OPEN SANS ===== */
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== BARLOW CONDENSED ===== */
@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/BarlowCondensed-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/BarlowCondensed-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* R268 (25.08.): echte 600/700 statt Browser-Fake-Bold aus der 500er - Zimmer-Titel
   wirkten je nach Karte unterschiedlich fett; TTF selbst gehostet (kein CDN zur Laufzeit). */
@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/BarlowCondensed-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/BarlowCondensed-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  /* Font-Family Variablen (von wellnesshotel.com übernommen) */
  --font-family-sans-serif: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-heading: 'Barlow Condensed', 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bg:#ffffff;
  --text:#0b1020;
  --muted:#64748b;
  --border:#e7eaf0;
  --primary:#002349;
  --accent:#ef8a7d;
  --shadow: 1px 3px 5px rgba(0,0,0,.15);
  --cardShadow: 0 10px 30px rgba(15,23,42,.07);
  --good:#16a34a;
  --purple:#7c3aed;
  
  --sideW: 380px;     /* deine perfekte Side-Breite */
  --sideMin: 260px;
  --colGap: 26px;
  --panelMax: 960px;
  --panelMin: 560px;  /* ab hier lieber Side kleiner machen statt Overlap */
  --pagePad: 36px;    /* links+rechts Reserve (18px + 18px) */
  
  /* ✅ Side wird kleiner, wenn sonst nicht genug Platz bleibt */
  --sideEff: min(var(--sideW), calc(100vw - var(--panelMin) - var(--colGap) - var(--pagePad)));
}


*{box-sizing:border-box}
body{
  margin:0;
  font-family: Barlow Condensed,sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* NAV (wie deine Startseite) */


.menu{
  justify-self:start;
  display:flex;
  gap:40px;
  align-items:center;
  color:var(--muted);
  font-weight:300;
  font-size:22px;
}
.menu a{ color:inherit; text-decoration:none; padding:10px 10px; border-radius:10px; }
.menu a:hover{ color:var(--text); }


.brand img{ width:56px; height:56px; display:block; }

.brand .logoCircle{
  width:100%;
  height:56px;
}

.logoCircle img{
  width:78px;
  height:78px;
  display:block;
}
.navRight{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:14px;
  padding-right:8px;
}


/* CONTENT GRID */
.wrap{
  max-width:1500px;
  margin:0 auto;
  padding: 180px 18px 80px;
}

.layout{
  display:grid;
  align-items:start;
  gap: var(--colGap);
  grid-template-columns: 110px 1fr minmax(var(--sideMin), var(--sideEff));
}

/* ✅ SINGLE HOTEL MODE: keine Timeline-Spalte */
body.singleHotelMode .layout{
  grid-template-columns: 980px minmax(var(--sideMin), var(--sideEff));
  justify-content: center; /* zentriert die 1100px + sidebar in der wrap */
}

/* optional: Timeline-Aside wirklich weg */
body.singleHotelMode aside.timeline{
  display:none !important;
}


@media (max-width: 860px){
  .side{ display:none; }
}

/* Left timeline */
.timeline{
  position: relative;
  padding-right: 10px;
}

/* optional: schöner scrollbar */
.timeline::-webkit-scrollbar{ width:10px; }
.timeline::-webkit-scrollbar-thumb{ background:#e9ecf2; border-radius:999px; }

.tline{
  position:relative;
  padding-left:26px;
}
.tline::before{
  content:"";
  position:absolute;
  left:12px;
  top:0;
  bottom:0;
  width:2px;
  background:#f0f0f0;
}
.tItem{
  position:absolute;
  left:0;
  width:100%;
}

.dot{
  position:absolute;
  left:4px;
  top:6px;
  width:18px;
  height:18px;
  border-radius:999px;
  background:#0b2343;
}
.dot.purple{
  background: #ef8a7d;
width: 14px;
height: 14px;
left: 6px;
top: 19px;
}
.tLabel{
  font-size:14px;
  font-weight:500;
  color:#002349;
  margin-left: 34px;
  margin-top: 6px;
}

/* Main */
.main h2{
  margin: 18px 0 20px;
  font-size: 22px;
  font-weight: 700;
  color: #ef8a7d;
}

.heroRow{
display:flex;
align-items:flex-start;
gap:22px;
margin:8px 0 10px;
}

.segItem{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
min-width:70px;
min-height: 112px;
}

.circle{
width:44px;
height:44px;
border-radius:999px;
background:#d5d5d5;
display:flex;
align-items:center;
justify-content:center;
}

.circle i{
color:#fff;
font-size:18px;
}

.segName{
font-size:13px;
color:#002349;
text-align:center;
max-width:90px;
line-height:1.4;
font-weight: 600;

display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;   /* max 2 Zeilen */
overflow:hidden;

min-height: calc(2 * 1.15em); /* reserviert exakt 2 Zeilen Höhe */
}


.subline{
  margin:0 0 4px;
  font-size:18px;
  color:#111827;
}

.divider{ height:1px; background:#eef0f5; margin:18px 0; }

.included{
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
  font-size:14px;
  color:#111827;
}
.included ul{
  margin:8px 0 0 18px;
  color:#111827;
}
.note{
  margin-top:12px;
  font-size:12px;
  color:#111827;
  opacity:.75;
position: relative;
bottom: -14px;
text-align:right;
}

/* Location images row (map + 2 images) */
.locRow{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap:12px;
  margin:12px 0 6px;
}
.imgCard{
  border-radius:12px;
  border:1px solid #eef0f5;
  background: linear-gradient(135deg, rgba(0,35,73,.10), rgba(239,138,125,.18));
  height:90px;
  overflow:hidden;
  position:relative;
}
.imgCard .label{
  position:absolute;
  left:14px;
  top:12px;
  font-size:12px;
  font-weight:700;
  background:rgba(255,255,255,.75);
  padding:6px 10px;
  border-radius:999px;
}

.imgCard img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}


/* Day card */
.dayBlock{
  margin-top:22px;
  padding-bottom:18px;
  border-top: 1px solid #dfdfdf;
  padding-top: 22px;
}
.dayHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}
.dayTitle{
  font-size:30px;
  font-weight:700;
  color: #ef8a7d;
}
.daySub{
  font-size:12px;
  color:#111827;
  opacity:.75;
  margin-top:10px;
}
.nightsMini{
  font-size:12px;
  color:#111827;
  opacity:.75;
  white-space:nowrap;
}

.card{
  border:1px solid #eef0f5;
  border-radius:16px;
  box-shadow: var(--cardShadow);
  background:#fff;
  padding:14px;
}

.settingsRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.settingChip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid #e8ebf3;
  border-radius:999px;
  background:#fff;
  box-shadow: 0 6px 18px rgba(15,23,42,.05);
  font-size:13px;
  line-height:1;
}

.settingChip i{
  font-size:14px;
  opacity:.9;
}

.settingChip .lbl{
  font-weight:400;
  opacity:.75;
}

.settingChip .val{
  font-weight:600;
  color:#111827;
}


/* “Comfort / Luxury” row */
.tierRow{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  margin-bottom:12px;
  font-size:13px;
  color:#111827;
}
.tierRow b{ font-weight:800; }
.tierRow .muted{ opacity:.75; font-weight:600; }

.hotelStrip{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
  margin-bottom:18px;
}
@media (max-width: 980px){
  .hotelStrip{ grid-template-columns: repeat(3, 1fr); }
}

.hMini{
  border:1px solid #eef0f5;
  border-radius:12px;
  padding:24px;
  cursor:pointer;
  background:#fff;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.hMini:hover{ transform: translateY(-2px); }
.hMini.active{
  color: #fff;
  background: #f6c0b9;
}
.hMini.invalid{
  opacity:.35;
  filter: grayscale(1);
}
.hMini.invalid:hover{
  transform:none;
  box-shadow:none;
}
.hMini.invalid.active{
  opacity:.60;            /* aktiv aber trotzdem sichtbar "warn" */
  filter: grayscale(.6);
}

.hThumb{
  height:46px;
  border-radius:10px;
  background: linear-gradient(135deg, rgba(0,35,73,.10), rgba(239,138,125,.25));
  margin-bottom:8px;
}
.hMini .nm{ font-size:12px; font-weight:700; }
.hMini .pr{ font-size:12px; opacity:.75; margin-top:3px; }

/* hotel details */
.hotelDetails{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  padding:12px;
  border-radius:14px;
  background:#fafbfe;
  border:1px solid #eef0f5;
}
@media (max-width: 880px){
  .hotelDetails{ grid-template-columns: 1fr; }
}
.hTitleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.hTitleRow h3{
  margin:0;
  font-size:16px;
  font-weight:800;
}
.pillGood{
  font-size:12px;
  font-weight:800;
  color:var(--good);
}
.feat{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
  font-size:12px;
  color:#111827;
}
.feat div::before{
  content:"\25CF";
  color:#111827;
  opacity:.45;
  margin-right:8px;
}
.linkRow{
  margin-top:10px;
  font-size:12px;
  color:var(--purple);
  font-weight:700;
}

.gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  margin-top:12px;
}
.gallery .ph{
  height:86px;
  border-radius:12px;
  border:1px solid #eef0f5;
  background: linear-gradient(135deg, rgba(0,35,73,.08), rgba(239,138,125,.22));
}

/* Experiences */
.expHead{
  margin:38px 0 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.expHead h4{
  margin:0;
  font-size:15px;
  font-weight:600;
color: #ef8a7d;
}
.searchTools{
  display:flex;
  gap:8px;
  align-items:center;
  opacity:.85;
  font-size:12px;
}
.expRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
@media (max-width: 980px){
  .expRow{ grid-template-columns: 1fr; }
}
.expCard{
  border:1px solid #eef0f5;
  border-radius:16px;
  background:#fff;
  box-shadow: var(--cardShadow);
  overflow:hidden;
}
.expImg{
  height:90px;
  background: linear-gradient(135deg, rgba(239,138,125,.28), rgba(0,35,73,.10));
}
.expBody{
  padding:12px 14px 14px;
}
.expTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.expTitle{ font-weight:800; font-size:13px; }
.badge{
  font-size:11px;
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(124,58,237,.10);
  color: var(--purple);
  white-space:nowrap;
}
.expDesc{ font-size:12px; opacity:.8; margin-top:8px; }
.expFoot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:12px;
  font-size:12px;
  opacity:.85;
}
.btnAdd{
  border: 1px solid #e3e3e3;
  background: #fff;
  color: #002349;
  font-weight: 500;
  border-radius: 12px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: Open Sans,sans-serif;
}

.btnAdd:hover {
color: #ef8a7d;
}

/* Sidebar widget */
.side{
  position:sticky;
  top:180px;
  width: var(--sideEff);
}

.agent{
  border:1px solid #eef0f5;
  border-radius:18px;
  box-shadow: var(--cardShadow);
  padding:14px;
  background:#fff;
}
.agentRow{
  display:flex;
  align-items:center;
  gap:10px;
}
.avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;

  /* Fallback / Overlay-Gradient */
  background:
    linear-gradient(
      135deg,
      rgba(0, 35, 73, 0.18),
      rgba(239, 138, 125, 0.28)
    ),
    url("assets/avatar.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.agent b{ display:block; font-size:13px; }
.agent small{ display:block; opacity:.7; font-size:12px; margin-top:2px; }

.agent .btn{
  margin-top:12px;
  width:100%;
  background:#002349;
  border:none;
  color:#fff;
  font-weight:900;
  border-radius:999px;
  padding:12px 14px;
  cursor:pointer;
}

/* Controls top of main (live settings) */
.controls{
  border:1px solid #eef0f5;
  border-radius:16px;
  padding:12px;
  background:#fff;
  box-shadow: var(--cardShadow);
  margin-bottom:16px;
}
.ctrlGrid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:30px;
  align-items:end;
}
@media (max-width: 980px){
  .ctrlGrid{ grid-template-columns: 1fr 1fr; }
}
.ctrl label{ font-size:12px; font-weight:700; opacity:.8; display:block; margin-bottom:6px; }
.ctrl input, .ctrl select{
  width:100%;
  padding:10px 10px;
  border:1px solid #e8ebf3;
  border-radius:12px;
  outline:none;
  font: inherit;
  font-size:13px;
}

.loading{
  opacity:.7;
  pointer-events:none;
  filter: grayscale(.1);
}

.addCircle{
width:28px;height:28px;
border-radius:999px;
border:2px solid rgba(124,58,237,.35);
background:#fff;
color: var(--purple);
font-weight:900;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
line-height:1;
}

.hMini.active .pr{ opacity: .9; }
.hMini.active .hThumb{ opacity: .85; }

.tLabel.arrival {
font-weight: 500;
font-size: 12px;
margin-top: 0px;
color: #002349;
}

.tLabel.day {
font-weight: 600;
opacity: .85;
margin-top: 18px;
}



.hc{
display:flex;
align-items:center;
gap:8px;
font-size:12px;
font-weight:700;
color:#111827;
opacity:.95;
}

.hc span{ opacity:.85; font-weight:700; }

.hc input[type="number"]{
width:78px;
padding:8px 10px;
border:1px solid #e8ebf3;
border-radius:12px;
font:inherit;
font-size:13px;
outline:none;
}

/* Checkbox-Chip wie die Steppers */
.hcCheck{
display:inline-flex;
align-items:center;
gap:10px;
font-size:12px;
font-weight:600;
color:#111827;
background:#f2f2f2;
padding:8px 12px;
border-radius:999px;
cursor:pointer;
user-select:none;
}

/* echte Checkbox verstecken, bleibt aber klickbar & accessible */
.hcCheck input{
position:absolute;
opacity:0;
width:1px;
height:1px;
}

/* switch */
.hcSwitch{
width:34px;
height:18px;
border-radius:999px;
background:#d8d8d8;
position:relative;
flex:0 0 auto;
transition: .15s ease;
}
.hcSwitch::after{
content:"";
position:absolute;
top:2px;
left:2px;
width:14px;
height:14px;
border-radius:999px;
background:#fff;
transition: .15s ease;
box-shadow: 0 2px 6px rgba(15,23,42,.15);
}

/* checked state */
.hcCheck input:checked + .hcSwitch{
background:#002349; /* passt zu deinem Primary */
}
.hcCheck input:checked + .hcSwitch::after{
transform: translateX(16px);
}

/* optional: aktiver chip background */
.hcCheck input:checked ~ .hcText{
color:#002349;
}


/* HEADER GRID bleibt: links | logo | rechts */
.nav{
height:70px;
display:grid;
align-items:center;
padding:0 28px;
background:#fff;
box-shadow: var(--shadow);

position: fixed;
top: 0; left: 0; right: 0;
z-index: 9999;
}

/* LINKS: alles wirklich linksbündig + in einer Zeile sauber zentriert */
.navLeft{
justify-self:start;
display:flex;
min-width:0;            /* wichtig: darf schrumpfen */
flex-direction: column;
}

/* Datum linksbündig (war vorher right) */
.rangeBox{
text-align: left;
line-height: 1.1;
font-size: 16px;
font-weight: 600;
color: #ef8a7d;
white-space: nowrap;
}
.rangeBox small{
color: #000;
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: .02em;
text-transform: uppercase;
opacity: .7;
margin-bottom: 5px;
}

/* Inputs als Reihe */
.headControls{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;         /* falls es eng wird */
padding-top: 7px;
}

.hcStepper{
display: flex;
align-items: center;
gap: 2px;
font-size: 12px;
font-weight: 400;
color: #111827;
opacity: .95;
background: #f2f2f2;
padding: 4px 12px;
border-radius: 25px;
}

.hcLbl{
opacity:.85;
font-weight:700;
white-space:nowrap;
padding-right: 5px;
}

.stepper{
display:inline-flex;
align-items:center;
gap:4px;
}

.stepBtn{
width: 20px;
height: 20px;
border-radius: 999px;
border: 1px solid #eaeaea;
background: #fff;
font-weight: 900;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
user-select: none;
font-size: 12px;
color: #002349;
}

.stepBtn:hover{
box-shadow: 0 6px 18px rgba(15,23,42,.08);
}

.stepper input[type="number"]{
width:42px;
height:26px;
padding:0 10px;
border:1px solid #e8ebf3;
border-radius:12px;
font:inherit;
font-size:13px;
outline:none;
text-align:center;
}

/* optional: native spinner verstecken */
.stepper input[type="number"]::-webkit-outer-spin-button,
.stepper input[type="number"]::-webkit-inner-spin-button{
-webkit-appearance: none;
margin: 0;
}
.stepper input[type="number"]{
-moz-appearance: textfield;
}


/* LOGO bleibt mittig */
.brand{
justify-self:center;
display:flex;
align-items:center;
justify-content:center;
position:relative;
top: 0;
border-radius: 999px;
background: #fff;
}

/* RECHTS: wirklich rechtsbündig */
.planBox{
justify-self:end;
text-align:right;
line-height:1.2;
min-width:240px;
padding:0px 16px;

}

/* Überschrift */
.planBox small{
color:#000;
display:block;
font-size:11px;
font-weight:700;
letter-spacing:.02em;
text-transform:uppercase;
opacity:.7;
margin-bottom:3px;
}

/* Zeilen */
.planLine{
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;

font-size:14px;
font-weight:700;
color:#002349;
}

/* Icons */
.planLine i{
font-size:14px;
opacity:.75;
}

/* Preis hervorheben */
/* Preis-Zeile */
.planLine.total{
margin-top:8px;
display:flex;
align-items:baseline;
justify-content:flex-end;
gap:10px;
}

/* "Gesamtkosten" Label */
.planLine.total .label{
font-size:13px;
font-weight:500;
color:#64748b;      /* muted */
letter-spacing:.02em;
}

/* Preis */
.planLine.total #planCost{
font-size:20px;
font-weight:900;
color:#ef8a7d;
}

.planLine.total i{
font-size:16px;
opacity:.9;
}

.planSub{
display:block;
font-size:14px;
font-weight:500;
color:#111827;
opacity:.9;
}

.stepBtn:disabled{
opacity:.65;
cursor:not-allowed;
box-shadow:none;
}

/* Basis */
.heroTop{
display:flex;
flex-wrap:wrap;
gap:30px;              /* normaler Abstand */
margin:8px 0 14px;
}

/* Hotels bleiben eine Zeile */
.heroLeft{
display:flex;
flex-wrap:nowrap;
gap:20px;
flex:0 0 auto;
}

/* Chips dürfen umbrechen */
.heroRight{
flex:1 1 260px;
min-width:260px;
}

/* ✅ NUR wenn heroRight in derselben Zeile ist:
 -> heroRight bekommt extra Abstand links */
@supports selector(:has(*)){
.heroTop:has(.heroLeft + .heroRight){
  column-gap: 120px;   /* HIER größer machen (z.B. 140px) */
  row-gap: 30px;       /* Abstand wenn umbricht */
}

/* ✅ Wenn heroRight umbricht (unter die Hotels), dann wieder normal */
.heroTop:has(.heroRight){
  align-items:flex-start;
}
}


.settingsPlaceholder{
border:1px dashed #e3e6ef;
border-radius:14px;
padding:14px 16px;
font-size:13px;
font-weight:600;
color:#475569;
background:#fafbfe;
line-height:1.4;
}

.segDays{
margin-top:2px;
font-size:12px;
font-weight:700;
color:#6f6f6f;
padding:4px 8px;
text-align:center;
line-height:1;
max-width: 130px;
}

/* Verbindung zwischen Hotels */
.segConnector{
position: relative;
width: 74px;              /* Abstand zwischen den Hotels */
flex: 0 0 74px;
display:flex;
align-items:center;
justify-content:center;
}

/* Linie */
.segConnector::before{
content:"";
position:absolute;
left:0;
right:0;
top:50%;
transform:translateY(-50%);
height:2px;
background:#e7eaf0;       /* border tone */
}

/* Hover-Punkt */
.segDot{
position:relative;
width:10px;
height:10px;
border-radius:999px;
background:#002349;
box-shadow:0 0 0 4px rgba(0,35,73,.10);
cursor: help;
}

/* Tooltip */
.segTip{
position:absolute;
left:50%;
top:-10px;
transform:translate(-50%,-100%);
background:#0b1020;
color:#fff;
font-size:12px;
font-weight:600;
padding:8px 10px;
border-radius:12px;
white-space:nowrap;
opacity:0;
pointer-events:none;
transition:.15s ease;
box-shadow: 0 10px 26px rgba(15,23,42,.18);
}

/* kleines “Dreieck” */
.segTip::after{
content:"";
position:absolute;
left:50%;
bottom:-6px;
transform:translateX(-50%);
border:6px solid transparent;
border-top-color:#0b1020;
}

.segDot:hover .segTip{
opacity:1;
}

.heroTop{ display:flex; flex-wrap:wrap; gap:30px; }
.heroLeft{ display:flex; flex-wrap:nowrap; gap:20px; flex:0 0 auto; }
.heroRight{ flex:1 1 260px; min-width:260px; }

.segItem{
cursor:pointer;
user-select:none;
}
.segItem:hover .circle{
transform: translateY(-2px);
transition: .12s ease;
}
.segItem:focus-visible{
outline:3px solid rgba(124,58,237,.35);
outline-offset:6px;
border-radius:16px;
}

/* Grid wie Screenshot */
.hotelStrip{
display:grid;
grid-template-columns: repeat(4, 1fr);
gap:20px;
}

@media (max-width: 1200px){
.hotelStrip{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px){
.hotelStrip{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px){
.hotelStrip{ grid-template-columns: 1fr; }
}

/* Card */
.hMini{
border:1px solid #eef0f5;
border-radius:14px;
overflow:hidden;
background:#fff;
cursor:pointer;
box-shadow: 0 10px 30px rgba(15,23,42,.07);
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.hMini:hover{ transform: translateY(-2px); }

/* Invalid */
.hMini.invalid{
opacity:.45;
filter: grayscale(1);
}
.hMini.invalid.active{
opacity:.70;
filter: grayscale(.7);
}

/* Bildbereich oben */
.hImg{
height: 210px;                 /* Bildhöhe wie Screenshot */
background-image: var(--himg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

/* Body unten – alles zentriert */
.hBody{
padding:16px 14px 4px;
text-align:center;
}

.hBody .nm{
font-size:16px;
font-weight:700;
color:#002349;
margin-top:2px;

display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;   /* max 2 Zeilen */
overflow:hidden;

line-height:1.2;
min-height: calc(2 * 1.2em); /* ✅ reserviert immer 2 Zeilen */
}


.hBody .loc{
margin-top:8px;
font-size:12px;
color:#64748b;
font-weight:500;

display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow:hidden;

line-height:1.2;
min-height: calc(1 * 1.2em);
padding-bottom: 12px;
}


.hBody .pr{
margin-top:14px;
font-size:22px;
font-weight:900;
color:#002349;
}

.hBody .sub{
margin-top:4px;
font-size:11px;
color:#64748b;
opacity:.9;
}


/* ✅ Info-Box unten mittig */
.hInfo{
position:absolute;
left:50%;
bottom:10px;
transform:translateX(-50%);
width: calc(100% - 16px);

background: rgba(255,255,255,.92);
border: 1px solid rgba(231,234,240,.9);
border-radius: 10px;
padding: 8px 10px;
text-align:center;

box-shadow: 0 8px 22px rgba(15,23,42,.12);
z-index:2;
}

.hInfo .nm{
font-size: 12px;
font-weight: 600;
color: #002349;

display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow:hidden;
}

.hInfo .pr{
margin-top:4px;
font-size:12px;
font-weight:700;
color:#334155;
opacity:.9;
}

.hotelNav{
width:54px;
height:54px;
border-radius:16px;
border:1px solid #e8ebf3;
background:#fff;
font-size:34px;
font-weight:900;
color:#002349;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
box-shadow: 0 10px 26px rgba(15,23,42,.08);
user-select:none;
}
.hotelNav:hover{ color:#ef8a7d; transform: translateY(-1px); transition:.12s ease; }
.hotelNav:disabled{
opacity:.35;
cursor:not-allowed;
transform:none;
}

.hMini{
border:4px solid transparent;      /* ✅ immer gleich dick */
border-radius:14px;
overflow:hidden;
background:#fff;
cursor:pointer;
box-shadow: 0 10px 30px rgba(15,23,42,.07);
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.hMini:hover{ transform: translateY(-2px); }

.extrasSummary{
display:flex;
flex-direction:column;
gap:10px;
}

.extraRow{
display:grid;
grid-template-columns: 56px 1fr; /* links Tag, rechts Inhalt */
gap:12px;
align-items:start;
}

.extraDay{
font-size:11px;
font-weight:800;
letter-spacing:.02em;
text-transform:uppercase;
color:#64748b;
line-height:1.2;
padding-top:2px;
}

.extraItems{
font-size:13px;
font-weight:600;
color:#334155;
line-height:1.35;
word-break: break-word;
}

/* --- Extras: schmaler, "Product Card" Look --- */
.extraGrid{
display:grid;
gap:14px;
justify-content:start; /* linksbündig */
grid-template-columns: repeat(4, 1fr);
}

.extraCard{
border:1px solid #eef0f5;
border-radius:16px;
overflow:hidden;
background:#fff;
box-shadow: var(--cardShadow);
display:flex;
flex-direction:column;
}

.extraImg{
height:120px;
background-image: var(--eximg);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
border-bottom:1px solid #eef0f5;
}

.extraBody{
padding:12px 12px 12px;
display:flex;
flex-direction:column;
gap:10px;
}

.extraTitleRow{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
}

.extraTitle{
font-size: 14px;
font-weight: 600;
color: #002349;
line-height: 1.5;
}

.extraPrice{
font-size: 12px;
font-weight: 600;
padding: 6px 10px;
border-radius: 999px;
background: rgb(238, 238, 238);
color: #4d4d4d;
white-space: nowrap;
}

.extraInfo{
font-size:12px;
color:#475569;
opacity:.9;
line-height:1.35;

display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow:hidden;
min-height: calc(2 * 1.35em);
}

.extraFoot{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
margin-top:2px;
}

.extraBooked{
font-size:11px;
font-weight:900;
color:#16a34a;
white-space:nowrap;
}

.btnBook{
border:1px solid #e3e3e3;
background:#fff;
color:#002349;
font-weight:700;
border-radius:12px;
padding:8px 12px;
cursor:pointer;
font-family: Open Sans,sans-serif;
font-size:12px;
}
.btnBook:hover{ color:#ef8a7d; }

/* --- Modal --- */
.modalBack{
position:fixed;
inset:0;
background: rgba(2,6,23,.55);
display:none;
align-items:center;
justify-content:center;
padding:18px;
z-index:99999;
}
.modalBack.open{ display:flex; }

.modal{
width:min(640px, 100%);
background:#fff;
border-radius:2px;
box-shadow: 0 24px 60px rgba(0,0,0,.25);
overflow:hidden;
border:1px solid #eef0f5;
}

.modalHead{
padding:14px 16px;
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:1px solid #eef0f5;
}
.modalHead b{
font-size:18px;
color:#002349;
font-weight:400;
}
.modalClose{
border:none;
background:transparent;
font-size:22px;
cursor:pointer;
opacity:.7;
}
.modalClose:hover{ opacity:1; }

.modalContent{
padding:14px 16px 26px;
}

.modalMeta{
display:grid;
grid-template-columns: 1fr 1fr;
gap:12px;
margin-top:12px;
}
@media (max-width: 520px){
.modalMeta{ grid-template-columns:1fr; }
}

.fld label{
display:block;
font-size:12px;
font-weight:800;
color:#334155;
margin-bottom:6px;
}
.fld input, .fld select{
width:100%;
padding:10px 10px;
border:1px solid #e8ebf3;
border-radius:12px;
outline:none;
font:inherit;
font-size:13px;
}

.modalActions{
display:flex;
justify-content:flex-end;
gap:10px;
margin-top:14px;
}
.btnGhost{
border:1px solid #e8ebf3;
background:#fff;
border-radius:12px;
padding:10px 12px;
font-weight:800;
cursor:pointer;
}
.btnPrimary{
border:none;
background:#002349;
color:#fff;
border-radius:12px;
padding:10px 12px;
font-weight:900;
cursor:pointer;
}
.btnDanger{
border:1px solid rgba(185,28,28,.35);
background:#fff;
color:#b91c1c;
border-radius:12px;
padding:10px 12px;
font-weight:900;
cursor:pointer;
}

/* ================================
   Hotel Info Panel (Step 1)
   ================================ */


.hotelPanelBack{
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
}
.hotelPanelBack.open{ display:block; }

/* Backdrop dimmt ganze Seite (Chat bleibt klickbar nur wenn pointer-events so gesetzt sind) */
.hotelPanelBack::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(2, 6, 23, .55);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

/* ✅ FIXED PANEL */
.hotelPanel{
  position: fixed;
  top: 179px;
  bottom: 16px;

  /* ✅ Center im freien Bereich (Viewport minus effektive Side) */
  left: calc(50% - (var(--sideEff) + var(--colGap)) / 2);
  transform: translateX(-50%);

  /* ✅ Panel wird kleiner, bevor es jemals in die Side laufen kann */
  width: min(var(--panelMax), calc(100vw - var(--sideEff) - var(--colGap) - var(--pagePad)));

  border-radius: 18px;
  background:#fff;
  box-shadow: 0 20px 60px rgba(2,6,23,.25);
  border: 1px solid rgba(148,163,184,.25);
  overflow:hidden;

  display:flex;
  flex-direction:column;
}



.hotelPanelHead{
  flex: 0 0 auto;
}

.hotelPanelBody{
  flex: 1 1 auto;
  min-height: 0;      /* ✅ wichtig für flex-scroll */
  overflow: auto;
  padding: 14px 16px 18px;
  max-height: none;   /* ✅ kein viewport-hack mehr */
}


.hotelPanelSub{
  margin-top:4px;
  font-size: 12px;
  font-weight: 700;
  opacity: .75;
}

.hotelPanelClose{
}

.hotelPanelHero{
  display:flex;
  gap: 14px;
  align-items: stretch;
}

.hotelHeroImg{
  width: 320px;
  height: 190px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(239,138,125,.25), rgba(0,35,73,.12));
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(148,163,184,.22);
}

.hotelHeroMeta{
  flex:1;
  display:grid;
  gap: 10px;
  align-content: start;
}

.hotelHeroLine{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fafbfe;
  border: 1px solid rgba(148,163,184,.18);
}
.hotelHeroLine .lbl{
  font-size: 12px;
  font-weight: 800;
  opacity: .75;
}
.hotelHeroLine .val{
  font-size: 13px;
  font-weight: 900;
}

.hotelPanelSection{
  margin-top: 16px;
}
.secTitle{
  font-weight: 900;
  margin-bottom: 10px;
  color: #ef8a7d;
}

.hotelBullets{
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  opacity: .9;
}

.hotelExtrasGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

.hotelExtraCard{
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.22);
  background: #fff;
  overflow:hidden;
}

.hotelExtraImg{
  height: 110px;
  background: linear-gradient(135deg, rgba(239,138,125,.22), rgba(0,35,73,.10));
  background-size: cover;
  background-position: center;
}

.hotelExtraBody{
  padding: 10px 12px 12px;
  display:grid;
  gap: 6px;
}

.hotelExtraTop{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.hotelExtraTitle{
  font-weight: 900;
  font-size: 13px;
}
.hotelExtraPrice{
  font-weight: 900;
  font-size: 12px;
  opacity: .9;
  white-space: nowrap;
}

.hotelExtraDesc{
  font-size: 12px;
  font-weight: 700;
  opacity: .8;
  line-height: 1.35;
}

.hotelExtraTimes{
  font-size: 12px;
  font-weight: 800;
  opacity: .75;
}

/* Responsive */
@media (max-width: 1100px){
  .hotelPanelHero{ flex-direction: column; }
  .hotelHeroImg{ width: 100%; height: 210px; }
  .hotelExtrasGrid{ grid-template-columns: 1fr; }
}

/* ✅ Chat bleibt klickbar, obwohl alles gedimmt ist */
aside.side{
  z-index: 10000;   /* über Backdrop + Panel */
}

/* ✅ Scroll lock wenn Hotel-Info-Panel offen */
body.hotelPanelOpen{
  overflow: hidden;
  touch-action: none;
  height: 100vh;      /* iOS/Safari safe */
}


/* optional, aber gut: verhindert “Scroll chain” auf Touch */
.hotelPanelBody{
  overscroll-behavior: contain;
}

@media (max-width: 1100px){
  .hotelPanelHero{ flex-direction: column; }
  .hotelHeroImg{ width: 100%; height: 210px; }
  .hotelExtrasGrid{ grid-template-columns: 1fr; }
}

@media (max-width: 1020px){
  .layout{
    grid-template-columns: 60px 1fr;  /* timeline | main */
    gap: 16px;
  }
  .side{ display:none; }
}

@media (max-width: 1020px){
  .hotelPanel{
    left: 50%;
    transform: translateX(-50%);
    width: min(var(--panelMax), calc(100vw - 36px));
  }
}

@media (max-width: 1020px){
  .hotelPanel{
    left: auto;
    transform: none;

    /* immer gleicher Rand links/rechts */
    right: 18px;
    left: 18px;

    /* optional: max Breite behalten (wenn du willst) */
    max-width: 980px;
  }
}

/* ================================
   Luxury Hotel Info Card
   ================================ */

.hotelInfoCard{
  padding: 16px;
}

.hotelInfoTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}

.hotelInfoName{
  font-size:16px;
  font-weight:900;
  color: var(--primary);
  line-height:1.15;
}

.hotelInfoMeta{
  margin-top:4px;
  font-size:12px;
  font-weight:700;
}

.hotelInfoActions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.hotelTrustRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:10px 12px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:14px;
  background:#fafbfe;
  margin-bottom:12px;
}

.hotelRating{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.hotelStars{
  letter-spacing: .08em;
  font-size:12px;
  color: var(--accent);
}

.hotelScore{
  font-weight:900;
  color: var(--primary);
  background: rgba(0,35,73,.08);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
}

.hotelScoreTxt{
  font-size:12px;
  font-weight:700;
}

.hotelBadges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.hotelBadge{
  font-size:11px;
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(239,138,125,.14);
  color: var(--primary);
  border:1px solid rgba(239,138,125,.25);
}

.hotelInfoMain{
  display:flex;
  gap:14px;
  align-items:stretch;
  flex-wrap:wrap;
}

.hotelInfoMedia{
  width: 180px;
  flex: 0 0 auto;
}

.hotelInfoImg{
  width:100%;
  height: 150px;
  border-radius:16px;
  background: linear-gradient(135deg, rgba(0,35,73,.10), rgba(239,138,125,.18));
  border: 1px solid rgba(148,163,184,.22);
  background-size:cover;
  background-position:center;
}

.hotelImgCap{
  margin-top:8px;
  font-size:11px;
  font-weight:800;
  color:#334155;
  opacity:.85;
}

.hotelInfoBody{
  flex:1;
  min-width: 260px;
}

.hotelAbout{
  margin-bottom:12px;
}

.hotelAboutTitle{
  font-size:13px;
  font-weight:900;
  color: var(--accent);
  margin-bottom:6px;
}

.hotelAboutText{
  font-size:12px;
  font-weight:700;
  color:#334155;
  line-height:1.45;
}

.hotelKpiRow{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  margin: 10px 0 12px;
}

.hotelKpi{
  padding:10px 12px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(148,163,184,.18);
}

.hotelKpiSoft{
  background:#fafbfe;
}

.hotelKpiLbl{
  font-size:11px;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  opacity:.7;
}

.hotelKpiVal{
  margin-top:4px;
  font-size:14px;
  font-weight:900;
  color: var(--primary);
}

.hotelKpiSub{
  margin-top:2px;
  font-size:11px;
  font-weight:700;
}

.hotelHighlightsTitle{
  font-size:13px;
  font-weight:900;
  color: var(--primary);
  margin: 10px 0 8px;
}

.hotelInfoFeat{
  margin-bottom:12px;
}

.hotelQuote{
  position:relative;
  border-radius:16px;
  padding:12px 12px 12px 44px;
  background: linear-gradient(135deg, rgba(0,35,73,.06), rgba(239,138,125,.10));
  border:1px solid rgba(148,163,184,.18);
  margin-top:10px;
}

.hotelQuoteMark{
  position:absolute;
  left:14px;
  top:10px;
  font-size:28px;
  font-weight:900;
  color: rgba(0,35,73,.35);
  line-height:1;
}

.hotelQuoteText{
  font-size:12px;
  font-weight:800;
  color:#334155;
  line-height:1.45;
}

.hotelMsg{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  font-size:12px;
  font-weight:900;
  line-height:1.35;
}

.hotelMsgHard{
  background: rgba(185,28,28,.06);
  border:1px solid rgba(185,28,28,.18);
  color:#b91c1c;
}

.hotelMsgSoft{
  background: rgba(2,132,199,.06);
  border:1px solid rgba(2,132,199,.16);
  color:#0f172a;
}

@media (max-width: 560px){
  .hotelInfoMedia{ width: 100%; }
  .hotelInfoImg{ height: 190px; }
  .hotelKpiRow{ grid-template-columns: 1fr; }
}

/* ================================
   Hotel Info Card (Compact)
   ================================ */

.hotelInfoCardCompact{
  padding: 16px;
}

.hotelInfoTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}

.hotelInfoName{
  font-size:16px;
  font-weight:900;
  color: var(--primary);
  line-height:1.15;
}

.hotelInfoMeta{
  margin-top:4px;
  font-size:12px;
  font-weight:700;
  opacity:.9;
}

.hotelInfoActions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Main layout */
.hotelInfoCompactMain{
  display:flex;
  gap:14px;
  align-items:stretch;
  flex-wrap:wrap;
}

.hotelInfoCompactMedia{
  width: 150px;
  flex: 0 0 auto;
}

.hotelInfoImgCompact{
  height: 108px;
  border-radius:16px;
  background: linear-gradient(135deg, rgba(0,35,73,.10), rgba(239,138,125,.18));
  border: 1px solid rgba(148,163,184,.22);
  background-size:cover;
  background-position:center;
}

.hotelInfoCompactBody{
  flex:1;
  min-width: 260px;
}

/* Rating + KPIs in one row */
.hotelInfoCompactRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.hotelRatingCompact{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:12px;
  font-weight:800;
}

.hotelStars{
  letter-spacing:.08em;
  font-size:12px;
  color: var(--accent);
}

.hotelScoreCompact{
  font-weight:900;
  color: var(--primary);
  background: rgba(0,35,73,.08);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
}

/* Mini KPIs */
.hotelQuickKpis{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.hotelMiniKpi{
  padding:8px 10px;
  border-radius:14px;
  background:#fafbfe;
  border:1px solid rgba(148,163,184,.18);
  min-width: 110px;
}

.hotelMiniLbl{
  font-size:11px;
  font-weight:900;
  opacity:.7;
  text-transform:uppercase;
  letter-spacing:.02em;
}

.hotelMiniVal{
  margin-top:4px;
  font-size:13px;
  font-weight:900;
  color: var(--primary);
}

/* About strip */
.hotelAboutCompact{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin: 8px 0 10px;
}

.hotelAboutPill{
  font-size:11px;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(239,138,125,.14);
  color: var(--primary);
  border:1px solid rgba(239,138,125,.25);
  white-space:nowrap;
}

.hotelAboutText{
  font-size:12px;
  font-weight:800;
  color:#334155;
  line-height:1.45;
}

/* Highlights */
.hotelInfoFeatCompact{
  margin-top: 8px;
}

/* Messages */
.hotelMsg{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  font-size:12px;
  font-weight:900;
  line-height:1.35;
}

.hotelMsgHard{
  background: rgba(185,28,28,.06);
  border:1px solid rgba(185,28,28,.18);
  color:#b91c1c;
}

.hotelMsgSoft{
  background: rgba(2,132,199,.06);
  border:1px solid rgba(2,132,199,.16);
  color:#0f172a;
}

/* Small screens */
@media (max-width: 560px){
  .hotelInfoCompactMedia{ width: 100%; }
  .hotelInfoImgCompact{ height: 190px; }
  .hotelMiniKpi{ min-width: 140px; }
}

/* ================================
   Hotel Info Card (Compact) – Step 3: ruhiger + luftiger
   ================================ */

.hotelInfoCardCompact{
  padding: 18px;
}

/* mehr Abstand oben/unten, wirkt weniger gequetscht */
.hotelInfoTop{
  margin-bottom: 14px;
}

/* Typo größer / premium */
.hotelInfoName{
  font-size: 18px;
  line-height: 1.15;
}

.hotelInfoMeta{
  font-size: 13px;
  margin-top: 6px;
}

/* Main: mehr Abstand und “ruhigerer” Block */
.hotelInfoCompactMain{
  gap: 16px;
}

/* ✅ Bild: breiter + höher */
.hotelInfoCompactMedia{
  width: 220px;        /* vorher 150 */
  flex: 0 0 auto;
}

.hotelInfoImgCompact{
  height: 140px;       /* vorher 108 */
  border-radius: 18px;
}

/* Body etwas “luftiger” */
.hotelInfoCompactBody{
  min-width: 320px;    /* vorher 260 */
}

/* Zeile: mehr Abstand */
.hotelInfoCompactRow{
  gap: 16px;
  margin-bottom: 12px;
}

/* Rating etwas größer aber clean */
.hotelRatingCompact{
  font-size: 13px;     /* vorher 12 */
  gap: 10px;
}

.hotelScoreCompact{
  padding: 7px 11px;
  font-size: 13px;
}

/* ✅ Minimal: KPIs weniger “boxy” (aber größer lesbar) */
.hotelMiniKpi{
  padding: 0;                 /* vorher 8px 10px */
  background: transparent;    /* vorher #fafbfe */
  border: 0;                  /* vorher border */
  min-width: auto;
}

.hotelMiniLbl{
  font-size: 11px;
}

.hotelMiniVal{
  font-size: 14px;      /* vorher 13 */
  margin-top: 3px;
}

/* About: mehr Luft, ruhiger */
.hotelAboutCompact{
  margin: 10px 0 12px;
  gap: 10px;
}

.hotelAboutText{
  font-size: 13px;      /* vorher 12 */
  line-height: 1.5;
}

/* Highlights: etwas größer/luftiger */
.hotelInfoFeatCompact{
  margin-top: 10px;
}

.hotelInfoFeatCompact.feat{
  gap: 10px;            /* default 8 */
  font-size: 13px;      /* vorher 12 */
}

/* Mobile: Bild nicht zu klein */
@media (max-width: 560px){
  .hotelInfoCompactMedia{
    width: 100%;
  }
  .hotelInfoImgCompact{
    height: 210px;      /* vorher 190 */
  }
  .hotelInfoCompactBody{
    min-width: 0;
  }
}

/* ================================
   HOTEL INFO CARD – PREMIUM CLEAN
   ================================ */

.hotelInfoCardLuxury{
  padding: 18px;
}

/* Header */
.hotelInfoHeaderLuxury{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}

.hotelInfoNameLuxury{
  font-size:32px;
  font-weight:600;
  color:#002349;
}

.hotelInfoMetaLuxury{
  margin-top:6px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:500;
  color:#64748b;
  flex-wrap:wrap;
}

/* ⭐ Inline Rating – CLEAN */
.hotelInfoRatingInline{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:4px;
}
.insp-label strong {
  font-weight: 500 !important;
}
.hotelStarsInline{
  font-size:12px;
  letter-spacing:1px;
  color:#ef8a7d;
}

.hotelScoreInline{
  font-size:13px;
  font-weight:800;
  color:#002349;
}

/* Layout */
.hotelInfoGridLuxury{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:30px;
}

/* Image */
.hotelInfoImageLuxury{
  height:300px;
  border-radius:18px;
  background-size:cover;
  background-position:center;
  border:1px solid #eef0f5;
  background-color:#f3f6ff;
}

/* Story */
.hotelInfoStoryLuxury{
  margin-bottom:18px;
}

.hotelInfoStoryEyebrowLuxury{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
  color:#94a3b8;
}

.hotelInfoStoryTextLuxury{
  margin-top:8px;
  font-size:15px;
  line-height:1.6;
  font-weight:500;
  color:#334155;
  max-width:70ch;
}

/* KPIs */
.hotelInfoKpisLuxury{
  display:flex;
  gap:18px;
  padding:14px 0;
  border-top:1px solid #eef0f5;
  border-bottom:1px solid #eef0f5;
  margin-bottom:16px;
}

.hotelInfoKpiLuxury{
  min-width:120px;
}

.hotelInfoKpiLblLuxury{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  color:#94a3b8;
}

.hotelInfoKpiValLuxury{
  font-size:18px;
  font-weight:900;
  color:#0b1020;
}

.hotelInfoKpiSubLuxury{
  font-size:11px;
  color:#64748b;
  font-weight:600;
}

.hotelInfoKpiDividerLuxury{
  width:1px;
  background:#eef0f5;
}

/* Features */
.hotelInfoFeaturesLuxury{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px 18px;
}

.hotelInfoFeatureLuxury{
  font-size:13px;
  font-weight:600;
  color:#0b1020;
  position:relative;
  padding-left:14px;
}

.hotelInfoFeatureLuxury::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#cbd5e1;
}

/* Responsive */
@media (max-width: 980px){
  .hotelInfoGridLuxury{
    grid-template-columns:1fr;
  }
  .hotelInfoImageLuxury{
    height:230px;
  }
  .hotelInfoFeaturesLuxury{
    grid-template-columns:1fr;
  }
}

/* ---------------------------------------
   Premium CTA Hover / Focus
--------------------------------------- */

.btnAdd {
  transition:
    transform 180ms cubic-bezier(.22,.61,.36,1),
    box-shadow 180ms cubic-bezier(.22,.61,.36,1),
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
  will-change: transform, box-shadow;
}

/* Hover */
.btnAdd:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    0 6px 16px rgba(0, 35, 73, 0.18),
    0 2px 4px rgba(0, 35, 73, 0.12);
}

/* Active / Click */
.btnAdd:active:not(:disabled) {
  transform: translateY(0);
  box-shadow:
    0 3px 8px rgba(0, 35, 73, 0.20);
}

/* Disabled bleibt ruhig */
.btnAdd:disabled {
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ---------------------------------------
   Optional: Mini-CTA in Hotel-Kachel
--------------------------------------- */
.hMini .btnAdd {
  padding: 6px 14px;
}

/* Extra feiner Hover speziell in Cards */
.hMini .btnAdd:hover:not(:disabled) {
  box-shadow:
    0 4px 10px rgba(0, 35, 73, 0.16);
}

/* Preview: nur Rahmen (nicht festgelegt) */
.hMini.preview {
  background: transparent !important;
  color: inherit !important;
  box-shadow: none;
  outline: 2px solid rgba(0, 35, 73, 0.35);
  outline-offset: 2px;
}

/* Optional: etwas stärker bei Hover */
.hMini.preview:hover {
  outline-color: rgba(0, 35, 73, 0.55);
}



/* ============================
   HOTEL PANEL – CONTENT ONLY
   (No backdrop / no overlay changes)
   ============================ */

.hotelPanel{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(231,234,240,.95);
  box-shadow: 0 24px 70px rgba(2,6,23,.18);
}

/* Head */
.hotelPanel .hotelPanelHead{
  padding: 14px 16px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;

  background: linear-gradient(180deg, rgba(0,35,73,.06), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(231,234,240,.95);
}

.hotelPanel .hotelPanelHead b{
  font-size: 18px;
  font-weight: 600;
  color: #002349;
  letter-spacing: .2px;
}

.hotelPanel .hotelPanelSub{
  margin-top:4px;
  font-size:12px;
  font-weight:800;
  color:#64748b;
}

.hotelPanel .hotelPanelClose{
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  font-size: 20px;
  color: #aab0bb;
  cursor: pointer;
  line-height: 1;
  border: 1px solid #ccc;
  padding: 6px 8px;
  transition: color .15s;
}
.hotelPanel .hotelPanelClose:hover{ color: #555; }
.hotelPanel .hotelPanelClose:active{ transform: translateY(1px); }

/* Body */
.hotelPanel .hotelPanelBody{
  padding: 0;
}

/* Sections */
.hotelPanel .hotelPanelSection{
  padding: 12px 16px 16px;
}

.hotelPanel .secTitle{
  margin: 8px 0 10px;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:#002349;
}

/* Highlights as pills */
.hotelPanel .hotelBullets{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.hotelPanel .hotelBullets li{
  padding: 10px 12px;
  border-radius: 999px;
  border:1px solid rgba(231,234,240,.95);
  background:#fff;
  box-shadow: 0 10px 22px rgba(2,6,23,.05);
  font-size:12px;
  font-weight:850;
  color:#0b1020;
}

/* Extras grid */
.hotelPanel .hotelExtrasGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 860px){
  .hotelPanel .hotelExtrasGrid{ grid-template-columns: 1fr; }
}

/* Extra card */
.hotelPanel .hotelExtraCard{
  border-radius: 16px;
  border:1px solid rgba(231,234,240,.95);
  background:#fff;
  overflow:hidden;
  box-shadow: 0 14px 34px rgba(2,6,23,.06);
  transition: transform .12s ease;
}
.hotelPanel .hotelExtraCard:hover{ transform: translateY(-2px); }

.hotelPanel .hotelExtraImg{
  height: 120px;
  background: linear-gradient(135deg, rgba(239,138,125,.25), rgba(0,35,73,.10));
  background-size: cover;
  background-position: center;
}

.hotelPanel .hotelExtraBody{
  padding: 12px;
}

.hotelPanel .hotelExtraTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}

.hotelPanel .hotelExtraTitle{
  font-size: 13px;
  font-weight: 950;
  color:#002349;
  line-height: 1.2;
}

.hotelPanel .hotelExtraPrice{
  font-size: 12px;
  font-weight: 950;
  color:#ef8a7d;
  white-space:nowrap;
}

.hotelPanel .hotelExtraDesc{
  font-size: 12px;
  font-weight: 700;
  color:#475569;
  line-height: 1.45;
}

.hotelPanel .hotelExtraTimes{
  margin-top: 8px;
  font-size: 12px;
  font-weight: 900;
  color:#0b1020;
  opacity:.75;
}

/* Rating in der Subline */
.hotelPanel .hpLoc{ color: #b7b7b7;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 19px;
}
.hotelPanel .hpSep{ margin: 0 6px; color:#cbd5e1; font-weight:900; }
.hotelPanel .hpRating{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:900;
  color:#0b1020;
}

.hotelPanel .hpStars{
  font-size: 12px;
  letter-spacing: 1px;
  color: #ef8a7d;
}

.hotelPanel .hpScore{
  font-size: 12px;
  color:#002349;
}

.hotelPanel .hpReviews{
  font-size: 12px;
  font-weight:900;
  color:#64748b;
  opacity:.9;
}

/* ============================
   HERO / INFO ROW (new layout)
   ============================ */

.hotelInfoRow{
  display:grid;
  grid-template-columns: 1.2fr 1fr; /* Bild etwas größer */
  gap:24px;
  align-items:stretch;
  padding:20px;
}

.hotelInfoImageWrap{
  border-radius:18px;
  overflow:hidden;
  min-height:360px; /* ✅ etwas größer */
  border: 1px solid rgba(231,234,240,.95);
  background:#eef2f7;
}

.hotelInfoImage{
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
}

/* Text block */
.hotelInfoText{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:16px;
}

.hotelInfoIntro{
  font-size:14px;
  line-height:1.6;
  color:#334155;
  font-weight:500;
}

/* Slogan */
.hotelSlogan{
  font-size: 22px;
  font-weight: 700;
  color: #002349;
  margin-bottom: 14px;
  line-height: 1.25;
}

.hotelDescription{
  margin:0;
}


/* FACT CARDS */
.hotelFacts{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}

.hotelFact{
  display:flex;
  align-items:center;
  gap:12px;

  padding:14px 14px;
  border-radius:16px;
  background:#fff;

  border:1px solid rgba(231,234,240,.95);
  box-shadow: 0 10px 26px rgba(2,6,23,.08);

  font-size:14px;
  font-weight:500;
  color:#002349;
}

.hotelFact i{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239,138,125,.14);
  color: #ef8a7d;
  font-size: 12px;
}

/* Letzte Card volle Breite (wenn ungerade Anzahl) */
.hotelFact:last-child{
  grid-column: 1 / -1;
}

/* Mobile */
@media (max-width: 520px){
  .hotelFacts{
    grid-template-columns:1fr;
  }
}


/* Mobile */
@media (max-width: 900px){
  .hotelInfoRow{
    grid-template-columns:1fr;
  }

  .hotelInfoImageWrap{
    min-height:240px;
  }
}

.singleHotelMode .singleHeroTopBlock{
  background: linear-gradient(135deg, rgba(0,35,73,.06), rgba(239,138,125,.10));
  border: 1px solid #e8ebf3;
  border-radius: 18px;
  padding: 16px;
}

.singleHotelMode .singleHeroRow{
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.singleHotelMode .singleEyebrow{
  font-size:13px;
  font-weight:700;
  opacity:.75;
}

.singleHotelMode .singleTitle{
  margin:6px 0 0;
  font-size:28px;
  font-weight:700;
}

.singleHotelMode .singleSub{
  margin-top:6px;
  font-size:13px;
  font-weight:600;
  opacity:.85;
}

.singleHotelMode .singleKPIs{
  display:flex;
  gap:12px;
  align-items:flex-end;
}

.singleHotelMode .singleKpi{
  background:#fff;
  border:1px solid #e8ebf3;
  border-radius:14px;
  padding:10px 12px;
  min-width:140px;
}

.singleHotelMode .singleKpi .kLbl{
  font-size:11px;
  font-weight:900;
  opacity:.7;
}

.singleHotelMode .singleKpi .kVal{
  font-size:16px;
  font-weight:900;
  margin-top:4px;
}

.singleHotelMode .singleKpi .kSub{
  font-size:11px;
  font-weight:800;
  opacity:.65;
}

/* ============================================================
   REISEPLANER-BAWH PAGE STYLES
   ============================================================ */
/* ============================================================
   BAWH PAGE – ONLY WHAT'S NEEDED FOR SINGLE HOTEL MODE
   ============================================================ */

/* NAV BUTTON */
.navRight .navBtn:hover{ background-color:#002349; }
.navRight .navBtn:active{ transform:translateY(1px); }
.navRight .navBtn .arrow{ display:inline-block; margin-left:6px; transition:transform .35s ease; }
.navRight .navBtn:hover .arrow{ transform:translateX(6px); }

/* ── FILTER BAR ── */
.rpFilterBar{
  position:fixed; top:100px; left:0; right:0;
  z-index:9998; padding:0 28px;
}
.rpFilterChip{
  display:inline-flex; align-items:center; gap:8px; padding:12px 18px;
  font-weight: 300; font-size: 18px; line-height: 18px; color:#002349; background:#fff;
  cursor:pointer; white-space:nowrap;
  position:relative; user-select:none;
  transition: border-color .15s, background .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  border: 1px solid #DDDDDF;
  border-radius: 4px;
}
.rpFilterChip:hover{ border-color:#002349; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.rpFilterChip i{ font-size:14px; color:#002349;; }
.rpFilterChip .rpFilterVal{ color:#002349;; }

/* Filter Popover */
.rpFilterPopover{
  display:none; position:fixed;
  min-width:160px; background:#fff; border:1px solid #e7eaf0;
  box-shadow:0 16px 48px rgba(15,23,42,.14);
  padding:20px; z-index:10000; cursor:default;
}
.rpFilterPopover.open{ display:block; }
.rpFilterPopLabel{ color: #002349; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; font-family: 'Barlow Condensed';
  font-style: normal; font-weight: 500; font-size: 18px; line-height: 24px;
}
.rpFilterPopRow{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:8px 0;
}
.rpFilterPopRow + .rpFilterPopRow{ border-top:1px solid #f0f0f0; }
.rpFilterPopRow label{ font-size:14px; font-weight:500; color:#0b1020; }

/* Stepper */
.rpStepper{ display:inline-flex; align-items:center; gap:6px; }
.rpStepBtn{
  width:28px; height:28px; border-radius:999px; border:1px solid #e0e0e0;
  background:#fff; font-weight:900; font-size:16px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; color:#002349;
  transition: box-shadow .15s, border-color .15s; user-select:none; line-height:1;
}
.rpStepBtn:hover{ border-color:#ef8a7d; box-shadow:0 4px 12px rgba(0,0,0,.08); }
.rpStepBtn:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; }
.rpStepVal{ min-width:28px; text-align:center; font-size:15px; font-weight:700; color:#002349; }

/* Date inputs */
.rpDateInput{
  width:100%; padding:10px 12px; border:1px solid #e0e0e0; border-radius:10px;
  font:inherit; font-size:14px; outline:none; color:#002349; cursor:pointer;
  transition: border-color .15s;
}
.rpDateInput:focus{ border-color:#ef8a7d; }

/* Switch */
.rpSwitch{ display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.rpSwitchTrack{
  width:38px; height:20px; border-radius:999px; background:#d8d8d8;
  position:relative; transition: background .2s; flex-shrink:0;
}
.rpSwitchTrack::after{
  content:""; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:999px; background:#fff; transition: transform .2s;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
}
.rpSwitch.on .rpSwitchTrack{ background:#002349; }
.rpSwitch.on .rpSwitchTrack::after{ transform:translateX(18px); }

/* Tag filter */
.rpFilterTag{
  display:inline-flex; align-items:center; gap:6px; padding:12px 18px;
  font-size:18px; font-weight:300; color:#002349; cursor:pointer;
  transition: border-color .15s; background: #DDDDDF; border-radius: 4px;
}
.rpFilterTag:hover{ border-color:#002349; }
.rpFilterTag.active{ border-color:#ef8a7d; background:rgba(239,138,125,.08); }
.rpTagPopover{
  display:none; position:fixed;
  min-width:180px; background:#fff; border:1px solid #e7eaf0;
  border-radius:14px; box-shadow:0 16px 48px rgba(15,23,42,.14);
  padding:10px 6px; z-index:10000;
}
.rpTagPopover.open{ display:block; }
.rpTagOption{
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  border-radius:10px; font-size:18px; font-weight:300; color:#002349;
  cursor:pointer; transition: background .12s;
}
.rpTagOption:hover{ background:#f7f8fb; }
.rpTagOption.selected{ background:rgba(239,138,125,.10); color:#ef8a7d; font-weight:700; }

/* Calendar dropdown styles (1:1 from reiseplaner-wellness.php) */
.rpKalDropdown .calWrap{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.rpKalDropdown .month{ padding:4px; }
.rpKalDropdown .monthHead{
  display:flex; align-items:center; justify-content:space-between;
  color:#002349; margin-bottom:10px; padding:0 2px; font-family: 'Barlow Condensed';
  font-style: normal; font-weight: 500; font-size: 22px; line-height: 24px; 
}
.rpKalDropdown .monthNav{
  width:30px; height:30px; border-radius:6px; border:1px solid #d0d4da;
  background:#fff; cursor:pointer; font-size:16px; display:grid; place-items:center; color:#002349;
}
.rpKalDropdown .monthNav:hover{ background:#f0f2f5; }
.rpKalDropdown .monthNav:disabled{ opacity:.3; cursor:default; }
.rpKalDropdown .dow{
  display:grid; grid-template-columns:repeat(7,1fr); gap:3px;
  color:#999; font-size:11px; font-weight:600; text-align:center; padding:4px 0;
}
.rpKalDropdown .grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.rpKalDropdown .day{
  height:36px; border-radius:6px; border:1px solid transparent;
  background:#fff; cursor:pointer; font-size:13px; font-weight:500;
}
.rpKalDropdown .day:hover{ background:#f0f2f5; }
.rpKalDropdown .day.muted{ color:#ccc; cursor:default; }
.rpKalDropdown .day.muted:hover{ background:#fff; }
.rpKalDropdown .day.disabled{ color:#ccc; }
.rpKalDropdown .day.start,
.rpKalDropdown .day.end{ background:#002349 !important; color:#fff !important; border-color:#002349; font-weight:700; }
.rpKalDropdown .day.inRange{ background:rgba(0,35,73,.08); border-radius:0; }
.rpKalDropdown .day.preview{ background:rgba(0,35,73,.06); }
.rpKalDropdown .day.previewEnd{ background:#002349; color:#fff; border-color:#002349; }
.rpKalDropdown .kalFooter{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:14px; padding-top:12px; border-top:1px solid #eee; gap:10px; flex-wrap:wrap;
}
.rpKalDropdown .kalQuickBtns{ display:flex; gap:6px; flex-wrap:wrap; }
.rpKalDropdown .kqBtn{
  padding:6px 12px; border-radius:20px; border:1px solid #d0d4da; background:#fff;
  font-size:12px; font-weight:500; color:#002349; cursor:pointer; font-family:inherit;
}
.rpKalDropdown .kqBtn:hover{ background:#f0f2f5; border-color:#002349; }
.rpKalDropdown .kqBtn.active{ background:#002349; color:#fff; border-color:#002349; }
.rpKalDropdown .kalConfirmBtn{
  background:#002349; color:#fff; border:none; border-radius:6px; padding:9px 20px;
  font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap;
}
.rpKalDropdown .kalConfirmBtn:hover{ background:#003575; }
.rpKalDropdown .kalTabs{
  display:flex; gap:0; background:#f0f2f5; border-radius:6px; padding:3px; margin-bottom:14px;
}
.rpKalDropdown .kalTab{
  flex:1; padding:7px 16px; border:none; border-radius:4px; background:transparent;
  font-size:13px; font-weight:500; color:#64748b; cursor:pointer; font-family:inherit;
}
.rpKalDropdown .kalTab.active{ background:#002349; color:#fff; font-weight:600; }
.rpKalDropdown .flexSection{ margin-bottom:16px; }
.rpKalDropdown .flexQ{ font-size:14px; font-weight:600; color:#0b1020; text-align:center; margin-bottom:4px; }
.rpKalDropdown .flexSub{ font-size:12px; color:#888; text-align:center; margin-bottom:12px; }
.rpKalDropdown .flexDayBtns{ display:flex; gap:8px; justify-content:center; }
.rpKalDropdown .flexDayBtn{
  padding:8px 18px; border:1px solid #d0d4da; background:#fff;
  font-size:13px; font-weight:500; color:#002349; cursor:pointer; font-family:inherit;
}
.rpKalDropdown .flexDayBtn:hover{ background:#f0f2f5; }
.rpKalDropdown .flexDayBtn.active{ background:#002349; color:#fff; border-color:#002349; }
.rpKalDropdown .flexMonthsWrap{ display:flex; align-items:center; gap:8px; }
.rpKalDropdown .flexMonthNav{
  width:30px; height:30px; border-radius:6px; flex-shrink:0;
  border:1px solid #d0d4da; background:#fff; cursor:pointer; font-size:18px;
  display:grid; place-items:center; color:#002349;
}
.rpKalDropdown .flexMonthNav:hover{ background:#f0f2f5; }
.rpKalDropdown .flexMonthNav:disabled{ opacity:.3; cursor:default; }
.rpKalDropdown .flexMonthScroll{ display:flex; gap:8px; overflow:hidden; flex:1; }
.rpKalDropdown .flexMonthChip{
  flex:0 0 calc((100% - 32px)/5); text-align:center; border-radius:8px;
  border:1.5px solid #d0d4da; background:#fff; padding:10px 4px; cursor:pointer; font-family:inherit;
}
.rpKalDropdown .flexMonthChip:hover{ border-color:#002349; }
.rpKalDropdown .flexMonthChip.selected{ background:#002349; color:#fff; border-color:#002349; }
.rpKalDropdown .flexMonthChip .fmYear{ font-size:10px; color:#888; margin-bottom:2px; }
.rpKalDropdown .flexMonthChip.selected .fmYear{ color:rgba(255,255,255,.7); }
.rpKalDropdown .flexMonthChip .fmName{ font-size:13px; font-weight:600; color:#002349; }
.rpKalDropdown .flexMonthChip.selected .fmName{ color:#fff; }

/* ── PAGE WRAPPER ── */
.rpWrap{
  transition: padding-right .3s ease;
}

/* ── LAYOUT: default = full width, chat-open = main + sidebar ── */
.rpLayout{
  display:grid;
  grid-template-columns: 1fr;
  gap:4px;
  align-items:start;
  transition: grid-template-columns .3s ease;
}
.rpLayout.chatOpen{
  grid-template-columns: 1fr 480px;
}

/* ── HERO ── */
.rpHero{ margin:0 0 0px; }
.rpHero h1{
  font-size:48px; font-weight:400; color:#002349; line-height:1.15; margin:0 0 10px;
  font-family: Barlow Condensed, sans-serif;
}
.rpHero h1 strong{ font-weight:600;  }
.rpHero p{
  font-size:24px; color:#999; margin:0 0 80px;
  font-family: Barlow Condensed, sans-serif;
}
.rpResultCount{ 
  color: #002349;
  margin-top: 40px;
  font-style: normal;
  font-weight: 300;
  font-size: 20px;
  line-height: 17px;
  padding-bottom: 20px
}

/* ── HERO ROW (hero text + anni widget) ── */
.rpHeroRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:28px;
  padding: 40px 0px 20px 0px;
}
.rpHeroLeft{ flex:1; min-width:0; }

/* ── ANNI TEASER (oben rechts, immer sichtbar bis chat offen) ── */
.rpAnniTeaser{
  background: #e6e9ed;
  border: 1px solid #e2e6ee;
  box-shadow: 0 4px 24px rgba(15,23,42,.10);
  padding: 10px 20px 18px;
  position: fixed;
  min-width: 280px;
  max-width: 440px;
  flex-shrink: 0;
  right: max(16px, calc((100vw - 1480px) / 2));
  width: 440px;
  z-index: 9999;
  padding-top: 20px;
}
.rpAnniTeaser{
  transition: opacity .3s ease;
}
.rpAnniTeaser.hiding{
  opacity: 0;
  pointer-events: none;
}
.rpAnniTeaser.hidden{ display:none; }

/* ── FLOATING ANNI AVATAR ── */
/* Wird per JS als fliegendes Clone-Element animiert */
.rpAnniFloatFixed{
  position: fixed;
  z-index: 99999; /* über Modal-Backdrop (10000) und Chat (10001) */
  border-radius: 999px;
  cursor: pointer;
  background: url("assets/avatar.png") center/cover no-repeat, #dde3ed;
  border: 3px solid #fff;
  box-shadow: 0 4px 18px rgba(0,35,73,.18);
  /* Puls-Ring via ::after */
  overflow: visible;
}
.rpAnniFloatFixed::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  border:2px solid rgba(11,31,58,.30);
  animation: anniPulse 2.2s ease-out infinite;
  pointer-events:none;
}
@keyframes anniPulse{
  0%  { opacity:.7; transform:scale(1); }
  70% { opacity:0;  transform:scale(1.4); }
  100%{ opacity:0;  transform:scale(1.4); }
}
.rpAnniFloatFixed:hover{
  transform: scale(1.08) !important;
  box-shadow: 0 8px 28px rgba(0,35,73,.28);
}

.rpAnniClose{
  position:absolute; top:12px; right:14px;
  background:none; font-size:20px; color:#aab0bb;
  cursor:pointer; line-height:1; border: 1px solid #ccc; padding: 6px 8px;
  transition: color .15s;
}
.rpAnniClose:hover{ color:#555; }

.rpAnniTop{
  display:flex; align-items:flex-start; gap:14px; margin-bottom:12px;
}
.rpAnniAvatarrrre{
  width: 90px;
  height: 90px;
  border-radius: 999px;
  background: url("assets/avatar.png") center/cover no-repeat, #dde3ed;
  flex-shrink: 0;
  border: 2px solid #fff;
  position: relative;
  margin-top: -50px;
  margin-left: -54px;
}
.rpAnniAvatar{
  width: 160px;
  height: 110px;
  background: url("assets/avatar.png") center/cover no-repeat, #dde3ed00;
  flex-shrink: 0;
  margin-top: -50px;
  margin-left: -80px;
}
.rpAnniTitle{
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  font-size: 22px;
  padding-right:18px;
  color: #002349;
}
.rpAnniTitle strong{
  font-weight:500; display:block; margin-top:1px;
}
.rpAnniTitle span{
  color: #373e48;
  display: block;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  font-size: 20px;
  margin-top: 24px;
  line-height: 1.4;
  margin-left: -92px;
  margin-bottom: 16px;
}
.rpAnniBtn{
  font-family: 'Barlow Condensed'; font-style: normal;
  font-weight: 300; font-size: 18px; line-height: 18px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; background:#002349; border:none; color:#fff;
  padding:13px 16px; cursor:pointer; text-align:center;
  transition: background .2s; letter-spacing:.01em;
}
.rpAnniBtn:hover{ background:#1a3a5c; }
.rpAnniBtn .anniBtnArrow{ font-size:16px; font-weight:400; margin-left:2px; }

/* ── HOTEL GRID ── */
.rpHotelGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin-bottom:28px;
}
/* When chat is open: 3 per row */
.rpLayout.chatOpen .rpHotelGrid{
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:1400px){ .rpHotelGrid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:980px) { .rpHotelGrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px) { .rpHotelGrid{ grid-template-columns:1fr; } }

/* ── Single-Grid: Bereichs-Label über der 1. Karte je Bereich ── */
/* Jede Karte sitzt in einer Zelle mit fix hohem Label-Streifen (leer außer */
/* über der ersten Karte je Bereich) → alle Karten einer Reihe oben bündig.  */
.rpGridCell{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.rpGridCell > .rpCard{
  flex:1 1 auto;        /* Karte füllt die Zelle → gleiche Höhe pro Reihe */
}
.rpCardSectionLabel{
  height:32px;          /* fix → garantiert Ausrichtung aller Karten */
  margin-bottom:10px;
  display:flex;
  align-items:flex-end;
}
/* Header im Streifen: eigenständige Außenabstände zurücksetzen */
.rpCardSectionLabel .rpSectionHeader{
  margin:0;
  padding:0 2px;
}
/* 1 Spalte (Mobile): Ausrichtung über Spalten irrelevant → leere Streifen  */
/* einklappen, damit keine Lücken über jeder Karte entstehen.               */
@media (max-width:540px){
  .rpCardSectionLabel:empty{ height:0; margin:0; }
}

/* ── HOTEL CARD ── */
.rpCard{
  overflow:hidden;
  background:#fff;
  padding: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
  transition: transform .18s ease, box-shadow .18s ease;
  cursor:pointer;
  /* Bündige Unterkante (Kundenwunsch): Karte als Flex-Spalte, damit die
     Preis-Zeile unten andocken kann — unabhängig davon, ob der Hotelname
     ein- oder zweizeilig ist (Grid streckt die Karten auf gleiche Höhe). */
  display:flex; flex-direction:column;
}
.rpCard:hover{
  transform:translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
}

/* ── FILTER MISMATCH (ausgegraut) ── */
.rpCard.rpCardDimmed{
  opacity:.45;
  filter:grayscale(.5);
  cursor:default;
}
.rpCard.rpCardDimmed:hover{
  transform:none;
  box-shadow:0 2px 12px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
}
/* Zentriertes Badge über dem Bild */
.rpCardMismatchBadge{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,.72);
  color:#fff;
  border-radius:10px;
  padding:12px 16px;
  font-size:13px;
  font-weight:700;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  z-index:5;
  width:80%;
  backdrop-filter:blur(4px);
  pointer-events:none;
}
.rpCardMismatchBadge i{ font-size:20px; color:#ef8a7d; }
.rpCardMismatchLink{
  background:#ef8a7d;
  color:#fff;
  border-radius:6px;
  padding:6px 14px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  pointer-events:auto;
  display:inline-block;
  margin-top:2px;
}
.rpCardMismatchLink:hover{ background:#e0705f; }

/* Card Image Carousel */
.rpCardImgWrap{
  position:relative;
  height:300px;
  overflow:hidden;
  background:#dde0e6;
}
.rpCardImgSlider{ display:flex; height:100%; transition:transform .35s ease; }
.rpCardImgSlide{ min-width:100%; height:100%; background-size:cover; background-position:center; background-repeat:no-repeat; }
.rpCardArrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:36px; font-weight:300; color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.4);
  z-index:2; opacity:1; line-height:1;
  transition:background .15s, transform .15s;
}
.rpCardArrow.left{ left:8px; }
.rpCardArrow.right{ right:8px; }
.rpCardArrow:hover{ color:#fff; transform:translateY(-50%) scale(1.08); }

/* Hotel-Logo oben mittig im Bild */
.rpCardHotelLogo{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  z-index:3; max-width:60px; max-height:80px;
  object-fit:contain;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.45));
  pointer-events:none;
}
.rpCardDots{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  display:flex; gap:5px; z-index:2;
}
.rpCardDot{ width:5px; height:5px; border-radius:999px; background:rgba(255,255,255,.55); transition: background .2s; cursor:pointer; }
.rpCardDot.active{ background:#fff; width:14px; border-radius:999px; }

/* Card Body */
.rpCardBody{ padding:18px 18px 18px; text-align:center;
  /* füllt die Resthöhe der Karte, damit margin-top:auto der Preis-Zeile greift */
  display:flex; flex-direction:column; flex:1; }
.rpCardName{
  color: #002349;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
}
.rpCardStars{
  display:flex; align-items:center; justify-content:center;
  gap:2px; margin:0 0 5px;
}
.rpCardStars .stars{ color:#adacad; font-size:18px; letter-spacing:1px; }
/* Stern-Icon (Kundenwunsch): icomoon-Glyph \e925 statt Text-★ —
   erbt Größe/Farbe vom umgebenden Container; leere Sterne heller. */
.rpStarIco{
  font-family:'icomoon' !important;
  font-style:normal; font-weight:normal; font-variant:normal;
  text-transform:none; line-height:1; display:inline-block;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; margin-left: 3px;
}
.rpStarIco::before{ content:"\e925"; }
.rpStarIco.rpStarIcoEmpty{ color:#d9dce1; }
.rpCardStars {
  font-size: 14px;
  color: #adacad;
  font-weight: 700;
  margin-left: 4px;
  letter-spacing: .02em;
  padding-top: 4px;
}
.starLabel{ 
  font-size: 17px;
}
.rpCardLoc{
  color: #adacad;
  margin: 0 0 16px;
  letter-spacing: .01em;
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 19px;
}
.rpCardPriceRow{
  display:flex; align-items:center;
  justify-content:space-between; gap:8px;
  border-top:1px solid #eef0f3; padding-top:14px;
  margin-top:auto; /* dockt unten an → Preis + Button über alle Kacheln bündig */
}
.rpCardPriceBlock{ text-align:left; }
.rpCardPrice{
  font-size:24px; font-weight:400; color:#002349; line-height:1;
  letter-spacing:-.3px;
}
.rpCardPriceAb{
  font-size:22px; color:#aab0bb; font-weight:300; letter-spacing:0;
}
.rpCardPriceSub{
  display:block; font-size:12px; color:#002349;
  font-weight:300; margin-top:4px; white-space:nowrap;
}
.rpCardCta{
  background: #fff;
  color: #405a77;
  border: 1px solid #002349;
  padding: 9px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, color .2s;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 18px;
}
.rpCardCta:hover{ background:#1a3a5c; color:#fff; }
.rpCardCtaArrow{ font-size:11px; transition: transform .2s ease; }
.rpCardCta:hover .rpCardCtaArrow{ transform: translateX(3px); }

/* ── MEHR HOTELS ANZEIGEN ── */
.rpShowMore{
  text-align:left;
  margin:0 0 40px;
}
.rpShowMoreLink{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #002349;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  text-decoration: none;
  transition: color .15s;
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 18px;
  font-family: 'Barlow Condensed';
}
.rpShowMoreLink:hover{ color:#ef8a7d; }
.rpShowMoreLink:hover .rpShowMoreIcon{ transform:translateY(3px); }
.rpShowMoreIcon{
  font-size:15px; color:inherit;
  transition: transform .2s ease;
  display:inline-flex; align-items:center;
}

/* ── CHAT SIDEBAR ── */
.rpChatSide{
  display:none;
  position:sticky;
  will-change: transform;
  top:200px;
  height: calc(100vh - 178px - 70px);
  z-index:10001; /* über dem Modal-Backdrop → nicht verschwommen */
}
.rpLayout.chatOpen .rpChatSide{ display:flex; flex-direction:column; }

.rpChatPanel{
  background:#fff;
  border:1px solid #eef0f5;
  box-shadow:0 10px 30px rgba(15,23,42,.07);
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:visible;
  border-radius: inherit;
}
/* Overflow hidden nur für messages/input, nicht für header */
.rpChatMessages, .rpChatInputArea, .rpChatQuickReplies{
  overflow-x: hidden;
}
.rpChatMessages{ overflow-y: auto; }

/* Chat Header */
.rpChatHead{
  padding: 9px 14px;
  border-bottom:1px solid #eef0f5;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: #e6e9ed;
  position: relative;
  overflow: visible;
}
.rpChatHeadLeft{
  display:flex; align-items:center; gap:12px;
  padding-top: 0;
}
/* Header-Avatar: kleines rundes Icon IN der Leiste (wie mobil). Die große
   „offene-Hände"-Wilma (assets/avatar.png) lebt nur noch im Teaser
   (.rpAnniAvatar) — im geöffneten Chat ragt nichts mehr über den Header. */
.rpChatAvatar{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: url("assets/avatar_small.png") center/cover no-repeat, #dde3ed;
  border: 2px solid #fff;
  flex-shrink: 0;
  margin: 0;
  z-index: 1;
}
.rpChatHeadName{ font-size:18px; font-weight:600; color:#002349; line-height:1.2; }
.rpChatHeadSub{ font-size:13.5px; color:#002349; font-weight:300; margin-top:1px; }
.rpChatCloseBtn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 14px;
  background: none;
  font-size: 20px;
  color: #aab0bb;
  cursor: pointer;
  line-height: 1;
  border: 1px solid #ccc;
  padding: 6px 8px;
  transition: color .15s;
}
.rpChatCloseBtn:hover{ color:#555; }

/* Chat Messages */
.rpChatMessages{
  flex:1; overflow-y:auto; padding:16px 16px 8px;
  display:flex; flex-direction:column; gap:10px;
  scroll-behavior:smooth;
}
.rpChatMessages::-webkit-scrollbar{ width:4px; }
.rpChatMessages::-webkit-scrollbar-thumb{ background:#e9ecf2; border-radius:999px; }

/* Message bubbles */
.rpChatMsg{ display:flex; gap:8px; align-items:flex-end; }
.rpChatMsg.user{ flex-direction:row-reverse; }
.rpChatMsgAvatar{
  width:28px; height:28px; border-radius:999px; flex-shrink:0;
  background: linear-gradient(135deg, rgba(0,35,73,.18), rgba(239,138,125,.28)), url("assets/avatar_small.png");
  background-size:cover;
}
.rpChatMsg.user .rpChatMsgAvatar{ background:#002349; display:flex; align-items:center; justify-content:center; }
.rpChatMsg.user .rpChatMsgAvatar i{ color:#fff; font-size:12px; }
.rpChatBubble{
  max-width: 80%;
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: #002349;
  background: #f4f6fa;
  border: 1px solid #eef0f5;
}
.rpChatMsg.user .rpChatBubble{
  background:#002349; color:#fff; border-color:#002349; border-radius:16px 16px 4px 16px;
}
.rpChatMsg.bot .rpChatBubble{
  border-radius:16px 16px 16px 4px;
}

/* Chat typing indicator */
.rpChatTyping .rpChatBubble{ padding:12px 16px; }
.rpTypingDots{ display:flex; gap:4px; align-items:center; }
.rpTypingDots span{
  width:6px; height:6px; border-radius:999px; background:#64748b;
  animation: typingBounce 1.2s infinite ease-in-out;
}
.rpTypingDots span:nth-child(2){ animation-delay:.2s; }
.rpTypingDots span:nth-child(3){ animation-delay:.4s; }
@keyframes typingBounce{
  0%,80%,100%{ transform:scale(0.7); opacity:.5; }
  40%{ transform:scale(1); opacity:1; }
}

/* Quick replies */
.rpChatQuickReplies{
  display:flex; gap:6px; flex-wrap:wrap; padding:0 16px 8px; justify-content:center;
}
.rpChatQuickBtn{
  padding: 6px 14px;
  border: 0px;
  background: #f4f6fa;
  font-size: 14px;
  font-weight: 300;
  color: #002349;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, background .15s;
  border-radius: 8px 8px 8px 0px;
}
.rpChatQuickBtn:hover{ }

/* Chat Input */
.rpChatInputArea{
  padding:12px 16px 14px;
  border-top:1px solid #eef0f5;
  display:flex; gap:8px; align-items:flex-end;
}
.rpChatInput{
  flex:1; min-height:40px; max-height:120px;
  padding:10px 14px; border:1px solid #e0e0e0; border-radius:2px;
  font:inherit; font-size:14px; resize:none; outline:none; color:#0b1020;
  line-height:1.4; transition: border-color .15s;
  font-family: Open Sans, sans-serif;
  box-sizing:border-box;   /* Höhe inkl. Padding/Border → präzises WhatsApp-Auto-Grow */
  overflow-y:hidden;       /* 1 Zeile ohne Scrollbalken; JS schaltet ab 4 Zeilen auf 'auto' */
}
.rpChatInput:focus{ border-color:#ef8a7d; }
/* input[type=search] wie das frühere Textfeld aussehen lassen:
   natives Such-Styling und das „×"-Löschsymbol entfernen, einzeilig. */
input.rpChatInput{
  -webkit-appearance:none; appearance:none;
  height:40px; box-sizing:border-box;
}
input.rpChatInput::-webkit-search-cancel-button,
input.rpChatInput::-webkit-search-decoration,
input.rpChatInput::-webkit-search-results-button,
input.rpChatInput::-webkit-search-results-decoration{
  -webkit-appearance:none; appearance:none; display:none;
}
.rpChatSendBtn{
  width:40px; height:40px; border-radius:2px; border:none; background:#002349;
  color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0; transition: background .2s;
}
.rpChatSendBtn:hover{ background:#0a3a6b; }

/* Kleiner KI-Hinweis unter der Eingabeleiste (grau, zentriert) */
.rpChatDisclaimer{
  text-align:center;
  font-size:13px;
  line-height:1.3;
  color:#002349;
  padding:0 16px 14px;
  font-family: 'Barlow Condensed';
  -webkit-user-select:none; user-select:none;
  font-weight: 300;
  letter-spacing: 0.3px;
}

/* ==========================================================
   Anni Widget – Sound Button (im Chat-Header) + Mic Button (im Input-Area)
   ========================================================== */
.rpChatHeadIconBtn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 56px;
  background: none;
  border: 1px solid #ccc;
  color: #aab0bb;
  width: 33px;
  height: 34px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color .15s, border-color .15s, background .15s;
}
.rpChatHeadIconBtn:hover{ color: #002349; }
.rpChatHeadIconBtn.active{
  color: #fff;
  background: #002349;
  border-color: #002349;
}
.rpChatHeadIconBtn svg{ width: 18px; height: 18px; }

.rpChatHeadTextIconBtn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 100px;
  background: none;
  border: 1px solid #ccc;
  color: #aab0bb;
  width: 33px;
  height: 34px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color .15s, border-color .15s, background .15s;
}
.rpChatHeadTextIconBtn:hover{ color: #002349; }
.rpChatHeadTextIconBtn.active{
  color: #fff;
  background: #002349;
  border-color: #002349;
}

/* Mic-Button sieht aus wie Send-Button, nur heller wenn inaktiv */
.anniVoiceBtn{
  background: #fff !important;
  color: #002349 !important;
  border: 1px solid #d0d4da !important;
}
.anniVoiceBtn:hover{ background: #f4f6f8 !important; }
.anniVoiceBtn.active{
  background: #002349 !important;
  color: #fff !important;
  border-color: #002349 !important;
  animation: anniMicPulse 1.4s ease-in-out infinite;
}
@keyframes anniMicPulse{
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,35,73,.45); }
  50%      { box-shadow: 0 0 0 8px rgba(0,35,73,0);   }
}

/* Typing-Bubble (floating über dem Avatar wenn Panel geschlossen) */
.anni-bubble-typing{
  position: fixed;
  right: 110px;
  bottom: 40px;
  background: #fff;
  color: #002349;
  padding: 10px 14px;
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(0,0,0,.12);
  font-size: 14px;
  max-width: 280px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  z-index: 10003;
}
.anni-bubble-typing.visible{ opacity: 1; transform: translateY(0); }

/* ==========================================================
   Anni Widget – Visual Feedback (rpPulse)
   Wird von ReiseplanerAPI auf angefasste Elemente gesetzt,
   damit der User sieht, was Anni gerade gesteuert hat.
   ========================================================== */
@keyframes rpPulseAnim {
  0%   { box-shadow: 0 0 0 0 rgba(0, 35, 73, 0.5);    outline: 2px solid rgba(0, 35, 73, 0.8); outline-offset: 2px; }
  60%  { box-shadow: 0 0 0 10px rgba(0, 35, 73, 0);   outline: 2px solid rgba(0, 35, 73, 0.3); outline-offset: 4px; }
  100% { box-shadow: 0 0 0 0 rgba(0, 35, 73, 0);      outline: 2px solid rgba(0, 35, 73, 0);   outline-offset: 2px; }
}
.rpPulse {
  animation: rpPulseAnim 1.2s ease-out;
  position: relative;
  z-index: 1;
}

/* ── HOTEL INFO PANEL (overlay) ── */
/* ── HOTEL MODAL (überschreibt travel.css komplett) ── */
/* Filterbar Backdrop mit rundem Loch für Logo (clip-path via JS gesetzt) */
.hotelNavBackLeft{
  display:none;
  position:fixed;
  top:70px;
  left:0; right:0;
  height:70px;
  z-index:10000;
  background:rgba(0,0,0,.50);
  backdrop-filter:blur(4px);
  /* clip-path wird per JS dynamisch gesetzt basierend auf Logo-Position */
}
.hotelNavBackLeft.open{
  display:block;
  /* Rundes Loch via mask: weißer Kreis = sichtbar, schwarz = abgedeckt */
  mask-image: radial-gradient(
    circle var(--cr, 75px) at var(--cx, 50%) var(--cy, 50%),
    transparent 100%,
    black 100%
  );
  -webkit-mask-image: radial-gradient(
    circle var(--cr, 75px) at var(--cx, 50%) var(--cy, 50%),
    transparent 100%,
    black 100%
  );
}
/* hotelNavBackLeft nicht mehr nötig: der Vollbild-Schleier (.hotelPanelBack, top:0)
   deckt Header + Filter komplett ab. Separates Logo-Loch-Backdrop deaktiviert. */
.hotelNavBackLeft{ display:none !important; }
/* hotelNavBackRight nicht mehr benötigt */
.hotelNavBackRight{ display:none !important; }

.hotelPanelBack{
  display:none !important;
  position:fixed !important;
  top:0 !important; /* Vollbild-Schleier: Header + Filter werden verdeckt */
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:10000 !important;
  background:rgba(0,0,0,.50) !important;
  backdrop-filter:blur(4px) !important;
}
.hotelPanelBack::before{ display:none !important; } /* travel.css ::before deaktivieren */
.hotelPanelBack.open{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:24px !important;
}
/* Chat offen: Modal nach links verschieben, Breite unverändert */
.hotelPanelBack.chatIsOpen .hotelPanel{
  margin-right:500px !important;
}
/* Chat geschlossen: Modal breiter (max 1200px) */
.hotelPanelBack:not(.chatIsOpen) .hotelPanel{
  max-width:1200px !important;
  width:100% !important;
}

/* travel.css .hotelPanel überschreiben */
.hotelPanelBack .hotelPanel,
.hotelPanelBack.open .hotelPanel {
  /* Position zurücksetzen */
  position:relative !important;
  bottom:auto !important;
  left:auto !important; right:auto !important;
  transform:none !important;
  /* Größe */
  top: 14px;
  height: calc(100vh - 189px - 70px);
  overflow-y:auto !important;
  overflow-x:hidden !important;
  /* Design */
  background:#fff !important;
  border-radius:0px !important;
  box-shadow:0 24px 80px rgba(2,6,23,.28) !important;
  border:none !important;
  display:block !important;
  flex-direction:unset !important;
  /* Animation */
  opacity:0;
  scale:0.94;
  translate:0 16px;
  transition:opacity .3s cubic-bezier(.22,.61,.36,1),
             scale .3s cubic-bezier(.22,.61,.36,1),
             translate .3s cubic-bezier(.22,.61,.36,1);
  padding:20px;
}
.hotelPanelBack.open .hotelPanel{
  opacity:1 !important;
  scale:1 !important;
  translate:0 0 !important;
}

/* Oberer 2-Spalter */
.hpTopRow{
  display:grid;
  grid-template-columns:0.8fr 1fr;
  gap:30px;
  min-height:320px;
}

/* Bild-Spalte */
.hpImgCol{
  overflow:hidden;
  position:relative;
}
/* Carousel Slider */
.hpImgSlider{
  display:flex; height:100%; transition:transform .4s ease;
}
.hpImg{
  min-width:100%; height:100%; min-height:320px;
  background-size:cover; background-position:center; flex-shrink:0;
}
/* Pfeile */
.hpImgArrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border-radius:0;
  background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:300; color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
  z-index:2; opacity:1;
}
.hpImgArrow.left{ left:8px; }
.hpImgArrow.right{ right:8px; }
.hpImgArrow:hover{ color:#fff; transform:translateY(-50%) scale(1.2); }
/* Dots */
.hpImgDots{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; gap:5px; z-index:2;
}
.hpImgDot{
  width:6px; height:6px; border-radius:999px;
  background:rgba(255,255,255,.55); cursor:pointer; transition:all .2s;
}
.hpImgDot.active{ background:#fff; width:14px; }

/* Info-Spalte */
.hpInfoCol{
  padding:0px;
  display:flex; flex-direction:column; gap:12px;
}

/* Name / Sterne / Location */
.hpStarsRow{ color: #adacad; font-size: 24px; letter-spacing: 1px; }
.hpLoc{ font-size:12px; color:#888; font-weight:400; }

/* Weiterempfehlung Badge */
.hpBadgeRow{ display:flex; padding: 14px 0px; }
.hpBadge{ display:flex; align-items:center; gap:10px; }
.hpBadgeCircle{
  width:52px; height:52px; flex-shrink:0;
  position:relative; display:flex; align-items:center; justify-content:center;
}
.hpBadgeCircle svg{
  position:absolute; top:0; left:0; width:100%; height:100%;
  transform:rotate(260deg); /* Lücke oben links */
}
.hpBadgeCircle svg circle{
  fill:none;
  stroke:#002349;
  stroke-width:2.5;
  stroke-linecap:round;
  /* r=20, Umfang=125.7 — 92% gefüllt, kleine Lücke unten */
  stroke-dasharray: 115 125.7;
}
.hpBadgeCircleText{
  font-size:16px; color:#002349;
  position:relative; z-index:1; line-height:1;
}
.hpBadgeLabel{ font-size:16px; font-weight:400; color:#002349; }
.hpBadgeMore{ font-size:13px; color:#888; text-decoration:none; display:block; margin-top:2px; }
.hpBadgeMore:hover{ color:#002349; }

/* Highlights Liste */
.hpHighlights{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:6px; padding-top: 5px;
}
.hpHighlights li{
  display:flex; align-items:flex-start; gap:7px;
  font-size: 18px !important;
  color: #334155;
  font-weight: 300 !important;
  line-height: 1.45;
}
.hpHighlights li::before{
  content:"\2713"; color:#ccc; font-weight:900; font-size:13px;
  flex-shrink:0; margin-top:1px;
}

/* Preis + Buchen */
.hpBookRow{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  margin-top:auto; padding-top:30px; align-items: center;
}
.hpPrice{ font-size:20px; font-weight:900; color:#0b1f3a; line-height:1; }
.hpPriceSub{ font-size:14px; color:#888; font-weight:300; margin-top:3px; }
.hpBookBtn{
  background: #ef8a7d;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s;
  font-family: Barlow Condensed,sans-serif;
}
.hpBookBtn:hover{ background:#e0705f; }

/* Body (volle Breite) */
.hpBody{ padding:0 0 20px; }
.hpStory{ color: #4b4b4b;
  font-style: normal;
  font-weight: 300;
  font-size: 19px;
  line-height: 160%;
}

/* Zimmer-Grid */
.hpRoomsGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.hpRoomCard{
  border:1px solid #eef0f5; background:#fff;
  box-shadow:0 2px 10px rgba(2,6,23,.05); overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease;
  /* Stabiler Start-Transform + eigene Compositing-Ebene halten, damit der Text beim
     Hover NICHT neu gerastert wird (verhindert das Subpixel-Wackeln einiger Schriften). */
  transform:translateY(0);
  will-change:transform;
  backface-visibility:hidden;
}
.hpRoomCard:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(2,6,23,.09); }
.hpRoomCard.unavailable{ pointer-events:auto; }
/* Sobald eine Karte gewählt ist, die übrigen (nicht gewählten) Karten desselben Grids
   leicht ausgrauen. Per direktem Kind gescoped → bei mehreren Zimmern/Angeboten wird
   nur der jeweilige Block gedimmt, nicht alles. Beim Hover wieder voll sichtbar. */
.hpRoomsGrid:has(> .hpRoomCard.selected) > .hpRoomCard:not(.selected):not(.unavailable){
  opacity:.45;
  transition:opacity .15s ease;
}
.hpRoomsGrid:has(> .hpRoomCard.selected) > .hpRoomCard:not(.selected):not(.unavailable):hover{
  opacity:1;
}
.hpRoomImg{
  height:140px; background:linear-gradient(135deg,rgba(0,35,73,.08),rgba(239,138,125,.15));
  background-size:cover; background-position:center; position:relative;
}
.hpRoomUnavailBadge{
  position:absolute; top:8px; right:8px;
  background:rgba(0,0,0,.6); color:#fff;
  font-size:13px; font-weight:400; padding:3px 8px; border-radius:2px;
}
.hpRoomBody{ padding:12px 14px; }
.hpRoomName{ font-size:23px; font-weight:300; color:#002349; margin-bottom:4px; letter-spacing: .3px; }
.hpRoomMeta{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.hpRoomBadge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:15px; font-weight:300; color:#5a6478;
  background:#f1f5f9; border-radius:2px; padding:6px 10px;
}
.hpRoomDesc {
  font-size: 20px;
  line-height: 1.45;
  margin-bottom: 6px;
  font-weight: 300;
  color: #5a6478;
  letter-spacing: .2px;
}
.hpRoomFeatures{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
.hpRoomFeature{
  font-size:11px; color:#64748b; background:#f8fafc;
  border:1px solid #e2e8f0; border-radius:5px; padding:2px 6px;
}
.hpRoomPriceRow{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:6px; }
.hpRoomPrice{ font-size:24px; font-weight:400; color:#002349; line-height:1; }
.hpRoomPriceSub{ font-size:14px; color:#94a3b8; font-weight:300; }
.hpRoomArras{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.hpRoomArra{
  font-size:11px; font-weight:600; padding:3px 9px; border-radius:99px;
  background:#eef2ff; color:#4f46e5; cursor:pointer;
  border:1.5px solid transparent; transition:all .12s;
}
.hpRoomArra:hover, .hpRoomArra.selected{ background:#4f46e5; color:#fff; }
.hpRoomNoPrice{ font-size: 14px; color: #94a3b8; font-style: italic; font-weight: 300; }

/* Extras Row (horizontal scrollbar) */
.hpExtrasRow{
  display:flex; gap:14px; overflow-x:auto; padding-bottom:4px;
}
.hpExtrasRow::-webkit-scrollbar{ height:4px; }
.hpExtrasRow::-webkit-scrollbar-thumb{ background:#e0e3e8; border-radius:999px; }
.hotelExtraCard{
  border-radius:12px; border:1px solid #eef0f5; background:#fff;
  overflow:hidden; box-shadow:0 4px 14px rgba(2,6,23,.06);
  flex:0 0 180px; transition:transform .12s ease;
}
.hotelExtraCard:hover{ transform:translateY(-2px); }
.hotelExtraImg{
  height:90px;
  background:linear-gradient(135deg,rgba(239,138,125,.25),rgba(0,35,73,.10));
  background-size:cover; background-position:center;
}
.hotelExtraBody{ padding:10px; }
.hotelExtraTop{ display:flex; flex-direction:column; gap:2px; margin-bottom:4px; }
.hotelExtraTitle{ font-size:12px; font-weight:700; color:#002349; line-height:1.3; }
.hotelExtraPrice{ font-size:11px; font-weight:700; color:#ef8a7d; }
.hotelExtraDesc{ font-size:11px; color:#64748b; line-height:1.4; }
.hotelExtraTimes{ margin-top:4px; font-size:11px; color:#999; }

/* Share Bar */
.hpShareBar{
  display:flex; align-items:center; gap:10px;
  padding:14px 22px 4px; justify-content:flex-end;
}
.hpShareLabel{ font-size:12px; color:#888; font-weight:500; }
.hpShareBtn{
  width:34px; height:34px; border-radius:8px;
  border:1px solid #e0e3e8; background:#fff;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:13px; color:#555; transition: background .15s, color .15s;
}
.hpShareBtn:hover{ background:#0b1f3a; color:#fff; border-color:#0b1f3a; }

@media(max-width:640px){
  .hpTopRow{ grid-template-columns:1fr; }
  .hpImgCol{ border-radius:2px; }
  .hpImg{ min-height:200px; }
}

/* Hidden inputs */
.rpHidden{ display:none; }

.hpPriceNum {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-size: 30px;
  line-height: 24px;
  color: #002349;
}
/* "ab" vor dem Preis: andere Farbe + leichteres Gewicht, dezent abgesetzt. */
.hpPriceNum .hpPriceAb{
  font-weight: 300;
  font-size: 22px;
  color: #8a93a3;
}
.hpPricePerPerson, .hpPriceSub {
  font-size: 14px;
  color: #888;
  font-weight: 300;
  margin-top: 3px;
}

/* ── ZIMMER + EXTRAS AUSWAHL IM MODAL ── */
.hpRoomArraWrap{ padding:0 22px 4px; display:flex; flex-direction:column; gap:10px; }
.hpRoomArraGroup{ display:flex; flex-direction:column; gap:5px; }
.hpRoomArraLabel{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:#94a3b8; }
.hpRoomArraSelect{
  width:100%; padding:10px 12px; border:1.5px solid #e2e8f0;
  border-radius:10px; font-size:13px; color:#002349;
  background:#fff; font-family:inherit; outline:none; cursor:pointer; transition:border .15s;
}
.hpRoomArraSelect:focus{ border-color:#ef8a7d; }

.hpExtrasChipTitle{
  font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.6px; color:#94a3b8; padding:4px 22px 8px;
}
.hpExtrasChipList{ display:flex; flex-direction:column; gap:7px; padding:0 22px 16px; }
.hpExtraChip{
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  border-radius:10px; border:1.5px solid #e2e8f0; background:#fff;
  cursor:pointer; transition:all .15s; user-select:none;
}
.hpExtraChip:hover{ border-color:#ef8a7d; background:#fff9f8; }
.hpExtraChip.on{ border-color:#10b981; background:#f0fdf4; }
.hpExtraChipBox{
  width:22px; height:22px; border-radius:6px; border:2px solid #e2e8f0;
  background:#fff; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:all .15s; font-size:11px;
}
.hpExtraChip.on .hpExtraChipBox{ background:#10b981; border-color:#10b981; color:#fff; }
.hpExtraChipBody{ flex:1; }
.hpExtraChipName{ font-size:13px; font-weight:600; color:#002349; }
.hpExtraChipDesc{ font-size:11px; color:#94a3b8; margin-top:1px; }
.hpExtraChipPrice{ font-size:12px; font-weight:700; color:#10b981; white-space:nowrap; flex-shrink:0; }

.hpModalSummary{
  margin:0 22px 12px; background:#f8fafc;
  border:1px solid #eef0f3; border-radius:12px; padding:14px 16px; display:none;
}
.hpModalSummaryTitle{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:#94a3b8; margin-bottom:10px; }
.hpModalSummaryRow{ display:flex; justify-content:space-between; font-size:13px; padding:3px 0; color:#334155; }
.hpModalSummaryRow span:last-child{ font-weight:700; color:#002349; }
.hpModalSummaryTotalRow{
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid #e2e8f0; margin-top:8px; padding-top:8px;
  font-size:14px; font-weight:700; color:#002349;
}
.hpModalSummaryTotalRow span:last-child{ font-size:20px; font-weight:900; }

.hpWaehlenWrap{ padding:0 22px 22px; }
.hpWaehlenBtn{
  width:100%; background:#ef8a7d; color:#fff; border:none;
  padding:14px; border-radius:10px; font-size:17px; font-weight:700;
  cursor:pointer; font-family:Barlow Condensed,sans-serif;
  letter-spacing:.03em; transition:background .2s; text-align:center;
}
.hpWaehlenBtn:hover{ background:#e0705f; }
.hpWaehlenBtn:disabled{ background:#e2e8f0; color:#94a3b8; cursor:not-allowed; }

/* ── ANGEBOTS-ZUSAMMENFASSUNG BANNER ── */
/* ── ANGEBOTSÜBERSICHT (Screenshot-Design) ── */
.rpAngebotsWrap{ display:none; margin-bottom:32px; }
.rpAngebotsWrap.show{ display:block; }
.rpAngebotsTitle{
  color: #002349;
  font-family: Barlow Condensed,sans-serif;
  margin: 0 0 8px;
  font-style: normal;
  font-weight: 300;
  font-size: 48px;
  line-height: 53px;
}
.rpAngebotsTitle strong{ font-weight:500; }
.rpAngebotsSubRow{ display:flex; align-items:center; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
.rpAngebotsSub{ color: #002349;
  font-style: normal;
  font-weight: 300;
  font-size: 20px;
  line-height: 160%; 
}
.rpAngebotsIcons{ display:flex; gap:10px; }
.rpAngebotsIconBtn{
  width:36px; height:36px; border-radius:50%;
  border:1px solid #e2e8f0; background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:#334155; cursor:pointer; font-size:14px; transition:all .15s;
}
.rpAngebotsIconBtn:hover{ background:#002349; color:#fff; border-color:#002349; }
.rpAngebotsLayout{ display:grid; grid-template-columns:90px 1fr; gap:24px; align-items:start; }
.rpAngebotsSidebar{ display:flex; flex-direction:column; gap:3px; padding-top:6px; }
.rpAngebotsSidebarItem{ color: #64748b;
  font-style: normal;
  font-weight: 300;
  font-size: 17px;
  line-height: 17px;
}
.rpAngebotsSidebarItem.bold{ font-weight:400; color:#002349; }
.rpAngebotsCard{
  background:#fff; border:1px solid #e7eaf0;
  border-radius:4px; box-shadow:0 2px 16px rgba(0,0,0,.06); overflow:hidden;
}
.rpAngebotsHotelRow{
  display:grid; grid-template-columns:300px 1fr 165px;
  min-height:300px;
}
.rpAngebotsImgWrap{ position:relative; overflow:hidden; background:#dde3ed; }
.rpAngebotsImgSlider{ display:flex; height:100%; transition:transform .4s ease; }
.rpAngebotsImgSlide{
  min-width:100%; height:100%; min-height:300px;
  background-size:cover; background-position:center; flex-shrink:0;
}
.rpAngebotsImgArrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.3); border:none; color:#fff;
  width:32px; height:32px; border-radius:50%;
  cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center;
  transition:background .15s; z-index:2;
}
.rpAngebotsImgArrow:hover{ background:rgba(0,0,0,.6); }
.rpAngebotsImgArrow.left{ left:10px; }
.rpAngebotsImgArrow.right{ right:10px; }
.rpAngebotsImgDots{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  display:flex; gap:5px;
}
.rpAngebotsImgDot{
  width:6px; height:6px; border-radius:999px;
  background:rgba(255,255,255,.55); cursor:pointer; transition:all .2s;
}
.rpAngebotsImgDot.active{ background:#fff; width:16px; }
.rpAngebotsLocBadge{
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255,255,255,.92);
  color: #334155;
  padding: 4px 9px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 18px;
}
.rpAngebotsHotelInfo{
  padding:22px 24px; display:flex; flex-direction:column;
  border-right:1px solid #eef0f3;
}
.rpAngebotsHotelName{ color: #002349;
  margin: 0 0 4px;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-size: 30px;
  line-height: 53px; }
.rpAngebotsStars{ color:#adacad; font-size:20px; letter-spacing:1px; margin-bottom:5px; }
.rpAngebotsBadge{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.rpAngebotsBadgeCircle{
  width:48px; height:48px; flex-shrink:0;
  position:relative; display:flex; align-items:center; justify-content:center;
}
.rpAngebotsBadgeCircle svg{ position:absolute; top:0; left:0; width:100%; height:100%; transform:rotate(260deg); }
.rpAngebotsBadgeCircle svg circle{ fill:none; stroke:#002349; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:110 125.7; }
.rpAngebotsHighlights{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; flex:1; }

.rpAngebotsActions{
  padding:20px 16px; display:flex; flex-direction:column; gap:10px; min-width:160px;
}
.rpAngebotsActionBtn{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; font-size:14px; font-weight:600;
  cursor:pointer; border:none; width:100%;
  font-family:inherit; transition:all .15s; gap:6px;
}
.rpAngebotsRoomImg{ height:100px; background-size:cover; background-position:center; background-color:#dde3ed; }
.rpAngebotsRoomInfo{ padding:16px 20px; }
.rpAngebotsRoomName{ font-size:22px; font-weight:400; color:#002349; margin-bottom:5px; font-family:Barlow Condensed,sans-serif; }
.rpAngebotsRoomMeta{ font-size:18px; font-weight:300; color:#64748b; display:flex; flex-direction:column; gap:2px; }

.rpShareToast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(8px);
  background:#002349; color:#fff; padding:10px 20px; border-radius:10px;
  font-size:13px; font-weight:600; z-index:99999; opacity:0;
  transition:all .2s; pointer-events:none; white-space:nowrap;
}
.rpShareToast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ── ANGEBOTSÜBERSICHT (ersetzt rpHero Inhalt) ── */
.rpAngebotsSubRow{
  display:flex; align-items:center; gap:14px; margin-bottom:24px; flex-wrap:wrap;
}
.rpAngebotsIcons{ display:flex; gap:8px; }
.rpAngebotsIconBtn{
  width:34px; height:34px; border-radius:50%;
  border:1px solid #e2e8f0; background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:#334155; cursor:pointer; font-size:13px; transition:all .15s;
}
.rpAngebotsIconBtn:hover{ background:#002349; color:#fff; border-color:#002349; }

/* Sidebar + Karte Layout */
.rpAngebotsLayout{ display:grid; grid-template-columns:80px 1fr; gap:20px; align-items:start; }
.rpAngebotsSidebar{ display:flex; flex-direction:column; gap:2px; padding-top:4px; }

/* Karte */
.rpAngebotsCard{
  background:#fff; border:1px solid #e2e8f0;
  box-shadow:0 2px 16px rgba(0,0,0,.07); overflow:hidden;
}
.rpAngebotsHotelRow{
  display:grid; grid-template-columns:300px 1fr 155px; min-height:290px;
}

/* Bild */
.rpAngebotsImgWrap{ position:relative; overflow:hidden; background:#dde3ed; }
.rpAngebotsImgSlider{ display:flex; height:100%; transition:transform .4s ease; }
.rpAngebotsImgSlide{
  min-width:100%; height:100%; min-height:290px;
  background-size:cover; background-position:center; flex-shrink:0;
}
.rpAngebotsImgArrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.3); border:none; color:#fff;
  width:30px; height:30px; border-radius:50%;
  cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center;
  transition:background .15s; z-index:2;
}
.rpAngebotsImgArrow:hover{ background:rgba(0,0,0,.6); }
.rpAngebotsImgArrow.left{ left:8px; }
.rpAngebotsImgArrow.right{ right:8px; }
.rpAngebotsImgDots{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  display:flex; gap:5px;
}
.rpAngebotsImgDot{
  width:6px; height:6px; border-radius:999px;
  background:rgba(255,255,255,.55); cursor:pointer; transition:all .2s;
}
.rpAngebotsImgDot.active{ background:#fff; width:14px; }

/* Hotel Info */
.rpAngebotsHotelInfo{
  padding:20px 22px; display:flex; flex-direction:column;
  border-right:1px solid #eef0f3;
}
.rpAngebotsHotelName{ color: #002349;
  margin: 0 0 4px;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-size: 30px;
  line-height: 53px; }
.rpAngebotsStars{ color:#adacad; font-size:18px; letter-spacing:1px; margin-bottom:4px; }
.rpAngebotsLoc{ color: #b7b7b7;
  margin-bottom: 12px;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 19px; }
.rpAngebotsBadge{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.rpAngebotsBadgeCircle{
  width:46px; height:46px; flex-shrink:0;
  position:relative; display:flex; align-items:center; justify-content:center;
}
.rpAngebotsBadgeCircle svg{ position:absolute; top:0; left:0; width:100%; height:100%; transform:rotate(260deg); }
.rpAngebotsBadgeCircle svg circle{ fill:none; stroke:#002349; stroke-width:2.5; stroke-linecap:round; }
.rpAngebotsBadgeCircleText{ font-size:16px; color:#002349; position:relative; z-index:1; top: -2px; }
.rpAngebotsBadgeLabel{ font-size:16px; font-weight:400; color:#002349; }
.rpAngebotsBadgeMore{ cursor: pointer;
  font-size: 13px;
  color: #888;
  text-decoration: none;
  display: block;
  margin-top: 2px; }
.rpAngebotsHighlights{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:5px; flex:1; }
.rpAngebotsHighlights li{
  color: #334155;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.4;
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
}
.rpAngebotsHighlights li::before{ content: "\2713";
  color: #ccc;
  font-weight: 900;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px; }

/* Aktionen */
.rpAngebotsActions{ padding:18px 14px; display:flex; flex-direction:column; gap:8px; }
.rpAngebotsActionBtn{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  border: none;
  width: 100%;
  transition: all .15s;
  gap: 6px;
  white-space: nowrap;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 18px;
}
.rpAngebotsActionBtn .rpABArrow{ display:inline-block; transition:transform .2s ease; }
.rpAngebotsActionBtn:hover .rpABArrow{ transform:translateX(4px); }
.rpAngebotsActionBtn.primary{ background:#002349; color:#fff; }
.rpAngebotsActionBtn.primary:hover{  }
.rpAngebotsActionBtn.secondary{ background:#fff; color:#002349; border:1px solid #002349; }
.rpAngebotsActionBtn.secondary:hover{ background:#f0f4f9; }

/* Zimmer-Karte */
.rpAngebotsRoomRow{
  display:grid; grid-template-columns:130px 1fr auto;
  border-top:1px solid #eef0f3; align-items:center;
}
/* ohne Zimmerbild: Bild-Spalte entfällt → keine leere 130px-Lücke */
.rpAngebotsRoomRow.rpAngebotsRoomRowNoImg{
  grid-template-columns:1fr auto;
}
.rpAngebotsRoomImg{ height:100px; background-size:cover; background-position:center; background-color:#dde3ed; }
.rpAngebotsRoomInfo{ padding:14px 18px; }
.rpAngebotsRoomPrice{
  padding:14px 18px; text-align:right; white-space:nowrap;
  display:flex; align-items:center; justify-content:center; gap:24px;
}
.rpAngebotsRoomPriceNum{ color: #002349;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-size: 28px;
  display: flex;
  gap: 11px;
  justify-content: space-between;
  top: 10px;
  position: relative; }
.rpAngebotsRoomPricePP{ font-size: 16px;
  color: #888;
  font-weight: 300;
  top: -2px;
  position: relative; }
.rpAngebotsBookBtn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ef8a7d;
  color: #fff;
  border: none;
  padding: 11px 18px;
  cursor: pointer;
  letter-spacing: .03em;
  transition: background .2s;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  font-size: 26px;
  line-height: 26px;
}
.rpAngebotsBookBtn:hover{ background:#e0705f; }
.rpAngebotsBookBtn.rpAngebotsBookBtnDisabled,
.rpAngebotsBookBtn:disabled{
  opacity:.45;
  cursor:not-allowed !important;
  pointer-events:none;
}

/* Loading skeleton */
.rpSkeleton{
  background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton 1.4s ease infinite;
  border-radius:14px; height:340px;
}
@keyframes skeleton{ 0%{background-position:200%} 100%{background-position:-200%} }

/* ── PACKET BANNER ── */
.rpPacketBanner { max-width:1560px; margin:0 auto; padding:0 40px; }
.rpPacketBox {
  background:linear-gradient(135deg,#002349 0%,#003575 100%);
  border-radius:0 0 16px 16px; padding:18px 28px;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  box-shadow:0 4px 24px rgba(0,35,73,.18);
  position:relative; overflow:hidden;
}
.rpPacketBox::before {
  content:''; position:absolute; top:-40px; right:-40px;
  width:180px; height:180px; border-radius:50%;
  background:rgba(255,255,255,.04);
}
.rpPacketBox.modified { background:linear-gradient(135deg,#1a3a5c 0%,#2d5a8c 100%); }
.rpPacketLeft { display:flex; align-items:center; gap:16px; }
.rpPacketIcon {
  width:44px; height:44px; border-radius:12px;
  background:rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:#fff; flex-shrink:0;
}
.rpPacketTitle { font-size:16px; font-weight:700; color:#fff; margin-bottom:3px; }
.rpPacketMeta {
  font-size:12px; color:rgba(255,255,255,.65);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.rpPacketMeta span { display:flex; align-items:center; gap:4px; }
.rpPacketRight { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.rpPacketPrice { text-align:right; }
.rpPacketPriceNum { font-size:22px; font-weight:800; color:#fff; line-height:1; }
.rpPacketPriceSub { font-size:11px; color:rgba(255,255,255,.55); margin-top:3px; }
.rpPacketModBadge {
  background:rgba(239,138,125,.25); border:1px solid rgba(239,138,125,.4);
  color:#ef8a7d; border-radius:8px; padding:4px 10px;
  font-size:11px; font-weight:700; display:none;
}
.rpPacketModBadge.show { display:inline-flex; align-items:center; gap:5px; }
.rpPacketResetBtn {
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  color:#fff; border-radius:8px; padding:7px 14px;
  font-size:12px; font-weight:600; cursor:pointer; font-family:inherit;
  transition:background .15s; display:none;
}
.rpPacketResetBtn:hover { background:rgba(255,255,255,.2); }
.rpPacketResetBtn.show { display:inline-flex; align-items:center; gap:5px; }
.rpPacketCloseBtn {
  background:none; border:none; color:rgba(255,255,255,.5);
  cursor:pointer; font-size:18px; line-height:1; padding:4px;
  transition:color .15s;
}
.rpPacketCloseBtn:hover { color:#fff; }
.rpPacketError {
  max-width:600px; margin:40px auto;
  background:#fff; border-radius:16px;
  padding:40px; text-align:center;
  box-shadow:0 8px 32px rgba(0,0,0,.08);
}
.rpPacketErrorIcon {
  width:64px; height:64px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; margin:0 auto 20px;
}
.rpPacketErrorIcon.expired  { background:#fef3c7; color:#d97706; }
.rpPacketErrorIcon.notfound { background:#fee2e2; color:#dc2626; }
.rpPacketErrorTitle { font-size:20px; font-weight:800; color:#0b1020; margin-bottom:10px; }
.rpPacketErrorSub { font-size:14px; color:#64748b; margin-bottom:28px; line-height:1.6; }
.rpPacketErrorBtn {
  display:inline-flex; align-items:center; gap:8px;
  background:#002349; color:#fff; padding:12px 24px;
  border-radius:10px; font-size:14px; font-weight:700;
  cursor:pointer; border:none; font-family:inherit; transition:background .2s;
}
.rpPacketErrorBtn:hover { background:#003575; }


/* ============================================================
   NAV – Desktop (shared header.php)
   ============================================================ */
.nav {
  height: 100px;
  background: #fff;
  box-shadow: 1px 3px 5px rgba(0,0,0,.15);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  padding: 0 28px;
  display: flex;
  align-items: center;
}
.navMBar {
  width: 100%;
  max-width: 1580px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 30px;
  position: relative;
}
.menu a.active { color: var(--primary); font-weight: 500; }
.brand {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 0;
}
.logoCircle { height: 56px; display: flex; align-items: center; }
.navRight { justify-self: flex-end; display: flex; align-items: center; }
.navRight .navBtn {
  background-color: var(--accent);
  color: #fff;
  border: none;
  padding: 0 28px;
  cursor: pointer;
  font-size: 20px;
  font-weight: 300;
  line-height: 40px;
  position: relative;
  box-shadow: 1px 3px 5px rgba(0,0,0,.15);
  transition: background-color .35s ease, transform .2s ease;
  font-family: inherit;
  white-space: nowrap;
}
.navRight .navBtn .arrow { display: inline-block; margin-left: 6px; transition: transform .35s ease; }
.navRight .navBtn:hover { background-color: var(--primary); }
.navRight .navBtn:hover .arrow { transform: translateX(6px); }
.navRight .navBtn:active { transform: translateY(1px); }

/* ── Hamburger ── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  justify-self: start;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile Drawer ── */
.mobileMenu {
  display: none;
  position: fixed;
  top: 70px;
  left: 0; right: 0;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 9999;
  padding: 12px 20px 24px;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--border);
  transform: translateY(-10px);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.mobileMenu.open {
  display: flex;
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}
.mobileMenu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: var(--text);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  transition: background .15s;
}
.mobileMenu a i { width: 20px; text-align: center; color: var(--muted); }
.mobileMenu a:hover  { background: #f7f8fb; }
.mobileMenu a.active { background: #f0f4fa; color: var(--primary); font-weight: 700; }
.mobileMenu a.active i { color: var(--primary); }
.mobileDivider { height: 1px; background: var(--border); margin: 10px 0; }
.mobileMenu .mobileCta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
  background: var(--accent);
  color: #fff !important;
  padding: 10px 24px;
  border-radius: 2px;
  font-size: 20px;
  font-weight: 300;
  text-decoration: none;
  transition: background .25s;
}
.mobileMenu .mobileCta:hover { background: var(--primary) !important; }
.mobileMenu .mobileCta i { color: #fff !important; }

/* ── body padding-top für fixe Nav ── */
body { padding-top: 70px; }

/* ============================================================
   INDEX PAGE
   ============================================================ */
.pageWrap { max-width: 1560px; margin: 0 auto; padding: 0 48px; }

.hero { padding: 20px 0 0; }
.hero h1 {
  font-family: 'Barlow Condensed', var(--font-family-sans-serif);
  font-style: normal;
  font-weight: 300;
  font-size: 70px;
  line-height: 70px;
  color: #002349;
  margin: 0;
}
.hero h1 strong { font-weight: 500; }
.hero p {
  font-family: 'Barlow Condensed', var(--font-family-sans-serif);
  font-style: normal;
  font-weight: 300;
  font-size: 48px;
  line-height: 53px;
  color: #808080;
  margin: 0;
  margin-top: 30px;
  margin-bottom: 40px;
}

.categorySection { margin-top: 40px; }
.categoryBar { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.catChip {
  background: transparent; border: none; padding: 0;
  cursor: pointer; user-select: none;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: transform .12s ease;
  width: 90px; flex: 0 0 90px; text-align: center;
}
.catChip:hover { transform: translateY(-3px); }
.catIconWrap {
  width: 90px; height: 90px; border-radius: 999px;
  overflow: hidden; background: #e8e8e8; flex-shrink: 0;
  border: 3px solid transparent; transition: border-color .15s ease; box-sizing: border-box;
}
.catChip.selected .catIconWrap { border-color: var(--accent); }
.catIcon { width: 100%; height: 100%; object-fit: cover; display: block; }
.catName { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 300; font-size: 17px; line-height: 17px; color: #002349; transition: color .15s ease; }
.catChip.selected .catName { font-weight: 500; }

.reisedetailsSection { margin-top: 70px; }
.reisedetailsLabel { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 300; font-size: 30px; line-height: 36px; color: var(--primary); margin-bottom: 12px; }
.reisedetailsLabel strong { font-weight: 500; }
.reisedetailsBar {
  display: flex; align-items: flex-end;
  gap: 20px; background: #F7F7F7;
  border-radius: 2px; padding: 30px;
  max-width: 900px; position: relative; flex-wrap: wrap;
}
.rdCell {
  display: flex; flex-direction: column;
  min-width: 0; cursor: pointer;
  background: transparent; border: none; padding: 0;
  height: auto;
}
.rdCell:hover .rdCellVal { border-color: var(--primary); }
.rdCellLabel {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  font-size: 17px;
  line-height: 17px;
  color: #565556;
  margin-bottom: 8px;
  margin-left: 4px;
  white-space: nowrap;
}
.rdCellVal {
  font-family: 'Barlow Condensed', var(--font-family-sans-serif);
  font-style: normal;
  font-weight: 300;
  font-size: 20px;
  line-height: 20px;
  color: #002349;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #e0e2e6;
  border-radius: 4px;
  padding: 14px 18px;
  height: 52px;
  box-sizing: border-box;
  transition: border-color .15s ease;
}
.rdIcon { font-size: 15px; color: var(--primary); line-height: 1; }
.rdBtn {
  background: var(--primary);
  color: #fff;
  padding: 0 24px;
  cursor: pointer;
  white-space: nowrap;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  font-size: 24px;
  line-height: 24px;
  transition: background .5s ease;
  margin-left: 4px;
  border: 1px solid var(--primary);
}
.rdBtn:hover { background: #fff;
  color: #002349;
  border: 1px solid #002349; 
}
.rdArrow { font-size: 16px; transition: transform .2s ease; }
.rdBtn:hover .rdArrow { transform: translateX(3px); }

/* Kalender Dropdown (Index) */
.kalDropdown {
  display: none; position: absolute;
  top: calc(100% + 8px); left: 0;
  background: #fff; border: 1px solid #dfe1e5;
  box-shadow: 0 8px 32px rgba(0,0,0,.16);
  z-index: 9999; padding: 16px; min-width: 715px;
}
.kalDropdown.open { display: block; }
.kalDropdown .calWrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.kalDropdown .month { padding: 4px; }
.kalDropdown .monthHead { display: flex; align-items: center; justify-content: space-between; font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-size: 22px; line-height: 24px;color: var(--primary); margin-bottom: 10px; padding: 0 2px; }
.kalDropdown .monthNav { width: 30px; height: 30px; border: none; background: #fff; cursor: pointer; font-size: 22px; display: grid; place-items: center; color: var(--primary); }
.kalDropdown .monthNav:hover { background: #f0f2f5; }
.kalDropdown .monthNav:disabled { opacity: .3; cursor: default; }
.kalDropdown .dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; color: #565556; text-align: center; font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-size: 15px; line-height: 20px; padding: 4px 0; }
.kalDropdown .grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 0px; }
.kalDropdown .day { height: 32px; width:46px; border: none; background: #fff; cursor: pointer; font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-size: 15px; line-height: 20px; margin-bottom: 8px; }
.kalDropdown .day:hover { background: #f0f2f5; }
.kalDropdown .day.muted { color: #ccc; cursor: default; }
.kalDropdown .day.muted:hover { background: #fff; }
.kalDropdown .day.disabled { color: #ccc; }
.kalDropdown .day.start, .kalDropdown .day.end { background: var(--primary) !important; color: #fff !important; border-color: var(--primary); font-weight: 700; }
.kalDropdown .day.inRange { background: #002349; border-radius: 0; color:#fff; }
.kalDropdown .day.preview { background: rgba(0,35,73,.06); }
.kalDropdown .day.previewEnd { background: var(--primary); color: #fff; border-color: var(--primary); }
.kalFooter { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid #eee; gap: 10px; flex-wrap: wrap; }
.kalQuickBtns { display: flex; gap: 6px; flex-wrap: wrap; }
.kqBtn { border: 1px solid #d0d4da;
  background: #fff;
  color: var(--primary);
  font-family: inherit;
  transition: background .15s, border-color .15s;
  padding: 8px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 18px; }
.kqBtn:hover { background: #f0f2f5; border-color: var(--primary); }
.kqBtn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.kalConfirmBtn { background: var(--primary);
  color: #fff;
  border: none;
  padding: 9px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 18px;
  transition: background .2s;
  white-space: nowrap;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 18px; 
}
.kalConfirmBtn:hover { background: #003575; }
.kalConfirmBtn:disabled { opacity: .35; cursor: default; }
.kalTabs { display: flex; gap: 0; padding: 3px; justify-content: center; margin-bottom: 20px; }
.kalTab { flex: 1;
  padding: 7px 16px;
  border: none;
  background: #f4f4f4;
  color: #64748b;
  cursor: pointer;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  font-size: 18px;
  line-height: 18px;
  transition: all .15s;
  max-width: 140px; }
.kalTab.active { background: var(--primary); color: #fff; }
.flexSection { margin-bottom: 0px; }
.flexQ { color: #565556; text-align: center; margin-bottom: 4px; font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-size: 17px; line-height: 17px; }
.flexSub { color: #565556; text-align: center; margin-bottom: 30px; font-family: 'Barlow Condensed'; font-style: normal; font-weight: 300; font-size: 17px; line-height: 17px; }
.flexDayBtns { display: flex; gap: 20px; justify-content: center; }
.flexDayBtn { padding: 8px 18px; border: 1px solid #e0e2e6; background: #fff; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; font-family: 'Barlow Condensed'; font-style: normal; font-weight: 300; font-size: 18px; line-height: 18px; color: #002349; }
.flexDayBtn:hover { background: #f0f2f5; }
.flexDayBtn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.flexMonthsWrap { display: flex; align-items: center; gap: 8px; }
.flexMonthNav { width: 30px; height: 30px; flex-shrink: 0; border: none; background: #fff; cursor: pointer; font-size: 26px; display: grid; place-items: center; color: var(--primary); transition: background .15s; }
.flexMonthNav:hover { }
.flexMonthNav:disabled { opacity: .3; cursor: default; }
.flexMonthScroll { display: flex; gap: 8px; overflow: hidden; flex: 1; }
.flexMonthChip { flex: 0 0 calc((100% - 32px) / 5); text-align: center; border-radius: 8px; border: 1.5px solid #d0d4da; background: #fff; padding: 10px 4px; cursor: pointer; font-family: inherit; transition: all .15s; }
.flexMonthChip:hover { border-color: var(--primary); }
.flexMonthChip.selected { background: var(--primary); color: #fff; border-color: var(--primary); }
.flexMonthChip .fmYear { color: #002349; margin-bottom: 4px; font-family: 'Barlow Condensed'; font-style: normal; font-weight: 300; font-size: 14px; line-height: 18px; }
.flexMonthChip.selected .fmYear { color: rgba(255,255,255,.7); }
.flexMonthChip .fmName { color: var(--primary); font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-size: 18px; line-height: 18px; }
.flexMonthChip.selected .fmName { color: #fff; }

/* Gäste Dropdown */
.gaesteDropdown { display: none; position: absolute; top: calc(100% + 8px); left: 0; background: #fff; border: 1px solid #d0d4da; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,.14); z-index: 9999; min-width: 280px; padding: 16px; }
.gaesteDropdown.open { display: block; }
.gdZimmerTitle { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-size: 22px; line-height: 24px; color: var(--primary); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.gdZimmerBlock { margin-bottom: 8px; }
.gdRow { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; }
.gdRowLabel { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 300; font-size: 20px; color: #002349; }
.gdRowLabel small { display: block; font-size: 18px; color: #888; margin-top: 1px; }
.gdCounter { display: flex; align-items: center; gap: 12px; }
.gdCountBtn { width: 28px; height: 28px; border-radius: 999px; border: none; background: #fff; cursor: pointer; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; color: var(--primary); line-height: 1; transition: background .15s, border-color .15s; }
.gdCountBtn:hover:not(:disabled) {  }
.gdCountBtn:disabled { opacity: .3; cursor: default; }
.gdCountVal { font-size: 16px; font-weight: 500; color: #0b1020; min-width: 16px; text-align: center; border-radius: 2px; border: 1px solid #d0d4da; padding: 4px; width: 30px; height: 30px; }
.gdCheckRow { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-top: 1px solid #f0f0f0; margin-top: 2px; }
.gdCheckLabel { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 300; font-size: 18px; color: #002349; }
.gdCheckbox { width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary); }
.gdAddRoom { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee; text-align: right; }
.gdAddRoomBtn { background: none; border: none; cursor: pointer; color: var(--primary); font-family: 'Barlow Condensed'; font-style: normal; font-weight: 300; font-size: 18px; line-height: 18px; }
.gdAddRoomBtn:hover { text-decoration: underline; }
.gdDoneBtn { width: 100%; margin-top: 12px; background: var(--primary); color: #fff; border: none; border-radius: 6px; padding: 10px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background .2s; }
.gdDoneBtn:hover { background: #003575; }

/* Inspiration */
.inspirationSection { margin-top: 60px; }
.inspirationLabel { color: #002349; font-family: 'Barlow Condensed'; font-style: normal; font-weight: 300; font-size: 30px; margin-bottom: 16px; }
.inspirationLabel span { font-weight: 500; }
.inspirationGrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.insp-card { position: relative; overflow: hidden; aspect-ratio: 4/5; background: #c8d8e8; cursor: pointer; }
.insp-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.insp-card:hover img { transform: scale(1.04); }
.insp-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 50%); background-color: rgba(86,85,86,.35); }
.insp-label { position: absolute;
  bottom: 30px;
  left: 30px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  font-size: 30px;
  line-height: 36px; 
}

/* Page Footer Strip — Typo/Größen lt. Vorlage (Original-BAWH-Optik):
   Zeile 1 groß & fett (Barlow Condensed 600), Zeile 2 gleiche Größe in 300,
   Zeile 3 hellgrau/leicht in 30px; Icons 64px, Labels 17px fett.
   Farben aufs Marken-Primärblau (--primary) vereinheitlicht.
   Positionierung/Layout unverändert (Kundenfreigabe). */
.pageFooter { padding: 40px 0; margin-top: 56px; border-top: 1px solid #e0e4ef; background: #fff; font-family: var(--font-family-sans-serif); }
.pageFooterInner { max-width: 1560px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; padding: 0 32px; }
.pfLeft { display: flex; flex-direction: column; gap: 4px; }
.pfTitle { font-family: var(--font-family-heading); font-size: 54px; line-height: 1.08; color: var(--primary); font-weight: 300; letter-spacing: 0.01em; }
.pfTitle strong { font-weight: 600; display: block; }
/* strong ist bereits display:block — das <br> im Markup erzeugte dadurch eine
   LEERZEILE zwischen den Titelzeilen (bei 54px riesig). Ausblenden statt
   PHP anfassen → Zeilen sitzen dicht übereinander wie in der Vorlage. */
.pfTitle br { display: none; }
.pfSub { margin-top: 10px; font-family: var(--font-family-heading); font-size: 30px; line-height: 1.15; color: #9aa3ad; font-weight: 300; }
.pfSub strong { font-weight: 500; color: #7f8a96; }
/* Badges: nehmen die restliche Breite ein und verteilen sich GLEICHMÄSSIG
   über die rechte Hälfte (Vorlage) — statt als Block am rechten Rand zu
   kleben. flex-basis sorgt dafür, dass sie bei wenig Platz sauber umbrechen. */
.pfBadges { display: flex; flex: 1 1 460px; justify-content: space-evenly; gap: 40px; align-items: flex-start; flex-wrap: wrap; margin-left: 24px; }
.pfBadge { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; min-width: 100px; }

/* Icon-Basis — nutzt icomoon Font */
.pfIcon,
.pfIcon .icon-recommendation {
  font-family: 'icomoon' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  color: var(--primary);
  font-size: 68px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Icon-Codes aus wellnesshotel.com */
.icon-piggy-bank::before    { content: "\e91d"; }
.icon-recommendation::before { content: "\e929"; }
.icon-check-circle::before  { content: "\e90a"; }

/* 98%-Badge: Text IM Kreis overlay */
.pfIcon98 { position: relative; width: 68px; height: 68px; }
.pfIcon98 .icon-recommendation { position: absolute; inset: 0; font-size: 68px; }
.pf98Text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-family-sans-serif);
  font-size: 17px; font-weight: 700;
  color: var(--primary); letter-spacing: -0.3px;
  z-index: 2;
}

.pfBadgeLabel { font-family: Barlow Condensed,sans-serif;
  font-size: 30px;
  font-weight: 500;
  color: var(--primary);
  line-height: 1.1;
  letter-spacing: 0.01em; }

/* Site Footer */
.siteFooter { border-top: 1px solid #e7eaf0; padding: 28px 40px; background: #fff; }
.siteFooterInner { max-width: 1560px; margin: 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: #94a3b8; }
.siteFooterInner a { color: #94a3b8; text-decoration: none; transition: color .2s; }
.siteFooterInner a:hover { color: var(--primary); }
.siteFooterSep { color: #d0d4da; }

/* ============================================================
   PAKETE PAGE
   ============================================================ */
.pkGrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; margin-bottom: 60px; }
.pkCard { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04); transition: transform .2s ease, box-shadow .2s ease; cursor: pointer; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.pkCard:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06); }
.pkCardImg { position: relative; height: 240px; background: #dde3ed; overflow: hidden; }
.pkCardImg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.pkCard:hover .pkCardImg img { transform: scale(1.04); }
.pkCardImgPlaceholder { width: 100%; height: 100%; background: linear-gradient(135deg,rgba(0,35,73,.12),rgba(239,138,125,.20)); display: flex; align-items: center; justify-content: center; font-size: 48px; color: rgba(0,35,73,.15); }
.pkCardLogo { position: absolute; bottom: 12px; left: 12px; background: #fff; border-radius: 8px; padding: 5px 10px; box-shadow: 0 2px 8px rgba(0,0,0,.15); max-height: 38px; max-width: 100px; display: flex; align-items: center; }
.pkCardLogo img { max-height: 28px; max-width: 90px; object-fit: contain; }
.pkCardNights { position: absolute; top: 12px; right: 12px; background: var(--primary); color: #fff; border-radius: 8px; padding: 5px 12px; font-size: 12px; font-weight: 700; font-family: Barlow Condensed,sans-serif; letter-spacing: .03em; }
.pkCardBody { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; gap: 0; }
.pkCardHotel { font-size: 12px; color: #9aa0ab; font-weight: 500; margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }
.pkCardTitle { font-size: 19px; font-weight: 700; color: var(--primary); margin-bottom: 5px; }
.pkCardStars { color: var(--accent); font-size: 13px; letter-spacing: 1px; margin-bottom: 8px; }
.pkCardMeta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pkCardMetaItem { font-size: 12px; color: #64748b; display: flex; align-items: center; gap: 4px; }
.pkCardExtras { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pkCardExtra { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--primary); background: rgba(0,35,73,.06); border: 1px solid rgba(0,35,73,.12); border-radius: 6px; padding: 3px 8px; }
.pkCardPriceRow { display: flex; align-items: flex-end; justify-content: space-between; border-top: 1px solid #eef0f3; padding-top: 14px; margin-top: auto; }
.pkCardPrice { font-size: 26px; font-weight: 800; color: var(--primary); line-height: 1; }
.pkCardPriceSub { font-size: 11px; color: #aab0bb; margin-top: 4px; }
.pkCardCta { background: var(--accent); color: #fff; border: none; padding: 10px 18px; border-radius: 0; font-size: 14px; font-weight: 600; cursor: pointer; font-family: Barlow Condensed,sans-serif; letter-spacing: .03em; transition: background .2s; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pkCardCta:hover { background: #e0705f; }
.pkCardDates { background: #f8fafc; border-top: 1px solid #eef0f3; padding: 9px 22px; font-size: 12px; color: #64748b; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.pkCardDates i { color: var(--primary); }
.pkEmpty { grid-column: 1/-1; text-align: center; padding: 80px 20px; color: #94a3b8; }
.pkEmpty i { font-size: 48px; display: block; margin-bottom: 16px; opacity: .4; }
.pkEmpty h3 { font-size: 20px; font-weight: 700; color: #334155; margin: 0 0 8px; }
.pkEmpty p { font-size: 14px; margin: 0 0 24px; }
.pkEmpty a { display: inline-flex; align-items: center; gap: 8px; background: var(--primary); color: #fff; padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 700; text-decoration: none; transition: background .2s; }
.pkEmpty a:hover { background: #003575; }
.pkSkeleton { background: linear-gradient(90deg,#f0f0f0 25%,#f8f8f8 50%,#f0f0f0 75%); background-size: 200% 100%; animation: skeleton 1.4s ease infinite; border-radius: 16px; height: 380px; }
@keyframes skeleton { 0%{background-position:200%} 100%{background-position:-200%} }
.rpWrap { max-width: 1480px; margin: 0 auto; padding: 90px 50px 0px 51px; }
.rpHero { margin: 0 0 0px; }
.rpHero h1 { font-family: 'Barlow Condensed',var(--font-family-sans-serif);
  font-style: normal;
  font-weight: 300;
  font-size: 70px;
  line-height: 70px;
  color: #002349;
}
.rpHero h1 strong { font-weight: 600; }
.rpHero p { font-family: 'Barlow Condensed',var(--font-family-sans-serif);
  font-style: normal;
  font-weight: 300;
  font-size: 48px;
  line-height: 53px;
  color: #808080;
  margin: 0;
    margin-top: 0px;
    margin-bottom: 0px;
  margin-bottom: 0px;
  margin-top: 0px; }

/* ============================================================
   REISEPLANER – FILTER BAR (Desktop)
   ============================================================ */
.rpFilterBar { position: fixed; top: 100px; left: 0; right: 0; z-index: 9998; background: #F7F7F7; padding: 0 28px; }
.rpFilterInner { max-width: 1560px; margin: 0 auto; display: flex; align-items: center; gap: 20px; height: 70px; padding: 0 30px; }

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */

/* ── 860px: Hamburger ein, Desktop-Nav aus ── */
@media (max-width: 860px) {
  body { padding-top: 70px; }
  .nav { height: 70px; padding: 0 16px; }
  .navMBar { grid-template-columns: auto 1fr auto; padding: 10px 0; }
  .menu { display: none; }
  .navRight .navBtn { display: none; }
  .hamburger { display: flex; }
  .brand { justify-self: center; top: 0; }
  .logoCircle img { width: 56px; height: 56px; }

  /* ── HOTEL PANEL BACKDROP ── */
  .hotelPanelBack { top: 70px; }

  /* ── REISEPLANER MOBILE ── */
  .rpFilterBar { top: 90px; }
  .rpWrap { padding: 60px 16px 40px; }
  .rpFilterInner {
    overflow-x: auto;
    overflow-y: visible;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 12px;
    gap: 8px;
    height: 60px;
  }
  .rpFilterInner::-webkit-scrollbar { display: none; }
  /* Popovers hängen jetzt am body (Portal) → position:fixed funktioniert immer */
  .rpFilterPopover {
    position: fixed !important;
    top: 130px !important;
    left: 0 !important;
    right: 0 !important;
    min-width: unset !important;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 0 0 16px 16px;
    border-left: none;
    border-right: none;
    z-index: 10000 !important;
  }
  /* Kategorie-Tag Popover */
  .rpTagPopover {
    position: fixed !important;
    top: 130px !important;
    left: 0 !important;
    right: 0 !important;
    min-width: unset !important;
    border-radius: 0 0 16px 16px;
    border-left: none;
    border-right: none;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 10000 !important;
  }
  /* Kalender: nur 1 Monat auf Mobile */
  .rpKalDropdown .calWrap { grid-template-columns: 1fr !important; }
  .rpKalDropdown .calWrap .month:last-child { display: none; }

  .rpHero h1 { font-size: 32px; line-height: 40px; }
  .rpHero p  { font-size: 18px; margin-bottom: 0px; line-height: 28px; margin-top: 0px; }
  .rpHotelGrid { grid-template-columns: 1fr !important; }
  .rpHeroRow { flex-direction: column; padding: 10px 0px 0px 0px; gap: 8px; }
  .rpAnniTeaser { min-width: unset; max-width: 100%; position: relative; top: 30px; right: auto; width: 100%; z-index: auto; }

  /* Angebotsübersicht */
  .rpAngebotsHotelRow  { grid-template-columns: 1fr !important; }
  .rpAngebotsRoomRow   { grid-template-columns: 1fr !important; }
  .rpAngebotsActions   { border-top: 1px solid #eef0f3; }
  .rpAngebotsRoomImg   { height: 100px; }
  .rpAngebotsLayout    { grid-template-columns: 1fr !important; }

  /* Hotel Panel */
  .hpTopRow { grid-template-columns: 1fr !important; }
  .hpImgCol { border-radius: 2px; }
  .hpImg    { min-height: 200px; }

  /* Index */
  .pageWrap    { padding: 0 16px; }
  .hero h1     { font-size: 36px; }
  .hero p      { font-size: 22px; }
  .categoryBar { gap: 20px; }
  .catChip     { width: 72px; flex: 0 0 72px; }
  .catIconWrap { width: 72px; height: 72px; }
  .reisedetailsBar { flex-direction: column; align-items: stretch; max-width: 100%; }
  .rdCell      { width: 100%; flex: none; }
  .rdBtn       { width: 100%; margin-left: 0; justify-content: center; height: 52px; font-size: 16px; }
  .kalDropdown { position: fixed; top: 70px; left: 0; right: 0; min-width: unset; border-radius: 0 0 12px 12px; max-height: 85vh; overflow-y: auto; border-left: none; border-right: none; }
  .kalDropdown .calWrap { grid-template-columns: 1fr !important; }
  .gaesteDropdown { position: fixed; top: 70px; left: 0; right: 0; min-width: unset; border-radius: 0 0 12px 12px; }
  .inspirationGrid { grid-template-columns: repeat(2,1fr); }
  .pageFooter  { padding: 28px 0; }
  .pfTitle     { font-size: 34px; }
  .pfSub       { font-size: 22px; }
  .pfBadges    { gap: 32px; }
  .pfBadgeIcon { font-size: 32px; }
  .pfIcon, .pfIcon .icon-recommendation { font-size: 48px; }
  .pfIcon98    { width: 48px; height: 48px; }
  .pf98Text    { font-size: 13px; }
  .pfBadgeLabel{ font-size: 14px; }

  /* Pakete */
  .pkGrid { grid-template-columns: repeat(2,1fr); }

  /* Mobile Menu / Footer */
  .mobileMenu  { top: 70px; }
  .siteFooter  { padding: 20px 20px; }
  .siteFooterInner { justify-content: center; text-align: center; }
}

@media (max-width: 640px) {
  .pkGrid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero h1     { font-size: 30px; }
  .hero p      { font-size: 18px; }
  .catChip     { width: 62px; flex: 0 0 62px; }
  .catIconWrap { width: 62px; height: 62px; }
}

/* ── FILTER POPOVER BACKDROP (Mobile) ──
   Unsichtbares Element über dem Content, schließt Popover bei Tap außerhalb.
   Erscheint nur wenn ein Popover offen ist. */
.rpPopBackdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999; /* unter Popover (10000), über Content */
  background: transparent;
}
.rpPopBackdrop.open { display: block; }


/* ============================================================
   ANGEBOT PAGE STYLES
   ============================================================ */
/* ── WRAPPER ── */
.agWrap{max-width:1480px;margin:0 auto;padding:151px 0px 60px;}

/* ── TITEL ── */
.agTitle{ color: #002349;
  font-family: Barlow Condensed,sans-serif;
  margin: 0 0 6px;
  font-style: normal;
  font-weight: 300;
  font-size: 48px;
  line-height: 53px; }
.agTitle strong{font-weight:500;}
.agSubRow{display:flex;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
.agSub{ color: #002349;
  font-style: normal;
  font-weight: 300;
  font-size: 20px;
  line-height: 160%; }
.agIcons{display:flex;gap:10px;}
.agIconBtn{width:36px;height:36px;border-radius:50%;border:1px solid #e2e8f0;background:#fff;display:flex;align-items:center;justify-content:center;color:#334155;cursor:pointer;font-size:14px;transition:all .15s;}
.agIconBtn:hover{background:#002349;color:#fff;border-color:#002349;}

/* Share Overlay Div */
.agShareOverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(3px);z-index:8000;align-items:center;justify-content:center;padding:24px;}
.agShareOverlay.open{display:flex;}
.agShareBox{background:#fff;border-radius:16px;padding:32px;max-width:460px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.18);animation:modalIn .25s cubic-bezier(.22,.61,.36,1);}
.agShareBoxTitle{font-size:20px;font-weight:800;color:#002349;margin-bottom:6px;font-family:Barlow Condensed,sans-serif;}
.agShareBoxSub{font-size:13px;color:#64748b;margin-bottom:24px;}
.agShareBoxClose{float:right;background:none;border:none;font-size:22px;color:#94a3b8;cursor:pointer;line-height:1;margin-top:-4px;}
.agShareBoxClose:hover{color:#002349;}
/* Toggle */
.agToggleRow{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border:1px solid #e2e8f0;border-radius:10px;margin-bottom:16px;background:#f8fafc;}
.agToggleInfo{display:flex;flex-direction:column;gap:2px;}
.agToggleLabel{font-size:14px;font-weight:700;color:#002349;}
.agToggleSub{font-size:12px;color:#64748b;}
.agToggleSwitch{position:relative;width:44px;height:24px;flex-shrink:0;}
.agToggleSwitch input{opacity:0;width:0;height:0;}
.agToggleSlider{position:absolute;inset:0;background:#cbd5e1;border-radius:99px;cursor:pointer;transition:background .2s;}
.agToggleSlider::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.agToggleSwitch input:checked + .agToggleSlider{background:#10b981;}
.agToggleSwitch input:checked + .agToggleSlider::after{transform:translateX(20px);}
/* Link Box */
.agShareLinkBox{display:flex;align-items:center;gap:8px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:8px;padding:10px 14px;margin-bottom:16px;}
.agShareLinkText{flex:1;font-size:12px;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:monospace;}
.agShareLinkCopy{background:#002349;color:#fff;border:none;border-radius:6px;padding:6px 14px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .2s;white-space:nowrap;}
.agShareLinkCopy:hover{background:#003575;}
.agShareSpinner{display:none;align-items:center;gap:8px;font-size:13px;color:#64748b;margin-bottom:16px;}
.agShareSpinner.show{display:flex;}
.agShareSpinner i{animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── LAYOUT ── */
.agLayout{display:grid;grid-template-columns:90px 1fr;gap:10px;align-items:start;}

/* ── SIDEBAR ── */
.agSidebar{display:flex;flex-direction:column;gap:2px;padding-top:4px;}
.agSidebarItem{font-size:17px;color:#64748b;line-height:17px; font-weight:300;}
.agSidebarItem.bold{font-weight:400;color:#002349;}

/* ── KARTE ── */
.agCard{background:#fff;border:1px solid #e2e8f0;box-shadow:0 2px 16px rgba(0,0,0,.07);overflow:hidden;}
.agHotelRow{display:grid;grid-template-columns:300px 1fr 165px;min-height:300px;}

/* Bild */
.agImgWrap{position:relative;overflow:hidden;background:#dde3ed;}
.agImgSlider{display:flex;height:100%;transition:transform .4s ease;}
.agImgSlide{min-width:100%;height:100%;min-height:300px;background-size:cover;background-position:center;flex-shrink:0;}
.agImgArrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.3);border:none;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .15s;z-index:2;}
.agImgArrow:hover{background:rgba(0,0,0,.6);}
.agImgArrow.left{left:10px;}
.agImgArrow.right{right:10px;}
.agImgDots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:5px;}
.agImgDot{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.55);cursor:pointer;transition:all .2s;}
.agImgDot.active{background:#fff;width:16px;}
.agLocBadge{ position: absolute;
  top: 0;
  left: 0;
  background: rgba(255,255,255,.92);
  color: #334155;
  padding: 4px 9px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 18px; }

/* Hotel Info */
.agHotelInfo{padding:20px 22px;display:flex;flex-direction:column;border-right:1px solid #eef0f3;}
.agHotelName{ color: #002349;
  margin: 0 0 4px;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-size: 30px;
  line-height: 53px; }
.agStars{color:#adacad;font-size:18px;letter-spacing:1px;margin-bottom:4px;}
.agLoc{ color: #b7b7b7;
  margin-bottom: 12px;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 19px; }
.agBadge{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.agBadgeCircle{width:48px;height:48px;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;}
.agBadgeCircle svg{position:absolute;top:0;left:0;width:100%;height:100%;transform:rotate(260deg);}
.agBadgeCircle svg circle{fill:none;stroke-width:2.5;stroke-linecap:round;}
.agBadgeCircle svg circle.bg{stroke:#002349;stroke-dasharray:110 125.7;stroke-linecap:round;}
.agBadgeCircleText{font-size:14px;font-weight:800;color:#002349;position:relative;z-index:1;}
.agBadgeLabel{font-size:16px;font-weight:400;color:#002349;}
.agBadgeMore{ cursor: pointer;
  font-size: 13px;
  color: #888;
  text-decoration: none;
  display: block;
  margin-top: 2px; }
.agHighlights{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;flex:1;}
.agHighlights li{font-size:13px;color:#334155;font-weight:500;display:flex;align-items:flex-start;gap:7px;line-height:1.45;}
.agHighlights li::before{content:"\2713";color:#ccc;font-weight:900;font-size:12px;flex-shrink:0;margin-top:1px;}

/* Aktionen rechts */
.agActions{padding:20px 16px;display:flex;flex-direction:column;gap:10px;min-width:160px;}
.agActionBtn{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;font-size:13px;font-weight:600;cursor:pointer;border:none;width:100%;font-family:inherit;transition:all .15s;gap:6px;white-space:nowrap;}
.agActionBtn .rpABArrow{ display:inline-block; transition:transform .2s ease; }
.agActionBtn:hover .rpABArrow{ transform:translateX(4px); }
.agActionBtn.primary{background:#002349;color:#fff;}
.agActionBtn.primary:hover{background:#003575;}
.agActionBtn.secondary{background:#fff;color:#002349;border:1px solid #002349;}
.agActionBtn.secondary:hover{background:#f0f4f9;}

/* Zimmer */
.agRoomRow{display:grid;grid-template-columns:145px 1fr auto;border-top:1px solid #eef0f3;align-items:center;}
.agRoomImg{height:140px;background-size:cover;background-position:center;background-color:#dde3ed;}
.agRoomInfo{padding:16px 20px;}
.agRoomName{font-size:18px;font-weight:700;color:#002349;margin-bottom:5px;font-family:Barlow Condensed,sans-serif;}
.agRoomMeta{font-size:13px;color:#64748b;display:flex;flex-direction:column;gap:2px;}
.agRoomPrice{padding:16px 20px;text-align:right;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:8px;}
.agRoomPriceNum{font-size:20px;font-weight:800;color:#002349;line-height:1;}
.agRoomPricePP{font-size:13px;color:#888;}
.agBookBtn{display:inline-flex;align-items:center;gap:6px;background:#ef8a7d;color:#fff;border:none;padding:12px 20px;font-size:16px;font-weight:600;cursor:pointer;font-family:Barlow Condensed,sans-serif;letter-spacing:.03em;transition:background .2s;}
.agBookBtn .rpABArrow{ display:inline-block; transition:transform .2s ease; }
.agBookBtn:hover .rpABArrow{ transform:translateX(4px); }
.agBookBtn:hover{background:#e0705f;}

/* Extras Sektion */
.agExtrasSection{padding:20px 24px;border-top:1px solid #eef0f3;}
.agExtrasTitle{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:#94a3b8;margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.agExtrasTitle::after{content:'';flex:1;height:1px;background:#eef0f3;}
.agExtrasList{display:flex;flex-direction:column;gap:8px;}
.agExtraItem{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;background:#f0fdf4;border:1px solid #bbf7d0;}
.agExtraItemIcon{width:28px;height:28px;border-radius:7px;background:#10b981;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;}
.agExtraItemName{font-size:13px;font-weight:600;color:#002349;flex:1;}
.agExtraItemPrice{font-size:12px;font-weight:700;color:#10b981;}

/* Share Box */
.agShareSection{padding:16px 24px;border-top:1px solid #eef0f3;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.agShareLabel{font-size:12px;color:#64748b;font-weight:600;}
.agShareBtns{display:flex;gap:8px;}
.agShareBtn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:none;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;}
.agShareBtn.primary{background:#002349;color:#fff;}
.agShareBtn.primary:hover{background:#003575;}
.agShareBtn.secondary{background:#f1f5f9;color:#334155;border:1px solid #e2e8f0;}
.agShareBtn.secondary:hover{background:#e2e8f0;}

/* Error */
.agError{max-width:600px;margin:60px auto;background:#fff;border-radius:16px;padding:48px;text-align:center;box-shadow:0 8px 40px rgba(0,0,0,.08);}
.agErrorIcon{width:72px;height:72px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 20px;}
.agErrorIcon.expired{background:#fef3c7;color:#d97706;}
.agErrorIcon.notfound{background:#fee2e2;color:#dc2626;}
.agErrorTitle{font-size:22px;font-weight:800;color:#0b1020;margin-bottom:10px;}
.agErrorSub{font-size:14px;color:#64748b;line-height:1.7;margin-bottom:28px;}
.agErrorBtn{display:inline-flex;align-items:center;gap:8px;background:#002349;color:#fff;padding:13px 26px;border-radius:10px;font-size:14px;font-weight:700;text-decoration:none;transition:background .2s;}
.agErrorBtn:hover{background:#003575;}

/* Modal */
.agModalBack{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:9999;align-items:center;justify-content:center;padding:24px;}
.agModalBack.open{display:flex;}
.agModal{background:#fff;border-radius:20px;padding:40px;max-width:500px;width:100%;text-align:center;box-shadow:0 24px 80px rgba(0,0,0,.2);animation:modalIn .3s cubic-bezier(.22,.61,.36,1);}
@keyframes modalIn{from{opacity:0;transform:scale(.94) translateY(16px)}to{opacity:1;transform:none}}
.agModalIcon{width:72px;height:72px;border-radius:20px;background:#fef3c7;color:#d97706;display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 20px;}
.agModalTitle{font-size:22px;font-weight:800;color:#002349;margin-bottom:10px;}
.agModalSub{font-size:14px;color:#64748b;line-height:1.7;margin-bottom:24px;}
.agModalBtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.agModalBtn{display:inline-flex;align-items:center;gap:6px;padding:12px 22px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;border:none;font-family:inherit;text-decoration:none;transition:background .2s;}
.agModalBtn.primary{background:#002349;color:#fff;}
.agModalBtn.primary:hover{background:#003575;}
.agModalBtn.ghost{background:#f1f5f9;color:#334155;}
.agModalBtn.ghost:hover{background:#e2e8f0;}

/* Toast */
.agToast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(8px);background:#002349;color:#fff;padding:10px 20px;border-radius:10px;font-size:13px;font-weight:600;z-index:99999;opacity:0;transition:all .2s;pointer-events:none;white-space:nowrap;}
.agToast.show{opacity:1;transform:translateX(-50%) translateY(0);}
/* ── HOTEL PANEL MODAL (kopiert aus Reiseplaner) ── */
.hotelPanelBack{
  display:none !important;
  position:fixed !important;
  top:0 !important; /* Vollbild-Schleier: Header + Filter werden verdeckt */
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:10000 !important;
  background:rgba(0,0,0,.50) !important;
  backdrop-filter:blur(4px) !important;
}
.hotelPanelBack::before{ display:none !important; } /* travel.css ::before deaktivieren */
.hotelPanelBack.open{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:24px !important;
}
/* Chat offen: Modal nach links verschieben, Breite unverändert */
.hotelPanelBack.chatIsOpen .hotelPanel{
  margin-right:500px !important;
}
/* Chat geschlossen: Modal breiter (max 1200px) */
.hotelPanelBack:not(.chatIsOpen) .hotelPanel{
  max-width:1200px !important;
  width:100% !important;
}

/* travel.css .hotelPanel überschreiben */
.hotelPanelBack .hotelPanel,
.hotelPanelBack.open .hotelPanel {
  /* Position zurücksetzen */
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  height: calc(100vh - 80px - 40px);
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #fff !important;
  border-radius: 0px !important;
  box-shadow: 0 24px 80px rgba(2,6,23,.28) !important;
  border: none !important;
  display: block !important;
  flex-direction: unset !important;
  opacity: 0;
  scale: 0.94;
  translate: 0 16px;
  transition: opacity .3s cubic-bezier(.22,.61,.36,1), scale .3s cubic-bezier(.22,.61,.36,1), translate .3s cubic-bezier(.22,.61,.36,1);
  padding: 20px;
}
.hotelPanelBack.open .hotelPanel{
  opacity:1 !important;
  scale:1 !important;
  translate:0 0 !important;
}

/* Bild-Spalte */
.hpImgCol{
  overflow:hidden;
  position:relative;
}
/* Carousel Slider */
.hpImgSlider{
  display:flex; height:100%; transition:transform .4s ease;
}
.hpImg{
  min-width:100%; height:100%; min-height:320px;
  background-size:cover; background-position:center; flex-shrink:0;
}
/* Pfeile */
.hpImgArrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border-radius:0;
  background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:300; color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
  z-index:2; opacity:1;
}
.hpImgArrow.left{ left:8px; }
.hpImgArrow.right{ right:8px; }
.hpImgArrow:hover{ color:#fff; transform:translateY(-50%) scale(1.2); }
/* Dots */
.hpImgDots{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; gap:5px; z-index:2;
}
.hpImgDot{
  width:6px; height:6px; border-radius:999px;
  background:rgba(255,255,255,.55); cursor:pointer; transition:all .2s;
}
.hpImgDot.active{ background:#fff; width:14px; }

/* ===== Sticky Kopfleiste (Name + Thumbnail + X immer sichtbar) ===== */
.hpStickyBar{
  position:sticky;
  top:-20px;                 /* den 20px padding-top des Panels ausgleichen */
  z-index:30;
  display:flex;
  align-items:center;
  gap:14px;
  /* den 20px-Innenabstand des Panels nach links/rechts/oben überspannen */
  margin:-20px -20px 12px;
  padding:12px 20px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid #eef0f3;
  transition:box-shadow .25s ease;
}
/* Gescrollt: weicher Schatten nach unten → Leiste klar vom Inhalt getrennt */
.hotelPanel.hpScrolled .hpStickyBar{
  box-shadow:0 6px 16px -6px rgba(0,35,73,.22);
}
.hpStickyThumb{
  width:0; height:44px; flex:0 0 auto;
  border-radius:4px;
  background-size:cover; background-position:center; background-color:#dde3ed;
  opacity:0;
  overflow:hidden;
  transition:width .3s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}
/* Mittelbereich: Datum-Info und Name am selben Platz (überblenden) */
.hpStickyCenter{
  flex:1; min-width:0;
  display:grid;            /* Info + Name übereinander stapeln */
}
.hpStickyCenter > .hpStickyInfo,
.hpStickyCenter > .hpStickyName{
  grid-area:1 / 1;         /* beide in dieselbe Zelle */
}
.hpStickyInfo{
  min-width:0;
  font-size:20px; font-weight:300; color:#64748b;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:1;               /* ungescrollt sichtbar */
  transition:opacity .3s ease;
}
.hpStickyName{
  min-width:0;
  font-size:20px; font-weight:500; color:#002349;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:0;               /* Name in der Leiste nur beim Scrollen sichtbar */
  transition:opacity .3s ease;
  pointer-events:none;     /* ungescrollt liegt der (transparente) Name über dem Datum →
                              darf dessen „ändern"-Klick nicht abfangen */
}
/* gescrollter Zustand: Thumbnail einblenden */
.hotelPanel.hpScrolled .hpStickyThumb{
  width:60px; opacity:1;
}
/* gescrollter Zustand: Datum-Info aus, Name ein */
.hotelPanel.hpScrolled .hpStickyInfo{
  opacity:0;
  pointer-events:none;     /* gescrollt unsichtbar → keine versehentlichen Datums-Klicks */
}
/* Belegung klein unter dem Datum (oben links). Beim Scrollen KOMPLETT raus (display:none statt
   nur opacity) → kein Resthöhen-Platz, damit der Hotelname sauber mittig steht. Rechts sichtbar. */
.hpStickyInfoGuests{
  display:block;
  font-size:14px; font-weight:300; color:#002349;
  line-height:1.2; margin-top:1px;
}
.hotelPanel.hpScrolled .hpStickyInfoGuests{ display:none; }
.hotelPanel.hpScrolled .hpStickyName{
  opacity:1;
}

/* Rechte Sticky-Info: Datum (oben) + Belegung (darunter). Blendet SYNCHRON mit dem Namen ein
   (gleicher .hpScrolled-Trigger). Wie .hpStickyThumb von Breite 0 auf, daher kein Platzverbrauch
   im ungescrollten Zustand und keine Überlappung mit der Mitte. */
.hpStickyRight{
  flex:0 1 auto; min-width:0;
  max-width:0; opacity:0; overflow:hidden;
  text-align:right; line-height:1.2;
  transition:max-width .3s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}
.hotelPanel.hpScrolled .hpStickyRight{ max-width:46%; opacity:1; }
.hpStickyRightDate{
  font-size:18px; font-weight:300; color:#002349;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hpStickyRightGuests{
  font-size:14px; font-weight:300; color:#002349;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-top:1px;
}
@media (max-width:640px){ .hpStickyRight{ display:none; } }

/* X in der sticky Leiste: normal im Flex (nicht mehr absolut) */
.hpStickyBar .hotelPanelClose{
  position:static !important;
  top:auto !important; right:auto !important;
  flex:0 0 auto;
  margin-left:auto;
}

/* Name / Sterne / Location */
.hpNameWrap{ display:flex; flex-direction:column; gap:4px; }
.hpName{ margin: 0 0 4px; font-size:30px; font-weight:500; color:#002349; }
.hpStarsRow{ color: #adacad; font-size: 24px; letter-spacing: 1px; }
.hpLoc{ font-size:12px; color:#888; font-weight:400; }

/* Kontakt-/Info-Zeile im Hotel-Detail (Task 5) */
.hpContact{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:8px; }
.hpContactLink{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:var(--primary,#002349); text-decoration:none;
  font-weight:500; line-height:1.2;
}
.hpContactLink i{ color:var(--accent,#ef8a7d); font-size:13px; }
a.hpContactLink:hover{ text-decoration:underline; }
.hpContactInfo{ color:var(--muted,#64748b); font-weight:400; cursor:default; }
.hpContactInfo i{ color:var(--muted,#64748b); }

/* Weiterempfehlung Badge */
.hpBadgeRow{ display:flex; padding: 14px 0px; }
.hpBadge{ display:flex; align-items:center; gap:10px; }
.hpBadgeCircle{
  width:52px; height:52px; flex-shrink:0;
  position:relative; display:flex; align-items:center; justify-content:center;
}
.hpBadgeCircle svg{
  position:absolute; top:0; left:0; width:100%; height:100%;
  transform:rotate(260deg); /* Lücke oben links */
}
.hpBadgeCircle svg circle{
  fill:none;
  stroke:#002349;
  stroke-width:2.5;
  stroke-linecap:round;
  /* r=20, Umfang=125.7 — 92% gefüllt, kleine Lücke unten */
  stroke-dasharray: 115 125.7;
}
.hpBadgeCircleText{
  font-size:16px; color:#002349;
  position:relative; z-index:1; line-height:1;
}
.hpBadgeLabel{ font-size:16px; font-weight:400; color:#002349; }
.hpBadgeMore{ font-size:13px; color:#888; text-decoration:none; display:block; margin-top:2px; }
.hpBadgeMore:hover{ color:#002349; }

/* Sections */
.hpSection{ display:flex; flex-direction:column; gap:8px; padding-right: 60px; }
.hpSectionFull{ padding:32px 0px 0; }
.hpSectionTitle{
  color: #002349;
  letter-spacing: 0.0em;
  padding-bottom: 7px;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
  line-height: 24px;
}

/* Highlights Liste */
.hpHighlights{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:6px; padding-top: 5px;
}
.hpHighlights li{
  font-size:14px; color:#334155; font-weight:500;
  display:flex; align-items:flex-start; gap:7px; line-height:1.45;
}
.hpHighlights li::before{
  content:"\2713"; color:#ccc; font-weight:900; font-size:13px;
  flex-shrink:0; margin-top:1px;
}

/* Preis + Buchen */
.hpPrice{ font-size:20px; font-weight:900; color:#0b1f3a; line-height:1; }
.hpBookBtn{
  background: #ef8a7d;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s;
  font-family: Barlow Condensed,sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 26px;
  line-height: 26px;
}
.hpBookBtn:hover{ background:#e0705f; }

/* ============================================================
   ANGEBOT PAGE MOBILE
   ============================================================ */
@media (max-width: 860px) {
  .agWrap { padding: 90px 16px 40px !important; }
  .agTitle { font-size: 32px !important; }
  .agSub { font-size: 14px !important; }
  .agCard .agCardTop { grid-template-columns: 1fr !important; }
  .agHotelRow { grid-template-columns: 1fr !important; }
  .agImgWrap { min-height: 240px !important; }
  .agRoomRow { grid-template-columns: 1fr !important; }
  .agRoomImg { height: 180px !important; }
  .agActions { border-top: 1px solid #eef0f3; }
  .agHighlights { grid-template-columns: 1fr !important; }
  .agFactGrid { grid-template-columns: repeat(2,1fr) !important; }
  .agBreadCrumbs { flex-wrap: wrap; gap: 6px; font-size: 12px; }
  .agShareOverlayBox { width: 92vw !important; max-width: 92vw !important; }
}
@media (max-width: 480px) {
  .agFactGrid { grid-template-columns: 1fr !important; }
  .agTitle { font-size: 26px !important; }
}

.rpCardPriceAnfrage .rpCardPrice {
  font-size: 16px;
  letter-spacing: 0.04em;
  opacity: 0.5;
}
.rpCardPriceAnfrage .rpCardPriceSub {
  opacity: 0.5;
}

/* ============================================================
   REISEPLANER-BAWH PAGE OVERRIDES (highlights ellipsis + toggle)
   ehemals inline <style> in reiseplaner-bawh.php
   ============================================================ */
/* ── Highlights: 3 Punkte, einzeilig abgeschnitten + mehr/weniger ── */

/* li MUSS display:block sein damit text-overflow funktioniert */
.rpAngebotsHighlights li,
.hpHighlights li {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0;
}

/* ::before bleibt inline */
.rpAngebotsHighlights li::before,
.hpHighlights li::before {
  display: inline !important;
  margin-right: 6px;
}

/* Versteckte Punkte (ab Punkt 4) */
.rpHlHidden { display: none !important; }
.rpAngebotsHighlights li.rpHlHidden { display: none !important; }
.hpHighlights li.rpHlHidden { display: none !important; }

/* Expanded: alle Punkte sichtbar, voller Text */
.rpHlExpanded li {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.rpHlExpanded .rpHlHidden {
  display: block !important;
}

/* mehr/weniger Button */
.rpHlToggleRow {
  display: flex;
  margin-top: 10px;
}
.rpHlToggleBtn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #002349;
  font-weight: 400;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color .15s;
  padding: 5px 10px;
  border: 1px solid #ccc;
}
.rpHlToggleBtn:hover { color: #ef8a7d; }
/* ============================================================
   REQUEST-MODE / FALLBACK-PREIS UI
   Neu hinzugefügt: Mai 2026
   ============================================================ */

/* ── Sektion-Header (Direkt buchbar / Auf Anfrage / Nicht passend) ── */
.rpSectionHeader{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin:32px 0 14px;
  padding:0 4px;
  flex-wrap:wrap;
}
.rpSectionHeader:first-child{ margin-top:8px; }

.rpSectionHeader h3{
  margin:0;
  font-size:20px;
  font-weight:500;
  color:var(--primary, #002349);
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing:.2px;
}
.rpSectionHeader h3 i{
  font-size:18px;
  width:24px;
  text-align:center;
}

.rpSectionHeader .rpSectionCount{
  font-size:14px;
  font-weight:500;
  color:#64748b;
  background:#f1f5f9;
  padding:3px 10px;
  border-radius:999px;
}

.rpSectionHeader .rpSectionDesc{
  flex-basis:100%;
  margin:6px 0 0;
  font-size:13.5px;
  color:#64748b;
  font-weight:500;
  line-height:1.5;
}

/* Direkt buchbar = primary (blau) */
.rpSectionBook h3 i{ color:var(--good, #16a34a); }

/* Auf Anfrage = accent (orange) */
.rpSectionRequest h3 i{ color:var(--accent, #ef8a7d); }
.rpSectionRequest h3{ color:var(--primary, #002349); }

/* Nicht passend = grau */
.rpSectionDimmed h3{ color:#94a3b8; }
.rpSectionDimmed h3 i{ color:#94a3b8; }

/* Keine Verfügbarkeit im Zeitraum = amber (anklickbar, Anfrage möglich) */
.rpSectionNoAvail h3{ color:var(--primary, #002349); }
.rpSectionNoAvail h3 i{ color:#d97706; }

/* ── Request-Karte (Hotel ohne echte Preisdaten) ── */
.rpCard.rpCardRequest{
  /* dezenter oranger Akzent links als Strip */
  position:relative;
}
.rpCard.rpCardRequest::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  /* background:linear-gradient(90deg, var(--accent, #ef8a7d), #f5b8ad);  */
  z-index:5;
  pointer-events:none;
  border-top-left-radius:inherit;
  border-top-right-radius:inherit;
}

/* Request-Badge im Bild oben rechts */
.rpCardRequestBadge{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  background:var(--primary, #002349);
  color: #fff;
  padding: 5px 11px;
  font-size: 13.5px;
  font-weight: 400;
  border-radius: 999px;
  letter-spacing: .4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(239,138,125,.35);
}
.rpCardRequestBadge i{ font-size:11px; }

/* Keine-Verfügbarkeit-Badge im Bild oben rechts (amber, Karte bleibt anklickbar) */
.rpCardNoAvailBadge{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  background:#d97706;
  color: #fff;
  padding: 5px 11px;
  font-size: 13.5px;
  font-weight: 400;
  border-radius: 999px;
  letter-spacing: .4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(239,138,125,.35);
}
.rpCardNoAvailBadge i{ font-size:11px; }

/* Preisblock im Request-Modus: oranger Hintergrund-Tint */
.rpCardPriceBlock.rpCardPriceRequest{
  /* Kein Hintergrund, aber Sub-Text bekommt accent-Farbe */
}
.rpCardPriceBlock.rpCardPriceRequest .rpCardPriceSub{
  color:var(--accent, #ef8a7d);
  font-weight:700;
}

/* CTA-Button im Request-Modus: orange statt blau */
.rpCardCta.rpCardCtaRequest{
  background:var(--accent, #ef8a7d);
  border-color:var(--accent, #ef8a7d);
  color:#fff;
}
.rpCardCta.rpCardCtaRequest:hover{
  background:#e3786a;
  border-color:#e3786a;
}

/* ── angebot.php: Buttons im Request-Modus ── */
.agBookBtn.agBookBtnRequest{
  background:var(--accent, #ef8a7d) !important;
  border-color:var(--accent, #ef8a7d) !important;
  color:#fff !important;
}
.agBookBtn.agBookBtnRequest:hover{
  background:#e3786a !important;
  border-color:#e3786a !important;
}

.agShareBtn.primary.agShareBtnRequest{
  background:var(--accent, #ef8a7d) !important;
  border-color:var(--accent, #ef8a7d) !important;
  color:#fff !important;
}
.agShareBtn.primary.agShareBtnRequest:hover{
  background:#e3786a !important;
  border-color:#e3786a !important;
}

/* Modal-Icon im Request-Modus */
.agModalIcon.agModalIconRequest{
  background:rgba(239,138,125,.12);
  color:var(--accent, #ef8a7d);
}

/* ── Hotel-Panel (Modal): "jetzt wählen"-Button im Request-Modus ── */
.hpBookBtn.hpBookBtnRequest{
  background:var(--accent, #ef8a7d) !important;
  color:#fff !important;
}
.hpBookBtn.hpBookBtnRequest:hover{
  background:#e3786a !important;
}

/* ── Responsive ── */
@media (max-width: 720px){
  .rpSectionHeader{ margin-top:24px; }
  .rpSectionHeader h3{ font-size:17px; }
  .rpSectionHeader .rpSectionDesc{ font-size:12.5px; }
  .rpCardRequestBadge,
  .rpCardNoAvailBadge{
    font-size:10.5px;
    padding:4px 9px;
    top:10px;
    right:10px;
  }
}

/* ── Summary-Banner ("Ihr Wellnesstrip") Button im Request-Modus ── */
.rpAngebotsBookBtn.rpAngebotsBookBtnRequest{
  background:var(--accent, #ef8a7d) !important;
  border-color:var(--accent, #ef8a7d) !important;
  color:#fff !important;
}
.rpAngebotsBookBtn.rpAngebotsBookBtnRequest:hover{
  background:#e3786a !important;
  border-color:#e3786a !important;
}
.rpAngebotsBookBtn.rpAngebotsBookBtnRequest i{
  margin-right:6px;
}

/* ════════════════════════════════════════════════════════════
   ZIMMERAUSWAHL IM MODAL (nur Book-Modus)
   Greift NUR über book-spezifische Klassen/Strukturen.
   Request-Modus + bestehendes Design bleiben unberührt.
   ════════════════════════════════════════════════════════════ */

/* Header umordnen: Dropdown links, Preis rechts (Button per JS ausgeblendet) */
.hpBookRow.hpBookRowBook{
  align-items:center;
  justify-content:flex-start;
  gap:2px;
}
.hpBookRow.hpBookRowBook .hpPriceBlock{
  margin-left:auto;       /* schiebt den Preis nach rechts */
  text-align:right;
  padding-right:10px;
}

/* ── Custom Zimmer-Dropdown (zweizeilig) ── */
.hpRoomSelect{ position:relative; flex:0 0 auto; min-width:260px; }
/* Gewählter Slot: Dropdown links (dehnt sich) + kompakter „Auswahl aufheben" rechts daneben */
.hpRoomSelectRow{ display:flex; align-items:center; gap:10px; width:100%; min-width:0; }
.hpRoomSelectRow .hpRoomSelect{ flex:1 1 auto !important; width:auto !important; min-width:0 !important; }
.hpRoomSelectClear{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:2px;
  background:#fff; border:1.5px solid #e7eaf0;
  color:#64748b; font-size:16px; font-weight:300; line-height:1; white-space:nowrap;
  font-family:Barlow Condensed,sans-serif; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.hpRoomSelectClear:hover{ border-color:var(--accent,#ef8a7d); color:var(--accent,#ef8a7d); background:#fff7f5; }
.hpRoomSelectClear i{ font-size:14px; }
@media (max-width:640px){
  .hpRoomSelectRow{ flex-wrap:wrap; }
  .hpRoomSelectClear{ width:100%; justify-content:center; }
}
.hpRoomSelectBtn{
  display:flex; align-items:center; gap:12px;
  width:100%; cursor:pointer;
  background:#fff; border:1px solid #d8dde6;
  padding:10px 14px; text-align:left;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.hpRoomSelectBtn:hover{ border-color:var(--accent,#ef8a7d); }
.hpRoomSelectBtn[aria-expanded="true"]{
  border-color:var(--accent,#ef8a7d);
  box-shadow:0 0 0 3px rgba(239,138,125,.18);
}
.hpRoomSelectLabel{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; font-family: Barlow Condensed,sans-serif; }
.hpRoomSelectName{
  font-weight:300; font-size:22px; color:var(--primary,#002349);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hpRoomSelectInfo{ color:#6f7b8c; }
.hpRoomSelectChevron{ color:#5d6673; font-size:13px; transition:transform .15s ease; flex-shrink:0; }
.hpRoomSelectBtn[aria-expanded="true"] .hpRoomSelectChevron{ transform:rotate(180deg); }

.hpRoomSelectMenu{
  position:absolute; left:0; right:0; z-index:40;
  background:#fff; border:1px solid #e3e8ef; 
  box-shadow:0 12px 32px rgba(2,6,23,.16);
  padding:6px; max-height:280px; overflow-y:auto;
  display:none;
}
.hpRoomSelectMenu.open{ display:block; }
.hpRoomSelectOption{
  display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; cursor:pointer;
  transition:background .12s ease;
  border-bottom:1px solid #eef0f3;
}
.hpRoomSelectOption:last-child{ border-bottom:none; }
/* Ausgewählte Option deutlich markieren */
.hpRoomSelectOption.isSelected{
  background:#eef4fb;
  box-shadow:inset 3px 0 0 var(--accent,#ef8a7d);
}
.hpRoomSelectOption.isSelected .hpRoomSelectName{ font-weight:300; color:#002349; }
/* Vorschaubild links */
.hpRoomSelectThumb{
  flex-shrink:0; width:42px; height:42px; border-radius:8px;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-color:#eef2f6;
}
.hpRoomSelectThumbEmpty{
  display:flex; align-items:center; justify-content:center; color:#b6c0cc; font-size:18px;
}
.hpRoomSelectLabelCol{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.hpRoomSelectAnfrageBadge{
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: .2px;
  color: #002349;
  background: #f1f5f9;
  border-radius: 14px;
  padding: 5px 12px;
  white-space: nowrap;
  text-align: center;
  line-height: 1.25;
}
/* Preis-Badge darf 2-zeilig umbrechen (mehr Platz für "€ … pro Nacht") */
.hpRoomSelectPriceBadge{
  white-space: normal;
  max-width: 140px;
}
.hpRoomSelectOption:hover{ background:#f4f6fa; }
.hpRoomSelectOption.isSelected:hover{ background:#e7f0fa; }
.hpRoomSelectOption .hpRoomSelectName{ font-size:21px; }
.hpRoomSelectOption .hpRoomSelectInfo{ font-size:13px; }
.hpRoomSelectEmpty{ cursor:default; color:#94a3b8; }
.hpRoomSelectEmpty:hover{ background:transparent; }

/* ── Zimmerkarten als Zeilen (Book-Modus) ──
   Greift nur, wenn eine Aktions-Spalte (.hpRoomRowAction) vorhanden ist. */
.hpRoomsGrid:has(.hpRoomRowAction){
  grid-template-columns:1fr;   /* eine Zeile pro Zimmer */
  gap:10px;
}
.hpRoomCard:has(.hpRoomRowAction){
  display:flex; flex-direction:column;
}
.hpRoomCard:has(.hpRoomRowAction) .hpRoomCardRow{
  display:flex; align-items:stretch; flex-direction:row; width:100%;
}
.hpRoomCard:has(.hpRoomRowAction) .hpRoomImg{
  width:170px; flex:0 0 170px; min-height:128px;
}
.hpRoomCard:has(.hpRoomRowAction) .hpRoomBody{
  flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:6px;
}
.hpRoomRowAction{
  display:flex; align-items:stretch; flex-direction:column; gap:8px; padding:16px 16px; flex:0 0 auto;
}
/* Buttons IN der Preis-Zeile (Kundenwunsch): rechtsbündig NEBENeinander.
   Sitzt als Kind der .hpRoomPriceRow (flex, space-between) — margin-left:auto
   drückt die Gruppe ganz nach rechts; auf schmalen Breiten bricht die
   PriceRow (flex-wrap) sauber um. */
.hpRoomRowAction.hpRoomRowActionInline{
  flex-direction:row; align-items:center; justify-content:flex-end;
  gap:8px; padding:0; margin-left:auto; flex-wrap:wrap;
}
.hpRoomRowBtn{
  background: var(--accent,#ef8a7d);
  color: #fff;
  border: none;
  padding: 10px 18px;
  cursor: pointer;
  white-space: nowrap;
  font-family: Barlow Condensed,sans-serif;
  font-size: 20px;
  transition: background .15s ease, opacity .15s ease;
  pointer-events: auto;
  font-weight: 300;
}
.hpRoomRowBtn.isSelected{
  background:#fff; color:var(--primary,#002349);
  border:1.5px solid var(--primary,#002349);
}
/* Separater „Jetzt Buchen"-Button, der nach der Auswahl erscheint (primär abgesetzt). */
.hpRoomBookNowBtn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--primary,#002349); color:#fff; border:none;
  padding:10px 18px; cursor:pointer; white-space:nowrap;
  font-family:Barlow Condensed,sans-serif; font-size:20px; font-weight:400;
  transition:background .15s ease, opacity .15s ease; pointer-events:auto;
}
.hpRoomBookNowBtn:hover{ background:#013a73; }
.hpRoomBookNowBtn i{ font-size:16px; }

/* Responsive: Zeilen auf Mobile etwas kompakter */
@media (max-width:600px){
  .hpRoomCard:has(.hpRoomRowAction) .hpRoomCardRow{ flex-wrap:wrap; }
  .hpRoomCard:has(.hpRoomRowAction) .hpRoomImg{ width:100%; flex:1 1 100%; min-height:120px; }
  .hpRoomRowAction{ width:100%; padding:10px 14px; }
  .hpRoomRowBtn{ width:100%; }
  .hpBookRow.hpBookRowBook{ flex-wrap:wrap; }
  .hpRoomSelect{ min-width:100%; }
}

/* Button-lose (nicht verfügbare) Karten im Zeilen-Grid ebenfalls als Zeile darstellen */
.hpRoomsGrid:has(.hpRoomRowAction) .hpRoomCard{
  display:flex; flex-direction:column;
}
.hpRoomsGrid:has(.hpRoomRowAction) .hpRoomCardRow{
  display:flex; align-items:stretch; flex-direction:row; width:100%;
}
.hpRoomsGrid:has(.hpRoomRowAction) .hpRoomCard .hpRoomImg{
  width: 280px; flex: 0 0 280px; min-height: 190px;
}
.hpRoomsGrid:has(.hpRoomRowAction) .hpRoomCard .hpRoomBody{
  flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:6px;
}
@media (max-width:600px){
  .hpRoomsGrid:has(.hpRoomRowAction) .hpRoomCardRow{ flex-wrap:wrap; }
  .hpRoomsGrid:has(.hpRoomRowAction) .hpRoomCard .hpRoomImg{ width:100%; flex:1 1 100%; min-height:120px; }
}

/* ── Stabiler Zeilen-Layout-Anker für den Book-Modus ──
   Greift IMMER (auch wenn alle Kategorien nicht verfügbar sind und keine
   .hpRoomRowAction existiert). Spiegelt exakt die :has(.hpRoomRowAction)-Regeln. */
.hpRoomsGrid.hpRoomsGridBook{
  grid-template-columns:1fr;
  gap:14px;
}
.hpRoomsGrid.hpRoomsGridBook .hpRoomCard{
  display:flex; flex-direction:column;
}
.hpRoomsGrid.hpRoomsGridBook .hpRoomCardRow{
  display:flex; align-items:stretch; flex-direction:row; width:100%;
}
.hpRoomsGrid.hpRoomsGridBook .hpRoomCard .hpRoomImg{
  width: 280px; flex: 0 0 280px; min-height: 190px;
}
.hpRoomsGrid.hpRoomsGridBook .hpRoomCard .hpRoomBody{
  flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:6px;
}
@media (max-width:600px){
  .hpRoomsGrid.hpRoomsGridBook .hpRoomCardRow{ flex-wrap:wrap; }
  .hpRoomsGrid.hpRoomsGridBook .hpRoomCard .hpRoomImg{ width:100%; flex:1 1 100%; min-height:120px; }
}

/* ── Zimmer-Dropdown deaktiviert (kein Datum gewählt) ── */
.hpRoomSelectBtnDisabled{
  cursor:default;
  opacity:1;
  background:#f4f6fa;
  border-color:#e3e8ef;
}
.hpRoomSelectBtnDisabled:hover{
  border-color:#e3e8ef;        /* kein Hover-Highlight */
  box-shadow:none;
}
.hpRoomSelectBtnDisabled .hpRoomSelectName{
  color:#002349;               /* gedämpft, da nur Hinweis */
  font-weight:300;
}
.hpRoomSelectBtnDisabled .hpRoomSelectInfo{ color:#94a3b8; font-weight: 300; font-size: 17px; }
.hpRoomSelectBtnDisabled .hpRoomSelectChevron{ opacity:.4; }
/* Ohne Reisedatum ist der Auswahl-Button klickbar und öffnet das Datums-Modal. */
.hpRoomSelectBtn.hpRoomSelectNeedsDate{ cursor:pointer; }
.hpRoomSelectBtn.hpRoomSelectNeedsDate:hover{ border-color:#cbd5e1; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.hpRoomSelectBtn.hpRoomSelectNeedsDate .hpRoomSelectChevron{ opacity:.7; }

.hpPriceBlock.hpPriceHint {
  cursor: default;
  opacity: 1;
  background: #f4f6fa;
  padding: 10px 14px;
  min-width: 390px;
  border: 1px solid #d8dde6;
}

/* ── Preis-Block als Datum-Hinweis (request-Hotels ohne Datum) ── */
.hpPriceBlock.hpPriceHint .hpPriceNum{
  white-space: nowrap;
  color: #002349;
  font-weight: 300;
  font-size: 22px;
}
.hpPriceBlock.hpPriceHint .hpPriceSub{
  color: #94a3b8;
  font-weight: 300;
  font-size: 17px;
}
/* ── Zimmer-Galerie (Pfeile) + Einklapp-Toggle nicht verfügbarer Kategorien ── */
.hpRoomImg{ position:relative; }
.hpRoomGalNav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:24px; height:30px; border-radius:2px; border:none;
  background:rgba(15,23,42,.55); color:#fff; font-size:24px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s, background .15s; z-index:3; padding-bottom:4px;
}
.hpRoomImg:hover .hpRoomGalNav{ opacity:1; }
.hpRoomGalNav:hover{ background:rgba(15,23,42,.8); }
.hpRoomGalPrev{ left:8px; }
.hpRoomGalNext{ right:8px; }
.hpRoomGalCount{
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 3;
  background: rgba(15,23,42,.6);
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  padding: 2px 8px;
  border-radius: 2px;
  letter-spacing: 2px;
}
@media (hover:none){ .hpRoomGalNav{ opacity:1; } }

/* ===== Zimmerkategorie-Bild: anklickbar → Lightbox ===== */
.hpRoomImg.hpRoomImgClickable{ cursor:zoom-in; }
.hpRoomImgZoomHint{
  position:absolute; top:8px; left:8px; z-index:3;
  width:30px; height:30px; border-radius:2px;
  background:rgba(15,23,42,.55); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; opacity:0; transition:opacity .15s; pointer-events:none;
}
.hpRoomImg.hpRoomImgClickable:hover .hpRoomImgZoomHint{ opacity:1; }
@media (hover:none){ .hpRoomImgZoomHint{ opacity:1; } }

/* ===== Lightbox-Overlay ===== */
.hpLightbox{
  position:fixed; inset:0; z-index:100050;
  background:rgba(0,16,35,.92);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.hpLightbox.open{ opacity:1; }
.hpLightboxStage{
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:60px 72px;
  box-sizing:border-box;
}
.hpLightboxImg{
  max-width:100%; max-height:100%;
  object-fit:contain; border-radius:2px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  user-select:none; -webkit-user-drag:none;
  transition:opacity .12s ease;
}
.hpLightboxNav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:99px; border:none;
  background:rgba(255,255,255,.12); color:#fff; font-size:30px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s; z-index:2; padding:0;
}
.hpLightboxNav:hover{ background:rgba(255,255,255,.25); }
.hpLightboxPrev{ left:16px; }
.hpLightboxNext{ right:16px; }
.hpLightboxClose{
  position:absolute; top:18px; right:20px;
  width:44px; height:44px; border-radius:2px; border:none;
  background:rgba(255,255,255,.12); color:#fff; font-size:24px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s; z-index:2; padding-bottom: 5px;
}
.hpLightboxClose:hover{ background:rgba(255,255,255,.25); }
.hpLightboxCount{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.45); color:#fff;
  font-size:16px; font-weight:300; letter-spacing:2px;
  padding:5px 14px; border-radius:2px; z-index:2;
}
@media (max-width:640px){
  .hpLightboxStage{ padding:56px 12px; }
  .hpLightboxNav{ width:42px; height:42px; font-size:24px; }
  .hpLightboxPrev{ left:6px; }
  .hpLightboxNext{ right:6px; }
}

.hpUnavailToggleWrap{ grid-column:1 / -1; margin:6px 0 2px; }
.hpUnavailToggle{
  width:100%; display:flex; align-items:center; gap:8px;
  background:#f1f5f9; border:1px solid #e2e8f0;
  padding:10px 14px; cursor:pointer; font-family:inherit;
  font-size:16px; font-weight:400; color:#5a6478; transition:background .15s,border-color .15s;
}
.hpUnavailToggle:hover{ background:#e8edf5; border-color:#cbd5e1; }
.hpUnavailChevron{ color:#94a3b8; transition:transform .18s; font-size:12px; }
.hpUnavailToggle.open .hpUnavailChevron{ transform:rotate(180deg); }
.hpUnavailBlock{ grid-column:1 / -1; display:contents; }

/* ── Ausklappbare Zimmer-Details (Trigger im Body + Panel volle Breite) ── */
.hpRoomNameRow{
  display:flex; align-items:center; gap:20px;
  margin-bottom:4px;
}
.hpRoomNameRow .hpRoomName{ margin-bottom:0; }
/* Verfügbarkeits-Badge neben dem Zimmernamen */
.hpRoomCountBadge{
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 300;
  line-height: 1;
  color: #18773b;
  background: #ecfdf3;
  border: 1px solid #abefc6;
  border-radius: 2px;
  padding: 5px 11px;
  white-space: nowrap;
  flex-shrink: 0;
}
.hpRoomDetailBtn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: #002349;
  transition: color .15s;
  background: #f1f5f9;
  border-radius: 2px;
  font-size: 15px;
  font-weight: 300;
  padding: 6px 10px;
}
.hpRoomDetailBtn:hover{ color:#788192; }
.hpRoomDetailChevron{ font-size:10px; transition:transform .18s; }
.hpRoomDetailBtn.open .hpRoomDetailChevron{ transform:rotate(180deg); }
/* Detail-Button in der Meta-/Badge-Zeile: rechts neben die Badges schieben */
.hpRoomMeta .hpRoomDetailBtn{  }
/* Quick-Info-Zeile oben in der Karte: immer einzeilig, kürzt mit … */
.hpRoomDescOneLine{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}

.hpRoomDetails{ width:100%; padding:0 14px 0; }
.hpRoomDetailsInner{
  display:flex; align-items:stretch; gap:22px; padding-top:12px; padding-bottom:12px;
}
.hpRoomDetailsText{
  flex:1; min-width:0;
  background:#f7f9fc; border:1px solid #eef0f5;
  padding:16px 18px; font-size:20px; line-height:1.55; color:#5a6478; font-weight: 300;
  /* Zeilenumbrüche/Leerzeilen aus dem Textfeld als echte Absätze darstellen. */
  white-space:pre-line;
}
/* Initial: erster Buchstabe größer + kräftiger. */
.hpRoomDetailsText::first-letter{
  font-size:1.5em;
  font-weight:500;
  color:#3a4658;
}
.hpRoomAmenGrid{
  flex:0 0 auto; min-width:450px;
  background:#f7f9fc; border:1px solid #eef0f5;
  padding:16px 18px;
  display:grid; grid-template-columns:repeat(2,1fr); gap: 12px 14px; align-content: start;
}
.hpRoomAmen{
  display:flex; align-items:center; gap:12px;
  font-size:16px; color:#1a2332; min-width:0; font-weight: 300;
}
.hpRoomAmen i{
  flex-shrink:0; width:38px; height:38px; border-radius:9px;
  background:#fff; color:#002349;
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.hpRoomAmen span{ overflow:hidden; text-overflow:ellipsis; }
.hpRoomAmenEmpty{
  grid-column:1 / -1;
  font-size:14px; color:#9aa3b2; font-weight:300; line-height:1.5;
  align-self:center;
}
@media (max-width:640px){
  .hpRoomDetailsInner{ flex-direction:column; gap:12px; }
  .hpRoomAmenGrid{ min-width:0; grid-template-columns:1fr; gap:12px; }
}


/* ============================================================
   Hotel-Modal: Bild-Rahmen mit fester Höhe + Zusatzinfo-Icons (3x2)
   Am Dateiende definiert, damit es die früheren .hpImgCol-Blöcke sicher überschreibt.
   ============================================================ */

/* Bild-Spalte wächst nicht mehr mit der rechten Info-Spalte mit. */
.hpTopRow{ align-items:start; }

/* Fester Bildrahmen: konstante Höhe, clippt das Carousel + runde Ecken.
   Positionskontext für die absoluten Pfeile/Dots. */
.hpImgFrame{
  position:relative;
  height:500px;
  flex:0 0 500px;
  overflow:hidden;
  border-radius:inherit;
}
.hpImgFrame .hpImgSlider{ height:100%; }
.hpImgFrame .hpImg{ height:100%; min-height:320px; }

/* Zusatzinfo-Icons (3 Spalten x 2 Reihen), erscheinen unter dem Bild beim Aufklappen.
   Eingeklappt: keine Höhe, kein Platz. Aufgeklappt: Grid sichtbar. */
.hpHotelExtras{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  margin-top:0;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .35s ease, margin-top .35s ease, opacity .25s ease;
  pointer-events:none;
}
.hpHotelExtras.isOpen{
  max-height:600px;
  margin-top:14px;
  opacity:1;
  pointer-events:auto;
}

/* Einzelne Kachel: Icon + Titel, zentriert. Start unsichtbar/leicht versetzt. */
.hpExtraTile{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 16px 10px;
  background: #fff;
  border: 1px solid #e7edf5;
  opacity: 0;
  transform: translateY(8px);
}
/* Gestaffeltes Fade-in der Reihe nach: Animation startet erst wenn .isOpen gesetzt ist. */
.hpHotelExtras.isOpen .hpExtraTile{
  animation:hpExtraFadeIn .4s ease forwards;
  animation-delay:var(--hpExtraDelay, 0ms);
}
.hpExtraIcon{
  font-size:22px;
  color:#002349;
  line-height:1;
}
.hpExtraTitle{
  font-size:13px;
  font-weight:500;
  color:#3a4658;
  line-height:1.3;
}
@keyframes hpExtraFadeIn{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:translateY(0); }
}

/* Mobil: Bild darf wieder flexibel sein, Icons bleiben 3-spaltig. */
@media(max-width:640px){
  .hpImgFrame{ height:200px; flex-basis:200px; }
  .hpImgFrame .hpImg{ min-height:200px; }
}


/* ============================================================
   Mobile Bottom-Tab-Bar: Reiseplaner / Chat
   Nur auf schmalen Viewports sichtbar. Liegt über dem Chat-Overlay
   (z-index), damit die Tabs immer tippbar bleiben.
   ============================================================ */
.rpMobileTabs{ display:none; }

/* BP1024 (14.08., User: 761-1024px war kaputt). Tab-Bar galt nur bis 600px,
   das Chat-Sheet bis 760px, die Desktop-Sidebar ab 761px -> zwischen 601 und
   1024 gab es Sheet ohne Tab-Bar bzw. eine 400px-Sidebar + 446px Polster auf
   einem 800px-Fenster. Jetzt EINE Linie: mobil/Tablet bis 1024, Desktop ab 1025. */
@media (max-width:1024px){
  .rpMobileTabs{
    display:flex;
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:10010;                /* über dem Chat-Overlay (10001) */
    background:#fff;
    border-top:1px solid #e7eaf0;
    box-shadow:0 -2px 12px rgba(2,6,23,.06);
    padding:6px 8px;
    padding-bottom:calc(6px + env(safe-area-inset-bottom, 0px)); /* iPhone-Notch */
  }
  .rpMobileTab{
    flex:1 1 0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px;
    border:none; background:none; cursor:pointer;
    padding:8px 4px 6px;
    font-size:14px; font-weight:500;
    color:#94a3b8;                /* inaktiv: gedämpft */
    border-radius:14px;
    transition:color .18s ease, background .18s ease;
    -webkit-tap-highlight-color:transparent;
	font-family: Barlow Condensed,sans-serif;
  }
  .rpMobileTab i{ font-size:19px; line-height:1; }
  .rpMobileTab span{ line-height:1; }
  .rpMobileTab.active{
    color:var(--primary, #002349);   /* aktiv: eingefärbt */
  }

  /* Platz schaffen, damit die fixe Bar nichts verdeckt (Footer/Inhalt). */
  body{ padding-bottom:64px; }

  /* Mobil: Chat ist ein fixed-Overlay, KEIN Grid-Element. Daher das
     .chatOpen-Zweispalten-Grid auf Mobil aufheben, sonst wird der
     Hauptinhalt in eine winzige Spalte gequetscht (Chat-Spalte 480px). */
  .rpLayout.chatOpen{ grid-template-columns:1fr; }

  /* Chat-Bereich (Hotels-Seite) als Vollbild-Overlay oberhalb der Tab-Bar. */
  .rpChatSide{
    position:fixed;
    left:0; right:0; top:0; bottom:58px;
    width:100vw; height:auto;
    z-index:10001;
  }
  .rpLayout.chatOpen .rpChatSide{ bottom:58px; }
}

/* ════════════════════════════════════════════════════════════════
   Pro-Zimmer-Extras im Hotel-Modal — Kachel-Slider (3 Spalten)
   ───────────────────────────────────────────────────────────────
   Erscheint NACH .hpRoomCardRow innerhalb einer .hpRoomCard, NUR
   wenn die Karte ausgewählt ist. Eingefügt via renderExtrasForRoom()
   in reiseplaner-bawh.js.
   ──────────────────────────────────────────────────────────────── */
.hpRoomExtras{
  margin: 14px;
  padding: 14px 16px 16px;
  background: linear-gradient(180deg,#f7f9fc 0%,#f7f9fc 100%);
  border: 1px solid #eef0f5;
  border-radius: 2px;
  animation: hpRoomExtrasIn .22s ease both;
}
@keyframes hpRoomExtrasIn{
  from{ opacity:0; transform:translateY(-4px); }
  to  { opacity:1; transform:translateY(0); }
}
.hpRoomExtrasTitle{
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #7a8293;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.hpRoomExtrasTitle i{ color:#002349; }

/* Slider-Wrapper mit optionalen Pfeil-Buttons */
.hpRoomExtrasSlider{
  position:relative;
  display:flex; align-items:stretch; gap:16px;
  background: #fff;
  padding: 20px;
}
.hpRoomExtrasViewport{
  flex:1; min-width:0;
  overflow:hidden;
}
.hpRoomExtrasTrack{
  display:flex; gap:14px;
  transition:transform .3s ease;
  will-change:transform;
}
.hpRoomExtrasNav{
  flex-shrink: 0;
  width: 30px;
  height: auto;
  background: none;
  border: 0;
  border-radius: 10px;
  color: #94a3b4;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  transition: all .15s;
}
.hpRoomExtrasNav:hover:not(:disabled){
  color: #002349;
}
.hpRoomExtrasNav:disabled{
  opacity:.3; cursor:not-allowed;
}

/* Einzelne Extra-Kachel — Minimal Premium: Bild oben, luftiger Body, große Preiszahl (eckig) */
.hpRoomExtraTile{
  flex:0 0 calc((100% - 20px) / 3.4); /* 3 Spalten, 10px gap × 2 = 20px abziehen */
  min-width:0;
  display:flex; flex-direction:column; gap:0;  /* gap:0 = neutralisiert die fremde globale .included{gap:8px} */
  background:#fff;
  border:1px solid #e9edf3;
  border-radius:2px;
  cursor:pointer;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
  user-select:none;
  position:relative;
  overflow:hidden;
  transform:translateY(0);          /* dauerhafte Compositing-Ebene … */
  backface-visibility:hidden;       /* … damit Schrift im Hover nicht umrastert (kein AA-Sprung) */
}
.hpRoomExtraTile:hover{
  border-color:#d3dae6;
  box-shadow:0 10px 26px rgba(16,24,40,.10);
  transform:translateY(-2px);
}
.hpRoomExtraTile.on{ border-color:#0f1b2d; }

/* Eck-Haken oben rechts (erscheint bei Auswahl) */
.hpRoomExtraCorner{
  position:absolute; top:0; right:0; z-index:3;
  width:0; height:0;
  border-style:solid; border-width:0 70px 70px 0;
  border-color:transparent #0f1b2d transparent transparent;
  opacity:0; transform:translate(6px,-6px);
  transition:opacity .16s ease, transform .16s ease;
}
.hpRoomExtraCorner i{
  position:absolute; top:7px; right:-63px;
  color:#fff; font-size:22px;
}
.hpRoomExtraTile.on .hpRoomExtraCorner{ opacity:1; transform:translate(0,0); }

/* Bild oben — feste Höhe + max-height, damit kein hohes Bild die Karte sprengt */
.hpRoomExtraPic{
  flex:0 0 118px;                 /* harte Höhe im Flex-Column: kein Schrumpfen/Wachsen */
  height:96px; min-height:96px; max-height:96px;
  background:#eef2f7;
  position:relative;
  overflow:hidden;
}
.hpRoomExtraPic img{
  width:100%; height:100%; max-height:118px;
  object-fit:cover; display:block;
}
.hpRoomExtraPic.is-placeholder{
  background:linear-gradient(135deg,#002349 0%,#1a6ef5 100%);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.hpRoomExtraPic.is-placeholder i{ font-size:30px; opacity:.9; }

/* Luftiger Body */
.hpRoomExtraBody{
  flex:1; min-width:0;
  display:flex; flex-direction:column;
  padding:15px 16px 0;
}
.hpRoomExtraKick{
  font-size:12px; font-weight:400; letter-spacing:1.4px;
  text-transform:uppercase; color:#77808c;
}
.hpRoomExtraName{
  font-size:19px; font-weight:400; color:#002349;
  margin-top:5px;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  line-height:1.15;
}
.hpRoomExtraDesc{
  font-size:12.5px; color:#64748b;
  margin-top:8px; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; display:none;
}

/* Badges (Inkludiert / Global) — eckig */
.hpRoomExtraBadge{
  font-size: 12.5px;
  font-weight: 300;
  background: #f1f5f9;
  color: #616b7e;
  border-radius: 2px;
  padding: 2px 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.hpRoomExtraBadge i{ font-size:10px; }

/* Preis-Footer — am Boden, große Preiszahl, feiner Trenner.
   min-height: identische Footer-Höhe für Preis- UND inkludiert-Kacheln,
   damit Trennlinie + Zeile über alle Kacheln auf gleicher Höhe sitzen. */
.hpRoomExtraFoot{
  margin-top:auto;
  min-height:54px;
  border-top:1px solid #f0f2f6;
  padding:13px 0 16px;
  display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px;
}
.hpRoomExtraPriceBase{
  font-size:13px; font-weight:300; color:#aab3c0;
  text-decoration-color:#cdd6e4;
}
.hpRoomExtraPrice{
  font-size:24px; font-weight:500; color:#0f1b2d;
  letter-spacing:-.5px;
  display:inline-flex; align-items:baseline; gap:5px;
}
.hpRoomExtraTile.on .hpRoomExtraPrice{ color:#002349; }
.hpRoomExtraPrice.hpRoomExtraPriceTotal{ color:#002349; }
.hpRoomExtraPriceFree{
  font-size:16px; font-weight:400; color:#059669;
}
.hpRoomExtraUnit{
  font-size:14px; font-weight:500; color:#aab3c0; text-transform:none;
}

/* Tablet: 2 Spalten */
@media (max-width:900px){
  .hpRoomExtraTile{ flex-basis:calc((100% - 10px) / 2); }
}
/* Mobile: 1 Kachel sichtbar */
@media (max-width:600px){
  .hpRoomExtras{ margin:0 10px 10px 10px; padding:11px 12px 13px; }
  .hpRoomExtrasNav{ width:28px; font-size:12px; }
  .hpRoomExtraTile{ flex-basis:100%; }
  .hpRoomExtraPic{ flex:0 0 150px; height:150px; min-height:150px; max-height:150px; }
  .hpRoomExtraPic img{ max-height:150px; }
  .hpRoomExtraName{ font-size:15px; }
  .hpRoomExtraPrice{ font-size:19px; }
}

/* ── CONTAINER-BASIERTE KACHELN (03.08.) ────────────────────────────────
   BEFUND (Screenshots + vpdbg): Die Kachelbreite hing an VIEWPORT-Media-
   Queries — in schmalen Fenstern, auf iPhones mit grosser Layoutbreite und
   in eingebetteten Ansichten meldete der Browser aber >600/900px, die
   Mobile-Regeln griffen nie und die Desktop-Formel (÷3.4) quetschte die
   Kacheln auf ~100px (abgeschnittene Titel/Preise).
   FIX: Die Kacheln richten sich nach der ECHTEN Breite ihres Sliders
   (Container-Query auf .hpRoomExtrasViewport) — funktioniert unabhaengig
   davon, was der Browser als Viewport meldet. Alte Browser ohne
   @container-Support ignorieren das und behalten die Media-Queries. */
.hpRoomExtrasViewport{ container-type:inline-size; }
@container (max-width:430px){
  .hpRoomExtraTile{ flex-basis:100% !important; }
  .hpRoomExtraName{ font-size:15px; }
  .hpRoomExtraPrice{ font-size:19px; }
}
@container (min-width:430.01px) and (max-width:680px){
  .hpRoomExtraTile{ flex-basis:calc((100% - 14px) / 2) !important; }
  .hpRoomExtraName{ font-size:16px; }
}

/* ════════════════════════════════════════════════════════════════
   Banner-Extras ("Ihr Wellnesstrip") — Kachel-Slider, volle Breite
   ───────────────────────────────────────────────────────────────
   Erscheint NACH der .rpAngebotsRoomRow innerhalb der .rpAngebotsCard.
   Zeigt nur die GEWÄHLTEN Extras (Read-Only-Bestätigung).
   ──────────────────────────────────────────────────────────────── */
.rpAngebotsExtrasRow{
  border-top:1px solid #eef0f3;
  padding:14px 16px 16px;
  background:linear-gradient(180deg,#fafbff 0%,#fff 100%);
  animation:hpRoomExtrasIn .22s ease both;
}
.rpAngebotsExtrasTitle{
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #7a8293;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.rpAngebotsExtrasTitle i{ color:#002349; }

.rpAngebotsExtrasSlider{
  position:relative;
  display:flex; align-items:stretch; gap:16px; background: #fff;
  padding: 20px;
}
.rpAngebotsExtrasViewport{
  flex:1; min-width:0;
  overflow:hidden;
}
.rpAngebotsExtrasTrack{
  display:flex; gap:14px;
  transition:transform .3s ease;
  will-change:transform;
}
.rpAngebotsExtrasNav{
  flex-shrink: 0;
  width: 30px;
  height: auto;
  background: none;
  border: 0;
  border-radius: 10px;
  color: #94a3b4;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  transition: all .15s;
}
.rpAngebotsExtrasNav:hover:not(:disabled){
  color: #002349;
}
.rpAngebotsExtrasNav:disabled{
  opacity:.3; cursor:not-allowed;
}

/* Einzelne Banner-Extra-Kachel (klickbar — toggelt _selExtras) */
/* Banner-Extra-Kachel — Minimal Premium (identisch zum Modal): Bild oben, Kicker, Preis-Footer, eckig */
.rpBExTile{
  flex:0 0 calc((100% - 20px) / 3);
  min-width:0;
  display:flex; flex-direction:column; gap:0;  /* gap:0 = neutralisiert fremde globale .included{gap:8px} */
  background:#fff;
  border:1px solid #e9edf3;
  border-radius:2px;
  cursor:pointer;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
  user-select:none;
  position:relative;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  transform:translateY(0);            /* dauerhafte Compositing-Ebene gegen Hover-AA-Sprung */
  backface-visibility:hidden;
}
.rpBExTile:hover{
  border-color:#d3dae6;
  box-shadow:0 10px 26px rgba(16,24,40,.12);
  transform:translateY(-2px);
}
.rpBExTile.on{ border-color:#0f1b2d; }

/* Eck-Haken oben rechts (erscheint bei Auswahl) */
.rpBExCorner{
  position:absolute; top:0; right:0; z-index:3;
  width:0; height:0;
  border-style:solid; border-width:0 70px 70px 0;
  border-color:transparent #0f1b2d transparent transparent;
  opacity:0; transform:translate(6px,-6px);
  transition:opacity .16s ease, transform .16s ease;
}
.rpBExCorner i{ position:absolute; top:7px; right:-63px; color:#fff; font-size:22px; }
.rpBExTile.on .rpBExCorner{ opacity:1; transform:translate(0,0); }

/* Bild oben — fixe Höhe + max-height (Foto = Platzhalter, gleiche Höhe) */
.rpBExImg{
  flex:0 0 96px;
  height:96px; min-height:96px; max-height:96px;
  background:#eef2f7;
  position:relative;
  overflow:hidden;
}
.rpBExImg img{ width:100%; height:100%; max-height:118px; object-fit:cover; display:block; }
.rpBExImg.is-placeholder{
  background:linear-gradient(135deg,#002349 0%,#1a6ef5 100%);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.rpBExImg.is-placeholder i{ font-size:30px; opacity:.9; }

/* Luftiger Body */
.rpBExBody{
  flex:1; min-width:0;
  display:flex; flex-direction:column;
  padding:15px 16px 0;
}
.rpBExKick{
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #77808c;
}
.rpBExName{
  font-size: 19px;
  font-weight: 400;
  color: #002349;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.15;
}
.rpBExDesc{
  font-size: 12.5px;
  color: #64748b;
  margin-top: 8px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: none;
}

/* Badges — eckig */
.rpBExGlobalBadge{
  font-size: 12.5px;
  font-weight: 300;
  background: #f1f5f9;
  color: #616b7e;
  border-radius: 2px;
  padding: 2px 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.rpBExGlobalBadge i{ font-size:10px; }
.rpBExRoomBadge{
  font-size:8.5px; font-weight:800;
  background:#e8f0fe; color:#1252c4;
  border-radius:2px; padding:2px 6px;
}

/* Preis-Footer — am Boden, große Preiszahl, feiner Trenner, gleiche Höhe wie inkludiert */
.rpBExFoot{
  margin-top:auto;
  min-height:54px;
  border-top:1px solid #f0f2f6;
  padding:13px 0 16px;
  display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px;
}
.rpBExPriceBase{
  font-size: 13px;
  font-weight: 300;
  color: #aab3c0;
  text-decoration-color: #cdd6e4;
}
.rpBExPrice{
  font-size: 24px;
  font-weight: 500;
  color: #0f1b2d;
  letter-spacing: -.5px;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.rpBExTile.on .rpBExPrice{ color:#002349; }
.rpBExPriceFree{
  font-size:16px; font-weight:400; color:#059669;
}
.rpBExUnit{
  font-size: 14px;
  font-weight: 500;
  color: #aab3c0;
  text-transform: none;
}

.rpAngebotsExtrasSection{
  margin-bottom:14px;
}
.rpAngebotsExtrasSection:last-child{
  margin-bottom:0;
}
.rpAngebotsExtrasRoomHeader{
  font-size:11px; font-weight:400; color:#1a2332;
  display:flex; align-items:center; gap:6px;
  margin-bottom:8px;
  padding-left:2px;
}
.rpAngebotsExtrasRoomHeader i{ color:#1a6ef5; font-size:15px; }

@media (max-width:900px){
  .rpBExTile{ flex-basis:calc((100% - 10px) / 2); }
}
@media (max-width:600px){
  .rpAngebotsExtrasRow{ padding:11px 14px 14px; }
  .rpAngebotsExtrasNav{ width:28px; font-size:12px; }
  .rpBExTile{ flex-basis:100%; }
  .rpBExImg{ flex:0 0 150px; height:150px; min-height:150px; max-height:150px; }
  .rpBExImg img{ max-height:150px; }
  .rpBExName{ font-size:15px; }
  .rpBExPrice{ font-size:19px; }
  .rpAngebotsExtrasRoomHeader{ font-size:15px; }
}

/* ================================================================
   MOBILE FILTER — Variante A (Summary-Bar + Bottom-Sheet)   [<=860px]
   Ersetzt mobil die zusammengequetschte Desktop-Chip-Leiste durch eine
   fingertaugliche Such-Zusammenfassung + ein Vollbreite-Bottom-Sheet mit
   allen Filtern. Werte/Logik unveraendert (window.zimmer + #startDate/
   #endDate + versteckte Stepper/Tag-Optionen); JS in reiseplaner-bawh.js.
   ================================================================ */
.rpmFilterBar{ display:none; }
.rpmSheet{ display:none; }
.rpmSheetBackdrop{ display:none; }

@media (max-width:860px){
  /* Desktop-Chip-Leiste mobil ausblenden — eigene UI uebernimmt */
  .rpFilterBar{ display:none !important; }

  /* ── Summary-Bar: fix direkt unter der 70px-Nav ── */
  .rpmFilterBar{
    display:flex; align-items:center; gap:12px;
    position:fixed; top:70px; left:0; right:0; z-index:9998;
    background:#fff; border-bottom:1px solid #e7eaf0;
    padding:10px 16px;
    box-shadow:0 2px 10px rgba(2,6,23,.05);
    cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .rpmFilterIco{
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 2px;
    background: #dae0ec;
    color: #002349;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }
  .rpmFilterTxt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .rpmFilterMain{ font-size:16px; font-weight:500; color:#002349; line-height:1.2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rpmFilterSub{ font-size:14px; color:#64748b; line-height:1.2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight: 300; }
  .rpmFilterEdit{ flex:0 0 auto; color:#94a3b8; font-size:14px; }

  /* Inhalt unter die fixe Summary-Bar schieben */
  .rpWrap{ padding-top:74px; }

  /* ── Backdrop ── */
  .rpmSheetBackdrop{
    display:block; position:fixed; inset:0; z-index:10020;
    background:rgba(2,6,23,.42);
    opacity:0; pointer-events:none; transition:opacity .22s ease;
  }
  .rpmSheetBackdrop.open{ opacity:1; pointer-events:auto; }

  /* ── Bottom-Sheet ── */
  .rpmSheet{
    display:flex; flex-direction:column;
    position:fixed; left:0; right:0; bottom:0; z-index:10021;
    max-height:88vh;
    background:#fff; border-radius:22px 22px 0 0;
    box-shadow:0 -12px 44px rgba(2,6,23,.22);
    transform:translateY(100%); transition:transform .26s cubic-bezier(.22,1,.36,1);
  }
  .rpmSheet.open{ transform:translateY(0); }
  .rpmSheetGrab{ width:42px; height:5px; border-radius:99px; background:#cbd5e1;
    margin:9px auto 4px; flex:0 0 auto; }
  .rpmSheetHead{ display:flex; align-items:center; justify-content:space-between;
    padding:6px 20px 10px; flex:0 0 auto; border-bottom: 1px solid #e1e1e1; }
  .rpmSheetTitle{ font-size:18px; font-weight:500; color:#002349; }
  .rpmSheetClose{ border:none; background:none; font-size:26px; line-height:1;
    color:#94a3b8; cursor:pointer; padding:0 4px; }
  .rpmSheetBody{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:4px 20px 8px; }
  .rpmSheetFoot{ flex:0 0 auto; padding:12px 20px;
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
    border-top:1px solid #eef1f5; background:#fff; }
  .rpmApply{ width: 100%;
    height: 50px;
    border: none;
    border-radius: 2px;
    background: #002349;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
    font-family: Barlow Condensed,sans-serif; }
  .rpmApply:active{ opacity:.9; }

  /* ── Sektionen ── */
  .rpmSec{ padding:16px 0; border-top:1px solid #eef1f5; }
  .rpmSec:first-child{ border-top:none; }
  .rpmSecHead{ font-size:16px; font-weight:400; text-transform:uppercase;
    letter-spacing:.5px; color:#6b7280; display:flex; align-items:center; gap:8px;
    margin-bottom:12px; }
  .rpmSecHead i{ color:#002349; font-size:14px; }
  .rpmSecCtl{ display:flex; }

  /* Stepper (Naechte + Gaeste) */
  .rpmStepper{ display:inline-flex; align-items:center; gap:14px; }
  .rpmStepBtn{ width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    color: #002349;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
 }
  .rpmStepBtn:disabled{ opacity:.35; cursor:not-allowed; }
  .rpmStepVal{ font-size: 18px;
    font-weight: 500;
    color: #0b1020;
    min-width: 16px;
    text-align: center;
    border-radius: 2px;
    border: 1px solid #d0d4da;
    padding: 4px;
    width: 34px;
    height: 34px; }

  /* Datum */
  .rpmDateRow{ display:flex; gap:16px; }
  .rpmDateField{ flex:1 1 0; display:flex; flex-direction:column; gap:5px; }
  .rpmDateField span{ font-size:16px; font-weight:400; color:#002349; }
  .rpmDateField input{ width:100%; padding:12px; border:1px solid #DDDDDF;
    border-radius:2px; font:inherit; font-size:15px; color:#002349; background:#fff;
    -webkit-appearance:none; appearance:none; }

  /* Gaeste / Zimmer */
  .rpmRoom{ border:1px solid #e7eaf0; border-radius:2px; padding:12px 14px; margin-bottom:10px; }
  .rpmRoomHead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
  .rpmRoomName{ font-size:18px; font-weight:500; color:#002349; }
  .rpmRoomRm{ border:none; background:none; color:#94a3b8; font-size:22px; line-height:1; cursor:pointer; padding:0; }
  .rpmGRow{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; }
  .rpmGRow + .rpmGRow{ border-top:1px solid #f3f4f6; }
  .rpmGLabel{ font-size:16px; color:#0b1020; }
  .rpmGLabel small{ display:block; font-size:14px; color:#94a3b8; font-weight:300; margin-top:1px; }
  .rpmPet{ width:22px; height:22px; accent-color:#002349; }
  .rpmAddRoom{ width: 100%;
    padding: 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 2px;
    background: #fff;
    color: #002349;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 2px;
    font-family: Barlow Condensed,sans-serif; }

  /* Kategorie */
  .rpmTags{ display:flex; flex-wrap:wrap; gap:9px; }
  .rpmTag{ padding: 6px 14px;
    border: 1.5px solid #c8d8e8;
    background: #fff;
    font-size: 16px;
    font-weight: 400;
    color: #002349;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .15s, background .15s; }
  .rpmTag.active{ border-color: #fff;
    background: rgb(0, 35, 73);
    font-weight: 500;
    color: #fff; }
}

/* ================================================================
   ANNI-TEASER: eigenes Mobil-Div (<=600px)
   ----------------------------------------------------------------
   Desktop-Teaser (#anniTeaser) wird mobil ausgeblendet, das Mobil-Div
   (.rpAnniTeaserMobile, gleicher Inhalt/Style via geerbte rpAnni*-Klassen)
   eingeblendet. Dessen Button wechselt in den Chat-Tab (JS).
   ================================================================ */
.rpAnniTeaserMobile{ display:none; }
@media (max-width:600px){
  #anniTeaser{ display:none !important; }   /* Desktop-Teaser mobil aus */
  .rpAnniTeaserMobile{ display:block; }      /* Mobil-Teaser an */
}

/* ================================================================
   MOBILE AVATARE (<=600px)
   ----------------------------------------------------------------
   Statt der grossen Desktop-Halbfigur (assets/avatar.png, 160x110, ragt
   per negativer margin aus Box/Header) wird mobil ein runder Avatar
   (Kreis + Foto) verwendet. Bilddatei zentral hier -> bei Bedarf tauschen.
   Desktop bleibt unveraendert.
   ================================================================ */
@media (max-width:600px){
  /* --- Teaser (Mobil-Div) --- */
  .rpAnniTeaserMobile .rpAnniAvatar{
    width:56px; height:56px; border-radius:50%;
    background:url("assets/avatar_small.png") center/cover no-repeat, #dde3ed;
    border:2px solid #fff;
    margin:0; flex-shrink:0;
  }
  .rpAnniTeaserMobile .rpAnniTitle span{ margin-left:-60px; }   /* Desktop -92px aufheben */

  /* --- Chat-Header (Vollbild-Overlay) --- */
  .rpChatHead{ padding-top:12px; }
  .rpChatHeadLeft{ align-items:center; }
  .rpChatAvatar{
    width:48px; height:48px; border-radius:50%;
    background:url("assets/avatar_small.png") center/cover no-repeat, #dde3ed;
    border:2px solid #fff;
    margin:0;
  }
}

/* ================================================================
   MOBILE REIHENFOLGE (<=600px): Titel/Text -> Wilma-Teaser -> Result-Count
   ----------------------------------------------------------------
   "X passende Hotels gefunden" (#heroResultCount) steckt verschachtelt in
   rpHeroLeft > rpHero. Via display:contents werden h1/p/Count zu direkten
   Flex-Items der (mobil column-)rpHeroRow; per order kommt der Count hinter
   den Mobil-Teaser (Wilma). Desktop bleibt unveraendert.
   ================================================================ */
@media (max-width:600px){
  .rpHeroLeft{ display:contents; }
  .rpHero{ display:contents; }
  .rpAnniTeaserMobile{ order:1; }
  #heroResultCount{ order:2; }
}

/* ================================================================
   MOBILE: "Ihr Wellnesstrip"-Kopf (Angebotsuebersicht) (<=600px)
   ----------------------------------------------------------------
   Verkleinert Titel, Sub-Zeile und den grossen Platzhalter-Hinweis
   ("Bitte waehlen Sie ein Hotel aus ...") fuer Mobil. Der Hinweis traegt
   Inline-Styles (Desktop) -> mobil per !important ueberschrieben.
   Desktop bleibt unveraendert.
   ================================================================ */
@media (max-width:600px){
  .rpAngebotsTitle{ font-size:30px; line-height:36px; }
  .rpAngebotsSubRow{ gap:10px; margin-bottom:18px; }
  .rpAngebotsSub{ font-size:16px; }
  .rpAngebotsHint{
    font-size:24px !important;
    line-height:1.35 !important;
    padding:0 !important;
  }
}

/* ================================================================
   MOBILE: Body-Scroll-Lock bei offenem Chat (<=600px)
   ----------------------------------------------------------------
   Wird per JS (rpChatScrollLock) getoggelt, sobald #rpLayout.chatOpen
   aktiv ist. Verhindert, dass die Seite hinter dem Vollbild-Chat-Overlay
   scrollt. Eigene Klasse -> kollidiert nicht mit den inline-overflow-
   Locks von Filter-Sheet / Hotel-Panel.
   ================================================================ */
@media (max-width:600px){
  body.rpChatLock{ overflow:hidden; }
}

/* ================================================================
   Inkludierte Extras (Etappe 2): vorausgewählt + gesperrt + Badge
   ----------------------------------------------------------------
   Inkludierte Kacheln tragen .on (grüne "ausgewählt"-Optik inkl.
   Häkchen) UND .included. .included macht sie nur nicht-klickbar
   (cursor/Hover bleibt grün statt blau) und liefert das blaue
   "Inkludiert"-Badge. Gilt für Modal (.hpRoomExtraTile) + Banner
   (.rpBExTile) gleichermaßen.
   ================================================================ */
.hpRoomExtraTile.included,
.hpRoomExtraTile.included:hover{
  cursor:default;
  border-color: #002349;
  background: #ebf3ff;
}
.hpRoomExtraBadgeIncl{ background: #ef8a7d; color: #fff; }

.rpBExTile.included,
.rpBExTile.included:hover{
  cursor:default;
  border-color:#10b981;
  background:#f0fdf4;
}
.rpBExBadgeIncl{ background: #ef8a7d; color: #fff; }

/* ═══════════════════════════════════════════════════════════════════
   ANGEBOTE (hotel_offers) im Reiseplaner-Modal — Etappe 3
   Angebots-Karten erben .hpRoomCard; hier nur Tab-Umschalter,
   lila Akzent, Badge und die angebotsspezifischen Zusatzelemente.
   ═══════════════════════════════════════════════════════════════════ */

/* Tab-Umschalter „Zimmerkategorien | Angebote" (ersetzt .hpSectionTitle) */
.hpRoomsTabs{
  display:flex; align-items:flex-end; gap:20px;
  border-bottom:1px solid #eef0f5; margin-bottom:12px;
}
.hpRoomsTab{
  appearance:none; background:none; border:none; cursor:pointer;
  font-family:'Barlow Condensed'; font-weight:500; font-size:22px; line-height:24px;
  color:#94a3b8; padding:0 0 7px; margin:0; position:relative; transition:color .12s ease;
}
.hpRoomsTab:hover{ color:#5a6478; }
.hpRoomsTab.active{ color:#002349; }
.hpRoomsTab.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:#002349; border-radius:2px;
}
.hpRoomsTabOffers.active{ color:#ef8a7d; }
.hpRoomsTabOffers.active::after{ background:#ef8a7d; }

/* Angebots-Karte = Zimmerkarte + lila Akzent */
.hpOfferCard{ border-color:#ddd6fe; }
.hpOfferCard:hover{ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.21); }
.hpOfferCard.selected{
  border-color:#ef8a7d;
  box-shadow:0 0 0 2px #ede9fe, 0 6px 18px rgba(139,92,246,.18);
}
.hpOfferCard .hpRoomImg{
  background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(236,72,153,.12)); background-size: cover;
}

/* Badge „Angebot" auf dem Bild (oben links) */
.hpOfferBadge{
  position:absolute; top:8px; left:8px; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  background:#8b5cf6; color:#fff;
  font-size:12px; font-weight:600; letter-spacing:.3px;
  padding:4px 9px; border-radius:99px;
  box-shadow:0 2px 6px rgba(139,92,246,.4);
}
.hpOfferBadge i{ font-size:11px; }

/* Kategoriename hinter dem Angebotstitel */
.hpOfferCatName{ font-size:18px; font-weight:300; color:#8b5cf6; letter-spacing:.2px; }

/* „Verpflegung inkl." Badge (Komplett-Angebote) */
.hpOfferInclBadge{ background: #002349; color: #fff; }

/* Leistungs-Liste im Detail-Panel */
.hpOfferBenefits{
  list-style:none; padding:0; margin:10px 0 0;
  display:flex; flex-direction:column; gap:5px;
}
.hpOfferBenefits li{
  font-size: 18px;
  color: #475569;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 300;
}
.hpOfferBenefits li i{ color: #ef8a7d;
  font-size: 17px;
  margin-top: 4px;
  flex: 0 0 auto;
}

/* Hinweis-Text im Detail-Panel */
.hpOfferNote{
  margin-top:10px; padding:8px 11px; border-radius:7px;
  background:#fdf4ff; border:1px solid #f5d0fe; color:#86198f;
  font-size:13px; line-height:1.45;
}

/* Leerzustand im Angebots-Grid */
.hpOfferEmpty{
  grid-column:1 / -1; text-align:center; color:#94a3b8;
  font-size:14px; padding:24px 12px; font-weight:300;
}

/* ═══════════════════════════════════════════════════════════════════
   ANGEBOTE — Kachel-Ansicht + Karten-Layout (Update)
   ═══════════════════════════════════════════════════════════════════ */

/* Namenszeile der Angebots-Kategorie-Karte: Zimmername links, Angebot-Badge rechts */
.hpOfferNameRow{
  display:flex; align-items:center; gap:10px;
}
.hpOfferTitleBadge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  border-radius: 2px;
  padding: 6px 10px;
  transition: background .12s,color .12s,border-color .12s;
  background: #ef8a7d;
  color: #fff;
  font-weight: 300;
  border: 1px solid #ef8a7d;
}
.hpOfferTitleBadge i{ font-size:11px; }

/* Kachel-Container */
.hpOfferTiles{ display:flex; flex-direction:column; gap:12px; }

/* Einzelne Angebots-Kachel (klickbar) */
.hpOfferTile{
  display:flex; align-items:stretch; gap:0;
  border:1px solid #ddd6fe; border-radius:2px; overflow:hidden;
  background:#fff; cursor:pointer; box-shadow:0 2px 10px rgba(2,6,23,.05);
  transition:box-shadow .12s ease, border-color .12s ease, transform .12s ease;
  /* Stabiler Start-Transform + eigene Compositing-Ebene halten, damit der Text beim
     Hover NICHT neu gerastert wird (verhindert das Subpixel-Wackeln der Schrift). */
  transform:translateY(0);
  will-change:transform;
  backface-visibility:hidden;
}
.hpOfferTile:hover{ box-shadow: 0 6px 18px rgba(92, 152, 246, 0.18); }
.hpOfferTile.selected{ border-color:#ef8a7d; box-shadow: 0 6px 18px rgba(239, 138, 125, 0.21); }
.hpOfferTile.expanded{ border-bottom-left-radius:0; border-bottom-right-radius:0; }

.hpOfferTileImg{
  flex:0 0 280px; min-height:130px; position:relative;
  background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(236,72,153,.14));
  background-size:cover; background-position:center;
}
.hpOfferTileBadge{
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ef8a7d;
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  padding: 3px 8px;
  border-radius: 2px;
}
.hpOfferTileBadge i{ font-size:10px; }

.hpOfferTileBody{ flex:1 1 auto; padding:13px 15px; display:flex; flex-direction:column; justify-content:center; gap:4px; min-width:0; }
.hpOfferTileTitle{ 
  font-family: 'Barlow Condensed';
  font-weight: 500;
  line-height: 1.1;
  font-size: 23px;
  color: #002349;
  margin-bottom: 4px;
  letter-spacing: .3px; }
.hpOfferTileSub{ 
  font-size: 20px;
  line-height: 1.45;
  margin-bottom: 6px;
  font-weight: 300;
  color: #5a6478;
  letter-spacing: .2px; }
.hpOfferTileMeta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:3px; }
.hpOfferTileAb{ display:inline-block; color: #ef8a7d; font-size: 24px; font-weight: 400; line-height:1.1; }
.hpOfferTileAbSub{ display:block; font-size:12px; font-weight:400; color:#94a3b8; margin-top:1px; }
.hpOfferTileChip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  border-radius: 2px;
  padding: 6px 10px;
  transition: background .12s,color .12s,border-color .12s;
  background: #ef8a7d;
  color: #fff;
  font-weight: 400;
  border:1px solid #ede9fe;
}
.hpOfferTileSel{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  border-radius: 2px;
  padding: 6px 10px;
  transition: background .12s,color .12s,border-color .12s;
  background: #002349;
  color: #fff;
  font-weight: 400;
  border: 1px solid #ede9fe;
}
.hpOfferTileChevron{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:42px; color: #002349; font-size:15px;
  transition:transform .18s ease;
}
.hpOfferTile.expanded .hpOfferTileChevron{ transform:rotate(180deg); }

/* Aufgeklappte Kategorie-Auswahl unter der Kachel */
.hpOfferExpand{
  border:1px solid #ddd6fe; border-top:none;
  border-bottom-left-radius:12px; border-bottom-right-radius:12px;
  background:#fff; padding:12px; margin:0 0 2px;
}

@media (max-width:560px){
  .hpOfferTileImg{ flex-basis:104px; min-height:96px; }
  .hpOfferTileTitle{ font-size:19px; }
}

/* ═══════════════════════════════════════════════════════════════════
   ANGEBOTE — Info-Block im aufgeklappten Kachel-Bereich (beim Angebot)
   ═══════════════════════════════════════════════════════════════════ */
.hpOfferInfo{
  background:#fff; border:1px solid #ede9fe; border-radius:10px;
  padding:13px 15px; margin-bottom:12px;
}
.hpOfferInfoText{ font-size:20px; color:#334155; line-height:1.5; font-weight:300; }
.hpOfferInfoLabel{
  font-size:18px; font-weight:400; letter-spacing:.4px; text-transform:uppercase;
  color: #002349; margin:12px 0 6px;
}
.hpOfferInfo .hpOfferBenefits{ margin-top:0; }
.hpOfferInfoMeta{
  margin-top:12px; padding-top:10px; border-top:1px dashed #ede9fe;
  font-size:13px; color:#6d28d9; display:flex; align-items:center; gap:7px; display:none;
}
.hpOfferInfoMeta i{ font-size:12px; }

/* Angebots-Kachel: Konditionszeile (Gültigkeitszeitraum · Nächte · Personen) */
.hpOfferTileCond{
  display:flex; align-items:center; gap:6px;
  font-size:16px; color:#64748b; margin-top:2px; font-weight: 300;
}
.hpOfferTileCond i{ font-size:16px; color:#002349; flex:0 0 auto; }

/* Angebots-Kachel: Titelzeile mit Badges direkt neben dem Titel */
.hpOfferTileTitleRow{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
}
.hpOfferTileTitleRow .hpOfferTileTitle{ flex:0 1 auto; }

/* Angebots-Grid: volle Breite (wie der Zimmer-Grid mit hpRoomsGridBook).
   Ohne diese Regel erbt #hpOffersGrid das mehrspaltige .hpRoomsGrid-Raster
   und die Angebots-Kacheln säßen in nur einer ~260px-Spalte. */
#hpOffersGrid{ display:block; }

/* Dropdown auf dem Angebote-Tab: gesperrte (für das Angebot nicht verfügbare) Kategorien */
.hpRoomSelectOption.hpRoomSelectOptionDisabled{
  opacity:.5; cursor:not-allowed; filter:grayscale(0.4);
}
.hpRoomSelectOption.hpRoomSelectOptionDisabled:hover{ background:transparent; }
.hpRoomSelectAnfrageBadge.hpRoomSelectUnavail{
  background:#f1f5f9; color:#94a3b8; font-style:italic; font-weight:400;
}

/* „für Ihre Auswahl nicht verfügbar" auf der Angebots-Kachel: dezent (grau/kursiv),
   bewusst NICHT wie der Preis (.hpOfferTileAb in Lachs/24px). */
.hpOfferTileUnavail{
  display:inline-block; color:#94a3b8; font-size:16px;
  font-weight:300; font-style:italic; line-height:1.3;
}

/* Verpflegungs-Badges im Angebot: reine Info, nicht wählbar (kein Pointer/Hover). */
.hpRoomArraBadge.hpOfferArraStatic{ cursor:default; }
.hpRoomArraBadge.hpOfferArraStatic:hover{ border-color:#dadee1; }

/* Großer erster Buchstabe (Drop-Cap) im Angebots-Infotext – wie beim Zimmer-Infotext. */
.hpOfferInfoText::first-letter{
  font-size:1.5em;
  font-weight:500;
  color:#3a4658;
}

/* ====================================================================
   Mobil: Chat-Eingabe nicht zoomen (iOS-Safari Auto-Zoom-Fix)
   --------------------------------------------------------------------
   iOS-Safari zoomt beim Fokussieren automatisch in Eingabefelder mit
   einer Schriftgroesse < 16px hinein. In der Mobil-Ansicht daher die
   Chat-Eingabe auf 16px anheben — der Desktop bleibt unveraendert bei
   14px. Der ID-Selektor (#chatInput) sorgt fuer hoechste Spezifitaet,
   damit die Regel zuverlaessig greift.
   ==================================================================== */
@media (max-width: 600px) {
  #chatInput.rpChatInput { font-size: 16px; }
}

/* ===================================================================
   Jetzt-buchen-Modal (Task 3) + Datums-Modal (Task 4)
   Nutzt die bestehenden .modalBack/.modal/.modalHead/.modalContent/.modalActions
   =================================================================== */
.rpBookModal{ max-width:880px; width:96%; }
.rpBkGrid{ display:grid; grid-template-columns:1.1fr 1fr; gap:24px; }
.rpBkCol{ min-width:0; }
.rpBkSection{ padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--border,#e7eaf0); }
.rpBkHotel{ font-size:21px; font-weight:400; color:var(--primary,#002349); display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.rpBkLive{ font-size:13px; font-weight:400; padding:3px 9px; border-radius:2px; background:rgba(22,163,74,.12); color:var(--good,#16a34a); display:inline-flex; align-items:center; gap:5px; }
.rpBkLive.rpBkLiveReq{ background:rgba(100,116,139,.12); color:var(--muted,#64748b); }
.rpBkRow{ display:flex; align-items:center; gap:9px; font-size:16px; color: #002349; margin:6px 0; font-weight: 300; }
.rpBkRow i{ color:var(--accent,#ef8a7d); width:16px; text-align:center; }
.rpBkLabel{ font-size:13px; font-weight:400; text-transform:uppercase; letter-spacing:.04em; color:var(--muted,#64748b); margin-bottom:8px; }
.rpBkExtras{ display:flex; flex-direction:column; gap:6px; }
.rpBkExtra{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border,#e7eaf0); border-radius:10px; cursor:pointer; font-size:14px; transition:border-color .15s, background .15s; }
.rpBkExtra:hover{ border-color:var(--accent,#ef8a7d); }
.rpBkExtra.on{ border-color:var(--accent,#ef8a7d); background:rgba(239,138,125,.07); }
.rpBkExtra input{ width:16px; height:16px; accent-color:var(--accent,#ef8a7d); }
.rpBkExtraName{ flex:1; }
.rpBkExtraPrice{ font-weight:600; color:var(--primary,#002349); white-space:nowrap; }
.rpBkTotalRow{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; font-size:15px; color:var(--primary,#002349); }
.rpBkTotal{ font-size:22px; font-weight:700; color:var(--primary,#002349); }
.rpBkFormGrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rpBkInput{ width:100%; padding:10px 12px; border:1px solid var(--border,#e7eaf0); border-radius:10px; font-size:14px; font-family:inherit; color:var(--text,#1f2937); background:#fff; box-sizing:border-box; }
.rpBkInput:focus{ outline:none; border-color:var(--accent,#ef8a7d); box-shadow:0 0 0 3px rgba(239,138,125,.15); }
.rpBkFull{ grid-column:1 / -1; }
textarea.rpBkInput{ resize:vertical; }
.rpBkCheck{ display:flex; align-items:flex-start; gap:9px; margin:12px 0; font-size:13px; color:var(--muted,#64748b); cursor:pointer; }
.rpBkCheck input{ width:16px; height:16px; margin-top:1px; accent-color:var(--accent,#ef8a7d); }
.rpBkError{ background:rgba(220,38,38,.08); color:#b91c1c; border:1px solid rgba(220,38,38,.25); border-radius:10px; padding:9px 12px; font-size:13px; margin-bottom:10px; }
.rpBkSubmit{ width:100%; padding:10px 16px; border:none; border-radius:2px; background:var(--primary,#002349); color:#fff; font-size:18px; font-weight:300; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:filter .15s, opacity .15s; font-family: Barlow Condensed,sans-serif; }
.rpBkSubmit:hover{ filter:brightness(1.08); }
.rpBkSubmit:disabled{ opacity:.5; cursor:not-allowed; }
.rpBkDone{ text-align:center; padding:24px 8px; }
.rpBkDoneIcon{ font-size:48px; color:var(--good,#16a34a); margin-bottom:12px; }
.rpBkDoneTitle{ font-size:26px; font-weight:400; color:var(--primary,#002349); margin-bottom:8px; }
.rpBkDoneText{ font-size:14px; color:var(--muted,#64748b); max-width:420px; margin:0 auto 18px; line-height:1.5; font-weight: 300; }
.rpBkDone .rpBkSubmit{ max-width:220px; margin:0 auto; }

/* Datums-Modal */
.rpDateModal{ max-width:680px; width:96%; }
.rpDmNav{ display:flex; justify-content:space-between; margin-bottom:8px; }
.rpDmNav button{ width:34px; height:34px; border:1px solid var(--border,#e7eaf0); background:#fff; border-radius:9px; cursor:pointer; color:var(--primary,#002349); }
.rpDmNav button:hover{ border-color:var(--accent,#ef8a7d); }
.rpDmCals{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.rpDmTitle{ text-align:center; font-weight:400; color:var(--primary,#002349); margin-bottom:8px; text-transform:capitalize; font-size: 18px; }
.rpDmWeek{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
.rpDmWeek span{ text-align:center; font-size:11px; color:var(--muted,#64748b); }
.rpDmGrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.rpDmDay{ aspect-ratio:1; border:none; background:transparent; border-radius:8px; font-size:13px; cursor:pointer; color:var(--text,#1f2937); }
.rpDmDay:hover:not(.disabled):not(.muted){ background:rgba(239,138,125,.15); }
.rpDmDay.muted{ background:transparent; cursor:default; }
.rpDmDay.disabled{ color:#cbd2dc; cursor:not-allowed; }
.rpDmDay.inRange{ background:rgba(0,35,73,.08); border-radius:0; }
.rpDmDay.start, .rpDmDay.end{ background:var(--primary,#002349); color:#fff; }
.rpDmDay.start{ border-radius:8px 0 0 8px; }
.rpDmDay.end{ border-radius:0 8px 8px 0; }

/* ── Feature 2: Angebots-Modus im Datums-Modal ─────────────────────────── */
#rpDmExtra{ margin-bottom:14px; }
.rpDmModeRow{ display:flex; gap:8px; margin-bottom:10px; }
.rpDmModeBtn{ flex:1; padding:9px 12px; border:1.5px solid var(--border,#e7eaf0); background:#fff; border-radius:2px; cursor:pointer; font-family:Barlow Condensed,sans-serif; font-size:20px; color:var(--primary,#002349); transition:background .15s ease, color .15s ease, border-color .15s ease;font-weight: 300; }
.rpDmModeBtn:hover{ border-color:var(--accent,#ef8a7d); }
.rpDmModeBtn.active{ background:var(--primary,#002349); color:#fff; border-color:var(--primary,#002349); }
.rpDmOfferPick{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.rpDmOfferChip{ padding:7px 12px; border:1.5px solid var(--border,#e7eaf0); background:#fff; border-radius:2px; cursor:pointer; font-size:14px; color: var(--accent); transition:background .15s ease, color .15s ease, border-color .15s ease; }
.rpDmOfferChip:hover{ border-color:var(--accent,#ef8a7d); }
.rpDmOfferChip.active{ background:var(--accent,#ef8a7d); color:#fff; border-color:var(--accent,#ef8a7d); }
.rpDmNoOffer{ color:#8a93a3; font-size:14px; }
.rpDmCond{ display:flex; flex-wrap:wrap; gap:8px 14px; margin-bottom:8px; }
.rpDmCondItem{ display:inline-flex; align-items:center; gap:6px; font-size:15px; color:#5b6472; }
.rpDmCondItem i{ color:var(--accent,#ef8a7d); }
.rpDmHint{ font-size:14px; color:#5b6472; min-height:18px; margin-bottom:18px; font-weight:300; }
/* Monats-Navigation auf die Titelzeile (Juni/Juli) ziehen — Pfeile flankieren die Monate */
.rpDateModal .rpDmNav{ margin-bottom:-34px; position:relative; z-index:2; pointer-events:none; align-items:flex-start; }
.rpDateModal .rpDmNav button{ pointer-events:auto; }
.rpDateModal .rpDmTitle{ min-height:34px; line-height:34px; }
/* Tageszustände nur im Angebots-Modus: grün = wählbar, rot = im Fenster aber gesperrt */
.rpDmDay.avail{ background:rgba(34,197,94,.12); color:#15803d; }
.rpDmDay.avail:hover{ background:rgba(34,197,94,.24); }
.rpDmDay.blocked{ color:#d6a7a7; background:rgba(239,68,68,.05); cursor:not-allowed; }
/* Verfügbarkeits-Spinner über dem Kalender */
#rpDmSpin{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:rgba(255,255,255,.78); z-index:6; border-radius:10px; }
.rpDmSpinner{ width:34px; height:34px; border:3px solid rgba(0,35,73,.18); border-top-color:var(--primary,#002349); border-radius:50%; animation:rpDmSpin .8s linear infinite; }
.rpDmSpinTxt{ font-size:13px; color:#5b6472; }
@keyframes rpDmSpin{ to{ transform:rotate(360deg); } }

#hpStickyRightDate{ cursor:pointer; }

@media (max-width:680px){
  .rpBkGrid{ grid-template-columns:1fr; gap:16px; }
  .rpDmCals{ grid-template-columns:1fr; gap:16px; }
}

/* ============================================================
   HOTEL-MODAL: STICKY FOOTER-BAR (hpFooterBar)
   Ersetzt den oberen "Jetzt buchen"-Button der hpBookRow.
   Fährt von unten ein, sobald die Auswahl gültig ist, und bleibt
   sticky am unteren Rand des Modals (.hotelPanel = Scroll-Container,
   padding 20px → bottom/-Margins analog zur hpStickyBar mit -20px).
   ============================================================ */
.hpFooterBar{
  display:none;                      /* unsichtbar bis .open (JS: updateFooterBar) */
  position:sticky;
  bottom:-20px;                      /* den 20px padding-bottom des Panels ausgleichen */
  z-index:40;                        /* über Inhalt, über hpStickyBar (30) bei Überlappung am Ende */
  margin:24px -20px -20px;           /* volle Modalbreite: 20px Panel-Padding links/rechts aufheben */
  align-items:center;
  gap:22px;
  padding:18px 20px;
  background:#002349;
  border-top:1px solid #e5e8ec;
  box-shadow:0 -8px 24px rgba(2,6,23,.10);
}
.hpFooterBar.open{
  display:flex;
  animation:hpFooterSlideUp .35s cubic-bezier(.22,.61,.36,1);
}
@keyframes hpFooterSlideUp{
  from{ transform:translateY(110%); opacity:.3; }
  to{   transform:translateY(0);    opacity:1;  }
}

/* Links: Zimmer-Vorschaubild + Name + Verpflegung */
.hpFooterThumb{
  width: 60px;
  height: 44px;
  flex: 0 0 auto;
  background-size: cover;
  background-position: center;
  background-color: #eef1f4;
  border-radius: 4px;
}
.hpFooterInfo{ min-width:0; }
.hpFooterRoom{
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hpFooterMore{ font-size:12px; font-weight:400; color:#888; }
.hpFooterArra{
  font-size: 16px;
  font-weight: 300;
  color: #e1e1e1;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Preis (Spiegel von #hpPrice) — vor dem Button rechtsbündig */
.hpFooterPrice{ margin-left:auto; text-align:right; flex:0 0 auto; }
.hpFooterPriceNum{ font-size:30px; font-weight:400; color:#fff; line-height:1.1; }
.hpFooterPriceNum .hpPriceAb{ font-size:16px; font-weight:300; color:#e1e1e1; margin-right:4px; }
.hpFooterPriceSub{ font-size:14px; color:#e1e1e1; font-weight:300; margin-top:2px; margin-right: 10px; }

/* Rechts: Jetzt buchen / Jetzt Anfragen (Optik = bisheriger hpBookBtn) */
.hpFooterBookBtn{
  flex: 0 0 auto;
  background: #ef8a7d;
  color: #fff;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s;
  font-family: Barlow Condensed,sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 18px;
  letter-spacing: .03em;
  font-style: normal;
  font-weight: 300;
  font-size: 26px;
  line-height: 26px;
}
.hpFooterBookBtn:hover{ background:#e0705f; }

/* Request-Modus ("Jetzt Anfragen") — Optik identisch zur bisherigen
   .hpBookBtn.hpBookBtnRequest-Regel (Zeile ~6087). */
.hpFooterBookBtn.hpBookBtnRequest{
  background:var(--accent, #ef8a7d) !important;
  color:#fff !important;
}
.hpFooterBookBtn.hpBookBtnRequest:hover{
  background:#e3786a !important;
}

/* Oberer "Jetzt buchen"-Button in der hpBookRow ENTFÄLLT komplett
   (JS hält ihn ebenfalls auf display:none — doppelte Absicherung). */
.hpBookRow .hpBookBtn{ display:none !important; }

/* Mobile: kompakter, eine Zeile, Name/Verpflegung mit Ellipsis */
@media (max-width:640px){
  .hpFooterBar{ gap:10px; padding:10px 14px; margin:18px -20px -20px; }
  .hpFooterThumb{ width:44px; height:38px; }
  .hpFooterRoom{ font-size:14px; }
  .hpFooterArra{ font-size:12px; }
  .hpFooterPriceNum{ font-size:16px; }
  .hpFooterPriceSub{ display:none; }
  .hpFooterBookBtn{ font-size:15px; padding:9px 14px; }
}

/* ============================================================
   HOTEL-MODAL MOBIL: Platz für die untere Tab-Leiste
   (.rpMobileTabs „Reiseplaner / Chat", fixed bottom, ~58–64px,
   z-index 10010 — liegt ÜBER dem Modal-Backdrop 10000).
   Modal nach oben verschieben + Höhe begrenzen, damit Modal und
   sticky Footer-Bar (hpFooterBar) ÜBER der Leiste enden.
   Breakpoint identisch zur Tab-Leiste (max-width:600px).
   ============================================================ */
@media (max-width:600px){
  .hotelPanelBack.open{
    align-items:flex-start !important;   /* oben andocken statt vertikal zentrieren */
    padding:12px 12px calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .hotelPanelBack .hotelPanel,
  .hotelPanelBack.open .hotelPanel{
    top:0 !important;                    /* globales top:14px aufheben */
    /* 12px oben + 72px unten (Tab-Leiste + Luft) + iPhone-Safe-Area */
    height:calc(100vh - 84px - env(safe-area-inset-bottom, 0px)) !important;
    height:calc(100dvh - 84px - env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ============================================================
   BUCHEN-MODAL + DATUMS-MODAL MOBIL: Platz für die untere
   Tab-Leiste (.rpMobileTabs) — gleicher Fix wie beim Hotel-Modal.
   Modal oben andocken, Höhe begrenzen (endet über der Leiste)
   und Inhalt scrollbar machen (.modal hat global overflow:hidden
   und KEIN max-height — lange Formulare liefen mobil sonst
   hinter die Leiste bzw. aus dem Viewport).
   Gezielt auf #rpBookModal/#rpDateModal gescoped, damit keine
   anderen .modalBack-Nutzungen betroffen sind.
   ============================================================ */
@media (max-width:600px){
  #rpBookModal.modalBack.open,
  #rpDateModal.modalBack.open{
    align-items:flex-start;              /* oben andocken statt vertikal zentrieren */
    padding:12px 12px calc(72px + env(safe-area-inset-bottom, 0px));
  }
  #rpBookModal .modal,
  #rpDateModal .modal{
    /* 12px oben + 72px unten (Tab-Leiste + Luft) + iPhone-Safe-Area */
    max-height:calc(100vh - 84px - env(safe-area-inset-bottom, 0px));
    max-height:calc(100dvh - 84px - env(safe-area-inset-bottom, 0px));
    overflow-y:auto;
    overflow-x:hidden;
  }
}

/* ============================================================
   ZIMMER-DROPDOWN EXPAND (hpBookRowExpand)
   Dropdown-Menü offen ODER Zimmer gewählt (JS: _syncBookRowExpand
   in setupRoomDropdown) → Dropdown wächst nach rechts über die
   volle Zeile und verdeckt den „ab Preis"-Block. Der Zustand
   bleibt nach der Zimmerwahl erhalten (Preis steht dann in der
   Footer-Bar hpFooterBar).
   ============================================================ */
.hpBookRow.hpBookRowBook.hpBookRowExpand #hpRoomSelectContainer{
  flex:1 1 auto;
  min-width:0;
}
.hpBookRow.hpBookRowBook.hpBookRowExpand .hpRoomSelect{
  min-width:0;
  width:100%;
}
.hpBookRow.hpBookRowBook.hpBookRowExpand .hpPriceBlock{
  display:none !important;  /* „ab Preis" verdeckt — auch gegen Inline-Show von _hpShowPriceBlock */
}

/* ============================================================
   BUCHEN-/DATUMS-MODAL: fixer Top-Header + fixe Footer-Bar
   .modal wird zur Flex-Spalte: .modalHead oben fix, .modalContent
   scrollt, .modalActions (Absende-Button) unten fix. Überschreibt
   das frühere mobile overflow-y:auto auf .modal (steht weiter oben
   in der Datei → diese Regeln gewinnen bei gleicher Spezifität).
   ============================================================ */
#rpBookModal .modal,
#rpDateModal .modal{
  display:flex;
  flex-direction:column;
  max-height:calc(100vh - 36px);   /* Backdrop-Padding 18px oben/unten */
  max-height:calc(100dvh - 36px);
  overflow:hidden;
}
#rpBookModal .modalHead,
#rpDateModal .modalHead{
  flex:0 0 auto;
  background:#fff;
}
#rpBookModal .modalContent,
#rpDateModal .modalContent{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
#rpBookModal .modalActions,
#rpDateModal .modalActions{
  flex:0 0 auto;
  margin-top:0;
  padding:12px 16px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid #eef0f5;
  background:#fff;
  box-shadow:0 -8px 24px rgba(2,6,23,.08);
}
#rpBookModal .modalActions .rpBkSubmit,
#rpDateModal .modalActions .rpBkSubmit{
  width:auto;
  min-width:220px;
  margin-left:auto;   /* Button rechts in der Footer-Bar */
}

/* Pflichtdaten fehlen (Datum bzw. Vorname/Nachname/E-Mail) → AUSGEGRAUT.
   Vorhanden → blau (Primärfarbe #002349 aus .rpBkSubmit). */
.rpBkSubmit:disabled{
  background:#c3cbd6 !important;
  color:#fff !important;
  opacity:1 !important;
  cursor:not-allowed;
  filter:none !important;
}

@media (max-width:600px){
  /* Höhenbegrenzung über der Tab-Leiste (wie zuvor) — muss hier wiederholt
     werden, da die max-height-Basis oben sonst den Mobile-Wert überschreibt. */
  #rpBookModal .modal,
  #rpDateModal .modal{
    max-height:calc(100vh - 84px - env(safe-area-inset-bottom, 0px));
    max-height:calc(100dvh - 84px - env(safe-area-inset-bottom, 0px));
  }
  #rpBookModal .modalActions .rpBkSubmit,
  #rpDateModal .modalActions .rpBkSubmit{
    width:100%;
    min-width:0;
  }
}

/* ============================================================
   FLOAT-AVATAR (.rpAnniFloatFixed): mobil NIEMALS sichtbar.
   Wird von mehreren JS-Pfaden erzeugt (reiseplaner-bawh.js,
   anni-travel-widget.js) — u. a. die Modal+Chat-Kombination
   ließ ihn mobil durchrutschen. CSS-Kill-Switch deckt ALLE
   Erzeugungspfade ab (display via !important schlägt auch
   Inline-Styles, die nur opacity/position setzen).
   ============================================================ */
@media (max-width:600px){
  .rpAnniFloatFixed{ display:none !important; }
}

/* ============================================================
   MOBILES FILTER-SHEET (rpmSheet) — Fixes
   1) Höhe: contentbasiert statt „100% Höhe" auf Chrome/Android.
      Ursache: .rpmSheetBody hatte flex-grow:1 + max-height in vh
      (vh = großer Viewport bei eingeblendeter URL-Leiste). Jetzt:
      grow:0 (Sheet exakt so hoch wie der Inhalt, in JEDER Engine)
      + Deckel in dvh (sichtbarer Viewport) mit vh-Fallback.
   2) Swipe-down: Grab/Head gehören der Geste (touch-action:none),
      Body behält sein Scrolling; overscroll-behavior verhindert
      Scroll-Chaining/Pull-to-refresh hinter dem Sheet.
   3) Datum-Reset-Button + FA-Icons in den Kategorie-Tags.
   Breakpoint identisch zu den Original-Regeln (max-width:860px).
   ============================================================ */
@media (max-width:860px){
  .rpmSheet{
    height:auto !important;
    max-height:82vh;
    max-height:82dvh;
  }
  .rpmSheetBody{
    flex:0 1 auto;          /* NICHT wachsen — nur schrumpfen, wenn der Deckel greift */
    min-height:0;
    overscroll-behavior:contain;
  }
  .rpmSheetGrab,
  .rpmSheetHead{
    touch-action:none;      /* Swipe-Geste, kein Browser-Scroll/Refresh */
  }

  /* Reisedatum-Reset (rechts in der Sektions-Überschrift) */
  .rpmSecHead .rpmDateReset{
    margin-left:auto;
    border:1px solid #e1e5eb;
    background:#fff;
    color:#6b7280;
    font-size:13px;
    font-weight:400;
    letter-spacing:0;
    text-transform:none;
    padding:5px 10px;
    border-radius:2px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:Barlow Condensed,sans-serif;
    -webkit-tap-highlight-color:transparent;
  }
  .rpmSecHead .rpmDateReset i{ color:#6b7280; font-size:12px; }
  .rpmSecHead .rpmDateReset:active{ background:#f1f5f9; }

  /* Kategorie-Tags: FontAwesome-Icons (statt Emojis) */
  .rpmTag i{
    font-size:13px;
    margin-right:4px;
    color:#002349;
  }
  .rpmTag.active i{ color:#fff; }
}

/* ============================================================
   HOTEL-MODAL STICKY-BAR MOBIL: Reisedatum · Belegung UNTER dem
   Hotelnamen im gescrollten Zustand (hpStickySub).
   Die rechte Sticky-Info (hpStickyRight) ist ≤640px aus Platz-
   gründen ausgeblendet — diese Sub-Zeile übernimmt dort deren
   Inhalt. Befüllung per JS (gleiche Quellen wie hpStickyRight*),
   ohne gewähltes Datum bleibt sie leer/ausgeblendet.
   data-rp-open-date: öffnet das Datums-Modal nur im Kein-Datum-
   Fall (bestehender Handler, Parität zu hpStickyRightDate).
   ============================================================ */
.hpStickySub{
  display:none;            /* Desktop + ungescrollt: nie sichtbar, Zeile kollabiert */
  grid-area:2 / 1;         /* eigene Zeile UNTER Info/Name (beide in Zeile 1) */
  min-width:0;
  font-size:13px;
  font-weight:300;
  color:#64748b;
  line-height:1.3;
  margin-top:1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
@media (max-width:640px){
  .hotelPanel.hpScrolled .hpStickySub{ display:block; }
}

/* ============================================================
   MOBILER CHAT (rpChatSide) ALS BOTTOM-SHEET (<=600px)
   Wie das Filter-Sheet (rpmSheet): KEIN Vollbild mehr (vorher
   top:0/bottom:58px = 100% Höhe, auf Chrome/Android besonders
   auffällig durch vh = großer Viewport). Jetzt: fester Deckel in
   dvh (sichtbarer Viewport, vh-Fallback), runde obere Ecken,
   Slide-up beim Öffnen, Grab-Handle für die Swipe-down-Geste
   (JS: rpChatSwipeClose).
   ============================================================ */
@media (max-width:600px){
  .rpChatSide{
    /* RANGFOLGE (wichtig, nicht anfassen):
       1) Ruhezustand = DIESE Regeln mit !important (festgenagelt gegen alle
          Inline-Reste, z. B. Patch-2-Sync oder liegengebliebene Keyboard-Styles).
       2) Tastatur offen = setupMobileKeyboard (Widget) setzt top/bottom/height
          als Inline-Styles MIT priority 'important' → schlägt diese CSS-Regeln
          (Inline-!important > CSS-!important) → Eingabeleiste über der Tastatur.
       3) Blur = Widget entfernt seine Properties → zurück zu (1).
       Früherer Bug: bottom war hier OHNE !important → beim Fokus galt
       CSS top:auto!important + Inline bottom:auto → Element ohne Anker
       sprang an die statische Position GANZ OBEN (Lücke unten). */
    top:auto !important;             /* Vollbild-Anker (top:0) aufheben */
    bottom:58px !important;          /* über der Tab-Leiste — festgenagelt */
    width:100vw !important;          /* gegen Desktop-Inline-Styles (Patch-2-Sync, 440px) */
    height:78vh !important;
    height:78dvh !important;
    max-height:calc(100dvh - 58px - 12px);
    border-radius:22px 22px 0 0;
    overflow:hidden;
    box-shadow:0 -12px 44px rgba(2,6,23,.22);
  }
  /* Slide-up beim Öffnen (display:none→flex erlaubt keine Transition,
     daher Animation — gleiches Muster wie hpFooterBar). */
  .rpLayout.chatOpen .rpChatSide{
    animation:rpChatSlideUp .26s cubic-bezier(.22,1,.36,1);
  }
  /* Panel/Inhalt an die runden Ecken anpassen */
  .rpChatSide .rpChatPanel{
    border-radius:22px 22px 0 0;
    height:100%;
  }
  /* Grab-Handle (Optik wie rpmSheetGrab) */
  .rpChatGrab{
    display:block;
    width:42px; height:5px;
    border-radius:99px;
    background:#cbd5e1;
    margin:9px auto 4px;
    flex:0 0 auto;
  }
  /* Header gehört der Swipe-Geste, kein Browser-Scroll/Refresh dort */
  .rpChatGrab,
  .rpChatSide .rpChatHead{
    touch-action:none;
  }
}
@media (min-width:601px){
  .rpChatGrab{ display:none; }       /* Desktop: kein Handle */
}
@keyframes rpChatSlideUp{
  from{ transform:translateY(100%); }
  to{   transform:translateY(0);    }
}

/* ============================================================
   "IHR WELLNESSTRIP"-BANNER: Feinschliff
   1) Sidebar (Hotel/Angebot/Bundesland-Spalte) mobil ausblenden —
      im 1-Spalten-Layout (<=860px, .rpAngebotsLayout: 1fr) stehen
      die Labels nutzlos ÜBER der Karte.
   2) "Zimmerwahl"-Überschrift über dem gewählten Zimmer (Optik wie
      rpAngebotsExtrasTitle; übernimmt den Trenner der RoomRow).
   3) Zusatzleistungs-Kacheln (.rpBExTile, nur im Banner verwendet —
      das Modal nutzt .hpRoomExtraTile) deutlich kompakter, damit
      die Sektion klar als separater Bereich für optionale /
      inkludierte Extras lesbar ist. Auf .rpAngebotsExtrasRow
      gescoped.
   ============================================================ */
@media (max-width:860px){
  .rpAngebotsSidebar{ display:none !important; }
}

/* "Zimmerwahl"-Überschrift */
.rpAngebotsRoomTitle{
  font-size:14px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:#7a8293;
  display:flex;
  align-items:center;
  gap:6px;
  border-top:1px solid #eef0f3;   /* Trenner wandert von der RoomRow hierher */
  padding-top:14px;
  margin-top:6px;
  margin-bottom:8px;
  padding: 10px 16px 0px;
}
.rpAngebotsRoomTitle i{ color:#002349; }
.rpAngebotsRoomTitle + .rpAngebotsRoomRow{ border-top:none; } /* kein doppelter Trenner */

/* Zusatzleistungen kompakter (nur Banner-Sektion) */
.rpAngebotsExtrasRow .rpAngebotsExtrasTitle{ font-size:14px; margin-bottom:10px; }
.rpAngebotsExtrasRow .rpBExImg{
  flex:0 0 72px;
  height:72px; min-height:72px; max-height:72px;
}
.rpAngebotsExtrasRow .rpBExImg.is-placeholder i{ font-size:22px; }
.rpAngebotsExtrasRow .rpBExBody{ padding:10px 12px 0; }
.rpAngebotsExtrasRow .rpBExKick{ font-size:10.5px; }
.rpAngebotsExtrasRow .rpBExName{ font-size:15px; margin-top:3px; }
.rpAngebotsExtrasRow .rpBExGlobalBadge{ font-size:10px; padding:1px 5px; }
.rpAngebotsExtrasRow .rpBExFoot{ min-height:40px; padding:9px 0 11px; }
.rpAngebotsExtrasRow .rpBExPrice{ font-size:18px; }
.rpAngebotsExtrasRow .rpBExPriceBase{ font-size:11.5px; }
.rpAngebotsExtrasRow .rpBExCorner{ border-width:0 52px 52px 0; }
.rpAngebotsExtrasRow .rpBExCorner i{ top:5px; right:-47px; font-size:16px; }

/* ============================================================
   HOTEL-MODAL BOOK-ZEILE MOBIL (<=600px):
   Preis ("ab € …") OBERHALB der Zimmerauswahl, Dropdowns 100%.
   Vorher: flex-wrap + .hpRoomSelect{min-width:100%} — aber 100%
   bezog sich auf den #hpRoomSelectContainer, der selbst nur
   shrinkwrap-breit war → Dropdowns blieben schmal und der Preis
   rutschte darunter (siehe Screenshot-Bug). Jetzt: Spalte mit
   order:-1 für den Preisblock + Container/Dropdowns volle Breite.
   ============================================================ */
@media (max-width:600px){
  .hpBookRow.hpBookRowBook{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .hpBookRow.hpBookRowBook .hpPriceBlock{
    order:-1;                /* Preis ÜBER die Zimmerauswahl */
    width:100%;
    margin-left:0;           /* auto-Push nach rechts entfällt in der Spalte */
    /* text-align:right aus der Basisregel bleibt: Preis steht rechtsbündig */
  }
  .hpBookRow.hpBookRowBook #hpRoomSelectContainer{
    width:100%;
    flex:1 1 auto;
    min-width:0;
  }
  .hpBookRow.hpBookRowBook .hpRoomSelect{
    width:100%;
    min-width:0;
  }
}

/* ============================================================
   ANGEBOTS-ÜBERSICHT MOBIL (<=600px): Kacheln stapeln
   Vorher: Flex-ZEILE (Bild 104px | Body | Chevron) — das schmale
   Bild streckte sich über die volle (durch den Text sehr hohe)
   Kachel, der Text lief in Ein-Wort-Zeilen (siehe Screenshot).
   Jetzt: Bild volle Breite OBEN, darunter Body + Chevron; Typo
   kompakter. Übersteuert die ältere 560px-Regel (steht früher
   in der Datei). Desktop unverändert.
   ============================================================ */
@media (max-width:600px){
  .hpOfferTile{ flex-wrap:wrap; }
  .hpOfferTileImg{
    flex:1 1 100%;            /* volle Breite, eigene Zeile */
    min-height:150px;
    max-height:170px;
  }
  .hpOfferTileBody{
    flex:1 1 calc(100% - 42px); /* Zeile 2: Body + Chevron (42px) */
    padding:12px 14px;
    gap:3px;
  }
  .hpOfferTileTitle{ font-size:20px; margin-bottom:2px; }
  .hpOfferTileSub{ font-size:15px; line-height:1.45; margin-bottom:4px; }
  .hpOfferTileCond{ font-size:13px; }
  .hpOfferTileCond i{ font-size:13px; }
  .hpOfferTileAb{ font-size:20px; }
  .hpOfferTileUnavail{ font-size:14px; }
  .hpOfferTileChip,
  .hpOfferTileSel{ font-size:13px; padding:4px 8px; }
  /* Aufgeklappter Info-Block ebenfalls kompakter */
  .hpOfferInfoText{ font-size:15px; }
  .hpOfferInfoLabel{ font-size:14px; }
}

/* ============================================================
   DATUMS-MODAL (rpDateModal): Kalender-Optik EXAKT wie der
   Filterleisten-Kalender (.kalDropdown, Referenzwerte Z. ~4961ff).
   Aufteilung des Modals bleibt unverändert (Nav oben, zwei Monate
   nebeneinander, mobil untereinander) — nur Fonts/Borders/Farben
   werden 1:1 angeglichen:
   - Monatstitel:  Barlow Condensed 500 / 22px / Primärfarbe
   - Wochentage:   Open Sans 400 / 15px / #565556
   - Tageszellen:  Open Sans 400 / 15px, 32px hoch, ECKIG, Hover #f0f2f5
   - Range:        durchgehend Primär-dunkel mit weißer Schrift
   - muted/disabled: #ccc wie in der Referenz
   ============================================================ */
.rpDmNav button{
  width:30px; height:30px;
  border:none; border-radius:0;
  background:#fff;
  font-size:18px;
  display:grid; place-items:center;
  color:var(--primary,#002349);
}
.rpDmNav button:hover{ background:#f0f2f5; border-color:transparent; }

.rpDmTitle{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:500;
  font-size:22px;
  line-height:24px;
  color:var(--primary,#002349);
  margin-bottom:10px;
  text-transform:capitalize;
  text-align:center;
}
.rpDmWeek{
  grid-template-columns:repeat(7,1fr);
  gap:3px;
  margin-bottom:0;
  padding:4px 0;
}
.rpDmWeek span{
  text-align:center;
  color:#565556;
  font-family:'Open Sans';
  font-style:normal;
  font-weight:400;
  font-size:15px;
  line-height:20px;
}
.rpDmGrid{ gap:0; }
.rpDmDay{
  aspect-ratio:auto;
  height:32px;
  border:none; border-radius:0;
  background:#fff;
  cursor:pointer;
  color:inherit;
  font-family:'Open Sans';
  font-style:normal;
  font-weight:400;
  font-size:15px;
  line-height:20px;
  margin-bottom:8px;
}
.rpDmDay:hover:not(.disabled):not(.muted){ background:#f0f2f5; }
.rpDmDay.muted{ background:#fff; color:#ccc; cursor:default; }
.rpDmDay.muted:hover{ background:#fff; }
.rpDmDay.disabled{ color:#ccc; }
.rpDmDay.inRange{ background:#002349; border-radius:0; color:#fff; }
.rpDmDay.start, .rpDmDay.end{
  background:var(--primary,#002349) !important;
  color:#fff !important;
  border-color:var(--primary,#002349);
  font-weight:700;
  border-radius:0;
}

/* ============================================================
   DATUMS-MODAL: Hover-Vorschau der Range (Anreise gewählt, Maus
   sucht Abreisetag) — Optik exakt wie im Filter-Kalender
   (.kalDropdown .day.preview / .previewEnd, Referenz Z. ~4984f).
   ============================================================ */
.rpDmDay.preview{ background:rgba(0,35,73,.06); }
.rpDmDay.previewEnd{
  background:var(--primary,#002349);
  color:#fff;
  border-color:var(--primary,#002349);
}

/* ============================================================
   CHAT-SHEET MOBIL: abdunkelnder Hintergrund (#rpChatSheetBackdrop)
   Optik/Verhalten wie .rpmSheetBackdrop beim Filter-Sheet.
   Element wird per JS erzeugt (rpChatSwipeClose) und über die
   chatOpen-Klasse auf #rpLayout synchronisiert; z-index 10000 =
   UNTER dem Chat (10001) und der Tab-Leiste (10010), ÜBER Seite
   und Hotel-Modal-Backdrop. Desktop: nie sichtbar.
   ============================================================ */
#rpChatSheetBackdrop{
  display:none;
  position:fixed; inset:0;
  z-index:10000;
  background:rgba(2,6,23,.42);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}
@media (max-width:600px){
  #rpChatSheetBackdrop{ display:block; }
  #rpChatSheetBackdrop.open{ opacity:1; pointer-events:auto; }
}

/* ============================================================
   BUCHUNGS-MODAL: sauber strukturierte Zusammenfassung
   "Ihre Auswahl" mit Zimmerwahl-Block (eine Zeile pro Zimmer:
   Name · Verpflegung · ggf. Angebot) — die Verpflegung kommt jetzt
   aus sel.selArras (Codes pro Slot) und wird wie im Hotel-Modal
   gelabelt (h.arrangements → board_type → Fallback-Tabelle).
   ============================================================ */
.rpBkRooms{ display:flex; flex-direction:column; gap:8px; }
.rpBkRoomLine{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:15px;
  color:#1f2937;
  line-height:1.35;
}
.rpBkRoomLine > i{
  color:#002349;
  font-size:13px;
  margin-top:3px;
  flex:0 0 auto;
}
.rpBkRoomTxt{
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 12px;
}
.rpBkRoomName{ font-weight:500; color:#002349; }
.rpBkRoomArra{
  display:inline-flex; align-items:center; gap:5px;
  font-size:13.5px; font-weight:300; color:#475569;
}
.rpBkRoomArra i{ font-size:11px; color:#64748b; }
.rpBkRoomOffer{
  display:inline-flex; align-items:center; gap:5px;
  font-size:13.5px; font-weight:300; color:#ed897c;
}
.rpBkRoomOffer i{ font-size:11px; }

/* ============================================================
   PAKETE-SEITE: Datums-Modal (#ofDateModal) mit fixem Top-Header
   + fixer Footer-Bar — gleiches Layout wie rpBook-/rpDateModal:
   .modal = Flex-Spalte, Kalender-Liste (.modalContent) scrollt,
   .modalActions (Summary/Hinweis/Weiter-Button) bleibt unten fix.
   Mobil endet das Modal über der Tab-Leiste (rpMobileTabs).
   ============================================================ */
#ofDateModal .modal{
  display:flex;
  flex-direction:column;
  max-height:calc(100vh - 36px);   /* Backdrop-Padding 18px oben/unten */
  max-height:calc(100dvh - 36px);
  overflow:hidden;
}
#ofDateModal .modalHead{
  flex:0 0 auto;
  background:#fff;
}
#ofDateModal .modalContent{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
#ofDateModal .modalActions{
  flex:0 0 auto;
  margin-top:0;
  padding:12px 16px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid #eef0f5;
  background:#fff;
  box-shadow:0 -8px 24px rgba(2,6,23,.08);
}
@media (max-width:600px){
  #ofDateModal.modalBack.open{
    align-items:flex-start;
    padding:12px 12px calc(72px + env(safe-area-inset-bottom, 0px));
  }
  #ofDateModal .modal{
    max-height:calc(100vh - 84px - env(safe-area-inset-bottom, 0px));
    max-height:calc(100dvh - 84px - env(safe-area-inset-bottom, 0px));
  }
}

/* Inspirations-Kacheln (index.php) sind jetzt Links — Look unverändert */
a.insp-card{
  display:block;
  text-decoration:none;
  color:inherit;
}

/* ============================================================
   STARTSEITE: "Suche starten" ohne Datum (rpDateNudge, index.php)
   Das Zeitraum-Feld pulsiert kurz und eine Info-Bubble
   "Bitte Reisedatum wählen" erscheint darüber — kein toter Klick.
   ============================================================ */
.rdCell.rdNeedsDate .rdCellVal{
  border-color:#ef8a7d !important;
  animation:rdNudgePulse 1.1s ease-out 2;
  border-radius:4px;
}
@keyframes rdNudgePulse{
  0%   { box-shadow:0 0 0 0 rgba(239,138,125,.45); }
  70%  { box-shadow:0 0 0 9px rgba(239,138,125,0); }
  100% { box-shadow:0 0 0 0 rgba(239,138,125,0); }
}
#rdDateNudge{
  position:absolute;
  bottom:calc(100% + 10px);          /* über dem Feld */
  left:0;
  z-index:80;                        /* über Kalender-Dropdown */
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#002349;
  color:#fff;
  font-size:16.5px;
  font-weight:300;
  line-height:1;
  padding:9px 13px;
  border-radius:6px;
  box-shadow:0 8px 22px rgba(2,6,23,.22);
  white-space:nowrap;
  opacity:0;
  transform:translateY(4px);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
#rdDateNudge i{ color:#ef8a7d; font-size:13px; }
#rdDateNudge::after{                 /* kleiner Pfeil nach unten */
  content:'';
  position:absolute;
  top:100%; left:18px;
  border:6px solid transparent;
  border-top-color:#002349;
}
#rdDateNudge.show{
  opacity:1;
  transform:translateY(0);
}
@media (max-width:600px){
  #rdDateNudge{ left:0; right:auto; font-size:13px; }
}

/* ============================================================
   STARTSEITE MOBIL (<=600px): Kalender-Dropdown (#kalDropdown)
   als Sheet mit fixer Topbar + fixer Footerbar.
   Vorher: fixed-Overlay, ALLES scrollte gemeinsam und es gab
   keinerlei Bestätigen/Schließen — man kam nur per Outside-Tap
   wieder raus. Jetzt: Topbar (Titel + ×) und Footerbar
   ("bestätigen") immer sichtbar, nur der Kalender-/Flex-Inhalt
   scrollt. Desktop: Head/Foot unsichtbar, Verhalten unverändert.
   Gescoped auf #kalDropdown (Startseite) — der Filter-Kalender
   des Reiseplaners (#popDates) bleibt unberührt.
   ============================================================ */
.kalSheetHead,
.kalSheetFoot{ display:none; }      /* Desktop: nicht vorhanden */

@media (max-width:600px){
  #kalDropdown.open{
    display:flex;
    flex-direction:column;
    /* fixe Position kommt aus der bestehenden .kalDropdown-Mobilregel
       (top:70px); Höhe so deckeln, dass das Sheet über der unteren
       Tab-Leiste (58px) endet. */
    max-height:calc(100vh  - 70px - 66px);
    max-height:calc(100dvh - 70px - 66px - env(safe-area-inset-bottom, 0px));
    overflow:hidden;                 /* scrollt NICHT mehr als Ganzes */
    padding:0;                       /* Innenabstände wandern in die Bereiche */
  }
  /* Topbar */
  #kalDropdown .kalSheetHead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex:0 0 auto;
    padding:13px 16px;
    border-bottom:1px solid #eef0f5;
    background:#fff;
    font-family:'Barlow Condensed';
    font-weight:500;
    font-size:20px;
    color:var(--primary,#002349);
  }
  #kalDropdown .kalSheetHead i{ margin-right:6px; color:var(--primary,#002349); }
  #kalDropdown .kalSheetClose{
    appearance:none;
    border:none;
    background:transparent;
    font-size:26px;
    line-height:1;
    color:#64748b;
    cursor:pointer;
    padding:2px 6px;
  }
  /* Tabs bleiben fix unter der Topbar */
  #kalDropdown .kalTabs{
    flex:0 0 auto;
    margin-bottom:0;
    padding:10px 12px;
  }
  /* Nur der Inhalt scrollt */
  #kalDropdown #tabExact,
  #kalDropdown #tabFlexible{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    padding:8px 14px 14px;
  }
  /* Footerbar */
  #kalDropdown .kalSheetFoot{
    display:flex;
    justify-content:stretch;
    flex:0 0 auto;
    padding:12px 14px;
    padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    border-top:1px solid #eef0f5;
    background:#fff;
    box-shadow:0 -8px 24px rgba(2,6,23,.08);
  }
  #kalDropdown .kalSheetFoot .kalConfirmBtn{
    width:100%;
    justify-content:center;
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
}

/* ============================================================
   ANGEBOTS-KACHELN IM MODAL (Reiseplaner)
   Look identisch zu pakete.php (.ofovCard). Wird im Angebote-Tab
   des Hotel-Modals genutzt: collapsed = Kachel-Grid, ein offenes
   Angebot = Detail-Zeile oben + „Weitere Angebote" als Kacheln.
   ============================================================ */
.hpOfferCardGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin-top:8px;}
.hpOfferMoreHead{font-family:'Barlow Condensed',sans-serif;font-weight:500;font-size:28px;color:#002349;margin:28px 0 12px;padding-top:18px;border-top:1px solid #e6e9ef;}

.ofovCard{position:relative;min-height:340px;border-radius:2px;overflow:hidden;cursor:pointer;
          display:flex;flex-direction:column;justify-content:space-between;color:#fff;
          background:#1f2937 center/cover no-repeat;text-decoration:none;
          box-shadow:0 4px 20px rgba(0,0,0,.10),0 1px 4px rgba(0,0,0,.06);
          transition:transform .2s ease, box-shadow .2s ease;}
.ofovCard:hover{box-shadow:0 12px 40px rgba(0,0,0,.16),0 2px 8px rgba(0,0,0,.08);}
.ofovCard:focus-visible{outline:3px solid var(--accent,#002349);outline-offset:2px;}
.ofovBg{position:absolute;inset:0;z-index:0;background:center/cover no-repeat;
        transform:scale(1);transition:transform 2.5s cubic-bezier(.22,.61,.36,1);will-change:transform;}
.ofovCard:hover .ofovBg{transform:scale(1.08);}
.ofovCard:focus-visible .ofovBg{transform:scale(1.08);}
.ofovScrim{position:absolute;inset:0;z-index:0;background-color:rgba(86,85,86,.55);}
.ofovTop,.ofovBottom{position:relative;z-index:1;}
.ofovTop{padding:22px 22px 0;}
.ofovTitle{font-family:'Barlow Condensed',sans-serif;font-weight:500;font-size:26px;line-height:1.08;
           letter-spacing:.01em;text-shadow:0 1px 6px rgba(0,0,0,.45);}
.ofovDates{font-family:'Barlow Condensed',sans-serif;font-weight:300;font-size:18px;line-height:1.3;
           margin-top:5px;opacity:.92;text-shadow:0 1px 4px rgba(0,0,0,.5);}
.ofovHotel{display:flex;align-items:center;gap:7px;margin-top:14px;
           font-family:'Barlow Condensed',sans-serif;font-weight:500;font-size:17px;
           text-shadow:0 1px 4px rgba(0,0,0,.5);}
.ofovHotel i{font-size:14px;opacity:.95;}
.ofovBottom{padding:0 22px 22px;text-align:right;align-self:flex-end;width:max-content;
            transform-origin:center;transition:transform .35s cubic-bezier(.25,.46,.45,.94);will-change:transform;}
.ofovCard:hover .ofovBottom{transform:scale(1.10);}
.ofovNights{font-family:'Barlow Condensed',sans-serif;font-weight:500;font-size:26px;line-height:1.05;
            text-shadow:0 1px 6px rgba(0,0,0,.5);}
.ofovNights .ofovNightsNum{font-size:36px;font-weight:600;}
.ofovPrice{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:36px;line-height:1.05;
           margin-top:3px;text-shadow:0 1px 8px rgba(0,0,0,.55);}
.ofovPrice .ofovAb{font-size:26px;font-weight:300;}
.ofovPrice.req{font-size:22px;font-weight:600;opacity:.9;}
.ofovPriceSub{font-size:15px;font-weight:300;opacity:.9;margin-top:2px;
              font-family:'Barlow Condensed',sans-serif;letter-spacing:.02em;}

/* ── Aufgeklapptes (gerade betrachtetes) Angebot hervorheben ──────────────
   Die fokussierte Angebots-Detailzeile oben bekommt einen Akzent-Rahmen +
   Schatten in Lila (Angebots-Farbe). Border-Breite bleibt 1px → kein Reflow.
   Der angrenzende Detail-Bereich (.hpOfferExpand) erbt die Rahmenfarbe.
   Ein GEBUCHTES Angebot (.selected) behält den Coral-Akzent (höhere Spez.). */
.hpOfferTile.expanded{ border-color:#002349; box-shadow:0 6px 22px rgba(0,35,73,.18); }
.hpOfferTile.expanded + .hpOfferExpand{ border-color:#002349; }
.hpOfferTile.selected.expanded{ border-color:#ef8a7d; box-shadow:0 6px 22px rgba(239,138,125,.24); }
.hpOfferTile.selected.expanded + .hpOfferExpand{ border-color:#ef8a7d; }

/* ── „Anfrage"-Button pro Zimmer/Angebot (immer neben „Wählen") ──────────────
   Sekundäre Outline-Variante (Navy-Rahmen, Papierflieger), klar abgesetzt vom
   soliden Coral „Wählen" und dem soliden Navy „Buchen". Klick = Item wählen +
   direkt Anfrage-Modal (Request-Modus). */
.hpRoomAnfrageBtn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:#fff; color:var(--primary,#002349); border:1px solid var(--primary,#002349);
  padding:9px 16px; cursor:pointer; white-space:nowrap;
  font-family:Barlow Condensed,sans-serif; font-size:20px; font-weight:300;
  transition:background .15s ease, color .15s ease; pointer-events:auto;
}
.hpRoomAnfrageBtn:hover{ background:var(--primary,#002349); color:#fff; }
.hpRoomAnfrageBtn i{ font-size:15px; }
@media (max-width:600px){ .hpRoomAnfrageBtn{ width:100%; } }

/* Angebots-Anfrage-Button (wenn im Zeitraum kein Zimmer verfügbar ist) */
.hpOfferAnfrageRow{ margin-top:14px; display:flex; justify-content:center; }
.hpOfferAnfrageWide{ width:100%; max-width:420px; }

/* Globaler Hotel-Anfrage-Button — oben rechts im Modal-Header */
.hpHotelAnfrageBtn{
  position:absolute; top:0; right:0; z-index:5;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:#fff; color:var(--primary,#002349); border:1px solid var(--primary,#002349);
  padding:8px 20px; cursor:pointer; white-space:nowrap;
  font-family:Barlow Condensed,sans-serif; font-size:20px; font-weight:300; line-height:1;
  transition:background .15s ease, color .15s ease;
}
.hpHotelAnfrageBtn:hover{ background:var(--primary,#002349); color:#fff; }
.hpHotelAnfrageBtn i{ font-size:14px; }
@media (max-width:600px){
  .hpHotelAnfrageBtn{ position:static; width:100%; margin-top:12px; }
}

/* ============================================================
   BUCHUNGS-/ANFRAGE-MODAL – NEUES DESIGN (rpbk-*)
   Komplett scoped unter #rpBookModal, damit KEINE globalen
   Klassen (.modal/.field/.grid/.submit …) kollidieren. Der
   Backdrop bleibt .modalBack (Open/Close-Logik unverändert),
   der Inhalt wird per JS (renderBooking) erzeugt. Das Datums-
   Modal (#rpDateModal) nutzt weiter das alte .modal-Markup und
   ist NICHT betroffen.
   ============================================================ */
#rpBookModal{
  --rpbk-navy:#1a2e4a; --rpbk-navy-soft:#3a4d68;
  --rpbk-coral:#e8806e; --rpbk-coral-hover:#df6f5c;
  --rpbk-grey:#7a8694; --rpbk-border:#e3e7ec; --rpbk-field-bg:#fcfdfe;
}
#rpBookModal *{ box-sizing:border-box; }

#rpBookModal .rpbk-modal{
  /* MITTIG zentriert (über den Backdrop-Flex) und so groß wie das Hotel-Modal:
     ~960px breit (--panelMax) und nahezu volle Höhe. KEIN seitlicher Versatz. */
  position:relative;
  width:min(1200px, calc(100vw - 36px));
  max-width:1200px;
  height:calc(100vh - 120px);
  height:calc(100dvh - 120px);
  max-height:calc(100vh - 120px);
  max-height:calc(100dvh - 120px);
  background:#fff; border-radius:4px;
  box-shadow:0 24px 60px rgba(26,46,74,.22);
  overflow:hidden;
  font-family:"Open Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  top: 15px;
}
#rpBookModal .rpbk-body{
  display:grid; grid-template-columns:30fr 56fr;
  /* Modalhöhe ist jetzt fest → Body füllt sie, Zeile fix, rechte Spalte scrollt. */
  height:100%;
  grid-template-rows:minmax(0, 1fr);
  align-items:stretch;
  overflow:hidden;          /* Desktop: NICHT die ganze Fläche scrollt, nur die rechte Spalte */
}
#rpBookModal .rpbk-close{
  position:absolute; top:16px; right:16px; z-index:6;
  width:36px; height:36px; border:none; background:rgba(255,255,255,.85);
  border-radius:4px; cursor:pointer; color:var(--rpbk-navy);
  display:flex; align-items:center; justify-content:center; transition:background .15s;
}
#rpBookModal .rpbk-close:hover{ background:#eef1f4; }
#rpBookModal .rpbk-close svg{ width:20px; height:20px; }

/* ---- Mobile-Topbar (wie Hotel-Modal): nur auf Mobil sichtbar ---- */
#rpBookModal .rpbk-topbar{ display:none; }

/* ---- Media (links) ---- */
#rpBookModal .rpbk-media{ display:flex; flex-direction:column; background:#fff; min-height:0; overflow:hidden; }  /* Desktop: linke Seite bleibt fix */
#rpBookModal .rpbk-media-img{
  position:relative; flex:0 0 auto; height:360px;   /* festes Banner – wächst NICHT mehr auf volle Spaltenhöhe */
  background:#dfe5ec center/cover no-repeat;
}
#rpBookModal .rpbk-media-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.32)0%,rgba(0,0,0,0)38%,rgba(0,0,0,0)70%,rgba(0,0,0,.30)100%);
}
#rpBookModal .rpbk-badge{ position:absolute; top:22px; right:22px; z-index:2; display:flex; flex-direction:column; align-items:center; color:#fff; }
#rpBookModal .rpbk-badge-circle{ width:58px; height:58px; border-radius:50%; border:3px solid rgba(255,255,255,.85); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
#rpBookModal .rpbk-badge-label{ font-size:10px; margin-top:5px; }
#rpBookModal .rpbk-rating{ position:absolute; top:98px; right:22px; z-index:2; text-align:right; color:#fff; }
#rpBookModal .rpbk-stars{ font-size:18px; letter-spacing:2px; }
#rpBookModal .rpbk-stars sup{ font-size:10px; }
#rpBookModal .rpbk-rating-txt{ font-size:12px; margin-top:2px; opacity:.95; }
#rpBookModal .rpbk-dots{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:2; }
#rpBookModal .rpbk-dots span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer; transition:width .2s, background .2s; }
#rpBookModal .rpbk-dots span.is-active{ background:#fff; width:20px; border-radius:2px; }
#rpBookModal .rpbk-media-body{ padding:26px 30px 30px; }
#rpBookModal .rpbk-loc{ display:flex; align-items:center; gap:6px; color:var(--rpbk-coral); font-size:14px; font-weight:600; margin-bottom:10px; }
#rpBookModal .rpbk-loc svg{ width:15px; height:15px; flex:0 0 auto; }
#rpBookModal .rpbk-title{ font-size:28px; font-weight:800; color:var(--rpbk-navy); margin:0 0 14px; letter-spacing:-.3px; line-height:1.15; }
#rpBookModal .rpbk-desc{ color:var(--rpbk-navy-soft); font-size:15px; line-height:1.6; margin:0 0 24px; max-width:94%; }
#rpBookModal .rpbk-features{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:2px; }
#rpBookModal .rpbk-feature{ display:flex; flex-direction:column; align-items:center; text-align:center; }
#rpBookModal .rpbk-feature i{ color:var(--rpbk-navy); font-size:26px; margin-bottom:9px; }
#rpBookModal .rpbk-feature-main{ display:block; font-weight:700; color:var(--rpbk-navy); font-size:13px; line-height:1.2; }
#rpBookModal .rpbk-feature-sub{ display:block; color:var(--rpbk-grey); font-size:12px; margin-top:2px; }

/* ---- Form (rechts) ---- */
#rpBookModal .rpbk-form{ padding:34px 36px 30px; display:flex; flex-direction:column; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#cbd3dd transparent; }  /* Desktop: rechte Seite scrollt */
#rpBookModal .rpbk-form::-webkit-scrollbar{ width:10px; }
#rpBookModal .rpbk-form::-webkit-scrollbar-thumb{ background:#cbd3dd; border-radius:6px; border:2px solid #fff; }
#rpBookModal .rpbk-form::-webkit-scrollbar-thumb:hover{ background:#b3bdca; }
#rpBookModal .rpbk-form-title{ font-size:26px; font-weight:800; color:var(--rpbk-navy); margin:0 0 8px; letter-spacing:-.3px; }
#rpBookModal .rpbk-form-sub{ color:var(--rpbk-grey); font-size:14px; line-height:1.55; margin:0 0 18px; }

/* Vorauswahl / Buchungsdaten (kompakt) */
#rpBookModal .rpbk-pre{ background:#f5f7f9; border:1px solid var(--rpbk-border); border-radius:4px; padding:12px 16px; margin:0 0 20px; }
#rpBookModal .rpbk-pre-items{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; }
#rpBookModal .rpbk-pre-item{ display:flex; align-items:center; gap:8px; color:var(--rpbk-navy); font-size:13.5px; font-weight:600; }
#rpBookModal .rpbk-pre-item svg{ width:17px; height:17px; color:var(--rpbk-coral); flex:0 0 auto; }
#rpBookModal .rpbk-pre-item i{ color:var(--rpbk-coral); }
#rpBookModal .rpbk-pre-div{ width:1px; height:18px; background:var(--rpbk-border); }
#rpBookModal .rpbk-pre-total{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding-top:12px; border-top:1px dashed var(--rpbk-border); flex-wrap:wrap; }
#rpBookModal .rpbk-pre-price{ color:var(--rpbk-navy); font-size:14px; }
#rpBookModal .rpbk-pre-price strong{ font-size:19px; margin-left:6px; }

/* Extras */
#rpBookModal .rpbk-extras{ margin:0 0 18px; }
#rpBookModal .rpbk-extras-label{ font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--rpbk-grey); margin-bottom:8px; }

/* Felder */
#rpBookModal .rpbk-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
#rpBookModal .rpbk-field{ position:relative; background:var(--rpbk-field-bg); border:1px solid var(--rpbk-border); border-radius:4px; padding:10px 14px 10px 44px; transition:border-color .15s, box-shadow .15s; }
#rpBookModal .rpbk-field:focus-within{ border-color:var(--rpbk-coral); box-shadow:0 0 0 3px rgba(232,128,110,.12); }
#rpBookModal .rpbk-field.rpbk-full{ grid-column:1 / -1; }
#rpBookModal .rpbk-ico{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--rpbk-grey); pointer-events:none; }
#rpBookModal .rpbk-field-label{ display:block; font-size:10.5px; color:var(--rpbk-grey); font-weight:600; margin-bottom:1px; }
#rpBookModal .rpbk-field input,
#rpBookModal .rpbk-field select,
#rpBookModal .rpbk-field textarea{ border:none; background:transparent; outline:none; width:100%; font-family:inherit; font-size:14px; color:var(--rpbk-navy); padding:0; }
#rpBookModal .rpbk-field input::placeholder,
#rpBookModal .rpbk-field textarea::placeholder{ color:#aab2bd; }
#rpBookModal .rpbk-field select{ appearance:none; -webkit-appearance:none; cursor:pointer; }
#rpBookModal .rpbk-field.rpbk-select::after{ content:""; position:absolute; right:14px; top:50%; width:8px; height:8px; border-right:2px solid var(--rpbk-grey); border-bottom:2px solid var(--rpbk-grey); transform:translateY(-65%) rotate(45deg); pointer-events:none; }
#rpBookModal .rpbk-field.rpbk-area{ padding-top:10px; }
#rpBookModal .rpbk-field.rpbk-area .rpbk-ico{ top:22px; transform:none; }
#rpBookModal .rpbk-field textarea{ resize:none; min-height:52px; line-height:1.5; }

/* Consent / Newsletter */
#rpBookModal .rpbk-consent{ display:flex; gap:12px; align-items:flex-start; margin:18px 0 16px; cursor:pointer; }
#rpBookModal .rpbk-consent input{ appearance:none; -webkit-appearance:none; flex:0 0 auto; width:22px; height:22px; border-radius:4px; border:1px solid var(--rpbk-border); background:#fff; cursor:pointer; position:relative; margin:1px 0 0; transition:background .15s, border-color .15s; }
#rpBookModal .rpbk-consent input:checked{ background:var(--rpbk-coral); border-color:var(--rpbk-coral); }
#rpBookModal .rpbk-consent input:checked::after{ content:""; position:absolute; left:7px; top:3px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
#rpBookModal .rpbk-consent-txt{ font-size:12.5px; color:var(--rpbk-grey); line-height:1.5; }
#rpBookModal .rpbk-consent-txt strong{ display:block; color:var(--rpbk-navy); font-size:13.5px; font-weight:700; margin-bottom:2px; }

/* Fehlermeldung */
#rpBookModal .rpBkError{ color:#c0392b; font-size:13px; margin:0 0 12px; }

/* Submit */
#rpBookModal .rpbk-submit{ width:100%; border:none; cursor:pointer; background:var(--rpbk-coral); color:#fff; font-family:inherit; font-size:16px; font-weight:700; padding:15px; border-radius:4px; display:flex; align-items:center; justify-content:center; gap:9px; transition:background .15s; }
#rpBookModal .rpbk-submit:hover{ background:var(--rpbk-coral-hover); }
#rpBookModal .rpbk-submit svg{ width:18px; height:18px; }
#rpBookModal .rpbk-submit:disabled{ background:#c3cbd6; cursor:not-allowed; }
#rpBookModal .rpbk-secure{ display:flex; align-items:center; justify-content:center; gap:8px; color:var(--rpbk-grey); font-size:12px; margin-top:14px; text-align:center; }
#rpBookModal .rpbk-secure svg{ width:15px; height:15px; flex:0 0 auto; }

/* Erfolg */
#rpBookModal .rpbk-done{ padding:46px 40px; text-align:center; }
#rpBookModal .rpbk-done-icon{ font-size:52px; color:#2e9e6b; margin-bottom:14px; }
#rpBookModal .rpbk-done-title{ font-size:22px; font-weight:800; color:var(--rpbk-navy); margin-bottom:8px; }
#rpBookModal .rpbk-done-text{ color:var(--rpbk-navy-soft); font-size:14.5px; line-height:1.6; max-width:460px; margin:0 auto 22px; }
#rpBookModal .rpbk-done .rpbk-submit{ max-width:260px; margin:0 auto; }

/* Responsive */
@media (max-width:900px){
  /* Modal = Flex-Spalte: Topbar oben fix, Body scrollt darunter (wie Hotel-Modal). Fixe Desktop-Geometrie zurücksetzen. */
  #rpBookModal .rpbk-modal{ position:relative; top:auto; bottom:auto; left:auto; right:auto; transform:none; display:flex; flex-direction:column; width:min(var(--panelMax), calc(100vw - 24px)); height:auto; max-height:calc(100vh - 96px); max-height:calc(100dvh - 96px); }
  #rpBookModal .rpbk-topbar{
    display:flex; align-items:center; gap:10px; flex:0 0 auto;
    padding:12px 14px; background:rgba(255,255,255,.97);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    border-bottom:1px solid #eef0f3;
  }
  #rpBookModal .rpbk-topbar-title{ flex:1; min-width:0; font-size:16px; font-weight:700; color:var(--rpbk-navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #rpBookModal .rpbk-topbar-close{ flex:0 0 auto; width:36px; height:36px; border:none; background:transparent; font-size:26px; line-height:1; color:var(--rpbk-navy); cursor:pointer; padding:0; }
  #rpBookModal .rpbk-close{ display:none; }   /* mobil: floating-Close aus, Topbar-Close aktiv */
  /* Body füllt den Rest und scrollt als Ganzes; Spalten-Eigenscroll (Desktop) zurücksetzen */
  #rpBookModal .rpbk-body{ display:block; flex:1 1 auto; height:auto; min-height:0; overflow-y:auto; max-height:none; }
  #rpBookModal .rpbk-media{ overflow:visible; }
  #rpBookModal .rpbk-form{ overflow:visible; padding:26px 22px 24px; }
  #rpBookModal .rpbk-media-img{ height:220px; }
  #rpBookModal .rpbk-form-title{ font-size:22px; }
}
@media (max-width:560px){
  #rpBookModal .rpbk-grid{ grid-template-columns:1fr; }
  #rpBookModal .rpbk-features{ grid-template-columns:repeat(2,1fr); gap:18px 10px; }
}


/* ════════════════════════════════════════════════════════════════
   Datums-Modal „Für ein Angebot": 3er-KACHEL-SLIDER + Kalender-Sperre
   (Kundenwunsch; JS: _dmRenderOfferPick/_dmSyncLock in reiseplaner-bawh.js)
   ════════════════════════════════════════════════════════════════ */
/* WURZEL-FIX: .rpDmOfferPick trägt aus der Chip-Ära display:flex (Z. ~7884) —
   der Slider war darin ein Flex-Item mit min-width:auto, schrumpfte nie unter
   seine Inhaltsbreite und wuchs über den Modal-Rand (rechter Pfeil unsichtbar,
   nichts zu scrollen). Pick auf block neutralisieren + Slider hart begrenzen. */
/* KEIN !important hier: es würde das inline display:none aus _dmSetMode
   („Nur Datum"-Zweig) überstimmen — der Slider bliebe dann im Datum-Modus
   sichtbar (genau der gemeldete Bug). Die Regel steht am Dateiende und
   gewinnt per Kaskade auch ohne !important gegen die Chip-Ära-Flex-Regel. */
.rpDmOfferPick{ display:block; margin-top:16px; }
.rpDmOffInfo{ font-size: 16px; font-weight: 300; color: #5b6472; margin: 20px 0px 10px 0px; text-align: center; }
.rpDmOffSlider{ display:flex; align-items:center; gap:8px; margin:2px 0 10px; width:100%; min-width:0; }
.rpDmOffVp{ overflow-x:auto; flex:1; min-width:0; scroll-snap-type:x mandatory; scroll-behavior:smooth;
            scrollbar-width:none; -ms-overflow-style:none; }
/* min-width:0 ist der entscheidende Fix: ohne ihn schrumpft das Flex-Item
   nicht unter seine Inhaltsbreite → der Viewport dehnte sich über die
   Modal-Breite (rechter Pfeil unsichtbar) und hatte nichts zu scrollen. */
.rpDmOffVp::-webkit-scrollbar{ display:none; }
.rpDmOffVp{ cursor:grab; }                 /* Drag-Affordance am Desktop */
.rpDmOffVp.dragging{ cursor:grabbing; }
.rpDmOffVp.dragging .rpDmOffTile{ pointer-events:none; } /* kein Hover-Flackern beim Ziehen */
.rpDmOffTrack{ display:flex; gap:8px; }
.rpDmOffTile{ flex:0 0 calc((100% - 24px)/3.4); scroll-snap-align:start; /* etwas schmäler; 3 voll + Anschnitt der 4. */
  display:flex; flex-direction:column; padding:0; text-align:left; cursor:pointer;
  background:#fff; border:1px solid #DDDDDF; border-radius:4px; overflow:hidden;
  font:inherit; transition:border-color .15s, box-shadow .15s; -webkit-tap-highlight-color:transparent; }
.rpDmOffTile:hover{ border-color:var(--primary,#002349); box-shadow:0 3px 10px rgba(0,0,0,.08); }
.rpDmOffTile.active{ border-color:var(--primary,#002349); box-shadow:inset 0 0 0 1px var(--primary,#002349); }
.rpDmOffTile .img{ height:64px; background:#c8d8e8 center/cover no-repeat; background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; }
.rpDmOffTile .t{ font-size:13px; line-height:1.3; color:var(--primary,#002349); padding:7px 9px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:41px; }
.rpDmOffNav{ flex:0 0 32px; width:32px; height:32px; border-radius:999px; border:1px solid #DDDDDF;
  background:#fff; color:var(--primary,#002349); cursor:pointer; display:grid; place-items:center; font-size:13px;
  transition:border-color .15s; }
.rpDmOffNav:hover{ border-color:var(--primary,#002349); }
#rpDmLock{ position:absolute; inset:0; z-index:6; background:rgba(255,255,255,.72);
  display:flex; align-items:center; justify-content:center; cursor:not-allowed; padding-top: 60px; }
.rpDmLockBadge{ background:var(--primary,#002349); color:#fff; border-radius:4px; padding:9px 18px;
  font-size:16px; display:inline-flex; align-items:center; gap:9px; box-shadow:0 6px 18px rgba(2,6,23,.18); font-weight:300; }
#rpDmPrev:disabled, #rpDmNext:disabled{ opacity:.35; cursor:not-allowed; }

/* ── RE-APPLY: Hotel-Kacheln — Preis/Button bündig an der Unterkante ──
   Dieser Fix ging beim CSS-Basis-Tausch zweimal verloren; als Override-Block
   am DATEIENDE überlebt er Änderungen an den Basis-Regeln weiter oben.
   (NICHT nach oben verschieben/mit den Basisregeln zusammenlegen.) */
.rpCard{ display:flex; flex-direction:column; }
.rpCardBody{ display:flex; flex-direction:column; flex:1; }
.rpCardPriceRow{ margin-top:auto; }

/* ═══════════════════════════════════════════════════════════════════
   ANGEBOTE — Angebots-Badge ERSETZT das Vergrößern-Icon auf dem
   Vorschaubild der Angebots-Karte (links oben, exakt dessen Position).
   Galerie-Pfeile, Bildzähler und Bild-Klick (Lightbox) unverändert.
   ═══════════════════════════════════════════════════════════════════ */
.hpOfferImgBadge{
  position:absolute; top:8px; left:8px; z-index:4;
  font-size:13px; padding:4px 9px; cursor:default;
  max-width:calc(100% - 16px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 1px 4px rgba(15,23,42,.25);
  pointer-events:none;
}

/* ═══════════════════════════════════════════════════════════════════
   BUCHUNGS-/ANFRAGE-MODAL — Umbau (Kundenwunsch):
   · LINKS unten: „Ihre Auswahl" + Extras dazubuchen
   · RECHTS: Sticky-Bar ganz oben (Datum/Zimmer/Preis bleibt sichtbar)
   · FOOTER-Bar unten: „Jetzt Buchen"/„Jetzt Anfragen" (grau bis Pflicht-
     felder ok — Logik unverändert via #rpBkSubmit[disabled])
   Alles scoped auf #rpBookModal; Regeln stehen am DATEIENDE und
   überschreiben die Basis-Regeln oben per Kaskade.
   ═══════════════════════════════════════════════════════════════════ */

/* Body-Grid: 2 Spalten wie bisher + Footer als eigene volle Zeile unten */
#rpBookModal .rpbk-body{ grid-template-rows:minmax(0,1fr) auto; }

/* Linke Spalte scrollt jetzt (Auswahl + Extras brauchen Platz) */
#rpBookModal .rpbk-media{ overflow-y:auto; scrollbar-width:thin; scrollbar-color:#cbd3dd transparent; }
#rpBookModal .rpbk-media::-webkit-scrollbar{ width:10px; }
#rpBookModal .rpbk-media::-webkit-scrollbar-thumb{ background:#cbd3dd; border-radius:6px; border:2px solid #fff; }
#rpBookModal .rpbk-media::-webkit-scrollbar-thumb:hover{ background:#b3bdca; }

/* „Ihre Auswahl" (links unten) */
#rpBookModal .rpbk-media-sel{ margin-top:22px; border-top:1px solid var(--rpbk-border); padding-top:16px; }
#rpBookModal .rpbk-sel-line{ display:flex; align-items:flex-start; gap:9px; color:var(--rpbk-navy); font-size:13.5px; font-weight:600; margin-bottom:8px; }
#rpBookModal .rpbk-sel-line i{ color:var(--rpbk-coral); width:16px; text-align:center; margin-top:2px; flex:0 0 auto; }
#rpBookModal .rpbk-media .rpBkRooms{ display:flex; flex-direction:column; gap:8px; margin-top:2px; }
#rpBookModal .rpbk-media .rpBkRoomLine{ display:flex; gap:9px; align-items:flex-start; color:var(--rpbk-navy); font-size:13.5px; }
#rpBookModal .rpbk-media .rpBkRoomLine > i{ color:var(--rpbk-coral); width:16px; text-align:center; margin-top:3px; flex:0 0 auto; }
#rpBookModal .rpbk-media .rpBkRoomName{ font-weight:600; display:block; }
#rpBookModal .rpbk-media .rpBkRoomArra,
#rpBookModal .rpbk-media .rpBkRoomOffer{ display:block; color:var(--rpbk-grey); font-weight:400; font-size:12.5px; margin-top:2px; }
#rpBookModal .rpbk-media .rpBkRoomArra i,
#rpBookModal .rpbk-media .rpBkRoomOffer i{ margin-right:5px; }
#rpBookModal .rpbk-media .rpbk-extras{ margin:16px 0 0; }

/* Sticky-Bar rechts oben (klebt am oberen Rand der scrollenden Formular-Spalte) */
#rpBookModal .rpbk-sticky{
  position:sticky; top:0; z-index:5; background:#fff;
  margin:-34px -36px 20px; padding:16px 36px 12px;
  border-bottom:1px solid var(--rpbk-border);
}
#rpBookModal .rpbk-sticky .rpbk-pre{ margin:0; }

/* Footer-Bar (ganz unten im Modal, volle Breite über beide Spalten) */
#rpBookModal .rpbk-footer{
  grid-column:1 / -1; position:sticky; bottom:0; z-index:6;
  background:#fff; border-top:1px solid var(--rpbk-border);
  padding:12px 24px; display:flex; align-items:center;
  justify-content:space-between; gap:12px 18px; flex-wrap:wrap;
  box-shadow:0 -4px 14px rgba(26,46,74,.06);
}
#rpBookModal .rpbk-footer-info{ display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap; min-width:0; }
#rpBookModal .rpbk-footer .rpBkError{ margin:0; flex-basis:100%; }
#rpBookModal .rpbk-footer .rpbk-submit{ width:auto; min-width:220px; padding:13px 28px; flex:0 0 auto; }

/* Mobil: Sticky-Rand an das schmalere Formular-Padding anpassen */
@media (max-width:900px){
  #rpBookModal .rpbk-sticky{ margin:-26px -22px 18px; padding:14px 22px 10px; }
  #rpBookModal .rpbk-footer{ padding:10px 14px; }
  #rpBookModal .rpbk-footer .rpbk-submit{ min-width:0; flex:1 1 auto; }
}

/* ═══════════════════════════════════════════════════════════════════
   BUCHUNGS-MODAL — Topbar wie beim Hotel-Modal (Kundenwunsch):
   weiße Leiste IMMER ganz oben sichtbar — Text (Hotelname) links,
   „ד ganz rechts. Content (inkl. Sticky-Preisbar) scrollt DARUNTER.
   Die bisher nur mobile .rpbk-topbar wird damit auch am Desktop aktiv;
   das schwebende runde X (.rpbk-close) entfällt.
   ═══════════════════════════════════════════════════════════════════ */
#rpBookModal .rpbk-modal{ display:flex; flex-direction:column; }
#rpBookModal .rpbk-topbar{
  display:flex; align-items:center; gap:10px; flex:0 0 auto;
  padding:13px 18px; background:#fff;
  border-bottom:1px solid var(--rpbk-border);
  position:relative; z-index:7;               /* über Sticky-Bar (5) & Footer (6) */
}
#rpBookModal .rpbk-topbar-title{
  flex:1; min-width:0; font-size:17px; font-weight:700; color:var(--rpbk-navy);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left;
}
#rpBookModal .rpbk-topbar-close{
  flex:0 0 auto; width:36px; height:36px; border:none; background:#fff;
  border-radius:4px; font-size:26px; line-height:1; color:var(--rpbk-navy);
  cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center;
  transition:background .15s;
}
#rpBookModal .rpbk-topbar-close:hover{ background:#eef1f4; }
#rpBookModal .rpbk-close{ display:none; }      /* altes Float-X aus (auch Desktop) */
/* Body füllt den Rest unter der Topbar (Desktop-Grid bleibt, nur Höhe flexibel) */
#rpBookModal .rpbk-body{ flex:1 1 auto; height:auto; min-height:0; }
/* Sticky-Bar rechts oben braucht keinen Platz mehr fürs Float-X */
#rpBookModal .rpbk-sticky{ z-index:5; }

/* ═══════════════════════════════════════════════════════════════════
   BUCHUNGS-MODAL — linke Spalte kompakt (Kundenwunsch):
   · Hotelbild kleiner, KEINE Hotel-Infos mehr darunter
   · „Ihre Auswahl" direkt unter dem Bild — Zimmer mit kleinem Bild
   · Buchung: Extras kompakter · Anfrage: Zimmerwunsch-Dropdown
   ═══════════════════════════════════════════════════════════════════ */
#rpBookModal .rpbk-media-img{ height:240px; }
@media (max-width:900px){ #rpBookModal .rpbk-media-img{ height:180px; } }
#rpBookModal .rpbk-media-body{ padding:18px 22px 22px; }
#rpBookModal .rpbk-media-sel{ margin-top:0; border-top:none; padding-top:0; }

/* Auswahl-Zeile: kleines Zimmerbild + Name/Verpflegung/Angebot */
#rpBookModal .rpbk-selroom{ display:flex; align-items:center; gap:11px; margin-top:8px; }
#rpBookModal .rpbk-selroom-img{
  flex:0 0 auto; width:66px; height:50px; border-radius:4px;
  background:#dfe5ec center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
  color:#9aa7b5; font-size:17px;
}
#rpBookModal .rpbk-selroom-txt{ min-width:0; }
#rpBookModal .rpbk-selroom-name{ display:block; font-weight:700; color:var(--rpbk-navy); font-size:13.5px; line-height:1.3; }
#rpBookModal .rpbk-selroom-sub{ display:block; color:var(--rpbk-grey); font-size:12.5px; margin-top:1px; }
#rpBookModal .rpbk-selroom-sub i{ color:var(--rpbk-coral); margin-right:5px; }

/* Extras kompakter (nur Buchungs-Modal, Extras sitzen links) */
#rpBookModal .rpbk-media .rpbk-extras{ margin:14px 0 0; }
#rpBookModal .rpbk-media .rpBkExtras{ gap:4px; }
#rpBookModal .rpbk-media .rpBkExtra{ padding:5px 9px; font-size:13px; border-radius:4px; gap:8px; }
#rpBookModal .rpbk-media .rpBkExtra input{ width:14px; height:14px; }

/* Zimmerwunsch-Dropdown (Anfrage-Modal) — nutzt die rpbk-field-Optik */
#rpBookModal .rpbk-media-drop{ margin:14px 0 0; }
#rpBookModal .rpbk-ico-fa{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--rpbk-grey); font-size:15px; pointer-events:none;
}

/* ═══════════════════════════════════════════════════════════════════
   BUCHUNGS-MODAL — Extras eingeklappt: Top 5 sichtbar, Rest hinter
   „+ X weitere anzeigen". ANGEHAKTE Extras (.on) bleiben IMMER
   sichtbar, auch eingeklappt — die eigene Auswahl verschwindet nie.
   ═══════════════════════════════════════════════════════════════════ */
#rpBookModal .rpBkExtras:not(.rpbk-x-open) .rpbk-x-item.rpbk-x-more:not(.on){ display:none; }
#rpBookModal .rpbk-extras-more{
  margin-top:6px; width:100%; display:block;
  background:none; border:1px dashed var(--rpbk-border); border-radius:4px;
  padding:7px 10px; font-size:13px; font-weight:600; font-family:inherit;
  color:var(--rpbk-coral); cursor:pointer; text-align:center;
  transition:background .15s, border-color .15s;
}
#rpBookModal .rpbk-extras-more:hover{ background:#f6f8fa; border-color:#cbd3dd; }

/* ═══════════════════════════════════════════════════════════════════
   BUCHUNGS-MODAL — TWO-STEP-EXTRAS: Schritt 2 (Konfiguration) klappt
   nach dem Anhaken direkt unter der Zeile auf.
   person/einheit → Stepper · tag/uhrzeit → Tages-Chips · zimmer → Hinweis
   ═══════════════════════════════════════════════════════════════════ */
#rpBookModal .rpbk-x-item{ display:flex; flex-direction:column; }
#rpBookModal .rpbk-x-item > .rpBkExtra{ width:100%; }
#rpBookModal .rpBkExtraPrice small{ font-weight:500; color:var(--rpbk-grey); font-size:11px; }
#rpBookModal .rpbk-x-cfg{
  display:none; margin:3px 0 5px; padding:8px 10px;
  background:#f6f8fa; border:1px solid var(--rpbk-border); border-radius:4px;
}
#rpBookModal .rpbk-x-item.on .rpbk-x-cfg{ display:block; }
#rpBookModal .rpbk-x-cfg-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:12.5px; font-weight:600; color:var(--rpbk-navy);
}
#rpBookModal .rpbk-x-step{ display:inline-flex; align-items:center; gap:10px; }
#rpBookModal .rpbk-x-step button{
  width:26px; height:26px; border:1px solid var(--rpbk-border); background:#fff;
  border-radius:4px; cursor:pointer; font-size:15px; line-height:1; color:var(--rpbk-navy);
}
#rpBookModal .rpbk-x-step button:hover{ background:#eef1f4; }
#rpBookModal .rpbk-x-step b{ min-width:20px; text-align:center; font-size:13.5px; color:var(--rpbk-navy); }
#rpBookModal .rpbk-x-days{ display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
#rpBookModal .rpbk-x-day{
  border:1px solid var(--rpbk-border); background:#fff; color:var(--rpbk-grey);
  font-size:12px; font-weight:600; padding:4px 9px; border-radius:99px; cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
#rpBookModal .rpbk-x-day:hover{ border-color:#cbd3dd; }
#rpBookModal .rpbk-x-day.on{ background:var(--rpbk-coral); border-color:var(--rpbk-coral); color:#fff; }

/* ═══════════════════════════════════════════════════════════════════
   EXTRA-KONFIGURATIONS-POPUP (rpExtraCfg) — Two-Step überall:
   öffnet sich beim Anwählen eines Extras (Hotel-Modal, Zimmer-Kacheln,
   Banner) mit Bild, Beschreibung, Preis/Einheit + Stepper/Tages-Chips.
   Nutzt die .rpbk-x-step/.rpbk-x-day-Optik aus dem Buchungs-Modal.
   ═══════════════════════════════════════════════════════════════════ */
#rpXCfgOv{
  position:fixed; inset:0; z-index:99999; background:rgba(15,23,42,.45);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
#rpXCfgOv .rpXCfg{
  background:#fff; border-radius:8px; width:100%; max-width:400px;
  max-height:min(86vh, 640px); overflow-y:auto;
  box-shadow:0 18px 50px rgba(15,23,42,.28);
}
#rpXCfgOv .rpXCfgImg{ height:140px; background:#dfe5ec center/cover no-repeat; border-radius:8px 8px 0 0; }
#rpXCfgOv .rpXCfgBody{ padding:16px 18px 18px; }
#rpXCfgOv .rpXCfgName{ font-size:16px; font-weight:700; color:var(--rpbk-navy, #1a2e4a); }
#rpXCfgOv .rpXCfgPrice{ font-size:14px; font-weight:700; color:var(--rpbk-navy, #1a2e4a); margin-top:2px; }
#rpXCfgOv .rpXCfgPrice small{ font-weight:500; color:var(--rpbk-grey, #6b7a8c); font-size:11.5px; }
#rpXCfgOv .rpXCfgDesc{ font-size:13px; color:var(--rpbk-grey, #6b7a8c); line-height:1.5; margin-top:8px; }
#rpXCfgOv .rpXCfgRow{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:13px; font-weight:600; color:var(--rpbk-navy, #1a2e4a); margin-top:14px;
}
#rpXCfgOv .rpbk-x-step{ display:inline-flex; align-items:center; gap:10px; }
#rpXCfgOv .rpbk-x-step button{
  width:28px; height:28px; border:1px solid var(--rpbk-border, #e3e8ee); background:#fff;
  border-radius:4px; cursor:pointer; font-size:16px; line-height:1; color:var(--rpbk-navy, #1a2e4a);
}
#rpXCfgOv .rpbk-x-step button:hover{ background:#eef1f4; }
#rpXCfgOv .rpbk-x-step b{ min-width:22px; text-align:center; font-size:14px; color:var(--rpbk-navy, #1a2e4a); }
#rpXCfgOv .rpbk-x-days{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
#rpXCfgOv .rpbk-x-day{
  border:1px solid var(--rpbk-border, #e3e8ee); background:#fff; color:var(--rpbk-grey, #6b7a8c);
  font-size:12px; font-weight:600; padding:4px 9px; border-radius:99px; cursor:pointer;
}
#rpXCfgOv .rpbk-x-day.on{ background:var(--rpbk-coral, #e8927c); border-color:var(--rpbk-coral, #e8927c); color:#fff; }
#rpXCfgOv .rpXCfgTotal{
  margin-top:16px; padding-top:12px; border-top:1px solid var(--rpbk-border, #e3e8ee);
  font-size:13.5px; color:var(--rpbk-navy, #1a2e4a); display:flex; justify-content:space-between; align-items:center;
}
#rpXCfgOv .rpXCfgTotal strong{ font-size:16px; }
#rpXCfgOv .rpXCfgBtns{ display:flex; gap:10px; margin-top:14px; }
#rpXCfgOv .rpXCfgCancel{
  flex:0 0 auto; background:#fff; border:1px solid var(--rpbk-border, #e3e8ee); border-radius:4px;
  padding:10px 16px; font-size:13.5px; font-weight:600; color:var(--rpbk-grey, #6b7a8c); cursor:pointer;
}
#rpXCfgOv .rpXCfgCancel:hover{ background:#f6f8fa; }
#rpXCfgOv .rpXCfgOk{
  flex:1; background:var(--rpbk-coral, #e8927c); border:none; border-radius:4px;
  padding:10px 16px; font-size:13.5px; font-weight:700; color:#fff; cursor:pointer;
}
#rpXCfgOv .rpXCfgOk:hover{ filter:brightness(.96); }

/* Pro-Tag-Extras: Hinweis-Zeile im Konfigurations-Panel (statt Tages-Chips) */
#rpBookModal .rpbk-x-cfg-note{ font-size:12px; color:var(--rpbk-grey); margin-top:5px; }

/* Uhrzeit je Tag (uhrzeit-Extras): Tages-Zeile mit eigenen Slot-Chips */
#rpBookModal .rpbk-x-time-row{ display:flex; align-items:flex-start; gap:8px; margin-top:6px; }
#rpBookModal .rpbk-x-time-row .rpbk-x-days{ margin-top:0; }
#rpBookModal .rpbk-x-time-day{ font-size:12px; font-weight:700; color:var(--rpbk-navy); min-width:44px; padding-top:5px; flex:0 0 auto; }
#rpXCfgOv .rpXCfgTimeRow{ display:flex; align-items:flex-start; gap:8px; margin-top:8px; }
#rpXCfgOv .rpXCfgTimeRow .rpbk-x-days{ margin-top:0; }
#rpXCfgOv .rpXCfgTimeDay{ font-size:12px; font-weight:700; color:var(--rpbk-navy, #1a2e4a); min-width:44px; padding-top:5px; flex:0 0 auto; }

/* ═══════════════════════════════════════════════════════════════════
   EINHEITLICHER LOADING-SPINNER (rpLoad) — Overlay über beliebigen
   Containern (z. B. Hotel-Modal beim Datums-Wechsel). Erscheint erst
   nach 120ms Verzögerung → bei Cache-Hits (instant) kein Aufblitzen.
   ═══════════════════════════════════════════════════════════════════ */
.rpLoadHost{ position:relative; }
.rpLoadOv{
  position:absolute; inset:0; z-index:60; display:none;
  align-items:center; justify-content:center;
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(1.5px); backdrop-filter:blur(1.5px);
}
.rpLoadOv.on{ display:flex; }
.rpLoadSpin{
  width:38px; height:38px; border-radius:50%;
  border:3px solid #dfe5ec; border-top-color:var(--rpbk-coral, #e8927c);
  animation:rpLoadSpin .7s linear infinite;
}
@keyframes rpLoadSpin{ to{ transform:rotate(360deg); } }

/* Loading-Spinner: Status-Texte (laufen der Reihe nach durch, sanfter Fade) */
.rpLoadInner{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.rpLoadTxt{
  font-size:13.5px; font-weight:600; color:var(--rpbk-navy, #1a2e4a);
  text-align:center; max-width:260px; line-height:1.4; min-height:19px;
  opacity:1; transition:opacity .16s ease;
}
.rpLoadTxt.swap{ opacity:0; }

/* Vollbild-Variante des einheitlichen Spinners (View-/Seiten-Übergänge) */
#rpLoadGlobal{
  position:fixed; inset:0; z-index:10050; display:none;
  align-items:center; justify-content:center;
  background:rgba(255,255,255,.68);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
#rpLoadGlobal.on{ display:flex; }

/* ═══════════════════════════════════════════════════════════════════
   HOTEL-MODAL — ZIMMER ALS LISTE (Kundenwunsch, 3 Stufen):
   Stufe 1: kompakte Listen-Zeile (.hpRoomListHead) — Accordion
   Stufe 2: Klick → bekannte Karten-Ansicht (.hpListOpen)
   Stufe 3: „Mehr Details anzeigen" → alle Infos + Extras (.hpDetOpen)
   Gilt für Zimmerkategorien- UND Angebote-Tab.
   ═══════════════════════════════════════════════════════════════════ */
.hpRoomCard .hpRoomListHead{
  display:flex; align-items:center; gap:12px; width:100%;
  background:#fff; border:none; padding: 16px 14px;
  cursor:pointer; text-align:left; font-family:inherit;
  transition:background .12s;
}
.hpRoomCard .hpRoomListHead:hover{ background:#f8fafc; }
.hpRoomCard.hpListOpen > .hpRoomListHead{ border-bottom:1px solid #edf1f5; background:#fbfcfe; }
.hpRoomListThumb{
  flex:0 0 auto; width:58px; height:44px; border-radius:4px;
  background:#dfe5ec center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
  color:#9aa7b5; font-size:15px;
}
.hpRoomListMain{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.hpRoomListName{
  font-weight:500; color:var(--rpbk-navy, #1a2e4a); font-size:22px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hpRoomListMeta{ font-size:16px; font-weight:300; color:var(--rpbk-grey, #6b7a8c); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hpRoomListMetaOffer i{ color:var(--rpbk-coral, #e8927c); margin-right:4px; }
.hpRoomListSel{ flex:0 0 auto; color:#16a34a; font-size:12.5px; font-weight:700; white-space:nowrap; }
.hpRoomListPrice{ flex:0 0 auto; font-weight:500; color:var(--rpbk-navy, #1a2e4a); font-size:22px; white-space:nowrap; }
.hpRoomListPrice em{ font-style:normal; color:#b91c1c; font-size:12.5px; font-weight:700; }
.hpRoomListChev{ flex:0 0 auto; color:var(--rpbk-grey, #6b7a8c); font-size:13px; transition:transform .18s; }
.hpRoomCard.hpListOpen > .hpRoomListHead .hpRoomListChev{ transform:rotate(180deg); }

/* Stufe 2: zugeklappt ist NUR die Listen-Zeile sichtbar.
   Ausnahme: GEWÄHLTE Zimmer sind immer offen (Kopfzeile dort versteckt). */
.hpRoomCard:not(.hpListOpen):not(.selected) > .hpRoomCardRow,
.hpRoomCard:not(.hpListOpen):not(.selected) > .hpRoomDetails,
.hpRoomCard:not(.hpListOpen):not(.selected) > .hpRoomExtras{ display:none !important; }

/* Gewähltes Zimmer: Listen-Zeile ausblenden (wäre doppelt) — Karte fix offen,
   Extras DIREKT darunter sichtbar (ohne Details-Klick). */
.hpRoomCard.selected > .hpRoomListHead{ display:none !important; }

/* Stufe 3: Bei NICHT gewählten Zimmern erscheinen die Extras (Vorschau) erst
   mit geöffneten Details (Klick auf die offene Karte). */
.hpRoomCard:not(.hpDetOpen):not(.selected) > .hpRoomExtras{ display:none !important; }

/* Klick auf die offene Karte öffnet die Details → Zeiger signalisiert das */
.hpRoomCard.hpListOpen > .hpRoomCardRow,
.hpRoomCard.selected > .hpRoomCardRow{ cursor:pointer; }

/* Extras-Vorschau (Zimmer noch nicht gewählt): sichtbar, aber nicht buchbar */
.hpRoomExtras.preview .hpRoomExtraTile{ cursor:default; }
.hpRoomExtras.preview .hpRoomExtraCorner{ display:none; }
.hpRoomExtrasHint{
  margin:8px 0 0; padding:7px 11px; border-radius:4px;
  background:#fef3c7; border:1px solid #fde68a;
  font-size:12.5px; font-weight:600; color:#92400e;
}
@media (max-width:600px){
  .hpRoomListMeta{ display:none; }
  .hpRoomCard .hpRoomListHead{ padding:10px 10px; gap:9px; }
  .hpRoomListThumb{ width:48px; height:38px; }
}

/* Spinner sichtbar → Scrollen gesperrt (Vollbild-Variante sperrt die Seite;
   Container-Variante blockiert Wheel/Touch über das Overlay selbst) */
html.rpLoadNoScroll, body.rpLoadNoScroll{ overflow:hidden !important; }
.rpLoadOv{ overscroll-behavior:contain; touch-action:none; }

/* Knappheits-Badge: „Fast ausgebucht" (ersetzt „x Zimmer verfügbar";
   erscheint nur noch bei 1–2 verfügbaren Zimmern, ab 3 gar nicht) */
.hpRoomCountBadge.hpRoomScarce{
  background:#fff; border:1px solid #fecaca; color:#b91c1c;
}
.hpRoomCountBadge.hpRoomScarce i{ margin-right:5px; color:#dc2626; }

/* „Fast ausgebucht"-Badge: in der LISTEN-Zeile UND in der aufgeklappten Karte
   sichtbar — nie doppelt, da die Listen-Zeile bei offener Karte komplett
   ausgeblendet ist (.hpListOpen versteckt den Kopf). */
.hpRoomListHead .hpRoomCountBadge{ flex:0 0 auto; font-size:14px; white-space:nowrap; }

/* Aufgeklappte Zeile: Listen-Zeile KOMPLETT ausblenden (keine doppelten Infos —
   die Karte zeigt ja alles). Zuklappen: anderes Zimmer anklicken (Accordion). */
.hpRoomCard.hpListOpen > .hpRoomListHead{ display:none !important; }

/* ═══ Extras-Kacheln im Hotel-Modal: KOMPAKTER (Kundenwunsch) ═══ */
.hpRoomExtras .hpRoomExtraTile{ flex:0 0 calc((100% - 20px) / 4.2); }
.hpRoomExtras .hpRoomExtraPic{ flex:0 0 72px; height:72px; min-height:72px; max-height:72px; }
.hpRoomExtras .hpRoomExtraPic img{ max-height:72px; }
.hpRoomExtras .hpRoomExtraBody{ padding:9px 11px 0; }
.hpRoomExtras .hpRoomExtraKick{ font-size:10px; letter-spacing:1px; }
.hpRoomExtras .hpRoomExtraName{ font-size:16px; font-weight:500; margin-top:3px; }
.hpRoomExtras .hpRoomExtraDesc{ font-size:11.5px; margin-top:4px; -webkit-line-clamp:1; }
.hpRoomExtras .hpRoomExtraFoot{ padding-bottom:9px; }
.hpRoomExtras .hpRoomExtraPrice{ font-size:20px; }
.hpRoomExtras .hpRoomExtraPriceBase{ font-size:11px; }
.hpRoomExtras .hpRoomExtrasTitle{ font-size:13.5px; }
@media (max-width:900px){
  .hpRoomExtras .hpRoomExtraTile{ flex-basis:calc((100% - 10px) / 2.4); }
}

/* ═══ Hotel-Modal-Kopf: Sterne-Zeile + Anfrage-Button (Kundenwunsch) ═══ */
.hpStarsLine{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
/* Sterne im Modal EXAKT wie auf der Übersicht (.rpCardStars) */
.hpStarsRow{ font-size:14px; color:#adacad; font-weight:700; letter-spacing:.02em; padding-top:0; }
.hpTopAnfrageBtn{ flex:0 0 auto; }
@media (max-width:600px){ .hpTopAnfrageBtn{ width:auto; } }

/* Buchungs-/Anfrage-Modal: Sterne auf dem Hotelbild im Übersichts-Stil
   (rpStarIco-Glyphen). Auf dem Foto bleiben sie hell/lesbar — leere Sterne
   halbtransparent statt grau. Der %-Kreis (Weiterempfehlung) ist entfernt. */
#rpBookModal .rpbk-stars{ font-size:14px; letter-spacing:.02em; }
#rpBookModal .rpbk-stars .rpStarIco{ color:#fff; margin-left:3px; }
#rpBookModal .rpbk-stars .rpStarIco.rpStarIcoEmpty{ color:rgba(255,255,255,.4); }
#rpBookModal .rpbk-stars .starLabel{ font-size:13px; margin-left:3px; }

/* Buchungs-/Anfrage-Modal: Sterne-Block RECHTS OBEN im Bild (Platz des
   entfernten %-Kreises) — „…*s" + darunter „4-Sterne Superior" */
#rpBookModal .rpbk-rating{ top:16px; right:16px; }

/* ═══ HEADER: Logo auf Mobil WIRKLICH mittig (Kundenwunsch) ═══
   Problem: mobiles Grid „auto 1fr auto" — links Hamburger (~40px), rechts
   leere Spalte (0px) → die Mitte der 1fr-Spalte ist nach rechts verschoben.
   Fix: Logo absolut zur Leiste zentrieren — exakt mittig, unabhängig von
   Hamburger-/Spaltenbreiten. Desktop (2×1fr-Spalten) bleibt unverändert. */
@media (max-width: 860px){
  .navMBar .brand{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    justify-self: auto;
    pointer-events: none;          /* Leiste bleibt frei tippbar … */
  }
  .navMBar .brand .logoCircle{ pointer-events: auto; }  /* … Logo selbst klickbar */
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER-REDESIGN (Kundenwunsch, lt. Screenshots):
   · Links: Hamburger + „Menü" (Desktop & Mobil) + Telefon/Mail (Desktop)
   · Mitte: großes Logo, ragt unten aus der Leiste — beim Scrollen
     animiert klein in die Leiste (body.rpNavSmall)
   · Rechts: Koralle-Button — Desktop „🔍 jetzt Hotel finden ›",
     Mobil kompakt „Hotel finden"
   Die alten Desktop-Textlinks liegen jetzt im Drawer-Menü.
   ═══════════════════════════════════════════════════════════════════ */
.navMBar{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.navMBar .menu{ display:none !important; }   /* Sicherheitsnetz für Alt-Markup */
.hamburger{ display:flex; }                  /* jetzt auch am Desktop sichtbar */
/* rpNavLeft statt navLeft: .navLeft existiert bereits an anderer Stelle
   (Datums-Box, flex-direction:column) — Namens-Kollision war der Layout-Bruch! */
.navMBar .rpNavLeft{ display:flex; flex-direction:row; align-items:center; gap:12px; min-width:0; }
.menuLabel{ font-size: 23px; line-height: 48px; font-weight:300; color:#7b8794; cursor:pointer; user-select:none; }
.menuLabel:hover{ color:var(--primary, #002349); }
.navContact{ display:flex; align-items:center; gap:32px; margin-left:50px; }
.navContact a{
  display:inline-flex; align-items:center; gap:6px;
  color:#7b8794; text-decoration:none; font-size:20px; white-space:nowrap; font-weight:300;
}
.navContact a i{ font-size:15px; color:#9aa7b5; }
.navContactIco{ width:22px; height:22px; flex:0 0 auto; color:#9aa7b5; }
.navContact a:hover .navContactIco{ color:var(--primary, #002349); }
.navContact a:hover{ color:var(--primary, #002349); }
@media (max-width:1450px){ .navContact .navMail{ display:none; } } /* LOGOKOLLISION (04.08., Feedback: E-Mail ueberlappte das zentrierte Logo zwischen ~1241-1450px) */
@media (max-width:960px){ .navContact{ display:none; } }

/* ── Logo: groß + hängt unten raus; klein beim Scrollen (animiert) ── */
.navMBar .brand{
  position:absolute; left:50%; top:-2px; transform:translateX(-50%);
  z-index:6; justify-self:auto; pointer-events:none;
  transition:top .28s ease;
}
.navMBar .brand .logoCircle{ pointer-events:auto; height:auto; }
.brand .logoCircle img, .brand img{
  width:140px; height:140px;
  transition:width .28s ease, height .28s ease;
}
body.rpNavSmall .navMBar .brand{ top:7px; }
body.rpNavSmall .brand .logoCircle img,
body.rpNavSmall .brand img{ width:56px; height:56px; filter:none; }

/* ── CTA-Button: Icon + Lang-/Kurztext ── */
.navBtn .navBtnIco{ margin-right:10px; font-size:16px; }
.navBtn .navBtnShort{ display:none; }

/* ── Mobil (≤860px): Button sichtbar & kompakt, Logo etwas kleiner ── */
@media (max-width:860px){
  .navRight .navBtn{
    display:inline-flex; align-items:center;
    padding:0 16px; font-size:16px; line-height:38px;
  }
  .navBtn .navBtnIco, .navBtn .navBtnLong, .navBtn .arrow{ display:none; }
  .navBtn .navBtnShort{ display:inline; }
  .navMBar .brand{ top:6px; }
  .brand .logoCircle img, .brand img{ width:86px; height:86px; }
  body.rpNavSmall .brand .logoCircle img,
  body.rpNavSmall .brand img{ width:50px; height:50px; }
  body.rpNavSmall .navMBar .brand{ top:10px; }
}

/* ═══ Drawer-Menü am DESKTOP: kompaktes Panel unter „Menü" statt 100% Breite ═══
   (Mobil bleibt das volle Overlay wie bisher.) */
@media (min-width: 861px){
  .mobileMenu{
    /* Bündig unter dem Menü-Button: navMBar ist auf 1560px ZENTRIERT
       (.nav padding 28px + .navMBar padding 30px) → linke Kante berechnen. */
    left: calc(max(28px, (100vw - 1560px) / 2) + 30px);
    right: auto;
    width: 320px;
    border-radius: 0 0 12px 12px;
    border: 1px solid var(--border, #e5e9f0);
    border-top: none;
    box-shadow: 0 18px 40px rgba(0,0,0,.14);
  }
}

/* Chat-Quick-Fragen: volle Frage als Chip (mehrzeilig erlaubt, linksbündig) */
.rpChatQuickBtn.rpChatQuickQ{
  white-space: normal;
  text-align: left;
  line-height: 1.35;
  font-size: 16px;
}

/* ═══ MOBIL: Tastatur offen (Chat-Input fokussiert, body.rpKbOpen) ═══
   Tab-Bar weg + Chat bis ganz unten — !important überschreibt bewusst
   auch die Inline-Styles des Chat-Overlays (doOpenChat, bottom:58px). */
@media (max-width: 600px){
  body.rpKbOpen .rpMobileTabs{ display:none !important; }
  body.rpKbOpen #rpChatSide{ bottom:0 !important; }
}

/* ═══ ANGEBOTE: gewählte Themen GANZ LINKS als Chips (Kundenwunsch) ═══ */
.ofActiveThemes{ display:flex; align-items:center; gap:8px; flex:0 0 auto; max-width:34%; flex-wrap:wrap; }
.ofActiveThemeChip{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--rpbk-coral, #ef8a7d); color:#fff; border:none; cursor:pointer;
  font-size:13px; font-weight:300; padding:7px 12px; border-radius:2px;
  white-space:nowrap;
}
.ofActiveThemeChip span{ font-size:15px; line-height:1; opacity:.85; }
.ofActiveThemeChip:hover span{ opacity:1; }

/* ═══ HOTEL-MODAL: „online ausgebucht"-Hinweis über der Zimmerliste ═══ */
.hpSoldOutNote{
  display:flex; gap:12px; align-items:flex-start;
  background:#fff7ed; border:1px solid #fed7aa; border-radius:8px;
  padding:13px 15px; margin:0 0 16px;
  font-size:13.5px; line-height:1.5; color:#7c2d12;
}
.hpSoldOutNote i{ color:#ea580c; font-size:16px; margin-top:2px; flex:0 0 auto; }
.hpSoldOutNote strong{ color:#9a3412; }
.hpSoldOutNote em{ font-style:normal; font-weight:700; }

/* Ausgebucht-Badge im Modal-Kopf (gut sichtbar, unter den Sternen) */
#hpSoldOutTop{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:10px; padding:7px 13px; border-radius:99px;
  background:#fef2f2; border:1px solid #fecaca; color:#b91c1c;
  font-size:13.5px; font-weight:700; width:fit-content;
}
#hpSoldOutTop i{ color:#dc2626; }
/* Themen-Kacheln: Sortierung erfolgt per DOM (set-weise) — kein CSS order mehr. */

/* ═══ MOBIL: iOS-Auto-Zoom bei Eingabefeldern verhindern (Kundenwunsch) ═══
   iOS zoomt automatisch, sobald ein fokussiertes Feld < 16px Schrift hat —
   das verschiebt das Layout (u. a. die Chatleiste). 16px unterbindet das. */
@media (max-width: 860px){
  input, select, textarea{ font-size: 16px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   EINHEITLICHE SEITEN-TITEL (Kundenwunsch): Startseite (.hero) und
   Planer/Angebote (.rpHero) hatten unterschiedliche Mobil-Größen
   (36/22px vs. 32/18px) und harte Breakpoint-Sprünge. Diese eine
   Regel vereinheitlicht beide auf jeder Bildschirmbreite:
   · Desktop: exakt wie bisher (70px / 48px — kein visueller Bruch)
   · Mobil:   einheitlich 36px / 20px
   · dazwischen: stufenlos fluid (clamp) statt Sprüngen
   Abstände/Margins bleiben seiten-spezifisch unangetastet.
   ═══════════════════════════════════════════════════════════════════ */
.hero h1, .rpHero h1{
  font-size: clamp(36px, 6.2vw, 70px) !important;
  line-height: 1.06 !important;
}
.hero p, .rpHero p{
  font-size: clamp(20px, 3.4vw, 48px) !important;
  line-height: 1.2 !important;
}
/* EINHEITLICHE ABSTÄNDE (Kundenwunsch: home zu groß, pakete zu klein):
   H1→Unterzeile knapp, Unterzeile→Inhalt fluid identisch auf allen Seiten. */
.hero h1, .rpHero h1{ margin: 0 0 8px !important; }
.hero p,  .rpHero p{  margin: 0 0 clamp(16px, 2.6vw, 30px) !important; }
.categorySection{ margin-top: clamp(4px, 1.5vw, 20px) !important; }

/* ═══ KATEGORIE-KUGELN (Startseite) ═══
   Platzhalter-Kugel ohne Bild: dezente leere Fläche, nicht klickbar wirkend. */
.catIconWrap.catIconEmpty{
  background:#eef1f5;
  border:2px dashed #cdd6e0;
}
.catChipPlaceholder{ cursor:default; }
.catChipPlaceholder:hover{ transform:none; }
.catChipPlaceholder .catName{ color:#9aa7b5; }

/* Mobil: 3 Kugeln pro Zeile, sauber ZENTRIERT (6 Stück = exakt 2 Reihen) */
@media (max-width: 600px){
  .categoryBar{
    justify-content: center !important;
    gap: 18px 0 !important;
  }
  .catChip{
    flex: 0 0 33.33% !important;
    width: 33.33% !important;
    max-width: 33.33%;
  }
}

/* ═══ Trust-Badges unten auf der Startseite (Bestpreis / Weiterempfehlung /
   Sorgenfrei): mobil sauber in EINER Zeile — der Umbruch kam durch
   flex-wrap + min-width 100px je Badge. ═══ */
@media (max-width: 600px){
  .pfBadges{
    flex-wrap: nowrap !important;
    justify-content: space-evenly !important;
    gap: 8px !important;
    margin-left: 0 !important;
  }
  .pfBadge{
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

/* Anfrage-Hotels: prominenter Hinweis oben im Modal-Kopf (unter den Sternen) */
#hpReqTop{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:10px; padding:9px 13px; border-radius:8px;
  background:rgba(239,138,125,.12); border:1px solid var(--accent, #ef8a7d);
  color:#7a3a30; font-size:13.5px; line-height:1.45; max-width:600px;
}
#hpReqTop i{ color:var(--accent, #ef8a7d); font-size:15px; margin-top:2px; flex:0 0 auto; }
#hpReqTop strong{ color:#9a3412; }

/* ═══════════════════════════════════════════════════════════════════
   HOTEL-MODAL — AUSWAHL-ZEILE EINZEILIG (Kundenwunsch):
   links Dropdown („Reisedatum wählen" / „Angebot wählen"), rechts Preis.
   Überschreibt das frühere Layout (Preis über der Auswahl, order:-1).
   ═══════════════════════════════════════════════════════════════════ */
.hpBookRow.hpBookRowBook{
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 14px !important;
}
.hpBookRow.hpBookRowBook #hpRoomSelectContainer{
  order: 1;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0;
}
.hpBookRow.hpBookRowBook .hpPriceBlock{
  order: 2 !important;
  width: auto !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  text-align: right;
}
/* Leerer Untertext im Dropdown: komplett weg → Label sauber vertikal zentriert */
.hpRoomSelectInfo:empty{ display: none; }

/* ═══════════════════════════════════════════════════════════════════
   BURGER-MENÜ im BAWH-Website-Stil (Kundenwunsch, Screenshot):
   große Barlow-Condensed-Links in Grau, aktiver Punkt in Navy,
   keine Icons, großzügige Abstände. CTA-Button bleibt erhalten.
   ═══════════════════════════════════════════════════════════════════ */
.mobileMenu{ padding: 26px 26px 24px !important; }
.mobileMenu a:not(.mobileCta){
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.18 !important;
  color: #b9bdc4 !important;
  background: none !important;
  padding: 8px 4px !important;
  border-radius: 0 !important;
  letter-spacing: .2px;
}
.mobileMenu a:not(.mobileCta) i{ display: none !important; }   /* keine Icons mehr */
.mobileMenu a:not(.mobileCta):hover{ color: #002349 !important; background: none !important; }
.mobileMenu a.active:not(.mobileCta){ color: #002349 !important; font-weight: 700 !important; background: none !important; } /* BURGERCTA (05.08., Feedback: active traf auch den CTA, wenn dessen href der aktuellen Seite entspricht -> Koralle weg) */
.mobileDivider{ display: none !important; }
.mobileCta{ margin-top: 20px !important; }

.ki-link {
  color: #ef8a7d;
  text-decoration: none;
  transition: color 0.2s ease;
}

.ki-link:hover {
  text-decoration: underline;
}
/* BURGERCTA-PANZER (05.08.): CTA bleibt IMMER der Koralle-Button, egal
   welche active/Redesign-Regel spaeter noch dazukommt. */
.mobileMenu .mobileCta, .mobileMenu .mobileCta.active{
  background: var(--accent) !important; color: #fff !important;
  font-weight: 300 !important; border-radius: 2px !important;
  padding: 10px 24px !important; }
.mobileMenu .mobileCta i{ display: inline-block !important; color: #fff !important; }

/* BURGERCTA-HOVER (05.08., User): Hover -> Navy wie die anderen Buttons.
   Muss NACH dem Panzer stehen — auf der Hotels-Seite traegt der CTA .active,
   dort verlor die alte Hover-Regel per Reihenfolge. */
.mobileMenu .mobileCta:hover, .mobileMenu .mobileCta.active:hover{
  background: var(--primary) !important; color: #fff !important; }