/* ═══════════════════════════════════════════════════════════════════════
   ABSCHLUSS — der Kalender-Abschnitt und der Fuß
   Gilt für ALLE Seiten. Diese Regeln standen zuerst inline in
   index.html; die Unterseiten hatten einen eigenen, schmalen Fuß und
   keinen Kalender-Abschnitt. Dominics Vorgabe: „soll sich bei allen
   Seiten gleich durchziehen" — also eine Datei, die überall gilt,
   statt drei Kopien, die auseinanderlaufen.

   Setzt basis.css voraus (Farben, --rand, --breite-weit, .grund, .luft).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Merken ─────────────────────────────────────────────────────────── */
/* Der Abschnitt war ein 292 px hoher Streifen mit 158 px Abstand zum
   Fuß darunter. Mit einem Foto als Grund lohnt sich mehr Fläche: er ist
   jetzt mindestens 60 % der Fenster­höhe hoch und schließt ohne Lücke an
   den Fuß an — das Bild läuft in die Fußzeile hinein statt vorher
   abzubrechen. */
.merken{display:grid;grid-template-columns:repeat(12,1fr);
  min-height:60svh;align-content:center;margin-bottom:0 !important}
/* `.fuss` steht außerhalb von <main> und ist damit kein Geschwister der
   Merken-Sektion — ein Nachbarselektor griff hier ins Leere. Der Abstand
   kommt aus `.luft`; für den Fuß wird er ausgeschaltet, damit das Bild
   ohne Naht in die Fußzeile läuft. */
.fuss.luft{margin-top:0}
.fuss{border-top-color:var(--linie-gold)}

/* ── Merken bekommt Grund ────────────────────────────────────────────
   Der Abschnitt war reines Schwarz mit einer Goldlinie. Jetzt liegt ein
   Foto darunter, abgedunkelt und mit einem Verlauf belegt: das Bild ist
   Stimmung, nicht Motiv, und der Text muss ohne Anstrengung lesbar
   bleiben.

   z-index 0, nicht -1: `.grund` setzt `isolation:isolate` und bildet
   damit einen eigenen Stapelkontext. Ein Pseudoelement mit -1 landet
   darin HINTER der schwarzen Grundfarbe der Sektion — das Bild war
   gebaut, ausgeliefert und trotzdem unsichtbar.

   Und diese Regel stand zuerst versehentlich im Mobilblock. Sie griff
   dadurch nur unter 833 px, und am Schreibtisch blieb der Abschnitt
   schwarz, obwohl alles andere stimmte. */
.merken--bild::after{content:"";position:absolute;inset:0;z-index:0;
  pointer-events:none;
  background:
    linear-gradient(to right,rgba(7,8,7,.90) 0%,rgba(7,8,7,.34) 46%,rgba(7,8,7,.62) 100%),
    url("bilder/merken-grund.jpg") center/cover no-repeat}
.merken > *{position:relative;z-index:1;min-width:0}
.mk1{grid-column:1/8;padding:clamp(34px,4.6vw,80px)}
.mk2{grid-column:8/13;padding:clamp(28px,3.6vw,58px);
  /* Rechtsbündig: Kreis und Knöpfe schließen mit dem Satzrand ab. */
  display:flex;flex-direction:column;align-items:flex-end;
  justify-content:center;gap:13px;overflow:hidden;text-align:right}
/* Die eigene Aura-Kachel ist entfallen: Seit der ganze Abschnitt ein
   Foto trägt, standen zwei Bilder übereinander und machten die rechte
   Hälfte unruhig. Geblieben ist nur die Abdunklung, damit die Knöpfe
   stehen. */
.mk2::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to left,rgba(7,8,7,.55),transparent 70%)}
.mk2 > *{position:relative;z-index:2}
@media (max-width:833px){.mk1,.mk2{grid-column:1/13;border-right:0}}

/* ── Fuß ──────────────────────────────────────────────────────────────
   Neu geordnet. Vorher: vier Spalten mit ungleicher Breite, keine
   gemeinsame Grundlinie, dazu ein Stempel rechts, der den Markenblock
   links doppelte. Jetzt vier gleich behandelte Spalten auf einer Linie,
   eine Haarlinie, eine Rechtszeile — und darunter die Wortmarke, die
   bewusst über die Unterkante läuft.                                 */
.fuss{position:relative;overflow:hidden;
  /* Keine Trennlinie über dem Fuß — der Abstand trennt genug. */
  padding-top:clamp(48px,6vw,96px)}
.fuss__wand{position:absolute;right:0;top:0;width:min(44vw,620px);opacity:.12;
  mix-blend-mode:screen;pointer-events:none}
.fuss__oben{position:relative;
  width:min(100% - 2*var(--rand),var(--breite-weit));margin-inline:auto;
  display:grid;gap:clamp(28px,3.4vw,56px);
  grid-template-columns:1fr;align-items:start}
@media (min-width:900px){
  .fuss__oben{grid-template-columns:1.4fr 1fr 1fr .9fr}}

/* Alle Spalten gleich behandelt: Label, dann Inhalt */
.fs{display:grid;gap:9px;align-content:start}
/* Im Fuß kein Grün: Grün trägt oben den Ortsnamen und die Siegel, hier
   würde es nur streuen. Die Köpfe stehen in Grau. */
.fs h3{margin:0 0 4px;font-weight:500;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grau)}
.fs p{margin:0;max-width:32ch}
/* Die Veranstalterspalte im Fuß schließt rechts ab: Logos und Text auf
   derselben rechten Kante, und die Kante liegt nicht am Blattrand. */
@media (min-width:900px){
  .fs--rechts{justify-items:end;text-align:right;padding-right:clamp(8px,1.4vw,26px)}
  .fs--rechts p{max-width:26ch}
  /* Die Logozeile lief über die Spalte hinaus und stand dadurch weiter
     rechts als der Text darunter. Jetzt teilt sie dessen rechte Kante,
     und die Logos sind hier kleiner als in der Sponsorenleiste. */
  .fs--rechts .wer__zeile{max-width:100%;justify-content:flex-end}
  .fs--rechts .wer__zeile img{height:clamp(26px,2.6vw,40px)}
  .fs--rechts .wer__strich{height:clamp(22px,2.2vw,32px)}
}
.fs a{color:rgba(250,250,249,.82);transition:opacity var(--reaktion) var(--e1)}
.fs a:hover{opacity:.7}

.fuss__marke{display:grid;gap:14px;align-content:start;justify-items:start}
.fuss__marke > img{height:clamp(52px,5.4vw,78px);width:auto}
.fuss__marke .name{font-family:"Lobos FC",Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(17px,1.9vw,26px);line-height:1.04;letter-spacing:.004em;margin:0}
.fuss__marke .ort{font-family:"Westbury Claridge",Georgia,serif;
  font-size:15px;letter-spacing:.1em;color:rgba(250,250,249,.66);margin:0}

.fuss__unten{position:relative;
  width:min(100% - 2*var(--rand),var(--breite-weit));margin-inline:auto;
  display:grid;gap:10px 32px;grid-template-columns:1fr;
  margin-top:clamp(40px,5vw,80px);padding-top:20px;
  border-top:1px solid var(--linie)}
@media (min-width:834px){
  .fuss__unten{grid-template-columns:auto 1fr auto;align-items:baseline}
  .fuss__unten > :nth-child(2){text-align:center}
  .fuss__unten > :nth-child(3){text-align:right}}

.fuss__wort{
  font-family:"Lobos FC",Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(110px,26vw,420px);line-height:.66;letter-spacing:.015em;
  color:rgba(250,250,249,.055);margin:clamp(22px,3vw,50px) 0 -.20em;
  white-space:nowrap;text-align:center;pointer-events:none;user-select:none}

/* ── Übergang auf den Unterseiten ────────────────────────────────────
   `.rinhalt` bringt unten schon bis zu 150 px Innenabstand mit, `.luft`
   legt bis zu 180 px Außenabstand darauf. Zusammen wäre das ein leeres
   Feld von über 300 px. Zwei Klassen schlagen die eine von `.luft`, also
   greift diese Regel ohne `!important`.                              */
.rinhalt + .merken{margin-top:clamp(30px,4vw,70px)}
/* Am Handy trägt `.luft` ein `!important` (siehe basis.css) — ohne das
   hier gewinnt es, und der Übergang wäre 40 statt 30 px.           */
@media (max-width:833px){
  .rinhalt + .merken{margin-top:clamp(30px,4vw,70px) !important}
}

/* ── Die Logozeile der Veranstalter ──────────────────────────────────
   Zwei Logos nebeneinander, getrennt durch einen dünnen senkrechten
   Strich. Steht hier und nicht inline in index.html, weil der Fuß
   jeder Seite sie braucht — vorher waren die Logos auf den
   Unterseiten unbegrenzt hoch.                                      */
.wer__zeile{display:flex;align-items:center;gap:clamp(14px,1.8vw,28px)}
.wer__zeile img{height:clamp(34px,3.8vw,60px);width:auto;opacity:.9;
  max-width:100%;object-fit:contain}
.wer__strich{width:1px;height:clamp(30px,3.4vw,54px);background:var(--linie);
  flex:0 0 auto}