/* =========================================
   VS MONDWEG
   RESPONSIVE VERSION
   ========================================= */


/* =========================================
   GEMEINSAMER FOOTER
   DESKTOP + MOBIL
   ========================================= */

.mobile-footer-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    clear: both !important;
    box-sizing: border-box !important;
}

.mobile-footer {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    margin: 30px 0 0 0 !important;
    padding: 22px 15px 18px 15px !important;

    text-align: center !important;
    background: #eef3f9 !important;
}


/* Vier Gütesiegel im gemeinsamen Footer */

.mobile-footer-guetesiegel {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    gap: 24px !important;
    margin: 0 auto 18px auto !important;
}

.mobile-footer-guetesiegel a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mobile-footer-guetesiegel img {
    display: block !important;
    width: auto !important;
    max-width: 90px !important;
    max-height: 75px !important;
    height: auto !important;
    object-fit: contain !important;
}


/* mondweg.at */

.mobile-footer-domain {
    margin: 0 0 8px 0 !important;

    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: bold !important;

    color: #333333 !important;
}


/* Impressum / Datenschutz */

.mobile-footer-links {
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #666666 !important;
}

.mobile-footer-links a,
.mobile-footer-links a:link,
.mobile-footer-links a:visited {
    color: #477fca !important;
    text-decoration: none !important;
}

.mobile-footer-links a:hover,
.mobile-footer-links a:active {
    color: #477fca !important;
    text-decoration: underline !important;
}

.mobile-footer-links span {
    margin: 0 8px !important;
}


/* =========================================
   HOMEPAGE:
   ALTE GROSSE GÜTESIEGEL AUSBLENDEN

   Die Gütesiegel befinden sich jetzt
   ausschließlich im gemeinsamen Footer.
   ========================================= */

.home-guetesiegel {
    display: none !important;
}


/* =========================================
   MOBILE VERSION
   ========================================= */

