/* ============================================================================
   Praxis Ragnitz: eigenes Auswahlmenue statt der Browser-Liste.

   Die eingebaute Liste des Browsers sieht auf jedem Geraet anders aus, laesst
   sich nicht gestalten und oeffnet dort, wo der Browser es will. Dieses Menue
   traegt die Farben der Praxis, hat lesbare Gruppentitel und oeffnet in die
   Richtung, in der Platz ist. Die Richtung entscheidet auswahl.js, hier steht
   nur das Aussehen.

   Namensraum: aw-  (Auswahl). Beruehrt keine bestehende Klasse.
   ============================================================================ */

.aw,
.aw-blatt,
.aw-schleier {
  --aw-wald: #2A4A38;          /* Gruppentitel und Auswahl, Praxisgruen */
  --aw-forst: #1C3125;         /* dunkler Rand bei Fokus */
  --aw-tinte: #1C2A22;
  --aw-still: #5A635C;
  --aw-weiss: #FFFFFF;
  --aw-creme: #F8F5EE;
  --aw-linie: rgba(26, 31, 27, 0.16);
  --aw-linie-fein: rgba(26, 31, 27, 0.08);
  --aw-warn: #C0563B;
  --aw-ruhig: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------- Feld ---- */

.aw {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

/* Die echte Auswahl bleibt im Markup stehen. Sie traegt Wert, Name und
   Pflichtangabe weiter, bleibt fuer bestehende Skripte erreichbar und laesst
   sich per focus() ansteuern. Sichtbar ist sie nicht, im Tab-Weg auch nicht. */
select.aw-nativ {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  min-width: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
  background: none !important;
  box-shadow: none !important;
}

.aw-knopf {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 11px 38px 11px 13px;
  border: 1px solid var(--aw-linie);
  border-radius: 12px;
  background: var(--aw-weiss);
  box-shadow: inset 0 1px 2px rgba(28, 49, 37, 0.04);
  color: var(--aw-tinte);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: border-color 200ms var(--aw-ruhig), box-shadow 200ms var(--aw-ruhig),
              background-color 200ms var(--aw-ruhig);
}

.aw-knopf:hover { border-color: rgba(28, 49, 37, 0.38); }
.aw-knopf:focus-visible { outline: 3px solid var(--aw-forst); outline-offset: 2px; }
.aw-knopf[disabled] { opacity: 0.55; cursor: default; box-shadow: none; }
.aw-knopf[disabled]:hover { border-color: var(--aw-linie); }

.aw.ist-offen > .aw-knopf {
  border-color: var(--aw-forst);
  box-shadow: 0 0 0 3px rgba(28, 49, 37, 0.12);
}

/* Fehlerzustand des Originals spiegeln, damit rote Raender nicht verschwinden. */
.aw.ist-fehler > .aw-knopf {
  border-color: var(--aw-warn);
  box-shadow: 0 0 0 3px rgba(192, 86, 59, 0.10);
}

/* Nur fuer Vorlesesoftware: sagt, worum es in diesem Feld geht. Sichtbar
   steht daneben ohnehin das Label, deshalb ist der Text hier unsichtbar. */
.aw-nur-lesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.aw-wert {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Platzhalter ruhiger als eine echte Angabe. */
.aw.ist-leer .aw-wert { color: var(--aw-still); }

.aw-pfeil {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 12px;
  height: 8px;
  margin-top: -4px;
  pointer-events: none;
  transition: transform 240ms var(--aw-ruhig);
}

.aw.ist-offen .aw-pfeil { transform: rotate(180deg); }

/* --------------------------------------------------------------- Liste ---- */

.aw-blatt {
  position: fixed;
  top: 0;
  left: -10000px;
  z-index: 2147483000;          /* ueber Fenstern und Panelkarten, unter dem Hauptmenue */
  border: 1px solid var(--aw-linie);
  border-radius: 14px;
  background: var(--aw-weiss);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 26px 52px -14px rgba(28, 49, 37, 0.34);
  overflow: hidden;
  animation: aw-auf 180ms var(--aw-ruhig) both;
}

.aw-blatt[data-richtung="oben"] { transform-origin: 50% 100%; }
.aw-blatt[data-richtung="unten"] { transform-origin: 50% 0%; }
/* Lange Listen gehen mittig ueber die ganze Fensterhoehe auf. */
.aw-blatt[data-richtung="mitte"] { transform-origin: 50% 50%; }

/* Zeigen, dass die Liste weitergeht.

   Ohne das brach die Liste bei laengeren Auswahlen scheinbar einfach ab:
   sie liess sich rollen, aber nichts sagte das. Bei neunzehn Personen in
   acht Gruppen sah es aus, als fehlte das halbe Team.

   Der Verlauf liegt ueber der Liste und laesst Klicks durch. Er erscheint
   nur an der Seite, an der wirklich etwas verborgen ist. */
.aw-blatt::before,
.aw-blatt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 34px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms var(--aw-ruhig, ease);
  z-index: 2;
}
.aw-blatt::before {
  top: 0;
  background: linear-gradient(to bottom, var(--aw-weiss, #fff) 12%, rgba(255,255,255,0) 100%);
}
.aw-blatt::after {
  bottom: 0;
  background: linear-gradient(to top, var(--aw-weiss, #fff) 12%, rgba(255,255,255,0) 100%);
}
.aw-blatt.hat-mehr-oben::before { opacity: 1; }
.aw-blatt.hat-mehr-unten::after { opacity: 1; }

/* Am Handy sitzt oben ein Kopf mit Titel und Schliessknopf. Der Verlauf
   darf ihn nicht ueberdecken. */
.aw-blatt[data-richtung="blatt"]::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .aw-blatt::before, .aw-blatt::after { transition: none; }
}

.aw-liste {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(42, 74, 56, 0.35) transparent;
}

.aw-liste:focus { outline: none; }
.aw-liste::-webkit-scrollbar { width: 10px; }
.aw-liste::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(42, 74, 56, 0.32) content-box;
}
.aw-liste::-webkit-scrollbar-thumb:hover { background: rgba(42, 74, 56, 0.52) content-box; }

/* Gruppentitel: deutlich lesbar, Waldgruen, fett, groesser als die Eintraege.

   11.08.2026 (Dirk): Der gruene Grund stand auf 9 Prozent und war so blass,
   dass "Aerzte" oder "Schwestern" wie ein weiterer Name aussahen. Wer schnell
   jemanden sucht, muss auf einen Blick sehen, was Ueberschrift ist und was
   Person. Jetzt kraeftiger Grund, dunklere Schrift und ein Balken an der
   linken Kante. Die Namen ruecken ohnehin schon ein, damit stehen zwei
   Merkmale gegeneinander statt nur eines. */
.aw-gruppe-titel {
  margin: 2px 2px 4px;
  padding: 8px 11px 7px 12px;
  border-radius: 9px;
  border-left: 4px solid var(--aw-wald);
  background: rgba(42, 74, 56, 0.20);
  color: #16281E;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
}

.aw-gruppe + .aw-gruppe { margin-top: 6px; }
.aw-gruppe + .aw-gruppe .aw-gruppe-titel { margin-top: 4px; }

.aw-eintrag {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--aw-tinte);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease;
}

.aw-gruppe .aw-eintrag { padding-left: 18px; }

/* Lange Eintraege duerfen umbrechen statt abgeschnitten zu werden. */
.aw-eintrag-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.aw-eintrag::after {
  content: '';
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-left: auto;
  opacity: 0;
  background: no-repeat center / 16px 16px
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232A4A38' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.6l3.6 3.6 7.4-8'/%3E%3C/svg%3E");
}

.aw-eintrag[aria-selected="true"] { color: var(--aw-wald); font-weight: 700; }
.aw-eintrag[aria-selected="true"]::after { opacity: 1; }

.aw-eintrag.ist-aktiv { background: rgba(42, 74, 56, 0.11); }
.aw-eintrag[aria-disabled="true"] { color: var(--aw-still); opacity: 0.6; cursor: default; }
.aw-eintrag.ist-platzhalter { color: var(--aw-still); font-style: normal; }

@media (hover: hover) and (pointer: fine) {
  .aw-eintrag:hover { background: rgba(42, 74, 56, 0.11); }
  .aw-eintrag[aria-disabled="true"]:hover { background: none; }
}

.aw-leer {
  padding: 16px 12px;
  color: var(--aw-still);
  font-size: 15px;
  text-align: center;
}

/* ------------------------------------------------- Handy: Blatt von unten -- */

.aw-schleier {
  position: fixed;
  inset: 0;
  z-index: 2147482999;
  background: rgba(12, 24, 17, 0.44);
  animation: aw-ein 200ms ease both;
}

.aw-blatt[data-modus="blatt"] {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  animation: aw-hoch 260ms var(--aw-ruhig) both;
}

.aw-griff {
  width: 44px;
  height: 5px;
  margin: 10px auto 2px;
  border-radius: 999px;
  background: rgba(26, 31, 27, 0.18);
}

.aw-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px 10px 18px;
  border-bottom: 1px solid var(--aw-linie-fein);
}

.aw-kopf-titel {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--aw-wald);
  font-size: 16px;
  font-weight: 700;
}

.aw-zu {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--aw-linie);
  border-radius: 999px;
  background: var(--aw-weiss);
  color: var(--aw-wald);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.aw-zu:focus-visible { outline: 3px solid var(--aw-forst); outline-offset: 2px; }

.aw-blatt[data-modus="blatt"] .aw-liste { padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
.aw-blatt[data-modus="blatt"] .aw-eintrag { min-height: 54px; font-size: 17px; }
.aw-blatt[data-modus="blatt"] .aw-gruppe-titel { font-size: 15.5px; padding: 10px 12px 9px; }

/* ------------------------------------------------------------ Bewegung ---- */

@keyframes aw-auf {
  from { opacity: 0; transform: scaleY(0.96) translateY(-2px); }
  to   { opacity: 1; transform: none; }
}
@keyframes aw-ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes aw-hoch {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aw-blatt, .aw-schleier { animation: none; }
  .aw-pfeil, .aw-knopf, .aw-eintrag { transition: none; }
}

/* ------------------------------------------------- Anpassung an das Panel -- */

/* Die Zeitfelder der verkuerzten Oeffnungszeiten stehen zu zweit in einer
   Rasterzeile und zeigen ihre Uhrzeit mittig. Das Original tat das ueber
   .ap-oz-select, diese Regeln halten den Platzbedarf gleich. */
.ap-oz-zeile .aw { width: 100%; }
.ap-oz-zeile .aw-knopf {
  /* 10.08.2026 (Dirk): stand auf 42, verlangt sind 44. Die zwei Pixel kosten
     in der Rasterzeile nichts und machen die Zeitfelder sicher treffbar. */
  min-height: 44px;
  padding: 6px 30px 6px 10px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  justify-content: center;
  text-align: center;
}
.ap-oz-zeile .aw-wert { flex: 0 1 auto; text-align: center; }
.ap-oz-zeile .aw-pfeil { right: 10px; }
.aw-blatt.ist-zeit .aw-eintrag { font-variant-numeric: tabular-nums; }

/* Im Bewerbungsfenster stehen Tag und Monat in einem engen Raster. */
.wizard-dob .aw-knopf { padding-left: 12px; font-size: 15px; }

/* --------------------------------------------------- Hoher Kontrastmodus -- */

@media (forced-colors: active) {
  .aw-knopf, .aw-blatt { border: 1px solid ButtonBorder; background: Canvas; color: CanvasText; }
  .aw-eintrag.ist-aktiv { background: Highlight; color: HighlightText; forced-color-adjust: none; }
  .aw-gruppe-titel { border-bottom: 1px solid ButtonBorder; background: Canvas; color: CanvasText; }
}

/* ---------------------------------------------------------------------------
   Kompakter, wo mit der Maus gezeigt wird.

   Die Personalliste hat einundzwanzig Namen in sieben Gruppen. Mit 44 Pixeln
   je Zeile kam sie auf ueber tausend und passte auf kleineren Bildschirmen
   nicht am Stueck; Koelleda Schwester und die Betreuung der Website lagen
   unter dem Rand. Ein Zeigergeraet trifft auch 36 Pixel sicher, auf
   Beruehrung bleiben die 44, dort zaehlt die Fingerkuppe. Das Aussehen
   aendert sich nicht, nur die Luft dazwischen.
   --------------------------------------------------------------------------- */
@media (pointer: fine) {
  .aw-eintrag { min-height: 36px; padding: 7px 12px; }
  .aw-gruppe-titel { padding: 6px 11px 5px; margin-bottom: 3px; }
  .aw-liste { padding: 5px; }
}


/* ==========================================================================
   Nachtlauf 13.08.2026 - Luft zum Bildschirmrand

   Das Blatt lag mit left:0 und right:0 randbuendig am unteren Rand. Der
   Schatten hat 26 und 52 Pixel Weichzeichnung und war dadurch an drei Seiten
   unsichtbar. Es greift bis 640 Pixel und bei grobem Zeiger bis 820, also auf
   allen Tablets hochkant - deshalb ist das kein Randfall.

   Dazu die Notch: quer liegt der linke oder rechte Rand unter der Aussparung.
   ========================================================================== */
.aw-blatt[data-modus="blatt"] {
  left: max(20px, env(safe-area-inset-left, 0px));
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  border-bottom: 1px solid var(--aw-linie);
  border-radius: 22px;
}
.aw-blatt[data-modus="blatt"] .aw-liste { padding-bottom: 12px; }