/* Friedhofsverbund Cranzahl – Konzept C „Schiefer und Sandstein“
   Schiefergrau der Kirchendächer im Erzgebirge, Sandstein aus dem Grabstein im Logo,
   Nebelgrau als Grund. Schrift: Schola (lesbare Buchschrift) für Überschriften,
   Clarity City für Fließtext und Bedienung. */

@font-face { font-family: "Schola"; src: url("../fonts/texgyreschola-regular.otf") format("opentype"); font-weight: 400; }
@font-face { font-family: "Schola"; src: url("../fonts/texgyreschola-bold.otf") format("opentype"); font-weight: 700; }
@font-face { font-family: "Schola"; src: url("../fonts/texgyreschola-italic.otf") format("opentype"); font-weight: 400; font-style: italic; }
@font-face { font-family: "Clarity City"; src: url("../fonts/ClarityCity-Regular.woff2") format("woff2"); font-weight: 400; }
@font-face { font-family: "Clarity City"; src: url("../fonts/ClarityCity-Medium.woff2") format("woff2"); font-weight: 500; }
@font-face { font-family: "Clarity City"; src: url("../fonts/ClarityCity-Bold.woff2") format("woff2"); font-weight: 700; }

:root {
  --nebel: #ECEFEC;
  --weiss: #FFFFFF;
  --schiefer: #25333B;
  --schiefer-2: #34454F;
  --text: #1E282E;
  --grau: #55616A;
  --sand: #D3C28A;
  --sand-hell: #F1EAD3;
  --linde: #5D6E2C;
  --linie: #D6DCD8;
  --serif: "Schola", "Century Schoolbook", Georgia, serif;
  --sans: "Clarity City", "Helvetica Neue", Arial, sans-serif;
  --max: 1280px;
  --rand: clamp(20px, 4vw, 48px);
  --r: 6px;
}
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body { font-family: var(--sans); font-size: 17px; line-height: 1.65; color: var(--text); background: var(--weiss); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 400; color: var(--schiefer); letter-spacing: -0.01em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.c { max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }
.t1 { font-size: clamp(38px, 4.4vw, 60px); line-height: 1.1; }
.t2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.15; }
.t3 { font-size: 26px; line-height: 1.25; }
.t4 { font-size: 21px; line-height: 1.3; }
.lead { font-size: 19px; line-height: 1.6; color: var(--grau); }
.grau { color: var(--grau); }
.sek { padding: clamp(72px, 8vw, 120px) 0; }
.nebel { background: var(--nebel); }
.dunkel { background: var(--schiefer); color: #D4DCE0; }
.dunkel h1, .dunkel h2, .dunkel h3, .dunkel h4 { color: var(--weiss); }
.kopfzeile { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 48px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: var(--r); font-weight: 700; font-size: 16px; border: 1.5px solid transparent; }
.btn--schiefer { background: var(--schiefer); color: var(--weiss); }
.btn--sand { background: var(--sand); color: var(--schiefer); }
.btn--linie { border-color: var(--schiefer); color: var(--schiefer); }
.btn--linie-hell { border-color: rgba(255,255,255,.5); color: var(--weiss); }
.link { font-weight: 700; color: var(--schiefer); text-decoration: underline; text-decoration-color: var(--sand); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.dunkel .link { color: var(--weiss); }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Kopf */
.kopf { background: var(--weiss); border-bottom: 1px solid var(--linie); }
.kopf .c { display: flex; align-items: stretch; gap: 40px; height: 96px; }
.marke { display: flex; align-items: center; gap: 14px; }
.marke img { height: 50px; }
.marke span { font-family: var(--serif); font-size: 20px; line-height: 1.1; color: var(--schiefer); }
.nav { display: flex; align-items: center; gap: 30px; margin-left: auto; font-weight: 500; font-size: 16px; }
.nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--sand); padding-bottom: 4px; font-weight: 700; }
.notruf { display: flex; flex-direction: column; justify-content: center; padding: 0 28px; margin-right: calc(-1 * var(--rand)); background: var(--schiefer); color: var(--weiss); line-height: 1.25; }
.notruf small { font-size: 13px; color: var(--sand); font-weight: 500; }
.notruf b { font-family: var(--serif); font-weight: 400; font-size: 23px; }
.menu { display: none; }

