/* =========================================================
   INFORMATION2GO – LIMESURVEY THEME
   Mandantenfähig
   ========================================================= */


/* ---------------------------------------------------------
   1. SEITENHINTERGRUND

   Das eigentliche Hintergrundbild wird automatisch
   durch custom.js anhand der Subdomain gesetzt.

   Beispiel:
   tgl001 -> background-tgl001.jpg
   sw001  -> background-sw001.jpg
   --------------------------------------------------------- */

html,
body {
    min-height: 100%;
}

body {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}


/* ---------------------------------------------------------
   2. HAUPTKARTE
   --------------------------------------------------------- */

#outerframeContainer.i2g-card-shell,
.i2g-card-shell {

    box-sizing: border-box !important;

    width: calc(100% - 40px) !important;
    max-width: 900px !important;

    margin: 25px auto 60px auto !important;

    /* überall sauberer Innenabstand */
    padding: 45px 50px 50px 50px !important;

    /* leicht grau/grün statt hartem Weiß */
    background: rgba(239, 242, 237, 0.97) !important;

    opacity: 1 !important;

    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;

    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    border-radius: 24px !important;

    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.28) !important;

    overflow: hidden !important;
}


/* ---------------------------------------------------------
   3. LIMESURVEY-INHALT
   komplette Breite innerhalb der Karte
   --------------------------------------------------------- */

#outerframeContainer.i2g-card-shell > .container-fluid,
#outerframeContainer.i2g-card-shell .survey-container {

    box-sizing: border-box !important;

    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    background: transparent !important;
}


/* ---------------------------------------------------------
   4. TEXTE
   --------------------------------------------------------- */

#outerframeContainer.i2g-card-shell h1,
#outerframeContainer.i2g-card-shell h2,
#outerframeContainer.i2g-card-shell h3,
#outerframeContainer.i2g-card-shell h4,
#outerframeContainer.i2g-card-shell p,
#outerframeContainer.i2g-card-shell .survey-welcome,
#outerframeContainer.i2g-card-shell .survey-description,
#outerframeContainer.i2g-card-shell .group-description {

    text-align: left !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ---------------------------------------------------------
   5. ÜBERSCHRIFT
   --------------------------------------------------------- */

#outerframeContainer.i2g-card-shell h1 {

    margin-top: 0 !important;
    margin-bottom: 10px !important;

    line-height: 1.08 !important;
}


/* ---------------------------------------------------------
   6. BILDER IM FRAGEBOGEN
   --------------------------------------------------------- */

#outerframeContainer.i2g-card-shell img {

    display: block;

    max-width: 100% !important;
    height: auto !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ---------------------------------------------------------
   7. FRAGEN / FORMULARE
   --------------------------------------------------------- */

#outerframeContainer.i2g-card-shell .question-container,
#outerframeContainer.i2g-card-shell .question-wrapper {

    box-sizing: border-box !important;

    width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ---------------------------------------------------------
   8. BUTTONS
   --------------------------------------------------------- */

#outerframeContainer.i2g-card-shell .btn-primary {

    border-radius: 10px !important;

    padding: 10px 22px !important;
}


/* ---------------------------------------------------------
   9. FOOTER
   --------------------------------------------------------- */

.i2g-footer {

    width: calc(100% - 40px);
    max-width: 900px;

    margin: -35px auto 35px auto;

    text-align: center;

    font-size: 13px;

    color: rgba(255, 255, 255, 0.90);

    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.65);
}


/* ---------------------------------------------------------
   10. TABLET / HANDY
   --------------------------------------------------------- */

@media (max-width: 768px) {

    body {
        background-attachment: scroll !important;
    }

    #outerframeContainer.i2g-card-shell,
    .i2g-card-shell {

        width: calc(100% - 24px) !important;

        margin-top: 15px !important;
        margin-bottom: 35px !important;

        padding:
            28px
            22px
            35px
            22px !important;

        border-radius: 18px !important;
    }

    #outerframeContainer.i2g-card-shell h1 {

        font-size: 32px !important;
        line-height: 1.08 !important;
    }

    .i2g-footer {

        width: calc(100% - 24px);

        margin-top: -20px;
        margin-bottom: 25px;
    }
}


/* ---------------------------------------------------------
   11. KLEINE HANDYS
   --------------------------------------------------------- */

@media (max-width: 480px) {

    #outerframeContainer.i2g-card-shell,
    .i2g-card-shell {

        width: calc(100% - 16px) !important;

        padding:
            22px
            17px
            28px
            17px !important;

        border-radius: 15px !important;
    }

    #outerframeContainer.i2g-card-shell h1 {

        font-size: 28px !important;
    }
}

/* ---------------------------------------------------------
   SYSTEMFRAGE HOST VERSTECKEN
   --------------------------------------------------------- */

[data-code="HOST"],
[data-question-code="HOST"],
[data-qcode="HOST"] {
    display: none !important;
}