/* ==========================================================================
   FESTWIESE | Magazin für Feste, Brauchtum und das Leben in der Region
   Bildwelt: Marktplatz am Festtag. Perlgraues Programmpapier, Tannengrün,
   Kirschrot der Schärpen, Messing der Blaskapelle.
   Klassenpräfix: gir- (Girlande, Mast, Zelt, Bude, Umzug, Spalier)
   Keine externe Anfrage: keine Web-Font, kein CDN, kein Skript.
   ========================================================================== */

:root {
  --perl:        #e9ebf1;
  --perl-tief:   #dee1eb;
  --platte:      #f7f8fc;
  --platte-warm: #fbf7ee;
  --linie:       #c8cddd;
  --linie-fein:  #dfe3ee;

  --tinte:       #1a2033;
  --tinte-still: #4a5168;
  --tinte-matt:  #6e7590;

  --tann:        #1d5138;
  --tann-tief:   #143a28;
  --tann-hell:   #2e7150;
  --kirsch:      #b21e3c;
  --kirsch-tief: #8d162e;
  --messing:     #96690f;

  --satz-titel: "Hoefler Text", "Baskerville Old Face", Baskerville, "Sitka Display", "Palatino Linotype", Georgia, serif;
  --satz-text:  "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, Geneva, sans-serif;
  --satz-marke: Futura, "Century Gothic", "URW Gothic", "Avenir Next", "Trebuchet MS", sans-serif;

  --weit: 80rem;
  --eng:  43rem;
  --rund: 18px;
  --rund-klein: 11px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--perl);
  background-image:
    radial-gradient(1100px 480px at 85% -220px, rgba(29, 81, 56, .09) 0%, rgba(29, 81, 56, 0) 62%),
    radial-gradient(820px 420px at -6% 4%, rgba(178, 30, 60, .07) 0%, rgba(178, 30, 60, 0) 58%);
  background-attachment: fixed;
  color: var(--tinte);
  font-family: var(--satz-text);
  font-size: clamp(.98rem, .92rem + .26vw, 1.06rem);
  line-height: 1.72;
  -webkit-text-size-adjust: 100%;
  /* Deutsche Komposita sind lang: ohne Trennung sprengt « Festwirtschaftsabrechnung »
     eine schmale Spalte auf dem Telefon. */
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Rasterkinder dürfen schrumpfen, sonst erzwingt der längste Inhalt die Spaltenbreite. */
.gir-reihe > *, .gir-umzug > *, .gir-spalier > *, .gir-laternen > *, .gir-fundament__felder > * { min-width: 0; }

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

a { color: var(--tann); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--kirsch); }
a:focus-visible { outline: 2px solid var(--messing); outline-offset: 3px; border-radius: 3px; }

h1, h2, h3, h4 {
  font-family: var(--satz-titel);
  font-weight: 600;
  letter-spacing: -.008em;
  line-height: 1.14;
  margin: 0;
  color: #141a2b;
}

.gir-platz { width: min(100% - 2.4rem, var(--weit)); margin-inline: auto; }
.gir-platz--eng { width: min(100% - 2.4rem, var(--eng)); margin-inline: auto; }