@media screen and (max-width: 900px) {

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;

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

        overflow-x: hidden !important;
    }


    /* =========================================
       ALTES DESKTOP-LAYOUT MOBIL ANPASSEN
       ========================================= */

    body > table.homepage-gesamt {
        width: 100% !important;
        max-width: 100% !important;
    }

    body > table.homepage-gesamt > tbody {
        width: 100% !important;
        max-width: 100% !important;
    }


    /* Alten Desktop-Kopf ausblenden */

    tr.homepage-kopf {
        display: none !important;
    }


    /* =========================================
       HOMEPAGE-HAUPTBEREICH
       ========================================= */

    tr.homepage-hauptbereich {
        display: table-row !important;
        width: 100% !important;
    }


    /* Linke Desktop-Navigation ausblenden */

    td.homepage-navigation {
        display: none !important;
    }


    /* Rechte Desktop-Seitenleiste ausblenden */

    td.homepage-rechts,
    .homepage-rechts {
        display: none !important;
    }


    /* Mittleren Inhaltsbereich sichtbar halten */

    td.homepage-inhalt {
        display: table-cell !important;

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

        box-sizing: border-box !important;
    }

    td.homepage-inhalt > table {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border-spacing: 0 !important;
        box-sizing: border-box !important;
    }


    /* =========================================
       HOMEPAGE-INHALT

       WICHTIG:
       Diese Zelle darf NICHT ausgeblendet
       oder auf display:block gesetzt werden.
       ========================================= */

    td.text.homepage-text {
        display: table-cell !important;

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

        height: auto !important;

        visibility: visible !important;
        opacity: 1 !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }


    .home-hauptinhalt {
        display: block !important;

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

        margin: 0 auto !important;

        visibility: visible !important;
        opacity: 1 !important;

        box-sizing: border-box !important;
    }


    /* =========================================
       SCHULBILD
       ========================================= */

    .home-schulbild {
        display: block !important;

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

        visibility: visible !important;
        opacity: 1 !important;

        text-align: center !important;
        box-sizing: border-box !important;
    }

    .home-schulbild a {
        display: block !important;
        width: 100% !important;
    }

    .home-schulbild img {
        display: block !important;

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

        margin: 0 auto !important;

        visibility: visible !important;
        opacity: 1 !important;
    }


    /* =========================================
       KONTAKT
       ========================================= */

    .home-kontakt {
        display: block !important;

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

        visibility: visible !important;
        opacity: 1 !important;

        box-sizing: border-box !important;
    }


    /* =========================================
       ALTE HOMEPAGE-GÜTESIEGEL

       Nicht mehr anzeigen, da sie jetzt
       im gemeinsamen Footer stehen.
       ========================================= */

    .home-guetesiegel {
        display: none !important;
    }


    /* =========================================
       ALLGEMEINER INHALT AUF HANDBREITE
       ========================================= */

    .text,
    .headline,
    .subheadline {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
    }

    .text img,
    .headline img,
    .subheadline img {
        max-width: 100% !important;
        height: auto !important;
    }


    /*
       Normale Inhaltstabellen dürfen mobil
       untereinander dargestellt werden.

       Die Homepage-Hauptzelle selbst ist
       hiervon ausgenommen.
    */

    .text > table,
    .text > table > tbody,
    .text > table > tbody > tr {
        display: block !important;

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

        box-sizing: border-box !important;
    }

    .text > table > tbody > tr > td {
        display: block !important;

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

        box-sizing: border-box !important;
    }


    /* Homepage-Ausnahme */

    td.text.homepage-text {
        display: table-cell !important;
    }


    /* Tabellen in Subheadline / HTML */

    .subheadline table,
    .subheadline tbody,
    .subheadline tr,
    .subheadline td {
        display: block !important;

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

        box-sizing: border-box !important;
    }


    /* =========================================
       GEMEINSAMER MOBILER KOPF
       ========================================= */

    .mobile-kopf-container {
        display: block !important;

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

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    .mobile-kopf {
        display: flex !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 18px !important;

        width: 100% !important;
        height: 132px !important;

        margin: 0 !important;
        padding: 12px 27px !important;

        box-sizing: border-box !important;

        background: #477fca !important;
    }


    /* Logo */

    .mobile-kopf img {
        display: block !important;

        width: 74px !important;
        height: 74px !important;

        flex: 0 0 74px !important;
        object-fit: contain !important;
    }


    /* =========================================
       SCHULNAME
       ========================================= */

    .mobile-kopf-titel {
        margin: 0 !important;
        padding: 0 !important;

        color: #ffffff !important;

        line-height: 1.05 !important;
        text-align: left !important;
    }

    .mobile-kopf-volksschule {
        display: block !important;

        font-size: 24px !important;
        font-weight: normal !important;
        line-height: 1.05 !important;
    }

    .mobile-kopf-mondweg {
        display: block !important;

        font-size: 28px !important;
        font-weight: bold !important;
        line-height: 1.05 !important;
    }


    /* =========================================
       MOBILE AKTIONSLEISTE
       Burger + Einschreibung + 1. Klassen
       ========================================= */

    .mobile-aktionsleiste {
        display: flex !important;
        align-items: stretch !important;

        width: 100% !important;
        height: 48px !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 8px !important;

        box-sizing: border-box !important;
        background: transparent !important;
    }


    /* =========================================
       BURGER
       ========================================= */

    .mobile-menue-button {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 52px !important;
        min-width: 52px !important;
        height: 48px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
        border: 0 !important;

        border-top-left-radius: 0 !important;
        border-top-right-radius: 11px !important;
        border-bottom-right-radius: 11px !important;
        border-bottom-left-radius: 0 !important;

        background: #477fca !important;
        color: #ffffff !important;

        font-size: 25px !important;
        line-height: 1 !important;
        font-weight: bold !important;

        cursor: pointer !important;
    }


    /* =========================================
       DIE BEIDEN GROSSEN BUTTONS
       ========================================= */

    .mobile-aktionsbutton,
    .mobile-aktionsbutton:link,
    .mobile-aktionsbutton:visited {
        display: flex !important;
        flex: 1 1 0 !important;

        align-items: center !important;
        justify-content: center !important;

        min-width: 0 !important;
        height: 48px !important;

        margin: 0 !important;
        padding: 0 8px !important;

        box-sizing: border-box !important;

        border: 0 !important;
        border-radius: 11px !important;

        background: #477fca !important;
        color: #ffffff !important;

        font-size: 15px !important;
        line-height: 1.1 !important;
        font-weight: bold !important;

        text-align: center !important;
        text-decoration: none !important;
    }

    .mobile-aktionsbutton:hover,
    .mobile-aktionsbutton:active {
        background: #477fca !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }


    /* =========================================
       MOBILES BURGER-MENÜ
       ========================================= */

    .mobile-navigation {
        display: none;

        width: 100% !important;

        box-sizing: border-box !important;

        margin: 0 !important;
        padding: 22px 21px 10px 21px !important;

        background: #ffffff !important;
    }

    .mobile-navigation ul {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    .mobile-navigation li {
        display: block !important;

        width: 100% !important;

        margin: 0 0 7px 0 !important;
        padding: 0 !important;

        list-style: none !important;
        box-sizing: border-box !important;
    }

    .mobile-navigation a,
    .mobile-navigation a:link,
    .mobile-navigation a:visited {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 48px !important;

        margin: 0 !important;
        padding: 9px 14px !important;

        box-sizing: border-box !important;

        background: #477fca !important;
        color: #ffffff !important;

        border: 0 !important;
        border-radius: 12px !important;

        font-size: 18px !important;
        line-height: 1.15 !important;
        font-weight: bold !important;

        text-align: center !important;
        text-decoration: none !important;
    }

    .mobile-navigation a:hover,
    .mobile-navigation a:active {
        background: #477fca !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }


    /* =========================================
       GEMEINSAMER FOOTER – MOBILE ANPASSUNG
       ========================================= */

    .mobile-footer {
        margin-top: 30px !important;
        padding: 22px 15px 18px 15px !important;
    }

    .mobile-footer-guetesiegel {
        gap: 18px !important;
        margin-bottom: 18px !important;
    }

    .mobile-footer-guetesiegel img {
        width: auto !important;
        max-width: 75px !important;
        max-height: 65px !important;
        height: auto !important;
    }

    .mobile-footer-domain {
        margin-bottom: 8px !important;
        font-size: 18px !important;
    }

    .mobile-footer-links {
        font-size: 14px !important;
    }

}
/* ==========================================================
   VS MONDWEG – FINALE KORREKTUREN
   Kontaktbox + gemeinsamer Footer
   ========================================================== */


/* ----------------------------------------------------------
   DESKTOP: Footer kompakter + Gütesiegel größer
   ---------------------------------------------------------- */

@media screen and (min-width: 901px) {

    .mobile-footer {
        margin-top: 30px !important;
        padding: 22px 15px 18px 15px !important;
    }

    .mobile-footer-guetesiegel {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: nowrap !important;

        gap: 28px !important;
        margin: 0 auto 14px auto !important;
    }

    .mobile-footer-guetesiegel img {
        display: block !important;
        width: auto !important;
        max-width: 125px !important;
        max-height: 95px !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .mobile-footer-domain {
        margin: 0 0 6px 0 !important;
    }
}


/* ----------------------------------------------------------
   MOBIL: Hauptinhalt in definierter Reihenfolge
   ---------------------------------------------------------- */

@media screen and (max-width: 900px) {

    /*
       Der komplette eigentliche Homepage-Inhalt wird zu
       einem Flex-Container.

       Dadurch können Schulbild und Kontaktbox zuverlässig
       untereinander angeordnet werden.
    */

    .home-hauptinhalt {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 650px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* Schulbild zuerst */

    .home-schulbild {
        display: block !important;
        order: 10 !important;

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

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    .home-schulbild img {
        display: block !important;

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

        margin: 0 auto !important;
    }


    /* Kontaktbox unmittelbar danach */

    .home-kontakt {
        display: block !important;
        order: 20 !important;

        width: calc(100% - 40px) !important;
        max-width: 600px !important;
        height: auto !important;

        margin: 0 auto 20px auto !important;

        box-sizing: border-box !important;

        visibility: visible !important;
        opacity: 1 !important;
    }


    /* Alte Homepage-Gütesiegel bleiben weg */

    .home-guetesiegel {
        display: none !important;
    }


    /* ------------------------------------------------------
       MOBILER FOOTER
       ------------------------------------------------------ */

    .mobile-footer {
        margin-top: 0 !important;
        padding: 20px 12px 17px 12px !important;
    }

    .mobile-footer-guetesiegel {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: nowrap !important;

        gap: 12px !important;
        margin: 0 auto 15px auto !important;
    }

    .mobile-footer-guetesiegel a {
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }

    .mobile-footer-guetesiegel img {
        display: block !important;

        width: auto !important;
        max-width: 78px !important;
        max-height: 68px !important;
        height: auto !important;

        object-fit: contain !important;
    }

    .mobile-footer-domain {
        margin: 0 0 6px 0 !important;
        font-size: 18px !important;
    }

    .mobile-footer-links {
        font-size: 14px !important;
    }
}
/* =========================================================
   NORMAL-LAYOUT – MOBILE
   bis 900px
   ========================================================= */

@media screen and (max-width: 900px) {

    /* -----------------------------------------------------
       Gesamtes altes Layout
       ----------------------------------------------------- */

    .normal-gesamt {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        border-spacing: 0 !important;
        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       Alten Desktop-Kopf ausblenden
       ----------------------------------------------------- */

    .normal-kopf {
        display: none !important;
    }


    /* -----------------------------------------------------
       Hauptbereich
       ----------------------------------------------------- */

    .normal-hauptbereich {
        display: table-row !important;
        width: 100% !important;
        height: auto !important;
    }

    .normal-hauptbereich > td {
        display: table-cell !important;

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

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       Haupttabelle
       ----------------------------------------------------- */

    .normal-haupttabelle {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        border-spacing: 0 !important;
        table-layout: auto !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       Desktop-Navigation links ausblenden
       ----------------------------------------------------- */

    .normal-navigation {
        display: none !important;
    }


    /* -----------------------------------------------------
       Rechte Desktop-Seitenleiste ausblenden
       ----------------------------------------------------- */

    .normal-rechts {
        display: none !important;
    }


    /* -----------------------------------------------------
       Mittleren Inhaltsbereich auf volle Breite setzen
       ----------------------------------------------------- */

    .normal-inhalt {
        display: table-cell !important;

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

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;

        visibility: visible !important;
        opacity: 1 !important;
    }


    /* -----------------------------------------------------
       Inhaltstabelle
       ----------------------------------------------------- */

    .normal-inhalt-tabelle {
        display: table !important;

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

        margin: 0 auto !important;
        padding: 0 !important;

        border-spacing: 0 !important;
        table-layout: auto !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       Alten linken Abstand entfernen
       ----------------------------------------------------- */

    .normal-abstand {
        display: none !important;
    }


    /* -----------------------------------------------------
       Überschrift / Unterüberschrift
       ----------------------------------------------------- */

    .normal-inhalt .headline,
    .normal-inhalt .subheadline {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 16px !important;
        padding-right: 16px !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       Eigentlichen Artikelinhalt begrenzen

       760px sorgt auf Tablets dafür, dass lange Texte
       nicht unnötig breit werden.
       Auf Handys bleiben automatisch 100% verfügbar.
       ----------------------------------------------------- */

    .normal-text {
        width: 100% !important;
        max-width: 760px !important;
        height: auto !important;

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

        padding: 12px 20px 24px 20px !important;

        box-sizing: border-box !important;

        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
    }


    /* -----------------------------------------------------
       Bilder dürfen den Bildschirm nicht sprengen
       ----------------------------------------------------- */

    .normal-text img {
        max-width: 100% !important;
        height: auto !important;
    }


    /* -----------------------------------------------------
       Lange Wörter / Links umbrechen
       ----------------------------------------------------- */

    .normal-text {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

}
/* =========================================================
   PRESSEKARTEN – MOBILE
   nur bis 900px
   ========================================================= */

@media screen and (max-width: 900px) {

    /* Gesamter Pressebereich */
    .presse-einleitung {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }

    /* Der eigentliche Pressetext */
    .presse-einleitung .pressekarten-text {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 20px auto !important;
        padding: 18px 16px !important;
        box-sizing: border-box !important;
    }

    /* Kamera + Überschrift */
    .presse-einleitung .pressekarten-text > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        text-align: center !important;
    }

    /* Kamerabild */
    .presse-einleitung .pressekarten-text > div:first-child img {
        width: 100px !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* Einleitungstext */
    .presse-einleitung .pressekarten-text p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        text-align: left !important;
    }

    /* Kartenliste */
    .presse-einleitung .slider .images {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Jede Pressekarte */
    .presse-einleitung .slider .images li {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 10px 0 !important;
        box-sizing: border-box !important;
    }

    /* Kartentitel */
    .presse-einleitung .slider .images li h2 {
        font-size: 15px !important;
        line-height: 1.3 !important;
    }

}
/* =========================================================
   PRESSE – Intro auf Mobilgeräten
   ========================================================= */

@media screen and (max-width: 900px) {

    .presse-intro-kopf {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        gap: 10px !important;

        text-align: center !important;
    }

}
/* =========================================================
   PRESSEARTIKEL – MOBILE
   bis 900px
   ========================================================= */

@media screen and (max-width: 900px) {

    /* Gesamter Pressebereich */
    .presse-einleitung {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 auto !important;
        padding: 0 !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }


    /* Bereich mit allen Pressekarten */
    .pressekarten-test {
        width: 100% !important;
        max-width: 600px !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 auto !important;
        padding: 0 !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }


    /* Slider-Grundgerüst */
    .pressekarten-test .slider {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }


    /* Liste mit den Karten */
    .pressekarten-test .images {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }


    /* Einzelne Pressekarten */
    .pressekarten-test .images > li {
        width: 100% !important;
        max-width: 100% !important;

        float: none !important;

        box-sizing: border-box !important;
    }


    /* Kopf mit Kamera und Titel */
    .presse-intro-kopf {
        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 10px !important;

        width: 100% !important;

        margin: 0 auto !important;
        padding: 0 !important;

        text-align: center !important;
        box-sizing: border-box !important;
    }


    /* Kamerabild */
    .presse-intro-bild {
        display: block !important;

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

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


    /* Titel und Erklärungstext */
    .presse-intro-text {
        width: 100% !important;
        max-width: 600px !important;

        margin: 0 auto !important;
        padding: 0 16px !important;

        text-align: center !important;
        box-sizing: border-box !important;
    }

}
/* =========================================================
   WIR ÜBER UNS – KÄRTCHEN MOBIL
   ========================================================= */

@media screen and (max-width: 900px) {

    .wirueberuns-karten {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;

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

        box-sizing: border-box !important;
    }

}
/* =========================================================
   NORMAL-LAYOUT – feste alte 760px-Breite mobil aufheben
   ========================================================= */

@media screen and (max-width: 900px) {

    .normal-gesamt,
    .normal-gesamt > tbody,
    .normal-hauptbereich,
    .normal-hauptbereich > td,
    .normal-haupttabelle,
    .normal-haupttabelle > tbody,
    .normal-haupttabelle > tbody > tr,
    .normal-inhalt,
    .normal-inhalt-tabelle,
    .normal-inhalt-tabelle > tbody,
    .normal-inhalt-tabelle > tbody > tr,
    .normal-text {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

}
/* =========================================================
   1. KLASSEN – MODERNE KARTEN
   ========================================================= */

.klassen-uebersicht {
    width: calc(100% - 40px) !important;
    max-width: 1050px !important;
    margin: 30px auto 50px auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    font-family: Arial, Helvetica, sans-serif !important;
    text-align: left !important;
}


/* Einzelne Klassenkarte */

.klassen-karte {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 160px !important;
    column-gap: 45px !important;
    row-gap: 15px !important;

    width: 100% !important;
    margin: 0 0 30px 0 !important;
    padding: 28px 32px !important;

    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08) !important;

    box-sizing: border-box !important;
    text-align: left !important;
}


/* Textbereich */

.klassen-text {
    grid-column: 1 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}


/* Name */

.klassen-text h2 {
    margin: 0 0 6px 0 !important;
    padding: 0 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
    font-weight: bold !important;

    color: #1f5fa8 !important;
    text-align: left !important;
}


/* Schwerpunkt */

.klassen-schwerpunkt {
    margin: 0 0 24px 0 !important;

    font-size: 17px !important;
    line-height: 1.4 !important;
    font-weight: bold !important;

    color: #333333 !important;
    text-align: left !important;
}


/* Zwischenüberschriften */

.klassen-text h3 {
    margin: 20px 0 8px 0 !important;
    padding: 0 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 17px !important;
    line-height: 1.4 !important;
    font-weight: bold !important;

    color: #333333 !important;
    text-align: left !important;
}


/* Listen */

.klassen-text ul {
    display: block !important;

    margin: 0 0 16px 22px !important;
    padding: 0 !important;

    list-style-type: disc !important;
    text-align: left !important;
}


.klassen-text li {
    display: list-item !important;

    margin: 3px 0 !important;
    padding: 0 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.45 !important;

    color: #333333 !important;
    text-align: left !important;
}


/* Foto */

.klassen-foto {
    grid-column: 2 !important;
    grid-row: 1 !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}


.klassen-foto img {
    display: block !important;

    width: auto !important;
    max-width: 200px !important;
    height: auto !important;
    max-height: 260px !important;

    margin: 0 auto !important;

    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
}


/* Breiteres Foto bei 1b */

.klassen-foto-breit img {
    width: 100% !important;
    max-width: 220px !important;
    height: auto !important;
}


/* Zitat */

.klassen-zitat {
    grid-column: 1 / -1 !important;

    width: auto !important;
    margin: 10px 0 0 0 !important;
    padding: 16px 20px !important;

    background: #f2f6fc !important;
    border-left: 4px solid #4b86c9 !important;
    border-radius: 8px !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    font-style: italic !important;

    color: #334f78 !important;
    text-align: center !important;

    box-sizing: border-box !important;
}


.klassen-zitat span {
    display: block !important;
    margin-top: 6px !important;
    font-weight: bold !important;
}


/* =========================================================
   1. KLASSEN – TABLET
   701px bis 900px
   ========================================================= */

@media screen and (min-width: 701px) and (max-width: 900px) {

    .klassen-uebersicht {
        width: calc(100% - 40px) !important;
        max-width: 760px !important;
        margin: 24px auto 35px auto !important;
        padding: 0 !important;
    }

    .klassen-karte {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 180px !important;
        column-gap: 28px !important;
        row-gap: 15px !important;

        width: 100% !important;
        margin: 0 0 25px 0 !important;
        padding: 24px !important;

        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    .klassen-text {
        grid-column: 1 !important;
        grid-row: 1 !important;

        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .klassen-foto {
        grid-column: 2 !important;
        grid-row: 1 !important;

        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .klassen-foto img {
        display: block !important;

        width: auto !important;
        max-width: 170px !important;
        height: auto !important;
        max-height: 240px !important;

        margin: 0 auto !important;

        border-radius: 10px !important;
    }

    .klassen-foto-breit img {
        width: 100% !important;
        max-width: 180px !important;
        height: auto !important;
    }

    .klassen-zitat {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        width: 100% !important;
        margin: 10px 0 0 0 !important;
        padding: 14px 16px !important;

        font-size: 15px !important;
    }

}


/* =========================================================
   1. KLASSEN – HANDY
   bis 700px
   ========================================================= */

@media screen and (max-width: 700px) {

    .klassen-uebersicht {
        width: calc(100% - 24px) !important;
        max-width: 100% !important;

        margin: 20px auto 35px auto !important;
        padding: 0 !important;
    }

    .klassen-karte {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        margin: 0 0 22px 0 !important;
        padding: 20px 16px !important;

        border-radius: 14px !important;
    }

    .klassen-text {
        order: 1 !important;
        width: 100% !important;
    }

    .klassen-text h2 {
        font-size: 20px !important;
    }

    .klassen-schwerpunkt {
        font-size: 16px !important;
        margin-bottom: 18px !important;
    }

    .klassen-text h3 {
        font-size: 16px !important;
        margin-top: 18px !important;
    }

    .klassen-text li {
        font-size: 15px !important;
        line-height: 1.45 !important;
    }

    .klassen-foto {
        order: 2 !important;

        display: flex !important;
        justify-content: center !important;

        width: 100% !important;
        margin: 15px 0 4px 0 !important;
    }

    .klassen-foto img,
    .klassen-foto-breit img {
        display: block !important;

        width: auto !important;
        max-width: 200px !important;
        max-height: 260px !important;
        height: auto !important;

        margin: 0 auto !important;
    }

    .klassen-zitat {
        order: 3 !important;

        width: 100% !important;
        margin: 12px 0 0 0 !important;
        padding: 14px 16px !important;

        font-size: 15px !important;
    }

}
/* =========================================================
   KLASSENKARTEN – FOTOGRÖSSE KORRIGIEREN
   ========================================================= */

.klassen-karte .klassen-foto {
    width: 220px !important;
    max-width: 220px !important;
    margin: 0 auto !important;
}

.klassen-karte .klassen-foto img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 200px !important;
    max-height: 260px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

/* Das breitere Foto der beiden Lehrerinnen */
.klassen-karte .klassen-foto-breit {
    width: 260px !important;
    max-width: 260px !important;
}

.klassen-karte .klassen-foto-breit img {
    width: auto !important;
    height: auto !important;
    max-width: 260px !important;
    max-height: 220px !important;
}
/* =========================================================
   KLASSENKARTEN – DESKTOP MIT SCHMALEM INHALTSBEREICH
   ========================================================= */

@media screen and (min-width: 901px) {

    .normal-text .klassen-uebersicht {
        width: calc(100% - 30px) !important;
        max-width: 760px !important;
        margin: 30px auto 50px auto !important;
    }

    .normal-text .klassen-karte {
        display: block !important;

        width: 100% !important;
        margin: 0 0 30px 0 !important;
        padding: 28px 32px !important;

        box-sizing: border-box !important;
    }

    .normal-text .klassen-text {
        display: block !important;
        width: 100% !important;
    }

    .normal-text .klassen-foto {
        display: flex !important;
        width: 100% !important;

        justify-content: center !important;

        margin: 22px 0 10px 0 !important;
    }

    .normal-text .klassen-foto img {
        display: block !important;

        width: auto !important;
        max-width: 200px !important;
        height: auto !important;
        max-height: 270px !important;

        margin: 0 auto !important;
    }

    .normal-text .klassen-foto-breit img {
        max-width: 260px !important;
    }

    .normal-text .klassen-zitat {
        display: block !important;

        width: 100% !important;
        margin: 18px 0 0 0 !important;

        box-sizing: border-box !important;
    }

}
/* =========================================================
   KLASSENKARTEN – SCHMALE DESKTOP-ANSICHT
   ========================================================= */

@media screen and (min-width: 901px) and (max-width: 1100px) {

    .klassen-karte {
        display: flex !important;
        flex-direction: column !important;
    }

    .klassen-text {
        width: 100% !important;
        order: 1 !important;
    }

    .klassen-foto {
        width: 100% !important;
        order: 2 !important;
        margin: 15px 0 5px 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    .klassen-foto img,
    .klassen-foto-breit img {
        width: auto !important;
        max-width: 180px !important;
        height: auto !important;
    }

    .klassen-zitat {
        width: 100% !important;
        order: 3 !important;
    }

}