/* D E R   A U F N A H M E P F A D   ( nur anmeldung.html )

   Fuenf Schritte plus die Ausnahme (Akut) als Kachelwand, in der Machart der Team-Kacheln auf
   konzept.html und der Schwerpunkt-Kacheln: gleicher Kachelton, gleicher
   Hover (weiss, 2px angehoben), gleicher Pfeil unten rechts. Die Werte
   stehen hier noch einmal und nicht als gemeinsame Klasse - der Aufbau der
   Kachel ist ein anderer (Ziffer, Titel, Fliesstext, Pfeil). WER HIER ETWAS
   AENDERT, sollte in css/team-kacheln.css nachsehen, ob es dort mitgeaendert
   werden muss. Eingefuehrt 08.09.2026.

   Das Raster bleibt im Textcontainer (.container-text): drei Spalten, zwei
   Reihen - dieselbe Staffel 3 / 2 / 1 wie bei den Team-Kacheln. Fuenf
   Spalten waren probiert und zu schmal: Kolumnen statt Kacheln. */

.aufnahmepfad {
   --kachel-blau: #e9f0fb;

   list-style: none;
   margin: 2.5rem 0 0;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px;
   width: 100%;
}

@media screen and (max-width: 900px) {
   .aufnahmepfad {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media screen and (max-width: 560px) {
   .aufnahmepfad {
      grid-template-columns: 1fr;
   }
}

/* D I E   K A C H E L */
.aufnahmepfad .schritt {
   display: flex;
   flex-direction: column;
   padding: 26px;
   background-color: var(--kachel-blau);
   transition: background-color var(--kachel-dauer) var(--kachel-kurve), transform var(--kachel-dauer) var(--kachel-kurve);
}

.aufnahmepfad .schritt:hover {
   background-color: #ffffff;
   transform: translateY(var(--kachel-hub));
}

/* Die Ziffer: Baskerville, Jade - Schmuck, nicht Information; die Schritte
   sind ohnehin in Leserichtung nummeriert. */
.aufnahmepfad .schritt__nr {
   font-family: var(--baskerville-font), serif;
   font-size: 2.75rem;
   line-height: 1;
   color: var(--jadegruen);
   margin-bottom: 1.25rem;
}

/* Der Titel reserviert zwei Zeilen, damit die Copy in allen Kacheln einer
   Reihe auf derselben Hoehe beginnt ("Kostenaufklaerung und Termin" braucht
   zwei, "Kostenzusage" eine). min-height, nicht height: waechst mit. */
.container-text .aufnahmepfad .schritt__titel {
   font-size: 1.3rem;
   line-height: 1.25;
   min-height: 2.5em;
   padding: 0 0 0.75rem;
   color: var(--darkblue);
   -webkit-hyphens: none;
   hyphens: none;
}

.aufnahmepfad .schritt__text {
   font-size: 0.95rem;
   line-height: 1.6;
   color: var(--darkgrey);
   padding-bottom: 1.5rem;
}

/* Der Pfeil unten rechts, ueber margin-top: auto nach unten gedrueckt. */
.aufnahmepfad .schritt__pfeil {
   margin-top: auto;
   align-self: flex-end;
   font-size: 1.1rem;
   line-height: 1;
   color: var(--darkblue);
   transition: color var(--kachel-dauer) var(--kachel-kurve), transform var(--kachel-dauer) var(--kachel-kurve);
}

.aufnahmepfad .schritt:hover .schritt__pfeil {
   color: var(--jadegruen);
   transform: translateX(6px);
}

@media (prefers-reduced-motion: reduce) {
   .aufnahmepfad .schritt,
   .aufnahmepfad .schritt__pfeil {
      transition: background-color 0.2s ease, color 0.2s ease;
   }
   .aufnahmepfad .schritt:hover,
   .aufnahmepfad .schritt:hover .schritt__pfeil {
      transform: none;
   }
}

/* Einspaltig braucht der Titel keine Reserve mehr. */
@media screen and (max-width: 560px) {
   .container-text .aufnahmepfad .schritt__titel {
      min-height: 0;
   }
}

/* Die sechste Kachel ist kein Schritt, sondern die Ausnahme (Akutaufnahme).
   Sie fuellt das Raster, setzt sich aber ab: weiss mit Kachelblau als Rand
   statt der blauen Flaeche, ohne Ziffer. Der Hover bleibt derselbe. */
.aufnahmepfad .schritt--akut {
   background-color: #ffffff;
   border: 1px solid var(--kachel-blau);
   padding: 25px;   /* 26px minus 1px Rand, damit Text und Ziffernzeile buendig bleiben */
}