/* ===========================================================================
   Schulte-Michels — Anpassungen über Quark 2
   Wird als letztes geladen und überschreibt theme.css ohne !important.
   =========================================================================== */

:root {
  /* --- Farben ------------------------------------------------------------
     Warmes Off-White statt reinem Weiß, Text in sehr dunklem Warmgrau statt
     Schwarz. Reines Schwarz auf reinem Weiß ist über große Flächen hart. */
  --pico-background-color: #FAF9F7;
  --pico-color:            #2B2A28;
  --q2-bg:                 #FAF9F7;
  --q2-bg-elev:            #FFFFFF;
  --q2-bg-muted:           #F2F0EC;
  --q2-divider:            #E3DFD8;
  --q2-nav-bg:             rgba(250, 249, 247, 0.92);
  --q2-nav-border:         #E3DFD8;

  --pico-font-size:   17.5px;
  --pico-line-height: 1.68;

  /* Quark 2 setzt Überschriften und gedämpften Text über eigene Variablen —
     die --pico-Werte allein erreichen sie nicht. */
  --q2-text:        #2B2A28;
  --q2-text-strong: #1F1E1C;
  /* Quark 2 hat hier #898989. Für ein älteres Publikum zu schwach. */
  --q2-text-muted:  #5F5B55;

  --sm-akzent:  #47564C;
  /* Serifenschrift aus dem Systembestand: keine zusätzliche Datei, kein
     fremder Server. Cal Sans ist als Displayschrift zu geometrisch und wird
     bei kleinen Graden unruhig. */
  --sm-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
              "Times New Roman", serif;
  --pico-font-family-display: var(--sm-serif);
  --forum-font-display: var(--sm-serif);
}

/* Direkt gesetzt statt nur über die Variable — so kann keine spätere
   Definition von Quark 2 die Schrift zurückdrehen. */
h1, h2, h3, h4, h5, h6, .display, .h-display {
  font-family: var(--sm-serif);
}

body { font-size: 17.5px; }

h1 { font-weight: 600; letter-spacing: -0.015em; line-height: 1.16; }
h2 { font-weight: 600; letter-spacing: -0.005em; }
h3 { font-weight: 600; }

/* Quark 2 setzt über jede h2 einen kurzen Akzentstrich. Auf einer ruhigen
   Seite ist das eine Geste zu viel — die Serifenschrift trägt die Gliederung
   schon allein. */
h2::before { display: none; }

/* Deutsche Silbentrennung. Ohne sie brechen lange Wörter wie
   "Bestattungsarten" in schmalen Spalten an falscher Stelle um. */
body { hyphens: auto; -webkit-hyphens: auto; }
h1, h2, h3, h4, h5, h6 { hyphens: manual; overflow-wrap: normal; }

/* Fließtext schmaler setzen als der Container — lange Zeilen sind der
   häufigste Grund, warum Text auf Websites schwer zu lesen ist. */
main .container > *:not(.columns):not(section) { max-width: 68ch; }

/* ===== Marke im Kopfbereich ============================================== */

.marke { display: inline-flex; align-items: center; gap: 0.7rem;
         text-decoration: none; color: inherit; }

