/* Hovawartzwinger von Arminius – Facelift 2026. Farben aus der alten Seite übernommen.
   Alternative Farbschemata (nicht aktiv): site-wiese.css */
:root {
  --braun: #64390b;      /* Seitenhintergrund wie bisher */
  --gold: #ffb600;       /* Leisten oben/unten wie bisher */
  --ocker: #bf9630;      /* Menüspalte wie bisher */
  --ocker-hell: #e8d4a0;
  --creme: #fdf7e8;      /* Inhaltsfläche, heller als früher (#a67600) für lesbare Texte */
  --text: #2f1c06;
  --text-leise: #6b5332;
  --akzent: #8a3b00;     /* Links/Überschriften, abgeleitet vom alten Dunkelrot #660000 */
  --aktiv: #660000;
  --radius: 10px;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--braun); color: var(--text); font: 17px/1.6 var(--schrift); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--akzent); text-underline-offset: .15em; }
a:hover { color: var(--aktiv); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.sprung { position: absolute; left: -999px; }
.sprung:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; z-index: 10; }

.rahmen { max-width: 1040px; margin: 0 auto; background: var(--creme); box-shadow: 0 0 40px rgba(0,0,0,.35); }
@media (min-width: 1080px) { .rahmen { margin: 24px auto; border-radius: var(--radius); overflow: hidden; } }

.kopf-bild { display: block; aspect-ratio: 775 / 130; min-height: 90px; background: url(header.jpg) left center / cover no-repeat; }
.kopf { position: relative; }
.sprache { position: absolute; top: .75rem; right: .75rem; background: rgba(255,255,255,.9); color: var(--braun); font-weight: 600; font-size: .85rem; padding: .3rem .7rem; border-radius: 999px; text-decoration: none; }
.sprache:hover { background: #fff; color: var(--aktiv); }
.leiste { height: 10px; background: var(--gold); }

.spalten { display: grid; grid-template-columns: 240px 1fr; }
.menue { background: var(--ocker); padding: 1.25rem 0 2rem; }
.menue summary { display: none; }
.menue ul { list-style: none; margin: 0; padding: 0; }
.menue a { display: block; padding: .4rem 1rem .4rem 2.1rem; color: var(--text); text-decoration: none; font-weight: 600; line-height: 1.3; }
.menue ul ul a { padding-left: 3rem; font-weight: 500; font-size: .95em; }
.menue ul ul ul a { padding-left: 3.9rem; }
.menue ul ul ul ul a { padding-left: 4.8rem; }
.menue a:hover { background: rgba(255,255,255,.25); color: var(--aktiv); }
.menue a[aria-current] { background: url(on.gif) .9rem center no-repeat, var(--ocker-hell); color: var(--aktiv); }
.menue ul ul a[aria-current] { background-position: 1.8rem center, 0 0; }

.inhalt { padding: 2rem clamp(1rem, 4vw, 3rem) 3rem; min-width: 0; }
.pfad { font-size: .85em; color: var(--text-leise); margin-bottom: .5rem; }
.pfad a { color: inherit; }
h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.2; margin: 0 0 1.5rem; color: var(--braun); }
h2 { font-size: 1.3rem; line-height: 1.3; margin: 0 0 .75rem; color: var(--braun); }

.baustein { margin: 0 0 2.5rem; }
.baustein::after { content: ""; display: block; clear: both; }
.bild { margin: 0 0 1rem; }
.bild img { border-radius: 6px; box-shadow: 0 2px 10px rgba(60,30,0,.18); }
.bild.mitte img { margin: 0 auto; } /* Anzeigebreite setzt build.py (höchstens 1,6-fach, Hochformat höchstens 760 px hoch) */
.bild.links { float: left; max-width: 38%; margin: .3rem 1.5rem 1rem 0; }
.bild.rechts { float: right; max-width: 38%; margin: .3rem 0 1rem 1.5rem; }
.bild.links ~ .bild.links { clear: left; } /* mehrere Bilder untereinander statt nebeneinander */
.bild.rechts ~ .bild.rechts { clear: right; }
.text p { margin: 0 0 .8em; }
.text { overflow-wrap: anywhere; }
.rechtstext h2 { margin-top: 2.2rem; }
.rechtstext h3 { font-size: 1.1rem; color: var(--braun); margin: 1.6rem 0 .5rem; }
.rechtstext h4 { font-size: 1rem; margin: 1.1rem 0 .3rem; }
.rechtstext ul { padding-left: 1.3rem; }

.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.galerie figure { margin: 0; }
.galerie a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: var(--ocker-hell); }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.galerie a:hover img { transform: scale(1.04); }
.galerie figcaption { font-size: .8rem; color: var(--text-leise); margin-top: .3rem; line-height: 1.3; }

.karten { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; }
.karten a { display: block; padding: .9rem 1rem; background: #fff; border: 1px solid var(--ocker-hell); border-left: 5px solid var(--gold); border-radius: 8px; text-decoration: none; color: var(--text); font-weight: 600; }
.karten a:hover { border-color: var(--ocker); color: var(--aktiv); }

.fuss { background: var(--gold); color: var(--text); padding: .8rem clamp(1rem, 4vw, 3rem); display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; font-size: .9rem; }
.fuss a { color: var(--text); }

.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; }
.lightbox::backdrop { background: rgba(30,15,0,.9); }
.lightbox figure { margin: 0; }
.lightbox img { max-width: 92vw; max-height: 86vh; width: auto; margin: 0 auto; border-radius: 6px; }
.lightbox figcaption { color: #fff; text-align: center; padding: .5rem; }
.lightbox button { position: fixed; background: rgba(0,0,0,.5); color: #fff; border: 0; font-size: 2rem; width: 3rem; height: 3rem; border-radius: 50%; cursor: pointer; }
.lb-zu { top: 1rem; right: 1rem; } .lb-vor { left: 1rem; top: 50%; } .lb-nach { right: 1rem; top: 50%; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .spalten { grid-template-columns: 1fr; }
  .menue { padding: 0; }
  .menue summary { display: block; padding: .8rem 1rem; font-weight: 700; cursor: pointer; }
  .bild.links, .bild.rechts { float: none; max-width: 100%; margin: 0 0 1rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }