/* ============================================================
   r12-start.css, Gestaltungsrunde 12.10.2026, Paket „Startseite physiopark.berlin“
   Aufgaben aus der Anpassungsliste des Teams: S01 Weiterscrollen sichtbar, S02 Praxenkarten symmetrisch, S03 Pflege-Überschrift dreizeilig, S05 Karriere-Abschnitt.

   Eingebunden von quelle/bauen.py (R12_PAKETE) auf allen Seiten von physiopark.berlin und physiopark-zeitlos.de, nach allen
   bestehenden Dateien, mit ?v=-Stempel (STEMPEL_DATEIEN).
   Nur dieses Paket schreibt in diese Datei. Gemeinsame Bauteile
   (bauteile.css/js, bewegung.css/js, seiten.css) zuerst wiederverwenden;
   Mockup Brandkit 15.png ist verbindlich. Skripte nie inline (CSP),
   prefers-reduced-motion respektieren.
   Leer ausgeliefert vom Strukturpaket A, 12.10.2026.

   Alle Klassen hier (startwahl-weiter, start-*, stelle-foto*) gibt es nur
   in quelle/inhalte/00-start.html und in bauen.py startwahl_bauen() und
   stellen_start(). Nichts hier wirkt auf andere Seiten.

     ST1  Startbildschirm: Türen flacher, Hinweis „Mehr über PHYSIOPARK“ (S01)
     ST2  Praxenkarten im gemeinsamen Raster (S02)
     ST3  Fotokarten Leistungen, Fortbildungen, Ärzte (G13, G14)
     ST4  Pflege: drei Zeilen, Faktenkarte in den Kartenschriften (S03)
     ST5  Karriere: Fotopaar, Preise, Stellen als Foto-Slider (S05)
   ============================================================ */

/* ============================================================
   ST1  STARTBILDSCHIRM (S01)
   Vorher füllten die drei Türen den ganzen ersten Bildschirm bis zur
   Unterkante. Das las sich wie eine Wahl, die man treffen muss. Jetzt
   enden sie vor der Unterkante, darunter steht ein Hinweis mit Pfeilkreis
   (Mockup-Pfeilkreis, gedreht) und der Anschnitt des nächsten Abschnitts.
   Karriere bleibt im ersten Bildschirm (Projektentscheidung 12.10.2026).
   ============================================================ */
.seite-hero.startwahl {
  min-height: 0;
  padding-bottom: clamp(18px, 2vw, 28px);
}
.startwahl-tueren {
  flex: none;
  min-height: 0;
  height: clamp(250px, calc(100svh - 620px), 420px);
}
.startwahl-weiter {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(14px, 1.6vw, 22px);
  padding: 4px 12px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gruen-link);
  border-radius: var(--bogen-feld);
  transition: opacity var(--zeit-wechsel) linear;
}
.startwahl-weiter-kreis {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--gruen);
  background: rgba(255, 255, 255, .8);
  color: var(--gruen-dunkel);
  transition: background var(--zeit-tipp) linear, border-color var(--zeit-tipp) linear;
}
.startwahl-weiter-kreis svg { width: 20px; height: 20px; }
.startwahl-weiter:hover .startwahl-weiter-kreis { background: rgba(145, 199, 61, .16); border-color: var(--gruen-dunkel); }
.startwahl-weiter:focus-visible { outline: 3px solid var(--gruen-dunkel); outline-offset: 4px; }
/* Sanftes Wippen des Pfeils, dreimal, dann Ruhe. Nicht endlos: ein
   ständig zappelnder Pfeil zieht den Blick von den Türen ab. */
