@charset "UTF-8"; /* ========================================================================= Kampagne 2026 – "Das Wunder der Chemie" Ergänzung zu _overrides.css / _overrides-colors.css. Wird NUR von index-2026.html geladen, ältere Seiten bleiben unberührt. ========================================================================= */ :root { --cyb-blue: #AABEDC; /* Band "Mehr Wow" (= --cyb-primary) */ } /* ------------------------------------------------------------------------- Kampagnen-Display-Schrift: Field Gothic No. 34 XCond Demi (Signal Type Foundry, ueber Adobe Fonts). Adobe erlaubt kein Self-Hosting - die Schrift kommt ueber das Adobe-Fonts-Web-Projekt qfm8hgn; die -Zeile steht im von index-2026.html. Familienname und Weight stammen aus dem Kit (https://use.typekit.net/qfm8hgn.css): "field-gothic-xcondensed", 600. Achtung: Laeuft das Creative-Cloud-Abo aus, faellt die Seite auf die Ersatzschrift zurueck. Deshalb bleibt DIN Bold als Fallback stehen. Die Domain muss im Web-Projekt freigeschaltet sein (diechemie.at, www und die Testumgebung) - sonst laedt das Kit dort nicht. ------------------------------------------------------------------------- */ :root { --font-campaign: "field-gothic-xcondensed", "KampagneDisplay", "DIN", "Helvetica Neue", Arial, sans-serif; --font-campaign-weight: 600; /* Demi */ } /* ------------------------------------------------------------------------- NeutraDisp - korrigierte Fassung Die gelieferte NeutraDisp-Bold.otf baut die kleinen Umlaute (ae oe ue) und rund 50 weitere Akzentzeichen per "seac": eine veraltete CFF-Konstruktion, die Basisbuchstabe und Akzent nur referenziert, statt eine eigene Kontur zu speichern. Aktuelle Browser unterstuetzen das nicht mehr - die Zeichen bleiben leer oder fallen auf eine Ersatzschrift zurueck. Genau das war in den Headlines zu sehen ("W stenluft", "m glich" bzw. Umlaute in fremder Schrift). In den woff-Dateien sind diese Referenzen in echte Konturen aufgeloest. Nebeneffekt: woff2 ist 27 KB statt 88 KB. Wichtig fuer kuenftige Aenderungen: die Vorschubbreite steht in einer CFF-Schrift doppelt - in der hmtx-Tabelle und im Charstring selbst. Windows/DirectWrite liest sie aus dem Charstring, macOS und Linux aus hmtx. Deshalb muss beim Neuaufbau in jedem Charstring die Breite als Delta zu nominalWidthX (hier 409) stehen, sonst gilt unter Windows defaultWidthX (212) und die Umlaute laufen ineinander. Geprueft: 430 Glyphen, 0 Abweichungen zwischen Charstring und hmtx, Konturen punktgleich mit dem Original, kein seac mehr enthalten. Eingebunden unter eigenem Familiennamen (siehe Kommentar unten). Die alte index.html nutzt weiterhin die OTF und hat den Fehler noch. ------------------------------------------------------------------------- */ @font-face { font-family: "NeutraDispWeb"; src: url("/fonts/NeutraDisp-Bold.woff2?v=3") format("woff2"), url("/fonts/NeutraDisp-Bold.woff?v=3") format("woff"); font-display: swap; } /* Eigener Familienname statt Ueberschreiben von "NeutraDisp". Zwei @font-face mit gleichem Namen und gleichen Descriptors ersetzen einander NICHT zuverlaessig - der Browser laedt beide Dateien und zieht fuer fehlende Zeichen weiter die alte OTF heran. Genau daran ist der erste Anlauf gescheitert. Mit eigenem Namen kommt die OTF nicht mehr zum Zug und wird gar nicht erst geladen. */ .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-family: "NeutraDispWeb", sans-serif; } /* Ersatzschrift, falls das Adobe-Kit nicht laedt */ @font-face { font-family: "KampagneDisplay"; src: url("/fonts/DINBd.ttf") format("truetype"); font-weight: 400 900; font-style: normal; font-display: swap; } .display-campaign { font-family: var(--font-campaign) !important; font-weight: var(--font-campaign-weight); text-transform: uppercase; letter-spacing: -0.005em; line-height: 0.95; } /* ------------------------------------------------------------------------- Hero Headline linksbündig auf Container-Kante, FCIO-Logo unten rechts (statt Logo in der Navbar). ------------------------------------------------------------------------- */ .header-section { position: relative; } /* Auf der Startseite ist das Logo Teil des Heros – die Navbar zeigt es erst, sobald sie am oberen Rand andockt. */ .home-2026 .bottom-nav.logo-large-start:not(.navbar-bottom-top) a.logo { opacity: 0; pointer-events: none; } /* Burger bleibt oben rechts, solange die Navbar über dem Hero liegt. */ .home-2026 .bottom-nav:not(.navbar-bottom-top) .sidemenu_btn { position: fixed !important; top: 1.75rem; right: max(1.25rem, calc((100vw - 1320px) / 2)); margin-right: 0; z-index: 1002; } .hero-inner { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; top: 0; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(2rem, 7vh, 5rem); z-index: 2; pointer-events: none; } .hero-title { color: #fff; text-align: left; margin: 0 0 auto; padding-top: 42vh; white-space: nowrap; /* Startwert / Fallback ohne JS - /js/_2026.js rechnet die Groesse anschliessend so, dass die Zeile die Containerbreite fuellt. */ font-size: clamp(1.75rem, 7vw, 9rem); } .hero-logo { align-self: flex-end; width: clamp(110px, 13vw, 230px); height: auto; margin-top: 1.5rem; } @media (max-width: 767.98px) { .hero-title { padding-top: 38vh; white-space: normal; } /* zweizeilig, damit die Schrift auf dem Handy gross genug bleibt */ .hero-title span { display: block; } .hero-logo { width: 120px; } } /* ------------------------------------------------------------------------- Medienblöcke – Video oder Standbild, volle Containerbreite ------------------------------------------------------------------------- */ .media-block { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background-color: #1c1c1c; } /* Sicherheitsnetz für Browser ohne aspect-ratio */ @supports not (aspect-ratio: 16 / 9) { .media-block { aspect-ratio: auto; } } /* ------------------------------------------------------------------------- Band "MEHR WOW" – volle Breite, Typo in HTML (skalierbar, indexierbar) ------------------------------------------------------------------------- */ .band-wow { background-color: var(--cyb-blue); padding: clamp(2.2rem, 5vw, 5rem) 0; text-align: center; } .band-wow .band-wow-title { margin: 0; color: #000; font-size: clamp(3rem, 11vw, 12rem); } /* ------------------------------------------------------------------------- Textblöcke Kicker + Headline links, Fließtext rechts (wie im Layout). ------------------------------------------------------------------------- */ .contentblock .title h6 { text-transform: none; letter-spacing: 0; } .contentblock p:last-child { margin-bottom: 0; } /* Pointierte Schlusszeile der Blöcke */ .contentblock .claim { font-weight: 700; } /* Button-Beschriftung nicht automatisch kapitalisieren (deutsche Kleinschreibung) */ .contentblock .btn { text-transform: none; } /* ------------------------------------------------------------------------- Abstände: Text- und Medienblock gehören visuell zusammen ------------------------------------------------------------------------- */ .contentblock + .mediablock, .mediablock + .contentblock { padding-top: 0; } .mediablock { padding-bottom: clamp(2.5rem, 6vw, 6rem); } /* ------------------------------------------------------------------------- Spots: Videoschnipsel verlinkt auf den vollen Spot im Lightbox-Player ------------------------------------------------------------------------- */ .spot-link { display: block; position: relative; line-height: 0; text-decoration: none !important; cursor: pointer; } .spot-link .media-block { transition: filter 0.25s ease; } .spot-play { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); width: 3.6em; height: 3.6em; font-size: clamp(14px, 1.7vw, 22px); border: 0.16em solid #fff; border-radius: 100%; pointer-events: none; transition: transform 0.25s cubic-bezier(0.73, -0.37, 0.35, 1.37), background-color 0.25s ease; } /* Play-Dreieck */ .spot-play:after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate3d(-50%, -50%, 0); border-style: solid; border-width: 0.62em 0 0.62em 1.05em; border-color: transparent transparent transparent #fff; transition: border-left-color 0.25s ease; } .spot-link:hover .spot-play, .spot-link:focus-visible .spot-play { transform: translate3d(-50%, -50%, 0) scale(1.12); background-color: #fff; } .spot-link:hover .spot-play:after, .spot-link:focus-visible .spot-play:after { border-left-color: #000; } .spot-link:hover .media-block { filter: brightness(0.82); } .spot-link:focus-visible { outline: 3px solid var(--cyb-secondary); outline-offset: 4px; } /* ------------------------------------------------------------------------- Lightbox ------------------------------------------------------------------------- */ .spot-modal[hidden] { display: none; } .spot-modal { position: fixed; inset: 0; /* ueber allem: die Seite nutzt bis 10000 (Seitenmenue), der Scroll-Button und die Navbar liegen darunter */ z-index: 100000; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); } .spot-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.92); animation: spotFade 0.2s ease both; } /* Breite zusaetzlich an der Fensterhoehe deckeln, damit Schliessen-Button und Hinweiszeile auch auf flachen Fenstern sichtbar bleiben. */ .spot-modal-dialog { position: relative; width: min(100%, 1200px, calc((100vh - 11rem) * 16 / 9)); animation: spotFade 0.25s ease both; } @supports (height: 100dvh) { .spot-modal-dialog { width: min(100%, 1200px, calc((100dvh - 11rem) * 16 / 9)); } } .spot-modal-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; border-radius: 0.4rem; } @supports not (aspect-ratio: 16 / 9) { .spot-modal-frame { padding-bottom: 56.25%; height: 0; } } .spot-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; } /* Ladeanzeige: Standbild plus Spinner, bis der YouTube-Player bereit ist ---- */ .spot-modal-loading { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background-color: #0d0d0d; background-size: cover; background-position: center; transition: opacity 0.35s ease; } .spot-modal-loading:before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); } .spot-modal-loading.is-done { opacity: 0; pointer-events: none; } .spot-spinner { position: relative; width: 2.75rem; height: 2.75rem; border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 100%; animation: spotSpin 0.8s linear infinite; } @keyframes spotSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spot-spinner { animation-duration: 2.4s; } .spot-modal-backdrop, .spot-modal-dialog { animation: none; } } /* Schliessen: beschriftet, hoher Kontrast, immer ueber dem Video ----------- */ .spot-modal-close { position: absolute; right: 0; bottom: calc(100% + 0.7rem); display: inline-flex; align-items: center; gap: 0.45em; padding: 0.42em 0.85em 0.42em 0.7em; font-size: 0.8rem; font-weight: 700; line-height: 1; color: #000; background: #fff; border: 0; border-radius: 999px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .spot-modal-close svg { width: 1em; height: 1em; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; fill: none; } /* bleibt weiss - Rueckmeldung nur ueber Anheben und Schatten */ .spot-modal-close:hover, .spot-modal-close:focus-visible { transform: translateY(-1px); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25); } .spot-modal-close:focus-visible { outline: 2px solid #fff; outline-offset: 4px; } .spot-modal-hint { margin: 0.9rem 0 0; text-align: center; font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); } .spot-modal-hint kbd { padding: 0.1em 0.45em; font-family: inherit; font-size: 0.95em; color: #fff; background: rgba(255, 255, 255, 0.16); border-radius: 0.25em; } @media (max-width: 575.98px) { .spot-modal-close { font-size: 0.72rem; bottom: calc(100% + 0.5rem); } .spot-modal-hint { font-size: 0.75rem; } } @keyframes spotFade { from { opacity: 0; } to { opacity: 1; } } /* Seite hinter der Lightbox nicht mitscrollen */ body.spot-modal-open { overflow: hidden; } /* Navbar und Scroll-Button wuerden sonst durch den Backdrop schimmern */ .bottom-nav, .scroll-top-arrow { transition: opacity 0.2s ease; } body.spot-modal-open .bottom-nav, body.spot-modal-open .scroll-top-arrow { opacity: 0; pointer-events: none; }