/* ===================================================================== FASTEC Kundenportal – Design-Center CSS (BEREINIGT + SORTIERT) Stand: 2026-07-31 --------------------------------------------------------------------- Inhaltsverzeichnis: 1 GRUNDLAGEN (Verlaufs-Überschriften, Spaltenkopf, Wrap) 2 LAYOUT (Startseite: 2 Zonen + Grids) 3 KARTEN – Basis 4 KARTEN – Varianten (Bild, Light, Dark, Mein System, Interessent, Events, Hardware/Slider, Shop-Kachel, Account-Kachel) 5 NEWS-KACHELN (Animation) 6 BUTTONS & BALKEN 7 LAUNCHER-TILES 8 HEADER / FOOTER / NAV-DROPDOWNS 9 SEITEN-HERO 10 FILTER / CHIPS / PAGER 11 PARTNER-BLOCK 12 USE-CASE-DETAIL 13 VERANSTALTUNGEN (Liste + Detail) 14 ONLINE-DOKU (Doku-Kacheln) 15 VERSIONS-SEITE (Kopf + Tabelle) 16 SHOP-DETAILSEITE (v1 Basis + v2 Variablen-Struktur + Empfehlungen + Galerie) 17 IMPRESSUM (statisch) 18 TICKET-KACHEL (native) 19 TICKET-TABELLE (native) 20 DOKU-VIEWER (Vollbild) + Breadcrumbs 21 DOKU – FLARE-INHALTSFORMATE (+ Bildgrößen, Footer-Höhe, On-Page-Nav) 22 DOKU-VIEWER im SEITEN-EDITOR (Bearbeiten-Modus) 23 MEIN-KONTO-FORMULAR (fx-mycontact) 25 CHANGELOG (record_grid im Doku-Frame) 26 TYPOGRAFIE-VEREINHEITLICHUNG (Groessen-Hierarchie) 27 LINK-FARBE (zentral, --fx-link) 28 KACHEL-/H1-VERLAUF (Titel auf hellem Grund) 29 ECHTES SCHWARZ (zentral, --fx-black) 30 BLAUE KACHELN: Icon-Groesse + Eyebrow-Abstand 31 INTERESSENT-KACHEL: CTA-Button 32 SHOP-KACHELN: Bild groesser 33 LINK-TEXTE IN KACHELN GROESSER 34 NEWS-KACHEL: Fliesstext-Kuerzung robust 35 VERANSTALTUNGEN: groesseres Bild in den Kacheln 36 HEADER FIXIEREN (sticky) 37 CHANGELOG: Leer-Hinweis 38 ANSPRUNG-ZIELE UNTER DEM FIXIERTEN HEADER 39 CHANGELOG-SUCHE: Optik + Kontext (Optik-Teil abgeloest von 50) 40 CHANGELOG-KARTEN: Hierarchie (Variante A) 42 CHANGELOG-KARTE: Feinschliff 43 CHANGELOG-KARTE: Luft zwischen Titel und Text 44 CHANGELOG: weniger Leerraum ueber der Liste 45 DOKU-BROTKRUEMEL: einheitliche Schriftgroesse 46 CHANGELOG-TOPIC: Brotkruemel raus 47 SUCHFELD: sticky + Treffer-Hinweis auf den richtigen Wrapper 48 VERANSTALTUNGSUEBERSICHT: Ueberschriften feste Hoehe 49 CHANGELOG-BILDER: Zoom-Cursor 50 SUCHFELDER: eine Optik fuer Changelog, Shop UND Support-Formular 51 SHOP: eigener Leer-Zustand ohne Treffer 52 SUPPORT-FORMULAR (Block support_form) 53 FOOTER: durchgehendes Schwarz 54 USE-CASE-SCREENSHOTS: Lupe als Mauszeiger 55 SCHATTEN FUER DEN WEISSEN SEITENHINTERGRUND 56 HEADER-KANTE 57 FORMULARE AUS EINEM GUSS (Support + Mein Konto) 58 BESCHRIFTUNGEN FEST UEBER DIE FELDER 59 LOGIN-SEITE: Themen-Teaser neben der Anmeldekarte (24 und 41 existieren nicht - Nummern wurden beim Bauen uebersprungen) --------------------------------------------------------------------- Ggü. Vorversion (nur Struktur, Rendering identisch): - Gesamten unsortierten Anhang neu einsortiert (Account-Kachel, Mein-System-Logo, Datum-Chip, Interessent-Kachel, Shop-Detail v2 + Empfehlungen + Galerie, Mein-Konto-Formular, Doku-Editor). - Doku-Breadcrumb-Regeln aus „5 News" nach „20 Doku-Viewer" verschoben (waren fehlplatziert). - 2 tote Dubletten entfernt (spätere Regel überschrieb sie komplett): * erste .fx-shopd__reco-* Definition (durch spätere ersetzt), * .fx-card--system img{margin:2px 0 22px} (durch …6px ersetzt). - Shop-Detail BEWUSST als v1+v2 belassen (subtile Kaskade, td-über-tr-Painting bei Zebra) – nicht zusammengeführt. KOPPLUNGEN: .fx-card{height:440} ↔ .fx-left > *{grid-auto-rows:440}; .fx-card--dark{height:260} ↔ .fx-sidebar>*{grid-auto-rows:260}. ===================================================================== */ /* ===================================================================== 0 TYPOGRAFIE-BASIS (Hausschrift + Groessen-Hierarchie, portalweit) Hausschrift Segoe UI (System-Font, v.a. Windows); Fallback Open Sans fuer Geraete ohne Segoe UI (macOS, iOS, Android, Linux). ⚠ KEIN @import auf fonts.googleapis.com mehr (entfernt 2026-08-10): Die Plattform liefert Open Sans laengst SELBST aus - als variable woff2 mit Gewichtsachse 300-800, registriert in platform/frontend/src/theme-fonts.css, global eingebunden in main.jsx. Der frueher hier stehende @import stammte aus der Zeit davor und war wirkungslos: Die CSP (style-src 'self') blockt ihn, BEVOR ein Request rausgeht - kein DNS, kein Connect, keine Besucher-IP an Google (nachgemessen: alle Resource-Timing-Werte 0). Uebrig blieb nur ein Konsolenfehler pro Seitenaufruf. NICHT wieder aufnehmen und NICHT fonts.googleapis.com in die CSP eintragen - die Schrift kommt vom eigenen Host. Deckt MUI-Komponenten + eigene fx-* Klassen + Doku-Inhalt ab; !important gewinnt gegen aeltere, nicht-wichtige font-family-Regeln im Rest der Datei. Groessen-Hierarchie (durchgezogen in Sektion 26, ganz unten): 12px Mikro/Meta · 14px Standardtext · 16px Betont/Lead · 20px kleine Ueberschrift · 24px Ueberschrift · 32px grosse Ueberschrift ===================================================================== */ html, body, #root, .MuiTypography-root, .MuiButton-root, .MuiInputBase-root, .MuiMenuItem-root, .fx-docviewer, .fx-docviewer *, [class^="fx-"], [class*=" fx-"], [class^="fx-"] *, [class*=" fx-"] *{ font-family:"Segoe UI","Open Sans",Arial,sans-serif !important; } :root{ --fx-link:#003eab; /* zentrale Link-Farbe (Figma), Abschnitt 27 zieht alle Links darauf */ --fx-black:#000000; /* zentrales "Schwarz" (Figma), Abschnitt 29 zieht Grau-/Nah-Schwarz-Text darauf */ } /* ===================================================================== 1 GRUNDLAGEN ===================================================================== */ /* Verlaufs-Überschriften */ .fx-claim-grad, .fx-claim-grad *, .fx-h1, .fx-h1 *{ background-image:linear-gradient(90deg,#003eab 0%,#00a9eb 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent !important; color:transparent !important; } .fx-claim-grad{ width:fit-content !important; max-width:100% !important; } .fx-h1{ font-size:30px !important; font-weight:700 !important; width:fit-content !important; max-width:100% !important; } /* H1-Optik für Block-/Container-Überschriften (Klasse: fx-h1-head) */ .fx-h1-head h1, .fx-h1-head h2, .fx-h1-head h3, h1.fx-h1-head, h2.fx-h1-head, h3.fx-h1-head{ font-size:30px !important; font-weight:700 !important; line-height:1.2 !important; margin:0 !important; width:fit-content !important; max-width:100% !important; background-image:linear-gradient(90deg,#003eab 0%,#00a9eb 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent !important; color:transparent !important; } /* H2 / Spaltenüberschrift */ .fx-colhead{ display:block; width:100%; margin:0 0 8px; padding-bottom:12px; border-bottom:2px solid #dfe4ea; color:#2f6cb5 !important; font-weight:700 !important; letter-spacing:.07em; text-transform:uppercase; font-size:16px; } /* gleiche Breite/Zentrierung wie der Kachel-Frame */ .fx-wrap{ max-width:1050px !important; margin-left:auto !important; margin-right:auto !important; } /* ===================================================================== 2 LAYOUT (Startseite: 2 Zonen + Grids) ===================================================================== */ .fx-2zone{ max-width:1050px !important; margin-left:auto !important; margin-right:auto !important; } .fx-2zone > *{ grid-template-columns:2fr 1fr !important; } .fx-2zone .MuiBox-root{ align-content:flex-start !important; align-items:flex-start !important; } /* Linke Spalte der Startseite (Kachel-Raster). Gegenstueck zu .fx-sidebar > * direkt darunter - beide Spalten sind gleich gebaut. ⚠ NIE WIEDER AUF GENERIERTE KLASSEN ZIELEN (Umstellung 2026-08-10): Hier stand bis dahin ".css-at1f2b" - ein von MUI/Emotion zur LAUFZEIT erzeugter Klassenname, naemlich eine Pruefsumme ueber das sx-Objekt der Komponente. Bei jedem MUI-Update oder jeder Aenderung an diesem Objekt heisst die Klasse anders; die Regel greift dann ins Leere und das Kachel-Raster faellt lautlos zusammen - ohne Fehlermeldung, an einer Regel, die seit Monaten unveraendert ist. .fx-left lag als Elternknoten die ganze Zeit vor und wurde nur nie benutzt. Geprueft vor der Umstellung: .fx-left hat GENAU EIN Kind (= das Element, das den Hash trug), und der Hash kam portalweit nur auf der Startseite vor (start 1/1, veranstaltungen/shop/news/anwenderberichte je 0/0). */ .fx-left > *{ display:grid !important; grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important; grid-auto-rows:440px !important; gap:14px !important; align-content:start !important; } .fx-sidebar > *{ display:grid !important; grid-template-columns:1fr !important; grid-auto-rows:260px !important; gap:14px !important; align-content:start !important; } @media (max-width:1000px){ .fx-2zone{ max-width:100% !important; } .fx-2zone > *{ grid-template-columns:1fr !important; } .fx-sidebar > *{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important; grid-auto-rows:260px !important; } } @media (max-width:620px){ .fx-card{ height:auto !important; } .fx-left > *{ grid-auto-rows:auto !important; } .fx-sidebar > *{ grid-auto-rows:auto !important; } } /* ===================================================================== 3 KARTEN – Basis ===================================================================== */ .fx-card{ width:100%; height:440px !important; border-radius:10px; overflow:hidden; box-shadow:0 6px 18px rgba(20,40,80,.08); display:flex; flex-direction:column; transition:box-shadow .25s ease, transform .25s ease; } .fx-card:hover{ box-shadow:0 14px 30px rgba(20,40,80,.18); transform:translateY(-4px); } /* Klick-Hand NUR auf wirklich klickbaren Karten (per JS markiert). Buttons haben eigenen Pointer. */ .fx-card[data-fx-clickable="1"]{ cursor:pointer; } .fx-card__title{ margin:0; font-size:19px; font-weight:700; line-height:1.28; color:#1b2733 !important; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .fx-card .fx-blue{ color:#0aa1e6 !important; } .fx-card__text{ margin:14px 0 0; font-size:13.5px; line-height:1.6; color:#5a6875 !important; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; } .fx-card__link{ margin-top:auto !important; font-size:13.5px; font-weight:700; color:#0f7bd1 !important; text-align:right; display:block; } .fx-card__body{ padding:16px 18px 18px; display:flex; flex-direction:column; } .fx-card__date{ margin:0 0 8px; font-size:11.5px; color:#9aa6b2 !important; } .fx-card__title--blue{ color:#0f7bd1 !important; font-size:16px; } .fx-card__lead{ margin:6px 0 0; font-size:13.5px; font-weight:700; color:#28323d !important; } /* Aktionszeile (Buttons unten) */ .fx-card__actions{ margin-top:auto !important; display:flex !important; align-items:center !important; justify-content:flex-end !important; } .fx-card__actions .fx-card__link{ margin:0; } .fx-card__actions .fx-card__cta{ align-self:center !important; margin-top:0 !important; margin-left:auto !important; } /* Download-Wrapper nach links (bündig zum Inhaltsrand), „Lesen" bleibt rechts. Download = der „contained"-Button; „Lesen" = der Text-Button. */ .fx-card__actions > *:has(.MuiButton-contained){ order:-1 !important; margin-right:auto !important; margin-left:0 !important; padding-left:0 !important; } /* Download-Button: Farbverlauf wie „Willkommen…" (dunkelblau → cyan), weiße Schrift, flach */ .fx-card__actions .MuiButton-contained{ margin-left:0 !important; background:linear-gradient(90deg,#003eab 0%,#00a9eb 100%) !important; color:#fff !important; box-shadow:none !important; text-transform:none !important; } .fx-card__actions .MuiButton-contained:hover{ background:linear-gradient(90deg,#00317f 0%,#0092c9 100%) !important; box-shadow:none !important; } /* CTA-Button immer unten fixieren → gleiche Höhe je Kachel, egal wie viel Text */ .fx-card__cta{ margin-top:auto !important; } .fx-card__body > *:has(.fx-card__cta){ margin-top:auto !important; } /* ===================================================================== 4 KARTEN – Varianten ===================================================================== */ /* ----- Bild-Karte (fx-card--img) ----- */ .fx-card--img{ background:#fff; padding:0; } .fx-card--img .fx-card__media{ width:100% !important; height:180px !important; overflow:hidden !important; } .fx-card--img .fx-card__media img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; } .fx-card--img .fx-card__body{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; } .fx-card--img .fx-card__title{ display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; -webkit-line-clamp:3 !important; flex:0 0 auto !important; } .fx-card--img .fx-card__text{ display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; -webkit-line-clamp:4 !important; height:6.4em !important; flex:1 1 auto !important; min-height:0 !important; } .fx-card--img .fx-card__link, .fx-card--img .fx-card__actions{ margin-top:auto !important; flex-shrink:0 !important; } .fx-card--img .fx-card__date{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; height:1.4em !important; line-height:1.4 !important; flex:0 0 auto !important; } /* ----- Use-Case-Kachel (Light): Hero-Titel oben, Body unten ----- */ .fx-card--light{ height:440px !important; display:flex !important; flex-direction:column !important; padding:0 !important; background:#ffffff !important; overflow:hidden; } .fx-card--light .fx-card__title{ flex:0 0 auto !important; min-height:180px !important; display:flex !important; align-items:flex-start !important; padding:26px 26px 0 !important; background:linear-gradient(120deg,#d3e6f5 0%,#f4ece1 46%,#c3ddf2 100%) !important; /* color bewusst ENTFERNT (2026-08-07): Titelfarbe wird im Block gesetzt (Text-Element {{record.title}} -> Farbe). Ein !important hier hat die Blockeinstellung ueberstimmt. */ font-size:24px !important; line-height:1.2 !important; font-weight:700 !important; margin:0 !important; } .fx-card--light .fx-card__body{ flex:1 1 auto !important; display:flex !important; flex-direction:column !important; min-height:0 !important; padding:42px 26px 18px !important; } .fx-card--light .fx-card__cat{ flex:0 0 auto !important; color:#0f7bd1 !important; font-size:16px !important; font-weight:700 !important; line-height:1.28 !important; margin:0 0 12px !important; } /* Teaser ist echtes Rich-Text (mehrere

): Absätze inline → line-clamp + "…" wirkt wieder */ .fx-card--light .fx-card__text{ display:-webkit-box !important; -webkit-box-orient:vertical !important; overflow:hidden !important; -webkit-line-clamp:6 !important; height:9.6em !important; flex:0 0 auto !important; margin:0 !important; } .fx-card--light .fx-card__text p{ display:inline !important; margin:0 !important; } .fx-card--light .fx-card__text p::after{ content:" " !important; } .fx-card--light .fx-card__link{ margin-top:auto !important; flex-shrink:0 !important; } /* ----- Dark-Karte ----- */ .fx-card--dark{ position:relative; height:260px !important; padding:20px; background-image:linear-gradient(150deg,#0a53ad 0%,#0a2f6e 100%); color:#fff; } .fx-card--dark .fx-card__title{ color:#fff !important; font-size:17px; } .fx-card--dark .fx-card__text{ color:#c3d6f2 !important; font-size:13px; -webkit-line-clamp:3; } .fx-card--dark .fx-card__link{ color:#fff !important; } .fx-card--dark .fx-card__eyebrow{ margin:0 0 6px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#c3d6f2 !important; } .fx-card--dark::after{ content:""; position:absolute; top:18px; right:18px; width:22px; height:22px; background:center/contain no-repeat; opacity:.9; } .fx-ic-doku::after{ background-image:url("data:image/svg+xml;utf8,"); } .fx-ic-dl::after{ background-image:url("data:image/svg+xml;utf8,"); } .fx-ic-pain::after{ background-image:url("data:image/svg+xml;utf8,"); } .fx-ic-account::after{ background-image:url("data:image/svg+xml;utf8,"); } /* ----- Dark-Card Variante „Mein System" + „Interessent" (fx-card--system) ----- */ .fx-card--system .fx-card__title{ margin:0 0 8px; font-size:18px; } .fx-card--system .fx-card__link{ margin-top:0 !important; text-align:left !important; } /* Interessent-Kachel: standardmaessig AUS (kein Aufblitzen beim Laden). Zeigt sich erst via JS-Klasse .fx-nosys */ .fx-card--system{ display:none !important; } .fx-card--system.fx-nosys{ display:flex !important; } /* Logo (folgt direkt der Claim-Zeile) */ .fx-card--system img{ margin:2px 0 6px !important; } /* Claim, Benefit-Punkte, CTA-Reihe */ .fx-card--system .fx-card__claim{ margin:0 0 16px !important; font-size:13px !important; font-weight:700 !important; letter-spacing:.03em !important; color:#8fb4ea !important; } .fx-card--system .fx-card__benefits{ margin:14px 0 18px !important; } .fx-card--system .fx-card__benefit{ position:relative !important; padding-left:24px !important; margin:0 0 7px !important; font-size:14px !important; line-height:1.4 !important; color:#eaf1fb !important; } .fx-card--system .fx-card__benefit::before{ content:"✓" !important; position:absolute !important; left:0 !important; top:1px !important; color:#00ade9 !important; font-weight:700 !important; } .fx-card--system .fx-card__links{ margin-top:auto !important; align-items:center !important; justify-content:flex-end !important; gap:20px !important; flex-wrap:wrap !important; } .fx-card--system .fx-card__links .fx-card__link{ margin:0 !important; } /* ----- Hardware-Produkt-Kachel + Slider ----- */ .fx-card--product{ position:relative; overflow:hidden; } .fx-card--product::after{ content:none !important; } .fx-card--product .fx-card__eyebrow, .fx-card--product .fx-card__title, .fx-card--product .fx-card__text{ padding-right:44% !important; } .fx-card--product .fx-card__link{ text-align:right !important; } /* Produkt-Button "Mehr erfahren →" wie Textlink: absolut unten-rechts (umgeht Wrapper) */ .fx-card--product .fx-prod .MuiButton-root{ position:absolute !important; right:20px !important; bottom:30px !important; margin:0 !important; min-width:0 !important; padding:0 !important; background:none !important; box-shadow:none !important; border:0 !important; border-radius:0 !important; color:#fff !important; font-size:13.5px !important; font-weight:700 !important; line-height:1.2 !important; text-transform:none !important; letter-spacing:0 !important; } .fx-card--product .fx-prod .MuiButton-root::after{ content:"\00a0\2192"; } /* Pfeil → */ .fx-card--product .fx-prod .MuiButton-root:hover{ background:none !important; box-shadow:none !important; text-decoration:none !important; opacity:.85 !important; } .fx-card--product .fx-prod .MuiTouchRipple-root{ display:none !important; } .fx-card--product .fx-card__product{ position:absolute !important; right:3% !important; top:42% !important; transform:translateY(-50%) !important; width:36% !important; height:46% !important; background:radial-gradient(ellipse 75% 65% at 50% 50%, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 70%) !important; pointer-events:none; } .fx-card--product .fx-card__product img{ width:100% !important; height:100% !important; object-fit:contain !important; object-position:center !important; display:block !important; filter:drop-shadow(0 0 18px rgba(255,255,255,.55)) !important; } .fx-prodslider{ padding:0 !important; } .fx-prodslider .fx-prod{ position:absolute !important; inset:0 !important; display:flex !important; flex-direction:column !important; padding:20px !important; opacity:0; pointer-events:none; transition:opacity .6s ease; } /* Default/Fallback: Slide 1 sichtbar (nie leer) */ .fx-prodslider .fx-prod--1{ opacity:1; pointer-events:auto; } /* JS setzt aktiven Index als Klasse am Root (Taktgeber = News-Reload) */ .fx-prodslider.fx-i1 .fx-prod--1{ opacity:0; pointer-events:none; } .fx-prodslider.fx-i1 .fx-prod--2{ opacity:1; pointer-events:auto; } .fx-prodslider.fx-i2 .fx-prod--1{ opacity:0; pointer-events:none; } .fx-prodslider.fx-i2 .fx-prod--3{ opacity:1; pointer-events:auto; } .fx-prod--2 .fx-card__product{ width:36% !important; height:40% !important; right:11% !important; } /* ----- Veranstaltungen: 3 kommende, ausgeschrieben, mit CTA (FIXE Hoehe) ----- */ .fx-events{ position:relative; overflow:hidden !important; padding:16px 20px !important; cursor:pointer; width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; } /* Lade-Ueberlauf verhindern: Inhalt darf die Kachel nicht nach rechts sprengen */ .fx-events > *, .fx-events .MuiBox-root{ min-width:0 !important; max-width:100% !important; } .fx-events::after{ content:none !important; } /* Fallback-Text, wenn KEINE Veranstaltung vorhanden ist (kein Event-Link in der Kachel) */ .fx-events:not(:has(a.MuiPaper-root)):not(:has([role="progressbar"]))::after{ content:"Aktuell sind keine Veranstaltungen terminiert. Besuchen Sie FASTEC 4 YOU, um über künftige Veranstaltungen informiert zu werden." !important; display:block !important; margin-top:6px !important; font-size:13px !important; color:#c3d6f2 !important; line-height:1.4 !important; } /* Karten-Eyebrow (einmal oben) */ .fx-events::before{ content:"KOMMENDE VERANSTALTUNGEN"; display:block; margin:0 0 4px; line-height:1.2; font-size:11px; font-weight:700; letter-spacing:.08em; color:#c3d6f2; } /* Block-Ueberschrift "Veranstaltungen" weg */ .fx-events > .MuiBox-root > .MuiTypography-h6{ display:none !important; } .fx-events > .MuiBox-root{ padding:0 !important; margin:0 !important; width:100% !important; } /* Liste: vertikal gestapelt, kein Extra-Abstand oben */ .fx-events .MuiTypography-h6 + .MuiBox-root{ display:flex !important; flex-direction:column !important; gap:0 !important; width:100% !important; padding:0 !important; margin:0 !important; } /* nur die naechsten 3 Events */ .fx-events a.MuiPaper-root:nth-child(n+4){ display:none !important; } /* jede Event-Zeile: KEINE Box; kompakt; Trennlinie zwischen den Events */ .fx-events a.MuiPaper-root{ position:static !important; inset:auto !important; opacity:1 !important; pointer-events:auto !important; display:block !important; width:100% !important; background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; padding:0 0 8px !important; margin:0 !important; text-decoration:none !important; } .fx-events a.MuiPaper-root + a.MuiPaper-root{ border-top:1px solid rgba(255,255,255,.16) !important; padding-top:8px !important; } /* per-Event Eyebrow weg; CTA "Informationen & Anmeldung" pro Event */ .fx-events a.MuiPaper-root::before{ content:none !important; } .fx-events a.MuiPaper-root::after{ content:none !important; display:none !important; } /* Bild, Adresse, Leer-Spacer weg -> Datum + Titel (+ CTA) */ .fx-events a.MuiPaper-root img{ display:none !important; } .fx-events a .MuiBox-root:empty{ display:none !important; } .fx-events a p.MuiTypography-body2{ display:none !important; } .fx-events a > div.MuiBox-root{ display:flex !important; flex-direction:column !important; gap:0 !important; padding:0 !important; margin:0 !important; } /* Titel: weiss, ausgeschrieben (bis 2 Zeilen), kompakt */ .fx-events a .MuiTypography-subtitle2{ margin:0 !important; font-size:13px !important; font-weight:700 !important; color:#fff !important; line-height:1.2 !important; white-space:normal !important; display:-webkit-box !important; -webkit-box-orient:vertical !important; -webkit-line-clamp:2 !important; overflow:hidden !important; } /* Datum-Chip: gefuellten Hintergrund/Pille entfernen (nur Text) */ .fx-events .MuiChip-root, .fx-events .MuiChip-filled, .fx-events .MuiChip-filledPrimary, .fx-events .MuiChip-outlined{ background:transparent !important; background-color:transparent !important; box-shadow:none !important; border:0 !important; } /* Datum linksbuendig (Chip/Stack ohne Einzug) */ .fx-events a .MuiStack-root{ margin:0 !important; padding:0 !important; } .fx-events .MuiChip-root{ margin:0 !important; padding:0 !important; } .fx-events .MuiChip-label{ margin:0 !important; padding:0 !important; } /* ----- Mein System: nativer portal_systems-Block als blaue Kachel ----- */ .fx-system{ position:relative; overflow:hidden; } .fx-system::after{ content:none !important; } /* fx-card--dark Icon aus */ .fx-system::before{ /* Eyebrow */ content:"MEIN SYSTEM"; display:block; margin:0 0 8px; font-size:11px; font-weight:700; letter-spacing:.08em; color:#c3d6f2; } /* evtl. Wrapper + innere weisse Karte neutralisieren */ .fx-system > .MuiBox-root{ padding:0 !important; background:none !important; margin-top:-2px !important; } .fx-system .MuiPaper-root{ background:none !important; box-shadow:none !important; border:0 !important; border-radius:0 !important; padding:0 !important; margin:0 !important; } /* Logo oben (unter "MEIN SYSTEM", ueber der Version) - ersetzt den Produktnamen */ .fx-system .MuiPaper-root::before{ content:"" !important; display:block !important; height:60px !important; width:220px !important; margin:2px 0 12px !important; background:left center/contain no-repeat !important; background-image:url("/api/uploads/public-w3-public-w3-Fastec4Pro-blue.svg") !important; } /* Titel (Produkt) */ .fx-system .MuiPaper-root .MuiTypography-h6{ margin:0 !important; font-size:18px !important; font-weight:700 !important; color:#fff !important; line-height:1.2 !important; } /* Version wird per JS an den Titel gehaengt -> native Version-Zeile ausblenden */ .fx-system .MuiPaper-root .MuiTypography-body2{ display:block !important; margin:4px 0 0 !important; font-size:13.5px !important; font-weight:700 !important; color:#c3d6f2 !important; } /* Link-Zeile "Online-Doku · Lizenzen" (weiss, wie Kartenlink) */ .fx-system .MuiStack-root{ margin:12px 0 0 !important; display:flex !important; flex-direction:row !important; align-items:baseline !important; flex-wrap:wrap !important; gap:0 !important; } .fx-system .MuiButton-root{ min-width:0 !important; min-height:0 !important; padding:0 !important; margin:0 !important; background:none !important; box-shadow:none !important; color:#fff !important; font-size:13.5px !important; font-weight:700 !important; line-height:1.2 !important; text-transform:none !important; letter-spacing:0 !important; } .fx-system .MuiButton-root:hover{ background:none !important; text-decoration:none !important; opacity:.85 !important; transition:opacity .15s ease !important; } .fx-system .MuiTouchRipple-root{ display:none !important; } /* "Dokumentation" -> "Online-Doku" (Text per CSS ersetzt) */ .fx-system .MuiStack-root .MuiButton-root:first-child{ font-size:0 !important; } .fx-system .MuiStack-root .MuiButton-root:first-child::before{ content:"Online-Doku"; font-size:13.5px; font-weight:700; line-height:1.2; letter-spacing:0; } /* Trenner-Punkt vor "Lizenzen" */ .fx-system .MuiStack-root .MuiButton-root:last-child::before{ content:"\00b7"; margin:0 8px; } /* "Lizenzen" vorerst ausgeblendet (kann spaeter wieder rein: diese Regel entfernen) */ .fx-system .MuiStack-root .MuiButton-root:last-child{ display:none !important; } /* Trenner + "Update anfragen" nach "Lizenzen" (oeffnet per JS den Kontakt-Button) */ .fx-system .MuiStack-root::after{ content:"\00b7\00a0\00a0Update anfragen"; margin-left:8px; font-size:13.5px; font-weight:700; line-height:1.2; letter-spacing:0; color:#fff; cursor:pointer; transition:opacity .15s ease; } .fx-system .MuiStack-root:hover::after{ opacity:.85; } /* ----- Account-Kachel „Mein Konto" (fx-account, Dark-Card mit fx-ic-account) ----- */ .fx-account .fx-card__meta{ margin:2px 0 0; font-size:12.5px; font-weight:700; color:#c3d6f2 !important; } /* CTA „Profil bearbeiten →" als weißer Link unten links */ .fx-account .MuiButton-root{ margin-top:auto !important; align-self:flex-start !important; min-width:0 !important; padding:0 !important; background:none !important; box-shadow:none !important; color:#fff !important; font-size:13.5px !important; font-weight:700 !important; line-height:1.2 !important; text-transform:none !important; letter-spacing:0 !important; } .fx-account .MuiButton-root:hover{ background:none !important; opacity:.85 !important; transition:opacity .15s ease !important; } .fx-account .MuiTouchRipple-root{ display:none !important; } .fx-account .fx-acct-line{ margin:2px 0 0; font-size:13px; font-weight:600; color:#c3d6f2 !important; } /* ----- Shop-Kachel ----- */ .fx-card--shop{ height:340px !important; background:#fff; padding:0; } .fx-card--shop .fx-card__media{ width:100% !important; height:190px !important; padding:16px !important; background:#fff !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; } /* direkter Inhalt (Bild-Wrapper) füllt die Zone, damit das Bild nicht rausläuft */ .fx-card--shop .fx-card__media > *{ width:100% !important; height:100% !important; min-height:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; } .fx-card--shop .fx-card__media img{ max-width:100% !important; max-height:100% !important; width:auto !important; height:auto !important; object-fit:contain !important; display:block !important; } .fx-card--shop .fx-card__body{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1 1 auto; min-height:0; } .fx-card--shop .fx-card__title{ display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; -webkit-line-clamp:2 !important; height:2.56em !important; font-size:15px !important; } /* Kurzbeschreibung (2 Zeilen, gekürzt) */ .fx-card--shop .fx-card__shortdesc{ font-size:13px !important; color:#3a4756 !important; line-height:1.5 !important; margin:4px 0 0 !important; display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; } /* ===================================================================== 5 NEWS-KACHELN (Animation) ===================================================================== */ /* Fade wird per JS bei JEDEM News-Reload ausgeloest (Taktgeber fuer alle Slider; kein driftender Timer mehr) */ @keyframes fxNewsIn{ 0% { opacity:0; transform:translateY(16px); } 100% { opacity:1; transform:translateY(0); } } .fx-news.fx-news-in{ animation:fxNewsIn .6s ease-out; } /* News-Übersicht: getakteten Einblend-Effekt abschalten (Startseite behält ihn) */ .fx-newsgrid .fx-news{ animation:none !important; opacity:1 !important; transform:none !important; } /* ===================================================================== 6 BUTTONS & BALKEN ===================================================================== */ .fx-btn{ background:linear-gradient(90deg,#00a9eb,#0f7bd1); color:#fff !important; border-radius:5px; padding:5px 14px; font-size:12px; font-weight:700; display:inline-block; } .fx-btn .MuiButton-root, .fx-btn.MuiButtonBase-root, .fx-btn button{ background:linear-gradient(90deg,#003eab 0%,#00a9eb 100%) !important; color:#fff !important; border-radius:5px !important; padding:8px 20px !important; font-size:14px !important; font-weight:700 !important; text-transform:none !important; box-shadow:none !important; min-width:0 !important; min-height:0 !important; line-height:1.3 !important; } .fx-btn .MuiButton-root:hover, .fx-btn.MuiButtonBase-root:hover, .fx-btn button:hover{ background:linear-gradient(90deg,#00317f 0%,#0092c9 100%) !important; } /* „Weitere anzeigen"-Button */ .fx-morebar{ display:flex !important; justify-content:center !important; margin-top:24px; } .fx-morebtn{ display:inline-block; padding:12px 28px; border-radius:6px; background:linear-gradient(180deg,#12539f 0%,#0a2c63 100%); color:#fff !important; font-size:14px; font-weight:700; letter-spacing:.01em; cursor:pointer; border:0; } .fx-morebtn:hover{ filter:brightness(1.08); } /* ===================================================================== 7 LAUNCHER-TILES ===================================================================== */ .fx-tile{ background:#fff; border-radius:12px; padding:18px; box-shadow:0 6px 18px rgba(20,40,80,.08); } .fx-tile__icon{ width:48px; height:48px; border-radius:10px; margin:0 0 14px; background-repeat:no-repeat; } .fx-tile__title{ margin:0; font-size:17px; font-weight:700; color:#1b2733 !important; } .fx-tile__sub{ margin:4px 0 0; font-size:13px; color:#8a97a4 !important; } .fx-tile--tickets .fx-tile__icon{ background-image:url("data:image/svg+xml;utf8,"), linear-gradient(150deg,#1aa3e8 0%,#0b53ad 100%); background-position:center, center; background-size:24px 24px, cover; background-repeat:no-repeat, no-repeat; } .fx-tile--aufgaben .fx-tile__icon{ background-image:url("data:image/svg+xml;utf8,"), linear-gradient(150deg,#1aa3e8 0%,#0b53ad 100%); background-position:center, center; background-size:24px 24px, cover; background-repeat:no-repeat, no-repeat; } /* ===================================================================== 8 HEADER / FOOTER / NAV-DROPDOWNS ===================================================================== */ .fx-header{ padding-top:0 !important; padding-bottom:0 !important; } .MuiBox-root:has(> .fx-header){ padding-top:0 !important; padding-bottom:0 !important; } .fx-footer{ padding-top:0 !important; padding-bottom:0 !important; } /* Footer-Mittelspalte: alle vertikalen Abstaende gleich (oben / Icons-Links / Links-Copyright / unten) */ .fx-footer > .MuiStack-root:nth-child(2) > *{ margin:0 !important; } .fx-footer > .MuiStack-root:nth-child(2){ display:flex !important; flex-direction:column !important; align-items:center !important; gap:6px !important; padding:6px 0 !important; } .fx-footer .MuiIconButton-root{ padding:2px !important; } .fx-footer .MuiLink-button{ padding-top:0 !important; padding-bottom:0 !important; } .MuiBox-root:has(> .fx-footer){ padding-top:0 !important; padding-bottom:0 !important; } .MuiBox-root:has(> .MuiBox-root > .fx-footer){ padding-top:0 !important; padding-bottom:0 !important; } /* Header-Logo klickbar (Ziel via JS = /kundenportal/start; Bild-Element hat kein Link-Feld) */ .fx-header img[src*="logo"]{ cursor:pointer !important; } /* Nav-Leiste (Top-Level): mehr Abstand zwischen den Punkten + sauberer Hover-Unterstrich */ .fx-header .MuiStack-root:has(> .MuiLink-button){ gap:28px !important; } .fx-header .MuiStack-root:has(> .MuiLink-button) > .MuiLink-button{ margin:0 !important; } .fx-header .MuiLink-button{ text-decoration:none !important; border-bottom:1px solid transparent !important; padding-bottom:2px !important; border-radius:0 !important; } .fx-header .MuiLink-button:hover{ text-decoration:none !important; border-bottom-color:currentColor !important; background:transparent !important; } /* Nav-Dropdowns (MUI-Menü: Wissen/Support/Events; wirkt auf alle Menüs) */ .MuiMenu-paper{ border-radius:14px !important; border:1px solid #eceef0 !important; box-shadow:0 10px 30px rgba(16,35,58,.14) !important; padding:6px !important; margin-top:6px !important; } .MuiMenu-paper .MuiMenu-list{ padding:0 !important; } .MuiMenu-paper .MuiMenuItem-root{ border-radius:9px !important; padding:10px 14px !important; margin:2px 4px !important; min-height:0 !important; font-size:15px !important; color:#1f2a37 !important; } .MuiMenu-paper .MuiMenuItem-root:hover{ background:#eaedf0 !important; } .MuiMenu-paper .MuiMenuItem-root.Mui-focusVisible{ background:#eaedf0 !important; } /* aktuelle Seite = hellblau */ .MuiMenu-paper .MuiMenuItem-root.Mui-selected{ background:#d7eefb !important; color:#0b5aa6 !important; } .MuiMenu-paper .MuiMenuItem-root.Mui-selected:hover{ background:#c7e6fa !important; } /* ===================================================================== 9 SEITEN-HERO ===================================================================== */ .fx-hero{ width:100% !important; max-width:none !important; margin:0 !important; padding:24px 0 !important; align-items:center !important; } .fx-hero__text{ flex:1 1 55% !important; min-width:0 !important; } .fx-hero__title{ margin:0 0 18px !important; line-height:1.25 !important; } .fx-hero__lead{ margin:0 0 16px !important; font-size:19px !important; font-weight:700 !important; line-height:1.35 !important; color:#1b2733 !important; } .fx-hero__desc{ margin:0 !important; font-size:14px !important; line-height:1.7 !important; color:#5a6875 !important; } .fx-hero__img{ flex:1 1 45% !important; height:340px !important; overflow:hidden !important; border-radius:4px; } .fx-hero__img img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; } @media (max-width:820px){ .fx-hero{ flex-direction:column !important; align-items:stretch !important; } .fx-hero__text, .fx-hero__img{ flex:1 1 100% !important; width:100% !important; } .fx-hero__img{ height:240px !important; } } /* ===================================================================== 10 FILTER / CHIPS / PAGER ===================================================================== */ .fx-filter__hint{ font-size:12px; color:#8a97a4 !important; margin:0 0 6px; } .fx-filterbar{ flex-wrap:wrap !important; gap:10px !important; } .fx-chip{ display:inline-block; padding:7px 16px; border-radius:4px; background:#0a63b0; color:#fff !important; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; } .fx-chip--active{ background:#f39200 !important; } /* Hintergrund beim Ueberfahren MIT setzen (2026-08-13): MUI rendert die nicht gewaehlten Chips als "outlined/colorDefault" und faerbt sie beim Hover mit rgba(0,0,0,.12) - also 12% Schwarz. Diese Regel ERSETZT unser Blau, statt es abzudunkeln; der Chip wurde grau. Unsere alte Hover-Regel setzte nur brightness und konnte nichts ueberstimmen, weil ".css-:hover" (Klasse + Pseudoklasse) spezifischer ist als ".fx-chip". Jetzt wird der Hintergrund im Hover ausdruecklich wiederholt; brightness bleibt als Rueckmeldung erhalten. Die aktive Fassung muss danach stehen, sonst gewinnt Blau. */ .fx-chip:hover{ background:#0a63b0 !important; filter:brightness(1.08); } .fx-chip--active:hover{ background:#f39200 !important; } .fx-pager{ display:flex !important; justify-content:center !important; align-items:center !important; gap:6px !important; margin-top:20px !important; } .fx-pager .MuiPaginationItem-root, .fx-pager button{ min-width:34px !important; height:34px !important; margin:0 !important; padding:0 8px !important; border:0 !important; border-radius:6px !important; background:transparent !important; color:#0f7bd1 !important; font-size:14px !important; font-weight:600 !important; } .fx-pager .MuiPaginationItem-root:hover, .fx-pager button:hover{ background:#e6f1fb !important; } .fx-pager .MuiPaginationItem-root.Mui-selected, .fx-pager .Mui-selected, .fx-pager button[aria-current="true"], .fx-pager button.active{ background:#0a63b0 !important; color:#ffffff !important; } .fx-pager .MuiPaginationItem-root.Mui-selected:hover, .fx-pager .Mui-selected:hover{ background:#0a5499 !important; } .fx-pager .MuiPaginationItem-root.Mui-disabled, .fx-pager button:disabled{ color:#b8c2cc !important; background:transparent !important; cursor:default !important; } /* ===================================================================== 11 PARTNER-BLOCK ===================================================================== */ /* Oben mehr Innenabstand als unten (100 statt 40): Der Verlauf braucht STRECKE, um auszulaufen. Vorher begann er exakt an der Oberkante des Blocks und war deshalb oberhalb der Logos abrupt zu Ende. Die zusaetzliche Hoehe ist fast weiss, wirkt also als Luft und nicht als Flaeche. Wer den Auslauf verlaengern will, dreht HIER - nicht an den Farbstopps. */ .fx-partner-bg{ position:relative; z-index:0; padding:100px 72px 40px !important; } /* UEBERHANG DES BANDES ABSCHNEIDEN (2026-08-13, im Browser verifiziert). PROBLEM: 100vw enthaelt die senkrechte Scrollleiste, der Inhaltsbereich ist ~15px schmaler. Das Band steht dadurch je 7,5px ueber; rechts erzeugt das eine waagerechte Scrollleiste (gemessen bei 1240px: Container 0..1225, ::before -7,5..1232,5, Ueberhang 8px in mehreren verschachtelten Containern). ⚠ ZWEI FEHLVERSUCHE VORHER, BEIDE MIT DERSELBEN URSACHE - eine bei EINER Fensterbreite gemessene Zahl fuer allgemeingueltig gehalten: 1. left:-32px; right:-32px statt 100vw -> die 32px waren der Einzug bei 1240px. Bei breiten Fenstern ist die Inhaltsspalte gedeckelt und zentriert, der Einzug waechst auf mehrere hundert Pixel; das Band war danach nur noch textbreit. 2. clip an :has(> * > .fx-partner-bg) -> das ist die INHALTSSPALTE. Bei 1240px zufaellig voll breit, bei breiten Fenstern gedeckelt -> Band mitbeschnitten. RICHTIG ist der Vorfahre, der den HEADER traegt: Der geht bei JEDER Fensterbreite bis zum Rand, deshalb kann er das Band nie zu schmal beschneiden. Die drei ">" sind die gemessene Tiefe: .fx-header -> Wrapper -> sticky-Box -> DIESES Element. Feste Tiefe wie in Sektion 59, damit nichts auf weitere Vorfahren durchschlaegt. clip, NICHT hidden: hidden macht die andere Achse automatisch scrollbar, das Element wuerde zum Scroll-Container und koennte das Sticky-Verhalten des Headers stoeren. clip erzeugt keinen Scroll-Container. MERKE: Inline-Styles sind im Portal per CSP gesperrt - Tests dieser Art im Browser nur ueber insertRule in ein geladenes Stylesheet, style.setProperty wird geblockt. */ :has(> * > * > .fx-header){ overflow-x:clip !important; } .fx-partner-bg::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw; margin-left:-50vw; /* Verlauf beginnt bei REINEM WEISS (2026-08-11), damit oben keine Kante zur Seite entsteht - vorher startete er mit #f5efe7 und setzte sich sichtbar ab. Von dort laeuft er durch einen warmen Ton ins helle Blaugrau, das auch die Karten und Felder rahmen. ENTWICKLUNG (vier Anlaeufe, damit niemand die Runden wiederholt): 1. rein kuehl, sehr zart -> wirkte deplatziert, "wie ein Schatten" 2. warm ab 34%, Fuss #dde4ea -> NIE SICHTBAR GEWESEN (kaputter Kommentar, s.u.) 3. #f2e7d6 ab 26% -> zu kraeftig, Streifen wurde zum Blickfang 4. diese Fassung -> dazwischen, mit fliessendem Farbwechsel FLIESSENDER UEBERGANG: Der Wechsel warm -> kuehl war als Kante sichtbar, weil der Verlauf zwischen zwei FARBFAMILIEN springt und dazwischen nur einen Stopp hatte. Jetzt fuehrt eine Bruecke ueber neutrale Toene: #fbf7f0 warm (R 11 ueber B) #f8f7f4 fast neutral, minimal warm (R 4 ueber B) #f4f5f7 fast neutral, minimal kuehl (B 3 ueber R) #edf0f4 kuehl (B 7 ueber R) #e2e8ee kuehl, tiefer (B 12 ueber R) Der Farbcharakter kippt dadurch nicht an einer Stelle, sondern wandert. AUSLAUF NACH OBEN (fuenfter Anlauf): Der Verlauf endete oberhalb der Logos abrupt, weil er exakt an der Oberkante des Blocks begann und keine Strecke zum Ausklingen hatte. Deshalb padding-top 100 statt 40 (s. Regel darueber) UND die Stopps nach hinten verschoben: reines Weiss bis 18%, warmer Ton erst bei 42% - genau dort, wo die Logos anfangen. Der Weg von Weiss nach Warm ist damit rund dreimal so lang. STELLSCHRAUBEN, falls nochmal justiert wird: padding-top = Laenge des Auslaufs oben (mehr = weicher, s. Regel darueber) #fbf7f0 = Waerme oben (dunkler = warmer/praesenter) #e2e8ee = Fuss unten (dunkler = mehr Gewicht) 18% = Ende des reinen Weiss (kleiner = Verlauf setzt frueher ein) Die drei mittleren Stopps NICHT einzeln anfassen - sie bilden die Bruecke. MERKSATZ: Praesenz kommt von unten. Wer am ANFANG des Verlaufs dreht, holt sich sofort die Kante zurueck, die wir hier beseitigt haben. FALLE (2026-08-11, eine Stunde gekostet): Der Kommentar-Anfang hier war ein BACKSLASH-Stern statt Schraegstrich-Stern. Der Kommentar wurde dadurch nie geoeffnet, der Parser las die Zeilen als eine fehlerhafte Deklaration und verschluckte dabei genau die background-Zeile mit - z-index danach griff wieder, weil er hinter dem naechsten Semikolon steht. Symptom war deshalb kein Fehler, sondern "backgroundImage: none" bei sonst funktionierender Regel. Bei "Regel greift teilweise" immer die Zeichen VOR der fehlenden Deklaration pruefen. */ background:linear-gradient(180deg,#ffffff 0%,#ffffff 18%,#fbf7f0 42%,#f8f7f4 55%,#f4f5f7 66%,#edf0f4 80%,#e2e8ee 100%); z-index:-1; } .fx-partner-bg img{ height:50px !important; width:auto !important; max-width:none !important; } .fx-partner-logos{ width:100% !important; align-self:stretch !important; display:flex !important; justify-content:space-between !important; align-items:center !important; flex-wrap:wrap !important; row-gap:20px; } @media (max-width:768px){ .fx-partner-logos{ justify-content:center !important; column-gap:28px !important; } .fx-partner-bg img{ height:40px !important; } } /* ===================================================================== 12 USE-CASE-DETAIL ===================================================================== */ /* ----- Block 1: Kopf ----- */ .fx-uc-head{ max-width:1050px !important; margin:0 auto !important; padding:8px 0 24px !important; display:flex !important; gap:40px !important; align-items:flex-start !important; } .fx-uc-head__main{ flex:1 1 auto !important; min-width:0 !important; } .fx-uc-eyebrow{ color:#1c8fd6 !important; font-weight:700 !important; font-size:15px !important; margin:0 0 8px !important; } .fx-uc-title{ color:#12233a !important; font-size:34px !important; font-weight:700 !important; line-height:1.25 !important; margin:0 0 16px !important; } .fx-uc-sub{ color:#3a4756 !important; font-size:16px !important; line-height:1.5 !important; margin:0 !important; } .fx-uc-meta{ flex:0 0 auto !important; width:240px !important; align-items:flex-start !important; justify-content:flex-end !important; } .fx-uc-logo img{ height:56px !important; width:auto !important; display:block !important; } .fx-uc-branche{ text-align:right !important; min-width:0 !important; } .fx-uc-branche__label{ color:#12233a !important; font-weight:700 !important; font-size:14px !important; margin:0 0 4px !important; } .fx-uc-branche__value{ color:#1c8fd6 !important; font-weight:700 !important; font-size:14px !important; margin:0 !important; white-space:normal !important; line-height:1.5 !important; } /* ----- Block 2: Problem/Umsetzung + Nutzen-Card ----- */ .fx-uc-body{ max-width:1050px !important; margin:0 auto !important; padding:8px 0 28px !important; display:flex !important; gap:40px !important; align-items:flex-start !important; } .fx-uc-body__main{ flex:1 1 58% !important; min-width:0 !important; } .fx-uc-h3{ color:#12233a !important; font-weight:700 !important; font-size:15px !important; margin:0 0 4px !important; } .fx-uc-text{ color:#3a4756 !important; font-size:14px !important; line-height:1.7 !important; margin:0 0 22px !important; } .fx-uc-text p{ margin:0 0 12px !important; } .fx-uc-text p:last-child{ margin-bottom:0 !important; } .fx-uc-benefit{ flex:0 0 38% !important; background:linear-gradient(160deg,#ffffff 0%,#eef3f9 100%) !important; border:1px solid #e6edf5 !important; border-radius:12px !important; box-shadow:0 14px 34px rgba(20,40,80,.14) !important; padding:24px !important; gap:2px !important; } .fx-uc-benefit__lead{ color:#12233a !important; font-size:15px !important; line-height:1.5 !important; margin:0 0 12px !important; } .fx-uc-benefit__lead p{ margin:0 !important; } .fx-uc-benefit__lead p:first-child{ margin:0 0 4px !important; } .fx-uc-benefit__list{ color:#3a4756 !important; font-size:13.5px !important; line-height:1.6 !important; margin:0 !important; } .fx-uc-benefit__list:empty{ display:none !important; } /* Icon: getipptes „☑" ausblenden, Outline-Haken per SVG */ .fx-uc-benefit__icon{ font-size:0 !important; line-height:0 !important; margin:0 0 6px !important; } .fx-uc-benefit__icon::before{ content:"" !important; display:inline-block; width:26px; height:26px; margin-left:-3px; background:center/contain no-repeat; background-image:url("data:image/svg+xml;utf8,"); } /* ----- Block 3: Zitat-Banner ----- */ .fx-uc-quote{ max-width:1050px !important; margin:0 auto !important; background:linear-gradient(110deg,#0a2f6e 0%,#0a53ad 55%,#1a6fd0 100%) !important; border-radius:12px !important; box-shadow:0 10px 26px rgba(20,40,80,.18) !important; padding:16px 32px !important; } .fx-uc-quote__text{ color:#ffffff !important; font-size:17px !important; font-style:italic !important; font-weight:500 !important; line-height:1.5 !important; margin:0 !important; text-align:center !important; } /* ----- Block 4: Bild-Slideshow (JS-Karussell, feste Bildfläche) ----- */ .fx-uc-slider{ max-width:760px !important; margin:0 auto !important; padding:24px 0 !important; } .fx-uc-slider__main{ display:flex !important; align-items:center !important; gap:8px !important; } .fx-uc-track{ flex:1 1 auto !important; min-width:0 !important; overflow:hidden !important; } .fx-uc-slide{ display:none !important; } .fx-uc-slide.is-active{ display:block !important; animation:fxSlideFade .45s ease !important; } @keyframes fxSlideFade{ from{ opacity:0; transform:translateX(28px); } to{ opacity:1; transform:translateX(0); } } /* feste Bildfläche → Quer- und Hochformat skalieren gleich (contain, kein Verzerren/Beschneiden) */ .fx-uc-slide__img img{ width:100% !important; height:380px !important; object-fit:contain !important; background:transparent !important; border-radius:0 !important; display:block !important; box-shadow:none !important; } .fx-uc-slide__cap{ text-align:center !important; color:#12233a !important; font-size:15px !important; font-weight:600 !important; margin-top:12px !important; } .fx-uc-arrow{ flex:0 0 auto !important; box-sizing:border-box !important; cursor:pointer !important; user-select:none !important; width:38px !important; height:38px !important; border-radius:50% !important; background:linear-gradient(90deg,#003eab 0%,#00a9eb 100%) !important; color:#fff !important; font-size:22px !important; line-height:1 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding-bottom:3px !important; } .fx-uc-arrow--prev{ padding-right:3px !important; } .fx-uc-arrow--next{ padding-left:3px !important; } .fx-uc-arrow.is-hidden{ display:none !important; } .fx-uc-thumbs{ display:flex !important; gap:10px !important; justify-content:center !important; flex-wrap:wrap !important; margin-top:14px !important; } .fx-uc-thumb{ display:none !important; } .fx-uc-thumb.is-shown{ display:block !important; } .fx-uc-thumb img{ width:64px !important; height:48px !important; object-fit:cover !important; border-radius:4px !important; cursor:pointer !important; opacity:.55 !important; border:1px solid #dfe4ea !important; } .fx-uc-thumb.is-active img{ opacity:1 !important; outline:2px solid #0f7bd1 !important; } .fx-uc-nav{ margin:28px 0 0 !important; align-items:center !important; } .fx-uc-nav__link{ color:#0f5bbf !important; font-weight:700 !important; font-size:15px !important; cursor:pointer !important; } .fx-uc-nav__btn{ background:linear-gradient(180deg,#12539f,#0a2c63) !important; color:#fff !important; font-weight:700 !important; font-size:15px !important; padding:12px 28px !important; border-radius:6px !important; cursor:pointer !important; } /* ----- Native Vor/Zurück-Navigation (Kollegen-Komponente) an Screenshot-1-Look ----- */ .fx-ucnav{ margin-top:28px !important; } /* Vor/Zurück = blaue Text-Links (inkl. Pfeil-Icons) */ .fx-ucnav__link{ color:#0f5bbf !important; font-weight:700 !important; font-size:15px !important; text-transform:none !important; } .fx-ucnav__link:hover{ background:transparent !important; } .fx-ucnav__link .MuiSvgIcon-root{ color:#0f5bbf !important; } /* Mitte „Zur Übersicht" = dunkelblauer Verlaufs-Button */ .fx-ucnav__btn{ background:linear-gradient(90deg,#003eab 0%,#00a9eb 100%) !important; color:#fff !important; font-weight:700 !important; font-size:15px !important; text-transform:none !important; padding:12px 28px !important; border-radius:6px !important; box-shadow:none !important; } .fx-ucnav__btn:hover{ background:linear-gradient(90deg,#00317f 0%,#0092c9 100%) !important; box-shadow:none !important; } /* Editor-Hinweis (Modell … Datensätze) ausblenden */ .fx-ucnav .MuiTypography-caption{ display:none !important; } /* ===================================================================== 13 VERANSTALTUNGEN (Liste + Detail) ===================================================================== */ /* ----- Liste: zwei Zonen + Grids ----- */ .fx-evt-2zone{ max-width:none !important; margin:0 !important; } .fx-evt-2zone > *{ display:grid !important; grid-template-columns:2fr 1fr !important; gap:40px !important; align-items:start !important; } .fx-evt-upcoming > *:not(h2){ display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; grid-auto-rows:440px !important; gap:14px !important; align-content:start !important; } .fx-evt-past > *:not(h2){ display:grid !important; grid-template-columns:1fr !important; grid-auto-rows:440px !important; gap:14px !important; align-content:start !important; } /* zwei Record-Grids nebeneinander – links 2/3 (Kommende), rechts 1/3 (Vergangene) */ .fx-evt-split{ max-width:none !important; margin:0 !important; } .fx-evt-split > *{ display:grid !important; grid-template-columns:2fr 1fr !important; gap:40px !important; align-items:start !important; } /* Spaltenüberschriften – gleiches Raster wie die Karten */ .fx-evt-heads{ max-width:none !important; margin:0 0 4px !important; width:100% !important; } .fx-evt-heads > *{ display:grid !important; grid-template-columns:2fr 1fr !important; gap:40px !important; width:100% !important; } .fx-evt-head{ margin:0 !important; padding-bottom:10px !important; border-bottom:2px solid #dfe4ea !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; font-size:18px !important; } .fx-evt-head p{ width:fit-content !important; margin:0 !important; color:var(--fx-black) !important; } @media (max-width:1000px){ .fx-evt-2zone > *{ grid-template-columns:1fr !important; } .fx-evt-2zone{ grid-template-columns:1fr !important; } } @media (max-width:620px){ .fx-evt-upcoming > *{ grid-template-columns:1fr !important; } .fx-evt-upcoming{ grid-template-columns:1fr !important; } } /* ----- Detail: Kopf ----- */ .fx-evd-head{ max-width:1050px !important; margin:0 auto !important; padding:8px 0 24px !important; } .fx-evd-title, .fx-evd-title *{ background-image:linear-gradient(90deg,#003eab 0%,#00a9eb 100%) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; color:transparent !important; } .fx-evd-title{ font-size:34px !important; font-weight:700 !important; line-height:1.2 !important; margin:0 0 14px !important; width:fit-content !important; max-width:100% !important; } .fx-evd-termin{ color:#1c8fd6 !important; font-size:17px !important; font-weight:700 !important; line-height:1.4 !important; margin:0 0 16px !important; } .fx-evd-lead{ color:#12233a !important; font-size:16px !important; font-weight:700 !important; line-height:1.5 !important; margin:0 0 12px !important; } .fx-evd-desc{ color:#3a4756 !important; font-size:14px !important; line-height:1.7 !important; margin:0 !important; } .fx-evd-date{ display:none !important; } /* ----- Detail: gerenderter Body ----- */ .fx-evd-content{ max-width:1050px !important; margin:0 auto !important; } .fx-evd-content h1{ color:#12233a !important; font-size:28px !important; font-weight:700 !important; line-height:1.25 !important; margin:28px 0 12px !important; } .fx-evd-content h2{ color:#12233a !important; font-size:22px !important; font-weight:700 !important; line-height:1.3 !important; margin:26px 0 10px !important; } .fx-evd-content h3{ color:#12233a !important; font-size:18px !important; font-weight:700 !important; margin:20px 0 8px !important; } .fx-evd-content p{ color:#3a4756 !important; font-size:15px !important; line-height:1.7 !important; margin:0 0 14px !important; } .fx-evd-content a{ color:#0f7bd1 !important; } .fx-evd-content strong, .fx-evd-content b{ color:#12233a !important; } /* Listen */ .fx-evd-content ul, .fx-evd-content ol{ margin:8px 0 18px !important; padding-left:22px !important; } .fx-evd-content li{ color:#3a4756 !important; font-size:15px !important; line-height:1.6 !important; margin:0 0 6px !important; } /* Agenda-Tabelle – Grau/Weiß im Wechsel (Zebra) */ .fx-evd-content table{ width:100% !important; border-collapse:collapse !important; margin:14px 0 24px !important; font-size:14px !important; border:1px solid #e6e8eb !important; border-radius:10px !important; overflow:hidden !important; } .fx-evd-content thead, .fx-evd-content tr:has(> th){ display:none !important; } .fx-evd-content td{ padding:14px 16px !important; border:0 !important; border-bottom:1px solid #eceef0 !important; color:#3a4756 !important; vertical-align:top !important; } .fx-evd-content tbody tr:last-child td{ border-bottom:0 !important; } .fx-evd-content tbody tr:nth-child(odd) td{ background:#ffffff !important; } .fx-evd-content tbody tr:nth-child(even) td{ background:#f5f6f8 !important; } .fx-evd-content td:first-child, .fx-evd-content th:first-child{ white-space:nowrap !important; width:120px !important; } .fx-evd-content td:first-child{ font-weight:700 !important; color:#12233a !important; } /* ===================================================================== 14 ONLINE-DOKU (Doku-Kacheln) ===================================================================== */ .fx-doccard{ display:flex !important; flex-direction:column !important; height:100% !important; padding:26px 26px 20px !important; border-radius:12px !important; background:linear-gradient(160deg,#e8f1fb 0%,#f5f9fd 45%,#ffffff 100%) !important; box-shadow:0 10px 26px rgba(20,40,80,.08) !important; transition:box-shadow .25s ease, transform .25s ease; } .fx-doccard:hover{ box-shadow:0 16px 34px rgba(20,40,80,.16) !important; transform:translateY(-4px); } .fx-doccard__logo{ margin:0 0 4px !important; } .fx-doccard__logo img{ height:46px !important; width:auto !important; max-width:80% !important; object-fit:contain !important; display:block !important; } .fx-doccard__tagline{ color:#5a6875 !important; font-size:13px !important; font-weight:600 !important; margin:0 0 16px !important; } .fx-doccard__text{ color:#3a4756 !important; font-size:14px !important; line-height:1.6 !important; margin:0 !important; flex:1 1 auto !important; } .fx-doccard__actions{ margin-top:16px !important; display:flex !important; justify-content:flex-end !important; } .fx-doccard__cta .MuiButton-root, .fx-doccard__cta.MuiButtonBase-root, .fx-doccard__cta button{ background:none !important; box-shadow:none !important; border:0 !important; padding:0 !important; min-width:0 !important; color:#0f7bd1 !important; font-weight:700 !important; font-size:14px !important; text-transform:none !important; } /* Breite Logos optisch verkleinern (sie wirken bei gleicher Höhe größer) */ .fx-doccard__logo--sm img{ height:40px !important; } /* ===================================================================== 15 VERSIONS-SEITE (Kopf + Tabelle) ===================================================================== */ /* ----- Kopf (Text links, Logo rechts oben) ----- */ .fx-vhead{ max-width:1050px !important; margin:0 auto !important; padding:8px 0 24px !important; display:flex !important; justify-content:space-between !important; align-items:flex-start !important; gap:40px !important; } .fx-vhead__text{ flex:1 1 auto !important; min-width:0 !important; } .fx-vhead__logo{ flex:0 0 auto !important; } .fx-vhead__logo img{ height:54px !important; width:auto !important; max-width:220px !important; object-fit:contain !important; display:block !important; } /* ----- Tabelle (Kachel-Raster im List-Modus) ----- */ /* Kopfzeile wie Ticket-Tabelle: transparent, nur dünne Linie darunter (kein gefüllter Balken) */ .fx-vtable__head-standalone{ border:0 !important; border-bottom:1px solid #e6e8eb !important; border-radius:0 !important; background:transparent !important; } /* Raster = Tabellenkörper: randlos (nur Zebra + Zeilenlinien), wie Ticket-Tabelle */ .fx-vtable{ border:0 !important; border-radius:0 !important; overflow:hidden !important; } /* Breite begrenzen + zentrieren (Kopf + Körper gleich → Kanten fluchten mit Header) */ .fx-vtable__head-standalone, .fx-vtable{ width:100% !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; } /* Gemeinsamer Wrap-Container um Kopf + Tabelle -> beide exakt gleich breit -> Spalten fluchten */ .fx-vtable-wrap{ width:100% !important; max-width:1100px !important; margin-left:auto !important; margin-right:auto !important; padding:0 !important; } .fx-vtable-wrap > *{ width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; } /* innere Container: keine Polsterung, kein Abstand zwischen den Zeilen, Reihenfolge umgedreht */ .fx-vtable > *{ padding:0 !important; } .fx-vtable *:has(> * > .fx-vtable__row){ gap:0 !important; padding:0 !important; display:flex !important; flex-direction:column-reverse !important; } /* Kachel-Wrapper "entkleiden" → nur noch Zeile + Trennlinie + Zebra */ .fx-vtable *:has(> .fx-vtable__row){ box-shadow:none !important; border:0 !important; border-top:1px solid #eceef0 !important; border-radius:0 !important; margin:0 !important; padding:0 !important; width:100% !important; box-sizing:border-box !important; } .fx-vtable *:has(> .fx-vtable__row):last-child{ border-top:0 !important; } .fx-vtable *:has(> .fx-vtable__row):nth-child(odd){ background:#ffffff !important; } .fx-vtable *:has(> .fx-vtable__row):nth-child(even){ background:#f5f6f8 !important; } /* Zeile = Flex, jede Spalte gleich breit */ .fx-vtable__row{ display:flex !important; align-items:stretch !important; width:100% !important; gap:0 !important; } /* alle Spalten exakt gleich breit (Kopf + Daten identisch -> Ueberschrift zentral ueber Daten) */ .fx-vtable__row > *{ flex:0 0 20% !important; width:20% !important; max-width:20% !important; min-width:0 !important; box-sizing:border-box !important; } /* Link-Wrapper: Button linksbündig statt zentriert */ .fx-vtable__row > *:has(> .fx-vtable__link){ display:flex !important; justify-content:center !important; align-items:center !important; padding:14px 18px !important; } /* Kopfzeile: transparent, klein/fett/grau wie Ticket-Tabelle */ .fx-vtable__row--head{ background:transparent !important; } .fx-vtable__row--head .fx-vtable__cell{ font-weight:700 !important; color:#3a4756 !important; font-size:13px !important; padding:6px 18px 12px !important; } /* Zellen: linksbündig, gleiche Polsterung */ .fx-vtable__cell{ padding:14px 18px !important; font-size:14px !important; color:#3a4756 !important; display:flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; min-width:0 !important; } /* Link-Zellen (Startseite/Changelog) = schlichte blaue Links, Polsterung macht der Wrapper */ .fx-vtable__link{ background:none !important; box-shadow:none !important; color:#0f7bd1 !important; font-weight:700 !important; text-transform:none !important; justify-content:center !important; padding:0 !important; margin:0 !important; min-width:0 !important; min-height:0 !important; } /* ===================================================================== 16 SHOP-DETAILSEITE (fx-shopd) HINWEIS: v1 (Basis) und v2 (Variablen-Umbau) sind BEWUSST getrennt. v2 überschreibt v1 gezielt per Kaskade; zusammenführen würde die Optik minimal ändern (u.a. td-über-tr-Painting bei der Zebra-Tabelle). Reihenfolge daher NICHT umstellen: v1 vor v2 vor Empfehlungen/Galerie. ===================================================================== */ /* ----- 16a Basis-Layout (v1) ----- */ .fx-shopd{ max-width:1050px !important; margin:0 auto !important; } .fx-shopd__top{ display:flex !important; gap:40px !important; align-items:flex-start !important; } .fx-shopd__img{ flex:0 0 30% !important; max-width:30% !important; } .fx-shopd__img > *{ width:100% !important; } .fx-shopd__img img{ width:100% !important; height:auto !important; border:0 !important; border-radius:14px !important; background:#fff !important; object-fit:contain !important; display:block !important; box-shadow:0 10px 28px rgba(20,40,80,.12) !important; } .fx-shopd__info{ flex:1 1 auto !important; min-width:0 !important; max-width:640px !important; } .fx-shopd__artnr{ font-size:12.5px !important; color:#8a97a4 !important; font-weight:700 !important; letter-spacing:.03em !important; text-transform:uppercase !important; margin:0 0 6px !important; } .fx-shopd__artnr::before{ content:"Art.-Nr. " !important; } .fx-shopd__title{ font-size:26px !important; color:#12233a !important; line-height:1.2 !important; margin:0 0 14px !important; } .fx-shopd__subhead{ font-size:15px !important; color:#12233a !important; margin-top:8px !important; } .fx-shopd__desc{ font-size:15px !important; color:#3a4756 !important; line-height:1.7 !important; margin:0 !important; } /* Technische Merkmale = HTML-Tabelle aus {record.tech_merkmale} → Look wie Ticket-Tabelle (randlos, Zebra, luftig); Key/Value ohne Kopfzeile → linke Spalte kräftig/dunkel */ .fx-shopd table{ width:100% !important; border-collapse:collapse !important; border:0 !important; margin:8px 0 0 !important; } .fx-shopd table td, .fx-shopd table th{ border:0 !important; padding:16px !important; font-size:13.5px !important; font-weight:400 !important; color:#3a4756 !important; text-align:left !important; vertical-align:top !important; } .fx-shopd table td:first-child, .fx-shopd table th:first-child{ color:#12233a !important; font-weight:700 !important; width:38% !important; } .fx-shopd table tr:nth-child(odd) td{ background:#ffffff !important; } .fx-shopd table tr:nth-child(even) td{ background:#f7f8fa !important; } .fx-shopd table tr{ border:0 !important; } .fx-shopd table tr:last-child td{ border-bottom:1px solid #eceef0 !important; } .fx-shopd__specs{ border-top:0 !important; padding-top:0 !important; } .fx-shopd__specs-title{ font-size:20px !important; color:#12233a !important; margin-bottom:8px !important; } .fx-shopd__specs-group{ font-size:15px !important; color:#12233a !important; margin:18px 0 4px !important; } .fx-shopd__specs-row{ display:flex !important; gap:16px !important; padding:10px 0 !important; border-bottom:1px solid #eceef0 !important; } .fx-shopd__specs-label{ flex:0 0 40% !important; color:#6b7684 !important; font-size:14px !important; } .fx-shopd__specs-value{ flex:1 1 auto !important; color:#1f2a37 !important; font-size:14px !important; } @media (max-width:820px){ .fx-shopd__top{ flex-direction:column !important; } .fx-shopd__img{ flex-basis:auto !important; max-width:100% !important; } } /* ----- 16b Variablen-Struktur (v2, überschreibt v1 gezielt) ----- */ /* Kopfbereich: Bild schmaler, Info breiter (statt 50/50) */ .fx-shopd__top{ align-items:flex-start !important; } .fx-shopd__img{ flex:0 0 40% !important; max-width:420px !important; } .fx-shopd__info{ flex:1 1 auto !important; min-width:0 !important; } .fx-shopd__img img{ width:100% !important; height:auto !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; } /* Info-Spalte: Typografie */ .fx-shopd__artnr{ font-size:13px !important; color:#6b7280 !important; margin:0 0 4px !important; } .fx-shopd__title{ font-size:26px !important; font-weight:700 !important; line-height:1.2 !important; color:#1c2330 !important; margin:0 0 12px !important; } .fx-shopd__short{ font-size:15px !important; line-height:1.55 !important; color:#333 !important; margin:0 0 16px !important; } /* "Dazu passende Produkte": Ueberschrift per ::before, nur wenn Text gepflegt ist */ .fx-shopd__passt:empty{ display:none !important; } .fx-shopd__passt:not(:empty){ font-size:15px !important; line-height:1.55 !important; color:#333 !important; margin:0 0 16px !important; } .fx-shopd__passt:not(:empty)::before{ content:"Dazu passende Produkte"; display:block; margin:0 0 6px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#0a2f6e; } /* Langbeschreibung: eigener breiter Block ueber den Techn. Daten, zweispaltig (wie Mockup) */ .fx-shopd__desc{ font-size:15px !important; line-height:1.6 !important; color:#333 !important; columns:2 !important; column-gap:44px !important; margin-top:24px !important; } .fx-shopd__desc > *{ break-inside:avoid; } .fx-shopd__desc p{ margin:0 0 10px !important; } .fx-shopd__desc p:empty{ display:none !important; } .fx-shopd__desc ul{ margin:0 0 10px !important; padding-left:20px !important; } .fx-shopd__desc li{ margin:0 0 4px !important; } .fx-shopd__desc li p{ margin:0 !important; } /* Technische Daten: Titel + Zebra-Tabelle (gescopt auf fx-shopd__specs) */ .fx-shopd__specs{ margin-top:24px !important; } /* Abstand Karten -> "Technische Daten" = Abstand Fließtext -> "Dazu passende Produkte" (24px) */ .fx-shopd__specs-title{ font-size:20px !important; font-weight:700 !important; color:#1c2330 !important; margin:0 0 12px !important; } .fx-shopd__specs table{ width:100% !important; border-collapse:collapse !important; } .fx-shopd__specs tr:nth-child(odd){ background:#ffffff !important; } .fx-shopd__specs tr:nth-child(even){ background:#f5f6f8 !important; } .fx-shopd__specs td{ padding:12px 16px !important; font-size:14px !important; line-height:1.45 !important; vertical-align:top !important; border:0 !important; } .fx-shopd__specs td:first-child{ font-weight:700 !important; color:#222 !important; width:38% !important; } .fx-shopd__specs td:last-child{ color:#333 !important; } /* ----- 16c Empfehlungs-Karten „Dazu passende Produkte" ----- */ /* Ganzen Block (Überschrift + Liste inkl. "Keine Einträge") ausblenden, wenn keine Empfehlungs-Karte vorhanden ist */ .fx-shopd__recos:not(:has(.fx-shopd__reco-card)){ display:none !important; } .fx-shopd__recos-title{ font-size:20px !important; font-weight:700 !important; color:#1c2330 !important; margin:0 0 12px !important; } /* Schatten 2026-08-10 entfernt (Wunsch: wirkte zwischen den Karten unruhig). Abgrenzung leistet jetzt allein der Rahmen. Bewusst hier an der Kartenklasse und nicht nur im Carousel, damit 3 Karten und 4+ Karten gleich aussehen. */ .fx-shopd__reco-card{ background:#fff !important; border:1px solid #e6eaf0 !important; border-radius:12px !important; padding:16px !important; box-sizing:border-box !important; height:100% !important; display:flex !important; flex-direction:column !important; text-decoration:none !important; box-shadow:none !important; } /* Sichtbarer Fokus fuer die Tastatur (2026-08-13): Die Karte ist ein DIV, das unser JS per tabindex bedienbar macht. Ohne eigene Fokus-Anzeige waere der Tabstopp unsichtbar - dann koennte man zwar hinspringen, saehe aber nicht, wo man ist. focus-visible statt focus: erscheint nur bei Tastatur-Bedienung, nicht bei Mausklick. */ .fx-shopd__reco-card:focus-visible{ outline:2px solid #003eab !important; outline-offset:2px !important; } .fx-shopd__reco-img, .fx-shopd__reco-card img{ display:block !important; width:100% !important; height:160px !important; object-fit:contain !important; object-position:center !important; margin:4px 0 16px !important; } .fx-shopd__reco-name{ font-size:15px !important; font-weight:700 !important; color:#1c2330 !important; line-height:1.3 !important; margin:0 !important; } .fx-shopd__reco-artnr{ font-size:13px !important; color:#8a94a3 !important; margin:5px 0 0 !important; } /* verstecktes ID-Feld pro Karte (Ziel fuer den Klick, per JS recoLinks() gelesen) */ .fx-shopd__reco-id{ display:none !important; } /* Empfehlungs-Carousel (JS shopdRecoNav, ab >3 Karten): Wrapper + ‹ ›-Pfeile. Gleiche Regel wie bei der Bildergalerie, nur waagerecht. Die Pfeile teilen sich bewusst die Klasse .fx-galarrow mit der Galerie, damit sie identisch aussehen - gedreht werden sie nur innerhalb von .fx-galwrap, hier bleiben sie also ‹ ›. */ .fx-recowrap{ display:flex !important; align-items:center !important; gap:8px !important; } /* Der Track bekommt Breite und Ueberlauf per JS - hier nur sicherstellen, dass die native Umbruch-Regel (zweite Reihe) nicht dagegenhaelt. Das Padding fuer den Kartenschatten ist am 2026-08-10 wieder entfallen - der Schatten ist weg, also gibt es nichts mehr, was der Ueberlauf abschneiden koennte. */ .fx-recowrap > *:not(.fx-galarrow){ flex:0 0 auto !important; min-width:0 !important; } /* Alle Karten gleich hoch. Ohne das bleibt eine Karte mit EINZEILIGEM Namen kuerzer als ihre zweizeiligen Nachbarn und sitzt mittig - genau der Unterschied, der an der linken Karte aufgefallen ist. Die Kette ist dreistufig: Item streckt sich auf die Zeilenhoehe, Karte fuellt das Item. .fx-shopd__reco-card bringt aus Sektion 16c height:100% mit, was hier ins Leere greift, weil das Item keine feste Hoehe hat -> auf auto + flex umstellen. */ .fx-recowrap > *:not(.fx-galarrow) > *{ align-self:stretch !important; height:auto !important; display:flex !important; } .fx-recowrap .fx-shopd__reco-card{ height:auto !important; flex:1 1 auto !important; } /* ----- 16d „Beschreibung"-Ueberschrift (volle Breite via column-span) ----- */ .fx-shopd__desc::before{ content:"Beschreibung"; display:block; column-span:all; -webkit-column-span:all; font-size:20px !important; font-weight:700 !important; color:#1c2330 !important; margin:0 0 12px !important; } /* ----- 16e Weißer Hintergrund NUR auf der Shop-Detailseite ----- */ /* Theme-Blau-Wrapper (MuiBox mit .fx-shopd drin) auf Weiß */ .MuiBox-root:has(.fx-shopd){ background-color:#fff !important; } /* ----- 16f Bildergalerie (Thumbnails unter dem Hauptbild) ----- */ /* Thumbnail-Leiste: alle Thumbs in einer Reihe unter dem Hauptbild */ .fx-shopd__img :has(> .fx-shopd__gallery-thumb){ display:flex !important; flex-wrap:wrap !important; gap:10px !important; margin-top:14px !important; } /* einzelnes Thumbnail: klein, gerahmt, klickbar */ .fx-shopd__gallery-thumb{ flex:0 0 auto !important; width:88px !important; height:88px !important; padding:4px !important; background:#fff !important; border:1px solid #e6eaf0 !important; border-radius:8px !important; box-sizing:border-box !important; cursor:pointer !important; transition:border-color .15s ease, box-shadow .15s ease !important; } .fx-shopd__gallery-thumb img{ width:100% !important; height:100% !important; object-fit:contain !important; display:block !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; } .fx-shopd__gallery-thumb:hover{ border-color:#00a9eb !important; } /* aktives Thumbnail (später per JS, wenn Klick das Hauptbild tauscht) */ .fx-shopd__gallery-thumb.fx-active{ border-color:#003eab !important; box-shadow:0 0 0 2px rgba(0,169,235,.35) !important; } /* Zoom-Cursor auf Hauptbild + Thumbnails (Klick öffnet Lightbox per JS) */ .fx-shopd__img img{ cursor:zoom-in !important; } /* Hauptbild FESTE Groesse (nur das Hauptbild, nicht die Thumbnails) -> beim Hover-Wechsel kein Layout-Sprung und kein Flackern; alle Bilder skalieren gleich (contain). */ .fx-shopd__img img{ height:400px !important; width:100% !important; object-fit:contain !important; } /* Thumbnails wieder auf ihre kleine Groesse (spezifischer -> gewinnt, kein komplexes :not noetig) */ .fx-shopd__gallery-thumb img{ height:100% !important; width:100% !important; } /* Thumbnail-Carousel (JS shopdGalleryNav, ab >3 Bildern): Wrapper + ‹ ›-Pfeile */ .fx-galwrap{ display:flex !important; align-items:center !important; gap:8px !important; margin-top:14px !important; } .fx-galwrap :has(> .fx-shopd__gallery-thumb){ margin-top:0 !important; } /* Item-Abstand raus (macht der Wrapper) */ /* Slim/moderne Pfeile: nur der Glyph im FASTEC-Verlauf, KEIN Kreis/Rahmen. Gilt fuer Use-Case-Slideshow (.fx-uc-arrow) UND Shop-Galerie (.fx-galarrow); ueberschreibt den gefuellten Kreis-Look aus Sektion 12. */ .fx-uc-arrow, .fx-galarrow{ background:none !important; border:0 !important; box-shadow:none !important; width:auto !important; height:auto !important; min-width:0 !important; padding:2px 6px !important; font-size:30px !important; line-height:1 !important; cursor:pointer !important; user-select:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; background-image:linear-gradient(90deg,#003eab 0%,#00a9eb 100%) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; color:transparent !important; transition:opacity .15s ease !important; } .fx-uc-arrow svg, .fx-galarrow svg{ fill:#00a9eb !important; } /* falls der Pfeil ein SVG-Icon ist -> sichtbar */ .fx-uc-arrow:hover:not(.is-hidden), .fx-galarrow:hover:not(:disabled){ opacity:.6 !important; } .fx-galarrow:disabled{ opacity:.25 !important; cursor:default !important; } .fx-uc-arrow.is-hidden{ display:none !important; } /* ----- 16g Bildergalerie LINKS vertikal (ueberschreibt 16f-Horizontal) ----- */ /* Bildspalte horizontal: Thumbnails links (vertikale Spalte), Hauptbild rechts */ .fx-shopd__img{ display:flex !important; flex-direction:row-reverse !important; align-items:center !important; gap:16px !important; flex:0 0 48% !important; max-width:560px !important; } .fx-shopd__img > *{ width:auto !important; } /* 100%-Regel aus 16a aufheben */ /* Thumb-Zweig (direkter Kind-Div, der die Thumbs ENTHAELT = css-e7z54b) -> schmale VERTIKALE Spalte links */ .fx-shopd__img > *:has(.fx-shopd__gallery-thumb){ flex:0 0 auto !important; flex-direction:column !important; flex-wrap:nowrap !important; gap:10px !important; margin:0 !important; } /* Hauptbild-Zweig = restliche Breite, Bild gross */ .fx-shopd__img > *:not(:has(.fx-shopd__gallery-thumb)){ flex:1 1 auto !important; min-width:0 !important; } .fx-shopd__img > *:not(:has(.fx-shopd__gallery-thumb)) img{ width:100% !important; height:400px !important; object-fit:contain !important; } /* Carousel-Wrapper vertikal + Pfeile hoch/runter drehen (‹ › gedreht) */ .fx-galwrap{ flex-direction:column !important; align-items:center !important; margin-top:0 !important; } .fx-galwrap .fx-galarrow{ transform:rotate(90deg) !important; } /* ===================================================================== 17 IMPRESSUM (statisch) ===================================================================== */ .fx-imp{ max-width:1050px !important; margin:0 auto !important; padding:8px 0 32px !important; } .fx-imp__h1{ color:#0f5bbf !important; font-size:26px !important; font-weight:700 !important; margin:0 0 8px !important; } .fx-imp__h2{ color:#0f5bbf !important; font-size:16px !important; font-weight:700 !important; margin:0 0 6px !important; } .fx-imp__text{ color:#3a4756 !important; font-size:15px !important; line-height:1.7 !important; margin:0 !important; } .fx-imp__text a{ color:#0f7bd1 !important; } /* ===================================================================== 18 TICKET-KACHEL (native portal_tickets_tile) im Dark-Card-Look ===================================================================== */ .fx-ticketcard{ background:linear-gradient(150deg,#0a53ad 0%,#0a2f6e 100%) !important; height:260px !important; padding:20px !important; border-radius:10px !important; box-shadow:0 6px 18px rgba(20,40,80,.08) !important; display:flex !important; flex-direction:column !important; overflow:hidden !important; } /* Paper + evtl. Zwischen-Container entkleiden → Inhalt sitzt ganz oben */ .fx-ticketcard > *, .fx-ticketcard .MuiPaper-root, .fx-ticketcard .MuiBox-root, .fx-ticketcard .MuiStack-root{ background:transparent !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; margin:0 !important; } /* Titel-Zeile als kleine Eyebrow (wie „MEIN SYSTEM"); line-height stramm, sonst schiebt MUIs 1.6er Zeilenhöhe den Text nach unten */ .fx-ticketcard .MuiTypography-h6{ color:#c3d6f2 !important; font-size:11px !important; font-weight:700 !important; letter-spacing:.08em !important; text-transform:uppercase !important; line-height:1.2 !important; margin:0 0 6px !important; } /* „Noch keine Tickets." als großer weißer Titel */ .fx-ticketcard .MuiTypography-body2{ color:#ffffff !important; font-size:18px !important; font-weight:700 !important; margin:0 0 8px !important; } /* Link direkt darunter, oben gepackt (nicht unten) */ .fx-ticketcard .MuiButton-text{ color:#ffffff !important; text-transform:none !important; font-weight:700 !important; font-size:13.5px !important; padding:0 !important; min-width:0 !important; margin-top:0 !important; align-self:flex-start !important; } .fx-ticketcard .MuiButton-text:hover{ background:transparent !important; } /* ===================================================================== 19 TICKET-TABELLE (native „Meine Tickets (Tabelle)", Klasse fx-tickettable) – Optik wie Mockup: luftige Zeilen, Zebra, schlichte fette Kopfzeile, randlos. Spalten/Überschriften bleiben die echten aus dem Block. ===================================================================== */ .fx-tickettable{ max-width:none !important; margin:0 !important; } /* umschließenden Paper-Container (outlined) entkleiden → randlos wie Mockup */ .fx-tickettable .MuiTableContainer-root{ border:0 !important; box-shadow:none !important; border-radius:0 !important; background:transparent !important; } /* Tabelle randlos, volle Breite (echtes = MUI-Table) */ .fx-tickettable table, .fx-tickettable .MuiTable-root{ width:100% !important; border-collapse:collapse !important; border:0 !important; } /* Kopfzeile: klein, fett, grau, linksbündig, feine Linie darunter */ .fx-tickettable thead th, .fx-tickettable .MuiTableCell-head{ background:transparent !important; border:0 !important; border-bottom:1px solid #e6e8eb !important; color:#3a4756 !important; font-weight:700 !important; font-size:13px !important; text-align:left !important; padding:0 16px 12px !important; white-space:nowrap !important; } /* Datenzellen: luftig, dezent grau, normale Schrift (auch Betreff nicht fett – wie Mockup) */ .fx-tickettable tbody td, .fx-tickettable .MuiTableCell-body{ border:0 !important; padding:18px 16px !important; font-size:13.5px !important; font-weight:400 !important; color:#3a4756 !important; vertical-align:middle !important; } /* Zebra – ungerade weiß, gerade hellgrau (Zell-Hintergrund schlägt MUI-Row-Hover) */ .fx-tickettable tbody tr:nth-child(odd) td{ background:#ffffff !important; } .fx-tickettable tbody tr:nth-child(even) td{ background:#f7f8fa !important; } /* keine Zeilen-Rahmen; feine Abschlusslinie unten */ .fx-tickettable tbody tr{ border:0 !important; } .fx-tickettable tbody tr:last-child td{ border-bottom:1px solid #eceef0 !important; } /* ===================================================================== 20 DOKU-VIEWER (portal_docs, Klasse fx-docviewer) – Vollbild-Viewer Ziel: Doku volle Breite/Höhe, nur eigener Scroll (TOC + Inhalt), Portal-Footer + Seiten-Scroll auf DIESER Seite aus. Seiten-Erkennung per :has(.fx-docviewer) → kein JS nötig. HINWEIS: 96px-Fallback = Kopfbereich; --fx-doctop wird per JS gesetzt. ===================================================================== */ /* Footer nur auf der Doku-Seite aus */ body:has(.fx-docviewer) .fx-footer{ display:none !important; } body:has(.fx-docviewer) .MuiBox-root:has(> .fx-footer){ display:none !important; } /* ⚠ DRITTE ZEILE NOETIG (gemessen 2026-08-13): Die beiden Regeln darueber verstecken den Inhalt, aber NICHT das