/* ========================================================= Theme Bußmann — Unternehmensgruppe IB Schrift: Outfit (lokal). Farben: Text #1b2a33, Grau #e2e7ec, Orange #FF5C00. ========================================================= */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/outfit-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: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/outfit-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; } :root { --text: #1b2a33; --text-leicht: #5c6b75; --grau: #e2e7ec; --hell: #f5f6f8; --linie: #d9dfe4; /* Orange in Rollen (Kontraste nachgerechnet nach WCAG-Formel): --orange #ff5c00 3,10:1 auf Weiß / 2,86:1 auf --hell / 4,76:1 auf --text → nur Flächen, Striche, Symbole und große Schrift (≥ 24 px bzw. ≥ 18,66 px fett) --orange-tief #c8420f 4,95:1 auf Weiß / 4,58:1 auf --hell → Fließtext-Links, aktiver Menüpunkt, Knopfflächen --orange-dunkel #a8360a 6,57:1 auf Weiß / 6,07:1 auf --hell → Hover und Aktiv */ --orange: #ff5c00; --orange-tief: #c8420f; --orange-dunkel: #a8360a; /* Rand von Bedienelementen: 4,64:1 auf Weiß, 4,29:1 auf --hell (nötig 3:1) */ --feldrand: #6b7680; /* Fehlerfarbe des Formulars (bisher zweimal als #a42a1a im Stylesheet): 7,18:1 auf Weiß, 6,64:1 auf --hell, 6,28:1 auf der Meldungsfläche #fdecea. Weiße Schrift darauf trägt ebenfalls 7,18:1. */ --fehler: #a42a1a; --weiss: #ffffff; --schrift: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Typografische Skala — sechs Stufen, nichts dazwischen. Kleinste Größe ist 15px; darunter wird auf dem Bildschirm nichts gesetzt. */ --t-1: 15px; /* Labels, Meta, Bildunterschriften */ --t-2: 17px; /* Fließtext, Formularfelder, Fuß */ --t-3: 19px; /* Intros, Navigation, Hervorhebungen */ --t-4: 23px; /* Zwischenüberschriften (h3) */ --t-5: clamp(26px, 2.2vw, 34px); /* Abschnittsüberschriften (h2) */ --t-6: clamp(32px, 3.6vw, 52px); /* Seitenüberschriften (h1) */ /* Drei Schriftstärken — mehr gibt es nicht. */ --w-text: 300; --w-akzent: 500; --w-titel: 700; /* Fokusring: Anthrazit trägt 14,73:1 auf Weiß, 13,62:1 auf --hell, 11,84:1 auf --grau. Auf dunklem Grund (Fuß, Lupe, Bänder der Unterseiten) wird er umgedreht. Der Kopf der Startseite gehört wieder dazu: dort liegt der Ring auf dem dunklen Verlauf und trägt den normalen Ring (gemessen 13,6:1). */ --fokus: #1b2a33; /* Hausmaß für Zielgrößen (ARCHITEKTUR.md Abschnitt 9) */ --ziel: 44px; --container: 1560px; --rand: 32px; --radius: 4px; --schatten: 0 2px 14px rgba(27, 42, 51, 0.08); } /* ---------- Grundlagen ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--schrift); font-weight: var(--w-text); font-size: var(--t-2); line-height: 1.6; color: var(--text); background: var(--weiss); -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; } /* overflow-wrap greift nur, wenn ein Wort sonst nicht passt: „Datenschutzerklärung" brauchte bei 320 px 309 px in einer 280 px breiten Spalte und schob die Seite auf. */ h1, h2, h3, h4 { font-weight: var(--w-titel); line-height: 1.15; margin: 0; overflow-wrap: break-word; } .prosa h2, .prosa h3 { font-weight: var(--w-titel); } p { margin: 0 0 1em; } ul { margin: 0; padding: 0; } button { font: inherit; } /* Zweifarbiger Fokusring (ARCHITEKTUR.md Abschnitt 9): 2 px Anthrazit mit 2 px weißem Versatz. Der weiße Innenring sorgt dafür, dass der Ring auch auf dunklen Flächen und über Fotos sichtbar bleibt — Orange erreichte auf --hell nur 2,86:1 und über dem Hero-Foto im Median 2,30:1. ACHTUNG für spätere Arbeit: box-shadow ersetzt jeden eigenen Schlagschatten des fokussierten Elements. Wer einem fokussierbaren Element einen Schatten gibt, muss ihn in dessen :focus-visible-Regel mit aufzählen (so gelöst bei .nach-oben und .kachel.ist-aktiv). */ :focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--weiss); } /* Umgekehrt auf dunklem Grund: weißer Ring, anthrazitfarbener Versatz (14,73:1 auf --text). Gilt auch im durchsichtigen Kopf der Startseite — dort liegt die Schrift wieder weiß über dem Verlauf. Ausnahme: das aufgeklappte Menü hat eine eigene helle Fläche. */ .fuss :focus-visible, .lupe-schicht :focus-visible, .kopf-transparent .kopf :focus-visible, .hero :focus-visible { outline-color: var(--weiss); box-shadow: 0 0 0 2px var(--text); } .kopf.ist-offen :focus-visible { outline-color: var(--fokus); box-shadow: 0 0 0 2px var(--weiss); } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--rand); } /* Drei Stellen fokussiert das Skript selbst: das Logo nach „nach oben", das Bild nach dem Schließen der Lupe und deren Schließen-Knopf beim Öffnen. Der Fokus bleibt (Vorleser folgen ihm), der Rahmen erscheint aber nur, solange die letzte Eingabe von der Tastatur kam — theme.js setzt dafür html.ist-tastatur. Nicht an einer Klasse am Element festmachen: Safari schickt beim Tab- oder App-Wechsel blur und beim Zurückkommen wieder focus, und der zweite Fokus zeichnete den Rahmen erneut (21.09.2026). */ html:not(.ist-tastatur) .gruppe-link:focus-visible, html:not(.ist-tastatur) img.ist-lupe:focus-visible, html:not(.ist-tastatur) .lupe-zu:focus-visible { outline: none; box-shadow: none; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .ist-versteckt { display: none !important; } /* Weiß auf --orange-tief = 4,95:1 (auf --orange waren es nur 3,10:1). */ .sprung { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--orange-tief); color: #fff; padding: 8px 14px; border-radius: var(--radius); text-decoration: none; } .sprung:focus { left: 8px; } /* Der Sprunglink liegt auf oranger Fläche und über dem Hero: weißer Ring (4,95:1 zur Fläche). */ .sprung:focus-visible { outline-color: var(--weiss); box-shadow: 0 0 0 2px var(--text); } .icon { width: 1em; height: 1em; } /* ---------- Kopf ---------- */ .kopf { position: relative; z-index: 20; background: var(--weiss); color: var(--text); } /* Kopf der Startseite: durchsichtig über dem Foto, weiße Schrift — so war es vor der Lichtkarte und so möchte es der Auftraggeber wieder (17.09.2026). Der Verlauf darunter trägt die Lesbarkeit; er ist jetzt heller als vorher, siehe .hero-start::before. */ .kopf-transparent .kopf { position: absolute; top: 0; left: 0; right: 0; background: transparent; color: var(--weiss); } .kopf-innen { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-top: 26px; padding-bottom: 22px; } /* min-width: 0 auf der ganzen Logo-Kette: sonst gibt der Block seine Mindestbreite nicht auf und drückt bei 320 px den Menü-Knopf aus dem Fenster (waagerechtes Scrollen). */ .gruppe-link { text-decoration: none; color: inherit; display: inline-block; min-width: 0; } .gruppe { min-width: 0; } .gruppe-name { display: block; font-size: var(--t-4); font-weight: var(--w-akzent); letter-spacing: 0.01em; line-height: 1.2; margin-bottom: 14px; } .logos { display: flex; align-items: center; gap: 16px; min-width: 0; } .logo { display: inline-flex; align-items: center; gap: 12px; min-width: 0; } .ib-marke { width: 58px; height: 58px; flex: none; } /* Eigene Bildmarke aus den Einstellungen: ein Bild erbt keine Schriftfarbe, deshalb gibt es auf Wunsch zwei Fassungen. Ist nur eine gepflegt, trägt sie keine der beiden Klassen und gilt überall. */ img.ib-marke { object-fit: contain; } .ib-marke-hell { display: none; } .fuss .ib-marke-hell, .kopf-transparent .kopf .ib-marke-hell { display: inline-block; } .fuss .ib-marke-dunkel, .kopf-transparent .kopf .ib-marke-dunkel { display: none; } .logo-wortmarke { font-size: var(--t-3); font-weight: var(--w-text); line-height: 1.25; white-space: nowrap; } .logos-trenner { width: 1px; height: 68px; background: currentColor; opacity: 0.85; margin-inline: 14px; } .nav { margin-top: 8px; } .nav-liste { display: flex; align-items: center; gap: 40px; list-style: none; font-size: var(--t-3); font-weight: var(--w-akzent); } .nav-liste a { display: inline-block; text-decoration: none; color: inherit; padding-bottom: 10px; position: relative; line-height: 1.3; } .nav-liste a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; } .nav-liste a:hover::after, .nav-liste .current-menu-item a::after, .nav-liste .current_page_item a::after { transform: scaleX(1); } /* --orange-tief statt --orange: 19 px bei Strichstärke 500 ist keine große Schrift, nötig sind 4,5:1 — Orange trug 3,10:1, Orange-tief trägt 4,95:1. */ .nav-liste .current-menu-item a, .nav-liste .current_page_item a { color: var(--orange-tief); } .nav-home { display: flex; align-items: center; } /* Zielgröße 44 × 44 px (ARCHITEKTUR.md Abschnitt 9); vorher war der Haus-Link 25 × 33 px. margin-inline: -9px: das Klickfeld wächst nur nach außen, die Navigationszeile bleibt so breit wie vorher. Ohne das wurde die Zeile um 19 px länger, und zwischen 1025 und 1080 px schob sich die Wortmarke in die Menüpunkte (nachgerechnet: Kopf braucht dort 1017 px bei 961 px Platz). Das Symbol ragt 9,5 px über den Rahmen hinaus, der nächste Menüpunkt ist 26 px entfernt — die Klickfelder überschneiden sich nicht. padding-bottom: 8px bleibt: bei min-height 44 px und box-sizing: border-box sitzt die Symbolmitte dadurch 18 px unter der Oberkante der Zeile, die Textmitte der Menüpunkte (19 px, Zeilenhöhe 1,3) bei 17 px. Ohne das Polster stünde das Symbol 5 px zu tief. */ .nav-home a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--ziel); min-height: var(--ziel); margin-inline: -9px; padding-bottom: 8px; } .nav-home .icon { width: 25px; height: 25px; flex: none; } .nav-home::after { content: ''; width: 1px; height: 24px; background: currentColor; opacity: 0.6; margin-left: 40px; margin-bottom: 6px; } /* Das Haus-Symbol IST die Startseite — der zusätzliche Menüpunkt daneben sagt dasselbe zweimal (Rückmeldung 04.09.). Er bleibt im Dokument, weil das Symbol im Klappmenü des Telefons nicht mitläuft; dort wird er unten wieder gezeigt. */ .nav-startseite, .nav-liste .menu-item-home { display: none; } /* flex: none ist der Kern: als Flexkind von .kopf-innen wurde der Knopf bis 360 px auf 16 px zusammengedrückt (Symbol 0 px breit, also unsichtbar) und lag bei 320 px ganz außerhalb des Fensters. Mit flex: none und den Mindestmaßen bleibt er durchgängig 46 × 46 px — über dem Hausmaß von 44 × 44 px. */ .nav-schalter { display: none; flex: none; align-items: center; justify-content: center; gap: 8px; min-width: var(--ziel); min-height: var(--ziel); background: transparent; border: 0; color: inherit; cursor: pointer; padding: 8px; margin: -8px; margin-top: 0; } .nav-schalter .icon { flex: none; width: 30px; height: 30px; } .nav-schalter .icon-x { display: none; } .kopf.ist-offen .nav-schalter .icon-x { display: block; } .kopf.ist-offen .nav-schalter .icon-menu { display: none; } .nav-schalter-text { font-size: var(--t-1); font-weight: var(--w-akzent); } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; background: var(--text); color: var(--weiss); isolation: isolate; } .hero-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; z-index: -2; } /* Verlauf verdichtet: weiße Schrift lag über hellen Motiven bei 2,05 bis 3,4:1. Rechnerisch trägt eine Deckung von 0,62 selbst über einem rein weißen Foto noch 4,70:1, 0,80 sogar 8,70:1 (nachgerechnet; die frühere Angabe 8,4:1 war zu niedrig). Deshalb bleibt die linke Hälfte — dort steht der Text — überall über 0,62; nach rechts, wo kein Text liegt, bleibt das Foto offen. Das ist der Grundverlauf für die Bänder der Unterseiten; die Startseite überschreibt ihn mit einer helleren Fassung (siehe .hero-start::before). */ .hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20, 32, 40, 0.88) 0%, rgba(20, 32, 40, 0.80) 38%, rgba(20, 32, 40, 0.64) 62%, rgba(20, 32, 40, 0.30) 84%, rgba(20, 32, 40, 0.18) 100%); } .hero-inhalt { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } /* ---------- Startseite: Seitenkopf ---------- Zurück auf die vertraute Bauform (17.09.2026, Wunsch der Auftraggeberin): weiße Schrift unmittelbar über dem Brückenfoto, kein weißer Kasten. Die vorher erprobte Lichtkarte war ihr zu fremd; gewünscht war „wie vorher, nur der Schleier etwas heller". Der Verlauf ist gegenüber der Fassung vom 16.09. deutlich geöffnet: 0,90/0,82/0,64 → 0,74/0,70/0,60 (rechte Seite unverändert 0,26/0,12). Weiter aufhellen geht nicht. Am Bildschirm über dem Brückenfoto gemessen (Schrift ausgeblendet, Untergrund pixelweise, schlechtester Punkt je Textfeld): H1 4,67:1 (51 px/700, große Schrift, nötig 3:1) · Claim 4,88:1 (19 px/500, nötig 4,5:1) · Unterzeile 5,37:1 (17 px/300, nötig 4,5:1) · Navigation 5,01:1 · Kopfzeile 13,48:1. Mobil liegt alles zwischen 5,37:1 und 7,48:1. Eine weitere Stufe (0,66/0,62/0,52) drückte Claim und H1 unter 4,5:1 — dort liegt die Grenze. ACHTUNG: Die Werte hängen am Motiv. Wird das Foto gegen ein helleres getauscht, muss nachgemessen werden (Skript: scratchpad .../lichtkarte/kontrast.py). Der Schleier oben (0,34 auf den ersten 30 Prozent) trägt allein die Kopfzeile: Logo und Menü liegen dort über dem offenen Himmel, dem hellsten Teil des Fotos. */ .hero-start { height: clamp(560px, 44vw, 880px); } .hero-start::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 34%), linear-gradient(90deg, rgba(20, 32, 40, 0.74) 0%, rgba(20, 32, 40, 0.70) 38%, rgba(20, 32, 40, 0.60) 62%, rgba(20, 32, 40, 0.26) 84%, rgba(20, 32, 40, 0.12) 100%); } .hero-start .hero-inhalt { padding-bottom: clamp(120px, 12vw, 210px); } .hero-start .hero-titel, .hero-start .hero-claim, .hero-start .hero-text { max-width: 780px; } .hero-start .hero-titel { font-size: clamp(36px, 4vw, 60px); font-weight: var(--w-titel); line-height: 1.1; margin-bottom: 20px; } /* Der Claim stand einmal in #ff5c00 auf dem Foto: mobil lagen 84 Prozent der Glyphen unter 4,5:1, und 18 px bei Strichstärke 500 ist keine große Schrift. Orange trägt auf einem Foto keinen normalgroßen Text — die Marke steht seitdem als oranger Schrägbalken davor, der Text selbst ist weiß. Der Balken ist reine Grafik. */ .hero-claim { display: flex; align-items: center; gap: 12px; font-size: var(--t-3); font-weight: var(--w-akzent); margin: 0 0 8px; } .hero-claim::before { content: ''; flex: none; width: 8px; height: 22px; background: var(--orange); transform: skewX(-20deg); border-radius: 1px; } .hero-start .hero-text { font-size: var(--t-2); font-weight: var(--w-text); margin: 0; } .hero-band { height: clamp(220px, 18vw, 330px); } .hero-band .hero-inhalt { justify-content: center; padding-inline: calc(var(--rand) + clamp(0px, 4.5vw, 76px)); } .hero-band .hero-titel { font-size: var(--t-6); font-weight: var(--w-titel); margin-bottom: 12px; } .hero-band .hero-text { font-size: var(--t-2); line-height: 1.5; max-width: 540px; margin: 0 0 6px; } .hero-band .hero-text strong { font-weight: var(--w-akzent); } .hero-kontakt { height: clamp(260px, 25vw, 460px); } /* ---------- Abschnitte ---------- */ .abschnitt-titel { text-align: center; font-size: var(--t-5); font-weight: var(--w-titel); line-height: 1.25; } .abschnitt-titel::after { content: ''; display: block; width: 60px; height: 2px; background: var(--orange); margin: 16px auto 0; } .abschnitt-titel.ist-orange { color: var(--orange); } .abschnitt-intro { text-align: center; max-width: 660px; margin: 22px auto 0; font-size: var(--t-2); } /* ---------- Spruch: weiße Box, die seitlich über das Hero-Bild greift ---------- */ /* Kein Hintergrund auf der Sektion selbst — sie ragt ins Hero hinein und würde Claim und Unterzeile verdecken. Das Grau kommt aus ::before ab Bildunterkante. */ .spruch { position: relative; z-index: 5; margin-top: clamp(-170px, -10vw, -90px); padding-bottom: clamp(26px, 3vw, 44px); } .spruch .container { display: flex; justify-content: flex-end; position: relative; z-index: 1; } /* Grau erst ab Bildunterkante: der überlappende Teil der Box liegt über dem Foto. */ .spruch::before { content: ''; position: absolute; inset: 0; background: var(--hell); z-index: 0; } /* ACHTUNG: clamp(90px, 10vw, 170px) ist zugleich die Oberkante der Spruch-Box und steht ein zweites Mal im Innenabstand des Seitenkopfs (`.hero-start .hero-inhalt`), der darüber endet. Wer den einen Wert ändert, muss den anderen mitführen — sonst laufen Karte und Box ineinander. */ .hero-start + .spruch::before { top: clamp(90px, 10vw, 170px); } .spruch-box { background: var(--weiss); margin: 0; max-width: 620px; padding: clamp(26px, 2.8vw, 42px) clamp(26px, 2.8vw, 46px); box-shadow: 0 20px 54px rgba(27, 42, 51, 0.16); border-top: 3px solid var(--orange); } /* balance verteilt die Zeilen gleichmäßig — sonst steht das letzte Wort allein. Kleiner gesetzt auf Wunsch der Auftraggeberin (17.09.2026): der Spruch stand vorher auf der Größe der Abschnittsüberschriften (--t-5, 26 bis 34 px) und trat damit gegen die H1 des Seitenkopfs an. Jetzt 20 bis 26 px — am Bildschirm rund die Hälfte der H1 (51 px), also klar nachgeordnet, aber noch als Zitat gesetzt und nicht als Fließtext. */ .spruch-text { font-size: clamp(20px, 1.6vw, 26px); font-weight: var(--w-text); line-height: 1.4; letter-spacing: 0.004em; margin: 0; text-wrap: balance; hyphens: none; } .spruch-text em { font-style: italic; } .spruch-autor { font-size: var(--t-1); font-weight: var(--w-akzent); color: var(--text-leicht); margin-top: 16px; } /* ---------- Leistungen ---------- */ .leistungen-start { background: var(--hell); padding: clamp(20px, 2.4vw, 34px) 0 clamp(56px, 6vw, 88px); } .leistungen-spalten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; list-style: none; margin-top: 48px; text-align: center; } .leistung-icon { display: block; width: 76px; height: 76px; margin: 0 auto 20px; color: var(--orange); --icon-hintergrund: var(--hell); } .leistung-icon svg { width: 100%; height: 100%; } .leistung-titel { font-size: var(--t-3); font-weight: var(--w-titel); margin-bottom: 12px; } .leistung-text { font-size: var(--t-2); line-height: 1.65; max-width: 330px; margin: 0 auto; } .leistungen-seite { padding: clamp(44px, 4.5vw, 64px) 0 clamp(56px, 6vw, 88px); } .karten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; margin-top: 44px; } .karte { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; display: flex; flex-direction: column; } .karte-bild img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; } .karte-inhalt { padding: 24px 22px 28px; } /* Unter 700 px fällt --t-3 auf 18 px und rutscht damit unter die 18,66-px-Grenze für große Schrift: 3,10:1 reichen dort nicht. --orange-tief trägt 4,95:1 in jeder Breite. */ .karte-titel { display: flex; align-items: center; gap: 12px; color: var(--orange-tief); font-size: var(--t-3); font-weight: var(--w-titel); margin-bottom: 14px; } /* Das Symbol ist Schmuck und darf beim hellen Marken-Orange bleiben. */ .karte-icon { display: block; width: 42px; height: 42px; flex: none; color: var(--orange); --icon-hintergrund: var(--weiss); } .karte-icon svg { width: 100%; height: 100%; } .karte-text { font-size: var(--t-2); line-height: 1.65; margin: 0; } /* ---------- Auftraggeber ---------- */ .auftraggeber { padding: clamp(44px, 4.5vw, 64px) 0 clamp(56px, 6vw, 88px); } .logo-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; max-width: 1200px; margin: 40px auto 0; } /* Feste Höhe statt Prozentmaßen: Safari zieht die Karte sonst auf die natürliche Bildbreite auf (Raster sprengt den Bildschirm), und mit height:100% im Grid werden hohe Logos unten abgeschnitten. */ .logo-karte { background: var(--weiss); border: 1px solid #edf0f3; box-shadow: 0 2px 12px rgba(27, 42, 51, 0.06); border-radius: var(--radius); min-height: 132px; display: grid; place-items: center; padding: 22px 28px; min-width: 0; } .logo-karte img { width: auto; height: auto; max-width: 100%; max-height: 78px; object-fit: contain; } /* Auftraggeber ohne Logo (neu im Editor angelegt, Bild noch nicht gewählt): der Name steht auf der Karte. */ .logo-karte .logo-name { font-size: var(--t-3); font-weight: var(--w-akzent); color: var(--text); text-align: center; overflow-wrap: anywhere; } /* ---------- Referenzen ---------- */ .referenzen { padding: clamp(44px, 4.5vw, 64px) 0 clamp(56px, 6vw, 88px); } .kacheln { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; margin: 40px 0 56px; } .kachel-link { display: block; position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 8 / 5; color: var(--weiss); text-decoration: none; background: var(--text); outline-offset: 3px; } .kachel-link img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } .kachel-link:hover img { transform: scale(1.04); } /* Zustandszeichen der Kachel: vier Balken um eine freie Mitte, der linke orange — so zeigt es die Vorlage. Beim Öffnen kippt das ganze Zeichen um 45 Grad. */ .kachel-plus { position: absolute; top: 15px; left: 15px; display: block; color: #fff; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4)); } .kachel-plus .icon { display: block; width: 36px; height: 36px; transition: transform 0.25s ease; } .kachel.ist-aktiv .kachel-plus .icon { transform: rotate(45deg); } .kachel.ist-aktiv .kachel-link { box-shadow: 0 0 0 3px var(--orange); } /* Ausgewählt und fokussiert waren beide oranger Ring und kaum zu unterscheiden. Der anthrazitfarbene Fokusring rückt jetzt nach außen, der orange Auswahlrahmen bleibt. */ .kachel.ist-aktiv .kachel-link:focus-visible { outline-offset: 5px; box-shadow: 0 0 0 3px var(--orange), 0 0 0 5px var(--weiss); } /* Weiße Schrift (17 px / 500, also normalgroß) lag je nach Motiv bei 3,16 bis 4,40:1. rgba(168, 54, 10, 0.95) ist --orange-dunkel mit 95 Prozent Deckung und trägt nachgerechnet 5,99:1 über einem weißen und 7,07:1 über einem schwarzen Foto. */ .kachel-leiste { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(168, 54, 10, 0.95); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; font-size: var(--t-2); font-weight: var(--w-akzent); line-height: 1.25; } .kachel-leiste .icon { width: 22px; height: 22px; flex: none; stroke-width: 2.2; } .projekte-kopf { max-width: 1120px; margin: 0 auto 4px; } .projekte-filter { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; font-size: var(--t-1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-leicht); font-weight: var(--w-akzent); margin: 0; } .projekte-filter-text { max-width: 100%; } /* Als Knopf, nicht als Verweis: umgebrochen und unterstrichen war „Alle anzeigen" auf schmalen Schirmen nicht mehr lesbar. */ /* Schrift auf --orange-tief (4,57:1 auf der Fläche #fff4ed statt 2,86:1), Rahmen voll deckend (4,95:1 gegen Weiß statt 1,61:1 — Bedienelemente brauchen 3:1) und Höhe auf das Hausmaß von 44 px (vorher rund 37 px). */ .projekte-alle { display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none; color: var(--orange-tief); background: rgba(255, 92, 0, 0.07); border: 1px solid var(--orange-tief); border-radius: var(--radius); padding: 7px 15px; min-height: var(--ziel); text-transform: none; letter-spacing: 0; font-weight: var(--w-akzent); font-size: var(--t-1); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .projekte-alle:hover, .projekte-alle:focus-visible { background: var(--orange-tief); border-color: var(--orange-tief); color: #fff; } .projekte { list-style: none; max-width: 1120px; margin: 0 auto; } .projekt { display: grid; grid-template-columns: 360px 1fr; gap: 40px; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--linie); } .projekt:last-child { border-bottom: 0; } .projekt-bild img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 2px; } .projekt-label { display: inline-block; color: var(--text-leicht); text-transform: uppercase; font-size: var(--t-1); letter-spacing: 0.08em; font-weight: var(--w-akzent); padding: 0; line-height: 1.4; } .projekt-titel { font-size: var(--t-3); font-weight: var(--w-titel); margin: 8px 0 4px; } .projekt-meta { font-size: var(--t-1); color: var(--text-leicht); margin: 0 0 8px; } .projekt-text { font-size: var(--t-1); line-height: 1.6; margin: 0; } .projekte-leer { max-width: 1120px; margin: 24px auto 0; color: var(--text-leicht); } /* ---------- Kontakt ---------- */ .kontakt { background: var(--hell); padding: clamp(48px, 5vw, 72px) 0 clamp(56px, 6vw, 88px); } .kontakt-innen { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: start; } .formular-titel { color: var(--text); font-size: var(--t-4); font-weight: var(--w-titel); margin-bottom: 22px; } .formular-feld { margin: 0 0 12px; } /* Voller Rand statt einer Unterlinie in --linie: die trug 1,34:1 zum weißen Feld und 1,24:1 zum grauen Abschnitt, das Feld war als Bedienelement praktisch unsichtbar. --feldrand trägt 4,64:1 auf Weiß und 4,29:1 auf --hell (nötig 3:1). `outline: none` ist ersatzlos gestrichen — es schlug den globalen :focus-visible. */ .formular input[type='text'], .formular input[type='email'], .formular textarea { width: 100%; font: inherit; font-size: var(--t-2); font-weight: var(--w-text); color: var(--text); background: var(--weiss); border: 1px solid var(--feldrand); border-radius: 0; padding: 13px 14px; transition: border-color 0.15s ease; } .formular input::placeholder, .formular textarea::placeholder { color: #55636d; opacity: 1; } .formular input:focus, .formular textarea:focus { border-color: var(--text); } /* Eigener Ring ohne Versatz, damit er den engen Feldabstand nicht sprengt: 14,73:1 zum Feld. Nur die Texteingaben: `.formular input` traf auch input.wpcf7-submit.knopf, dort saß der anthrazitfarbene Ring ohne Versatz und ohne weißen Innenring direkt auf der orangen Fläche (2,98:1) — und damit anders als bei jedem anderen Knopf der Seite. Kästchen und Knöpfe behalten den globalen Ring. */ .formular input[type='text']:focus-visible, .formular input[type='email']:focus-visible, .formular textarea:focus-visible { outline: 2px solid var(--fokus); outline-offset: 0; box-shadow: none; } .formular textarea { min-height: 104px; resize: vertical; } .formular-aktion { margin: 20px 0 0; } /* Weiß auf --orange-tief = 4,95:1 (auf --orange nur 3,10:1), Hover --orange-dunkel = 6,57:1. */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 28px; min-height: var(--ziel); background-color: var(--orange-tief); color: var(--weiss); border: 0; border-radius: var(--radius); padding: 12px 28px; font-family: inherit; font-size: var(--t-1); font-weight: var(--w-akzent); text-decoration: none; cursor: pointer; transition: background-color 0.15s ease; } .knopf .icon { width: 20px; height: 20px; stroke-width: 2; flex: none; } .knopf:hover { background-color: var(--orange-dunkel); } .formular-hinweis { font-size: var(--t-1); margin: 20px 0 0; } .formular-hinweis a { color: inherit; } .formular-meldung { padding: 12px 14px; border-radius: var(--radius); margin: 0 0 20px; font-size: var(--t-1); font-weight: var(--w-akzent); } .formular-meldung.ist-erfolg { background: #e6f4ea; color: #1e6b3a; } /* --fehler auf #fdecea: 6,28:1. */ .formular-meldung.ist-fehler { background: #fdecea; color: var(--fehler); } .formular-honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; } .kontaktdaten { padding-top: 4px; min-width: 0; } .kontaktdaten-titel { font-size: var(--t-4); font-weight: var(--w-titel); margin-bottom: 16px; } .kontaktdaten-adresse, .fuss-adresse { font-style: normal; line-height: 1.6; margin: 0 0 20px; } .kontaktdaten-liste { list-style: none; } .kontaktdaten-liste li { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .kontaktdaten-liste .icon { width: 20px; height: 20px; color: var(--text-leicht); flex: none; } .kontaktdaten-liste a { text-decoration: none; } .kontaktdaten-liste a:hover { text-decoration: underline; } /* Die Beschriftungen sitzen über dem Feld — der Platzhalter allein ist keine Beschriftung. */ .formular-feld label:not(.sr-only) { display: block; font-size: var(--t-1); font-weight: var(--w-akzent); margin-bottom: 6px; } /* ---------- Pflichtkennzeichnung und Fehler im Theme-Formular ---------- Ausgeliefert wird template-parts/kontaktformular.php (Contact Form 7 greift nur, wenn dort ein Formular angelegt ist). inc/kontaktformular.php erzeugt

, und aria-invalid="true" am Feld — ohne diese Regeln stand der Fehlertext als gewöhnlicher Fließtext direkt hinter dem Eingabefeld, die Pflichtzeile in 17 px über 15-px-Beschriftungen, und ein beanstandetes Feld sah aus wie ein gültiges. Muster wie im VIVA-Theme (assets/css/theme.css, .feld-fehler/.formular-pflicht). */ /* --text-leicht auf --hell trägt 5,09:1, auf Weiß 5,50:1 (nötig 4,5:1). */ .formular-pflicht { font-size: var(--t-1); color: var(--text-leicht); margin: 0 0 18px; } /* Das Sternchen in --orange-tief: 4,58:1 auf --hell, 4,95:1 auf Weiß. */ .formular .pflicht { color: var(--orange-tief); font-weight: var(--w-akzent); } /* display: flex setzt die Meldung auf eine eigene Zeile — als stünde sie sonst direkt hinter dem Feld bzw. mitten im Einwilligungstext. --fehler trägt 6,64:1 auf --hell. */ .feld-fehler { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: var(--t-1); font-weight: var(--w-akzent); line-height: 1.45; color: var(--fehler); } /* Das Zeichen macht den Fehler unabhängig von der Farbe erkennbar (1.4.1); Weiß auf --fehler trägt 7,18:1. */ .feld-fehler::before { content: '!'; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--fehler); color: var(--weiss); font-size: 12px; font-weight: var(--w-titel); line-height: 1; margin-top: 2px; } /* Beanstandetes Feld: Rand in Fehlerfarbe und doppelt so stark. Der Rand trägt 7,18:1 zum weißen Feld (nötig 3:1 für Bedienelemente) und bleibt auch beim Bearbeiten stehen. */ .formular input[type='text'][aria-invalid='true'], .formular input[type='email'][aria-invalid='true'], .formular textarea[aria-invalid='true'] { border-color: var(--fehler); border-width: 2px; } /* Das Kästchen der Einwilligung hat keinen eigenen Rand — dort zeigt ein Ring den Fehler. :not(:focus-visible), damit der Fokusring beim Bearbeiten Vorrang behält. */ .formular input[type='checkbox'][aria-invalid='true']:not(:focus-visible) { box-shadow: 0 0 0 2px var(--fehler); } /* ---------- Seiten (Impressum, Datenschutz) ---------- */ .seite-kopf { background: var(--hell); padding: clamp(36px, 4vw, 56px) 0; } .seite-titel { font-size: var(--t-6); font-weight: var(--w-titel); } .seite-inhalt { max-width: 820px; padding: clamp(36px, 4vw, 56px) 0 clamp(56px, 6vw, 88px); } .prosa { font-size: var(--t-2); line-height: 1.7; } .prosa h1 { font-size: var(--t-6); margin-bottom: 24px; } .prosa h2 { font-size: var(--t-4); font-weight: var(--w-titel); margin: 40px 0 12px; } .prosa h3 { font-size: var(--t-3); font-weight: var(--w-titel); margin: 28px 0 8px; } .prosa h4 { font-size: var(--t-2); font-weight: var(--w-titel); margin: 20px 0 6px; } /* Der Hauptbereich ist nur Ziel der Sprungmarke – kein sichtbarer Ring um den ganzen Inhalt. */ .inhalt:focus-visible { outline: none; box-shadow: none; } .prosa h2:first-child, .prosa h3:first-child { margin-top: 0; } .prosa p { margin: 0 0 14px; } /* 17 px bei Strichstärke 300 ist normalgroß: --orange trug 3,10:1, --orange-tief 4,95:1. */ .prosa a { color: var(--orange-tief); word-break: break-word; } .prosa ul, .prosa ol { padding-left: 22px; margin: 0 0 14px; } .prosa li { margin-bottom: 4px; } .prosa strong { font-weight: var(--w-titel); } .seite-404 { text-align: center; padding-top: 80px; } .seite-404 .knopf { margin-top: 12px; } /* ---------- Fuß ---------- */ .fuss { background: var(--text); color: var(--weiss); padding-top: 48px; font-size: var(--t-1); font-weight: var(--w-text); } .fuss-innen { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; align-items: start; padding-bottom: 36px; } .fuss-logos .gruppe-name { font-size: var(--t-3); margin-bottom: 10px; } .fuss-logos .ib-marke { width: 38px; height: 38px; } .fuss-logos .logo-wortmarke { font-size: var(--t-1); } .fuss-logos .logos-trenner { height: 46px; } .fuss-adresse { margin: 0; } .fuss-adresse strong { font-weight: var(--w-akzent); } .fuss-kontakt { display: flex; flex-direction: column; gap: 8px; } .fuss-kontakt a, .fuss-nav a { color: inherit; text-decoration: none; } .fuss-kontakt a { display: inline-flex; align-items: center; gap: 8px; } .fuss-kontakt .icon { width: 18px; height: 18px; color: rgba(255, 255, 255, 0.55); } .fuss-kontakt a:hover, .fuss-nav a:hover { color: var(--orange); } .fuss-nav { display: flex; flex-wrap: wrap; gap: 24px; row-gap: 8px; } .fuss-zeile { border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 18px; padding-bottom: 18px; font-size: var(--t-1); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .fuss-zeile .fuss-nav { gap: 26px; } .fuss-zeile span { opacity: 0.7; } /* ---------- Responsive ---------- */ @media (max-width: 1180px) { .nav-liste { gap: 26px; } .nav-home::after { margin-left: 26px; } } @media (max-width: 1024px) { .kopf-innen { align-items: center; padding-top: 18px; padding-bottom: 16px; } .nav-schalter { display: inline-flex; } .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; background: var(--weiss); color: var(--text); padding: 8px var(--rand) 20px; box-shadow: 0 12px 24px rgba(27, 42, 51, 0.12); } .kopf.ist-offen .nav { display: block; } .kopf.ist-offen { background: var(--weiss); color: var(--text); } /* Aufgeklapptes Menü auf der Startseite: der Kopf wird weiß — eine gepflegte helle Bildmarke wäre dort unsichtbar, also zurück zur dunklen Fassung. */ .kopf-transparent .kopf.ist-offen .ib-marke-hell { display: none; } .kopf-transparent .kopf.ist-offen .ib-marke-dunkel { display: inline-block; } .nav-liste { flex-direction: column; align-items: stretch; gap: 0; font-size: var(--t-2); } .nav-liste li { border-bottom: 1px solid var(--linie); } .nav-liste li:last-child { border-bottom: 0; } .nav-liste a { display: block; padding: 14px 0; } .nav-liste a::after { display: none; } /* Der orange Unterstrich fällt hier weg; die aktuelle Seite wäre sonst allein an der Farbe zu erkennen. Ersatz: vorangestellter Balken (wie im VIVA-Theme) plus fette Schrift — beides farbunabhängig. */ .nav-liste .current-menu-item a, .nav-liste .current_page_item a, .nav-liste a[aria-current='page'] { font-weight: var(--w-titel); } .nav-liste .current-menu-item a::before, .nav-liste .current_page_item a::before, .nav-liste a[aria-current='page']::before { content: ''; display: inline-block; width: 7px; height: 18px; margin-right: 12px; vertical-align: -3px; background: var(--orange); transform: skewX(-20deg); border-radius: 1px; } .nav-home { display: none; } .nav-startseite, .nav-liste .menu-item-home { display: block; } .leistungen-spalten, .karten, .kacheln { grid-template-columns: repeat(2, 1fr); } .logo-raster { grid-template-columns: repeat(3, 1fr); } .kontakt-innen { grid-template-columns: 1fr 1fr; } .kontakt-innen .formular-bereich { grid-column: 1 / -1; max-width: 560px; } .projekt { grid-template-columns: 300px 1fr; gap: 28px; } .fuss-innen { grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { :root { --rand: 20px; --t-3: 18px; --t-4: 21px; } .gruppe-name { font-size: var(--t-2); margin-bottom: 8px; } .ib-marke { width: 36px; height: 36px; } .logo { gap: 8px; } .logo-wortmarke { font-size: var(--t-1); } .logos { gap: 8px; } .logos-trenner { height: 42px; margin-inline: 6px; } /* NICHT display: none — die Beschriftung „Menü" ist der einzige zugängliche Name des Knopfes, mit display: none fiel er aus dem Baum und der Knopf hatte gar keinen. Wegclippen statt ausblenden: unsichtbar, aber für Screenreader vorhanden. */ .nav-schalter-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Im Fuß stehen die drei Wortmarken in einer Grid-Spalte von 280 px, brauchten aber 308 px — daher der waagerechte Überlauf bei 320 px. Hier dürfen sie umbrechen. */ .fuss-logos .logos { flex-wrap: wrap; gap: 12px; } .fuss-logos .logo-wortmarke { white-space: normal; } /* Mobil sitzt der Text unten im Bild, oben bleibt das Foto offen. Der frühere dichte Mobil-Verlauf (0,52 bis 0,88) entfällt mit ihr: er trug weiße Schrift auf dem Foto und rechnete gegen ein rein weißes Motiv 3,45:1 für die H1 und 5,36:1 für Claim und Fließtext. Die Schrift steht jetzt auf Weiß und misst durchweg 14,73:1; die Kopfzeile trägt sich über ihr helles Band selbst. Statt fester Höhe eine Mindesthöhe plus flex-end: die Karte sitzt weiterhin unten, das Kopfbild wird aber höher, wenn die Karte sonst nicht mehr hineinpasst. Nötig, weil die H1 ihre heutigen 36 px behält und bei 320 px auf vier Zeilen bricht — bei 320 × 568 (Mindesthöhe 460 px) lief die Karte sonst in die Kopfzeile. Der Innenabstand oben hält den Platz der absolut liegenden Kopfzeile frei: gemessen 100 bis 104 px ab 421 px Fensterbreite und 140 px darunter, wo die beiden Wortmarken umbrechen — 164 px lassen darüber 24 px Luft. Sichtbar wird der Wert nur auf kurzen Geräten (320 × 568, 360 × 640); sonst entscheidet die Mindesthöhe. */ .hero-start { height: clamp(460px, 78vh, 640px); } /* Mobil steht die Schrift über dem unteren Bildteil. Fassung vom 16.09. war 0,52 / 0,52 (24 %) / 0,66 (44 %) / 0,88 — jetzt um rund ein Zehntel geöffnet. Oben bleibt ein Schleier für die weiße Kopfzeile über dem hellen Himmel. */ .hero-start::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.40) 0%, rgba(20, 32, 40, 0.24) 26%, rgba(20, 32, 40, 0.58) 48%, rgba(20, 32, 40, 0.80) 100%); } .hero-start .hero-inhalt { padding-bottom: clamp(26px, 6vw, 40px); } .hero-bild { object-position: 58% 50%; } .hero-band { height: auto; min-height: 240px; } /* Das Band ist mobil fast ganz mit Text gefüllt, daher durchgehend mindestens 0,72 — über einem rein weißen Foto nachgerechnet 6,57:1 für weiße Schrift. */ .hero-band::before { background: linear-gradient(180deg, rgba(20, 32, 40, 0.72) 0%, rgba(20, 32, 40, 0.88) 100%); } .hero-band .hero-inhalt { padding-block: 40px; padding-inline: var(--rand); } .hero-kontakt { min-height: 200px; } /* Überlappung nur am großen Bildschirm. Bei 390px lag die Box über der Zeile „Erfahrung, die verbindet. Lösungen, die bewegen.“ und schnitt sie ab — der Hero ist hier nur noch gut 500px hoch, da ist für beides kein Platz. Die orange Oberkante trägt den Gedanken auch ohne Überlappung. */ .spruch { margin-top: 0; padding-top: 28px; } .hero-start + .spruch::before { top: 0; } .spruch .container { justify-content: stretch; } .spruch-box { max-width: none; } .leistungen-spalten, .karten, .kacheln { grid-template-columns: 1fr; } .leistungen-spalten { gap: 40px; } .karte-bild img { aspect-ratio: 2 / 1; } .logo-raster { grid-template-columns: repeat(2, 1fr); gap: 12px; } .kacheln { gap: 14px; margin-bottom: 40px; } .kachel-link { aspect-ratio: 16 / 9; } .projekt { grid-template-columns: 1fr; gap: 16px; padding: 22px 0; } .projekte-filter { justify-content: flex-start; } .kontakt-innen { grid-template-columns: 1fr; } .kontakt-innen .formular-bereich { max-width: none; } .projekt-bild img { aspect-ratio: 16 / 9; } .fuss-innen { grid-template-columns: 1fr; gap: 28px; } } /* Die Wortmarken im Kopf brechen um, der Trenner entfällt. Der Umbruchpunkt lag bei 380 px und war zu spät: aus der Schriftdatei ausgemessen (Outfit 300, 15 px) braucht „IB Infra GmbH" 96,0 px und „Ingenieurbüro" 93,3 px. Mit zwei Bildmarken (2 × 36 px), Innenabständen (2 × 8 px + 2 × 8 px) und Trenner (1 + 2 × 6 px) braucht die Zeile 306 px. Verfügbar sind Fensterbreite minus 40 px Rand, 24 px Abstand und 30 px Menü-Knopf — die Zeile passt also erst ab 401 px vollständig. Zwischen 381 und 400 px schrumpfte der Logoblock und der Text lief in den Abstand zum Knopf hinein (bei 381 px blieben 4,7 px statt 24 px). 420 px als Schwelle lässt Luft für die Ersatzschrift, die vor dem Laden von Outfit breiter baut. */ @media (max-width: 420px) { .logos { flex-wrap: wrap; row-gap: 8px; } .logos-trenner { display: none; } .logo-wortmarke { white-space: normal; } } @media (max-width: 380px) { .ib-marke { width: 32px; height: 32px; } .logo-wortmarke { font-size: var(--t-1); } /* Die Zeile „.gruppe-name { font-size: var(--t-3); }" ist gestrichen: sie machte die Schrift auf dem kleinsten Gerät größer als bei 700 px und half beim Überlauf mit. */ /* Auf dem kleinsten Gerät darf mit Trennstrich umgebrochen werden (lang="de-DE"), das liest sich besser als ein harter Bruch mitten im Wort. -webkit-hyphens ist nötig, weil Safari auf genau diesen Geräten das Präfix noch verlangt. */ .seite-titel, .hero-titel, .projekt-h1, .prosa h1 { -webkit-hyphens: auto; hyphens: auto; } } /* ---------- Knopf „nach oben“ ---------- Die Seite ist lang (Referenzen über 3000px), und unten steht kein Weg zurück außer der Wischgeste. Der Knopf erscheint erst, wenn wirklich gescrollt wurde, und liegt hell auf hellem wie auf dunklem Grund — der Fuß ist dunkelblau, ein dunkler Knopf wäre dort unsichtbar. */ .nach-oben { position: fixed; right: clamp(16px, 2vw, 28px); /* 🔴 Kommt ein Consent-Dialog (Borlabs, Einbau durch brumm) an den unteren Rand, verdeckt er diesen Knopf. Dann hier wieder Platz einrechnen. */ bottom: clamp(16px, 2vw, 28px); z-index: 60; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--linie); background: var(--weiss); color: var(--text); box-shadow: 0 4px 16px rgba(27, 42, 51, 0.22); opacity: 0; visibility: hidden; transform: translateY(8px); /* bottom mit 0,25 s: dieselbe Dauer, mit der das Band heraus- und hereingleitet — sonst springt der Knopf, während das Band noch sichtbar ist. */ transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, background-color 0.2s ease, color 0.2s ease, bottom 0.25s ease; } .nach-oben.ist-sichtbar { opacity: 1; visibility: visible; transform: none; } /* Weißes Symbol auf --orange-tief = 4,95:1 (auf --orange nur 3,10:1). */ .nach-oben:hover, .nach-oben:focus-visible { background: var(--orange-tief); border-color: var(--orange-tief); color: var(--weiss); } /* Der globale Fokusring ersetzt sonst den Schlagschatten des Knopfes. */ .nach-oben:focus-visible { box-shadow: 0 0 0 2px var(--weiss), 0 4px 16px rgba(27, 42, 51, 0.22); } .nach-oben .icon { width: 22px; height: 22px; } @media print { /* Der Datenschutz-Hinweis und sein Platzhalter gehören nicht aufs Papier — sonst druckt das Band mit und der Platzhalter hält am Seitenende Leerraum frei. */ .kopf, .fuss, .nav-schalter, .formular, .nach-oben { display: none; } .hero { height: auto; } } /* ---------- Projektliste: Bild ---------- */ .projekt-bild { display: block; } .projekt-bild img { transition: transform 0.35s ease; } .projekt-bild:hover img { transform: scale(1.02); } /* Karten und Pläne im Hochformat (seit 17.09.2026: TenneT, Regionaltangente West) werden nicht ins Querformat geschnitten, sondern ganz auf hellem Grund gezeigt. Das Feld ist quadratisch, damit die Karte in der 360 px breiten Spalte lesbar bleibt (im 16:7-Feld wäre sie nur 157 px hoch); ganz groß zeigt sie der Klick. Zwei Klassen schlagen die mobile Regel .projekt-bild img { aspect-ratio: 16 / 9 }. */ .projekt-bild.ist-ganz img { aspect-ratio: 1 / 1; object-fit: contain; background: var(--hell); } /* ---------- Bilder groß ansehen ---------- */ img.ist-lupe { cursor: zoom-in; } /* Anthrazit mit weißem Innenring: das Bild darunter kann jede Helligkeit haben. */ img.ist-lupe:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; box-shadow: 0 0 0 3px var(--weiss); } body.lupe-aktiv { overflow: hidden; } .lupe-schicht { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 28px); padding: clamp(16px, 4vw, 48px); background: rgba(16, 24, 30, 0.94); } .lupe-schicht.ist-offen { display: flex; } .lupe-rahmen { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; max-height: 100%; } .lupe-rahmen img { max-width: 100%; max-height: calc(100vh - clamp(96px, 14vw, 190px)); width: auto; height: auto; object-fit: contain; background: #0d1418; } .lupe-text { color: rgba(255, 255, 255, 0.82); font-size: var(--t-1); text-align: center; max-width: 70ch; } .lupe-schicht button { flex: none; display: grid; place-items: center; width: 48px; height: 48px; background: rgba(255, 255, 255, 0.1); color: #fff; border: 0; border-radius: 50%; cursor: pointer; transition: background 0.15s ease; } .lupe-schicht button:hover { background: rgba(255, 255, 255, 0.22); } /* Auf der fast schwarzen Schicht trägt der weiße Ring (14,7:1 gegen #101e1e). */ .lupe-schicht button:focus-visible { outline: 2px solid var(--weiss); outline-offset: 3px; box-shadow: 0 0 0 3px var(--text); } .lupe-schicht button svg { width: 26px; height: 26px; } .lupe-zu { position: absolute; top: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 24px); } @media (max-width: 700px) { .lupe-schicht { gap: 4px; padding: 12px; } /* Hausmaß 44 × 44 px — vorher 42 px. */ .lupe-schicht button { width: var(--ziel); height: var(--ziel); } .lupe-schicht button svg { width: 22px; height: 22px; } .lupe-rahmen img { max-height: calc(100vh - 150px); } } /* ---------- Einwilligung im Kontaktformular ---------- */ .formular-zustimmung { display: flex; align-items: flex-start; gap: 12px; margin: 22px 0 0; } .formular-zustimmung input[type='checkbox'] { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--orange-tief); cursor: pointer; } /* Das Label ist das eigentliche Klickziel der 20-px-Box — Hausmaß 44 px in der Höhe. */ .formular-zustimmung label { min-height: var(--ziel); font-size: var(--t-1); line-height: 1.5; cursor: pointer; } .formular-zustimmung a { color: var(--orange-tief); } .formular-zustimmung .pflicht { color: var(--orange-tief); margin-left: 3px; } /* Der globale Ring (Anthrazit + weißer Versatz) genügt; Orange trug hier nur 2,86:1. */ .formular-zustimmung input:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--weiss); } /* ---------- Contact Form 7 im Stil des Formulars ---------- Die Felder erben die Regeln von .formular (html_class im Shortcode); hier nur, was CF7 an eigenem Markup mitbringt: Hülle, Einwilligung, Knopf, Meldungen. */ .formular .wpcf7-form-control-wrap { display: block; } .formular-zustimmung .wpcf7-form-control-wrap { flex: 1; } .formular-zustimmung .wpcf7-list-item { display: block; margin: 0; } .formular-zustimmung .wpcf7-list-item label { display: flex; align-items: flex-start; gap: 12px; font-size: var(--t-1); line-height: 1.5; cursor: pointer; } .formular-zustimmung .wpcf7-list-item input[type='checkbox'] { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--orange-tief); cursor: pointer; } .formular-zustimmung .wpcf7-list-item-label a { color: var(--orange-tief); } /* input[type=submit] kann kein Icon enthalten — der Pfeil kommt als Hintergrundbild */ .formular input.wpcf7-submit.knopf { -webkit-appearance: none; appearance: none; line-height: 1.4; padding-right: 60px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 18l6-6M13 6l6 6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 26px center; background-size: 20px 20px; } /* Mit opacity: 0,45 lag die Schrift bei 1,72:1 und die Fläche bei 1,66:1 zur Umgebung — der abgeschaltete Zustand war kaum zu erkennen. Jetzt eigene Farben: Weiß auf --text-leicht = 5,50:1, Fläche gegen --hell = 5,09:1. */ .formular input.wpcf7-submit.knopf:disabled { opacity: 1; background-color: var(--text-leicht); cursor: not-allowed; } .formular .wpcf7-spinner { margin: 0 0 0 14px; vertical-align: middle; } /* Das Feld hat jetzt einen umlaufenden Rand — der Fehler färbt ihn ganz. Nachgerechnet trägt --fehler #a42a1a 7,18:1 auf Weiß und 6,64:1 auf --hell (die frühere Angabe 5,73:1 war falsch; nötig sind 3:1 für den Rand und 4,5:1 für den Meldungstext). Rand doppelt stark und Zeichen vor der Meldung wie im Theme-Formular — der Fehler darf nicht allein an der Farbe hängen. */ .formular .wpcf7-not-valid { border-color: var(--fehler); border-width: 2px; } .formular .wpcf7-not-valid-tip { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; color: var(--fehler); font-size: var(--t-1); font-weight: var(--w-akzent); line-height: 1.45; } .formular .wpcf7-not-valid-tip::before { content: '!'; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--fehler); color: var(--weiss); font-size: 12px; font-weight: var(--w-titel); line-height: 1; margin-top: 2px; } .wpcf7 form.formular .wpcf7-response-output { margin: 18px 0 0; padding: 12px 14px; border: 0; border-radius: var(--radius); font-size: var(--t-1); font-weight: var(--w-akzent); } .wpcf7 form.formular.sent .wpcf7-response-output { background: #e6f4ea; color: #1e6b3a; } .wpcf7 form.formular.invalid .wpcf7-response-output, .wpcf7 form.formular.unaccepted .wpcf7-response-output { background: #fff4e5; color: #8a4b00; } .wpcf7 form.formular.failed .wpcf7-response-output, .wpcf7 form.formular.aborted .wpcf7-response-output, .wpcf7 form.formular.spam .wpcf7-response-output { background: #fdecea; color: var(--fehler); } /* ---------- Bewegung reduzieren ---------- Steht bewusst ganz am Ende und gilt für alles: vorher liefen die Bildvergrößerung der Kacheln, der Unterstrich im Menü, das Zustandszeichen der Kachel und der Pfeil bei „Zum Projekt" trotz der Systemeinstellung weiter. Statt jede Regel einzeln zurückzunehmen wird hier jede Bewegung abgeschaltet; Ein- und Ausblenden bleibt, nur eben ohne Weg. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .kachel-link:hover img, .projekt-bild:hover img { transform: none !important; } /* Ausnahme wie vor dem Barrierefreiheits-Durchgang: der Knopf „nach oben" soll weiterhin weich ein- und ausblenden, nur ohne Weg. Die Regel darüber hätte ihn hart erscheinen lassen. Eine Klasse schlägt den *-Selektor, beide !important. */ .nach-oben { transition-property: opacity, visibility !important; transition-duration: 0.2s !important; } }