/* ===================================================================== Octonova – base.css Design-Foundation (Tokens aus Figma) + Reset + Typografie + Layout Figma-Datei: uuT0OE3xaRTky8SHimmuFT ===================================================================== */ /* ---------- Schriften ------------------------------------------------- Design-Schrift ist "Deuterium Variable" (Kostic Type Foundry, Adobe Fonts). Sie lässt sich nicht selbst hosten, nur über ein Adobe-Fonts-Web-Projekt einbinden. Bis das vorliegt, läuft die Website bewusst auf Poppins. UMSTELLUNG AUF DEUTERIUM – zwei Schritte: 1. in den aller Seiten (index.html + partials/head.html + Unterseiten). 2. --font-heading / --font-body unten auf "deuterium-variable" umstellen. Die Gewichts-Zuordnung unten stimmt dann weiterhin: Deuterium liefert dieselben Achsenwerte (200–900), auf die die Typografie hier setzt. Poppins selbst gehostet (nicht via Google-CDN): die Seite hat eine Datenschutzseite und CH/EU-Publikum – kein Drittanbieter-Request für Fonts. --------------------------------------------------------------------- */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/poppins-200-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/poppins-200-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/poppins-300-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/poppins-300-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/poppins-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/poppins-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/poppins-900-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/poppins-900-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* Farben (Figma Variables) */ --color-valhalla-dark: #271a4b; /* Haupt-Hintergrund */ --color-valhalla: #392669; /* Karten / Vordergrund */ --color-wattle: #cbd94a; /* Akzent (gelbgrün) */ --color-white: #ffffff; --color-white-soft: #eeeeee; --color-white-20: rgba(255, 255, 255, 0.2); --color-white-30: rgba(255, 255, 255, 0.3); /* Opacity/White 30 – Buttons auf Bild */ --color-border: rgba(255, 255, 255, 0.2); /* Color Scheme 1/Border */ /* Schrift-Stacks – siehe Umstellungs-Hinweis oben. Für Deuterium: "deuterium-variable" vor "Poppins" setzen. */ --font-heading: "Poppins", "Helvetica Neue", Arial, sans-serif; --font-body: "Poppins", "Helvetica Neue", Arial, sans-serif; /* Gewichte (Figma-Achsenwerte → Poppins-Schnitte) Black 900 · ExtraBold 630→800 · Bold 560→700 · Medium 480→500 Regular 400 · Light 300 · ExtraLight 275→200 */ --fw-black: 900; /* Hero "Alles andere als" */ --fw-extrabold: 800; /* H1, Wortmarke "octonova" */ --fw-bold: 700; /* H2 */ --fw-semibold: 600; /* Team-Namen (Figma: Poppins SemiBold 22px) */ --fw-medium: 500; /* Buttons, Text/Regular/Medium */ --fw-regular: 400; --fw-light: 300; --fw-extralight: 200; /* Hero "Broker" */ /* Schriftgrössen (Figma Text Sizes) */ --fs-h1: 64px; --fs-h2: 40px; /* Wunsch Stefanie – Figma sagt 48px */ --fs-h4: 32px; --fs-h5: 24px; /* Text Sizes/Heading 5 – Service-Karten, Akkordeon */ --fs-h6: 20px; /* Text Sizes/Heading 6 – Stat-Labels */ --fs-text-large: 20px; --fs-text-medium: 18px; --fs-text-reg: 18px; /* Wunsch Stefanie – Figma sagt 16px. Wirkt global: Body-Grundtext und alles, was diesen Token nutzt. */ /* Zeilenhöhen */ --lh-heading: 1.2; --lh-body: 1.5; /* Layout (Figma) */ --container-large: 1440px; /* Wunsch Stefanie – Figma sagt 1280px */ --page-padding: 64px; /* padding-global */ --section-padding: 112px; /* padding-section-large */ --nav-height: 54px; /* fixierte Navbar, Figma-Navbar-Instanz */ --radius: 5px; /* Radius/Large + Radius/Medium */ --radius-xl: 50px; /* Radius/XLarge – die diagonal gerundeten Karten */ --radius-btn: 12px; /* Buttons (Figma: rounded-[12px]) */ /* Abstände */ --gap-xs: 8px; --gap-sm: 16px; --gap-md: 24px; --gap-lg: 32px; --gap-xl: 52px; } /* ---------- Reset ---------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* Sprungmarken: Ohne das landet das Ziel unter der fixierten Navbar, weil der Browser exakt auf die Oberkante des Elements scrollt. */ section[id] { scroll-margin-top: calc(var(--nav-height) + 24px); } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-text-reg); line-height: var(--lh-body); color: var(--color-white); background-color: var(--color-valhalla-dark); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Feiner grüner Scrollbalken (Wunsch Stefanie). Firefox über scrollbar-*, WebKit/Chrome/Safari über die ::-webkit-scrollbar-Pseudos. */ html { scrollbar-width: thin; scrollbar-color: var(--color-wattle) transparent; } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--color-wattle); border-radius: 3px; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } h1, h2, h3, h4, h5, h6, p, blockquote, figure { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } /* ---------- Typografie ---------------------------------------------- */ /* letter-spacing: Figma gibt letterSpacing -1 als Prozent an, nicht als Pixel. Die Nodes rendern -0.48px auf 48px und -0.32px auf 32px – also -1% = -0.01em. */ h1, .h1 { font-family: var(--font-heading); font-size: var(--fs-h1); font-weight: var(--fw-extrabold); line-height: var(--lh-heading); letter-spacing: -0.01em; } h2, .h2 { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: -0.01em; } h4, .h4 { font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: var(--fw-regular); line-height: 1.3; letter-spacing: -0.01em; } .text-large { font-size: var(--fs-text-large); } .text-medium { font-size: var(--fs-text-medium); } .text-reg { font-size: var(--fs-text-reg); } .text-accent { color: var(--color-wattle); } .text-muted { color: rgba(255, 255, 255, 0.8); } /* ---------- Layout-Helfer ------------------------------------------- */ .container { width: 100%; max-width: var(--container-large); margin-inline: auto; } .section { padding: var(--section-padding) var(--page-padding); } .section--tight { padding-block: 80px; } /* Erste Sektion einer Unterseite: Die Navbar ist fixiert und überlagert sonst den Anfang. In Figma sitzt der Inhalt unter der Navbar (54px) plus dem regulären Sektionspadding – ohne das startet die Seite zu weit oben. min-height 100vh ist ein Wunsch von Stefanie, nicht aus Figma: die erste Sektion soll den Bildschirm füllen. Inhalt bleibt vertikal zentriert. */ .section--first { padding-top: calc(var(--nav-height) + var(--section-padding)); min-height: 100vh; display: flex; flex-direction: column; /* flex-start statt center (Wunsch Stefanie): zentriert hing die Y-Position der Tagline an der Inhaltshöhe der Seite – gemessen 166/190/166/166. So startet der Inhalt auf allen Seiten bündig unter der Navbar. */ justify-content: flex-start; } /* Silbentrennung: Ohne das sprengen lange Komposita wie "Schadenmanagement" oder "Versicherungsleistungen" ihre Spalte. manual (Wunsch Stefanie): KEINE automatische Silbentrennung – Wörter brechen nicht mehr mitten drin ("Schadenmanage-ment"), sondern umbrechen als Ganzes. Wartungsfrei für die CMS-Pflege (keine Sonderzeichen nötig). Die Banner setzen weiterhin gezielte weiche Trennzeichen (fester Hero-Text). Die Mobile-Notbremse overflow-wrap (unten) fängt echte Überlängen ab. */ h1, h2, h3, h4, h5, h6, .intro__title, .cta-band__title, .banner__title, .prose__title { -webkit-hyphens: manual; hyphens: manual; } /* Reveal-Animation – reines CSS, Endzustand immer sichtbar. (Kein Verstecken via opacity:0 im Grundzustand → Inhalt erscheint auch ohne JS bzw. wenn ein IntersectionObserver nicht feuert.) */ /* Vorher lief die Animation als @keyframes beim SEITENLADEN – für alle Elemente gleichzeitig, auch weit unterhalb des Falzes. Die vom IntersectionObserver gesetzte Klasse .is-visible wurde von keiner Regel benutzt. Beim Runterscrollen war die Animation also längst vorbei. Jetzt: Grundzustand versteckt, .is-visible blendet ein. Das Verstecken hängt an .js (im gesetzt): Ohne JavaScript greift keine dieser Regeln und der Inhalt ist normal sichtbar. */ .js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1); } .js [data-reveal].is-visible { opacity: 1; transform: none; } /* Gestaffelt: die Kinder kommen nacheinander statt der Block als Ganzes. Der Beobachter hängt am Container, die Verzögerung an den Kindern. */ .js [data-stagger] > * { opacity: 0; transform: translateY(32px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); } .js [data-stagger].is-visible > * { opacity: 1; transform: none; } .js [data-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; } .js [data-stagger].is-visible > *:nth-child(2) { transition-delay: 90ms; } .js [data-stagger].is-visible > *:nth-child(3) { transition-delay: 180ms; } .js [data-stagger].is-visible > *:nth-child(4) { transition-delay: 270ms; } .js [data-stagger].is-visible > *:nth-child(5) { transition-delay: 360ms; } .js [data-stagger].is-visible > *:nth-child(6) { transition-delay: 450ms; } .js [data-stagger].is-visible > *:nth-child(7) { transition-delay: 540ms; } .js [data-stagger].is-visible > *:nth-child(n+8) { transition-delay: 630ms; } /* Parallax: das Motiv ist absichtlich höher als sein Rahmen, damit beim Verschieben oben/unten nichts frei liegt. parallax.js setzt translate3d. */ .js [data-parallax] { will-change: transform; height: 128% !important; top: -14% !important; } /* ---------- Responsive: Schrift-Skala ------------------------------- Figma hat NUR Desktop-Frames – für Mobile gibt es keine Vorlage. Die Werte hier sind abgeleitet, nicht abgelesen. Die Desktop-Grössen sind auf schmalen Schirmen unbrauchbar: 64px H1 in einer 327px-Spalte (375px minus Padding) sprengt jede Zeile – gemessen 196px Überlauf auf der Startseite. Weil fast alles über die Tokens läuft, räumt eine Skala hier den Grossteil ab. */ @media (max-width: 1024px) { :root { --fs-h1: 52px; --fs-h2: 36px; --fs-h4: 28px; } } @media (max-width: 768px) { :root { --fs-h1: 40px; --fs-h2: 30px; --fs-h4: 24px; --fs-h5: 20px; --fs-h6: 18px; --fs-text-large: 18px; --fs-text-medium: 17px; } /* svh statt vh: Auf dem Handy rechnet vh die ein-/ausblendende Browser- Leiste mit, die Sektion wird dadurch höher als der sichtbare Bereich. svh nimmt den kleinsten sichtbaren Ausschnitt. */ .section--first { min-height: 100svh; } } /* Notbremse für überlange Komposita: hyphens greift nur bei bekannten Wörtern. Was der Browser nicht trennen kann, wird hier hart umbrochen, statt aus dem Bildschirm zu laufen. */ @media (max-width: 768px) { h1, h2, h3, h4, h5, h6, p, li, blockquote, .accordion__title, .service-card__title, .team-card__name, .contact-item__value, .testimonial__quote { overflow-wrap: break-word; } } /* Wer Bewegung reduziert haben will, bekommt keine: kein Einfaden, keine Staffelung, kein Parallax (klassischer Auslöser für Bewegungsübelkeit), kein weiches Scrollen. Der Inhalt steht sofort da. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js [data-reveal], .js [data-reveal].is-visible, .js [data-stagger] > *, .js [data-stagger].is-visible > * { opacity: 1; transform: none; transition: none; transition-delay: 0ms !important; } .js [data-parallax] { height: 100% !important; top: 0 !important; transform: none !important; } }