/* ==========================================================================
   Ortsgemeinde Hönningen an der Ahr — gemeinde-hoenningen.de
   Eigenes Layout, Schiefer- und Ahrtal-Farbwelt
   ========================================================================== */

:root {
  --schiefer:      #27343d;
  --schiefer-dark: #1b252c;
  --ahr:           #3a6b7c;
  --ahr-hell:      #6c9aa8;
  --burgunder:     #7d2b33;
  --ocker:         #b0862f;
  --papier:        #eef1ed;
  --papier-hell:   #f8faf7;
  --linie:         #d5dcd6;
  --text:          #232c31;
  --text-leise:    #55646b;

  --breite:        1140px;
  --radius:        3px;
  --schatten:      0 1px 2px rgba(27, 37, 44, .06), 0 8px 24px rgba(27, 37, 44, .07);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: "Asap", "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--ahr); text-decoration: none; }
a:hover, a:focus { color: var(--burgunder); text-decoration: underline; }
a:focus-visible { outline: 3px solid var(--ocker); outline-offset: 2px; }

h1, h2, h3 {
  font-family: "Zilla Slab", Georgia, serif;
  line-height: 1.18;
  color: var(--schiefer);
  font-weight: 600;
  margin: 0 0 .6em;
}

h1 { font-size: 2.5rem; letter-spacing: -.01em; }
h2 { font-size: 1.62rem; margin-top: 2.4em; }
h3 { font-size: 1.16rem; }

p { margin: 0 0 1.25em; }

.wrap { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 24px; }

/* ---------- Kopfbereich ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--schiefer);
  border-bottom: 3px solid var(--ocker);
}

.kopf-innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.marke { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.marke:hover { text-decoration: none; }

.wappen {
  width: 44px;
  height: 52px;
  flex: 0 0 auto;
  background: linear-gradient(160deg, var(--ahr) 0%, var(--schiefer-dark) 100%);
  border: 2px solid var(--ocker);
  border-radius: 3px 3px 22px 22px;
  position: relative;
  overflow: hidden;
}
.wappen::after {
  content: "";
  position: absolute;
  left: -6px; right: -6px; top: 55%;
  height: 8px;
  background: var(--papier-hell);
  opacity: .82;
  transform: rotate(-9deg);
  border-radius: 40%;
}

.marke-text strong {
  display: block;
  font-family: "Zilla Slab", Georgia, serif;
  font-size: 1.24rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .01em;
  line-height: 1.15;
}
.marke-text span {
  display: block;
  font-size: .74rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--ahr-hell);
}

.navi { display: flex; flex-wrap: wrap; gap: 4px; }
.navi a {
  display: block;
  padding: 8px 13px;
  color: #dbe4e2;
  font-size: .92rem;
  font-weight: 500;
  border-radius: var(--radius);
  border-bottom: 2px solid transparent;
}
.navi a:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.navi a.aktiv { color: #fff; border-bottom-color: var(--ocker); }

/* ---------- Titelbereich ---------- */

.buehne {
  background:
    radial-gradient(120% 130% at 12% 0%, #46707f 0%, rgba(70,112,127,0) 60%),
    linear-gradient(165deg, var(--schiefer) 0%, var(--schiefer-dark) 70%);
  color: #e9efec;
  padding: 62px 0 0;
  position: relative;
}

.buehne .wrap { position: relative; z-index: 2; }

.buehne .augenbraue {
  font-size: .76rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ocker);
  margin-bottom: 14px;
}

.buehne h1 { color: #fff; max-width: 20ch; font-size: 3rem; }
.buehne .lead {
  max-width: 60ch;
  font-size: 1.13rem;
  color: #c8d5d3;
  margin-bottom: 0;
}

.flusslinie { display: block; width: 100%; height: 70px; margin-top: 40px; }
.flusslinie path.wasser { fill: var(--papier); }
.flusslinie path.kante { fill: none; stroke: var(--ahr-hell); stroke-width: 2; opacity: .55; }

/* ---------- Inhaltsblöcke ---------- */

.block { padding: 54px 0; }
.block-hell { background: var(--papier-hell); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }

.block-titel {
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--burgunder);
  font-weight: 600;
  margin-bottom: 8px;
}

.spalte { max-width: 74ch; }

.aufmacher {
  font-size: 1.16rem;
  color: var(--text-leise);
}

/* Meldungen */

.meldungen { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); }

.meldung {
  background: #fff;
  border: 1px solid var(--linie);
  border-top: 4px solid var(--ahr);
  border-radius: var(--radius);
  padding: 22px 22px 8px;
  box-shadow: var(--schatten);
}
.meldung .datum {
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: 6px;
}
.meldung h3 { margin-bottom: .45em; }
.meldung p { font-size: .96rem; }

