/* Physiopark MG · Online-Terminreservierung · Petrol-Design (pp-termine 0.21.0, C1) */
:root{
  --sv-primary-rgb: 15, 92, 99;
  --sv-primary: rgb(var(--sv-primary-rgb));
  --sv-primary-dark-rgb: 13, 79, 85;
  --sv-primary-dark: rgb(var(--sv-primary-dark-rgb));
  --sv-primary-darker-rgb: 11, 70, 75;
  --sv-primary-darker: rgb(var(--sv-primary-darker-rgb));
  --bs-primary: var(--sv-primary);
  --bs-primary-rgb: var(--sv-primary-rgb);
  --bs-link-color: var(--sv-primary-darker);
  --bs-link-color-rgb: var(--sv-primary-darker-rgb);
  --bs-link-hover-color: #0d4f55;
  --bs-border-radius: 14px;
  --bs-body-color: #243b3d;
  --pp-accent: #0f5c63;
  --pp-accent-dark: #0d4f55;
  --pp-soft: #e2ebec;
  --pp-radius: 14px;
  --pp-muted: #5a737a;
  --pp-surface: #f6fafa;
  --pp-ring: rgba(var(--sv-primary-rgb), .30);
  --pp-shadow: 0 2px 10px rgba(15,40,45,.05);
  --pp-shadow-up: 0 10px 24px rgba(var(--sv-primary-rgb), .16);
}
html,body{ font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; font-size: 16px; line-height: 1.55; color: var(--bs-body-color); }
body{ background: var(--pp-surface); }

/* Ruhige, zentrierte Buehne wie unsere Anfrage-Welt (0.5.0) */
.container-xxl{ max-width: 920px; margin-left: auto; margin-right: auto; padding: .5rem 1rem 2.5rem; }
h1,h2,h3,h4,h5{ color: var(--pp-accent-dark); font-weight: 700; letter-spacing:.1px; }
h4.mb-0{ font-size: 1.45rem; line-height: 1.3; margin:.5rem 0 .9rem !important; }
.row > .col{ line-height: 1.65; }
a, a:visited{ color: var(--pp-accent-dark); }
a:hover{ color: var(--pp-accent); }

/* Deutliche Fokus-Ringe ueberall (Tastatur, ppw-Look) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
.btn:focus-visible, .list-group-item-action:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 .22rem var(--pp-ring) !important;
  border-color: var(--pp-accent) !important;
}

/* Kopfzeile: Login-Link und Brotkrume ruhig */
.navbar-nav .nav-link{ color: var(--pp-accent-dark) !important; font-weight: 600; font-size: .92rem; }
.breadcrumb{ background: transparent; padding: .2rem 0; font-size: .92rem; --bs-breadcrumb-divider-color: var(--pp-muted); }
.breadcrumb-item a{ text-decoration: none; }
.breadcrumb-item a:hover{ text-decoration: underline; }

