/* ==========================================================================
   Tagungshaus Hunsrück e. V. – Stylesheet
   Keine externen Schriften, kein Tracking, keine Cookies.
   ========================================================================== */

:root{
  --gruen:        #548235;   /* Logofarbe */
  --gruen-dunkel: #3d6126;
  --gruen-tief:   #23401a;
  --anthrazit:    #33372f;
  --text:         #262b24;
  --text-leise:   #5f6659;
  --linie:        #e2ded4;
  --papier:       #ffffff;
  --creme:        #faf8f3;
  --sand:         #f0ebe0;
  --akzent:       #a8552b;   /* Ziegelrot der Hunsrücker Dächer */
  --schrift-titel: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-text:  Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --breit:  74rem;
  --schmal: 45rem;
  --rund: 14px;
  --schatten: 0 1px 2px rgba(35,64,26,.06), 0 8px 24px rgba(35,64,26,.07);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--papier); color:var(--text);
  font-family:var(--schrift-text); font-size:1.0625rem; line-height:1.7;
  overflow-wrap:break-word;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--gruen-dunkel); text-decoration-thickness:1px; text-underline-offset:.18em}
a:hover{color:var(--akzent)}
h1,h2,h3,h4,h5{font-family:var(--schrift-titel); color:var(--anthrazit); line-height:1.2; font-weight:650; margin:0 0 .5em}
h1{font-size:clamp(2rem,1.3rem + 2.6vw,3.1rem); letter-spacing:-.02em}
h2{font-size:clamp(1.45rem,1.15rem + 1.1vw,2rem); letter-spacing:-.01em; margin-top:2.4em}
h3{font-size:1.2rem; margin-top:2em}
h4{font-size:1.05rem; margin-top:1.6em}
p{margin:0 0 1.15em}
hr{border:0; border-top:1px solid var(--linie); margin:2.5rem 0}
:focus-visible{outline:3px solid var(--akzent); outline-offset:2px; border-radius:4px}

.huelle{max-width:var(--breit); margin-inline:auto; padding-inline:clamp(1rem,4vw,2.5rem)}
.schmal{max-width:var(--schmal); margin-inline:auto}
.mittig{text-align:center}
.leise{color:var(--text-leise)}
.springmarke{position:absolute; left:-9999px}
.springmarke:focus{position:static; display:inline-block; margin:.5rem; padding:.5rem .9rem; background:var(--gruen); color:#fff; border-radius:8px}

/* ---------- Kopfzeile ---------- */
.kopf{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--linie);
}
.kopf-innen{display:flex; align-items:center; gap:1rem; min-height:4.5rem}
.marke{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:inherit; margin-right:auto}
.marke:hover{color:inherit}
.wortmarke{
  font-family:var(--schrift-titel); font-weight:800; font-size:1.5rem; letter-spacing:.02em;
  color:var(--gruen); line-height:1; white-space:nowrap;
}
.wortmarke span{color:var(--anthrazit)}
.marke-text{display:flex; flex-direction:column; font-family:var(--schrift-titel); line-height:1.2}
.marke-text b{font-weight:640; font-size:1rem; color:var(--anthrazit)}
.marke-text small{font-size:.75rem; color:var(--text-leise); letter-spacing:.04em; text-transform:uppercase}

