/* ============================================================ FF EBERSTALZELL · STATIONSBUCH · v3.7 · 2026-05 Flat CSS (no @layer) — Jimdo-Creator-compatible v3.4: Datetime !important overrides (Jimdo blue-box fix) v3.5: Link-color enforcement (override Jimdo a:link orange) v3.6: Submenu vertical, blog spacing, sidebar gaps v3.7: Target ACTUAL Jimdo classes (.mainNav1, .level_1, .mainNav2) Compact blog rows, .datetime-inner +

tag fixes ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200;12..96,300;12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=JetBrains+Mono:wght@400;500;700&display=swap'); /* ---------- RESET ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100vh; line-height: 1.5; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: 0; background: none; color: inherit; } /* ---------- TOKENS ---------- */ :root { --fire: oklch(0.555 0.215 27); --fire-deep: oklch(0.42 0.19 27); --fire-soft: oklch(0.62 0.20 25); --ember: oklch(0.72 0.16 50); --amber: oklch(0.84 0.155 82); --ink: oklch(0.16 0.012 35); --graphite: oklch(0.28 0.012 35); --steel: oklch(0.48 0.012 35); --smoke: oklch(0.62 0.010 35); --ash: oklch(0.76 0.008 60); --hairline: oklch(0.88 0.010 60); --white: oklch(1 0 0); --cream: oklch(0.972 0.012 75); --cream-deep: oklch(0.94 0.012 70); --paper: oklch(0.985 0.008 75); --on-fire: oklch(1 0 0); --on-ink: oklch(1 0 0); --font: 'Bricolage Grotesque', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px; --maxw: 1360px; --gutter: clamp(20px, 4vw, 48px); --el-card: 0 1px 0 oklch(0.88 0.010 60), 0 12px 32px oklch(0.16 0.012 35 / 0.04); --el-card-hover: 0 1px 0 oklch(0.555 0.215 27), 0 24px 48px oklch(0.16 0.012 35 / 0.08); --el-fire: 0 12px 36px oklch(0.555 0.215 27 / 0.28); --ease: cubic-bezier(.2, .8, .2, 1); } /* ---------- BASE ---------- */ body { background: transparent; color: oklch(0.16 0.012 35); font-family: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif; font-size: 17px; font-weight: 400; line-height: 1.55; font-feature-settings: "ss01", "cv01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Fallback-Hintergrund auf falls Jimdo nichts liefert */ html { background: var(--white); } ::selection { background: var(--fire); color: var(--white); } :focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; } h1, h2, h3, h4, h5, h6 { font-family: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif; font-weight: 700; line-height: 1.05; letter-spacing: -0.012em; color: var(--ink); } h1 { font-weight: 800; font-size: clamp(2.25rem, 5vw, 3.5rem); letter-spacing: -0.02em; } h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); } h3 { font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.5rem); } h4 { font-weight: 600; font-size: 1.125rem; letter-spacing: 0; } p { margin: 0 0 1em; max-width: 64ch; } p:last-child { margin-bottom: 0; } strong, b { font-weight: 700; color: var(--ink); } em, i { font-style: italic; } hr { border: 0; height: 1px; background: var(--hairline); margin: var(--s-7) 0; } /* ---------- COMPONENTS ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); } .eyebrow--fire { color: var(--fire); } .eyebrow--cream { color: oklch(0.972 0.012 75 / .76); } .eyebrow::before { content: ''; width: 24px; height: 1px; background: currentColor; opacity: .55; } .chapter-num { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; color: var(--fire); } .btn { display: inline-flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-6); font-family: var(--font); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 0; transition: all .25s var(--ease); line-height: 1; white-space: nowrap; border: 1px solid transparent; text-decoration: none; } .btn--fire { background: var(--fire); color: var(--white); box-shadow: var(--el-fire); } .btn--fire:hover { background: var(--fire-deep); transform: translateY(-1px); box-shadow: 0 16px 40px oklch(0.555 0.215 27 / .42); } .btn--ghost { background: transparent; color: var(--white); border-color: oklch(1 0 0 / .35); } .btn--ghost:hover { border-color: var(--white); background: oklch(1 0 0 / .08); } .btn__arrow { display: inline-block; transition: transform .25s var(--ease); } .btn:hover .btn__arrow { transform: translateX(4px); } .link-arrow { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font); font-weight: 600; font-size: 0.92rem; color: var(--fire); letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: all .2s var(--ease); text-decoration: none; } .link-arrow:hover { color: var(--fire-deep); border-bottom-color: var(--fire-deep); gap: var(--s-3); } .link-arrow--amber { color: var(--amber); border-color: oklch(0.84 0.155 82 / .35); } .link-arrow--amber:hover { color: var(--amber); border-bottom-color: var(--amber); } /* ============================================================ LAYOUT · Container, Header, Hero, Sections, Footer ============================================================ */ #container { width: 100%; overflow-x: hidden; } /* === EMERGENCY STRIP === */ #emergency-strip { background: var(--ink); color: oklch(0.972 0.012 75 / .82); border-bottom: 2px solid var(--fire); font-family: var(--mono); font-size: 0.78rem; font-weight: 400; letter-spacing: 0.06em; } .strip-inner { max-width: var(--maxw); margin: 0 auto; padding: 10px var(--gutter); display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; min-height: 44px; } .strip-numbers { display: flex; gap: 0; flex-wrap: wrap; align-items: center; } .strip-numbers > span { display: inline-flex; align-items: baseline; gap: var(--s-2); padding: 6px 14px; border-right: 1px solid oklch(0.972 0.012 75 / .14); } .strip-numbers > span:last-child { border-right: 0; } .strip-numbers strong { color: var(--amber); font-weight: 700; letter-spacing: 0.02em; } .strip-contact a { color: oklch(0.972 0.012 75 / .92); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; } .strip-contact a:hover { color: var(--amber); } /* ##################################################### */ /* ##### Header ##### */ /* ##################################################### */ #header { position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), background .3s var(--ease); } #header.is-scrolled { border-bottom-color: var(--hairline); background: oklch(1 0 0 / .96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .header-inner { max-width: var(--maxw); margin: 0 auto; padding: var(--s-4) var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); } .brand { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; } .brand-logo { display: block; height: 60px; width: auto; max-width: 320px; transition: opacity .2s var(--ease); } .brand:hover .brand-logo { opacity: 0.85; } /* ##################################################### */ /* ##### Navigation ##### */ /* ##################################################### */ #navigation { display: flex; align-items: center; } #navigation a { color: var(--ink); text-decoration: none; } #navigation a:hover { color: var(--fire); } #navigation ul { list-style: none; margin: 0; padding: 0; } #navigation li { list-style: none; margin: 0; padding: 0; } /* TOP-LEVEL UL — horizontal flex row */ #navigation .mainNav1, #navigation > ul, #navigation > div > ul, #navigation .cc-nav-level-0, #navigation .j-nav-level-0, #navigation .jmd-nav__list--0 { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0 !important; padding: 0 !important; } /* TOP-LEVEL LI */ #navigation .mainNav1 > li, #navigation > ul > li, #navigation .cc-nav-level-0 > li, #navigation .j-nav-level-0 > li, #navigation .jmd-nav__list-item-0 { position: relative; list-style: none; margin: 0; padding: 0; } /* TOP-LEVEL LINK */ #navigation .mainNav1 > li > a, #navigation .mainNav1 a.level_1, #navigation > ul > li > a, #navigation .cc-nav-level-0 > li > a, #navigation .j-nav-level-0 > li > a { display: block; padding: 14px 14px; font-family: var(--font); font-size: 0.84rem; font-weight: 600; color: var(--ink); letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 2px solid transparent; transition: all .2s var(--ease); text-decoration: none; white-space: nowrap; } /* Span inside link (Jimdo wraps text) */ #navigation .mainNav1 a span, #navigation .mainNav1 a.level_1 span, #navigation a.level_1 span { color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; } /* HOVER + CURRENT */ #navigation .mainNav1 > li > a:hover, #navigation .mainNav1 a.level_1:hover, #navigation .mainNav1 a.current, #navigation .mainNav1 a.level_1.current, #navigation > ul > li > a:hover, #navigation .cc-nav-level-0 > li > a:hover, #navigation .j-nav-level-0 > li > a:hover, #navigation .jmd-nav__link--current, #navigation .cc-nav-current, #navigation .j-nav-current, #navigation a.current { color: var(--fire); border-bottom-color: var(--fire); text-decoration: none; } /* DROPDOWN ARROW (only when item has submenu) */ #navigation .j-nav-has-children > a::after, #navigation .mainNav1 li.has-submenu > a::after, #navigation .mainNav1 li:has(> ul) > a::after { content: ' '; display: inline-block; width: 0; height: 0; margin-left: 6px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid currentColor; vertical-align: middle; opacity: .55; } /* SUBMENU UL — vertical, hidden by default, dropdown on hover */ #navigation .mainNav1 .mainNav2, #navigation .mainNav1 li ul, #navigation .mainNav1 > li > ul, #navigation .cc-nav-level-1, #navigation .j-nav-level-1, #navigation .jmd-nav__list--1 { display: block !important; flex-direction: column !important; position: absolute !important; top: 100% !important; left: 0 !important; min-width: 260px !important; background: var(--white) !important; border: 1px solid var(--hairline); box-shadow: var(--el-card); padding: var(--s-2) 0 !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(-12px); transition: opacity .42s cubic-bezier(.22, .9, .28, 1) .04s, visibility .42s cubic-bezier(.22, .9, .28, 1) .04s, transform .42s cubic-bezier(.22, .9, .28, 1) .04s, box-shadow .42s cubic-bezier(.22, .9, .28, 1) .04s; list-style: none !important; margin: 0 !important; gap: 0 !important; z-index: 200; } /* SHOW SUBMENU on hover of parent LI */ #navigation .mainNav1 > li:hover > .mainNav2, #navigation .mainNav1 > li:hover > ul, #navigation .mainNav1 li:hover > ul, #navigation .cc-nav-level-0 > li:hover > .cc-nav-level-1, #navigation .cc-nav-level-0 > li:hover > ul, #navigation .j-nav-level-0 > li:hover > .j-nav-level-1, #navigation .j-nav-level-0 > li:hover > ul, #navigation .jmd-nav__list-item-0:hover .cc-nav-level-1, #navigation .jmd-nav__list-item-0:hover .j-nav-level-1, #navigation .jmd-nav__list-item-0:hover .jmd-nav__list--1, #navigation > ul > li:hover > ul, /* JS-driven open state — bypass any Jimdo CSS conflicts */ #navigation li[data-submenu-open] > ul, #navigation li[data-submenu-open] > .mainNav2, #navigation li[data-submenu-open] > .cc-nav-level-1, #navigation li[data-submenu-open] > .j-nav-level-1 { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; display: block !important; pointer-events: auto !important; } /* SUBMENU LI */ #navigation .mainNav2 > li, #navigation .mainNav1 li ul li, #navigation .cc-nav-level-1 li, #navigation .j-nav-level-1 li, #navigation .jmd-nav__list-item-1 { display: block !important; width: 100% !important; list-style: none !important; position: relative; margin: 0; padding: 0; } /* SUBMENU LINK */ #navigation .mainNav2 a, #navigation .mainNav2 a.level_2, #navigation .mainNav1 li ul a, #navigation .cc-nav-level-1 a, #navigation .j-nav-level-1 a { display: block; padding: 12px 20px; font-family: var(--font); font-size: 0.92rem; font-weight: 500; color: var(--ink); letter-spacing: 0; text-transform: none; border-left: 2px solid transparent; border-bottom: 0; text-decoration: none; white-space: nowrap; opacity: 0; transform: translateX(-8px); transition: opacity .35s cubic-bezier(.22, .9, .28, 1), transform .35s cubic-bezier(.22, .9, .28, 1), background-color .2s var(--ease), color .2s var(--ease), border-left-color .2s var(--ease); } /* Stagger sub-items: each appears slightly later */ #navigation .mainNav1 > li:hover > ul > li:nth-child(1) > a, #navigation .mainNav1 > li:hover > .mainNav2 > li:nth-child(1) > a, #navigation li[data-submenu-open] > ul > li:nth-child(1) > a { transition-delay: .10s, .10s, 0s, 0s, 0s; } #navigation .mainNav1 > li:hover > ul > li:nth-child(2) > a, #navigation .mainNav1 > li:hover > .mainNav2 > li:nth-child(2) > a, #navigation li[data-submenu-open] > ul > li:nth-child(2) > a { transition-delay: .14s, .14s, 0s, 0s, 0s; } #navigation .mainNav1 > li:hover > ul > li:nth-child(3) > a, #navigation .mainNav1 > li:hover > .mainNav2 > li:nth-child(3) > a, #navigation li[data-submenu-open] > ul > li:nth-child(3) > a { transition-delay: .18s, .18s, 0s, 0s, 0s; } #navigation .mainNav1 > li:hover > ul > li:nth-child(4) > a, #navigation .mainNav1 > li:hover > .mainNav2 > li:nth-child(4) > a, #navigation li[data-submenu-open] > ul > li:nth-child(4) > a { transition-delay: .22s, .22s, 0s, 0s, 0s; } #navigation .mainNav1 > li:hover > ul > li:nth-child(5) > a, #navigation .mainNav1 > li:hover > .mainNav2 > li:nth-child(5) > a, #navigation li[data-submenu-open] > ul > li:nth-child(5) > a { transition-delay: .26s, .26s, 0s, 0s, 0s; } #navigation .mainNav1 > li:hover > ul > li:nth-child(n+6) > a, #navigation .mainNav1 > li:hover > .mainNav2 > li:nth-child(n+6) > a, #navigation li[data-submenu-open] > ul > li:nth-child(n+6) > a { transition-delay: .30s, .30s, 0s, 0s, 0s; } /* Sichtbarkeit der Sub-Items wenn das Submenü offen ist */ #navigation .mainNav1 > li:hover > ul > li > a, #navigation .mainNav1 > li:hover > .mainNav2 > li > a, #navigation li[data-submenu-open] > ul > li > a { opacity: 1; transform: translateX(0); } #navigation .mainNav2 a span, #navigation .mainNav2 a.level_2 span { color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; } #navigation .mainNav2 a:hover, #navigation .mainNav2 a.level_2:hover, #navigation .mainNav1 li ul a:hover, #navigation .cc-nav-level-1 a:hover, #navigation .j-nav-level-1 a:hover { background: var(--paper); color: var(--fire); border-left-color: var(--fire); } #navigation .jmd-nav__toggle-button { display: none; } /* Mobile toggle button */ .nav-toggle { display: none; padding: 12px; } .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; position: relative; width: 26px; height: 2px; background: var(--ink); transition: transform .25s var(--ease); } .nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; position: absolute; left: 0; } .nav-toggle-bars::before { top: -8px; } .nav-toggle-bars::after { top: 8px; } body.nav-open .nav-toggle-bars { background: transparent; } body.nav-open .nav-toggle-bars::before { transform: rotate(45deg) translate(6px, 6px); } body.nav-open .nav-toggle-bars::after { transform: rotate(-45deg) translate(6px, -6px); } /* === HERO · Split === */ #hero { background: transparent; color: var(--white); overflow: hidden; isolation: isolate; position: relative; } /* Bg-Layer: satter Fire-Gradient, dezent (~5%) durchlässig für Bg-Bilder */ .hero-bg-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(135deg, var(--fire) 0%, oklch(0.555 0.215 27 / 0.98) 45%, oklch(0.42 0.19 27 / 0.94) 100%); } /* Subtle fire-glow Animation hinter Hero-Text */ #hero::before { content: ''; position: absolute; top: -20%; left: -10%; width: 60%; height: 140%; background: radial-gradient(ellipse at center, oklch(0.72 0.16 50 / 0.32) 0%, transparent 60%); pointer-events: none; z-index: 0; animation: heroGlow 14s ease-in-out infinite alternate; } @keyframes heroGlow { 0% { transform: translate(0, 0) scale(1); opacity: .8; } 50% { transform: translate(8%, 4%) scale(1.08); opacity: 1; } 100% { transform: translate(-4%, -3%) scale(1.04); opacity: .9; } } .hero-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; min-height: 360px; position: relative; z-index: 2; } .hero-text { position: relative; padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 48px) clamp(36px, 5vw, 56px) var(--gutter); display: flex; flex-direction: column; justify-content: center; z-index: 1; } .hero-text::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 0% 0%, oklch(0.62 0.20 25 / 0.42) 0%, transparent 55%), radial-gradient(ellipse 80% 60% at 100% 100%, oklch(0.42 0.19 27 / 0.55) 0%, transparent 60%); pointer-events: none; z-index: -1; } .hero-title { font-family: var(--font); font-size: clamp(1.875rem, 4vw, 3.25rem); font-weight: 800; line-height: 1; letter-spacing: -0.022em; color: var(--white); max-width: 16ch; margin: 0 0 var(--s-4); } .hero-title em { font-style: italic; font-weight: 700; color: var(--amber); } .hero-lead { font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; color: oklch(1 0 0 / .92); max-width: 50ch; margin: 0 0 var(--s-6); } .hero-cta { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; } .hero-photo { position: relative; overflow: hidden; background: var(--ink); min-height: 240px; } .hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04) saturate(0.95); } .hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, oklch(0.555 0.215 27 / 0.22) 0%, transparent 18%); pointer-events: none; } .hero-photo-tag { position: absolute; bottom: 0; left: 0; background: var(--white); color: var(--ink); padding: 10px 16px; font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; border-top: 3px solid var(--fire); z-index: 2; } /* === STATS STRIP · BLACK === */ #stats-strip { background: linear-gradient(180deg, oklch(0.16 0.012 35 / 0.92) 0%, oklch(0.16 0.012 35 / 0.96) 100%); color: var(--cream); border-bottom: 1px solid oklch(0.972 0.012 75 / .08); position: relative; isolation: isolate; } /* Akzent-Streifen — fire diagonal als visueller Anker */ #stats-strip::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--fire) 30%, var(--fire) 70%, transparent); z-index: 1; } .stats-grid { max-width: var(--maxw); margin: 0 auto; padding: var(--s-7) var(--gutter) var(--s-6); display: grid; grid-template-columns: 1fr; gap: var(--s-5); } .stats-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-5); padding-bottom: var(--s-5); border-bottom: 1px solid oklch(0.972 0.012 75 / .14); } .stats-head h2 { color: var(--cream); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; margin: 0; } .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .stat-cell { padding: var(--s-5) var(--s-5) var(--s-5) 0; border-right: 1px solid oklch(0.972 0.012 75 / .14); display: flex; flex-direction: column; gap: var(--s-1); } .stat-cell:last-child { border-right: 0; } .stat-cell:not(:first-child) { padding-left: var(--s-5); } .stat-num { font-family: var(--font); font-size: clamp(2.25rem, 4.2vw, 4rem); font-weight: 200; line-height: 0.9; color: var(--white); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .stat-num small { font-size: 0.4em; color: var(--fire); margin-left: 4px; font-weight: 700; vertical-align: super; } .stat-label { font-family: var(--mono); font-size: 0.74rem; font-weight: 500; color: oklch(0.972 0.012 75 / .65); letter-spacing: 0.12em; text-transform: uppercase; margin-top: var(--s-3); } /* ##################################################### */ /* ##### Inhalt ##### */ /* ##################################################### */ #content { color: var(--ink); } #content a { color: var(--fire); } #content a:hover { color: var(--fire-deep); } /* Text-Module füllen die volle Spaltenbreite — kein 64ch-Limit das visuell schmäler aussieht als die Bilder daneben. */ #content p, #content .j-text p, #content .j-text, #content .j-text > div, #content .j-text > div > p { max-width: none !important; } #content h1, #content h2, #content h3, #content h4 { max-width: none !important; } #main { background: transparent; padding: clamp(var(--s-8), 10vw, var(--s-10)) 0; position: relative; isolation: isolate; } .main-bg-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, oklch(0.985 0.008 75 / 0.78) 0%, oklch(1 0 0 / 0.7) 50%, oklch(0.985 0.008 75 / 0.78) 100%), url('https://image.jimcdn.com/app/cms/image/transf/none/path/scf38d3909f51d89c/backgroundarea/i544247813571638d/version/1676148124/image.jpg') center/cover no-repeat; backdrop-filter: saturate(110%); -webkit-backdrop-filter: saturate(110%); } @media (min-width: 800px) { .main-bg-layer { background-attachment: scroll, fixed; } } #main::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, oklch(0.16 0.012 35 / 0.08) 20%, oklch(0.16 0.012 35 / 0.08) 80%, transparent); pointer-events: none; z-index: 1; } .main-grid { position: relative; z-index: 1; } .main-grid { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(var(--s-7), 6vw, var(--s-9)); align-items: flex-start; } #content { min-width: 0; } .section-head { margin-bottom: var(--s-7); padding-bottom: var(--s-4); border-bottom: 1px solid var(--hairline); } .section-head__line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-5); flex-wrap: wrap; } .section-head h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.02em; margin: var(--s-3) 0 0; color: var(--ink); } /* === MISSION STRIP === */ #mission { background: transparent; color: var(--cream); position: relative; overflow: hidden; isolation: isolate; } .mission-bg-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(160deg, oklch(0.16 0.012 35 / 0.92) 0%, oklch(0.16 0.012 35 / 0.86) 50%, oklch(0.28 0.012 35 / 0.78) 100%); } #mission::before { content: ''; position: absolute; top: -180px; right: -180px; width: 520px; height: 520px; background: radial-gradient(circle, oklch(0.555 0.215 27 / .25) 0%, transparent 70%); pointer-events: none; z-index: 1; animation: missionPulse 11s ease-in-out infinite alternate; } @keyframes missionPulse { 0% { transform: translate(0, 0) scale(1); opacity: 0.7; } 100% { transform: translate(-40px, 60px) scale(1.15); opacity: 1; } } .mission-grid { max-width: var(--maxw); margin: 0 auto; padding: clamp(var(--s-9), 12vw, var(--s-11)) var(--gutter); display: grid; grid-template-columns: 5fr 7fr; gap: clamp(var(--s-7), 6vw, var(--s-9)); align-items: start; position: relative; z-index: 2; } .mission-head h2 { color: var(--cream); font-size: clamp(2.25rem, 4.5vw, 3.75rem); font-weight: 800; line-height: 0.96; letter-spacing: -0.02em; margin: var(--s-4) 0 var(--s-5); } .mission-head h2 em { font-style: italic; color: var(--amber); } .mission-head p { color: oklch(0.972 0.012 75 / .82); font-size: 1.05rem; line-height: 1.65; margin-bottom: var(--s-6); } .pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: oklch(0.972 0.012 75 / .14); } .pillar { background: var(--ink); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); } .pillar-num { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; color: var(--fire-soft); } .pillar h3 { color: var(--cream); font-size: 1.5rem; font-weight: 700; margin: 0; } .pillar p { color: oklch(0.972 0.012 75 / .68); font-size: 0.94rem; line-height: 1.6; margin: 0; } /* === FLEET === */ #fleet { background: transparent; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: clamp(var(--s-9), 11vw, var(--s-10)) 0; position: relative; isolation: isolate; } .fleet-bg-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, oklch(0.94 0.012 70 / 0.86) 0%, oklch(0.972 0.012 75 / 0.78) 50%, oklch(0.94 0.012 70 / 0.86) 100%); } .fleet-head, .fleet-grid { position: relative; z-index: 1; } .fleet-head { max-width: var(--maxw); margin: 0 auto var(--s-8); padding: 0 var(--gutter); display: grid; grid-template-columns: 5fr 4fr; gap: clamp(var(--s-6), 4vw, var(--s-8)); align-items: end; } .fleet-head h2 { font-size: clamp(2rem, 4vw, 3rem); margin: var(--s-3) 0 0; color: var(--ink); } .fleet-head__intro p { color: var(--steel); margin-bottom: 16px; } .fleet-grid { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); } .fleet-card { background: var(--paper); border: 1px solid var(--hairline); display: flex; flex-direction: column; transition: all .3s var(--ease); color: var(--ink); position: relative; } .fleet-card:hover { border-color: var(--fire); transform: translateY(-2px); box-shadow: var(--el-card-hover); } .fleet-card__photo { aspect-ratio: 4/3; position: relative; overflow: hidden; background: var(--ink); display: block; text-decoration: none; } .fleet-card__photo--kdo { background: linear-gradient(135deg, var(--fire), var(--fire-deep)); } .fleet-card__photo--tlf { background: linear-gradient(135deg, var(--fire), var(--graphite)); } .fleet-card__photo--lfa { background: linear-gradient(135deg, var(--graphite), var(--ink)); } .fleet-card__photo--mtf { background: linear-gradient(135deg, var(--fire-deep), var(--graphite)); } .fleet-card__photo img, .fleet-card__photo-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); } .fleet-card:hover .fleet-card__photo img, .fleet-card:hover .fleet-card__photo-img { transform: scale(1.04); } .fleet-card__call { position: absolute; top: 0; left: 0; background: var(--fire); color: var(--cream); padding: 8px 14px; font-family: var(--mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.12em; } .fleet-card__body { padding: var(--s-5) var(--s-5) var(--s-6); } .fleet-card__name { font-size: 1.25rem; font-weight: 700; margin: 0 0 var(--s-2); color: var(--ink); } .fleet-card__name a { color: inherit; text-decoration: none; } .fleet-card__name a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 50%; z-index: 1; } .fleet-card:hover .fleet-card__name { color: var(--fire); } .fleet-card__photo { z-index: 2; } .fleet-card__meta { font-family: var(--mono); font-size: 0.74rem; color: var(--steel); letter-spacing: 0.04em; margin-bottom: var(--s-3); } .fleet-card__desc { font-size: 0.92rem; line-height: 1.55; color: var(--graphite); margin: 0; } /* ##################################################### */ /* ##### Footer ##### */ /* ##################################################### */ #footer a { color: oklch(0.972 0.012 75 / .82); text-decoration: none; } #footer a:hover { color: var(--cream); } #footer { background: var(--ink); color: oklch(0.972 0.012 75 / .72); padding: clamp(var(--s-9), 10vw, var(--s-10)) 0 var(--s-6); font-size: 0.92rem; line-height: 1.7; border-top: 4px solid var(--fire); } .footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .footer-grid { display: grid; grid-template-columns: 5fr 3fr 3fr 3fr; gap: clamp(var(--s-6), 5vw, var(--s-8)); margin-bottom: var(--s-8); } .footer-brand { display: flex; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-5); } .footer-brand-stack { display: flex; flex-direction: column; gap: 2px; line-height: 0.92; padding-left: var(--s-4); border-left: 3px solid var(--fire); } .footer-brand-stack span, .footer-brand-stack strong { display: block; font-family: var(--font); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .footer-brand-stack span { font-size: 1.25rem; color: oklch(0.972 0.012 75 / .65); } .footer-brand-stack strong { font-size: 1.875rem; font-weight: 800; color: var(--fire); letter-spacing: 0.02em; } .footer-brand-stack span:last-child { color: var(--cream); font-weight: 800; font-size: 1.75rem; } .footer-address { color: oklch(0.972 0.012 75 / .82); } #footer h5, .footer-inner h5 { font-family: var(--mono); font-size: 0.74rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: oklch(0.972 0.012 75 / .55); margin-bottom: var(--s-4); } #footer ul, .footer-inner ul { display: flex; flex-direction: column; gap: var(--s-2); list-style: none; margin: 0; padding: 0; } #footer ul a, .footer-inner ul a { color: oklch(0.972 0.012 75 / .82); font-size: 0.92rem; text-decoration: none; } #footer ul a:hover, .footer-inner ul a:hover { color: var(--cream); } .footer-coord { font-family: var(--mono); font-size: 0.78rem; color: oklch(0.972 0.012 75 / .55); line-height: 1.7; margin-top: var(--s-4); } .footer-coord strong { color: var(--cream); font-weight: 500; } .footer-bottom { padding-top: var(--s-5); border-top: 1px solid oklch(0.972 0.012 75 / .12); display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; color: oklch(0.972 0.012 75 / .55); } .footer-legal { display: flex; gap: var(--s-6); flex-wrap: wrap; } /* ============================================================ JIMDO CONTENT MODULES — Style Jimdo's auto-generated output ============================================================ */ /* === BLOG MODULE — Ultra-compact rows (v4.0) === */ /* Kill ALL Jimdo wrapper margins, paddings, gaps around blog articles */ #content [id^="cc-matrix-"]:not(.j-blogarticle *), #content > .j-module, #content .j-module:not(.j-blogarticle *), #content .j-module > [id^="cc-matrix-"]:not(.j-blogarticle *), #content > div:not(.section-head) > .j-module, #content > div:not(.section-head) > [id^="cc-matrix-"] { margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } /* Lege blog list grid an: Beiträge stapeln nahtlos ohne Lücken */ #content > [id^="cc-matrix-"], #content [id*="blog-list"], #content [id*="blogList"] { display: block !important; margin: 0 !important; padding: 0 !important; } .j-blogarticle { background: transparent !important; background-color: transparent !important; border: 0 !important; border-top: 1px solid var(--hairline) !important; border-radius: 0 !important; padding: var(--s-5) 0 !important; margin: 0 !important; display: block !important; box-shadow: none !important; position: relative; } .j-blogarticle:first-child { border-top: 0 !important; padding-top: 0 !important; } .j-blogarticle + .j-blogarticle { margin-top: 0 !important; } .j-blogarticle:hover { background: transparent !important; } /* Aggressive wrapper-margin kill: ALLES zwischen #content und .j-blogarticle abräumen */ #content .j-blogarticle, #content [id^="cc-blog"], #content [id*="blog-list"], #content [id*="cc-matrix-blog"] { margin: 0 !important; } #content > .j-module, #content > div > .j-module, #content > [id^="cc-matrix-"], #content > div > [id^="cc-matrix-"], #content > div > div > [id^="cc-matrix-"], #content > div > div > .j-module { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } /* Titel — Jimdo nutzt einfaches

, NICHT .j-blog-header / .j-blogarticle > h2 { margin: 0 0 var(--s-2) !important; padding: 0 0 var(--s-2) !important; border-bottom: 1px solid var(--hairline); font-family: var(--font); font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); } .j-blogarticle > h2 a, .j-blogarticle > h2 > a { color: var(--ink); text-decoration: none; transition: color .2s var(--ease); } .j-blogarticle > h2 a:hover { color: var(--fire); } / Clearfix-DIV ausblenden / .j-blogarticle > div.c { display: none !important; } / Comments-Span dezent als Mono-Annotation — über Stretched-Link / .j-blogarticle .comment { display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--steel); letter-spacing: 0.08em; text-transform: uppercase; margin: var(--s-3) 0 0; padding: var(--s-2) 0 0; border-top: 1px solid var(--hairline); } .j-blogarticle .comment a, .j-blogarticle .comment a:link, .j-blogarticle .comment a:visited { color: var(--steel); text-decoration: none; } .j-blogarticle .comment a:hover { color: var(--fire); } / Legacy fallback (für andere Themes) / .j-blog-header { display: block; grid-column: 2; } .j-blog-headline { font-family: var(--font); font-size: 1.25rem; font-weight: 700; } / DATE STAMP — kleine Eyebrow ÜBER dem Titel / .j-blogarticle .datetime, .j-blogarticle time.datetime { display: flex !important; flex-direction: row !important; align-items: baseline !important; gap: 8px !important; background: transparent !important; background-color: transparent !important; background-image: none !important; padding: 0 !important; margin: 0 0 var(--s-1) !important; border: 0 !important; border-radius: 0 !important; position: static !important; width: auto !important; height: auto !important; text-align: left !important; box-shadow: none !important; font-family: var(--mono) !important; font-size: 0.72rem !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--steel) !important; } .j-blogarticle .datetime::before { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--fire); margin-right: 4px; flex-shrink: 0; align-self: center; } .j-blogarticle .datetime-inner { display: flex !important; flex-direction: row !important; align-items: baseline !important; gap: 4px !important; background: transparent !important; background-color: transparent !important; background-image: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; width: auto !important; height: auto !important; text-align: left !important; box-shadow: none !important; } .j-blogarticle .datetime p, .j-blogarticle .datetime-inner p { margin: 0 !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; max-width: none !important; font-family: var(--mono) !important; font-size: 0.72rem !important; font-weight: 500 !important; letter-spacing: 0.06em !important; color: var(--steel) !important; text-transform: uppercase !important; line-height: 1.2 !important; display: block !important; text-align: left !important; } .j-blogarticle .datetime p.day, .j-blogarticle .datetime-inner p.day { color: var(--ink) !important; font-family: var(--mono) !important; font-size: 0.9rem !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0 !important; margin: 0 !important; text-transform: none !important; display: inline-block !important; } .j-blogarticle .datetime p.mon, .j-blogarticle .datetime-inner p.mon { color: var(--steel) !important; font-family: var(--mono) !important; font-weight: 500 !important; text-transform: uppercase !important; font-size: 0.78rem !important; letter-spacing: 0.06em !important; margin: 0 !important; display: inline-block !important; } .j-blogarticle .datetime p.yr, .j-blogarticle .datetime-inner p.yr { display: none !important; } .j-blogarticle .datetime p.day-word, .j-blogarticle .datetime-inner p.day-word { display: none !important; } / Body — voll, ungekürzt, alle Module sichtbar (v4.2) / .j-blogarticle [id^="cc-matrix-"] { margin: 0 !important; padding: 0 !important; display: block !important; } .j-blogarticle .j-module { margin: var(--s-2) 0 !important; padding: 0 !important; } .j-blogarticle .j-module:first-child { margin-top: 0 !important; } .j-blogarticle .j-module:last-child { margin-bottom: 0 !important; } .j-blogarticle .j-text > div[data-block]:empty, .j-blogarticle .j-text > div[data-editor]:empty { display: none !important; / Jimdos leere Editor-Wrapper / } .j-blogarticle p { font-family: var(--font); font-size: 0.98rem; line-height: 1.4 !important; color: var(--graphite); margin: 0 !important; padding: 0 !important; max-width: none !important; } .j-blogarticle p + p { margin-top: 2px !important; } .j-blogarticle p:last-child { margin-bottom: 0 !important; } .j-blogarticle .j-text { line-height: 1.4 !important; } .j-blogarticle .j-text p { line-height: 1.4 !important; margin: 0 !important; } .j-blogarticle .j-hr { margin: var(--s-2) 0 !important; } .j-blogarticle .j-image img, .j-blogarticle .j-imageSubtitle img, .j-blogarticle .j-gallery img { max-width: 100%; height: auto; } / Clearfix-DIV ausblenden / .j-blogarticle > div.c { display: none !important; } / ##################################################### / / ##### BLOG DETAIL PAGE OVERRIDES ##### / / ##################################################### / / Auf Detail-Seiten wollen wir den vollen Artikel breit & ungekürzt sehen — die Kompakt-Listen-Regeln drüber müssen zurückgesetzt werden. / html.ff-detail-page .j-blogarticle, body.ff-detail-page .j-blogarticle { display: block !important; padding: 0 !important; border-top: 0 !important; border-bottom: 0 !important; background: transparent !important; position: static; grid-template-columns: none !important; } html.ff-detail-page .j-blogarticle:hover, body.ff-detail-page .j-blogarticle:hover { background: transparent !important; } html.ff-detail-page .j-blogarticle > h2, body.ff-detail-page .j-blogarticle > h2 { font-size: clamp(1.875rem, 4vw, 2.75rem) !important; font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; margin: 0 0 var(--s-3) !important; padding: 0 0 var(--s-4) !important; border-bottom: 1px solid var(--hairline); grid-column: auto !important; } html.ff-detail-page .j-blogarticle > h2 > a, body.ff-detail-page .j-blogarticle > h2 > a { color: var(--ink) !important; } / Stretched-Link auf Detail-Seite deaktivieren / html.ff-detail-page .j-blogarticle > h2 > a::after, body.ff-detail-page .j-blogarticle > h2 > a::after { display: none !important; content: none !important; } / Datums-Block oben über dem Titel (klein, als Eyebrow) / html.ff-detail-page .j-blogarticle .datetime, html.ff-detail-page .j-blogarticle time.datetime, body.ff-detail-page .j-blogarticle .datetime, body.ff-detail-page .j-blogarticle time.datetime { display: flex !important; flex-direction: row !important; align-items: baseline !important; gap: 8px !important; position: static !important; grid-row: auto !important; grid-column: auto !important; margin: 0 0 var(--s-4) !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; font-family: var(--mono) !important; font-size: 0.78rem !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--steel) !important; align-self: auto !important; } html.ff-detail-page .j-blogarticle .datetime::before, body.ff-detail-page .j-blogarticle .datetime::before { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--fire); margin-right: 4px; flex-shrink: 0; align-self: center; } / Body-Container voll: kein max-height, kein nowrap, kein Fade / html.ff-detail-page .j-blogarticle [id^="cc-matrix-"], body.ff-detail-page .j-blogarticle [id^="cc-matrix-"] { max-height: none !important; overflow: visible !important; white-space: normal !important; text-overflow: clip !important; margin: 0 !important; padding: 0 !important; display: block !important; grid-column: auto !important; } html.ff-detail-page .j-blogarticle [id^="cc-matrix-"]::after, body.ff-detail-page .j-blogarticle [id^="cc-matrix-"]::after { display: none !important; content: none !important; } / Alle Inhalts-Module wieder zeigen / html.ff-detail-page .j-blogarticle .j-imageSubtitle, html.ff-detail-page .j-blogarticle .j-image, html.ff-detail-page .j-blogarticle .j-gallery, html.ff-detail-page .j-blogarticle .j-htmlCode, html.ff-detail-page .j-blogarticle .j-video, html.ff-detail-page .j-blogarticle .cc-sharebuttons-element, html.ff-detail-page .j-blogarticle .j-hr, html.ff-detail-page .j-blogarticle .j-header, html.ff-detail-page .j-blogarticle .j-form, html.ff-detail-page .j-blogarticle .j-button, html.ff-detail-page .j-blogarticle .j-table, html.ff-detail-page .j-blogarticle .j-fileDownload, html.ff-detail-page .j-blogarticle .j-rss, body.ff-detail-page .j-blogarticle .j-imageSubtitle, body.ff-detail-page .j-blogarticle .j-image, body.ff-detail-page .j-blogarticle .j-gallery, body.ff-detail-page .j-blogarticle .j-htmlCode, body.ff-detail-page .j-blogarticle .j-video, body.ff-detail-page .j-blogarticle .cc-sharebuttons-element, body.ff-detail-page .j-blogarticle .j-hr, body.ff-detail-page .j-blogarticle .j-header, body.ff-detail-page .j-blogarticle .j-form, body.ff-detail-page .j-blogarticle .j-button, body.ff-detail-page .j-blogarticle .j-table, body.ff-detail-page .j-blogarticle .j-fileDownload, body.ff-detail-page .j-blogarticle .j-rss { display: block !important; } / Mehrere .j-text Module wieder zeigen / html.ff-detail-page .j-blogarticle [id^="cc-matrix-"] > .j-text ~ .j-text, body.ff-detail-page .j-blogarticle [id^="cc-matrix-"] > .j-text ~ .j-text { display: block !important; } / Module-Spacing wiederherstellen / html.ff-detail-page .j-blogarticle .j-module, body.ff-detail-page .j-blogarticle .j-module { margin: var(--s-4) 0 !important; } html.ff-detail-page .j-blogarticle .j-hr, body.ff-detail-page .j-blogarticle .j-hr { margin: var(--s-6) 0 !important; } / Body-Text voll breit, ohne 64ch-Begrenzung / html.ff-detail-page .j-blogarticle p, body.ff-detail-page .j-blogarticle p { max-width: none !important; font-family: var(--font); font-size: 1.05rem !important; line-height: 1.7 !important; color: var(--graphite); margin: 0 0 1em !important; white-space: normal !important; } / Comments-Block am Ende mit Abstand / html.ff-detail-page .j-blogarticle .comment, body.ff-detail-page .j-blogarticle .comment { display: block !important; margin: var(--s-7) 0 0 !important; padding: var(--s-4) 0 0 !important; border-top: 1px solid var(--hairline); font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; width: auto !important; } / Bilder, Galerien voll-breit / html.ff-detail-page .j-blogarticle .j-image img, html.ff-detail-page .j-blogarticle .j-imageSubtitle img, html.ff-detail-page .j-blogarticle .j-gallery img, body.ff-detail-page .j-blogarticle .j-image img, body.ff-detail-page .j-blogarticle .j-imageSubtitle img, body.ff-detail-page .j-blogarticle .j-gallery img { max-width: 100%; height: auto; } / Pagination / .j-blogPagination { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 2px solid var(--ink); text-align: left; grid-column: 1 / -1; } .j-blogPagination a, .j-blogPagination span { display: inline-block; padding: 12px 18px; font-family: var(--font); font-weight: 600; font-size: 0.92rem; color: var(--steel); letter-spacing: 0.02em; border-right: 1px solid var(--hairline); margin: 0; transition: all .15s var(--ease); text-decoration: none; } .j-blogPagination a:hover, .j-blogPagination .active { background: var(--fire); color: var(--cream); } / === GENERIC JIMDO MODULES === / .j-module { margin-bottom: var(--s-4); } .j-text { font-family: var(--font); font-size: 1.0625rem; line-height: 1.65; color: var(--graphite); } .j-text p { max-width: 68ch; } .j-text a { color: var(--fire); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; } .j-text a:hover { color: var(--fire-deep); text-decoration-thickness: 2px; } .j-text strong, .j-text b { color: var(--ink); } .j-header h1, .j-header h2, .j-header h3 { font-family: var(--font); color: var(--ink); margin: var(--s-7) 0 var(--s-4); letter-spacing: -0.012em; position: relative; } .j-header h1::after, .j-header h2::after, .j-header h3::after { content: ''; display: block; width: 32px; height: 2px; background: var(--fire); margin-top: var(--s-3); } .j-hr hr { border: 0; height: 1px; background: var(--hairline); margin: var(--s-6) 0; } .j-imageSubtitle figure, .j-image figure { margin: 0; border-radius: 0; overflow: hidden; background: var(--cream-deep); position: relative; } .j-imageSubtitle img, .j-image img { border-radius: 0; transition: filter .4s var(--ease); } .j-imageSubtitle figure:hover img { filter: brightness(.96) contrast(1.04); } .j-imageSubtitle figcaption { font-family: var(--mono); font-size: 0.78rem; color: var(--steel); padding: 8px 0 0; font-style: normal; letter-spacing: 0.04em; } .j-gallery .cc-m-gallery-container { border-radius: 0; overflow: hidden; } .j-gallery img { border-radius: 0; transition: filter .25s var(--ease); } .j-gallery a:hover img { filter: brightness(.92) contrast(1.05); } .cc-m-gallery-slider-thumbnails a { border-radius: 0; overflow: hidden; border: 2px solid transparent; transition: border-color .15s var(--ease); } .cc-m-gallery-slider-thumbnails a:hover, .cc-m-gallery-slider-thumbnails .selected { border-color: var(--fire); } / CTA Button / .j-calltoaction-link, .j-calltoaction a { display: inline-flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-6); font-family: var(--font); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--fire); color: var(--cream); border: 0; border-radius: 0; box-shadow: var(--el-fire); transition: all .25s var(--ease); text-decoration: none; } .j-calltoaction-link:hover, .j-calltoaction a:hover { background: var(--fire-deep); transform: translateY(-1px); box-shadow: 0 16px 40px oklch(0.555 0.215 27 / .42); color: var(--cream); } / Share Buttons / .cc-sharebuttons-element { padding: var(--s-3); background: var(--cream-deep); border: 1px solid var(--hairline); border-radius: 0; margin: var(--s-3) 0 0; } / ##################################################### / / ##### Seitenleiste ##### / / ##################################################### / #sidebar { color: var(--ink); } #sidebar a { color: var(--ink); } #sidebar a:hover { color: var(--fire); } #sidebar { display: flex; flex-direction: column; gap: 0; } #sidebar [id^="cc-matrix-"] { display: flex !important; flex-direction: column !important; gap: var(--s-4) !important; } #sidebar .j-module { background: var(--paper); border: 1px solid var(--hairline); border-radius: 0; padding: var(--s-4) !important; margin: 0 !important; margin-bottom: 0 !important; position: relative; } #sidebar .j-module + .j-module { margin-top: 0 !important; } #sidebar .j-spacing, #sidebar .cc-m-spacer { display: none !important; height: 0 !important; } #sidebar .j-hr { padding: 0; background: transparent; border: 0; margin: 0 !important; } #sidebar .j-hr hr { display: none !important; } #sidebar .j-imageSubtitle:first-child { background: var(--ink); border-color: var(--ink); padding: var(--s-6) var(--s-5); } #sidebar .j-imageSubtitle:first-child img { filter: brightness(0) invert(1); margin: 0 auto; max-width: 200px; } #sidebar .j-header h1, #sidebar .j-header h2, #sidebar .j-header h3 { font-family: var(--mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin: 0 0 var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--hairline); position: relative; } #sidebar .j-header h1::after, #sidebar .j-header h2::after, #sidebar .j-header h3::after { position: absolute; bottom: -1px; left: 0; width: 32px; height: 1px; background: var(--fire); margin: 0; content: ''; display: block; } #sidebar .j-text { font-size: 0.94rem; line-height: 1.65; } #sidebar .j-text p { font-size: 0.94rem; max-width: none; } #sidebar iframe { width: 100%; border-radius: 0; background: var(--cream-deep); max-height: 500px; border: 0; } #sidebar .j-htmlCode img { width: 100%; border-radius: 0; border: 1px solid var(--fire); } / Override Jimdo template defaults / .jtpl-contentinner, .jtpl-sectiongutter, .jtpl-section, .jtpl-content, .jtpl-contentshadow { padding: 0; background: transparent; box-shadow: none; } .sidebar-options, .content-options { background: transparent; padding: 0; border: 0; } .lightbox-image-wrapper { border-radius: 0; overflow: hidden; } / Footer Jimdo modules / .j-meta-links { display: flex; gap: var(--s-6); flex-wrap: wrap; align-items: center; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; margin-bottom: var(--s-3); } .j-meta-links a { color: oklch(0.972 0.012 75 / .72); text-decoration: none; } .j-meta-links a:hover { color: var(--cream); } .j-admin-links { font-family: var(--mono); font-size: 0.74rem; opacity: .35; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid oklch(0.972 0.012 75 / .08); letter-spacing: 0.04em; } .j-admin-links:hover { opacity: .8; } / ============================================================ RESPONSIVE ============================================================ / @media (max-width: 1100px) { .hero-inner { grid-template-columns: 1fr; min-height: 0; } .hero-photo { order: -1; aspect-ratio: 16/9; min-height: 320px; } .hero-text { padding: clamp(48px, 7vw, 80px) var(--gutter); } .stats-row { grid-template-columns: repeat(2, 1fr); } .stat-cell:nth-child(2) { border-right: 0; } .stat-cell:nth-child(2n) { border-right: 0; } .stat-cell:nth-child(-n+2) { border-bottom: 1px solid oklch(0.972 0.012 75 / .14); padding-bottom: var(--s-5); } .stat-cell:nth-child(n+3) { padding-top: var(--s-5); } .main-grid { grid-template-columns: 1fr; gap: var(--s-7); } #sidebar [id^="cc-matrix-"] { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); } .mission-grid { grid-template-columns: 1fr; gap: var(--s-7); } .fleet-head { grid-template-columns: 1fr; gap: var(--s-4); } .fleet-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); } } @media (max-width: 768px) { .header-inner { padding: var(--s-3) var(--s-4); } .nav-toggle { display: grid; place-items: center; } .brand-logo { height: 48px; max-width: 240px; } / Mobile nav: collapse to vertical drawer / #navigation { position: fixed; inset: 0; top: 80px; background: var(--white); padding: var(--s-5); flex-direction: column; align-items: stretch; transform: translateX(100%); transition: transform .3s var(--ease); overflow-y: auto; z-index: 99; } body.nav-open #navigation { transform: translateX(0); } #navigation .mainNav1, #navigation > ul, #navigation .cc-nav-level-0, #navigation .j-nav-level-0, #navigation .jmd-navlist--0 { flex-direction: column !important; flex-wrap: nowrap; gap: 0; width: 100%; } #navigation .mainNav1 > li > a, #navigation .mainNav1 a.level_1, #navigation .cc-nav-level-0 > li > a, #navigation .j-nav-level-0 > li > a { padding: var(--s-4); font-size: 1rem; border-bottom: 1px solid var(--hairline); white-space: normal; } / On mobile: submenus inline (no hover) / #navigation .mainNav1 .mainNav2, #navigation .mainNav1 li ul, #navigation .cc-nav-level-1, #navigation .j-nav-level-1, #navigation .jmd-nav__list--1 { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; box-shadow: none !important; border: 0 !important; padding: 0 0 var(--s-2) var(--s-4) !important; background: var(--cream-deep) !important; min-width: 0 !important; } #emergency-strip .strip-inner { justify-content: center; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-4); } .strip-numbers { justify-content: center; gap: 0; } .strip-numbers > span { padding: 4px 10px; font-size: 0.74rem; } .hero-photo { aspect-ratio: 4/3; min-height: 240px; } .hero-cta { width: 100%; } .hero-cta .btn { width: 100%; justify-content: center; } .stats-row { grid-template-columns: 1fr 1fr; gap: 0; } .stat-num { font-size: 2.5rem; } .pillars { grid-template-columns: 1fr; } .fleet-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; } .j-blogarticle { grid-template-columns: 1fr !important; gap: var(--s-2) !important; padding: var(--s-4) 0 !important; } .j-blogarticle .datetime, .j-blogarticle time.datetime { grid-row: auto !important; padding-top: var(--s-2) !important; position: static !important; } .j-blogarticle .datetime-inner { display: flex !important; flex-direction: row !important; align-items: baseline !important; gap: var(--s-2) !important; } .j-blogarticle .datetime p.day, .j-blogarticle .datetime-inner p.day { font-size: 1.25rem !important; } .j-blogarticle > div:not(.datetime), .j-blogarticle [id^="cc-matrix-"], .j-blog-header { grid-column: 1 !important; } #sidebar [id^="cc-matrix-"] { grid-template-columns: 1fr; } } @media (max-width: 480px) { .brand-logo { height: 40px; max-width: 200px; } .hero-title { font-size: 2.5rem; } .footer-bottom .footer-legal { gap: var(--s-3); } .footer-brand-stack span { font-size: 1.05rem; } .footer-brand-stack strong { font-size: 1.5rem; } .footer-brand-stack span:last-child { font-size: 1.4rem; } } @media (prefers-reduced-motion: reduce) { , ::before, ::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; scroll-behavior: auto; } } @media print { #emergency-strip, #hero, #stats-strip, #mission, #fleet, #sidebar, #footer, .nav-toggle { display: none; } body { background: white; color: black; } .j-blogarticle { padding: var(--s-4) 0; page-break-inside: avoid; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ##################################################### / / ##### Page-Context Visibility ##### / / ##################################################### / / DEFAULT: Landing-Sections sind versteckt. Nur auf der explizit markierten Startseite (html.ff-home-page) werden sie eingeblendet. Das Early-Script in layout.html taggt VOR dem ersten Paint, also kein Hero-Aufflackern auf Detail-Seiten. / #hero, #stats-strip, #mission, #fleet, .section-head { display: none; } html.ff-home-page #hero, body.ff-home-page #hero { display: block; } html.ff-home-page #stats-strip, html.ff-home-page #mission, html.ff-home-page #fleet, html.ff-home-page .section-head, body.ff-home-page #stats-strip, body.ff-home-page #mission, body.ff-home-page #fleet, body.ff-home-page .section-head { display: block; } / Auf Detail-Seiten Main padding reduzieren / html:not(.ff-home-page) #main, html.ff-detail-page #main { padding: var(--s-6) 0 var(--s-8) !important; } / ##################################################### / / ##### SCROLL REVEAL & PARALLAX EFFECTS ##### / / ##################################################### / [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.22, .9, .28, 1), transform .9s cubic-bezier(.22, .9, .28, 1); } [data-reveal][data-revealed] { opacity: 1; transform: translateY(0); } [data-reveal="up"] { transform: translateY(40px); } [data-reveal="up"][data-revealed] { transform: translateY(0); } [data-reveal="stagger"] .stat-cell, [data-reveal="stagger"] .pillar, [data-reveal="stagger"] .fleet-card { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.22, .9, .28, 1), transform .7s cubic-bezier(.22, .9, .28, 1); } [data-reveal="stagger"][data-revealed] .stat-cell:nth-child(1), [data-reveal="stagger"][data-revealed] .pillar:nth-child(1), [data-reveal="stagger"][data-revealed] .fleet-card:nth-child(1) { transition-delay: .05s; opacity: 1; transform: translateY(0); } [data-reveal="stagger"][data-revealed] .stat-cell:nth-child(2), [data-reveal="stagger"][data-revealed] .pillar:nth-child(2), [data-reveal="stagger"][data-revealed] .fleet-card:nth-child(2) { transition-delay: .14s; opacity: 1; transform: translateY(0); } [data-reveal="stagger"][data-revealed] .stat-cell:nth-child(3), [data-reveal="stagger"][data-revealed] .pillar:nth-child(3), [data-reveal="stagger"][data-revealed] .fleet-card:nth-child(3) { transition-delay: .23s; opacity: 1; transform: translateY(0); } [data-reveal="stagger"][data-revealed] .stat-cell:nth-child(4), [data-reveal="stagger"][data-revealed] .pillar:nth-child(4), [data-reveal="stagger"][data-revealed] .fleet-card:nth-child(4) { transition-delay: .32s; opacity: 1; transform: translateY(0); } .hero-photo img { will-change: transform; transform: translate3d(0, 0, 0) scale(1.06); transition: filter .6s var(--ease); } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; } [data-reveal] { transition: none !important; } #hero::before, #mission::before { animation: none !important; } .hero-photo img { transform: none !important; } } /* ============================================================ v3.7 · LINK COLOR ENFORCEMENT Override Jimdo's default a:link/a:visited orange + underline. Uses :link/:visited pseudo-classes on component selectors to beat Jimdo's specificity (a:link = 0,0,1,1 < .class:link = 0,0,2,0). ============================================================ / .brand:link, .brand:visited { color: var(--ink); text-decoration: none; } .btn:link, .btn:visited { text-decoration: none; } .btn--fire:link, .btn--fire:visited { background: var(--fire); color: var(--white); } .btn--ghost:link, .btn--ghost:visited { background: transparent; color: var(--white); border-color: oklch(1 0 0 / .35); } .btn--fire:hover { background: var(--fire-deep); color: var(--white); } .btn--ghost:hover { background: oklch(1 0 0 / .08); color: var(--white); border-color: var(--white); } .link-arrow:link, .link-arrow:visited { color: var(--fire); text-decoration: none; } .link-arrow--amber:link, .link-arrow--amber:visited { color: var(--amber); text-decoration: none; } .link-arrow:hover { color: var(--fire-deep); border-bottom-color: var(--fire-deep); } .link-arrow--amber:hover { color: var(--amber); border-bottom-color: var(--amber); } .strip-contact a:link, .strip-contact a:visited { color: oklch(0.972 0.012 75 / .92); text-decoration: none; } .strip-contact a:hover { color: var(--amber); } / Top-level nav links (now also targets a.level_1) / #navigation a:link, #navigation a:visited, #navigation .mainNav1 a:link, #navigation .mainNav1 a:visited, #navigation .mainNav1 a.level_1:link, #navigation .mainNav1 a.level_1:visited, #navigation a.level_1:link, #navigation a.level_1:visited { color: var(--ink); text-decoration: none; border-bottom-color: transparent; } #navigation .mainNav1 a:hover, #navigation .mainNav1 a.level_1:hover, #navigation a.level_1:hover, #navigation .mainNav1 a.current, #navigation .mainNav1 a.level_1.current, #navigation a.level_1.current, #navigation .cc-nav-current, #navigation .j-nav-current, #navigation .jmd-nav__link--current, #navigation a.current { color: var(--fire); border-bottom-color: var(--fire); } / Submenu nav links / #navigation .mainNav2 a:link, #navigation .mainNav2 a:visited, #navigation .mainNav2 a.level_2:link, #navigation .mainNav2 a.level_2:visited, #navigation a.level_2:link, #navigation a.level_2:visited, #navigation .cc-nav-level-1 a:link, #navigation .cc-nav-level-1 a:visited, #navigation .j-nav-level-1 a:link, #navigation .j-nav-level-1 a:visited { color: var(--ink); text-decoration: none; border-bottom: 0; border-left-color: transparent; } #navigation .mainNav2 a:hover, #navigation .mainNav2 a.level_2:hover, #navigation a.level_2:hover, #navigation .cc-nav-level-1 a:hover, #navigation .j-nav-level-1 a:hover { color: var(--fire); background: var(--paper); border-left-color: var(--fire); } #footer a:link, #footer a:visited { color: oklch(0.972 0.012 75 / .82); text-decoration: none; } #footer a:hover { color: var(--cream); } .footer-address a:link, .footer-address a:visited { color: oklch(0.972 0.012 75 / .82); text-decoration: none; } .footer-address a:hover { color: var(--cream); } .j-text a:link, .j-text a:visited { color: var(--fire); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; } .j-text a:hover { color: var(--fire-deep); text-decoration-thickness: 2px; } .j-blogPagination a:link, .j-blogPagination a:visited { color: var(--steel); text-decoration: none; } .j-blogPagination a:hover, .j-blogPagination .active { background: var(--fire); color: var(--cream); } .j-meta-links a:link, .j-meta-links a:visited { color: oklch(0.972 0.012 75 / .72); text-decoration: none; } .j-meta-links a:hover { color: var(--cream); } .j-calltoaction-link:link, .j-calltoaction-link:visited, .j-calltoaction a:link, .j-calltoaction a:visited { background: var(--fire); color: var(--cream); text-decoration: none; } .j-calltoaction-link:hover, .j-calltoaction a:hover { background: var(--fire-deep); color: var(--cream); } .j-blog-header:link, .j-blog-header:visited { text-decoration: none; color: inherit; } .j-blog-header:hover .j-blog-headline { color: var(--fire); } .fleet-cardname a:link, .fleet-cardname a:visited { color: inherit; text-decoration: none; } .fleet-card:hover .fleet-cardname { color: var(--fire); } .fleet-cardphoto:link, .fleet-card__photo:visited { color: inherit; text-decoration: none; } / ##################################################### / / ##### VIEW TRANSITIONS API ##### / / ##################################################### / / Cross-document Seitenübergänge: Logo, Notruf-Strip und Navigation gleiten beim Klick auf einen Link sanft von Seite zu Seite, statt hartem Reload. Browser-Support: Chrome/Edge/Safari ≥17. Firefox: ignoriert das stillschweigend → fällt auf normalen Reload zurück. / @view-transition { navigation: auto; } / Globaler Crossfade — sehr subtil, nicht aufdringlich / ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.32s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); } ::view-transition-old(root) { animation-name: ff-vt-fade-out; } ::view-transition-new(root) { animation-name: ff-vt-fade-in; } @keyframes ff-vt-fade-out { to { opacity: 0; transform: translateY(-6px); } } @keyframes ff-vt-fade-in { from { opacity: 0; transform: translateY(8px); } } / Persistente Elemente: gleiten morphend mit, statt zu fade-pen / #emergency-strip { view-transition-name: ff-emergency; } #header { view-transition-name: ff-header; } .brand { view-transition-name: ff-brand; } #navigation { view-transition-name: ff-nav; } #footer { view-transition-name: ff-footer; } ::view-transition-group(ff-emergency), ::view-transition-group(ff-header), ::view-transition-group(ff-brand), ::view-transition-group(ff-nav), ::view-transition-group(ff-footer) { animation-duration: 0.4s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); } / Reduced-motion: Animationen abschalten / @media (prefers-reduced-motion: reduce) { ::view-transition-group(), ::view-transition-old(), ::view-transition-new() { animation-duration: 0.01ms !important; animation-delay: 0ms !important; } } /* ##################################################### / / ##### LAZY-IMAGE BLUR-UP (LQIP) ##### / / ##################################################### / / Schmaler Trick: Wir tauschen die src zuerst auf eine Tiny-Version (dimension=40 über Jimdo-CDN) und blurren sie per CSS-filter. Sobald das echte Bild im Hintergrund vorgeladen ist, swap auf src und Blur fadet auf 0. Kein DOM-Wrapping = keine CSS-Konflikte mit fleet-card / hero-photo / blog-galerien. / img.ff-img-loading { filter: blur(10px); transition: filter 0.5s var(--ease), opacity 0.5s var(--ease); / clip-path verhindert dass der Blur über die Kanten hinaus schimmert / clip-path: inset(0); } img.ff-img-ready { filter: blur(0); transition: filter 0.5s var(--ease), opacity 0.4s var(--ease); } / Während im Wechsel zwischen src=LQIP und src=real: ein dezenter Helligkeitspuls signalisiert "fertig" / @keyframes ff-img-arrive { 0% { opacity: 0.65; } 100% { opacity: 1; } } img.ff-img-ready { animation: ff-img-arrive 0.4s var(--ease); } / Reduced-motion: kein Blur, nur kurzer Fade / @media (prefers-reduced-motion: reduce) { img.ff-img-loading { filter: none; } img.ff-img-ready { animation: none; transition: opacity 0.15s linear; } } / Reduced-data: LQIP-Mechanik überspringen — Browser lädt direkt das Original */ @media (prefers-reduced-data: reduce) { img.ff-img-loading { filter: none; } }