/* Auswahlseite (index.html): Logo (Animation in logo-animation.css) und Links zu den Startseiten-Entwürfen.
   Kopfleiste und Schnellleiste sind hier ausgeblendet, der Fuß (Impressum, Datenschutz) bleibt. */

.kopf, .schnellleiste { display: none; }
.fuss .fuss__unten { padding-bottom: 1.5rem; }

.auswahl {
  overflow: clip; min-height: 100svh; display: grid; place-items: center; align-content: center;
  gap: clamp(1.5rem, 5svh, 3rem); padding: clamp(2rem, 6svh, 4rem) var(--abstand);
}

/* ---------- Logo groß in der Mitte ---------- */
.einstieg__logo { width: min(80vw, 52svh, 30rem); }


/* ---------- Links zu den Entwürfen ---------- */
.auswahl__inhalt { width: min(100%, 32rem); }
.auswahl__titel { font-size: var(--s-3); text-align: center; margin-bottom: 1.25rem; }
.auswahl__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.auswahl__link {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem;
  border: 2px solid var(--linie); border-radius: var(--ecke); background: var(--kalkweiss);
  color: var(--schiefer); text-decoration: none;
  transition: border-color 150ms ease, background-color 150ms ease, transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .auswahl__link:hover { border-color: var(--moos); background: var(--salbei); }
  .auswahl__link:hover .auswahl__name { text-decoration: underline; text-underline-offset: .15em; }
}
.auswahl__link:active { transform: scale(.98); }
.auswahl__buchstabe {
  flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--moos); color: var(--kalkweiss); font-size: 1.375rem; font-weight: 800;
}
.auswahl__text { display: flex; flex-direction: column; }
.auswahl__name { font-size: var(--s-2); font-weight: 800; line-height: 1.25; color: var(--moos); }
.auswahl__satz { font-size: var(--s-0); color: var(--neben); line-height: 1.45; }

/* Titel und Links erscheinen nach ca. 1 s, während das Logo noch fertig wird */
@media (prefers-reduced-motion: no-preference) {
  .auswahl__titel { animation: auftauchen 300ms var(--ease-out) .9s both; }
  .auswahl__liste > li { animation: auftauchen 300ms var(--ease-out) 1s both; }
  .auswahl__liste > li:nth-child(2) { animation-delay: 1.05s; }
  .auswahl__liste > li:nth-child(3) { animation-delay: 1.1s; }
  .auswahl__liste > li:nth-child(4) { animation-delay: 1.15s; }
}
@media (prefers-reduced-motion: reduce) {
  .auswahl__inhalt { animation: einblenden 250ms ease both !important; }
}
@keyframes auftauchen { from { opacity: 0; transform: translateY(8px); } }
@keyframes einblenden { from { opacity: 0; } }