/* MEDOS photo refresh — real practice imagery + dependency-free 360° viewer */
.medos-photo-refresh .home-practice-photo {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 28px;
  background: #eef6f9;
  box-shadow: 0 20px 48px rgba(34, 67, 87, .12);
  margin: 0;
}
.medos-photo-refresh .home-practice-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* SCRIM, UND ER TRAEGT JETZT DORT, WO DIE SCHRIFT STEHT.
     Vorher: transparent bis 55%, dann linear auf .52 am unteren Rand. Das
     Ergebnis war gemessen (Lauf 34701997948, zwei Viewports, Pixel statt
     Rechnung): an der OBERSTEN Textzeile lag die Deckkraft bei etwa .15 und
     .33 - die Schrift sitzt naemlich bei 69% (mobil) bzw. 83% (Desktop) der
     Kastenhoehe, also nur knapp unter dem Punkt, an dem der Verlauf erst
     anfing. Weisse Schrift kam dort auf 1,44:1 bzw. 2,02:1.
     DIE SCHWAECHE SASS OBEN, NICHT UNTEN: eine staerkere Abdunklung am
     unteren Rand haette die Pixel, die durchfielen, kaum getroffen.

     Jetzt erreicht der Verlauf seine Deckkraft VOR der Textzone und haelt sie
     bis zum Rand. Gerechnet gegen den schlechtesten denkbaren Untergrund,
     naemlich ein WEISSES Foto - das ist die Grenze, die kein Bildwechsel
     unterlaufen kann:
       Deckkraft .635 ist die Schwelle fuer 4,5:1 gegen weisse Schrift
       .74 ergibt ueber Weiss #50616c und 6,43:1 - Marge, keine Punktlandung
     Bei .74 ab 60% Hoehe liegt die Deckkraft an der mobilen Textoberkante
     (68,8%) bei .758 und auf Desktop (83,3%) bei .781.
     Der Vollstand beginnt bei 60% und nicht bei 66%, weil die 68,8% aus der
     Messung REKONSTRUIERT sind; sitzt die Schrift ein Stueck hoeher als
     gerechnet, traegt der Scrim trotzdem. */
  background: linear-gradient(180deg,
    rgba(18, 42, 56, 0) 35%,
    rgba(18, 42, 56, .74) 60%,
    rgba(18, 42, 56, .82) 100%);
}
.medos-photo-refresh .home-practice-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  object-position: 52% 50%;
}
.medos-photo-refresh .home-practice-photo figcaption {
  position: absolute;
  z-index: 2;
  left: 26px;
  right: 26px;
  bottom: 24px;
  color: #fff;
  display: grid;
  gap: 4px;
}
.medos-photo-refresh .home-practice-photo figcaption strong { font-size: clamp(1.05rem, 2vw, 1.3rem); }
/* Hier stand "opacity: .9" auf der zweiten Textzeile. Entfernt, und zwar
   nicht als Aufraeumen: die Zeile schwaecht weisse Schrift ab und kostet
   genau die Marge, die der Scrim darueber bezahlt. Gemessen war die
   span-Zeile deshalb die schlechtere der beiden - auf Desktop lagen 100% der
   Flaeche unter 4,5:1, und selbst ihr dunkelstes Pixel kam nur auf 4,67:1.
   Eine Deckkraft unter 1 auf Text ist kein Gestaltungsmittel, sondern ein
   Abzug vom Kontrast, den man an anderer Stelle bezahlt hat. */

.medos-photo-refresh .home-general-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 34px 0 54px;
}
.medos-photo-refresh .home-general-facts article {
  min-width: 0;
  padding: 24px;
  border: 1px solid rgba(65, 90, 115, .14);
  border-radius: 18px;
  background: rgba(255, 255, 255, .88);
}
.medos-photo-refresh .home-general-facts article > span {
  display: block;
  /* repoops#146: war #007fb7 und lag mit 4.44:1 knapp unter den geforderten
     4.5:1 - auf dem halbtransparenten Weiss der Kachel (#feffff) gemessen,
     nicht gegen reines Weiss angenommen. Das Token aus style.css liefert
     5.13:1 an derselben Stelle.

     Die Regel kam mit ab19d8c herein, also NACH der Baseline vom 10.09. und
     unabhaengig von repoops#142/#145. Sie ist die Fundstelle, die der Merksatz
     aus repoops#145 beschreibt: sie heisst nicht wie das, was dort repariert
     wurde, und sie steht in einer anderen Datei. */
  color: var(--medos-blue-text);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .08em;
  margin-bottom: 12px;
}
.medos-photo-refresh .home-general-facts strong { display: block; color: #263f52; font-size: 1.05rem; margin-bottom: 8px; }
.medos-photo-refresh .home-general-facts p { margin: 0; color: #5b6f7f; line-height: 1.6; }

.medos-photo-refresh .home-practice-link-layout { align-items: stretch; }
.medos-photo-refresh .home-practice-tour-preview {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(65, 90, 115, .12);
  background: #fff;
  box-shadow: 0 14px 34px rgba(35, 60, 76, .09);
}
.medos-photo-refresh .home-practice-tour-preview img {
  width: 100%;
  height: min(430px, 34vw);
  min-height: 320px;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
}
.medos-photo-refresh .home-practice-tour-preview figcaption {
  padding: 13px 16px 15px;
  color: #647786;
  font-size: .9rem;
  line-height: 1.5;
}

.medos-photo-refresh .home-team-photo { overflow: hidden; }
.medos-photo-refresh .home-team-photo img,
.medos-photo-refresh .practice-v2-team-photo img { object-position: 50% 50%; }
.medos-photo-refresh .home-team-photo figcaption {
  padding: 11px 2px 0;
  color: #647786;
  font-size: .9rem;
}

.medos-panorama {
  position: relative;
  min-height: 360px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 20px;
  background: #dfe8ec;
  box-shadow: 0 16px 40px rgba(35, 60, 76, .10);
  isolation: isolate;
}
.medos-panorama-large {
  min-height: 520px;
  aspect-ratio: 16 / 8.5;
  margin-inline: clamp(8px, 1.2vw, 18px);
}
.medos-panorama canvas,
.medos-panorama-fallback {
  width: 100%;
  height: 100%;
  display: block;
}
.medos-panorama canvas {
  position: absolute;
  inset: 0;
  cursor: grab;
  touch-action: pan-y;
  outline: none;
}
.medos-panorama canvas:active { cursor: grabbing; }
.medos-panorama.is-exploring canvas { touch-action: none; }
.medos-panorama .panorama-explore,
.medos-panorama .panorama-exit {
  position: absolute;
  z-index: 6;
  min-height: 44px;
  padding: 12px 18px;
  border: 1px solid #fff;
  border-radius: 12px;
  background: #fff;
  color: #172b38;
  font: inherit;
  font-size: .875rem;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 4px 20px #172b3830;
}
.medos-panorama .panorama-explore {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.medos-panorama .panorama-exit { top: 12px; right: 12px; }
.medos-panorama .panorama-explore[hidden],
.medos-panorama .panorama-exit[hidden] { display: none; }
.medos-panorama.is-touch-viewer .medos-panorama-topline span:last-child { display: none; }
.medos-panorama.is-touch-viewer:not(.is-exploring) canvas { cursor: auto; }
.medos-panorama .panorama-explore:focus-visible,
.medos-panorama .panorama-exit:focus-visible { outline: 3px solid #00769e; outline-offset: 3px; }
.medos-panorama canvas:focus-visible { box-shadow: inset 0 0 0 4px rgba(0, 126, 183, .95); }
.medos-panorama-fallback { object-fit: cover; }
.medos-panorama.is-ready .medos-panorama-fallback { visibility: hidden; }
.medos-panorama-topline {
  position: absolute;
  z-index: 4;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}
.medos-panorama-topline span:first-child {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  /* DECKEND, nicht rgba(0,126,183,.94). Zwei Gruende, und der zweite ist der
     eigentliche: (1) durchscheinend lag das Abzeichen ueber einem HELLEN
     Bildbereich bei 4,08:1 - weiss auf der zusammengesetzten Flaeche #0f86bb -
     und damit unter der Anforderung. Die Schrift ist .78rem = 12.48px bei
     font-weight 800, also KEINE Grossschrift (die beginnt bei 18.66px fett):
     4,5:1 gilt voll. Ueber mittlerem Grau waren es 4,51 - eine Punktlandung,
     die von der Helligkeit des Fotos abhing.
     (2) Unter der Transparenz liegt ein BILD, dessen Farbe an dieser Stelle
     kein Stylesheet kennt. Deshalb konnte axe hier nicht entscheiden und hat
     den Knoten in die incomplete-Liste gelegt - das war der EINZIGE der sieben
     unentscheidbaren Gestalten, bei dem "unentscheidbar" wirklich
     unentscheidbar hiess. Eine deckende Flaeche macht die Stelle messbar UND
     behebt den Befund; sie hoert also auf, eine Rechnung auf Zuruf zu sein.
     #00769e (= --medos-blue-text) ergibt 5,14:1. NICHT #007eb3, die eigene
     Farbe deckend: das waeren 4,53:1 und damit 0,03 ueber der Anforderung -
     eine Punktlandung ist keine Loesung. Der Unterschied zu .94 ist optisch
     nicht zu sehen, der zu einer festen Zahl schon.
     Das Etikett daneben (span:last-child, .68) bleibt absichtlich unberuehrt:
     es besteht im schlechtesten Fall mit 4,68:1. Gemessen wurde nur EINER der
     beiden Spans - axe kuerzt die incomplete-Liste auf einen Knoten je Regel -
     also ist hier der geaendert, der DURCHFAELLT, nicht der, der gemeldet
     wurde. */
  background: #00769e;
  backdrop-filter: blur(7px);
}
.medos-panorama-topline span:last-child {
  align-self: center;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(31, 54, 69, .68);
  backdrop-filter: blur(8px);
}
.medos-panorama-switcher {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  max-width: calc(100% - 24px);
  padding: 5px;
  gap: 4px;
  border-radius: 999px;
  background: rgba(25, 48, 62, .82);
  backdrop-filter: blur(12px);
}
.medos-panorama-switcher button {
  appearance: none;
  border: 0;
  min-height: 44px;
  border-radius: 999px;
  padding: 9px 14px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.medos-panorama-switcher button:hover { background: rgba(255,255,255,.14); }
.medos-panorama-switcher button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px #007eb7;
}
.medos-panorama-switcher button[aria-pressed="true"] { background: #fff; color: #314b5e; }
.practice-panorama-section .practice-v2-heading { margin-bottom: 26px; }

@media (max-width: 900px) {
  .medos-photo-refresh .home-practice-photo img { min-height: 420px; }
  .medos-photo-refresh .home-general-facts { grid-template-columns: 1fr; gap: 12px; margin: 24px 0 38px; }
  .medos-photo-refresh .home-practice-tour-preview img { height: 360px; min-height: 0; }
  .medos-panorama,
  .medos-panorama-large { min-height: 390px; aspect-ratio: 4 / 3; border-radius: 18px; }
  .medos-panorama-large { margin-inline: 6px; }
}
@media (max-width: 560px) {
  .medos-photo-refresh .home-practice-photo { border-radius: 18px; }
  .medos-photo-refresh .home-practice-photo img { min-height: 340px; }
  .medos-photo-refresh .home-practice-photo figcaption { left: 18px; right: 18px; bottom: 18px; }
  .medos-photo-refresh .home-general-facts article { padding: 20px; }
  .medos-photo-refresh .home-practice-tour-preview img { height: 280px; }
  .medos-panorama,
  .medos-panorama-large { min-height: 330px; aspect-ratio: 1 / 1; }
  .medos-panorama-large { margin-inline: 2px; }
  .medos-panorama-topline { top: 12px; left: 12px; right: 12px; }
  .medos-panorama-topline span:last-child { display: none; }
  .medos-panorama-switcher { bottom: 12px; }
  .medos-panorama-switcher button { padding: 8px 10px; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .medos-panorama canvas { scroll-behavior: auto; }
}