/*
Theme Name: Bestattung Theme
Theme URI: https://your-domain.de
Author: Enrico
Description: 1:1 Nachbau von bestattungen-troeger.de als WordPress-Theme. Barrierefrei (WCAG 2.1 AA), vollständig responsiv. Linke Sidebar königsblau, Helvetica.
Version: 5.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bestattung-theme
Tags: funeral, responsive, accessibility-ready, custom-menu, custom-logo, featured-images
*/

/* ============================================================
   VARIABLEN — Farbwerte exakt nach Screenshot
   ============================================================ */
:root {
  /* Sidebar */
  --sb-width:        240px;
  --sb-logo-bg:      #ffffff;          /* Logo-Bereich: weiß  */
  --sb-nav-bg:       #2046A8;          /* Navigation: Königsblau */
  --sb-nav-hover:    #17348A;
  --sb-nav-active:   #1a3a96;
  --sb-nav-border:   rgba(255,255,255,0.12);
  --sb-text:         rgba(255,255,255,0.93);
  --sb-text-muted:   rgba(255,255,255,0.55);

  /* Allgemein */
  --dark:            #1a1c20;
  --dark-alt:        #22252b;
  --white:           #ffffff;
  --off-white:       #f8f8f6;
  --border:          #e0dedd;
  --text:            #2c2e34;
  --text-muted:      #6b6d74;

  /* CTA-Boxen analog Tröger */
  --cta-left-bg:     #3d4a37;   /* Dunkelgrün (original), wir nutzen dark-alt */
  --cta-right-bg:    #1a1c20;

  --gold:            #c8a96e;
  --focus:           #f0c040;

  --font: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --ease: 0.2s ease;
}

/* ============================================================
   RESET & BASIS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img  { max-width: 100%; height: auto; display: block; }
a    { color: var(--sb-nav-bg); text-decoration: underline; text-underline-offset: 2px; transition: color var(--ease); }
a:hover { color: var(--sb-nav-hover); }
strong, b { font-weight: 700; }
p  { margin-bottom: 1.2rem; }
p:last-child { margin-bottom: 0; }
ul, ol { padding-left: 1.5rem; margin-bottom: 1.2rem; }
li { margin-bottom: .3rem; }
hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font);
  font-weight: 300;
  line-height: 1.2;
  color: var(--dark);
  letter-spacing: .02em;
}
h1 { font-size: clamp(1.6rem,2.8vw,2.4rem); margin-bottom:.9rem; }
h2 { font-size: clamp(1.2rem,2.2vw,1.8rem); margin-bottom:.8rem; }
h3 { font-size: clamp(1rem,1.8vw,1.3rem);   margin-bottom:.7rem; }

blockquote {
  border-left: 3px solid var(--gold);
  padding: .75rem 1.25rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--text-muted);
}

/* ============================================================
   BARRIEREFREIHEIT
   ============================================================ */
.skip-link {
  position: absolute; top: -999px; left: 0; z-index: 9999;
  padding: .75rem 1.5rem;
  background: var(--sb-nav-bg); color: var(--white);
  font-family: var(--font); font-size: 1rem; text-decoration: none;
}
.skip-link:focus { top: 0; outline: 3px solid var(--focus); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============================================================
   GESAMT-LAYOUT: [SIDEBAR | CONTENT-WRAP]
   ============================================================ */
#page {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

/* ============================================================
   LINKE SIDEBAR — 1:1 nach Screenshot

   Aufbau (von oben nach unten):
     ┌─────────────────────┐
     │  WEISSER Logo-Bereich│  ← .sidebar-logo (weißer Hintergrund)
     ├─────────────────────┤
     │  NAV (königsblau)   │  ← .sidebar-nav  (--sb-nav-bg)
     │  zentrierter Text   │
     │  …                  │
     ├─────────────────────┤
     │  Uhr-Icon           │  ← .sidebar-phone (königsblau)
     │  Rund um die Uhr    │
     │  03723 42501 (fett) │
     └─────────────────────┘
   ============================================================ */
.site-sidebar {
  width: var(--sb-width);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 100;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}
.site-sidebar::-webkit-scrollbar { width: 4px; }
.site-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); }