.marke-zeichen { display: block; flex: 0 0 auto; width: 2.9rem; color: #33312E; }
.marke-zeichen svg { display: block; width: 100%; height: auto; }

.marke-text { display: flex; flex-direction: column; line-height: 1.15; }

.marke-name {
  font-family: var(--sm-serif);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.marke-zusatz {
  font-family: var(--pico-font-family-sans-serif);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6F6B64;
  margin-top: 0.22rem;
}

@media (max-width: 480px) {
  .marke-zusatz { display: none; }
  .marke-zeichen { width: 2.3rem; }
  .marke-name { font-size: 1.12rem; }
}

/* ===== Hero ============================================================== */

.modular-hero:not([style*="background-image"]) {
  background: linear-gradient(180deg, #F2F0EC 0%, #FAF9F7 100%);
  color: var(--pico-color);
}
.modular-hero:not([style*="background-image"]) h1,
.modular-hero:not([style*="background-image"]) h2 { color: var(--pico-color); }

.modular-hero h1 {
  font-size: clamp(2.3rem, 5.5vw, 3.6rem);
  margin-bottom: 0.35rem;
}
.modular-hero h2 {
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  opacity: 0.86;
}

/* Der Pfeil "nach unten" ist eine Font-Awesome-Ikone und damit abgeschaltet. */
#to-start { display: none; }

/* ===== Leistungs-Kacheln ================================================= */

/* Ruhig statt schwebend: keine Schatten, keine gerundeten Karten, sondern
   eine Linie in der Hausfarbe. Passt besser zum Anlass. */
.modular-features .column {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  border-top: 2px solid var(--sm-akzent);
  padding: 1.15rem 0 0;
}
.modular-features .column:hover { box-shadow: none; transform: none; }

.modular-features .frame-box { padding-inline: 0; }

.modular-features h6 {
  font-family: var(--sm-serif);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0;
  /* Quark 2 setzt h6 global in Versalien — für Überschriften mit ganzen
     Wörtern ist das hier falsch. */
  text-transform: none;
  color: var(--pico-color);
  margin: 0 0 0.5rem;
  hyphens: auto;
}

.modular-features .feature-content p {
  font-size: 1rem;
  line-height: 1.6;
}

.modular-features a { text-decoration: none; color: inherit; }
.modular-features a:hover h6 { color: var(--sm-akzent); }

/* ===== Telefonnummern ==================================================== */

/* Auf einer Bestatterseite ist die Rufnummer das wichtigste Element der
   ganzen Website. */
a[href^="tel:"] {
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* ===== Fußzeile ========================================================== */

.fusszeile {
  background: var(--q2-bg-muted);
  border-top: 1px solid var(--q2-divider);
  font-size: 1rem;
  line-height: 1.7;
}

.fusszeile-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.8rem 2.6rem;
}

.fusszeile p { margin: 0 0 0.3rem; }

.fusszeile-titel {
  font-family: var(--sm-serif);
  font-size: 1.12rem;
  font-weight: 600;
  /* Nicht gesperrt und nicht in Versalien — genau das ließ die Zeilen
     gequetscht und unscharf wirken. */
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 0.55rem;
  color: var(--pico-color);
}

.fusszeile a { color: inherit; }
.fusszeile-telefon { font-size: 1.15rem; }

/* ===== Überschrift direkt nach der Seitenüberschrift ===================== */

/* Quark 2 behandelt eine h2 unmittelbar nach der h1 als Untertitel: es nimmt
   ihr den Akzentstrich und fast den ganzen Abstand. Auf einer Inhaltsseite
   ist die erste h2 aber eine vollwertige Überschrift — etwa die erste Frage
   auf der FAQ-Seite. Hier also zurücknehmen. */
h1 + h2 {
  margin-top: 1.5em;
  /* Quark 2 setzt hier die Akzentfarbe und eine negative Marge — beides
     gehört zum Untertitel-Gedanken und muss mit zurückgenommen werden,
     sonst steht die erste Frage grünlich und gedrängt über allen anderen. */
  color: var(--q2-text-strong);
  font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.125rem);
  font-weight: 600;
}
/* Wo die Untertitel-Lesart richtig ist, bleibt sie: im Hero und in
   zentrierten Blöcken. */
.modular-hero h1 + h2,
.text-center h1 + h2 {
  margin-top: 0.35rem;
}

/* ===== Anschriften ======================================================= */

/* Briefkopf-Setzung: Name, Straße, Ort je in eigener Zeile, etwas enger
   gesetzt als Fließtext. Markdown würde einzelne Zeilenumbrüche zu
   Leerzeichen machen — deshalb steht in diesen Blöcken im Text HTML mit
   <br>, und hier die Gestaltung dazu. */
.anschrift {
  line-height: 1.5;
  margin: 0 0 1.2rem;
}

.anschrift strong {
  font-family: var(--sm-serif);
  font-size: 1.1rem;
  font-weight: 600;
  /* Etwas Luft nach dem Namen, wie im Briefkopf über der Anschrift. */
  display: inline-block;
  margin-bottom: 0.2rem;
}

/* ===== Druckausgabe ====================================================== */

@media print {
  #header, #footer, .modular-hero { display: none; }
  body { font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}