/******************
    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
*/




/* -------------------------------------------------------
   1) CSS VARIABLES
------------------------------------------------------- */
:root {
  --clr-white: #EAEAEA;
  --clr-gold: #C5A059;
  --clr-anthracite: #1A1C20; /* Fast schwarz */
  --clr-gray: #ACA899;      /* Etwas heller für bessere Lesbarkeit */
  --clr-bg-dark: #121212;   /* Fallback Hintergrund */
  --clr-system-green: #2ecc71;

  --font-head: "Montserrat", sans-serif;
  --font-body: "Montserrat", sans-serif;
  --font-serif: "Cormorant Garamond", serif;
  --font-mono: "Roboto", monospace; /* Für System Status */

  --fs-m: clamp(1rem, 2vw, 1.125rem);
  --fs-l: clamp(1.2rem, 3vw, 1.4rem);
  --fs-l-card: clamp(1.5rem, 4vw, 2rem);
  --fs-xl: clamp(1.8rem, 5vw, 2.5rem);

  --radius: 4px;
  --space-m: 1.25rem;
  --ts: 0.5s ease;

  --header-height: 80px; 
  --button-height: 60px; 
}

/* -------------------------------------------------------
   2) BASE STYLES
------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  color: var(--clr-gray);
  font-family: var(--font-body);
  font-size: 16px;
  background-color: var(--clr-bg-dark);
  background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
                    url("/background-desktop.svg");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}

@media screen and (max-width: 768px) {
  html {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
                      url("/background-mobile.svg");
  }
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: var(--ts); }
a:hover { color: var(--clr-gold); }

/* -------------------------------------------------------
   3) TYPOGRAPHY
------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--clr-white);
  margin: 0 0 var(--space-m);
  line-height: 1.2;
  letter-spacing: -0.03em;
}

h1 { font-size: var(--fs-xl); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-l); }

p { font-size: var(--fs-m); margin: 0 0 var(--space-m); line-height: 1.6; }
li { font-size: var(--fs-m); margin: 0 0 var(--space-m); line-height: 1.6; }

/* -------------------------------------------------------
   4) HEADER (FIXED)
------------------------------------------------------- */
.navbar  {
  position: fixed; /* Bleibt immer oben */
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background: rgba(26, 28, 32, 0.95); /* Leicht transparent */
  backdrop-filter: blur(10px); /* Milchglas-Effekt */
  z-index: 1000;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;

  align-items: center;
  padding: 0 var(--space-m);
  position: relative;
}

.logo { height: 50px; width: auto; }

/* Dotted Lines */
.gold-dotted-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, var(--clr-gold) 33%, rgba(255,255,255,0) 0%);
  background-position: bottom;
  background-size: 3px 1px;
  background-repeat: repeat-x;
}
.gold-dotted-line.bottom { bottom: 0; }
.gold-dotted-line.top { top: 0; }

/* Desktop Button Position */
.header-button {
  display: none;
  position: absolute;
  right: var(--space-m);
}

.logo-container{
    padding: 0!important;
}

.logo-container > img {
  padding: 0!important;
}

@media (min-width: 800px) {
  .header-button { display: inline-block; }
  .logo { height: 60px; }
}

/* -------------------------------------------------------
   5) BUTTONS
------------------------------------------------------- */
.button {

  padding: 0.75rem 1.5rem;
  background: transparent;
  color: var(--clr-gold);
  font-weight: 500;
  border-radius: var(--radius);
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  border: 1px solid var(--clr-gold);
}

.button:hover {
  background: var(--clr-gold);
  color: var(--clr-white);
}

/* Mobile Sticky Button */
.sticky-footer-button {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  background: var(--clr-gold);
  color: var(--clr-bg-dark);

}

.sticky-footer-button:hover {
  background: var(--clr-bg-dark);
  color: var(--clr-gold);
}


@media (min-width: 800px) {
  .sticky-footer-button { display: none; }
}

/* -------------------------------------------------------
   6) BADGES (Optimiert)
------------------------------------------------------- */
#badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem 0;
}

#badges img {
  max-width: 65px;
  height: auto;
  /* Graustufen-Filter standardmäßig */
  filter: grayscale(100%) drop-shadow(0 2px 4px rgba(0,0,0,0.3)); 
  opacity: 0.7;
  transition: all 0.3s ease;
}

#badges a:hover img {
  transform: scale(1.05);
  filter: grayscale(0%) drop-shadow(0 8px 12px rgba(197, 160, 89, 0.4)); /* Goldener Schein */
  opacity: 1;
}

