/* ==========================================================================
   Augenpartner Design-Kit — 2 von 3: Bausteine
   Version 1.0 (2026-09-04)

   Vier gemeinsame Bausteine fuer alle fuenf Auftritte:
     1  Knopf (.btn)             — woertlich aus Altstetten, plus .btn--notfall
     2  Aktionsleiste            — aus Altstetten, ergaenzt um Drei-Knopf-Variante,
                                   safe-area unten und das :has-Gate fuer den
                                   Fussabstand (Seiten ohne Leiste bekommen keinen)
     3  Status-Pille (.status)   — NEU, ersetzt die zu kontrastarmen Portal-Farben
     4  Signet-Fenster (.fenster)— NEU, Phase-2-Entscheid: nur mobil, auf allen Sites

   Setzt tokens.css voraus. Wird in jede Site KOPIERT.
   Wer hier etwas aendert, aendert es fuer fuenf Auftritte — Aenderung immer
   zuerst hier, dann in alle Sites kopieren, nie umgekehrt.
   ========================================================================== */

/* 1 — Knopf ---------------------------------------------------------------
   Bewusst 999px statt --radius: die Pillenform ist das Erkennungsmerkmal
   der Bedienelemente, der 12px-Radius gilt fuer Flaechen (Karten, Boxen). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;                 /* Touch-Ziel */
  padding: var(--s3) var(--s5);
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tempo), color var(--tempo), border-color var(--tempo),
              box-shadow var(--tempo), transform var(--tempo);
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active { transform: translateY(1px); }

.btn--primaer {
  background: var(--tief);
  color: var(--weiss);
  box-shadow: 0 10px 22px -14px rgba(0, 75, 145, .9);
}
.btn--primaer:hover {
  background: var(--tief-dunkel);
  color: var(--weiss);
  box-shadow: 0 14px 26px -14px rgba(0, 75, 145, .95);
}

.btn--sekundaer {
  background: var(--weiss);
  color: var(--tief);
  border-color: var(--linie-stark);
}
.btn--sekundaer:hover { border-color: var(--himmel); background: var(--himmel-hell); color: var(--tief); }

/* Auf dunklem Grund (Hero-Bild, Infoleiste). */
.btn--hell {
  background: rgba(255, 255, 255, .14);
  color: var(--weiss);
  border-color: rgba(255, 255, 255, .5);
}
.btn--hell:hover { background: var(--weiss); color: var(--tief); }

/* Notfall — nur dort einsetzen, wo es wirklich um den Notfallweg geht.
   Der Rahmen traegt das volle Warnrot: die zarte Flaeche allein hebt sich
   auf weissem Grund kaum ab (1,1:1), der Rahmen macht den Knopf sichtbar. */
.btn--notfall {
  background: var(--warn-hell);
  color: var(--warn);
  border-color: var(--warn);
}
.btn--notfall:hover { background: var(--warn); color: var(--weiss); border-color: var(--warn); }

.btn--klein { min-height: 44px; padding: var(--s2) var(--s4); font-size: .9375rem; }
.btn--block { width: 100%; }

/* 2 — Aktionsleiste -------------------------------------------------------
   Feste Leiste am unteren Rand: Telefon und Termin sind auf dem Handy
   jederzeit erreichbar, ohne dass der Kopfbereich Platz frisst. */
