/* * TALENTS – CONSOLIDATED STYLESHEET * * Generated by: npm run build:talents-css * Token source: dist/talents.css (:root) * * Order is intentional: * 1. Shared tokens, standard elements and reusable components * 2. Page- and section-specific layouts and responsive adjustments */ /* ========================================================= 1. STANDARD ELEMENTS AND SHARED COMPONENTS ========================================================= */ * { /* outline: 1px solid rgba(0,255,0,0.1); */ background-repeat: no-repeat; box-sizing: border-box; text-rendering: geometricprecision; } :root { --c-pri: #D32566; /* red */ --c-pri-mute: #F4D9E3; /* red */ --c-pri-active: #B01E54; /* red */ /* --c-pri-hov: #EB5C60; */ /* --c-pri-act: #A90033; */ --c-black: #222222; /* misc */ --c-white: #FFFFFF; /* misc */ --c-white-glass: rgba( 255,255,255,0.82 ); /* misc */ --c-white-mute: #F0F0F0; /* misc */ --c-lgrey: #F9F9F9; /* misc */ --c-grey: #D4D4D4; /* misc */ --c-dgrey: #555555; /* misc */ --c-blue: #2B4781; --c-red: #A90015; --c-grey-profile: #727272; --c-result-hl: #2b598166; /* --c-lgrey-hov: #B8B4BB; */ /* misc */ /* --c-lgrey-act: #8F8994; */ /* misc */ --font-def: 'Source Sans 3', 'Source Sans', Arial, sans-serif; --font-hl: 'Poppins', 'futura-pt', Arial, sans-serif; /* Shared typography tokens */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fs-caption: 0.8125rem; --fs-meta: 0.9375rem; --fs-body: 1rem; --fs-body-lg: 1.0625rem; --fs-card-title: 1.5rem; --lh-tight: 1.2; --lh-body: 1.45; font-family: var(--font-def); font-size: 16px !important; color: var(--c-black); /* Legacy aliases: keep old selectors working while using one token source. */ --trurem: var(--fs-body-lg); --fz-tt: var(--fs-caption); --pad-xxxs: 0.25rem; --pad-xxs: 0.50rem; --pad-xs: 0.75rem; --pad-s: 1.00rem; --pad-m: 1.50rem; --pad-l: 2.50rem; --pad-xxl: 2.00rem; --pad-ctr-xs: 1.0rem; --pad-ctr-s: 1.5rem; --pad-ctr-m: 2.5rem; --pad-ctr-l: 5.0rem; --pad-ctr-cl: 7.5rem; --sides-def: 1.500rem; --sides-fix: 1.500rem; --topbot-def: 9.375rem; --gap-xs: 0.125rem; --gap-s: 0.250rem; --gap-m: 0.500rem; --gap-l: 1.000rem; --gap-xl: 1.500rem; --gap-cxl: 2.500rem; --gap-xxl: 2.000rem; /* Shared layout tokens */ --container-wide: calc(var(--landscape-content-w) + (8 * 2rem)); --container-default: calc(var(--landscape-content-w) + (2 * 2rem)); --talents-content-width: 1260px; --talents-content-gutter: 4rem; --talents-control-height: 2.75rem; --talents-card-radius: 0.75rem; --talents-section-spacing: 7.5rem; --section-spacing-compact: 3.75rem; --headline-size: clamp(2.75rem, 7vw, 6.875rem); --headline-h1-size: clamp(4.75rem, 7vw, 6.875rem); /* Shared component dimensions */ --splide-arrow-size: 2.5rem; --splide-arrow-icon-size: 1.2em; --link-arrow-size-sm: 0.7rem; --link-arrow-size-md: 0.8rem; --link-arrow-size-lg: 1rem; --rad-null: 0; --rad-xs: 0.25rem; --rad-s: 1.00rem; --rad-m: 1.25rem; --rad-l: 2.00rem; --rad-xl: 2.25rem; --rad-inf: 999999px; --stroke-thin: 0.125rem; --stroke-thic: 0.250rem; --landscape-content-w: 1260px; --col-w-xl-1: 8.333332%; --col-w-xl-2: 16.666666%; --col-w-xl-3: 25%; --col-w-xl-4: 33.333332%; --col-w-xl-5: 41.666666%; --col-w-xl-6: 50%; --col-w-xl-7: 58.333332%; --col-w-xl-8: 66.666666%; --col-w-xl-9: 75%; --col-w-xl-10: 83.333332%; --col-w-xl-11: 91.666666%; --col-w-xl-f: 100%; --w-l-mod: 0.842; --col-w-l-1: calc( var( --col-w-xl-1 ) * var( --w-l-mod ) ); --col-w-l-2: calc( var( --col-w-xl-2 ) * var( --w-l-mod ) ); --col-w-l-3: calc( var( --col-w-xl-3 ) * var( --w-l-mod ) ); --col-w-l-4: calc( var( --col-w-xl-4 ) * var( --w-l-mod ) ); --col-w-l-5: calc( var( --col-w-xl-5 ) * var( --w-l-mod ) ); --col-w-l-6: calc( var( --col-w-xl-6 ) * var( --w-l-mod ) ); --col-w-l-7: calc( var( --col-w-xl-7 ) * var( --w-l-mod ) ); --col-w-l-8: calc( var( --col-w-xl-8 ) * var( --w-l-mod ) ); --col-w-l-9: calc( var( --col-w-xl-9 ) * var( --w-l-mod ) ); --col-w-l-10: calc( var( --col-w-xl-10 ) * var( --w-l-mod ) ); --col-w-l-11: calc( var( --col-w-xl-11 ) * var( --w-l-mod ) ); --col-w-l-f: calc( var( --col-w-xl-f ) * var( --w-l-mod ) ); --w-m-mod: 0.632; --col-w-m-1: calc( var( --col-w-xl-1 ) * var( --w-m-mod ) ); --col-w-m-2: calc( var( --col-w-xl-2 ) * var( --w-m-mod ) ); --col-w-m-3: calc( var( --col-w-xl-3 ) * var( --w-m-mod ) ); --col-w-m-4: calc( var( --col-w-xl-4 ) * var( --w-m-mod ) ); --col-w-m-5: calc( var( --col-w-xl-5 ) * var( --w-m-mod ) ); --col-w-m-6: calc( var( --col-w-xl-6 ) * var( --w-m-mod ) ); --col-w-m-7: calc( var( --col-w-xl-7 ) * var( --w-m-mod ) ); --col-w-m-8: calc( var( --col-w-xl-8 ) * var( --w-m-mod ) ); --col-w-m-9: calc( var( --col-w-xl-9 ) * var( --w-m-mod ) ); --col-w-m-10: calc( var( --col-w-xl-10 ) * var( --w-m-mod ) ); --col-w-m-11: calc( var( --col-w-xl-11 ) * var( --w-m-mod ) ); --col-w-m-f: calc( var( --col-w-xl-f ) * var( --w-m-mod ) ); --w-s-mod: 0.253; --col-w-s-1: calc( var( --col-w-xl-1 ) * var( --w-s-mod ) ); --col-w-s-2: calc( var( --col-w-xl-2 ) * var( --w-s-mod ) ); --col-w-s-3: calc( var( --col-w-xl-3 ) * var( --w-s-mod ) ); --col-w-s-4: calc( var( --col-w-xl-4 ) * var( --w-s-mod ) ); --col-w-s-5: calc( var( --col-w-xl-5 ) * var( --w-s-mod ) ); --col-w-s-6: calc( var( --col-w-xl-6 ) * var( --w-s-mod ) ); --col-w-s-7: calc( var( --col-w-xl-7 ) * var( --w-s-mod ) ); --col-w-s-8: calc( var( --col-w-xl-8 ) * var( --w-s-mod ) ); --col-w-s-9: calc( var( --col-w-xl-9 ) * var( --w-s-mod ) ); --col-w-s-10: calc( var( --col-w-xl-10 ) * var( --w-s-mod ) ); --col-w-s-11: calc( var( --col-w-xl-11 ) * var( --w-s-mod ) ); --col-w-s-f: calc( var( --col-w-xl-f ) * var( --w-s-mod ) ); --wi-nav-height-def: 13.5rem; --wi-nav-height-min: 6.0rem; --wi-nav-height-mobile: 4.5rem; --wi-nav-height: var(--wi-nav-height-def); --wi-nav-shrink-speed: .4s; /* --wi-nav-shrink-delay: .4s; */ --wi-nav-shrink-delay: 0s; --wi-toggle-speed: .4s; /* --wi-toggle-func: cubic-bezier(.13,.56,.82,.34); */ /* --wi-toggle-func: cubic-bezier(.19,.61,.81,.39); */ --wi-toggle-func: ease-in-out; --wi-toggle-delay: .1s; --wi-toggle-delay-n-speed: 0.5s; --wi-bt-base-size : 2.75rem; --shadow-modal: 0 0 1rem 0.25rem rgba(0, 0, 0, 0.1); --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.04); --shadow-select-blue: 0 0 .33cqw .01 cqw #2b4881c3; /* Shared section colors and backgrounds */ --c-lblue: rgba(201, 215, 233, 0.5); --c-wblue: rgba(201, 215, 233, 0.3); --c-dmute: #e2e2e2; --c-white-dmute: var(--c-dmute); --c-lblue-radical-start: rgba(216, 237, 249, 0.2); --c-lblue-radical-end: rgba(176, 221, 245, 0.2); --cta-bg-radial: radial-gradient( circle, var(--c-lblue-radical-start) 0%, var(--c-lblue-radical-end) 100% ); --claims-bg-radial: radial-gradient( circle, var(--c-lblue) 0%, var(--c-wblue) 100% ); /* Shared motion tokens */ --ease: cubic-bezier(0.2, 0.7, 0.25, 1); --ease-standard: ease; --dur: 220ms; --dur-slow: 280ms; --logo-talents: url('/wp-content/themes/custom-theme/images/talents.svg'); --ico-logo: url('/wp-content/themes/custom-theme/images/icon_logo.svg'); --ico-arrow-dio: url("/wp-content/themes/custom-theme/images/icon_arrow_dio.svg"); --ico-arrow-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M22.6,14c.9,0,1.3-1.1.7-1.7L14.9,3.9c-.4-.4-.6-.9-.6-1.4,0-.5.2-1,.6-1.4.4-.4.9-.6,1.4-.6.5,0,1,.2,1.4.6l13.6,13.6c.2.2.4.4.4.7,0,.2.1.5.1.8s0,.5-.1.8c0,.2-.2.5-.4.7l-13.6,13.6c-.4.4-.8.6-1.4.6s-1.1-.2-1.5-.6c-.4-.4-.6-.9-.6-1.5s.2-1.1.6-1.5l8.3-8.3c.6-.6.2-1.7-.7-1.7H2.1c-.6,0-1.1-.2-1.5-.6C.2,17.1,0,16.6,0,16c0-.6.2-1.1.6-1.5.4-.4.9-.6,1.5-.6h20.5Z'/%3E%3C/svg%3E"); --ico-arrow-small: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z'/%3E%3C/svg%3E"); --ico-plus: url("data:image/svg+xml,%3Csvg width='22' height='24' viewBox='0 0 22 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.42857 13.7143H1.57143C1.12619 13.7143 0.752976 13.55 0.451786 13.2214C0.150595 12.8929 0 12.4857 0 12C0 11.5143 0.150595 11.1071 0.451786 10.7786C0.752976 10.45 1.12619 10.2857 1.57143 10.2857H9.42857V1.71429C9.42857 1.22857 9.57917 0.821429 9.88036 0.492857C10.1815 0.164286 10.5548 0 11 0C11.4452 0 11.8185 0.164286 12.1196 0.492857C12.4208 0.821429 12.5714 1.22857 12.5714 1.71429V10.2857H20.4286C20.8738 10.2857 21.247 10.45 21.5482 10.7786C21.8494 11.1071 22 11.5143 22 12C22 12.4857 21.8494 12.8929 21.5482 13.2214C21.247 13.55 20.8738 13.7143 20.4286 13.7143H12.5714V22.2857C12.5714 22.7714 12.4208 23.1786 12.1196 23.5071C11.8185 23.8357 11.4452 24 11 24C10.5548 24 10.1815 23.8357 9.88036 23.5071C9.57917 23.1786 9.42857 22.7714 9.42857 22.2857V13.7143Z' fill='%23000'/%3E%3C/svg%3E"); /* Compatibility aliases for the newer icon naming convention. */ --icon-arrow-dio: var(--ico-arrow-dio); --icon-arrow-external: var(--ico-arrow-external); --icon-arrow-small: var(--ico-arrow-small); --icon-plus: var(--ico-plus); --icon-arrow-down-small: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5.50562 7.81701L8.65169 4.67095C8.7801 4.54254 8.92991 4.48101 9.10112 4.48636C9.27234 4.49171 9.42215 4.55859 9.55056 4.687C9.66827 4.81541 9.7298 4.96522 9.73515 5.13644C9.7405 5.30765 9.67897 5.45746 9.55056 5.58587L5.313 9.82344C5.2488 9.88764 5.17924 9.93312 5.10433 9.95987C5.02943 9.98662 4.94917 10 4.86356 10C4.77796 10 4.6977 9.98662 4.62279 9.95987C4.54789 9.93312 4.47833 9.88764 4.41413 9.82344L0.176565 5.58587C0.058855 5.46816 0 5.32103 0 5.14446C0 4.9679 0.058855 4.81541 0.176565 4.687C0.304976 4.55859 0.457464 4.49438 0.634029 4.49438C0.810594 4.49438 0.963082 4.55859 1.09149 4.687L4.22151 7.81701L4.22151 0.642054C4.22151 0.460139 4.28304 0.30765 4.4061 0.18459C4.52916 0.0615299 4.68165 0 4.86356 0C5.04548 0 5.19797 0.0615299 5.32103 0.18459C5.44409 0.30765 5.50562 0.460139 5.50562 0.642054L5.50562 7.81701Z'/%3E%3C/svg%3E"); --icon-file-sheet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 24'%3E%3Cpath d='M2.375 24C1.72187 24 1.16276 23.765 0.697656 23.295C0.232552 22.825 0 22.26 0 21.6V2.4C0 1.74 0.232552 1.175 0.697656 0.705C1.16276 0.235 1.72187 0 2.375 0H10.8953C11.212 0 11.5138 0.06 11.8008 0.18C12.0878 0.3 12.3401 0.47 12.5578 0.69L18.3172 6.51C18.5349 6.73 18.7031 6.985 18.8219 7.275C18.9406 7.565 19 7.87 19 8.19V21.6C19 22.26 18.7674 22.825 18.3023 23.295C17.8372 23.765 17.2781 24 16.625 24H2.375ZM10.6875 7.2V2.4H2.375V21.6H16.625V8.4H11.875C11.5385 8.4 11.2565 8.285 11.0289 8.055C10.8013 7.825 10.6875 7.54 10.6875 7.2Z'/%3E%3C/svg%3E"); --icon-download-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Crect width='44' height='44' rx='22' fill='%23D32566'/%3E%3Cpath d='M21.5312 26.6711C21.3854 26.6216 21.25 26.5375 21.125 26.4187L16.625 22.1438C16.375 21.9062 16.2552 21.6292 16.2656 21.3125C16.276 20.9958 16.3958 20.7188 16.625 20.4812C16.875 20.2438 17.1719 20.1201 17.5156 20.1102C17.8594 20.1003 18.1562 20.2141 18.4062 20.4516L20.75 22.6781V14.1875C20.75 13.851 20.8698 13.569 21.1094 13.3414C21.349 13.1138 21.6458 13 22 13C22.3542 13 22.651 13.1138 22.8906 13.3414C23.1302 13.569 23.25 13.851 23.25 14.1875V22.6781L25.5938 20.4516C25.8438 20.2141 26.1406 20.1003 26.4844 20.1102C26.8281 20.1201 27.125 20.2438 27.375 20.4812C27.6042 20.7188 27.724 20.9958 27.7344 21.3125C27.7448 21.6292 27.625 21.9062 27.375 22.1438L22.875 26.4187C22.75 26.5375 22.6146 26.6216 22.4688 26.6711C22.3229 26.7206 22.1667 26.7453 22 26.7453C21.8333 26.7453 21.6771 26.7206 21.5312 26.6711ZM14.5 32C13.8125 32 13.224 31.7674 12.7344 31.3023C12.2448 30.8372 12 30.2781 12 29.625V27.25C12 26.9135 12.1198 26.6315 12.3594 26.4039C12.599 26.1763 12.8958 26.0625 13.25 26.0625C13.6042 26.0625 13.901 26.1763 14.1406 26.4039C14.3802 26.6315 14.5 26.9135 14.5 27.25V29.625H29.5V27.25C29.5 26.9135 29.6198 26.6315 29.8594 26.4039C30.099 26.1763 30.3958 26.0625 30.75 26.0625C31.1042 26.0625 31.401 26.1763 31.6406 26.4039C31.8802 26.6315 32 26.9135 32 27.25V29.625C32 30.2781 31.7552 30.8372 31.2656 31.3023C30.776 31.7674 30.1875 32 29.5 32H14.5Z' fill='white'/%3E%3C/svg%3E"); --ico-arrow-simple: url("/wp-content/themes/custom-theme/images/icon_arrow_simple.svg"); --ico-pin: url("/wp-content/themes/custom-theme/images/icon_pin.svg"); --ico-bag-full: url("/wp-content/themes/custom-theme/images/icon_bag_full.svg"); --ico-bag-empty: url("/wp-content/themes/custom-theme/images/icon_bag_empty.svg"); --ico-bookmark-full: url("/wp-content/themes/custom-theme/images/icon_bookmark_full.svg"); --ico-bookmark-empty: url("/wp-content/themes/custom-theme/images/icon_bookmark_empty.svg"); --ico-bell: url("/wp-content/themes/custom-theme/images/icon_bell.svg"); --ico-close: url("/wp-content/themes/custom-theme/images/icon_close.svg"); --ico-building-full: url("/wp-content/themes/custom-theme/images/icon_building_full.svg"); --ico-building-empty: url("/wp-content/themes/custom-theme/images/icon_building_empty.svg"); --ico-people-full: url("/wp-content/themes/custom-theme/images/icon_people_full.svg"); --ico-people-empty: url("/wp-content/themes/custom-theme/images/icon_people_empty.svg"); --ico-speech-full: url("/wp-content/themes/custom-theme/images/icon_speech_full.svg"); --ico-speech-empty: url("/wp-content/themes/custom-theme/images/icon_speech_empty.svg"); --ico-gear-full: url("/wp-content/themes/custom-theme/images/icon_gear_full.svg"); --ico-gear-empty: url("/wp-content/themes/custom-theme/images/icon_gear_empty.svg"); --ico-download: url("/wp-content/themes/custom-theme/images/icon_download.svg"); --ico-person: url("/wp-content/themes/custom-theme/images/icon_person.svg"); --ico-letter: url("/wp-content/themes/custom-theme/images/icon_letter.svg"); --ico-globe: url("/wp-content/themes/custom-theme/images/icon_globe.svg"); --ico-pen: url("/wp-content/themes/custom-theme/images/icon_pen.svg"); --ico-check: url("/wp-content/themes/custom-theme/images/icon_check.svg"); --ico-pics: url("/wp-content/themes/custom-theme/images/icon_pics.svg"); --ico-pic-add: url("/wp-content/themes/custom-theme/images/icon_pic-add.svg"); --ico-haltung-check: url("/wp-content/themes/custom-theme/images/icon_haltung_check.svg"); --ico-image: url("/wp-content/themes/custom-theme/images/icon_image.svg"); --ico-a-z: url("/wp-content/themes/custom-theme/images/icon_a-z.svg"); --ico-z-a: url("/wp-content/themes/custom-theme/images/icon_z-a.svg"); --ico-time-up: url("/wp-content/themes/custom-theme/images/icon_time-up.svg"); --ico-time-down: url("/wp-content/themes/custom-theme/images/icon_time-down.svg"); --ico-hourglass: url("/wp-content/themes/custom-theme/images/icon_hourglass.svg"); --ico-book: url("/wp-content/themes/custom-theme/images/icon_book.svg"); --ico-file: url("/wp-content/themes/custom-theme/images/icon_file.svg"); --ico-sheet: url("/wp-content/themes/custom-theme/images/icon_sheet.svg"); --ico-work-histo: url("/wp-content/themes/custom-theme/images/icon_work-history.svg"); --ico-bullets: url("/wp-content/themes/custom-theme/images/icon_bullets.svg"); --ico-compass: url("/wp-content/themes/custom-theme/images/icon_compass.svg"); --ico-graduate: url("/wp-content/themes/custom-theme/images/icon_graduate.svg"); --ico-phone: url("/wp-content/themes/custom-theme/images/icon_phone.svg"); --ico-shapes: url("/wp-content/themes/custom-theme/images/icon_shapes.svg"); --ico-signs: url("/wp-content/themes/custom-theme/images/icon_signs.svg"); --ico-grid: url("/wp-content/themes/custom-theme/images/icon_grid.svg"); --ico-dots: url("/wp-content/themes/custom-theme/images/icon_dots.svg"); --ico-filter: url("/wp-content/themes/custom-theme/images/icon_filter.svg"); --ico-filter-full: url("/wp-content/themes/custom-theme/images/icon_filter_full.svg"); --ico-filter-off: url("/wp-content/themes/custom-theme/images/icon_filter_off.svg"); --ico-search: url("/wp-content/themes/custom-theme/images/icon_search.svg"); --ico-order: url("/wp-content/themes/custom-theme/images/icon_order.svg"); --ico-graduation: url("/wp-content/themes/custom-theme/images/icon_graduation.svg"); --ico-trash: url("/wp-content/themes/custom-theme/images/icon_trash.svg"); --ico-linkedin: url("/wp-content/themes/custom-theme/images/icon_linkedin.svg"); --ico-instagram: url("/wp-content/themes/custom-theme/images/icon_instagram.svg"); --ico-star: url("/wp-content/themes/custom-theme/images/icon_star.svg"); --ico-extern: url("/wp-content/themes/custom-theme/images/icon_extern.svg"); --ico-bidirection: url("/wp-content/themes/custom-theme/images/icon_bidirection.svg"); --ico-exit: url("/wp-content/themes/custom-theme/images/icon_exit.svg"); --ico-play-motion: url("/wp-content/themes/custom-theme/images/icon_play-motion.svg"); --ico-pause-motion: url("/wp-content/themes/custom-theme/images/icon_pause-motion.svg"); --ico-pause: url("/wp-content/themes/custom-theme/images/icon_pause.svg"); --ico-lock-clock: url("/wp-content/themes/custom-theme/images/icon_lock-clock.svg"); --ico-exclamation: url("/wp-content/themes/custom-theme/images/icon_exclamation.svg"); --ico-handwave: url("/wp-content/themes/custom-theme/images/icon_handwave.svg"); --ico-award-star: url("/wp-content/themes/custom-theme/images/icon_award-star.svg"); --ico-book-2: url("/wp-content/themes/custom-theme/images/icon_book-2.svg"); --ico-id-card: url("/wp-content/themes/custom-theme/images/icon_id-card.svg"); --ico-review: url("/wp-content/themes/custom-theme/images/icon_review.svg"); --ico-trophy: url("/wp-content/themes/custom-theme/images/icon_trophy.svg"); } /* ------- */ /* GENERAL */ /* ------- */ button , details , summary , dialog , address , blockquote , fieldset , ul , ol , dl , li , menu { appearance: none; margin: 0; padding: 0; border: none; background: none; font-style: normal; } summary { display: block; float: unset; } summary::marker { display: none; } ul , ol, li { list-style: none; } body.mode-wpg .login.wt-bt { opacity: 0 !important; transform: translateX( 110% ) !important; } hr { height: 1px; height: round( up, 1px, 1px ); margin: 0; border: 0; background: var(--c-grey); } /* ------- */ /* TEXT */ /* ------- */ p , address { font-size: var(--trurem); font-weight: 400; line-height: 1.4rem; color: var(--c-dgrey); a { font-size: inherit; font-weight: inherit; line-height: inherit; color: var(--c-pri); } } .txt { max-width: 100%; } a { cursor: pointer; display: block; text-decoration: none; color: inherit; &:is( :visited , :active ) , &:is( :visited , :active ) * { color: inherit } &.wt-link { font-size: 1rem; font-weight: 400; line-height: 120%;; color: var(--c-pri); } } a.wt-link , p a { &::after { content: '→'; font-size: 0.001px; color: transparent; background-color: transparent; background-image: url('/wp-content/themes/custom-theme/images/icon_arrow_simple.svg'); transform: translateX( 0 ); transition: 0.5s ease-in-out; } &:hover , &:focus { &::after { transform: translateX( 30% ); /* animation: wiggleSlow 1s ease-in-out 0s infinite; */ } } } @keyframes wiggleSlow { 0% { transform: translateX( 0% ); } 100% { transform: translateX( +50% ); } } @keyframes pointDown { 0% { transform: translateY( 0 ); } 8% { transform: translateY( 30% ); } 16% { transform: translateY( 0 ); } 24% { transform: translateY( 30% ); } 32% { transform: translateY( 0 ); } 40% { transform: translateY( 30% ); } 48% { transform: translateY( 0 ); } 100% { transform: translateY( 0 ); } } @keyframes pointUp { 0% { transform: translateY( 0 ); } 8% { transform: translateY( -30% ); } 16% { transform: translateY( 0 ); } 24% { transform: translateY( -30% ); } 32% { transform: translateY( 0 ); } 40% { transform: translateY( -30% ); } 48% { transform: translateY( 0 ); } 100% { transform: translateY( 0 ); } } a:is( .wt-link-ext-s , .wt-link-ext-m , .wt-link-ext-m ) ::after { content: '↗'; font-size: 0.001px; color: transparent; background-color: transparent; background-image: url('/wp-content/themes/custom-theme/images/icon_arrow_dio.svg'); width: 1.25rem; height: 1.25rem; &.wt-link-ext-s { width: .7rem; height: .7rem; } &.wt-link-ext-l { width: 1.5rem; height: 1.5rem; } } label { cursor: pointer; user-select: none; } b , strong { font-weight: 700; } h1 , h2 , h3 , h4 , h5 , h6 { font-family: var(--font-hl); font-weight: 700; line-height: 100%; } h1 , h2 { font-size: 6.875rem; } h1 { line-height: 105%; } *.h2-tagline { /* used together with H2. */ font-family: var(--font-def) !important; font-size: 3rem !important; color: var(--c-black) !important; font-weight: 700 !important; } h3 { font-size: 2rem; font-weight: 600; line-height: 120%; } h4 { font-size: 1.5rem; font-weight: 700; line-height: 100%; } h5 { font-size: var(--trurem); font-weight: 500; line-height: 100%; } .hashtag { color: var(--c-pri); /* &::before { content: '#'; } */ } .keyword-talents { font-style: italic; color: var(--c-pri); text-transform: lowercase; } hgroup.section-heads { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: var( --pad-xs ) var( --pad-l ); h2::after , h3::after { content: '.'; display: inline; } &:has( > .talents-mark ) { flex-wrap: wrap; .talents-mark { margin-right: 100%; } } } .cutoff { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; opacity: 0.001; font-size: 0.001px; } @keyframes waiterWait { 0% { rotate: 0deg; } 100% { rotate: 360deg; } } body:has( .waiter.waiting ) { cursor: progress; } .waiter { &> * { filter: none; transition: filter 0.5s ease-in-out 0.2s; } &.waiting { pointer-events: none; container-type: size; position: relative; &> * { filter: grayscale( 10% ) saturate( 60% ) brightness( 110% ) opacity( 90% ); } &::after { pointer-events: none; --waiter-w: min( 50cqw, 50cqh ); content: ''; box-sizing: border-box; z-index: 99; position: absolute; left: calc( 50% - ( var(--waiter-w) / 2 ) ); top: calc( 50% - ( var(--waiter-w) / 2 ) ); width: var(--waiter-w); height: var(--waiter-w); transform-origin: 50% 50%; border: 0.2rem dashed var(--c-black); border-radius: var(--rad-inf); opacity: 0.7; rotate: 0deg; animation: waiterWait 2.5s linear 0s infinite; } } } .wt-pre-icon::before { content: ''; flex-shrink: 0; display: inline-block; /* vertical-align: top; */ /* align-self: flex-start; */ font-size: inherit; font-weight: inherit; line-height: 100%; width: 1lh; height: 1lh; margin-right: .5lh; background-color: currentColor; mask-image: radial-gradient(circle, #000 0%, #000 50%, transparent 50.001%); -webkit-mask-image: radial-gradient(circle, #000 0%, #000 50%, transparent 50.001%); mask-position: center; -webkit-mask-position: center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: contain; -webkit-mask-size: contain; } .wt-suff-icon::after { content: ''; flex-shrink: 0; display: inline-block; /* vertical-align: top; */ /* align-self: flex-end; */ font-size: inherit; font-weight: inherit; line-height: 100%; width: 1lh; height: 1lh; margin-left: .5lh; background-color: currentColor; mask-image: radial-gradient(circle, #000 0%, #000 50%, transparent 50.001%); -webkit-mask-image: radial-gradient(circle, #000 0%, #000 50%, transparent 50.001%); mask-position: center; -webkit-mask-position: center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: contain; -webkit-mask-size: contain; } .wt-icon { display: block; width: 100%; height: 100%; min-width: 100%; min-height: 100%; padding: .75rem; color: inherit; background-color: currentColor; mask-image: radial-gradient(circle, #000 0%, #000 50%, transparent 50.001%); -webkit-mask-image: radial-gradient(circle, #000 0%, #000 50%, transparent 50.001%); mask-position: center; -webkit-mask-position: center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: auto 1.1rem; -webkit-mask-size: auto 1.1rem; } .wt-icon[data-icon="plus"] , .wt-pre-icon[data-icon="plus"]::before , .wt-suff-icon[data-icon="plus"]::after { mask-image: var(--ico-plus) !important; -webkit-mask-image: var(--ico-plus) !important; } .wt-icon[data-icon="pin"] , .wt-pre-icon[data-icon="pin"]::before , .wt-suff-icon[data-icon="pin"]::after { mask-image: var(--ico-pin) !important; -webkit-mask-image: var(--ico-pin) !important; } .wt-icon[data-icon="arr-simp"] , .wt-pre-icon[data-icon="arr-simp"]::before , .wt-suff-icon[data-icon="arr-simp"]::after { mask-image: var(--ico-arrow-simple) !important; -webkit-mask-image: var(--ico-arrow-simple) !important; mask-position-x: 60% !important; -webkit-mask-position-x: 60% !important; } .wt-icon[data-icon="bag"] , .wt-pre-icon[data-icon="bag"]::before , .wt-suff-icon[data-icon="bag"]::after { mask-image: var(--ico-bag-empty) !important; -webkit-mask-image: var(--ico-bag-empty) !important; } .wt-icon[data-icon="bag-full"] , .active > .wt-icon[data-icon^="bag"] , .wt-pre-icon[data-icon="bag-full"]::before , .wt-suff-icon[data-icon="bag-full"]::after { mask-image: var(--ico-bag-full) !important; -webkit-mask-image: var(--ico-bag-full) !important; } .wt-icon[data-icon="bag-empty"] , .wt-pre-icon[data-icon="bag-empty"]::before , .wt-suff-icon[data-icon="bag-empty"]::after { mask-image: var(--ico-bag-empty) !important; -webkit-mask-image: var(--ico-bag-empty) !important; } .wt-icon[data-icon="bookmark-empty"] , .wt-icon[data-icon="bookmark"] , *:is( .wt-pre-icon , .wt-suff-icon )[data-icon="bookmark-empty"]::before , *:is( .wt-pre-icon , .wt-suff-icon )[data-icon="bookmark"]::before { mask-image: var(--ico-bookmark-empty) !important; -webkit-mask-image: var(--ico-bookmark-empty) !important; } .wt-icon[data-icon="bookmark-full"] , .wt-icon[data-icon="bookmark"].active , *:is( .wt-pre-icon , .wt-suff-icon ).active[data-icon="bookmark"]::before , *:is( .wt-pre-icon , .wt-suff-icon )[data-icon="bookmark-full"]::before , *:is( .wt-pre-icon , .wt-suff-icon ):is( [data-icon="bookmark"], [data-icon="bookmark-full"] ).active::before , input:checked + :is( [data-icon="bookmark"], [data-icon="bookmark-full"] ):is( label ) { mask-image: var(--ico-bookmark-full) !important; -webkit-mask-image: var(--ico-bookmark-full) !important; } .wt-icon[data-icon="bell"] , *:is( .wt-pre-icon , .wt-suff-icon )[data-icon="bell"]::before { mask-image: var(--ico-bell) !important; -webkit-mask-image: var(--ico-bell) !important; } .wt-icon[data-icon="close"] , .wt-pre-icon[data-icon="close"]::before , .wt-suff-icon[data-icon="close"]::after { mask-image: var(--ico-close) !important; -webkit-mask-image: var(--ico-close) !important; } .wt-icon[data-icon="people"] , *:is( .wt-pre-icon , .wt-suff-icon )[data-icon="people"]::before { mask-image: var(--ico-people-empty) !important; -webkit-mask-image: var(--ico-people-empty) !important; } .wt-icon[data-icon="people-full"] , .active > .wt-icon[data-icon^="people"] , *:is( .wt-pre-icon , .wt-suff-icon )[data-icon="people-full"]::before { mask-image: var(--ico-people-full) !important; -webkit-mask-image: var(--ico-people-full) !important; } .wt-icon[data-icon="people-empty"] , *:is( .wt-pre-icon , .wt-suff-icon )[data-icon="people-empty"]::before { mask-image: var(--ico-people-empty) !important; -webkit-mask-image: var(--ico-people-empty) !important; } .wt-icon[data-icon="building"] , *:is( .wt-pre-icon , .wt-suff-icon )[data-icon="building"]::before { mask-image: var(--ico-building-empty) !important; -webkit-mask-image: var(--ico-building-empty) !important; } .wt-icon[data-icon="building-full"] , .active > .wt-icon[data-icon^="building"] , *:is( .wt-pre-icon , .wt-suff-icon )[data-icon="building-full"]::before { mask-image: var(--ico-building-full) !important; -webkit-mask-image: var(--ico-building-full) !important; } .wt-icon[data-icon="building-empty"] , *:is( .wt-pre-icon , .wt-suff-icon )[data-icon="building-empty"]::before { mask-image: var(--ico-building-empty) !important; -webkit-mask-image: var(--ico-building-empty) !important; } .wt-icon[data-icon="speech"] , *:is( .wt-pre-icon , .wt-suff-icon )[data-icon="speech"]::before { mask-image: var(--ico-speech-empty) !important; -webkit-mask-image: var(--ico-speech-empty) !important; } .wt-icon[data-icon="speech-full"] , .active > .wt-icon[data-icon^="speech"] , *:is( .wt-pre-icon , .wt-suff-icon )[data-icon="speech-full"]::before { mask-image: var(--ico-speech-full) !important; -webkit-mask-image: var(--ico-speech-full) !important; } .wt-icon[data-icon="speech-empty"] , *:is( .wt-pre-icon , .wt-suff-icon )[data-icon="speech-empty"]::before { mask-image: var(--ico-speech-empty) !important; -webkit-mask-image: var(--ico-speech-empty) !important; } .wt-icon[data-icon="download"] , .wt-pre-icon[data-icon="download"]::before , .wt-suff-icon[data-icon="download"]::after { mask-image: var(--ico-download) !important; -webkit-mask-image: var(--ico-download) !important; } .wt-icon[data-icon="gear"] , .wt-pre-icon[data-icon="gear"]::before , .wt-suff-icon[data-icon="gear"]::after { mask-image: var(--ico-gear-empty) !important; -webkit-mask-image: var(--ico-gear-empty) !important; } .wt-icon[data-icon="gear-full"] , .active > .wt-icon[data-icon^="gear"] , *:is( .wt-pre-icon , .wt-suff-icon )[data-icon="gear-full"]::before { mask-image: var(--ico-gear-full) !important; -webkit-mask-image: var(--ico-gear-full) !important; } .wt-icon[data-icon="gear-empty"] , *:is( .wt-pre-icon , .wt-suff-icon )[data-icon="gear-empty"]::before { mask-image: var(--ico-gear-empty) !important; -webkit-mask-image: var(--ico-gear-empty) !important; } .wt-icon[data-icon="person"] , .wt-pre-icon[data-icon="person"]::before , .wt-suff-icon[data-icon="person"]::after { mask-image: var(--ico-person) !important; -webkit-mask-image: var(--ico-person) !important; } .wt-icon[data-icon="letter"] , .wt-pre-icon[data-icon="letter"]::before , .wt-suff-icon[data-icon="letter"]::after { mask-image: var(--ico-letter) !important; -webkit-mask-image: var(--ico-letter) !important; } .wt-icon[data-icon="globe"] , .wt-pre-icon[data-icon="globe"]::before , .wt-suff-icon[data-icon="globe"]::after { mask-image: var(--ico-globe) !important; -webkit-mask-image: var(--ico-globe) !important; } .wt-icon[data-icon="pen"] , .wt-pre-icon[data-icon="pen"]::before , .wt-suff-icon[data-icon="pen"]::after { mask-image: var(--ico-pen) !important; -webkit-mask-image: var(--ico-pen) !important; } .wt-icon[data-icon="check"] , .wt-pre-icon[data-icon="check"]::before , .wt-suff-icon[data-icon="check"]::after { mask-image: var(--ico-check) !important; -webkit-mask-image: var(--ico-check) !important; } .wt-icon[data-icon="pics"] , .wt-pre-icon[data-icon="pics"]::before , .wt-suff-icon[data-icon="pics"]::after { mask-image: var(--ico-pics) !important; -webkit-mask-image: var(--ico-pics) !important; } .wt-icon[data-icon="pic-add"] , .wt-pre-icon[data-icon="pic-add"]::before , .wt-suff-icon[data-icon="pic-add"]::after { mask-image: var(--ico-pic-add) !important; -webkit-mask-image: var(--ico-pic-add) !important; } .wt-icon[data-icon="a-z"] , .wt-pre-icon[data-icon="a-z"]::before , .wt-suff-icon[data-icon="a-z"]::after { mask-image: var(--ico-a-z) !important; -webkit-mask-image: var(--ico-a-z) !important; } .wt-icon[data-icon="z-a"] , .wt-pre-icon[data-icon="z-a"]::before , .wt-suff-icon[data-icon="z-a"]::after { mask-image: var(--ico-z-a) !important; -webkit-mask-image: var(--ico-z-a) !important; } .wt-icon[data-icon="time-up"] , .wt-pre-icon[data-icon="time-up"]::before , .wt-suff-icon[data-icon="time-up"]::after { mask-image: var(--ico-time-up) !important; -webkit-mask-image: var(--ico-time-up) !important; } .wt-icon[data-icon="time-down"] , .wt-pre-icon[data-icon="time-down"]::before , .wt-suff-icon[data-icon="time-down"]::after { mask-image: var(--ico-time-down) !important; -webkit-mask-image: var(--ico-time-down) !important; } .wt-icon[data-icon="hourglass"] , .wt-pre-icon[data-icon="hourglass"]::before , .wt-suff-icon[data-icon="hourglass"]::after { mask-image: var(--ico-hourglass) !important; -webkit-mask-image: var(--ico-hourglass) !important; } .wt-icon[data-icon="book"] , .wt-pre-icon[data-icon="book"]::before , .wt-suff-icon[data-icon="book"]::after { mask-image: var(--ico-book) !important; -webkit-mask-image: var(--ico-book) !important; } .wt-icon[data-icon="file"] , .wt-pre-icon[data-icon="file"]::before , .wt-suff-icon[data-icon="file"]::after { mask-image: var(--ico-file) !important; -webkit-mask-image: var(--ico-file) !important; } .wt-icon[data-icon="sheet"] , .wt-pre-icon[data-icon="sheet"]::before , .wt-suff-icon[data-icon="sheet"]::after { mask-image: var(--ico-sheet) !important; -webkit-mask-image: var(--ico-sheet) !important; } .wt-icon[data-icon="work-history"] , .wt-pre-icon[data-icon="work-history"]::before , .wt-suff-icon[data-icon="work-history"]::after { mask-image: var(--ico-work-histo) !important; -webkit-mask-image: var(--ico-work-histo) !important; } .wt-icon[data-icon="compass"] , .wt-pre-icon[data-icon="compass"]::before , .wt-suff-icon[data-icon="compass"]::after { mask-image: var(--ico-compass) !important; -webkit-mask-image: var(--ico-compass) !important; } .wt-icon[data-icon="graduate"] , .wt-pre-icon[data-icon="graduate"]::before , .wt-suff-icon[data-icon="graduate"]::after { mask-image: var(--ico-graduate) !important; -webkit-mask-image: var(--ico-graduate) !important; } .wt-icon[data-icon="phone"] , .wt-pre-icon[data-icon="phone"]::before , .wt-suff-icon[data-icon="phone"]::after { mask-image: var(--ico-phone) !important; -webkit-mask-image: var(--ico-phone) !important; } .wt-icon[data-icon="shapes"] , .wt-pre-icon[data-icon="shapes"]::before , .wt-suff-icon[data-icon="shapes"]::after { mask-image: var(--ico-shapes) !important; -webkit-mask-image: var(--ico-shapes) !important; } .wt-icon[data-icon="signs"] , .wt-pre-icon[data-icon="signs"]::before , .wt-suff-icon[data-icon="signs"]::after { mask-image: var(--ico-signs) !important; -webkit-mask-image: var(--ico-signs) !important; } .wt-icon[data-icon="grid"] , .wt-pre-icon[data-icon="grid"]::before , .wt-suff-icon[data-icon="grid"]::after { mask-image: var(--ico-grid) !important; -webkit-mask-image: var(--ico-grid) !important; } .wt-icon[data-icon="bullets"] , .wt-pre-icon[data-icon="bullets"]::before , .wt-suff-icon[data-icon="bullets"]::after { mask-image: var(--ico-bullets) !important; -webkit-mask-image: var(--ico-bullets) !important; } .wt-icon[data-icon="dots"] , .wt-pre-icon[data-icon="dots"]::before , .wt-suff-icon[data-icon="dots"]::after { mask-image: var(--ico-dots) !important; -webkit-mask-image: var(--ico-dots) !important; mask-size: auto 100%; -webkit-mask-size: auto 100%; } .wt-icon[data-icon="filter"] , .wt-pre-icon[data-icon="filter"]::before , .wt-suff-icon[data-icon="filter"]::after { mask-image: var(--ico-filter) !important; -webkit-mask-image: var(--ico-filter) !important; } .wt-icon[data-icon="filter-full"] , .wt-pre-icon[data-icon="filter-full"]::before , .wt-suff-icon[data-icon="filter-full"]::after { mask-image: var(--ico-filter-full) !important; -webkit-mask-image: var(--ico-filter-full) !important; } .wt-icon[data-icon="filter-off"] , .wt-pre-icon[data-icon="filter-off"]::before , .wt-suff-icon[data-icon="filter-off"]::after { mask-image: var(--ico-filter-off) !important; -webkit-mask-image: var(--ico-filter-off) !important; } .wt-icon[data-icon="search"] , .wt-pre-icon[data-icon="search"]::before , .wt-suff-icon[data-icon="search"]::after { mask-image: var(--ico-search) !important; -webkit-mask-image: var(--ico-search) !important; } .wt-icon[data-icon="order"] , .wt-pre-icon[data-icon="order"]::before , .wt-suff-icon[data-icon="order"]::after { mask-image: var(--ico-order) !important; -webkit-mask-image: var(--ico-order) !important; } .wt-icon[data-icon="graduation"] , .wt-pre-icon[data-icon="graduation"]::before , .wt-suff-icon[data-icon="graduation"]::after { mask-image: var(--ico-graduation) !important; -webkit-mask-image: var(--ico-graduation) !important; } .wt-icon[data-icon="trash"] , .wt-pre-icon[data-icon="trash"]::before , .wt-suff-icon[data-icon="trash"]::after { mask-image: var(--ico-trash) !important; -webkit-mask-image: var(--ico-trash) !important; } .wt-icon[data-icon="linkedin"] , .wt-pre-icon[data-icon="linkedin"]::before , .wt-suff-icon[data-icon="linkedin"]::after { mask-image: var(--ico-linkedin) !important; -webkit-mask-image: var(--ico-linkedin) !important; } .wt-icon[data-icon="instagram"] , .wt-pre-icon[data-icon="instagram"]::before , .wt-suff-icon[data-icon="instagram"]::after { mask-image: var(--ico-instagram) !important; -webkit-mask-image: var(--ico-instagram) !important; } .wt-icon[data-icon="star"] , .wt-pre-icon[data-icon="star"]::before , .wt-suff-icon[data-icon="star"]::after { mask-image: var(--ico-star) !important; -webkit-mask-image: var(--ico-star) !important; } .wt-icon[data-icon="extern"] , .wt-pre-icon[data-icon="extern"]::before , .wt-suff-icon[data-icon="extern"]::after { mask-image: var(--ico-extern) !important; -webkit-mask-image: var(--ico-extern) !important; } .wt-icon[data-icon="bidirection"] , .wt-pre-icon[data-icon="bidirection"]::before , .wt-suff-icon[data-icon="bidirection"]::after { mask-image: var(--ico-bidirection) !important; -webkit-mask-image: var(--ico-bidirection) !important; } .wt-icon[data-icon="exit"] , .wt-pre-icon[data-icon="exit"]::before , .wt-suff-icon[data-icon="exit"]::after { mask-image: var(--ico-exit) !important; -webkit-mask-image: var(--ico-exit) !important; } .wt-icon[data-icon="play-motion"] , .wt-pre-icon[data-icon="play-motion"]::before , .wt-suff-icon[data-icon="play-motion"]::after { mask-image: var(--ico-play-motion) !important; -webkit-mask-image: var(--ico-play-motion) !important; } .wt-icon[data-icon="pause-motion"] , .wt-pre-icon[data-icon="pause-motion"]::before , .wt-suff-icon[data-icon="pause-motion"]::after { mask-image: var(--ico-pause-motion) !important; -webkit-mask-image: var(--ico-pause-motion) !important; } .wt-icon[data-icon="pause"] , .wt-pre-icon[data-icon="pause"]::before , .wt-suff-icon[data-icon="pause"]::after { mask-image: var(--ico-pause) !important; -webkit-mask-image: var(--ico-pause) !important; } .wt-icon[data-icon="lock-clock"] , .wt-pre-icon[data-icon="lock-clock"]::before , .wt-suff-icon[data-icon="lock-clock"]::after { mask-image: var(--ico-lock-clock) !important; -webkit-mask-image: var(--ico-lock-clock) !important; } .wt-icon[data-icon="exclamation"] , .wt-pre-icon[data-icon="exclamation"]::before , .wt-suff-icon[data-icon="exclamation"]::after { mask-image: var(--ico-exclamation) !important; -webkit-mask-image: var(--ico-exclamation) !important; } .wt-icon[data-icon="handwave"] , .wt-pre-icon[data-icon="handwave"]::before , .wt-suff-icon[data-icon="handwave"]::after { mask-image: var(--ico-handwave) !important; -webkit-mask-image: var(--ico-handwave) !important; } .wt-icon[data-icon="award-star"] , .wt-pre-icon[data-icon="award-star"]::before , .wt-suff-icon[data-icon="award-star"]::after { mask-image: var(--ico-award-star) !important; -webkit-mask-image: var(--ico-award-star) !important; } .wt-icon[data-icon="book-2"] , .wt-pre-icon[data-icon="book-2"]::before , .wt-suff-icon[data-icon="book-2"]::after { mask-image: var(--ico-book-2) !important; -webkit-mask-image: var(--ico-book-2) !important; } .wt-icon[data-icon="id-card"] , .wt-pre-icon[data-icon="id-card"]::before , .wt-suff-icon[data-icon="id-card"]::after { mask-image: var(--ico-id-card) !important; -webkit-mask-image: var(--ico-id-card) !important; } .wt-icon[data-icon="review"] , .wt-pre-icon[data-icon="review"]::before , .wt-suff-icon[data-icon="review"]::after { mask-image: var(--ico-review) !important; -webkit-mask-image: var(--ico-review) !important; } .wt-icon[data-icon="trophy"] , .wt-pre-icon[data-icon="trophy"]::before , .wt-suff-icon[data-icon="trophy"]::after { mask-image: var(--ico-trophy) !important; -webkit-mask-image: var(--ico-trophy) !important; } /* ------- */ /* BUTTONS */ /* ------- */ .wt-bt , .wt-bt-round , .wt-bt-modal , .wt-bt-acc { cursor: pointer; appearance: none; border: none; border-radius: var(--rad-inf ); font-family: inherit; font-weight: 500; line-height: 100%; letter-spacing: 0; } .wt-bt-modal , .wt-bt-acc , .wt-bt-car-next , .wt-bt-car-prev { aspect-ratio: 1; background-clip: content-box; background-position: center; background-size: contain; } .wt-bt { /* big pills */ display: flex; justify-content: center; align-items: center; text-align: center; gap: 0; min-height: var(--wi-bt-base-size); padding: var(--pad-xs) var(--pad-l); background-color: var( --c-pri ); color: var(--c-white ); font-size: var(--trurem); &::after { content: '→'; font-size: 0.001px; color: transparent; background-color: transparent; background-image: url('/wp-content/themes/custom-theme/images/icon_arrow.svg'); } &:hover , &:focus { background-color: #B01E54; &::after { animation: wiggleSlow 2s ease-in-out 0s infinite; } } } .wt-bt-s , .checkpill { display: flex; justify-content: center; align-items: center; gap: 0; width: 7.5rem; max-width: 100%; min-height: 2rem; padding: 0.5rem; border-radius: var(--rad-inf); background-color: var( --c-pri ); color: var(--c-white ); font-size: 1rem; font-weight: 600; line-height: 100%; &::after { content: none; display: none; } &:hover , &:focus { background-color: #B01E54; &::after { animation: wiggleSlow 2s ease-in-out 0s infinite; } } } .checkpill { z-index: 2; position: relative; display: flex; justify-content: center; align-items: center; gap: .25lh; height: 100%; min-width: 6.25rem; background: var(--c-white); border-radius: var(--rad-inf); line-height: 100%; width: fit-content; min-height: 2.25rem; padding: 0.5rem 1rem; border: 1px solid #D4D4D4; background-color: var(--c-white); font-size: var(--trurem); font-weight: 400; color: var(--c-grey-profile); } .wt-bt-dl { /* only use together with wt-bt */ width: fit-content; min-width: fit-content; max-width: fit-content; padding: calc( 0.75rem - 2px ) calc( 2rem - 2px ); border: 1px solid var(--c-grey); background-color: var(--c-white); color: var(--c-pri); font-size: var(--trurem); font-weight: 500; line-height: 100%; &:is( :visited , :active , :focus ), &:is( :visited , :active , :focus ) * { color: var(--c-pri); } &:after { content: none; display: none; } &:before { content: ''; display: block; flex: 0 0 auto; align-self: center; font-size: inherit; font-weight: inherit; line-height: 100%; width: 1lh; height: 1lh; margin-right: .4lh; background-color: currentColor; mask-image: radial-gradient(circle, #000 0%, #000 50%, transparent 50.001%); -webkit-mask-image: radial-gradient(circle, #000 0%, #000 50%, transparent 50.001%); mask-position: center; -webkit-mask-position: center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: contain; -webkit-mask-size: contain; mask-image: var(--ico-download) !important; -webkit-mask-image: var(--ico-download) !important; } &:hover { color: var(--c-white); background-color: var(--c-pri); border-color: var(--c-pri); } } .bts-list { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 1.5rem; } .wt-bt-modal , .wt-bt-round { /* 1:1 for popover/modal opening */ width: 4rem; height: 4rem; padding: 2.5%; border: none; border-radius: var(--rad-inf ); background-color: var( --c-pri ); color: var(--c-white ); font-size: 1rem; } .wt-bt-modal { background-image: url('/wp-content/themes/custom-theme/images/icon_plus.svg'); } details { .wt-bt-acc { /* 1:1 for accordion */ width: 2rem; height: 2rem; background-color: var( --c-white ); background-image: url('/wp-content/themes/custom-theme/images/icon_arrow_simple.svg'); color: var(--c-pri ); font-size: 1rem; transform: rotateZ( 90deg ); } &:focus .wt-bt-acc , .wt-bt-acc:is( :hover ) { background-color: var(--c-pri); color: var(--c-white) } &[open] .wt-bt-acc { transform: rotateZ( 90deg ) rotateX(180deg); } } .wt-bt-car-next , .wt-bt-car-prev { /* 1:1 for accordion */ display: block !important; cursor: pointer !important; appearance: none !important; position: static !important; inset: auto !important; border: none !important; border-radius: var(--rad-inf ) !important; font-family: inherit !important; font-weight: 500 !important; line-height: 100% !important; letter-spacing: 0 !important; width: 2.5rem !important; height: 2.5em !important; background-color: #E2E2E2 !important; background-image: url('/wp-content/themes/custom-theme/images/icon_arrow_simple.svg') !important; color: var(--c-pri ) !important; font-size: 1rem !important; &:is( :hover , :focus ) { background-color: #F0F0F0 !important; } &.wt-bt-car-prev { transform: rotate( 180deg ); } svg { display: none; } } .fav-toggle-wrapper {} .bt-shrinker { border-radius: var(--rad-inf); background: var(--c-white); color: var(--c-pri); box-shadow: 0 0 0.5rem 0.03rem rgba(0,0,0,0.13); transition: transform 0.3s linear 0.5s; .wt-icon { mask-size: 60%; -webkit-mask-size: 60%; } } .bt-edit { font-family: var( --font-def ); font-size: 1rem; font-weight: 500; line-height: 100%; color: var(--c-pri); .txt { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; } &::after { content: ''; display: inline-block; vertical-align: top; align-self: flex-end; font-size: inherit; font-weight: inherit; line-height: 100%; width: 1lh; height: 1lh; margin-left: .25lh; background-color: currentColor; mask-image: radial-gradient(circle, #000 0%, #000 50%, transparent 50.001%); -webkit-mask-image: radial-gradient(circle, #000 0%, #000 50%, transparent 50.001%); mask-position: center; -webkit-mask-position: center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: contain; -webkit-mask-size: contain; mask-image: var(--ico-pen) !important; -webkit-mask-image: var(--ico-pen) !important; } } .switch { .switch-label { display: block; position: relative; width: 3rem; height: 1.625rem; margin-left: 0.6rem; padding: 0; border-radius: var(--rad-inf); background-color: #e2e2e2; cursor: pointer; transition: all 0.3s ease-in; &:after { content: ''; position: absolute; inset: 0.125rem auto 0.125rem 0.125rem; aspect-ratio: 1; width: calc( 1.625rem - 0.25rem ); height: auto; border-radius: var(--rad-inf); background-color: var(--c-white); } } input:checked + .switch-label { background-color: var(--c-blue); } } .slidedown { display: flex !important; justify-content: center !important; align-items: center !important; gap: 0 !important; position: absolute !important; width: auto !important; inset: 0 1rem auto 1rem !important; height: 1.25rem !important; min-height: 0 !important; font-size: 0.0001px !important; line-height: 0 !important; &:after { display: block; content: ''; width: 3.75rem; height: 0.5rem; border-radius: var(--rad-inf); background: #d9d9d9; } } /* ------- */ /* FORM FIELDS */ /* ------- */ input { appearance: none; } .field-wrapper { width: 100% !important; label { display: flex; justify-content: flex-start; align-items: center; gap: 0.25rem 1rem; font-family: var(--font-def); font-weight: 700; line-height: 100%; color: var(--c-black); } .input-helptext { display: inline-block; color: var(--c-grey-profile); font-family: var(--font-hl); font-size: var(--fz-tt); font-weight: 300; line-height: 100%; } .input-field-additions-post { margin-top: calc( 0.25rem + 0.125rem ); display: flex; justify-content: flex-start; align-items: center; gap: 1ch; .char-count { margin-left: auto; } } .input-field { width: 100% !important; } } .input-field { width: auto; } *:is( * , .input-field , .auth-field ) > *:is( input[type="text"] , input[type="email"] , input[type="password"] , input[type="search"] , input[type="tel"] , input[type="url"] , input[type="date"] , textarea, .select-selected ) { appearance: none; box-sizing: border-box; width: 100%; margin: 0; padding: 0.25rem 1rem; height: 2.25rem; height: auto; min-height: 2em; border: 1px solid var(--c-grey); /* border-radius: var(--rad-inf); */ border-radius: 0.5rem; background: var(--c-white); color: var(--c-dgrey); font-family: var(--font-def); font-size: var(--trurem); font-weight: 400; line-height: 100%; line-height: var(--trurem); /* &.is-empty , &::blank , &::placeholder-shown { background-color: #F8F8FA !important; } */ &:disabled { background-color: #F8F8FA !important; } &:focus { background-color: var(--c-white) !important; border-color: var(--c-pri) !important; box-shadow: 0px 0px 2px 1px var(--c-pri) inset !important; } } *:is( * , .input-field ) > textarea { padding: 0.5rem !important; } input[type="date"] { cursor: pointer; } .input-field { .select-selected { display: flex; justify-content: space-between; align-items: center; &:after { position: static !important; inset: auto !important; transform: rotateZ(90deg); } } .select-items { font-size: 1rem; font-weight: 500; border: 1px solid var(--c-grey); border-top: none; padding: 0.25rem 0; &> div { padding: 0.25rem 0.75rem; border: none !important; font-size: inherit !important; line-height: 120%; } } } .input-field.active .select-selected { border-radius: 0.5rem 0.5rem 0 0; &:after { transform: rotateZ(90deg) rotateY(180deg); } } .drop-zone { cursor: pointer; position: absolute; opacity: 0; width: 100%; height: 100%; min-height: 100%; max-height: 100%; min-width: 100%; max-width: 100%; border: none !important; padding: 0 !important; margin: 0 !important; } *:has( > .drop-zone ) { position: relative; } /* .input-field-label .tooltip-wrapper { position: relative; display: inline-block; aspect-ratio: 1; width: calc( 1rem + 1px ); height: calc( 1rem + 1px ); padding: 0; border-radius: var(--rad-inf); background-color: var(--c-pri); .tooltip-icon { display: block; font-family: var(--font-hl); font-size: 1rem; font-weight: 600; line-height: calc( 1rem + 1px ); color: var(--c-white); text-align: center; } .tooltip-text { z-index: 99; display: none; position: absolute; top: 100%; margin-top: 0.25rem; left: 50%; transform: translateX(-50%); width: max-content; max-width: 8rem; padding: 0.25rem; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 500; line-height: 120%; color: var(--c-black); background-color: var(--c-white); box-shadow: var(--shadow-modal); outline: 2px solid var(--c-pri); } &:hover .tooltip-text { display: block; } } .field-wrapper:has( > label > .tooltip-wrapper ) .input-field { z-index: 0; } .field-wrapper > label:has( > .tooltip-wrapper ) { position: relative; z-index: 1; } */ #exwi-portal-shell { search { display: flex; align-items: center; gap: 0.25rem; .input-field { input[type="search"] { width: min( 100%, 19rem ); height: 2.25rem; padding: 0.5rem 1rem 0.5rem 2.5rem; border-radius: var(--rad-inf); font-size: var(--trurem); line-height: 1rem; color: var(--c-grey-profile); background-color: var(--c-white) !important; &::placeholder { color: var(--c-grey-profile); } } &:before { display: block; position: absolute; top: 0; bottom: 0; left: 1rem; width: 1.25rem; height: 100%; margin: 0; color: var(--c-grey-profile); background-color: currentColor; mask-image: var(--ico-search) !important; -webkit-mask-image: var(--ico-search) !important; mask-position: center; -webkit-mask-position: center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: contain; -webkit-mask-size: contain; } } } } .toggle { flex-shrink: 0; position: relative; width: 10rem; height: 2.25rem; margin: 0; border: none; border-radius: var(--rad-inf); background: transparent; font-family: var(--font-def) !important; font-size: 1rem !important; font-weight: 400 !important; line-height: 100% !important; * { transform: none !important; } input { display: none; } .layer-front , .layer-back { z-index: 0; display: flex; justify-content: stretch; align-items: stretch; height: 100%; } .layer-front { pointer-events: none; z-index: 1; overflow: hidden; position: absolute; inset: 0 -1px; background: #EAEDF2; clip-path: shape( nonzero from 1.25em 0, arc to 1.25em 100% of 1.05em 1.05em large ccw, line to calc(50% - 1.05em) 100%, arc to calc(50% - 1.05em) 0% of 1.05em 1.05em large ccw, close ); transition: clip-path 0.6s ease-in-out 0s; } .layer-back { margin: 0 -1px; label { position: relative; font-weight: 400 !important; &:hover:after { content: ''; z-index: 0; position: absolute; inset: 1px; background-color: var(--c-grey); border-radius: var(--rad-l); opacity: 0.16; } } } .toggle-inner { cursor: pointer; user-select: none; position: relative; width: 10rem; height: 100%; margin: 0; padding: 0; border: none; border-radius: var(--rad-inf); background: var(--c-white); * { cursor: inherit; } &:has(.opt-b:checked) .layer-front { clip-path: shape( nonzero from calc(50% + 1.05em) 0, arc to calc(50% + 1.05em) 100% of 1.05em 1.05em large ccw, line to calc(100% - 1.25em) 100%, arc to calc(100% - 1.25em) 0 of 1.05em 1.05em large ccw, close ); } &::after { content: ''; z-index: 10; inset: 0; position: absolute; border: 1px solid var(--c-grey); border-radius: var(--rad-inf); pointer-events: none; } } label { flex-basis: 50%; display: flex; justify-content: center; align-items: center; position: static; z-index: 1; height: 100%; width: auto; padding: 0 !important; font-size: 1em !important; font-weight: 400 !important; font-family: inherit !important; color: var(--c-grey-profile) !important; border-radius: var(--rad-inf); &:before { width: 1em; height: 1em; aspect-ratio: 1; align-self: auto; } } /* .layer-back label.opt-b::after { filter: grayscale(100%) saturate(0%) brightness(0%) invert(100%); } */ .layer-front label { color: var(--c-blue) !important; } } label + input { margin-top: 0.5rem; } input:disabled + label , *:has( > input:disabled ) > label { cursor: not-allowed; opacity: 0.7; } /* input[type="text"].field-location { position: relative; padding-left: var(--pad-l); &.before { content: '⚑'; font-size: 0.0001px; color: transparent; position: 50% auto auto var(--pad-xs); transform: translateY(-50%); width: 1rem; height: 1.25rem; background-position: center; background-size: contain; background-image: url(''); } } */ ::highlight(search-result) { background: var(--c-pri); color: var(--c-white); text-decoration: underline; } /* ---------- */ /* CONTAINERS */ /* ---------- */ body > main { width: 100vw; max-width: 100vw; position: relative; } main > div.page-variant { z-index: 0; position: absolute; inset: 0 0 auto 0; width: 100vw; max-width: 100vw; /* transform: translateX( 101% ); */ opacity: 0; transition-property: transform , opacity; transition-duration: var(--wi-toggle-speed) , var(--wi-toggle-speed); transition-timing-function: var(--wi-toggle-func) , var(--wi-toggle-func); transition-delay: var(--wi-toggle-delay) , var(--wi-toggle-delay); &.active { z-index: 10; /* transform: translateX( 0% ); */ opacity: 1; } &> section > .section-inner { width: 100%; max-width: calc( var(--landscape-content-w) + ( 2 * 2rem ) ); margin: 0 auto; padding: var(--pad-ctr-cl) 2rem; } } .wt-bg-std , .wt-bg-white { background-color: var(--c-white); } .wt-bg-grey { background-color: var(--c-lgrey); } .wt-bg-pri { background-color: var(--c-pri); .wt-bt-modal { background-color: var(--c-white); color: var(--c-pri); } } .wt-bg-grad-w2b { background-color: var(--c-white); /* smoother than steps A -> B */ background-image: linear-gradient( to bottom, rgba(176, 221, 245, 0.000) 0%, rgba(176, 221, 245, 0.000) 10%, rgba(176, 221, 245, 0.012) 18.1%, rgba(176, 221, 245, 0.044) 25.6%, rgba(176, 221, 245, 0.093) 32.4%, rgba(176, 221, 245, 0.155) 38.7%, rgba(176, 221, 245, 0.227) 44.6%, rgba(176, 221, 245, 0.305) 50.2%, rgba(176, 221, 245, 0.387) 55.7%, rgba(176, 221, 245, 0.470) 61.2%, rgba(176, 221, 245, 0.553) 66.8%, rgba(176, 221, 245, 0.634) 72.6%, rgba(176, 221, 245, 0.712) 78.7%, rgba(176, 221, 245, 0.785) 85.2%, rgba(176, 221, 245, 0.851) 92.3%, rgba(176, 221, 245, 1.000) 100% ); } .wt-rad-xs { border-radius: var(--rad-xs); } .wt-rad-s { border-radius: var(--rad-s); } .wt-rad-m { border-radius: var(--rad-m); } /* ------- */ /* MEDIA */ /* ------- */ img { display: block; border-radius: var(--rad-m); object-position: center; object-fit: cover; } .img-wrapper { display: block; width: initial !important; height: initial !important; position: relative; &:after { content: ''; z-index: 1; position: absolute; right: 1rem; bottom: 1rem; right: clamp( 0.125rem, 0.25cqw, 1rem ); bottom: clamp( 0.125rem, 0.25cqw, 1rem ); /* these variables come from JS */ right: clamp( 0.125rem, calc( 0.25cqw + var(--img-radius, 0px) ), calc( 1rem + var(--img-radius, 0px) ) ); bottom: clamp( 0.125rem, calc( 0.25cqw + var(--img-radius, 0px) ), calc( 1rem + var(--img-radius, 0px) ) ); height: 8%; height: 2.4%; width: auto; max-height: 1.5rem; min-height: calc( 0.75rem + 0.125rem ); max-width: calc( 100% - 2rem ); background-color: rgba( 0, 0, 0, 0.5 ); background-size: auto 50%; background-repeat: no-repeat; background-position: center; border-radius: var(--rad-inf); /* box-shadow: 0 0 0.3rem 0.2rem rgba( 255, 255, 255, 0.3 ); */ } &.ai-gen-mark:after { aspect-ratio: 21 / 4; background-image: url('/wp-content/themes/custom-theme/images/watermark_ai-gen.svg'); } &.ai-mod-mark:after { aspect-ratio: 19 / 4; background-image: url('/wp-content/themes/custom-theme/images/watermark_ai-mod.svg'); } &:before { z-index: 2; content: ''; position: absolute; inset: 0; opacity: 0; } &> img { position: relative; z-index: 0; display: block !important; min-width: 100% !important; min-height: 100% !important; max-width: 100%; max-height: 100%; } } /* img.ai-gen { mask-image: linear-gradient( #fff, #fff ) , url("/wp-content/themes/custom-theme/images/watermark_mask_ai.svg"); mask-position: 0 0 , calc( 100% - 1rem ) calc( 100% - 1rem ); mask-size: 100% 100% , 1.5rem 1.5rem; mask-mode: luminance , alpha; mask-repeat: no-repeat , no-repeat; mask-composite: exclude; } */ /* --------------------- */ /* GLOBAL / MISC EFFECTS */ /* --------------------- */ main *:is( .strich , .strike , .stroke ) { display: inline !important; position: relative !important; overflow: visible; font-family: inherit; font-weight: bold; line-height: 105% !important; &> canvas.strike-canvas { position: absolute !important; top: 50%; left: 50%; transform: translate( -50%, -50% ); opacity: 0.8; filter: blur(.02cqw); } } .scroll-grads { &:before , &:after { content: ''; display: block; z-index: 1; position: absolute; left: 0; right: 0; height: 0; opacity: 0; transition-property: height , opacity; transition-duration: .36s; transition-timing-function: ease-in-out; pointer-events: none; } &:before { top: 0; background-image: linear-gradient( to bottom, rgba(255, 255, 255, 1.000) 0%, rgba(255, 255, 255, 0.987) 8.6%, rgba(255, 255, 255, 0.951) 16.5%, rgba(255, 255, 255, 0.896) 23.7%, rgba(255, 255, 255, 0.824) 30.5%, rgba(255, 255, 255, 0.741) 36.8%, rgba(255, 255, 255, 0.649) 42.8%, rgba(255, 255, 255, 0.550) 48.6%, rgba(255, 255, 255, 0.450) 54.3%, rgba(255, 255, 255, 0.351) 60%, rgba(255, 255, 255, 0.259) 65.9%, rgba(255, 255, 255, 0.176) 71.9%, rgba(255, 255, 255, 0.104) 78.2%, rgba(255, 255, 255, 0.049) 84.9%, rgba(255, 255, 255, 0.013) 92.1%, rgba(255, 255, 255, 0.000) 100% ); } &:after { bottom: 0; background-image: linear-gradient( to top, rgba(255, 255, 255, 1.000) 0%, rgba(255, 255, 255, 0.987) 8.6%, rgba(255, 255, 255, 0.951) 16.5%, rgba(255, 255, 255, 0.896) 23.7%, rgba(255, 255, 255, 0.824) 30.5%, rgba(255, 255, 255, 0.741) 36.8%, rgba(255, 255, 255, 0.649) 42.8%, rgba(255, 255, 255, 0.550) 48.6%, rgba(255, 255, 255, 0.450) 54.3%, rgba(255, 255, 255, 0.351) 60%, rgba(255, 255, 255, 0.259) 65.9%, rgba(255, 255, 255, 0.176) 71.9%, rgba(255, 255, 255, 0.104) 78.2%, rgba(255, 255, 255, 0.049) 84.9%, rgba(255, 255, 255, 0.013) 92.1%, rgba(255, 255, 255, 0.000) 100% ); } &.top-overflow:before , &.bot-overflow:after { height: 4.5rem; opacity: 1.0; } } /* ------- */ /* NAV */ /* ------- */ @keyframes bellToll { 0.0% { transform: rotate( 0.0deg ); } 20.0% { transform: rotate( 40.0deg ); } 60.0% { transform: rotate( -30.0deg ); } 80.0% { transform: rotate( 20.0deg ); } 90.0% { transform: rotate( -10.0deg ); } 95.0% { transform: rotate( 5.0deg ); } 97.5% { transform: rotate( -2.5deg ); } 100.0% { transform: rotate( 0.0deg ); } } body:has( main > .page-variant > #exwi-portal-shell ) { header { max-width: 100%; max-width: 100vw; &.sticky { nav { gap: 1rem; hr.vertical { margin-left: -4.2rem !important; } #logo-wrapper { max-height: 100% !important; min-height: 100% !important; margin-right: 0; img , svg { max-height: 100% !important; min-height: 100% !important; } } } } #pageHeader { height: 9rem; max-width: 100%; max-width: 100vw; padding: var(--pad-s); nav { max-width: 100%; max-width: 100vw; gap: 2rem; padding: var(--pad-s); transition: gap var(--wi-nav-shrink-speed) ease-in-out var(--wi-nav-shrink-delay); hr.vertical { align-self: center; height: 84%; margin: 0; width: 1px; border: none; background: var(--c-grey); transition: margin var(--wi-nav-shrink-speed) ease-in-out var(--wi-nav-shrink-delay); } #logo-wrapper { max-width: 275px; max-height: 100% !important; min-height: 100% !important; margin-right: 0; img , svg { max-height: 100% !important; min-height: 100% !important; transition: height var(--wi-toggle-speed) linear var(--wi-toggle-delay); } } .actions { height: var(--wi-bt-base-size); margin-top: 0; .notifications-dropdown-part button.notifications { background-color: #FBFBFB; } #nav-tree-wrapper { label { width: var(--wi-bt-base-size); height: var(--wi-bt-base-size); } } #user-nav { #user-nav-profile { .pfp { width: var(--wi-bt-base-size); height: var(--wi-bt-base-size); } } } } } } } } #pageHeader { position: relative; height: var( --wi-nav-height-def ); padding: 0 !important; box-shadow: 0px 2px 14px 4px rgba( 0, 0, 0, .06 ); transition-property: height , box-shadow , background-color; transition-duration: var(--wi-nav-shrink-speed), var(--wi-nav-shrink-speed), var(--wi-nav-shrink-speed); transition-timing-function: linear , linear , linear; transition-delay: var(--wi-nav-shrink-delay), var(--wi-nav-shrink-delay), var(--wi-nav-shrink-delay); nav { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: nowrap; gap: var(--pad-s); width: 100%; max-width: calc( 1920px + ( 2 * var( --pad-l) ) ); height: 100%; margin: 0 auto; padding: var(--pad-s) var(--pad-m); .wt-bt-round { width: 3.25rem; height: 3.25rem; } .talents-mark.portal-only { align-self: center; margin: auto auto auto 0; padding-top: 2rem; transition: padding var(--wi-toggle-speed) linear 0s; } #logo-wrapper { z-index: 999 !important; flex-shrink: 3; flex-grow: 0; height: 100%; margin-right: auto; a { height: 100%; } img , svg { pointer-events: none; aspect-ratio: 253 / 112; width: auto; height: 100%; max-width: 391px; .domain { opacity: 1; transition: var(--wi-nav-shrink-speed) ease-in-out var(--wi-nav-shrink-delay); } } } .actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--pad-s); height: 3.25rem; margin-top: var( --pad-s); transition: margin var(--wi-nav-shrink-speed) linear var(--wi-nav-shrink-delay); #global-toggle { /* order: 1; */ z-index: 999 !important; } .login.wt-bt { /* order: 0; */ z-index: 999 !important; width: fit-content; font-size: 1.125rem; font-weight: 700; opacity: 1; transition: all var(--wi-toggle-speed) var(--wi-toggle-func) var(--wi-toggle-delay); &::after { content: none; display: none; } } /* TODO: style notif items */ .notifications-dropdown-part { /* order: 2; */ margin-right: -0.5rem; button.notifications { position: relative; background-color: var(--c-white); color: var(--c-black); &:hover { background-color: var(--c-pri) !important; color: var(--c-white) !important; } .wt-icon { z-index: 0; position: absolute; inset: 0; color: inherit !important; background-color: currentColor !important; mask-size: 1.75rem; mask-size: clamp( 1.5rem, 2vw, 1.75rem ); /* TODO: use bell toll */ } .counter { display: flex; position: absolute; justify-content: center; align-items: center; top: 0.5rem; left: 0.5rem; aspect-ratio: 1; width: calc( 1 * 0.6ch + 1.25rem ); height: auto; transform: translate(-50%, -50%); padding: 0.125rem; border-radius: var(--rad-inf); background: var(--c-pri); font-size: 1rem; line-height: 100%; color: var(--c-white); line-height: 100% !important; } } &:has( > .notifications-dropdown.show ) button.notifications { background-color: var(--c-pri) !important; color: var(--c-white) !important; } /* .notifications-dropdown { position: absolute; bottom: -1rem; right: -3.5rem; transform: translateY(100%); width: 25vw; max-width: 31.8725rem; border-radius: var(--rad-m); opacity: 0; pointer-events: none; transition: opacity 0.25s ease-in-out; &.show { opacity: 0.95; pointer-events: all; } .triangle { width: 0px; height: 0px; border-style: solid; border-width: 0 1rem 1.25rem 1rem; border-color: transparent transparent var(--c-pri) transparent; position: absolute; top: auto; right: 4.125rem; margin-top: 1px; } .header { z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: static; overflow: hidden; padding: var(--pad-xs) var(--pad-xs) var(--pad-l) var(--pad-xs); border-radius: var(--rad-m) var(--rad-m) 0 0 !important; background: var(--c-pri); color: var(--c-white); #notifs-label { grid-column: 2; justify-self: center; font-size: 1.5rem; font-weight: 500; line-height: 100%; color: inherit; } .close { grid-column: 3; justify-self: end; position: static; width: 2rem; height: 2rem; transform: none; background: none; color: inherit; } } .content { z-index: 3; overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: stretch; gap: 1.25vw; padding: 0.5rem; margin-top: calc( -1 * var(--rad-m) - var(--pad-xxs) + 2px); max-height: 50vh; border: none; border-radius: var(--rad-m) !important; background-color: var(--c-lgrey); color: var(--c-black); &:has( :not( > .notification ) ) { border-radius: 99999px !important; } .notification { padding: 0.5rem; gap: 0.5rem; border-radius: calc( var(--rad-m) * 0.56); background: none !important; &:is( :hover , :focus , :focus-within ) { background: var(--c-white-mute) !important; } .title-container { display: flex; flex-direction: row; align-items: center; position: relative; padding-right: 1.5rem; .title { color: var(--c-pri) !important; font-family: var(--font-hl) !important; font-size: clamp( 1rem, 1.25vw, 1.25rem) !important; font-weight: var(--fw-bold) !important; line-height: 100% !important; } button { top: 0.5lh; right: 0; transform: translateY(-50%); padding: 0; border-radius: var(--rad-inf); color: var( --c-red ); background: none; opacity: 0.5; &:hover { opacity: 1; background: #FBFBFB; } } } .body-container { display: flex; flex-direction: column; gap: 0.5rem; padding: 0 !important; p.txt { color: var(--c-black); font-family: var(--font-def) !important; font-size: clamp( 0.75rem, 2.1vw, 0.75rem) !important; font-weight: 500; line-height: 110% !important; text-wrap: balance; } a.wt-bt-s { width: fit-content; min-height: fit-content; padding: 0.5rem 0.75rem; font-size: var(--fz-tt); &:after { display: none !important; content: ''; } } } } .empty-message { display: block; text-align: center; color: inherit; } } } */ .notifications-dropdown { position: absolute; bottom: -0.5rem; right: 0; transform: translateY(100%); width: 25vw; max-width: 31.8725rem; padding: 0; border-radius: 1rem; background: var(--c-white) !important; box-shadow: var(--shadow-modal) !important; opacity: 0; overflow: hidden; pointer-events: none; transition: opacity 0.25s ease-in-out; &.show { opacity: 0.95; pointer-events: all; } .header { z-index: 2; display: grid; grid-template-columns: auto 1fr; align-items: start; position: static; overflow: hidden; padding: 1rem 1.5rem; background: none; color: var(--c-black) !important; #notifs-label { grid-column: 2; justify-self: start; font-size: 1.25rem; font-weight: 700; line-height: 100%; color: inherit; } .close { grid-column: 3; justify-self: end; position: static; width: 1.5rem; height: 1.5rem; margin-left: auto; transform: none; background: none; color: var(--c-grey-profile); .wt-icon { mask-size: auto 0.75rem; -webkit-mask-size: auto 0.75rem; } } } .content { z-index: 3; overflow: auto; position: relative; display: flex; flex-direction: column; justify-content: stretch; gap: 0; padding: 0 !important; max-height: 50vh; border: none; background: none !important; color: var(--c-black); box-shadow: none !important; &:has( :not( > .notification ) ) { /* border-radius: 99999px !important; */ } &> * { margin-top: 1px; } &> *:before { content: ''; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 100%; height: 1px; background: var(--c-grey); } .notification { display: block; margin-top: 1px; padding: 0; gap: 0.25rem; /* border-radius: calc( var(--rad-m) * 0.56); */ background: none !important; &> a { display: block; padding: calc( 0.75rem + 1px ) 0.75rem 0.75rem 0.75rem; border-radius: 1rem; &:is( :hover , :focus , :focus-within ) { background: var(--c-lgrey) !important; .notification-inner { button.delete { visibility: visible; } } } .notification-inner { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 0.5rem 0.75rem; padding: 0 0.75rem; .title-container { order: 0; display: flex; flex-direction: row; align-items: center; position: relative; .title { color: var(--c-pri) !important; font-family: var(--font-hl) !important; font-size: clamp( 1rem, 1.25vw, var(--trurem )) !important; font-weight: 600!important; line-height: 100% !important; } } .body-container { order: 2; display: flex; flex-direction: column; gap: 0.5rem; min-height: 1rem; padding: 0 !important; p.txt { color: var(--c-black); font-family: var(--font-def) !important; font-size: clamp( 0.75rem, 1.5vw, 1rem) !important; font-weight: 500; line-height: 110% !important; text-wrap: balance; } } button.delete { order: 1; visibility: hidden; display: block; position: static; width: 1.5rem; height: 1.5rem; padding: 0.25rem; border-radius: var(--rad-inf); color: var(--c-grey-profile); background: none; transition: none !important; &:hover { color: var(--c-pri); background: var(--c-white); } * { padding: 0 !important; -webkit-mask-size: contain; mask-size: contain; } } &:after { order: 3; content: ''; width: 0.625rem; height: 100%; max-height: 0.625rem; margin-top: auto; aspect-ratio: 1; align-self: center; justify-self: center; transform: translateX( 0 ); background-color: var(--c-grey-profile); mask-image: var(--ico-arrow-simple) !important; -webkit-mask-image: var(--ico-arrow-simple) !important; mask-position: center !important; -webkit-mask-position: center !important; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: contain; -webkit-mask-size: contain; transition: all 0.2s linear;; } } &:is( :hover , :focus ) .notification-inner:after { transform: translateX( 50% ); background-color: var(--c-pri); } } } .empty-message { display: block; text-align: center; color: inherit; } } } } #user-nav { /* order: 3; */ position: relative; height: 3.25rem; border-radius: var(--rad-inf); background-color: rgba(255,255,255,0.82); & , * { transition-property: all; transition-duration: 0.35s; transition-timing-function: ease-in-out; } &:hover { background-color: var(--c-pri); .greeting { * { color: var(--c-white); } } img { outline-color: var(--c-blue); } #user-nav-sub { opacity: 1; pointer-events: all; } } img { outline: 3px solid transparent; } &> * { position: relative; z-index: 2; } #user-nav-profile { display: flex; justify-content: stretch; align-items: center; min-width: 160px; width: 100%; height: 100%; :is( a, button ) { /* Chrome gibt jeder Schaltflaeche `align-items: center`; im Raster zoege das Bild damit auf halbe Hoehe zusammen. Der schmale Satz weiter unten setzt bewusst `center` und bleibt davon unberuehrt. */ align-items: normal; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr var(--wi-bt-base-size); grid-template-rows: 1fr; gap: 0; grid-auto-columns: auto 1fr; .greeting { flex-shrink: 2; align-self: center; justify-self: end; text-align: right; justify-content: flex-start; align-items: center; gap: var(--gap-xs); padding: 0 1rem 0 1.25rem; font-size: 1rem; line-height: 120%; font-weight: 400; .name { min-width: 100%; font-size: calc( 100cqw / 1ch ); font-weight: 600; } } .pfp { align-self: center; justify-self: end; aspect-ratio: 1; /* width: var(--wi-bt-base-size); */ width: 3.25rem; /* height: var(--wi-bt-base-size); */ height: 3.25rem; border-radius: var(--rad-inf); background-color: var(--c-grey); background-position: center; background-size: auto 60% ; img { aspect-ratio: 1; object-fit: cover; object-position: 50% 0%; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; border-radius: var(--rad-inf); } &.no-pfp { background-image: url(''); display: flex; justify-content: center; align-items: center; background-color: var(--c-pri); &> span { display: block; font-family: var(--font-hl); font-size: 2rem; color: var(--c-white); line-height: 0; } } } &.wpg .pic { img { /* no cutoff cuz logo */ min-width: 70%; max-width: 70%; min-height: 70%; max-height: 70%; object-fit: contain; object-position: 50% 50%; } &.no-pfp { background-image: url(''); display: flex; justify-content: center; align-items: center; background-color: var(--c-pri); &> span { display: block; font-family: var(--font-hl); font-size: clamp( 0.75rem, 3.25cqw, 2.25rem ); color: var(--c-white); line-height: 0; } } } } } #user-nav-profile { :is( a, button ) { .pfp { img { margin: 0 !important; object-fit: contain; object-position: center; } } } } #user-nav-sub-wrap { box-sizing: content-box; pointer-events: none; position: absolute; right: 0; padding: 1rem !important; margin-right: -1rem !important; &:hover { pointer-events: all; } } &:hover { #user-nav-sub-wrap { pointer-events: all; } } #user-nav-sub { opacity: 0; pointer-events: none; position: static; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 0.5rem; min-width: 250px; width: max-content; max-width: 100vw; padding: 1rem; border-radius: 1rem; background-color: var(--c-white); box-shadow: var(--shadow-modal); transition: opacity 0.3s ease-in-out; &:focus-within { opacity: 1; pointer-events: auto; } &> li { width: 100%; * { padding: var(--pad-xxs); font-family: var(--font-hl) !important; font-size: var(--trurem) !important; font-weight: 600 !important; line-height: 120% !important; color: var(--c-black) !important; /* text-overflow: ellipsis; */ /* overflow: hidden; */ /* white-space: nowrap; */ } &.current a { background-color: var(--c-pri-mute) !important; /* font-weight: 700; */ } &> a { position: relative; min-width: 100%; width: max-content; padding: 0.25rem 0.75rem; border-radius: var(--rad-inf); background-color: transparent; transition: all 0.3s ease-in-out; &:hover { background-color: var(--c-pri) !important; color: var(--c-white) !important; } } &.menu-item-talents a:hover { background-color: var(--c-blue) !important; } } } } #nav-tree-wrapper { position: relative; order: 4; label { /* is round WT BT */ z-index: 999 !important; position: relative; display: flex; justify-content: center; align-items: center; width: 3.25rem; height: 3.25rem; padding: 0 !important; transition-property: transform , opacity; transition-duration: 0.2s , 0.2s; transition-timing-function: linear , linear; transition-delay: 0.2s , 0.2s; svg { position: absolute; inset: 25%; inset: round( up, 25%, 1px ); transition: var(--wi-nav-shrink-speed) linear var(--wi-nav-shrink-delay); } #icon-close { opacity: 0; } #icon-open { transform: none; opacity: 1; } } #hov-tree { display: none; position: absolute; padding: 1rem; top: 100%; right: -1rem; #hov-tree-trunk { position: static; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 1.5rem; min-width: 250px; width: max-content; max-width: 100vw; padding: 1rem 1.25rem 0.75rem 1.25rem; border-radius: 1rem; background-color: var(--c-white); box-shadow: var(--shadow-modal); hr { margin: 0; } &> li { width: 100%; .hov-tree-branch-head { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.75rem; font-family: var(--font-hl); font-size: calc( 0.75rem + 1px ); font-weight: 600; line-height: 100%; color: var(--c-black); text-transform: uppercase; &#hov-tree-branch-wpg-head { color: var(--c-pri); } &#hov-tree-branch-talents-head { color: var(--c-blue); } &:before { content: '•'; display: inline-block; font-size: 1rem; line-height: inherit; color: inherit; } } &> ul { width: 100%; &> li { width: 100%; * { padding: var(--pad-xxs); font-family: var(--font-hl); font-size: var(--trurem); font-weight: 600; line-height: 120%; color: var(--c-black); /* text-overflow: ellipsis; */ /* overflow: hidden; */ /* white-space: nowrap; */ } &.current a { background-color: var(--c-pri-mute) !important; /* font-weight: 700; */ } &.menu-item-talents.current a { background-color: #EAEDF2 !important; } &> a { position: relative; min-width: 100%; width: max-content; padding: 0.25rem 0.75rem; margin-top: 0.5rem; border-radius: var(--rad-inf); background-color: transparent; transition: all 0.3s ease-in-out; &:hover { background-color: var(--c-pri) !important; color: var(--c-white) !important; } } &.menu-item-talents a:hover { background-color: var(--c-blue) !important; } } } } } } label:is( :hover , :focus ) + #hov-tree , label:has( > .ptr-catcher:is( :hover , :focus ) ) + #hov-tree , #hov-tree:is( :hover , :focus , :focus-within ) { display: block; } input { display: none; } label .ptr-catcher { content: ''; display: none; position: absolute; inset: calc( var(--pad-s) * -1 ); } label:is( :hover , :focus ) .ptr-catcher { display: block; } #nav-tree { pointer-events: none; opacity: 0; z-index: 998 !important; position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; margin: 0 !important; padding: var( --pad-l) !important; border: none !important; transform: translateY( -100% ); display: flex !important; flex-direction: column; justify-content: center; align-items: center; /* background from class */ backdrop-filter: blur( 5px ); transition-property: transform , opacity; transition-duration: 0.4s , 0.3s; transition-timing-function: ease-in-out , linear; transition-delay: 0s , 0.1s; * { color: var(--c-black); } &> ul { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: min( 2vh, 1.5rem ); width: 100%; max-width: 1020px; &> li { width: 100%; details { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; width: 100%; padding: min( 1.25vh, 2.5rem ) 0; &> * + * { margin-top: min( 2vh, 2.5rem ); } summary { display: flex; justify-content: flex-start; align-items: center; width: 100%; padding-bottom: min( 0.5rem, 1rem ); border-bottom: 1px solid var(--c-grey); font-family: var(--font-hl); font-size: 1.5rem; font-weight: 600; line-height: 100%; text-transform: uppercase; cursor: pointer; &::before { content: '•'; font-size: 2rem; margin-right: 0.6ch; } &::after { content: '↓'; width: 1.1rem; height: 1.1rem; margin-left: var(--pad-s); font-size: 0.001px; color: transparent; background-color: transparent; background-image: url('/wp-content/themes/custom-theme/images/icon_arrow_simple.svg'); transform: rotateZ(90deg) rotateY(0deg); filter: invert(0%); transition: transform 0.3s linear; } } &[open] summary::after { transform: rotateZ(90deg) rotateY(180deg); } &> ol { counter-reset: sub-item; display: flex; flex-direction: column; justify-content: flex-start; align-content: stretch; gap: min( 3.25vh, 4vw, 2.25rem ); width: 100%; padding: 0 var(--pad-l); &> li { counter-increment: sub-item; width: 100%; display: flex; justify-content: flex-start; align-items: center; font-family: var(--font-hl); font-size: min( 4.5vh, 4vw, 3rem ); font-weight: 700; line-height: 100%; a { width: 100%; } &::before { content: counter(sub-item, decimal-leading-zero); display: flex; justify-content: center; align-items: center; aspect-ratio: 1; width: 1.5em; height: 1.5em; padding: 0.125em; margin-right: var(--pad-s); border-radius: var(--rad-inf); font-variant-numeric: tabular-nums; font-weight: 400; font-size: min( 2.75vh, 1.5rem ); line-height: 100%; opacity: 0.4; transition: margin 0.2s linear; } &:is( :hover , :focus )::before { margin-right: var(--pad-m); background-color: var(--c-black); color: var(--c-white); opacity: 1; } } } &> .branch-extra { width: 100%; display: flex; align-items: center; gap: var(--gap-xl); padding: 0 var(--pad-m); margin-top: min( 2.25vh, 3rem ); .extras-label { margin-right: var(--pad-xxxs); line-height: 100%; opacity: 0.4; } ul { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: var(--gap-xl); a.wt-bt { min-height: 2.5rem; padding: var(--pad-xxs) var(--pad-s); background: none; border: 1px solid var(--c-grey); color: var(--c-dgrey); font-size: var(--trurem); &:after { content: ""; display: block; flex: 0 0 auto; width: var(--link-arrow-size-md); height: var(--link-arrow-size-md); margin-left: 0.6rem; mask-image: var(--icon-arrow-external) !important; mask-size: contain; -webkit-mask-image: var(--icon-arrow-external) !important; -webkit-mask-size: contain; background-color: var(--c-black) !important; transform: none !important; } } } } } } } } input:checked + #nav-tree { pointer-events: auto; opacity: 1; transform: translateY( 0 ); } label:has( + input:checked ) #icon-open { transform: translate( -50vw, -50vh ) scale( 1000% ); opacity: 0; } label:has( + input:checked ) #icon-close { opacity: 1; } } #header-shrinker { opacity: 0; pointer-events: none; position: absolute; bottom: -0.75rem; left: 50%; margin-left: -0.75rem; rotate: -90deg; transform: rotateY(0deg); } } } } body.exwi-portal .page-login { &> header { transition: none !important; } #loginView { padding-top: 0 !important; } #pageHeader { position: relative; height: 9.5rem; padding: 0 !important; box-shadow: none !important; transition: none !important; nav { height: 100%; padding: 0.5rem 1rem; /* .wt-bt-round { width: 3.25rem; height: 3.25rem; } .talents-mark.portal-only { align-self: center; margin: auto auto auto 0; } #logo-wrapper { z-index: 999 !important; flex-shrink: 3; flex-grow: 0; height: 100%; margin-right: auto; a { height: 100%; } img , svg { pointer-events: none; aspect-ratio: 253 / 112; width: auto; height: 100%; max-width: 391px; .domain { opacity: 1; transition: var(--wi-nav-shrink-speed) ease-in-out var(--wi-nav-shrink-delay); } } } .actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--pad-s); height: var(--wi-bt-base-size); margin-top: var( --pad-s); transition: margin var(--wi-nav-shrink-speed) linear var(--wi-nav-shrink-delay); #global-toggle { order: 1; z-index: 999 !important; } .login.wt-bt { order: 0; z-index: 999 !important; width: fit-content; font-size: 1.125rem; font-weight: 700; opacity: 1; transition: all var(--wi-toggle-speed) var(--wi-toggle-func) var(--wi-toggle-delay); &::after { content: none; display: none; } } .notifications-dropdown-part { order: 2; button.notifications { position: relative; background-color: var(--c-white); color: var(--c-black); &:hover { background-color: var(--c-pri) !important; color: var(--c-white) !important; } .wt-icon { z-index: 0; position: absolute; inset: 0; color: inherit !important; background-color: currentColor !important; mask-size: 1.75rem; } .counter { display: flex; position: absolute; justify-content: center; align-items: center; top: 0.5rem; left: 0.5rem; aspect-ratio: 1; width: calc( 1 * 0.6ch + 1.25rem ); height: auto; transform: translate(-50%, -50%); padding: 0.125rem; border-radius: var(--rad-inf); background: var(--c-pri); font-size: 1rem; line-height: 100%; color: var(--c-white); line-height: 100% !important; } } &:has( > .notifications-dropdown.show ) button.notifications { background-color: var(--c-pri) !important; color: var(--c-white) !important; } /* .notifications-dropdown { position: absolute; bottom: -1rem; right: -3.5rem; transform: translateY(100%); width: 25vw; max-width: 31.8725rem; border-radius: var(--rad-m); opacity: 0; pointer-events: none; transition: opacity 0.25s ease-in-out; &.show { opacity: 0.95; pointer-events: all; } .triangle { width: 0px; height: 0px; border-style: solid; border-width: 0 1rem 1.25rem 1rem; border-color: transparent transparent var(--c-pri) transparent; position: absolute; top: auto; right: 4.125rem; margin-top: 1px; } .header { z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: static; overflow: hidden; padding: var(--pad-xs) var(--pad-xs) var(--pad-l) var(--pad-xs); border-radius: var(--rad-m) var(--rad-m) 0 0 !important; background: var(--c-pri); color: var(--c-white); #notifs-label { grid-column: 2; justify-self: center; font-size: 1.5rem; font-weight: 500; line-height: 100%; color: inherit; } .close { grid-column: 3; justify-self: end; position: static; width: 2rem; height: 2rem; transform: none; background: none; color: inherit; } } .content { z-index: 3; overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: stretch; gap: 1.25vw; padding: 0.5rem; margin-top: calc( -1 * var(--rad-m) - var(--pad-xxs) + 2px); max-height: 50vh; border: none; border-radius: var(--rad-m) !important; background-color: var(--c-lgrey); color: var(--c-black); &:has( :not( > .notification ) ) { border-radius: 99999px !important; } .notification { padding: 0.5rem; gap: 0.5rem; border-radius: calc( var(--rad-m) * 0.56); background: none !important; &:is( :hover , :focus , :focus-within ) { background: var(--c-white-mute) !important; } .title-container { display: flex; flex-direction: row; align-items: center; position: relative; padding-right: 1.5rem; .title { color: var(--c-pri) !important; font-family: var(--font-hl) !important; font-size: clamp( 1rem, 1.25vw, 1.25rem) !important; font-weight: var(--fw-bold) !important; line-height: 100% !important; } button { top: 0.5lh; right: 0; transform: translateY(-50%); padding: 0; border-radius: var(--rad-inf); color: var( --c-red ); background: none; opacity: 0.5; &:hover { opacity: 1; background: #FBFBFB; } } } .body-container { display: flex; flex-direction: column; gap: 0.5rem; padding: 0 !important; p.txt { color: var(--c-black); font-family: var(--font-def) !important; font-size: clamp( 0.75rem, 2.1vw, 0.75rem) !important; font-weight: 500; line-height: 110% !important; text-wrap: balance; } a.wt-bt-s { width: fit-content; min-height: fit-content; padding: 0.5rem 0.75rem; font-size: var(--fz-tt); &:after { display: none !important; content: ''; } } } } .empty-message { display: block; text-align: center; color: inherit; } } } .notifications-dropdown { position: absolute; bottom: -0.5rem; right: 0; transform: translateY(100%); width: 25vw; max-width: 31.8725rem; padding: 0; border-radius: 1rem; background: var(--c-white) !important; box-shadow: var(--shadow-modal) !important; opacity: 0; overflow: hidden; pointer-events: none; transition: opacity 0.25s ease-in-out; &.show { opacity: 0.95; pointer-events: all; } .header { z-index: 2; display: grid; grid-template-columns: auto 1fr; align-items: start; position: static; overflow: hidden; padding: 1rem 1.5rem; background: none; color: var(--c-black) !important; #notifs-label { grid-column: 2; justify-self: start; font-size: 1.25rem; font-weight: 700; line-height: 100%; color: inherit; } .close { grid-column: 3; justify-self: end; position: static; width: 1.5rem; height: 1.5rem; margin-left: auto; transform: none; background: none; color: var(--c-grey-profile); .wt-icon { mask-size: auto 0.75rem; -webkit-mask-size: auto 0.75rem; } } } .content { z-index: 3; overflow: auto; position: relative; display: flex; flex-direction: column; justify-content: stretch; gap: 0; padding: 0 !important; max-height: 50vh; border: none; background: none !important; color: var(--c-black); box-shadow: none !important; &> * { margin-top: 1px; } &> *:before { content: ''; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 100%; height: 1px; background: var(--c-grey); } .notification { display: block; margin-top: 1px; padding: 0; gap: 0.25rem; background: none !important; &> a { display: block; padding: calc( 0.75rem + 1px ) 0.75rem 0.75rem 0.75rem; border-radius: 1rem; &:is( :hover , :focus , :focus-within ) { background: var(--c-lgrey) !important; .notification-inner { button.delete { visibility: visible; } } } .notification-inner { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 0.5rem 0.75rem; padding: 0 0.75rem; .title-container { order: 0; display: flex; flex-direction: row; align-items: center; position: relative; .title { color: var(--c-pri) !important; font-family: var(--font-hl) !important; font-size: clamp( 1rem, 1.25vw, var(--trurem )) !important; font-weight: 600!important; line-height: 100% !important; } } .body-container { order: 2; display: flex; flex-direction: column; gap: 0.5rem; min-height: 1rem; padding: 0 !important; p.txt { color: var(--c-black); font-family: var(--font-def) !important; font-size: clamp( 0.75rem, 1.5vw, 1rem) !important; font-weight: 500; line-height: 110% !important; text-wrap: balance; } } button.delete { order: 1; visibility: hidden; display: block; position: static; width: 1.5rem; height: 1.5rem; padding: 0.25rem; border-radius: var(--rad-inf); color: var(--c-grey-profile); background: none; transition: none !important; &:hover { color: var(--c-pri); background: var(--c-white); } * { padding: 0 !important; -webkit-mask-size: contain; mask-size: contain; } } &:after { order: 3; content: ''; width: 0.625rem; height: 100%; max-height: 0.625rem; margin-top: auto; aspect-ratio: 1; align-self: center; justify-self: center; transform: translateX( 0 ); background-color: var(--c-grey-profile); mask-image: var(--ico-arrow-simple) !important; -webkit-mask-image: var(--ico-arrow-simple) !important; mask-position: center !important; -webkit-mask-position: center !important; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: contain; -webkit-mask-size: contain; transition: all 0.2s linear;; } } &:is( :hover , :focus ) .notification-inner:after { transform: translateX( 50% ); background-color: var(--c-pri); } } } .empty-message { display: block; text-align: center; color: inherit; } } } } #user-nav { order: 3; position: relative; height: 3.25rem; border-radius: var(--rad-inf); background-color: rgba(255,255,255,0.82); & , * { transition-property: all; transition-duration: 0.35s; transition-timing-function: ease-in-out; } &:hover { background-color: var(--c-pri); * { color: var(--c-white); } img { outline-color: var(--c-blue); } #user-nav-sub { opacity: 1; pointer-events: all; } } img { outline: 3px solid transparent; } &> * { position: relative; z-index: 2; } #user-nav-profile { display: flex; justify-content: stretch; align-items: center; min-width: 160px; width: 100%; height: 100%; :is( a, button ) { align-items: normal; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr var(--wi-bt-base-size); grid-template-rows: 1fr; gap: 0; grid-auto-columns: auto 1fr; .greeting { flex-shrink: 2; align-self: center; justify-self: end; text-align: right; justify-content: flex-start; align-items: center; gap: var(--gap-xs); padding: 0 0.75rem 0 1.25rem; font-size: 1rem; line-height: 120%; font-weight: 400; .name { min-width: 100%; font-size: calc( 100cqw / 1ch ); font-weight: 600; } } .pfp { align-self: center; justify-self: end; aspect-ratio: 1; width: var(--wi-bt-base-size); height: var(--wi-bt-base-size); border-radius: var(--rad-inf); background-color: var(--c-grey); background-position: center; background-size: auto 60% ; img { aspect-ratio: 1; object-fit: cover; object-position: 50% 0%; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; border-radius: var(--rad-inf); } &.no-pfp { background-image: url(''); } } &.wpg .pic { img { min-width: 70%; max-width: 70%; min-height: 70%; max-height: 70%; object-fit: contain; object-position: 50% 50%; } &.no-pfp { background-image: url(''); } } } } #user-nav-sub-wrap { pointer-events: none; position: absolute; right: 0; padding-top: 1rem; &:hover { pointer-events: all; } } &:hover { #user-nav-sub-wrap { pointer-events: all; } } #user-nav-sub { position: static; opacity: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; width: max-content; max-width: 100vw; padding: var(--pad-xxs); border-radius: 1.5rem; background-color: var(--c-white); box-shadow: var(--shadow-modal); transition: opacity 0.3s ease-in-out; &:focus-within { opacity: 1; pointer-events: auto; } li { width: 100%; * { padding: var(--pad-xxs); font-size: 0.9rem; font-weight: 600; color: var(--c-blue); } &> a { position: relative; min-width: 100%; width: max-content; border-radius: var(--rad-inf); background-color: transparent; transition: all 0.3s ease-in-out; &:hover { padding-left: var(--pad-s); background-color: var(--c-blue); color: var(--c-white); } } } } } #nav-tree-wrapper { position: relative; order: 4; label { z-index: 999 !important; position: relative; display: flex; justify-content: center; align-items: center; width: var(--wi-bt-base-size); height: var(--wi-bt-base-size); padding: 0 !important; transition-property: transform , opacity; transition-duration: 0.2s , 0.2s; transition-timing-function: linear , linear; transition-delay: 0.2s , 0.2s; svg { position: absolute; inset: 25%; inset: round( up, 25%, 1px ); transition: var(--wi-nav-shrink-speed) linear var(--wi-nav-shrink-delay); } #icon-close { opacity: 0; } #icon-open { transform: none; opacity: 1; } } #hov-tree { display: none; position: absolute; padding: 1rem; top: 100%; right: -1rem; #hov-tree-trunk { position: static; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 0.75rem; min-width: 250px; width: max-content; max-width: 100vw; padding: var(--pad-xxs); border-radius: 1.5rem; background-color: var(--c-white); box-shadow: var(--shadow-modal); hr { margin: 0 0.5rem; } &> li { width: 100%; &> ul { width: 100%; &> li { width: 100%; * { padding: var(--pad-xxs); font-size: 1rem; font-weight: 600; color: var(--c-pri); } &> a { position: relative; min-width: 100%; width: max-content; padding: var(--pad-xxs) var(--pad-xs); border-radius: var(--rad-inf); background-color: transparent; transition: all 0.3s ease-in-out; &:hover { background-color: var(--c-pri); color: var(--c-white); } } } } } } } label:is( :hover , :focus ) + #hov-tree , label:has( > .ptr-catcher:is( :hover , :focus ) ) + #hov-tree , #hov-tree:is( :hover , :focus , :focus-within ) { display: block; } input { display: none; } label .ptr-catcher { content: ''; display: none; position: absolute; inset: calc( var(--pad-s) * -1 ); } label:is( :hover , :focus ) .ptr-catcher { display: block; } #nav-tree { pointer-events: none; opacity: 0; z-index: 998 !important; position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; margin: 0 !important; padding: var( --pad-l) !important; border: none !important; transform: translateY( -100% ); display: flex !important; flex-direction: column; justify-content: center; align-items: center; backdrop-filter: blur( 5px ); transition-property: transform , opacity; transition-duration: 0.4s , 0.3s; transition-timing-function: ease-in-out , linear; transition-delay: 0s , 0.1s; * { color: var(--c-black); } &> ul { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: var(--pad-ctr-s); width: 100%; max-width: 1020px; &> li { width: 100%; details { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; width: 100%; padding: var(--pad-ctr-m) 0; &> * + * { margin-top: var(--pad-m); } summary { display: flex; justify-content: flex-start; align-items: center; width: 100%; padding-bottom: var(--pad-s); border-bottom: 1px solid var(--c-grey); font-family: var(--font-hl); font-size: 1.5rem; font-weight: 600; line-height: 100%; text-transform: uppercase; cursor: pointer; &::before { content: '•'; font-size: 2rem; margin-right: 0.6ch; } &::after { content: '↓'; width: 1.1rem; height: 1.1rem; margin-left: var(--pad-s); font-size: 0.001px; color: transparent; background-color: transparent; background-image: url('/wp-content/themes/custom-theme/images/icon_arrow_simple.svg'); transform: rotateZ(90deg) rotateY(0deg); filter: invert(0%); transition: transform 0.3s linear; } } &[open] summary::after { transform: rotateZ(90deg) rotateY(180deg); } &> ol { counter-reset: sub-item; display: flex; flex-direction: column; justify-content: flex-start; align-content: stretch; gap: var(--pad-s); width: 100%; padding: 0 var(--pad-l); &> li { counter-increment: sub-item; width: 100%; display: flex; justify-content: flex-start; align-items: center; font-family: var(--font-hl); font-size: 2.5rem; font-weight: 700; line-height: 100%; a { width: 100%; } &::before { content: counter(sub-item, decimal-leading-zero); display: flex; justify-content: center; align-items: center; aspect-ratio: 1; width: 1.25em; height: 1.25em; padding: var(--pad-xs); margin-right: var(--pad-s); border-radius: var(--rad-inf); font-variant-numeric: tabular-nums; font-weight: 400; font-size: 1.5rem; line-height: 100%; opacity: 0.4; transition: margin 0.2s linear; } &:is( :hover , :focus )::before { margin-right: var(--pad-m); background-color: var(--c-black); color: var(--c-white); opacity: 1; } } } &> .branch-extra { width: 100%; display: flex; align-items: center; gap: var(--gap-xl); padding: 0 var(--pad-m); .extras-label { margin-right: var(--pad-xxxs); line-height: 100%; opacity: 0.4; } ul { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: var(--gap-xl); a.wt-bt { min-height: 2.5rem; padding: var(--pad-xxs) var(--pad-s); background: none; border: 1px solid var(--c-grey); color: var(--c-dgrey); font-size: var(--trurem); } } } } } } } input:checked + #nav-tree { pointer-events: auto; opacity: 1; transform: translateY( 0 ); } label:has( + input:checked ) #icon-open { transform: translate( -50vw, -50vh ) scale( 1000% ); opacity: 0; } label:has( + input:checked ) #icon-close { opacity: 1; } } #header-shrinker { opacity: 0; pointer-events: none; position: absolute; bottom: -0.75rem; left: 50%; margin-left: -0.75rem; rotate: -90deg; transform: rotateY(0deg); } } */ } } } header:is( :hover , :focus-within ) { #pageHeader nav .actions #header-shrinker { opacity: 1 !important; pointer-events: all !important; } } .sticky-wrapper.sticky { #pageHeader { background-color: var(--c-white); height: var(--wi-nav-height-min) !important; nav { .actions { margin-top: calc( ( var(--wi-nav-height-min) - ( 2 * var(--pad-s) ) - var(--wi-bt-base-size) ) / 2 ); #header-shrinker { transform: rotateY(180deg); } } #logo-wrapper { .domain { opacity: 0; pointer-events: none !important; } } } } .exwi-portal-content { inset: 0 0 0 var(--wi-nav-height-min) !important; } } #global-toggle { flex-shrink: 0; position: relative; width: 29rem; /* height: var(--wi-bt-base-size); */ height: 3.25rem; margin: 0; border-radius: 99999px; background: transparent; font-family: var(--font-hl); font-size: 1.125rem; line-height: 120%; input { display: none; } .layer-front , .layer-back { z-index: 0; display: flex; justify-content: stretch; align-items: stretch; height: 100%; } .layer-front { pointer-events: none; z-index: 1; position: absolute; inset: 0; background: white; clip-path: shape( nonzero from 1.75rem 0.125rem, arc to 1.5rem 3.125rem of 1.5rem 1.5rem large ccw, line to calc(50% - 1.75rem) 3.125rem, arc to calc(50% - 1.375rem) 0.125rem of 1.5rem 1.5rem large ccw, close ) ; transition: clip-path var(--wi-toggle-speed) var(--wi-toggle-func) var(--wi-toggle-delay); label.opt-b { color: transparent; &::after { content: ''; width: 4em; height: 0.95em; mask-image: var(--logo-talents); mask-position: center; mask-size: contain; mask-repeat: no-repeat; background-color: var(--c-pri); } } } .layer-back label { position: relative; &:hover:before { content: ''; position: absolute; inset: 0.125rem; background-color: var( --c-white ); opacity: 0.16; border-radius: var(--rad-l); } &.opt-b { color: transparent; &::after { content: ''; width: 4em; height: 0.95em; mask-image: var(--logo-talents); mask-position: center; mask-size: contain; mask-repeat: no-repeat; background-color: var(--c-white); } } } #glob-toggle-inner { cursor: pointer; user-select: none; position: relative; width: 29rem; /* height: var(--wi-bt-base-size); */ height: 3.25rem; margin: 0; padding: 0; border: none; border-radius: var(--rad-inf); background: var(--c-pri); * { cursor: inherit; } &:has(.opt-b:checked) .layer-front { clip-path: shape( nonzero from calc(50% + 1.75rem) 0.125rem, arc to calc(50% + 1.375rem) 3.125rem of 1.5rem 1.5rem large ccw, line to calc(100% - 1.75rem) 3.125rem, arc to calc(100% - 1.5rem) 0.125rem of 1.5rem 1.5rem large ccw, close ) ; } /* &::before { content: ''; z-index: 3; position: absolute; height: 0.125rem; inset: 0 1.5625rem auto 1.5625rem; background-color: var(--c-pri); } &::after { content: ''; z-index: 3; position: absolute; height: 0.125rem; inset: auto 1.5625rem 0 1.5625rem; background-color: var(--c-pri); } */ } label { flex-basis: 50%; display: flex; justify-content: center; align-items: center; position: static; z-index: 1; height: 100%; width: auto; font-size: 1em; font-weight: 700; font-family: inherit; letter-spacing: 0.025em; color: white; border-radius: var(--rad-inf); span { height: 1.1em; } } /* .layer-back label.opt-b::after { filter: grayscale(100%) saturate(0%) brightness(0%) invert(100%); } */ .layer-front label { color: var(--c-pri); } } /* ---------- */ /* FOOTER */ /* ---------- */ #pageFooter { width: 100%; } /* ------------ */ /* WPS HERO */ /* ------------ */ main > div.page-variant > section:first-child > .section-inner { padding-top: calc( var(--pad-ctr-cl) + var(--wi-nav-height) ); } main > div.page-variant > section.layout-hero > .section-inner { z-index: 0; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 50px; height: 100vh; height: 100dvh; &> .wt-bt::after { content: none; display: none; } &> img { z-index: 2; position: absolute; inset: auto auto -1px 50%; transform: translateX( -50% ); aspect-ratio: 5 / 9; width: 500px; max-width: 100%; max-height: 100%; object-fit: contain; object-position: 50% 0%; border-radius: none; } header , p { z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 3rem; } header p { max-width: 360px; font-size: 1.5rem; line-height: 2.0rem; font-weight: 700; } .shortcut-box { z-index: 3; position: absolute; inset: auto 2rem 7rem auto; width: 33.125rem; height: 12.5rem; max-height: 12.5rem; &> a { width: 100%; height: 100%; } .shortcut-box-inner { width: 100%; height: 100%; display: flex; flex-wrap: nowrap; justify-content: stretch; align-items: stretch; padding: var(--pad-xxxs); background: var(--c-white-glass); border-radius: var(--rad-s); backdrop-filter: blur( 1rem ); box-shadow: .5rem .5rem 1rem 0 rgba( 10, 10, 10, 0.08 ); transform: scale( 1 ); transition: all 0.22s ease 0s; * { flex-basis: 100%; width: 50%; color: #000; } p { display: block; position: relative; padding: var(--pad-m); padding-bottom: calc( var(--pad-m) + 1.3rem ); font-size: 1.5rem; line-height: 2.0rem; font-weight: 700; &::after { content: '↗'; position: absolute; left: var(--pad-m); bottom: auto; top: calc( 100% - var(--pad-m) - 1.25rem ); display: block; width: 1.25rem; height: 1.25rem; background-color: transparent; background-image: url('/wp-content/themes/custom-theme/images/icon_arrow_dio.svg'); font-size: 0.001px; color: transparent; } } img { object-fit: cover; object-position: 50% 0%; border-radius: calc(var(--rad-m) - var(--pad-xxs)); } } &> a:is( :hover , :focus ) .shortcut-box-inner { transform: scale( 1.04 ); } } } /* ------------------------------- */ /* SECTION "FUTURE" (keylinks) */ /* ------------------------------- */ main > div.page-variant > section.layout-keylinks-grid > .section-inner { display: flex; flex-direction: column; justify-content: stretch; align-items: flex-start; gap: 2rem; .cols { display: flex; justify-content: stretch; align-items: stretch; gap: var(--gap-m); ul { display: flex; flex-direction: column; justify-content: stretch; align-items: stretch; gap: var(--gap-m); li { flex-basis: auto; max-height: 33.3333%; a , .box { display: block; width: 100%; height: 100%; } .box { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--gap-m); min-height: 180px; background: var(--c-lgrey); border-radius: var(--rad-m); padding: var(--pad-s); h3 { flex-basis: 100%; text-align: right; } p { flex-shrink: 1; flex-grow: 1; flex-basis: fit-content; color: var(--c-dgrey); } &::after { align-self: flex-end; content: '↗'; flex-shrink: 0; flex-grow: 0; flex-basis: 1.25rem; width: 1.25rem; height: 1.25rem; background-color: transparent; background-image: url('/wp-content/themes/custom-theme/images/icon_arrow_dio.svg'); font-size: 0.001px; color: transparent; } } } } img { flex-basis: 100%; object-position: 50% 0%; object-fit: cover; max-width: 100%; max-height: 100%; min-height: 745px; border-radius: var(--rad-m); } } .shortcut-box { position: absolute; inset: auto 2rem 7rem auto; width: 33.125rem; height: 12.5rem; max-height: 12.5rem; &> a { width: 100%; height: 100%; } .shortcut-box-inner { width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content: stretch; align-items: stretch; padding: var(--pad-xxxs); border-radius: var(--rad-s); background: var(--c-white); backdrop-filter: blur( 1rem ); box-shadow: .5rem .5rem 1rem 0 rgba( 0, 0, 0, 0.08 ); transform: scale( 1 ); transition: transform 0.4s ease-in-out 0s; * { flex-basis: 100%; width: 50%; } p { position: relative; padding: var(--pad-m); font-size: 1.5rem; line-height: 2.0rem; font-weight: 700; ::after { content: '↗'; position: absolute; left: 0; bottom: 0; display: block; width: 1.25rem; height: 1.25rem; background-color: transparent; background-image: url('/wp-content/themes/custom-theme/images/icon_arrow_dio.svg'); font-size: 0.001px; color: transparent; } } img { object-fit: cover; object-position: 50% 0%; border-radius: var(--rad-s); } } &> a:is( :hover , :focus ) .shortcut-box-inner { transform: scale( 1.03 ); } } } /* ------------------------------ */ /* SECTION TESTIMONIAL SLIDER */ /* ------------------------------ */ main > div.page-variant > section.layout-testimonial-slider > .section-inner { overflow-x: hidden; display: flex; flex-direction: column; justify-content: stretch; align-items: flex-start; gap: 2rem; background: var(--c-white); border-radius: var(--rad-m); .splide__track , .splide__list , .splide__slide { margin: 0; padding: 0; } .splide__track { position: relative; .splide__list { .splide__slide { .slide-inner { display: flex; justify-content: stretch; align-items: stretch; gap: var(--gap-l); img { flex-basis: 50%; object-position: 50% 0%; object-fit: cover; max-width: 100%; max-height: 100%; min-height: 650px; border-radius: var(--rad-m); } figure { flex-basis: 50%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; height: 100%; padding: 3.0em 0; /* button height + a bit */ blockquote { margin-top: var(--gap-cxl); } figcaption { margin-top: var(--trurem); } } } } } .splide__arrows { z-index: 2; position: absolute; bottom: 0; left: calc( 50% + ( var(--gap-l) / 2 ) ); /* col width + half gap -> flush width col */ } } .testimonial-slider-button .wt-icon { padding: 0; } .testimonial-slider-button[data-direction="prev"] { transform: rotateY( 180deg ); } } /* ------------------------- */ /* SECTION STARTOFF GRID */ /* ------------------------- */ main > div.page-variant > section.layout-startoff-grid { background-color: var(--c-lgrey); .section-inner { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 2rem; .cols { display: flex; justify-content: stretch; align-items: stretch; gap: 1rem; .intro { flex-shrink: 2; flex-grow: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 1rem; p { max-width: 400px; } img { flex-basis: 100%; height: auto; margin-top: 0; object-position: 50% 0%; object-fit: cover; min-width: 100%; max-width: 100%; border-radius: var(--rad-m); } } .tiles-list-wrapper { position: relative; flex-shrink: 0; flex-grow: 1; &::before , &::after { pointer-events: none; z-index: 1; position: absolute; background-color: var(--c-lgrey); border-radius: 1px; } &::before { height: 2px; inset: 50% var(--pad-s) auto var(--pad-s); margin-top: -1px; } &::after { width: 2px; inset: var(--pad-s) auto var(--pad-s) 50% ; margin-left: -1px; } ul { z-index: 2; position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; background: var(--c-white); border-radius: var(--rad-m); .tile { position: relative; padding: var(--pad-s) var(--pad-s) var(--pad-m) var(--pad-s); } a .tile::after { position: absolute; right: var(--pad-s); top: calc( 100% - var(--pad-m) ); content: '↗'; width: 1.25rem; height: 1.25rem; background-color: transparent; background-image: url('/wp-content/themes/custom-theme/images/icon_arrow_dio.svg'); font-size: 0.001px; color: transparent; } } } } } } /* ------------------------- */ /* SECTION FLIPCARDS GRID */ /* ------------------------- */ main > div.page-variant > section.layout-flipcards-grid > .section-inner { display: flex; flex-direction: column; justify-content: stretch; align-items: flex-start; gap: 2rem; .cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad-ctr-l); width: 100%; .col-left , .col-right { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--pad-ctr-l); border: 2px solid transparent; background-clip: border-box; background: var(--c-white); details { position: relative; width: 100%; height: 500px; border-color: var(--c-grey); background-color: var(--c-white); summary.front , &::details-content , .back { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--rad-m); transform-origin: 50% 50%; transition-property: transform , background-color; transition-duration: 1s , 10ms; transition-timing-function: linear , linear; transition-delay: 1s .5s; transition-behavior: allow-discrete; } summary.front { pointer-events: none; z-index: 2; transform: rotateY( 0deg ); pointer-events: none; * { pointer-events: none; /* backface-visibility: hidden !important; */ } .card-bg { z-index: 0; position: absolute; inset: 0; img , svg { position: absolute; left: 0; bottom: 0; width: 9999px; max-width: 66.666%; height: 9999px; max-height: 66.666%; } } header { z-index: 1; position: absolute; inset: 0; padding: var(--pad-ctr-m) var(--pad-ctr-l) var(--pad-ctr-cl) var(--pad-ctr-l); .card-tag { font-size: var(--trurem); color: var(--c-dgrey); } h3 { font-size: 2.5rem !important; color: var(--c-black); padding-top: var(--pad-s); } } .wt-bt-modal { z-index: 5; pointer-events: auto; /* backface-visibility: visible !important; */ position: absolute; left: auto; right: var(--pad-ctr-m); bottom: var(--pad-ctr-m); transform: translateX(0%); transition: all 5ms linear .5s; /* halfway through the flip */ transition-behavior: allow-discrete; } } &::details-content { z-index: 2; pointer-events: none; transform: rotateY( 180deg ); } /* details-content is "around" .back */ div.back { display: flex; justify-content: stretch; align-items: flex-start; align-content: center; flex-wrap: wrap; gap: var(--gap-m) var(--gap-l); padding: var(--pad-ctr-l); div.card-image-wrapper { position: relative; width: 100%; height: 200px; border-radius: var(--rad-s); background-color: var(--c-pri); img , svg { position: absolute; left: 50%; top: 50%; width: auto; max-width: 40%; max-height: 95%; height: 95%; transform: translate( -50%, -50% ); } } p { width: 100%; } footer { width: auto; width: fit-content; a { pointer-events: auto; } } } &[open] { &::details-content { transform: rotateY( 0deg ); } summary.front { transform: rotateY( -180deg ); .wt-bt-modal { z-index: -5; right: calc( 100% - var(--pad-ctr-m) ); transform: translateX(100%); } } /* div.back { transform: rotateY( 0deg ); } */ } } } .col-left ul li article.even details , .col-right ul li article.odd details { height: 600px; border-color: transparent; summary.front { background-color: var(--c-pri); .card-tag , h3 { color: var(--c-white); } h3 { font-size: 2rem !important; } } &::details-content { transform: rotateY( -180deg ); } div.back { /* background-color: var(--c-pri); */ div.card-image-wrapper { height: 275px; background-color: #FFAECA; } p , footer a { color: var(--c-white); } } } .col-left ul li article.even details[open] , .col-right ul li article.odd details[open] { &::details-content { transform: rotateY( 0deg ); } summary.front { background-color: transparent; transform: rotateY( 180deg ); } } } } /* ------------------------- */ /* SECTION OUR BRAND */ /* ------------------------- */ main > div.page-variant > section.layout-ourbrand > .section-inner { display: flex; flex-direction: column; justify-content: stretch; align-items: flex-start; gap: 2rem; .cols { display: flex; justify-content: stretch; align-items: stretch; gap: var(--gap-m); .intro { flex-basis: 35%; flex-shrink: 0; flex-grow: 2; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: var(--gap-m); } &> img { flex-basis: 65%; flex-shrink: 2; flex-grow: 0; object-position: 50% 0%; object-fit: cover; max-width: 65%; max-height: 100%; border-radius: var(--rad-m); } } figure.cols { padding-top: var(--gap-m); border-top: 1px solid var(--c-grey); display: flex; justify-content: stretch; align-items: stretch; gap: var(--gap-m); &>* { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } &>div:first-child { align-self: flex-start; flex-basis: 30%; flex-shrink: 1; flex-grow: 0; } &>figcaption:nth-child(2) { flex-basis: 40%; flex-shrink: 2; flex-grow: 0; p { text-align: left; font-family: 1.25rem; font-weight: 500; } } &>div:last-child { align-self: flex-end; flex-basis: 30%; flex-shrink: 0; flex-grow: 0; img { max-height: 98px; width: auto; } } } } /* -------------------------- */ /* SECTION POSTS CAROUSEL */ /* -------------------------- */ main > div.page-variant > section.layout-posts-carousel > .section-inner { overflow-x: hidden; display: flex; flex-direction: column; justify-content: stretch; align-items: flex-start; gap: 2rem; .splide__track { width: auto; ul.splide__list { width: auto; display: flex; gap: var(--pad-ctr-m); li.splide__item { min-width: 385px; article a { display: block; background-color: var(--c-white); padding: var(--pad-xxs) var(--pad-xxs) var(--pad-m) var(--pad-xxs); border-radius: var(--rad-s); header { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: var(--pad-s); img , .img-placeholder { position: relative; aspect-ratio: 23 / 16; width: 100%; max-width: 100%; min-width: 100%; height: auto; object-fit: cover; object-position: center; border-radius: var(--rad-s); } .img-placeholder::after { content: ''; position: absolute; inset: var(--pad-m); background-image: url('/wp-content/themes/custom-theme/images/logo_w.svg'); background-size: 40% auto; background-position: center; } hgroup { padding: 0 var(--pad-xxs); .meta { font-size: 0.8125rem; line-height: 100%; * { display: inline-block; } } h3 { font-size: 1.5rem !important; font-weight: 700; line-height: 120%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } } } p { padding: var(--pad-xxs) var(--pad-xxs) 0 var(--pad-xxs); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } &::after { position: absolute; right: var(--pad-s); top: calc( 100% - var(--pad-m) ); content: '↗'; width: 1.25rem; height: 1.25rem; background-color: transparent; background-image: url('/wp-content/themes/custom-theme/images/icon_arrow_dio.svg'); font-size: 0.001px; color: transparent; } } } } menu.splide__arrows { margin-left: 0; margin-top: var(--pad-ctr-l); } } } main > div.page-variant > section.layout-intention-tabber > .section-inner { padding-top: 0; &.overlap { margin-top: -8rem; } .tabber-main { position: relative; background: var(--c-white); border-radius: var(--rad-m); padding: 2rem var(--pad-ctr-s) 2rem var(--pad-ctr-l); gap: var(--gap-l); .tabber-nav-wrapper { ul.tabber-nav { width: 100%; display: flex; justify-content: stretch; align-items: center; padding-bottom: 2rem; gap: 2rem; .tabber-nav-bt { width: 100%; min-height: 4rem; padding: 1.5rem 2rem; background-color: var(--c-white); font-size: 1.5rem; font-weight: 700; line-height: 100%; border-radius: 2rem; text-align: center; &.is-active { background: var(--c-blue); } } } .tabber-people { pointer-events: none; .tab-person { position: absolute; top: 0; left: 100%; opacity: 0; transform: translate( 80%, -50% ); transform: translate( 80%, round( up, -50%, 1px ) ); margin-top: 1px; transition-property: opacity , transform; transition-duration: 0.2s , 0.3s; transition-timing-function: ease-in-out , ease-in-out; transition-delay: 0s , 0s; &.is-active { opacity: 1; transform: translate( -36%, -50% ); /* transform: translate( -36%, round( up, -50%, 1px ) ); */ transform: translate( -46%, round( up, -50%, 1px ) ); transform: translate( -46%, round( up, -52.5%, 1px ) ); } .person-mobile { display: none; } } } } .tabber-contents { /* splide stuff between */ .tabber-content { display: flex; justify-content: stretch; align-items: stretch; gap: 2rem; header { flex-basis: 50%; display: flex; align-items: center; hgroup { max-width: 430px; h2 { font-size: 3rem; line-height: 115%; font-weight: 700; } p { margin-top: 0; } } } .img-wrapper , img { flex-basis: 50%; max-width: 100%; min-width: 100%; height: 400px; border-radius: var(--rad-m); } } } } .tabber-carousels { display: flex; flex-wrap: wrap; width: 100%; max-width: none; margin: 0; padding: 3rem 0; box-sizing: border-box; overflow: hidden; .splide__track { width: 100%; padding-top: 2rem; padding-left: calc((100vw - (var(--landscape-content-w) + 4rem)) / 2) !important; padding-right: calc((100vw - (var(--landscape-content-w) + 4rem)) / 2 + 4rem) !important; margin-inline: 2rem; overflow: visible; .splide__slide { height: auto; } } .carousel-menu { position: static; display: flex; .splide__arrows { position: static; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; .splide__arrow { position: static; width: 2.5rem; height: 2.5rem; margin: 0; border: 0; transform: none; background-color: var(--c-white-mute); box-shadow: none; opacity: 1; transition: background-color 280ms ease; &:hover { background-color: var(--c-white-dmute); } svg { width: 1.2em; height: 1.2em; fill: var(--c-pri) !important; } } } } } } /* ---------------------- */ /* JOB FILTERS */ /* ---------------------- */ .wt-pill { /* not necessarily always for buttons */ display: flex; justify-content: center; align-items: center; width: fit-content; min-height: 2.5rem; padding: .5rem .75rem; border-radius: var(--rad-inf); background-color: #EAEAEA; color: var(--c-dgrey); font-size: var(--trurem); line-height: 100%; text-align: center; cursor: pointer; transition-property: color , border-color , background-color; transition-duration: .3s , .3s , .3s; transition-timing-function: .3s , .3s , .3s; transition-delay: 0s , 0s , 0s; } form.talents-job-filters { padding-bottom: 1rem; menu , menu li ,fieldset { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 0.75rem; } label.wt-pill { padding: calc( .75rem - 2px ) calc( 1.5rem - 2px ); background-color: var(--c-white); border: 1px solid var(--c-grey); font-size: var(--trurem); font-weight: 400; line-height: 100%; * , &:after { transition: opacity .3s linear 0s; } &:has( > .weight-base ) { position: relative; &> .weight-base { opacity: 1; } &:after { content: attr(data-txt); position: absolute; font-weight: 700; opacity: 0; pointer-events: none; } } } input:checked + label.wt-pill , label.wt-pill.active { background-color: var(--c-blue); border-color: var(--c-blue); color: var(--c-white); &:has( > .weight-base ) { &> .weight-base { opacity: 0; } &:after { opacity: 1; } } } } /* ---------- */ /* PORTAL */ /* ---------- */ .portal-only { display: none; &.show { display: block !important; } } .popup { &> .inner { width: 70vw !important; max-width: 100% !important; max-height: calc( 100% - 4rem ) !important; padding: 1.5rem 2rem !important; border-radius: 1.25rem !important; background: var(--c-white) !important; .header { display: flex; align-items: center; gap: 1rem; padding: 0 0 0.75rem 0; background: none; color: var(--c-black); &:has( + hr ) { padding-bottom: 0; } .title { font-size: clamp( 1.125rem, 3.2vw, 2rem ); line-height: 100%; font-weight: 700; margin: 0px; } .close { position: static; width: 1.5rem; height: 1.5rem; margin-left: auto; transform: none; background: none; color: var(--c-grey-profile); .wt-icon { mask-size: auto 0.75rem; -webkit-mask-size: auto 0.75rem; } } } hr { margin: 1.5rem 0; } .content { max-width: 100% !important; height: fit-content; max-height: 100% !important; margin: 0 !important; padding: 0 !important; .appointment-timeframe-wrapper { display: grid; grid-template-rows: 1fr; grid-template-columns: repeat( auto-fit, minmax(10rem, 1fr) ); gap: 1rem; } } .footer { display: flex !important; justify-content: center !important; align-items: center !important; gap: 0.75rem !important; .wt-bt { margin-top: 0 !important; } .save { width: 100%; } .reset { font-size: 1rem !important; font-weight: 400 !important; color: var(--c-grey-profile) !important; } } } &.show > .inner { top: 50% !important; opacity: 1 !important; transform: translate(-50%, -50%) !important; } } body:has( > main > .page-variant > #exwi-portal-shell ) { overflow: hidden; #pageHeader { box-shadow: none !important; } } @keyframes sheen { 0% { left: 0%; top: -50%; } 50% { left: -200%; top: 100%; } 99.999% { left: -200%; top: 100%; } 100% { left: 0%; top: -50%; } } #exwi-portal-shell { display: grid; grid-template-columns: 17rem 1fr; grid-template-columns: min( 22.5vw, 17rem ) 1fr; position: fixed; inset: 9rem 0 0 0; min-height: 0; margin-top: 0; padding: 0; background: var(--c-lgrey); transition-property: top , grid-template-columns; transition-duration: var(--wi-nav-shrink-speed) , 0.5s; transition-timing-function: linear , linear; transition-delay: var(--wi-nav-shrink-delay) , 0s ; &.up { top: 6rem; #popups > * { top: 6rem !important; } } .sidenav-outer { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 0; width: auto; height: 100%; padding: min( 0.7vw, 0.5rem ); background: var(--c-white); transition: width 0.5s linear; #sidenav-shrinker { display: none; z-index: 100; position: absolute; top: 50%; right: -.75rem; margin-top: -.75rem; transform: rotateY(-180deg); } &:is( :hover , :focus-within ) { #sidenav-shrinker { display: flex; } } #nav-mobile-more { display: none; } #sidenav { flex-basis: 100%; width: 100%; height: auto; margin: 0; padding: 0.5rem; padding: min( 0.7vw, 0.5rem ); nav { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: .5rem; width: 100%; /* max-width: 3rem; */ height: 100%; margin: 0 auto; border: none; border-radius: 0; a { cursor: pointer; text-decoration: none; align-items: center; display: flex; /* min-height: 3rem; */ margin: 0px; padding: 0.75rem; border: none; border-radius: var(--rad-inf); background-color: transparent; color: var(--c-dgrey); font-size: var(--trurem); font-size: clamp( 0.75rem, 1.4vw ,var(--trurem) ); font-weight: 500; line-height: 120%; overflow: hidden; text-wrap: nowrap; transition: all 0.5s ease-in-out; &.active { background-color: #EAEDF2; color: var(--c-blue); font-weight: 600; } &:hover { background-color: #EAEDF2; color: var(--c-blue); } .wt-icon { min-width: 0; min-height: 0; width: 1.5rem; height: 1.5rem; } .txt { display: flex; height: 1lh; margin-left: 0.5rem; transform-origin: 0% 50%; opacity: 1; transform: scale( 1.0 ); transition: all 0.5s ease-in-out; .deskonly { display: inline !important; } .mobonly { display: none !important; } } } } } .wpg-switch-outer { flex-basis: 3rem; z-index: 10; position: relative; min-height: calc( 4rem + 2px ); margin: 0; padding: 0.5rem; * { user-select: none; } &> .wt-icon , &> .txt { display: none; } .wpg-switch { position: relative; overflow: hidden; width: 100%; min-width: 100%; min-height: 3rem; max-width: none; border: 1px solid transparent; &> i { position: absolute; right: 0.5rem; bottom: .25rem; top: auto; } &> hr , &> label { display: none; } &.active > hr { order: 2; width: calc(100% - 3rem); height: 1px; margin: 0 1.5rem; border: none; background-image: linear-gradient( to right, #2b478100 0%, #2b47811a 45%, #2b47811a 55%, #2b478100 100% ); } .select-selected { position: relative; height: 3rem; width: 100%; margin: 0; padding: 0.75rem 2.5rem 0.75rem 1rem; font-size: 1rem; font-weight: 500; line-height: 140%; display: flex; align-content: center; font-family: "Poppins"; border: 1px solid var(--c-grey); border-radius: var(--rad-inf); overflow: hidden; order: 2; &:before { opacity: 0; content: ''; flex-shrink: 0; display: inline-block; font-size: inherit; font-weight: inherit; line-height: 100%; width: 1lh; height: 1lh; margin-right: .5lh; position: absolute; inset: auto calc( .75rem + 3px ) calc( 1rem - 2px ) auto !important; margin: 0 !important; mask-image: var(--ico-bidirection) !important; -webkit-mask-image: var(--ico-bidirection) !important; mask-position: center !important; -webkit-mask-position: center !important; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: contain; -webkit-mask-size: contain; background-color: currentColor; transition: opacity 0.3s; } &:after { opacity: 1; inset: auto calc( .75rem + 2px ) calc( 1rem - 1px ) auto !important; margin-left: 0; rotate: -90deg; transform: rotateY( 0deg ); transition: transform 0.3s linear; } &.select-arrow-active { order: 3; width: calc(100% - 1rem - 2px); margin: 0 calc( 0.5rem - 1px ) calc( 0.5rem - 1px ) calc( 0.5rem - 1px ); &:after { transform: rotateY(-180deg); } } &> .txt { display: block; width: 100%; opacity: 1; transform-origin: 0% 50%; transform: scale( 1.0 ); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-overflow: " ..."; transition: all 0.2s linear; } } .select-items { display: flex; flex-direction: column; align-items: stretch; gap: 1px; position: static; order: 1; top: auto; right: auto; bottom: 0; width: auto; max-height: min( 700px, 50vh); border: none; background: none; &.select-hide { display: none; } &:before , &:after { content: ''; display: block; z-index: 11; position: absolute; left: 0; right: 0; height: 0; opacity: 0; transition-property: height , opacity; transition-duration: .36s; transition-timing-function: ease-in-out; pointer-events: none; } &:before { top: 0; background-image: linear-gradient( to bottom, rgba(255, 255, 255, 1.000) 0%, rgba(255, 255, 255, 0.987) 8.6%, rgba(255, 255, 255, 0.951) 16.5%, rgba(255, 255, 255, 0.896) 23.7%, rgba(255, 255, 255, 0.824) 30.5%, rgba(255, 255, 255, 0.741) 36.8%, rgba(255, 255, 255, 0.649) 42.8%, rgba(255, 255, 255, 0.550) 48.6%, rgba(255, 255, 255, 0.450) 54.3%, rgba(255, 255, 255, 0.351) 60%, rgba(255, 255, 255, 0.259) 65.9%, rgba(255, 255, 255, 0.176) 71.9%, rgba(255, 255, 255, 0.104) 78.2%, rgba(255, 255, 255, 0.049) 84.9%, rgba(255, 255, 255, 0.013) 92.1%, rgba(255, 255, 255, 0.000) 100% ); } &:after { top: 100%; margin-top: -4rem; transform: translateY( -100% ); background-image: linear-gradient( to top, rgba(255, 255, 255, 1.000) 0%, rgba(255, 255, 255, 0.987) 8.6%, rgba(255, 255, 255, 0.951) 16.5%, rgba(255, 255, 255, 0.896) 23.7%, rgba(255, 255, 255, 0.824) 30.5%, rgba(255, 255, 255, 0.741) 36.8%, rgba(255, 255, 255, 0.649) 42.8%, rgba(255, 255, 255, 0.550) 48.6%, rgba(255, 255, 255, 0.450) 54.3%, rgba(255, 255, 255, 0.351) 60%, rgba(255, 255, 255, 0.259) 65.9%, rgba(255, 255, 255, 0.176) 71.9%, rgba(255, 255, 255, 0.104) 78.2%, rgba(255, 255, 255, 0.049) 84.9%, rgba(255, 255, 255, 0.013) 92.1%, rgba(255, 255, 255, 0.000) 100% ); } &.top-overflow:before , &.bot-overflow:after { height: 4.5rem; opacity: 0.85; } &> div { position: relative; width: max-content; width: 100%; padding: 0.5rem !important; /* text-indent: -0.5rem; */ border: none !important; border-radius: var(--rad-inf); background-color: var(--c-white); color: var(--c-blue); transition-property: text-indent , background-color , color; transition-duration: 0.3s , 0.3s , 0.3s; transition-timing-function: ease-in-out , ease-in-out , ease-in-out; &:is( :focus , :hover ) { /* text-indent: 0; */ background-color: var(--c-blue); color: var(--c-white); } } div + div:after { content: ''; display: block; position: absolute; inset: auto 0.5rem 100% 0.5rem; height: 1px; background-image: linear-gradient( to right, #2b478100 0%, #2b47811a 45%, #2b47811a 55%, #2b478100 100% ); } } &.active { display: flex; flex-direction: column; position: absolute; inset: auto 0 0 0; width: max-content; border: none; border: 1px solid var(--c-grey); border-radius: 1.88rem; background: white; box-shadow: var(--shadow-modal); .select-selected { width: calc(100% - 1rem); margin: 0.5rem; } .select-items { position: static; background: none; margin: 0.5rem 0; padding: 0 0.5rem; } } } } } &.sidebar-shrunk { grid-template-columns: 5rem 1fr; .sidenav-outer { #sidenav-shrinker { transform: rotateY(0deg); } #sidenav a { .txt { height: 0; opacity: 0; transform: scale( 0.0 ); } } .select-selected:not( .select-arrow-active ) { height: calc( 3rem - 2px ) !important; padding: calc( 0.75rem - 1px) !important; .txt { opacity: 0 !important; transform: scale( 0.0 ) !important; } &:after { opacity: 0 !important; } &:before { opacity: 1 !important; } } } .exwi-portal-content { & .popup { inset: 9rem 0 0 5rem; } } } .exwi-portal-content { overflow-y: auto; position: relative; width: 100%; height: 100%; /* padding: 2rem 2rem 2rem 3rem; */ /* padding: 2rem; */ padding: 2rem 2.5rem; padding: clamp( 1.25rem, 2.5vw, 2rem ) clamp( 0.75rem, 3.25vw, 2.5rem ); & .popup { background-color: rgb( 43, 7, 20, 0.5 ); z-index: 99; position: fixed; inset: 9rem 0 0 17rem; /* non-shrunk header and non-shrunk sidebar */ width: auto; height: auto; transform: translateY( -101vh ); opacity: 0; transition: inset var(--wi-nav-shrink-speed) linear var(--wi-nav-shrink-delay), opacity 0.5s ease-in-out , backdrop-filter 0.5s ease-in-out; &.show { opacity: 1; backdrop-filter: blur(.1rem); transform: translateY( 0% ); } } /* &> .popups > .popup { background-color: rgb( 43, 7, 20, 0.5 ); z-index: 9999; position: absolute; inset: 0; width: auto; height: auto; transform: translateY( -101vh ); opacity: 0; transition: opacity 0.5s ease-in-out , backdrop-filter 0.5s ease-in-out; &.show { opacity: 1; backdrop-filter: blur(.1rem); transform: translateY( 0% ); } } */ &:has( > .parts-fullwidth ) { overflow: hidden; display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); } .portal-page-header { margin: 0 0 1.5rem; h2 { margin: 0 0 1rem !important; color: var(--c-black) !important; font-family: var(--font-hl) !important; font-size: clamp( 1.5rem, 8vw, 2rem) !important; font-weight: var(--fw-bold) !important; line-height: 100% !important; } p { font-size: var(--trurem) !important; font-size: clamp( 1rem, 1.5vw , var(--trurem) ) !important; font-weight: 400 !important; line-height: 110% !important; color: var(--c-dgrey) !important } } &> .parts { display: grid !important; grid-template-columns: minmax( 0, 1fr ) minmax( 360px, 50% ); gap: 2rem; align-items: start; &.parts-fullwidth { position: relative; display: block !important; width: 100%; min-width: 100%; &> .part-wrapper { position: absolute; inset: 0; padding: 1.75rem 0; border-radius: 0 !important; background: none !important; box-shadow: none !important; } } &.wpg-profile-internship-offer-parts { grid-template-columns: minmax( 0, 1fr ); gap: 1rem; max-width: 1110px; } &> .part-wrapper { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 1.5rem; padding: 1.25rem 2rem; border: 0; border-radius: var(--rad-s); background: var(--c-white); box-shadow: var(--shadow-card); box-sizing: border-box; &:not( :has( > * ) ) { display: none; } .title-wrapper { display: flex; justify-content: flex-start; align-items: center; gap: 2rem; padding-bottom: 1.5rem; h3 { font-size: 1.25rem !important; font-weight: 700; line-height: 100%; } .bt-edit { margin-left: auto; margin-right: 0; } p { margin: 0.75rem 0 0 0; font-size: var(--trurem); font-weight: 400; color: var(--c-grey-profile); } } & hgroup { display: block !important; } &> .wpg-profile-details-part { .profile-data { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 1.5rem; &> div:nth-of-type(1) { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 1rem; .pfp { width: 100px; height: 100px; aspect-ratio: 1; &.no-pfp { position: relative; border-radius: 0.75rem; background-color: var(--c-dmute); &::before { content: ''; z-index: 0; position: absolute; left: 50%; top: 50%; transform: translate( -50%, -50% ); aspect-ratio: 1; width: auto; height: min(8rem, 48%); max-width: 100%; max-height: 48%; background-color: var(--c-white); mask-position: center; -webkit-mask-position: center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: 100% auto; -webkit-mask-size: 100% auto; mask-image: var(--ico-image) !important; -webkit-mask-image: var(--ico-image) !important; } } img { object-fit: contain; object-position: center; width: 100px; height: 100px; aspect-ratio: 1; border-radius: 0.75rem; background: var(--c-lgrey); } } h4 { font-family: var(--font-def) !important; font-size: 1.25rem; font-weight: 600 !important; } p { margin: 0.5rem 0 0 0; font-size: var(--trurem); color: var(--c-black); hyphens: auto; } } &> div:nth-of-type(2) { h4 { padding-bottom: .5rem; font-family: var(--font-hl); font-size: var(--fz-tt); font-weight: 500; line-height: 100%; color: var(--c-grey-profile); } p { min-height: calc( 3.6rem + 1.5rem + 2px ); width: 100%; min-width: 100%; margin: 0; padding: var(--pad-xs); border: 1px solid var(--c-grey); border-radius: 0.75rem; font-weight: 400; line-height: 120%; font-size: 1rem; font-family: var(--font-def); word-wrap: normal; word-break: break-word; } } &> div:nth-of-type(3) , &> div:nth-of-type(4) { ul { display: flex; flex-wrap: wrap; gap: 2rem; li { flex-basis: calc(50% - 1rem); display: flex; align-items: center; gap: 0.75rem; .bullet { aspect-ratio: 1; width: 2.5rem; height: 2.5rem; border-radius: var(--rad-inf); background: var(--c-lgrey); .wt-icon { cursor: auto; width: 100%; height: 100%; background-color: var(--c-dgrey); mask-size: 1.25rem; } } .txt { padding-top: 0.125rem; h4 { font-size: var(--fz-tt); font-weight: 500; color: var(--c-grey-profile); } p { margin: 0.125rem 0 0 0; font-size: var(--trurem); font-weight: 600; line-height: 100%; color: var(--c-dgrey); } } } } } } } &> .student-profile-details-part { .title-wrapper { padding-bottom: 0 !important; } .profile-data { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 1.5rem; &> div:nth-of-type(1) { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 1.5rem; .pfp { width: 7.5rem; height: 7.5rem; aspect-ratio: 1; border-radius: var(--rad-inf); overflow: hidden; &.no-pfp { position: relative; background-color: #F8F8FA; &::before { content: ''; z-index: 0; position: absolute; left: 50%; top: 50%; transform: translate( -50%, -50% ); aspect-ratio: 1; width: min( 2rem, 50%); height: min( 2rem, 50%); max-width: 100%; max-height: 100%; background-color: var(--c-grey-profile); mask-position: center; -webkit-mask-position: center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: 100% auto; -webkit-mask-size: 100% auto; mask-image: var(--ico-person) !important; -webkit-mask-image: var(--ico-person) !important; } } img { object-fit: contain; object-position: center; width: 7.5rem; height: 7.5rem; min-width: 100%; min-height: 100%; aspect-ratio: 1; background: var(--c-lgrey); } } h4 { font-family: var(--font-def) !important; font-size: 1.5rem; font-weight: 500 !important; } p { display: flex; align-items: center; margin: 1rem 0 0 0; font-size: var(--trurem); color: #555; hyphens: auto; line-height: 100%; &:before { color: currentColor; width: 1.25rem; height: 1.25rem; } } } &> * + div { h4 { font-family: var(--font-hl); font-size: var(--trurem); font-weight: 700; line-height: 100%; padding-bottom: 1rem; } } &> div:nth-of-type(2) , &> div:nth-of-type(3) { ul { display: flex; flex-wrap: wrap; gap: 2rem; li { flex-basis: calc(50% - 1rem); display: flex; align-items: flex-start; gap: 0.75rem; .bullet { aspect-ratio: 1; width: clamp( 1.125rem, 0.8vw, 1.5rem); height: clamp( 1.125rem, 0.8vw, 1.5rem); border-radius: 0 !important; background: none; .wt-icon { cursor: auto; width: 100%; height: 100%; background-color: #767676; mask-size: contain; border-radius: 0 !important; } } .txt { padding-top: 0.25rem; h5 { font-family: var(--font-hl); font-size: var(--fz-tt); font-weight: 500; color: #767676; } p { margin: 0.125rem 0 0 0; font-size: var(--trurem); font-weight: 600; line-height: 120%; color: var(--c-dgrey); } } } } } &> div:nth-of-type(4) , &> div:nth-of-type(5) { p { min-height: calc( 3.6rem + 1.5rem + 2px ); width: 100%; min-width: 100%; margin: 0; padding: var(--pad-xs); border: 1px solid var(--c-grey); border-radius: 0.75rem; font-weight: 400; line-height: 120%; font-size: 1rem; font-family: var(--font-def); word-wrap: normal; word-break: break-word; } } } } &> .wpg-profile-contact-part { &> div { .contact { cursor: pointer; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 1rem; width: 100%; margin: 0; padding: 1rem; border: 1px solid var(--c-grey); border-radius: 0.75rem; &:after { align-self: auto; background-color: var(--c-grey-profile); } .bullet { aspect-ratio: 1; width: 2.5rem; height: 2.5rem; border-radius: var(--rad-inf); background: var(--c-lgrey); .wt-icon { cursor: auto; width: 100%; height: 100%; background-color: var(--c-dgrey); mask-size: 1.25rem; } } .txt { margin-right: auto; h4 { max-width: fit-content; margin: 0.5rem 0 0 0; font-family: var(--font-def) !important; font-size: var(--trurem); font-weight: 400; color: var(--c-grey-profile); } p { max-width: fit-content; font-size: var(--trurem); font-weight: 600; line-height: 100%; color: var(--c-black); } } } } } .part { background: none; padding: 0; } &> * + .part { .title-wrapper { padding-bottom: 0; h4 { font-size: var(--trurem); } } } .flags , .items { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; margin-top: 0; &:not( :first-child ) { margin-top: 1rem; } .flag , .item { display: flex; align-items: center; gap: 1rem; label { font-family: var(--font-def); font-weight: 500 !important; margin-right: auto; color: var(--c-grey-profile) !important; } a.wt-bt-dl { margin-left: auto; } } } label { font-family: var(--font-hl); font-size: 1rem; font-weight: 700; line-height: 100%; color: var(--c-black); /* padding-bottom: calc( 0.5rem + 0.125rem ); */ transform: translateY( 1px ); } } &> .part-wrapper.wpg-profile-internship-offer-part { .part { summary { display: flex; align-items: center; label { margin-right: auto; padding-bottom: 0 !important; font-family: var(--font-hl); font-size: 1.25rem; font-size: clamp( var(--trurem), 2.5vw, 1.25rem ); font-weight: 700; line-height: 100%; color: var(--c-black); } } details { .flag-content { overflow: visible hidden; height: 0; transition: height 280ms ease; .flag-content-inner { padding-top: 0.9rem; form { .form-inner { padding: 1.25rem 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; gap: 1rem 2rem; grid-auto-flow: row; grid-template-areas: "title gallery" "teaser gallery" "descr gallery" ; align-content: start; align-items: start; .field-title { grid-area: title; } .field-teaser { grid-area: teaser; } .field-description { grid-area: descr; min-height: 100%; height: 100%; .field-wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; min-height: 100%; height: 100%; .input-field { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; min-height: 100%; height: 100%; textarea { line-height: 125%; resize: none; min-height: calc( 5.1 * 1.2rem + 2 * 0.75rem + 2px ) !important; min-height: round( up, calc( 5.1 * 1.2rem + 2 * 0.75rem + 2px ), 1px ) !important; &:is( :hover , :focus ) { resize: vertical; } } } } } .field-title , .field-teaser , .field-description { .input-field-label { padding-bottom: calc( 0.5rem + 0.125rem ); } } .field-gallery { grid-area: gallery; .input-field { width: 100%; .grid-preview { display: grid; width: 100%; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; gap: 0.5rem; grid-auto-flow: row; grid-template-areas: "main main main" "main main main" "sec tert bt"; .showall { grid-area: bt; position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 0.125rem; width: 100%; min-width: 100%; padding: 0.5rem; border: 2px dashed var(--c-grey); background: #F8F8FA; color: var(--c-pri); font-size: 0.75rem; text-align: center; font-weight: 700; &::before { content: ""; display: block; width: 1.5rem; height: 1.5rem; background: currentColor; mask-size: contain !important; -webkit-mask-size: contain !important; mask-image: var(--ico-pics) !important; -webkit-mask-image: var(--ico-pics) !important; } } .offer-thumb-wrapper.main { grid-area: main; aspect-ratio: 510 / 250; position: relative; width: 100%; } .offer-thumb-wrapper:nth-child(2) { grid-area: sec; } .offer-thumb-wrapper:nth-child(3) { grid-area: tert; } } &> fieldset { .grid-full { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; opacity: 0.001; font-size: 0.001px; } } } } } .bts { display: flex; justify-content: flex-end; align-items: center; gap: 1.5rem; padding-top: 1rem; } } .bts { .alert-save { display: none; &.show { display: block; animation: alertFadeout 5s linear; } } .alert-save-successs { color: #2D9F6B; } .alert-save-fail { color: #A90015; } } } } } } } &> .part-wrapper.download-part , &> .part-wrapper.recruitingsupport-part { &> h3 { font-size: clamp( 1.25rem, 1.5vw, 1.5rem ) !important; font-weight: 700; line-height: 100%; } display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 1rem; padding: 0; border: 0; border-radius: none; background: none; box-shadow: none; box-sizing: border-box; .part { &> h4 { display: flex; align-items: center; font-size: ( 1.00rem, 1vw, 1.25rem ) !important; font-weight: 700; gap: 0.75rem; .new-mark { font-family: var(--font-def) !important; font-size: min( 1em, 1rem) !important; font-weight: 600 !important; line-height: 100%; background-color: var(--c-pri) !important; color: var(--c-white) !important; padding: 0.25rem 0.75rem !important; border-radius: var(--rad-inf); text-align: center; } } display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 1.75rem; padding: 1.5rem; border: 0; border-radius: var(--rad-s); background: var(--c-white); box-shadow: var(--shadow-card); box-sizing: border-box; .items { margin: 0 !important; .item { gap: 0.75rem; padding: 0 .5rem; &:before { margin: 0 !important; } h5 { font-family: var(--font-def) !important; font-size: var(--trurem) !important; font-weight: 500 !important; color: var(--c-dgrey) !important; line-height: 120% !important; text-wrap: balance; hyphens: auto !important; .new-mark { font-family: var(--font-def) !important; font-size: min( 1em, 1rem) !important; font-weight: 600 !important; line-height: 100%; background-color: var(--c-pri) !important; color: var(--c-white) !important; padding: 0.25rem 0.75rem !important; border-radius: var(--rad-inf); text-align: center; } } a { padding: 0.25rem 1rem !important; font-size: 1rem !important; font-weight: 500 !important; } } } } } &> .part-wrapper.download-part { .part { &> h4 { display: flex; align-items: center; font-size: ( 1.00rem, 1vw, 1.25rem ) !important; font-weight: 700; gap: 0.75rem; padding: 0 .5rem; } } } &> .part-wrapper.recruitingsupport-part { img { max-width: 100%; } .wt-bt { width: fit-content; max-width: 100%; font-weight: 500 !important; font-size: var(--trurem) !important; &:after { mask-image: var(--icon-arrow-external) !important; mask-size: contain; -webkit-mask-image: var(--icon-arrow-external) !important; -webkit-mask-size: contain; transform: none; } } .part { gap: 0.75rem !important; } } .part-wrapper { &> menu { display: flex; justify-content: flex-start; align-items: center; gap: 1.5rem; &> li:last-child { margin-left: auto; } li > form { display: flex; justify-content: stretch; align-items: stretch; gap: 0.75rem; } li:has( > .feedbacks-filters-wrapper ) { margin-left: 0; #feedbacks-filters , #feedbacks-filters > .feedbacks-filters-inner , #feedbacks-filters > .feedbacks-filters-inner > div , #feedbacks-filters > .feedbacks-filters-inner > div > fieldset { height: 2.25rem; } ul { display: flex; justify-content: flex-start; align-items: stretch; height: 100%; gap: min( 1vw, 0.5rem ); li { label { padding-left: 0.5rem min( 2.75vw, 1rem ); padding-right: 0.5rem min( 2.75vw, 1rem ); font-size: min( 3.75vw, var(--trurem) ) !important; font-weight: 400 !important; color: var(--c-grey-profile) !important; } input:checked + label { background-color: var(--c-pri) !important; border-color: var(--c-pri) !important; color: var(--c-white) !important; } input + label:hover { background-color: var(--c-pri-active) !important; border-color: var(--c-pri-active) !important; color: var(--c-white) !important; } } } } } &.kanban-part-wrapper , &.feedbacks-part-wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 1rem; inset: 0; padding: 0; height: 100%; max-width: min( 100%, 2400px ); } .my-badges-part { .items { display: grid !important; grid-template-columns: repeat(auto-fit, minmax( 16rem, 1fr )) !important; grid-auto-rows: minmax( max-content, 11.25rem ); gap: 1rem !important; margin-top: 0 !important; .badge { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.25rem; padding: 1rem 1rem 2.25rem 1rem; border: 1px solid #D4D4D4; border-radius: 0.5rem; text-align: center; .progress { position: relative !important; width: fit-content !important; height: fit-content !important; color: var(--c-pri) !important; &> .count { position: absolute !important; inset: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 0 !important; span { font-size: 2rem !important; font-weight: 700 !important; text-align: center !important; } } &> .icon.wt-icon { position: absolute !important; inset: 50% auto auto 50% !important; transform: translate(-50%, -50%) !important; width: 2.75rem !important; height: 2.75rem !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; opacity: 0.15 !important; mask-position: center !important; mask-size: contain !important; color: #727272 !important; } &> .ring { width: fit-content !important; height: fit-content !important; svg { display: block !important; .unfilled { stroke: #727272 !important; } } } } &.done .progress { .count , .ring { visibility: hidden !important; } .icon { background-color: var(--c-pri) !important; opacity: 1 !important; } } &.done:hover .progress { .count , .ring { visibility: visible !important; } .icon { opacity: 0.15 !important; background-color: #727272 !important; } } hgroup.info { * { max-width: 16rem; font-family: var(--font-def) !important; font-size: 1.25rem !important; font-weight: 600 !important; line-height: 100% !important; color: #727272 !important; text-align: center; } p { margin-top: 0.5rem; font-weight: 400 !important; line-height: 120% !important; } } } } } .application-documents-part { .items { display: grid !important; grid-template-columns: repeat(auto-fit, minmax( 16rem, 1fr )) !important; grid-auto-rows: 11.25rem; gap: 1rem !important; margin-top: 0 !important; &> * { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: auto !important; gap: 0.25rem; padding: 1rem; border: 1px dashed #D4D4D4; border-radius: 0.5rem; text-align: center; .content { width: fit-content !important; height: fit-content !important; color: #727272 !important; &> .wt-icon { position: static !important; width: 2.75rem !important; height: 2.75rem !important; min-width: 0 !important; min-height: 0 !important; margin: auto !important; padding: 0 !important; mask-position: center !important; mask-size: contain !important; color: #727272 !important; } h4 { margin-top: 1rem; max-width: 16rem; font-family: var(--font-def) !important; font-size: 1.25rem !important; font-weight: 600 !important; line-height: 120% !important; color: #727272 !important; text-align: center; } } &.has-data .content { .icon { background-color: var(--c-pri) !important; } } .actions { position: absolute !important; inset: 0; .upload { max-width: 100%; width: 100%; height: 100%; cursor: pointer; position: absolute; inset: 0; opacity: 0; } .delete , .open { display: none; } } &.has-data .actions { pointer-events: none; visibility: hidden; position: absolute !important; inset: 1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.5rem; &> * { position: static; opacity: 1; display: block; flex-basis: 8rem; max-width: 100% !important; min-width: 0; min-height: min-content; padding: 0.25rem 1rem; border: 2px solid var(--c-grey); border-radius: var(--rad-inf); background: var(--c-white); font-size: 1rem !important; font-weight: 500; line-height: 100%; color: var(--c-dgrey); text-align: center; &:after , &:before { display: none !important; content: none !important; } &.delete { background: var(--c-red); border: 2px solid var(--c-red); color: var(--c-white); } &.upload { background: var(--c-pri); border: 2px solid var(--c-pri); color: var(--c-white); } &.open { background: var(--c-white); border: 2px solid var(--c-grey); color: var(--c-dgrey); } } } &:is( :hover , :focus ) { .actions { pointer-events: all; visibility: visible; } } } } } .part.kanban-part { overflow: auto visible; position: relative; width: 100%; height: auto; /* base styles for appointment items in any display mode, but mainly default */ table.itms { border-collapse: collapse; tbody tr { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 0; width: 100%; padding: 0.75rem 1.5rem; border: 1px solid var(--c-white); border-radius: 0.75rem; &:is( .hid , .hid-for-search , .hid-for-filter ) { display: none !important; } &.attention { &::after { content: '' !important; display: block !important; position: absolute; inset: 0.75rem 1.5rem; border: 2px solid #EB920180; border-radius: 0.75rem; pointer-events: none; } & td.wish .txtpill { border-color: #EB920180 !important; } & td:last-child { margin-bottom: 0.75rem !important; } } td { display: block; width: 100%; padding: 0 0.75rem; &.hid { display: none; } .cell-inner { display: flex; justify-content: stretch; align-items: center; } } td.person { padding: 0; & a { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 0.65ch; width: 100%; padding: 0.75rem 1rem 0.75rem 0.75rem; border-radius: var(--rad-inf); background: var(--c-white); & , * , h4 { font-weight: 700 !important; font-size: 1.5rem !important; font-size: clamp( calc( 1rem - 0.125em ), 1.15cqw, 1.5rem ) !important; line-height: 1em !important; color: var(--c-pri); } &:is( :hover , :focus ) { background: var(--c-pri); * { color: var(--c-white); } img { outline: 3px solid var(--c-blue); } } .pfp { img { width: 2.5rem; width: clamp( 28px, 2em, 2.5rem ); height: 2.5rem; height: clamp( 28px, 2em, 2.5rem ); aspect-ratio: 1; border-radius: var(--rad-inf); background-color: var(--c-dgrey); font-size: 1rem !important; font-size: clamp( 14px, 0.8em, 1rem ) !important; font-weight: 400; line-height: 210% !important; color: var(--c-white); text-align: center; text-transform: uppercase; } &.no-pfp { & , &> span { display: block; font-size: 1.25rem !important; font-size: clamp( 1rem, 0.75vw, 1.25rem ) !important; font-weight: 400 !important; line-height: 100% !important; color: var(--c-white) !important; text-transform: uppercase !important; padding-top: 0.025lh; } display: flex; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; width: clamp( 1.75rem , 2em , 2.5rem ); height: clamp( 1.75rem , 2em , 2.5rem ); aspect-ratio: 1; border-radius: var(--rad-inf); background-color: var(--c-dgrey); text-align: center; } } p { margin: 0.5rem 0 0 0; font-size: 1rem; color: var(--c-grey-profile); } } } td.wish { width: fit-content; .cell-inner { padding: 0.25rem 0 0 0; .txtpill { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6ch; min-height: 1.75rem; padding: 0.25rem 0.75rem; border: 1px solid var(--c-grey); border-radius: var(--rad-inf); background-color: var(--c-white); font-size: 1rem; font-size: clamp( 0.7rem, 1vw , 1rem ); font-weight: 400; line-height: 100%; color: var(--c-grey-profile); } } } td.files { .cell-inner { display: flex; flex-direction: column; align-items: stretch; padding: 0.75rem 0 0 0; a { display: flex; justify-content: flex-start; align-items: center; padding: 0.75rem 1rem; border-radius: var(--rad-inf); font-size: 1rem; font-weight: 500; line-height: 100%; color: var(--c-grey-profile); &:is( :hover , :focus ) { background-color: var(--c-pri); color: var(--c-white); } } } } td.status-type , td.timeframe { /* status type: in default mode it is the column HEADER */ /* timeframe: in default mode it is part of the WISH element */ display: none; } td.status-extra { font-size: 1rem; font-weight: 500; line-height: 140%; &.confirm , &.done { color: #2D9F6B; } &.proposal { color: #EB9201; } &.reject { color: var( --c-red ); } .cell-inner { padding-top: 0.75rem; &> p { padding-left: 0.25rem; color: inherit; &:is( :not( :empty , :-moz-only-whitespace ) ):before { content: '•'; display: inline-block; margin-right: 0.75ch; font-size: 1.25rem; color: inherit; } } &> .counter-proposal { margin-top: 0.75rem; padding: 0.75rem 0.75rem 0.7rem 0.75rem; border: 1px solid var(--c-grey); border-radius: 0.5rem; background-color: #f9f9f9; p { font-size: var(--fz-tt); font-weight: 500; line-height: 100%; color: var(--c-grey-profile); } .date { margin-top: 0.5rem; font-size: 1rem; font-weight: 600; line-height: 100%; color: var(--c-dgrey); } } } } td.actions { .cell-inner { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 2.5rem; grid-auto-rows: 2.19cqw; grid-auto-rows: round( down, clamp( 1.5rem, 1.7cqw , 2.5rem ), 2px ); grid-auto-rows: clamp( 1.5rem, 1.7cqw , 2.5rem ); grid-auto-rows: round( down, clamp( 1.5rem, 1.7vw , 2.5rem ), 2px ); grid-auto-rows: clamp( 1.5rem, 1.7vw , 2.5rem ); gap: 0.5rem; padding-top: 0.75rem; /* somewhere below commented BTSPANS, based on stage col type, grid col spans for buttons are set */ button { min-width: 100%; height: 100%; } } } } tbody tr:not( [class*="hid"] ) + tr:before { content: ''; display: block; position: absolute; inset: auto 1.5rem 100% 1.5rem; height: 1px; background: var(--c-grey); } tfoot { display: none; padding: 0.75rem 0; &.hid { display: none !important; } tr { display: block; width: 100%; padding-top: 0; padding-bottom: 0; } th { display: block; width: 100%; font-size: 1.5rem; font-weight: 600; line-height: 110%; color: var(--c-dgrey); letter-spacing: 0.2rem; text-align: center; } } } .kanban-stages { position: absolute; top: 0; bottom: 0; width: 100%; min-width: 1280px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr; grid-auto-rows: auto; gap: 1rem; .stage-col { position: relative; overflow: hidden; /* top: calc( 2rem + 2px + 1.25rem + 1.75rem ); */ inset: auto; height: 100%; max-height: 100%; border-radius: 0 0 1rem 1rem; .stage-col-inner { overflow: hidden; position: static; display: grid; grid-template-rows: 3.75rem 1fr; height: fit-content; max-height: 100%; border-radius: 1rem; box-shadow: var(--shadow-card); background: var(--c-white); &:has( :not( > table.itms > tbody ) ) { overflow-y: auto !important; } &:before { top: 3.75rem; top: round( up, 3.75rem, 1px ); /* header height */ } &:after { z-index: 0; } header { z-index: 1; display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem; width: 100%; padding: 0.75rem 1.5rem; background: #f2f2f2; h3 { font-size: 1.25rem !important; font-weight: 700; line-height: 100%; } span.counter { display: flex; justify-content: center; align-items: center; aspect-ratio: 1; width: calc( 1.75rem ); height: calc( 1.75rem ); padding: 0.25rem; border: 1px solid var(--c-grey); border-radius: var(--rad-inf); background: var(--c-white); font-size: var(--trurem); line-height: 1rem; color: var(--c-dgrey); font-variant-numeric: tabular-nums; text-align: center; } span.result-counter { &.hid { display: none; } position: relative; display: flex; justify-content: center; align-items: center; aspect-ratio: 1; width: calc( 1.75rem ); height: calc( 1.75rem ); padding: 0.25rem; border: 3px solid currentColor; border-radius: var(--rad-inf); background-color: var(--c-white); font-size: var(--trurem); font-weight: 700; line-height: 1rem; color: var(--c-pri); font-variant-numeric: tabular-nums; text-align: center; &:after { content: ''; position: absolute; left: 100%; top: 100%; width: 0.25rem; height: 1rem; margin-left: -0.125rem; transform-origin: 0 0; transform: rotate(-45deg) translate( -1px, -1px ); background-color: currentColor; } } .col-settings-wrapper { position: relative; margin-left: auto; margin-right: -0.75rem; &> label { transform: none; position: relative; z-index: 14; display: block; aspect-ratio: 1; width: 1.75rem; height: 1.75rem; padding: .25rem !important; border-radius: 99999px; color: var(--c-grey-profile); background: none; .wt-icon { width: 100%; height: 100%; padding: 0; mask-size: 90% auto; -webkit-mask-size: 90% auto; mask-size: round( down, 90%, 2px ) auto; -webkit-mask-size: round( down, 90%, 2px ) auto; } &:has( > .wt-icon[data-icon="dots"] ) { padding: 0.5rem !important; .wt-icon { mask-size: auto 100%; -webkit-mask-size: auto 100%; } } } &> label:is( :hover , :focus ) { box-shadow: 0 0 .5rem 0 rgba(0,0,0,0.2); } &:has( > input:checked ) > label { background: white; box-shadow: 0 0 .5rem 0 rgba(0,0,0,0.2); } &> input:checked + .col-settings { pointer-events: all; opacity: 1; } .col-settings { pointer-events: none; opacity: 0; position: absolute; z-index: 12; right: 25%; top: 25%; min-width: 210px; padding: 0.75rem 0.5rem 0.5rem 0.5rem; border-radius: 1.333rem; background: var(--c-white); box-shadow: var(--shadow-modal); h4 { padding: 0 0.5rem; font-size: var(--fz-tt); font-weight: 500; line-height: 100%; color: var(--c-grey-profile); } menu { margin-top: 0.375rem; width: 100%; li { width: 100%; &:last-child { position: relative; margin-top: calc( 0.5rem + 1px ); font-weight: 400 !important; color: var(--c-grey-profile) !important; &:before { content: ''; position: absolute; inset: auto 0 100% 0; margin-bottom: 0.25rem; height: 1px; background: var(--c-grey); } } input:not( .reset ):checked + label { color: var(--c-pri); font-weight: 800; } label { display: flex; justify-content: flex-start; align-items: center; width: 100%; min-width: 100%; padding: 0.5rem; border-radius: var(--rad-inf); font-size: 1rem; font-weight: 600; line-height: 100%; color: var(--c-dgrey); background: var(--c-white); &:is( :hover , :focus ) { background: var(--c-pri) !important; color: var(--c-white) !important; } } } } } } } table.itms { position: relative; overflow: hidden; z-index: 0; max-height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 1px; width: 100%; padding: 0; background: var(--c-white); thead , tfoot { display: none; } tbody { display: block; width: 100%; padding: 0.25rem 0 1rem 0; overflow: hidden auto; overscroll-behavior: none; scrollbar-width: none; &::-webkit-scrollbar { display: none; } &.top-overflow:before , &.bot-overflow:after { height: 5rem; opacity: 1; } } /* ROW STYLES FOR THIS MODE (DEFAULT) ARE THE BASIS FOR ALL */ } } } .stage-col[data-count="0"] { tbody { padding: 0 !important; } tfoot { display: flex !important; } } /* BTSPANS */ #kanban-stage-new { .cell-inner button { &.counterproposal { grid-column: span 2; } } } #kanban-stage-review { tr[data-true-status="3"] .cell-inner button { &.cancel { grid-column: span 2; } } } } .kanban-list { display: block; height: 100%; border-radius: 1.25rem; box-shadow: var(--shadow-card); overflow: hidden; table.itms { display: grid !important; grid-template-rows: min-content 1fr; position: relative; height: 100%; overflow: hidden; --kanban-list-head-height: 3.25rem; thead { height: var(--kanban-list-head-height); background: #f2f2f2; tr , th , button { height: 100%; } tr { display: grid; grid-template-columns: repeat( 6, 12.5%) 25%; padding: 0; justify-content: unset; align-items: unset; gap: 0; width: 100%; th { padding: 1rem 0.75rem; text-align: left; &:has( > button ) { padding: 0 !important; } & , button { font-family: var(--font-hl) !important; font-size: var(--trurem) !important; font-weight: 700 !important; line-height: 100% !important; color: var(--c-grey-profile) !important; } button.table-sorter { cursor: pointer !important; width: 100%; height: 100%; padding: 1rem 0.75rem; border-radius: 1.25rem; color: var(--c-pri) !important; &:hover { background-color: var(--c-pri-mute); } &[data-state="0"] { color: var(--c-grey-profile) !important; } &:after { content: ''; display: inline-block; aspect-ratio: 1; width: var(--fz-tt); height: var(--fz-tt); color: var(--c-grey-profile); background-color: currentColor; mask-position: center; -webkit-mask-position: center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: contain; -webkit-mask-size: contain; mask-image: var(--ico-order) !important; -webkit-mask-image: var(--ico-order) !important; transform: translateY( 0 ); } &[data-state="1"]:after { background-image: linear-gradient( to bottom, transparent 0%, transparent 50%, var(--c-pri) 50.0001%, var(--c-pri) 100% ); animation: pointDown 7s linear 0s infinite; } &[data-state="2"]:after { background-image: linear-gradient( to top, transparent 0%, transparent 50%, var(--c-pri) 50.0001%, var(--c-pri) 100% ); animation: pointUp 7s linear 0s infinite; } } &:first-child { padding-left: 1.5rem; &:has( > button ) { padding: 0 !important; } button { padding-left: 1.5rem; } } &:last-child { padding-right: 1.5rem; &:has( > button ) { padding: 0 !important; } button { padding-right: 1.5rem; } } } } } tbody { display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; overflow: auto scroll; background: var(--c-white); &.scroll-grads:before { top: var(--kanban-list-head-height); } tr { display: grid; grid-template-columns: repeat( 6, 12.5%) 25%; padding: 0; position: relative; border: none; border-radius: 1.75rem; background-color: var(--c-white); &:first-child { border-radius: 0 0 1.75rem 1.75rem; } &:last-child { border-radius: 1.75rem 1.75rem 1.25rem 1.25rem; } &:is( :hover , :focus-within ) { background-color: #f2f2f2; } &:before { display: none; content: none; } &:not( :last-child ):after { content: ''; display: block; z-index: 2; position: absolute; inset: auto 1.5rem 0 1.5rem; height: 1px; background: var(--c-grey); } &:not([class*="hid"]):not(:has(~ &:not([class*="hid"]))):after { display: none; content: none; } td { width: auto !important; display: block !important; padding: 1rem 0.75rem; padding: clamp( 0.5rem, 1.5vh, 1rem ) clamp( 0.25rem, 0.7vw, 0.75rem ); border-right: none; border-top: none; border-left: none; border-bottom: 1px solid transparent; &> .cell-inner { width: 100%; height: 100%; } &:first-child { /* half of 1.5 as the hoverable person container has .75 too */ padding-left: 0.75rem; padding-left: clamp( 0.25rem, 0.7vw, 0.75rem ); } &:last-child { padding-right: 1.5rem; padding-right: clamp( 0.5rem, 1.4vw, 1.5rem ); } } td.person { min-width: min-content; a { min-width: min-content; gap: min( 7.5%, 1rem ); background-color: transparent; &:is( :hover , :focus ) { background-color: var(--c-pri); color: var(--c-white); } .pfp { flex-shrink: 3; } hgroup { flex-shrink: 1; } } } td.wish { .txtpill { width: fit-content; .time , .hyphen { display: none; } } } td.status-type , td.timeframe { display: table-cell; } td.timeframe { font-size: clamp( 0.75rem, 1.05vw , var(--trurem) ) !important; } td.status-type { container-type: unset; --type-bc: #f2f2f2; --type-fc: var(--c-dgrey); color: var(--type-fc); &[data-value="1"] { --type-bc: #FDF4E6; --type-fc: #EB9201; } &[data-value="2"] { --type-bc: #EAEDF2; --type-fc: var(--c-blue); } &[data-value="3"] { --type-bc: #EAF5F0; --type-fc: #2D9F6B; } .txtpill { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; min-height: 1.75rem; padding: 0.25rem 0.75rem; border: 1px solid transparent; border-radius: var(--rad-inf); background-color: var(--type-bc); font-size: 1rem; font-size: clamp(0.7rem, 1vw , 1rem); font-weight: 500; line-height: 100%; color: var(--type-fc); &:before { content: '•'; display: inline-block; margin-right: .375rem; padding-bottom: 0.12rem; font-size: 1.25rem; color: inherit; } } } &:is( :hover , :focus ) { td.status-type { --type-bc: var(--c-white); --type-fc: var(--c-dgrey); &[data-value="1"] { --type-bc: #EB9201; --type-fc: var(--c-white); } &[data-value="2"] { --type-bc: var(--c-blue); --type-fc: var(--c-white); } &[data-value="3"] { --type-bc: #2D9F6B; --type-fc: var(--c-white); } } } td.files { .cell-inner { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 0.25rem; a { padding: 0.5rem; font-size: clamp( 0.8rem, 1vw , 1rem ) !important; } } } td.status-extra { .cell-inner { padding-top: 0; p { display: flex; justify-content: flex-start; align-items: center; font-size: clamp( 0.75rem, 1.05vw , var(--trurem) ) !important; line-height: 100%; &:before { height: 1.25rem; } } } } td.actions { .cell-inner { padding-top: 0 !important; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: center; gap: 0.5rem; button { min-width: 0 !important; min-height: 2.5rem !important; height: auto; } } } } } tfoot { display: flex; justify-content: center; align-items: center; position: absolute; inset: var(--kanban-list-head-height) 0 0 0; height: auto !important; padding: 0.75rem; } } } } .part.wpg-feedbacks-part { overflow: visible; .feedbacks-list { display: block; height: 100%; border-radius: 1.25rem; box-shadow: var(--shadow-card); overflow: hidden; table.itms { border-collapse: collapse; display: grid !important; grid-template-rows: min-content 1fr; position: relative; height: 100%; overflow: hidden; --feedbacks-list-head-height: 3.25rem; thead { overflow: hidden; height: var(--feedbacks-list-head-height); background: #f2f2f2; tr , th , button { height: 100%; } tr { display: grid; grid-template-columns: 17.5% 12.5% 12.5% 22.5% 22.5% 12.5%; padding: 0; justify-content: unset; align-items: unset; gap: 0; width: 100%; th { padding: 1rem 0.75rem; text-align: left; &:has( > button ) { padding: 0 !important; } & , button { font-family: var(--font-hl) !important; font-size: var(--trurem) !important; font-weight: 700 !important; line-height: 100% !important; color: var(--c-grey-profile) !important; } button.table-sorter { cursor: pointer !important; width: 100%; height: 100%; padding: 1rem 0.75rem; border-radius: 1.25rem; color: var(--c-pri) !important; &:hover { background-color: var(--c-pri-mute); } &[data-state="0"] { color: var(--c-grey-profile) !important; } &:after { content: ''; display: inline-block; aspect-ratio: 1; width: var(--fz-tt); height: var(--fz-tt); color: var(--c-grey-profile); background-color: currentColor; mask-position: center; -webkit-mask-position: center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: contain; -webkit-mask-size: contain; mask-image: var(--ico-order) !important; -webkit-mask-image: var(--ico-order) !important; transform: translateY( 0 ); } &[data-state="1"]:after { background-image: linear-gradient( to bottom, transparent 0%, transparent 50%, var(--c-pri) 50.0001%, var(--c-pri) 100% ); animation: pointDown 7s linear 0s infinite; } &[data-state="2"]:after { background-image: linear-gradient( to top, transparent 0%, transparent 50%, var(--c-pri) 50.0001%, var(--c-pri) 100% ); animation: pointUp 7s linear 0s infinite; } } &:first-child { padding-left: 1.5rem; &:has( > button ) { padding: 0 !important; } button { padding-left: 1.5rem; } } &:last-child { padding-right: 1.5rem; &:has( > button ) { padding: 0 !important; } button { padding-right: 1.5rem; } } } } } tbody { overflow: auto scroll; display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; background: var(--c-white); &.scroll-grads:before { top: var(--feedbacks-list-head-height); } tr { overflow: hidden; display: grid; grid-template-columns: 17.5% 12.5% 12.5% 22.5% 22.5% 12.5%; padding: 0; position: relative; border: none; border-radius: 1.75rem; background-color: var(--c-white); &:is( .hid , .hid-for-search , .hid-for-filter ) { display: none !important; } &:first-child { border-radius: 0 0 1.75rem 1.75rem; } &:last-child { border-radius: 1.75rem 1.75rem 1.25rem 1.25rem; } &:is( :hover , :focus-within ) { background-color: #f2f2f2; } &:before { display: none; content: none; } &:not( :last-child ):after { content: ''; display: block; z-index: 2; position: absolute; inset: auto 1.5rem 0 1.5rem; height: 1px; background: var(--c-grey); } &:not([class*="hid"]):not(:has(~ &:not([class*="hid"]))):after { display: none; content: none; } td { width: auto !important; display: block !important; padding: 1rem 0.75rem; padding: clamp( 0.5rem, 1.5vh, 0.75rem ) clamp( 0.25rem, 0.7vw, 0.75rem ); border-right: none; border-top: none; border-left: none; border-bottom: 1px solid transparent; &> .cell-inner { display: flex; justify-content: stretch; align-items: center; width: 100%; height: 100%; padding: 0 !important; } &:first-child { /* half of 1.5 as the hoverable person container has .75 too */ padding-left: 0.75rem; padding-left: clamp( 0.25rem, 0.7vw, 0.75rem ); } &:last-child { padding-right: 1.5rem; padding-right: clamp( 0.5rem, 1.4vw, 1.5rem ); } } td.person { min-width: min-content; a { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 0.65ch; width: 100%; padding: 0.75rem 1rem 0.75rem 0.75rem; border-radius: var(--rad-inf); background: var(--c-white); min-width: min-content; gap: min( 7.5%, 1rem ); background-color: transparent; & , * , h4 { font-weight: 700 !important; font-size: 1.5rem !important; font-size: clamp( var(--fz-tt), 1.1cqw, 1.5rem ) !important; line-height: 1em !important; color: var(--c-pri); } h4 , h4 * { font-weight: 700 !important; font-size: var(--trurem) !important; font-size: clamp( calc( 1rem - 0.125rem ), 0.886vw, 1.5rem ) !important; font-size: clamp( calc( 1rem - 0.125rem ), 0.885415cqw, 1.5rem ) !important; line-height: 100% !important; color: var(--c-pri); } p { margin: 0.5rem 0 0 0; & , * { font-weight: 400 !important; font-size: 1rem !important; line-height: 100% !important; color: var(--c-grey-profile) !important; } } &:is( :hover , :focus ) { background-color: var(--c-pri); * { color: var(--c-white) !important; } img { outline: 3px solid var(--c-blue); } } hgroup { flex-shrink: 1; } .pfp { flex-shrink: 3; img { width: 2.5rem; width: clamp( 28px, 2em, 2.5rem ); height: 2.5rem; height: clamp( 28px, 2em, 2.5rem ); aspect-ratio: 1; border-radius: var(--rad-inf); background-color: var(--c-dgrey); font-size: 1rem !important; font-size: clamp( 14px, 0.8em, 1rem ) !important; font-weight: 400; line-height: 210% !important; color: var(--c-white); text-align: center; text-transform: uppercase; } &.no-pfp { & , &> span { display: block; font-size: 1.25rem !important; font-size: clamp( 1rem, 0.75vw, 1.25rem ) !important; font-weight: 400 !important; line-height: 100% !important; color: var(--c-white) !important; text-transform: uppercase !important; padding-top: 0.025lh; } display: flex; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; width: clamp( 1.75rem , 2em , 2.5rem ); height: clamp( 1.75rem , 2em , 2.5rem ); aspect-ratio: 1; border-radius: var(--rad-inf); background-color: var(--c-dgrey); text-align: center; } } } } td.type { width: fit-content; .cell-inner { padding: 0.25rem 0 0 0; .txtpill { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: fit-content; min-height: 1.75rem; padding: 0.25rem 0.75rem; border: 1px solid var(--c-grey); border-radius: var(--rad-inf); background-color: var(--c-white); font-size: 1rem; font-size: clamp( 0.7rem, 1vw , 1rem ); font-weight: 400; line-height: 100%; color: var(--c-grey-profile); .time , .hyphen { display: none; } } } } /* td.status-type , td.timeframe { display: table-cell; } */ td.status { container-type: unset; --type-bc: #f2f2f2; --type-fc: var(--c-dgrey); color: var(--type-fc); &[data-value="1"] { --type-bc: #FDF4E6; --type-fc: #EB9201; } &[data-value="2"] { --type-bc: #EAF5F0; --type-fc: #2D9F6B; } &[data-value="3"] { --type-bc: #EAF5F0; --type-fc: #2D9F6B; } .txtpill { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; min-height: 1.75rem; padding: 0.25rem 0.75rem; border: 1px solid transparent; border-radius: var(--rad-inf); background-color: var(--type-bc); font-size: 1rem; font-size: clamp(0.7rem, 1vw , 1rem); font-weight: 500; line-height: 100%; color: var(--type-fc); &:before { content: '•'; display: inline-block; margin-right: .375rem; padding-bottom: 0.12rem; font-size: 1.25rem; color: inherit; } } } &:is( :hover , :focus ) { td.status-type { --type-bc: var(--c-white); --type-fc: var(--c-dgrey); &[data-value="1"] { --type-bc: #EB9201; --type-fc: var(--c-white); } &[data-value="2"] { --type-bc: var(--c-blue); --type-fc: var(--c-white); } &[data-value="3"] { --type-bc: #2D9F6B; --type-fc: var(--c-white); } } } td.rating { .cell-inner { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; gap: 0.75rem !important; cursor: pointer; button.give-feedback { width: 8.5rem; max-width: 100%; min-height: 2rem !important; padding: 0.75rem 0.75rem !important; font-size: 1rem; font-weight: 500 !important; &:hover { border-color: var(--c-pri-active); background-color: var(--c-pri-active); } } .stars { margin: 0 !important; .star { width: 1.5rem; height: 1.5rem; &:after { animation: none; } } } .txt { display: block; position: relative; max-width: 100%; width: fit-content; padding: 0 0.9ch; font-size: 1rem !important; font-weight: 400 !important; font-style: italic !important; line-height: 100% !important; &:before { display: block; position: absolute; top: 0; left: 0; content: "\201E"; } &:after { display: block; position: absolute; top: 0; right: 0; content: "\201C"; } p { position: relative; width: 100%; max-width: fit-content; line-break: anywhere; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: inherit !important; font-weight: inherit !important; font-style: inherit !important; line-height: inherit !important; padding: 0; } } } } td.actions { .cell-inner { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: center; gap: 0.5rem; a.download { padding: 0.75rem 1.5rem; background-color: var(--c-white); border: 1px solid var(--c-grey); font-size: var(--trurem); font-weight: 500; line-height: 100%; color: var(--c-dgrey); &:before , &:after { display: none; content: none; } &:hover { background-color: var(--c-pri); border-color: var(--c-pri); color: var(--c-white); } } } } } } tfoot { display: none; padding: 0.75rem 0; &.hid { display: none !important; } tr { display: block; width: 100%; padding-top: 0; padding-bottom: 0; } th { display: block; width: 100%; font-size: 1.5rem; font-weight: 600; line-height: 110%; color: var(--c-dgrey); letter-spacing: 0.2rem; text-align: center; } } } } } } .stars { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 0.5rem; .star { opacity: 1; cursor: pointer; position: relative; aspect-ratio: 1; width: 2.75rem; height: 2.75rem; font-family: var(--font-def) !important; font-size: 1rem !important; font-weight: 500 !important; line-height: 100% !important; mask-image: var(--ico-star) !important; -webkit-mask-image: var(--ico-star) !important; mask-position: center; -webkit-mask-position: center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: contain; -webkit-mask-size: contain; &:before , &:after { opacity: 1 !important; content: '' !important; display: inline-block !important; width: 100%; height: 100%; background: #EB9201; font-family: inherit; } &:after { background: var(--c-white); position: absolute; width: 200%; height: 50%; left: 0%; top: -50%; transform-origin: 50% 100%; rotate: 45deg; animation: sheen 2.5s linear 2s infinite; visibility: visible; opacity: 0.33 !important; filter: blur(1px); } &.star__checked ~ .star:before , &:has( > input:checked ) ~ .star:before { opacity: 1 !important; background: var(--c-grey); } &.star__checked ~ .star:after , &:has( > input:checked ) ~ .star:after { visibility: hidden; } } } } .mark-selected { z-index: 2; display: none; top: 0.25rem; right: 0.25rem; position: absolute; width: clamp( 1.5rem, 2.75vw, calc( 1.6rem + 2px) ); height: clamp( 1.5rem, 2.75vw, calc( 1.6rem + 2px) ); padding: 0; background: var(--c-blue); border-radius: var(--rad-inf); font-size: 0.00001px; line-height: 0 !important; color: var(--c-white); .wt-icon { width: 100%; height: 100%; padding: 0; mask-size: 70%; mask-size: round( up, 70%, 1px ); mask-position: 45% 60%; } } .offer-thumb-wrapper , .showall { aspect-ratio: 165 / 90; } .showall.marked { border-color: var(--c-blue); box-shadow: var(--shadow-select-blue); .mark-selected { display: block; } } .offer-thumb-wrapper { overflow: hidden; position: relative; border: 2px solid transparent; border-radius: 0.5rem; background-color: var(--c-dmute); background-clip: content-box; &:before { content: ''; z-index: 0; position: absolute; left: 50%; top: 50%; transform: translate( -50%, -50% ); aspect-ratio: 1; width: auto; height: min(8rem, 48%); max-width: 100%; max-height: 48%; background-color: var(--c-white); mask-position: center; -webkit-mask-position: center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: 100% auto; -webkit-mask-size: 100% auto; mask-image: var(--ico-image) !important; -webkit-mask-image: var(--ico-image) !important; } &:is( .selected , :has( > input:checked ) ) { border-color: var(--c-blue); box-shadow: var(--shadow-select-blue); .mark-selected { display: block; } } label { position: relative; z-index: 1; display: block; width: 100%; height: 100%; padding: 0; background: none; cursor: pointer; img { position: absolute; inset: -1px -1px 0px 0px; width: calc( 100% + 1px ); height: calc( 100% + 1px ); min-width: 100%; min-height: 100%; max-width: calc( 100% + 1px ); max-height: calc( 100% + 1px ); border-radius: 0; background: none; } } &.is-recom .mark-recommend { z-index: 2; position: absolute; left: 0.5rem; top: 0.5rem; padding: 0.5rem 1rem; text-align: center; background: rgba(238, 238, 238, 0.85); border-radius: var(--rad-inf); font-size: 0.75rem; font-weight: 500; line-height: 100%; } } } .actions { button { min-height: min-content; padding: 0.25rem 1rem; border: 2px solid var(--c-grey); border-radius: var(--rad-inf); background: var(--c-white); font-size: 1rem; font-size: clamp( 1rem, 0.8vw, 2rem ) !important; font-weight: 500; line-height: 100%; color: var(--c-dgrey); text-align: center; &:after { display: none; content: none; } &:is( :hover , :focus ) { border-color: var(--c-pri); background: var(--c-pri); color: var(--c-white); } &.reject { border-color:#A9001580; color: var( --c-red ); } &.cancel { border-color: transparent; color: var( --c-red ); background: #FBFBFB; } &:is( .reject , .cancel ):is( :hover , :focus ) { border-color: var( --c-red ); background: var( --c-red ); color: var(--c-white); } &.confirm { background: #2D9F6B; border-color:#2D9F6B; color: var(--c-white); font-weight: 600; &:is( :hover , :focus ) { border-color: green; background: green; text-decoration: underline; } } } } menu#tools { /* container-type: size; */ position: relative; width: 100%; height: 2.25rem; &> li { height: 100%; search { height: 100%; } } #appointments-search { } .appointments-filters-wrapper { min-width: 8.5rem; padding-right: 2.25rem; .filters-opener { z-index: 2; position: relative; display: flex; justify-content: center; align-items: center; gap: .25lh; height: 100%; min-width: 6.25rem; padding: 0.5rem 1rem; background: var(--c-white); border: 1px solid var(--c-grey-profile); border-radius: var(--rad-inf); font-size: var(--trurem); font-weight: 400; line-height: 100%; color: var(--c-grey-profile); &:before { content: ''; display: inline-block; width: 1rem; height: 1rem; color: var(--c-grey-profile); background-color: currentColor; mask-image: var(--ico-filter) !important; -webkit-mask-image: var(--ico-filter) !important; mask-position: center; -webkit-mask-position: center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: contain; -webkit-mask-size: contain; } } label.filters-opener { width: fit-content; min-height: 2.25rem; padding: 0.5rem 1rem; border: 1px solid #D4D4D4; background-color: var(--c-white); font-size: var(--trurem); font-weight: 400; color: var(--c-grey-profile); &:before { content: ''; display: inline-block; width: 1rem; height: 1rem; margin-right: .6ch; background-color: currentColor; mask-image: var(--ico-filter) !important; -webkit-mask-image: var(--ico-filter) !important; mask-position: center !important; -webkit-mask-position: center !important; mask-repeat: no-repeat !important; -webkit-mask-repeat: no-repeat !important; mask-size: contain !important; -webkit-mask-size: contain !important; } } #appointments-filters { position: absolute; top: 100%; margin-top: 0.25rem; padding: 1rem; background-color: var(--c-white); border-radius: 1.25rem; opacity: 0.001; pointer-events: none; .close { display: block; width: 1.5rem; height: 1.5rem; margin-left: auto; .wt-icon { mask-size: auto 0.75rem; -webkit-mask-size: auto 0.75rem; } } .appointments-filters-inner { &> div + div { margin-top: 1rem; } &> div { display: flex; justify-content: stretch; align-items: stretch; gap: 2rem; fieldset { legend { padding: 0 0 0.5rem 0; font-family: var(--font-hl); font-size: var(--fz-tt); font-weight: 500; line-height: 100%; color: var(--c-grey-profile); } ul { li { display: block; label { display: block; position: relative; padding: 0.375rem 0 0.375rem 1.75lh; font-size: 1rem; font-weight: 600; color: var(--c-dgrey); &:hover { color: var(--c-blue); } &:before , &:after { content: ''; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1.0rem; height: 1.0rem; border: 2px solid var(--c-grey); border-radius: 0.25rem; background-color: var(--c-white); mask: none !important; } &:after { display: none; border-color: var(--c-white); mask-image: var(--ico-check) !important; -webkit-mask-image: var(--ico-check) !important; mask-position: center !important; -webkit-mask-position: center !important; mask-repeat: no-repeat !important; -webkit-mask-repeat: no-repeat !important; mask-size: 60% !important; -webkit-mask-size: 60% !important; } } input:checked + label { &:before { border-color: var(--c-blue); background-color: var(--c-blue); } &:after { display: block; } } } } } } } } #appointments-filters-opener:checked + #appointments-filters { z-index: 2; opacity: 1; pointer-events: all; box-shadow: var(--shadow-modal); } search:has( #appointments-filters input:checked ) { .filters-reset { transform: translate( 50%, 0 ); opacity: 1; pointer-events: all; } } .filters-reset { z-index: 1; position: absolute; right: 0; top: 50%; aspect-ratio: 1; min-height: 2rem; width: auto; /* width: 100cqh; */ /* height: 100cqh; */ transform: translate( 50%, -5rem ); /* margin-left: min( -5rem, -200cqh ); */ padding: 0.25rem !important; border: 1px solid var( --c-red ); border-radius: var(--rad-inf); background-color: var(--c-white) !important; color: var( --c-red ) !important; pointer-events: none; opacity: 0; transition: all 0.3s ease-in-out 0s; .wt-icon { width: 100%; height: 100%; padding: 0.125rem 0 0 0.125rem !important; mask-size: 1rem 1rem; -webkit-mask-size: 1rem 1rem; } } } } .popup { overflow: hidden; &> .inner { display: grid; grid-template-columns: 100%; grid-template-rows: auto 1fr auto; overflow: visible !important; width: 640px !important; height: auto !important; max-height: calc( 100% - 4rem ) !important; &> .footer { justify-content: flex-end !important; } #appointments-filters { position: static !important; width: 100% !important; height: auto !important; margin: 0 !important; overflow: auto !important; clip: auto !important; white-space: normal !important; opacity: 1 !important; font-size: initial !important; } } &#application-details-popup { .content { height: 100%; overflow: hidden; } .inner { display: grid; grid-template-rows: auto 1fr; min-width: 320px; max-width: 660px; max-height: 100%; max-height: calc( 100% - 2rem ); padding: 1.25rem; gap: 0 !important; &:has( > hr ) { grid-template-rows: auto 1fr 1px auto; } &:has( > .header + hr ):has( > .content + hr ) { grid-template-rows: auto 1px 1fr 1px auto; } } .profile { position: relative; height: 100%; max-height: 100%; overflow: hidden; .profile-inner { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; gap: 0; position: relative; height: 100%; overflow: visible; max-height: 100%; --type-bc: #f2f2f2; --type-fc: var(--c-dgrey); &[data-status="1"] { --type-bc: #FDF4E6; --type-fc: #EB9201; } &[data-status="2"] { --type-bc: #EAEDF2; --type-fc: var(--c-blue); } &[data-status="3"] { --type-bc: #EAF5F0; --type-fc: #2D9F6B; } &[data-progress] { /* 0 to 2 */ &[data-progress="0"] { --type-bc: #f2f2f2; --type-fc: var(--c-dgrey); } &[data-progress="1"] { --type-bc: #FDF4E6; --type-fc: #EB9201; } &[data-progress="2"] { --type-bc: #EAF5F0; --type-fc: #2D9F6B; } } &> header { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 0 0.25rem calc( 1rem + 1px ) 0.25rem; background: var(--c-white); &:after { content: ''; position: absolute; inset: auto 0 0 0; height: 1px; height: round( up, 1px, 1px ); background: var(--c-grey); } .person { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: min( 1.45ch , 1.5rem ); width: 100%; padding: 0; hgroup { display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; } & , * , h4 { font-weight: 700 !important; font-size: 2rem !important; line-height: 1em !important; color: var(--c-pri); } .pfp { img { width: 100px; height: 100px; aspect-ratio: 1; border-radius: var(--rad-inf); background-color: var(--c-dgrey); font-size: 3rem !important; font-weight: 400; line-height: 215% !important; color: var(--c-white); text-align: center; text-transform: uppercase; } &.no-pfp { & , &:after { font-size: 3rem !important; font-weight: 400; line-height: 215% !important; color: var(--c-white) !important; text-transform: uppercase !important; } &:after { content: attr(data-inits); display: block; padding-top: 0.025lh; } display: flex; justify-content: center; align-items: center; width: 100px; height: 100px; aspect-ratio: 1; border-radius: var(--rad-inf); background-color: var(--c-dgrey); font-size: 3rem !important; font-weight: 400; line-height: 215% !important; color: var(--c-white); text-align: center; text-transform: uppercase; } } p { font-size: 1rem; color: var(--c-grey-profile); } } .app-specs { display: flex; align-items: stretch; gap: var(--fz-tt); .wish .txtpill { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5ch; width: fit-content; min-height: 2rem; padding: 0.25rem 0.75rem; border: 1px solid var(--c-grey); border-radius: var(--rad-inf); background-color: var(--c-white); font-size: var(--trurem); font-size: clamp( 0.75rem, 1vw , var(--trurem) ); font-weight: 400; line-height: 100%; color: var(--c-grey-profile); * { display: flex; align-items: center; } .timeframe { gap: 0.5ch; } } .app-status .txtpill { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; min-height: 1.75rem; padding: 0.25rem 0.75rem; border: 1px solid transparent; border-radius: var(--rad-inf); background-color: var(--type-bc); font-size: 1rem; font-size: clamp(0.7rem, 1vw , 1rem); font-weight: 500; line-height: 100%; color: var(--type-fc); &:before { content: '•'; display: inline-block; margin-right: .375rem; padding-bottom: 0.12rem; font-size: 1.5rem; color: inherit; } } } } &> div.main { position: relative; overflow: hidden; .main-inner { height: 100%; overflow: hidden auto; overscroll-behavior: none; scrollbar-width: none; &.scroll-grads::before , &.scroll-grads::after { height: 10rem; max-height: 33%; min-height: 3.5rem; } } hr { margin: 0.5rem 0; } section { display: flex; flex-direction: column; padding: 1rem 0.25rem; gap: 1rem; &> h5 { font-weight: 700; font-size: 1.25rem; line-height: 100%; color: var(--c-black); } ul { display: flex; flex-wrap: wrap; gap: 1.25rem; li { flex-basis: calc(50% - 1rem); display: flex; align-items: center; gap: 0.5rem; .bullet { align-self: flex-start; aspect-ratio: 1; width: 1.5rem; height: 1.5rem; border-radius: 0; .wt-icon { cursor: auto; width: 100%; height: 100%; padding: 0; border-radius: 0; background-color: var(--c-grey-profile); mask-size: 1.25rem; } } .txt { h6 { font-size: 0.75rem; font-weight: 500; color: var(--c-grey-profile); } p { margin: 0.25rem 0 0 0; font-size: var(--trurem); font-weight: 600; line-height: 100%; color: var(--c-dgrey); } } } } &.files { display: flex; flex-direction: column; &> div { display: flex; flex-direction: row; align-items: center; } a { display: flex; justify-content: flex-start; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--c-grey); border-radius: var(--rad-inf); font-size: 1rem; font-weight: 500; line-height: 100%; color: var(--c-dgrey); &:hover { background-color: var(--c-pri); border-color: var(--c-pri); color: var(--c-white); } } } } } &:is( [data-files-mask="0"] , [data-files-mask="1"] ) > div.main { .files { .dummy { display: block !important; } } } &[data-hobbies=""] > div.main { .hobbies { .dummy { display: block !important; } } } &[data-motivation=""] > div.main { .motivation { .dummy { display: block !important; } } } &> footer { position: relative; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; gap: 0.5rem; padding: calc( 1rem + 1px ) 1rem 0 1rem; background: var(--c-white); &:before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; height: round( up, 1px, 1px ); background: var(--c-grey); } &.hid { display: none !important; } button { flex-basis: auto; min-height: 2.5rem; min-width: 170px; max-width: 100%; width: auto; } } &[data-true-status="3"] > footer { min-height: 4.5rem; padding: 1rem; background: var(--c-white); } } } } &#wpg-edit-profile-popup { &> .inner { grid-template-rows: auto auto 1fr; } .content > * + * { margin-top: 1.5rem; } .content > * > .row + .row { margin-top: 1rem; } .content > * > .row { display: flex; gap: 1rem !important; justify-content: stretch; &> .col { flex-basis: 100%; } } .field-wrapper .input-field-label { padding-bottom: 0.25rem !important; } .input-field { margin-bottom: 0 !important; } .input-fields-large { display: flex; justify-content: stretch; gap: 1rem; align-items: stretch; .profile-image-wrapper { position: relative; button.profile-image { overflow: hidden; flex-basis: 150px; flex-shrink: 0; /* overflow: hidden; */ position: relative; width: 150px !important; max-width: 100%; height: 150px !important; max-height: 100%; margin: 0 !important; border: 2px solid var(--c-dmute); border-radius: 0.5rem; background-color: var(--c-dmute); background-clip: content-box; input { display: none; } &.empty:before { content: ''; z-index: 0; position: absolute; left: 50%; top: 50%; transform: translate( -50%, -50% ); aspect-ratio: 1; width: auto; height: min(8rem, 48%); max-width: 100%; max-height: 48%; background-color: var(--c-white); mask-position: center; -webkit-mask-position: center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: 100% auto; -webkit-mask-size: 100% auto; mask-image: var(--ico-image) !important; -webkit-mask-image: var(--ico-image) !important; } /* &:after { content: ''; z-index: 2; display: none; top: 0.25rem; right: 0.25rem; position: absolute; width: calc( 1.6rem + 2px); height: calc( 1.6rem + 2px); padding: 0; background: var(--c-blue); border-radius: var(--rad-inf); font-size: 0.00001px; color: var(--c-white); .wt-icon { width: calc( 1.6rem + 2px); height: calc( 1.6rem + 2px); padding: 0; mask-size: 70%; mask-size: round( up, 70%, 1px ); mask-position: 45% 60%; } } */ .img-wrap { position: relative; z-index: 1; display: block; width: 100%; height: 100%; padding: 0; background: none; cursor: pointer; img { object-fit: contain; object-position: center; aspect-ratio: 1; position: absolute; inset: -2px -2px -2px -2px; width: calc( 100% + 4px ); height: calc( 100% + 4px ); min-width: 100%; min-height: 100%; max-width: calc( 100% + 4px ); max-height: calc( 100% + 4px ); border-radius: 0; background: none; } } &> p { position: absolute; inset: auto 1rem 0.5rem 1rem; text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--c-pri); } &:has( > .img-wrap > img:not( [src=""] ) ) > p { z-index: 2; background: var(--c-white-mute); border-radius: var(--rad-inf); padding: 0 0.25rem !important; opacity: 0.8; } &:hover > p { opacity: 1 !important; } } button.clear { z-index: 10; position: absolute; inset: 0.25rem 0.25rem auto auto; padding: 0.25rem; background: var( --c-red ); border-radius: var(--rad-inf); color: var(--c-white); } button.profile-image.empty + button.clear { display: none; } } .profile-info { flex-basis: 100%; flex-shrink: 1; .field-wrapper { display: flex; flex-direction: column; justify-content: stretch; align-content: stretch; height: 100%; .input-field-additions-pre { display: none !important; } .input-field { flex-basis: 100%; display: flex; flex-direction: column; justify-content: stretch; align-items: stretch; margin: 0 !important; textarea { resize: none !important; display: block !important; flex-basis: 100% !important; } .input-field-additions-post { display: none !important; } } } } } .submit { margin-left: auto; margin-top: 0 !important; } } &#wpg-active-feedback-popup , &#wpg-passive-feedback-popup , &#student-active-feedback-popup , &#student-passive-feedback-popup { .content { height: 100%; overflow: hidden; textarea{ max-width: 460px !important; } .input-field { display: flex; flex-direction: column; align-items: center; } .feedback-wrapper { /* form or div */ display: flex; flex-direction: column; align-items: stretch; gap: 2rem; label { padding-bottom: 0.75rem !important; } label , h6 { font-family: var(--font-hl) !important; font-size: var(--trurem) !important; font-weight: 700 !important; line-height: 100% !important; color: var(--c-black) !important; text-align: center; } .feedback-header { display: flex; justify-content: center; align-items: flex-start; padding-bottom: 0; &> * { width: fit-content; font-family: var(--font-hl) !important; font-size: 2rem !important; font-weight: 700 !important; line-height: 100% !important; } } .stars-wrapper , .txt-wrapper { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; &> * { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } p , label { display: block; text-align: center; } p { width: 100%; max-width: 460px; font-size: var(--fz-tt) !important; font-weight: 400 !important; line-height: 120% !important; color: var(--c-grey-profile); } blockquote { position: relative; width: 100%; max-width: 520px; padding-top: 2rem !important; padding-bottom: 2rem !important; font-size: 1rem !important; font-weight: 400 !important; line-height: 120% !important; color: var(--c-dgrey); text-align: center; &:before , &:after { position: absolute; width: 2rem; height: auto; font-size: 3rem; font-weight: 700; line-height: 0; } &:before { content: "\201E"; display: block; bottom: 0; left: -.25ch; height: 2rem; line-height: 0.8rem; } &:after { content: "\201C"; display: block; top: 0; right: -.25ch; height: 2rem; line-height: 2.6rem; } } } } } .footer { justify-content: center !important; button.cancel { background: var(--c-white); border: 2px solid var(--c-grey); color: var(--c-dgrey); &:is( :hover , :focus ) { border-color: var(--c-pri); background: var(--c-pri); color: var(--c-white); } } } } &.wpg-edit-gallery-popup { &> .inner { width: 60vw !important; .grid-full { display: grid; grid-template-columns: repeat( auto-fit, minmax(min(200px, 100%), 1fr) ); gap: 1rem; padding: 0.5rem 0; .offer-thumb-wrapper:is( .selected , :has( > input:checked ) ) { label { &:after { content: ''; position: absolute; inset: 2px; background-color: var(--c-blue); opacity: 0.5; mix-blend-mode: color; } img { filter: brightness(110%) saturate(120%); } } } } &> fieldset { .wt-bt { } .grid-full { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; opacity: 0.001; font-size: 0.001px; } } .popup { &> .inner { width: 70vw; } } } } } &.view-student-profile { .exwi-portal-content { .parts { .part-wrapper { background: none !important; padding: 0 !important; .part { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 1rem; padding: 1.25rem 2rem; border: 0; border-radius: var(--rad-s); background: var(--c-white); box-shadow: var(--shadow-card); box-sizing: border-box; background-color: var(--c-white); &> h3 { display: flex; align-items: center; gap: 0.75rem; padding: 0 .5rem; font-size: clamp( 1.00rem, 1vw, 1.25rem ) !important; font-weight: 700; } } } } } } } /* ---------------------- */ /* COMPONENT JOB ITEM */ /* ---------------------- */ li.job-card { &.hid { display: none !important; } .fav-toggle-wrapper { background-color: var(--c-white); border-radius: var(--rad-inf); } /* &.tabber-carousel-item { .job-inner { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: "info info info image" "info info info image" "header header header image" "content content content image" "actions actions actions actions" ; .info { grid-area: "info"; anchor-name: --job-info; } .image { grid-area: "image"; } .header { grid-area: "header"; } .content { grid-area: "content"; } .actions { grid-area: "actions"; .fav-toggle-wrapper { position: absolute; position-anchor: --job-info; right: anchor(right); top: anchor(top); } } } } */ &.tabber-carousel-item { box-shadow: var(--shadow-card); .job-inner { display: grid; grid-template-columns: 100%; /* grid-template-rows: 1fr 1fr 1fr 1fr; */ gap: 0.5rem; grid-auto-flow: row; grid-template-areas: "image " "info " "header " "contents" "actions " ; padding: var(--pad-xxs); * { text-align: left; } .info { grid-area: info; margin-top: 0.25rem; padding: 0 var(--pad-xxs); display: grid; grid-template-columns: 1fr 3fr; /* grid-template-rows: 1fr 1fr 1fr 1fr; */ grid-template-rows: min-content; gap: 0 .75rem; grid-auto-flow: row; grid-template-areas: "logo txt"; img , .logo-dummy { grid-area: logo; aspect-ratio: 1; object-position: center; object-fit: contain; width: 80px; height: 80px; margin: 0.15rem 0 auto 0; background: none; border-radius: 0.75rem; } .logo-dummy { background: var(--c-grey) } .txt { grid-area: txt; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 0.75rem; .name { grid-area: name; font-size: 1.25rem; font-weight: 700; line-height: 100% !important; color: var(--c-pri); &.dyn-font-size { line-height: normal !important; max-height: 1lh; } } .location { grid-area: location; display: flex; align-items: center; margin-top: 0; font-size: 1rem; font-weight: 400; line-height: 100%; color: var(--c-dgrey); } .activity { grid-area: activity; display: flex; align-items: center; margin-top: 0.5rem; font-size: 1rem; font-weight: 400; line-height: 100%; color: var(--c-dgrey); } } } .image { grid-area: image; anchor-name: --job-img; aspect-ratio: 36 / 15; width: 100%; min-width: 100%; margin: 0 var(--pad-xxs); } .header { grid-area: header; margin-top: 0.50rem; padding: 0 var(--pad-xxs); h4 { font-size: 1.125rem; font-weight: 700; line-height: 100%; color: var(--c-black); } } .contents { grid-area: contents; padding: 0 var(--pad-xxs); font-size: var(--trurem); font-weight: 400; line-height: 105%; color: var(--c-dgrey); } .actions { grid-area: actions; /* position: absolute; */ .fav-toggle-wrapper { position: absolute; position-anchor: --job-img; right: anchor(right); /* bottom: anchor(bottom); */ top: anchor(top); margin-right: 0.5rem; /* margin-bottom: 0.5rem; */ margin-top: 0.5rem; background-color: var(--c-white); label.wt-icon { width: 2.5rem; height: 2.5rem; background-color: var(--c-pri); } } .wt-pill.job-type { position: absolute; position-anchor: --job-img; left: anchor(left); top: anchor(top); min-height: 1.75rem; margin-left: 0.5rem; margin-top: 0.5rem; padding: 0.5rem 0.75rem; opacity: 0.85; font-weight: 500 !important; color: var(--c-black); } } } } } @supports NOT ( anchor-name: --abc ) { li.job-card .job-inner .actions { position: static; .fav-toggle-wrapper { position: static; margin: 0 0 0 auto; } } } @media (max-width: 1180px) { #exwi-portal-shell .sidenav-mobile-outer { display: none !important; } section.stage-col { padding-left: 0 !important; padding-right: 0 !important; } #pageHeader { nav { align-items: center; .actions { margin-top: auto !important; margin-bottom: auto !important; &> .login { color: var(--c-white) !important; background-color: var(--c-pri) !important; padding: 0.75rem 1.5rem !important; min-height: 100% !important; min-width: 5.5 !important; max-width: 100% !important; font-size: var(--trurem) !important; } #nav-tree-wrapper > label { color: var(--c-pri); background-color: var(--c-white); svg * { fill: var(--c-pri) !important; } } .notifications-dropdown-part { display: block !important; } } } } } .mobonly { display: none !important; } .talents-only { display: none !important; } body.mode-talents { .talents-only { display: flex !important; } } @media ( max-width: 1600px ) { #exwi-portal-shell { .exwi-portal-content { &> .parts { .part-wrapper { .part.wpg-feedbacks-part { .feedbacks-list { table.itms { tbody , thead { tr { grid-template-columns: 25% 16.25% 16.25% 15% 15% 12.5%; td.rating { .cell-inner { .stars { gap: 0.125rem; .star { width: 1.25rem; height: 1.25rem; } } } } td.actions { & .cell-inner { & a.download { font-size: 1rem; } } } } } } } } } } } } #pageFooter { padding: 2rem clamp( 0.75rem , 2vw , 2rem ) !important; } } @media ( max-width: 1500px ) { #pageHeader { nav { .actions { .notifications-dropdown-part { width: 2.5rem; height: 2.5rem; margin-right: 0; .wt-bt-round { width: 100%; height: 100%; -webkit-mask-size: 1.25rem; mask-size: 1.25rem; } } #user-nav { width: 2.5rem; height: 2.5rem; &:hover { background: none !important; outline: 2px solid var(--c-blue); } #user-nav-profile { width: 100% !important; height: 100% !important; min-width: 0 !important; :is( a, button ) { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; .pfp { width: 100%; height: 100%; } .greeting { display: none } } } } #nav-tree-wrapper { label { width: 2.5rem; height: 2.5rem; } } } } } main > div.page-variant > section.layout-intention-tabber .tabber-people { display: none; } } @media ( max-width: 1280px ) { #pageHeader { height: var(--wi-nav-height-min) !important; #header-shrinker { display: none !important; } } #exwi-portal-shell { width: 100vw; max-width: 100vw; max-height: calc( 100vh - 6rem ); top: 6rem !important; right: auto; grid-template-columns: 5rem 1fr !important; .sidenav-outer { #sidenav-shrinker { display: none !important; transform: rotateY(0deg); } #sidenav a { .txt { opacity: 0 !important; transform: scale( 0.0 ) !important; } } .select-selected:not( .select-arrow-active ) { height: calc( 3rem - 2px ) !important; padding: calc( 0.75rem - 1px) !important; &:after { content: none; display: none; } &:before { opacity: 1 !important; } .txt { opacity: 0 !important; transform: scale( 0.0 ) !important; } } } .exwi-portal-content { .parts { grid-template-columns: 1fr !important; gap: 1.5rem !important; max-width: min( 720px, 100% ); &> * { max-width: 1110px !important; } .part-wrapper { .title-wrapper { p { font-size: 1rem; } } } &.parts-fullwidth:has( > .feedbacks-part-wrapper ) { position: static; height: auto; } &> .part-wrapper.feedbacks-part-wrapper { position: static !important; inset: auto !important; display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto 1fr !important; gap: 1.25rem !important; max-width: min( 435px, 100% ) !important; height: 100% !important; padding: 0 !important; &> menu#tools { flex-direction: column; justify-content: flex-start; align-items: stretch; height: auto; gap: 0.5rem; li { flex-basis: auto; &:has( > .toggle ) , .toggle { display: none !important; pointer-events: none !important; } &:has( > .feedbacks-filters-wrapper ) { flex-basis: 2.75rem; flex-shrink: 0; } &:has( #feedbacks-search ) { flex-shrink: 1; flex-grow: 0; form , .input-field , input { width: 23rem; min-width: 100%; max-width: 100%; } } #feedbacks-search { width: 100%; } input[type="search"] { width: min( 100%, 23rem ) !important; } .feedbacks-filters-wrapper { min-width: 0 !important; /* Die Schublade dieser Seite wurde nie gebaut: es gibt weder `label.filters-opener` im Markup noch eine Umschaltregel. Der Knopf und seine Breite sind darum am 09.09. entfallen. Die Hoehe bleibt — sie ist gemessen die Hoehe der Filterzeile in der Werkzeugleiste, ohne sie bleiben unten 8 px frei. */ height: 2.75rem; padding: 0 !important; #feedbacks-filters { position: static; .feedbacks-filters-inner { height: 100%; display: grid; grid-auto-columns: 100%; grid-auto-rows: auto auto; &> div:first-child { padding-bottom: 1rem; } &> div + div { margin: 0; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 1rem; overflow: auto; } } } } } } &> #feedbacks { position: static; overflow: hidden; max-width: 100% !important; height: 100%; &> .feedbacks-list { position: static; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; width: 100% !important; min-width: 100%; max-width: 100%; height: 100%; border-radius: 0; overflow-y: auto !important; /* &> section.stage-col { height: auto !important; max-height: none !important; overflow: unset !important; .stage-col-inner { display: block; overflow: hidden; position: static; height: auto; max-height: 100%; border-radius: 0; background: none; */ thead { display: none !important; } table.itms { display: flex !important; flex-direction: column; justify-content: flex-start; align-items: stretch; max-height: none !important; overflow: unset !important; background: none !important; tbody { overflow: unset !important; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 1rem; padding: 0 !important; background: none !important; &:before , &:after { content: none !important; display: none !important; } tr , tr:is( :first-child , :last-child ) { display: flex; flex-direction: row; flex-wrap: wrap; padding: 1rem !important; border-radius: 1.25rem !important; border: 1px solid var(--c-grey) !important; gap: 1rem; background-color: var(--c-white) !important; &:before , &:after { display: none !important; content: none !important; } td { flex-basis: 100%; padding-left: 0.25rem !important; padding-right: 0.25rem !important; } td.person { flex-basis: auto; padding: 0 0 0 0.25rem !important; border: none !important; a { padding: 0 !important; gap: 0.75rem; &:is(:hover, :focus) { background: none !important; .name , .name * { color: var(--c-pri) !important; } p , p * { color: var(--c-grey-profile) !important; } } .pfp { width: 2.5rem; height: 2.5rem; img { width: 2.5rem; height: 2.5rem; display: flex; justify-content: center; align-items: center; } } hgroup { * , h4 { font-size: 1rem !important; font-weight: 700 !important; } p , p * { font-size: calc( 1rem - 0.125rem ) !important; color: var(--c-grey-profile) !important; font-weight: 400 !important; } } } } td.type { display: none !important; } td.status { --type-bc: #f2f2f2; --type-fc: var(--c-dgrey); grid-column: auto; display: block !important; flex-basis: auto; width: fit-content; margin-left: auto; padding: 0 !important; &[data-value="1"] { --type-bc: #FDF4E6; --type-fc: #EB9201; } &[data-value="2"] { --type-bc: #EAEDF2; --type-fc: var(--c-blue); } &[data-value="3"] { --type-bc: #EAF5F0; --type-fc: #2D9F6B; } .cell-inner { padding-top: 0.25rem; .txtpill { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; min-height: 1.5rem; padding: 0 0.75rem; border: 1px solid transparent; border-radius: var(--rad-inf); background-color: var(--type-bc); font-size: 1rem; font-weight: 500; line-height: 100%; color: var(--type-fc); &:before { content: none; display: none; } } } } td.actions { flex-basis: 100%; min-width: 100%; max-width: 100%; padding: 0; .cell-inner { grid-auto-rows: 2.5rem; padding-top: 0.5rem; button { min-height: 2.5rem; } } } td.rating { padding-bottom: 0 !important; .cell-inner { h5 { display: block !important; font-size: 1rem !important; font-weight: 400 !important; color: var(--c-grey-profile) !important; } .stars { gap: 0.25rem; .start { width: 1.5rem; height: 1.5rem; } } } } td.rating , td.actions { position: relative; width: 100%; max-width: 100%; padding-top: 1rem; &:before { content: ''; display: block; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--c-grey); } .wt-bt.download , button.give-feedback { width: 100%; min-width: 100%; max-width: 100%; min-height: 2.5rem !important; .landonly { display: none !important; } .mobonly { display: block !important; } } } } } } /* } } */ } } } } #popups > .popup { inset: var(--wi-nav-height-min) 0 0 5rem; } } } } @media ( max-width: 1024px ) { :root:has( > .exwi-portal ) { overflow: hidden; body , body > main { overflow: hidden auto; } } #exwi-portal-shell { overflow: hidden; grid-template-columns: 100% !important; grid-template-rows: 1fr auto !important; #sidenav-shrinker { display: none !important; } .sidenav-outer { order: 1; display: flex; justify-content: stretch; align-items: flex-start; flex-direction: row; gap: 0.25rem; height: 4.625rem; padding: 1rem 0.25rem 0.75rem 0.25rem; box-shadow: var(--shadow-modal); #sidenav { flex-basis: calc( 100% - ( 100 / 7 * 1%)); width: auto; padding: 0; &> nav { flex-direction: row; max-width: 100%; justify-content: space-between; align-items: flex-start; gap: 0.25rem; a { flex-direction: column; padding: 0; overflow: visible; border-radius: 0 !important; background: none !important; flex-basis: calc( 100 / 6 * 1% ) !important; flex-basis: 20%; /* flex-basis: 25% !important; */ gap: 0.25rem !important; .txt { margin: 0 auto; height: auto !important; line-height: 100% !important; opacity: 1 !important; transform: none !important; .deskonly { display: none !important; } .mobonly { display: inline !important; } } } } } .wpg-switch-outer { flex-basis: calc( 100 / 7 * 1% ) !important; position: relative; display: flex; flex-direction: column; width: auto !important; min-height: 0; align-items: center; gap: 0.25rem; min-height: 0; margin: 0; padding: 0; border: none; font-size: clamp( 0.75rem, 1.4vw ,var(--trurem) ); font-weight: 500; line-height: 100%; color: var(--c-dgrey); text-decoration: none; cursor: pointer; &> .wt-icon { display: block; min-width: 0; min-height: 0; width: 1.5rem; height: 1.5rem; color: var(--c-dgrey); font-size: var(--trurem); font-size: clamp( 0.75rem, 1.4vw ,var(--trurem) ); font-weight: 500; line-height: 120%; padding: .75rem; color: inherit; background-color: currentColor; } &> .txt { display: block; .deskonly { display: none !important; } } .wpg-switch { position: absolute; inset: 0; opacity: 0; &> hr , &> label { display: none; } .select-selected { position: absolute; inset: 0; opacity: 0; justify-self: flex-end; /* height: calc( 3rem - 2px ) !important; */ /* padding: calc( 0.75rem - 1px) !important; */ .txt { /* opacity: 0 !important; */ /* transform: scale( 0.0 ) !important; */ } } &.active { opacity: 1; position: fixed; inset: auto 1rem calc( 4.625rem + 1rem ) 1rem; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; width: auto !important; min-width: 0 !important; max-width: calc( 100vw - 2rem ); max-height: calc( 100vh - 6rem - 1rem - 4.625rem - 1rem ) !important; height: fit-content; padding: 0.25rem; border-radius: 2.15rem; background-color: var(--c-white); box-shadow: var(--shadow-modal); .select-selected { z-index: 1; order: 1; display: block; opacity: 1; position: static; &:after { display: none !important; content: none !important; } } .select-items { z-index: 2; order: 0; flex-basis: auto; opacity: 1; display: flex; flex-direction: column; align-items: stretch; height: fit-content; max-height: 100%; background: var(--c-white); } } } &:has( > .custom-select.active ):before { content: ''; z-index: 0; position: fixed; inset: 6rem 0 4.625rem 0; height: auto !important; max-height: calc( 100vh - 6rem - 4.625rem ); background-color: rgba(0,0,0,0.15); backdrop-filter: blur(0.5rem); } } } .exwi-portal-content { order: 0; width: 100%; max-width: 100%; > .parts { > .part-wrapper.wpg-profile-internship-offer-part { padding: 1rem 0.75rem; .part { details { .flag-content { .flag-content-inner { padding-top: 1rem !important; form { .form-inner { .field-gallery { .input-field { .grid-preview { .showall { &:before { width: 2rem; height: 2rem; } } } } } } } } } } } } } #popups > .popup { inset: var(--wi-nav-height-min) 0 4.625rem 0; /* &.wpg-edit-gallery-popup { */ &> .inner { width: 600px !important; max-width: 100% !important; max-height: calc( 100% - 1rem ) !important; padding: 1rem !important; &> hr { margin: 1rem 0 !important; } } /* } */ } } } } @media ( max-width: 767px ) { *:is( * , .input-field , .auth-field ) > *:is( input[type="text"] , input[type="email"] , input[type="password"] , input[type="search"] , input[type="tel"] , input[type="url"] , input[type="date"] , textarea, .select-selected ) { height: auto; min-height: 2.5em; font-size: 1rem; line-height: 1rem; /* &.is-empty , &::blank , &::placeholder-shown { background-color: #F8F8FA !important; } */ &:disabled{ background-color: #F8F8FA !important; } &:focus { background-color: var(--c-white) !important; border-color: var(--c-pri) !important; box-shadow: 0px 0px 2px 1px var(--c-pri) inset !important; } } .wt-bt-s { min-height: 2.75rem; padding: 0.5rem 1rem; font-size: 1rem; line-height: 100%; font-weight: 600; } main > div.page-variant > section.layout-logos-conveyor .logo-conveyor , main > div.page-variant > section.layout-logos-conveyor .logo-conveyor .splide__track { overflow: visible; margin-left: -152% !important; margin-left: -152vw !important; width: 304% !important; width: 304vw !important; } } /* .view-wpg-profile .exwi-portal-content { padding: 1.5rem 1rem 3.5rem; } .view-wpg-profile .portal-page-header h2 { font-size: 1.5rem !important; } .view-wpg-profile .wpg-profile-details-part, .view-wpg-profile .wpg-profile-contact-part, .view-wpg-profile .wpg-profile-side-card .wpg-profile-contact-part, .view-wpg-profile .wpg-profile-side-card .wpg-profile-responsible-part { padding: 1.35rem; } .view-wpg-profile .wpg-profile-details-part .profile { grid-template-columns: 1fr; } .view-wpg-profile .wpg-profile-details-part .details { grid-template-columns: 1fr; } .view-wpg-profile .wpg-profile-details-part .details .name { margin-top: 0; } */ /* ========================================================= 2. SECTION-SPECIFIC ADJUSTMENTS ========================================================= */ /* ========================================================= GLOBAL ========================================================= */ /* ========================================================= TALENTS – KARRIERE STARTEN Figma: Talents-Karriere_Starten (ohne Header/Footer) ========================================================= */ main > div.page-variant > section.layout-talents-offers, main > div.page-variant > section.layout-talents-career-paths, main > div.page-variant > section.layout-talents-career-cta { padding-right: 0 !important; padding-left: 0 !important; font-family: var(--font-def); } main > div.page-variant > section.layout-talents-offers p, main > div.page-variant > section.layout-talents-career-paths p, main > div.page-variant > section.layout-talents-career-cta p { width: auto; } main > div.page-variant > section.layout-talents-offers { background: var(--c-white); } .layout-talents-offers > .section-inner, .layout-talents-career-paths > .section-inner, .layout-talents-career-cta > .section-inner { width: min(calc(100% - var(--talents-content-gutter)), var(--talents-content-width)); margin: 0 auto; box-sizing: border-box; } .layout-talents-offers > .section-inner { padding: 2.75rem 0 3.75rem; } .layout-talents-offers .career-offers-heading { margin: 0 0 2.25rem; text-align: center; } .layout-talents-offers .career-offers-heading h2, .layout-talents-career-paths .career-paths-heading h2 { margin: 0; color: var(--c-black); font-family: var(--font-hl); font-size: 3rem; font-weight: 700; line-height: 1.1; } .layout-talents-offers .career-offers-toolbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; min-height: 3.75rem; margin: 0 0 0.75rem; padding: 10px 0; border: 0; background: rgba(255, 255, 255, 0.94); box-shadow: inset 0 1px 6px rgba(255, 255, 255, 0.5); backdrop-filter: blur(0.5rem); } .layout-talents-offers .career-offers-types { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; min-width: 0; margin: 0; padding: 0; border: 0; } .layout-talents-offers .career-offers-types button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: auto; min-width: 5.25rem; min-height: 2.5rem; margin: 0; padding: 0 23px; border: 1px solid var(--c-grey); border-radius: 999px; background: var(--c-white); color: var(--c-dgrey); font-family: var(--font-def); font-size: 17px; font-weight: 500; line-height: 1; box-shadow: none; } .layout-talents-offers .career-offers-types button span { display: inline-grid; place-items: center; width: 1rem; height: 1rem; border: 1px solid currentColor; border-radius: 50%; font-size: 11px; font-weight: 600; line-height: 1; } .layout-talents-offers .career-offers-types button:is(:hover, :focus-visible), .layout-talents-offers .career-offers-types button.is-active { border-color: var(--c-blue); background: var(--c-blue); color: var(--c-white); } .layout-talents-offers .career-offers-sort { display: flex; align-items: center; flex: 0 0 auto; gap: 1rem; color: #2c2c3f; font-size: 17px; font-weight: 500; } .layout-talents-offers .career-offers-sort select { width: 150px; height: 2.5rem; margin: 0; padding: 0 2.75rem 0 1.25rem; border: 1px solid var(--c-grey); border-radius: 999px; appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='m1 1.5 5 5 5-5' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 18px center / 0.75rem 0.5rem no-repeat, var(--c-white); color: var(--c-dgrey); font-family: var(--font-def); font-size: 17px; font-weight: 600; } .layout-talents-offers .career-offers-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 1.5rem; margin: 0; padding: 0; list-style: none; } .layout-talents-offers .career-offers-grid > li { min-width: 0; } .layout-talents-offers .career-offer-card { display: flex; flex-direction: column; min-height: 402px; height: 100%; padding: 0.5rem; border: 1px solid var(--c-grey); border-radius: 1.25rem; background: var(--c-white); box-sizing: border-box; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .layout-talents-offers .career-offer-card:is(:hover, :focus-within) { border-color: #c2c2c2; box-shadow: 0 14px 34px rgba(34, 34, 34, 0.08); transform: translateY(-0.125rem); } .layout-talents-offers .career-offer-image { display: block; width: 100%; height: 10rem; border-radius: 0.75rem; background: linear-gradient(135deg, #e7edf5, #f8fbfd); overflow: hidden; } .layout-talents-offers .career-offer-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); } .layout-talents-offers .career-offer-card:is(:hover, :focus-within) .career-offer-image img { transform: scale(1.025); } .layout-talents-offers .career-offer-company { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.75rem; margin-top: 0.75rem; } .layout-talents-offers .career-offer-logo { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border: 1px solid var(--c-grey); border-radius: 10px; background: var(--c-white); color: var(--c-grey-profile); font-size: 14px; overflow: hidden; } .layout-talents-offers .career-offer-logo img { width: 100%; height: 100%; padding: 6px; box-sizing: border-box; object-fit: contain; } .layout-talents-offers .career-offer-company h3 { max-width: 100%; margin: 0 0 9px; overflow: hidden; color: var(--c-pri); font-family: var(--font-hl); font-size: 1.25rem; font-weight: 700; line-height: 1; text-overflow: ellipsis; white-space: nowrap; } .layout-talents-offers .career-offer-meta { position: relative; max-width: 100%; margin: 0 0 5px; padding-left: 21px; overflow: hidden; color: var(--c-dgrey); font-size: 15px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; } .layout-talents-offers .career-offer-meta::before { position: absolute; top: 50%; left: 0; width: 1rem; height: 1rem; content: ""; background-position: center; background-repeat: no-repeat; background-size: contain; transform: translateY(-50%); } .layout-talents-offers .career-offer-location::before { background-image: url("/wp-content/themes/custom-theme/images/icon_pin.svg"); } .layout-talents-offers .career-offer-activity::before { background-image: url("/wp-content/themes/custom-theme/images/icon_bag_empty.svg"); } .layout-talents-offers .career-offer-copy { margin: 0.75rem 0.25rem 0; } .layout-talents-offers .career-offer-copy h4 { margin: 0; color: var(--c-black); font-family: var(--font-hl); font-size: 17px; font-weight: 700; line-height: 1.2; } .layout-talents-offers .career-offer-copy p { display: -webkit-box; margin: 0.5rem 0 0; overflow: hidden; color: var(--c-grey-profile); font-size: 15px; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .layout-talents-offers .career-offer-card footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding: 0.75rem 0.25rem 0; } .layout-talents-offers .career-offer-type { display: inline-flex; align-items: center; min-height: 29px; padding: 0 13px; border: 1px solid #eaeaea; border-radius: 999px; background: rgba(238, 238, 238, 0.85); color: var(--c-black); font-size: 15px; font-weight: 500; line-height: 1; } .layout-talents-offers .career-offer-apply { display: inline-flex; align-items: center; justify-content: center; min-width: 162px; min-height: 37px; padding: 0 1.25rem; border-radius: 999px; background: var(--c-pri); color: var(--c-white); font-size: 17px; font-weight: 600; line-height: 1; text-decoration: none; } .layout-talents-offers .career-offer-apply:is(:hover, :focus-visible) { background: #b01e54; } .layout-talents-offers .career-offers-empty { margin: 4rem auto; color: var(--c-dgrey); font-size: 18px; text-align: center; } .layout-talents-offers .career-offers-more { margin: 2.25rem 0 0; text-align: center; } .layout-talents-offers .career-offers-more a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--c-pri); font-size: 1rem; font-weight: 500; text-decoration: none; } main > div.page-variant > section.layout-talents-career-paths { background: var(--c-white); } .layout-talents-career-paths > .section-inner { padding: 5rem 0 2.5rem; } .layout-talents-career-paths .career-paths-heading { max-width: 700px; margin: 0 auto 4.5rem; text-align: center; } .layout-talents-career-paths .career-paths-list { display: flex; flex-direction: column; gap: 4rem; } .layout-talents-career-paths .career-path { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; } .layout-talents-career-paths .career-path--reverse .career-path-image { order: 2; } .layout-talents-career-paths .career-path-image { height: 345px; border-radius: 1.25rem; background: #f2f2f2; overflow: hidden; } .layout-talents-career-paths .career-path-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .layout-talents-career-paths .career-path-copy { max-width: 450px; } .layout-talents-career-paths .career-path-eyebrow { margin: 0 0 6px; color: var(--c-pri); font-family: var(--font-hl); font-size: 17px; font-weight: 500; line-height: 1; } .layout-talents-career-paths .career-path-copy h3 { margin: 0; color: var(--c-black); font-family: var(--font-hl); font-size: 2rem; font-weight: 600; line-height: 1.125; } .layout-talents-career-paths .career-path-text { margin-top: 42px; } .layout-talents-career-paths .career-path-text p { margin: 0; color: var(--c-dgrey); font-size: 17px; line-height: 1.45; } .layout-talents-career-paths .career-path-link { display: inline-flex; margin-top: 2.25rem; min-height: 2.75rem; padding: 0 1.75rem; border-radius: 999px; background: var(--c-pri); color: var(--c-white); font-family: var(--font-def); font-size: 17px; font-weight: 600; } .layout-talents-career-paths .career-path-link::after { display: none; content: none; } main > div.page-variant > section.layout-talents-career-cta { background: var(--c-white); } .layout-talents-career-cta > .section-inner { padding: 7.5rem 0 3.75rem; } .layout-talents-career-cta .career-cta-card { position: relative; display: grid; grid-template-columns: minmax(0, 58%) minmax(360px, 42%); min-height: 370px; border-radius: 1.25rem; background: radial-gradient(circle at 56% 58%, rgba(216, 237, 249, 0.58), rgba(176, 221, 245, 0.42) 100%), #eef8fd; overflow: visible; isolation: isolate; } .layout-talents-career-cta .career-cta-copy { display: flex; align-items: flex-start; flex-direction: column; padding: 3rem 4rem; box-sizing: border-box; } .layout-talents-career-cta .career-cta-copy h2 { max-width: 600px; margin: 0; color: var(--c-black); font-family: var(--font-hl); font-size: 3rem; font-weight: 700; line-height: 1.15; text-wrap: balance; } .layout-talents-career-cta .career-cta-copy p { max-width: 600px; margin: 2rem 0 0; color: var(--c-dgrey); font-size: 1.5rem; font-weight: 500; line-height: 1.34; } .layout-talents-career-cta .career-cta-link { display: inline-flex; min-height: 2.75rem; margin-top: auto; padding: 0 30px; border-radius: 999px; background: var(--c-pri); color: var(--c-white); font-family: var(--font-def); font-size: 17px; font-weight: 600; } .layout-talents-career-cta .career-cta-link::after { display: none; content: none; } .layout-talents-career-cta .career-cta-image { position: relative; align-self: end; height: 469px; margin-top: -99px; overflow: visible; } .layout-talents-career-cta .career-cta-image img { position: absolute; right: 42px; bottom: 0; display: block; width: auto; max-width: calc(100% - 1.25rem); height: 100%; object-fit: contain; object-position: bottom center; } @media (max-width: 1100px) { .layout-talents-offers .career-offers-toolbar { align-items: flex-start; flex-direction: column; } .layout-talents-offers .career-offers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .layout-talents-career-paths .career-path { gap: 2.5rem; } } @media (max-width: 782px) { .layout-talents-offers > .section-inner, .layout-talents-career-paths > .section-inner, .layout-talents-career-cta > .section-inner { width: calc(100% - 2.5rem); } .layout-talents-offers > .section-inner { padding: 2.25rem 0 3rem; } .layout-talents-offers .career-offers-types { flex-wrap: nowrap; width: 100%; padding-bottom: 0.25rem; overflow-x: auto; scrollbar-width: thin; } .layout-talents-offers .career-offers-types button { flex: 0 0 auto; } .layout-talents-offers .career-offers-sort { justify-content: space-between; width: 100%; } .layout-talents-offers .career-offers-grid { grid-template-columns: 1fr; } .layout-talents-career-paths > .section-inner { padding: 4rem 0 1.5rem; } .layout-talents-career-paths .career-paths-heading { margin-bottom: 3rem; } .layout-talents-career-paths .career-paths-heading h2, .layout-talents-offers .career-offers-heading h2 { font-size: 38px; } .layout-talents-career-paths .career-paths-list { gap: 3.5rem; } .layout-talents-career-paths .career-path { grid-template-columns: 1fr; gap: 1.75rem; } .layout-talents-career-paths .career-path--reverse .career-path-image { order: 0; } .layout-talents-career-paths .career-path-image { height: min(72vw, 345px); } .layout-talents-career-paths .career-path-copy { max-width: none; } .layout-talents-career-paths .career-path-text { margin-top: 1.5rem; } .layout-talents-career-paths .career-path-link { margin-top: 1.75rem; } .layout-talents-career-cta > .section-inner { padding: 6rem 0 3rem; } .layout-talents-career-cta .career-cta-card { grid-template-columns: 1fr; overflow: hidden; } .layout-talents-career-cta .career-cta-copy { min-height: 390px; padding: 2.5rem 2rem; } .layout-talents-career-cta .career-cta-copy h2 { font-size: 2.5rem; } .layout-talents-career-cta .career-cta-copy p { margin-top: 1.5rem; font-size: 18px; } .layout-talents-career-cta .career-cta-image { height: 360px; margin-top: 0; } .layout-talents-career-cta .career-cta-image img { right: 0; left: 0; max-width: 100%; margin: 0 auto; } } @media (max-width: 480px) { .layout-talents-offers > .section-inner, .layout-talents-career-paths > .section-inner, .layout-talents-career-cta > .section-inner { width: calc(100% - 2rem); } .layout-talents-offers .career-offer-company h3 { font-size: 18px; } .layout-talents-offers .career-offer-apply { min-width: 0; padding: 0 1rem; } .layout-talents-career-paths .career-path-copy h3 { font-size: 1.75rem; } .layout-talents-career-cta .career-cta-copy { min-height: 360px; padding: 2rem 1.5rem; } .layout-talents-career-cta .career-cta-copy h2 { font-size: 34px; } } /* ========================================================= TALENTS WPG HERO ========================================================= */ .layout-hero-talents-wpg { --hero-bg: #f5fbff; position: relative; isolation: isolate; min-height: clamp(560px, 58vw, 960px); padding-bottom: var(--hero-padding-bottom, 7.5rem); background: var(--hero-bg); color: var(--c-black); overflow: hidden; } .layout-hero-talents-wpg.has-gradient::before { position: absolute; inset: 0; z-index: -2; content: ""; background: radial-gradient(42% 58% at 76% 34%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #f4fbff 0%, var(--c-white) 100%); } .layout-hero-talents-wpg .hero-background { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .layout-hero-talents-wpg .hero-background img { width: 100%; height: 100%; object-fit: cover; } .layout-hero-talents-wpg .hero-inner { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(340px, 0.72fr); align-items: center; gap: clamp(2.5rem, 6vw, 7rem); width: min(100% - 4rem, 1490px); min-height: clamp(560px, 58vw, 960px); margin: 0 auto; padding-top: clamp(118px, 9.5vw, 182px); box-sizing: border-box; } .layout-hero-talents-wpg--media-left .hero-copy { order: 2; } .layout-hero-talents-wpg--media-left .hero-media { order: 1; } .layout-hero-talents-wpg .hero-copy { max-width: 860px; } .layout-hero-talents-wpg .hero-badge { margin: 0 0 18px; color: var(--c-pri, var(--c-pri)); font-family: var(--font-hl); font-size: clamp(1.25rem, 1.45vw, 1.75rem); font-weight: 700; line-height: 1.12; } .layout-hero-talents-wpg h1 { width: auto; max-width: 980px; margin: 0; color: var(--c-black); font-family: var(--font-hl); font-size: clamp(58px, 5.7vw, 110px); font-weight: 700; line-height: 0.98; letter-spacing: 0; } .layout-hero-talents-wpg .accent { color: var(--c-pri, var(--c-pri)); } .layout-hero-talents-wpg .hero-subheadline { width: auto; max-width: 760px; margin: clamp(1.5rem, 2.1vw, 2.5rem) 0 0; color: var(--c-black); font-family: var(--font-hl); font-size: clamp(26px, 2.35vw, 45px); font-weight: 700; line-height: 1.07; letter-spacing: 0; } .layout-hero-talents-wpg .hero-intro { width: auto; max-width: 720px; margin: clamp(1.25rem, 2vw, 34px) 0 0; color: #54545a; font-size: clamp(18px, 1.25vw, 1.5rem); font-weight: 600; line-height: 1.36; } .layout-hero-talents-wpg .hero-media { align-self: end; width: min(100%, 610px); margin: 0; } .layout-hero-talents-wpg .hero-media img { display: block; width: 100%; height: auto; max-height: 720px; object-fit: contain; } .layout-hero-talents-wpg .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(1.75rem, 3vw, 3.25rem); } .layout-hero-talents-wpg .hero-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 2.75rem; padding: 11px 1.25rem; border: 1px solid transparent; border-radius: 999px; font-size: 1rem; font-weight: 700; line-height: 1; text-decoration: none; } .layout-hero-talents-wpg .hero-cta--primary { background: var(--c-pri, var(--c-pri)); color: var(--c-white); } .layout-hero-talents-wpg .hero-cta--secondary { border-color: rgba(34, 34, 34, 0.16); background: var(--c-white); color: var(--c-black); } .layout-hero-talents-wpg .hero-cta-icon { width: 13px; height: 13px; background: currentColor; mask: var(--icon-arrow-dio) center / contain no-repeat; -webkit-mask: var(--icon-arrow-dio) center / contain no-repeat; } .layout-hero-talents-wpg .hero-benefits, .layout-hero-talents-wpg .hero-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 42px); width: min(100% - 4rem, 1180px); margin: clamp(2.75rem, 5vw, 90px) auto 0; } .layout-hero-talents-wpg .hero-benefit { display: flex; align-items: flex-start; gap: 1rem; } .layout-hero-talents-wpg .hero-benefit img { flex: 0 0 auto; width: 34px; height: 34px; object-fit: contain; } .layout-hero-talents-wpg .hero-benefit p { width: auto; margin: 0; color: #46464c; font-size: clamp(17px, 1.05vw, 1.25rem); font-weight: 600; line-height: 1.35; } .layout-hero-talents-wpg .hero-card { display: flex; flex-direction: column; min-height: 210px; padding: 1.75rem; border: 1px solid rgba(34, 34, 34, 0.12); border-radius: 1.25rem; background: var(--c-white); color: var(--c-black); text-decoration: none; } .layout-hero-talents-wpg .hero-card--pink { border-color: var(--c-pri, var(--c-pri)); background: var(--c-pri, var(--c-pri)); color: var(--c-white); } .layout-hero-talents-wpg .hero-card-icon { width: 34px; height: 34px; margin-bottom: 1.5rem; object-fit: contain; } .layout-hero-talents-wpg .hero-card h2 { margin: 0; color: inherit; font-family: var(--font-hl); font-size: clamp(1.5rem, 1.55vw, 30px); font-weight: 700; line-height: 1.08; } .layout-hero-talents-wpg .hero-card p { width: auto; margin: 14px 0 0; color: inherit; font-size: 17px; font-weight: 600; line-height: 1.38; opacity: 0.82; } .layout-hero-talents-wpg .hero-card-link { margin-top: auto; padding-top: 1.5rem; color: inherit; font-size: 15px; font-weight: 700; } .layout-hero-talents-wpg--compact, .layout-hero-talents-wpg--event, .layout-hero-talents-wpg--simple { min-height: 560px; } .layout-hero-talents-wpg--compact .hero-inner, .layout-hero-talents-wpg--event .hero-inner, .layout-hero-talents-wpg--simple .hero-inner { grid-template-columns: minmax(0, 1fr); min-height: 560px; } .layout-hero-talents-wpg--compact .hero-copy, .layout-hero-talents-wpg--event .hero-copy, .layout-hero-talents-wpg--simple .hero-copy { max-width: 1120px; } .layout-hero-talents-wpg--background_only { min-height: 620px; } @media (max-width: 1180px) { .layout-hero-talents-wpg .hero-inner { grid-template-columns: minmax(0, 1fr); width: min(100% - 2.5rem, 920px); gap: 2.5rem; padding-top: 7.25rem; } .layout-hero-talents-wpg--media-left .hero-copy, .layout-hero-talents-wpg--media-left .hero-media { order: initial; } .layout-hero-talents-wpg .hero-media { justify-self: center; max-width: 520px; } .layout-hero-talents-wpg .hero-benefits, .layout-hero-talents-wpg .hero-cards { grid-template-columns: 1fr; width: min(100% - 2.5rem, 920px); } } @media (max-width: 603px) { .layout-hero-talents-wpg .hero-inner { width: min(100% - 2rem, 100%); min-height: 600px; padding-top: 94px; } .layout-hero-talents-wpg h1 { font-size: clamp(42px, 14vw, 4.25rem); line-height: 1.02; } .layout-hero-talents-wpg .hero-subheadline { font-size: 1.75rem; } .layout-hero-talents-wpg .hero-intro { font-size: 18px; } .layout-hero-talents-wpg .hero-ctas { align-items: stretch; flex-direction: column; } .layout-hero-talents-wpg .hero-cta { width: 100%; } .layout-hero-talents-wpg .hero-card { min-height: 0; padding: 1.5rem; border-radius: 18px; } } .null-padding-top .section-inner{ padding-top: 0 !important; padding-bottom: 3.75rem !important; } .padding-60 .section-inner{ padding-top: 3.75rem !important; padding-bottom: 3.75rem !important; } /* ========================================================= LOADING OVERLAY ========================================================= */ #loading-overlay { position: fixed; inset: 0; z-index: 100000; background-color: rgba(16, 16, 16, 0.75); } #loading-overlay.hidden { display: none !important; } #loading-overlay .loader-outer { position: absolute; top: 50%; left: 50%; display: flex; flex-flow: column; gap: clamp(18px, 1.25vw, 1.5rem); align-items: center; justify-content: center; color: var(--c-white); text-align: center; transform: translate(-50%, -50%); } #loading-overlay .loader-logo { width: clamp(90px, 9vw, 145px); height: auto; overflow: visible; color: var(--c-pri); filter: drop-shadow(0 0.75rem 1.5rem rgba(211, 37, 102, 0.3)); } #loading-overlay .loader-logo__mark, #loading-overlay .loader-logo__dot { transform-box: fill-box; transform-origin: center; } #loading-overlay .loader-logo__mark { animation: loader-logo-breathe 1.6s ease-in-out infinite; } #loading-overlay .loader-logo__dot { animation: loader-logo-dot 1.6s ease-in-out infinite; } @keyframes loader-logo-breathe { 0%, 100% { opacity: 0.78; transform: translateY(3px) scale(0.97); } 50% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes loader-logo-dot { 0%, 100% { opacity: 0.55; transform: translateY(0) scale(0.82); } 50% { opacity: 1; transform: translateY(-5px) scale(1.08); } } @media (prefers-reduced-motion: reduce) { #loading-overlay .loader-logo__mark, #loading-overlay .loader-logo__dot { animation: none; } } #pageHeader { & nav { & #logo-wrapper { & img, & svg { max-width: 275px; height: auto; } } } } .sticky #pageHeader{ & nav { & #logo-wrapper { & img, & svg { height: 100%; } } .talents-mark.portal-only { padding-top: 0 !important; } } } .home #pageHeader { & nav { & #logo-wrapper { & img, & svg { max-width: 391px; height: 100%; } } } } .home #pageHeader { & nav { & .actions { align-items: center; } } } /* ========================================================= BLOG DETAIL ========================================================= */ .blog-detail { --blog-detail-wide: min(1260px, calc(100vw - 3rem)); --blog-detail-intro: min(920px, calc(100vw - 3rem)); --blog-detail-copy: min(720px, calc(100vw - 3rem)); padding-top: calc(var(--wi-nav-height-min) + 4.5rem); color: var(--c-black); } .blog-detail__header { width: var(--blog-detail-intro); margin: 2.5rem auto; } .blog-detail__breadcrumb { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 2rem; overflow: hidden; color: var(--c-grey-profile); font-size: var(--fs-meta); white-space: nowrap; } .blog-detail__breadcrumb a, .blog-detail__breadcrumb span { flex: 0 0 auto; color: inherit; text-decoration: none; } .blog-detail__breadcrumb [aria-current="page"] { min-width: 0; overflow: hidden; color: var(--c-pri); font-weight: var(--fw-semibold); text-overflow: ellipsis; } .blog-detail__intro h1 { max-width: 800px; margin: 0 0 1.5rem; color: var(--c-black); font-family: var(--font-hl); font-size: clamp(2.25rem, 3.4vw, 3rem); font-weight: var(--fw-bold); line-height: 1.15; } .blog-detail__excerpt { max-width: 720px; margin: 0 0 2.5rem; color: var(--c-dgrey); font-size: var(--fs-body-lg); line-height: var(--lh-body); } .blog-detail__meta-row { display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; padding-top: 1.5rem; border-top: 1px solid var(--c-grey); } .blog-detail__meta { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; color: var(--c-dgrey); font-size: var(--fs-meta); font-weight: var(--fw-medium); } .blog-detail__meta :is(time, span) { display: inline-flex; gap: 0.5rem; align-items: center; } .blog-detail__meta i { color: var(--c-dgrey); } .blog-detail__category { padding: 0.3rem 1rem; color: var(--c-dgrey); border: 1px solid var(--c-grey); border-radius: var(--rad-inf); text-decoration: none; } .blog-detail__share { display: flex; flex: 0 0 auto; gap: 0.75rem; } .blog-detail__share a { display: grid; width: 2.75rem; height: 2.75rem; color: var(--c-pri); border: 1px solid var(--c-grey); border-radius: 50%; place-items: center; text-decoration: none; transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .blog-detail__share a:is(:hover, :focus-visible) { color: var(--c-white); background-color: var(--c-pri); border-color: var(--c-pri); } .blog-detail__hero { position: relative; width: var(--blog-detail-wide); margin: 0 auto 3rem; } .blog-detail__image-credit { padding: 0.35rem 0.75rem; color: var(--c-dgrey); font-size: var(--fs-caption); text-align: right; font-weight: var(--fw-regular); } .blog-detail__hero img { display: block; width: 100%; height: auto; max-height: 500px; aspect-ratio: 63 / 25; object-fit: cover; border-radius: var(--rad-m); } .blog-detail__content { width: var(--blog-detail-copy); margin: 0 auto; padding-bottom: 7.5rem; color: var(--c-dgrey); font-size: var(--fs-body-lg); line-height: 1.5; } .blog-detail__content > :first-child { margin-top: 0; } .blog-detail__content :is(h2, h3, h4) { margin: 2.5rem 0 1rem; color: var(--c-black); font-family: var(--font-hl); font-weight: var(--fw-bold); line-height: var(--lh-tight); } .blog-detail__content h2 { font-size: clamp(1.75rem, 2.3vw, 2rem); } .blog-detail__content h2::after, .blog-detail__content h3::after{ content: ''; display: inline; } .blog-detail__content h3 { font-size: clamp(1.35rem, 1.8vw, 1.5rem) !important; } .blog-detail__content h4 { font-size: 1.25rem; } .blog-detail__content :is(p, ul, ol, blockquote) { margin: 0 0 1.5rem; } .blog-detail__content :is(ul, ol) { padding-left: 1.6rem; } .blog-detail__content ul { list-style: disc; } .blog-detail__content ol { list-style: decimal; } .blog-detail__content li { margin-bottom: 0.25rem; } .blog-detail__content img { max-width: 100%; height: auto; border-radius: var(--rad-s); } .blog-detail__content .wp-block-paragraph a{ display: inline-block; } main > div.page-variant > .blog-detail + .layout-posts-carousel { background-color: var(--c-white) !important; } main > div.page-variant > .blog-detail + .layout-posts-carousel > .section-inner-carousel { padding-top: 3.75rem !important; border-top: 1px solid var(--c-grey); } main > div.page-variant > .blog-detail + .layout-posts-carousel .headline { font-size: clamp(2rem, 3vw, 2.5rem); } @media (max-width: 782px) { .blog-detail { padding-top: calc(var(--wi-nav-height-mobile) + 2rem); } .blog-detail__breadcrumb { margin-bottom: 1.5rem; } .blog-detail__meta-row { align-items: flex-start; flex-direction: column; } .blog-detail__hero { margin-bottom: 2.5rem; } .blog-detail__hero img { aspect-ratio: 16 / 10; } .blog-detail__content { padding-bottom: 4rem; } main > div.page-variant > .blog-detail + .layout-posts-carousel > .section-inner-carousel { padding-top: 2.5rem !important; } } /* ========================================================= BLOG OVERVIEW ========================================================= */ .blog-overview { --blog-overview-width: min(1260px, calc(100vw - 3rem)); position: relative; z-index: 0; padding: calc(var(--wi-nav-height) + 2.5rem) 0 7.5rem; color: var(--c-black); transition: opacity 220ms var(--ease), transform 260ms var(--ease); animation: blog-overview-enter 420ms var(--ease) both; } @keyframes blog-overview-enter { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: translateY(0); } } body.blog-navigation-pending .blog-overview { opacity: 0; transform: translateY(0.75rem); } body.blog-navigation-pending { cursor: wait; } .blog-overview::before { content: ""; position: absolute; z-index: 0; inset: 0 0 auto; height: min(68rem, 60vw); background: radial-gradient(circle at 55% 55%, rgba(216, 237, 249, 0.35), rgba(176, 221, 245, 0.12) 55%, transparent 78%); pointer-events: none; } .blog-overview__intro, .blog-overview__featured, .blog-overview__all { position: relative; z-index: 1; width: var(--blog-overview-width); margin-inline: auto; } .blog-overview__intro { margin-bottom: 2.5rem; } .blog-overview__intro h1 { margin: 0 0 1.5rem; color: var(--c-black); font-family: var(--font-hl); font-size: clamp(3.5rem, 6vw, 6.875rem); font-weight: var(--fw-bold); line-height: 1.1; } .blog-overview__intro h1 span { color: var(--c-pri); } .blog-overview__intro p { max-width: 35rem; margin: 0; color: var(--c-dgrey); font-size: var(--fs-body-lg); line-height: var(--lh-body); } .blog-overview__featured { display: grid; grid-template-columns: minmax(0, 2fr) minmax(25rem, 1.25fr); gap: 1.5rem; align-items: start; margin-bottom: 8rem; } .blog-overview__latest h2 { margin: 0 0 1rem; color: var(--c-black); font-family: var(--font-hl); font-size: 2rem; font-weight: var(--fw-bold); line-height: 1; } .blog-overview__latest-list { display: grid; gap: 1rem; } .blog-overview-card { min-width: 0; background: var(--c-white); transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .blog-overview-card > a { position: relative; display: block; height: 100%; color: inherit; text-decoration: none; } .blog-overview-card__image { overflow: hidden; } .blog-overview-card__image img, .blog-overview-card__placeholder { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); } .blog-overview-card > a:is(:hover, :focus-visible) .blog-overview-card__image img { transform: scale(1.025); } .blog-overview-card h3 { color: var(--c-black); font-family: var(--font-hl); font-weight: var(--fw-bold); transition: color var(--dur) var(--ease); } .blog-overview-card__arrow { position: absolute; right: 1rem; bottom: 1rem; width: var(--link-arrow-size-sm); height: var(--link-arrow-size-sm); background-color: var(--c-pri); mask-image: var(--icon-arrow-dio); mask-position: center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--icon-arrow-dio); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; transition: transform var(--dur) var(--ease); } .blog-overview-card--featured .blog-overview-card__arrow { position: absolute; right: 1.75rem; bottom: 1.4rem; } .blog-overview-card > a:is(:hover, :focus-visible) .blog-overview-card__arrow { background-color: var(--c-white); transform: translate(0.125rem, -0.125rem); } .blog-overview-card:is(:hover, :focus-within) { color: var(--c-white); background-color: var(--c-pri); border-color: var(--c-pri); box-shadow: var(--shadow-card); transform: translateY(-0.2rem); } .blog-overview-card:is(:hover, :focus-within) :is(h3, .blog-overview-card__excerpt, .blog-overview-card__eyebrow, .blog-overview-card__meta, .blog-overview-card__meta *, .blog-overview-card__pill, .blog-overview-card__read-more) { color: var(--c-white); } .blog-overview-card:is(:hover, :focus-within) .blog-overview-card__pill { border-color: rgba(255, 255, 255, 0.65); } .blog-overview-card--featured { padding: 0.5rem; border-radius: var(--rad-l); box-shadow: var(--shadow-card); } .blog-overview-card--featured .blog-overview-card__image { height: 22rem; border-radius: var(--rad-m); } .blog-overview-card--featured .blog-overview-card__body { position: relative; padding: 1.5rem 1.5rem 1rem; } .blog-overview-card__pill { display: inline-flex; margin-bottom: 1rem; padding: 0.3rem 1rem; color: var(--c-dgrey); border: 1px solid var(--c-grey); border-radius: var(--rad-inf); font-size: 0.9rem; line-height: 1; } .blog-overview-card--featured h3 { max-width: 45rem; margin: 0 0 1rem; font-size: clamp(2rem, 2.6vw, 2.5rem) !important; line-height: var(--lh-tight); } .blog-overview-card--featured .blog-overview-card__excerpt { max-width: 45rem; margin: 0 0 1.5rem; color: var(--c-dgrey); font-size: var(--fs-body-lg); line-height: 1.4; } .blog-overview-card__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; margin: 0; color: var(--c-dgrey); font-size: var(--fs-meta); font-weight: var(--fw-medium); } .blog-overview-card__meta span { display: inline-flex; gap: 0.45rem; align-items: center; } .blog-overview-card__read-more { position: absolute; right: 3rem; bottom: 1rem; color: var(--c-pri); font-weight: var(--fw-medium); transition: color var(--dur) var(--ease); } .blog-overview-card--latest { min-height: 8.25rem; padding: 0.25rem; border-radius: var(--rad-s); box-shadow: var(--shadow-card); } .blog-overview-card--latest > a { display: grid; grid-template-columns: 7.75rem minmax(0, 1fr); gap: 1rem; align-items: center; min-height: 7.75rem; } .blog-overview-card--latest .blog-overview-card__image { height: 7.75rem; border-radius: 0.625rem; } .blog-overview-card--latest .blog-overview-card__body { position: relative; display: flex; align-self: stretch; justify-content: center; flex-direction: column; min-width: 0; padding: 0.5rem 2rem 0.5rem 0; } .blog-overview-card--latest h3 { display: -webkit-box; margin: 0 0 0.5rem; overflow: hidden; font-size: 1.15rem !important; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } .blog-overview-card--latest .blog-overview-card__meta { gap: 0.3rem; font-size: 0.75rem; white-space: nowrap; } .blog-overview-card--latest .blog-overview-card__meta span:not(:last-child)::after { content: "•"; margin-left: 0.3rem; } .blog-overview__all-header { display: flex; gap: 2rem; align-items: baseline; margin-bottom: 1.5rem; } .blog-overview__all-header h2, .blog-overview__all-header p { margin: 0; color: var(--c-black); font-family: var(--font-hl); font-weight: var(--fw-bold); line-height: 1; } .blog-overview__all-header h2 { font-size: clamp(3rem, 5vw, 5rem); } .blog-overview__all-header p { font-size: clamp(1.75rem, 3vw, 2.5rem); } .blog-overview__categories { display: flex; gap: 0.75rem; margin-bottom: 2rem; padding-bottom: 0.5rem; overflow-x: auto; scrollbar-width: thin; } .blog-overview__categories a { display: inline-flex; flex: 0 0 auto; gap: 0.7rem; align-items: center; min-height: 2.5rem; padding: 0.55rem 1rem; color: var(--c-dgrey); background: var(--c-white); border: 1px solid var(--c-grey); border-radius: var(--rad-inf); font-size: var(--fs-meta); font-weight: var(--fw-medium); line-height: 1; text-decoration: none; transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .blog-overview__categories a:is(.active, :hover, :focus-visible) { color: var(--c-white); background-color: var(--c-pri); border-color: var(--c-pri); } .blog-overview__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } .blog-overview-card--grid { min-height: 34rem; padding: 0.5rem; border: 1px solid var(--c-grey); border-radius: var(--rad-m); } .blog-overview-card--grid .blog-overview-card__image { height: 16.5rem; border-radius: var(--rad-s); } .blog-overview-card--grid .blog-overview-card__body { position: relative; min-height: 15rem; padding: 1rem 2.5rem 2.5rem 1rem; } .blog-overview-card__eyebrow { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 0.75rem; color: var(--c-dgrey); font-size: 0.75rem; font-weight: var(--fw-medium); } .blog-overview-card--grid h3 { display: -webkit-box; margin: 0 0 1rem; overflow: hidden; font-size: var(--fs-card-title) !important; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; min-height: calc(var(--fs-card-title) * 1.3 * 3); } .blog-overview-card--grid .blog-overview-card__excerpt { display: -webkit-box; margin: 0; overflow: hidden; color: var(--c-grey-profile); font-size: var(--fs-body-lg); line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; } .blog-overview__empty { padding: 3rem 0; color: var(--c-dgrey); } .blog-overview__pagination { margin-top: 3rem; } .blog-overview__pagination > .page-numbers { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: end; list-style: none; } .blog-overview__pagination a, .blog-overview__pagination span { display: grid; min-width: 2.75rem; height: 2.75rem; padding-inline: 0.75rem; color: var(--c-dgrey); background: var(--c-white); border: 1px solid var(--c-grey); border-radius: var(--rad-inf); place-items: center; text-decoration: none; transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .blog-overview__pagination :is(.current, a:hover, a:focus-visible) { color: var(--c-white); background: var(--c-pri); border-color: var(--c-pri); } .blog-overview__pagination a:is(:hover, :focus-visible) { transform: translateY(-0.15rem); } .blog-overview__pagination .prev, .blog-overview__pagination .next { min-width: 6.75rem; background: var(--c-white-mute); border-color: var(--c-white-mute); } .blog-overview__pagination .disabled { color: var(--c-grey-profile); cursor: default; opacity: 0.55; } .blog-overview__pagination .prev { margin-right: 1rem; } .blog-overview__pagination .next { margin-left: 1rem; } @media (max-width: 1180px) { .blog-overview__featured { grid-template-columns: minmax(0, 1.4fr) minmax(20rem, 1fr); } .blog-overview-card--latest > a { grid-template-columns: 6rem minmax(0, 1fr); } .blog-overview-card--latest .blog-overview-card__image { height: 6rem; } .blog-overview-card--latest h3 { margin-bottom: 0.5rem; font-size: var(--fs-body) !important; } .blog-overview-card--latest .blog-overview-card__meta span:first-child { display: none; } .blog-overview__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 782px) { .blog-overview { padding-top: calc(var(--wi-nav-height-mobile) + 2.5rem); padding-bottom: 4rem; } .blog-overview__intro h1 { font-size: clamp(2.75rem, 13vw, 4rem); } .blog-overview__featured { grid-template-columns: 1fr; margin-bottom: 5rem; } .blog-overview-card--featured .blog-overview-card__image { height: auto; aspect-ratio: 16 / 10; } .blog-overview__all-header { gap: 0.75rem; align-items: flex-start; flex-direction: column; } .blog-overview__grid { grid-template-columns: 1fr; } .blog-overview-card--grid { min-height: 0; } .blog-overview-card--grid .blog-overview-card__image { height: auto; aspect-ratio: 16 / 10; } .blog-overview__pagination .page-numbers { justify-content: center; } } @media (prefers-reduced-motion: reduce) { .blog-overview, .blog-overview-card, .blog-overview-card__image img, .blog-overview__pagination a { animation: none; transition: none; } } a.wt-bt { &:is( :visited , :active , :focus ), &:is( :visited , :active , :focus ) * { color: var(--c-white); } &::after{ content: ""; width: var(--link-arrow-size-md); height: var(--link-arrow-size-md); background-color: var(--c-white) !important; background-image: none !important; mask-image: var(--icon-arrow-dio) !important; mask-position: center; mask-repeat: no-repeat; mask-size: calc(100% - 0.125rem) calc(100% - 0.125rem); -webkit-mask-image: var(--icon-arrow-dio) !important; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: calc(100% - 0.125rem) calc(100% - 0.125rem); font-size: var(--trurem); margin-left: 0.5rem; transition: background-color var(--dur) var(--ease-standard), transform var(--dur) var(--ease); } &:is(:hover, :focus)::after{ background-color: var(--c-white); /* transform: translate(0.25rem, -0.25rem); */ transform: translate( 0.125rem, -0.125rem ); animation: none; } } h2, .headline { font-size: var(--headline-size); } h1.headline { font-size: var(--headline-h1-size); margin-bottom: var(--pad-l); } h3 { font-size: clamp(1.5rem, 2vw, 2rem) !important; } .h2-tagline { color: var(--c-black); font-size: clamp(1.9rem, 4vw, 3rem) !important; font-weight: var(--fw-bold); line-height: 115% !important; } .hashtag { color: var(--c-pri); font-weight: var(--fw-medium); font-size: var(--trurem); line-height: 1; margin-bottom: 0.25rem; transition: color var(--dur) var(--ease); font-family: var(--font-hl); } hgroup.section-heads { display: flex; flex-flow: row wrap; align-items: baseline; justify-content: flex-start; gap: var(--pad-xs) var(--pad-l); .headline { flex: 0 1 auto; min-width: 0; } .subhead { flex: 1 1 19rem; min-width: min(100%, 19rem); } } .wt-bt.external-link { display: inline-flex; align-items: center; &::after { content: ""; display: block; flex: 0 0 auto; width: var(--link-arrow-size-md); height: var(--link-arrow-size-md); margin-left: 0.6rem; background-color: var(--c-white); background-image: unset; mask-image: var(--icon-arrow-external); mask-position: center; mask-repeat: no-repeat; mask-size: calc(100% - 0.125rem) calc(100% - 0.125rem); -webkit-mask-image: var(--icon-arrow-external); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: calc(100% - 0.125rem) calc(100% - 0.125rem); } } .wt-bt-modal { background-image: unset !important; } .talents-mark { margin-bottom: 1rem; } /* ========================================================= GLOBAL / HEADER ========================================================= */ body > main { width: 100%; max-width: 100%; position: relative; } main > div.page-variant { width: 100%; max-width: 100%; overflow: clip; } main > div.page-variant > section.layout-hero > .section-inner { height: 100vh; min-height: 900px; } #pageHeader nav .actions #nav-tree-wrapper #nav-tree { background-image: none; } main > div.page-variant > section.layout-hero > .section-inner { .shortcut-box { z-index: 3; position: absolute; inset: auto -9rem 7rem auto; width: 33.125rem; height: 12.5rem; max-height: 12.5rem; .shortcut-box-inner p { position: relative; display: block; padding: var(--pad-s); padding-bottom: calc(var(--pad-m) + 1.3rem); font-family: var(--font-hl); font-size: 1.5rem; font-weight: var(--fw-bold); line-height: 2rem; } .shortcut-box-inner p::after { position: absolute; top: calc(100% - var(--pad-s) - 1.25rem); bottom: auto; width: 1rem; height: 1rem; content: ""; background-color: var(--c-pri) !important; background-image: none !important; mask: var(--icon-arrow-dio) center / contain no-repeat; -webkit-mask: var(--icon-arrow-dio) center / contain no-repeat; transition: background-color var(--dur) var(--ease-standard), transform var(--dur) var(--ease); } > a:is(:hover, :focus) .shortcut-box-inner { background: var(--c-pri); transform: scale(1.04); } > a:is(:hover, :focus) .shortcut-box-inner p { color: var(--c-white); } > a:is(:hover, :focus) .shortcut-box-inner p::after { background-color: var(--c-white) !important; transform: translate( 0.125rem, -0.125rem ); } } } /* ========================================================= GLOBAL / FOOTER ========================================================= */ #pageFooter { padding: 4rem; background-color: var(--c-lgrey); background-image: url("/wp-content/uploads/2026/04/background_w.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; .columns .column { width: 100% !important; max-width: fit-content !important; } .footer-brand { .footer-logo { display: flex; align-items: center; margin-left: -1px; img { display: block; aspect-ratio: 253 / 112; width: 395px; max-width: 100%; height: auto; } .talents-only { display: flex; align-items: center; padding-left: 3rem; &:before { content: ''; width: 1px; height: 8.75rem; max-height: 100%; background: var(--c-grey); } .talents-mark { padding: 20% 0 0 3rem; svg { width: 231px; max-width: 100%; height: auto; } } } } } .footer-partner { width: auto !important; text-align: right; * { text-align: right; } } img { display: inline-block; border-radius: unset; object-position: unset; object-fit: unset; } .columns { max-width: var(--container-wide); margin: auto; justify-content: space-between; align-items: baseline; .column:nth-child(1) img { width: auto; height: auto; } } .wp-disclaimer, .idw-disclaimer { margin-block: 2rem; p { max-width: 23rem; font-weight: var(--fw-bold); } } .social-list.d-flex { display: flex; gap: 1rem; list-style: none; } .idw-footer-logo { img { display: inline-block; width: 97px; height: 4rem; aspect-ratio: 97 / 64; } } .footer-legal { margin-top: 3.75rem; justify-content: end; } } #legalNav { padding: 0; background-color: transparent; ul li a { display: block; padding: 0 1rem; color: var(--c-dgrey); text-decoration: none; font-size: 17px; font-style: normal; font-weight: 600; line-height: normal; } } #pageFooter .socials .social-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; padding: 1rem; border-radius: 50%; color: var(--c-pri); background-color: var(--c-white) !important; transition: color var(--dur) var(--ease-standard), background-color var(--dur) var(--ease-standard), transform var(--dur) var(--ease-standard); } #pageFooter .socials .social-link:hover, #pageFooter .socials .social-link:focus-visible { color: var(--c-white); background-color: var(--c-pri) !important; * { filter: grayscale(100) brightness(100); transition: filter inherit inherit inherit; } } #pageFooter .socials .social-link img { display: none !important; } #pageFooter .socials .social-link::before { content: ""; display: block; width: 1.5rem; height: 1.5rem; background-color: currentColor; } /* TikTok */ #pageFooter .socials .social-link[href*="tiktok"]::before { -webkit-mask: url("/wp-content/themes/custom-theme/fontawesome/svgs/brands/tiktok.svg") center / contain no-repeat; mask: url("/wp-content/themes/custom-theme/fontawesome/svgs/brands/tiktok.svg") center / contain no-repeat; } /* LinkedIn */ #pageFooter .socials .social-link[href*="linkedin"]::before { -webkit-mask: url("/wp-content/themes/custom-theme/fontawesome/svgs/brands/linkedin-in.svg") center / contain no-repeat; mask: url("/wp-content/themes/custom-theme/fontawesome/svgs/brands/linkedin-in.svg") center / contain no-repeat; } /* Instagram */ #pageFooter .socials .social-link[href*="instagram"]::before { -webkit-mask: url("/wp-content/themes/custom-theme/fontawesome/svgs/brands/instagram.svg") center / contain no-repeat; mask: url("/wp-content/themes/custom-theme/fontawesome/svgs/brands/instagram.svg") center / contain no-repeat; } /* Newsletter */ #pageFooter .socials .social-link[href*="letter"] { width: auto; width: fit-content; height: 3.25rem; border-radius: 1.625rem; gap: 0.75rem; .sr-only { display: inline-block !important; position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: wrap; opacity: 1; border: none; font-size: 1.125rem; font-weight: 600; color: var(--c-dgrey); line-height: 100%; display: inline-flex !important; justify-content: flex-start !important; align-items: center; flex-wrap: nowrap; } &:before { -webkit-mask: var(--ico-letter) center / contain no-repeat; mask: var(--ico-letter) center / contain no-repeat; } } /* Newsletter-Pille: Das Wortmarken-Praefix gehoert in die WPG-Welt ("talents-Newsletter", Design Main-Footer); die Talents-Welt zeigt nur "Newsletter" (Design Talents-Footer). Vorher war es invertiert, und das Praefix renderte als --ico-logo-Bild (W) in 0.8lh. Wie die Statik als echter Text (kursiv 700 im Primaerton); der Hover-Filter der Pille (grayscale+brightness) faerbt ihn automatisch weiss mit. */ body:not(.mode-talents):not(.talents-nav) { #pageFooter .socials .social-link[href*="letter"] { .sr-only { &:before { order: -2; content: 'talents'; display: inline; font-style: italic; font-weight: 700; font-size: inherit; line-height: inherit; color: var(--c-pri); } &:after { order: -1; content: '-'; display: inline; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; } } } } /* ========================================================= SHARED UI ========================================================= */ main > div.page-variant { .splide__arrow { position: static; width: var(--splide-arrow-size); height: var(--splide-arrow-size); margin: 0; border: 0; transform: none; background: var(--c-white-mute); box-shadow: none; opacity: 1; transition: background var(--dur-slow) var(--ease-standard); &:hover { background: var(--c-white-dmute); } &:disabled { background: var(--c-grey-profile); } svg { width: var(--splide-arrow-icon-size); height: var(--splide-arrow-icon-size); fill: var(--c-pri) !important; } } } main > div.page-variant :is( .tabber-show-all, .logos-conveyor-show-all, .cta-talents-button ) { gap: 0.5rem; color: var(--c-white); font-size: 17px; font-weight: 600; } main > div.page-variant :is( .logos-conveyor-show-all, .cta-talents-button ) { height: var(--talents-control-height); min-height: var(--talents-control-height); padding: 0 2rem; } .flipcards-mobile-slider { display: none; } /* ========================================================= HOME ========================================================= */ main > div.page-variant { > section.layout-hero > .section-inner { max-width: var(--container-wide); margin: auto; > img { width: clamp(27rem, 36vw, 32rem); transform: translateX(calc(-50% + 2.5rem)); /*max-height: 800px; */ } } > section.layout-startoff-grid { .section-inner .cols { .intro { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: var(--gap-m); flex: 0 0 32rem; margin-right: 0; .wt-bt.mob-only { display: none !important; } .img-wrapper , img { flex-basis: 50% !important; } } .tiles-list { display: grid; grid-template-columns: repeat(2, 1fr); > li { position: relative; &::before, &::after { content: ""; position: absolute; background: var(--c-grey); pointer-events: none; } &::before { height: 0.5px; } &::after { width: 0.5px; } &:nth-child(1)::before { right: 0; bottom: 0; left: 1rem; } &:nth-child(1)::after { top: 1rem; right: 0; bottom: 0; } &:nth-child(2)::before { right: 1rem; bottom: 0; left: 0; } &:nth-child(2)::after { top: 1rem; bottom: 0; left: 0; } &:nth-child(3)::before { top: 0; right: 0; left: 1rem; } &:nth-child(3)::after { top: 0; right: 0; bottom: 1rem; } &:nth-child(4)::before { top: 0; right: 1rem; left: 0; } &:nth-child(4)::after { top: 0; bottom: 1rem; left: 0; } } } .tiles-list-wrapper { flex-grow: 1; flex-shrink: 1; min-width: 0; max-width: 100%; ul { display: grid; width: 100%; align-items: stretch; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); li { min-width: 0; min-height: min( 20rem, 25vw ); } .tile { position: relative; display: flex; flex-wrap: wrap; hgroup { padding-bottom: 2.5rem; } } p { align-self: end; width: 81%; max-width: 14.8rem; } h3 { word-break: break-all; } a .tile::after { content: ""; position: absolute; top: calc( 100% - 2rem ); right: 1.5rem; width: 0.6125rem; height: 0.6125rem; margin: 0; background-color: var(--c-pri); background-image: none !important; mask-image: var(--icon-arrow-dio) !important; mask-position: center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--icon-arrow-dio) !important; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } } li { min-height: 12rem; } a, .tile { height: 100%; display:block; } } } } > section.layout-testimonial-slider > .section-inner { .splide__track { max-width: 100%; } .slide-inner { align-items: center !important; figure { padding: 0 3rem !important; figcaption { width: 100%; } } } .splide__arrows { display: flex; align-items: center; justify-content: flex-start; gap: 1rem; order: 3; width: 50%; max-width: calc(var(--landscape-content-w) + 2rem); margin-top: 1.5rem; position: absolute; right: 0; bottom: 9rem; padding-right: 6rem; padding-left: 4rem; } } > section.layout-ourbrand > .section-inner { .section-heads { .mob-only { display: none; } } .cols { gap: var(--pad-ctr-l); margin-bottom: var(--pad-s); .intro, .main-text { display: flex; flex-direction: column; justify-content: space-between; } .intro { align-items: stretch; gap: var(--gap-m); flex: 2 0 33rem; flex-basis: 40%; } .main-text { gap: var(--gap-l); } } figure.cols { display: grid !important; grid-template-columns: minmax( auto, 30% ) min( 465px, 37% ) 1fr; gap: 3%; justify-content: normal; align-items: center; width: 100%; padding-top: 3rem; border-top: 1px solid var(--c-grey); > div:first-child { flex: 0 1 auto; align-self: stretch; margin-right: 0; a { max-width: 100%; img { max-width: 100%; border-radius: 0; object-fit: contain; } } } > figcaption:nth-child(2) { justify-self: center; p { text-align: center; } } > div:last-child { display: flex; flex: 0 0 28%; align-items: end; align-self: flex-end; height: 100%; } } } > section.layout-accordion-grid > .section-inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-xxl); .cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad-ctr-s); row-gap: var(--pad-ctr-xs); width: 100%; .col-left li , &:not( .is-collapsed ) .col-right li { margin-top: 1rem; } } .item { border-radius: var(--rad-m); background: var(--cta-bg-radial); } details.is-expanded { transform: background 0.3s var(--ease-standard); background: #dff4ff; border-radius: var(--rad-m); } summary { display: flex; align-items: center; justify-content: space-between; gap: var(--pad-s); padding: var(--pad-xxl); cursor: pointer; border-radius: var(--rad-m); transition: all var(--dur-slow) var(--ease-standard); p { margin: 0; font-weight: var(--fw-bold); } &::-webkit-details-marker { display: none; } } .accordion-icon { width: 2rem; height: 2rem; flex-shrink: 0; svg { display: block; width: 100%; height: 100%; } .icon-circle { fill: var(--c-white); stroke-width: 1; transition: fill var(--dur-slow) var(--ease-standard), stroke var(--dur-slow) var(--ease-standard); } .icon-chevron { fill: none; stroke: var(--c-pri); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 50%; transition: stroke var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); } } details.is-expanded .accordion-icon { .icon-circle { fill: var(--c-pri); } .icon-chevron { stroke: var(--c-white); transform: rotate(180deg); } } .accordion-content { overflow: hidden; height: 0; transition: height var(--dur-slow) var(--ease-standard); } .accordion-content-inner { padding: 0 2rem 1.75rem 2rem; p { width: 100% !important; max-width: 500px !important; } footer { padding-top: var(--pad-s); } } .main-link-wrapper { margin: auto; width: fit-content; .wt-bt::after { content: ""; display: inline-block; width: var(--link-arrow-size-sm); height: var(--link-arrow-size-sm); margin-bottom: 0.5px; margin-left: 0.5rem; background-color: var(--c-white) !important; background-image: none !important; mask-image: var(--icon-arrow-dio) !important; mask-position: center; mask-repeat: no-repeat; mask-size: calc(100% - 0.125rem) calc(100% - 0.125rem); -webkit-mask-image: var(--icon-arrow-dio) !important; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: calc(100% - 0.125rem) calc(100% - 0.125rem); } } } > section.layout-keylinks-grid > .section-inner { .main-text { max-width: 42rem; } .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr)); gap: 1rem; width: 100%; img { width: 100%; } ul li { .box-wrapper, .box { transition: background-color var(--dur) var(--ease-standard), color var(--dur) var(--ease-standard); } .box-wrapper { gap: var(--gap-m); padding: var(--pad-m); color: var(--c-black); background: var(--c-lgrey); border-radius: var(--rad-m); &:hover, &:focus-within { color: var(--c-white); background-color: var(--c-pri); .box { background-color: var(--c-pri); } .box p, h3 { color: var(--c-white) !important; } .box::after { background-color: var(--c-white) !important; transform: translate(0.125rem, -0.125rem); } } } .box { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--gap-m); min-height: fit-content; height: fit-content; padding: var(--pad-m) 0; background: var(--c-lgrey); border-radius: var(--rad-m); padding-bottom: 0; p { flex: unset !important; width: 22rem !important; color: var(--c-grey-profile); line-height: 1.25rem; transition: color var(--dur) var(--ease-standard); } &::after { content: ""; width: 1rem; height: 1rem; margin-bottom: 0.125rem; background-color: var(--c-pri) !important; background-image: none !important; transition: background-color var(--dur) var(--ease-standard); mask-image: var(--icon-arrow-dio) !important; mask-position: center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--icon-arrow-dio) !important; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; transition: transform var(--dur) var(--ease); } } h3 { margin-left: auto; text-align: right; transition: color var(--dur) var(--ease-standard); } } } } > section.layout-posts-carousel { background-color: var(--c-lgrey); .splide__list{ height: auto !important; } > .section-inner-carousel { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; max-width: none; margin: 0; padding: var(--pad-ctr-cl) 0; box-sizing: border-box; overflow: hidden; > header, .splide__arrows { width: auto; max-width: var(--container-default); box-sizing: border-box; } > header { flex-basis: 100%; margin: 0 auto; padding: 0 2rem; } .main-link-wrapper { margin-inline: 2rem; padding-left: calc((100vw - (var(--landscape-content-w) + 4rem)) / 2) !important; a { width: fit-content; margin-top: 2rem; padding: 0.75rem 1.5rem; min-height: 2.75rem; } } .splide__track { flex-basis: 100%; width: 100%; /* DO NOT REMOVE */ padding-top: 2rem; padding-left: calc((100vw - (var(--landscape-content-w) + 4rem)) / 2) !important; padding-right: calc((100vw - (var(--landscape-content-w) + 4rem)) / 2 + 4rem) !important; margin-inline: 2rem; overflow: visible; } .splide__slide { height: auto; border-radius: var(--rad-m); article { position: relative; height: 100%; padding: 0.5rem 0.5rem 2rem 0.5rem; background: var(--c-white); border-radius: var(--rad-m); box-sizing: border-box; &::after { content: ""; position: absolute; top: auto; bottom: 1rem; right: 1rem; width: 0.75rem; height: 0.75rem; margin: 0; background-color: var(--c-pri) !important; background-image: none !important; mask-image: var(--icon-arrow-dio) !important; mask-position: center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--icon-arrow-dio) !important; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } header { img , .img-placeholder { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--rad-m); } } .meta , h3 , .teaser { margin-inline: 1rem; margin-right: 3rem; } .meta { margin-top: 1rem; margin-bottom: 1rem; font-size: var(--fs-caption); } h3, .teaser { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; word-break: normal; overflow-wrap: break-word; hyphens: none; } h3 { margin-top: 1rem; margin-bottom: 1rem; min-height: calc(1.5rem * 1.3 * 3); hyphens: auto !important; } .teaser { height: 4.2rem; margin-top: 1rem; margin-bottom: 2rem; min-height: calc(17px * 1.3 * 3); } } } .splide__arrows { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; order: 3; height: fit-content; margin: 2rem 2rem 0 0; padding-right: calc((100vw - (var(--landscape-content-w) + 4rem)) / 2) !important; } } } > section.layout-flipcards-grid > .section-inner { display: flex; flex-direction: column; align-items: flex-start; justify-content: stretch; gap: 2rem; overflow: hidden; .cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad-ctr-m); width: 100%; .col-left, .col-right { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; border: 0.125rem solid transparent; background: var(--c-white); background-clip: border-box; } .cards-list { display: flex; flex-direction: column; gap: 2rem; list-style: none; margin: 0; padding: 0; } li { margin: 0; padding: 0; } .col-left ul li article.odd, .col-right ul li article.even { height: 600px; color: var(--c-white); background-color: var(--c-pri); border: 0 solid var(--c-grey); .card-tag, h3, .card-text, .card-text p, footer a, footer a::after { color: var(--c-white); } h3 { font-size: clamp(1.5rem, 3.5vw, 2rem) !important; } .card-image-wrapper { height: 275px; background-color: #ffcae0; } .wt-bt-modal { --bt-bg: var(--c-white); --bt-icon: var(--c-pri); } } } .flipcards-mobile-slider { display: none; } :is(.cols, .flipcards-mobile-slider) { .card { --bt-size: 4rem; position: relative; width: 100%; height: 500px; overflow: hidden; border: 1px solid var(--c-grey); border-radius: var(--rad-m); color: var(--c-black); background-color: var(--c-white); &.is-flipped { .front { pointer-events: none; } .back { pointer-events: auto; } .front-content { opacity: 0; } .front-content header { opacity: 0; transform: translateY(-1.15rem); transition-delay: 0ms; } .back-content { opacity: 1; transform: translateY(0); transition-delay: 90ms; pointer-events: auto; } .back-content .card-text, .back-content footer { opacity: 1; transform: translateY(0); transition-delay: 170ms; } .wt-bt-modal::before { transform: translate(-50%, -50%) rotate(45deg); } } &.is-returning { .back-content { opacity: 0; transform: translateY(0.9rem); transition-delay: 0ms; } .back-content .card-text, .back-content footer { opacity: 0; transform: translateY(1.15rem); transition-delay: 0ms; } .front-content { opacity: 1; transform: translateY(0); transition-delay: 90ms; } .front-content header { opacity: 1; transform: translateY(0); transition-delay: 170ms; } } } .card-flip { position: static; } .card-flip, .front, .back, .front-content, .back-content { width: 100%; height: 100%; } .front, .back { position: absolute; inset: 0; overflow: hidden; border: 0; border-radius: var(--rad-m); background-color: transparent; } .front { z-index: 2; display: block; padding: 0; cursor: pointer; text-align: left; appearance: none; pointer-events: auto; } .back { z-index: 3; color: var(--c-black); pointer-events: none; width: 100% !important; position: static !important; .back-content { position: static; height: auto; width: 100%; padding-bottom: 4.75rem !important; footer { position: absolute !important; left: 2.5rem; bottom: calc( 1rem + ( 2.75rem / 2 ) - 0.6rem ); padding-right: 4rem !important; height: auto !important; } } } .front-content, .back-content { position: absolute; inset: 0; will-change: opacity, transform; transition: opacity 680ms ease, transform 820ms cubic-bezier(0.22, 1, 0.36, 1); } .front-content { opacity: 1; transform: translateY(0); } .back-content { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; justify-content: stretch; gap: var(--gap-l); padding: var(--pad-ctr-m); padding-bottom: calc(var(--pad-ctr-m) + var(--bt-size) + 0.5rem); opacity: 0; transform: translateY(0.9rem); pointer-events: none; } .front-content header, .back-content .card-text, .back-content footer { will-change: opacity, transform; transition: opacity 620ms ease, transform 860ms cubic-bezier(0.22, 1, 0.36, 1); } .front-content header { opacity: 1; transform: translateY(0); } .back-content .card-text, .back-content footer { opacity: 0; transform: translateY(1.15rem); } .card-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; img, svg { position: absolute; left: 0; bottom: 0; width: 9999px; max-width: 66.666%; height: 9999px; max-height: 66.666%; object-fit: contain; object-position: 50% 100%; &[src*="steuerberatung"] { object-position: 0% 100%; left: 2rem; width: 9999px; max-width: 66%; } } } .front header { position: absolute; inset: 0; z-index: 1; padding: var(--pad-ctr-m) var(--pad-ctr-l) var(--pad-ctr-cl) var(--pad-ctr-l); pointer-events: none; } .card-tag { font-family: var(--font-hl); font-size: var(--trurem); font-weight: var(--fw-regular); color: var(--c-grey-profile); } h3 { padding-top: var(--pad-s); font-size: clamp(1.5rem, 3.5vw, 2.5rem) !important; color: var(--c-black); } .card-image-wrapper { position: relative; width: 100%; height: 200px; margin-bottom: var(--pad-xxs); border-radius: var(--rad-s); background-color: var(--c-pri); img, svg { object-fit: contain; position: absolute; top: 50%; left: 50%; width: auto; height: 95%; max-width: 40%; max-height: 95%; transform: translate(-50%, -50%); } } .card-text { width: 100%; color: var(--c-black); p { width: 100%; color: inherit; } } footer { position: absolute; left: var(--pad-ctr-m); bottom: var(--pad-ctr-s); z-index: 4; display: flex; align-items: center; width: fit-content; height: var(--bt-size); a { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--c-pri); pointer-events: auto; &::after { content: ""; display: block; flex: 0 0 auto; width: var(--link-arrow-size-md); height: var(--link-arrow-size-md); background-color: currentColor; background-image: unset; mask-image: var(--icon-arrow-small); mask-position: center; mask-repeat: no-repeat; mask-size: calc(100% - 0.125rem) calc(100% - 0.125rem); -webkit-mask-image: var(--icon-arrow-small); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: calc(100% - 0.125rem) calc(100% - 0.125rem); } } } .wt-bt-modal { --icon-width: 1.375rem; --icon-height: 1.5rem; --bt-bg: var(--c-pri); --bt-icon: var(--c-white); position: absolute; right: var(--pad-ctr-s); bottom: var(--pad-ctr-s); z-index: 5; width: var(--bt-size); height: var(--bt-size); padding: 0; border: 0; border-radius: 50%; background-color: var(--bt-bg); cursor: pointer; appearance: none; transition: background-color var(--dur) var(--ease-standard), transform 260ms cubic-bezier(0.83, 0, 0.17, 1); &::before { content: ""; position: absolute; top: 50%; left: 50%; width: var(--icon-width); height: var(--icon-height); background-color: var(--bt-icon); transform: translate(-50%, -50%) rotate(0deg); transform-origin: center; transition: background-color var(--dur) var(--ease-standard), transform 420ms cubic-bezier(0.83, 0, 0.17, 1); mask-image: var(--icon-plus); mask-position: center; mask-repeat: no-repeat; mask-size: calc(100% - 0.125rem) calc(100% - 0.125rem); -webkit-mask-image: var(--icon-plus); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: calc(100% - 0.125rem) calc(100% - 0.125rem); } &:hover { transform: scale(1.06); } } } } } main div.page-variant div.cols .col-right li article.card.odd footer a::after, main div.page-variant div.cols .col-left li article.card.even footer a::after { background-color: var(--c-pri) !important; } main div.page-variant section.layout-testimonial-slider figcaption p{ font-weight: var(--fw-semibold); } main > div.page-variant > section.layout-startoff-grid { & .section-inner { & .cols { & .tiles-list-wrapper { & ul { & .tile { position: relative; padding: 1.5rem 1.5rem 2rem 1.5rem; } } } } } } main > div.page-variant > section.layout-ourbrand > .section-inner { & figure.cols { & > figcaption:nth-child(2) { & p { font-size: 1.25rem; } } } } /* ========================================================= CLAIMS SCROLLER ========================================================= */ main > div.page-variant > section.layout-claims-scroller { > .section-inner { width: 100%; &.mirror { .cols { .col-texts { order: 2; } .col-boxes { order: 1; } } } .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--pad-ctr-l); align-items: start; width: 100%; } .col-texts, .col-boxes { width: 100%; min-width: 0; } .col-texts { height: 100%; > header.sticky, > .sticky { position: sticky; top: calc(var(--wi-nav-height, 6rem) + 2rem); } p:not(.subhead) { margin-top: var(--pad-m); /*margin-left: auto; margin-right:auto; text-align:center;*/ } } .boxes-list { display: flex; flex-direction: column; gap: var(--gap-l); margin: 0; padding: 0; list-style: none; } .box { height: 100%; border: 0; border-radius: var(--rad-m); background: var(--c-white); overflow: hidden; &.has-gradient { background: var(--claims-bg-radial); } } .box-inner { display: flex; flex-direction: column; gap: 1.75rem; padding: 1rem; } .even{ border: 1px solid var(--c-grey); } .box header { display: flex; flex-direction: column; gap: 2rem; img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: calc(var(--rad-m) - var(--pad-xxs)); } h3, p { margin: 0; padding-left: 2rem; padding-right: 4rem; } } .box-content { display: flex; justify-content: flex-start; align-items: center; gap: 0.75rem; margin: 0 1rem; border-top: 1px solid var(--c-grey); padding: 2rem 0 1rem 1rem; } .number { flex-shrink: 0; display: inline-block; min-width: fit-content; font-size: clamp( 2rem, 3.5vw, 2.5rem ); font-weight: var(--fw-bold); line-height: 1; white-space: nowrap; text-align: left; } .claim { flex-shrink: 1; width: 65%; min-width: 0; margin: 0; color: var(--c-black); text-wrap: balance; } .box-content > a { position: relative; display: block; flex-shrink: 0; justify-self: end; align-self: center; width: var(--link-arrow-size-lg); height: var(--link-arrow-size-lg); margin-left: auto; background: none; text-decoration: none; &::after { content: ""; display: block; width: var(--link-arrow-size-lg); height: var(--link-arrow-size-lg); background-color: var(--c-pri) !important; background-image: none !important; mask-image: var(--icon-arrow-dio) !important; mask-position: center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--icon-arrow-dio) !important; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } } } } /* ========================================================= EVENT TEASERS ========================================================= */ main > div.page-variant > section.layout-event-teasers { > .section-inner { max-width: var(--container-default); margin: 0 auto; padding: var(--pad-ctr-cl) 2rem; } ol { display: flex; flex-direction: column; gap: 2rem; margin: 0; padding: 2rem 0; list-style: none; } li { margin: 0; padding: 0; } article.event { display: grid; grid-template-columns: minmax(15rem, 26rem) minmax(0, 1fr); gap: 2rem; align-items: stretch; } aside { min-width: 0; img { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; border-radius: var(--rad-m); } } .main { display: grid; grid-template-columns: minmax(0, 1fr) 15.5rem; gap: 1em; align-items: stretch; min-width: 0; padding: 1.5rem 2rem; border-radius: var(--rad-m); background: var(--c-lgrey); > header { min-width: 0; } > div { display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem; min-width: 0; padding: 0.5rem 0 0.5rem 2rem; border-left: 1px solid var(--c-grey); } } .main header { .section-heads { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--pad-s); padding-block: 0.5rem; .headline, .subhead, h3, p { flex: unset; min-width: 0; width: auto; margin: 0; } } .metapills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.25rem; } .metapill { display: inline-flex; align-items: center; justify-content: center; min-height: 2rem; padding: 0.3rem 0.9rem; border: 1px solid var(--c-grey); border-radius: 999px; color: var(--c-black); font-size: 0.95rem; font-weight: var(--fw-medium); line-height: 1.5rem; text-transform: uppercase; white-space: nowrap; background: var(--c-white); } } time { display: grid; gap: 0.75rem; margin: 0; } .date, .time { position: relative; margin: 0; padding-left: 2rem; color: var(--c-black); font-size: 1.05rem; line-height: var(--lh-tight); &::before { content: ""; position: absolute; left: 0; top: 0.05rem; background-color: var(--c-pri); mask-position: center; mask-repeat: no-repeat; mask-size: calc(100% - 0.125rem) calc(100% - 0.125rem); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: calc(100% - 0.125rem) calc(100% - 0.125rem); } } .date::before { width: 0.95rem; height: 1.1rem; mask-image: url("data:image/svg+xml,%3Csvg width='17' height='20' viewBox='0 0 17 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.88889 20C1.36944 20 0.924769 19.8042 0.554861 19.4125C0.184954 19.0208 0 18.55 0 18V4C0 3.45 0.184954 2.97917 0.554861 2.5875C0.924769 2.19583 1.36944 2 1.88889 2H2.83333V1C2.83333 0.716667 2.92384 0.479167 3.10486 0.2875C3.28588 0.0958333 3.51019 0 3.77778 0C4.04537 0 4.26968 0.0958333 4.45069 0.2875C4.63171 0.479167 4.72222 0.716667 4.72222 1V2H12.2778V1C12.2778 0.716667 12.3683 0.479167 12.5493 0.2875C12.7303 0.0958333 12.9546 0 13.2222 0C13.4898 0 13.7141 0.0958333 13.8951 0.2875C14.0762 0.479167 14.1667 0.716667 14.1667 1V2H15.1111C15.6306 2 16.0752 2.19583 16.4451 2.5875C16.815 2.97917 17 3.45 17 4V18C17 18.55 16.815 19.0208 16.4451 19.4125C16.0752 19.8042 15.6306 20 15.1111 20H1.88889ZM1.88889 18H15.1111V8H1.88889V18Z' fill='black'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='17' height='20' viewBox='0 0 17 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.88889 20C1.36944 20 0.924769 19.8042 0.554861 19.4125C0.184954 19.0208 0 18.55 0 18V4C0 3.45 0.184954 2.97917 0.554861 2.5875C0.924769 2.19583 1.36944 2 1.88889 2H2.83333V1C2.83333 0.716667 2.92384 0.479167 3.10486 0.2875C3.28588 0.0958333 3.51019 0 3.77778 0C4.04537 0.716667 4.26968 0.0958333 4.45069 0.2875C4.63171 0.479167 4.72222 0.716667 4.72222 1V2H12.2778V1C12.2778 0.716667 12.3683 0.479167 12.5493 0.2875C12.7303 0.0958333 12.9546 0 13.2222 0C13.4898 0 13.7141 0.0958333 13.8951 0.2875C14.0762 0.479167 14.1667 0.716667 14.1667 1V2H15.1111C15.6306 2 16.0752 2.19583 16.4451 2.5875C16.815 2.97917 17 3.45 17 4V18C17 18.55 16.815 19.0208 16.4451 19.4125C16.0752 19.8042 15.6306 20 15.1111 20H1.88889ZM1.88889 18H15.1111V8H1.88889V18Z' fill='black'/%3E%3C/svg%3E"); } .time::before { width: 1.1rem; height: 1.1rem; mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.125 10C18.125 14.4883 14.4883 18.125 10 18.125C5.51172 18.125 1.875 14.4883 1.875 10C1.875 5.51172 5.51172 1.875 10 1.875C14.4883 1.875 18.125 5.51172 18.125 10ZM0 10C0 15.5234 4.47656 20 10 20C15.5234 20 20 15.5234 20 10C20 4.47656 15.5234 0 10 0C4.47656 0 0 4.47656 0 10ZM9.0625 4.6875V10C9.0625 10.3125 9.21875 10.6055 9.48047 10.7812L13.2305 13.2812C13.6602 13.5703 14.2422 13.4531 14.5312 13.0195C14.8203 12.5859 14.7031 12.0078 14.2695 11.7188L10.9375 9.5V4.6875C10.9375 4.16797 10.5195 3.75 10 3.75C9.48047 3.75 9.0625 4.16797 9.0625 4.6875Z' fill='black'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.125 10C18.125 14.4883 14.4883 18.125 10 18.125C5.51172 18.125 1.875 14.4883 1.875 10C1.875 5.51172 5.51172 1.875 10 1.875C14.4883 1.875 18.125 5.51172 18.125 10ZM0 10C0 15.5234 4.47656 20 10 20C15.5234 20 20 15.5234 20 10C20 4.47656 15.5234 0 10 0C4.47656 0 0 4.47656 0 10ZM9.0625 4.6875V10C9.0625 10.3125 9.21875 10.6055 9.48047 10.7812L13.2305 13.2812C13.6602 13.5703 14.2422 13.4531 14.5312 13.0195C14.8203 12.5859 14.7031 12.0078 14.2695 11.7188L10.9375 9.5V4.6875C10.9375 4.16797 10.5195 3.75 10 3.75C9.48047 3.75 9.0625 4.16797 9.0625 4.6875Z' fill='black'/%3E%3C/svg%3E"); } .main-link-wrapper { width: fit-content; margin-left: 0; margin-right: auto; .wt-bt::after { content: ""; display: inline-block; width: var(--link-arrow-size-sm); height: var(--link-arrow-size-sm); margin-bottom: 0.5px; margin-left: 0.5rem; background-color: var(--c-white) !important; background-image: none !important; mask-image: var(--icon-arrow-dio) !important; mask-position: center; mask-repeat: no-repeat; mask-size: calc(100% - 0.125rem) calc(100% - 0.125rem); -webkit-mask-image: var(--icon-arrow-dio) !important; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: calc(100% - 0.125rem) calc(100% - 0.125rem); } } } main > div.page-variant > section.layout-posts-carousel .section-inner-carousel .splide__slide article { transition: background-color var(--dur) var(--ease-standard), color var(--dur) var(--ease-standard); } main > div.page-variant > section.layout-posts-carousel .section-inner-carousel .splide__slide article::after { /* transition: background-color var(--dur) var(--ease-standard), transform var(--dur) var(--ease-standard); */ transition: none; } main > div.page-variant > section.layout-posts-carousel .section-inner-carousel .splide__slide article:hover, main > div.page-variant > section.layout-posts-carousel .section-inner-carousel .splide__slide article:focus-within { color: var(--c-white); background-color: var(--c-pri); } main > div.page-variant > section.layout-posts-carousel .section-inner-carousel .splide__slide article:hover :is(.meta, .meta *, h3, .teaser), main > div.page-variant > section.layout-posts-carousel .section-inner-carousel .splide__slide article:focus-within :is(.meta, .meta *, h3, .teaser) { color: var(--c-white); } main > div.page-variant > section.layout-posts-carousel .section-inner-carousel .splide__slide article:hover::after, main > div.page-variant > section.layout-posts-carousel .section-inner-carousel .splide__slide article:focus-within::after { background-color: var(--c-white) !important; transform: translate(0.125rem, -0.125rem); } main > div.page-variant .tiles-list-wrapper .tiles-list li a .tile { transition: background-color var(--dur) var(--ease-standard), color var(--dur) var(--ease-standard); } main > div.page-variant .tiles-list-wrapper .tiles-list li a:hover .tile, main > div.page-variant .tiles-list-wrapper .tiles-list li a:focus-visible .tile, main > div.page-variant .tiles-list-wrapper .tiles-list li a:focus .tile { color: var(--c-white); background-color: var(--c-pri); } main > div.page-variant .tiles-list-wrapper .tiles-list li a:hover .tile :is(.hashtag, .hashtag *, h3, p, p *), main > div.page-variant .tiles-list-wrapper .tiles-list li a:focus-visible .tile :is(.hashtag, .hashtag *, h3, p, p *), main > div.page-variant .tiles-list-wrapper .tiles-list li a:focus .tile :is(.hashtag, .hashtag *, h3, p, p *) { color: var(--c-white); } main > div.page-variant .tiles-list-wrapper .tiles-list li a .tile::after { transition: background-color var(--dur) var(--ease-standard), transform var(--dur) var(--ease-standard); } main > div.page-variant .tiles-list-wrapper .tiles-list li a:hover .tile::after, main > div.page-variant .tiles-list-wrapper .tiles-list li a:focus-visible .tile::after, main > div.page-variant .tiles-list-wrapper .tiles-list li a:focus .tile::after { background-color: var(--c-white) !important; transform: translate(0.125rem, -0.125rem); } main > div.page-variant .tiles-list-wrapper .tiles-list li:nth-child(1) a .tile { border-top-left-radius: var(--rad-m); } main > div.page-variant .tiles-list-wrapper .tiles-list li:nth-child(2) a .tile{ border-top-right-radius: var(--rad-m); } main > div.page-variant .tiles-list-wrapper .tiles-list li:nth-child(3) a .tile{ border-bottom-left-radius: var(--rad-m); } main > div.page-variant .tiles-list-wrapper .tiles-list li:nth-child(4) a .tile { border-bottom-right-radius: var(--rad-m); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1920px) { main > div.page-variant > section.layout-hero > .section-inner { & .shortcut-box { inset: auto 2rem 7rem auto; } } } @media (max-width: 1337px) { main > div.page-variant > section.layout-hero > .section-inner { justify-content: flex-start; } } @media (max-width: 1180px) { .sticky-wrapper:not(.sticky) #pageHeader { background-color: transparent !important; } main > section , main > .page-variant > section , footer section { padding-left: 0 !important; padding-right: 0 !important; } .cols { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr)); &> img { max-width: 100% !important; } } main > div.page-variant { & > section.layout-accordion-grid > .section-inner { & .cols { grid-template-columns: 100%; } } } main > div.page-variant { > section.layout-testimonial-slider > .section-inner { .splide__track .splide__list .splide__slide .slide-inner img { flex-basis: 48%; min-height: 520px; } .splide__arrows { bottom: 7.5rem; padding-left: 3rem; } .slide-inner figure { padding: 0 2rem !important; } } > section.layout-startoff-grid .section-inner .cols { grid-template-columns: minmax(0, 1fr) 70%; } > section:first-child > .section-inner { padding-top: calc(2dvh + var(--wi-nav-height)); } > section.layout-ourbrand > .section-inner figure.cols > div:first-child { margin-right: auto; } > section.layout-flipcards-grid > .section-inner .cols .front header { padding: var(--pad-ctr-m); padding-bottom: var(--pad-ctr-cl); } > section.layout-posts-carousel > .section-inner-carousel .splide__slide { width: calc(50% - 5rem) !important; } } #pageHeader nav { .actions #global-toggle { display: none; } #logo-wrapper { height: 60%; } } #pageFooter { margin-left: auto; background-image: url("/wp-content/uploads/2026/05/background_w_mobile.svg"); background-size: 110vw; .footer-partner { text-align: left; * { text-align: left; } } .columns { width: 100%; margin-right: auto; margin-left: 0; p { width: 100%; margin-right: auto; margin-left: 0; } .footer-logo { width: 100%; height: auto; max-width: 95%; } &.idw-contact-info { max-width: 360px; gap: 0; flex-wrap: wrap; flex-direction: row; > div { flex: 1 0 50%; } } } } #legalNav { width: 100%; max-width: 360px; ul { flex-wrap: wrap; flex-direction: row; } ul li { flex: 1 0 50%; } ul li a { padding: 0.5rem 0; } } main > div.page-variant > section.layout-event-teasers { > .section-inner > header { .heads-wrapper { grid-template-columns: 1fr; gap: var(--pad-s); } .subhead { max-width: 100%; padding-top: 0; } } article.event { grid-template-columns: minmax(13rem, 22rem) minmax(0, 1fr); gap: 1.5rem; } .main { grid-template-columns: minmax(0, 1fr) 13.5rem; padding: 1.25rem 1.5rem; > div { padding-left: 1.5rem; } } } } @media (max-width: 879px) { main > div.page-variant > section.layout-ourbrand > .section-inner { .section-heads .mob-only { &.subhead { flex-basis: 100%; } display: block; } .cols { display: flex !important; flex-direction: column; gap: 1.5rem; width: 100%; margin-bottom: 0.5rem; .desk-only { display: none; } .intro { display: contents; } .subhead { order: 1; text-align: center; } img { order: 2; flex-basis: 100%; max-width: 100%; width: 540px; margin-left: auto; margin-right: auto; } .main-text { order: 3; width: 70vw; max-width: 100%; margin-right: auto; margin-left: 0; padding-left: 0.75rem; padding-right: 0.75rem; } } figure.cols { grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding-top: 1.5rem; > div:last-child { flex-basis: auto; height: auto; grid-column: 2; margin-top: 0; align-self: start; justify-self: end; } img { width: 10rem; height: auto; margin-bottom: 0; } p { width: 70vw; margin-right: auto; margin-left: 0; text-align: left !important; font-size: 1rem !important; } } } } @media (max-width: 815px) { hgroup.section-heads { justify-content: center; .subhead { text-align: center; } } .talents-mark { text-align: center; svg { width: 82px; height: auto; } } body.exwi-portal { header { #pageHeader { nav { gap: 0.75rem !important; } } } } .section-inner > header { margin: auto; } .layout-hero .section-inner > header { margin: 0; } main > div.page-variant > section.layout-claims-scroller { & > .section-inner { & .col-texts { & p:not(.subhead) { margin-top: var(--pad-m); margin-left: auto; margin-right: auto; text-align: center; } } } } main > div.page-variant { > section.layout-keylinks-grid > .section-inner { .main-text { text-align: center; } .cols { ul { order: 1; gap: 1rem; } img { order: 0; min-height: 442px; } ul li .box p { width: 62vw !important; padding-top: 1rem; margin-bottom: 0; margin-right: 2rem; } } } > section.layout-startoff-grid > .section-inner { .cols { grid-template-columns: 1fr; } .intro { margin-right: 0; p { margin: auto auto 0 auto; text-align: center; } } } > section.layout-hero { margin-bottom: clamp(17rem, 50vw, 10rem); > .section-inner { > img { width: clamp(15.5rem, 50vw, 27rem); left: 67%; } footer { width: 100%; } .shortcut-box { position: absolute; inset: unset; width: calc(100% - 4rem); height: auto; max-height: max-content; bottom: -18rem; .shortcut-box-inner { flex-wrap: wrap; img { height: 245px; object-fit: cover; object-position: 50% 20%; border-radius: calc(var(--rad-m) - var(--pad-xxs)); } p { padding-top: 1.25rem; padding-bottom: 1.25rem; padding-right: 4rem; &::after { content: "↗"; position: absolute; top: calc(100% - var(--pad-m) - 1.25rem); right: var(--pad-m); left: auto; width: clamp( 0.75rem, 2.5vw, 1.0rem ); height: clamp( 0.75rem, 2.5vw, 1.0rem ); background-image: var(--icon-arrow-dio); font-size: 0.001px; color: var(--c-pri); } } } } } } > section.layout-flipcards-grid > .section-inner { .cols { display: none !important; } .flipcards-mobile-slider { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem !important; width: 100%; .splide__track { order: 0; flex-basis: 100%; overflow: visible; } .splide__list { align-items: stretch; } .splide__slide { height: auto; } .splide__pagination { order: 2; flex-basis: auto; display: flex; flex-direction: row; gap: 0.5rem !important; position: static; margin: 0 !important; &> li { width: fit-content; height: fit-content; &> .splide__pagination__page { display: block; width: 0.75rem; height: 0.75rem; margin: 0 !important; border-radius: calc( 0.75rem / 2 ); opacity: 1 !important; background: #d9d9d9; &.is-active { background: var(--c-pri) !important; transform: scale(1) !important; opacity: 1 !important; width: 2rem !important; } } } } .splide__arrows { order: 1; flex-basis: auto; display: flex; align-items: center; justify-content: flex-start; gap: 1rem; position: static; width: auto; margin: 0 !important; padding: 0; .splide__arrow { background: #e2e2e2 !important; } } .card, .card.is-pink { height: auto !important; min-height: 500px !important; } .card.is-pink { color: var(--c-white); background-color: var(--c-pri); border: 0; .card-tag, h3, .card-text, .card-text p, footer a, footer a::after { color: var(--c-white); } .card-image-wrapper { background-color: #ffcae0; } .wt-bt-modal { --bt-bg: var(--c-white); --bt-icon: var(--c-pri); } } .card-bg { overflow: hidden; > svg, > img { position: absolute; left: 0; bottom: 0; display: block; width: auto; height: auto; max-width: 66.666%; max-height: 66.666%; transform: none; } } .front header { padding: 1.5rem 2rem 7.5rem 2rem !important; } h3 { font-size: clamp(1.5rem, 3.5vw, 2rem) !important; } .card-image-wrapper { overflow: hidden; padding: 1.75rem; > svg, > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-width: 100%; min-height: 100%; max-width: none; max-height: none; transform: none; } > img { object-fit: contain; } } .wt-bt-modal { transition: none; width: 2.75rem; height: 2.75rem; right: 1rem; bottom: 1rem; } .back .back-content footer { left: 2rem; } } } > section.layout-claims-scroller > .section-inner { .cols { grid-template-columns: 1fr; gap: var(--pad-ctr-m); } .box header { gap: 1rem; h3 { padding-top: 0.5rem; } } .box-inner { padding: 0.75rem; gap: 1.25rem; header > h3 , header > p { padding-left: 1.25rem; padding-right: 1.25rem; } .box-content { margin: 0 0.25rem; padding: 1.25rem 0 0.5rem 1.00rem; } } &.mirror .cols { .col-texts, .col-boxes { order: initial; } } .col-texts { > header.sticky, > .sticky { position: static; top: auto; } p { max-width: 100%; } } .claim { line-height: 140%; font-size: 1rem; } } > section.layout-event-teasers { > .section-inner { padding: var(--pad-ctr-l) 2rem; } article.event { grid-template-columns: 1fr; gap: 1rem; } aside img { min-height: 260px; } .main { grid-template-columns: 1fr; gap: 1.5rem; > div { padding-left: 0; padding-top: 1.25rem; border-left: 0; border-top: 1px solid var(--c-grey); } } .main header { h3, p { max-width: 100%; } } } } } @media (max-width: 603px) { main > div.page-variant .tiles-list-wrapper .tiles-list li:nth-child(1) a .tile { border-top-left-radius: var(--rad-m); border-top-right-radius: var(--rad-m); } main > div.page-variant .tiles-list-wrapper .tiles-list li:nth-child(2) a .tile{ border-top-right-radius: 0; } main > div.page-variant .tiles-list-wrapper .tiles-list li:nth-child(3) a .tile{ border-bottom-left-radius: 0; } main > div.page-variant .tiles-list-wrapper .tiles-list li:nth-child(4) a .tile { border-bottom-right-radius: var(--rad-m); border-bottom-left-radius: var(--rad-m); } body:not( .exwi-portal ) p { width: 76vw; max-width: 100%; } .subhead.h2-tagline { margin: auto; } section > .section-inner { padding-top: var(--pad-ctr-l); padding-bottom: var(--pad-ctr-l); } h1.headline { font-size: clamp(3.25rem, 7vw, 4.75rem); } .wt-bt { display: flex; align-items: center; justify-content: center; min-height: var(--wi-bt-base-size); /* background-color: var(--c-pri); */ /* color: var(--c-white); */ font-size: var(--trurem); } .layout-accordion-grid { .cards-list > li { --faq-delay: 0ms; } .cards-list > li p { width: 100%; } .cards-list > li .item { opacity: 1; transform: translateY(0); max-height: 1000px; overflow: hidden; transition: opacity 320ms ease var(--faq-delay), transform 420ms cubic-bezier(0.22, 1, 0.36, 1) var(--faq-delay), max-height 420ms cubic-bezier(0.22, 1, 0.36, 1) var(--faq-delay), margin 420ms cubic-bezier(0.22, 1, 0.36, 1) var(--faq-delay); } .cols { &.is-collapsed .faq-extra-item .item { opacity: 0; transform: translateY(-14px); max-height: 0; margin-top: 0; margin-bottom: 0; pointer-events: none; } &.is-collapsed .faq-extra-item { margin-bottom: 0 !important; } &.is-expanded .faq-extra-item .item { opacity: 1; transform: translateY(0); max-height: 1000px; pointer-events: auto; } } .faq-toggle-button { display: inline-flex !important; align-items: center; gap: 0.45rem; margin: 0 auto; padding: 0.5rem 2rem; border: 0; background: transparent; color: var(--c-pri); font: inherit; font-weight: 500 !important; cursor: pointer; &:after { content: ''; aspect-ratio: 1; width: 0.75rem; height: 0.75rem; background: currentColor; mask-image: var(--ico-arrow-simple) !important; -webkit-mask-image: var(--ico-arrow-simple) !important; mask-position: center !important; -webkit-mask-position: center !important; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: contain; -webkit-mask-size: contain; rotate: 90deg; } } .faq-toggle-icon { display: inline-flex; width: 1rem; height: 1rem; transition: transform var(--dur-slow) var(--ease-standard); } .faq-toggle-button[aria-expanded="true"]:after { transform: rotate(180deg); } } main > div.page-variant { > section.layout-testimonial-slider > .section-inner { .splide__track .splide__list .splide__slide .slide-inner { flex-flow: column; img { flex-basis: 100%; width: 100%; min-height: 339px; } figure { padding: 1rem 0 0 !important; blockquote { margin-top: var(--gap-l); margin-right: auto; margin-left: 0; } } } .splide__arrows { position: relative; bottom: 1rem; width: 100%; margin: 0 auto 0 0; padding: 0; } } section.layout-testimonial-slider .testimonial-slider-slide blockquote { margin-top: 1rem !important; } > section.layout-startoff-grid > .section-inner { .cols { gap: 1rem; .intro { margin-right: 0; margin-bottom: 0; .wt-bt.mob-only { display: flex !important; width: fit-content !important; max-width: 100% !important; min-height: 2.75rem; margin: 1rem auto 0 auto; &:after { display: none !important; content: none !important; } } } .img-wrapper { margin-top: 1.5rem !important; } .tiles-list > * { border-top: 0; border-left: 0; border-bottom: 1px solid var(--c-grey); } .tiles-list > *:last-child { border-bottom: 0; .tile::after { top: calc(100% - var(--pad-m)); } } .tiles-list-wrapper { ul { grid-template-columns: 1fr; p { align-self: end; width: 65vw; max-width: 100%; } } li { min-height: 12rem; border: none !important; &:after , &:before { display: none; content: none; } } li + li:before { content: ''; display: block; width: auto !important; inset: 0 0.75rem auto 0.75rem !important; } } } } > section.layout-accordion-grid > .section-inner .cols { grid-template-columns: 1fr; row-gap: 0 !important; } > section.layout-keylinks-grid > .section-inner { .main-text { max-width: 70vw; margin: auto; } .cols ul li .box { padding: 0; padding-top: var(--pad-s); } } > section.layout-posts-carousel > .section-inner-carousel { .splide__slide { width: calc(100% - 4rem) !important; max-width: 420px; margin-right: 0.75rem !important; article { .meta, h3, .teaser { margin-inline: 1rem; } h3 { height: 5.5rem; } } } .main-link-wrapper { order: 10; margin-right: 1.5rem; margin-left: 1.5rem; } .splide__arrows { margin-left: 1.5rem; justify-content: flex-end; } .splide__track { margin-inline: 1.5rem; } } > section.layout-flipcards-grid > .section-inner :is(.cols, .flipcards-mobile-slider) { .back-content { padding: 2rem 2rem 4.75rem 2rem; } } > section.layout-hero > .section-inner { height: 900px; gap: 2rem; .shortcut-box { width: calc(100% - 2rem); bottom: -17rem; } header p { max-width: 360px; margin-top: 1rem; font-size: 1.5rem; line-height: 1.5rem; font-weight: var(--fw-bold); } } > section:first-child > .section-inner { padding-top: calc(5rem + var(--wi-nav-height-mobile)) !important; } > section.layout-claims-scroller > .section-inner { .box-inner { padding: var(--pad-s); } .box-content { grid-template-columns: 1fr auto; gap: var(--pad-xs); } .number, .claim { grid-column: 1 / 2; } .box-content > a { grid-column: 2 / 3; grid-row: 1 / 3; align-self: center; } } > section.layout-event-teasers { > .section-inner { padding: var(--pad-ctr-l) 1rem; } > .section-inner > header { margin-bottom: var(--pad-ctr-m); .headline { font-size: clamp(3.25rem, 12vw, 4.75rem); } .subhead { font-size: clamp(1.5rem, 6vw, 2.1rem); } } aside img { min-height: 220px; } .main { padding: 1rem; } .main header h3 { font-size: clamp(1.8rem, 8vw, 2.5rem) !important; } .wi-bt { min-height: 3rem; } } } #pageHeader nav { padding: var(--pad-s); #logo-wrapper { height: 82px; } } .sticky-wrapper.sticky #pageHeader nav #logo-wrapper { height: 100%; } main > section > .section-inner , #pageFooter { padding: 2rem 1rem !important; } main > .page-variant > section > .section-inner { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } main > div.page-variant > section > .section-inner { padding-top: var(--section-spacing-compact); padding-bottom: var(--section-spacing-compact); gap: 1rem !important; } #pageFooter { .footer-columns { gap: 3rem; } .column { width: 100%; padding-left: 0 !important; padding-right: 0 !important; .column:nth-child(1) img { width: 260px; } .wp-disclaimer { margin-top: 1.5rem; margin-bottom: 1rem; } .idw-disclaimer { margin-top: 1.5rem; margin-bottom: 1rem; } } .footer-legal { margin-top: 2rem; } } } @media (max-width: 603px) and (orientation: landscape) { main > div.page-variant > section.layout-hero > .section-inner { height: 1150px; } #pageHeader nav #logo-wrapper { height: 82px; } } @media (min-width: 604px) { .layout-accordion-grid .faq-toggle-button { display: none !important; } } @media (max-width: 390px) { #pageFooter .columns { width: 100%; margin-right: auto; margin-left: auto; } } /* ========================================================= WPG PROFILE PAGE nutzt globale Theme-Variablen ========================================================= */ .view-wpg-profile { --wpg-card-radius: var(--rad-s); --wpg-card-shadow: 0 14px 2rem rgba(0, 0, 0, 0.08); --wpg-card-border: 1px solid rgba(0, 0, 0, 0.06); background: var(--c-lgrey); } /* Content-Fläche ohne Sidebar/Header anzufassen */ .view-wpg-profile .exwi-portal-content { width: auto; max-width: none; height: 100%; padding: 2rem 2rem 5rem 3rem; overflow-y: auto; box-sizing: border-box; } /* Seitenkopf */ .view-wpg-profile .portal-page-header { margin: 0 0 1.5rem; } .view-wpg-profile .portal-page-header h2 { margin: 0 0 1rem; color: var(--c-black); font-family: var(--font-hl); font-size: clamp(1.8rem, 2.2vw, 2.25rem) !important; font-weight: var(--fw-bold); line-height: 1; } .view-wpg-profile .portal-page-header p { width: auto; max-width: 48rem; margin: 0; color: var(--c-grey-profile); font-family: var(--font-def); font-size: var(--fs-body); line-height: var(--lh-body); } /* Doppel-Wrapper entschärfen */ .view-wpg-profile .wpg-profile-main-card > .wpg-profile-details-part, .view-wpg-profile .wpg-profile-side-card > .wpg-profile-contact-part, .view-wpg-profile .wpg-profile-side-card > .wpg-profile-responsible-part { width: 100%; } /* Responsive */ @media (max-width: 1180px) { .view-wpg-profile .exwi-portal-content { padding: 1.75rem 1.5rem 4rem; } .view-wpg-profile .parts { grid-template-columns: 1fr; } } @keyframes alertFadeout { 0% { display: block; opacity: 1; } 99.999% { display: block; opacity: 0; } 100% { display: none; opacity: 0; } } @media ( max-width: 767px ) { #exwi-portal-shell { .exwi-portal-content { > .parts { &.parts-fullwidth { position: static; height: auto; } &> .part-wrapper.wpg-profile-internship-offer-part { .part { details { .flag-content { .flag-content-inner { form { .form-inner { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 1rem !important; .field-gallery { .input-field { textarea { min-height: round( up, calc( 3 * 1.2rem + 2 * 0.75rem + 2px ), 1px ) !important; resize: none !important; } .grid-preview { grid-template-columns: 1fr 1fr; gap: 0.5rem; grid-template-areas: "main main" "main main" "sec bt "; & .offer-thumb-wrapper:nth-child(3) { display: none; } .showall { &:before { width: clamp( 2.25rem, 7.5vw, 3.5rem ); height: clamp( 2.25rem, 7.5vw, 3.5rem ); } } } } } .bts button { width: 100%; } .bts { .alert-save { display: none; &.show { display: block; animation: alertFadeout 5s linear; } } .alert-save-successs { color: #2D9F6B; } .alert-save-fail { color: #A90015; } } } } } } } } } &> .part-wrapper.kanban-part-wrapper { position: static !important; inset: auto !important; display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto 1fr !important; gap: 1rem !important; height: 100% !important; padding: 0 !important; &> menu#tools { height: 2.75rem; gap: 0.75rem; li { flex-basis: 100%; &:has( > .toggle ) , .toggle { display: none !important; pointer-events: none !important; } &:has( > .appointments-filters-wrapper ) { flex-basis: 2.75rem; flex-shrink: 0; } &:has( #appointments-search ) { flex-shrink: 1; flex-grow: 0; } #appointments-search { width: 100%; } .appointments-filters-wrapper { min-width: 0 !important; width: 2.75rem; height: 2.75rem; padding: 0 !important; label.filters-opener { min-width: 0 !important; font-size: 0.0001px !important; width: 2.75rem; height: 2.75rem; padding: 0; } #appointments-filters { position: fixed; inset: auto 1rem calc( 4.625rem + 1rem ) 1rem; max-height: calc( 100vh - var(--wi-nav-height-min) - 1rem - 4.625rem - 1rem ); .appointments-filters-inner { height: 100%; display: grid; grid-auto-columns: 100%; grid-auto-rows: auto auto; &> div:first-child { padding-bottom: 1rem; } &> div + div { margin: 0; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 1rem; overflow: auto; } fieldset > ul { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-start; li { flex-basis: auto !important; label { padding: 0.375rem 0.25rem 0.375rem 1.5lh; } } } } } } } } &> #appointments-kanban { position: static; overflow: hidden; height: 100%; &> .kanban-stages { position: static; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; width: 100% !important; min-width: 100%; max-width: 100%; height: 100%; overflow-y: auto !important; &> section.stage-col { height: auto !important; max-height: none !important; overflow: unset !important; .stage-col-inner { display: block; overflow: hidden; position: static; height: auto; max-height: 100%; border-radius: 0; background: none; header { display: none !important; } table.itms { max-height: none !important; overflow: unset !important; background: none !important; tbody { overflow: unset !important; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 1rem; padding: 0 !important; &:before , &:after { content: none !important; display: none !important; } tr { display: flex; flex-direction: row; flex-wrap: wrap; padding: 1rem 1.25rem !important; border: 1px solid var(--c-grey) !important; gap: 0.5rem 0.75rem; background-color: var(--c-white) !important; &:before { display: none !important; content: none !important; } td.person { flex-basis: 100%; min-width: 100%; max-width: 100%; a { padding: 0 !important; gap: 0.75rem; .pfp { width: 2.5rem; height: 2.5rem; img { width: 2.5rem; height: 2.5rem; display: flex; justify-content: center; align-items: center; } } hgroup { * , h4 { font-size: 1rem !important; font-weight: 700 !important; } } } } td.wish { grid-column: auto; padding-left: 0; padding-right: 0; .cell-inner { .txtpill { min-height: 1.5rem; padding: 0 0.75rem; & , & * { font-size: 1rem !important; } } } } td.status-type { --type-bc: #f2f2f2; --type-fc: var(--c-dgrey); grid-column: auto; display: block !important; width: fit-content; padding: 0 !important; &[data-value="1"] { --type-bc: #FDF4E6; --type-fc: #EB9201; } &[data-value="2"] { --type-bc: #EAEDF2; --type-fc: var(--c-blue); } &[data-value="3"] { --type-bc: #EAF5F0; --type-fc: #2D9F6B; } .cell-inner { padding-top: 0.25rem; .txtpill { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; min-height: 1.5rem; padding: 0 0.75rem; border: 1px solid transparent; border-radius: var(--rad-inf); background-color: var(--type-bc); font-size: 1rem; font-weight: 500; line-height: 100%; color: var(--type-fc); } } } td.files { padding: 0 !important; flex-basis: 100%; min-width: 100%; max-width: 100%; .cell-inner { display: flex; flex-direction: row; flex-wrap: wrap; padding: 0; gap: 0.5rem 0.75rem; a { flex-basis: auto; width: fit-content; max-width: 100%; padding: 0.5rem 0.75rem; } } } td.actions { flex-basis: 100%; min-width: 100%; max-width: 100%; padding: 0; .cell-inner { grid-auto-rows: 2.5rem; padding-top: 0.5rem; button { min-height: 2.5rem; } } } } } } } } } } } } } } #pageFooter { margin-left: 0; .footer-brand { .footer-logo { img { width: auto !important; height: 5rem !important; } .talents-only { padding-left: 1rem; &:before { height: 4rem; } .talents-mark { padding-left: 1rem; padding-top: 30%; padding-top: 3.25cqh; svg { height: 1.75rem; width: auto; max-width: 100%; } } } } .social-list { max-width: 14rem; flex-wrap: wrap; } } .footer-partner { * { text-align: left; } } } } @media ( max-width: 600px ) { hr.mobonly { display: block !important; } .bts-list { gap: 0.75rem; &> * { min-width: 100%; width: 100%; max-width: 100%; } } body.exwi-portal { --wi-nav-height-min: 4.5rem; header { #pageHeader { nav { & .talents-mark.portal-only { padding-top: 0.8rem; } } } #nav-tree-wrapper { display: none; } } } #exwi-portal-shell { --wi-nav-height-min: 4.5rem; top: var(--wi-nav-height-min) !important; max-height: calc( 100vh - var(--wi-nav-height-min) ); .wt-bt-s { flex-basis: 100%; width: 100%; } .sidenav-outer { #sidenav { flex-basis: 80%; &> nav > a { flex-basis: 25% !important; gap: 0.25rem !important; .wt-icon { -webkit-mask-size: auto 1.25rem; mask-size: auto 1.25rem; } &[href*="material"] , &[href*="einstellung"] { display: none !important; } .txt { height: auto !important; margin-left: 0; margin-right: 0; } } } .wpg-switch-outer { width: 0 !important; border: 0 !important; position: absolute !important; top: 100% !important; .wpg-switch { width: 0 !important; border: 0 !important; /* position: absolute !important; */ /* top: 100% !important; */ &> .wt-icon , &> .txt { display: none; } } } #nav-mobile-more { display: block; flex-basis: 20%; &> label { flex-basis: calc( 100 / 7 * 1% ) !important; position: relative; display: flex; justify-content: flex-start; flex-direction: column; align-items: center; gap: 0.25rem; width: auto !important; min-height: 0; margin: 0; padding: 0; border: none; font-size: clamp( 0.75rem, 1.4vw , var(--trurem) ); font-weight: 500; line-height: 120%; color: var(--c-dgrey); cursor: pointer; .for-closed { display: inline !important; } .for-opened { display: none !important; } .wt-icon { min-width: 0; min-height: 0; width: 1.5rem; height: 1.5rem; mask-size: auto 80%; -webkit-mask-size: auto 80%; } } #nav-mobile-more-inner { z-index: 2; display: block; position: fixed; inset: auto 0 4.625rem 0; padding: 1rem 1rem 0 1rem; border-radius: 1rem 1rem 0 0; background: var(--c-white); box-shadow: var(--shadow-modal); clip-path: xywh( 0 -5rem 100% calc( 100% + 5rem)); transform: translateY( calc( 100% + 4.625rem ) ); transition: transform 0.3s ease-in-out; #nav-mobile-more-hl { padding: 1rem 0.5rem; font-size: var(--font-hl); font-weight: 700; font-size: 1.5rem; line-height: 100%; color: var(--c-black); } ul { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 1px; li { position: relative; &> * { display: grid; grid-template-columns: 2.75rem auto; grid-template-rows: 1fr 1fr; gap: 0.5rem; padding: 1rem 1.75rem 1rem 0.5rem; &> .wt-pre-icon { align-self: center; grid-row: 1 / 3; grid-column: 1 / 1; aspect-ratio: 1; display: flex; justify-content: center; align-items: center; border-radius: 0.5rem; background-color: var(--c-grey); &:before { margin: 0 !important; background-color: var(--c-dgrey); aspect-ratio: 1; width: 1.25rem; height: 1.25rem; -webkit-mask-size: contain; mask-size: contain; } } &> .wt-suff-icon { position: absolute; inset: 0 0.5rem 0 auto; display: block; width: 1rem; height: 100%; &:after { width: 100%; height: 100%; margin: 0 !important; background-color: var(--c-grey); -webkit-mask-size: contain; mask-size: contain; } } &> .txt { align-self: end; grid-row: 1 / 2; grid-column: 2 / 2; width: auto !important; padding-left: 0.25rem; font-size: var(--font-hl); font-weight: 600; font-size: var(--trurem); line-height: 100%; } &> p { align-self: start; grid-row: 2 / 2; grid-column: 2 / 2; width: auto !important; padding-left: 0.25rem; font-size: calc(1rem - 0.125rem); font-weight: 400; line-height: 120%; color: var(--c-grey-profile); } } &> .wpg-switch-surrogate { p { font-weight: 500; .location { font-style: italic; font-weight: 400; line-height: inherit !important; } } } &> .logout { .wt-pre-icon:before { background-color: var( --c-red ); } .txt { color: var( --c-red ); } } } li + li { &:before { content: ''; position: absolute; inset: auto 0 100% 0; height: 1px; background-color: var(--c-grey); } } } } input#nav-mobile-more-toggle { display: none !important; } input#nav-mobile-more-toggle:checked + label { .for-closed { display: none !important; } .for-opened { display: inline !important; } } input#nav-mobile-more-toggle:checked + label + #nav-mobile-more-inner { transform: translateY(0) !important; } } } .exwi-portal-content { padding: 1.5rem 1rem 1rem 1rem; .portal-page-header { h2 { font-size: 1.5rem !important; } p { max-width: 480px; } } &> .parts { grid-template-columns: 100% !important; &> .part-wrapper { padding: 1rem 1.25rem; row-gap: 1rem; box-shadow: var(--shadow-modal); .title-wrapper { padding-bottom: 1rem !important; } &> .wpg-profile-details-part { .bt-edit { width: 1.75rem; height: 1.75rem; border: 1px solid var(--c-pri); border-radius: var(--rad-inf); &:after { margin: 0 !important; width: 100% !important; height: 100%; -webkit-mask-size: 1rem; mask-size: 1rem; } .txt { display: none; } } .profile-data { gap: 1rem; &> div { padding-left: 0.25rem; padding-right: 0.25rem; } &> div:nth-of-type(1) { gap: 0.75rem; .pfp { width: 4rem; height: 4rem; &.no-pfp { border-radius: 0.75rem !important; } img { width: 4rem; height: 4rem; border-radius: 0.75rem; } } } &> div:nth-of-type(3), &> div:nth-of-type(4) { ul { flex-direction: column; gap: 1rem } } } } &> .wpg-profile-responsible-part { position: relative; .flags { margin: 0; .title-wrapper { padding-right: 3.5rem; } .flag { .switch { margin: 0; position: absolute; top: calc( var(--trurem) / 2 ); right: 0; transform: translateY( -50% ); } } } } } &> .part-wrapper.wpg-profile-internship-offer-part { .part { details { .flag-content { .flag-content-inner { form { .form-inner { .field-gallery { .input-field { .offer-thumb-wrapper { .mark-recommend { font-size: var(--fz-tt); } } } } } } } } } } } } .part-wrapper.recruitingsupport-part { img { max-width: 100%; } .wt-bt { width: 100% !important; } } #popups { &> .popup { inset: var(--wi-nav-height-min) 0 0 0; transform: translateY( 101% ) !important; transition: inset var(--wi-nav-shrink-speed) linear var(--wi-nav-shrink-delay), transform 0.5s ease-in-out 0s, opacity 0.5s linear 0s; &.show { transform: translateY( 0 ) !important; } &> .inner { display: grid; grid-template-columns: 100%; grid-template-rows: auto 1fr auto; overflow: visible !important; padding: 0 !important; border-radius: 1rem 1rem 0 0 !important; transform: none !important; inset: auto 0 0 0 !important; &:has( > .header + hr ) { grid-template-rows: auto 1px 1fr auto; } &:has( > .content + hr ) { grid-template-rows: auto 1fr 1px auto; } &:has( > .header + hr ):has( > .content + hr ) { grid-template-rows: auto 1fr 1px auto; } &> .header { padding: 0.75rem !important; &> button.close { width: 2.625rem; height: 2.625rem; border-radius: 0.5rem; background: var(--c-dmute); color: var(--c-dgrey); .wt-icon { padding: 0; mask-size: auto 1rem; -webkit-mask-size: auto 1rem; } } &> .slidedown { display: flex !important; } } &> .content { padding: 0 1rem !important; } &> hr { margin: 0 !important; } &> .header + hr { display: none; } &> .footer { padding: 1rem 1.5rem !important; justify-content: stretch; gap: 0.5rem; button { width: 100%; max-width: 100%; } } } } &> .wpg-edit-gallery-popup { &> .inner { .grid-full { padding-top: 0 !important; } } } &> #wpg-edit-profile-popup { &> .inner { .input-fields-large { button.profile-image { flex-basis: 8rem !important; width: 8rem !important; height: 8rem !important; &> p { bottom: 1px; line-height: normal; } } } .content > * > .row { flex-direction: column; justify-content: flex-start; align-items: stretch; } } } &> #wpg-active-feedback-popup { form.feedbacks-wrapper { padding-bottom: 1rem; } } &> #application-details-popup { footer { padding-bottom: 1rem !important; &> button { min-width: 25vw; } } } } } &.view-wpg-profile { .wpg-profile-details-part , .wpg-profile-contact-part , .wpg-profile-side-card { .wpg-profile-contact-part , .wpg-profile-responsible-part { padding: 1.35rem; } } } } } /* ========================================================= KLARTEXT ========================================================= */ .layout-klartext { justify-content: center; background-color: var(--c-white); color: var(--c-black); } .layout-klartext .section-inner { width: min(100%, 1260px); margin: 0 auto; } .layout-klartext .klartext-header { width: min(100%, 1080px); margin-bottom: clamp(2rem, 4.15vw, 5rem); } .layout-klartext .klartext-heads { display: flex; gap: clamp(1.5rem, 2.5vw, 3rem); margin-bottom: 2rem; } .layout-klartext .klartext-heads .headline { font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(3.5rem, 5.73vw, 110px); font-weight: 700; line-height: 1; color: var(--c-black); } .layout-klartext .klartext-heads .subhead { max-width: 560px; font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(30px, 2.5vw, 3rem); font-weight: 700; line-height: 1.15; color: var(--c-black); } .layout-klartext .intro { max-width: 720px; font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(1rem, 1vw, 17px); font-weight: 500; line-height: 1.4; color: var(--c-black); } .layout-klartext .klartext-comparison { width: 100%; } .layout-klartext .comparison-labels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(2rem, 6rem) minmax(0, 1fr); gap: 1.5rem; padding: 0 2.5rem 1rem; color: #787878; font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(1rem, 1.05vw, 1.25rem); font-weight: 600; line-height: 1; } .layout-klartext .comparison-labels span:last-child { grid-column: 3; } .layout-klartext .comparison-rows { margin: 0; padding: 0; list-style: none; background-color: var(--c-white); border: 1px solid var(--c-grey); border-radius: var(--rad-m); } .layout-klartext .comparison-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(2rem, 6rem) minmax(0, 1fr); gap: 1.5rem; align-items: center; min-height: 133px; padding: 1.75rem 2.5rem; border-top: 1px solid var(--c-grey); } .layout-klartext .comparison-row:first-child { border-top: 0; } .layout-klartext .comparison-cliche, .layout-klartext .comparison-reality { margin: 0; font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(1.25rem, 1.25vw, 1.5rem); line-height: 1.4; color: var(--c-black); } .layout-klartext .klartext-strike { position: relative; display: inline-block; color: inherit; transition: color var(--klartext-strike-duration, 700ms) ease; } .layout-klartext .klartext-strike::after { content: ""; position: absolute; top: 52%; left: 0; width: 100%; height: var(--klartext-strike-width, 3px); border-radius: 999px; background-color: var(--klartext-strike-color, var(--c-black)); transform: scaleX(0); transform-origin: left center; transition: transform var(--klartext-strike-duration, 700ms) ease; pointer-events: none; } .layout-klartext .klartext-strike.is-struck { color: var(--c-grey-profile); } .layout-klartext .klartext-strike.is-struck::after { transform: scaleX(1); } .layout-klartext .comparison-cliche { font-weight: 500; } .layout-klartext .comparison-reality { max-width: 490px; font-weight: 600; } .layout-klartext .comparison-arrow { position: relative; display: block; width: 2rem; height: 2rem; justify-self: center; background-color: var(--c-pri); border-radius: 100%; } .layout-klartext .comparison-arrow::after { content: ""; position: absolute; inset: 10px; background-color: var(--c-white); mask-image: var(--icon-arrow-small); mask-position: center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--icon-arrow-small); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } @media (max-width: 900px) { .layout-klartext .klartext-heads, .layout-klartext .comparison-labels, .layout-klartext .comparison-row { grid-template-columns: 1fr; } .layout-klartext .klartext-heads { display: grid; align-items: start; } .layout-klartext .comparison-labels { display: none; } .layout-klartext .comparison-row { gap: 18px; min-height: 0; padding: 1.75rem 0; } .layout-klartext .comparison-cliche::before, .layout-klartext .comparison-reality::before { display: block; margin-bottom: 0.5rem; font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; color: #787878; content: attr(data-label); } .layout-klartext .comparison-arrow { justify-self: start; transform: rotate(90deg); } .layout-klartext .comparison-reality { max-width: none; } } /* ========================================================= RELEVANZ ========================================================= */ .layout-relevanz { justify-content: center; background-color: #f9f9f9; color: var(--c-black); } .layout-relevanz .section-inner { width: min(100%, 1260px); margin: 0 auto; } .layout-relevanz .relevanz-header { width: min(100%, 1080px); margin-bottom: clamp(2rem, 4.15vw, 5rem); } .layout-relevanz .relevanz-heads { display: flex; gap: clamp(1.5rem, 2.5vw, 3rem); margin-bottom: 2rem; } .layout-relevanz .relevanz-heads .headline { font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(3.5rem, 5.73vw, 110px); font-weight: 700; line-height: 1; color: var(--c-black); } .layout-relevanz .relevanz-heads .subhead { max-width: 430px; font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(30px, 2.5vw, 3rem); font-weight: 700; line-height: 1.15; color: var(--c-black); } .layout-relevanz .intro { max-width: 720px; font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(1rem, 1vw, 17px); font-weight: 500; line-height: 1.4; color: var(--c-dgrey); } .layout-relevanz .relevanz-cards { --relevanz-sticky-top: clamp(5.5rem, 7.5vw, 8.25rem); display: block; margin: 0; padding: 0 0 clamp(2.5rem, 4.15vw, 50px); list-style: none; } .layout-relevanz .relevanz-cards > li { position: sticky; top: calc(var(--relevanz-sticky-top) + (var(--relevanz-stack-index, 0) * 1rem)); z-index: var(--relevanz-stack-z, 1); margin-bottom: clamp(34px, 2.5vw, 3rem); } .layout-relevanz .relevanz-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 556px); gap: clamp(2rem, 4.8vw, 4rem); align-items: center; min-height: 354px; padding: 2rem 30px 2rem 3rem; border: 1px solid var(--c-grey); border-radius: 1.5rem; background-color: var(--c-white); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08); box-sizing: border-box; transform: translateZ(0); } .layout-relevanz .card-content { min-width: 0; } .layout-relevanz .eyebrow { width: auto; margin: 0 0 0.75rem; color: var(--c-pri); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(15px, 1vw, 17px); font-weight: 600; line-height: 1; } .layout-relevanz .relevanz-card h3 { max-width: 560px; margin: 0 0 clamp(1.5rem, 1.55vw, 30px); color: var(--c-black); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(30px, 2.08vw, 2.5rem) !important; font-weight: 700; line-height: 1.3; } .layout-relevanz .text { width: auto; max-width: 500px; margin: 0; color: var(--c-grey-profile); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(1rem, 1vw, 17px); font-weight: 400; line-height: 1.35; } .layout-relevanz .card-image { margin: 0; min-width: 0; } .layout-relevanz .card-image img { display: block; width: 100%; height: auto; aspect-ratio: 556 / 290; object-fit: cover; border-radius: 1.25rem; } .layout-relevanz .relevanz-cta { position: relative; display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; margin-top: 2rem; padding: 0 2.6rem 0 2rem; border-radius: 50px; background-color: var(--c-pri); color: var(--c-white); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: 17px; font-weight: 600; line-height: 1; text-decoration: none; } .layout-relevanz .relevanz-cta::after { content: ""; position: absolute; right: 1.2rem; top: 50%; width: 0.75rem; height: 0.75rem; background-color: currentColor; transform: translateY(-50%); mask-image: var(--icon-arrow-small); mask-position: center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--icon-arrow-small); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } .layout-relevanz .relevanz-cta:is(:hover, :focus-visible) { background-color: var(--c-black); color: var(--c-white); } @media (max-width: 900px) { .layout-relevanz .relevanz-heads { display: grid; align-items: start; } .layout-relevanz .relevanz-cards { display: grid; gap: 1.5rem; padding-bottom: 0; } .layout-relevanz .relevanz-cards > li { position: relative; top: auto; z-index: auto; margin-bottom: 0; } .layout-relevanz .relevanz-card { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem; } .layout-relevanz .card-image { order: -1; } .layout-relevanz .card-image img { aspect-ratio: 16 / 10; } .layout-relevanz .relevanz-cta { margin-top: 1.75rem; } } @media (prefers-reduced-motion: reduce) { .layout-relevanz .relevanz-cards { display: grid; gap: clamp(34px, 2.5vw, 3rem); padding-bottom: 0; } .layout-relevanz .relevanz-cards > li { position: relative; top: auto; z-index: auto; margin-bottom: 0; } } /* ========================================================= IM KERN ========================================================= */ .layout-im-kern { justify-content: center; background-color: var(--c-white); color: var(--c-black); } .layout-im-kern .section-inner { width: min(100%, 1260px); margin: 0 auto; } .layout-im-kern .im-kern-header { width: min(100%, 1140px); margin-bottom: clamp(2rem, 2.7vw, 3.25rem); } .layout-im-kern .im-kern-heads { display: flex; gap: clamp(1.5rem, 2.6vw, 50px); margin-bottom: 2rem; } .layout-im-kern .im-kern-heads .headline { font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(3.5rem, 5.73vw, 110px); font-weight: 700; line-height: 1; color: var(--c-black); } .layout-im-kern .im-kern-heads .subhead { max-width: 640px; font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(30px, 2.5vw, 3rem); font-weight: 700; line-height: 1.15; color: var(--c-black); } .layout-im-kern .intro { max-width: 720px; margin: 0; font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(1rem, 1vw, 17px); font-weight: 500; line-height: 1.4; color: var(--c-dgrey); } .layout-im-kern .im-kern-accordion { border-top: 1px solid var(--c-grey); } .layout-im-kern .im-kern-item { border-bottom: 1px solid var(--c-grey); } .layout-im-kern .im-kern-trigger { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto 4rem; gap: 1.5rem; align-items: center; min-height: 8rem; padding: 0; cursor: pointer; list-style: none; } .layout-im-kern .im-kern-trigger::-webkit-details-marker { display: none; } .layout-im-kern .item-number { align-self: start; padding-top: 2.75rem; color: var(--c-grey-profile); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(18px, 1.25vw, 1.5rem); font-weight: 400; line-height: 1; } .layout-im-kern .item-title { color: var(--c-black); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(30px, 2.5vw, 3rem); font-weight: 700; line-height: 1; } .layout-im-kern .item-tag { display: inline-flex; align-items: center; justify-content: center; min-height: 29px; padding: 0 1rem; border: 1px solid var(--c-grey); border-radius: 50px; color: #787878; background-color: var(--c-white); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(14px, 1vw, 17px); font-weight: 500; line-height: 1; white-space: nowrap; } .layout-im-kern .item-toggle { position: relative; display: block; width: 4rem; height: 4rem; border-radius: 50%; background-color: #e2e2e2; transition: background-color var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); } .layout-im-kern .item-toggle::before, .layout-im-kern .item-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1.5rem; height: 3px; border-radius: 3px; background-color: var(--c-dgrey); transform: translate(-50%, -50%); transition: background-color var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); } .layout-im-kern .im-kern-item.is-expanded .item-toggle { background-color: var(--c-pri); } .layout-im-kern .im-kern-item.is-expanded .item-toggle::before { background-color: var(--c-white); transform: translate(-50%, -50%) rotate(45deg); } .layout-im-kern .im-kern-item.is-expanded .item-toggle::after { background-color: var(--c-white); transform: translate(-50%, -50%) rotate(-45deg); } .layout-im-kern .accordion-content { height: 0; overflow: hidden; transition: height var(--dur-slow) var(--ease-standard); } .layout-im-kern .accordion-content-inner { display: grid; grid-template-columns: 3rem minmax(0, 450px) minmax(7.5rem, 1fr); gap: 1.5rem; padding: 0 0 2.25rem; } .layout-im-kern .item-text { grid-column: 2; width: auto; margin: 0; color: var(--c-grey-profile); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(1rem, 1vw, 17px); font-weight: 400; line-height: 1.35; } .layout-im-kern .item-link { position: relative; grid-column: 3; align-self: end; justify-self: end; padding-right: 1.2rem; color: var(--c-pri); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(1rem, 1vw, 17px); font-weight: 600; line-height: 1; text-decoration: none; } .layout-im-kern .item-link::after { content: ""; position: absolute; right: 0; top: 50%; width: 10px; height: 10px; background-color: currentColor; transform: translateY(-50%); mask-image: var(--icon-arrow-small); mask-position: center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--icon-arrow-small); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } .layout-im-kern .im-kern-more { margin-top: clamp(4rem, 5.2vw, 6.25rem); border: 1px solid var(--c-grey); border-radius: 1.25rem; background-color: var(--c-white); padding: 0; } .layout-im-kern .im-kern-more h3 { margin: 0 0 clamp(2rem, 2.5vw, 2rem); color: var(--c-black); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(30px, 2.08vw, 2.5rem) !important; font-weight: 700; line-height: 1; padding: 2.5vw 2rem 0; } .layout-im-kern .more-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } .layout-im-kern .more-list > li { min-width: 0; padding: 1rem 2rem 2rem; border-left: 1px solid var(--c-grey); } .layout-im-kern .more-list > li:first-child { border-left: 0; } .layout-im-kern .more-item { min-width: 0; } .layout-im-kern .more-icon { display: grid; width: 3rem; height: 3rem; margin-bottom: 1rem; border-radius: 0.5rem; background-color: rgba(211, 37, 102, 0.1); place-items: center; } .layout-im-kern .more-icon img { display: block; width: 1.5rem; height: 1.5rem; object-fit: contain; border-radius: 0; } .layout-im-kern .more-item h4 { margin: 0 0 18px; color: var(--c-black); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(1.25rem, 1.25vw, 1.5rem) !important; font-weight: 600; line-height: 1.375; } .layout-im-kern .more-item p { width: auto; margin: 0; color: var(--c-grey-profile); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(1rem, 1vw, 17px); font-weight: 400; line-height: 1.35; } @media (max-width: 1000px) { .layout-im-kern .im-kern-heads { display: grid; align-items: start; } .layout-im-kern .im-kern-trigger { grid-template-columns: 2.5rem minmax(0, 1fr) 3.25rem; gap: 1rem; min-height: 6.5rem; } .layout-im-kern .item-tag { grid-column: 2; justify-self: start; order: 3; } .layout-im-kern .item-toggle { grid-column: 3; grid-row: 1 / span 2; width: 3.25rem; height: 3.25rem; } .layout-im-kern .accordion-content-inner { grid-template-columns: 2.5rem minmax(0, 1fr); } .layout-im-kern .item-link { grid-column: 2; justify-self: start; margin-top: 18px; } .layout-im-kern .more-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 0; } .layout-im-kern .more-list > li:nth-child(odd) { padding-left: 0; border-left: 0; } } @media (max-width: 603px) { .layout-im-kern .im-kern-trigger { grid-template-columns: 1fr 3rem; padding: 1.5rem 0; } .layout-im-kern .item-number { grid-column: 1 / -1; padding-top: 0; } .layout-im-kern .item-title, .layout-im-kern .item-tag { grid-column: 1; } .layout-im-kern .item-toggle { grid-column: 2; grid-row: 2 / span 2; width: 3rem; height: 3rem; } .layout-im-kern .accordion-content-inner { grid-template-columns: 1fr; padding-bottom: 1.75rem; } .layout-im-kern .item-text, .layout-im-kern .item-link { grid-column: 1; } .layout-im-kern .more-list { grid-template-columns: 1fr; } .layout-im-kern .more-list > li, .layout-im-kern .more-list > li:nth-child(odd) { padding: 1.5rem 0 0; border-left: 0; border-top: 1px solid var(--c-grey); } .layout-im-kern .more-list > li:first-child { padding-top: 0; border-top: 0; } } /* ========================================================= MENSCHEN ========================================================= */ .layout-menschen { overflow: hidden; background-color: #f9f9f9; } .layout-menschen .section-inner { width: min(1260px, calc(100vw - 3rem)); margin: 0 auto; } .layout-menschen .menschen-header { margin-bottom: clamp(34px, 2.5vw, 3rem); } .layout-menschen .menschen-heads { display: flex; gap: clamp(2rem, 3.75vw, 4.5rem); margin: 0 0 clamp(26px, 1.9vw, 2.25rem); } .layout-menschen .headline { margin: 0; color: var(--c-black); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(4rem, 5.72vw, 110px) !important; font-weight: 700; line-height: 1; } .layout-menschen .subhead { margin: 0 0 0.5rem; color: var(--c-black); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(2rem, 2.5vw, 3rem); font-weight: 700; line-height: 1.14; } .layout-menschen .intro { width: min(720px, 100%); margin: 0; color: var(--c-dgrey); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(1rem, 1vw, 17px); font-weight: 500; line-height: 1.42; } .layout-menschen .menschen-video-stage { display: grid; grid-template-columns: minmax(0, 691px) minmax(360px, 557px); gap: 0.75rem; align-items: stretch; } .layout-menschen .menschen-active-list { min-width: 0; } .layout-menschen .menschen-active-card { height: 100%; min-height: 483px; padding: 9px 9px 1.5rem; border-radius: 1.5rem; background-color: var(--c-white); } .layout-menschen .menschen-active-card[hidden] { display: none; } .layout-menschen .menschen-media, .layout-menschen .menschen-media-link, .layout-menschen .menschen-embed { position: relative; display: block; width: 100%; overflow: hidden; border-radius: 1.25rem; background-color: #d9d9d9; aspect-ratio: 673 / 373; } .layout-menschen .menschen-media img, .layout-menschen .menschen-media video, .layout-menschen .menschen-embed iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; } .layout-menschen .menschen-media::after, .layout-menschen .menschen-media-link::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-color: rgba(0, 0, 0, 0.08); } .layout-menschen .menschen-play, .layout-menschen .thumb-play { position: absolute; z-index: 2; display: grid; border: 0; border-radius: 50%; background-color: var(--c-pri); cursor: pointer; place-items: center; transition: opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); } .layout-menschen .menschen-play { top: 50%; left: 50%; width: clamp(4.75rem, 5.26vw, 101px); height: clamp(4.75rem, 5.26vw, 101px); transform: translate(-50%, -50%); } .layout-menschen .menschen-play.hide { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.92); } .layout-menschen .menschen-play span, .layout-menschen .thumb-play span { display: block; width: 0; height: 0; margin-left: 5px; border-top: 13px solid transparent; border-bottom: 13px solid transparent; border-left: 18px solid var(--c-white); } .layout-menschen .thumb-play span { margin-left: 3px; border-top-width: 0.5rem; border-bottom-width: 0.5rem; border-left-width: 0.75rem; } .layout-menschen .menschen-meta { padding: 1.25rem 1.5rem 0; } .layout-menschen .menschen-meta h3, .layout-menschen .thumb-title { margin: 0; color: var(--c-black); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-weight: 600; line-height: 1.22; } .layout-menschen .menschen-meta h3 { font-size: clamp(1.5rem, 1.25vw, 1.5rem) !important; } .layout-menschen .menschen-meta p, .layout-menschen .thumb-detail { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0; color: var(--c-dgrey); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(1rem, 1vw, 17px); font-weight: 500; line-height: 1.2; } .layout-menschen .menschen-thumbs { display: grid; max-height: 483px; gap: 0.75rem; min-width: 0; overflow-y: auto; padding-right: 14px; scrollbar-color: var(--c-dgrey) var(--c-grey); scrollbar-width: thin; } .layout-menschen .menschen-thumbs::-webkit-scrollbar { width: 6px; } .layout-menschen .menschen-thumbs::-webkit-scrollbar-track { border-radius: 999px; background-color: var(--c-grey); } .layout-menschen .menschen-thumbs::-webkit-scrollbar-thumb { border-radius: 999px; background-color: var(--c-dgrey); } .layout-menschen .menschen-thumb { display: grid; grid-template-columns: minmax(8.75rem, 240px) minmax(0, 1fr); gap: 1.5rem; align-items: center; width: 100%; min-height: 153px; padding: 9px 1.75rem 9px 9px; border: 0; border-radius: 1.5rem; background-color: var(--c-white); text-align: left; cursor: pointer; transition: box-shadow var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); } .layout-menschen .menschen-thumb:hover, .layout-menschen .menschen-thumb:focus-visible, .layout-menschen .menschen-thumb.is-active { box-shadow: 0 18px 45px rgba(0, 0, 0, 0.06); } .layout-menschen .menschen-thumb:focus-visible { outline: 0.125rem solid var(--c-pri); outline-offset: 3px; } .layout-menschen .thumb-media { position: relative; display: block; width: 100%; overflow: hidden; border-radius: 1.25rem; background-color: #d9d9d9; aspect-ratio: 16 / 9; } .layout-menschen .thumb-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .layout-menschen .thumb-media::after { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.08); } .layout-menschen .thumb-play { top: 50%; left: 50%; width: 4rem; height: 4rem; transform: translate(-50%, -50%); } .layout-menschen .thumb-copy { display: grid; min-width: 0; gap: 0.75rem; } .layout-menschen .thumb-title { font-size: clamp(18px, 1.04vw, 1.25rem); } .layout-menschen .thumb-detail { margin: 0; } @media (max-width: 1100px) { .layout-menschen .menschen-video-stage { grid-template-columns: 1fr; gap: 18px; } .layout-menschen .menschen-active-card { min-height: 0; } .layout-menschen .menschen-thumbs { grid-auto-flow: column; grid-auto-columns: minmax(360px, 1fr); max-height: none; overflow-x: auto; overflow-y: hidden; padding: 0 0 14px; } } @media (max-width: 760px) { .layout-menschen .menschen-heads { display: grid; gap: 14px; align-items: start; } .layout-menschen .subhead { margin-bottom: 0; } .layout-menschen .menschen-active-card { padding: 7px 7px 1.25rem; border-radius: 1.25rem; } .layout-menschen .menschen-media, .layout-menschen .menschen-media-link, .layout-menschen .menschen-embed { aspect-ratio: 16 / 10; border-radius: 1rem; } .layout-menschen .menschen-meta { padding: 18px 1rem 0; } .layout-menschen .menschen-thumbs { grid-auto-columns: minmax(280px, 88vw); } .layout-menschen .menschen-thumb { grid-template-columns: 7rem minmax(0, 1fr); gap: 14px; min-height: 7.25rem; padding: 7px 14px 7px 7px; border-radius: 18px; } .layout-menschen .thumb-media { border-radius: 14px; } .layout-menschen .thumb-play { width: 3rem; height: 3rem; } } @media (max-width: 430px) { .layout-menschen .section-inner { width: min(100% - 2rem, 1260px); } .layout-menschen .menschen-thumb { grid-template-columns: 6rem minmax(0, 1fr); } } /* ========================================================= IM WANDEL ========================================================= */ .layout-im-wandel { --wandel-progress: 0; --wandel-shift: 0px; --wandel-scroll-height: 100vh; display: block; height: var(--wandel-scroll-height); min-height: 100vh; overflow: visible; background-color: var(--c-white); color: var(--c-black); } .layout-im-wandel .section-inner { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; width: min(1260px, calc(100vw - 3rem)); min-height: 100vh; margin: 0 auto; padding: clamp(4.5rem, 6.25vw, 7.5rem) 0 clamp(82px, 6.25vw, 7.5rem); } .layout-im-wandel .im-wandel-header { width: min(720px, 100%); margin-bottom: clamp(34px, 2.6vw, 50px); } .layout-im-wandel .headline { margin: 0 0 clamp(1.75rem, 2.5vw, 3rem); color: var(--c-black); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(4rem, 5.72vw, 110px) !important; font-weight: 700; line-height: 1; } .layout-im-wandel .subhead { margin: 0 0 clamp(1.5rem, 1.85vw, 2.25rem); color: var(--c-black); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(2rem, 2.5vw, 3rem); font-weight: 700; line-height: 1.14; } .layout-im-wandel .intro { width: min(720px, 100%); margin: 0; color: var(--c-dgrey); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(1rem, 1vw, 17px); font-weight: 500; line-height: 1.42; } .layout-im-wandel .im-wandel-timeline { position: relative; } .layout-im-wandel .timeline-viewport { width: 100%; overflow: hidden; } .layout-im-wandel .timeline-track { position: relative; width: max(1260px, calc(var(--item-count, 5) * 260px + (var(--item-count, 5) - 1) * 4.25rem)); max-width: none; padding-top: 3.5rem; transform: translate3d(var(--wandel-shift), 0, 0); transition: transform 120ms linear; will-change: transform; } .layout-im-wandel .timeline-line { position: absolute; top: 11px; left: var(--wandel-line-left, 0.75rem); width: var(--wandel-line-width, calc(100% - 1.5rem)); height: 0.125rem; overflow: hidden; background-color: var(--c-grey); } .layout-im-wandel .timeline-line span { display: block; width: calc(var(--wandel-progress) * 100%); height: 100%; background-color: var(--c-pri); transform-origin: left center; transition: width var(--dur-slow) var(--ease-standard); } .layout-im-wandel .timeline-items { display: grid; grid-template-columns: repeat(var(--item-count, 5), minmax(0, 1fr)); gap: 4.25rem; margin: 0; padding: 0; list-style: none; } .layout-im-wandel .timeline-item { position: relative; min-width: 0; } .layout-im-wandel .timeline-dot { position: absolute; top: -3.5rem; left: 0; display: block; width: 1.5rem; height: 1.5rem; border: 0.125rem solid var(--c-grey); border-radius: 50%; background-color: var(--c-white); transition: border-color var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); } .layout-im-wandel .timeline-dot::after { content: ""; position: absolute; inset: 5px; border-radius: inherit; background-color: var(--c-grey); transition: background-color var(--dur-slow) var(--ease-standard); } .layout-im-wandel .timeline-item.is-active .timeline-dot { border-color: var(--c-pri); transform: scale(1.02); } .layout-im-wandel .timeline-item.is-active .timeline-dot::after { background-color: var(--c-pri); } .layout-im-wandel[data-im-wandel-initialized] .timeline-card { opacity: 0.2; transform: translateY(26px); transition: opacity 420ms var(--ease-standard), transform 420ms var(--ease-standard); } .layout-im-wandel .timeline-item.is-visible .timeline-card { opacity: 1; transform: translateY(0); } .layout-im-wandel .timeline-year { margin: 0 0 1.5rem; color: var(--c-pri); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(2rem, 2.08vw, 2.5rem); font-weight: 700; line-height: 1; } .layout-im-wandel .timeline-card h3 { margin: 0 0 18px; color: var(--c-black); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(1.25rem, 1.25vw, 1.5rem) !important; font-weight: 600; line-height: 1.35; } .layout-im-wandel .timeline-text { width: auto; margin: 0; color: var(--c-dgrey); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(1rem, 1vw, 17px); font-weight: 400; line-height: 1.42; } @media (max-width: 1000px) { .layout-im-wandel .timeline-track { width: max(1060px, calc(var(--item-count, 5) * 220px + (var(--item-count, 5) - 1) * 3rem)); } .layout-im-wandel .timeline-items { gap: 3rem; } } @media (max-width: 760px) { .layout-im-wandel { height: auto; min-height: auto; padding-bottom: clamp(4.5rem, 18vw, 6rem); } .layout-im-wandel .section-inner { position: relative; min-height: 0; } .layout-im-wandel .im-wandel-timeline { padding-top: 0; padding-left: 34px; } .layout-im-wandel .timeline-viewport { overflow: visible; padding-top: 0; } .layout-im-wandel .timeline-track { width: auto; padding-top: 0; transform: none; transition: none; } .layout-im-wandel .timeline-line { top: 0.5rem; bottom: 0.5rem; left: 11px; right: auto; width: 0.125rem; height: auto; } .layout-im-wandel .timeline-line span { width: 100%; height: calc(var(--wandel-progress) * 100%); transition: height var(--dur-slow) var(--ease-standard); } .layout-im-wandel .timeline-items { display: grid; grid-template-columns: 1fr; gap: 2.75rem; } .layout-im-wandel .timeline-dot { top: 0.25rem; left: -34px; } .layout-im-wandel .timeline-card { transform: translateY(18px); } .layout-im-wandel .timeline-year { margin-bottom: 1rem; } } @media (prefers-reduced-motion: reduce) { .layout-im-wandel { --wandel-progress: 1; --wandel-shift: 0px; height: auto; min-height: auto; } .layout-im-wandel .section-inner { position: relative; min-height: 0; } .layout-im-wandel .timeline-track { transform: none; } .layout-im-wandel .timeline-line span, .layout-im-wandel .timeline-track, .layout-im-wandel .timeline-dot, .layout-im-wandel .timeline-dot::after, .layout-im-wandel .timeline-card { transition: none; } .layout-im-wandel .timeline-card { opacity: 1; transform: none; } } /* ========================================================= CTA DUO ========================================================= */ .layout-cta-duo { justify-content: center; background-color: var(--c-white); } .layout-cta-duo .section-inner { width: min(1260px, calc(100vw - 3rem)); margin: 0 auto; } .layout-cta-duo .cta-duo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } .layout-cta-duo .cta-duo-card { position: relative; display: flex; min-height: 442px; overflow: hidden; flex-direction: column; justify-content: space-between; padding: 2.5rem 3rem; border-radius: 1.25rem; background: var(--card-bg); color: var(--card-heading); text-decoration: none; transform: translateZ(0); transition: transform var(--dur-slow) var(--ease-standard), box-shadow var(--dur-slow) var(--ease-standard); } .layout-cta-duo .cta-duo-card--light { background: radial-gradient(circle at 56% 58%, rgba(201, 215, 233, 0.42) 0, rgba(240, 245, 248, 0.4) 21%, rgba(240, 245, 248, 0.72) 56%, var(--card-bg) 100%), var(--card-bg); } .layout-cta-duo .cta-duo-card:is(:hover, :focus-visible) { box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08); transform: translateY(-0.125rem); } .layout-cta-duo .cta-duo-card:focus-visible { outline: 0.125rem solid var(--c-pri); outline-offset: 0.25rem; } .layout-cta-duo .cta-duo-content { position: relative; z-index: 2; width: min(400px, 100%); } .layout-cta-duo .cta-duo-content h2 { margin: 0 0 34px; color: var(--card-heading); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(38px, 2.5vw, 3rem) !important; font-weight: 700; line-height: 1.14; } .layout-cta-duo .cta-duo-content p { width: auto; margin: 0; color: var(--card-text); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(1.25rem, 1.25vw, 1.5rem); font-weight: 500; line-height: 1.34; } .layout-cta-duo .cta-duo-image { position: absolute; right: -2%; bottom: -9%; z-index: 1; width: min(52%, 314px); height: auto; opacity: 0.18; pointer-events: none; } .layout-cta-duo .cta-duo-footer { position: relative; z-index: 2; display: flex; gap: 1.5rem; align-items: flex-end; justify-content: space-between; margin-top: 2.25rem; } .layout-cta-duo .cta-duo-button { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 3.25rem 0 2rem; border-radius: 50px; background-color: var(--button-bg); color: var(--button-text); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: 17px; font-weight: 600; line-height: 1; white-space: nowrap; } .layout-cta-duo .cta-duo-button::after { content: ""; position: absolute; top: 50%; right: 1.75rem; width: 0.75rem; height: 0.75rem; background-color: currentColor; transform: translateY(-50%); mask-image: var(--icon-arrow-small); mask-position: center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--icon-arrow-small); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } .layout-cta-duo .cta-duo-logo { color: var(--card-heading); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(30px, 2.08vw, 2.5rem); font-style: italic; font-weight: 700; line-height: 1; letter-spacing: 0; white-space: nowrap; align-self: center; } .layout-cta-duo .cta-duo-logo img { display: block; width: auto; max-width: 8rem; height: auto; max-height: 42px; object-fit: contain; border-radius: 0%; } @media (max-width: 1000px) { .layout-cta-duo .cta-duo-grid { grid-template-columns: 1fr; } .layout-cta-duo .cta-duo-card { min-height: 390px; } } @media (max-width: 603px) { .layout-cta-duo .section-inner { width: min(100% - 2rem, 1260px); } .layout-cta-duo .cta-duo-card { min-height: 0; padding: 2rem 1.75rem; } .layout-cta-duo .cta-duo-content h2 { margin-bottom: 1.5rem; } .layout-cta-duo .cta-duo-footer { display: grid; gap: 1.5rem; justify-items: start; } .layout-cta-duo .cta-duo-image { width: 52%; } } /* ========================================================= AUDIT LEISTUNGEN ========================================================= */ .layout-audit-leistungen { justify-content: center; background-color: var(--c-white); color: var(--c-black); } .layout-audit-leistungen .section-inner { display: grid; grid-template-columns: minmax(20rem, 26rem) minmax(0, 48.75rem); gap: clamp(3rem, 5.1vw, 65px); align-items: start; width: min(1260px, calc(100vw - 3rem)); margin: 0 auto; } .layout-audit-leistungen .audit-media-column { min-width: 0; min-height: 100%; } .layout-audit-leistungen .audit-media-sticky { position: sticky; top: calc(var(--wi-nav-height, 6rem) + 2rem); display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 1rem; height: min(760px, calc(100vh - var(--wi-nav-height, 6rem) - 4rem)); min-height: 0; } .layout-audit-leistungen .audit-image { width: 100%; min-height: 0; margin: 0; overflow: hidden; border-radius: 1rem; background-color: #d9d9d9; } .layout-audit-leistungen .audit-image img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; } .layout-audit-leistungen .audit-factsheet { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr) 1.5rem; gap: 1rem; align-items: start; min-height: 9rem; padding: 1rem; border: 1px solid var(--c-grey); border-radius: 1rem; background-color: var(--c-white); color: var(--c-black); text-decoration: none; transition: border-color var(--dur-slow) var(--ease-standard), box-shadow var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); } .layout-audit-leistungen a.audit-factsheet:is(:hover, :focus-visible) { border-color: var(--c-pri); box-shadow: 0 1rem 2.25rem rgba(0, 0, 0, 0.06); } .layout-audit-leistungen a.audit-factsheet:focus-visible { outline: 0.125rem solid var(--c-pri); outline-offset: 3px; } .layout-audit-leistungen .factsheet-icon, .layout-audit-leistungen .pdf-icon { position: relative; display: grid; width: 3rem; height: 3rem; border-radius: 0.5rem; background-color: rgba(211, 37, 102, 0.1); place-items: center; } .layout-audit-leistungen .factsheet-icon::before, .layout-audit-leistungen .pdf-icon::before { content: ""; width: 19px; height: 1.5rem; background-color: var(--c-pri); mask-image: var(--icon-file-sheet); mask-position: center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--icon-file-sheet); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } .layout-audit-leistungen .factsheet-icon::after, .layout-audit-leistungen .pdf-icon::after { display: none; } .layout-audit-leistungen .factsheet-copy { display: grid; gap: 10px; min-width: 0; } .layout-audit-leistungen .factsheet-copy strong { color: var(--c-black); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(18px, 1.04vw, 1.25rem); font-weight: 700; line-height: 1.15; } .layout-audit-leistungen .factsheet-copy span { color: var(--c-dgrey); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(1rem, 1vw, 17px); font-weight: 400; line-height: 1.35; } .layout-audit-leistungen .factsheet-arrow { align-self: end; width: 21px; height: 21px; margin-bottom: 1px; background-color: var(--c-pri); mask-image: var(--icon-arrow-external); mask-position: center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--icon-arrow-external); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } .layout-audit-leistungen .audit-content { min-width: 0; } .layout-audit-leistungen .audit-header { margin-bottom: clamp(2.75rem, 4.15vw, 5rem); } .layout-audit-leistungen .headline { margin: 0 0 clamp(1.75rem, 2.5vw, 3rem); color: var(--c-black); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(4rem, 5.72vw, 110px) !important; font-weight: 700; line-height: 1; } .layout-audit-leistungen .subhead { margin: 0 0 26px; color: var(--c-black); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(2rem, 2.5vw, 3rem); font-weight: 700; line-height: 1.15; } .layout-audit-leistungen .intro { width: min(720px, 100%); margin: 0; color: var(--c-dgrey); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(1rem, 1vw, 17px); font-weight: 400; line-height: 1.42; } .layout-audit-leistungen .audit-accordion-wrap > h3 { margin: 0 0 18px; color: var(--c-black); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(1.75rem, 1.67vw, 2rem) !important; font-weight: 700; line-height: 1; } .layout-audit-leistungen .audit-accordion { display: grid; gap: 1rem; } .layout-audit-leistungen .audit-accordion-item { overflow: hidden; border-radius: 1rem; background: radial-gradient(circle at 56% 58%, rgba(216, 237, 249, 0.32) 0, rgba(176, 221, 245, 0.22) 56%, rgba(240, 248, 252, 0.58) 100%), #eef8fd; } .layout-audit-leistungen .audit-accordion-trigger { display: grid; grid-template-columns: 50px minmax(0, 1fr) 2rem; gap: 0; align-items: start; min-height: 5.25rem; padding: 30px 2rem; cursor: pointer; list-style: none; } .layout-audit-leistungen .audit-accordion-trigger::-webkit-details-marker { display: none; } .layout-audit-leistungen .item-number { color: var(--c-pri); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(1.25rem, 1.25vw, 1.5rem); font-weight: 700; line-height: 1.5; } .layout-audit-leistungen .item-title { color: var(--c-black); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(1.25rem, 1.25vw, 1.5rem); font-weight: 600; line-height: 1.5; } .layout-audit-leistungen .item-toggle { position: relative; display: block; width: 2rem; height: 2rem; border-radius: 50%; background-color: var(--c-white); } .layout-audit-leistungen .item-toggle::before { content: ""; position: absolute; top: 45%; left: 50%; width: 0.5rem; height: 0.5rem; border-right: 0.125rem solid var(--c-pri); border-bottom: 0.125rem solid var(--c-pri); transform: translate(-50%, -62%) rotate(45deg); transition: transform var(--dur-slow) var(--ease-standard); } .layout-audit-leistungen .audit-accordion-item.is-expanded .item-toggle { background-color: var(--c-pri); } .layout-audit-leistungen .audit-accordion-item.is-expanded .item-toggle::before { border-color: var(--c-white); transform: translate(-50%, -35%) rotate(225deg); top: 52%; } .layout-audit-leistungen .accordion-content { height: 0; overflow: hidden; transition: height var(--dur-slow) var(--ease-standard); } .layout-audit-leistungen .accordion-content-inner { display: grid; gap: 18px; padding: 0 2rem 1.5rem 82px; } .layout-audit-leistungen .accordion-content-inner > p { width: min(500px, 100%); margin: -6px 0 0; color: var(--c-dgrey); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(1rem, 1vw, 17px); font-weight: 400; line-height: 1.42; } .layout-audit-leistungen .audit-pdf-link { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 2.75rem; gap: 1rem; align-items: center; width: 100%; min-height: 5rem; padding: 1rem; border-radius: 0.75rem; background-color: var(--c-white); color: var(--c-black); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(1rem, 1vw, 17px); font-weight: 600; line-height: 1.1; text-decoration: none; } .layout-audit-leistungen .audit-pdf-link:is(:hover, :focus-visible) { color: var(--c-pri); } .layout-audit-leistungen .pdf-download { position: relative; display: block; width: 2.75rem; height: 2.75rem; background-color: transparent; } .layout-audit-leistungen .pdf-download::before { content: ""; position: absolute; inset: 0; background-image: var(--icon-download-circle); background-position: center; background-repeat: no-repeat; background-size: contain; } .layout-audit-leistungen .pdf-download::after { display: none; } @media (max-width: 1000px) { .layout-audit-leistungen .section-inner { grid-template-columns: 1fr; } .layout-audit-leistungen .audit-media-sticky { position: relative; top: auto; grid-template-columns: minmax(0, 1fr) minmax(280px, 26rem); grid-template-rows: auto; align-items: stretch; height: auto; } .layout-audit-leistungen .audit-image img { height: auto; min-height: 360px; } } @media (max-width: 720px) { .layout-audit-leistungen .section-inner { width: min(100% - 2rem, 1260px); } .layout-audit-leistungen .audit-media-sticky { grid-template-columns: 1fr; } .layout-audit-leistungen .audit-image img { min-height: 0; aspect-ratio: 4 / 3; } .layout-audit-leistungen .audit-accordion-trigger { grid-template-columns: 2.75rem minmax(0, 1fr) 2rem; padding: 1.5rem 1.25rem; } .layout-audit-leistungen .accordion-content-inner { padding: 0 1.25rem 1.25rem 4rem; } .layout-audit-leistungen .audit-pdf-link { grid-template-columns: 42px minmax(0, 1fr) 2.5rem; gap: 0.75rem; } } @media (max-width: 480px) { .layout-audit-leistungen .audit-accordion-trigger { grid-template-columns: 1fr 2rem; gap: 0.75rem; } .layout-audit-leistungen .item-number { grid-column: 1 / -1; } .layout-audit-leistungen .accordion-content-inner { padding-left: 1.25rem; } .layout-audit-leistungen .audit-pdf-link { grid-template-columns: 42px minmax(0, 1fr); } .layout-audit-leistungen .pdf-download { grid-column: 1 / -1; justify-self: end; } } /* LEISTUNGSBEREICH */ .layout-leistungsbereich { justify-content: center; background-color: var(--leistungsbereich-bg, #f9f9f9); color: var(--c-black); } .layout-leistungsbereich .section-inner { display: grid; grid-template-columns: minmax(20rem, 26rem) minmax(0, 48.75rem); gap: clamp(3rem, 5.1vw, 65px); align-items: start; width: min(1260px, calc(100vw - 3rem)); margin: 0 auto; } .layout-leistungsbereich .leistungsbereich-media, .layout-leistungsbereich .leistungsbereich-content { min-width: 0; min-height: 100%; } .layout-leistungsbereich.no-media .leistungsbereich-content { grid-column: 1 / -1; width: min(48.75rem, 100%); margin-left: auto; } .layout-leistungsbereich .leistungsbereich-media-sticky { position: sticky; top: calc(var(--wi-nav-height, 6rem) + 2rem); display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 1rem; height: min(760px, calc(100vh - var(--wi-nav-height, 6rem) - 4rem)); min-height: 0; } .layout-leistungsbereich .leistungsbereich-image { width: 100%; min-height: 0; margin: 0; overflow: hidden; border-radius: 1rem; background-color: #d9d9d9; } .layout-leistungsbereich .leistungsbereich-image img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; } .layout-leistungsbereich .leistungsbereich-factsheet { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 2.75rem; gap: 1rem; align-items: start; min-height: 5rem; padding: 1rem; border: 1px solid transparent; border-radius: 1rem; background-color: var(--c-white); color: var(--c-black); text-decoration: none; transition: box-shadow var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); } .layout-leistungsbereich .leistungsbereich-factsheet.has-arrow { align-items: end; } .layout-leistungsbereich a.leistungsbereich-factsheet:is(:hover, :focus-visible) { border-color: var(--c-pri); box-shadow: 0 1rem 2.25rem rgba(0, 0, 0, 0.06); } .layout-leistungsbereich a.leistungsbereich-factsheet:focus-visible { outline: 0.125rem solid var(--c-pri); outline-offset: 3px; } .layout-leistungsbereich .factsheet-icon, .layout-leistungsbereich .pdf-icon { position: relative; display: grid; width: 3rem; height: 3rem; border-radius: 0.5rem; background-color: rgba(211, 37, 102, 0.1); place-items: center; } .layout-leistungsbereich .factsheet-icon::before, .layout-leistungsbereich .pdf-icon::before { content: ""; width: 19px; height: 1.5rem; background-color: var(--c-pri); mask-image: var(--icon-file-sheet); mask-position: center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--icon-file-sheet); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } .layout-leistungsbereich .factsheet-icon::after, .layout-leistungsbereich .pdf-icon::after { display: none; } .layout-leistungsbereich .factsheet-copy { display: grid; gap: 10px; min-width: 0; } .layout-leistungsbereich .leistungsbereich-factsheet.has-arrow .factsheet-copy { align-self: end; } .layout-leistungsbereich .factsheet-copy strong { color: var(--c-black); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(18px, 1.04vw, 1.25rem); font-weight: 700; line-height: 1.15; } .layout-leistungsbereich .factsheet-copy span { color: var(--c-dgrey); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(1rem, 1vw, 17px); font-weight: 400; line-height: 1.35; } .layout-leistungsbereich .factsheet-download, .layout-leistungsbereich .pdf-download { position: relative; display: block; width: 2.75rem; height: 2.75rem; background: transparent; } .layout-leistungsbereich .factsheet-arrow { position: relative; display: block; width: 21px; height: 21px; align-self: end; margin-bottom: 1px; background-color: var(--c-pri); mask-image: var(--icon-arrow-external); mask-position: center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--icon-arrow-external); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } .layout-leistungsbereich .factsheet-download::before, .layout-leistungsbereich .pdf-download::before { content: ""; position: absolute; inset: 0; background-image: var(--icon-download-circle); background-position: center; background-repeat: no-repeat; background-size: contain } .layout-leistungsbereich .factsheet-download::after, .layout-leistungsbereich .pdf-download::after { display: none; } .layout-leistungsbereich .leistungsbereich-header { margin-bottom: clamp(2.75rem, 4.15vw, 5rem); } .layout-leistungsbereich .headline { margin: 0 0 clamp(1.75rem, 2.5vw, 3rem); color: var(--c-black); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(58px, 5.73vw, 110px) !important; font-weight: 700; line-height: 1; } .layout-leistungsbereich .subhead { max-width: 720px; margin: 0 0 clamp(1.5rem, 2.55vw, 49px); color: var(--c-black); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(2rem, 2.5vw, 3rem) !important; font-weight: 700; line-height: 1.15; } .layout-leistungsbereich .intro { width: min(720px, 100%); margin: 0; color: var(--c-dgrey); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(1rem, 1vw, 17px); font-weight: 400; line-height: 1.42; } .layout-leistungsbereich .leistungsbereich-items > h3 { margin: 0 0 1rem; color: var(--c-black); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(1.75rem, 1.67vw, 2rem) !important; font-weight: 700; line-height: 1; } .layout-leistungsbereich .leistungsbereich-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; } .layout-leistungsbereich .leistungsbereich-cards > li { min-width: 0; } .layout-leistungsbereich .leistungsbereich-cards > li.is-wide { grid-column: 1 / -1; } .layout-leistungsbereich .leistungsbereich-card { display: flex; min-height: 277px; height: 100%; flex-direction: column; align-items: flex-start; padding: 25px 2rem 30px; border-radius: 1rem; background-color: var(--c-white); } .layout-leistungsbereich .leistungsbereich-cards > li.has-download .leistungsbereich-card { min-height: 307px; border: 1px solid var(--c-grey); } .layout-leistungsbereich .leistungsbereich-cards > li.is-wide .leistungsbereich-card { min-height: 211px; } .layout-leistungsbereich .leistungsbereich-cards > li.is-wide.has-download .leistungsbereich-card { min-height: 307px; } .layout-leistungsbereich .card-number { margin: 0 0 23px; color: var(--c-pri); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(2rem, 2.08vw, 2.5rem); font-weight: 600; line-height: 1; } .layout-leistungsbereich .leistungsbereich-card h4 { max-width: 100%; margin: 0 0 1rem; color: var(--c-black); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(21px, 1.25vw, 1.5rem); font-weight: 600; line-height: 1.36; } .layout-leistungsbereich .card-text { width: min(450px, 100%); margin: 0; color: var(--c-dgrey); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(1rem, 1vw, 17px); font-weight: 400; line-height: 1.42; } .layout-leistungsbereich .card-pdf-link { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 2.75rem; gap: 1rem; align-items: center; width: 100%; min-height: 5rem; margin-top: auto; padding: 1rem; border: 1px solid var(--c-grey); border-radius: 0.75rem; background-color: var(--c-white); color: var(--c-black); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(1rem, 1vw, 17px); font-weight: 600; line-height: 1.1; text-decoration: none; transition: border-color var(--dur-slow) var(--ease-standard), color var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); } .layout-leistungsbereich .card-pdf-link:is(:hover, :focus-visible) { border-color: var(--c-pri); color: var(--c-pri); } .layout-leistungsbereich .card-pdf-link:focus-visible { outline: 0.125rem solid var(--c-pri); outline-offset: 3px; } @media (max-width: 1000px) { .layout-leistungsbereich .section-inner { grid-template-columns: 1fr; } .layout-leistungsbereich .leistungsbereich-media-sticky { position: relative; top: auto; grid-template-columns: minmax(0, 1fr) minmax(280px, 26rem); grid-template-rows: auto; align-items: end; height: auto; } .layout-leistungsbereich .leistungsbereich-image img { height: auto; min-height: 360px; } } @media (max-width: 720px) { .layout-leistungsbereich { padding: 4rem 0; } .layout-leistungsbereich .section-inner { width: min(100% - 2rem, 1260px); } .layout-leistungsbereich .leistungsbereich-media-sticky, .layout-leistungsbereich .leistungsbereich-cards { grid-template-columns: 1fr; } .layout-leistungsbereich .leistungsbereich-image img { min-height: 0; aspect-ratio: 4 / 3; } .layout-leistungsbereich .headline { font-size: clamp(2.75rem, 13vw, 70px) !important; } .layout-leistungsbereich .leistungsbereich-card, .layout-leistungsbereich .leistungsbereich-cards > li.is-wide .leistungsbereich-card { min-height: 0; padding: 1.5rem 1.25rem 1.75rem; } } @media (max-width: 480px) { .layout-leistungsbereich .leistungsbereich-factsheet { grid-template-columns: 42px minmax(0, 1fr); } .layout-leistungsbereich .factsheet-download, .layout-leistungsbereich .factsheet-arrow { grid-column: 1 / -1; justify-self: end; } .layout-leistungsbereich .card-pdf-link { grid-template-columns: 42px minmax(0, 1fr); } .layout-leistungsbereich .pdf-download { grid-column: 1 / -1; justify-self: end; } } /* WIR FUER DICH */ .layout-wir-fuer-dich { background-color: var(--wir-bg, var(--c-white)); color: var(--c-black); } .layout-wir-fuer-dich .section-inner { width: min(1260px, calc(100vw - 3rem)); margin: 0 auto; } .layout-wir-fuer-dich .wir-chapter { display: grid; grid-template-columns: minmax(0, 600px) minmax(360px, 559px); gap: clamp(3.5rem, 5.25vw, 101px); align-items: start; } .layout-wir-fuer-dich--image-left .wir-chapter { grid-template-columns: minmax(360px, 559px) minmax(0, 600px); } .layout-wir-fuer-dich--image-left .wir-copy { grid-column: 2; } .layout-wir-fuer-dich--image-left .wir-image { grid-column: 1; grid-row: 1; } .layout-wir-fuer-dich .wir-copy { min-width: 0; padding-top: 2rem; } .layout-wir-fuer-dich .wir-number { margin: 0 0 2rem; color: var(--c-pri); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(4.5rem, 5vw, 6rem); font-weight: 700; line-height: 1; } .layout-wir-fuer-dich h2 { margin: 0 0 2rem; color: var(--c-black); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(2rem, 2.08vw, 2.5rem) !important; font-weight: 700; line-height: 1; } .layout-wir-fuer-dich .wir-intro { width: min(600px, 100%); margin: 0 0 1.5rem; color: var(--c-black); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(1.25rem, 1.25vw, 1.5rem); font-weight: 500; line-height: 1.34; } .layout-wir-fuer-dich .wir-text { width: min(510px, 100%); color: var(--c-dgrey); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: 17px; font-weight: 400; line-height: 1.42; } .layout-wir-fuer-dich .wir-text p { margin: 0 0 1.35em; } .layout-wir-fuer-dich .wir-text > :last-child { margin-bottom: 0; } .layout-wir-fuer-dich .wir-image { position: sticky; top: calc(var(--wi-nav-height, 6rem) + 2rem); width: 100%; margin: 0; overflow: hidden; border-radius: 1.25rem; background-color: #d9d9d9; } .layout-wir-fuer-dich .wir-image img { display: block; width: 100%; height: auto; aspect-ratio: 559 / 432; object-fit: cover; } .layout-wir-fuer-dich .wir-quote { position: relative; display: grid; grid-template-columns: 8rem minmax(0, 720px) 1fr; gap: 2rem; align-items: center; min-height: 192px; margin: clamp(4.5rem, 6.25vw, 7.5rem) 0 0; padding: 2rem 3rem; overflow: hidden; border-radius: 1.25rem; background-color: var(--wir-quote-bg, #f9f9f9); } .layout-wir-fuer-dich .wir-quote-avatar { position: relative; z-index: 1; display: block; width: 8rem; height: 8rem; border-radius: 50%; object-fit: cover; } .layout-wir-fuer-dich .wir-quote-copy { position: relative; z-index: 1; min-width: 0; } .layout-wir-fuer-dich blockquote { margin: 0; color: var(--c-black); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(1.25rem, 1.25vw, 1.5rem); font-weight: 700; line-height: 1.34; } .layout-wir-fuer-dich blockquote::before, .layout-wir-fuer-dich blockquote::after { color: var(--c-pri); } .layout-wir-fuer-dich blockquote::before { content: "„"; } .layout-wir-fuer-dich blockquote::after { content: "“"; } .layout-wir-fuer-dich .wir-quote-copy p { margin: 1rem 0 0; color: var(--c-dgrey); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1; } .layout-wir-fuer-dich .wir-quote-decoration { position: absolute; right: clamp(1.75rem, 4.15vw, 5rem); bottom: -0.75rem; width: min(207px, 24%); height: auto; color: rgba(211, 37, 102, 0.12); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(110px, 8.75vw, 168px); font-weight: 700; line-height: 0.8; pointer-events: none; } @media (max-width: 1000px) { .layout-wir-fuer-dich .wir-chapter, .layout-wir-fuer-dich--image-left .wir-chapter { grid-template-columns: 1fr; gap: 2rem; } .layout-wir-fuer-dich--image-left .wir-copy, .layout-wir-fuer-dich--image-left .wir-image { grid-column: auto; grid-row: auto; } .layout-wir-fuer-dich .wir-image { position: relative; top: auto; order: -1; width: min(559px, 100%); } .layout-wir-fuer-dich .wir-quote { grid-template-columns: 6rem minmax(0, 1fr); padding: 1.75rem 2rem; } .layout-wir-fuer-dich .wir-quote-avatar { width: 6rem; height: 6rem; } } @media (max-width: 720px) { .layout-wir-fuer-dich { padding: 4rem 0 5rem; } .layout-wir-fuer-dich .section-inner { width: min(100% - 2rem, 1260px); } .layout-wir-fuer-dich .wir-copy { padding-top: 0; } .layout-wir-fuer-dich .wir-number { margin-bottom: 1.25rem; } .layout-wir-fuer-dich h2 { line-height: 1.15; } .layout-wir-fuer-dich .wir-quote { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1.25rem; margin-top: 3rem; padding: 1.5rem 1.25rem; } .layout-wir-fuer-dich .wir-quote-avatar { width: 4.5rem; height: 4.5rem; } .layout-wir-fuer-dich .wir-quote-decoration { right: 1rem; bottom: -0.25rem; width: 7.5rem; } } @media (max-width: 520px) { .layout-wir-fuer-dich .wir-quote { grid-template-columns: 1fr; } } /* FACHBEGRIFFE */ .layout-fachbegriffe { position: relative; display: block; padding: clamp(4rem, 5.2vw, 70px) 0 clamp(5.5rem, 7.3vw, 8.75rem); background-color: var(--c-white); color: var(--c-black); } .layout-fachbegriffe .fachbegriffe-sticky-controls { position: sticky; z-index: 9; top: 95px; top: var(--wi-nav-height-min) !important; z-index: 8; width: 100%; padding-top: 1.5rem; padding-left: 1rem; padding-right: 1rem; background-color: var(--c-white); } .layout-fachbegriffe .controls-inner { position: relative; display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; width: min(1260px, calc(100vw - 3rem)); min-height: 2.5rem; margin: 0 auto; &:after { content: ''; position: absolute; inset: 100% 0 auto 0; height: 3rem; background: linear-gradient( to top, rgba( 255, 255, 255, 0%) 0%, rgba( 255, 255, 255, 11.29%) 8.7%, rgba( 255, 255, 255, 22.04%) 16.4%, rgba( 255, 255, 255, 32.25%) 23.3%, rgba( 255, 255, 255, 41.88%) 29.5%, rgba( 255, 255, 255, 50.92%) 35.3%, rgba( 255, 255, 255, 59.33%) 40.7%, rgba( 255, 255, 255, 67.09%) 45.9%, rgba( 255, 255, 255, 74.16%) 51.1%, rgba( 255, 255, 255, 80.5%) 56.4%, rgba( 255, 255, 255, 86.07%) 62.1%, rgba( 255, 255, 255, 90.81%) 68.1%, rgba( 255, 255, 255, 94.66%) 74.8%, rgba( 255, 255, 255, 97.54%) 82.2%, rgba( 255, 255, 255, 99.36%) 90.6%, rgba( 255, 255, 255, 100%) 100% ); } } .layout-fachbegriffe .search-field { position: relative; display: block; } .layout-fachbegriffe .search-field input { width: 100%; height: 2.5rem; padding: 0 1rem 0 2.5rem; border: 1px solid var(--c-grey); border-radius: 6.25rem; background-color: var(--c-white); color: var(--c-black); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: 17px; font-weight: 400; line-height: 1; outline: 0; } .layout-fachbegriffe .search-field input::placeholder { color: var(--c-grey-profile); opacity: 1; } .layout-fachbegriffe .search-field input:focus { border-color: var(--c-pri); box-shadow: 0 0 0 3px rgba(211, 37, 102, 0.12); } .layout-fachbegriffe .search-icon { position: absolute; top: 50%; left: 1rem; aspect-ratio: 1; width: 1rem; height: 1rem; pointer-events: none; transform: translateY(-50%); background-color: var( --c-grey-profile ); mask-image: var(--ico-search) !important; -webkit-mask-image: var(--ico-search) !important; mask-size: contain !important; -webkit-mask-size: contain !important; mask-position: center !important; -webkit-mask-position: center !important; } .layout-fachbegriffe .filter-list { display: flex; gap: 0.75rem; align-items: center; min-width: 0; overflow-x: auto; scrollbar-width: none; } .layout-fachbegriffe .filter-list::-webkit-scrollbar { display: none; } .layout-fachbegriffe .filter-button { display: inline-flex; align-items: center; justify-content: center; height: 2.5rem; padding: 0 1.5rem; border: 1px solid var(--c-grey); border-radius: 50px; background-color: var(--c-white); color: var(--c-dgrey); cursor: pointer; font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: 17px; font-weight: 500; line-height: 1; white-space: nowrap; transition: background-color var(--dur-slow) var(--ease-standard), border-color var(--dur-slow) var(--ease-standard), color var(--dur-slow) var(--ease-standard); } .layout-fachbegriffe .filter-button.is-active { border-color: var(--c-pri); background-color: var(--c-pri); color: var(--c-white); font-weight: 600; } .layout-fachbegriffe .filter-button:is(:hover, :focus-visible) { border-color: var(--c-pri); } .layout-fachbegriffe .terms-count { margin: 0; color: #787878; font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: 17px; font-weight: 500; line-height: 1; text-align: right; white-space: nowrap; } .layout-fachbegriffe .fachbegriffe-results.section-inner { display: grid; grid-template-columns: auto minmax(0, 1188px); gap: clamp( 2rem, 6vw, 4rem); align-items: start; width: min(1260px, calc(100vw - 3rem)); margin: 0 auto; padding: var(--pad-ctr-m) 1rem; } .layout-fachbegriffe .alphabet-nav { position: sticky; top: 192px; top: calc( var(--wi-nav-height-min) + 1.5rem + 2.5rem + 3rem ) !important; display: grid; justify-items: center; gap: 0.25rem; padding-top: 0; } .layout-fachbegriffe .alphabet-nav a , .layout-fachbegriffe .alphabet-nav span { display: grid; width: 26px; height: 17px; align-items: center; justify-content: center; border-radius: 6.25rem; color: var(--c-dgrey); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: 17px; font-weight: 500; line-height: 1; text-decoration: none; } .layout-fachbegriffe .alphabet-nav a { display: flex; justify-content: center; align-items: center; aspect-ratio: 1; width: auto; height: calc( 1.5rem + 2px ); border: 1px solid transparent; } .layout-fachbegriffe .alphabet-nav a:is(:hover, :focus-visible) { border-color: var(--c-pri); color: var(--c-pri); } .layout-fachbegriffe .alphabet-nav a.is-active { background-color: var(--c-pri); border-color: var(--c-pri); color: var(--c-white); } .layout-fachbegriffe .alphabet-nav .is-disabled { color: var(--c-grey-profile); pointer-events: none; } .layout-fachbegriffe .terms-wrap { min-width: 0; } .layout-fachbegriffe .letter-group { scroll-margin-top: 190px; margin-bottom: clamp( 2.25rem, 6.25vw, 4.75rem ); } .layout-fachbegriffe .letter-group[hidden], .layout-fachbegriffe .term-item[hidden], .layout-fachbegriffe .empty-state[hidden] { display: none; } .layout-fachbegriffe .letter-header { display: flex; gap: 30px; align-items: end; margin-bottom: 1.5rem; } .layout-fachbegriffe .letter-header h2 { margin: 0; color: var(--c-pri); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(4.5rem, 5vw, 6rem) !important; font-weight: 700; line-height: 75%; line-height: 0.75em; } .layout-fachbegriffe .letter-header p { margin: 0; color: var(--c-dgrey); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: 17px; font-weight: 500; line-height: 1; } .layout-fachbegriffe .term-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; margin: 0; padding: 0; list-style: none; } .layout-fachbegriffe .term-item { min-width: 0; } .layout-fachbegriffe .term-accordion { overflow: hidden; border: 1px solid var(--c-grey); border-radius: 1rem; background-color: var(--c-white); } .layout-fachbegriffe .term-trigger { display: grid; grid-template-columns: minmax(0, 1fr) 2rem; gap: 1.25rem; align-items: center; min-height: 62px; padding: 1rem 1.5rem; cursor: pointer; list-style: none; } .layout-fachbegriffe .term-trigger::-webkit-details-marker { display: none; } .layout-fachbegriffe .term-trigger > span:first-child { min-width: 0; /* mit Trennstrich brechen statt hart mitten im Wort ("Abschlussprü-fung" statt "Abschlussprüfu/ng"); lang="de-DE" liefert die Trennmuster */ hyphens: auto; overflow-wrap: break-word; color: var(--c-black); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(18px, 1.04vw, 1.25rem); font-weight: 700; line-height: 1.25; } .layout-fachbegriffe .term-toggle { position: relative; display: block; width: 2rem; height: 2rem; border-radius: 50%; background-color: var(--c-pri); } .layout-fachbegriffe .term-toggle::before, .layout-fachbegriffe .term-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 0.125rem; border-radius: 0.125rem; background-color: var(--c-white); transform: translate(-50%, -50%); transition: transform var(--dur-slow) var(--ease-standard); } .layout-fachbegriffe .term-toggle::after { transform: translate(-50%, -50%) rotate(90deg); } .layout-fachbegriffe .term-accordion.is-expanded .term-toggle::after { transform: translate(-50%, -50%) rotate(0deg); } .layout-fachbegriffe .accordion-content { height: 0; overflow: hidden; transition: height var(--dur-slow) var(--ease-standard); } .layout-fachbegriffe .accordion-content-inner { width: min(475px, 100%); padding: 0 1.5rem 1rem 1.5rem; color: var(--c-dgrey); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: 17px; font-weight: 400; line-height: 1.42; } .layout-fachbegriffe .accordion-content-inner > :first-child { margin-top: 0; } .layout-fachbegriffe .accordion-content-inner > :last-child { margin-bottom: 0; } .layout-fachbegriffe .fachbegriffe-highlight { padding: 0 0.08em; border-radius: 0.2em; background-color: rgba(211, 37, 102, 0.14); color: inherit; } .layout-fachbegriffe .empty-state { display: flex; gap: 14px; align-items: center; justify-content: space-between; margin: 0 0 2.5rem; padding: 1.5rem 1.5rem; border: 1px solid var(--c-grey); border-radius: 1rem; color: var(--c-dgrey); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: 17px; line-height: 1.35; } .layout-fachbegriffe .empty-state button { display: none; min-height: 2.5rem; padding: 0 1.5rem; border: 0; border-radius: 50px; background-color: var(--c-pri); color: var(--c-white); cursor: pointer; font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: 17px; font-weight: 600; line-height: 1; white-space: nowrap; } .layout-fachbegriffe .empty-state.can-search-all button { display: inline-flex; align-items: center; } @media (max-width: 1100px) { .layout-fachbegriffe .controls-inner { grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); } .layout-fachbegriffe .terms-count { grid-column: 1 / -1; justify-self: start; padding-bottom: 14px; } } @media (max-width: 860px) { .layout-fachbegriffe { padding-top: 0; } .layout-fachbegriffe .fachbegriffe-sticky-controls { position: relative; /* !important noetig: die Basisregel setzt top mit !important, und bei position: relative verschiebt der geerbte Wert das Element um die Nav-Hoehe nach unten (Luecke unter dem Hero, Fade ueber dem Buchstaben) */ top: auto !important; } .layout-fachbegriffe .controls-inner { grid-template-columns: 1fr; gap: 16px; padding: 1rem 0; } .layout-fachbegriffe .terms-count { grid-column: auto; padding-bottom: 0; text-align: left; /* Design mobil: Zaehler linksbuendig ueber der Buchstabenleiste */ } /* .section-inner mit im Selektor, sonst verliert der Umbruch auf eine Spalte das Spezifitaetsduell gegen die Desktop-Regel oben und die Begriffsspalte wird neben der A-Z-Leiste auf Schmalstbreite gequetscht */ .layout-fachbegriffe .fachbegriffe-results.section-inner { grid-template-columns: 1fr; padding-top: 3rem; } .layout-fachbegriffe .alphabet-nav { position: relative; top: auto !important; /* wie oben: sonst schiebt das top der Basisregel die Leiste ueber die Karten */ display: flex; align-items: center; /* deaktivierte Buchstaben (17px-Spans) sonst oben ausgerichtet neben den 26px-Links */ gap: 10px; overflow-x: auto; justify-items: initial; padding-bottom: 0.5rem; scrollbar-width: none; } .layout-fachbegriffe .alphabet-nav::-webkit-scrollbar { display: none; } } @media (max-width: 720px) { /* dieselbe Spezifitaetsfalle wie beim Spaltenumbruch: ohne die volle Klassenkette bliebe der Ergebnisbereich auf der Desktop-Breite (100vw - 3rem) */ .layout-fachbegriffe .controls-inner, .layout-fachbegriffe .section-inner, .layout-fachbegriffe .fachbegriffe-results.section-inner { width: min(100% - 2rem, 1260px); } .layout-fachbegriffe .term-list { grid-template-columns: 1fr; } .layout-fachbegriffe .letter-group { margin-bottom: 3rem; /* Design mobil: letzte Karte -> naechster Buchstabe 50px */ } .layout-fachbegriffe .empty-state { display: grid; justify-items: start; } } /* HERO WPG */ .layout-hero-wpg { position: relative; overflow: hidden; padding-bottom: var(--hero-padding-bottom, 7.5rem); background-color: var(--hero-bg, var(--c-white)); color: var(--c-black); } .layout-hero-wpg.has-gradient::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 13% 9% at 55.8% 57.6%, rgba(216, 237, 249, 0.15) 0%, rgba(176, 221, 245, 0.15) 100%); } .layout-hero-wpg .hero-background { position: absolute; inset: 0 0 auto; z-index: 1; height: min(490px, 52%); pointer-events: none; } .layout-hero-wpg .hero-background img { display: block; width: 100%; height: 100%; object-fit: cover; filter: blur(3.5px); } .layout-hero-wpg .hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 600px) minmax(420px, 740px); gap: clamp(3rem, 5.2vw, 6.25rem); align-items: start; width: min(1440px, calc(100vw - 3rem)); margin: 0 auto; padding-top: clamp(190px, 10.4vw, 224px); } .layout-hero-wpg .hero-copy { min-width: 100vw; } .layout-hero-wpg h1 { margin: 0 0 2rem; color: var(--c-black); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(4.25rem, 5.73vw, 110px) !important; font-weight: 700; letter-spacing: 0; line-height: 1.09; } .layout-hero-wpg .accent { display: inline; color: var(--c-pri); line-height: inherit; } .layout-hero-wpg .hero-subheadline { max-width: 620px; margin: 0 0 1.5rem; color: var(--c-black); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(2rem, 2.5vw, 3rem); font-weight: 700; line-height: 1.14; } .layout-hero-wpg .hero-intro { max-width: 600px; margin: 0; color: var(--c-dgrey); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: clamp(19px, 1.25vw, 1.5rem); font-weight: 500; line-height: 1.34; } .layout-hero-wpg .hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 5rem; } .layout-hero-wpg .hero-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; width: auto; height: 2.75rem; min-height: 2.75rem; padding: 0 2rem; border: 1px solid var(--c-grey); border-radius: 50px; color: var(--c-black); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: 17px; font-weight: 600; line-height: 1; text-decoration: none; } .layout-hero-wpg .hero-cta > span { display: inline-flex; align-items: center; line-height: 1; } .layout-hero-wpg .hero-cta--primary { width: 225px; justify-content: flex-start; gap: 7px; padding: 0 1.75rem; border-color: var(--c-pri); background-color: var(--c-pri); color: var(--c-white); } .layout-hero-wpg .hero-cta--secondary { min-width: 9rem; background-color: var(--c-white); font-weight: 500; } .layout-hero-wpg .hero-cta-icon { flex: 0 0 auto; width: 0.75rem; height: 0.75rem; background-color: currentColor; mask-image: var(--icon-arrow-down-small); mask-position: center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--icon-arrow-down-small); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } .layout-hero-wpg .hero-media { align-self: start; width: 100%; margin: 259px 0 0 auto; overflow: hidden; border-radius: 1.25rem; } .layout-hero-wpg .hero-media img { display: block; width: 100%; height: auto; aspect-ratio: 740 / 354; object-fit: cover; } .layout-hero-wpg .hero-cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; width: min(1440px, calc(100vw - 3rem)); margin: 2rem auto 0; } .layout-hero-wpg .hero-card { display: flex; min-height: 233px; flex-direction: column; align-items: flex-start; padding: 1.25rem 1.5rem; border: 1px solid var(--c-grey); border-radius: 1rem; background-color: var(--c-white); color: var(--c-black); text-decoration: none; } .layout-hero-wpg .hero-card--pink { border-color: var(--c-pri); background-color: var(--c-pri); color: var(--c-white); } .layout-hero-wpg .hero-card-icon { width: 3rem; height: 3rem; margin-bottom: 1rem; object-fit: contain; } .layout-hero-wpg .hero-card h2 { margin: 0 0 1rem; color: currentColor; font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(21px, 1.25vw, 1.5rem) !important; font-weight: 600; line-height: 1.36; } .layout-hero-wpg .hero-card p { width: min(250px, 100%); margin: 0; color: currentColor; opacity: 0.82; font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: 17px; font-weight: 400; line-height: 1.35; } .layout-hero-wpg .hero-card-link { position: relative; margin-top: auto; padding-right: 18px; color: currentColor; font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: 1rem; font-weight: 500; line-height: 1; } .layout-hero-wpg .hero-card-link::after { content: ""; position: absolute; top: 20%; right: 0; width: 10px; height: 10px; background-color: currentColor; mask-image: var(--icon-arrow-down-small); mask-position: center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--icon-arrow-down-small); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } .layout-hero-wpg .hero-card--light .hero-card-link::after{ background-color: var(--c-pri); } .layout-hero-wpg .hero-card--light .hero-card-link{ color: var(--c-pri); } .layout-hero-wpg .hero-promo { position: absolute; right: max(2rem, calc((100vw - 1440px) / 2)); bottom: clamp(5rem, 11.1vw, 7.5rem); z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) 256px; gap: 1.5rem; align-items: center; width: min(529px, calc(100vw - 3rem)); min-height: 200px; padding: 0.25rem 0.25rem 0.25rem 1.5rem; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 1rem; background-color: rgba(255, 255, 255, 0.75); color: var(--c-black); text-decoration: none; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08), inset 0 1px 6px rgba(255, 255, 255, 0.5); backdrop-filter: blur(0.5rem); } .layout-hero-wpg .hero-promo strong { color: var(--c-black); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: clamp(21px, 1.25vw, 1.5rem); font-weight: 700; line-height: 1.34; } .layout-hero-wpg .hero-promo-arrow { display: block; width: 1.75rem; height: 1.75rem; margin-top: 42px; background-color: var(--c-pri); mask-image: var(--icon-arrow-down-small); mask-position: center; mask-repeat: no-repeat; mask-size: contain; transform: rotate(-45deg); -webkit-mask-image: var(--icon-arrow-down-small); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } .layout-hero-wpg .hero-promo img { display: block; width: 100%; height: 192px; border-radius: 0.75rem; object-fit: cover; } .layout-hero-wpg--with_cards .hero-inner { grid-template-columns: minmax(0, 600px) minmax(420px, 708px); gap: 8.25rem; padding-top: clamp(176px, 10.4vw, 200px); } .layout-hero-wpg--with_cards h1 { margin-bottom: 2rem; } .layout-hero-wpg--home_statement.has-gradient::before { background: radial-gradient(ellipse 13% 9% at 55.8% 57.6%, rgba(216, 237, 249, 0.3) 0%, rgba(176, 221, 245, 0.3) 100%); } .layout-hero-wpg--home_statement .hero-inner { grid-template-columns: minmax(0, 560px) minmax(360px, 553px); align-items: start; padding-top: clamp(260px, 16vw, 308px); } .layout-hero-wpg--home_statement h1 { margin-bottom: 38px; line-height: 0.97; } .layout-hero-wpg--home_statement .hero-subheadline { color: var(--c-dgrey); font-size: clamp(1.25rem, 1.25vw, 1.5rem); line-height: 1.34; } .layout-hero-wpg--home_statement .hero-media { align-self: end; margin-top: 0; overflow: visible; border-radius: 0; } .layout-hero-wpg--home_statement .hero-media img { width: min(553px, 100%); height: auto; max-height: 888px; aspect-ratio: auto; object-fit: contain; } .layout-hero-wpg--compact .hero-inner { grid-template-columns: minmax(0, 1188px); padding-top: clamp(170px, 10.4vw, 200px); } .layout-hero-wpg--compact h1 { white-space: nowrap; } .layout-hero-wpg--compact .hero-media, .layout-hero-wpg--background_only .hero-background img { display: none; } .layout-hero-wpg--background_only .hero-background { height: 100%; } @media (max-width: 1100px) { .layout-hero-wpg .hero-inner, .layout-hero-wpg--with_cards .hero-inner, .layout-hero-wpg--home_statement .hero-inner { grid-template-columns: 1fr; } .layout-hero-wpg .hero-media { width: min(740px, 100%); margin: 2rem 0 0; } .layout-hero-wpg .hero-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .layout-hero-wpg .hero-promo { position: relative; right: auto; bottom: auto; margin: 3rem auto 0; } } @media (max-width: 720px) { .layout-hero-wpg { padding-bottom: var(--hero-padding-bottom, 7.5rem); } .layout-hero-wpg .hero-inner, .layout-hero-wpg--with_cards .hero-inner, .layout-hero-wpg--home_statement .hero-inner, .layout-hero-wpg--compact .hero-inner { width: min(100% - 2rem, 1440px); padding-top: 150px; } .layout-hero-wpg h1 { /* 11.7vw statt 13vw: bei 393px genau das 46px-Minimum (Design-Messung: Ink-Hoehe 43px = ~46px Schrift); 13vw ergab dort schon 51px */ font-size: clamp(46px, 11.7vw, 4.5rem) !important; line-height: 1.08; } .layout-hero-wpg--compact h1 { white-space: normal; } .layout-hero-wpg .hero-subheadline { font-size: clamp(1.75rem, 8vw, 2.5rem); } .layout-hero-wpg .hero-ctas { margin-top: 2rem; } .layout-hero-wpg .hero-cta, .layout-hero-wpg .hero-cta--primary, .layout-hero-wpg .hero-cta--secondary { width: auto; min-width: 0; } .layout-hero-wpg .hero-cards { grid-template-columns: 1fr; width: min(100% - 2rem, 1440px); } .layout-hero-wpg .hero-card { min-height: 0; } .layout-hero-wpg .hero-promo { grid-template-columns: 1fr; padding: 1.5rem; } .layout-hero-wpg .hero-promo img { height: auto; aspect-ratio: 4 / 3; } } .archive-events--talents { --events-pink: #d9256d; --events-blue: #0f4f7a; --events-text: #323236; --events-muted: rgba(50, 50, 54, 0.68); --events-soft: #f2f6f8; padding: 0; gap: 0; background: var(--c-white); color: var(--events-text); font-family: "futura-pt", sans-serif; } .archive-events--talents * { box-sizing: border-box; } .archive-events--talents .archive-events__inner { width: min(1260px, 100% - 3rem); margin: 0 auto; } @media (max-width: 1180px) { .archive-events--talents .archive-events__inner { width: calc(100% - 2rem); } } .archive-events--talents .archive-events__intro { padding: 7.5rem 0 6rem; } @media (max-width: 1180px) { .archive-events--talents .archive-events__intro { padding: 4.5rem 0 3.5rem; } } .archive-events--talents .archive-events__heading { display: flex; align-items: baseline; gap: 2rem; margin-bottom: 42px; } @media (max-width: 1180px) { .archive-events--talents .archive-events__heading { display: block; margin-bottom: 1.75rem; } } .archive-events--talents .archive-events__heading h1 { margin: 0; font-size: clamp(54px, 6.3vw, 6rem); line-height: 0.92; font-weight: 800; letter-spacing: 0; } .archive-events--talents .archive-events__heading p { margin: 0; max-width: 520px; font-size: clamp(1.25rem, 2vw, 30px); line-height: 1.05; font-weight: 800; } @media (max-width: 1180px) { .archive-events--talents .archive-events__heading p { margin-top: 0.75rem; } } .archive-events--talents .archive-events__filters { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; margin-bottom: 2.75rem; } @media (max-width: 1180px) { .archive-events--talents .archive-events__filters { display: grid; gap: 1.25rem; margin-bottom: 2rem; } } .archive-events--talents .archive-events__filter-group { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .archive-events--talents .archive-events__filter-group > span { margin-right: 0.25rem; font-size: 1rem; line-height: 1.1; font-weight: 800; } .archive-events--talents .archive-events__filter-group button { appearance: none; border: 1px solid rgba(50, 50, 54, 0.18); border-radius: 999px; background: var(--c-white); color: rgba(50, 50, 54, 0.75); min-height: 2.5rem; padding: 0 1.5rem; font: inherit; font-size: 1rem; line-height: 1; font-weight: 800; cursor: pointer; transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .archive-events--talents .archive-events__filter-group button.is-active, .archive-events--talents .archive-events__filter-group button:hover { color: var(--c-white); border-color: var(--events-pink); background: var(--events-pink); } .archive-events--talents .archive-events__grid { display: grid; gap: 26px; } .archive-events--talents .archive-events__card { display: grid; grid-template-columns: minmax(240px, 418px) 1fr; min-height: 243px; overflow: hidden; border: 1px solid rgba(50, 50, 54, 0.16); border-radius: 18px; background: var(--c-white); } .archive-events--talents .archive-events__card[hidden] { display: none; } @media (max-width: 1180px) { .archive-events--talents .archive-events__card { grid-template-columns: 1fr; } } .archive-events--talents .archive-events__card--featured { grid-template-columns: 1fr 1fr; min-height: 474px; margin-bottom: 18px; } @media (max-width: 1180px) { .archive-events--talents .archive-events__card--featured { grid-template-columns: 1fr; min-height: 0; } } .archive-events--talents .archive-events__card--featured .archive-events__content { padding: 54px 3.75rem; } @media (max-width: 1180px) { .archive-events--talents .archive-events__card--featured .archive-events__content { padding: 1.75rem 1.5rem; } } .archive-events--talents .archive-events__card--featured h2 { max-width: 520px; font-size: clamp(34px, 3.7vw, 3.5rem); line-height: 0.96; } .archive-events--talents .archive-events__card--featured p { max-width: 520px; font-size: 1.25rem; line-height: 1.25; } .archive-events--talents .archive-events__media { display: block; min-height: 100%; background: var(--events-soft); } @media (max-width: 1180px) { .archive-events--talents .archive-events__media { aspect-ratio: 16/10; min-height: auto; } } .archive-events--talents .archive-events__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .archive-events--talents .archive-events__content { display: flex; flex-direction: column; padding: 30px 34px 1.75rem; } @media (max-width: 1180px) { .archive-events--talents .archive-events__content { padding: 1.5rem 1.25rem; } } .archive-events--talents .archive-events__meta-top, .archive-events--talents .archive-events__details, .archive-events--talents .archive-events__actions { display: flex; align-items: center; flex-wrap: wrap; } .archive-events--talents .archive-events__meta-top { gap: 0.75rem; margin-bottom: 18px; } .archive-events--talents .archive-events__pill, .archive-events--talents .archive-events__label { display: inline-flex; align-items: center; justify-content: center; min-height: 1.75rem; border-radius: 999px; padding: 0 14px; font-size: 14px; line-height: 1; font-weight: 800; } .archive-events--talents .archive-events__pill { color: var(--c-white); background: var(--events-pink); } .archive-events--talents .archive-events__label { color: var(--events-pink); background: rgba(217, 37, 109, 0.1); } .archive-events--talents h2 { margin: 0; max-width: 720px; font-size: clamp(30px, 3vw, 2.75rem); line-height: 1; font-weight: 800; letter-spacing: 0; } .archive-events--talents h2 a { color: inherit; text-decoration: none; } .archive-events--talents p { margin: 18px 0 0; color: var(--events-muted); font-size: 18px; line-height: 1.35; font-weight: 500; } .archive-events--talents .archive-events__details { gap: 18px 1.75rem; margin-top: auto; padding-top: 1.5rem; color: rgba(50, 50, 54, 0.75); font-size: 1rem; line-height: 1; font-weight: 800; } .archive-events--talents .archive-events__details span { display: inline-flex; align-items: center; gap: 9px; } .archive-events--talents .archive-events__details i { color: var(--events-pink); font-size: 18px; } .archive-events--talents .archive-events__actions { gap: 0.75rem; margin-top: 1.5rem; } .archive-events--talents .archive-events__actions .button { min-height: 42px; border-radius: 999px; padding: 0 1.5rem; font-size: 1rem; font-weight: 800; } .archive-events--talents .archive-events__actions .button-primary { border-color: var(--events-pink); background: var(--events-pink); color: var(--c-white); } .archive-events--talents .archive-events__actions .button-secondary { border-color: rgba(50, 50, 54, 0.18); background: var(--c-white); color: rgba(50, 50, 54, 0.78); } .archive-events--talents .archive-events__empty { margin: 2.25rem 0 0; font-size: 1.25rem; font-weight: 800; } .archive-events--talents .archive-events__more { display: flex; justify-content: center; margin-top: 42px; } .archive-events--talents .archive-events__more[hidden] { display: none; } .archive-events--talents .archive-events__more .button { min-height: 42px; border-radius: 999px; border-color: var(--events-pink); background: var(--events-pink); color: var(--c-white); padding: 0 1.5rem; font-size: 1rem; font-weight: 800; } .archive-events--talents .archive-events__cta { padding: 0 0 6.5rem; background: var(--c-white); } @media (max-width: 1180px) { .archive-events--talents .archive-events__cta { padding-bottom: 4rem; } } .archive-events--talents .archive-events__cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } @media (max-width: 1180px) { .archive-events--talents .archive-events__cta-grid { grid-template-columns: 1fr; } } .archive-events--talents .archive-events__newsletter, .archive-events--talents .archive-events__talents-card { min-height: 300px; border-radius: 1rem; padding: 34px; } @media (max-width: 1180px) { .archive-events--talents .archive-events__newsletter, .archive-events--talents .archive-events__talents-card { min-height: 0; padding: 26px 1.25rem; } } .archive-events--talents .archive-events__newsletter h2, .archive-events--talents .archive-events__talents-card h2 { max-width: 430px; font-size: clamp(34px, 3.2vw, 50px); } .archive-events--talents .archive-events__newsletter p, .archive-events--talents .archive-events__talents-card p { max-width: 430px; } .archive-events--talents .archive-events__newsletter { background: var(--events-soft); } .archive-events--talents .archive-events__newsletter-form { display: flex; gap: 10px; margin-top: 26px; } @media (max-width: 1180px) { .archive-events--talents .archive-events__newsletter-form { display: grid; } } .archive-events--talents .archive-events__newsletter-form input, .archive-events--talents .archive-events__newsletter-form button { min-height: 46px; border-radius: 999px; font: inherit; font-size: 1rem; font-weight: 800; } .archive-events--talents .archive-events__newsletter-form input { min-width: 0; flex: 1; border: 1px solid rgba(50, 50, 54, 0.14); background: var(--c-white); padding: 0 18px; } .archive-events--talents .archive-events__newsletter-form button { border: 0; background: var(--events-pink); color: var(--c-white); padding: 0 1.5rem; cursor: pointer; } .archive-events--talents .archive-events__talents-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; color: var(--c-white); background: radial-gradient(circle at 85% 30%, rgba(126, 248, 151, 0.95) 0 16%, transparent 17%), linear-gradient(135deg, #0f4f7a 0%, #09778c 100%); } .archive-events--talents .archive-events__talents-card::after { content: "W"; position: absolute; right: -14px; bottom: -54px; color: rgba(255, 255, 255, 0.1); font-size: 240px; line-height: 0.8; font-weight: 800; } .archive-events--talents .archive-events__talents-card > * { position: relative; z-index: 1; } .archive-events--talents .archive-events__talents-card p { color: rgba(255, 255, 255, 0.78); } .archive-events--talents .archive-events__talents-card a { display: inline-flex; align-items: center; justify-content: center; width: max-content; min-height: 42px; margin-top: 34px; border-radius: 999px; background: var(--c-white); color: var(--events-text); padding: 0 1.5rem; font-size: 1rem; line-height: 1; font-weight: 800; text-decoration: none; } .archive-events--talents { --events-filter-active: var(--c-blue); } .archive-events--talents .archive-events__filter-group button.is-active, .archive-events--talents .archive-events__filter-group button:hover { border-color: var(--events-filter-active); background: var(--events-filter-active); } .archive-events--talents .archive-events__grid { grid-template-columns: 1fr; gap: 1.75rem; } .archive-events--talents .archive-events__card { box-shadow: none; } .archive-events--talents .archive-events__card--featured, .archive-events--talents .archive-events__card.is-current-featured { display: grid; grid-template-columns: minmax(0, 627px) minmax(0, 1fr); min-height: 474px; } .archive-events--talents .archive-events__card.is-current-featured .archive-events__content { padding: 54px 3.75rem; } .archive-events--talents .archive-events__card.is-current-featured h2 { max-width: 520px; font-size: clamp(34px, 3.7vw, 3.5rem); line-height: 0.96; } .archive-events--talents .archive-events__card.is-current-featured p { max-width: 520px; font-size: 1.25rem; line-height: 1.25; } .archive-events--talents .archive-events__card:not(.archive-events__card--featured):not(.is-current-featured) { display: grid; grid-template-columns: minmax(260px, 418px) minmax(0, 1fr); min-height: 243px; border: 0; background: transparent; gap: 0; } .archive-events--talents .archive-events__card:not(.archive-events__card--featured):not(.is-current-featured) .archive-events__media { min-height: 0; aspect-ratio: 418 / 243; border-radius: 18px; overflow: hidden; } .archive-events--talents .archive-events__card:not(.archive-events__card--featured):not(.is-current-featured) .archive-events__content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 236px); grid-template-rows: auto auto 1fr; column-gap: 2rem; min-height: 243px; margin-left: 1.5rem; padding: 1.75rem 2rem; border: 1px solid rgba(50, 50, 54, 0.16); border-radius: 18px; background: var(--c-white); } .archive-events--talents .archive-events__card:not(.archive-events__card--featured):not(.is-current-featured) .archive-events__content::after { content: ""; grid-column: 2; grid-row: 1 / 4; align-self: stretch; width: 1px; background: var(--c-grey); } .archive-events--talents .archive-events__card:not(.archive-events__card--featured):not(.is-current-featured) .archive-events__meta-top, .archive-events--talents .archive-events__card:not(.archive-events__card--featured):not(.is-current-featured) h2, .archive-events--talents .archive-events__card:not(.archive-events__card--featured):not(.is-current-featured) p { grid-column: 1; } .archive-events--talents .archive-events__card:not(.archive-events__card--featured):not(.is-current-featured) h2 { max-width: 520px; font-size: clamp(1.75rem, 2.4vw, 38px); line-height: 1.08; } .archive-events--talents .archive-events__card:not(.archive-events__card--featured):not(.is-current-featured) p { max-width: 540px; font-size: 17px; line-height: 1.32; } .archive-events--talents .archive-events__card:not(.archive-events__card--featured):not(.is-current-featured) .archive-events__details { grid-column: 2; grid-row: 1; align-self: start; flex-direction: column; align-items: flex-start; gap: 1rem; margin: 0.5rem 0 0; padding: 0 0 0 2rem; z-index: 1; } .archive-events--talents .archive-events__card:not(.archive-events__card--featured):not(.is-current-featured) .archive-events__actions { grid-column: 2; grid-row: 3; align-self: end; justify-content: flex-start; margin: 0; padding-left: 2rem; z-index: 1; } .archive-events--talents .archive-events__card:not(.archive-events__card--featured):not(.is-current-featured) .archive-events__actions .button-secondary { display: none; } .archive-events--talents .archive-events__pill { border: 1px solid var(--c-grey); color: var(--c-dgrey); background: var(--c-white); font-weight: 500; } .archive-events--talents .archive-events__media--placeholder { display: flex; align-items: center; justify-content: center; background: var(--events-pink); } .archive-events--talents .archive-events__placeholder-logo { display: flex; align-items: center; justify-content: center; width: min(44%, 230px); } .archive-events--talents .archive-events__placeholder-logo img { width: 100%; height: auto; filter: brightness(0) invert(1); object-fit: contain; } @media (max-width: 1180px) { .archive-events--talents .archive-events__card--featured, .archive-events--talents .archive-events__card.is-current-featured, .archive-events--talents .archive-events__card:not(.archive-events__card--featured):not(.is-current-featured) { grid-template-columns: 1fr; min-height: 0; } .archive-events--talents .archive-events__card.is-current-featured .archive-events__content { padding: 1.75rem 1.5rem; } .archive-events--talents .archive-events__card:not(.archive-events__card--featured):not(.is-current-featured) { border: 1px solid rgba(50, 50, 54, 0.16); border-radius: 18px; background: var(--c-white); overflow: hidden; } .archive-events--talents .archive-events__card:not(.archive-events__card--featured):not(.is-current-featured) .archive-events__media { border-radius: 0; } .archive-events--talents .archive-events__card:not(.archive-events__card--featured):not(.is-current-featured) .archive-events__content { display: flex; min-height: 0; margin-left: 0; padding: 1.5rem 1.25rem; border: 0; border-radius: 0; } .archive-events--talents .archive-events__card:not(.archive-events__card--featured):not(.is-current-featured) .archive-events__content::after { display: none; } .archive-events--talents .archive-events__card:not(.archive-events__card--featured):not(.is-current-featured) .archive-events__details, .archive-events--talents .archive-events__card:not(.archive-events__card--featured):not(.is-current-featured) .archive-events__actions { padding-left: 0; } } /* Fehlerliste 2026-07-08 */ main > div.page-variant section p { line-height: 1.5rem; } main > div.page-variant > section.layout-flipcards-grid > .section-inner :is(.cols, .flipcards-mobile-slider) .front header { padding-right: 4rem; padding-left: 4rem; } main > div.page-variant > section.layout-flipcards-grid > .section-inner :is(.cols, .flipcards-mobile-slider) footer a { font-weight: var(--fw-medium); } main > div.page-variant > section.layout-posts-carousel > .section-inner-carousel .splide__slide article header img, main > div.page-variant > section.layout-posts-carousel > .section-inner-carousel .splide__slide article header .img-placeholder { border-radius: 0.75rem; } main > div.page-variant > section.layout-posts-carousel > .section-inner-carousel .splide__slide article .meta { margin-bottom: 0.75rem; } main > div.page-variant > section.layout-posts-carousel > .section-inner-carousel .splide__slide article .teaser { height: auto; min-height: calc(17px * 1.5 * 3); line-height: 1.5rem; margin-bottom: 0 !important; } main > div.page-variant > section.layout-posts-carousel > .section-inner-carousel .splide__arrows .splide__arrow, main > div.page-variant .splide__arrow { width: 2.75rem; height: 2.75rem; } main > div.page-variant > section.layout-posts-carousel > .section-inner-carousel .splide__arrows .splide__arrow svg, main > div.page-variant .splide__arrow svg { width: 1rem; height: 1rem; } main > div.page-variant > section.layout-ourbrand > .section-inner figure.cols figcaption { font-size: 1.25rem; line-height: 1.5rem; } main > div.page-variant > section.layout-ourbrand > .section-inner figure.cols .wt-bt.external-link { &:after { mask-image: var(--icon-arrow-external) !important; mask-size: contain; -webkit-mask-image: var(--icon-arrow-external) !important; -webkit-mask-size: contain; /* transform: none; */ } &:is(:hover, :focus)::after{ background-color: var(--c-white); transform: translateX( 0.125rem ); animation: none; } } main > div.page-variant > section.layout-accordion-grid > .section-inner summary p { color: var(--c-black); font-family: "Poppins", "futura-pt", Arial, sans-serif; font-size: 17px; font-weight: var(--fw-bold); } .layout-klartext .klartext-header { margin-bottom: 2rem; } .layout-klartext .intro, .layout-klartext .comparison-cliche, .layout-klartext .comparison-reality, .layout-klartext .comparison-labels { color: var(--c-dgrey); } .layout-klartext .intro, .layout-relevanz .intro, .layout-im-kern .intro { font-size: 17px; } .layout-relevanz .eyebrow { margin-bottom: 0.5rem; } .layout-relevanz .relevanz-card h3 { margin-bottom: 1.25rem; } .layout-relevanz .relevanz-cards { padding-bottom: 1.5rem; } .layout-relevanz .relevanz-cta { min-height: 2.5rem; margin-top: 1rem; padding: 0 2.5rem 0 1.5rem; font-size: 16px; } .layout-relevanz .relevanz-cta::after { width: 0.75rem; height: 0.75rem; mask-image: var(--icon-arrow-dio); -webkit-mask-image: var(--icon-arrow-dio); } .layout-im-kern .im-kern-more { margin-top: 4rem; } .layout-im-kern .more-icon img { width: 1.5rem; height: auto; } .layout-cta-duo .cta-duo-button::after { mask-image: var(--icon-arrow-dio); -webkit-mask-image: var(--icon-arrow-dio); } .layout-wir-fuer-dich .wir-link { display: inline-flex; width: fit-content; margin-top: 2rem; text-decoration: none; } /* Fehlerliste 2026-07-08 - Runde 2 */ main > div.page-variant :is(.wt-bt, .button, button, [class*="cta"], .hero-cta, .blog-overview__categories a) { font-weight: 600; } main > div.page-variant h3 { line-height: 1.3; } main > div.page-variant > section.layout-startoff-grid .tiles-list .hashtag, main > div.page-variant > section.layout-startoff-grid .tiles-list .hashtag .char { color: var(--c-pri); } main > div.page-variant > section.layout-startoff-grid .tiles-list a .tile::after { width: 0.85rem; height: 0.85rem; } main > div.page-variant > section.layout-flipcards-grid > .section-inner .cols .front header { padding-right: 4rem; padding-left: 4rem; } main > div.page-variant > section.layout-posts-carousel .section-inner-carousel .splide__slide article .meta { margin-bottom: 0.75rem !important; } .layout-audit-leistungen .audit-media-sticky, .layout-leistungsbereich .leistungsbereich-media-sticky { top: var(--pad-ctr-l); height: min(760px, calc(100vh - var(--pad-ctr-l) - var(--pad-ctr-l))); } .layout-audit-leistungen .factsheet-copy, .layout-leistungsbereich .factsheet-copy { padding: 0.5rem 0; } .layout-leistungsbereich .leistungsbereich-factsheet.has-download { align-items: center; } .layout-leistungsbereich .leistungsbereich-factsheet.has-download .factsheet-copy { align-self: center; } .layout-leistungsbereich .leistungsbereich-factsheet.has-arrow { align-items: flex-start; } .layout-leistungsbereich .leistungsbereich-factsheet.has-arrow .factsheet-copy, .layout-leistungsbereich .leistungsbereich-factsheet.has-arrow .factsheet-arrow { align-self: end; } .layout-audit-leistungen .factsheet-copy strong, .layout-leistungsbereich .factsheet-copy strong { font-weight: 600; } .layout-audit-leistungen .factsheet-arrow, .layout-leistungsbereich .factsheet-arrow { width: 21px; height: 21px; align-self: end; background-color: var(--c-pri); background-image: none; mask-image: var(--icon-arrow-external); mask-position: center; mask-repeat: no-repeat; mask-size: contain; -webkit-mask-image: var(--icon-arrow-external); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } .layout-leistungsbereich .factsheet-download, .layout-leistungsbereich .pdf-download { width: 2.75rem; height: 2.75rem; align-self: center; background-color: transparent; background-image: var(--icon-download-circle); background-position: center; background-repeat: no-repeat; background-size: contain; mask-image: none; -webkit-mask-image: none; } .layout-leistungsbereich .factsheet-download::before, .layout-leistungsbereich .pdf-download::before, .layout-leistungsbereich .factsheet-download::after, .layout-leistungsbereich .pdf-download::after { display: none; } .layout-leistungsbereich .leistungsbereich-factsheet { border-color: var(--c-grey); } .layout-leistungsbereich .card-text { width: min(600px, 100%); } .layout-audit-leistungen .audit-accordion-item, main > div.page-variant > section.layout-accordion-grid .item { transition: background-color var(--dur-slow) var(--ease-standard), color var(--dur-slow) var(--ease-standard); } .layout-audit-leistungen .audit-accordion-item:is(:hover, :focus-within) .item-toggle, main > div.page-variant > section.layout-accordion-grid .item:is(:hover, :focus-within) .icon-circle { background-color: var(--c-pri); fill: var(--c-pri); } .layout-audit-leistungen .audit-accordion-item:is(:hover, :focus-within) .item-toggle::before { border-color: var(--c-white); } main > div.page-variant > section.layout-accordion-grid .accordion-icon { width: 1.75rem; height: 1.75rem; } main > div.page-variant > section.layout-accordion-grid .item:is(:hover, :focus-within) .icon-chevron { stroke: var(--c-white); } .layout-fachbegriffe .letter-header { gap: 1rem; } .layout-fachbegriffe .term-toggle { background-color: var(--c-white); } .layout-fachbegriffe .term-toggle::before { width: 0.75rem; height: 0.75rem; border-right: 3px solid var(--c-pri); border-bottom: 3px solid var(--c-pri); border-radius: 0; background-color: transparent; transform: translate(-50%, -62%) rotate(45deg); } .layout-fachbegriffe .term-toggle::after { display: none; } .layout-fachbegriffe .term-accordion.is-expanded .term-toggle::before { transform: translate(-50%, -35%) rotate(225deg); } .layout-hero-wpg--compact .hero-intro, .layout-hero-wpg--background_only .hero-intro, .layout-fachbegriffe + .layout-hero-wpg .hero-intro { max-width: 720px; } .blog-overview-card--latest { box-shadow: none; } .blog-overview-card--featured { border-radius: 1.5rem; } .blog-overview-card--featured .blog-overview-card__image { border-radius: 1.25rem; } .blog-overview-card--latest { border-radius: 0.75rem; } .blog-overview-card--latest .blog-overview-card__image { border-radius: 10px; } .blog-overview-card--featured .blog-overview-card__arrow { width: 0.6rem; height: 0.6rem; } .blog-overview__pagination { margin-top: 2rem; } .blog-overview__pagination .prev, .blog-overview__pagination .next { position: relative; } .blog-overview__pagination .prev { padding-left: 2rem; } .blog-overview__pagination .next { padding-right: 2rem; } .blog-overview__pagination .prev::before, .blog-overview__pagination .next::after { content: ""; position: absolute; top: 50%; width: 0.65rem; height: 0.65rem; border-right: 0.125rem solid currentColor; border-bottom: 0.125rem solid currentColor; } .blog-overview__pagination .prev::before { left: 1rem; transform: translateY(-50%) rotate(135deg); } .blog-overview__pagination .next::after { right: 1rem; transform: translateY(-50%) rotate(-45deg); } main > div.page-variant > .blog-detail + .layout-posts-carousel .splide__slide article { border: 1px solid var(--c-grey); } @media (max-width: 603px) { main > div.page-variant section p, main > div.page-variant .hero-intro, main > div.page-variant .intro, main > div.page-variant .card-text, main > div.page-variant .teaser { font-size: 1rem; } main > div.page-variant .section-heads { gap: 1rem; } main > div.page-variant section p { margin-bottom: 0; } main > div.page-variant > section.layout-keylinks-grid > .section-inner { gap: 1.5rem; } .layout-wir-fuer-dich .wir-copy { padding-left: 1.5rem; } main > div.page-variant > section.layout-startoff-grid > .section-inner .cols .tiles-list-wrapper ul p { width: 240px; } main > div.page-variant > section.layout-startoff-grid > .section-inner .cols .tiles-list-wrapper ul .tile { display: flex; flex-direction: column; align-content: flex-start; justify-content: flex-start; } main > div.page-variant > section.layout-startoff-grid > .section-inner .cols .tiles-list > * { border-bottom: 1px solid var(--c-grey); } main > div.page-variant > section.layout-startoff-grid > .section-inner .cols .tiles-list > *:last-child { border-bottom: 0; } main > div.page-variant > section.layout-flipcards-grid > .section-inner .flipcards-mobile-slider { width: calc( 100vw - 2rem ); width: calc( 100vw - 2rem - 1.75rem ) !important; margin-right: 0; } main > div.page-variant > section.layout-flipcards-grid > .section-inner .flipcards-mobile-slider .splide__slide { width: calc( 100vw - 2rem ) !important; width: calc( 100vw - 2rem - 1.75rem ) !important; } main > div.page-variant > section.layout-flipcards-grid > .section-inner .flipcards-mobile-slider .splide__pagination { display: flex; justify-content: center; gap: 0.45rem; margin-top: 1rem; padding: 0; } main > div.page-variant > section.layout-flipcards-grid > .section-inner .flipcards-mobile-slider .splide__pagination__page { width: 0.5rem; height: 0.5rem; border-radius: 999px; } main > div.page-variant .splide__arrow { width: 2.75rem; height: 2.75rem; } main > div.page-variant > section.layout-ourbrand > .section-inner figure.cols { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 1.5rem !important; margin-bottom: 0 !important; figcaption { padding: 0; margin: 0; & p { margin: 0; } } } .layout-accordion-grid .faq-toggle-icon svg path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } #pageHeader nav, #pageHeader nav * { overflow-wrap: anywhere; word-break: break-word; } } /* Fehlerliste 2026-07-16 */ :root { --icon-chevron-rounded: url("/wp-content/themes/custom-theme/images/icon_chevron_rounded.svg"); } /* Einheitliche, abgerundete Chevrons */ .fa-chevron-right, .fa-chevron-left, .fa-chevron-down, .fa-chevron-up { display: inline-block; width: 0.57em; height: 1em; background-color: currentColor; font-size: 1rem; mask: var(--icon-chevron-rounded) center / contain no-repeat; -webkit-mask: var(--icon-chevron-rounded) center / contain no-repeat; } .fa-chevron-left { transform: rotate(180deg); } .fa-chevron-down { transform: rotate(90deg); } .fa-chevron-up { transform: rotate(-90deg); } .fa-chevron-right::before, .fa-chevron-left::before, .fa-chevron-down::before, .fa-chevron-up::before, main > div.page-variant .splide__arrow svg { display: none; } main > div.page-variant .splide__arrow::before { content: ""; display: block; width: 10px; height: 18px; background-color: var(--c-pri); mask: var(--icon-chevron-rounded) center / contain no-repeat; -webkit-mask: var(--icon-chevron-rounded) center / contain no-repeat; } main > div.page-variant .splide__arrow--prev::before { transform: rotate(180deg); } .layout-audit-leistungen .item-toggle::before, .layout-fachbegriffe .term-toggle::before { top: 50%; left: 50%; aspect-ratio: 1; width: 1rem; height: 1rem; border: 0; border-radius: 0; background-color: var(--c-pri); mask: var(--icon-chevron-rounded) center / contain no-repeat; -webkit-mask: var(--icon-chevron-rounded) center / contain no-repeat; transform: translate(-50%, -50%) rotate(90deg); } .layout-audit-leistungen .audit-accordion-item.is-expanded .item-toggle::before, .layout-fachbegriffe .term-accordion.is-expanded .term-toggle::before { top: 50%; background-color: var(--c-white); transform: translate(-50%, -50%) rotate(-90deg); } .layout-accordion-grid .accordion-icon { position: relative; } .layout-accordion-grid .accordion-icon .icon-chevron { display: none; } .layout-accordion-grid .accordion-icon::after { content: ""; position: absolute; top: 50%; left: 50%; aspect-ratio: 1; width: 1rem; height: 1rem; background-color: var(--c-pri); mask: var(--icon-chevron-rounded) center / contain no-repeat; -webkit-mask: var(--icon-chevron-rounded) center / contain no-repeat; transform: translate(-50%, -50%) rotate(90deg); } .layout-accordion-grid details[open] .accordion-icon::after, .layout-accordion-grid .item:is(:hover, :focus-within) .accordion-icon::after { background-color: var(--c-white); } .layout-accordion-grid details[open] .accordion-icon::after { transform: translate(-50%, -50%) rotate(-90deg); } /* Globale Button-Masse */ main > div.page-variant :is( a.wt-bt, a.button, button.button, .hero-cta, .wir-link, .relevanz-cta, .cta-duo-button, .filter-button, .blog-overview__categories a, .layout-fachbegriffe .empty-state button ) { box-sizing: border-box; height: 2.75rem; min-height: 2.75rem; padding-top: 0; padding-right: 1.5rem; padding-bottom: 0; padding-left: 1.5rem; } main > div.page-variant > section.layout-hero > .section-inner { gap: 3rem; } main > div.page-variant > section.layout-hero h1.headline, .layout-hero-wpg--home_statement h1 { margin-bottom: 2rem; } main > div.page-variant > section.layout-hero .shortcut-box-inner p::after { width: 1rem; height: 1rem; } main > div.page-variant > section.layout-startoff-grid .tiles-list a .tile::after { width: 1rem; height: 1rem; } main > div.page-variant > section.layout-posts-carousel .splide__arrow::before { width: 11px; height: 19px; } #legalNav ul li:last-child a { padding-right: 0; } /* Der Beruf */ .layout-klartext .comparison-arrow::after { inset: 9px; mask-image: var(--icon-arrow-dio); -webkit-mask-image: var(--icon-arrow-dio); } .layout-relevanz .relevanz-header, .layout-im-kern .im-kern-header { margin-bottom: 2rem; } .layout-relevanz .relevanz-cards { padding-bottom: 0; } .layout-relevanz .relevanz-cards > li:last-child { margin-bottom: 0; } .layout-relevanz .relevanz-cta { gap: 0.5rem; margin-top: 2rem; } .layout-relevanz .relevanz-cta::after, .layout-cta-duo .cta-duo-button::after { position: static; flex: 0 0 auto; transform: none; } .layout-im-kern .item-toggle::before, .layout-im-kern .item-toggle::after { background-color: var(--c-dgrey); transform: translate(-50%, -50%); } .layout-im-kern .item-toggle::after { transform: translate(-50%, -50%) rotate(90deg); } .layout-im-kern .im-kern-item.is-expanded .item-toggle { transform: rotate(45deg); } .layout-im-kern .im-kern-item.is-expanded .item-toggle::before, .layout-im-kern .im-kern-item.is-expanded .item-toggle::after { background-color: var(--c-white); } .layout-im-kern .im-kern-item.is-expanded .item-toggle::before { transform: translate(-50%, -50%); } .layout-im-kern .im-kern-item.is-expanded .item-toggle::after { transform: translate(-50%, -50%) rotate(90deg); } .layout-im-kern .more-icon { flex: 0 0 3rem; } .layout-im-kern .more-icon img { display: block; width: 1.5rem; max-width: 1.5rem; height: auto; max-height: 1.5rem; object-fit: contain; } .layout-menschen .menschen-thumb.is-active:not(:hover):not(:focus-visible) { box-shadow: none; transform: none; } .layout-cta-duo .cta-duo-button { gap: 0.5rem; } /* Taetigkeitsbereiche */ .layout-audit-leistungen .headline, .layout-leistungsbereich .headline { margin-bottom: 2rem; } .layout-leistungsbereich--tax-legal .leistungsbereich-factsheet, .layout-leistungsbereich--tax-legal a.leistungsbereich-factsheet:is(:hover, :focus-visible) { border-color: transparent; } .layout-leistungsbereich--esg-sustainability .leistungsbereich-cards > li:nth-child(3) .card-text { max-width: 450px; } /* Inhalts-Heros ohne Bild und Buttons */ .layout-hero-wpg.is-content-only, .layout-hero-talents-wpg.is-content-only { padding-bottom: 3.75rem; } main > div.page-variant > :is(.layout-hero-wpg, .layout-hero-talents-wpg).is-content-only + section { padding-top: 2.25rem; /* rest in nav wrapper */ } .layout-hero-wpg.is-content-only + .layout-fachbegriffe .fachbegriffe-results.section-inner, .layout-hero-talents-wpg.is-content-only + .layout-fachbegriffe .fachbegriffe-results.section-inner { padding-top: 3rem; } /* Mobil-Feinschliff nach Design-Messung und Review vom 27.08. (nur <=860px, Desktop bleibt unveraendert). Steht bewusst NACH den is-content-only-Regeln oben, die sonst gewinnen. */ @media (max-width: 860px) { .layout-hero-wpg.is-content-only, .layout-hero-talents-wpg.is-content-only { padding-bottom: 2rem; } main > div.page-variant > :is(.layout-hero-wpg, .layout-hero-talents-wpg).is-content-only + section { padding-top: 0; /* der Abstand zum Hero kommt aus dem Controls-Block */ } .layout-fachbegriffe .controls-inner { width: 100%; } .layout-fachbegriffe .controls-inner::after { content: none; /* Sticky-Fade: mobil sind die Controls nicht sticky, der Verlauf wusch nur die Buchstabenleiste aus */ } /* Pillen-Zeile laeuft wie im Design aus dem Bild: beschnitten wird erst an der Bildschirmkante, nicht am Containerrand — auch links, damit beim Scrollen nichts mitten im Bild abgehackt wird */ .layout-fachbegriffe .filter-list { width: calc(100% + 2rem); margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; } .layout-fachbegriffe .search-field input { height: 2.75rem; /* mindestens 44px hoch, wie die uebrigen Buttons */ } .layout-fachbegriffe .terms-count { margin-top: 1rem; } .layout-fachbegriffe .fachbegriffe-results.section-inner { width: 100%; /* !important: eine globale <=603px-Regel setzt .section-inner sonst auf 0.75rem-Polster (!important) und die Karten saessen bei 12px statt wie Suchfeld und Design bei 16px */ padding-left: 1rem !important; padding-right: 1rem !important; } .layout-hero-wpg.is-content-only + .layout-fachbegriffe .fachbegriffe-results.section-inner, .layout-hero-talents-wpg.is-content-only + .layout-fachbegriffe .fachbegriffe-results.section-inner { padding-top: 0.5rem; /* Zaehler -> Buchstabenleiste */ } /* Buchstabenleiste randlos mit 1px-Linie wie im Design; Linie und Beschnitt laufen bis an die Bildschirmkante, die 1rem-Innenpolster halten die Buchstaben vom Rand frei */ .layout-fachbegriffe .alphabet-nav { width: calc(100% + 2rem); margin: 0 -1rem 2rem; padding-left: 1rem; padding-right: 1rem; /* Linie beginnt 12px nach der linken Kante (Leons Vorgabe); border-image statt Pseudo-Element, weil ein ::after im Scroller mitscrollen wuerde */ border-bottom: 1px solid transparent; border-image: linear-gradient(to right, transparent 12px, var(--c-grey) 12px) 1; } .layout-fachbegriffe .letter-group { /* !important: die Buchstaben-Gruppen sind
-Elemente und erben sonst 16px bzw. 11.45vw Seitenpolster aus den globalen section-Regeln */ padding-left: 0 !important; padding-right: 0 !important; } .layout-fachbegriffe .letter-header { margin-bottom: 0.5rem; /* Grossbuchstabe -> erste Karte: 12px im Design */ } .layout-fachbegriffe .letter-header h2 { /* Versalhoehe im Design 45px => 64px Schrift; !important, weil die Basisregel ihre clamp-Groesse ebenfalls mit !important setzt */ font-size: 4rem !important; } /* 17px-Schriften laufen mobil generell auf 16px */ .layout-fachbegriffe .search-field input, .layout-fachbegriffe .filter-button, .layout-fachbegriffe .terms-count, .layout-fachbegriffe .alphabet-nav a, .layout-fachbegriffe .alphabet-nav span, .layout-fachbegriffe .letter-header p, .layout-fachbegriffe .accordion-content-inner, .layout-fachbegriffe .empty-state, .layout-fachbegriffe .empty-state button { font-size: 16px; } } .layout-fachbegriffe .terms-count { color: #787878; } .layout-fachbegriffe .term-accordion.is-expanded .term-toggle { background-color: var(--c-pri); } /* Blog-Uebersicht */ .blog-overview { padding-top: calc(var(--wi-nav-height) + 1.5rem); } .blog-overview__intro { width: min(1440px, calc(100vw - 3rem)); } .blog-overview-card__read-more { color: var(--c-pri); } .blog-overview-card:is(:hover, :focus-within) .blog-overview-card__read-more { color: var(--c-white); } .blog-overview-card--featured h3 { margin-bottom: 1.5rem; } .blog-overview-card--featured .blog-overview-card__excerpt { margin-bottom: 1rem; } .blog-overview__all-header { margin-bottom: 2rem; } .blog-overview__categories { margin-bottom: 1rem; } .blog-overview-card--featured .blog-overview-card__image, .blog-overview-card--featured .blog-overview-card__image img { border-radius: 1.25rem; } .blog-overview-card--latest .blog-overview-card__image, .blog-overview-card--latest .blog-overview-card__image img { border-radius: 10px; } .blog-overview-card--grid .blog-overview-card__image, .blog-overview-card--grid .blog-overview-card__image img { border-radius: 10px; } .blog-overview__pagination .prev::before, .blog-overview__pagination .next::after { width: 7px; height: 0.75rem; border: 0; background-color: var(--c-pri); mask: var(--icon-chevron-rounded) center / contain no-repeat; -webkit-mask: var(--icon-chevron-rounded) center / contain no-repeat; } .blog-overview__pagination .prev::before { transform: translateY(-50%) rotate(180deg); } .blog-overview__pagination .next::after { transform: translateY(-50%); } /* Blog-Detail: Trennlinie auf Inhaltsbreite begrenzen */ main > div.page-variant > .blog-detail + .layout-posts-carousel > .section-inner-carousel { position: relative; border-top: 0; } main > div.page-variant > .blog-detail + .layout-posts-carousel > .section-inner-carousel::before { content: ""; position: absolute; top: 0; left: 50%; width: min(1260px, calc(100% - 3rem)); border-top: 1px solid var(--c-grey); transform: translateX(-50%); } @media (max-width: 782px) { .blog-overview { padding-top: calc(var(--wi-nav-height-mobile) + 1.5rem); } } /* Audit und FAQ Accordions */ .layout-audit-leistungen .audit-accordion-item, main > div.page-variant > section.layout-accordion-grid .item { overflow: hidden; border-radius: 1rem; background: radial-gradient(circle at 56% 58%, rgba(216, 237, 249, 0.32) 0, rgba(176, 221, 245, 0.22) 56%, rgba(240, 248, 252, 0.58) 100%), #eef8fd; transition: background-color var(--dur-slow) var(--ease-standard); } main > div.page-variant > section.layout-accordion-grid .item:has(details:is([open], .is-expanded)) { background: radial-gradient(circle at 56% 58%, rgba(216, 237, 249, 0.32) 0, rgba(176, 221, 245, 0.22) 56%, rgba(240, 248, 252, 0.58) 100%), #eef8fd; } .layout-audit-leistungen .audit-accordion-item:is(:hover, :focus-within), main > div.page-variant > section.layout-accordion-grid .item:is(:hover, :focus-within) { background-color: #dff4ff; } main > div.page-variant > section.layout-accordion-grid .item summary { min-height: 5.25rem; padding: 1.75rem 2rem; } .layout-audit-leistungen .item-toggle, main > div.page-variant > section.layout-accordion-grid .accordion-icon { width: 2rem; height: 2rem; flex: 0 0 2rem; } .layout-audit-leistungen .item-toggle, main > div.page-variant > section.layout-accordion-grid .icon-circle { background-color: var(--c-white); fill: var(--c-white); transition: background-color var(--dur-slow) var(--ease-standard), fill var(--dur-slow) var(--ease-standard); } .layout-audit-leistungen .audit-accordion-item:is(:hover, :focus-within, [open], .is-expanded) .item-toggle, main > div.page-variant > section.layout-accordion-grid .item:is(:hover, :focus-within) .icon-circle, main > div.page-variant > section.layout-accordion-grid details:is([open], .is-expanded) .icon-circle { background-color: var(--c-pri); fill: var(--c-pri); } .layout-audit-leistungen .item-toggle::before, main > div.page-variant > section.layout-accordion-grid .accordion-icon::after { transition: background-color var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); } .layout-audit-leistungen .audit-accordion-item:is(:hover, :focus-within, [open], .is-expanded) .item-toggle::before, main > div.page-variant > section.layout-accordion-grid .item:is(:hover, :focus-within) .accordion-icon::after, main > div.page-variant > section.layout-accordion-grid details:is([open], .is-expanded) .accordion-icon::after { background-color: var(--c-white); } /* Talents Startseite: Hero und Angebotssuche */ main > div.page-variant > section.layout-hero-talents { position: relative; display: block; min-height: 855px; background: linear-gradient(180deg, var(--c-white) 0%, #f5f8fb 34%, #e7edf5 100%); overflow: visible; } main > div.page-variant > section.layout-hero-talents > .section-inner { display: flex; align-items: center; flex-direction: column; width: min( calc(100% - var(--talents-content-gutter)), calc(var(--talents-content-width) + var(--talents-content-gutter)) ); height: auto; min-height: 855px; margin: 0 auto; padding: 198px 2rem 290px 2rem; box-sizing: border-box; text-align: center; } .layout-hero-talents header, .layout-hero-talents .heads-wrapper { display: flex; align-items: center; flex-direction: column; width: 100%; } .layout-hero-talents .hero-talents-mark { width: 10rem; height: auto; margin-bottom: 1.25rem; line-height: 0; } .layout-hero-talents .hero-talents-mark svg { display: block; width: 100%; height: auto; } .layout-hero-talents h1.headline { width: 100%; max-width: 1120px; margin: 0 0 2rem; color: var(--c-black); font-family: var(--font-hl); font-size: clamp(4rem, 5vw, 6rem); font-weight: 700; line-height: 0.98; letter-spacing: 0; text-align: center; text-wrap: balance; } .layout-hero-talents p.intro { width: 100%; max-width: 600px; margin: 0; color: var(--c-dgrey); font-size: 1.25rem; font-weight: 400; line-height: 1.35; text-align: center; } .layout-hero-talents form.talents-job-filters--hero { width: min(100%, 640px); width: min(100%, 840px); margin: 4rem auto 0; padding: 0; } .layout-hero-talents .talents-job-filters--hero menu { display: grid; grid-template-columns: repeat( 3, 33.333% ); align-items: center; gap: 0; min-height: calc( 4rem + 2px ); margin: 0; padding: 0.25rem; border: 1px solid var(--c-grey-profile); border-radius: 9999px; background: var(--c-white); box-shadow: 0 0.125rem 5px rgba(34, 34, 34, 0.12); } .layout-hero-talents .talents-job-filters--hero menu > li { display: flex; align-items: center; flex-wrap: nowrap; gap: 0; min-width: 0; height: 100%; margin: 0; } .layout-hero-talents .hero-job-filter-field { position: relative; } .layout-hero-talents .hero-job-filter-location::after { position: absolute; top: 7px; right: 0; bottom: 7px; width: 1px; content: ""; background: var(--c-grey); } .layout-hero-talents .hero-job-filter-icon { display: block; flex: 0 0 17px; width: 17px; min-width: 17px; max-width: 17px; height: 17px; min-height: 17px; max-height: 17px; margin-left: 17px; border-radius: 0; object-fit: contain; } .layout-hero-talents .talents-job-filters--hero input:is( * , .is-empty , :focus ) , .layout-hero-talents .talents-job-filters--hero select:is( * , .is-empty , :focus ) { flex: 1 1 auto; min-width: 0; width: auto; height: 46px; margin: 0; padding: 0 14px 0 9px; border: 0 solid transparent !important; border-radius: 0; outline: 0; background-color: transparent !important; color: var(--c-dgrey); font-family: var(--font-def); font-size: var(--trurem); font-weight: 400; line-height: normal; box-shadow: none !important; } .layout-hero-talents .talents-job-filters--hero input::placeholder { color: var(--c-grey-profile); opacity: 1; } .layout-hero-talents .talents-job-filters--hero select { padding-right: 2rem; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='m1 1.5 5 5 5-5' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: right 14px center; background-repeat: no-repeat; background-size: 0.75rem 0.5rem; } .layout-hero-talents .hero-job-filter-submit { justify-content: stretch; } .layout-hero-talents .hero-job-filter-submit .wt-bt { width: 100%; min-height: 100%; height: 100%; padding: 0 2rem; border-radius: 999px; background-color: var(--c-pri); font-size: 1.25rem; font-weight: 600; } .layout-hero-talents .hero-job-filter-submit .wt-bt:is(:hover, :focus-visible) { background-color: #b01e54; } .layout-hero-talents .hero-job-filter-submit .wt-bt::after { display: none; content: none; } @media (max-width: 1180px) { main > div.page-variant > section.layout-hero-talents, main > div.page-variant > section.layout-hero-talents > .section-inner { min-height: 48.75rem; } main > div.page-variant > section.layout-hero-talents > .section-inner { padding-top: 180px; padding-bottom: 150px; } .layout-hero-talents h1.headline { max-width: 900px; font-size: clamp(58px, 7.2vw, 82px); } } @media (max-width: 782px) { main > div.page-variant > section.layout-hero-talents, main > div.page-variant > section.layout-hero-talents > .section-inner { min-height: 720px; } main > div.page-variant > section.layout-hero-talents > .section-inner { width: 100%; padding: 130px 1.25rem 6rem; } .layout-hero-talents .hero-talents-mark { width: 7.5rem; margin-bottom: 18px; } .layout-hero-talents h1.headline { margin-bottom: 1.5rem; font-size: clamp(42px, 11vw, 4rem); line-height: 1.03; } .layout-hero-talents p.intro { max-width: 480px; font-size: 17px; } .layout-hero-talents form.talents-job-filters--hero { margin-top: 2rem; } .layout-hero-talents .talents-job-filters--hero menu { grid-template-columns: 1fr; gap: 0; min-height: 0; padding: 0.5rem; border-radius: 1rem; } .layout-hero-talents .talents-job-filters--hero menu > li { height: 3rem; } .layout-hero-talents .hero-job-filter-location::after { top: auto; right: 0.75rem; bottom: 0; left: 0.75rem; width: auto; height: 1px; } .layout-hero-talents .hero-job-filter-submit { margin-top: 0.5rem; } .layout-hero-talents .hero-job-filter-submit .wt-bt { height: 2.75rem; min-height: 2.75rem; } } @media (max-width: 480px) { .layout-hero-talents h1.headline { font-size: 34px; line-height: 1.08; } } /* Talents Startseite: Intention-Tabber */ main > div.page-variant > section.layout-intention-tabber { position: relative; z-index: 4; padding: 0; background: transparent; } main > div.page-variant > section.layout-intention-tabber > .section-inner-tabber, main > div.page-variant > section.layout-intention-tabber > .section-inner-tabber.overlap { width: min(calc(100% - var(--talents-content-gutter)), var(--talents-content-width)); max-width: var(--talents-content-width); margin: -6.25rem auto 0; padding: 0; } main > div.page-variant > section.layout-intention-tabber .tabber-main { position: relative; z-index: 1; width: 100%; margin: 0; padding: 0 !important; border-radius: 1.25rem 1.25rem 0 0 !important; background: var(--c-white); overflow: visible; } .of-left { -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%); mask-image: linear-gradient(to right, transparent 0%, black 25%); } .of-right { -webkit-mask-image: linear-gradient(to right, black 75%, transparent 100%); mask-image: linear-gradient(to right, black 75%, transparent 100%); } .of-both { -webkit-mask-image: linear-gradient( to right, transparent 0%, black 25%, black 75%, transparent 100% ); mask-image: linear-gradient( to right, transparent 0%, black 25%, black 75%, transparent 100% ); } main > div.page-variant > section.layout-intention-tabber .tabber-nav-wrapper { position: relative; width: 100%; min-height: 6.25rem; padding: 0; border: 0; border-bottom: 1px solid var(--c-grey); border-radius: 1.25rem 1.25rem 0 0; background: var(--c-white); } main > div.page-variant > section.layout-intention-tabber .tabber-nav { position: relative; z-index: 3; display: grid !important; grid-template-columns: repeat(var(--tab-count, 1), minmax(0, 1fr)) !important; align-items: stretch; gap: 0 !important; width: 100%; max-width: 100%; min-height: 6.25rem; margin: 0; padding: 0 !important; list-style: none; } main > div.page-variant > section.layout-intention-tabber .tabber-nav > li { min-width: 0; margin: 0; min-width: fit-content; } main > div.page-variant > section.layout-intention-tabber .tabber-nav-bt { appearance: none; position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 6.25rem !important; margin: 0; padding: 1.5rem 1rem !important; border: 0 !important; border-radius: 0 !important; background: var(--c-white) !important; color: var(--c-grey-profile) !important; font-family: var(--font-hl); font-size: 1.25rem !important; font-weight: 600 !important; line-height: 1.2; text-align: center; cursor: pointer; } main > div.page-variant > section.layout-intention-tabber .tabber-nav li:first-child .tabber-nav-bt { border-radius: 1.25rem 0 0 !important; } main > div.page-variant > section.layout-intention-tabber .tabber-nav li:last-child .tabber-nav-bt { border-radius: 0 1.25rem 0 0 !important; } main > div.page-variant > section.layout-intention-tabber .tabber-nav-bt::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 0.125rem; content: ""; background: transparent; } main > div.page-variant > section.layout-intention-tabber .tabber-nav-bt:is(:hover, :focus-visible) { background: #f7f8fa !important; color: var(--c-blue) !important; outline: none; } main > div.page-variant > section.layout-intention-tabber .tabber-nav-bt.is-active { border-radius: 0 !important; background: #f5f7fa !important; color: var(--c-blue) !important; font-weight: 700 !important; } main > div.page-variant > section.layout-intention-tabber .tabber-nav li:first-child .tabber-nav-bt.is-active { border-radius: 1.25rem 0 0 !important; } main > div.page-variant > section.layout-intention-tabber .tabber-nav li:last-child .tabber-nav-bt.is-active { border-radius: 0 1.25rem 0 0 !important; } main > div.page-variant > section.layout-intention-tabber .tabber-nav-bt.is-active::after { background: var(--c-blue); } main > div.page-variant > section.layout-intention-tabber .tabber-people { pointer-events: none; position: absolute; top: 0px; right: 0px; bottom: auto; z-index: 4; width: 400px; height: 500px; } main > div.page-variant > section.layout-intention-tabber .tab-person { position: absolute; top: 0; right: 0; bottom: auto; width: 100%; margin: 0; opacity: 0; transform: translateX(1.5rem); transition: opacity 220ms ease, transform 320ms ease; } main > div.page-variant > section.layout-intention-tabber .tab-person.is-active { opacity: 1; transform: translateX(0); } main > div.page-variant > section.layout-intention-tabber .tab-person img { display: block; width: 100%; max-width: none; height: auto; margin: 0; border-radius: 0; object-fit: contain; width: 31rem; } main > div.page-variant > section.layout-intention-tabber .tab-person .person-mobile { display: none; } main > div.page-variant > section.layout-intention-tabber .tabber-contents { position: relative; width: 100%; min-height: 0; border-radius: 0; background: var(--c-white); overflow: hidden; } main > div.page-variant > section.layout-intention-tabber .tabber-contents .splide__track, main > div.page-variant > section.layout-intention-tabber .tabber-contents .splide__list { min-height: 0; } main > div.page-variant > section.layout-intention-tabber .tabber-content { display: grid !important; grid-template-areas: "texts image"; grid-template-columns: auto minmax(0, 600px); align-items: center; justify-content: space-between; column-gap: 6.25rem; row-gap: 34px; width: 100%; min-height: 0; margin: 0; padding: 1.5rem 1.5rem 2rem 4rem; box-sizing: border-box; } main > div.page-variant > section.layout-intention-tabber .tabber-content.has-info-cards { grid-template-areas: "texts image" "cards cards"; } main > div.page-variant > section.layout-intention-tabber .tabber-content > header { grid-area: texts; display: block !important; align-self: center; min-width: 0; margin: 0; } main > div.page-variant > section.layout-intention-tabber .tabber-content .section-heads { display: flex; align-items: flex-start; flex-direction: column; gap: 2rem; width: 100%; max-width: 430px; margin: 0; } main > div.page-variant > section.layout-intention-tabber .tabber-content .headline { width: 100%; margin: 0; color: var(--c-black); font-family: var(--font-hl); font-size: 3rem; font-weight: 700; line-height: 1.08; letter-spacing: 0; } main > div.page-variant > section.layout-intention-tabber .tabber-content p { width: 100%; max-width: 430px; margin-bottom: 0; padding: 0; color: var(--c-dgrey); font-size: 17px; font-weight: 400; line-height: normal; } main > div.page-variant > section.layout-intention-tabber .tabber-content p.tabber-info-card-number { margin-bottom: 1.5rem; line-height: 85%; } main > div.page-variant > section.layout-intention-tabber .tabber-content > *:is( img , .img-wrapper ) { grid-area: image; display: block; justify-self: end; width: 100%; max-width: 600px; height: auto; aspect-ratio: 3 / 2; margin: 0; border-radius: 1.25rem; object-fit: cover; } main > div.page-variant > section.layout-intention-tabber .tabber-info-cards { grid-area: cards; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; width: 100%; height: 0; margin: 0; padding: 0; list-style: none; } main > div.page-variant > section.layout-intention-tabber .tabber-content.is-active .tabber-info-cards { height: auto !important; } main > div.page-variant > section.layout-intention-tabber .tabber-info-cards > li { min-width: 0; margin: 0; } main > div.page-variant > section.layout-intention-tabber .tabber-info-card { min-height: 269px; height: 100%; padding: 2rem 2.5rem; border: 1px solid var(--c-grey); border-radius: 1rem; background: var(--c-white); box-sizing: border-box; } main > div.page-variant > section.layout-intention-tabber .tabber-info-card-number { margin: 0 0 1.5rem; color: var(--c-pri) !important; font-family: var(--font-hl); font-size: 2.5rem !important; font-weight: 600 !important; line-height: 1; } main > div.page-variant > section.layout-intention-tabber .tabber-info-card h3 { margin: 0 0 1rem; color: var(--c-black); font-family: var(--font-hl); font-size: 1.5rem !important; font-weight: 600; line-height: 1.2; } main > div.page-variant > section.layout-intention-tabber .tabber-info-card p:not(.tabber-info-card-number) { width: 100%; max-width: 290px; margin: 0; color: var(--c-dgrey); font-size: 17px; font-weight: 400; line-height: 1.42; } main > div.page-variant > section.layout-intention-tabber .tabber-carousels { display: block; width: 100%; margin: 0; padding: 0 0 7.5rem; overflow: hidden; } main > div.page-variant > section.layout-intention-tabber .tabber-carousels .section-inner-carousel { display: flex; flex-wrap: wrap; width: 100%; max-width: none; margin: 0; padding: 0; overflow: hidden; } main > div.page-variant > section.layout-intention-tabber .tabber-carousels form.talents-job-filters { flex: 0 0 100%; width: min(calc(100% - 4rem), 1260px); max-width: 1260px; margin: 0 auto; padding: 1rem 0 0 4rem; } main > div.page-variant > section.layout-intention-tabber .tabber-carousels form.talents-job-filters menu, main > div.page-variant > section.layout-intention-tabber .tabber-carousels form.talents-job-filters fieldset { gap: 0.75rem; margin: 0; padding: 0; } main > div.page-variant > section.layout-intention-tabber .tabber-carousels form.talents-job-filters label.wt-pill { min-height: 2.5rem; padding: 0.75rem 1.5rem; border: 1px solid var(--c-grey); background: var(--c-white); font-size: 17px; font-weight: 500; line-height: 1; color: var(--c-dgrey); } main > div.page-variant > section.layout-intention-tabber .tabber-carousels form.talents-job-filters input:checked + label.wt-pill, main > div.page-variant > section.layout-intention-tabber .tabber-carousels form.talents-job-filters label.wt-pill.active { border-color: var(--c-blue); background: var(--c-blue); color: var(--c-white); } main > div.page-variant > section.layout-intention-tabber .tabber-carousels .splide__track { flex: 0 0 100%; width: 100%; margin: 0; padding-top: 1rem; padding-bottom: 0; padding-left: calc( (100vw - 1260px) / 2 + 4rem ) !important; padding-right: calc((100vw - 1260px) / 2) !important; overflow: visible; } main > div.page-variant > section.layout-intention-tabber .tabber-carousels .splide__list { align-items: stretch; gap: 0; &.no-results:after { content: 'Keine Treffer für diese Filterung'; display: flex; align-items: center; max-width: 100%; height: 19rem; padding: 1rem; border: 1px solid var(--c-dgrey); border-radius: 1rem; font-size: 3rem; color: var(--c-dgrey); } } main > div.page-variant > section.layout-intention-tabber .tabber-carousels .tabber-carousel-item { width: 368px !important; min-width: 368px; max-height: 350px !important; } main > div.page-variant > section.layout-intention-tabber .tabber-carousels .job-card.tabber-carousel-item { border: 1px solid var(--c-grey); border-radius: 1rem; background: var(--c-white); box-shadow: none; overflow: hidden; } main > div.page-variant > section.layout-intention-tabber .tabber-carousels .job-card .job, main > div.page-variant > section.layout-intention-tabber .tabber-carousels .job-card .job-inner { height: 100% !important; min-height: 0 !important; } main > div.page-variant > section.layout-intention-tabber .tabber-carousels .job-card .job-inner { display: grid; grid-template-areas: "image" "info" "header" "contents"; grid-template-rows: 9.25rem auto auto minmax( 6.125rem, 1fr ) !important; /* gap: 0.5rem; */ /* a problem when there is no text */ gap: 0; padding: 0.5rem; background: var(--c-white); &.has-no-txt { grid-template-areas: "image" "info"; grid-template-rows: 9.25rem auto !important; } } main > div.page-variant > section.layout-intention-tabber .tabber-carousels .job-card .image { grid-area: image; width: 100%; max-height: 9.25rem; margin: 0; border-radius: 0.75rem; object-fit: cover; } main > div.page-variant > section.layout-intention-tabber .tabber-carousels .job-card .info, main > div.page-variant > section.layout-intention-tabber .tabber-carousels .job-card .header, main > div.page-variant > section.layout-intention-tabber .tabber-carousels .job-card .contents { margin: 0; padding-right: 0.25rem; padding-left: 0.25rem; } main > div.page-variant > section.layout-intention-tabber .tabber-carousels .job-card .info { padding-top: 0.75rem; } main > div.page-variant > section.layout-intention-tabber .tabber-carousels .job-card .header { padding-top: 0.5rem; } main > div.page-variant > section.layout-intention-tabber .tabber-carousels .job-card .header h4 { font-size: 17px; line-height: 1.2; } main > div.page-variant > section.layout-intention-tabber .tabber-carousels .job-card .contents { height: max( 2.5rem, 2.1lh ); max-height: 100%; overflow: hidden; font-size: 15px; line-height: 125%; } main > div.page-variant > section.layout-intention-tabber .tabber-carousels .carousel-menu { display: flex; flex: 0 0 100%; align-items: center; justify-content: space-between; gap: 1rem; order: 3; width: min(calc(100% - var(--talents-content-gutter)), var(--talents-content-width)); max-width: var(--talents-content-width); margin: 1.5rem auto 0; padding: 0 1.5rem 0 4rem; background: transparent; } main > div.page-variant > section.layout-intention-tabber .tabber-show-all { color: var(--c-white) !important; } main > div.page-variant > section.layout-intention-tabber .tabber-show-all::after { display: block; width: 0.6125rem; height: 0.6125rem; margin: 0 !important; content: ""; background: currentColor; mask: var(--icon-arrow-dio) center / contain no-repeat; -webkit-mask: var(--icon-arrow-dio) center / contain no-repeat; } main > div.page-variant > section.layout-intention-tabber .tabber-carousels .splide__arrows { position: static; display: flex; align-items: center; gap: 1rem; margin-left: auto; } main > div.page-variant > section.layout-intention-tabber .tabber-carousels .splide__arrow { position: static; width: 2.5rem; height: 2.5rem; margin: 0; border: 0; border-radius: 50%; background: #f0f0f0; box-shadow: none; opacity: 1; transform: none; } main > div.page-variant > section.layout-intention-tabber .tabber-carousels .splide__arrow svg { display: none !important; } main > div.page-variant > section.layout-intention-tabber .tabber-carousels .splide__arrow::before { display: block; width: 7px; height: 0.75rem; content: ""; background: var(--c-pri); mask: var(--icon-chevron-rounded) center / contain no-repeat; -webkit-mask: var(--icon-chevron-rounded) center / contain no-repeat; } main > div.page-variant > section.layout-intention-tabber .tabber-carousels .splide__arrow--prev::before { transform: rotate(180deg); } @media (max-width: 1324px) { main > div.page-variant > section.layout-intention-tabber .tabber-content { grid-template-columns: minmax(0, 0.85fr) minmax(20rem, 1fr); column-gap: 3rem; padding-right: 3rem; padding-left: 3rem; } main > div.page-variant > section.layout-intention-tabber .tabber-people { right: -0.5rem; width: min(32vw, 360px); } main > div.page-variant > section.layout-intention-tabber .tabber-carousels .splide__track { padding-left: 3rem !important; padding-right: 3rem !important; } main > div.page-variant > section.layout-intention-tabber .tabber-carousels form.talents-job-filters { padding-left: 3rem !important; padding-right: 3rem !important; } } @media (max-width: 900px) { main > div.page-variant > section.layout-intention-tabber > .section-inner-tabber, main > div.page-variant > section.layout-intention-tabber > .section-inner-tabber.overlap { width: calc(100% - 2.5rem); margin-top: -4.5rem; } main > div.page-variant > section.layout-intention-tabber .tabber-nav-wrapper, main > div.page-variant > section.layout-intention-tabber .tabber-nav { min-height: 4rem !important; } main > div.page-variant > section.layout-intention-tabber .tabber-nav { grid-template-columns: repeat(var(--tab-count, 1), minmax(150px, 1fr)); overflow-x: auto; } main > div.page-variant > section.layout-intention-tabber .tabber-nav-bt { min-height: 4.5rem; padding: 1rem 14px; font-size: 17px; } main > div.page-variant > section.layout-intention-tabber .tabber-people { display: none; } main > div.page-variant > section.layout-intention-tabber .tabber-content { grid-template-areas: "texts" "image" "cards" !important; grid-template-columns: minmax(0, 1fr) !important; gap: 2rem !important; padding: 2.5rem 2rem !important; } main > div.page-variant > section.layout-intention-tabber .tabber-content .headline { font-size: 42px; } main > div.page-variant > section.layout-intention-tabber .tabber-content > img { justify-self: stretch; max-width: none; } main > div.page-variant > section.layout-intention-tabber .tabber-info-cards { grid-template-columns: 1fr; } main > div.page-variant > section.layout-intention-tabber .tabber-info-card { min-height: 0; } } @media (max-width: 603px) { main > div.page-variant > section.layout-intention-tabber > .section-inner-tabber, main > div.page-variant > section.layout-intention-tabber > .section-inner-tabber.overlap { width: 100%; padding: 0 !important; margin-top: -3.5rem; } /* main > div.page-variant > section.layout-intention-tabber .tabber-main, */ main > div.page-variant > section.layout-intention-tabber .tabber-nav-wrapper { overflow-y: hidden; height: 4rem !important; border-radius: 1rem 1rem 0 0; } main > div.page-variant > section.layout-intention-tabber .tabber-nav-wrapper, main > div.page-variant > section.layout-intention-tabber .tabber-nav { width: fit-content; width: 100%; overflow-x: auto; scrollbar-width: none; &::-webkit-scrollbar { display: none; } } main > div.page-variant > section.layout-intention-tabber .tabber-nav { display: flex !important; width: max-content !important; height: 4rem !important; } main > div.page-variant > section.layout-intention-tabber .tabber-nav-bt { min-width: 6.25rem !important; min-height: 3.5rem !important; padding: 0.75rem; font-size: 1rem; font-weight: 700 !important; } main > div.page-variant > section.layout-intention-tabber .tabber-nav li { width: fit-content !important; } main > div.page-variant > section.layout-intention-tabber .tabber-nav li:first-child .tabber-nav-bt, main > div.page-variant > section.layout-intention-tabber .tabber-nav li:first-child .tabber-nav-bt.is-active { min-height: 4rem !important; width: fit-content !important; padding: 0.75rem !important; border-radius: 1rem 0 0 !important; } main > div.page-variant > section.layout-intention-tabber .tabber-nav li:last-child .tabber-nav-bt.is-active { border-radius: 0 1rem 0 0; } main > div.page-variant > section.layout-intention-tabber .tabber-content { gap: 1.5rem; padding: 2.5rem 1.5rem !important; } main > div.page-variant > section.layout-intention-tabber .tabber-content .section-heads { gap: 1rem; padding: 0 1.5rem; } main > div.page-variant > section.layout-intention-tabber .tabber-content .headline { font-size: 1.75rem !important; line-height: 2rem !important; } main > div.page-variant > section.layout-intention-tabber .tabber-content > img { height: auto !important; } main > div.page-variant > section.layout-intention-tabber .tabber-content p, main > div.page-variant > section.layout-intention-tabber .tabber-info-card p:not(.tabber-info-card-number) { font-size: 1rem; line-height: normal !important; font-weight: 500 !important; } main > div.page-variant > section.layout-intention-tabber .tabber-content p { margin-top: 0.5rem !important; margin-bottom: 0 !important; } main > div.page-variant > section.layout-intention-tabber .tabber-info-card { padding: 1.5rem; } main > div.page-variant > section.layout-intention-tabber .tabber-info-card-number { margin-bottom: 18px; font-size: 34px; } main > div.page-variant > section.layout-intention-tabber .tabber-info-card h3 { font-size: 21px !important; } main > div.page-variant > section.layout-intention-tabber .tabber-carousels form.talents-job-filters, main > div.page-variant > section.layout-intention-tabber .tabber-carousels .carousel-menu { width: calc(100% - 3rem) !important; padding-left: 1.5rem !important; } main > div.page-variant > section.layout-intention-tabber .tabber-carousels .splide__track { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } main > div.page-variant > section.layout-intention-tabber .tabber-carousels .tabber-carousel-item { width: calc(100vw - 3rem) !important; min-width: calc(100vw - 3rem); } main > div.page-variant > section.layout-intention-tabber .tabber-carousels .carousel-menu { align-items: stretch; flex-direction: row; justify-content: space-between; } main > div.page-variant > section.layout-intention-tabber .tabber-show-all { order: 10; } main > div.page-variant > section.layout-intention-tabber .tabber-carousels .splide__arrows { justify-content: flex-end; width: auto !important; margin: 0; } } /* Talents Startseite: Logos-Conveyor */ main > div.page-variant > section.layout-logos-conveyor { position: relative; width: 100%; padding: 10rem 0 var(--talents-section-spacing); background: var(--c-white); overflow: hidden; } main > div.page-variant > section.layout-logos-conveyor > header { width: min(calc(100% - var(--talents-content-gutter)), var(--talents-content-width)); margin: 0 auto; } main > div.page-variant > section.layout-logos-conveyor .section-heads { display: flex !important; align-items: center; flex-direction: column; gap: 2rem !important; width: 100%; text-align: center; } main > div.page-variant > section.layout-logos-conveyor .headline { width: 100%; margin: 0; font-size: 110px; line-height: 1; } main > div.page-variant > section.layout-logos-conveyor .subhead { flex: 0 0 auto !important; width: 100%; margin: 0; color: var(--c-black); font-family: var(--font-hl); font-size: 1.5rem !important; font-weight: 600; line-height: 1.3 !important; } main > div.page-variant > section.layout-logos-conveyor > .conveyor:first-of-type { margin-top: 5rem; } main > div.page-variant > section.layout-logos-conveyor > .conveyor ~ .conveyor { margin-top: 4.5rem; margin-top: clamp( 0.5rem, 3.7vw, 4.5rem); } @keyframes conveyor-scroll { to { transform: translate3d(-50%, 0, 0); } } main > div.page-variant > section.layout-logos-conveyor { .conveyor { overflow: visible; width: 100%; height: clamp( 5.5rem, 20vw , 12rem ); .conveyor__track { display: flex; align-items: center; width: max-content; height: 100%; max-height: 100%; margin: 0; padding: 0; list-style: none; will-change: transform; animation: conveyor-scroll var(--conveyor-dur, 40s) linear infinite; animation-play-state: paused; .conveyor__item { flex: 0 0 auto; margin-inline-end: 3rem; height: 100%; max-height: 100%; a { height: 100%; max-height: 100%; } img { display: block; height: 100%; min-height: 100%; width: auto; object-fit: contain; } } } &.reverse .conveyor__track { animation-direction: reverse !important; } } } main > div.page-variant > section.layout-logos-conveyor:has( footer > .conveyor-toggle-wrapper > input:checked ) .conveyor .conveyor__track { animation-play-state: running; } /* @media (prefers-reduced-motion: reduce) { .layout-logos-conveyor .conveyor__track { animation-play-state: paused !important; } } */ main > div.page-variant > section.layout-logos-conveyor .conveyor .splide__list { align-items: center; } main > div.page-variant > section.layout-logos-conveyor .conveyor .splide__slide, main > div.page-variant > section.layout-logos-conveyor .conveyor .splide__slide > a { display: flex; align-items: center; justify-content: center; height: 6.5rem; } main > div.page-variant > section.layout-logos-conveyor .conveyor img { display: block; width: 180px; max-width: 100%; height: 6.25rem; margin: 0 auto; border-radius: 0; background: transparent; object-fit: contain; } main > div.page-variant > section.layout-logos-conveyor > footer { display: flex; justify-content: flex-end; width: min(calc(100% - var(--talents-content-gutter)), var(--talents-content-width)); margin: 4.5rem auto 0; } main > div.page-variant > section.layout-logos-conveyor > footer .conveyor-toggle-wrapper { display: flex; justify-content: flex-end; align-items: center; padding: 0 1rem; input { display: none; } label { position: relative; aspect-ratio: 1; width: 2rem; height: 2rem; &:after { margin: 0 !important; aspect-ratio: 1; width: 2rem; height: 2rem; min-height: 0; min-width: 0; padding: 0 !important; -webkit-mask-size: min( 1.5rem, 100% ); mask-size: min( 1.5rem, 100% ); -webkit-mask-position: center; mask-position: center; color: var(--c-grey-profile); } } input:checked + label:after { mask-image: var(--ico-pause-motion) !important; -webkit-mask-image: var(--ico-pause-motion) !important; } } main > div.page-variant > section.layout-logos-conveyor .logos-conveyor-show-all::after { display: block; width: 0.75rem; height: 0.75rem; content: ""; background: currentColor; mask: var(--icon-arrow-dio) center / contain no-repeat; -webkit-mask: var(--icon-arrow-dio) center / contain no-repeat; } @media (max-width: 900px) { main > div.page-variant > section.layout-logos-conveyor { padding: 7.5rem 0 6rem; } main > div.page-variant > section.layout-logos-conveyor > header, main > div.page-variant > section.layout-logos-conveyor > footer { width: calc(100% - 2.5rem); } main > div.page-variant > section.layout-logos-conveyor .headline { font-size: 4.5rem; } main > div.page-variant > section.layout-logos-conveyor .subhead { font-size: 1.25rem !important; } main > div.page-variant > section.layout-logos-conveyor > .conveyor:first-of-type { margin-top: 4rem; } main > div.page-variant > section.layout-logos-conveyor > .conveyor ~ .conveyor { margin-top: 3rem; margin-top: clamp( 0.25rem, 1.5vw, 3rem); } main > div.page-variant > section.layout-logos-conveyor .conveyor .splide__slide, main > div.page-variant > section.layout-logos-conveyor .conveyor .splide__slide > a { height: 5.5rem; } main > div.page-variant > section.layout-logos-conveyor .conveyor img { width: 150px; height: 5rem; } main > div.page-variant > section.layout-logos-conveyor > footer { margin-top: 3.5rem; } } @media (max-width: 603px) { main > div.page-variant > section.layout-logos-conveyor { padding: 5rem 0 4.5rem; } main > div.page-variant > section.layout-logos-conveyor > header, main > div.page-variant > section.layout-logos-conveyor > footer { width: calc(100% - 2rem); } main > div.page-variant > section.layout-logos-conveyor .section-heads { gap: 1rem !important; } main > div.page-variant > section.layout-logos-conveyor .headline { font-size: 3rem; } main > div.page-variant > section.layout-logos-conveyor .subhead { font-size: 17px !important; } main > div.page-variant > section.layout-logos-conveyor > .conveyor:first-of-type { margin-top: 3rem; } main > div.page-variant > section.layout-logos-conveyor > .conveyor ~ .conveyor { margin-top: 2rem; } main > div.page-variant > section.layout-logos-conveyor .conveyor .splide__slide, main > div.page-variant > section.layout-logos-conveyor .conveyor .splide__slide > a { height: auto; } main > div.page-variant > section.layout-logos-conveyor .conveyor img { width: 15rem; height: auto; } main > div.page-variant > section.layout-logos-conveyor > footer { margin-top: 2.5rem; flex-direction: column; justify-content: center; gap: 1rem; &> .conveyor-toggle-wrapper { justify-content: center; order: 10; } &> a.wt-bt { width: fit-content; margin: auto; max-width: 100%; } } } /* Talents Startseite: CTA vor dem Footer */ main > div.page-variant > section.layout-cta-talents { width: 100%; background: var(--c-white); } main > div.page-variant > section.layout-cta-talents > .section-inner { width: min(calc(100% - var(--talents-content-gutter)), var(--talents-content-width)); max-width: var(--talents-content-width); margin: 0 auto; padding: var(--talents-section-spacing) 0 !important; } main > div.page-variant > section.layout-cta-talents .cols { position: relative; display: grid; grid-template-columns: 42% 58%; grid-template-rows: 449px; align-items: end; gap: 0; width: 100%; height: 449px; padding: 0 !important; border-radius: var(--talents-card-radius); background: #e9f5fc; overflow: visible; isolation: isolate; } main > div.page-variant > section.layout-cta-talents .cols::before { border-radius: inherit; background-position: right -1rem center; } main > div.page-variant > section.layout-cta-talents .col-texts { display: flex; align-items: flex-start; align-self: stretch; flex-direction: column; gap: 2rem; width: 100%; min-height: 0; height: 449px; padding: 3rem 4rem; box-sizing: border-box; } main > div.page-variant > section.layout-cta-talents .col-texts > header { width: 100%; height: auto; margin: 0; } main > div.page-variant > section.layout-cta-talents #talents-cta-txt { display: flex; align-items: flex-start; flex-direction: column; gap: 1.75rem; width: 100%; height: auto; } main > div.page-variant > section.layout-cta-talents .headline, main > div.page-variant > section.layout-cta-talents .subhead { flex: 0 0 auto; width: 100%; margin: 0; } main > div.page-variant > section.layout-cta-talents .headline { max-width: 330px; font-size: 3rem; line-height: 115%; } main > div.page-variant > section.layout-cta-talents .cta-strike { position: relative; display: block; width: max-content; z-index: 0; } main > div.page-variant > section.layout-cta-talents .cta-strike::after { position: absolute; top: 55%; right: -3px; left: -3px; z-index: -1; height: 0.5rem; border-radius: 999px; content: ""; background: #7653a6; transform: rotate(-8deg); } main > div.page-variant > section.layout-cta-talents .subhead { max-width: 300px; color: var(--c-dgrey); font-family: var(--font-def); font-size: 1.25rem !important; font-weight: 600 !important; line-height: 1.5 !important; } main > div.page-variant > section.layout-cta-talents .cta-link { margin: auto 0 0; } main > div.page-variant > section.layout-cta-talents .cta-talents-button { display: inline-flex; width: auto !important; background: var(--c-pri) !important; } main > div.page-variant > section.layout-cta-talents .cta-talents-button::after { display: none !important; content: none !important; } main > div.page-variant > section.layout-cta-talents .col-image { display: flex; align-items: flex-end; justify-content: center; align-self: stretch; min-height: 0; height: 449px; overflow: visible; } main > div.page-variant > section.layout-cta-talents .col-image img { display: block; width: auto; max-width: none; height: 545px; margin: 0; object-fit: contain; } @media (max-width: 900px) { main > div.page-variant > section.layout-cta-talents > .section-inner { width: calc(100% - 2.5rem); padding: 6rem 0 !important; } main > div.page-variant > section.layout-cta-talents .cols { grid-template-columns: 1fr; grid-template-rows: auto 340px; height: auto; overflow: hidden; } main > div.page-variant > section.layout-cta-talents .col-texts { min-height: 360px; height: auto; padding: 2.5rem 2rem; } main > div.page-variant > section.layout-cta-talents #talents-cta-txt { align-items: flex-start; text-align: left; } main > div.page-variant > section.layout-cta-talents .col-image { height: 340px; } main > div.page-variant > section.layout-cta-talents .col-image img { height: 420px; } } @media (max-width: 603px) { main > div.page-variant > section.layout-cta-talents > .section-inner { width: calc(100% - 2rem); padding: 4.5rem 0 !important; } main > div.page-variant > section.layout-cta-talents .cols { grid-template-rows: auto 300px; border-radius: var(--talents-card-radius); } main > div.page-variant > section.layout-cta-talents .col-texts { min-height: 340px; padding: 2rem 1.5rem; } main > div.page-variant > section.layout-cta-talents #talents-cta-txt { gap: 1.5rem; } main > div.page-variant > section.layout-cta-talents .headline { font-size: 2.5rem !important; } main > div.page-variant > section.layout-cta-talents .subhead { font-size: 17px !important; } main > div.page-variant > section.layout-cta-talents .col-image { height: 300px; } main > div.page-variant > section.layout-cta-talents .col-image img { height: 360px; } } .layout-audit-leistungen .audit-content-block + .audit-content-block { padding-top: 120px; } /* * Zusatz-Styles fuer das ACF-Layout "Haltung". * Erwartet die Tokens, Typografie- und Button-Regeln aus talents-combined.css. */ .layout-haltung { justify-content: center; background-color: var(--c-lgrey); color: var(--c-black); } .layout-haltung .section-inner { width: min(100%, calc(var(--talents-content-width) + 4rem)); margin: 0 auto; } .layout-haltung .haltung-header { max-width: 1140px; margin-bottom: 2.5rem; } .layout-haltung .haltung-heads { align-items: baseline; gap: 1.5rem 3rem; margin-bottom: 1.5rem; } .layout-haltung .haltung-heads .subhead { flex: 0 1 auto; min-width: 0; } .layout-haltung .intro, .layout-haltung .haltung-card-intro, .layout-haltung .haltung-accordion-content { color: var(--c-dgrey); font-family: var(--font-def); font-size: var(--fs-body-lg); line-height: 1.35; } .layout-haltung .intro { width: min(100%, 720px); margin: 0; font-weight: var(--fw-medium); } .layout-haltung .haltung-values { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1.5rem; padding: 0; list-style: none; } .layout-haltung .haltung-values > li { display: flex; min-width: 0; min-height: 7.8125rem; padding: 1.5rem 1rem 1rem; border-radius: var(--rad-m); background-color: var(--c-white); flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; } .layout-haltung .haltung-value-icon { display: grid; width: 3rem; height: 3rem; margin-bottom: 0.75rem; overflow: hidden; place-items: center; } .layout-haltung .haltung-value-icon img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: unset; } .layout-haltung .haltung-values p { width: auto; margin: 0; color: var(--c-black); font-family: var(--font-hl); font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); line-height: 1; } .layout-haltung .haltung-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; align-items: start; } .layout-haltung .haltung-code-column { min-width: 0; } .layout-haltung .haltung-card { min-width: 0; padding: 2.5rem 3rem; border-radius: var(--rad-m); background-color: var(--c-white); } .layout-haltung .haltung-code-card { min-height: 35.9375rem; } .layout-haltung .haltung-society-card { min-height: 42rem; } .layout-haltung .haltung-card h3 { margin: 0 0 2rem; color: var(--c-black); font-family: var(--font-hl); font-size: clamp(2rem, 2.5vw, 3rem) !important; font-weight: var(--fw-bold); line-height: 1.15; } .layout-haltung .haltung-card-intro { width: min(100%, 450px); margin: 0 0 1.5rem; } .layout-haltung .haltung-checklist { display: grid; gap: 1.25rem; width: min(100%, 450px); margin: 0; padding: 0; list-style: none; } .layout-haltung .haltung-checklist li { position: relative; padding-left: 1.625rem; color: var(--c-dgrey); font-family: var(--font-def); font-size: var(--fs-body-lg); line-height: 1.35; } .layout-haltung .haltung-checklist li::before { content: ""; position: absolute; top: 0.28em; left: 0; width: 1rem; height: 0.8125rem; background-color: var(--c-pri); mask: var(--ico-haltung-check) center / contain no-repeat; -webkit-mask: var(--ico-haltung-check) center / contain no-repeat; } .layout-haltung .haltung-code-link { width: fit-content; margin-top: 2rem; padding-right: 1.5rem; padding-left: 1.5rem; text-decoration: none; } .layout-haltung .haltung-accordion { margin-top: 0.25rem; } .layout-haltung .haltung-accordion-item { border-bottom: 1px solid var(--c-grey); } .layout-haltung .haltung-accordion-item summary { display: grid; grid-template-columns: minmax(0, 1fr) 2.75rem; gap: 1rem; align-items: center; min-height: 5.8125rem; cursor: pointer; list-style: none; } .layout-haltung .haltung-accordion-item summary::-webkit-details-marker { display: none; } .layout-haltung .haltung-accordion-title { color: var(--c-black); font-family: var(--font-hl); font-size: clamp(1.25rem, 1.25vw, 1.5rem); font-weight: var(--fw-semibold); line-height: 1.375; } .layout-haltung .haltung-accordion-toggle { position: relative; display: block; width: 2.75rem; height: 2.75rem; border-radius: 50%; background-color: #e2e2e2; transition: background-color var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); } .layout-haltung .haltung-accordion-toggle::before, .layout-haltung .haltung-accordion-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0.9rem; height: 2px; border-radius: 2px; background-color: var(--c-dgrey); transform: translate(-50%, -50%); } .layout-haltung .haltung-accordion-toggle::after { transform: translate(-50%, -50%) rotate(90deg); } .layout-haltung .haltung-accordion-item[open] .haltung-accordion-toggle { background-color: var(--c-pri); transform: rotate(45deg); } .layout-haltung .haltung-accordion-item[open] .haltung-accordion-toggle::before, .layout-haltung .haltung-accordion-item[open] .haltung-accordion-toggle::after { background-color: var(--c-white); } .layout-haltung .haltung-accordion-content { width: min(100%, 450px); padding: 0 4rem 2rem 0; } .layout-haltung .haltung-accordion-content > :first-child { margin-top: 0; } .layout-haltung .haltung-accordion-content > :last-child { margin-bottom: 0; } @media (max-width: 1000px) { .layout-haltung .haltung-heads { display: grid; align-items: start; } .layout-haltung .haltung-values { grid-template-columns: repeat(3, minmax(0, 1fr)); } .layout-haltung .haltung-content { grid-template-columns: 1fr; } .layout-haltung .haltung-code-card, .layout-haltung .haltung-society-card { min-height: 0; } } @media (max-width: 603px) { .layout-haltung .haltung-header { margin-bottom: 2rem; } .layout-haltung .haltung-values { grid-template-columns: 1fr; } .layout-haltung .haltung-values > li { min-height: 0; padding: 1rem; flex-direction: row; gap: 1rem; text-align: left; } .layout-haltung .haltung-value-icon { flex: 0 0 3rem; margin: 0; } .layout-haltung .haltung-card { padding: 1.5rem; } .layout-haltung .haltung-card h3 { margin-bottom: 1.5rem; } .layout-haltung .haltung-checklist { gap: 1rem; } .layout-haltung .haltung-accordion-item summary { grid-template-columns: minmax(0, 1fr) 2.5rem; min-height: 5rem; } .layout-haltung .haltung-accordion-toggle { width: 2.5rem; height: 2.5rem; } .layout-haltung .haltung-accordion-content { padding-right: 0; } } @media (prefers-reduced-motion: reduce) { .layout-haltung .haltung-accordion-toggle { transition: none; } } /* ========================================================= DER BERUF — Abgleich mit Design und statischer Referenz (Runde vom 28.08.). Bewusst am Dateiende: die Overrides gewinnen so bei gleicher Spezifitaet gegen die Layout-Bloecke weiter oben. ========================================================= */ /* Klartext-Pfeil: im Design zeigt er waagerecht. Das Diagonal-Glyph (--icon-arrow-dio) bleibt, nur um 45 Grad gedreht; unter 900px dreht der Elternkreis um weitere 90 Grad — dann zeigt er nach unten, wie im Mobil-Design. */ .layout-klartext .comparison-arrow::after { transform: rotate(45deg); } /* "Das macht ein Wirtschaftsprüfer." laeuft im Design einzeilig — 640px reichen dafuer bei 48px Schrift nicht. */ .layout-im-kern .im-kern-heads .subhead { max-width: 720px; } /* Punkt hinter "Im Wandel" wie bei allen Sektionskoepfen; er kommt sonst aus hgroup.section-heads h2::after, dieser Kopf ist aber kein hgroup. */ .layout-im-wandel .im-wandel-header .headline::after { content: "."; display: inline; } /* Im Wandel: Rueckbau des Scroll-Pinnings auf die kompakte Sektion des Designs (fuenf Etappen nebeneinander; die Linie fuellt sich weiter ueber --wandel-progress aus dem Script). Das Pinning machte die Sektion ~2,5 Bildschirme hoch und schob den Zeitstrahl seitlich durch — beides gibt es im Design nicht. */ .layout-im-wandel { height: auto !important; min-height: 0 !important; } .layout-im-wandel .section-inner { position: relative; top: auto; min-height: 0; } .layout-im-wandel .timeline-viewport { overflow: visible; } .layout-im-wandel .timeline-track { width: auto; transform: none !important; transition: none; } /* KI-Plaketten der Bilder (Overlay unten rechts): das Markup fehlt in WordPress noch — siehe .work/wp-patches/beruf-ai-labels.md. Die Traeger-Styles liegen schon bereit. */ .layout-hero-wpg .hero-media, .layout-relevanz .card-image { position: relative; } .layout-hero-wpg .hero-media .ai-label, .layout-relevanz .card-image .ai-label { position: absolute; right: 10px; bottom: 10px; width: auto; height: 20px; } @media (max-width: 1100px) { /* Der Desktop-Hack fuer die vollbreite H1 (min-width: 100vw auf .hero-copy) darf nur gelten, solange zwei Spalten nebeneinander stehen — einspaltig schob er H1 und Foto rechts aus dem Bild (die H1 wurde hart beschnitten statt umzubrechen). */ .layout-hero-wpg--standard .hero-copy { min-width: 0; } } /* 17px-Schriften laufen mobil generell auf 16px (Konvention), Klartext-Kartenlabels ebenso. */ @media (max-width: 860px) { .layout-klartext .intro, .layout-relevanz .intro, .layout-relevanz .eyebrow, .layout-relevanz .text, .layout-im-kern .intro, .layout-im-kern .item-text, .layout-im-kern .item-link, .layout-im-kern .more-item p, .layout-haltung .intro, .layout-haltung .haltung-card-intro, .layout-haltung .haltung-checklist li, .layout-haltung .haltung-accordion-content, .layout-haltung .haltung-code-link, .layout-menschen .intro, .layout-im-wandel .intro, .layout-im-wandel .timeline-text, .layout-cta-duo .cta-duo-button, .layout-hero-wpg--standard .hero-cta { font-size: 16px; } .layout-klartext .comparison-cliche::before, .layout-klartext .comparison-reality::before { font-size: 16px; } } @media (max-width: 760px) { /* Die senkrechte Zeitstrahl-Linie sitzt im Track, der 34px eingerueckt ist — mit left: 11px lief sie mitten durch den Text statt durch die Punkte (deren Zentrum bei 11px der Sektion liegt). */ .layout-im-wandel .timeline-line { left: -23px; } .layout-im-wandel .timeline-year { margin-bottom: 1rem; } } @media (max-width: 720px) { /* "Wirtschaftsprüfer." passt bei 46px nicht in 361px — das Design trennt (Wirtschafts-/prüfer.); lang="de" liefert die Muster. */ .layout-hero-wpg--standard h1 { overflow-wrap: break-word; hyphens: auto; } /* Design: 28px — mit 31px brach "Vertrauen" in die zweite Zeile. */ .layout-hero-wpg--standard .hero-subheadline { font-size: clamp(1.5rem, 7.15vw, 2.5rem); line-height: 1.15; } .layout-hero-wpg--standard .hero-intro { font-size: 16px; line-height: 1.45; } /* Foto im Container (16px-Inset), Hoehe wie in der Referenz. */ .layout-hero-wpg--standard .hero-media { margin: 2rem 0 0; border-radius: 1rem; } .layout-hero-wpg--standard .hero-media img { aspect-ratio: auto; height: 200px; } } @media (max-width: 603px) { /* Kopfleiste (global): der Logo-Block lief mit max-width 275px auf 122px Hoehe auf und schob die Actions samt Burger rechts aus dem Bild. 185px entspricht dem Design. */ #pageHeader nav #logo-wrapper { max-width: 185px; } /* ---------- Sektionskoepfe: mobil zentriert wie im Design ---------- */ .layout-klartext .klartext-header, .layout-relevanz .relevanz-header, .layout-im-kern .im-kern-header, .layout-haltung .haltung-header, .layout-menschen .menschen-header, .layout-im-wandel .im-wandel-header { width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; text-align: center; } .page-variant :is(.layout-klartext, .layout-relevanz, .layout-im-kern, .layout-haltung, .layout-menschen, .layout-im-wandel) .headline { font-size: 44px !important; line-height: 1.1; } .page-variant :is(.layout-klartext, .layout-relevanz, .layout-im-kern, .layout-haltung, .layout-menschen, .layout-im-wandel) .subhead { font-size: 28px !important; line-height: 1.15; } .page-variant :is(.layout-klartext, .layout-relevanz, .layout-im-kern, .layout-haltung, .layout-menschen, .layout-im-wandel) .intro { max-width: 340px; margin-left: auto; margin-right: auto; text-align: center; line-height: 1.45; } /* ---------- Klartext: Wisch-Slider wie im Design ---------- */ /* Eine Karte plus Anschnitt der naechsten; der Scroller laeuft bis an beide Bildschirmkanten, die Karten stehen in Ruhe bei 16px (Konvention). Punkte/Pfeile des Designs braeuchten Script — bewusst ohne. */ .layout-klartext .comparison-rows { display: grid; grid-auto-flow: column; grid-auto-columns: 330px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 1rem; width: calc(100% + 1.5rem); margin-left: -0.75rem; margin-right: -0.75rem; padding: 0 1rem 0.25rem; border: 0; border-radius: 0; background: none; scrollbar-width: none; } .layout-klartext .comparison-rows::-webkit-scrollbar { display: none; } .layout-klartext .comparison-row { scroll-snap-align: start; align-content: start; padding: 1.5rem; border: 1px solid var(--c-grey); border-radius: 1rem; background-color: var(--c-white); } /* ---------- Relevanz: Kartenmasse ans Design ---------- */ .layout-relevanz .relevanz-card { gap: 1rem; padding: 0.5rem 0.5rem 1.5rem; } .layout-relevanz .card-content { padding: 0 1rem; } .layout-relevanz .relevanz-card h3 { font-size: 26px !important; line-height: 1.25; margin-bottom: 0.875rem; } /* Der harte Umbruch im ETF-Titel gehoert nur zum Desktop-Satz. */ .layout-relevanz .relevanz-card h3 br { display: none; } .layout-relevanz .card-image img { aspect-ratio: auto; height: 155px; border-radius: 1rem; } /* ---------- Im Kern: Akkordeon-Feinschliff ---------- */ .layout-im-kern .item-number { font-size: 16px; } .layout-im-kern .item-title { font-size: 28px; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; } .layout-im-kern .item-tag { font-size: 15px; } .layout-im-kern .item-toggle { width: 2.75rem; height: 2.75rem; } /* ---------- "Viel mehr": Wisch-Slider mit Mini-Karten ---------- */ .layout-im-kern .im-kern-more { margin-top: 2.5rem; padding-bottom: 1.5rem; } .layout-im-kern .im-kern-more h3 { font-size: 28px !important; line-height: 1.15; margin-bottom: 1.5rem; padding: 1.5rem 1.5rem 0; } .layout-im-kern .more-list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 258px; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 1.5rem; padding: 0 1.5rem; scrollbar-width: none; } .layout-im-kern .more-list::-webkit-scrollbar { display: none; } .layout-im-kern .more-list > li, .layout-im-kern .more-list > li:nth-child(odd), .layout-im-kern .more-list > li:first-child { scroll-snap-align: start; padding: 1rem; border: 1px solid var(--c-grey); border-radius: 1rem; } .layout-im-kern .more-item h4 { margin-bottom: 0.75rem; } /* ---------- Haltung: kompakte Werte-Chips wie im Design ---------- */ .layout-haltung .haltung-values { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem 0.75rem; } .layout-haltung .haltung-values > li { padding: 0.5rem; gap: 0.6875rem; border-radius: 0.75rem; } .layout-haltung .haltung-value-icon { flex-basis: 2rem; width: 2rem; height: 2rem; } .layout-haltung .haltung-values p { font-size: 16px; line-height: 1.2; } .layout-haltung .haltung-card h3 { font-size: 28px !important; line-height: 1.2; margin-bottom: 1rem; } .layout-haltung .haltung-accordion-title { font-size: 20px; line-height: 1.3; } .layout-haltung .haltung-accordion-item summary { grid-template-columns: minmax(0, 1fr) 2.75rem; min-height: 0; padding: 1.125rem 0; } .layout-haltung .haltung-accordion-toggle { width: 2.75rem; height: 2.75rem; } /* ---------- Menschen: Playlist hochkant wie im Design ---------- */ .layout-menschen .menschen-video-stage::after { content: "Weitere Stimmen"; order: 2; margin-bottom: -0.25rem; color: var(--c-dgrey); font-family: "Source Sans 3", "futura-pt", Arial, sans-serif; font-size: 15px; font-weight: 700; } .layout-menschen .menschen-active-list { order: 1; } .layout-menschen .menschen-thumbs { order: 3; grid-auto-columns: 288px; gap: 12px; scroll-snap-type: x mandatory; scroll-padding-left: 1rem; width: calc(100% + 1.5rem); margin-left: -0.75rem; margin-right: -0.75rem; padding: 0 1rem 0.25rem; scrollbar-width: none; } .layout-menschen .menschen-thumbs::-webkit-scrollbar { display: none; } .layout-menschen .menschen-thumb { grid-template-columns: 1fr; gap: 0; align-content: start; min-height: 0; padding: 7px 7px 14px; border-radius: 1rem; scroll-snap-align: start; } .layout-menschen .thumb-media { aspect-ratio: auto; height: 128px; border-radius: 12px; } .layout-menschen .thumb-copy { gap: 0.5rem; padding: 14px 8px 0; } .layout-menschen .thumb-title { font-size: 20px; } .layout-menschen .thumb-detail { font-size: 15px; } /* ---------- CTA-Duo ---------- */ .layout-cta-duo .cta-duo-card { padding: 1.5rem 2rem; border-radius: 1rem; } /* "Wirtschaftsprüfer?" lief ohne Trennung aus der Karte. */ .layout-cta-duo .cta-duo-content h2 { font-size: 36px !important; line-height: 1.17; margin-bottom: 1rem; overflow-wrap: break-word; hyphens: auto; } .layout-cta-duo .cta-duo-content p { font-size: 18px; line-height: 1.34; } /* Knopf und talents-Zeichen wie in der Referenz: Zeichen rechts, bei Umbruch in der Folgezeile rechtsbuendig. */ .layout-cta-duo .cta-duo-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; } .layout-cta-duo .cta-duo-logo { margin-left: auto; } .layout-cta-duo .cta-duo-logo img { max-width: 5rem; } } /* Der Beruf, Nachtrag: Kopf der Im-Kern-Sektion darf die volle Containerbreite nutzen — mit 1140px brach "Das macht ein Wirtschaftsprüfer." zweizeilig, im Design ist es einzeilig. */ .layout-im-kern .im-kern-header { width: 100%; } @media (max-width: 720px) { /* Abstand Foto -> Klartext wie im Design (~125px statt 185). */ .layout-hero-wpg--standard { padding-bottom: 1rem; } } @media (max-width: 603px) { /* Nachtrag zur Kopfleiste: die 185px begrenzen nur die Box — das SVG selbst zeichnete weiter 275x122 und ueberragte sie. Es muss in die Box (min-height 100% !important der Basisregeln gegenhalten). Die Startseite hat ihren eigenen Logo-Zustand und bleibt aussen vor. */ body:not(.home) #pageHeader nav #logo-wrapper :is(svg, img) { width: auto; height: auto; max-width: 100% !important; max-height: 100% !important; min-height: 0 !important; } } /* ========================================================= DER BERUF — Korrekturrunde Leon 28.08. ========================================================= */ /* Hero-Buttons: 48px unter dem Lead (war 80). Nur Desktop — mobil bleiben die 32px der 720er-Regel. */ @media (min-width: 721px) { .layout-hero-wpg--standard .hero-ctas { margin-top: 3rem; } } /* Sektionskoepfe: die H2-Zeile hat ueberall 32px Abstand nach unten (war gemischt 24-48px). */ .layout-klartext .klartext-heads, .layout-relevanz .relevanz-heads, .layout-im-kern .im-kern-heads, .layout-haltung .haltung-heads, .layout-menschen .menschen-heads { margin-bottom: 2rem; } .layout-im-wandel .im-wandel-header .headline { margin-bottom: 2rem; } /* Haltung: Feinabstaende der Korrekturrunde; die Gesellschaften- Karte richtet ihre Hoehe am Inhalt aus. */ .layout-haltung .haltung-accordion { margin-top: 0; } .layout-haltung .haltung-accordion-content { padding-bottom: 1.5rem; } .layout-haltung .haltung-society-card { min-height: 0; } /* Pfeile der "Weitere Stimmen"-Leiste (die Knoepfe erzeugt dist/talents.js) — Look der uebrigen Slider-Pfeile des Themes. */ .layout-menschen .menschen-thumbs-nav { display: none; } @media (max-width: 720px) { .layout-hero-wpg--standard .hero-copy { padding-left: 12px; } } @media (max-width: 603px) { /* Kopfabstaende mobil: H2-Zeile 24px, Kopf -> Inhalt 24px. */ .layout-klartext .klartext-heads, .layout-relevanz .relevanz-heads, .layout-im-kern .im-kern-heads, .layout-haltung .haltung-heads, .layout-menschen .menschen-heads, .layout-im-wandel .im-wandel-header .headline { margin-bottom: 1.5rem; } .layout-klartext .klartext-header, .layout-relevanz .relevanz-header, .layout-im-kern .im-kern-header, .layout-haltung .haltung-header, .layout-menschen .menschen-header, .layout-im-wandel .im-wandel-header { margin-bottom: 1.5rem; } /* Erste Klartext-Karte: die first-child-Regel der Desktop-Tabelle nahm ihr die obere Kante. */ .layout-klartext .comparison-row:first-child { border-top: 1px solid var(--c-grey); } .layout-im-kern .item-text { max-width: 300px; } /* Verantwortung-Chip laeuft ueber die volle Breite. */ .layout-haltung .haltung-values > li:last-child { grid-column: 1 / -1; } .layout-menschen .menschen-thumbs-nav { order: 4; display: flex; gap: 0.75rem; } .layout-menschen .thumbs-arrow { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: var(--c-white-mute); cursor: pointer; transition: background var(--dur-slow) var(--ease-standard); } .layout-menschen .thumbs-arrow:hover { background: var(--c-white-dmute); } .layout-menschen .thumbs-arrow svg { width: 1.1rem; height: 1.1rem; fill: var(--c-pri); } .layout-menschen .thumbs-arrow--prev svg { transform: scaleX(-1); } } /* ========================================================= DER BERUF — Korrekturrunde 2, 28.08. ========================================================= */ /* Hero mobil: 140px oben, 16px unten; Buttons -> Bild exakt 32px (der Grid-gap des Heros addierte sich zum margin-top des Bilds). */ @media (max-width: 720px) { .layout-hero-wpg--standard .hero-inner { padding-top: 140px; gap: 0; } } /* Relevanz-Stapel: Zwischenraeume als gap statt margin — margins zaehlen nicht zur Content-Box, in der sich Sticky-Karten bewegen duerfen, deshalb kollabierten die Streifen weiterhin zu frueh. Mit gap loest die letzte Karte zuerst (Konstruktion der statischen Referenz), der Versatz betraegt 2rem je Karte und der Abstand zum Button bleibt konstant. */ @media (min-width: 901px) { .layout-relevanz .relevanz-cards { display: flex; flex-direction: column; gap: 3rem; } .layout-relevanz .relevanz-cards > li { margin-bottom: 0; top: calc(var(--relevanz-sticky-top) + (var(--relevanz-stack-index, 0) * 2rem)); } .layout-relevanz .relevanz-cta { margin-top: 2rem; } } @media (max-width: 900px) { .layout-relevanz .relevanz-cta { margin-top: 1.5rem; } } /* Haltung: die Wertekodex-Karte ist nur so hoch wie ihr Inhalt, der Button sitzt direkt darunter; beide Spalten bleiben in der Hoehe unabhaengig. */ .layout-haltung .haltung-code-card { min-height: 0; } /* "Viel mehr"-Punkte gibt es nur im mobilen Slider. */ .layout-im-kern .more-dots { display: none; } /* Im Wandel mobil: unter dem Zeitstrahl schlicht 60px; die senkrechte Linie endet am letzten Punkt (Hoehe liefert dist/talents.js via --wandel-line-end). */ @media (max-width: 760px) { .layout-im-wandel { padding-bottom: 0; } .layout-im-wandel .section-inner { padding-bottom: 60px; } .layout-im-wandel .timeline-line { bottom: auto; height: var(--wandel-line-end, calc(100% - 1rem)); } } @media (max-width: 603px) { /* Im Kern: Zahl, Titelspalte (Titel, Tag, Text) und Knopf als drei oben ausgerichtete Spalten; Zahl 20px, 10px Abstand zum Titel. */ .layout-im-kern .im-kern-trigger { grid-template-columns: 1.75rem minmax(0, 1fr) 2.75rem; column-gap: 10px; align-items: start; padding: 1.5rem 0; } .layout-im-kern .item-number { grid-column: 1; grid-row: 1; padding-top: 0; font-size: 20px; line-height: 34px; /* Zeilenmass des 28px-Titels: Oberkanten fluchten */ } .layout-im-kern .item-title { grid-column: 2; grid-row: 1; } .layout-im-kern .item-tag { grid-column: 2; } .layout-im-kern .item-toggle { grid-column: 3; grid-row: 1; align-self: start; } .layout-im-kern .accordion-content-inner { padding-left: calc(1.75rem + 10px); } /* Punkte-Indikator des "Viel mehr"-Sliders (Knoepfe erzeugt dist/talents.js). */ .layout-im-kern .more-dots { display: flex; gap: 8px; justify-content: center; padding: 1.25rem 1.5rem 0; } .layout-im-kern .more-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--c-grey); cursor: pointer; transition: width var(--dur-slow) var(--ease-standard), background var(--dur-slow) var(--ease-standard); } .layout-im-kern .more-dot.is-active { width: 28px; background: var(--c-pri); } } /* ========================================================= DER BERUF — Korrekturrunde 3, 28.08. (mobil) ========================================================= */ @media (max-width: 760px) { /* Zeitstrahl-Abstaende: Titel 12px unter dem Jahr, Abschnitte 3rem. */ .layout-im-wandel .timeline-card h3 { margin-bottom: 12px; } .layout-im-wandel .timeline-items { gap: 3rem; } } @media (max-width: 603px) { /* Klartext: eine globale width-Regel machte die Textzellen breiter als die Karte — die Texte liefen bis an den Kartenrand, statt frueher umzubrechen. */ .layout-klartext .comparison-cliche, .layout-klartext .comparison-reality { width: auto !important; max-width: 100%; } /* Im Kern: 12px zwischen offenem Text und "Mehr erfahren" — gap und margin-top mischten sich vorher zu 42px. */ .layout-im-kern .accordion-content-inner { gap: 0.75rem; } .layout-im-kern .item-link { margin-top: 0; } /* Plus-Icons der Akkordeon-Knoepfe: 16px. */ .layout-im-kern .item-toggle::before, .layout-im-kern .item-toggle::after, .layout-haltung .haltung-accordion-toggle::before, .layout-haltung .haltung-accordion-toggle::after { width: 16px; } } @media (max-width: 603px) { /* Klartext-Durchstreichung mehrzeilig: der ::after-Balken laege bei zwei Zeilen mittig ZWISCHEN ihnen. Stattdessen malt ein Verlauf im Hintergrund jede Zeile einzeln durch (box-decoration-break), gleiche Animation ueber background-size. */ .layout-klartext .klartext-strike { display: inline; background-image: linear-gradient(var(--klartext-strike-color, var(--c-black)), var(--klartext-strike-color, var(--c-black))); background-repeat: no-repeat; background-position: 0 0.66em; background-size: 0% 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: color var(--klartext-strike-duration, 700ms) ease, background-size var(--klartext-strike-duration, 700ms) ease; } .layout-klartext .klartext-strike::after { content: none; } .layout-klartext .klartext-strike.is-struck { background-size: 100% 2px; } } /* ========================================================= DER BERUF — Klartext-Kartendetails, 28.08. ========================================================= */ /* Leiste unter dem Klartext-Slider gibt es nur mobil. */ .layout-klartext .klartext-nav { display: none; } @media (max-width: 603px) { .layout-klartext .comparison-row { position: relative; z-index: 0; /* eigener Stacking-Kontext: der Strich (z -1) liegt sonst hinter dem Kartenweiss */ overflow: hidden; padding: 20px 1.5rem; } /* Label -> Text 12px; "Die Wirklichkeit" in Magenta. */ .layout-klartext .comparison-cliche::before, .layout-klartext .comparison-reality::before { margin-bottom: 0.75rem; } .layout-klartext .comparison-reality::before { color: var(--c-pri); } /* Pfeil: 60px eingerueckt, 32px-Kreis mit 12px-Icon; die Haarlinie laeuft ueber die volle Karte (overflow der Karte schneidet sie an den Kanten), der weisse Ring haelt sie auf Abstand zum Kreis. */ .layout-klartext .comparison-arrow { justify-self: start; margin-left: 60px; box-shadow: 0 0 0 6px var(--c-white); transform: none; /* die 90-Grad-Drehung des Kreises saesse sonst auch am Strich */ } .layout-klartext .comparison-arrow::before { content: ""; position: absolute; top: 50%; right: -1000px; left: -1000px; z-index: -1; height: 1px; background: var(--c-grey); } .layout-klartext .comparison-arrow::after { inset: 10px; transform: rotate(135deg); /* Diagonal-Glyph zeigt nach unten */ } /* Leiste: Pfeile links, Punkte rechts (Knoepfe und Punkte erzeugt dist/talents.js). */ .layout-klartext .klartext-nav { display: flex; align-items: center; justify-content: space-between; margin: 1rem 0.25rem 0; } .layout-klartext .klartext-nav-arrows { display: flex; gap: 0.75rem; } .layout-klartext .slider-arrow { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: var(--c-white-mute); cursor: pointer; transition: background var(--dur-slow) var(--ease-standard); } .layout-klartext .slider-arrow:hover { background: var(--c-white-dmute); } .layout-klartext .slider-arrow svg { width: 1.1rem; height: 1.1rem; fill: var(--c-pri); } .layout-klartext .slider-arrow--prev svg { transform: scaleX(-1); } .layout-klartext .klartext-dots { display: flex; gap: 8px; } .layout-klartext .klartext-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--c-grey); cursor: pointer; transition: width var(--dur-slow) var(--ease-standard), background var(--dur-slow) var(--ease-standard); } .layout-klartext .klartext-dot.is-active { width: 28px; background: var(--c-pri); } } /* ========================================================= TAETIGKEITSBEREICHE — Abgleich mit Design und statischer Referenz (Runde vom 28.08.) ========================================================= */ /* Header: Der Wirtschaftspruefer/talents-Umschalter gehoert nur auf die Startseite. Das Template rendert ihn auf jeder Seite, die eine talents-Variante hat (pageHasVariant) — auf Unterseiten ausblenden. */ body:not(.home) #pageHeader nav .actions #global-toggle { display: none; } /* Bereichs-Headlines schliessen im Design mit einem Punkt ("Audit.", "Tax & Legal." …) in der Headline-Farbe. */ .layout-audit-leistungen .audit-content-block .headline::after, .layout-leistungsbereich.has-media .leistungsbereich-content .headline::after { content: "."; } /* Bilder der Bereichs-Spalten: Das Design zeigt stehende 415x553- Bilder; die Spalte ist nur so hoch wie ihr Inhalt statt auf Viewporthoehe gestreckt (das machte die Bilder ~830px hoch und liess unter kurzen Bildern die graue Figure-Flaeche stehen). */ .layout-audit-leistungen .audit-media-sticky, .layout-leistungsbereich.has-media .leistungsbereich-media-sticky { grid-template-rows: auto auto; height: auto; } .layout-audit-leistungen .audit-image img, .layout-leistungsbereich.has-media .leistungsbereich-image img { height: auto; aspect-ratio: 415 / 553; } /* Tax & Legal: Die PDF-Leiste steht im Design freistehend unter den beiden Karten (dorthin haengt dist/talents.js sie um); der doppelte PDF-Link in Karte 02 entfaellt im Design. */ .layout-leistungsbereich--tax-legal .leistungsbereich-items > .leistungsbereich-factsheet { margin-top: 1rem; align-items: center; min-height: 0; } .layout-leistungsbereich--tax-legal .card-pdf-link { display: none; } /* Hero: Auch die with_cards-Variante braucht den Umbruchschutz der Standard-Variante — min-width: 100vw der Kopie schob die Seite waagerecht auf; der 8.25rem-Spaltenabstand wurde im Einspalter zum Riesenloch vor dem Bild. */ @media (max-width: 1100px) { .layout-hero-wpg--with_cards .hero-copy { min-width: 0; } .layout-hero-wpg--with_cards .hero-inner { gap: 0; } } /* Bereichs-Sektionen im Einspalter: Reihenfolge wie im Design — Headline, Subline, Lead, Bild (+ Factsheet), "Das gehoert dazu", Karten/Akkordeons. Die Wrapper werden dafuer aufgeloest (display: contents), die Grid-Reihenfolge regelt order. */ @media (max-width: 1000px) { .layout-audit-leistungen .section-inner, .layout-leistungsbereich.has-media .section-inner { gap: 0; } .layout-audit-leistungen .audit-content, .layout-audit-leistungen .audit-content-block:first-child, .layout-leistungsbereich.has-media .leistungsbereich-content { display: contents; } .layout-audit-leistungen .audit-media-sticky, .layout-leistungsbereich.has-media .leistungsbereich-media-sticky { order: 1; align-items: start; margin: 2rem 0 0; } .layout-audit-leistungen .audit-content-block:first-child .audit-accordion-wrap, .layout-leistungsbereich.has-media .leistungsbereich-items { order: 2; margin-top: 2rem; } .layout-audit-leistungen .audit-content-block + .audit-content-block { order: 3; padding-top: 60px; } .layout-audit-leistungen .audit-image img, .layout-leistungsbereich.has-media .leistungsbereich-image img { min-height: 0; aspect-ratio: 4 / 3; } } @media (max-width: 720px) { .layout-hero-wpg--with_cards h1 { hyphens: auto; overflow-wrap: break-word; } /* 2x2-Schachbrett wie im Mobil-Design statt Einspalter. */ .layout-hero-wpg--with_cards .hero-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .layout-audit-leistungen .audit-image img, .layout-leistungsbereich.has-media .leistungsbereich-image img { aspect-ratio: 16 / 10; } } @media (max-width: 603px) { /* Hero nach Mobil-Design: 40px-H1 mit Silbentrennung, 26px-Subline, 16px-Lead (Mobil-Konvention), 200px-Bild mit 1rem-Radius. */ .layout-hero-wpg--with_cards .hero-inner { padding-top: 140px; } .layout-hero-wpg--with_cards h1 { margin-bottom: 1.5rem; font-size: 40px !important; line-height: 1.15; } .layout-hero-wpg--with_cards .hero-subheadline { margin-bottom: 1rem; font-size: 26px; line-height: 32px; } .layout-hero-wpg--with_cards .hero-intro { font-size: 16px; line-height: 1.45; } .layout-hero-wpg--with_cards .hero-media { margin-top: 1.5rem; border-radius: 1rem; } .layout-hero-wpg--with_cards .hero-media img { aspect-ratio: auto; height: 200px; } .layout-hero-wpg--with_cards .hero-cards { margin-top: 1.5rem; } .layout-hero-wpg .hero-card { padding: 1rem; } .layout-hero-wpg .hero-card-icon { width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; } .layout-hero-wpg .hero-card h2 { margin-bottom: 0.5rem; font-size: 20px !important; line-height: 1.2; } .layout-hero-wpg .hero-card p { width: 100%; margin-bottom: 1rem; font-size: 16px; line-height: 1.38; } .layout-hero-wpg .hero-card-link { font-size: 15px; } /* Bereichs-Koepfe zentriert, Masse aus dem Mobil-Design. */ .layout-audit-leistungen .headline, .layout-leistungsbereich .headline { margin-bottom: 0.75rem; padding-inline: 0.75rem; font-size: 40px !important; line-height: 1.15; text-align: center; overflow-wrap: break-word; hyphens: auto; } .layout-audit-leistungen .subhead, .layout-leistungsbereich .subhead { margin-bottom: 1rem; padding-inline: 0.75rem; font-size: 26px; line-height: 32px; text-align: center; } .layout-audit-leistungen .intro, .layout-leistungsbereich .intro { padding-inline: 0.75rem; font-size: 16px; line-height: 1.45; text-align: center; } .layout-audit-leistungen .audit-accordion-wrap > h3, .layout-leistungsbereich .leistungsbereich-items > h3 { margin-bottom: 1rem; font-size: 24px !important; text-align: center; } .layout-audit-leistungen .audit-media-sticky, .layout-leistungsbereich.has-media .leistungsbereich-media-sticky { margin: 1.5rem 0 0; } /* Die Riesenhoehe der Factsheet-Kachel kam vom 9rem-Minimum. */ .layout-audit-leistungen .audit-factsheet { min-height: 0; } /* Akkordeon wie im Design: Nummer und Titel nebeneinander, oben buendig — auch unter 480px (dort rueckte die Nummer bisher in eine eigene Zeile). */ .layout-audit-leistungen .audit-accordion-trigger { grid-template-columns: 2.5rem minmax(0, 1fr) 1.75rem; gap: 0 10px; align-items: start; padding: 1rem; } .layout-audit-leistungen .item-number { grid-column: auto; font-size: 20px; line-height: 28px; } .layout-audit-leistungen .item-title { min-width: 0; font-size: 20px; line-height: 28px; overflow-wrap: break-word; hyphens: auto; } .layout-audit-leistungen .item-toggle { width: 1.75rem; height: 1.75rem; } .layout-audit-leistungen .accordion-content-inner { padding: 0 1rem 1rem calc(1rem + 2.5rem + 10px); } /* PDF-Leisten einzeilig: Icon, Label, 36px-Download rechts. */ .layout-audit-leistungen .audit-pdf-link, .layout-leistungsbereich .card-pdf-link, .layout-leistungsbereich .leistungsbereich-factsheet.has-download { grid-template-columns: 40px minmax(0, 1fr) 36px; gap: 12px; align-items: center; } .layout-audit-leistungen .pdf-icon, .layout-leistungsbereich .pdf-icon, .layout-leistungsbereich .factsheet-icon { width: 40px; height: 40px; } .layout-audit-leistungen .pdf-download, .layout-leistungsbereich .pdf-download, .layout-leistungsbereich .factsheet-download { grid-column: auto; width: 36px; height: 36px; } /* Leistungs-Karten: Referenzmasse. */ .layout-leistungsbereich .leistungsbereich-cards { grid-template-columns: minmax(0, 1fr); } .layout-leistungsbereich .leistungsbereich-card { padding: 1.25rem; } .layout-leistungsbereich .card-number { margin-bottom: 1rem; font-size: 32px; } .layout-leistungsbereich .leistungsbereich-card h4 { font-size: 20px; line-height: 1.35; overflow-wrap: break-word; hyphens: auto; } .layout-leistungsbereich .card-text { font-size: 16px; line-height: 1.42; } } /* Nachtrag: Die Bild-Spalten stecken in einem Wrapper (.audit-media-column / .leistungsbereich-media) — order und Abstaende gehoeren auf ihn, sonst bleibt das Bild im Einspalter vor der Headline stehen. */ @media (max-width: 1000px) { .layout-audit-leistungen .audit-media-column, .layout-leistungsbereich.has-media .leistungsbereich-media { order: 1; min-height: 0; margin: 2rem 0 0; } .layout-audit-leistungen .audit-media-sticky, .layout-leistungsbereich.has-media .leistungsbereich-media-sticky { margin: 0; } } @media (max-width: 603px) { .layout-audit-leistungen .audit-media-column, .layout-leistungsbereich.has-media .leistungsbereich-media { margin: 1.5rem 0 0; } } /* Nachtrag 2: Feinabstaende nach Messung gegen die Referenz. Die Klebe-Spalte behielt ihr top: 80px als relative Verschiebung (Loch ueber dem Bild, Kachel ragte in "Das gehoert dazu" hinein); die Kopf-Wrapper trugen noch ihren Desktop-Abstand; bei den grauen Sektionen doppelten sich Sektions- und Inner-Padding. */ @media (max-width: 1000px) { .layout-audit-leistungen .audit-media-sticky, .layout-leistungsbereich.has-media .leistungsbereich-media-sticky { position: relative; top: 0; } .layout-audit-leistungen .audit-header, .layout-leistungsbereich.has-media .leistungsbereich-header { margin-bottom: 0; } .layout-audit-leistungen .audit-media-column, .layout-leistungsbereich.has-media .leistungsbereich-media { margin: 1rem 0 0; } .layout-audit-leistungen .audit-content-block:first-child .audit-accordion-wrap, .layout-leistungsbereich.has-media .leistungsbereich-items { margin-top: 1rem; } .layout-audit-leistungen .audit-content-block + .audit-content-block { padding-top: 44px; } } @media (max-width: 720px) { .layout-leistungsbereich.has-media { padding: 0; } } @media (max-width: 603px) { .layout-hero-wpg--with_cards { padding-bottom: 60px; } .layout-hero-wpg--with_cards h1 { margin-bottom: 20px; } .layout-audit-leistungen .headline, .layout-leistungsbereich .headline { margin-bottom: 1rem; } .layout-audit-leistungen .audit-media-column, .layout-leistungsbereich.has-media .leistungsbereich-media { margin: 1rem 0 0; } /* Bild -> Factsheet-Kachel wie in der Referenz 32px. */ .layout-audit-leistungen .audit-media-sticky, .layout-leistungsbereich.has-media .leistungsbereich-media-sticky { gap: 2rem; } } /* Hero-Bild: Das Design zeigt es auf dem Desktop 708x350 — das 740/354-Verhaeltnis der Standard-Variante ergab nur 339. */ .layout-hero-wpg--with_cards .hero-media img { aspect-ratio: auto; height: 350px; } @media (max-width: 1100px) { .layout-hero-wpg--with_cards .hero-media img { height: auto; aspect-ratio: 740 / 354; } } @media (max-width: 603px) { .layout-hero-wpg--with_cards .hero-media img { aspect-ratio: auto; height: 200px; } } /* Nachtrag 3: Anatomie-Angleich an die Referenz. Akkordeon-Trigger trugen 30px- statt 24px-Polster; die PDF-Leisten hatten keinen 12px-Abstand zum Text; die Klebe-Spalte behielt einen leeren zweiten Grid-Track, dessen gap Tax & Legal 32px kostete. */ @media (min-width: 604px) { .layout-audit-leistungen .audit-accordion-trigger { padding: 24px 32px; } } .layout-audit-leistungen .audit-pdf-link { margin-top: 12px; } .layout-leistungsbereich .card-pdf-link { margin-top: 12px; } .layout-audit-leistungen .audit-media-sticky, .layout-leistungsbereich.has-media .leistungsbereich-media-sticky { grid-template-rows: none; } @media (max-width: 603px) { /* Hero auf das 12px-Inset des Mobil-Designs (Bereiche liegen dort schon durch die globale Regel). */ .layout-hero-wpg--with_cards .hero-inner, .layout-hero-wpg--with_cards .hero-cards { width: min(100% - 1.5rem, 1440px); } /* Die Bestands-Subheads halten ihre clamp-Groesse mit hoeherem Gewicht — wie beim Beruf per !important auf die Designmasse. */ .layout-audit-leistungen .subhead, .layout-leistungsbereich .subhead { font-size: 28px !important; line-height: 32px !important; } /* Factsheet-Kachel: zwei Spalten, der Pfeil wandert wie in der Referenz nach unten rechts und zeigt abwaerts; Titel 20/28. */ .layout-audit-leistungen .audit-factsheet, .layout-leistungsbereich .leistungsbereich-factsheet.has-arrow { grid-template-columns: 40px minmax(0, 1fr); } .layout-audit-leistungen .factsheet-icon { width: 40px; height: 40px; } .layout-audit-leistungen .factsheet-arrow, .layout-leistungsbereich .factsheet-arrow { grid-column: 1 / -1; justify-self: end; align-self: end; transform: rotate(90deg); } .layout-audit-leistungen .factsheet-copy strong, .layout-leistungsbereich .factsheet-copy strong { font-size: 20px; line-height: 28px; } .layout-audit-leistungen .factsheet-copy span, .layout-leistungsbereich .factsheet-copy span { font-size: 16px; line-height: 24px; } /* PDF-Leisten: 12er-Polster der Referenz. */ .layout-audit-leistungen .audit-pdf-link, .layout-leistungsbereich .card-pdf-link, .layout-leistungsbereich--tax-legal .leistungsbereich-items > .leistungsbereich-factsheet { padding: 12px; } /* Karten-Polster auch fuer die breiten Advisory-Karten. */ .layout-leistungsbereich .leistungsbereich-card, .layout-leistungsbereich .leistungsbereich-cards > li.is-wide .leistungsbereich-card { padding: 1.25rem; } } /* Nachtrag 4: Desktop-Anatomie nach Referenzmessung. Kopf -> "Das gehoert dazu" ist im Design 48px (nicht 80); die Akkordeon-Zeilen laufen auf 32px Zeilenmass; die Leistungs-Karten brauchen kein 277px-Minimum; der Panel-Text laeuft im Design in einer 500px-Spalte; der Kachel-Titel brach wegen der schmalen Pfeilspalte um. */ @media (min-width: 1001px) { .layout-audit-leistungen .audit-header, .layout-leistungsbereich.has-media .leistungsbereich-header { margin-bottom: 48px; } } @media (min-width: 604px) { .layout-audit-leistungen .item-number, .layout-audit-leistungen .item-title { line-height: 32px; } .layout-leistungsbereich .leistungsbereich-card, .layout-leistungsbereich .leistungsbereich-cards > li.is-wide .leistungsbereich-card { min-height: 0; padding: 24px 32px; } } .layout-audit-leistungen .audit-accordion-wrap > h3 { margin-bottom: 16px; } .layout-audit-leistungen .accordion-content-inner > p { max-width: 500px; } .layout-audit-leistungen .factsheet-copy strong, .layout-leistungsbereich .factsheet-copy strong { font-size: 20px; line-height: 28px; } .layout-leistungsbereich .leistungsbereich-factsheet.has-arrow { grid-template-columns: 3rem minmax(0, 1fr) 21px; } @media (max-width: 603px) { /* Wiederholung nach dem Basis-Override oben: mobil bleiben die Kacheln zweispaltig (Pfeil sitzt absolut unten rechts). */ .layout-audit-leistungen .audit-factsheet, .layout-leistungsbereich .leistungsbereich-factsheet.has-arrow { grid-template-columns: 40px minmax(0, 1fr); } .layout-audit-leistungen .audit-pdf-link, .layout-leistungsbereich .card-pdf-link { min-height: 0; } .layout-audit-leistungen .audit-pdf-link > span:not([class]), .layout-leistungsbereich .card-pdf-link > span:not([class]) { font-size: 16px; line-height: 1.2; } } /* Der Kachel-Pfeil schwebt wie in der Referenz unten rechts statt eine eigene Grid-Zeile zu belegen. */ .layout-audit-leistungen .audit-factsheet, .layout-leistungsbereich .leistungsbereich-factsheet { position: relative; } @media (max-width: 603px) { .layout-audit-leistungen .factsheet-arrow, .layout-leistungsbereich .factsheet-arrow { position: absolute; right: 16px; bottom: 16px; grid-column: auto; } } /* Nachtrag 5: Karten-Minima und Kachel-Innenmasse. Die has-download-Bestandsregeln erzwangen 307px-Karten und einen Rahmen auch auf den grauen Sektionen; die Kacheltexte trugen eigenes Polster und ein 10px-Gap. Rahmenlogik wie im Design: Rahmen nur auf weissem Grund (Advisory). */ .layout-leistungsbereich .leistungsbereich-cards > li.has-download .leistungsbereich-card, .layout-leistungsbereich .leistungsbereich-cards > li.is-wide .leistungsbereich-card, .layout-leistungsbereich .leistungsbereich-cards > li.is-wide.has-download .leistungsbereich-card { min-height: 0; } .layout-leistungsbereich--tax-legal .leistungsbereich-cards > li.has-download .leistungsbereich-card, .layout-leistungsbereich--esg-sustainability .leistungsbereich-cards > li.has-download .leistungsbereich-card, .layout-leistungsbereich--esg-sustainability .leistungsbereich-cards > li.is-wide.has-download .leistungsbereich-card { border: 0; } .layout-leistungsbereich--advisory .leistungsbereich-card { border: 1px solid var(--c-grey); } @media (max-width: 603px) { .layout-audit-leistungen .factsheet-copy, .layout-leistungsbereich .factsheet-copy { padding: 4px 0 0; gap: 7px; } } /* Nachtrag 6: Kachel-Innenmasse auch auf dem Desktop (Titel 4px tiefer, 7px zum Beschrieb — Referenzmasse), und die Sprungziele der Hero-Karten (#audit, #tax, #advisory, #esg) landen nicht mehr unter der fixen Kopfleiste. */ .layout-audit-leistungen .factsheet-copy, .layout-leistungsbereich .factsheet-copy { padding: 4px 0 0; gap: 7px; } .layout-audit-leistungen, .layout-leistungsbereich { scroll-margin-top: 178px; } @media (max-width: 1199px) { .layout-audit-leistungen, .layout-leistungsbereich { scroll-margin-top: 158px; } } @media (max-width: 900px) { .layout-audit-leistungen, .layout-leistungsbereich { scroll-margin-top: 145px; } } @media (max-width: 600px) { .layout-audit-leistungen, .layout-leistungsbereich { scroll-margin-top: 130px; } } /* Nachtrag 7: html traegt bereits ein scroll-padding-top von 55px — die Sprungziel-Reserve ist die Summe aus beidem, also die Leistenmasse minus 55. */ .layout-audit-leistungen, .layout-leistungsbereich { scroll-margin-top: 123px; } @media (max-width: 1199px) { .layout-audit-leistungen, .layout-leistungsbereich { scroll-margin-top: 103px; } } @media (max-width: 900px) { .layout-audit-leistungen, .layout-leistungsbereich { scroll-margin-top: 90px; } } @media (max-width: 600px) { .layout-audit-leistungen, .layout-leistungsbereich { scroll-margin-top: 75px; } } /* Nachtrag 8: Sichtpruefung. Die Audit-Ueberschriften tragen im Template ein Leerzeichen vor dem CSS-Punkt; im Akkordeon-Panel brach das PDF-Label um (Poppins 600 braucht 174px) — Einrueckung und Leiste laufen jetzt auf den Referenzmassen; der Assurance- Block bekam den "Das gehoert dazu"-Abstand des Audit-Blocks. */ .layout-audit-leistungen .audit-content-block .headline::after { margin-left: -0.24em; } @media (max-width: 1000px) { .layout-audit-leistungen .audit-content-block + .audit-content-block .audit-accordion-wrap { margin-top: 2rem; } } @media (max-width: 603px) { .layout-audit-leistungen .audit-accordion-trigger { column-gap: 0; } .layout-audit-leistungen .accordion-content-inner { padding: 0 1rem 1rem calc(1rem + 2.5rem); } .layout-audit-leistungen .audit-pdf-link { gap: 10px; padding: 12px 10px; } } /* ========================================================= TAETIGKEITSBEREICHE — Korrekturrunde Leon 28.08. ========================================================= */ /* Hero-Typo aller Unterseiten mobil vereinheitlicht: H1-Abstand 24px, Subheadline 28px mit 16px Abstand. */ @media (max-width: 603px) { .layout-hero-wpg h1 { margin-bottom: 24px; } .layout-hero-wpg .hero-subheadline { margin-bottom: 16px; font-size: 28px; } /* H1 und Sektions-Headlines auf die Masse der uebrigen Unterseiten (46px-H1, 44px-H2). */ .layout-hero-wpg--with_cards h1 { font-size: clamp(46px, 11.7vw, 4.5rem) !important; line-height: 1.08; } .layout-audit-leistungen .headline, .layout-leistungsbereich .headline { font-size: 44px !important; } } /* Hero-Karten mobil als Schachbrett wie im Design: Advisory wird magenta, ESG & Sustainability weiss — Texte, Links und die img-Icons (per filter) wechseln mit. */ @media (max-width: 720px) { .layout-hero-wpg--with_cards .hero-cards > .hero-card:nth-child(3) { border-color: var(--c-pri); background-color: var(--c-pri); color: var(--c-white); } .layout-hero-wpg--with_cards .hero-cards > .hero-card:nth-child(3) .hero-card-icon { filter: brightness(0) invert(1); } .layout-hero-wpg--with_cards .hero-cards > .hero-card:nth-child(3) .hero-card-link { color: var(--c-white); } .layout-hero-wpg--with_cards .hero-cards > .hero-card:nth-child(3) .hero-card-link::after { background-color: var(--c-white); } .layout-hero-wpg--with_cards .hero-cards > .hero-card:nth-child(4) { border-color: var(--c-grey); background-color: var(--c-white); color: var(--c-black); } .layout-hero-wpg--with_cards .hero-cards > .hero-card:nth-child(4) .hero-card-icon { /* weiss -> #D32566 (Canvas-gemessen, Delta 4) */ filter: brightness(0) saturate(100%) invert(21%) sepia(100%) saturate(2330%) hue-rotate(322deg) brightness(90%) contrast(86%); } .layout-hero-wpg--with_cards .hero-cards > .hero-card:nth-child(4) .hero-card-link { color: var(--c-pri); } .layout-hero-wpg--with_cards .hero-cards > .hero-card:nth-child(4) .hero-card-link::after { background-color: var(--c-pri); } } @media (max-width: 603px) { /* Polster nach Leons Masswerten. */ .layout-hero-wpg .hero-card { padding: 16px 20px; } .layout-audit-leistungen .audit-factsheet, .layout-leistungsbereich .leistungsbereich-factsheet.has-arrow { padding: 12px; } .layout-audit-leistungen .factsheet-arrow, .layout-leistungsbereich .factsheet-arrow { right: 12px; bottom: 12px; } .layout-audit-leistungen .audit-accordion-trigger { padding: 16px 20px; } .layout-audit-leistungen .accordion-content-inner { gap: 0; padding: 0 20px 16px calc(20px + 2.5rem); } /* Text -> "Mehr erfahren im PDF": glatte 20px statt gap+margin. */ .layout-audit-leistungen .audit-pdf-link { margin-top: 20px; gap: 8px; } .layout-leistungsbereich .card-pdf-link { margin-top: 20px; } /* Download-Knopf mobil: transparenter Kreis, magenta Pfeil. */ .layout-audit-leistungen .pdf-download::before, .layout-leistungsbereich .pdf-download::before, .layout-leistungsbereich .factsheet-download::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M21.5312 26.6711C21.3854 26.6216 21.25 26.5375 21.125 26.4187L16.625 22.1438C16.375 21.9062 16.2552 21.6292 16.2656 21.3125C16.276 20.9958 16.3958 20.7188 16.625 20.4812C16.875 20.2438 17.1719 20.1201 17.5156 20.1102C17.8594 20.1003 18.1562 20.2141 18.4062 20.4516L20.75 22.6781V14.1875C20.75 13.851 20.8698 13.569 21.1094 13.3414C21.349 13.1138 21.6458 13 22 13C22.3542 13 22.651 13.1138 22.8906 13.3414C23.1302 13.569 23.25 13.851 23.25 14.1875V22.6781L25.5938 20.4516C25.8438 20.2141 26.1406 20.1003 26.4844 20.1102C26.8281 20.1201 27.125 20.2438 27.375 20.4812C27.6042 20.7188 27.724 20.9958 27.7344 21.3125C27.7448 21.6292 27.625 21.9062 27.375 22.1438L22.875 26.4187C22.75 26.5375 22.6146 26.6216 22.4688 26.6711C22.3229 26.7206 22.1667 26.7453 22 26.7453C21.8333 26.7453 21.6771 26.7206 21.5312 26.6711ZM14.5 32C13.8125 32 13.224 31.7674 12.7344 31.3023C12.2448 30.8372 12 30.2781 12 29.625V27.25C12 26.9135 12.1198 26.6315 12.3594 26.4039C12.599 26.1763 12.8958 26.0625 13.25 26.0625C13.6042 26.0625 13.901 26.1763 14.1406 26.4039C14.3802 26.6315 14.5 26.9135 14.5 27.25V29.625H29.5V27.25C29.5 26.9135 29.6198 26.6315 29.8594 26.4039C30.099 26.1763 30.3958 26.0625 30.75 26.0625C31.1042 26.0625 31.401 26.1763 31.6406 26.4039C31.8802 26.6315 32 26.9135 32 27.25V29.625C32 30.2781 31.7552 30.8372 31.2656 31.3023C30.776 31.7674 30.1875 32 29.5 32H14.5Z' fill='%23D32566'/%3E%3C/svg%3E"); background-size: 140%; } /* Factsheet-Beschrieb mit gesetzter Breite (Umbruch wie im Design). */ .layout-audit-leistungen .factsheet-copy span, .layout-leistungsbereich .factsheet-copy span { max-width: 270px; } /* Karten-Titel: 12px zum Text. */ .layout-leistungsbereich .leistungsbereich-card h4 { margin-bottom: 12px; } /* Freistehende Tax-&-Legal-Leiste: 18px-Label, Copy ohne Kachel-Polster (die Leiste zentriert selbst). */ .layout-leistungsbereich .leistungsbereich-factsheet.has-download .factsheet-copy { padding: 0; } .layout-leistungsbereich .leistungsbereich-factsheet.has-download .factsheet-copy strong { font-size: 18px; line-height: 1.3; } } /* Nachtrag zur Korrekturrunde: die Leistungsbereich-Leisten tragen das Kreis-Icon zusaetzlich als Element-Hintergrund (zweite Bestandsregel) — mobil abschalten, es zaehlt nur das ::before. */ @media (max-width: 603px) { .layout-leistungsbereich .factsheet-download, .layout-leistungsbereich .pdf-download { background-image: none; } } /* Das ::before der Leistungsbereich-Knoepfe hat im Bestand kein inset — ohne Flaeche blieb das neue Icon unsichtbar. */ @media (max-width: 603px) { .layout-leistungsbereich .factsheet-download::before, .layout-leistungsbereich .pdf-download::before { inset: 0; } } /* Das Leistungsbereich-::before ist im Bestand nicht positioniert (sichtbar war frueher nur der Element-Hintergrund) — fuer das neue Icon braucht es die volle Knopfflaeche. */ @media (max-width: 603px) { .layout-leistungsbereich .factsheet-download::before, .layout-leistungsbereich .pdf-download::before { content: ""; position: absolute; inset: 0; } } /* Und der Bestand schaltet dieses ::before per display: none ab. */ @media (max-width: 603px) { .layout-leistungsbereich .factsheet-download::before, .layout-leistungsbereich .pdf-download::before { display: block; } } /* ========================================================= WIR FUER DICH — Mobil-Angleich (Runde vom 28.08.) Desktop bleibt unveraendert; Masse und Abstaende folgen den uebrigen Unterseiten. ========================================================= */ /* Zitatnamen sind ein alter Stand — auf allen Versionen entfernt. */ .layout-wir-fuer-dich .wir-quote-copy > p { display: none; } /* Einspalter: Reihenfolge wie im Mobil-Design — Nummer, Titel, Lead, Bild, Fliesstext (das Bild stand bisher vor der Nummer). */ @media (max-width: 1000px) { .layout-wir-fuer-dich .wir-chapter { gap: 0; } .layout-wir-fuer-dich .wir-copy { display: contents; } .layout-wir-fuer-dich .wir-number { order: 1; } .layout-wir-fuer-dich h2 { order: 2; } .layout-wir-fuer-dich .wir-intro { order: 3; } .layout-wir-fuer-dich .wir-image, .layout-wir-fuer-dich--image-left .wir-image { order: 4; width: 100%; margin: 0.5rem 0 0; } .layout-wir-fuer-dich .wir-text { order: 5; margin-top: 1.5rem; } } @media (max-width: 603px) { /* Typo-Leiter der Unterseiten: Titel 26/32, Lead 20, Text 16; Textbloecke ruecken aufs 24px-Inset, Bilder bleiben auf 12. */ .layout-wir-fuer-dich .wir-number { margin-bottom: 1.25rem; padding-inline: 0.75rem; font-size: 64px; } .layout-wir-fuer-dich h2 { margin-bottom: 1rem; padding-inline: 0.75rem; font-size: 26px !important; line-height: 32px; } .layout-wir-fuer-dich .wir-intro { padding-inline: 0.75rem; font-size: 20px; line-height: 1.35; } .layout-wir-fuer-dich .wir-text { padding-inline: 0.75rem; font-size: 16px; line-height: 1.45; } /* Zitat-Leiste: Portraet in eigener Zeile, Zitat darunter; Karten-Polster wie die uebrigen mobilen Karten (20px / 24px). */ .layout-wir-fuer-dich .wir-quote { grid-template-columns: minmax(0, 1fr); gap: 12px; min-height: 0; padding: 20px 1.5rem; } .layout-wir-fuer-dich .wir-quote-avatar { width: 50px; height: 50px; } .layout-wir-fuer-dich blockquote { font-size: 17px; line-height: 26px; } } /* Nachtrag: 60er-Sektionsrhythmus wie auf den uebrigen Seiten — das Sektionspolster doppelte sich mit dem globalen Innenpolster (124/140 statt 60/60). */ @media (max-width: 720px) { .layout-wir-fuer-dich { padding: 0; } } /* Korrektur Leon: Die Zitat-Leisten tragen dasselbe Radial-Blau wie Hero und helle CTA-Box (statt des flachen Grau-Tons). */ .layout-wir-fuer-dich .wir-quote { background: radial-gradient(circle at 56% 58%, rgba(201, 215, 233, 0.42) 0, rgba(240, 245, 248, 0.4) 21%, rgba(240, 245, 248, 0.72) 56%, #f0f5f8 100%), #f0f5f8; } /* Das Logo-SVG bringt keine eigene Groesse mit (preserveAspectRatio none, width/height 100%) — ohne festes Seitenverhaeltnis fiel es mobil auf die 150px-Ersatzhoehe und verzerrte. Verhaeltnis der viewBox (206.54 x 168.073) erzwingen. */ @media (max-width: 720px) { .layout-wir-fuer-dich .wir-quote-decoration { aspect-ratio: 206.54 / 168.073; height: auto; } } /* Nachtrag: Der Punkt ueber dem w liegt in der SVG-Datei ausserhalb der viewBox (x bis 215.4, y bis -1.2 bei viewBox 0 0 206.5 168) — als wird er deshalb angeschnitten. Die Deko zeichnet jetzt ein ::after mit korrigierter viewBox; das Original-IMG ruht. */ .layout-wir-fuer-dich .wir-quote-decoration { display: none; } .layout-wir-fuer-dich .wir-quote::after { content: ""; position: absolute; right: clamp(1.75rem, 4.15vw, 5rem); bottom: -0.75rem; width: min(207px, 24%); aspect-ratio: 216.5 / 170; background: url("data:image/svg+xml,") center / contain no-repeat; pointer-events: none; } @media (max-width: 720px) { .layout-wir-fuer-dich .wir-quote::after { right: 1rem; bottom: -0.25rem; width: 7.5rem; } } /* Korrektur Leon: hero-copy mobil einheitlich mit 8px-Einzug — die Standard-Heros (Beruf, Wir fuer dich) trugen 12px, der bildlose Fachbegriffe-Hero (compact) gar keinen. */ @media (max-width: 720px) { .layout-hero-wpg--standard .hero-copy, .layout-hero-wpg--compact .hero-copy { padding-left: 8px; } } /* Nachtrag: auch der Karten-Hero (Taetigkeitsbereiche) bekommt den 8px-Einzug der hero-copy. */ @media (max-width: 720px) { .layout-hero-wpg--with_cards .hero-copy { padding-left: 8px; } } /* Korrektur Leon: Sektionskoepfe mobil wie auf den uebrigen Seiten — 340px-Kopfspalte, zentriert als Spalten-Flex (dadurch zentrieren auch die Subhead-Boxen selbst), Abstaende 16/24. */ @media (max-width: 603px) { .layout-audit-leistungen .audit-header, .layout-leistungsbereich.has-media .leistungsbereich-header { display: flex; flex-direction: column; align-items: center; max-width: 340px; margin-inline: auto; } .layout-audit-leistungen .headline, .layout-leistungsbereich .headline { padding-inline: 0; } .layout-audit-leistungen .subhead, .layout-leistungsbereich .subhead { margin-bottom: 1.5rem; padding-inline: 0; } .layout-audit-leistungen .intro, .layout-leistungsbereich .intro { padding-inline: 0; } } /* ========================================================= BLOG-UEBERSICHT — Abgleich mit Design und statischer Referenz (Runde vom 28.08.). Hover-Zustaende auf Desktop bleiben unveraendert (Freigabe Leon). ========================================================= */ /* Hero beginnt wie auf den uebrigen Unterseiten bei 200px (Fachbegriffe-Referenz); vorher 240. */ .blog-overview { padding-top: calc(var(--wi-nav-height) - 1rem); } /* Verlaufsband wie im Design: Weiss ueber #F3FAFE zurueck nach Weiss, feste 1060px — es endet mitten in der Aufmacher-Karte und kann sich deshalb nicht an der Sektionshoehe orientieren. */ .blog-overview::before { height: 1060px; background: linear-gradient(180deg, var(--c-white) 0%, #F3FAFE 45%, #F3FAFE 94%, var(--c-white) 100%); } /* Hero-Text ohne Bild: 720px breit, 24px, halbfett — wie der Fachbegriffe-Hero (Freigabe Leon). */ .blog-overview__intro h1 { margin-bottom: 2rem; } .blog-overview__intro p { max-width: 720px; font-size: clamp(19px, 1.25vw, 1.5rem); font-weight: 500; line-height: 1.34; } /* Aufmacher + Neuste Beitraege gehoeren zum Hero und laufen im 1440er Container; Spaltenfuge 32px wie im Design (866/542). */ .blog-overview__featured { width: min(1440px, calc(100vw - 3rem)); gap: 2rem; } /* Aufmacher-Karte liegt flach auf dem Band (Design ohne Schatten); Radius 20 aussen, 12 innen wie die statische Referenz. */ .blog-overview-card--featured { border-radius: 20px; box-shadow: none; } .blog-overview-card--featured .blog-overview-card__image { border-radius: 12px; } /* Titelzeilen des Aufmachers atmen wie im Design (40/60). */ .blog-overview-card--featured h3 { line-height: 1.5; } /* Lange Komposita brechen mit Trennstrich statt mitten im Glyphen aus der Karte zu laufen. */ .blog-overview-card h3, .blog-overview-card__excerpt { overflow-wrap: break-word; hyphens: auto; } .blog-overview__pagination { margin-top: 2rem; } /* Mobiler Status "Seite X / Y" (per talents.js eingesetzt) — auf Desktop unsichtbar. */ .blog-overview__pagination .blog-pag-status { display: none; margin: 0; color: var(--c-dgrey); font-size: 1rem; } /* Band klingt frueher aus, sobald Aufmacher und Seitenleiste untereinander stehen (statische Referenz: 900px). */ @media (max-width: 900px) { .blog-overview::before { height: 900px; } } /* ========================================================= BLOG-UEBERSICHT MOBIL (≤603) — Masse und Abstaende der uebrigen Unterseiten. ========================================================= */ @media (max-width: 603px) { .blog-overview { padding-top: calc(var(--wi-nav-height-mobile) + 4.875rem); padding-bottom: 60px; } .blog-overview::before { height: 790px; } /* Typo-Leiter: H1 46, Lead 16; Kopftexte stehen auf 24px. */ .blog-overview__intro h1 { margin-bottom: 24px; font-size: clamp(46px, 11.7vw, 4.5rem) !important; line-height: 1.08; } .blog-overview__intro p { font-size: 16px; line-height: 1.34; } /* Karten, Chips und Paginierung laufen auf der 12px-Spur (Design), die Kopftexte bleiben auf 24. */ .blog-overview__featured, .blog-overview__all { width: calc(100vw - 24px); } .blog-overview__featured { margin-bottom: 4.5rem; } /* Aufmacher: flaches Bildformat aus dem Design, Karten- polster 16 wie die uebrigen mobilen Karten. */ .blog-overview-card--featured .blog-overview-card__image { aspect-ratio: 353 / 145; height: auto; } .blog-overview-card--featured .blog-overview-card__body { padding: 0 1rem 1rem; } .blog-overview-card--featured h3 { margin-bottom: 1rem; font-size: 26px !important; line-height: 30px; } .blog-overview-card--featured .blog-overview-card__excerpt { margin-bottom: 1rem; } /* "Weiterlesen" ruecken unter die Datumszeile statt sie zu ueberlagern; der Pfeil folgt in derselben Zeile. */ .blog-overview-card__read-more { position: static; display: inline-flex; margin-top: 12px; } .blog-overview-card--featured .blog-overview-card__arrow { position: static; display: inline-block; margin-left: 0.5rem; vertical-align: baseline; } /* Neuste Beitraege: 24er Titel, drei Eintraege (der vierte fuellt nur auf dem Desktop die Spaltenhoehe), Kategorie kehrt in die Meta-Zeile zurueck. */ .blog-overview__latest h2 { margin-bottom: 12px; font-size: 24px; } .blog-overview__latest-list { gap: 20px; } .blog-overview__latest-list article:nth-child(4) { display: none; } .blog-overview-card--latest { min-height: 0; } .blog-overview-card--latest > a { min-height: 0; align-items: start; } .blog-overview-card--latest .blog-overview-card__meta { white-space: normal; } .blog-overview-card--latest .blog-overview-card__meta span:first-child { display: inline-flex; } /* Sektionskopf zentriert wie auf den uebrigen Seiten: H2 44, Subline 26. */ .blog-overview__all-header { flex-direction: column; align-items: center; gap: 8px; margin-bottom: 16px; text-align: center; } .blog-overview__all-header h2 { font-size: 44px !important; line-height: 1.1; } .blog-overview__all-header p { font-size: 26px !important; line-height: 32px; } /* Chip-Zeile laeuft rechts aus dem Bild (Full-Bleed-Scroller), beginnt aber auf der Kartenspur. */ .blog-overview__categories { gap: 8px; margin-right: -12px; margin-bottom: 1rem; padding-right: 12px; } .blog-overview__grid { gap: 16px; } .blog-overview-card--grid .blog-overview-card__body { padding: 1rem 1rem 2.5rem; } .blog-overview-card--grid h3 { min-height: 0; font-size: 24px !important; line-height: 26px; } /* Paginierung: nur Zurueck / "Seite X von Y" / Weiter. */ .blog-overview__pagination { margin-top: 1rem; } .blog-overview__pagination > .page-numbers { flex-wrap: nowrap; justify-content: space-between; gap: 12px; } .blog-overview__pagination li:not(:first-child):not(:last-child):not(.blog-pag-status-item) { display: none; } .blog-overview__pagination .blog-pag-status { display: block; } .blog-overview__pagination .prev { margin-right: 0; } .blog-overview__pagination .next { margin-left: 0; } } /* Nachtrag 1: Die globalen section-Paddings (11.45vw bzw. 16px, beide !important) treffen auch die VERSCHACHTELTEN Sektionen der Blog-Uebersicht; deren Breite traegt den Seitenrand aber schon selbst. Ohne Neutralisierung stehen die Karten doppelt eingerueckt (mobil x=28 statt 12, Tablet 11.45vw tief). */ section.blog-overview__featured, section.blog-overview__all { padding-inline: 0 !important; } /* Nachtrag 2: "main > div.page-variant section p" setzt eine feste 1.5rem-Zeilenhoehe und schlaegt die Einleitungs-Regel — gleiche Wirkung ueber hoehere Spezifitaet. */ .blog-overview .blog-overview__intro p { line-height: 1.34; } /* Nachtrag 3: Der Status-Eintrag der mobilen Paginierung dehnte sich auf Blockbreite und schob "Weiter" aus der Zeile — Schrumpfmass erzwingen. */ @media (max-width: 603px) { .blog-overview__pagination li.blog-pag-status-item { flex: 0 0 auto; } .blog-overview__pagination .blog-pag-status { width: max-content; } } /* Nachtrag 4: "main > div.page-variant h3" (0,1,3) schlaegt die Kartenregeln (0,1,1) — Zeilenhoehen mit angehobener Spezifitaet. Dazu Karte -> "Alle Beitraege." auf die 110px des Designs. */ .blog-overview .blog-overview-card--featured h3 { line-height: 1.5; } @media (min-width: 604px) { .blog-overview__featured { margin-bottom: 6.875rem; } } @media (max-width: 603px) { .blog-overview .blog-overview-card--featured h3 { line-height: 30px; } .blog-overview .blog-overview-card--grid h3 { line-height: 26px; } } /* ========================================================= BLOG-UEBERSICHT — Korrekturrunde Leon 28.08. ========================================================= */ /* Kategorie-Chip im Aufmacher: 8px zum Titel. */ .blog-overview-card__pill { margin-bottom: 8px; } /* Aufmacher-Meta: 24px zwischen Datum und Lesedauer. */ .blog-overview-card--featured .blog-overview-card__meta { column-gap: 24px; } /* Themen-Zeile: kein sichtbarer Scrollbalken mehr; die Chips laufen rechts aus dem Bild und faden aus (Maske wie in der statischen Referenz, 96px). */ .blog-overview__categories { padding-bottom: 0; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 96px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 96px), transparent 100%); } .blog-overview__categories::-webkit-scrollbar { display: none; } @media (min-width: 604px) { .blog-overview__categories { margin-right: calc(50% - 50vw); padding-right: 2rem; } } /* Die ueberhaengende Chip-Zeile darf keinen Seiten-Scrollbalken ausloesen (klassische Scrollbreite steckt in 50vw). */ .blog-overview { overflow-x: clip; } /* Eyebrow der Rasterkarten: 12px zum Titel (die 0,1,3-Regeln von page-variant druecken sonst dazwischen). */ .blog-overview .blog-overview-card__eyebrow { margin-bottom: 12px; } @media (max-width: 603px) { .blog-overview__intro { margin-bottom: 32px; } /* Aufmacher-Karte: 16px Polster auch oberhalb des Chips. */ .blog-overview-card--featured .blog-overview-card__body { padding: 1rem; } .blog-overview__latest h2 { margin-bottom: 16px; } /* "Alle Beitraege." / "Nach Thema.": 16px Fuge, 24px danach. */ .blog-overview__all-header { gap: 16px; margin-bottom: 24px; } /* Chips laufen beim Scrollen auch links unter den Rand. */ .blog-overview__categories { margin-left: -12px; padding-left: 12px; } /* Teasertext -> Pfeil dichter, wie die statische Referenz (Text 4 ueber dem Pfeil, Pfeil 9 ueber der Kartenkante). */ .blog-overview-card--grid .blog-overview-card__body { padding-bottom: 1.5rem; } .blog-overview-card--grid .blog-overview-card__arrow { bottom: 0.25rem; } } /* Nachtrag: Der Rasterkarten-Body traegt aus der Basisregel min-height 15rem — mobil streckt das kurze Karten und der absolut sitzende Pfeil wandert mit nach unten. */ @media (max-width: 603px) { .blog-overview-card--grid .blog-overview-card__body { min-height: 0; } } /* Korrektur Leon: Der Hero beginnt mobil auf allen Unterseiten bei 140px. Die Beruf-Korrekturrunde hatte nur --standard auf 140 gestellt; der compact-Hero (Fachbegriffe) stand noch auf den 150 der Basisregel — und die Blog-Uebersicht hatte die 150 von dort uebernommen. */ @media (max-width: 720px) { .layout-hero-wpg--compact .hero-inner { padding-top: 140px; } } @media (max-width: 603px) { .blog-overview { padding-top: calc(var(--wi-nav-height-mobile) + 4.25rem); } } /* ========================================================= NEWSLETTER-BOX (Uebersicht + Artikel) — Markup kam per home.php / single.php; Masse aus der statischen Referenz (.c-newsbox in components.css + insights.css/artikel.css). ========================================================= */ section.blog-overview__cta, section.blog-detail__cta { width: min(1260px, calc(100vw - 3rem)); margin-inline: auto; padding-inline: 0 !important; /* globale section-Paddings neutralisieren */ } .blog-overview__cta { position: relative; z-index: 1; margin-top: 7.5rem; } /* Unter der Box bleiben 60px bis zum Footer (vorher trug die Paginierung die vollen 120). */ .blog-overview { padding-bottom: 3.75rem; } .blog-detail__cta { margin-block: 0 3.75rem; } .blog-overview__newsbox { position: relative; display: flex; overflow: hidden; flex-direction: column; align-items: flex-start; padding: 48px 64px; border-radius: 20px; background: var(--c-pri); color: var(--c-white); } .blog-overview__newsbox > * { position: relative; z-index: 1; margin: 0; } /* W-Marke als Maske: ragt wie im Design ueber die rechte und untere Kante und wird vom overflow beschnitten. */ .blog-overview__newsbox::after { content: ""; position: absolute; z-index: 0; right: -26px; bottom: -13px; width: 351px; aspect-ratio: 190 / 150; background-color: var(--c-white); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20190%20150'%3E%20%3Cpath%20d='M126.3,115.416c-3.811,5.049-10.528,7.011-16.6,6.329-5.99-.288-10.348-4.852-13.4-9.608-3.984-5.916-11.9-20.29-11.845-20.377-.684,1.16-27.444,46.969-29.109,48.937a16.8,16.8,0,0,1-9.619,5.387,17.83,17.83,0,0,1-19.946-11.19C25.409,133.943.9,55.988.574,54.835a17.466,17.466,0,0,1,3.6-15.846c6.64-7.849,20.309-8.964,27.03-.65a19.18,19.18,0,0,1,3,4.979c.4.951,13.5,34.746,14.981,38.725,3.355-5.826,16.8-29.23,20.085-34.943a16.938,16.938,0,0,1,15.753-8.867c5.366.318,10.793,2.94,13.606,7.643,4.655,7.525,9.285,15.066,13.958,22.581,9.816-16.839.56-1.31,10.666-17.976,2.693-4.439,5.081-9.612,9.611-12.386,12.535-7.8,28.206.566,27.288,15.657-.193,3.114-1.575,5.7-3.064,8.361-2.12,3.706-28.317,49.79-30.791,53.3'/%3E%20%3Cpath%20d='M165.246.021c25.355-1.05,21.9,37-1.823,32.536C144.7,29.036,147.375.762,165.246.021'/%3E%20%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20190%20150'%3E%20%3Cpath%20d='M126.3,115.416c-3.811,5.049-10.528,7.011-16.6,6.329-5.99-.288-10.348-4.852-13.4-9.608-3.984-5.916-11.9-20.29-11.845-20.377-.684,1.16-27.444,46.969-29.109,48.937a16.8,16.8,0,0,1-9.619,5.387,17.83,17.83,0,0,1-19.946-11.19C25.409,133.943.9,55.988.574,54.835a17.466,17.466,0,0,1,3.6-15.846c6.64-7.849,20.309-8.964,27.03-.65a19.18,19.18,0,0,1,3,4.979c.4.951,13.5,34.746,14.981,38.725,3.355-5.826,16.8-29.23,20.085-34.943a16.938,16.938,0,0,1,15.753-8.867c5.366.318,10.793,2.94,13.606,7.643,4.655,7.525,9.285,15.066,13.958,22.581,9.816-16.839.56-1.31,10.666-17.976,2.693-4.439,5.081-9.612,9.611-12.386,12.535-7.8,28.206.566,27.288,15.657-.193,3.114-1.575,5.7-3.064,8.361-2.12,3.706-28.317,49.79-30.791,53.3'/%3E%20%3Cpath%20d='M165.246.021c25.355-1.05,21.9,37-1.823,32.536C144.7,29.036,147.375.762,165.246.021'/%3E%20%3C/svg%3E") center / contain no-repeat; pointer-events: none; } /* Im Artikel-Design ist die Marke groesser und tiefer angeschnitten. */ .single .blog-overview__newsbox::after { right: -24px; bottom: -23px; width: 453px; } .blog-overview__newsbox-brand { font-size: 1.5rem; font-weight: 700; font-style: italic; } .blog-overview__newsbox h2 { max-width: 45rem; margin-top: 15px; color: var(--c-white); font-family: var(--font-hl); font-size: 48px; font-weight: var(--fw-bold); line-height: 1.1; } .blog-overview__newsbox p { max-width: 720px; margin-top: 34px; color: var(--c-white); font-size: 24px; line-height: 32px; } .blog-overview__newsbox p em { font-style: italic; } .blog-overview__newsbox-cta { display: inline-flex; gap: 0.5rem; align-items: center; height: 44px; margin-top: 24px; padding-inline: 24px; border-radius: 50px; background: var(--c-white); color: var(--c-pri); font-weight: 700; text-decoration: none; transition: transform var(--dur) var(--ease); } .blog-overview__newsbox-cta::after { content: ""; width: 0.85rem; height: 0.85rem; background-color: var(--c-pri); -webkit-mask: var(--icon-arrow-dio) center / contain no-repeat; mask: var(--icon-arrow-dio) center / contain no-repeat; } .blog-overview__newsbox-cta:is(:hover, :focus-visible) { transform: translateY(-0.15rem); } @media (max-width: 1323px) { .blog-overview__newsbox { padding: 40px 48px; } .blog-overview__newsbox h2 { font-size: 40px; } .blog-overview__newsbox p { max-width: 62%; font-size: 20px; line-height: 28px; } .blog-overview__newsbox::after, .single .blog-overview__newsbox::after { right: -21px; bottom: -20px; width: 400px; } } @media (max-width: 900px) { .blog-overview__newsbox::after, .single .blog-overview__newsbox::after { right: -16px; bottom: -15px; width: 300px; } .blog-overview__newsbox p { max-width: 58%; } } @media (max-width: 603px) { .blog-overview__cta { width: calc(100vw - 24px); margin-top: 3.75rem; } section.blog-detail__cta { width: calc(100vw - 24px); } .blog-overview__newsbox { padding: 26px 32px 25px; } .blog-overview__newsbox-brand { font-size: 1.25rem; } .blog-overview__newsbox h2 { margin-top: 10px; font-size: 32px; line-height: 42px; } .blog-overview__newsbox h2 br { display: none; } .blog-overview__newsbox p { max-width: none; margin-top: 19px; font-size: 19px; line-height: 26px; } .blog-overview__newsbox-cta { margin-top: 34px; } .blog-overview__newsbox::after { right: -14px; bottom: -8px; width: 190px; } .single .blog-overview__newsbox::after { right: -15px; bottom: -11px; width: 130px; } } /* ========================================================= BLOG-ARTIKEL — Abgleich mit Design und statischer Referenz (artikel.css). Struktur stimmt; Feinmasse und das fehlende Verlaufsband kommen hier. ========================================================= */ /* Verlaufsband: Weiss ueber #F3FAFE zurueck nach Weiss, endet mitten im Heldenbild (feste 780px wie die Statik). */ .blog-detail { position: relative; } .blog-detail::before { content: ""; position: absolute; z-index: 0; inset: 0 0 auto; height: 780px; background: linear-gradient(180deg, var(--c-white) 0%, var(--c-white) 20%, #F3FAFE 55%, #F3FAFE 94%, var(--c-white) 100%); pointer-events: none; } .blog-detail > * { position: relative; } /* Kopf beginnt bei 165px (Breadcrumb-Oberkante), 21px zur H1, 32px vom Meta-Strich zum Bild. */ .blog-detail { padding-top: calc(var(--wi-nav-height-min) + 4.3125rem); } .blog-detail__header { margin: 0 auto 2rem; } .blog-detail__breadcrumb { margin-bottom: 21px; } .blog-detail__meta-row { padding-top: 1rem; } /* Fliesstext: 24er Zeilen (die globalen p-Regeln setzen 22.4), H2 32/48; Abstaende wie die Statik (p->h2 49, h2->p 15). */ .blog-detail .blog-detail__content :is(p, li) { line-height: 24px; } .blog-detail .blog-detail__content h2 { margin: 49px 0 15px; line-height: 1.5; } .blog-detail .blog-detail__content h3 { margin: 48px 0 17px; line-height: 1.5; } .blog-detail .blog-detail__content h4 { margin: 49px 0 16px; line-height: 1.4; } /* Karussell: 72px von der Haarlinie zur Ueberschrift; der globale Headline-Punkt entfaellt — der Text endet mit ":". */ main > div.page-variant > .blog-detail + .layout-posts-carousel > .section-inner-carousel { padding-top: 4.5rem !important; } main > div.page-variant > .blog-detail + .layout-posts-carousel .headline::after { content: none; } /* Karten: Listenkarten-Typo der Uebersicht (Titel 24) statt der globalen 32er-H3; lange Komposita trennen sauber. */ main > div.page-variant > .blog-detail + .layout-posts-carousel article h3 { font-size: 24px !important; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; } /* Meta-Trenner wie im Design: "/" statt Punkt. */ main > div.page-variant > .blog-detail + .layout-posts-carousel .meta .sep { font-size: 0; } main > div.page-variant > .blog-detail + .layout-posts-carousel .meta .sep::before { content: " / "; font-size: var(--fs-meta); } /* ========================================================= BLOG-ARTIKEL MOBIL (<=603) — Masse der Statik/des Designs. ========================================================= */ @media (max-width: 603px) { /* Kopf beginnt bei 121px. */ .blog-detail { padding-top: calc(var(--wi-nav-height-mobile) + 3.0625rem); } .blog-detail::before { height: 560px; } /* Breadcrumb darf mehrzeilig laufen statt zu ellipsieren. */ .blog-detail__breadcrumb { flex-wrap: wrap; gap: 4px 8px; margin-bottom: 11px; overflow: visible; font-size: 14px; white-space: normal; } .blog-detail__breadcrumb [aria-current="page"] { overflow: visible; text-overflow: clip; white-space: normal; } .blog-detail__intro h1 { margin-bottom: 20px; font-size: 28px; line-height: 35px; } .blog-detail__excerpt { margin-bottom: 24px; } /* Chip, Datum/Lesezeit und Teilen stehen untereinander. */ .blog-detail__meta-row { gap: 12px; padding-top: 1rem; } .blog-detail__meta { display: grid; grid-template-columns: repeat(2, max-content); gap: 12px 16px; } .blog-detail__category { grid-column: 1 / -1; justify-self: start; } .blog-detail__header { margin-bottom: 1rem; } /* Bild auf der 12px-Spur, flaches Mobil-Format, ohne Nachweis. */ .blog-detail__hero { width: calc(100vw - 24px); margin-bottom: 31px; } .blog-detail__hero img { max-height: none; aspect-ratio: 368 / 146; } .blog-detail__image-credit { display: none; } /* Fliesstext 16/24 (17->16-Konvention), Ueberschriften-Leiter der Statik. */ .blog-detail .blog-detail__content :is(p, li) { font-size: 16px; line-height: 24px; } .blog-detail .blog-detail__content h2 { margin: 44px 0 12px; font-size: 24px; line-height: 36px; } .blog-detail .blog-detail__content h3 { margin: 40px 0 12px; font-size: 20px !important; line-height: 28px; } .blog-detail .blog-detail__content h4 { margin: 40px 0 10px; font-size: 18px; line-height: 26px; } /* Karussell: keine Haarlinie, Ueberschrift 26/32, Karten-Titel 20/26 wie die Listenkarten der Statik. */ main > div.page-variant > .blog-detail + .layout-posts-carousel > .section-inner-carousel { padding-top: 3.5rem !important; border-top: 0; } main > div.page-variant > .blog-detail + .layout-posts-carousel .headline { font-size: 26px !important; line-height: 32px; } main > div.page-variant > .blog-detail + .layout-posts-carousel article h3 { font-size: 20px !important; line-height: 26px; } main > div.page-variant > .blog-detail + .layout-posts-carousel .teaser { line-height: 23px; } } /* Nachtrag: Die Mobil-Spur der Uebersichts-Box verlor gegen die Basisregel (section.-Praefix zaehlt eine Typstufe mehr). */ @media (max-width: 603px) { section.blog-overview__cta { width: calc(100vw - 24px); } } /* Nachtrag: Die Karussell-Karten setzen height 5.5rem auf den Titel — hoeher als die drei geclampten Zeilen, dadurch lugte eine angeschnittene vierte Zeile unter der Ellipse hervor. Hoehe ans Zeilenmass koppeln. */ main > div.page-variant > .blog-detail + .layout-posts-carousel article h3 { height: calc(3 * 1.3em); } @media (max-width: 603px) { main > div.page-variant > .blog-detail + .layout-posts-carousel article h3 { height: calc(3 * 26px); } } /* Nachtrag 2: Die 5.5rem-Hoehe sitzt in einer geschachtelten Bestandsregel, deren & die volle Eltern-Spezifitaet traegt — mobil nur per !important zu schlagen. */ @media (max-width: 603px) { main > div.page-variant > .blog-detail + .layout-posts-carousel article h3 { height: calc(3 * 26px) !important; } } /* Nachtrag 3: max-height deckelt unabhaengig davon, welche height-Deklaration die Karten-Nesting-Kaskade gewinnt. */ @media (max-width: 603px) { main > div.page-variant > .blog-detail + .layout-posts-carousel article h3 { max-height: calc(3 * 26px) !important; } } /* Nachtrag 4: Es war eine min-height (5.5rem) — die schlaegt max-height und hielt die Box auf 93px. */ @media (max-width: 603px) { main > div.page-variant > .blog-detail + .layout-posts-carousel article h3 { min-height: calc(3 * 26px) !important; } } /* ========================================================= NEWSLETTER-BOX — Korrekturrunde Leon 28.08. ========================================================= */ /* talents-Logo (Theme-SVG, 135x34) statt Wortmarke; der Text im bleibt fuer Screenreader und wird nur unsichtbar. */ .blog-overview__newsbox-brand { display: block; width: calc(24px * 135 / 34); height: 24px; overflow: hidden; background-color: var(--c-white); -webkit-mask: url("/wp-content/themes/custom-theme/images/talents.svg") center / contain no-repeat; mask: url("/wp-content/themes/custom-theme/images/talents.svg") center / contain no-repeat; color: transparent; font-size: 0; } /* Logo -> Headline 12, Headline einzeilig, Headline -> Text 32. */ .blog-overview__newsbox h2 { max-width: none; margin-top: 12px; } .blog-overview__newsbox p { margin-top: 32px; font-weight: 600; } .blog-overview__newsbox p em { font-weight: 700; } /* Button wie die uebrigen Pillen (17/600, 12x24, 44er-Hoehe, 12.8er-Pfeil) — nur weiss mit dunklem Text und Pfeil. */ .blog-overview__newsbox-cta { min-height: 44px; gap: 0.5rem; padding: 12px 24px; color: #222222; font-size: 17px; font-weight: 600; } .blog-overview__newsbox-cta::after { width: 0.7529em; height: 0.7529em; background-color: #222222; -webkit-mask-size: calc(100% - 2px) calc(100% - 2px); mask-size: calc(100% - 2px) calc(100% - 2px); } @media (max-width: 603px) { .blog-overview__newsbox { padding: 24px; } .blog-overview__newsbox-brand { width: calc(16px * 135 / 34); height: 16px; } .blog-overview__newsbox h2 { margin-top: 12px; } .blog-overview__newsbox p { margin-top: 24px; font-size: 20px; line-height: 26px; } .blog-overview__newsbox-cta { margin-top: 32px; } } /* Nachtrag: Die page-variant-Globalregeln (0,1,3) druecken den Boxtext auf 24er-Zeilen bzw. mobil auf 16px — Spezifitaet ueber den Sektions-Wrapper anheben. */ :is(.blog-overview__cta, .blog-detail__cta) .blog-overview__newsbox p { line-height: 32px; } @media (max-width: 603px) { :is(.blog-overview__cta, .blog-detail__cta) .blog-overview__newsbox p { font-size: 20px; line-height: 26px; } } /* Korrektur: Die globale a:is(:visited,:active)-Regel (color: inherit) faerbte den besuchten Newsletter-Knopf weiss — computed styles verschleiern :visited, deshalb war es nur im echten Browser sichtbar, nie in der Messung. */ .blog-overview__newsbox-cta, .blog-overview__newsbox-cta:is(:link, :visited, :hover, :active, :focus-visible) { color: #222222 !important; } /* Themen-Zeile ist am Desktop per Maus ziehbar (talents.js) — Greif-Cursor, waehrend des Ziehens ohne Textauswahl und ohne traeges scroll-behavior. */ @media (min-width: 604px) { .blog-overview__categories { cursor: grab; } } .blog-overview__categories.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; } .blog-overview__categories.is-dragging a { cursor: grabbing; } /* Ausfade-Kanten der Themen-Zeile folgen am Desktop der Scroll-Position (Werte setzt talents.js): rechts verschwindet der Fade am Anschlag, links waechst er beim Ziehen — als registrierte Langen-Properties weich animierbar. */ @property --ins-fade-l { syntax: ""; inherits: false; initial-value: 0px; } @property --ins-fade-r { syntax: ""; inherits: false; initial-value: 96px; } @media (min-width: 604px) { .blog-overview__categories { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ins-fade-l), #000 calc(100% - var(--ins-fade-r)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--ins-fade-l), #000 calc(100% - var(--ins-fade-r)), transparent 100%); transition: --ins-fade-l var(--dur) var(--ease), --ins-fade-r var(--dur) var(--ease); } } /* ========================================================= KONTAKT (/kontakt/) — Neuaufbau nach Design/Statik. Markup kommt aus dem ACF-Shortcode-Layout der Seite 9898 (section.wpk-body) plus CF7-Formular 21706 (.wpcf7-form). Masse aus der statischen Referenz (pages/kontakt.css); die Klassen sind fuer /talents/kontakt/ wiederverwendbar. ========================================================= */ /* Hero: der Verlauf endet in einem zarteren Blau (#F3FAFE) als der Standard-Hero-Tint — deshalb ohne has-gradient/Bild, der Verlauf liegt als background-image ueber der Inline-Grundfarbe. Unten schneidet die weisse Formular-Sektion hart ab. */ body.page-id-9898 .layout-hero-wpg { background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 27%, #F3FAFE 70%); } /* --------------------------------------------------------- SEKTION + GRID: 800er-Karte + 428er-Seitenleiste mit 32px Rinne = 1260px. `fr` haelt das Verhaeltnis beim Schrumpfen. --------------------------------------------------------- */ section.wpk-body { width: min(1260px, calc(100vw - 3rem)); margin-inline: auto; padding-block: 60px; padding-inline: 0 !important; /* globale section-Paddings neutralisieren */ } .wpk-grid { display: grid; grid-template-columns: 800fr 428fr; gap: 32px; align-items: start; } .wpk-aside { display: grid; gap: 24px; align-content: start; } /* --------------------------------------------------------- FORMULAR-KARTE --------------------------------------------------------- */ .wpk-card { padding: 31px 48px; border: 1px solid #D4D4D4; border-radius: 16px; background: #FFFFFF; } .wpk-body .wpk-title { margin: 0; color: #222222; font-size: 40px; line-height: 1.05; } .wpk-body .wpk-subtitle { margin: 22px 0 0; color: #555555; font-size: 17px; line-height: 1.55; } /* CF7 wickelt Label+Feld in p mit br — beides neutralisieren; die Honeypot-Zeile (einziges direktes p im form) verschwindet. */ .wpk-card .wpcf7-form p { margin: 0; } .wpk-card .wpcf7-form .wpk-fields br { display: none; } .wpk-card .wpcf7-form > p { display: none; } /* --------------------------------------------------------- FELD-RASTER: 2 Spalten, 24er Rinne; der Zeilenabstand (23px) misst von Feldunterkante zum naechsten Label. --------------------------------------------------------- */ .wpk-fields { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 23px; margin-top: 28px; } .wpk-field--wide { grid-column: 1 / -1; } .wpk-fields .wpcf7-form-control-wrap { display: block; } .wpk-body .wpk-label { display: block; margin-bottom: 3px; color: #727272; font-size: 14px; line-height: 1.4; } /* Ein Rahmenstil fuer Select, Input und Textarea. */ .wpk-body .wpk-control { display: block; width: 100%; height: 56px; padding: 0 16px; border: 1px solid #D4D4D4; border-radius: 12px; background: #FFFFFF; color: #555555; font-family: inherit; font-size: 17px; line-height: 1.4; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .wpk-body .wpk-control::placeholder { color: #727272; opacity: 1; } .wpk-body .wpk-control:hover { border-color: #929292; } .wpk-body .wpk-control:focus-visible { outline: none; border-color: var(--c-pri); box-shadow: 0 0 0 3px rgba(211, 37, 102, 0.22); } .wpk-body .wpk-control[aria-invalid="true"] { border-color: var(--c-pri); } .wpk-body .wpk-textarea { height: 200px; padding: 14px 16px; resize: vertical; } /* --- Select: natives Element, eigener Chevron ------------- */ .wpk-select { position: relative; display: block; } .wpk-select .wpk-control { appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer; } .wpk-select::after { content: ""; position: absolute; top: 50%; right: 17px; width: 14px; height: 8px; transform: translateY(-50%); background-color: var(--c-pri); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; } /* --- Einwilligung ----------------------------------------- */ .wpk-field--consent { margin-top: -8px; } .wpk-field--consent .wpcf7-list-item { display: block; margin: 0; } .wpk-field--consent .wpcf7-list-item label { display: flex; align-items: flex-start; gap: 12px; max-width: 519px; cursor: pointer; } .wpk-field--consent .wpcf7-list-item-label { color: #555555; font-size: 15px; line-height: 21px; } .wpk-field--consent .wpcf7-list-item-label a, .wpk-field--consent .wpcf7-list-item-label a:is(:link, :visited, :hover, :active, :focus-visible) { color: var(--c-pri) !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } /* Das Theme nullt Checkboxen global — Masse und Rahmen kommen hier zurueck, der Haken ist eine CSS-Form statt Icon-Glyphe. */ .wpk-field--consent input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 32px; height: 32px; margin: 0; border: 1px solid #D4D4D4; border-radius: 8px; background: #FFFFFF; cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .wpk-field--consent input[type="checkbox"]::after { content: ""; display: block; width: 10px; height: 6px; margin: 9px auto 0; border-left: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; transform: rotate(-45deg) scale(0.6); opacity: 0; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .wpk-field--consent input[type="checkbox"]:checked { background: var(--c-pri); border-color: var(--c-pri); } .wpk-field--consent input[type="checkbox"]:checked::after { opacity: 1; transform: rotate(-45deg) scale(1); } .wpk-field--consent input[type="checkbox"][aria-invalid="true"] { border-color: var(--c-pri); } /* --- Absenden + Rueckmeldungen ---------------------------- */ .wpk-actions { grid-column: 1 / -1; margin-top: 1px; } .wpk-body .wpk-submit { height: 50px; min-height: 0; padding: 0 47px; border: 0; border-radius: 50px; background: var(--c-pri); color: #FFFFFF; font-family: inherit; font-size: 17px; font-weight: 600; cursor: pointer; transition: transform var(--dur) var(--ease); } .wpk-body .wpk-submit:is(:hover, :focus-visible) { transform: translateY(-0.15rem); } .wpk-body .wpk-submit:disabled { opacity: 0.6; transform: none; cursor: default; } /* Feldfehler unter dem jeweiligen Control. */ .wpk-fields .wpcf7-not-valid-tip { display: block; margin-top: 6px; color: var(--c-pri); font-size: 13px; line-height: 1.4; } /* Gesamt-Rueckmeldung: schlichte Statuszeile statt CF7-Kasten. */ .wpk-card .wpcf7-response-output { margin: 24px 0 0; padding: 0; border: 0; color: #555555; font-size: 15px; line-height: 1.4; } .wpk-card .wpcf7-form:is(.invalid, .unaccepted, .failed, .aborted) .wpcf7-response-output { color: var(--c-pri); } /* --------------------------------------------------------- INFOBOXEN --------------------------------------------------------- */ .wpk-info { padding: 24px 32px; border: 1px solid #D4D4D4; border-radius: 16px; background: #FFFFFF; } .wpk-body .wpk-info-title { margin: 0; color: #222222; font-size: 20px; line-height: 1.05; } .wpk-body .wpk-info-text { margin: 14px 0 0; color: #555555; font-size: 17px; line-height: 24px; } .wpk-body .wpk-info-text strong { font-weight: 700; } /* Links im Boxtext stehen halbfett in Magenta statt unterstrichen. */ .wpk-body .wpk-info-text a, .wpk-body .wpk-info-text a:is(:link, :visited, :hover, :active, :focus-visible) { color: var(--c-pri) !important; font-weight: 600; text-decoration: none; } .wpk-body .wpk-info-link { display: flex; width: fit-content; align-items: center; gap: 6px; margin-top: 17px; font-size: 17px; line-height: 1; font-weight: 600; text-decoration: none; transition: color var(--dur) var(--ease); } .wpk-body .wpk-info-link, .wpk-body .wpk-info-link:is(:link, :visited, :active) { color: var(--c-pri) !important; } .wpk-body .wpk-info-link:is(:hover, :focus-visible) { color: #B81E58 !important; } .wpk-body .wpk-info-link::after { content: ""; width: 0.7529em; height: 0.7529em; background-color: currentColor; -webkit-mask: var(--icon-arrow-dio) center / contain no-repeat; mask: var(--icon-arrow-dio) center / contain no-repeat; } /* --------------------------------------------------------- ZWISCHENBREITEN (Leiter der Statik) --------------------------------------------------------- */ /* Laptop: nur die Innenabstaende geben nach. */ @media (max-width: 1199px) { .wpk-card { padding: 31px 36px; } .wpk-info { padding: 24px; } } /* Die Selects tragen die laengsten Werte — in den Baendern, in denen die halbe Spalte dafuer zu schmal wird, spannen sie beide Spalten (gemessen in der Statik: 901-1199 und unter 768). */ @media (min-width: 901px) and (max-width: 1199px), (max-width: 768px) { .wpk-field--select { grid-column: 1 / -1; } } /* Tablet: Seitenleiste unter die Karte, Boxen nebeneinander. */ @media (max-width: 900px) { .wpk-grid { grid-template-columns: 1fr; gap: 24px; } .wpk-aside { grid-template-columns: 1fr 1fr; gap: 24px; } } @media (max-width: 700px) { .wpk-aside { grid-template-columns: 1fr; } } /* Handy: 12px-Spur wie die Karten der anderen Unterseiten, 17px-Groessen fallen auf die 16px-Konvention, Submit 44px. */ @media (max-width: 603px) { body.page-id-9898 .layout-hero-wpg { background-image: linear-gradient(180deg, #FFFFFF 0%, #F3FAFE 62%); } section.wpk-body { width: calc(100vw - 24px); padding-block: 32px 60px; } .wpk-grid { gap: 24px; } .wpk-aside { gap: 16px; } .wpk-card { padding: 18px 24px 20px; } .wpk-body .wpk-title { font-size: 26px; } .wpk-body .wpk-subtitle { margin-top: 20px; font-size: 16px; } .wpk-fields { grid-template-columns: 1fr; row-gap: 18px; margin-top: 20px; } .wpk-body .wpk-control { height: 55px; font-size: 16px; } .wpk-body .wpk-textarea { height: 130px; } .wpk-field--consent { margin-top: 6px; } .wpk-field--consent .wpcf7-list-item label { max-width: none; } .wpk-actions { margin-top: 8px; } .wpk-body .wpk-submit { height: 44px; padding: 0 31px; font-size: 16px; } .wpk-info { padding: 18px 24px; } .wpk-body .wpk-info-text { margin-top: 9px; font-size: 16px; line-height: 23px; } .wpk-body .wpk-info-link { margin-top: 15px; font-size: 16px; } } /* Nachtrag Kontakt: eine globale Theme-Regel stellt Links auf display:block — im Fliesstext der Infobox und der Einwilligung muessen sie inline laufen, sonst bricht der Satz um sie herum. */ .wpk-body .wpk-info-text a, .wpk-field--consent .wpcf7-list-item-label a { display: inline; } /* Nachtrag Kontakt 2: CF7s eigene response-output-Regel wiegt (0,2,1) und behielt Rahmen und Kasten-Abstaende — der Selektor hier hebt margin/padding/border mit (0,3,0) endgueltig auf. */ .wpk-card .wpcf7-form .wpcf7-response-output { margin: 24px 0 0; padding: 0; border: 0; } /* ========================================================= KONTAKT — Korrekturrunde Leon (28.08.) ========================================================= */ /* Abstand Hero -> Formularsektion: die Theme-Regel fuer Sektionen nach einem content-only-Hero (36px, unter 861px sogar 0) wiegt (0,3,3) und schlug das padding-block der Sektion. Gleicher Selektorbau stellt die Sollwerte her: 60px, mobil 32px. */ main > div.page-variant > .layout-hero-wpg + section.wpk-body { padding-top: 60px; } /* Karte und Feldraster auf die runden Werte. */ .wpk-card { padding: 32px 48px; } .wpk-fields { row-gap: 24px; } /* Labels sitzen mit Zeilenhoehe 1 und 6px Luft auf ihrem Feld. */ .wpk-body .wpk-label { margin-bottom: 6px; line-height: 1; } /* Der Absende-Button folgt dem 24er-Raster der Feldzeilen. */ .wpk-actions { margin-top: 0; } /* Wo die beiden Selects uebereinander stehen, ruecken sie als Paar auf 16px zusammen (24er-Raster minus 8). */ @media (min-width: 901px) and (max-width: 1199px), (max-width: 768px) { .wpk-field--select + .wpk-field--select { margin-top: -8px; } } @media (max-width: 1199px) { .wpk-card { padding: 32px 36px; } } @media (max-width: 603px) { main > div.page-variant > .layout-hero-wpg + section.wpk-body { padding-top: 32px; } .wpk-card { padding: 20px 24px; } .wpk-info { padding: 20px 24px; } .wpk-fields { row-gap: 24px; } /* Einspaltig bildet auch Name -> E-Mail ein 16er-Paar; alle uebrigen Zeilen (auch Einwilligung und Button) laufen im 24er-Raster. */ .wpk-field:has(#wpk-mail) { margin-top: -8px; } .wpk-field--consent { margin-top: 0; } .wpk-actions { margin-top: 0; } } /* ========================================================= KONTAKT — Korrekturrunde Leon, Teil 2 (28.08.) ========================================================= */ /* Infoboxen und Feldraster: 16er/32er-Abstaende. */ .wpk-body .wpk-info-text { margin-top: 16px; } .wpk-body .wpk-info-link { margin-top: 16px; } .wpk-fields { margin-top: 32px; } /* Labels einheitlich 13px. */ .wpk-body .wpk-label { font-size: 13px; } /* Die Theme-Regel :is(*, .input-field, …) > input[type=text/email] wiegt (0,2,1) und drueckte Name/E-Mail auf height:auto (34px) und die Textarea auf 8px Innenabstand — Feldhoehe und Polster hier mit (0,3,0) festgemacht. */ .wpk-body .wpk-fields .wpk-control { height: 56px; padding: 0 16px; } .wpk-body .wpk-fields .wpk-select .wpk-control { padding-right: 48px; } .wpk-body .wpk-fields .wpk-textarea { height: 200px; padding: 16px; } @media (max-width: 603px) { .wpk-body .wpk-fields .wpk-control { height: 55px; } .wpk-body .wpk-fields .wpk-textarea { height: 130px; } } /* Nachtrag: das Theme setzt :is(*, .input-field) > textarea auf padding 0.5rem !important — nur !important kommt dagegen an. */ .wpk-body .wpk-fields .wpk-textarea { padding: 16px !important; } /* Korrektur: Untertitel 24px unter dem Titel; der Abstand zum Formular ist das margin-top von .wpk-fields (wpcf7-Wrapper und form tragen nichts bei) — Desktop 32px, mobil 20px. */ .wpk-body .wpk-subtitle { margin-top: 24px; } @media (max-width: 603px) { .wpk-body .wpk-subtitle { margin-top: 20px; } .wpk-fields { margin-top: 20px; } } /* Abschluss Kontakt: der Infobox-Pfeil zeigt klein nach rechts (statt des diagonalen Button-Pfeils), und der Abstand zum Formular faellt mobil von 20 auf 16px. */ .wpk-body .wpk-info-link::after { width: 12px; height: 10px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1 6h12M8 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1 6h12M8 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } @media (max-width: 603px) { .wpk-fields { margin-top: 16px; } } /* Korrektur: mobil ruecken Titel->Untertitel auf 16px zusammen; der Abstand Untertitel->Formular bleibt bei den beauftragten 20px (war zwischenzeitlich faelschlich auf 16 gerutscht). */ @media (max-width: 603px) { .wpk-body .wpk-subtitle { margin-top: 16px; } .wpk-fields { margin-top: 20px; } } /* ========================================================= RECHTSSEITEN (Impressum / Datenschutz) — Umbau der page-legal-Vorlage auf das Statik-Layout (legal.css): Verlaufsstreifen-Hero mit grossem Titel, darunter eine schmale 720px-Textspalte mit 270px-Einzug im 1260er-Raster. Die Inhalte kommen als WYSIWYG-HTML aus den ACF-Feldern der Seite (alles in der linken Spalte, rechte Spalte leer). Gilt fuer alle Seiten mit dem Legal-Template — die spaeteren Talents-Rechtsseiten haben denselben Aufbau. ========================================================= */ .page-legal { /* Inhalt auf der 1260er-Flucht, Hintergrund full-bleed. Streifen: weiss unter der Nav, ab 96px laeuft der Tint ein, steht ab 200px und endet hart bei 370px (Design). */ padding: 196px max(24px, calc(50vw - 630px)) 61px; background: linear-gradient(180deg, #FFFFFF 0, #FFFFFF 96px, #F3FAFE 200px, #F3FAFE 370px, #FFFFFF 370px); } .page-legal .title { margin: 0; color: #222222; font-size: 110px; line-height: 1.09; text-transform: none; overflow-wrap: break-word; } /* Streifen endet bei 370, das Dokument beginnt 60px darunter: 196 + 120 Titelzeile + 114 = 430. */ .page-legal .columns { display: block; margin-top: 114px; margin-left: 270px; max-width: 720px; gap: 0; } .page-legal .columns .left, .page-legal .columns .right { width: auto; color: #555555; font-size: 17px; line-height: 24px; } /* Die rechte Spalte verliert ihre graue Box — sie ist leer bzw. nur Fortsetzung des Dokuments. */ .page-legal .columns .right { padding: 0; border-radius: 0; background: none; } /* Grundrhythmus: eine Leerzeile zwischen den Blöcken. */ .page-legal .columns .left > * + *, .page-legal .columns .right > * + * { margin-top: 24px; } /* Kapitel-Ueberschriften (Impressum). */ .page-legal .columns :is(.left, .right) > :is(h2, h3) { margin-top: 48px; color: #222222; font-size: 24px; font-weight: 700; line-height: 36px; } .page-legal .columns :is(.left, .right) > :is(h2, h3) + * { margin-top: 16px; } .page-legal .columns :is(.left, .right) > .p-legal__h--lg { margin-top: 66px; font-size: 32px; line-height: 1.35; } .page-legal .columns :is(.left, .right) > .p-legal__h--lg + * { margin-top: 27px; } .page-legal .columns :is(.left, .right) > .p-legal__h--sm { font-size: 20px; line-height: 30px; } .page-legal .columns :is(.left, .right) > :is(h2, h3) + .p-legal__h--sm { margin-top: 24px; } /* Datenschutz: fette Zwischentitel laufen im Zeilenraster mit. */ .page-legal .columns :is(.left, .right) strong { font-weight: 700; } /* Listen: nummeriert bzw. mit Punkt, Text haengt eingerueckt. */ .page-legal .columns :is(.left, .right) ol { padding-left: 26px; list-style: decimal; } .page-legal .columns :is(.left, .right) ul { padding-left: 26px; list-style: disc; } .page-legal .columns :is(.left, .right) li + li { margin-top: 0; } .page-legal .columns :is(.left, .right) li { margin-top: 0; } /* Links: dezent unterstrichen, Farbe erst beim Zeigen; lange URLs duerfen ueberall brechen. Die globale a-Blockregel wird zurueckgestellt. */ .page-legal .columns :is(.left, .right) a { display: inline; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; overflow-wrap: anywhere; transition: color var(--dur) var(--ease); } .page-legal .columns :is(.left, .right) a:is(:hover, :focus-visible) { color: var(--c-pri) !important; } /* --------------------------------------------------------- ZWISCHENBREITEN (Leiter der Statik) --------------------------------------------------------- */ @media (max-width: 1199px) { .page-legal { padding-top: 180px; background: linear-gradient(180deg, #FFFFFF 0, #FFFFFF 96px, #F3FAFE 200px, #F3FAFE 324px, #FFFFFF 324px); } .page-legal .title { font-size: 88px; } /* 180 + 96 Titelzeile + 108 = 384 (Streifen 324 + 60). */ .page-legal .columns { margin-top: 108px; margin-left: 21.4%; } } @media (max-width: 900px) { .page-legal { padding-top: 160px; background: linear-gradient(180deg, #FFFFFF 0, #FFFFFF 96px, #F3FAFE 200px, #F3FAFE 274px, #FFFFFF 274px); } .page-legal .title { font-size: 68px; } /* 160 + 74 Titelzeile + 100 = 334 (Streifen 274 + 60). */ .page-legal .columns { margin-top: 100px; margin-left: 0; } } @media (max-width: 603px) { .page-legal { /* Hero-Beginn auf der 140px-Konvention, 24px-Textrinne. */ padding: 140px 24px 48px; background: linear-gradient(180deg, #FFFFFF 0, #FFFFFF 64px, #F3FAFE 140px, #F3FAFE 212px, #FFFFFF 212px); } .page-legal .title { font-size: 40px; } /* 140 + 44 Titelzeile + 68 = 212 (Streifen) + 40. */ .page-legal .columns { margin-top: 68px; } .page-legal .columns :is(.left, .right) > :is(h2, h3) { margin-top: 36px; font-size: 21px; line-height: 30px; } .page-legal .columns :is(.left, .right) > .p-legal__h--lg { margin-top: 44px; font-size: 26px; } .page-legal .columns :is(.left, .right) > .p-legal__h--lg + * { margin-top: 20px; } .page-legal .columns :is(.left, .right) > .p-legal__h--sm { font-size: 18px; line-height: 26px; } .page-legal .columns :is(.left, .right) > :is(h2, h3) + .p-legal__h--sm { margin-top: 20px; } .page-legal .columns :is(.left, .right) { font-size: 16px; line-height: 24px; } } /* Nachtrag Rechtsseiten: ein globales h3 { font-size: clamp(...) !important } schlaegt die Dokument-Stufen — die Groessen hier brauchen deshalb selbst !important. Links erben Schrift und Zeile des Absatzes. */ .page-legal .columns :is(.left, .right) > :is(h2, h3) { font-size: 24px !important; line-height: 36px !important; } .page-legal .columns :is(.left, .right) > .p-legal__h--lg { font-size: 32px !important; line-height: 1.35 !important; } .page-legal .columns :is(.left, .right) > .p-legal__h--sm { font-size: 20px !important; line-height: 30px !important; } .page-legal .columns :is(.left, .right) a { font-size: inherit; line-height: inherit; } @media (max-width: 603px) { .page-legal .columns :is(.left, .right) > :is(h2, h3) { font-size: 21px !important; line-height: 30px !important; } .page-legal .columns :is(.left, .right) > .p-legal__h--lg { font-size: 26px !important; } .page-legal .columns :is(.left, .right) > .p-legal__h--sm { font-size: 18px !important; line-height: 26px !important; } } /* Nachtrag 2 Rechtsseiten: eine &-Nesting-Regel gibt Links eine 1.4rem-Zeilenbox (22.4px) und verzieht damit die 24px-Zeilen des Dokuments — Erben von Schrift und Zeile erzwingen. */ .page-legal .columns :is(.left, .right) a { font-size: inherit !important; line-height: inherit !important; } /* Nachtrag 3 Rechtsseiten: die 1.4rem-Zeile haengt schon an den Absaetzen selbst — das 24px-Zeilenraster deshalb direkt und absolut auf Textfluss und Links. */ .page-legal .columns :is(.left, .right) :is(p, li, a) { line-height: 24px !important; } /* Nachtrag 4 Rechtsseiten: der unsichtbare Pfeil, den das Theme jedem Link als ::after anhaengt, hebt die Zeilenbox um 5px an (Fallback-Metrik) — im Dokument entfaellt er ersatzlos. */ .page-legal .columns :is(.left, .right) a::before, .page-legal .columns :is(.left, .right) a::after { content: none !important; } /* Nachtrag 5 Rechtsseiten: das Theme nullt list-style direkt am li — die Marker erben wieder von ol (Ziffer) bzw. ul (Punkt). */ .page-legal .columns :is(.left, .right) li { list-style: inherit !important; } /* ========================================================= HEADER & MENUE — Angleich an die abgenommene Statik Hamburger (Bars + Hover nur Desktop + X-Fold), Mini-Hover- menue, Menu-Overlay (Desktop/Tablet/Mobil), Welt-Reihenfolge, Talents-Brand auf Talents-Seiten. Referenz: components.css / mobile.css der Statik, Designs designs/menu/*.png ========================================================= */ /* ---------- Hamburger: drei Bars statt starrer Icons ---------- */ #pageHeader nav .actions #nav-tree-wrapper > label { --wim-burger-size: 3.25rem; --wim-burger-bar: 22px; --wim-burger-bar-mid: 14px; --wim-burger-bar-h: 2px; --wim-burger-gap: 6px; --wim-burger-bar-h-x: 2.5px; display: inline-flex !important; flex-direction: column; align-items: flex-end; justify-content: center; gap: var(--wim-burger-gap); width: var(--wim-burger-size) !important; height: var(--wim-burger-size) !important; padding: 0 calc( ( var(--wim-burger-size) - var(--wim-burger-bar) ) / 2 ) !important; border-radius: var(--rad-inf); background-color: var(--c-pri) !important; color: var(--c-white) !important; transition: background-color 0.22s cubic-bezier(0.2, 0.7, 0.25, 1); } #pageHeader nav .actions #nav-tree-wrapper > label .nav-burger-bar { display: block; width: var(--wim-burger-bar); height: var(--wim-burger-bar-h); border-radius: var(--rad-inf); background-color: currentColor; transition-property: width, height, transform, opacity; transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); } #pageHeader nav .actions #nav-tree-wrapper > label .nav-burger-bar:nth-child(2) { width: var(--wim-burger-bar-mid); } /* Hover-Animation nur an echten Zeigern (Desktop) */ @media (hover: hover) and (pointer: fine) { #pageHeader nav .actions #nav-tree-wrapper > label:hover { background-color: #B81E58 !important; } #pageHeader nav .actions #nav-tree-wrapper > label:hover .nav-burger-bar:nth-child(2) { width: var(--wim-burger-bar); } } /* Offen: Bars falten sich zum X (Checkbox-Zustand) */ #pageHeader nav .actions #nav-tree-wrapper:has(> #nav-tree-toggle:checked) > label .nav-burger-bar { height: var(--wim-burger-bar-h-x); } #pageHeader nav .actions #nav-tree-wrapper:has(> #nav-tree-toggle:checked) > label .nav-burger-bar:nth-child(1), #pageHeader nav .actions #nav-tree-wrapper:has(> #nav-tree-toggle:checked) > label .nav-burger-bar:nth-child(3) { width: calc( var(--wim-burger-bar) * 1.41421 - var(--wim-burger-bar-h-x) ); } #pageHeader nav .actions #nav-tree-wrapper:has(> #nav-tree-toggle:checked) > label .nav-burger-bar:nth-child(1) { transform: translate( calc( ( var(--wim-burger-bar) * 0.41421 - var(--wim-burger-bar-h-x) ) / 2 ), calc( var(--wim-burger-bar-h-x) + var(--wim-burger-gap) ) ) rotate(45deg); } #pageHeader nav .actions #nav-tree-wrapper:has(> #nav-tree-toggle:checked) > label .nav-burger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); } #pageHeader nav .actions #nav-tree-wrapper:has(> #nav-tree-toggle:checked) > label .nav-burger-bar:nth-child(3) { transform: translate( calc( ( var(--wim-burger-bar) * 0.41421 - var(--wim-burger-bar-h-x) ) / 2 ), calc( -1 * ( var(--wim-burger-bar-h-x) + var(--wim-burger-gap) ) ) ) rotate(-45deg); } /* ---------- Mini-Hovermenue: Werte der Statik ---------- */ #pageHeader nav .actions #nav-tree-wrapper #hov-tree { display: block !important; position: absolute; top: 100%; right: 0; /* 10px Luft zum Button; das Padding ist zugleich die Hover-Bruecke */ padding: 10px 0 0 !important; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); transition: opacity 0.22s cubic-bezier(0.2, 0.7, 0.25, 1), transform 0.22s cubic-bezier(0.2, 0.7, 0.25, 1), visibility 0s linear 0.22s; } @media (hover: hover) and (pointer: fine) { #pageHeader nav .actions #nav-tree-wrapper label:is(:hover, :focus) + #hov-tree, #pageHeader nav .actions #nav-tree-wrapper label:has(> .ptr-catcher:is(:hover, :focus)) + #hov-tree, #pageHeader nav .actions #nav-tree-wrapper #hov-tree:is(:hover, :focus, :focus-within) { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity 0.22s cubic-bezier(0.2, 0.7, 0.25, 1), transform 0.22s cubic-bezier(0.2, 0.7, 0.25, 1); } } /* Nie neben dem offenen Overlay, nie auf Telefonen */ #pageHeader nav .actions #nav-tree-wrapper:has(#nav-tree-toggle:checked) #hov-tree { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } @media (max-width: 603px) { #pageHeader nav .actions #nav-tree-wrapper #hov-tree { display: none !important; } } #pageHeader nav .actions #nav-tree-wrapper #hov-tree #hov-tree-trunk { display: flex; flex-direction: column; gap: 16px; width: 300px !important; min-width: 0 !important; max-width: none !important; padding: 13px 20px 18px !important; border-radius: 20px !important; background-color: var(--c-white); box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.08) !important; } #hov-tree-branch-wpg { --wim-accent: var(--c-pri); } #hov-tree-branch-talents { --wim-accent: #2B4781; } #pageHeader nav #hov-tree .hov-tree-branch-head { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 0 9px !important; font-family: var(--font-hl); font-weight: 700 !important; font-size: 12.5px !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: uppercase; color: var(--wim-accent) !important; } #pageHeader nav #hov-tree .hov-tree-branch-head::before { content: '' !important; flex: none; width: 5px; height: 5px; margin: 0 !important; border-radius: var(--rad-inf); background-color: var(--wim-accent) !important; font-size: 0 !important; } #pageHeader nav #hov-tree #hov-tree-trunk hr { width: 100%; height: 1px !important; margin: 0 !important; border: none !important; background-color: #D4D4D4 !important; } #pageHeader nav #hov-tree ul[aria-labelledby] { display: block; margin: 6px 0 0 !important; padding: 0 0 0 12px !important; } #pageHeader nav #hov-tree ul[aria-labelledby] .menu-item { display: block; margin: 0 !important; padding: 0 !important; } #pageHeader nav #hov-tree ul[aria-labelledby] .menu-item a { display: block !important; padding: 7px 0 !important; font-family: var(--font-hl); font-weight: 700 !important; font-size: 16.5px !important; line-height: 1.15 !important; color: var(--c-black) !important; transition: color 0.15s cubic-bezier(0.2, 0.7, 0.25, 1), padding-left 0.15s cubic-bezier(0.2, 0.7, 0.25, 1); } #pageHeader nav #hov-tree ul[aria-labelledby] .menu-item a:is(:hover, :focus-visible) { color: var(--wim-accent) !important; padding-left: 6px !important; } #pageHeader nav #hov-tree ul[aria-labelledby] .menu-item.current a { color: var(--wim-accent) !important; } #pageHeader nav #hov-tree ul[aria-labelledby] .menu-item a::before, #pageHeader nav #hov-tree ul[aria-labelledby] .menu-item a::after { content: none !important; } /* ---------- Menu-Overlay: Sheet + Layout ---------- */ #pageHeader nav .actions #nav-tree-wrapper #nav-tree { justify-content: flex-start !important; padding: 208px 24px 96px !important; overflow-y: auto; overscroll-behavior: contain; background: var(--c-white) !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; visibility: hidden; transform: none !important; transition: opacity 0.4s cubic-bezier(0.2, 0.7, 0.25, 1), visibility 0s linear 0.4s !important; } #pageHeader nav .actions #nav-tree-wrapper input:checked + #nav-tree { visibility: visible; transform: none !important; transition: opacity 0.4s cubic-bezier(0.2, 0.7, 0.25, 1) !important; } /* Sanfter Versatz des Inhalts beim Einblenden (Statik: 18px) */ #pageHeader nav .actions #nav-tree-wrapper #nav-tree > ul { gap: 0 !important; max-width: 1014px !important; transform: translateY(18px); transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.25, 1); } #pageHeader nav .actions #nav-tree-wrapper input:checked + #nav-tree > ul { transform: none; } /* Seite hinter dem Overlay nicht scrollen */ body:has(#nav-tree-toggle:checked) { overflow: hidden; } /* Aktive Welt zuerst — im Overlay wie im Mini-Menue */ #nav-tree-trunk { display: flex; flex-direction: column; } body:is(.mode-talents, .talents-nav) #nav-tree-branch-talents { order: -1; } body:is(.mode-talents, .talents-nav) #hov-tree-branch-talents { order: -1; } #pageHeader nav #nav-tree > ul > li + li { margin-top: 40px; } #pageHeader nav #nav-tree > ul > li details { padding: 0 !important; } #pageHeader nav #nav-tree > ul > li details > * + * { margin-top: 0 !important; } /* Gruppenkopf: Bullet + Label im Welt-Accent + Chevron */ #nav-tree-branch-wpg { --wim-accent: var(--c-pri); } #nav-tree-branch-talents { --wim-accent: #2B4781; } #pageHeader nav #nav-tree summary { gap: 16px; padding: 15px 0 !important; border-bottom: 1px solid #D4D4D4 !important; font-family: var(--font-hl); font-size: 23.5px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: uppercase; color: var(--wim-accent) !important; overflow-wrap: normal !important; word-break: normal !important; transition: color 0.22s cubic-bezier(0.2, 0.7, 0.25, 1); } #pageHeader nav #nav-tree summary::before { content: '' !important; flex: none; width: 8px; height: 8px; margin-right: 0 !important; border-radius: 50%; background-color: currentColor; font-size: 0 !important; } #pageHeader nav #nav-tree summary::after { content: '' !important; width: 8px !important; height: 14px !important; margin-left: 11px !important; background-image: none !important; background-color: currentColor !important; -webkit-mask: url('/wp-content/themes/custom-theme/images/icon_chevron_rounded.svg') center / contain no-repeat; mask: url('/wp-content/themes/custom-theme/images/icon_chevron_rounded.svg') center / contain no-repeat; transform: rotate(90deg); filter: none !important; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.25, 1); } #pageHeader nav #nav-tree details[open] summary::after { transform: rotate(-90deg); } /* Listen: graue Zweisteller-Nummer + grosse Display-Links */ #pageHeader nav #nav-tree details > ol { gap: 0 !important; padding: 17px 0 0 24px !important; } #pageHeader nav #nav-tree details > ol > li { padding: 20px 0 !important; font-family: var(--font-hl); font-size: clamp(28px, 2.48vw, 47.6px) !important; font-weight: 700 !important; line-height: 1.176 !important; color: var(--c-black); } #pageHeader nav #nav-tree details > ol > li::before { display: block !important; aspect-ratio: auto !important; width: auto !important; height: auto !important; min-width: 24px; padding: 0 !important; margin-right: 33px !important; border-radius: 0 !important; background: none !important; background-color: transparent !important; color: #929292 !important; font-family: "Source Sans 3", sans-serif; font-size: 24px !important; font-weight: 400 !important; line-height: 1 !important; opacity: 1 !important; transition: none !important; } #pageHeader nav #nav-tree details > ol > li:is(:hover, :focus-within)::before { margin-right: 33px !important; background: none !important; background-color: transparent !important; color: #929292 !important; } #pageHeader nav #nav-tree details > ol > li a { color: inherit; overflow-wrap: normal !important; word-break: normal !important; transition: color 0.22s cubic-bezier(0.2, 0.7, 0.25, 1); } #pageHeader nav #nav-tree details > ol > li:is(:hover, :focus-within) a { color: var(--wim-accent) !important; } #pageHeader nav #nav-tree details > ol > li a::before, #pageHeader nav #nav-tree details > ol > li a::after { content: none !important; } /* "Auch fuer:"-Chipzeile (Talents) */ #pageHeader nav #nav-tree .branch-extra { gap: 0 !important; padding: 21px 0 0 24px !important; margin-top: 0 !important; color: #929292; font-family: "Source Sans 3", sans-serif; font-size: 24px; } #pageHeader nav #nav-tree .branch-extra .extras-label { margin-right: 33px !important; color: #929292 !important; font-size: 24px !important; line-height: 1.2 !important; opacity: 1 !important; } #pageHeader nav #nav-tree .branch-extra ul { gap: 24px !important; } #pageHeader nav #nav-tree .branch-extra ul a.wt-bt { display: inline-flex; align-items: center; gap: 6px; min-height: 0 !important; padding: 13px 20px !important; border: 1px solid #D4D4D4 !important; border-radius: var(--rad-inf) !important; background: var(--c-white) !important; color: #555555 !important; font-family: "Source Sans 3", sans-serif !important; font-size: 16.5px !important; font-weight: 600 !important; line-height: 1.2 !important; transition: background-color 0.22s cubic-bezier(0.2, 0.7, 0.25, 1); } #pageHeader nav #nav-tree .branch-extra ul a.wt-bt:hover { background: #F0F0F0 !important; } #pageHeader nav #nav-tree .branch-extra ul a.wt-bt::after { width: 16px !important; height: 16px !important; margin-left: 0 !important; background-color: #555555 !important; } /* ---------- Tablet (bis 900): kompaktere Overlay-Typo ---------- */ @media (max-width: 900px) { #pageHeader nav .actions #nav-tree-wrapper #nav-tree { padding: 160px 24px 64px !important; } #pageHeader nav #nav-tree summary { font-size: 20px !important; } #pageHeader nav #nav-tree details > ol > li { padding: 14px 0 !important; } #pageHeader nav #nav-tree details > ol > li::before { min-width: 22px; margin-right: 24px !important; font-size: 20px !important; } #pageHeader nav #nav-tree details > ol > li:is(:hover, :focus-within)::before { margin-right: 24px !important; } #pageHeader nav #nav-tree .branch-extra { padding-top: 16px !important; font-size: 19px; } #pageHeader nav #nav-tree .branch-extra .extras-label { margin-right: 24px !important; font-size: 19px !important; } #pageHeader nav #nav-tree .branch-extra ul a.wt-bt { padding: 10px 22px !important; font-size: 17px !important; } } /* ---------- Welt-Slider im offenen Menue (nur Startseite) ---------- */ /* 901-1180: Marcels Versteckregel zuruecknehmen — der Slider bleibt wie in der Statik in der Leiste, solange das Menue ihn braucht */ @media (min-width: 901px) and (max-width: 1180px) { body.home #pageHeader nav .actions #global-toggle { display: block !important; } } /* Bis 900: volle Breite unter der Leiste, nur solange das Menue offen ist; das Overlay macht ihm mit padding-top Platz */ @media (max-width: 900px) { body.home:has(#nav-tree-toggle:checked) #pageHeader nav .actions #global-toggle { display: block !important; position: fixed; top: 160px; left: 24px; right: 24px; width: auto !important; height: 3.25rem; z-index: 999; } body.home:has(#nav-tree-toggle:checked) #pageHeader nav .actions #global-toggle #glob-toggle-inner { width: 100% !important; } body.home:has(#nav-tree-toggle:checked) #pageHeader nav .actions #nav-tree-wrapper #nav-tree { padding-top: 244px !important; } } /* ---------- Mobil (bis 603): Leiste + Overlay ---------- */ @media (max-width: 603px) { #pageHeader nav { padding: 12px !important; } #pageHeader nav #logo-wrapper { height: auto !important; } #pageHeader nav #logo-wrapper img, #pageHeader nav #logo-wrapper svg { width: 184px !important; max-width: 184px !important; height: auto !important; } /* Burger: keine Kreisflaeche, magenta Bars, 44px-Ziel */ #pageHeader nav .actions #nav-tree-wrapper > label { --wim-burger-size: 44px; --wim-burger-bar-mid: 15px; --wim-burger-gap: 5px; background-color: transparent !important; color: var(--c-pri) !important; } #pageHeader nav .actions #nav-tree-wrapper > label:hover { background-color: transparent !important; } /* Login-Pille wie die Statik-Mobilleiste */ #pageHeader nav .actions > .login.wt-bt { min-height: 44px !important; padding: 0.625rem 24px !important; font-size: 15px !important; } /* Overlay */ #pageHeader nav .actions #nav-tree-wrapper #nav-tree { padding: 124px 12px 64px !important; } body:is(.mode-talents, .talents-nav) #pageHeader nav .actions #nav-tree-wrapper #nav-tree { padding-top: 108px !important; } body.home:has(#nav-tree-toggle:checked) #pageHeader nav .actions #global-toggle { top: 124px; left: 12px; right: 12px; } body.home:has(#nav-tree-toggle:checked) #pageHeader nav .actions #nav-tree-wrapper #nav-tree { padding-top: 210px !important; } #pageHeader nav #nav-tree > ul > li + li { margin-top: 32px; } #pageHeader nav #nav-tree summary { gap: 8px; font-size: 20px !important; } #pageHeader nav #nav-tree summary::before { width: 6px; height: 6px; } #pageHeader nav #nav-tree summary::after { width: 7px !important; height: 12px !important; margin-left: auto !important; } #pageHeader nav #nav-tree details > ol { padding: 15px 0 0 20px !important; } #pageHeader nav #nav-tree details > ol > li { padding: 15px 0 !important; font-size: 28px !important; line-height: 1.2 !important; } #pageHeader nav #nav-tree details > ol > li::before { min-width: 19px; margin-right: 15px !important; font-size: 21px !important; } #pageHeader nav #nav-tree details > ol > li:is(:hover, :focus-within)::before { margin-right: 15px !important; } #pageHeader nav #nav-tree .branch-extra { flex-wrap: wrap; padding: 18px 0 0 !important; row-gap: 12px !important; } #pageHeader nav #nav-tree .branch-extra .extras-label { flex: 1 0 100%; margin: 0 0 4px !important; font-size: 19px !important; } #pageHeader nav #nav-tree .branch-extra ul { width: 100%; gap: 12px !important; } #pageHeader nav #nav-tree .branch-extra ul li { flex: 1 1 40%; display: flex; } #pageHeader nav #nav-tree .branch-extra ul a.wt-bt { flex: 1 1 auto; justify-content: center; padding: 13px 16px !important; font-size: 15px !important; } } /* ---------- Talents-Brand: Hairline + Wordmark / Kombi-Logo ---------- */ #pageHeader nav .talents-brand-sep, #pageHeader nav .talents-brand, #pageHeader nav .talents-brand-combined { display: none; } /* Desktop/Tablet, Talents-Unterseiten: Lockup | hairline | talents */ body:is(.mode-talents, .talents-nav):not(.home) #pageHeader nav .talents-brand-sep { display: block; flex: none; align-self: center; width: 1px; height: 96px; margin: 0 16px; border: none; background-color: #D4D4D4; } body:is(.mode-talents, .talents-nav):not(.home) #pageHeader nav .talents-brand { display: inline-flex; align-items: center; flex: none; align-self: center; margin-right: auto; } body:is(.mode-talents, .talents-nav):not(.home) #pageHeader nav:has(.talents-brand) #logo-wrapper { margin-right: 0; } #pageHeader nav .talents-brand .talents-brand-mark { display: block; width: 161px; height: auto; fill: var(--c-pri); } /* Der Portal-eigene Wordmark-Block wuerde daneben doppeln */ body:is(.mode-talents, .talents-nav):not(.home) #pageHeader nav hr.portal-only.vertical, body:is(.mode-talents, .talents-nav):not(.home) #pageHeader nav .talents-mark.portal-only { display: none !important; } /* Geschrumpfte Leiste: Hairline folgt der kleineren Logohoehe */ .sticky-wrapper.sticky #pageHeader nav .talents-brand-sep { height: 56px; } @media (min-width: 901px) and (max-width: 1199px) { body:is(.mode-talents, .talents-nav):not(.home) #pageHeader nav .talents-brand-sep { height: 80px; margin: 0 8px; } #pageHeader nav .talents-brand .talents-brand-mark { width: 132px; } } @media (min-width: 604px) and (max-width: 900px) { body:is(.mode-talents, .talents-nav):not(.home) #pageHeader nav .talents-brand-sep { height: 68px; margin: 0 4px; } #pageHeader nav .talents-brand .talents-brand-mark { width: 112px; } } /* Telefon: ein kombiniertes W+talents-Lockup ersetzt alles */ @media (max-width: 603px) { body:is(.mode-talents, .talents-nav) #pageHeader nav:has(.talents-brand-combined) #logo-wrapper { display: none !important; } body:is(.mode-talents, .talents-nav) #pageHeader nav .talents-brand-sep, body:is(.mode-talents, .talents-nav) #pageHeader nav .talents-brand { display: none !important; } body:is(.mode-talents, .talents-nav) #pageHeader nav .talents-brand-combined { display: block; flex: none; align-self: center; width: 161px; margin-right: auto; color: var(--c-pri); } body:is(.mode-talents, .talents-nav) #pageHeader nav .talents-brand-combined .talents-combined-svg { display: block; width: 100%; height: auto; } } /* ---------- Nachtrag Menue, QA-Runde 1 ---------- */ /* Chevron: Marcels ::after traegt color:transparent — currentColor loest darauf auf und macht die Maske unsichtbar */ #pageHeader nav #nav-tree summary::after { color: inherit !important; } /* Zweisteller darf nie umbrechen (globales overflow-wrap:anywhere erbt) */ #pageHeader nav #nav-tree details > ol > li::before { flex: none !important; white-space: nowrap !important; overflow-wrap: normal !important; } /* Slider im offenen Mobil-Menue: inline style="position:relative" schlaegt nur ohne !important */ @media (max-width: 900px) { body.home:has(#nav-tree-toggle:checked) #pageHeader nav .actions #global-toggle { position: fixed !important; font-size: clamp(13px, 4.4vw, 18px); } body.home:has(#nav-tree-toggle:checked) #pageHeader nav .actions #global-toggle label span { white-space: nowrap; } } /* ---------- Nachtrag Menue, QA-Runde 2 ---------- */ /* Gruppen-Abstand als Flex-gap: gap folgt der visuellen Reihenfolge, das li+li-Margin klebte nach order:-1 an der falschen Gruppe */ #pageHeader nav .actions #nav-tree-wrapper #nav-tree > ul { gap: 40px !important; } #pageHeader nav #nav-tree > ul > li + li { margin-top: 0 !important; } @media (max-width: 603px) { #pageHeader nav .actions #nav-tree-wrapper #nav-tree > ul { gap: 32px !important; } } /* Brand-Elemente bleiben wie Logo und Login ueber dem offenen Overlay */ #pageHeader nav .talents-brand-sep, #pageHeader nav .talents-brand, #pageHeader nav .talents-brand-combined { position: relative; z-index: 999; } /* ---------- Nachtrag Menue, Runde 3: Scroll-Verhalten & Login-Pille ---------- */ /* Statik-Kurve statt linear: zackiger Start, sanftes Auslaufen — nimmt dem Kompakt-/Aufwachsen der Leiste das mechanische Anhalten */ #pageHeader { transition-property: height, box-shadow, background-color !important; transition-duration: 0.4s, 0.4s, 0.4s !important; transition-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1), cubic-bezier(0.2, 0.7, 0.25, 1), cubic-bezier(0.2, 0.7, 0.25, 1) !important; transition-delay: 0s, 0s, 0s !important; } #pageHeader nav .actions { transition: margin 0.4s cubic-bezier(0.2, 0.7, 0.25, 1) !important; } #pageHeader nav .talents-brand-sep { transition: height 0.4s cubic-bezier(0.2, 0.7, 0.25, 1); } /* Offenes Menue oberhalb der kompakten Leiste: Logo waechst wie in der Statik auf volle Groesse aufs weisse Sheet, Schattenkante weg. Nur dort, wo die Leiste ueberhaupt schrumpft (ab 1281px). */ @media (min-width: 1281px) { body:has(#nav-tree-toggle:checked) .sticky-wrapper #pageHeader { height: var(--wi-nav-height-def) !important; box-shadow: none !important; background-color: var(--c-white) !important; } body:has(#nav-tree-toggle:checked) .sticky-wrapper.sticky #pageHeader nav .actions { margin-top: var(--pad-s) !important; } body:has(#nav-tree-toggle:checked) .sticky-wrapper.sticky #pageHeader nav .talents-brand-sep { height: 96px; } } /* Unterhalb: Leiste ist konstant kompakt, aber Schatten stoert auf dem Sheet */ body:has(#nav-tree-toggle:checked) #pageHeader { box-shadow: none !important; background-color: var(--c-white) !important; } /* Login-Pille: 52px wie Switcher und Burger (Statik c-nav__login) */ #pageHeader nav .actions > .login.wt-bt { display: inline-flex; align-items: center; height: 3.25rem !important; min-height: 0 !important; padding: 0 40px !important; border-radius: var(--rad-inf); font-size: 16px !important; font-weight: 700; transition: background-color 0.22s cubic-bezier(0.2, 0.7, 0.25, 1), color 0.22s cubic-bezier(0.2, 0.7, 0.25, 1) !important; } #pageHeader nav .actions > .login.wt-bt:hover { background-color: #B81E58 !important; color: var(--c-white) !important; } @media (max-width: 603px) { #pageHeader nav .actions > .login.wt-bt { height: 44px !important; padding: 0 24px !important; font-size: 15px !important; } } /* ---------- Nachtrag Menue, Runde 4: Logo-Scroll Unterseiten, Alignment, Login 18px ---------- */ /* Unterseiten-Logo skaliert wie die Startseite mit, nur kleiner: feste, selbst animierte Hoehen (122 auf 64) statt der max-width- Kappung, deren Constraint-Wechsel mitten in der Leisten-Animation das Ruckeln erzeugte. Nur dort, wo die Leiste animiert (ab 1281). */ @media (min-width: 1281px) { body:not(.home) #pageHeader nav #logo-wrapper { height: auto !important; align-self: center; } body:not(.home) #pageHeader nav #logo-wrapper img, body:not(.home) #pageHeader nav #logo-wrapper svg { width: auto !important; max-width: none !important; height: 122px !important; transition: height 0.4s cubic-bezier(0.2, 0.7, 0.25, 1); } body:not(.home) .sticky-wrapper.sticky #pageHeader nav #logo-wrapper img, body:not(.home) .sticky-wrapper.sticky #pageHeader nav #logo-wrapper svg { height: 64px !important; } /* Talents-Wordmark und Hairline schrumpfen im gleichen Verhaeltnis (die alte sticky-Hairline-Regel verlor den Spezifitaetskampf) */ #pageHeader nav .talents-brand .talents-brand-mark { transition: width 0.4s cubic-bezier(0.2, 0.7, 0.25, 1); } body:is(.mode-talents, .talents-nav):not(.home) .sticky-wrapper.sticky #pageHeader nav .talents-brand-sep { height: 56px; } .sticky-wrapper.sticky #pageHeader nav .talents-brand .talents-brand-mark { width: 85px; } /* Offenes Menue: alles zurueck auf volle Groesse */ body:has(#nav-tree-toggle:checked) .sticky-wrapper.sticky #pageHeader nav #logo-wrapper img, body:has(#nav-tree-toggle:checked) .sticky-wrapper.sticky #pageHeader nav #logo-wrapper svg { height: 122px !important; } body:has(#nav-tree-toggle:checked) .sticky-wrapper.sticky #pageHeader nav .talents-brand .talents-brand-mark { width: 161px; } } /* Login-Pille: 18px (mobil bleibt 15px/44px) */ @media (min-width: 604px) { #pageHeader nav .actions > .login.wt-bt { font-size: 18px !important; } } /* Runde 4b: 3px-Baseline-Versatz des Inline-SVGs im Logo-Link */ @media (min-width: 1281px) { body:not(.home) #pageHeader nav #logo-wrapper a { display: flex; align-items: center; height: auto !important; } body:not(.home) #pageHeader nav #logo-wrapper img, body:not(.home) #pageHeader nav #logo-wrapper svg { display: block; } } /* ---------- Nachtrag Menue, Runde 6: choreografierter Talents-Morph ---------- */ /* Statt Kombi-Cross-Fade fahren die echten Elemente an die Kombi- Positionen: das W schrumpft wie ueberall, das talents-Wordmark gleitet verkleinert an seine Stelle daneben (x +76.6, 84.4px breit — der Geometrie des mobilen Kombi-Lockups vermessen). */ @media (min-width: 1281px) { /* Unterseiten: Wordmark gleitet und schrumpft, Hairline weicht */ body:is(.mode-talents, .talents-nav):not(.home) #pageHeader nav .talents-brand { transition: margin-left 0.4s cubic-bezier(0.2, 0.7, 0.25, 1); } body:is(.mode-talents, .talents-nav):not(.home) .sticky-wrapper.sticky #pageHeader nav .talents-brand { margin-left: -133px; } body:is(.mode-talents, .talents-nav):not(.home) .sticky-wrapper.sticky #pageHeader nav .talents-brand .talents-brand-mark { width: 84.4px; } body:is(.mode-talents, .talents-nav):not(.home) #pageHeader nav .talents-brand-sep { transition: height 0.4s cubic-bezier(0.2, 0.7, 0.25, 1), opacity 0.4s cubic-bezier(0.2, 0.7, 0.25, 1); } body:is(.mode-talents, .talents-nav):not(.home) .sticky-wrapper.sticky #pageHeader nav .talents-brand-sep { opacity: 0; } /* Talents-Startseite: erst schrumpft das W, dann blendet das talents nach rechts aus ihm heraus ein */ body.home.mode-talents #pageHeader nav #logo-wrapper { margin-right: 0; } body.home.mode-talents #pageHeader nav .talents-brand { display: inline-flex; align-items: center; flex: none; align-self: center; margin-right: auto; margin-left: -84px; opacity: 0; pointer-events: none; transition: opacity 0.15s cubic-bezier(0.2, 0.7, 0.25, 1); } body.home.mode-talents #pageHeader nav .talents-brand .talents-brand-mark { width: 84.4px; } body.home.mode-talents .sticky-wrapper.sticky #pageHeader nav .talents-brand { opacity: 1; pointer-events: auto; transition: opacity 0.3s cubic-bezier(0.2, 0.7, 0.25, 1) 0.4s; } /* Offenes Menue stellt beide Varianten zurueck */ body:has(#nav-tree-toggle:checked):is(.mode-talents, .talents-nav):not(.home) .sticky-wrapper.sticky #pageHeader nav .talents-brand { margin-left: 0; } body:has(#nav-tree-toggle:checked):is(.mode-talents, .talents-nav):not(.home) .sticky-wrapper.sticky #pageHeader nav .talents-brand .talents-brand-mark { width: 161px; } body:has(#nav-tree-toggle:checked):is(.mode-talents, .talents-nav):not(.home) .sticky-wrapper.sticky #pageHeader nav .talents-brand-sep { opacity: 1; } body:has(#nav-tree-toggle:checked).home.mode-talents .sticky-wrapper.sticky #pageHeader nav .talents-brand { opacity: 0; pointer-events: none; transition: opacity 0.15s cubic-bezier(0.2, 0.7, 0.25, 1); } } /* Switcher-Wordmark: ganzzahlige Maskenhoehe gegen Subpixel-Pumpen. KEIN will-change hier — die Layer-Promotion brach in Chrome den clip-path shape() der weissen Switcher-Pille. */ #global-toggle label.opt-b::after { height: 17px !important; } /* ---------- Nachtrag Menue, Runde 7: Leisten-Hintergrund (Statik-Veil) ---------- */ /* Die Leiste selbst ist immer transparent; der Hintergrund ist ein Milchglas-Veil (weiss 88% + blur), der 40px unter die Leiste hinauslaeuft und dort weich in nichts uebergeht — statt opakem Weiss mit Schattenkante. */ #pageHeader { background-color: transparent !important; box-shadow: none !important; } #pageHeader::before { content: ''; position: absolute; inset: 0 0 auto; height: calc(100% + 40px); z-index: -1; background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 40px), transparent 100%); opacity: 0; pointer-events: none; transition: opacity 0.22s cubic-bezier(0.2, 0.7, 0.25, 1), background-color 0.22s cubic-bezier(0.2, 0.7, 0.25, 1); } .sticky-wrapper.sticky #pageHeader::before { opacity: 1; } /* app.css zwingt die Mobil-Leiste ungescrollt auf Weiss — Statik ist ueberall transparent, der Veil uebernimmt ab Scroll */ @media (max-width: 1180px) { .sticky-wrapper:not(.sticky) #pageHeader { background-color: transparent !important; } } /* Offenes Menue: opakes Weiss nahtlos zum Sheet, kein Auslauf-Schimmer */ body:has(#nav-tree-toggle:checked) #pageHeader::before { /* Ueber das Overlay (998, ein Kind des Headers), unter die Leisten-Elemente (999, spaeter im DOM): scrollende Menuepunkte tauchen hinter der Leiste weich weg statt durchzuscheinen */ z-index: 999; height: 100%; opacity: 1; background: var(--c-white); -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 12px), transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 12px), transparent 100%); } /* ---------- Farbwechsel ueber markierten Sektionen (data-nav-theme) ---------- */ /* talents.js spiegelt das data-nav-theme der Sektion unter der Leiste auf den body; der Veil wird magenta, Logo und Controls invertieren. */ body[data-nav-theme="brand"] #pageHeader::before { background: rgba(211, 37, 102, 0.88); opacity: 1; } body[data-nav-theme="brand"] #pageHeader nav #logo-wrapper svg path { fill: var(--c-white) !important; } body[data-nav-theme="brand"] #pageHeader nav .talents-brand .talents-brand-mark { fill: var(--c-white); } body[data-nav-theme="brand"] #pageHeader nav .talents-brand-sep { background-color: rgba(255, 255, 255, 0.6); } body[data-nav-theme="brand"] #pageHeader nav .actions #nav-tree-wrapper > label { background-color: var(--c-white) !important; color: var(--c-pri) !important; } body[data-nav-theme="brand"] #pageHeader nav .actions > .login.wt-bt { background-color: var(--c-white) !important; color: var(--c-pri) !important; } @media (hover: hover) and (pointer: fine) { body[data-nav-theme="brand"] #pageHeader nav .actions #nav-tree-wrapper > label:hover, body[data-nav-theme="brand"] #pageHeader nav .actions > .login.wt-bt:hover { background-color: #F9F9F9 !important; color: var(--c-pri) !important; } } /* Runde 7b: das Wordmark-Symbol traegt eigene fill-Attribute im use-Shadow-DOM — Vererbung kommt nicht ran, Invertierung per Filter */ body[data-nav-theme="brand"] #pageHeader nav .talents-brand .talents-brand-mark { filter: brightness(0) invert(1); } body[data-nav-theme="brand"] #pageHeader nav .talents-brand-combined { color: var(--c-white); } /* ---------- Nachtrag Menue, Runde 8: Mini-Nav-Hover ---------- */ /* Kein Farbfeld hinter den Eintraegen — der Hintergrund bleibt transparent, nur der Text nimmt den Welt-Accent an */ #pageHeader nav .actions #nav-tree-wrapper #hov-tree #hov-tree-trunk li.menu-item a:hover, #pageHeader nav .actions #nav-tree-wrapper #hov-tree #hov-tree-trunk li.menu-item.menu-item-wpg a:hover, #pageHeader nav .actions #nav-tree-wrapper #hov-tree #hov-tree-trunk li.menu-item.menu-item-talents a:hover, #pageHeader nav .actions #nav-tree-wrapper #hov-tree #hov-tree-trunk li.menu-item a:focus-visible { background: transparent !important; background-color: transparent !important; color: var(--wim-accent) !important; } /* ========================================================= FOOTER (beide Welten) — Angleich an Design + Statik, 29.08. ========================================================= */ /* Talents-Footer auch auf Talents-Seiten OHNE /talents/-Praefix (per-Page-Marker talents-nav, z. B. /karriere/): gleiche Weltlogik wie der Header ($isTalentsWorld). Login/Portal rendern keinen #pageFooter und bleiben unberuehrt. */ body.talents-nav #pageFooter .footer-logo .talents-only { display: flex !important; } /* Talents-Brand-Zeile: Lockup, Hairline und Wordmark sind im Design exakt vertikal zentriert zueinander (Desktop-PNG: Mitten bei 996/997/996). Der bisherige padding-top-Hack (20% bzw. 3.25cqh) setzte das Wordmark je Breite unterschiedlich tief — raus damit, die Flex-Zentrierung der Zeile uebernimmt. margin-bottom 16px aus der globalen .talents-mark-Regel (Header-Kontext) hob das Wordmark 8px aus der Mitte — nullen. */ #pageFooter .footer-brand .footer-logo .talents-only .talents-mark { padding-top: 0; margin-bottom: 0; display: flex; align-items: center; } @media (min-width: 768px) and (max-width: 1180px) { /* Logo ist hier nur 111px hoch — die 8.75rem-Hairline ragte oben und unten heraus. Statik-Treppe: 96px auf der Tablet-Stufe. min-width 768, damit die 4rem-Stufe der 767er-Bestandsregel darunter wieder gilt. */ #pageFooter .footer-brand .footer-logo .talents-only:before { height: 6rem; } } @media (max-width: 767px) { /* Bestand setzte hier padding-top 30% / 3.25cqh am Wordmark. */ #pageFooter .footer-brand .footer-logo .talents-only .talents-mark { padding-top: 0; } /* Main-Footer: Logo mobil auf Designgroesse (Main-Mobil-PNG zeigt das Lockup 260x117 bei 393px; die 767er-Basisregel drueckt beide Welten auf 5rem, app.css klemmt zusaetzlich max-width 250px). Nur die WPG-Welt — der Talents-Footer teilt sich die Zeile mit Hairline+Wordmark und stimmt mit 5rem bereits mit dem Design ueberein (183/80). */ body:not(.mode-talents):not(.talents-nav) #pageFooter .footer-brand .footer-logo img { width: auto !important; height: 7.25rem !important; max-width: none !important; } } /* ========================================================= BLOG-UEBERSICHT — Meta-Icons als Material Symbols, 29.08. ========================================================= */ /* Design/Statik zeigen calendar_month + schedule als Material Symbols Rounded (outlined, 18px, Statik c-meta); FontAwesome-solid war gefuellt. Eingebunden nach dem Theme-Muster (SVG-Datei + Maske in currentColor); die offiziellen Google-SVGs (Apache 2.0) liegen in der Mediathek — beim Server-Git-Sync gern nach images/ umziehen, dann hier nur die zwei URLs tauschen. */ :root { --ico-calendar-month: url("/wp-content/uploads/2026/08/icon_calendar_month.svg"); --ico-schedule: url("/wp-content/uploads/2026/08/icon_schedule.svg"); } .blog-overview-card__meta i.fa-solid { display: inline-block; width: 18px; height: 18px; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .blog-overview-card__meta i.fa-solid::before { content: none; } .blog-overview-card__meta i.fa-calendar-days { -webkit-mask-image: var(--ico-calendar-month); mask-image: var(--ico-calendar-month); } .blog-overview-card__meta i.fa-clock { -webkit-mask-image: var(--ico-schedule); mask-image: var(--ico-schedule); } /* ========================================================= KLEINKORREKTUREN 29.08. — Klartext-Farbe + Pagination-Hover ========================================================= */ /* Klartext (/der-beruf/): die Wirklichkeit dunkler als das durchgestrichene Klischee (#222222 statt --c-dgrey #555555, Leons Vorgabe) — das Klischee bleibt bei #555555. */ .layout-klartext .comparison-reality { color: #222222; } /* Blog-Uebersicht: die Chevron-Masken der Zurueck/Weiter-Pillen stehen fest auf --c-pri und verschwanden beim Hover magenta auf magenta — auf der aktiven Flaeche werden sie weiss. Nur echte Links (a), der deaktivierte span behaelt seinen Zustand. */ .blog-overview__pagination a.prev:is(:hover, :focus-visible)::before, .blog-overview__pagination a.next:is(:hover, :focus-visible)::after { background-color: var(--c-white); } /* ========================================================= STARTSEITEN-KORREKTUREN 29.08. — Zitate + Alle-Events-Button ========================================================= */ /* Wir-fuer-dich-Testimonials: Zitate kursiv (Leons Vorgabe; die Namenszeilen sind aus den ACF-Feldern entfallen). */ .layout-testimonial-slider blockquote { font-style: italic; } /* "Alle Events" unter den Event-Teasern (neuer Render-Block in layout-event-teasers.php): Optik wie die Show-All-Buttons der Nachbarsektionen, Position wie die Statik (linksbuendig, 32px unter den Karten, Pfeil-Suffix). */ main > div.page-variant > section.layout-event-teasers footer { display: flex; justify-content: flex-start; } main > div.page-variant .event-teasers-show-all { gap: 0.5rem; color: var(--c-white); font-size: 17px; font-weight: 600; height: var(--talents-control-height); min-height: var(--talents-control-height); padding: 0 2rem; } main > div.page-variant > section.layout-event-teasers .event-teasers-show-all::after { display: block; width: 0.75rem; height: 0.75rem; content: ""; background: currentColor; mask: var(--icon-arrow-dio) center / contain no-repeat; -webkit-mask: var(--icon-arrow-dio) center / contain no-repeat; } /* ========================================================= FAQ-ANTWORT-LINK 29.08. — "Mehr erfahren" (Startseite, Frage 7) ========================================================= */ /* Das Design zeigt den Link magenta 17px/600 mit Chevron; die wt-link-Klasse des Templates kommt ohne eigene Optik (und das globale a{display:block} wuerde greifen). */ .layout-accordion-grid .accordion-content footer { margin-top: 1rem; } .layout-accordion-grid .accordion-content footer .wt-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--c-pri); font-size: 17px; font-weight: 600; text-decoration: none; transition: color var(--dur) var(--ease-standard); } .layout-accordion-grid .accordion-content footer .wt-link:hover { color: #B81E58; } .layout-accordion-grid .accordion-content footer .wt-link::after { display: block; width: 0.55rem; height: 0.75rem; content: ""; /* Die globale a.wt-link::after-Regel setzt color: transparent — currentColor waere sonst unsichtbar. */ color: inherit; background: currentColor; mask: var(--icon-chevron-rounded) center / contain no-repeat; -webkit-mask: var(--icon-chevron-rounded) center / contain no-repeat; } /* ========================================================= TALENTS-HERO-SUCHE 29.08. — Fokus-States + Dropdown-Listbox ========================================================= */ /* Nach Statik c-search: aktives Feld traegt eine 2px-Navy-Pille (box-shadow, kein Layout-Shift), Icons und Label faerben navy (#2B4781, Statik --talents-active); das native select ist einer Custom-Listbox gewichen (component-talents-job-filter.php) — nur so laesst sich das offene Menue wie im Design stylen. */ .layout-hero-talents .hero-job-filter-field { border-radius: 999px; transition: box-shadow var(--dur) var(--ease-standard); } .layout-hero-talents .hero-job-filter-field:focus-within { box-shadow: 0 0 0 2px #2B4781; } /* Der Trenner weicht dem Fokus-Ring (Statik blendet ihn aus). */ .layout-hero-talents .hero-job-filter-location::after { transition: opacity var(--dur) var(--ease-standard); } .layout-hero-talents .hero-job-filter-location:focus-within::after, .layout-hero-talents menu:has(.hero-job-filter-type :focus) .hero-job-filter-location::after { opacity: 0; } /* Icons als Maske in currentColor-Logik (vorher img — nicht einfaerbbar); Groesse/Position wie die Bestandsregel. */ .layout-hero-talents span.hero-job-filter-icon { background-color: var(--c-dgrey); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; transition: background-color var(--dur) var(--ease-standard); } .layout-hero-talents .hero-job-filter-icon--location { -webkit-mask-image: url("/wp-content/themes/custom-theme/images/icon_location_outline.svg"); mask-image: url("/wp-content/themes/custom-theme/images/icon_location_outline.svg"); } .layout-hero-talents .hero-job-filter-icon--briefcase { -webkit-mask-image: url("/wp-content/themes/custom-theme/images/icon_briefcase.svg"); mask-image: url("/wp-content/themes/custom-theme/images/icon_briefcase.svg"); } .layout-hero-talents .hero-job-filter-field:hover span.hero-job-filter-icon, .layout-hero-talents .hero-job-filter-field:focus-within span.hero-job-filter-icon { background-color: #2B4781; } /* ---- Dropdown-Feld ---- */ .layout-hero-talents .hero-job-dropdown { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; height: 100%; } .layout-hero-talents .hero-job-dropdown-trigger { display: flex; align-items: center; justify-content: flex-start; gap: 32px; flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0 14px 0 9px; background: transparent; border: 0; outline: 0; cursor: pointer; color: var(--c-grey-profile); font-family: var(--font-def); font-size: var(--trurem); font-weight: 400; line-height: normal; text-align: left; transition: color var(--dur) var(--ease-standard); } .layout-hero-talents .hero-job-dropdown[data-has-value] .hero-job-dropdown-trigger { color: var(--c-dgrey); } .layout-hero-talents .hero-job-filter-field:hover .hero-job-dropdown-trigger, .layout-hero-talents .hero-job-filter-field:focus-within .hero-job-dropdown-trigger { color: #2B4781; } .layout-hero-talents .hero-job-dropdown-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Chevron: gleiche Form wie das alte select-Hintergrundbild, aber als Maske — folgt currentColor und dreht sich beim Oeffnen. */ .layout-hero-talents .hero-job-dropdown-chevron { flex-shrink: 0; width: 0.75rem; height: 0.5rem; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='m1 1.5 5 5 5-5' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='m1 1.5 5 5 5-5' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 180ms var(--ease-standard); } .layout-hero-talents .hero-job-dropdown-trigger[aria-expanded="true"] .hero-job-dropdown-chevron { transform: rotate(180deg); } /* ---- Offenes Menue (Statik: weisse Karte, Radius 16, Schatten) ---- */ .layout-hero-talents .hero-job-dropdown-menu { position: absolute; top: calc(100% + 12px); left: 0; right: 0; z-index: 30; margin: 0; padding: 8px; list-style: none; text-align: left; background: var(--c-white); border-radius: 1rem; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.08); transform-origin: top center; animation: hero-dropdown-in 160ms var(--ease-standard); } .layout-hero-talents .hero-job-dropdown-menu[hidden] { display: none; } .layout-hero-talents .hero-job-dropdown-option { margin: 0; padding: 10px 16px; border-radius: 8px; list-style: none; font-family: var(--font-def); font-size: 15px; color: #222222; cursor: pointer; transition: background 120ms ease, color 120ms ease; } .layout-hero-talents .hero-job-dropdown-option:hover, .layout-hero-talents .hero-job-dropdown-option:focus-visible { background: #F3F5F7; outline: 0; } .layout-hero-talents .hero-job-dropdown-option.is-selected, .layout-hero-talents .hero-job-dropdown-option.is-selected:hover { background: #2B4781; color: var(--c-white); font-weight: 600; } @keyframes hero-dropdown-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ========================================================= WELT-SWITCHER — weisse Pille ohne clip-path (29.08.) ========================================================= */ /* Chrome verwirft bei offenem Menue (Compositing mit dem backdrop-filter-Veil) JEDES Clipping der weissen .layer-front — shape() wie inset() rastern dann als volle Box (nur die linke Pillenform kippte, die rechte nicht). Die Pille ist deshalb jetzt ein echtes Pseudo-Element, die Labels der weissen Ebene blenden per Opacity — Mechanik wie der Indicator der Statik. */ #global-toggle .layer-front { background: transparent !important; clip-path: none !important; } #global-toggle .layer-front::before { content: ''; position: absolute; z-index: -1; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 4px); border-radius: 999px; background: var(--c-white); transition: left var(--wi-toggle-speed) var(--wi-toggle-func) var(--wi-toggle-delay); } #global-toggle #glob-toggle-inner:has(.opt-b:checked) .layer-front::before { left: calc(50% + 2px); } /* Magenta-Labels nur auf der aktiven Haelfte (darunter stehen die weissen der .layer-back an identischer Position) */ #global-toggle .layer-front label { opacity: 0; transition: opacity 0.3s var(--wi-toggle-func) var(--wi-toggle-delay); } #global-toggle #glob-toggle-inner:has(.opt-a:checked) .layer-front label.opt-a, #global-toggle #glob-toggle-inner:has(.opt-b:checked) .layer-front label.opt-b { opacity: 1; } /* Mini-Menue: aktive Seite ohne Hintergrund-Pille — nur noch die Akzentfarbe (siehe Mini-Hovermenue-Appendix) markiert sie. Uebersteuert Marcels .current-a-Hintergruende (pri-mute/#EAEDF2). */ #pageHeader nav .actions #nav-tree-wrapper #hov-tree #hov-tree-trunk .menu-item.current a, #pageHeader nav .actions #nav-tree-wrapper #hov-tree #hov-tree-trunk .menu-item.menu-item-talents.current a { background-color: transparent !important; } /* Social-Leiste beider Footer: TikTok vorerst ausblenden (Leons Ansage 29.08. — erstmal, darum display:none statt Markup-Entfernung in footer.php; zum Reaktivieren Regel loeschen). */ #pageFooter .social-list .social-item:has(> a[aria-label^="TikTok"]) { display: none !important; } /* ================================================================ WWMWP — Seite "Wie wird man WP" (Leon, 29.08.2026) ---------------------------------------------------------------- Kompletter Port von assets/css/pages/wie-wird-man-wp.css der statischen Referenz (dort stehen die Herleitungs-Kommentare) plus dem benoetigten Komponenten-Subset (c-btn, c-link, c-chip, c-faq, c-timeline, c-ai-label, c-talents-mark). Statik-Tokens laufen als --wwm-*, alle Regeln unter .page-variant (schlaegt die globalen (0,1,3)-Element-Regeln des Themes). Icons: Material Symbols Rounded als currentColor-Masken (offizielle Google-Pfade, aus dem Statik-Subset extrahiert). ================================================================ */ .page-id-11473, .page-id-11471, .page-id-21731, .page-id-21748, .page-id-21527, .post-type-archive-events, .single-events, /* Portal (Backend): die Liste "Alle Ausschreibungen" und ab Runde 2 die Ausschreibungs- und Gesellschaftsseite im App-Rahmen rechnen mit denselben Tokens. Die Klasse setzt Portal::renderView(). */ .exwi-portal { --wwm-brand-50: #FCE9F0; --wwm-brand-100: #F8CFDD; --wwm-brand-300: #E26F95; --wwm-brand-500: var(--c-pri, #D32566); --wwm-brand-600: #B81E58; --wwm-ink: #222222; --wwm-ink-soft: #555555; --wwm-ink-muted: #727272; --wwm-ink-faint: #929292; --wwm-ink-invert: #FFFFFF; --wwm-surface: #FFFFFF; --wwm-surface-soft: #F9F9F9; --wwm-surface-alt: #F3F5F7; --wwm-surface-mute: #F0F0F0; --wwm-talents-navy: #2B4781; --wwm-talents-active: #2B4781; --wwm-line: #D4D4D4; --wwm-font-sans: "Source Sans 3", "futura-pt", Arial, sans-serif; --wwm-font-display: "Poppins", "futura-pt", Arial, sans-serif; --wwm-fs-display-xl: 110px; --wwm-fs-body-lg: 19px; --wwm-fs-body: 17px; --wwm-fs-body-sm: 15px; --wwm-fs-caption: 13px; --wwm-fs-eyebrow: 14px; --wwm-lh-tight: 1.05; --wwm-tracking-tight: -0.02em; --wwm-tracking-eyebrow: 0.08em; --wwm-space-2: 0.5rem; --wwm-space-4: 1rem; --wwm-radius-sm: 8px; --wwm-radius: 12px; --wwm-radius-md: 16px; --wwm-radius-lg: 20px; --wwm-radius-xl: 24px; --wwm-radius-pill: 999px; --wwm-shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.06); --wwm-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.08); --wwm-dur-fast: 150ms; --wwm-dur: 220ms; --wwm-dur-slow: 400ms; --wwm-ease: cubic-bezier(0.2, 0.7, 0.25, 1); --wwm-container-max: 1260px; --wwm-container-hero-max: 1440px; --wwm-container-px: clamp(1rem, 4vw, 2rem); --wwm-section-py: 120px; /* Cross-Page-Werte der Statik (pages/talents.css + Seiten-Kopf) */ --wwm-graph-pill-bg: #EAEDF3; --wwm-graph-wire: var(--wwm-talents-navy); --wwm-graph-wire-dim: #EAEAEA; --wire-ms: 3000ms; --wwm-hero-band: #F7F9FB; } /* ---- Basis-Klassen der Statik (nur die hier genutzten) --------- */ .page-variant .container { width: 100%; max-width: calc(var(--wwm-container-max) + 2 * var(--wwm-container-px)); margin-inline: auto; padding-inline: var(--wwm-container-px); } .page-variant .container--hero { max-width: calc(var(--wwm-container-hero-max) + 2 * var(--wwm-container-px)); } .page-variant section.section { padding-block: var(--wwm-section-py); background: var(--wwm-surface); position: relative; z-index: 1; } .page-variant section.section--soft { background: var(--wwm-surface-soft); } .page-variant .title { font-family: var(--wwm-font-display); font-weight: 700; letter-spacing: normal; line-height: var(--wwm-lh-tight); color: var(--wwm-ink); margin: 0; } .page-variant .title--xl { font-size: var(--wwm-fs-display-xl); } .page-variant .u-brand { color: var(--wwm-brand-500); } /* ---- Komponenten-Subset ---------------------------------------- */ .page-variant .c-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--wwm-space-2); min-height: 44px; padding: 10px 32px; font-family: var(--wwm-font-sans); font-weight: 500; font-size: var(--wwm-fs-body); line-height: 1; border-radius: var(--wwm-radius-pill); border: 1px solid transparent; transition: background var(--wwm-dur) var(--wwm-ease), color var(--wwm-dur) var(--wwm-ease), border-color var(--wwm-dur) var(--wwm-ease), transform var(--wwm-dur) var(--wwm-ease); white-space: nowrap; cursor: pointer; } .page-variant .c-btn:hover { transform: translateY(-1px); } .page-variant .c-btn:active { transform: translateY(0); } .page-variant .c-btn--primary { background: var(--wwm-brand-500); color: var(--wwm-ink-invert); } .page-variant .c-btn--primary:hover { background: var(--wwm-brand-600); color: var(--wwm-ink-invert); } .page-variant .c-btn--ghost { background: transparent; color: var(--wwm-ink); border-color: var(--wwm-line); } .page-variant .c-btn--ghost:hover { background: var(--wwm-surface-alt); color: var(--wwm-ink); } .page-variant .c-btn--invert { background: var(--wwm-ink-invert); color: var(--wwm-ink); } .page-variant .c-btn--invert:hover { background: var(--wwm-surface-alt); color: var(--wwm-ink); } .page-variant a.c-link, .page-variant button.c-link { display: inline; color: var(--wwm-brand-500); font: inherit; cursor: pointer; transition: color var(--wwm-dur) var(--wwm-ease); } .page-variant a.c-link:hover, .page-variant button.c-link:hover { color: var(--wwm-brand-600); text-decoration: underline; } .page-variant .c-btn .material-symbols-rounded { font-size: 20px; } .page-variant .c-btn > .material-symbols-rounded { transition: transform var(--wwm-dur) var(--wwm-ease); } .page-variant .c-btn:hover > .material-symbols-rounded:last-child { transform: translate(3px, -3px); } .page-variant .c-btn:hover > .icon-arrow--fwd:last-child { transform: translate(4px, 0); } .page-variant .c-chips { display: flex; flex-wrap: wrap; gap: 12px; } .page-variant .c-chip { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding-inline: 24px; border: 1px solid var(--wwm-line); border-radius: var(--wwm-radius-pill); background: transparent; font-family: var(--wwm-font-sans); font-size: var(--wwm-fs-body); font-weight: 400; line-height: 1; color: var(--wwm-ink-soft); cursor: pointer; transition: background var(--wwm-dur) var(--wwm-ease), color var(--wwm-dur) var(--wwm-ease), border-color var(--wwm-dur) var(--wwm-ease); } .page-variant .c-chip:hover { background: var(--wwm-surface-alt); } .page-variant .c-chip.is-active { background: var(--wwm-talents-navy); border-color: transparent; color: var(--wwm-ink-invert); font-weight: 700; } .page-variant .c-chip.is-active:hover { background: var(--wwm-talents-navy); } .page-variant .c-faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--wwm-dur) var(--wwm-ease); } .page-variant .c-faq__item.is-open .c-faq__panel { grid-template-rows: 1fr; } .page-variant .c-faq__panel-inner { overflow: hidden; } .page-variant .c-timeline { position: relative; --dot-size: 24px; } .page-variant .c-timeline__track { position: absolute; background: var(--wwm-line); } .page-variant .c-timeline__fill { display: block; background: var(--wwm-brand-500); } .page-variant .c-timeline__dot { position: relative; display: block; width: var(--dot-size); height: var(--dot-size); border: 2px solid var(--wwm-line); border-radius: var(--wwm-radius-pill); background: var(--wwm-surface); transition: border-color var(--wwm-dur) var(--wwm-ease); } .page-variant .c-timeline__dot::after { content: ""; position: absolute; inset: 5px; border-radius: var(--wwm-radius-pill); background: var(--wwm-line); transition: background-color var(--wwm-dur) var(--wwm-ease); } .page-variant .c-timeline__step.is-active .c-timeline__dot { border-color: var(--wwm-brand-500); } .page-variant .c-timeline__step.is-active .c-timeline__dot::after { background: var(--wwm-brand-500); } .page-variant .c-ai-label { position: absolute; right: 16px; bottom: 12px; width: auto; height: 20px; pointer-events: none; } .page-variant .c-talents-mark { display: inline-block; aspect-ratio: 415.9 / 109.8; background-color: var(--wwm-brand-500); -webkit-mask: url("/wp-content/themes/custom-theme/images/talents.svg") center / contain no-repeat; mask: url("/wp-content/themes/custom-theme/images/talents.svg") center / contain no-repeat; } /* ---- Icons: Material Symbols Rounded als Masken ---------------- */ .page-variant .wwmwp-ico { display: inline-block; flex: none; width: 1em; height: 1em; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; } .page-variant .wwmwp-ico--arrow-outward { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .page-variant .wwmwp-ico--arrow-forward { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .page-variant .wwmwp-ico--add { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .page-variant .wwmwp-ico--money-off { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .page-variant .wwmwp-ico--rocket-launch { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .page-variant .wwmwp-ico--verified { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } /* ---- WP-Umgebung: Gegenregeln ---------------------------------- */ /* Globales `a { display:block }` + Pfeil-::after von `p a` aus app.css treffen die Fliesstext-Links der Seite. */ .page-variant .p-wwmwp-etappe__body p a::after, .page-variant .p-wwmwp-acc__inner p a::after, .page-variant .p-wwmwp-hero__lead a::after { content: none !important; } /* Marcels p-Basis (var(--trurem)/1.4rem/dgrey) wuerde WYSIWYG-Absaetze ohne Klasse anders setzen als die Statik-Absaetze daneben. */ .page-variant .p-wwmwp-acc__inner p, .page-variant .p-wwmwp-etappe__body > p { font-size: var(--wwm-fs-body); line-height: 24px; color: var(--wwm-ink-muted); } .page-variant .p-wwmwp-etappe__body > p strong, .page-variant .p-wwmwp-acc__inner p strong { color: var(--wwm-ink-soft); } .page-variant .p-wwmwp-etappe__body > p strong.u-brand { color: var(--wwm-brand-500); } .page-variant .p-wwmwp-etappe__body > p .c-link strong { color: inherit; } /* ---- Seiten-CSS (Port der Statik, Herleitung siehe Referenz) --- */ .page-variant .c-chips { gap: 8px; } .page-variant .c-chip { height: auto; padding-block: 12px; font-size: 15px; } .page-variant .p-wwmwp-hero { position: relative; overflow-x: clip; overflow-y: visible; padding-top: 200px; padding-bottom: 120px; min-height: 978px; background: linear-gradient(180deg, var(--wwm-surface) 0%, var(--wwm-surface) 21%, var(--wwm-hero-band) 52%, var(--wwm-hero-band) 100%); } .page-variant .p-wwmwp-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 48px; } .page-variant .p-wwmwp-hero__copy { grid-column: 1; grid-row: 1; } .page-variant .p-wwmwp-hero__actions { grid-column: 1; grid-row: 2; } .page-variant .p-wwmwp-graph { grid-column: 2; grid-row: 1 / span 2; align-self: start; --graph-w: clamp(420px, 37.5vw, 720px); width: var(--graph-w); margin-right: calc(-1 * max(0px, min(0.289 * var(--graph-w), (100vw - 1504px) / 2))); } .page-variant .p-wwmwp-hero__title { font-family: var(--wwm-font-display); font-weight: 700; font-size: clamp(96px, 7.8vw, 110px); line-height: 1.09; letter-spacing: -0.025em; color: var(--wwm-ink); margin-bottom: 30px; } .page-variant .p-wwmwp-hero__sub { font-family: var(--wwm-font-sans); font-weight: 700; font-size: 48px; line-height: 55px; letter-spacing: var(--wwm-tracking-tight); color: var(--wwm-ink); margin-bottom: 34px; } .page-variant .p-wwmwp-rotator { display: inline-block; color: var(--wwm-brand-500); border-bottom: 2px solid var(--wwm-brand-500); line-height: 1; } .page-variant .p-wwmwp-rotator__word { display: inline-block; transition: opacity 200ms var(--wwm-ease), transform 200ms var(--wwm-ease); } .page-variant .p-wwmwp-rotator.is-swapping .p-wwmwp-rotator__word { opacity: 0; transform: translateY(-6px); } .page-variant .p-wwmwp-hero__lead { max-width: 600px; font-size: 24px; line-height: 32px; color: var(--wwm-ink-muted); } .page-variant .p-wwmwp-hero__lead strong { font-weight: 700; color: var(--wwm-ink-soft); } .page-variant .p-wwmwp-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 52px; } .page-variant .p-wwmwp-hero__actions .c-btn { font-weight: 700; } .page-variant .p-wwmwp-hero__actions .c-btn--ghost { font-weight: 400; background: var(--wwm-surface); } .page-variant .p-wwmwp-hero__guy { position: absolute; top: 393px; left: calc(50% - 194px); width: auto; height: 957px; pointer-events: none; user-select: none; z-index: 2; } .page-variant .p-wwmwp-graph__stage { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 720 / 535; } .page-variant .p-wwmwp-graph__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .page-variant .p-wwmwp-graph__wires path { fill: none; stroke: var(--wwm-graph-wire); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: stroke var(--wwm-dur) var(--wwm-ease); } .page-variant .p-wwmwp-graph.has-selection .p-wwmwp-graph__wires path:not(.p-wwmwp-graph__trace) { stroke: var(--wwm-graph-wire-dim); } .page-variant .p-wwmwp-graph.has-selection .p-wwmwp-graph__wires path.is-active { stroke: var(--wwm-graph-wire); } .page-variant .p-wwmwp-graph__wires path.p-wwmwp-graph__trace { stroke: var(--wwm-brand-500); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: var(--wire-len); stroke-dashoffset: var(--wire-len); transition: none; } .page-variant .p-wwmwp-graph__wires path.p-wwmwp-graph__trace.is-drawing { stroke-dashoffset: 0; transition: stroke-dashoffset var(--wire-ms) linear; } .page-variant .p-wwmwp-graph__wires path.p-wwmwp-graph__trace.is-done { stroke-dashoffset: 0; } @media (prefers-reduced-motion: reduce) { .page-variant .p-wwmwp-graph__traces { display: none; } } .page-variant .p-wwmwp-graph__wires--narrow { display: none; } .page-variant .p-wwmwp-graph__node { position: absolute; left: 59.31%; top: 0; width: 40.69%; height: 11.96%; display: flex; align-items: center; justify-content: center; border-radius: 2.2cqw; background: var(--wwm-surface); box-shadow: var(--wwm-shadow); } .page-variant .p-wwmwp-graph__node-label { font-family: var(--wwm-font-sans); font-weight: 700; font-size: 2.78cqw; line-height: 1.2; color: var(--wwm-brand-500); } .page-variant .p-wwmwp-graph__node::after { content: ""; position: absolute; left: 50.5%; bottom: 0; width: 2.22cqw; height: 2.22cqw; transform: translate(-50%, 50%); border-radius: var(--wwm-radius-pill); background: var(--wwm-brand-500); } .page-variant .p-wwmwp-graph__list { position: absolute; inset: 0; } .page-variant .p-wwmwp-graph__item { position: absolute; top: calc((var(--i) * 70 + 1) / 535 * 100%); } .page-variant .p-wwmwp-graph__item:nth-child(1) { left: 0%; } .page-variant .p-wwmwp-graph__item:nth-child(2) { left: 2.22%; } .page-variant .p-wwmwp-graph__item:nth-child(3) { left: 5.00%; } .page-variant .p-wwmwp-graph__item:nth-child(4) { left: 8.33%; } .page-variant .p-wwmwp-graph__item:nth-child(5) { left: 12.78%; } .page-variant .p-wwmwp-graph__item:nth-child(6) { left: 19.44%; } .page-variant .p-wwmwp-graph__item:nth-child(7) { left: 28.33%; } .page-variant .p-wwmwp-graph__item:nth-child(8) { left: 39.44%; } .page-variant .p-wwmwp-pill { display: inline-flex; align-items: center; gap: 1.94cqw; height: 6.11cqw; padding: 0.56cqw 6.67cqw 0.56cqw 0.56cqw; border: 1px solid transparent; border-radius: var(--wwm-radius-pill); background: var(--wwm-graph-pill-bg); color: var(--wwm-talents-active); white-space: nowrap; transition: background var(--wwm-dur) var(--wwm-ease), color var(--wwm-dur) var(--wwm-ease), border-color var(--wwm-dur) var(--wwm-ease), box-shadow var(--wwm-dur) var(--wwm-ease); } .page-variant .p-wwmwp-pill__icon { flex: none; display: grid; place-items: center; width: 5cqw; height: 5cqw; border-radius: var(--wwm-radius-pill); background: var(--wwm-talents-active); color: var(--wwm-ink-invert); transition: background var(--wwm-dur) var(--wwm-ease); } .page-variant .p-wwmwp-pill__icon svg { width: 62%; height: 62%; } .page-variant .p-wwmwp-pill__label { font-family: var(--wwm-font-sans); font-weight: 700; font-size: 2.5cqw; line-height: 1; } .page-variant .p-wwmwp-pill:hover { box-shadow: var(--wwm-shadow-sm); } .page-variant .p-wwmwp-graph.has-selection .p-wwmwp-pill { background: var(--wwm-surface); border-color: var(--wwm-line); color: var(--wwm-ink-soft); box-shadow: var(--wwm-shadow-sm); } .page-variant .p-wwmwp-graph.has-selection .p-wwmwp-pill__icon { background: var(--wwm-ink-soft); } .page-variant .p-wwmwp-graph.has-selection .p-wwmwp-pill.is-active { background: var(--wwm-graph-pill-bg); border-color: transparent; color: var(--wwm-talents-active); box-shadow: none; } .page-variant .p-wwmwp-graph.has-selection .p-wwmwp-pill.is-active .p-wwmwp-pill__icon { background: var(--wwm-talents-active); } .page-variant .p-wwmwp-weg__head { margin-bottom: 0; } .page-variant .p-wwmwp-weg__sub { font-family: var(--wwm-font-sans); font-weight: 700; font-size: 48px; line-height: 55px; letter-spacing: var(--wwm-tracking-tight); color: var(--wwm-ink); margin-top: 32px; } .page-variant .p-wwmwp-weg { padding-bottom: 0; } .page-variant .p-wwmwp-etappen { margin-top: 64px; } .page-variant .p-wwmwp-etappen .c-timeline__track { top: 0; left: 11px; width: 2px; height: 100%; max-width: none; } .page-variant .p-wwmwp-etappen .c-timeline__fill { width: 100%; height: calc(var(--progress, 0) * 100%); transition: height var(--wwm-dur-slow) var(--wwm-ease); } .page-variant .p-wwmwp-etappen .c-timeline__steps { display: flex; flex-direction: column; gap: 81px; } .page-variant .p-wwmwp-etappe { position: relative; flex: none; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) 588px; column-gap: 120px; align-items: start; padding-left: 104px; } .page-variant .p-wwmwp-etappe .c-timeline__dot { position: absolute; left: 0; top: 50%; margin-bottom: 0; transform: translateY(-50%); } .page-variant .p-wwmwp-etappe__label { display: flex; align-items: baseline; gap: 8px; margin-bottom: 30px; } .page-variant .p-wwmwp-etappe__slash { font-family: var(--wwm-font-display); font-weight: 700; font-size: 96px; line-height: 1; color: var(--wwm-brand-500); transform: skewX(-12deg); } .page-variant .p-wwmwp-etappe__num { font-family: var(--wwm-font-display); font-weight: 700; font-size: 96px; line-height: 1; letter-spacing: -0.03em; color: var(--wwm-ink); } .page-variant .p-wwmwp-etappe__kicker { font-family: var(--wwm-font-sans); font-weight: 600; font-size: 14px; line-height: 1; letter-spacing: var(--wwm-tracking-eyebrow); text-transform: uppercase; color: var(--wwm-ink-muted); } .page-variant .p-wwmwp-etappe__title { font-family: var(--wwm-font-display); font-weight: 700; font-size: 42px; line-height: 1.14; letter-spacing: var(--wwm-tracking-tight); color: var(--wwm-ink); margin-bottom: 18px; } .page-variant .p-wwmwp-etappe__text { font-size: var(--wwm-fs-body); line-height: 24px; color: var(--wwm-ink-muted); } .page-variant .p-wwmwp-etappe__text strong { color: var(--wwm-ink-soft); } .page-variant .p-wwmwp-etappe__text strong.u-brand, .page-variant .p-wwmwp-etappe__text .c-link strong { color: inherit; } .page-variant .p-wwmwp-etappe__link { margin-top: 20px; } .page-variant .p-wwmwp-inline-link { font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .page-variant .p-wwmwp-etappe__media { position: relative; margin: 0; border-radius: var(--wwm-radius-md); overflow: hidden; background: var(--wwm-surface-alt); aspect-ratio: 588 / 300; } .page-variant .p-wwmwp-etappe__media img { width: 100%; height: 100%; object-fit: cover; } .page-variant .p-wwmwp-etappe__media .c-ai-label { width: auto; height: 16px; } .page-variant .p-wwmwp-tags { display: flex; flex-wrap: wrap; gap: 8px 13px; margin-top: 16px; } .page-variant .p-wwmwp-tag { display: inline-flex; align-items: center; height: 29px; padding: 0 16px; border: 1px solid var(--wwm-line); border-radius: var(--wwm-radius-pill); font-size: var(--wwm-fs-body-sm); line-height: 1; color: var(--wwm-ink-soft); } .page-variant .p-wwmwp-acc { margin-top: 12px; } .page-variant .p-wwmwp-acc__item.c-faq__item { background: none; border: 0; border-bottom: 1px solid var(--wwm-line); border-radius: 0; box-shadow: none; padding: 0; margin-bottom: 0; } .page-variant .p-wwmwp-acc__item.c-faq__item:hover { background: none; box-shadow: none; } .page-variant .p-wwmwp-acc__trigger.c-faq__trigger { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 12px 0; text-align: left; } .page-variant .p-wwmwp-acc__trigger > span:first-child { max-width: none; font-family: var(--wwm-font-sans); font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--wwm-ink); } .page-variant .p-wwmwp-acc__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--wwm-radius-pill); background: #E2E2E2; color: var(--wwm-ink-soft); font-size: 22px; transition: background var(--wwm-dur) var(--wwm-ease), color var(--wwm-dur) var(--wwm-ease), transform var(--wwm-dur) var(--wwm-ease); } .page-variant .p-wwmwp-acc__item.is-open .p-wwmwp-acc__icon { background: var(--wwm-brand-500); color: var(--wwm-ink-invert); transform: rotate(45deg); } .page-variant .p-wwmwp-acc__panel.c-faq__panel { transition: grid-template-rows var(--wwm-dur-slow) var(--wwm-ease); } .page-variant .p-wwmwp-acc__inner.c-faq__panel-inner { padding: 0; } .page-variant .p-wwmwp-acc__item.is-open .p-wwmwp-acc__inner.c-faq__panel-inner { padding-bottom: 24px; } .page-variant .p-wwmwp-acc__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 24px; } .page-variant .p-wwmwp-acc__actions .c-btn { font-weight: 700; } .page-variant .p-wwmwp-acc__actions .c-btn--ghost { font-weight: 400; } .page-variant .p-wwmwp-faecher__kicker { font-family: var(--wwm-font-sans); font-weight: 700; font-size: var(--wwm-fs-body-sm); color: var(--wwm-ink-soft); margin-bottom: 8px; } .page-variant .p-wwmwp-faecher { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; } .page-variant .p-wwmwp-faecher__item { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--wwm-line); font-size: var(--wwm-fs-body-sm); line-height: 19px; color: var(--wwm-ink-soft); } .page-variant .p-wwmwp-faecher__num { flex: none; font-weight: 700; color: var(--wwm-brand-500); } .page-variant .p-wwmwp-faecher__note { margin-top: 16px; } .page-variant .p-wwmwp-danach__lead { max-width: 720px; font-size: var(--wwm-fs-body); line-height: 24px; color: var(--wwm-ink-muted); margin-top: 20px; } .page-variant .p-wwmwp-stufen { margin-top: 32px; } .page-variant .p-wwmwp-stufen__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; align-items: end; } .page-variant .p-wwmwp-stufe { display: contents; } .page-variant .p-wwmwp-stufe__btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 143px; padding: 16px 12px; border: 1px solid var(--wwm-line); border-radius: var(--wwm-radius); background: var(--wwm-surface); text-align: center; transition: border-color var(--wwm-dur) var(--wwm-ease), box-shadow var(--wwm-dur) var(--wwm-ease); } .page-variant .p-wwmwp-stufe:nth-child(2) .p-wwmwp-stufe__btn { height: 167px; } .page-variant .p-wwmwp-stufe:nth-child(3) .p-wwmwp-stufe__btn { height: 191px; } .page-variant .p-wwmwp-stufe:nth-child(4) .p-wwmwp-stufe__btn { height: 215px; } .page-variant .p-wwmwp-stufe:nth-child(5) .p-wwmwp-stufe__btn { height: 239px; } .page-variant .p-wwmwp-stufe__btn:hover { border-color: var(--wwm-brand-300); } .page-variant .p-wwmwp-stufe__btn.is-active { border: 2px solid var(--wwm-brand-500); } .page-variant .p-wwmwp-stufe__num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--wwm-radius-pill); background: var(--wwm-brand-50); color: var(--wwm-brand-500); font-family: var(--wwm-font-sans); font-weight: 700; font-size: 20px; line-height: 1; } .page-variant .p-wwmwp-stufe__btn.is-active .p-wwmwp-stufe__num { background: var(--wwm-brand-500); color: var(--wwm-ink-invert); } .page-variant .p-wwmwp-stufe__title { font-family: var(--wwm-font-display); font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--wwm-ink); margin-bottom: -6px; } .page-variant .p-wwmwp-stufe__years { font-size: var(--wwm-fs-caption); line-height: 1; color: var(--wwm-ink-muted); } .page-variant .p-wwmwp-stufe__badge { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); padding: 4px 12px; border-radius: var(--wwm-radius-pill); background: var(--wwm-brand-500); color: var(--wwm-ink-invert); font-family: var(--wwm-font-sans); font-weight: 700; font-size: var(--wwm-fs-caption); line-height: 1.4; white-space: nowrap; } .page-variant .p-wwmwp-stufe__text { grid-column: var(--stufe-col, 1) / span 2; grid-row: 2; margin-top: 12px; padding: 18px 22px; border: 1px solid var(--wwm-brand-500); border-radius: var(--wwm-radius); font-size: var(--wwm-fs-body-sm); line-height: 24px; color: var(--wwm-ink-soft); } .page-variant .p-wwmwp-stufe__text[hidden] { display: none; } .page-variant .p-wwmwp-banner-wrap { padding-block: 100px; background: var(--wwm-surface); } .page-variant .p-wwmwp-banner { position: relative; height: 370px; padding: 32px 64px; border-radius: 32px; display: grid; align-items: center; background: radial-gradient(ellipse 80% 70% at 50% 100%, rgba(216, 237, 249, 0.3) 0%, rgba(176, 221, 245, 0.3) 100%); } .page-variant .p-wwmwp-banner__bg { position: absolute; inset: 0; overflow: hidden; border-radius: 32px; pointer-events: none; z-index: 0; } .page-variant .p-wwmwp-banner__bg::before { content: ""; position: absolute; top: 50%; right: -40px; transform: translateY(-50%); width: 600px; height: 600px; background-color: #ffffff; -webkit-mask: url("/wp-content/uploads/2026/08/bg_w_white.svg") center / contain no-repeat; mask: url("/wp-content/uploads/2026/08/bg_w_white.svg") center / contain no-repeat; } .page-variant .p-wwmwp-banner__copy { position: relative; z-index: 2; max-width: 700px; } .page-variant .p-wwmwp-banner__title { font-family: var(--wwm-font-display); font-weight: 700; font-size: 48px; line-height: 55px; letter-spacing: var(--wwm-tracking-tight); color: var(--wwm-ink); margin: 0 0 32px; } .page-variant .p-wwmwp-banner__lead { font-family: var(--wwm-font-sans); font-weight: 500; font-size: 24px; line-height: 32px; color: var(--wwm-ink-soft); margin: 0 0 32px; max-width: 33ch; } .page-variant .p-wwmwp-banner__copy .c-btn { font-weight: 700; } .page-variant .p-wwmwp-banner__media { position: absolute; right: 0; bottom: 0; margin: 0; z-index: 1; pointer-events: none; } .page-variant .p-wwmwp-banner__media img { height: 465px; width: auto; } .page-variant .p-wwmwp-banner__media .c-ai-label { right: 12px; bottom: 10px; height: 16px; } .page-variant .p-wwmwp-fach__lead { font-size: var(--wwm-fs-body); line-height: 24px; color: var(--wwm-ink-muted); margin-top: 20px; } .page-variant .p-wwmwp-fach__chips { margin-top: 40px; } .page-variant .p-wwmwp-fach__panels { margin-top: 17px; } .page-variant .p-wwmwp-fach__panel { display: grid; grid-template-columns: minmax(0, 1fr) 46%; gap: 40px; align-items: center; min-height: 434px; padding: 32px 48px; border-radius: var(--wwm-radius-xl); background: var(--wwm-surface); } .page-variant .p-wwmwp-fach__panel[hidden] { display: none; } .page-variant .p-wwmwp-fach__title { font-family: var(--wwm-font-display); font-weight: 700; font-size: 40px; line-height: 1.1; letter-spacing: var(--wwm-tracking-tight); color: var(--wwm-ink); margin-bottom: 16px; } .page-variant .p-wwmwp-fach__desc { font-size: var(--wwm-fs-body); line-height: 24px; color: var(--wwm-ink-muted); max-width: 44ch; margin-bottom: 32px; } .page-variant .p-wwmwp-fach__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } .page-variant .p-wwmwp-fach__sub { font-family: var(--wwm-font-display); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: var(--wwm-tracking-tight); color: var(--wwm-ink); margin-bottom: 14px; } .page-variant .p-wwmwp-fach__list li { position: relative; padding-left: 16px; font-size: var(--wwm-fs-body-sm); line-height: 24px; color: var(--wwm-ink-muted); } .page-variant .p-wwmwp-fach__list li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 4px; height: 4px; border-radius: var(--wwm-radius-pill); background: var(--wwm-ink-faint); } .page-variant .p-wwmwp-fach__cta { margin-top: 32px; font-weight: 700; } .page-variant .p-wwmwp-fach__media { display: grid; place-items: center; } .page-variant .p-wwmwp-fach__media img { width: 100%; height: auto; max-height: 370px; object-fit: contain; } .page-variant .p-wwmwp-cta { position: relative; padding-block: 100px 120px; background: var(--wwm-brand-500); color: var(--wwm-ink-invert); } .page-variant .p-wwmwp-cta__mark { position: absolute; right: 120px; top: 82px; width: 218px; background-color: var(--wwm-ink-invert); } .page-variant .p-wwmwp-cta__title { font-family: var(--wwm-font-display); font-weight: 700; font-size: 110px; line-height: 1.09; letter-spacing: -0.005em; color: var(--wwm-ink-invert); margin-bottom: 24px; } .page-variant .p-wwmwp-cta__title em { font-style: italic; color: var(--wwm-brand-100); } .page-variant .p-wwmwp-cta__sub { font-family: var(--wwm-font-sans); font-weight: 700; font-size: 48px; line-height: 55px; color: var(--wwm-ink-invert); margin-bottom: 22px; } .page-variant .p-wwmwp-cta__text { max-width: 520px; font-size: var(--wwm-fs-body-sm); line-height: 24px; color: rgba(255, 255, 255, 0.86); margin-bottom: 32px; } .page-variant .p-wwmwp-cta__btn { font-weight: 700; } .page-variant .p-wwmwp-usp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.35); } .page-variant .p-wwmwp-usp__item { display: flex; gap: 16px; align-items: flex-start; } .page-variant .p-wwmwp-usp__icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--wwm-radius-sm); background: var(--wwm-surface); color: var(--wwm-brand-500); font-size: 18px; } .page-variant .p-wwmwp-usp__title { font-family: var(--wwm-font-sans); font-weight: 700; font-size: var(--wwm-fs-body); line-height: 1.3; margin-bottom: 4px; } .page-variant .p-wwmwp-usp__text { font-size: var(--wwm-fs-body-sm); line-height: 19px; color: rgba(255, 255, 255, 0.86); max-width: 22ch; } .page-variant .p-wwmwp-modal { width: min(1240px, calc(100vw - 48px)); max-width: none; max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: var(--wwm-radius-xl); background: var(--wwm-surface); color: var(--wwm-ink); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18); overflow: auto; } .page-variant .p-wwmwp-modal::backdrop { background: rgba(0, 0, 0, 0.87); } .page-variant .p-wwmwp-modal__box { padding: 48px 64px 56px; } .page-variant .p-wwmwp-modal__close { position: absolute; top: 24px; right: 24px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--wwm-radius-pill); color: var(--wwm-ink-muted); transition: background var(--wwm-dur) var(--wwm-ease), color var(--wwm-dur) var(--wwm-ease); } .page-variant .p-wwmwp-modal__close:hover { background: var(--wwm-surface-mute); color: var(--wwm-ink); } .page-variant .p-wwmwp-modal__close svg { width: 20px; height: 20px; } .page-variant .p-wwmwp-modal__kicker { font-family: var(--wwm-font-sans); font-size: var(--wwm-fs-eyebrow); font-weight: 600; letter-spacing: var(--wwm-tracking-eyebrow); text-transform: uppercase; color: var(--wwm-ink-muted); margin-bottom: 8px; } .page-variant .p-wwmwp-modal__title { font-family: var(--wwm-font-display); font-weight: 700; font-size: 40px; line-height: 1.15; letter-spacing: var(--wwm-tracking-tight); margin-bottom: 16px; } .page-variant .p-wwmwp-modal__lead { font-size: var(--wwm-fs-body); line-height: 24px; color: var(--wwm-ink-muted); max-width: 80ch; margin-bottom: 32px; } .page-variant .p-wwmwp-modal__switch { display: none; } .page-variant .p-wwmwp-wege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: stretch; } .page-variant .p-wwmwp-weg-col { display: flex; flex-direction: column; } .page-variant .p-wwmwp-weg-col[hidden] { display: none; } .page-variant .p-wwmwp-weg-col__head { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 16px; margin-bottom: 12px; border-radius: var(--wwm-radius); background: #EDF1F6; text-align: center; } .page-variant .p-wwmwp-weg-col__head strong { font-family: var(--wwm-font-display); font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--wwm-ink); } .page-variant .p-wwmwp-weg-col__head span { font-size: var(--wwm-fs-body-sm); line-height: 1.3; color: var(--wwm-ink-muted); } .page-variant .p-wwmwp-weg-col__flow { display: flex; flex-direction: column; gap: 10px; flex: 1; } .page-variant .p-wwmwp-box { padding: 16px 20px; border: 1px solid var(--wwm-line); border-radius: var(--wwm-radius); background: var(--wwm-surface); text-align: center; } .page-variant .p-wwmwp-box strong { display: block; font-family: var(--wwm-font-display); font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--wwm-ink); } .page-variant .p-wwmwp-box span { display: block; margin-top: 4px; font-size: var(--wwm-fs-body-sm); line-height: 20px; color: var(--wwm-ink-muted); } .page-variant .p-wwmwp-box--muted { background: var(--wwm-surface-soft); border-color: transparent; } .page-variant .p-wwmwp-box--brand { background: var(--wwm-brand-500); border-color: transparent; } .page-variant .p-wwmwp-box--brand strong { color: var(--wwm-ink-invert); } .page-variant .p-wwmwp-box--brand .p-wwmwp-box__soft { display: inline; margin: 0; font-family: var(--wwm-font-sans); font-weight: 400; color: rgba(255, 255, 255, 0.85); } .page-variant .p-wwmwp-box--brand strong { display: inline; } .page-variant .p-wwmwp-arrow { display: block; text-align: center; font-size: 20px; line-height: 1; color: var(--wwm-ink-faint); } .page-variant .p-wwmwp-arrow--push { margin-top: auto; } .page-variant .p-wwmwp-modal__final { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; padding: 22px 20px; } .page-variant .p-wwmwp-modal__final strong { display: inline; font-size: 24px; } .page-variant .p-wwmwp-modal__final .material-symbols-rounded { font-size: 26px; color: var(--wwm-ink); } .page-variant .p-wwmwp-modal__note { margin-top: 20px; font-size: var(--wwm-fs-body-sm); line-height: 22px; color: var(--wwm-ink-muted); } @media (max-width: 1400px) { .page-variant .p-wwmwp-hero__guy { left: calc(50% + 40px); top: 484px; } } @media (max-width: 1323px) { .page-variant .p-wwmwp-hero__title { font-size: clamp(64px, 8vw, 96px); } .page-variant .p-wwmwp-hero__sub { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.18; } .page-variant .p-wwmwp-hero__lead { font-size: 20px; line-height: 30px; max-width: 520px; } .page-variant .p-wwmwp-weg__sub { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.18; } .page-variant .p-wwmwp-etappe { grid-template-columns: minmax(0, 1fr) 44%; column-gap: 48px; padding-left: 72px; } .page-variant .p-wwmwp-banner { padding-inline: 40px; } .page-variant .p-wwmwp-banner__title { font-size: 40px; line-height: 48px; } .page-variant .p-wwmwp-banner__lead { font-size: 20px; line-height: 28px; } .page-variant .p-wwmwp-banner__media img { height: 400px; } .page-variant .p-wwmwp-fach__panel { padding: 40px; gap: 32px; } .page-variant .p-wwmwp-fach__title { font-size: 34px; } .page-variant .p-wwmwp-cta__title { font-size: clamp(40px, 5.4vw, 64px); } .page-variant .p-wwmwp-modal__box { padding: 40px; } .page-variant .p-wwmwp-wege { gap: 20px; } } @media (max-width: 1100px) { .page-variant .p-wwmwp-hero { padding-top: 150px; padding-bottom: 64px; min-height: 0; } .page-variant .p-wwmwp-hero__inner { display: flex; flex-direction: column; align-items: flex-start; } .page-variant .p-wwmwp-hero__guy { display: none; } .page-variant .p-wwmwp-graph { width: 100%; max-width: 420px; margin: 40px 0 0; } .page-variant .p-wwmwp-graph__stage { aspect-ratio: 393 / 460; } .page-variant .p-wwmwp-graph__wires--wide { display: none; } .page-variant .p-wwmwp-graph__wires--narrow { display: block; } .page-variant .p-wwmwp-graph__node { left: 42.5%; top: 0.4%; width: 55%; height: 8.7%; border-radius: 2.5cqw; } .page-variant .p-wwmwp-graph__node-label { font-size: 3.8cqw; } .page-variant .p-wwmwp-graph__node::after { left: 50%; width: 3.05cqw; height: 3.05cqw; } .page-variant .p-wwmwp-graph__item { left: 6.1% !important; top: calc((var(--i) * 58 + 3) / 460 * 100%); } .page-variant .p-wwmwp-pill { gap: 2.8cqw; height: 10.2cqw; padding: 1cqw 4.6cqw 1cqw 1cqw; font-size: 3.8cqw; } .page-variant .p-wwmwp-pill__icon { width: 7.9cqw; height: 7.9cqw; } .page-variant .p-wwmwp-pill__label { font-size: 3.8cqw; } .page-variant .p-wwmwp-hero__actions { margin-top: 40px; } .page-variant .p-wwmwp-hero__actions .c-btn { flex: 1 1 auto; } } @media (max-width: 900px) { .page-variant .p-wwmwp-etappe { grid-template-columns: minmax(0, 1fr); row-gap: 24px; padding-left: 48px; } .page-variant .p-wwmwp-etappe__media { grid-row: 1; } .page-variant .p-wwmwp-etappen .c-timeline__steps { gap: 56px; } .page-variant .p-wwmwp-etappe__slash, .page-variant .p-wwmwp-etappe__num { font-size: 72px; } .page-variant .p-wwmwp-etappe__title { font-size: 32px; } .page-variant .p-wwmwp-stufen__list { grid-template-columns: minmax(0, 1fr); gap: 8px; } .page-variant .p-wwmwp-stufe { display: block; } .page-variant .p-wwmwp-stufe__btn { height: auto !important; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; padding: 16px 20px; text-align: left; } .page-variant .p-wwmwp-stufe__num { width: 32px; height: 32px; font-size: 16px; } .page-variant .p-wwmwp-stufe__title { margin-bottom: 0; } .page-variant .p-wwmwp-stufe__years { white-space: nowrap; } .page-variant .p-wwmwp-stufe__badge { left: 24px; transform: translateY(-50%); } .page-variant .p-wwmwp-stufe__text { grid-column: auto; grid-row: auto; margin: -1px 0 0; border: 1px solid var(--wwm-line); border-top: 0; border-radius: 0 0 var(--wwm-radius) var(--wwm-radius); } .page-variant .p-wwmwp-banner { height: auto; padding: 40px 32px 300px; } .page-variant .p-wwmwp-banner__copy { max-width: none; } .page-variant .p-wwmwp-banner__media img { height: 340px; } .page-variant .p-wwmwp-banner__bg::before { width: 420px; height: 420px; right: -80px; } .page-variant .p-wwmwp-fach__panel { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 32px 24px; gap: 24px; } .page-variant .p-wwmwp-fach__body { display: contents; } .page-variant .p-wwmwp-fach__cols, .page-variant .p-wwmwp-fach__cta { order: 1; } .page-variant .p-wwmwp-usp { grid-template-columns: minmax(0, 1fr); gap: 20px; } .page-variant .p-wwmwp-usp__text { max-width: none; } .page-variant .p-wwmwp-modal { width: calc(100vw - 32px); border-radius: var(--wwm-radius-lg); } .page-variant .p-wwmwp-modal__box { padding: 28px 24px 32px; } .page-variant .p-wwmwp-modal__title { font-size: 30px; padding-right: 56px; } .page-variant .p-wwmwp-modal__kicker { display: none; } .page-variant .p-wwmwp-modal__switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 20px; border: 1px solid var(--wwm-line); border-radius: var(--wwm-radius); overflow: hidden; } .page-variant .p-wwmwp-modal__switch-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; background: var(--wwm-surface); color: var(--wwm-ink); transition: background var(--wwm-dur) var(--wwm-ease), color var(--wwm-dur) var(--wwm-ease); } .page-variant .p-wwmwp-modal__switch-item strong { font-weight: 700; font-size: var(--wwm-fs-body-sm); } .page-variant .p-wwmwp-modal__switch-item span { font-size: var(--wwm-fs-caption); color: var(--wwm-ink-muted); } .page-variant .p-wwmwp-modal__switch-item.is-active { background: var(--wwm-talents-active); color: var(--wwm-ink-invert); } .page-variant .p-wwmwp-modal__switch-item.is-active span { color: rgba(255, 255, 255, 0.85); } .page-variant .p-wwmwp-wege { grid-template-columns: minmax(0, 1fr); } .page-variant .p-wwmwp-weg-col__head { display: none; } .page-variant .p-wwmwp-arrow--push { margin-top: 0; } .page-variant .p-wwmwp-modal__final { justify-content: flex-start; text-align: left; } .page-variant .p-wwmwp-modal__final strong { font-size: 20px; } } @media (max-width: 900px) { .page-variant .p-wwmwp-cta__mark { right: 32px; width: 150px; } } @media (max-width: 600px) { .page-variant .p-wwmwp-hero { padding-top: 120px; padding-bottom: 48px; } .page-variant .p-wwmwp-hero__title { font-size: 40px; line-height: 1.12; margin-bottom: 20px; } .page-variant .p-wwmwp-hero__sub { font-size: 24px; line-height: 1.25; margin-bottom: 20px; } .page-variant .p-wwmwp-hero__lead { font-size: 16px; line-height: 26px; } .page-variant .p-wwmwp-hero__actions { width: 100%; flex-direction: column; align-items: stretch; } .page-variant .p-wwmwp-graph { max-width: 100%; } .page-variant .title--xl { letter-spacing: -0.02em; } .page-variant .p-wwmwp-weg__sub { font-size: 24px; line-height: 30px; margin-top: 16px; } .page-variant .p-wwmwp-etappen { margin-top: 40px; } .page-variant .p-wwmwp-etappe { padding-left: 32px; } .page-variant .p-wwmwp-etappe__slash, .page-variant .p-wwmwp-etappe__num { font-size: 56px; } .page-variant .p-wwmwp-etappe__label { margin-bottom: 16px; } .page-variant .p-wwmwp-etappe__title { font-size: 26px; margin-bottom: 14px; } .page-variant .p-wwmwp-etappe__text { font-size: 16px; line-height: 24px; } .page-variant .p-wwmwp-acc__trigger > span:first-child { font-size: 17px; } .page-variant .p-wwmwp-etappe__link .c-btn { width: 100%; } .page-variant .p-wwmwp-acc__icon { width: 36px; height: 36px; font-size: 20px; } .page-variant .p-wwmwp-faecher { grid-template-columns: minmax(0, 1fr); } .page-variant .p-wwmwp-acc__actions .c-btn { width: 100%; } .page-variant .p-wwmwp-danach__lead { font-size: 16px; } .page-variant .p-wwmwp-banner-wrap { padding-block: 56px; } .page-variant .p-wwmwp-banner { padding: 32px 24px 260px; border-radius: var(--wwm-radius-lg); } .page-variant .p-wwmwp-banner__bg { border-radius: var(--wwm-radius-lg); } .page-variant .p-wwmwp-banner__title { font-size: 30px; line-height: 38px; margin-bottom: 20px; } .page-variant .p-wwmwp-banner__lead { font-size: 17px; line-height: 26px; margin-bottom: 24px; max-width: none; } .page-variant .p-wwmwp-banner__media img { height: 300px; } .page-variant .p-wwmwp-fach__lead { font-size: 16px; } .page-variant .p-wwmwp-fach__chips { margin-top: 24px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .page-variant .p-wwmwp-fach__chips::-webkit-scrollbar { display: none; } .page-variant .p-wwmwp-fach__chips .c-chip { flex: none; } .page-variant .p-wwmwp-fach__title { font-size: 28px; } .page-variant .p-wwmwp-fach__cols { grid-template-columns: minmax(0, 1fr); gap: 20px; } .page-variant .p-wwmwp-fach__cta { width: 100%; } .page-variant .p-wwmwp-cta { padding-block: 56px 64px; text-align: center; } .page-variant .p-wwmwp-cta__mark { position: static; display: block; margin: 0 auto 12px; width: 92px; } .page-variant .p-wwmwp-cta__title { font-size: 34px; line-height: 1.15; } .page-variant .p-wwmwp-cta__sub { font-size: 24px; } .page-variant .p-wwmwp-cta__text { margin-inline: auto; } .page-variant .p-wwmwp-cta__btn { width: 100%; } .page-variant .p-wwmwp-usp { margin-top: 40px; text-align: left; } } /* WWMWP: Mobil-Basis der Statik (mobile.css-Subset, 29.08.) */ @media (max-width: 600px) { .page-id-11473, .page-id-11471, .page-id-21731, .page-id-21748, .page-id-21527, .post-type-archive-events, .single-events { --wwm-section-py: 60px; --wwm-fs-body: 16px; --wwm-container-px: 12px; } .page-variant .container { width: 100%; padding-inline: 12px; } .page-variant .title--xl { font-size: 40px; line-height: 1.1; } .page-variant .c-chips { gap: 10px; } .page-variant .c-chip { padding: 12px 24px; font-size: 15px; } } /* WWMWP: Theme-Globals gegenhalten (29.08.) — die h3-Regel des Themes traegt !important (clamp 1.5rem-2rem), und mobil setzt body:not(.exwi-portal) p { width: 76vw } jede p-Breite. */ .page-variant .p-wwmwp-etappe__title { font-size: 42px !important; } .page-variant .p-wwmwp-fach__title { font-size: 40px !important; } @media (max-width: 1323px) { .page-variant .p-wwmwp-fach__title { font-size: 34px !important; } } @media (max-width: 900px) { .page-variant .p-wwmwp-etappe__title { font-size: 32px !important; } } @media (max-width: 603px) { .page-id-11473 .page-variant p { width: auto; } } @media (max-width: 600px) { .page-variant .p-wwmwp-etappe__title { font-size: 26px !important; } .page-variant .p-wwmwp-fach__title { font-size: 28px !important; } } /* WWMWP: USP-Titel gegen die globale p-Farbregel (29.08.) */ .page-variant .p-wwmwp-usp__title { color: var(--wwm-ink-invert); } /* WWMWP: Korrekturrunde Leon (29.08.) — Treppe, Graph-Node, Banner-Frau, Fach-Chips. */ /* 1. Stufen-Buttons fuellen ihre Grid-Spur — das Theme gibt buttons eine eigene Breite, Grid-stretch griff nicht. */ .page-variant .p-wwmwp-stufe__btn { width: 100%; } /* 2. Die Graph-Node ist ein p und fiel unter die width:auto- Gegenregel des 76vw-Fixes — Statik-Breite zurueckgeben. */ @media (max-width: 603px) { .page-id-11473 .page-variant p.p-wwmwp-graph__node { width: 55%; } } /* 3. Banner-Frau mittig ueber dem W-Wasserzeichen (Design; Statik parkte sie buendig an der Kartenkante). */ .page-variant .p-wwmwp-banner__media { right: 115px; } @media (max-width: 900px) { .page-variant .p-wwmwp-banner__media { right: 60px; } } @media (max-width: 600px) { .page-variant .p-wwmwp-banner__media { right: 16px; } } /* 4. Fach-Chips: inaktiv weiss (Design; Statik transparent). */ .page-variant .p-wwmwp-fach__chips .c-chip { background: var(--wwm-surface); } .page-variant .p-wwmwp-fach__chips .c-chip.is-active { background: var(--wwm-talents-navy); } /* ================================================================ ALLGEMEINE FIXES (Leon, 29.08.) — Header-Hoehe Unterseiten + Footer-Versatz unter der Adminbar. ================================================================ */ /* Header Desktop (>=1281px): Unterseiten tragen das kleine 122er- Logo, die fixe 216px-Hoehe (--wi-nav-height-def, fuers grosse Startseiten-Logo bemessen) liess 47px Luft ueber dem Logo. Statik-Soll: 16 + 122 + 16 = 154px — die im Nav zentrierten Kinder (Logo, Talents-Trennstrich, Wortmarke) ruecken damit von selbst auf die Statik-Positionen. Die Shrink-Regel beim Scrollen (height ...-min !important) gewinnt weiterhin; <=1280px hat der Header eigene Hoehen und bleibt unberuehrt. */ @media (min-width: 1281px) { body:not(.home) #pageHeader { height: 9.625rem; } } /* Footer: das Portal-JS positioniert #pageFooter absolut und setzt top per Inline-Style, misst aber ohne den html-margin der Adminbar — eingeloggt sass der Footer 32/46px zu hoch (die letzte Sektion verdeckte den Anfang, unten fehlte das Ende). margin-top verschiebt das absolute Element um genau diesen Versatz; Besucher ohne Adminbar sind unberuehrt. */ body.admin-bar #pageFooter { margin-top: 32px; } @media (max-width: 782px) { body.admin-bar #pageFooter { margin-top: 46px; } } /* WWMWP: Wege-Modal zentrieren (Leon, 29.08.) — der Element-Reset des Themes (dialog { margin: 0 }) entfernt das margin:auto der Browser-Styles, das Modal klebte links oben. Mobil zusaetzlich mehr Luft rund ums Popup. */ .page-variant dialog.p-wwmwp-modal { margin: auto; } @media (max-width: 900px) { .page-variant dialog.p-wwmwp-modal { width: calc(100vw - 40px); max-height: calc(100dvh - 64px); } } /* ================================================================ WWMWP: Mobil-Angleichung an die uebrigen Unterseiten (Leon, 29.08.) — Sektionskoepfe mittig, h1-Groesse, 44px- Bedienelemente, Treppen-Labels, CTA-Titelstufe. ================================================================ */ @media (max-width: 600px) { /* 1. Hero-Titel wie die h1 der anderen Unterseiten (46px/108%) */ .page-variant .p-wwmwp-hero__title { font-size: 46px; line-height: 1.08; } /* 2. Sektionskoepfe mittig — Muster aller Unterseiten mobil */ .page-variant .p-wwmwp-weg__head, .page-variant .p-wwmwp-danach__head, .page-variant .p-wwmwp-fach__head { text-align: center; } .page-variant .p-wwmwp-danach__lead, .page-variant .p-wwmwp-fach__lead { margin-inline: auto; } /* 3. Karrieretreppe: Jahresangabe unter den Titel (Design) */ .page-variant .p-wwmwp-stufe__btn { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; row-gap: 2px; } .page-variant .p-wwmwp-stufe__num { grid-row: 1 / span 2; } .page-variant .p-wwmwp-stufe__title, .page-variant .p-wwmwp-stufe__years { grid-column: 2; justify-self: start; } /* 4. 44px-Bedienelemente: Akkordeon-Kreise + USP-Kacheln */ .page-variant .p-wwmwp-acc__icon { width: 44px; height: 44px; font-size: 22px; } .page-variant .p-wwmwp-usp__icon { width: 44px; height: 44px; font-size: 22px; } .page-variant .p-wwmwp-usp__item { gap: 16px; } .page-variant .p-wwmwp-usp__title { font-size: 19px; } /* 5. CTA-Titel auf die 40px-Stufe der Sektionstitel */ .page-variant .p-wwmwp-cta__title { font-size: 40px; } } /* WWMWP: Mobil-Feinschliff Runde 2 (Leon, 29.08.) — kompakte Hero-Buttons, Treppe als offene Boxen, Chips-Scroller full-bleed. */ @media (max-width: 600px) { /* 1. Hero-Buttons nur textbreit, linksbuendig gestapelt */ .page-variant .p-wwmwp-hero__actions { align-items: flex-start; } .page-variant .p-wwmwp-hero__actions .c-btn { flex: none; width: auto; } } @media (max-width: 900px) { /* 2. Und danach?: alle Stufen als Boxen mit offenem Text untereinander (Design) — kein Aktiv-Zustand mehr noetig, alle Nummern magenta wie im Design. */ .page-variant .p-wwmwp-stufe__text[hidden] { display: block; } .page-variant .p-wwmwp-stufe__btn.is-active { border: 1px solid var(--wwm-line); } .page-variant .p-wwmwp-stufe__num { background: var(--wwm-brand-500); color: var(--wwm-ink-invert); } } @media (max-width: 600px) { /* 3. Fach-Chips: Full-Bleed-Scroller — laeuft bis an die Viewport-Kanten, erster Chip bleibt an der Contentkante. */ .page-variant .p-wwmwp-fach__chips { margin-inline: -12px; padding-inline: 12px; scroll-padding-inline: 12px; } } /* ================================================================ PORTAL/EINGELOGGT: neuer Talents-Brand-Header (Leon, 29.08.) ---------------------------------------------------------------- header.php rendert das Talents-Lockup jetzt auch auf den exwi-Portal-Seiten. Die ALTE Portal-Wordmark (hr.portal-only + .talents-mark.portal-only, vom Portal-JS eingeblendet) faellt ueberall weg — die Welt der Seite bestimmt den Header. ================================================================ */ #pageHeader nav > hr.portal-only.vertical, #pageHeader nav > .talents-mark.portal-only { display: none !important; } /* Backend-Leiste (72px, nicht die Login-Seite): kompaktes Lockup */ body.exwi-portal:not(.page-login) #pageHeader nav .talents-brand-sep { display: block; flex: none; align-self: center; width: 1px; height: 44px; margin: 0 14px; border: none; background-color: #D4D4D4; } body.exwi-portal:not(.page-login) #pageHeader nav .talents-brand { display: inline-flex; align-items: center; flex: none; align-self: center; margin-right: auto; } body.exwi-portal:not(.page-login) #pageHeader nav:has(.talents-brand) #logo-wrapper { margin-right: 0; } body.exwi-portal:not(.page-login) #pageHeader nav .talents-brand .talents-brand-mark { width: 140px; } @media (max-width: 603px) { /* Backend mobil: Kombi-Lockup wie auf den Unterseiten */ body.exwi-portal:not(.page-login) #pageHeader nav:has(.talents-brand-combined) #logo-wrapper { display: none !important; } body.exwi-portal:not(.page-login) #pageHeader nav .talents-brand-sep, body.exwi-portal:not(.page-login) #pageHeader nav .talents-brand { display: none !important; } body.exwi-portal:not(.page-login) #pageHeader nav .talents-brand-combined { display: block; flex: none; align-self: center; width: 161px; margin-right: auto; color: var(--c-pri); } body.exwi-portal:not(.page-login) #pageHeader nav .talents-brand-combined .talents-combined-svg { display: block; width: 100%; height: auto; } } /* Backend-Desktop (>=1281px) wie Talents-Unterseite (Leon, 29.08.): feste 154px-Leiste, Logo 122, Trennstrich 96, Marke 161 — OHNE Scroll-Shrink (height !important schlaegt die sticky-Regel, die sep-Regel gewinnt per Spezifitaet ueber die sticky-56px). Unter 1281px bleibt die kompakte 72px-Portal-Leiste. */ @media (min-width: 1281px) { body.exwi-portal:not(.page-login) #pageHeader { height: 9.625rem !important; } body.exwi-portal:not(.page-login) #pageHeader nav { padding: 1rem; } body.exwi-portal:not(.page-login) #pageHeader nav .talents-brand-sep { height: 96px; margin: 0 16px; } body.exwi-portal:not(.page-login) #pageHeader nav .talents-brand .talents-brand-mark { width: 161px; } } /* Feinschliff Backend-Desktop (Leon, 29.08.): exakte Unterseiten- Geometrie — nav-Padding 16/24 + gap 16 (statt 32), actions wie auf der Unterseite oben mit 16px Abstand (52px-Zeile). Die Elemente selbst (Bell/Profil/Burger) sind bereits identisch. */ @media (min-width: 1281px) { body.exwi-portal:not(.page-login) #pageHeader nav { padding: 16px 24px !important; gap: 16px !important; } body.exwi-portal:not(.page-login) #pageHeader nav .actions { align-self: flex-start !important; height: 52px !important; margin-top: 16px !important; } } /* ================================================================ FWPG — Seite "Infos fuer WPG" (Leon, 29.08.2026) ---------------------------------------------------------------- Kompletter Port von assets/css/pages/fuer-wpg.css der statischen Referenz (dort stehen die Herleitungs-Kommentare); Klassen p-wpg-* heissen hier p-fwpg-* (das Theme nutzt "wpg" selbst). Die --wwm-*-Tokens teilt sich die Seite mit dem WWMWP-Block (Token-Scope dort um .page-id-21731 erweitert). Dazu: fehlende Basisklassen (p-section-head, c-icon-btn), drei neue Icon-Masken und die Mobil-Anpassungen nach dem nachgelieferten Design: Funktionen <=700 offen gestapelt (Shot ueber dem Titel), die CTA-Wortmarke mobil mittig UEBER der Ueberschrift, das Logo-Band <=600 zweireihig gegenlaeufig (Overrides stehen NACH dem Port). ================================================================ */ .page-id-21731 { /* Werte aus dem Design, fuer die es kein Token gibt (Statik). */ --fwpg-hairline: #DEDEDE; --fwpg-card-line: #D4D4D4; --fwpg-sketch: #E4E4E4; --fwpg-sketch-2: #CFCFCF; --fwpg-sketch-3: #EDEDED; --fwpg-hero-to: #F7F9FC; /* Karten-Flaeche der Statik — im WWMWP-Tokenblock nicht enthalten. */ --wwm-surface-card: #FFFFFF; } /* Titel bold wie die uebrigen Unterseiten (Leon-Review 30.08.); nur die dritte Hero-Zeile bleibt semibold. */ .page-id-21731 .page-variant .p-fwpg-hero__title-soft { font-weight: 600; } /* Buttons mit nachlaufendem Icon: rechts weniger Luft (Statik). */ .page-id-21731 .page-variant .c-btn:has(.material-symbols-rounded) { padding-right: 24px; } /* Lange Komposita duerfen mobil brechen (Statik, lang="de"). */ @media (max-width: 600px) { .page-id-21731 .page-variant h1, .page-id-21731 .page-variant h2, .page-id-21731 .page-variant h3 { overflow-wrap: break-word; hyphens: auto; } } /* ---- Basis-Klassen, die der WWMWP-Port noch nicht hatte -------- */ .page-variant .p-section-head { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 48px; margin-bottom: 32px; } .page-variant .p-section-head__title { font-size: var(--wwm-fs-display-xl); } .page-variant .p-section-head__subtitle { font-family: var(--wwm-font-sans); font-weight: 700; font-size: 48px; color: var(--wwm-ink); letter-spacing: normal; } @media (min-width: 701px) and (max-width: 1323px) { .page-variant .p-section-head { gap: 32px; } .page-id-21731 .page-variant .title--xl { font-size: clamp(56px, 9vw, 96px); } .page-variant .p-section-head__subtitle { font-size: clamp(28px, 4.5vw, 40px); } } @media (max-width: 700px) { .page-variant .p-section-head { grid-template-columns: 1fr; align-items: start; gap: 8px; } .page-variant .p-section-head__subtitle { font-size: clamp(26px, 5vw, 36px); } } .page-variant .c-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: var(--wwm-radius-pill); background: #E2E2E2; color: var(--wwm-ink); border: 0; cursor: pointer; transition: background var(--wwm-dur) var(--wwm-ease), color var(--wwm-dur) var(--wwm-ease), border-color var(--wwm-dur) var(--wwm-ease); } .page-variant .c-icon-btn:hover { background: #D5D5D5; color: var(--wwm-ink); } .page-variant .c-icon-btn .material-symbols-rounded { font-size: 24px; } /* ---- Neue Icon-Masken ------------------------------------------ */ .page-variant .wwmwp-ico--chevron-left { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .page-variant .wwmwp-ico--chevron-right { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .page-variant .wwmwp-ico--location-on { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } /* ---- WP-Umgebung: Gegenregeln (reihenfolgeunabhaengig) --------- */ /* Theme-h3 traegt clamp(...)!important — exakte Gegenwerte. */ .page-id-21731 .page-variant .c-nutzen__title { font-size: 32px !important; } .page-id-21731 .page-variant .c-showcase__title { font-size: 32px !important; } .page-id-21731 .page-variant .c-step__title { font-size: 24px !important; } @media (min-width: 901px) and (max-width: 1323px) { .page-id-21731 .page-variant .p-fwpg-bento__tall .c-nutzen__title { font-size: clamp(24px, 2.6vw, 32px) !important; } } @media (max-width: 1323px) { .page-id-21731 .page-variant .c-showcase__title { font-size: clamp(24px, 2.4vw, 32px) !important; } } @media (max-width: 900px) { .page-id-21731 .page-variant .c-nutzen__title { font-size: 26px !important; } } @media (max-width: 600px) { .page-id-21731 .page-variant .c-nutzen__title { font-size: 24px !important; } .page-id-21731 .page-variant .c-showcase__title { font-size: 24px !important; } .page-id-21731 .page-variant .c-step__title { font-size: 22px !important; } } /* `body:not(.exwi-portal) p { width: 76vw }` des Themes @<=603. */ @media (max-width: 603px) { .page-id-21731 .page-variant p { width: auto; } } /* Globales `a { display:block }` + Pfeil-::after von `p a`. */ .page-id-21731 .page-variant p a { display: inline; } .page-id-21731 .page-variant p a::after { content: none !important; } /* Marcels p-Farbe (var(--c-dgrey)) schlaegt geerbte Farben — ueberall dort explizit, wo die Statik auf Vererbung baut. */ .page-variant .c-nutzen--brand .c-nutzen__stat, .page-variant .c-nutzen--brand .c-nutzen__stat-label { color: inherit; } .page-variant .p-fwpg-cta__sub { color: var(--wwm-ink-invert); } /* Listen-/Element-Resets (Theme-Basis weicht ab). */ .page-variant .c-usps, .page-variant .c-showcase__list, .page-variant .c-stats, .page-variant .p-fwpg-steps, .page-variant .p-fwpg-cta__points { margin: 0; padding: 0; list-style: none; } .page-variant .c-quote { margin: 0; } .page-variant .c-quote__text { margin: 0; } .page-variant .c-showcase__head { margin: 0; font: inherit; } .page-variant .c-showcase__trigger { background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer; } /* CTA-Note: Statik-Unterstreichung, Link erbt Weiss. */ .page-variant .p-fwpg-cta__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* ---- Seiten-CSS (Port der Statik, Herleitung siehe Referenz) --- */ .page-variant .p-fwpg-lead { max-width: 74ch; margin-top: 32px; font-size: var(--wwm-fs-body); line-height: 24px; color: var(--wwm-ink-soft); } .page-variant .p-fwpg-hero { position: relative; padding-top: 200px; padding-bottom: 120px; background: radial-gradient(ellipse 55% 60% at 58% 42%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, var(--wwm-surface) 0%, var(--fwpg-hero-to) 46%); } .page-variant .p-fwpg-hero__title { font-size: var(--wwm-fs-display-xl); line-height: 120px; color: var(--wwm-ink); } .page-variant .p-fwpg-hero__title-soft { font-style: italic; color: var(--wwm-ink-muted); } .page-variant .p-fwpg-hero__grid { display: grid; grid-template-columns: 640px minmax(0, 1fr); column-gap: 100px; align-items: start; margin-top: 36px; } .page-variant .p-fwpg-hero__lead { font-size: 24px; line-height: 32px; color: var(--wwm-ink-soft); } .page-variant .p-fwpg-hero__lead strong { font-weight: 700; } .page-variant .p-fwpg-hero__lead em { font-style: italic; } .page-variant .p-fwpg-hero__actions { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 52px; } .page-variant .p-fwpg-hero__media { position: relative; margin: 0; border-radius: var(--wwm-radius-lg); overflow: hidden; margin-top: 12px; } .page-variant .p-fwpg-hero__media img:not(.c-ai-label) { width: 100%; height: 326px; object-fit: cover; } .page-variant .c-usps { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--fwpg-hairline); } .page-variant .c-usps__item { display: flex; align-items: center; gap: 8px; font-size: var(--wwm-fs-body); line-height: 1.2; color: var(--wwm-ink-soft); } .page-variant .c-usps__item strong { font-weight: 700; } .page-variant .c-usps__icon { font-size: 18px; color: var(--wwm-brand-500); flex: none; } .page-variant .p-fwpg-bento { display: grid; grid-template-columns: 1.13fr 1fr 1fr; grid-template-rows: 300px 186px 186px; gap: 24px; margin-top: 32px; } .page-variant .p-fwpg-bento__photo { position: relative; grid-row: 1 / -1; margin: 0; border-radius: var(--wwm-radius-md); overflow: hidden; } .page-variant .p-fwpg-bento__photo img:not(.c-ai-label) { width: 100%; height: 100%; object-fit: cover; } .page-variant .p-fwpg-bento__wide { grid-column: 2 / span 2; } .page-variant .p-fwpg-bento__tall { grid-column: 3; grid-row: 2 / span 2; overflow: hidden; } .page-variant .p-fwpg-bento__bg { position: absolute; right: -24px; bottom: -16px; width: 260px; height: auto; opacity: 0.5; z-index: 0; pointer-events: none; } .page-variant .p-fwpg-bento__tall > :not(img) { position: relative; z-index: 1; } .page-variant .c-nutzen { position: relative; display: flex; flex-direction: column; padding: 40px; border: 1px solid var(--fwpg-card-line); border-radius: var(--wwm-radius-md); background: var(--wwm-surface-card); overflow: hidden; } .page-variant .c-nutzen__title { font-family: var(--wwm-font-display); font-weight: 600; font-size: 32px; line-height: 48px; color: var(--wwm-ink); } .page-variant .c-nutzen__title--center { text-align: center; } .page-variant .c-nutzen__desc { margin-top: 24px; font-size: var(--wwm-fs-body); line-height: 24px; color: var(--wwm-ink-muted); } .page-variant .c-nutzen__desc--center { text-align: center; } .page-variant .c-nutzen--brand { align-items: center; justify-content: center; background: var(--wwm-brand-500); border-color: var(--wwm-brand-500); color: var(--wwm-ink-invert); text-align: center; } .page-variant .c-nutzen__stat { font-family: var(--wwm-font-display); font-weight: 600; font-size: 44px; line-height: 1.1; } .page-variant .c-nutzen__stat-label { margin-top: 12px; font-size: var(--wwm-fs-body-sm); font-weight: 700; line-height: 21px; } .page-variant .c-nutzen--outline { align-items: center; justify-content: center; border: 2px solid var(--wwm-brand-500); } .page-variant .p-fwpg-sketch { position: absolute; left: 500px; top: 27px; width: 320px; display: flex; flex-direction: column; gap: 10px; } .page-variant .p-fwpg-sketch__hero { position: relative; display: block; height: 132px; border-radius: 10px; background: var(--fwpg-sketch); } .page-variant .p-fwpg-sketch__pill { position: absolute; left: 14px; top: 14px; width: 84px; height: 22px; border-radius: var(--wwm-radius-pill); background: var(--fwpg-sketch-3); } .page-variant .p-fwpg-sketch__dot { position: absolute; right: 18px; bottom: 14px; width: 34px; height: 34px; border-radius: 50%; background: var(--fwpg-sketch-3); } .page-variant .p-fwpg-sketch__row { display: flex; gap: 12px; align-items: flex-start; } .page-variant .p-fwpg-sketch__thumb { flex: none; width: 54px; height: 54px; border-radius: 8px; background: var(--fwpg-sketch); } .page-variant .p-fwpg-sketch__lines { display: flex; flex-direction: column; gap: 8px; flex: 1; } .page-variant .p-fwpg-sketch__bar { display: block; height: 14px; border-radius: 4px; background: var(--fwpg-sketch-3); } .page-variant .p-fwpg-sketch__bar--brand { background: var(--wwm-brand-500); height: 20px; } .page-variant .p-fwpg-sketch__bar--mid { background: var(--fwpg-sketch-2); width: 88%; } .page-variant .p-fwpg-sketch__bar--short { background: var(--fwpg-sketch-2); width: 68%; } .page-variant .p-fwpg-sketch__bar--dark { background: #6A6A6A; height: 20px; margin-top: 4px; } .page-variant .p-fwpg-sketch__bar--faint { height: 8px; } @media (min-width: 901px) { .page-variant .p-fwpg-bento__wide .c-nutzen__desc { max-width: 380px; } } @media (min-width: 901px) and (max-width: 1323px) { .page-variant .p-fwpg-bento__tall .c-nutzen__title { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.5; } } .page-variant .c-showcase { display: grid; grid-template-columns: 512px minmax(0, 1fr); column-gap: 48px; align-items: start; margin-top: 32px; } .page-variant .c-showcase__list { display: flex; flex-direction: column; gap: 24px; } .page-variant .c-showcase__item { border-radius: var(--wwm-radius-md); background: var(--wwm-surface-card); overflow: hidden; transition: background var(--wwm-dur) var(--wwm-ease); } .page-variant .c-showcase__item.is-open { background: #EFF3F8; box-shadow: inset 3px 0 0 0 var(--wwm-brand-500); } .page-variant .c-showcase__head { margin: 0; font: inherit; } .page-variant .c-showcase__trigger { display: flex; align-items: center; gap: 16px; width: 100%; padding: 20px 32px; text-align: right; } .page-variant .c-showcase__icon { font-size: 24px; color: var(--wwm-brand-500); flex: none; transition: transform var(--wwm-dur) var(--wwm-ease); } .page-variant .c-showcase__item.is-open .c-showcase__icon { transform: rotate(90deg); } .page-variant .c-showcase__title { margin-left: auto; font-family: var(--wwm-font-display); font-weight: 600; font-size: 32px; line-height: 1.2; color: var(--wwm-ink); } .page-variant .c-showcase__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--wwm-dur-slow) var(--wwm-ease); } .page-variant .c-showcase__item.is-open .c-showcase__panel { grid-template-rows: 1fr; } .page-variant .c-showcase__panel-inner { overflow: hidden; } .page-variant .c-showcase__copy { padding: 0 32px 28px; font-size: var(--wwm-fs-body); line-height: 24px; color: var(--wwm-ink-muted); } .page-variant .c-showcase__media { position: relative; height: 455px; } .page-variant .c-showcase__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 380ms var(--wwm-ease); } .page-variant .c-showcase__shot.is-active { opacity: 1; } .page-variant .p-fwpg-head { margin-bottom: 32px; } .page-variant .p-fwpg-head__sub { margin-top: 16px; font-family: var(--wwm-font-sans); font-weight: 700; font-size: 48px; line-height: 1.2; color: var(--wwm-ink); letter-spacing: var(--wwm-tracking-tight); } .page-variant .p-fwpg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .page-variant .c-step { position: relative; display: flex; flex-direction: column; padding: 40px; border: 1px solid var(--fwpg-card-line); border-radius: var(--wwm-radius-md); background: var(--wwm-surface-card); } .page-variant .c-step + .c-step::before { content: ""; position: absolute; left: -22px; top: 50%; width: 20px; height: 4px; transform: translateY(-50%); background: repeating-linear-gradient(90deg, #DFDFDF 0 4px, transparent 4px 8px); } .page-variant .c-step__num { font-family: var(--wwm-font-display); font-weight: 600; font-size: 32px; line-height: 1; color: var(--wwm-ink); } .page-variant .c-step__of { font-size: 17px; color: var(--wwm-ink-muted); } .page-variant .c-step__title { margin-top: 24px; font-family: var(--wwm-font-display); font-weight: 600; font-size: 24px; line-height: 32px; color: var(--wwm-ink); } .page-variant .c-step__desc { margin-top: 16px; font-size: var(--wwm-fs-body-sm); line-height: 21px; color: var(--wwm-ink-muted); } .page-variant .c-step__sketch { width: 124px; margin-top: 32px; padding: 16px; display: flex; flex-direction: column; gap: 8px; border: 1px solid #EDEDED; border-radius: 10px; background: var(--wwm-surface-card); } .page-variant .c-step__bar { display: block; height: 8px; border-radius: 4px; background: var(--fwpg-sketch-3); } .page-variant .c-step__bar--dark { background: #16171C; height: 8px; } .page-variant .c-step__bar--center { width: 62%; margin: 4px auto 8px; } .page-variant .c-step__bar--grey { background: #A9AAB4; width: 74%; height: 12px; } .page-variant .c-step__bar--label { background: #B7B7BD; width: 46%; height: 5px; } .page-variant .c-step__bar--input { background: #C8C8CE; width: 76%; height: 6px; } .page-variant .c-step__bar--faint { background: #EDEDED; flex: 1; } .page-variant .c-step__bar--mid { max-width: 74%; } .page-variant .c-step__bar--short { max-width: 52%; } .page-variant .c-step__field { display: flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 5px; background: #F2F2F4; } .page-variant .c-step__button { display: flex; align-items: center; justify-content: center; height: 30px; margin-top: 8px; border-radius: 6px; background: #16171C; } .page-variant .c-step__button i { display: block; width: 38%; height: 5px; border-radius: 3px; background: var(--wwm-surface-card); } .page-variant .c-step__logo { display: block; width: 42px; height: 42px; margin: 4px auto 12px; border: 1px solid #E7E7E7; border-radius: 8px; } .page-variant .c-step__meta { display: flex; align-items: center; gap: 8px; } .page-variant .c-step__avatar { flex: none; width: 14px; height: 14px; border-radius: 50%; background: #A9AAB4; } .page-variant .c-step__pin { flex: none; font-size: 13px; color: #C8C8CE; } .page-variant .c-step__chips { display: flex; gap: 8px; margin-top: 4px; } .page-variant .c-step__chips i { display: block; width: 38px; height: 15px; border-radius: var(--wwm-radius-pill); background: #F2F2F4; position: relative; } .page-variant .c-step__chips i::after { content: ""; position: absolute; inset: 5px 8px; border-radius: 3px; background: #C8C8CE; } .page-variant .p-fwpg-steps__cta { margin-top: 32px; } .page-variant .c-stats { display: grid; grid-template-columns: repeat(3, max-content); grid-template-rows: auto auto; column-gap: 130px; margin-top: 40px; } .page-variant .c-stats__item { display: grid; grid-row: span 2; grid-template-rows: subgrid; align-items: baseline; } .page-variant .c-stats__value { font-family: var(--wwm-font-display); font-weight: 600; font-size: 44px; line-height: 1; color: var(--wwm-ink); } .page-variant .c-stats__item--lead .c-stats__value { font-size: 104px; } .page-variant .c-stats__unit { color: var(--wwm-brand-500); font-size: 0.45em; margin-left: 0.12em; } .page-variant .c-stats__label { padding-top: 16px; font-size: var(--wwm-fs-body-sm); line-height: 21px; color: var(--wwm-ink-muted); } .page-variant .c-quotes { margin-top: 34px; padding-top: 58px; border-top: 1px solid var(--fwpg-hairline); } .page-variant .c-quotes__stage { display: grid; grid-template-areas: "stack"; } .page-variant .c-quote { grid-area: stack; display: grid; grid-template-columns: minmax(0, 680px) minmax(0, 1fr); column-gap: 88px; align-items: end; margin: 0; opacity: 0; pointer-events: none; transition: opacity 320ms var(--wwm-ease), transform 320ms var(--wwm-ease); } .page-variant .c-quote.is-active { opacity: 1; pointer-events: auto; } .page-variant .c-quote.is-from-right { transform: translateX(24px); } .page-variant .c-quote.is-from-left { transform: translateX(-24px); } .page-variant .c-quote__text { margin: 0; font-weight: 600; font-size: 32px; line-height: 46px; color: var(--wwm-ink-soft); } .page-variant .c-quote__author { display: flex; align-items: center; gap: 16px; padding-bottom: 4px; } .page-variant .c-quote__avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--wwm-surface-mute); } .page-variant .c-quote__who { display: flex; flex-direction: column; gap: 2px; } .page-variant .c-quote__name { font-size: var(--wwm-fs-body-sm); font-weight: 600; color: var(--wwm-ink); } .page-variant .c-quote__role { font-size: 14px; color: var(--wwm-ink-muted); } .page-variant .c-quotes__controls { display: flex; gap: 24px; margin-top: 24px; } .page-variant .c-quotes__controls .c-icon-btn { color: var(--wwm-brand-500); } .page-variant .c-quotes__controls .c-icon-btn:hover { color: var(--wwm-brand-500); } .page-variant .c-logostrip { width: 100%; max-width: calc(var(--wwm-container-max) + 2 * var(--wwm-container-px)); margin: 34px auto 0; padding: 34px var(--wwm-container-px); border-top: 1px solid var(--fwpg-hairline); border-bottom: 1px solid var(--fwpg-hairline); overflow: hidden; } .page-variant .c-logostrip__track { --logostrip-gap: 38px; display: flex; align-items: center; gap: var(--logostrip-gap); width: max-content; animation: c-logostrip-scroll 90s linear infinite; will-change: transform; } .page-variant .c-logostrip__logo { flex: none; width: var(--logostrip-logo, 140px); height: var(--logostrip-logo, 140px); object-fit: contain; } @media (prefers-reduced-motion: reduce) { .page-variant .c-logostrip__track { animation: none; } } .page-variant .p-fwpg-cta { position: relative; padding: 64px 0 120px; background: var(--wwm-brand-500); color: var(--wwm-ink-invert); overflow-x: clip; } .page-variant .p-fwpg-cta > .container { position: relative; } .page-variant .p-fwpg-cta__mark { position: absolute; top: 16px; width: 219px; right: clamp(-90px, calc((1324px - 100vw) / 2), var(--wwm-container-px)); } .page-variant .p-fwpg-cta__title { font-size: var(--wwm-fs-display-xl); line-height: 120px; color: var(--wwm-ink-invert); } .page-variant .p-fwpg-cta__title-soft { font-style: italic; color: rgba(255, 255, 255, 0.8); } .page-variant .p-fwpg-cta__sub { margin-top: 26px; font-family: var(--wwm-font-sans); font-weight: 700; font-size: 48px; line-height: 1.2; letter-spacing: var(--wwm-tracking-tight); } .page-variant .p-fwpg-cta__lead { max-width: 52ch; margin-top: 26px; font-size: var(--wwm-fs-body); line-height: 24px; color: rgba(255, 255, 255, 0.92); } .page-variant .p-fwpg-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 36px; } .page-variant .p-fwpg-cta__ghost { background: transparent; color: var(--wwm-ink-invert); border-color: rgba(255, 255, 255, 0.85); } .page-variant .p-fwpg-cta__ghost:hover { background: rgba(255, 255, 255, 0.12); } .page-variant .p-fwpg-cta__note { margin-left: 26px; font-size: var(--wwm-fs-body-sm); color: rgba(255, 255, 255, 0.92); } .page-variant .p-fwpg-cta__note a { text-decoration: underline; text-underline-offset: 2px; } .page-variant .p-fwpg-cta__points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 65px; padding-top: 23px; border-top: 1px solid rgba(255, 255, 255, 0.75); } .page-variant .p-fwpg-cta__point { display: flex; align-items: flex-start; gap: 16px; } .page-variant .p-fwpg-cta__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--wwm-radius); background: var(--wwm-surface); color: var(--wwm-brand-500); font-size: 24px; } .page-variant .p-fwpg-cta__point-title { display: block; font-family: var(--wwm-font-display); font-weight: 600; font-size: var(--wwm-fs-body); line-height: 1.2; } .page-variant .p-fwpg-cta__point-desc { display: block; margin-top: 8px; font-size: var(--wwm-fs-body-sm); line-height: 20px; color: rgba(255, 255, 255, 0.88); } @media (max-width: 1323px) { .page-variant .p-fwpg-bento { grid-template-rows: minmax(300px, auto) minmax(186px, auto) minmax(186px, auto); } .page-variant .p-fwpg-bento__tall .c-nutzen__title { overflow-wrap: break-word; hyphens: auto; } .page-variant .p-fwpg-hero { padding-top: 176px; padding-bottom: 96px; } .page-variant .p-fwpg-hero__title { font-size: clamp(64px, 8.5vw, 110px); line-height: 1.09; } .page-variant .p-fwpg-hero__grid { grid-template-columns: minmax(0, 640fr) minmax(0, 700fr); column-gap: clamp(40px, 6vw, 100px); } .page-variant .p-fwpg-hero__lead { font-size: 20px; line-height: 28px; } .page-variant .p-fwpg-hero__actions { margin-top: 40px; } .page-variant .c-usps { margin-top: 44px; } .page-variant .c-showcase { grid-template-columns: minmax(0, 512fr) minmax(0, 700fr); column-gap: clamp(24px, 3.5vw, 48px); } .page-variant .c-showcase__media { height: auto; aspect-ratio: 684 / 455; } .page-variant .c-showcase__title { font-size: clamp(24px, 2.4vw, 32px); } .page-variant .c-showcase__trigger { padding: 18px 24px; } .page-variant .c-showcase__copy { padding: 0 24px 24px; } .page-variant .c-stats { column-gap: clamp(32px, 6vw, 130px); } .page-variant .c-quote { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); column-gap: clamp(32px, 5vw, 88px); } .page-variant .c-quote__text { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.44; } .page-variant .p-fwpg-head__sub { font-size: clamp(32px, 4.5vw, 48px); } .page-variant .p-fwpg-cta { padding-bottom: 96px; } .page-variant .p-fwpg-cta__title { font-size: clamp(64px, 8.5vw, 110px); line-height: 1.09; } } @media (max-width: 900px) { .page-variant .p-fwpg-hero { padding-top: 160px; padding-bottom: 80px; } .page-variant .p-fwpg-hero__title { font-size: clamp(48px, 8vw, 84px); } .page-variant .p-fwpg-hero__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; } .page-variant .p-fwpg-hero__media { margin-top: 0; } .page-variant .p-fwpg-hero__media img:not(.c-ai-label) { height: auto; } .page-variant .p-fwpg-bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "photo wide" "photo stat" "tall outline"; gap: 20px; } .page-variant .p-fwpg-bento__photo { grid-area: photo; } .page-variant .p-fwpg-bento__wide { grid-area: wide; } .page-variant .p-fwpg-bento__wide .c-nutzen__title br { display: none; } .page-variant .c-nutzen--brand { grid-area: stat; } .page-variant .c-nutzen--outline { grid-area: outline; } .page-variant .p-fwpg-bento__tall { grid-area: tall; } .page-variant .c-nutzen { padding: 28px; } .page-variant .c-nutzen__title { font-size: 26px; line-height: 34px; } .page-variant .p-fwpg-bento__bg { position: static; align-self: flex-end; width: 200px; margin: 24px -32px -32px 0; opacity: 0.55; } .page-variant .p-fwpg-sketch { position: static; width: auto; margin-top: 28px; margin-bottom: -64px; } .page-variant .p-fwpg-sketch__hero { height: 108px; } .page-variant .c-showcase { grid-template-columns: minmax(0, 1fr); row-gap: 32px; } .page-variant .c-showcase__list { gap: 16px; } .page-variant .p-fwpg-steps { grid-template-columns: minmax(0, 1fr); gap: 20px; } .page-variant .c-step { padding: 28px; } .page-variant .c-step + .c-step::before { left: 40px; top: -22px; width: 4px; height: 20px; transform: none; background: repeating-linear-gradient(180deg, #DFDFDF 0 4px, transparent 4px 8px); } .page-variant .c-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; } .page-variant .c-stats__value { font-size: 36px; } .page-variant .c-stats__item--lead .c-stats__value { font-size: 72px; } .page-variant .c-quotes { padding-top: 40px; } .page-variant .c-quote { grid-template-columns: minmax(0, 1fr); align-items: start; row-gap: 24px; } .page-variant .c-quote__author { padding-bottom: 0; } .page-variant .p-fwpg-cta { padding: 56px 0 80px; } .page-variant .p-fwpg-cta__mark { top: 8px; width: 160px; } .page-variant .p-fwpg-cta__points { grid-template-columns: minmax(0, 1fr); gap: 20px; } } @media (max-width: 700px) { .page-variant .p-fwpg-bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stat" "wide" "photo" "tall" "outline"; } .page-variant .p-fwpg-bento__photo { aspect-ratio: 368 / 250; } .page-variant .p-fwpg-bento__photo img:not(.c-ai-label) { object-position: center 32%; } } @media (max-width: 600px) { .page-variant .p-fwpg-hero { padding-top: 120px; padding-bottom: 40px; } .page-variant .p-fwpg-hero__title { padding-inline: 12px; font-size: 46px; line-height: 50px; } .page-variant .p-fwpg-hero__grid { row-gap: 32px; margin-top: 28px; } .page-variant .p-fwpg-hero__copy { padding-inline: 12px; } .page-variant .p-fwpg-hero__lead { font-size: var(--wwm-fs-body); line-height: 24px; } .page-variant .p-fwpg-hero__actions { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 32px; } .page-variant .c-usps { flex-direction: column; gap: 14px; margin-top: 36px; padding-top: 24px; } .page-variant .p-fwpg-head { text-align: center; margin-bottom: 28px; } .page-variant .p-fwpg-head__sub { margin-top: 12px; font-size: 30px; line-height: 34px; } .page-variant .p-fwpg-lead { margin-top: 24px; margin-inline: auto; padding-inline: 12px; text-align: center; } .page-variant .p-fwpg-bento { gap: 16px; margin-top: 28px; } .page-variant .c-nutzen { padding: 24px; } .page-variant .c-nutzen__title { font-size: 24px; line-height: 32px; } .page-variant .c-nutzen__desc { margin-top: 16px; } .page-variant .c-nutzen__stat { font-size: 40px; } .page-variant .c-nutzen--brand, .page-variant .c-nutzen--outline { min-height: 158px; } .page-variant .p-fwpg-bento__bg { width: 180px; margin: 20px -28px -28px 0; } .page-variant .p-fwpg-sketch { margin-bottom: -56px; } .page-variant .c-showcase { margin-top: 28px; row-gap: 24px; } .page-variant .c-showcase__title { font-size: 24px; } .page-variant .c-showcase__trigger { gap: 12px; padding: 16px 20px; } .page-variant .c-showcase__icon { font-size: 20px; } .page-variant .c-showcase__copy { padding: 0 20px 20px; } .page-variant .p-fwpg-steps { gap: 16px; } .page-variant .c-step { padding: 24px; } .page-variant .c-step + .c-step::before { left: 32px; top: -18px; height: 16px; } .page-variant .c-step__num { font-size: 28px; } .page-variant .c-step__of { font-size: 15px; } .page-variant .c-step__title { margin-top: 20px; font-size: 22px; line-height: 28px; } .page-variant .c-step__desc { margin-top: 12px; } .page-variant .p-fwpg-steps__cta { margin-top: 24px; text-align: center; } .page-variant .c-stats { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: none; column-gap: 20px; row-gap: 24px; margin-top: 32px; padding-inline: 12px; } .page-variant .c-stats__item { grid-row: auto; grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-rows: none; align-items: center; } .page-variant .c-stats__value { text-align: right; font-size: 36px; } .page-variant .c-stats__item--lead .c-stats__value { font-size: 64px; } .page-variant .c-stats__label { padding-top: 0; } .page-variant .c-quotes { margin-top: 32px; padding-top: 32px; } .page-variant .c-quote { row-gap: 20px; } .page-variant .c-quote__text { font-size: 22px; line-height: 32px; } .page-variant .c-quote__avatar { width: 40px; height: 40px; } .page-variant .c-quotes__controls { gap: 16px; margin-top: 20px; } .page-variant .c-logostrip { --logostrip-logo: 84px; margin-top: 28px; padding-block: 20px; } .page-variant .c-logostrip__track { --logostrip-gap: 16px; } .page-variant .p-fwpg-cta { padding: 48px 0 64px; } .page-variant .p-fwpg-cta__mark { display: none; } .page-variant .p-fwpg-cta__title { font-size: 42px; line-height: 46px; } .page-variant .p-fwpg-cta__sub { margin-top: 16px; font-size: 30px; } .page-variant .p-fwpg-cta__lead { margin-top: 20px; max-width: none; } .page-variant .p-fwpg-cta__title, .page-variant .p-fwpg-cta__sub, .page-variant .p-fwpg-cta__lead { padding-inline: 12px; text-align: center; } .page-variant .p-fwpg-cta__actions { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 28px; } .page-variant .p-fwpg-cta__note { margin-left: 0; text-align: center; } .page-variant .p-fwpg-cta__points { gap: 20px; margin-top: 40px; padding-top: 24px; padding-inline: 12px; } } /* ---- Keyframes (unpraefixiert, Name aus der Statik) ------------ */ @keyframes c-logostrip-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--logostrip-gap) / 2)); } } /* ================================================================ Overrides NACH dem Port — gewinnen bei gleicher Spezifitaet. ================================================================ */ /* Sektionskoepfe mobil zentriert (WP-Konvention der Unterseiten; die Statik erbte das aus mobile.css). title--xl auf die 40px der anderen Unterseiten. */ @media (max-width: 700px) { .page-id-21731 .page-variant .title--xl { font-size: clamp(48px, 11vw, 80px); } } @media (max-width: 600px) { .page-id-21731 .page-variant .p-section-head { text-align: center; } .page-id-21731 .page-variant .title--xl { font-size: 40px; line-height: 1.1; } } /* ---- Mobil-Anpassung 1: Funktionen <=700 offen gestapelt ------- Nachgeliefertes Design: kein Akkordeon — alle vier Bloecke offen, Produkt-Shot UEBER dem Titel, alles als weisse Karte. */ .page-variant .c-showcase__mshot { display: none; } @media (max-width: 700px) { .page-variant .c-showcase__media { display: none; } .page-variant .c-showcase__mshot { display: block; margin: 0 0 16px; } .page-variant .c-showcase__mshot img { display: block; width: 100%; height: auto; } .page-variant .c-showcase__item, .page-variant .c-showcase__item.is-open { background: var(--wwm-surface-card); border-radius: var(--wwm-radius-md); padding: 20px; box-shadow: none; } .page-variant .c-showcase__panel { grid-template-rows: 1fr; } .page-variant .c-showcase__icon { display: none; } .page-variant .c-showcase__trigger { padding: 0; pointer-events: none; text-align: left; } .page-variant .c-showcase__title { margin-left: 0; } .page-variant .c-showcase__copy { padding: 12px 0 0; } } /* ---- Mobil-Anpassung 2: CTA-Wortmarke mittig ueber dem Titel --- Nachgeliefertes Design zeigt die talents-Marke zentriert (weiss) ueber "Der Nachwuchs" — die Statik hatte sie versteckt. */ @media (max-width: 600px) { .page-id-21731 .page-variant .p-fwpg-cta__mark { display: block; position: static; width: 132px; margin: 0 auto 20px; background-color: var(--wwm-ink-invert); } } /* ---- Mobil-Anpassung 3: Logo-Band <=600 zweireihig ------------- Zwei versetzt gegenlaeufige Reihen (nachgeliefertes Design); die Reihen existieren als eigene Tracks im Markup. */ .page-variant .c-logostrip__track--half { display: none; } @media (max-width: 600px) { .page-variant .c-logostrip__track--all { display: none; } .page-variant .c-logostrip__track--half { display: flex; } .page-variant .c-logostrip__track--half + .c-logostrip__track--half { margin-top: 16px; } .page-variant .c-logostrip__track--rev { animation-direction: reverse; } } /* Nachtrag (QA-Runde 1): Theme-Regel main > div.page-variant :is(..., [class*="cta"], ...) setzt font-weight 600 auf ALLES, dessen Klasse "cta" enthaelt — die ganze CTA-Sektion erbte fett (Lead brach eine Zeile frueher, +24px Sektionshoehe). Sektion und die direkt gematchten Fliesstext-Klassen zuruecksetzen. */ .page-id-21731 .page-variant .p-fwpg-cta { font-weight: 400; } .page-id-21731 .page-variant .p-fwpg-cta__lead, .page-id-21731 .page-variant .p-fwpg-cta__note, .page-id-21731 .page-variant .p-fwpg-cta__point-desc { font-weight: 400; } /* CTA-Wortmarke: weisse Variante (Statik: c-talents-mark--white) — der Komponenten-Port faerbt die Maske sonst magenta auf magenta. */ .page-id-21731 .page-variant .p-fwpg-cta__mark { background-color: var(--wwm-ink-invert); } /* Nachtrag (QA-Runde 2, mobil): Theme-button-Regel zentriert den Funktionen-Trigger (justify-content) — Design will die Titel linksbuendig. CTA-Buttons stehen im Mobil-Design zentriert und textbreit statt full-width (Statik hatte stretch). */ @media (max-width: 700px) { .page-id-21731 .page-variant .c-showcase__trigger { justify-content: flex-start; } } @media (max-width: 600px) { .page-id-21731 .page-variant .p-fwpg-cta__actions { align-items: center; } } /* Nachtrag (QA-Runde 3 + Angleichung 30.08.): Theme-p-Basis setzt line-height 24px auf die Sektions-Untertitel; angeglichen an die h2-tagline der uebrigen Unterseiten (1.15) statt der geerbten 1.55 der Statik. */ .page-variant .p-section-head__subtitle, .page-variant .p-fwpg-head__sub { line-height: 1.15; } /* === ENDE FWPG =============================================== */ /* ================================================================ ALLGEMEINER FIX: Header bei offenem Menue (Leon, 30.08.2026) ---------------------------------------------------------------- Das Theme hebt den Header bei offenem Menue auf --wi-nav-height-def (216): body:has(#nav-tree-toggle:checked) .sticky-wrapper #pageHeader { height: ... !important }. 1) Auf Unterseiten (Desktop-Hoehe 154, siehe "ALLGEMEINE FIXES") sprangen die Logos dadurch nach unten — die Gegenregel haelt die 154 auch bei offenem Menue: ungescrollt bewegt sich nichts, aus dem Scroll-Zustand (96) expandiert der Header auf den normalen Stand von oben. Startseiten (216) unveraendert; unter 1281px existiert der Sprung nicht (96 bleibt 96). 2) Der Schriftzug des W-Logos (path.domain) blieb im Scroll-Zustand ausgeblendet, obwohl das Logo bei offenem Menue wieder gross ist — bei offenem Menue auf Desktop wieder einblenden (alle Seiten, auch Startseiten; die vorhandene transition laeuft mit). ================================================================ */ @media (min-width: 1281px) { body:not(.home):has(#nav-tree-toggle:checked) .sticky-wrapper #pageHeader { height: 9.625rem !important; } body:has(#nav-tree-toggle:checked) #pageHeader svg path.domain { opacity: 1 !important; } } /* ================================================================ HEADER-FEINSCHLIFF (Leon, 30.08.2026) ---------------------------------------------------------------- 1) .actions im geschrumpften Scroll-Zustand exakt zentrieren: die Theme-Formel rechnet mit --wi-bt-base-size (44px), die Buttons sind real 52px hoch — 4px Versatz. Oben bleibt das Bestands-margin-top 16px. Nur Desktop; bei offenem Menue gilt weiter die Menue-Regel (deshalb der :not(:has)-Guard). 2) Talents-Startseite: die kleine talents-Wortmarke beginnt beim Runterscrollen zu erscheinen, WAEHREND der W-Schriftzug ausblendet (vorher wartete sie dessen volle 0.4s ab). 3) Login-Button am Welt-Switcher (Startseiten): das Theme schiebt ihn im WPG-Modus bereits per translateX hinter den Switcher, eine transition-Override (nur background/color, !important) verhinderte aber jede Bewegung — er poppte hart. Jetzt gleitet er hinterm Switcher hervor nach links und waechst dabei leicht (scale-Property komponiert mit dem Theme-translate); z-index 998 legt ihn hinter die Switcher-Pille (999). 4) "Auch fuer"-Chips im Menue: kleinerer Pfeil, on hover leicht nach rechts (die transform-transition bringt die Basisregel schon mit). ================================================================ */ @media (min-width: 1281px) { body:not(:has(#nav-tree-toggle:checked)) .sticky-wrapper.sticky #pageHeader nav .actions { margin-top: calc((var(--wi-nav-height-min) - 2 * var(--pad-s) - 52px) / 2) !important; } } body.home.mode-talents .sticky-wrapper.sticky #pageHeader nav .talents-brand { transition: opacity 0.4s cubic-bezier(0.2, 0.7, 0.25, 1) 0.1s; } body.home #pageHeader nav .actions > .login.wt-bt { transition: background-color 0.22s cubic-bezier(0.2, 0.7, 0.25, 1), color 0.22s cubic-bezier(0.2, 0.7, 0.25, 1), opacity 0.32s cubic-bezier(0.2, 0.7, 0.25, 1), transform 0.38s cubic-bezier(0.2, 0.7, 0.25, 1), scale 0.38s cubic-bezier(0.2, 0.7, 0.25, 1) !important; z-index: 998 !important; } body.home.mode-wpg #pageHeader nav .actions > .login.wt-bt { scale: 0.82; } /* Groesse: Theme-Regel traegt zwei IDs + !important — gleichziehen. Bewegung: das Theme pinnt an diesen Chips transform per { transform: none !important } fest (schaltet den Standard- wt-bt-Hover ab) — deshalb laeuft der Hover-Shift ueber die SEPARATE translate-Property, die unabhaengig von transform komponiert; die transition dafuer explizit (!important, weil die Theme-transition sonst gewinnt und translate hart spraenge). */ #pageHeader nav #nav-tree .branch-extra ul a.wt-bt::after { width: 12px !important; height: 12px !important; transition: background-color 0.22s cubic-bezier(0.2, 0.7, 0.25, 1), translate 0.22s cubic-bezier(0.2, 0.7, 0.25, 1) !important; } #pageHeader nav #nav-tree .branch-extra ul a.wt-bt:hover::after { translate: 3px 0; } /* ================================================================ HEADER-FEINSCHLIFF 2 (Leon, 30.08.2026) ---------------------------------------------------------------- Die talents-Wordmark sitzt im vollen Desktop-Header 20px tiefer (Unterseiten, Login, Backend — ueberall ausser Startseiten, wo sie oben unsichtbar ist). Beim Schrumpfen entfaellt das Extra- margin, damit sie wie bisher zentriert ans W gleitet; die margin-transition (statt margin-left) animiert beides. Offenes Menue stellt den vollen Stand zurueck — margin-top kommt mit. ================================================================ */ @media (min-width: 1281px) { body:is(.mode-talents, .talents-nav):not(.home) #pageHeader nav .talents-brand { margin-top: 20px; transition: margin 0.4s cubic-bezier(0.2, 0.7, 0.25, 1); } body:is(.mode-talents, .talents-nav):not(.home) .sticky-wrapper.sticky #pageHeader nav .talents-brand { margin-top: 0; } body:has(#nav-tree-toggle:checked):is(.mode-talents, .talents-nav):not(.home) .sticky-wrapper.sticky #pageHeader nav .talents-brand { margin-top: 20px; } } /* Login-Seite: der Portal-Header hat kein nav-gap (die uebrigen Seiten tragen 16px) — der Trennstrich bekommt deshalb 32px je Seite statt 16, damit die Abstaende Logo|Strich|talents exakt den anderen Seiten entsprechen (gemessen 32/32; Leon, 30.08.2026). */ body.page-login.talents-nav #pageHeader nav .talents-brand-sep { margin: 0 32px; } /* ================================================================ ANGLEICHUNG AN DIE UEBRIGEN UNTERSEITEN (Leon, 30.08.2026) ---------------------------------------------------------------- Vor Leons Detail-Review die Metriken der abgenommenen Seiten uebernommen (gemessen auf wwmwp / der-beruf / kontakt): - Buttons fett (700) wie ueberall statt der 500 der Statik-Komponente; Icon-Padding symmetrisch 32px (die Statik-eigene 24px-Korrektur entfaellt). - Untertitel-Zeilenhoehe 1.15 (siehe Nachtrag QA-3 oben). Bewusst NICHT angeglichen: das Titel-Gewicht — das fuer-wpg-Design ist nachweislich in Poppins 600 gesetzt ("Den Nachwuchs" im PNG 903px breit = Semibold; 700 waere ~5% breiter), waehrend die uebrigen Seiten 700 nutzen. ================================================================ */ .page-id-21731 .page-variant .c-btn { font-weight: 700; } .page-id-21731 .page-variant .c-btn:has(.material-symbols-rounded) { padding-right: 32px; } /* ================================================================ REVIEW-RUNDE 1 (Leons Detail-Review, 30.08.2026) ---------------------------------------------------------------- Desktop-Korrekturen laut Review + eigene Mobil-Angleichung der neuen Werte. Neue Icon-Masken: bolt (Hero-USP "Schnell eingerichtet"), pause/play (Logo-Band-Knopf, Newsletter-Muster). Das Funktionen-Akkordeon ist jetzt ein Auto-Slider: die magenta Kante des offenen Eintrags ist die Fortschritts-Bar (--showcase-progress aus talents.js). ================================================================ */ /* ---- neue Icon-Masken ---- */ .page-variant .wwmwp-ico--bolt { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .page-variant .wwmwp-ico--pause { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .page-variant .wwmwp-ico--play { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } /* ---- Hero ---- */ .page-variant .p-fwpg-hero__grid { margin-top: 32px; } .page-variant .p-fwpg-hero__actions { margin-top: 48px; } .page-variant .c-usps { padding-top: 24px; } .page-id-21731 .page-variant .p-fwpg-hero__actions .c-btn--ghost { background: var(--wwm-surface); } /* ---- Nutzen ---- */ .page-variant .p-fwpg-lead { max-width: 720px; margin-top: 24px; } .page-variant .p-fwpg-sketch { top: 24px; width: 280px; padding: 8px; border-radius: var(--wwm-radius-sm); background-color: var(--wwm-surface); box-shadow: var(--wwm-shadow); } .page-variant .c-nutzen__stat { font-size: 48px; font-weight: 700; } .page-variant .c-nutzen__stat .wwmwp-ico { font-size: 0.62em; margin-right: 2px; } .page-variant .c-nutzen__stat-label { margin-top: 8px; font-weight: 600; } .page-variant .c-nutzen__title { font-weight: 700; } .page-variant .c-nutzen__desc { max-width: 240px; } .page-id-21731 .page-variant .c-nutzen__title--center { font-size: 40px !important; line-height: 1.2; } .page-variant .c-nutzen__desc--center { margin-top: 8px; } .page-variant .p-fwpg-bento__bg { bottom: -80px; width: 280px; opacity: 0.25; } .page-variant .c-nutzen--outline { border-width: 4px; } /* Zentrierte Karten: schmale Descs mittig halten */ .page-variant .c-nutzen--outline .c-nutzen__desc, .page-variant .c-nutzen--brand .c-nutzen__stat-label { margin-inline: auto; } /* ---- Funktionen: Auto-Slider-Fortschritts-Bar ---- */ .page-variant .c-showcase__item { position: relative; } .page-variant .c-showcase__item.is-open { box-shadow: none; } .page-variant .c-showcase__item.is-open::before { content: ''; position: absolute; left: 0; top: 0; width: 3px; height: calc(var(--showcase-progress, 0) * 100%); background: var(--wwm-brand-500); } /* ---- In drei Schritten ---- */ .page-variant .c-step { padding-top: 32px; padding-bottom: 32px; } .page-variant .c-step__num { font-size: 40px; } .page-variant .c-step__of { font-size: 20px; } .page-variant .c-step__desc { font-size: 17px; line-height: 24px; } /* ---- In bester Gesellschaft ---- */ .page-variant .c-stats__label { padding-top: 4px; } .page-variant .c-stats__value { font-weight: 700; } .page-variant .c-quote__author { display: none; } /* Logo-Band: exakt auf Content-Breite eingerueckt (die Statik lief durchs eigene Padding); Wrap traegt Breite + Pause-Knopf. */ .page-variant .c-marquee-wrap { position: relative; width: min(var(--wwm-container-max), calc(100% - 2 * var(--wwm-container-px))); margin: 34px auto 0; } .page-variant .c-marquee-wrap .c-logostrip { width: 100%; max-width: none; margin: 0; padding: 34px 0; } .page-variant .c-marquee__toggle { position: absolute; right: 0; top: calc(100% + 10px); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: #949494; cursor: pointer; transition: color var(--wwm-dur) var(--wwm-ease); } .page-variant .c-marquee__toggle .wwmwp-ico { font-size: 14px; } .page-variant .c-marquee__toggle:hover { color: var(--wwm-ink-soft); } @media (prefers-reduced-motion: reduce) { .page-variant .c-marquee__toggle { display: none; } } .page-variant .c-logostrip.is-paused .c-logostrip__track { animation-play-state: paused; } /* ---- CTA ---- */ .page-variant .p-fwpg-cta__point-title { font-size: 20px; } .page-variant .p-fwpg-cta__icon { font-size: 30px; } /* ---- Mobil-Angleichung der neuen Werte (<=900 / <=600) ---- */ @media (max-width: 900px) { /* Descs in schmalen Karten wieder voll nutzbar */ .page-variant .c-nutzen__desc { max-width: none; } .page-variant .p-fwpg-bento__bg { opacity: 0.25; } } @media (max-width: 700px) { /* Gestapelte Funktionen: keine Slider-Bar */ .page-variant .c-showcase__item.is-open::before { content: none; } } @media (max-width: 600px) { .page-id-21731 .page-variant .c-nutzen__title--center { font-size: 28px !important; } .page-variant .c-nutzen__stat { font-size: 40px; } .page-variant .c-step__num { font-size: 32px; } .page-variant .c-step__of { font-size: 16px; } .page-variant .c-step__desc { font-size: 16px; } .page-variant .p-fwpg-cta__point-title { font-size: 18px; } .page-variant .c-marquee-wrap { margin-top: 28px; } .page-variant .c-marquee-wrap .c-logostrip { padding: 20px 0; } } /* CTA: "Jetzt loslegen." — Leons Review nannte margin-top ohne Wert; aus dem Design gemessen: optische Glyphen-Luecke 60px (live war 66 bei den 26px der Statik) -> 20px. */ .page-variant .p-fwpg-cta__sub { margin-top: 20px; } /* ================================================================ REVIEW-RUNDE 2 (Leon, 30.08.2026) ================================================================ */ /* Kopf -> Lead: Gesamtabstand 24px (nur wo ein Lead folgt — die gestapelten Koepfe ohne Lead behalten ihren Abstand zu den Karten). */ .page-variant .p-section-head:has(+ .p-fwpg-lead), .page-variant .p-fwpg-head:has(+ .p-fwpg-lead) { margin-bottom: 0; } /* ---- Desktop: Nutzen ---- */ .page-variant .c-nutzen--outline { padding: 0; } .page-variant .c-nutzen__desc--center { max-width: none; } /* Arbeitgebermarke: Hoehe kommt vom Inhalt, das Grid bleibt im Takt (Karte streckt sich nicht mehr ueber beide Reihen). */ .page-variant .p-fwpg-bento__tall { align-self: start; } .page-variant .c-nutzen__stat .wwmwp-ico { font-size: 0.8em; } /* ---- Desktop: Funktionen — Bar als eigener Track NEBEN der Box: grauer Kanal #F0F0F0, magenta Fuellung, voll abgerundet. Das Item gibt sein overflow frei (der Panel-Clip sitzt am panel-inner, der is-open-Hintergrund wird vom border-radius selbst geclippt). */ .page-variant .c-showcase__item { overflow: visible; } .page-variant .c-showcase__item.is-open::before { content: ''; position: absolute; left: -16px; top: 0; width: 4px; height: 100%; border-radius: var(--wwm-radius-pill); background: var(--wwm-surface-mute); } .page-variant .c-showcase__item.is-open::after { content: ''; position: absolute; left: -16px; top: 0; width: 4px; height: calc(var(--showcase-progress, 0) * 100%); border-radius: var(--wwm-radius-pill); background: var(--wwm-brand-500); } /* ---- Mobil ---- */ @media (max-width: 900px) { /* Arbeitgebermarke-Gebaeude: Mobil-Masse wiederherstellen (die Desktop-280 aus Runde 1 gewann die Kaskade auch hier). */ .page-variant .p-fwpg-bento__bg { width: 200px; } } @media (max-width: 700px) { /* Gestapelte Funktionen-Karten: Bild randbuendig, Karte clippt. */ .page-variant .c-showcase__item { overflow: hidden; padding: 0; } .page-variant .c-showcase__item.is-open::before, .page-variant .c-showcase__item.is-open::after { content: none; } .page-variant .c-showcase__mshot { margin: 0 0 20px; } .page-variant .c-showcase__mshot img { max-height: 250px; object-fit: cover; } .page-variant .c-showcase__head { padding: 0 24px; } .page-variant .c-showcase__panel { padding: 0 24px 24px; } } @media (max-width: 600px) { .page-variant .c-nutzen { padding: 24px 32px; } .page-variant .c-nutzen--outline { padding: 0; border-width: 3px; } .page-variant .p-fwpg-bento__bg { width: 180px; } .page-variant .c-step__title { font-size: 20px !important; margin-top: 16px; } .page-variant .c-step__sketch { margin-top: 16px; } .page-variant .c-step { padding: 24px 32px; } .page-variant .p-fwpg-steps__cta { text-align: left; } .page-variant .p-fwpg-cta__mark { width: auto; height: 24px; } } @media (max-width: 900px) { .page-variant .p-fwpg-cta__points { gap: 32px; } } /* Runde-2-Nachzieher: drei aeltere Regeln hatten hoehere Spezifitaet. */ @media (max-width: 700px) { .page-variant .c-showcase__item, .page-variant .c-showcase__item.is-open { padding: 0; } } @media (max-width: 600px) { .page-id-21731 .page-variant .c-step__title { font-size: 20px !important; } .page-id-21731 .page-variant .p-fwpg-cta__mark { width: auto; height: 24px; } } /* Slider-Bar: innerhalb der Content-Breite (Liste rueckt um die Bar-Spur ein, die Bar sitzt damit an der Container-Kante) und butterweich (kurze lineare transition interpoliert die rAF-Schritte des Fortschritts). */ @media (min-width: 701px) { .page-variant .c-showcase__list { padding-left: 16px; } } .page-variant .c-showcase__item.is-open::after { transition: height 0.25s linear; } /* Arbeitgebermarke-Karte nach Leons Soll-Screenshots (30.08.): Desktop: Text volle Kartenbreite (die 240er-Desc-Grenze gilt hier nicht), unter dem Text Raum fuer das fast vollstaendige Gebaeude. Mobil: Gebaeude gross SEITLICH rechts hinter den letzten Textzeilen, rechts angeschnitten, kraeftiger (0.35) — statt klein im Fluss unter dem Text. */ .page-variant .p-fwpg-bento__tall .c-nutzen__desc { max-width: none; } .page-variant .p-fwpg-bento__tall { padding-bottom: 80px; } @media (max-width: 900px) { .page-variant .p-fwpg-bento__tall { padding-bottom: 120px; } .page-variant .p-fwpg-bento__bg { position: absolute; right: -31px; bottom: -72px; width: 250px; margin: 0; opacity: 0.35; } } /* ================================================================ HS — Seite "Infos fuer Hochschulen" (Leon, 30.08.2026) ---------------------------------------------------------------- Port von assets/css/pages/hochschulen.css (Herleitung dort); Kennzahlen und Logo-Band laufen ueber die FWPG-Komponenten (c-stats mit Count-up, c-logostrip im c-marquee-wrap mit Pause-Knopf und Partner-CPT). Tokens: Scope des WWMWP-Blocks um .page-id-21748 erweitert (2 Replaces beim Deploy). Neue Icon-Masken: explore, call (offizielle Google-SVGs), mail (Font-Extrakt). Formular: CF7 21745 im Statik-c-form-Markup — CF7-Zustaende nach dem Muster der Kontakt-Seite behandelt. ================================================================ */ /* ---- neue Icon-Masken ---- */ .page-variant .wwmwp-ico--explore { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .page-variant .wwmwp-ico--call { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .page-variant .wwmwp-ico--mail { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } /* ---- Angleichungen (fwpg-Review-Stand) ---- */ .page-id-21748 .page-variant .c-btn { font-weight: 700; } .page-id-21748 .page-variant .c-btn:has(.material-symbols-rounded) { padding-right: 32px; } .page-variant .p-hs-hero__title-alt { font-weight: 600; } .page-variant :is(.p-section-head, .p-hs-head):has(+ .p-hs-lead) { margin-bottom: 0; } .page-variant .p-hs-lead { margin-top: 24px; } /* ---- Kennzahlen-/Band-Einbettung ---- */ .page-variant .p-hs-cstats { margin-top: 0; margin-bottom: 68px; } .page-variant .p-hs-band .c-logostrip { padding: 24px 0; } .page-variant .p-hs-band { margin-top: 0; } .page-variant .p-hs-band .c-marquee__toggle { top: calc(100% + 8px); } /* ---- Theme-Gegenregeln ---- */ .page-id-21748 .page-variant .p-hs-card__title { font-size: 32px !important; } .page-id-21748 .page-variant .p-hs-step__title { font-size: 28px !important; } @media (max-width: 600px) { .page-id-21748 .page-variant .p-hs-card__title { font-size: 26px !important; } .page-id-21748 .page-variant .p-hs-step__title { font-size: 24px !important; } .page-id-21748 .page-variant h1, .page-id-21748 .page-variant h2, .page-id-21748 .page-variant h3 { overflow-wrap: break-word; hyphens: auto; } } @media (max-width: 603px) { .page-id-21748 .page-variant p { width: auto; } } .page-id-21748 .page-variant p a { display: inline; } .page-id-21748 .page-variant p a::after { content: none !important; } .page-id-21748 .page-variant .p-hs-card__link { display: inline; } /* ---- CF7 in der Formularkarte (Kontakt-Muster) ---- */ .page-variant .p-hs-formcard .wpcf7-form p { margin: 0; } .page-variant .p-hs-formcard .wpcf7-form > p { display: none; } .page-variant .p-hs-formcard .wpcf7-form br { display: none; } .page-variant .p-hs-formcard .wpcf7-form-control-wrap { display: block; } .page-variant .p-hs-formcard .wpcf7-list-item { display: block; margin: 0; } .page-variant .p-hs-formcard .wpcf7-list-item label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; } .page-variant .p-hs-formcard .c-form__consent { display: block; } .page-variant .p-hs-formcard .wpcf7-list-item-label { font-family: var(--wwm-font-sans); font-size: var(--wwm-fs-body-sm); line-height: 21px; color: var(--wwm-ink-soft); } .page-variant .p-hs-formcard .wpcf7-list-item-label a, .page-variant .p-hs-formcard .wpcf7-list-item-label a:is(:link, :visited, :hover) { display: inline; color: var(--wwm-brand-500) !important; text-decoration: underline; text-underline-offset: 3px; } /* Checkbox: das Theme nullt sie global — Statik-Optik neu aufbauen. */ .page-variant .p-hs-formcard input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 32px; height: 32px; margin: 0; border: 1px solid var(--wwm-line); border-radius: var(--wwm-radius-sm); background: var(--wwm-surface); cursor: pointer; transition: background var(--wwm-dur-fast) var(--wwm-ease), border-color var(--wwm-dur-fast) var(--wwm-ease); } .page-variant .p-hs-formcard input[type="checkbox"]::after { content: ""; display: block; width: 10px; height: 6px; margin: 9px auto 0; border-left: 2px solid var(--wwm-ink-invert); border-bottom: 2px solid var(--wwm-ink-invert); transform: rotate(-45deg) scale(0.6); opacity: 0; transition: opacity var(--wwm-dur-fast) var(--wwm-ease), transform var(--wwm-dur-fast) var(--wwm-ease); } .page-variant .p-hs-formcard input[type="checkbox"]:checked { background: var(--wwm-brand-500); border-color: var(--wwm-brand-500); } .page-variant .p-hs-formcard input[type="checkbox"]:checked::after { opacity: 1; transform: rotate(-45deg) scale(1); } /* Feldfehler + Statuszeile in Statik-Optik. */ .page-variant .p-hs-formcard .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-family: var(--wwm-font-sans); font-size: var(--wwm-fs-caption); line-height: 1.4; color: var(--wwm-brand-500); } .page-variant .p-hs-formcard .wpcf7-response-output { grid-column: 1 / -1; margin: 6px 0 0; padding: 0; border: 0; font-family: var(--wwm-font-sans); font-size: var(--wwm-fs-body-sm); line-height: 1.4; color: var(--wwm-ink-soft); } .page-variant .p-hs-formcard .wpcf7-form:is(.invalid, .unaccepted, .failed, .aborted) .wpcf7-response-output { color: var(--wwm-brand-500); } /* CF7-Submit ist ein input — die c-btn-Regeln greifen, aber das Theme setzt eigene input-Basen dagegen. */ .page-variant .p-hs-formcard .c-form__submit { height: 50px; border: 0; cursor: pointer; } /* ---- Seiten-CSS (Port der Statik, Herleitung siehe Referenz) --- */ .page-id-21748 { --hs-hero-tint: #F7F9FC; --hs-hero-media: 592px; --hs-hero-gap: 48px; --hs-bento-gap: 24px; --hs-card-radius: 16px; --hs-logo-size: 140px; } .page-variant .p-hs-hero { position: relative; background: linear-gradient(180deg, var(--wwm-surface) 0%, var(--wwm-surface) 20%, var(--hs-hero-tint) 48%, var(--hs-hero-tint) 100%); padding-top: 200px; padding-bottom: 120px; } .page-variant .p-hs-hero__title { font-size: var(--wwm-fs-display-xl); line-height: 1.09; letter-spacing: -0.025em; color: var(--wwm-ink); margin-bottom: 32px; } .page-variant .p-hs-hero__title-alt { color: var(--wwm-ink-muted); font-style: italic; } .page-variant .p-hs-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--hs-hero-media); gap: var(--hs-hero-gap); align-items: stretch; } .page-variant .p-hs-hero__lead { font-family: var(--wwm-font-sans); font-weight: 400; font-size: 24px; line-height: 32px; color: var(--wwm-ink-soft); max-width: 570px; } .page-variant .p-hs-hero__actions { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 48px; } .page-variant .p-hs-usp { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 32px; padding-top: 23px; border-top: 1px solid var(--wwm-line); } .page-variant .p-hs-usp__item { display: grid; grid-template-columns: auto 1fr; column-gap: 7px; align-items: start; } .page-variant .p-hs-usp__icon { grid-column: 1; grid-row: 1; font-size: 18px; width: 18px; height: 18px; margin-top: 1px; color: var(--wwm-brand-500); } .page-variant .p-hs-usp__icon--svg { fill: currentColor; } .page-variant .p-hs-usp__title { grid-column: 2; grid-row: 1; font-family: var(--wwm-font-sans); font-weight: 700; font-size: 16px; line-height: 20px; color: var(--wwm-ink-soft); } .page-variant .p-hs-usp__desc { grid-column: 2; grid-row: 2; margin-top: 4px; font-family: var(--wwm-font-sans); font-size: 16px; line-height: 20px; color: var(--wwm-ink-soft); } .page-variant .p-hs-hero__media { position: relative; min-height: 322px; margin: 0; border-radius: var(--hs-card-radius); overflow: hidden; } .page-variant .p-hs-hero__media img:not(.c-ai-label) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .page-variant .p-hs-lead { font-family: var(--wwm-font-sans); font-size: var(--wwm-fs-body); line-height: 24px; color: var(--wwm-ink-soft); max-width: 72ch; } .page-variant .p-hs-head { grid-template-columns: 1fr; align-items: start; gap: 16px; margin-bottom: 14px; } .page-variant .p-hs-nutzen__lead { margin-bottom: 34px; max-width: 706px; } .page-variant .p-hs-nutzen .p-section-head { margin-bottom: 28px; } .page-variant .p-hs-bento { display: grid; grid-template-columns: 437fr 388fr 387fr; grid-template-rows: auto auto auto; gap: var(--hs-bento-gap); grid-template-areas: "media contact contact" "media stat wissen" "media plain wissen"; } .page-variant .p-hs-bento__media { grid-area: media; } .page-variant .p-hs-bento__contact { grid-area: contact; min-height: 248px; } .page-variant .p-hs-bento__stat { grid-area: stat; } .page-variant .p-hs-bento__wissen { grid-area: wissen; } .page-variant .p-hs-bento__plain { grid-area: plain; } .page-variant .p-hs-bento__media { position: relative; margin: 0; border-radius: var(--hs-card-radius); overflow: hidden; } .page-variant .p-hs-bento__media img:not(.c-ai-label) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .page-variant .p-hs-card { position: relative; overflow: hidden; padding: 36px 40px 40px; border: 1px solid var(--wwm-line); border-radius: var(--hs-card-radius); background: var(--wwm-surface-card); } .page-variant .p-hs-card__body { position: relative; z-index: 1; max-width: 44ch; } .page-variant .p-hs-card__title { font-family: var(--wwm-font-display); font-weight: 700; font-size: 32px; line-height: 48px; color: var(--wwm-ink); margin-bottom: 28px; } .page-variant .p-hs-card__text { font-family: var(--wwm-font-sans); font-size: var(--wwm-fs-body); line-height: 24px; color: var(--wwm-ink-soft); } .page-variant .p-hs-card__link { color: var(--wwm-brand-500); font-weight: 700; text-underline-offset: 3px; } .page-variant .p-hs-card__link:hover { text-decoration: underline; } .page-variant .p-hs-card__deco { position: absolute; top: 16px; /* 09.09.2026: Das Karten-Mockup stand 70 px ueber der Kartenkante und wurde rechts abgeschnitten. Jetzt ganz innerhalb der Karte, wie im Design (Werte aus .work/anim/fit-deko.py, Suchlauf gegen den Kartenausschnitt des Designs). Die Mobil-Zweige bleiben unberuehrt. */ right: 12px; width: 298px; height: auto; opacity: 0.75; pointer-events: none; user-select: none; } .page-variant .p-hs-card__deco--corner { top: auto; bottom: -60px; /* 09.09.2026: neues Motiv (hochschulen_wissen_bg, 241x282 statt 1254x1254). Lage und Deckkraft aus dem Design ermittelt (.work/anim/fit-deko.py): 30 px weiter links und deutlich zurueckhaltender als die alte Grafik. */ right: -20px; width: 238px; opacity: 0.3; } .page-variant .p-hs-stat-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 184px; padding: 24px; border-radius: var(--hs-card-radius); background: var(--wwm-brand-500); color: var(--wwm-ink-invert); text-align: center; } .page-variant .p-hs-stat-card__num { font-family: var(--wwm-font-display); font-weight: 700; font-size: 48px; line-height: 1; letter-spacing: -0.02em; } .page-variant .p-hs-stat-card__gt { font-weight: 400; margin-right: 2px; } .page-variant .p-hs-stat-card__text { font-family: var(--wwm-font-sans); font-weight: 700; font-size: var(--wwm-fs-body-sm); line-height: 21px; } .page-variant .p-hs-outline-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 186px; padding: 24px; border: 2px solid var(--wwm-brand-500); border-radius: var(--hs-card-radius); background: var(--wwm-surface-card); text-align: center; } .page-variant .p-hs-outline-card__title { font-family: var(--wwm-font-display); font-weight: 700; font-size: 32px; line-height: 38px; letter-spacing: -0.015em; color: var(--wwm-ink); } .page-variant .p-hs-outline-card__text { font-family: var(--wwm-font-sans); font-size: var(--wwm-fs-body); line-height: 24px; color: var(--wwm-ink-soft); } .page-variant .p-hs-vertrauen__lead { max-width: 700px; margin-bottom: 60px; } .page-variant .p-hs-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hs-bento-gap); align-items: stretch; } .page-variant .p-hs-step { position: relative; display: flex; flex-direction: column; padding: 40px; border: 1px solid var(--wwm-line); border-radius: var(--hs-card-radius); background: var(--wwm-surface-card); } .page-variant .p-hs-step + .p-hs-step::before { content: ""; position: absolute; top: 50%; left: calc(-1 * var(--hs-bento-gap) - 1px); width: var(--hs-bento-gap); height: 1px; border-top: 1px dotted var(--wwm-line); } .page-variant .p-hs-step__num { font-family: var(--wwm-font-display); font-weight: 700; font-size: 42px; line-height: 1; letter-spacing: -0.02em; color: var(--wwm-ink); } .page-variant .p-hs-step__total { margin-left: 10px; font-size: 26px; color: var(--wwm-ink-muted); } .page-variant .p-hs-step__title { margin-top: 30px; font-family: var(--wwm-font-display); font-weight: 700; font-size: 28px; line-height: 34px; letter-spacing: -0.015em; color: var(--wwm-ink); } .page-variant .p-hs-step__text { margin-top: 24px; font-family: var(--wwm-font-sans); font-size: var(--wwm-fs-body); line-height: 24px; color: var(--wwm-ink-soft); } .page-variant .p-hs-step__art { margin-top: auto; padding-top: 40px; } .page-variant .p-hs-step__art svg { width: 100%; max-width: 170px; height: auto; } .page-variant .p-hs-vorteile__cta { margin-top: 32px; } .page-variant .p-hs-kontakt { position: relative; z-index: 1; padding-block: 120px; background: var(--wwm-brand-500); color: var(--wwm-ink-invert); --focus-ring: var(--wwm-ink-invert); } .page-variant .p-hs-kontakt__grid { display: grid; grid-template-columns: minmax(0, 1fr) 612px; gap: 40px; align-items: start; } .page-variant .p-hs-kontakt__title { color: var(--wwm-ink-invert); } .page-variant .p-hs-kontakt__subtitle { margin-top: 22px; font-family: var(--wwm-font-sans); font-weight: 700; font-size: 48px; line-height: 1.1; letter-spacing: var(--wwm-tracking-tight); color: var(--wwm-ink-invert); } .page-variant .p-hs-kontakt__lead { margin-top: 32px; max-width: 46ch; font-family: var(--wwm-font-sans); font-size: var(--wwm-fs-body-sm); line-height: 24px; color: var(--wwm-ink-invert); } .page-variant .p-hs-contactlist { display: flex; flex-direction: column; gap: 16px; margin-top: 40px; } .page-variant .p-hs-contactlist__item { display: flex; align-items: center; gap: 16px; } .page-variant .p-hs-contactlist__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--wwm-radius); background: var(--wwm-surface); color: var(--wwm-brand-500); } .page-variant .p-hs-contactlist__icon .material-symbols-rounded { font-size: 24px; } .page-variant .p-hs-contactlist__icon svg { width: 24px; height: 24px; } .page-variant .p-hs-contactlist__text { font-family: var(--wwm-font-sans); font-style: normal; font-size: var(--wwm-fs-body); line-height: 24px; color: var(--wwm-ink-invert); } .page-variant .p-hs-contactlist__text a { text-underline-offset: 3px; } .page-variant .p-hs-contactlist__text a:hover { text-decoration: underline; } .page-variant .p-hs-formcard { padding: 32px 48px; border-radius: var(--wwm-radius-xl); background: var(--wwm-surface-card); } .page-variant .p-hs-formcard .c-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 18px; } .page-variant .p-hs-formcard .c-form__field--wide { grid-column: 1 / -1; } .page-variant .p-hs-formcard .c-form__label { display: block; margin-bottom: 8px; font-family: var(--wwm-font-display); font-weight: 500; font-size: var(--wwm-fs-body-sm); line-height: 1.4; color: var(--wwm-ink-soft); } .page-variant .p-hs-formcard .c-form__control { display: block; width: 100%; height: 56px; padding: 0 16px; font-family: var(--wwm-font-sans); font-size: var(--wwm-fs-body); line-height: 1.4; color: var(--wwm-ink); background: var(--wwm-surface); border: 1px solid var(--wwm-line); border-radius: var(--wwm-radius); transition: border-color var(--wwm-dur-fast) var(--wwm-ease), box-shadow var(--wwm-dur-fast) var(--wwm-ease); } .page-variant .p-hs-formcard .c-form__control::placeholder { color: var(--wwm-ink-muted); opacity: 1; } .page-variant .p-hs-formcard .c-form__control:hover { border-color: var(--wwm-ink-faint); } .page-variant .p-hs-formcard .c-form__control:focus-visible { outline: none; border-color: var(--wwm-brand-500); box-shadow: 0 0 0 3px rgba(211, 37, 102, 0.14); } .page-variant .p-hs-formcard .c-form__control[aria-invalid="true"] { border-color: var(--wwm-brand-500); } .page-variant .p-hs-formcard .c-form__textarea { height: 139px; padding: 16px; resize: vertical; } .page-variant .p-hs-form__count { margin-top: 6px; text-align: right; font-family: var(--wwm-font-sans); font-size: var(--wwm-fs-caption); line-height: 1.2; color: var(--wwm-ink-faint); } .page-variant .p-hs-formcard .c-form__consent { display: flex; align-items: flex-start; gap: 12px; font-family: var(--wwm-font-sans); font-size: var(--wwm-fs-body-sm); line-height: 21px; color: var(--wwm-ink-soft); cursor: pointer; } .page-variant .p-hs-formcard .c-form__consent a { color: var(--wwm-brand-500); text-decoration: underline; text-underline-offset: 3px; } .page-variant .p-hs-formcard .c-form__check { appearance: none; -webkit-appearance: none; flex: none; width: 32px; height: 32px; margin: 0; border: 1px solid var(--wwm-line); border-radius: var(--wwm-radius-sm); background: var(--wwm-surface); cursor: pointer; transition: background var(--wwm-dur-fast) var(--wwm-ease), border-color var(--wwm-dur-fast) var(--wwm-ease); } .page-variant .p-hs-formcard .c-form__check::after { content: ""; display: block; width: 10px; height: 6px; margin: 9px auto 0; border-left: 2px solid var(--wwm-ink-invert); border-bottom: 2px solid var(--wwm-ink-invert); transform: rotate(-45deg) scale(0.6); opacity: 0; transition: opacity var(--wwm-dur-fast) var(--wwm-ease), transform var(--wwm-dur-fast) var(--wwm-ease); } .page-variant .p-hs-formcard .c-form__check:checked { background: var(--wwm-brand-500); border-color: var(--wwm-brand-500); } .page-variant .p-hs-formcard .c-form__check:checked::after { opacity: 1; transform: rotate(-45deg) scale(1); } .page-variant .p-hs-formcard .c-form__check[aria-invalid="true"] { border-color: var(--wwm-brand-500); } .page-variant .p-hs-formcard .c-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 6px; } .page-variant .p-hs-formcard .c-form__submit { height: 50px; padding-inline: 46px; font-size: var(--wwm-fs-body-sm); font-weight: 600; } .page-variant .p-hs-formcard .c-form__status { flex: 1 1 220px; min-width: 0; font-size: var(--wwm-fs-body-sm); line-height: 1.4; color: var(--wwm-ink-soft); } .page-variant .p-hs-formcard .c-form__status:empty { display: none; } .page-variant .p-hs-formcard .c-form__status--error { color: var(--wwm-brand-500); } .page-variant .p-hs-formcard .c-form__error { margin-top: 6px; font-size: var(--wwm-fs-caption); line-height: 1.4; color: var(--wwm-brand-500); } .page-variant .p-hs-formcard .c-form__error:empty { display: none; } .page-variant .p-hs-promise { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 8px; row-gap: 32px; margin-top: 46px; padding-top: 46px; border-top: 1px solid rgba(255, 255, 255, 0.35); } .page-variant .p-hs-promise__item { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: start; } .page-variant .p-hs-promise__icon { grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--wwm-radius); background: var(--wwm-surface); color: var(--wwm-brand-500); } .page-variant .p-hs-promise__icon .material-symbols-rounded { font-size: 24px; } .page-variant .p-hs-promise__title { grid-column: 2; font-family: var(--wwm-font-sans); font-weight: 700; font-size: var(--wwm-fs-body); line-height: 22px; color: var(--wwm-ink-invert); } .page-variant .p-hs-promise__text { grid-column: 2; margin-top: 4px; font-family: var(--wwm-font-sans); font-size: var(--wwm-fs-body-sm); line-height: 21px; color: var(--wwm-ink-invert); } @media (max-width: 1199px) { .page-id-21748 { --hs-hero-media: 44%; --hs-hero-gap: 32px; } .page-variant .p-hs-kontakt__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } .page-variant .p-hs-formcard { padding: 28px 32px; } } @media (max-width: 900px) { .page-variant .p-hs-hero { padding-top: 160px; padding-bottom: 80px; } .page-variant .p-hs-hero__title { font-size: clamp(48px, 8vw, 84px); } .page-variant .p-hs-hero__grid { grid-template-columns: 1fr; gap: 40px; } .page-variant .p-hs-hero__lead { max-width: none; } .page-variant .p-hs-hero__media { min-height: 0; aspect-ratio: 592 / 322; } .page-variant .p-hs-bento { grid-template-columns: 1fr 1fr; grid-template-areas: "media contact" "media stat" "wissen plain"; } .page-variant .p-hs-steps { grid-template-columns: 1fr; } .page-variant .p-hs-step + .p-hs-step::before { top: calc(-1 * var(--hs-bento-gap) - 1px); left: 50%; width: 1px; height: var(--hs-bento-gap); border-top: 0; border-left: 1px dotted var(--wwm-line); } .page-variant .p-hs-step__art { padding-top: 32px; } .page-variant .p-hs-kontakt { padding-block: 80px; } .page-variant .p-hs-kontakt__grid { grid-template-columns: 1fr; gap: 48px; } .page-variant .p-hs-kontakt__lead { max-width: none; } .page-variant .p-hs-promise { grid-template-columns: 1fr; } } @media (max-width: 700px) { .page-variant .p-hs-head { gap: 16px; } .page-variant .p-hs-bento { grid-template-columns: 1fr; grid-template-areas: "stat" "contact" "media" "wissen" "plain"; } .page-variant .p-hs-bento__media { aspect-ratio: 368 / 250; } .page-variant .p-hs-card__deco { right: -110px; width: 260px; } .page-variant .p-hs-card__deco--corner { right: -80px; bottom: -80px; } } @media (max-width: 600px) { .page-variant .p-hs-hero { padding-top: 120px; padding-bottom: 0; } .page-variant .p-hs-hero__title { padding-inline: 12px; font-size: 46px; line-height: 48px; margin-bottom: 34px; } .page-variant .p-hs-hero__grid { gap: 32px; } .page-variant .p-hs-hero__copy { padding-inline: 12px; } .page-variant .p-hs-hero__lead { font-size: var(--wwm-fs-body); line-height: 24px; } .page-variant .p-hs-hero__actions { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 40px; } .page-variant .p-hs-usp { flex-direction: column; gap: 18px; margin-top: 36px; padding-top: 28px; } .page-variant .p-hs-hero__media { margin-bottom: 12px; } .page-variant .p-hs-nutzen__lead, .page-variant .p-hs-vertrauen__lead { padding-inline: 12px; text-align: center; margin-inline: auto; } .page-variant .p-hs-nutzen__lead { margin-bottom: 28px; } .page-variant .p-hs-vertrauen__lead { margin-bottom: 34px; } .page-variant .p-hs-nutzen .title--xl, .page-variant .p-hs-vertrauen .title--xl, .page-variant .p-hs-vorteile .title--xl { font-size: 42px; line-height: 1.1; } .page-variant .p-hs-head { gap: 12px; margin-bottom: 28px; } .page-variant .p-hs-bento { gap: 16px; } .page-variant .p-hs-card { padding: 24px; } .page-variant .p-hs-card__title { font-size: 26px; line-height: 32px; margin-bottom: 16px; } .page-variant .p-hs-card__body { max-width: none; } .page-variant .p-hs-bento__wissen { text-align: left; } .page-variant .p-hs-card__deco { top: auto; bottom: -40px; right: -60px; width: 220px; } .page-variant .p-hs-stat-card { min-height: 158px; } .page-variant .p-hs-stat-card__num { font-size: 44px; } .page-variant .p-hs-outline-card { min-height: 158px; } .page-variant .p-hs-outline-card__title { font-size: 28px; line-height: 34px; } .page-variant .p-hs-steps { gap: 16px; } .page-variant .p-hs-step { padding: 24px; } .page-variant .p-hs-step + .p-hs-step::before { top: -17px; left: 32px; height: 16px; } .page-variant .p-hs-step__num { font-size: 38px; } .page-variant .p-hs-step__total { font-size: 22px; } .page-variant .p-hs-step__title { margin-top: 22px; font-size: 24px; line-height: 30px; } .page-variant .p-hs-step__text { margin-top: 16px; } .page-variant .p-hs-step__art { padding-top: 24px; } .page-variant .p-hs-vorteile__cta { margin-top: 24px; } .page-variant .p-hs-kontakt { padding-block: 60px; } .page-variant .p-hs-kontakt__grid { gap: 32px; } .page-variant .p-hs-kontakt__copy { text-align: center; } .page-variant .p-hs-kontakt__head { padding-inline: 12px; } .page-variant .p-hs-kontakt .title--xl { font-size: 42px; line-height: 1.1; } .page-variant .p-hs-kontakt__subtitle { margin-top: 16px; font-size: 30px; } .page-variant .p-hs-kontakt__lead { margin-top: 24px; padding-inline: 12px; font-size: var(--wwm-fs-body-sm); } .page-variant .p-hs-contactlist { margin-top: 24px; padding-inline: 12px; text-align: left; } .page-variant .p-hs-formcard { padding: 24px; } .page-variant .p-hs-formcard .c-form { grid-template-columns: 1fr; } .page-variant .p-hs-formcard .c-form__submit { width: 100%; padding-inline: 24px; } .page-variant .p-hs-promise { margin-top: 32px; padding-top: 32px; padding-inline: 12px; row-gap: 24px; } } /* === ENDE HS (CSS) =========================================== */ /* HS QA-Runde 1 (30.08.): - surface-card-Token war nur im fwpg-Scope definiert — die Formularkarte stand transparent auf magenta; - mailto/tel-Links der Kontaktliste erbten die Theme-Linkfarbe (magenta auf magenta = unsichtbar); - CF7 vergibt keine form-Klasse — das Feldraster haengt jetzt an form.wpcf7-form; - Stat-Karte erbte die Theme-p-Farbe statt Weiss; - Kennzahlen-Labels brechen wie die Statik (max 210px); - Kontakt-Karten-Zeile brauchte 46ch statt 44 (Font-Metrik). */ .page-id-21748 { --wwm-surface-card: #FFFFFF; } .page-variant .p-hs-contactlist__text a { display: inline; color: inherit; } .page-variant .p-hs-contactlist__text a::after { content: none !important; } .page-variant .p-hs-stat-card__num, .page-variant .p-hs-stat-card__text { color: inherit; } .page-variant .p-hs-bento__contact .p-hs-card__body { max-width: 46ch; } .page-variant .p-hs-cstats .c-stats__label { max-width: 210px; } .page-variant .p-hs-formcard form.wpcf7-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 18px; } @media (max-width: 600px) { .page-variant .p-hs-formcard form.wpcf7-form { grid-template-columns: 1fr; } } /* Submit ist ein input — eigenstaendig gestylt (kein flex noetig). */ .page-variant .p-hs-formcard .c-form__submit { display: inline-block; background: var(--wwm-brand-500); color: var(--wwm-ink-invert); border: 0; border-radius: var(--wwm-radius-pill); font-family: var(--wwm-font-sans); font-weight: 700; font-size: var(--wwm-fs-body-sm); height: 50px; padding-inline: 46px; cursor: pointer; transition: background var(--wwm-dur) var(--wwm-ease); } .page-variant .p-hs-formcard .c-form__submit:hover { background: var(--wwm-brand-600); } /* ================================================================ HS ANGLEICHUNG 2 (Leon, 30.08.2026) ---------------------------------------------------------------- "Details, die auf fuer-wpg richtig sind, auch hier, wo es dasselbe Element ist": die HS-Statik war vor Leons fwpg-Review-Runden eingefroren. Design-PNGs beider Seiten abgeglichen (Zoom-Crops + Cap-Height-Messung, .work/hs/zoom-*.png / pair-*.png): Stat-Karte, Outline-Karte, Schrittkarten und die 3-Punkte-Zeile im Magenta- Band sind designidentisch -> fwpg-Endwerte uebernehmen. Bewusst NICHT angeglichen: Hero-USPs (HS zweizeilig mit Desc), Leads (eigene Design-Umbrueche), c-stats-Label-max-width 210, Zeilen-margin der Punkte-Zeile (Design-belegt 46) und die Sektions-Metriken der Statik. Punkte-Trennlinie: BEIDE Design-PNGs zeigen rgba(255,255,255,.75) (Pixel 244/200/217 auf #D32566) — die HS-Statik-.35 war zu schwach. Luecke Linie->Kacheln im Design 25px (live 46) -> 23 wie fwpg. Achtung Kaskade: globale Regeln hier stehen NACH den Port-@media-Bloecken und schlagen deren Mobil-Werte — alle betroffenen Mobil-Werte werden im eigenen @600-Block nachgezogen. ================================================================ */ /* ---- Stat-Karte ">10.000" (fwpg c-nutzen--brand) ---- */ .page-variant .p-hs-stat-card { gap: 0; } .page-variant .p-hs-stat-card__num { line-height: 1.1; } .page-variant .p-hs-stat-card__num .wwmwp-ico { font-size: 0.8em; } .page-variant .p-hs-stat-card__text { margin-top: 8px; font-weight: 600; } /* ---- Outline-Karte "Ohne Aufwand" (fwpg c-nutzen--outline) ---- */ .page-variant .p-hs-outline-card { gap: 0; padding: 0; border-width: 4px; } .page-variant .p-hs-outline-card__title { font-size: 40px; line-height: 1.2; } .page-variant .p-hs-outline-card__text { margin-top: 8px; color: var(--wwm-ink-muted); } /* ---- Vorteil-Karten 01/03 (fwpg c-step) ---- */ .page-variant .p-hs-step { padding-top: 32px; padding-bottom: 32px; } .page-variant .p-hs-step__num { font-weight: 600; font-size: 40px; line-height: 1; } .page-variant .p-hs-step__total { font-weight: 600; font-size: 20px; } .page-id-21748 .page-variant .p-hs-step__title { font-size: 24px !important; } .page-variant .p-hs-step__title { margin-top: 24px; font-weight: 600; line-height: 32px; } .page-variant .p-hs-step__text { margin-top: 16px; color: var(--wwm-ink-muted); } /* ---- 3-Punkte-Zeile im Magenta-Band (fwpg p-fwpg-cta__points) --- */ .page-variant .p-hs-promise { padding-top: 23px; border-top-color: rgba(255, 255, 255, 0.75); } .page-variant .p-hs-promise__title { font-family: var(--wwm-font-display); font-weight: 600; font-size: 20px; line-height: 1.2; } .page-variant .p-hs-promise__text { margin-top: 8px; line-height: 20px; color: rgba(255, 255, 255, 0.88); } .page-variant .p-hs-promise__icon .material-symbols-rounded { font-size: 30px; } /* ---- Mobil-Nachzieher (fwpg-Mobilwerte; s. Kaskaden-Hinweis) ---- */ @media (max-width: 600px) { .page-variant .p-hs-stat-card__num { font-size: 40px; } .page-variant .p-hs-outline-card { border-width: 3px; } .page-variant .p-hs-outline-card__title { font-size: 28px; } .page-variant .p-hs-step { padding: 24px 32px; } .page-variant .p-hs-step__num { font-size: 32px; } .page-variant .p-hs-step__total { font-size: 16px; } .page-id-21748 .page-variant .p-hs-step__title { font-size: 20px !important; } .page-variant .p-hs-step__title { margin-top: 16px; line-height: 28px; } .page-variant .p-hs-step__text { margin-top: 12px; } .page-variant .p-hs-promise { padding-top: 24px; row-gap: 32px; } .page-variant .p-hs-promise__title { font-size: 18px; } } /* ================================================================ EV — Events-Uebersicht (Archiv) + Event-Detailseite (Leon, 30.08.2026) ---------------------------------------------------------------- Port von assets/css/pages/events.css (Scope body.post-type-archive-events) und event.css (Scope body.single-events) — beide Ansichten haben keine page-id, deshalb Body-Klassen-Scope; das isoliert auch die bewusst leicht unterschiedlichen c-ctabox-Fassungen der beiden Statik-Dateien und die c-chip-Kollision mit den WWMWP-Fachbegriffen. Tokens: Scope des WWMWP-Blocks um beide Body-Klassen erweitert (2 Replaces beim Deploy). Neue Icon-Masken: calendar-today, schedule, devices, forum, chat, hourglass, local-activity, visibility, expand-more (offizielle Google-SVGs). Templates: archive-events.php + single-events.php (neu, Talents- Statik-Markup, ICS-Export von Marcel uebernommen). ================================================================ */ /* ---- neue Icon-Masken ---- */ .page-variant .wwmwp-ico--calendar-today { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .page-variant .wwmwp-ico--schedule { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .page-variant .wwmwp-ico--devices { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .page-variant .wwmwp-ico--forum { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .page-variant .wwmwp-ico--chat { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .page-variant .wwmwp-ico--hourglass { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .page-variant .wwmwp-ico--local-activity { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .page-variant .wwmwp-ico--visibility { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } .page-variant .wwmwp-ico--expand-more { -webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,"); } /* ---- Angleichungen (fwpg-Review-Stand, wie ueberall) ---- */ body.post-type-archive-events .page-variant .c-btn, body.single-events .page-variant .c-btn { font-weight: 700; } body.post-type-archive-events .page-variant .c-btn:has(.material-symbols-rounded), body.single-events .page-variant .c-btn:has(.material-symbols-rounded) { padding-right: 32px; } body.post-type-archive-events .page-variant .p-ev-hero__title-alt { font-weight: 600; } /* ---- Theme-Gegenregeln ---- */ /* h3-clamp-Counter mit den Statik-Werten je Breakpoint. */ body.post-type-archive-events .page-variant .c-event__title { font-size: 32px !important; } body.post-type-archive-events .page-variant .c-event--next .c-event__title { font-size: 40px !important; } @media (max-width: 1199px) { body.post-type-archive-events .page-variant .c-event--next .c-event__title { font-size: 34px !important; } } @media (max-width: 900px) { body.post-type-archive-events .page-variant .c-event__title, body.post-type-archive-events .page-variant .c-event--next .c-event__title { font-size: 28px !important; } } @media (max-width: 600px) { body.post-type-archive-events .page-variant .p-ev-list .c-event .c-event__title, body.post-type-archive-events .page-variant .p-ev-list .c-event--next .c-event__title { font-size: 24px !important; } } body.single-events .page-variant .p-evd-speaker__name { font-size: 24px !important; } body.single-events .page-variant .p-evd-panel__title { font-size: 40px !important; } @media (max-width: 1323px) { body.single-events .page-variant .p-evd-panel__title { font-size: 32px !important; } } @media (max-width: 600px) { body.single-events .page-variant .p-evd-speaker__name { font-size: 22px !important; } body.single-events .page-variant .p-evd-panel__title { font-size: 26px !important; } } /* Theme: p width 76vw unter 604px; a display:block + ::after-Pfeil. */ @media (max-width: 603px) { body.post-type-archive-events .page-variant p, body.single-events .page-variant p { width: auto; } } body.post-type-archive-events .page-variant p a, body.single-events .page-variant p a { display: inline; } body.post-type-archive-events .page-variant p a::after, body.single-events .page-variant p a::after { content: none !important; } /* [class*="cta"]-Falle: p-ev-cta/p-evd-cta/c-ctabox matchen das Theme-Pattern (font-weight 600 auf alles) — Texte zuruecksetzen, die Statik-eigenen Gewichte kommen aus dem Port darunter. */ body.post-type-archive-events .page-variant :is(.p-ev-cta, .c-ctabox) p, body.single-events .page-variant :is(.p-evd-cta, .c-ctabox) p { font-weight: 400; } /* Theme-p-Regeln (Farbe --c-dgrey, lh 24) schlagen Vererbung — die Container-Styles der Statik explizit an die Absaetze durchreichen. */ body.single-events .page-variant :is(.p-evd-why__copy, .p-evd-cv__copy) p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; } /* ---- WP-Ergaenzungen ohne Statik-Vorbild ---- */ /* Speaker-Portraet (Statik kennt nur den Initialen-Kreis). */ body.single-events .page-variant .p-evd-speaker__photo { display: block; width: 160px; height: 160px; margin: 0 0 29px; border-radius: 50%; object-fit: cover; } @media (max-width: 600px) { body.single-events .page-variant .p-evd-speaker__photo { width: 148px; height: 148px; margin-bottom: 24px; } } /* Ohne gepflegten Anmelde-Link: stille Pille statt Button. */ body.single-events .page-variant .p-evd-banner__soon { cursor: default; pointer-events: none; } /* ---- Gemeinteil (components.css): c-subscribe + CTA-Kasten ---- */ :is(body.post-type-archive-events, body.single-events, body.page-id-21527) .page-variant .c-subscribe { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 750px; height: 66px; padding: 4px 4px 4px 24px; border: 1px solid var(--wwm-line); border-radius: var(--wwm-radius-pill); background: var(--wwm-surface); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06); transition: border-color var(--wwm-dur) var(--wwm-ease), box-shadow var(--wwm-dur) var(--wwm-ease); } :is(body.post-type-archive-events, body.single-events, body.page-id-21527) .page-variant .c-subscribe:focus-within { border-color: var(--wwm-brand-500); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(211, 37, 102, 0.12); } :is(body.post-type-archive-events, body.single-events, body.page-id-21527) .page-variant .c-subscribe__icon { flex: none; font-size: 24px; color: var(--wwm-ink-soft); transition: color var(--wwm-dur) var(--wwm-ease); } :is(body.post-type-archive-events, body.single-events, body.page-id-21527) .page-variant .c-subscribe:focus-within .c-subscribe__icon { color: var(--wwm-brand-500); } :is(body.post-type-archive-events, body.single-events, body.page-id-21527) .page-variant .c-subscribe__input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-family: var(--wwm-font-sans); font-size: var(--wwm-fs-body); color: var(--wwm-ink-soft); } :is(body.post-type-archive-events, body.single-events, body.page-id-21527) .page-variant .c-subscribe__input::placeholder { color: #929292; opacity: 1; } :is(body.post-type-archive-events, body.single-events, body.page-id-21527) .page-variant .c-subscribe__btn { height: 100%; padding-inline: 40px; font-size: 20px; font-weight: 700; } :is(body.post-type-archive-events, body.single-events, body.page-id-21527) .page-variant .c-subscribe__status { margin-bottom: 12px; max-width: 750px; font-size: var(--wwm-fs-body-sm); line-height: 1.4; color: var(--wwm-ink-soft); } :is(body.post-type-archive-events, body.single-events, body.page-id-21527) .page-variant .c-subscribe__status:empty { display: none; } :is(body.post-type-archive-events, body.single-events, body.page-id-21527) .page-variant .c-subscribe__status--error { color: var(--wwm-brand-500); font-weight: 600; } :is(body.post-type-archive-events, body.single-events) .page-variant .c-ctabox__actions .c-btn { padding-right: 24px; } :is(body.post-type-archive-events, body.single-events) .page-variant .c-ctabox--tint::after { content: ""; position: absolute; right: -46px; bottom: -74px; width: 420px; height: 332px; background-color: var(--wwm-surface); -webkit-mask: url("data:image/svg+xml,%0A%20%20%0A%20%20%0A") center / contain no-repeat; mask: url("data:image/svg+xml,%0A%20%20%0A%20%20%0A") center / contain no-repeat; pointer-events: none; } :is(body.post-type-archive-events, body.single-events) .page-variant .c-ctabox--tint>* { position: relative; z-index: 1; } :is(body.post-type-archive-events, body.single-events) .page-variant .c-ctabox__form.c-subscribe--inline { height: auto; max-width: none; margin-top: auto; padding: 0; gap: 8px; border: 0; border-radius: 0; background: none; box-shadow: none; } :is(body.post-type-archive-events, body.single-events) .page-variant .c-ctabox__form.c-subscribe--inline:focus-within { box-shadow: none; } :is(body.post-type-archive-events, body.single-events) .page-variant .c-ctabox__input::placeholder { color: var(--wwm-ink-muted); opacity: 1; } :is(body.post-type-archive-events, body.single-events) .page-variant .c-ctabox__input:focus { outline: 0; border-color: var(--wwm-brand-500); } :is(body.post-type-archive-events, body.single-events) .page-variant .c-ctabox__input:focus-visible { box-shadow: 0 0 0 3px rgba(211, 37, 102, 0.12); } :is(body.post-type-archive-events, body.single-events) .page-variant .c-ctabox__submit { flex: none; min-height: 44px; padding-inline: 28px; } :is(body.post-type-archive-events, body.single-events) .page-variant .c-ctabox__status { margin: 12px 0 0; max-width: none; } :is(body.post-type-archive-events, body.single-events) .page-variant .c-ctabox__status:empty { display: none; } /* ---- Seiten-CSS: Port events.css (Scope Archiv) ---- */ body.post-type-archive-events { --ev-hero-tint: #F7F9FC; --ev-gap: 32px; --ev-media-ratio: 418 / 243; --ev-next-overlap: 30px; --ev-card-radius: 16px; --ev-cta-tint: #E7F5FC; } body.post-type-archive-events .page-variant .p-ev-hero { background: linear-gradient(180deg, var(--wwm-surface) 0%, var(--ev-hero-tint) 100%); padding-top: 200px; padding-bottom: 56px; } body.post-type-archive-events .page-variant .p-ev-hero__title { font-family: var(--wwm-font-display); font-weight: 700; font-size: var(--wwm-fs-display-xl); line-height: 1.09; letter-spacing: -0.01em; color: var(--wwm-ink); margin: 0; } body.post-type-archive-events .page-variant .p-ev-hero__title-alt { color: var(--wwm-ink-muted); font-style: italic; } body.post-type-archive-events .page-variant .p-ev-hero__lead { font-family: var(--wwm-font-sans); font-weight: 400; font-size: 24px; line-height: 32px; color: var(--wwm-ink-soft); max-width: 700px; margin: 32px 0 0; } body.post-type-archive-events .page-variant .p-ev-usp { display: flex; flex-wrap: wrap; gap: 8px 56px; margin: 29px 0 0; padding: 0; list-style: none; } body.post-type-archive-events .page-variant .p-ev-usp__item { display: flex; align-items: center; gap: 10px; font-family: var(--wwm-font-sans); font-size: 17px; line-height: 24px; color: var(--wwm-ink-muted); } body.post-type-archive-events .page-variant .p-ev-usp__icon { flex: none; width: 18px; height: 18px; font-size: 18px; color: var(--wwm-brand-500); } body.post-type-archive-events .page-variant .p-ev-usp__title { font-weight: 700; } body.post-type-archive-events .page-variant .p-ev-usp__desc { font-weight: 400; } body.post-type-archive-events .page-variant .p-ev-usp__dash { font-weight: 400; } body.post-type-archive-events .page-variant .p-ev-section { padding-top: 58px; padding-bottom: 0; background: var(--wwm-surface); } body.post-type-archive-events .page-variant .p-ev-head { margin-bottom: 26px; gap: 64px; } body.post-type-archive-events .page-variant .p-ev-head { align-items: baseline; } body.post-type-archive-events .page-variant .p-ev-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; } body.post-type-archive-events .page-variant .p-ev-filters__group { display: flex; align-items: center; gap: 12px; } body.post-type-archive-events .page-variant .p-ev-filters__label { font-family: var(--wwm-font-sans); font-weight: 700; font-size: 17px; line-height: 1; color: var(--wwm-ink); } body.post-type-archive-events .page-variant .c-chip { height: auto; min-height: 40px; } body.post-type-archive-events .page-variant .p-ev-list { display: flex; flex-direction: column; gap: var(--ev-gap); margin-top: 24px; } body.post-type-archive-events .page-variant .p-ev-empty { margin: 24px 0 0; font-family: var(--wwm-font-sans); font-size: 19px; line-height: 1.55; color: var(--wwm-ink-muted); max-width: 62ch; } body.post-type-archive-events .page-variant .p-ev-more { display: flex; justify-content: center; margin-top: 30px; } body.post-type-archive-events .page-variant .p-ev-more__btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; background: none; cursor: pointer; font-family: var(--wwm-font-sans); font-weight: 600; font-size: 17px; line-height: 1; color: var(--wwm-brand-500); } body.post-type-archive-events .page-variant .p-ev-more__btn .material-symbols-rounded { font-size: 18px; transition: transform var(--wwm-dur) var(--wwm-ease); } body.post-type-archive-events .page-variant .p-ev-more__btn:hover .material-symbols-rounded { transform: translateY(2px); } body.post-type-archive-events .page-variant .p-ev-more[hidden] { display: none; } body.post-type-archive-events .page-variant .c-event { display: grid; grid-template-columns: minmax(0, 418fr) minmax(0, 810fr); gap: var(--ev-gap); align-items: stretch; background: transparent; } body.post-type-archive-events .page-variant .c-event[hidden] { display: none; } body.post-type-archive-events .page-variant .c-event__media { position: relative; aspect-ratio: var(--ev-media-ratio); width: 100%; min-height: 100%; border-radius: var(--wwm-radius); overflow: hidden; background: var(--wwm-surface-alt); display: block; } body.post-type-archive-events .page-variant .c-event__media-link { display: block; width: 100%; height: 100%; } body.post-type-archive-events .page-variant .c-event__media img { width: 100%; height: 100%; object-fit: cover; display: block; } body.post-type-archive-events .page-variant .c-event__media .c-ai-label { width: auto; height: 20px; } body.post-type-archive-events .page-variant .c-event__panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; padding: 24px 32px; background: var(--wwm-surface); border: 1px solid var(--wwm-line); border-radius: var(--ev-card-radius); } body.post-type-archive-events .page-variant .c-event__flag { margin: 0 0 10px; font-family: var(--wwm-font-sans); font-weight: 600; font-size: 17px; line-height: 1; color: var(--wwm-brand-500); } body.post-type-archive-events .page-variant .c-event__flag--past { color: var(--wwm-ink-faint); } body.post-type-archive-events .page-variant .c-event--next .c-event__flag { position: absolute; top: 16px; right: 24px; margin: 0; } body.post-type-archive-events .page-variant .c-event__body { min-width: 0; display: flex; flex-direction: column; justify-content: center; } body.post-type-archive-events .page-variant .c-event__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } body.post-type-archive-events .page-variant .c-event__tag { display: inline-flex; align-items: center; padding: 5px 16px; background: var(--wwm-surface); border: 1px solid var(--wwm-line); border-radius: var(--wwm-radius-pill); font-family: var(--wwm-font-sans); font-weight: 400; font-size: 17px; line-height: 1; color: var(--wwm-ink-soft); } body.post-type-archive-events .page-variant .c-event__title { font-family: var(--wwm-font-display); font-weight: 600; font-size: 32px; line-height: 38px; color: var(--wwm-ink); margin: 0 0 16px; max-width: 440px; } body.post-type-archive-events .page-variant .c-event__link { color: inherit; text-decoration: none; transition: color var(--wwm-dur) var(--wwm-ease); } body.post-type-archive-events .page-variant .c-event__link:hover { color: var(--wwm-brand-500); } body.post-type-archive-events .page-variant .c-event__desc { font-family: var(--wwm-font-sans); font-weight: 400; font-size: 17px; line-height: 23px; color: var(--wwm-ink-muted); margin: 0; max-width: 478px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.post-type-archive-events .page-variant .c-event__aside { padding: 12px 0 12px 32px; border-left: 1px solid var(--wwm-line); display: flex; flex-direction: column; justify-content: space-between; gap: 12px; } body.post-type-archive-events .page-variant .c-event__when { display: flex; flex-direction: column; gap: 12px; margin: 0; font-family: var(--wwm-font-sans); font-weight: 600; font-size: 17px; line-height: 20px; color: var(--wwm-ink); } body.post-type-archive-events .page-variant .c-event__when-row { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; } body.post-type-archive-events .page-variant .c-event__when-row .material-symbols-rounded { font-size: 20px; color: var(--wwm-brand-500); width: 20px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } body.post-type-archive-events .page-variant .c-event__actions { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; } body.post-type-archive-events .page-variant .c-event__cta { width: 100%; max-width: 194px; white-space: nowrap; } body.post-type-archive-events .page-variant .c-event__cta--mobile { display: none; } body.post-type-archive-events .page-variant .c-event--next { --ev-media-ratio: 627 / 474; grid-template-columns: minmax(0, 597fr) minmax(0, 663fr); gap: 0; margin-bottom: 16px; } body.post-type-archive-events .page-variant .c-event--next .c-event__media { grid-area: 1 / 1 / 2 / 2; width: calc(100% + var(--ev-next-overlap)); z-index: 1; } body.post-type-archive-events .page-variant .c-event--next .c-event__panel { grid-area: 1 / 2 / 2 / 3; grid-template-columns: minmax(0, 1fr); align-content: center; padding: 24px 24px 24px 94px; } body.post-type-archive-events .page-variant .c-event--next .c-event__title { font-size: 40px; line-height: 54px; margin-bottom: 24px; max-width: 460px; } body.post-type-archive-events .page-variant .c-event--next .c-event__desc { -webkit-line-clamp: 3; max-width: 400px; } body.post-type-archive-events .page-variant .c-event--next .c-event__aside { padding: 0; border-left: 0; gap: 24px; margin-top: 24px; } body.post-type-archive-events .page-variant .c-event--next .c-event__when { flex-direction: row; flex-wrap: wrap; gap: 32px; } body.post-type-archive-events .page-variant .c-event--next .c-event__cta { max-width: none; width: auto; } body.post-type-archive-events .page-variant .c-event--past .c-event__media img { filter: saturate(0.75); } body.post-type-archive-events .page-variant .p-ev-cta { padding-top: 127px; padding-bottom: 60px; background: var(--wwm-surface); } body.post-type-archive-events .page-variant .p-ev-cta__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ev-gap); align-items: stretch; } body.post-type-archive-events .page-variant .c-ctabox { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 39px 48px; border: 1px solid var(--wwm-line); border-radius: var(--wwm-radius-lg); background: var(--wwm-surface); } body.post-type-archive-events .page-variant .c-ctabox__title { font-family: var(--wwm-font-display); font-weight: 700; font-size: 48px; line-height: 56px; color: var(--wwm-ink); margin: 0; } body.post-type-archive-events .page-variant .c-ctabox__text { font-family: var(--wwm-font-sans); font-weight: 400; font-size: 24px; line-height: 32px; color: var(--wwm-ink-soft); max-width: 420px; margin: 31px 0 48px; } body.post-type-archive-events .page-variant .c-ctabox__actions { margin: 48px 0 0 0; margin-top: auto; display: flex; flex-wrap: wrap; gap: 16px; } body.post-type-archive-events .page-variant .c-ctabox--tint { background: var(--ev-cta-tint); border-color: transparent; } body.post-type-archive-events .page-variant .c-ctabox__input { flex: 0 1 300px; height: 44px; padding: 0 24px; border: 1px solid var(--wwm-line); border-radius: var(--wwm-radius-pill); background: var(--wwm-surface); font-size: 17px; color: var(--wwm-ink-soft); transition: border-color var(--wwm-dur) var(--wwm-ease); } @media (max-width: 1323px) { body.post-type-archive-events .page-variant .p-ev-hero__title { font-size: min(var(--wwm-fs-display-xl), calc(10vw - 8px)); } } @media (max-width: 1199px) { body.post-type-archive-events .page-variant .c-event--next .c-event__panel { padding-left: 72px; } body.post-type-archive-events .page-variant .c-event--next .c-event__title { font-size: 34px; line-height: 44px; } body.post-type-archive-events .page-variant .c-ctabox { padding: 36px 40px; } body.post-type-archive-events .page-variant .c-ctabox__title { font-size: 40px; line-height: 48px; } body.post-type-archive-events .page-variant .c-ctabox__text { font-size: 20px; line-height: 28px; margin-top: 24px; } } @media (max-width: 900px) { body.post-type-archive-events .page-variant .p-ev-hero { padding-top: 160px; } body.post-type-archive-events .page-variant .p-ev-hero__title { font-size: clamp(56px, 9vw, 84px); } body.post-type-archive-events .page-variant .p-ev-hero__lead { font-size: 20px; line-height: 28px; } body.post-type-archive-events .page-variant .p-ev-usp { gap: 12px 32px; } body.post-type-archive-events .page-variant .c-event, body.post-type-archive-events .page-variant .c-event--next { position: relative; grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: 0; overflow: hidden; border: 1px solid var(--wwm-line); border-radius: var(--ev-card-radius); } body.post-type-archive-events .page-variant .c-event--next { border-color: var(--wwm-brand-500); } body.post-type-archive-events .page-variant .c-event__media, body.post-type-archive-events .page-variant .c-event--next .c-event__media { grid-area: auto; width: 100%; aspect-ratio: 16 / 9; min-height: 0; border-radius: 0; } body.post-type-archive-events .page-variant .c-event__panel, body.post-type-archive-events .page-variant .c-event--next .c-event__panel { grid-area: auto; position: static; grid-template-columns: minmax(0, 1fr); padding: 24px; gap: 20px; border: 0; border-radius: 0; background: none; } body.post-type-archive-events .page-variant .c-event__flag, body.post-type-archive-events .page-variant .c-event--next .c-event__flag { position: absolute; top: 12px; left: 12px; right: auto; z-index: 2; display: inline-flex; align-items: center; height: 28px; padding: 0 16px; border-radius: var(--wwm-radius-pill); background: var(--wwm-brand-500); color: var(--wwm-ink-invert); font-size: 15px; } body.post-type-archive-events .page-variant .c-event__flag--past { background: var(--wwm-ink-soft); color: var(--wwm-ink-invert); } body.post-type-archive-events .page-variant .c-event__title, body.post-type-archive-events .page-variant .c-event--next .c-event__title { font-size: 28px; line-height: 34px; max-width: none; } body.post-type-archive-events .page-variant .c-event__desc { max-width: none; } body.post-type-archive-events .page-variant .c-event__aside, body.post-type-archive-events .page-variant .c-event--next .c-event__aside { padding: 0; margin-top: 4px; border-left: 0; gap: 20px; } body.post-type-archive-events .page-variant .c-event__when, body.post-type-archive-events .page-variant .c-event--next .c-event__when { flex-direction: row; flex-wrap: wrap; gap: 32px; } body.post-type-archive-events .page-variant .c-event__actions { flex-direction: column; align-items: stretch; gap: 12px; } body.post-type-archive-events .page-variant .c-event__cta { max-width: none; width: 100%; } body.post-type-archive-events .page-variant .c-event__cta--mobile { display: inline-flex; } body.post-type-archive-events .page-variant .p-ev-cta__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } body.post-type-archive-events .page-variant .p-ev-cta { padding-top: 96px; } } @media (max-width: 760px) { body.post-type-archive-events .page-variant .p-ev-filters { flex-direction: column; align-items: stretch; gap: 16px; } body.post-type-archive-events .page-variant .p-ev-filters__group { flex-direction: column; align-items: flex-start; gap: 8px; } } @media (max-width: 600px) { body.post-type-archive-events .page-variant .p-ev-hero { padding-top: 140px; padding-bottom: 32px; } body.post-type-archive-events .page-variant .p-ev-hero > .container { padding-inline: 24px; } body.post-type-archive-events .page-variant .p-ev-hero__title { font-size: 40px; line-height: 48px; } body.post-type-archive-events .page-variant .p-ev-hero__lead { font-size: 17px; line-height: 23px; margin-top: 24px; } body.post-type-archive-events .page-variant .p-ev-usp { flex-direction: column; gap: 24px; margin-top: 24px; } body.post-type-archive-events .page-variant .p-ev-usp__item { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; row-gap: 0; align-items: start; font-size: 17px; line-height: 23px; } body.post-type-archive-events .page-variant .p-ev-usp__icon { grid-column: 1; grid-row: 1; margin-top: 2px; } body.post-type-archive-events .page-variant .p-ev-usp__title { grid-column: 2; grid-row: 1; } body.post-type-archive-events .page-variant .p-ev-usp__desc { grid-column: 2; grid-row: 2; } body.post-type-archive-events .page-variant .p-ev-section { padding-top: 56px; } body.post-type-archive-events .page-variant .p-ev-section .p-ev-head { margin-bottom: 24px; } body.post-type-archive-events .page-variant .p-ev-filters { gap: 16px; } body.post-type-archive-events .page-variant .p-ev-filters__label { font-size: 16px; } body.post-type-archive-events .page-variant .p-ev-filters .c-chips { gap: 10px; } body.post-type-archive-events .page-variant .p-ev-filters .c-chips .c-chip { min-height: 36px; padding: 0 24px; font-size: 16px; } body.post-type-archive-events .page-variant .p-ev-list { gap: 24px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--wwm-line); } body.post-type-archive-events .page-variant .p-ev-section .p-ev-list .c-event { position: relative; display: block; flex: 0 0 auto; width: auto; overflow: hidden; border: 1px solid var(--wwm-line); border-radius: var(--ev-card-radius); margin-bottom: 0; } body.post-type-archive-events .page-variant .p-ev-section .p-ev-list .c-event[hidden] { display: none; } body.post-type-archive-events .page-variant .p-ev-section .p-ev-list .c-event--next { margin-bottom: 8px; } body.post-type-archive-events .page-variant .p-ev-list .c-event .c-event__media { display: block; position: relative; width: 100%; aspect-ratio: 369 / 212; min-height: 0; border-radius: 0; } body.post-type-archive-events .page-variant .p-ev-list .c-event--next .c-event__media { aspect-ratio: 369 / 243; } body.post-type-archive-events .page-variant .p-ev-list .c-event .c-event__panel { display: block; padding: 24px 24px 20px; border: 0; border-radius: 0; background: none; } body.post-type-archive-events .page-variant .p-ev-list .c-event .c-event__tags { margin-bottom: 8px; } body.post-type-archive-events .page-variant .p-ev-list .c-event .c-event__tag { margin-bottom: 0; font-size: 15px; padding: 5px 14px; } body.post-type-archive-events .page-variant .p-ev-list .c-event .c-event__title, body.post-type-archive-events .page-variant .p-ev-list .c-event--next .c-event__title { font-size: 24px; line-height: 30px; margin-bottom: 12px; max-width: 285px; } body.post-type-archive-events .page-variant .p-ev-list .c-event .c-event__desc { font-size: 17px; line-height: 23px; -webkit-line-clamp: 4; } body.post-type-archive-events .page-variant .p-ev-list .c-event .c-event__aside { display: flex; flex-direction: column; padding: 0; margin-top: 22px; border: 0; gap: 24px; } body.post-type-archive-events .page-variant .p-ev-list .c-event .c-event__aside::before { content: none; } body.post-type-archive-events .page-variant .p-ev-list .c-event .c-event__when { flex-direction: row; flex-wrap: wrap; gap: 24px; font-size: 17px; } body.post-type-archive-events .page-variant .p-ev-list .c-event .c-event__when-row .material-symbols-rounded { font-size: 20px; } body.post-type-archive-events .page-variant .p-ev-more { margin-top: 28px; } body.post-type-archive-events .page-variant .p-ev-cta { padding-top: 60px; padding-bottom: 60px; } body.post-type-archive-events .page-variant .p-ev-cta__grid { gap: 24px; } body.post-type-archive-events .page-variant .c-ctabox { padding: 24px; border-radius: var(--wwm-radius-md); } body.post-type-archive-events .page-variant .c-ctabox__title { font-size: 32px; line-height: 40px; } body.post-type-archive-events .page-variant .c-ctabox__text { font-size: 20px; line-height: 24px; max-width: 300px; margin: 24px 0 0; } body.post-type-archive-events .page-variant .c-ctabox__form.c-subscribe--inline { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 24px; } body.post-type-archive-events .page-variant .c-ctabox__input { flex: none; width: 100%; } body.post-type-archive-events .page-variant .c-ctabox__submit { align-self: flex-start; } body.post-type-archive-events .page-variant .c-ctabox__actions { margin-top: 34px; } body.post-type-archive-events .page-variant .c-ctabox--tint::after { right: -60px; bottom: -90px; width: 260px; height: 260px; } } /* ---- Seiten-CSS: Port event.css (Scope Single) ---- */ body.single-events { --evd-hero-tint: #F7F9FC; --evd-hero-gap: 100px; --evd-radius: 16px; --evd-card-gap: 24px; --evd-banner-pad: 64px; --evd-cta-tint: #E7F5FC; } body.single-events .page-variant .p-evd-hero { background: linear-gradient(180deg, var(--wwm-surface) 0%, var(--evd-hero-tint) 100%); padding-top: 143px; padding-bottom: 120px; } body.single-events .page-variant .p-evd-back { margin: 0 0 28px; } body.single-events .page-variant .p-evd-back__link { display: inline-flex; align-items: center; gap: 4px; font-family: var(--wwm-font-sans); font-weight: 600; font-size: var(--wwm-fs-body); line-height: 24px; color: var(--wwm-ink-muted); transition: color var(--wwm-dur) var(--wwm-ease); } body.single-events .page-variant .p-evd-back__link .material-symbols-rounded { font-size: 20px; } body.single-events .page-variant .p-evd-back__link:hover { color: var(--wwm-brand-500); } body.single-events .page-variant .p-evd-hero__title { font-family: var(--wwm-font-display); font-weight: 700; font-size: var(--wwm-fs-display-xl); line-height: 1.09; letter-spacing: -0.005em; color: var(--wwm-ink); margin: 0; } body.single-events .page-variant .p-evd-hero__grid { display: grid; grid-template-columns: minmax(0, 600fr) minmax(0, 740fr); column-gap: var(--evd-hero-gap); align-items: start; margin-top: 31px; } body.single-events .page-variant .p-evd-hero__lead { font-family: var(--wwm-font-sans); font-weight: 400; font-size: 24px; line-height: 32px; color: var(--wwm-ink-soft); margin: 0; } body.single-events .page-variant .p-evd-facts { display: flex; flex-wrap: wrap; gap: 16px 12px; margin: 32px 0 0; padding: 0; list-style: none; } body.single-events .page-variant .p-evd-fact { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 16px; border: 1px solid var(--wwm-line); border-radius: var(--wwm-radius-pill); background: var(--wwm-surface); font-family: var(--wwm-font-sans); font-weight: 400; font-size: var(--wwm-fs-body); line-height: 1; color: var(--wwm-ink-soft); white-space: nowrap; } body.single-events .page-variant .p-evd-fact__icon { flex: none; width: 18px; height: 18px; font-size: 18px; color: var(--wwm-brand-500); } body.single-events .page-variant .p-evd-hero__actions { display: flex; flex-wrap: wrap; gap: 16px 24px; margin: 24px 0 0; padding-top: 48px; border-top: 1px solid var(--wwm-line); } body.single-events .page-variant .p-evd-hero__media { position: relative; margin: 0; aspect-ratio: 740 / 329; border-radius: var(--evd-radius); overflow: hidden; background: var(--wwm-surface-alt); } body.single-events .page-variant .p-evd-hero__media img:not(.c-ai-label) { width: 100%; height: 100%; object-fit: cover; } body.single-events .page-variant .p-evd-head { margin-bottom: 28px; } body.single-events .page-variant .p-evd-head .p-section-head__title { letter-spacing: -0.005em; } body.single-events .page-variant .p-evd-experts { padding-top: 118px; background: var(--wwm-surface); } body.single-events .page-variant .p-evd-speakers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--evd-card-gap); margin: 0; padding: 0; list-style: none; } body.single-events .page-variant .p-evd-speaker { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--wwm-line); border-radius: var(--evd-radius); background: var(--wwm-surface); overflow: hidden; } body.single-events .page-variant .p-evd-speaker__body { position: relative; flex: 1; padding: 20px 24px 30px; } body.single-events .page-variant .p-evd-speaker__avatar { display: flex; align-items: center; justify-content: center; width: 160px; height: 160px; margin: 0 0 29px; border-radius: 50%; background: var(--wwm-surface-alt); font-family: var(--wwm-font-display); font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: 0.02em; color: var(--wwm-ink-faint); } body.single-events .page-variant .p-evd-speaker__flag { position: absolute; top: 20px; right: 16px; display: inline-flex; align-items: center; min-height: 30px; margin: 0; padding: 0 16px; border: 1px solid var(--wwm-line); border-radius: var(--wwm-radius-pill); background: var(--wwm-surface); font-family: var(--wwm-font-sans); font-weight: 400; font-size: var(--wwm-fs-body); line-height: 1; color: var(--wwm-ink-soft); } body.single-events .page-variant .p-evd-speaker__name { font-family: var(--wwm-font-display); font-weight: 600; font-size: 24px; line-height: 30px; color: var(--wwm-ink); margin: 0 0 13px; overflow-wrap: break-word; hyphens: auto; } body.single-events .page-variant .p-evd-speaker__position { font-family: var(--wwm-font-sans); font-weight: 400; font-size: var(--wwm-fs-body); line-height: 22px; color: var(--wwm-ink-muted); margin: 0 0 10px; overflow-wrap: break-word; } body.single-events .page-variant .p-evd-speaker__company { font-family: var(--wwm-font-sans); font-weight: 600; font-size: var(--wwm-fs-body); line-height: 20px; color: var(--wwm-brand-500); margin: 0; overflow-wrap: break-word; } body.single-events .page-variant .p-evd-cv.c-faq__item, body.single-events .page-variant .p-evd-cv.c-faq__item:hover, body.single-events .page-variant .p-evd-cv.c-faq__item.is-open, body.single-events .page-variant .p-evd-cv.c-faq__item.is-open:hover { background: var(--wwm-surface-soft); border-radius: 0; margin: 0; border-top: 1px solid var(--wwm-line); } body.single-events .page-variant .p-evd-cv__trigger.c-faq__trigger { padding: 17px 24px; font-family: var(--wwm-font-display); font-weight: 600; font-size: var(--wwm-fs-body); line-height: 24px; } body.single-events .page-variant .p-evd-cv .c-faq__chevron { width: 30px; height: 30px; } body.single-events .page-variant .p-evd-cv .c-faq__chevron .material-symbols-rounded { font-size: 22px; } body.single-events .page-variant .p-evd-cv .c-faq__panel-inner { padding-inline: 24px; } body.single-events .page-variant .p-evd-cv__copy.c-faq__copy { font-size: var(--wwm-fs-body-sm); line-height: 22px; color: var(--wwm-ink-muted); } body.single-events .page-variant .p-evd-speakers__note { margin: 48px 0 0; font-family: var(--wwm-font-sans); font-weight: 400; font-size: var(--wwm-fs-body); line-height: 24px; color: var(--wwm-ink-muted); max-width: 720px; } body.single-events .page-variant .p-evd-what { padding-top: 239px; background: var(--wwm-surface); } body.single-events .page-variant .p-evd-what__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: stretch; } body.single-events .page-variant .p-evd-panel { min-width: 0; padding: 35px 96px 39px 48px; border: 1px solid var(--wwm-line); border-radius: var(--wwm-radius-lg); background: var(--wwm-surface); } body.single-events .page-variant .p-evd-panel__title { font-family: var(--wwm-font-display); font-weight: 600; font-size: 40px; line-height: 48px; letter-spacing: -0.005em; color: var(--wwm-ink); margin: 0 0 28px; overflow-wrap: break-word; } body.single-events .page-variant .p-evd-steps { margin: 0; padding: 0; list-style: none; } body.single-events .page-variant .p-evd-step { position: relative; min-width: 0; padding-left: 56px; padding-bottom: 44px; } body.single-events .page-variant .p-evd-step:last-child { padding-bottom: 0; } body.single-events .page-variant .p-evd-step:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 36px; bottom: 8px; width: 1px; background: var(--wwm-line); } body.single-events .page-variant .p-evd-step__num { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--wwm-brand-500); color: var(--wwm-ink-invert); font-family: var(--wwm-font-sans); font-weight: 600; font-size: var(--wwm-fs-body-sm); line-height: 1; } body.single-events .page-variant .p-evd-step__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 8px; } body.single-events .page-variant .p-evd-step__title { font-family: var(--wwm-font-display); font-weight: 600; font-size: 24px; line-height: 32px; color: var(--wwm-ink); } body.single-events .page-variant .p-evd-step__when { font-family: var(--wwm-font-sans); font-weight: 400; font-size: var(--wwm-fs-body); line-height: 1.2; color: var(--wwm-ink-faint); white-space: nowrap; } body.single-events .page-variant .p-evd-step__desc { margin: 0; font-family: var(--wwm-font-sans); font-weight: 400; font-size: var(--wwm-fs-body); line-height: 24px; color: var(--wwm-ink-muted); overflow-wrap: break-word; hyphens: auto; } body.single-events .page-variant .p-evd-gains { margin: 0; padding: 0; list-style: none; } body.single-events .page-variant .p-evd-gain { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; row-gap: 8px; align-items: start; margin-bottom: 44px; } body.single-events .page-variant .p-evd-gain:last-child { margin-bottom: 0; } body.single-events .page-variant .p-evd-gain__icon { grid-column: 1; grid-row: 1 / 3; align-self: start; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--wwm-radius); background: var(--wwm-brand-50); color: var(--wwm-brand-500); } body.single-events .page-variant .p-evd-gain__icon .material-symbols-rounded { font-size: 24px; } body.single-events .page-variant .p-evd-gain__title { grid-column: 2; grid-row: 1; font-family: var(--wwm-font-display); font-weight: 600; font-size: 24px; line-height: 32px; color: var(--wwm-ink); margin: 0; overflow-wrap: break-word; hyphens: auto; } body.single-events .page-variant .p-evd-gain__desc { grid-column: 2; grid-row: 2; margin: 0; font-family: var(--wwm-font-sans); font-weight: 400; font-size: var(--wwm-fs-body); line-height: 24px; color: var(--wwm-ink-muted); overflow-wrap: break-word; } body.single-events .page-variant .p-evd-what__note { margin: 48px 0 0; font-family: var(--wwm-font-sans); font-weight: 400; font-size: var(--wwm-fs-body); line-height: 24px; color: var(--wwm-ink-muted); max-width: 700px; } body.single-events .page-variant .p-evd-signup { padding-top: 175px; background: var(--wwm-surface); scroll-margin-top: 120px; } body.single-events .page-variant .p-evd-banner { position: relative; padding: 48px var(--evd-banner-pad); border-radius: var(--wwm-radius-lg); background: var(--wwm-brand-500); color: var(--wwm-ink-invert); --focus-ring: var(--wwm-ink-invert); } body.single-events .page-variant .p-evd-banner__badge { display: inline-flex; align-items: center; gap: 8px; min-height: 35px; margin: 0; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: var(--wwm-radius-pill); font-family: var(--wwm-font-sans); font-weight: 400; font-size: var(--wwm-fs-body-sm); line-height: 1; } body.single-events .page-variant .p-evd-banner__badge .p-evd-fact__icon { color: currentColor; } body.single-events .page-variant .p-evd-banner__mark { position: absolute; top: 48px; right: var(--evd-banner-pad); width: 160px; } body.single-events .page-variant .p-evd-banner__title { font-family: var(--wwm-font-display); font-weight: 700; font-size: 48px; line-height: 56px; letter-spacing: -0.005em; color: var(--wwm-ink-invert); margin: 16px 0 0; overflow-wrap: break-word; } body.single-events .page-variant .p-evd-banner__text { margin: 30px 0 0; font-family: var(--wwm-font-sans); font-weight: 600; font-size: 24px; line-height: 32px; max-width: 760px; } body.single-events .page-variant .p-evd-banner__facts { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 30px 0 0; padding: 0; list-style: none; font-family: var(--wwm-font-sans); font-weight: 400; font-size: var(--wwm-fs-body); line-height: 20px; } body.single-events .page-variant .p-evd-banner__facts li { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; } body.single-events .page-variant .p-evd-banner__facts .material-symbols-rounded { font-size: 18px; } body.single-events .page-variant .p-evd-banner__facts svg { width: 18px; height: 18px; flex: none; } body.single-events .page-variant .p-evd-banner__actions { display: flex; flex-wrap: wrap; gap: 16px; margin: 47px 0 0; } body.single-events .page-variant .p-evd-banner__actions .c-btn { font-weight: 600; } body.single-events .page-variant .p-evd-banner__ghost { background: transparent; color: var(--wwm-ink-invert); border-color: rgba(255, 255, 255, 0.7); } body.single-events .page-variant .p-evd-banner__ghost:hover { background: rgba(255, 255, 255, 0.14); } body.single-events .page-variant .p-evd-why { padding-top: 186px; background: var(--wwm-surface); } body.single-events .page-variant .p-evd-why__title { letter-spacing: -0.005em; margin: 0; } body.single-events .page-variant .p-evd-why__grid { display: grid; grid-template-columns: minmax(0, 510fr) minmax(0, 662fr); column-gap: 88px; align-items: start; margin-top: 56px; } body.single-events .page-variant .p-evd-why__subtitle { font-family: var(--wwm-font-display); font-weight: 700; font-size: 42px; line-height: 55px; letter-spacing: var(--wwm-tracking-tight); color: var(--wwm-ink); margin: 0; overflow-wrap: break-word; hyphens: auto; } body.single-events .page-variant .p-evd-why__copy { margin-top: 48px; font-family: var(--wwm-font-sans); font-weight: 400; font-size: var(--wwm-fs-body); line-height: 24px; color: var(--wwm-ink-muted); } body.single-events .page-variant .p-evd-why__copy p + p { margin-top: 24px; } body.single-events .page-variant .p-evd-why__actions { margin: 30px 0 0; } body.single-events .page-variant .p-evd-why__actions .c-btn { font-weight: 600; padding-right: 24px; } body.single-events .page-variant .p-evd-why__media { position: relative; margin: 0; aspect-ratio: 662 / 584; border-radius: var(--evd-radius); overflow: hidden; background: var(--wwm-surface-alt); } body.single-events .page-variant .p-evd-why__media img:not(.c-ai-label) { width: 100%; height: 100%; object-fit: cover; } body.single-events .page-variant .p-evd-cta { padding-top: 120px; padding-bottom: 60px; background: var(--wwm-surface); } body.single-events .page-variant .p-evd-cta__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: stretch; } body.single-events .page-variant .c-ctabox { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 44px 48px; border: 1px solid var(--wwm-line); border-radius: var(--wwm-radius-lg); background: var(--wwm-surface); } body.single-events .page-variant .c-ctabox__title { font-family: var(--wwm-font-display); font-weight: 700; font-size: 48px; line-height: 56px; letter-spacing: var(--wwm-tracking-tight); color: var(--wwm-ink); margin: 0; overflow-wrap: break-word; } body.single-events .page-variant .c-ctabox__text { font-family: var(--wwm-font-sans); font-weight: 400; font-size: 24px; line-height: 32px; color: var(--wwm-ink-soft); margin: 40px 0 0; } body.single-events .page-variant .c-ctabox__actions { margin: 48px 0 0; display: flex; flex-wrap: wrap; gap: 16px; } body.single-events .page-variant .c-ctabox--tint { background: var(--evd-cta-tint); border-color: transparent; } body.single-events .page-variant .c-ctabox__input { flex: 0 1 300px; height: 44px; padding: 0 24px; border: 1px solid var(--wwm-line); border-radius: var(--wwm-radius-pill); background: var(--wwm-surface); font-size: var(--wwm-fs-body); color: var(--wwm-ink-soft); transition: border-color var(--wwm-dur) var(--wwm-ease); } @media (max-width: 1323px) { body.single-events .page-variant .p-evd-hero { padding-top: 132px; padding-bottom: 96px; } body.single-events .page-variant .p-evd-hero__grid { column-gap: 56px; } body.single-events .page-variant .p-evd-hero__title { font-size: min(var(--wwm-fs-display-xl), calc(8.6vw - 6px)); } body.single-events .page-variant .p-evd-experts { padding-top: 112px; } body.single-events .page-variant .p-evd-what { padding-top: 104px; } body.single-events .page-variant .p-evd-signup { padding-top: 128px; } body.single-events .page-variant .p-evd-why { padding-top: 136px; } body.single-events .page-variant .p-evd-cta { padding-top: 96px; } body.single-events .page-variant .p-evd-panel { padding: 32px 32px 40px; } body.single-events .page-variant .p-evd-panel__title { font-size: 32px; line-height: 40px; } body.single-events .page-variant .p-evd-banner { padding: 40px 48px; } body.single-events .page-variant .p-evd-banner__mark { top: 40px; right: 48px; width: 132px; } body.single-events .page-variant .p-evd-banner__title { font-size: 40px; line-height: 48px; } body.single-events .page-variant .p-evd-banner__text { font-size: 20px; line-height: 28px; } body.single-events .page-variant .p-evd-why__grid { column-gap: 48px; } body.single-events .page-variant .p-evd-why__subtitle { font-size: 34px; line-height: 44px; } body.single-events .page-variant .c-ctabox { padding: 36px 40px; } body.single-events .page-variant .c-ctabox__title { font-size: 40px; line-height: 48px; } body.single-events .page-variant .c-ctabox__text { font-size: 20px; line-height: 28px; margin-top: 24px; } } @media (max-width: 1050px) { body.single-events .page-variant .p-evd-hero__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; } body.single-events .page-variant .p-evd-hero__media { aspect-ratio: 16 / 9; } body.single-events .page-variant .p-evd-speakers { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { body.single-events .page-variant .p-evd-hero { padding-top: 116px; } body.single-events .page-variant .p-evd-hero__title { font-size: clamp(48px, 8vw, 80px); } body.single-events .page-variant .p-evd-hero__lead { font-size: 20px; line-height: 28px; } body.single-events .page-variant .p-evd-hero__actions { padding-top: 32px; } body.single-events .page-variant .p-evd-what__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } body.single-events .page-variant .p-evd-why__grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; } body.single-events .page-variant .p-evd-why__media { aspect-ratio: 16 / 9; } body.single-events .page-variant .p-evd-cta__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } body.single-events .page-variant .c-ctabox__form.c-subscribe--inline { margin-top: 48px; } } @media (max-width: 760px) { body.single-events .page-variant .p-evd-speakers { grid-template-columns: minmax(0, 1fr); } body.single-events .page-variant .p-evd-banner { padding: 32px; } body.single-events .page-variant .p-evd-banner__mark { top: 32px; right: 32px; width: 116px; } } @media (max-width: 600px) { body.single-events .page-variant .p-evd-hero { padding-top: 104px; padding-bottom: 0; } body.single-events .page-variant .p-evd-hero > .container { padding-inline: 24px; } body.single-events .page-variant .p-evd-back { margin-bottom: 20px; } body.single-events .page-variant .p-evd-hero__title { font-size: 40px; line-height: 46px; } body.single-events .page-variant .p-evd-hero__title br { display: none; } body.single-events .page-variant .p-evd-hero__grid { margin-top: 24px; row-gap: 32px; } body.single-events .page-variant .p-evd-hero__lead { font-size: var(--wwm-fs-body); line-height: 24px; } body.single-events .page-variant .p-evd-facts { margin-top: 28px; gap: 12px 10px; } body.single-events .page-variant .p-evd-fact { font-size: var(--wwm-fs-body); padding: 0 14px; } body.single-events .page-variant .p-evd-hero__actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 20px; padding-top: 28px; } body.single-events .page-variant .p-evd-hero__actions .c-btn { width: 100%; } body.single-events .page-variant .p-evd-hero__media { aspect-ratio: 369 / 192; margin-bottom: 24px; } body.single-events .page-variant .p-evd-head { justify-items: center; text-align: center; gap: 4px; margin-bottom: 20px; } body.single-events .page-variant .p-evd-experts { padding-top: 72px; } body.single-events .page-variant .p-evd-speaker__body { padding: 20px 20px 24px; } body.single-events .page-variant .p-evd-speaker__avatar { width: 148px; height: 148px; margin-bottom: 24px; font-size: 36px; } body.single-events .page-variant .p-evd-speaker__name { font-size: 22px; line-height: 28px; } body.single-events .page-variant .p-evd-cv__trigger.c-faq__trigger { padding: 18px 20px; } body.single-events .page-variant .p-evd-cv .c-faq__panel-inner { padding-inline: 20px; } body.single-events .page-variant .p-evd-speakers__note { margin-top: 32px; } body.single-events .page-variant .p-evd-what { padding-top: 76px; } body.single-events .page-variant .p-evd-panel { padding: 24px 20px 28px; border-radius: var(--evd-radius); } body.single-events .page-variant .p-evd-panel__title { font-size: 26px; line-height: 34px; margin-bottom: 24px; } body.single-events .page-variant .p-evd-step { padding-left: 48px; padding-bottom: 32px; } body.single-events .page-variant .p-evd-step__title { font-size: 21px; line-height: 28px; } body.single-events .page-variant .p-evd-gain { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; margin-bottom: 32px; } body.single-events .page-variant .p-evd-gain__icon { width: 40px; height: 40px; } body.single-events .page-variant .p-evd-gain__icon .material-symbols-rounded { font-size: 20px; } body.single-events .page-variant .p-evd-gain__title { font-size: 21px; line-height: 28px; } body.single-events .page-variant .p-evd-what__note { margin-top: 28px; } body.single-events .page-variant .p-evd-signup { padding-top: 68px; } body.single-events .page-variant .p-evd-banner { padding: 24px 20px 28px; border-radius: var(--evd-radius); } body.single-events .page-variant .p-evd-banner__mark { position: static; display: block; width: 104px; margin-left: auto; } body.single-events .page-variant .p-evd-banner__badge { position: absolute; top: 24px; left: 20px; } body.single-events .page-variant .p-evd-banner__title { font-size: 34px; line-height: 42px; margin-top: 18px; } body.single-events .page-variant .p-evd-banner__text { font-size: 19px; line-height: 26px; margin-top: 18px; } body.single-events .page-variant .p-evd-banner__facts { gap: 10px 28px; margin-top: 22px; font-size: var(--wwm-fs-body); } body.single-events .page-variant .p-evd-banner__actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 26px; } body.single-events .page-variant .p-evd-banner__actions .c-btn { width: 100%; } body.single-events .page-variant .p-evd-why { padding-top: 76px; } body.single-events .page-variant .p-evd-why__title { text-align: center; font-size: clamp(36px, 11vw, 46px); } body.single-events .page-variant .p-evd-why__grid { margin-top: 12px; row-gap: 24px; } body.single-events .page-variant .p-evd-why__subtitle { text-align: center; font-size: 24px; line-height: 32px; } body.single-events .page-variant .p-evd-why__body { display: contents; } body.single-events .page-variant .p-evd-why__media { order: 2; aspect-ratio: 369 / 258; } body.single-events .page-variant .p-evd-why__copy { order: 3; margin-top: 0; } body.single-events .page-variant .p-evd-why__actions { order: 4; margin-top: 26px; } body.single-events .page-variant .p-evd-why__actions .c-btn { width: 100%; } body.single-events .page-variant .p-evd-cta { padding-top: 60px; padding-bottom: 60px; } body.single-events .page-variant .p-evd-cta__grid { gap: 24px; } body.single-events .page-variant .c-ctabox { padding: 28px 24px 32px; border-radius: var(--evd-radius); } body.single-events .page-variant .c-ctabox__title { font-size: 32px; line-height: 40px; } body.single-events .page-variant .c-ctabox__text { font-size: 19px; line-height: 26px; margin-top: 24px; } body.single-events .page-variant .c-ctabox__form.c-subscribe--inline { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 28px; } body.single-events .page-variant .c-ctabox__input { flex: none; width: 100%; } body.single-events .page-variant .c-ctabox__submit { align-self: flex-start; } body.single-events .page-variant .c-ctabox__actions { margin-top: 28px; } body.single-events .page-variant .c-ctabox--tint::after { right: -60px; bottom: -90px; width: 260px; height: 260px; } } /* === ENDE EV (CSS) =========================================== */ /* ================================================================ EV QA-Fix 1 (30.08.2026): Theme-p-Farbe schlaegt das geerbte Weiss im Anmelde-Banner (bekannte Falle), und die talents- Wortmarke ist als magenta Maske auf magenta unsichtbar. ================================================================ */ body.single-events .page-variant .p-evd-banner__badge, body.single-events .page-variant .p-evd-banner__text { color: var(--wwm-ink-invert); } body.single-events .page-variant .p-evd-banner__mark { background-color: var(--wwm-ink-invert); } /* ================================================================ EV QA-Fix 2 (30.08.2026): die responsive title--xl-Kette lebt nur in page-id-Scopes (21731-Falle) — fuer die Events-Scopes nachgezogen; dazu der beim Port faelschlich mitgedroppte Poppins-Untertitel der Detailseite. ================================================================ */ @media (min-width: 701px) and (max-width: 1323px) { body.post-type-archive-events .page-variant .title--xl, body.single-events .page-variant .title--xl { font-size: clamp(56px, 9vw, 96px); } } @media (max-width: 700px) { body.post-type-archive-events .page-variant .title--xl, body.single-events .page-variant .title--xl { font-size: clamp(48px, 11vw, 80px); } } @media (max-width: 600px) { body.post-type-archive-events .page-variant .title--xl, body.single-events .page-variant .title--xl { font-size: 40px; line-height: 1.1; } } body.single-events .page-variant .p-evd-head .p-section-head__subtitle { font-family: var(--wwm-font-display); } /* ========================================================= TALENTS-KONTAKT (/talents/kontakt/, Seite 21763) --------------------------------------------------------- Eigene Seite mit eigenem Formular (CF7 21762). Aufbau und Masse der OefKA-Kontaktseite 9898: Formularkarte, Feldraster und Infoboxen sind unveraendert die .wpk-*-Klassen aus dem KONTAKT-Appendix — damit gelten hier auch alle Werte der Korrekturrunden vom 28.08. Neu sind nur der Hero, die Ansprechpartner-Karte und die FAQ-Sektion (Marcels faq-accordions, dieselbe Komponente wie auf den Startseiten). Design: designs/talents/Talents-Kontakt(.png/-Mobil.png). ========================================================= */ /* --------------------------------------------------------- HERO — "Lass uns reden." Box 1:1 wie der Hero der OefKA-Seite (live nachgemessen auf zehn Breiten): 508px hoch bei 1920, Container 1440 mit 3rem Rinne, h1 110/1.09, Lead 24/1.34 in #555. Einziger Unterschied ist das Ziel des Verlaufs — das kuehlere #F7F9FC der uebrigen Talents-Unterseiten statt des waermeren #F3FAFE der OefKA-Seite. Unten schneidet die weisse Formularsektion hart ab. --------------------------------------------------------- */ .tk-hero { padding-bottom: 60px; background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 27%, #F7F9FC 70%); } .tk-hero__inner { width: min(100% - 3rem, 1440px); margin-inline: auto; padding-top: clamp(170px, 10.4vw, 200px); } .tk-hero .tk-hero__title { margin: 0 0 32px; color: #222222; font-size: clamp(68px, 5.73vw, 110px); font-weight: 700; line-height: 1.09; } .tk-hero .tk-hero__lead { max-width: 720px; margin: 0; color: #555555; font-size: clamp(19px, 1.25vw, 24px); font-weight: 500; line-height: 1.34; } /* --------------------------------------------------------- ANSPRECHPARTNER-KARTE Auf Desktop EINE Karte, die drei Bloecke durch Haarlinien trennt. Die Linie laeuft im Design 16px ueber die Textspalte hinaus (Karte 32px Innenabstand, Linie nur 16px eingerueckt; im Design gemessen: Karte x 1162…1590, Linie x 1178…1574) — negativer Aussen- plus gleich grosser Innenabstand verbreitert sie, ohne den Text zu verschieben. --------------------------------------------------------- */ .wpk-contact__block + .wpk-contact__block { margin-top: 20px; padding-top: 21px; border-top: 1px solid #D4D4D4; margin-inline: -16px; padding-inline: 16px; } /* Zwischen den Absaetzen des ersten Blocks steht im Design eine volle Leerzeile — nicht die 16px, mit denen ein Absatz auf seine Ueberschrift folgt. */ .wpk-body .wpk-contact__block .wpk-info-text + .wpk-info-text { margin-top: 24px; } /* Bloecke 2 und 3 tragen h3 (nur der erste ist die h2 der Karte) — die globale h3-clamp-Regel des Themes wiegt !important und muss hier gekontert werden. */ .wpk-body .wpk-contact h3.wpk-info-title { font-size: 20px !important; } /* Mail- und Telefonzeile stehen im Design in normaler Staerke; die halbfette Link-Variante der Infobox waere hier zu laut, weil der Link die ganze Zeile fuellt. */ .wpk-body .wpk-info-text .wpk-contact__link { font-weight: 400; } /* --------------------------------------------------------- ZWISCHENBREITEN — dieselbe Leiter wie der OefKA-Hero --------------------------------------------------------- */ /* Ab hier faellt der Fussabstand des Heros auf 32px (Theme). */ @media (max-width: 776px) { .tk-hero { padding-bottom: 32px; } } /* Tablet/Handy: Rinne 2rem, Kopfabstand 140px, kleinere h1. */ @media (max-width: 720px) { .tk-hero__inner { width: min(100% - 2rem, 1440px); padding-top: 140px; } .tk-hero .tk-hero__title { font-size: clamp(46px, 11.7vw, 72px); line-height: 1.08; } } /* Handy (393er Design). */ @media (max-width: 603px) { .tk-hero { background-image: linear-gradient(180deg, #FFFFFF 0%, #F7F9FC 62%); } .tk-hero .tk-hero__title { margin-bottom: 24px; } .tk-hero .tk-hero__lead { font-size: 16px; } /* Aus der einen Karte werden drei: die Huelle gibt Rahmen und Polster ab, jeder Block bekommt beides selbst. */ .wpk-contact { display: grid; gap: 16px; padding: 0; border: 0; border-radius: 0; background: none; } .wpk-contact__block, .wpk-contact__block + .wpk-contact__block { margin: 0; padding: 20px 24px; border: 1px solid #D4D4D4; border-radius: 16px; background: #FFFFFF; } .wpk-body .wpk-contact__block .wpk-info-text + .wpk-info-text { margin-top: 23px; } } /* ========================================================= TALENTS-KONTAKT — Korrekturen aus der ersten QA-Runde ========================================================= */ /* Die Mail- und die Telefonzeile fuellen ihre Zeile komplett — die halbfette Link-Variante der Infobox greift hier noch mit (0,3,1) durch, weil die Bestandsregel den :is()-Zusatz traegt. Gleiche Kette, spaeter in der Datei. */ .wpk-body .wpk-info-text a.wpk-contact__link, .wpk-body .wpk-info-text a.wpk-contact__link:is(:link, :visited, :hover, :active, :focus-visible) { font-weight: 400; } /* Theme-Falle: JEDER Link im Fliesstext bekommt ein ::after "→" mit font-size 0.001px. In einem mehrzeiligen Absatz faellt das nicht auf, hier ist der Link die ganze Zeile — die Zeilenbox wuchs dadurch von 24 auf 29px und schob die Haarlinien um je 5px nach unten. */ .wpk-body .wpk-info-text .wpk-contact__link::after { content: none; } /* "E-Mail" und "Telefon" stehen im Design so fett wie "Ansprechpartner" — als h3 erben sie sonst das 600er Gewicht der Theme-Ueberschrift. */ .wpk-body .wpk-contact h3.wpk-info-title { font-weight: 700; } /* Handy: Hero-Rinne 24px (Design; die Karten darunter sitzen mit 12px bewusst dichter am Rand) und eine eigene h1-Leiter. Grund: "Lass uns reden." ist laenger als das "Sprechen wir." der OefKA-Seite — mit deren 11.7vw-Leiter (46px bei 393) misst die Zeile 363px bei 361px Platz und bricht um. Das Design zeigt sie einzeilig bei 40px; 10.2vw trifft das bei 393 genau und bleibt bis 360px einzeilig. */ @media (max-width: 603px) { .tk-hero__inner { width: min(100% - 3rem, 1440px); } .tk-hero .tk-hero__title { font-size: clamp(38px, 10.2vw, 72px); } } /* FAQ: Marcels Akkordeon klappt ab dem vierten Eintrag alles Weitere hinter "Mehr Fragen anzeigen" (sinnvoll bei den acht Fragen der Startseiten). Hier sind es genau vier, und Design wie Statik zeigen alle vier offen — auf dieser Seite also ohne Schalter. Die Bestandsregeln haengen an .is-collapsed und wiegen (0,5,0); die Seiten-ID kontert sie. */ body.page-id-21763 .layout-accordion-grid .cols.is-collapsed .col-right li { margin-top: 1rem; } body.page-id-21763 .layout-accordion-grid .cols.is-collapsed .faq-extra-item .item { opacity: 1; transform: none; max-height: 1000px; pointer-events: auto; } body.page-id-21763 .layout-accordion-grid .cols.is-collapsed .faq-extra-item { margin-bottom: 0 !important; } /* Der Schalter traegt sein display per Inline-Style aus dem Skript — nur !important kommt dagegen an. */ body.page-id-21763 .layout-accordion-grid .faq-toggle-button { display: none !important; } /* Handy-Feinschliff Hero (Design 393 nachgemessen): Kopfabstand 142px setzt die Headline-Oberkante auf y 148 wie im Design, und der Lead laeuft dort auf 23px Zeilenabstand statt auf den 21.44 der OefKA-Seite — beide Mobil-Designs zeigen 23. */ @media (max-width: 603px) { .tk-hero__inner { padding-top: 142px; } .tk-hero .tk-hero__lead { line-height: 23px; } } /* Headline -> Lead auf dem Handy: das Design zeigt 27px (Lead-Ink bei y 216), die 24 der Desktop-Regel setzten ihn auf 213. */ @media (max-width: 603px) { .tk-hero .tk-hero__title { margin-bottom: 27px; } } /* ========================================================= 404 — beide Welten (Leon, 30.08.2026) --------------------------------------------------------- Markup kommt aus dem neu geschriebenen 404.php, das nach $GLOBALS['wi_mode'] verzweigt. Die Box folgt der Hero-Leiter der Unterseiten (Kopfabstand clamp(170,10.4vw,200), mobil 140/142, Rinne 3rem bzw. 2rem), damit sich die Seite wie eine echte Seite anfuehlt und nicht wie ein Fehlerdump. Talents bekommt vier Zielkarten mit Navy-Icons, die OefKA-Welt zwei Pillen und eine Linkzeile. ========================================================= */ .e404 { padding-bottom: 120px; } /* Derselbe Hero-Fuss wie in der jeweiligen Welt: OefKA laeuft ins waermere #F3FAFE, Talents ins kuehlere #F7F9FC. */ .e404--wpg { background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 27%, #F3FAFE 70%); } .e404--talents { background-image: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 27%, #F7F9FC 70%); } .e404__inner { width: min(100% - 3rem, 1260px); margin-inline: auto; padding-top: clamp(170px, 10.4vw, 200px); } /* --- Kopfzeile "404 · Seite nicht gefunden" --------------- */ .e404 .e404__eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; color: #727272; font-size: 17px; font-weight: 500; line-height: 1; } .e404__code { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 50px; background: var(--c-pri); color: #FFFFFF; font-family: var(--font-hl); font-size: 15px; font-weight: 700; line-height: 1; } .e404 .e404__title { margin: 0; color: #222222; font-family: var(--font-hl); font-size: clamp(40px, 5.73vw, 110px); font-weight: 700; line-height: 1.07; } .e404 .e404__lead { max-width: 720px; margin: 24px 0 0; color: #555555; font-size: clamp(19px, 1.25vw, 24px); font-weight: 500; line-height: 1.34; } /* --- Talents: vier Zielkarten ----------------------------- */ .e404__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 48px 0 0; padding: 0; list-style: none; } .e404__cards-item { margin: 0; } /* Das Theme stellt a global auf display:block — die Karte braucht ihre eigene Achse. */ .e404 .e404__card { display: flex; height: 100%; flex-direction: column; padding: 28px 32px 24px; border: 1px solid #D4D4D4; border-radius: 16px; background: #FFFFFF; color: #222222 !important; text-decoration: none; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .e404 .e404__card:is(:hover, :focus-visible) { border-color: var(--c-pri); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06); } /* Navy statt Magenta: die Talents-Welt setzt ihren Zweitton (#2B4781) genauso im FAQ-Chevron ein. */ .e404__card-icon { display: flex; width: 48px; height: 48px; flex: none; align-items: center; justify-content: center; border-radius: 50%; background: rgba(43, 71, 129, 0.08); color: #2B4781; font-size: 24px; } .e404__card-title { display: block; margin-top: 20px; color: #222222; font-family: var(--font-hl); font-size: 20px; font-weight: 700; line-height: 1.2; } .e404__card-text { display: block; flex: 1 1 auto; margin-top: 10px; color: #555555; font-size: 17px; line-height: 24px; } .e404__card-more { display: flex; align-items: center; gap: 6px; margin-top: 20px; color: var(--c-pri); font-size: 17px; font-weight: 600; line-height: 1; } .e404__card-more .wwmwp-ico { font-size: 0.9em; transition: transform var(--dur) var(--ease); } .e404 .e404__card:is(:hover, :focus-visible) .e404__card-more .wwmwp-ico { transform: translateX(3px); } /* --- Talents: Schlusszeile -------------------------------- */ .e404__foot { margin-top: 40px; color: #555555; font-size: 17px; line-height: 26px; } .e404 .e404__foot-link, .e404 .e404__foot-link:is(:link, :visited, :active) { display: inline; color: var(--c-pri) !important; font-weight: 600; text-decoration: none; } .e404 .e404__foot-link:is(:hover, :focus-visible) { color: #B81E58 !important; text-decoration: underline; text-underline-offset: 2px; } /* --- OefKA: Pillen ---------------------------------------- */ .e404__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; } .e404 .e404__btn, .e404 .e404__btn:is(:link, :visited, :active) { display: inline-flex; height: 50px; align-items: center; justify-content: center; padding: 0 32px; border: 1px solid var(--c-pri); border-radius: 50px; background: var(--c-pri); color: #FFFFFF !important; font-size: 17px; font-weight: 700; line-height: 1; text-decoration: none; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); } .e404 .e404__btn:is(:hover, :focus-visible) { background: #B81E58; border-color: #B81E58; transform: translateY(-0.15rem); } .e404 .e404__btn--ghost, .e404 .e404__btn--ghost:is(:link, :visited, :active) { border-color: #D4D4D4; background: #FFFFFF; color: #222222 !important; } .e404 .e404__btn--ghost:is(:hover, :focus-visible) { border-color: var(--c-pri); background: #FFFFFF; color: var(--c-pri) !important; } /* --- OefKA: Linkzeile ------------------------------------- */ .e404__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 40px; font-size: 17px; line-height: 1; } .e404__links-label { color: #727272; } .e404 .e404__link, .e404 .e404__link:is(:link, :visited, :active) { display: inline; color: #555555 !important; font-weight: 600; text-decoration: none; } .e404 .e404__link:is(:hover, :focus-visible) { color: var(--c-pri) !important; text-decoration: underline; text-underline-offset: 3px; } /* --- Zwischenbreiten -------------------------------------- */ @media (max-width: 1199px) { .e404__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 776px) { .e404 { padding-bottom: 80px; } } @media (max-width: 720px) { .e404__inner { width: min(100% - 2rem, 1260px); padding-top: 140px; } } @media (max-width: 700px) { .e404__cards { grid-template-columns: minmax(0, 1fr); } } /* Handy: eigene Titel-Leiter (wie auf der Talents-Kontaktseite), 24px-Rinne fuer den ganzen Block — Text und Karten stehen hier in einer Spur, deshalb nicht die 12er-Kartenspur der Unterseiten. Und die 76vw-Regel des Themes fuer JEDEN Absatz muss fuer Kopfzeile und Lead zurueckgenommen werden. */ @media (max-width: 603px) { .e404 { padding-bottom: 60px; } .e404__inner { width: min(100% - 3rem, 1260px); padding-top: 142px; } .e404 .e404__eyebrow, .e404 .e404__lead { width: auto; } .e404 .e404__title { font-size: clamp(38px, 10.2vw, 72px); } .e404 .e404__lead { margin-top: 20px; font-size: 16px; line-height: 23px; } .e404__cards { gap: 16px; margin-top: 32px; } .e404 .e404__card { padding: 24px; } .e404__card-icon { width: 44px; height: 44px; font-size: 22px; } .e404__card-text { font-size: 16px; line-height: 23px; } .e404__card-more { font-size: 16px; } .e404__foot { margin-top: 32px; font-size: 16px; line-height: 24px; } .e404__actions { margin-top: 32px; gap: 12px; } .e404 .e404__btn { height: 44px; padding: 0 28px; font-size: 16px; } .e404__links { margin-top: 32px; gap: 10px 20px; font-size: 16px; } } /* --- 404: Korrekturen aus der ersten Sichtung ------------- */ /* `main` traegt eine globale min-height von 100vh. Auf der kurzen OefKA-Fassung endete die Sektion vorher deutlich frueher — unter dem Verlauf stand ein weisses Band bis zum Footer. Dieselbe min-height auf der Sektion laesst den Verlauf die volle Bildschirmhoehe tragen. */ .e404 { min-height: 100vh; } /* Der Titel ist der einzige lange Umbruch auf der Seite: `balance` verteilt die Zeilen gleichmaessig, statt ein einzelnes Wort ("nicht") allein in die zweite Zeile zu schicken. Browser ohne Unterstuetzung brechen wie bisher. */ .e404 .e404__title { text-wrap: balance; } /* 920 statt 720: die OefKA-Zeile passt damit auf 1920 in eine Zeile, und der laengere Talents-Lead bricht nach "mehr." statt ein einzelnes "Von" am Zeilenende stehen zu lassen. */ .e404 .e404__lead { max-width: 920px; } /* --- 404: eine einzige, sprungfreie Titel-Leiter ---------- */ /* Die erste Fassung hatte zwei Leitern (Grundregel + eigene ab 603px). Weil der Grundwert schon bei 700px auf sein Minimum faellt, sprang der Titel an der Bruchstelle von 40 auf 61px nach OBEN. Eine durchgehende Leiter loest das — und sie ist so gewaehlt, dass die laengste erste Zeile ("Diese Seite ist nicht", gemessen 9.909px je 100px Schriftgrad) auf jeder Breite von 360 bis 1920 in eine Zeile passt. Sonst steht auf dem Handy "nicht" als einzelnes Wort in der Mittelzeile — text-wrap: balance kann das nicht aufloesen, weil "ausgeschrieben." allein schon fast die volle Spalte fuellt. */ .e404 .e404__title { font-size: clamp(30px, 8.5vw, 110px); } /* ========================================================= PRUEFRUNDE 1 — TEIL A: ALLGEMEIN (Leon, 30.08.2026) --------------------------------------------------------- Drei welt- und seitenuebergreifende Punkte aus Leons erster Durchsicht der kompletten WP-Umsetzung: A1 Rechtsseiten-Hero traegt in der Talents-Welt den falschen (OefKA-)Blauton. A2 Die Pfeile in den Buttons haben quer ueber die Seiten vier verschiedene Groessen (9.8 / 11.2 / 12 / 12.8 / 20 px) und drei verschiedene Textabstaende (8 / 9.6 / 16 px). Alles auf 12 px Pfeil + 8 px Abstand. A3 Das mobile Seitenpolster der Sektionen ist mal 12, mal 16 px. Ueberall 16. ========================================================= */ /* --- A1: Rechtsseiten-Hero je Welt ------------------------- .page-legal bringt einen fest verdrahteten Verlauf mit dem OefKA-Blau #F3FAFE mit — auch unter /talents/. Die Talents-Welt faehrt ueberall den kuehleren Ton #F7F9FC (tk-hero, p-hs-hero, p-ev-hero, 404). Weiche ueber die Body-Klasse aus dem request-Filter; talents-nav deckt die Talents-only-Seiten mit ab. */ body:is(.mode-talents, .talents-nav) .page-legal { background: linear-gradient(180deg, #FFFFFF 0, #FFFFFF 96px, #F7F9FC 200px, #F7F9FC 370px, #FFFFFF 370px); } /* --- A2: Buttonpfeile vereinheitlicht ---------------------- Bestand (gemessen ueber alle Seiten, 1920 und 390): a.wt-bt 12.8 px, Abstand 8 (Maske lief auf calc(100% - 2px), sichtbar also 10.8) .tabber-show-all 9.8 px, Abstand 8 .logos-conveyor-show-all / .event-teasers-show-all 12 px, Abstand 16 (margin 8 + gap 8) .cta-talents-button 12.8 px, Abstand 16 (dito) .wt-bt.external-link 12.8 px, Abstand 9.6 .blog-overview__newsbox-cta 12.8 px, Abstand 8 .c-btn (Material-Symbol) 20 px, Abstand 8 Ziel: Pfeil exakt 12 px, Maske fuellt die Box (contain), Abstand zum Text ueberall 8 px. Die Glyphen bleiben, wie sie sind — diagonal nach oben rechts, waagerecht nach rechts oder gar keiner. Runde Icon-Buttons (Slider, Karten-Eckpfeile, Akkordeon-Chevrons) sind bewusst NICHT dabei, die haben eigene Groessen im Design. Die Theme-Regeln tragen bis zu vier Selektorstufen (main > div.page-variant > section.layout-x ...), deshalb hier !important statt einer nachgebauten Kette. */ main :is( a.wt-bt, .wt-bt.external-link, .relevanz-cta, .cta-duo-button, .blog-overview__newsbox-cta, .faq-toggle-button )::after { width: 12px !important; height: 12px !important; flex: 0 0 12px !important; mask-size: contain !important; -webkit-mask-size: contain !important; } /* Abstand: 8 px, und zwar genau einmal. Buttons, die den Abstand ueber margin-left setzen, bekommen gap 0; Buttons, die ihn ueber gap setzen, bekommen margin-left 0. */ main :is(a.wt-bt, .relevanz-cta, .blog-overview__newsbox-cta)::after { margin-left: 8px !important; } main :is(a.wt-bt, .relevanz-cta, .blog-overview__newsbox-cta) { gap: 0 !important; } /* .c-btn (Statik-Buttons auf fuer-wpg / hochschulen / events) traegt sein Icon als Material-Symbol im DOM, nicht als Pseudoelement — dort steuert die Schriftgroesse. */ main .c-btn > :is(.material-symbols-rounded, .material-symbols-outlined) { width: 12px !important; height: 12px !important; font-size: 12px !important; line-height: 1 !important; } main .c-btn { gap: 8px !important; } /* --- A3: Mobiles Seitenpolster der Sektionen --------------- Bisher: Sektionen direkt unter main 16 px (2rem 1rem), Sektionen im page-variant-Wrapper 12 px (0.75rem). Damit sprangen Startseiten und Unterseiten gegeneinander. Alles auf 16 px — Leons Mobilkonvention. Die beiden Full-Bleed-Scroller (Klartext-Vergleich auf /der-beruf/ und die Menschen-Thumbs) heben das Polster ueber negative Raender wieder auf und muessen im selben Zug von 12 auf 16 px nachgezogen werden, sonst stehen sie 8 px ueber und erzeugen waagerechten Scroll. */ @media (max-width: 603px) { main > .page-variant > section > .section-inner { padding-left: 1rem !important; padding-right: 1rem !important; } .layout-klartext .comparison-rows, .layout-menschen .menschen-thumbs { width: calc(100% + 2rem); margin-left: -1rem; margin-right: -1rem; } } /* ========================================================= PRUEFRUNDE 1 — TEIL B: FOOTER (Leon, 30.08.2026) --------------------------------------------------------- B1 Rechtsleiste (Impressum, Datenschutz, ...) braucht einen Magenta-Hover. B2 Telefonnummer und Mailadresse werden Links, sollen aber aussehen wie bisher — Magenta erst beim Hover. B3 Anschrift/Kontakt stehen mobil zu eng nebeneinander: 48 px Spaltenabstand. B4 Die Newsletter-Pille rutscht mobil in eine zweite Zeile, obwohl neben den beiden Social-Kreisen Platz ist — die Liste war auf fit-content beschnitten. Die drei Logos werden in footer.php verlinkt, der Scroll-Fehler am Seitenende sitzt in talents.js. ========================================================= */ /* --- B1: Rechtsleiste ------------------------------------- */ #pageFooter #legalNav ul li a { transition: color var(--dur) var(--ease-standard); } #pageFooter #legalNav ul li a:is(:hover, :focus-visible) { color: var(--c-pri); } /* --- B2: Telefon und Mail als Links ------------------------ Die beiden Angaben kommen als WYSIWYG aus den Footer-Optionen und sind dort jetzt tel:/mailto:-Links. Optik bleibt der Fliesstext (a erbt display:block vom Theme, deshalb ausdruecklich inline), Magenta nur im Hover. Das globale "→"-::after jedes Links wird abgeschaltet, sonst hebt es die Zeilenbox um rund 5 px. */ #pageFooter :is(.idw-kontakt, .idw-anschrift) a, #pageFooter :is(.idw-kontakt, .idw-anschrift) a:is(:link, :visited, :active) { display: inline; color: inherit; text-decoration: none; transition: color var(--dur) var(--ease-standard); } #pageFooter :is(.idw-kontakt, .idw-anschrift) a::after { content: none; } #pageFooter :is(.idw-kontakt, .idw-anschrift) a:is(:hover, :focus-visible) { color: var(--c-pri); } /* --- B3 + B4: mobiles Footer-Layout ------------------------ */ @media (max-width: 603px) { /* 48 px zwischen Anschrift und Kontaktspalte. */ #pageFooter .idw-contact-info { gap: 48px; } /* Die Social-Liste stand auf Shrink-to-fit (224 px) und brach die Newsletter-Pille um. Volle Spaltenbreite (358 px bei 390) traegt beide Kreise plus Pille in einer Zeile; wird es enger, darf sie weiterhin umbrechen. */ #pageFooter .socials .social-list { width: 100%; max-width: none; } } /* --- A2-Nachtrag: zwei Buttons mit staerkerer Regel -------- .tabber-show-all setzt margin: 0 !important in einer Kette mit drei Klassen (0,3,3) und schlug die Sammelregel; die FAQ-Umschalter standen auf 7.2 px. Beide auf die 8 px. */ main > div.page-variant > section.layout-intention-tabber .tabber-show-all::after { margin-left: 8px !important; } main .faq-toggle-button { gap: 8px !important; } /* --- B5: die drei Footer-Logos sind jetzt Links ------------ footer.php legt um WP-Logo, talents-Wortmarke und IDW-Logo je ein . Damit sich an der Optik nichts aendert, uebernimmt der Link exakt die Flex-Rolle, die vorher Bild bzw. Wortmarke hatten; das globale a{display:block} und das "→"-::after jedes Links werden abgeschaltet. */ #pageFooter .footer-logo-link, #pageFooter .footer-logo-link:is(:link, :visited, :active) { display: flex; align-items: center; min-width: 0; max-width: 100%; color: inherit; text-decoration: none; } #pageFooter .footer-logo-link::after { content: none; } #pageFooter .idw-footer-logo .footer-logo-link { display: inline-block; line-height: 0; } /* Im Lockup sind Bild und Wortmarke Flex-Kinder von .footer-logo bzw. .talents-only. Ein zusaetzlicher Flex-Link dazwischen verschiebt die Schrumpfverteilung — bei 1180 wuchs das Wortmark von 249 auf 263 px und lief 14 px ueber. Mit display: contents traegt weiterhin Bild bzw. Wortmarke selbst die Flex-Rolle, der Link bleibt klickbar. */ #pageFooter .footer-logo .footer-logo-link { display: contents; } /* --- B6: Footer wieder in den normalen Fluss -------------- Das Portal-Script setzt #pageFooter inline auf position: absolute mit gemessenem top. Dadurch kennt body.scrollHeight den Footer nicht und der Browser scrollt nur bis zum Ende der absolut liegenden Variante — am Seitenende fehlten mobil 216 px (Main) bzw. 464 px (Talents). talents.js gibt main jetzt die Hoehe der aktiven Variante, hier kommt der Footer zurueck in den Fluss. Der Adminbar-Versatz von oben war eine Korrektur fuer die absolute Lage und faellt damit weg. */ #pageFooter { position: static !important; top: auto !important; } body.admin-bar #pageFooter { margin-top: 0; } @media (max-width: 782px) { body.admin-bar #pageFooter { margin-top: 0; } } /* --- B3-Nachtrag: Spaltenabstand der Kontaktangaben ------- Der Block traegt selbst die Klasse "columns"; die 1180er-Regel des Themes setzt dort gap 0 und flex: 1 0 50% je Spalte — mit 48 px Abstand liefen die beiden 50%-Spalten ueber. Spalten auf Inhaltsbreite. */ @media (max-width: 603px) { #pageFooter .idw-contact-info { gap: 48px !important; max-width: none; } #pageFooter .idw-contact-info > div { flex: 0 1 auto; } /* Und nicht umbrechen — sonst stehen Anschrift und Kontakt mit 48 px Abstand untereinander statt nebeneinander. */ #pageFooter .idw-contact-info { flex-wrap: nowrap !important; } } /* ========================================================= PRUEFRUNDE 1 — TEIL C: OEFKA-STARTSEITE (Leon, 30.08.2026) --------------------------------------------------------- Marcels Regeln haengen durchgaengig an Ketten der Form main > div.page-variant > section.layout-x > .section-inner (0,3,3 aufwaerts). Die Nachbesserungen hier tragen dieselbe Kette bzw. !important, sonst greifen sie nicht. ========================================================= */ /* --- C1 Wir fuer dich: Kachelpolster (Desktop) ------------ .box-wrapper stand rundum auf 24 px; Leon will 20 oben und unten, 24 links und rechts. Mobil bleibt der Bestand. */ @media (min-width: 604px) { main > div.page-variant > section.layout-keylinks-grid .box-wrapper { padding: 20px 24px !important; } } /* --- C2 Ein Beruf: Rueckseiten-Icon der Advisory-Karte ---- Die drei anderen Rueckseiten liegen als quadratische SVGs (200x200) vor und fuellen ihre Box. Advisory nutzt chesspiece.webp im Querformat 1110x825 — in der Box blieb davon nur ein 210x156 grosses Bild uebrig, die Figur war entsprechend klein. Grund ist die Themeregel max-width: 40% am Kartenbild: bei den quadratischen SVGs faellt sie nicht auf, das Querformat wird davon aber auf 40 % der Boxbreite gestaucht und dann von object-fit noch einmal in der Hoehe beschnitten. Deckel weg, die Hoehe (95 %) begrenzt weiterhin. */ main > div.page-variant > section.layout-flipcards-grid .card-image-wrapper img[src*="chesspiece"] { max-width: 95% !important; } /* --- C3 Insights: h3 ohne oberen Aussenabstand ------------ */ main > div.page-variant > section.layout-posts-carousel h3 { margin-top: 0 !important; } /* --- C4 Deine Fragen: Fragen bekommen eine Breite --------- Die Frage lief bis an den Chevron (554 px Innenbreite, davon 506 Text). Im Design brechen die Zeilen deutlich frueher. 85 % lassen die Luft, der Chevron bleibt rechts. */ main > div.page-variant > section.layout-accordion-grid .accordion-trigger > p { width: 85% !important; } main > div.page-variant > section.layout-accordion-grid .accordion-trigger > .accordion-icon { margin-left: auto; } /* --- C5 Chevron-Hover schneller -------------------------- Die globale Regel a.wt-link::after faehrt 0.5s ease-in-out, viermal so lang wie die Hauskurve. Auf --dur/--ease. */ a.wt-link::after { transition: transform var(--dur) var(--ease); } /* ========================================================= TEIL C — MOBIL ========================================================= */ @media (max-width: 603px) { /* --- C6 Wir fuer dich --------------------------------- Abstand Subheadline zu Bild von 16 auf 24 px, und der Mehr-erfahren-Button rueckt in die Reihe der Slider-Pfeile. Die Pfeile liegen absolut am Fuss des .testimonial-slider-body und stehen links; rechts ist Platz. -66 px = Reihenabstand 24 plus 42 Ueberlappung, damit die Mitte des 44er-Buttons exakt auf der Mitte der 40er-Pfeilreihe sitzt. */ main > div.page-variant > section.layout-testimonial-slider > .section-inner { gap: 24px !important; } main > div.page-variant > section.layout-testimonial-slider .main-link-wrapper { width: fit-content; margin-top: -66px; margin-left: auto; } /* --- C7 Dein Start ------------------------------------ */ main > div.page-variant > section.layout-startoff-grid .talents-mark { margin-bottom: 12px !important; } main > div.page-variant > section.layout-startoff-grid .intro { gap: 0 !important; } /* --- C8 Ein Beruf ------------------------------------- */ /* Alle Karten so hoch wie die hoechste der Reihe: der Splide-Track streckt die Slides bereits, nur die Karte darin blieb auf ihrer Inhaltshoehe (bei 360 stand Advisory mit 596 gegen 572 der anderen). */ main > div.page-variant > section.layout-flipcards-grid .flipcards-mobile-slider .splide__slide, main > div.page-variant > section.layout-flipcards-grid .flipcards-mobile-slider .splide__slide > article, main > div.page-variant > section.layout-flipcards-grid .flipcards-mobile-slider .card-flip { height: 100% !important; } /* Die weissen Karten tragen im Mobil-Slider kein .is-pink; die Desktopregel fuer den magentafarbenen Chevron haengt an .cols/.col-left/.col-right und greift hier nicht — der Pfeil blieb transparent (Audit und ESG). */ main > div.page-variant > section.layout-flipcards-grid .flipcards-mobile-slider article.card:not(.is-pink) footer a::after { background-color: var(--c-pri) !important; } main > div.page-variant > section.layout-flipcards-grid .flipcards-mobile-slider .front h3 { padding-top: 12px !important; } /* Icon-Box flacher, das Icon skaliert ueber contain mit. */ main > div.page-variant > section.layout-flipcards-grid .flipcards-mobile-slider .card-image-wrapper { height: 150px !important; } /* --- C9 Insights -------------------------------------- */ main > div.page-variant > section.layout-posts-carousel .splide__slide article::after { width: 10px !important; height: 10px !important; right: 24px !important; } } /* --- C10 Dein Start: "Jetzt Einstieg finden" -------------- Das Layout kennt das Feld extra-mobil-button laengst und rendert es zwischen Text und Bild — es war nur nie gefuellt (jetzt: /talents/karriere/). Mobil steht der Button wie im Design mittig; Desktop war nie im Design, Leon will ihn dort ebenfalls unter dem Text. Die Bestandsregel blendet ihn ueber .wt-bt.mob-only { display: none !important } aus, deshalb hier dieselbe Kette plus !important. Ohne Pfeil, wie in der Mobilfassung. */ @media (min-width: 604px) { main > div.page-variant > section.layout-startoff-grid .section-inner .cols .intro a.wt-bt.mob-only { display: inline-flex !important; align-self: flex-start; width: fit-content !important; min-height: 2.75rem; margin: 1.5rem 0 0 !important; } main > div.page-variant > section.layout-startoff-grid .section-inner .cols .intro a.wt-bt.mob-only::after { display: none !important; } } /* ========================================================= PRUEFRUNDE 1 — TEIL D: TALENTS-STARTSEITE (Leon, 30.08.2026) ========================================================= */ /* --- D1 Hero: Wortmarke ---------------------------------- */ main > div.page-variant > section.layout-hero-talents .hero-talents-mark { margin-bottom: 16px !important; } /* --- D2 Hero: Suchbutton wie die uebrigen Buttons --------- Der Submit der Hero-Suche fuhr als einziger Button eine eigene Kurve (0.3s ease-in); alle anderen .wt-bt schalten ihren Hover ohne Uebergang. Angeglichen. */ main > div.page-variant > section.layout-hero-talents .talents-job-filters .wt-bt { transition: none !important; } /* --- D3 Tab-Menue: Beschriftung 24 px --------------------- */ @media (min-width: 604px) { main > div.page-variant > section.layout-intention-tabber .tabber-nav-bt { font-size: 24px !important; } /* Die Eventliste steckt jetzt in einer Splide-Huelle, die erst unterhalb 604px montiert wird. Eine Bestandsregel haelt nicht initialisierte .splide-Wurzeln auf visibility: hidden — auf dem Desktop waere die Liste damit unsichtbar. */ main > div.page-variant > section.layout-event-teasers .event-teasers-slider { visibility: visible !important; } /* Die Liste heisst jetzt zusaetzlich .splide__list und faengt sich damit das padding: 0 der Splide-Grundregeln ein — auf dem Desktop klebten Kopf, Liste und Button aneinander. Zurueck auf die 2rem des Bestands. */ main > div.page-variant > section.layout-event-teasers .event-teasers-slider ol.splide__list { padding: 2rem 0 !important; } } /* --- D4 Darum WP: die drei Boxen sind jetzt Links --------- Ziel ist die Seite "Wie wird man Wirtschaftspruefer" mit je eigenem Sprungziel (#etappen / #danach / #was-du-studierst, im ACF hinterlegt). Hoverzustand wie in der Statik: Karte hebt sich leicht, Pfeil wandert. */ main > div.page-variant > section.layout-claims-scroller .box .box-inner { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } main > div.page-variant > section.layout-claims-scroller .box:has(a:hover) .box-inner, main > div.page-variant > section.layout-claims-scroller .box:has(a:focus-visible) .box-inner { transform: translateY(-0.25rem); box-shadow: var(--shadow-card); } main > div.page-variant > section.layout-claims-scroller .box .box-content a::after { transition: transform var(--dur) var(--ease); } main > div.page-variant > section.layout-claims-scroller .box:has(a:hover) .box-content a::after { transform: translate(0.125rem, -0.125rem); } /* --- D5 Unser Brand: Link auf wirtschaftspruefer.de ------- */ main > div.page-variant > section.layout-ourbrand .main-text a { color: var(--c-pri) !important; font-weight: 600; } main > div.page-variant > section.layout-ourbrand .main-text a:is(:hover, :focus-visible) { color: #B81E58 !important; text-decoration: underline; text-underline-offset: 2px; } /* --- D6 Unser Brand: IDW-Zeile --------------------------- Der Satz stand zentriert und wirkte dadurch am Zeilenanfang eingerueckt (der vermeintliche Leerschritt). Linksbuendig wie in der Mobilfassung. */ main > div.page-variant > section.layout-ourbrand figcaption p { text-align: left !important; } /* --- D7 Deine Fragen: Talents-Karten dunkler -------------- Zu (Bestand): rgba(216,237,249,.2) -> .45 Offen (Bestand): Grundton #EEF8FD plus Verlauf .32/.22/.58 Nur die Talents-Welt; die OefKA-Karten bleiben unveraendert. Die Variablen --c-lblue-radical-* lassen sich dafuer NICHT umsetzen: --cta-bg-radial wird schon auf :root aufgeloest, eine spaetere Neubelegung der Bausteine wirkt nicht mehr. Deshalb der Verlauf direkt. */ main > div.page-variant.variant-talents > section.layout-accordion-grid .item { background: radial-gradient(circle, rgba(216, 237, 249, 0.45) 0%, rgba(176, 221, 245, 0.45) 100%) !important; } main > div.page-variant.variant-talents > section.layout-accordion-grid .item:has(details[open]) { background-color: #E2F2FA !important; background-image: radial-gradient(circle at 56% 58%, rgba(216, 237, 249, 0.5) 0, rgba(176, 221, 245, 0.38) 56%, rgba(240, 248, 252, 0.7) 100%) !important; } /* --- D8 CTA: Hoverzustand fuer "Erfahre warum" ------------ */ main > div.page-variant > section.layout-cta-talents .cta-talents-button { transition: background-color var(--dur) var(--ease-standard), transform var(--dur) var(--ease); } main > div.page-variant > section.layout-cta-talents .cta-talents-button:is(:hover, :focus-visible) { /* Die Grundregel setzt background: var(--c-pri) !important — ohne !important bleibt der Hover farblos. */ background: #B81E58 !important; transform: translateY(-0.15rem); } /* ========================================================= TEIL D — MOBIL ========================================================= */ @media (max-width: 603px) { /* --- D9 Hero ----------------------------------------- Der Block aus Wortmarke, Headline, Intro und Suchfeld stand im oberen Drittel (152 px Kopfpolster, 96 unten). Symmetrisches Polster plus zentrierte Hauptachse setzt ihn in die Mitte des 720er-Heros. Zwischen Intro und Formular lagen 74 px (Header-Rand 25.8 + Flex-Gap 16 + Formular-Rand 32) — jetzt genau die 32 des Formulars. */ main > div.page-variant > section.layout-hero-talents > .section-inner { padding: 96px 16px !important; justify-content: center; gap: 0 !important; } main > div.page-variant > section.layout-hero-talents > .section-inner > header { margin: 0 !important; } main > div.page-variant > section.layout-hero-talents .hero-talents-mark { margin-bottom: 12px !important; } main > div.page-variant > section.layout-hero-talents .hero-talents-mark svg { width: auto !important; height: 24px !important; } main > div.page-variant > section.layout-hero-talents h1.headline { font-size: 40px !important; line-height: 48px !important; } main > div.page-variant > section.layout-hero-talents p.intro { font-size: 20px !important; font-weight: 500 !important; line-height: 27px !important; } /* --- D10 Tab-Menue ------------------------------------ Erste und letzte Registerkarte tragen eigene padding-!important-Regeln ueber li:first-child / li:last-child, deshalb hier dieselben Ketten. */ main > div.page-variant > section.layout-intention-tabber .tabber-nav li .tabber-nav-bt, main > div.page-variant > section.layout-intention-tabber .tabber-nav li:first-child .tabber-nav-bt, main > div.page-variant > section.layout-intention-tabber .tabber-nav li:last-child .tabber-nav-bt, main > div.page-variant > section.layout-intention-tabber .tabber-nav li:first-child .tabber-nav-bt.is-active, main > div.page-variant > section.layout-intention-tabber .tabber-nav li:last-child .tabber-nav-bt.is-active { padding: 20px 24px !important; } main > div.page-variant > section.layout-intention-tabber .tabber-info-card { padding: 24px 32px !important; } /* Die Nummer ist ein

in .tabber-content und faengt sich dort line-height/font-weight/margin-bottom mit !important aus der Absatzregel ein — gleiche Kettenlaenge noetig. */ main > div.page-variant > section.layout-intention-tabber .tabber-content p.tabber-info-card-number { font-size: 32px !important; font-weight: 600 !important; line-height: 1 !important; margin-top: 0 !important; margin-bottom: 16px !important; } main > div.page-variant > section.layout-intention-tabber .tabber-info-card h3 { margin-bottom: 12px !important; } /* --- D11 Unser Netzwerk: Sektionspolster --------------- */ main > div.page-variant > section.layout-logos-conveyor { padding-top: 60px !important; padding-bottom: 60px !important; } /* --- D12 Darum WP: Boxenpolster ----------------------- */ main > div.page-variant > section.layout-claims-scroller .box-inner { padding: 12px !important; } /* --- D13 Unser Brand: Bild flacher --------------------- */ main > div.page-variant > section.layout-ourbrand .cols .img-wrapper, main > div.page-variant > section.layout-ourbrand .cols .img-wrapper img { height: 330px !important; } main > div.page-variant > section.layout-ourbrand .cols .img-wrapper img { width: 100% !important; object-fit: cover !important; } /* --- D14 Events als Slider ---------------------------- layout-event-teasers.php legt die Liste jetzt in eine Splide-Huelle und montiert sie unterhalb 604px (Muster: Flipcards-Slider der OefKA-Seite). Die Splide-Grundoptik kommt im Theme pro Sektion, deshalb hier die vier Zeilen Rahmenwerk. Die Pfeile stehen unter dem Slider links, "Alle Events" rueckt in dieselbe Reihe nach rechts (-60px = Reihenabstand 16 + Pfeilhoehe 44). Ausserdem lagen zwischen Kopf und Liste 88px (Kopfrand 40 + Flex-Gap 16 + ol-Polster 32) — Leons "zu grosser falscher Abstand". Bleiben die 40 des Kopfes. */ main > div.page-variant > section.layout-event-teasers > .section-inner { gap: 0 !important; } main > div.page-variant > section.layout-event-teasers ol { padding: 0 !important; } main > div.page-variant > section.layout-event-teasers .event-teasers-slider { display: flex; flex-direction: column; } main > div.page-variant > section.layout-event-teasers .event-teasers-slider .splide__track { order: 1; overflow: hidden; } /* Die Liste ist dieselbe ol wie auf dem Desktop und traegt dort flex-direction: column — als Splide-Spur muss sie in die Reihe. */ main > div.page-variant > section.layout-event-teasers .event-teasers-slider .splide__list { display: flex !important; flex-direction: row !important; gap: 0 !important; } main > div.page-variant > section.layout-event-teasers .event-teasers-slider .splide__slide { flex: 0 0 auto; } main > div.page-variant > section.layout-event-teasers .event-teasers-slider .splide__arrows { order: 2; display: flex; /* Nur so breit wie die beiden Pfeile. Der Slider ist positioniert und malt damit ueber den (statischen) Fuss: eine 358 px breite Pfeilzeile legte sich unsichtbar ueber den "Alle Events"-Button, der dadurch nicht klickbar war. */ width: fit-content; gap: 16px; margin-top: 24px; } main > div.page-variant > section.layout-event-teasers > .section-inner > footer { width: fit-content; /* -44 = Hoehe der Pfeilreihe. Damit liegen die Mitten von Pfeilen und Button exakt aufeinander, wie in der Insights-Sektion. */ margin-top: -44px; margin-left: auto; /* Der Slider ist positioniert und malt sonst ueber den in ihn hineingezogenen Fuss — der "Alle Events"-Button war dadurch nicht anklickbar. */ position: relative; z-index: 1; } /* --- D15 CTA ------------------------------------------ Die Frau steht im Design rechtsbuendig, das W im Hintergrund unten mittig statt rechts auf halber Hoehe. */ main > div.page-variant > section.layout-cta-talents .cols { background-position: center bottom !important; } main > div.page-variant > section.layout-cta-talents .col-image img { display: block; margin-left: auto !important; margin-right: 0 !important; } } /* ========================================================= PRUEFRUNDE 1 — TEIL E: Leons Nachtrag (30.08.2026) ========================================================= */ /* --- E1 Event-Pillen ohne Versalien ----------------------- layout-event-teasers.php baut die Pille jetzt aus zwei Teilen (Art und Ort je eine eigene weisse Pille, gesetzt aus type/location bzw. ersatzweise category/ort). Die Bestands- regel setzt sie in Versalien — Leon will normale Schreibung. */ main > div.page-variant > section.layout-event-teasers .metapill { text-transform: none !important; } /* --- E2 Unser Netzwerk: Pausenknopf ans untere Band -------- Das Layout-Script haengt den Umschalter erst 5,1 Sekunden nach dem Aufbau in den Sektionsfuss (deshalb war er in den ersten Messungen nicht zu sehen). Mobil rutschte er dadurch unter den "Alle Gesellschaften"-Button in eine zweite Zeile. Er gehoert rechts unten an das untere Logoband: absolut ueber dem Fuss, rechtsbuendig, Unterkante 8 px ueber dessen Oberkante — das ist genau die Unterkante des Bandes. */ @media (max-width: 603px) { main > div.page-variant > section.layout-logos-conveyor > footer { position: relative; } main > div.page-variant > section.layout-logos-conveyor > footer > .conveyor-toggle-wrapper { position: absolute; right: 0; bottom: 100%; width: auto; /* 8 px Ueberhang nach unten: der Knopf sitzt damit knapp unter der Unterkante des Bandes statt buendig damit (Leons Nachtrag "etwas tiefer"). */ margin-bottom: -8px; padding: 0; } } /* ================================================================ WPG-BACKEND — Designrunde 31.08.2026 (Leon) ---------------------------------------------------------------- Reine Optik, keine Funktion. Basis ist das Portal-Plugin (exwi-portal/dist/app.css), das VOR dieser Datei laedt — Overrides gegen Marcels ID-Ketten brauchen darum stellenweise !important. Der Portal-Umbruch liegt bei 768px (darunter Karten untereinander + Icon-Filter, darueber Grid/Liste + Filter-Pille). Reihenfolge wie in Leons Liste: Header, Sidebar, Bewerbungen. ================================================================ */ /* ---------- 1 HEADER ---------- */ /* --- 1.1 Mini-Hovermenue am Benutzer ---------------------------- Angleich an das Mini-Hovermenue der Hauptnavigation (#hov-tree- trunk, Appendix "Mini-Hovermenue: Werte der Statik"): gleiche Kiste (300px, Radius 20, Schatten 0 8 16 / 8 %, Padding 13/20/18) und gleiche Zeilen (Poppins 16.5px/700, 7px Luft, Hover in der Weltfarbe mit 6px Einzug). Die Geometrie bleibt unangetastet — der Kasten sitzt bereits auf derselben Oberkante wie das Menue-Pendant. */ #pageHeader nav .actions #user-nav #user-nav-sub { display: flex; flex-direction: column; gap: 0; width: 300px !important; min-width: 0 !important; max-width: none !important; padding: 13px 20px 18px !important; border-radius: 20px !important; background-color: var(--c-white); box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.08) !important; } /* Weltfarbe wie beim Menue-Pendant: WPG magenta, Talents navy */ #pageHeader nav .actions #user-nav #user-nav-sub { --wim-accent: var(--c-pri); } body:is(.mode-talents, .talents-nav) #pageHeader nav .actions #user-nav #user-nav-sub { --wim-accent: #2B4781; } #pageHeader nav .actions #user-nav #user-nav-sub .menu-item { display: block; margin: 0 !important; padding: 0 !important; } #pageHeader nav .actions #user-nav #user-nav-sub .menu-item a { display: block !important; padding: 7px 0 !important; border-radius: 0 !important; background: transparent !important; font-family: var(--font-hl); font-weight: 700 !important; font-size: 16.5px !important; line-height: 1.15 !important; color: var(--c-black) !important; transition: color 0.15s cubic-bezier(0.2, 0.7, 0.25, 1), padding-left 0.15s cubic-bezier(0.2, 0.7, 0.25, 1); } #pageHeader nav .actions #user-nav #user-nav-sub .menu-item a:is(:hover, :focus-visible) { background: transparent !important; color: var(--wim-accent) !important; padding-left: 6px !important; } #pageHeader nav .actions #user-nav #user-nav-sub .menu-item.current a, #pageHeader nav .actions #user-nav #user-nav-sub .menu-item a[aria-current] { background: transparent !important; color: var(--wim-accent) !important; } /* Der globale Link-Pfeil (::after mit font-size 0.001px) hebt sonst jede Zeilenbox um ~5px an — im Menue-Pendant genauso abgeraeumt. */ #pageHeader nav .actions #user-nav #user-nav-sub .menu-item a::before, #pageHeader nav .actions #user-nav #user-nav-sub .menu-item a::after { content: none !important; } /* --- 1.2 Profilbild ohne blauen Ring ---------------------------- Das Bild trug dauerhaft outline: 3px solid #2B4781 — auf der magenta Hover-Pille ein Fremdkoerper. Leons Vorgabe: entfernen oder magenta. Magenta gewaehlt: im Ruhezustand (weisse Leiste) bleibt der Ring als feine Fassung sichtbar, auf der Hover-Pille verschwindet er in deren Flaeche. */ /* Ring entfaellt inzwischen ganz — siehe Abschnitt 7.1 (Runde 4). */ #pageHeader #user-nav #user-nav-profile .pfp img { outline-color: var(--c-pri); } /* --- 1.3 Header-Einklapper ausblenden --------------------------- Marcels Schalter, der die Kopfleiste im Portal zusammenfaltet. Leon: vorerst raus. display:none statt Markup-Entfernung, damit er sich durch Loeschen dieser Regel reaktivieren laesst. */ #pageHeader #header-shrinker, #pageHeader nav .actions #header-shrinker { display: none !important; } /* ---------- 2 SIDEBAR ---------- */ /* --- 2.1 Navigation in Poppins ---------------------------------- Bestand: Source Sans 3 17px, aktiv 600 / sonst 500. Leon will dieselbe Staffelung in Poppins — Groesse und Farben bleiben. */ #exwi-portal-shell #sidenav nav a .txt, #exwi-portal-shell #nav-mobile-more .txt { font-family: var(--font-hl) !important; font-weight: 500 !important; } #exwi-portal-shell #sidenav nav a.active .txt, #exwi-portal-shell #sidenav nav a[aria-current] .txt { font-weight: 600 !important; } /* --- 2.2 Standort-Popup ----------------------------------------- Bestand: Source Sans 3 20px/300 durchgaengig in Talents-Navy — damit ist nicht zu erkennen, welcher Standort aktiv ist. Leon: alles Poppins in #555555, nur der aktive Standort im Talents-Blau. Groesse/Gewicht vom Ausloeser darunter uebernommen (Poppins 16/500), sonst stuenden 20px Light ueber 16px Medium. */ #exwi-portal-shell .wpg-switch-outer .custom-select .select-items div { font-family: var(--font-hl) !important; font-size: 16px !important; font-weight: 500 !important; color: #555555 !important; } #exwi-portal-shell .wpg-switch-outer .custom-select .select-items div.same-as-selected, #exwi-portal-shell .wpg-switch-outer .custom-select .select-items div[aria-selected="true"] { color: #2B4781 !important; } /* --- 2.3 z-index: Einklapp-Icon hinter das Standort-Popup ------- Beide sind Kinder von .sidenav-outer und liegen im selben Stapelkontext; der Shrinker stand mit z-index 100 ueber dem Popup (10). Das Popup hoch statt den Shrinker runter — so bleibt der Shrinker weiter ueber dem Seiteninhalt. */ #exwi-portal-shell .sidenav-outer .wpg-switch-outer { z-index: 101; } /* --- 2.4 Einklapp-Icon: Drehung statt 3D-Spiegelung ------------- Bestand: rotateY(180deg) — das Icon kippt durch die Tiefe und wirkt dabei wie ein Kartendreher. Ein Chevron gehoert in der Ebene gedreht. Dazu die Projektkurve und ohne die halbe Sekunde Verzoegerung: der Pfeil soll MIT der Leiste umschlagen, nicht danach. */ #exwi-portal-shell #sidenav-shrinker.bt-shrinker { transform: rotate(180deg) !important; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.25, 1) !important; } /* Eingeklappt zeigt der Pfeil wieder nach aussen. Die Bestandsregeln dafuer heissen rotateY(-180deg) / rotateY(0deg) und stecken im Zustandsblock ...#exwi-portal-shell.sidebar-shrunk (Klasse setzt SideNavPart.php per Cookie) — beide Zustaende muessen ersetzt werden, sonst bliebe der Pfeil stehen. */ #exwi-portal-shell.sidebar-shrunk #sidenav-shrinker.bt-shrinker { transform: rotate(0deg) !important; } /* ---------- 3 BEWERBUNGEN (Desktop) ---------- */ /* --- 3.1 Seitenkopf: h2 mit 24px Grundlinie --------------------- Leons Vorgabe fuer alle Portal-Unterseiten. */ #exwi-portal-shell .portal-page-header h2 { margin-bottom: 24px !important; } /* --- 3.2 Abstaende der Werkzeugleiste --------------------------- Kanban-Wrapper 1.5rem statt 1rem, Werkzeugmenue 1rem statt 1.5rem, Suchfeld auf die 300px des Designs (Bestand 220px). Nur ab 768px — darunter gilt Marcels Mobil-Satz. */ @media (min-width: 768px) { #exwi-portal-shell .part-wrapper.kanban-part-wrapper:is( .wpg-applications-part, .student-applications-part ) { gap: 1.5rem !important; } #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) > menu#tools { gap: 1rem !important; } #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) > menu#tools #appointments-search, #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) > menu#tools #appointments-search .input-field { width: 300px !important; flex-basis: 300px !important; } } /* --- 3.3 Popup "Sortieren nach" --------------------------------- Die Optionen stehen im Design in der Lauftext-Schrift, nicht in Poppins. Gewicht bleibt (das Design zeigt sie halbfett), nur Familie und Groesse ziehen nach. Die Ueberschrift bleibt Poppins. */ #exwi-portal-shell .col-settings menu label { font-family: var(--font-def) !important; font-size: 15px !important; } /* --- 3.4 Filter-Popup ------------------------------------------- Angleich an designs/WPG_Backend/filter_popup.png: 24px seitlich / 16px oben+unten, Trennlinie unter der Ueberschrift, Optionen in der Lauftext-Schrift und in normaler Staerke (das Design zeigt sie nicht halbfett). Der Fuss des Designs (Zuruecksetzen + Anwenden) bleibt bewusst weg — auf Desktop filtert die Seite live, ein Anwenden-Knopf waere ein Rueckschritt (Leons Ansage). */ #exwi-portal-shell .appointments-filters-wrapper form { padding: 16px 24px !important; } #exwi-portal-shell .appointments-filters-inner > div:first-child { align-items: center; justify-content: space-between; margin-bottom: 16px !important; padding-bottom: 12px !important; border-bottom: 1px solid #D4D4D4; } #exwi-portal-shell .appointments-filters-inner fieldset li label { font-family: var(--font-def) !important; font-size: 15px !important; font-weight: 400 !important; } /* --- 3.5 Leerzustand "Keine Eintraege" -------------------------- Bestand: 24px, halbfett, 3.2px Sperrsatz — schreit lauter als der Inhalt. Talents-Ton: stiller Hinweis in der Lauftext-Schrift, 15px, ohne Sperrsatz, im gedaempften Grau. */ #exwi-portal-shell table.itms > tfoot th { font-family: var(--font-def) !important; font-size: 15px !important; font-weight: 400 !important; letter-spacing: 0 !important; color: #727272 !important; text-align: center; } /* Der Leerzustand der LISTEN-Tabelle wird von Marcels JS nicht nachgezogen (die Kanban-Spalten bekommen serverseitig .hid am tfoot, die aus ihnen zusammengesetzte Liste nicht) — deshalb stand "Keine Eintraege" quer ueber den vorhandenen Zeilen, auf Mobil zusaetzlich ueber den Karten. Rein deklarativ geloest. */ #exwi-portal-shell table.itms:has(> tbody > tr) > tfoot { display: none !important; } /* --- 3.6 Schriftgroessen in den Karten/Zeilen ------------------- Leon: nur der Name traegt die Grundgroesse 17px, alles Uebrige 15px. Bestand war ein Gemisch aus 18.4 / 17 / 16. */ #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) tr.itm td .name, #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) tr.itm td .name span { font-size: 17px !important; } #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) tr.itm td, #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) tr.itm td .txtpill, #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) tr.itm td time, #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) tr.itm td span, #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) tr.itm td p, #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) tr.itm td a, #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) tr.itm td button { font-size: 15px !important; } /* Das Kuerzel im Avatar skaliert mit dem Kreis, nicht mit dem Text. */ #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) tr.itm td .image-details-container > span, #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) tr.itm td .pfp, #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) tr.itm td .pfp span { font-size: 16px !important; } /* --- 3.7 Aktionsknoepfe auf 34px ------------------------------- Feste Hoehe statt Padding-Rechnerei: der Knopf traegt je nach Rahmenstaerke sonst eine andere Hoehe. Rahmen nach Leons Vorgabe: Verschieben/Neuer Termin 1px, Ablehnen 2px. */ #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) tr.itm td.actions .wt-bt { display: inline-flex; align-items: center; justify-content: center; height: 34px !important; min-height: 34px; padding: 0 16px !important; border-width: 1px !important; line-height: 1 !important; } #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) tr.itm td.actions .wt-bt.reject { border-width: 2px !important; } /* --- 3.8 Statuszeile mit farbigem Punkt ------------------------- Das Design setzt vor "Warten auf Termin Bestaetigung", "Terminaenderung vom Bewerber", "Termin bestaetigt" und "Abgelehnt am …" einen Punkt in der jeweiligen Statusfarbe. currentColor uebernimmt sie automatisch. Der Punkt sitzt auf der Mitte der ersten Zeile, damit mehrzeilige Texte nicht verrutschen. */ #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) tr.itm td.status-extra p { position: relative; padding-left: 14px; font-weight: 500 !important; } #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) tr.itm td.status-extra p::before { content: ''; position: absolute; left: 0; top: 0; width: 6px; height: 6px; border-radius: var(--rad-inf, 999px); background-color: currentColor; margin-top: 6px; margin-top: calc((1lh - 6px) / 2); } /* ---------- 4 BEWERBUNGEN MOBIL (< 768px) ---------- */ @media (max-width: 767px) { /* --- 4.1 Suchfeld ueber die volle Breite, 12px zum Filter-Icon. Der Bestand rechnet das bei frischem Aufbau bereits richtig aus; hier festgeschrieben, damit es in keinem Zwischenzustand (Drehung, nachtraeglicher Resize) auf die Desktop-Breite zurueckfaellt. */ #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) > menu#tools { gap: 12px !important; } #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) > menu#tools > li:has(#appointments-search) { flex: 1 1 auto !important; min-width: 0; } #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) > menu#tools #appointments-search, #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) > menu#tools #appointments-search .input-field, #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) > menu#tools #appointments-search input { width: 100% !important; flex-basis: auto !important; } /* Suchfeld war 43px hoch, der Filter-Knopf daneben 44px. */ #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) > menu#tools #appointments-search .input-field, #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) > menu#tools #appointments-search input { height: 44px !important; } /* --- 4.2 cell-inner ohne Kopfabstand ------------------------- Die Karte ist mobil ein umbrechender Flex-Container mit row-gap 8px — die zusaetzlichen 4/8/12px Kopfabstand der cell-inner summierten sich darauf und machten die Abstaende ungleich. */ #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) tr.itm td .cell-inner { padding-top: 0 !important; } /* --- 4.3 Filter-Popup mobil ---------------------------------- Bestand: die Optionen umbrechen zwei- und dreispaltig und ergeben eine unruhige Treppe. Mobil eine Option je Zeile, Gruppen deutlich voneinander abgesetzt. */ #exwi-portal-shell .appointments-filters-inner > div:nth-child(2) { flex-direction: column; gap: 20px !important; } #exwi-portal-shell .appointments-filters-inner fieldset ul { flex-direction: column; flex-wrap: nowrap !important; gap: 4px !important; } #exwi-portal-shell .appointments-filters-inner fieldset li, #exwi-portal-shell .appointments-filters-inner fieldset li label { width: 100%; } } /* --- 3.6b Nachtrag: der Name braucht die lange Kette ------------ Marcels Regel dafuer ist ...table.itms tbody tr td.person a h4 mit !important und container-abhaengigem clamp(…, 1.15cqw, …) — kuerzere Selektoren verlieren dagegen. */ #exwi-portal-shell .exwi-portal-content .part-wrapper.kanban-part-wrapper:is( .wpg-applications-part, .student-applications-part ) .part.kanban-part table.itms tbody tr.itm td.person a h4.name, #exwi-portal-shell .exwi-portal-content .part-wrapper.kanban-part-wrapper:is( .wpg-applications-part, .student-applications-part ) .part.kanban-part table.itms tbody tr.itm td.person a h4.name span { font-size: 17px !important; } /* --- 3.8b Nachtrag: Punkt und Einzug durchsetzen --------------- Marcels Regel setzt padding als Kurzform (0.25rem) mit laengerer Kette; in der Listenansicht ist das p zudem ein Flex-Container, der das absolut gesetzte Pseudo sonst auf Zeilenhoehe zieht. */ #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) tr.itm td.status-extra p { padding-left: 14px !important; } #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) tr.itm td.status-extra p::before { right: auto !important; bottom: auto !important; align-self: flex-start !important; width: 6px !important; height: 6px !important; } @media (max-width: 767px) { /* --- 4.4 Leerzustaende der Spalten --------------------------- Mobil sind die vier Kanban-Spalten zu einer Liste gestapelt und ohne Spaltenkopf — je Spalte ein "Keine Eintraege" ist dort sinnlos (Leon). Sobald irgendeine Karte da ist, verschwinden alle; ist das Board komplett leer, bleibt genau einer stehen, damit die Seite nicht wortlos leer bleibt. */ #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) .kanban-part:has(tbody > tr) table.itms > tfoot { display: none !important; } #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) .kanban-stages:not(:has(tbody > tr)) > section.stage-col:not(:first-of-type) table.itms > tfoot { display: none !important; } /* --- 4.5 Markierung "hier ist die WPG dran" ------------------ Mobil ist die Zeile selbst die Karte (padding 16/20, Radius 12). Die Bestandsregel setzt den Rahmen aber mit inset 12px/24px — 24 > 20, der Rahmen schnitt also quer durch Avatar und Text. Mobil gehoert er auf die Kartenkante. */ #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) table.itms tbody tr.itm.attention::after { inset: 0 !important; border-radius: 12px !important; } } @media (max-width: 767px) { /* Marcels Regel dafuer traegt die Kette ... .kanban-stages .stage-col[data-count="0"] tfoot mit !important — nur eine mindestens so lange Kette kommt dagegen an. */ #exwi-portal-shell .exwi-portal-content > .parts .part-wrapper .part.kanban-part .kanban-stages:has(tbody > tr) .stage-col[data-count="0"] tfoot, #exwi-portal-shell .exwi-portal-content > .parts .part-wrapper .part.kanban-part .kanban-stages:not(:has(tbody > tr)) > section.stage-col[data-count="0"]:not(:first-of-type) tfoot { display: none !important; } } @media (max-width: 767px) { /* Marcels Filter-Regeln haengen an zwei IDs (.appointments-filters-wrapper #appointments-filters …) — hier gewinnt nur !important. Mobil eine Option je Zeile. */ #exwi-portal-shell .appointments-filters-inner > div:nth-child(2) { flex-direction: column !important; gap: 20px !important; } #exwi-portal-shell .appointments-filters-inner fieldset > ul { flex-direction: column !important; flex-wrap: nowrap !important; gap: 2px !important; } #exwi-portal-shell .appointments-filters-inner fieldset > ul > li { width: 100% !important; flex: 0 0 auto !important; } #exwi-portal-shell .appointments-filters-inner fieldset > ul > li > label { display: block !important; width: 100% !important; } } /* ================================================================ WPG-BACKEND — Nachtrag 31.08.2026 (Leons zweite Runde) ================================================================ */ /* --- 5.1 Spaltenbreiten der Listenansicht ----------------------- Bestand: repeat(6, 1fr) 2fr. Der Name brach damit auf bis zu vier Zeilen um, die Aktionsknoepfe auf zwei — die Zeile wurde 127px hoch. Und weil die Aktionszelle als einzige oben anschlaegt statt mittig zu sitzen, lag der gelbe Rahmen der "hier ist die WPG dran"-Zeile (inset 12px) praktisch auf den Knoepfen: das war der falsche Abstand. Neue Verteilung nach den gemessenen Inhaltsbreiten und den Proportionen des Designs (Bewerber gut 21 %, Aktionen gut 28 %); dazu das Innenpadding der Personen-Verlinkung (12/16 auf 8/8, Abstand 16 auf 12) und der Knoepfe (16 auf 14) leicht gestrafft. Bis hinunter zu 1500px stehen Name, Pillen und Knoepfe damit einzeilig und die Zeile ist 87 statt 127px hoch — der Rahmen hat wieder Luft. Die Aktionszelle wird zusaetzlich vertikal zentriert, damit der Rahmen auch dann symmetrisch sitzt, wenn die Knoepfe auf schmaleren Schirmen doch umbrechen. */ @media (min-width: 768px) { #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) .kanban-list table.itms thead tr, #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) .kanban-list table.itms tbody tr { grid-template-columns: minmax(230px, 1.45fr) /* Bewerber — 230 traegt "Schiefer, Patrick" einzeilig */ minmax(138px, 0.97fr) /* Typ — Pille "Tagespraktikum" */ minmax(118px, 0.84fr) /* Status — Pille "In Pruefung" */ minmax(96px, 0.69fr) /* Zeitraum — Bereiche duerfen zweizeilig */ minmax(165px, 0.9fr) /* Dokumente — "Weitere Daten" einzeilig */ minmax(126px, 1.25fr) /* Details */ minmax(372px, 1.9fr) /* Aktionen — drei Knoepfe plus zwei Abstaende */ !important; } /* 1fr ist minmax(auto, 1fr) — ohne min-width 0 sprengt das laengste Wort die Spur (dokumentierte Falle des Projekts). */ #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) .kanban-list table.itms tr > * { min-width: 0; } #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) .kanban-list table.itms tbody tr td.person a { padding-left: 8px !important; padding-right: 8px !important; gap: 12px !important; } #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) .kanban-list table.itms tbody tr td.actions .wt-bt { padding: 0 14px !important; } #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) .kanban-list table.itms tbody tr td.actions .cell-inner { align-content: center; min-height: 100%; } } /* --- 5.2 Standort-Popup: Text on hover weiss -------------------- Die Bestandsregel .select-items div:hover setzt Navy-Flaeche UND weisse Schrift; unsere Farbregel aus Abschnitt 2.2 traegt !important und hat den Hover-Text wieder auf #555555 gezogen. Hier also nachziehen — auch fuer den bereits aktiven Standort. */ #exwi-portal-shell .wpg-switch-outer .custom-select .select-items div:hover, #exwi-portal-shell .wpg-switch-outer .custom-select .select-items div.same-as-selected:hover { color: var(--c-white) !important; } /* --- 5.3 Mobil immer die Kartenansicht -------------------------- Marcels Umschalter Grid/Liste verschiebt die Zeilen zwischen den Kanban-Spalten und der Listentabelle und setzt dabei display INLINE (kanban-stages: grid, kanban-list: none). Auf Mobil ist der Umschalter ausgeblendet — stand die Liste aktiv, blieb die Tabelle unbrauchbar schmal stehen; und selbst nach Grid-Liste- Grid schlug das inline gesetzte display:grid die Mobil-Regel, so dass die Karten in einer 44px-Spalte klebten. Beides hier deklarativ abgefangen, den Moduswechsel selbst erledigt der Zusatz in dist/talents.js. */ @media (max-width: 767px) { #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) .kanban-part > .kanban-stages { display: flex !important; } #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) .kanban-part > .kanban-list { display: none !important; } } /* ================================================================ WPG-BACKEND — Feinschliff Liste, 31.08.2026 (Leons dritte Runde) ================================================================ */ /* --- 6.1 Die Markierung teilt sich das Pseudo mit der Trennlinie Das ist die eigentliche Ursache des "falschen Abstands": in der Listenansicht IST tr::after die Trennlinie (tr:not(:last-child)::after mit height 1px, Flaeche #D4D4D4 und inset auto 1.5rem 0). Der gelbe Rahmen sitzt auf demselben Pseudo-Element und erbt darum Hoehe und Flaeche — er wird zu einem waagerechten Balken. Nur wenn die markierte Zeile zufaellig die LETZTE ist, greift :not(:last-child) nicht und der Rahmen entsteht als Kasten; genau so sah es in Leons Testdatensatz mit zwei Eintraegen aus. Bei elf Eintraegen faellt es sofort auf. Hoehe und Flaeche also zuruecknehmen. Abstand 8px senkrecht / 4px waagerecht: gemessen ergibt das rundum 8px Luft zum Inhalt (Zellenpadding 13 bzw. 12px). */ #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) .kanban-list table.itms tbody tr.attention::after { height: auto !important; background-color: transparent !important; inset: 0.5rem 0.25rem !important; } /* --- 6.2 Details ohne Text bekommen keinen Punkt ---------------- Bei Status "Neu" ist die Detailspalte leer, das p enthaelt aber ein Leerzeichen — :empty greift also nicht, und der Statuspunkt aus Abschnitt 3.8 stand allein in der Spalte. Marcel setzt der Zelle in dem Fall .hid; daran haengen wir uns. */ #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) tr.itm td.status-extra.hid p::before { content: none !important; } /* --- 6.3 Dokumente in der Liste auf 15px ------------------------ In Runde 1 uebersehen: fuer die Listenansicht setzt Marcel clamp(0.8rem, 1vw, 1rem) mit !important — bei 1920px also 16px. Dadurch brach "Weitere Daten" zweizeilig um. */ #exwi-portal-shell .exwi-portal-content .part-wrapper.kanban-part-wrapper:is( .wpg-applications-part, .student-applications-part ) .part.kanban-part .kanban-list table.itms tbody tr.itm td.files .cell-inner a { font-size: 15px !important; } /* --- 6.4 Spaltenbreiten nachjustiert ---------------------------- Die Werte in Abschnitt 5.1 sind ersetzt. Grundlage sind jetzt die bei 1920px gemessenen Inhaltsbreiten (Typ-Pille bis 190, Status-Pille bis 165, Dokumente-Eintrag 176, Details 245, Knopfreihe 314 plus Padding) — vorher lief die Typ-Pille in die Status-Spalte hinein und Details brach dreizeilig um. Zeitraum bekommt bewusst weniger: Datumsbereiche ("vom 01.01 bis 01.02.2027") sind zweizeilig vertretbar, das Design zeigt an der Stelle ohnehin nur Einzeldaten. */ /* --- 6.5 Spaltenbreiten als minmax statt reiner fr --------------- Reine fr-Anteile tragen hier nicht: die Aktionsknoepfe haben eine feste Pixelbreite (drei Knoepfe plus Abstaende brauchen 316px), ein prozentualer Anteil unterschreitet die ab etwa 1700px. Genau deshalb brachen die Knoepfe bei 1663px wieder um, obwohl es bei 1920px passte. Jede Spur bekommt darum eine gemessene Untergrenze und darueber ihren Anteil am Rest — bei 1920px stehen damit alle Zeilen einzeilig auf 87px. Untergrenzen zusammen 1245px. Statt die Spalten darunter ineinanderlaufen zu lassen (so war es vorher: Name und Typ-Pille ueberlagerten sich unter ~1300px), scrollt die Tabelle jetzt waagerecht — die Seite selbst bleibt bei jeder Breite ohne Querlauf. Die Knoepfe bekommen dafuer 12 statt 14px Innenabstand. */ @media (min-width: 768px) { #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) .kanban-list { overflow-x: auto; } #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) .kanban-list > table.itms { width: 100% !important; min-width: 1245px !important; } #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) .kanban-list table.itms tbody tr td.actions .wt-bt { padding: 0 12px !important; } } .autoComplete_wrapper > ul > li { gap: 0 !important; } /* ================================================================ WPG-BACKEND — Runde 4 (Leon, 31.08.2026) Header, Mobil-Grundlagen, Ausschreibungen, Feedback, Standort & Profil, Materialien ================================================================ */ /* --- 7.1 Benutzer-Pille im Header ------------------------------- Der Ring am Profilbild faellt ganz weg (in Runde 1 nur umgefaerbt). Die Pille bekommt Innenabstand, damit der Bildkreis nicht mehr auf ihrer Kante klebt — 16px links wie der Text, 8px rechts, 4px oben und unten. Und die Anrede "Willkommen" wird auf der magenta Flaeche mitweiss: Marcels Regel faerbt nur die KINDER von .greeting (den Namen), der Textknoten davor blieb dunkel. */ #pageHeader nav .actions #user-nav #user-nav-profile .pfp img { outline: none !important; } /* Ab 1501px ist #user-nav die breite Pille mit Anrede; darunter klappt der Bestand sie auf einen 40x40-Kreis zusammen (@media max-width 1500: #user-nav { width/height: 2.5rem }). Das Padding darf deshalb NUR im ausgeklappten Zustand gelten — sonst schiebt es den Bildkreis aus der Pille. Und weil die Pillenhoehe fest ist (3.25rem), muss der Kreis auf die Innenhoehe: 3.25rem minus 8px Padding. */ @media (min-width: 1501px) { #pageHeader nav .actions #user-nav { padding: 4px 8px 4px 16px; border-radius: var(--rad-inf, 999px); } #pageHeader nav .actions #user-nav #user-nav-profile > :is( a, button ) { grid-template-columns: 1fr calc(3.25rem - 8px) !important; } #pageHeader nav .actions #user-nav #user-nav-profile .pfp, #pageHeader nav .actions #user-nav #user-nav-profile .pfp img { width: calc(3.25rem - 8px) !important; height: calc(3.25rem - 8px) !important; min-width: 0 !important; min-height: 0 !important; } } /* Im zusammengeklappten Zustand fuellt der Kreis die Pille wieder ganz. Auf den oeffentlichen Seiten macht das der Bestand selbst; im Portal gewinnt dort eine Regel mit var(--wi-bt-base-size) (44px) gegen die 40px-Pille — genau der Ueberstand, den Leon gesehen hat. */ @media (max-width: 1500px) { #pageHeader nav .actions #user-nav { padding: 0 !important; } #pageHeader nav .actions #user-nav #user-nav-profile .pfp, #pageHeader nav .actions #user-nav #user-nav-profile .pfp img { width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; } } #pageHeader nav .actions #user-nav:hover .greeting { color: var(--c-white) !important; } /* Das Hovermenue haengt am Innenrand der Pille — mit dem neuen Padding sonst 8px zu weit links. */ @media (min-width: 1501px) { #pageHeader nav .actions #user-nav #user-nav-sub-wrap { right: -8px; } } /* --- 7.2 Mobil: kein Luftpolster ueber der Leiste --------------- .exwi-portal-content trug unten 16px Padding; beim Ans-Ende-Scrollen stand dadurch ein heller Streifen zwischen Inhalt und Navigations- leiste. Der Inhalt soll direkt an der Leiste enden. */ /* Der Abstand gehoert an das Ende des Scrollens, nicht als dauerhafter Streifen ueber die Leiste. Wo .exwi-portal-content selbst scrollt (Ausschreibungen, Materialien, Profil, Einstellungen), leistet ihr padding-bottom genau das. Auf Bewerbungen und Feedback scrollt ein inneres Element — dort erzeugte dasselbe Padding den festen Streifen, den Leon beanstandet hatte. Deshalb dort am jeweiligen Scroller: .kanban-stages ueber padding, die Feedback-Liste ueber die letzte Zeile (ihr Scroller zaehlt eigenes Padding nicht in scrollHeight — nachgemessen). */ @media (max-width: 767px) { #exwi-portal-shell .exwi-portal-content { padding-bottom: 16px !important; } #exwi-portal-shell .exwi-portal-content:has(.kanban-stages, .feedbacks-list) { padding-bottom: 0 !important; } #exwi-portal-shell .kanban-stages { padding-bottom: 16px !important; } #exwi-portal-shell .feedbacks-list table.itms tbody > tr:last-child { margin-bottom: 16px !important; } } /* --- 7.3 Bewerbungen: drei Nachtraege --------------------------- a) Das Sortier-Popup wurde in kurzen Spalten unten abgeschnitten: .stage-col und .stage-col-inner klippen (overflow hidden), und eine leere Spalte ist nur gut 100px hoch. Solange das Popup offen ist, klippt dort nichts. b) Der Umschalter Grid/Liste lief mit 0.6s clip-path plus 0.5s Filter mit 0.2s Verzoegerung — fuer einen Zweizustands-Schalter viel zu traege. 0.22s mit der Projektkurve, wie der Welt-Slider. c) Der Karteninhalt sass nicht mittig: die Personen-Verlinkung bringt 12px Kopfabstand mit, die sich auf das Kartenpadding addierten (25px oben gegen 13px unten). */ #exwi-portal-shell .kanban-stages > section.stage-col:has(.col-settings-wrapper input:checked), #exwi-portal-shell .kanban-stages > section.stage-col:has(.col-settings-wrapper input:checked) > .stage-col-inner { overflow: visible !important; } #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) menu#tools .toggle-inner { transition: filter 0.22s cubic-bezier(0.2, 0.7, 0.25, 1) !important; } #exwi-portal-shell :is( .wpg-applications-part, .student-applications-part ) menu#tools .toggle-inner .layer-front { transition: clip-path 0.22s cubic-bezier(0.2, 0.7, 0.25, 1) !important; } /* Korrektur: der Kopfabstand darf nicht einfach wegfallen — die Verlinkung ist zugleich die Hover-Pille um Avatar und Namen, und ohne ihn sass die Pille 12px versetzt (oben 0, unten 12). Das Padding bleibt also symmetrisch, der Karteninhalt rueckt statt- dessen ueber einen negativen Aussenabstand nach oben. Ergebnis: Pille 12/12, Karte 13/13. */ @media (min-width: 768px) { #exwi-portal-shell .kanban-stages table.itms tbody tr.itm td.person a { padding-top: 12px !important; margin-top: -12px !important; } } /* --- 7.4 Ausschreibungen ---------------------------------------- Feldbeschriftungen 16 auf 17px (Desktop kennt kein 16px) und der Abstand darunter von 10 auf 8px. Eingabefelder und Textfeld bekommen 12px Innenabstand oben/unten, der eingegebene Text 15px. Der Absenden-Knopf 1.5rem seitlich. */ @media (min-width: 768px) { #exwi-portal-shell .part.flag .input-field-label { font-size: 17px !important; padding-bottom: 8px !important; } #exwi-portal-shell .part.flag .input-field input, #exwi-portal-shell .part.flag .input-field textarea { padding-top: 12px !important; padding-bottom: 12px !important; font-size: 15px !important; } #exwi-portal-shell .part.flag .bts button.wt-bt { padding-left: 1.5rem !important; padding-right: 1.5rem !important; font-size: 17px !important; } } /* Einklappbare Boxen: das

ist schon da, Marcels Skript unterbindet aber den Klick auf (die Box folgt sonst nur dem Schalter). Statt dagegen zu arbeiten setzt talents.js einen eigenen Chevron-Knopf links neben den Schalter — das Design zeigt ihn genau dort. Icon ist die Portal-Maske "arr-simp". */ #exwi-portal-shell .part.flag summary.flag-trigger { cursor: default; } #exwi-portal-shell .part.flag summary.flag-trigger > .wi-flag-collapse { flex: none; width: 2rem; height: 2rem; margin-left: auto; padding: 0; border: 0; border-radius: var(--rad-inf, 999px); background: transparent; color: var(--c-grey-profile, #727272); cursor: pointer; transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.25, 1), background-color 0.15s cubic-bezier(0.2, 0.7, 0.25, 1); } #exwi-portal-shell .part.flag summary.flag-trigger > .wi-flag-collapse:hover { background-color: rgba(0, 0, 0, 0.05); } #exwi-portal-shell .part.flag summary.flag-trigger > .wi-flag-collapse .wt-icon { mask-size: auto 0.75rem; -webkit-mask-size: auto 0.75rem; } /* Die Portal-Maske "arr-simp" zeigt nach rechts: zugeklappt also 90 Grad (nach unten), aufgeklappt minus 90 (nach oben). */ #exwi-portal-shell .part.flag summary.flag-trigger > .wi-flag-collapse { transform: rotate(90deg); } #exwi-portal-shell .part.flag details[open] > summary.flag-trigger > .wi-flag-collapse { transform: rotate(-90deg); } /* Der Schalter rueckt hinter den Chevron; das margin-left:auto am Chevron uebernimmt den Schub nach rechts. */ #exwi-portal-shell .part.flag summary.flag-trigger > .switch { margin-left: 0.75rem; } /* Thumbnail-Auswahl: Haken kleiner (fuellte den Kreis zu 70 %) und ein leichter blauer Schleier auf dem markierten Bild. */ #exwi-portal-shell .offer-thumb-wrapper .mark-selected .wt-icon { mask-size: auto 0.75rem !important; -webkit-mask-size: auto 0.75rem !important; } #exwi-portal-shell .offer-thumb-wrapper.selected > label { position: relative; display: block; } #exwi-portal-shell .offer-thumb-wrapper.selected > label::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background-color: rgba(43, 71, 129, 0.18); pointer-events: none; } /* Mobil ruecken die beiden Traeger (.flag-trigger, .flag-content-inner) 12px ein — mehr nicht. Die Eingabefelder bringen selbst 16px Innenabstand mit, der getippte Text steht damit bei 28px; eine zweite Einrueckstufe haette ihn auf 40px geschoben. Die beiden Trennstriche liegen mit 4px Eigenabstand bei 16px ab Kartenkante (Leons Vorgabe). */ @media (max-width: 767px) { #exwi-portal-shell .part.flag > details > summary.flag-trigger, #exwi-portal-shell .part.flag > details > .flag-content > .flag-content-inner { padding-left: 12px !important; padding-right: 12px !important; } #exwi-portal-shell .part.flag .flag-content-inner > hr, #exwi-portal-shell .part.flag .flag-content-inner > form > hr { margin-left: 4px !important; margin-right: 4px !important; } } /* --- 7.5 Feedback ----------------------------------------------- Die Seite ist wie Bewerbungen gebaut, also dieselben Werte: Suchfeld 300px, Werkzeugleiste 1rem, in den Zeilen traegt nur der Name die Grundgroesse 17px, alles Uebrige 15px (hier war fast alles 16px). Mobil die Zwischenueberschriften auf 13px. */ @media (min-width: 768px) { #exwi-portal-shell .wpg-feedbacks-part > menu#tools { gap: 1rem !important; } #exwi-portal-shell .wpg-feedbacks-part > menu#tools #feedbacks-search, #exwi-portal-shell .wpg-feedbacks-part > menu#tools #feedbacks-search .input-field { width: 300px !important; flex-basis: 300px !important; } } #exwi-portal-shell .wpg-feedbacks-part tr td .name, #exwi-portal-shell .wpg-feedbacks-part tr td .name span { font-size: 17px !important; } #exwi-portal-shell .wpg-feedbacks-part tr td, #exwi-portal-shell .wpg-feedbacks-part tr td span, #exwi-portal-shell .wpg-feedbacks-part tr td time, #exwi-portal-shell .wpg-feedbacks-part tr td p, #exwi-portal-shell .wpg-feedbacks-part tr td a, #exwi-portal-shell .wpg-feedbacks-part tr td button, #exwi-portal-shell .wpg-feedbacks-part tr td blockquote { font-size: 15px !important; } /* Kuerzel im Avatar skaliert mit dem Kreis, nicht mit dem Text. */ #exwi-portal-shell .wpg-feedbacks-part tr td .image-details-container > span { font-size: 16px !important; } @media (max-width: 767px) { #exwi-portal-shell .wpg-feedbacks-part h5 { font-size: 13px !important; } } /* --- 7.6 Standort & Profil -------------------------------------- Kartenpolster 20 auf 24px (gilt fuer alle Portal-Unterseiten mit Ausnahme der Kanban-Wrapper, die bewusst auf 0 stehen), der Abstand unter der Kartenueberschrift 24 auf 16px. In den Detailzeilen faellt der 2px-Kopfabstand weg, der Wert darunter ruecke auf 4px und bekommt 120 % Zeilenhoehe. Die Zeilen-Icons gehen von #555555 auf das gedaempfte #727272 und auf 1rem. */ @media (min-width: 768px) { #exwi-portal-shell .parts > .part-wrapper:not(.kanban-part-wrapper) { padding-top: 24px !important; padding-bottom: 24px !important; } } #exwi-portal-shell .part-wrapper .title-wrapper { padding-bottom: 16px !important; } #exwi-portal-shell .wpg-profile-details-part li > .txt { padding-top: 0 !important; } #exwi-portal-shell .wpg-profile-details-part li > .txt p { margin-top: 4px !important; line-height: 120% !important; } #exwi-portal-shell .wpg-profile-details-part li > .bullet .wt-icon { background-color: var(--c-grey-profile, #727272) !important; mask-size: auto 1rem !important; -webkit-mask-size: auto 1rem !important; } /* Instagram vor LinkedIn (Leons Reihenfolge). Die beiden liegen in einer eigenen Flex-Zeile, order genuegt. */ #exwi-portal-shell .wpg-profile-details-part li:has(.wt-icon[data-icon="instagram"]) { order: -1; } /* Technische Verwaltung: der Schalter stand mittig zur Beschriftung. Mit dem laengeren Text gehoert er auf die erste Zeile. */ #exwi-portal-shell .wpg-profile-responsible-part .flags .flag { align-items: flex-start !important; } #exwi-portal-shell .wpg-profile-responsible-part .flags .flag > label { font-size: 17px !important; line-height: 1.35 !important; /* Der Satz lief ueber die volle Kartenbreite (646 px bei 1920, 582 px bei 1180). Leons Vorgabe: hoechstens 520 px. Unterhalb davon aendert sich nichts — bei 1440 ist die Karte ohnehin nur 480 px breit, mobil 321. Der Schalter bleibt, wo er ist, weil das margin-right:auto der Bestandsregel den Rest schluckt. */ max-width: 520px; } /* --- 7.7 Materialien: Download-Knoepfe bleiben lesbar ----------- Die Bestandsregel a.wt-bt:is(:visited,:active,:focus) faerbt den Text weiss — gedacht fuer gefuellte Knoepfe. Die Download-Knoepfe sind aber weiss mit magenta Schrift; nach dem ersten Klick (bzw. als besuchter Link) verschwand die Beschriftung. */ #exwi-portal-shell a.wt-bt.wt-bt-dl:visited:not(:hover):not(:focus):not(:active), #exwi-portal-shell a.wt-bt.wt-bt-dl:visited:not(:hover):not(:focus):not(:active) * { color: var(--c-pri) !important; } /* Nur der Ruhezustand: auf :hover und :focus faerbt der Bestand die Flaeche magenta, dort ist die weisse Schrift richtig. Betroffen war allein der besuchte Link ohne Fokus — weiss auf weiss. */ /* --- 7.8 Feedback: richtige Selektorketten ---------------------- Nachtrag zu 7.5. Zwei Fehlgriffe: die Werkzeugleiste haengt an .feedbacks-part-wrapper (Geschwister von .wpg-feedbacks-part, nicht Kind), und fuer die Zeilentexte gewinnt Marcels Kette ... .feedbacks-list table.itms tbody tr td.person a p * mit !important. Beides hier mit passender Laenge nachgezogen. */ @media (min-width: 768px) { #exwi-portal-shell .part-wrapper.feedbacks-part-wrapper > menu#tools { gap: 1rem !important; } #exwi-portal-shell .part-wrapper.feedbacks-part-wrapper > menu#tools #feedbacks-search, #exwi-portal-shell .part-wrapper.feedbacks-part-wrapper > menu#tools #feedbacks-search .input-field { width: 300px !important; flex-basis: 300px !important; } } #exwi-portal-shell .exwi-portal-content > .parts .part-wrapper.feedbacks-part-wrapper .part.wpg-feedbacks-part .feedbacks-list table.itms tbody tr td.person a h4, #exwi-portal-shell .exwi-portal-content > .parts .part-wrapper.feedbacks-part-wrapper .part.wpg-feedbacks-part .feedbacks-list table.itms tbody tr td.person a h4 span { font-size: 17px !important; } #exwi-portal-shell .exwi-portal-content > .parts .part-wrapper.feedbacks-part-wrapper .part.wpg-feedbacks-part .feedbacks-list table.itms tbody tr td.person a p, #exwi-portal-shell .exwi-portal-content > .parts .part-wrapper.feedbacks-part-wrapper .part.wpg-feedbacks-part .feedbacks-list table.itms tbody tr td.person a p * { font-size: 15px !important; } @media (max-width: 767px) { #exwi-portal-shell .part-wrapper.feedbacks-part-wrapper h5 { font-size: 13px !important; } } /* --- 7.9 Grosses Thumbnail ohne Blindrahmen --------------------- Die Vorschau (.offer-thumb-wrapper.main) trug dauerhaft border: 2px solid transparent und damit einen 2px-Rand um das Bild. Rahmen raus; falls die Vorschau selbst die Auswahl ist, markiert sie jetzt eine Outline nach innen — die veraendert die Kachelgroesse nicht. */ #exwi-portal-shell .offer-thumb-wrapper.main { border-width: 0 !important; } #exwi-portal-shell .offer-thumb-wrapper.main.selected { outline: 2px solid #2B4781; outline-offset: -2px; } .autoComplete_wrapper > input:focus::placeholder { font-size: inherit; } /* ================================================================ WPG-BACKEND — Runde 7 (Leon, 31.08.2026) ================================================================ */ /* --- 8.1 Kopfleiste: Aktionen mittig ---------------------------- Der Bestand setzt .actions im Portal auf align-self: flex-start plus 16px Kopfabstand — der Block sass damit 19px zu hoch (Mitte 58 gegen 77 bei Logo und Wordmark). Beim Hovern faellt das an der magenta Pille sofort auf. Jetzt auf einer Linie mit dem Lockup. Gleiche Kettenlaenge wie die Bestandsregel plus > nav, damit sie sicher gewinnt. */ body.exwi-portal:not(.page-login) #pageHeader > nav > .actions { align-self: center !important; margin-top: 0 !important; } /* --- 8.2 Die letzten 16px auf Desktop --------------------------- Von Leon geprueft: an diesen Stellen gehoert 15px hin. Der Standort-Umschalter zieht das Popup mit, damit Ausloeser und Liste weiter dieselbe Groesse tragen (Runde 1). */ #exwi-portal-shell .wpg-switch-outer .custom-select .select-selected .txt, #exwi-portal-shell .wpg-switch-outer .custom-select .select-items div { font-size: 15px !important; } #exwi-portal-shell .offer-thumb-wrapper .mark-recommend { font-size: 15px !important; } #exwi-portal-shell .download-part a.wt-bt.wt-bt-dl { font-size: 15px !important; } /* --- 8.3 Filter mobil als Bottom-Sheet -------------------------- Gleiches Muster wie das "Mehr"-Sheet der unteren Leiste (#nav-mobile-more-inner): fest am unteren Rand ueber der Navigation, volle Breite, 16px Radius nur oben, Ziehgriff und derselbe Schatten. Zwei verschiedene Popup-Muster auf einer Seite waren unnoetige Reibung; ausserdem gewinnt die lange Filterliste durch die Hoehe und liegt in Daumenreichweite. */ @media (max-width: 767px) { #exwi-portal-shell .appointments-filters-wrapper form { position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 4.625rem !important; width: auto !important; max-height: calc(100dvh - 14rem); overflow-y: auto; padding: 24px 16px !important; border-radius: 16px 16px 0 0 !important; box-shadow: 0 0 16px 4px rgba(0, 0, 0, 0.1) !important; z-index: 3; } /* Ziehgriff wie beim "Mehr"-Sheet */ #exwi-portal-shell .appointments-filters-wrapper form::before { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 44px; height: 4px; border-radius: var(--rad-inf, 999px); background-color: #D4D4D4; } } /* --- 8.4 talents-Wordmark: 20px Kopfabstand auch im Backend ----- Auf den Talents-Unterseiten traegt a.talents-brand ab 1281px margin-top: 20px (Regel body:is(.mode-talents, .talents-nav) :not(.home) …). Das Portal laeuft als mode-wpg und bekam den Abstand deshalb nie. Gleiche Schwelle, gleicher Wert. */ @media (min-width: 1281px) { body.exwi-portal #pageHeader nav a.talents-brand { margin-top: 20px; } } /* --- 8.5 Aktionsknoepfe: Raster an die 34px anpassen ------------ Die Aktionszelle ist ein Raster mit grid-auto-rows: clamp(1.5rem, 1.7vw, 2.5rem) — bei 1600px also 27px. Seit die Knoepfe in Runde 1 fest auf 34px stehen, ragten sie ueber ihre Zeilen hinaus und frassen den 8px-Abstand: nach unten blieben 2px, die Knoepfe klebten aneinander. Die Zeilen richten sich jetzt nach ihrem Inhalt. In der Listenansicht gewinnt ausserdem eine Bestandsregel mit min-height: 2.5rem !important — dort standen die Knoepfe auf 40 statt der von Leon gesetzten 34px. Mobil bleibt es bei 40px, die 34px galten ausdruecklich nur fuer Desktop. */ #exwi-portal-shell .exwi-portal-content > .parts .part-wrapper .part.kanban-part table.itms tbody tr.itm td.actions .cell-inner { grid-auto-rows: auto !important; } @media (min-width: 768px) { #exwi-portal-shell .exwi-portal-content > .parts .part-wrapper .part.kanban-part .kanban-list table.itms tbody tr.itm td.actions .cell-inner button.wt-bt { height: 34px !important; min-height: 34px !important; } } /* ========================================================= QA-RUNDE DER BERUF (Leon, 02.09.2026) --------------------------------------------------------- Leons Detail-Kontrolle von /der-beruf/, Desktop und Mobil. Zusaetzlich in-place in dieser Datei: alle 21 Fliesstext- clamps von 0.9vw auf 1vw (17px greifen damit ab ~1700px statt erst ab 1889px; die Statik setzt fix 17px) und die drei padding-bottom: 0.14em der Subheads entfernt. ========================================================= */ /* --- D1: Button-Hover. Kanon der bereits abgenommenen Runden: Pille dunkelt auf das Theme-Hover-Magenta #B01E54 (Basisregel .wt-bt), diagonale Pfeile wandern 2px nach oben rechts (Claims-Scroller-Runde). Der schwarze Hover der Relevanz-Pille war ein Ausreisser. Die translate- Property komponiert unabhaengig von transform (item-link traegt translateY(-50%) im transform). Die wt-bt-Basis wackelt ihren Pfeil endlos (wiggleSlow) — fuer den Wertekodex-Knopf abgeschaltet, er bewegt sich wie alle anderen einmal in Pfeilrichtung. */ .layout-relevanz .relevanz-cta:is(:hover, :focus-visible) { background-color: #B01E54; color: var(--c-white); } .layout-relevanz .relevanz-cta { transition: background-color var(--dur) var(--ease); } .layout-relevanz .relevanz-cta::after, .layout-im-kern .item-link::after, .layout-haltung .haltung-code-link::after, .layout-cta-duo .cta-duo-button::after { transition: translate var(--dur) var(--ease); } .layout-relevanz .relevanz-cta:is(:hover, :focus-visible)::after, .layout-haltung .haltung-code-link:is(:hover, :focus-visible)::after { translate: 2px -2px; } /* item-link traegt einen Rechts-Chevron — der wandert nach rechts. */ .layout-im-kern .item-link:is(:hover, :focus-visible)::after { translate: 3px 0; } .layout-haltung .haltung-code-link:is(:hover, :focus)::after { animation: none; } /* CTA-Boxen: die ganze Karte ist der Link und reagiert schon mit Schatten und Hub — der Pfeil im Knopf zieht jetzt mit. Kein separater Knopf-Hover: es gibt nur EIN Ziel, zwei Hover-Zustaende wuerden zwei Ziele suggerieren. */ .layout-cta-duo .cta-duo-card:is(:hover, :focus-visible) .cta-duo-button::after { translate: 2px -2px; } /* --- D2: Klartext. Tabelle auf 24px-Radius; das Pfeil-Icon im Kreis eine Stufe kleiner (inset 9 -> 10). Mobil (603) behaelt der Wisch-Slider radius 0 bzw. seine eigenen Pfeilregeln. */ @media (min-width: 604px) { .layout-klartext .comparison-rows { border-radius: 1.5rem; } } .layout-klartext .comparison-arrow::after { inset: 10px; } /* --- D3: Relevanz-Pille auf die 17px-Konvention (die 15px stammten aus der Korrekturrunde vom 28.08.); unter 861px gilt weiter die 16px-Mobilkonvention. */ @media (min-width: 861px) { .layout-relevanz .relevanz-cta { font-size: 17px; } } /* --- D4: Im Kern, Zahlen 01/02/03 mittig zu den Headlines statt padding-top-Naeherung. */ .layout-im-kern .item-number { align-self: center; padding-top: 0; } /* --- D5: "Viel mehr. Als nur Pruefung." — H3 40px oben und 48px seitlich (fix statt 2.5vw/32px), die inneren Spalten ziehen auf dieselben 48px nach, damit Headline und Inhalt fluchten. Icon -> H4 8px, H4 -> Text 16px. Mobil behaelt der Wisch-Slider seine Kartenmasse (603er-Block). */ @media (min-width: 604px) { .layout-im-kern .im-kern-more h3 { padding: 2.5rem 3rem 0; } .layout-im-kern .more-item h4 { margin-bottom: 1rem; } } .layout-im-kern .more-icon { margin-bottom: 0.5rem; } /* --- D6: Haltung. Kopf auf die 32px der uebrigen Sektionen, Checkliste im Wertekodex auf 24px-Rhythmus. */ @media (min-width: 604px) { .layout-haltung .haltung-header { margin-bottom: 2rem; } .layout-haltung .haltung-checklist { gap: 1.5rem; } /* Akkordeon-Zeilen: Hoehe ueber symmetrisches Padding statt min-height 93px — mehrzeilige Titel bleiben damit im Rhythmus. Das Intro darueber gibt seinen Abstand ab, sonst addieren sich Margin und Padding. Mobil (603) hat bereits padding 1.125rem 0. */ .layout-haltung .haltung-accordion-item summary { min-height: 0; padding: 1.5rem 0; } } .layout-haltung .haltung-society-card .haltung-card-intro { margin-bottom: 0; } /* Auf- und Zuklappen der Antworten gleitet jetzt; der Plus-Knopf drehte schon immer. Progressive Enhancement: Browser ohne ::details-content/interpolate-size klappen hart wie bisher. */ .layout-haltung .haltung-accordion-item { interpolate-size: allow-keywords; } .layout-haltung .haltung-accordion-item::details-content { height: 0; overflow: clip; transition: height var(--dur-slow) var(--ease-standard), content-visibility var(--dur-slow) var(--ease-standard); transition-behavior: allow-discrete; } .layout-haltung .haltung-accordion-item[open]::details-content { height: auto; } /* --- D7: Im Wandel, Kopfabstaende auf den Seitenrhythmus: Subheadline 24, Kopf -> Zeitstrahl 32, H3 im Zeitstrahl 16. Mobil setzt der 603er-Block Kopfabstaende selbst. */ .layout-im-wandel .subhead { margin-bottom: 1.5rem; } @media (min-width: 604px) { .layout-im-wandel .im-wandel-header { margin-bottom: 2rem; } } .layout-im-wandel .timeline-card h3 { margin-bottom: 1rem; } /* --- D8: CTA-Boxen, H2-Abstand 32 (Desktop) / 24 (Mobil); dazwischen behaelt das 900er-Band seine 24. */ @media (min-width: 901px) { .layout-cta-duo .cta-duo-content h2 { margin-bottom: 2rem; } } /* --- D9: Footer OefKA, Newsletter-Pille: die talents- Wortmarke als Logo-Maske (Theme-SVG 135x34) statt als kursiver Text; Pille selbst unveraendert, der Hover-Filter der Pille faerbt die Maske wie zuvor den Text mit. */ body:not(.mode-talents):not(.talents-nav) #pageFooter .socials .social-link[href*="letter"] .sr-only::before { content: ''; display: inline-block; width: calc(15px * 135 / 34); height: 15px; background-color: var(--c-pri); -webkit-mask: url('/wp-content/themes/custom-theme/images/talents.svg') center / contain no-repeat; mask: url('/wp-content/themes/custom-theme/images/talents.svg') center / contain no-repeat; } /* --- M1: Kopfleiste unterhalb der Schrumpf-Schwelle: der Header bleibt beim Scrollen 96px und das Logo behaelt seine Groesse — nur der Schriftzug blendete aus. Er bleibt jetzt stehen, wie beim Talents-Header. */ @media (max-width: 1280px) { .sticky-wrapper.sticky #pageHeader nav #logo-wrapper .domain { opacity: 1; pointer-events: auto !important; } } /* --- M3: Relevanz-Karten mobil: 20px-Radius, Bild 16px. */ @media (max-width: 900px) { .layout-relevanz .relevanz-card { border-radius: 1.25rem; } .layout-relevanz .card-image img { border-radius: 1rem; } } @media (max-width: 603px) { /* --- M4: Im Kern mobil. Oeffnen-Knopf 48px, Pille -> Headline 12px; "Viel mehr"-Kopf 20px oben, Karte endet 20px unter dem Slider. */ .layout-im-kern .item-toggle { width: 3rem; height: 3rem; } .layout-im-kern .im-kern-trigger { gap: 0.75rem; } .layout-im-kern .im-kern-more h3 { padding: 1.25rem 1.5rem 0; } .layout-im-kern .im-kern-more { padding-bottom: 1.25rem; } /* --- M5: Haltung mobil. Wertetext 15px, Icons eine Stufe groesser, Wertekodex-Karte 20px oben/unten, Knopf 16px nach dem Text, Intro 16px vor der Checkliste. */ .layout-haltung .haltung-values p { font-size: 15px; } .layout-haltung .haltung-value-icon { flex-basis: 2.25rem; width: 2.25rem; height: 2.25rem; } .layout-haltung .haltung-code-card { padding-top: 1.25rem; padding-bottom: 1.25rem; } .layout-haltung .haltung-code-link { margin-top: 1rem; } .layout-haltung .haltung-card-intro { margin-bottom: 1rem; } /* --- M6: Menschen, "Weitere Stimmen": 32px zur Karte darueber, 8px zu den Boxen darunter (Stage-Gap 8 plus 24 Eigenabstand statt pauschalem 18er-Gap). */ .layout-menschen .menschen-video-stage { gap: 0.5rem; } .layout-menschen .menschen-video-stage::after { margin-top: 1.5rem; margin-bottom: 0; } /* --- M8: CTA-Boxen mobil. H2-Abstand 24 (statt 16 aus der 603er-Runde); Knopf kompakter und die talents-Wortmarke klein genug, dass beide bei 393 nebeneinander stehen. */ .layout-cta-duo .cta-duo-content h2 { margin-bottom: 1.5rem; } .layout-cta-duo .cta-duo-footer { gap: 0.75rem; } main > div.page-variant section.layout-cta-duo .cta-duo-button { padding-left: 1rem; padding-right: 1rem; } .layout-cta-duo .cta-duo-logo img { max-width: 3.25rem; } } /* ========================================================= QA-RUNDE DER BERUF — NACHTRAG (Leon, 02.09.2026) --------------------------------------------------------- Zusaetzlich in-place: die beiden Subhead-Regeln (Beruf- Sektionen 603er-Block, audit-leistungen/leistungsbereich) von 26px auf 28px; Footer-Wortmarke von 17 auf 15px. ========================================================= */ /* Hero: beide Knoepfe bekommen den Hover-Kanon; der Anker- Knopf traegt einen Runter-Pfeil, also wandert der nach unten statt diagonal. */ .layout-hero-wpg .hero-cta { transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .layout-hero-wpg .hero-cta-icon { transition: translate var(--dur) var(--ease); } .layout-hero-wpg .hero-cta--primary:is(:hover, :focus-visible) { border-color: #B01E54; background-color: #B01E54; color: var(--c-white); } .layout-hero-wpg .hero-cta--primary:is(:hover, :focus-visible) .hero-cta-icon { translate: 0 2px; } .layout-hero-wpg .hero-cta--secondary:is(:hover, :focus-visible) { background-color: #F0F0F0; } /* Plus-Knoepfe der Akkordeons: Hover wie bei den Taetigkeitsbereichen (Kreis magenta, Striche weiss). Ausgeklappt sind sie ohnehin magenta. Gehovert wird die klickbare Zeile, nicht der offene Text darunter. */ .layout-im-kern .im-kern-trigger:is(:hover, :focus-visible) .item-toggle { background-color: var(--c-pri); } .layout-im-kern .im-kern-trigger:is(:hover, :focus-visible) .item-toggle::before, .layout-im-kern .im-kern-trigger:is(:hover, :focus-visible) .item-toggle::after { background-color: var(--c-white); } .layout-haltung .haltung-accordion-toggle::before, .layout-haltung .haltung-accordion-toggle::after { transition: background-color var(--dur-slow) var(--ease-standard); } .layout-haltung .haltung-accordion-item summary:is(:hover, :focus-visible) .haltung-accordion-toggle { background-color: var(--c-pri); } .layout-haltung .haltung-accordion-item summary:is(:hover, :focus-visible) .haltung-accordion-toggle::before, .layout-haltung .haltung-accordion-item summary:is(:hover, :focus-visible) .haltung-accordion-toggle::after { background-color: var(--c-white); } /* "Viel mehr"-Spalten in der 4er-Reihe: aussen 48px zur Boxkante, innen 32px, unten 40px. Das 2er-Raster (604-1000) behaelt seine Bestandsmasse. */ @media (min-width: 1001px) { .layout-im-kern .more-list > li { padding: 1rem 2rem 2.5rem; } .layout-im-kern .more-list > li:first-child { padding-left: 3rem; } .layout-im-kern .more-list > li:last-child { padding-right: 3rem; } } /* ========================================================= QA-RUNDE DER BERUF — NACHTRAG 3 (Leon, 02.09.2026) Zeitstrahl-Texte mobil auf Lesebreite wie die Akkordeon- Texte; Relevanz-Pille mobil 16px (in-place, 15 -> 16). ========================================================= */ @media (max-width: 603px) { .layout-im-wandel .timeline-text { max-width: 300px; } } /* ========================================================= TAETIGKEITSBEREICHE — QA-Runde Leon, 02.09.2026 ========================================================= */ /* --- Footer OefKA: die talents-Wortmarke in der Newsletter- Pille bekommt 2px Luft zum Bindestrich. */ body:not(.mode-talents):not(.talents-nav) #pageFooter .socials .social-link[href*="letter"] .sr-only::before { margin-right: 2px; } /* --- Hero-Karten-Icons. Die vier ACF-Bilder sind uneinheitlich: zwei Vektor-SVGs mit preserveAspectRatio="none" (werden auf 48x48 verzerrt, Chrome kennt kein Seitenverhaeltnis), zwei Bitmap-SVGs mit eigenem Innenpolster (Motiv nur 63-87 % der Box). Statt Bild werden die Masken der Statik gezeichnet (assets/images/beruf-*.svg, dort identisch als mask-image): das Bild wird per object-position aus der Box geschoben, sichtbar bleibt die maskierte Farbflaeche — max. 48px in der groesseren Richtung, linksbuendig, mobil 40px ueber die Bestandsmasse der Box. */ .layout-hero-wpg--with_cards .hero-card-icon { object-fit: none; object-position: 9999px 9999px; /* Mobil-Browser ohne intrinsische SVG-Groesse ignorieren das Verschieben: Bildinhalt zusaetzlich durch ein leeres 1x1-SVG ersetzen, Maske und Farbe bleiben. */ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'/%3E"); border-radius: 0; background-color: var(--c-pri); filter: none; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left center; mask-position: left center; -webkit-mask-size: contain; mask-size: contain; } .layout-hero-wpg--with_cards .hero-cards > .hero-card:nth-child(2) .hero-card-icon, .layout-hero-wpg--with_cards .hero-cards > .hero-card:nth-child(4) .hero-card-icon { background-color: var(--c-white); } .layout-hero-wpg--with_cards .hero-cards { --tb-ico-audit: url("data:image/svg+xml,%3Csvg id=%22Ebene_1%22 data-name=%22Ebene 1%22 xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22192.81 -4.18 645.46 745.44%22%3E%3Cpath d=%22M437.32,133.5c-52.41,23.46-106.83,38.92-162.99,48.03-5.81,57.06-2.69,108.81,6.68,164.57,11.52,68.5,37.95,132.65,79.86,188.86-12.88-7.32-22.9-16.61-33.95-26.01-39.79-34.62-73.37-77.7-95.5-125.79-8.04-17.47-14.76-34.39-19.94-52.95-12.27-43.97-16.67-88.67-14.43-134.19,1.21-24.65,2.96-48.29,6.36-72.6,1.16-8.25,7.1-12.49,15.25-13.01,68.15-4.36,140.5-24.44,202.24-53.6,31.73-14.99,60.94-32.64,88.12-54.55,5.51-4.44,12.77-1.54,17.51,2.25,59.78,47.75,136.2,78.26,211.41,95.04l-18.73,14.88c-31.19,24.77-60.48,50.56-88.79,79.34,3.48-10.61,24.53-35.8,5.19-43.45l-25.41-10.05c-18.05-7.14-35.35-14.63-52.19-24.43l-37.02-21.55c-3.36-1.95-5.89-2.24-9.17-.27l-20.39,12.32c-17.39,10.51-34.98,18.61-54.13,27.18Z%22/%3E%3Cpath d=%22M474.47,483.26c-18.25-30.08-37.13-59.58-61.86-84.66l-29.12-29.53c-14-14.19-13.5-36.43-2.34-52.52,14.36-20.7,41.72-25.06,61.92-9.84,9.64,7.27,17.84,15.7,26.29,24.48,18.32,18.01,31.35,37.52,46.86,59.17l34.3-49.67c52.41-75.9,128.89-157.77,203.24-212.77,17.26-12.77,39.3-21.47,60.96-18.5,6.85.61,12.9,4.93,14.17,12.21,3.99,23.01,5.98,45.91,6.3,70.16-32.28,10.83-61.69,33.71-87.36,55.71-64.95,58.08-129.26,139.12-175.51,212.7l-16.34,25.99c-14.68,23.35-44.8,30.04-67.01,13.3-5.86-4.42-10.58-9.8-14.49-16.25Z%22/%3E%3Cpath d=%22M671.76,534.53c-10.58,33.68-28.28,70.67-46.94,100.39-25.81,41.1-60.08,75.3-101.15,100.96-4.71,2.94-9.84,3.38-14.86,1.04l-36.1-16.82c-42.86-19.96-81.55-47.06-116.67-79.05-23.07-21.01-43.18-44.42-61.59-69.52-33.92-46.27-58.02-99.13-73.78-154.83,28.3,49.06,63.03,89.57,106.34,124.83,34.08,27.74,59.63,43.05,98.12,63.12,9.2,4.79,17.35,9.68,26.11,15.28,18.67,11.94,37.25,22.99,57.02,32.89,5.23,2.62,10.44,3.31,15.54-.03,57.65-27.72,106.6-67.34,147.96-118.27Z%22/%3E%3Cpath d=%22M675.18,593.24c14.21-31.41,25.31-62.82,34.55-95.92,5.04-18.06,8.8-35.4,15.32-53.04,11.83-32.05,21.12-64.09,26.7-97.84,1.3-7.85,2.66-15.61.8-23.28-1.42-5.86-8.43-7.25-14-6.07-10.42,2.2-18.14,8.63-28.69,13.47,14.23-17.97,25.79-29.82,43.23-45.28,9.29-8.24,18.1-16.13,28.11-23.64,17.05-12.78,34.67-23.5,55.07-33.67l-2.25,54.92c-1.61,39.18-8.11,77.13-16.93,115.33-11.37,43.31-25.88,85.1-47.65,124.17-13.41,24.06-27.95,46.63-45.5,67.65-15.2,18.21-28.5,33.13-46.04,49.09s-37.02,31.67-58.41,45.69c22-29.25,40.82-58.72,55.69-91.59Z%22/%3E%3C/svg%3E"); --tb-ico-legal: url("data:image/svg+xml,%3Csvg id=%22Ebene_1%22 data-name=%22Ebene 1%22 xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2267.51 -11.28 898.01 915.41%22%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23000; %7D %3C/style%3E%3C/defs%3E%3Cpath class=%22cls-1%22 d=%22M790.75,797.08c-90.15,70.45-202.31,105.05-316.77,93.56-77.56-7.78-143.53-33.22-207.88-75.86-22.08-14.63-41.67-30.69-60.37-49.2-8.86-8.77-17.11-16.95-25.35-26.48-41.7-48.24-73.1-104.44-91.13-165.78-12.96-44.07-19.74-89.02-18.71-134.72,2.09-92.79,33.37-182.62,88.54-256.82,14.44-19.42,30.06-36.81,47.32-53.76,37.51-36.81,80.74-66.81,128.71-88.73C417.39,1.72,510.05-9.28,598.79,7.9c50.34,9.74,97.94,27.57,141.81,54,51.46,31,96.67,71.42,132.6,119.5,16.93,22.65,31.55,45.99,43.66,71.35,11.92,24.98,21.72,49.94,29.11,76.54,3.99,14.38,6.64,28.11,9.34,42.78,5.81,31.66,8.21,63.14,6.4,95.46-7.26,129.77-68.28,249.32-170.95,329.55ZM680.65,811.04c51.68-23.8,97.49-57,135-99.23,15.92-17.92,29.33-36.76,42.01-56.92,40.45-64.32,61.44-145.61,59-221.21-.65-20.17-3.23-38.78-6.75-58.49-5.9-33.1-15.81-64.18-29.95-94.57-38.64-83.04-101.66-148.5-182.67-190.67-16.56-8.62-32.87-15.35-50.56-21.64-71.93-25.56-152.54-28.98-226.6-10.18-66.54,16.89-125.88,49.35-176.07,96.25-49.56,46.32-87.18,104.18-108.33,168.78-44.7,136.52-12.38,284.37,83.32,390.8,35.98,40.01,79.79,71.97,128.48,94.98,30.81,14.56,63.08,24.63,96.68,30.96,52.3,9.85,104.97,9.29,156.86-2.45,27.45-6.21,53.67-14.48,79.58-26.42Z%22/%3E%3Cpath class=%22cls-1%22 d=%22M746.39,354.83l4.31-4.56c-.67-2.05-1.04-3.58-.7-5.12s2.56-1.54,5.03-1.6l-2.21-3.87,2.83-8.06c-28.88,1.02-49.04-6.03-75.59-15.34l-26.45-9.27c-23.24-8.15-63.94-12.87-85.16.21-5.42,3.34-9.31,7.49-13.59,12.59l21.82,18.31c18.44,15.47,37.1,34.13,49.95,54.4,24.89,39.27,21.35,89.39-7.8,125.22-9.57,11.76-19.84,21.57-32.68,29.91-2.1,1.36-4.48,4.29-7.61,6.77,30.04,28.38,55.28,61.36,52.33,104.71-1.25,18.3-5.93,34.68-16.71,49.65-16.96,23.57-42.17,39.06-70.99,44.14-26.73,4.72-54,3.41-79.96-4.96-9.69-3.13-18.51-8.19-26.82-13.46-22.57-14.32-40.3-40.83-33.6-67.22,4.07-16.01,17.71-25.14,33.73-25.11s29.51,10.81,32.91,26.89c4.14,19.6-11.43,35.99,1.58,49.95,5.73,6.15,13.38,9.95,21.74,10.61l-.1-145.51c0-3.85.06-7.97-.98-11.25-21.95-16.55-42.12-33.48-61.45-52.81-15.94-15.93-29.04-33.46-35.99-55.14-10.25-31.93-3.29-66.03,16.59-92.74,7.44-9.99,14.99-18.62,24.29-26.7,4.47-3.89,9.09-7.08,13.59-10.77l8.16-6.68c-10.75-12.12-23.02-23.71-29.54-38.86-1.6-3.71-2.31-4.88-4.12-7.43-8.27-11.69-11.19-26.66-12.14-40.82-2.44-36.53,17.04-69.78,48.36-88.19,18.54-10.9,39.26-15.4,60.72-15.53,16.9-.1,32.55,1.66,48.54,7.27,24.47,8.59,46.36,24,53.78,49.96,2.89,10.12,1.74,20.84-3.18,29.9-6.28,11.56-17.55,16.53-30.22,16.47-15.85-.08-29.06-9.4-31.86-25.47-3.48-19.96,6.81-27.73,2.25-39.58-6.71-17.47-37.32-17.79-53.19-14.47-7.35,1.54-13.02,4.78-18.96,8.9-16.06,11.16-23.53,29.54-20.26,49.24,4.51,27.13,21.38,43.06,40.59,61.11,3.28,3.08,6.99,6.19,11.16,8.27l13.78-9.3c20.88-14.1,46.84-21.35,72.26-19.47,33.98,2.51,62.04,17.53,92.46,30.19,5.88,2.45,11.61,4.45,15.35,9.28,3.3-.12,7.07-.32,10.01.16l22.24,3.62c4.02.65,26.18.56,22.8-8.31-5.56-14.59,2.14-29.82,17.37-34.32,14.47-4.27,30.25,4.92,34.34,19.66,4.19,15.11-6.67,29.73-18.45,37.65l-4.17-2.55-1.94,5.31c-.42,1.14-3.25,1.28-4.36,1.83l-11.02,5.47,15.57,38.43,43.56,105.65,20.2,48.26c1.98,4.74,4.69,10.96,1.67,15.51-1.65,2.49-1.52,4.66-2.33,7.46-3.02,10.42-10.41,19.68-18.61,27.2-19.1,17.5-43.95,27.78-70,28.41-18.05.43-34.52-4.82-50.34-12.74-13.55-6.78-25.01-16.36-33.82-28.72-5.87-8.24-10.95-17.89-10.59-28.23.17-4.77,3.84-9.83,5.6-14.13l17.07-41.69,48.98-118.56ZM540.02,427.67l-.03,92.51c6.83,6.75,13.29,12.38,21.18,17.71,17.31-11.51,29.44-29.23,31.45-50.01,3.31-34.19-21.61-62.9-46.21-83.23l-32.5-26.86c-13.07-10.81-25.78-21.05-38.17-32.75-7.46,1.77-12.25,6.95-17.1,12.35-16.54,18.42-22.04,43.5-13.17,66.95,8.77,23.19,27.39,41.1,46.38,57.5,1.45-5.23.76-10.4.78-16.2l.25-77.53,15.99,12.97,31.13,26.59ZM696.44,524.35l143.96.04-72.1-174.45-54.46,131.21-17.4,43.21ZM557.35,630.7c-5.23-6.34-11.1-11.73-17.42-17.74l.13,114.9c9.71-3.73,16.32-8.63,22.53-14.97,19.31-23.33,13.03-60.07-5.23-82.2Z%22/%3E%3Cpath class=%22cls-1%22 d=%22M337.47,478.77l20.25,49.43c1.63,3.98-1.12,10.11-2.33,13.68-6.97,20.55-25.14,36.08-44.04,45.5-17.16,8.55-35.68,13.03-55.04,11.24-21.68-2.01-42.06-10.48-58.84-24.21-9.84-8.05-18.75-17.81-22.54-29.82-.82-2.6-.11-3.74-2.37-6.2s-2.51-9.03-1.1-12.39l22.37-53.51,50.51-122.95,8.95-21.66c-3.42-1.52-7.49-3.58-9.81-4.89-.74-.42-3.07-.32-3.89-.6-.98-.34-1.41-2.17-2.18-4.06-.57.04-3.39.32-4.54.32-15.11-7.36-26.19-29.16-16.97-44.55,5.04-8.42,13.32-14.17,22.58-14.53,9.75-.37,18.97,3.84,24.47,12.26,10.19,15.6-3.6,26.55,5.56,29.15,5.89,1.68,12.64,2.93,18.82,2.23,45.09-5.04,64.22-24.04,105.97-36.45,2.59,4.81,3.71,9.23,3.46,14.22l-2.67,2.77,9.25,8.84.54,3.43,3.67,4.68c-16.21,2.38-30.4,6.34-45.34,12.21-27.83,10.92-54.13,19.47-85.46,18.75l45.97,111.34,14.75,35.78ZM193.26,527.22c2.3-2,3.32-2.89,5.39-2.89h137.79s-72.12-174.63-72.12-174.63l-25.41,61.52-44.91,109.12c-2.27,2.16-2.33,5.33-.74,6.89Z%22/%3E%3C/svg%3E"); --tb-ico-advisory: url("data:image/svg+xml,%3Csvg id=%22Ebene_1%22 data-name=%22Ebene 1%22 xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22284.73 -2.00 463.31 677.25%22%3E%3Cpath d=%22M576.61,220.94l-120.17.08-33.15-76.94c-3.32-7.72-3.72-16.53,1.27-23.39s13.05-10.79,21.5-12.03c17.43-2.55,58.86-4.66,76.08-4.07l24.14.82c15.19.52,29.87,1.28,44.93,4.18,4.73.91,9.39,4.14,13.27,6.56,8.19,7.55,9.37,17.7,5.09,27.7l-32.98,77.09Z%22/%3E%3Cpath d=%22M581.02,416.9l-96.05,69.22c-5.07,3.66-7.09,9.43-11.16,14.78l-34.44.26c-3.98.03-7.92-.54-11.59-1.45,24.15-61.62,33.59-118.25,34.87-183.64,2.51-1.22,5.66-.3,8.6-.31l40.58-.06,23.5.12,34.54-.53c1.1,34.23,3.49,66.85,11.16,101.61Z%22/%3E%3Cpath d=%22M417.16,622.65c4.25-7.92,7.9-14.31,12.28-21.28l27.24-43.38,20.43-32.54c22.15-35.27,12.43-23.79,49.33-50.51l54.53-39.49,34.55-24.85,15.15-10.58c6.18-4.32,11.56-8.37,17.8-13.55l-24.27-21.14,41.96-12.57,35.85-9.96c-2.02,10.45-4.26,18.87-6.96,28.3l-14.73,51.49-21.05-25.19-16.03,19.9-16.78,20.66-22.74,28.19-38.34,47.88c-34.57,43.17-16.5,25.08-65.19,56.61l-54.05,35.01-28.97,16.97ZM516.5,537.89c10.23.94,17.65-6.4,18.85-15.15,1.21-8.85-5.29-16.99-14.04-18.56s-17.46,3.98-19.74,13.26,4.46,19.48,14.93,20.45Z%22/%3E%3Cpath d=%22M658.98,587.31c10.68,12.15,8.87,32.1-4.55,40.38l-214.1-.04c10.71-9.05,21.96-15.02,33.31-22.21l69.85-44.28c3.37-2.14,6.92-4.87,9.47-7.8,10.74-12.38,20.36-24.63,30.38-37.73,12.25.24,24.12.21,36.03,1.48,8.76.93,11.93,12.76,8.09,19.39-3.11,5.37-4.08,10.33-1.26,16.03,6.32,12.78,19.98,20.19,32.8,34.78Z%22/%3E%3Cpath d=%22M657.48,673.23l-282.26.02c-9.66,0-14.53-9.37-13.74-17,.92-8.9,8.4-13.24,17.51-13.34l23.94-.27,76.01.03h174.24c9.25,0,16.38,3.77,18.02,12.92,1.31,7.29-3.53,17.64-13.72,17.65Z%22/%3E%3Cpath d=%22M360.65,578.52c-5.62-13.21-8.43-25.84-10.43-40.38l-63.49-17.98,63.52-17.42c2.39-22.77,9.65-43.48,20.3-63.57,4.79-8.45,10.02-15.62,16.36-23.68l-21.07-39.88,38.6,20.98,15.78-12.24c6.75-5.23,13.83-8.41,22.81-12.6l-2.48,23.14c-37.88,23.72-64.41,61.47-69.53,106.17-1.17,10.23-2.36,20.08-1.2,30.23,1.27,11.1,3.02,21.23,6.18,32.01l-15.34,15.22Z%22/%3E%3Cpath d=%22M540.71,89.87c-14.88,0-26.66-.52-42.59.06l-6.08.22,8.74-28.4c-8.26-.34-28.93,10.15-31.55,3.7l-.16-35.11c0-1.17,1.96-3.56,3.07-3.71,1.29-.17,3.82.34,5.4.7l22.8,5.24-5.87-23.23c-.44-1.74-.69-5.26.34-6.44s4.05-2.82,5.79-2.82L532.71,0c2.51,0,7.14,3.25,6.51,5.82l-6.68,27.16,25.22-6.27c3.14-.78,6.43,2.09,6.41,5.23l-.19,33.42c-4.37,6.14-21.5-3.36-31.54-3.93l8.28,28.43Z%22/%3E%3Cpath d=%22M577.08,270.46c12.22-.1,32.45-3.78,34.32,13.58.76,7.02-4.1,16.51-12.95,16.51h-163.63c-8.76,0-14.14-9.12-13.81-15.65.44-8.44,7.34-14.52,16.15-14.53l40.48-.05,13.84.04,68.66.23,16.94-.14Z%22/%3E%3Cpath d=%22M378.41,627.18c-6.5-1.76-10.12-10.68-10.92-16.47-1.58-11.41,2.83-21.26,11.02-28.61l17.1-15.35c5.18-4.65,9.5-10.15,12.14-16.57,4.36-10.59-8.66-14.56-2.37-27.15,1.76-3.51,7.02-7.43,12-7.34l46.6.88-28.95,47.23-17,27.48-22.41,36.32c-4.98-.04-11.52,1.12-17.22-.42Z%22/%3E%3Cpath d=%22M682.32,539.16c-2.5,14.25-4.96,26.45-10.02,39.19l-15.35-15.06c4.78-22.55,7.34-31.24,5.46-54.77-1.87-23.41-8.21-45.25-21.16-64.52l13.35-16.39c15.58,22.3,24.29,47.4,27.74,74.76,20.78,7.24,41.46,10.43,63.7,17.83l-57.44,16.37c-1.5.43-5.94.66-6.28,2.59Z%22/%3E%3Cpath d=%22M580.73,255.48l-125.91.15c-6.51,0-10.01-4.62-10.1-10.1-.11-6.13,4.38-10,11.05-9.99l121.63.02c5.82,0,9.61,3.31,10.68,8.34.77,3.66-1.2,11.58-7.35,11.59Z%22/%3E%3Cpath d=%22M602.51,401.78l-10.41-6.31-2.5-23.64c11.03,4.73,19.17,10.12,28.84,17.3l-15.93,12.64Z%22/%3E%3Cpath d=%22M605.3,500.24c-2.79,1.16-5.74,1.01-9.13-.05l5.65-8.47c1.7,3.19,2.61,5.33,3.48,8.52Z%22/%3E%3C/svg%3E"); --tb-ico-esg: url("data:image/svg+xml,%3Csvg id=%22Ebene_1%22 xmlns=%22http://www.w3.org/2000/svg%22 version=%221.1%22 viewBox=%22152.41 138.52 543.43 558.99%22%3E%3Cpath d=%22M589.94,259.76c1.46-1.49,2.78-3.89,4.58-4.73l7.7,1.77c3.77.87,8.33.45,12.42.14.81-.06,2.5-.9,3.37-1.12,5.02-1.27,9.47-3.66,12.82-7.5,5.7-6.53,9.21-14.45,8.72-23.25-.09-1.54-.12-3.8-.47-5.3-1.82-7.68-6.62-14.19-12.81-18.73-3.56-2.61-7.37-3.54-11.56-4.42-11.23-2.38-24.27,2.82-30.51,12.39-5.72,8.77-6.91,13.21-5.7,24.08.26,2.38,2.37,4.69,1.67,7.28l-12.18,12.71-12.11,11.92-16.89,17.62-15.37,15.44-11.03,11.51-4.84,5.29c-5.05,5.52-9.06,8.72-14.59,14.61-.73.78-2.84,1.29-3.53.49l-.44-8.45-.27-12.96-.33-3.37-.47-30.75c.58-1.2,2.34-1.86,3.58-2.55,12.38-6.93,18.92-21.32,15.08-34.87-2.5-8.83-7.93-16.22-16.11-20.34-6.07-3.06-8.59-2.77-15.05-2.89-14.02-.25-25.92,10.32-28.94,23.56-.95,4.16-.54,9.13-.04,13.33.36,3.01,1.9,5.68,3.09,8.27,6.53,14.2,17.53,13.57,17.56,16.84l.17,14.57.69,4.37.48,28.56.79,18.92c.06,1.39-.03,3.34.16,4.57.96,6.34,1.76,5.8-4.56,12.24l-22.5,22.94-14.57,14.84-12.86,13.02c-5.09,5.16-9.63,10.37-14.67,15.55l-17.3,17.77c-.85.88-10.7,12.34-11.43,10.77.02.04-.97-9.09-.97-9.12l-.89-22.18-.49-10.67-.53-11.4-.78-14.22c-.41-7.48-1.11-14.54-.83-22.11.04-1.17-.65-2.9-.68-3.87l-.48-12.78c-.18-4.86-1.43-10.02-.35-14.81.85-3.74,3.8-6.96,5.5-10.36,1.9-3.8,4.05-7.17,6.19-10.79,1.27-2.15,2.3-4.33,4.22-6.13,4.74.63,9.65,1.35,14.42.23,7.53-1.77,13.77-5.12,18.16-11.43,5.25-7.54,7.48-16.37,5.63-25.26-1.07-5.12-2.56-8.25-5.26-12.59-3.94-6.34-11.56-10.14-18.56-11.89s-14.54-.02-21.04,3.11c-4.98,2.4-8.32,6.06-11.04,10.74-2.11,3.63-4.05,7.03-4.83,11.21-1.6,8.57.56,16.25,5.06,23.95-2.08,3.95-4.38,7.87-6.85,11.79l-2.42,3.84-5.3,8.77-2.58,4.66c-1.2,2.18-2.26,4.36-2.18,6.75l.45,12.63.49,9.17.68,18.39c.08,2.21.59,4.26.65,6.42l.55,17.98c.1,3.29.65,6.38.67,9.68.03,4.8-.05,9.49.4,14.18.53,5.59.72,10.88.62,16.59-.03,1.42.63,3.1.74,4.37.45,5.1.19,10.1.34,15.29.07,2.28.46,4.46.74,6.77.44,3.6-.27,7.9.42,11.31.63,3.1-.26,3.79-2.25,5.9l-12.34,13.04-9.08,9.63-10.04,10.09-13.06,13.45c-5.12,5.28-10.31,11.27-15.74,16.17-.33.3-1.44.57-1.83.59-.48.02-1.11-.99-1.11-1.63l-.16-58.19-.66-24.31-.1-46.76c10.04-3.61,17.37-11.34,19.8-21.62l1.18-5.02c.37-10.56-4.4-20.57-12.37-27.46-1.46-1.26-2.82-2.43-4.57-3.2-5.42-2.42-9.81-3.31-15.58-3.15-15.32.42-24.95,10.15-29.12,24.48-.92,3.17-.56,9.01-.11,12.77.34,2.89,2.06,5.86,3.43,8.37,3.53,6.47,8.73,11.52,15.58,14.17,1.61.62,1.16,2.11,1.11,3.39-.19,5.11.02,10,.11,15.12l.49,26.42.03,9.82.19,79.52.75,3.97.23,16.72c-3.68,4.13-7.33,7.95-11.33,11.74s-7.26,7.36-10.86,11.2l-8.11,8.67-13.95,14.4c-1.11,1.14-5.93,6.23-7.03,5.52-.34-.22-.93-1.04-1.06-1.42l-2.58-7.44-8.07-28.2-3.52-14.65-.81-4.08-.97-5.3-1-5.29-1.02-5.29-.9-4.73-1.03-7.31-.93-4.66c-.39-1.97-.6-3.82-.78-5.85l-.77-8.69-.87-7.6c-1.21-10.55-1.68-33.71-1.04-44.19l.47-7.72c.19-3.02.22-6.08.58-9.03l.87-7.23,1.08-9.15.9-5.78,1.03-6.21.93-4.72,1-5.34,1.03-5.15,2.17-9.63c1.17-5.2,2.65-10.15,4.34-15.22l2.3-6.95c2.3-6.95,4.64-13.4,7.7-20.14,11.15-24.59,21.2-42.92,38.33-63.89l3-3.67c5.11-6.26,14.67-16.25,20.69-21.54l11.25-9.9,4.21-3.48c12.29-10.15,28.18-20.28,42.06-28.39l5.5-3.21,16.61-8.79c4.1-2.17,8.16-3.96,12.4-5.88l6.7-3.03,8.53-3.77,8.7-3.48c10.53-4.21,20.84-8.14,31.7-11.34l10.79-3.18,8.93-2.69,28.21-7.58,12.46-2.89,19.57-3.99,5.04-1.03,4.77-.9,6.67-1.05,4.4-.92,6.64-1.09,5.73-.88,6.75-1.05,5.74-.92,8.17-1.05,6.68-.86,13-1.47,5.73-.56,9.5-.88c1.79-.17,3.5-.61,5.35-.63,2.61-.03,4.87-.49,7.4-.65l9.23-.58c4.76-.3,9.25-.77,14.11-.62,1.97.06,3.92-.81,5.73-.84l20.64-.4,8.15-.48c3.31-.19,6.31-.23,9.61,0,4.16.28,8.22.2,12.44.08,1.55-.04,4.11-.96,5.37-.02,1.38,1.43,1.38,3.93,1.49,5.84l.59,10.4c.32,5.58.03,10.95.77,16.5l.39,2.91-.18,39.15-.93,19.66-1.02,19.26-.83,10.24-1.07,14.34c-.15,2.05-.59,4.11-.63,6.26-.04,1.92-.62,3.55-.77,5.4l-.55,6.96-.87,5.42-1.11,7.15-.91,5.83-1.03,6.58-.92,5.29-.76,4.36-2.56,15.14-2.83,14.55-.95,3.86-1.01,4.28-.93,3.95-1.02,4.25-.75,3.49-7.42,27.4-3.15,10.4c-2.28,7.53-4.59,14.78-7.41,22.19l-6.94,18.22-6.33,14.78c-12.42,28.98-28.24,56.01-47.57,80.87-.92,1.19-1.73,2.31-2.61,3.32l-8.02,9.21-4.2,4.96c-5.93,7-12.43,13.38-19.45,19.24l-5.31,4.42c-5.96,4.97-11.92,9.4-18.26,13.99-9.98,7.22-20.06,13.27-31.2,18.57-15.03,7.14-32.84,14.76-48.94,18.71l-3.81.94-5.49,1.22-8.02,1.86c-2.1.49-4.52.68-6.66,1.02l-6.24,1-5.73.99c-2,.35-4.34.74-6.22.9l-13.49,1.09-9.05.38c-1.11.05-2.68.82-3.88.81l-26.37-.23c-2.53-.02-5.05-1.03-7.7-.83-3.99.29-7.64-.53-11.57-.74l-8-.42c.33.02-9.78-1.33-10.22-1.4l-7.14-1.07-6.2-.93-6.34-1.05-14.03-2.81-12.85-3.02c-3.88-.91-7.73-1.79-11.49-2.94l-10.67-3.25c-7.15-2.18-13.98-4.58-21.05-7.22-.63-.24-1.94-.39-2.1-.9-.51-1.62,2.94-3.78,5.49-6.47l19.34-20.38,21.13-21.61,4.95-5.65,9.23-.37c2.08-.08,4.19-.69,6.3-.72,5.98-.09,11.71-.13,17.56-.38l20.4-.87c4.03-.17,7.88-.73,12-.7,3.54.02,7.43-.04,10.92-.24.69-.04,2.16-.79,2.93-.8l14.89-.08,5.27-.8c6.91-1.05,13.7-.65,20.72-.87l14.24-.44c1.12-.03,2.67-.77,3.91-.76,7.15.04,13.86-.38,20.89-.62l16.73-.59c1.73-.06,4.48-1.08,5.73.58,1.85,2.46,3.3,5.33,5.4,7.56s4.22,4.27,6.66,5.83c7.02,4.49,18.23,5.42,26.21,3.1,8.97-2.61,16.42-9.38,19.69-18.12.98-2.63,1.38-5.33,2.1-8.04.64-2.41.3-5.07-.07-7.52-2.09-14.07-12.86-24.93-27.02-26.73-2.79-.91-5.79-.57-8.67-.07-10.88,1.89-20.37,9.62-24.16,19.7-.35.94-1.53,2.77-2.34,2.78l-15.17.2-6.25.78-19.18.31c-1.18.02-2.97.86-4.34.82-5.06-.18-9.67.08-14.59.61-4.04.44-8.14.26-12.32.33-2.93.05-5.74.55-8.62.7l-17,.88c-3.62.19-7.17.48-10.84.67l-7.68.38-21.29.88c-2.36.1-4.64.35-7.04.41l-12.31.32c-.28-.43-.38-.61-.48-.73-.14-.17.22-.94.37-1.1l6.29-6.69c2.5-2.66,4.78-5.41,7.42-8.05l16.75-16.73,17.27-18.28,6.47-6.45,9.03-9.15,7.3.03,2.95-.86,15.53-.2,2.31-.85,13.19-.17,6.24-.69c2.74-.3,33.12-1.39,32.49-1.29l4.03-.66,16.51-.79,18.64-1.02,15.95-.89,13.64-1.01c2.45-.46,4.99-3.22,7.01-4.73l15.44-11.6c2.37-1.78,4.54-4.08,6.82-6.07,4.49-3.92,2.64-.17,13.73,2.33,8.17,1.84,18.97-.33,25.7-5.98,12.14-10.2,15.54-27.49,6.7-40.94-2.97-4.51-6.73-8.95-11.73-11.19-9.52-4.26-19.86-4.09-28.93.73-7.56,4.02-12.58,10.34-14.75,18.58-3.2,12.14.63,13.26-.55,17.18-.5,1.67-2.71,2.66-3.91,3.67l-6.51,5.51-3.85,2.89-4.56,3.56c-3.96,3.1-7.74,6.33-13.08,6.44-3.58.07-7.08.68-10.66.79l-18.38.58-20.43.91c-1.52.07-3.47.94-5.2.83-4.82-.31-9.26.32-13.96.64l-15.32,1.04-13.44.25-4.79.8-10.2.26c-.44.01-1.29-.23-1.61-.41s.12-1.4.64-1.94c6.2-6.45,14.01-14.7,21.1-21.95l23.93-24.47,8.24-8.61,6.95-7c1.86-1.88,3.69-3.62,5.5-5.54l7.64-8.17c2.93-3.13,5.79-5.92,8.78-9l12.55-12.93c3.74-.07,7.01-.28,10.67-.68,4.05-.44,8.2.28,12.31-.38l4.32-.69,11.88-.44,3.44-.73,12.84-.6,21.01-1.02,15.1-.7c.44-.02,1.53.8,1.72,1.26,3.1,7.69,9.96,13.72,18.25,15.57,1.28.29,2.91,1.01,4.07,1.16,14.49,1.85,27.67-4.42,33.44-18.3,3.34-8.03,3.54-16.97-.05-24.96-4.32-9.62-12.84-16.34-23.31-17.84-3.35-.48-6.25-1.06-9.59.1-6.78,1.19-13.53,4.18-18.07,9.42-3.24,3.73-5.04,8.2-7.16,12.61-2.76.34-5.61.97-8.4,1.03l-21.93.46c-2.94.06-5.73.91-8.76.64-2.11-.19-4.29.72-6.19.81-6.09.29-11.74.43-17.8,1.12-.27.03-7.59.92-4.82-1.73,5.4-5.17,12.15-12.93,17.71-18.54l12.61-12.7,15.19-15.48,3.24-3.47c.86-.92,1.8-1.79,2.66-2.66l8.87-8.96,11.54-11.91,9.49-9.71Z%22/%3E%3Cpath d=%22M174.77,688.83c-3.88,3.73-8.84,6.68-13.76,4.35-2.36-1.12-4.45-2.92-5.27-6.28-1.33-5.45.5-9.14,4.47-13.11l11.76-11.76,9.52-9.72,11.16-11.37,11.16-11.35,9.71-9.67c.4-.4,1.59-.93,2.12-.85s.95,1.22,1.39,1.75c2.72,3.27,5.55,6.29,8.67,9.16.91.84,1.93,1.69,1.85,2.81-.07.97-.74,2.27-1.58,3.14l-26.07,27.07-10.65,10.63c-2.42,2.42-4.53,4.96-6.8,7.51-2.44,2.73-5.03,5.13-7.7,7.69Z%22/%3E%3Cpath d=%22M501.43,562.85c-2.54,3.44-5.7,4.77-10.18,4.49-3.71-.23-7-2.84-8.24-5.99-1.5-3.8-.93-7.82,1.78-10.62,2.02-2.1,4.14-3.67,7-3.81,4.15-.2,7.85,1.31,9.88,4.66,2.31,3.82,2.32,7.8-.24,11.26Z%22/%3E%3Cpath d=%22M569.5,439.79c-5.63,1.98-11.9-1.73-13.14-6.84-.93-3.87.41-7.54,3.07-9.94s6.26-3.97,9.67-2.63c4.31,1.69,7.17,5.19,7.22,9.42s-2.12,8.35-6.82,10Z%22/%3E%3Cpath d=%22M393.08,285.05l-7.14-.14c-3.95-2.8-6.87-5.91-6.19-11.1.73-5.62,4.9-9.09,10.43-8.98,1.64.03,3.06.56,4.33,1.36,4.27,2.66,5.68,6.73,4.81,11.74-.56,3.26-2.96,5.3-6.25,7.11Z%22/%3E%3Cpath d=%22M615.81,352.9c-1.62,4.77-5.59,6.73-9.87,6.44-4.92-.34-8.03-3.02-9.2-7.94-1.21-5.11,1.97-10.33,7.1-11.84,4.74-1.4,10.82,1.22,12.17,6.38.56,2.14.45,5.07-.19,6.96Z%22/%3E%3Cpath d=%22M276.7,370.25c6.04,2.02,8.96,6.91,7.46,12.42-.95,3.49-3.68,6.89-7.62,7.43-5.97.83-10.63-2.52-11.89-8.41-.65-3.04.78-6.58,3.1-8.66s5.79-3.84,8.96-2.78Z%22/%3E%3Cpath d=%22M618.76,224.46c1.03,3.87-1.03,7.84-3.63,9.92-3,2.39-7.54,3.12-10.93,1.11-4.54-2.7-5.99-6.88-4.86-11.58.59-2.45,3.06-6.08,6.23-6.8,6.13-1.39,11.54,1.17,13.19,7.36Z%22/%3E%3Cpath d=%22M486.01,240.61c.82,5.61.08,10.72-5.9,12.93-3.39,1.25-7.1.76-9.99-1.68-4.2-3.54-4.14-10.77-.28-14.66,2.46-2.48,5.88-2.82,9.37-2.24,2.52.42,5.22,2.76,6.79,5.65Z%22/%3E%3C/svg%3E"); } .layout-hero-wpg--with_cards .hero-cards > .hero-card:nth-child(1) .hero-card-icon { -webkit-mask-image: var(--tb-ico-audit); mask-image: var(--tb-ico-audit); } .layout-hero-wpg--with_cards .hero-cards > .hero-card:nth-child(2) .hero-card-icon { -webkit-mask-image: var(--tb-ico-legal); mask-image: var(--tb-ico-legal); } .layout-hero-wpg--with_cards .hero-cards > .hero-card:nth-child(3) .hero-card-icon { -webkit-mask-image: var(--tb-ico-advisory); mask-image: var(--tb-ico-advisory); } .layout-hero-wpg--with_cards .hero-cards > .hero-card:nth-child(4) .hero-card-icon { -webkit-mask-image: var(--tb-ico-esg); mask-image: var(--tb-ico-esg); } /* Schachbrett mobil (Advisory magenta, ESG weiss): die alten filter-Umfaerbungen entfallen, die Maske nimmt die Farbe direkt. */ @media (max-width: 720px) { .layout-hero-wpg--with_cards .hero-cards > .hero-card:nth-child(3) .hero-card-icon { filter: none; background-color: var(--c-white); } .layout-hero-wpg--with_cards .hero-cards > .hero-card:nth-child(4) .hero-card-icon { filter: none; background-color: var(--c-pri); } } /* --- Akkordeon-Inhalt: bisher Grid-gap 18 + margin-top 12 (mobil 0 + 20). Jetzt ein einziger 12px-Abstand zwischen Text und PDF-Leiste, auf allen Breiten. */ .layout-audit-leistungen .accordion-content-inner { gap: 0; } .layout-audit-leistungen .audit-pdf-link { margin-top: 12px; } /* --- Akkordeon-Zeile: Nummer und Chevron mittig zur Zeile. */ .layout-audit-leistungen .audit-accordion-trigger { align-items: center; } /* --- Titel laeuft auf 90 % seiner Spalte, damit lange Titel wie im Design vor dem Chevron umbrechen ("... und / Lageberichten"). Nur Desktop: mobil ist die Spalte 253px, 90 % davon wuerde "Untersuchungshandlungen" (240px) sprengen. */ @media (min-width: 604px) { .layout-audit-leistungen .audit-accordion-trigger .item-title { width: 90%; } } /* --- Tax & Legal: freistehende PDF-Leiste ohne Rahmen, Text im Hover magenta (Chevron/Icon bleiben). */ .layout-leistungsbereich--tax-legal .leistungsbereich-items .leistungsbereich-factsheet.has-download { border: none; } .layout-leistungsbereich--tax-legal .leistungsbereich-items .leistungsbereich-factsheet.has-download .factsheet-copy, .layout-leistungsbereich--tax-legal .leistungsbereich-items .leistungsbereich-factsheet.has-download .factsheet-copy :is(strong, span) { transition: color var(--dur) var(--ease); } .layout-leistungsbereich--tax-legal .leistungsbereich-items a.leistungsbereich-factsheet.has-download:is(:hover, :focus-visible) .factsheet-copy, .layout-leistungsbereich--tax-legal .leistungsbereich-items a.leistungsbereich-factsheet.has-download:is(:hover, :focus-visible) .factsheet-copy :is(strong, span) { color: var(--c-pri); } /* --- Bild-Kacheln: der graue Platzhalter (#D9D9D9) hinter den Fotos entfaellt. */ .layout-audit-leistungen .audit-image, .layout-leistungsbereich.has-media .leistungsbereich-image { background-color: transparent; } /* --- Kartennummer -> Titel 24px (war 23). Mobil bleibt 16. */ @media (min-width: 604px) { .layout-leistungsbereich .card-number { margin-bottom: 24px; } } @media (max-width: 603px) { /* --- Bild -> Factsheet-Kachel 16px wie auf dem Desktop (war 32). */ .layout-audit-leistungen .audit-media-sticky, .layout-leistungsbereich.has-media .leistungsbereich-media-sticky { gap: 1rem; } /* --- Akkordeon-Zeilen nur so hoch wie ihr Inhalt: das Desktop-Minimum von 84px liess einzeilige Titel ("Konzernpruefung") wie zweizeilige aussehen. */ .layout-audit-leistungen .audit-accordion-trigger { min-height: 0; } /* --- Advisory-Foto im 16:10-Ausschnitt weiter oben ansetzen, damit das Gesicht der Frau im Bild bleibt. */ .layout-leistungsbereich--advisory .leistungsbereich-image img { object-position: 50% 10%; } /* --- Leistungs-Karten: 20px oben/unten, 24px links/rechts. */ .layout-leistungsbereich .leistungsbereich-card, .layout-leistungsbereich--advisory .leistungsbereich-card, .layout-leistungsbereich .leistungsbereich-cards > li.has-download .leistungsbereich-card, .layout-leistungsbereich .leistungsbereich-cards > li.is-wide .leistungsbereich-card, .layout-leistungsbereich .leistungsbereich-cards > li.is-wide.has-download .leistungsbereich-card { padding: 20px 24px; } } /* --- Assurance-Anker: Der Beruf verlinkt auf #assurance; das Template gibt den Content-Bloecken ab dem zweiten jetzt eine ID aus der Headline. Sprungreserve wie bei den Sektionen (Leiste minus 55px scroll-padding, siehe Nachtrag 7). */ .layout-audit-leistungen .audit-content-block[id] { scroll-margin-top: 123px; } @media (max-width: 1199px) { .layout-audit-leistungen .audit-content-block[id] { scroll-margin-top: 103px; } } @media (max-width: 900px) { .layout-audit-leistungen .audit-content-block[id] { scroll-margin-top: 90px; } } @media (max-width: 600px) { .layout-audit-leistungen .audit-content-block[id] { scroll-margin-top: 88px; } } /* --- CTA-Duo: "Wirtschaftspruefer?" ist mobil breiter als die Kartenspalte und brach in der Wortmitte ("Wirtschaftspruef/er?"). Das Mobil-Design trennt "Wirtschafts-/pruefer?" — wie die Statik per Silbentrennung; greift nur, wenn ein Wort nicht passt. */ @media (max-width: 603px) { .layout-cta-duo .cta-duo-content h2 { overflow-wrap: break-word; hyphens: auto; } } /* ============================================================ FACHBEGRIFFE + TAETIGKEITSBEREICHE — QA-Runde Leon, 03.09.2026 ------------------------------------------------------------ Fachbegriffe (Seite 11465): Controls-Zeile buendig mit dem Ergebnisbereich, mobile Trennlinie scrollt mit den Buchstaben. Taetigkeitsbereiche (Seite 11463): Hover der vier Hero-Karten. Protokoll: .work/wp-patches/fachbegriffe-qa-0309.md ============================================================ */ /* --- Fachbegriffe Desktop: .fachbegriffe-results traegt 16px Innenpolster (Buchstabenleiste ab 346, Karten bis 1574 bei 1920), die Controls lagen bislang auf der Aussenkante 330/1590. Nur ueber 860px — darunter ist die Zeile einspaltig mit "1rem 0" gepolstert, der Seitenrand kommt dort vom Sticky-Wrapper. */ @media (min-width: 861px) { .layout-fachbegriffe .controls-inner { padding: 0 1rem; } } /* --- Fachbegriffe mobil: Trennlinie unter der Buchstabenleiste scrollt mit den Buchstaben und endet 4px hinter dem Z, so wie sie 4px vor dem A beginnt (12px Abstand zu den Scroller-Kanten). Bisher lag sie als border-image auf dem Scroller und reichte starr bis zur Bildschirmkante. Ein Hintergrund mit background-attachment: local spannt sich ueber den gesamten Scrollbereich und bewegt sich mit dem Inhalt; der transparente Rahmen bleibt, damit die Hoehe der Leiste unveraendert ist. */ @media (max-width: 720px) { .layout-fachbegriffe .alphabet-nav { border-image: none; background-image: linear-gradient(to right, transparent 12px, var(--c-grey) 12px, var(--c-grey) calc(100% - 12px), transparent calc(100% - 12px)); background-repeat: no-repeat; background-size: 100% 1px; background-position: left bottom; background-attachment: local; } } /* --- Taetigkeitsbereiche: Hover der vier Hero-Karten wie in der Statik (.c-area:hover): 2px anheben, weicher Schatten (Statik-Token --shadow), der Pfeil im Link rutscht 3px nach unten. Nur fuer Zeiger mit Hover-Faehigkeit und ueber der Mobil-Grenze der Karten (720px) — mobil bewusst aus. */ @media (min-width: 721px) and (hover: hover) { .layout-hero-wpg--with_cards .hero-card { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .layout-hero-wpg--with_cards .hero-card:is(:hover, :focus-visible) { transform: translateY(-2px); box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.08); } .layout-hero-wpg--with_cards .hero-card-link::after { transition: transform var(--dur) var(--ease); } .layout-hero-wpg--with_cards .hero-card:is(:hover, :focus-visible) .hero-card-link::after { transform: translateY(3px); } } /* ============================================================ WIR FUER DICH — QA-Runde Leon, 03.09.2026 ------------------------------------------------------------ Seite 21105 (/wir-fuer-dich/). Protokoll: .work/wp-patches/wir-fuer-dich-qa-0309.md ============================================================ */ /* --- Footer OefKA: die talents-Wortmarke in der Newsletter- Pille sitzt 3px hoeher (Inline-Block: margin-bottom hebt die Maske ueber der Grundlinie an). */ body:not(.mode-talents):not(.talents-nav) #pageFooter .socials .social-link[href*="letter"] .sr-only::before { margin-bottom: 3px; } /* --- Hero-Button-Pfeil ("Was wir wirklich tun", auch Der Beruf): bisher der 12px-Theme-Pfeil (icon-arrow-down-small, fette Kontur), Statik und Design zeigen den 16px-Material-Pfeil arrow_downward. Maske aus dem Subset-Glyph arrow_upward (uniE5D8, 960er Em-Box); Font-Koordinaten ungespiegelt gezeichnet ergeben den nach unten zeigenden Pfeil. Die Em-Box bleibt 1rem, der Pfeil darin ~10px hoch wie in der Icon-Schrift. Hover-Versatz (translate) bleibt. */ .layout-hero-wpg .hero-cta-icon { width: 1rem; height: 1rem; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20960%20960'%3E%3Cpath%20d='M440%20647%20244%20451Q232%20439%20216.0%20439.5Q200%20440%20188%20452Q177%20464%20176.5%20480.0Q176%20496%20188%20508L452%20772Q458%20778%20465.0%20780.5Q472%20783%20480.0%20783.0Q488%20783%20495.0%20780.5Q502%20778%20508%20772L772%20508Q783%20497%20783.0%20480.5Q783%20464%20772%20452Q760%20440%20743.5%20440.0Q727%20440%20715%20452L520%20647V200Q520%20183%20508.5%20171.5Q497%20160%20480.0%20160.0Q463%20160%20451.5%20171.5Q440%20183%20440%20200Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20960%20960'%3E%3Cpath%20d='M440%20647%20244%20451Q232%20439%20216.0%20439.5Q200%20440%20188%20452Q177%20464%20176.5%20480.0Q176%20496%20188%20508L452%20772Q458%20778%20465.0%20780.5Q472%20783%20480.0%20783.0Q488%20783%20495.0%20780.5Q502%20778%20508%20772L772%20508Q783%20497%20783.0%20480.5Q783%20464%20772%20452Q760%20440%20743.5%20440.0Q727%20440%20715%20452L520%20647V200Q520%20183%20508.5%20171.5Q497%20160%20480.0%20160.0Q463%20160%20451.5%20171.5Q440%20183%20440%20200Z'/%3E%3C/svg%3E"); } /* --- Zitat-Leiste: Abstand zum Kapitel 48px (statt clamp bis 120px), Flaeche exakt die Hero-Farbe. Der Hero malt auf Weiss sein has-gradient::before (rgba(176,221,245,.15) mit kleiner hellerer Ellipse) — dieselbe Definition auf Weiss, flach entspricht das #F3FAFD. Loest das Radial-Blau der hellen CTA-Box (#F0F5F8-Toene) ab. */ .layout-wir-fuer-dich .wir-quote { margin-top: 3rem; background: radial-gradient(ellipse 13% 9% at 55.8% 57.6%, rgba(216, 237, 249, 0.15) 0%, rgba(176, 221, 245, 0.15) 100%), #ffffff; } /* --- Wasserzeichen: volle Leistenhoehe (Breite folgt dem Seitenverhaeltnis; 8px Luft ueber dem Punkt, unten laeuft es 8px aus der Leiste), Fuellung 0.15 statt 0.1. */ .layout-wir-fuer-dich .wir-quote::after { width: auto; height: 100%; bottom: -0.5rem; background-image: url("data:image/svg+xml,"); } @media (max-width: 720px) { .layout-wir-fuer-dich .wir-quote::after { width: 9rem; /* bisher 7.5rem */ height: auto; bottom: -0.25rem; } } /* --- Nachtrag Leon 03.09.: CTA-Duo-Button mobil 2rem Seitenpolster (bisher 1rem aus der <=603px-Regel mit main > div.page-variant- Kette; gleiche Kette, damit der Nachtrag greift). */ @media (max-width: 603px) { main > div.page-variant section.layout-cta-duo .cta-duo-button { padding-left: 2rem; padding-right: 2rem; } } /* ============================================================ WWMWP — QA-Runde Leon, 03.09.2026 (Seite 11473, /talents/wie-wird-man-wirtschaftspruefer/) ------------------------------------------------------------ Buttons an die Theme-Buttons angeglichen, Hero-Animation (Pillen/Linien/Icons), Abstaende, Banner-Bug, Mobil-Angleichung an die uebrigen Talents-Unterseiten. Protokoll: .work/wp-patches/wwmwp-qa-0309.md ============================================================ */ /* ---- 1. Buttons wie die Theme-Buttons (a.wt-bt / relevanz-cta): 0/24px Polster, 44px, Gewicht 600, Pfeil als 12px-Maske der Theme-Icons (dio = ausgehend, external = rechts), Hover: Flaeche #B01E54 ohne Anheben, Pfeil rutscht 2px. Nur diese Seite — FWPG/Hochschulen/Events teilen dieselben .c-btn-Regeln und bleiben unveraendert. */ .page-id-11473 .page-variant .c-btn { gap: 8px; min-height: 44px; padding: 0 24px; font-weight: 600; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .page-id-11473 .page-variant .c-btn:hover, .page-id-11473 .page-variant .c-btn:active { transform: none; } .page-id-11473 .page-variant .c-btn--primary:is(:hover, :focus-visible) { background: #B01E54; } .page-id-11473 .page-variant .c-btn--ghost { background: var(--wwm-surface); border-color: var(--wwm-line); } .page-id-11473 .page-variant .c-btn--ghost:is(:hover, :focus-visible), .page-id-11473 .page-variant .c-btn--invert:is(:hover, :focus-visible) { background: #F0F0F0; } .page-id-11473 .page-variant .p-wwmwp-hero__actions .c-btn--ghost, .page-id-11473 .page-variant .p-wwmwp-acc__actions .c-btn--ghost { font-weight: 600; } .page-id-11473 .page-variant .c-btn .material-symbols-rounded { flex: 0 0 12px; width: 12px; height: 12px; font-size: 12px; transition: translate var(--dur) var(--ease); } .page-id-11473 .page-variant .c-btn .wwmwp-ico--arrow-outward { -webkit-mask-image: var(--icon-arrow-dio); mask-image: var(--icon-arrow-dio); } .page-id-11473 .page-variant .c-btn .wwmwp-ico--arrow-forward { -webkit-mask-image: var(--icon-arrow-external); mask-image: var(--icon-arrow-external); } .page-id-11473 .page-variant .c-btn:hover > .material-symbols-rounded:last-child, .page-id-11473 .page-variant .c-btn:hover > .icon-arrow--fwd:last-child { transform: none; } .page-id-11473 .page-variant .c-btn:is(:hover, :focus-visible) > .wwmwp-ico--arrow-outward:last-child { translate: 2px -2px; } .page-id-11473 .page-variant .c-btn:is(:hover, :focus-visible) > .wwmwp-ico--arrow-forward:last-child { translate: 2px 0; } /* ---- 2. Hero-Animation ---- 2a Pillen-Wechsel mit ruhiger Transition (400ms statt 220ms, Icon-Kasten und Label laufen mit). */ .page-variant .p-wwmwp-pill { transition: background var(--wwm-dur-slow) var(--wwm-ease), color var(--wwm-dur-slow) var(--wwm-ease), border-color var(--wwm-dur-slow) var(--wwm-ease), box-shadow var(--wwm-dur-slow) var(--wwm-ease); } .page-variant .p-wwmwp-pill__icon { transition: background var(--wwm-dur-slow) var(--wwm-ease), color var(--wwm-dur-slow) var(--wwm-ease); } /* 2b Die Basislinie der aktiven Strecke wechselt nicht mehr die Farbe — nur der fuellende Pfad zeigt die Auswahl. */ .page-variant .p-wwmwp-graph.has-selection .p-wwmwp-graph__wires path.is-active { stroke: var(--wwm-graph-wire-dim); } /* 2c Fuellender Pfad in Talents-Blau #2B4781. */ .page-variant .p-wwmwp-graph__wires path.p-wwmwp-graph__trace { stroke: var(--wwm-talents-active); } /* 2d Aktive Pille mit #C4CCDC-Rahmen. */ .page-variant .p-wwmwp-graph.has-selection .p-wwmwp-pill.is-active { border-color: #C4CCDC; } /* 2e Pillen-Icons: die Inline-SVGs (handgezeichnete Strich-Icons aus der Statik) ruhen; stattdessen Material Symbols Rounded als currentColor-Masken (business_center, shopping_cart, balance, settings, code, calculate, science, monitoring) — dasselbe Muster wie die uebrigen Icons der Seite. */ .page-variant .p-wwmwp-pill__icon svg { display: none; } .page-variant .p-wwmwp-pill__icon::before { content: ""; display: block; width: 66%; height: 66%; background-color: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; } .page-variant .p-wwmwp-pill[data-subject="bwl"] .p-wwmwp-pill__icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20-960%20960%20960'%3E%3Cpath%20d='M160-120q-33%200-56.5-23.5T80-200v-440q0-33%2023.5-56.5T160-720h160v-80q0-33%2023.5-56.5T400-880h160q33%200%2056.5%2023.5T640-800v80h160q33%200%2056.5%2023.5T880-640v440q0%2033-23.5%2056.5T800-120H160Zm240-600h160v-80H400v80Zm400%20360H600v40q0%2017-11.5%2028.5T560-280H400q-17%200-28.5-11.5T360-320v-40H160v160h640v-160Zm-360%200h80v-80h-80v80Zm-280-80h200v-40q0-17%2011.5-28.5T400-520h160q17%200%2028.5%2011.5T600-480v40h200v-200H160v200Zm320%2040Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20-960%20960%20960'%3E%3Cpath%20d='M160-120q-33%200-56.5-23.5T80-200v-440q0-33%2023.5-56.5T160-720h160v-80q0-33%2023.5-56.5T400-880h160q33%200%2056.5%2023.5T640-800v80h160q33%200%2056.5%2023.5T880-640v440q0%2033-23.5%2056.5T800-120H160Zm240-600h160v-80H400v80Zm400%20360H600v40q0%2017-11.5%2028.5T560-280H400q-17%200-28.5-11.5T360-320v-40H160v160h640v-160Zm-360%200h80v-80h-80v80Zm-280-80h200v-40q0-17%2011.5-28.5T400-520h160q17%200%2028.5%2011.5T600-480v40h200v-200H160v200Zm320%2040Z'/%3E%3C/svg%3E"); } .page-variant .p-wwmwp-pill[data-subject="vwl"] .p-wwmwp-pill__icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20-960%20960%20960'%3E%3Cpath%20d='M280-80q-33%200-56.5-23.5T200-160q0-33%2023.5-56.5T280-240q33%200%2056.5%2023.5T360-160q0%2033-23.5%2056.5T280-80Zm400%200q-33%200-56.5-23.5T600-160q0-33%2023.5-56.5T680-240q33%200%2056.5%2023.5T760-160q0%2033-23.5%2056.5T680-80ZM246-720l96%20200h280l110-200H246Zm-38-80h590q23%200%2035%2020.5t1%2041.5L692-482q-11%2020-29.5%2031T622-440H324l-44%2080h440q17%200%2028.5%2011.5T760-320q0%2017-11.5%2028.5T720-280H280q-45%200-68-39.5t-2-78.5l54-98-144-304H80q-17%200-28.5-11.5T40-840q0-17%2011.5-28.5T80-880h65q11%200%2021%206t15%2017l27%2057Zm134%20280h280-280Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20-960%20960%20960'%3E%3Cpath%20d='M280-80q-33%200-56.5-23.5T200-160q0-33%2023.5-56.5T280-240q33%200%2056.5%2023.5T360-160q0%2033-23.5%2056.5T280-80Zm400%200q-33%200-56.5-23.5T600-160q0-33%2023.5-56.5T680-240q33%200%2056.5%2023.5T760-160q0%2033-23.5%2056.5T680-80ZM246-720l96%20200h280l110-200H246Zm-38-80h590q23%200%2035%2020.5t1%2041.5L692-482q-11%2020-29.5%2031T622-440H324l-44%2080h440q17%200%2028.5%2011.5T760-320q0%2017-11.5%2028.5T720-280H280q-45%200-68-39.5t-2-78.5l54-98-144-304H80q-17%200-28.5-11.5T40-840q0-17%2011.5-28.5T80-880h65q11%200%2021%206t15%2017l27%2057Zm134%20280h280-280Z'/%3E%3C/svg%3E"); } .page-variant .p-wwmwp-pill[data-subject="jura"] .p-wwmwp-pill__icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20-960%20960%20960'%3E%3Cpath%20d='M120-120q-17%200-28.5-11.5T80-160q0-17%2011.5-28.5T120-200h320v-447q-26-9-45-28t-28-45H240l110%20258q5%2011%206%2022.5t-1%2023.5q-9%2046-49.5%2071T220-320q-45%200-85.5-25T85-416q-2-12-1-23.5t6-22.5l110-258h-40q-17%200-28.5-11.5T120-760q0-17%2011.5-28.5T160-800h207q12-35%2043-57.5t70-22.5q39%200%2070%2022.5t43%2057.5h207q17%200%2028.5%2011.5T840-760q0%2017-11.5%2028.5T800-720h-40l110%20258q5%2011%206%2022.5t-1%2023.5q-9%2046-49.5%2071T740-320q-45%200-85.5-25T605-416q-2-12-1-23.5t6-22.5l110-258H593q-9%2026-28%2045t-45%2028v447h320q17%200%2028.5%2011.5T880-160q0%2017-11.5%2028.5T840-120H120Zm545-320h150l-75-174-75%20174Zm-520%200h150l-75-174-75%20174Zm335-280q17%200%2028.5-11.5T520-760q0-17-11.5-28.5T480-800q-17%200-28.5%2011.5T440-760q0%2017%2011.5%2028.5T480-720Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20-960%20960%20960'%3E%3Cpath%20d='M120-120q-17%200-28.5-11.5T80-160q0-17%2011.5-28.5T120-200h320v-447q-26-9-45-28t-28-45H240l110%20258q5%2011%206%2022.5t-1%2023.5q-9%2046-49.5%2071T220-320q-45%200-85.5-25T85-416q-2-12-1-23.5t6-22.5l110-258h-40q-17%200-28.5-11.5T120-760q0-17%2011.5-28.5T160-800h207q12-35%2043-57.5t70-22.5q39%200%2070%2022.5t43%2057.5h207q17%200%2028.5%2011.5T840-760q0%2017-11.5%2028.5T800-720h-40l110%20258q5%2011%206%2022.5t-1%2023.5q-9%2046-49.5%2071T740-320q-45%200-85.5-25T605-416q-2-12-1-23.5t6-22.5l110-258H593q-9%2026-28%2045t-45%2028v447h320q17%200%2028.5%2011.5T880-160q0%2017-11.5%2028.5T840-120H120Zm545-320h150l-75-174-75%20174Zm-520%200h150l-75-174-75%20174Zm335-280q17%200%2028.5-11.5T520-760q0-17-11.5-28.5T480-800q-17%200-28.5%2011.5T440-760q0%2017%2011.5%2028.5T480-720Z'/%3E%3C/svg%3E"); } .page-variant .p-wwmwp-pill[data-subject="technik"] .p-wwmwp-pill__icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20-960%20960%20960'%3E%3Cpath%20d='M433-80q-27%200-46.5-18T363-142l-9-66q-13-5-24.5-12T307-235l-62%2026q-25%2011-50%202t-39-32l-47-82q-14-23-8-49t27-43l53-40q-1-7-1-13.5v-27q0-6.5%201-13.5l-53-40q-21-17-27-43t8-49l47-82q14-23%2039-32t50%202l62%2026q11-8%2023-15t24-12l9-66q4-26%2023.5-44t46.5-18h94q27%200%2046.5%2018t23.5%2044l9%2066q13%205%2024.5%2012t22.5%2015l62-26q25-11%2050-2t39%2032l47%2082q14%2023%208%2049t-27%2043l-53%2040q1%207%201%2013.5v27q0%206.5-2%2013.5l53%2040q21%2017%2027%2043t-8%2049l-48%2082q-14%2023-39%2032t-50-2l-60-26q-11%208-23%2015t-24%2012l-9%2066q-4%2026-23.5%2044T527-80h-94Zm7-80h79l14-106q31-8%2057.5-23.5T639-327l99%2041%2039-68-86-65q5-14%207-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99%2042q-22-23-48.5-38.5T533-694l-13-106h-79l-14%20106q-31%208-57.5%2023.5T321-633l-99-41-39%2068%2086%2064q-5%2015-7%2030t-2%2032q0%2016%202%2031t7%2030l-86%2065%2039%2068%2099-42q22%2023%2048.5%2038.5T427-266l13%20106Zm42-180q58%200%2099-41t41-99q0-58-41-99t-99-41q-59%200-99.5%2041T342-480q0%2058%2040.5%2099t99.5%2041Zm-2-140Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20-960%20960%20960'%3E%3Cpath%20d='M433-80q-27%200-46.5-18T363-142l-9-66q-13-5-24.5-12T307-235l-62%2026q-25%2011-50%202t-39-32l-47-82q-14-23-8-49t27-43l53-40q-1-7-1-13.5v-27q0-6.5%201-13.5l-53-40q-21-17-27-43t8-49l47-82q14-23%2039-32t50%202l62%2026q11-8%2023-15t24-12l9-66q4-26%2023.5-44t46.5-18h94q27%200%2046.5%2018t23.5%2044l9%2066q13%205%2024.5%2012t22.5%2015l62-26q25-11%2050-2t39%2032l47%2082q14%2023%208%2049t-27%2043l-53%2040q1%207%201%2013.5v27q0%206.5-2%2013.5l53%2040q21%2017%2027%2043t-8%2049l-48%2082q-14%2023-39%2032t-50-2l-60-26q-11%208-23%2015t-24%2012l-9%2066q-4%2026-23.5%2044T527-80h-94Zm7-80h79l14-106q31-8%2057.5-23.5T639-327l99%2041%2039-68-86-65q5-14%207-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99%2042q-22-23-48.5-38.5T533-694l-13-106h-79l-14%20106q-31%208-57.5%2023.5T321-633l-99-41-39%2068%2086%2064q-5%2015-7%2030t-2%2032q0%2016%202%2031t7%2030l-86%2065%2039%2068%2099-42q22%2023%2048.5%2038.5T427-266l13%20106Zm42-180q58%200%2099-41t41-99q0-58-41-99t-99-41q-59%200-99.5%2041T342-480q0%2058%2040.5%2099t99.5%2041Zm-2-140Z'/%3E%3C/svg%3E"); } .page-variant .p-wwmwp-pill[data-subject="informatik"] .p-wwmwp-pill__icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20-960%20960%20960'%3E%3Cpath%20d='m193-479%20155%20155q11%2011%2011%2028t-11%2028q-11%2011-28%2011t-28-11L108-452q-6-6-8.5-13T97-480q0-8%202.5-15t8.5-13l184-184q12-12%2028.5-12t28.5%2012q12%2012%2012%2028.5T349-635L193-479Zm574-2L612-636q-11-11-11-28t11-28q11-11%2028-11t28%2011l184%20184q6%206%208.5%2013t2.5%2015q0%208-2.5%2015t-8.5%2013L668-268q-12%2012-28%2011.5T612-269q-12-12-12-28.5t12-28.5l155-155Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20-960%20960%20960'%3E%3Cpath%20d='m193-479%20155%20155q11%2011%2011%2028t-11%2028q-11%2011-28%2011t-28-11L108-452q-6-6-8.5-13T97-480q0-8%202.5-15t8.5-13l184-184q12-12%2028.5-12t28.5%2012q12%2012%2012%2028.5T349-635L193-479Zm574-2L612-636q-11-11-11-28t11-28q11-11%2028-11t28%2011l184%20184q6%206%208.5%2013t2.5%2015q0%208-2.5%2015t-8.5%2013L668-268q-12%2012-28%2011.5T612-269q-12-12-12-28.5t12-28.5l155-155Z'/%3E%3C/svg%3E"); } .page-variant .p-wwmwp-pill[data-subject="mathematik"] .p-wwmwp-pill__icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20-960%20960%20960'%3E%3Cpath%20d='M320-320v50q0%2013%208.5%2021.5T350-240q13%200%2021.5-8.5T380-270v-50h50q13%200%2021.5-8.5T460-350q0-13-8.5-21.5T430-380h-50v-50q0-13-8.5-21.5T350-460q-13%200-21.5%208.5T320-430v50h-50q-13%200-21.5%208.5T240-350q0%2013%208.5%2021.5T270-320h50Zm230%2050h140q13%200%2021.5-8.5T720-300q0-13-8.5-21.5T690-330H550q-13%200-21.5%208.5T520-300q0%2013%208.5%2021.5T550-270Zm0-100h140q13%200%2021.5-8.5T720-400q0-13-8.5-21.5T690-430H550q-13%200-21.5%208.5T520-400q0%2013%208.5%2021.5T550-370Zm70-208%2035%2035q9%209%2021%209t21-9q8-8%208.5-20.5T698-585l-36-37%2035-35q9-9%209-21t-9-21q-9-9-21-9t-21%209l-35%2035-35-35q-9-9-21-9t-21%209q-9%209-9%2021t9%2021l35%2035-36%2037q-8%209-8%2021t9%2021q9%209%2021%209t21-9l35-35Zm-340-14h140q13%200%2021.5-8.5T450-622q0-13-8.5-21.5T420-652H280q-13%200-21.5%208.5T250-622q0%2013%208.5%2021.5T280-592Zm-80%20472q-33%200-56.5-23.5T120-200v-560q0-33%2023.5-56.5T200-840h560q33%200%2056.5%2023.5T840-760v560q0%2033-23.5%2056.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20-960%20960%20960'%3E%3Cpath%20d='M320-320v50q0%2013%208.5%2021.5T350-240q13%200%2021.5-8.5T380-270v-50h50q13%200%2021.5-8.5T460-350q0-13-8.5-21.5T430-380h-50v-50q0-13-8.5-21.5T350-460q-13%200-21.5%208.5T320-430v50h-50q-13%200-21.5%208.5T240-350q0%2013%208.5%2021.5T270-320h50Zm230%2050h140q13%200%2021.5-8.5T720-300q0-13-8.5-21.5T690-330H550q-13%200-21.5%208.5T520-300q0%2013%208.5%2021.5T550-270Zm0-100h140q13%200%2021.5-8.5T720-400q0-13-8.5-21.5T690-430H550q-13%200-21.5%208.5T520-400q0%2013%208.5%2021.5T550-370Zm70-208%2035%2035q9%209%2021%209t21-9q8-8%208.5-20.5T698-585l-36-37%2035-35q9-9%209-21t-9-21q-9-9-21-9t-21%209l-35%2035-35-35q-9-9-21-9t-21%209q-9%209-9%2021t9%2021l35%2035-36%2037q-8%209-8%2021t9%2021q9%209%2021%209t21-9l35-35Zm-340-14h140q13%200%2021.5-8.5T450-622q0-13-8.5-21.5T420-652H280q-13%200-21.5%208.5T250-622q0%2013%208.5%2021.5T280-592Zm-80%20472q-33%200-56.5-23.5T120-200v-560q0-33%2023.5-56.5T200-840h560q33%200%2056.5%2023.5T840-760v560q0%2033-23.5%2056.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z'/%3E%3C/svg%3E"); } .page-variant .p-wwmwp-pill[data-subject="naturwissenschaft"] .p-wwmwp-pill__icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20-960%20960%20960'%3E%3Cpath%20d='M200-120q-51%200-72.5-45.5T138-250l222-270v-240h-40q-17%200-28.5-11.5T280-800q0-17%2011.5-28.5T320-840h320q17%200%2028.5%2011.5T680-800q0%2017-11.5%2028.5T640-760h-40v240l222%20270q32%2039%2010.5%2084.5T760-120H200Zm0-80h560L520-492v-268h-80v268L200-200Zm280-280Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20-960%20960%20960'%3E%3Cpath%20d='M200-120q-51%200-72.5-45.5T138-250l222-270v-240h-40q-17%200-28.5-11.5T280-800q0-17%2011.5-28.5T320-840h320q17%200%2028.5%2011.5T680-800q0%2017-11.5%2028.5T640-760h-40v240l222%20270q32%2039%2010.5%2084.5T760-120H200Zm0-80h560L520-492v-268h-80v268L200-200Zm280-280Z'/%3E%3C/svg%3E"); } .page-variant .p-wwmwp-pill[data-subject="wirtschaftsinformatik"] .p-wwmwp-pill__icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20-960%20960%20960'%3E%3Cpath%20d='M160-120q-17%200-28.5-11.5T120-160v-40q0-17%2011.5-28.5T160-240q17%200%2028.5%2011.5T200-200v40q0%2017-11.5%2028.5T160-120Zm160%200q-17%200-28.5-11.5T280-160v-220q0-17%2011.5-28.5T320-420q17%200%2028.5%2011.5T360-380v220q0%2017-11.5%2028.5T320-120Zm160%200q-17%200-28.5-11.5T440-160v-140q0-17%2011.5-28.5T480-340q17%200%2028.5%2011.5T520-300v140q0%2017-11.5%2028.5T480-120Zm160%200q-17%200-28.5-11.5T600-160v-200q0-17%2011.5-28.5T640-400q17%200%2028.5%2011.5T680-360v200q0%2017-11.5%2028.5T640-120Zm160%200q-17%200-28.5-11.5T760-160v-360q0-17%2011.5-28.5T800-560q17%200%2028.5%2011.5T840-520v360q0%2017-11.5%2028.5T800-120ZM560-481q-16%200-30.5-6T503-504L400-607%20188-395q-12%2012-28.5%2011.5T131-396q-11-12-10.5-28.5T132-452l211-211q12-12%2026.5-17.5T400-686q16%200%2031%205.5t26%2017.5l103%20103%20212-212q12-12%2028.5-11.5T829-771q11%2012%2010.5%2028.5T828-715L617-504q-11%2011-26%2017t-31%206Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20-960%20960%20960'%3E%3Cpath%20d='M160-120q-17%200-28.5-11.5T120-160v-40q0-17%2011.5-28.5T160-240q17%200%2028.5%2011.5T200-200v40q0%2017-11.5%2028.5T160-120Zm160%200q-17%200-28.5-11.5T280-160v-220q0-17%2011.5-28.5T320-420q17%200%2028.5%2011.5T360-380v220q0%2017-11.5%2028.5T320-120Zm160%200q-17%200-28.5-11.5T440-160v-140q0-17%2011.5-28.5T480-340q17%200%2028.5%2011.5T520-300v140q0%2017-11.5%2028.5T480-120Zm160%200q-17%200-28.5-11.5T600-160v-200q0-17%2011.5-28.5T640-400q17%200%2028.5%2011.5T680-360v200q0%2017-11.5%2028.5T640-120Zm160%200q-17%200-28.5-11.5T760-160v-360q0-17%2011.5-28.5T800-560q17%200%2028.5%2011.5T840-520v360q0%2017-11.5%2028.5T800-120ZM560-481q-16%200-30.5-6T503-504L400-607%20188-395q-12%2012-28.5%2011.5T131-396q-11-12-10.5-28.5T132-452l211-211q12-12%2026.5-17.5T400-686q16%200%2031%205.5t26%2017.5l103%20103%20212-212q12-12%2028.5-11.5T829-771q11%2012%2010.5%2028.5T828-715L617-504q-11%2011-26%2017t-31%206Z'/%3E%3C/svg%3E"); } /* ---- 3. Abstaende (Leons Liste) ---- */ .page-variant .p-wwmwp-acc { margin-top: 24px; } /* war 12 */ .page-variant .p-wwmwp-tags { gap: 8px 12px; } /* war 8/13 */ @media (min-width: 601px) { .page-variant .p-wwmwp-etappe__label { margin-bottom: 32px; } /* war 30 */ .page-variant .p-wwmwp-etappe__title { margin-bottom: 24px; } /* war 18 */ } @media (min-width: 901px) { /* Treppen-Textbox: ohne Abstand zur Treppe, 24/32 Polster (mobil bleibt die offene Box mit -1px-Anschluss). */ .page-variant .p-wwmwp-stufe__text { margin-top: 0; padding: 24px 32px; } /* Banner: 48/64 Polster; die feste Hoehe 370 wird Mindesthoehe — mit fester Hoehe ragte die Copy (314px + 64 Polster) unten aus dem Polster, der Knopf stand 24 statt 32px ueber der Kante (Leons Bug). Lead auf 600px. */ .page-variant .p-wwmwp-banner { height: auto; min-height: 370px; padding: 48px 64px; } .page-variant .p-wwmwp-banner__lead { max-width: 600px; } } /* ---- 4. Mobil: Angleichung an die uebrigen Talents-Unterseiten (Hochschulen/FWPG-Konvention): Textbloecke auf dem 24px-Inset (12px Container + 12px), Hero-Lead 16/24 in #555 wie die Leads dort, Sektions-Leads ebenfalls; Bilder/Graph/Karten bleiben auf 12. Die Pillen des Graphen ruecken mit dem gesamten Buehnenbereich um ihren 6.1%-Versatz nach links und stehen so buendig mit dem Text; Linien und Knoten wandern mit (Geometrie bleibt). */ @media (max-width: 600px) { .page-variant .p-wwmwp-hero__copy, .page-variant .p-wwmwp-hero__actions, .page-variant .p-wwmwp-weg__head, .page-variant .p-wwmwp-danach__head, .page-variant .p-wwmwp-fach__head, .page-variant .p-wwmwp-cta__title, .page-variant .p-wwmwp-cta__sub, .page-variant .p-wwmwp-cta__text, .page-variant .p-wwmwp-usp { padding-inline: 12px; } .page-variant .p-wwmwp-cta__btn { margin-inline: 12px; } .page-variant .p-wwmwp-hero__lead { line-height: 24px; color: var(--wwm-ink-soft); } .page-variant .p-wwmwp-danach__lead, .page-variant .p-wwmwp-fach__lead { color: var(--wwm-ink-soft); } .page-variant .p-wwmwp-graph__stage { translate: calc(12px - 6.1%) 0; } /* Pillen (6.1% Versatz) auf das 24px-Inset des Textes */ } /* ============================================================ TALENTS-BUTTONS VEREINHEITLICHT — Nachtrag Leon, 03.09.2026 ------------------------------------------------------------ Die Theme-Button-Optik aus der WWMWP-Runde (0/24px, 44px, Gewicht 600, 12px-Theme-Pfeil, Hover #B01E54 ohne Anheben) gilt jetzt fuer alle .c-btn der Talents-Unterseiten: FWPG (21731), Hochschulen (21748), Events-Archiv und -Einzelseiten, WWMWP (11473). `body`-Praefix schlaegt die Port-Basisregeln (.page-variant .c-btn); die seitenspezifischen Gewichts- und Polsterregeln (page-id-/single-events-Ketten, :has-Polster 32) werden explizit gegengehalten. Protokoll: .work/wp-patches/wwmwp-qa-0309.md (Nachtrag) ============================================================ */ body .page-variant .c-btn { gap: 8px; min-height: 44px; padding: 0 24px; font-weight: 600; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } body .page-variant .c-btn:hover, body .page-variant .c-btn:active { transform: none; } body .page-variant .c-btn--primary:is(:hover, :focus-visible) { background: #B01E54; } body .page-variant .c-btn--ghost { background: var(--wwm-surface); border-color: var(--wwm-line); } body .page-variant .c-btn--ghost:is(:hover, :focus-visible), body .page-variant .c-btn--invert:is(:hover, :focus-visible) { background: #F0F0F0; } /* Seitenketten (0,3,0)/(0,4,0) auf dieselben Werte */ .page-id-21731 .page-variant .c-btn, .page-id-21748 .page-variant .c-btn, body.post-type-archive-events .page-variant .c-btn, body.single-events .page-variant .c-btn, .page-id-21731 .page-variant .p-fwpg-hero__actions .c-btn--ghost, .page-id-11473 .page-variant .p-wwmwp-hero__actions .c-btn--ghost, .page-id-11473 .page-variant .p-wwmwp-acc__actions .c-btn--ghost { font-weight: 600; } .page-id-21731 .page-variant .c-btn:has(.material-symbols-rounded), .page-id-21748 .page-variant .c-btn:has(.material-symbols-rounded), body.post-type-archive-events .page-variant .c-btn:has(.material-symbols-rounded), body.single-events .page-variant .c-btn:has(.material-symbols-rounded) { padding-right: 24px; } /* Pfeile: 12px-Maske der Theme-Icons statt Material-Glyphen */ body .page-variant .c-btn .material-symbols-rounded { flex: 0 0 12px; width: 12px; height: 12px; font-size: 12px; transition: translate var(--dur) var(--ease); } body .page-variant .c-btn .wwmwp-ico--arrow-outward { -webkit-mask-image: var(--icon-arrow-dio); mask-image: var(--icon-arrow-dio); } body .page-variant .c-btn .wwmwp-ico--arrow-forward { -webkit-mask-image: var(--icon-arrow-external); mask-image: var(--icon-arrow-external); } body .page-variant .c-btn:hover > .material-symbols-rounded:last-child, body .page-variant .c-btn:hover > .icon-arrow--fwd:last-child { transform: none; } body .page-variant .c-btn:is(:hover, :focus-visible) > .wwmwp-ico--arrow-outward:last-child { translate: 2px -2px; } body .page-variant .c-btn:is(:hover, :focus-visible) > .wwmwp-ico--arrow-forward:last-child { translate: 2px 0; } /* Hochschulen: der CF7-Submit ist ein input ohne .c-btn — gleiche Masse und derselbe Hover (bisher 50px/46px, 700, Hover brand-600). */ body .page-variant .p-hs-formcard .c-form__submit { height: 44px; padding-inline: 24px; font-weight: 600; transition: background-color var(--dur) var(--ease); } body .page-variant .p-hs-formcard .c-form__submit:is(:hover, :focus-visible) { background: #B01E54; } /* Events: der Newsletter-Submit der CTA-Box hatte 28px Polster — ebenfalls 24. */ :is(body.post-type-archive-events, body.single-events) .page-variant .c-ctabox__submit { padding: 0 24px; } /* ============================================================ FOOTER TALENTS — Wortmarke tiefer (Leon, 05.09.2026) ------------------------------------------------------------ Die Talents-Wortmarke im Footer-Lockup bekommt margin-top: 32px (Desktop, ab 768px) bzw. 12px (Mobil, bis 767px). Die Zeile zentriert ihre Flex-Kinder, der sichtbare Versatz ist deshalb die Haelfte (16px / 6px), die Zeilenhoehe bleibt. Protokoll: .work/wp-patches/footer.md (Nachtrag 05.09.) ============================================================ */ #pageFooter .footer-brand .footer-logo .talents-only .talents-mark { margin-top: 32px; } @media (max-width: 767px) { #pageFooter .footer-brand .footer-logo .talents-only .talents-mark { margin-top: 12px; } } /* ============================================================ WWMWP — Mobil-Abgleich mit den Talents-Unterseiten (Leon, 05.09.2026). Referenz: FWPG (21731) und Hochschulen (21748) bei 393px, gemessen mit .work/wwm-mobil-abgleich-0509.mjs, wwm-textinventar-0509.mjs, wwm-cta-vgl-0509.mjs und wwm-head-vgl-0509.mjs. Alles <=600px (Mobil-Block der Seite), ausser dem Font-Fix der Stufen-Jahresangabe (Defekt auf allen Breiten). Praefix .page-id-11473 schlaegt die Seitenregeln (.page-variant .x) ohne !important. ============================================================ */ /* 0. Defekt: "Jahr 1–3" in den Karrierestufen lief in Arial 13px — der