/* ── LOGO-BEREICH: weiß ── */
.sidebar-logo {
  background: var(--sb-logo-bg);
  padding: 18px 20px;
  flex-shrink: 0;
  /* Trenner oben UND unten — Logo hebt sich vom Blau ab */
  border-top: 4px solid var(--sb-nav-hover);
  border-bottom: 4px solid var(--sb-nav-hover);
  min-height: 76px;
  display: flex;
  align-items: center;
}
.sidebar-logo a {
  display: block;
  text-decoration: none;
  width: 100%;
}
/* WordPress custom-logo: volle Breite, keine ungewollten margins */
.sidebar-logo .custom-logo-link {
  display: block;
  line-height: 0;
}
.sidebar-logo img,
.sidebar-logo .custom-logo {
  max-width: 100%;
  height: auto;
  max-height: 54px;
  width: auto;
  display: block;
}
/* Fallback-Text falls kein Logo hochgeladen */
.sidebar-logo-text {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dark);
  line-height: 1.3;
}

/* ── NAVIGATION: königsblau, Text zentriert ── */
.sidebar-nav {
  flex: 1;
  background: var(--sb-nav-bg);
}
.sidebar-nav .nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-nav .nav-menu > li {
  position: relative;
}
.sidebar-nav .nav-menu > li > a {
  display: block;
  padding: 13px 16px;
  font-size: .875rem;
  font-family: var(--font);
  letter-spacing: .02em;
  color: var(--sb-text);
  text-decoration: none;
  text-align: center;          /* ← zentriert wie Tröger */
  border-bottom: 1px solid var(--sb-nav-border);
  transition: background var(--ease), color var(--ease);
  line-height: 1.3;
}
.sidebar-nav .nav-menu > li > a:hover,
.sidebar-nav .nav-menu > li > a:focus-visible {
  background: var(--sb-nav-hover);
  color: var(--white);
  outline: none;
}
.sidebar-nav .nav-menu > li > a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}
.sidebar-nav .nav-menu > li.current-menu-item > a,
.sidebar-nav .nav-menu > li.current-page-ancestor > a,
.sidebar-nav .nav-menu > li.current-menu-ancestor > a {
  background: var(--sb-nav-active);
  color: var(--white);
  font-weight: 600;
}

/* Sub-Menü */
.sidebar-nav .nav-menu .sub-menu {
  display: none;
  list-style: none;
  padding: 0;
  background: rgba(0,0,0,.15);
}
.sidebar-nav .nav-menu > li:hover > .sub-menu,
.sidebar-nav .nav-menu > li:focus-within > .sub-menu,
.sidebar-nav .nav-menu > li.is-open > .sub-menu { display: block; }
.sidebar-nav .nav-menu .sub-menu li a {
  display: block;
  padding: 9px 16px 9px 28px;
  font-size: .82rem;
  color: rgba(255,255,255,.75);
  text-decoration: none;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background var(--ease), color var(--ease);
}
.sidebar-nav .nav-menu .sub-menu li a:hover {
  background: rgba(0,0,0,.1);
  color: var(--white);
}

/* ── TELEFON-BEREICH: königsblau, Icon + zentriert ── */
.sidebar-phone {
  flex-shrink: 0;
  background: var(--sb-nav-bg);
  padding: 20px 16px 22px;
  border-top: 1px solid var(--sb-nav-border);
  border-bottom: 1px solid var(--sb-nav-border);
  text-align: center;
}

/* Optische Trennung zwischen Telefon und Menü */
.sidebar-divider {
  flex-shrink: 0;
  height: 6px;
  background: var(--sb-nav-hover);  /* dunklerer Blauton als Trennstreifen */
  border-top: 1px solid rgba(0,0,0,.15);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-phone__icon {
  display: block;
  font-size: 1.4rem;
  color: var(--sb-text);
  margin-bottom: 8px;
  line-height: 1;
}
/* SVG-Uhr-Icon (inline, kein externer Font nötig) */
.sidebar-phone__icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: rgba(255,255,255,.85);
  stroke-width: 1.5;
  display: block;
  margin: 0 auto;
}
.sidebar-phone__label {
  display: block;
  font-size: .78rem;
  font-family: var(--font);
  letter-spacing: .03em;
  color: rgba(255,255,255,.92);   /* deutlich heller als vorher (.55) */
  margin-bottom: 10px;
  line-height: 1.6;
}
.sidebar-phone__label strong {
  color: var(--white);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
}
.sidebar-phone__number {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  letter-spacing: .04em;
  transition: color var(--ease);
  line-height: 1.2;
  text-shadow: 0 0 12px rgba(255,255,255,.25); /* leichter Glüh-Effekt für mehr Ablesbarkeit */
}
.sidebar-phone__number:hover { color: var(--gold); }