/* Themenkacheln */

.themen { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); margin-top: 26px; }

.thema {
  display: block;
  background: #fff;
  border: 1px solid var(--linie);
  border-left: 5px solid var(--burgunder);
  border-radius: var(--radius);
  padding: 22px 24px;
  color: var(--text);
  transition: transform .18s ease, box-shadow .18s ease;
}
.thema:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--schatten); color: var(--text); }
.thema h3 { color: var(--ahr); margin-bottom: .35em; }
.thema:hover h3 { color: var(--burgunder); }
.thema p { margin: 0; font-size: .95rem; color: var(--text-leise); }

/* Fakten-Tabelle */

table.tabelle {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0 2em;
  background: #fff;
  border: 1px solid var(--linie);
  font-size: .96rem;
}
table.tabelle caption {
  text-align: left;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-leise);
  padding-bottom: 10px;
}
table.tabelle th, table.tabelle td { padding: 11px 15px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
table.tabelle thead th { background: var(--schiefer); color: #fff; font-family: "Zilla Slab", Georgia, serif; font-weight: 600; }
table.tabelle tbody th { width: 34%; font-weight: 600; color: var(--schiefer); font-family: "Asap", sans-serif; }
table.tabelle tbody tr:nth-child(even) { background: #f4f7f4; }
.tabelle-rahmen { overflow-x: auto; }

/* ---------- Partnerbereich ---------- */

.partner { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); margin-top: 28px; }

.partner-karte {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.partner-karte:hover { transform: translateY(-4px); box-shadow: var(--schatten); }

.partner-bild { height: 108px; position: relative; }
.partner-bild svg { width: 100%; height: 100%; display: block; }

.partner-inhalt { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.partner-inhalt h3 { margin: 0; font-size: 1.08rem; }
.partner-inhalt h3 a { color: var(--schiefer); }
.partner-inhalt h3 a:hover { color: var(--burgunder); }
.partner-inhalt p { margin: 0; font-size: .93rem; color: var(--text-leise); flex: 1; }
.partner-url {
  font-size: .8rem;
  color: var(--ahr);
  word-break: break-all;
  border-top: 1px solid var(--linie);
  padding-top: 10px;
}

/* ---------- Artikel ---------- */

.artikel { max-width: 76ch; }
.artikel h1 { font-size: 2.35rem; }
.artikel h2 { font-size: 1.5rem; padding-left: 16px; border-left: 4px solid var(--ocker); }
.artikel p:first-of-type { font-size: 1.1rem; color: var(--text); }

.hinweis {
  background: #fff;
  border: 1px solid var(--linie);
  border-left: 5px solid var(--ahr);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 2em 0;
  font-size: .97rem;
}
.hinweis p:last-child { margin-bottom: 0; }

.weiterlesen {
  margin-top: 46px;
  padding-top: 24px;
  border-top: 2px solid var(--linie);
}
.weiterlesen p { margin-bottom: .6em; font-size: .97rem; }

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

.fuss {
  background: var(--schiefer-dark);
  color: #b9c6c4;
  padding: 46px 0 26px;
  font-size: .93rem;
  margin-top: 0;
}
.fuss-gitter { display: grid; gap: 30px; grid-template-columns: 1.4fr 1fr 1fr; }
.fuss h3 { color: #fff; font-size: 1.02rem; margin-bottom: .6em; }
.fuss a { color: #9fc3cd; }
.fuss a:hover { color: #fff; }
.fuss p { margin-bottom: .8em; }
.fuss-liste a { display: block; padding: 3px 0; }
.fuss-unten {
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .84rem;
  color: #7f9195;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .meldungen { grid-template-columns: repeat(2, 1fr); }
  .partner { grid-template-columns: repeat(2, 1fr); }
  .fuss-gitter { grid-template-columns: 1fr 1fr; }
  .buehne h1 { font-size: 2.4rem; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  h1 { font-size: 2rem; }
  .buehne { padding-top: 42px; }
  .buehne h1 { font-size: 2rem; }
  .kopf-innen { flex-direction: column; align-items: flex-start; }
  .navi { width: 100%; }
  .navi a { padding: 7px 10px; font-size: .88rem; }
  .meldungen, .partner, .themen, .fuss-gitter { grid-template-columns: 1fr; }
  .artikel h2 { font-size: 1.32rem; }
  .flusslinie { height: 44px; margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

.partner-url a { color: var(--ahr); word-break: break-all; }
.partner-url a:hover { color: var(--burgunder); }