/* * custom_index.css * Einbinden im nach allen anderen CSS-Dateien * Überschreibt Styles für die Termine-Liste, Artikel-Section und den Überblick-Block auf der Startseite */ /* ─── Termine: Karten-Layout ────────────────────────────────────────────── */ .termine-list { display: flex; flex-direction: column; gap: 12px; } .termin-card { display: flex; align-items: flex-start; gap: 20px; border: 1.5px solid #6ab43e; border-radius: 4px; padding: 16px 20px; background: #fff; } .termin-date { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 52px; text-align: center; flex-shrink: 0; } /* Gemeinsame Datum-Stile für Termine und Artikel */ .termin-date .month, .artikel-date .month { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #6ab43e; line-height: 1; } .termin-date .day, .artikel-date .day { font-size: 32px; font-weight: 700; color: #6ab43e; line-height: 1; margin-top: 2px; } .termin-body { flex: 1; min-width: 0; } .termin-body h4 { margin: 0 0 4px 0; font-size: 14px; font-weight: 600; text-transform: uppercase; line-height: 1.35; color: #333; } .termin-body h4 a { color: #333; text-decoration: none; } .termin-body h4 a:hover { color: #6ab43e; } .termin-meta { font-size: 12px; color: #777; margin-bottom: 6px; } .termin-meta i { margin-right: 4px; } .termin-body p { font-size: 13px; color: #555; margin: 0 0 8px 0; line-height: 1.5; } /* ─── Gemeinsames read-more für Termine + Artikel ───────────────────────── */ .termin-body .read-more, .artikel-entry .read-more { font-size: 13px; color: #6ab43e; font-weight: 600; text-decoration: none; } .termin-body .read-more:hover, .artikel-entry .read-more:hover { text-decoration: underline; } /* ─── Überblick-Block rechts ────────────────────────────────────────────── */ .homepage-overview { font-size: 16px; color: #555; line-height: 1.75; margin-top: 8px; } .homepage-overview a { color: #333; font-weight: 700; text-decoration: none; padding-bottom: 1px; } .homepage-overview a:hover { color: #6ab43e; } /* Abstand wenn Spalten untereinander fallen (< col-md = < 992px) */ @media (max-width: 991px) { .homepage-overview-col { margin-top: 40px; } } /* ─── Section #home: Hintergrundbild & Höhe ────────────────────────────── */ #home.divider { background-image: url('../images/body-layer_2.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; max-height: 700px; min-height: 425px; } /* display-table/cell: Höhe von der Section erben */ #home .display-table { height: 100%; min-height: 425px; max-height: 700px; } /* ─── container-index: Padding statt fixe Höhe ─────────────────────────── */ .container.container-index { padding-top: 120px; padding-bottom: 120px; } @media only screen and (max-width: 480px) { #home.divider, #home .display-table { min-height: 425px; max-height: 425px; } .container.container-index { padding-top: 40px; padding-bottom: 40px; } } @media only screen and (min-width: 481px) and (max-width: 900px) { .container.container-index { padding-top: 70px; padding-bottom: 70px; } } @media only screen and (min-width: 901px) and (max-width: 1100px) { .container.container-index { padding-top: 90px; padding-bottom: 90px; } }