/* =============================================================================
   Mirko Hölzer Bestattungen — modernes, warmes Design (WordPress-Theme)
   Immersiver Bild-Hero, weiche Formen, klare Grotesk + ruhige Serife.
   Farbwelt (helles Grau/Schiefergrau/Anthrazit) nach der bestehenden Website.
   ============================================================================= */

/* --- Schriften (lokal, DSGVO-konform) ------------------------------------- */
@font-face{ font-family:'Fraunces'; font-weight:400 600; font-style:normal; font-display:swap;
  src:url('../fonts/fraunces-normal-latin.woff2') format('woff2'); }
@font-face{ font-family:'Fraunces'; font-weight:400 500; font-style:italic; font-display:swap;
  src:url('../fonts/fraunces-italic-latin.woff2') format('woff2'); }
@font-face{ font-family:'Hanken Grotesk'; font-weight:400 700; font-style:normal; font-display:swap;
  src:url('../fonts/hanken-normal-latin.woff2') format('woff2'); }

/* --- Tokens --------------------------------------------------------------- */
:root{
  --bg:#ECEDEC; --surface:#FFFFFF; --surface-2:#F5F6F5; --bg-deep:#DFE0DF;
  --ink:#2B2E2D; --muted:#5F6362; --line:#DADCDB;
  /* Highlight: dunkles Schiefergrau statt des früheren Golds. */
  --accent:#4A4F4E; --accent-deep:#343837; --accent-soft:#E3E5E4;
  --dark:#2B2E2D; --dark-2:#383C3B;

  --sans:'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;

  --wrap:1400px;
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --section:clamp(3.5rem,2.75rem + 4vw,6rem);

  --r:14px; --r-lg:26px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(30,33,32,.04), 0 10px 30px rgba(30,33,32,.06);
  --sh-2:0 6px 14px rgba(30,33,32,.08), 0 22px 48px rgba(30,33,32,.12);
  --ease:cubic-bezier(.2,.7,.2,1);

  --fs-hero:clamp(2.7rem,1.9rem + 3.4vw,4.7rem);
  --fs-h2:clamp(2rem,1.5rem + 2.2vw,3.1rem);
  --fs-h3:1.4rem;
  --fs-lead:clamp(1.05rem,1rem + .3vw,1.18rem);
}

/* --- Basis ---------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ font-size:17px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (min-width:48em){ html{ font-size:18px; } }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ animation:none!important; transition:none!important; } }

body{ font-family:var(--sans); font-size:.96rem; line-height:1.65; color:var(--ink);
  background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
/* Textlinks (gesamte Seite): standardmäßig dezent unterstrichen, beim Hover/Fokus kräftig (2px).
   Textfarbe und Akzent liegen seit dem Schiefergrau zu nah beieinander, deshalb läuft der
   Hover über die Unterstreichung. currentColor/color-mix, damit es auch auf dunklem Grund passt.
   Ausnahmen: Buttons, Karten, Menü, Logos, Weiterführende Links, Titel-Links, Elementor-Buttons/-Icons.
   Die Ausnahmen stehen im :not(), damit die Spezifität auch Elementors
   ".elementor a{text-decoration:none}" schlägt (lädt nach main.css). */
a:not(.btn, .card, .obit, .morelink, .callcard__num, .elementor-button, .elementor-icon,
      .nav a, .nav-mobile a, .site-head a, .index-entry h2 a, :has(> img)){
  text-decoration:underline; text-decoration-color:color-mix(in srgb, currentColor 45%, transparent);
  text-decoration-thickness:1px; text-underline-offset:3px;
  transition:color .2s ease, text-decoration-color .2s ease, text-decoration-thickness .2s ease; }
a:not(.btn, .card, .obit, .morelink, .callcard__num, .elementor-button, .elementor-icon,
      .nav a, .nav-mobile a, .site-head a, .index-entry h2 a, :has(> img)):is(:hover, :focus-visible){
  text-decoration-color:currentColor; text-decoration-thickness:2px; }
ul,ol{ list-style:none; padding:0; }
address{ font-style:normal; }
::selection{ background:var(--accent); color:#fff; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

h1,h2,h3{ font-family:var(--serif); font-weight:500; line-height:1.08; letter-spacing:-.01em; text-wrap:balance; }
.serif-i{ font-family:var(--serif); font-style:italic; font-weight:500; }

.skip-link{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink); color:#fff; padding:.6rem 1rem; border-radius:8px; }
.skip-link:focus{ left:1rem; top:1rem; }

/* --- Layout --------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section); }
.section--surface{ background:var(--surface-2); }
.section--tight-top{ padding-top:clamp(1.75rem,1.2rem + 2vw,3rem); }
.section--flush{ padding-block:0; }
.section--tight{ padding-block:clamp(1.75rem,3.5vw,2.75rem); }

.eyebrow{ display:inline-block; color:var(--accent-deep); font-size:.8rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; }

.head{ max-width:40rem; margin-bottom:clamp(2.5rem,4vw,3.5rem); }
.head--center{ margin-inline:auto; text-align:center; }
.head h2,.head .head__title{ font-size:var(--fs-h2); font-family:var(--serif); font-weight:500; line-height:1.08; letter-spacing:-.01em; }
.head p{ margin-top:1rem; color:var(--muted); font-size:var(--fs-lead); }

.lead{ font-size:var(--fs-lead); color:var(--muted); line-height:1.55; }
.muted{ color:var(--muted); }

/* --- Buttons --------------------------------------------------------------
   Der Klassenname .btn--gold bleibt trotz des Farbwechsels bestehen: Der Wert
   „gold“ steckt als Button-Stil in den gespeicherten Elementor-Seiten. Ein
   Umbenennen würde die Auswahl in bestehenden Inhalten verlieren. */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.85rem 1.4rem;
  border-radius:10px; font-family:var(--sans); font-weight:600; font-size:1rem; line-height:1; border:1.5px solid transparent;
  cursor:pointer; transition:background-color .2s var(--ease), color .2s, border-color .2s; }