/* Hamburger (nur mobil) */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 12px; left: 12px;
  z-index: 200;
  background: var(--sb-nav-bg);
  border: none;
  border-radius: 3px;
  padding: 9px 11px;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.sidebar-toggle .bar {
  display: block; width: 20px; height: 2px;
  background: var(--white);
  transition: transform .25s, opacity .25s;
}
.sidebar-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sidebar-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.sidebar-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.sidebar-toggle:focus-visible { outline: 3px solid var(--focus); }

/* ============================================================
   RECHTER INHALTSBEREICH
   ============================================================ */
.site-wrap {
  margin-left: var(--sb-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ============================================================
   HERO-BEREICH (Startseite)
   Analog Tröger: HELLES Hintergrundbild (Winterszene),
   Zitat oben links in kursiver Schrift, kein dunkles Overlay
   ============================================================ */
.site-hero {
  position: relative;
  min-height: 44vh;   /* 55vh − 20% */
  background: var(--off-white);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}
.site-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
  opacity: 1;
}
/* Dezenter links-nach-weiß Gradient damit Zitat lesbar bleibt */
.site-hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255,255,255,.85) 0%,
    rgba(255,255,255,.5)  35%,
    rgba(255,255,255,.0)  65%
  );
}
.site-hero__content {
  position: relative;
  z-index: 1;
  padding: 3.5rem 3rem 3rem;
  max-width: 55%;
}
/* Zitat: kursiv, groß, dunkel — analog Tröger (Skript-Optik via italic) */
.site-hero__quote {
  font-size: clamp(1.4rem, 2.8vw, 2.4rem);
  font-style: italic;
  font-weight: 300;
  color: var(--dark);
  line-height: 1.45;
  letter-spacing: .01em;
  border: none;
  padding: 0;
  margin: 0;
}

/* ============================================================
   CONTENT-BEREICH UNTERHALB DES HEROES (Startseite)
   Analog Tröger: weißer Hintergrund, Text zentriert
   ============================================================ */
.hero-content-section {
  background: var(--white);
  padding: 3.5rem 3rem;
  text-align: center;
}
.hero-content-section h1,
.hero-content-section h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 300;
  color: var(--dark);
  margin-bottom: 1.25rem;
  letter-spacing: .02em;
}
.hero-content-section p {
  font-size: 1rem;
  color: var(--text);
  max-width: 620px;
  margin: 0 auto 1rem;
  line-height: 1.85;
}

/* ============================================================
   CTA-BOXEN (Startseite)
   Königsblau, schlanker, sichtbarer Trenner zwischen den Boxen
   ============================================================ */
.cta-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  flex-shrink: 0;
  gap: 16px;                          /* sichtbarer Abstand zwischen den Boxen */
  background: transparent;
  padding: 1.25rem 2rem 1.25rem 2rem; /* Abstand: links vom Menü, rechts vom Rand */
}
.cta-box {
  padding: 1.6rem 1.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  border-radius: 2px;
}
.cta-box--left   { background: var(--sb-nav-bg); }      /* Königsblau */
.cta-box--right  { background: var(--sb-nav-active); }  /* Dunkleres Blau */
.cta-box--third  { background: var(--sb-nav-hover); }   /* Noch dunkleres Blau */

/* Icon (SVG inline) */
.cta-box__icon svg {
  width: 34px; height: 34px;
  fill: none;
  stroke: rgba(255,255,255,.85);
  stroke-width: 1.5;
  display: block;
  margin: 0 auto;
}

.cta-box__text {
  font-size: .9rem;
  color: rgba(255,255,255,.82);
  line-height: 1.6;
  max-width: 240px;
}

