/* ============================================================
   Kundenportal – gemeinsames CSS für kundenportal.html + admin.html.
   Feinabstimmung der Bootstrap-Komponenten (Karten, Modal, Formulare,
   Fortschrittsbalken), die css/style.css nicht kennt. Kopf, Fuß,
   Typografie und Farb-Tokens kommen weiterhin aus css/style.css +
   js/components.js, genau wie auf den übrigen Seiten der Hauptseite.
   Seiten-spezifisches CSS (Editor, Admin-Werkzeugleiste, Dashboard-
   Schrittanzeige) bleibt im jeweiligen <style>-Block der Seite.
   ============================================================ */

/* Bootstrap bringt eine eigene .navbar-Komponente mit (display:flex + eigenes
   Padding) mit, die den gleichnamigen echten Seiten-Header überschreibt und
   .navbar__inner (eigentlich ein Block-Element, das auf 1160px wächst) zu
   einem Flex-Kind macht, das nur noch auf seinen Inhalt schrumpft. Hier
   zurücksetzen, damit die Navigation wie auf allen anderen Seiten aussieht. */
.navbar { display: block; padding: 0; }
/* Bootstraps Reboot setzt "ul,ol{margin-bottom:1rem}" – als Tag-Selektor
   schlägt das den allgemeinen *{margin:0}-Reset der Seite unabhängig von
   der Ladereihenfolge. .navbar__nav ist ein <ul> und bekam dadurch
   ungewollt 16px Abstand unten, wodurch die Nav-Leiste höher wurde und
   das Logo unzentriert wirkte. */
.navbar__nav { margin: 0; }
/* Gleicher Grund: .page-header__sub ist ein <p> und bekam von Bootstrap
   ungewollt 16px Abstand unten (0 auf allen anderen Seiten). */
.page-header__sub { margin: 0; }
/* Bootstrap setzt "line-height:1.5" auf .btn; .btn--gold (der echte
   Seiten-Button, z. B. "Jetzt anfragen" in der Nav) überschreibt das
   nicht, dadurch war der Button niedriger/schmaler als auf allen
   anderen Seiten (dort erbt er die normale Zeilenhöhe der Seite). */
.btn.btn--gold { line-height: inherit; letter-spacing: .08em; }
/* Kartentitel (PIN-Karte, Login-Karte) sind semantisch h2 (parallel zu
   den anderen Ansichten der jeweiligen Seite), sollen aber kompakt
   bleiben statt in der großen Standard-h2-Größe zu erscheinen. */
.pin-card h2, .auth-card h2 { font-size: 1.2rem; }

/* Buttons: Lato, fett, Versalien, wie .btn der Hauptseite */
.btn {
  font-family: 'Lato', sans-serif; font-weight: 700;
  letter-spacing: .04em; border-radius: var(--radius);
  transition: all var(--transition);
}
.btn-primary, .btn-success {
  --bs-btn-bg: var(--green-dark); --bs-btn-border-color: var(--green-dark);
  --bs-btn-hover-bg: var(--green-mid); --bs-btn-hover-border-color: var(--green-mid);
  --bs-btn-active-bg: var(--green-light); --bs-btn-active-border-color: var(--green-light);
  --bs-btn-disabled-bg: var(--green-dark); --bs-btn-disabled-border-color: var(--green-dark);
}
/* Hauptaktionen: Gold (analog .btn--gold der Hauptseite) */
.btn-danger {
  --bs-btn-color: #fff; --bs-btn-bg: var(--gold); --bs-btn-border-color: var(--gold);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--gold-light); --bs-btn-hover-border-color: var(--gold-light);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--gold-light); --bs-btn-active-border-color: var(--gold-light);
}
.btn-outline-secondary {
  --bs-btn-color: var(--green-dark); --bs-btn-border-color: var(--green-dark);
  --bs-btn-hover-bg: var(--green-dark); --bs-btn-hover-border-color: var(--green-dark);
  --bs-btn-active-bg: var(--green-mid); --bs-btn-active-border-color: var(--green-mid);
}
.btn-outline-light {
  --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.6);
  --bs-btn-hover-bg: rgba(255,255,255,.12); --bs-btn-hover-border-color: #fff;
}

/* Akzente */
.text-primary, .text-success { color: var(--green-mid) !important; }

/* Karten: wie .content-card / .rechner-card der Hauptseite */
/* overflow:hidden, damit farbige Kopfbereiche (card-header, Tabellenkopf,
   list-group) an den runden Ecken sauber mit abgerundet werden statt
   eckig über den Kartenrand hinauszuragen. */
.card { border: 1px solid var(--creme-dark); border-radius: var(--radius-lg); overflow: hidden; }
.card.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.card-header { background: #fff !important; border-bottom: 1px solid var(--creme-dark); font-family: 'Lato', sans-serif; }
.card-footer { background: #fff !important; border-top: 1px solid var(--creme-dark); }

/* Fortschritt: grün, bei 100 % golden */
.progress { background: var(--creme-dark); border-radius: 999px; }
.progress-bar.bg-primary { background: linear-gradient(90deg, var(--green-dark), var(--green-mid)) !important; }
.progress-bar.bg-success {
  background: linear-gradient(90deg, var(--gold), var(--gold-light)) !important;
  color: #3a2f10 !important;
}

.form-control:focus, .form-select:focus {
  border-color: var(--green-mid);
  box-shadow: 0 0 0 .2rem rgba(42,80,64,.15);
}

.pin-input {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.2rem; letter-spacing: 1rem; text-align: center;
  font-weight: 700; padding-left: 1rem; color: var(--green-dark);
}

/* Modal wie Karten der Hauptseite */
.modal-content { border-radius: var(--radius-lg); border: 1px solid var(--creme-dark); }
.modal-header { border-bottom: 1px solid var(--creme-dark); }
.modal-title { font-family: 'Cormorant Garamond', serif; color: var(--green-dark); font-weight: 600; }

.hidden { display: none; }