@import url("https://bootswatch.com/3/united/bootstrap.min.css");

/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

  .table-bordered > thead > tr > th {
    border: 1px solid #dadada;
  }
  .table-bordered > thead > tr > td {
    border: 1px solid #dadada;
  }
 
 /* Limesurvey-Logo ausblenden */
.navbar-brand,
.navbar-brand img {
  display: none !important;
}

/* ======================================
   BD OÖ Logo – zentriert & skalierbar
   ====================================== */
.bdoo-logo {
  max-height: 120px;       /* ← Größe hier anpassen (Standard 80px) */
  height: auto;
  width: auto;
  display: inline-block;
}

.navbar {
  min-height: 100px;       /* Fixe Höhe, verhindert "Springen" */
  align-items: center;     /* Logo bleibt vertikal mittig */
  overflow: visible;       /* falls Logo leicht überragt */
}

@media (max-width: 768px) {
  .bdoo-logo {
    max-height: 70px;      /* kleinere Variante für Mobilgeräte */
  }
  .navbar {
    min-height: 80px;
  }
}

/* ======================================
   Navbar im BD OÖ Rot gestalten
   ====================================== */
.navbar {
  background-color: #A50014 !important;  /* BD OÖ Rot */
  border-bottom: 4px solid #b80016;      /* dunklere Linie als Akzent (optional) */
}

.navbar a,
.navbar .nav-link,
.navbar .navbar-brand,
.navbar .navbar-text {
  color: #ffffff !important;              /* weiße Schrift */
}

.navbar a:hover,
.navbar .nav-link:hover {
  color: #ffe6e6 !important;              /* leicht helleres Rot beim Hover */
}

/* Optional: Toggler-Icon für Mobile hell machen */
.navbar-toggler-icon {
  filter: brightness(0) invert(1);
}

/* ======================================
   BD OÖ Button-Stil – angepasste Hauptfarbe
   ====================================== */

:root {
  --bdoo-red: #A50014;          /* Hauptton */
  --bdoo-red-dark: #7A000F;     /* dunklerer Ton für Hover */
}

/* Haupt-Buttons (z. B. „Weiter“, „Absenden“) */
.btn-primary,
button[type="submit"],
.ls-move-next-btn,
.ls-move-submit-btn {
  background-color: var(--bdoo-red) !important;
  border-color: var(--bdoo-red) !important;
  color: #ffffff !important;
}

/* Hover-Effekt */
.btn-primary:hover,
button[type="submit"]:hover,
.ls-move-next-btn:hover,
.ls-move-submit-btn:hover {
  background-color: var(--bdoo-red-dark) !important;
  border-color: var(--bdoo-red-dark) !important;
  color: #ffffff !important;
}

/* Sekundäre Buttons (z. B. „Zurück“, „Abbrechen“) */
.btn-secondary,
.ls-move-previous-btn {
  background-color: #666666 !important;
  border-color: #666666 !important;
  color: #ffffff !important;
}

/* Hover-Effekt für Sekundär-Buttons */
.btn-secondary:hover,
.ls-move-previous-btn:hover {
  background-color: #444444 !important;
  border-color: #444444 !important;
}

/* ======================================
   Fortschrittsbalken im BD OÖ-Rot
   ====================================== */

/* Hintergrundfarbe des gefüllten Balkens */
.progress-bar {
  background-color: #A50014 !important;  /* BD OÖ Rot */
}

/* Hintergrund der leeren Fläche (optional) */
.progress {
  background-color: #e9ecef !important;  /* neutrales Grau, wie Bootstrap-Default */
  border-radius: 5px;
  overflow: hidden;
}

/* Optional: animierter Übergang beim Fortschritt */
.progress-bar {
  transition: width 0.6s ease;
}

/* ======================================
   Hinweise / Validierungen im BD OÖ-Rot
   ====================================== */

/* Hilfetexte unter Fragen */
.help-block,
.text-info,
.question-help {
  color: #A50014 !important;     /* BD OÖ-Rot */
}

/* Validierungs- und Pflichtfeld-Hinweise */
.text-danger,
.error,
.alert-danger,
.ls-em-error {
  color: #A50014 !important;
  border-color: #A50014 !important;
}

