.elementor-kit-4{--e-global-color-primary:#67AB33;--e-global-color-secondary:#FFFFFF;--e-global-color-text:#0A503C;--e-global-color-accent:#3B3B3B;--e-global-color-2a0274b:#757575;--e-global-color-98575f5:#1A1A1A;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-fef34be-font-family:"satoshi";--e-global-typography-fef34be-font-size:2.5rem;--e-global-typography-fef34be-font-weight:600;--e-global-typography-fef34be-line-height:3rem;--e-global-typography-23d0676-font-family:"satoshi";--e-global-typography-23d0676-font-size:2rem;--e-global-typography-23d0676-font-weight:600;--e-global-typography-23d0676-line-height:3rem;--e-global-typography-837fe41-font-family:"satoshi";--e-global-typography-837fe41-font-size:1.75rem;--e-global-typography-837fe41-font-weight:500;--e-global-typography-837fe41-line-height:1.3rem;--e-global-typography-eec7f25-font-family:"Lato";--e-global-typography-eec7f25-font-size:1rem;--e-global-typography-eec7f25-font-weight:400;--e-global-typography-eec7f25-line-height:1.6rem;--e-global-typography-a782e97-font-family:"Lato";--e-global-typography-a782e97-font-size:1.125rem;--e-global-typography-a782e97-font-weight:500;--e-global-typography-a782e97-line-height:1.5rem;--e-global-typography-f0027ba-font-family:"Grotesk";--e-global-typography-f0027ba-font-size:0.875rem;--e-global-typography-f0027ba-font-weight:500;--e-global-typography-f0027ba-line-height:1.2rem;--e-global-typography-99dc4a1-font-family:"Lato";--e-global-typography-99dc4a1-font-size:0.875rem;--e-global-typography-99dc4a1-line-height:1.5rem;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-kit-4 a{color:var( --e-global-color-text );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1350px;}.e-con{--container-max-width:1350px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1366px){.elementor-kit-4{--e-global-typography-fef34be-font-size:2.4rem;--e-global-typography-fef34be-line-height:3rem;--e-global-typography-23d0676-font-size:2rem;--e-global-typography-23d0676-line-height:3rem;--e-global-typography-eec7f25-font-size:1rem;--e-global-typography-eec7f25-line-height:1.5rem;}}@media(max-width:1200px){.elementor-kit-4{--e-global-typography-fef34be-font-size:2rem;--e-global-typography-fef34be-line-height:3rem;--e-global-typography-23d0676-font-size:2rem;--e-global-typography-23d0676-line-height:3rem;--e-global-typography-eec7f25-font-size:1rem;--e-global-typography-eec7f25-line-height:1.6rem;}}@media(max-width:1024px){.elementor-kit-4{--e-global-typography-fef34be-font-size:2rem;--e-global-typography-fef34be-line-height:2.5rem;--e-global-typography-23d0676-font-size:2rem;--e-global-typography-23d0676-line-height:3rem;--e-global-typography-837fe41-line-height:2.5rem;--e-global-typography-eec7f25-font-size:1rem;--e-global-typography-eec7f25-line-height:1.6rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-4{--e-global-typography-fef34be-font-size:2rem;--e-global-typography-fef34be-line-height:1.2em;--e-global-typography-23d0676-font-size:1.5rem;--e-global-typography-23d0676-line-height:2.5rem;--e-global-typography-eec7f25-font-size:1rem;--e-global-typography-eec7f25-line-height:1.6rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */.image-cut-left { --cut: 64px; clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); } #image-cut-left { --cut: 64px; clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); } .image-cut-topright { --cut: 80px; /* oder z.B. 6% */ clip-path: polygon( 0 0, /* oben links */ calc(100% - var(--cut)) 0, /* etwas links von oben rechts */ 100% var(--cut), /* diagonal nach unten rechts */ 100% 100%, /* unten rechts */ 0 100% /* unten links */ ); } #image-cut-topright { --cut: 80px; /* oder z.B. 6% */ clip-path: polygon( 0 0, /* oben links */ calc(100% - var(--cut)) 0, /* etwas links von oben rechts */ 100% var(--cut), /* diagonal nach unten rechts */ 100% 100%, /* unten rechts */ 0 100% /* unten links */ ); } .image-cut-right{ --cut: 150px; /* oder z.B. 6% */ clip-path: polygon( 0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100% ); background:linear-gradient(to bottom right,#0A503C 0%, #539E04 100%); } #elasto-cut{ --cut: 60px; /* oder z.B. 6% */ clip-path: polygon( 0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100% ); } .button-cut{ --cut: 40px; /* oder z.B. 6% */ clip-path: polygon( 0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100% ); } /* Listing Hover Effekt */ .card-body{ position:relative; background:#f2f2f2; overflow:hidden; } .card-body::before{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom right,#0A503C 0%, #539E04 100%); opacity:0; transition:opacity .35s ease; z-index:0; } .card-body > *{ position:relative; z-index:1; } /* Typo/Link via Elementor-Standards selektieren */ .listing-card:hover .card-body::before, .listing-card:focus-within .card-body::before{ opacity:1; } .listing-card:hover .elementor-widget-heading .elementor-heading-title, .listing-card:hover .elementor-widget-text-editor, .listing-card:hover a, .listing-card:focus-within .elementor-widget-heading .elementor-heading-title, .listing-card:focus-within .elementor-widget-text-editor, .listing-card:focus-within a{ color:#fff !important; } /* Icon im Hover ebenfalls weiß färben */ .listing-card:hover svg path, .listing-card:focus-within svg path { fill: #fff !important; stroke: #fff !important; /* falls Linien genutzt werden */ } .linear-bg { background:linear-gradient(to bottom right,#0A503C 0%, #539E04 100%); } /* weiche Farbübergänge auf den Stern-Icons */ .listing-card .e-rating-wrapper .eicon-star{ transition: color .25s ease; } /* Hover/Fokus: Sterne → Gold */ .listing-card:hover .e-rating-wrapper .eicon-star, .listing-card:focus-within .e-rating-wrapper .eicon-star{ color: #FFC107 !important; /* Gold */ } /* optionaler Fallback, falls SVG-Icons verwendet werden */ .listing-card:hover .e-rating-wrapper svg, .listing-card:focus-within .e-rating-wrapper svg{ fill: #FFC107 !important; } /* Icon Cards im Grid Effekt*/ .card { position: relative; border-radius: 0; /* kein Radius */ transition: box-shadow .25s ease, transform .25s ease, outline-color .25s ease; overflow: hidden; /* wichtig, damit das Overlay nicht übersteht */ } /* Overlay */ .card::after { content: ""; position: absolute; inset: 0; /* füllt die ganze Box */ background: rgba(255,255,255,.15); /* dezent weiß, volle Fläche */ opacity: 0; pointer-events: none; transition: opacity .25s ease; } /* Hover-Zustand */ .card:hover { outline: 1px solid #539E04; outline-offset: -1px; /* wirkt wie Border */ box-shadow: 0 8px 20px rgba(0,0,0,.1); transform: translateY(-2px); } .card:hover::after { opacity: 1; /* Overlay einblenden */ } /* Overlay */ .card-effect::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.15); opacity: 1; /* immer sichtbar */ pointer-events: none; transition: opacity .25s ease; } /* Standardzustand wie vorher Hover */ .card-effect { outline: 1px solid #539E04; outline-offset: -1px; box-shadow: 0 8px 20px rgba(0,0,0,.1); transform: translateY(-2px); } /*Projekte-Kategorie Pill */ .pill-wrap { display: flex; justify-content: center; /* zentriert die Pill horizontal */ } /* Die eigentliche Pill um den Text */ .pill { display: inline-flex; /* schrumpft auf Inhaltsbreite */ align-items: center; padding-block: 6px; /* oben/unten */ padding-inline: 16px; /* links/rechts: immer gleich! */ box-sizing: border-box; background-color: #0A503C; /* deine BG */ border: 1px solid #0A503C; border-radius: 5px; /* runde Ecken/Pill */ line-height: 1.2; width: fit-content; /* „so breit wie der Text“ */ max-width: 100%; /* optional, wenn der Text NIE umbrechen soll: */ /* white-space: nowrap; */ } /* Ohne JS: sichtbar */ .reveal { position: relative; overflow: hidden; } /* Mobil-Smoothness & iOS-Fixes */ .reveal, .reveal img { will-change: transform, opacity; -webkit-transform: translateZ(0); backface-visibility: hidden; } /* Mit JS: Startzustand versteckt/verschoben */ .js .reveal { opacity: 0; transform: translateX(-100%); transition: opacity .25s ease, transform 0.9s cubic-bezier(.215,.61,.355,1); } .js .reveal img { display: block; width: 100%; transform: translateX(100%) scale(1.3); transition: transform 0.9s cubic-bezier(.215,.61,.355,1); } /* Zielzustand */ .reveal.is-inview { opacity: 1; transform: translateX(0); } .reveal.is-inview img { transform: translateX(0) scale(1); } /* Background-Bild (wenn du data-bg nutzt) */ .reveal.has-bg { background-position: center; background-size: cover; background-repeat: no-repeat; /* WICHTIG: Höhe oder aspect-ratio setzen! */ /* Beispiel: aspect-ratio: 16/9; oder height: 300px; */ } /* Option: weniger/keine Animation bei Reduced Motion */ @media (prefers-reduced-motion: reduce) { .js .reveal { transition: none; transform: none; opacity: 1; } .js .reveal img { transition: none; transform: none; } } /* höhere Spezifität: :root .hero-cut */ :root .hero-cut { --cut: 20%; position: relative; will-change: clip-path; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%) !important; } /* optional: nur ab 600px */ @media (min-width: 600px) { :root .hero-cut { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%) !important; } } /* Bewegungs-Reduktion */ @media (prefers-reduced-motion: reduce) { :root .hero-cut { --cut: 0%; } } /* T und L Border bei "Leistungsseiten" - Sektion "unsere Leistungen"*/ /* Grund-Setup für eine Kachel mit T-Akzent */ .t-accent { position: relative; /* Variablen nach Bedarf anpassen */ --t-color: #0A503C; /* Farbe */ --t-thick: 2px; /* Linienstärke */ --t-h: 56px; /* Länge der horizontalen Linie */ --t-v: 20px; /* Länge der vertikalen Linie */ --t-gap: 0px; /* Abstand der horizontalen Linie von der Unterkante (0 = bündig) */ } /* T rechts unten */ .t-right::after { content: ""; position: absolute; inset: 0; /* volle Fläche für präzise Positionierung */ pointer-events: none; background: /* horizontal (endet am rechten Rand, läuft nach links) */ linear-gradient(var(--t-color), var(--t-color)) bottom var(--t-gap) right 0 / var(--t-h) var(--t-thick) no-repeat, /* vertikal am rechten Rand nach unten */ linear-gradient(var(--t-color), var(--t-color)) bottom 0 right 0 / var(--t-thick) var(--t-v) no-repeat; } /* T links unten */ .t-left::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: /* horizontal (endet am linken Rand, läuft nach rechts) */ linear-gradient(var(--t-color), var(--t-color)) bottom var(--t-gap) left 0 / var(--t-h) var(--t-thick) no-repeat, /* vertikal am linken Rand nach unten */ linear-gradient(var(--t-color), var(--t-color)) bottom 0 left 0 / var(--t-thick) var(--t-v) no-repeat; }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'satoshi'; font-display: auto; src: url('https://www.gume.de/wp-content/uploads/Satoshi-Variable.ttf') format('truetype'); } /* End Custom Fonts CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Lato'; font-style: normal; font-weight: normal; font-display: auto; src: url('https://www.gume.de/wp-content/uploads/Lato-Regular.ttf') format('truetype'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: auto; src: url('https://www.gume.de/wp-content/uploads/Lato-Light.ttf') format('truetype'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: auto; src: url('https://www.gume.de/wp-content/uploads/Lato-Bold.ttf') format('truetype'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: auto; src: url('https://www.gume.de/wp-content/uploads/Lato-Black.ttf') format('truetype'); } @font-face { font-family: 'Lato'; font-style: italic; font-weight: normal; font-display: auto; src: url('https://www.gume.de/wp-content/uploads/Lato-Italic.ttf') format('truetype'); } /* End Custom Fonts CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Grotesk'; font-display: auto; src: url('https://www.gume.de/wp-content/uploads/SpaceGrotesk-VariableFont_wght.ttf') format('truetype'); } /* End Custom Fonts CSS */