/* heirats-ratgeber.de — Stylesheet
   Layout, Schrift und Farben 1:1 vom bisherigen Design übernommen.
   Gemessen am Original: Kopf 222px transparent, Logo 222px zentriert,
   Navigation linksbündig, Hero 679px, Textspalte 679px zentriert.
   Schriften selbst gehostet (DSGVO). */

@import url("/assets/fonts/fonts.css");

:root {
  --tinte: #3a3a3a;
  --tinte-tief: #1d1e20;
  --tinte-leise: #6f6f6f;
  --papier: #ffffff;
  --papier-warm: #fff7f7;
  --himmel: #b6ecf2;
  --link: #0f52e3;
  --koralle: #e8a08d;
  --koralle-tief: #b8593c;  /* abgedunkeltes Logo-Koralle, 4,6:1 auf Weiß — Hover/aktiv im Menü */
  --linie: #ececec;
  --kopf-schrift: "Rubik", "Helvetica Neue", Arial, sans-serif;
  --text: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --spalte: 679px;
  --rand: 108px;
  --kopf-hoehe: 222px;
  --hero-hoehe: 679px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Kopfbereich: transparent, liegt über dem Hero ---------- */

.kopf {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--kopf-hoehe);
  z-index: 10;
  pointer-events: none;
}

.kopf a { pointer-events: auto; }

.marke {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
}

.marke img { width: var(--kopf-hoehe); height: auto; }

.hauptnav {
  position: absolute;
  top: 95px;
  left: 40px;
  right: 40px;
  pointer-events: auto;
  font-family: var(--text);
  font-size: 15px;
  display: flex;
  align-items: flex-start;
  gap: calc(var(--kopf-hoehe) + 36px);  /* Freiraum für das mittige Logo */
}

/* Zwei gleich breite Hälften links und rechts am Logo vorbei, Inhalt jeweils
   zum Logo hin ausgerichtet. Gleich breit ist wichtig: sonst wandert die
   Lücke aus der Mitte und die längere Hälfte schiebt sich unters Logo. */
.hauptnav ul.haupt {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.9rem;
}
.haupt-links { justify-content: flex-end; }
.haupt-rechts { justify-content: flex-start; }

.hauptnav a {
  color: var(--tinte);
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.hauptnav a:hover { color: var(--koralle-tief); border-bottom-color: var(--koralle); text-decoration: none; }
.hauptnav a[aria-current="page"] { color: var(--koralle-tief); border-bottom-color: var(--koralle-tief); }

/* ---- Dropdowns (nur CSS: hover + Tastaturfokus) ---- */

.haupt > li { position: relative; }

.hat-sub > a::after {
  content: "▾";
  font-size: 11px;
  margin-left: 0.3rem;
  opacity: 0.55;
}

.subnav {
  list-style: none;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: -0.9rem;
  min-width: 230px;
  margin: 0;
  padding: 0.45rem 0;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.09);
  transition: opacity 0.12s ease;
  z-index: 40;
}

.haupt > li:hover > .subnav,
.haupt > li:focus-within > .subnav { visibility: visible; opacity: 1; }

.subnav li { display: block; }
.subnav a {
  display: block;
  padding: 0.38rem 1rem;
  border-bottom: none;
  white-space: nowrap;
}
.subnav a:hover { background: var(--papier-warm); color: var(--koralle-tief); border-bottom-color: transparent; }
.subnav a[aria-current="page"] { color: var(--koralle-tief); border-bottom: none; }

/* Der letzte Punkt links vom Logo klappt nach links auf, sonst legt sich das
   Menü über die Logo-Zeichnung. */
.haupt-links > li:last-child > .subnav { left: auto; right: -0.9rem; }

/* Mittlere Breiten: die Leiste muss beidseitig einzeilig bleiben, also
   rückt sie näher an den Rand und wird eine Spur kleiner. */
@media (min-width: 1141px) and (max-width: 1300px) {
  .hauptnav { font-size: 14px; gap: calc(var(--kopf-hoehe) + 12px); }
  .hauptnav ul.haupt { gap: 0.3rem 1.2rem; }
}

/* Hamburger-Mechanik: Checkbox unsichtbar, Knopf nur mobil sichtbar */
.navschalter { display: none; }
.nav-knopf { display: none; }

/* ---------- Hero ---------- */

.hero { position: relative; height: var(--hero-hoehe); overflow: hidden; background: var(--himmel); }

