/* ==== ZB GLOBAL (Fonts & Typo) – letzte CSS-Datei im ==== */ /* 1) Lokale Satoshi Variable-Fonts */ @font-face { font-family: "Satoshi"; src: url("/assets/fonts/satoshi/Satoshi-Variable.woff2") format("woff2-variations"); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: "Satoshi"; src: url("/assets/fonts/satoshi/Satoshi-VariableItalic.woff2") format("woff2-variations"); font-weight: 300 900; font-style: italic; font-display: swap; } /* 2) Basis-Font definieren (Bootstrap + eigene Helfer) */ :root{ --bs-font-sans-serif: "Satoshi", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; } html { font-size: 20px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Base = 20px */ body{ margin: 0; font-family: var(--bs-font-sans-serif) !important; font-size: 1rem; /* 20px */ line-height: 1.5; /* global 1.5x */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Theme-Fonts auf Basis zwingen */ .mbr-fonts-style, [class*="mbr-"], [class*="mobirise"], p, a, li, button, input, textarea, select, label, .btn, .card, .dropdown-menu, .modal, .alert, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6, .display-7 { font-family: var(--bs-font-sans-serif) !important; } /* 4) Type-Scale */ h1, .display-1 { font-size: 2.4rem; letter-spacing: -0.02em; line-height: 1; font-weight: 700; } h2, .display-2 { font-size: 2.0rem; letter-spacing: -0.015em; line-height: 1.1; font-weight: 700; } h3, .display-3 { font-size: 1.6rem; letter-spacing: -0.01em; line-height: 1.2; font-weight: 600; } h4, .display-4 { font-size: 1.25rem; letter-spacing: -0.005em; line-height: 1.3; font-weight: 600; } /* Displays auf die Skala mappen / Fließtext */ .display-5 { font-size: 1.125rem; line-height: 1.5; letter-spacing: 0; font-weight: 500; } .display-6, .display-7 { font-size: 1rem; line-height: 1.5; letter-spacing: 0; font-weight: 500; } /* 5) Icon-Fonts nicht überschreiben */ .mbr-iconfont, [class*=" mbr-iconfont"], .mobi-mbri { font-family: "Moririse2" !important; font-style: normal; } /* 6) Responsive Medien und Container */ img, svg, video, canvas { max-width: 100%; height: auto; } iframe { max-width: 100%; } table { width: 100%; border-collapse: collapse; } .container, .wrapper, .content { width: min(100%, var(--content-max, 1200px)); margin-inline: auto; padding-inline: 1rem; } /* 7) Layout-Fallen */ img[width][height]{ height: auto; } body{ overflow-wrap: anywhere; word-break: normal; } /* === NAVBAR: einheitliche Größe + Gewicht (menu1) === */ .menu1 .navbar .navbar-caption, .menu1 .navbar .navbar-brand, .menu1 .navbar .nav-link { font-family: var(--bs-font-sans-serif) !important; font-weight: 700 !important; /* gleich wie Brand, konsistent */ font-size: clamp(.95rem, 1.6vw, 1.05rem) !important; /* gleiche Größe */ line-height: 1.25 !important; letter-spacing: 0 !important; } /* Theme hart neutralisieren */ .menu1 .navbar .navbar-brand .navbar-caption { font-weight: 700 !important; } /* Gleiche Optik bei Hover/Active */ .menu1 .navbar .nav-link:hover, .menu1 .navbar .nav-link:focus, .menu1 .navbar .nav-link.active { font-weight: 500 !important; } /* === header01-4c: Tag unter Titel/Subtitel linksbündig / #header01-4c .content-wrapper { text-align: left !important; } #header01-4c .tag-wrapper { text-align: left !important; /* safety, falls auf dem Wrapper gesetzt ist */ } #header01-4c .tag-wrapper > p{ display: flex; !important position: relative; !important text-align: left; !important align-items: center; /* vertikal optisch zentriert, falls Icon/Badge dabei */ margin: 0; /* Zusatzabstände eliminieren */ padding-top: 3px; !important padding-right: 0px; padding-bottom: 3px; !important padding-left: 0px; max-width: max-content; /* Breite = Content; verhindert „Strecken“ */ font-size: clamp(0.85rem, 2.6vw, 1rem);/* skaliert leicht nach unten, um Umbruch zu vermeiden */ letter-spacing: inherit; line-height: 1.2; } /* === Features06-3d: kompakter & mobil sauber ===================== */ section#features06-3d{ padding-top: 1.25rem; padding-bottom: 1.75rem; } /* Spaltenabstände kleiner */ section#features06-3d .items-wrapper { margin: 0 -6px; } section#features06-3d .items-wrapper > [class*="col-"] { padding: 0 6px; } @media (min-width: 768px){ section#features06-3d .items-wrapper { margin: 0 -8px; } section#features06-3d .items-wrapper > [class*="col-"] { padding: 0 8px; } } /* Karten: weniger Außenabstand */ section#features06-3d .item{ margin-bottom: 12px; } @media (min-width: 992px){ section#features06-3d .item{ margin-bottom: 16px; } } /* Innenabstände + Höhe der Card */ section#features06-3d .item .item-wrapper{ height: auto; /* weg von fixer Höhe */ padding: 16px; display: flex; align-items: flex-start; /* Text startet oben */ } @media (min-width: 768px){ section#features06-3d .item .item-wrapper{ padding: 18px; } } @media (min-width: 992px){ section#features06-3d .item .item-wrapper{ padding: 20px; } } /* Bildbereich: mobil schlanker */ section#features06-3d .item .item-wrapper .item-img{ height: auto; position: relative; } @media (max-width: 575.98px){ section#features06-3d .item .item-wrapper .item-img{ height: 180px; } } @media (min-width: 576px) and (max-width: 991.98px){ section#features06-3d .item .item-wrapper .item-img{ height: 200px; } } section#features06-3d .item .item-wrapper .item-img img{ position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; } /* Typo: Text nicht mehr 50% breit */ section#features06-3d .card-box .text-wrap .card-text{ display: block; width: 100% !important; /* überschreibt die 50%-Breite */ margin-bottom: 0; } section#features06-3d .card-title{ margin-bottom: 10px; } /* Nummer: mobil links, Desktop rechts */ section#features06-3d .card-number{ text-align: left; margin-top: 6px; } @media (min-width: 992px){ section#features06-3d .card-number{ text-align: right; margin-top: 0; } } /* Harte Mindesthöhen killen */ section#features06-3d .card_1, section#features06-3d .card_2, section#features06-3d .card_3, section#features06-3d .card_4, section#features06-3d .card_5, section#features06-3d .features-image .item-wrapper{ min-height: auto !important; } /* Optional: XS-Feinschliff für bessere Lesbarkeit */ @media (max-width: 575.98px){ section#features06-3d .card-title{ font-size: 1.1rem; } section#features06-3d .card-text{ font-size: 0.95rem; } } /* features06-3d: Bildspalte entfernen */ #features06-3d .features-image { display: none !important; } .why-important .card, .why-us .card { border-radius: 10px; border:1px solid rgba(0,0,0,.08); } !important .logo-strip img { opacity:.85; filter:grayscale(100%); transition:opacity .2s ease; } .logo-strip img:hover { opacity:1; filter:none; } .trusted-by .badge { border-radius: 10px; } !important /* Logoleiste strikt auf Icon-Höhe begrenzen */ #why-us .logo-strip { display:flex; flex-wrap:wrap; align-items:center; gap:12px; } #why-us .logo-strip img{ height:28px !important; /* ZIELHÖHE */ width:auto !important; /* Breite aus Höhe ableiten */ max-width:none !important; /* überschreibt evtl. 100% Regeln */ object-fit:contain; display:inline-block; /* falls global block + width:100% gesetzt ist */ }