.aktionsleiste {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  padding-bottom: calc(var(--s2) + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(180%) blur(10px);
  border-top: 1px solid var(--linie);
  box-shadow: 0 -8px 24px -16px rgba(12, 30, 33, .55);
  transition: transform .25s ease;
}
/* Portal mobil: Praxen · Termin buchen · Notfall */
.aktionsleiste--drei { grid-template-columns: repeat(3, 1fr); }
.aktionsleiste .btn { padding-inline: var(--s3); font-size: .9375rem; }
.aktionsleiste .btn svg { width: 18px; height: 18px; }
/* Auf der Startseite erscheint die Leiste erst, wenn die Hero-Knoepfe aus dem
   Bild gescrollt sind — sonst stuende Termin/Telefon doppelt auf dem Schirm.
   Ohne JavaScript bleibt sie einfach immer sichtbar. */
.aktionsleiste--verborgen { transform: translateY(110%); }
/* Platz fuer die Leiste, damit sie den Fusszeilentext nicht verdeckt.
   96px statt 76px, weil der Terminknopf in laengeren Sprachen (ES, FR, IT, PT)
   zweizeilig umbricht und die Leiste dann hoeher ist. */
body:has(.aktionsleiste) { padding-bottom: 96px; }
/* Gleicher Umbruchpunkt wie das Klappmenue: solange die Navigation
   eingeklappt ist, ist die Leiste der schnelle Weg zu Telefon und Termin. */
@media (min-width: 1180px) {
  .aktionsleiste { display: none; }
  body:has(.aktionsleiste) { padding-bottom: 0; }
}

/* 3 — Status-Pille --------------------------------------------------------
   «Jetzt geoeffnet» / «Geschlossen». Farbe ist NIE die einzige Aussage:
   der Text sagt es, der Punkt bestaetigt es nur.
   Kontrast (nachgerechnet): Text #12603f auf #e6f6ef = 6,8:1, #b3261e auf
   #fdeceb = 5,7:1, #4a5a5e auf #f4f8fb = 6,8:1 — alle AA. Der Punkt liegt
   mit #1a7a52 bei 4,8:1 — deutlich ueber der 3,0-Grenze fuer Grafik.
   Der duenne Rahmen ist reine Zier und traegt keine Aussage. */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 6px var(--s3) 6px var(--s2);
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.status__punkt {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}
.status--offen {
  background: var(--gruen-hell);
  border-color: #bfe6d3;
  color: var(--gruen-text);
}
.status--offen .status__punkt { background: var(--gruen-punkt); }
.status--zu {
  background: var(--warn-hell);
  border-color: #f3c8c5;
  color: var(--warn);
}
.status--neutral {
  background: var(--flaeche);
  border-color: var(--linie);
  color: var(--text-leise);
}
/* Auf dunklem Grund (Infoleiste, Hero-Bild). */
.status--auf-dunkel {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .45);
  color: var(--weiss);
}
.status--auf-dunkel .status__punkt { background: #7fe3b6; }

/* 4 — Signet-Fenster ------------------------------------------------------
   Phase-2-Entscheid: das Foto sitzt im offenen C des Signets — NUR mobil,
   auf allen fuenf Auftritten. Ab Desktop steht wieder das echte Bild im Hero.
   Umbruchpunkt 60rem = derselbe wie der Hero-Wechsel in Altstetten.
   Markup liefert praxis_signet_fenster() in signet/signet.php: erst das
   maskierte Foto, darueber der Ring aus praxis_signet() — so wird die Form
   nirgends ein zweites Mal gezeichnet. */
.fenster { display: none; }

@media (max-width: 60rem) {
  .hero--fenster {
    background:
      radial-gradient(60% 40% at 88% 0%, rgba(35, 130, 195, .20), transparent 70%),
      linear-gradient(180deg, var(--flaeche) 0%, var(--weiss) 100%);
  }
  /* Das Hintergrundbild des Hero weicht dem Fenster, samt seinem Schleier. */
  .hero--fenster .hero__bild { display: none; }
  .hero--fenster::after { display: none; }

  .fenster {
    display: block;
    position: relative;
    width: 214px;
    height: 214px;
    margin: var(--s2) auto var(--s5);
  }
  .fenster__foto,
  .fenster__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
  /* Der Ring ist das Signet selbst und traegt das Marken-Blau.
     (Die Probe mit dem hellen Logo-Blau wurde am 2026-09-04 verworfen.) */
  .fenster__ring { color: var(--tief); }
}