.hero > img { width: 100%; height: 100%; object-fit: cover; }

/* Aufheller unter Logo und Navigation. Das Originalbild war ein heller
   Himmel; die Motive hier sind dunkler, deshalb ein weicher Verlauf,
   damit die Navigation auf jedem Bild lesbar bleibt. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--kopf-hoehe) + 40px);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.hero-text {
  position: absolute;
  left: var(--rand);
  top: 419px;
  max-width: 560px;
}

/* h1 und Anrisstext als eigene Zeilenblöcke — sonst fließen die
   inline gesetzten Hintergrundkästen ineinander. */
.hero-text > * { display: block; }

.hero-text h1,
.hero-text p { margin: 0; }

/* Der Kasten liegt auf dem Text selbst, nicht auf dem Block —
   so bricht er zeilenweise mit, wie im bisherigen Design. */
.hero-text h1 span,
.hero-text p span {
  background: rgba(255, 247, 247, 0.72);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.12em 0.4em 0.12em 0.3em;
}

.hero-text h1 {
  font-family: var(--kopf-schrift);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--tinte);
}

.hero-text p {
  font-size: 16px;
  line-height: 2;
  color: var(--tinte);
  margin-top: 1.1rem;
  max-width: 46ch;
}

/* ---------- Inhalt ---------- */

main {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 3.5rem 1.25rem 4rem;
}

.pfad { font-size: 13px; color: var(--tinte-leise); margin: 0 0 1.6rem; text-align: center; }
.pfad a { color: var(--tinte-leise); }
.pfad span { margin: 0 0.4rem; opacity: 0.45; }

h1, h2, h3, h4 { font-family: var(--kopf-schrift); font-weight: 400; color: var(--tinte); }

h1 { font-size: 32px; line-height: 1.3; margin: 0 0 1.2rem; }
h2 { font-size: 24px; line-height: 1.3; margin: 2.8rem 0 0.9rem; }
h3 { font-size: 18px; line-height: 1.3; margin: 2rem 0 0.6rem; }

p { margin: 0 0 1.3rem; }

/* Einleitung mittig wie auf der bisherigen Startseite,
   Fließtext linksbündig — bei Artikeln dieser Länge deutlich besser lesbar. */
.anriss { text-align: center; color: var(--tinte-leise); margin-bottom: 2.4rem; }

/* Sichtbares Aktualisierungsdatum — gleiche Quelle wie dateModified im JSON-LD */
.stand { font-size: 13px; color: var(--tinte-leise); text-align: center; margin: -0.6rem 0 2rem; }

article ul, article ol { margin: 0 0 1.4rem; padding-left: 1.3rem; }
article li { margin-bottom: 0.5rem; }
article li::marker { color: var(--koralle); }

blockquote {
  margin: 2rem 0;
  padding: 1rem 1.4rem;
  background: var(--papier-warm);
  border-left: 3px solid var(--koralle);
  color: var(--tinte-leise);
}
blockquote p:last-child { margin-bottom: 0; }

figure { margin: 2.2rem 0; }
figure img { border-radius: 4px; }
figcaption { font-size: 13px; color: var(--tinte-leise); margin-top: 0.6rem; text-align: center; }

/* Frisuren-Galerie: kompaktes Raster, Bildunterschrift statt Fließtext. */
.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem 1rem;
  margin: 2rem 0 2.4rem;
}
.galerie figure { margin: 0; }
.galerie img { width: 100%; height: auto; }
.galerie figcaption {
  margin-top: 0.45rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--tinte);
  text-align: left;
}
@media (max-width: 600px) {
  .galerie { grid-template-columns: repeat(2, 1fr); gap: 0.9rem 0.8rem; }
}

.kasten {
  background: rgba(182, 236, 242, 0.22);
  border-radius: 6px;
  padding: 1.4rem 1.6rem;
  margin: 2.2rem 0;
}
.kasten h3 { margin-top: 0; }
.kasten :last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 1.9rem 0; font-size: 15px; }
th, td { text-align: left; padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--linie); }
thead th { font-family: var(--kopf-schrift); font-weight: 400; background: var(--papier-warm); }
tbody tr:last-child td { border-bottom: none; }
.tabelle-scroll { overflow-x: auto; border: 1px solid var(--linie); border-radius: 6px; }
.tabelle-scroll table { margin: 0; }

/* ---------- Themenraster ---------- */

