/* ========================================================================== AMB Reinigungstechnik — global.css Version 2.1 — Stand 2026-09-17 47. Neuer Abschnitt 14.6: Heldenbild mit Foto. Das Foto liegt als CSS-Variable --hero-foto am Element, darueber eine Abdeckung aus blau-900, damit die weisse Schrift ihren Kontrast behaelt. Ohne Abdeckung waere jede Ueberschrift auf einem hellen Foto unlesbar, und mit Abdeckung braucht das Foto keine Schaerfe, was die Dateigroesse halbiert. Version 2.0 — Stand 2026-09-17 Änderungen gegenüber 1.9: 42. Eigener Displayschnitt für Überschriften: Archivo auf Breite 80 festgenagelt, Gewicht bis 900. Siehe DECISIONS.md D-053. Dieselbe Familie, dieselbe Lizenz, eine zusätzliche Datei von 35,8 KB. 43. Abstand zwischen Abschnittsüberschrift und Inhalt von 16px auf 32px mobil und 44px auf dem Desktop. 16px waren der Absatzabstand einer h2, nicht der Abstand eines Abschnittskopfes zu seinem Inhalt. 44. Vertrauenszeile neu gebaut: vier gleiche Spalten mit Haarlinien dazwischen, Stern vor der Bewertung, begrenzte Breite. 45. Formularsektion: Überschrift und Formular stehen jetzt in derselben Spalte. Die Überschrift stand am linken Containerrand, das Formular mittig, 208px daneben. Das sah aus wie ein Layoutfehler, weil es einer war. 46. Bilder in Karten laufen bis an die Kartenkante, der Radius schneidet sie. Greift, sobald echte Fotos vorliegen. Version 1.9 — Stand 2026-09-17 Änderungen gegenüber 1.8, nach einer Messung der Schriftgrößen auf wonderlandkohtao.com bei 390px: 38. Mobile Typografie neu gestuft. 1.6 hatte auf die Rückmeldung "Schrift zu groß" hin die ÜBERSCHRIFTEN verkleinert. Das war die falsche Stellschraube. Gemessen: Wonderland fährt H2 zu Fließtext im Verhältnis 1,88 zu 1, AMB stand bei 1,41 zu 1. Wenn Überschrift und Fließtext fast gleich groß sind, liest sich jede Seite als Textwand, egal wie gut die Karten aussehen. Überschriften also wieder hoch, dafür der Kartentext runter, der eine Zusammenfassung ist und kein Lesetext. 39. Zeilenabstand der Überschriften von 1,18 bis 1,30 auf 1,08 bis 1,22. Wonderland fährt 1,00 bis 1,10. Eine mehrzeilige Überschrift soll als ein Block lesen, nicht als drei Zeilen. 40. Leicht negative Laufweite auf großen Überschriften. Archivo Bold läuft ab 28px sichtbar zu weit. Das ist die Gegenbewegung zu Wonderland, das auf Bebas Neue POSITIVE Laufweite braucht, weil eine schmale Versalienschrift Luft zwischen den Buchstaben braucht. Werte lassen sich zwischen den beiden Schriften nicht übertragen, nur Verhältnisse. 41. Seitenrand auf dem Telefon von 16px auf 20px. Mit den Inselkarten aus 1.8 saß die Karte sonst zu dicht an der Bildschirmkante. Version 1.8 — Stand 2026-09-17 Änderungen gegenüber 1.7, nach einem Abgleich mit wonderlandkohtao.com auf ausdrücklichen Wunsch des Auftraggebers ("island like"): 34. Neuer Abschnitt 13: Inselkarten. Bis 1.7 waren Leistungskarten, FAQ und Risikokasten weiße Flächen mit Haarlinie auf weißem Grund. Auf dem Telefon, wo jede Karte die volle Breite hat, liest sich das nicht als Karte, sondern als Liste mit Trennstrichen. Neu trägt jede Karte eine eigene Fläche: auf hellem Grund eine blaue Tönung, auf getöntem Grund Weiß mit weichem Schatten. Die Trennstriche entfallen ersatzlos. 35. Der Risikokasten war auf .amb-section--stein unsichtbar, weil Kasten und Sektion beide blau-50 trugen. Echter Fehler, seit 1.4 drin. 36. Mehr Luft: Kartenpolster auf dem Telefon von 16px auf 22px, Rasterabstand von 24px auf 20px, Sektionsluft von 40px auf 48px. 37. Die Vertrauenszeile ist keine randlose Bandfläche mehr, sondern eine gerundete Insel auf weißem Grund. Version 1.7 — Stand 2026-09-17 Änderungen gegenüber 1.6, gemessen an der Live-Fassung auf einem Android- Telefon mit Gestennavigation: 31. Neuer Abschnitt 7.14c: echte Menütaste unter 900px. Die umbrechende Navigationszeile war auf 390px zweizeilig und rund 130px hoch. Umsetzung mit details und summary, also ohne eine Zeile JavaScript. 32. viewport-fit=cover ist aus page-amb.php entfernt. Solange es gesetzt war, lieferte env(safe-area-inset-bottom) auf Android den Streifen der Gestennavigation zurück, aber erst, sobald die Adressleiste beim Scrollen einklappte. Die klebende Leiste wuchs dadurch mitten im Scrollen um rund 48px weißen Rand. Das war der "weiße Platz", und das war das "Hochrutschen". 33. Der Platz am Seitenende hängt nicht mehr allein an der Klasse am body, sondern zusätzlich am Footer. Eine einzige fehlende Body-Klasse hätte sonst die letzte Sektion unter die Leiste geschoben. Version 1.6 — Stand 2026-09-17 Änderungen gegenüber 1.5, gemessen auf 390px an der Live-Fassung: 28. Neuer Abschnitt 8b, mobile Feinabstimmung. Der Hero brauchte auf dem Telefon 692px, bevor ein Wort Inhalt kam, die H1 brach vierzeilig. 29. Die Hauptnavigation bricht unter 700px um, statt zu scrollen. Die Scrollreihe hat den letzten Punkt mitten im Wort abgeschnitten. 30. .amb-hero__bildtext auf dem Telefon ausgeblendet, er nahm drei Zeilen und lief hinter die klebende Leiste. Version 1.5 — Stand 2026-09-17 Änderungen gegenüber 1.4, nach Ansicht der Live-Fassung: 25. Heromuster von blau-700 auf weiß mit 4,5 Prozent Deckung. Der alte Streifenkontrast zog das Auge vom H1 weg. 26. .amb-hero__bildtext ohne Pillenhintergrund und auf 42 Prozent gedämpft. Der Fotohinweis war nach der Überschrift das auffälligste Element. 27. Weniger Luft über der Sektion direkt nach der Vertrauenszeile. Version 1.4 — Stand 2026-09-17 Änderungen gegenüber 1.3, nach Ansicht der ersten Live-Fassung und einem Abgleich mit Piepenbrock, BELFOR und Dussmann. Siehe DECISIONS.md D-046. 20. Die warme Stein-Neutrale ist aus allen Flächen entfernt. Die Bänder wechseln jetzt weiß, sehr helles Blau, Dunkelblau. Keiner der drei verglichenen Betriebe tönt Flächen warm, alle drei setzen auf Weiß plus genau eine kräftige Akzentfarbe plus dunkle Kontrastbänder. Aufgehoben: --amb-stein-50, --amb-stein-100, --amb-stein-300, --amb-stein-700. 21. .amb-bewertung ist nicht mehr flächig aqua-100 gefüllt, sondern weiß mit einer Haarlinie. Pastellgefüllte Kästen auf getöntem Grund waren der sichtbarste Schwachpunkt der ersten Live-Fassung. 22. Radien von 6/10/16 auf 4/8/12. Piepenbrock 5px, BELFOR und Dussmann 0. 23. Schlagschatten auf Karten entfallen. Karten tragen eine Haarlinie, beim Überfahren wechselt die Randfarbe. Keine der drei Referenzen legt Schatten unter Karten. 24. Neu: Abschnitt 3b, Schutzregeln gegen Theme-CSS. Astra liefert .ast-single-post .entry-content a { text-decoration: underline } mit höherer Spezifität als unsere Komponentenregeln aus. Auf jeder Seite, die versehentlich nicht auf der Vorlage "AMB Vollbreite" steht, waren damit sämtliche Überschriften und Fließtexte in Karten unterstrichen. Änderungen gegenüber 1.2: 17. Die Schriftdateien liegen jetzt tatsächlich vor, build/fonts/. Je Familie eine variable Datei für latin und eine für latin-ext, jeweils mit unicode-range. Kein externer Google-Dienst, harte Regel 9. 18. Kopfbereich trägt die neue Querfassung des Logos (assets/marke/amb-logo-horizontal.webp, Seitenverhältnis 4,2 zu 1). Die gestapelte Fassung war 1,26 zu 1 und "Reinigungstechnik" damit bei jeder vertretbaren Kopfhöhe unlesbar. Siehe DECISIONS.md D-042. 19b. Neue Komponente .amb-karte, Abschnitt 7.14b. Statisches Kartenbild mit Pflichtangabe der Quelle unter dem Bild. 19. Im Footer steht keine Textmarke mehr, sondern die Negativfassung (amb-logo-horizontal-negativ.webp). Der Grund für die Textmarke ist entfallen, die Negativfassung existiert. Siehe D-042. Änderungen gegenüber 1.1, aus dem Bau von build/pages/angebot-anfordern.html: Änderungen gegenüber 1.0, Stand 16.09.2026 abends: 1. Neue Komponente .amb-fotoplatz, Abschnitt 7.4b. Bauplatz für ein fehlendes Foto. Siehe DECISIONS.md D-031. 2. Neue Komponente .amb-zweispalter. Zwei Textspalten, damit .amb-risikogrid nicht für Fremdinhalte zweckentfremdet wird. 3. .amb-verfahren steuert die Spaltenzahl über --schritte. Fünf Schritte ergaben vorher eine Reihe aus vier plus ein einzelnes Element. Modifikatoren: --fuenf, --sechs, --acht, --lang (ab sieben Schritten bleibt die Liste auf jeder Breite senkrecht). 4. .amb-bewertunggrid streckt kurze Zitate nicht mehr auf die Höhe langer. 5. Kopfbereich unter 900px: Navigation in einer scrollbaren Reihe statt dreizeilig. Der klebende Kopf war auf 390px rund 215px hoch. 6. address wird nicht mehr kursiv ausgegeben. 7. Footer: Linkfarbe greift nicht mehr auf Buttons durch. Ein .amb-btn--ghost im Footer hatte helles Aqua auf Weiß, rund 1,9 zu 1. 8. Farbpalette vollständig auf die Messwerte aus der Logo-Originaldatei umgestellt, siehe DECISIONS.md D-022. Aufgehoben: --amb-blau-500, --amb-blau-300, --amb-aqua-300. Neu: --amb-blau-800, --amb-blau-400, --amb-aqua-200. 9. Fokusring von aqua-500 auf aqua-700 beziehungsweise aqua-200, weil der neue aqua-500-Wert die 3 zu 1 aus WCAG 1.4.11 verfehlt. Siehe D-033. 10. Akzentbalken von .amb-risiko auf aqua-700, aqua-500 war auf stein-100 praktisch unsichtbar. 11. Logo als Bilddatei im Kopf, .amb-logo trägt das Rasterasset aus assets/marke/. Seit 1.3 auch im Footer, als Negativfassung. 12. Neue Komponente .amb-leistungsauswahl für die Mehrfachauswahl auf /angebot-anfordern/, mit .amb-leistungsauswahl__note für eine Zeile, die die vorherige Checkbox einschränkt. 13. .amb-anfrage input[type="file"] bekommt dieselbe Feldoptik wie die übrigen Felder. Bis zur Angebotsseite hatte keine Seite einen Upload. 15. .amb-risikogrid--drei fuer die drei Risiko-Kaesten der Startseite. Im Zweierraster ergaben drei Kaesten zwei plus einen. 14. .amb-anfrage setzt --focus-farbe und die Linkfarbe innerhalb der Karte fest auf die Werte für hellen Grund. Die Karte ist immer weiß, auch innerhalb von .amb-section--dunkel, erbte dort aber Fokusring und Linkfarbe der dunklen Sektion. Dasselbe Kontrastproblem wie D-033. 16. Die pauschale Touch-Ziel-Regel in Abschnitt 10 ist entfallen. Sie stand nach den Komponenten und hat .amb-btn von 56px auf 48px, .amb-chip von 32px auf 48px und .amb-anfrage textarea von 120px auf 48px ueberschrieben. Ersetzt durch ein :where()-Sicherheitsnetz ohne Spezifitaet. Kein Token- und kein Farbwert wurde seit 1.1 geändert. Diese Datei wurde als Ganzes neu geschrieben, nicht gepatcht. Quelle der Wahrheit: DESIGN-SYSTEM.md (Tokens, Komponenten, Regeln) WICHTIG: Diese Datei wird bei jeder Änderung VOLLSTÄNDIG ERSETZT. Sie wird niemals stückweise gepatcht, nie per Browser-Inspektor-Snippet erweitert und nie durch ein zweites, konkurrierendes Stylesheet ergänzt. Jede Änderung geht zuerst in DESIGN-SYSTEM.md, dann hierher. Aufbau dieser Datei: 0. Astra-Reset (siehe TECHNICAL.md Abschnitt 3, DESIGN-SYSTEM.md Regel 5) 1. Tokens (:root) 2. Schriften (@font-face) 3. Basis-Reset und Grundtypografie 4. Fluide Typskala 5. Layout-Utilities (Container, Sektionen) 6. Buttons 7. Komponenten (amb-*), inkl. 7.4b .amb-fotoplatz 8. Mobil-Bänder unter 600px 9. Sticky-CTA unter 900px 10. Barrierefreiheit (Fokus, Touch-Ziele, reduzierte Bewegung) 11. Druckstil ========================================================================== */ /* ========================================================================== 0. ASTRA ENTRY-CONTENT PADDING RESET — siehe TECHNICAL.md Abschnitt 3 ========================================================================== Astras dynamisches CSS setzt serienmäßig ein pauschales Padding auf jeden DIREKTEN Kindblock von .entry-content (u.a. .wp-block-group, .wp-block-columns, .wp-block-cover). Diese Regel wird mit hoher Spezifität ausgeliefert und überschreibt damit jedes Komponenten-Padding aus diesem Stylesheet, obwohl global.css NACH Astra geladen wird. Im Schwesterprojekt hat genau dieser Fehler auf einem 412px-Telefon 114px Breite pro Kasten gekostet. Gegenmaßnahme, architektonisch statt per Wettrüsten mit !important: Dieser Reset setzt das Padding JEDES direkten entry-content-Kindes auf 0. Keine .amb-*-Komponentenklasse sitzt jemals selbst als direktes Kind von .entry-content — jede Sektion ist ein schlichter, klassenloser (oder nur mit .amb-section versehener) Gutenberg-Block, und die eigentliche .amb-*-Box liegt EINE Ebene tiefer, in .amb-container oder direkt im Sektionsinhalt. Astras ">"-Selektor greift dort nicht mehr, wodurch die Padding-Werte der Komponenten weiter unten in dieser Datei ganz normal, ohne !important, ohne Spezifitäts-Wettrüsten gelten. .amb-section ist die einzige Klasse, die absichtlich SELBST als direktes Kind auftritt (volle Breite fürs Hintergrundband). Sie bleibt bei Padding 0 auf sich selbst — das ist korrekt, sie soll randlos bis zum Viewport-Rand reichen. Die sichtbare Innenluft kommt von .amb-container, das eine Ebene tiefer liegt und von diesem Reset nicht erfasst wird. Einzige !important-Stelle in dieser Datei. Jede andere Verwendung von !important in diesem Dokument wäre ein Fehler. ========================================================================== */ body.single .entry-content > *, body.page .entry-content > *, .entry-content > .wp-block-group, .entry-content > .wp-block-columns, .entry-content > .wp-block-cover, .entry-content > .wp-block-group.amb-section, .entry-content > .wp-block-cover.amb-hero { padding: 0 !important; /* siehe Erklärung oben — einzige erlaubte Ausnahme */ } /* Hinweis für alle Mitwirkenden: Sollte eine .amb-*-Box ausnahmsweise doch als direktes Kind von .entry-content eingefügt werden (nicht empfohlen), muss sie zuerst in einen schlichten Group-Block ohne eigenes Padding gewickelt werden. Niemals eine .amb-*-Klasse selbst zum direkten Kind von .entry-content machen. */ /* ========================================================================== 1. TOKENS — exakt aus DESIGN-SYSTEM.md, keine eigenen Werte ========================================================================== */ :root { /* --- Marke, Blau ------------------------------------------------------- Gemessen aus assets/logo/AMB_Logo.pdf, nicht mehr aus dem Schildfoto. Siehe DESIGN-SYSTEM.md 1.1 Abschnitt 1 und DECISIONS.md D-022. Aufgehoben und nirgends mehr zulaessig: #4A5CA9, #454E89, #3344A0. */ --amb-blau-900: #0B2350; --amb-blau-800: #133A7E; --amb-blau-700: #1A4791; --amb-blau-600: #2056AE; /* Logofarbe, Primaerfarbe, alle Hauptbuttons */ --amb-blau-400: #6A96D6; --amb-blau-100: #DCE8F8; --amb-blau-50: #F2F6FD; /* --- Akzent, Wasser ----------------------------------------------------*/ --amb-aqua-700: #0F6E9E; --amb-aqua-500: #35A6DA; --amb-aqua-200: #AEE3F8; /* Blasenfarbe aus dem Logo */ --amb-aqua-100: #CCEFFC; /* Schwungfarbe aus dem Logo */ /* --- Stein, Sekundärneutral: AUFGEHOBEN am 17.09.2026, D-046 ------------ Die warme Stein-Neutrale war als Unterscheidungsmerkmal gedacht, weil jeder Mitbewerber in Vorarlberg rein blau-weiß auftritt. Sie war dafür gedacht, neben Sandsteinfotos zu stehen. Solange es keine Fotos gibt, steht eine warme Fläche neben kaltem Blau ohne jede Begründung und liest sich als falsches Weiß, nicht als Stein. Die Unterscheidung trägt jetzt das dunkelblaue Band, nicht die Tönung. Nicht mehr verwenden: --amb-stein-50, -100, -300, -700. */ /* --- Neutral ------------------------------------------------------------*/ --amb-tinte: #14161C; --amb-grau-600:#4A5059; --amb-grau-300:#C9CDD4; --amb-grau-100:#EDEFF2; --amb-weiss: #FFFFFF; /* --- Signal ---------------------------------------------------------- */ --amb-erfolg: #1F7A4D; --amb-warn: #B4560F; /* --- Schriften --------------------------------------------------------- */ --font-heading: "Archivo", "Helvetica Neue", Arial, sans-serif; /* Displayschnitt, Breite 80. NUR fuer h1 bis h4 und Kartentitel, siehe D-053. Knoepfe bleiben auf --font-heading, weil "Direkt anrufen: 0699 115 23 966" auf Breite 80 zu eng wird. */ --font-display: "ArchivoDisplay", "Archivo", "Helvetica Neue", Arial, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* --- Fluide Typskala, siehe Abschnitt 4 dieser Datei für die Herleitung */ --fs-h1: clamp(2.125rem, 1.6875rem + 1.75vw, 3rem); /* 34px -> 48px */ --fs-h2: clamp(1.6875rem, 1.46875rem + 0.875vw, 2.125rem); /* 27px -> 34px */ --fs-h3: clamp(1.3125rem, 1.21875rem + 0.375vw, 1.5rem); /* 21px -> 24px */ --fs-h4: clamp(1.125rem, 1.0625rem + 0.25vw, 1.25rem); /* 18px -> 20px */ --fs-lead: clamp(1.1875rem, 1.125rem + 0.25vw, 1.3125rem); /* 19px -> 21px */ --fs-body: clamp(1.0625rem, 1.03125rem + 0.125vw, 1.125rem); /* 17px -> 18px */ --fs-meta: 0.9375rem; /* 15px, fest */ --fs-button: 1.0625rem; /* 17px, fest */ --fs-eyebrow: clamp(0.8125rem, 0.78125rem + 0.125vw, 0.875rem); /* 13px -> 14px */ /* --- Abstände, 8er-Raster ---------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Sektionsabstand: dokumentierte Ausnahme vom 8er-Raster laut DESIGN-SYSTEM.md Abschnitt 4 ("mobil 56px"). Bewusst kein Raster-Wert. */ --section-pad-mobil: 56px; --section-pad-desktop: var(--space-9); /* 96px */ /* --- Radien, Rahmen, Schatten ------------------------------------------*/ --radius-sm: 4px; /* 1.4: enger, siehe D-046 */ --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --border-color: var(--amb-grau-300); --border: 1px solid var(--border-color); --shadow-1: 0 1px 2px rgba(20,22,28,.06), 0 2px 8px rgba(20,22,28,.06); --shadow-2: 0 4px 12px rgba(20,22,28,.08), 0 12px 32px rgba(20,22,28,.10); /* Einziger erlaubter Verlauf im gesamten Design-System: Hero-Overlay */ --hero-overlay: linear-gradient(135deg, rgba(11,35,80,.72), rgba(11,35,80,.35)); /* --- Layout -------------------------------------------------------------*/ --container-max: 1200px; --content-narrow: 720px; --container-pad: 16px; /* --- Bewegung, siehe Abschnitt 10 dieser Datei --------------------------- Wird unter prefers-reduced-motion auf 0ms gesetzt statt per !important einzelne Regeln zu überschreiben. */ --motion-fast: 150ms; --motion-ease: ease; /* --- Fokusring ------------------------------------------------------------*/ /* Fokusring. DESIGN-SYSTEM.md 1.1 Abschnitt 10 schreibt --amb-aqua-500 vor. Mit dem neuen Wert #35A6DA erreicht dieser Ring auf Weiss nur 2,76 zu 1 und verfehlt damit die 3 zu 1 aus WCAG 2.1 SC 1.4.11 fuer nichttextliche Bedienhinweise. Mit dem alten #2F9BD1 waren es 3,4 zu 1. Die Vorgabe ist also durch die Farbkorrektur aus D-022 ungueltig geworden, nicht durch eine Designentscheidung. Deshalb: auf hellem Grund --amb-aqua-700 #0F6E9E 5,61 zu 1 auf dunklem Grund --amb-aqua-200 #AEE3F8 11,05 zu 1 Beides aus dem Logo. Vorgelegt zur Bestaetigung, siehe Batch-0-Bericht. */ --focus-farbe: var(--amb-aqua-700); --focus-ring: 3px solid var(--focus-farbe); --focus-offset: 2px; /* --- Sticky-CTA-Höhe, für das untere Body-Padding auf Mobil ------------- */ --stickycta-height: 64px; } /* ========================================================================== 2. SCHRIFTEN — Archivo (Überschriften), Inter (Fließtext) ========================================================================== Lokal ausgeliefert über OMGF (siehe TECHNICAL.md Abschnitt 4), variable Schriftdateien statt einzelner statischer Schnitte, damit die 4-Datei- Grenze aus DESIGN-SYSTEM.md Abschnitt 11 sicher eingehalten wird: 1 variable Archivo-Datei deckt Gewicht 600–700 ab, 1 variable Inter-Datei deckt Gewicht 400–600 ab. Die Dateien liegen in build/fonts/ und gehoeren beim Upload nach wp-content/themes/amb-child/fonts/. Bezugsquelle und Lizenz: build/fonts/. ========================================================================== */ /* Archivo, Breite 100. Traegt die Bedienelemente: Knoepfe, FAQ-Zeilen, Menuetaste, Schrittnummern. Dort ist normale Breite richtig, weil diese Texte kurz und funktional sind und Enge sie schlechter lesbar macht. */ @font-face { font-family: "Archivo"; src: url("/wp-content/themes/amb-child/fonts/archivo-variable.woff2") format("woff2-variations"), url("/wp-content/themes/amb-child/fonts/archivo-variable.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; 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: "Archivo"; src: url("/wp-content/themes/amb-child/fonts/archivo-variable-ext.woff2") format("woff2-variations"), url("/wp-content/themes/amb-child/fonts/archivo-variable-ext.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; 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; } /* Archivo Display, dieselbe Familie auf Breite 80 festgenagelt, Gewicht bis 900. Nur fuer Ueberschriften und Kartentitel, siehe D-053. Warum ueberhaupt: Archivo ist eine variable Schrift mit zwei Achsen, Gewicht 100 bis 900 und Breite 62 bis 125. Ausgeliefert wurde bis 1.9 nur die Gewichtsachse. Die Breitenachse loest das deutsche Problem, dass "Gebaeudereinigung" oder "Photovoltaikreinigung" allein eine Zeile fuellen. Warum festgenagelt statt zweiachsig: die zweiachsige Datei waegt 90 KB, diese hier 35,8 KB. Die Breite braucht zur Laufzeit niemand zu aendern. */ @font-face { font-family: "ArchivoDisplay"; src: url("/wp-content/themes/amb-child/fonts/archivo-display.woff2") format("woff2-variations"), url("/wp-content/themes/amb-child/fonts/archivo-display.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; 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: "ArchivoDisplay"; src: url("/wp-content/themes/amb-child/fonts/archivo-display-ext.woff2") format("woff2-variations"), url("/wp-content/themes/amb-child/fonts/archivo-display-ext.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; 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: "Inter"; src: url("/wp-content/themes/amb-child/fonts/inter-variable.woff2") format("woff2-variations"), url("/wp-content/themes/amb-child/fonts/inter-variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; 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"; src: url("/wp-content/themes/amb-child/fonts/inter-variable-ext.woff2") format("woff2-variations"), url("/wp-content/themes/amb-child/fonts/inter-variable-ext.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; 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; } /* ========================================================================== 3. BASIS-RESET UND GRUNDTYPOGRAFIE ========================================================================== */ html { box-sizing: border-box; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; color: var(--amb-tinte); background: var(--amb-weiss); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--amb-tinte); margin: 0 0 var(--space-4); font-weight: 700; /* Schutz vor horizontalem Überlauf durch lange deutsche Komposita (z. B. "Komponentenbibliothek", "Moos- und Algenentfernung") auf schmalen Viewports. Bricht nur, wenn ein einzelnes Wort sonst breiter als der verfügbare Platz wäre. */ overflow-wrap: break-word; } /* 1.9: Laufweite. Archivo Bold laeuft ab 28px sichtbar zu weit, die Woerter fallen auseinander. Minimal negativ gesetzt, gestaffelt nach Groesse, weil der Effekt mit der Schriftgroesse zunimmt. Unter 21px nicht mehr, dort schadet enge Laufweite der Lesbarkeit. */ h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.021em; } h2 { font-size: var(--fs-h2); line-height: 1.14; letter-spacing: -0.016em; } h3 { font-size: var(--fs-h3); line-height: 1.22; letter-spacing: -0.01em; font-weight: 600; } h4 { font-size: var(--fs-h4); line-height: 1.3; font-weight: 600; } p { margin: 0 0 var(--space-4); } p.amb-lead { font-size: var(--fs-lead); line-height: 1.55; } ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); } a { color: var(--amb-blau-600); text-decoration-thickness: 1px; } a:hover { color: var(--amb-blau-700); } img { max-width: 100%; height: auto; display: block; } address { font-style: normal; } /* Browserstandard kursiv, im Footer unerwuenscht */ small, .amb-meta { font-size: var(--fs-meta); line-height: 1.5; color: var(--amb-grau-600); } .amb-eyebrow { display: block; font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amb-aqua-700); margin: 0 0 var(--space-2); } /* ========================================================================== 3b. SCHUTZREGELN GEGEN THEME-CSS ========================================================================== Diese Datei laeuft auf der Vorlage "AMB Vollbreite", die Astras CSS gar nicht erst laedt. Faellt eine Seite versehentlich auf die Standardvorlage zurueck, greift jedoch Astras Regel .ast-single-post .entry-content a { text-decoration: underline; } mit hoeherer Spezifitaet (0,2,1) als jede Komponentenregel hier (0,1,0). Auf der ersten Live-Fassung waren dadurch saemtliche Ueberschriften und Fliesstexte innerhalb der Leistungskacheln unterstrichen, weil die ganze Kachel ein ist und text-decoration an Kinder vererbt wird, ohne dass ein Kind sie zuruecknehmen koennte. Die folgenden Regeln sind deshalb absichtlich hoeher spezifiziert. Sie sind kein Wettruesten mit dem Theme, sondern ein Sicherheitsnetz fuer genau eine, gut dokumentierte Fremdregel. Siehe DECISIONS.md D-046. ========================================================================== */ /* Blockartige Links tragen nie eine Unterstreichung, egal was das Theme sagt. Textlinks im Fliesstext behalten ihre Unterstreichung, das ist gewollt. */ .entry-content a.amb-leistung-card, .entry-content a.amb-logo, .entry-content a.amb-btn, .entry-content a.amb-chip, .entry-content .amb-hauptnav a, .entry-content .amb-orte a, .entry-content .amb-kopf a, .entry-content .amb-fuss a, .entry-content .amb-stickycta a, .entry-content .amb-trustbar a, a.amb-leistung-card, a.amb-logo, a.amb-btn, a.amb-chip, .amb-hauptnav a, .amb-orte a, .amb-kopf a, .amb-fuss a, .amb-stickycta a, .amb-trustbar a { text-decoration: none; } .entry-content a.amb-leistung-card:hover, a.amb-leistung-card:hover { text-decoration: none; } /* Ueberschriften werden nie unterstrichen, auch nicht als Kind eines Links. */ .amb-leistung-card h2, .amb-leistung-card h3, .amb-leistung-card h4, .amb-leistung-card p, .amb-leistung-card span { text-decoration: none; } /* Astra setzt im entry-content eigene Ueberschriftengroessen und -farben. Unsere Typskala aus Abschnitt 4 soll gelten, nicht seine. */ .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { text-decoration: none; } /* ========================================================================== 4. FLUIDE TYPSKALA — Herleitung der clamp()-Werte ========================================================================== Referenzbereich 400px bis 1200px Viewportbreite (mobiler Ankerpunkt bis Containerbreite). clamp(min, min_px_am_400 + steigung*vw, max) je Zeile. Alle Werte sind unter Abschnitt 1 als --fs-* Tokens hinterlegt; hier nur die Nachvollziehbarkeit dokumentiert. H1 34px -> 48px H2 27px -> 34px H3 21px -> 24px H4 18px -> 20px Lead 19px -> 21px Fließtext 17px -> 18px Eyebrow 13px -> 14px Klein/Meta und Button bleiben laut DESIGN-SYSTEM.md fix (15px / 17px). ========================================================================== */ /* ========================================================================== 5. LAYOUT-UTILITIES ========================================================================== */ .amb-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } @media (min-width: 600px) { .amb-container { --container-pad: 24px; } } @media (min-width: 900px) { .amb-container { --container-pad: 32px; } } /* Die Sektion direkt nach der Vertrauenszeile bekommt weniger Luft nach oben. Die Vertrauenszeile ist nur rund 57px hoch, danach wirkten volle 96px wie ein Loch statt wie ein Abschnittswechsel. */ .amb-trustbar + .amb-section > .amb-container { padding-top: var(--space-7); } .amb-content-narrow { max-width: var(--content-narrow); margin-inline: auto; } /* .amb-section: randloser, direkter entry-content-Kindblock. Trägt nur die Hintergrundfarbe. Die sichtbare Innenluft kommt von .amb-container darunter — siehe Erklärung in Abschnitt 0 dieser Datei. */ .amb-section { width: 100%; } .amb-section > .amb-container { padding-block: var(--section-pad-mobil); } @media (min-width: 900px) { .amb-section > .amb-container { padding-block: var(--section-pad-desktop); } } .amb-section--hell { background: var(--amb-weiss); color: var(--amb-tinte); } /* Der Name bleibt, damit die 27 gebauten Seiten unveraendert bleiben. Der Wert ist seit 1.4 ein sehr helles Blau, kein Creme mehr. D-046. */ .amb-section--stein { background: var(--amb-blau-50); color: var(--amb-tinte); } .amb-section--dunkel { background: var(--amb-blau-900); color: var(--amb-weiss); } .amb-section--dunkel h1, .amb-section--dunkel h2, .amb-section--dunkel h3, .amb-section--dunkel h4 { color: var(--amb-weiss); } .amb-section--dunkel a:not(.amb-btn) { color: var(--amb-aqua-200); } .amb-section--dunkel a:not(.amb-btn):hover { color: var(--amb-aqua-100); } /* ========================================================================== 6. BUTTONS ========================================================================== */ .amb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 56px; min-width: 48px; padding-inline: var(--space-5); border-radius: var(--radius-sm); border: 2px solid transparent; font-family: var(--font-body); font-size: var(--fs-button); font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); } .amb-btn:active { transform: translateY(1px); } .amb-btn--primary { background: var(--amb-blau-600); border-color: var(--amb-blau-600); color: var(--amb-weiss); } .amb-btn--primary:hover { background: var(--amb-blau-700); border-color: var(--amb-blau-700); color: var(--amb-weiss); } .amb-btn--ghost { background: var(--amb-weiss); border-color: var(--amb-blau-600); color: var(--amb-blau-600); } .amb-btn--ghost:hover { background: var(--amb-blau-50); color: var(--amb-blau-700); border-color: var(--amb-blau-700); } .amb-section--dunkel .amb-btn--ghost { background: transparent; border-color: var(--amb-weiss); color: var(--amb-weiss); } .amb-section--dunkel .amb-btn--ghost:hover { background: rgba(255,255,255,.12); } .amb-btn--tel { background: var(--amb-weiss); border-color: var(--amb-blau-600); color: var(--amb-blau-600); } .amb-btn--tel::before { content: "\260E"; /* ☎, dekoratives Telefonsymbol, Button hat eigenen Text */ font-size: 1.1em; } .amb-btn--tel:hover { background: var(--amb-blau-50); } /* Mobil volle Breite für Haupt-CTAs im Fließtext (nicht in der Sticky-Leiste, die regelt ihre eigene Breite in Abschnitt 9) */ @media (max-width: 599.98px) { .amb-hero .amb-btn, .amb-anfrage .amb-btn { width: 100%; } } /* ========================================================================== 7. KOMPONENTEN ========================================================================== */ /* --- 7.1 .amb-hero ------------------------------------------------------- */ .amb-hero { position: relative; isolation: isolate; overflow: hidden; color: var(--amb-weiss); background: var(--amb-blau-900); } .amb-hero__bild { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; min-height: 220px; /* Sichtbarer Platzhaltermuster, solange kein echtes Foto eingebunden ist. Zwei deutlich unterscheidbare Blautöne im Streifenversatz, damit die Fläche erkennbar Tiefe hat statt als einfarbige Fläche zu wirken. Wird ein echtes Foto eingebunden, ersetzt background-image hier ein background-image mit der Fotodatei und dieses Muster entfällt. */ background-color: var(--amb-blau-900); /* 1.5: deutlich leiser. Die Vorfassung setzte blau-700 auf blau-900, das ergab einen Streifenkontrast, der das Auge vom H1 wegzieht. Ein Platzhalter darf Tiefe andeuten, aber nicht um Aufmerksamkeit kaempfen. */ background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 22px, transparent 22px 44px); } .amb-hero__bildtext { position: absolute; left: var(--space-4); bottom: var(--space-4); z-index: 1; margin: 0; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: transparent; padding-inline: 0; /* 1.5: kein Pillenhintergrund mehr, der auf blau-900 ohnehin unsichtbar war, und deutlich gedaempft. Der Hinweis ist eine Notiz an uns, nicht das zweitwichtigste Element der Seite. */ color: rgba(255,255,255,.42); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .amb-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--hero-overlay); /* einziger erlaubter Verlauf, siehe DESIGN-SYSTEM.md Abschnitt 5 */ } .amb-hero__inner { position: relative; z-index: 2; padding-block: var(--space-8); min-height: 220px; display: flex; flex-direction: column; justify-content: center; } .amb-hero h1 { color: var(--amb-weiss); } .amb-hero .amb-lead { color: var(--amb-weiss); max-width: var(--content-narrow); } .amb-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-5); } @media (min-width: 900px) { .amb-hero__inner { padding-block: var(--space-9); min-height: 340px; } .amb-hero__bild { min-height: 340px; } } /* --- 7.2 .amb-trustbar ----------------------------------------------------*/ .amb-trustbar { background: var(--amb-blau-50); } .amb-trustbar__liste { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-3) var(--space-6); list-style: none; margin: 0; padding: var(--space-4) 0; text-align: center; } .amb-trustbar__liste li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-meta); font-weight: 600; color: var(--amb-blau-700); } /* --- 7.3 Leistungsraster und .amb-leistung-card ---------------------------*/ .amb-leistungen { display: grid; grid-template-columns: 1fr; gap: var(--space-5); } @media (min-width: 600px) { .amb-leistungen { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .amb-leistungen { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .amb-leistungen { grid-template-columns: repeat(4, 1fr); } } .amb-leistung-card { display: flex; flex-direction: column; gap: var(--space-3); background: var(--amb-weiss); border: var(--border); border-radius: var(--radius-md); padding: var(--space-5); /* 1.4: kein Schlagschatten. Die Karte traegt eine Haarlinie, beim Ueberfahren wechselt die Randfarbe. Siehe D-046. */ transition: border-color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); text-decoration: none; color: inherit; } .amb-leistung-card:hover { border-color: var(--amb-blau-600); transform: translateY(-2px); } .amb-leistung-card__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--amb-blau-100); color: var(--amb-blau-600); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .amb-leistung-card__icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .amb-leistung-card__titel { font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: 600; margin: 0; color: var(--amb-tinte); } .amb-leistung-card__text { font-size: var(--fs-body); color: var(--amb-grau-600); margin: 0; } .amb-leistung-card__link { margin-top: auto; display: inline-flex; align-items: center; gap: var(--space-1); color: var(--amb-blau-700); font-weight: 600; font-size: var(--fs-meta); text-decoration: none; } .amb-leistung-card__link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--motion-fast) var(--motion-ease); } .amb-leistung-card:hover .amb-leistung-card__link { text-decoration: underline; } .amb-leistung-card:hover .amb-leistung-card__link svg { transform: translateX(2px); } /* --- 7.4 .amb-vorher-nachher, zwei Varianten ------------------------------ Variante A (Grundzustand, immer aktiv): reines CSS-Doppelbild nebeneinander. Variante B (Zusatzklasse --schieber): Schieberegler-Overlay. Ohne JavaScript bleibt der Regler mit [hidden] unsichtbar und die Komponente zeigt exakt Variante A — sie kann also nicht kaputtgehen. Ein kleines Enhancement-Script (siehe pattern-library.html) entfernt [hidden] und schaltet .is-aktiv frei. */ .amb-vorher-nachher { margin: 0; } .amb-vn-frame { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: var(--radius-lg); overflow: hidden; background: var(--amb-tinte); } .amb-vn-bild { position: relative; min-height: 220px; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; } @media (min-width: 900px) { .amb-vn-bild { min-height: 340px; } } /* "Vorher": kühler, schmutzigerer Ton. Braungraue Schraffur auf kühlem Grau. */ .amb-vn-bild--vorher { background-color: var(--amb-grau-300); background-image: repeating-linear-gradient(135deg, var(--amb-grau-600) 0 6px, transparent 6px 20px); } /* "Nachher": heller, sauberer Ton. Helle Wasserschraffur auf klarem Hellblau. */ .amb-vn-bild--nachher { background-color: var(--amb-aqua-100); background-image: repeating-linear-gradient(135deg, var(--amb-aqua-200) 0 6px, transparent 6px 20px); } .amb-vn-tag { position: relative; z-index: 1; margin: var(--space-3); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: rgba(11,35,80,.78); color: var(--amb-weiss); font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: var(--shadow-1); } .amb-vn-bildtext { margin-left: var(--space-2); font-size: var(--fs-meta); color: var(--amb-grau-600); font-weight: 400; text-transform: none; letter-spacing: normal; } .amb-vorher-nachher figcaption { margin-top: var(--space-3); font-size: var(--fs-meta); color: var(--amb-grau-600); } /* Schieberegler-Enhancement */ .amb-vorher-nachher--schieber .amb-vn-frame { position: relative; } .amb-vn-regler { /* Solange kein JS läuft, bleibt das Attribut [hidden] gesetzt und diese Regel greift nie, die Komponente zeigt dann nur das Doppelbild oben. --vn-pos wird absichtlich NICHT in :root definiert: die Variable setzt das optionale Schieberegler-Skript zur Laufzeit auf dem Element. Jede Verwendung unten trägt deshalb den Rückfallwert 50%. */ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; appearance: none; background: transparent; cursor: ew-resize; z-index: 3; } .amb-vorher-nachher--schieber .amb-vn-frame.is-aktiv { display: block; min-height: 220px; } @media (min-width: 900px) { .amb-vorher-nachher--schieber .amb-vn-frame.is-aktiv { min-height: 340px; } } .amb-vorher-nachher--schieber .amb-vn-frame.is-aktiv .amb-vn-bild { position: absolute; inset: 0; min-height: 0; } .amb-vorher-nachher--schieber .amb-vn-frame.is-aktiv .amb-vn-bild--vorher { clip-path: inset(0 calc(100% - var(--vn-pos, 50%)) 0 0); z-index: 2; /* Beschriftung an die linke obere Ecke, statt mittig, damit sie nie mit dem Reglergriff in der Mitte kollidiert. */ align-items: flex-start; justify-content: flex-start; } .amb-vorher-nachher--schieber .amb-vn-frame.is-aktiv .amb-vn-bild--nachher { z-index: 1; /* Spiegelbildlich rechts oben, bleibt sichtbar solange der Regler nicht ganz auf 100% steht. */ align-items: flex-start; justify-content: flex-end; } .amb-vorher-nachher--schieber .amb-vn-frame.is-aktiv::before { /* sichtbare Trennlinie an der Reglerposition */ content: ""; position: absolute; top: 0; bottom: 0; left: var(--vn-pos, 50%); width: 2px; background: var(--amb-weiss); z-index: 3; pointer-events: none; } .amb-vn-regler::-webkit-slider-thumb { appearance: none; width: 40px; height: 40px; border-radius: 50%; background: var(--amb-weiss); border: 3px solid var(--amb-blau-600); box-shadow: var(--shadow-2); cursor: ew-resize; } .amb-vn-regler::-moz-range-thumb { width: 40px; height: 40px; border-radius: 50%; background: var(--amb-weiss); border: 3px solid var(--amb-blau-600); box-shadow: var(--shadow-2); cursor: ew-resize; } .amb-vn-regler::-moz-range-track { background: transparent; border: 0; } /* --- 7.4b .amb-fotoplatz ---------------------------------------------------- Bauplatz für ein Foto, das noch nicht existiert. Siehe DECISIONS.md D-019. Absicht: Diese Fläche darf aus keiner Entfernung wie ein Bild aussehen. Deshalb kein Schraffurmuster, keine Bildfarben, kein Verlauf, sondern eine flache neutrale Fläche mit gestricheltem Rahmen und lesbarer Anweisung. Wer die Seite ansieht, soll sofort erkennen: hier fehlt etwas, und zwar genau dieses Motiv. Die Klasse ist bewusst eindeutig benannt, damit ein Grep über build/pages/ vor dem Livegang jede Seite findet, auf der noch ein Bauplatz steht. Prüfpunkt in QA-CHECKLISTS.md Abschnitt 6. */ .amb-fotoplatz { display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); min-height: 220px; padding: var(--space-5); border: 2px dashed var(--amb-grau-300); border-radius: var(--radius-md); /* Weiss statt grau-100: --amb-warn auf grau-100 sind 4,26 zu 1 und damit unter der Schwelle fuer Fliesstext, auf Weiss sind es 4,91 zu 1. */ background: var(--amb-weiss); color: var(--amb-grau-600); text-align: left; } @media (min-width: 900px) { .amb-fotoplatz { min-height: 340px; padding: var(--space-6); } } .amb-fotoplatz__marke { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-meta); letter-spacing: 0.08em; text-transform: uppercase; color: var(--amb-warn); } .amb-fotoplatz__motiv { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-h4); line-height: 1.3; color: var(--amb-tinte); margin: 0; } .amb-fotoplatz__anforderung { font-size: var(--fs-meta); line-height: 1.5; color: var(--amb-grau-600); margin: 0; max-width: 48ch; } /* Auf Stein- und Dunkelsektionen bleibt die Fläche neutral hell, damit der Bauplatz sich vom Sektionshintergrund abhebt statt darin zu verschwinden. */ .amb-section--dunkel .amb-fotoplatz { background: var(--amb-weiss); border-color: var(--amb-blau-400); color: var(--amb-grau-600); } .amb-section--dunkel .amb-fotoplatz__motiv { color: var(--amb-tinte); } /* Zwei Bauplätze nebeneinander, als Ersatz für .amb-vn-frame, solange weder Vorher- noch Nachher-Foto existiert. Unter 600px untereinander, damit die Anweisungstexte lesbar bleiben statt auf halbe Spaltenbreite zu schrumpfen. */ .amb-fotoplatz-paar { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 600px) { .amb-fotoplatz-paar { grid-template-columns: 1fr 1fr; } } .amb-fotoplatz-paar .amb-fotoplatz { min-height: 200px; } @media (min-width: 900px) { .amb-fotoplatz-paar .amb-fotoplatz { min-height: 280px; } } /* --- 7.5 .amb-verfahren ----------------------------------------------------*/ .amb-verfahren { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-6); counter-reset: amb-schritt; } .amb-verfahren li { counter-increment: amb-schritt; position: relative; padding-left: calc(var(--space-8) + var(--space-2)); } .amb-verfahren li::before { content: counter(amb-schritt); position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--amb-blau-600); color: var(--amb-weiss); font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h4); display: flex; align-items: center; justify-content: center; } .amb-verfahren h3 { font-size: var(--fs-h4); margin-bottom: var(--space-2); } .amb-verfahren p { color: var(--amb-grau-600); margin: 0; } /* Spaltenzahl im Querformat. Standard sind vier Schritte. Hat eine Leistung mehr Schritte, setzt das Markup eine der Modifikatorklassen unten, sonst entsteht eine angebrochene zweite Reihe mit einem einzelnen Element. */ .amb-verfahren { --schritte: 4; } .amb-verfahren--fuenf { --schritte: 5; } .amb-verfahren--sechs { --schritte: 3; } .amb-verfahren--acht { --schritte: 4; } /* Ab sieben Schritten bleibt die senkrechte Liste auf jeder Breite stehen. Sieben Spalten waeren unter 165px breit, und vier plus drei sieht wie ein Umbruchfehler aus. Die senkrechte Fassung liest ohnehin besser, wenn ein Ablauf lang ist. */ .amb-verfahren--lang { --schritte: 1; } @media (min-width: 900px) { .amb-verfahren { grid-template-columns: repeat(var(--schritte), 1fr); gap: var(--space-5); } .amb-verfahren li { padding-left: 0; padding-top: calc(48px + var(--space-4)); text-align: center; } .amb-verfahren li::before { left: 50%; transform: translateX(-50%); top: 0; } } /* Fuenf Schritte brauchen mehr Platz als vier. Zwischen 900px und 1100px bliebe pro Spalte weniger als 200px, dort bleibt die senkrechte Liste stehen, die ohnehin gut liest. */ @media (min-width: 900px) and (max-width: 1099.98px) { .amb-verfahren--fuenf { grid-template-columns: 1fr; gap: var(--space-6); } .amb-verfahren--fuenf li { padding-left: calc(var(--space-8) + var(--space-2)); padding-top: 0; text-align: left; } .amb-verfahren--fuenf li::before { left: 0; transform: none; } } @media (min-width: 900px) { .amb-verfahren--lang { gap: var(--space-6); } .amb-verfahren--lang li { padding-left: calc(var(--space-8) + var(--space-2)); padding-top: 0; text-align: left; } .amb-verfahren--lang li::before { left: 0; transform: none; } } /* --- 7.6 .amb-risiko -------------------------------------------------------- Differenzierungskomponente. Behält Einzug und linken Akzentbalken auch auf Mobil unter 600px — siehe Abschnitt 8, ausdrückliche Ausnahme. */ .amb-risiko { position: relative; background: var(--amb-blau-50); border-radius: var(--radius-md); padding: var(--space-5); padding-left: calc(var(--space-5) + var(--space-2)); margin-inline: var(--space-4); } .amb-risiko::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; /* aqua-500 erreicht auf stein-100 nur 2,28 zu 1 und verschwindet optisch. Der Balken traegt die Komponente, deshalb die dunklere Logostufe. */ background: var(--amb-aqua-700); border-radius: var(--radius-md) 0 0 var(--radius-md); } .amb-risiko h3 { font-size: var(--fs-h4); margin-bottom: var(--space-2); color: var(--amb-tinte); } .amb-risiko p { margin: 0; color: var(--amb-grau-600); } .amb-risiko p + p { margin-top: var(--space-2); } /* --- 7.7 .amb-bewertung -----------------------------------------------------*/ /* 1.4: weiss mit Haarlinie statt flaechig aqua-100. Ein pastellgefuellter Kasten war auf getoentem Grund der sichtbarste Schwachpunkt. Keine der drei Referenzen (Piepenbrock, BELFOR, Dussmann) fuellt Karten pastellig. */ .amb-bewertung { background: var(--amb-weiss); border: 1px solid var(--amb-blau-100); border-left: 3px solid var(--amb-blau-600); border-radius: var(--radius-md); padding: var(--space-5); margin: 0; } .amb-bewertung__sterne { color: var(--amb-aqua-700); font-size: var(--fs-h4); letter-spacing: 2px; margin-bottom: var(--space-3); } .amb-bewertung p { font-size: var(--fs-body); color: var(--amb-tinte); margin: 0; } .amb-bewertung cite { display: block; margin-top: var(--space-4); font-style: normal; font-weight: 600; color: var(--amb-blau-700); } .amb-bewertung cite span { display: block; font-weight: 400; font-size: var(--fs-meta); color: var(--amb-grau-600); margin-top: var(--space-1); } /* --- 7.8 .amb-faq, nativ, ohne JavaScript ----------------------------------*/ .amb-faq { } .amb-faq details { border-bottom: var(--border); padding-block: var(--space-4); } .amb-faq details:first-child { border-top: var(--border); } .amb-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 48px; font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-h4); color: var(--amb-tinte); } .amb-faq summary::-webkit-details-marker { display: none; } .amb-faq summary::after { content: "+"; flex: 0 0 auto; font-size: 1.5em; line-height: 1; color: var(--amb-blau-600); } .amb-faq details[open] summary::after { content: "\2212"; } /* Minuszeichen */ .amb-faq__antwort { margin-top: var(--space-3); color: var(--amb-grau-600); font-size: var(--fs-body); } /* --- 7.9 .amb-anfrage, mehrstufiges Formular --------------------------------*/ .amb-anfrage { background: var(--amb-weiss); border-radius: var(--radius-lg); padding: var(--space-6); border: 1px solid var(--amb-blau-100); max-width: var(--content-narrow); margin-inline: auto; color: var(--amb-tinte); /* Die Karte ist immer hell, auch innerhalb von .amb-section--dunkel. Fokusring und Linkfarbe daher unabhaengig von der umgebenden Sektion auf die fuer hellen Grund vorgesehenen Werte zuruecksetzen, sonst erbt die Karte aqua-200 auf Weiss, ein Kontrastproblem wie D-033. */ --focus-farbe: var(--amb-aqua-700); } .amb-anfrage a:not(.amb-btn) { color: var(--amb-blau-600); } .amb-anfrage a:not(.amb-btn):hover { color: var(--amb-blau-700); } .amb-anfrage__schritte { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); list-style: none; padding: 0; } .amb-anfrage__schritte li { flex: 1; text-align: center; font-size: var(--fs-meta); font-weight: 600; color: var(--amb-grau-600); padding-bottom: var(--space-2); border-bottom: 3px solid var(--amb-grau-100); } .amb-anfrage__schritte li.is-aktiv { color: var(--amb-blau-600); border-color: var(--amb-blau-600); } .amb-anfrage fieldset { border: 0; padding: 0; margin: 0 0 var(--space-5); } .amb-anfrage legend { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-h4); margin-bottom: var(--space-3); padding: 0; } .amb-anfrage label { display: block; font-weight: 600; font-size: var(--fs-meta); margin-bottom: var(--space-2); color: var(--amb-tinte); } .amb-anfrage .amb-feld { margin-bottom: var(--space-4); } .amb-anfrage input[type="text"], .amb-anfrage input[type="tel"], .amb-anfrage input[type="email"], .amb-anfrage input[type="file"], .amb-anfrage select, .amb-anfrage textarea { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border: var(--border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--fs-body); color: var(--amb-tinte); background: var(--amb-weiss); } .amb-anfrage textarea { min-height: 120px; resize: vertical; } .amb-anfrage input:focus, .amb-anfrage select:focus, .amb-anfrage textarea:focus { border-color: var(--amb-blau-600); } .amb-anfrage .amb-checkbox-zeile { display: flex; align-items: flex-start; gap: var(--space-3); } .amb-anfrage .amb-checkbox-zeile input { min-width: 24px; min-height: 24px; margin-top: 2px; } .amb-anfrage .amb-checkbox-zeile label { font-weight: 400; margin: 0; } /* Honeypot: für Menschen unsichtbar, für Formular-Bots meist sichtbar */ .amb-anfrage .amb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .amb-anfrage__fallback { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border); font-size: var(--fs-meta); color: var(--amb-grau-600); } /* Mehrfachauswahl mit vielen Checkbox-Zeilen untereinander, etwa die Leistungsauswahl auf /angebot-anfordern/. .amb-checkbox-zeile allein traegt keinen Abstand nach unten, weil sie bisher nur einzeln neben der DSGVO- oder der Langzeitschutz-Checkbox vorkam. */ .amb-leistungsauswahl { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); } /* Zeile, die eine vorherige Checkbox praezisiert oder einschraenkt, etwa "Auch Interesse an Langzeitschutz" unter Moos- und Algenentfernung oder der Kapazitaetshinweis unter Unterhaltsreinigung. */ .amb-leistungsauswahl__note { margin-left: var(--space-6); } .amb-leistungsauswahl p.amb-leistungsauswahl__note { margin-top: calc(-1 * var(--space-1)); } /* --- 7.10 .amb-chip -----------------------------------------------------*/ .amb-chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; padding: var(--space-1) var(--space-3); border: var(--border); border-radius: var(--radius-pill); font-size: var(--fs-meta); font-weight: 600; color: var(--amb-blau-700); background: var(--amb-weiss); } .amb-section--dunkel .amb-chip { color: var(--amb-weiss); border-color: var(--amb-blau-400); } /* --- 7.11 .amb-orte -------------------------------------------------------*/ .amb-orte { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); padding: 0; margin: 0; } .amb-orte a { display: inline-flex; align-items: center; min-height: 48px; padding-inline: var(--space-4); border-radius: var(--radius-pill); background: var(--amb-blau-50); color: var(--amb-blau-700); text-decoration: none; font-weight: 600; transition: background-color var(--motion-fast) var(--motion-ease); } .amb-orte a:hover { background: var(--amb-blau-100); } /* --- 7.12 .amb-kundenleiste ------------------------------------------------- Kundenlogo-Leiste am Seitenende. Bleibt leer/inaktiv bis zur schriftlichen Freigabe jedes einzelnen Kunden (siehe FACTS.md Abschnitt 12.3). */ .amb-kundenleiste__hinweis { text-align: center; font-size: var(--fs-meta); color: var(--amb-grau-600); margin: 0 0 var(--space-5); } .amb-kundenleiste__reihe { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-6); list-style: none; padding: 0; margin: 0; } .amb-kundenleiste__logo { width: 140px; height: 56px; display: flex; align-items: center; justify-content: center; text-align: center; border: 1px dashed var(--border-color); border-radius: var(--radius-sm); font-size: var(--fs-meta); color: var(--amb-grau-600); background: var(--amb-grau-100); } /* --- 7.13 Zweispaltige Layout-Helfer für Risiko- und Bewertungspaare ----- Wiederkehrendes Muster der Seitenanatomie: zwei .amb-risiko- oder zwei .amb-bewertung-Boxen nebeneinander ab 900px, mobil gestapelt. */ .amb-risikogrid, .amb-bewertunggrid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); } /* Zwei Textspalten nebeneinander, etwa "geeignet fuer" und "nicht geeignet fuer" auf den Leistungsseiten. Eigene Klasse, damit .amb-risikogrid nicht fuer Inhalte zweckentfremdet wird, die keine .amb-risiko-Boxen sind. */ .amb-zweispalter { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; } .amb-zweispalter h3 { margin-bottom: var(--space-3); } @media (min-width: 900px) { .amb-risikogrid, .amb-bewertunggrid, .amb-zweispalter { grid-template-columns: 1fr 1fr; } } /* DESIGN-SYSTEM.md Abschnitt 7 schreibt fuer die Startseite DREI .amb-risiko-Kaesten vor. Im Zweierraster ergibt das zwei plus einen, und der einzelne Kasten haengt mit halber Leerflaeche daneben. Diese Variante stellt die drei ab 1100px nebeneinander, darunter untereinander, weil drei Spalten unter 1100px je unter 300px breit waeren und der Risikotext dort zu schmal steht. */ @media (min-width: 1100px) { .amb-risikogrid--drei { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) and (max-width: 1099.98px) { .amb-risikogrid--drei { grid-template-columns: 1fr; } } /* Kurze und lange Zitate stehen nebeneinander. Ohne diese Zeile zieht das Raster die kurze Kachel auf die Hoehe der langen und laesst sie halb leer. */ .amb-bewertunggrid { align-items: start; } /* --- 7.14 Kopfbereich, klebend, Design-System Abschnitt 7 Punkt 1 ---------*/ .amb-kopf { position: sticky; top: 0; z-index: 50; background: var(--amb-weiss); border-bottom: var(--border); } .amb-kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); flex-wrap: wrap; } /* Das Logo liegt seit 16.09.2026 als Vektordatei vor, siehe FACTS.md 14.7. Die Wortmarke wird nicht mehr in Archivo nachgesetzt, sondern als Bild ausgeliefert. Die Logoschrift laesst sich mit keiner der beiden Websiteschriften nachbauen, deshalb Bild statt Satz. */ .amb-logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 1; } .amb-logo img { display: block; width: auto; height: 48px; /* Querfassung 4,2 zu 1, ergibt rund 202px Breite */ } @media (max-width: 899.98px) { .amb-logo img { height: 42px; } } @media (max-width: 599.98px) { .amb-logo img { height: 36px; } } /* Footer: Negativfassung als Bild. Bis Version 1.2 stand hier eine gesetzte Textmarke, weil die gelieferte Logodatei eine dunkelblaue Wortmarke (#2056AE) hat, die auf dem Footergrund (--amb-blau-900) nur rund 1,9 zu 1 erreicht. Die Negativfassung existiert seit 17.09.2026, siehe D-042. */ .amb-logo--fuss { display: block; width: auto; height: 44px; margin-bottom: var(--space-4); } @media (max-width: 599.98px) { .amb-logo--fuss { height: 38px; } } .amb-hauptnav { display: flex; gap: var(--space-5); flex-wrap: wrap; } .amb-hauptnav a { color: var(--amb-tinte); text-decoration: none; font-weight: 600; font-size: var(--fs-meta); min-height: 48px; display: inline-flex; align-items: center; } .amb-hauptnav a:hover { color: var(--amb-blau-600); } .amb-kopf__tel { display: none; font-weight: 700; color: var(--amb-blau-600); text-decoration: none; } @media (min-width: 1200px) { /* Telefonnummer im Kopf erst ab 1200px. Bis 1.6 stand hier 1024px. Bei 1024px ergaben Logo, fuenf Navigationspunkte, Telefonnummer und Angebot-Knopf zusammen mehr als die verfuegbare Zeile, die Zeile brach um und der klebende Kopf war 145px hoch. Die Nummer steht ohnehin im aufgeklappten Menue und im Footer. */ .amb-kopf__tel { display: inline-flex; align-items: center; min-height: 48px; } } /* Kopfbereich unter 900px. Bis 1.6 stand hier eine umbrechende Navigationszeile. Auf 390px ergab das zwei Zeilen und einen rund 130px hohen klebenden Kopf, der bei jedem Scrollen ein Sechstel des Bildschirms verdeckte, ohne dass eine der fünf Beschriftungen dadurch besser lesbar geworden wäre. Seit 1.7 gilt: Zeile 1 trägt Logo und Menütaste, mehr nicht. Der Kopf ist damit rund 58px hoch. Die Navigation liegt in einem Panel, das die Taste aufklappt. Der Angebot-Button entfällt hier, weil die klebende Leiste am unteren Rand (Abschnitt 9) ihn bereits führt und dort näher am Daumen liegt. */ /* Standardzustand: ab 900px gibt es keine Menuetaste, dort traegt die Hauptnavigation den Kopf. Diese Zeile steht bewusst VOR der Medienabfrage, sonst schlaegt sie die Regel darin per Quellenreihenfolge. */ .amb-menue { display: none; position: static; } @media (max-width: 1023.98px) { .amb-kopf__innen { flex-wrap: nowrap; gap: var(--space-3); padding-block: var(--space-2); } .amb-kopf__cta { display: none; } .amb-hauptnav { display: none; } .amb-menue { display: block; margin-left: auto; } } /* --- 7.14c Menütaste und Menüpanel, nur unter 900px ----------------------- Umsetzung mit details und summary. Kein JavaScript, kein aria-expanded von Hand: der Browser führt den Zustand selbst und meldet ihn der Vorlesesoftware. Das Panel liegt absolut, Bezugspunkt ist .amb-kopf, weil sticky ein positioniertes Element ist und damit den Bezugsrahmen aufspannt. Dadurch läuft das Panel über die volle Breite, nicht nur über die Containerbreite. Die Sichtbarkeit von .amb-menue selbst ist oben geregelt. */ .amb-menue__taste { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; /* Mindestgroesse fuer Beruehrungsziele, QA-Checkliste */ padding: 0 var(--space-3); border: var(--border); border-radius: 8px; background: var(--amb-weiss); color: var(--amb-blau-600); font-family: var(--font-text); font-size: var(--fs-meta); font-weight: 700; line-height: 1; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } /* Das Dreieck des summary-Elements muss in beiden Schreibweisen weg. */ .amb-menue__taste::-webkit-details-marker { display: none; } .amb-menue__taste { list-style: none; } .amb-menue__taste::marker { content: ""; } /* Drei Striche aus einem Element und seinen beiden Pseudoelementen. */ .amb-menue__strich { position: relative; display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: background-color .12s linear; } .amb-menue__strich::before, .amb-menue__strich::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .12s ease, top .12s ease; } .amb-menue__strich::before { top: -6px; } .amb-menue__strich::after { top: 6px; } /* Offen: aus den drei Strichen wird ein Kreuz. */ .amb-menue[open] .amb-menue__strich { background: transparent; } .amb-menue[open] .amb-menue__strich::before { top: 0; transform: rotate(45deg); } .amb-menue[open] .amb-menue__strich::after { top: 0; transform: rotate(-45deg); } .amb-menue[open] .amb-menue__taste { border-color: var(--amb-blau-600); } .amb-menue__panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; background: var(--amb-weiss); border-top: var(--border); border-bottom: var(--border); box-shadow: 0 10px 24px rgba(20, 22, 28, .10); padding: var(--space-1) var(--container-pad) var(--space-4); max-height: calc(100dvh - 58px); overflow-y: auto; overscroll-behavior: contain; } .amb-menue__panel nav { display: flex; flex-direction: column; } .amb-menue__panel nav a { display: flex; align-items: center; min-height: 52px; color: var(--amb-tinte); text-decoration: none; font-weight: 600; font-size: 1.0625rem; border-bottom: var(--border); } .amb-menue__panel nav a[aria-current="page"] { color: var(--amb-blau-600); } .amb-menue__tel { display: flex; align-items: center; min-height: 52px; margin-top: var(--space-2); color: var(--amb-blau-600); font-weight: 700; font-size: 1.0625rem; text-decoration: none; } /* --- 7.14b Statische Karte, Kontaktseite --------------------------------- Rasterbild aus OpenStreetMap-Kacheln, selbst gehostet. Kein iframe, kein Kartenskript, siehe DECISIONS.md D-013. Die Quellenangabe ist nach ODbL verpflichtend und steht deshalb als figcaption sichtbar unter dem Bild, nicht nur im Bild eingebrannt. */ .amb-karte { margin: var(--space-5) 0 0; } .amb-karte img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--amb-grau-300); } .amb-karte figcaption { font-size: var(--fs-meta); color: var(--amb-grau-600); margin-top: var(--space-2); } /* Astras Knopf "Nach oben scrollen". Sein Markup entsteht im Footer, seine Stile werden auf dieser Vorlage nicht geladen, deshalb stand er als weisser Balken ueber die volle Breite unter dem Footer. Abgeschaltet wird er in functions.php, das hier ist das Netz. Siehe D-045. */ #ast-scroll-top, .ast-scroll-top-icon { display: none !important; } /* --- 7.9b Honigtopf und Formularfehler ------------------------------------ Der Honigtopf ersetzt reCAPTCHA, harte Regel 9. Er wird bewusst NICHT mit display:none versteckt, das erkennen viele Bots. Stattdessen aus dem sichtbaren Bereich geschoben, mit aria-hidden und tabindex -1 im Markup, damit Screenreader und Tastatur ihn nicht erreichen. */ .amb-hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Serverseitige Fehlermeldung ueber dem Formular. Deutscher Klartext, kein Fehlercode, siehe TECHNICAL.md Abschnitt 5. */ .amb-formfehler { margin: 0 0 var(--space-5); padding: var(--space-4); border-radius: var(--radius-sm); border-left: 4px solid var(--amb-warn); background: #FDF3EC; color: var(--amb-tinte); font-size: var(--fs-body); } /* --- 7.15 Personalsuche-Banner, Unterhaltsreinigung -----------------------*/ .amb-jobbanner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); background: var(--amb-blau-50); border-radius: var(--radius-lg); padding: var(--space-6); } .amb-jobbanner h2 { margin-bottom: var(--space-2); } .amb-jobbanner p { margin: 0; max-width: 60ch; } /* --- 7.16 Footer, Design-System Abschnitt 7 Punkt 11 ---------------------- Drei Spalten ab 900px (Firma/Adresse, Kontakt, Rechtliches). Die Öffnungszeiten stehen bewusst NICHT in der Kontaktspalte, sondern als eigene, klar abgesetzte Zeile darunter, damit Telefon, E-Mail und Öffnungszeiten sich nicht gegenseitig optisch verdrängen. */ .amb-fuss { background: var(--amb-blau-900); color: var(--amb-blau-100); padding-block: var(--space-8); } .amb-fuss h3 { color: var(--amb-weiss); font-size: var(--fs-h4); margin: 0 0 var(--space-3); } /* Die Linkfarbe gilt fuer Textlinks, nicht fuer Buttons. Ohne :not(.amb-btn) erbt ein .amb-btn--ghost im Footer helles Aqua auf weissem Grund, das sind rund 1,9 zu 1 und damit unter jeder Schwelle aus DESIGN-SYSTEM.md Abschnitt 2. Der Ghost-Button im Footer wird deshalb wie in einer dunklen Sektion ausgefuehrt: transparent, weisser Rahmen, weisse Schrift. */ .amb-fuss a:not(.amb-btn) { color: var(--amb-aqua-200); } .amb-fuss a:not(.amb-btn):hover { color: var(--amb-aqua-100); } .amb-fuss .amb-btn--ghost { background: transparent; border-color: var(--amb-weiss); color: var(--amb-weiss); } .amb-fuss .amb-btn--ghost:hover { background: rgba(255,255,255,.12); color: var(--amb-weiss); } .amb-fuss p { margin: 0 0 var(--space-2); } .amb-fuss__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 900px) { .amb-fuss__grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--space-8); } } /* Seit 1.3 ein Bild, siehe Abschnitt 7.x. Hier steht nur noch der Abstand. Die frueheren Schriftangaben sind entfallen, sie liefen ins Leere. */ .amb-logo--fuss { margin: 0 0 var(--space-4); } .amb-logo--fuss span { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-meta); color: var(--amb-blau-400); } /* Eigene, abgesetzte Öffnungszeiten-Zeile unterhalb der drei Spalten */ .amb-fuss__zeiten { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.16); } .amb-fuss__zeiten h3 { margin-bottom: var(--space-2); } .amb-fuss__fussnote { font-size: var(--fs-meta); color: var(--amb-blau-400); margin: var(--space-1) 0 0; } .amb-fuss__rechtszeile { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.16); font-size: var(--fs-meta); color: var(--amb-blau-400); } /* ========================================================================== 8. MOBIL-BÄNDER UNTER 600px — Design-System Regel 9 ========================================================================== Alle Kastenkomponenten werden randlose Bänder über die volle Breite, seitlicher Innenabstand 16px, keine Seitenrahmen. Ausnahme: .amb-risiko behält Einzug (margin-inline) und linken Akzentbalken — daher hier ausdrücklich NICHT in der Liste. ========================================================================== */ @media (max-width: 599.98px) { .amb-leistung-card, .amb-bewertung, .amb-anfrage { border-radius: 0; border-left: 0; border-right: 0; margin-inline: calc(var(--container-pad) * -1); padding-inline: var(--container-pad); box-shadow: none; } .amb-vn-frame { border-radius: 0; } .amb-vorher-nachher { margin-inline: calc(var(--container-pad) * -1); } } /* ========================================================================== 9. STICKY-CTA UNTER 1024px — Design-System Regel 8 ========================================================================== 1.7: Grenze von 900px auf 1024px angehoben, gleichlaufend mit der Menuetaste in Abschnitt 7.14c. Sonst faellt zwischen 900px und 1023px der Angebot-Knopf aus dem Kopf heraus, ohne dass die Leiste unten ihn uebernimmt, und auf einem Tablet steht dann gar kein Handlungsziel mehr. */ .amb-stickycta { display: none; } @media (max-width: 1023.98px) { .amb-stickycta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; background: var(--amb-weiss); /* Kein border-top: die Trennung kommt vom box-shadow, damit die Gesamthöhe exakt aus Padding und Button-Höhe berechenbar bleibt (8px + 48px + 8px = 64px = --stickycta-height, siehe unten). */ box-shadow: 0 -4px 12px rgba(20,22,28,.08); /* 1.7: KEIN env(safe-area-inset-bottom) mehr. Mit viewport-fit=cover gab Android Chrome hier den Streifen der Gestennavigation zurück, aber erst dann, wenn die Adressleiste beim Scrollen einklappte. Die Leiste wuchs mitten im Scrollen um rund 48px weißen Rand, die Knöpfe rutschten nach oben. viewport-fit=cover ist deshalb aus page-amb.php entfernt, und die Rechnung 8 + 48 + 8 = 64px = --stickycta-height gilt wieder unverändert. */ padding: var(--space-2); } .amb-stickycta .amb-btn { flex: 1 1 0; width: auto; min-height: 48px; /* Touch-Ziel-Minimum, kleiner als der 56px-Standardbutton, damit die Leiste exakt --stickycta-height hoch bleibt */ margin-inline: var(--space-1); } /* Platz am Seitenende, damit die fixierte Leiste nichts verdeckt. Zielt bewusst auf body, weil WordPress/Astra Header, main und Footer direkt als Geschwister unter body ausgibt. Rechnung: Leistenhöhe ist var(--space-2) + 48px Button + var(--space-2) = 8+48+8 = 64px, exakt --stickycta-height. Dazu kommt auf Geräten mit Home-Indicator der sichere Bereich unten. */ body.amb-hat-stickycta { padding-bottom: var(--stickycta-height); } /* Zweite Absicherung, unabhängig von der Body-Klasse. Die Klasse kommt vom Child Theme. Fehlt sie aus irgendeinem Grund, etwa weil eine Seite auf einer anderen Vorlage liegt, verdeckt die Leiste sonst die letzte Zeile des Footers. Der Footer ist immer das letzte Element unserer Markup- Strecke, deshalb trägt er den Platz mit. */ .amb-fuss { padding-bottom: var(--stickycta-height); } body.amb-hat-stickycta .amb-fuss { padding-bottom: 0; } } /* ========================================================================== 10. BARRIEREFREIHEIT — Design-System Abschnitt 10 ========================================================================== */ a, button, .amb-btn, input, select, textarea, summary, [tabindex] { outline-offset: var(--focus-offset); } :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); } /* Auf dunklem Grund waere aqua-700 zu dunkel, dort uebernimmt die hellere Blasenfarbe aus dem Logo. */ .amb-section--dunkel, .amb-fuss, .amb-hero, .amb-stickycta { --focus-farbe: var(--amb-aqua-200); } /* Touch-Ziele mindestens 48x48px, DESIGN-SYSTEM.md Abschnitt 10. ACHTUNG, hier stand bis zum 16.09.2026 abends ein Kaskadenunfall, und er ist der Grund, warum diese Regel jetzt so aussieht: Eine pauschale Sammelregel mit min-height:48px stand hier unbedingt und NACH den Komponentendefinitionen. Bei gleicher Spezifitaet gewinnt die spaetere Regel, also hat sie drei Werte ueberschrieben, die weiter oben absichtlich anders gesetzt sind: .amb-btn wurde von 56px auf 48px geschrumpft, .amb-chip von 32px auf 48px aufgeblaeht, obwohl ein Chip ein

ist und gar kein Bedienelement, .amb-anfrage textarea von 120px auf 48px gedrueckt, das Freitextfeld war dadurch einzeilig statt mehrzeilig. Die Regel war ausserdem ueberfluessig: Jede der genannten Komponenten setzt ihre Mindesthoehe bereits selbst, und zwar richtig. Sie ist deshalb ersatzlos entfallen. Was bleibt, ist ein Sicherheitsnetz fuer Bedienelemente, die spaeter dazukommen und keine eigene Hoehe mitbringen. Es greift nur dort, wo noch keine Mindesthoehe gesetzt ist, weil es VOR den Komponenten steht wuerde, nicht dahinter. Deshalb steht es hier bewusst mit :where(), das die Spezifitaet auf null senkt: Jede Komponentenregel gewinnt dagegen, egal wo sie in der Datei steht. */ :where(button, [role="button"], input[type="submit"], input[type="button"]) { min-height: 48px; } @media (prefers-reduced-motion: reduce) { /* Kein !important nötig: die Komponenten oben binden ihre transition- duration an --motion-fast, dessen Neudefinition hier gewinnt, weil sie an gleicher Spezifität später in der Kaskade steht. */ :root { --motion-fast: 0ms; } html { scroll-behavior: auto; } .amb-leistung-card:hover, .amb-btn:active { transform: none; } * { animation: none; } } /* ========================================================================== 11. DRUCKSTIL ========================================================================== */ @media print { /* Kein !important hier: die einzige erlaubte Ausnahme in dieser Datei ist der Astra-Reset ganz oben (Abschnitt 0). Normale Kaskade reicht im Druckkontext aus, weil hier keine gegenläufige, gleich oder höher spezifische Regel existiert. .amb-stickycta ist ohnehin fixed positioniert und ausgeblendet zu drucken verhindert Artefakte. */ .amb-stickycta, .amb-hero__cta, .amb-btn, header nav, .amb-anfrage, .amb-vn-regler { display: none; } body { color: #000; background: #fff; } a { color: #000; text-decoration: underline; } .amb-section--dunkel { background: #fff; color: #000; } /* Kontaktdaten im Footer bleiben sichtbar, siehe DESIGN-SYSTEM.md Abschnitt Druckstil-Anforderung — keine display:none-Regel erfasst footer address. */ footer address, .amb-kontakt-druck { display: block; } } /* ========================================================================== Ende global.css — Version 1.1, Stand 2026-09-16 ========================================================================== */ /* ========================================================================== 12. MOBILE FEINABSTIMMUNG, ab 1.6 ========================================================================== Steht bewusst als LETZTER Abschnitt der Datei. Die Werte hier sind reine Ueberschreibungen der Komponentenwerte aus Abschnitt 7, die fuer 1440px gewaehlt wurden. Am Dateiende gewinnen sie ohne erhoehte Spezifitaet. Gemessen auf 390px an der Live-Fassung: Der Hero brauchte 692px, also fast einen ganzen Bildschirm, bevor ein Wort Inhalt kam. Die H1 brach vierzeilig mit "und" als eigener Zeile. Die Hauptnavigation scrollte und schnitt den letzten Punkt mitten im Wort ab. ========================================================================== */ @media (max-width: 699.98px) { /* 1.9: 20px statt 16px. 24px waren auf 390px zu viel, 16px sind mit den Inselkarten aus 1.8 zu wenig, die Karte sitzt dann auf der Kante. Wonderland faehrt 24px, hat dort aber keine gefuellten Karten. */ .amb-container { --container-pad: 20px; } /* Die Navigationsregeln von 1.6 stehen hier nicht mehr. Seit 1.7 ist die Hauptnavigation unter 900px ausgeblendet und wird von der Menütaste geführt, siehe Abschnitt 7.14c. */ /* 1.9: neu gestuft. Bis 1.8 standen hier 28px H1 und 24px H2 gegen 17px Fliesstext, also 1,65 und 1,41 zu 1. Das ist zu wenig Unterschied: der Leser sieht keine Gliederung, sondern eine Textwand mit fetten Stellen. Jetzt 32px und 28px, also 1,88 und 1,65 zu 1. Zum Vergleich gemessen: wonderlandkohtao.com faehrt bei 390px H2 zu Fliesstext 1,88 zu 1. text-wrap: balance verteilt die Zeilen, damit kein Wort allein steht. */ h1, .amb-hero h1 { font-size: 2rem; line-height: 1.06; text-wrap: balance; } h2 { font-size: 1.75rem; line-height: 1.12; text-wrap: balance; } h3 { font-size: 1.25rem; line-height: 1.2; } /* Lead auf 18px, also EINE Stufe ueber dem Fliesstext. Bis 1.8 lag er mit 17px auf gleicher Hoehe, damit war das Versprechen im Hero typografisch nicht vom Rest zu unterscheiden. */ .amb-lead, .amb-hero .amb-lead { font-size: 1.125rem; line-height: 1.5; } /* Fliesstext bleibt bei 17px, Regel 6 des Design-Systems. Der Zeilenabstand geht von 1,65 auf 1,58: bei 17px auf 350px Breite passen rund 45 Zeichen in eine Zeile, und ein so kurzes Mass braucht weniger Durchschuss. */ p, li { line-height: 1.58; } /* Der Kartentext ist eine Zusammenfassung, kein Lesetext. Er darf eine Stufe unter dem Fliesstext liegen. Das nimmt jeder der acht Karten zwei bis drei Zeilen und ist der eigentliche Grund, warum die Startseite auf dem Telefon nach zu viel Text aussah. */ .amb-leistung-card__text { font-size: 1rem; line-height: 1.5; } /* Kartentitel eine Stufe hoch, sonst steht er mit 18px zu dicht am 16px Kartentext und die Karte hat keine Kopfzeile mehr. */ .amb-leistung-card__titel { font-size: 1.1875rem; line-height: 1.2; letter-spacing: -0.01em; } /* Hero kompakter. 1.9: oben 40px statt 48px, weil die H1 mit 32px schon mehr Gewicht traegt und der Abstand zum Kopf sonst doppelt wirkt. */ .amb-hero__inner { padding-block: 40px var(--space-7); min-height: 0; } /* Der Fotohinweis ist eine Notiz an uns. Auf dem Telefon nahm er drei Zeilen und lief hinter die klebende Leiste. Dort gehoert er nicht hin. */ .amb-hero__bildtext { display: none; } /* Die beiden Hero-Knoepfe direkt untereinander. */ .amb-hero .amb-btn + .amb-btn { margin-top: var(--space-3); } /* Karten enger. Acht davon untereinander ergaben rund 2000px. */ .amb-leistung-card { padding: var(--space-4); gap: var(--space-2); } /* Sektionsluft von 48px auf 40px. */ .amb-section > .amb-container { padding-block: 40px; } /* Vertrauenszeile kompakter, sie brauchte zwei Zeilen und 94px. */ /* 1.7: Vertrauenszeile als 2 mal 2 statt 3 plus 1. Als umbrechende Reihe stand "Vorarlberg" allein und mittig in einer zweiten Zeile, was wie ein Umbruchfehler aussieht statt wie eine Aufzaehlung. */ .amb-trustbar__liste { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); padding-block: var(--space-3); } .amb-trustbar__liste li { font-size: 0.9375rem; justify-content: center; } } /* ========================================================================== 13. INSELKARTEN, ab 1.8 ========================================================================== Steht als LETZTER Abschnitt der Datei und ueberschreibt bewusst Werte aus Abschnitt 7. Grund fuer die Aenderung, mit dem Auftraggeber abgeglichen an wonderlandkohtao.com: eine weisse Karte mit Haarlinie auf weissem Grund ist auf dem Telefon keine Karte. Sie hat die volle Breite, also sieht der Leser von der Karte nur die obere und die untere Linie, und das liest sich als Trennstrich in einer Liste, nicht als eigenstaendiger Block. Das Prinzip: jede Karte traegt eine eigene Flaeche, die sich vom Grund unterscheidet. Welche Flaeche, entscheidet der Grund, auf dem sie liegt. Deshalb setzt die Sektion die Werte, und die Komponenten lesen sie nur. Wer spaeter eine neue Kartenkomponente baut, nimmt dieselben drei Variablen und muss nicht wissen, auf welchem Grund sie landet. Kein Pastellblau als Fuellung auf getoentem Grund, siehe D-046. Auf getoentem Grund ist die Karte weiss, und die Trennung kommt vom Schatten, nicht von einer zweiten Blaustufe. ========================================================================== */ .amb-section { --insel-fuell: var(--amb-blau-50); --insel-linie: #E3EBF8; --insel-schatten: none; } .amb-section--stein { --insel-fuell: var(--amb-weiss); --insel-linie: #E3EBF8; --insel-schatten: 0 4px 18px rgba(11, 35, 80, .06); } /* Auf dunklem Grund gibt es keine Inselkarten, dort traegt die Sektion selbst die Flaeche. Die Variablen stehen trotzdem, damit eine versehentlich dort platzierte Karte nicht blau auf blau verschwindet. */ .amb-section--dunkel { --insel-fuell: rgba(255, 255, 255, .06); --insel-linie: rgba(255, 255, 255, .14); --insel-schatten: none; } :root { --radius-insel: 14px; } /* --- 13.1 Leistungskarte -------------------------------------------------*/ .amb-leistung-card { background: var(--insel-fuell); border: 1px solid var(--insel-linie); border-radius: var(--radius-insel); box-shadow: var(--insel-schatten); padding: var(--space-5); gap: var(--space-3); transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); } .amb-leistung-card:hover { border-color: var(--amb-blau-400); box-shadow: 0 8px 24px rgba(11, 35, 80, .10); transform: translateY(-2px); } /* Das Symbol stand als blau-100 auf weiss. Auf der getoenten Karte war der Unterschied zur Kartenflaeche zu klein, der Kreis verschwand halb. */ .amb-leistung-card__icon { background: var(--amb-blau-100); } .amb-section--hell .amb-leistung-card__icon { background: var(--amb-weiss); } .amb-leistungen { gap: var(--space-5); } /* Die Zeile "Weitere Leistungen auf Anfrage" klebte am unteren Rand der letzten Kartenreihe. Sie gehoert zur Liste, aber nicht in sie. */ .amb-leistungen + .amb-meta { margin-top: var(--space-5); } /* --- 13.2 FAQ als Inseln statt als Liste mit Trennstrichen ----------------*/ .amb-faq { display: flex; flex-direction: column; gap: var(--space-3); } .amb-faq details { background: var(--insel-fuell); border: 1px solid var(--insel-linie); border-bottom: 1px solid var(--insel-linie); border-radius: var(--radius-insel); box-shadow: var(--insel-schatten); padding: var(--space-3) var(--space-5); } .amb-faq details:first-child { border-top: 1px solid var(--insel-linie); } .amb-faq__antwort { margin-top: var(--space-2); padding-bottom: var(--space-3); } /* --- 13.3 Risikokasten --------------------------------------------------- Der Kasten war bis 1.7 fest blau-50. Auf .amb-section--stein, wo er auf 18 von 20 Seiten steht, ist der Grund ebenfalls blau-50. Der Kasten war dort also unsichtbar, und die Komponente, die den Unterschied zum Mitbewerber traegt, sah aus wie gewoehnlicher Fliesstext. */ .amb-risiko { background: var(--insel-fuell); border: 1px solid var(--insel-linie); border-radius: var(--radius-insel); box-shadow: var(--insel-schatten); overflow: hidden; } .amb-risiko::before { border-radius: 0; } /* --- 13.4 Bewertungskarte ------------------------------------------------*/ .amb-bewertung { background: var(--insel-fuell); border: 1px solid var(--insel-linie); border-left: 3px solid var(--amb-blau-600); border-radius: var(--radius-insel); box-shadow: var(--insel-schatten); } /* --- 13.5 Vertrauenszeile als Insel -------------------------------------- Bis 1.7 eine randlose Bandflaeche ueber die volle Breite. Auf dem Telefon stiess sie oben an den Hero und unten an die naechste Sektion, zwei harte waagrechte Kanten dicht untereinander. Neu: weisser Grund, die vier Punkte liegen auf einer gerundeten Insel. */ .amb-trustbar { background: var(--amb-weiss); } .amb-trustbar > .amb-container { padding-block: var(--space-5); } .amb-trustbar + .amb-section > .amb-container { padding-top: var(--space-6); } /* --- 13.6 Zweispalter, Untergruende --------------------------------------- "Wir reinigen" und "Gehoert nicht dazu" standen als zwei nackte Listen untereinander. Auf dem Telefon war nicht zu sehen, wo die eine aufhoert. */ .amb-zweispalter > div { background: var(--insel-fuell); border: 1px solid var(--insel-linie); border-radius: var(--radius-insel); box-shadow: var(--insel-schatten); padding: var(--space-5); } /* --- 13.7 Mehr Luft auf dem Telefon -------------------------------------- Abschnitt 12 hatte das Kartenpolster auf 16px gedrueckt, um die Seite zu verkuerzen. Das war die falsche Stellschraube: kuerzer wurde sie kaum, enger deutlich. */ @media (max-width: 899.98px) { /* Symbol und Titel in EINE Zeile. Gestapelt braucht jede Karte rund 490px, also fast einen ganzen Telefonbildschirm pro Leistung, und acht Karten ergeben 3900px Scrollweg fuer acht Zeilen Text. Nebeneinander spart rund 70px je Karte und liest sich als Kopfzeile statt als Aufzaehlung. Das Markup bleibt unveraendert, die Reihenfolge macht das Raster. Ab 900px bleibt die gestapelte Fassung, dort ist die Karte zu schmal fuer Symbol und Ueberschrift nebeneinander. */ .amb-leistung-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; column-gap: var(--space-3); row-gap: var(--space-2); align-items: center; } .amb-leistung-card__icon { grid-column: 1; grid-row: 1; width: 40px; height: 40px; } .amb-leistung-card__icon svg { width: 22px; height: 22px; } .amb-leistung-card__titel { grid-column: 2; grid-row: 1; } .amb-leistung-card__text { grid-column: 1 / -1; grid-row: 2; } .amb-leistung-card__link { grid-column: 1 / -1; grid-row: 3; align-self: end; margin-top: var(--space-1); } } @media (max-width: 699.98px) { .amb-leistung-card { padding: 22px; } .amb-leistungen { gap: var(--space-4); } .amb-faq details { padding: var(--space-2) var(--space-4); } .amb-risiko { margin-inline: 0; padding: var(--space-4); padding-left: calc(var(--space-4) + var(--space-2)); } .amb-bewertung { padding: var(--space-4); } .amb-zweispalter > div { padding: var(--space-4); } .amb-section > .amb-container { padding-block: var(--space-7); } .amb-trustbar > .amb-container { padding-block: var(--space-4); } /* 1.9: engeres Polster und 14px. Mit dem 20px-Seitenrand blieben je Spalte nur noch rund 151px, und "4,9 von 5 auf Google" brach um. Die Vertrauenszeile ist Beiwerk, 14px sind hier richtig. */ .amb-trustbar__liste { padding: var(--space-3); } .amb-trustbar__liste li { font-size: 0.875rem; } } /* ========================================================================== 14. DISPLAYSCHNITT, ABSCHNITTSRHYTHMUS, VERTRAUENSZEILE, FORMULARSPALTE ab 2.0 ========================================================================== Letzter Abschnitt der Datei, ueberschreibt bewusst Werte aus 4, 7, 12, 13. ========================================================================== */ /* --- 14.1 Displayschnitt auf Ueberschriften, D-053 ----------------------- Gewicht gestaffelt: 900 nur dort, wo die Zeile traegt. Ab 20px abwaerts wird 900 auf Breite 80 zu dicht, dort 800. */ h1, h2 { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.005em; /* Breite 80 braucht WENIGER negative Laufweite als Breite 100, die Buchstaben stehen schon enger. Der Wert aus 1.9 waere hier zu viel. */ } h3, h4, .amb-leistung-card__titel { font-family: var(--font-display); font-weight: 800; letter-spacing: 0; } /* Nicht auf den Displayschnitt: alles, was bedient wird. */ .amb-btn, .amb-faq summary, .amb-menue__taste, .amb-verfahren li::before, .amb-anfrage legend { font-family: var(--font-heading); } /* --- 14.2 Abstand zwischen Abschnittskopf und Inhalt --------------------- Gemessen auf 1440px: zwischen "So laeuft ein Auftrag ab" und der ersten Schrittnummer lagen 16px. Das ist der Absatzabstand einer h2, nicht der Abstand eines Abschnittskopfes zu seinem Inhalt. Der Kopf klebte am Inhalt, waehrend die Sektion oben und unten 96px Luft hatte. Greift nur bei Ueberschriften, die DIREKT im Container oder im schmalen Textblock stehen, also bei Abschnittskoepfen. Ueberschriften in Karten behalten ihren engen Abstand. */ .amb-section > .amb-container > h2, .amb-section > .amb-container > .amb-content-narrow > h2 { margin-bottom: var(--space-6); } @media (min-width: 900px) { .amb-section > .amb-container > h2, .amb-section > .amb-container > .amb-content-narrow > h2 { margin-bottom: 44px; } } /* Die Augenbraue gehoert zur Ueberschrift, nicht zum Abstand darueber. */ .amb-eyebrow + h2 { margin-top: var(--space-1); } /* --- 14.3 Vertrauenszeile als Merkmalsplaketten ------------------------- Dritter Anlauf, und diesmal aus dem richtigen Grund. Fassung 1 (bis 1.7) war eine randlose Bandflaeche, vier Textstuecke mittig. Fassung 2 (1.8) machte daraus eine getoente Insel, Fassung 3 (2.0) vier Spalten mit Haarlinien. Alle drei teilen denselben Fehler: sie behandeln vier eigenstaendige Angaben wie EINEN Satz. Sobald die Zeile umbricht, bricht sie MITTEN in einer Angabe, und "4,9 von 5 auf" ueber "Google" liest sich als Fehler. Fassung 4 macht jede Angabe zu einem eigenen Objekt: eine Plakette mit eigener Flaeche, eigenem Rand und white-space: nowrap. Damit kann eine Angabe nicht mehr in sich umbrechen, nur die ZEILE kann umbrechen, und dann ganze Plaketten in die naechste Reihe schieben. Das ist dasselbe Verhalten, das Google fuer seine Chips als Vorgabe setzt (ChipListLayout WRAPPED) und das unsere eigene Komponente .amb-chip aus Abschnitt 7.10 schon traegt. Hier wird also nichts erfunden, sondern die vorhandene Formsprache angewandt. Auf 390px ergibt das zwei saubere Reihen: "Meisterbetrieb" plus "seit 2003", darunter die Bewertung plus das Gebiet. */ .amb-trustbar__liste { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2); max-width: none; margin: 0; padding: 0; background: none; border: 0; list-style: none; } .amb-trustbar__liste li { position: static; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 38px; padding: var(--space-2) var(--space-4); border: 1px solid var(--amb-blau-100); border-radius: var(--radius-pill); background: var(--amb-blau-50); font-size: var(--fs-meta); font-weight: 600; color: var(--amb-blau-700); /* Der Kern der Sache: eine Angabe bricht nicht in sich um. */ white-space: nowrap; } /* Keine Trennlinien mehr. Die Plakette IST die Trennung. */ .amb-trustbar__liste li::after { content: none; } /* Der Stern steht vor der Bewertung und kann jetzt auch auf dem Telefon bleiben: die Plakette wird dadurch breiter statt die Zeile umzubrechen. */ .amb-trustbar__liste li:nth-child(3)::before { content: "\2605"; color: var(--amb-aqua-700); font-size: 1.05em; line-height: 1; } @media (max-width: 699.98px) { .amb-trustbar > .amb-container { padding-block: var(--space-4); } .amb-trustbar__liste { gap: var(--space-2); } .amb-trustbar__liste li { min-height: 34px; padding: 6px var(--space-3); font-size: 0.875rem; } } /* Zwei Metazeilen hintereinander brauchen Luft, sonst lesen sie sich als ein Absatz mit einem Umbruch. */ .amb-meta + .amb-meta { margin-top: var(--space-3); } /* --- 14.4 Formularsektion, Kopf und Formular in derselben Spalte --------- Gemessen auf 1440px: die Ueberschrift sass bei x=152 ueber die volle Containerbreite, das Formular bei x=360 mit 720px Breite. 208px Versatz. Das las sich als Fehler, weil es einer war. */ #anfrage > .amb-container > .amb-eyebrow, #anfrage > .amb-container > h2, #anfrage > .amb-container > p { max-width: 720px; margin-inline: auto; } /* --- 14.5 Bilder in Karten laufen bis an die Kante ----------------------- Greift, sobald echte Fotos vorliegen. Bis dahin ohne Wirkung, steht aber schon hier, damit es beim Einsetzen der Bilder nicht gesucht werden muss. Das Bild sitzt buendig an der Kartenkante, der Radius schneidet es. Ein Foto mit 24px Rand ringsum sieht aus wie ein eingeklebtes Dokument. */ .amb-leistung-card > img:first-child, .amb-leistung-card__bild { display: block; width: calc(100% + 2 * var(--space-5)); margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0; border-radius: calc(var(--radius-insel) - 1px) calc(var(--radius-insel) - 1px) 0 0; object-fit: cover; aspect-ratio: 16 / 10; } @media (max-width: 699.98px) { .amb-leistung-card > img:first-child, .amb-leistung-card__bild { width: calc(100% + 44px); margin: -22px -22px 0; } } /* --- 14.6 Heldenbild mit Foto ------------------------------------------- Das Muster aus Abschnitt 7.1 ist der Zustand OHNE Foto. Traegt das Element die Klasse --foto und die Variable --hero-foto, liegt darunter das Bild und darueber eine Abdeckung. Die Abdeckung ist nicht Dekoration, sie ist Pflicht: die Hero-Schrift ist weiss, und ein Foto ohne Abdeckung liefert an keiner Stelle einen verlaesslichen Kontrast. Der Verlauf ist oben und unten dichter, weil dort Augenbraue und Knoepfe stehen. Das Element ist aria-hidden und rein dekorativ. Es behauptet nichts. Ein Foto, das eine ausgefuehrte Arbeit von AMB zeigen soll, gehoert NICHT hierher, sondern in .amb-vorher-nachher mit echtem Objekt. */ .amb-hero__bild--foto { background-image: linear-gradient(180deg, rgba(11, 35, 80, .86) 0%, rgba(11, 35, 80, .74) 45%, rgba(11, 35, 80, .90) 100%), var(--hero-foto); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; } /* --- 14.7 Vorher und nachher mit ECHTEN Fotos ---------------------------- Der Grundzustand aus 7.4 arbeitet mit min-height, weil die Platzhalter Farbflaechen sind und keine Proportion haben. Ein echtes Foto hat eine, und cover schneidet bei 340px Hoehe auf 1300px Breite zwei Drittel des Bildes weg. Mit dieser Zusatzklasse behaelt jede Zelle 4 zu 3 und die Figur bekommt eine Hoechstbreite, sonst wird sie auf dem Desktop ueberlebensgross. */ .amb-vorher-nachher--foto { max-width: 860px; margin-inline: auto; } .amb-vorher-nachher--foto .amb-vn-bild { aspect-ratio: 4 / 3; min-height: 0; align-items: flex-end; justify-content: flex-start; } .amb-vorher-nachher--foto .amb-vn-tag { margin: var(--space-3); } .amb-vorher-nachher--foto figcaption { margin-top: var(--space-3); } /* Einzelbild, das beide Zustaende in einer Aufnahme zeigt. */ .amb-vorher-nachher--einzel { max-width: 720px; margin-inline: auto; } .amb-vorher-nachher--einzel .amb-vn-frame { grid-template-columns: 1fr; } .amb-vorher-nachher--einzel .amb-vn-bild { aspect-ratio: 4 / 3; min-height: 0; align-items: flex-end; justify-content: flex-start; } .amb-vorher-nachher--einzel figcaption { margin-top: var(--space-3); }