/* -------------------------------------------------------
   7) FOOTER
------------------------------------------------------- */
.site-footer {
  background: var(--clr-anthracite);
  padding: 2rem var(--space-m);
  position: relative;
  margin-top: auto; /* Drückt Footer nach unten bei wenig Inhalt */
  font-size: 0.85rem;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.footer-nav a:hover { text-decoration: underline; color: var(--clr-gold); }
.separator { margin: 0 0.5rem; color: var(--clr-gray); }

/* System Status */
.footer-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  padding-bottom:4rem;
}

.system-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.05);
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
}

.status-dot {
  width: 8px;
  height: 8px;
  background-color: var(--clr-system-green);
  border-radius: 50%;
  box-shadow: 0 0 5px var(--clr-system-green);
}

.status-text { font-size: 0.75rem; letter-spacing: 1px;}
.version { font-size: 0.7rem; }

@media (min-width: 800px) {
  .footer-content {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  .footer-right { align-items: flex-end;   padding-bottom:1rem;}
}


















/* -------------------------------------------------------
   LIME-SURVEY TOTAL OVERHAUL (GOLD, ANTHRACITE, WHITE)
------------------------------------------------------- */

/* 1) VARIABLEN & BASIS (System-Fonts) */
:root {
  --clr-white: #EAEAEA;
  --clr-gold: #C5A059;
  --clr-anthracite: #1A1C20;
  --clr-gray: #ACA899;
  --clr-bg-dark: #121212;
  --radius: 4px;
  --ts: 0.5s ease;
  
  /* Fallback Fonts */
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Globaler Reset */
body, #outerframeContainer, .fruity_twentythree {
  background-color: var(--clr-bg-dark) !important;
  color: var(--clr-white) !important;
  font-family: var(--font-main) !important;
}

/* 2) LOGO & HEADER FIX (Korrektur padding: 0) */
.navbar-brand, .logo-container {
  padding: 0 !important;
  margin: 0 !important;
  background-color: transparent !important;
}

.logo-container > img, .navbar-brand > img {
  max-height: 90px !important;
  width: auto !important;
  padding: 0 !important; /* Korrigiert von 'none' */
  display: block;
}

.navbar, .header, .ls-nav-container {
  background-color: var(--clr-anthracite) !important;
  border-bottom: 2px solid var(--clr-gold) !important;
}

/* 3) SLIDER (ALLE TYPEN) */
.slider-track {
  background: var(--clr-anthracite) !important;
  border: 1px solid var(--clr-gray) !important;
}

.slider-selection {
  background: var(--clr-gold) !important;
}

.slider-handle, .ui-slider-handle {
  background: var(--clr-white) !important;
  border: 2px solid var(--clr-gold) !important;
  box-shadow: 0 0 5px var(--clr-gold) !important;
}

.slider.slider-horizontal .slider-tick, 
.slider.slider-horizontal .slider-handle {
  margin-top: -7px !important;
}

/* 4) DIALOGE, MODALS & POPUPS */
.modal-content, .ui-dialog, .popover {
  background-color: var(--clr-anthracite) !important;
  color: var(--clr-white) !important;
  border: 1px solid var(--clr-gold) !important;
  border-radius: var(--radius) !important;
}

.modal-header, .ui-dialog-titlebar {
  border-bottom: 1px solid var(--clr-gold) !important;
  background-color: rgba(197, 160, 89, 0.1) !important;
}

.modal-footer {
  border-top: 1px solid var(--clr-gray) !important;
}

/* 5) FRAGEN-CONTAINER & MATRIX-TABELLEN */
.question-container {
  background-color: var(--clr-anthracite) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: var(--radius) !important;
  margin-bottom: 2rem !important;
  padding: 1.5rem !important;
}

/* Matrix / Tabellen */
.ls-answers table, .table {
  background-color: transparent !important;
  color: var(--clr-white) !important;
}

.table-hover tbody tr:hover {
  background-color: rgba(197, 160, 89, 0.05) !important;
}

.ls-answers thead th, .table thead th {
  background-color: var(--clr-bg-dark) !important;
  color: var(--clr-gold) !important;
  border-bottom: 2px solid var(--clr-gold) !important;
}

.ls-even, .table-striped tbody tr:nth-of-type(even) {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

/* 6) ALLE BUTTONS (KEIN BLAU/ROT/GRÜN) */
.btn, .ls-move-btn, button {
  border-radius: var(--radius) !important;
  text-transform: uppercase !important;
  font-weight: bold !important;
  transition: var(--ts) !important;
}

/* Haupt-Buttons (Gold) */
.btn-primary, .btn-success, #ls-button-submit, .ls-move-next-btn, .btn-info {
  background-color: var(--clr-gold) !important;
  border-color: var(--clr-gold) !important;
  color: var(--clr-anthracite) !important;
}

/* Hover-Effekt (Weiß) */
.btn-primary:hover, .ls-move-next-btn:hover, .btn-success:hover {
  background-color: var(--clr-white) !important;
  border-color: var(--clr-white) !important;
  color: var(--clr-anthracite) !important;
}

/* Zurück-Buttons (Grau/Transparent) */
.btn-secondary, .ls-move-previous-btn, .btn-cancel, .btn-danger {
  background-color: transparent !important;
  border: 1px solid var(--clr-gray) !important;
  color: var(--clr-white) !important;
}

/* 7) FORMULAR-ELEMENTE (INPUTS, CHECKBOX, RADIO) */
.form-control, select, textarea {
  background-color: var(--clr-bg-dark) !important;
  border: 1px solid var(--clr-gray) !important;
  color: var(--clr-white) !important;
}

.form-control:focus {
  border-color: var(--clr-gold) !important;
  box-shadow: 0 0 0 0.25rem rgba(197, 160, 89, 0.2) !important;
}

/* Radio & Checkbox (nur Gold) */
.form-check-input:checked, 
.radio-item input[type=radio]:checked + label::before,
.checkbox-item input[type=checkbox]:checked + label::before {
  background-color: var(--clr-gold) !important;
  border-color: var(--clr-gold) !important;
}

/* Validierungshaken (Grün entfernt) */
.was-validated .form-control:valid, .form-control.is-valid {
  border-color: var(--clr-gold) !important;
  background-image: none !important;
}

/* 8) ALERTS & FORTSCHRITT (KEIN ROT/GRÜN) */
.alert {
  background-color: var(--clr-anthracite) !important;
  color: var(--clr-white) !important;
  border: none !important;
  border-left: 5px solid var(--clr-gold) !important;
}

.alert-danger, .alert-error, .alert-success, .alert-info {
  background-color: var(--clr-anthracite) !important;
  color: var(--clr-white) !important;
  border-left: 5px solid var(--clr-gold) !important;
}

.progress {
  background-color: var(--clr-anthracite) !important;
  height: 10px !important;
}

.progress-bar {
  background-color: var(--clr-gold) !important;
}

/* 9) KALENDER / DATEPICKER */
.datepicker table tr td.active, 
.datepicker table tr td.active:hover {
  background-color: var(--clr-gold) !important;
  color: var(--clr-anthracite) !important;
}

.datepicker {
  background-color: var(--clr-anthracite) !important;
  color: var(--clr-white) !important;
  border: 1px solid var(--clr-gold) !important;
}

/* 10) FOOTER */
.site-footer {
  background-color: var(--clr-anthracite) !important;
  border-top: 1px solid var(--clr-gold) !important;
  color: var(--clr-gray) !important;
}


















/* -------------------------------------------------------
   VOLLSTÄNDIGE ANPASSUNG AN GLOBAL.CSS
------------------------------------------------------- */

/* 1) KERN-VARIABLEN ÜBERSCHREIBEN */
:root {
  --bs-primary: var(--clr-gold) !important;
  --bs-primary-rgb: 197, 160, 89 !important;
  --bs-secondary: var(--clr-gray) !important;
  --bs-success: var(--clr-system-green) !important;
  --bs-danger: #e74c3c !important; /* Etwas satteres Rot für Fehler */
  --bs-warning: var(--clr-gold) !important;
  --bs-info: var(--clr-gray) !important;
  --bs-light: var(--clr-anthracite) !important;
  --bs-dark: var(--clr-bg-dark) !important;
  
  --bs-body-bg: var(--clr-bg-dark) !important;
  --bs-body-color: var(--clr-white) !important;
  --bs-border-color: rgba(255, 255, 255, 0.1) !important;
  
  /* Schriftarten */
  --bs-font-sans-serif: var(--font-body) !important;
  --bs-body-font-family: var(--font-body) !important;
}

/* 2) BASIS & HINTERGRÜNDE */
body {
  background-color: var(--clr-bg-dark) !important;
  color: var(--clr-white) !important;
  font-family: var(--font-body) !important;
}

#outerframeContainer, .fruity_twentythree {
  background-color: var(--clr-bg-dark) !important;
}