@media (prefers-reduced-motion: no-preference) {
  .startwahl-weiter-kreis svg { animation: start-wippen 1.6s cubic-bezier(.45, 0, .55, 1) .8s 3; }
}
@keyframes start-wippen {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
/* Wer schon scrollt, braucht den Hinweis nicht mehr (r12-start.js). */
.start-gescrollt .startwahl-weiter { opacity: 0; pointer-events: none; }

/* Niedrige Laptop-Bildschirme (1280 x 720): der Kopf ist dort schon enger
   (seiten.css V4b), die Türen behalten mindestens 230 px. */
@media (min-width: 761px) and (max-height: 860px) {
  .startwahl-tueren { height: clamp(230px, calc(100svh - 470px), 360px); }
  .startwahl-weiter { margin-top: 12px; }
}

/* Anschnitt: der Familienabschnitt rückt etwas näher an die Türen, damit
   seine Überschrift im ersten Bildschirm anfängt. */
.start-familie { padding-top: clamp(40px, 3.6vw, 56px); }

@media (max-width: 760px) {
  .seite-hero.startwahl { padding-bottom: 6px; }
  .startwahl-tueren {
    height: auto;
    grid-auto-rows: clamp(96px, 13.4svh, 124px);
    gap: 10px;
  }
  .startwahl-weiter { margin-top: 10px; gap: 10px; padding: 6px 10px; }
  .startwahl-weiter-kreis { width: 36px; height: 36px; }
  .startwahl-weiter-kreis svg { width: 17px; height: 17px; }
  .start-familie { padding-top: 34px; }
}
/* Kleine Handys (360 x 640): seiten.css nimmt dort schon die Pille weg */
@media (max-width: 760px) and (max-height: 720px) {
  .startwahl-tueren { grid-auto-rows: clamp(88px, 14svh, 104px); gap: 8px; }
  .startwahl-weiter { margin-top: 6px; }
}

/* ============================================================
   ST2  PRAXENKARTEN (S02)
   Beide Karten teilen ein Raster aus fünf Zeilen (Bild, Anschrift, Satz,
   Telefon, Knopf). Mit Subgrid richtet sich jede Zeile nach der höheren
   Karte, Telefon und Knopf stehen in beiden Karten auf derselben Höhe,
   am Rechner wie in der Wischreihe am Handy. Ohne Subgrid schiebt der
   Satz Telefon und Knopf nach unten (flex).
   ============================================================ */
.start-praxen .saeule-bild { position: relative; aspect-ratio: 16 / 10; }
.start-praxen .saeule-bild img { object-position: 50% 30%; }
.start-praxis-ort {
  position: absolute;
  top: 16px;
  left: 16px;
  margin: 0;
  box-shadow: var(--schatten-1);
}
.start-praxen .saeule-text { display: flex; flex-direction: column; }
.start-praxen .saeule-text > p:not([class]) { flex: 1 1 auto; margin: 0; }
.start-praxen .saeule-text h3 { font-size: 1.2rem; }
.start-praxen .fall-schritt { margin-top: var(--m5) !important; margin-bottom: 0; }
.start-praxen .link-zeile { margin: var(--m5) 0 0; }
.start-praxen .link-zeile .btn { width: 100%; justify-content: center; }

@supports (grid-template-rows: subgrid) {
  .saeulen.start-praxen,
  .saeulen.wisch.start-praxen { grid-template-rows: repeat(5, auto); row-gap: 0; }
  .start-praxen > .saeule { grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 0; }
  .start-praxen .saeule-bild { grid-row: 1; }
  .start-praxen .saeule-text { grid-row: 2 / span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; }
  .start-praxen .saeule-text h3 { margin-bottom: var(--m3); }
  .start-praxen .fall-schritt { align-self: end; }
}
@media (max-width: 760px) {
  .saeulen.wisch.start-praxen .saeule-bild { aspect-ratio: 4 / 3; }
  .saeulen.wisch.start-praxen .saeule-text { padding: var(--m5); }
  .saeulen.wisch.start-praxen .fall-schritt { margin-block: var(--m4) 0; }
}

/* ============================================================
   ST3  FOTOKARTEN (G13, G14)
   Leistungen und die beiden Wege Fortbildungen und Ärzte: gleiche Karte
   (.weg-karte) mit Foto oben, Überschrift, Satz, Verweis. Vier Zeilen im
   Subgrid, damit Überschriften, Sätze und Verweise in einer Reihe auf
   gleicher Höhe beginnen. Am Handy Wischreihe (bauteile.css K6).
   ============================================================ */
.start-karten .weg-karte { padding: 0; gap: 0; }
.start-karte-bild {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--karte-hell);
}
.start-karte-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transition: transform 900ms var(--kurve-aus);
}
/* Manuelle Therapie: Das Motiv (Hände am Fuss) steht unten im Hochformat;
   mittig blieb nur das grüne Polohemd (Handyprüfung 12.10.2026). */