/* Outline-Button */
.cta-box__btn {
  display: inline-block;
  padding: .55rem 1.6rem;
  border: 2px solid var(--white);
  color: var(--white);
  background: transparent;
  font-family: var(--font);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
  white-space: nowrap;
}
.cta-box__btn:hover {
  background: var(--white);
  color: var(--sb-nav-bg);
}
.cta-box__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ============================================================
   SEITEN-HEADER (Unterseiten)
   Foto-Banner analog dem Startseiten-Hero,
   mit Seitentitel als Overlay
   ============================================================ */
.page-hero {
  position: relative;
  height: 220px;
  background: var(--off-white);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 1;
}
.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255,255,255,.88) 0%,
    rgba(255,255,255,.55) 40%,
    rgba(255,255,255,.0)  70%
  );
}
.page-hero__title {
  position: relative;
  z-index: 1;
  padding: 1.5rem 2.5rem;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dark);
  margin: 0;
}

/* ============================================================
   SEITEN-INHALT (Unterseiten)
   Analog Tröger: weißer Hintergrund, Titel uppercase
   ============================================================ */
.site-main {
  flex: 1;
  padding: 3rem 3.5rem;
  background: var(--white);
}
.entry-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.entry-title {
  font-size: clamp(1.4rem,2.5vw,2rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dark);
}
.entry-meta { margin-top:.5rem; font-size:.82rem; color:var(--text-muted); }
.entry-content { font-size: 1rem; line-height: 1.85; color: var(--text); }
.entry-content h1,
.entry-content h2 {
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 2.25rem;
  margin-bottom: .85rem;
}
.entry-content h3,
.entry-content h4 { margin-top: 1.75rem; }
.entry-content img { margin: 1.5rem 0; }
.entry-content a { color: var(--sb-nav-bg); }
.entry-thumbnail { margin-bottom: 2rem; }
.entry-thumbnail img { width: 100%; }

/* Post-Navigation */
.post-nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: .875rem;
}
.post-nav a { color: var(--sb-nav-bg); text-decoration: none; }
.post-nav a:hover { text-decoration: underline; }

/* ============================================================
   BLOG-INDEX
   ============================================================ */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: 2rem;
}
.post-card { border: 1px solid var(--border); overflow: hidden; }
.post-card__thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.post-card__body { padding: 1.4rem; }
.post-card__title { font-size: 1rem; font-weight: 600; margin-bottom: .4rem; }
.post-card__title a { color: var(--dark); text-decoration: none; }
.post-card__title a:hover { color: var(--sb-nav-bg); }
.post-card__meta { font-size: .78rem; color: var(--text-muted); margin-bottom: .75rem; }
.post-card__excerpt { font-size: .9rem; color: var(--text-muted); margin-bottom: 1rem; }
.post-card__more { font-size:.82rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--sb-nav-bg); text-decoration:none; }
.post-card__more:hover { text-decoration: underline; }
.pagination { display:flex; gap:.4rem; margin-top:3rem; flex-wrap:wrap; }
.pagination a, .pagination span {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 .5rem;
  border:1px solid var(--border); font-size:.875rem; text-decoration:none; color:var(--text);
  transition:background var(--ease),color var(--ease);
}
.pagination a:hover, .pagination .current { background:var(--sb-nav-bg); color:var(--white); border-color:var(--sb-nav-bg); }

/* ============================================================
   WIDGETS
   ============================================================ */
.widget-area { margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--border); }
.widget { margin-bottom:2rem; }
.widget-title { font-size:.75rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--sb-nav-bg); border-bottom:1px solid var(--sb-nav-bg); padding-bottom:.4rem; margin-bottom:1rem; }
.widget ul { list-style:none; padding:0; margin:0; }
.widget ul li { border-bottom:1px solid var(--border); padding:.35rem 0; }
.widget ul li a { color:var(--text); text-decoration:none; font-size:.875rem; }
.widget ul li a:hover { color:var(--sb-nav-bg); }

/* ============================================================
   KOMMENTARE
   ============================================================ */
