/* Feuerwehr Telgte — Hi-fi redesign stylesheet */ /* Extracted from Feuerwehr Telgte.html */ /* Feuerwehr Telgte — Hi-fi redesign stylesheet */ :root { --red: #CD1719; --red-deep: #8F1011; --red-ink: #3A0009; --ink: #0A0A0A; --ink-2: #1A1A1A; --ink-3: #2A2A2A; --paper: #F5F2EE; --paper-2: #EBE6DF; --line: #1f1f1f; --line-soft: rgba(0,0,0,.12); --yellow: #FFD60A; /* Hintergrund und Akzentfarbe der Fußzeile. Der Akzent färbt die Spalten- überschriften und die Notrufnummer. Einzelne Seitenbereiche überschreiben beides über eine Klasse am (siehe .feuerwehr-site--jugend). */ --footer-bg: #050505; --footer-accent: var(--red); /* Einheitliche Schrift: Inter, mit verschiedenen Schnitten/Gewichten für Display (--font-head), Body (--font-body) und Kicker/Mono (--font-mono). */ --font-head: "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-mono: "Inter", system-ui, sans-serif; /* Farbvarianten für Knöpfe. Eine Quelle für die Stil-Auswahl im Texteditor (.rte-btn--*) und für die CTA-Knöpfe im Mitmachen-Block (.btn-fw--*). Die Schriftfarbe ist jeweils die kontraststärkere: auf Orange und Weiß steht dunkle Schrift, weiße käme dort unter 4,5:1 und wäre schwer zu lesen. Weiß bekommt zusätzlich einen Rand, sonst verschwindet der Knopf auf hellem Grund. */ --btn-rot-bg: #CD1719; --btn-rot-bg-hover: #8F1011; --btn-rot-fg: #ffffff; --btn-rot-fg-hover: #ffffff; --btn-rot-rand: transparent; --btn-blau-bg: #092e6e; --btn-blau-bg-hover: #061f4a; --btn-blau-fg: #ffffff; --btn-blau-fg-hover: #ffffff; --btn-blau-rand: transparent; --btn-orange-bg: #fd4f00; --btn-orange-bg-hover: #d84300; --btn-orange-fg: #0A0A0A; --btn-orange-fg-hover: #0A0A0A; --btn-orange-rand: transparent; --btn-weiss-bg: #ffffff; --btn-weiss-bg-hover: #EBE6DF; --btn-weiss-fg: #0A0A0A; --btn-weiss-fg-hover: #0A0A0A; --btn-weiss-rand: rgba(0, 0, 0, 0.18); --btn-dunkel-bg: #0A0A0A; --btn-dunkel-bg-hover: #CD1719; --btn-dunkel-fg: #F5F2EE; --btn-dunkel-fg-hover: #ffffff; --btn-dunkel-rand: transparent; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); color: var(--ink); background: var(--paper); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* height:auto ist nötig, weil TYPO3 width/height als Attribute ausgibt: sobald max-width greift, bliebe die Höhe sonst stehen und das Bild wird verzerrt. */ img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; } .mono { font-family: var(--font-mono); letter-spacing: 0.04em; font-size: 0.78rem; text-transform: uppercase; } .dim { opacity: 0.62; } .sml { font-size: 0.72rem; } .em { color: var(--red); } .grow { flex: 1; } .sep { opacity: 0.4; } /* ---- pulse dot ---- */ .pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); vertical-align: middle; margin-right: 8px; box-shadow: 0 0 0 0 rgba(205,23,25,.55); animation: pulse 1.6s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(205,23,25,.65); } 70% { box-shadow: 0 0 0 10px rgba(205,23,25,0); } 100% { box-shadow: 0 0 0 0 rgba(205,23,25,0); } } /* ---- top strip ---- */ .topstrip { background: var(--ink); color: #f0f0f0; font-size: 0.78rem; } .topstrip-inner { max-width: 1440px; margin: 0 auto; padding: 10px 32px; display: flex; align-items: center; gap: 14px; } .topstrip a { transition: color .15s; } .topstrip a:hover { color: var(--red); } /* ---- header ---- */ .hdr { background: var(--paper); border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; z-index: 50; } .hdr-inner { max-width: 1440px; margin: 0 auto; padding: 18px 32px; display: flex; align-items: center; gap: 32px; } .brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .emblem { border-radius: 4px; } .brand-txt { line-height: 1.05; } .brand-name { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; } .brand-city { font-family: var(--font-head); font-size: 1.55rem; letter-spacing: 0.04em; } .brand-name.light, .brand-city.light { color: #F5F2EE; opacity: 0.95; } .brand-name.light { opacity: 0.6; } .nav { display: flex; align-items: center; gap: 28px; margin-left: auto; } .nav-li { position: relative; display: flex; align-items: center; } .nav-item { font-size: 0.92rem; font-weight: 500; position: relative; padding: 6px 0; transition: color .15s; display: inline-flex; align-items: center; gap: 4px; } .nav-item:hover { color: var(--red); } .nav-item.active::after { content: ""; position: absolute; left: 0; right: 30%; bottom: 0; height: 2px; background: var(--red); } .nav-caret { font-size: 0.7em; opacity: 0.65; transition: transform .15s; } .nav-li.has-sub:hover .nav-item > .nav-caret, .nav-li.has-sub:focus-within .nav-item > .nav-caret { transform: translateY(1px); opacity: 1; } .nav-sub { position: absolute; top: 100%; left: -16px; background: var(--paper); border: 1px solid var(--line-soft); border-top: 2px solid var(--red); min-width: 240px; padding: 8px 0; margin: 0; list-style: none; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 60; box-shadow: 0 14px 40px rgba(0,0,0,.08); } .nav-li.has-sub:hover > .nav-sub, .nav-li.has-sub:focus-within > .nav-sub { opacity: 1; visibility: visible; transform: translateY(0); } .nav-sub-li { position: relative; } .nav-sub-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 18px; font-size: 0.9rem; font-weight: 500; color: var(--ink); transition: background .12s, color .12s; } .nav-sub-item:hover, .nav-sub-item:focus { background: var(--line-soft); color: var(--red); } .nav-sub-item.active { color: var(--red); } .nav-sub--nested { top: -9px; left: 100%; } .nav-sub-li.has-sub:hover > .nav-sub--nested, .nav-sub-li.has-sub:focus-within > .nav-sub--nested { opacity: 1; visibility: visible; transform: translateY(0); } .nav-item.cta { background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 2px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: background .15s; } .nav-item.cta:hover { background: var(--red); color: #fff; } .cta-arrow { transition: transform .2s; } .nav-item.cta:hover .cta-arrow { transform: translateX(3px); } .menu-btn { display: none; width: 34px; height: 34px; flex-direction: column; justify-content: center; gap: 4px; } .menu-btn span { display: block; height: 2px; background: var(--ink); width: 100%; } .mob-nav { display: none; } /* ---- hero ---- */ .hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; min-height: 620px; } .hero-bg { position: absolute; inset: 0; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; filter: contrast(1.1) saturate(1.1); } .hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.7) 45%, rgba(10,10,10,0.35) 100%), linear-gradient(0deg, rgba(205,23,25,0.22) 0%, transparent 60%); opacity: calc(var(--hero-scrim-pct, 100) / 100); } .hero-grid { position: relative; max-width: 1440px; margin: 0 auto; padding: 80px 32px 90px; display: grid; grid-template-columns: 1fr; gap: 60px; align-items: start; } .hero-eyebrow { color: #fff; opacity: 0.92; display: inline-flex; align-items: center; border-left: 2px solid var(--red); padding-left: 12px; margin-bottom: 28px; } .hero-headline { font-family: var(--font-head); font-size: clamp(56px, 7.2vw, 120px); font-weight: 800; line-height: 0.92; letter-spacing: -0.02em; margin: 0 0 28px; text-wrap: balance; } .hero-headline .word { display: inline-block; animation: wordin 0.7s cubic-bezier(.2,.8,.2,1) backwards; } .hero-headline .word:nth-child(1) { animation-delay: 0.05s; } .hero-headline .word:nth-child(3) { animation-delay: 0.15s; } .hero-headline .word:nth-child(5) { animation-delay: 0.25s; } .hero-headline .word:nth-child(7) { animation-delay: 0.35s; } .hero-headline .word.accent { color: #fff; } @keyframes wordin { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .hero-sub { font-size: 1.12rem; max-width: 520px; opacity: 0.88; margin: 0 0 40px; } .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; } /* Kompakte Hero-Variante (feuerwehrtelgte/hero-compact): niedriger, ohne Buttons. Feste Mindesthöhe + vertikale Zentrierung → immer gleich hoch, egal ob Eyebrow und/oder Untertitel vorhanden sind. */ .hero--compact { min-height: 240px; display: flex; align-items: center; } .hero--compact .hero-grid { width: 100%; padding: 40px 32px; gap: 0; } .hero--compact .hero-eyebrow { margin-bottom: 18px; } .hero--compact .hero-headline { font-size: clamp(34px, 4.4vw, 60px); line-height: 0.98; margin: 0 0 18px; } .hero--compact .hero-sub { margin: 0; max-width: 640px; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-weight: 600; font-size: 0.95rem; border-radius: 2px; transition: all .18s; font-family: inherit; cursor: pointer; white-space: nowrap; border: 0; text-decoration: none; } .btn .arr { transition: transform .2s; font-size: 1.25em; font-weight: 800; line-height: 1; display: inline-block; } .btn:hover .arr { transform: translateX(4px); } .btn-primary { --bs-btn-bg: var(--red); --bs-btn-border-color: var(--red); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--red-deep); --bs-btn-hover-border-color: var(--red-deep); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--red-deep); --bs-btn-active-border-color: var(--red-deep); --bs-btn-active-color: #fff; background: var(--red); color: #fff; border: 0; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--red-deep); color: #fff; border: 0; } .btn-primary:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 2px; box-shadow: none; } /* btn-ghost wird projektweit als rote Primärvariante dargestellt — nur im Header (.hdr) bleibt der Ghost-Look erhalten, weil dort der eigene dunkle CTA-Stil greift. */ .btn-ghost { background: var(--red); color: #fff; border: 0; transition: background .18s; } .btn-ghost:hover, .btn-ghost:focus, .btn-ghost:active { background: var(--red-deep); color: #fff; } .btn-ghost:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 2px; } /* Im Hero (dunkler Hintergrund) heller Rand zur Abgrenzung. */ .hero .btn-ghost { box-shadow: 0 0 0 1px rgba(255,255,255,0.25); } .hero .btn-ghost:hover { box-shadow: 0 0 0 1px rgba(255,255,255,0.5); } .btn.big { padding: 18px 28px; font-size: 1rem; } /* Farbvarianten für CTA-Knöpfe, die im Backend wählbar sind. Sie ändern nur die Farbe – Größe, Abstände und der Pfeil kommen weiter von .btn und .big. Die Werte stehen als Token in :root und gelten genauso für die Knöpfe aus dem Texteditor (.rte-btn--*). */ .btn-fw { background: var(--btn-bg); color: var(--btn-fg); border: 0; /* Der Rand der weißen Variante liegt als innerer Schatten auf der Fläche. Ein echter border würde den Knopf um 2px wachsen lassen und damit neben einem Standardknopf unterschiedlich hoch aussehen. */ box-shadow: inset 0 0 0 1px var(--btn-rand, transparent); } .btn-fw:hover, .btn-fw:focus, .btn-fw:active { background: var(--btn-bg-hover); color: var(--btn-fg-hover); } .btn-fw:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; /* Bootstrap setzt auf .btn:focus-visible einen eigenen Schatten – hier wird der innere Rand wieder hergestellt, damit er beim Tabben nicht wegspringt. */ box-shadow: inset 0 0 0 1px var(--btn-rand, transparent); } .btn-fw--rot { --btn-bg: var(--btn-rot-bg); --btn-bg-hover: var(--btn-rot-bg-hover); --btn-fg: var(--btn-rot-fg); --btn-fg-hover: var(--btn-rot-fg-hover); --btn-rand: var(--btn-rot-rand); } .btn-fw--blau { --btn-bg: var(--btn-blau-bg); --btn-bg-hover: var(--btn-blau-bg-hover); --btn-fg: var(--btn-blau-fg); --btn-fg-hover: var(--btn-blau-fg-hover); --btn-rand: var(--btn-blau-rand); } .btn-fw--orange { --btn-bg: var(--btn-orange-bg); --btn-bg-hover: var(--btn-orange-bg-hover); --btn-fg: var(--btn-orange-fg); --btn-fg-hover: var(--btn-orange-fg-hover); --btn-rand: var(--btn-orange-rand); } .btn-fw--weiss { --btn-bg: var(--btn-weiss-bg); --btn-bg-hover: var(--btn-weiss-bg-hover); --btn-fg: var(--btn-weiss-fg); --btn-fg-hover: var(--btn-weiss-fg-hover); --btn-rand: var(--btn-weiss-rand); } .btn-fw--dunkel { --btn-bg: var(--btn-dunkel-bg); --btn-bg-hover: var(--btn-dunkel-bg-hover); --btn-fg: var(--btn-dunkel-fg); --btn-fg-hover: var(--btn-dunkel-fg-hover); --btn-rand: var(--btn-dunkel-rand); } .btn-text { display: inline-flex; align-items: center; color: currentColor; opacity: 0.75; padding: 14px 8px; border-bottom: 1px solid transparent; transition: all .15s; } .btn-text:hover { opacity: 1; border-color: currentColor; } /* ---- status card ---- */ .status-card { background: rgba(20,20,20,0.72); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.1); border-left: 3px solid var(--red); padding: 26px 28px 22px; color: #fff; } .status-head { font-size: 0.72rem; color: var(--red); margin-bottom: 20px; display: flex; align-items: center; } .status-big { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,0.12); } .status-num { font-family: var(--font-head); font-size: 88px; line-height: 0.85; letter-spacing: -0.04em; color: #fff; font-feature-settings: "tnum"; } .status-lbl { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; padding-bottom: 8px; line-height: 1.3; } .status-row { display: grid; grid-template-columns: 72px 1fr; gap: 14px; margin-bottom: 14px; font-size: 0.88rem; } .status-k { opacity: 0.55; padding-top: 2px; } .status-link { display: inline-block; margin-top: 14px; color: var(--red); border-bottom: 1px solid transparent; transition: border-color .15s; } .status-link:hover { border-color: var(--red); } /* ---- ticker ---- */ .hero-ticker { position: absolute; bottom: 0; left: 0; right: 0; height: 6px; background: var(--red); } /* ---- stats bar ---- */ .stats { background: var(--ink); color: #fff; } .stats-inner { max-width: 1440px; margin: 0 auto; padding: 40px 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .stats-inner.flat { padding: 0; background: none; color: inherit; } .stat { border-left: 2px solid var(--red); padding-left: 18px; } .stat-n { font-family: var(--font-head); font-size: clamp(38px, 4.2vw, 64px); line-height: 1; letter-spacing: -0.02em; font-feature-settings: "tnum"; } .stat-l { margin-top: 8px; opacity: 0.7; } /* ---- section base ---- */ .section-head { max-width: 1440px; margin: 0 auto; padding: 90px 32px 36px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .eyebrow { color: var(--red); margin-bottom: 14px; display: inline-block; } .section-title { font-family: var(--font-head); font-size: clamp(36px, 4.4vw, 64px); line-height: 0.98; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } .section-title .dim { opacity: 0.35; } /* ---- filter tabs ---- */ .filter-tabs { display: flex; gap: 4px; flex-wrap: wrap; } .tab { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 14px; background: transparent; border: 1px solid var(--line-soft); transition: all .15s; } .tab { cursor: pointer; color: inherit; } .tab:hover { border-color: var(--ink); } .tab.active { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* ---- news ---- */ .news { padding-bottom: 40px; } .news-grid { max-width: 1440px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; } .news-feat { display: block; background: #fff; transition: transform .3s cubic-bezier(.2,.8,.2,1); } .news-feat:hover { transform: translateY(-3px); } .news-img { position: relative; aspect-ratio: 16 / 10; background: #e8e4dd; overflow: hidden; } .news-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); } .news-feat:hover .news-img img { transform: scale(1.04); } .news-cat { position: absolute; top: 16px; left: 16px; background: var(--red); color: #fff; padding: 6px 12px; font-size: 0.7rem; letter-spacing: 0.08em; } /* Rundum eingerückt, damit der Text nicht an den Kanten der weißen Karte klebt. Oben bleibt es bei 24px – der Abstand zum Bild war schon richtig. */ .news-feat-body { padding: 24px 24px 24px; } .news-date { margin-bottom: 10px; } .news-feat-body h3 { font-family: var(--font-head); font-size: clamp(22px, 2.2vw, 32px); line-height: 1.1; margin: 0 0 12px; letter-spacing: -0.01em; } .news-feat-body p { opacity: 0.72; margin: 0 0 18px; max-width: 60ch; } .read-more { color: var(--red); border-bottom: 1px solid var(--red); } .news-list { display: flex; flex-direction: column; gap: 20px; } .news-item { display: grid; grid-template-columns: 112px 1fr; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--line-soft); transition: transform .2s; } .news-item:hover { transform: translateX(4px); } .news-item:hover .news-item-title { color: var(--red); } .news-item-img { aspect-ratio: 1 / 1; background: #e8e4dd; overflow: hidden; } .news-item-img img { width: 100%; height: 100%; object-fit: cover; } .news-item-meta { display: flex; gap: 6px; margin-bottom: 6px; } .news-cat-sm { color: var(--red); } .news-item-title { font-weight: 600; font-size: 0.95rem; line-height: 1.3; transition: color .15s; } .news-more { color: var(--red); padding-top: 6px; border-bottom: 1px solid var(--red); align-self: flex-start; } .empty { padding: 40px; text-align: center; opacity: 0.6; } /* ---- News-Übersichtsliste (templateLayout feuerwehr_liste) ---- */ .news-listing { max-width: 1440px; margin: 0 auto; padding: 0 32px; } .news-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 44px 32px; } .news-cards .news-feat { background: #fff; display: flex; flex-direction: column; } .news-cards .news-feat-body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1 1 auto; } .news-cards .news-feat-body h3 { font-size: clamp(20px, 1.5vw, 26px); } .news-cards .news-feat-body p { font-size: 0.95rem; } .news-cards .read-more { margin-top: auto; } .news-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 52px; font-size: 0.8rem; } .news-pagination a, .news-pagination .current { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--line-soft); color: var(--ink); transition: background .15s, border-color .15s, color .15s; } .news-pagination a:hover { border-color: var(--red); color: var(--red); } .news-pagination .current { background: var(--red); border-color: var(--red); color: #fff; } .news-pagination .dots { padding: 0 6px; opacity: 0.5; } /* ---- News-Detailansicht ---- */ .news-single { padding: 0; } .article-detail { max-width: 820px; margin: 0 auto; padding: 0 32px; } .article-head { margin-bottom: 32px; } .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; } .article-meta .article-cat { background: var(--red); color: #fff; padding: 4px 10px; letter-spacing: 0.06em; } .article-meta time { opacity: 0.7; } .article-meta .article-author { opacity: 0.7; } .article-title { font-family: var(--font-head); font-size: clamp(34px, 5vw, 58px); line-height: 1.02; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } .article-lede { font-size: 1.2rem; line-height: 1.55; opacity: 0.85; margin-top: 22px; max-width: 68ch; } .article-lede p { margin: 0 0 0.6em; } .article-lede p:last-child { margin-bottom: 0; } .article-hero-img { margin: 0 0 40px; } .article-hero-img img { width: 100%; height: auto; display: block; background: #e8e4dd; } .article-hero-img figcaption { font-family: var(--font-mono); font-size: 0.78rem; opacity: 0.6; padding-top: 10px; } .article-body { font-size: 1.05rem; line-height: 1.7; } .article-body > *:first-child { margin-top: 0; } .article-body p { margin: 0 0 1.15em; } .article-body h2, .article-body h3, .article-body h4 { font-family: var(--font-head); line-height: 1.15; letter-spacing: -0.01em; margin: 1.8em 0 0.6em; } .article-body h2 { font-size: 1.7rem; } .article-body h3 { font-size: 1.35rem; } .article-body a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; } .article-body ul, .article-body ol { margin: 0 0 1.15em 1.2em; } .article-body li { margin-bottom: 0.4em; } .article-body img { max-width: 100%; height: auto; } .article-body blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--red); font-size: 1.15rem; font-style: italic; opacity: 0.9; } .article-related { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line-soft); } .article-related .eyebrow { margin-bottom: 16px; } .article-related-list, .article-files { list-style: none; margin: 0; padding: 0; } .article-related-list li { border-bottom: 1px solid var(--line-soft); } .article-related-list a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; padding: 12px 0; transition: color .15s; } .article-related-list a:hover .art-rel-title { color: var(--red); } .art-rel-date { flex: 0 0 auto; font-size: 0.78rem; } .art-rel-title { font-weight: 600; } .article-files li { padding: 8px 0; } .article-files a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); } .article-files a:hover { color: var(--red); } .article-foot { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; } .arr--left { display: inline-block; } /* Zurück-Link dezent (Outline) statt rot gefülltem Button */ .article-back { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-soft); } .article-back:hover, .article-back:focus, .article-back:active { background: transparent; color: var(--red); box-shadow: inset 0 0 0 1px var(--red); } .article-back .arr--left { transition: transform .2s; } .article-back:hover .arr--left { transform: translateX(-4px); } .article-pager { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.82rem; margin-left: auto; } .article-pager a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); opacity: 0.75; transition: opacity .15s, color .15s; } .article-pager a:hover { opacity: 1; color: var(--red); } /* Hero anklickbar */ .article-hero-img .lb-item { display: block; cursor: zoom-in; } /* Bildergalerie unter dem Artikel */ .article-gallery { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line-soft); } .article-gallery .eyebrow { margin-bottom: 16px; } .article-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .article-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #e8e4dd; cursor: zoom-in; } .article-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s cubic-bezier(.2,.8,.2,1); } .article-thumb:hover img { transform: scale(1.05); } /* Lightbox-Slider */ .lightbox { position: fixed; inset: 0; /* über Bootstrap-Modals (1055), damit die Lightbox auch aus einem Fahrzeug-Dialog heraus vorn liegt */ z-index: 2000; background: rgba(10,10,10,0.93); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .2s ease; } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox-img-wrap { display: flex; flex-direction: column; align-items: center; max-width: 92vw; max-height: 88vh; } .lightbox img { max-width: 92vw; max-height: 82vh; object-fit: contain; box-shadow: 0 12px 48px rgba(0,0,0,.55); } /* Zoom auf Originalgröße: eingepasst ist auf Plänen und Organigrammen nichts zu lesen. Der Klick schaltet um, danach wird gescrollt statt skaliert. display:block, weil ein zentriertes Flex-Kind, das breiter als sein Container ist, links nicht mehr erreichbar wäre. */ .lightbox.is-zoomable img { cursor: zoom-in; } .lightbox.is-zoomed .lightbox-img-wrap { display: block; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; overflow: auto; overscroll-behavior: contain; } .lightbox.is-zoomed img { max-width: none; max-height: none; cursor: zoom-out; } .lightbox.is-zoomed .lightbox-caption { display: none !important; } .lightbox-caption { color: #fff; opacity: 0.8; font-family: var(--font-mono); font-size: 0.78rem; margin-top: 14px; text-align: center; max-width: 80ch; } .lb-btn { position: absolute; background: rgba(255,255,255,0.1); color: #fff; border: 0; width: 52px; height: 52px; cursor: pointer; font-size: 1.6rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .15s; } .lb-btn:hover { background: var(--red); } .lb-prev { left: 18px; top: 50%; transform: translateY(-50%); } .lb-next { right: 18px; top: 50%; transform: translateY(-50%); } .lb-close { top: 18px; right: 18px; width: 48px; height: 48px; font-size: 1.9rem; } .lb-count { position: absolute; top: 26px; left: 26px; color: #fff; opacity: 0.65; font-family: var(--font-mono); font-size: 0.8rem; } /* ---- einsätze table ---- */ .eins-teaser { padding-bottom: 40px; } .eins-table { max-width: 1440px; margin: 0 auto; padding: 0 32px; font-size: 0.92rem; } .eins-row { display: grid; grid-template-columns: 70px 80px 130px 1fr 240px 160px; gap: 18px; padding: 18px 4px; border-bottom: 1px solid var(--line-soft); align-items: center; transition: background .15s; } .eins-row:hover:not(.eins-head) { background: rgba(205,23,25,0.05); } .eins-head { border-bottom: 2px solid var(--ink); opacity: 0.5; font-size: 0.7rem; padding-bottom: 10px; padding-top: 4px; } .type-pill { display: inline-block; font-size: 0.7rem; padding: 5px 10px; border: 1px solid var(--pc); color: var(--pc); border-radius: 2px; } /* ---- jugend ---- */ .jugend { background: var(--paper-2); padding: 0; margin-top: 40px; } .jugend-grid { max-width: 1440px; margin: 0 auto; padding: 90px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .jugend-img { position: relative; aspect-ratio: 4 / 5; background: #d9d5ce; overflow: hidden; } .jugend-img img { width: 100%; height: 100%; object-fit: cover; } .jugend-badge { position: absolute; top: 24px; right: 24px; background: var(--red); color: #fff; padding: 10px 16px; font-size: 0.8rem; letter-spacing: 0.1em; } .jugend-body { max-width: 540px; } .jugend-body p { font-size: 1.05rem; opacity: 0.8; margin: 24px 0; } .jugend-list { list-style: none; padding: 0; margin: 0 0 32px; } .jugend-list li { padding: 14px 0; border-bottom: 1px solid var(--line-soft); display: flex; gap: 14px; align-items: baseline; } .jugend-list .mono { color: var(--red); flex-shrink: 0; } /* ---- mitmachen ---- */ .mitmachen { background: var(--ink); color: #fff; position: relative; overflow: hidden; } .mitmachen::before { content: ""; position: absolute; top: -50%; right: -10%; width: 80%; height: 200%; background: radial-gradient(ellipse at center, rgba(205,23,25,.18), transparent 60%); pointer-events: none; } .mit-inner { max-width: 1440px; margin: 0 auto; padding: 110px 32px 120px; position: relative; } .mit-top { color: var(--red); display: flex; align-items: center; margin-bottom: 28px; font-size: 0.82rem; } .mit-head { font-family: var(--font-head); font-size: clamp(48px, 6.2vw, 104px); line-height: 0.96; letter-spacing: -0.02em; margin: 0 0 70px; max-width: 14ch; text-wrap: balance; } .mit-dim { opacity: 0.38; } .mit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 60px; } .mit-card { border-top: 1px solid rgba(255,255,255,0.25); padding-top: 24px; } .mit-num { color: var(--red); font-size: 1rem; margin-bottom: 16px; } .mit-card h3 { font-family: var(--font-head); font-size: 1.4rem; margin: 0 0 14px; line-height: 1.1; } .mit-card p { opacity: 0.7; margin: 0; font-size: 0.95rem; } .mit-cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } /* ---- Formular-Framework (EXT:form) ---- */ /* Bootstrap 5 kennt .form-group nicht mehr, deshalb stehen die Felder des Formulars ohne jeden Abstand untereinander. Hier nur die Lücke vor der Knopfleiste – die Felder darüber bleiben vorerst unverändert. */ form .form-group + .actions { margin-top: 28px; } /* ---- Skyline über der Fußzeile ---- */ /* Die PNG dienen nur als Maske, gefüllt wird mit --footer-bg. Dadurch nimmt die Skyline automatisch die Farbe der jeweiligen Fußzeile an – im Jugendbereich also #092e6e, ohne zweite Bilddatei je Variante. Welche der beiden Skylines erscheint, entscheidet sich bei jedem Seitenaufruf neu (lib.footerSkyline in der setup.typoscript). Die Klasse wählt nur noch die Bilddatei aus. Aufbau: Die Stadt steht in Inhaltsbreite, die Grundlinie läuft aber bis zum Fensterrand durch – sonst entstünde dort eine Stufe zur Fußzeile. Die Verlängerung liegt deshalb als ::before/::after NEBEN der Stadt und nicht dahinter: Wellen und die Beine des Ausrufers sind Aussparungen im Sockel und würden von einer Fläche dahinter wieder zugefüllt. */ .foot-skyline-wrap { display: none; } @supports ((-webkit-mask-image: url("../Images/skyline-telgte.png")) or (mask-image: url("../Images/skyline-telgte.png"))) { .foot-skyline-wrap { display: block; position: relative; height: 240px; margin-top: 20px; /* Höhe des dunklen Sockels am linken und rechten Bildrand der jeweiligen Maske. Die beiden Grafiken unterscheiden sich darin: Westbevern hat an den Rändern erhöhtes Gelände (73 von 480 Bildpunkten), Telgte einen glatten Sockel (60). Stimmt der Wert nicht, entsteht am Übergang zur seitlichen Verlängerung genau die Stufe, die wir vermeiden wollen. */ --skyline-sockel: 12.5%; } .foot-skyline-wrap--westbevern { --skyline-sockel: 15.21%; } /* Grundlinie links und rechts neben der Stadt. Der Prozentwert entspricht dem Sockel in der Maske und wandert bei anderer Höhe mit. */ .foot-skyline-wrap::before, .foot-skyline-wrap::after { content: ""; position: absolute; bottom: 0; height: var(--skyline-sockel); width: max(32px, calc(50% - 688px)); background: var(--footer-bg); } .foot-skyline-wrap::before { left: 0; } .foot-skyline-wrap::after { right: 0; } .foot-skyline { /* Gleiche Breite wie Seiteninhalt und Fußzeilenspalten: max-width 1440px abzüglich 2×32px Innenabstand. */ width: calc(100% - 64px); max-width: 1376px; height: 100%; margin: 0 auto; background: var(--footer-bg); /* Nach Höhe skalieren statt nach Breite: Auf schmalen Schirmen wird die Maske seitlich beschnitten, statt zu Strichen zu schrumpfen. Deshalb braucht es auch keine eigene Mobilfassung. */ -webkit-mask-size: auto 100%; mask-size: auto 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: bottom center; mask-position: bottom center; } .foot-skyline--telgte { -webkit-mask-image: url("../Images/skyline-telgte.png"); mask-image: url("../Images/skyline-telgte.png"); } .foot-skyline--westbevern { -webkit-mask-image: url("../Images/skyline-westbevern.png"); mask-image: url("../Images/skyline-westbevern.png"); } /* Urhebervermerk der Grafiken. Sitzt im Sockel, also im dunklen Bereich, und ist rechts an der Inhaltsbreite ausgerichtet – auf einer Linie mit den Fußzeilenspalten darunter. */ .foot-skyline-credit { position: absolute; right: max(32px, calc(50% - 688px)); bottom: 0; height: var(--skyline-sockel); display: inline-flex; align-items: center; padding: 0 2px; color: var(--paper); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; } .foot-skyline-credit:hover, .foot-skyline-credit:focus-visible { text-decoration: underline; } /* Auf dem Telefon über die volle Bildschirmbreite und vollständig – dort ist zu wenig Platz, um sinnvoll einen Ausschnitt zu zeigen. Die Höhe ergibt sich aus dem Seitenverhältnis der Maske, sie wird also nicht beschnitten. Damit entfällt auch die seitliche Verlängerung der Grundlinie: Die Skyline reicht ohnehin bis zum Rand. */ @media (max-width: 720px) { .foot-skyline-wrap { height: auto; margin-top: 16px; } .foot-skyline-wrap::before, .foot-skyline-wrap::after { display: none; } .foot-skyline { width: 100%; max-width: none; height: auto; aspect-ratio: 2752 / 480; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* Der Sockel ist hier nur noch wenige Pixel hoch, der Vermerk passt nicht mehr hinein. Er rutscht deshalb als eigener dunkler Streifen darunter – optisch geht er in die Fußzeile über, die dieselbe Farbe hat. */ .foot-skyline-credit { position: static; display: block; height: auto; text-align: right; padding: 7px 20px 0; background: var(--footer-bg); font-size: 0.6rem; /* Die Skylinehöhe kommt aus dem Seitenverhältnis und ist fast immer krumm (bei 360px Bildschirmbreite etwa 62,791px). Die letzte Zeile der Maske fällt dann auf eine halbe Bildschirmzeile und wird halb durchsichtig gerechnet – das erscheint als heller Strich. Der Streifen schiebt sich deshalb 2px darüber; da beide dieselbe Farbe haben, ist die Überlappung unsichtbar. */ margin-top: -2px; } } } /* ---- footer ---- */ .footer { background: var(--footer-bg); color: var(--paper); } /* Bereich Jugendfeuerwehr (Seite 10 und darunter) – Klasse kommt aus dem bodyTagCObject, siehe Bedingung am Ende der setup.typoscript. */ .feuerwehr-site--jugend { --footer-bg: #092e6e; --footer-accent: #fd4f00; /* Jugendfeuerwehr-Orange */ } .foot-inner { max-width: 1440px; margin: 0 auto; /* Oben schmaler als früher: die Skyline bringt ihren eigenen Sockel mit und deckt den oberen Rand der Fußzeile bereits um 10–21px ab. */ padding: 26px 32px 40px; display: grid; grid-template-columns: 280px 1fr; gap: 60px; } .foot-brand { display: flex; align-items: center; gap: 14px; } .foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .foot-h { color: var(--footer-accent); margin-bottom: 14px; } .foot-notruf { font-family: var(--font-head); font-size: 3.2rem; line-height: 1; color: var(--footer-accent); margin: 4px 0 6px; } .foot-bottom { max-width: 1440px; margin: 0 auto; padding: 18px 32px 28px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; font-size: 0.72rem; } /* Grundtext/Metanav gedimmt – der CTA-Button bleibt voll deckend. (Opacity darf nicht auf den Container, sonst dimmt sie auch den Button.) */ .foot-bottom > span, .foot-bottom > a:not(.foot-cta) { opacity: 0.7; } .foot-bottom a:not(.foot-cta):hover { color: var(--red); opacity: 1; } /* Größe wie der Header-CTA „Fass mit an!" (.nav-item.cta) */ .foot-cta { padding: 10px 18px; font-size: 0.92rem; gap: 8px; line-height: 1; white-space: nowrap; /* nicht die uppercase-/mono-Optik vom .foot-bottom.mono-Container erben */ text-transform: none; letter-spacing: normal; } /* ---- pages ---- */ .page { min-height: 60vh; } .page-hero { background: var(--ink); color: #fff; padding: 90px 32px 80px; border-bottom: 4px solid var(--red); } .page-hero.about-hero { background: linear-gradient(120deg, rgba(205,23,25,.22), transparent 60%), var(--ink); } .page-hero-inner { max-width: 1440px; margin: 0 auto; } .page-title { font-family: var(--font-head); font-size: clamp(44px, 6vw, 96px); line-height: 0.96; letter-spacing: -0.02em; margin: 16px 0 26px; text-wrap: balance; } .page-title .dim { opacity: 0.4; } .page-meta { display: flex; gap: 12px; opacity: 0.8; font-size: 0.82rem; flex-wrap: wrap; } .page-meta b { color: var(--red); } .lede { font-size: 1.15rem; max-width: 65ch; opacity: 0.85; } .page-toolbar { max-width: 1440px; margin: 0 auto; padding: 24px 32px; display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; } .search { display: flex; align-items: center; gap: 10px; } .search input { border: none; border-bottom: 1px solid var(--ink); padding: 6px 2px; font-family: inherit; font-size: 0.95rem; background: transparent; min-width: 220px; outline: none; } .search input:focus { border-bottom-color: var(--red); } .page-body { padding: 40px 0 90px; } .eins-table.wide { max-width: 1440px; margin: 0 auto; padding: 0 32px; } /* ---- about ---- */ .about-section { max-width: 1440px; margin: 0 auto; padding: 70px 32px; border-bottom: 1px solid var(--line-soft); } .about-section:last-child { border-bottom: none; padding-bottom: 100px; } .about-section .section-title { margin-bottom: 40px; } .about-leader { background: var(--paper-2); margin-top: 0; } .timeline { display: flex; flex-direction: column; gap: 0; } .tl-row { display: grid; grid-template-columns: 100px 60px 1fr; gap: 20px; padding: 22px 0; align-items: center; border-top: 1px solid var(--line-soft); } .tl-row:last-child { border-bottom: 1px solid var(--line-soft); } .tl-year { font-size: 1.05rem; color: var(--red); font-weight: 600; } .tl-line { height: 1px; background: var(--ink); opacity: 0.2; } .tl-txt { font-size: 1.05rem; } .veh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .veh-card { background: #fff; } .veh-img { aspect-ratio: 5/3; background: repeating-linear-gradient(135deg, #eee 0 12px, #e4e4e4 12px 24px); display: flex; align-items: center; justify-content: center; } .veh-placeholder { font-size: 0.72rem; padding: 6px 12px; background: rgba(255,255,255,0.8); border: 1px solid var(--line-soft); } .veh-k { padding: 16px 18px 4px; color: var(--red); font-size: 0.85rem; } .veh-n { padding: 0 18px 6px; font-weight: 600; } .veh-z { padding: 0 18px 18px; font-size: 0.75rem; } .leaders { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } /* Bei weniger als 4 Personen die Spalten an die Personenzahl anpassen, Kartenbreite deckeln und die Gruppe im (grauen) Band zentrieren – sonst wirkt die Sektion mit einer einzelnen Person zu leer/„zu groß“. (Zwei Klassen für höhere Spezifität als die Tablet-Media-Query.) */ .leaders.leaders--compact { grid-template-columns: repeat(var(--leader-cols, 1), minmax(0, 300px)); justify-content: center; } .leader { text-align: left; } .leader-av { aspect-ratio: 4/5; background: repeating-linear-gradient(135deg, #e6e2db 0 10px, #ddd8d1 10px 20px); display: flex; align-items: center; justify-content: center; color: rgba(0,0,0,0.4); font-size: 0.7rem; margin-bottom: 14px; } .leader-r { color: var(--red); font-size: 0.72rem; margin-bottom: 4px; } .leader-n { font-weight: 600; } /* ---- responsive ---- */ @media (max-width: 980px) { .nav { display: none; } .menu-btn { display: flex; margin-left: auto; } .mob-nav { display: flex; flex-direction: column; padding: 20px 32px; gap: 4px; border-top: 1px solid var(--line-soft); } .mob-nav-li { position: relative; display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--line-soft); } .mob-nav-li > a { flex: 1; padding: 12px 0; font-size: 1rem; font-weight: 500; } .mob-nav-li--l2 > a { padding-left: 18px; font-size: 0.94rem; font-weight: 400; } .mob-nav-li--l3 > a { padding-left: 36px; font-size: 0.88rem; font-weight: 400; opacity: 0.85; } .mob-sub-toggle { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; line-height: 1; background: transparent; color: var(--ink); border: 1px solid var(--line-soft); border-radius: 2px; cursor: pointer; transition: background .12s; } .mob-sub-toggle:hover { background: var(--line-soft); } .mob-sub-toggle[aria-expanded="true"] { background: var(--ink); color: var(--paper); } .mob-sub { flex: 0 0 100%; display: flex; flex-direction: column; } .mob-sub[hidden] { display: none; } .hero-grid { grid-template-columns: 1fr; padding: 60px 24px 90px; gap: 40px; } .hero--compact { min-height: 200px; } .hero--compact .hero-grid { padding: 32px 24px; gap: 0; } .hero-right { max-width: 480px; } .stats-inner { grid-template-columns: repeat(2, 1fr); } .news-grid { grid-template-columns: 1fr; } .news-listing { padding: 0 24px; } .news-cards { grid-template-columns: 1fr; gap: 32px; } .article-detail { padding: 0 24px; } .article-foot { flex-direction: column; align-items: stretch; } .article-pager { margin-left: 0; justify-content: space-between; } .jugend-grid { grid-template-columns: 1fr; gap: 40px; padding: 60px 24px; } .mit-grid { grid-template-columns: 1fr; gap: 24px; } .foot-inner { grid-template-columns: 1fr; } .foot-cols { grid-template-columns: 1fr; gap: 24px; } .eins-row { grid-template-columns: 50px 70px 100px 1fr; font-size: 0.85rem; } .eins-row > .eins-lo, .eins-row > .eins-zg { display: none; } .veh-grid { grid-template-columns: 1fr 1fr; } .leaders { grid-template-columns: 1fr 1fr; } .topstrip-inner { padding: 10px 16px; font-size: 0.7rem; flex-wrap: wrap; } .hdr-inner { padding: 14px 20px; } .brand-city { font-size: 1.3rem; } } /* ============ Einsätze: Jahresabschnitte & -archiv ============ */ .eins-section-head { max-width: 1440px; margin: 0 auto 8px; padding: 32px 32px 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .eins-section-title { font-family: var(--font-head, 'Oswald', sans-serif); font-size: 1.9rem; text-transform: uppercase; letter-spacing: 0.01em; margin: 0; line-height: 1.1; } .eins-section-count { font-size: 0.75rem; } .eins-back { align-self: center; flex-shrink: 0; } /* Monatsgruppen im Archiv */ .eins-month { margin-top: 20px; } .eins-month + .eins-month { margin-top: 34px; } .eins-month-head { max-width: 1440px; margin: 0 auto; padding: 0 32px 6px; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); border-bottom: 2px solid var(--line-soft); padding-bottom: 10px; } /* Jahres-Zusammenfassung / -Navigation */ .eins-years { max-width: 1440px; margin: 56px auto 0; padding: 40px 32px 8px; border-top: 1px solid var(--line-soft); } .eins-years-head { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; margin-bottom: 22px; } .eins-years-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .eins-year-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: 3px; text-decoration: none; color: inherit; transition: border-color .15s, background .15s, transform .15s; } a.eins-year-card:hover { border-color: var(--red); background: rgba(205,23,25,0.05); transform: translateY(-2px); } .eins-year-card.is-active { border-color: var(--red); background: var(--red); color: #fff; } .eins-year-card.is-static { cursor: default; opacity: 0.75; } .eins-year-nr { font-size: 1.5rem; font-weight: 600; line-height: 1; } .eins-year-count { font-size: 0.78rem; opacity: 0.75; } @media (max-width: 720px) { .eins-section-head { padding: 24px 24px 0; } .eins-section-title { font-size: 1.5rem; } .eins-month-head, .eins-years { padding-left: 24px; padding-right: 24px; } .eins-years-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .eins-year-nr { font-size: 1.25rem; } }