/* ========================================================================== DESIGNSYSTEM · Bau-, Montage- & Objektservice -------------------------------------------------------------------------- Gestaltungsidee „Technische Zeichnung": Die Website ist aufgebaut wie ein sauberer Bauplan – sichtbare Struktur, klare Bemaßung, Signalorange nur dort, wo gehandelt werden soll. Schrift Archivo (Display, Signaletik) · IBM Plex Sans (Lesetext, Ingenieurs-DNA) · IBM Plex Mono (technische Marker) Farbe Graphit als Träger, Betonweiß als Grund, Signalorange als Handlungsfarbe. Alle Kombinationen mit tools/kontrast.py geprüft. ========================================================================== */ /* fonts.css wird im separat eingebunden (vermeidet den zusätzlichen Roundtrip eines @import und erlaubt das Vorladen der Schriftdateien). */ :root { /* ---- Flächen ---- */ --ground: #F1F2F3; /* Seitengrund, Betonweiß */ --ground-warm: #EAECEE; /* alternierende Sektion */ --surface: #FFFFFF; /* Karten, Formulare */ --graphite: #1E2328; /* dunkle Flächen, Überschriften */ --graphite-2: #2B3138; /* erhöhte dunkle Fläche */ /* ---- Schriftfarben ---- */ --ink: #1E2328; --ink-soft: #57636E; --ink-invert: #FFFFFF; --ink-invert-soft: #C9D2DA; /* ---- Signal ---- */ --signal: #E2620E; /* hell: Grafik, Icons auf Dunkel, Streifen */ --signal-ink: #A9470A; /* dunkel: Buttons, Textlinks auf Hell */ --signal-deep: #8E3B07; /* Hover */ --signal-weich:#FBEEE4; /* getönte Fläche */ /* ---- Linien ---- */ --line: #D9DDE1; /* dekorative Hairlines */ --line-stark: #6F7C87; /* Rahmen bedienbarer Elemente */ --line-dunkel: #3A424A; /* Linien auf dunklem Grund */ /* ---- Rückmeldungen ---- */ --gut: #15803D; --gut-bg: #E9F6EE; --warn-bg: #FDF4E3; --fehler: #B3261E; --fehler-bg:#FCEDEC; /* ---- Typografie ---- */ --schrift-display: 'Archivo', 'Arial Narrow', Arial, sans-serif; --schrift-text: 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --schrift-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; /* ---- Maße ---- */ --wrap: 1180px; --wrap-eng: 760px; --radius: 3px; /* technisch, kantig – keine weichen Kacheln */ --radius-gross: 5px; --kopf-hoehe: 74px; /* ---- Tiefe (sehr sparsam, Papier statt Plastik) ---- */ --schatten: 0 1px 2px rgba(30, 35, 40, .06), 0 4px 14px rgba(30, 35, 40, .06); --schatten-hoch: 0 2px 4px rgba(30, 35, 40, .08), 0 14px 34px rgba(30, 35, 40, .12); } /* ========================================================================== Grundlagen ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 16px); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--schrift-text); font-size: 1.0625rem; line-height: 1.65; font-feature-settings: "kern" 1; padding-bottom: calc(66px + env(safe-area-inset-bottom)); } body.nav-open { overflow: hidden; } img, svg { max-width: 100%; height: auto; vertical-align: middle; } .icon { flex: none; } h1, h2, h3, h4 { font-family: var(--schrift-display); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); font-weight: 800; letter-spacing: -0.032em; } h2 { font-size: clamp(1.55rem, 3.4vw, 2.25rem); } h3 { font-size: 1.125rem; letter-spacing: -0.012em; } p { margin: 0 0 1.05em; } a { color: var(--signal-ink); text-underline-offset: .18em; text-decoration-thickness: from-font; } a:hover { color: var(--signal-deep); } ul, ol { padding-left: 1.25em; } strong, b { font-weight: 600; } ::selection { background: var(--signal); color: #fff; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skiplink { position: absolute; left: -999px; top: 0; z-index: 300; background: var(--graphite); color: #fff; padding: 12px 20px; font-weight: 600; } .skiplink:focus { left: 10px; top: 10px; } :focus-visible { outline: 3px solid var(--graphite); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(226, 98, 14, .35); border-radius: 2px; } /* Wiederkehrendes Detail: Warnstreifen – bewusst nur an zwei Stellen */ .streifen { height: 6px; background: repeating-linear-gradient( -45deg, var(--signal) 0 14px, var(--graphite) 14px 28px ); } /* ========================================================================== Typografische Bausteine ========================================================================== */ .eyebrow { font-family: var(--schrift-mono); font-weight: 500; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--signal-ink); display: flex; align-items: center; gap: 12px; margin: 0 0 14px; } .eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); max-width: 120px; } .eyebrow--hell { color: var(--signal); } .eyebrow--hell::after { background: var(--line-dunkel); } .lead { font-size: 1.14rem; line-height: 1.6; color: var(--ink-soft); max-width: 55ch; } /* ========================================================================== Kopfbereich ========================================================================== */ .siteheader { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--line); } .siteheader__row { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: var(--kopf-hoehe); position: relative; /* Bezugsrahmen für das Leistungs-Panel */ } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); } .brand__mark { display: grid; place-items: center; width: 42px; height: 42px; background: var(--graphite); color: var(--signal); border-radius: var(--radius); position: relative; } .brand__mark::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--signal); } .brand__text { display: flex; flex-direction: column; line-height: 1.15; } .brand__text strong { font-family: var(--schrift-display); font-weight: 800; font-size: 1.02rem; letter-spacing: -0.02em; } .brand__text small { font-family: var(--schrift-mono); font-weight: 500; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-top: 3px; white-space: nowrap; } .navtoggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 0 10px; background: none; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; } .navtoggle span { height: 2px; background: var(--graphite); border-radius: 2px; } .nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .nav__link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 11px; border-radius: var(--radius); font-family: var(--schrift-text); font-size: .94rem; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; background: none; border: 0; cursor: pointer; position: relative; } .nav__link::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 2px; background: var(--signal); scale: 0 1; transform-origin: left; transition: scale .18s ease; } .nav__link:hover::after, .nav__link[aria-expanded="true"]::after { scale: 1 1; } .nav__link:hover { color: var(--ink); } .nav__item--drop { position: static; } .nav__drop-btn::before { content: ""; margin-right: 2px; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -2px; order: 2; opacity: .55; } .dropdown { display: none; position: absolute; right: 0; left: auto; top: calc(100% + 6px); width: max-content; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-gross); box-shadow: var(--schatten-hoch); padding: 22px 24px 18px; z-index: 110; grid-template-columns: repeat(4, minmax(146px, 1fr)); gap: 6px 26px; } .dropdown::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 10px; } .dropdown::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--signal); border-radius: var(--radius-gross) var(--radius-gross) 0 0; } .nav__item--drop.open .dropdown { display: grid; } .dropdown__head { font-family: var(--schrift-mono); font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 4px 0 8px; } .dropdown__col a { display: block; padding: 7px 10px; border-radius: var(--radius); text-decoration: none; color: var(--ink); font-size: .94rem; font-weight: 500; border-left: 2px solid transparent; } .dropdown__col a:hover { background: var(--ground); border-left-color: var(--signal); color: var(--ink); } .dropdown__all { grid-column: 1 / -1; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 600; text-decoration: none; color: var(--signal-ink); display: inline-flex; align-items: center; gap: 8px; font-size: .94rem; } .headertel { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 10px; padding: 6px 12px; border-radius: var(--radius); text-decoration: none; color: var(--ink); line-height: 1.2; border: 1px solid var(--line); } .headertel:hover { border-color: var(--signal); color: var(--ink); } .headertel .icon { grid-row: 1 / 3; color: var(--signal-ink); } .headertel__num { grid-column: 2; font-family: var(--schrift-display); font-weight: 700; font-size: 1rem; white-space: nowrap; } .headertel__zeit { grid-column: 2; font-family: var(--schrift-mono); font-size: .62rem; letter-spacing: .06em; color: var(--ink-soft); white-space: nowrap; } /* ========================================================================== Brotkrumen ========================================================================== */ .breadcrumb { background: var(--surface); border-bottom: 1px solid var(--line); } .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 11px 0; font-family: var(--schrift-mono); font-size: .72rem; letter-spacing: .04em; } .breadcrumb li + li::before { content: "/"; margin: 0 9px; color: var(--line-stark); } .breadcrumb a { color: var(--ink-soft); text-decoration: none; } .breadcrumb a:hover { color: var(--signal-ink); text-decoration: underline; } .breadcrumb [aria-current] { color: var(--ink); font-weight: 500; } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; background: var(--graphite); color: var(--ink-invert); overflow: hidden; border-bottom: 3px solid var(--signal); } /* Bauplan-Raster als reines CSS – kein Bild, kein Request */ .hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(120% 100% at 78% 0%, #000 20%, transparent 72%); pointer-events: none; } .hero::after { content: ""; position: absolute; right: -160px; top: -140px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(226, 98, 14, .22) 0%, transparent 62%); pointer-events: none; } .hero .wrap { position: relative; z-index: 1; } .hero h1 { color: #fff; margin-bottom: .28em; max-width: 20ch; } .hero--sub { padding: 52px 0 46px; } .hero--home { padding: 72px 0 62px; } .hero__intro { font-size: 1.14rem; line-height: 1.62; max-width: 58ch; color: var(--ink-invert-soft); } /* Zweispaltiger Aufmacher der Startseite */ .hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); gap: 56px; align-items: start; } .hero__grid h1 { max-width: 15ch; } .hero__panel { background: rgba(255, 255, 255, .05); border: 1px solid var(--line-dunkel); border-top: 3px solid var(--signal); border-radius: var(--radius); padding: 26px 26px 22px; backdrop-filter: blur(2px); } .hero__panel h2 { font-size: .74rem; font-family: var(--schrift-mono); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--signal); margin: 0 0 16px; } .hero__panel ul { list-style: none; margin: 0; padding: 0; display: grid; } .hero__panel li + li { border-top: 1px solid var(--line-dunkel); } .hero__panel a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; text-decoration: none; color: #E8EDF1; font-weight: 500; font-size: .97rem; } .hero__panel a:hover { color: var(--signal); } .hero__panel a .icon { color: var(--signal); opacity: .55; transition: opacity .15s ease, translate .15s ease; } .hero__panel a:hover .icon { opacity: 1; translate: 3px 0; } .hero__panel__foot { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line-dunkel); } .hero__panel__foot a { font-family: var(--schrift-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--signal); padding: 10px 0; min-height: 44px; } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .hero__facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 30px 0 0; padding: 20px 0 0; list-style: none; border-top: 1px solid var(--line-dunkel); color: var(--ink-invert-soft); font-size: .93rem; } .hero__facts li { display: inline-flex; align-items: center; gap: 9px; } .hero__facts .icon { color: var(--signal); } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 24px; min-height: 50px; font-family: var(--schrift-text); font-size: 1rem; font-weight: 600; border: 2px solid transparent; border-radius: var(--radius); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s ease, color .15s ease, border-color .15s ease, translate .15s ease; } .btn:hover { translate: 0 -1px; } .btn--primary { background: var(--signal-ink); color: #fff; } .btn--primary:hover { background: var(--signal-deep); color: #fff; } .btn--wa { background: #157F43; color: #fff; } .btn--wa:hover { background: #106434; color: #fff; } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-stark); } .btn--ghost:hover { background: var(--graphite); border-color: var(--graphite); color: #fff; } .btn--light { background: #fff; color: var(--graphite); } .btn--light:hover { background: var(--ground); color: var(--graphite); } .btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); } .btn--ghost-light:hover { background: rgba(255, 255, 255, .12); color: #fff; } .btn--small { padding: 9px 16px; min-height: 42px; font-size: .93rem; } /* ========================================================================== Sektionen ========================================================================== */ .section { padding: 68px 0; } .section--alt { background: var(--ground-warm); } .section--hell { background: var(--surface); } /* Sichtbare Fuge, wenn zwei gleichfarbige Sektionen aufeinander folgen */ .section + .section { border-top: 1px solid var(--line); } /* Absätze direkt in einer Sektion behalten ein lesbares Textmaß. Hinweis: 1ch = Breite der Ziffer „0", die in IBM Plex Sans breiter ist als der Durchschnittsbuchstabe. 55ch ergeben rund 75 Zeichen pro Zeile. */ .section > .wrap > p { max-width: 55ch; } .section__sub { color: var(--ink-soft); max-width: 55ch; font-size: 1.05rem; margin-top: -.3em; } /* ========================================================================== Leistungskarten ========================================================================== */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; margin-top: 30px; } .card { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-gross); text-decoration: none; color: var(--ink); position: relative; overflow: hidden; transition: border-color .16s ease, box-shadow .16s ease, translate .16s ease; } .card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--signal); scale: 1 0; transform-origin: top; transition: scale .2s ease; } a.card:hover { border-color: var(--line-stark); box-shadow: var(--schatten); translate: 0 -2px; } a.card:hover::before { scale: 1 1; } .card__icon { display: grid; place-items: center; width: 46px; height: 46px; background: var(--ground); color: var(--graphite); border-radius: var(--radius); transition: background-color .16s ease, color .16s ease; } a.card:hover .card__icon { background: var(--graphite); color: var(--signal); } .card__title { margin: 6px 0 0; font-size: 1.1rem; } .card__text { color: var(--ink-soft); font-size: .95rem; margin: 0; flex: 1; } .card__more { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-family: var(--schrift-mono); font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--signal-ink); } /* ========================================================================== Checkliste ========================================================================== */ .checklist { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2px 32px; } .checklist li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); } .checklist .icon { color: var(--signal-ink); margin-top: 3px; } /* ========================================================================== Ablauf ========================================================================== */ .steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: 0; border-top: 1px solid var(--line); } .step { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 26px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--surface); position: relative; } .step:last-child { border-right: 0; } .step__num { font-family: var(--schrift-mono); font-size: .78rem; font-weight: 500; letter-spacing: .12em; color: var(--signal-ink); display: inline-flex; align-items: center; gap: 10px; } .step__num::after { content: ""; width: 22px; height: 2px; background: var(--signal); } .step h3 { margin: 0 0 .25em; font-size: 1.05rem; } .step p { margin: 0; color: var(--ink-soft); font-size: .94rem; } /* ========================================================================== Hinweiskasten (rechtliche Abgrenzung) ========================================================================== */ .notice { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--signal); border-radius: var(--radius); padding: 26px 28px; } .notice__title { display: flex; align-items: center; gap: 12px; font-size: 1.15rem; margin-bottom: .55em; } .notice__title .icon { color: var(--signal-ink); } .notice__body { color: var(--ink-soft); } .notice__body p:last-child { margin-bottom: 0; } .notice__body strong { color: var(--ink); } /* ========================================================================== FAQ ========================================================================== */ .faq { margin-top: 26px; max-width: 900px; border-top: 1px solid var(--line); } .faq__item { border-bottom: 1px solid var(--line); background: transparent; } .faq__item summary { padding: 20px 52px 20px 0; cursor: pointer; position: relative; list-style: none; font-family: var(--schrift-display); font-weight: 700; font-size: 1.06rem; letter-spacing: -0.01em; color: var(--ink); } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary:hover { color: var(--signal-ink); } .faq__item summary::after, .faq__item summary::before { content: ""; position: absolute; right: 8px; top: 50%; background: var(--signal-ink); transition: rotate .2s ease, opacity .2s ease; } .faq__item summary::after { width: 15px; height: 2px; translate: 0 -50%; } .faq__item summary::before { width: 2px; height: 15px; right: 14px; translate: 0 -50%; } .faq__item[open] summary::before { rotate: 90deg; opacity: 0; } .faq__a { padding: 0 44px 22px 0; color: var(--ink-soft); max-width: 62ch; } .faq__a p:last-child { margin: 0; } /* ========================================================================== Chips / Einsatzgebiet ========================================================================== */ .chips { list-style: none; margin: 20px 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 14px; font-size: .93rem; font-weight: 500; } .chip .icon { color: var(--signal-ink); } /* Verlinkte Chips: die gesamte Fläche ist klickbar (Touch-Ziel ≥ 44 px) */ .chip:has(a) { padding: 0; } .chip a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 14px; text-decoration: none; color: var(--ink); } .chip:has(a):hover { border-color: var(--signal); } .chip a:hover { color: var(--signal-ink); } .chips--big .chip { padding: 10px 16px; font-size: .97rem; } .chips__hint { color: var(--ink-soft); font-size: .92rem; margin: 0 0 10px; } /* ========================================================================== Verweiskarten ========================================================================== */ .links { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 14px; margin-top: 28px; } .link-card { display: flex; flex-direction: column; gap: 5px; padding: 22px 22px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-gross); text-decoration: none; color: var(--ink); transition: border-color .16s ease, box-shadow .16s ease; } .link-card:hover { border-color: var(--line-stark); box-shadow: var(--schatten); } .link-card strong { font-family: var(--schrift-display); font-weight: 700; font-size: 1.04rem; letter-spacing: -0.012em; } .link-card span { color: var(--ink-soft); font-size: .93rem; } .link-card em { font-style: normal; margin-top: 6px; font-family: var(--schrift-mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--signal-ink); display: inline-flex; align-items: center; gap: 6px; } .textlink { font-weight: 600; color: var(--signal-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border-bottom: 2px solid var(--signal); padding-bottom: 2px; } .textlink:hover { color: var(--signal-deep); border-color: var(--signal-deep); } /* ========================================================================== Zwischen-CTA ========================================================================== */ .cta-inline { background: var(--surface); border-block: 1px solid var(--line); padding: 26px 0; } .cta-inline__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 26px; } .cta-inline__text { margin: 0; font-family: var(--schrift-display); font-weight: 700; font-size: 1.16rem; letter-spacing: -0.015em; color: var(--ink); } .cta-inline__btns { display: flex; flex-wrap: wrap; gap: 10px; } /* ========================================================================== Abschluss-CTA ========================================================================== */ .cta-final { position: relative; background: var(--graphite-2); color: var(--ink-invert-soft); padding: 0 0 66px; } .cta-final::before { content: ""; display: block; height: 6px; margin-bottom: 66px; background: repeating-linear-gradient(-45deg, var(--signal) 0 14px, var(--graphite) 14px 28px); } .cta-final h2 { color: #fff; max-width: 22ch; } .cta-final p { max-width: 58ch; } .cta-final__hint { display: flex; align-items: flex-start; gap: 10px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-dunkel); color: var(--ink-invert-soft); font-size: .93rem; max-width: 60ch; } .cta-final__hint .icon { color: var(--signal); flex: none; margin-top: 2px; } /* ========================================================================== Zwei-Spalten-Text mit Infobox ========================================================================== */ .split { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 46px; align-items: start; } .split > div > h2:first-child { margin-top: 0; } .infobox { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--graphite); border-radius: var(--radius); padding: 26px 24px; } .infobox h3 { margin-top: 1.6em; font-size: 1.02rem; } .infobox > h3:first-child { margin-top: 0; } .infobox ul { margin: 0; padding-left: 1.15em; color: var(--ink-soft); } .infobox li { margin-bottom: .38em; } .infobox p { color: var(--ink-soft); font-size: .95rem; } /* ========================================================================== Formulare ========================================================================== */ .form { display: grid; gap: 20px; max-width: 660px; } .form label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .97rem; } .form input, .form select, .form textarea { width: 100%; padding: 13px 15px; min-height: 50px; font: inherit; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-stark); border-radius: var(--radius); } .form textarea { min-height: 148px; resize: vertical; } /* Dateifeld an die uebrigen Felder angleichen – der native Button faellt sonst heraus */ .form input[type="file"] { padding: 9px 10px; cursor: pointer; } .form input[type="file"]::file-selector-button { margin-right: 14px; padding: 9px 16px; min-height: 0; font: inherit; font-weight: 600; font-size: .92rem; line-height: 1.2; color: var(--ink); background: var(--ground-warm); border: 1.5px solid var(--line-stark); border-radius: var(--radius); cursor: pointer; } .form input[type="file"]:hover::file-selector-button { background: var(--surface); border-color: var(--graphite); } .form input:focus, .form select:focus, .form textarea:focus { border-color: var(--graphite); outline: 3px solid var(--graphite); outline-offset: 1px; box-shadow: none; } .form__hint { color: var(--ink-soft); font-size: .88rem; margin: 6px 0 0; max-width: 56ch; } .form__error { color: var(--fehler); font-size: .88rem; font-weight: 600; margin: 6px 0 0; } .form [aria-invalid="true"] { border-color: var(--fehler); } .form__hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } .alert { padding: 16px 20px; border-radius: var(--radius); margin-bottom: 22px; border: 1px solid; } .alert--ok { background: var(--gut-bg); border-color: #A6D8BB; color: #14532D; } .alert--err { background: var(--fehler-bg); border-color: #E9AFAB; color: #7F1D1D; } .alert--warn { background: #FDF4E3; border-color: #D3AC5C; color: #6B4708; } .alert ul { margin: 8px 0 0; padding-left: 20px; } .alert p { margin: 8px 0 0; } /* ========================================================================== Fließtext (Ratgeber) ========================================================================== */ /* Wichtig: .prose verkleinert NICHT den Container (sonst zentriert .wrap den schmalen Block und der Text bekommt eine eigene, versetzte linke Kante). Stattdessen wird das Textmaß der einzelnen Elemente begrenzt. */ .prose { font-size: 1.09rem; } .prose > * { max-width: var(--wrap-eng); } /* Tabellen bleiben im Satzspiegel des Textes und scrollen bei Bedarf innen, statt als zweite, weiter rechts endende Kante aus der Seite auszubrechen. */ .prose > .tablewrap { max-width: var(--wrap-eng); } .prose h2 { margin-top: 1.9em; } .prose h3 { margin-top: 1.5em; font-size: 1.12rem; } .prose > :first-child { margin-top: 0; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li { margin-bottom: .45em; } .prose .tablewrap { overflow-x: auto; margin: 1.4em 0; } .prose table { border-collapse: collapse; width: 100%; font-size: .96rem; } .prose th, .prose td { border-bottom: 1px solid var(--line); padding: 12px 14px; text-align: left; } .prose th { background: var(--surface); font-family: var(--schrift-mono); font-weight: 500; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 2px solid var(--line-stark); } .artikel-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 30px; padding: 0 0 18px; border-bottom: 1px solid var(--line); font-family: var(--schrift-mono); font-size: .74rem; letter-spacing: .05em; color: var(--ink-soft); } .artikel-meta span { display: inline-flex; align-items: center; gap: 7px; } .artikel-meta .icon { color: var(--signal-ink); } .quellen { margin-top: 44px; padding: 24px 26px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--graphite); border-radius: var(--radius); } .quellen h2 { margin: 0 0 12px; font-size: .76rem; font-family: var(--schrift-mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); } .quellen ul { margin: 0 0 14px; padding-left: 1.15em; font-size: .93rem; } .quellen li { margin-bottom: .4em; } .quellen p { margin: 0; font-size: .86rem; color: var(--ink-soft); } .prose blockquote { border-left: 4px solid var(--signal); margin: 1.4em 0; padding: 6px 0 6px 20px; color: var(--ink-soft); font-size: 1.05rem; } /* ========================================================================== Fußbereich ========================================================================== */ .sitefooter { background: var(--graphite); color: var(--ink-invert-soft); font-size: .95rem; } .sitefooter a { color: #E6EAEE; text-decoration: none; } .sitefooter a:hover { color: var(--signal); } .sitefooter__grid { display: grid; grid-template-columns: 2.1fr 1fr 1fr 1fr; gap: 40px; padding-top: 56px; padding-bottom: 38px; } .sitefooter__brand { font-family: var(--schrift-display); font-weight: 800; font-size: 1.16rem; color: #fff; margin-bottom: .5em; letter-spacing: -0.02em; } .sitefooter__head { font-family: var(--schrift-mono); font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--signal); margin: 0 0 14px; } .sitefooter ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .sitefooter__nap { font-style: normal; line-height: 1.85; } .sitefooter__bottom { border-top: 1px solid var(--line-dunkel); padding-top: 18px; padding-bottom: 22px; font-family: var(--schrift-mono); font-size: .72rem; letter-spacing: .05em; color: #8595A2; } /* ========================================================================== Mobile Kontaktleiste ========================================================================== */ .mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; display: grid; grid-template-columns: 1fr 1fr 1fr; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -2px 18px rgba(30, 35, 40, .13); padding-bottom: env(safe-area-inset-bottom); } .mobilebar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 10px 4px 12px; text-decoration: none; font-family: var(--schrift-mono); font-size: .66rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--graphite); border-right: 1px solid var(--line); } .mobilebar a:last-child { border-right: 0; } .mobilebar a:nth-child(2) { color: #106434; } .mobilebar__cta { background: var(--signal-ink); color: #fff !important; } /* ========================================================================== Responsiv ========================================================================== */ @media (max-width: 1279px) { .navtoggle { display: flex; } .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--schatten-hoch); max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); overflow-y: auto; } .nav.open { display: block; } .nav__list { flex-direction: column; align-items: stretch; padding: 14px 20px 22px; gap: 0; } .nav__item { border-bottom: 1px solid var(--line); } .nav__item:last-child, .nav__item--cta, .nav__item--tel { border-bottom: 0; } .nav__link { width: 100%; justify-content: space-between; padding: 15px 4px; font-size: 1.04rem; } .nav__link::after { display: none; } .nav__drop-btn::before { order: 2; } .dropdown { position: static; min-width: 0; width: auto; max-width: none; display: none; grid-template-columns: 1fr; box-shadow: none; border: 0; border-left: 2px solid var(--signal); border-radius: 0; padding: 2px 0 12px 16px; margin: 0 0 10px; } .dropdown::before, .dropdown::after { display: none; } .nav__item--drop.open .dropdown { display: grid; } .dropdown__col a { padding: 12px 8px; min-height: 46px; display: flex; align-items: center; } .nav__item--tel { margin-top: 14px; } .headertel { width: 100%; justify-content: center; } .nav__item--cta { margin-top: 12px; } .nav__item--cta .btn { width: 100%; } .split { grid-template-columns: 1fr; gap: 34px; } .dropdown__all { margin-top: 6px; } .hero__grid { grid-template-columns: 1fr; gap: 38px; } .hero__grid h1 { max-width: 18ch; } } @media (max-width: 860px) { .sitefooter__grid { grid-template-columns: 1fr 1fr; gap: 32px; } .steps { grid-template-columns: 1fr 1fr; } .step { border-right: 1px solid var(--line); } .step:nth-child(2n) { border-right: 0; } } @media (max-width: 620px) { .wrap { padding: 0 18px; } .brand__text small { display: none; } .hero--home { padding: 52px 0 46px; } .hero--sub { padding: 38px 0 34px; } .hero__cta .btn { width: 100%; } .section { padding: 48px 0; } .sitefooter__grid { grid-template-columns: 1fr; gap: 30px; } .steps { grid-template-columns: 1fr; } .step { border-right: 0; } .cta-inline__btns { width: 100%; } .cta-inline__btns .btn { flex: 1; } .faq__item summary { font-size: 1rem; } } @media (min-width: 1280px) { .mobilebar { display: none; } body { padding-bottom: 0; } /* Die waagerechte Hauptnavigation muss zusammen mit Wortmarke, Telefonblock und Angebots-Knopf in die Inhaltsbreite (--wrap) passen. Ohne die knapperen Maße hier schiebt sie sich über den rechten Rand hinaus und die Seite lässt sich seitlich scrollen. */ .siteheader__row { gap: 12px; } .nav__list { gap: 0; } .nav__link { padding: 9px 6px; font-size: .9rem; } .headertel { padding: 6px 9px; column-gap: 8px; } .headertel__num { font-size: .95rem; } .siteheader .btn--small { padding: 9px 14px; font-size: .9rem; } } /* Der Zusatz unter der Wortmarke kostet rund 45 px Breite — die fehlen der Navigation auf schmalen Notebook-Bildschirmen. Die Wortmarke selbst rückt dort eine Spur zusammen, damit sie einzeilig bleibt statt umzubrechen. */ @media (max-width: 1399px) { .brand__text small { display: none; } .brand__text strong { font-size: .95rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } @media print { .siteheader, .mobilebar, .cta-final, .cta-inline, .breadcrumb { display: none; } body { background: #fff; padding: 0; } } /* ========================================================================== Abbildungen ========================================================================== */ .bild { margin: 30px 0 0; } .bild img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-gross); background: var(--graphite); } .bild figcaption { margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--signal); font-family: var(--schrift-mono); font-size: .76rem; line-height: 1.5; letter-spacing: .03em; color: var(--ink-soft); max-width: 60ch; } .split .bild { margin-top: 24px; } /* ---- Rechtsseiten: Impressum, AGB, Widerruf ---- */ .rechtsstand { font-family: var(--schrift-mono); font-size: .78rem; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 26px; } .prose > .rechtsblock { padding: 14px 18px; background: var(--ground-warm); border-left: 3px solid var(--signal); border-radius: 0 var(--radius) var(--radius) 0; } .prose > .rechtsformular { max-width: var(--wrap-eng); margin: 1.4em 0; padding: 24px 26px; background: var(--surface); border: 1px solid var(--line-stark); border-radius: var(--radius-gross); } .rechtsformular p { margin: 0 0 14px; } .rechtsformular p:last-child { margin-bottom: 0; } .rf-linie { border-bottom: 1px solid var(--line-stark); height: 1.9em; } .rf-feld { display: inline-block; min-width: 12em; border-bottom: 1px solid var(--line-stark); vertical-align: baseline; } .rf-stern { color: var(--ink-soft); } .rf-fussnote { font-size: .86rem; color: var(--ink-soft); } @media print { .siteheader, .sitefooter, .mobilebar, .breadcrumb, .links, .cta, .hero__cta { display: none !important; } .section { border: 0 !important; background: #fff !important; } .rechtsformular { border-color: #000; } } /* Symbolfotos: Bildunterschrift zweizeilig, Quelle deutlich zurueckgenommen */ .bild--foto { margin: 0; } .bild--foto img { aspect-ratio: 16 / 9; object-fit: cover; }