.navi ul{display:flex; gap:.25rem; list-style:none; margin:0; padding:0}
.navi a{
  display:block; padding:.5rem .8rem; border-radius:9px; text-decoration:none;
  font-family:var(--schrift-titel); font-size:.95rem; font-weight:520; color:var(--anthrazit);
}
.navi a:hover{background:var(--sand); color:var(--gruen-dunkel)}
.navi a[aria-current="page"]{background:var(--gruen); color:#fff}
.navi-knopf{display:none; background:none; border:1px solid var(--linie); border-radius:9px; padding:.5rem .7rem; font:inherit; font-family:var(--schrift-titel); cursor:pointer}

@media (max-width:820px){
  .navi-knopf{display:block}
  .navi{position:absolute; inset:100% 0 auto 0; background:#fff; border-bottom:1px solid var(--linie); display:none; box-shadow:var(--schatten)}
  .navi.offen{display:block}
  .navi ul{flex-direction:column; gap:0; padding:.5rem clamp(1rem,4vw,2.5rem) 1rem}
  .navi a{padding:.75rem .4rem; border-radius:0; border-bottom:1px solid var(--linie)}
}

/* ---------- Hero ---------- */
.hero{position:relative; background:var(--gruen-tief); color:#fff; overflow:hidden}
.hero img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 58%; opacity:.62;
}
.hero-innen{position:relative; padding:clamp(3.5rem,9vw,7.5rem) 0 clamp(3rem,7vw,5.5rem); max-width:44rem}
.hero h1{color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero p{font-size:clamp(1.05rem,1rem + .4vw,1.3rem); color:#f2f5ee; text-shadow:0 1px 14px rgba(0,0,0,.5); margin-bottom:0}
.hero .augenbraue{
  font-family:var(--schrift-titel); text-transform:uppercase; letter-spacing:.16em;
  font-size:.78rem; color:#dbe7cd; margin-bottom:1rem; text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(23,40,14,.82) 0%, rgba(23,40,14,.5) 55%, rgba(23,40,14,.25) 100%)}
.hero-innen{z-index:2}

/* Kleiner Seitenkopf für Unterseiten */
.seitenkopf{background:var(--creme); border-bottom:1px solid var(--linie); padding:clamp(2.2rem,5vw,3.6rem) 0}
.seitenkopf .augenbraue{font-family:var(--schrift-titel); text-transform:uppercase; letter-spacing:.16em; font-size:.75rem; color:var(--gruen-dunkel); margin-bottom:.7rem}
.seitenkopf h1{margin-bottom:.3em}
.seitenkopf p{max-width:44rem; color:var(--text-leise); margin-bottom:0}

/* ---------- Abschnitte ---------- */
.abschnitt{padding:clamp(2.5rem,6vw,4.5rem) 0}
.abschnitt.creme{background:var(--creme); border-block:1px solid var(--linie)}
.abschnitt > .huelle > h2:first-child{margin-top:0}
.abschnitt .schmal{margin-inline:0}
.abschnitt .schmal.mittig{margin-inline:auto}

/* ---------- Zahlenkacheln ---------- */
.zahlen{display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:1rem; list-style:none; padding:0; margin:0}
.zahlen li{background:var(--papier); border:1px solid var(--linie); border-radius:var(--rund); padding:1.4rem 1.2rem}
.zahlen b{display:block; font-family:var(--schrift-titel); font-size:2rem; font-weight:700; color:var(--gruen); line-height:1}
.zahlen span{display:block; margin-top:.4rem; font-size:.95rem; color:var(--text-leise)}

/* ---------- Karten ---------- */
.karten{display:grid; grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); gap:1.5rem; list-style:none; padding:0; margin:0}
.karte{
  background:var(--papier); border:1px solid var(--linie); border-radius:var(--rund);
  overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s;
}
.karte:hover{box-shadow:var(--schatten); transform:translateY(-2px)}
.karte-bild{aspect-ratio:3/2; overflow:hidden; background:var(--sand)}
.karte-bild img{width:100%; height:100%; object-fit:cover}
.karte-text{padding:1.1rem 1.2rem 1.4rem; display:flex; flex-direction:column; flex:1}
.karte h3{margin:.15rem 0 .45rem; font-size:1.1rem}
.karte h3 a{text-decoration:none; color:var(--anthrazit)}
.karte:hover h3 a{color:var(--gruen-dunkel)}
.karte p{font-size:.97rem; color:var(--text-leise); margin-bottom:1rem}
.karte .weiter{margin-top:auto; font-family:var(--schrift-titel); font-size:.9rem; font-weight:600; color:var(--gruen-dunkel); text-decoration:none}
.karte:hover .weiter{text-decoration:underline}

.marke-datum{font-family:var(--schrift-titel); font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-leise)}
.rubrik{
  display:inline-block; font-family:var(--schrift-titel); font-size:.72rem; font-weight:650;
  text-transform:uppercase; letter-spacing:.09em; color:var(--gruen-dunkel);
  background:var(--sand); border-radius:99px; padding:.22rem .6rem;
}

/* ---------- Knöpfe ---------- */
.knopf{
  display:inline-block; font-family:var(--schrift-titel); font-weight:600; font-size:.98rem;
  padding:.72rem 1.4rem; border-radius:10px; text-decoration:none;
  background:var(--gruen); color:#fff; border:1px solid var(--gruen);
}
.knopf:hover{background:var(--gruen-dunkel); border-color:var(--gruen-dunkel); color:#fff}
.knopf.hell{background:transparent; color:var(--gruen-dunkel); border-color:#c9d5bb}
.knopf.hell:hover{background:var(--sand); color:var(--gruen-dunkel)}
.knopfreihe{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem}

/* ---------- Artikel ---------- */
.artikel{max-width:var(--schmal); margin-inline:auto; padding:clamp(2rem,5vw,3.5rem) 0}
.artikel > figure, .artikel > .bildwand, .artikel > .breit{max-width:none}
@media (min-width:60rem){
  .artikel > figure.gross, .artikel > .bildwand{width:min(64rem,90vw); margin-left:calc(50% - min(32rem,45vw))}
}
figure{margin:2rem 0}
figure img{width:100%; border-radius:8px; background:var(--sand)}
figcaption{
  font-family:var(--schrift-titel); font-size:.88rem; line-height:1.55; color:var(--text-leise);
  margin-top:.6rem; padding-left:.9rem; border-left:3px solid var(--sand);
}
.artikel figure.rechts, .artikel figure.links{max-width:20rem}
@media (min-width:48rem){
  .artikel figure.rechts{float:right; margin:.4rem 0 1.2rem 1.8rem}
  .artikel figure.links{float:left;  margin:.4rem 1.8rem 1.2rem 0}
}
.artikel::after{content:""; display:block; clear:both}
.artikel figure.hochkant{max-width:17rem; margin-inline:auto}

.bildwand{columns:2 15rem; column-gap:1rem; margin:2rem 0}
.bildwand figure{break-inside:avoid; margin:0 0 1rem}
.bildwand.drei{columns:3 12rem}

.artikel-kopf{border-bottom:1px solid var(--linie); padding-bottom:1.5rem; margin-bottom:.5rem}
.artikel-kopf .meta{display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin-bottom:.9rem}
.artikel-kopf h1{margin-bottom:0}

blockquote{
  margin:2rem 0; max-width:52rem; padding:1.2rem 1.4rem; background:var(--creme);
  border-left:4px solid var(--gruen); border-radius:0 var(--rund) var(--rund) 0;
}
blockquote p:last-child{margin-bottom:0}
blockquote cite{display:block; margin-top:.8rem; font-family:var(--schrift-titel); font-size:.85rem; font-style:normal; color:var(--text-leise)}

.dokument{
  margin:2rem 0; max-width:52rem; padding:1.3rem 1.5rem; background:var(--creme);
  border:1px solid var(--linie); border-radius:var(--rund);
}
.dokument > h3:first-child, .dokument > h4:first-child{margin-top:0}
.dokument .quelle{font-family:var(--schrift-titel); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-leise); margin-bottom:.8rem}

.hinweis{
  margin:2rem 0; max-width:52rem; padding:1rem 1.2rem; border-radius:var(--rund);
  background:#fdf7ee; border:1px solid #ecdcc4; font-size:.97rem;
}
.hinweis p:last-child{margin-bottom:0}
.hinweis b{font-family:var(--schrift-titel)}

/* ---------- Video (Zwei-Klick) ---------- */
.videobox{margin:2rem 0; border:1px solid var(--linie); border-radius:var(--rund); overflow:hidden; background:var(--creme)}
.videobox .platzhalter{padding:2rem 1.5rem; text-align:center}
.videobox .platzhalter p{font-size:.95rem; color:var(--text-leise)}
.videobox iframe{display:block; width:100%; aspect-ratio:16/9; height:auto; border:0}

/* ---------- Stimmen ---------- */
.stimmen{display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:1.2rem; list-style:none; margin:1.5rem 0 0; padding:0}
.stimme{background:var(--papier); border:1px solid var(--linie); border-radius:var(--rund); padding:1.3rem}
.stimme p{font-size:.98rem}
.stimme p:last-of-type{margin-bottom:0}
.sterne{color:var(--akzent); letter-spacing:.12em; font-size:.95rem; margin-bottom:.6rem}
.sterne .leer{color:#d6cfc0}
.stimme .wer{font-family:var(--schrift-titel); font-size:.85rem; color:var(--text-leise); margin-top:.8rem}

/* ---------- Definitionslisten / Ausstattung ---------- */
.merkmale{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.5rem 2rem; margin:1.5rem 0 0}
.merkmale h3{margin-top:0; font-size:1rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gruen-dunkel)}
.merkmale ul{margin:0; padding-left:1.1rem}
.merkmale li{margin-bottom:.35rem}

/* ---------- Zeitleiste ---------- */
.zeitleiste{list-style:none; margin:2rem 0 0; padding:0; border-left:2px solid var(--sand)}
.zeitleiste li{position:relative; padding:0 0 2rem 1.6rem}
.zeitleiste li::before{content:""; position:absolute; left:-7px; top:.55rem; width:12px; height:12px; border-radius:50%; background:var(--gruen); border:2px solid #fff}
.zeitleiste b{display:block; font-family:var(--schrift-titel); color:var(--gruen-dunkel); font-size:.9rem; letter-spacing:.06em}

/* ---------- Fußzeile ---------- */
.fuss{background:var(--gruen-tief); color:#dfe6d6; margin-top:0; padding:clamp(2.5rem,6vw,4rem) 0 2rem; font-size:.95rem}
.fuss a{color:#fff}
.fuss h2{color:#fff; font-size:1.05rem; margin:0 0 .8rem; text-transform:uppercase; letter-spacing:.08em}
.fuss-raster{display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:2rem}
.fuss ul{list-style:none; margin:0; padding:0}
.fuss li{margin-bottom:.4rem}
.fuss .wortmarke{color:#a8c98a}
.fuss .wortmarke span{color:#fff}
.fuss-unten{margin-top:2.5rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.18); display:flex; flex-wrap:wrap; gap:1rem 1.5rem; justify-content:space-between; font-size:.87rem; color:#b9c9a9}
.fuss-unten a{color:#dfe6d6}

/* ---------- Sonstiges ---------- */
.seitennav{clear:both; display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--linie); font-family:var(--schrift-titel); font-size:.93rem}
.brotkrumen{font-family:var(--schrift-titel); font-size:.85rem; color:var(--text-leise); margin-bottom:1rem}
.brotkrumen a{color:var(--text-leise)}
table{border-collapse:collapse; width:100%; margin:1.5rem 0; font-size:.97rem}
th,td{text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--linie)}
th{font-family:var(--schrift-titel); font-size:.88rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-leise)}
.tabellenrahmen{overflow-x:auto}
@media (max-width:38rem){
  table, tbody, tr{display:block}
  th[scope="row"]{display:block; border-bottom:0; padding:.9rem .2rem 0}
  td{display:block; padding:.15rem .2rem .9rem; border-bottom:1px solid var(--linie)}
}

@media print{ .kopf,.fuss,.seitennav{display:none} body{font-size:11pt} }