/* Angebotewelt V3.3 – optimierte Darstellung innerhalb der Contao-Einbettung. */
/* Nicht auf die eigenständige PWA anwenden. */
html.hp-framed-ui body {background:#fff;}
html.hp-framed-ui .header {background:#fff;border:0;border-bottom:1px solid #e1e8ef;}
html.hp-framed-ui .header .brand {display:none!important;}
html.hp-framed-ui .header .nav {
  width:calc(100% - 40px)!important;max-width:none!important;
  min-height:0;padding:12px 0;gap:10px;justify-content:flex-end;
  flex-direction:row;align-items:center;
}
html.hp-framed-ui .header .nav nav {gap:7px 18px;justify-content:flex-end;align-items:center;flex-wrap:wrap;width:auto;}
html.hp-framed-ui .header .nav nav>a:not(.btn),
html.hp-framed-ui .header .nav nav>form button {font-size:14px;line-height:1.3;}
html.hp-framed-ui .header .nav nav>.btn {font-size:14px;min-height:40px;padding:8px 14px;}
html.hp-framed-ui .header .nav nav .hp-install-app {font-size:14px;min-height:40px;padding:8px 15px;border:1px solid #00489f;
  border-radius:12px 0 12px 12px;background:#e9f2fc;color:#00489f;white-space:nowrap;}
html.hp-framed-ui .header .nav nav .hp-install-app:hover {background:#dbeafa;}
html.hp-framed-ui .header .nav nav .hp-install-app[hidden] {display:none!important;}
html.hp-framed-ui main.wrap {width:calc(100% - 40px)!important;max-width:none!important;margin-inline:auto;}
html.hp-framed-ui .footer {display:none!important;}
html.hp-framed-ui .section {padding:24px 0 42px;}
html.hp-framed-ui .section>h1 {font-size:clamp(31px,3.1vw,48px);margin:9px 0 22px;}
html.hp-framed-ui .section>.eyebrow {margin-bottom:5px;}
html.hp-framed-ui .offer-card {background:#fff;min-width:0;}
html.hp-framed-ui .offers-grid {grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));align-items:stretch;gap:18px;}
html.hp-framed-ui .offers-grid .offer-card {display:flex;flex-direction:column;padding:20px;gap:0;}
html.hp-framed-ui .offers-grid .offer-card .offer-card-copy {display:flex;flex-direction:column;flex:1;}
html.hp-framed-ui .offers-grid .offer-card .offer-card-copy>h2 {font-size:clamp(23px,2.2vw,32px);overflow-wrap:anywhere;margin:8px 0 14px;}
html.hp-framed-ui .offers-grid .offer-card .offer-card-copy>p:last-child {margin-top:auto;padding-top:8px;}
html.hp-framed-ui .offers-grid .offer-card .hp-public-open,
html.hp-framed-ui .offers-grid .offer-card .offer-photo {max-width:100%;}
html.hp-framed-ui .offers-grid .offer-card .offer-photo {width:100%;height:225px;object-fit:cover;}
html.hp-framed-ui .offers-grid--single {grid-template-columns:minmax(0,1fr);}
html.hp-framed-ui .offers-grid--single>.offer-card {
  display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);
  align-items:center;gap:clamp(20px,3vw,46px);max-width:970px;width:100%;margin-inline:auto;padding:clamp(20px,2.8vw,36px);
}
html.hp-framed-ui .offers-grid--single>.offer-card>.hp-public-open,
html.hp-framed-ui .offers-grid--single>.offer-card>.offer-photo {width:100%;}
html.hp-framed-ui .offers-grid--single>.offer-card .offer-photo {height:min(27vw,330px);min-height:250px;object-fit:cover;margin:0;}
html.hp-framed-ui .offers-grid--single>.offer-card .offer-card-copy {display:block;min-width:0;}
html.hp-framed-ui .offers-grid--single>.offer-card .offer-card-copy>p:last-child {margin-top:16px;}
/* Detailseite: weniger riesige freie Flächen, trotzdem gut lesbar */
html.hp-framed-ui .offers-grid:not(.three) {max-width:980px;margin-inline:auto;}
/* PWA – eine Infobox erscheint ausschließlich nach Nutzerklick */
.hp-install-dialog {border:1px solid #dce4ed;border-radius:20px 0 20px 20px;padding:26px;
  color:#172d49;width:min(480px,calc(100% - 28px));max-height:90dvh;overflow-y:auto;background:#fff;}
.hp-install-dialog::backdrop {background:rgba(0,25,55,.62);}
/* In an autoheight iframe the viewport may be very tall; place the help near its trigger. */
html.hp-framed-ui .hp-install-dialog[open] {
  position:fixed;inset:76px 16px auto auto;margin:0;max-height:min(480px,75dvh);
  box-shadow:0 18px 60px rgba(0,25,55,.25);
}
.hp-install-dialog h2 {color:#00489f;font-size:clamp(22px,3vw,29px);margin:0 0 14px;}
.hp-install-dialog p {margin:0 0 18px;line-height:1.6;}
.hp-install-dialog .hp-install-actions {display:flex;gap:10px;flex-wrap:wrap;}
.hp-install-dialog .hp-install-actions a,.hp-install-dialog .hp-install-actions button {
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border-radius:12px 0 12px 12px;
  font:inherit;text-decoration:none;border:1px solid #00489f;cursor:pointer;
}
.hp-install-dialog .hp-install-actions a {background:#00489f;color:white;}
.hp-install-dialog .hp-install-actions button {background:white;color:#00489f;}
@media(max-width:800px) {
 html.hp-framed-ui .offers-grid--single>.offer-card {grid-template-columns:minmax(0,1fr);max-width:600px;}
 html.hp-framed-ui .offers-grid--single>.offer-card .offer-photo {height:260px;min-height:0;}
}
@media(max-width:650px) {
 html.hp-framed-ui .header .nav,
 html.hp-framed-ui main.wrap {width:calc(100% - 28px)!important;}
 html.hp-framed-ui .header .nav {justify-content:flex-start;}
 html.hp-framed-ui .header .nav nav {width:100%;justify-content:center;gap:8px 12px;}
 html.hp-framed-ui .offers-grid {grid-template-columns:1fr;}
 html.hp-framed-ui .offers-grid .offer-card .offer-photo {height:220px;}
 html.hp-framed-ui .section {padding:22px 0 32px;}
}
@media(prefers-reduced-motion:reduce){.hp-install-dialog *{scroll-behavior:auto!important;}}

/* === FIX: Angebotskarten feste Breite statt auf Monitorbreite strecken === */
html.hp-framed-ui .offers-grid.three {
  display:flex!important;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:stretch;
  gap:20px;
  max-width:none!important;
  width:100%;
}
html.hp-framed-ui .offers-grid.three > .offer-card,
html.hp-framed-ui .offers-grid.three.offers-grid--single > .offer-card {
  flex:0 1 420px;
  width:420px;
  max-width:420px;
  min-width:0;
  margin:0;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:0;
}
html.hp-framed-ui .offers-grid.three > .offer-card .offer-photo {
  display:block;
  width:100%;
  height:205px;
  min-height:0;
  margin:0 0 16px;
  object-fit:cover;
}
html.hp-framed-ui .offers-grid.three > .offer-card .hp-public-open {width:100%;}
html.hp-framed-ui .offers-grid.three > .offer-card .offer-card-copy {
  display:flex;
  flex-direction:column;
  flex:1;
  width:100%;
  min-width:0;
}
html.hp-framed-ui .offers-grid.three > .offer-card .offer-card-copy > h2 {
  font-size:clamp(23px,1.9vw,28px);
}
html.hp-framed-ui .offers-grid.three > .offer-card .offer-card-copy > p:last-child {
  margin-top:auto;
}
/* Der native Dialog liegt im riesigen Autoheight-iframe.
   Die JS-Variable positioniert ihn bezogen auf den SICHTBAREN Elternviewport. */
html.hp-framed-ui dialog.photo-dialog[open] {
  position:fixed!important;
  inset:auto!important;
  top:var(--hp-visible-dialog-top,50%)!important;
  left:50%!important;
  transform:translate(-50%,-50%)!important;
  margin:0!important;
  width:min(640px,calc(100% - 24px))!important;
  max-height:var(--hp-visible-dialog-height,calc(100vh - 32px))!important;
  overflow:auto!important;
  z-index:10000;
  border-radius:20px 0 20px 20px;
}
@media(max-width:480px) {
  html.hp-framed-ui .offers-grid.three > .offer-card,
  html.hp-framed-ui .offers-grid.three.offers-grid--single > .offer-card {
    flex:1 1 100%;width:100%;max-width:none;
  }
  html.hp-framed-ui .offers-grid.three > .offer-card .offer-photo {height:200px;}
}

/* Mobile iframe: sichtbaren Bereich des ELTERNFENSTERS verwenden. */
@media(max-width:650px){
 html.hp-framed-ui dialog.photo-dialog[open]{
   width:calc(100% - 14px)!important;max-width:440px!important;
   max-height:min(620px,var(--hp-visible-dialog-height,calc(100dvh - 14px)))!important;
   top:var(--hp-visible-dialog-top,50%)!important;
   left:50%!important;transform:translate(-50%,-50%)!important;
   padding:14px 12px 9px!important;
   overflow-y:auto!important;overscroll-behavior:contain;
 }
}