
.kacheln { margin: 14rem 0 6rem; position: relative; }
@media screen and (width >= 1025px) { .kacheln { margin: 18rem 0 12rem; } }
@media screen and (width >= 1729px) { .kacheln { margin: 22rem 0 12rem; } }

.kacheln__raster { flex-direction: column; display: flex; }

.kacheln__block {
  background: var(--farbe-flaeche);
  border: 0;
  flex-direction: column;
  grid-column: span 10 / span 10;
  align-items: center;
  gap: 6rem;
  margin-bottom: 3rem;
  padding: 6rem 4rem;
  display: flex;
  position: relative;
}
@media screen and (width >= 1025px) { .kacheln__block { flex-direction: row; gap: 6.9rem; margin-bottom: 2rem; padding: 8rem 8.6rem 10rem; } }
@media screen and (width >= 1441px) { .kacheln__block { grid-column: span 20 / span 20; gap: 0; margin-bottom: 4rem; padding: 10rem 13rem 12rem 11.9rem; } }
@media screen and (width >= 1729px) { .kacheln__block { gap: 8rem; padding: 10rem 13rem 12rem; } }

.kacheln__text { flex-direction: column; gap: 2.6rem; display: flex; }
@media screen and (width >= 1025px) { .kacheln__text { gap: 4rem; width: 38rem; } }
@media screen and (width >= 1441px) { .kacheln__text { width: 60rem; } }
@media screen and (width >= 1729px) { .kacheln__text { width: 66rem; } }

.kacheln__zeichen {
  width: 4.8rem; height: 4.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.kacheln__zeichen img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kacheln__zeichen svg { width: 100%; height: 100%; display: block; color: var(--farbe-tinte); }
@media screen and (width >= 1025px) { .kacheln__zeichen { width: 4.4rem; height: 4.4rem; } }

.kacheln__titel { letter-spacing: -.16rem; font: 800 4rem/100% Inter, sans-serif; }
@media screen and (width >= 1025px) {
  .kacheln__titel { letter-spacing: -.192rem; font: 800 4.8rem/100% Inter, sans-serif;
                    padding-right: 2rem; line-height: .85 !important; }
}
@media screen and (width >= 1441px) { .kacheln__titel { letter-spacing: -.24rem;  font-size: 6rem; } }
@media screen and (width >= 1729px) { .kacheln__titel { letter-spacing: -.288rem; font-size: 7.2rem; } }

.kacheln__knopfreihe { position: relative; }
.kacheln__knopfreihe .knopf { display: inline-block; }
@media screen and (width >= 1025px) { .kacheln__knopfreihe .knopf .knopf__innen { padding-left: 4rem; padding-right: 4rem; } }
@media screen and (width <= 1024px) { .kacheln__knopfreihe .knopf { width: 100%; max-width: none; margin: auto; } }

.kacheln__mediumhuelle { flex: 1; justify-content: center; align-items: center; display: flex; }
.kacheln__medium {
  z-index: 1;
  aspect-ratio: 329 / 214;
  justify-content: center;
  align-items: center;
  width: 23rem;
  display: flex;
  position: relative;
}
.kacheln__medium img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.kacheln__medium--foto img { object-fit: cover; }
@media screen and (width >= 1025px) { .kacheln__medium { width: 28rem; } }
@media screen and (width >= 1441px) { .kacheln__medium { width: 32.9rem; } }

.schnelllinks { flex-direction: column; height: 100%; display: flex; }
@media screen and (width >= 1025px) {
  .schnelllinks {
    display: grid;
    grid-template-columns: repeat(var(--raster-spalten), 1fr);
    gap: var(--raster-abstand);
    padding: 0;
    row-gap: 0 !important;
  }
}

.schnelllink { grid-column: span 5 / span 5; }
@media screen and (width >= 1441px) { .schnelllink { grid-column: span 10 / span 10; } }
@media screen and (width <= 1024px) { .schnelllink:first-child:not(:last-child) { margin-bottom: 1rem; } }

.schnelllink__link {
  color: var(--farbe-tief);
  z-index: 1;
  border-radius: .8rem;
  text-decoration: none;
  transition: transform var(--dauer-4) var(--kurve-feder);
  display: flex;
  position: relative;
}
.schnelllink:first-child .schnelllink__link { background: var(--farbe-violett-pastell); }
.schnelllink:last-child  .schnelllink__link { background: var(--farbe-linie); }
.schnelllink--violett-blass .schnelllink__link { background: var(--farbe-violett-blass); }
@media (hover: hover) {
  .schnelllink__link:hover { transform: scale(.96); }
  .schnelllink__link:hover .schnelllink__marke::after { transform: translate(25%); }
}

.schnelllink__innen {
  z-index: 2;
  flex-direction: column;
  flex: 1 0 0;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 2rem;
  width: 100%; height: 100%;
  padding: 5rem;
  display: flex;
  position: relative;
}
@media screen and (width >= 1025px) { .schnelllink__innen { gap: 2rem; margin: 0; padding: 5rem 6rem 5rem 5rem; } }
@media screen and (width >= 1441px) { .schnelllink__innen { gap: 3rem; padding: 7rem 7rem 6rem; } }
@media screen and (width >= 1729px) { .schnelllink__innen { gap: 2rem; padding: 8rem 7rem 6rem; } }

.schnelllink__pille { margin-bottom: 0; }
@media screen and (width >= 1025px) { .schnelllink__pille { margin-bottom: .2rem; } }
@media screen and (width >= 1441px) { .schnelllink__pille { margin-bottom: .5rem !important; } }

.schnelllink__titel { letter-spacing: -.12rem; max-width: 28rem; font: 750 3rem/100% Inter, sans-serif; }
@media screen and (width >= 1025px) { .schnelllink__titel { letter-spacing: -.16rem; font: 800 3.6rem/100% Inter, sans-serif; max-width: none; } }
@media screen and (width >= 1441px) { .schnelllink__titel { letter-spacing: -.2rem;  font: 800 5rem/100% Inter, sans-serif; } }
@media screen and (width >= 1729px) { .schnelllink__titel { letter-spacing: -.24rem; font: 800 6rem/100% Inter, sans-serif; } }

.schnelllink__zeile  { display: flex; }
.schnelllink__marke  { letter-spacing: -.034rem; font-size: 1.7rem; font-weight: 600; line-height: 2.4rem; }
.schnelllink__marke::after {
  content: "\2192";
  margin-left: .5rem;
  transition: transform var(--dauer-3) var(--kurve-weich);
  display: inline-flex;
}
