:root {
--color-moss: #618130; --color-moss-dark: #506B25; --color-gold: #D4A735; --color-text: #48413B; --color-footer-bg: #DFE6D6; --color-white: #FFFFFF;
--font-family-base: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--shadow-card: 3px 3px 18px rgba(0, 0, 0, 0.1);
--radius-pill: 100px; --header-padding-x: 40px;
} html {
overflow-x: hidden;
}
body {
font-family: var(--font-family-base);
color: var(--color-text); overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-base);
color: var(--color-text);
}
a {
color: var(--color-moss);
}
a:hover,
a:focus {
color: var(--color-moss-dark);
} .btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 24px;
border-radius: var(--radius-pill); box-shadow: inset 0 0 0 4px transparent;
font-size: 16px;
line-height: normal;
color: var(--color-white) !important;
text-decoration: none !important;
white-space: nowrap;
}
.btn img {
width: 28px;
height: 28px;
flex-shrink: 0;
}
.btn-primary {
background-color: var(--color-moss);
box-shadow: inset 0 0 0 4px rgba(97, 129, 48, 0.2);
}
.btn-primary:hover,
.btn-primary:focus {
background-color: var(--color-moss-dark);
}
.btn-secondary {
background-color: var(--color-text);
box-shadow: inset 0 0 0 4px rgba(72, 65, 59, 0.2);
}
.btn-secondary:hover,
.btn-secondary:focus {
filter: brightness(0.94);
} .wp-block-button .wp-block-button__link {
padding: 14px 24px;
} .wp-block-button__link:hover,
.wp-block-button__link:focus {
color: var(--color-white) !important;
filter: brightness(0.85);
} .site-header {
background-color: var(--color-white);
position: relative; }
@media (max-width: 1002px) {
.site-header .header-image {
width: 100px;
}
} .grid-container {
max-width: 1440px;
}
.inside-header.grid-container {
align-items: center;
padding-top: 18px;
padding-bottom: 23px;
padding-left: var(--header-padding-x);
padding-right: var(--header-padding-x);
}
@media (min-width: 1400px) {
.inside-header.grid-container {
padding-top: 28px;
padding-bottom: 28px;
}
} .site-logo {
position: relative;
z-index: 1;
}
@media (min-width: 1400px) {
.site-logo::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -14px;
height: 50%;
background: url(//www.klauenpfleger-eg-sachsen.de/wp-content/themes/generatepress-child/assets/images/nav-logo-backdrop.svg) center bottom / contain no-repeat;
z-index: -1;
}
} .site-branding {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#site-navigation.main-navigation {
background-color: transparent;
}
#site-navigation .main-nav ul li.menu-item > a {
padding: 10px 12px;
border-radius: 8px;
border-width: 4px 0;
border-style: solid;
border-color: #FFFFFF;
font-size: 16px;
line-height: 22px;
color: var(--color-text);
}
#site-navigation .main-nav ul li.menu-item:not(.nav-btn):hover > a,
#site-navigation .main-nav ul li.menu-item:not(.nav-btn):focus > a,
#site-navigation .main-nav ul li.menu-item:not(.nav-btn)[class*="current-menu-"] > a {
border-color: rgba(97, 129, 48, 0.08);
} .header-buttons-nav {
display: none; align-items: center;
gap: 12px; list-style: none;
margin: 0;
padding: 0;
}
.header-buttons-nav li > a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 24px;
border-radius: var(--radius-pill); box-shadow: inset 0 0 0 4px transparent;
color: var(--color-white);
font-size: 16px;
line-height: normal; text-transform: uppercase;
}
.header-buttons-nav li.nav-btn-shop > a {
background-color: var(--color-moss);
box-shadow: inset 0 0 0 4px rgba(97, 129, 48, 0.2);
}
.header-buttons-nav li.nav-btn-shop:hover > a {
background-color: var(--color-moss-dark);
}
.header-buttons-nav li.nav-btn-login > a {
background-color: var(--color-gold);
box-shadow: inset 0 0 0 4px rgba(196, 146, 19, 0.2);
}
.header-buttons-nav li.nav-btn-login:hover > a {
filter: brightness(0.94);
}
.nav-btn-icon {
width: 28px;
height: 28px;
flex-shrink: 0;
} .mobile-navigation-toggle-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.mobile-navigation-toggle-label {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 28px;
height: 22px;
margin-left: auto;
cursor: pointer;
}
.mobile-navigation-toggle-label span {
display: block;
height: 2px;
background-color: var(--color-text);
border-radius: 1px;
}
.mobile-navigation-nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--color-white);
box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.12);
z-index: 100;
max-height: calc(100vh - 100%);
overflow-y: auto;
}
.mobile-navigation-toggle-input:checked ~ .mobile-navigation-nav {
display: block;
}
.mobile-navigation-list {
list-style: none;
margin: 0;
padding: 8px var(--header-padding-x) 24px;
display: flex;
flex-direction: column;
}
.mobile-navigation-list li > a {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 4px;
font-size: 16px;
color: var(--color-text);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.mobile-navigation-list li.nav-btn {
margin-top: 12px;
}
.mobile-navigation-list li.nav-btn > a {
border-bottom: none;
border-radius: var(--radius-pill);
padding: 14px 24px;
color: var(--color-white);
box-shadow: inset 0 0 0 4px transparent;
text-transform: uppercase; }
.mobile-navigation-list li.nav-btn-shop > a {
background-color: var(--color-moss);
box-shadow: inset 0 0 0 4px rgba(97, 129, 48, 0.2);
}
.mobile-navigation-list li.nav-btn-login > a {
background-color: var(--color-gold);
box-shadow: inset 0 0 0 4px rgba(196, 146, 19, 0.2);
margin-top: 8px;
}
@media (max-width: 1002px) { .mobile-menu-control-wrapper,
#site-navigation {
display: none !important;
}
.mobile-navigation-toggle-label {
display: flex;
}
} @media (min-width: 1003px) { .mobile-navigation-toggle-label,
.mobile-navigation-nav {
display: none !important;
}
.inside-header.grid-container {
position: relative;
flex-wrap: wrap;
row-gap: 16px;
}
.site-logo {
position: absolute;
left: var(--header-padding-x);
top: 13px;
}
#site-navigation .main-nav > ul,
#site-navigation .main-nav ul#menu-hauptnavigation {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px;
width: 100%;
}
.header-buttons-nav {
display: flex; flex-basis: 100%;
justify-content: flex-end;
margin-left: auto;
}
} @media (min-width: 1400px) {
#site-navigation .main-nav > ul,
#site-navigation .main-nav ul#menu-hauptnavigation {
flex-wrap: nowrap;
}
.header-buttons-nav {
flex-basis: auto;
margin-left: 40px;
}
} .site-footer {
background-color: var(--color-footer-bg);
}
.footer-inner {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 56px 32px;
max-width: 1312px;
margin: 0 auto;
padding: 80px 24px 64px;
}
.footer-links ul,
.footer-legal ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer-links ul {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 200px;
} .footer-links {
margin-right: 48px;
}
.footer-links a,
.footer-legal a {
color: var(--color-text);
text-decoration: none;
font-size: 18px;
}
.footer-links a:hover,
.footer-legal a:hover {
color: var(--color-moss-dark);
text-decoration: underline;
}
.footer-contact {
display: flex;
flex-direction: column;
gap: 24px;
max-width: 416px;
}
.footer-download-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--color-text);
font-size: 18px;
text-decoration: none;
}
.footer-download-link img {
width: 24px;
height: 24px;
}
.footer-download-link:hover {
color: var(--color-moss-dark);
}
.footer-contact-cta p {
margin: 0 0 16px;
font-size: 18px;
line-height: 26px;
color: var(--color-text);
}
.footer-phone {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 24px;
font-weight: 800;
color: var(--color-moss);
text-decoration: none;
}
.footer-phone img {
width: 32px;
height: 32px;
}
.footer-funding {
background-color: var(--color-white);
box-shadow: var(--shadow-card);
border-radius: 16px;
padding: 16px 24px;
display: flex;
flex-direction: column;
gap: 8px;
} @media (min-width: 1162px) {
.footer-funding {
margin-left: auto;
max-width: 528px;
}
}
.footer-funding img {
height: auto;
}
.footer-funding p {
margin: 0;
font-size: 12px;
line-height: 16px;
color: #064d9a;
}
.footer-legal {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
font-size: 14px;
border-top: 1px solid rgba(72, 65, 59, 0.15);
padding-top: 24px;
}
.footer-legal ul {
display: flex;
flex-wrap: wrap;
gap: 32px;
}
.footer-copyright {
margin: 0;
color: var(--color-text);
} #genpress-front-page { width: 100%; } .genossenschaft-section,
.leistungen-section,
.karriere-section,
.shop-section,
.content-page-header {
width: 100vw;
margin-left: calc(50% - 50vw);
}
.section-inner {
position: relative;
max-width: 1312px;
margin: 0 auto;
padding: 0 24px;
}
.section-eyebrow {
display: flex;
align-items: center;
gap: 16px;
font-size: 20px;
color: var(--color-moss-dark);
margin-bottom: 16px;
}
.section-eyebrow img {
width: 60px;
height: auto;
flex-shrink: 0;
}
.section-eyebrow--on-dark {
color: var(--color-white);
font-size: 24px;
}
.section-headline {
font-size: clamp(28px, 4vw, 48px);
font-weight: 800;
color: var(--color-text);
margin: 0 0 40px;
max-width: 900px;
} .corner-accent {
position: absolute;
top: 0;
width: 190px;
height: 190px;
pointer-events: none;
overflow: hidden;
}
.corner-accent--left {
left: 0;
}
.corner-accent--right {
right: 0;
}
.corner-accent::before {
content: "";
position: absolute;
inset: 0;
background: var(--color-moss);
}
.corner-accent--right::before {
background: var(--color-white);
}
.corner-accent::after {
content: "";
position: absolute;
inset: 0;
background: var(--color-white);
}
.corner-accent--left::after {
border-radius: 100% 0 0 0;
}
.corner-accent--right::after {
border-radius: 0 100% 0 0;
} .genossenschaft-section::before {
content: "";
position: absolute;
top: -304px;
right: 0;
width: 304px;
height: 304px;
background-image: url(//www.klauenpfleger-eg-sachsen.de/wp-content/themes/generatepress-child/assets/images/green-rounded-corner-bottom-right.svg);
background-size: 304px 304px;
background-repeat: no-repeat;
pointer-events: none;
} .card-shadow-bar {
height: 16px;
margin: 0 32px;
background-color: var(--color-moss);
opacity: 0.2;
border-radius: 0 0 8px 8px;
transition: opacity 0.2s ease;
}
.card-shadow-bar--wide {
height: 60px;
margin: 0 auto;
width: 80%;
max-width: 1088px;
opacity: 1;
background-color: var(--color-moss-dark);
border-radius: 8px;
position: relative;
top: -20px;
}
.text-moss {
color: var(--color-moss);
} .hero-section {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
background-size: cover;
background-position: center center;
background-repeat: no-repeat; background-attachment: fixed; width: 100vw;
margin-left: calc(50% - 50vw);
}
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
.hero-section { background-attachment: scroll;
}
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.05) 60%, rgba(0, 0, 0, 0.35));
}
.hero-content {
position: absolute;
z-index: 1; width: 100%;
max-width: 1440px;
margin: 0 auto;
top: 20vw;
left: 2vw;
}
@media (min-width: 769px), (prefers-reduced-motion: reduce) {
.hero-content {
top: 390px;
left: 12vw;
}
}
.hero-headline {
font-size: clamp(32px, 6vw, 64px);
line-height: 1.2;
font-weight: 800;
color: var(--color-white);
margin: 0 0 24px;
} .genossenschaft-section {
position: relative;
background-color: var(--color-moss);
padding: 0 0 88px; padding-top: clamp(140px, 30vw, 424px);
} .genossenschaft-card-frame {
position: relative;
}
.genossenschaft-card {
position: relative;
background-color: var(--color-white);
border-radius: 32px; padding: 56px 88px 112px;
z-index: 2;
}
.genossenschaft-photo-row {
display: flex;
align-items: flex-start; margin-top: -25.74%;
margin-bottom: 64px;
}
.genossenschaft-photo { flex: 0 1 79.41%;
aspect-ratio: 864 / 448; border-radius: 16px 0 16px 16px;
overflow: hidden;
box-shadow: var(--shadow-card);
}
.genossenschaft-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
} .genossenschaft-photo-accent {
position: absolute;
top: 0;
left: calc(79.41% - 51.76px);
width: calc(20.59% - 36.24px);
aspect-ratio: 1 / 1;
margin-top: calc(101.3px - 25.74%);
background-color: var(--color-moss-dark); border-radius: 0 16px 0 0;
}
.genossenschaft-lead {
font-size: clamp(22px, 3vw, 32px);
line-height: 1.3;
color: var(--color-text);
margin: 0 0 24px;
}
.genossenschaft-text {
font-size: 20px;
line-height: 1.4;
color: var(--color-text);
margin: 0 0 32px;
max-width: 700px;
}
.genossenschaft-symbol {
position: relative;
width: 158px;
height: 88px;
margin: 64px auto 0;
opacity: 0.35;
}
.symbol-part {
position: absolute;
}
.symbol-part--1 {
inset: 28.71% -0.01% 2.29% 73.99%;
}
.symbol-part--2 {
inset: 28.5% 67.57% 0 0;
}
.symbol-part--3 {
inset: 0 14.05% 0.02% 20.85%;
} .leistungen-section {
position: relative;
background-color: var(--color-white);
padding: 96px 0;
}
.leistungen-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-bottom: 40px;
} .leistung-card-wrap {
display: block;
color: inherit;
text-decoration: none !important;
}
.leistung-card {
background-color: var(--color-white); box-shadow: var(--shadow-card), inset 0 0 0 4px transparent;
border-radius: 32px;
padding: 32px;
height: 272px; display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
transition: box-shadow 0.2s ease;
} .leistung-card-wrap:hover .leistung-card {
box-shadow: var(--shadow-card), inset 0 0 0 4px var(--color-moss);
}
.leistung-card-wrap:hover .card-shadow-bar {
opacity: 1;
}
.leistung-card p {
align-self: flex-start;
font-size: 24px;
font-weight: 800;
line-height: 1.3;
color: var(--color-moss-dark);
margin: 0;
}
.leistung-card-icon {
width: 28px;
height: 28px;
}
.leistungen-cta {
display: inline-flex;
margin: 0 auto;
} .karriere-section {
position: relative;
background-color: var(--color-gold); padding: 96px 0;
} .karriere-section .section-eyebrow {
color: var(--color-white);
} .karriere-section .corner-accent::after {
background: var(--color-gold);
} .karriere-section .card-shadow-bar--wide {
background-color: rgba(0, 0, 0, 0.25);
}
.karriere-card {
background-color: var(--color-white);
box-shadow: var(--shadow-card);
border-radius: 24px;
padding: 48px;
position: relative;
z-index: 2;
}
.karriere-card h3 {
margin: 0 0 24px;
color: var(--color-text);
}
.karriere-schedule {
list-style: none;
margin: 0 0 32px;
padding: 0;
border-top: 1px solid rgba(72, 65, 59, 0.1);
}
.karriere-schedule li {
display: flex;
justify-content: space-between;
padding: 24px;
font-size: 20px;
color: var(--color-text);
border-bottom: 1px solid rgba(72, 65, 59, 0.1);
}
.karriere-schedule li:nth-child(odd) {
background-color: rgba(97, 129, 48, 0.04);
}
.karriere-note {
font-size: 18px;
line-height: 1.4;
color: var(--color-text);
margin: 0 0 32px;
} .karriere-actions {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 16px;
} .shop-section {
background-color: var(--color-white);
padding: 96px 0;
}
.shop-inner {
display: flex;
align-items: center;
gap: 48px;
}
.shop-image {
position: relative;
width: 272px;
height: 272px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
.shop-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.shop-image-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 128px;
height: 128px;
border-radius: 50%;
background-color: var(--color-moss);
display: flex;
align-items: center;
justify-content: center;
}
.shop-image-icon img {
width: 64px;
height: 64px;
object-fit: contain;
}
.shop-content {
flex: 1;
}
@media (max-width: 900px) {
.leistungen-grid {
grid-template-columns: repeat(2, 1fr);
}
.shop-inner {
flex-direction: column;
text-align: center;
}
}
@media (max-width: 600px) {
.leistungen-grid {
grid-template-columns: 1fr;
}
.genossenschaft-card {
padding: 32px;
} .karriere-card {
padding: 24px;
} .genossenschaft-photo-accent {
left: calc(79.41% - 18.82px);
width: calc(20.59% - 13.18px);
margin-top: calc(48.47px - 25.74%);
}
.corner-accent {
display: none;
} .genossenschaft-section::before {
display: none;
}
} .content-page {
width: 100%;
max-width: none;
}
.content-page-header {
background-color: var(--color-moss);
padding: 64px 0; }
.content-page-header h1 {
color: var(--color-white);
font-size: clamp(28px, 4vw, 40px);
margin: 0;
}
@media (min-width: 1400px) {
.content-page-header h1 {
margin-left: 91px;
}
}
.content-page-body {
max-width: 960px;
padding-top: 56px;
padding-bottom: 96px;
font-size: 18px;
line-height: 1.6;
color: var(--color-text);
}
.content-page-body h2 {
color: var(--color-moss-dark);
}
.kontakt-card {
background-color: var(--color-white);
box-shadow: var(--shadow-card);
border-radius: 24px;
padding: 40px;
margin-top: 40px;
}
.kontakt-card .footer-phone {
margin: 16px 0;
}
.kontakt-email a {
font-size: 18px;
}
.kontakt-note {
margin-top: 24px;
color: var(--color-text);
opacity: 0.8;
}