/* Bootstrap-Alert-Boxen (z. B. "Bitte überprüfen Sie Ihre Eingabe") */
.alert-info {
  background-color: #fbe9eb !important;  /* sehr helles Rot für Hintergrund */
  border-color: #A50014 !important;
  color: #A50014 !important;
}

/* Optional: Warn- und Erfolgsmeldungen leicht angleichen */
.alert-warning {
  border-color: #A50014 !important;
  color: #A50014 !important;
}
.alert-success {
  border-color: #A50014 !important;
  color: #A50014 !important;
}
/* ======================================
   United – Yes/No (qtype Y) als rote Quadratkacheln
   für ANZEIGE: "Tastengruppe" (Button group)
   ====================================== */

/* 1) Button-Group ent-strecken & nebeneinander */
.ls-question[data-qtype="Y"] .answer .btn-group,
.question[data-qtype="Y"] .answer .btn-group {
  display: inline-flex !important;
  gap: 16px !important;
  width: auto !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Bootstrap/United 'btn-group-justified' neutralisieren */
.ls-question[data-qtype="Y"] .answer .btn-group.btn-group-justified,
.question[data-qtype="Y"] .answer .btn-group.btn-group-justified {
  display: inline-flex !important;
  width: auto !important;
}
.ls-question[data-qtype="Y"] .answer .btn-group.btn-group-justified > .btn,
.ls-question[data-qtype="Y"] .answer .btn-group.btn-group-justified > label.btn,
.question[data-qtype="Y"] .answer .btn-group.btn-group-justified > .btn,
.question[data-qtype="Y"] .answer .btn-group.btn-group-justified > label.btn {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important; /* überschreibt width:1% von Bootstrap */
}

/* 2) Die Labels (die eigentlichen „Buttons“) quadratisch & rot */
.ls-question[data-qtype="Y"] .answer .btn-group > .btn,
.ls-question[data-qtype="Y"] .answer .btn-group > label.btn,
.question[data-qtype="Y"] .answer .btn-group > .btn,
.question[data-qtype="Y"] .answer .btn-group > label.btn {
  width: 80px !important;
  height: 80px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  border: 2px solid var(--bdoo-red) !important;
  background: var(--bdoo-red) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  box-shadow: none !important;
  cursor: pointer !important;
  line-height: 1 !important;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease !important;
}

/* Hover */
.ls-question[data-qtype="Y"] .answer .btn-group > .btn:hover,
.ls-question[data-qtype="Y"] .answer .btn-group > label.btn:hover,
.question[data-qtype="Y"] .answer .btn-group > .btn:hover,
.question[data-qtype="Y"] .answer .btn-group > label.btn:hover {
  background: var(--bdoo-red-dark) !important;
  border-color: var(--bdoo-red-dark) !important;
}

/* 3) Ausgewählt: Bootstrap setzt .active auf das Label */
.ls-question[data-qtype="Y"] .answer .btn-group > .btn.active,
.ls-question[data-qtype="Y"] .answer .btn-group > label.btn.active,
.question[data-qtype="Y"] .answer .btn-group > .btn.active,
.question[data-qtype="Y"] .answer .btn-group > label.btn.active {
  background: var(--bdoo-red-dark) !important;
  border-color: var(--bdoo-red-dark) !important;
  transform: scale(1.05) !important;
  color: #fff !important;
}

/* 4) Tastaturfokus sichtbar */
.ls-question[data-qtype="Y"] .answer .btn-group > .btn:focus-visible,
.ls-question[data-qtype="Y"] .answer .btn-group > label.btn:focus-visible,
.question[data-qtype="Y"] .answer .btn-group > .btn:focus-visible,
.question[data-qtype="Y"] .answer .btn-group > label.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(165,0,20,.35) !important;
  outline: none !important;
}

/* 5) Mobile kleiner */
@media (max-width: 576px) {
  .ls-question[data-qtype="Y"] .answer .btn-group > .btn,
  .ls-question[data-qtype="Y"] .answer .btn-group > label.btn,
  .question[data-qtype="Y"] .answer .btn-group > .btn,
  .question[data-qtype="Y"] .answer .btn-group > label.btn {
    width: 64px !important;
    height: 64px !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
  }
}