/* A Match — Corporate-Design-Tokens 1:1 aus dem Brand System übernommen.
Quelle: "A Match Brand Slides.dc.html" / "A Match Website.dc.html"
Fonts werden per + preconnect im geladen
(nicht per @import — das blockiert sonst den Font-Request hinter dem
CSS-Parse und kostet unnötig Zeit bis zum ersten Rendern). */
:root {
--navy: #1B3557;
--navy-ink: #171E29;
--orange: #E8622C;
--orange-hover: #D1551F;
--orange-active: #B84A19;
--steel: #5C7A99;
--bg: #FFFFFF;
--surface: #F4F5F7;
--border: #E1E4E9;
--beige-border: #ECE1D3;
--beige-surface: #FCF8F4;
--text: #171E29;
--text-muted: #4B5563;
--on-navy-muted: #A9B7C6;
--success: #2E7D53;
--warning: #C98A1F;
--error: #C13A3A;
/* WCAG-AA-safe text variants of the brand colors, same hue, darkened just
enough to hit 4.5:1 on the light ground. The brand swatches above stay
untouched and keep doing every fill/border/background job; these three
are used ONLY where that colour sits as small text on a light surface.
(E8622C/5C7A99/C98A1F on #FAFAF9-#F4F5F7 land at 2.5-4.3:1 — below AA at
every text size, confirmed via Lighthouse.) */
--orange-text: #A85A20;
--steel-text: #526D89;
--warning-text: #8C6015;
--font-head: 'Helvetica Neue', Helvetica, 'Inter', Arial, sans-serif;
--font-body: 'Helvetica Neue', Helvetica, 'Inter', Arial, sans-serif;
--font-mono: 'Helvetica Neue', Helvetica, 'Inter', Arial, sans-serif;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-pill: 999px;
--shadow-sm: 0 1px 2px rgba(27, 53, 87, .04), 0 1px 1px rgba(27, 53, 87, .03);
--shadow-md: 0 4px 20px rgba(27, 53, 87, .08);
--shadow-lg: 0 16px 48px rgba(27, 53, 87, .14);
--container: 1200px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 88px; } /* keeps section tops clear of the sticky header on anchor jumps */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
line-height: 1.5;
overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.02em; margin: 0; color: var(--navy); }
p { margin: 0; }
a { color: var(--orange-text); text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.kicker {
font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: 0.03em;
color: var(--steel-text); text-transform: uppercase; margin-bottom: 18px; display: block;
}
.mono { font-family: var(--font-mono); }
.hl { color: var(--orange-text); }
.visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 2px; }
/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-weight: 700; font-size: 16px; border-radius: var(--radius-pill);
padding: 15px 30px; cursor: pointer; border: none; text-decoration: none;
transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
white-space: nowrap;
}
.btn:active { transform: scale(.98); }
.btn-arrow { display: inline-block; transition: transform .18s ease; }
.btn-icon { width: 18px; height: 18px; flex: none; }
.btn:hover .btn-arrow { transform: translateX(3px); }
.btn-primary {
background: var(--orange); color: var(--navy-ink); box-shadow: inset 0 0 0 1.5px transparent;
animation: cta-glow 3.2s ease-in-out infinite;
}
.btn-primary:hover { background: #fff; color: var(--orange-text); box-shadow: inset 0 0 0 1.5px var(--orange); }
@keyframes cta-glow {
0%, 100% { filter: drop-shadow(0 0 0 rgba(232, 98, 44, 0)); }
50% { filter: drop-shadow(0 0 10px rgba(232, 98, 44, .45)); }
}
.btn-on-navy { background: #fff; color: var(--navy); }
.btn-on-navy:hover { background: var(--orange); color: var(--navy-ink); }
.btn-secondary { background: #fff; color: var(--navy); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--orange); color: var(--navy-ink); border-color: var(--orange); }
.btn-sm { padding: 11px 22px; font-size: 14px; }
/* ── Icon links (email / phone / address / WhatsApp) ────────────────────
Shared everywhere contact info appears: topbar, footer, contact section,
legal pages. Order is always email, then phone, per house style. */
.icon-link { display: inline-flex; align-items: center; gap: 7px; }
.icon-link svg { width: 15px; height: 15px; flex: none; }
/* ── Top utility bar ─────────────────────────────────────────────────── */
.topbar { padding: 14px 0 0; }
.topbar .container {
display: flex; justify-content: flex-end; align-items: center;
gap: 24px; flex-wrap: wrap;
max-width: calc(var(--container) - 48px); margin: 0 auto;
background: var(--navy); border-radius: var(--radius-pill); padding: 9px 24px;
}
.topbar .icon-link { font-size: 13px; color: var(--on-navy-muted); }
.topbar .icon-link:hover { color: var(--orange); }
/* ── Header / Nav ────────────────────────────────────────────────────── */
.site-header {
position: sticky; top: 0; z-index: 100;
background: transparent;
padding: 14px 0;
}
.nav {
display: flex; align-items: center; justify-content: space-between; gap: 24px;
max-width: calc(var(--container) - 48px); margin: 0 auto; padding: 14px 28px;
background: var(--beige-surface); border-radius: var(--radius-pill); box-shadow: var(--shadow-md);
transition: box-shadow .25s ease, border-radius .25s ease;
}
.site-header.scrolled .nav { box-shadow: var(--shadow-lg); }
.nav-open .nav { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand svg { height: 32px; width: auto; display: block; }
.brand-word { font-family: var(--font-head); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--navy); }
.brand-word span { color: var(--orange); }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a { font-size: 15px; font-weight: 500; color: var(--navy); position: relative; padding: 4px 0; }
.nav-links a::after {
content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
background: var(--orange); transition: right .2s ease;
}
.nav-links a:hover::after { right: 0; }
.nav-actions { display: flex; align-items: center; gap: 20px; }
.lang-switch { display: flex; align-items: center; gap: 2px; font-family: var(--font-mono); font-size: 12px; }
.lang-switch a, .lang-switch span {
padding: 4px 6px; color: var(--text-muted); border-radius: var(--radius-sm);
}
.lang-switch a:hover { color: var(--orange-text); background: #fff; }
.lang-switch span[aria-current] { color: var(--navy); font-weight: 700; }
.lang-switch .sep { color: var(--border); padding: 0; }
.nav-toggle {
display: none; flex: none; width: 40px; height: 40px; border: none; background: transparent;
cursor: pointer; padding: 0; align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
content: ''; display: block; width: 22px; height: 2px; background: var(--navy); position: relative;
transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after { position: absolute; top: 7px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }
/* ── Sections / rhythm ───────────────────────────────────────────────── */
main { display: block; }
section { padding: 96px 0; }
.section-tight { padding: 64px 0; }
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head h2 { font-size: 40px; line-height: 1.12; }
.eyebrow-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 40px; }
.eyebrow-row .section-head { margin-bottom: 0; }
.link-arrow { font-weight: 700; font-size: 15px; white-space: nowrap; }
.link-arrow::after { content: ' →'; }
.reveal {
opacity: 0; transform: translateY(24px); will-change: opacity, transform;
transition: opacity .6s cubic-bezier(.16,.8,.24,1), transform .6s cubic-bezier(.16,.8,.24,1);
}
.reveal.is-visible { opacity: 1; transform: none; }
/* ── Hero ────────────────────────────────────────────────────────────── */
.hero { padding-top: 72px; padding-bottom: 0; position: relative; overflow: hidden; }
.hero-grid, .hero > .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.hero h1 { font-size: 60px; line-height: 1.04; margin-bottom: 24px; text-wrap: balance; }
.hero-sub { font-size: 19px; line-height: 1.6; color: var(--text-muted); max-width: 32em; margin-bottom: 36px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.tag {
font-size: 13px; font-weight: 500; color: var(--steel-text); background: var(--beige-surface);
border: 1px solid var(--beige-border); border-radius: var(--radius-sm); padding: 8px 13px;
}
.hero-media {
position: relative; border-radius: var(--radius-lg); overflow: hidden;
aspect-ratio: 4 / 5; background: var(--beige-surface); border: 1px solid var(--border);
box-shadow: var(--shadow-md);
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; animation: hero-kenburns 22s ease-in-out infinite; }
@keyframes hero-kenburns {
0%, 100% { transform: scale(1) translate(0, 0); }
50% { transform: scale(1.09) translate(-1.2%, -1%); }
}
.media-caption {
position: absolute; left: 20px; right: 20px; bottom: 20px;
font-family: var(--font-mono); font-size: 12px; color: #fff;
background: rgba(23, 30, 41, .55); backdrop-filter: blur(4px);
padding: 8px 12px; border-radius: var(--radius-sm); line-height: 1.4;
}
/* ── Reference-logo marquee ──────────────────────────────────────────── */
/* Ambient, faded background strip. Not a focal section, so it carries no
heading. Placeholder tiles (generic building glyph) stand in until real
client logos exist; swap each .logo-tile's inner content for an ![]()
without touching the marquee mechanics. */
.logo-marquee {
overflow: hidden; padding: 56px 0 16px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.logo-track {
display: flex; align-items: center; gap: 84px; width: max-content;
animation: logo-scroll 36s linear infinite;
}
@media (prefers-reduced-motion: no-preference) {
.logo-marquee:hover .logo-track { animation-play-state: paused; }
}
.logo-tile {
flex: none; display: flex; align-items: center; justify-content: center;
opacity: .4; filter: grayscale(1); transition: opacity .2s ease;
}
.logo-marquee:hover .logo-tile { opacity: .55; }
.logo-tile svg { height: 42px; width: auto; color: var(--text-muted); }
@keyframes logo-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ── Problem ─────────────────────────────────────────────────────────── */
.problem-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
.problem-lede h2 { font-size: 40px; line-height: 1.12; }
.problem-lede p { font-size: 17px; line-height: 1.6; color: var(--text-muted); margin-top: 20px; }
.problem-lede .about-byline { margin-top: 24px; font-size: 15px; font-weight: 700; color: var(--navy); }
.problem-cards { display: grid; gap: 16px; }
.problem-card {
background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
padding: 26px 28px; display: flex; gap: 20px; align-items: flex-start;
transition: box-shadow .2s ease, transform .2s ease;
}
.problem-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.problem-card .num { font-family: var(--font-mono); font-size: 13px; color: var(--orange-text); padding-top: 3px; flex: none; }
.problem-card h3 { font-size: 18px; }
.problem-card p { font-size: 15px; color: var(--text-muted); margin-top: 8px; line-height: 1.55; }
/* ── Ablauf ──────────────────────────────────────────────────────────── */
.process { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
@media (min-width: 981px) {
.process-grid::before {
content: ''; position: absolute; left: 0; right: 0; top: 40px; height: 1px;
background: linear-gradient(90deg, var(--border) 0%, var(--orange) 100%); z-index: 0;
}
}
.process-goal { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 8px; text-align: center; }
.process-goal-badge {
width: 56px; height: 56px; border-radius: 999px; background: var(--orange); color: var(--navy-ink);
display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md);
animation: goal-pulse 2.6s ease-in-out infinite;
}
.process-goal-badge svg { width: 24px; height: 24px; }
.process-goal-label { font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--navy); text-transform: uppercase; letter-spacing: .04em; }
@keyframes goal-pulse {
0%, 100% { box-shadow: var(--shadow-md), 0 0 0 0 rgba(232, 98, 44, .35); }
50% { box-shadow: var(--shadow-md), 0 0 0 14px rgba(232, 98, 44, 0); }
}
.process-card {
background: var(--beige-surface); border: 1px solid var(--beige-border); border-radius: var(--radius-md); padding: 32px;
box-shadow: var(--shadow-sm); position: relative; z-index: 1;
transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.process-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: transparent; }
.process-step { font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--orange-text); margin-bottom: 22px; display: flex; align-items: center; gap: 8px; }
.process-step::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--orange); flex: none; }
.process-card h3 { font-size: 20px; }
.process-card p { font-size: 15px; color: var(--text-muted); margin-top: 12px; line-height: 1.55; }
/* ── Referenz ────────────────────────────────────────────────────────── */
.testimonial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.testimonial-card {
background: var(--navy); border-radius: var(--radius-lg); padding: 52px; color: #fff;
display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
}
.testimonial-quote { font-size: 28px; line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; }
.testimonial-person { display: flex; align-items: center; gap: 16px; }
.avatar-placeholder {
width: 52px; height: 52px; border-radius: 999px; background: var(--steel-text); flex: none;
display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; color: #fff;
}
.testimonial-name { font-size: 16px; font-weight: 700; }
.testimonial-meta { font-size: 14px; color: var(--on-navy-muted); margin-top: 4px; }
.testimonial-media {
border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border);
background: var(--beige-surface); position: relative; min-height: 420px;
}
.testimonial-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
/* ── Mandate ─────────────────────────────────────────────────────────── */
.jobs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.job-card {
background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 28px;
transition: box-shadow .2s ease, transform .2s ease;
}
.job-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.job-top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.job-title { font-size: 19px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
.status-pill {
font-family: var(--font-mono); font-size: 11px; border-radius: var(--radius-sm);
padding: 6px 9px; white-space: nowrap; background: var(--beige-surface); flex: none;
}
.status-active { color: var(--success); }
.status-upcoming { color: var(--warning-text); }
.job-meta { font-size: 15px; color: var(--text-muted); margin-top: 8px; }
.job-hr { height: 1px; background: var(--border); margin: 22px 0; }
.job-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.job-tags .tag { padding: 6px 10px; font-size: 12px; }
/* ── Erstgespräch (Kontakt) ──────────────────────────────────────────── */
.contact { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.contact-intro p { font-size: 17px; line-height: 1.6; color: var(--text-muted); margin-top: 20px; }
.contact-intro .btn { margin-top: 32px; }
.trust-line {
margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--navy-ink); opacity: .75;
}
.trust-line a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.trust-line a:hover { opacity: .8; }
.contact-direct {
margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--border);
display: flex; flex-wrap: wrap; gap: 20px 32px; font-size: 15px;
}
.contact-direct .icon-link { color: var(--navy); font-weight: 600; }
.contact-direct .icon-link:hover { color: var(--orange-text); }
/* ── Closing CTA ─────────────────────────────────────────────────────── */
.cta-banner { background: var(--navy); padding: 80px 0; color: #fff; position: relative; overflow: hidden; }
.cta-banner-grid { position: relative; z-index: 1; }
.cta-banner-grid { display: grid; grid-template-columns: 1.2fr auto; gap: 48px; align-items: center; }
.cta-banner h2 { color: #fff; font-size: 44px; line-height: 1.08; margin-bottom: 16px; }
.cta-banner p { font-size: 19px; line-height: 1.55; max-width: 34em; color: var(--on-navy-muted); }
/* ── Footer ──────────────────────────────────────────────────────────── */
footer { background: var(--navy); color: var(--on-navy-muted); padding: 64px 0 32px; }
.footer-grid {
display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; gap: 32px;
padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.footer-brand .brand-word { color: #fff; }
.footer-address { font-size: 15px; line-height: 1.6; }
.footer-col { display: grid; gap: 12px; align-content: start; }
.footer-col-title { font-family: var(--font-mono); font-size: 11px; color: #fff; letter-spacing: .04em; }
.footer-col a, .footer-col span { font-size: 15px; color: var(--on-navy-muted); }
.footer-col a:hover { color: var(--orange); }
.footer-bottom {
padding-top: 28px; display: flex; justify-content: space-between; gap: 24px;
font-family: var(--font-mono); font-size: 12px; flex-wrap: wrap;
}
.footer-bottom a { color: var(--on-navy-muted); }
.footer-bottom a:hover { color: var(--orange); }
/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 980px) {
.hero-grid, .problem-grid, .testimonial-grid { grid-template-columns: 1fr; }
.hero-media { order: -1; aspect-ratio: 16/9; }
.process-grid { grid-template-columns: repeat(2, 1fr); }
.jobs-grid { grid-template-columns: repeat(2, 1fr); }
.faq2 { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr 1fr; row-gap: 36px; }
.cta-banner-grid { grid-template-columns: 1fr; text-align: left; }
.cta-banner .btn { width: 100%; }
}
@media (max-width: 860px) {
.nav-links, .nav-actions .btn { display: none; }
.nav-toggle { display: flex; }
.nav-open .nav-links {
display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
position: absolute; top: 100%; left: 0; right: 0; background: var(--bg);
border-bottom: 1px solid var(--border); padding: 8px 24px 20px; box-shadow: var(--shadow-md);
}
.nav-open .nav-links a { padding: 12px 0; width: 100%; }
.nav-open .nav-actions .btn { display: inline-flex; width: 100%; }
.nav-open .nav-actions {
position: absolute; top: calc(100% + 168px); left: 0; right: 0; padding: 0 24px 20px;
background: var(--bg); border-bottom: 1px solid var(--border);
}
section { padding: 64px 0; }
.hero h1 { font-size: 40px; }
.section-head h2, .cta-banner h2 { font-size: 30px; }
}
@media (max-width: 640px) {
.hero-ctas { flex-direction: column; align-items: stretch; }
.process-grid, .jobs-grid, .footer-grid { grid-template-columns: 1fr; }
.process-card:not(:last-child)::after {
content: ''; position: absolute; left: 32px; bottom: -25px; width: 1px; height: 24px; background: var(--border);
}
.faq2-answer { padding-left: 8px; }
.check-form { padding: 28px 22px; }
.cta-card .btn { width: 100%; text-align: center; }
.eyebrow-row { align-items: flex-start; }
.contact-bubble { padding: 24px 20px; }
.booking-mini-footer { flex-wrap: wrap; }
.booking-mini-footer .btn { width: 100%; }
}
/* ── Contact page: info cards, CTA card, FAQ ────────────────────────── */
.contact-hero { padding: 28px 0 8px; position: relative; }
.contact-hero > * { position: relative; z-index: 1; }
.contact-hero p { font-size: 17px; line-height: 1.6; color: var(--text-muted); max-width: 34em; margin-top: 20px; }
.contact-person { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.contact-person-name { font-size: 15px; font-weight: 700; color: var(--navy); }
.contact-person-role { font-size: 14px; color: var(--text-muted); margin-top: 2px; }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; margin-top: 48px; }
@media (max-width: 980px) {
.contact-layout { grid-template-columns: 1fr; }
}
.calendly-embed-wrap { max-width: 760px; margin: 40px auto 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.calendly-embed-header { padding: 18px 24px 0; }
.calendly-embed-header h3 { font-size: 19px; }
.calendly-embed-header p { font-size: 14px; color: var(--text-muted); margin-top: 4px; }
.booking-h1 { font-size: 40px; margin-top: 6px; }
.booking-sub { font-size: 17px; line-height: 1.6; color: var(--text-muted); max-width: 30em; margin-top: 18px; }
.booking-features { display: grid; margin-top: 32px; max-width: 30em; }
.booking-feature { padding: 18px 0; border-top: 1px solid var(--border); font-size: 16px; font-weight: 600; color: var(--navy); }
.booking-features .booking-feature:last-child { border-bottom: 1px solid var(--border); }
.contact-bubble {
background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
box-shadow: var(--shadow-md); padding: 44px; margin-top: 48px;
}
.contact-bubble .contact-layout { margin-top: 0; }
.booking-mini-card {
background: var(--beige-surface); border: 1px solid var(--beige-border);
border-radius: var(--radius-md); padding: 20px; margin-bottom: 20px; display: grid; gap: 16px;
}
.booking-mini-title { font-size: 16px; font-weight: 700; color: var(--navy); }
.booking-mini-desc { font-size: 14px; color: var(--text-muted); margin-top: 4px; }
.booking-mini-footer {
display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--beige-border);
}
.booking-mini-footer .avatar-placeholder { width: 40px; height: 40px; font-size: 10px; }
.booking-mini-info { flex: 1; min-width: 0; }
.booking-mini-name { font-size: 14px; font-weight: 700; color: var(--navy); }
.booking-mini-role { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.cta-card {
background: transparent; color: var(--text); border-radius: 0;
padding: 0; display: flex; flex-direction: column; gap: 20px;
}
.cta-card h2 { color: var(--navy); font-size: 26px; }
.cta-card ul { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 15px; color: var(--text-muted); }
.cta-card .btn { align-self: flex-start; }
.msg-form { display: grid; gap: 16px; }
.msg-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) {
.msg-form-row { grid-template-columns: 1fr; }
}
.msg-field { display: grid; gap: 6px; }
.msg-field label { font-size: 13px; font-weight: 700; color: var(--navy-ink); }
.msg-form input, .msg-form textarea {
width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm);
font-size: 15px; font-family: inherit; color: var(--text); background: var(--surface); resize: vertical;
}
.msg-form textarea { min-height: 96px; }
.msg-form input:focus, .msg-form textarea:focus { outline: 2px solid var(--navy-ink); outline-offset: 1px; }
.msg-form .btn { width: 100%; }
.info-cards { display: grid; }
.info-card {
display: flex; align-items: center; gap: 16px; padding: 16px 0;
border-bottom: 1px solid var(--border);
}
.info-cards .info-card:last-child { border-bottom: none; }
.badge {
width: 44px; height: 44px; border-radius: 999px; flex: none;
display: flex; align-items: center; justify-content: center;
}
.badge svg { width: 20px; height: 20px; }
.badge-orange { background: color-mix(in srgb, var(--orange) 16%, white); color: var(--orange-text); }
.badge-navy { background: color-mix(in srgb, var(--navy) 10%, white); color: var(--navy); }
.badge-steel { background: color-mix(in srgb, var(--steel) 18%, white); color: var(--steel-text); }
.info-card .info-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.info-card .info-value { font-size: 16px; font-weight: 700; color: var(--navy); margin-top: 2px; }
.info-card a.info-value:hover { color: var(--orange-text); }
.faq-list { display: grid; gap: 12px; max-width: 760px; }
.faq-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 4px 24px; }
.faq-item summary {
cursor: pointer; padding: 20px 0; font-weight: 700; color: var(--navy); font-size: 16px;
list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 22px; line-height: 1; color: var(--orange-text); flex: none; transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding-bottom: 20px; margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.6; }
/* ── Footer social links ─────────────────────────────────────────────── */
.footer-social { display: flex; gap: 10px; margin-top: 4px; }
.footer-social a {
width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2);
display: flex; align-items: center; justify-content: center; color: var(--on-navy-muted); flex: none;
filter: drop-shadow(0 0 0px rgba(232, 98, 44, 0));
transition: color .35s ease, filter .35s ease;
}
.footer-social a:hover {
color: var(--orange);
filter: drop-shadow(0 0 6px rgba(232, 98, 44, .8));
}
.footer-social svg { width: 16px; height: 16px; }
/* ── Floating booking button ─────────────────────────────────────────── */
.float-book {
position: fixed; right: 20px; bottom: 20px; z-index: 500;
display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px;
background: var(--orange); color: var(--navy-ink);
border-radius: 999px;
box-shadow: var(--shadow-md);
transition: background-color .18s ease, transform .12s ease;
}
.float-book:hover { background: var(--orange-hover); transform: translateY(-2px); }
.float-book:active { transform: scale(.96); }
.float-book svg { width: 19px; height: 19px; flex: none; }
@media (prefers-reduced-motion: no-preference) {
.float-book { animation: float-book-pulse 12s ease-in-out infinite; }
}
@keyframes float-book-pulse {
0%, 88%, 100% { box-shadow: var(--shadow-md), 0 0 0 0 rgba(240, 129, 47, 0); }
93% { box-shadow: var(--shadow-md), 0 0 0 7px rgba(240, 129, 47, .3); }
98% { box-shadow: var(--shadow-md), 0 0 0 13px rgba(240, 129, 47, 0); }
}
/* ── Numbered FAQ (Stellencheck page) ────────────────────────────────── */
.faq2 { display: grid; grid-template-columns: 0.9fr 1.3fr; gap: 56px; align-items: start; }
.faq2-count { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); margin-top: 28px; letter-spacing: .02em; }
.faq2-count b { color: var(--navy); font-size: 15px; }
.faq2-item { border-bottom: 1px solid var(--border); border-radius: var(--radius-md); }
.faq2-item summary { list-style: none; display: flex; align-items: center; gap: 20px; padding: 22px 8px; cursor: pointer; }
.faq2-item summary::-webkit-details-marker { display: none; }
.faq2-num { font-family: var(--font-mono); font-size: 14px; color: var(--orange-text); flex: none; width: 28px; }
.faq2-question { font-size: 18px; font-weight: 700; flex: 1; color: var(--navy); }
.faq2-toggle {
width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center; flex: none;
font-size: 17px; color: var(--text-muted); transition: all .18s ease;
}
.faq2-item[open] { background: color-mix(in srgb, var(--orange) 7%, transparent); border-color: transparent; padding-bottom: 12px; }
.faq2-item[open] .faq2-toggle { background: var(--orange); color: #fff; border-color: var(--orange); transform: rotate(45deg); }
.faq2-answer { padding: 0 32px 22px 68px; margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.6; }
/* ── Stellencheck form ───────────────────────────────────────────────── */
.check-form { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px; max-width: 560px; margin: 0 auto; }
.check-field { margin-bottom: 18px; }
.check-field label { display: block; font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.check-field input[type="text"], .check-field input[type="email"], .check-field input[type="tel"] {
width: 100%; padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm);
font-size: 15px; font-family: inherit; color: var(--text); background: var(--bg);
}
.check-field input:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
.check-file { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 20px; text-align: center; background: var(--bg); cursor: pointer; display: block; }
.check-file input[type="file"] { display: none; }
.check-file-label { font-size: 14px; color: var(--text-muted); }
.check-file-label b { color: var(--navy); }
.check-file.has-file { border-style: solid; border-color: var(--orange); }
.check-submit-note { font-size: 13px; color: var(--text-muted); margin-top: 14px; text-align: center; }
.check-form .btn { width: 100%; }
/* ── "Was wir prüfen" cards ──────────────────────────────────────────── */
.check-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
@media (max-width: 980px) { .check-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .check-grid { grid-template-columns: 1fr; } }
.check-card { background: var(--beige-surface); border: 1px solid var(--beige-border); border-radius: var(--radius-md); padding: 28px 24px; }
.check-card .badge { margin-bottom: 6px; }
.check-card h3 { font-size: 17px; margin-top: 18px; }
.check-card p { font-size: 14px; color: var(--text-muted); margin-top: 8px; line-height: 1.55; }
/* ── Stellenanzeigen-Check: live result (score cards + short findings) ── */
.report-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.report-score-card, .report-cat-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px; }
.report-score-card { background: var(--beige-surface); border-color: var(--beige-border); }
.report-card-label { font-size: 13px; font-weight: 700; color: var(--navy); }
.report-score-card .num, .report-cat-card .num { font-family: var(--font-head); font-weight: 800; font-size: 30px; color: var(--navy); margin-top: 10px; display: block; }
.report-score-card .num span, .report-cat-card .num span { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.report-bar { height: 6px; border-radius: 999px; background: var(--surface); margin-top: 12px; overflow: hidden; }
.report-bar-fill { height: 100%; background: var(--orange); border-radius: 999px; transition: width .6s ease; }
.report-card-sub { font-size: 12px; color: var(--text-muted); margin-top: 10px; line-height: 1.5; }
.report-findings { max-width: 720px; margin: 32px auto 0; display: grid; gap: 12px; }
.report-finding { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 20px; }
.report-finding-icon { flex: none; width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; margin-top: 1px; }
.report-finding-icon.is-fail { background: color-mix(in srgb, var(--error) 14%, white); color: var(--error); }
.report-finding-icon.is-partial { background: color-mix(in srgb, var(--warning) 20%, white); color: var(--warning-text); }
.report-finding-title { font-size: 14px; font-weight: 700; color: var(--navy); }
.report-finding-text { font-size: 14px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }
.report-all-good { text-align: center; font-size: 16px; font-weight: 700; color: var(--success); margin-top: 24px; }
.check-error { background: #fff; border: 1px solid var(--beige-border); border-radius: var(--radius-md); padding: 24px; text-align: center; color: var(--text-muted); max-width: 720px; margin: 24px auto 0; }
.report-cta-box { max-width: 560px; margin: 40px auto 0; background: var(--navy); border-radius: var(--radius-lg); padding: 36px; text-align: center; }
.report-cta-box h3 { color: #fff; font-size: 19px; }
.report-cta-box p { color: var(--on-navy-muted); font-size: 14px; line-height: 1.6; margin-top: 8px; }
.report-cta-box .btn { margin-top: 20px; }
.report-email-box {
max-width: 560px; margin: 20px auto 0; background: var(--beige-surface);
border: 1px solid var(--beige-border); border-radius: var(--radius-lg); padding: 32px; text-align: center;
}
.report-email-box h3 { color: var(--navy); font-size: 17px; }
.report-email-box p { color: var(--text-muted); font-size: 14px; line-height: 1.6; margin-top: 8px; }
.report-email-form { display: flex; gap: 10px; margin-top: 18px; }
.report-email-form input {
flex: 1; padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--radius-pill);
font-size: 15px; font-family: inherit; color: var(--text); background: #fff;
}
.report-email-form input:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.report-email-form .btn { flex: none; }
@media (max-width: 560px) { .report-email-form { flex-direction: column; } }
@media (max-width: 860px) { .report-grid { grid-template-columns: repeat(2, 1fr); } }
/* ── Blog ─────────────────────────────────────────────────────────────── */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; margin-top: 40px; }
@media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.blog-card-image {
position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden;
box-shadow: var(--shadow-sm); transition: box-shadow .25s ease, transform .25s ease;
}
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
/* Ties the photography to the brand palette: warm navy shadows, orange highlight. */
.blog-card-image::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(155deg, rgba(232, 98, 44, .16) 0%, transparent 45%, rgba(27, 53, 87, .28) 100%);
mix-blend-mode: multiply; pointer-events: none;
}
.blog-card:hover .blog-card-image { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.blog-card:hover .blog-card-image img { transform: scale(1.04); }
.blog-card-body { padding: 16px 2px 0; display: flex; flex-direction: column; gap: 6px; }
.blog-card-cat { font-size: 12px; color: var(--text-muted); }
.blog-card h3 { font-size: 18px; line-height: 1.32; color: var(--text); font-weight: 700; letter-spacing: normal; }
/* Loading-placeholder colour behind each card's photo, brand-palette per article. */
.bci-1 { background: linear-gradient(125deg, #1B3557 0%, #5C7A99 45%, #E8622C 100%); }
.bci-2 { background: radial-gradient(circle at 30% 30%, #E8622C 0%, #C13A3A 55%, #1B3557 100%); }
.bci-3 { background: linear-gradient(160deg, #8FAFC9 0%, #5C7A99 45%, #1B3557 100%); }
.bci-4 { background: linear-gradient(135deg, #FBF3EC 0%, #E4D9C9 45%, #1B3557 100%); }
.bci-5 { background: radial-gradient(circle at 65% 35%, #F3A876 0%, #E8622C 45%, #1B3557 100%); }
.bci-6 { background: linear-gradient(145deg, #E4D9C9 0%, #E8622C 60%, #5C7A99 100%); }
.article-hero { padding: 64px 0 8px; max-width: 760px; margin: 0 auto; }
.article-meta { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); margin-top: 16px; }
.article-cta { max-width: 760px; margin: 8px auto 64px; background: var(--navy); border-radius: var(--radius-lg); padding: 40px; color: #fff; text-align: center; }
.article-cta h3 { font-size: 22px; color: #fff; }
.article-cta p { color: var(--on-navy-muted); margin-top: 10px; }
.article-cta .btn { margin-top: 20px; }
.article-author { max-width: 760px; margin: 8px auto 64px; background: var(--beige-surface); border: 1px solid var(--beige-border); border-radius: var(--radius-lg); padding: 40px; }
.article-author-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.article-author-eyebrow { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.article-author-contact { color: var(--navy); }
.article-author-contact:hover { color: var(--orange-text); }
.article-author-person { display: flex; align-items: center; gap: 14px; }
.article-author-person .avatar-placeholder { width: 52px; height: 52px; font-size: 16px; }
.article-author-name { font-size: 16px; font-weight: 700; color: var(--navy); }
.article-author-role { font-size: 14px; color: var(--text-muted); margin-top: 2px; }
.article-author-bio { font-size: 15px; line-height: 1.6; color: var(--text-muted); margin-top: 20px; }
.newsletter-box { max-width: 560px; margin: 64px auto 0; text-align: center; }
.newsletter-form { display: flex; gap: 10px; max-width: 420px; margin: 24px auto 0; }
.newsletter-form input {
flex: 1; padding: 13px 18px; border: 1px solid var(--border); border-radius: var(--radius-pill);
font-size: 15px; font-family: inherit; color: var(--text); background: #fff;
}
.newsletter-form input:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
.newsletter-note { font-size: 13px; color: var(--text-muted); margin-top: 14px; }
@media (max-width: 480px) { .newsletter-form { flex-direction: column; } }
/* ── About page: mission + quote ─────────────────────────────────────── */
.about-mission { background: var(--beige-surface); border: 1px solid var(--beige-border); border-radius: var(--radius-lg); padding: 40px; height: 100%; }
.about-mission h2 { font-size: 26px; margin-top: 14px; }
.about-mission p { color: var(--text-muted); font-size: 16px; line-height: 1.6; margin-top: 16px; }
.about-mission-meta { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.about-quote { background: var(--orange); border-radius: var(--radius-lg); padding: 40px; color: var(--navy-ink); display: flex; align-items: center; height: 100%; }
.about-quote blockquote { font-size: 24px; font-weight: 700; line-height: 1.35; margin: 0; color: var(--navy-ink); }
/* ── About page: founder spotlight ───────────────────────────────────── */
.founder-card {
max-width: 380px; margin: 40px auto 0; background: var(--beige-surface); border: 1px solid var(--beige-border); border-radius: var(--radius-md);
overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .2s ease;
}
.founder-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.founder-photo { aspect-ratio: 1/1; background: var(--beige-surface); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.founder-card:hover .founder-photo img { transform: scale(1.035); }
.founder-photo .avatar-placeholder { width: 100px; height: 100px; font-size: 30px; }
.founder-card-body { padding: 26px 28px 30px; }
.founder-card h3 { font-size: 19px; }
.founder-card .role { color: var(--orange-text); font-weight: 700; font-size: 14px; margin-top: 2px; }
.founder-card p { font-size: 15px; color: var(--text-muted); margin-top: 12px; line-height: 1.55; }
/* ── About page: values grid ─────────────────────────────────────────── */
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
@media (max-width: 980px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .values-grid { grid-template-columns: 1fr; } }
.value-card { background: var(--beige-surface); border: 1px solid var(--beige-border); border-radius: var(--radius-md); padding: 28px 24px; }
.value-card.value-highlight { background: var(--orange); border-color: transparent; color: var(--navy-ink); display: flex; flex-direction: column; justify-content: space-between; }
.value-stat { font-family: var(--font-mono); font-size: 30px; font-weight: 700; }
.value-card h3 { font-size: 17px; margin-top: 18px; }
.value-card.value-highlight h3 { color: var(--navy-ink); }
.value-card p { font-size: 14px; color: var(--text-muted); margin-top: 8px; line-height: 1.55; }
.value-card.value-highlight p { color: var(--navy-ink); opacity: .85; }
/* ── Nav logo hover micro-interaction ─────────────────────────────────── */
.brand svg path[fill="#E8622C"] {
transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
transform-origin: 377px 300px;
}
.brand:hover svg path[fill="#E8622C"] { transform: translate(5px, -4px) rotate(4deg); }
/* ── Legal pages (Impressum / Datenschutz) ──────────────────────────── */
.legal-hero { padding: 28px 0 24px; border-bottom: 1px solid var(--border); position: relative; }
.legal-hero h1 { font-size: 40px; }
.booking-top { position: relative; }
.legal-updated { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-top: 12px; }
.prose { max-width: 760px; padding: 56px 0 96px; }
.prose h2 { font-size: 22px; margin-top: 44px; margin-bottom: 14px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 16px; line-height: 1.65; color: var(--text-muted); }
.prose p { margin-bottom: 16px; }
.prose ul { margin: 0 0 16px; padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--text); }
.prose a { font-weight: 600; }
.prose table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted); }
.prose th { color: var(--navy); font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }