@charset "UTF-8"; /* ========================================================= AVCI Abriss — Stylesheet Reihenfolge: Schriften · Tokens · Reset · Grundtypografie · Bausteine · Header · Hero · Laufband Mobile-first. Genau drei Breakpoints: 640 / 900 / 1200. Media-Queries stehen immer bei ihrer Komponente. ========================================================= */ /* ---------- Schriften ---------------------------------- */ /* Bewusst hier und nicht in einer eigenen Datei: ein zweites Stylesheet im würde das Rendern ein weiteres Mal blockieren. Variable Fonts — eine Datei deckt alle Schnitte und Breiten ab. */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 62% 100%; font-display: swap; src: url(assets/fonts/archivo-var-latin.woff2) format('woff2'); /* Enthält Latin Extended-A: türkische Schreibweisen wie ş oder ğ sollen nicht auf eine Systemschrift zurückfallen. Deshalb gibt es keine getrennte latin-ext-Datei mehr — eine Datei weniger, die überhaupt geladen werden könnte. */ unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/jetbrainsmono-var-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Tokens ------------------------------------- */ :root { /* Fläche und Text — Grau trägt, Schwarz gibt Tiefe */ --black: #0d0e10; --ink: #1c1e21; --ink-2: #26292d; --grey-700: #3d4247; --grey-500: #6b7178; --grey-300: #a8adb3; --grey-150: #d6d8da; --grey-100: #ebebeb; --paper: #f5f5f4; --white: #ffffff; /* Signal — sparsam. Auf der Startseite an höchstens fünf Stellen. */ --signal: #ffd400; --signal-dk: #e0b800; /* Abstände */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; /* Fluide Typo-Skala */ --step--1: clamp(.78rem, .74rem + .18vw, .86rem); --step-0: clamp(1rem, .96rem + .2vw, 1.09rem); --step-1: clamp(1.15rem, 1.08rem + .35vw, 1.35rem); --step-2: clamp(1.4rem, 1.25rem + .75vw, 1.9rem); --step-3: clamp(1.8rem, 1.45rem + 1.75vw, 2.9rem); --step-4: clamp(2.4rem, 1.7rem + 3.5vw, 4.4rem); --step-5: clamp(3rem, 1.4rem + 8vw, 7rem); --step-6: clamp(3.4rem, .9rem + 11vw, 9.5rem); /* Die Aussage im Hero darf die Bildschirmhöhe nicht sprengen. Nur an der Breite bemessen wurde sie auf 1366x768 zu hoch und schob das Formular unter die Falz. */ --step-hero: min(var(--step-6), 12.4svh); --wrap: 1280px; --ease: cubic-bezier(.22, 1, .36, 1); --shadow-1: 0 1px 2px rgba(13, 14, 16, .08); --shadow-2: 0 24px 60px rgba(13, 14, 16, .18); /* Wird vom Scroll-Handler gesetzt: 0 = ganz oben, 1 = Hero verlassen */ --shatter: 0; } /* ---------- Reset -------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--grey-100); color: var(--ink); font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: var(--step-0); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, picture, video { display: block; max-width: 100%; } picture { display: contents; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; } h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } :focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; } /* Auf gelber Fläche wäre gelber Fokus unsichtbar */ .on-signal :focus-visible { outline-color: var(--black); } .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--signal); color: var(--black); padding: var(--s3) var(--s5); font-weight: 700; text-decoration: none; } .skip:focus { left: 0; } .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---------- Grundtypografie ---------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s5); } @media (min-width: 900px) { .wrap { padding-inline: var(--s7); } } /* Display: kondensiert, Versalien, eng. Trägt die Statements. */ .display { font-stretch: 66%; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: .9; margin: 0; text-wrap: balance; } /* Meta: Monospace für Nummern, Maße, Labels */ .meta { font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; /* --grey-500 ergab auf hellem Grund nur 3,9:1 und lag damit unter dem AA-Schwellwert von 4,5:1. */ color: var(--grey-700); } /* Fließtext bleibt lesbar schmal */ .lead { font-size: var(--step-1); line-height: 1.5; max-width: 34ch; } .prose { max-width: 68ch; } .prose p + p { margin-top: var(--s4); } /* ---------- Bausteine: Buttons ------------------------- */ .btn { --btn-bg: var(--signal); --btn-fg: var(--black); display: inline-flex; align-items: center; justify-content: center; gap: var(--s3); min-height: 56px; padding: var(--s3) var(--s6); background: var(--btn-bg); color: var(--btn-fg); border: 2px solid var(--btn-bg); border-radius: 0; font-weight: 700; font-stretch: 88%; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); } .btn:hover { background: var(--signal-dk); border-color: var(--signal-dk); } .btn:active { transform: translateY(1px); } /* Outline-Variante für den zweitrangigen Weg */ .btn-line { --btn-bg: transparent; --btn-fg: var(--white); border-color: var(--grey-500); } .btn-line:hover { background: var(--white); color: var(--black); border-color: var(--white); } .btn-dark { --btn-bg: var(--black); --btn-fg: var(--white); } .btn-dark:hover { background: var(--ink-2); border-color: var(--ink-2); } .btn-block { width: 100%; } .btn svg { width: 20px; height: 20px; flex: none; fill: currentColor; } /* ---------- Bausteine: Bruchkante ---------------------- */ /* Trennt die Bänder statt einer geraden Kante. Der Pfad wird über preserveAspectRatio auf jede Breite gezogen. */ /* Sitzt am oberen Rand eines Bandes und trägt die Farbe des Bandes darüber — die vorige Fläche bricht ins nächste hinein. preserveAspectRatio="none" zieht den Zackenzug auf jede Breite. Bewusst nur an drei Übergängen, sonst wird das Motiv zur Tapete. */ .bruch { /* Absolut gesetzt und um die eigene Höhe nach oben geschoben: die Kante liegt vollständig im Band darüber und greift nicht in den Textfluss ein. Mit negativen Außenabständen rückten die Überschriften darunter zu dicht heran. */ position: absolute; top: 0; left: 0; width: 100%; height: clamp(16px, 2.4vw, 34px); transform: translateY(-100%); z-index: 2; pointer-events: none; } /* Die Kante trägt die Farbe ihres EIGENEN Bandes und ragt nach oben in das Band darüber — das untere bricht nach oben durch. Andersherum war sie schwarz auf schwarz und damit unsichtbar. */ .bruch-hell { fill: var(--paper); } .bruch-dunkel { fill: var(--ink); } .bruch-schwarz { fill: var(--black); } .bruch-gelb { fill: var(--signal); } /* ---------- Bausteine: Korn ---------------------------- */ /* Feiner Staubfilm über den dunklen Flächen. Ein gekacheltes SVG-Rauschen, kein Canvas — kostet nichts. */ .grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); } /* ---------- Header ------------------------------------- */ .header { position: fixed; inset: 0 0 auto; z-index: 100; color: var(--white); transition: background .3s var(--ease), border-color .3s var(--ease); border-bottom: 1px solid transparent; } .header.scrolled { background: rgba(13, 14, 16, .94); backdrop-filter: blur(10px); border-bottom-color: var(--grey-700); } .header-inner { display: flex; align-items: center; gap: var(--s5); min-height: 68px; padding-block: var(--s3); } .brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: inherit; flex: none; } .brand svg { width: 44px; height: auto; color: var(--white); } /* Der Name steht als Schrift neben der Marke, nicht in der Grafik: gezeichnete Wortmarken zerfallen bei kleiner Größe. */ .brand-tag { /* Auf jeder Breite sichtbar: die Marke zeigt nur die Initialen, der Firmenname steht ausschließlich in dieser Zeile. */ display: block; font-family: 'JetBrains Mono', monospace; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grey-300); border-left: 1px solid var(--grey-700); padding-left: var(--s3); line-height: 1.45; } .brand-tag b { display: block; font-family: 'Archivo', sans-serif; font-stretch: 78%; font-weight: 800; font-size: 1.02rem; letter-spacing: .01em; color: var(--white); line-height: 1; margin-bottom: 2px; } .header-spacer { flex: 1 1 auto; } .nav { display: none; } .nav a { text-decoration: none; font-size: var(--step--1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: var(--s2) 0; border-bottom: 2px solid transparent; transition: border-color .18s var(--ease), color .18s var(--ease); } .nav a:hover { border-bottom-color: var(--signal); } .nav a[aria-current="page"] { border-bottom-color: var(--signal); } /* Telefon steht auf jeder Breite im Kopf — Anfragen kommen in diesem Gewerk überwiegend als Anruf. */ .header-tel { display: flex; align-items: center; gap: var(--s2); text-decoration: none; font-family: 'JetBrains Mono', monospace; font-size: var(--step--1); font-weight: 700; letter-spacing: .02em; white-space: nowrap; } .header-tel svg { width: 17px; height: 17px; fill: var(--signal); flex: none; } .header-tel span { display: none; } .header-cta { display: none; min-height: 44px; padding-inline: var(--s5); font-size: var(--step--1); } .burger { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; background: none; border: 1px solid var(--grey-700); cursor: pointer; padding: 0; } .burger span { display: block; width: 20px; height: 2px; background: var(--white); box-shadow: 0 -6px 0 var(--white), 0 6px 0 var(--white); transition: background .2s var(--ease), box-shadow .2s var(--ease); } /* Bei offenem Menü werden die drei Balken zum X. Vorher wurden sie nur ausgeblendet — der Knopf war dann leer und niemand sah, wie sich das Menü wieder schließen lässt. */ .burger::before, .burger::after { content: ''; position: absolute; top: 50%; left: 50%; width: 22px; height: 2px; background: var(--signal); opacity: 0; transform: translate(-50%, -50%); transition: opacity .2s var(--ease), transform .2s var(--ease); } .nav-open .burger span { background: transparent; box-shadow: none; } .nav-open .burger { border-color: var(--signal); } .nav-open .burger::before { opacity: 1; transform: translate(-50%, -50%) rotate(45deg); } .nav-open .burger::after { opacity: 1; transform: translate(-50%, -50%) rotate(-45deg); } @media (min-width: 640px) { .brand svg { width: 52px; } .brand-tag { font-size: .62rem; } .brand-tag b { font-size: 1.12rem; } .header-tel span { display: inline; } } @media (min-width: 900px) { .header-inner { min-height: 84px; gap: var(--s6); } .nav { display: flex; gap: var(--s6); } .header-cta { display: inline-flex; } .burger { display: none; } } /* ---------- Mobiles Menü ------------------------------- */ .nav-panel { position: fixed; inset: 0; z-index: 99; display: grid; align-content: center; gap: var(--s5); padding: var(--s8) var(--s5); background: var(--black); color: var(--white); visibility: hidden; opacity: 0; /* visibility schaltet beim Öffnen sofort und beim Schließen erst nach dem Ausblenden. Stünde sie in der Transition, wäre das Menü in den ersten Millisekunden noch unsichtbar — und ein unsichtbares Element kann keinen Fokus annehmen. */ transition: opacity .25s var(--ease), visibility 0s linear .25s; } .nav-open .nav-panel { visibility: visible; opacity: 1; transition: opacity .25s var(--ease), visibility 0s; } .nav-open { overflow: hidden; } .nav-panel a { text-decoration: none; font-stretch: 70%; font-weight: 800; font-size: var(--step-3); text-transform: uppercase; line-height: 1.05; border-bottom: 1px solid var(--grey-700); padding-bottom: var(--s3); } .nav-panel a:hover { color: var(--signal); } .nav-panel .meta { color: var(--grey-500); } @media (min-width: 900px) { .nav-panel { display: none; } } /* ---------- Hero --------------------------------------- */ .hero { position: relative; background: var(--black); color: var(--white); overflow: hidden; isolation: isolate; } .hero-grid { position: relative; display: grid; } .hero-main { display: flex; flex-direction: column; /* Die Aussage sitzt im oberen Drittel, nicht am unteren Rand. Unten geklebt wirkte sie abgesackt und ließ über sich eine tote Bildfläche stehen. */ justify-content: center; gap: var(--s5); padding: calc(68px + var(--s6)) var(--s5) var(--s7); /* Der Deckel verhindert, dass auf hohen Tablets eine tote Bildfläche über der Aussage stehen bleibt. */ min-height: min(80svh, 660px); } /* Das Foto liegt hinter dem gesamten Hero, nicht nur hinter der linken Spalte — sonst stößt die Kopfzeile auf der gelben Fläche an und weiße Schrift auf Gelb wäre unlesbar. */ .hero-bg { position: absolute; inset: 0; z-index: -2; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; } /* Der Verlauf ist nicht Dekoration: er sichert den Kontrast der Typo gegen ein Foto, dessen Helligkeit wir nicht steuern. */ .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,14,16,.86) 0%, rgba(13,14,16,.55) 35%, rgba(13,14,16,.92) 100%), linear-gradient(90deg, rgba(13,14,16,.8) 0%, rgba(13,14,16,.25) 70%); } .hero-marke { display: flex; align-items: center; gap: var(--s3); color: var(--grey-300); } .hero-marke::before { content: ''; width: clamp(24px, 6vw, 64px); height: 2px; background: var(--signal); flex: none; } .hero h1 { font-size: var(--step-hero); color: var(--white); } /* Zertrümmerung: jeder Buchstabe steht als eigener Span im Markup (nicht per JS erzeugt — sonst flackert es beim Laden). Versatz und Drehung sind pro Buchstabe gesetzt, nicht zufällig. Nur transform und opacity, also kein Reflow. */ /* Jeder Buchstabe bricht entlang einer waagerechten Kante in zwei Hälften, die beim Scrollen auseinanderlaufen. Die Hälften sind Pseudo-Elemente mit content: attr(data-l) — der Text steht nur einmal im Markup und bleibt für Screenreader über die .vh-Zeile lesbar. Animiert wird ausschließlich transform. */ .shard { position: relative; display: inline-block; color: transparent; will-change: transform; transform: translate(calc(var(--dx, 0) * var(--shatter) * 1px), calc(var(--dy, 0) * var(--shatter) * 1px)) rotate(calc(var(--r, 0) * var(--shatter) * 1deg)); } .shard-luecke { color: inherit; } .shard::before, .shard::after { content: attr(data-l); position: absolute; inset: 0; color: var(--white); will-change: transform; } /* obere Hälfte: kippt leicht nach links weg */ .shard::before { clip-path: polygon(0 0, 100% 0, 100% 46%, 68% 52%, 34% 44%, 0 51%); transform: translate(calc(var(--shatter) * -3px), calc(var(--shatter) * -5px)) rotate(calc(var(--r, 0) * var(--shatter) * -.6deg)); } /* untere Hälfte: sackt nach unten ab */ .shard::after { clip-path: polygon(0 51%, 34% 44%, 68% 52%, 100% 46%, 100% 100%, 0 100%); transform: translate(calc(var(--shatter) * 3px), calc(var(--shatter) * 9px)) rotate(calc(var(--r, 0) * var(--shatter) * .8deg)); } /* Splitter fallen vor dem Hero herunter */ .splitter { position: absolute; inset: 0; /* Über dem Foto (-2), aber hinter Text und Formularkarte — sonst rieseln Bruchstücke über die Eingabefelder. */ z-index: -1; pointer-events: none; } .hero h1 .zeile { display: block; } .hero-lead { color: var(--grey-300); max-width: 42ch; } /* Nachweis-Zeile: der stärkste Vertrauensbeweis, direkt über den CTAs */ .hero-nachweis { display: inline-flex; align-items: center; gap: var(--s3); align-self: start; padding: var(--s2) var(--s4) var(--s2) var(--s3); border: 1px solid var(--grey-700); background: rgba(13, 14, 16, .5); } .hero-nachweis svg { width: 18px; height: 18px; fill: var(--signal); flex: none; } .hero-nachweis .meta { color: var(--white); } .hero-cta { display: grid; gap: var(--s3); } /* Formularkarte — auf dem Handy unter den Kontaktknöpfen, ab 1200 px daneben und damit ohne Scrollen im Bild. Ab Tablet eine abgesetzte Karte: so bleibt rundum das dunkle Foto stehen und die Kopfzeile läuft nie über Gelb. */ .hero-aside { display: flex; } .hero-form { position: relative; flex: 1; background: var(--signal); color: var(--black); padding: var(--s6) var(--s5) var(--s7); } .hero-form h2 { font-size: var(--step-2); margin-block: var(--s1) var(--s5); } .hero-form .meta { color: rgba(13, 14, 16, .7); } .feld { display: block; margin-bottom: var(--s2); } .feld > span { display: block; font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--s1); } .feld input, .feld select, .feld textarea { width: 100%; padding: var(--s3) var(--s4); min-height: 48px; background: var(--white); color: var(--black); border: 2px solid var(--black); border-radius: 0; font-size: var(--step-0); } .feld textarea { resize: vertical; min-height: 68px; } .feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 3px solid var(--black); outline-offset: 1px; } /* Honigtopf gegen Bots — für Menschen unerreichbar */ .honig { position: absolute; left: -9999px; opacity: 0; } .form-hinweis { margin-top: var(--s3); } .form-hinweis a { color: var(--black); } /* Einwilligung in die Drittlandsübermittlung. Das Kästchen ist mit 24 px kleiner als die empfohlene Trefferfläche, aber das ganze Label schaltet mit — angeklickt wird also ein Block über die volle Spaltenbreite, nicht das Kästchen allein. Alle Formulare stehen auf gelbem Grund, deshalb durchgehend Schwarz: Weiß auf Gelb ergäbe 1,3:1. */ .zustimmung { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; margin: var(--s4) 0 var(--s3); cursor: pointer; } .zustimmung input { width: 24px; height: 24px; margin: 0; accent-color: var(--black); cursor: pointer; } .zustimmung input:focus-visible { outline: 3px solid var(--black); outline-offset: 2px; } .zustimmung span { font-size: .78rem; line-height: 1.45; color: var(--black); } .zustimmung a { color: var(--black); } @media (min-width: 640px) { .hero-main { padding-inline: var(--s7); } .hero-cta { grid-auto-flow: column; justify-content: start; } .hero-aside { padding: 0 var(--s7) var(--s7); } .hero-form { padding: var(--s6) var(--s6) var(--s7); } } @media (min-width: 1200px) { .hero-grid { grid-template-columns: minmax(0, 1.3fr) minmax(420px, .7fr); align-items: center; } .hero-main { min-height: min(86svh, 700px); padding-left: max(var(--s7), calc((100vw - var(--wrap)) / 2 + var(--s7))); padding-right: var(--s6); } .hero-aside { padding: calc(84px + var(--s3)) max(var(--s7), calc((100vw - var(--wrap)) / 2 + var(--s7))) var(--s5) 0; align-items: center; } .hero-form { padding: var(--s6); box-shadow: var(--shadow-2); } } /* ---------- Laufband ----------------------------------- */ .laufband { background: var(--ink); color: var(--white); border-block: 1px solid var(--grey-700); overflow: hidden; padding-block: var(--s3); } .laufband-spur { display: flex; width: max-content; animation: laufband 38s linear infinite; } .laufband-spur > * { flex: none; } .laufband span { font-stretch: 70%; font-weight: 700; font-size: var(--step-1); text-transform: uppercase; letter-spacing: .04em; padding-inline: var(--s5); } .laufband span::after { content: '·'; margin-left: var(--s5); color: var(--signal); } @keyframes laufband { to { transform: translateX(-50%); } } .laufband:hover .laufband-spur, .laufband-paused .laufband-spur { animation-play-state: paused; } /* ---------- Reveal ------------------------------------- */ .reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* ---------- Reduzierte Bewegung ------------------------ */ /* Ein Ausschalter für alles Bewegte, an einer Stelle. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .reveal { opacity: 1; transform: none; } .shard { transform: none; } .shard::before, .shard::after { transform: none; } .splitter { display: none; } .laufband-spur { animation: none; } } /* ---------- Band (Abschnitts-Grundform) ---------------- */ .band { position: relative; padding-block: clamp(48px, 7vw, 96px); } .band-dunkel { background: var(--ink); color: var(--white); } .band-schwarz { background: var(--black); color: var(--white); } .band-hell { background: var(--paper); } .band-dunkel .meta, .band-schwarz .meta { color: var(--grey-300); } .band-kopf { display: grid; gap: var(--s4); margin-bottom: var(--s7); } .band-kopf h2 { font-size: var(--step-4); } .band-marke { display: flex; align-items: center; gap: var(--s3); } .band-marke::before { content: ''; width: clamp(24px, 5vw, 56px); height: 2px; background: var(--signal); flex: none; } @media (min-width: 900px) { .band-kopf { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: end; } .band-kopf .band-marke { grid-column: 1 / -1; } } /* ---------- Vertrauensleiste --------------------------- */ .vertrauen { background: var(--black); color: var(--white); padding-block: var(--s6); } .vertrauen ul { display: grid; gap: var(--s5); } .vertrauen li { display: grid; gap: var(--s1); padding-left: var(--s4); border-left: 2px solid var(--signal); } .vertrauen b { font-stretch: 80%; font-size: var(--step-1); font-weight: 700; line-height: 1.2; } .vertrauen span { color: var(--grey-300); font-size: var(--step--1); } @media (min-width: 640px) { .vertrauen ul { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .vertrauen ul { grid-template-columns: repeat(4, 1fr); } } /* ---------- Leistungen --------------------------------- */ .leistung { display: grid; gap: var(--s6); align-items: center; } .leistung + .leistung { margin-top: clamp(48px, 8vw, 96px); } .leistung h3 { font-stretch: 70%; font-weight: 800; text-transform: uppercase; font-size: var(--step-3); line-height: .95; letter-spacing: -.02em; margin-bottom: var(--s4); } /* Gelb als Textfarbe auf hellem Grund ergibt 1,31:1 und ist unlesbar. Die Nummer steht deshalb dunkel, das Signal übernimmt ein vorangestellter Strich. */ .leistung .nr { font-family: 'JetBrains Mono', monospace; font-size: var(--step--1); letter-spacing: .12em; color: var(--grey-700); display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s2); } .leistung .nr::before { content: ''; width: 22px; height: 2px; background: var(--signal); flex: none; } .band-dunkel .leistung .nr, .band-schwarz .leistung .nr { color: var(--grey-300); } .leistung ul { display: grid; gap: var(--s2); margin-block: var(--s5); } .leistung li { padding-left: var(--s5); position: relative; color: inherit; } .leistung li::before { content: ''; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--signal); } /* Bild bricht beim Eintreten auf wie eine Wand — reine clip-path-Animation, kein Skript pro Bild. */ .aufbruch { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } .reveal.aufbruch { clip-path: polygon(0 46%, 22% 52%, 48% 44%, 74% 53%, 100% 46%, 100% 54%, 74% 60%, 48% 52%, 22% 61%, 0 54%); } .reveal.aufbruch.in { clip-path: polygon(0 0, 22% 0, 48% 0, 74% 0, 100% 0, 100% 100%, 74% 100%, 48% 100%, 22% 100%, 0 100%); transition: clip-path .9s var(--ease), opacity .5s var(--ease), transform .5s var(--ease); } @media (prefers-reduced-motion: reduce) { .reveal.aufbruch, .reveal.aufbruch.in { clip-path: none; } } @media (min-width: 900px) { .leistung { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); } .leistung-gedreht .leistung-bild { order: -1; } } /* ---------- Asbest: Warnband und Verdacht -------------- */ /* Die Schraffur steht genau einmal auf der Seite. Zweimal eingesetzt verliert sie ihre Signalwirkung. */ .warnband { height: 14px; background: repeating-linear-gradient(-45deg, var(--signal) 0 18px, var(--black) 18px 36px); } .verdacht { border: 2px solid var(--signal); padding: var(--s5); margin-top: var(--s6); display: grid; gap: var(--s3); } .verdacht h3 { font-stretch: 78%; font-weight: 800; text-transform: uppercase; font-size: var(--step-2); } .verdacht ul { display: grid; gap: var(--s2); margin: 0; } .verdacht li { padding-left: var(--s5); position: relative; } .verdacht li::before { content: '×'; position: absolute; left: 0; color: var(--signal); font-weight: 700; } /* ---------- Ablauf: Bauphasen -------------------------- */ .schritte { display: grid; gap: var(--s6); counter-reset: schritt; } .schritt { position: relative; padding-top: var(--s5); border-top: 2px solid var(--grey-700); } .band-hell .schritt { border-top-color: var(--grey-150); } .schritt::before { counter-increment: schritt; content: '0' counter(schritt); font-family: 'JetBrains Mono', monospace; font-size: var(--step--1); letter-spacing: .1em; color: var(--signal); display: block; margin-bottom: var(--s2); } /* Bemaßungslinie wie in einer technischen Zeichnung */ .schritt::after { content: ''; position: absolute; top: -2px; left: 0; width: 26px; height: 10px; border-left: 2px solid var(--signal); border-right: 2px solid var(--signal); } .schritt h3 { font-stretch: 80%; font-weight: 700; text-transform: uppercase; font-size: var(--step-1); margin-bottom: var(--s2); } .schritt p { color: var(--grey-300); font-size: var(--step--1); line-height: 1.55; } .band-hell .schritt p { color: var(--grey-700); } @media (min-width: 640px) { .schritte { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .schritte { grid-template-columns: repeat(4, 1fr); gap: var(--s5); } } /* ---------- Panorama-Band ------------------------------ */ .panorama { position: relative; background: var(--black); color: var(--white); overflow: hidden; } .panorama img { width: 100%; height: clamp(280px, 46vw, 560px); object-fit: cover; opacity: .5; } .panorama-text { position: absolute; inset: 0; display: grid; align-content: center; gap: var(--s4); } .panorama-text h2 { font-size: var(--step-5); } /* ---------- Einsatzgebiet ------------------------------ */ .orte { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); } .orte li { border: 1px solid var(--grey-700); padding: var(--s2) var(--s4); font-family: 'JetBrains Mono', monospace; font-size: var(--step--1); letter-spacing: .06em; } .band-hell .orte li { border-color: var(--grey-150); } /* ---------- FAQ ---------------------------------------- */ .faq { display: grid; } .faq-item { border-top: 1px solid var(--grey-150); } .faq-item:last-child { border-bottom: 1px solid var(--grey-150); } .faq-item summary { display: flex; align-items: baseline; gap: var(--s4); padding: var(--s5) 0; cursor: pointer; list-style: none; font-stretch: 82%; font-weight: 700; font-size: var(--step-1); line-height: 1.25; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; margin-left: auto; flex: none; font-family: 'JetBrains Mono', monospace; font-weight: 400; font-size: var(--step-2); line-height: 1; color: var(--signal); } .faq-item[open] summary::after { content: '–'; } .faq-item .antwort { padding-bottom: var(--s5); max-width: 68ch; color: var(--grey-700); } .faq-item .antwort p + p { margin-top: var(--s3); } /* ---------- Kontaktband -------------------------------- */ .kontakt-wege { display: grid; gap: var(--s4); margin-top: var(--s6); } @media (min-width: 640px) { .kontakt-wege { grid-auto-flow: column; justify-content: start; } } .kontakt-daten { display: grid; gap: var(--s4); margin-top: var(--s7); } .kontakt-daten div { display: grid; gap: var(--s1); } .kontakt-daten a { text-decoration: none; font-weight: 600; } .kontakt-daten a:hover { color: var(--signal); } @media (min-width: 640px) { .kontakt-daten { grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--s8); } } /* ---------- Fußzeile ----------------------------------- */ .footer { background: var(--black); color: var(--grey-300); padding-block: var(--s8) var(--s6); font-size: var(--step--1); } .footer a { text-decoration: none; } .footer a:hover { color: var(--signal); } .footer-oben { display: grid; gap: var(--s7); } .footer .brand svg { width: 62px; color: var(--white); } .footer h3 { font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; /* --grey-500 ergab auf Schwarz nur 3,92:1 */ color: var(--grey-300); margin-bottom: var(--s3); font-weight: 400; } .footer li + li { margin-top: var(--s2); } .footer-unten { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--grey-700); } .footer-unten .spacer { flex: 1 1 auto; } @media (min-width: 640px) { .footer-oben { grid-template-columns: 1.2fr 1fr 1fr 1.3fr; gap: var(--s6); } } /* ---------- Feste Kontaktleiste auf dem Handy ---------- */ /* Blendet sich aus, sobald ein Formular im Bild ist — sonst deckt sie genau das ab, was ausgefüllt werden soll. */ .mobil-leiste { position: fixed; inset: auto 0 0; z-index: 90; display: grid; grid-template-columns: 1fr 1fr; transform: translateY(0); transition: transform .3s var(--ease); } .mobil-leiste a { min-height: 58px; border-width: 0; } .mobil-leiste .btn-line { background: var(--ink); color: var(--white); } .form-sichtbar .mobil-leiste, .hero-sichtbar .mobil-leiste { transform: translateY(100%); } @media (min-width: 900px) { .mobil-leiste { display: none; } } body { padding-bottom: 58px; } @media (min-width: 900px) { body { padding-bottom: 0; } } /* ---------- Anfragebereich ----------------------------- */ .anfrage-grid { display: grid; gap: var(--s7); } .anfrage-karte { background: var(--signal); color: var(--black); padding: var(--s6) var(--s5) var(--s7); } .anfrage-karte h3 { font-size: var(--step-2); margin-bottom: var(--s5); } .anfrage-karte .meta { color: rgba(13, 14, 16, .7); } @media (min-width: 640px) { .anfrage-karte { padding: var(--s6); } } @media (min-width: 900px) { .anfrage-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr); gap: var(--s8); align-items: start; } } /* ---------- Korrekturen Leistungsblock ----------------- */ /* Der Verdachtskasten liegt innerhalb von .leistung und erbte dadurch dessen gelben Aufzählungsstrich — zusammen mit dem eigenen Kreuz ergab das zwei Marken pro Zeile. */ .verdacht li::before { content: '×'; width: auto; height: auto; background: none; top: 0; line-height: 1.6; } /* Das Bild folgt der Textspalte, statt in ihrer Mitte zu schweben. Hochformat, weil die Textspalten hier lang sind. */ .leistung { align-items: start; } .leistung-bild img { width: 100%; } @media (min-width: 900px) { .leistung-bild { position: sticky; top: calc(84px + var(--s5)); } .leistung-bild img { aspect-ratio: 4 / 3; object-fit: cover; } } /* ---------- Unterseiten -------------------------------- */ /* Höhere Spezifität als .subhero .wrap — sonst gewinnt dort das kleinere padding-block und die Brotkrumen rutschen unter die feststehende Kopfzeile. */ .subhero .wrap.brotkrumen { padding-top: calc(68px + var(--s6)); padding-bottom: 0; } .brotkrumen ol { display: flex; flex-wrap: wrap; gap: var(--s2); } .brotkrumen li::after { content: '/'; margin-left: var(--s2); color: var(--grey-500); } .brotkrumen li:last-child::after { content: none; } .brotkrumen a { text-decoration: none; } .brotkrumen a:hover { color: var(--signal); } @media (min-width: 900px) { .subhero .wrap.brotkrumen { padding-top: calc(84px + var(--s6)); } } .subhero { background: var(--black); color: var(--white); position: relative; } .subhero .wrap { padding-block: var(--s5) clamp(48px, 7vw, 96px); } .subhero h1 { font-size: var(--step-5); margin-block: var(--s4) var(--s5); } .subhero .lead { color: var(--grey-300); max-width: 46ch; } .subhero .hero-cta { margin-top: var(--s6); } /* ---------- Kopfbild der Unterseiten -------------------- */ /* Graustufen sind in die Datei gebacken, nicht per CSS-filter — ein Filter auf einem formatfüllenden Foto kostet auf Handys spürbar Paint-Zeit, in der Pipeline kostet er nichts. Erzeugt werden die Dateien mit `suffix: '-kopf'` und `mono: true` in tools/build-images.mjs. */ .subhero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .subhero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Wie beim Startseiten-Hero ist der Verlauf keine Dekoration, sondern sichert den Kontrast der Typo gegen ein Foto, dessen Helligkeit wir nicht steuern. Ohne ihn steht weiße Schrift auf hellen Bildstellen — bei einem Asbestdach im Gegenlicht oder einer Kölner Skyline sofort unlesbar. Er liegt deshalb nicht zur Wahl. */ .subhero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,14,16,.92) 0%, rgba(13,14,16,.62) 45%, rgba(13,14,16,.88) 100%), linear-gradient(90deg, rgba(13,14,16,.9) 0%, rgba(13,14,16,.35) 75%); } /* Inhalt über das Bild heben — sonst verschluckt der Verlauf ihn. */ .subhero.hat-kopfbild .wrap { position: relative; z-index: 1; } /* Aufbrech-Maske: das Bild wird beim Laden hinter einer Bruchkante freigelegt. Dieselbe Geometrie wie bei den Leistungsbildern der Startseite, nur waagerecht über die volle Breite. Animiert wird ausschließlich clip-path, also ohne Layout-Neuberechnung. */ /* Die Verschiebung aus `.reveal` wird hier zurückgenommen: das Bild liegt auf inset:0, ein translateY würde oben einen Spalt aufreißen. Das Aufblenden bleibt und läuft mit der Bruchkante zusammen. */ .subhero-bg.reveal { transform: none; } .subhero-bg.aufbruch-kopf { clip-path: polygon(0 44%, 18% 51%, 42% 43%, 63% 52%, 84% 44%, 100% 50%, 100% 56%, 84% 62%, 63% 55%, 42% 60%, 18% 53%, 0 58%); } .subhero-bg.aufbruch-kopf.in { clip-path: polygon(0 0, 18% 0, 42% 0, 63% 0, 84% 0, 100% 0, 100% 100%, 84% 100%, 63% 100%, 42% 100%, 18% 100%, 0 100%); transition: clip-path 1s var(--ease); } @media (prefers-reduced-motion: reduce) { .subhero-bg.aufbruch-kopf, .subhero-bg.aufbruch-kopf.in { clip-path: none; transition: none; } } .detail-grid { display: grid; gap: var(--s7); } .detail-haupt h2 { font-stretch: 74%; font-weight: 800; text-transform: uppercase; font-size: var(--step-3); line-height: .98; letter-spacing: -.02em; margin-top: var(--s7); margin-bottom: var(--s4); } .detail-haupt h2:first-child { margin-top: 0; } .detail-haupt p + p { margin-top: var(--s4); } .detail-haupt ul { display: grid; gap: var(--s2); margin-block: var(--s4); } .detail-haupt ul li { padding-left: var(--s5); position: relative; } .detail-haupt ul li::before { content: ''; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--signal); } .detail-haupt > * { max-width: 68ch; } .aside-karte { background: var(--white); border: 1px solid var(--grey-150); padding: var(--s5); display: grid; gap: var(--s4); } .aside-karte dl { display: grid; gap: var(--s2); margin: 0; } .aside-karte dt { font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-500); } .aside-karte dd { margin: 0; font-weight: 600; } @media (min-width: 900px) { .detail-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: var(--s8); align-items: start; } } /* Die Infospalte klebt nur, wenn sie vollständig auf den Schirm passt. Ein klebendes Element, das höher ist als das Fenster, bleibt oben hängen und sein unteres Ende ist nie zu sehen — man muss die ganze Seite durchscrollen, um es zu erfassen. Gemessen: 729 px Karte gegen 660 px verfügbare Höhe auf einem 768-px-Notebook. */ @media (min-width: 900px) and (min-height: 900px) { .detail-aside { position: sticky; top: calc(84px + var(--s5)); } } /* Auf flachen Schirmen zusätzlich straffen, damit die Karte ohne Sticky nicht unnötig lang wird. */ @media (min-width: 900px) and (max-height: 899px) { .aside-karte figure { display: none; } .aside-karte { gap: var(--s3); } .aside-karte dl { gap: var(--s2); } } .abgrenzung { display: grid; gap: var(--s5); margin-top: var(--s6); } .abgrenzung > div { padding: var(--s5); border: 1px solid var(--grey-150); background: var(--white); } .abgrenzung h3 { font-stretch: 82%; font-weight: 700; text-transform: uppercase; font-size: var(--step-1); margin-bottom: var(--s3); } .abgrenzung ul { display: grid; gap: var(--s2); } .abgrenzung li { padding-left: var(--s5); position: relative; } .abgrenzung .ja li::before { content: '✓'; position: absolute; left: 0; color: var(--signal); font-weight: 700; } .abgrenzung .nein li::before { content: '×'; position: absolute; left: 0; color: var(--grey-500); font-weight: 700; } @media (min-width: 640px) { .abgrenzung { grid-template-columns: 1fr 1fr; } } .rel-karten { display: grid; gap: var(--s4); margin-top: var(--s6); } .rel-karte { display: grid; gap: var(--s2); padding: var(--s5); border: 1px solid var(--grey-700); text-decoration: none; transition: border-color .18s var(--ease), background .18s var(--ease); } .rel-karte:hover { border-color: var(--signal); background: var(--ink-2); } .rel-karte b { font-stretch: 80%; font-weight: 700; text-transform: uppercase; font-size: var(--step-1); } .rel-karte span { color: var(--grey-300); font-size: var(--step--1); } @media (min-width: 640px) { .rel-karten { grid-template-columns: 1fr 1fr; } } .cta-band { background: var(--signal); color: var(--black); } .cta-band .meta { color: rgba(13, 14, 16, .7); } .cta-band h2 { font-size: var(--step-4); margin-block: var(--s3) var(--s5); } /* ---------- Rechtsseiten ------------------------------- */ .recht { background: var(--paper); } .recht .wrap { max-width: 780px; } .recht h1 { font-size: var(--step-4); margin-bottom: var(--s6); } .recht h2 { font-stretch: 80%; font-weight: 700; text-transform: uppercase; font-size: var(--step-1); margin-top: var(--s7); margin-bottom: var(--s3); } .recht p + p, .recht ul { margin-top: var(--s3); } .recht ul li { padding-left: var(--s4); position: relative; } .recht ul li::before { content: '—'; position: absolute; left: 0; color: var(--grey-500); } .recht address { font-style: normal; } /* ---------- Flache Bildschirme --------------------------- */ /* Notebooks mit 768 px Höhe sind verbreitet. Ohne diesen Block ragte der Hero dort über die Falz und die Anfrage war nicht mehr im ersten Bild. */ @media (min-width: 1200px) and (max-height: 820px) { .hero-main { min-height: min(88svh, 600px); padding-bottom: var(--s5); gap: var(--s4); } .hero-aside { padding-top: calc(84px + var(--s2)); padding-bottom: var(--s4); } .hero-form { padding: var(--s5); } .hero-form h2 { font-size: var(--step-1); margin-block: 0 var(--s3); } .hero-lead { display: none; } .feld > span { font-size: .64rem; } .feld input, .feld select, .feld textarea { min-height: 42px; padding-block: var(--s2); } .feld textarea { min-height: 54px; } .hero-form .btn { min-height: 48px; } } /* ---------- Ausklappbare Leistungen --------------------- */ /* Ohne JavaScript: :focus-within deckt die Tastaturbedienung ab, :hover die Maus. Ausgezeichnet als verschachtelte Liste, nicht als role="menu" — das ist ein Anwendungsmuster und für reine Navigation die falsche Rolle. */ /* Nur die oberste Ebene liegt waagerecht. Ohne den Kindselektor erbte auch das Untermenü display:flex — und stand dann als Zeile statt als Liste im Bild. */ .nav > ul { display: flex; gap: var(--s6); align-items: center; } .nav-item { position: relative; } /* Unsichtbare Brücke zwischen Menüpunkt und Klappe: ohne sie schließt das Menü, sobald die Maus die Lücke überquert. */ .nav-item.hat-untermenue::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: var(--s4); } .nav-top { display: inline-flex; align-items: center; gap: var(--s2); } .nav-top::after { content: ''; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease); } .nav-item:hover .nav-top::after, .nav-item:focus-within .nav-top::after { transform: translateY(1px) rotate(225deg); } .untermenue { position: absolute; /* Bündig unter dem Menüpunkt, nicht versetzt. */ top: 100%; left: 0; min-width: 262px; display: grid; gap: 0; padding: var(--s2) 0; background: var(--black); border: 1px solid var(--grey-700); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s; } .nav-item:hover .untermenue, .nav-item:focus-within .untermenue { opacity: 1; visibility: visible; transform: none; transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s; } /* Die Listenpunkte und die Links müssen Blockelemente sein. Als inline-Element reichte die Hover-Fläche nur so weit wie der Text — bei unterschiedlich langen Einträgen ergab das lauter verschieden breite Kästen. */ .untermenue li { display: block; } .untermenue a { display: block; width: 100%; padding: var(--s3) var(--s5); border-bottom: 0; text-transform: none; letter-spacing: .02em; font-size: var(--step--1); white-space: nowrap; } .untermenue a:hover, .untermenue a:focus-visible { background: var(--ink-2); color: var(--signal); border-bottom: 0; } .untermenue a[aria-current="page"] { color: var(--signal); } /* Im Handy-Menü hängen die Leistungen eingerückt unter dem Punkt */ .nav-panel .unterpunkte { display: grid; gap: var(--s3); margin: calc(var(--s3) * -1) 0 var(--s2) var(--s4); } .nav-panel .unterpunkte a { font-size: var(--step-1); font-stretch: 84%; font-weight: 600; border-bottom: 0; padding-bottom: 0; color: var(--grey-300); } .nav-panel .unterpunkte a:hover { color: var(--signal); } /* Querverweis-Karten auf hellem Grund */ .rel-hell { border-color: var(--grey-150); background: var(--white); } .rel-hell:hover { border-color: var(--signal); background: var(--paper); } .rel-hell span { color: var(--grey-700); } /* ---------- Klickflächen auf dem Handy ------------------ */ /* Unter 44 px sind Links auf Touchgeräten schwer zu treffen. Gemessen lagen Kopfzeilen-Telefon, Untermenü, Fußzeile und die Datenschutz-Verlinkung bei 17 bis 20 px. */ @media (max-width: 899px) { .brand { min-height: 44px; } .header-tel { min-height: 44px; padding-inline: var(--s2); } .nav-panel .unterpunkte a { padding-block: var(--s2); } .footer a, .footer li { display: inline-block; min-height: 32px; padding-block: 6px; } .footer-unten a { padding: 10px 0; } .form-hinweis a { display: inline-block; padding-block: 8px; } .kontakt-daten a { display: inline-block; padding-block: 8px; } .brotkrumen a { display: inline-block; padding-block: 6px; } } /* ---------- Kontrast auf dunklem Grund ------------------ */ /* .meta steht auf hellem Grund in --grey-700. Auf schwarzen Flächen ergäbe das 1,9:1. Diese Flächen tragen nicht alle die Klasse .band-dunkel, deshalb hier vollständig aufgeführt. */ .band-dunkel .meta, .band-schwarz .meta, .panorama .meta, .hero .meta, .nav-panel .meta, .footer .meta, .subhero .meta { color: var(--grey-300); } .hero-form .meta, .anfrage-karte .meta, .cta-band .meta { color: rgba(13, 14, 16, .72); } /* ---------- Klickflächen auf 44 px ---------------------- */ @media (max-width: 899px) { .nav-panel .unterpunkte a { padding-block: var(--s4); } .footer a, .footer li { min-height: 46px; padding-block: 12px; } .footer-unten a { padding: 13px 0; } .form-hinweis a, .kontakt-daten a, .brotkrumen a { padding-block: 12px; } } /* ---------- Anfrage-Symbol auf dem Handy ---------------- */ /* Auf schmalen Schirmen fehlte der Weg zum Formular in der Kopfzeile — es gab nur Telefon und Menü. Das Symbol ist gelb gefüllt, weil die Anfrage die Hauptaktion ist; Telefon und Menü bleiben zurückhaltend. */ .header-anfrage { display: grid; place-items: center; width: 44px; height: 44px; flex: none; background: var(--signal); color: var(--black); border: 2px solid var(--signal); transition: background .18s var(--ease), border-color .18s var(--ease); } .header-anfrage svg { width: 21px; height: 21px; fill: currentColor; } .header-anfrage:hover { background: var(--signal-dk); border-color: var(--signal-dk); } .header-anfrage:focus-visible { outline-color: var(--white); } /* Ab Tablet übernimmt der beschriftete Knopf */ @media (min-width: 900px) { .header-anfrage { display: none; } } /* Erst auf sehr schmalen Geräten weicht der Firmenname. Bei 390 px — der verbreitetsten Handybreite — bleibt er stehen: die Marke zeigt nur die Initialen, ohne die Zeile stünde dort kein Firmenname mehr. */ @media (max-width: 379px) { .brand-tag { display: none; } } @media (max-width: 460px) { .header-inner { gap: var(--s3); } } /* ---------- Anfragebereich auf den Unterseiten ---------- */ /* Bisher endeten die Unterseiten mit einem Knopf, der auf die Startseite sprang. Wer nach 1000 Wörtern Fachtext anfragen will, soll das dort tun können, wo er gerade ist. */ .cta-grid { display: grid; gap: var(--s7); } .cta-lead { max-width: 38ch; margin-block: var(--s4) var(--s5); } .cta-form { background: var(--white); padding: var(--s5); border: 2px solid var(--black); } .cta-form .feld input, .cta-form .feld textarea { border-color: var(--grey-150); } .cta-form .feld input:focus-visible, .cta-form .feld textarea:focus-visible { outline: 3px solid var(--black); outline-offset: 1px; } .cta-band .form-hinweis { color: var(--grey-700); } @media (min-width: 900px) { .cta-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: var(--s8); align-items: center; } .cta-form { padding: var(--s6); } }