.comments-section { margin-top:3rem; padding-top:2rem; border-top:1px solid var(--border); }
.comments-title { font-size:1.1rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-bottom:1.5rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width:100%; padding:.75rem 1rem; font-family:var(--font); font-size:1rem; color:var(--text);
  border:1px solid var(--border); margin-bottom:1rem; transition:border-color var(--ease);
}
.comment-form input:focus, .comment-form textarea:focus { border-color:var(--sb-nav-bg); outline:3px solid rgba(32,70,168,.15); }
.comment-form textarea { min-height:120px; resize:vertical; }
.comment-form .submit {
  background:var(--sb-nav-bg); color:var(--white); border:none;
  padding:.8rem 1.75rem; font-family:var(--font); font-size:.875rem;
  font-weight:600; letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
  transition:background var(--ease);
}
.comment-form .submit:hover { background:var(--sb-nav-hover); }

/* ============================================================
   FOOTER — minimal dunkel, analog Tröger
   ============================================================ */
.site-footer {
  background: var(--dark);
  padding: 1.5rem 3rem;
  border-top: 1px solid #2e3038;
  flex-shrink: 0;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
}
.footer-brand {
  font-size: .78rem;
  color: rgba(255,255,255,.38);
  letter-spacing: .06em;
  line-height: 1.6;
}
.footer-brand strong {
  display: block;
  font-weight: 300;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.footer-brand a { color:rgba(255,255,255,.35); text-decoration:none; }
.footer-brand a:hover { color:var(--gold); }
.footer-links { display:flex; gap:1.25rem; flex-wrap:wrap; }
.footer-links a {
  font-size:.78rem; color:rgba(255,255,255,.45); text-decoration:none;
  letter-spacing:.05em; transition:color var(--ease);
}
.footer-links a:hover { color:var(--gold); }

/* ============================================================
   FORMULARE / BUTTONS
   ============================================================ */
.form-group { margin-bottom:1.2rem; }
.form-label { display:block; font-size:.875rem; font-weight:600; margin-bottom:.4rem; }
.form-control {
  width:100%; padding:.75rem 1rem; font-family:var(--font); font-size:1rem;
  color:var(--text); background:var(--white); border:1px solid var(--border);
  transition:border-color var(--ease); appearance:none;
}
.form-control:focus { border-color:var(--sb-nav-bg); outline:3px solid rgba(32,70,168,.15); }
textarea.form-control { min-height:120px; resize:vertical; }
.btn {
  display:inline-block; padding:.75rem 1.75rem; font-family:var(--font);
  font-size:.875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; border:none; transition:background var(--ease),color var(--ease);
}
.btn:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.btn-primary { background:var(--sb-nav-bg); color:var(--white); }
.btn-primary:hover { background:var(--sb-nav-hover); color:var(--white); }

/* 404 */
.error-404 { padding:4rem 3rem; text-align:center; }
.error-code { font-size:clamp(5rem,15vw,12rem); font-weight:900; color:var(--sb-nav-bg); opacity:.12; line-height:1; margin-bottom:.5rem; }
.search-form { display:flex; gap:.4rem; max-width:440px; margin:1.5rem auto 0; }
.search-form input[type="search"] { flex:1; padding:.75rem 1rem; font-family:var(--font); font-size:1rem; border:1px solid var(--border); }
.search-form button { padding:.75rem 1.25rem; background:var(--sb-nav-bg); color:var(--white); border:none; font-family:var(--font); font-size:.875rem; font-weight:600; cursor:pointer; }
.search-form button:hover { background:var(--sb-nav-hover); }

/* ============================================================
   RESPONSIVE — ≤ 1024px
   ============================================================ */
/* ============================================================
   RESPONSIVE — ≤ 1024px (Tablet)
   - Sidebar schmaler
   - 3 CTA-Boxen → 2 Spalten (3. Box bricht um)
   ============================================================ */
@media (max-width:1024px) {
  :root { --sb-width: 200px; }
  .site-main { padding:2.5rem 2rem; }
  .hero-content-section { padding:2.5rem 2rem; }
  .cta-strip {
    grid-template-columns: 1fr 1fr;   /* 2 Spalten; dritte Box bricht in neue Zeile */
    padding:1rem 1.5rem;
  }
  .cta-box--third {
    grid-column: 1 / -1;              /* dritte Box volle Breite */
    max-width: 50%;
    margin: 0 auto;
    width: 100%;
  }
  .site-footer { padding:1.25rem 2rem; }
  .posts-grid { grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); }
}

