/* ════════════════════════════════════════════════════════════════════
   PROVA — page-template.css
   Sprint 04f Block A (27.04.2026)

   Zentrale Layout-Klassen fuer alle 11 Auftragstyp-Pages.
   Wird NACH prova-design.css und VOR Page-spezifischer Inline-CSS
   eingebunden. Eingebunden in:
     app.html, ergaenzung.html, widerspruch-gutachten.html,
     stellungnahme.html, wertgutachten.html, beratung.html,
     baubegleitung.html, schiedsgutachten.html, schnelle-rechnung.html,
     briefvorlagen.html, akte.html

   Keine Funktions-Aenderungen. Reine Layout-Vereinheitlichung.
   Backend bleibt unberuehrt. nav.js + prova-notifications.js
   bleiben unberuehrt.
═══════════════════════════════════════════════════════════════════ */

/* ─── 1. HEADER & TOPBAR (semantisch <header class="topbar">) ─── */
header.topbar,
header.page-header {
  height: 52px;
  min-height: 52px;
  background: var(--bg2, #111318);
  border-bottom: 1px solid var(--border, rgba(255,255,255,.07));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
}
header.topbar .topbar-left,
.page-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}
header.topbar .topbar-right,
.page-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── 2. BREADCRUMB ─── */
/* Format:    "PROVA › <strong>Page-Title</strong>"
   Trenner:   "›" (nie "·" oder "/")
   Style:     13px regular, var(--text2)              */
.page-breadcrumb,
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text3, #6b7280);
  font-family: var(--font-ui, 'DM Sans', system-ui, sans-serif);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.page-breadcrumb strong,
