/* ==========================================================================
   Das Praxisteam: die medizinischen Fachangestellten

   Steht unter dem Team-Slider der Aerztinnen und Aerzte. Bewusst anders
   gebaut als jener: der Slider zeigt eine Person nach der anderen, gross,
   mit Foto und Zitat. Hier stehen alle gleichzeitig, ruhig, ohne Foto.

   ⚠️ Die Aufgaben stehen EINMAL fuer alle, nicht auf den Karten. Das Team
   hat am 04.09.2026 widersprochen: alle machen alles, eine Zuordnung
   erfindet eine Rangfolge, die es in dieser Praxis nicht gibt.

   ⚠️ RUNDE 3 am 04.09.2026, Dirks Befund am Bild: die Namen standen nicht
   auf einer Hoehe. Ursache war align-items:center. Bei einer Karte mit
   zwei Textzeilen sass der Block mittig und der Name damit tiefer als bei
   einer Karte mit drei Zeilen. Jetzt ist alles oben buendig, und jede
   Zeile hat eine feste Mindesthoehe. Dadurch beginnt in allen drei Spalten
   der Name auf derselben Hoehe, die Bezeichnung auf derselben Hoehe und
   die Zeitangabe auf derselben Hoehe.
   ========================================================================== */

.pt-section {
  --pt-grund:      #EFE9DB;
  --pt-karte:      #FDFBF6;
  --pt-linie:      #DED5C1;
  --pt-ink:        #1C1B18;
  /* Gemessen: 6,2 zu 1 auf der Karte, 5,2 zu 1 auf der Flaeche. */
  --pt-gedaempft:  #5E5A50;
  --pt-marke-bg:   #E8EFE9;
  --pt-marke-ink:  #274A35;
  --pt-gold:       201, 173, 119;
  /* ⚠️ Der Schatten ist BRAUN, nicht grau. Grau enthaelt Blau, und Blau
     auf beigem Grund liest sich als Schmutz statt als Tiefe. */
  --pt-schatten:   72, 58, 34;

  /* Eine Zeile Bezeichnung und eine Zeile Zeitangabe sind 13px bei 1.4,
     also 18.2 Punkte. Zwei Zeilen sind 36.4. Beide Felder halten diese
     zwei Zeilen immer frei, auch wenn nur eine gebraucht wird. Nur so
     fluchten die Zeilen ueber alle Karten hinweg. */
  --pt-zeile2:     36.4px;

  background: var(--pt-grund);
  padding: 74px 0 82px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
}

.pt-head { text-align: center; margin-bottom: 30px; padding: 0 24px; }

/* Der Untertitel bekommt 760 statt der ueblichen 600 Punkte: bei 600 ergab
   der Satz drei Zeilen, bei 760 sind es zwei. */
.pt-head .section-sub { max-width: 760px; margin-left: auto; margin-right: auto; }

.pt-wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* --------------------------------------------------------------------------
   Was alle machen. Der Blickfang der Sektion, bewusst ohne eigene Karte:
   acht Karten stehen darunter, eine neunte daneben wuerde mit ihnen
   konkurrieren statt sie anzufuehren.
   -------------------------------------------------------------------------- */
.pt-gemeinsam { max-width: 880px; margin: 6px auto 56px; text-align: center; }

.pt-gemeinsam-satz {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: clamp(26px, 2.9vw, 35px);
  font-weight: 400; line-height: 1.22;
  color: var(--pt-ink); margin: 0 0 11px;
}

.pt-gemeinsam-text {
  font-size: 16px; line-height: 1.55;
  color: var(--pt-gedaempft); margin: 0 0 24px;
}

/* Gemessen: #274A35 auf #E8EFE9 ergibt 8,0 zu 1. */
.pt-marken {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 9px;
}

.pt-marken li {
  font-size: 14px; font-weight: 500; line-height: 1.35;
  color: var(--pt-marke-ink); background: var(--pt-marke-bg);
  border: 1px solid rgba(39, 74, 53, 0.13);
  border-radius: 999px; padding: 8px 16px;
  box-shadow: 0 1px 2px rgba(var(--pt-schatten), 0.05);
}

/* --------------------------------------------------------------------------
   Der Standort als Gliederung
   -------------------------------------------------------------------------- */
.pt-haus + .pt-haus { margin-top: 48px; }

.pt-haus-kopf {
  display: flex; align-items: baseline; gap: 16px; margin: 0 0 22px;
}