.start-karte-bild img[src$="/start-karte-manuelle-therapie.webp"] { object-position: 50% 85%; }
.start-karten .weg-karte h3 { margin: var(--m5) var(--m6) var(--m2); }
.start-karten .weg-karte p { margin: 0 var(--m6); }
.start-karten .weg-karte .weiter { margin: var(--m5) var(--m6) var(--m6); align-self: start; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .start-karten .weg-karte:hover .start-karte-bild img { transform: scale(1.05); }
}

@media (min-width: 761px) {
  .start-leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .start-wege { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .start-wege .start-karte-bild { aspect-ratio: 16 / 9; }
}
@media (min-width: 761px) and (max-width: 1099px) {
  .start-leistungen .start-karte-bild { aspect-ratio: 16 / 9; }
}
@media (min-width: 1100px) {
  .start-leistungen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@supports (grid-template-rows: subgrid) {
  .start-karten { grid-auto-rows: auto; row-gap: 0; }
  .start-karten > .weg-karte { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; }
  .start-karten .weg-karte p { flex: none; }
  /* Zweizeilig (761 bis 1099 px): Abstand zwischen den Kartenreihen */
  .start-karten > .weg-karte { margin-bottom: var(--m6); }
  @media (max-width: 760px) {
    .wisch.start-karten { grid-template-rows: repeat(4, auto); }
    .start-karten > .weg-karte { margin-bottom: 0; }
  }
  @media (min-width: 1100px) {
    .start-leistungen > .weg-karte { margin-bottom: 0; }
  }
  .start-wege > .weg-karte { margin-bottom: 0; }
}
.start-mitte { text-align: center; }

/* Fortbildungen und Ärzte gehören zum Pflegeabschnitt darüber: gleicher
   Grund, kein zweiter Abstand. */
.start-wege-abschnitt { padding-top: 0; }

@media (max-width: 760px) {
  .start-karten .weg-karte h3 { margin: var(--m4) var(--m5) var(--m2); }
  .start-karten .weg-karte p { margin: 0 var(--m5); font-size: .92rem; }
  .start-karten .weg-karte .weiter { margin: var(--m4) var(--m5) var(--m5); }
}

/* ============================================================
   ST4  PFLEGE (S03)
   Überschrift in drei festen Zeilen (Umbrüche im Inhalt), gleiche Größe und
   Schrift wie alle Abschnittsüberschriften. Die Faktenkarte stand in Lora;
   das Team las das als „andere Schriftart“. Jetzt Montserrat und Inter wie
   die übrigen Karten der Startseite.
   ============================================================ */
.start-pflege .erwartet-text h2 { text-wrap: balance; }
/* Schrift der Faktenkarte: seit der Handyprüfung 12.10.2026 an einer
   Stelle für ganz physiopark.berlin (r12-berlin.css RB10), damit Pflege
   und Fortbildungen dieselbe Karte zeigen. */
@media (min-width: 961px) {
  .start-pflege .erwartet-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}

/* ============================================================
   ST5  KARRIERE (S05)
   Oben Text mit Pille und Preisen neben dem versetzten Fotopaar (Mockup
   „Das erwartet dich“, bauteile.css K5), darunter die offenen Stellen als
   Fotokarten im Slider mit Pfeilkreisen und Fortschrittslinie (Mockup
   „Deine Vorteile“, bauteile.js P3, main.js I), ein Knopf zur Karriere.
   ============================================================ */
.start-karriere-oben {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--m16);
  align-items: center;
  margin-bottom: var(--m16);
}
.start-karriere-pille { margin-bottom: var(--m5); background: #fff; }
.start-karriere-text > p:not([class]) { margin-top: var(--m5); max-width: 34em; font-size: var(--grad-m); }
.start-karriere-preise-titel {
  margin-top: var(--m8);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gruen-link);
}
.start-karriere-preise { margin-top: var(--m3); }
/* Das Award-Foto liegt nur auf der unteren rechten Ecke des Teamfotos,
   die Gesichter bleiben frei. */
.start-karriere-bilder { padding-bottom: 4px; }
.erwartet-bilder.start-karriere-bilder .bild-1 {
  width: 92%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 30%;
}
.erwartet-bilder.start-karriere-bilder .bild-2 {
  width: 30%;
  margin: -17% 0 0 auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* Bild 2 liegt am rechten Rand der Spalte. Der schräge Einschub aus
   bewegung.css (nach rechts unten) machte die Seite bei 961 px bis zum
   Einblenden 965 px breit (gemessen beim Zusammenführen 12.10.2026).
   Hier wie am Handy nur senkrecht. */
.js.bw .start-karriere-bilder[data-bw="paar"]:not(.bw-da) .bild-2 { translate: 0 var(--bw-weg); }
/* Pille „Wir stellen ein“: der Punkt pulsiert leise wie ein Live-Hinweis */
@media (prefers-reduced-motion: no-preference) {
  .start-karriere-pille::before { animation: start-puls 2.4s ease-out infinite; }
}
@keyframes start-puls {
  0% { box-shadow: 0 0 0 0 rgba(248, 130, 70, .55); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(248, 130, 70, 0); }
}

.start-stellen-kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--m6);
  margin-bottom: var(--m6);
}
.start-stellen-kopf h3 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--grad-h3);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--tinte);
}
html:not(.js) .start-stellen-kopf .slider-pfeile { display: none; }

