/* ========================================================================== JO-MA-TEX GmbH & Co. Haustechnik KG — Stylesheet Umsetzung nach "JO-MA-TEX Website Template v3" / DESIGN-HANDOFF.md ========================================================================== */ /* Schriften werden separat eingebunden: css/fonts.css (im vor dieser Datei) */ /* -------------------------------------------------------------------------- 1. Design-Tokens -------------------------------------------------------------------------- */ :root { /* Farben */ --bg: #F5F4F2; /* Betonweiß */ --ink: #17181A; /* Graphit */ --ink-soft: #3A3C40; --muted: #6C6E70; --muted-dark: #9EA0A3; /* Sekundärtext auf dunklem Grund */ --line: #E1E0DC; --line-dark: #3A3C40; /* Trennlinie auf dunklem Grund */ --line-form: #C9C8C3; --accent: #46617A; /* Stahlblau */ --accent-soft: #8FA6BB; /* Stahlblau auf dunklem Grund */ --hover: #EFEEEA; --faint: #9C9B96; --placeholder: #A6A6A2; --tas-blue: #3082F6; /* Typografie */ --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Maße */ --wrap: 1280px; --gutter: 56px; --radius: 4px; } /* -------------------------------------------------------------------------- 2. Reset & Grundlagen -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: var(--accent); text-decoration: none; transition: color .15s ease, border-color .15s ease, background-color .15s ease; } a:hover { color: var(--ink); } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: 12px; top: -100px; z-index: 200; background: var(--ink); color: var(--bg); padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; } .skip-link:focus { top: 12px; color: var(--bg); } .page { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); } .main { flex: 1 0 auto; } /* -------------------------------------------------------------------------- 3. Bausteine -------------------------------------------------------------------------- */ .wrap { max-width: var(--wrap); margin: 0 auto; } .section { padding: 72px clamp(20px, 4vw, var(--gutter)); } .section--top { padding-top: 96px; padding-bottom: 72px; } .section--sub { padding-top: 80px; padding-bottom: 96px; } .section--bottom { padding-top: 24px; padding-bottom: 96px; } .section--dark { background: var(--ink); color: var(--bg); padding-top: 96px; padding-bottom: 96px; } .section--flow { padding-top: 96px; padding-bottom: 96px; } .stack { display: flex; flex-direction: column; gap: 48px; } .stack--l { gap: 56px; } .stack--s { gap: 40px; } .eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .section--dark .eyebrow { color: var(--accent-soft); } .lead { margin: 0; font-size: 17px; line-height: 1.65; color: var(--muted); } /* Sektionskopf: 1px Linie + Mono-Nummer + H2 --------------------------------- */ .sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; border-top: 1px solid var(--ink); padding-top: 20px; } .section--dark .sec-head { border-top-color: var(--line-dark); } .sec-head__title { display: flex; align-items: baseline; gap: 18px; } .sec-num { font-family: var(--font-mono); font-size: 12px; color: var(--accent); } .section--dark .sec-num { color: var(--accent-soft); } .sec-head h2 { margin: 0; font-size: clamp(30px, 3.6vw, 44px); font-weight: 600; letter-spacing: -.03em; } .sec-link { font-size: 14px; font-weight: 600; color: var(--accent); white-space: nowrap; } .sec-link:hover { color: var(--ink); } .section--dark .sec-link { color: var(--accent-soft); } .section--dark .sec-link:hover { color: var(--bg); } /* Buttons -------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font); font-size: 14px; font-weight: 600; line-height: 1.2; padding: 15px 30px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-align: center; } .btn--dark { background: var(--ink); color: var(--bg); } .btn--dark:hover { background: var(--accent); color: var(--bg); } .btn--ghost { border-color: var(--line-form); color: var(--ink); background: transparent; } .btn--ghost:hover { border-color: var(--ink); color: var(--ink); } .btn--light { background: var(--bg); color: var(--ink); } .btn--light:hover { background: var(--accent-soft); color: var(--ink); } .btn--s { font-size: 13.5px; padding: 12px 24px; } .btn--wide { padding: 16px 34px; } /* Medien --------------------------------------------------------------------- */ .media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--hover); } .media img { width: 100%; height: 100%; object-fit: cover; } .section--dark .media { background: var(--ink-soft); } /* -------------------------------------------------------------------------- 4. Header & Navigation -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); background: rgba(245, 244, 242, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px clamp(20px, 4vw, var(--gutter)); } .brand { display: flex; align-items: center; gap: 16px; min-width: 0; color: inherit; } .brand__logo { height: 30px; width: auto; flex-shrink: 0; } .brand__tagline { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; white-space: nowrap; flex-shrink: 0; } .nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); flex-shrink: 0; } .nav__list { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); list-style: none; margin: 0; padding: 0; } .nav__link { display: block; font-size: 14px; font-weight: 500; letter-spacing: -.01em; color: var(--muted); border-bottom: 1px solid transparent; padding: 3px 0; white-space: nowrap; } .nav__link:hover { color: var(--ink); } .nav__link.is-active { color: var(--ink); border-bottom-color: var(--ink); } /* Burger --------------------------------------------------------------------- */ .burger { display: none; width: 44px; height: 44px; margin-right: -10px; flex-direction: column; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 0; } .burger span { display: block; width: 22px; height: 1.5px; flex: 0 0 auto; background: var(--ink); transition: transform .2s ease, opacity .2s ease; } .burger span + span { margin-top: 5px; } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* -------------------------------------------------------------------------- 5. Startseite — Hero, Fakten -------------------------------------------------------------------------- */ .hero__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; } .hero__title { margin: 0; font-size: clamp(44px, 7vw, 88px); font-weight: 600; letter-spacing: -.04em; line-height: 1.0; max-width: 12ch; } .hero__aside { display: flex; flex-direction: column; gap: 22px; max-width: 44ch; padding-top: 14px; } .hero__actions { display: flex; gap: 12px; flex-wrap: wrap; } .hero__media { height: 520px; } .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; border-top: 1px solid var(--line); padding-top: 28px; list-style: none; margin: 0; padding-left: 0; padding-right: 0; } .fact { display: flex; flex-direction: column; gap: 4px; } .fact__num { font-size: 40px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; } .fact__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; } /* -------------------------------------------------------------------------- 6. Leistungen -------------------------------------------------------------------------- */ .services { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; } .service { display: flex; gap: 22px; align-items: baseline; padding: 22px 4px; border-bottom: 1px solid var(--line); } .service__nr { font-family: var(--font-mono); font-size: 12px; color: var(--accent); min-width: 22px; } .service__body { display: flex; flex-direction: column; gap: 5px; } .service__name { font-weight: 600; font-size: 18px; letter-spacing: -.01em; margin: 0; } .service__desc { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); } /* Leistungen-Unterseite: 3-spaltige Tabelle */ .service-table { display: flex; flex-direction: column; border-top: 1px solid var(--ink); } .service-row { display: grid; grid-template-columns: 60px 300px 1fr; gap: 32px; align-items: baseline; padding: 26px 4px; border-bottom: 1px solid var(--line); } .service-row__nr { font-family: var(--font-mono); font-size: 12px; color: var(--accent); } .service-row__name { font-weight: 600; font-size: 19px; letter-spacing: -.01em; margin: 0; } .service-row__desc { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); } @media (hover: hover) { .service:hover, .service-row:hover { background: var(--hover); } } /* -------------------------------------------------------------------------- 7. Ablauf -------------------------------------------------------------------------- */ .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; list-style: none; margin: 0; padding: 0; } .step { display: flex; flex-direction: column; gap: 12px; } .step__nr { font-family: var(--font-mono); font-size: 12px; color: var(--accent); } .step__name { margin: 0; font-weight: 600; font-size: 18px; letter-spacing: -.01em; border-top: 1px solid var(--line); padding-top: 14px; } .step__desc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); } /* -------------------------------------------------------------------------- 8. Referenzen / Projektkarten -------------------------------------------------------------------------- */ .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; } .card { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .card__media { height: 300px; } .cards--sub .card__media { height: 280px; } .card__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .card__name { font-weight: 600; font-size: 16px; margin: 0; } .card__year { font-family: var(--font-mono); font-size: 11px; color: var(--muted); } .section--dark .card__year { color: var(--muted-dark); } /* CTA-Band in dunkler Sektion */ .cta-band { display: flex; justify-content: space-between; align-items: center; gap: 40px; border-top: 1px solid var(--line-dark); padding-top: 40px; } .cta-band__title { margin: 0; font-size: clamp(30px, 4vw, 52px); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; max-width: 20ch; } .cta-band .btn { padding: 17px 34px; } /* CTA-Kasten (Leistungen) */ .cta-box { background: var(--ink); color: var(--bg); border-radius: var(--radius); padding: 44px 48px; display: flex; justify-content: space-between; align-items: center; gap: 32px; } .cta-box__title { font-size: clamp(22px, 2.4vw, 26px); font-weight: 600; letter-spacing: -.02em; } .cta-box .btn { padding: 14px 28px; } /* -------------------------------------------------------------------------- 9. Instagram-Sektion -------------------------------------------------------------------------- */ .ig { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: center; } .ig__text { display: flex; flex-direction: column; gap: 20px; } .ig__text h2 { margin: 0; font-size: clamp(30px, 3.6vw, 44px); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; } .ig__text p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--muted); } .ig__link { width: fit-content; } .ig__link svg { flex-shrink: 0; } .ig__player { position: relative; height: 480px; border-radius: var(--radius); overflow: hidden; background: var(--ink); } .ig__player video, .ig__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--ink); } .ig__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; background: linear-gradient(transparent, rgba(23, 24, 26, .75)); } .ig__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--bg); } .ig__dots { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; } .ig__dot { width: 20px; height: 20px; padding: 0; border: none; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; } .ig__dot::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: rgba(245, 244, 242, .35); transition: background-color .15s ease; } .ig__dot[aria-current="true"]::before { background: var(--bg); } /* Startknopf (Mobil / Autoplay blockiert) */ .ig__start { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border: none; cursor: pointer; width: 100%; background: rgba(23, 24, 26, .35); color: var(--bg); font-family: var(--font); font-size: 14px; font-weight: 600; } .ig__start::before { content: ''; width: 62px; height: 62px; border-radius: 999px; border: 1px solid rgba(245, 244, 242, .8); background: rgba(23, 24, 26, .45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F5F4F2'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") center / 24px no-repeat; } .ig__start[hidden] { display: none; } .note { font-family: var(--font-mono); font-size: 11px; line-height: 1.7; color: var(--faint); border: 1px dashed var(--line-form); padding: 12px 14px; border-radius: var(--radius); } /* -------------------------------------------------------------------------- 10. Unterseiten-Kopf -------------------------------------------------------------------------- */ .page-head { display: flex; flex-direction: column; gap: 18px; max-width: 70ch; } .page-head h1 { margin: 0; font-size: clamp(38px, 5.4vw, 64px); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; } /* -------------------------------------------------------------------------- 11. Kontakt -------------------------------------------------------------------------- */ .contact { display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; align-items: start; } .form { display: flex; flex-direction: column; gap: 20px; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .field { display: flex; flex-direction: column; gap: 8px; } .field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .field input, .field textarea { border: none; border-bottom: 1px solid var(--line-form); background: transparent; padding: 11px 2px; font-family: var(--font); font-size: 16px; color: var(--ink); outline: none; border-radius: 0; } .field textarea { resize: vertical; min-height: 120px; } .field input:focus, .field textarea:focus { border-bottom-color: var(--ink); } .field input:focus-visible, .field textarea:focus-visible { outline: none; box-shadow: 0 1px 0 0 var(--ink); } input::placeholder, textarea::placeholder { color: var(--placeholder); } .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.5; cursor: pointer; } .consent input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--ink); flex-shrink: 0; } /* Honeypot — für Menschen unsichtbar, für Bots ein Köder */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-msg { padding: 14px 16px; border-radius: var(--radius); font-size: 14px; line-height: 1.6; } .form-msg--ok { border: 1px solid var(--accent); color: var(--accent); background: #EDF0F3; } .form-msg--err { border: 1px solid #9B4A46; color: #9B4A46; background: #F6EDEC; } .form-msg--err ul { margin: 8px 0 0; padding-left: 18px; } .contact-side { display: flex; flex-direction: column; gap: 24px; } .contact-card { background: var(--ink); color: var(--bg); border-radius: var(--radius); padding: 38px; display: flex; flex-direction: column; gap: 22px; } .contact-card__name { font-weight: 600; font-size: 20px; letter-spacing: -.01em; } .contact-card__addr { display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.6; color: var(--muted-dark); font-style: normal; } .contact-card__links { display: flex; flex-direction: column; gap: 6px; font-size: 15px; } .contact-card__links a { color: var(--bg); } .contact-card__links a:hover { color: var(--accent-soft); } .contact-card__links span { color: var(--muted-dark); } /* -------------------------------------------------------------------------- 12. Rechtstexte (Impressum, Datenschutz) -------------------------------------------------------------------------- */ .prose { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; } .prose h1 { margin: 0; font-size: clamp(34px, 4.6vw, 48px); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; } .legal-head { display: flex; flex-direction: column; gap: 10px; } .legal-head__name { font-size: 20px; font-weight: 600; letter-spacing: -.01em; } .legal-dl { display: grid; grid-template-columns: 180px 1fr; gap: 16px 32px; font-size: 15px; line-height: 1.7; border-top: 1px solid var(--line); padding-top: 24px; margin: 0; } .legal-dl dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .legal-dl dd { margin: 0; } .legal-dl dd ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .legal-block { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 24px; font-size: 14px; line-height: 1.7; color: var(--muted); } .legal-block h2 { margin: 0; font-weight: 600; color: var(--ink); font-size: 15px; } .legal-block p { margin: 0; } .ds-intro { display: flex; flex-direction: column; gap: 18px; } .ds-intro p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--ink-soft); } .ds-sections { display: flex; flex-direction: column; gap: 44px; } .ds-section { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--line); padding-top: 24px; } .ds-section__head { display: flex; align-items: baseline; gap: 14px; } .ds-section__head h2 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; } .ds-section p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--ink-soft); } .ds-sub { display: flex; flex-direction: column; gap: 6px; padding-left: 20px; border-left: 1px solid var(--line); } .ds-sub h3 { margin: 0; font-size: 15px; font-weight: 600; } .ds-sub p { font-size: 14.5px; line-height: 1.7; color: var(--muted); } .ds-credit { border-top: 1px solid var(--line); padding-top: 20px; font-size: 13px; line-height: 1.7; color: #8A8D90; } /* -------------------------------------------------------------------------- 13. 404 -------------------------------------------------------------------------- */ .error-page { display: flex; flex-direction: column; gap: 24px; max-width: 60ch; } .error-page h1 { margin: 0; font-size: clamp(44px, 6vw, 72px); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; } /* -------------------------------------------------------------------------- 14. Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--bg); color: var(--muted); border-top: 1px solid var(--ink); padding: 56px clamp(20px, 4vw, var(--gutter)) 40px; } .site-footer__inner { max-width: var(--wrap); margin: 0 auto; display: flex; flex-direction: column; gap: 40px; } .footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; } .footer-brand { display: flex; flex-direction: column; gap: 16px; } .footer-brand img { height: 26px; width: auto; } .footer-brand p { margin: 0; font-size: 14px; line-height: 1.7; max-width: 40ch; } .footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; } .footer-col h2 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 0 0 4px; font-weight: 400; } .footer-col a, .footer-col address { color: var(--muted); font-style: normal; } .footer-col a:hover { color: var(--ink); } .footer-base { border-top: 1px solid var(--line); padding-top: 20px; font-size: 12.5px; color: var(--faint); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .footer-credit { display: inline-flex; align-items: center; gap: 8px; color: var(--tas-blue); font-size: 12.5px; font-weight: 600; } .footer-credit:hover { color: #0F182B; } .footer-credit span { color: var(--faint); font-weight: 400; } .footer-credit img { height: 16px; width: auto; } .footer-geo { font-family: var(--font-mono); font-size: 11px; } /* -------------------------------------------------------------------------- 15. Responsive -------------------------------------------------------------------------- */ /* 900–1100px: kompakt — Tagline aus, Abstände enger */ @media (max-width: 1100px) { .brand__tagline { display: none; } .services { gap: 0 40px; } .ig { gap: 40px; } .service-row { grid-template-columns: 48px 220px 1fr; gap: 24px; } .hero__title { max-width: 14ch; } .hero__media { height: 420px; } } /* unter 900px: mobil */ @media (max-width: 900px) { :root { --gutter: 20px; } /* Ohne JavaScript bleibt die Navigation als gestapelte Liste im Header stehen (nutzbar, nur ohne Burger). Erst die Klasse .js — von main.js gesetzt — macht daraus das aufklappbare Menü. */ .site-header__inner { flex-wrap: wrap; } /* Ohne JS wird der Header durch die offene Liste hoch — dann nicht kleben. */ html:not(.js) .site-header { position: static; } .nav { flex-direction: column; align-items: stretch; gap: 0; flex: 1 0 100%; padding: 8px 0 12px; } .js .burger { display: flex; } .js .nav { position: absolute; left: 0; right: 0; top: 100%; flex: 0 0 auto; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px clamp(20px, 4vw, var(--gutter)) 24px; max-height: calc(100vh - 100%); overflow-y: auto; } .js .nav[hidden] { display: none; } .nav__list { flex-direction: column; align-items: stretch; gap: 0; } .nav__link { display: flex; align-items: center; min-height: 52px; font-size: 17px; border-bottom: 1px solid var(--line); padding: 6px 0; } .nav__link.is-active { border-bottom-color: var(--ink); } .nav__cta { margin-top: 20px; width: 100%; min-height: 52px; } .section, .section--top, .section--sub, .section--bottom, .section--dark, .section--flow { padding-left: clamp(20px, 4vw, var(--gutter)); padding-right: clamp(20px, 4vw, var(--gutter)); } .section--top { padding-top: 56px; padding-bottom: 48px; } .section { padding-top: 48px; padding-bottom: 48px; } .section--sub { padding-top: 48px; padding-bottom: 64px; } .section--bottom{ padding-top: 16px; padding-bottom: 64px; } .section--dark, .section--flow { padding-top: 64px; padding-bottom: 64px; } .stack, .stack--l { gap: 36px; } .hero__top { flex-direction: column; gap: 28px; } .hero__title { font-size: 44px; max-width: 100%; } .hero__aside { padding-top: 0; max-width: 100%; } .hero__actions .btn { flex: 1 1 auto; } .hero__media { height: 300px; } .facts, .steps, .cards, .services { grid-template-columns: 1fr; } .facts { gap: 22px; } .steps { gap: 28px; } .services { gap: 0; } .card__media, .cards--sub .card__media { height: 240px; } .sec-head { flex-direction: column; align-items: flex-start; gap: 14px; } .service-row { grid-template-columns: 32px 1fr; gap: 6px 16px; padding: 20px 4px; } .service-row__nr { grid-row: span 2; } .cta-band { flex-direction: column; align-items: flex-start; gap: 24px; } .cta-box { flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px 26px; } .ig { grid-template-columns: 1fr; gap: 32px; } .ig__player { height: 420px; } .contact { grid-template-columns: 1fr; gap: 40px; } .form__row { grid-template-columns: 1fr; } .legal-dl { grid-template-columns: 1fr; gap: 4px 0; } .legal-dl dt { margin-top: 14px; } .legal-dl dt:first-child { margin-top: 0; } .footer-cols { grid-template-columns: 1fr; gap: 32px; } .footer-base { flex-direction: column; align-items: flex-start; gap: 14px; } } @media (max-width: 560px) { .contact-card { padding: 28px 24px; } .ig__player { height: 340px; } .hero__actions { flex-direction: column; align-items: stretch; } .footer-geo { display: none; } } /* Menü offen: Seite hinter dem Overlay nicht mitscrollen */ body.nav-open { overflow: hidden; } /* -------------------------------------------------------------------------- 16. Druck -------------------------------------------------------------------------- */ @media print { .site-header, .burger, .nav, .ig__player, .btn { display: none !important; } body { background: #fff; } .section--dark, .cta-box, .contact-card { background: #fff !important; color: #000 !important; } a { color: #000; } }