/* Startseite: Aufmacher mit der Draufsicht und die Gegenüberstellung
   Kamerabilder → Draufsicht. Gilt nur, wo diese Klassen vorkommen. */

.cc-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.cc-hero__text {
  flex: 1 1 22rem;
}

.cc-hero__text h1 {
  font-size: 2.4em;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 0.6em;
  color: var(--md-default-fg-color);
}

.cc-hero__text p {
  font-size: 1.05em;
}

.cc-hero__bild {
  flex: 0 1 18rem;
  margin: 0 auto;
}

.cc-hero__bild img,
.cc-paar img {
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1.6rem rgba(0, 0, 0, 0.35);
}

.cc-paar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.cc-paar figure {
  margin: 0;
}

.cc-paar figure:first-child {
  flex: 1 1 24rem;
}

.cc-paar figure:last-child {
  flex: 0 0 auto;
}

.cc-pfeil {
  font-size: 2.5rem;
  color: var(--md-primary-fg-color);
  line-height: 1;
}

/* Auf schmalen Schirmen untereinander: Der Pfeil zeigt dann nach unten. */
@media (max-width: 44em) {
  .cc-pfeil {
    transform: rotate(90deg);
  }
}

/* Kartenreihen mit vier Einträgen: vier Spalten statt drei plus einer
   allein in der zweiten Zeile. Auf schmalen Schirmen bricht es von selbst um. */
.md-typeset .grid.cards.cc-vier {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}