/* ============================================================
   RESPONSIVE — ≤ 768px (Mobil / Off-canvas Drawer)
   - Sidebar als einschiebbares Overlay
   - Alle Spalten → 1 Spalte
   ============================================================ */
@media (max-width:768px) {
  :root { --sb-width: 260px; }

  /* Sidebar-Toggle sichtbar */
  .sidebar-toggle { display:flex; }

  /* Sidebar als Off-canvas-Drawer */
  .site-sidebar {
    transform: translateX(-100%);
    transition: transform .3s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,.4);
  }
  .site-sidebar.is-open { transform: translateX(0); }

  /* Halbdurchsichtiges Overlay hinter geöffneter Sidebar */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 99;
  }
  .sidebar-overlay.is-active { display: block; }

  /* Inhalt nutzt volle Breite */
  .site-wrap { margin-left: 0; }

  /* Hero */
  .site-hero { min-height: 40vh; }
  .site-hero__content { max-width: 90%; padding: 2rem 1.25rem; }
  .site-hero__gradient {
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,.9) 0%,
      rgba(255,255,255,.5) 60%,
      rgba(255,255,255,0) 100%
    );
  }
  .site-hero__quote { font-size: clamp(1rem,5vw,1.4rem); }

  /* CTA-Boxen: alle untereinander */
  .cta-strip {
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 0;
  }
  .cta-box--third {
    grid-column: auto;
    max-width: 100%;
  }

  /* Seiten-Header */
  .page-hero { height: 140px; }
  .page-hero__title { padding: 1rem 1.25rem; font-size: 1rem; }

  /* Inhaltsabschnitte */
  .hero-content-section { padding: 1.75rem 1.25rem; }
  .site-main { padding: 1.75rem 1.25rem; }

  /* Footer */
  .site-footer { padding: 1.25rem; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: .5rem; }

  /* Blog-Grid: eine Spalte */
  .posts-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   RESPONSIVE — ≤ 480px (Kleine Smartphones)
   ============================================================ */
@media (max-width:480px) {
  .site-hero { min-height: 35vh; }
  .site-hero__content { padding: 1.5rem 1rem; }
  .site-hero__quote { font-size: clamp(.9rem,4.5vw,1.15rem); }

  .hero-content-section { padding: 1.5rem 1rem; }
  .hero-content-section h1,
  .hero-content-section h2 { font-size: 1.25rem; }

  .cta-box { padding: 1.25rem 1rem; }

  .page-hero { height: 110px; }
  .page-hero__title { font-size: .9rem; padding: .75rem 1rem; }

  .site-main { padding: 1.5rem 1rem; }
  .entry-title { font-size: 1.2rem; }

  .sidebar-logo { min-height: 56px; padding: 12px; }
  .sidebar-logo img,
  .sidebar-logo .custom-logo { max-height: 40px; }
}

/* ============================================================
   DRUCK
   ============================================================ */
