/* =========================================================
   Bestattungshaus Kramer – Stylesheet (v2, 1:1-Nachbau)
   ========================================================= */

:root{
  --beige:#f0e6dd;
  --rose:#fff3f3;
  --band:#cccccc;
  --dunkel:#323232;
  --footer:#171717;
  --akzent:#8c6a4f;
  --akzent-dark:#6f513a;
  --text:#5b5b5b;
  --heading:#2f2f2f;
  --container:1290px;
  --header-h:84px;
  --gutter:20px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:"Open Sans","Segoe UI",Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.8;color:var(--text);background:#fff;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block;}
a{color:var(--akzent);text-decoration:none;}
a:hover{color:var(--akzent-dark);}

h1,h2,h3,h4{color:var(--heading);font-weight:300;line-height:1.35;margin:0 0 16px;}
h1{font-size:32px;}
h2{font-size:27px;}
h3{font-size:20px;}
h4{font-size:16px;font-weight:600;}
p{margin:0 0 16px;}
p:last-child{margin-bottom:0;}
strong{color:var(--heading);font-weight:600;}
em{font-style:italic;}

:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);width:100%;}

.skiplink{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;
  color:var(--dunkel);padding:12px 20px;}
.skiplink:focus{left:0;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;margin:6px 0 4px;padding:11px 26px;
  border:1px solid var(--akzent);color:var(--akzent);background:transparent;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  transition:background .25s,color .25s;
}
.btn:hover{background:var(--akzent);color:#fff;}

/* ---------- Top-Telefonleiste ---------- */
.topbar{background:var(--dunkel);color:#ddd;font-size:13px;}
.topbar__inner{display:flex;justify-content:flex-end;padding:7px var(--gutter);}
.topbar a{color:#ddd;}
.topbar a:hover{color:#fff;}
.topbar i{margin-right:6px;}

/* =========================================================
   Header / Navigation
   ========================================================= */
.site-header{position:sticky;top:0;z-index:100;background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.08);}
.site-header .container{display:flex;align-items:center;justify-content:space-between;
  gap:20px;min-height:var(--header-h);}
.logo img{height:60px;width:auto;}

.mainnav ul{display:flex;list-style:none;margin:0;padding:0;gap:22px;}
.mainnav a{color:#4d4d4d;font-size:13.5px;padding:6px 0;display:block;transition:color .2s;}
.mainnav a:hover,.mainnav a.is-active{color:var(--akzent);}

.navtoggle{border:0;background:none;cursor:pointer;width:44px;height:44px;
  display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 8px;flex:0 0 auto;}
.navtoggle span{display:block;height:2px;background:#3d3d3d;border-radius:2px;
  transition:transform .3s,opacity .25s;}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.offcanvas{position:fixed;inset:0 0 0 auto;width:320px;max-width:85vw;background:#fff;
  transform:translateX(100%);transition:transform .35s ease;z-index:120;
  padding:100px 30px 40px;overflow-y:auto;box-shadow:-4px 0 24px rgba(0,0,0,.18);}
.offcanvas.is-open{transform:translateX(0);}
.offcanvas ul{list-style:none;margin:0;padding:0;}
.offcanvas li+li{border-top:1px solid #eee;}
.offcanvas a{display:block;padding:14px 0;color:#3d3d3d;font-size:15px;}
.offcanvas a:hover,.offcanvas a.is-active{color:var(--akzent);}
.offcanvas-meta{margin-top:30px;font-size:13.5px;line-height:1.9;color:#7a7a7a;}

.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;
  transition:opacity .3s,visibility .3s;z-index:110;}
.backdrop.is-open{opacity:1;visibility:visible;}
body.nav-open{overflow:hidden;}

/* =========================================================
   Inhaltssektionen
   ========================================================= */
.sec{padding:56px 0;}
.sec--beige{background:var(--beige);}
.sec--rose{background:var(--rose);}
.sec--band{background:var(--band);padding:30px 0;text-align:center;}
.sec--band h2{margin:0;font-size:25px;color:#3a3a3a;}
.sec--band .grid{align-items:center;}

/* Hero mit Hintergrundvideo */
.sec--hero{
  position:relative;overflow:hidden;padding:0;min-height:560px;
  display:flex;align-items:center;color:#fff;text-align:center;
}
.sec--hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:1;}
.sec--hero .container{position:relative;z-index:2;padding:90px var(--gutter);}
.sec--hero h2{color:#fff;font-size:26px;letter-spacing:.04em;text-transform:uppercase;}
.sec--hero p{color:rgba(255,255,255,.92);font-size:14px;max-width:760px;margin:0 auto 22px;}
.sec--hero .btn{border-color:#fff;color:#fff;}
.sec--hero .btn:hover{background:#fff;color:var(--dunkel);}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}

/* Sektionen mit Hintergrundbild (Parallax) */
.sec--bild{
  position:relative;background-size:cover;background-position:center;
  background-attachment:fixed;color:#fff;text-align:center;padding:100px 0;
}
.sec--bild::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5);}
.sec--bild > *{position:relative;z-index:2;}
.sec--bild h2,.sec--bild h3{color:#fff;}
.sec--bild p{color:rgba(255,255,255,.92);}
.sec--bild .btn{border-color:#fff;color:#fff;}
.sec--bild .btn:hover{background:#fff;color:var(--dunkel);}

/* ---------- Grid (echtes Flexbox-Wrap wie im Original) ---------- */
.grid{display:flex;flex-wrap:wrap;margin:0 calc(var(--gutter) * -1);}
.grid .col{
  flex:0 0 var(--w,100%);max-width:var(--w,100%);
  padding:0 var(--gutter);margin-bottom:28px;
}
.grid .col:last-child{margin-bottom:0;}
.grid.grid--1 .col{margin-bottom:0;}
.col img{width:100%;}
.col > *:last-child{margin-bottom:0;}

/* gleich breite Spalten (kein --w gesetzt) bekommen bündige Breite via flex-grow */
.grid .col:not([style]){flex:1 1 0;max-width:100%;}

/* Trennlinie (sppb-divider) */
.divider{border:0;border-top:1px solid #d8cfc4;margin:0 0 20px;}
.sec--band .divider,.sec--bild .divider{border-color:rgba(255,255,255,.4);}

/* Icon-Karten (Kontaktseite) */
.card-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  background:var(--beige);color:var(--akzent);font-size:20px;
  margin-bottom:16px;
}

/* Zitat (h2/h3 mit umschließenden Anführungszeichen) */
.sec h2 em,.legal h3 em{font-style:italic;}

/* Float-/Zentrierungs-Klassen aus dem Original (Impressum, Vorsorge, Leistungen ...) */
.img-float-right{float:right;margin:0 0 20px 30px;max-width:45%;}
.img-float-left{float:left;margin:0 30px 20px 0;max-width:45%;}
.img-center{display:block;margin:0 auto 20px;}
.ta-center{text-align:center;}

/* Mitgliedschaften */
.memberships-wrap{padding:56px 0;}
.memberships{display:flex;justify-content:space-between;align-items:center;
  gap:40px;flex-wrap:wrap;}
.memberships img{max-height:70px;width:auto;}

/* =========================================================
   Rechtstexte / Fließtext-Seiten (Impressum, Datenschutz, Gedenkportal)
   ========================================================= */
.legalpage .sec{padding-top:48px;}
.legal{max-width:900px;}
.legal h1{font-size:28px;}
.legal h2{font-size:23px;margin-top:38px;}
.legal h2:first-child{margin-top:0;}
.legal h3{font-size:18px;margin-top:26px;}
.legal h4{font-size:14.5px;margin-top:20px;}
.legal p,.legal li{font-size:14px;}
.legal ul,.legal ol{padding-left:22px;}
.legal a{word-break:break-word;}
.legal::after{content:"";display:table;clear:both;}

.bildunterschrift{margin-top:8px;font-size:12.5px;text-align:center;}

/* Gedenkportal-iframe */
.iframe-wrap{margin-top:20px;}
.iframe-wrap iframe{width:100%;min-height:1200px;border:0;}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{background:var(--footer);color:#a2a2a2;font-size:13.5px;padding:54px 0 0;}
.site-footer h4{color:#fff;font-size:14px;font-weight:600;margin-bottom:14px;}
.site-footer a{color:#a2a2a2;}
.site-footer a:hover{color:#fff;}
.site-footer p{margin-bottom:10px;}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;}
.footer-logo{width:140px;margin-bottom:16px;}
.footer-grid ul{list-style:none;margin:0;padding:0;}
.footer-grid li{padding:2px 0;}
.footer-bottom{border-top:1px solid #2a2a2a;padding:16px 0;font-size:12px;color:#7d7d7d;}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1024px){
  .mainnav{display:none;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}

@media (max-width:860px){
  :root{--header-h:70px;}
  .logo img{height:48px;}
  .sec{padding:40px 0;}
  .sec--hero{min-height:0;}
  .sec--hero .container{padding:64px var(--gutter);}
  .sec--bild{padding:64px 0;background-attachment:scroll;}
  .grid .col{flex-basis:100% !important;max-width:100% !important;}
  .img-float-right,.img-float-left{float:none;max-width:100%;margin:0 0 16px;}
  .topbar__inner{justify-content:center;}
}

@media (max-width:560px){
  h1{font-size:25px;}
  h2,.sec--band h2{font-size:21px;}
  .sec--hero h2{font-size:20px;}
  .footer-grid{grid-template-columns:1fr;gap:26px;}
  .memberships{justify-content:center;gap:26px;}
  .iframe-wrap iframe{min-height:900px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}