in .fakten-box-body ab */
.fakten-box-body > p,
.fakten-box-body > ul > li {
margin: 0;
padding: 12px 16px;
font-size: 15px;
border-bottom: 1px solid var(--farbe-linie-3);
}
.fakten-box-body > ul {
list-style: none;
margin: 0;
padding: 0;
}
.fakten-box-body > p:last-child,
.fakten-box-body > ul > li:last-child { border-bottom: 0; }
.fakten-box-body strong { color: var(--farbe-text); }
/* info-box und feature-box tragen im Altbestand Fliesstext direkt im Kasten */
.info-box,
.feature-box { padding: 16px 18px; }
.info-box > :last-child,
.feature-box > :last-child { margin-bottom: 0; }
.info-box h3,
.info-box h4,
.feature-box h3,
.feature-box h4 { margin-top: 0; }
/* Kompakte Linkliste - "Schnell zu" */
.schnell-zu {
border: 1px solid var(--farbe-linie);
border-top: 0;
background: var(--farbe-weiss);
padding: 14px 16px 4px;
}
.schnell-zu__titel {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--farbe-akzent);
margin: 0 0 8px;
}
.linkliste,
.related-links {
list-style: none;
margin: 0;
padding: 0;
}
.linkliste li,
.related-links li {
margin: 0;
padding: 10px 0;
font-size: 15px;
border-bottom: 1px dotted var(--farbe-linie-feld);
}
.linkliste li:last-child,
.related-links li:last-child { border-bottom: 0; }
.linkliste a,
.related-link { color: var(--farbe-akzent); }
/* Zweite Bauform desselben Blocks: ein mit
Links direkt darin, ohne
. So steht es auf den meisten Seiten. Ohne
eigene Regel erben diese Links nur die Farbe und laufen als Fliesstext
ineinander. Der Kindselektor trennt die beiden Bauformen sauber:
`> a` trifft nur die Div-Variante, `> li` nur die Listen-Variante. */
div.related-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
}
.related-links > .related-link {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 8px 14px;
border: 1px solid var(--farbe-linie-feld);
background: var(--farbe-weiss);
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
line-height: 1.25;
text-decoration: none;
}
.related-links > .related-link:hover,
.related-links > .related-link:focus-visible {
background: var(--farbe-text);
border-color: var(--farbe-text);
color: var(--farbe-weiss);
}
/* -------------------------------------------------------------------------
Inhaltsverzeichnis
------------------------------------------------------------------------- */
.toc {
border: 1px solid var(--farbe-linie);
background: var(--farbe-weiss);
padding: 16px 18px;
margin: 0 0 22px;
border-radius: 0;
}
.toc h2,
.toc h3,
.toc-title {
font-family: var(--sans);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--farbe-text);
margin: 0 0 10px;
border: 0;
padding: 0;
}
.toc-list {
list-style: none;
margin: 0;
padding: 0;
columns: 2;
column-gap: 28px;
}
.toc-list li {
margin: 0;
padding: 7px 0;
font-size: 15px;
border-bottom: 1px dotted var(--farbe-linie-feld);
break-inside: avoid;
}
/* -------------------------------------------------------------------------
Listenzeilen (Ausflugsziele, Betriebe, Unterkuenfte)
------------------------------------------------------------------------- */
.liste { border-top: 1px solid var(--farbe-linie-2); }
.liste__zeile {
display: grid;
grid-template-columns: 190px 1fr 200px;
gap: 22px;
align-items: start;
padding: 18px 0;
border-bottom: 1px solid var(--farbe-linie-2);
}
.liste__zeile--ohne-bild { grid-template-columns: 1fr 200px; }
.liste__bild { width: 100%; height: 126px; object-fit: cover; background: var(--farbe-flaeche-2); }
.liste__titel {
font-family: var(--serif);
font-size: 22px;
font-weight: 600;
line-height: 1.25;
margin: 4px 0 6px;
}
.liste__titel a { color: var(--farbe-text); }
.liste__text {
font-size: 15px;
line-height: 1.6;
color: var(--farbe-text-3);
margin: 0;
}
.liste__fakten {
border-left: 1px solid var(--farbe-linie-2);
padding-left: 20px;
font-size: 14px;
color: var(--farbe-text-3);
line-height: 1.5;
}
.liste__ort { color: var(--farbe-text); font-weight: 600; display: block; }
.liste__aktion {
display: inline-block;
margin-top: 8px;
font-weight: 600;
color: var(--farbe-akzent);
}
/* In der Faktenspalte steht die Aktion immer auf einer eigenen Zeile,
damit die Zeilen unabhaengig von der Textlaenge gleich aufgebaut sind. */
.liste__fakten .liste__aktion { display: block; }
/* Status - nie nur ueber Farbe, der Text nennt den Zustand immer aus */
.status { font-weight: 600; }
.status--offen { color: var(--farbe-offen); }
.status--zu { color: var(--farbe-akzent); }
.status--pause { color: var(--farbe-text-4); }
/* -------------------------------------------------------------------------
Kartenraster (Ausflugsziele auf der Startseite) - Bild plus Text,
keine Rahmen, keine Schatten
------------------------------------------------------------------------- */
.kacheln {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.kacheln--drei { grid-template-columns: repeat(3, 1fr); }
.kachel { min-width: 0; }
.kachel img {
width: 100%;
height: 170px;
object-fit: cover;
background: var(--farbe-flaeche-2);
margin-bottom: 10px;
}
.kachel__titel {
font-family: var(--serif);
font-size: 19px;
font-weight: 600;
line-height: 1.25;
margin: 4px 0 4px;
}
.kachel__titel a { color: var(--farbe-text); }
.kachel__meta {
font-size: 14px;
color: var(--farbe-text-3);
margin: 0;
line-height: 1.5;
}
/* Legacy .grid-3 und .gemeinde-card aus dem Altbestand */
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0 var(--spalte-abstand);
}
.gemeinde-card {
display: block;
padding: 13px 0;
border-bottom: 1px solid var(--farbe-linie-2);
background: none;
border-radius: 0;
box-shadow: none;
color: inherit;
}
.gemeinde-card:hover { text-decoration: none; background: var(--farbe-flaeche-2); }
.gemeinden__bezirk {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--farbe-akzent);
margin: 22px 0 6px;
padding-bottom: 6px;
border-bottom: 1px solid var(--farbe-linie);
}
.gemeinden__bezirk:first-of-type { margin-top: 0; }
.gemeinde-card h3,
.gemeinde-card h4 {
font-family: var(--serif);
font-size: 19px;
font-weight: 600;
margin: 0 0 4px;
color: var(--farbe-text);
}
.gemeinde-card p {
font-size: 14px;
line-height: 1.55;
color: var(--farbe-text-3);
margin: 0 0 6px;
}
.gemeinde-meta {
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
font-size: 13px;
color: var(--farbe-text-4);
}
/* Trennt die Angaben auch fuer Vorleseprogramme, die Flex-Abstaende ignorieren. */
.gemeinde-meta span + span::before {
content: "· ";
margin-right: 4px;
}
/* -------------------------------------------------------------------------
Aufmacher der Startseite
Bild und Text sind getrennt - kein Text im Bild.
------------------------------------------------------------------------- */
/* Bild links, Text rechts - der Text bekommt die breitere Spalte. Umgekehrt
lief die Schlagzeile auf drei Zeilen und der Fliesstext auf rund 45 Zeichen,
und weil das Bild frueher endete als der Text, blieb darunter Platz leer. */
.aufmacher {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 28px;
align-items: start;
}
.aufmacher__schlagzeile {
font-family: var(--serif);
font-size: 38px;
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.02em;
margin: 0 0 14px;
}
.weitere {
border-top: 1px solid var(--farbe-linie);
margin-top: 20px;
padding-top: 6px;
}
.weitere__eintrag { padding: 12px 0; }
h2.weitere__titel,
.weitere__titel {
font-family: var(--serif);
font-size: 18px;
font-weight: 600;
line-height: 1.25;
letter-spacing: 0;
border-bottom: 0;
padding-bottom: 0;
margin: 0 0 2px;
}
.weitere__titel a { color: var(--farbe-text); }
.weitere__meta {
font-size: 13px;
color: var(--farbe-text-4);
margin: 0;
}
.karte__quelle {
font-size: 13px;
color: var(--farbe-text-4);
margin: 8px 0 0;
}
.suche-gross {
display: flex;
margin: 0 0 22px;
max-width: 520px;
}
.suche-gross .masthead__feld { flex: 1; width: auto; }
/* -------------------------------------------------------------------------
Terminliste
------------------------------------------------------------------------- */
.termine { border-top: 2px solid var(--farbe-text); }
.termin {
display: grid;
grid-template-columns: 120px 1fr 260px 150px 90px;
gap: 20px;
align-items: baseline;
padding: 13px 0;
border-bottom: 1px solid var(--farbe-linie-2);
}
.termin__datum,
.termin-datum {
font-size: 15px;
font-weight: 700;
color: var(--farbe-akzent);
font-family: var(--sans);
line-height: 1.4;
}
/* Auf breiten Schirmen steht das ausgeschriebene Datum, mobil das Kaestchen. */
.termin__tag,
.termin__monat { display: none; }
.termin__lang { display: inline; }
.termin__titel,
.termin-name {
font-family: var(--serif);
font-size: 18px;
font-weight: 600;
line-height: 1.25;
color: var(--farbe-text);
margin: 0;
}
.termin__text {
font-size: 15px;
line-height: 1.55;
color: var(--farbe-text-3);
margin: 0;
}
.termin__ort,
.termin-ort { font-size: 15px; color: var(--farbe-text-2); }
.termin__zeit {
font-size: 14px;
color: var(--farbe-text-4);
text-align: right;
}
.termin-tag,
.filter-chip {
display: inline-block;
font-family: var(--sans);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--farbe-akzent);
background: none;
border: 0;
border-radius: 0;
padding: 0;
margin: 0 0 4px;
}
.filter-chip {
border: 1px solid var(--farbe-linie-feld);
background: var(--farbe-weiss);
color: var(--farbe-text);
letter-spacing: 0;
text-transform: none;
font-weight: 600;
font-size: 14px;
padding: 8px 14px;
margin: 0 8px 8px 0;
}
.filter-chip--aktiv,
.filter-chip[aria-pressed="true"] {
background: var(--farbe-text);
color: var(--farbe-weiss);
border-color: var(--farbe-text);
}
.filter-chip:hover { background: var(--farbe-flaeche-2); }
.filter-chip[aria-pressed="true"]:hover { background: #000; }
/* Filterleiste ueber einer Liste */
.filterleiste {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 10px;
padding: 0 0 14px;
border-bottom: 1px solid var(--farbe-linie);
margin-bottom: 4px;
}
.filterleiste__gruppe {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--farbe-text-4);
margin: 0 4px 0 0;
}
/* -------------------------------------------------------------------------
Filterspalte
------------------------------------------------------------------------- */
.filter {
border: 1px solid var(--farbe-linie);
background: var(--farbe-weiss);
padding: 18px 18px 22px;
align-self: start;
}
.filter__titel {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--farbe-text);
border-bottom: 2px solid var(--farbe-text);
padding-bottom: 8px;
margin: 0 0 16px;
font-family: var(--sans);
}
.filter__gruppe { margin-bottom: 18px; }
.filter__gruppe-titel {
font-size: 14px;
font-weight: 700;
color: var(--farbe-text);
margin: 0 0 8px;
font-family: var(--sans);
}
.filter__option {
display: flex;
align-items: center;
gap: 9px;
font-size: 14px;
color: var(--farbe-text-2);
padding: 5px 0;
cursor: pointer;
}
.filter__option input[type="checkbox"] {
width: 13px;
height: 13px;
border: 1px solid var(--farbe-checkbox);
background: var(--farbe-weiss);
border-radius: 0;
-webkit-appearance: none;
appearance: none;
margin: 0;
flex: 0 0 auto;
cursor: pointer;
}
.filter__option input[type="checkbox"]:checked {
background: var(--farbe-text);
border-color: var(--farbe-text);
}
/* -------------------------------------------------------------------------
Schaltflaechen
------------------------------------------------------------------------- */
.btn,
.knopf {
display: inline-block;
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
line-height: 1.2;
padding: 12px 18px;
border: 1px solid transparent;
border-radius: 0;
cursor: pointer;
text-align: center;
box-shadow: none;
}
.btn:hover,
.knopf:hover { text-decoration: none; }
.btn-primary,
.knopf--akzent {
background: var(--farbe-akzent);
border-color: var(--farbe-akzent);
color: var(--farbe-weiss);
}
.btn-primary:hover,
.knopf--akzent:hover { background: #7a1b30; border-color: #7a1b30; }
.knopf--dunkel {
background: var(--farbe-text);
border-color: var(--farbe-text);
color: var(--farbe-weiss);
}
.knopf--dunkel:hover { background: #000; }
.btn-outline,
.btn-outline-wine,
.knopf--rand {
background: var(--farbe-weiss);
border-color: var(--farbe-linie-feld);
color: var(--farbe-text);
}
.btn-outline:hover,
.btn-outline-wine:hover,
.knopf--rand:hover { background: var(--farbe-flaeche-2); }
.knopf--voll { display: block; width: 100%; }
/* -------------------------------------------------------------------------
Abschluss-Sektion des Altbestands
------------------------------------------------------------------------- */
.cta-section {
background: var(--farbe-flaeche-2);
border: 1px solid var(--farbe-linie);
padding: 28px var(--rand);
margin-top: 44px;
}
.cta-content { max-width: none; text-align: left; }
.cta-content h2 { margin-bottom: 10px; }
.cta-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.highlight-item {
padding: 12px 0;
border-bottom: 1px solid var(--farbe-linie-2);
font-size: 15px;
}
.content-block { margin-bottom: 28px; }
.gemeinde-sidebar { display: grid; gap: 16px; }
/* Tabellen */
.tabelle-scroll {
overflow-x: auto;
margin: 0 0 22px;
-webkit-overflow-scrolling: touch;
}
.tabelle-scroll table { margin-bottom: 0; }
/* Verzeichnistabellen: am Handy schmaeler als der Inhalt. Ohne min-width
quetscht die Tabelle die Spalten zusammen, statt den Scroll auszuloesen. */
.tabelle-scroll .termin-tabelle { min-width: 640px; }
/* Spaltenbreiten: ohne sie bekommt die Beschreibungsspalte am wenigsten
Platz und treibt die Zeilenhoehe hoch. */
.termin-tabelle th:nth-child(1), .termin-tabelle td:nth-child(1) { width: 25%; }
.termin-tabelle th:nth-child(2), .termin-tabelle td:nth-child(2) { width: 24%; }
.termin-tabelle th:nth-child(3), .termin-tabelle td:nth-child(3) { width: 38%; }
.termin-tabelle th:nth-child(4), .termin-tabelle td:nth-child(4) { width: 13%; }
/* Trefferzahl und Leermeldung ueber bzw. unter einer gefilterten Liste */
.filter-count {
font-size: 14px;
color: var(--farbe-text-2);
margin: 10px 0 14px;
}
.no-results {
padding: 18px 0;
color: var(--farbe-text-2);
}
/* Hervorgehobene Auszeichnung in einer Tabellenzelle */
.termin-tag--stark { color: var(--farbe-text); }
table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
margin: 0 0 22px;
}
th, td {
text-align: left;
padding: 12px 14px 12px 0;
border-bottom: 1px solid var(--farbe-linie-2);
vertical-align: top;
}
th {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--farbe-text);
border-bottom: 2px solid var(--farbe-text);
}
/* Kartenflaeche */
.map-container,
.karte {
width: 100%;
height: 300px;
border: 1px solid var(--farbe-linie);
background: var(--farbe-flaeche-2);
border-radius: 0;
}
.map-container-full { height: 420px; }
.karte__zaehler {
display: flex;
flex-wrap: wrap;
gap: 20px;
font-size: 14px;
color: var(--farbe-text-3);
padding-top: 10px;
}
/* Leaflet bringt gerundete Ecken und Schatten mit - beides gibt es hier nicht. */
.leaflet-container { font-family: var(--sans); background: var(--farbe-flaeche-2); }
.leaflet-bar,
.leaflet-bar a,
.leaflet-popup-content-wrapper,
.leaflet-popup-tip,
.leaflet-control-attribution {
border-radius: 0 !important;
box-shadow: none !important;
}
.leaflet-bar a {
border: 1px solid var(--farbe-linie-feld);
color: var(--farbe-text);
}
.leaflet-bar a:hover { background: var(--farbe-flaeche-2); }
.leaflet-popup-content-wrapper {
border: 1px solid var(--farbe-text);
font-size: 14px;
}
.leaflet-popup-content { margin: 12px 14px; line-height: 1.5; }
.leaflet-control-attribution { font-size: 11px; }
/* -------------------------------------------------------------------------
Fusszeile
------------------------------------------------------------------------- */
.fusszeile,
.footer {
border-top: 3px solid var(--farbe-text);
background: var(--farbe-flaeche-2);
color: var(--farbe-text-2);
margin-top: 44px;
}
.fusszeile__achse {
max-width: var(--breite);
margin: 0 auto;
padding: 32px var(--rand) 26px;
}
.footer-grid,
.fusszeile__raster {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
gap: 28px;
}
.footer-brand,
.fusszeile__marke {
font-family: var(--serif);
font-size: 20px;
font-weight: 700;
color: var(--farbe-text);
margin: 0 0 10px;
}
.fusszeile__adresse,
.fusszeile__zeile {
font-size: 14px;
line-height: 1.6;
color: var(--farbe-text-3);
margin: 0;
max-width: 26ch;
}
.footer-column h4,
h2.fusszeile__titel,
.fusszeile__titel {
font-family: var(--sans);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--farbe-text);
line-height: 1.4;
border-bottom: 0;
padding-bottom: 0;
margin: 0 0 10px;
}
.footer-links,
.fusszeile__liste {
list-style: none;
margin: 0;
padding: 0;
}
.footer-links li,
.fusszeile__liste li { margin: 0 0 7px; }
.footer-links a,
.fusszeile__liste a {
font-size: 14px;
color: var(--farbe-text-3);
}
.footer-links a:hover,
.fusszeile__liste a:hover { color: var(--farbe-text); }
.footer-bottom,
.fusszeile__abschluss {
border-top: 1px solid var(--farbe-linie);
margin-top: 24px;
padding-top: 14px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
font-size: 13px;
color: var(--farbe-text-4);
}
.fusszeile__abschluss a { color: var(--farbe-text-4); }
.fusszeile__abschluss a:hover { color: var(--farbe-text); }
.fusszeile__rechts { display: flex; flex-wrap: wrap; gap: 18px; }
/* -------------------------------------------------------------------------
Mobile Bottom-Navigation - erst unter 900px sichtbar
------------------------------------------------------------------------- */
.bottomnav {
display: none;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 40;
background: var(--farbe-text);
padding: 10px 0 22px;
}
.bottomnav__liste {
display: grid;
grid-template-columns: repeat(4, 1fr);
list-style: none;
margin: 0;
padding: 0;
}
.bottomnav__liste li { margin: 0; }
.bottomnav a {
display: block;
text-align: center;
font-size: 12px;
color: var(--farbe-invers);
padding: 6px 4px;
min-height: 34px;
}
.bottomnav a:hover { text-decoration: none; }
.bottomnav__punkt--aktiv { color: var(--farbe-weiss); font-weight: 600; }
/* =========================================================================
Responsive
Breakpoints laut Handoff: ab 1200px mehrspaltig, 900-1200px Seitenleiste
unter den Inhalt, unter 900px einspaltig plus Bottom-Navigation.
========================================================================= */
@media (max-width: 1200px) {
.raster-seitenleiste,
.raster-filter,
.raster-halb { grid-template-columns: minmax(0, 1fr); }
/* Einspaltig hat die Karte keinen Weg zum Wandern - sticky waere wirkungslos,
aber es ausdruecklich abzuschalten erspart die Frage beim naechsten Umbau. */
.karte-spalte { position: static; }
.raster-seitenleiste > *,
.raster-filter > *,
.raster-halb > *,
.seitenleiste > * { min-width: 0; }
.seitenleiste { grid-template-columns: 1fr 1fr; display: grid; }
.kacheln { grid-template-columns: repeat(2, 1fr); }
.termin { grid-template-columns: 100px 1fr 200px 110px; }
.termin__zeit { grid-column: 4; }
.termin__text { display: none; }
.masthead__feld { width: 180px; }
}
@media (max-width: 900px) {
:root { --rand: 20px; }
.utility { display: none; }
.masthead__achse { padding: 14px var(--rand); align-items: center; }
/* Zwei Zeilen brauchen am Handy weniger Grad, sonst waechst der Kopf.
Die komplette Selektorliste der Basisregel wiederholen - Media Queries
erhoehen die Spezifitaet nicht. */
.masthead__marke { font-size: 20px; }
.masthead__zeile { display: none; }
.masthead__suche { display: none; }
.masthead__suche--offen {
display: flex;
order: 3;
width: 100%;
margin: 12px 0 0;
}
.masthead__suche--offen .masthead__feld { width: 100%; }
.masthead__achse { flex-wrap: wrap; }
.masthead__mobil { display: flex; }
.mobilmenue:not([hidden]) { display: block; }
/* Hauptnav wird zur horizontal scrollbaren Reiterleiste */
.hauptnav__achse { padding: 0; }
.hauptnav__liste {
overflow-x: auto;
scrollbar-width: none;
padding: 0 var(--rand);
width: 100%;
}
.hauptnav__liste::-webkit-scrollbar { display: none; }
.hauptnav__punkt { font-size: 13px; padding: 11px 12px; }
.hauptnav__extra { display: none; }
body { padding-bottom: 68px; }
.bottomnav { display: block; }
.inhalt { padding: 20px var(--rand) 36px; }
.seitenleiste { grid-template-columns: 1fr; }
/* Alle drei Selektoren der Desktop-Regel muessen hier wiederholt werden.
`.seitenkopf h1` wiegt schwerer als ein blosses `h1` - stuende hier nur
`h1`, bliebe die Ueberschrift auf jeder Seite mit Seitenkopf bei 44px
und schoebe das Layout am Handy waagrecht auf. */
.seitenkopf h1, .page-hero h1, h1 { font-size: 30px; }
h2, .section-header h2, .sektionstitel h2 { font-size: 22px; }
h3 { font-size: 19px; }
.vorspann, .lead-text, .page-hero-subtitle { font-size: 17px; }
.bild--aufmacher img,
.bild--gross img,
.bild--mittel img { height: 210px; }
.bildpaar { grid-template-columns: 1fr; gap: 14px; }
.bildpaar img { height: 200px; }
.kacheln,
.kacheln--drei,
.grid-3 { grid-template-columns: 1fr; gap: 0; }
.kachel { padding: 14px 0; border-bottom: 1px solid var(--farbe-linie-2); }
.kachel img { height: 180px; }
/* Listenzeilen werden zu Bild-Text-Paaren */
.liste__zeile { grid-template-columns: 100px 1fr; gap: 14px; }
.liste__zeile--ohne-bild { grid-template-columns: 1fr; }
.liste__bild { height: 82px; }
.liste__fakten {
grid-column: 1 / -1;
border-left: 0;
padding-left: 0;
padding-top: 6px;
}
.liste__titel { font-size: 18px; }
/* Terminzeilen werden zu Datumskaestchen plus Textblock */
.termin {
grid-template-columns: 58px 1fr;
gap: 14px;
padding: 14px 0;
align-items: start;
}
.termin__datum {
border: 1px solid var(--farbe-linie);
background: var(--farbe-weiss);
text-align: center;
padding: 6px 2px;
line-height: 1.15;
}
.termin__tag {
display: block;
font-family: var(--serif);
font-size: 20px;
font-weight: 700;
color: var(--farbe-text);
}
.termin__monat {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--farbe-akzent);
}
.termin__lang { display: none; }
.aufmacher { grid-template-columns: 1fr; gap: 18px; }
.aufmacher__schlagzeile { font-size: 25px; }
.termin__ort,
.termin__zeit {
grid-column: 2;
text-align: left;
font-size: 14px;
}
.termin__text { display: none; }
.toc-list { columns: 1; }
/* Unter dieser Breite werden Spalten sonst unlesbar schmal - dann lieber
die Tabelle waagrecht schieben. */
.tabelle-scroll table { min-width: 520px; }
th, td { padding-right: 16px; }
.footer-grid,
.fusszeile__raster { grid-template-columns: 1fr 1fr; gap: 22px; }
.footer-bottom,
.fusszeile__abschluss { flex-direction: column; gap: 8px; }
.cta-section { padding: 22px var(--rand); }
/* Touch-Ziele mindestens 44px. Nur die Listen-Bauform - die Chips der
Div-Bauform bringen ihre Hoehe ueber min-height selbst mit und wuerden
hier ihr Innenabstand verlieren. */
.linkliste a,
.related-links > li > .related-link,
.footer-links a,
.toc-list a {
display: block;
min-height: 24px;
padding: 5px 0;
}
}
@media (max-width: 560px) {
/* Auf 375px-Schirmen bleiben rund 335px Textbreite. 30px Serifenschrift
reicht dort fuer „Feuerwehrmuseums" gerade noch; 26px geben Luft, ohne
dass die Ueberschrift ihre Wirkung verliert. */
.seitenkopf h1, .page-hero h1, h1 { font-size: 26px; }
/* Die Fusszeile bleibt auch auf schmalen Schirmen zweispaltig - einspaltig
waere sie zehn Bildschirme lang. Der Markenblock nimmt beide Spalten. */
.footer-grid,
.fusszeile__raster { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.fusszeile__raster > :first-child { grid-column: 1 / -1; }
.kacheln, .kacheln--drei { grid-template-columns: 1fr; }
.cta-buttons { flex-direction: column; }
.btn, .knopf { width: 100%; }
}
/* -------------------------------------------------------------------------
Druck
------------------------------------------------------------------------- */
@media print {
.utility,
.hauptnav,
.bottomnav,
.masthead__suche,
.masthead__mobil,
.fusszeile { display: none !important; }
body { background: #fff; font-size: 11pt; }
.inhalt { padding: 0; }
a { color: #000; text-decoration: underline; }
}