/* Abschnitt „So bucht ein Patient“: das HTML-Demo-Fenster (Skill html-demo).
   Rahmen hell wie Safari statt dunkel; die App darin mit den echten Werten aus
   app/static/style.css, in px (die Landingpage skaliert rem mit der Breite).
   Alle App-Klassen tragen das Präfix pbx-, damit nichts mit seite.css kollidiert. */

.ablauf { padding-top: var(--abschnitt-oben); }
.ablauf .statement { width: 94.8%; margin-bottom: calc(60 * var(--d)); }
.ablauf-fenster { max-width: calc(1200 * var(--d)); margin-inline: auto; }
@media (max-width: 767px) {
  .ablauf .statement { width: 100%; margin-bottom: calc(28 * var(--d)); }
}

/* Fensterrahmen hell */
.ablauf-fenster .hd-win {
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 40px 100px -40px rgba(31, 38, 135, 0.35), 0 24px 48px -28px rgba(0, 0, 0, 0.25);
}
.ablauf-fenster .hd-bar,
.ablauf-fenster .hd-steps { background: #f2f2f4; color: #6e6e73; }
.ablauf-fenster .hd-bar { border-bottom-color: rgba(0, 0, 0, 0.08); }
.ablauf-fenster .hd-steps { border-top-color: rgba(0, 0, 0, 0.08); }
.ablauf-fenster .hd-tab.on { color: #1d1d1f; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08); }
.ablauf-fenster .hd-view { background: #eef1f7; }
.ablauf-fenster .hd-steps button { color: #6e6e73; }
@media (min-width: 561px) {
  .ablauf-fenster .hd-steps button { font-size: 13px; }
}
.ablauf-fenster .hd-steps button:hover,
.ablauf-fenster .hd-steps button.on { color: #1d1d1f; }
.ablauf-fenster .hd-steps button:hover { background: rgba(0, 0, 0, 0.04); }
.ablauf-fenster .hd-steps button:focus-visible { outline-color: #0a84ff; }
.ablauf-fenster .hd-n,
.ablauf-fenster .hd-steps button.on .hd-n { color: #8e8e93; }
.ablauf-fenster .hd-steps i {
  background: linear-gradient(90deg, #0a84ff calc(var(--p) * 100%), transparent calc(var(--p) * 100%)), rgba(0, 0, 0, 0.08);
}

/* ---------- Die App (Werte aus app/static/style.css) ---------- */
.pbx-app {
  --bg: #eef1f7;
  --glass: rgba(255, 255, 255, 0.55);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --border: rgba(255, 255, 255, 0.65);
  --text: #1c1c1e;
  --muted: #6e6e73;
  --accent: #0a84ff;
  --accent-2: #5e5ce6;
  --accent-text: #0066cc;
  --danger: #ff3b30;
  --glanz: rgba(255, 255, 255, 0.75);
  --trenner: rgba(60, 60, 67, 0.14);
  --shadow: 0 10px 30px rgba(31, 38, 135, 0.12);
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  letter-spacing: normal;
  background-color: var(--bg);
  background-image: radial-gradient(900px 500px at 8% -10%, rgba(120, 170, 255, 0.45), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(255, 170, 210, 0.35), transparent 55%);
}
.pbx-app b { font-weight: 700; }
.pbx-kopf {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 55px;
  padding: 0 19px;
  background: var(--glass-strong);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
.pbx-marke { display: inline-flex; align-items: center; gap: 10px; padding: 4px 13px 4px 5px; font-weight: 700; letter-spacing: -0.01em; }
.pbx-marke-icon {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-size: 17.6px; line-height: 1;
  background: var(--glass); border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 var(--glanz), 0 2px 6px rgba(31, 38, 135, 0.08);
}
.pbx-logo { display: block; height: 30px; width: auto; margin-left: auto; margin-right: 7px; }
.pbx-hinweis {
  margin: 0; padding: 5.6px 16px; text-align: center; font-size: 13.6px; line-height: 1.5;
  background: #f4e9d9; border-bottom: 1px solid var(--border);
}
.pbx-seite { position: absolute; left: 0; right: 0; top: 55px; will-change: transform; }
.pbx-main { position: relative; max-width: 1100px; margin: 19px auto; padding: 0 16px; }
.pbx-h1 { margin: 3px 0 16px; font-size: 25.6px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.5; }
.pbx-h2 { margin: 22px 0 10px; font-size: 18.4px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.5; }
.pbx-p { margin: 0 0 16px; }
.pbx-small { font-size: 13.3px; color: var(--muted); }
.pbx-a { color: var(--accent); text-decoration: underline; }

.pbx-glas {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.pbx-formular { position: relative; display: grid; gap: 9.6px; max-width: 520px; padding: 17.6px; }
.pbx-label { display: grid; gap: 4px; font-size: 14.7px; color: var(--muted); }
.pbx-feld {
  position: relative; display: flex; align-items: center; height: 42px; padding: 0 11px;
  font-size: 16px; color: var(--text);
  background: var(--glass-strong); border: 1px solid var(--border); border-radius: 12px;
}
.pbx-feld svg { width: 16px; height: 16px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pbx-feld.pbx-fokus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pbx-caret { visibility: hidden; display: inline-block; width: 1.5px; height: 19px; margin-left: 1px; background: var(--text); vertical-align: -3px; }
.pbx-fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 9.6px 12.8px 12px; font-size: 16px; color: var(--text); }
.pbx-legend { display: block; margin: -2px 0 6px; }
.pbx-zeiten { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pbx-zeit { display: inline-flex; align-items: center; gap: 6px; }
.pbx-radio {
  position: relative; width: 16.8px; height: 16.8px; border-radius: 50%;
  background: #fff; border: 1.5px solid #8e8e93;
}
.pbx-radio.pbx-an { border: 5px solid var(--accent); }
.pbx-button {
  display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px;
  font-weight: 600; color: #fff; border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 4px 14px rgba(10, 132, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.pbx-button.pbx-druck { filter: brightness(0.9); transform: translateY(1px); }
.pbx-gefahr { display: inline-flex; background: linear-gradient(180deg, var(--danger), #d70015); box-shadow: 0 4px 14px rgba(255, 59, 48, 0.3); }
.pbx-karte { padding: 12.8px 16px; margin: 0 0 16px; max-width: 520px; }
.pbx-app-hinweis { margin: 29px 0 16px; text-align: center; }
.pbx-app-hinweis span {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px;
  color: var(--accent-text); font-size: 15px; font-weight: 600;
  background: var(--glass); border: 1px solid var(--border);
}
.pbx-app-hinweis svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Aufklappmenü wie macOS (das native <select> der App) */
.pbx-menue {
  position: absolute; z-index: 5; left: 17.6px; width: 300px; padding: 5px;
  font-size: 14px; color: var(--text);
  background: #f6f6f8; border: 0.5px solid rgba(0, 0, 0, 0.15); border-radius: 9px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
  transform-origin: 50% 0;
}
.pbx-menue span { display: flex; align-items: center; height: 24px; padding: 0 10px 0 24px; border-radius: 5px; position: relative; }
.pbx-menue span.pbx-wahl::before { content: "✓"; position: absolute; left: 8px; font-size: 12px; }
.pbx-menue span.pbx-hover { background: #0a84ff; color: #fff; }

/* Rezeption: Sidebar + Tagesspalten */
.pbx-rahmen { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 24px; align-items: start; max-width: 1440px; }
.pbx-sidebar {
  display: flex; flex-direction: column; gap: 16px; padding: 13.6px 10.4px;
  background: var(--glass); border: 1px solid var(--border); border-radius: 22px;
  box-shadow: var(--shadow), inset 0 1px 0 var(--glanz);
}
.pbx-sidebar-kopf { display: flex; align-items: center; gap: 11px; padding: 2.4px 5.6px 13.6px; border-bottom: 1px solid var(--trenner); }
.pbx-sidebar-icon {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 22.4px; line-height: 1;
  background: var(--glass-strong); border: 1px solid var(--border);
}
.pbx-sidebar-kopf strong { display: block; font-size: 15.2px; line-height: 1.25; }
.pbx-sidebar-kopf span { font-size: 13.4px; color: var(--accent-text); }
.pbx-sidebar-titel { margin: 0 0 4.8px; padding: 0 11px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pbx-sidebar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pbx-link { display: flex; align-items: center; gap: 10.4px; padding: 7.4px 11px; border-radius: 11px; font-size: 15.2px; font-weight: 500; line-height: 1.3; }
.pbx-link svg { width: 20px; height: 20px; flex: none; color: var(--accent-text); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pbx-link.pbx-aktiv { color: #fff; background: #0066cc; box-shadow: 0 4px 14px rgba(0, 102, 204, 0.28); }
.pbx-link.pbx-aktiv svg { color: #fff; }
.pbx-tag-titel { margin: 5.6px 0 16px; font-size: 25.6px; font-weight: 700; letter-spacing: -0.01em; }
.pbx-tag-titel .pbx-a { padding: 0 2px; border-radius: 6px; }
.pbx-tag-titel .pbx-a.pbx-hover { background: rgba(120, 120, 128, 0.12); }
.pbx-tage { display: grid; }
.pbx-tage > * { grid-area: 1 / 1; }
.pbx-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pbx-spalte { padding: 16px; }
.pbx-spalte .pbx-h2 { margin: 0 0 4px; }
.pbx-termin {
  margin: 8px 0; padding: 9.6px 12.8px; font-size: 16px;
  background: var(--glass); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 14px;
}
.pbx-termin-zeile { display: flex; align-items: center; gap: 6px; margin-top: 4.8px; }
.pbx-termin .pbx-feld { height: 34px; width: 210px; font-size: 14.5px; }
.pbx-termin .pbx-feld svg { width: 15px; height: 15px; }
.pbx-klein { height: 27px; padding: 0 11px; font-size: 13.6px; }