/* ========================================================= 3U REINIGUNG – Design Tokens Farben 1:1 aus den Colour-Swatches der XD-Datei übernommen (3UREINIGUNG_Formular.xd -> resources/graphics/graphicContent.agc) ========================================================= */ :root { /* --- Farbpalette (aus XD-Farbfeldern) --- */ --color-navy: #2F4F7B; /* rgb(47,79,123) – Primärfarbe, Headlines, Buttons aktiv */ /* Schlagschatten fuer helle Schrift auf Fotos. Runde 28: die Vorgabe des Auftraggebers - x 0, y 0, Weichzeichnen 21, Streuung 0, #595959 bei 21 %. Runde 29: dazu ein zweiter, enger Schatten (Weichzeichnen 7, #151515 bei 40 %) - Variante B aus dem Vergleichsbild. Der weite Schatten legt einen weichen Hof um die Schrift, der enge stellt sie auch auf einem ganz hellen Foto klar davor, ohne das Bild abzudunkeln. Er steht als Variable, damit alle Stellen (Kopfbilder der Unterseiten, Artikel-Navigation) denselben Wert benutzen. */ --schrift-schatten: 0 0 21px rgba(89, 89, 89, 0.21), 0 0 7px rgba(21, 21, 21, 0.40); --color-navy-light: #E3E7ED; /* rgb(227,231,237) – helle Flächen / Karten-Hintergrund */ --color-gold: #D0B084; /* rgb(208,176,132) – Akzentfarbe */ --color-cream: #F9F5EF; /* rgb(249,245,239) – Seiten-/Sektionshintergrund */ --color-black: #151515; /* rgb(21,21,21) – Fliesstext dunkel */ --color-gray-600: #595959; --color-gray-400: #909090; --color-gray-300: #C8C8C8; --color-gray-200: #E9E9E9; --color-gray-100: #FAFAFA; --color-white: #FFFFFF; /* Schlagschatten des Preiskalkulators: x/y 0, Weichzeichnen 8, Streuung 0, #595959 mit 13 % - laut Kundenvorgabe der einzige Schatten im Kalkulator und (Runde 10, PK1) auch im Kontaktformular. */ --pk-shadow: 0 0 8px rgba(89, 89, 89, 0.13); /* --- Typografie --- Hinweis: "Bodoni 72" und "Advent Pro SemiBold" sind aus dem XD extrahiert. Bodoni 72 ist eine kommerzielle Adobe-Schrift und kann hier nicht lizenziert werden -> Ersatz durch die optisch sehr ähnliche freie Schrift "Bodoni Moda" (Google Fonts). Montserrat und Advent Pro sind als Google Fonts frei verfügbar und wurden 1:1 übernommen. */ --font-headline: 'Bodoni Moda', 'Bodoni 72', Georgia, serif; --font-body: 'Montserrat', -apple-system, sans-serif; --font-label: 'Advent Pro', 'Montserrat', sans-serif; /* Feedback-Runde 4, Punkt 5: sitesweite Bodoni-Moda-Anpassung (opsz 15, Zeichenabstand -2%) - als Variable zentral gepflegt und an jeder Stelle angehängt, die font-family: var(--font-headline) setzt, damit Montserrat/Advent-Pro-Text (Fliesstext, Labels) NICHT mitbetroffen ist. Feedback-Runde 5, Punkt 5: Zeichenabstand von -2% auf -4% angepasst (Opsz bleibt bei 15). */ --font-headline-tracking: -0.04em; --container-width: 1152px; --transition-slow: 900ms cubic-bezier(0.19, 1, 0.22, 1); --transition-mid: 550ms cubic-bezier(0.19, 1, 0.22, 1); --transition-fast: 280ms ease; /* Fallback, bevor JS (setHeroBottomVar in effects.js) die echte, dynamische Hero-Höhe misst und überschreibt - siehe home.css .home-hero (Feedback: Hero max. 1 Bildschirmhöhe, min. Inhaltshöhe, dadurch nicht mehr fix 798px wie der Rest des 1440px-Layouts). */ --hero-bottom: 798px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* Runde 19, Punkt 7: Safari auf dem iPhone vergroessert Schrift in breiten Textbloecken eigenmaechtig ("Text Autosizing"). Das passiert NUR dort - Chrome auf dem Rechner zeigt die Seite unveraendert, und genau das war die Meldung: "Fehler nur auf Safari (mobile) ... auf Chrome nicht vorhanden". Durch die Vergroesserung passte "jetzt spontan bewerben" nicht mehr in eine Zeile und der Abstand zum Pfeil stimmte nicht mehr. 100% heisst: die eingestellten Groessen gelten so, wie sie im Stylesheet stehen. Auf dem Desktop hat die Angabe keine Wirkung (dort greift das Autosizing ohnehin nicht) - nachgemessen, die Desktop-Darstellung bleibt bildpunktgleich. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); color: var(--color-black); background: var(--color-white); -webkit-font-smoothing: antialiased; /* clip statt hidden: schneidet seitlich genauso ab, macht den aber NICHT zu einem eigenen Scrollbereich. Mit overflow-x:hidden wird overflow-y automatisch zu "auto" - und in einem solchen Bereich kann position:sticky nicht kleben (PK3). */ overflow-x: clip; /* Feedback-Runde 3: "Bodoni Moda" (Ersatz für die kommerzielle "Bodoni 72", siehe Kommentar bei --font-headline oben) ist ein Variable Font mit einer "opsz" (optical size) Achse 6..96. Ohne explizite Einstellung wählt der Browser per automatischer optischer Grössenanpassung bei den grossen Headline-Schriftgrössen dieser Seite einen hohen opsz-Wert - das erzeugt die für sehr grosse Display-Bodoni-Schnitte typischen extrem dünnen Haarlinien/Serifen (genau das bemängelte "Linien/Serifen zu dünn"). "Bodoni 72" ist dagegen ein sattere, für Text optimierter Schnitt mit kräftigeren Linien. Fix: optische Grösse fix auf den unteren Wert der Achse verankern (kräftigere, gleichmässigere Strichstärken bei jeder Grösse) statt sie automatisch an die Schriftgrösse zu koppeln. Wirkt nur auf Bodoni Moda - andere Schriften (Montserrat, Advent Pro) besitzen keine "opsz"-Achse und ignorieren diese Einstellung folgenlos. Feedback-Runde 4: Wert von 6 auf 15 angepasst (User-Vorgabe). */ font-optical-sizing: none; font-variation-settings: 'opsz' 15; } img { max-width: 100%; display: block; } h1, h2, h3 { font-family: var(--font-headline); font-weight: 400; color: var(--color-navy); margin: 0 0 0.5em; letter-spacing: var(--font-headline-tracking); /* Feedback-Runde 6, Punkt 1: auf Wunsch von 1.1 (so war der oberste Titel zuvor) auf "line-height:1" (=Figma-Vorgabe 55/55 bei den 55px-Titeln) geändert. Feedback-Runde 7, Punkt 1: Auftraggeber möchte doch wieder die vorherige, einheitliche 1.1 sitesweit - hier zentral (statt wie in Runde 6 einzeln pro Titel in home.css) gesetzt, damit "sitesweit einheitlich" auch tatsächlich für jede Bodoni-Moda-Überschrift auf jeder Seite gilt, nicht nur auf der Startseite. */ line-height: 1.1; } a { color: inherit; text-decoration: none; } .container { max-width: var(--container-width); margin: 0 auto; padding: 0 24px; } .label-caps { font-family: var(--font-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 13px; color: var(--color-navy); } .btn { display: inline-block; font-family: var(--font-body); font-weight: 500; font-size: 15px; padding: 14px 34px; border-radius: 2px; border: 1px solid var(--color-navy); color: var(--color-navy); background: transparent; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), letter-spacing var(--transition-fast); letter-spacing: 0.02em; } .btn:hover { background: var(--color-navy); color: var(--color-white); letter-spacing: 0.06em; } .btn-primary { background: var(--color-navy); color: var(--color-white); } .btn-primary:hover { background: #233c5e; }