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

/******************
  Zeltlager 2027 – LimeSurvey (fruity_twentythree)
  kompakt + dunkle Cards + grüner Button
******************/

:root{
  --zl-text:#e9f2ff;
  --zl-muted:rgba(233,242,255,.72);

  --zl-card:#2b3342;
  --zl-inner:#232b39;

  --zl-border:rgba(255,255,255,.16);
  --zl-border-soft:rgba(255,255,255,.10);

  --zl-blue:#2e6fbe;
  --zl-green:#6ea93a;

  --zl-radius:18px;
  --zl-radius-inner:16px;
  --zl-shadow:0 18px 45px rgba(0,0,0,.28);
}

/* ===== Basis (iFrame transparent) ===== */
html, body{
  background: transparent !important;
  color: var(--zl-text) !important;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
}

/* Fruity Header/Topbar weg */
.ls-header, .survey-header, .navbar, .topbar{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
  height:0 !important;
}

/* ===== Outer Card ===== */
#limesurvey, #survey-container{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)), var(--zl-card) !important;
  border: 1px solid var(--zl-border) !important;
  border-radius: var(--zl-radius) !important;
  box-shadow: var(--zl-shadow) !important;
  padding: 18px !important;

  font-size: 14px !important;
  line-height: 1.25 !important;
}

/* Bootstrap-Container neutralisieren */
#limesurvey .container, #limesurvey .container-fluid,
#survey-container .container, #survey-container .container-fluid{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ===== Inner Card (Form) ===== */
#limesurvey form, #survey-container form{
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.22)), var(--zl-inner) !important;
  border: 1px solid var(--zl-border-soft) !important;
  border-radius: var(--zl-radius-inner) !important;
  padding: 14px !important;

  margin-top: 0 !important;
}

/* Survey-Titel im iFrame ausblenden */
h1.survey-name, .survey-name, .survey-title, .survey-header h1{
  display:none !important;
}

/* Leere Platzhalter oben entfernen (verursachen “Luft”) */
#limesurvey .privacy.row,
#survey-container .privacy.row,
#limesurvey .survey-description.form-heading,
#survey-container .survey-description.form-heading{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
  min-height:0 !important;
}

/* Erste Gruppe nicht nach unten drücken */
#limesurvey form > :first-child{
  margin-top:0 !important;
  padding-top:0 !important;
}
#limesurvey .group-outer-container:first-child,
#limesurvey #group-0.group-outer-container{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* Panels/Wells/Fieldsets flach */
.card, .panel, .panel-body, .well, fieldset, .alert{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ===== Gruppen: Titel + Trennlinie ===== */
#limesurvey h2.group-title{
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: .2px !important;
  line-height: 1.15 !important;
  color: rgba(233,242,255,.98) !important;
  margin: 0px 0 10px !important;
  padding-bottom: 4px !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
#limesurvey h2.group-title::after{
  content:"";
  display:block;
  margin-top:6px;
  height:1px;
  width:46px;
  background: linear-gradient(90deg, var(--zl-green), var(--zl-blue));
  border-radius:2px;
  opacity:.9;
}

/* Trennlinie nur zwischen Gruppen */
.group-outer-container + .group-outer-container{
  position: relative;
  margin-top: 10px !important;
  padding-top: 10px !important;
}
.group-outer-container + .group-outer-container::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.25), rgba(255,255,255,.08));
}

/* Fruity “space-col” entschärfen (war der Abstands-Übeltäter) */
.group-container.space-col{
  margin: 0 0 0px !important;
  padding: 0 !important;
}
.group-outer-container{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ===== Fragen: Abstände sauber ===== */
/* Der Wrapper setzt gern komische Margins (z.B. 0 -12px 10px) -> normalisieren */
#limesurvey .question-container,
#limesurvey .question-wrapper,
#limesurvey .ls-question{
  margin: 0 0 12px !important;
  padding: 0 !important;
}

/* Titel-Container ohne Extra-Padding */
.question-title-container, .question-text-container{
  margin:0 !important;
  padding:0 !important;
}

/* Fragetitel */
.ls-question-title, .question-text, legend{
  font-size: 14px !important;
  font-weight: 800 !important;
  margin: 0 0 4px !important;
  color: rgba(233,242,255,.95) !important;
}

