/* =========================================================================
   Hinweis-Popup – Bestattungshaus Schönfeld GmbH
   Ablage:  fileadmin/template/css/hinweis-popup.css
   ========================================================================= */

.hinweis-popup-overlay{
  --hp-brand:#FF9417;        /* Akzent-Orange */
  --hp-brand-dark:#F27C13;   /* Orange dunkler (Hover) */
  --hp-ink:#191919;          /* Überschrift / dunkel */
  --hp-text:#3a3a3a;         /* Fließtext */
  --hp-muted:#5f5f5f;        /* Grau */
  --hp-tint:#FFF4E7;         /* helles Orange */

  position:fixed;
  inset:0;
  z-index:9998;
  background:rgba(25,25,25,.42);
  /*webkit-backdrop-filter:blur(2px);*/
  /*backdrop-filter:blur(2px);*/
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  animation:hp-fade .25s ease;
}
.hinweis-popup-overlay[hidden]{ display:none; }

.hinweis-popup{
  position:relative;
  width:100%;
  max-width:520px;
  /* Karte wird nie höher als der Bildschirm; gescrollt wird INNEN (im Body) */
  max-height:calc(100vh - 40px);
  display:flex;
  flex-direction:column;
  overflow:hidden;                 /* runde Ecken bleiben sauber */
  background:#fff;
  border-radius:6px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  font-family:"Merriweather", Arial, serif;
  animation:hp-rise .3s cubic-bezier(.2,.7,.3,1);
}
/* Akzentstreifen oben in CI-Orange */
.hinweis-popup::before{
  content:"";
  display:block;
  flex:0 0 auto;
  height:5px;
  background:linear-gradient(90deg,var(--hp-brand),var(--hp-brand-dark));
}

.hinweis-popup__logo{ flex:0 0 auto; text-align:center; padding:22px 24px 4px; }
.hinweis-popup__logo img{ height:120px; width:auto; }

.hinweis-popup__close{
  position:absolute; top:14px; right:14px;
  z-index:2;                        /* immer über dem scrollenden Body */
  width:34px; height:34px;
  border:0; border-radius:50%;
  background:#f1f1f1; color:var(--hp-ink);
  font-size:20px; line-height:34px; text-align:center;
  cursor:pointer;
  font-family:Arial, sans-serif;
  transition:background .15s, color .15s;
}
.hinweis-popup__close:hover{ background:var(--hp-brand); color:#fff; }
.hinweis-popup__close:focus-visible{ outline:3px solid var(--hp-brand); outline-offset:2px; }

/* Nur dieser Bereich scrollt, wenn der Inhalt zu hoch wird */
.hinweis-popup__body{
  flex:1 1 auto;
  min-height:0;                     /* nötig, damit overflow im Flex greift */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:8px 34px 30px;
}

.hinweis-popup__title{
  font-family:"Merriweather", serif;
  font-weight:700;
  color:var(--hp-ink);
  font-size:23px; line-height:1.3;
  margin:10px 0 14px;
  text-align:center;
}

.hinweis-popup__body h2{
  padding-top:0 !important;
  margin-top:0 !important;
}

.hinweis-popup__text{ font-size:16px; line-height:1.7; color:var(--hp-text); }
.hinweis-popup__text p{ margin:0 0 14px; }
.hinweis-popup__text p:last-child{ margin-bottom:0; }
.hinweis-popup__text strong,
.hinweis-popup__text b{ color:var(--hp-ink); }
.hinweis-popup__text a{ color:var(--hp-brand-dark); }

.hinweis-popup__phone{
  display:flex; align-items:center; gap:14px;
  background:var(--hp-tint);
  border:1px solid #ffd9a8;
  border-left:5px solid var(--hp-brand);
  border-radius:5px;
  padding:14px 18px; margin:18px 0;
}
.hinweis-popup__phone svg{ flex:0 0 auto; width:30px; height:30px; color:var(--hp-brand-dark); }
.hinweis-popup__phone .lbl{
  font-size:13px; color:var(--hp-muted);
  font-family:Arial, sans-serif;
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px;
}
.hinweis-popup__phone .num{
  font-size:24px; font-weight:700; color:var(--hp-ink);
  font-family: 'Roboto', Arial;
}
.hinweis-popup__phone .num a{ color:inherit; text-decoration:none; }

.hinweis-popup__actions{ text-align:center; margin-top:22px; }
.hinweis-popup__btn{
  display:inline-block;
  background:var(--hp-brand); color:#fff;
  border:0; border-radius:4px;
  font-family:Arial, sans-serif; font-weight:700; font-size:16px;
  padding:13px 34px; cursor:pointer;
  text-decoration:none;
  transition:background .15s;
  border-radius: 80px !important;
}
.hinweis-popup__btn:hover{ background:var(--hp-brand-dark); }
.hinweis-popup__btn:focus-visible{ outline:3px solid var(--hp-ink); outline-offset:2px; }

@keyframes hp-fade{ from{opacity:0} to{opacity:1} }
@keyframes hp-rise{ from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none} }

/* ---- Mobil: Karte max. 70% der Höhe, kompakter, Body scrollt ---- */
@media (max-width:520px){
  .hinweis-popup-overlay{ padding:12px; }
  .hinweis-popup{ max-height:75vh; }
  .hinweis-popup__logo{ padding:16px 24px 2px; }
  .hinweis-popup__logo img{ height:90px; }
  .hinweis-popup__body{ padding:6px 22px 22px; }
  .hinweis-popup__title{ font-size:20px; }
  .hinweis-popup__phone .num{ font-size:21px; }
}

@media (prefers-reduced-motion:reduce){
  .hinweis-popup-overlay, .hinweis-popup{ animation:none; }
}