.top-container .ls-progress-container{
  padding-top:1rem;
}

/* 3) HEADERS (ALLE KLASSEN) */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
.ls-label-question, .group-title {
  color: var(--clr-gold) !important;
  font-family: var(--font-head) !important;
  font-weight: 600 !important;
}

/* 4) BUTTONS (KOMPLETT-ERSATZ) */
.btn {
  border-radius: var(--radius) !important;
  transition: var(--ts) !important;
  font-family: var(--font-head) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

.slider-list .slider .slider-handle {
  background-color: var(--clr-gold);
  background-image: unset;
}

/* Primary & Next Buttons */
.btn-primary, #ls-button-submit, .ls-move-next-btn, .btn-success {
  background-color: var(--clr-gold) !important;
  border-color: var(--clr-gold) !important;
  color: var(--clr-anthracite) !important;
}

.btn-primary:hover, .ls-move-next-btn:hover {
  background-color: var(--clr-white) !important;
  border-color: var(--clr-white) !important;
  filter: drop-shadow(0 0 8px rgba(197, 160, 89, 0.4)) !important;
  box-shadow: 0px 0px 0px 3px rgba(197, 160, 89, 0.4)!important; 
}
}

/* Secondary & Previous Buttons */
.btn-secondary, .ls-move-previous-btn, .btn-cancel {
  background-color: var(--clr-anthracite) !important;
  border-color: var(--clr-gray) !important;
  color: var(--clr-white) !important;
}

