/* Theme Name: Zebra Labs Theme URI: https://zebra-labs.example/ Author: Zebra Digital Labs Description: FSE Block-Theme für Zebra Digital Labs. CSS ist nach Block / Part / Pattern gesplittet, sodass nur die Stile geladen werden, die auf der aktuellen Seite tatsächlich gebraucht werden. Version: 1.0.12 Requires at least: 6.4 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: zebra-labs Tags: full-site-editing, block-patterns, custom-colors, custom-typography */ /* ============================================ CORE Global resets, design tokens, typography, container and shared utility classes. Block-specific CSS lives under blocks//style.css and is auto-enqueued only on pages that contain that block. Section-style CSS for sections that are still inside the startseite pattern lives in patterns/css/legacy-sections.css and is enqueued only when the pattern renders. ============================================ */ @font-face{ font-family:"Bowlby One"; src:url("assets/fonts/BowlbyOne-Regular.woff2") format("woff2"), url("assets/fonts/BowlbyOne-Regular.ttf") format("truetype"); font-weight:400;font-style:normal;font-display:swap; } /* ---- Smooth Scroll ------------------------- */ html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* ---- Anchor offset (fixed header) ---------- */ /* --header-h wird per JS dynamisch gesetzt (shrink-aware). Fallback 148px. */ [id]{scroll-margin-top:var(--header-h,148px)} @media (max-width:900px){[id]{scroll-margin-top:var(--header-h,94px)}} /* ---- Design tokens ------------------------- */ :root{ --c-primary:#F7DB08; --c-black:#000000; --c-white:#FFFFFF; --c-dark-bg:#1A1A1A; --c-soft-bg:#f2f2f2; --c-muted:#555555; --c-line:#e6e6e6; --ff-display: "Bowlby One", "Bebas Neue", Arial Black, sans-serif; --ff-body: "Montserrat", "Poppins", Arial, sans-serif; --fs-display-xxl: clamp(48px, 6.5vw, 100px); --fs-display-xl: clamp(38px, 4.5vw, 72px); --fs-h2: clamp(30px, 2.8vw, 46px); --fs-h3: clamp(20px, 1.6vw, 28px); --fs-eyebrow: 13px; --fs-body: 15px; --fs-body-lg: 17px; --fs-small: 12px; --xs:8px; --sm:16px; --md:24px; --lg:40px; --xl:60px; --xxl:80px; --section-pad:60px; --container:1240px; --gutter:32px; --r-sm:0; --r-md:0; } /* ---- Mobile spacing tokens ----------------- */ @media (max-width: 780px){ :root{ --section-pad: 40px; --xxl: 56px; --xl: 40px; --lg: 28px; --md: 20px; --gutter: 20px; } } /* ---- Reset + body -------------------------- */ *{box-sizing:border-box} html,body{margin:0;padding:0} /* Horizontalen Ueberlauf unterdruecken, ohne position:fixed zu beschaedigen. * * overflow-x:hidden auf dem Wurzelelement macht zu einem Scroll-Container. * Mobile Safari positioniert position:fixed-Elemente dann relativ zum DOKUMENT * statt zum Viewport. Bei top:0 (Header) faellt das kaum auf, bei bottom:24px * (#zebra-top) landet das Element am Seitenende und ist praktisch unsichtbar. * * overflow-x:clip clippt ohne Scroll-Container und hat den Nebeneffekt nicht. * Die hidden-Zeile bleibt als Fallback fuer Browser ohne clip-Support stehen. */ html{overflow-x:hidden;overflow-x:clip} body{ font-family:var(--ff-body); font-size:var(--fs-body); font-weight:400; color:var(--c-black); background:var(--c-white); line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* Sicherheitsnetz gegen horizontalen Ueberlauf, vererbt an alles. Deutsche Komposita ("Produktinformationsmanagement") passen auf Mobil nicht in eine Zeile. Ein einziges solches Wort irgendwo auf der Seite macht das Dokument breiter als den Viewport — und weil .site-header position:fixed ist, zieht die Kopfzeile auf Mobil mit und schiebt den Burger aus dem Bild. Der Fehler zeigt sich also weit weg von seiner Ursache, deshalb hier global statt block fuer block. overflow-wrap wirkt nur, wenn ein Wort tatsaechlich nicht passt. */ overflow-wrap:break-word; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit} .container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)} /* ---- Typography (shared by all sections) --- */ .display-xxl, .display-xl, .h2, .h3, .eyebrow{ font-family:var(--ff-display); font-weight:400; text-transform:uppercase; line-height:1.02; margin:0; } .display-xxl{font-size:var(--fs-display-xxl);letter-spacing:-.005em;line-height:.95} .display-xl {font-size:var(--fs-display-xl); letter-spacing:0;line-height:.96} .h2 {font-size:var(--fs-h2); letter-spacing:0.05em;line-height:1.3} .h3 {font-size:var(--fs-h3); letter-spacing:.01em;color:var(--c-primary)} .eyebrow{ font-family:var(--ff-body); font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.22em; text-transform:uppercase; } p{margin:0 0 var(--sm)} .lede{font-size:var(--fs-body-lg);color:#222;max-width:82ch} .muted{color:var(--c-muted)} /* ---- Shared sticker / mascot effect -------- */ .zebra-sticker, .hero-mascot img, .svc-icon img, .welcome-mascot, .case-illu img, .follow-zebra img, .brand-logo{ filter: drop-shadow( 2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow( 0 2px 0 #fff) drop-shadow( 0 -2px 0 #fff) drop-shadow( 2px 2px 0 #fff) drop-shadow(-2px 2px 0 #fff) drop-shadow( 2px -2px 0 #fff) drop-shadow(-2px -2px 0 #fff) drop-shadow(0 12px 16px rgba(0,0,0,.35)); } .brand-logo{height:46px;width:auto;display:block} .follow-zebra{ width:54px;height:54px;border-radius:50%;background:#fff; display:inline-flex;align-items:center;justify-content:center; vertical-align:middle; } .follow-zebra img{width:78%;height:auto;display:block} /* ---- Layout resets (remove WP default gaps) */ /* wp-block-group generell NICHT resetten — Gutenberg schreibt Spacing-Controls als Inline-Style direkt aufs Element; unser !important würde das blockieren. Stattdessen nur die Theme-eigenen Main-Wrapper nullen (.zebra-main-wrapper), die per Template-Klasse identifiziert werden. */ .wp-site-blocks, .zebra-main-wrapper, .wp-block-post-content{ padding:0!important; margin:0!important; } .wp-site-blocks > *, .zebra-main-wrapper > *, .wp-block-post-content > *{ margin-block-start:0!important; margin-block-end:0!important; } /* ---- Buttons (shared across blocks) -------- */ .btn-zebra{ display:inline-block;padding:14px 28px;background:#000;color:var(--c-primary); font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase; border:1.5px solid #000; } .btn-zebra:hover{background:var(--c-primary);color:#000} .btn-zebra.inverse{background:var(--c-primary);color:#000;border-color:var(--c-primary)} .btn-zebra.inverse:hover{background:#000;color:var(--c-primary)} .btn-zebra.outline{background:transparent;color:#fff;border-color:#fff} .btn-zebra.outline:hover{background:#fff;color:#000} /* ---- Scroll cue (shared between sections) -- */ .scroll-cue{ position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:3; width:46px;height:46px;border-radius:50%;background:#fff;color:#000; display:grid;place-items:center;animation:bob 2.4s ease-in-out infinite; } @keyframes bob{50%{transform:translate(-50%,8px)}} /* ---- Fixed-Header Offset ---- */ /* Header: 84px (top) + 54px (nav) = 138px. WP setzt auf html.admin-bar margin-top:32px (Desktop) / 46px (Mobile). .site-header top muss ebenfalls den Admin-Bar-Offset kennen. */ body{padding-top:138px} @media (max-width:900px){body{padding-top:84px}} /* Admin-Bar: WP schiebt html um 32px runter → header top:32px, body +32px */ .admin-bar .site-header{top:32px} @media (max-width:782px){ .admin-bar .site-header{top:46px} .admin-bar body{padding-top:130px} } /* ---- Textseiten-Template (Impressum, Datenschutz, etc.) ---- */ .page-content-wrap{padding:var(--xxl) 0} /* Seitlicher Abstand fuer den Inhalts-Container von Textseiten. * * Der Editor setzt auf diese Gruppe `has-global-padding`. Diese Klasse zieht * ihren Wert aus `--wp--style--root--padding-*`, und die Variable existiert * hier nicht: theme.json hat `useRootPaddingAwareAlignments: true`, aber kein * `styles.spacing.padding`. Die Klasse loest damit auf 0 auf. * * Auf Desktop faellt das nicht auf, weil das Constrained-Layout den Text * ohnehin zentriert (gemessen: left=170 bei 1440). Auf Mobil ist die * Inhaltsbreite groesser als der Viewport — dann bleibt links nichts uebrig * und der Text klebt am Rand. * * Bewusst NICHT ueber theme.json geloest: `styles.spacing.padding` wuerde * Root-Padding fuer alle Seiten setzen und die randlosen Sektionen der * Startseite und Loesungen-Seite einruecken, die nicht `alignfull` sind. * Deshalb hier, auf `.page-template-default` begrenzt und mit demselben * Gutter wie `.container`. */ .page-template-default .entry-content > .has-global-padding, .page-template-default .wp-block-post-content > .has-global-padding{ padding-left:var(--gutter); padding-right:var(--gutter); } /* Abstände für Core-Blöcke auf Textseiten (Datenschutz, Impressum …) Nur auf body.page-template-default, damit Custom-Block-Seiten (Startseite, Lösungen …) nicht beeinflusst werden. */ .page-template-default .wp-block-post-content > *, .page-template-default .entry-content > * { margin-block-start: revert !important; margin-block-end: revert !important; } .page-template-default .wp-block-post-content h2, .page-template-default .entry-content h2 { margin-top: 2.4rem !important; margin-bottom: 0.5rem !important; } .page-template-default .wp-block-post-content h3, .page-template-default .entry-content h3 { margin-top: 1.8rem !important; margin-bottom: 0.35rem !important; } .page-template-default .wp-block-post-content h4, .page-template-default .entry-content h4 { margin-top: 1.4rem !important; margin-bottom: 0.25rem !important; } .page-template-default .wp-block-post-content p, .page-template-default .entry-content p { margin-top: 0 !important; margin-bottom: 0.85rem !important; } /* Dasselbe für den Block-Editor (iframe-Body hat keine page-template-default-Klasse, stattdessen: .editor-styles-wrapper.post-type-page) */ .editor-styles-wrapper.post-type-page .wp-block-post-content > *, .editor-styles-wrapper.post-type-page .block-editor-block-list__layout > * { margin-block-start: revert !important; margin-block-end: revert !important; } .editor-styles-wrapper.post-type-page h2 { margin-top: 2.4rem !important; margin-bottom: 0.5rem !important; } .editor-styles-wrapper.post-type-page h3 { margin-top: 1.8rem !important; margin-bottom: 0.35rem !important; } .editor-styles-wrapper.post-type-page h4 { margin-top: 1.4rem !important; margin-bottom: 0.25rem !important; } .editor-styles-wrapper.post-type-page p { margin-top: 0 !important; margin-bottom: 0.85rem !important; } /* ---- Breakout: Zebra-Blöcke mit containerWidth="full" ---- */ /* Bricht aus dem page-content-wrap/.container raus — volle Viewport-Breite */ .zebra-block--full{ width:100vw; margin-inline:calc(50% - 50vw); } /* ---- KI MAG Artikel-Body (auch wenn blog-hero als wp:html gespeichert) ---- */ .kma-article-body { background: #fff !important; } /* ---- Back to top button ---- */ #zebra-top{ position:fixed; bottom:24px; right:24px; z-index:999; width:44px; height:44px; background:#000; color:var(--c-primary); border:none; cursor:pointer; display:grid; place-items:center; opacity:0; pointer-events:none; transition:opacity .25s ease, background .2s ease; } #zebra-top.is-visible{ opacity:1; pointer-events:auto; } #zebra-top:hover{ background:var(--c-primary); color:#000; } #zebra-top svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:square; }