.pt-haus-ort {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: clamp(23px, 2.3vw, 29px);
  font-weight: 400; line-height: 1.2;
  color: var(--pt-ink); margin: 0; white-space: nowrap;
}

.pt-haus-adresse { font-size: 14px; color: var(--pt-gedaempft); white-space: nowrap; }

/* Die Linie laeuft nach rechts aus, statt als gleichmaessiger Strich an den
   Rand zu stossen: sie fuehrt vom Ortsnamen weg, statt eine Kastenkante zu
   behaupten, die es nicht gibt. */
.pt-haus-linie {
  flex: 1 1 auto; height: 1px;
  background: linear-gradient(to right,
    var(--pt-linie) 0%, var(--pt-linie) 52%, rgba(222, 213, 193, 0) 100%);
  transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   Die Karten
   -------------------------------------------------------------------------- */
.pt-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  /* Drei Spalten: Soemmerda ergibt 3 und 2, Koelleda genau eine volle Reihe.
     Bei vier stuende die fuenfte Karte allein und saehe nach Rest aus. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 15px;
}

.pt-karte { display: flex; }

/* Die ganze Karte ist der Knopf. Ein Knopf statt eines Links, weil kein
   Ziel angesteuert wird, sondern ein Dialog aufgeht. */
.pt-knopf {
  position: relative;
  flex: 1 1 auto;
  /* ⚠️ Oben buendig, NICHT center. Das war der Grund fuer die
     unterschiedlichen Namenshoehen im Bild vom 04.09.2026. */
  display: flex; align-items: flex-start; gap: 15px;
  width: 100%;
  min-height: 138px;
  margin: 0;
  padding: 16px 18px 16px 16px;
  text-align: left;
  font: inherit; color: inherit;
  background: var(--pt-karte);
  border: 1px solid var(--pt-linie);
  border-radius: 14px;
  cursor: pointer;
  /* Drei Schichten. Eine einzelne weite Schicht sieht aus wie ein Fleck
     unter der Karte; erst der enge Kontaktschatten laesst sie aufliegen. */
  box-shadow:
    0 1px 1px  rgba(var(--pt-schatten), 0.045),
    0 3px 8px  rgba(var(--pt-schatten), 0.050),
    0 8px 20px rgba(var(--pt-schatten), 0.035);
  transition:
    border-color 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform    260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow   260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Die Initialen

   ⚠️ Auf Dirks Ansage vom 04.09.2026 genau wie die Platzhalter der Aerzte
   im Mega-Menue gebaut, nicht mehr als eigene Form. Deren drei Merkmale:
   ein WEISSER Aussenring, ein Schlagschatten nach unten, und der Goldring
   liegt INNEN im Kreis, nicht auf seiner Kante. Vorher lag der Goldring
   aussen als Rand und der weisse Ring fehlte ganz, dadurch sassen die
   Kreise flach auf der Karte statt darauf zu liegen.

   Der Innenring haelt das Groessenverhaeltnis der SVG-Vorlage: dort ist
   der Kreis r=62 in einer 200er Flaeche, also 62 Prozent des Radius.
   -------------------------------------------------------------------------- */
.pt-ini {
  position: relative;
  flex: 0 0 auto;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2E5040 0%, #1A2F22 100%);
  color: #F8F5EE;
  font-family: 'Fraunces', Georgia, serif;
  /* ⚠️ NICHT der Anzeigengrad opsz 144. Dessen Haarstriche verschwinden
     bei dieser Groesse auf dunklem Grund, "KH" und "JE" waren im ersten
     Bild kaum zu entziffern. Der Kontrast war nie das Problem, die
     Strichstaerke war es. */
  font-variation-settings: "opsz" 24, "SOFT" 100;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.03em;
  display: grid; place-items: center;
  box-shadow:
    0 8px 20px -10px rgba(28, 49, 37, 0.5),
    0 0 0 3px rgba(255, 255, 255, 0.6);
  transition: box-shadow 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pt-ini::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--pt-gold), 0.5);
  transition: border-color 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pt-text { min-width: 0; flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   Die drei Zeilen

   Jede haelt ihre Hoehe frei, auch wenn sie sie nicht braucht. Nur so
   beginnt in allen drei Spalten dieselbe Zeile auf derselben Hoehe. Ohne
   das rutscht die Zeitangabe einer Karte mit einzeiliger Bezeichnung um
   18 Punkte nach oben, und Dirk sieht im Bild einen Versatz.
   -------------------------------------------------------------------------- */
.pt-name {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: 19px; font-weight: 500;
  line-height: 1.25;
  /* Genau eine Zeile. Alle acht Namen passen einzeilig; sollte je einer
     laenger werden, wird er gekuerzt statt die Reihe zu verschieben. */
  height: 24px;
  overflow: hidden;
  color: var(--pt-ink);
  margin: 0 0 4px;
}

.pt-rolle {
  display: block;
  font-size: 13px; line-height: 1.4;
  color: var(--pt-gedaempft);
  min-height: var(--pt-zeile2);
  margin: 0;
}

.pt-jahre {
  display: block;
  font-size: 13px; line-height: 1.4;
  color: var(--pt-marke-ink);
  min-height: var(--pt-zeile2);
  margin: 2px 0 0;
}

/* Der Hinweis, dass es mehr zu lesen gibt. Absolut gesetzt, damit er die
   sorgfaeltig ausgerichteten Zeilen darueber nicht verschiebt. */
.pt-mehr {
  position: absolute;
  right: 16px; bottom: 13px;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--pt-marke-ink);
  opacity: 0.62;
  transition: opacity 260ms ease, transform 260ms ease;
}
.pt-mehr::after { content: " →"; }

/* --------------------------------------------------------------------------
   Beruehrung
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  /* ⚠️ .pt-liste steht mit im Selektor. Die Karte traegt auch .reveal, und
     .reveal.visible setzt selbst ein transform. Beide haetten sonst die
     Spezifitaet 0,2,0, dann entscheidet die Reihenfolge im Stylesheet, und
     personal.css laedt vor den reveal-Regeln: der Hover haette still
     verloren. Gemessen, nicht vermutet. */
  .pt-liste .pt-knopf:hover {
    border-color: #CFC4AC;
    transform: translateY(-4px);
    box-shadow:
      0 2px 3px   rgba(var(--pt-schatten), 0.055),
      0 8px 18px  rgba(var(--pt-schatten), 0.085),
      0 20px 42px rgba(var(--pt-schatten), 0.070);
  }
  .pt-liste .pt-knopf:hover .pt-ini {
    box-shadow:
      0 10px 24px -10px rgba(28, 49, 37, 0.62),
      0 0 0 3px rgba(255, 255, 255, 0.85);
  }
  .pt-liste .pt-knopf:hover .pt-ini::before { border-color: rgba(var(--pt-gold), 1); }
  .pt-liste .pt-knopf:hover .pt-mehr { opacity: 1; transform: translateX(2px); }
}

