/* =================================================================
   Eigene Farbwelt: Dunkelblau/Petrol + warmer Akzent
   Überschreibt gezielt Bootstrap-Variablen und einzelne Klassen aus
   styles.css - Grunddatei bleibt unangetastet, einfach reversibel.
   ================================================================= */

:root {
  --brand-petrol:       #123C4A;
  --brand-petrol-light: #1D6478;
  --brand-petrol-pale:  #EAF1F2;
  --brand-accent:       #E3A23A;
  --brand-accent-dark:  #C4801E;
}

/* Bootstrap-Variablen umleiten */
:root {
  --bs-primary: var(--brand-petrol);
  --bs-primary-rgb: 18, 60, 74;
  --bs-link-color: var(--brand-petrol-light);
  --bs-link-color-rgb: 29, 100, 120;
  --bs-link-hover-color: var(--brand-accent-dark);
  --bs-link-hover-color-rgb: 196, 128, 30;
}
a {
  color: var(--brand-petrol-light);
}
a:hover {
  color: var(--brand-accent-dark);
}

/* Navigation & Footer: einheitlicher Petrol-Ton statt Standard-Schwarz */
.bg-dark {
  background-color: var(--brand-petrol) !important;
}

/* Primäre Buttons: warmer Akzent statt Bootstrap-Blau */
.btn-primary {
  --bs-btn-bg: var(--brand-accent);
  --bs-btn-border-color: var(--brand-accent);
  --bs-btn-hover-bg: var(--brand-accent-dark);
  --bs-btn-hover-border-color: var(--brand-accent-dark);
  --bs-btn-active-bg: var(--brand-accent-dark);
  --bs-btn-active-border-color: var(--brand-accent-dark);
  --bs-btn-color: #1a1a1a;
  --bs-btn-hover-color: #1a1a1a;
  --bs-btn-active-color: #1a1a1a;
  --bs-btn-disabled-bg: var(--brand-accent);
  --bs-btn-disabled-border-color: var(--brand-accent);
  --bs-btn-disabled-color: #1a1a1a;
}

/* Überschriften in Petrol statt Standard-Schwarz, etwas Charakter.
   Ausgenommen: Überschriften auf farbigem/bebildertem Grund (Header,
   Footer), die ihre eigene Farbe mitbringen. */
h1:not(.bg-header h1), h2, h3 {
  color: var(--brand-petrol);
}

/* Titelzeile über dem Header-Foto: kräftige weiße Outline, damit sie
   sich vom unruhigen Bildhintergrund abhebt. paint-order sorgt dafür,
   dass die Kontur hinter der Schrift liegt und die Buchstaben nicht
   auffrisst; der text-shadow ist die Rückfalllösung für ältere Browser. */
.bg-header h1 {
  color: var(--brand-petrol);
  -webkit-text-stroke: 6px #ffffff;
  paint-order: stroke fill;
  text-shadow:
     2px  2px 0 rgba(255,255,255,0.9),
    -2px  2px 0 rgba(255,255,255,0.9),
     2px -2px 0 rgba(255,255,255,0.9),
    -2px -2px 0 rgba(255,255,255,0.9);
}

/* Footer-Links (Impressum/Datenschutz) auf dunklem Grund */
.footer-link {
  color: #ffffff;
  text-decoration: underline;
}
.footer-link:hover {
  color: var(--brand-accent);
}

/* Auf schmalen Bildschirmen ist die Schrift kleiner - die Kontur muss
   entsprechend dünner sein, sonst laufen die Buchstaben zu */
@media (max-width: 767.98px) {
  .bg-header h1 {
    -webkit-text-stroke-width: 3px;
  }
}

/* Abschnitte mit bg-light bekommen einen sehr hellen Petrol-Hauch statt reinem Grau */
.bg-light {
  background-color: var(--brand-petrol-pale) !important;
}

/* Formular-Fokuszustände in der neuen Farbe statt Bootstrap-Blau */
.form-control:focus,
.form-check-input:focus {
  border-color: var(--brand-petrol-light);
  box-shadow: 0 0 0 0.25rem rgba(29, 100, 120, 0.25);
}
.form-check-input:checked {
  background-color: var(--brand-petrol);
  border-color: var(--brand-petrol);
}

/* Einheitliche, runde Vorstands-Portraits - unabhängig von der
   ursprünglichen Bildgröße/-form der Originalfotos (nur Darstellung,
   die Originaldateien bleiben unangetastet) */
.vorstand-card {
  border: none;
  background: transparent;
  text-align: center;
}
.vorstand-avatar-wrap {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--brand-petrol-pale);
  box-shadow: 0 2px 6px rgba(18, 60, 74, 0.25);
  margin: 0 auto;
}
.vorstand-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* Individuelle Feinjustierung je Foto (unterschiedliche Rahmung der
   Originalbilder - manche enger geschnitten als andere) */
.avatar-sandro img {
  object-position: center 38%;
}
.avatar-achim img {
  object-position: center 15%;
}
.vorstand-card .card-body {
  padding-top: 1rem;
}