/* =========================================================================
   Labstelle Rahmen · Der Fuß
   =========================================================================
   Das Markup des Themes bleibt unberührt. Der Fuß hat sechs Kinder in dieser
   Reihenfolge, und darauf bauen alle Regeln hier auf:

     1  .siegel                          elf Marken und Auszeichnungen
     2  Kontakt · Impressum · Datenschutz · ©
     3  .content                         Öffnungszeiten und Küchenzeiten
     4  Jobs · Presse
     5  .content                         Adresse, Mail, Telefon
     6  soziale Netze

   Neu angeordnet:

     Zeile 1   Adresse      Zeiten      Jobs · Presse
     Zeile 2   Siegel, über die ganze Breite
     Zeile 3   Rechtliches                     soziale Netze

   Gemessen: 833 px vorher, rund 380 px nachher bei 1440 px Breite.
   ========================================================================= */

.main-footer {
  padding: 56px 0 28px;
  color: #EEF0E9;
}

/* Am Telefon eine Spalte, in dieser Reihenfolge. Das Raster darunter
   überschreibt die Reihenfolge ab 768 px durch feste Plätze. */
.main-footer > .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding-left: 21px;
  padding-right: 21px;
}
.main-footer > .container > * { min-width: 0; }

.main-footer > .container > :nth-child(5) { order: 1; }   /* Adresse */
.main-footer > .container > :nth-child(3) { order: 2; }   /* Zeiten */
.main-footer > .container > :nth-child(4) { order: 3; }   /* Jobs, Presse */
.main-footer > .container > :nth-child(1) { order: 4; }   /* Siegel */
.main-footer > .container > :nth-child(6) { order: 5; }   /* soziale Netze */
.main-footer > .container > :nth-child(2) { order: 6; }   /* Rechtliches */

@media (min-width: 768px) {
  .main-footer { padding: 56px 0 21px; }
  .main-footer > .container {
    grid-template-columns: 1.15fr 1fr 1fr;
    column-gap: 42px;
    row-gap: 35px;
    align-items: start;
  }
  .main-footer > .container > :nth-child(5) { grid-column: 1;      grid-row: 1; }
  .main-footer > .container > :nth-child(3) { grid-column: 2;      grid-row: 1; }
  .main-footer > .container > :nth-child(4) { grid-column: 3;      grid-row: 1; }
  .main-footer > .container > :nth-child(1) { grid-column: 1 / -1; grid-row: 2; }
  .main-footer > .container > :nth-child(2) { grid-column: 1 / 3;  grid-row: 3; }
  .main-footer > .container > :nth-child(6) { grid-column: 3;      grid-row: 3; justify-self: end; }
}

/* ---------- Fließtext: ruhiger und kleiner als bisher ---------- */
.main-footer .content,
.main-footer .content p,
.main-footer > .container > :nth-child(4) {
  font-size: 15px;
  line-height: 26px;
}
.main-footer .content p { margin: 0; }
/* Die Zeilen der Öffnungszeiten brechen über <br> im Quelltext. Nicht zusätzlich
   white-space: pre-line setzen – der Quelltext hat AUCH echte Zeilenumbrüche,
   dann bricht jede Zeile doppelt und die Spalte wird gut doppelt so hoch. */
.main-footer .content p + p { margin-top: 26px; }

.main-footer a { color: #EEF0E9; }
.main-footer a:hover { color: #FFFFFE; }

/* Jobs und Presse stehen untereinander, ohne auseinandergezogen zu werden. */
.main-footer > .container > :nth-child(4) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  height: auto;
}

/* ---------- Siegelreihe ---------- */
.main-footer .siegel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 21px 35px;
  margin-bottom: 0;
  padding-top: 28px;
  border-top: 1px solid rgba(238, 240, 233, .22);
}
.main-footer .siegel > a { display: inline-flex; align-items: center; }
/* Feste Höhe statt max-height: die Bilder laden verzögert und hätten ohne
   reservierten Platz vor dem Laden 0 px – die Zeile springt dann beim Scrollen.
   Die Höhe selbst setzt das Plugin, damit sie an einer Stelle einstellbar bleibt. */
.main-footer .siegel img {
  width: auto;
  min-width: 42px;      /* hält den Platz, solange das Bild noch nicht geladen ist */
  max-width: 140px;
  object-fit: contain;
}
/* Das Michelin-Feld war entsättigt – dabei wurde es unlesbar: ein graues
   Schild mit weißer Schrift hat auf Moos kaum Kontrast. Die rote Plakette ist
   eine geschützte Marke wie ein Logo und darf farbig bleiben; ein Zeichen in
   56 px kippt die Hausfarben nicht. Das Plugin kann sie über
   LABRA_MICHELIN_FARBE trotzdem entsättigen. */

/* ---------- Unterste Zeile ---------- */
.main-footer > .container > :nth-child(2) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 7px 28px;
  padding-top: 21px;
  border-top: 1px solid rgba(238, 240, 233, .22);
  font-size: 11px;
  line-height: 20px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #BFC3BD;
}
.main-footer > .container > :nth-child(2) a {
  color: #BFC3BD;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
.main-footer > .container > :nth-child(2) a:hover { color: #EEF0E9; }

.main-footer > .container > :nth-child(6) {
  display: flex;
  align-items: center;
  gap: 21px;
  padding-top: 21px;
}
@media (min-width: 768px) {
  .main-footer > .container > :nth-child(6) { border-top: 1px solid rgba(238, 240, 233, .22); }
}
.main-footer > .container > :nth-child(6) img { max-height: 20px; width: auto; }

/* ---------- Kleine Schirme ---------- */
@media (max-width: 767px) {
  .main-footer { padding: 42px 0 21px; }
  .main-footer .siegel { gap: 14px 21px; }
  .main-footer .siegel img { height: 44px; }
  .main-footer > .container > :nth-child(2) { font-size: 10px; gap: 7px 21px; }
}

/* Feine Linien haben auf Moos zu wenig Kontrast, wenn der Bildschirm
   auf hohen Kontrast gestellt ist. Dann werden sie voll deckend. */
@media (prefers-contrast: more) {
  .main-footer .siegel,
  .main-footer > .container > :nth-child(2),
  .main-footer > .container > :nth-child(6) { border-top-color: #EEF0E9; }
  .main-footer > .container > :nth-child(2),
  .main-footer > .container > :nth-child(2) a { color: #EEF0E9; }
}