.btn .ic{ width:1.05em; height:1.05em; display:block; flex:none; }
.btn--gold{ background:var(--accent); color:#fff; }
.btn--gold:hover{ background:var(--accent-deep); }
.btn--ink{ background:var(--ink); color:#fff; }
.btn--ink:hover{ background:#000; }
.btn--outline{ background:transparent; border-color:var(--accent); color:var(--accent-deep); }
.btn--outline:hover{ background:rgba(74,79,78,.12); color:var(--accent-deep); border-color:var(--accent-deep); }
.btn--glass{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.btn--glass:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn[disabled]{ opacity:.65; cursor:default; }

.ic{ width:1.5rem; height:1.5rem; fill:currentColor; flex:none; }

/* --- Kopf (transparent über dem Hero, weißes Logo; beim Scrollen hell) ----- */
.site-head{ position:fixed; inset:0 0 auto 0; z-index:50; background:transparent; border-bottom:1px solid transparent;
  transition:background .3s var(--ease), box-shadow .3s, border-color .3s; }
.site-head--solid{ position:sticky; }
.site-head__row{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:.9rem; }
.brand{ height:4rem; width:auto; }
@media (min-width:40em){ .brand{ height:5.2rem; } }
.brand--dark{ display:none; }
.nav{ display:none; align-items:center; gap:2rem; }
.nav a:not(.btn){ position:relative; color:#fff; font-weight:500; font-size:1rem; opacity:.92; transition:opacity .2s,color .2s; }
.nav a:not(.btn)::after{ content:""; position:absolute; left:0; bottom:-6px; width:100%; height:2px;
  background:var(--accent); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.nav a:not(.btn):hover{ opacity:1; }
.nav a:not(.btn):hover::after{ transform:scaleX(1); }
.nav a.is-active::after{ transform:scaleX(1); }
.nav .btn{ padding:.7rem 1.3rem; font-size:.95rem; }
.nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:2.9rem; height:2.9rem;
  border-radius:var(--r-pill); background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.45);
  color:#fff; cursor:pointer; backdrop-filter:blur(8px); }
.nav-toggle .ic{ width:1.4rem; height:1.4rem; }

.site-head.is-stuck{ background:rgba(236,237,236,.92); backdrop-filter:blur(12px); box-shadow:var(--sh-1); border-color:var(--line); }
.site-head.is-stuck .brand--light{ display:none; }
.site-head.is-stuck .brand--dark{ display:block; }
.site-head.is-stuck .nav a:not(.btn){ color:var(--ink); opacity:.85; }
.site-head.is-stuck .nav a:not(.btn):hover{ color:var(--accent-deep); }
.site-head.is-stuck .nav-toggle{ background:var(--surface); border-color:var(--line); color:var(--ink); }
.nav a.is-active, .site-head.is-stuck .nav a.is-active{ color:var(--accent-deep); opacity:1; }
.nav-mobile a.is-active{ color:var(--accent-deep); }

/* Admin-Bar (eingeloggt) */
body.admin-bar .site-head{ top:32px; }
@media (max-width:782px){ body.admin-bar .site-head{ top:46px; } }

/* Mobil-Menü */
.nav-mobile{ position:fixed; inset:0; z-index:60; background:var(--bg); padding:1.6rem var(--gutter) 2rem; overflow-y:auto;
  transform:translateY(-100%); transition:transform .35s var(--ease); visibility:hidden; }
.nav-mobile.is-open{ transform:none; visibility:visible; }
.nav-mobile__close{ position:absolute; top:1.4rem; right:var(--gutter); width:2.9rem; height:2.9rem;
  border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line); color:var(--ink); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; }
.nav-mobile__logo{ display:inline-block; margin-bottom:1.8rem; }
.nav-mobile__logo img{ height:3rem; width:auto; display:block; }
.nav-mobile a:not(.btn){ display:block; font-family:var(--serif); font-size:1.75rem; padding-block:.75rem; border-bottom:1px solid var(--line); }
.nav-mobile .btn{ margin-top:2rem; width:100%; justify-content:center; font-size:1.05rem; }
@media (min-width:62em){ .nav{ display:flex; } .nav-toggle{ display:none; } .nav-mobile{ display:none; } }

/* --- Hero (immersiv) ------------------------------------------------------ */
.hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden; color:#fff; isolation:isolate; }
.hero__bg{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.hero__scrim{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(13,15,14,.58) 0%, rgba(13,15,14,.4) 34%, rgba(13,15,14,.58) 64%, rgba(13,15,14,.92) 100%); }
.hero__inner{ width:100%; padding-top:8rem; padding-bottom:clamp(3rem,6vw,5.5rem); }
.hero__content{ max-width:44rem; animation:rise .8s .1s var(--ease) both; }
.hero__content > * + *{ margin-top:1.4rem; }
.hero h1{ color:#fff; font-size:var(--fs-hero); letter-spacing:-.015em; }
.hero h1 em{ font-style:italic; color:#fff; }
.hero__sub{ font-size:var(--fs-lead); color:rgba(255,255,255,.9); max-width:34rem; line-height:1.55; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; padding-top:.6rem; }
@keyframes rise{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none;} }

/* --- Karten (Merkmale / Leistungen) --------------------------------------- */
.grid{ display:grid; gap:1.5rem; }
.grid--2{ grid-template-columns:1fr; }
.grid--3{ grid-template-columns:1fr; }
.grid--4{ grid-template-columns:1fr; }
@media (min-width:40em){ .grid--2{ grid-template-columns:repeat(2,1fr);} .grid--3{ grid-template-columns:repeat(2,1fr);} .grid--4{ grid-template-columns:repeat(2,1fr);} }
@media (min-width:62em){ .grid--3{ grid-template-columns:repeat(3,1fr);} .grid--4{ grid-template-columns:repeat(4,1fr);} }

.card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:2rem;
  box-shadow:var(--sh-1); transition:transform .4s cubic-bezier(.33,1,.68,1); }
.card::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:var(--sh-2);
  opacity:0; transition:opacity .4s cubic-bezier(.33,1,.68,1); pointer-events:none; }
.card:hover{ transform:translateY(-6px); }
.card:hover::after{ opacity:1; }
.card__icon{ width:4.4rem; height:4.4rem; border-radius:50%; border:1px solid var(--accent); color:var(--accent);
  display:grid; place-items:center; margin-bottom:1.3rem; }
.card__icon .ic{ width:2.1rem; height:2.1rem; }
.card h3,.card .card__title{ font-size:var(--fs-h3); font-family:var(--serif); font-weight:500; line-height:1.2; }
.card p{ margin-top:.5rem; color:var(--muted); font-size:.95rem; }
.card--media{ padding:0; overflow:hidden; }
.card--media::after{ display:none; }
a.card{ display:block; color:inherit; text-decoration:none; }
.card__media{ display:block; width:100%; height:var(--bh-media-h, 12rem); object-fit:cover; filter:saturate(1.02); }
.card__body{ padding:1.8rem; }

/* Bild-Karten: alle Karten gleich hoch, Bild mit fester Höhe,
   „Mehr erfahren“ immer unten bündig. */
.grid > .card{ height:100%; }
a.card--media{ display:flex; flex-direction:column; height:100%; }
.card__media{ flex:none; }
.card--media .card__body{ display:flex; flex-direction:column; flex:1 1 auto; }
.card--media .card__body .morelink{ margin-top:auto; padding-top:1rem; }

/* --- Split (Bild + Text) -------------------------------------------------- */
.split{ display:grid; gap:clamp(2rem,5vw,4rem); align-items:center; }
.split__media img{ width:100%; height:auto; border-radius:var(--r-lg); aspect-ratio:5/4; object-fit:cover;
  box-shadow:var(--sh-1); filter:saturate(1.03); }
.split__body .eyebrow{ margin-bottom:1.1rem; }
.split__body h2,.split__body .split__title{ font-size:var(--fs-h2); font-family:var(--serif); font-weight:500; line-height:1.08; }
.split__body p{ margin-top:1.1rem; color:var(--muted); }
.split__body p.lead{ color:var(--ink); }
.split__body .btn{ margin-top:1.8rem; }
@media (min-width:62em){ .split{ grid-template-columns:1fr 1fr; } .split--flip .split__media{ order:-1; } }

/* Text & Bild: Bild füllt die Container-Höhe komplett (Bildstil „Füllend“) */
.split--fill{ align-items:stretch; }
.split--fill .split__body{ display:flex; flex-direction:column; justify-content:center; }
.split--fill .split__media{ position:relative; }
.split--fill .split__media img{ aspect-ratio:5/4; }
@media (min-width:62em){
  .split--fill .split__media{ min-height:24rem; }
  .split--fill .split__media img{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; }
}

/* --- Ansprechpartner ------------------------------------------------------ */
.portrait{ position:relative; aspect-ratio:4/5; max-height:32rem; margin-inline:auto; width:100%;
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1);
  background:linear-gradient(160deg,var(--accent-soft),#D3D6D5); display:grid; place-items:center; }
.portrait > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 28%; }
.signature{ margin-top:1.7rem; }
.signature b{ display:block; font-family:var(--serif); font-weight:500; font-size:1.45rem; }
.signature span{ color:var(--muted); font-size:.95rem; }
.split--person .split__body p,
.split--person .split__body p.lead{ color:var(--muted); font-size:1.02rem; line-height:1.7; margin-top:1.1rem; }
.split--person .split__body h2{ color:var(--ink); }

/* --- Trauerportal --------------------------------------------------------- */
.obit{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:2rem;
  text-align:center; box-shadow:var(--sh-1); transition:transform .4s cubic-bezier(.33,1,.68,1); display:block; color:inherit; }
.obit::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:var(--sh-2);
  opacity:0; transition:opacity .4s cubic-bezier(.33,1,.68,1); pointer-events:none; }
.obit:hover{ transform:translateY(-6px); }
.obit:hover::after{ opacity:1; }
.obit__flame{ display:grid; place-items:center; width:3.6rem; height:3.6rem; margin:0 auto 1.1rem;
  border-radius:50%; border:1px solid var(--accent); color:var(--accent); }
.obit__flame .ic{ width:1.8rem; height:1.8rem; }
.obit__name{ font-size:1.4rem; font-family:var(--serif); font-weight:500; }
.obit__dates{ color:var(--muted); margin-top:.3rem; }
.obit__posted{ margin-top:.6rem; font-size:.8rem; color:var(--accent-deep); font-weight:600; letter-spacing:.02em; }
.obit__foto{ width:6rem; height:6rem; border-radius:50%; object-fit:cover; margin:0 auto 1.1rem; display:block; }
.obit__link{ display:inline-block; margin-top:1.1rem; color:var(--accent-deep); font-weight:600; }
.obit:hover .obit__link{ text-decoration:underline; }

/* Gedenkseite */
.gedenk{ text-align:center; }
.gedenk__foto{ width:10rem; height:10rem; border-radius:50%; object-fit:cover; margin:0 auto 1.5rem; box-shadow:var(--sh-1); }
.gedenk__flame{ display:grid; place-items:center; width:5rem; height:5rem; border-radius:50%; border:1px solid var(--accent); color:var(--accent); margin:0 auto 1.5rem; }
.gedenk__flame .ic{ width:2.4rem; height:2.4rem; }
.gedenk__name{ font-size:clamp(2rem,1.5rem + 2vw,3rem); }
.gedenk__daten{ color:var(--muted); margin-top:.4rem; font-size:1.1rem; }
.gedenk__text{ max-width:38rem; margin:2rem auto; color:var(--muted); line-height:1.75; }
.gedenk__text p + p{ margin-top:.8rem; }
.gedenk__kerze{ margin-top:2.5rem; }
.gedenk__kerze p{ margin-bottom:1rem; color:var(--muted); }
.kerze-count{ color:var(--accent-deep); font-weight:700; }
.kerze-count .ic{ width:1.05em; height:1.05em; vertical-align:-.15em; }

/* Trauerportal: Funktionen */
.portal-search{ position:relative; max-width:28rem; margin:0 0 1.2rem; }
.portal-search .ic{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); width:1.2rem; height:1.2rem; color:var(--muted); }
.portal-search input{ width:100%; font:inherit; padding:.85rem 1rem .85rem 2.9rem; border:1px solid var(--line);
  border-radius:12px; background:var(--surface); color:var(--ink); }
.portal-search input:focus{ outline:none; border-color:var(--accent); }
.portal-empty{ color:var(--muted); margin-bottom:1.5rem; }

.obit--interactive{ cursor:pointer; }
.obit__actions{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.5rem 1rem; margin-top:1.1rem; }
.obit__candle{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .85rem; border-radius:999px;
  border:1px solid var(--accent); background:transparent; color:var(--accent-deep); font:inherit; font-size:.85rem;
  font-weight:600; cursor:pointer; transition:background-color .2s,color .2s; }
.obit__candle .ic{ width:1.05rem; height:1.05rem; }
.obit__candle:hover, .obit__candle.is-lit{ background:var(--accent); color:#fff; }
.obit__candle:disabled{ cursor:default; }
/* .obit__more ist ein echter Button (Tastaturbedienung), sieht aber aus wie ein Textlink. */
.obit__more{ appearance:none; background:none; border:0; padding:0; font:inherit;
  color:var(--accent-deep); font-weight:600; font-size:.85rem; cursor:pointer; }
.obit:hover .obit__more, .obit__more:hover, .obit__more:focus-visible{ text-decoration:underline; }

/* Gedenkseite-Fenster (Modal) */
.modal{ position:fixed; inset:0; z-index:100; display:none; }
.modal.is-open{ display:block; }
.modal__overlay{ position:absolute; inset:0; background:rgba(14,16,15,.55); animation:mfadeIn .3s ease both; }
.modal__panel{ position:relative; z-index:1; max-width:44rem; margin:6vh auto; max-height:88vh; overflow:auto;
  background:var(--bg); border-radius:var(--r-lg); padding:clamp(1.8rem,4vw,3rem); box-shadow:var(--sh-2);
  animation:mIn .34s var(--ease) both; }
.modal.is-closing .modal__overlay{ animation:mfadeOut .26s ease both; }
.modal.is-closing .modal__panel{ animation:mOut .32s var(--ease) both; }
@keyframes mfadeIn{ from{opacity:0} to{opacity:1} }
@keyframes mfadeOut{ from{opacity:1} to{opacity:0} }
@keyframes mIn{ from{opacity:0; transform:translateY(18px) scale(.98)} to{opacity:1; transform:none} }
@keyframes mOut{ from{opacity:1; transform:none} to{opacity:0; transform:translateY(24px) scale(.955)} }
.modal__close{ position:absolute; top:1rem; right:1rem; width:2.6rem; height:2.6rem; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; display:grid; place-items:center;
  transition:background-color .2s var(--ease), color .2s, transform .2s; }
.modal__close:hover{ background:var(--ink); color:#fff; transform:rotate(90deg); }
.modal__close .ic{ width:1.3rem; height:1.3rem; }
.gedenk__service{ max-width:34rem; margin:0 auto 1.5rem; padding:1rem 1.3rem; background:var(--accent-soft);
  border-radius:12px; color:var(--ink); font-size:.95rem; line-height:1.6; }
.gedenk__actions{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }

/* Kondolenzen */
.kondolenz{ text-align:left; margin-top:2rem; border-top:1px solid var(--line); padding-top:1.5rem; }
.kondolenz h3{ font-size:1.3rem; margin-bottom:1rem; }
.kondolenz__form{ display:flex; flex-direction:column; gap:.7rem; margin-bottom:1.5rem; }
.kondolenz__form input, .kondolenz__form textarea{ font:inherit; padding:.7rem .85rem; border:1px solid var(--line);
  border-radius:10px; background:var(--surface); color:var(--ink); }
.kondolenz__form textarea{ min-height:5rem; resize:vertical; }
.kondolenz__form input:focus, .kondolenz__form textarea:focus{ outline:none; border-color:var(--accent); }
.kondolenz__form .btn{ align-self:flex-start; }
.kondolenz__list{ display:flex; flex-direction:column; gap:.8rem; }
.kondolenz__item{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1rem 1.2rem; }
.kondolenz__text{ color:var(--ink); }
.kondolenz__meta{ margin-top:.4rem; font-size:.82rem; color:var(--muted); font-weight:600; }
.kondolenz__empty{ color:var(--muted); font-size:.92rem; }

/* Rechtstext-Seiten */
.legal{ max-width:var(--wrap); }
.legal--narrow{ max-width:52rem; }
.legal h1{ font-size:clamp(2rem,1.6rem + 1.6vw,2.8rem); margin-bottom:1.5rem; }
.legal h2{ font-size:1.4rem; margin:2.2rem 0 .7rem; }
.legal h3{ font-size:1.15rem; margin:1.6rem 0 .5rem; }
.legal p, .legal address{ color:var(--muted); margin-bottom:.7rem; line-height:1.75; }
.legal a{ color:var(--accent-deep); }
.legal strong{ color:var(--ink); }
.legal ul{ list-style:disc; padding-left:1.3rem; color:var(--muted); margin-bottom:.7rem; }
.legal li{ margin-bottom:.3rem; line-height:1.7; }

#portal-toast{ position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%) translateY(1rem);
  background:var(--ink); color:#fff; padding:.7rem 1.2rem; border-radius:999px; font-size:.9rem;
  opacity:0; pointer-events:none; transition:opacity .25s,transform .25s; z-index:200; }
#portal-toast.is-show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* --- Versprechen (weiches Goldband) --------------------------------------- */
.pledge{ background:linear-gradient(160deg,var(--accent-soft),#F2F4F3); border-radius:var(--r-lg);
  padding:clamp(2.5rem,5vw,4.5rem); text-align:center; }
.pledge .ic-heart{ display:block; width:2.6rem; height:2.6rem; color:var(--accent); margin:0 auto 1.4rem; }
.pledge p{ font-family:var(--serif); font-weight:500; font-size:clamp(1.6rem,1.2rem + 1.8vw,2.5rem); line-height:1.3;
  max-width:44rem; margin-inline:auto; color:var(--ink); }
.pledge cite{ display:block; margin-top:1.4rem; font-style:normal; font-weight:600; color:var(--accent-deep); }

/* --- Ablauf (Schritte) ---------------------------------------------------- */
.steps{ display:grid; gap:1.5rem; counter-reset:step; }
@media (min-width:52em){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:2rem; }
.step__n{ display:inline-grid; place-items:center; width:2.9rem; height:2.9rem; border-radius:var(--r-pill);
  background:var(--ink); color:#fff; font-family:var(--serif); font-size:1.2rem; margin-bottom:1.2rem; }
.step h3,.step .step__title{ font-size:1.3rem; font-family:var(--serif); font-weight:500; }
.step p{ margin-top:.5rem; color:var(--muted); font-size:1rem; }

/* --- Fuß ------------------------------------------------------------------ */
.foot{ padding-block:clamp(3rem,5vw,4.5rem) 2rem; background:var(--bg-deep);
  border-top:1px solid var(--line); }
.foot__row{ display:grid; gap:2.5rem; align-items:start; }
.foot__logo{ height:5rem; width:auto; }
.foot__legal .lx span{ opacity:.5; }
.foot__tag{ margin-top:1rem; font-family:var(--serif); font-style:italic; color:var(--accent-deep); font-size:1.15rem; }
.foot__col .foot__h{ display:block; font-family:var(--sans); font-weight:700; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:.8rem; }
.foot__col a,.foot__col p{ color:var(--ink); }
/* Link-Unterstreichung/Hover kommt aus der globalen Regel oben. */
.foot__col li{ margin-bottom:.4rem; }
@media (min-width:48em){ .foot__row{ grid-template-columns:1.6fr 1fr 1fr; } }
/* Mobil: Footer-Inhalte zentriert */
@media (max-width:47.99em){
  .foot__row{ text-align:center; justify-items:center; }
  .foot__logo{ margin-inline:auto; }
  .foot__legal{ justify-content:center; text-align:center; }
  .foot__legal .lx{ justify-content:center; }
}
.foot__legal{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(52,56,55,.18);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; font-size:.9rem; color:var(--muted); }
.foot__legal .lx{ display:flex; gap:1.4rem; }

/* --- Weiterführende Links ------------------------------------------------- */
.morelink{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600;
  color:var(--accent-deep); text-decoration:none; }
.morelink::after{ content:"\2192"; transition:transform .2s ease; }
.morelink:hover{ text-decoration:underline; }
.morelink:hover::after{ transform:translateX(.2rem); }
.section-cta{ margin-top:2.4rem; }
.card__more{ margin-top:.9rem; }

/* --- FAQ ------------------------------------------------------------------- */
.faq{ max-width:52rem; margin-inline:auto; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item:first-of-type{ border-top:1px solid var(--line); }
/* Frage: echtes H3 mit Auf-/Zuklapp-Button (WAI-ARIA-Accordion) */
.faq__q{ margin:0; font-size:inherit; }
.faq__q button{ display:block; width:100%; text-align:left; background:none; border:0;
  cursor:pointer; position:relative; padding:1.4rem 2.75rem 1.4rem 0;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.1rem, 1.4vw, 1.28rem); color:var(--ink); line-height:1.35; }
.faq__q button::after{ content:""; position:absolute; right:.4rem; top:1.8rem;
  width:.68rem; height:.68rem; border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent); transform:rotate(45deg);
  transform-origin:center; transition:transform .25s ease; }
.faq__q button[aria-expanded="true"]::after{ transform:rotate(225deg); top:2rem; }
.faq__q button:hover{ color:var(--accent-deep); }
.faq__q button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.faq__a p{ margin:0 0 1.5rem; color:var(--muted); max-width:46rem; }
@media (prefers-reduced-motion:reduce){
  .morelink::after,.faq__q button::after{ transition:none; }
}

/* --- Sektion-Kopf mit Aktion rechts ---------------------------------------- */
.head--row{ max-width:none; display:flex; align-items:center; justify-content:space-between;
  gap:1.1rem 2.5rem; flex-wrap:wrap; }
.head--row .head__text{ max-width:44rem; }
.head--row .head__text h2{ font-size:var(--fs-h2); }
.head--row .head__text p{ margin-top:1rem; color:var(--muted); font-size:var(--fs-lead); }
.head--row .btn{ flex:0 0 auto; }

/* --- Seitenkopf (Unterseiten) ---------------------------------------------- */
.pagehead{ background:var(--accent-soft); }
.pagehead .wrap{ display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:center; }
.pagehead__body h1,.pagehead__body .pagehead__title{ font-family:var(--serif); font-weight:400; line-height:1.06; color:var(--ink);
  letter-spacing:-.015em; font-size:clamp(2.3rem, 1.5rem + 3.2vw, 3.7rem); }
.pagehead__body .lead{ margin-top:1.2rem; color:var(--muted); max-width:34rem; }
.pagehead__cta{ margin-top:2rem; display:flex; gap:.8rem; flex-wrap:wrap; }
.pagehead__media img{ width:100%; height:auto; border-radius:var(--r-lg); display:block;
  aspect-ratio:4/3; object-fit:cover; box-shadow:0 30px 55px -28px rgba(26,29,28,.45); }
@media (min-width:60em){ .pagehead .wrap{ grid-template-columns:1.05fr .95fr; } }
.pagehead--center .wrap{ display:block; text-align:center; }
.pagehead--center .pagehead__body{ max-width:48rem; margin-inline:auto; }
.pagehead--center .pagehead__body .lead{ max-width:none; margin-inline:auto; }
.pagehead--center .portal-search{ max-width:34rem; margin:2rem auto 0; }
.pagehead__body .portal-search{ margin-top:2rem; margin-bottom:0; }
.pagehead--center .pagehead__cta{ justify-content:center; }

/* --- Editoriale Zeilen-Liste ------------------------------------------------ */
.flist{ display:grid; }
@media (min-width:54em){ .flist{ grid-template-columns:1fr 1fr; column-gap:clamp(2.5rem,5vw,5rem); } }
.flist__item{ display:flex; gap:1.15rem; align-items:flex-start; padding:1.6rem .2rem;
  border-top:1px solid var(--line); }
.flist__item > svg{ flex:0 0 auto; width:1.7rem; height:1.7rem; color:var(--accent); margin-top:.1rem; }
.flist__item h3{ font-size:1.2rem; }
.flist__item p{ margin-top:.4rem; color:var(--muted); font-size:.97rem; line-height:1.6; }

/* Akkordeon (FAQ-Look, links ausgerichtet) */
.acc{ max-width:54rem; }
.acc .faq__item:first-of-type{ border-top:1px solid var(--line); }

/* Kontakt: Karte + Formular */
.kontakt-split{ display:grid; gap:clamp(1.5rem,3vw,2.2rem); align-items:stretch; margin-top:clamp(2rem,4vw,3rem); }
/* Kontaktbereich mit abgeschalteter Karte: Formular über die volle Breite. */
.kontakt-formwrap{ margin-top:clamp(2rem,4vw,3rem); }
@media (min-width:56em){ .kontakt-split{ grid-template-columns:1.05fr .95fr; } }
.kontakt-map{ display:block; width:100%; height:100%; min-height:22rem; border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1);
  /* Eigener Stacking-Kontext: Leaflet nutzt intern hohe z-index-Werte –
     ohne Isolation läge die Karte beim Scrollen über dem Header. */
  position:relative; z-index:0; isolation:isolate; overflow:hidden; }
#form{ scroll-margin-top:5.5rem; }

/* --- Vertrauen / Treuhandstelle -------------------------------------------- */
.trust{ position:relative; display:grid; gap:clamp(1.6rem,4vw,3rem); align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.8rem,4vw,3.2rem); box-shadow:0 24px 48px -34px rgba(26,29,28,.30); }
@media (min-width:54em){ .trust{ grid-template-columns:16rem 1fr; } }
.trust__logo{ width:100%; max-width:15rem; height:auto; }
.trust__badge{ display:inline-flex; align-items:center; gap:.45rem; color:var(--accent-deep);
  font-weight:700; font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; margin-bottom:.9rem; }
.trust__badge svg{ width:1.1rem; height:1.1rem; }
.trust__body h2,.trust__body .trust__title{ font-size:1.7rem; font-family:var(--serif); font-weight:500; }
.trust__body p{ margin-top:.9rem; color:var(--muted); }

/* --- Checkliste ------------------------------------------------------------- */
.checklist{ list-style:none; display:grid; gap:1rem; max-width:46rem; }
.checklist li{ display:flex; gap:.85rem; align-items:flex-start; color:var(--ink); font-size:1.05rem; }
.checklist svg{ flex:0 0 auto; width:1.5rem; height:1.5rem; color:var(--accent); margin-top:.05rem; }
.checklist__title{ font-family:var(--serif); font-size:1.4rem; font-weight:500; margin-bottom:1.2rem; }

/* --- Formular --------------------------------------------------------------- */
.form{ display:grid; gap:1.1rem; }
.form__row{ display:grid; gap:1.1rem; }
@media (min-width:34em){ .form__row{ grid-template-columns:1fr 1fr; } }
.field{ display:grid; gap:.4rem; }
.field label{ font-size:.85rem; font-weight:600; color:var(--ink); }
.field input,.field textarea{ font:inherit; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:10px; padding:.8rem .9rem; width:100%; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft); }
.field textarea{ min-height:7rem; resize:vertical; }
.form__note{ font-size:.85rem; color:var(--muted); margin-top:.2rem; }
.form__msg{ padding:.85rem 1rem; border-radius:10px; font-size:.95rem; }
.form__msg--ok{ background:#EAF3E4; color:#3D5A2E; border:1px solid #CBE0BC; }
.form__msg--error{ background:#F8E9E4; color:#7A3A28; border:1px solid #EBCFC4; }
.hp-field{ position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden; }

/* --- Icon + Text (Kontaktangaben) ------------------------------------------- */
.contact-cards{ display:grid; gap:1.4rem; }
@media (min-width:34em){ .contact-cards{ grid-template-columns:1fr 1fr; } }
@media (min-width:62em){ .contact-cards--4{ grid-template-columns:repeat(4,1fr); } }
.icontext{ display:flex; gap:1rem; align-items:flex-start; }
.icontext__ic{ flex:0 0 auto; display:grid; place-items:center; width:3.4rem; height:3.4rem;
  border-radius:50%; border:1px solid var(--accent); color:var(--accent); }
.icontext__ic svg{ width:1.4rem; height:1.4rem; }
.icontext .k{ font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.icontext p,.icontext address{ margin-top:.15rem; color:var(--ink); font-style:normal; line-height:1.5; }
/* Telefon/E-Mail: Unterstreichung/Hover kommt aus der globalen Link-Regel. */

/* --- CTA-Band ---------------------------------------------------------------- */
.ctaband{ text-align:center; max-width:44rem; margin-inline:auto; }
.ctaband h2,.ctaband h1,.ctaband .ctaband__title{ font-size:var(--fs-h2); font-family:var(--serif); font-weight:500; line-height:1.08; }
.ctaband p{ margin-top:1rem; color:var(--muted); }
.ctaband__row{ margin-top:2rem; display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

/* --- Kontaktseite ------------------------------------------------------------ */
.kontakt-grid{ display:grid; gap:clamp(1.5rem,3vw,2.2rem); align-items:start; }
@media (min-width:56em){ .kontakt-grid{ grid-template-columns:1fr 1.05fr; } }
.callcard{ display:flex; flex-direction:column; gap:1.6rem;
  background:var(--accent-soft); border:1px solid #D2D5D4; border-radius:var(--r-lg);
  padding:clamp(1.8rem,3.5vw,2.4rem); }
.callcard .k{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent-deep); }
.callcard__num{ display:inline-block; font-family:var(--serif); font-weight:500;
  font-size:clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem); color:var(--ink); margin:.5rem 0 .55rem; }
.callcard__num:hover,.callcard__num:focus-visible{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.35em; }
.callcard__lead{ color:var(--muted); max-width:26rem; }
.callcard .btn{ margin-top:1.4rem; }
.kontakt-form{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.8rem,3.5vw,2.6rem); box-shadow:0 24px 48px -34px rgba(26,29,28,.30); }
.kontakt-form h2,.kontakt-form .kontakt-form__title{ font-size:1.7rem; margin-bottom:.4rem; font-family:var(--serif); font-weight:500; }
.kontakt-form__intro{ margin-bottom:1.6rem; }
.consent{ display:flex; gap:.7rem; align-items:flex-start; font-size:.85rem; color:var(--muted); line-height:1.5;
  background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:.85rem 1rem; }
.consent input{ margin-top:.1rem; flex:none; width:1.05rem; height:1.05rem; accent-color:var(--accent); }
.consent a{ color:var(--accent-deep); }

/* --- Sanfte Einblendungen beim Scrollen -------------------------------------- */
.anim .pagehead__body,.anim .pagehead__media,.anim .head,.anim .card,.anim .step,
.anim .split__body,.anim .split__media,.anim .obit,.anim .trust,.anim .faq__item,
.anim .icontext,.anim .ctaband,.anim .pledge{
  opacity:0; translate:0 22px;
  transition:opacity .7s var(--ease), translate .7s var(--ease), transform .4s cubic-bezier(.33,1,.68,1); }
.anim .is-in{ opacity:1; translate:0 0; }
@media (prefers-reduced-motion:reduce){
  .anim .pagehead__body,.anim .pagehead__media,.anim .head,.anim .card,.anim .step,
  .anim .split__body,.anim .split__media,.anim .obit,.anim .trust,.anim .faq__item,
  .anim .icontext,.anim .ctaband,.anim .pledge{ opacity:1; translate:none; }
}

/* Dezenter Bild-Zoom in Medienkarten */
.card--media .card__media{ transition:transform .7s cubic-bezier(.22,.61,.36,1); }
.card--media:hover .card__media{ transform:scale(1.05); }

/* --- Lange Komposita umbrechen, kein Querscrollen ---------------------------- */
h1, h2, h3, .pagehead__body h1, .legal h1{ overflow-wrap:break-word; hyphens:auto; }
@media (max-width:34em){
  .hero h1 br{ display:none; }
}

/* =============================================================================
   WordPress- & Elementor-Anpassungen
   ============================================================================= */

/* Elementor setzt global `.elementor img { height:auto; border-radius:0;
   box-shadow:none }` und lädt NACH dem Theme-CSS. Diese Blöcke übersteuern
   den Reset mit höherer Spezifität, damit das Design wieder greift. */

/* Hero: Hintergrundbild füllt die volle Fläche (auch mobil) */
.elementor .hero__bg{
  width:100%; height:100%; max-width:none; object-fit:cover; }

/* Ansprechpartner-Porträt: füllt die Figur komplett */
.elementor .portrait > img{
  width:100%; height:100%; object-fit:cover; border-radius:0; }

/* Bild-Karten: feste Bildhöhe (gleich hohe Karten) */
.elementor .card--media .card__media{
  height:var(--bh-media-h, 12rem); object-fit:cover; border-radius:0; }

/* Text & Bild: Radius, Schatten, Format */
.elementor .split__media img{
  width:100%; border-radius:var(--r-lg); box-shadow:var(--sh-1);
  object-fit:cover; aspect-ratio:5/4; }
@media (min-width:62em){
  .elementor .split--fill .split__media{ min-height:26rem; }
  .elementor .split--fill .split__media img{
    position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; }
}
/* Seitenkopf-Bild: Format, Radius, Schatten */
.elementor .pagehead__media img{
  aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-lg);
  box-shadow:0 30px 55px -28px rgba(26,29,28,.45); }

/* Trauerportal: runde Fotos */
.elementor .obit__foto{ width:6rem; height:6rem; border-radius:50%; object-fit:cover; }
.elementor .gedenk__foto{ width:10rem; height:10rem; border-radius:50%; object-fit:cover; box-shadow:var(--sh-1); }

/* Elementor: Widgets füllen den Container; das Theme liefert .wrap/.section. */
.elementor-widget-container > .section{ width:100%; }
.e-con.e-flex > .e-con-inner{ max-width:none; }

/* Elementor-Editor: leere Widgets sichtbar halten */
.elementor-editor-active .section{ min-height:2rem; }

/* Blog-/Archiv-Fallback */
.index-entry{ margin-bottom:2rem; }
.index-entry h2 a{ color:var(--ink); text-decoration:none; }
.index-entry h2 a:hover,.index-entry h2 a:focus-visible{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }

/* Bildschirmleser-Text */
.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }