/* ========================================================================== Peter Müller LKW-Baggerbetrieb – Startseite (Prototyp) Gestaltung nach dem Bauzaun-Banner: Bebas Neue + Source Sans 3, schräge Bänder in Weiß, Gelb und Anthrazit. Hell/Dunkel über data-modus="hell|dunkel" auf ========================================================================== */ @font-face { font-family: "Bebas Neue"; src: url("../fonts/bebas-neue.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; } :root { color-scheme: light; /* Logo – fest in beiden Modi */ --gelb: #FFD120; --gold: #EBB704; --anth: #393938; --auf-gelb: #393938; /* Flächen */ --c-bg: #FFFFFF; --c-alt: #EFEEEA; --c-alt-2: #DEDDD7; --c-tief: #393938; /* Anthrazit wie auf dem Banner */ --c-tief-2: #444442; --c-karte: #FFFFFF; --c-feld: #FFFFFF; --c-feld-rand: #C9C8C1; --c-wahl: #FFF4C7; --c-kopf: rgba(255, 255, 255, .9); --c-kopf-2: rgba(255, 255, 255, .96); /* Text */ --c-text: #393938; --c-text-2: #62615C; --c-hell: #F5F4F0; --c-hell-2: #C2C0B9; --c-linie: rgba(57, 57, 56, .15); --c-linie-hell: rgba(255, 255, 255, .14); /* Knöpfe */ --c-btn: #393938; --c-btn-text: #FFFFFF; --c-btn-hover: #262625; --c-logo: #393938; /* Anfrage */ --c-anf-bg: var(--gelb); --c-anf-text: #393938; --c-anf-akzent: #393938; /* Szenen */ --sc-bg: #F3F2EE; --sc-tinte: #393938; --sc-oben: #5E5C55; --sc-lehm: #BDBBB3; --sc-lehm-2: #95938B; --sc-kies: #D5D3CB; --sc-kies-2: #A09E96; --sc-rc: #DAD8D0; --sc-rc-2: #8A8985; --sc-schotter: #A4A29A; --sc-schotter-2: #74736D; --sc-verdichtet: #C5C3BB; --sc-verdichtet-2: #8F8D85; --sc-erde: #8F877A; --sc-schutt: #9E9C94; --sc-brocken: #6D6C67; --sc-wand: #E2E0D8; --sc-dach: #8A8985; --sc-fenster: #393938; --sc-strasse: #55544F; --sc-busch: #858479; --sc-busch-2: #6F6E65; --sc-stamm: #55534D; --sc-mulch: #807C70; --sc-mulch-2: #55534D; --sc-mD: #393938; --sc-mS: #8A8985; --sc-mG: #2E3940; --sc-mK: #4B4B48; --sc-mS2: #B0AFAB; --sc-mL: rgba(0, 0, 0, .28); --sc-mC: #F1F0EB; --sc-mC2: #D6D5CE; --sc-kette: #6E6D68; --sc-staub: #CBC5B8; --sc-abgas: rgba(57, 57, 56, .26); --sc-huegel-1: #ECEAE4; --sc-huegel-2: #E5E3DC; /* Fuhrpark-Kacheln */ --fp-mD: #232322; --fp-mS: #8A8985; --fp-mG: #1B2226; --fp-mK: #383836; --fp-mS2: #B0AFAB; --fp-mL: rgba(0, 0, 0, .32); --fp-mC: #EDECE6; --fp-mC2: #CBCAC3; --f-display: "Bebas Neue", "Oswald", "Arial Narrow", Impact, sans-serif; --f-text: "Source Sans 3", "Source Sans Pro", "Myriad Pro", "Segoe UI", Arial, sans-serif; --kopf-h: 76px; --gutter: clamp(16px, 4vw, 48px); --max: 1360px; /* Eine Neigung für alle Schrägen: 2,5° wie auf dem Bauzaun-Banner (tan 2,5° = 0,04366) */ --neig: -2.5deg; --s: 4.366vw; --ease: cubic-bezier(.2, .7, .1, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); } :root[data-modus="dunkel"] { color-scheme: dark; --c-bg: #1A1A19; --c-alt: #222221; --c-alt-2: #2F2F2D; --c-tief: #111110; --c-tief-2: #1F1F1E; --c-karte: #252524; --c-feld: #181817; --c-feld-rand: #4A4A47; --c-wahl: rgba(255, 209, 32, .14); --c-kopf: rgba(26, 26, 25, .88); --c-kopf-2: rgba(26, 26, 25, .95); --c-text: #ECEBE6; --c-text-2: #ABA9A1; --c-hell: #ECEBE6; --c-hell-2: #A3A19A; --c-linie: rgba(255, 255, 255, .13); --c-linie-hell: rgba(255, 255, 255, .1); --c-btn: #ECEBE6; --c-btn-text: #1A1A19; --c-btn-hover: #FFFFFF; --c-logo: #ECEBE6; --c-anf-bg: #222221; --c-anf-text: #ECEBE6; --c-anf-akzent: var(--gelb); --sc-bg: #232322; --sc-tinte: #C9C7C0; --sc-oben: #3E3D39; --sc-lehm: #353430; --sc-lehm-2: #4E4D48; --sc-kies: #2D2C2A; --sc-kies-2: #494844; --sc-rc: #3D3C38; --sc-rc-2: #6D6C67; --sc-schotter: #4A4945; --sc-schotter-2: #66655F; --sc-verdichtet: #44433F; --sc-verdichtet-2: #5E5D58; --sc-erde: #6B645A; --sc-schutt: #65635E; --sc-brocken: #85847E; --sc-wand: #3C3B37; --sc-dach: #5A5954; --sc-fenster: #161615; --sc-strasse: #3A3A37; --sc-busch: #55544E; --sc-busch-2: #474640; --sc-stamm: #35342F; --sc-mulch: #5A574F; --sc-mulch-2: #3C3A35; --sc-mD: #54534F; --sc-mS: #8A8985; --sc-mG: #22282D; --sc-mK: #666560; --sc-mS2: #B0AFAB; --sc-mL: rgba(0, 0, 0, .3); --sc-mC: #E4E3DD; --sc-mC2: #C2C1BA; --sc-kette: #7A7974; --sc-staub: #54514A; --sc-abgas: rgba(215, 210, 200, .18); --sc-huegel-1: #272726; --sc-huegel-2: #2B2B29; --fp-mD: #4A4A47; --fp-mS: #8A8985; --fp-mG: #22282D; --fp-mK: #5D5C58; --fp-mS2: #B0AFAB; --fp-mL: rgba(0, 0, 0, .32); --fp-mC: #E2E1DB; --fp-mC2: #BEBDB6; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--c-bg); } body { margin: 0; background: var(--c-bg); color: var(--c-text); font: 400 18px/1.55 var(--f-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html.modus-wechsel body * { transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease !important; } img, video, svg { display: block; max-width: 100%; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } [hidden] { display: none !important; } :focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--anth); color: #fff; } .skip:focus { top: 12px; } section[id], article[id] { scroll-margin-top: calc(var(--kopf-h) + 12px); } .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } .h2 { margin: 0; font: 400 clamp(46px, 5.6vw, 86px)/.92 var(--f-display); letter-spacing: .01em; text-wrap: balance; } /* Schräger Balken über den Abschnittsüberschriften – im Winkel der Bänder */ .h2::before { content: ""; display: block; width: 46px; height: 10px; margin-bottom: clamp(18px, 2vw, 26px); background: var(--gelb); transform: rotate(var(--neig)); transform-origin: 0 100%; } .anfrage .h2::before { background: var(--c-anf-akzent); } .h3 { margin: 0 0 14px; font: 400 clamp(36px, 3.4vw, 54px)/.95 var(--f-display); letter-spacing: .01em; } .lead { margin: 0; max-width: 58ch; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; color: var(--c-text-2); text-wrap: pretty; } .kopfzeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); } .ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .punkte { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; } .punkte li { position: relative; padding-left: 22px; font-weight: 600; } .punkte li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; background: var(--gelb); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: 11px 22px; border: 2px solid transparent; border-radius: 3px; font: 700 17px/1.1 var(--f-text); text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .15s; } .btn:active { transform: translateY(1px); } .btn--gross { min-height: 56px; padding: 14px 26px; font-size: 18px; } .btn--breit { width: 100%; } .btn--gelb { background: var(--gelb); color: var(--auf-gelb); } .btn--gelb:hover { background: var(--gold); } .btn--dunkel { background: var(--c-btn); color: var(--c-btn-text); } .btn--dunkel:hover { background: var(--c-btn-hover); } .btn--linie { border-color: currentColor; background: transparent; color: var(--c-text); } .btn--linie:hover { background: var(--c-btn); border-color: var(--c-btn); color: var(--c-btn-text); } /* ========================================================================== Kopfzeile ========================================================================== */ .kopf { position: fixed; z-index: 60; left: 0; right: 0; top: 0; padding-top: env(safe-area-inset-top, 0px); background: var(--c-kopf); -webkit-backdrop-filter: saturate(1.2) blur(12px); backdrop-filter: saturate(1.2) blur(12px); border-bottom: 1px solid transparent; transition: background-color .3s, border-color .3s; } .kopf.is-scrolled, .unterseite .kopf { background: var(--c-kopf-2); border-bottom-color: var(--c-linie); } /* Über dem Hero-Video: transparent mit heller Schrift, beim Scrollen wieder normal (ab Tablet) */ @media (min-width: 761px) { body:not(.unterseite) .kopf:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; } body:not(.unterseite) .kopf:not(.is-scrolled) .modus-btn { border-color: rgba(255, 255, 255, .45); } body:not(.unterseite) .kopf:not(.is-scrolled) .modus-btn:hover { border-color: #fff; } body:not(.unterseite) .kopf:not(.is-scrolled) .burger i { background: #fff; } } .kopf-in { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 28px); max-width: var(--max); height: var(--kopf-h); margin-inline: auto; padding-inline: var(--gutter); } /* Logo-Schild: hängt von oben, ragt unter die Kopfzeile, Unterkante schräg wie die Bänder. Immer weiß – das Logo funktioniert nur auf Weiß, auch im Dark Mode. */ .kopf-logo { --logo-h: 64px; --schild-x: clamp(16px, 1.5vw, 22px); /* Innenabstand links/rechts */ --schild-ueber: 24px; /* ragt unter die Kopfzeile */ --schild-neig: calc((var(--logo-h) * 2.7518 + 2 * var(--schild-x)) * .04366); /* 2,5° über die Schildbreite */ --schild-rand: 5px; /* gelber Streifen */ --oben: env(safe-area-inset-top, 0px); position: relative; isolation: isolate; flex: none; align-self: flex-start; display: flex; align-items: center; line-height: 0; height: calc(var(--kopf-h) + var(--schild-ueber) + var(--oben)); margin: calc(var(--oben) * -1) 0 0 calc(var(--schild-x) * -1); padding: calc(var(--oben) + 10px) var(--schild-x) var(--schild-ueber); filter: drop-shadow(0 5px 12px rgba(20, 20, 18, .16)); transition: filter .3s; } .kopf-logo::before, .kopf-logo::after { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--schild-neig)), 0 100%); } .kopf-logo::before { bottom: calc(var(--schild-rand) * -1); background: var(--gelb); } .kopf-logo::after { background: #fff; } .kopf-logo svg { height: var(--logo-h); width: auto; overflow: visible; --logo-dunkel: #393938; } @media (min-width: 761px) { :root[data-modus="dunkel"] .kopf-logo { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .5)); } } .logo-bagger { transform-box: fill-box; transform-origin: 72% 88%; transition: transform .5s var(--ease); } .kopf-logo:hover .logo-bagger { transform: rotate(-4deg); } .kopf-logo:focus-visible { outline: none; } .kopf-logo:focus-visible::after { box-shadow: inset 0 0 0 3px var(--gelb); } .kopf-nav ul { display: flex; gap: clamp(14px, 1.6vw, 26px); margin: 0; padding: 0; list-style: none; } .kopf-nav a { font-weight: 600; font-size: 17px; text-decoration: none; text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 8px; transition: text-decoration-color .2s, text-underline-offset .2s; } .kopf-nav a { position: relative; text-decoration: none; } .kopf-nav a::after { /* schräger Balken im Winkel der Bänder */ content: ""; position: absolute; left: -2px; right: -2px; bottom: -9px; height: 4px; background: var(--gelb); transform: rotate(var(--neig)) scaleX(0); transform-origin: 0 50%; transition: transform .25s var(--ease); } .kopf-nav a:hover::after, .kopf-nav a[aria-current="true"]::after { transform: rotate(var(--neig)) scaleX(1); } .kopf-tel { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; text-decoration: none; white-space: nowrap; } .kopf-tel .ic { width: 18px; height: 18px; } .modus-btn { display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; padding: 0; border: 1.5px solid var(--c-linie); border-radius: 3px; background: transparent; cursor: pointer; transition: border-color .2s; } .modus-btn:hover { border-color: var(--c-text); } .ic-modus .mond { display: none; } :root[data-modus="dunkel"] .ic-modus .sonne { display: none; } :root[data-modus="dunkel"] .ic-modus .mond { display: inline; } .kopf-menu { display: none; } @media (max-width: 1140px) { .kopf-nav { display: none; } .kopf-menu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; background: none; cursor: pointer; } .burger { display: grid; gap: 5px; width: 22px; } .burger i { display: block; height: 2px; background: var(--c-text); transition: transform .3s var(--ease), opacity .2s; } .kopf-menu[aria-expanded="true"] .burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); } .kopf-menu[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; } .kopf-menu[aria-expanded="true"] .burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } @media (max-width: 760px) { /* Mobil: die ganze Kopfzeile ist das weiße Band vom Banner – Unterkante schräg, gelber Streifen */ :root { --kopf-h: 60px; } .kopf, .kopf.is-scrolled, body.menu-offen .kopf { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; color: #393938; filter: drop-shadow(0 4px 10px rgba(20, 20, 18, .18)); } .kopf::before, .kopf::after { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -1; pointer-events: none; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--s)), 0 100%); } .kopf::before { height: calc(100% + var(--s) + 4px); background: var(--gelb); } .kopf::after { height: calc(100% + var(--s)); background: #fff; } .kopf-in { gap: 10px; } .kopf-logo { height: auto; margin: 0; padding: 0; align-self: center; filter: none; } .kopf-logo::before, .kopf-logo::after { display: none; } .kopf-logo svg { height: 48px; } .kopf-tel, .kopf .modus-btn, .kopf-cta { display: none; } .kopf-menu { margin-left: auto; } .kopf .burger i, body.menu-offen .kopf .burger i { background: #393938; } } /* Mobiles Menü – folgt Hell/Dunkel, ruhige Liste unter der Kopfzeile */ .menu { position: fixed; z-index: 55; inset: 0; display: flex; flex-direction: column; gap: 28px; overflow: auto; overscroll-behavior: contain; padding: calc(var(--kopf-h) + env(safe-area-inset-top, 0px) + var(--s) + 18px) var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px)); background: var(--c-bg); color: var(--c-text); } .menu:focus { outline: none; } .menu-liste { margin: 0; padding: 0; list-style: none; } .menu-liste li { border-bottom: 1px solid var(--c-linie); transform: rotate(var(--neig)); transform-origin: 0 100%; } /* jede Zeile im Winkel der Bänder */ .menu-liste a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 2px 12px; font: 400 clamp(30px, 8.6vw, 42px)/1 var(--f-display); letter-spacing: .01em; text-decoration: none; } .menu-liste a .ic { width: 22px; height: 22px; color: var(--c-text-2); transition: transform .2s var(--ease), color .2s; } .menu-liste a:hover .ic, .menu-liste a:active .ic { transform: translateX(4px); color: var(--c-text); } .menu-liste a[aria-current="true"] span::before { /* aktuelle Seite: schräger Balken wie über den Überschriften */ content: ""; display: inline-block; width: 26px; height: 7px; margin-right: 12px; vertical-align: .32em; background: var(--gelb); transform: rotate(var(--neig)); } .menu-band { /* Telefon + Anfrage auf einem schrägen gelben Band wie das Leistungsband */ margin-inline: calc(var(--gutter) * -1); padding: calc(var(--s) + 20px) var(--gutter); background: var(--gelb); color: var(--auf-gelb); clip-path: polygon(0 var(--s), 100% 0, 100% calc(100% - var(--s)), 0 100%); } .menu-band-in { display: grid; gap: 10px; transform: rotate(var(--neig)); } .menu-tel { display: inline-flex; align-items: center; gap: 10px; font: 400 clamp(38px, 11vw, 52px)/1 var(--f-display); letter-spacing: .01em; text-decoration: none; } .menu-tel .ic { width: 26px; height: 26px; } .menu-anfrage { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 17px; text-decoration: none; } .menu-anfrage .ic { width: 20px; height: 20px; } .menu-fuss { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: auto; color: var(--c-text-2); font-size: 15px; line-height: 1.55; } .menu-adresse { margin: 0; } .menu-adresse a { text-decoration: none; } .modus-schalter { display: inline-flex; align-items: center; gap: 12px; padding: 6px 0; border: 0; background: none; color: var(--c-text); font: 600 15px/1 var(--f-text); cursor: pointer; } .schalter { position: relative; flex: none; width: 46px; height: 28px; border-radius: 14px; background: var(--c-alt-2); transition: background-color .2s; } .schalter i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .25s var(--ease); } .modus-schalter[aria-checked="true"] .schalter { background: var(--gelb); } .modus-schalter[aria-checked="true"] .schalter i { transform: translateX(18px); } .menu:not([hidden]) { animation: aufblenden .25s ease both; } .menu:not([hidden]) .menu-liste li { animation: menu-rein-zeile .5s var(--ease) both; animation-delay: calc(var(--i) * 35ms + 40ms); } .menu:not([hidden]) .menu-band, .menu:not([hidden]) .menu-fuss { animation: menu-rein .5s .26s var(--ease) both; } @keyframes menu-rein { from { opacity: 0; transform: translateY(10px); } } @keyframes menu-rein-zeile { from { opacity: 0; transform: translateY(10px) rotate(var(--neig)); } to { transform: rotate(var(--neig)); } } body.menu-offen { overflow: hidden; } body.menu-offen .kopf { background: var(--c-kopf-2); border-bottom-color: var(--c-linie); color: var(--c-text); } body.menu-offen .kopf .burger i { background: var(--c-text); } body.menu-offen .modus-btn { border-color: var(--c-linie); } @media (max-width: 760px) { /* mobil bleibt die Kopfzeile das weiße Band */ body.menu-offen .kopf { background: none; color: #393938; } body.menu-offen .kopf .burger i { background: #393938; } } /* ========================================================================== Hero – Video vollflächig, unten schräg angeschnitten; läuft ins gelbe Band über ========================================================================== */ .hero { position: relative; z-index: 1; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: max(600px, min(100svh, 1080px)); /* wächst mit, falls der Inhalt höher ist */ padding: calc(var(--kopf-h) + 56px) 0 calc(var(--s) + clamp(56px, 9vh, 120px)); background: #1C1C1B; color: #fff; } .hero-medien { position: absolute; inset: 0; z-index: -2; background: #1C1C1B; } .hero-medien picture { display: contents; } .hero-video { width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%; transform: translate3d(0, var(--hero-y, 0px), 0) scale(1.05); will-change: transform; } .hero::before { /* Schleier: links für die Schrift, oben für die Kopfzeile, unten zum Band */ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(22, 22, 21, .82) 0%, rgba(22, 22, 21, .58) 32%, rgba(22, 22, 21, .12) 60%, rgba(22, 22, 21, 0) 78%), linear-gradient(180deg, rgba(22, 22, 21, .6) 0%, rgba(22, 22, 21, 0) 20%, rgba(22, 22, 21, 0) 60%, rgba(22, 22, 21, .5) 100%); } .hero-inhalt { position: relative; } .hero-kante { display: block; width: 46px; height: 10px; margin-bottom: clamp(20px, 2.8vh, 30px); background: var(--gelb); transform: rotate(var(--neig)); transform-origin: 0 100%; } .hero-h1 { margin: 0 0 clamp(22px, 3.4vh, 36px); font: 400 clamp(64px, min(8.4vw, 13vh), 150px)/.86 var(--f-display); letter-spacing: .005em; color: #fff; } .hero-h1 .z { display: block; overflow: hidden; padding-top: .14em; margin-top: -.14em; padding-bottom: .03em; } .hero-h1 .z > span { display: block; } /* „Seit 1980.“ als Plakette: kleiner, nach rechts gerückt, liegt leicht über der Zeile darüber */ .hero-h1 .z-band { position: relative; z-index: 1; overflow: visible; margin-top: -.42em; padding: 0 0 0 2.5em; } .hero-h1 .z-band > span { position: relative; display: inline-block; padding: .16em .5em .08em; font-size: .56em; color: var(--auf-gelb); /* Bauschild: gelbe Tafel mit dunklem Rahmen und vier Schrauben in den Ecken */ background: radial-gradient(circle at .26em .26em, rgba(57, 57, 56, .5) 0 .04em, transparent .047em), radial-gradient(circle at calc(100% - .26em) .26em, rgba(57, 57, 56, .5) 0 .04em, transparent .047em), radial-gradient(circle at .26em calc(100% - .24em), rgba(57, 57, 56, .5) 0 .04em, transparent .047em), radial-gradient(circle at calc(100% - .26em) calc(100% - .24em), rgba(57, 57, 56, .5) 0 .04em, transparent .047em), var(--gelb); border: .07em solid var(--auf-gelb); transform: rotate(var(--neig)); transform-origin: 0 100%; box-shadow: 0 .12em .34em rgba(0, 0, 0, .38); } .hero-text { margin: 0 0 clamp(22px, 3.4vh, 34px); max-width: 44ch; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.55; color: rgba(255, 255, 255, .88); text-wrap: pretty; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; } .btn--hell { border-color: rgba(255, 255, 255, .7); background: transparent; color: #fff; } .btn--hell:hover { border-color: #fff; background: #fff; color: #1C1C1B; } .hero-pause { position: absolute; z-index: 2; right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); bottom: calc(var(--s) + clamp(28px, 5vh, 56px)); display: grid; place-items: center; width: 46px; height: 46px; padding: 0; cursor: pointer; border: 1.5px solid rgba(255, 255, 255, .5); border-radius: 50%; background: rgba(22, 22, 21, .3); color: #fff; transition: border-color .2s, background-color .2s; } .hero-pause:hover { border-color: #fff; background: rgba(22, 22, 21, .55); } .hero-pause .ic { width: 18px; height: 18px; } .hero-pause .p-play { display: none; } .hero-pause.ist-pausiert .p-play { display: inline; } .hero-pause.ist-pausiert .p-pause { display: none; } .intro .hero-medien { animation: aufblenden 1.4s ease both; } .intro .hero-kante { animation: auf .8s .05s var(--ease) both; } .intro .hero-h1 .z > span { animation: zeile .9s .1s var(--ease) both; } .intro .hero-h1 .z:nth-child(2) > span { animation-delay: .18s; } .intro .hero-h1 .z-band > span { animation: band-rein 1s .34s var(--ease) both; } .intro .hero-text, .intro .hero-ctas { animation: auf .8s .45s var(--ease) both; } @keyframes zeile { from { transform: translateY(105%); } } @keyframes band-rein { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(-40% -20% -60% -10%); } } @keyframes auf { from { opacity: 0; transform: translateY(14px); } } @keyframes aufblenden { from { opacity: 0; } } @media (max-width: 760px) { /* mobil: Der Startbereich füllt das Display, das Leistungsband kommt erst darunter. */ .hero { min-height: 100svh; padding: calc(var(--kopf-h) + var(--s) + 64px) 0 calc(var(--s) + 48px); } .hero-video { object-position: 66% 50%; } .hero::before { background: linear-gradient(180deg, rgba(22, 22, 21, .6) 0%, rgba(22, 22, 21, .1) 20%, rgba(22, 22, 21, .3) 45%, rgba(22, 22, 21, .88) 100%); } .hero-kante { width: 34px; height: 8px; } .hero-h1 { font-size: clamp(50px, 15vw, 76px); } .hero-text { font-size: 17px; } .hero-ctas .btn--hell { display: none; } .hero-ctas .btn { width: 100%; } .hero-pause { top: calc(var(--kopf-h) + env(safe-area-inset-top, 0px) + 22px); bottom: auto; width: 40px; height: 40px; } } @media (max-width: 760px) and (max-height: 700px) { .hero-text { display: none; } } /* ========================================================================== Schräge Bänder wie auf dem Banner ========================================================================== */ .band { position: relative; z-index: 3; margin-top: calc(-1 * var(--s)); padding: calc(var(--s) + 22px) var(--gutter) calc(var(--s) + 26px); background: var(--gelb); color: var(--auf-gelb); clip-path: polygon(0 var(--s), 100% 0, 100% calc(100% - var(--s)), 0 100%); } .band::before { /* Schatten des weißen Bandes, wie gedruckt */ content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(177.5deg, rgba(40, 40, 39, .34) 0, rgba(40, 40, 39, .12) 18px, rgba(40, 40, 39, 0) 44px); } .band-text { position: relative; margin: 0 auto; max-width: 1500px; text-align: center; text-wrap: balance; font: 400 clamp(32px, 3.8vw, 62px)/1.1 var(--f-display); letter-spacing: .01em; transform: rotate(var(--neig)); } .band-zeile { display: block; } .band-zeile + .band-zeile { margin-left: 6%; } .band-text a { text-decoration: none; text-decoration-thickness: 3px; text-underline-offset: 6px; white-space: nowrap; } .band-text a:hover { text-decoration-line: underline; } .band-item { white-space: nowrap; } .band-strich { opacity: .85; } .band-strich--ende { display: none; } @media (max-width: 760px) { .band-zeile { display: inline; } .band-zeile + .band-zeile { margin-left: 0; } .band-strich--ende { display: inline; } .band-text { font-size: min(7vw, 34px); } } .schraeg { position: relative; z-index: 2; margin-top: calc(-1 * var(--s)); padding-top: calc(var(--s) + clamp(64px, 8vw, 120px)) !important; clip-path: polygon(0 var(--s), 100% 0, 100% 100%, 0 100%); } /* ========================================================================== Zielgruppen – für wen wir arbeiten ========================================================================== */ .zielgruppen { position: relative; z-index: 1; background: var(--c-bg); padding-block: clamp(48px, 6vw, 90px) calc(var(--s) + clamp(72px, 9vw, 130px)); } .zg-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .zg-karte { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 20px; border-radius: 3px; background: var(--c-alt); } .zg-karte::before { content: ""; width: 34px; height: 8px; background: var(--gelb); transform: rotate(var(--neig)); transform-origin: 0 100%; } .zg-titel { margin: 0; font: 400 clamp(26px, 2.2vw, 32px)/1 var(--f-display); letter-spacing: .01em; text-wrap: balance; } .zg-karte p { margin: 0; color: var(--c-text-2); font-size: 16px; line-height: 1.55; } @media (max-width: 1100px) and (min-width: 761px) { .zg-liste { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .zielgruppen .kopfzeile { margin-bottom: 24px; } .zg-karte { padding: 18px 18px 16px; } } /* ========================================================================== Leistungen – je Arbeit ein eigener Ablauf ========================================================================== */ .leistungen { position: relative; z-index: 1; background: var(--c-bg); overflow: hidden; overflow: clip; padding-block: clamp(64px, 8vw, 110px) clamp(24px, 3vw, 48px); /* Maßstab der Szenen (px je Einheit): Handlung (900 Einheiten) ≈ zwei Drittel der Breite */ --sk: clamp(.62px, calc(68vw / 900), 1.15px); } .lei-liste { display: grid; } /* Desktop: Text oben in zwei Spalten, darunter die Szene als randloser Geländestreifen */ .leistung { position: relative; display: flex; flex-direction: column; padding-top: clamp(64px, 8vw, 120px); } .leistung:first-child { padding-top: 0; } .leistung-text { order: -1; position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px clamp(32px, 5vw, 96px); align-items: end; } .lt-kopf > p { margin: 0; max-width: 52ch; color: var(--c-text-2); } .leistung .punkte { margin-bottom: 20px; } .einsatz { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 15px; } .einsatz span { margin-right: 4px; color: var(--c-text-2); } .einsatz b { padding: 4px 10px; border-radius: 2px; background: var(--c-alt); font-weight: 600; } /* Szenen */ .sz { position: relative; height: calc(280 * var(--sk)); margin: 0; --mY: var(--gelb); --mY2: var(--gold); --mD: var(--sc-mD); --mS: var(--sc-mS); --mG: var(--sc-mG); --mK: var(--sc-mK); --mS2: var(--sc-mS2); --mL: var(--sc-mL); --mC: var(--sc-mC); --mC2: var(--sc-mC2); } /* Die Grafik ist viel breiter als der Inhalt; die Handlung (x 0…900) sitzt abwechselnd bündig links bzw. rechts an der Inhaltskante, Boden und Hügel laufen bis zum Rand */ .sz-svg { position: absolute; bottom: 0; left: calc(-1500 * var(--sk)); width: calc(3900 * var(--sk)); height: calc(280 * var(--sk)); max-width: none; } .leistung:nth-child(even) .sz-svg { left: calc(100% - 2400 * var(--sk)); } @media (min-width: 901px) { .leistungen { --sc-bg: var(--c-bg); --sc-huegel-1: color-mix(in srgb, var(--c-bg) 95%, #8F877A); --sc-huegel-2: color-mix(in srgb, var(--c-bg) 91%, #8F877A); } .sz-boden { mask: url(#m-boden); } } .rig { transform-box: view-box; } .fb { transform-box: fill-box; transform-origin: 50% 100%; } .fb-l { transform-box: fill-box; transform-origin: 0 50%; } .fb-r { transform-box: fill-box; transform-origin: 100% 50%; } .fb-rb { transform-box: fill-box; transform-origin: 100% 100%; } .fz, .rad, .schwungrad { transform-box: fill-box; transform-origin: 50% 50%; } /* Wortmarke auf den Maschinen: dreht sich um die eigene Mitte zurück, wenn die Maschine gespiegelt fährt */ .m-wort { transform-box: fill-box; transform-origin: 50% 50%; } .f-huegel1 { fill: var(--sc-huegel-1); } .f-huegel2 { fill: var(--sc-huegel-2); } .f-staub { fill: var(--sc-staub); } .kette { fill: none; stroke: var(--sc-kette); stroke-width: 2.2; stroke-dasharray: 3 3; } .abgas circle { fill: var(--sc-abgas); transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: abgas 2.1s linear infinite; } @keyframes abgas { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(7px, -26px) scale(2.8); opacity: 0; } } .schwungrad { animation: drehen 1.3s linear infinite; } @keyframes drehen { to { transform: rotate(-360deg); } } .ruetteln { animation: ruetteln .14s linear infinite; } @keyframes ruetteln { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(.5px, -.6px); } 75% { transform: translate(-.5px, .4px); } } .f-oben { fill: var(--sc-oben); } .f-lehm { fill: var(--sc-lehm); } .s-lehm { stroke: var(--sc-lehm-2); stroke-width: 1.4; fill: none; } .f-kies { fill: var(--sc-kies); } .s-kies { stroke: var(--sc-kies-2); stroke-width: 1.2; fill: none; } .f-rc { fill: var(--sc-rc); } .d-rc { fill: var(--sc-rc-2); } .f-schotter { fill: var(--sc-schotter); } .s-schotter { stroke: var(--sc-schotter-2); stroke-width: 2; } .f-verdichtet { fill: var(--sc-verdichtet); } .s-verdichtet { stroke: var(--sc-verdichtet-2); stroke-width: 1.2; } .f-mulch { fill: var(--sc-mulch); } .s-mulch { stroke: var(--sc-mulch-2); stroke-width: 1.2; } .f-erde { fill: var(--sc-erde); } .f-schutt { fill: var(--sc-schutt); } .f-brocken { fill: var(--sc-brocken); } .f-wand { fill: var(--sc-wand); } .f-dach { fill: var(--sc-dach); } .f-fenster { fill: var(--sc-fenster); } .f-strasse { fill: var(--sc-strasse); } .f-busch { fill: var(--sc-busch); } .f-busch2 { fill: var(--sc-busch-2); } .f-stamm { fill: var(--sc-stamm); } .f-luft { fill: var(--sc-bg); } .sc-linie { fill: none; stroke: var(--sc-tinte); stroke-linejoin: round; } .sc-kontur { stroke: var(--sc-tinte); stroke-linejoin: round; } .sc-soll { stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 10 7; } .sc-marke { fill: var(--gold); } .sc-dim { font: 600 16px var(--f-text); fill: var(--sc-tinte); } .sz .foerderband { fill: none; stroke: var(--sc-tinte); stroke-width: 2.5; stroke-dasharray: 6 7; animation: bandlauf .8s linear infinite; } @keyframes bandlauf { to { stroke-dashoffset: 13; } } .rieseln { animation: rieseln .9s linear infinite; } @keyframes rieseln { from { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } to { transform: translate(var(--drift, 0px), var(--fall, 30px)); opacity: 0; } } .span { fill: var(--sc-mulch); animation: spaene .55s linear infinite; } @keyframes spaene { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(14px, -16px); opacity: 0; } } .gnss path { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; animation: funk 1.8s ease-out infinite; } .gnss path:nth-child(2) { animation-delay: .25s; } .gnss path:nth-child(3) { animation-delay: .5s; } @keyframes funk { 0%, 100% { opacity: .15; } 30% { opacity: 1; } } .sz:not(.laeuft) * { animation-play-state: paused !important; } @media (max-width: 900px) { .kopfzeile { grid-template-columns: 1fr; } .leistung { display: grid; gap: 20px; padding-block: clamp(36px, 4.5vw, 64px); border-top: 1px solid var(--c-linie); } .leistung:first-child { padding-top: clamp(36px, 4.5vw, 64px); } .leistung-text { order: 0; display: block; } .lt-kopf > p { margin-bottom: 18px; } /* Mobil: randloser Streifen mit eigenem Himmel über dem Text */ .sz { width: calc(100% + 2 * var(--gutter)); height: auto; aspect-ratio: 900 / 340; margin-inline: calc(var(--gutter) * -1); overflow: hidden; background: var(--sc-bg); container-type: inline-size; } .sz-svg, .leistung:nth-child(even) .sz-svg { --skm: calc(100cqw / 900); left: calc(-1500 * var(--skm)); width: calc(3900 * var(--skm)); height: calc(280 * var(--skm)); } } /* ========================================================================== Fuhrpark – Maschinen mit Bild ========================================================================== */ .fuhrpark { background: var(--c-tief); color: var(--c-hell); padding-bottom: clamp(80px, 10vw, 140px); --mY: var(--gelb); --mY2: var(--gold); --mD: var(--fp-mD); --mS: var(--fp-mS); --mG: var(--fp-mG); --mK: var(--fp-mK); --mS2: var(--fp-mS2); --mL: var(--fp-mL); --mC: var(--fp-mC); --mC2: var(--fp-mC2); } .fuhrpark .lead { color: var(--c-hell-2); } .fp-gruppe { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px 32px; padding-block: 26px; border-top: 1px solid var(--c-linie-hell); } .fp-gruppe-titel { margin: 4px 0 0; font: 400 34px/1 var(--f-display); letter-spacing: .01em; } .fp-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .maschine { position: relative; padding: 14px 18px 18px; border-radius: 3px; background: var(--c-tief-2); } .maschine-bild { width: 100%; height: auto; aspect-ratio: 2 / 1; margin-bottom: 8px; } /* Foto statt Zeichnung: füllt dieselbe Fläche, formatunabhängig */ .maschine-foto { object-fit: cover; border-radius: 2px; background: var(--c-tief); } .maschine-name { margin: 0; font-size: 17px; font-weight: 600; } .maschine-wert { display: flex; align-items: baseline; gap: 3px; margin: 2px 0 0; color: var(--gelb); } .maschine-wert .zahl { font: 400 52px/1 var(--f-display); } .maschine-wert .einheit { font: 700 24px/1 var(--f-text); margin-left: 2px; } .maschine-label { margin: 2px 0 0; font-size: 14px; color: var(--c-hell-2); } .maschine-label--text { margin-top: 6px; font-size: 15px; line-height: 1.45; } .maschine-badge { position: absolute; top: 12px; left: 12px; margin: 0; padding: 4px 8px 2px; background: var(--gelb); color: var(--auf-gelb); border-radius: 2px; font: 400 16px/1 var(--f-display); letter-spacing: .04em; } .fp-extra { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--c-linie-hell); color: var(--c-hell-2); } @media (max-width: 900px) { .fp-gruppe { grid-template-columns: 1fr; } } .karussell-punkte { display: none; } @media (max-width: 760px) { /* Karussell: wischen, nächste Karte schaut hervor, Punkte zeigen die Position */ .fp-gruppe { gap: 14px; } .karussell { display: flex; gap: 10px; width: calc(100% + 2 * var(--gutter)); margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; } .karussell::-webkit-scrollbar { display: none; } .karussell > li { flex: 0 0 min(74%, 290px); scroll-snap-align: start; } .karussell-punkte { display: flex; gap: 6px; margin-top: 12px; } .fp-gruppe .karussell-punkte { margin-top: -2px; } .karussell-punkte i { width: 7px; height: 7px; border-radius: 4px; background: var(--c-linie); transition: width .25s var(--ease), background-color .25s; } .fuhrpark .karussell-punkte i { background: var(--c-linie-hell); } .karussell-punkte i.aktiv, .fuhrpark .karussell-punkte i.aktiv { width: 20px; background: var(--gelb); } } @media (max-width: 520px) { .maschine { padding: 12px 16px 16px; } .maschine-wert .zahl { font-size: 46px; } .maschine-name { font-size: 16px; } .maschine-badge { font-size: 14px; top: 8px; left: 8px; } } /* ========================================================================== Galerie + Leuchtkasten ========================================================================== */ .galerie { background: var(--c-bg); padding-block: clamp(80px, 10vw, 140px); } .gal-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 14vw, 220px); gap: 10px; margin: 0; padding: 0; list-style: none; } .gal-raster li:first-child { grid-column: span 2; grid-row: span 2; } .gal-bild { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 3px; overflow: hidden; background: #2B2A27; cursor: zoom-in; } .gal-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; transition: transform .7s var(--ease); } .gal-bild:hover img, .gal-bild:focus-visible img { transform: scale(1.04); } .gal-titel { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; text-align: left; color: #fff; font-weight: 600; font-size: 16px; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease); } .gal-bild .ic { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; opacity: 0; transition: opacity .3s; } .gal-bild:hover .gal-titel, .gal-bild:focus-visible .gal-titel { opacity: 1; transform: none; } .gal-bild:hover .ic, .gal-bild:focus-visible .ic { opacity: 1; } @media (hover: none) { .gal-titel { opacity: 1; transform: none; font-size: 14px; padding: 24px 10px 8px; } } @media (max-width: 700px) { .gal-raster { grid-template-columns: 1fr 1fr; grid-auto-rows: 36vw; gap: 6px; } } .leuchtkasten { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(14, 14, 13, .97); color: #fff; } .leuchtkasten::backdrop { background: rgba(0, 0, 0, .7); } .lk-figur { position: absolute; inset: 64px 84px 40px; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; touch-action: pan-y; } .lk-bild { max-width: 100%; max-height: calc(100% - 44px); object-fit: contain; border-radius: 2px; transition: opacity .25s; user-select: none; -webkit-user-drag: none; } .lk-bild.laedt { opacity: .2; } .lk-text { display: flex; justify-content: space-between; gap: 20px; width: 100%; max-width: 1200px; font-size: 17px; } .lk-zahl { color: rgba(255, 255, 255, .6); white-space: nowrap; } .lk-knopf { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; transition: background-color .2s; } .lk-knopf:hover { background: var(--gelb); color: var(--auf-gelb); } .lk-knopf .ic { width: 24px; height: 24px; } .lk-zurueck { left: 18px; top: calc(50% - 26px); } .lk-weiter { right: 18px; top: calc(50% - 26px); } .lk-zu { right: 18px; top: 14px; } @media (max-width: 700px) { .lk-figur { inset: 64px 10px 88px; } .lk-zurueck, .lk-weiter { top: auto; bottom: 20px; } .lk-zurueck { left: calc(50% - 64px); } .lk-weiter { right: calc(50% - 64px); } } /* ========================================================================== Familienbetrieb ========================================================================== */ .familie { background: var(--c-alt); padding-block: clamp(80px, 10vw, 140px) calc(var(--s) + clamp(80px, 10vw, 140px)); } .familie-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px); align-items: center; } /* Mit Film: Text links, Player rechts */ .familie-grid--film { grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); } .familie-bild--film { width: 100%; margin: 0; } .familie-bild { margin: 0; } .familie-bild img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 62% 70%; border-radius: 3px; } /* Film neben dem Text: lädt erst beim Klick, vorher steht nur das Standbild da */ .film { position: relative; } .film-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #1C1C1B; border-radius: 3px; } .film-start { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: none; cursor: pointer; color: var(--auf-gelb); } .film-start::before { content: ""; position: absolute; width: 76px; height: 76px; background: var(--gelb); transform: rotate(var(--neig)); box-shadow: 0 6px 22px rgba(0, 0, 0, .45); transition: transform .25s var(--ease); } .film-start .ic { position: relative; width: 34px; height: 34px; margin-left: 4px; } .film-start .p-voll { fill: currentColor; stroke: none; } .film-start:hover::before { transform: rotate(var(--neig)) scale(1.07); } .film-start[hidden] { display: none; } .familie-text .lead { margin-top: 22px; } .werte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: clamp(56px, 7vw, 96px) 0 0; } .wert { padding-top: 16px; border-top: 3px solid var(--gelb); } .wert dt { margin-bottom: 6px; font: 400 36px/1 var(--f-display); letter-spacing: .01em; } .wert dd { margin: 0; color: var(--c-text-2); } @media (max-width: 900px) { .familie-grid { grid-template-columns: 1fr; } .familie-bild img { aspect-ratio: 16 / 10; } .film-start::before { width: 60px; height: 60px; } .film-start .ic { width: 27px; height: 27px; } .werte { grid-template-columns: 1fr 1fr; gap: 28px 20px; } } @media (max-width: 480px) { .werte { grid-template-columns: 1fr; } } /* ========================================================================== Karriere ========================================================================== */ .karriere { background: var(--c-tief); color: var(--c-hell); padding-bottom: calc(var(--s) + clamp(80px, 10vw, 140px)); } .karriere .lead { margin-top: 22px; color: var(--c-hell-2); } .karriere-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 96px); align-items: center; } .karriere-bild { margin: 0; } .karriere-bild img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: 42% 60%; border-radius: 3px; } /* Was wir bieten */ .kar-vorteile-titel { margin: 30px 0 12px; font: 700 14px/1.2 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--gelb); } .kar-vorteile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin: 0; padding: 0; list-style: none; } .kar-vorteile li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; line-height: 1.4; } .kar-vorteile .ic { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--gelb); stroke-width: 2.6; } /* Offene Stellen – kommen aus dem Backend, beliebig viele */ .stellen-kopf { display: flex; align-items: baseline; gap: 14px; margin: clamp(48px, 6vw, 80px) 0 18px; } .stellen-titel { margin: 0; font: 400 clamp(34px, 3vw, 44px)/1 var(--f-display); letter-spacing: .01em; } .stellen-zahl { display: inline-grid; place-items: center; min-width: 1.15em; height: 1.15em; margin-left: .2em; padding: 0 .2em; background: var(--gelb); color: var(--auf-gelb); font-size: .62em; vertical-align: .22em; transform: rotate(var(--neig)); } .stellen { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .stelle { position: relative; border-radius: 3px; background: var(--c-tief-2); } .stelle-det > summary { list-style: none; } .stelle-det > summary::-webkit-details-marker { display: none; } .stelle-sum { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 44px; grid-template-areas: "meta kurz auf" "titel kurz auf"; align-items: center; gap: 4px clamp(20px, 3vw, 48px); padding: 22px clamp(20px, 2.4vw, 30px); cursor: pointer; border-radius: 3px; } .stelle-sum::before { /* schräger gelber Balken links, wächst beim Öffnen */ content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 5px; background: var(--gelb); transform: scaleY(.35); transform-origin: 50% 0; transition: transform .3s var(--ease); } .stelle-sum:hover { background: rgba(255, 255, 255, .04); } .stelle-sum:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; } .stelle-det[open] > .stelle-sum::before { transform: scaleY(1); } .stelle-meta { grid-area: meta; font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--gelb); } .stelle-titel { grid-area: titel; font: 400 clamp(30px, 2.6vw, 40px)/1 var(--f-display); letter-spacing: .01em; } .stelle-titel small, .bew-kopf small { font: 600 .5em/1 var(--f-text); letter-spacing: 0; margin-left: .3em; vertical-align: .25em; opacity: .8; } .stelle-kurz { grid-area: kurz; color: var(--c-hell-2); font-size: 17px; line-height: 1.45; } .stelle-auf { grid-area: auf; position: relative; width: 44px; height: 44px; border: 1.5px solid var(--c-linie-hell); border-radius: 50%; transition: border-color .2s, transform .3s var(--ease); } .stelle-auf i { position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: currentColor; transition: transform .3s var(--ease); } .stelle-auf i + i { transform: rotate(90deg); } .stelle-sum:hover .stelle-auf { border-color: var(--gelb); } .stelle-det[open] .stelle-auf { border-color: var(--gelb); } .stelle-det[open] .stelle-auf i + i { transform: rotate(0deg); } .stelle-inhalt { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 24px clamp(20px, 3vw, 48px); align-items: end; margin: 0 clamp(20px, 2.4vw, 30px); padding: 22px 0 26px; border-top: 1px solid var(--c-linie-hell); } .stelle-det[open] .stelle-inhalt { animation: stelle-auf .35s var(--ease) both; } @keyframes stelle-auf { from { opacity: 0; transform: translateY(-6px); } } .stelle-spalte { align-self: start; } .stelle-spalte h4 { margin: 0 0 12px; font: 700 14px/1.2 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--c-hell-2); } .stelle-spalte .punkte { color: var(--c-hell); } .stelle-spalte .punkte li { font-weight: 500; } /* Initiativ / keine Stellen */ .stelle--initiativ { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 22px clamp(20px, 2.4vw, 30px); background: transparent; border: 1.5px dashed rgba(255, 255, 255, .28); } .stelle-init-titel { margin: 0; font: 400 clamp(26px, 2.2vw, 32px)/1 var(--f-display); letter-spacing: .01em; } .stelle-init-text { margin: 6px 0 0; color: var(--c-hell-2); font-size: 16px; } .stelle--leer { padding: 22px clamp(20px, 2.4vw, 30px); color: var(--c-hell-2); } .stelle--leer p { margin: 0; } .btn--linie-hell { border-color: rgba(255, 255, 255, .6); background: transparent; color: var(--c-hell); flex: none; } .btn--linie-hell:hover { border-color: var(--gelb); background: var(--gelb); color: var(--auf-gelb); } .karriere-hinweis { margin: 18px 0 0; color: var(--c-hell-2); font-size: 16px; } @media (max-width: 900px) { .karriere-grid { grid-template-columns: 1fr; } .karriere-bild { order: -1; } .karriere-bild img { aspect-ratio: 16 / 9; } .stelle-sum { grid-template-columns: minmax(0, 1fr) 40px; grid-template-areas: "meta auf" "titel auf" "kurz kurz"; gap: 4px 16px; padding: 18px 18px 18px 22px; } .stelle-kurz { margin-top: 6px; font-size: 16px; } .stelle-auf { width: 40px; height: 40px; align-self: start; } .stelle-inhalt { grid-template-columns: 1fr; margin: 0 18px 0 22px; padding: 18px 0 20px; gap: 20px; } .stelle-aktion .btn { width: 100%; } .stelle--initiativ { flex-direction: column; align-items: stretch; padding: 20px 18px 20px 22px; } } @media (max-width: 560px) { .kar-vorteile { grid-template-columns: 1fr; } } .bewerbung { width: min(520px, calc(100vw - 24px)); max-height: calc(100svh - 24px); padding: 0; border: 0; border-radius: 4px; background: var(--c-karte); color: var(--c-text); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5); } .bewerbung::backdrop { background: rgba(24, 24, 23, .62); } /* Handy: Dialog an das sichtbare Fenster binden, damit die Tastatur ihn nicht verdeckt */ @media (max-width: 760px) { .bewerbung { width: 100vw; max-width: none; border-radius: 0; max-height: var(--vv-h, calc(100svh - 12px)); margin: 0; inset: var(--vv-top, 0px) auto auto 0; } .bew-kopf { position: sticky; top: 0; z-index: 2; background: var(--c-karte); } } .bew-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--c-linie); } .bew-kopf h3 { margin: 0; font: 400 30px/1 var(--f-display); letter-spacing: .01em; } .bew-vor { display: block; margin-bottom: 6px; font: 700 13px/1.2 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-2); } .bew-zu { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; } .bew-inhalt { display: grid; gap: 16px; padding: 20px 22px; } .bew-fuss { padding: 0 22px 22px; } .bew-danke { padding: 36px 22px 28px; text-align: center; } .bew-danke h3 { margin: 0 0 6px; font: 400 36px/1 var(--f-display); } .bew-danke p { margin: 0 0 20px; color: var(--c-text-2); } .bew-fehler { margin: 0; color: #C2412A; font-weight: 600; font-size: 16px; } /* ========================================================================== Formularelemente ========================================================================== */ .feld { display: grid; gap: 6px; } .feld > span { font-size: 15px; font-weight: 700; } .feld em { font-style: normal; font-weight: 400; color: var(--c-text-2); } .feld input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .feld textarea, .feld select { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--c-feld-rand); border-radius: 3px; background: var(--c-feld); font-size: 18px; transition: border-color .2s, box-shadow .2s; } .feld textarea { min-height: 96px; resize: vertical; line-height: 1.45; } .feld input::placeholder, .feld textarea::placeholder { color: var(--c-text-2); opacity: .8; } .feld input:focus, .feld textarea:focus, .feld select:focus { outline: none; border-color: var(--c-text); box-shadow: 0 0 0 3px var(--gelb); } .feld [aria-invalid="true"] { border-color: #C2412A !important; } .datei { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; cursor: pointer; } .datei input { position: absolute; opacity: 0; width: 1px; height: 1px; } .datei .btn { min-height: 44px; padding: 8px 16px; font-size: 16px; pointer-events: none; } .datei:hover .btn { background: var(--c-btn); color: var(--c-btn-text); } .datei:has(input:focus-visible) .btn { outline: 3px solid var(--gelb); outline-offset: 2px; } .datei-info { font-size: 15px; color: var(--c-text-2); } .feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .segment { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .segment--klein { grid-template-columns: repeat(3, minmax(0, 1fr)); } .segment label, .kachel { position: relative; display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 10px 14px; border: 1.5px solid var(--c-feld-rand); border-radius: 3px; background: var(--c-feld); cursor: pointer; font-size: 16px; font-weight: 600; line-height: 1.25; transition: border-color .2s, background-color .2s; } .segment label { justify-content: center; text-align: center; } .segment input, .kachel input { position: absolute; opacity: 0; pointer-events: none; } .segment label:hover, .kachel:hover { border-color: var(--c-text); } .segment label:has(input:checked), .kachel:has(input:checked) { border-color: var(--c-text); background: var(--c-wahl); box-shadow: inset 0 0 0 1px var(--c-text); } .segment label:has(input:focus-visible), .kachel:has(input:focus-visible) { outline: 3px solid var(--gelb); outline-offset: 2px; } .kachel .ic { margin-left: auto; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s var(--ease); } .kachel:has(input:checked) .ic { opacity: 1; transform: none; } .check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--c-text-2); cursor: pointer; } .check input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--gelb); } /* ========================================================================== Anfrage-Assistent ========================================================================== */ .anfrage { background: var(--c-anf-bg); color: var(--c-anf-text); padding-bottom: calc(var(--s) + clamp(80px, 10vw, 140px)); } .anfrage .lead { margin-top: 18px; color: var(--c-anf-text); } .anfrage-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-rows: auto 1fr; gap: 0 clamp(32px, 6vw, 96px); align-items: start; } .anfrage-grid .assistent { grid-column: 2; grid-row: 1 / span 2; } .direkt { grid-column: 1; grid-row: 2; margin-top: 38px; padding-top: 22px; border-top: 2px solid var(--c-anf-akzent); } .direkt-label { margin: 0 0 6px; font-weight: 700; } .direkt-tel { display: block; color: var(--c-anf-akzent); font: 400 clamp(56px, 6vw, 88px)/1 var(--f-display); text-decoration: none; letter-spacing: .01em; } .direkt-tel:hover { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; } .direkt-mail { display: inline-block; margin-top: 8px; font-weight: 700; font-size: 19px; } .direkt-adresse { margin: 18px 0 0; font-size: 16px; } .assistent { position: relative; display: grid; gap: 22px; padding: clamp(20px, 3vw, 40px); background: var(--c-karte); color: var(--c-text); border-radius: 4px; box-shadow: 0 34px 60px -36px rgba(0, 0, 0, .55); } .as-fortschritt { display: grid; gap: 10px; } .as-stand { margin: 0; font-size: 15px; color: var(--c-text-2); } .as-stand b { color: var(--c-text); } .as-balken { height: 6px; background: var(--c-alt-2); border-radius: 3px; overflow: hidden; } .as-balken span { display: block; height: 100%; width: 33.34%; background: var(--c-text); transition: width .5s var(--ease); } .as-seite { display: block; margin: 0; padding: 0; border: 0; min-width: 0; } .as-seite > * + * { margin-top: 18px; } .as-frage { display: block; width: 100%; margin: 0 0 14px; padding: 0; font: 400 clamp(40px, 3.6vw, 52px)/.95 var(--f-display); letter-spacing: .01em; } .as-frage:focus { outline: none; } .as-hilfe { margin-bottom: 0; font-size: 15px; color: var(--c-text-2); } .as-frage + .as-hilfe { margin-top: -6px; } .kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .kacheln--wer .kachel { min-height: 46px; } .as-unter { margin: 26px 0 0; padding: 0; border: 0; min-width: 0; } .as-unterfrage { margin: 0 0 12px; padding: 0; font: 400 clamp(28px, 2.4vw, 34px)/1 var(--f-display); letter-spacing: .01em; } .as-unterfrage small { margin-left: 8px; font: 500 14px/1 var(--f-text); letter-spacing: 0; color: var(--c-text-2); } .as-nav { display: flex; gap: 10px; justify-content: flex-end; } .as-nav .btn { min-width: 140px; } .as-zurueck { margin-right: auto; } .as-fehler { margin: 0; padding: 10px 14px; border-left: 4px solid #C2412A; background: rgba(194, 65, 42, .1); color: var(--c-text); font-weight: 600; font-size: 16px; } .as-danke { display: grid; justify-items: start; gap: 12px; } .as-danke:focus { outline: none; } .as-danke-schild { position: relative; display: grid; place-items: center; width: 64px; height: 68px; } .as-danke-schild .schild { position: absolute; inset: 0; fill: var(--gelb); } .as-danke-schild .ic { position: relative; width: 30px; height: 30px; stroke-width: 2.6; margin-top: 6px; color: var(--auf-gelb); } .as-danke h3 { margin: 0; font: 400 clamp(34px, 3vw, 44px)/1 var(--f-display); } .as-danke p { margin: 0; color: var(--c-text-2); } .as-zusammenfassung { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; width: 100%; margin: 8px 0; padding: 16px; background: var(--c-alt); border-radius: 3px; font-size: 16px; } .as-zusammenfassung dt { font-weight: 700; } .as-zusammenfassung dd { margin: 0; color: var(--c-text-2); } .as-seite.kommt { animation: seite .45s var(--ease) both; } @keyframes seite { from { opacity: 0; transform: translateX(18px); } } @media (max-width: 900px) { .anfrage-grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 32px; } .anfrage-grid .assistent, .direkt { grid-column: auto; grid-row: auto; } .direkt { margin-top: 8px; } } @media (max-width: 760px) { .anfrage { padding-bottom: calc(var(--s) + 40px); } .direkt-adresse { display: none; } /* steht direkt darunter im Footer */ } @media (max-width: 520px) { .kacheln, .feld-reihe { grid-template-columns: 1fr; } .as-nav .btn { min-width: 0; flex: 1; } .as-zurueck { margin-right: 0; } } /* ========================================================================== Fußzeile ========================================================================== */ /* Footer wie das Bauzaun-Banner: weißes Band mit Logo, darunter Anthrazit, Motto als Schlusssatz */ .fuss { position: relative; z-index: 3; margin-top: calc(-1 * var(--s)); } .fuss a { text-decoration: none; } .fuss-band { /* Absperrband (Gelb/Anthrazit) rahmt das weiße Band oben und unten, beide im Winkel der Bänder */ position: relative; z-index: 2; padding-block: 13px; background: repeating-linear-gradient(-45deg, #393938 0 13px, var(--gelb) 13px 26px); clip-path: polygon(0 var(--s), 100% 0, 100% calc(100% - var(--s)), 0 100%); } .fuss-band-weiss { background: #fff; color: #393938; padding: calc(var(--s) + clamp(22px, 2.6vw, 36px)) 0 calc(var(--s) + clamp(22px, 2.6vw, 36px)); clip-path: polygon(0 var(--s), 100% 0, 100% calc(100% - var(--s)), 0 100%); } .fuss-band-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(20px, 3vw, 48px); } .fuss-logo { display: block; line-height: 0; } .fuss-logo svg { width: clamp(180px, 17vw, 240px); height: auto; --logo-dunkel: #393938; } .fuss-anschrift { margin: 0; font-size: 16px; line-height: 1.55; color: #55544F; } .fuss-anschrift b { display: block; color: #393938; } .fuss-anschrift .fa-str::after { content: " · "; } .fuss-direkt { display: grid; justify-items: end; gap: 4px; } .fuss-tel { display: inline-flex; align-items: center; gap: 10px; color: #393938; font: 400 clamp(38px, 3.6vw, 54px)/1 var(--f-display); letter-spacing: .01em; } .fuss-tel .ic { width: 26px; height: 26px; color: var(--gold); } .fuss-tel:hover { text-decoration: underline; text-decoration-color: var(--gelb); text-decoration-thickness: 4px; text-underline-offset: 6px; } .fuss-mail { font-weight: 600; font-size: 16px; color: #55544F; } .fuss-mail:hover { color: #393938; text-decoration: underline; } .fuss-dunkel { position: relative; z-index: 1; margin-top: calc(-1 * var(--s)); background: var(--c-tief); color: var(--c-hell-2); padding: calc(var(--s) + clamp(48px, 6vw, 80px)) 0 28px; } .fuss-grid + .fuss-unten { margin-top: clamp(48px, 6vw, 80px); } .fuss-dunkel::before { /* Schatten unter dem weißen Band, wie gedruckt */ content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(177.5deg, rgba(0, 0, 0, .38) 0, rgba(0, 0, 0, .12) 22px, rgba(0, 0, 0, 0) 52px); } .fuss-dunkel a:hover { color: var(--gelb); } .fuss-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } .fuss-h { margin: 0 0 16px; color: var(--c-hell); font: 400 24px/1 var(--f-display); letter-spacing: .04em; } .fuss ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 16px; } .fuss-cta { margin-top: 20px; gap: 8px; } .fuss-dunkel .fuss-cta:hover { color: var(--auf-gelb); } .fuss-unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 20px; font-size: 15px; background: linear-gradient(var(--c-linie-hell), var(--c-linie-hell)) no-repeat var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px; } .fuss-unten p { margin: 0; } .fuss-hoch { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .fuss-hoch .ic { width: 18px; height: 18px; } @media (max-width: 1000px) { .fuss-band-in { grid-template-columns: auto minmax(0, 1fr); } .fuss-direkt { grid-column: 1 / -1; justify-items: start; } .fuss-grid { grid-template-columns: 1fr 1fr; } } .fuss-recht { display: none; } @media (max-width: 600px) { /* Mobil: Logo und Anschrift im weißen Band, darunter nur Rechtliches und Copyright – zentriert, kompakt */ .fuss-band-weiss { padding-block: calc(var(--s) + 14px); } .fuss-band-in { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; } .fuss-logo svg { width: 140px; } .fuss-anschrift { font-size: 14.5px; line-height: 1.5; } .fuss-anschrift b { display: none; } .fuss-anschrift .fa-str { display: block; } .fuss-anschrift .fa-str::after { content: none; } .fuss-direkt, .fuss-grid { display: none; } .fuss-dunkel { padding: calc(var(--s) + 20px) 0 calc(22px + env(safe-area-inset-bottom, 0px)); } .fuss-grid + .fuss-unten { margin-top: 0; } .fuss-unten { flex-direction: column; justify-content: center; gap: 4px; padding-top: 0; background: none; text-align: center; font-size: 13px; } .fuss-recht { display: block; order: -1; font-size: 15px; font-weight: 600; color: var(--c-hell); } .fuss-ort, .fuss-hoch { display: none; } } /* ========================================================================== Mobil: schlichter Anruf-Knopf (erscheint nach dem Hero) ========================================================================== */ .anruf-knopf { display: none; } @media (max-width: 760px) { .anruf-knopf { position: fixed; z-index: 50; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 3px; background: var(--gelb); color: var(--auf-gelb); box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .55); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .3s, transform .35s var(--ease); } .anruf-knopf.is-sichtbar { opacity: 1; transform: none; pointer-events: auto; } .anruf-knopf.is-sichtbar.ist-verdeckt { opacity: 0; transform: translateY(14px); pointer-events: none; } .anruf-knopf .ic { width: 25px; height: 25px; stroke-width: 2.1; } } /* ========================================================================== Reduzierte Bewegung: Szenen zeigen ein Standbild ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body *:not(.sz *) { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .sz * { animation-play-state: paused !important; } .hero-video { transform: none; } } /* ========================================================================== Textseiten (Impressum, Datenschutz, 404) ========================================================================== */ .textseite { padding: calc(var(--kopf-h) + clamp(48px, 7vw, 96px)) 0 calc(var(--s) + clamp(64px, 8vw, 120px)); background: var(--c-bg); } .textseite-in > * { max-width: 820px; } .textseite h1 { margin-bottom: clamp(24px, 3vw, 40px); } .textseite-inhalt { font-size: 17px; line-height: 1.65; color: var(--c-text); } .textseite-inhalt h2 { margin: 2em 0 .5em; font: 400 clamp(28px, 2.4vw, 34px)/1.05 var(--f-display); letter-spacing: .01em; } .textseite-inhalt h3 { margin: 1.6em 0 .4em; font-size: 18px; font-weight: 700; } .textseite-inhalt p, .textseite-inhalt ul { margin: 0 0 1em; } .textseite-inhalt ul { padding-left: 1.2em; } .textseite-inhalt a { overflow-wrap: anywhere; text-decoration-color: var(--gelb); text-decoration-thickness: 2px; text-underline-offset: 3px; } @media (max-width: 760px) { .textseite { padding-top: calc(var(--kopf-h) + var(--s) + 36px); } } /* ========================================================================== Formularversand ========================================================================== */ .hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* Lockfeld für Spam-Bots */ .btn.ist-beschaeftigt, .btn:disabled { cursor: progress; opacity: .75; } .bew-hinweis { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--c-text-2); } .bew-hinweis a { color: inherit; text-decoration-color: var(--gelb); text-decoration-thickness: 2px; text-underline-offset: 3px; }