/******************
   METHA 360 – PREMIUM THEME
******************/

/* ----------------------------------------------------
   0. Design-Variablen
---------------------------------------------------- */
:root {
    --metha-bg: rgba(255, 255, 255, 0.85);
    --metha-text: #1f2d3a;
    --metha-gold: #d4af37;
    --metha-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    --metha-radius: 12px;
    --metha-font: 'Open Sans', sans-serif;
    --header-height: 90px;
}

/* ----------------------------------------------------
   1. Global / Navbar / Header
---------------------------------------------------- */

body {
    padding-top: 0 !important;
    font-family: var(--metha-font);
}

.navbar.fixed-top {
    margin-bottom: 0;
}

.navbar {
    padding-bottom: 0;
}

.top-container,
.top-container .container-fluid,
.top-container .row,
.top-container .header-image,
.top-container .survey-header-image,
.top-container .image-container {
    padding-bottom: 0;
    margin-bottom: 0;
}

.top-container {
    padding-bottom: 32px;
    overflow: visible;
}

/* ----------------------------------------------------
   2. Sticky Progressbar (milchig)
---------------------------------------------------- */

.progress-wrapper {
    position: sticky;
    top: 90px !important;
    z-index: 9999;

    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(12px);

    padding: 12px 26px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

#outerframeContainer {
    margin-top: calc(var(--header-height) + 50px);
}

.group-title {
    margin-top: -10px;
    margin-bottom: 30px;
}

/* ----------------------------------------------------
   3. Fragecontainer (modern, stabil, breiter)
---------------------------------------------------- */

.ls-question-wrapper,
.question-container {
    background: var(--metha-bg);
    border-radius: var(--metha-radius);
    padding: 20px 22px 12px 22px;
    box-shadow: var(--metha-shadow);
    max-width: 900px;
    margin: 22px auto;
}

/* ----------------------------------------------------
   4. Antworten / Antwort-Container
---------------------------------------------------- */

.ls-answers,
.answer-container {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.ls-answers ul {
    list-style: none;
    padding-left: 0;
    margin: 6px 0 4px 0;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;   /* zentriert */
    width: 100% !important;
}

.ls-answers ul li,
.ls-answers .answer-item {
    margin: 0 0 6px 0;
    padding: 0;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* zentriert */
    width: 100% !important;
}

/* ----------------------------------------------------
   5. Radio Buttons – FormFox-Style
---------------------------------------------------- */

.ls-answers input[type="radio"] {
    appearance: radio;
    -webkit-appearance: radio;
    width: 18px;
    height: 18px;
    margin: 0 8px 0 0;
    cursor: pointer;
    accent-color: var(--metha-gold);
}

.ls-answers label,
.answertext,
.ls-answers .answer-item label {
    font-family: var(--metha-font);
    font-size: 16px;
    font-weight: 600;
    color: var(--metha-text);
    display: inline-block;
    margin: 0;
    cursor: pointer;
    line-height: 1.38;
}

/* ----------------------------------------------------
   6. Typografie – Titel & Fragentext
---------------------------------------------------- */

.question-title {
    font-family: var(--metha-font);
    font-size: 20px;
    font-weight: 550;
    margin-bottom: 1px;
    color: var(--metha-text);
}

.question-text {
    font-family: var(--metha-font);
    font-size: 16px;
    line-height: 1.38;
    margin-bottom: 10px;
    color: var(--metha-text);
}

/* ----------------------------------------------------
   7. DIMENSION / EBENE – wie Fragecontainer + Apple-Grau
---------------------------------------------------- */

.group-description {
    max-width: 900px !important;
    margin: 22px auto !important;
    padding: 20px 22px 22px 22px !important;

    border-radius: var(--metha-radius) !important;
    box-shadow: var(--metha-shadow) !important;
    overflow: hidden !important;

    background: rgba(242, 242, 247, 0.92) !important; /* Apple-Grau */
    border: none !important;
}

.group-description > div,
.group-description .row,
.group-description .container-fluid,
.group-description .col,
.group-description .col-12 {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: var(--metha-radius) !important;
    overflow: hidden !important;
}

/* ----------------------------------------------------
   WELCOME / INTRO – wie Fragecontainer + Apple-Grau
---------------------------------------------------- */

.survey-description,
.survey-welcome,
.survey-introduction,
.survey-group-description,
.survey-header-text {
    max-width: 900px !important;
    margin: 22px auto !important;
    padding: 24px 26px 26px 26px !important;

    background: rgba(242, 242, 247, 0.92) !important; /* Apple-Grau */
    border-radius: var(--metha-radius) !important;
    box-shadow: var(--metha-shadow) !important;
    border: none !important;
    overflow: hidden !important;
}

/* Innere Wrapper neutralisieren */
.survey-description > div,
.survey-welcome > div,
.survey-introduction > div,
.survey-group-description > div,
.survey-header-text > div {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: var(--metha-radius) !important;
    overflow: hidden !important;
}

/* ----------------------------------------------------
   END MESSAGE – wie Intro/Welcome + Apple-Grau
---------------------------------------------------- */

.survey-end-message {
    max-width: 900px !important;
    margin: 22px auto !important;
    padding: 24px 26px 26px 26px !important;

    background: rgba(242, 242, 247, 0.92) !important; /* Apple-Grau */
    border-radius: var(--metha-radius) !important;
    box-shadow: var(--metha-shadow) !important;
    border: none !important;
    overflow: hidden !important;
}

/* Innere Wrapper neutralisieren */
.survey-end-message > div {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: var(--metha-radius) !important;
    overflow: hidden !important;
}