/* Die Tastatur bekommt denselben Zustand wie die Maus, plus einen echten
   Ring. Ohne den weiss niemand, wo er beim Durchtabben steht. */
.pt-knopf:focus-visible {
  outline: 3px solid var(--pt-marke-ink);
  outline-offset: 3px;
  border-color: #CFC4AC;
}

/* --------------------------------------------------------------------------
   Das Overlay
   -------------------------------------------------------------------------- */
/* ⚠️ Die Overlay-Regeln nennen .pt-ovl mit, obwohl das Overlay jetzt ganz
   unten vor </body> steht und keine Sektion es mehr umschliesst. Grund:
   am 04.09.2026 lag es versehentlich in <section class="hero">, und
   .hero p mit der Spezifitaet 0,1,1 schlug jede einfache Klasse. Der Name
   bekam 18 statt 25 Punkte, die Rolle 18 statt 14. Mit .pt-ovl davor sind
   es 0,2,0 und die Frage stellt sich auch dann nicht mehr, wenn das
   Overlay eines Tages wieder woanders landet. */

.pt-ovl {
  position: fixed; inset: 0; z-index: 9995;
  display: grid; place-items: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 240ms ease;
}
.pt-ovl.is-auf { opacity: 1; }
.pt-ovl[hidden] { display: none; }

