/* ---------- Container & grid ---------- */ .container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); } .grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 3vw, 2.5rem); } section { position: relative; } .section--pad-s { padding-block: var(--space-s); } .section--pad-m { padding-block: var(--space-m); } .section--pad-l { padding-block: var(--space-l); } .section--pad-xl { padding-block: var(--space-xl); } .section--alt { background: var(--bg-alt); } .section-head { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); } .section-head--right { margin-left: auto; text-align: right; } .section-head--right p { margin-left: auto; } /* ---------- Site header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: oklch(97% 0.015 80 / 0.92); border-bottom: 1px solid var(--line); transition: padding 0.25s ease-out, box-shadow 0.25s ease-out; } @media (min-width: 900px) { .site-header { backdrop-filter: blur(10px); } } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.35rem; transition: padding 0.25s ease-out; } .site-header.is-compact .site-header__inner { padding-block: 0.7rem; } .site-header.is-compact { box-shadow: var(--shadow-soft); } .site-logo { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--primary); display: flex; align-items: center; gap: 0.6rem; line-height: 1.2; white-space: nowrap; } .site-logo img { max-height: 48px; width: auto; } .primary-nav { display: none; } @media (min-width: 900px) { .primary-nav { display: flex; } .primary-nav ul { display: flex; align-items: center; gap: clamp(1.25rem, 2vw, 2.25rem); } .primary-nav a { font-weight: 500; font-size: 0.98rem; padding-block: 0.4rem; position: relative; } .primary-nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--accent-strong); transition: right 0.2s ease-out; } .primary-nav a:hover::after, .primary-nav a:focus-visible::after { right: 0; } } .header-actions { display: flex; align-items: center; gap: 1rem; } .header-actions .header-cta { display: none; } @media (min-width: 900px) { .header-actions .header-cta { display: inline-flex; } } .burger { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius); flex: 0 0 auto; } @media (min-width: 900px) { .burger { display: none; } } .burger .icon-close { display: none; } .burger[aria-expanded="true"] .icon-menu { display: none; } .burger[aria-expanded="true"] .icon-close { display: block; } /* ---------- Mobile drawer (sibling of

, direct child of ) ---------- */ .drawer { position: fixed; inset: 0; z-index: 999; visibility: hidden; } .drawer__overlay { position: absolute; inset: 0; background: oklch(22% 0.02 165 / 0.45); opacity: 0; transition: opacity 0.25s ease-out; } .drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(22rem, 86vw); background: var(--bg); box-shadow: var(--shadow-lift); padding: 1.5rem 1.75rem 2.5rem; overflow-y: auto; transform: translateX(100%); transition: transform 0.3s ease-out; display: flex; flex-direction: column; gap: 2rem; } .drawer.is-open { visibility: visible; } .drawer.is-open .drawer__overlay { opacity: 1; } .drawer.is-open .drawer__panel { transform: translateX(0); } .drawer__head { display: flex; justify-content: flex-end; } .drawer__close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); } .drawer-nav ul { display: flex; flex-direction: column; gap: 0.25rem; } .drawer-nav a { display: block; padding: 0.85rem 0.25rem; font-family: var(--font-display); font-size: 1.3rem; color: var(--primary); border-bottom: 1px solid var(--line); } .drawer-contact { display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.95rem; } .drawer-contact a { display: flex; align-items: center; gap: 0.6rem; } @media (prefers-reduced-motion: reduce) { .drawer__overlay, .drawer__panel, .primary-nav a::after { transition: none; } } body.drawer-open { overflow: hidden; } /* ---------- Split hero ---------- */ .hero { display: grid; grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); min-height: 78vh; } } .hero__text { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; padding: var(--space-l) clamp(1.25rem, 5vw, 4.5rem); } .hero__eyebrow { font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; color: var(--accent-strong); } .hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; } .hero__media { position: relative; min-height: 22rem; overflow: hidden; } .hero__media img { width: 100%; height: 100%; object-fit: cover; } /* ---------- Wide alternating rows (Leistungen) ---------- */ .wide-row { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; } @media (min-width: 860px) { .wide-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); } .wide-row--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .wide-row--reverse .wide-row__media { order: 2; } .wide-row--reverse .wide-row__body { order: 1; } } .wide-row__media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); } .wide-row__media img { width: 100%; height: 100%; object-fit: cover; } .wide-row + .wide-row { margin-top: clamp(3rem, 6vw, 5.5rem); padding-top: clamp(3rem, 6vw, 5.5rem); border-top: 1px solid var(--line); } /* ---------- Full-bleed break (slider) ---------- */ .full-bleed { width: 100vw; margin-left: calc(50% - 50vw); } /* ---------- Footer ---------- */ .site-footer { background: var(--primary); color: oklch(97% 0.015 80 / 0.92); padding-block: var(--space-m) var(--space-s); } .site-footer a { color: inherit; } .site-footer h3 { color: var(--white); font-size: 1.1rem; margin-bottom: 1rem; } .footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; } @media (min-width: 700px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } } .footer-grid ul { display: flex; flex-direction: column; gap: 0.6rem; } .footer-grid a:hover { color: var(--accent); } .footer-contact { display: flex; flex-direction: column; gap: 0.7rem; } .footer-contact a { display: flex; align-items: center; gap: 0.6rem; } .footer-bottom { margin-top: var(--space-s); padding-top: 1.5rem; border-top: 1px solid oklch(97% 0.015 80 / 0.18); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; font-size: 0.85rem; opacity: 0.85; } .footer-bottom ul { display: flex; gap: 1.5rem; flex-wrap: wrap; } /* ---------- Page (inner pages) ---------- */ .page-hero { padding-block: var(--space-m) var(--space-s); border-bottom: 1px solid var(--line); } .page-hero__eyebrow { font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; color: var(--accent-strong); margin-bottom: 0.75rem; } .entry-content { max-width: var(--measure); } .entry-content > * + * { margin-top: 1.35em; } .entry-content h2 { margin-top: 2.2em; } .entry-content h3 { margin-top: 1.8em; } .entry-content ul, .entry-content ol { padding-left: 1.4em; list-style: disc; } .entry-content ol { list-style: decimal; } .entry-content li + li { margin-top: 0.5em; } @media (max-width: 900px) { .grid-12 { grid-template-columns: repeat(4, 1fr); } .hero__text { padding-block: var(--space-m); } } @media (max-width: 600px) { .footer-bottom { flex-direction: column; } }