/* ========================================================================== Holczmann Group – gemeinsames Design-System Version 2.4.0 · 21.09.2026 Aufbau: 1 Tokens · 2 Basis · 3 Layout · 4 Typografie · 5 Buttons 6 Navigation · 7 Komponenten · 8 Formulare · 9 Footer · 10 Themes Jede Seite setzt ihr Theme über die Klasse am : t-group (Startseite/Rechtliches) · t-gastro · t-tischlerei · t-handel (Kerzenzeit) · t-fenster ========================================================================== */ /* ---------- 1 TOKENS ---------- */ :root { --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-display: var(--font-sans); --display-weight: 700; --display-tracking: -0.025em; /* Neutrale Farben */ --ink: #15171b; --ink-2: #3a3e46; --muted: #6a6f78; --line: #e5e6e9; --bg: #ffffff; --surface: #f6f6f4; --dark: #121417; /* Bereichsfarben (= Kacheln der Startseite, unverändert) */ --c-gastro: #d62027; --c-tischlerei: #f29100; --c-baeckerei: #f29100; /* alt, = Tischlerei-Gelb */ --c-handel: #1e3a8a; --c-fenster: #7cb342; /* Akzent je Theme (überschrieben in Abschnitt 10) */ --accent: #15171b; --accent-hover: #000; --accent-ink: #fff; --accent-soft: #f1f1ef; --on-dark: #f3f3f1; --on-dark-muted: rgba(243, 243, 241, .66); --line-dark: rgba(255, 255, 255, .14); /* Maße */ --container: 1180px; --gutter: clamp(16px, 4vw, 32px); --sec: clamp(36px, 4.2vw, 56px); --r-sm: 6px; --r: 10px; --r-lg: 14px; --nav-h: 68px; --shadow-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .07); --shadow-2: 0 10px 30px rgba(16, 24, 40, .09); --ease: cubic-bezier(.2, .7, .2, 1); } /* ---------- 2 BASIS ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: 1rem; line-height: 1.65; color: var(--ink-2); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { font: inherit; cursor: pointer; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: 12px; top: -48px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-sm); } .skip:focus { top: 12px; } .ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } /* ---------- 3 LAYOUT ---------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: var(--sec) 0; } .section--tight { padding: calc(var(--sec) * .7) 0; } .section--alt { background: var(--surface); } .section--dark { background: var(--dark); color: var(--on-dark-muted); } .section--accent { background: var(--accent); color: rgba(255,255,255,.82); } .section--dark h2, .section--dark h3, .section--dark h4, .section--accent h2, .section--accent h3, .section--accent h4 { color: #fff; } .section + .section:not(.section--alt):not(.section--dark):not(.section--accent) { border-top: 1px solid var(--line); } .grid { display: grid; gap: 20px; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .split--top { align-items: start; } .split--5-7 { grid-template-columns: 5fr 7fr; } .split--7-5 { grid-template-columns: 7fr 5fr; } .center { text-align: center; } .mt-s { margin-top: 12px; } .mt-m { margin-top: 20px; } .mt-l { margin-top: 28px; } /* ---------- 4 TYPOGRAFIE ---------- */ h1, h2, h3, h4 { color: var(--ink); font-weight: 650; line-height: 1.2; letter-spacing: -0.012em; } .display, h1, h2 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); } h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.08; } h2 { font-size: clamp(1.6rem, 2.7vw, 2.25rem); line-height: 1.14; } h3 { font-size: 1.075rem; } h4 { font-size: .95rem; } h1 em, h2 em { font-style: normal; color: var(--accent-text, var(--accent)); } p + p { margin-top: .9em; } .lead { font-size: clamp(1.02rem, 1.3vw, 1.125rem); line-height: 1.6; color: var(--muted); max-width: 62ch; } .center .lead, .lead.center { margin-left: auto; margin-right: auto; } .small { font-size: .875rem; } .muted { color: var(--muted); } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text, var(--accent)); margin-bottom: 14px; } .eyebrow::before { content: ""; width: 20px; height: 1px; background: currentColor; opacity: .7; } .center .eyebrow::after { content: ""; width: 20px; height: 1px; background: currentColor; opacity: .7; } .sec-head { max-width: 680px; margin-bottom: clamp(20px, 2.5vw, 28px); } .sec-head.center { margin-left: auto; margin-right: auto; } .sec-head h2 + .lead { margin-top: 10px; } .sec-head--split { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; } .sec-head--split > div { max-width: 640px; } /* ---------- 5 BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: var(--r-sm); font-size: .9rem; font-weight: 600; letter-spacing: .005em; white-space: nowrap; border: 1px solid transparent; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--accent); color: var(--accent-ink); } .btn--primary:hover { background: var(--accent-hover); } .btn--ghost { border-color: currentColor; color: var(--ink); background: transparent; } .btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); } .btn--light { background: #fff; color: var(--ink); } .btn--light:hover { background: #f0f0f0; } .btn--outline-light { border-color: rgba(255,255,255,.55); color: #fff; } .btn--outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; } .btn--sm { height: 38px; padding: 0 16px; font-size: .84rem; } .btn--block { width: 100%; } .btn .ico { width: 16px; height: 16px; } .arrow::after { content: "→"; transition: transform .2s var(--ease); } .arrow:hover::after { transform: translateX(3px); } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } .link { font-weight: 600; color: var(--accent-text, var(--accent)); display: inline-flex; gap: 6px; align-items: center; } .link:hover { text-decoration: underline; text-underline-offset: 3px; } /* ---------- 6 NAVIGATION ---------- */ .nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); background: var(--nav-bg, rgba(255,255,255,.94)); color: var(--nav-ink, var(--ink)); -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--nav-line, var(--line)); transition: box-shadow .25s var(--ease); } .nav.is-scrolled { box-shadow: 0 6px 20px rgba(0,0,0,.06); } .nav__inner { height: 100%; display: flex; align-items: center; gap: 28px; } .brand { display: flex; align-items: center; gap: 12px; flex: none; } .brand img { height: 34px; width: auto; } .brand__text { display: flex; flex-direction: column; line-height: 1.1; } .brand__name { font-weight: 800; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--nav-ink, var(--ink)); } .brand__sub { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--nav-muted, var(--muted)); margin-top: 3px; } .nav__links { display: flex; gap: 26px; margin-left: auto; } .nav__links a { font-size: .875rem; font-weight: 500; color: var(--nav-muted, var(--ink-2)); transition: color .2s; } .nav__links a:hover, .nav__links a[aria-current] { color: var(--nav-ink, var(--ink)); } .nav__actions { display: flex; align-items: center; gap: 14px; } .nav__back { font-size: .8rem; font-weight: 500; color: var(--nav-muted, var(--muted)); } .nav__back:hover { color: var(--nav-ink, var(--ink)); } .nav__phone { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; color: var(--nav-ink, var(--ink)); } .nav__toggle { display: none; margin-left: auto; width: 42px; height: 42px; border: 1px solid var(--nav-line, var(--line)); border-radius: var(--r-sm); background: transparent; color: var(--nav-ink, var(--ink)); align-items: center; justify-content: center; } .nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; transition: transform .25s var(--ease), background .2s; } .nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; } .nav__toggle span::before { top: -6px; } .nav__toggle span::after { top: 6px; } .nav.is-open .nav__toggle span { background: transparent; } .nav.is-open .nav__toggle span::before { transform: translateY(6px) rotate(45deg); } .nav.is-open .nav__toggle span::after { transform: translateY(-6px) rotate(-45deg); } .nav__panel { display: none; } /* ---------- 7 KOMPONENTEN ---------- */ /* Hero */ .hero { padding: clamp(40px, 5vw, 64px) 0 clamp(36px, 4.5vw, 56px); position: relative; } .hero h1 { max-width: 16ch; } .hero .lead { margin-top: 14px; } .hero .btn-row { margin-top: 22px; } .hero__facts { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); max-width: 640px; } .hero__facts li { font-size: .82rem; color: var(--muted); display: flex; flex-direction: column; } .hero__facts strong { font-size: 1.1rem; color: var(--ink); font-weight: 700; letter-spacing: -.01em; } /* Karten */ .card { background: var(--card-bg, #fff); border: 1px solid var(--card-line, var(--line)); border-radius: var(--r); padding: 22px 22px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); } .card h3 { margin-bottom: 8px; } .card p { font-size: .925rem; color: var(--muted); } a.card:hover, .card--hover:hover { border-color: var(--accent-line, var(--ink)); box-shadow: var(--shadow-2); } .card__num { font-size: .75rem; font-weight: 600; letter-spacing: .12em; color: var(--accent-text, var(--accent)); margin-bottom: 12px; display: block; } .card__icon { width: 38px; height: 38px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-text, var(--accent)); display: grid; place-items: center; margin-bottom: 14px; } .card__icon .ico { width: 20px; height: 20px; } /* Liste mit Häkchen */ .checks { display: grid; gap: 10px; } .checks li { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; } .checks li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat; } .checks strong { color: var(--ink); font-weight: 600; } .checks--2 { grid-template-columns: 1fr 1fr; gap: 10px 24px; } /* Leiste mit Vorteilen */ .facts-bar { border-bottom: 1px solid var(--line); background: var(--bg); } .facts-bar ul { display: grid; grid-template-columns: repeat(4, 1fr); } .facts-bar li { padding: 16px 20px; display: flex; gap: 12px; align-items: flex-start; border-left: 1px solid var(--line); } .facts-bar li:first-child { border-left: 0; padding-left: 0; } .facts-bar .ico { color: var(--accent-text, var(--accent)); margin-top: 2px; } .facts-bar strong { display: block; font-size: .9rem; color: var(--ink); font-weight: 600; } .facts-bar span { font-size: .82rem; color: var(--muted); } /* Kennzahlen */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); } .stats > div { padding: 8px 24px; border-left: 1px solid var(--stat-line, var(--line)); } .stats > div:first-child { border-left: 0; padding-left: 0; } .stats strong { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: var(--display-weight); letter-spacing: -.02em; color: var(--stat-ink, var(--ink)); line-height: 1.1; } .stats span { display: block; margin-top: 4px; font-size: .82rem; line-height: 1.4; color: var(--stat-muted, var(--muted)); } /* Zitat */ .quote { font-family: var(--font-display); font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.35; color: var(--ink); font-weight: 500; letter-spacing: -.01em; } .quote cite { display: block; margin-top: 16px; font-family: var(--font-sans); font-style: normal; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } /* Ablauf / Schritte */ .steps { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); } .steps li { padding: 22px 18px 0 0; position: relative; } .steps li::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-text, var(--accent)); } .steps b { display: block; font-size: .75rem; letter-spacing: .12em; color: var(--accent-text, var(--accent)); font-weight: 600; margin-bottom: 8px; } .steps h3 { font-size: 1rem; margin-bottom: 6px; } .steps p { font-size: .875rem; color: var(--muted); } /* Kontaktliste */ .contact-list { display: grid; gap: 0; margin-top: 16px; } .contact-list li { display: flex; gap: 14px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--line); } .contact-list li:last-child { border-bottom: 0; } .contact-list .ico { color: var(--accent-text, var(--accent)); margin-top: 3px; } .contact-list strong { display: block; color: var(--ink); font-size: .92rem; font-weight: 600; } .contact-list span, .contact-list a { font-size: .9rem; color: var(--muted); } .contact-list a:hover { color: var(--ink); text-decoration: underline; } /* Hinweis */ .notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); font-size: .85rem; color: var(--ink-2); } .badge { display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 100px; background: var(--accent-soft); color: var(--accent-text, var(--accent)); } /* ---------- 8 FORMULARE ---------- */ .form { background: var(--card-bg, #fff); border: 1px solid var(--card-line, var(--line)); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 34px); } .form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field { display: flex; flex-direction: column; gap: 6px; } .field--full { grid-column: 1 / -1; } .field label { font-size: .8rem; font-weight: 600; color: var(--ink); letter-spacing: .01em; } .field input, .field select, .field textarea { width: 100%; font: inherit; font-size: .95rem; color: var(--ink); background: var(--field-bg, #fff); border: 1px solid var(--field-line, #d6d8dc); border-radius: var(--r-sm); padding: 11px 13px; transition: border-color .2s, box-shadow .2s; } .field textarea { min-height: 128px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent-text, var(--accent)); box-shadow: 0 0 0 3px var(--focus-ring, rgba(0,0,0,.08)); } .consent { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: var(--muted); margin: 14px 0; line-height: 1.5; } .consent input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); flex: none; } .consent a { text-decoration: underline; text-underline-offset: 2px; } .form__note { font-size: .78rem; color: var(--muted); margin-top: 12px; text-align: center; } /* ---------- 9 FOOTER ---------- */ .footer { background: var(--dark); color: rgba(255,255,255,.62); font-size: .9rem; padding: clamp(36px, 4vw, 48px) 0 22px; } .footer a { color: rgba(255,255,255,.82); transition: color .2s; } .footer a:hover { color: #fff; } .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; } .footer__brand .brand__name { color: #fff; } .footer__brand p { margin-top: 14px; max-width: 34ch; line-height: 1.6; } .footer .footer__h { font-family: var(--font-sans); line-height: 1.4; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 16px; } .footer li { margin-bottom: 9px; } .footer address { font-style: normal; line-height: 1.7; } .footer__bottom { margin-top: 32px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: .8rem; color: rgba(255,255,255,.45); } .footer__bottom nav { display: flex; gap: 20px; } .footer__bottom a { color: rgba(255,255,255,.6); } .hz-social { display: flex; gap: 10px; margin-top: 18px; } .hz-social a, .hz-social .hz-icon { width: 36px; height: 36px; display: block; border-radius: 8px; overflow: hidden; transition: transform .2s, opacity .2s; } .hz-social a:hover { transform: translateY(-2px); } .hz-social svg { width: 36px; height: 36px; display: block; } .hz-social-hint { font-size: .75rem; color: rgba(255,255,255,.4); margin-top: 8px; } /* ---------- 10 THEMES ---------- */ /* Gruppe (Startseite, Rechtliches) */ .t-group { --accent: #15171b; --accent-hover: #000; --accent-soft: #efefec; --accent-text: #15171b; } /* Gastro – Farbwelt Rot (Kachel #d62027), Gold als Materialakzent */ .t-gastro { --font-display: var(--font-serif); --display-weight: 600; --display-tracking: -0.005em; --bg: #c81f25; --surface: #a8181e; --dark: #5e0c10; --ink: #fbf6ee; --ink-2: rgba(251,246,238,.86); --muted: rgba(251,246,238,.68); --line: rgba(255,255,255,.16); --accent: #d9b66e; --accent-hover: #e8c886; --accent-ink: #3d0a0c; --accent-text: #e7c889; --accent-soft: rgba(217,182,110,.16); --accent-line: rgba(231,200,137,.6); --card-bg: rgba(0,0,0,.12); --card-line: rgba(255,255,255,.14); --field-bg: rgba(0,0,0,.16); --field-line: rgba(255,255,255,.22); --focus-ring: rgba(231,200,137,.25); --nav-bg: rgba(160,22,28,.92); --nav-ink: #fbf6ee; --nav-muted: rgba(251,246,238,.72); --nav-line: rgba(255,255,255,.12); } .t-gastro h1, .t-gastro h2 { font-size-adjust: none; } .t-gastro h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); line-height: 1.02; } .t-gastro h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.08; } .t-gastro h1 em, .t-gastro h2 em { font-style: italic; } .t-gastro .btn--ghost { color: var(--ink); } .t-gastro .btn--ghost:hover { background: var(--ink); color: #7a1014; border-color: var(--ink); } .t-gastro .checks li::before { background-color: var(--accent); } .t-gastro .field select option { color: #15171b; } /* Tischlerei & Tapeziererei – Farbwelt Gelb (Kachel #f29100), dunkle Schrift (V2.5.0) */ .t-tischlerei { --font-display: var(--font-serif); --display-weight: 600; --display-tracking: -0.005em; --bg: #f29100; --surface: #e38800; --dark: #2e1d02; --ink: #1c1405; --ink-2: rgba(28,20,5,.86); --muted: rgba(28,20,5,.72); --line: rgba(0,0,0,.14); --accent: #1c1405; --accent-hover: #000; --accent-ink: #fff4dc; --accent-text: #3d2600; --accent-soft: rgba(0,0,0,.08); --accent-line: rgba(0,0,0,.35); --card-bg: rgba(255,255,255,.16); --card-line: rgba(0,0,0,.12); --field-bg: rgba(255,255,255,.35); --field-line: rgba(0,0,0,.22); --focus-ring: rgba(0,0,0,.18); --nav-bg: rgba(232,138,0,.94); --nav-ink: #1c1405; --nav-muted: rgba(28,20,5,.72); --nav-line: rgba(0,0,0,.12); } .t-tischlerei h1, .t-tischlerei h2 { font-size-adjust: none; } .t-tischlerei h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); line-height: 1.02; } .t-tischlerei h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.08; } .t-tischlerei h1 em, .t-tischlerei h2 em { font-style: italic; } .t-tischlerei .btn--ghost { color: var(--ink); } .t-tischlerei .btn--ghost:hover { background: var(--ink); color: #f29100; border-color: var(--ink); } .t-tischlerei .checks li::before { background-color: var(--accent); } .t-tischlerei .field select option { color: #15171b; } /* Handel / Kerzenzeit – Farbwelt Blau (Kachel #1e3a8a), Gold als Zweitakzent */ .t-handel { --font-display: var(--font-serif); --display-weight: 600; --display-tracking: -0.005em; --surface: #f5f7fb; --accent: #1e3a8a; --accent-hover: #172e6f; --accent-soft: #e8edf8; --accent-text: #1e3a8a; --accent-line: #9fb1dc; --gold: #b08a45; --focus-ring: rgba(30,58,138,.14); } .t-handel h1 { font-size: clamp(2.4rem, 5vw, 3.7rem); line-height: 1.03; } .t-handel h2 { font-size: clamp(1.9rem, 3.1vw, 2.6rem); } .t-handel h1 em, .t-handel h2 em { font-style: italic; color: var(--gold); } /* Fenster – Farbwelt Grün (Kachel #7cb342) */ .t-fenster { --surface: #f5f8f1; --accent: #4f7f22; --accent-hover: #416b1b; --accent-soft: #ebf3e1; --accent-text: #4f7f22; --accent-line: #a9cc82; --brand-green: #7cb342; --focus-ring: rgba(79,127,34,.16); } /* ---------- RESPONSIVE ---------- */ @media (max-width: 1080px) { .nav__links { gap: 20px; } .nav__back { display: none; } .steps { grid-template-columns: repeat(3, 1fr); row-gap: 28px; } .grid-5 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 920px) { :root { --nav-h: 62px; } .nav__links, .nav__actions { display: none; } .nav__toggle { display: inline-flex; } .nav__panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--nav-panel, #fff); color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px rgba(0,0,0,.08); padding: 8px var(--gutter) 20px; } .nav.is-open .nav__panel { display: block; } .nav__panel a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); font-weight: 500; color: var(--ink); } .nav__panel .btn { margin-top: 16px; border-bottom: 0; color: var(--accent-ink); } .nav__panel .nav__panel-meta { display: flex; justify-content: space-between; margin-top: 14px; font-size: .85rem; } .nav__panel .nav__panel-meta a { border: 0; padding: 0; color: var(--muted); } .t-gastro { --nav-panel: #a8181e; } .t-tischlerei { --nav-panel: #e38800; } .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split, .split--5-7, .split--7-5 { grid-template-columns: 1fr; } .facts-bar ul { grid-template-columns: repeat(2, 1fr); } .facts-bar li:nth-child(3) { border-left: 0; padding-left: 0; } .facts-bar li:nth-child(n+3) { border-top: 1px solid var(--line); } .stats { grid-template-columns: repeat(2, 1fr); row-gap: 24px; } .stats > div:nth-child(3) { border-left: 0; padding-left: 0; } .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } } @media (max-width: 600px) { body { font-size: .96875rem; } .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; } .form__grid { grid-template-columns: 1fr; } .checks--2 { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr 1fr; } .facts-bar ul { grid-template-columns: 1fr; } .facts-bar li { border-left: 0 !important; padding: 14px 0 !important; border-top: 1px solid var(--line); } .facts-bar li:first-child { border-top: 0; } .btn-row .btn { flex: 1 1 auto; } .brand__sub { display: none; } .footer__grid { grid-template-columns: 1fr; gap: 28px; } .stats--3 { grid-template-columns: 1fr !important; row-gap: 0; } .stats--3 > div { border-left: 0 !important; padding: 12px 0 !important; border-top: 1px solid var(--stat-line, var(--line)); display: flex; align-items: baseline; gap: 14px; } .stats--3 > div:first-child { border-top: 0; } .stats--3 strong { font-size: 1.4rem; min-width: 7.5rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }