/* ==========================================================================
* 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):
*
* ... Block 1 (H2 + Text/Liste) ...
*
*
*
* 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 */
.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;
}
/* Abstand zwischen einzelnen geo-cta-Textlinks (Danke-/Fehler-/Kontaktseite) */
/* Footer: Verbands-/Qualitäts-Logos nebeneinander, weiße Kacheln */
/* rechte Footer-Spalte verbreitern, damit die Logos in eine Reihe passen */
.row_footer_2 .row_footer_2_1 { width:45% !important; }
.row_footer_2 .row_footer_2_2 { width:55% !important; }
.footer_association_logos { display:flex !important; flex-wrap:wrap; gap:14px; align-items:center; justify-content:flex-end; width:100% !important; }
.footer_association_logos img { height:46px !important; width:auto !important; max-width:none !important; max-height:none !important; background:#fff; padding:7px 10px; border-radius:6px; box-sizing:content-box; display:inline-block !important; margin:0 !important; }
@media (max-width: 767px) {
.row_footer_2 .row_footer_2_1, .row_footer_2 .row_footer_2_2 { width:100% !important; float:none; }
.footer_association_logos { justify-content:flex-start; margin-top:14px; }
}
/* CTA-/Aktions-Links als Buttons: weiße Schrift auf dunklem Hintergrund */
.geo-cta a, a.geo-btn {
display:inline-block; background:#333; color:#fff !important;
padding:10px 21px; border:1px solid #333; border-radius:4px;
text-decoration:none !important; font-size:13px; letter-spacing:1px;
margin:0 14px 12px 0; transition:all .3s;
}
.geo-cta a:hover, .geo-cta a:focus, a.geo-btn:hover, a.geo-btn:focus {
background:#fff; color:#333 !important; border-color:#333;
}
/* Megamenü Leistungen: Abstand zwischen den Zeilen */
.megamenu_1 > ul > li { margin-bottom:32px !important; }
/* mehr Abstand zwischen Intro-Text und CTA-Buttons */
.geo-cta { margin-top:1.6em; }
/* Megamenü-Panel weniger transparent */
.megamenu_1 > ul { background-color:rgba(255,255,255,0.88) !important; }
/* Megamenü: Bild ebenfalls klickbar */
.mega_img a { display:block; }
/* Catrin-Porträts auf Leistungsseiten: rechts umflossen */
.geo-lead { display:flow-root; }
.geo-portrait { float:right; width:34%; max-width:340px; height:auto; margin:0 0 1.2em 1.8em; border-radius:6px; }
@media (max-width:767px){ .geo-portrait { float:none; width:100%; max-width:360px; margin:0 0 1.2em 0; } }
/* ===== Startseite (gestylte Bänder, Cards, Feature-Bereiche) ===== */
.home-band { padding:60px 0; }
.home-band-alt { background:#f5f5f5; }
.home-band-gold { background:#f4ecd9; }
.home-band-dark { background:#333; }
.home-band-dark, .home-band-dark h2, .home-band-dark h3, .home-band-dark p, .home-band-dark li { color:#fff; }
.home-band h2 { font-size:30px; line-height:1.2; margin:0 0 .5em; }
.home-center { text-align:center; }
.home-center .home-lead { margin-left:auto; margin-right:auto; }
.home-lead { font-size:18px; line-height:1.6; max-width:820px; }
/* Cards */
.home-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:36px; text-align:left; }
@media (max-width:900px){ .home-cards { grid-template-columns:1fr; } }
.home-card { background:#fff; border:1px solid #e6e6e6; border-radius:8px; overflow:hidden;
display:flex; flex-direction:column; box-shadow:0 4px 16px rgba(0,0,0,.06); transition:transform .25s, box-shadow .25s; }
.home-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,.10); }
.home-card .home-card-img, .home-card .home-card-img img { display:block; width:100%; }
.home-card .home-card-img img { height:180px; object-fit:cover; }
.home-card-body { padding:24px; display:flex; flex-direction:column; flex:1; }
.home-card-body h3 { font-size:20px; margin:0 0 .5em; }
.home-card-body h3 a { color:#282a63; text-decoration:none; }
.home-card-body p { flex:1; margin:0 0 1.1em; line-height:1.55; }
/* Feature (Bild + Text) */
.home-feature { display:flex; gap:48px; align-items:center; text-align:left; }
.home-feature.rev { flex-direction:row-reverse; }
.home-feature-img { flex:0 0 38%; }
.home-feature-img img { width:100%; border-radius:8px; display:block; box-shadow:0 6px 22px rgba(0,0,0,.12); }
.home-feature-txt { flex:1; }
@media (max-width:768px){ .home-feature { flex-direction:column; } .home-feature-img { width:100%; max-width:380px; } }
/* Häkchenliste (10 Gründe / Anlässe) */
.home-checklist { list-style:none; padding:0; margin:32px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:16px 40px; text-align:left; }
@media (max-width:768px){ .home-checklist { grid-template-columns:1fr; } }
.home-checklist li { position:relative; padding-left:38px; line-height:1.5; }
.home-checklist li:before { content:"\2713"; position:absolute; left:0; top:0; width:24px; height:24px;
background:#333; color:#fff; border-radius:50%; text-align:center; line-height:24px; font-size:13px; }
/* Problem-Karten */
.home-problems { list-style:none; padding:0; margin:34px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:18px; text-align:left; }
@media (max-width:768px){ .home-problems { grid-template-columns:1fr; } }
.home-problems li { background:#fff; border-left:5px solid #282a63; padding:18px 22px; box-shadow:0 2px 10px rgba(0,0,0,.05); }
/* Buttons auf dunklem Band invertiert */
.home-band-dark .geo-cta a { background:#fff; color:#333 !important; border-color:#fff; }
.home-band-dark .geo-cta a:hover { background:transparent; color:#fff !important; border-color:#fff; }
/* ===== Split-Hero Startseite ===== */
.home-hero { display:flex; align-items:stretch; min-height:540px; }
.home-hero-img { flex:1 1 50%; overflow:hidden; }
.home-hero-img img { width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block; }
.home-hero-text { flex:1 1 50%; background:#282a63; color:#fff; display:flex; align-items:center; padding:50px 6%; }
.home-hero-inner { max-width:560px; }
.home-hero-text h1 { color:#fff; font-size:40px; line-height:1.15; margin:0 0 .35em; }
.home-hero-sub { font-size:21px; line-height:1.35; margin:0 0 1em; opacity:.96; }
.home-hero-intro { font-size:16px; line-height:1.6; margin:0 0 1.8em; opacity:.9; }
.home-hero-cta a { display:inline-block; background:#fff; color:#282a63 !important; padding:12px 24px;
border:1px solid #fff; border-radius:4px; text-decoration:none !important; font-size:14px; letter-spacing:1px;
margin:0 12px 10px 0; transition:all .3s; }
.home-hero-cta a:hover { background:transparent; color:#fff !important; }
@media (max-width:768px){
.home-hero { flex-direction:column; }
.home-hero-img { min-height:360px; }
.home-hero-text { padding:40px 24px; }
.home-hero-text h1 { font-size:30px; }
}
/* Startseite: weißen Abstand zwischen letztem (dunklem) Band und Footer entfernen */
.page_1 .row_content { padding-bottom:0; }
/* Zitat-Band Startseite */
.home-quote { max-width:840px; margin:0 auto; padding:0; border:0; font-size:26px; line-height:1.45; font-style:italic; color:#282a63; }
.home-quote cite { display:block; margin-top:.7em; font-size:16px; font-style:normal; opacity:.7; }
@media (max-width:768px){ .home-quote { font-size:21px; } }
/* Zitat-Band in Markennavy mit weißer Schrift */
.home-band-lila { background:#282a63; }
.home-band-lila, .home-band-lila h2, .home-band-lila h3, .home-band-lila p, .home-band-lila li, .home-band-lila strong { color:#fff; }
.home-band-lila .home-quote, .home-band-lila .home-quote cite { color:#fff; }
/* ===== Startseite: Header oben transparent (weiß), beim Scrollen weiße Leiste (.scrolledHeader) ===== */
.page_1 header.header:not(.scrolledHeader) { background:transparent !important; box-shadow:none !important; }
.page_1 header.header:not(.scrolledHeader) .alm_navi_theme_1 { background:transparent !important; border-bottom:none !important; }
.page_1 header.header:not(.scrolledHeader) .alm_navi_1 > li > a { color:#fff !important; text-shadow:0 1px 4px rgba(0,0,0,.45); }
.page_1 header.header:not(.scrolledHeader) .alm_navi_1 > li:hover > a,
.page_1 header.header:not(.scrolledHeader) .alm_navi_1 > li > a:hover,
.page_1 header.header:not(.scrolledHeader) .alm_navi_1 > li > a.active,
.page_1 header.header:not(.scrolledHeader) .alm_navi_1 > li.active > a { color:#fff !important; border-bottom-color:#fff !important; }
.page_1 header.header:not(.scrolledHeader) .navi_service_contact a { color:#fff !important; text-shadow:0 1px 4px rgba(0,0,0,.45); }
.page_1 header.header:not(.scrolledHeader) .logo img { filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
/* Scroll-Zustand: weiße Leiste mit dunkler Navi/Logo (Theme-Standard) */
.page_1 header.header.scrolledHeader { background:#fff !important; box-shadow:0 1px 6px rgba(0,0,0,.08); }
/* Sichtbarer Bildnachweis (Overlay) */
.home-hero-img, .home-feature-img, .geo-portrait-wrap, .theme_featureimage .theme_img { position:relative; }
.foto-credit-ov { position:absolute; bottom:7px; right:9px; font-size:11px; line-height:1; color:#fff;
background:rgba(0,0,0,.45); padding:3px 8px; border-radius:3px; letter-spacing:.3px; }
.geo-portrait-wrap { float:right; width:34%; max-width:340px; margin:0 0 1.2em 1.8em; }
.geo-portrait-wrap img { width:100%; height:auto; border-radius:6px; display:block; }
@media (max-width:767px){ .geo-portrait-wrap { float:none; width:100%; max-width:360px; margin:0 0 1.2em 0; } }
/* Grünes Band (Typische Probleme) */
.home-band-green { background:#3f5331; }
.home-band-green, .home-band-green h2, .home-band-green p, .home-band-green strong { color:#fff; }
/* Typische Probleme: einfache weiße Liste auf grünem Band */
.home-greenlist { list-style:none; padding:0; margin:32px auto 0; max-width:780px; display:grid; grid-template-columns:1fr 1fr; gap:14px 34px; text-align:left; }
@media (max-width:768px){ .home-greenlist { grid-template-columns:1fr; } }
.home-greenlist li { position:relative; padding-left:22px; line-height:1.5; color:#fff; }
.home-greenlist li:before { content:"\2013"; position:absolute; left:0; color:#fff; }