.gir-still {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.gir-abkuerzung {
  position: absolute; left: -9999px; top: 0; z-index: 40;
  background: var(--messing); color: #fff; padding: .7rem 1.2rem;
  font-family: var(--satz-marke); text-decoration: none;
}
.gir-abkuerzung:focus { left: .8rem; top: .8rem; }

/* ---------- Mast (Kopfzeile) --------------------------------------------- */

.gir-mast {
  background: linear-gradient(180deg, #ffffff 0%, var(--platte) 100%);
  border-bottom: 1px solid var(--linie);
  position: relative;
  z-index: 5;
}
.gir-mast::after {
  content: ""; display: block; height: 4px;
  background: repeating-linear-gradient(90deg,
    var(--tann) 0 34px, var(--messing) 34px 44px, var(--kirsch) 44px 78px, var(--messing) 78px 88px);
  opacity: .9;
}

.gir-mast__reihe {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .6rem 2rem; padding: .9rem 0 .8rem;
}

.gir-wappen { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; }
.gir-wappen__zeichen { flex: 0 0 auto; }
.gir-wappen__name {
  display: block; font-family: var(--satz-titel); font-size: 1.86rem; font-weight: 600;
  letter-spacing: .015em; color: #131a2a; line-height: 1;
}
.gir-wappen__zusatz {
  display: block; font-family: var(--satz-marke); font-size: .66rem;
  letter-spacing: .3em; text-transform: uppercase; color: var(--tinte-matt); margin-top: .34rem;
}

.gir-wimpel { display: flex; flex-wrap: wrap; gap: .12rem .2rem; font-family: var(--satz-marke); }
.gir-wimpel__fahne {
  display: inline-block; padding: .48rem .74rem .44rem;
  font-size: .8rem; letter-spacing: .05em; text-decoration: none;
  color: var(--tinte-still); border-radius: 999px;
  border: 1px solid transparent;
}
.gir-wimpel__fahne:hover { background: #fff; color: var(--tann); border-color: var(--linie); }
.gir-wimpel__fahne[aria-current="page"] {
  background: var(--tann); color: #f4f7f2; border-color: var(--tann-tief);
}

/* ---------- Zelt (Startseiten-Held) -------------------------------------- */

.gir-zelt {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--linie);
}
.gir-zelt__plane {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
/* Der Schleier ist HART ausgeschrieben, nie var(--x): eine helle Variable
   würde das Foto in Grau ertränken. */
.gir-zelt__schatten {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(16, 44, 30, .93) 0%, rgba(16, 44, 30, .84) 46%, rgba(16, 44, 30, .58) 100%),
    linear-gradient(180deg, rgba(11, 30, 21, .55) 0%, rgba(11, 30, 21, 0) 42%);
}
.gir-zelt__kern { padding: 2rem 0 2.15rem; max-width: 46rem; color: #f2f5ee; }
.gir-zelt__marke {
  font-family: var(--satz-marke); font-size: .72rem; letter-spacing: .28em;
  text-transform: uppercase; color: #d8c48a; margin: 0 0 .8rem;
}
.gir-zelt__kern h1 {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.05rem);
  color: #fdfdf8; margin: 0 0 .85rem;
}
.gir-zelt__vorspann {
  font-size: clamp(1rem, .96rem + .3vw, 1.14rem);
  color: rgba(240, 244, 235, .93); margin: 0 0 1.1rem; max-width: 42rem;
}
.gir-zelt__zahlen {
  display: flex; flex-wrap: wrap; gap: .4rem 2.4rem; list-style: none; padding: 0;
  margin: 0 0 1.25rem;
}
.gir-zelt__zahl { display: flex; align-items: baseline; gap: .5rem; }
.gir-zelt__wert {
  font-family: var(--satz-titel); font-size: 1.5rem; color: #f0d79a; line-height: 1;
}
.gir-zelt__wort {
  font-family: var(--satz-marke); font-size: .7rem; letter-spacing: .17em;
  text-transform: uppercase; color: rgba(233, 240, 227, .82);
}

.gir-podest {
  display: inline-block; font-family: var(--satz-marke); font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  padding: .68rem 1.25rem; border-radius: 999px; margin: 0 .5rem .5rem 0;
  border: 1px solid rgba(240, 244, 235, .5); color: #f2f5ee;
}
.gir-podest:hover { border-color: #f0d79a; color: #f9e9c2; }
.gir-podest--voll {
  background: var(--kirsch); border-color: var(--kirsch-tief); color: #fff;
}
.gir-podest--voll:hover { background: var(--kirsch-tief); color: #fff; }
.gir-podest--dunkel {
  border-color: var(--linie); color: var(--tann);
}
.gir-podest--dunkel:hover { background: #fff; color: var(--kirsch); }

/* ---------- Bahn (Abschnitt) --------------------------------------------- */

.gir-bahn { padding: 2.15rem 0 .4rem; }
.gir-bahn--tief { background: var(--perl-tief); border-block: 1px solid var(--linie-fein); padding-bottom: 2.6rem; }
.gir-bahn--hell { background: var(--platte); border-block: 1px solid var(--linie-fein); padding-bottom: 2.6rem; }
.gir-bahn__kopf {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: .5rem 2rem; margin-bottom: 1.15rem;
  border-bottom: 2px solid var(--tann); padding-bottom: .6rem;
}
.gir-bahn__titel { font-size: clamp(1.4rem, 1.15rem + .8vw, 1.86rem); }
.gir-bahn__notiz {
  font-size: .9rem; color: var(--tinte-still); margin: 0; max-width: 44rem;
}

/* ---------- Buden (Rubrikkacheln) ---------------------------------------- */

.gir-reihe {
  display: grid; gap: 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(20.5rem, 1fr));
}
.gir-bude {
  background: var(--platte); border: 1px solid var(--linie-fein);
  border-radius: var(--rund); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 0 rgba(26, 32, 51, .04);
}
.gir-bude__rahmen { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--perl-tief); }
.gir-bude__bild { width: 100%; height: 100%; object-fit: cover; }
.gir-bude__glanz {
  position: absolute; inset: auto 0 0 0; height: 58%;
  background: linear-gradient(180deg, rgba(15, 38, 27, 0) 0%, rgba(15, 38, 27, .62) 100%);
}
.gir-bude__kern { padding: .95rem 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.gir-bude__titel { font-size: 1.2rem; }
.gir-bude__titel a { text-decoration: none; }
.gir-bude__titel a:hover { text-decoration: underline; }
.gir-bude__text { margin: 0; font-size: .88rem; color: var(--tinte-still); flex: 1; }
.gir-bude__weiter {
  font-family: var(--satz-marke); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; color: var(--kirsch);
}
.gir-bude__weiter:hover { text-decoration: underline; }

/* ---------- Umzug (datierter Strom) -------------------------------------- */

.gir-umzug {
  display: grid; gap: 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.gir-umzug--drei { grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); }

.gir-wagen {
  background: var(--platte); border: 1px solid var(--linie-fein);
  border-radius: var(--rund); overflow: hidden; display: flex; flex-direction: column;
}
.gir-wagen__rahmen { aspect-ratio: 16 / 9; overflow: hidden; background: var(--perl-tief); }
.gir-wagen__bild { width: 100%; height: 100%; object-fit: cover; }
.gir-wagen__kern { padding: .9rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.gir-wagen__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin: 0; }
.gir-wagen__titel { font-size: 1.16rem; }
.gir-wagen__titel a { text-decoration: none; }
.gir-wagen__titel a:hover { text-decoration: underline; }
.gir-wagen__anriss { margin: 0; font-size: .88rem; color: var(--tinte-still); }

/* Die Spitze des Zuges: ein Wagen über die volle Breite, Bild links. */
.gir-wagen--spitze { grid-column: 1 / -1; }
@media (min-width: 52rem) {
  .gir-wagen--spitze { flex-direction: row; align-items: stretch; }
  .gir-wagen--spitze .gir-wagen__rahmen { flex: 0 0 54%; aspect-ratio: auto; }
  .gir-wagen--spitze .gir-wagen__kern { justify-content: center; padding: 1.6rem 1.8rem; gap: .6rem; }
  .gir-wagen--spitze .gir-wagen__titel { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.9rem); }
  .gir-wagen--spitze .gir-wagen__anriss { font-size: .96rem; }
}

/* ---------- Spalier (zwei ungleiche Reihen) ------------------------------ */

.gir-spalier { display: grid; gap: 1.4rem; }
@media (min-width: 62rem) { .gir-spalier { grid-template-columns: 1.9fr 1fr; gap: 2rem; } }

.gir-laternen { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.gir-laterne {
  display: grid; grid-template-columns: 5.2rem 1fr; gap: .85rem; align-items: center;
  background: var(--platte); border: 1px solid var(--linie-fein);
  border-radius: var(--rund-klein); padding: .55rem .8rem .55rem .55rem;
}
.gir-laterne__rahmen { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background: var(--perl-tief); }
.gir-laterne__bild { width: 100%; height: 100%; object-fit: cover; }
.gir-laterne__titel { font-size: .98rem; margin-bottom: .18rem; }
.gir-laterne__titel a { text-decoration: none; }
.gir-laterne__titel a:hover { text-decoration: underline; }
.gir-laterne p { margin: 0; }

/* ---------- Kleinteile ---------------------------------------------------- */

.gir-glocke {
  font-family: var(--satz-marke); font-size: .72rem; letter-spacing: .12em;
  color: var(--messing); text-transform: uppercase; white-space: nowrap;
}
.gir-band {
  font-family: var(--satz-marke); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; color: var(--kirsch);
  border: 1px solid rgba(178, 30, 60, .35); border-radius: 999px; padding: .16rem .58rem .1rem;
}
.gir-band:hover { background: var(--kirsch); color: #fff; }

.gir-pfad { padding: 1rem 0 .2rem; font-family: var(--satz-marke); font-size: .74rem; letter-spacing: .07em; }
.gir-pfad ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; color: var(--tinte-matt); }
.gir-pfad li + li::before { content: "›"; margin-right: .4rem; color: var(--linie); }
.gir-pfad a { color: var(--tinte-still); text-decoration: none; }
.gir-pfad a:hover { color: var(--kirsch); text-decoration: underline; }

/* ---------- Anschlag (Seitenkopf) ---------------------------------------- */

.gir-anschlag { max-width: 52rem; padding: 1.2rem 0 1.5rem; }
.gir-anschlag__ueber {
  font-family: var(--satz-marke); font-size: .72rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--kirsch); margin: 0 0 .7rem;
}
.gir-anschlag h1 { font-size: clamp(1.85rem, 1.3rem + 2.1vw, 2.75rem); margin-bottom: .8rem; }
.gir-anschlag__vorspann { font-size: clamp(1.02rem, .97rem + .32vw, 1.16rem); color: var(--tinte-still); margin: 0 0 .9rem; }
.gir-anschlag__zeichen { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: 0; }

/* ---------- Bilder in der Seite ------------------------------------------ */

.gir-breitbild { margin: 0 0 2rem; }
.gir-breitbild img {
  width: 100%; aspect-ratio: 21 / 9; object-fit: cover;
  border-radius: var(--rund); border: 1px solid var(--linie-fein);
}
figcaption {
  font-size: .82rem; color: var(--tinte-matt); margin-top: .55rem;
  font-family: var(--satz-text); line-height: 1.55;
}

.gir-paar { display: grid; gap: 1rem; margin: 1.8rem 0; }
@media (min-width: 40rem) { .gir-paar { grid-template-columns: 1fr 1fr; } }
.gir-paar figure { margin: 0; }
.gir-paar img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--rund-klein); border: 1px solid var(--linie-fein);
}

/* ---------- Lesegasse (Textspalte) --------------------------------------- */

.gir-lesegasse { max-width: var(--eng); padding-bottom: 2.4rem; }
.gir-lesegasse p { margin: 0 0 1.15rem; }
.gir-lesegasse h2 {
  font-size: clamp(1.28rem, 1.1rem + .7vw, 1.62rem);
  margin: 2.2rem 0 .85rem; padding-left: .8rem;
  border-left: 4px solid var(--kirsch);
}
.gir-lesegasse h3 { font-size: 1.14rem; margin: 1.6rem 0 .6rem; }
.gir-lesegasse ul, .gir-lesegasse ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.gir-lesegasse li { margin-bottom: .45rem; }

.gir-initial::first-letter {
  float: left; font-family: var(--satz-titel); font-size: 3.5rem; line-height: .82;
  padding: .16rem .5rem .1rem 0; color: var(--tann);
}

.gir-aushang {
  background: var(--platte-warm); border: 1px solid #e5dcc4;
  border-left: 5px solid var(--messing);
  border-radius: var(--rund-klein); padding: 1.1rem 1.3rem .9rem; margin: 1.7rem 0;
}
.gir-aushang__titel {
  font-family: var(--satz-marke); font-size: .74rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--messing); margin: 0 0 .7rem;
}
.gir-aushang ul { margin: 0; padding-left: 1.15rem; }
.gir-aushang li { margin-bottom: .5rem; font-size: .95rem; }
.gir-aushang li:last-child { margin-bottom: 0; }

.gir-liste { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.gir-liste li {
  display: flex; flex-wrap: wrap; gap: .55rem; align-items: baseline;
  padding: .5rem 0; border-bottom: 1px dotted var(--linie);
}

.gir-register-lauf { overflow-x: auto; margin: 1.7rem 0; border: 1px solid var(--linie); border-radius: var(--rund-klein); }
.gir-register { width: 100%; border-collapse: collapse; font-size: .89rem; background: var(--platte); }
.gir-register caption {
  caption-side: top; text-align: left; padding: .7rem .9rem;
  font-family: var(--satz-marke); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinte-matt); background: var(--perl-tief);
}
.gir-register th, .gir-register td { padding: .58rem .9rem; text-align: left; border-top: 1px solid var(--linie-fein); vertical-align: top; }
.gir-register thead th {
  font-family: var(--satz-marke); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tann); background: #eef1f6;
}
.gir-register tbody tr:nth-child(even) { background: #f2f4f9; }

/* ---------- Nachbarn (redaktionelle Verweise) ---------------------------- */

.gir-nachbarn {
  margin: 2.4rem 0 0; padding: 1.3rem 1.4rem 1rem;
  background: var(--platte); border: 1px solid var(--linie-fein);
  border-top: 3px solid var(--tann); border-radius: var(--rund-klein);
}
.gir-nachbarn__titel {
  font-size: 1.12rem; margin-bottom: .7rem;
}
.gir-nachbarn p { margin: 0 0 .75rem; font-size: .95rem; }
.gir-nachbarn p:last-child { margin-bottom: 0; }

/* ---------- Fundament (Fußzeile) ----------------------------------------- */

.gir-fundament {
  margin-top: 3rem; background: #16223a; color: #d5dae8;
  border-top: 5px solid var(--tann);
  padding: 2.4rem 0 1.4rem; font-size: .9rem;
}
.gir-fundament h2 {
  font-family: var(--satz-marke); font-size: .74rem; letter-spacing: .2em;
  text-transform: uppercase; color: #e2c98f; margin-bottom: .8rem;
}
.gir-fundament a { color: #cfd6e6; text-decoration: none; }
.gir-fundament a:hover { color: #f3d79c; text-decoration: underline; }
.gir-fundament ul { list-style: none; margin: 0; padding: 0; }
.gir-fundament li { margin-bottom: .42rem; }
.gir-fundament p { margin: 0 0 .8rem; color: #b9c1d3; }
.gir-fundament__felder {
  display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.gir-fundament__fuss {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem;
  margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(213, 218, 232, .18);
  font-family: var(--satz-marke); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: #9aa3ba;
}

/* ---------- Abseits (404) ------------------------------------------------- */

.gir-abseits { padding: 3.4rem 0 4rem; max-width: 44rem; }
.gir-abseits h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem); margin-bottom: 1rem; }
.gir-abseits p { margin: 0 0 1.1rem; }

/* ---------- Feinschliff --------------------------------------------------- */

@media (max-width: 41rem) {
  .gir-mast__reihe { padding-bottom: .4rem; }
  .gir-wimpel { width: 100%; }
  .gir-zelt__kern { padding: 2rem 0 2.1rem; }
  .gir-laterne { grid-template-columns: 4.2rem 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media print {
  .gir-mast, .gir-fundament, .gir-zelt__plane { display: none; }
  body { background: #fff; }
}