/* Schlussblock von Katalog und Archiv: Aufruf zum Gruenden bzw. zum
   Wiederbeleben. Liegt auf dem Hintergrund des Katalogs und traegt ihn bis
   zum Footer weiter. */
.banner-flaeche {
  background: var(--bage);
  /* derselbe Seitenabstand wie .catalog - der Kasten steht damit auf der
     Fluchtlinie der Kartenreihe darueber */
  padding: 8px var(--seiten-rand) 56px;
}

/* Text links, die beiden Wege rechts untereinander.

   Als einzige goldene Flaeche der Seite: zwischen weissen Karten und hellem
   Grund ist das der Block, der herausstechen soll. Ruhiger wird er mit
   rgba(217,164,65,0.18) statt var(--weg). */
.banner {
  background: var(--weg);
  border: 1px solid var(--weg-dunkel);
  border-radius: 14px;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* nimmt den Platz bis zu den Knoepfen ein - sonst steht der Text in einer
   schmalen Spalte am linken Rand und die Breite des Kastens ergibt keinen Sinn */
.banner__inhalt {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.banner__titel {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--tanne);
}

.banner__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--tinte);
}

/* ==========================
   Schaltflaechen
   ========================== */
/* Untereinander und auf gleicher Breite - die laengste Beschriftung gibt sie
   vor. flex:none, damit die Knoepfe nicht schmaler werden als ihr Text. */
.banner__aktionen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: none;
  gap: 12px;
}

.banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  background: var(--karte);
  border: 1px solid var(--moos);
  border-radius: 999px;
  color: var(--tanne);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.banner__btn:hover {
  background: var(--nebel);
}

.banner__btn--primaer {
  background: var(--tanne);
  border-color: var(--tanne);
  color: #fff;
}

.banner__btn--primaer:hover {
  background: var(--moos);
  border-color: var(--moos);
  color: #fff;
}

/* ==========================
   Schmale Bildschirme
   ========================== */
/* Nebeneinander wird es hier zu eng: Text mittig, Knoepfe darunter. */
@media (max-width: 900px) {
  .banner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }

  .banner__inhalt {
    align-items: center;
  }

  .banner__aktionen {
    align-self: center;
    min-width: 260px;
  }
}

@media (max-width: 640px) {
  .banner-flaeche {
    padding-bottom: 40px;
  }

  .banner {
    padding: 26px 20px;
  }

  .banner__titel {
    font-size: 24px;
  }

  .banner__aktionen {
    align-self: stretch;
    min-width: 0;
  }

  /* auf ganz schmalen Geraeten darf die Beschriftung umbrechen */
  .banner__btn {
    white-space: normal;
  }
}