/* TutorMind - Ergaenzungen fuer die statische Fassung.
   Bewusst plain CSS: normalize.css, webflow.css und
   tutormind-homepage-v2.webflow.css sind der unveraenderte Webflow-Export der
   frueheren Seite. Alles, was hier ergaenzt wird, gehoert in diese Datei -
   nicht in die Webflow-Dateien. Danach `python check_css.py` laufen lassen. */

/* --- Schriften -------------------------------------------------------- */
/* Das Original lud "EB Garamond" und "Inter" ueber den Google-WebFont-Loader
   von fonts.googleapis.com / fonts.gstatic.com nach. Die statische Fassung
   liefert beide Variable Fonts (Subset "latin") vom eigenen Server aus, damit
   beim Seitenaufruf keine IP-Adresse an Dritte geht. Optik unveraendert. */
@font-face {
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/ebgaramond-var-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter-var-latin.woff2') format('woff2');
}

/* --- Navigation ohne JavaScript --------------------------------------- */
/* Webflow blendet das Menue unter 991px aus und klappt es per webflow.js
   ueber den Hamburger-Button wieder auf. Die statische Seite laedt kein
   JavaScript mehr, deshalb bleibt das Menue immer sichtbar und bricht auf
   kleinen Bildschirmen einfach um. Der Hamburger-Button entfaellt. */
@media screen and (max-width: 991px) {
    .navbar .nav-menu.w-nav-menu {
        display: block;
        position: static;
        float: none;
        clear: both;
        text-align: center;
        background-color: transparent;
    }

    .navbar .nav-menu.w-nav-menu .w-nav-link {
        padding: 10px 14px;
    }
}

/* --- Statushinweis ---------------------------------------------------- */
/* Steht an der Stelle, an der im Original der Button "Jetzt Starten" war. */
.tm-notice {
    flex: 1 1 auto;
    max-width: 760px;
    margin: 36px auto;
    padding: 22px 26px;
    border: 1px solid rgba(140, 138, 255, 0.45);
    border-left: 4px solid var(--purplebright, #8c8aff);
    border-radius: 6px;
    background-color: rgba(33, 40, 69, 0.85);
    color: #fff;
}

.tm-notice h2 {
    margin: 0 0 10px;
    font-family: 'EB Garamond', serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 34px;
    color: #fff;
}

.tm-notice p {
    margin: 8px 0 0;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 300;
    line-height: 26px;
    color: #e6e7ef;
}

.tm-notice a {
    color: var(--purplebright, #8c8aff);
}

@media screen and (max-width: 767px) {
    .tm-notice {
        margin: 20px 15px;
        padding: 18px 20px;
    }

    .tm-notice h2 {
        font-size: 22px;
        line-height: 28px;
    }

    .tm-notice p {
        font-size: 15px;
        line-height: 23px;
    }
}

/* --- Prosa: Datenschutz, Impressum, 404 ------------------------------- */
/* Diese Texte gab es im Webflow-Export nur als ein einziges <p>. Fuer die
   laengere Fassung aus privacy.cshtml braucht es Ueberschriften und Listen -
   im gleichen dunklen Look wie der Rest der Seite. */
.tm-prose {
    margin: 0 15px;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 300;
    line-height: 27px;
    color: #e6e7ef;
    overflow-wrap: break-word;
}

.tm-prose h1 {
    margin: 0 0 24px;
    font-family: 'EB Garamond', serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 48px;
    color: #fff;
}

.tm-prose h2 {
    margin: 40px 0 10px;
    font-family: 'EB Garamond', serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 34px;
    color: #fff;
}

.tm-prose h3 {
    margin: 28px 0 8px;
    font-family: 'EB Garamond', serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    color: #fff;
}

.tm-prose h4 {
    margin: 20px 0 6px;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 25px;
    color: #fff;
}

.tm-prose p {
    margin: 10px 0;
}

.tm-prose ul {
    margin: 10px 0;
    padding-left: 22px;
    list-style: disc;
}

.tm-prose li {
    margin: 4px 0;
}

.tm-prose a {
    color: var(--purplebright, #8c8aff);
}

.tm-lead {
    margin: 24px 0;
    padding: 16px 20px;
    border: 1px solid rgba(140, 138, 255, 0.45);
    border-left: 4px solid var(--purplebright, #8c8aff);
    border-radius: 6px;
    background-color: rgba(33, 40, 69, 0.85);
    font-size: 16px;
    line-height: 25px;
}

/* --- Rechtsseiten hell: .tm-legal ------------------------------------- */
/* Impressum und Datenschutz sind reine Lesetexte. Auf dem dunklen
   Markenhintergrund (#1f222e) hatte die duenne Inter-300 zu wenig Kontrast.
   Diese beiden Seiten bekommen deshalb einen weissen Lesebereich.

   Navigation und Footer bleiben bewusst dunkel: beide Logo-Dateien sind helle
   PNGs ohne dunkle Variante (gemessene mittlere Helligkeit 179/255) und waeren
   auf Weiss praktisch unsichtbar. Weiss wird also der Inhalt, nicht die
   Seitenraender. */
.tm-legal {
    background-color: #fff;
}

.tm-legal .containermission {
    background-color: #fff;
}

.tm-legal .tm-prose {
    color: #23262f;          /* auf Weiss ~13:1 - deutlich ueber AA */
    font-weight: 400;        /* 300 wirkt auf hellem Grund ausgewaschen */
}

.tm-legal .tm-prose h1,
.tm-legal .tm-prose h2,
.tm-legal .tm-prose h3,
.tm-legal .tm-prose h4 {
    color: #14161d;
}

/* #8c8aff auf Weiss erreicht nur ~2,4:1 - fuer Fliesstextlinks zu wenig.
   Derselbe Farbton abgedunkelt kommt auf ~7,5:1. */
.tm-legal .tm-prose a {
    color: #4a48b8;
}

.tm-legal .tm-lead {
    border-color: rgba(74, 72, 184, 0.35);
    border-left-color: #4a48b8;
    background-color: #f2f2fb;
    color: #23262f;
}

@media screen and (max-width: 767px) {
    .tm-prose {
        font-size: 15px;
        line-height: 24px;
    }

    .tm-prose h1 {
        font-size: 30px;
        line-height: 38px;
    }

    .tm-prose h2 {
        font-size: 23px;
        line-height: 29px;
    }

    .tm-prose h3 {
        font-size: 19px;
        line-height: 25px;
    }
}