/* Outline Buttons */
.btn-outline-primary {
  border-color: var(--clr-gold) !important;
  color: var(--clr-gold) !important;
}

.btn-outline-primary:hover {
  background-color: var(--clr-gold) !important;
  color: var(--clr-anthracite) !important;
}

/* 5) ALERTS (SYSTEM-MELDUNGEN) */
.alert {
  border-radius: var(--radius) !important;
  border: none !important;
}

.alert-success {
  background-color: rgba(46, 204, 113, 0.2) !important;
  color: var(--clr-system-green) !important;
  border-left: 4px solid var(--clr-system-green) !important;
}

.alert-danger, .alert-error {
  background-color: rgba(231, 76, 60, 0.2) !important;
  color: #ff6b6b !important;
  border-left: 4px solid #e74c3c !important;
}

.alert-info {
  background-color: var(--clr-anthracite) !important;
  color: var(--clr-gold) !important;
  border-left: 4px solid var(--clr-gold) !important;
}

.alert-warning {
  background-color: rgba(197, 160, 89, 0.2) !important;
  color: var(--clr-gold) !important;
}

/* 6) FORMULAR-ELEMENTE & CHECKMARKS */
.form-control, .form-select, textarea {
  background-color: var(--clr-anthracite) !important;
  border: 1px solid var(--clr-gray) !important;
  color: var(--clr-white) !important;
}

.form-control:focus {
  border-color: var(--clr-gold) !important;
  box-shadow: 0 0 0 0.25rem rgba(197, 160, 89, 0.25) !important;
}

/* Grüne Haken & Validierung */
.is-valid, .was-validated :valid {
  border-color: var(--clr-system-green) !important;
}

.valid-feedback, .valid-tooltip {
  color: var(--clr-system-green) !important;
}

/* Checkboxen & Radio Buttons */
.form-check-input:checked, 
.radio-item input[type=radio]:checked + label::before,
.checkbox-item input[type=checkbox]:checked + label::before {
  background-color: var(--clr-gold) !important;
  border-color: var(--clr-gold) !important;
}

/* Den Standard-Grün-Haken überschreiben */
.was-validated .form-control:valid, .form-control.is-valid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%232ecc71' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
}

/* 7) SPEZIFISCHE LIME-SURVEY ELEMENTE */
.question-container {
  background-color: var(--clr-anthracite) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: var(--radius) !important;
  margin-bottom: 2rem !important;
}

.ls-even {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

.progress {
  background-color: var(--clr-anthracite) !important;
}

.progress-bar {
  background-color: var(--clr-gold) !important;
}

/* Navbar / Header */
.navbar {
  background-color: var(--clr-anthracite) !important;
  border-bottom: 1px dotted var(--clr-gold) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* Footer */
.site-footer {
  background-color: var(--clr-bg-dark) !important;
  border-top: 1px solid var(--clr-anthracite) !important;
  color: var(--clr-gray) !important;
}