/* * Brunner theme — main stylesheet. * Hand-authored CSS (no build step required). If you later add Sass/PostCSS, * compile into this file and keep the enqueue handle "brunner-main". */ /* --------------------------------------------------------------------------- * Design tokens — Brunner brand * ------------------------------------------------------------------------- */ :root { --brunner-orange: #f59c00; --brunner-orange-dark: #c47c00; --brunner-orange-light: #ffb733; --brunner-navy: #004366; --brunner-navy-dark: #00314c; --brunner-navy-light: #1d5e80; --color-primary: var(--brunner-orange); --color-primary-hover: var(--brunner-orange-dark); --color-secondary: var(--brunner-navy); --color-secondary-hover: var(--brunner-navy-dark); --color-ink: #1a1a1a; --color-slate: #4a5568; --color-muted: #718096; --color-line: #e2e8f0; --color-surface: #f7f8fa; --color-white: #ffffff; --color-bg: #eef1f5; /* soft page background (not stark white); flips in dark mode */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --container-max: 1200px; --space: 1rem; --radius: 8px; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); } /* --------------------------------------------------------------------------- * Base * ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-sans); color: var(--color-ink); line-height: 1.6; background: var(--color-bg); } a { color: var(--color-primary-hover); } img { max-width: 100%; height: auto; } .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; z-index: 1000; } /* --------------------------------------------------------------------------- * Buttons * ------------------------------------------------------------------------- */ .btn { display: inline-block; padding: .65rem 1.4rem; border-radius: var(--radius); font-weight: 600; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .btn--primary { background: var(--color-primary); color: #fff; } .btn--primary:hover { background: var(--color-primary-hover); } .btn--ghost { border-color: var(--color-primary); color: var(--color-primary-hover); background: transparent; } .btn--ghost:hover { background: var(--color-primary); color: #fff; } /* --------------------------------------------------------------------------- * Header * ------------------------------------------------------------------------- */ .site-header { border-bottom: 1px solid var(--color-line); background: #fff; } .site-header__inner { display: flex; align-items: center; gap: 1.5rem; padding-block: .75rem; } .site-branding { display: flex; align-items: center; } .site-logo { display: inline-flex; } .site-logo img, .custom-logo { display: block; height: auto; width: auto; max-height: 48px; } .site-title { font-weight: 700; font-size: 1.5rem; color: var(--brunner-navy); text-decoration: none; } .main-navigation { margin-inline-start: auto; } .main-navigation ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; } .main-navigation a { text-decoration: none; color: var(--color-ink); font-weight: 500; } .main-navigation a:hover { color: var(--color-primary-hover); } .site-header__actions { display: flex; align-items: center; gap: 1.1rem; } .header-cart, .header-account { display: inline-flex; align-items: center; gap: .4rem; color: var(--color-ink); text-decoration: none; font-weight: 500; } .header-cart:hover, .header-account:hover { color: var(--color-primary-hover); } .header-cart { position: relative; } .header-cart .icon, .header-account .icon { width: 24px; height: 24px; vertical-align: middle; } .header-account .icon { fill: currentColor; } .header-cart .icon path { stroke-width: 2.2; } /* crisper cart outline, matches nav weight */ /* Mobile menu button: hidden on desktop, hamburger on small screens. */ .menu-toggle { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; background: none; border: 0; color: var(--color-ink); cursor: pointer; } .menu-toggle::before { content: ""; width: 22px; height: 2px; background: currentColor; box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor; } .cart-count { position: absolute; top: -7px; inset-inline-end: -9px; display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: .7rem; font-weight: 700; line-height: 1; } /* --------------------------------------------------------------------------- * Hero & front-page sections * ------------------------------------------------------------------------- */ /* Hero — dark navy stage with an animated droplet backdrop. */ .hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3.5rem, 8vw, 6.5rem); color: #fff; background: radial-gradient(90% 90% at 88% 6%, rgba(245, 156, 0, .30) 0%, rgba(245, 156, 0, 0) 50%), radial-gradient(80% 120% at 0% 100%, rgba(29, 94, 128, .6) 0%, rgba(29, 94, 128, 0) 55%), linear-gradient(135deg, #04223a 0%, #013a59 48%, #05243d 100%); } /* Faint halftone dot field (a print motif) fading in from the top-right. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .11) 1.3px, transparent 1.5px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(120% 100% at 92% 8%, #000 0%, transparent 68%); mask-image: radial-gradient(120% 100% at 92% 8%, #000 0%, transparent 68%); } .hero__inner { position: relative; z-index: 1; } .hero__eyebrow { color: var(--brunner-orange-light); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; margin: 0 0 1rem; } .hero__title { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.08; margin: 0 0 1.1rem; max-width: 18ch; font-weight: 800; } .hero__kw { color: var(--brunner-orange); text-decoration: none; white-space: nowrap; background-image: linear-gradient(var(--brunner-orange), var(--brunner-orange)); background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .25s ease; } .hero__kw:hover, .hero__kw:focus-visible { background-size: 100% 2px; } .hero__lead { color: rgba(255, 255, 255, .82); max-width: 56ch; font-size: 1.075rem; margin: 0 0 2rem; } /* The two-door wayfinder. */ .hero__doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; max-width: 760px; } .door { display: flex; align-items: center; gap: 1.1rem; padding: 1.4rem 1.6rem; border-radius: 18px 18px 18px 4px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease; } .door:hover, .door:focus-visible { transform: translateY(-4px); background: rgba(255, 255, 255, .13); border-color: var(--brunner-orange); box-shadow: 0 14px 34px rgba(0, 0, 0, .3); } .door__drop { flex: 0 0 auto; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 0 50% 50% 50%; color: #fff; } .door__drop .icon { width: 25px; height: 25px; fill: currentColor; } .door--shop .door__drop .icon { fill: none; } /* cart icon is stroked, not filled */ .door--shop .door__drop { background: var(--brunner-orange); } .door--systeme .door__drop { background: #2a7aa6; } .door__text { display: flex; flex-direction: column; gap: .2rem; } .door__title { font-weight: 700; font-size: 1.1rem; } .door__desc { color: rgba(255, 255, 255, .72); font-size: .9rem; } .door__arrow { margin-inline-start: auto; font-size: 1.3rem; transition: transform .25s ease; } .door:hover .door__arrow, .door:focus-visible .door__arrow { transform: translateX(4px); } /* Two-column hero layout + bento photo collage. */ .hero__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; } @media (min-width: 880px) { .hero__grid { grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 4vw, 3.5rem); } } .hero__media { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .9rem; } .hero__tile { display: block; position: relative; overflow: hidden; margin: 0; background: #fff; aspect-ratio: 1 / 1; box-shadow: 0 10px 30px rgba(0, 0, 0, .28); transition: transform .3s ease, box-shadow .3s ease; text-decoration: none; } .hero__tile:nth-child(1) { border-radius: 20px 20px 20px 4px; } .hero__tile:nth-child(2) { border-radius: 20px 4px 20px 20px; } .hero__tile:nth-child(3) { border-radius: 4px 20px 20px 20px; } .hero__tile:nth-child(4) { border-radius: 20px 20px 4px 20px; } .hero__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .hero__tile:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(0, 0, 0, .34); } .hero__tile:hover img { transform: scale(1.06); } .hero__media-drop { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); background: var(--brunner-orange); border-radius: 0 50% 50% 50%; border: 4px solid var(--brunner-navy-dark); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); z-index: 2; transition: transform .35s cubic-bezier(.34, 1.4, .5, 1), border-radius .35s ease; } /* Droplet points its tip at whichever collage tile is hovered (magnetic nudge + grow). */ .hero__media:has(.hero__tile:nth-child(1):hover) .hero__media-drop { border-radius: 0 50% 50% 50%; transform: translate(calc(-50% - 7px), calc(-50% - 7px)) scale(1.12); } .hero__media:has(.hero__tile:nth-child(2):hover) .hero__media-drop { border-radius: 50% 0 50% 50%; transform: translate(calc(-50% + 7px), calc(-50% - 7px)) scale(1.12); } .hero__media:has(.hero__tile:nth-child(3):hover) .hero__media-drop { border-radius: 50% 50% 50% 0; transform: translate(calc(-50% - 7px), calc(-50% + 7px)) scale(1.12); } .hero__media:has(.hero__tile:nth-child(4):hover) .hero__media-drop { border-radius: 50% 50% 0 50%; transform: translate(calc(-50% + 7px), calc(-50% + 7px)) scale(1.12); } /* Slideshow tile: stacked images cross-fading (cycled by main.js). */ .hero__tile--slideshow .hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease, transform .5s ease; } .hero__tile--slideshow .hero__slide.is-active { opacity: 1; } /* Free sample-print offer band. */ .sample-cta { background: linear-gradient(135deg, var(--brunner-navy) 0%, var(--brunner-navy-dark) 100%); color: #fff; } .sample-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; padding-block: clamp(2rem, 4vw, 3rem); flex-wrap: wrap; } .sample-cta__text { max-width: 60ch; } .sample-cta__eyebrow { color: var(--brunner-orange-light); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; margin: 0 0 .4rem; } .sample-cta__title { margin: 0 0 .6rem; font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: #fff; line-height: 1.2; } .sample-cta__desc { margin: 0; color: rgba(255, 255, 255, .85); line-height: 1.6; } .sample-cta__btn { flex: 0 0 auto; } .portal-tiles { padding-block: 3rem; } .portal-tiles__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; } .portal-tile { display: block; padding: 1.5rem; border: 1px solid var(--color-line); border-radius: var(--radius); text-decoration: none; color: inherit; background: #fff; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .portal-tile:hover, .portal-tile:focus-visible { border-color: var(--color-primary); box-shadow: var(--shadow-card); transform: translateY(-3px); } .portal-tile__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .portal-tile__title { margin: 0; color: var(--color-secondary); font-size: 1.15rem; } .portal-tile:hover .portal-tile__title, .portal-tile:focus-visible .portal-tile__title { color: var(--color-primary-hover); } .portal-tile__arrow { color: var(--color-primary); font-size: 1.2rem; line-height: 1; opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease; } .portal-tile:hover .portal-tile__arrow, .portal-tile:focus-visible .portal-tile__arrow { opacity: 1; transform: translateX(0); } /* Beschreibung ist IMMER sichtbar (nicht aufklappbar) – Kundenwunsch 16.06.2026. */ .portal-tile__desc-wrap { display: block; } .portal-tile__desc { overflow: hidden; padding-top: .55rem; color: var(--color-muted); font-size: .95rem; line-height: 1.55; } .feature-grid { padding-block: 2rem; } .feature-grid__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; } .feature-grid__item { padding-inline-start: 1.5rem; position: relative; } .feature-grid__item::before { content: "✓"; color: var(--color-primary); position: absolute; inset-inline-start: 0; font-weight: 700; } .section-title { font-size: 1.5rem; margin: 0 0 1.5rem; } /* Social-proof stats band. */ .stats { padding-block: clamp(2.5rem, 5vw, 3.5rem); border-bottom: 1px solid var(--color-line); } .stats__eyebrow { text-align: center; color: var(--color-primary-hover); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; margin: 0 0 1.75rem; } .stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem 1rem; list-style: none; margin: 0; padding: 0; } .stat { text-align: center; } .stat__num { display: block; font-size: clamp(2rem, 4.5vw, 2.85rem); font-weight: 800; line-height: 1.1; color: var(--brunner-navy); font-variant-numeric: tabular-nums; } .stat__label { display: block; margin-top: .35rem; color: var(--color-muted); font-size: .95rem; } /* "Warum Brunner" value cards. */ .why { padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--color-surface); } .why__eyebrow { color: var(--color-primary-hover); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; margin: 0 0 .4rem; } .why__title { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 2rem; max-width: 24ch; } .why__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0; } .why__item { background: #fff; border: 1px solid var(--color-line); border-radius: 14px; padding: 1.75rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .why__item:hover { transform: translateY(-4px); border-color: var(--brunner-orange); box-shadow: var(--shadow-card); } .why__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 1rem; border-radius: 0 50% 50% 50%; background: rgba(245, 156, 0, .12); } .why__icon-svg { width: 26px; height: 26px; fill: none; stroke: var(--brunner-orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .why__item-title { margin: 0 0 .5rem; font-size: 1.1rem; color: var(--brunner-navy); } .why__item-desc { margin: 0; color: var(--color-slate); font-size: .95rem; } /* Cookie consent banner. */ .cookie-consent { position: fixed; inset-block-end: 1.25rem; inset-inline-start: 1.25rem; z-index: 1000; max-width: 380px; } .cookie-consent[hidden] { display: none; } .cookie-consent__inner { display: flex; gap: 1rem; padding: 1.25rem 1.4rem; background: #fff; border-radius: 16px 16px 16px 4px; box-shadow: 0 12px 40px rgba(0, 0, 0, .22); border: 1px solid var(--color-line); animation: cookie-rise .35s ease both; } .cookie-consent__drop { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 0 50% 50% 50%; background: rgba(245, 156, 0, .12); } .cookie-consent__drop svg { width: 22px; height: 22px; fill: var(--brunner-orange); } .cookie-consent__title { margin: 0 0 .25rem; font-weight: 700; color: var(--brunner-navy); } .cookie-consent__text { margin: 0 0 1rem; font-size: .9rem; color: var(--color-slate); line-height: 1.5; } .cookie-consent__actions { display: flex; gap: .6rem; flex-wrap: wrap; } .cookie-consent__actions .btn { padding: .5rem 1rem; font-size: .9rem; } @keyframes cookie-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 520px) { .cookie-consent { inset-inline: 1rem; max-width: none; } } /* Respect users who prefer reduced motion. */ @media (prefers-reduced-motion: reduce) { .droplet { animation: none; } .door, .door__arrow, .why__item, .hero__tile, .hero__tile img, .hero__slide, .hero__media-drop, .portal-tile, .portal-tile__arrow, .portal-tile__desc-wrap { transition: none; } .cookie-consent__inner { animation: none; } } /* --------------------------------------------------------------------------- * Cards & post lists * ------------------------------------------------------------------------- */ .post-list--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } .card { border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden; background: #fff; } .card__media img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .card__body { padding: 1rem 1.25rem 1.25rem; } .entry-title { font-size: 1.15rem; margin: 0 0 .5rem; } .entry-title a { color: inherit; text-decoration: none; } .entry-title a:hover { color: var(--color-primary-hover); } .entry-meta { color: var(--color-muted); font-size: .85rem; margin-bottom: .5rem; } /* --------------------------------------------------------------------------- * Download center & tickets * ------------------------------------------------------------------------- */ .download-list { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: .5rem; } .download-item__link { display: flex; flex-direction: column; padding: 1rem 1.25rem; border: 1px solid var(--color-line); border-radius: var(--radius); text-decoration: none; color: inherit; } .download-item__link:hover { border-color: var(--color-primary); } .download-item__title { font-weight: 600; } .download-item__desc { color: var(--color-muted); font-size: .9rem; } .notice { padding: 1rem 1.25rem; border-radius: var(--radius); border: 1px solid var(--color-line); background: var(--color-surface); } .notice--info { border-inline-start: 4px solid var(--color-primary); } /* --------------------------------------------------------------------------- * Legal / info pages — calm "reading card" for long-form text (better legibility * than plain white): noble tinted backdrop + framed white card, orange accent. * ------------------------------------------------------------------------- */ .legal-page { background: linear-gradient(180deg, #e4ecf2 0, #eef2f5 320px); } .legal-page .site-main { padding-block: 2.5rem 4rem; } .legal-page .breadcrumbs { margin-bottom: 1.5rem; color: var(--brunner-navy); } .legal-page .page-article { max-width: 860px; margin: 0 auto; background: #fff; border-radius: 16px; border-top: 4px solid var(--brunner-orange); padding: clamp(1.5rem, 4vw, 3.25rem); box-shadow: 0 16px 50px rgba(0, 49, 76, .12); } .legal-page .entry-header { margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-line); } .legal-page .entry-title { margin: 0; font-size: clamp(1.7rem, 3.5vw, 2.4rem); color: var(--brunner-navy); } .legal-page .entry-content { color: #2d3a44; line-height: 1.75; } .legal-page .entry-content h2 { margin-top: 2.2rem; font-size: 1.3rem; color: var(--brunner-navy); } .legal-page .entry-content h3 { margin-top: 1.6rem; font-size: 1.1rem; color: var(--brunner-navy-light); } .legal-page .entry-content a { color: var(--brunner-orange-dark); } .legal-page .entry-content p, .legal-page .entry-content li { max-width: 70ch; } /* "Back" arrow (replaces the breadcrumb path on legal pages). */ .back-btn { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--color-slate); font-weight: 600; margin-bottom: 1.5rem; } .back-btn__circle { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brunner-navy); color: #fff; transition: background-color .15s ease, transform .15s ease; } .back-btn__circle svg { width: 18px; height: 18px; } .back-btn:hover .back-btn__circle { background: var(--brunner-navy-dark); transform: translateX(-2px); } .back-btn:hover .back-btn__label { color: var(--color-ink); } /* --------------------------------------------------------------------------- * Shop (WooCommerce) * ------------------------------------------------------------------------- */ .site-main.shop { padding-block: 2.5rem 4rem; } /* Category tabs at the top of the shop. */ .shop-cats { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--color-line); } .shop-cat { padding: .55rem .1rem; color: var(--color-muted); text-decoration: none; font-weight: 600; font-size: .95rem; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s ease, border-color .15s ease; } .shop-cat:hover { color: var(--color-primary-hover); } .shop-cat.is-active { color: var(--color-ink); border-bottom-color: var(--brunner-orange); } /* Free-shipping progress bar (cart). */ .free-ship-bar { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem; } .free-ship-bar__text { margin: 0 0 .6rem; font-weight: 600; color: var(--color-ink); } .free-ship-bar__track { height: 10px; background: var(--color-line); border-radius: 999px; overflow: hidden; } .free-ship-bar__fill { height: 100%; background: linear-gradient(90deg, var(--brunner-orange), var(--brunner-orange-light)); border-radius: 999px; transition: width .4s ease; } /* Pagination — spaced from the grid + pill styling. */ .woocommerce nav.woocommerce-pagination { margin-top: 3rem; } .woocommerce nav.woocommerce-pagination ul { display: inline-flex; flex-wrap: wrap; gap: .4rem; border: 0; margin: 0; padding: 0; } .woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; overflow: visible; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 .65rem; border: 1px solid var(--color-line); border-radius: 10px; color: var(--color-ink); font-weight: 600; text-decoration: none; background: transparent; transition: border-color .15s ease, color .15s ease, background-color .15s ease; } .woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--brunner-orange); color: var(--color-primary-hover); background: transparent; } .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--brunner-orange); border-color: var(--brunner-orange); color: #fff; } /* Classic cart + checkout. */ .woocommerce-cart .site-main, .woocommerce-checkout .site-main, .woocommerce-account .site-main { padding-block: 2rem 4rem; } .woocommerce table.shop_table { border: 1px solid var(--color-line); border-radius: 14px; border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--color-surface); } .woocommerce table.shop_table th, .woocommerce table.shop_table td { border-top: 1px solid var(--color-line); padding: 1rem; } .woocommerce table.shop_table thead th { background: transparent; text-transform: uppercase; font-size: .78rem; letter-spacing: .04em; color: var(--color-muted); } .woocommerce-cart-form .product-thumbnail img, .woocommerce table.cart img { width: 92px !important; height: auto; border: 1px solid var(--color-line); border-radius: 10px; background: #fff; } .woocommerce table.cart td.product-name a { font-weight: 700; color: var(--color-ink); } .woocommerce .cart_totals h2 { font-size: 1.15rem; } .woocommerce .cart_totals table.shop_table { background: var(--color-surface); } .woocommerce .cart-collaterals .cart_totals, .woocommerce-checkout #order_review { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 14px; padding: 1.25rem 1.5rem; } .woocommerce #payment, .woocommerce-checkout #order_review_heading { margin-top: 0; } .woocommerce td.product-quantity { min-width: 130px; } .woocommerce .cart-collaterals .checkout-button { display: block; text-align: center; font-size: 1.05rem; padding: .8rem 1.4rem; } /* Quantity stepper (shop loop + cart). */ .product-actions { display: flex; align-items: center; gap: .6rem; margin-top: auto; flex-wrap: wrap; } .qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--color-line); border-radius: 10px; overflow: hidden; background: transparent; } .qty-stepper__btn { width: 34px; height: 38px; border: 0; background: transparent; color: var(--color-ink); font-size: 1.15rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; } .qty-stepper__btn:hover { color: var(--color-primary-hover); background: rgba(245, 156, 0, .12); } .qty-stepper input.qty-stepper__input { width: 46px; height: 38px; text-align: center; border: 0; border-inline: 1px solid var(--color-line); border-radius: 0; background: transparent; color: var(--color-ink); font-weight: 600; padding: 0; -moz-appearance: textfield; appearance: textfield; } .qty-stepper input.qty-stepper__input::-webkit-outer-spin-button, .qty-stepper input.qty-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Order received — thank-you banner + confetti. */ .order-thankyou { text-align: center; background: var(--color-surface); border: 1px solid var(--color-line); border-top: 4px solid var(--brunner-orange); border-radius: 16px; padding: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: 2rem; } .order-thankyou h2 { margin: 0 0 .5rem; color: var(--color-ink); font-size: clamp(1.5rem, 3vw, 2rem); } .order-thankyou p { margin: 0; color: var(--color-slate); } .confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 9999; } /* Product-specific note box (HP return credit, Memjet firmware). */ .product-note { margin: 1.1rem 0; padding: .85rem 1.1rem; border: 1px solid var(--color-line); border-inline-start: 4px solid var(--brunner-orange); border-radius: 10px; background: var(--color-surface); font-size: .92rem; line-height: 1.55; color: var(--color-slate); } .product-note strong { color: var(--color-ink); } .product-note a { color: var(--color-primary-hover); font-weight: 600; } /* Machine finder — pick a machine, see compatible products. */ .machine-finder { background: linear-gradient(135deg, var(--brunner-navy) 0%, var(--brunner-navy-dark) 100%); color: #fff; border-radius: 16px; padding: clamp(1.25rem, 3vw, 2rem); margin-bottom: 2rem; } .machine-finder__title { margin: 0 0 .35rem; color: #fff; font-size: clamp(1.2rem, 2.5vw, 1.45rem); } .machine-finder__lead { margin: 0 0 1.1rem; color: rgba(255, 255, 255, .82); font-size: .95rem; max-width: 60ch; } .machine-finder__list { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; } .machine-chip { display: inline-block; padding: .5rem 1.05rem; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); color: #fff; text-decoration: none; font-size: .9rem; font-weight: 600; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; } .machine-chip:hover { background: rgba(255, 255, 255, .2); border-color: #fff; color: #fff; transform: translateY(-1px); } .machine-chip.is-active { background: var(--brunner-orange); border-color: var(--brunner-orange); color: #fff; } .woocommerce ul.products, .woocommerce-page ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem 1.25rem; list-style: none; margin: 1.5rem 0 0; padding: 0; } /* WooCommerce's clearfix pseudo-elements become stray grid cells — hide them. */ .woocommerce ul.products::before, .woocommerce ul.products::after, .woocommerce-page ul.products::before, .woocommerce-page ul.products::after { content: none; display: none; } .woocommerce ul.products li.product { margin: 0 !important; width: auto !important; text-align: left; float: none; display: flex; flex-direction: column; height: 100%; } /* Push the add-to-cart / inquiry button to the bottom so it lines up across the row. */ .woocommerce ul.products li.product a.button, .woocommerce ul.products li.product button.button, .woocommerce ul.products li.product .brunner-inquire { margin-top: auto; align-self: flex-start; } .woocommerce ul.products li.product a img { width: 100%; height: auto; margin: 0; border: 1px solid var(--color-line); border-radius: var(--radius); background: #fff; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .98rem; font-weight: 700; color: var(--brunner-navy); margin: .65rem 0 .3rem; padding: 0; line-height: 1.3; } .product-meta { font-size: .85rem; color: var(--color-slate); line-height: 1.5; } .product-meta__sku { margin-top: .3rem; font-size: .78rem; color: var(--color-muted); } .woocommerce ul.products li.product .price { color: var(--color-ink); font-weight: 700; font-size: 1rem; margin: .45rem 0 .6rem; display: block; } .woocommerce ul.products li.product .price del { color: var(--color-muted); font-weight: 400; } .price-on-request { color: var(--brunner-navy); font-style: italic; font-weight: 600; } .woocommerce ul.products li.product .button, .woocommerce a.button, .woocommerce button.button, .brunner-inquire { display: inline-block; background: var(--color-primary); color: #fff; border: 0; border-radius: var(--radius); padding: .5rem 1rem; font-weight: 600; font-size: .9rem; text-decoration: none; cursor: pointer; transition: background-color .15s ease; } .woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--color-primary-hover); color: #fff; } .brunner-inquire { background: var(--brunner-navy); } .brunner-inquire:hover { background: var(--brunner-navy-dark); color: #fff; } /* Category headings / breadcrumb on shop */ .woocommerce .woocommerce-breadcrumb { color: var(--color-muted); font-size: .85rem; margin-bottom: 1rem; } .woocommerce .woocommerce-breadcrumb a { color: var(--brunner-navy); } @media (max-width: 1000px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 440px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- * Footer * ------------------------------------------------------------------------- */ .site-footer { margin-top: 4rem; background: var(--brunner-navy-dark); color: #cbd5e0; border-top: 3px solid var(--brunner-orange); } .site-footer a { color: #b8c7d3; text-decoration: none; transition: color .15s ease; } .site-footer a:hover { color: var(--brunner-orange-light); } /* Top area: brand column + three link columns. */ .site-footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; padding-block: 3.5rem 2.5rem; } .site-footer__logo { display: inline-block; background: #fff; padding: .5rem .8rem; border-radius: 10px; line-height: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); } .site-footer__logo img { display: block; width: 150px; height: auto; } .site-footer__address { margin-top: 1.4rem; font-style: normal; line-height: 1.9; font-size: .95rem; color: #cbd5e0; } .site-footer__address a { color: #cbd5e0; } .site-footer__fax { color: #9fb3c2; } .site-footer__col-title { margin: 0 0 1rem; font-size: 1rem; font-weight: 600; color: #fff; } .site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .site-footer__list a { font-size: .95rem; } .site-footer__note { margin: 0; padding-block: 1.25rem; font-size: .82rem; line-height: 1.6; color: #7e95a6; border-top: 1px solid rgba(255, 255, 255, .08); } .site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); } .site-footer__bottom .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.25rem; flex-wrap: wrap; } .site-footer__copyright { margin: 0; font-size: .9rem; color: #8aa0b0; } .footer-menu { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .footer-menu a { font-size: .9rem; } @media (max-width: 880px) { .site-footer__top { grid-template-columns: 1fr 1fr; gap: 2rem; } .site-footer__brand { grid-column: 1 / -1; } } @media (max-width: 540px) { .site-footer__top { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- * Responsive * ------------------------------------------------------------------------- */ @media (max-width: 768px) { .menu-toggle { display: inline-flex; } .main-navigation ul { display: none; } .main-navigation.is-open ul { display: flex; flex-direction: column; position: absolute; inset-inline: 0; top: 100%; background: #fff; padding: 1rem; border-bottom: 1px solid var(--color-line); z-index: 20; } .site-header { position: relative; } } /* --------------------------------------------------------------------------- * Dark mode — applied via the .theme-dark class on (set early by an * inline script from the saved choice, falling back to prefers-color-scheme). * The header toggle flips it. Brand orange + the dark hero/footer/finder stay. * ------------------------------------------------------------------------- */ html.theme-dark { --color-bg: #0f161e; --color-surface: #18212c; --color-ink: #e7edf3; --color-slate: #aebccb; --color-muted: #8696a5; --color-line: #2a3643; --shadow-card: 0 1px 3px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .4); } html.theme-dark .site-header { background: #131b25; } html.theme-dark .portal-tile, html.theme-dark .why__item, html.theme-dark .card, html.theme-dark .cookie-consent__inner, html.theme-dark .hero__tile { background: #1b2631; } html.theme-dark .main-navigation.is-open ul { background: #131b25; } /* The header/footer wordmark is a dark logo — keep it on a light chip. */ html.theme-dark .site-logo, html.theme-dark .custom-logo-link { background: #fff; padding: .25rem .55rem; border-radius: 8px; display: inline-block; line-height: 0; } html.theme-dark .site-footer__logo { background: #fff; } /* Navy text -> light. */ html.theme-dark .site-title, html.theme-dark .portal-tile__title, html.theme-dark .why__item-title, html.theme-dark .cookie-consent__title, html.theme-dark .stat__num, html.theme-dark .woocommerce ul.products li.product .woocommerce-loop-product__title, html.theme-dark .legal-page .entry-title, html.theme-dark .legal-page .entry-content h2 { color: #e7edf3; } html.theme-dark .legal-page .entry-content h3 { color: #c4d2de; } html.theme-dark .legal-page .entry-content { color: #c9d4de; } html.theme-dark .legal-page .breadcrumbs, html.theme-dark .woocommerce .woocommerce-breadcrumb a, html.theme-dark .price-on-request { color: var(--brunner-orange-light); } html.theme-dark .legal-page { background: linear-gradient(180deg, #0c131b 0, #0f161e 320px); } html.theme-dark .legal-page .page-article { background: #161f29; box-shadow: 0 16px 50px rgba(0, 0, 0, .5); } html.theme-dark input, html.theme-dark textarea, html.theme-dark select, html.theme-dark .woocommerce form .form-row input.input-text, html.theme-dark .woocommerce .input-text, html.theme-dark .woocommerce #coupon_code, html.theme-dark .woocommerce-cart .coupon .input-text, html.theme-dark .woocommerce .quantity .qty { background: #1b2631; color: var(--color-ink); border: 1px solid var(--color-line); } /* select2 dropdowns (Bundesland/Land) need explicit overrides in dark mode. */ html.theme-dark .select2-container--default .select2-selection--single, html.theme-dark .select2-container--default .select2-selection--multiple, html.theme-dark .select2-dropdown, html.theme-dark .select2-search__field { background: #1b2631 !important; color: var(--color-ink) !important; border-color: var(--color-line) !important; } html.theme-dark .select2-container--default .select2-selection__rendered { color: var(--color-ink); } html.theme-dark .select2-results__option { background: #1b2631; color: var(--color-ink); } html.theme-dark .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--brunner-navy-light); color: #fff; } /* Light/dark toggle button in the header. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--color-line); border-radius: 999px; background: transparent; color: var(--color-ink); cursor: pointer; transition: color .15s ease, border-color .15s ease; } .theme-toggle:hover { color: var(--color-primary-hover); border-color: var(--color-primary); } .theme-toggle .icon { width: 18px; height: 18px; } /* ============================================================================ Systeme / Anlagen — department catalogue + single machine sales page ========================================================================== */ /* Shared button extras used across the system pages. */ .btn--lg { padding: .85rem 1.6rem; font-size: 1.05rem; } .btn__icon { margin-right: .15rem; vertical-align: -2px; } /* --- Department catalogue (taxonomy-system_category) --------------------- */ .system-archive__header { max-width: 760px; margin: .5rem 0 1.75rem; } .system-archive__eyebrow { color: var(--brunner-orange); font-weight: 700; text-transform: uppercase; letter-spacing: .09em; font-size: .8rem; margin: 0 0 .4rem; } .system-archive__title { font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--brunner-navy); margin: 0 0 .6rem; line-height: 1.1; } .system-archive__lead { color: var(--color-muted); font-size: 1.08rem; line-height: 1.6; margin: 0; } .system-deptnav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.75rem; } .system-deptnav__tab { display: inline-flex; align-items: center; padding: .5rem 1.1rem; border: 1px solid var(--color-line); border-radius: 999px; color: var(--color-ink); text-decoration: none; font-weight: 600; font-size: .95rem; transition: background .15s ease, color .15s ease, border-color .15s ease; } .system-deptnav__tab:hover { border-color: var(--brunner-navy); color: var(--brunner-navy); } .system-deptnav__tab.is-active { background: var(--brunner-navy); border-color: var(--brunner-navy); color: #fff; } .system-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4rem; } .system-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow-card); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .system-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0, 67, 102, .14); border-color: var(--brunner-orange); } .system-card__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--brunner-navy); padding: 1rem; } .system-card__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .system-card__body { display: flex; flex-direction: column; gap: .45rem; padding: 1.1rem 1.2rem 1.3rem; } .system-card__name { font-weight: 700; font-size: 1.15rem; color: var(--brunner-navy); line-height: 1.2; } .system-card__lead { color: var(--color-muted); font-size: .92rem; line-height: 1.5; } .system-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: .35rem; color: var(--brunner-orange); font-weight: 700; font-size: .92rem; padding-top: .4rem; } .system-card:hover .system-card__more svg { transform: translateX(3px); } .system-card__more svg { transition: transform .18s ease; } .system-archive__empty { color: var(--color-muted); font-size: 1.05rem; padding: 2rem 0; } .system-archive__cta { margin: 3rem 0 1rem; padding: 2.2rem; text-align: center; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); } .system-archive__cta-title { color: var(--brunner-navy); font-size: 1.5rem; margin: 0 0 .5rem; } .system-archive__cta p { color: var(--color-muted); margin: 0 0 1.3rem; } /* --- Single machine sales page (single-system) -------------------------- */ .system-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; margin: .5rem 0 2.5rem; } .system-hero__media { display: flex; align-items: center; justify-content: center; background: var(--brunner-navy); border: 1px solid var(--brunner-navy); border-radius: var(--radius); padding: 1.8rem; min-height: 320px; } .system-hero__img { max-width: 100%; max-height: 460px; width: auto; height: auto; object-fit: contain; } .system-hero__depts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; } .system-badge { display: inline-flex; align-items: center; padding: .3rem .8rem; border-radius: 999px; background: rgba(0, 67, 102, .08); color: var(--brunner-navy); font-weight: 700; font-size: .8rem; text-decoration: none; } .system-badge:hover { background: var(--brunner-navy); color: #fff; } .system-hero__title { font-size: clamp(2rem, 4.5vw, 2.9rem); color: var(--brunner-navy); line-height: 1.08; margin: 0 0 .8rem; } .system-hero__lead { font-size: 1.15rem; line-height: 1.6; color: var(--color-ink); margin: 0 0 1.5rem; } .system-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1rem; } .system-hero__hint { color: var(--color-muted); font-size: .9rem; margin: 0; } .system-section { margin: 0 0 3rem; } .system-section__title { font-size: 1.6rem; color: var(--brunner-navy); margin: 0 0 1.2rem; padding-bottom: .6rem; border-bottom: 2px solid var(--color-line); } .system-highlights__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .85rem 1.6rem; } .system-highlights__item { display: flex; align-items: flex-start; gap: .7rem; line-height: 1.5; color: var(--color-ink); } .system-highlights__check { flex: 0 0 auto; color: var(--brunner-orange); margin-top: 1px; } .system-description__body { color: var(--color-ink); line-height: 1.7; font-size: 1.05rem; } .system-description__body p { margin: 0 0 1rem; } .system-datasheet { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 1.8rem 2rem; } .system-datasheet .system-section__title { border-bottom: 0; padding-bottom: 0; margin-bottom: .7rem; } .system-datasheet__text { color: var(--color-muted); line-height: 1.6; max-width: 680px; margin: 0 0 1.3rem; } .system-consumables__text { color: var(--color-muted); margin: -.4rem 0 1.3rem; } .system-consumables__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.2rem; } .system-product { display: flex; flex-direction: column; gap: .6rem; text-decoration: none; color: var(--color-ink); } .system-product__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: .8rem; transition: border-color .15s ease; } .system-product__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .system-product:hover .system-product__media { border-color: var(--brunner-orange); } .system-product__name { font-weight: 600; font-size: .92rem; line-height: 1.35; } .system-final-cta { text-align: center; padding: 2.6rem 2rem; background: var(--brunner-navy); border-radius: var(--radius); color: #fff; } .system-final-cta__title { font-size: 1.7rem; margin: 0 0 .7rem; color: #fff; } .system-final-cta__text { color: rgba(255, 255, 255, .82); max-width: 640px; margin: 0 auto 1.6rem; line-height: 1.6; } @media (max-width: 860px) { .system-hero { grid-template-columns: 1fr; gap: 1.5rem; } .system-hero__media { min-height: 240px; order: -1; } } /* --- Dark mode -------------------------------------------------------- */ html.theme-dark .system-card, html.theme-dark .system-datasheet, html.theme-dark .system-archive__cta { background: #1b2631; } html.theme-dark .system-card__media, html.theme-dark .system-hero__media, html.theme-dark .system-product__media { background: #131b25; } html.theme-dark .system-card__name, html.theme-dark .system-archive__title, html.theme-dark .system-archive__cta-title, html.theme-dark .system-hero__title, html.theme-dark .system-section__title { color: #e7edf3; } html.theme-dark .system-badge { background: rgba(255, 255, 255, .1); color: #cfe0ec; } html.theme-dark .system-badge:hover { background: var(--brunner-navy-light); color: #fff; } html.theme-dark .system-deptnav__tab { color: var(--color-ink); } html.theme-dark .system-deptnav__tab.is-active { background: var(--brunner-navy-light); border-color: var(--brunner-navy-light); } html.theme-dark .system-hero__lead, html.theme-dark .system-highlights__item, html.theme-dark .system-description__body { color: #d3dde6; } /* Sub-category chip navigation (Systeme catalogue) */ .system-subnav { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.75rem; } .system-subnav__chip { display: inline-flex; align-items: center; padding: .35rem .9rem; border: 1px solid var(--color-line); border-radius: 999px; color: var(--color-muted, #5a6b7b); text-decoration: none; font-weight: 600; font-size: .85rem; transition: background .15s ease, color .15s ease, border-color .15s ease; } .system-subnav__chip:hover { border-color: var(--brunner-orange); color: var(--brunner-orange); } .system-subnav__chip.is-active { background: var(--brunner-orange); border-color: var(--brunner-orange); color: #fff; } html.theme-dark .system-subnav__chip { color: #d3dde6; } /* Technical-data table (single Anlage) */ .system-specs { margin: 0 0 1.5rem; border-top: 1px solid var(--color-line); } .system-specs__row { display: flex; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--color-line); } .system-specs__row--single { display: block; } .system-specs__label { flex: 0 0 38%; margin: 0; font-weight: 600; color: var(--brunner-navy); } .system-specs__value { margin: 0; flex: 1; color: var(--color-ink); } html.theme-dark .system-specs__label { color: #e8eef4; } html.theme-dark .system-specs__value { color: #d3dde6; } /* == BRUNNER TEAM/KONTAKT (v3) START == */ .contact-card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 14px; box-shadow: var(--shadow-card); padding: 1.5rem 1.75rem; margin: 0 0 1.5rem; max-width: 560px; } .contact-card h2 { margin-top: 0; } .contact-card a { color: var(--color-secondary); font-weight: 600; text-decoration: none; } .contact-card a:hover { text-decoration: underline; } html.theme-dark .contact-card a { color: var(--brunner-orange-light); } .team-intro { max-width: 720px; color: var(--color-slate); } .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.4rem; margin: 1.75rem 0; padding: 0; list-style: none; } .team-member { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 14px; box-shadow: var(--shadow-card); text-align: center; transition: transform .25s ease, box-shadow .25s ease; } .team-member:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.16); } .team-member img { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; object-position: top center; display: block; margin: 1.5rem auto .25rem; border: 3px solid var(--color-line); background: var(--color-surface); } .team-noimg { width: 130px; height: 130px; border-radius: 50%; display: grid; place-items: center; margin: 1.5rem auto .25rem; background: var(--color-line); color: var(--color-muted); font-size: .75rem; } .team-member__body { padding: .4rem 1.1rem 1.3rem; } .team-member h4 { margin: .3rem 0 .15rem; font-size: 1.02rem; color: var(--color-ink); line-height: 1.25; } .team-member .role { margin: 0; color: var(--color-primary); font-weight: 600; font-size: .8rem; } .team-member .role::after { content: ""; display: block; width: 30px; height: 3px; margin: .5rem auto .7rem; background: var(--color-primary); border-radius: 3px; } .team-member__contact { margin: 0; font-size: .78rem; color: var(--color-slate); line-height: 1.6; } .team-member__contact a { color: var(--color-secondary); text-decoration: none; word-break: break-word; } .team-member__contact a:hover { text-decoration: underline; } html.theme-dark .team-member__contact a { color: var(--brunner-orange-light); } @media (max-width: 520px) { .team-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; } .team-member img, .team-noimg { width: 104px; height: 104px; } } /* == BRUNNER TEAM/KONTAKT (v3) END == */ /* == BRUNNER FORMS (CF7) START == */ .brunner-form { max-width: 640px; margin: 1.5rem 0; } .brunner-form .bf-field { margin: 0 0 1.1rem; } .brunner-form .bf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; } @media (max-width: 520px) { .brunner-form .bf-grid2 { grid-template-columns: 1fr; } } .brunner-form .bf-label { display: block; font-size: .85rem; font-weight: 600; color: var(--color-ink); margin-bottom: .4rem; } .brunner-form input[type=text], .brunner-form input[type=email], .brunner-form input[type=tel], .brunner-form textarea, .brunner-form select { width: 100%; padding: .65rem .8rem; font: inherit; color: var(--color-ink); background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius); transition: border-color .15s ease, box-shadow .15s ease; } html.theme-dark .brunner-form input, html.theme-dark .brunner-form textarea, html.theme-dark .brunner-form select { background: var(--color-bg); } .brunner-form input:focus, .brunner-form textarea:focus, .brunner-form select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(245,156,0,.18); } .brunner-form textarea { min-height: 120px; resize: vertical; } .brunner-form .bf-choice .wpcf7-radio { display: flex; flex-wrap: wrap; gap: .5rem; } .brunner-form .bf-choice .wpcf7-list-item { margin: 0; } .brunner-form .bf-choice .wpcf7-list-item > label { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; padding: .5rem .9rem; border: 1px solid var(--color-line); border-radius: 999px; background: var(--color-surface); font-size: .85rem; transition: border-color .15s ease, background .15s ease, color .15s ease; } .brunner-form .bf-choice .wpcf7-list-item input { accent-color: var(--color-primary); } .brunner-form .bf-choice .wpcf7-list-item > label:hover { border-color: var(--color-primary); } .brunner-form .bf-consent { font-size: .82rem; color: var(--color-slate); margin: 1rem 0; } .brunner-form .bf-consent a { color: var(--color-secondary); } html.theme-dark .brunner-form .bf-consent a { color: var(--brunner-orange-light); } .brunner-form .wpcf7-submit { background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius); padding: .8rem 1.8rem; font: inherit; font-weight: 600; cursor: pointer; transition: background .15s ease, transform .15s ease; } .brunner-form .wpcf7-submit:hover { background: var(--color-primary-hover); transform: translateY(-1px); } .wpcf7 .wpcf7-not-valid-tip { color: #c0392b; font-size: .78rem; margin-top: .25rem; } .wpcf7-response-output { border-radius: var(--radius); padding: .8rem 1rem !important; margin: 1rem 0 0 !important; font-size: .88rem; } /* == BRUNNER FORMS (CF7) END == */ /* == BRUNNER NAV DROPDOWN START == */ .main-navigation .menu-item-has-children { position: relative; } .main-navigation .menu-item-has-children > a::after { content: ""; display: inline-block; width: .4em; height: .4em; margin-inline-start: .4em; vertical-align: .14em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .6; transition: transform .16s ease; } .main-navigation .menu-item-has-children:hover > a::after { transform: rotate(225deg); } .main-navigation .sub-menu { display: block; position: absolute; top: 100%; inset-inline-start: 0; min-width: 224px; margin: 0; padding: .45rem 0; background: #fff; border: 1px solid var(--color-line); border-radius: 12px; box-shadow: 0 16px 38px rgba(16, 24, 39, .16); opacity: 0; visibility: hidden; transform: translateY(7px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; z-index: 40; } /* invisible hover-bridge so moving the cursor down doesn't close the menu */ .main-navigation .sub-menu::before { content: ""; position: absolute; top: -9px; inset-inline: 0; height: 9px; } .main-navigation .sub-menu li { display: block; margin: 0; } .main-navigation .sub-menu a { display: block; padding: .52rem 1.15rem; font-weight: 500; white-space: nowrap; color: var(--color-ink); } .main-navigation .sub-menu a:hover { background: var(--color-surface); color: var(--color-primary-hover); } .main-navigation .menu-item-has-children:hover > .sub-menu, .main-navigation .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } html.theme-dark .main-navigation .sub-menu { background: #1b2631; border-color: var(--color-line); box-shadow: 0 16px 38px rgba(0, 0, 0, .5); } @media (max-width: 768px) { /* inside the open mobile panel, render submenus inline (no floating dropdown) */ .main-navigation.is-open .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-radius: 0; padding: .15rem 0 .35rem; min-width: 0; background: transparent; } html.theme-dark .main-navigation.is-open .sub-menu { background: transparent; } .main-navigation.is-open .sub-menu a { padding-inline-start: 1.6rem; font-size: .94em; opacity: .9; } .main-navigation .menu-item-has-children > a::after { display: none; } } /* == BRUNNER NAV DROPDOWN END == */ /* == BRUNNER DOWNLOADS START == */ .dl-center{max-width:900px;margin:1.5rem 0;} .dl-pick{margin:0 0 1.1rem;} .dl-pick__label{display:block;font-weight:600;color:var(--color-ink);margin-bottom:.4rem;} .dl-machine{width:100%;max-width:420px;padding:.7rem .9rem;font:inherit;color:var(--color-ink);background:var(--color-white);border:1px solid var(--color-line);border-radius:var(--radius);} html.theme-dark .dl-machine{background:var(--color-surface);} .dl-note{margin:0 0 1rem;padding:.75rem 1rem;background:var(--color-surface);border:1px solid var(--color-line);border-left:3px solid var(--color-primary);border-radius:var(--radius);font-size:.84rem;line-height:1.5;color:var(--color-slate);} .dl-disclaimer{margin:0 0 1.5rem;padding:.85rem 1.1rem;background:rgba(245,156,0,.10);border:1px solid rgba(245,156,0,.45);border-radius:var(--radius);font-size:.85rem;line-height:1.5;color:var(--color-ink);} .dl-placeholder{color:var(--color-muted);padding:1.25rem 0;} .dl-mblock__title{font-size:1.15rem;margin:.25rem 0 1rem;color:var(--color-ink);} .dl-group{margin:0 0 1.5rem;} .dl-group__title{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-primary);margin:0 0 .55rem;padding-bottom:.35rem;border-bottom:1px solid var(--color-line);} .dl-list{display:flex;flex-direction:column;gap:.55rem;} .dl-item{display:flex;align-items:center;gap:1rem;padding:.8rem 1.05rem;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius);} .dl-item__title{flex:1 1 auto;font-weight:600;color:var(--color-ink);} .dl-item__ver{flex:0 0 auto;font-size:.78rem;color:var(--color-muted);} .dl-item__badge{flex:0 0 auto;font-size:.72rem;font-weight:700;color:#1a7f37;background:rgba(26,127,55,.12);padding:.24rem .55rem;border-radius:999px;white-space:nowrap;} html.theme-dark .dl-item__badge{color:#5bd17e;background:rgba(91,209,126,.12);} .dl-item__btn{flex:0 0 auto;background:var(--color-primary);color:#fff;text-decoration:none;padding:.5rem 1rem;border-radius:var(--radius);font-size:.82rem;font-weight:600;transition:background .15s;} .dl-item__btn:hover{background:var(--color-primary-hover);} .dl-item__btn--off{background:var(--color-line);color:var(--color-muted);cursor:default;} .dl-help{margin:1.75rem 0 0;padding:1rem 1.15rem;background:var(--color-surface);border:1px dashed var(--color-line);border-radius:var(--radius);font-size:.88rem;color:var(--color-slate);} .dl-help a,.dl-disclaimer a{color:var(--color-primary);font-weight:600;} @media(max-width:560px){.dl-item{flex-wrap:wrap;gap:.45rem .7rem;}.dl-item__title{flex:1 1 100%;}} /* == BRUNNER DOWNLOADS END == */ /* == BRUNNER SYSTEM-HERO + BACK-LINK START == */ /* einheitliche Bildgröße auf allen System-Detailseiten */ .system-hero__media { min-height: 340px; height: 340px; padding: 1.4rem; } .system-hero__img { width: 100%; height: 100%; max-width: 100%; max-height: none; object-fit: contain; } @media (max-width: 768px) { .system-hero__media { min-height: 240px; height: 240px; } } /* kleiner, dezenter, oranger Zurück-Pfeil oben links */ .brunner-back { display: inline-flex; align-items: center; gap: .2rem; font-size: .85rem; font-weight: 600; color: var(--color-primary); text-decoration: none; line-height: 1; } .brunner-back:hover { color: var(--color-primary-hover); text-decoration: underline; } /* globale Zurück-Leiste unter dem Header (auf allen Seiten außer Startseite) */ .brunner-back-bar { margin: 1rem auto .25rem; } /* == BRUNNER SYSTEM-HERO + BACK-LINK END == */ /* --------------------------------------------------------------------------- * Systeme-Übersicht — Abteilungs-Kacheln (eine zusammenhängende Karte je Abteilung) * ------------------------------------------------------------------------- */ .dept-intro { font-size: 1.05rem; color: var(--color-slate); margin: 0 0 1.6rem; } .dept-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25rem; margin: 0 0 2rem; } .dept-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; padding: 1.85rem 1.6rem; background: var(--color-white); border: 1px solid var(--color-line); border-radius: 14px; box-shadow: var(--shadow-card); text-decoration: none; color: inherit; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .dept-card::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--brunner-orange); transform: scaleY(0); transform-origin: top; transition: transform .25s ease; } .dept-card:hover, .dept-card:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0, 67, 102, .14); border-color: var(--brunner-orange); } .dept-card:hover::before, .dept-card:focus-visible::before { transform: scaleY(1); } .dept-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 13px; background: rgba(245, 156, 0, .12); color: var(--brunner-orange); } .dept-card__icon svg { width: 28px; height: 28px; } .dept-card__title { font-size: 1.28rem; font-weight: 700; color: var(--color-secondary); line-height: 1.2; } .dept-card:hover .dept-card__title, .dept-card:focus-visible .dept-card__title { color: var(--color-primary-hover); } .dept-card__desc { color: var(--color-muted); font-size: .96rem; line-height: 1.55; flex: 1 1 auto; } .dept-card__more { display: inline-flex; align-items: center; gap: .4rem; margin-top: .4rem; font-weight: 600; font-size: .9rem; color: var(--brunner-orange); } .dept-card__more svg { transition: transform .2s ease; } .dept-card:hover .dept-card__more svg, .dept-card:focus-visible .dept-card__more svg { transform: translateX(4px); } /* Dark mode */ html.theme-dark .dept-card { background: #1b2631; } html.theme-dark .dept-card__title { color: #e7edf3; } html.theme-dark .dept-card:hover .dept-card__title, html.theme-dark .dept-card:focus-visible .dept-card__title { color: var(--brunner-orange-light); } @media (prefers-reduced-motion: reduce) { .dept-card, .dept-card::before, .dept-card__more svg { transition: none; } } /* --------------------------------------------------------------------------- * Ticket-Center Vorschau (Zoho Desk) — Feature-Preview /support/tickets/ * ------------------------------------------------------------------------- */ .tcp-lead { font-size: 1.1rem; line-height: 1.6; color: var(--color-slate); max-width: 60ch; } .tcp-badge { display: inline-block; margin: .25rem 0 1.75rem; padding: .4rem .9rem; border-radius: 999px; background: rgba(245, 156, 0, .14); color: var(--brunner-orange-dark); font-weight: 700; font-size: .85rem; letter-spacing: .02em; } html.theme-dark .tcp-badge { color: var(--brunner-orange-light); } .tcp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; margin: 0 0 2.5rem; } .tcp-step { position: relative; padding: 1.4rem 1.3rem 1.3rem; background: var(--color-white); border: 1px solid var(--color-line); border-radius: 12px; box-shadow: var(--shadow-card); } html.theme-dark .tcp-step { background: #1b2631; } .tcp-step__num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brunner-orange); color: #fff; font-weight: 700; margin-bottom: .6rem; } .tcp-step h3 { margin: 0 0 .35rem; font-size: 1.1rem; color: var(--color-secondary); } html.theme-dark .tcp-step h3 { color: #e7edf3; } .tcp-step p { margin: 0; color: var(--color-muted); font-size: .94rem; line-height: 1.5; } /* App-Mockup */ .tcp-mock { border: 1px solid var(--color-line); border-radius: 14px; overflow: hidden; box-shadow: 0 18px 44px rgba(0, 67, 102, .12); margin: 0 0 2.5rem; background: var(--color-white); } html.theme-dark .tcp-mock { background: #18212c; } .tcp-mock__bar { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; background: var(--color-secondary); } .tcp-dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .35); } .tcp-mock__title { margin-left: .6rem; color: #fff; font-size: .85rem; font-weight: 600; opacity: .92; } .tcp-mock__body { padding: 1.3rem; } .tcp-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; padding-bottom: 1.1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--color-line); } .tcp-stat { display: flex; flex-direction: column; } .tcp-stat__num { font-size: 1.5rem; font-weight: 800; color: var(--color-secondary); line-height: 1; } html.theme-dark .tcp-stat__num { color: #e7edf3; } .tcp-stat__lbl { font-size: .8rem; color: var(--color-muted); } .tcp-newbtn { margin-left: auto; padding: .55rem 1rem; border-radius: 8px; background: var(--brunner-orange); color: #fff; font-weight: 600; font-size: .9rem; } .tcp-list { list-style: none; margin: 0; padding: 0; } .tcp-ticket { display: grid; grid-template-columns: 64px 1fr auto auto; align-items: center; gap: .9rem; padding: .85rem .4rem; border-bottom: 1px solid var(--color-line); } .tcp-ticket:last-child { border-bottom: 0; } .tcp-ticket__id { font-variant-numeric: tabular-nums; color: var(--color-muted); font-weight: 600; font-size: .9rem; } .tcp-ticket__subj { color: var(--color-ink); font-weight: 500; } .tcp-ticket__date { color: var(--color-muted); font-size: .85rem; font-variant-numeric: tabular-nums; } .tcp-st { padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; } .tcp-st--open { background: rgba(245, 156, 0, .16); color: var(--brunner-orange-dark); } .tcp-st--prog { background: rgba(29, 94, 128, .14); color: var(--brunner-navy-light); } .tcp-st--done { background: rgba(34, 139, 87, .15); color: #1d7a4c; } html.theme-dark .tcp-st--open { color: var(--brunner-orange-light); } html.theme-dark .tcp-st--prog { color: #7fb4d4; } html.theme-dark .tcp-st--done { color: #56c98c; } .tcp-mock__hint { margin: 1rem 0 0; text-align: center; font-size: .82rem; color: var(--color-muted); font-style: italic; } .tcp-now { padding: 1.6rem; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 12px; } .tcp-now h3 { margin: 0 0 .4rem; color: var(--color-secondary); } html.theme-dark .tcp-now h3 { color: #e7edf3; } .tcp-now p { margin: 0 0 1rem; color: var(--color-slate); } .tcp-now__channels { display: flex; flex-wrap: wrap; gap: .7rem; } .tcp-chan { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 8px; background: var(--color-white); border: 1px solid var(--color-line); color: var(--color-secondary); text-decoration: none; font-weight: 600; font-size: .92rem; transition: border-color .2s ease, transform .2s ease; } .tcp-chan:hover { border-color: var(--brunner-orange); transform: translateY(-2px); } html.theme-dark .tcp-chan { background: #1b2631; color: #e7edf3; } .tcp-chan span { color: var(--brunner-orange); } @media (max-width: 560px) { .tcp-ticket { grid-template-columns: 1fr auto; row-gap: .3rem; } .tcp-ticket__id { grid-row: 1; } .tcp-ticket__date { grid-column: 2; } } @media (prefers-reduced-motion: reduce) { .tcp-chan { transition: none; } } /* --------------------------------------------------------------------------- * Technische News — News-Feed /support/news/ * ------------------------------------------------------------------------- */ .tnews { list-style: none; margin: 1.5rem 0 1.5rem; padding: 0; } .tnews__item { display: grid; grid-template-columns: 120px 1fr; gap: 1.2rem; padding: 1.3rem 0; border-bottom: 1px solid var(--color-line); } .tnews__item:first-child { border-top: 1px solid var(--color-line); } .tnews__date { color: var(--brunner-orange-dark); font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; padding-top: .15rem; } html.theme-dark .tnews__date { color: var(--brunner-orange-light); } .tnews__body h3 { margin: 0 0 .35rem; font-size: 1.12rem; color: var(--color-secondary); } html.theme-dark .tnews__body h3 { color: #e7edf3; } .tnews__body p { margin: 0; color: var(--color-slate); line-height: 1.55; } .tnews__foot { margin-top: 1.5rem; color: var(--color-muted); } @media (max-width: 560px) { .tnews__item { grid-template-columns: 1fr; gap: .3rem; } } /* --------------------------------------------------------------------------- * Über-uns — Werte-Karten * ------------------------------------------------------------------------- */ .uw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin: 1.2rem 0 1.5rem; } .uw-card { padding: 1.3rem 1.25rem; background: var(--color-white); border: 1px solid var(--color-line); border-left: 4px solid var(--brunner-orange); border-radius: 10px; box-shadow: var(--shadow-card); } html.theme-dark .uw-card { background: #1b2631; } .uw-card h4 { margin: 0 0 .45rem; font-size: 1.05rem; color: var(--color-secondary); } html.theme-dark .uw-card h4 { color: #e7edf3; } .uw-card p { margin: 0; color: var(--color-muted); font-size: .93rem; line-height: 1.55; } /* --------------------------------------------------------------------------- * Referenzen — Kundenprojekte (Case Studies) * ------------------------------------------------------------------------- */ .ref-case { background: var(--color-white); border: 1px solid var(--color-line); border-radius: 14px; box-shadow: var(--shadow-card); padding: 2rem 2.1rem; margin: 0 0 1.6rem; border-top: 4px solid var(--brunner-orange); } html.theme-dark .ref-case { background: #1b2631; } .ref-case__tag { display: inline-block; font-size: .82rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--brunner-orange-dark); margin-bottom: .5rem; } html.theme-dark .ref-case__tag { color: var(--brunner-orange-light); } .ref-case__title { margin: 0 0 .25rem; font-size: 1.6rem; color: var(--color-secondary); line-height: 1.2; } html.theme-dark .ref-case__title { color: #e7edf3; } .ref-case__sub { margin: 0 0 1.2rem; font-size: 1.05rem; color: var(--color-muted); font-weight: 500; } .ref-case h3 { margin: 1.3rem 0 .4rem; font-size: 1.12rem; color: var(--color-secondary); } html.theme-dark .ref-case h3 { color: #cdd9e3; } .ref-case p { margin: 0 0 .8rem; color: var(--color-slate); line-height: 1.65; } .ref-case__quote { margin: 1.1rem 0; padding: .9rem 1.2rem; border-left: 4px solid var(--brunner-orange); background: var(--color-surface); border-radius: 0 10px 10px 0; font-size: 1.08rem; font-style: italic; color: var(--color-ink); } .ref-case__caption { font-size: .9rem; color: var(--color-muted); font-style: italic; margin-top: 1rem; } .ref-cta { text-align: center; padding: 2rem 1rem 1rem; } .ref-cta p { margin: 0 0 1rem; font-size: 1.1rem; color: var(--color-slate); } /* Platz für Foto (wird ergänzt, sobald bessere Bilder vorliegen) */ .ref-case__media { margin: 0 0 1.3rem; border-radius: 10px; overflow: hidden; } .ref-case__media img { width: 100%; height: auto; display: block; } @media (min-width: 720px) { .ref-case--media-side { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.8rem; align-items: start; } .ref-case--media-side .ref-case__media { margin: 0; } } /* Portal-Kacheln: gleiche Höhe */ .portal-tiles__item { display: flex; } .portal-tile { width: 100%; } /* Referenz-Fotos kompakt halten (Quelle ist gering aufgelöst) */ .ref-case__media { max-width: 380px; margin-left: auto; margin-right: auto; } /* BRUNNER cart qty: kill native number spinners (class-independent) */ .woocommerce .quantity input[type="number"], .woocommerce-cart-form input[type="number"], input.qty[type="number"] { -moz-appearance: textfield; appearance: textfield; } .woocommerce .quantity input[type="number"]::-webkit-outer-spin-button, .woocommerce .quantity input[type="number"]::-webkit-inner-spin-button, .woocommerce-cart-form input[type="number"]::-webkit-outer-spin-button, .woocommerce-cart-form input[type="number"]::-webkit-inner-spin-button, input.qty[type="number"]::-webkit-outer-spin-button, input.qty[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* --------------------------------------------------------------------------- * Mobile hero fix (2026-06-21): the 2-column image collage's intrinsic width * inflated the single-column hero grid track to ~576px on phones, clipping the * headline lead text and the two "doors" off the right edge (the hero clips via * overflow:hidden, so it showed as cut-off content rather than a scrollbar). * Let the grid track and its children shrink to the viewport. * ------------------------------------------------------------------------- */ @media (max-width: 879px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } .hero__content, .hero__media, .door { min-width: 0; } .hero__media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hero__doors { grid-template-columns: 1fr; } } /* System cards in navy (matches the footer) — dark mode (2026-06-22). */ html.theme-dark .system-card { background: var(--brunner-navy-dark); border-color: rgba(255, 255, 255, .10); } /* Uniform shop-loop product image box so off-square images (e.g. DuraFlex) stay flush with the others. */ .woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img { aspect-ratio: 1 / 1; object-fit: contain; background: #fff; } /* Single product: stack SKU and categories on separate lines (not inline) (2026-06-22). */ .woocommerce .product_meta > span { display: block; margin-bottom: .35rem; } /* Keep add-to-cart on-brand — WooCommerce's .alt button variant defaults to purple. */ .woocommerce button.button.alt, .woocommerce a.button.alt, .woocommerce .single_add_to_cart_button.button { background: var(--color-primary); color: #fff; } .woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover, .woocommerce .single_add_to_cart_button.button:hover { background: var(--color-primary-hover); color: #fff; } /* Referenzen: zentrierte, gut lesbare Spalte + prominente Bilder (2026-06-22). */ .ref-case { max-width: 820px; margin-left: auto; margin-right: auto; padding: clamp(1.4rem, 4vw, 2.4rem); } .ref-case__media { max-width: none; margin: 0 0 1.4rem; } .ref-case__media img { border-radius: 10px; } .ref-cta { max-width: 820px; margin-left: auto; margin-right: auto; } /* Cart: wider coupon code field (2026-06-22). */ .woocommerce .cart .coupon #coupon_code, .woocommerce-cart-form .coupon .input-text, #coupon_code { width: 16rem; max-width: 60%; } /* Support-Hub (Seite 21): zwei kompakte, zentrierte Kacheln mit Ruhezone – statt zwei über die volle Breite gestreckter Boxen (2026-06-22). */ .page-id-21 .portal-tiles__grid { max-width: 760px; margin-inline: auto; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .page-id-21 .portal-tile { padding: 1.6rem 1.5rem; } @media (max-width: 560px) { .page-id-21 .portal-tiles__grid { grid-template-columns: 1fr; } } /* Zweite Dropdown-Ebene (z.B. Über uns ▸ Magazin): seitlicher Flyout statt Überlappung der ersten Ebene (2026-06-22). */ .main-navigation .sub-menu li { position: relative; } .main-navigation .sub-menu .sub-menu { top: -.5rem; inset-inline-start: 100%; } /* portal-tile title as span (wpautop-safe) — keep heading weight/size. */ .portal-tile__title { font-weight: 700; display: block; } /* Große Monitore: Inhalt + Typografie skalieren mit dem Medium mit. Laptops (bis ~1499px) bleiben unverändert; ab da wächst Container + Basis-Schrift, damit auf großen Desktop-Monitoren nichts mehr „zu klein" wirkt (2026-06-24). */ @media (min-width: 1500px) { :root { --container-max: 1400px; } } @media (min-width: 1800px) { :root { --container-max: 1560px; font-size: 17.5px; } } @media (min-width: 2200px) { :root { --container-max: 1780px; font-size: 19.5px; } } @media (min-width: 2700px) { :root { --container-max: 2080px; font-size: 21.5px; } } /* ============================================================ Startseite: Portal-Kacheln im Foto-Overlay-Stil (Grafimecc/Buskro). Sauber wieder aufgesetzt auf der vollständigen IONOS-Basis (Stand-0), nachdem versehentlich die ältere lokale main.css deployt wurde (29.06). NUR auf der Startseite (.front-page). ============================================================ */ .front-page .portal-tiles { padding-block: clamp(2.5rem, 5vw, 4rem); } .front-page .portal-tiles__grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } @media (max-width: 860px) { .front-page .portal-tiles__grid { grid-template-columns: 1fr; } } .front-page .portal-tile { position: relative; display: flex; align-items: flex-end; min-height: 360px; padding: 1.75rem; border: 0; border-radius: 8px; overflow: hidden; isolation: isolate; background: var(--brunner-navy); color: #fff; box-shadow: 0 6px 18px rgba(0, 33, 52, .14); } .front-page .portal-tile::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--tile-img); background-size: cover; background-position: center; transform: scale(1.01); transition: transform .6s ease; } .front-page .portal-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,49,76,.12) 0%, rgba(0,49,76,.52) 52%, rgba(0,33,52,.92) 100%); transition: opacity .3s ease; opacity: 1; } .front-page .portal-tile:hover::before, .front-page .portal-tile:focus-visible::before { transform: scale(1.07); } .front-page .portal-tile:hover::after, .front-page .portal-tile:focus-visible::after { opacity: .82; } .front-page .portal-tile:focus-visible { outline: 3px solid var(--brunner-orange); outline-offset: 3px; } .front-page .portal-tile__body { position: relative; } .front-page .portal-tile__eyebrow { display: block; margin: 0 0 .45rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--brunner-orange-light); } .front-page .portal-tile__title { margin: 0 0 .55rem; color: #fff; font-size: clamp(1.4rem, 2.2vw, 1.7rem); font-weight: 700; line-height: 1.12; } .front-page .portal-tile__desc { display: block; max-width: 36ch; color: rgba(255,255,255,.88); font-size: .95rem; line-height: 1.55; } .front-page .portal-tile__more { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #fff; } .front-page .portal-tile__arrow { transition: transform .25s ease; } .front-page .portal-tile:hover .portal-tile__arrow, .front-page .portal-tile:focus-visible .portal-tile__arrow { transform: translateX(4px); } /* Referenzen: Bilder responsiv + Platz reservieren (CLS-Fix) */ .ref-case__media img { width: 100%; height: auto; display: block; } @media (prefers-reduced-motion: reduce) { .front-page .portal-tile::before, .front-page .portal-tile::after, .front-page .portal-tile__arrow { transition: none; } } /* ============================================================ Systeme-Übersichtsseite: stärkerer Kopf + Kennzahlen-Band (29.06.2026) ============================================================ */ .dept-eyebrow { color: var(--brunner-orange); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; margin: 0 0 .5rem; } .dept-headline { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--brunner-navy); line-height: 1.1; margin: 0 0 .6rem; font-weight: 700; } html.theme-dark .dept-headline { color: #e7edf3; } .sys-stats { list-style: none; margin: .6rem 0 2.4rem; padding: 1.5rem 1.7rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.3rem 1.7rem; background: linear-gradient(135deg, var(--brunner-navy) 0%, var(--brunner-navy-dark) 100%); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,33,52,.18); } .sys-stats li { display: flex; flex-direction: column; gap: .3rem; } .sys-stats__num { font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 800; color: var(--brunner-orange-light); line-height: 1; } .sys-stats__lbl { color: rgba(255,255,255,.86); font-size: .9rem; line-height: 1.45; } /* BBI / single-system Beschreibungs-Medien (29.06.2026) */ .system-description__body img, .system-description__body video { max-width: 100%; height: auto; display: block; border-radius: 12px; margin: 1.3rem 0; box-shadow: 0 8px 24px rgba(0,33,52,.12); } .system-description__body h3 { color: var(--brunner-navy); font-size: 1.3rem; margin: 1.8rem 0 .5rem; } html.theme-dark .system-description__body h3 { color: #e7edf3; } /* ============================================================ „brunner in der Fachpresse" – Presse-Sektion (Referenzen-Seite, 29.06.2026) ============================================================ */ .press-section { margin: 3.5rem 0 1rem; max-width: 1100px; margin-inline: auto; } .press-section__eyebrow { color: var(--brunner-orange); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; margin: 0 0 .4rem; } .press-section__title { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--brunner-navy); margin: 0 0 .5rem; } html.theme-dark .press-section__title { color: #e7edf3; } .press-section__intro { color: var(--color-muted); margin: 0 0 1.6rem; max-width: 60ch; } .press-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0; } .press-card { display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1.25rem 1.35rem; background: linear-gradient(160deg, var(--brunner-navy) 0%, var(--brunner-navy-dark) 100%); border-radius: 13px; text-decoration: none; box-shadow: 0 6px 18px rgba(0,33,52,.16); transition: transform .2s ease, box-shadow .2s ease; } .press-card:hover, .press-card:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,33,52,.28); } .press-card__meta { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--brunner-orange-light); } .press-card__title { color: #fff; font-weight: 600; font-size: 1.02rem; line-height: 1.35; flex: 1 1 auto; } .press-card__more { display: inline-flex; align-items: center; gap: .35rem; color: rgba(255,255,255,.78); font-size: .82rem; font-weight: 600; margin-top: .2rem; } .press-card:hover .press-card__more { color: #fff; } /* ============================================================ Marken-Strip "Marken, die wir fuehren" - Systeme-Seite (04.07.2026) ============================================================ */ .sys-brands { margin: 0 0 2.6rem; text-align: center; } .sys-brands__eyebrow { color: var(--brunner-orange); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; margin: 0 0 .35rem; } .sys-brands__sub { color: var(--color-muted); font-size: .95rem; margin: 0 0 1.4rem; } .sys-brands__track-wrap { overflow: hidden; mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); } .sys-brands__track { display: flex; gap: 1.2rem; width: max-content; animation: sys-brands-scroll 34s linear infinite; } .sys-brands__track:hover { animation-play-state: paused; } @keyframes sys-brands-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .sys-brands__chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; background: #fff; border-radius: 12px; padding: .85rem 1.35rem; box-shadow: 0 2px 10px rgba(0,33,52,.08); flex-shrink: 0; min-width: 130px; height: 88px; transition: box-shadow .2s ease, transform .2s ease; } .sys-brands__chip:hover { box-shadow: 0 6px 22px rgba(0,33,52,.15); transform: translateY(-2px); } .sys-brands__chip img { height: 42px; width: auto; max-width: 150px; object-fit: contain; display: block; filter: grayscale(25%); transition: filter .2s ease; } .sys-brands__chip:hover img { filter: grayscale(0%); } .sys-brands__badge { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--brunner-navy); opacity: .55; line-height: 1; white-space: nowrap; } html.theme-dark .sys-brands__chip { background: rgba(255,255,255,.07); box-shadow: 0 2px 10px rgba(0,0,0,.25); } html.theme-dark .sys-brands__chip:hover { background: rgba(255,255,255,.12); } html.theme-dark .sys-brands__badge { color: rgba(255,255,255,.45); } /* ============================================================ CHANGE A — sys-brands-Heading vergroeßert, Subtitle ausgeblendet (2026-07-04) ============================================================ */ .sys-brands__eyebrow { font-size: 1.75rem; text-transform: none; letter-spacing: 0; font-weight: 800; margin-bottom: .6rem; } .sys-brands__sub { display: none; } /* ============================================================ CHANGE B — dept-card: Photo-Overlay-Redesign (2026-07-04) ============================================================ */ .dept-card { background-color: #004366; background-image: var(--tile-img, none); background-size: cover; background-position: center center; background-repeat: no-repeat; border: none; box-shadow: 0 4px 20px rgba(0,0,0,.28); color: #fff; min-height: 230px; } .dept-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; background: linear-gradient(160deg, rgba(0,20,38,.82) 0%, rgba(0,67,102,.86) 60%, rgba(0,14,28,.93) 100%); border-radius: inherit; transform: none; transition: opacity .25s ease; } .dept-card:hover::before, .dept-card:focus-visible::before { opacity: .80; } .dept-card:hover, .dept-card:focus-visible { transform: translateY(-5px) scale(1.015); box-shadow: 0 18px 42px rgba(0,0,0,.38); border-color: transparent; } .dept-card__icon { display: none; } .dept-card__title { position: relative; z-index: 1; color: #fff; } .dept-card:hover .dept-card__title, .dept-card:focus-visible .dept-card__title { color: #fff; } .dept-card__desc { position: relative; z-index: 1; color: rgba(255,255,255,.88); } .dept-card__more { position: relative; z-index: 1; color: var(--brunner-orange); font-weight: 700; } html.theme-dark .dept-card { box-shadow: 0 4px 20px rgba(0,0,0,.45); } html.theme-dark .dept-card__title { color: #fff; } html.theme-dark .dept-card:hover .dept-card__title, html.theme-dark .dept-card:focus-visible .dept-card__title { color: #fff; } @media (prefers-reduced-motion: reduce) { .dept-card, .dept-card::before { transition: none; } } /* ============================================================ Download-Center: Maschinen-Kacheln (wie im Shop) — 2026-07-04 ============================================================ */ .dl-pick { margin: 0 0 1.75rem; } .dl-pick__label { font-weight: 700; color: var(--brunner-navy); font-size: 1.15rem; margin: 0 0 1rem; } .dl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.2rem; } .dl-tile { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden; cursor: pointer; padding: 0; font: inherit; text-align: center; color: inherit; box-shadow: var(--shadow-card); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .dl-tile__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--brunner-navy); padding: 1rem; } .dl-tile__media img { max-width: 100%; max-height: 100%; object-fit: contain; } .dl-tile__ph { display: block; width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.18); } .dl-tile__name { display: block; padding: .85rem .6rem; font-weight: 700; color: var(--brunner-navy); font-size: 1rem; line-height: 1.2; } .dl-tile:hover, .dl-tile:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,67,102,.14); border-color: var(--brunner-orange); outline: none; } .dl-tile.is-active { border-color: var(--brunner-orange); box-shadow: 0 0 0 2px var(--brunner-orange), var(--shadow-card); } .dl-tile.is-active .dl-tile__name { color: var(--brunner-orange-dark); } .dl-mblock__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 .3rem; } .dl-mblock__reset { background: none; border: none; color: var(--brunner-navy); font-weight: 700; cursor: pointer; padding: .3rem .1rem; font-size: .9rem; } .dl-mblock__reset:hover { color: var(--brunner-orange-dark); text-decoration: underline; } html.theme-dark .dl-pick__label, html.theme-dark .dl-tile__name { color: #dfe8ef; } html.theme-dark .dl-tile { background: var(--brunner-navy-dark); border-color: rgba(255,255,255,.10); } html.theme-dark .dl-mblock__reset { color: #9fc3da; } @media (prefers-reduced-motion: reduce) { .dl-tile { transition: none; } } /* ============================================================ Support-Hub (Post 21): Kacheln + Leistungsband + Kontakt-CTA — 2026-07-04 Standalone; ergänzt die fehlende Gestaltung des Support-Hubs. ============================================================ */ .support-tiles { padding-block: clamp(1.5rem, 3vw, 2.5rem); } .support-tiles .portal-tiles__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } @media (max-width: 720px) { .support-tiles .portal-tiles__grid { grid-template-columns: 1fr; } } .support-tiles .portal-tile { position: relative; display: flex; align-items: flex-end; min-height: 300px; padding: 1.75rem; border: 0; border-radius: 8px; overflow: hidden; isolation: isolate; background: var(--brunner-navy); color: #fff; box-shadow: 0 6px 18px rgba(0, 33, 52, .14); transition: transform .2s ease, box-shadow .2s ease; } .support-tiles .portal-tile::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--tile-img); background-size: cover; background-position: center; transform: scale(1.01); transition: transform .6s ease; } .support-tiles .portal-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,49,76,.12) 0%, rgba(0,49,76,.52) 52%, rgba(0,33,52,.92) 100%); transition: opacity .3s ease; opacity: 1; } .support-tiles .portal-tile:hover, .support-tiles .portal-tile:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,33,52,.24); } .support-tiles .portal-tile:hover::before, .support-tiles .portal-tile:focus-visible::before { transform: scale(1.07); } .support-tiles .portal-tile:hover::after, .support-tiles .portal-tile:focus-visible::after { opacity: .82; } .support-tiles .portal-tile:focus-visible { outline: 3px solid var(--brunner-orange); outline-offset: 3px; } .support-tiles .portal-tile__body { position: relative; } .support-tiles .portal-tile__eyebrow { display: block; margin: 0 0 .45rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--brunner-orange-light); } .support-tiles .portal-tile__title { display: block; margin: 0 0 .55rem; color: #fff; font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 700; line-height: 1.12; } .support-tiles .portal-tile__desc { display: block; max-width: 42ch; color: rgba(255,255,255,.88); font-size: .95rem; line-height: 1.55; } .support-tiles .portal-tile__more { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #fff; } .support-tiles .portal-tile__arrow { transition: transform .25s ease; } .support-tiles .portal-tile:hover .portal-tile__arrow, .support-tiles .portal-tile:focus-visible .portal-tile__arrow { transform: translateX(4px); } /* Leistungsband „So unterstützen wir Sie" */ .support-value-band { margin: clamp(2rem, 4vw, 3rem) 0; border-radius: 10px; background: linear-gradient(135deg, var(--brunner-navy) 0%, var(--brunner-navy-dark) 100%); color: #fff; overflow: hidden; } .svb__inner { padding: clamp(1.8rem, 3.5vw, 2.8rem); } .svb__headline { margin: 0 0 1.4rem; color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; line-height: 1.15; } .svb__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem 1.9rem; } .svb__item { position: relative; padding-left: 1.1rem; } .svb__item::before { content: ""; position: absolute; left: 0; top: .3rem; width: 4px; height: 1.15em; border-radius: 2px; background: var(--brunner-orange); } .svb__label { display: block; margin: 0 0 .3rem; color: #fff; font-size: 1.05rem; font-weight: 700; } .svb__text { display: block; color: rgba(255,255,255,.85); font-size: .95rem; line-height: 1.55; } /* Kontakt-CTA */ .support-cta { margin: clamp(2rem, 4vw, 3rem) 0 1rem; border: 1px solid var(--color-line); border-radius: 10px; background: #fff; } html.theme-dark .support-cta { background: #161f29; border-color: #26323f; } .scta__inner { padding: clamp(1.8rem, 3.5vw, 2.6rem); text-align: center; } .scta__headline { margin: 0 0 .5rem; color: var(--brunner-navy); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; } html.theme-dark .scta__headline { color: #e7edf3; } .scta__sub { margin: 0 auto 1.5rem; max-width: 55ch; color: var(--color-muted); line-height: 1.6; } html.theme-dark .scta__sub { color: #9fb0c0; } .scta__contacts { list-style: none; margin: 0 0 1.7rem; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: center; } .scta__link { font-size: 1.1rem; font-weight: 700; color: var(--brunner-navy); text-decoration: none; transition: color .2s ease; } html.theme-dark .scta__link { color: #cfe0ec; } .scta__link:hover { color: var(--brunner-orange); } .scta__btn { display: inline-flex; align-items: center; justify-content: center; padding: .85rem 1.9rem; border-radius: 6px; background: var(--brunner-orange); color: #fff; font-weight: 700; text-decoration: none; transition: background .2s ease, transform .2s ease; } .scta__btn:hover { background: var(--brunner-orange-dark); transform: translateY(-2px); color: #fff; } /* ===== Hero Hover-Video-Vorschau (nur Systeme mit _brunner_hover_video, z. B. Quantum) ===== */ .system-hero__media--video { position: relative; overflow: hidden; cursor: pointer; } .system-hero__media--video .system-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; pointer-events: none; z-index: 2; } .system-hero__media--video:hover .system-hero__video, .system-hero__media--video.is-playing .system-hero__video { opacity: 1; } .system-hero__videohint { position: absolute; left: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: .35em; padding: .32em .7em; border-radius: 999px; background: rgba(11, 31, 59, .85); color: #fff; font-size: .78rem; font-weight: 600; line-height: 1; pointer-events: none; transition: opacity .3s ease; } .system-hero__media--video:hover .system-hero__videohint, .system-hero__media--video.is-playing .system-hero__videohint { opacity: 0; } /* ===== Final-CTA: Angebot + Muster nebeneinander (alle Systeme) ===== */ .system-final-cta__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; } .system-final-cta__actions .btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .6); } .system-final-cta__actions .btn--ghost:hover { background: #fff; color: var(--brunner-navy); border-color: #fff; } /* ===== Warum Brunner — Foto-Hintergrund + Navy-Overlay (Overlay-Bild-Stil) ===== */ .why.why--photo { position: relative; background-color: var(--brunner-navy); background-image: var(--why-bg); background-size: cover; background-position: center; color: #fff; isolation: isolate; padding-block: clamp(3rem, 6vw, 5rem); } .why.why--photo::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(11, 31, 59, .80) 0%, rgba(11, 31, 59, .90) 100%); pointer-events: none; } .why.why--photo > .container { position: relative; z-index: 1; } .why.why--photo .why__eyebrow { color: var(--brunner-orange); } .why.why--photo .why__title { color: #fff; } .why.why--photo .why__item { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .why.why--photo .why__item:hover { background: rgba(255, 255, 255, .12); border-color: var(--brunner-orange); box-shadow: 0 12px 32px rgba(0, 0, 0, .28); } .why.why--photo .why__item-title { color: #fff; } .why.why--photo .why__item-desc { color: rgba(255, 255, 255, .84); } .why.why--photo .why__icon { background: rgba(245, 156, 0, .20); } /* Musteranfrage — Nahaufnahme-Banner */ .muster-hero { margin: 0 0 1.6rem; } .muster-hero img { width: 100%; max-height: 360px; object-fit: cover; object-position: center; border-radius: var(--radius); display: block; } /* ===== Referenzen — Bild links / Text rechts (Zeitungs-/Katalog-Stil), alternierend ===== */ @media (min-width: 860px) { .ref-case { display: grid; grid-template-columns: 0.92fr 1.08fr; column-gap: 2.4rem; align-items: start; max-width: 1140px; } .ref-case__media { grid-column: 1; grid-row: 1 / -1; margin: 0; max-width: none; align-self: start; position: sticky; top: 90px; } .ref-case > :not(.ref-case__media) { grid-column: 2; } .ref-case__media img { border-radius: 10px; } .ref-case--alt { grid-template-columns: 1.08fr 0.92fr; } .ref-case--alt .ref-case__media { grid-column: 2; } .ref-case--alt > :not(.ref-case__media) { grid-column: 1; } } /* ===== Referenzen-Teaser (Startseite) ===== */ .ref-teaser { padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--color-surface); } .ref-teaser__lead { max-width: 62ch; margin: 0 0 1.8rem; color: var(--color-slate); } .ref-teaser__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; } .ref-teaser__card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-line); border-radius: 14px; overflow: hidden; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .ref-teaser__card:hover { transform: translateY(-4px); border-color: var(--brunner-orange); box-shadow: var(--shadow-card); } .ref-teaser__media { display: block; background: var(--brunner-navy); aspect-ratio: 16 / 10; overflow: hidden; } .ref-teaser__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .ref-teaser__body { display: flex; flex-direction: column; gap: .35rem; padding: 1.2rem 1.3rem 1.4rem; } .ref-teaser__tag { color: var(--brunner-orange); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .74rem; } .ref-teaser__title { font-size: 1.18rem; font-weight: 700; color: var(--color-secondary); line-height: 1.25; } .ref-teaser__sub { color: var(--color-muted); font-size: .95rem; } .ref-teaser__more { margin-top: .4rem; color: var(--brunner-orange); font-weight: 600; font-size: .9rem; } .ref-teaser__cta { text-align: center; margin-top: 1.8rem; } html.theme-dark .ref-teaser { background: var(--color-bg); } html.theme-dark .ref-teaser__card { background: #1b2631; border-color: #2a3742; } html.theme-dark .ref-teaser__title { color: #e7edf3; } /* ===== Musteranfrage — Bild groß + Formular nebeneinander ===== */ .muster-layout { display: grid; grid-template-columns: 1fr; gap: 1.8rem; margin: .4rem 0 0; } .muster-layout__media { margin: 0; } .muster-layout__media img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: 0 12px 34px rgba(11,31,59,.16); } .muster-layout__form .team-intro { margin-top: 0; } @media (min-width: 820px) { .muster-layout { grid-template-columns: 0.82fr 1.18fr; gap: 2.6rem; align-items: start; } .muster-layout__media { position: sticky; top: 90px; } } @media (max-width: 819px) { .muster-layout__media img { max-height: 60vh; object-fit: cover; object-position: center; } } /* ===== Magazin-Einzelartikel — redaktionelle Editorial-Optik ===== */ .single-article { max-width: 860px; margin: 0 auto; } .single-article .entry-header { margin-bottom: 1.4rem; } .single-article .entry-eyebrow { color: var(--brunner-orange); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; margin: 0 0 .5rem; } .single-article .entry-title { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.12; color: var(--color-secondary); margin: 0 0 .5rem; } html.theme-dark .single-article .entry-title { color: #eaf0f6; } .single-article .entry-meta { color: var(--color-muted); font-size: .92rem; } .single-article .entry-media { max-width: 480px; margin: 0 auto 2rem; border-radius: 16px; overflow: hidden; border: 1px solid var(--color-line); } .single-article .entry-media img { display: block; width: 100%; height: auto; } .single-article .entry-content { font-size: 1.06rem; line-height: 1.75; color: var(--color-slate); } .single-article .entry-content > p { margin: 0 0 1.15rem; } .single-article .entry-content h2 { font-size: 1.4rem; color: var(--color-secondary); margin: 2.1rem 0 .7rem; } html.theme-dark .single-article .entry-content h2 { color: #dbe4ec; } .single-article .entry-content strong { color: var(--color-secondary); } html.theme-dark .single-article .entry-content strong { color: #eaf0f6; } .mag-lead { font-size: 1.22rem !important; line-height: 1.6 !important; color: var(--color-secondary) !important; font-weight: 500; } html.theme-dark .mag-lead { color: #dbe4ec !important; } .mag-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.8rem 0; } @media (max-width: 620px) { .mag-stats { grid-template-columns: 1fr; } } .mag-stat { background: var(--brunner-navy); color: #fff; border-radius: 14px; padding: 1.3rem 1.1rem; text-align: center; } .mag-stat__num { display: block; font-size: 2rem; font-weight: 800; color: var(--brunner-orange); line-height: 1; margin-bottom: .45rem; } .mag-stat__label { display: block; font-size: .84rem; line-height: 1.35; color: rgba(255,255,255,.85); } .mag-pullquote { margin: 2rem 0; padding: 1.5rem 1.8rem 1.5rem 2rem; border-left: 4px solid var(--brunner-orange); background: rgba(245,156,0,.06); border-radius: 0 14px 14px 0; font-size: 1.4rem; line-height: 1.4; font-weight: 600; color: var(--color-secondary); font-style: italic; } html.theme-dark .mag-pullquote { color: #eaf0f6; background: rgba(245,156,0,.09); } .mag-pullquote cite { display: block; margin-top: .7rem; font-size: .92rem; font-style: normal; font-weight: 600; color: var(--color-muted); } .mag-figure { margin: 2rem 0; } .mag-figure img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--color-line); } .mag-figure figcaption { margin-top: .6rem; font-size: .88rem; color: var(--color-muted); font-style: italic; text-align: center; } .mag-source { font-size: .9rem; color: var(--color-muted); border-top: 1px solid var(--color-line); padding-top: 1.1rem; margin-top: 2rem !important; } /* ===== Longform-Magazinartikel (.lf-article) — internationale Longread-Optik ===== */ .single-article--longform { max-width: 1180px; margin: 0 auto; } .lf-article { color: var(--color-slate); } .lf-article > p, .lf-lead, .lf-source, .lf-body { max-width: 680px; margin-left: auto; margin-right: auto; } /* Hero */ .lf-hero { position: relative; min-height: clamp(360px, 54vh, 560px); border-radius: 18px; overflow: hidden; display: flex; align-items: flex-end; background-color: var(--brunner-navy); background-image: var(--lf-hero); background-size: cover; background-position: center; margin: 0 0 2.6rem; } .lf-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,31,59,.12) 0%, rgba(11,31,59,.55) 55%, rgba(11,31,59,.9) 100%); } .lf-hero__inner { position: relative; z-index: 1; padding: clamp(1.6rem, 4vw, 3.2rem); color: #fff; max-width: 860px; } .lf-hero__kicker { color: var(--brunner-orange); font-weight: 800; text-transform: uppercase; letter-spacing: .15em; font-size: .82rem; margin: 0 0 .9rem; } .lf-hero__title { font-size: clamp(2.1rem, 5.2vw, 3.5rem); line-height: 1.05; font-weight: 800; margin: 0 0 1rem; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); } .lf-hero__dek { font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.5; color: rgba(255,255,255,.92); max-width: 660px; margin: 0 0 1.1rem; } .lf-hero__meta { font-size: .82rem; color: rgba(255,255,255,.72); text-transform: uppercase; letter-spacing: .07em; margin: 0; } /* Lead + Drop-Cap */ .lf-lead { margin-bottom: 2.2rem; } .lf-lead p { font-size: 1.24rem; line-height: 1.65; color: var(--color-secondary); margin: 0; } html.theme-dark .lf-lead p { color: #dbe4ec; } .lf-dropcap::first-letter { float: left; font-size: 3.6em; line-height: .82; font-weight: 800; color: var(--brunner-orange); margin: .04em .12em 0 0; } /* Kennzahlen-Leiste (redaktionell, nicht boxig) */ .lf-facts { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 900px; margin: 2.6rem auto; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); } @media (max-width: 620px) { .lf-facts { grid-template-columns: 1fr; } .lf-fact { border-left: none !important; border-top: 1px solid var(--color-line); } .lf-fact:first-child { border-top: none; } } .lf-fact { text-align: center; padding: 1.5rem 1rem; border-left: 1px solid var(--color-line); } .lf-fact:first-child { border-left: none; } .lf-fact__num { display: block; font-size: 2.3rem; font-weight: 800; color: var(--brunner-navy); line-height: 1; } html.theme-dark .lf-fact__num { color: var(--brunner-orange-light, #ffb84d); } .lf-fact__label { display: block; font-size: .82rem; color: var(--color-muted); margin-top: .5rem; line-height: 1.4; } /* Alternierende Bild/Text-Splits (Referenz-Stil) */ .lf-split { display: grid; grid-template-columns: 1fr; gap: 1.4rem; margin: 3rem 0; align-items: center; } @media (min-width: 820px) { .lf-split { grid-template-columns: 1fr 1fr; gap: 2.8rem; } .lf-split--alt .lf-split__media { order: 2; } } .lf-split__media { margin: 0; } .lf-split__media img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--color-line); } .lf-split__media figcaption { margin-top: .55rem; font-size: .85rem; color: var(--color-muted); font-style: italic; } .lf-split__body h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); color: var(--color-secondary); margin: 0 0 .7rem; line-height: 1.2; } html.theme-dark .lf-split__body h2 { color: #e7edf3; } .lf-split__body p { color: var(--color-slate); line-height: 1.7; margin: 0 0 .9rem; } .lf-split__body strong { color: var(--color-secondary); } html.theme-dark .lf-split__body strong { color: #eaf0f6; } /* Body-Sektion (zentrierte Lesespalte) */ .lf-body { margin: 2.4rem auto; } .lf-body h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); color: var(--color-secondary); margin: 0 0 .7rem; } html.theme-dark .lf-body h2 { color: #e7edf3; } .lf-body p { line-height: 1.75; margin: 0 0 1.1rem; } /* Große Pull-Quote */ .lf-quote { max-width: 840px; margin: 3.2rem auto; text-align: center; font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.32; font-weight: 600; font-style: italic; color: var(--color-secondary); } html.theme-dark .lf-quote { color: #eaf0f6; } .lf-quote::before { content: "\201C"; display: block; font-size: 3.4rem; line-height: .4; color: var(--brunner-orange); margin-bottom: .6rem; font-style: normal; } .lf-quote cite { display: block; margin-top: 1.1rem; font-size: .92rem; font-style: normal; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); } .lf-source { padding-top: 1.1rem; border-top: 1px solid var(--color-line); font-size: .9rem; color: var(--color-muted); margin-top: 2.6rem; } /* Split-Hero (Foto neben Text-Panel) — für nicht-großformatige Fotos, bleibt scharf */ .lf-hero--split { display: grid; grid-template-columns: 1fr; min-height: 0; background: none; border-radius: 18px; overflow: hidden; } .lf-hero--split::before { display: none; } @media (min-width: 820px) { .lf-hero--split { grid-template-columns: 1.02fr .98fr; } } .lf-hero__panel { background: linear-gradient(135deg, #0f2440, #0a1a30); color: #fff; padding: clamp(1.8rem, 4vw, 3.4rem); display: flex; flex-direction: column; justify-content: center; } .lf-hero__photo { background: var(--brunner-navy); min-height: 300px; } .lf-hero__photo img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; object-position: center 22%; display: block; } /* Zentrierte Inline-Figur */ .lf-figure { max-width: 440px; margin: 2.6rem auto; } .lf-figure img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--color-line); } .lf-figure figcaption { margin-top: .55rem; font-size: .85rem; color: var(--color-muted); font-style: italic; text-align: center; } /* ===== Referenzen — Premium-Aufwertung (Rework 06.07.2026, revertierbar) ===== */ .tcp-lead { font-size: 1.18rem; line-height: 1.6; color: var(--color-secondary); max-width: 720px; } html.theme-dark .tcp-lead { color: #dbe4ec; } .ref-case__tag { color: var(--brunner-orange); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; } .ref-case__title { font-size: clamp(1.55rem, 2.8vw, 2.1rem); line-height: 1.12; letter-spacing: -.01em; } .ref-case__sub { font-size: 1.06rem; } .ref-case h3 { font-size: 1.15rem; margin-top: 1.5rem; } .ref-case__quote { margin: 1.7rem 0; padding: 1.3rem 1.6rem; border-left: 4px solid var(--brunner-orange); background: rgba(245, 156, 0, .06); border-radius: 0 12px 12px 0; font-size: 1.3rem; line-height: 1.42; font-weight: 600; font-style: italic; color: var(--color-secondary); } html.theme-dark .ref-case__quote { color: #eaf0f6; background: rgba(245, 156, 0, .09); } .lf-hero--tall { min-height: clamp(440px, 66vh, 680px); } /* Text-Header (ohne Bild) für Longform + Responsive-Feinschliff */ .lf-head { max-width: 820px; margin: 0 auto 1.8rem; text-align: center; } .lf-head__kicker { color: var(--brunner-orange); font-weight: 800; text-transform: uppercase; letter-spacing: .15em; font-size: .82rem; margin: 0 0 .8rem; } .lf-head__title { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.07; font-weight: 800; color: var(--color-secondary); margin: 0 0 1rem; } html.theme-dark .lf-head__title { color: #eaf0f6; } .lf-head__dek { font-size: clamp(1.08rem, 1.6vw, 1.35rem); line-height: 1.5; color: var(--color-slate); max-width: 640px; margin: 0 auto 1rem; } html.theme-dark .lf-head__dek { color: #c6d3e2; } .lf-head__meta { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--color-muted); margin: 0; } .single-article--longform { max-width: 1160px; margin-inline: auto; } @media (max-width: 819px) { .lf-split { margin: 2rem 0; } .lf-quote { margin: 2.4rem auto; } } /* ===== Longform v2 — Feature: Lesespalte + Medien-Leiste (füllt die Breite) ===== */ .lf-article.lf2 { max-width: 1180px; margin: 0 auto; } .lf2 { display: block; } @media (min-width: 900px) { .lf2 { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(280px,1fr); gap: 3.2rem; align-items: start; } } .lf2__main { min-width: 0; } .lf2__kicker { color: var(--brunner-orange); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; margin: 0 0 .7rem; } .lf2__title { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.08; font-weight: 800; color: var(--color-secondary); margin: 0 0 .8rem; } html.theme-dark .lf2__title { color: #eaf0f6; } .lf2__dek { font-size: clamp(1.08rem, 1.4vw, 1.26rem); line-height: 1.5; color: var(--color-slate); margin: 0 0 .7rem; } html.theme-dark .lf2__dek { color: #c6d3e2; } .lf2__meta { font-size: .77rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); margin: 0 0 1.5rem; padding-bottom: 1.3rem; border-bottom: 1px solid var(--color-line); } .lf2__leadimg { margin: 0 0 1.6rem; } .lf2__leadimg img { width: 100%; height: auto; display: block; border-radius: 16px; border: 1px solid var(--color-line); } .lf2__leadimg figcaption { margin-top: .5rem; font-size: .84rem; color: var(--color-muted); font-style: italic; } .lf2__main h2 { font-size: clamp(1.35rem, 2vw, 1.7rem); color: var(--color-secondary); margin: 1.9rem 0 .6rem; line-height: 1.2; } html.theme-dark .lf2__main h2 { color: #e7edf3; } .lf2__main > p { font-size: 1.07rem; line-height: 1.78; color: var(--color-slate); margin: 0 0 1.15rem; } .lf2__main strong { color: var(--color-secondary); } html.theme-dark .lf2__main strong { color: #eaf0f6; } .lf2__main .lf-dropcap::first-letter { float: left; font-size: 3.4em; line-height: .78; font-weight: 800; color: var(--brunner-orange); margin: .05em .14em 0 0; } .lf2__source { font-size: .9rem !important; color: var(--color-muted) !important; border-top: 1px solid var(--color-line); padding-top: 1.1rem; margin-top: 1.8rem !important; } /* Medien-Leiste */ .lf2__aside { display: flex; flex-direction: column; gap: 1.5rem; } @media (min-width: 900px) { .lf2__aside { position: sticky; top: 88px; } } .lf2__facts { border: 1px solid var(--color-line); border-radius: 14px; overflow: hidden; } .lf2__fact { display: flex; align-items: baseline; gap: .8rem; padding: .95rem 1.15rem; border-top: 1px solid var(--color-line); } .lf2__fact:first-child { border-top: none; } .lf2__fact-num { font-size: 1.5rem; font-weight: 800; color: var(--brunner-orange); flex: 0 0 auto; min-width: 4.3rem; } .lf2__fact-label { font-size: .85rem; line-height: 1.35; color: var(--color-slate); } html.theme-dark .lf2__fact-label { color: #c6d3e2; } .lf2__quote { margin: 0; padding: 1.4rem 1.5rem; background: var(--brunner-navy); color: #fff; border-radius: 14px; font-size: 1.2rem; line-height: 1.4; font-weight: 600; font-style: italic; } .lf2__quote::before { content: "\201C"; color: var(--brunner-orange); font-size: 2.6rem; line-height: .3; display: block; margin-bottom: .5rem; font-style: normal; } .lf2__quote cite { display: block; margin-top: .9rem; font-size: .8rem; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.72); } .lf2__figure { margin: 0; } .lf2__figure img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--color-line); } .lf2__figure figcaption { margin-top: .5rem; font-size: .84rem; color: var(--color-muted); font-style: italic; } /* ============================================================ PREMIUM-REDESIGN — Systeme-Übersicht (Bild-Hero + Foto-Kacheln) 2026-07-08 · clean/high-end · Marker: PREMIUM-SYS-2026-07-08 Anhang-Overrides (gewinnen per Quellreihenfolge). ============================================================ */ /* Doppelten Seitentitel auf der Systeme-Seite (299) ausblenden — der Hero trägt den Titel. */ body.page-id-299 .entry-header { display: none; } /* --- Cinematic Full-Bleed Hero ------------------------------------------ */ .sys-hero { position: relative; /* Full-Bleed aus dem zentrierten Container heraus, ohne 100vw-Overflow */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: .25rem; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); min-height: clamp(380px, 54vh, 580px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; background-color: #001b2e; } /* Bild-Ebene (leichter Zoom bei Interaktion optional) */ .sys-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--hero-img); background-size: cover; background-position: center 42%; transform: scale(1.04); filter: saturate(.82) contrast(1.06) brightness(.96); } /* Navy-Duotone-Verlauf: unten dunkel für Textkontrast, links dunkel für Titel */ .sys-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,20,38,.50) 0%, rgba(0,20,38,.30) 38%, rgba(0,12,24,.94) 100%), linear-gradient(90deg, rgba(0,27,46,.90) 0%, rgba(0,27,46,.34) 52%, rgba(0,27,46,.04) 100%); } .sys-hero__inner { position: relative; z-index: 1; width: 100%; max-width: var(--container-max, 1200px); margin: 0 auto; padding: clamp(2rem, 5vw, 3.6rem) clamp(1.15rem, 4vw, 2rem) clamp(2.2rem, 5vw, 3.4rem); } .sys-hero__kicker { display: inline-flex; align-items: center; gap: .7rem; margin: 0 0 1.05rem; font-size: .78rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--brunner-orange-light, #ffb43d); } .sys-hero__kicker::before { content: ""; display: inline-block; width: 36px; height: 2px; background: var(--brunner-orange, #f59c00); } .sys-hero__title { margin: 0 0 1.05rem; color: #fff; font-size: clamp(2.15rem, 5vw, 3.7rem); line-height: 1.04; font-weight: 800; letter-spacing: -.015em; max-width: 19ch; text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.35); } .sys-hero__lead { margin: 0; color: rgba(255,255,255,.84); font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.62; max-width: 56ch; } /* --- Marken-Marquee dezenter (Premium-Zurückhaltung) --------------------- */ .sys-brands { margin: 0 0 clamp(2rem, 4vw, 3rem); } .sys-brands__eyebrow { color: var(--color-muted, #6b7a88); font-size: .74rem; letter-spacing: .22em; font-weight: 700; } /* --- Abteilungs-Label über dem Grid -------------------------------------- */ .dept-section-label { text-align: center; margin: 0 0 1.4rem; font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brunner-orange); } /* --- Foto-Kacheln: Premium (Bild sichtbar, dosiertes Overlay, Zoom) ------ */ .dept-grid { gap: clamp(1rem, 1.6vw, 1.4rem); margin-bottom: clamp(2rem, 4vw, 3rem); } .dept-card { min-height: 306px; justify-content: flex-end; /* Inhalt nach unten auf den dunklen Teil */ gap: .55rem; padding: 1.7rem 1.55rem; border-radius: 16px; border: 1px solid rgba(255,255,255,.09); background-color: #00243b; background-image: none; /* Bild wandert auf ::after (zoombar) */ isolation: isolate; box-shadow: 0 6px 22px rgba(0,20,38,.30); } /* Bild-Ebene mit sanftem Zoom */ .dept-card::after { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--tile-img, none); background-size: cover; background-position: center; transform: scale(1.02); transition: transform .6s cubic-bezier(.22,.61,.36,1); } /* Verlauf: oben Bild frei, unten dunkel für Text */ .dept-card::before { z-index: -1; width: 100%; background: linear-gradient(178deg, rgba(0,20,38,.10) 0%, rgba(0,20,38,.34) 34%, rgba(0,14,26,.74) 60%, rgba(0,8,18,.95) 100%); opacity: 1; } .dept-card:hover, .dept-card:focus-visible { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(0,10,24,.45); border-color: rgba(245,156,0,.55); } .dept-card:hover::after, .dept-card:focus-visible::after { transform: scale(1.09); } .dept-card:hover::before, .dept-card:focus-visible::before { opacity: .95; } .dept-card__title { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.18; color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.45); } .dept-card__desc { color: rgba(255,255,255,.86); font-size: .95rem; line-height: 1.5; flex: 0 0 auto; text-shadow: 0 1px 10px rgba(0,0,0,.4); } /* „Anzeigen" restrained: weiß, uppercase, Pfeil gleitet (kein lautes Orange) */ .dept-card__more { margin-top: .7rem; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; } .dept-card:hover .dept-card__more, .dept-card:focus-visible .dept-card__more { color: var(--brunner-orange-light, #ffb43d); } @media (prefers-reduced-motion: reduce) { .sys-hero::before, .dept-card::after { transform: none; transition: none; } } @media (max-width: 620px) { .sys-hero { min-height: 340px; } .sys-hero__title { font-size: clamp(1.9rem, 8vw, 2.4rem); } } /* --- Systeme-Hero: Hintergrund-Video (graphimecc-Stil) · 2026-07-08 ------- */ .sys-hero__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.88) contrast(1.04) brightness(.9); pointer-events: none; } /* Bild-Ebene wird zur zweiten Fallback-Ebene HINTER dem Video/Poster */ .sys-hero--video::before { z-index: -3; } @media (prefers-reduced-motion: reduce) { /* Bewegungsempfindliche Nutzer: Video ausblenden, Poster/Bild bleibt */ .sys-hero__video { display: none; } } /* RESPONSIVE-AUDIT 2026-07-11: Abteilungs-Kacheln feste Spalten 1/2/3 statt auto-fit — verhindert zu schmale 4-5-spaltige Kacheln, bei denen langer Text ueber helle Bildbereiche rutschte (Lesbarkeit). 6 Kacheln = 2 saubere Dreierreihen. */ @media (min-width: 620px){ .dept-grid{ grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px){ .dept-grid{ grid-template-columns: repeat(3, 1fr); } } /* Online-Shop dezent hervorgehoben (Anja-Feedback, minimalistisch 15.07.2026) */ .main-navigation .nav-shop-cta > a{ color: var(--brunner-orange); font-weight:600; } .main-navigation .nav-shop-cta > a:hover{ color: var(--brunner-orange-light); } /* Einzelprodukt-Preis: WooCommerce-Olivgruen (#77a464) auf Markenorange (15.07.2026) */ .woocommerce div.product p.price, .woocommerce div.product p.price ins, .woocommerce div.product span.price, .woocommerce div.product span.price ins, .woocommerce div.product .summary .price .amount{ color: var(--brunner-orange) !important; } /* BBI-Verpackungsmaschinen-Teaser (Startseite, unten) – BBI-Designsprache, kompakt (15.07.2026) */ .bbi-teaser{ background:#000; color:#fff; padding:clamp(2.6rem,5vw,4rem) 0; } .bbi-teaser .container{ max-width:1200px; } .bbi-teaser__inner{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(1.5rem,4vw,3.4rem); align-items:center; } .bbi-teaser__media{ margin:0; } .bbi-teaser__media img{ width:100%; height:100%; max-height:360px; object-fit:cover; border-radius:6px; display:block; } .bbi-teaser__kicker{ font-family:"Outfit",system-ui,sans-serif; display:inline-block; color:#FFE200; text-transform:uppercase; letter-spacing:.18em; font-size:.78rem; font-weight:600; margin-bottom:.9rem; } .bbi-teaser__title{ font-family:"Outfit",system-ui,sans-serif; text-transform:uppercase; font-weight:800; font-size:clamp(1.5rem,2.8vw,2.35rem); line-height:1.06; letter-spacing:-.01em; margin:0 0 .9rem; color:#fff; } .bbi-teaser__text{ color:rgba(255,255,255,.8); font-weight:300; font-size:clamp(1rem,1.3vw,1.1rem); line-height:1.6; margin:0 0 1.5rem; max-width:54ch; } .bbi-teaser__cta{ display:inline-flex; align-items:center; gap:.5em; background:#FFE200; color:#000; font-family:"Outfit",system-ui,sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.95rem; padding:.9em 1.9em; border-radius:3px; text-decoration:none; transition:transform .15s ease, background .15s ease; } .bbi-teaser__cta::after{ content:"→"; font-weight:700; } .bbi-teaser__cta:hover{ background:#ffe93b; transform:translateY(-2px); color:#000; } @media (max-width:820px){ .bbi-teaser__inner{ grid-template-columns:1fr; gap:1.4rem; } .bbi-teaser__media img{ max-height:280px; } } /* BBI-Teaser: Video wie das Standbild behandeln (dauerhafter stummer Loop, 15.07.2026) */ .bbi-teaser__media video{ width:100%; height:100%; max-height:360px; object-fit:cover; border-radius:6px; display:block; background:#111; } .bbi-teaser__media video img{ width:100%; display:block; border-radius:6px; } /* BBI-Teaser: dezenter Ton-An/Aus-Button unten rechts (15.07.2026) */ .bbi-teaser__media{ position:relative; } .bbi-teaser__sound{ position:absolute; right:.7rem; bottom:.7rem; z-index:3; width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:50%; background:rgba(0,0,0,.42); color:#fff; cursor:pointer; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); transition:background .15s ease, transform .15s ease; } .bbi-teaser__sound:hover{ background:rgba(0,0,0,.68); transform:translateY(-1px); } .bbi-teaser__sound svg{ stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; } .bbi-teaser__sound polygon{ fill:currentColor; stroke:currentColor; } .bbi-teaser__sound-on{ display:none; } .bbi-teaser__sound[aria-pressed="true"] .bbi-teaser__sound-off{ display:none; } .bbi-teaser__sound[aria-pressed="true"] .bbi-teaser__sound-on{ display:inline; } /* ============ Premium Checkout (BRUNNER-CHECKOUT-2026-07-15) ============ */ /* Hinweis-/Umschalt-Leisten (Anmelden / Gutschein) als saubere Marken-Karten */ .woocommerce-checkout .woocommerce-info { position: relative; display: flex; align-items: center; gap: .7rem; background: var(--color-surface); border: 1px solid var(--color-line); border-left: 3px solid var(--brunner-orange); border-radius: 12px; padding: .95rem 1.2rem; margin: 0 0 1rem; color: var(--color-ink); font-size: .95rem; line-height: 1.4; box-shadow: 0 2px 12px rgba(0, 20, 38, .05); } .woocommerce-checkout .woocommerce-info::before { content: ""; flex: 0 0 auto; position: static; width: 20px; height: 20px; margin: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f59c00'%3E%3Cpath d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6z'/%3E%3C/svg%3E") center/contain no-repeat; color: transparent; font-size: 0; } .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f59c00'%3E%3Cpath d='M21.4 11.6l-9-9A2 2 0 0011 2H4a2 2 0 00-2 2v7a2 2 0 00.6 1.4l9 9a2 2 0 002.8 0l7-7a2 2 0 000-2.8zM6.5 8A1.5 1.5 0 118 6.5 1.5 1.5 0 016.5 8z'/%3E%3C/svg%3E") center/contain no-repeat; } .woocommerce-checkout .woocommerce-info a { color: var(--brunner-orange); font-weight: 700; text-decoration: none; } .woocommerce-checkout .woocommerce-info a:hover { text-decoration: underline; } /* Ausgeklappte Login- / Gutschein-Formulare als Karte */ .woocommerce-checkout form.login, .woocommerce-checkout form.checkout_coupon { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 14px; padding: 1.5rem 1.6rem; margin: 0 0 1.5rem; box-shadow: 0 6px 22px rgba(0, 20, 38, .06); } /* Formularfelder einheitlich & clean */ .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row textarea, .woocommerce-checkout .select2-container .select2-selection, .woocommerce-checkout select { background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 10px; padding: .8rem .9rem; color: var(--color-ink); transition: border-color .15s ease, box-shadow .15s ease; } .woocommerce-checkout .form-row input.input-text:focus, .woocommerce-checkout .form-row textarea:focus, .woocommerce-checkout select:focus { border-color: var(--brunner-orange); box-shadow: 0 0 0 3px rgba(245, 156, 0, .15); outline: none; } .woocommerce-checkout .form-row label { font-weight: 600; color: var(--color-ink); } /* Abschnitts-Überschriften */ .woocommerce-checkout h3#order_review_heading, .woocommerce-checkout .woocommerce-billing-fields h3, .woocommerce-checkout #payment .payment_box { color: var(--color-ink); } /* Zahlungsart-Box */ .woocommerce-checkout #payment { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 14px; padding: 1.25rem 1.5rem; } .woocommerce-checkout #payment ul.wc_payment_methods { border: 0; padding: 0; } .woocommerce-checkout #payment .wc_payment_method > label { font-weight: 700; color: var(--color-ink); } .woocommerce-checkout #payment .payment_box { background: var(--color-bg); border-radius: 10px; font-size: .9rem; line-height: 1.5; } .woocommerce-checkout #payment .payment_box::before { border-bottom-color: var(--color-bg); } .woocommerce-checkout #payment div.form-row.place-order .button#place_order { width: 100%; padding: 1rem 1.4rem; font-size: 1.05rem; font-weight: 800; border-radius: 12px; } /* ============ /Premium Checkout ============ */ /* Warenkorb-/Erfolgsmeldung passend zum dunklen Design (Ergänzung BRUNNER-CHECKOUT) */ .woocommerce .woocommerce-message, .woocommerce-checkout .woocommerce-message { background: var(--color-surface); border: 1px solid var(--color-line); border-left: 3px solid #2e9e5b; border-radius: 12px; color: var(--color-ink); box-shadow: 0 2px 12px rgba(0, 20, 38, .05); display: flex; align-items: center; gap: .6rem; } .woocommerce .woocommerce-message::before { color: #2e9e5b; position: static; } .woocommerce .woocommerce-message .button { margin-left: auto; } /* ===== WooCommerce-Hinweisboxen site-weit im Marken-Look (BRUNNER-BOXES-2026-07-15) ===== */ .woocommerce .woocommerce-info, .woocommerce-page .woocommerce-info, .woocommerce .cart-empty { position: relative; display: flex; align-items: center; gap: .7rem; background: var(--color-surface); border: 1px solid var(--color-line); border-left: 3px solid var(--brunner-orange); border-radius: 12px; padding: .95rem 1.2rem; margin: 0 0 1rem; color: var(--color-ink); font-size: .95rem; line-height: 1.4; box-shadow: 0 2px 12px rgba(0, 20, 38, .05); } .woocommerce .woocommerce-info::before, .woocommerce .cart-empty::before { content: ""; flex: 0 0 auto; position: static; width: 20px; height: 20px; margin: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f59c00'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E") center/contain no-repeat; color: transparent; font-size: 0; } .woocommerce .woocommerce-info a { color: var(--brunner-orange); font-weight: 700; text-decoration: none; } .woocommerce .woocommerce-info a:hover { text-decoration: underline; } /* Checkout-Umschalter behalten ihre eigenen Icons (höhere Spezifität) */ .woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f59c00'%3E%3Cpath d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6z'/%3E%3C/svg%3E") center/contain no-repeat; } .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f59c00'%3E%3Cpath d='M21.4 11.6l-9-9A2 2 0 0011 2H4a2 2 0 00-2 2v7a2 2 0 00.6 1.4l9 9a2 2 0 002.8 0l7-7a2 2 0 000-2.8zM6.5 8A1.5 1.5 0 118 6.5 1.5 1.5 0 016.5 8z'/%3E%3C/svg%3E") center/contain no-repeat; } /* Fehler-/Validierungsboxen passend (roter Akzent) */ .woocommerce .woocommerce-error { background: var(--color-surface); border: 1px solid var(--color-line); border-left: 3px solid #d64545; border-radius: 12px; padding: .95rem 1.2rem 1rem 2.6rem; color: var(--color-ink); box-shadow: 0 2px 12px rgba(0, 20, 38, .05); } .woocommerce .woocommerce-error::before { color: #d64545; } /* ===== /WooCommerce-Hinweisboxen ===== */