.pt-ovl-grund {
  position: absolute; inset: 0;
  background: rgba(20, 32, 25, 0.55);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

.pt-ovl-karte {
  position: relative;
  width: min(560px, 100%);
  max-height: min(80vh, 640px);
  overflow-y: auto;
  background: #FDFBF6;
  border-radius: 18px;
  padding: 30px 32px 26px;
  box-shadow:
    0 4px 10px  rgba(20, 32, 25, 0.10),
    0 24px 60px rgba(20, 32, 25, 0.28);
  transform: translateY(12px) scale(0.98);
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pt-ovl.is-auf .pt-ovl-karte { transform: none; }
.pt-ovl-karte:focus { outline: none; }

.pt-ovl-zu {
  position: absolute; top: 14px; right: 14px;
  /* 44 Punkte, sonst ist der Knopf auf dem Handy nicht sicher zu treffen. */
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 26px; line-height: 1;
  color: var(--pt-gedaempft, #5E5A50);
  background: transparent; border: 0; border-radius: 50%;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.pt-ovl-zu:hover { background: #EFE9DB; color: #1C1B18; }
.pt-ovl-zu:focus-visible { outline: 3px solid #274A35; outline-offset: 2px; }

.pt-ovl-kopf {
  display: flex; align-items: center; gap: 16px;
  margin: 0 40px 20px 0;
}

.pt-ovl-ini {
  position: relative;
  flex: 0 0 auto;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2E5040 0%, #1A2F22 100%);
  color: #F8F5EE;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 24, "SOFT" 100;
  font-weight: 600; font-size: 21px; letter-spacing: 0.03em;
  display: grid; place-items: center;
  box-shadow:
    0 8px 20px -10px rgba(28, 49, 37, 0.5),
    0 0 0 3px rgba(255, 255, 255, 0.6);
}
.pt-ovl-ini::before {
  content: ""; position: absolute; inset: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(201, 173, 119, 0.5);
}

.pt-ovl .pt-ovl-name {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: 25px; font-weight: 500; line-height: 1.2;
  color: #1C1B18; margin: 0 0 4px;
}

.pt-ovl .pt-ovl-rolle {
  font-size: 14px; line-height: 1.45;
  color: #274A35; margin: 0;
}

.pt-ovl .pt-ovl-text p {
  font-size: 16px; line-height: 1.62;
  color: #3A362E; margin: 0 0 14px;
}
.pt-ovl .pt-ovl-text p:last-child { margin-bottom: 0; }

/* Der eigene Satz der Person. Er steht als Zitat, weil er einer ist: die
   Worte stammen aus dem Praxis-Chat und nicht von uns. */
.pt-ovl .pt-ovl-text .pt-zitat {
  margin: 18px 0 0;
  padding: 0 0 0 18px;
  border-left: 2px solid rgba(201, 173, 119, 0.7);
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: 21px; line-height: 1.35;
  color: #1C1B18;
}

.pt-ovl .pt-ovl-fuss {
  margin: 22px 0 0; padding-top: 16px;
  border-top: 1px solid #E6DFCF;
  font-size: 13px; line-height: 1.5;
  color: #5E5A50;
}

/* --------------------------------------------------------------------------
   Schmale Schirme. Nur die drei Hausbreiten. Kein display:none.
   -------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .pt-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .pt-section { padding: 58px 0 64px; }
  .pt-head { margin-bottom: 26px; }
  .pt-gemeinsam { margin-bottom: 40px; }
  .pt-haus + .pt-haus { margin-top: 38px; }
  .pt-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-ovl-karte { padding: 26px 22px 22px; }
  .pt-ovl-kopf { gap: 14px; }
  .pt-ovl-ini { width: 60px; height: 60px; font-size: 19px; }
  .pt-ovl-ini::before { inset: 11px; }
  .pt-ovl .pt-ovl-name { font-size: 22px; }
}

@media (max-width: 490px) {
  .pt-wrap { padding: 0 18px; }
  .pt-liste { grid-template-columns: minmax(0, 1fr); }
  /* Einspaltig steht jede Karte fuer sich. Eine gemeinsame Hoehe hat dann
     keinen Bezugspunkt mehr und erzeugt nur Leerraum, deshalb duerfen die
     beiden Textzeilen hier auf ihre wirkliche Hoehe zusammenfallen. */
  .pt-knopf { min-height: 0; padding: 16px 16px 15px; }
  .pt-rolle, .pt-jahre { min-height: 0; }
  .pt-mehr { position: static; display: block; margin-top: 10px; }
  .pt-haus-kopf { flex-wrap: wrap; gap: 4px 12px; }
  .pt-haus-linie { flex-basis: 100%; transform: none; margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .pt-knopf, .pt-ini, .pt-ini::before, .pt-mehr,
  .pt-ovl, .pt-ovl-karte { transition: none; }
  .pt-liste .pt-knopf:hover { transform: none; }
  .pt-ovl-karte { transform: none; }
}