.breadcrumb strong {
  color: var(--text2, #aab4cb);
  font-weight: 600;
}
.page-breadcrumb-sep,
.breadcrumb-sep {
  color: var(--text3, #6b7280);
  margin: 0 2px;
}

/* ─── 3. HERO (H1 + Subtitle) ─── */
/* H1:        28px bold, var(--accent)
   Subtitle:  14px regular, var(--text2)
   Margin:    24px top, 32px bottom (subtitle)        */
.page-hero {
  margin: 24px 0 32px;
}
.page-title,
.page-hero h1 {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--accent, #4f8ef7);
  margin: 0 0 8px;
  letter-spacing: -0.015em;
  font-family: var(--font-ui, 'DM Sans', system-ui, sans-serif);
}
.page-subtitle,
.page-hero p {
  font-size: 14px;
  color: var(--text2, #aab4cb);
  margin: 0;
  line-height: 1.5;
}

/* ─── 4. STEPPER (.page-stepper + Aliasse) ─── */
/* P5f.X1.1: CSS-Aliasing — alte Stepper-Klassen visuell auf Standard.
   Logic-Files referenzieren .step / .wz-step / .flow-step / .br-phase
   weiterhin (Wizard-State); nur die Optik wird vereinheitlicht.

   Container-Aliasse: .page-stepper / .wizard-steps / .steps / .br-phases / .flow-steps
   Item-Aliasse:      .page-step / .step / .wz-step / .flow-step / .br-phase
   Circle-Aliasse:    .page-step-circle / .step-circle / .wz-step-num / .flow-dot / .br-phase-dot
   Connector-Aliasse: .page-step-connector / .step-connector / .flow-sep / .br-phase-arrow
*/
.page-stepper,
.wizard-steps,
.steps,
.flow-steps,
.br-phases {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  overflow-x: auto;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.page-stepper::-webkit-scrollbar,
.wizard-steps::-webkit-scrollbar,
.steps::-webkit-scrollbar,
.flow-steps::-webkit-scrollbar,
.br-phases::-webkit-scrollbar { height: 3px; }
.page-stepper::-webkit-scrollbar-thumb,
.wizard-steps::-webkit-scrollbar-thumb,
.steps::-webkit-scrollbar-thumb,
.flow-steps::-webkit-scrollbar-thumb,
.br-phases::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

/* Item-Aliasse — Inline-CSS in HTML wird durch hoehere Spezifitaet
   (zwei Class-Selektoren) ueberschrieben; reicht fuer wertgutachten.html
   .wz-step (Z.42) und stellungnahme.html .flow-step. */
.page-step,
.app-shell .step,
.page-content .step,
.app-shell .wz-step,
.page-content .wz-step,
.app-shell .flow-step,
.page-content .flow-step,
.app-shell .br-phase,
.page-content .br-phase {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  /* Reset Inline-Pattern: kein border, kein background im Default */
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-weight: 500 !important;
  color: var(--text3, #6b7280) !important;
  font-size: 12.5px !important;
}

.page-step-circle,
.app-shell .step-circle,
.page-content .step-circle,
.app-shell .wz-step-num,
.page-content .wz-step-num,
.app-shell .flow-dot,
.page-content .flow-dot,
.app-shell .br-phase-dot,
.page-content .br-phase-dot {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  background: var(--surface2, #232a3a) !important;
  color: var(--text3, #6b7280) !important;
  border: 1.5px solid var(--border2, rgba(255,255,255,.12)) !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

/* Active-State Aliasse */
.page-step.active .page-step-circle,
.app-shell .step.active .step-circle,
.page-content .step.active .step-circle,
.app-shell .wz-step.active .wz-step-num,
.page-content .wz-step.active .wz-step-num,
.app-shell .flow-step.active .flow-dot,
.page-content .flow-step.active .flow-dot,
.app-shell .br-phase.active .br-phase-dot,
.page-content .br-phase.active .br-phase-dot {
  background: var(--accent, #4f8ef7) !important;
  color: #fff !important;
  border-color: var(--accent, #4f8ef7) !important;
  box-shadow: 0 0 0 4px rgba(79,142,247,.15) !important;
}
/* Active-Container: gleichmaessige Akzentfarbe fuer Label */
.page-step.active,
.app-shell .step.active,
.page-content .step.active,
.app-shell .wz-step.active,
.page-content .wz-step.active,
.app-shell .flow-step.active,
.page-content .flow-step.active,
.app-shell .br-phase.active,
.page-content .br-phase.active {
  color: var(--accent, #4f8ef7) !important;
  font-weight: 700 !important;
}

/* Done-State Aliasse */
.page-step.done .page-step-circle,
.app-shell .step.done .step-circle,
.page-content .step.done .step-circle,
.app-shell .wz-step.done .wz-step-num,
.page-content .wz-step.done .wz-step-num,
.app-shell .flow-step.done .flow-dot,
.page-content .flow-step.done .flow-dot,
.app-shell .br-phase.done .br-phase-dot,
.page-content .br-phase.done .br-phase-dot {
  background: var(--success, #10b981) !important;
  color: #fff !important;
  border-color: var(--success, #10b981) !important;
}
.page-step.done,
.app-shell .step.done,
.page-content .step.done,
.app-shell .wz-step.done,
.page-content .wz-step.done,
.app-shell .flow-step.done,
.page-content .flow-step.done {
  color: var(--success, #10b981) !important;
  font-weight: 600 !important;
}
.page-step.done .page-step-circle::before { content: '✓'; font-size: 14px; font-weight: 800; }
.page-step.done .page-step-circle > span { display: none; }

/* Step-Label (extern stehende Beschriftung — nur fuer .page-step Pattern) */
.page-step-label,
.app-shell .step-label,
.page-content .step-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text3, #6b7280);
  white-space: nowrap;
}
.page-step.active .page-step-label,
.app-shell .step.active .step-label,
.page-content .step.active .step-label {
  color: var(--accent, #4f8ef7);
  font-weight: 700;
}
.page-step.done .page-step-label,
.app-shell .step.done .step-label,
.page-content .step.done .step-label {
  color: var(--success, #10b981);
  font-weight: 600;
}

/* Connector-Aliasse */
.page-step-connector,
.app-shell .step-connector,
.page-content .step-connector,
.app-shell .flow-sep,
.page-content .flow-sep,
.app-shell .br-phase-arrow,
.page-content .br-phase-arrow {
  width: 28px !important;
  height: 2px !important;
  background: var(--surface2, #232a3a) !important;
  flex-shrink: 0 !important;
  border-radius: 1px !important;
  /* Pfeil-Symbol unsichtbar machen falls span/text-arrow */
  font-size: 0 !important;
  color: transparent !important;
}
.page-step.done + .page-step-connector,
.app-shell .step.done + .step-connector,
.page-content .step.done + .step-connector,
.app-shell .flow-step.done + .flow-sep,
.page-content .flow-step.done + .flow-sep,
.app-shell .flow-sep.done,
.page-content .flow-sep.done {
  background: var(--success, #10b981) !important;
}

/* ─── 5. CONTENT-CONTAINER ─── */
.page-container,
.page-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 28px 96px;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .page-container,
  .page-content { padding: 16px 16px 120px; }
  header.topbar,
  header.page-header { padding: 0 16px; }
  .page-title,
  .page-hero h1 { font-size: 22px; }
  .page-stepper { gap: 8px; }
  .page-step-connector { width: 16px; }
}

/* ─── 6. CARDS (.page-card) ─── */
/* Konsolidiert: ersetzt .doku-card, .form-card, .section-card    */
.page-card {
  background: var(--surface, #1c2130);
  border: 1px solid var(--border2, rgba(255,255,255,.11));
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
.page-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 8px;
}
.page-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #eaecf4);
  margin: 0;
}
.page-card-subtitle {
  font-size: 12px;
  color: var(--text3, #6b7280);
  margin: 4px 0 0;
}
.page-card-body { /* default-Stuff */ }
.page-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border, rgba(255,255,255,.06));
}

.page-pflicht-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(239,68,68,0.12);
  color: #f87171;
  margin-left: 8px;
  vertical-align: middle;
}

/* ─── 7. ACTION-FOOTER (sticky) ─── */
/* Position:  ganz unten, sticky
   Linke:     "Entwurf speichern" (sekundaer)
   Rechte:    "Weiter" / "Abschliessen" (primaer)      */
.page-action-footer {
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: var(--bg, #0b0d11);
  padding: 14px 0;
  margin-top: 24px;
  border-top: 1px solid var(--border, rgba(255,255,255,.08));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.page-action-footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-action-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.page-btn {
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
}
.page-btn-primary {
  background: linear-gradient(135deg, var(--accent, #4f8ef7), var(--accent2, #3a7be0));
  color: #fff;
  box-shadow: 0 2px 12px rgba(79,142,247,.3);
}
.page-btn-primary:hover { opacity: 0.92; transform: translateY(-1px); }
.page-btn-secondary {
  background: var(--surface2, #232a3a);
  color: var(--text2, #aab4cb);
  border-color: var(--border2, rgba(255,255,255,.12));
}
.page-btn-secondary:hover { background: var(--surface, #1c2130); color: var(--text, #eaecf4); }

/* ─── 8. RESPONSIVE — Mobile-Anpassungen ─── */
@media (max-width: 768px) {
  .page-action-footer {
    padding: 12px 14px;
    flex-direction: row;
    margin-left: -14px;
    margin-right: -14px;
  }
  .page-btn { padding: 10px 14px; font-size: 12px; }
  .page-step-label { display: none; }
  .page-step.active .page-step-label { display: inline; }
  .page-card { padding: 16px; }
}