.vorlagen { margin: 14rem 0; position: relative; }
@media screen and (width >= 1025px) { .vorlagen { margin: 18rem 0; } }
@media screen and (width >= 1729px) { .vorlagen { margin: 22rem 0; } }
.vorlagen .zkopf__titel { max-width: 70rem; margin: 0 auto; }

.vorlagen__karten { margin-top: 6rem; }
@media screen and (width >= 768px) { .vorlagen .zkopf + .vorlagen__karten { margin-top: 8.4rem; } }

.vorlagen__knopfreihe { margin-top: 6rem; }
@media screen and (width >= 768px) { .vorlagen__knopfreihe { margin-top: 8.4rem; } }

.vorlagen__knopf {
  z-index: 10;
  pointer-events: none;
  justify-content: center;
  max-width: 36rem;
  margin: 2rem auto 0;
  display: flex;
  position: relative;
}
.vorlagen__knopf a, .vorlagen__knopf button { pointer-events: auto; }
@media screen and (width >= 1025px) { .vorlagen__knopf { max-width: none; margin-top: 0; } }

.lauf          { width: 100%; overflow: hidden; }
.lauf__greifer { cursor: grab; -webkit-user-select: none; user-select: none; position: relative; }
.lauf__greifer * { cursor: grab; }
.lauf__greifer:active, .lauf__greifer:active * { cursor: grabbing; }

.lauf__spur {
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  gap: 2rem;
  padding: 0 2rem;
  display: flex;
  overflow-x: scroll;
}
.lauf__spur::-webkit-scrollbar { display: none; }
.lauf__spur > li {
  scroll-snap-align: center;
  width: calc(100% - 4rem);
  max-width: 49rem;
  padding: 0;
}
.lauf__greifer.wird-gezogen .lauf__spur,
.lauf__greifer.laeuft-selbst .lauf__spur { scroll-snap-type: none; }

.vorlagenkarte-huelle {
  will-change: transform;
  aspect-ratio: 350 / 460;
  flex-direction: column;
  flex-shrink: 0;
  width: 100%;
  max-width: 51rem;
  padding: 0 1rem;
  display: flex;
}

.vorlagenkarte {
  -webkit-user-select: none;
  user-select: none;
  background-color: var(--farbe-flaeche);
  border-radius: .8rem;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding-bottom: 4.4rem;
  display: flex;
  position: relative;
}

.vorlagenkarte__inhalt {
  flex-direction: column;
  justify-content: space-between;
  gap: 1.2rem;
  height: 100%;
  padding: 4rem 3rem 0;
  display: flex;
}
@media screen and (width >= 1025px) { .vorlagenkarte__inhalt { padding: 6rem 4rem 0; } }

