/* ANAS-Hydraulik — Design „Werkstatt" (Entwurf B, gewählt 23.09.2026) Industrie-Design: Stahlgrau, Wabengelb des Logos (#ffda0d), Barlow Condensed für Überschriften, DM Sans für Fließtext. Zwei Farbschemata: dunkel (Standard) und hell. Hell greift, wenn das System hell eingestellt ist ODER der Besucher per Schalter hell gewählt hat (, gesetzt von thema.js). Alle Farben laufen über die Tokens unten — keine festen Farbwerte in den Komponenten. Schriften lokal, keine externen Requests. */ @font-face { font-family: "Barlow Condensed"; src: url("fonts/barlowcondensed-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "Barlow Condensed"; src: url("fonts/barlowcondensed-700-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "DM Sans"; src: url("fonts/dmsans-latin.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; } /* ---------- Tokens: dunkel (Standard) ---------- */ :root { color-scheme: dark; --bg: #111618; /* Seitengrund */ --bg-2: #1a2125; /* abgesetzte Sektionen, Kennzahlen */ --bg-3: #222b30; /* Panel Zylinder */ --bg-inset: #111618; /* Kasten innerhalb einer abgesetzten Sektion */ --glow: #26323a; /* Lichtkegel in Hero und Seitenkopf */ --line: rgba(255, 255, 255, .1); --text: #e9edef; --text-2: #c7d0d5; /* Fließtext */ --muted: #9eabb2; --strong: #ffffff; /* Herstellernamen, Unterzeile der großen Zahl */ --akzent: #ffda0d; /* Gelb als Schrift/Linie auf dem Seitengrund */ --akzent-hover: #ffe44d; --deko: #ffda0d; /* rein dekorative Striche, Waben, Trenner */ --stufen-linie: rgba(255, 218, 13, .5); --outline: rgba(255, 255, 255, .4); --overlay: 17, 22, 24; /* RGB des Verlaufs über dem Lagerfoto */ --ic-sonne: block; /* Schalter zeigt, wohin er umschaltet */ --ic-mond: none; /* themenunabhängig */ --gelb: #ffda0d; /* Fläche: Buttons, Streifen, Waben, Logo-Block */ --gelb-hell: #ffe44d; --on-gelb: #111618; /* Schrift auf Gelb */ --tinte: #111618; /* Warnstreifen, Fußbereich */ --maxw: 1200px; --hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); --cond: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif; } /* ---------- Tokens: hell ---------- Gelb bleibt Fläche; als Schrift auf hellem Grund fiele es durch (1,26:1), darum trägt dort Tinte (#111618) die Akzente. Kontraste (WCAG): --text 16,7:1, --text-2 9,3:1, --muted 5,6:1 auf --bg. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #f4f5f3; --bg-2: #e9ecea; --bg-3: #dfe4e3; --bg-inset: #ffffff; --glow: #ffffff; --line: rgba(17, 22, 24, .13); --text: #111618; --text-2: #36434a; --muted: #56646c; --strong: #111618; --akzent: #111618; --akzent-hover: #000000; --deko: #e5bf00; --stufen-linie: rgba(17, 22, 24, .28); --outline: rgba(17, 22, 24, .4); --overlay: 244, 245, 243; --ic-sonne: none; --ic-mond: block; } } :root[data-theme="light"] { color-scheme: light; --bg: #f4f5f3; --bg-2: #e9ecea; --bg-3: #dfe4e3; --bg-inset: #ffffff; --glow: #ffffff; --line: rgba(17, 22, 24, .13); --text: #111618; --text-2: #36434a; --muted: #56646c; --strong: #111618; --akzent: #111618; --akzent-hover: #000000; --deko: #e5bf00; --stufen-linie: rgba(17, 22, 24, .28); --outline: rgba(17, 22, 24, .4); --overlay: 244, 245, 243; --ic-sonne: none; --ic-mond: block; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 20px; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } :focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--gelb); color: var(--on-gelb); padding: 8px 14px; font-weight: 700; } .skip:focus { left: 8px; } h1, h2, h3, .cond { font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: .98; } .stripe { height: 10px; background: repeating-linear-gradient(-45deg, var(--gelb) 0 14px, var(--tinte) 14px 28px); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--cond); font-weight: 700; font-size: 21px; letter-spacing: .04em; text-transform: uppercase; padding: 12px 24px 11px; text-decoration: none; line-height: 1.1; background: var(--gelb); color: var(--on-gelb); border: 2px solid var(--gelb); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding-right: 34px; transition: background .2s, color .2s; } .btn:hover { background: var(--gelb-hell); border-color: var(--gelb-hell); } .btn svg { width: 19px; height: 19px; flex: none; } .btn.outline { background: transparent; color: var(--text); border-color: var(--outline); clip-path: none; padding-right: 24px; } .btn.outline:hover { border-color: var(--akzent); color: var(--akzent); } /* ---------- Header ---------- */ .site-header { background: var(--bg); border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; align-items: stretch; gap: 24px; min-height: 80px; } .brand { display: flex; align-items: center; background: var(--gelb); padding: 10px 44px 10px 24px; margin-left: -24px; clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%); } .brand img { height: 56px; width: auto; } .main-nav { margin-left: auto; display: flex; align-items: center; } .main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; } .main-nav a { display: block; padding: 8px 14px; text-decoration: none; font-family: var(--cond); font-weight: 600; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--akzent); } .header-call { align-self: center; } /* Farbschalter (Wabe): zeigt Sonne im dunklen, Mond im hellen Schema. Ohne JavaScript bleibt er versteckt (hidden), das Schema folgt dann dem System. */ .theme-toggle { align-self: center; flex: none; width: 48px; height: 42px; padding: 0; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--bg-2); color: var(--text); clip-path: var(--hex); transition: background .2s, color .2s; } .theme-toggle[hidden] { display: none; } .theme-toggle:hover, .theme-toggle:focus-visible { background: var(--gelb); color: var(--on-gelb); outline: none; } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle .ic-sonne { display: var(--ic-sonne); } .theme-toggle .ic-mond { display: var(--ic-mond); } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; background: radial-gradient(1200px 600px at 85% 30%, var(--glow) 0%, var(--bg) 65%); } .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(90deg, transparent, #000 40%, transparent 90%); } .hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding-top: 80px; padding-bottom: 96px; } .kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 22px; font-family: var(--cond); font-weight: 600; font-size: 20px; letter-spacing: .18em; text-transform: uppercase; color: var(--akzent); } .kicker::before { content: ""; width: 34px; height: 3px; background: var(--deko); } .hero h1 { font-size: clamp(54px, 8.4vw, 116px); margin: 0 0 26px; } .hero h1 em { font-style: normal; color: var(--akzent); } :root[data-theme="light"] .hero h1 em { background: linear-gradient(transparent 58%, var(--gelb) 58%, var(--gelb) 92%, transparent 92%); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .hero h1 em { background: linear-gradient(transparent 58%, var(--gelb) 58%, var(--gelb) 92%, transparent 92%); } } .hero .lead { font-size: clamp(18px, 2vw, 21px); color: var(--text-2); max-width: 32em; margin: 0 0 36px; } .actions { display: flex; flex-wrap: wrap; gap: 14px; } .hero-visual { position: relative; aspect-ratio: 1 / .88; } .hero-visual::before { content: ""; position: absolute; inset: 4% -6% -4% 10%; background: var(--gelb); clip-path: var(--hex); } .hero-visual picture, .hero-visual img { position: absolute; inset: 0; width: 100%; height: 100%; } .hero-visual img { object-fit: cover; object-position: 50% 42%; clip-path: var(--hex); } /* Wechselbilder in der Wabe (wabe.js): Das neue Bild (.aktiv) blendet OBEN ein, das bisherige (.vorher) bleibt darunter voll deckend stehen — so scheinen mitten in der Überblendung weder Grund noch gelbe Wabe durch (das tat die gleichzeitige Gegenblende). Ohne JS oder bei „Bewegung reduzieren" bleibt das erste Bild. */ .hero-visual picture { opacity: 0; z-index: 0; transition: opacity 2.5s ease-in-out; } .hero-visual picture.vorher { opacity: 1; z-index: 1; transition: none; } .hero-visual picture.aktiv { opacity: 1; z-index: 2; } /* Kennzahlen */ .facts { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .facts dl { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); } .fact { padding: 34px 28px; } .fact + .fact { border-left: 1px solid var(--line); } .fact dt, .fact dd { margin: 0; } .fact dt { font-family: var(--cond); font-weight: 700; text-transform: uppercase; font-size: clamp(40px, 4.6vw, 60px); line-height: 1; color: var(--akzent); } .fact dd { color: var(--muted); font-size: 16px; margin-top: 8px; } /* ---------- Sektionen ---------- */ section { padding: 104px 0; } .label { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; font-family: var(--cond); font-weight: 600; font-size: 19px; letter-spacing: .16em; text-transform: uppercase; color: var(--akzent); } .label::before { content: ""; width: 12px; height: 11px; background: var(--deko); clip-path: var(--hex); } h2 { font-size: clamp(42px, 5.4vw, 72px); margin: 0 0 24px; } .lead-in { font-size: 20px; color: var(--text-2); max-width: 40em; margin: 0; } .prose p { margin: 0 0 1em; color: var(--text-2); max-width: 36em; } .prose p:last-child { margin-bottom: 0; } .nw { white-space: nowrap; } .head-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 56px; } .brands { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; } .brands li { font-family: var(--cond); font-weight: 700; font-size: 26px; letter-spacing: .04em; text-transform: uppercase; color: var(--strong); opacity: .85; } .brands li + li::before { content: "/"; margin-right: 22px; color: var(--deko); opacity: .8; } /* Leistungsliste */ .services { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .services a { display: grid; grid-template-columns: 110px 1.1fr 1.3fr 40px; gap: 28px; align-items: center; padding: 30px 8px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background .25s, padding .25s; } .services a:hover { background: var(--bg-2); padding-left: 20px; } .services .num { font-family: var(--cond); font-weight: 700; font-size: 60px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--akzent); } .services h3 { font-size: 34px; margin: 0; } .services h3 small { display: block; font-size: 18px; letter-spacing: .14em; color: var(--akzent); margin-bottom: 6px; } .services p { margin: 0; color: var(--muted); } .services .arrow { font-size: 28px; color: var(--akzent); transition: transform .25s; } .services a:hover .arrow { transform: translateX(6px); } /* Reparatur */ .repair { background: var(--bg-2); } .repair .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } .steps { list-style: none; margin: 0; padding: 0; counter-reset: s; } .steps li { position: relative; padding: 0 0 38px 92px; counter-increment: s; } .steps li::before { content: "0" counter(s); position: absolute; left: 0; top: -4px; width: 66px; height: 58px; display: grid; place-items: center; background: var(--gelb); color: var(--on-gelb); clip-path: var(--hex); font-family: var(--cond); font-weight: 700; font-size: 26px; } .steps li:not(:last-child)::after { content: ""; position: absolute; left: 32px; top: 62px; bottom: 6px; width: 2px; background: repeating-linear-gradient(180deg, var(--stufen-linie) 0 6px, transparent 6px 12px); } .steps strong { display: block; font-family: var(--cond); font-weight: 700; font-size: 32px; text-transform: uppercase; line-height: 1.1; } .steps span { color: var(--muted); } .callout { margin-top: 8px; padding: 26px 28px; background: var(--bg-inset); border-left: 6px solid var(--gelb); font-size: 19px; } .callout a { color: var(--akzent); font-weight: 700; text-underline-offset: 4px; } /* Was überholt wird: Zeile über beide Spalten, vier Kacheln mit gelben Etiketten, Ecke wie ein Anschlagwinkel (ab 1040 px 2x2) */ .ueberholt { grid-column: 1 / -1; margin-top: -16px; } .ueberholt-satz { margin: 0 0 22px; font-size: 20px; color: var(--text); max-width: 40em; } .raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; position: relative; } .raster::after { content: ""; position: absolute; left: -12px; bottom: -12px; width: clamp(90px, 20%, 240px); height: 38%; border-left: 6px solid var(--gelb); border-bottom: 6px solid var(--gelb); pointer-events: none; } .raster figure { margin: 0; position: relative; overflow: hidden; background: var(--bg); } .raster img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(.92) contrast(1.05); transition: transform .5s; } .raster li:hover img { transform: scale(1.04); } .raster figcaption { position: absolute; left: 0; bottom: 0; padding: 6px 26px 5px 12px; background: var(--gelb); color: var(--on-gelb); font-family: var(--cond); font-weight: 700; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); } /* Verkauf */ .sale { position: relative; isolation: isolate; padding: 0; } .sale picture.hintergrund, .sale .bg { position: absolute; inset: 0; width: 100%; height: 100%; } .sale .bg { object-fit: cover; z-index: -2; } .sale::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--overlay), .96) 0%, rgba(var(--overlay), .87) 50%, rgba(var(--overlay), .5) 100%); } .sale .wrap { padding-top: 112px; padding-bottom: 112px; display: grid; grid-template-columns: auto 1fr; gap: 64px; align-items: center; } .big-number { font-family: var(--cond); font-weight: 700; text-transform: uppercase; line-height: .85; color: var(--akzent); font-size: clamp(96px, 15vw, 200px); } .big-number small { display: block; font-size: .2em; letter-spacing: .12em; color: var(--strong); margin-top: 14px; line-height: 1.1; } /* Ersatzteil-Beispiel im Verkauf: Foto in der Wabe, Etikett daneben */ .teil { display: grid; grid-template-columns: 124px 1fr; gap: 22px; align-items: center; margin: 32px 0 0; max-width: 36em; } /* Regelmäßiges Sechseck (Breite : Höhe = 2 : √3) mit ringsum gleich dickem gelbem Rand: 5 px senkrecht zu jeder Kante heißt oben/unten 5 px, seitlich 5 · 2/√3 = 5,7735 px (gleicher Innenabstand überall machte die schrägen Kanten dünner — die Wabe wirkte seitlich gestaucht). */ .teil .wabe { display: block; position: relative; width: 124px; aspect-ratio: 2 / 1.7320508; clip-path: var(--hex); background: var(--gelb); } .teil .wabe img { position: absolute; top: 5px; left: 5.7735px; width: calc(100% - 11.547px); height: calc(100% - 10px); object-fit: cover; clip-path: var(--hex); } .teil figcaption { color: var(--text-2); font-size: 16px; line-height: 1.5; } .teil figcaption strong { display: block; font-family: var(--cond); font-weight: 700; font-size: 22px; letter-spacing: .04em; text-transform: uppercase; color: var(--text); line-height: 1.1; margin-bottom: 4px; } /* Ankauf + Zylinder */ .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .panel { padding: 64px 56px; } .panel h2 { font-size: clamp(36px, 3.8vw, 52px); } .panel p { margin: 0 0 30px; max-width: 30em; } .panel.yellow { background: var(--gelb); color: var(--on-gelb); } .panel.yellow .label { color: var(--on-gelb); } .panel.yellow .label::before { background: var(--on-gelb); } .panel.yellow .btn { background: var(--on-gelb); color: var(--gelb); border-color: var(--on-gelb); } .panel.yellow .btn:hover { background: #000; } .panel.yellow :focus-visible { outline-color: var(--on-gelb); } .panel.dark { background: var(--bg-3); } .panel.dark p { color: var(--text-2); } /* Kontakt */ .contact { text-align: left; } .contact .grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: end; } .phone-big { display: inline-block; font-family: var(--cond); font-weight: 700; font-size: clamp(46px, 8vw, 104px); line-height: 1; color: var(--akzent); text-decoration: none; letter-spacing: .01em; } .phone-big:hover { color: var(--akzent-hover); } .contact dl { margin: 0; display: grid; gap: 18px; } .contact dt { font-family: var(--cond); font-weight: 600; font-size: 18px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .contact dd { margin: 0; font-size: 22px; font-weight: 600; } .contact dd a { text-decoration: none; overflow-wrap: anywhere; } .contact dd a:hover { color: var(--akzent); } /* ---------- Unterseiten ---------- */ .page-head { padding: 88px 0 64px; background: radial-gradient(900px 400px at 90% 0%, var(--glow) 0%, var(--bg) 70%); border-bottom: 1px solid var(--line); } .page-head h1 { font-size: clamp(56px, 9vw, 120px); margin: 0 0 18px; } .page-head p { margin: 0; color: var(--text-2); font-size: 20px; max-width: 38em; } .doc { padding: 72px 0 104px; } .contact-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); margin-bottom: 48px; } .contact-tiles a { display: block; padding: 34px 30px; background: var(--bg); text-decoration: none; transition: background .2s; } .contact-tiles a:hover { background: var(--bg-2); } .contact-tiles span { font-family: var(--cond); font-weight: 600; font-size: 18px; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); } .contact-tiles strong { display: block; margin-top: 8px; font-size: 24px; overflow-wrap: anywhere; } .address { font-style: normal; font-size: 19px; line-height: 1.6; padding-left: 22px; border-left: 6px solid var(--gelb); } .legal { max-width: 48em; color: var(--text-2); } .legal h2 { font-size: 34px; color: var(--text); margin: 1.6em 0 .35em; } .legal h2:first-child { margin-top: 0; } .legal h3 { font-size: 24px; color: var(--text); margin: 1.4em 0 .3em; } .legal p { margin: 0 0 1em; } .legal a { color: var(--akzent); } /* ---------- Footer: in beiden Schemata dunkel (Anker unter der Seite) ---------- */ .site-footer { --line: rgba(255, 255, 255, .1); background: #0b0f10; color: #9eabb2; padding: 72px 0 28px; font-size: 16px; } .site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } .foot-logo { display: inline-block; background: var(--gelb); padding: 10px 18px; margin-bottom: 18px; } .foot-logo img { height: 48px; width: auto; } .site-footer h3 { font-size: 20px; letter-spacing: .1em; color: #fff; margin: 0 0 14px; } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin-bottom: 8px; } .site-footer a { text-decoration: none; } .site-footer a:hover { color: var(--gelb); } .site-footer :focus-visible { outline-color: var(--gelb); } .site-footer address { font-style: normal; } .site-footer .copy { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; } .call-bar { display: none; } /* ---------- Responsive ---------- */ @media (max-width: 1040px) { .hero .wrap { grid-template-columns: 1fr; padding-top: 56px; } .hero-visual { max-width: 520px; width: 100%; margin: 0 auto; } .facts dl { grid-template-columns: repeat(2, 1fr); } .fact:nth-child(3) { border-left: 0; } .fact:nth-child(n+3) { border-top: 1px solid var(--line); } .head-row, .repair .grid, .contact .grid { grid-template-columns: 1fr; gap: 32px; } .raster { grid-template-columns: 1fr 1fr; } .ueberholt { margin-top: 8px; } .services a { grid-template-columns: 80px 1fr 32px; } .services p { grid-column: 2 / 3; } .services .arrow { grid-row: 1; grid-column: 3; } .sale .wrap { grid-template-columns: 1fr; gap: 24px; } .duo { grid-template-columns: 1fr; } .site-footer .cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { body { font-size: 16px; padding-bottom: 62px; } .site-header .wrap { flex-wrap: wrap; gap: 0; min-height: 0; padding: 0; } .brand { margin-left: 0; padding: 8px 40px 8px 16px; } .brand img { height: 46px; } .header-call { display: none; } .theme-toggle { margin: 0 14px 0 auto; } .main-nav { order: 2; width: 100%; margin: 0; border-top: 1px solid var(--line); } .main-nav ul { width: 100%; justify-content: space-between; padding: 0 8px; } .main-nav a { padding: 10px 4px; font-size: 16px; letter-spacing: .03em; } section { padding: 72px 0; } .hero .wrap { padding-bottom: 64px; } .actions .btn { width: 100%; justify-content: center; } .fact { padding: 24px 18px; } .services a { grid-template-columns: 56px 1fr; gap: 6px 16px; padding: 24px 0; } .services a:hover { padding-left: 0; } .services .num { font-size: 42px; grid-row: 1 / 3; align-self: start; } .services h3 { font-size: 28px; } .services p { grid-column: 2; } .services .arrow { display: none; } .steps li { padding-left: 80px; } .raster figcaption { font-size: 15px; padding: 5px 20px 4px 9px; } .teil { grid-template-columns: 96px 1fr; gap: 16px; } .teil .wabe { width: 96px; } .panel { padding: 48px 24px; } .contact-tiles { grid-template-columns: 1fr; } .site-footer .cols { grid-template-columns: 1fr; } .call-bar { display: flex; position: fixed; inset: auto 0 0 0; z-index: 60; height: 60px; align-items: center; justify-content: center; gap: 10px; background: var(--gelb); color: var(--on-gelb); text-decoration: none; font-family: var(--cond); font-weight: 700; font-size: 23px; letter-spacing: .06em; text-transform: uppercase; } .call-bar svg { width: 20px; height: 20px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }