/* ============================================================
   Sonja Neef M. A., Fritzlar — Entwurf
   Konzept „Ein Verfahren, viele Anlässe."
   Welt: helles Blaugrau + klares Blau. Headline-Block über
   vollem Bildband. Modul-Kit: Register-/Faktenleisten und
   Spalten-Meta unter Überschriften.
   Fonts: Hedvig Letters Serif (Display), Hedvig Letters Sans
   (Fließtext) — lokal, siehe assets/fonts/fonts.css.
   ============================================================ */

:root {
  --mist: #e7edf3;        /* helles Blaugrau, Seitengrund */
  --paper: #f7fafc;       /* Kartengrund */
  --ink: #14293c;         /* Blautinte */
  --ink-soft: #49606f;    /* Sekundärtext */
  --blue: #1c5cd6;        /* klares Blau */
  --blue-deep: #0f3d99;   /* Blau dunkel (Hover, Reiterkante) */
  --navy: #0e2236;        /* dunkle Sektionen */
  --navy-soft: #b9cbdd;   /* Text auf navy, gedimmt */
  --sky: #8fb6f5;         /* Akzent auf navy */
  --line: rgba(20, 41, 60, .16);
  --line-strong: rgba(20, 41, 60, .34);
  --serif: "Hedvig Letters Serif", Georgia, serif;
  --sans: "Hedvig Letters Sans", system-ui, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--mist);
  color: var(--ink);
  font: 400 1.0625rem/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--blue); }
.wrap { max-width: 1220px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }

/* ---------- Kopfzeile ---------- */
.site-head {
  background: var(--mist);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.head-in {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; padding: 1rem 0 0;
}
.brand { text-decoration: none; color: var(--ink); padding-bottom: .9rem; }
.brand .name {
  font-family: var(--serif); font-size: 1.3rem; line-height: 1.15; display: block;
}
.brand .sub {
  display: block; font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: .15rem;
}
nav.main { display: flex; flex-wrap: wrap; }
nav.main a {
  display: block; text-decoration: none; color: var(--ink-soft);
  font-size: .86rem; padding: .55rem .85rem calc(.9rem - 2px);
  border-bottom: 2px solid transparent;
}
nav.main a:hover { color: var(--blue); }
nav.main a[aria-current="page"] {
  color: var(--blue); border-bottom-color: var(--blue);
  background: var(--paper);
  box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line);
}

/* ---------- Reiter (Register-Label) ---------- */
.tab {
  display: inline-block;
  font-size: .68rem; font-weight: 400; letter-spacing: .2em;
  text-transform: uppercase; color: var(--blue);
  background: var(--paper);
  border: 1px solid var(--line); border-bottom: 2px solid var(--blue);
  padding: .4rem .8rem .35rem;
}
.on-dark .tab {
  color: var(--sky); background: transparent;
  border-color: rgba(185, 203, 221, .3); border-bottom-color: var(--sky);
}

/* ---------- Hero: Headline-Block oben, Bildband darunter ---------- */
.hero-head { padding: clamp(3.5rem, 9vh, 6.5rem) 0 clamp(2.5rem, 6vh, 4.5rem); }
.hero-head h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.9rem, 7.2vw, 5.9rem);
  line-height: 1.04; letter-spacing: -.015em;
  max-width: 14ch; margin: 1.6rem 0 1.5rem;
}
.hero-head .lead {
  font-size: clamp(1.08rem, 1.7vw, 1.3rem); line-height: 1.65;
  color: var(--ink-soft); max-width: 46ch;
}
.hero-head .actions {
  margin-top: 2.4rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
}

.hero-band { line-height: 0; }
.hero-band img {
  width: 100%; height: clamp(20rem, 52vw, 36rem); object-fit: cover;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; text-decoration: none;
  background: var(--blue); color: #fff;
  font-size: .95rem; padding: .95rem 1.9rem calc(.95rem - 2px);
  border-bottom: 2px solid var(--blue-deep);
}
.btn:hover { background: var(--blue-deep); }
.btn-line {
  display: inline-block; text-decoration: none; color: var(--ink);
  font-size: .95rem; padding: .95rem 1.4rem calc(.95rem - 2px);
  border: 1px solid var(--line-strong); border-bottom: 2px solid var(--blue);
  background: transparent;
}
.btn-line:hover { color: var(--blue); border-color: var(--blue); }
.on-dark .btn-line { color: #eaf1f8; border-color: rgba(185, 203, 221, .4); border-bottom-color: var(--sky); }
.on-dark .btn-line:hover { color: var(--sky); border-color: var(--sky); }

/* Textlink mit Pfeil */
.arrow { text-decoration: none; font-size: .95rem; border-bottom: 1px solid var(--blue); padding-bottom: 2px; }
.arrow:hover { color: var(--blue-deep); border-bottom-color: var(--blue-deep); }
.arrow::after { content: " →"; }

/* ---------- Register-/Faktenleiste ---------- */
.rail { border-bottom: 1px solid var(--line); background: var(--paper); }
.rail .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.rail .cell {
  padding: 1.8rem 1.6rem 2rem; border-left: 1px solid var(--line);
}
.rail .cell:first-child { border-left: 0; padding-left: 0; }
.rail .cell .k {
  display: block; font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--blue);
  border-bottom: 2px solid var(--blue);
  padding-bottom: .4rem; margin-bottom: .9rem; width: max-content; max-width: 100%;
}
.rail .cell .v {
  font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; display: block;
}
.rail .cell .n { display: block; font-size: .88rem; color: var(--ink-soft); margin-top: .35rem; }

/* ---------- Spalten-Meta unter Überschriften ---------- */
.meta {
  display: flex; flex-wrap: wrap; row-gap: .9rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-top: 2.2rem;
}
.meta .m { padding: 1rem 1.6rem 1.1rem; border-left: 1px solid var(--line); }
.meta .m:first-child { border-left: 0; padding-left: 0; }
.meta .m dt {
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue); margin-bottom: .25rem;
}
.meta .m dd { font-family: var(--serif); font-size: 1.06rem; color: var(--ink); line-height: 1.35; }
.on-dark .meta { border-color: rgba(185, 203, 221, .25); }
.on-dark .meta .m { border-color: rgba(185, 203, 221, .25); }
.on-dark .meta .m dt { color: var(--sky); }
.on-dark .meta .m dd { color: #eaf1f8; }

/* ---------- Sektionen ---------- */
section.block { padding: clamp(4rem, 8.5vw, 7.5rem) 0; }
section.block + section.block { border-top: 1px solid var(--line); }
section.paper { background: var(--paper); }
section.navy { background: var(--navy); color: #eaf1f8; }

h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.3rem);
  line-height: 1.1; letter-spacing: -.01em;
  max-width: 24ch; margin: 1.3rem 0 1.6rem;
}
h3 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.25; margin-bottom: .6rem; }
.prose { max-width: 62ch; color: var(--ink-soft); }
.prose p { margin-bottom: 1.15rem; }
.prose strong { color: var(--ink); }
.on-dark .prose { color: var(--navy-soft); }
.on-dark .prose strong { color: #eaf1f8; }
.more { display: inline-block; margin-top: 1.8rem; }

/* Kopf einer Sektion: Reiter + H2 (+ Meta) */
.sec-head { margin-bottom: clamp(2rem, 4vw, 3.2rem); }

/* ---------- Seitenkopf Unterseiten ---------- */
.page-head { padding: clamp(3rem, 8vh, 5.5rem) 0 clamp(2.2rem, 5vh, 3.5rem); }
.page-head h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  line-height: 1.06; letter-spacing: -.012em;
  max-width: 20ch; margin: 1.5rem 0 1.2rem;
}
.page-head .lead { font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: var(--ink-soft); max-width: 52ch; line-height: 1.65; }
.page-head.navy { background: var(--navy); color: #eaf1f8; }
.page-head.navy .lead { color: var(--navy-soft); }

/* Bildband auf Unterseiten (direkt unter dem Kopf) */
.band { line-height: 0; border-bottom: 1px solid var(--line); }
.band img { width: 100%; height: clamp(15rem, 38vw, 26rem); object-fit: cover; }

/* ---------- Split: Text + Bild ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split figure { line-height: 0; border: 1px solid var(--line); }
.split figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.split figcaption {
  font-size: .78rem; color: var(--ink-soft); line-height: 1.5;
  padding: .7rem 1rem; background: var(--paper); border-top: 1px solid var(--line);
}

/* ---------- Register-Karten ---------- */
.regs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.regs.two { grid-template-columns: repeat(2, 1fr); }
.reg {
  background: var(--paper); border: 1px solid var(--line); border-top: 0;
  padding: 0 1.6rem 1.8rem;
}
.reg .tab { margin: 0 0 1.2rem; transform: translateY(-50%); margin-bottom: -.4rem; }
.reg h3 { margin-top: .2rem; }
.reg p { color: var(--ink-soft); font-size: .98rem; }
.reg ul { color: var(--ink-soft); font-size: .98rem; margin: .2rem 0 0 1.1rem; }
.reg li { margin-bottom: .3rem; }

/* ---------- Zeilenliste (Anlässe, Ablauf) ---------- */
.rows { list-style: none; border-top: 1px solid var(--line); }
.rows li {
  display: grid; grid-template-columns: 5rem minmax(11rem, 16rem) 1fr;
  gap: 1.8rem; padding: 1.7rem 0; border-bottom: 1px solid var(--line);
}
.rows .no {
  font-family: var(--serif); font-size: 1.5rem; color: var(--blue);
  border-bottom: 2px solid var(--blue); width: max-content; height: max-content; padding: 0 .35rem .15rem 0;
}
.rows .t { font-family: var(--serif); font-size: 1.4rem; line-height: 1.25; }
.rows .d { color: var(--ink-soft); max-width: 56ch; }
.rows .d p { margin-bottom: .8rem; }
.rows .d p:last-child { margin-bottom: 0; }

/* ---------- Zitatfreie Leitzeile ---------- */
.leit {
  font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  line-height: 1.22; letter-spacing: -.01em; max-width: 30ch;
}

/* ---------- Kontakt ---------- */
.contact-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); }
.phone-big {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08;
  color: #eaf1f8; text-decoration: none; display: inline-block;
  border-bottom: 2px solid var(--sky); margin: .6rem 0 1.6rem;
}
.phone-big:hover { color: var(--sky); }
address { font-style: normal; }
.addr { line-height: 1.9; color: var(--navy-soft); }
.addr strong { color: #eaf1f8; font-weight: 400; }
.addr a { color: #eaf1f8; border-bottom: 1px solid rgba(185, 203, 221, .4); text-decoration: none; }
.addr a:hover { color: var(--sky); border-bottom-color: var(--sky); }
.hours { margin-top: 1.8rem; }
.hours dt {
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sky); margin-top: 1rem;
}
.hours dd { color: var(--navy-soft); font-size: .95rem; }

/* Krisenblock */
.crisis {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid rgba(185, 203, 221, .3);
  background: rgba(143, 182, 245, .07);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
}
.crisis h3 { color: #eaf1f8; font-size: 1.6rem; margin-bottom: 1.1rem; }
.crisis .nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin: 1.4rem 0 1.3rem; }
.crisis .num .who { font-size: .8rem; color: var(--navy-soft); display: block; margin-top: .3rem; line-height: 1.45; }
.crisis .num a {
  font-family: var(--serif); font-size: 1.45rem; color: #eaf1f8;
  text-decoration: none; border-bottom: 1px solid var(--sky);
}
.crisis .num a:hover { color: var(--sky); }
.crisis p { color: var(--navy-soft); font-size: .92rem; max-width: 68ch; }
.crisis p + p { margin-top: .7rem; }
.crisis strong { color: #eaf1f8; font-weight: 400; }

/* ---------- Rechtsseiten ---------- */
.legal-group { margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.legal-rows { border-top: 1px solid var(--line); }
.legal-rows .lr {
  display: grid; grid-template-columns: minmax(10rem, 15rem) 1fr;
  gap: 1.8rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line);
}
.legal-rows .lk {
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue); padding-top: .25rem;
}
.legal-rows .lv { color: var(--ink-soft); max-width: 62ch; }
.legal-rows .lv strong { color: var(--ink); font-weight: 400; }
.legal-rows .lv p { margin-bottom: .7rem; }
.legal-rows .lv p:last-child { margin-bottom: 0; }

/* ---------- Fußzeile ---------- */
footer.site {
  background: var(--navy); color: var(--navy-soft);
  border-top: 1px solid rgba(185, 203, 221, .18);
  padding: 3rem 0 2.4rem;
}
.foot-grid { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: flex-start; }
.foot-brand { font-family: var(--serif); font-size: 1.5rem; color: #eaf1f8; line-height: 1.2; }
.foot-brand small { display: block; font-family: var(--sans); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--navy-soft); margin-top: .35rem; }
.foot-nav { display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: .86rem; }
.foot-nav a { color: var(--navy-soft); text-decoration: none; border-bottom: 1px solid rgba(185, 203, 221, .3); padding-bottom: 1px; }
.foot-nav a:hover { color: #eaf1f8; }
.footnote {
  margin-top: 2.2rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(185, 203, 221, .14);
  font-size: .8rem; color: rgba(185, 203, 221, .68); max-width: 80ch;
}
sup.star { color: var(--blue); font-size: .75em; }
.on-dark sup.star, section.navy sup.star { color: var(--sky); }

/* ---------- Reveal (nur mit JS) ---------- */
html.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; }
html.js .reveal.in { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .regs { grid-template-columns: repeat(2, 1fr); }
  .rail .wrap { grid-template-columns: repeat(2, 1fr); }
  .rail .cell:nth-child(3) { border-left: 0; padding-left: 0; }
  .rail .cell { padding-top: 1.4rem; padding-bottom: 1.5rem; }
  .crisis .nums { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .head-in { flex-direction: column; align-items: flex-start; gap: .2rem; padding-top: .8rem; }
  .brand { padding-bottom: .2rem; }
  nav.main { margin: 0 -.85rem; }
  nav.main a { padding: .5rem .85rem calc(.6rem - 2px); font-size: .84rem; }
  .hero-head h1 { font-size: clamp(2.5rem, 11vw, 3.4rem); }
  .hero-band img { height: clamp(13rem, 60vw, 20rem); }
  .rows li { grid-template-columns: 1fr; gap: .5rem; }
  .split { grid-template-columns: 1fr; }
  .regs, .regs.two { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .legal-rows .lr { grid-template-columns: 1fr; gap: .35rem; }
  .meta .m { padding: .8rem 1.1rem .9rem; }
  .rail .wrap { grid-template-columns: 1fr; }
  .rail .cell { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .rail .cell:first-child { border-top: 0; }
  .crisis .nums { grid-template-columns: 1fr; }
}