.stelle-foto {
  position: relative;
  isolation: isolate;
  flex: 0 0 max(250px, calc((100% - 3 * var(--m6)) / 3.3));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 18px;
  color: #fff;
  text-decoration: none;
  background: var(--gruen-tief);
  box-shadow: var(--schatten-2);
}
.stelle-foto img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.stelle-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(36, 57, 10, 0) 42%, rgba(36, 57, 10, .62) 70%, rgba(36, 57, 10, .92) 100%);
}
.stelle-foto-ort {
  position: absolute;
  top: 14px;
  left: 14px;
  margin: 0;
  max-width: calc(100% - 28px);
  white-space: normal;
  line-height: 1.3;
  border-radius: 14px;
}
/* Die Überschrift nutzt die volle Breite, der Pfeilkreis steht neben der
   Zeile mit dem Umfang. Sonst brach „Physiotherapie“ am Handy mitten im
   Wort (gemessen bei 390 px). */
.stelle-foto-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--m5);
}
.stelle-foto-titel {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(.92rem, 4.2vw, 1.12rem);
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: uppercase;
  hyphens: manual;
  overflow-wrap: break-word;
}
.stelle-foto-umfang {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-right: 56px;
  font-family: var(--font-sub);
  font-style: italic;
  font-size: 1rem;
  color: var(--gruen-leuchte);
}
.stelle-foto-pfeil {
  position: absolute;
  right: 18px;
  bottom: var(--m5);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--orange-aktion);
  color: #fff;
  transition: transform .3s ease, background .3s ease;
}
.stelle-foto-pfeil svg { width: 20px; height: 20px; }
.stelle-foto:hover .stelle-foto-pfeil { transform: translateX(4px); background: var(--orange-tief); }
.stelle-foto:focus-visible { outline: 3px solid var(--orange-aktion); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .stelle-foto:hover img { transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
  .stelle-foto img, .stelle-foto-pfeil { transition: none; }
  .stelle-foto:hover .stelle-foto-pfeil { transform: none; }
}

@media (max-width: 960px) {
  .start-karriere-oben { grid-template-columns: 1fr; gap: var(--m10); margin-bottom: var(--m12); }
  .start-karriere-bilder { max-width: 560px; }
}
@media (max-width: 760px) {
  .start-karriere-oben { gap: var(--m8); margin-bottom: var(--m10); }
  .start-karriere-text > p:not([class]) { font-size: 1rem; }
  .start-karriere-preise-titel { margin-top: var(--m6); }
  .erwartet-bilder.start-karriere-bilder .bild-1 { width: 94%; }
  .erwartet-bilder.start-karriere-bilder .bild-2 { width: 32%; margin-top: -19%; border-width: 4px; }
  .start-stellen-kopf .pfeil-btn { width: 44px; height: 44px; }
  .start-stellen .stelle-foto { flex-basis: min(76%, 320px); }
  /* Die Reihe läuft bis an den Fensterrand, der Anschnitt zeigt: es geht weiter */
  .karten-slider.start-stellen {
    margin-inline: calc(-1 * var(--m6));
    padding-inline: var(--m6);
    scroll-padding-inline: var(--m6);
    border-radius: 0;
  }
}

/* Kontrast (Abnahme 12.10.2026): Die helle Zeile der H1 (#66941C, 3,54:1)
   ist nur ab 24 px zulässig. Am Handy steht die Weiche bei 1,3 bis 1,45rem,
   dort deshalb das dunkle Grün. */
@media (max-width: 760px) {
  .seite-hero.startwahl .headline .zeile-gruen { color: var(--gruen-dunkel); }
}