/* ============================================================================== Landeseiten – Base Styles (production build) Notes: - Theme switching uses [data-theme="light" | "dark"] on - Switcher is horizontal on ALL breakpoints (desktop/tablet/mobile) - Hero frame + logo are frame-aware and responsive ============================================================================== */ /* --------------------------------------- Root variables (global tunables) --------------------------------------- */ :root{ --hero-top-padding: 100px; --hero-max-height: 1440px; /* Switcher (desktop defaults; sizes tweak in media queries) */ --switch-icon-size: 28px; --switch-gap: 16px; --marker-size: 40px; --switch-pad-inline: 20px; /* left/right */ --switch-pad-block: 16px; /* top/bottom */ --marker-top: calc(var(--switch-pad-block) / 2 + 1px); /* legacy var (unused in horizontal), kept for compat */ /* Dark/Light gradient text seed */ --cs-grad-text-start: var(--e-global-color-text); --grad-start-themable: var(--e-global-color-text); } /* --------------------------------------- Base / resets --------------------------------------- */ body{ overflow-x: hidden; } [data-elementor-type="wp-page"]{ overflow: hidden; } body p, body h1, body h2, body h3, body h4, body h5, body h6{ margin: 0 !important; padding: 0; text-wrap: pretty; } body .elementor-widget-container{ text-wrap: pretty; } /* (Removed the duplicate html { scroll-behavior: smooth; } to avoid conflict) */ /* Legacy gradient helpers (kept for backward compatibility) */ .cs-gradient-text-dark h2 { background: linear-gradient(52deg, var(--e-global-color-text) 0%, var(--e-global-color-accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } .cs-gradient-text h2 { background: linear-gradient(52deg, #fff 0%, var(--e-global-color-accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } /* --------------------------------------- THEME SWITCHER (always horizontal) Markup: container with 2 .elementor-widget-icon children --------------------------------------- */ /* Container */ .cs-background-switch-container{ position: relative; /* ensure ::after positions correctly */ display: inline-grid !important; grid-auto-flow: column; grid-template-columns: repeat(2, var(--switch-icon-size)); justify-content: center; align-items: center; column-gap: var(--switch-gap); padding: var(--switch-pad-block) var(--switch-pad-inline) !important; box-sizing: border-box; min-height: calc(var(--marker-size) + 2*var(--switch-pad-block)); /* avoid clipping */ background:#fff2; backdrop-filter:blur(50px); border-radius: 1000px !important; /* marker horizontal positions (same for all breakpoints) */ --marker-left-start: calc(var(--switch-pad-inline) + (var(--switch-icon-size) / 2) - (var(--marker-size) / 2)); --marker-left-end: calc(100% - var(--switch-pad-inline) - (var(--switch-icon-size) / 2) - (var(--marker-size) / 2)); } /* Marker (always centered vertically; slides left/right) */ .cs-background-switch-container::after{ content: ""; position: absolute !important; top: calc(50% - var(--marker-size)/2 + 0.5px); left: var(--marker-left-start); width: var(--marker-size); height: var(--marker-size); border-radius: 50%; border: 2px solid #fff; background: linear-gradient(45deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 70%) !important; transition: left .28s ease; /* horizontal motion only */ will-change: left; z-index: 1; } /* Icons inside the switch */ .cs-background-switch-container .elementor-widget-icon{ width: var(--switch-icon-size); height: var(--switch-icon-size); display: flex; justify-content: center; align-items: center; z-index: 2; /* above marker */ } .cs-background-switch-container .elementor-widget-icon .elementor-icon-wrapper{ width: var(--switch-icon-size); height: var(--switch-icon-size); display: flex; justify-content: center; align-items: center; } .cs-background-switch-container .elementor-widget-icon svg{ width: var(--switch-icon-size); height: var(--switch-icon-size); } /* Theme states (set marker LEFT only) */ html[data-theme="light"] .cs-background-switch-container::after{ left: var(--marker-left-start); } html[data-theme="light"] .cs-background-switch-container .elementor-widget-icon:nth-of-type(2){ opacity: .7; } html[data-theme="dark"]{ --cs-grad-text-start: #fff; --grad-start-themable: #fff; } html[data-theme="dark"] .cs-background-switch-container::after{ left: var(--marker-left-end); } html[data-theme="dark"] .cs-background-switch-container .elementor-widget-icon:nth-of-type(1){ opacity: .7; } /* ----- Responsive: only size tweaks, orientation stays horizontal ----- */ @media (max-width: 1024px){ :root{ --switch-icon-size: 26px; --switch-gap: 10px; --marker-size: 38px; --switch-pad-inline: 12px; --switch-pad-block: 14px; --marker-top: calc(var(--switch-pad-block) / 2 + 1px); /* kept for compat */ } } @media (max-width: 767px){ :root{ --switch-icon-size: 22px; --switch-gap: 12px; --marker-size: 34px; --switch-pad-inline: 14px; --switch-pad-block: 12px; --marker-top: calc(var(--switch-pad-block) / 2 + 1px); /* kept for compat */ } } /* Unified, theme-aware gradient text helper (preferred) */ .cs-gradient-text-dark{ background-image: linear-gradient( 52deg, var(--grad-start-themable) 0%, var(--e-global-color-accent) 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent !important; /* avoid Elementor color overrides */ color: transparent !important; } /* --------------------------------------- DARK THEME overrides (site-wide helpers) --------------------------------------- */ html[data-theme="dark"] .cs-dark-section, html[data-theme="dark"] .cs-dark-card{ background: var(--e-global-color-primary) !important; } html[data-theme="light"] .cs-dark-image{ display:none !important; } html[data-theme="dark"] .cs-light-image{ display:none !important; } html[data-theme="dark"] .cs-dark-text--counter .elementor-counter-title, html[data-theme="dark"] .cs-dark-btn .elementor-button-text, html[data-theme="dark"] .cs-dark-text--section *, html[data-theme="dark"] .cs-dark-title *, html[data-theme="dark"] .cs-dark-text, html[data-theme="dark"] .cs-team-carousel *{ color: #fff !important; } html[data-theme="dark"] .cs-dark-title .cs-gradient-text-dark { background-image: linear-gradient( 52deg, #fff 0%, var(--e-global-color-accent) 100% ) !important; } html[data-theme="dark"] .cs-dark-btn svg > path:nth-of-type(-n+2), html[data-theme="dark"] .cs-dark-btn svg > rect:first-of-type{ fill: #fff !important; stroke:#fff !important; } html[data-theme="light"] .cs-carousel-dark .elementor-swiper-button-next { box-shadow: 8px 0 12px 0px #0002; } html[data-theme="light"] .cs-carousel-dark .elementor-swiper-button-prev { box-shadow:-8px 0 12px 0px #0002; } .cs-certificate-wrapper .elementor-widget-image:hover{ transform:scale(1.1) !important; } /* --------------------------------------- Buttons --------------------------------------- */ .cs-btn{ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .cs-btn svg{ font-size: 60px; } .cs-btn .elementor-button-text{ align-content: center; } .cs-btn .elementor-button-icon { transition: transform ease-in-out .2s; } .cs-btn:hover .elementor-button-icon { transform:rotate(45deg); transition: transform ease-in-out .2s; } @property --gradient-angle { syntax: ''; inherits: false; initial-value: 106deg; } .cs-btn .elementor-button { background-image: linear-gradient( var(--gradient-angle), rgb(109, 178, 74), rgba(109, 178, 74, 0) ) !important; transition: --gradient-angle 0.5s ease-in-out; } .cs-btn:hover a { transform:scale(1) !important; } .cs-btn:hover .elementor-button { --gradient-angle: 212deg !important; } .cs-btn .elementor-button-content-wrapper { display:flex; align-items:center !important; } /* --------------------------------------- Folder Frame (SVG strokes) --------------------------------------- */ .cs-folder-frame-container{ position: absolute !important; inset: 0; width: 100%; height: 100%; max-width: 100% !important; margin: auto; pointer-events: none; } .cs-folder-frame{ inset: 0; width: 100%; height: 100%; color: #fff; /* stroke color via currentColor */ } .cs-folder-frame path{ stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; shape-rendering: geometricPrecision; } .cs-folder-frame.cs-hero-frame path{ stroke-width: 2; } /* --------------------------------------- Carousel (images, texts, bullets) --------------------------------------- */ /* IMAGES */ .cs-carousel-image{ position: absolute !important; top: 50%; left: 50%; width: calc(100% - 100px) !important; max-width: calc(100% - 100px) !important; transform: translate(-50%,-50%) scale(.98); opacity: 0; visibility: hidden; transition: opacity .35s ease, transform .35s ease; } .cs-carousel-image.active{ opacity: 1; visibility: visible; transform: translate(-50%,-50%) scale(1); z-index: 2; } /* TEXTS */ .cs-text-wrapper{ position: relative; min-height: 200px !important; transition: height .35s ease; } .cs-carousel-text{ position: absolute !important; inset: 0 auto auto 0; min-width: 100%; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; } .cs-carousel-text.active{ opacity: 1; visibility: visible; transform: translateY(0); } @media (max-width:767px){ .cs-text-wrapper{ position: relative; min-height: auto !important; } } /* BULLETS */ .cs-custom-carousel-pagination{ position: absolute !important; inset: 0 !important; z-index: 100 !important; } .cs-pagination-bullet{ position: absolute !important; width: 100px !important; height: 100px !important; border-radius: 50% !important; background: #EFF3F6 !important; border: 2px solid #6DB24A; display: flex !important; justify-content: center !important; align-items: center !important; transform: translate(-50%,-50%); cursor: pointer; transition: .2s; pointer-events: auto; } .cs-pagination-bullet.is-active{ background: #6DB24A !important; border-color: #6DB24A !important; color: #fff !important; } .cs-pagination-bullet.is-active p{ color: #fff; } /****MRT Subpage******/ .cs-folders-frame{ inset: 0; width: 100%; height: 100%; color: #6DB24A; /* stroke color via currentColor */ filter: drop-shadow(0 1px 23px rgba(109, 178, 74, 1)); } .cs-folders-frame path{ stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; shape-rendering: geometricPrecision; } .cs-icon-card::after{ content:''; width: 100%; height: 100%; background-image: linear-gradient( to right, #76797A 0%, #76797A 40%, #76797A00 100% /* transparent version of #76797A */ ); backdrop-filter: blur(10px); display: flex; position: absolute; top: 0; left: 0; z-index: -1; clip-path: polygon(0 0, 95% 0%, 100% 100%, 0% 100%); border-radius:20px; border-bottom-right-radius: 0; } .cs-icon-card { overflow: visible !important; } .cs-icon-card--icon { padding: 16px; border-radius: 50%; bottom: calc(100% - 40px)!important; background:#76797A; } .cs-icon-card p { margin: 0 !important } @media (min-width: 1440px) { .cs-zuweiserportal-header, .cs-mrt-header { padding-top: 40px !important; } }