/* ==========================================================================
 * geo-style.css  —  keilkommunikation.com
 * Wiederverwendbare GEO-Layout-Klassen, seiten-unabhaengig.
 *
 * KANONISCHE KLASSE:  .geo-2col   (fuer alle kuenftigen Seiten verwenden)
 * ALIAS:              .sections-grid  (Bestand: aktuelle Ueber-mich-Seite)
 *
 * Eingebunden in setup_page_files.typoscript:
 *   page.includeCSS._93 = {$config.PAGE_PUBLIC_PATH}/Css/geo-style.css
 *
 * VERWENDUNG IM HTML (auf beliebiger Seite):
 *   <div class="geo-2col">
 *     <section> ... Block 1 (H2 + Text/Liste) ... </section>
 *     <section> ... Block 2 ... </section>
 *     <section> ... Block 3 ... </section>
 *   </div>
 * Ergebnis: Block 1 links, Block 2 rechts (gleiche Hoehe), Block 3 darunter links usw.
 * ========================================================================== */


/* --------------------------------------------------------------------------
 * 1) Zweispaltiger Block-Container
 * -------------------------------------------------------------------------- */

.geo-2col,
.sections-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 4.5em 8rem;            /* vertikal zwischen Reihen / horizontal zwischen Spalten */
    align-items: start;
    max-width: 1000px;
    margin: 2.5em auto;
}

.geo-2col > section,    .geo-2col > div,
.sections-grid > section, .sections-grid > div {
    margin: 0;
    min-width: 0;               /* verhindert Ueberlauf langer Woerter im Grid */
}

.geo-2col > section > *:first-child,    .geo-2col > div > *:first-child,
.sections-grid > section > *:first-child, .sections-grid > div > *:first-child { margin-top: 0; }

.geo-2col > section > *:last-child,    .geo-2col > div > *:last-child,
.sections-grid > section > *:last-child, .sections-grid > div > *:last-child  { margin-bottom: 0; }

/* Lesbarkeit fuer Text und Listen innerhalb der Spalten */
.geo-2col p,    .geo-2col li,
.sections-grid p, .sections-grid li {
    font-size: 17px;
    line-height: 1.65;
    color: #1f2937;
}
.geo-2col p,  .sections-grid p  { margin-bottom: 1.1em; }
.geo-2col ul, .sections-grid ul { margin-bottom: 1.4em; padding-left: 1.4em; }
.geo-2col li, .sections-grid li { line-height: 1.4; margin-bottom: 0.12em; }

/* Sektions-Ueberschriften in den Spalten */
.geo-2col h2,    .geo-2col h2.headline_title,
.sections-grid h2, .sections-grid h2.headline_title {
    font-size: 26px !important;
    line-height: 1.3 !important;
    margin: 0 0 0.6em 0 !important;
    color: rgb(40, 42, 99) !important;
    font-weight: 500 !important;
    font-family: 'Montserrat-Regular','Helvetica Neue',Helvetica,Arial,sans-serif;
}

/* Mobil: einspaltig */
@media (max-width: 800px) {
    .geo-2col,
    .sections-grid {
        grid-template-columns: 1fr;
        gap: 2.5em 0;
    }
}


/* --------------------------------------------------------------------------
 * 2) Optionale Headline-Klassen (direkt aufs Element, seiten-unabhaengig)
 * -------------------------------------------------------------------------- */

.geo-headline {
    font-size: 44px !important;
    line-height: 1.15 !important;
    margin: 0 0 0.3em 0 !important;
    color: rgb(40, 42, 99) !important;
    font-family: 'Montserrat-Regular','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-weight: 500;
}
@media (min-width: 1200px) { .geo-headline { font-size: 48px !important; } }
@media (max-width: 768px)  { .geo-headline { font-size: 32px !important; } }

.geo-subline {
    font-size: 22px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    color: #2a3a5e !important;
    margin: 0 0 1.6em 0 !important;
    font-family: 'Montserrat-Regular','Helvetica Neue',Helvetica,Arial,sans-serif;
}


/* --------------------------------------------------------------------------
 * 3) Definition-List fuer Vita / Lehre / Mitgliedschaften  (.geo-deflist)
 * -------------------------------------------------------------------------- */

.geo-deflist {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: 0.5em 2em;
    margin: 1.5em 0 2.5em;
    max-width: 1000px;
}
.geo-deflist dt { font-weight: 600; color: #2a3a5e; margin: 0; }
.geo-deflist dd { margin: 0; }
@media (max-width: 600px) {
    .geo-deflist { grid-template-columns: 1fr; gap: 0.2em; }
    .geo-deflist dt { margin-top: 0.8em; }
}


/* --------------------------------------------------------------------------
 * 4) CTA-Buttons gruppieren  (.geo-cta)
 * -------------------------------------------------------------------------- */

.geo-cta .btn_template_5 { margin-right: 1rem; margin-bottom: 0.5rem; }


/* --------------------------------------------------------------------------
 * 5) Lead-Block (H1 + Intro) buendig zur Grid-Breite
 *    H1 + Intro und der zweispaltige Block teilen sich exakt dieselbe
 *    Breite und Zentrierung -> linke und rechte Kante fluchten.
 * -------------------------------------------------------------------------- */

.geo-lead,
.geo-2col,
.sections-grid {
    max-width: 1000px !important;   /* gemeinsame Vorgabe-Breite */
    margin-left: auto !important;
    margin-right: auto !important;
}

.geo-lead {
    margin-top: 0;
    margin-bottom: 2.2em;
    padding: 0;
}

/* H1: erste Zeile gross, zweiter Teil als Subline - alles in EINEM <h1> */
.geo-h1 {
    font-size: 44px;
    line-height: 1.15;
    margin: 0 0 0.5em 0;
    color: rgb(40, 42, 99);
    font-weight: 500;
    font-family: 'Montserrat-Regular','Helvetica Neue',Helvetica,Arial,sans-serif;
}
@media (min-width: 1200px) { .geo-h1 { font-size: 48px; } }
@media (max-width: 768px)  { .geo-h1 { font-size: 32px; } }

.geo-h1 .geo-h1-sub {
    display: block;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 400;
    color: #2a3a5e;
    margin-top: 0.25em;
}
@media (max-width: 768px) { .geo-h1 .geo-h1-sub { font-size: 18px; } }

.geo-lead .geo-intro {
    font-size: 19px;
    line-height: 1.6;
    color: #1f2937;
    margin: 0;
}