@media print {
  .site-sidebar, .sidebar-toggle, .sidebar-overlay { display: none !important; }
  .site-wrap { margin-left: 0 !important; }
  .site-hero { min-height: auto; background: none; color: #000; }
  .site-hero__quote { color: #000; }
  .cta-strip { display: none; }
  body { font-size: 11pt; color: #000; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  h1,h2,h3 { page-break-after: avoid; }
  img { max-width: 100% !important; }
}

/* ============================================================
   KONTAKTFORMULAR — [bestattung_kontakt]
   ============================================================ */
.bestattung-contact-wrap {
  max-width: 720px;
  margin: 0 auto;
}

/* Statusmeldungen */
.cf-notice {
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
  font-size: .95rem;
  line-height: 1.6;
}
.cf-notice strong { display: block; margin-bottom: .25rem; font-weight: 700; }
.cf-notice--success {
  background: #eaf5ee;
  border-left: 4px solid #2d8a4e;
  color: #1a5c32;
}
.cf-notice--error {
  background: #fdf0f0;
  border-left: 4px solid #c0392b;
  color: #7a1f1f;
}

/* Raster: 2 Spalten auf Desktop */
.cf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

/* Einzelnes Feld */
.cf-field { display: flex; flex-direction: column; gap: .35rem; }
.cf-field--full { margin-bottom: 1.25rem; }

/* Label */
.cf-label {
  font-size: .875rem;
  font-weight: 600;
  font-family: var(--font);
  color: var(--text);
}
.cf-required {
  color: #c0392b;
  margin-left: .2rem;
  font-weight: 700;
}
.cf-optional {
  font-size: .78rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: .25rem;
}

/* Eingabefelder */
.cf-input {
  width: 100%;
  padding: .75rem 1rem;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
  transition: border-color var(--ease), box-shadow var(--ease);
  appearance: none;
  border-radius: 0;
}
.cf-input:focus {
  border-color: var(--sb-nav-bg);
  box-shadow: 0 0 0 3px rgba(32,70,168,.15);
  outline: none;
}
.cf-input[aria-invalid="true"] {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192,57,43,.1);
}
.cf-select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6d74' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.cf-textarea { resize: vertical; min-height: 140px; }

/* Fehlermeldung unter dem Feld */
.cf-error-msg {
  font-size: .8rem;
  color: #c0392b;
  margin-top: .15rem;
}

/* Datenschutz-Hinweis */
.cf-privacy {
  font-size: .8rem;
  color: var(--text-muted);
  margin: 1rem 0 1.25rem;
  line-height: 1.6;
}
.cf-privacy a { color: var(--sb-nav-bg); }

/* Absenden-Button */
.cf-submit {
  display: inline-block;
  padding: .85rem 2.25rem;
  background: var(--sb-nav-bg);
  color: var(--white);
  border: none;
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--ease);
}
.cf-submit:hover { background: var(--sb-nav-hover); }
.cf-submit:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Honeypot verstecken */
.cf-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Responsive */
@media (max-width: 600px) {
  .cf-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   EINLEITUNGSBEREICH MIT PORTRAIT — Option B (Foto rechts)
   ============================================================ */

/* Gleicher Abstand oben wie unten (hero-content-section → CTA) */
.hero-content-section {
  padding: 3.5rem 3rem;
}

/* Zweispaltiges Layout: Text links, Foto rechts */
.intro-with-photo {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  text-align: left;
}

.intro-text-col {
  flex: 1;
  min-width: 0;
}
.intro-text-col h2 {
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  font-weight: 300;
  color: var(--dark);
  margin-bottom: 1.25rem;
  letter-spacing: .02em;
}
.intro-text-col p {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text);
  margin-bottom: 1rem;
}
.intro-text-col p:last-child { margin-bottom: 0; }

/* Portrait-Foto (rechts, rund) */
.intro-portrait {
  flex-shrink: 0;
  width: 200px;
  text-align: center;
  margin: 0;
}
.intro-portrait__circle {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  /* Blauer Ring als Rahmen */
  box-shadow:
    0 0 0 4px var(--white),
    0 0 0 7px var(--sb-nav-bg);
}
.intro-portrait__circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.intro-portrait__caption {
  display: block;
  margin-top: 1rem;
  font-size: .8rem;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Tablet */
@media (max-width: 1024px) {
  .intro-portrait { width: 170px; }
  .intro-portrait__circle { width: 150px; height: 150px; }
  .intro-with-photo { gap: 2rem; }
}

/* Mobil: Foto oben zentriert, Text darunter */
@media (max-width: 700px) {
  .intro-with-photo {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .intro-portrait { width: 150px; order: -1; }
  .intro-portrait__circle { width: 130px; height: 130px; }
  .intro-text-col { text-align: left; }
}

@media (max-width: 480px) {
  .hero-content-section { padding: 2rem 1.25rem; }
  .intro-portrait__circle { width: 110px; height: 110px; }
}

/* Gutenberg-Editor-Inhalt im Einleitungsbereich */
.intro-editor-content { font-size: 1rem; line-height: 1.85; color: var(--text); }
.intro-editor-content p  { margin-bottom: 1rem; }
.intro-editor-content p:last-child { margin-bottom: 0; }
.intro-editor-content strong { font-weight: 700; }
.intro-editor-content em { font-style: italic; }
.intro-editor-content ul,
.intro-editor-content ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.intro-editor-content li { margin-bottom: .3rem; }
.intro-editor-content a { color: var(--sb-nav-bg); }