/* ════════════════════════════════════════════════════════════ Agentur Haleck – Ghost Theme Refined-minimal landing for a legal-sector insurance agency. One typeface (Hanken Grotesk), warm paper neutrals, Ergo red accent. ════════════════════════════════════════════════════════════ */ :root { color-scheme: light; } html { color-scheme: light; forced-color-adjust: none; -webkit-forced-color-adjust: none; } @media screen and (prefers-color-scheme: dark) { :root { color-scheme: light; } html, body { background: #F6F3F1 !important; color: #2B2927 !important; } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --accent: #829E29; --accent-d: #66801F; --accent-soft: #F1F4E1; --accent-bd: #D6E0AF; --ink: #2B2927; --ink-2: #565250; --ink-3: #8E8A86; --line: #E9E4E1; --line-2: #F2EEEB; --warm: #F5F4F2; --frame: #EEE9E5; --white: #FFFFFF; --paper: #F5F4F1; --navy: #1B2A3F; --cream: #FAECDA; --cream-bd: #ECCF9F; --cream-ink:#9C6E32; --f: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --r: 12px; --rc: 8px; --gutter: 24px; --max: 1180px; --shadow: 0 1px 2px rgba(44,44,40,.04), 0 8px 28px rgba(44,44,40,.05); } html { scroll-behavior: smooth; } body { font-family: var(--f); font-weight: 400; font-size: 16px; line-height: 1.65; color: var(--ink); background: var(--paper); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: var(--f); cursor: pointer; } /* ─────────────────────────── HELPERS */ .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } section { padding: 40px var(--gutter); scroll-margin-top: 80px; } @media (min-width: 768px) { section { padding: 60px var(--gutter); } } .center { text-align: center; } .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; display: block; } .center .eyebrow { display: inline-block; } /* text-wrap: balance evens out the last line of a heading instead of leaving one or two orphaned words - no hard breaks, so it survives any wording change from Ghost. Browsers without support simply wrap as before. */ h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; } h2 { font-size: clamp(1.85rem, 4vw, 2.7rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.018em; color: var(--ink); margin-bottom: 8px; text-wrap: balance; } h3 { font-size: 1.18rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; } .faq-item summary, .warn-box h3, .saeule-card h3, .mandat-text h3 { text-wrap: balance; } p { color: var(--ink-2); } .hl { color: var(--accent); } /* ─────────────────────────── BUTTONS */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; font-size: 15px; font-weight: 500; line-height: 1; border-radius: var(--rc); border: 1px solid transparent; transition: background .2s, border-color .2s, color .2s, transform .12s; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-dark { background: var(--ink); color: #fff; border-color: var(--ink); } .btn-dark:hover { background: #1c1c19; } .btn-out { background: var(--white); color: var(--ink); border-color: var(--line); } .btn-out:hover { border-color: var(--ink-3); } .btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-accent:hover { background: var(--accent-d); border-color: var(--accent-d); } /* ═══════════════════════════ NAV */ #nav { position: sticky; top: 0; z-index: 800; background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--line); } .nav-inner { max-width: var(--max); margin: 0 auto; padding: 14px var(--gutter) 6px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .nav-logo { display: flex; align-items: center; gap: 16px; transform: translateY(6px); } .nav-tagline { font-size: 21px; color: #707273; font-weight: 500; letter-spacing: .01em; padding-left: 18px; border-left: 1.5px solid rgba(112,114,115,.55); line-height: 1.15; align-self: center; } .nav-links { list-style: none; display: flex; align-items: center; gap: 30px; } .nav-links a { font-size: 15px; color: var(--ink-2); font-weight: 400; transition: color .2s; } .nav-links a:hover { color: var(--ink); } .nav-links .nav-cta { background: var(--ink); color: #fff; padding: 10px 20px; border-radius: var(--rc); font-weight: 500; } .nav-links .nav-cta:hover { background: #1c1c19; color: #fff; } .nav-hbg { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; } .nav-hbg span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: .25s; } #nav-drawer { position: fixed; inset: 0 0 auto 0; top: 0; z-index: 700; background: var(--white); padding: 84px 24px 28px; transform: translateY(-100%); transition: transform .3s ease; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); } #nav-drawer.open { transform: translateY(0); } #nav-drawer ul { list-style: none; display: flex; flex-direction: column; gap: 4px; } #nav-drawer a { display: block; padding: 14px 4px; font-size: 17px; border-bottom: 1px solid var(--line-2); } #nav-drawer .d-cta { color: var(--accent); font-weight: 600; } /* LOGO */ .logo-img { height: 38px; width: auto; display: block; } .footer-brand .f-logo .logo-img { height: 44px; } /* The HALECK letters sit in the lower 74 % of the logo image (figure + arc above). Add padding under the nav logo so its BOX centre coincides with the LETTER centre - that way the letter mid sits exactly on the same horizontal line as the tagline mid, menu link mid, and CTA button mid (default flex centring). */ .nav-logo .logo-img { padding-bottom: 18px; box-sizing: content-box; } /* ═══════════════════════════ HERO */ #hero { position: relative; padding-top: 56px; padding-bottom: 40px; display: flex; flex-direction: column; justify-content: center; } #hero .wrap { position: relative; z-index: 1; } @media (min-width:768px){ #hero { padding-top: 72px; padding-bottom: 56px; min-height: min(640px, calc(100vh - 140px)); } } .hero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } @media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr .85fr; gap: 56px; } } .badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.85); color: var(--accent-d); border: 1px solid var(--accent-bd); backdrop-filter: blur(4px); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; margin-bottom: 22px; } .badge::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .hero-text h1 { margin-bottom: 22px; } /* German quotation marks around the claim, in the brand accent. The opening mark sits on the h1, the closing one on the accent span so it can never be orphaned on its own line; h1::after only fires when no accent part is set. Both are decoration - the words stay in the two Ghost settings, which must NOT contain typed quote characters. */ .home-template .hero-text h1::before, .home-template .hero-text h1 .hl::after, .home-template .hero-text h1:not(:has(.hl))::after { /* Hanken Grotesk draws the marks as hard geometric wedges. Georgia (Times as fallback) gives round, comma-like quotes and ships with every OS, so no extra webfont is loaded for two characters. */ font-family: Georgia, "Times New Roman", serif; /* Georgia sets its quotes noticeably larger than Hanken does at the same size; 80% brings them back to reading as punctuation, not ornament. */ font-size: .8em; } .home-template .hero-text h1::before { content: "\201E"; color: var(--accent); } .home-template .hero-text h1 .hl::after { content: "\201C"; color: var(--accent); } .home-template .hero-text h1:not(:has(.hl))::after { content: "\201C"; color: var(--accent); } .hero-lead { font-size: 17px; color: var(--ink-2); max-width: 30em; margin-bottom: 30px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } .hero-visual { margin: 0; } .hero-visual { position: relative; } .hero-frame { position: relative; width: 100%; aspect-ratio: 4 / 4.3; background: var(--frame); border-radius: 16px; background-size: cover; background-position: center top; display: flex; align-items: center; justify-content: center; box-shadow: 0 24px 60px -30px rgba(28,28,25,.35); } .hero-ph { width: 38%; max-width: 130px; fill: #C9C5BB; } .hero-visual figcaption { font-size: 12.5px; color: var(--ink-3); margin-top: 12px; } /* ═══════════════════════════ STATS */ #stats { background: var(--accent); padding: 22px var(--gutter); } /* Columns shrink to their content and the whole group sits centered; label and number inside each stat stay left-aligned. */ .stats-grid { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 28px 56px; } .stat { text-align: center; } @media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, auto); column-gap: clamp(48px, 8vw, 120px); } } .stat-n { font-size: clamp(1.7rem, 3.4vw, 2.25rem); font-weight: 500; letter-spacing: -0.02em; color: #F1F1EF; line-height: 1.1; margin-top: 6px; } .stat-l { font-size: 13.5px; color: rgba(255,255,255,.72); } /* Mobile: the 56px column gap plus the section's own gutter left each cell at 119px, so "bis 3.600 EUR" broke mid-amount and the labels wrapped to different heights, which put the numbers on different baselines. Wider cells, a reserved two-line label, and a non-breaking number fix all three. */ @media (max-width: 767px) { #stats { padding-left: 0; padding-right: 0; } .stats-grid { gap: 24px 20px; grid-template-rows: repeat(4, auto); } /* subgrid instead of a reserved min-height: label and number of both cells in a row share the same two track lines, so they align whether the label runs one line or two - and no empty space is reserved when it does not. */ .stat { grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 6px; } .stat-n { white-space: nowrap; font-size: min(1.7rem, 8.3vw - 5.7px); margin-top: 0; } } /* ═══════════════════════════ VIDEO */ .video-box { position: relative; width: 100%; max-width: 800px; margin: 8px auto 0; aspect-ratio: 16 / 9.4; background: var(--frame); border-radius: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .video-box.has-video { cursor: pointer; } .video-play { width: 76px; height: 76px; border-radius: 50%; border: 0; background: var(--accent); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(136,176,56,.35); transition: transform .2s, background .2s; } .video-box.has-video:hover .video-play { transform: scale(1.06); background: var(--accent-d); } .video-play svg { width: 30px; height: 30px; fill: #fff; margin-left: 2px; } .video-cap { position: absolute; left: 22px; bottom: 18px; font-size: 13px; color: var(--ink-3); } /* When a poster image is present (manual setting or auto-fetched YT thumb): */ .video-box[style*="background-image"], .video-box.has-poster { background-size: cover; background-position: center; background-repeat: no-repeat; } /* Dim overlay so the play button and caption stay readable on any photo. */ .video-box.has-poster::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.45) 100%); pointer-events: none; } .video-box.has-poster .video-play, .video-box.has-poster .video-cap { position: relative; z-index: 1; } .video-box.has-poster .video-cap { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); } /* video lightbox */ #video-lb { position: fixed; inset: 0; z-index: 1000; background: rgba(28,28,25,.86); display: none; align-items: center; justify-content: center; padding: 24px; } #video-lb.open { display: flex; } #video-lb .lb-frame { width: 100%; max-width: 920px; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #000; } #video-lb iframe { width: 100%; height: 100%; border: 0; } #video-lb .lb-x { position: absolute; top: 22px; right: 26px; background: none; border: 0; color: #fff; font-size: 30px; line-height: 1; } /* ═══════════════════════════ DREI SÄULEN */ #video { background: var(--warm); } #mandat { background: var(--warm); } .saeulen-grid { counter-reset: saeule; display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 28px; } @media (min-width: 820px) { .saeulen-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } } /* Three pillars: cards with full brand-red border, rounded corners matching the rest of the site, large decimal-leading-zero numbering. */ .saeule-card { position: relative; background: var(--white); border: 2px solid var(--accent); border-radius: var(--r); padding: 38px 28px 34px; display: flex; flex-direction: column; min-height: 320px; counter-increment: saeule; transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease; box-shadow: 0 12px 34px -22px rgba(28,28,25,.20); } .saeule-card:hover { border-color: var(--accent-d); box-shadow: 0 18px 50px -16px rgba(0,0,0,.18); transform: translateY(-4px); } .saeule-n { font-size: 28px; font-weight: 500; color: var(--accent); letter-spacing: -.01em; display: block; text-align: center; line-height: 1; } .saeule-n::before { content: counter(saeule, decimal-leading-zero); } .saeule-card h3 { font-size: 20px; font-weight: 600; text-align: center; margin: 14px 0 16px; letter-spacing: -.005em; } /* Reserve two title lines on desktop so the divider and body copy start on the same baseline across all three cards ("Text gleiche Ebene"). */ @media (min-width: 820px) { .saeule-card h3 { min-height: 2.6em; position: relative; padding-bottom: 21px; margin-bottom: 16px; } .saeule-card h3::after { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); margin: 0; } } .saeule-card h3::after { content: ""; display: block; width: 32px; height: 1px; background: var(--accent-bd); margin: 16px auto 4px; } .saeule-card p { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); margin: 0; } /* The list is set as a block on the card's centre axis, so it shares the optical centre with the headline above it while the lines themselves stay left-aligned and readable. */ .saeule-card ul, .saeule-card ol { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); padding-left: 1.15em; margin: 0 auto; width: fit-content; max-width: 100%; text-align: left; } .saeule-card ul { list-style: disc; } .saeule-card ol { list-style: decimal; } .saeule-card li { margin-bottom: 9px; } .saeule-card li:last-child { margin-bottom: 0; } .saeule-card li::marker { color: var(--accent); } .saeule-card p + p, .saeule-card p + ul, .saeule-card ul + p { margin-top: 12px; } .saeule-card strong { color: var(--ink); font-weight: 600; } /* ═══════════════════════════ MANDAT Five service promises rendered as a numbered list. Big brand-red leading-zero counter on the left, title + body on the right, faint divider between items. On mobile the number sits above the text. */ .mandat-list { counter-reset: mandat; margin-top: 28px; max-width: 660px; margin-left: auto; margin-right: auto; } .mandat-item { counter-increment: mandat; display: grid; grid-template-columns: auto 1fr; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: start; } .mandat-item:last-child { border-bottom: 0; } .mandat-n { font-size: 32px; font-weight: 500; color: var(--accent); line-height: 1; letter-spacing: -.02em; min-width: 56px; } .mandat-n::before { content: counter(mandat, decimal-leading-zero); } .mandat-text h3 { font-size: 18px; font-weight: 600; color: var(--ink); margin: 4px 0 8px; letter-spacing: -.005em; } .mandat-text p { font-size: 15px; line-height: 1.65; color: var(--ink-2); margin: 0; max-width: 60ch; } @media (min-width: 768px) { .mandat-item { padding: 28px 0; gap: 36px; } .mandat-n { font-size: 44px; min-width: 84px; } .mandat-text h3 { font-size: 21px; } .mandat-text p { font-size: 16px; } } /* ═══════════════════════════ WARNUNG */ .warn-section-eyebrow { color: var(--cream-ink); } .warn-grid { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 880px; margin: 20px auto 0; } @media (min-width: 820px) { /* One box stays full width, two sit side by side, three form a row - the grid needs more room in that case, otherwise the columns get too narrow for the headline plus body. */ .warn-grid:has(> :nth-child(2)) { grid-template-columns: repeat(2, 1fr); } .warn-grid:has(> :nth-child(3)) { grid-template-columns: repeat(3, 1fr); max-width: var(--max); gap: 18px; } .warn-grid:has(> :nth-child(3)) .warn-box { padding: 26px 26px; } .warn-grid:has(> :nth-child(3)) .warn-box h3 { font-size: 1.2rem; } .warn-grid:has(> :nth-child(3)) .warn-box p { font-size: 15px; } } .warn-box { background: var(--cream); border: 1px solid var(--cream-bd); border-radius: var(--r); padding: 30px 34px; box-shadow: 0 12px 34px -22px rgba(120,90,40,.18); } .warn-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-ink); display: block; margin-bottom: 12px; } .warn-box h3 { font-size: 1.32rem; margin-bottom: 12px; } .warn-box p { color: #6E5733; font-size: 15.5px; } /* Box text comes from the page body, so it can carry several paragraphs, lists and emphasis - all tinted into the cream palette of the box. */ .warn-text > :first-child { margin-top: 0; } .warn-text > :last-child { margin-bottom: 0; } .warn-text p + p, .warn-text p + ul, .warn-text p + ol, .warn-text ul + p, .warn-text ol + p { margin-top: 13px; } .warn-text ul, .warn-text ol { color: #6E5733; font-size: 15.5px; padding-left: 20px; } .warn-text ul { list-style: disc; } .warn-text ol { list-style: decimal; } .warn-text li { margin-bottom: 7px; } .warn-text li:last-child { margin-bottom: 0; } .warn-text li::marker { color: var(--cream-ink); } .warn-text strong { color: #5A4526; font-weight: 600; } .warn-text a { color: var(--cream-ink); text-decoration: underline; } .warn-text h2, .warn-text h3, .warn-text h4 { font-size: 15.5px; font-weight: 600; color: #5A4526; margin: 16px 0 6px; line-height: 1.45; } .warn-text blockquote { border-left: 2px solid var(--cream-bd); padding-left: 14px; margin-top: 13px; font-style: normal; color: #6E5733; } /* ═══════════════════════════ STIMMEN */ /* Stimmen: dark contrast block breaking the white/warm alternation. */ #stimmen { background: var(--navy); position: relative; } #stimmen h2 { color: #fff; } #stimmen .eyebrow { color: var(--accent); } #stimmen .stimme-card { border-color: transparent; } .stimmen-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 8px; } @media (min-width: 820px) { .stimmen-grid { grid-template-columns: repeat(3, 1fr); } } .stimme-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 28px 26px; margin: 0; display: flex; flex-direction: column; gap: 22px; box-shadow: 0 12px 34px -20px rgba(28,28,25,.22); } .stimme-card blockquote { font-size: 15.5px; color: var(--ink); line-height: 1.6; } /* Long Google reviews are clamped to keep the three cards on one grid row. The full text stays in the DOM and opens in a lightbox on click; the button is unhidden by JS only for quotes that are actually cut off. */ .stimme-quote { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; } .stimme-card { justify-content: space-between; } .stimme-card figcaption { margin-top: auto; } .stimme-more { align-self: flex-start; background: none; border: 0; padding: 0; margin-top: -12px; font-size: 13.5px; font-weight: 600; color: var(--accent-d); display: inline-flex; align-items: center; gap: 6px; } .stimme-more[hidden] { display: none; } .stimme-more:hover { color: var(--accent); } .stimme-more::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin-top: -2px; } /* Shared lightbox for a single full review. */ #quote-lb { position: fixed; inset: 0; z-index: 1000; background: rgba(28,28,25,.72); display: none; align-items: center; justify-content: center; padding: 24px; } #quote-lb.open { display: flex; } #quote-lb .qb { background: var(--white); border-radius: var(--r); padding: 34px 32px 30px; max-width: 620px; width: 100%; max-height: 82vh; overflow-y: auto; box-shadow: 0 30px 80px -30px rgba(0,0,0,.5); position: relative; } #quote-lb .qb-x { position: absolute; top: 14px; right: 16px; background: none; border: 0; font-size: 26px; line-height: 1; color: var(--ink-3); } #quote-lb .qb-x:hover { color: var(--ink); } #quote-lb .qb-stars { display: flex; gap: 4px; margin-bottom: 14px; } #quote-lb .qb-stars svg { width: 17px; height: 17px; fill: #F0A800; } #quote-lb .qb-text { font-size: 16px; line-height: 1.7; color: var(--ink); white-space: pre-line; } #quote-lb .qb-foot { display: flex; align-items: center; gap: 13px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); } #quote-lb .qb-name { font-size: 14.5px; font-weight: 600; color: var(--ink); display: block; } #quote-lb .qb-role { font-size: 13px; color: var(--ink-3); } .stimme-card figcaption { display: flex; align-items: center; gap: 13px; } .stimme-av { width: 42px; height: 42px; flex: none; border-radius: 50%; background: rgba(255,255,255,.85); color: var(--accent-d); border: 1px solid var(--accent-bd); backdrop-filter: blur(4px); display: grid; place-items: center; font-size: 13px; font-weight: 700; letter-spacing: .02em; } .stimme-meta { display: flex; flex-direction: column; line-height: 1.35; } .stimme-name { font-size: 14.5px; font-weight: 600; color: var(--ink); } .stimme-role { font-size: 13px; color: var(--ink-3); } /* ═══════════════════════════ ZIELGRUPPEN Six-cell responsive grid with checkmark + title + optional subtitle. */ .zielgruppe-grid { display: grid; grid-template-columns: 1fr; gap: 20px 32px; margin-top: 24px; } @media (min-width: 640px) { .zielgruppe-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .zielgruppe-grid { grid-template-columns: repeat(3, 1fr); } } .zielgruppe-item { display: grid; grid-template-columns: 16px 1fr; gap: 12px; align-items: start; } .zielgruppe-ico { flex-shrink: 0; } .zielgruppe-text h3 { font-size: 15.5px; font-weight: 600; margin: 0 0 4px; color: var(--ink); letter-spacing: -.005em; line-height: 1.35; } .zielgruppe-text p { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin: 0; } /* ═══════════════════════════ MEDIATHEK Video tile grid on warm background. Each tile has a 16:9 thumbnail with a centred play badge; clicking follows canonical_url (external video) if set, otherwise the Ghost page URL. */ #mediathek { background: var(--warm); } .mediathek-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 24px; } @media (min-width: 640px) { .mediathek-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .mediathek-grid { grid-template-columns: repeat(3, 1fr); } } .mediathek-tile { display: block; background: var(--white); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); color: inherit; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease; box-shadow: 0 12px 34px -22px rgba(28,28,25,.18); } .mediathek-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 40px -16px rgba(0,0,0,.16); } .mediathek-thumb { aspect-ratio: 16/9; background-color: var(--ink); background-size: cover; background-position: center; position: relative; display: flex; align-items: center; justify-content: center; } .mediathek-play { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,.35), 0 10px 26px -10px rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; } .mediathek-tile:hover .mediathek-play { transform: scale(1.1); background: var(--accent-d); box-shadow: 0 0 0 9px rgba(255,255,255,.45), 0 14px 30px -10px rgba(0,0,0,.5); } /* The triangle's optical centre sits left of its bounding box, so it needs a small nudge right - 2px, not 4px, or it reads as off-centre. */ .mediathek-play svg { width: 24px; height: 24px; fill: currentColor; margin-left: 2px; } .mediathek-meta { padding: 16px 18px 18px; } .mediathek-meta h3 { font-size: 16px; font-weight: 600; margin: 0 0 6px; color: var(--ink); letter-spacing: -.005em; } .mediathek-meta p { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin: 0; } /* ═══════════════════════════ FAQ Native
/ accordion with a rotating chevron. */ .faq-list { max-width: 720px; margin: 24px auto 0; display: flex; flex-direction: column; gap: 12px; } .faq-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: border-color .2s ease; } .faq-item[open] { border-color: var(--accent-bd); } .faq-item summary { list-style: none; cursor: pointer; padding: 16px 20px; font-size: 15.5px; font-weight: 600; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 16px; letter-spacing: -.005em; line-height: 1.45; } .faq-item summary::-webkit-details-marker { display: none; } .faq-chevron { width: 20px; height: 20px; color: var(--ink-3); flex-shrink: 0; transition: transform .3s ease, color .3s ease; } .faq-item[open] .faq-chevron { transform: rotate(180deg); color: var(--accent); } .faq-answer { padding: 0 20px 18px; } .faq-answer p { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin: 0; max-width: 62ch; } /* Answers are rendered from the page body, so they can carry several paragraphs, lists and emphasis. Without these rules the paragraphs would collapse into one block (p has margin 0 above). */ .faq-answer p + p, .faq-answer p + ul, .faq-answer p + ol, .faq-answer ul + p, .faq-answer ol + p { margin-top: 13px; } .faq-answer ul, .faq-answer ol { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); padding-left: 20px; max-width: 62ch; } .faq-answer ul { list-style: disc; } .faq-answer ol { list-style: decimal; } .faq-answer li { margin-bottom: 6px; } .faq-answer li:last-child { margin-bottom: 0; } .faq-answer li::marker { color: var(--accent); } .faq-answer strong { color: var(--ink); font-weight: 600; } .faq-answer a { color: var(--accent-d); text-decoration: underline; } /* Sub-headings inside an answer (the sheet uses them for the named Gestaltungsmoeglichkeiten). Deliberately smaller than the global h3. */ .faq-answer h2, .faq-answer h3, .faq-answer h4 { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -.005em; line-height: 1.45; margin: 18px 0 6px; } .faq-answer blockquote { border-left: 2px solid var(--accent-bd); padding-left: 14px; margin-top: 13px; color: var(--ink); font-style: normal; } .faq-answer > :first-child { margin-top: 0; } .faq-answer > :last-child { margin-bottom: 0; } @media (min-width: 768px) { .faq-item summary { padding: 18px 24px; font-size: 16.5px; } .faq-answer { padding: 0 24px 22px; } } /* ═══════════════════════════ LEITFADEN */ .lead-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 28px; max-width: 880px; margin: 0 auto; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .lead-photo { flex: none; width: 200px; border-radius: 10px; overflow: hidden; } .lead-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .lead-card:has(.lead-photo) .lead-icon { display: none; } @media (max-width: 640px) { .lead-photo { width: 100%; height: 160px; } } .lead-icon { width: 52px; height: 52px; flex: none; border-radius: 10px; background: var(--accent-soft); display: grid; place-items: center; } .lead-icon svg { width: 26px; height: 26px; fill: var(--accent); } .lead-text { flex: 1 1 260px; } .lead-text .eyebrow { margin-bottom: 6px; } .lead-text h3 { margin-bottom: 4px; } .lead-text p { font-size: 14px; color: var(--ink-3); } .lead-card .btn { flex: none; } /* ═══════════════════════════ AKTUELLES Three newest blog posts as teaser cards. Same card language as the Mediathek tiles, but with a date line and a text link instead of a play badge, so the two sections stay distinguishable. */ #aktuelles { background: var(--white); } .aktuelles-grid { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 24px; } @media (min-width: 640px) { .aktuelles-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .aktuelles-grid { grid-template-columns: repeat(3, 1fr); } } .aktuell-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; color: inherit; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; box-shadow: 0 12px 34px -22px rgba(28,28,25,.18); } .aktuell-card:hover { transform: translateY(-3px); border-color: var(--accent-bd); box-shadow: 0 14px 40px -16px rgba(0,0,0,.16); } .aktuell-thumb { display: block; aspect-ratio: 16/9; background-color: var(--frame); background-size: cover; background-position: center; } .aktuell-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; } .aktuell-date { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .aktuell-card h3 { font-size: 17px; font-weight: 600; margin: 8px 0 8px; letter-spacing: -.005em; line-height: 1.35; } .aktuell-card p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 14px; } .aktuell-more { margin-top: auto; font-size: 13.5px; font-weight: 600; color: var(--accent-d); display: inline-flex; align-items: center; gap: 6px; } .aktuell-more::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin-top: -2px; } .aktuell-card:hover .aktuell-more { color: var(--accent); } .aktuelles-all { margin-top: 28px; } /* ═══════════════════════════ STEMPEL Worn hotline badge. One ink colour, one slight tilt - the ragged edges come from the turbulence filter inside the partial, not from a bitmap, so the mark stays crisp at any size and recolours with the accent. */ .stempel { display: block; width: 230px; flex: none; transform: rotate(-4deg); transition: transform .25s ease; } .stempel:hover { transform: rotate(-4deg) scale(1.03); } .stempel svg { width: 100%; height: auto; display: block; overflow: visible; } .stempel .st-ring { fill: none; stroke: var(--accent-d); stroke-width: 4.5; } .stempel .st-ring-2 { stroke-width: 2.4; } .stempel .st-band { stroke: var(--accent-d); stroke-width: 4.5; } .stempel .st-star { fill: var(--accent-d); } .stempel .st-arc { font-family: var(--f); font-size: 12.5px; font-weight: 800; letter-spacing: .1em; fill: var(--accent-d); } .stempel .st-num { font-family: var(--f); font-size: 30px; font-weight: 800; fill: var(--accent-d); } /* Warning section: the badge sits to the right of the card row and laps centred on the last box's top right corner. That needs free space beside the 1180px container, so the corner placement only starts at 1440px - narrower than that and the badge would be clipped by the page's horizontal overflow guard. Below it drops into the flow. */ #warnung { position: relative; } #warnung .stempel { width: 190px; margin: 22px auto 0; transform: rotate(10deg); } #warnung .stempel:hover { transform: rotate(10deg) scale(1.03); } @media (min-width: 1440px) { /* The badge is centred exactly on the grid's top right corner, which is also the last card's corner: half its width to the right, half its height up. The grid carries 24px of side padding that `right` is measured from, so the horizontal offset is 106 - 24 = 82px while the vertical one is the full 106px. */ #warnung .warn-grid { position: relative; } #warnung .stempel { position: absolute; top: -106px; right: -82px; margin: 0; width: 212px; } } /* The filter is decoration; without it the badge still reads correctly. */ @media (prefers-reduced-motion: reduce) { .stempel, .stempel:hover { transform: none; } } /* ═══════════════════════════ BOOKING */ #booking { background: var(--warm); } .booking-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; } @media (min-width: 900px) { .booking-grid { grid-template-columns: 1fr 1fr; gap: 48px; } } .booking-text h2 { margin-bottom: 14px; } .booking-text p { font-size: 16px; color: var(--ink-2); margin-bottom: 14px; } .booking-loc { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink-3); } .booking-loc svg { width: 17px; height: 17px; fill: var(--accent); flex: none; } .booking-card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px; box-shadow: var(--shadow); } .bk-head { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; } .bk-hint { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin-bottom: 18px; } /* Callback form. Labels sit above their field so the column works at any width; the two-up row collapses on narrow screens. */ .bk-form { display: flex; flex-direction: column; gap: 12px; } .bk-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 420px) { .bk-grid-2 { grid-template-columns: 1fr; } } .bk-field { display: flex; flex-direction: column; gap: 5px; } .bk-field > span { font-size: 13px; font-weight: 500; color: var(--ink-2); } .bk-field > span i { font-style: normal; color: var(--accent-d); } .bk-field > span em { font-style: normal; color: var(--ink-3); font-weight: 400; } .bk-field input, .bk-field select { font-family: var(--f); font-size: 15px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: var(--rc); padding: 11px 12px; min-height: 44px; width: 100%; transition: border-color .2s, box-shadow .2s; } .bk-field select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; } .bk-field input:focus, .bk-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .bk-field input::placeholder { color: #B6B1AC; } .bk-consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin-top: 6px; } .bk-consent input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--accent); flex: none; } .bk-consent label { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); } .bk-consent a { color: var(--accent-d); text-decoration: underline; } .bk-send { width: 100%; margin-top: 6px; } .bk-alt { width: 100%; } .bk-note { font-size: 12px; line-height: 1.5; color: var(--ink-3); margin-top: 2px; } /* ═══════════════════════════ FOOTER */ /* The gutter has to sit INSIDE the max-width box, exactly like .wrap does. With the padding on