/* ========================================================================== FZ Communication AG — Stylesheet Phase 1: statisch, responsiv. Dieses Stylesheet wird in Phase 2 unverändert ins WordPress-Theme übernommen. Aufbau 01 Schriften (selbst gehostet, Variable Fonts) 02 Design-Tokens (Farben hell/dunkel, Typo-Skala, Raster) 03 Reset & Grundlagen 04 Layout-Bausteine (Container, Section, Kicker) 05 Navigation + Mobilmenü 06 Hero 07 Leistungen (Akkordeon) 08 Referenzen (Karten + Detail-Overlay) 09 Über uns + Team 10 Testimonials 11 Kontakt (Standorte, Karten, Formular) 12 Footer 13 Overlays (Remote-Support, Rechtstexte) 14 Platzhalter-Markierungen 15 Utilities, Fokus, Druck, Reduced Motion ========================================================================== */ /* ── 01 Schriften ───────────────────────────────────────────────────────── Variable Fonts: eine Datei deckt alle Schnitte ab. Kyrillisch, Griechisch und Vietnamesisch wurden entfernt (auf einer deutschen Seite nie geladen). latin-ext lädt der Browser dank unicode-range nur, wenn ein Zeichen daraus wirklich vorkommt. */ @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-tight-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; } @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-tight-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/jetbrains-mono-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; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── 02 Design-Tokens ─────────────────────────────────────────────────── */ :root { /* Farben — exakt die Werte aus dem Prototyp (Hell-Variante) */ --c-bg: #f5f3ee; --c-fg: #0c0c0c; --c-muted: #696560; --c-subtle: #8a8680; --c-line: #d8d5ce; --c-panel: #eae7df; --c-accent: #0766b1; --c-accent-fg: #fff; --c-scrim: rgba(0, 0, 0, .55); /* Schriftfamilien */ --f-sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* Fluide Typo-Skala. Jede Formel ist so gerechnet, dass bei 1440 px Fensterbreite exakt der Wert aus dem Entwurf steht und bei 390 px der Mobilwert. Vorher wurden die Entwurfswerte bei 1440 px teilweise gar nicht erreicht. */ --t-h1: clamp(2rem, 5.26px + 6.857vw, 6.5rem); /* 104 px Titel Startseite */ --t-h2-xl: clamp(1.75rem, 14.63px + 3.429vw, 4rem); /* 64 px Kontakt */ --t-h2-lg: clamp(1.625rem, 14.86px + 2.857vw, 3.5rem); /* 56 px Über uns */ --t-h2: clamp(1.5rem, 15.09px + 2.286vw, 3rem); /* 48 px Abschnitte */ --t-stat: clamp(2rem, 27.54px + 1.143vw, 2.75rem); /* 44 px Kennzahlen */ --t-svc: clamp(1.5rem, 17.31px + 1.714vw, 2.625rem); /* 42 px Leistungsname */ --t-h3-xl: clamp(1.5rem, 19.54px + 1.143vw, 2.25rem); /* 36 px Referenz-Detailfenster */ --t-h3-lg: clamp(1.375rem, 18.29px + 0.952vw, 2rem); /* 32 px Formular, Dialoge */ --t-h3: clamp(1.25rem, 17.77px + 0.571vw, 1.625rem); /* 26 px Referenzkarte */ --t-quote: clamp(1.125rem, 16.51px + 0.381vw, 1.375rem); /* 22 px Zitat, Standort-Ort */ --t-lead: clamp(1.062rem, 15.89px + 0.286vw, 1.25rem); /* 20 px Hero-Text, Kontaktwerte */ --t-17: clamp(1rem, 15.63px + 0.095vw, 1.062rem); /* 17 px Über uns, Kontakt-Intro, Teaser */ --t-body: 0.9375rem; /* 15 px */ --t-small: 0.875rem; /* 14 px */ --t-13: 0.8125rem; /* 13 px */ --t-kicker: 0.75rem; /* 12 px */ --t-micro: 0.6875rem; /* 11 px */ --t-nano: 0.625rem; /* 10 px */ /* Raster & Abstände */ --pad-x: clamp(1.25rem, 5vw, 4.5rem); /* 20 → 72 px */ --sp-section: clamp(3.5rem, 7vw, 6.25rem); /* 56 → 100 px */ --gap-lg: clamp(2rem, 5vw, 5rem); /* 32 → 80 px */ --gap-md: clamp(1.25rem, 2.4vw, 2rem); /* 20 → 32 px */ --gap-sm: 1rem; /* Logohöhen. Um 20 % angehoben gegenüber der ersten Fassung — im Kopf und im Fuss stand die Marke zu klein. */ /* Kopfzeile: Maximum um 35 % angehoben, damit die Tagline auf dem Monitor lesbar wird. Das Minimum bleibt bei 43,2 px — mit 58 px läuft das Logo auf einem 320px-Bildschirm über den linken Rand hinaus. Ab rund 950 px Fensterbreite greift das volle Mass. */ --logo-h-nav: clamp(2.7rem, 8.91vw, 5.265rem); /* 43,2 → 84,2 px */ --logo-h-foot: clamp(3rem, 7.2vw, 4.2rem); /* 48 → 67,2 px */ --logo-h-menu: 3rem; /* 48 px */ /* Höhe der Navigation. Nicht geraten, sondern gerechnet: das höchste Element (Logo oder Schaltflächen) plus 2 x 1,25rem Innenabstand plus die Trennlinie. Der Wert steuert scroll-padding-top, damit Ankersprünge nicht unter der klebenden Navigation landen. Vorher stand hier ein fester Wert, der bis zu 17 px zu klein war. */ --nav-h: calc(max(var(--logo-h-nav), 2.75rem) + 2.5rem + 1px); --nav-gap: clamp(1rem, 2.5vw, 2.25rem); /* 16 → 36 px */ color-scheme: light; } /* Dunkel-Variante. Wird per data-theme gesetzt; beim ersten Besuch entscheidet das JS anhand von prefers-color-scheme. */ :root[data-theme='dark'] { --c-bg: #0c0c0c; --c-fg: #f2f0eb; --c-muted: #8a8680; --c-subtle: #6a6660; --c-line: #2a2a28; --c-panel: #151514; --c-accent: #0766b1; --c-accent-fg: #fff; --c-scrim: rgba(0, 0, 0, .7); color-scheme: dark; } /* ── 03 Reset & Grundlagen ────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Verhindert, dass Ankersprünge unter der fixierten Navigation landen */ scroll-padding-top: var(--nav-h); } body { margin: 0; background: var(--c-bg); color: var(--c-fg); font-family: var(--f-sans); font-size: var(--t-body); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } body.is-locked { overflow: hidden; } h1, h2, h3, h4, p, blockquote, figure, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: none; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } hr { border: 0; height: 1px; background: var(--c-line); margin: 2.5rem 0; } /* ── 04 Layout-Bausteine ──────────────────────────────────────────────── */ .section { padding: var(--sp-section) var(--pad-x); border-bottom: 1px solid var(--c-line); } .section--flush { padding-left: 0; padding-right: 0; } /* Der Referenzabschnitt liegt im Entwurf auf der Panel-Farbe */ .section--panel { background: var(--c-panel); } .section--flush > .section__head, .section--flush > .section__note { padding-inline: var(--pad-x); } /* Kopfzeile: schmale Kicker-Spalte links, Überschrift rechts */ .section__head { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap-lg); align-items: end; margin-bottom: clamp(2rem, 4vw, 3.75rem); } .section__head--even { grid-template-columns: 1fr 1fr; } .kicker { line-height: normal; font-family: var(--f-mono); font-size: var(--t-kicker); letter-spacing: .1667em; text-transform: uppercase; color: var(--c-muted); margin: 0; } .kicker--accent { color: var(--c-accent); } .h2 { font-size: var(--t-h2); font-weight: 500; letter-spacing: -.03125em; /* -1.5px bei 48px */ line-height: 1.1; max-width: 800px; } /* Kontaktüberschrift, im Entwurf deutlich grösser als die übrigen */ .h2--xl { font-size: var(--t-h2-xl); letter-spacing: -.03125em; /* -2px bei 64px */ line-height: 1.02; } .h2--xl .is-quiet { color: var(--c-muted); } .h2--lg { font-size: var(--t-h2-lg); letter-spacing: -.03214em; /* -1.8px bei 56px */ line-height: 1.05; } .meta { line-height: normal; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .1364em; text-transform: uppercase; color: var(--c-muted); } /* ── Schaltflächen ───────────────────────────────────────────────────────── Nach dem Corporate Design: „Eckig, ohne Radius. Primär gefüllt in FZ-Blau, sekundär als Outline." Beschriftung in JetBrains Mono, Versalien, 11 px, Sperrung 0.12em, Innenabstand 12/20 px. Zwei Abweichungen vom CD-Dokument, beide bewusst: 1. Dort hat die primäre Fläche keinen Rand, die sekundäre einen — dadurch sind sie unterschiedlich hoch (40,5 gegen 42,5 px). Hier bekommen beide einen 1px-Rand, bei der primären transparent. Damit stehen sie nebeneinander auf gleicher Höhe; gemeint war das im CD sichtbar auch so. 2. Auf Touch-Geräten greift eine Mindesthöhe von 44 px. 42,5 px erfüllen WCAG 2.5.8 (24 px) zwar, sind für den Daumen aber knapp. Mit Maus bleibt es exakt beim CD-Mass. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; /* CD: 8 px */ padding: .75rem 1.25rem; /* CD: 12 / 20 px */ font-family: var(--f-mono); font-size: .6875rem; /* CD: 11 px */ font-weight: 400; line-height: 1.5; /* CD: 16,5 px bei 11 px */ letter-spacing: .12em; text-transform: uppercase; border: 1px solid transparent; border-radius: 0; transition: background-color .18s, color .18s, border-color .18s; } @media (pointer: coarse) { .btn { min-height: 2.75rem; } } /* Primär: gefüllt in FZ-Blau */ .btn--accent { background: var(--c-accent); color: var(--c-accent-fg); } .btn--accent:hover { background: #05548f; } /* Sekundär: Outline auf der Trennlinienfarbe */ .btn--quiet { background: transparent; color: var(--c-fg); border-color: var(--c-line); } .btn--quiet:hover { border-color: var(--c-fg); } /* Kleinere Fassung für Nebenaktionen (Overlays schliessen) */ .btn--sm { padding: .625rem 1rem; font-size: .625rem; } /* Mono-Link mit Unterstrich für Inline-Aktionen (CD, Abschnitt „Schaltflächen"). Als Klasse verfügbar, aktuell nicht im Einsatz. */ .btn-link { font-family: var(--f-mono); font-size: var(--t-13); letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent); border-bottom: 1px solid var(--c-accent); padding-bottom: 3px; } /* ── 04b Logo ───────────────────────────────────────────────────────────── Das offizielle Logo als Bilddatei. Vorher stand hier ein typografischer Nachbau aus dem Prototyp — der lag mit einem Seitenverhältnis von 4,98 deutlich neben dem echten Logo (3,50) und hatte eine viel zu grosse Wortmarke. Gesteuert wird nur noch über --logo-h. Als Vektor einmal pro Seite als eingebettet, dreimal per referenziert. Das Blau bleibt in beiden Designs Markenfarbe, nur die graue Tagline folgt der gedämpften Textfarbe, damit sie auf dunklem Grund lesbar bleibt. Custom Properties vererben sich in den Schattenbaum von , harte fill-Attribute täten das nicht. */ .logo { --logo-h: 3.5rem; --fzlogo-ink: #0766b1; --fzlogo-tag: var(--c-muted); } /* CD, Abschnitt Logo: „FZ-Blau auf Hell · Tinte auf Weiss · Weiss auf Blau · Weiss auf Dunkel." Auf dunklem Grund also nicht Blau, sondern Weiss, die Tagline mit 80 % Deckung — genau die Werte aus dem CD-Dokument. */ :root[data-theme='dark'] .logo { --fzlogo-ink: #fff; --fzlogo-tag: rgba(255, 255, 255, .8); } .logo { display: inline-flex; align-items: center; line-height: 0; } .logo__img { display: block; height: var(--logo-h); width: auto; /* Ohne feste Breite berechnet Safari die Breite aus der viewBox nicht zuverlässig, deshalb das Seitenverhältnis explizit. */ aspect-ratio: 7881.79 / 2250.72; } .svgsprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* ── 05 Navigation ───────────────────────────────────────────────────── */ /* Alle Abstände in der Kopfzeile sind gleich gross: zwischen den Menüpunkten, zwischen dem letzten Punkt und dem Hell/Dunkel-Umschalter und zwischen diesem und der Schaltfläche. So stand es im Entwurf — 36 px auf 1440 px. Das Logo schiebt sich per margin-right:auto nach links, alles andere sammelt sich rechts. */ .nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: flex-end; gap: var(--nav-gap); padding: 1.25rem var(--pad-x); background: var(--c-bg); border-bottom: 1px solid var(--c-line); } .nav__logo { display: inline-flex; align-items: center; flex-shrink: 0; margin-right: auto; } .nav__links { display: flex; align-items: center; gap: var(--nav-gap); font-size: var(--t-small); color: var(--c-muted); } .nav__links a { transition: color .15s; } .nav__links a:hover { color: var(--c-fg); } .nav__actions { display: flex; align-items: center; gap: var(--nav-gap); } /* Theme-Umschalter */ .theme-toggle { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid var(--c-line); border-radius: 50%; color: var(--c-fg); opacity: .75; transition: opacity .15s, border-color .15s; flex-shrink: 0; } .theme-toggle:hover { opacity: 1; border-color: var(--c-fg); } .theme-toggle .icon-moon { display: block; } .theme-toggle .icon-sun { display: none; } :root[data-theme='dark'] .theme-toggle .icon-moon { display: none; } :root[data-theme='dark'] .theme-toggle .icon-sun { display: block; } /* Burger */ .nav__burger { display: none; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid var(--c-line); color: var(--c-fg); flex-shrink: 0; } .nav__burger span { display: block; width: 1.125rem; height: 1px; background: currentColor; transition: transform .25s, opacity .2s; } .nav__burger span + span { margin-top: 5px; } /* Mobilmenü: vollflächiges Overlay */ .mobilemenu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--c-bg); padding: 1.25rem var(--pad-x) 2rem; overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0; transform: translateY(-.75rem); transition: opacity .22s ease, transform .22s ease, visibility .22s; } .mobilemenu[data-open='true'] { visibility: visible; opacity: 1; transform: none; } .mobilemenu__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(1.5rem, 6vh, 3rem); } .mobilemenu__close { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid var(--c-line); font-size: 1.25rem; line-height: 1; } .mobilemenu__links { display: flex; flex-direction: column; gap: clamp(.75rem, 2.5vh, 1.25rem); } .mobilemenu__links a { font-size: clamp(1.75rem, 9vw, 2.5rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; } .mobilemenu__foot { margin-top: auto; padding-top: 2.5rem; display: flex; flex-direction: column; gap: .875rem; } .mobilemenu__tel { font-family: var(--f-mono); font-size: 1.125rem; letter-spacing: .02em; } /* ── 06 Hero ─────────────────────────────────────────────────────────── */ .hero { padding: clamp(3rem, 7vw, 7.5rem) var(--pad-x) clamp(4rem, 10vw, 10rem); border-bottom: 1px solid var(--c-line); } .hero__kicker { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .hero__title { font-size: var(--t-h1); font-weight: 500; letter-spacing: -.03365em; /* -3.5px bei 104px */ line-height: .95; max-width: 1200px; text-wrap: balance; } .hero__title .is-quiet { color: var(--c-subtle); } .hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-lg); align-items: end; margin-top: clamp(2.5rem, 5vw, 5rem); } .hero__lead { font-size: var(--t-lead); line-height: 1.5; color: var(--c-muted); max-width: 520px; } .hero__cta { display: flex; gap: 1.25rem; flex-wrap: wrap; } /* ── 07 Leistungen ─────────────────────────────────────────────────────── Vierspaltiges Raster: Nummer | Name | Teaser | Pfeil, Spaltenbreiten und Abstände wie im Entwurf. Der aufgeklappte Bereich benutzt dasselbe Raster und setzt seinen Inhalt in die dritte Spalte, damit er unter dem Teaser beginnt und nicht am linken Rand. */ .svc { border-top: 1px solid var(--c-line); transition: background-color .2s; } .svc:last-of-type { border-bottom: 1px solid var(--c-line); } .svc:hover, .svc[data-open='true'] { background: var(--c-panel); } .svc__btn { width: 100%; display: grid; grid-template-columns: 100px 1fr 2fr auto; gap: 40px; align-items: center; text-align: left; padding: 36px var(--pad-x); } .svc__n { line-height: normal; font-family: var(--f-mono); font-size: var(--t-13); color: var(--c-muted); } .svc__name { font-size: var(--t-svc); font-weight: 500; letter-spacing: -.02857em; /* -1.2px bei 42px */ line-height: normal; } .svc__teaser { font-size: var(--t-17); line-height: 1.55; color: var(--c-muted); max-width: 560px; } .svc__chev { font-size: 24px; line-height: 1; width: 24px; text-align: center; color: var(--c-fg); transition: transform .25s, color .25s; } .svc[data-open='true'] .svc__chev { transform: rotate(90deg); color: var(--c-accent); } /* Aufklappbereich: Höhe animiert über grid-template-rows */ .svc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; } .svc[data-open='true'] .svc__panel { grid-template-rows: 1fr; } .svc__panel > div { overflow: hidden; } .svc__body { display: grid; grid-template-columns: 100px 1fr 2fr auto; gap: 40px; align-items: start; padding: 0 var(--pad-x) 48px; } .svc__content { grid-column: 3; } .svc__detail { font-size: var(--t-body); line-height: 1.65; color: var(--c-muted); max-width: 560px; margin-bottom: 28px; } .svc__bullets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; max-width: 560px; } .svc__bullets li { line-height: normal; display: flex; gap: 10px; align-items: baseline; font-size: var(--t-13); color: var(--c-fg); } .svc__bullets li::before { content: '+'; color: var(--c-accent); font-family: var(--f-mono); flex-shrink: 0; } .svc__cta { display: inline-block; /* Abstand 32px wie im Entwurf, davon 8px als Innenabstand — dadurch erreicht die Trefferfläche 24px (WCAG 2.5.8), ohne dass sich die sichtbare Position der Unterstreichung verschiebt. */ margin-top: 24px; padding-top: 8px; font-family: var(--f-mono); font-size: var(--t-13); letter-spacing: .1154em; /* 1.5px bei 13px */ text-transform: uppercase; color: var(--c-accent); border-bottom: 1px solid var(--c-accent); padding-bottom: 2px; } .svc__cta:hover { color: var(--c-fg); border-color: var(--c-fg); } /* ── 08 Referenzen ───────────────────────────────────────────────────── */ .section__note { margin-bottom: 1.5rem; } .cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-sm); } .case { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; min-height: 23.75rem; padding: 2rem 1.75rem; background: var(--c-bg); border: 1px solid var(--c-line); text-align: left; transition: border-color .2s, transform .2s; } .case:hover { border-color: var(--c-accent); transform: translateY(-2px); } .case__top { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; } .case__title { font-size: var(--t-h3); font-weight: 500; letter-spacing: -.023em; line-height: 1.2; margin-bottom: 1rem; } .case__desc { font-size: var(--t-small); color: var(--c-muted); line-height: 1.6; } .case__foot { line-height: normal; display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.125rem; border-top: 1px solid var(--c-line); font-family: var(--f-mono); font-size: var(--t-kicker); color: var(--c-muted); } .case__foot strong { color: var(--c-fg); font-weight: 400; } /* Detail-Overlay */ .dialog__body .h2 { font-size: var(--t-h3-xl); letter-spacing: -.02778em; /* -1px bei 36px */ line-height: 1.15; margin-bottom: 2rem; } .case-detail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); padding: 1.25rem 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); margin: 1.75rem 0; } .case-detail__stack { display: flex; flex-wrap: wrap; gap: .375rem; } .case-detail__grid .meta { font-size: var(--t-nano); } .case-detail__stack li { font-family: var(--f-mono); font-size: var(--t-micro); padding: .25rem .5rem; border: 1px solid var(--c-line); color: var(--c-muted); } .case-detail__block + .case-detail__block { margin-top: 1.75rem; } .case-detail__block p { font-size: var(--t-small); line-height: 1.7; color: var(--c-fg); max-width: 68ch; } /* ── 09 Über uns + Team ──────────────────────────────────────────────── */ .about { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-lg); margin-bottom: var(--gap-lg); } .about__text { display: grid; gap: 1rem; } .about__text p { font-size: var(--t-17); line-height: 1.6; color: var(--c-muted); max-width: 480px; } .about__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-sm); margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--c-line); } .about__stat b { display: block; font-size: var(--t-stat); font-weight: 500; letter-spacing: -.03409em; /* -1.5px bei 44px */ line-height: 1.6; } .about__stat span { display: block; margin-top: .375rem; font-size: var(--t-13); line-height: 1.6; color: var(--c-muted); } .team { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap-sm); margin-top: 2.5rem; } .team__photo { aspect-ratio: 5 / 6; margin-bottom: 1rem; overflow: hidden; background: var(--c-panel); } .team__photo img { width: 100%; height: 100%; object-fit: cover; } .team__name { line-height: normal; font-size: var(--t-body); font-weight: 600; letter-spacing: -.013em; } .team__role { font-size: var(--t-13); color: var(--c-muted); line-height: 1.4; margin-top: .125rem; } .team__links { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: .5rem; } .team__links a { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .0909em; color: var(--c-muted); border-bottom: 1px solid var(--c-line); } .team__links a:hover { color: var(--c-fg); border-color: var(--c-accent); } /* ── 10 Testimonials ────────────────────────────────────────────────── */ .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); } /* Grosses Anführungszeichen als eigenes Element über dem Zitat — im Entwurf 56px in der Akzentfarbe mit gestauchter Zeilenhöhe. */ .quote__mark { display: block; font-size: 3.5rem; font-weight: 500; line-height: .5; color: var(--c-accent); margin-bottom: 1rem; } .quote blockquote { font-size: var(--t-quote); font-weight: 500; letter-spacing: -.01818em; /* -0.4px bei 22px */ line-height: 1.35; margin-bottom: 1.75rem; } .quote figcaption { padding-top: 1.25rem; border-top: 1px solid var(--c-line); } .quote__attr { font-size: var(--t-13); font-weight: 500; line-height: normal; color: var(--c-fg); } .quote__since { display: block; margin-top: .25rem; font-family: var(--f-mono); font-size: var(--t-kicker); color: var(--c-muted); } /* ── 11 Kontakt ─────────────────────────────────────────────────────── */ .contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-lg); } .contact__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); margin-bottom: 3rem; } .contact__fact dt { line-height: normal; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .1364em; text-transform: uppercase; color: var(--c-muted); margin-bottom: .5rem; } .contact__fact dd { margin: 0; font-size: var(--t-lead); font-weight: 500; line-height: 1.4; } /* Öffnungszeiten und Notfall sind im Entwurf kleiner und nicht fett */ .contact__fact--plain dd { font-size: var(--t-body); font-weight: 400; line-height: 1.5; } .contact__lead { font-size: var(--t-17); line-height: 1.6; color: var(--c-muted); max-width: 480px; margin: 0 0 3rem; } .offices { display: grid; gap: var(--gap-sm); } .office { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.25rem; padding: 1.5rem; border: 1px solid var(--c-line); } .office__city { font-size: var(--t-quote); font-weight: 500; letter-spacing: -.02273em; /* -0.5px bei 22px */ line-height: normal; margin: .625rem 0 .75rem; } .office__addr { font-size: var(--t-small); color: var(--c-muted); line-height: 1.6; } .office__map { position: relative; overflow: hidden; background: var(--c-panel); } .office__maplink { display: block; position: relative; } .office__maplink img { width: 100%; height: 100%; min-height: 12.5rem; object-fit: cover; object-position: center; transition: transform .3s ease, filter .2s; } .office__maplink:hover img { transform: scale(1.03); } /* Marker: die Spitze sitzt genau auf der Bildmitte, also auf der Adresse. Geometrie: das 28px-Quadrat mit border-radius 50% 50% 50% 0 hat seine scharfe Ecke unten links; nach rotate(-45deg) zeigt sie senkrecht nach unten, 19.8px unterhalb des Quadratmittelpunkts. Der Versatz von -34px nach oben setzt die Spitze damit auf die Mitte. */ .map__pin { position: absolute; left: 50%; top: 50%; width: 0; height: 0; } .map__pin::before { content: ''; position: absolute; left: -14px; top: -34px; width: 28px; height: 28px; box-sizing: border-box; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--c-accent); border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); } :root[data-theme='dark'] .map__pin::before { border-color: #0c0c0c; } .map__coords, .map__route, .map__attr { position: absolute; z-index: 2; font-family: var(--f-mono); background: var(--c-bg); border: 1px solid var(--c-line); color: var(--c-fg); } .map__coords { top: .5rem; left: .5rem; font-size: .5625rem; letter-spacing: .1em; padding: .25rem .5rem; white-space: nowrap; } .map__route { bottom: .5rem; left: .5rem; font-size: .625rem; letter-spacing: .08em; padding: .3125rem .625rem; } .office__maplink:hover .map__route { background: var(--c-accent); color: var(--c-accent-fg); border-color: var(--c-accent); } .map__attr { bottom: .5rem; right: .5rem; font-size: .5625rem; letter-spacing: .04em; /* Innenabstand so gewählt, dass die Trefferfläche 24px erreicht (WCAG 2.5.8) */ padding: .375rem .5rem; color: var(--c-muted); } .map__attr:hover { color: var(--c-fg); } /* Formular */ .form-block { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap-lg); margin-top: var(--gap-lg); padding: clamp(1.5rem, 3.5vw, 3rem); background: var(--c-panel); border: 1px solid var(--c-line); scroll-margin-top: var(--nav-h); } .form-block__title { font-size: var(--t-h3-lg); font-weight: 500; letter-spacing: -.031em; line-height: 1.1; margin: .75rem 0 1rem; } .form-block__note { font-size: var(--t-small); color: var(--c-muted); line-height: 1.6; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; } .field label { display: block; line-height: normal; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .0909em; text-transform: uppercase; color: var(--c-muted); margin-bottom: .5rem; } .field input, .field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--c-line); padding: .625rem 0; font-size: var(--t-body); outline: none; border-radius: 0; transition: border-color .18s; /* 16px verhindert den Auto-Zoom von iOS Safari beim Fokus */ font-size: max(1rem, var(--t-body)); } .field input:focus, .field textarea:focus { border-color: var(--c-accent); } .field textarea { resize: vertical; min-height: 5rem; } .form__consent { display: flex; gap: .625rem; align-items: flex-start; margin: 1.5rem 0; font-size: var(--t-small); color: var(--c-muted); line-height: 1.5; } .form__consent input { margin-top: .2rem; width: 1rem; height: 1rem; flex-shrink: 0; } .form__consent a { color: var(--c-accent); text-decoration: underline; } /* ── 12 Footer ──────────────────────────────────────────────────────── */ .footer { padding: clamp(3rem, 5vw, 4.5rem) var(--pad-x) 2rem; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--gap-md); margin-bottom: clamp(2.5rem, 4vw, 3.75rem); } .footer__about { font-size: var(--t-small); color: var(--c-muted); line-height: 1.6; margin-top: 1.25rem; max-width: 34ch; } .footer__col h2 { font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 400; letter-spacing: .1364em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 1rem; } .footer__col ul { display: flex; flex-direction: column; gap: .625rem; font-size: var(--t-small); } .footer__col a:hover { color: var(--c-accent); } .footer__bar { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; padding-top: 1.5rem; border-top: 1px solid var(--c-line); } /* ── 13 Overlays ────────────────────────────────────────────────────── */ .overlay { position: fixed; inset: 0; z-index: 80; display: flex; padding: clamp(.75rem, 3vw, 1.5rem); background: var(--c-scrim); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; } .overlay[data-open='true'] { opacity: 1; visibility: visible; } .overlay--center { align-items: center; justify-content: center; } .overlay--top { align-items: flex-start; justify-content: center; } .dialog { position: relative; width: 100%; background: var(--c-bg); border: 1px solid var(--c-line); transform: translateY(.5rem); transition: transform .22s ease; } .overlay[data-open='true'] .dialog { transform: none; } .dialog--sm { max-width: 32.5rem; padding: clamp(1.5rem, 4vw, 2.5rem); } .dialog--lg { max-width: 60rem; } .dialog--xl { max-width: 68rem; } .dialog__title { font-size: var(--t-h3-lg); font-weight: 500; letter-spacing: -.031em; line-height: 1.1; margin: 1rem 0 1.25rem; } .dialog__note { background: var(--c-panel); padding: 1rem; margin-bottom: 1.5rem; font-size: var(--t-kicker); color: var(--c-muted); line-height: 1.5; } .dialog__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-end; } /* Kopfleiste mit Reitern (Referenz- und Rechts-Overlay) */ .dialog__bar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: 1.25rem clamp(1.25rem, 3vw, 3rem); background: var(--c-bg); border-bottom: 1px solid var(--c-line); } .dialog__tabs { display: flex; flex-wrap: wrap; gap: clamp(.75rem, 2vw, 1.5rem); font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .1364em; text-transform: uppercase; } .dialog__tabs button { color: var(--c-muted); padding-bottom: .375rem; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; } .dialog__tabs button:hover { color: var(--c-fg); } .dialog__tabs button[aria-selected='true'] { color: var(--c-accent); border-bottom-color: var(--c-accent); } .dialog__body { padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 3rem) 4rem; } /* Rechtstexte */ .legal__head { margin-bottom: 1rem; } .legal__kicker { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .1818em; text-transform: uppercase; color: var(--c-accent); margin-bottom: .875rem; } .legal__title { font-size: var(--t-h2); font-weight: 500; letter-spacing: -.031em; line-height: 1.05; margin-bottom: .75rem; } .legal__stand { font-family: var(--f-mono); font-size: var(--t-kicker); letter-spacing: .0833em; text-transform: uppercase; color: var(--c-muted); } .legal-doc h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -.017em; line-height: 1.3; margin: 2.5rem 0 .875rem; scroll-margin-top: 6rem; } .legal-doc p, .legal-doc li { font-size: .90625rem; line-height: 1.7; max-width: 68ch; } .legal-doc p { margin-bottom: .875rem; } .legal-doc ul { list-style: disc; padding-left: 1.25rem; margin-bottom: .875rem; } .legal-doc li { margin-bottom: .375rem; } .legal-doc a { color: var(--c-accent); text-decoration: underline; } .legal-doc hr { max-width: 45rem; } /* Eigenständige Rechtsseiten (ohne Overlay) */ .legal-page { padding: var(--sp-section) var(--pad-x) 6rem; } .legal-page .legal-doc { max-width: 48rem; margin: 0 auto; } .legal-page__back { display: inline-block; margin-bottom: 2rem; } /* ── 14 Platzhalter ─────────────────────────────────────────────────── */ /* Sichtbar markiert, damit im Review nichts übersehen wird. In Phase 2 fällt diese Klasse weg, sobald echte Inhalte da sind. */ .ph { position: relative; outline: 1px dashed var(--c-accent); outline-offset: 2px; } .ph::after { content: 'PLATZHALTER'; position: absolute; top: 0; left: 0; z-index: 5; font-family: var(--f-mono); font-size: .5rem; letter-spacing: .1em; padding: .125rem .3125rem; background: var(--c-accent); color: #fff; } .ph--inline { outline-offset: 1px; } .ph--inline::after { display: none; } .ph-note { display: inline-block; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .05em; color: var(--c-accent); } .office__placeholder { display: grid; place-items: center; height: 100%; min-height: 12.5rem; } /* ── 15 Utilities, Fokus, Druck ─────────────────────────────────────── */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100%; left: var(--pad-x); z-index: 100; padding: .75rem 1rem; background: var(--c-accent); color: #fff; font-size: var(--t-small); } .skip-link:focus { top: .5rem; } :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } .br-sm { display: none; } @media print { .nav, .mobilemenu, .overlay, .theme-toggle, .office__map, .form-block { display: none !important; } body { background: #fff; color: #000; } .section { border: 0; page-break-inside: avoid; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .case:hover { transform: none; } } /* ========================================================================== BREAKPOINTS Desktop-Werte stehen oben, hier wird nach unten angepasst. 1200 · Team von 6 auf 3 Spalten 1024 · Navigation auf Burger, alle zweispaltigen Raster stapeln 900 · Testimonials stapeln 720 · Leistungszeile stapelt, Standortkarte stapelt 560 · Team auf 2 Spalten, Formularzeile einspaltig ========================================================================== */ @media (max-width: 1200px) { .team { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; } } @media (max-width: 1023px) { :root { --nav-h: calc(max(var(--logo-h-nav), 2.75rem) + 2.5rem + 1px); } .nav__links, .nav__actions .btn { display: none; } .nav__burger { display: grid; } .hero__title { max-width: 24ch; } /* Die harten Zeilenumbrüche der Desktop-Headline würden auf Mobile mitten im Wort brechen — dort wird natürlich umgebrochen. */ .hero__title .br-lg { display: none; } .hero__grid { grid-template-columns: 1fr; align-items: start; } .hero__lead { max-width: 46ch; } .section__head, .section__head--even { grid-template-columns: 1fr; gap: 1rem; align-items: start; } .h2, .h2--lg { max-width: 34ch; } .about { grid-template-columns: 1fr; } .about__stats { margin-top: 2rem; padding-top: 2rem; } .cases { grid-template-columns: 1fr; } .case { min-height: 0; } .contact { grid-template-columns: 1fr; } .form-block { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; } .dialog__body .h2 { font-size: var(--t-h3-xl); letter-spacing: -.02778em; /* -1px bei 36px */ line-height: 1.15; margin-bottom: 2rem; } .case-detail__grid { grid-template-columns: 1fr; gap: 1.25rem; } } @media (max-width: 899px) { .quotes { grid-template-columns: 1fr; gap: 2.5rem; } .quote blockquote { margin-bottom: 1rem; } } @media (max-width: 1023px) { /* Das Vierspaltenraster wird zu eng — Nummer und Name in eine Zeile, Teaser darunter, aufgeklappter Inhalt über die volle Breite. */ .svc__btn { grid-template-columns: auto 1fr auto; grid-template-areas: 'n name chev' '. teaser teaser'; gap: .5rem 1rem; align-items: baseline; padding: 1.75rem var(--pad-x); } .svc__n { grid-area: n; } .svc__name { grid-area: name; } .svc__teaser { grid-area: teaser; } .svc__chev { grid-area: chev; align-self: center; } .svc__body { grid-template-columns: 1fr; gap: 0; padding-bottom: 2rem; } .svc__content { grid-column: 1; } } @media (max-width: 719px) { .svc__bullets { grid-template-columns: 1fr; } .office { grid-template-columns: 1fr; } .office__map { min-height: 11rem; } .contact__facts { gap: 1.25rem; } .br-sm { display: inline; } } @media (max-width: 559px) { .team { grid-template-columns: repeat(2, 1fr); } .form__row { grid-template-columns: 1fr; } .about__stats { grid-template-columns: 1fr; gap: 1.25rem; } .about__stat { display: flex; align-items: baseline; gap: .75rem; } .about__stat span { margin-top: 0; } .footer__grid { grid-template-columns: 1fr; } .hero__cta { flex-direction: column; align-items: stretch; } .hero__cta .btn { width: 100%; } .contact__facts { grid-template-columns: 1fr 1fr; } .dialog__actions .btn { flex: 1 1 auto; } } /* Logo-Grössen je Einsatzstelle (nach den Breakpoints, damit sie greifen) */ .nav .logo { --logo-h: var(--logo-h-nav); } .mobilemenu .logo { --logo-h: var(--logo-h-menu); } .footer .logo { --logo-h: var(--logo-h-foot); } /* ── 16 Touch-Ziele ──────────────────────────────────────────────────── WCAG 2.5.8 (AA) verlangt mindestens 24×24 CSS-Pixel für Bedienelemente. Ausgenommen sind Links mitten im Satz — deren Höhe ist durch die Zeilenhöhe des umgebenden Textes gesetzt (Ausnahme „Inline"). Betroffen waren: Navigationslinks (21px), LINKEDIN/WEBSITE in den Team-Karten (18px), Telefon und E-Mail im Kontaktblock (20px) sowie die Footer-Listen (21px). */ .nav__links a, .team__links a, .footer__col a, .footer__col button, .contact__fact dd a, .legal-page__back { display: inline-flex; align-items: center; min-height: 1.5rem; } /* Die Team-Links stehen nebeneinander — etwas Innenabstand verhindert, dass die Trefferflächen aneinanderkleben. */ .team__links a { padding-block: .1875rem; } .dialog__tabs button { min-height: 1.5rem; } /* ── 17 Korrekturen aus dem Bild-Review ─────────────────────────────────── Gefunden beim Durchsehen der Screenshots, nicht durch die Messwerte. */ /* (1) Die Leistungszeile steckt in einem

(nötig für die Überschriftengliederung). Dessen Fettung schlug auf Nummer und Teaser durch, die im Entwurf normal gesetzt sind. */ .svc h3 { margin: 0; font-size: inherit; font-weight: 400; } .svc__n, .svc__teaser { font-weight: 400; } /* (2) Titel und Beschreibung der Referenzkarten sind (in einem