.themen {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.themen li {
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 1.1rem 1.2rem;
  transition: border-color 0.15s ease;
}
.themen li:hover { border-color: var(--himmel); }
.themen a { font-family: var(--kopf-schrift); color: var(--tinte); }
.themen li:hover a { color: var(--link); }
.themen p { margin: 0.3rem 0 0; font-size: 14px; color: var(--tinte-leise); line-height: 1.6; }

/* ---------- Weiterlesen ---------- */

.weiter { max-width: var(--spalte); margin: 3.5rem auto 0; padding: 1.6rem 1.5rem; background: var(--papier-warm); border-radius: 6px; }
.weiter h2 { font-size: 14px; margin: 0 0 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinte-leise); }
.weiter ul { list-style: none; margin: 0; padding: 0; }
.weiter li { margin-bottom: 0.5rem; }

/* ---------- Fuß ---------- */

.fuss { border-top: 1px solid var(--linie); margin-top: 4rem; padding: 2.2rem 1.25rem 3rem; font-size: 14px; color: var(--tinte-leise); }
.fuss-innen { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.3rem; }
.fuss a { color: var(--tinte-leise); }
.fuss a:hover { color: var(--koralle-tief); }

/* ---------- Schmale Viewports ---------- */

/* Grenze bei 1140px statt 900px: darunter passen die sieben Punkte nicht mehr
   einzeilig neben das Logo, ohne unlesbar klein zu werden. */
@media (max-width: 1140px) {
  :root { --rand: 24px; --kopf-hoehe: 150px; --hero-hoehe: 480px; }

  /* Menü-Knopf oben rechts, Panel per Checkbox — kein JavaScript */
  .nav-knopf {
    display: block;
    position: absolute;
    top: 18px;
    right: var(--rand);
    z-index: 60;
    pointer-events: auto;
    padding: 0.45rem 0.9rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--linie);
    border-radius: 6px;
    font-family: var(--kopf-schrift);
    font-size: 15px;
    cursor: pointer;
  }

  /* Auf dem Handy gibt es keine zwei Hälften: beide Listen stapeln im Panel */
  .hauptnav { position: static; display: block; gap: 0; }

  .hauptnav ul.haupt { display: none; }

  .navschalter:checked ~ .hauptnav {
    position: fixed;
    inset: 0;
    background: #fff;
    overflow-y: auto;
    padding: 4.5rem 1.6rem 2.5rem;
    z-index: 50;
  }

  .navschalter:checked ~ .hauptnav ul.haupt { display: block; }

  .navschalter:checked ~ .nav-knopf::after { content: " schließen"; }

  .haupt > li { margin-bottom: 1.1rem; }
  .haupt > li > a { font-family: var(--kopf-schrift); font-size: 17px; }
  .hat-sub > a::after { content: ""; }

  /* Gruppen im Panel immer ausgeklappt — kein Hover auf Touch */
  .subnav {
    visibility: visible;
    opacity: 1;
    position: static;
    min-width: 0;
    border: none;
    box-shadow: none;
    padding: 0.25rem 0 0 0.9rem;
  }
  .subnav a { padding: 0.28rem 0; white-space: normal; }

  .hero-text { top: auto; bottom: 48px; right: var(--rand); max-width: none; }
  .hero-text h1 { font-size: 26px; }
  main { padding-top: 2.5rem; }
}

/* ---------- Wärme-Akzente (Icons und Zierlinien im Logo-Stil) ---------- */

/* Zarte Korallenlinie unter Zwischenüberschriften */
article > h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-top: 0.4rem;
  border-radius: 2px;
  background: var(--koralle);
  opacity: 0.55;
}

/* Icons auf den Themenkarten */
.themen li { text-align: left; }
.themen .ikon { display: block; margin-bottom: 0.55rem; }

/* Herzchen vor Hinweiskästen */
.kasten h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.kasten h3::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23e8a08d" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19.5C6 14.5 4.5 10.5 6.5 8c1.7-2.1 4.3-1.4 5.5.9 1.2-2.3 3.8-3 5.5-.9 2 2.5.5 6.5-5.5 11.5Z"/></svg>') no-repeat center / contain;
}

/* Zierelement über dem Weiterlesen-Block */
.weiter { position: relative; }
.weiter::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23e8a08d" stroke-width="1.5" stroke-linecap="round"><circle cx="9" cy="13.5" r="5.2"/><circle cx="15" cy="13.5" r="5.2"/></svg>') no-repeat center / contain;
}