/* ---- Start: Leistungsgruppen als Karten (veredelt 0.5.0) ---- */
.list-group.leistungsgruppen{ gap: .75rem; border:0; background:transparent; }
.leistungsgruppen .list-group-item{
  display: flex; align-items: center; gap: .35rem;
  border: 1px solid rgba(var(--sv-primary-rgb), .18) !important;
  border-radius: var(--pp-radius) !important;
  background: #ffffff;
  overflow: hidden;
  box-shadow: var(--pp-shadow);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.leistungsgruppen .list-group-item:hover{
  transform: translateY(-2px);
  box-shadow: var(--pp-shadow-up);
  border-color: var(--pp-accent) !important;
  background: var(--pp-soft);
}
.leistungsgruppen .list-group-item strong{ color: var(--pp-accent-dark); font-size: 1.08rem; line-height: 1.35; padding: .9rem .75rem; }
img.productimage{ max-height: 5.25rem; }
div.leistungsgruppen a:first-child img.productimage,
div.leistungsgruppen a:last-child img.productimage{ border-radius: 0 !important; }

/* ---- Katalog (Leistungsliste einer Gruppe): Karten-Zeilen (0.5.0) ---- */
.list-group:not(.leistungsgruppen){ gap: .6rem; background: transparent; }
.list-group:not(.leistungsgruppen) .list-group-item{
  border: 1px solid rgba(var(--sv-primary-rgb), .16) !important;
  border-radius: calc(var(--pp-radius) * .8) !important;
  background: #ffffff;
  padding: .9rem 1.1rem;
  box-shadow: var(--pp-shadow);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.list-group:not(.leistungsgruppen) .list-group-item-action:hover{
  transform: translateY(-1px);
  border-color: var(--pp-accent) !important;
  background: var(--pp-soft);
  box-shadow: var(--pp-shadow-up);
}
.list-group:not(.leistungsgruppen) .list-group-item .fw-bold{ color: var(--pp-accent-dark); font-weight: 700; }
.list-group:not(.leistungsgruppen) .list-group-item small,
.list-group:not(.leistungsgruppen) .list-group-item .text-muted{ color: var(--pp-muted) !important; }

/* ---- Buttons ---- */
.btn{ border-radius: calc(var(--pp-radius) * .8); font-weight:600; padding:.55rem 1.15rem; }
.btn-primary{
  --bs-btn-bg: var(--pp-accent); --bs-btn-border-color: var(--pp-accent);
  --bs-btn-hover-bg: var(--pp-accent-dark); --bs-btn-hover-border-color: var(--pp-accent-dark);
  --bs-btn-active-bg: var(--pp-accent-dark); --bs-btn-active-border-color: var(--pp-accent-dark);
  --bs-btn-disabled-bg: var(--pp-accent); --bs-btn-disabled-border-color: var(--pp-accent);
  box-shadow: 0 4px 12px rgba(var(--sv-primary-rgb), .28);
}
.btn-primary:hover{ box-shadow: 0 6px 16px rgba(var(--sv-primary-rgb), .34); }
.btn-outline-primary{
  --bs-btn-color: var(--pp-accent-dark); --bs-btn-border-color: var(--pp-accent);
  --bs-btn-hover-bg: var(--pp-accent); --bs-btn-hover-border-color: var(--pp-accent);
  --bs-btn-active-bg: var(--pp-accent-dark);
}
/* Absende-Buttons (Registrierung/Login): gross und einladend */
form .btn-primary[type="submit"], form button.btn-primary{ padding: .8rem 1.9rem; font-size: 1.02rem; }

/* ---- Formulare ---- */
.form-control, .form-select{ border-radius: calc(var(--pp-radius) * .6); min-height: 2.9rem; border-color: #c9d8da; }
.form-control:focus, .form-select:focus{ border-color: var(--pp-accent); box-shadow: 0 0 0 .2rem rgba(var(--sv-primary-rgb), .22); }
.form-floating > .form-control, .form-floating > .form-select{ min-height: 3.5rem; }
.form-floating > label{ color: var(--pp-muted); }
.form-check-input:checked{ background-color: var(--pp-accent); border-color: var(--pp-accent); }
.form-check-input:focus{ border-color: var(--pp-accent); box-shadow: 0 0 0 .2rem rgba(var(--sv-primary-rgb), .22); }
.form-check-label{ color: var(--bs-body-color); }

/* ---- Hinweise / Alerts ---- */
.alert{ border-radius: calc(var(--pp-radius) * .8); border-width: 1px; }
.alert-testmode{ border-radius: 0; }

/* ---- Karten allgemein ---- */
.card{ border-radius: var(--pp-radius); border-color: rgba(var(--sv-primary-rgb), .16); overflow:hidden; box-shadow: var(--pp-shadow); }
.card-header{ background: var(--pp-soft); color: var(--pp-accent-dark); font-weight:700; border-bottom-color: rgba(var(--sv-primary-rgb), .16); }

/* ---- Termin-Kalender (search_events, 0.5.0) ---- */
.card.overflow-hidden{ box-shadow: 0 8px 24px rgba(15,40,45,.08); }
.card.overflow-hidden > .card-header,
.card.overflow-hidden > .card-footer{ padding: .55rem .75rem !important; }
.card.overflow-hidden > .card-footer{ background: var(--pp-soft); border-top: 1px solid rgba(var(--sv-primary-rgb), .16); }
.card-header .btn-outline-primary, .card-footer .btn-outline-primary{ border-radius: 999px; padding: .35rem .9rem; }
.card-header strong.align-middle{ font-size: .95rem; color: var(--pp-accent-dark); letter-spacing: .02em; }
.table > :not(caption) > * > *{ padding:.6rem .9rem; }
.table thead th{ color: var(--pp-accent-dark); }
table.card-table{ margin-bottom: 0; }
table.card-table th.short-date-column{
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--pp-muted); white-space: nowrap; width: 1%;
}
table.card-table tr > td:nth-of-type(1){ font-weight: 800; font-size: 1.06rem; color: var(--bs-body-color); white-space: nowrap; }
table.card-table td.auto-column{ text-align: end; }
.table-striped > tbody > tr:nth-of-type(odd) > *{ --bs-table-accent-bg: var(--pp-surface); }
table.card-table tbody tr:hover > *{ background: var(--pp-soft) !important; }
/* „Auswaehlen" ist DER Conversion-Knopf: sattes Petrol-Pill statt graub */
table.card-table .btn-outline-secondary{
  background: var(--pp-accent); border-color: var(--pp-accent); color: #ffffff;
  border-radius: 999px; padding: .38rem 1.05rem; font-weight: 700;
  box-shadow: 0 3px 10px rgba(var(--sv-primary-rgb), .26);
}
table.card-table .btn-outline-secondary:hover,
table.card-table .btn-outline-secondary:focus-visible{
  background: var(--pp-accent-dark); border-color: var(--pp-accent-dark); color: #ffffff;
}
table.card-table .btn-outline-secondary:active{ background: var(--sv-primary-darker); border-color: var(--sv-primary-darker); color: #ffffff; }

/* Seite "Persönliche Daten": THEORG legt JEDES Feld in eine eigene Zeile
   (.row) und gibt ihm ein Drittel Breite (.col-md-4). Auf dem Rechner
   ergibt das eine schmale Kolonne links und eine große leere Fläche
   rechts. Die Zeilen werden deshalb aufgelöst (display:contents) und alle
   Felder fließen in ein zweispaltiges Raster mit angenehmer Lesebreite.
   Reihenfolge im Quelltext und damit die Tab-Reihenfolge bleiben gleich.
   Browser ohne :has() ignorieren den Block und zeigen den bisherigen
   Zustand, mobil bleibt alles einspaltig. */
@media (min-width: 768px){
  form:has(.form-floating){
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.25rem;
    align-items: start;
    max-width: 900px;
  }
  form:has(.form-floating) > *{ grid-column: 1 / -1; }
  form:has(.form-floating) .row:has(> .col-md-4 > .form-floating){ display: contents; }
  form:has(.form-floating) .row > .col-md-4:has(> .form-floating){
    grid-column: auto;
    width: 100%;
    max-width: none;
    flex: none;
  }
}

@media (max-width: 520px){
  h4.mb-0{ font-size: 1.2rem; }
  .leistungsgruppen .list-group-item strong{ font-size: 1rem; }
  img.productimage{ max-height: 4rem; }
  table.card-table th.short-date-column{ font-size: .72rem; }
  form .btn-primary[type="submit"], form button.btn-primary{ width: 100%; }
}
@media (prefers-reduced-motion: reduce){
  .leistungsgruppen .list-group-item,
  .list-group:not(.leistungsgruppen) .list-group-item{ transition: none !important; }
}