/* Pflichtstern neben Titel */
.question-title-container{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
}
.question-title-container .asterisk,
.question-title-container i.asterisk{
  display:inline-flex !important;
  line-height:1 !important;
  margin:0 !important;
  padding:0 !important;
  transform: translateY(-1px);
  color: rgba(255,107,107,.95) !important;
}
.question-title-container .question-text,
.question-title-container .ls-question-title{
  display:inline !important;
  margin:0 !important;
}

/* Hinweise/Fehler kompakt */
.question-valid-container{
  margin:0 !important;
  padding:0 !important;
  line-height:1.15 !important;
  min-height:0 !important;
}
.question-valid-container *{
  margin:0 !important;
  padding:0 !important;
  font-size:12.5px !important;
  line-height:1.15 !important;
}

/* Antwortenblock: etwas Abstand zur nächsten Frage, aber nicht riesig */
.ls-answers, .answer-container{
  margin: 0 0 0px !important;
  padding-top: 0 !important;
}

/* ===== Labels / Teilfragen (Type Q) ===== */
/* Standard-Label etwas größer + besser lesbar */
label, .control-label{
  font-size: 14px !important;
  font-weight: 650 !important;
  opacity: .96 !important;
  color: rgba(233,242,255,.92) !important;
}

/* Speziell Multiple short text (Q): Teilfragen minimal größer */
#limesurvey .answer-container label,
#limesurvey .answer-container .control-label{
  font-size: 13.2px !important;
}

/* ===== Inputs ===== */
.form-control, input, textarea, select{
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.25)), var(--zl-inner) !important;
  color: var(--zl-text) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  padding: 9px 11px !important;
}
.form-control:focus, input:focus, textarea:focus, select:focus{
  outline:none !important;
  border-color: var(--zl-blue) !important;
  box-shadow: 0 0 0 4px rgba(46,111,190,.22) !important;
}
.form-group{ margin: 0 0 6px !important; }

/* Checkbox/Radio */
input[type="checkbox"], input[type="radio"]{ accent-color: var(--zl-blue); }
.form-check, .answer-item{ margin: 4px 0 !important; }
.form-check-label, .answer-item label{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 !important;
  font-size: 13px !important;
  color: rgba(233,242,255,.92) !important;
}

/* ===== Button (grün) ===== */
.btn-primary, button[type="submit"], input[type="submit"], .ls-submit{
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)), var(--zl-green) !important;
  border: 0 !important;
  color: #0c1b2a !important;
  font-weight: 900 !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font-size: 13.5px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.25) !important;
}
.btn-primary:hover, button[type="submit"]:hover, input[type="submit"]:hover{
  filter: brightness(1.05);
}

/* Links */
a{ color:#fff !important; }
a:hover{ opacity:.92; }

/* ===== Modal (Pflichtfragen) lesbar ===== */
.modal-backdrop, .modal-backdrop.show{ opacity:.55 !important; }
.modal-content{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)), var(--zl-card) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.45) !important;
  color: var(--zl-text) !important;
}
.modal-header{ border-bottom: 1px solid rgba(255,255,255,.10) !important; }
.modal-title, .modal-body, .modal-body *{
  color: rgba(233,242,255,.95) !important;
  opacity: 1 !important;
}
.modal-footer{ border-top: 1px solid rgba(255,255,255,.10) !important; }
.modal-footer .btn, .modal-footer button, .modal-footer input[type="button"], .modal-footer input[type="submit"]{
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)), var(--zl-green) !important;
  border: 0 !important;
  color: #0c1b2a !important;
  font-weight: 900 !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
}

/* ===== Completed / Danke-Seite ===== */
#limesurvey .completed-wrapper,
#survey-container .completed-wrapper{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), var(--zl-inner) !important;
  border: 1px solid var(--zl-border-soft) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.35) !important;
}
#limesurvey .completed-wrapper h1,
#limesurvey .completed-wrapper h2,
#limesurvey .completed-wrapper h3{
  color: rgba(233,242,255,.98) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  margin: 0 0 6px !important;
}
#limesurvey .completed-wrapper p,
#limesurvey .completed-wrapper .lead{
  color: rgba(233,242,255,.85) !important;
  font-size: 13.5px !important;
}

/* ===== Scrollbar (WebKit) ===== */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.25); border-radius:10px; }
::-webkit-scrollbar-track{ background: transparent; }

/* ===== Mobile ===== */
@media (max-width: 768px){
  #limesurvey, #survey-container{ padding: 16px !important; border-radius: 14px !important; }
  #limesurvey form, #survey-container form{ padding: 12px !important; border-radius: 14px !important; }
}