.vorlagenkarte__halter {
  aspect-ratio: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.vorlagenkarte__medium {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  display: flex;
  position: relative;
  box-shadow: var(--schatten-vorlagenkarte);
}
@media screen and (width >= 1025px) { .vorlagenkarte__medium { width: 100%; } }

.vorlagenkarte--hoch  .vorlagenkarte__medium { width: 72%; }
.vorlagenkarte--quadrat .vorlagenkarte__medium { width: 72%; }
.vorlagenkarte--quer  .vorlagenkarte__medium { width: 88%; }
@media screen and (width <= 1024px) {
  .vorlagenkarte--hoch  .vorlagenkarte__medium { width: 72%; }
  .vorlagenkarte--quadrat .vorlagenkarte__medium { width: 80%; }
  .vorlagenkarte--quer  .vorlagenkarte__medium { width: 100%; }
}
.vorlagenkarte__bild {
  background-color: var(--farbe-linie);
  width: 100%;
  height: 100%;
  display: flex;
}
.vorlagenkarte--hoch    .vorlagenkarte__bild { aspect-ratio: 2 / 2.5; }
.vorlagenkarte--quadrat .vorlagenkarte__bild { aspect-ratio: 1; }
.vorlagenkarte--quer    .vorlagenkarte__bild { aspect-ratio: 4 / 3; }

.vorlagenkarte__link { z-index: 1; width: 100%; height: 100%; position: absolute; top: 0; left: 0; cursor: pointer !important; }
.vorlagenkarte__link::before {
  content: "";
  opacity: 0;
  pointer-events: none;
  background-color: var(--farbe-schleier);
  width: 100%; height: 100%;
  transition: opacity var(--dauer-3) var(--kurve-weich);
  position: absolute;
  top: 0; left: 0;
}
@media (hover: hover) {
  .vorlagenkarte__link:hover::before { opacity: 1; }
  .vorlagenkarte__link:hover + .vorlagenkarte__knopf { opacity: 1; transform: translate(-50%, -50%); }
}
.vorlagenkarte__knopf {
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  max-width: 22rem;
  transition: transform var(--dauer-4) var(--kurve-ueberschwung),
              opacity var(--dauer-3) var(--kurve-weich);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(1.1);
}
.vorlagenkarte__knopf .knopf__innen { box-shadow: var(--schatten-knopf); }
.vorlagenkarte-huelle.ist-getippt .vorlagenkarte__link::before { opacity: 1; }
.vorlagenkarte-huelle.ist-getippt .vorlagenkarte__knopf { opacity: 1; transform: translate(-50%, -50%); }

.vorlagenkarte__fuss   { align-items: center; gap: 1.2rem; display: flex; }
.vorlagenkarte__zeichen {
  aspect-ratio: 1;
  background-color: var(--farbe-tinte);
  border-radius: 50%;
  width: 5rem; height: 5rem;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vorlagenkarte__zeichen img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vorlagenkarte__text  { flex-direction: column; display: flex; }
.vorlagenkarte__titel { letter-spacing: -.02rem; font: 600 2rem/100% Inter, sans-serif; }
.vorlagenkarte__titel a { cursor: pointer !important; }
.vorlagenkarte__unter {
  color: var(--farbe-text-zweit);
  text-wrap: pretty;
  letter-spacing: 0;
  padding-top: 4px;
  font: 400 1.4rem/1.14 Inter, sans-serif;
}

.haltungsband { width: 100%; }

.grundkarte-huelle {
  flex-direction: column;
  flex-shrink: 0;
  width: 100%;
  max-width: 40rem;
  padding: 0 1rem;
  display: flex;
}

.grundkarte {
  background: var(--farbe-flaeche);
  border-radius: .6rem;
  padding: 3.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  width: 100%;
  height: 100%;
}
@media screen and (width >= 1025px) { .grundkarte { padding: 4rem; gap: 1.8rem; } }

.grundkarte--gelb  { background: var(--farbe-gelb); }
.grundkarte--lila  { background: var(--verlauf-lila-karte); }
.grundkarte--blau  { background: var(--verlauf-blau-karte); }
.grundkarte--grau  { background: var(--farbe-linie); }
.grundkarte--zart  { background: var(--farbe-violett-blass); }
.grundkarte--tinte { background: var(--farbe-tinte); }
.grundkarte--tinte .grundkarte__zeichen,
.grundkarte--tinte .grundkarte__titel { color: var(--farbe-weiss); }
.grundkarte--tinte .grundkarte__text { color: var(--farbe-text-blass); }
.grundkarte--lila .grundkarte__text,
.grundkarte--blau .grundkarte__text { color: var(--farbe-tinte); }

.grundkarte__zeichen {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--farbe-tinte);
}
.grundkarte__zeichen svg { width: 100%; height: 100%; display: block; }

.grundkarte__titel {
  letter-spacing: -.048rem;
  color: var(--farbe-tinte);
  font: 700 2rem/1.2 Inter, sans-serif;
  text-wrap: pretty;
  margin: 0;
}
@media screen and (width >= 1025px) { .grundkarte__titel { font-size: 2.2rem; } }

.grundkarte__text {
  letter-spacing: -.028rem;
  color: var(--farbe-text-zweit);
  font: 400 1.6rem/1.55 Inter, sans-serif;
  text-wrap: pretty;
  margin: 0;
}