/* Start: zwei Wege */
.einstieg { padding: 64px 0 0; background: var(--nebel); }
.einstieg__kopf { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: end; margin-bottom: 48px; }
.wege { display: grid; grid-template-columns: 1fr 1fr; gap: 0; transform: translateY(64px); margin-top: -64px; box-shadow: 0 30px 60px rgba(37, 51, 59, .12); }
.weg { padding: 48px; min-height: 460px; display: flex; flex-direction: column; }
.weg--trauer { background: var(--schiefer); color: #D4DCE0; }
.weg--trauer h2 { color: var(--weiss); }
.weg__nummer { font-family: var(--serif); font-size: clamp(48px, 5vw, 72px); line-height: 1; color: var(--sand); margin: 28px 0 12px; letter-spacing: -0.01em; }
.weg__zeiten { font-size: 15px; color: #B7C2C8; }
.weg__fuss { margin-top: auto; display: flex; gap: 14px; flex-wrap: wrap; padding-top: 32px; }
.weg--vorsorge { position: relative; background: var(--weiss); padding: 0; display: grid; grid-template-rows: 200px 1fr; }
.weg--vorsorge > img { width: 100%; height: 200px; object-fit: cover; }
.weg--vorsorge .innen { padding: 36px 48px 40px; }
.aufgaben { margin-top: 16px; border-top: 1px solid var(--linie); }
.aufgaben a { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.aufgaben b { font-family: var(--serif); font-weight: 400; font-size: 21px; color: var(--schiefer); }
.aufgaben span { font-size: 14px; color: var(--grau); }
.nach-wege { padding-top: calc(64px + clamp(72px, 8vw, 110px)); }

/* Friedhöfe */
.orte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.ort { display: grid; grid-template-columns: 112px 1fr auto; gap: 22px; align-items: center; padding: 18px 0; border-top: 1px solid var(--linie); }
.ort img { width: 112px; height: 84px; object-fit: cover; border-radius: 3px; }
.ort .platz { width: 112px; height: 84px; border-radius: 3px; background: var(--nebel); display: grid; place-items: center; font-size: 12px; color: var(--grau); text-align: center; }
.ort h3 { font-size: 24px; }
.ort p { font-size: 14.5px; color: var(--grau); }
.ort .ico { color: var(--grau); }
.ort--erst { grid-column: 1 / -1; grid-template-columns: 1.4fr 1fr; gap: 48px; padding: 0 0 32px; border-top: 0; align-items: stretch; }
.ort--erst img { width: 100%; height: 360px; border-radius: 3px; }
.ort--erst div { align-self: center; }
.ort--erst h3 { font-size: 34px; margin-bottom: 12px; }
.ort--erst p { font-size: 17px; }

/* Jahreslauf */
.jahr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.jahr figure { margin: 0; }
.jahr img { width: 100%; height: 400px; object-fit: cover; border-radius: 3px; }
.jahr figcaption { margin-top: 16px; }
.jahr figcaption b { display: block; font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--weiss); }
.jahr figcaption span { font-size: 15px; color: #B7C2C8; }

/* Grabarten-Tabelle */
.tabelle { width: 100%; border-collapse: collapse; background: var(--weiss); }
.tabelle th, .tabelle td { padding: 20px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); font-size: 15.5px; font-weight: 400; }
.tabelle thead th { background: var(--schiefer); color: var(--weiss); font-family: var(--serif); font-size: 21px; }
.tabelle thead th small { display: block; font-family: var(--sans); font-size: 13px; color: var(--sand); margin-top: 4px; }
.tabelle tbody th { color: var(--grau); width: 16%; font-weight: 500; }
.tabelle .preis td { font-family: var(--serif); font-size: 28px; color: var(--schiefer); }
.tabelle .preis td small { display: block; font-family: var(--sans); font-size: 13px; color: var(--grau); }
.offen { color: #8A6D1E; font-weight: 500; }

/* Aktuelles */
.meldungen { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; }
.meldung-gross img { width: 100%; height: 340px; object-fit: cover; border-radius: 3px; margin-bottom: 22px; }
.datum { font-size: 14px; font-weight: 700; color: var(--linde); margin-bottom: 8px; display: block; }
.meldungen ul li { padding: 24px 0; border-top: 1px solid var(--linie); }
.meldungen ul li:last-child { border-bottom: 1px solid var(--linie); }

/* Fuß */
.fuss { background: var(--schiefer); color: #B7C2C8; padding: 80px 0 32px; font-size: 15.5px; }
.fuss__oben { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.12); }
.fuss h4 { font-family: var(--sans); font-weight: 700; font-size: 15px; color: var(--sand); margin-bottom: 16px; }
.fuss ul { display: grid; gap: 8px; }
.fuss__marke { display: inline-flex; align-items: center; gap: 12px; background: var(--weiss); padding: 12px 18px 12px 14px; border-radius: var(--r); margin-bottom: 18px; }
.fuss__marke img { height: 40px; }
.fuss__marke span { font-family: var(--serif); color: var(--schiefer); line-height: 1.1; }
.fuss__tel { font-family: var(--serif); font-size: 30px; color: var(--weiss); display: block; }
.fuss__unten { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 26px; font-size: 14px; }

/* Unterseiten */
.seitenkopf { background: var(--nebel); padding: 56px 0 64px; }
.pfad { font-size: 14px; color: var(--grau); margin-bottom: 40px; }
.pfad a { text-decoration: underline; text-underline-offset: 3px; }
.seitenkopf__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: end; }
.seitenbild { height: 420px; }
.seitenbild img { width: 100%; height: 100%; object-fit: cover; }
.anruf { display: grid; grid-template-columns: 1.2fr 1fr 1fr; background: var(--schiefer); color: #D4DCE0; }
.anruf > div { padding: 40px 40px; border-left: 1px solid rgba(255,255,255,.12); }
.anruf > div:first-child { border-left: 0; }
.anruf small { display: block; font-size: 14px; color: var(--sand); font-weight: 500; margin-bottom: 8px; }
.anruf .nr { font-family: var(--serif); font-size: 46px; line-height: 1; color: var(--weiss); }
.schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: s; border-top: 2px solid var(--schiefer); }
.schritte li { padding: 32px 32px 0 0; counter-increment: s; }
.schritte li + li { padding-left: 32px; border-left: 1px solid var(--linie); }
.schritte li::before { content: counter(s); display: block; font-family: var(--serif); font-size: 56px; line-height: 1; color: var(--sand); margin-bottom: 20px; }
.schritte h3 { margin-bottom: 10px; }
.schritte p { color: var(--grau); }
.vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vergleich > div { background: var(--weiss); padding: 40px; border-top: 4px solid var(--sand); }
.vergleich > div + div { border-top-color: var(--schiefer); }
.vergleich .dauer { font-weight: 700; color: var(--linde); margin: 10px 0 18px; }
.punkte li { padding: 10px 0 10px 22px; position: relative; border-bottom: 1px solid var(--linie); }
.punkte li::before { content: ""; position: absolute; left: 0; top: 21px; width: 8px; height: 8px; background: var(--sand); }
.zweispaltig { display: grid; grid-template-columns: 1fr 1.2fr; gap: 72px; align-items: start; }
.nr-liste { counter-reset: n; }
.nr-liste li { counter-increment: n; display: grid; grid-template-columns: 48px 1fr; padding: 18px 0; border-top: 1px solid var(--linie); font-size: 17.5px; }
.nr-liste li:last-child { border-bottom: 1px solid var(--linie); }
.nr-liste li::before { content: counter(n) "."; font-family: var(--serif); font-size: 22px; color: var(--linde); }
.hinweis { display: inline-block; margin-top: 20px; font-size: 14px; font-weight: 500; color: #7A5E12; background: var(--sand-hell); padding: 8px 12px; border-radius: 4px; }
.fragen details { border-top: 1px solid var(--linie); }
.fragen details:last-child { border-bottom: 1px solid var(--linie); }
.fragen summary { display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font-family: var(--serif); font-size: 22px; color: var(--schiefer); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; font-family: var(--sans); font-size: 24px; color: var(--linde); }
.fragen details[open] summary::after { content: "–"; }
.fragen details p { padding: 0 0 24px; color: var(--grau); max-width: 680px; }
.steckbrief { background: var(--nebel); padding: 32px; }
.steckbrief dl { margin: 0; }
.steckbrief div { padding: 14px 0; border-top: 1px solid var(--linie); }
.steckbrief dt { font-size: 13.5px; color: var(--grau); }
.steckbrief dd { margin: 2px 0 0; font-family: var(--serif); font-size: 19px; color: var(--schiefer); }
.steckbrief .btn { width: 100%; margin-top: 12px; }
.bildreihe { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; margin: 40px 0; }
.bildreihe img { width: 100%; height: 300px; object-fit: cover; border-radius: 3px; }
.preisliste li { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid var(--linie); }
.preisliste li:last-child { border-bottom: 1px solid var(--linie); }
.preisliste b { font-family: var(--serif); font-weight: 400; font-size: 21px; color: var(--schiefer); }
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld label { font-size: 14px; font-weight: 500; color: var(--grau); }
.feld span { display: block; height: 54px; border: 1.5px solid #B9C2C6; border-radius: var(--r); background: var(--weiss); }
.feld span.gross { height: 140px; }
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; background: var(--nebel); padding: 40px; }
.formular .voll { grid-column: 1 / -1; }
.einwill { display: flex; gap: 10px; font-size: 14px; color: var(--grau); }
.einwill i { width: 20px; height: 20px; border: 1.5px solid #B9C2C6; border-radius: 4px; background: var(--weiss); flex: none; }

/* Handy */
.leiste { display: none; }
@media (max-width: 1100px) {
  .nav { display: none; }
  .menu { display: flex; align-items: center; margin-left: auto; font-weight: 700; gap: 10px; background: none; border: 0; font: 700 15px var(--sans); color: var(--schiefer); }
  .notruf { display: none; }
  .einstieg__kopf, .wege, .kopfzeile, .orte, .meldungen, .fuss__oben, .seitenkopf__grid, .anruf, .vergleich, .zweispaltig, .schritte { grid-template-columns: 1fr; }
  .jahr { grid-template-columns: 1fr 1fr; }
  .ort--erst { grid-template-columns: 1fr; }
  .schritte li, .schritte li + li { padding: 28px 0; border-left: 0; border-bottom: 1px solid var(--linie); }
  .anruf > div { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .kopf .c { height: 72px; }
  .marke img { height: 38px; }
  .marke span { font-size: 16px; }
  .einstieg { padding-top: 36px; }
  .einstieg__kopf { gap: 18px; margin-bottom: 28px; }
  .weg { padding: 30px 22px; min-height: 0; }
  .weg--vorsorge .innen { padding: 26px 22px 30px; }
  .weg__fuss .btn { flex: 1 1 100%; }
  .wege { transform: none; margin-top: 0; margin-left: calc(-1 * var(--rand)); margin-right: calc(-1 * var(--rand)); }
  .nach-wege { padding-top: 64px; }
  .ort { grid-template-columns: 84px 1fr; }
  .ort img, .ort .platz { width: 84px; height: 64px; }
  .ort .ico { display: none; }
  .ort--erst img { height: 220px; }
  .jahr { grid-template-columns: 1fr 1fr; gap: 12px; }
  .jahr img { height: 220px; }
  .tabelle-wrap { overflow-x: auto; }
  .tabelle { min-width: 760px; }
  .formular { grid-template-columns: 1fr; padding: 24px; }
  .leiste { display: grid; grid-template-columns: 1fr 1fr; position: sticky; bottom: 0; z-index: 30; }
  .leiste a { min-height: 58px; display: grid; place-items: center; font-weight: 700; background: var(--schiefer); color: var(--weiss); }
  .leiste a + a { background: var(--sand); color: var(--schiefer); }
}
@media (max-width: 640px) {
  .weg--vorsorge { padding: 0 !important; }
  .wege { box-shadow: none; }
}