) */
.header-container .main-nav .nav-list>li.is-open>.sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: all;
transition:
opacity 160ms ease,
transform 200ms ease,
visibility 0s;
}
/* Mega menu: siatka kart dla Leistungen */
.header-container .main-nav .nav-list>li.mega-has-leistungen-cards.is-open>.sub-menu {
display: grid;
/* Na desktopzie czytelniej działa układ "lista-karta": miniaturka po lewej, tekst po prawej */
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: calc(0.5*var(--gap));
background-color: var(--light);
/* Ograniczenie wysokości panelu + scroll (żeby 17 kafli nie zasłaniało całej strony) */
max-height: calc(100vh - (var(--contact-h) + var(--header) + 1rem));
overflow: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
@media (min-width: 992px) {
.header-container .main-nav .nav-list>li.mega-has-leistungen-cards.is-open>.sub-menu {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* Nadpisania domyślnych linków w mega menu (selektor celowo bardziej specyficzny niż mobile) */
.header-container .main-nav .nav-list>li.mega-has-leistungen-cards>.sub-menu a.mega-card-link {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
color: var(--dark);
font-weight: var(--semibold);
text-transform: none;
}
/* Desktop: miniaturka jako "avatar" po lewej (bardziej czytelne dla długich etykiet) */
.header-container .main-nav .nav-list>li.mega-has-leistungen-cards>.sub-menu a.mega-card-link .mega-card-thumb {
flex: 0 0 60px;
width: 60px;
aspect-ratio: 1 / 1;
border-radius: calc(0.5*var(--radius));
}
.header-container .main-nav .nav-list>li.mega-has-leistungen-cards>.sub-menu a.mega-card-link .mega-card-title {
font-size: 0.9rem;
min-height: unset;
-webkit-line-clamp: 2;
line-clamp: 2;
}
/* Widoczny focus dla klawiatury (WCAG) */
.header-container .main-nav .nav-list>li.mega-has-leistungen-cards>.sub-menu a.mega-card-link:focus-visible {
outline: 3px solid var(--lime);
outline-offset: 3px;
box-shadow: 0 0 0 3px var(--white), 0 2px 12px var(--shadow);
}
.header-container .main-nav .nav-list>li.mega-has-leistungen-cards>.sub-menu a.mega-card-link:hover {
color: var(--black);
box-shadow: 0 2px 12px var(--shadow);
}
.header-container .main-nav .nav-list>li.mega-has-leistungen-cards>.sub-menu a.mega-card-link:hover .mega-card-image {
transform: scale(1.07);
}
/* Linki wewnątrz mega menu */
.header-container .main-nav .sub-menu li {
padding: 0;
border: none;
}
.header-container .main-nav .sub-menu li a {
line-height: 1.3;
height: auto;
display: inline;
padding: .5rem 0;
font-weight: 400;
color: var(--darkgray);
font-size: 0.9rem;
border: none;
text-transform: none;
}
.header-container .main-nav .sub-menu li a:hover {
color: var(--black);
}
/* ===============================
CONTACTBAR — Desktop (≥768px)
=============================== */
.contactbar {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--contact-h);
z-index: 2000;
background-color: var(--lime);
color: var(--black);
font-size: 0.875rem;
line-height: 1;
transition: background-color 0.2s ease, color 0.2s ease;
}
.contactbar .limited {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.contactbar-items {
display: flex;
align-items: center;
gap: 2rem;
}
.contactbar-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: inherit;
text-decoration: none;
padding: 0.375rem 0.5rem;
border-radius: calc(0.5 * var(--radius));
transition:
color 0.2s ease,
background-color 0.2s ease,
transform 0.15s ease;
}
/* Ikony w contactbar */
.contactbar-icon {
flex-shrink: 0;
width: 16px;
height: 16px;
transition: transform 0.2s ease;
}
/* Hover dla linków */
a.contactbar-link:hover {
color: var(--darkgreen);
background-color: rgba(255, 255, 255, 0.4);
}
a.contactbar-link:hover .contactbar-icon {
transform: scale(1.1);
}
/* Active state */
a.contactbar-link:active {
transform: scale(0.98);
}
/* Focus visible (WCAG 2.2) */
.contactbar-link:focus-visible {
outline: 3px solid var(--darkgreen);
outline-offset: 2px;
}
/* Wersja przezroczysta (.trans) */
.trans .contactbar {
background-color: var(--black);
color: var(--white);
}
.trans a.contactbar-link:hover {
color: var(--lime);
background-color: rgba(255, 255, 255, 0.1);
}
.trans .contactbar-link:focus-visible {
outline-color: var(--lime);
}
/* Nagłówek startuje pod paskiem kontaktowym */
.header-container {
position: fixed;
top: var(--contact-h);
/* ZMIANA: Odsunięcie od góry o wysokość paska */
left: 0;
width: 100%;
height: var(--header);
/* Twoja zmienna */
z-index: 1000;
/* Niżej niż contactbar */
background-color: var(--white);
/* Domyślne tło */
}
/* Na desktopie chowanie nagłówka odbywa się przez zmianę top na samym nagłówku */
body.header-hidden .header-container {
top: calc(var(--contact-h) - var(--header));
}
/* Dla wersji przezroczystej (.trans) - jeśli chcesz żeby nagłówek był przezroczysty */
.trans .header-container {
background-color: transparent;
/* Tło znika */
/* Tutaj ewentualnie logika kolorów linków */
}
/* Gdy menu smart się chowa na stronie .trans, a potem wraca z białym tłem?
To zależy od Twojej logiki JS. Na razie zostawmy standard. */
}
main {
transition: filter 0.2s ease-in-out;
}
main::after {
display: block;
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--black);
visibility: hidden;
opacity: 0;
z-index: 5;
transition: opacity 0.5s ease-in-out;
}
body.blur main::after {
opacity: 0.5;
visibility: visible;
}
body.blur {
overflow-y: hidden;
}
body.trans main {
margin-top: 0;
}
section {
padding: 1.8rem 0 2.5rem 0;
}
/* Startseite: KGG — sekcja edge-to-edge (bez globalnych paddingów sekcji) */
section.kgg-section {
padding: 0;
}
@media (min-width: 576px) {
section {
padding: 4.5rem 0;
}
}
/* Układ dzielonego ekranu */
.splitted {
display: flex;
width: 100%;
flex-direction: column;
}
.splitted>* {
flex: initial;
min-height: 250px;
}
.splitted>.image {
background-color: var(--primary-dark);
}
@media (min-width:768px) {
.splitted>* {
min-height: 400px;
}
}
@media (min-width:1200px) {
.splitted {
flex-direction: row;
}
.splitted>* {
flex: 0 0 50%;
min-height: 500px;
}
}
/* Style okruszków nawigacyjnych */
/* ===============================
Hero Wave Divider
Organiczny, asymetryczny łuk między hero a sekcją
=============================== */
.hero-wave-divider {
position: relative;
width: 100%;
height: 40px;
margin-top: -40px;
z-index: 5;
overflow: hidden;
pointer-events: none;
}
.hero-wave-svg {
display: block;
width: 100%;
height: 100%;
}
/* Większa fala na desktopie — więcej "głębi" wizualnej */
@media (min-width: 768px) {
.hero-wave-divider {
height: 60px;
margin-top: -60px;
}
}
@media (min-width: 1200px) {
.hero-wave-divider {
height: 80px;
margin-top: -80px;
}
}
/* Ukryj okruszki nawigacyjne na stronie głównej */
body.home #breadcrumbs-block {
display: none;
}
#breadcrumbs-block,
#breadcrumbs-block .row,
#breadcrumbs-block [class^="col-"] {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
#breadcrumbs-block {
padding-top: 1.5rem;
}
#breadcrumbs {
/* kontener okruszków nawigacyjnych */
display: inline-block;
line-height: 0;
padding: .5rem .75rem .4rem 0;
margin: 0;
border-radius: 10rem;
background-color: transparent;
color: var(--black);
}
/* Wybór ciemnego motywu okruszków: dodaj `.dark` do `#breadcrumbs-block` w `template-parts/entry-header.php` */
#breadcrumbs-block.dark #breadcrumbs {
background-color: var(--primary-dark);
color: var(--white);
padding-left: .75rem;
}
#breadcrumbs a:hover {
color: var(--darkshadow);
}
#breadcrumbs-block.dark #breadcrumbs a:hover {
color: var(--transwhite);
}
#breadcrumbs a,
#breadcrumbs a:hover {
background: none;
}
#breadcrumbs a,
#breadcrumbs span {
font-size: .8rem;
font-weight: var(--regular);
display: inline-block;
line-height: 1.3;
}
/* aktywny/aktualny okruszek (Yoast) */
#breadcrumbs .breadcrumb_last,
#breadcrumbs span[aria-current="page"] {
font-weight: var(--semibold);
}
#breadcrumbs>span>span:first-child a {
/* ukryj pierwszy link na urządzeniach mobilnych */
font-size: 0;
}
#breadcrumbs>span>span:first-child a::before {
/* ikona „home" przed pierwszym linkiem */
display: inherit;
content: '';
width: .8rem;
height: .8rem;
background-image: url(../icons/i-home-f.svg);
background-repeat: no-repeat;
background-size: contain;
}
#breadcrumbs-block.dark #breadcrumbs>span>span:first-child a::before {
filter: invert();
}
@media (min-width: 768px) {
#breadcrumbs-block {
padding-top: 3rem;
}
#breadcrumbs a,
#breadcrumbs span,
#breadcrumbs>span>span:first-child a {
font-size: .9rem;
}
#breadcrumbs>span>span:first-child a::before {
width: .9rem;
height: .9rem;
margin-right: .5rem;
}
}
/* Menu boczne: Leistungen */
#menu-leistungen li {
padding: .25rem 0;
}
#menu-leistungen a {
font-size: .875rem;
line-height: 1.3;
display: table-cell;
font-weight: var(--thin);
}
/* Sidebar — menu kontekstowe */
.sidebar {
display: none;
width: calc(var(--sidebar-width) + var(--gap));
flex-shrink: 0;
padding: 0 var(--gap);
}
@media (min-width: 992px) {
.sidebar {
display: block;
}
}
.sidebar>div {
position: -webkit-sticky;
position: sticky;
top: calc(var(--header) + 2rem);
background-color: var(--white);
box-shadow: 0 1px 10px var(--shadow);
border-radius: var(--radius);
transition: top 0.3s ease-in-out;
}
.header-hidden .header-container+main .sidebar>div {
top: 2rem;
}
.sidebar ul li a {
font-weight: var(--semibold);
font-size: .875rem;
display: block;
line-height: 1.3;
padding: .75rem 1.5rem;
color: var(--pri);
border-bottom: 1px solid var(--shadow);
transition: all 0.2s ease-in-out;
}
@media (min-width: 1200px) {
.sidebar ul li a {
font-size: .88888888888rem;
}
}
.sidebar ul li:first-child a {
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
padding-top: 1rem;
background-color: var(--light);
}
.sidebar ul li:last-child a {
border-bottom: none;
border-bottom-left-radius: var(--radius);
border-bottom-right-radius: var(--radius);
padding-bottom: 1rem;
}
.sidebar ul li a:hover {
color: var(--black);
background-color: var(--light);
}
.main-content {
flex-grow: 1;
}
@media (min-width: 1920px) {
.main-content {
padding-left: var(--gap);
}
}
/* ===============================
FOOTER — Site Footer
Struktura: .site-footer > .footer-main + .footer-bottom
=============================== */
.site-footer {
background-color: var(--darkgreen);
color: var(--white);
margin-top: auto; /* Push to bottom in flex layouts */
}
/* Główna sekcja footera */
.footer-main {
padding: 3rem 0 2rem 0;
}
/* Siatka footera — 3 kolumny na desktop */
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 576px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem 1.5rem;
}
/* Kolumna brand zajmuje całą szerokość na tablet */
.footer-grid--3col .footer-col--brand {
grid-column: 1 / -1;
}
}
@media (min-width: 992px) {
.footer-grid--3col {
grid-template-columns: 1.5fr 0.8fr 1.3fr;
gap: 2.5rem;
}
.footer-grid--3col .footer-col--brand {
grid-column: auto;
}
.footer-main {
padding: 4rem 0 3rem 0;
}
}
/* Kolumny */
.footer-col {
min-width: 0; /* Prevent grid blowout */
}
/* Kolumna 1: Brand */
.footer-logo {
display: inline-block;
margin-bottom: 1rem;
}
.footer-logo img {
height: 2.5rem;
width: auto;
filter: brightness(0) invert(1); /* Biała wersja logo */
transition: filter 0.2s ease, opacity 0.2s ease;
}
.footer-logo:hover img {
opacity: 0.8;
}
.footer-logo:focus-visible {
outline: 3px solid var(--lime);
outline-offset: 4px;
border-radius: calc(0.5 * var(--radius));
}
.footer-tagline {
font-size: 1.1rem;
font-weight: var(--semibold);
color: var(--lime);
margin-bottom: 0.75rem;
line-height: 1.3;
}
.footer-desc {
font-size: 0.9rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 1.25rem;
max-width: 550px;
}
/* Social Media */
.footer-social {
display: flex;
gap: 0.75rem;
margin-top: 1rem;
}
.footer-social-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: var(--radius-full);
background-color: rgba(255, 255, 255, 0.1);
color: var(--white);
font-size: 0.85rem;
font-weight: var(--semibold);
text-decoration: none;
transition:
background-color 0.2s ease,
color 0.2s ease,
transform 0.15s ease;
}
.footer-social-link:hover {
background-color: var(--lime);
color: var(--black);
transform: translateY(-2px);
}
.footer-social-link:focus-visible {
outline: 3px solid var(--lime);
outline-offset: 3px;
}
.footer-social-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* Nagłówki kolumn */
.footer-heading {
font-size: 1rem;
font-weight: var(--semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--lime);
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid rgba(255, 255, 255, 0.15);
}
/* Menu w footerze */
.footer-menu {
list-style: none;
padding: 0;
margin: 0;
}
.footer-menu li {
margin-bottom: 0.5rem;
}
.footer-menu li:last-child {
margin-bottom: 0;
}
.footer-menu a {
display: inline-block;
color: rgba(255, 255, 255, 0.9);
font-size: 0.9rem;
line-height: 1.4;
text-decoration: none;
padding: 0.25rem 0;
transition: color 0.2s ease, padding-left 0.2s ease;
}
.footer-menu a:hover {
color: var(--lime);
padding-left: 0.35rem;
}
.footer-menu a:focus-visible {
outline: 2px solid var(--lime);
outline-offset: 2px;
border-radius: 3px;
}
/* Kolumna 4: Kontakt */
.footer-address {
font-style: normal;
}
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 1rem;
font-size: 0.9rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.9);
}
.footer-contact-item:last-of-type {
margin-bottom: 1.25rem;
}
.footer-contact-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 0.15rem;
color: var(--lime);
}
.footer-contact-item a {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
transition: color 0.2s ease;
}
.footer-contact-item a:hover {
color: var(--lime);
}
.footer-contact-item a:focus-visible {
outline: 2px solid var(--lime);
outline-offset: 2px;
border-radius: 3px;
}
.footer-contact-item strong {
font-weight: var(--semibold);
color: var(--white);
}
.footer-hours {
display: block;
color: rgba(255, 255, 255, 0.8);
}
/* Godziny otwarcia — lista */
.footer-hours-block {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.footer-hours-list {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.footer-hours-row {
display: flex;
gap: 0.5rem;
font-size: 0.85rem;
line-height: 1.4;
}
.footer-hours-row dt {
/* Skróty dni (Mo., Di., Mi., etc.) - mniejsza szerokość */
min-width: 2.5rem;
flex-shrink: 0;
/* WCAG AA: Zwiększono przezroczystość z 0.7 na 0.85 dla lepszego kontrastu */
color: rgba(255, 255, 255, 0.85);
font-weight: var(--semibold);
}
.footer-hours-row dd {
margin: 0;
color: rgba(255, 255, 255, 0.9);
white-space: nowrap; /* Zapobiega łamaniu godzin */
}
/* Dolny pasek — legal links (lewo), copyright (środek) */
.footer-bottom {
background-color: rgba(0, 0, 0, 0.2);
padding: 1rem 0;
}
.footer-bottom-inner {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.75rem 1.5rem;
text-align: center;
}
/* Copyright zawsze na środku — pełna szerokość */
.footer-copyright {
flex: 1 1 100%;
order: 2;
text-align: center;
}
.footer-legal {
order: 1;
}
@media (min-width: 768px) {
.footer-bottom-inner {
flex-wrap: nowrap;
justify-content: space-between;
}
/* Legal links na lewo, copyright na środku */
.footer-legal {
flex: 0 0 auto;
order: 1;
}
.footer-copyright {
flex: 1 1 auto;
order: 2;
text-align: center;
}
/* Pusty spacer na prawo dla wyrównania */
.footer-bottom-inner::after {
content: '';
flex: 0 0 auto;
width: 150px; /* Mniej więcej szerokość legal links */
order: 3;
}
}
.footer-copyright {
font-size: 0.85rem;
/* WCAG AA: Zwiększono przezroczystość z 0.7 na 0.85 dla lepszego kontrastu */
color: rgba(255, 255, 255, 0.85);
margin: 0;
}
.footer-legal {
display: flex;
align-items: center;
gap: 0.5rem;
}
.footer-legal a {
font-size: 0.85rem;
/* WCAG AA: Zwiększono przezroczystość z 0.7 na 0.85 dla lepszego kontrastu */
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
transition: color 0.2s ease;
}
.footer-legal a:hover {
color: var(--lime);
}
.footer-legal a:focus-visible {
outline: 2px solid var(--lime);
outline-offset: 2px;
border-radius: 3px;
}
.footer-legal-sep {
color: rgba(255, 255, 255, 0.4);
}
/* Przycisk "Do góry" */
#up {
position: fixed;
bottom: 1rem; /* Desktop: domyślnie nisko, gdy CTA jest przy menu górnym */
right: 0.5rem;
width: 48px;
height: 48px;
padding: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 6px 0px var(--darkshadow); /* Taki sam jak .cta */
cursor: pointer; /* Łapka na hover */
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition:
opacity 0.3s ease,
visibility 0.3s ease,
transform 0.3s ease,
background-color 0.2s ease,
bottom 0.3s ease;
z-index: 1500;
background-color: var(--lime);
border: 3px solid var(--lime);
color: var(--black);
line-height: 1;
}
#up.showbutton {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
#up:hover {
background-color: var(--green);
}
#up:focus-visible {
outline: 3px solid var(--darkgreen);
outline-offset: 3px;
}
/* Desktop: gdy header ukryty, CTA jest na dole — #up przesuwa się wyżej */
.header-hidden #up {
bottom: 5.5rem;
}
/* Mobile: #up wsuwa się od dołu gdy FAB jest ukryty */
@media (max-width: 767px) {
#up {
bottom: 1rem;
right: 1rem;
transform: translateY(120px); /* Startuje poza ekranem (pod FAB bar) */
}
#up.showbutton {
transform: translateY(0);
}
/* Mobile: pozycja nie zmienia się z .header-hidden */
.header-hidden #up {
bottom: 1rem;
}
}
/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
#up,
.footer-social-link,
.footer-menu a,
.footer-contact-item a,
.footer-legal a {
transition: none;
}
}
/* Sekcje nagłówkowe */
/* STANDARD: Hero o średniej wysokości (~45vh)
Używany przez: single.php, page-blog.php, page-preisliste-privatpatienten.php */
.hero {
position: relative;
min-height: 280px;
overflow: hidden;
background-color: var(--light);
}
.hero .cta-booster {
display: block;
margin-top: 1.5rem;
font-size: 1.2rem;
line-height: 1.3;
color: var(--white);
text-transform: uppercase;
font-weight: var(--semibold);
text-shadow:
0 2px 4px rgba(0, 0, 0, 0.8),
0 0 20px rgba(0, 0, 0, 0.6),
0 0 40px rgba(0, 0, 0, 0.4);
}
@media (min-width: 576px) {
.hero {
min-height: 320px;
}
}
@media (min-width: 768px) {
.hero {
min-height: 55vh;
min-height: 55dvh;
max-height: 540px;
}
}
.hero .row {
width: 100%;
}
/* FULLSCREEN: Hero na ~88% wysokości ekranu
Zredukowano z 100vh aby fala organiczna była widoczna i zachęcała do scrollowania.
Używany przez: single-leistungen.php, page-startseite.php (z .big-hero)
UWAGA: Stała wysokość (zawsze odejmujemy contact-h + header), niezależna od .header-hidden,
żeby nie było "skoku" przy chowaniu headera. */
.big-hero .hero {
min-height: calc(80dvh - (var(--contact-h) + var(--header)));
max-height: none;
}
@media (max-width: 767px) {
.big-hero .hero {
min-height: calc(88svh - (var(--contact-h) + var(--header)));
}
}
/* CPT: Leistungen — ~88% wysokości (bez .big-hero w HTML, sterowane przez body class)
Zredukowano z 100vh aby fala organiczna była widoczna i zachęcała do scrollowania.
UWAGA: Stała wysokość (zawsze odejmujemy contact-h + header), niezależna od .header-hidden,
żeby nie było "skoku" przy chowaniu headera. */
.single-leistungen .hero {
min-height: calc(88dvh - (var(--contact-h) + var(--header)));
max-height: none;
}
@media (max-width: 767px) {
.single-leistungen .hero {
min-height: calc(88svh - (var(--contact-h) + var(--header)));
}
}
.hero img,
.hero video {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
/* Stały kontrast — bez animacji/zmian w JS */
opacity: 0.9;
filter: none;
transform: translate(-50%, -50%);
animation: hero-fade-in 180ms ease-out both;
transition: none;
/* Placeholder przed załadowaniem (hero to zawsze zdjęcia, nie PNG) */
background-color: var(--light);
color: transparent;
font-size: 0;
line-height: 0;
text-indent: -9999px;
}
@keyframes hero-fade-in {
from { opacity: 0.75; }
to { opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
.hero img,
.hero video {
animation: none;
}
}
/* Gradient Vignette — przyciemnienie tylko w dolnej części hero (gdzie tekst)
Górna część obrazu pozostaje w 100% widoczna */
.hero::after {
content: '';
position: absolute;
inset: 0;
background:
/* subtelna winieta u góry */
linear-gradient(
to bottom,
rgba(0, 0, 0, 0.35) 0%,
rgba(0, 0, 0, 0.12) 25%,
transparent 45%
),
/* mocniejsza winieta u dołu */
linear-gradient(
to top,
rgba(0, 0, 0, 0.75) 0%,
rgba(0, 0, 0, 0.5) 25%,
rgba(0, 0, 0, 0.25) 50%,
transparent 70%
);
pointer-events: none;
z-index: 1;
}
/* FULLSCREEN Hero (100dvh): rozszerzony gradient + subtelna winieta od góry
Tekst jest wyżej na ekranie, więc gradient musi sięgać dalej */
.big-hero .hero::after,
.single-leistungen .hero::after {
background:
/* Górna winieta — przyciemnienie dla kontrastu z headerem */
linear-gradient(
to bottom,
rgba(0, 0, 0, 0.4) 0%,
rgba(0, 0, 0, 0.15) 22%,
transparent 38%
),
/* Dolna winieta — intensywna, sięga dalej niż standard */
linear-gradient(
to top,
rgba(0, 0, 0, 0.85) 0%,
rgba(0, 0, 0, 0.6) 18%,
rgba(0, 0, 0, 0.35) 40%,
rgba(0, 0, 0, 0.18) 60%,
transparent 78%
);
}
/* FULLSCREEN Hero: wzmocniony text-shadow dla h1 */
.big-hero .hero h1,
.big-hero .hero .h1,
.single-leistungen .hero h1,
.single-leistungen .hero .h1 {
text-shadow:
0 2px 8px rgba(0, 0, 0, 0.95),
0 4px 16px rgba(0, 0, 0, 0.8),
0 0 40px rgba(0, 0, 0, 0.6),
0 0 80px rgba(0, 0, 0, 0.4);
}
/* === Hero Container Layout ===
Wyrównanie do dołu — treść w strefie winiety gradientu.
Zapewnia lepszy kontrast tekstu na tle przyciemnionej dolnej części zdjęcia.
Padding-bottom uwzględnia wysokość fali SVG (breadcrumbs) + margines bezpieczeństwa. */
.hero .container {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: flex-end; /* wyrównanie do dołu dla wszystkich wariantów */
z-index: 2;
padding-top: calc(1*var(--header));
padding-bottom: calc(40px + 1rem); /* wave height mobile (40px) + margines */
}
@media (min-width: 768px) {
.hero .container {
padding-bottom: calc(60px + 1.25rem); /* wave height tablet (60px) + margines */
}
}
@media (min-width: 1200px) {
.hero .container {
padding-bottom: calc(80px + 1.5rem); /* wave height desktop (80px) + margines */
}
}
/* Big-hero / Leistungen: większe padding dla pełnoekranowych hero
Więcej przestrzeni oddechowej przy wysokich sekcjach */
.big-hero .hero .container,
.single-leistungen .hero .container {
padding-bottom: calc(40px + 1.5rem); /* mobile: wave + większy margines */
}
@media (min-width: 768px) {
.big-hero .hero .container,
.single-leistungen .hero .container {
padding-bottom: calc(60px + 2rem); /* tablet */
}
}
@media (min-width: 1200px) {
.big-hero .hero .container,
.single-leistungen .hero .container {
padding-bottom: calc(80px + 2.5rem); /* desktop */
}
}
/* === Hero Content Width System ===
Semantyczne klasy szerokości dla treści w sekcji hero.
Szerokość dobierana automatycznie w hero.php na podstawie zawartości. */
/* Kompaktowy: tylko nagłówek h1 (standardowe strony) */
.hero-content--compact {
max-width: var(--limit-narrow); /* 540px */
}
/* Rozszerzony: h1 + CTA button + booster (landing pages) */
.hero-content--extended {
max-width: var(--limit-narrow); /* 760px */
}
/* Szeroki: długie tytuły blogów */
.hero-content--wide {
max-width: var(--limit-middle); /* 900px */
}
/* Mobile: pełna szerokość kontenera (padding kontroluje marginesy) */
@media (max-width: 575px) {
.hero-content--compact,
.hero-content--extended,
.hero-content--wide {
max-width: 100%;
}
}
/* Reset marginesu ostatniego elementu w grupie treści hero
Zapobiega niepotrzebnej przestrzeni gdy h1 jest jedynym elementem
lub gdy .cta-booster jest ostatnim elementem */
.hero-content--compact > *:last-child,
.hero-content--extended > *:last-child,
.hero-content--wide > *:last-child {
margin-bottom: 0;
}
/* === Hero Typography === */
.hero h1,
.hero .h1,
.hero p {
/* Luminous Shadow — wielowarstwowy cień dla czytelności na różnych tłach */
text-shadow:
0 2px 4px rgba(0, 0, 0, 0.8),
0 0 20px rgba(0, 0, 0, 0.6),
0 0 40px rgba(0, 0, 0, 0.4);
}
/* === Bezpiecznik dla długich niemieckich wyrazów (tylko mobile) ===
Zapobiega przepełnieniu kontenera przez złożone wyrazy np. "Krankengymnastik" */
.hero h1,
.hero .h1 {
font-weight: var(--semibold);
/* Balansowanie linii dla lepszej estetyki */
text-wrap: balance;
}
@media (max-width: 575px) {
h1,
.h1 {
/* Automatyczne dzielenie wyrazów (wymaga lang="de" na ) */
-webkit-hyphens: auto;
hyphens: auto;
/* Fallback: łamanie słów gdy hyphens nie działa */
overflow-wrap: break-word;
word-wrap: break-word; /* legacy */
}
.hero h1,
.hero .h1
{
font-size: 1.75rem;
line-height: 1.34;
text-wrap: balance;
}
}
/* Posty (single.php): szersze tytuły blogów */
body.single-post .hero h1.post-hero-title {
text-wrap: balance;
}
.hero [class^="col-"] {
padding-top: 0;
padding-bottom: 0;
margin-bottom: 0;
}
/* Przycisk CTA w sekcji nagłówkowej */
.hero .btn {
margin-bottom: 0;
}
.hero .excerpt {
display: none;
}
/* Zajawka w sekcji nagłówkowej — wyświetlana przez `template-parts/entry-header-big-excerpt.php` */
.show-excerpt .hero .excerpt {
display: block;
max-width: var(--limit-narrow);
margin-top: 1.5rem;
}
@media (min-width: 992px) {
.show-excerpt .hero .excerpt {
margin-bottom: 3rem;
}
}
body.trans .hero {
min-height: calc(55vh + var(--header));
min-height: calc(55dvh + var(--header));
}
body.trans .big-hero .hero {
min-height: calc(88dvh - (var(--contact-h) + var(--header)));
max-height: none;
}
body.trans .hero .container {
padding-top: calc(2*var(--header));
}
/* ===============================
5. Style komponentów
=============================== */
/* Przyciski — ogólne *** *** *** *** ***/
.btn,
input[type="submit"] {
/* domyślnie: dziedziczone kolory, przezroczyste tło */
display: inline-block;
width: 100%;
padding: 0.75rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 1rem;
font-weight: var(--semibold);
text-align: center;
line-height: 1.2;
border-radius: var(--radius-full);
background-color: transparent;
transition: all .3s ease;
image-rendering: high-quality;
position: relative;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
min-height: 44px;
}
/* Przyciski — kolory *** *** *** *** ***/
.btn.green,
input[type="submit"].green {
background-color: var(--lime);
color: var(--black);
border: 3px solid var(--lime);
}
.btn.secondary, input[type="submit"].secondary {
background-color: var(--white);
color: var(--black);
border: 3px solid var(--lime);
}
/* urządzenie z myszką / touchpadem */
@media (hover: hover) and (pointer: fine) {
/* Pseudoelement — kółko */
.btn::before,
input[type="submit"]::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: auto;
height: 100%;
aspect-ratio: 1 / 1;
background: var(--halfwhite);
border-radius: 50%;
transform: translate(-100%, -50%);
transition: transform .75s ease;
pointer-events: none;
}
/* animacja kółka */
.btn:hover::before,
input[type="submit"]:hover::before {
transform: translate(300px, -50%);
}
.btn.green:hover {
background-color: var(--green);
}
}
@media (hover: none) and (pointer: coarse) {
.btn:active {
transform: translateY(3px);
}
.btn.green:active {
background-color: var(--green);
}
}
@media screen and (min-width: 576px) {
.btn,
input[type="submit"] {
width: auto;
/* zmiana z width: 100% na normalne (auto) na desktopie */
min-width: 120px;
}
.block .btn {
margin-right: 1rem;
}
}
/* CTA i przycisk „do góry” */
/* style domyślne */
.cta {
margin: 0;
padding: 0.75rem 1rem;
position: fixed;
right: .5rem;
box-shadow: 0 1px 6px 0px var(--darkshadow);
transition: all .3s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
gap: .4rem;
width: auto;
min-height: 44px;
min-width: 44px;
}
/* Ukryj CTA na urządzeniach mobilnych - będzie inne rozwiązanie */
@media screen and (max-width: 1199px) {
.cta {
display: none;
}
}
.btn img {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
margin: 0 auto;
text-align: center;
}
/* Ikonki SVG w przyciskach (CTA) */
.btn .btn-icon {
display: inline-block;
width: 1.15rem;
height: 1.15rem;
vertical-align: -0.15em;
margin-right: 0.5rem;
}
.btn .btn-icon--after {
margin-right: 0;
margin-left: 0.5rem;
}
/* CTA w headerze jest flex i ma własny gap */
.btn.cta .btn-icon {
margin-right: 0;
}
/* Tekst CTA: krótki w headerze, pełny gdy fixed na dole */
.cta-text-short,
.cta-text-full {
white-space: nowrap;
}
.cta-text-full {
display: none;
}
/* tylko urządzenia mobilne */
@media screen and (max-width: 575px) {
.cta:hover {
padding-left: 1.5rem;
padding-right: 1.5rem;
justify-content: center;
}
}
/* style desktopowe */
@media screen and (min-width: 1200px) {
/* CTA w nagłówku po prawej: tekst + ikona */
.cta {
box-shadow: 0 1px 6px 0px var(--darkshadow);
display: flex;
align-items: center;
justify-content: space-between;
gap: .4rem;
position: relative;
/* Normalny stan - w headerze */
bottom: auto;
padding: 0.75rem 1.25rem;
width: auto;
/* Transition dla płynnego rozszerzania */
transition:
width 0.3s ease-in-out,
padding 0.3s ease-in-out,
background-color 0.3s ease-in-out,
box-shadow 0.3s ease-in-out;
}
.btn img {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
margin: 0 auto;
text-align: center;
}
/* Przycisk CTA wysuwa się z dołu, gdy nagłówek się chowa */
.header-hidden .cta {
position: fixed;
bottom: -5rem;
/* Startuje poza ekranem (pod dolną krawędzią) */
right: .5rem;
box-shadow: 0 1px 6px 0px var(--darkshadow);
animation: slideInFromBottom 0.5s ease-out forwards;
/* Animacja wysuwania z dołu */
}
/* W trybie fixed: pełny tekst "Termin vereinbaren" */
.header-hidden .cta .cta-text-short {
display: none;
}
.header-hidden .cta .cta-text-full {
display: inline;
}
@keyframes slideInFromBottom {
from {
bottom: -5rem;
opacity: 0;
}
to {
bottom: 1rem;
opacity: 1;
}
}
}
/* Style obrazów *** *** *** *** ***/
/* wyświetla obraz w oryginalnych proporcjach i pełnym rozmiarze */
img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
transition: transform 0.25s ease-in-out;
/* Ukrycie alt-text podczas ładowania (bez "mrugania" tekstem) */
color: transparent;
}
/* wyświetla obraz wyróżniający w kontenerze, który wymusza konkretną wysokość */
.featured.image {
max-height: 600px;
}
@media screen and (max-width: 575px),
screen and (min-width: 992px) and (max-width: 1199px) {
.featured.image {
max-height: 350px;
}
}
.image {
overflow: hidden;
position: relative;
width: 100%;
}
.image.dark {
background-color: var(--black);
}
.image *:not(img):not(.icon-tile) {
z-index: 2;
padding-top: 0;
padding-bottom: 0;
}
.image *:after {
display: none;
}
.image.dark img {
opacity: .4;
}
.image.dark.more-contrast img {
opacity: .3;
}
.image-centered {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.image-centered img {
transform: scale(1.01);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100.1%;
min-height: 100.1%;
}
/* Style boksów */
.box {
box-shadow: 0 0 20px -5px var(--shadow);
border-radius: var(--radius);
padding: 2.5rem 1.5rem 1.5rem 1.5rem;
margin-bottom: var(--gap);
}
.box .btn {
margin-bottom: 0;
}
.info-box {
background-color: var(--white);
padding: 1rem 1.5rem;
border-left: 3px solid var(--green);
border-radius: var(--radius);
margin: var(--gap) 0;
}
.info-box :last-child {
margin-bottom: 0;
}
/* Style kart *** *** *** *** ***/
@media screen and (min-width: 1200px) {
.container.full.has-cards {
padding-left: calc(.5 * var(--gap) + 4rem);
padding-right: calc(.5 * var(--gap) + 4rem);
}
}
.full.has-cards [class^="col-"] {
margin-bottom: 0;
}
.has-cards [class^="col-"] article {
height: 100%;
}
.card {
box-shadow: 0 1px 10px var(--shadow);
transition: all 0.3s ease-in-out;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: var(--radius);
transition: box-shadow 0.3s ease-in-out;
}
.card:hover {
box-shadow: 0 2px 12px var(--shadow);
}
.card img.wp-post-image,
.card .image {
border-radius: var(--radius) var(--radius) 0 0;
}
.card-caption {
position: absolute;
display: flex;
-ms-flex-align: end;
width: 100%;
height: 100%;
background: var(--darkshadow);
background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.55) 35%, rgba(0, 0, 0, 0) 75%);
bottom: 0;
left: 0;
}
.card-caption h3 {
color: var(--white);
margin: 0 0 1.5rem 0;
}
.card-text,
.card-caption {
padding: 1.5rem;
display: flex;
flex-wrap: wrap;
flex-direction: column;
flex: 1;
}
.card-text {
justify-content: space-between;
}
.card-caption {
justify-content: flex-end;
}
.card-text * {
transition: color 0.3s ease-in-out;
}
.card:hover .image img {
transform: translate(-50%, -50%) scale(1.2);
transition: transform 0.75s ease-in-out;
}
.more {
display: block;
font-size: 1.111111rem;
font-weight: var(--bold);
position: relative;
width: fit-content;
color: var(--primary)
}
.more::after {
right: -1.3rem;
top: 1.1rem;
transform: rotate(-45deg) translate(0, -.5rem);
border-color: var(--primary);
}
/*
@keyframes bounceLoop {
0% {
transform: rotate(-45deg) translate(0, -.5rem);
}
50% {
transform: rotate(-45deg) translate(.5rem, 0);
}
100% {
transform: rotate(-45deg) translate(0, -0.5rem);
}
}
.card:hover .more::after {
animation: bounceLoop 1s ease-in-out infinite;
}
*/
.card:hover .card-text span {
color: var(--primary-dark);
}
.card:hover .card-text.dark span {
color: var(--transwhite);
}
.card {
height: 100%;
}
/* kontener na link i ikonę w karcie */
.card-text>div:last-child {
display: flex;
justify-content: space-between;
align-items: baseline;
width: 100%;
}
/* ikona w karcie */
.card .icon img {
width: 2rem;
height: 2rem;
}
/* ===============================
BLOG (page-blog.php)
=============================== */
.blog-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--gap);
margin-bottom: var(--gap);
padding-top: calc(.5*var(--gap));
}
@media (min-width: 768px) {
.blog-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 992px) {
.blog-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.blog-card {
background-color: var(--white);
border-radius: var(--radius);
box-shadow: 0 1px 10px var(--shadow);
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
transition: box-shadow 0.25s ease-in-out;
}
.blog-card:hover {
box-shadow: 0 2px 12px var(--shadow);
}
.blog-card-thumb {
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--radius) var(--radius) 0 0;
background-color: rgba(0, 0, 0, 0.04);
}
.blog-card-thumb img.blog-card-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.blog-card-image--placeholder {
display: block;
width: 100%;
height: 100%;
}
.blog-card-body {
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
flex: 1;
}
.blog-card-title {
margin: 0 0 0.75rem 0;
}
.blog-card-title a {
color: inherit;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
hyphens: auto;
overflow-wrap: anywhere;
text-wrap: balance;
}
.blog-card-excerpt {
margin: 0;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}
.blog-card-cta {
margin-top: 1rem;
}
.blog-card-cta .btn {
margin: 0;
}
.blog-results.is-loading,
#blog-results.is-loading {
opacity: 0.55;
pointer-events: none;
}
.blog-filter {
display: flex;
flex-direction: column;
gap: 0.75rem;
/* Reset globalnych stylów `form { ... }` z arkusza */
max-width: none;
background: none;
padding: 0;
box-shadow: none;
border-radius: 0;
}
.blog-filter-label {
font-weight: var(--semibold);
}
.blog-filter-control {
width: 100%;
padding: 0.75rem;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: calc(0.6 * var(--radius));
background-color: var(--white);
}
.blog-search {
position: relative;
}
.blog-search-icon {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--darkgray);
pointer-events: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
.blog-search .blog-filter-control {
padding-left: 2.4rem; /* miejsce na ikonę lupy */
}
.blog-sidebar {
position: sticky;
top: calc(var(--contact-h) + var(--header) + 1.5rem);
}
body.header-hidden .blog-sidebar {
top: calc(var(--contact-h) + 1.5rem);
}
.blog-filter-control:focus-visible {
outline: 3px solid var(--lime);
outline-offset: 3px;
}
.blog-pills {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.75rem;
}
.blog-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
font-size: 0.85rem;
font-weight: var(--semibold);
line-height: 1;
padding: 0.625rem 1rem;
border-radius: var(--radius-full);
background-color: var(--white);
border: 2px solid var(--lime);
color: var(--black);
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
min-height: 44px;
min-width: 44px;
}
.blog-pill:hover {
background-color: var(--lime);
color: var(--black);
}
.blog-pill.is-active {
background-color: var(--lime);
color: var(--black);
border-color: var(--lime);
}
.blog-pill:focus-visible {
outline: 3px solid var(--black);
outline-offset: 3px;
}
.blog-filter-reset.btn {
margin: 0;
}
.blog-filter-reset[hidden] {
display: none !important;
}
/* ===============================
BLOG PAGINATION
=============================== */
.blog-pagination {
margin-top: 2rem;
display: flex;
justify-content: center;
}
.blog-pagination-list {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: center;
}
.blog-pagination-item {
display: flex;
}
.blog-pagination-link {
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 0.75rem;
border-radius: calc(0.6 * var(--radius));
background-color: var(--white);
border: 2px solid transparent;
color: var(--dark);
font-weight: var(--semibold);
font-size: 0.95rem;
text-decoration: none;
transition:
background-color 0.15s ease,
border-color 0.15s ease,
color 0.15s ease,
transform 0.1s ease;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.blog-pagination-link:hover {
background-color: var(--lime);
border-color: var(--lime);
color: var(--black);
transform: translateY(-1px);
}
.blog-pagination-link:active {
transform: translateY(0);
}
.blog-pagination-link:focus-visible {
outline: 3px solid var(--lime);
outline-offset: 2px;
}
.blog-pagination-link.is-current {
background-color: var(--lime);
border-color: var(--lime);
color: var(--black);
cursor: default;
pointer-events: none;
}
.blog-pagination-ellipsis span {
display: flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 44px;
color: var(--darkgray);
font-weight: var(--semibold);
}
.blog-pagination-prev .blog-pagination-link,
.blog-pagination-next .blog-pagination-link {
padding: 0 0.5rem;
}
.blog-pagination-prev .blog-pagination-link svg,
.blog-pagination-next .blog-pagination-link svg {
transition: transform 0.15s ease;
}
.blog-pagination-prev .blog-pagination-link:hover svg {
transform: translateX(-2px);
}
.blog-pagination-next .blog-pagination-link:hover svg {
transform: translateX(2px);
}
/* Mobile: kompaktowa paginacja */
@media (max-width: 575px) {
.blog-pagination-link {
min-width: 40px;
height: 40px;
padding: 0 0.5rem;
font-size: 0.9rem;
}
.blog-pagination-ellipsis span {
min-width: 24px;
height: 40px;
}
}
/* ===============================
LEISTUNGEN ÜBERSICHT (page-leistungen.php)
Siatka usług z kartami
=============================== */
.leistungen-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--gap);
margin-bottom: 2rem;
}
/* Tablet: 2 kolumny */
@media (min-width: 576px) {
.leistungen-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Desktop: 3 kolumny */
@media (min-width: 992px) {
.leistungen-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* Duży desktop: 4 kolumny */
@media (min-width: 1200px) {
.leistungen-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* Karta usługi */
.leistungen-card {
background-color: var(--white);
border-radius: var(--radius);
box-shadow: 0 1px 10px var(--shadow);
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
transition:
box-shadow 0.25s ease-in-out,
transform 0.25s ease-in-out;
}
.leistungen-card:hover {
box-shadow: 0 4px 20px var(--shadow);
transform: translateY(-4px);
}
/* Link obejmujący całą kartę */
.leistungen-card-link {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
}
.leistungen-card-link:focus-visible {
outline: 3px solid var(--lime);
outline-offset: 2px;
}
/* Miniaturka */
.leistungen-card-thumb {
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--radius) var(--radius) 0 0;
background-color: var(--light);
}
.leistungen-card-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease-out;
}
.leistungen-card:hover .leistungen-card-image {
transform: scale(1.05);
}
.leistungen-card-image--placeholder {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--light) 0%, var(--gray) 100%);
}
/* Treść karty */
.leistungen-card-body {
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
}
/* Tytuł — max 3 linie */
.leistungen-card-title {
margin: 0;
font-size: 1.1rem;
font-weight: var(--semibold);
line-height: 1.3;
color: var(--dark);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
transition: color 0.2s ease;
}
.leistungen-card:hover .leistungen-card-title {
color: var(--darkgreen);
}
/* Zajawka — max 3 linie */
.leistungen-card-excerpt {
margin: 0;
font-size: 0.9rem;
line-height: 1.5;
color: var(--darkgray);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
flex: 1;
}
/* "Mehr erfahren" link */
.leistungen-card-more {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: auto;
padding-top: 0.75rem;
font-size: 0.85rem;
font-weight: var(--semibold);
color: var(--darkgreen);
transition: color 0.2s ease, gap 0.2s ease;
}
.leistungen-card:hover .leistungen-card-more {
color: var(--green);
gap: 0.6rem;
}
.leistungen-card-arrow {
transition: transform 0.2s ease;
}
.leistungen-card:hover .leistungen-card-arrow {
transform: translateX(3px);
}
/* CTA na końcu sekcji */
.leistungen-cta {
text-align: center;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
.leistungen-card,
.leistungen-card-image,
.leistungen-card-title,
.leistungen-card-more,
.leistungen-card-arrow {
transition: none;
}
.leistungen-card:hover {
transform: none;
}
.leistungen-card:hover .leistungen-card-image {
transform: none;
}
}
/* ===============================
STARTSEITE (page-startseite.php)
=============================== */
/* Wspólny nagłówek sekcji: rytm, czytelność, ograniczenie szerokości
.section-head {
max-width: var(--limit-middle);
margin: 0 auto 1.5rem auto;
}
.section-head h2 {
margin-bottom: 0.75rem;
}
.section-head p {
margin-bottom: 0;
color: var(--darkgray);
max-width: var(--limit-narrow);
}
*/
/* TRUST BAR */
.trust-bar {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
justify-items: center; /* mobile: wycentruj itemy */
}
@media (min-width: 576px) {
.trust-bar {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
justify-items: stretch;
}
}
@media (min-width: 992px) {
.trust-bar {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0; /* od krawędzi do krawędzi */
}
}
.trust-bar-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start; /* ikona zawsze przy górze itemu */
gap: 2rem; /* ikona ↔ tekst */
padding: 0 1rem;
background-color: transparent;
min-height: 0;
text-align: center;
width: 100%;
max-width: none;
}
@media screen and (max-width: 575px) {
.trust-bar-item {
max-width: 26rem; /* mobile: nie rozciągaj za szeroko */
}
}
.trust-bar-icon-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
}
.trust-bar-icon {
width: 4rem;
height:4rem;
flex: 0 0 4rem;
object-fit: contain;
filter: contrast(30%) brightness(200%);
}
.trust-bar-text {
display: block;
font-weight: var(--semibold);
color: var(--darkgreen);
max-width: 22ch;
text-wrap: balance;
}
/* EMBLA — Schwerpunkte slider */
.embla {
position: relative;
}
.embla-section .section-head {
margin-bottom: 1.5rem;
}
.embla-section .limited {
margin-left: auto;
margin-right: auto;
}
.embla__controls {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.embla__button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px; /* hit-area WCAG */
border-radius: 999px;
background-color: var(--white);
color: var(--black);
box-shadow: 0 2px 10px var(--shadow);
border: 1px solid rgba(0, 0, 0, 0.08);
}
.embla__button[disabled] {
opacity: 0.45;
cursor: not-allowed;
}
.embla__viewport {
/* Embla wymaga overflow hidden, ale dodajemy padding, żeby nie ucinać cieni kart */
overflow: hidden;
padding: 0.75rem 0.35rem 1rem 0.35rem;
/* UX: swipe w poziomie + scroll strony w pionie */
touch-action: pan-y pinch-zoom;
position: relative;
}
.embla__viewport:focus-visible {
outline: 3px solid var(--lime);
outline-offset: 4px;
}
.embla__container {
display: flex;
gap: var(--gap);
}
.embla__slide {
flex: 0 0 66%;
min-width: 0;
}
@media (min-width: 576px) {
.embla__slide {
flex-basis: 44%;
}
}
@media (min-width: 992px) {
.embla__slide {
flex-basis: 23%;
}
}
@media (min-width: 1200px) {
.embla__slide {
flex-basis: 22%;
}
}
/* STARTSEITE: Embla pełna szerokość + większy "peek" ostatniej karty + fade na końcu */
@media (min-width: 992px) {
section.light.embla-section .container {
padding-right: 0;
}
section.light.embla-section .limited {
/* zachowaj "bezpieczny" prawy oddech dla tekstu, mimo że container ma padding-right:0 */
padding-right: var(--site-padding);
}
section.light.embla-section .embla__controls {
padding-right: var(--site-padding);
}
section.light.embla-section .embla__viewport {
/* oddaj więcej szerokości kartom (mniej "wewnętrznego" prawa) */
padding-right: 0;
}
section.light.embla-section .embla__slide {
/* było ~20% peek; schodzimy z szerokości slajdu, żeby było wyraźniej */
flex-basis: 21%;
}
section.light.embla-section .embla__viewport::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(140px, 14vw);
pointer-events: none;
/* wygaszanie do koloru tła sekcji (.light) */
background: linear-gradient(to right, transparent 0%, var(--light) 75%);
}
}
/* Karta w sliderze — reużywamy .leistungen-card* i tylko dopinamy pełną szerokość */
.embla__slide > .leistungen-card {
width: 100%;
}
/* KGG */
.kgg-highlight {
background-color: var(--white);
padding: 1.25rem;
}
@media (min-width: 576px) {
.kgg-highlight {
padding: 1.5rem;
}
}
.kgg-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
align-items: start;
}
@media (min-width: 992px) {
.kgg-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: 2rem;
}
}
.kgg-media {
border-radius: var(--radius);
overflow: hidden;
background-color: var(--light);
}
.kgg-image {
display: block;
width: 100%;
height: auto;
}
/* STARTSEITE: KGG (mobile) — featured image edge-to-edge, bez radius/padding */
@media (max-width: 991px) {
.kgg-section .kgg-highlight--split {
padding: 0;
}
.kgg-section .kgg-grid--split {
gap: 0;
}
.kgg-section .kgg-media {
border-radius: 0;
}
.kgg-section .kgg-body {
/* poziom trzyma .container; tu tylko rytm pionowy */
padding: 1.25rem 0 1.5rem;
}
}
/* STARTSEITE: KGG split 50/50 (desktop) */
@media (min-width: 992px) {
.kgg-section .container {
/* chcemy pełny podział na pół ekranu – bez bocznych paddingów kontenera */
padding-left: 0;
padding-right: 0;
}
.kgg-section .kgg-highlight--split {
padding: 0;
overflow: hidden;
}
.kgg-section .kgg-grid--split {
grid-template-columns: 1fr 1fr;
gap: 0;
align-items: stretch;
min-height: clamp(460px, 56vh, 640px);
}
.kgg-section .kgg-media {
border-radius: 0;
position: relative;
min-height: 100%;
}
.kgg-section .kgg-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.kgg-section .kgg-media-placeholder {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--light) 0%, var(--gray) 100%);
}
.kgg-section .kgg-body {
/* prawa krawędź ma odpowiadać paddingowi .container */
padding-right: var(--site-padding);
/* lewy padding wg wyczucia — oddech od zdjęcia */
padding-left: clamp(1.5rem, 3vw, 3.25rem);
/* pionowe paddingi dla równego "bloku" */
padding-top: clamp(2rem, 3vw, 3.25rem);
padding-bottom: clamp(2rem, 3vw, 3.25rem);
display: flex;
flex-direction: column;
justify-content: center;
}
/* Desktop: w flex-column domyślnie elementy się rozciągają — CTA ma być "normalnej" szerokości */
.kgg-section .kgg-body .btn {
align-self: flex-start;
}
.kgg-section .kgg-body .section-head {
margin: 0 0 1.25rem 0;
}
}
.kgg-bullets {
margin-top: 1rem;
}
.kgg-bullets li {
position: relative;
padding-left: 1.75rem;
}
.kgg-bullets li::before {
content: '';
position: absolute;
left: 0;
top: 0.45em;
width: 1rem;
height: 1rem;
background: var(--lime);
border-radius: 999px;
box-shadow: 0 1px 6px rgba(0,0,0,0.15);
}
/* WARUM WIR */
.why-us-list {
display: grid;
grid-template-columns: 1fr;
gap: var(--gap);
}
@media (min-width: 768px) {
.why-us-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.why-us-item {
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: var(--radius);
padding: 1.1rem 1.1rem 1.1rem 3rem;
position: relative;
}
.why-us-item::before {
content: '✓';
position: absolute;
left: 1.1rem;
top: 1.05rem;
width: 1.5rem;
height: 1.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background-color: var(--lime);
color: var(--black);
font-weight: var(--bold);
}
/* ABLAUF */
.ablauf-steps {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
counter-reset: ablauf;
list-style: none;
padding-left: 0;
}
@media (min-width: 576px) {
.ablauf-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 992px) {
.ablauf-steps {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.ablauf-step {
counter-increment: ablauf;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: flex-start;
min-height: 0;
}
.ablauf-step-media {
display: flex;
align-items: center;
gap: 0.75rem;
}
.ablauf-step-media::before {
content: counter(ablauf);
font-family: var(--font-h);
font-weight: var(--bold);
font-size: clamp(2.5rem, 3.2vw, 3.75rem);
line-height: 1;
color: var(--darkgreen);
}
.ablauf-step-image {
width: 96px;
height: 96px;
border-radius: 50%;
overflow: hidden;
background-color: var(--light);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
border: 4px solid var(--white);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 96px;
}
@media (max-width: 575px) {
.ablauf-step {
align-items: center;
}
.ablauf-step-image {
width: 80px;
height: 80px;
flex-basis: 80px;
}
.ablauf-step-body {
text-align: center;
width: 100%;
}
}
.ablauf-icon {
width: 100%;
height: 100%;
object-fit: cover;
}
.ablauf-step-title {
margin: 0;
font-size: 1rem;
line-height: 1.6;
}
.ablauf-step-title h3 {
font-size: 1.1rem;
font-weight: var(--semibold);
line-height: 1.2;
margin: 0 0 0.5rem 0;
text-transform: none;
color: var(--dark);
}
.ablauf-step-title p {
margin: 0;
color: var(--darkgray);
}
.ablauf-step-title > *:last-child {
margin-bottom: 0;
}
/* PRAXIS & TEAM */
.praxis-home-text {
max-width: var(--limit-middle);
}
.praxis-home-gallery {
margin-top: 1.5rem;
}
.praxis-home-gallery img {
border-radius: var(--radius);
}
/* ===============================
POST (single.php)
=============================== */
.post-article {
padding-top: 0.5rem;
}
.post-content-wrap {
max-width: var(--limit-middle);
margin-left: auto;
margin-right: auto;
}
.post-meta {
background: none;
box-shadow: none;
border-radius: 0;
padding: 0;
margin: 1.25rem 0 2rem 0;
display: grid;
grid-template-columns: 1fr;
gap: 0.9rem 1.25rem;
}
@media (min-width: 576px) {
.post-meta {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 992px) {
.post-meta {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.post-meta-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.post-meta-item--wide {
grid-column: 1 / -1;
}
.post-meta-label {
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--darkgray);
}
.post-meta-value {
font-weight: var(--semibold);
color: var(--dark);
}
.post-meta-value a {
color: inherit;
}
.post-meta-tax a {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
line-height: 1;
font-weight: var(--semibold);
padding: 0.35rem 0.65rem;
margin: 0.25rem 0.35rem 0.1rem 0;
border-radius: var(--radius-full);
border: 2px solid var(--lime);
color: var(--black);
background-color: transparent;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.post-meta-tax a:hover {
background-color: var(--lime);
}
/* Meta row z ikonami */
.post-meta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 1rem 1.5rem;
margin: 1.5rem 0 1.25rem 0;
}
.post-meta-icon-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.post-meta-icon {
width: 28px;
height: 28px;
flex-shrink: 0;
filter: brightness(0) saturate(100%) invert(45%) sepia(8%) saturate(300%) hue-rotate(180deg);
opacity: 0.65;
}
.post-meta-icon-value {
font-weight: var(--semibold);
color: var(--dark);
font-size: 0.95rem;
}
/* Kategorie z etykietą */
.post-meta-categories {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
}
/* Separator przed treścią */
.post-meta-separator {
border: none;
height: 1px;
background-color: var(--darkgray);
opacity: 0.25;
margin: 1.5rem 0 2rem 0;
}
/* Mobile: mniejsze czcionki */
@media (max-width: 575px) {
.post-meta-icon {
width: 22px;
height: 22px;
}
.post-meta-icon-value {
font-size: 0.8rem;
}
}
/* Desktop: kategorie w tym samym rzędzie, wyrównane do prawej */
@media (min-width: 576px) {
.post-meta-row {
flex-wrap: nowrap;
gap: 4rem;
}
.post-meta-categories {
margin-left: auto;
}
}
.post-content {
margin-top: 0;
}
/* ===============================
POST NAVIGATION (single.php)
- Przycisk powrotu do bloga
- Nawigacja Previous/Next
=============================== */
/* Przycisk powrotu - góra artykułu */
.post-back-nav {
margin: 0 0 1.5rem 0;
}
.btn-back {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--dark);
font-weight: var(--semibold);
font-size: 0.9rem;
text-decoration: none;
padding: 0.625rem 0.75rem;
transition: color 0.2s ease;
min-height: 44px;
}
.btn-back:hover {
color: var(--darkgreen);
}
.btn-back-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
transition: transform 0.2s ease;
}
.btn-back:hover .btn-back-icon {
transform: translateX(-4px);
}
.btn-back:focus-visible {
outline: 3px solid var(--lime);
outline-offset: 3px;
border-radius: calc(0.5 * var(--radius));
}
/* CTA: Wszystkie wpisy */
.post-all-posts-cta {
margin: 3rem 0 2rem 0;
text-align: center;
}
.post-all-posts-cta .btn {
margin-bottom: 0;
}
/* Nawigacja Previous/Next - dół artykułu */
.post-nav {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
margin: 2rem 0 0 0;
padding-top: 2rem;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
@media (min-width: 576px) {
.post-nav {
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
}
.post-nav-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
border-radius: var(--radius);
background-color: var(--white);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
text-decoration: none;
transition:
background-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.15s ease;
}
.post-nav-item:hover {
background-color: var(--lime-tint);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
transform: translateY(-2px);
}
.post-nav-item:focus-visible {
outline: 3px solid var(--lime);
outline-offset: 3px;
}
.post-nav-empty {
visibility: hidden;
pointer-events: none;
}
@media (max-width: 575px) {
.post-nav-empty {
display: none;
}
}
.post-nav-prev {
flex-direction: row;
}
.post-nav-next {
flex-direction: row-reverse;
text-align: right;
}
.post-nav-arrow {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background-color: var(--lime);
color: var(--black);
transition: background-color 0.2s ease, transform 0.2s ease;
}
.post-nav-arrow svg {
width: 20px;
height: 20px;
}
.post-nav-item:hover .post-nav-arrow {
background-color: var(--green);
}
.post-nav-prev:hover .post-nav-arrow {
transform: translateX(-3px);
}
.post-nav-next:hover .post-nav-arrow {
transform: translateX(3px);
}
.post-nav-content {
display: flex;
flex-direction: column;
gap: 0.35rem;
min-width: 0; /* Flex child truncation */
}
.post-nav-label {
font-size: 0.75rem;
font-weight: var(--semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--darkgray);
}
.post-nav-title {
font-size: 0.95rem;
font-weight: var(--semibold);
color: var(--dark);
line-height: 1.3;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.post-nav-item:hover .post-nav-title {
color: var(--black);
}
/* Lista powiązanych wpisów *** *** *** *** ***/
/* kontener z nagłówkiem */
.related {
background-color: var(--light);
padding: var(--gap) 0;
margin: 0 var(--gap) var(--gap) var(--gap);
border-radius: var(--radius);
}
/* grupa elementów */
.items-group {
display: flex;
flex-wrap: wrap;
gap: var(--gap);
padding: 0 var(--gap);
width: 100%;
}
/* pojedynczy element (obraz + tekst) */
.items-group .item {
display: flex;
flex-direction: column;
justify-content: flex-start;
width: calc((100% - 2 * var(--gap)) / 3);
box-sizing: border-box;
margin-bottom: .5rem;
}
/* ikona w pojedynczym elemencie */
.items-group .icon {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
}
.items-group .icon {
transition: filter 0.3s ease-in-out;
}
/* miniatura w pojedynczym elemencie */
.items-group .thumbnail .image img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
transition: transform 0.3s ease-in-out;
}
.items-group .thumbnail .image:hover img {
transform: translate(-50%, -50%) scale(1.1);
}
.items-group .thumbnail .image,
.items-group .thumbnail .image img {
border-radius: var(--radius);
}
.items-group .item a:last-child {
color: var(--primary);
font-weight: var(--bold);
line-height: 1.2;
padding-top: 1rem;
}
.items-group .item a:last-child:hover {
color: var(--primary-dark)
}
@media screen and (max-width: 767px) {
.related {
padding: 1rem;
margin: 0 0 2.5rem 0;
}
.items-group {
gap: 1rem;
padding: 0;
}
.items-group .item {
width: calc(50% - .5rem);
}
}
@media screen and (max-width: 575px) {
.items-group .thumbnail .image {
aspect-ratio: 1 / 1;
}
}
/* ciemny motyw dla sekcji powiązanych */
.dark.related {
background-color: var(--primary-dark);
color: var(--white);
}
.dark.related .items-group a {
color: var(--white);
}
.dark.related .icon img {
filter: brightness(0) invert(100%);
}
.dark.related .items-group a:hover {
color: var(--halfwhite)
}
/* przełączanie: ikona vs miniatura w sekcji powiązanych */
.related .thumbnail {
display: none;
}
.related.has-thumbnails .thumbnail {
display: block;
width: 100%;
}
.related.has-thumbnails .icon {
display: none;
}
.icon-tile {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
padding: 1rem;
transform: translate(-50%, -50%);
background-color: var(--primary);
border-radius: var(--radius);
}
.icon-tile img {
width: 2rem;
height: 2rem;
margin: 0 auto;
text-align: center;
filter: invert(100%) brightness(200%);
border-radius: none;
}
/* Style tabel *** *** *** *** ***/
.wp-block-table.preisliste-tabele table {
border-collapse: separate;
border-spacing: 0;
border-radius: var(--radius);
overflow: hidden;
}
.wp-block-table.preisliste-tabele {
margin-bottom: 2rem;
/* Prevent page-level horizontal overflow on narrow screens (Samsung S23 etc.).
If the table's intrinsic width is wider than the viewport, the figure becomes
the scroll container instead of expanding the whole page. */
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.wp-block-table.preisliste-tabele thead {
background-color: var(--lime-tint);
color: var(--black);
border: none;
}
.wp-block-table.preisliste-tabele th,
.wp-block-table.preisliste-tabele td {
border: none;
font-weight: var(--regular);
padding: 0.5rem 1rem;
}
.wp-block-table.preisliste-tabele tbody tr:nth-child(odd) {
background-color: var(--white);
}
.wp-block-table.preisliste-tabele tbody tr:nth-child(even) {
background-color: var(--light);
}
/* Mobile: make the 3-column price table fit better, but still allow horizontal scroll if needed. */
@media (max-width: 575px) {
.wp-block-table.preisliste-tabele table {
width: 100%;
table-layout: fixed;
}
.wp-block-table.preisliste-tabele th,
.wp-block-table.preisliste-tabele td {
padding: 0.4rem 0.55rem;
font-size: 0.9rem;
overflow-wrap: anywhere;
hyphens: auto;
}
/* Keep currency columns readable (avoid breaking "30,00 €" across lines). */
.wp-block-table.preisliste-tabele th:nth-child(2),
.wp-block-table.preisliste-tabele td:nth-child(2),
.wp-block-table.preisliste-tabele th:nth-child(3),
.wp-block-table.preisliste-tabele td:nth-child(3) {
white-space: nowrap;
}
}
/* ===============================
6. Style formularzy (Contact Form 7)
Trendy 2026: Clean design, visible labels, lime accent
=============================== */
/* ===============================
TERMINANFRAGE BLOCK
=============================== */
.terminanfrage-block {
max-width: 600px;
}
.terminanfrage-heading {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.terminanfrage-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
color: var(--darkgreen);
}
/* ===============================
CF7 FORM — Reset & Base
=============================== */
.wpcf7 {
max-width: 100%;
}
.wpcf7-form {
max-width: none;
background: none;
padding: 0;
box-shadow: none;
border-radius: 0;
}
/* Submit loader + disabled state */
.uf-cf7-submit-wrap {
position: relative;
display: inline-block;
width: 100%;
}
@media screen and (min-width: 576px) {
.uf-cf7-submit-wrap {
width: auto;
}
}
.uf-cf7-loader {
position: absolute;
top: 50%;
right: 1rem;
width: 16px;
height: 16px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
transform: translateY(-50%);
opacity: 0;
pointer-events: none;
}
.uf-cf7-submit-wrap.is-loading .uf-cf7-loader {
opacity: 1;
animation: uf-cf7-spin 0.8s linear infinite;
}
.wpcf7-form .wpcf7-submit.is-loading {
padding-right: 2.5rem;
}
.wpcf7-form .wpcf7-submit:disabled {
cursor: not-allowed;
opacity: 0.7;
}
@keyframes uf-cf7-spin {
to {
transform: translateY(-50%) rotate(360deg);
}
}
/* Intro tekst */
.wpcf7-form .form-intro {
margin-bottom: 1.5rem;
}
.wpcf7-form .form-intro p {
margin: 0;
color: var(--dark);
line-height: 1.6;
}
/* ===============================
FORM ROW — Pojedynczy wiersz formularza
=============================== */
.wpcf7-form .form-row {
margin-bottom: 1.25rem;
}
.wpcf7-form .form-row:last-child {
margin-bottom: 0;
}
/* ===============================
FORM ROW GROUP — Pola w jednym wierszu (desktop)
=============================== */
.wpcf7-form .form-row-group {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
align-items: flex-start;
margin-bottom: -1.25rem;
}
.wpcf7-form .form-row-group .form-row {
flex: 1 1 280px;
margin-bottom: -1.25rem;
}
.wpcf7-form .form-row-group .form-row:last-child {
margin-bottom: 1.25rem;
}
/* Label */
.wpcf7-form .form-row > label {
display: block;
position: relative;
font-size: 0.9rem;
font-weight: var(--semibold);
color: var(--dark);
margin-bottom: 0.5rem;
}
/* Gwiazdka przy wymaganych polach */
.form-required {
color: var(--darkgreen);
font-weight: var(--bold);
}
/* Etykietka "Pflichtfeld" dla pól wymaganych */
.form-required::after {
content: "Pflichtfeld";
position: absolute;
right: 0;
top: 0;
padding: 0.15rem 0.4rem;
background-color: var(--lime);
color: #000;
font-size: 0.6rem;
font-weight: var(--medium);
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.03em;
display: none;
}
/* ===============================
FORM CONTROLS — Pola formularza
=============================== */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea,
.wpcf7-form select {
width: 100%;
padding: 0.75rem 1rem;
font-size: 1rem;
font-family: inherit;
line-height: 1.5;
color: var(--dark);
background-color: var(--white);
border: 2px solid var(--gray);
border-radius: var(--radius);
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
background-color 0.2s ease;
-webkit-appearance: none;
appearance: none;
}
/* Placeholder */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
color: var(--darkgray);
opacity: 0.7;
}
/* Hover */
.wpcf7-form input[type="text"]:hover,
.wpcf7-form input[type="email"]:hover,
.wpcf7-form input[type="tel"]:hover,
.wpcf7-form input[type="url"]:hover,
.wpcf7-form input[type="number"]:hover,
.wpcf7-form textarea:hover,
.wpcf7-form select:hover {
border-color: var(--darkgray);
}
/* Focus */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form input[type="number"]:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
border-color: var(--lime);
box-shadow: 0 0 0 3px rgba(202, 235, 23, 0.3);
outline: none;
}
/* Focus visible (WCAG) */
.wpcf7-form input:focus-visible,
.wpcf7-form textarea:focus-visible,
.wpcf7-form select:focus-visible {
outline: 3px solid var(--lime);
outline-offset: 2px;
}
/* Textarea */
.wpcf7-form textarea {
min-height: 120px;
max-height: 300px;
resize: vertical;
}
/* Select — Custom Arrow */
.wpcf7-form select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23444' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 12px;
padding-right: 2.5rem;
cursor: pointer;
}
/* ===============================
VALIDATION — Błędy walidacji
=============================== */
.wpcf7-form .form-row {
position: relative;
}
.wpcf7-form .wpcf7-not-valid {
border-color: #dc3545 !important;
background-color: rgba(220, 53, 69, 0.03);
}
.wpcf7-form .wpcf7-not-valid:focus {
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}
.wpcf7-form .wpcf7-not-valid-tip {
display: block;
margin-top: 0.35rem;
font-size: 0.8rem;
color: #dc3545;
background: none;
padding: 0;
position: static;
}
/* ===============================
ACCEPTANCE — Zgoda RODO
=============================== */
.wpcf7-form .form-row--acceptance {
margin-top: 1.5rem;
padding: 1rem;
background-color: var(--light);
border-radius: var(--radius);
border-left: 4px solid var(--lime);
}
.wpcf7-form .wpcf7-acceptance {
display: block;
}
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
margin: 0;
display: block;
}
/* Label z tekstem zgody — NIE używamy flex, żeby tekst się nie rozpadał */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label {
display: block;
position: relative;
padding-left: 2.25rem; /* Miejsce na checkbox */
font-size: 0.85rem;
line-height: 1.6;
color: var(--dark);
cursor: pointer;
}
/* Ukryj natywny checkbox */
.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* Custom checkbox — pozycjonowany absolutnie */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label::before {
content: '';
position: absolute;
left: 0;
top: 0.15rem;
width: 22px;
height: 22px;
border: 2px solid var(--darkgray);
border-radius: calc(0.5 * var(--radius));
background-color: var(--white);
transition:
background-color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
}
/* Checkbox hover */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label:hover::before {
border-color: var(--darkgreen);
}
/* Checkbox checked */
.wpcf7-form .wpcf7-acceptance input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
background-color: var(--lime);
border-color: var(--lime);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 14px;
}
/* Checkbox focus */
.wpcf7-form .wpcf7-acceptance input[type="checkbox"]:focus-visible + .wpcf7-list-item-label::before {
outline: 3px solid var(--lime);
outline-offset: 2px;
}
/* Links w tekście zgody */
.wpcf7-form .wpcf7-acceptance a {
color: var(--darkgreen);
font-weight: var(--semibold);
text-decoration: underline;
text-underline-offset: 2px;
}
.wpcf7-form .wpcf7-acceptance a:hover {
color: var(--black);
}
/* ===============================
SUBMIT — Przycisk wysyłania
=============================== */
.wpcf7-form .form-row--submit {
margin-top: 1.5rem;
}
.wpcf7-form input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 0.875rem 1.5rem;
font-size: 1rem;
font-weight: var(--semibold);
color: var(--black);
background-color: var(--lime);
border: 3px solid var(--lime);
border-radius: var(--radius-full);
cursor: pointer;
line-height: 1.2;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
transform 0.15s ease,
box-shadow 0.2s ease;
min-height: 44px;
}
.wpcf7-form input[type="submit"]:hover {
background-color: var(--green);
border-color: var(--green);
}
.wpcf7-form input[type="submit"]:active {
transform: translateY(2px);
}
.wpcf7-form input[type="submit"]:focus-visible {
outline: 3px solid var(--darkgreen);
outline-offset: 3px;
}
/* Submit disabled */
.wpcf7-form input[type="submit"]:disabled {
background-color: var(--gray);
border-color: var(--gray);
color: var(--darkgray);
cursor: not-allowed;
opacity: 0.7;
}
.wpcf7-form input[type="submit"]:disabled:hover {
background-color: var(--gray);
border-color: var(--gray);
transform: none;
}
/* Tablet/Desktop: przycisk nie na całą szerokość */
@media (min-width: 576px) {
.wpcf7-form input[type="submit"] {
width: auto;
min-width: 200px;
}
}
/* ===============================
RESPONSE OUTPUT — Komunikaty zwrotne
=============================== */
.wpcf7-form .wpcf7-response-output {
margin: 1.5rem 0 0 0;
padding: 1rem 1.25rem;
border-radius: var(--radius);
font-size: 0.95rem;
line-height: 1.5;
border: none;
border-left: 4px solid var(--gray);
background-color: var(--light);
}
/* Sukces */
.wpcf7-form.sent .wpcf7-response-output {
border-left-color: var(--green);
background-color: rgba(166, 192, 17, 0.1);
color: var(--darkgreen);
}
/* Błąd walidacji */
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output {
border-left-color: #ffc107;
background-color: rgba(255, 193, 7, 0.1);
color: #856404;
}
/* Błąd wysyłki */
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output {
border-left-color: #dc3545;
background-color: rgba(220, 53, 69, 0.1);
color: #721c24;
}
/* Spam */
.wpcf7-form.spam .wpcf7-response-output {
border-left-color: #fd7e14;
background-color: rgba(253, 126, 20, 0.1);
color: #8a4100;
}
/* Spinner — ukryj domyślny */
.wpcf7-spinner {
display: none !important;
}
/* ===============================
HONEYPOT — Ukryte pole (antyspam)
=============================== */
.wpcf7-form .wpcf7-form-control-wrap[data-name*="honeypot"],
.wpcf7-form input[name*="honeypot"] {
position: absolute !important;
left: -9999px !important;
opacity: 0 !important;
height: 0 !important;
width: 0 !important;
overflow: hidden !important;
}
/* ===============================
7. Style FAQ
=============================== */
.faq-block {
margin-top: 0;
margin-bottom: 2.5rem;
}
/* ELEMENT FAQ */
.faq-item {
border-top: 1px solid var(--green);
padding: 0;
}
.faq-item:last-child {
border-bottom: 1px solid var(--green);
}
.faq-question {
width: 100%;
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
background: none;
border: none;
font-size: 1rem;
font-family: var(--regular);
cursor: pointer;
transition: color 0.1s ease;
min-height: 44px;
}
.faq-question:focus-visible {
/* Globalny reset usuwa outline, więc jawnie przywracamy wskaźnik fokusu (WCAG 2.4.7). */
outline: 3px solid var(--lime);
outline-offset: 3px;
border-radius: 0.5rem;
background-color: rgba(202, 235, 23, 0.15);
}
.faq-question:hover {
color: var(--darkgreen);
}
.faq-toggle-sign {
font-size: 1.5rem;
font-weight: var(--bold);
transition: transform 0.25s ease;
color: var(--green)
}
/* Obrót plusa przy otwarciu */
.faq-question[aria-expanded="true"] .faq-toggle-sign {
transform: rotate(45deg);
color: var(--black)
}
/* SEKCJA ODPOWIEDZI */
.faq-answer {
/* Ważne: animacja FAQ jest sterowana przez JS (`assets/events.js`).
JS ustawia inline:
- height (0px <-> scrollHeight)
- padding-top / padding-bottom (żeby domykanie nie kończyło się "pstryknięciem")
- opacity + transform (subtelne wygładzenie ruchu)
A CSS poniżej zapewnia transition na tych właściwościach. */
padding: 0 0 1.5rem 0.5rem;
font-size: 1rem;
font-family: var(--regular);
line-height: 1.4;
overflow: hidden;
will-change: height, padding-top, padding-bottom, opacity, transform;
height: 0;
opacity: 0;
padding-bottom: 0; /* stan zwinięty; docelowa wartość dla stanu otwartego w --_faq-pb */
--_faq-pb: 1.5rem;
}
/* Animacja slide-down */
.faq-answer.is-animating {
/* Easing ustawiony tak, żeby ruch był "miękki" (bez szarpnięć na końcu). */
transition:
height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
padding-top 0.28s cubic-bezier(0.22, 1, 0.36, 1),
padding-bottom 0.28s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.22s ease-out,
transform 0.22s ease-out;
}
@media (prefers-reduced-motion: reduce) {
/* Dostępność: wyłączamy animacje jeśli użytkownik ogranicza ruch w systemie. */
.faq-answer.is-animating {
transition: none;
}
}
/* ===============================
Menu boczne "Alle Leistungen" (offer-menu) — focus dla klawiatury
=============================== */
/* WordPress zwykle generuje wrapper .menu-*-container, ale stylujemy też bezpośrednio klasę listy. */
.offer-menu-list a:focus-visible,
.menu-leistungen-container a:focus-visible {
outline: 3px solid var(--lime);
outline-offset: 3px;
border-radius: 0.5rem;
background-color: rgba(202, 235, 23, 0.15);
}
.faq-question p,
.faq-answer p {
margin: 0;
}
/* ===============================
X. Style narzędziowe
=============================== */
.center {
text-align: center;
}
.center-max {
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
}
/* element do grupowania treści */
.block {
margin-bottom: 1.5rem;
}
.light {
background-color: var(--light);
}
/* STARTSEITE: Białe tło SVG (signet) w sekcji #wilkommen */
#wilkommen {
background-image: url('../images/signet.svg');
background-repeat: no-repeat;
background-position: left -16em center;
background-size: auto 90%;
}
/* Ukryj background-image na urządzeniach mobilnych (max-width: 767px) */
@media (max-width: 767px) {
#wilkommen {
background-image: none;
}
}
.white {
background-color: var(--white);
}
.black {
background-color: var(--black);
}
.lime {
background-color: var(--lime);
}
.green {
background-color: var(--green);
}
.darkgreen {
background-color: var(--darkgreen);
}
.brown {
background-color: var(--brown);
}
.capuccino {
background-color: var(--lime-tint);
}
/* Klasa identyfikująca ciemny motyw !!!!
Zawsze łącz z klasą koloru, aby uzyskać biały kolor treści
na ciemnym tle */
.dark {
color: var(--white);
}
.rad {
border-radius: var(--radius);
}
/* Ograniczenie maksymalnej szerokości treści
głównie dla układu jednokolumnowego na desktopie !!!
np. akapity */
.container.limited,
.limited {
max-width: var(--limit-wide);
margin-left: auto;
margin-right: auto;
}
.limited.rightonly {
max-width: var(--limit-middle);
margin-left: 0;
margin-right: auto;
}
.narrow {
max-width: var(--limit-narrow);
margin-left: auto;
margin-right: auto;
}
.limited-slim {
max-width: var(--limit-slim);
}
article.limited {
max-width: var(--limit-middle);
margin-left: 0;
margin-right: auto;
}
/* Proporcje dla elementów siatki */
.format-auto {
aspect-ratio: auto;
height: 100%;
}
.format-quad {
aspect-ratio: 1 / 1;
}
.format-vertical {
aspect-ratio: 9 / 16;
}
.format-horizontal {
aspect-ratio: 16 / 9;
}
.format-panoramic {
aspect-ratio: 2 / 1;
}
.format-panoramic-wide {
aspect-ratio: 26 / 10;
}
.rnd {
border-radius: 2000rem;
max-width: 600px;
margin-top: -4rem;
}
/* GUTENBERG: WordPress blocks */
[class^="wp-block-"],
[class*=" wp-block-"] {
margin-bottom: 1.5rem;
}
.wp-block-image img {
border-radius: var(--radius);
}
/* Padding dla elementów wp-block bezpośrednio po */
p + [class^="wp-block"] {
margin-top: 3rem;
margin-bottom: 3rem;
}
/* ===============================
PRAXIS PAGE — Strona z galeriami
=============================== */
.praxis-content {
padding-top: 2rem;
padding-bottom: 3rem;
}
.praxis-article {
max-width: var(--limit-wide);
margin-left: auto;
margin-right: auto;
}
/* Tekst wprowadzający przed galerią */
.praxis-article > p,
.praxis-article > h2,
.praxis-article > h3,
.praxis-article > .wp-block-heading {
max-width: var(--limit-wide);
}
/* Nagłówki sekcji (np. "Unser Team") */
.praxis-article > h2,
.praxis-article > .wp-block-heading {
margin-top: 3rem;
margin-bottom: 1.5rem;
padding-top: 2rem;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.praxis-article > h2:first-child,
.praxis-article > .wp-block-heading:first-child {
margin-top: 0;
padding-top: 0;
border-top: none;
}
/* ===============================
WORDPRESS GALLERY BLOCK
Responsywna siatka zdjęć
=============================== */
.wp-block-gallery {
display: grid;
gap: clamp(0.75rem, 1.6vw, 1.5rem);
margin-bottom: 2rem;
/* Mobile: 1 kolumna */
grid-template-columns: 1fr;
}
/* Tablet: 2 kolumny */
@media (min-width: 576px) {
.wp-block-gallery {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop: 3 kolumny */
@media (min-width: 992px) {
.wp-block-gallery {
grid-template-columns: repeat(3, 1fr);
}
}
/* Pojedyncze zdjęcie w galerii */
.wp-block-gallery .wp-block-image {
margin: 0;
overflow: hidden;
border-radius: var(--radius);
background-color: var(--light);
}
.wp-block-gallery .wp-block-image figure {
margin: 0;
height: 100%;
}
.wp-block-gallery .wp-block-image img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 16 / 9;
display: block;
transition: transform 0.3s ease-out;
border-radius: var(--radius);
}
/* Hover effect */
.wp-block-gallery .wp-block-image a {
display: block;
overflow: hidden;
border-radius: var(--radius);
}
.wp-block-gallery .wp-block-image a:hover img {
transform: scale(1.05);
}
.wp-block-gallery .wp-block-image a:focus-visible {
outline: 3px solid var(--lime);
outline-offset: 3px;
}
/* Lightbox cursor */
.wp-block-gallery .wp-block-image a {
cursor: zoom-in;
}
/* Cień na hover */
.wp-block-gallery .wp-block-image {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.wp-block-gallery .wp-block-image:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
/* Usuń domyślne style WordPress gallery */
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
margin: 0;
width: 100%;
}
/* Captions (jeśli dodane) */
.wp-block-gallery .wp-block-image figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0.75rem 1rem;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
color: var(--white);
font-size: 0.85rem;
line-height: 1.3;
margin: 0;
border-radius: 0 0 var(--radius) var(--radius);
}
/* Position relative dla figure z caption */
.wp-block-gallery .wp-block-image figure {
position: relative;
}
/* ===============================
GALERIA — Warianty kolumn
Gutenberg pozwala wybrać liczbę kolumn
=============================== */
/* 2 kolumny (wybrane przez klienta w Gutenberg) */
.wp-block-gallery.columns-2 {
grid-template-columns: 1fr;
}
@media (min-width: 576px) {
.wp-block-gallery.columns-2 {
grid-template-columns: repeat(2, 1fr);
}
}
/* 3 kolumny */
.wp-block-gallery.columns-3 {
grid-template-columns: 1fr;
}
@media (min-width: 576px) {
.wp-block-gallery.columns-3 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.wp-block-gallery.columns-3 {
grid-template-columns: repeat(3, 1fr);
}
}
/* 4 kolumny */
.wp-block-gallery.columns-4 {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
.wp-block-gallery.columns-4 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 992px) {
.wp-block-gallery.columns-4 {
grid-template-columns: repeat(4, 1fr);
}
}
/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
.wp-block-gallery .wp-block-image img,
.wp-block-gallery .wp-block-image {
transition: none;
}
}
/* ===============================
KONTAKT PAGE — Google Maps Loader
=============================== */
#google-maps-container {
position: relative;
width: 100%;
min-height: 400px;
background-color: var(--white);
border-radius: var(--radius);
overflow: hidden;
}
#google-maps-container iframe {
display: block;
width: 100%;
height: 400px;
border-radius: var(--radius);
}
.gmaps-loader {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--white);
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.gmaps-loader--hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.gmaps-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--light);
border-top-color: var(--green);
border-radius: 50%;
animation: gmaps-spin 0.8s linear infinite;
}
@keyframes gmaps-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.gmaps-loader {
transition: none;
}
.gmaps-spinner {
animation: none;
border-top-color: var(--darkgreen);
}
}
/* ===============================
COOKIEBOT — Google Maps Placeholder
Widoczny gdy user nie wyraził zgody na marketing cookies.
Klasa .cookieconsent-optout-marketing jest automatycznie
dodawana/usuwana przez Cookiebot.
=============================== */
.gmaps-container {
position: relative;
width: 100%;
min-height: 400px;
background-color: var(--light);
border-radius: var(--radius);
overflow: hidden;
}
/* Placeholder gdy cookies są zablokowane */
.gmaps-placeholder {
position: absolute;
inset: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--light) 0%, #e0dfd8 100%);
border: 2px dashed var(--gray);
border-radius: var(--radius);
}
.gmaps-placeholder-content {
text-align: center;
padding: 2rem;
max-width: 360px;
}
.gmaps-placeholder-icon {
color: var(--darkgray);
margin-bottom: 1rem;
opacity: 0.6;
}
.gmaps-placeholder-title {
font-size: 1.1rem;
font-weight: var(--semibold);
color: var(--dark);
margin: 0 0 0.5rem 0;
}
.gmaps-placeholder-text {
font-size: 0.9rem;
color: var(--darkgray);
margin: 0 0 1.25rem 0;
line-height: 1.5;
}
.gmaps-placeholder-btn {
margin-bottom: 1rem;
}
.gmaps-placeholder-link {
display: block;
font-size: 0.85rem;
color: var(--darkgreen);
text-decoration: underline;
transition: color 0.2s ease;
}
.gmaps-placeholder-link:hover {
color: var(--green);
}
/* Gdy user wyrazi zgodę, Cookiebot dodaje klasę .cookieconsent-optin-marketing
do body, wtedy ukrywamy placeholder */
.cookieconsent-optin-marketing .gmaps-placeholder {
display: none;
}
/* Iframe domyślnie ukryty, widoczny tylko po zgodzie */
.gmaps-iframe {
display: none;
width: 100%;
height: 400px;
border-radius: var(--radius);
}
.cookieconsent-optin-marketing .gmaps-iframe {
display: block;
}
/* Loader tylko gdy iframe jest widoczny */
.gmaps-container .gmaps-loader {
z-index: 3;
}
.cookieconsent-optout-marketing ~ .gmaps-loader {
display: none;
}
/* ===============================
KONTAKT PAGE — Godziny otwarcia
=============================== */
.opening-hours-list {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.opening-hours-row {
display: flex;
gap: 0.75rem;
line-height: 1.4;
}
.opening-hours-row dt {
min-width: 2.5rem;
flex-shrink: 0;
font-weight: var(--semibold);
color: var(--olive);
}
.opening-hours-row dd {
margin: 0;
white-space: nowrap;
}
.opening-hours-fallback {
display: block;
font-style: italic;
color: var(--gray-600);
}
/* Kontakt address block */
.kontakt-address {
font-style: normal;
margin-bottom: 1.5rem;
}
.kontakt-item {
margin-bottom: 0.35rem;
display: flex;
gap: 0.5rem;
align-items: flex-start;
}
.kontakt-item strong {
min-width: 7rem;
flex-shrink: 0;
}
.kontakt-item--name {
margin-bottom: 0.75rem;
display: block;
}
.kontakt-item--name p {
margin: 0;
}
.kontakt-heading--hours {
margin-top: 1.5rem;
margin-bottom: 0.75rem;
font-size: 1.25rem;
}
.kontakt-hours {
margin-bottom: 1rem;
}
.kontakt-hours-comment {
font-size: 0.9rem;
color: var(--olive);
margin-top: 0.75rem;
}
/* Na ekranach >= 768px (gdzie FAB Bar jest ukryty) wyłącz wygląd i działanie linku telefonu */
@media (min-width: 768px) {
.kontakt-item a[href^="tel:"] {
padding-bottom: 0;
background-image: none;
background-size: 0;
font-weight: normal;
pointer-events: none;
cursor: default;
text-decoration: none;
color: inherit;
}
.kontakt-item a[href^="tel:"]:hover {
background-size: 0;
}
}
.sub-menu-off {
display: none;
}
/* (Menu) Dawny blok „CLEANUP 2025" został przeniesiony wyżej do sekcji „NAGŁÓWEK + NAWIGACJA",
żeby wszystkie reguły menu (mobile + desktop + mega-menu) były w jednym miejscu. */
.wp-block-image img,
.wp-block-gallery img,
.mega-card-thumb img {
transform: translateZ(0); /* stabilizuje render */
}
.wp-block-gallery .wp-block-image,
.mega-card-thumb {
background: transparent; /* albo np. var(--white) jeśli tło strony jest białe */
}
.mega-card-thumb { aspect-ratio: 16/9; }
/* =====================================================
SCROLL REVEAL ANIMATIONS
Animacje wejścia sekcji przy przewijaniu strony
Kontrolowane przez scroll-reveal.js + data-reveal
===================================================== */
/* ----- FADE-UP (domyślna, najbardziej uniwersalna) ----- */
[data-reveal="fade-up"] {
opacity: 0;
transform: translateY(18px);
transition:
opacity 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: opacity, transform;
}
[data-reveal="fade-up"].is-visible {
opacity: 1;
transform: translateY(0);
}
/* ----- FADE (tylko opacity, bez przesunięcia) ----- */
[data-reveal="fade"] {
opacity: 0;
transition: opacity 0.6s ease-out;
will-change: opacity;
}
[data-reveal="fade"].is-visible {
opacity: 1;
}
/* ----- SLIDE-LEFT (wjazd z lewej strony) ----- */
[data-reveal="slide-left"] {
opacity: 0;
transform: translateX(-20px);
transition:
opacity 0.5s ease-out,
transform 0.5s ease-out;
will-change: opacity, transform;
}
[data-reveal="slide-left"].is-visible {
opacity: 1;
transform: translateX(0);
}
/* ----- SLIDE-RIGHT (wjazd z prawej strony) ----- */
[data-reveal="slide-right"] {
opacity: 0;
transform: translateX(20px);
transition:
opacity 0.5s ease-out,
transform 0.5s ease-out;
will-change: opacity, transform;
}
[data-reveal="slide-right"].is-visible {
opacity: 1;
transform: translateX(0);
}
/* ----- SCALE (delikatne powiększenie) ----- */
[data-reveal="scale"] {
opacity: 0;
transform: scale(0.94);
transition:
opacity 0.5s ease-out,
transform 0.5s ease-out;
will-change: opacity, transform;
}
[data-reveal="scale"].is-visible {
opacity: 1;
transform: scale(1);
}
/* ----- STAGGER (dzieci animowane sekwencyjnie) ----- */
[data-reveal="stagger"] > * {
opacity: 0;
transform: translateY(14px);
transition:
opacity 0.45s ease-out,
transform 0.45s ease-out;
}
[data-reveal="stagger"].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal="stagger"].is-visible > *:nth-child(2) { transition-delay: 70ms; }
[data-reveal="stagger"].is-visible > *:nth-child(3) { transition-delay: 140ms; }
[data-reveal="stagger"].is-visible > *:nth-child(4) { transition-delay: 210ms; }
[data-reveal="stagger"].is-visible > *:nth-child(5) { transition-delay: 280ms; }
[data-reveal="stagger"].is-visible > *:nth-child(6) { transition-delay: 350ms; }
[data-reveal="stagger"].is-visible > *:nth-child(7) { transition-delay: 420ms; }
[data-reveal="stagger"].is-visible > *:nth-child(8) { transition-delay: 490ms; }
[data-reveal="stagger"].is-visible > *:nth-child(n+9) { transition-delay: 560ms; }
[data-reveal="stagger"].is-visible > * {
opacity: 1;
transform: translateY(0);
}
/* ----- STAGGER-GRID (dla siatek kart — szybsze odstępy) ----- */
[data-reveal="stagger-grid"] > * {
opacity: 0;
transform: translateY(10px);
transition:
opacity 0.4s ease-out,
transform 0.4s ease-out;
}
[data-reveal="stagger-grid"].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal="stagger-grid"].is-visible > *:nth-child(2) { transition-delay: 50ms; }
[data-reveal="stagger-grid"].is-visible > *:nth-child(3) { transition-delay: 100ms; }
[data-reveal="stagger-grid"].is-visible > *:nth-child(4) { transition-delay: 150ms; }
[data-reveal="stagger-grid"].is-visible > *:nth-child(5) { transition-delay: 200ms; }
[data-reveal="stagger-grid"].is-visible > *:nth-child(6) { transition-delay: 250ms; }
[data-reveal="stagger-grid"].is-visible > *:nth-child(n+7) { transition-delay: 300ms; }
[data-reveal="stagger-grid"].is-visible > * {
opacity: 1;
transform: translateY(0);
}
/* ----- OPCJONALNE OPÓŹNIENIA (data-reveal-delay) ----- */
[data-reveal-delay="100"] { transition-delay: 100ms !important; }
[data-reveal-delay="150"] { transition-delay: 150ms !important; }
[data-reveal-delay="200"] { transition-delay: 200ms !important; }
[data-reveal-delay="250"] { transition-delay: 250ms !important; }
[data-reveal-delay="300"] { transition-delay: 300ms !important; }
[data-reveal-delay="400"] { transition-delay: 400ms !important; }
[data-reveal-delay="500"] { transition-delay: 500ms !important; }
/* ----- MOBILE: Łagodniejsze animacje ----- */
@media (max-width: 767px) {
[data-reveal="fade-up"] {
transform: translateY(10px);
}
[data-reveal="slide-left"],
[data-reveal="slide-right"] {
transform: translateX(12px);
}
[data-reveal="slide-left"] {
transform: translateX(-12px);
}
[data-reveal="stagger"] > *,
[data-reveal="stagger-grid"] > * {
transform: translateY(8px);
}
}
/* ----- DOSTĘPNOŚĆ: prefers-reduced-motion ----- */
@media (prefers-reduced-motion: reduce) {
[data-reveal],
[data-reveal] > * {
opacity: 1 !important;
transform: none !important;
transition: none !important;
will-change: auto !important;
}
/* Klasa dodawana przez JS gdy reduced-motion */
.reveal-reduced-motion {
opacity: 1 !important;
transform: none !important;
}
}
/* ----- FALLBACK: Gdy JS się nie załaduje, pokaż treść ----- */
.no-js [data-reveal],
.no-js [data-reveal] > * {
opacity: 1 !important;
transform: none !important;
}
/* =====================================================
HERO SCALE-ON-EXIT EFFECT
Subtelne "oddalenie" hero przy scrollowaniu w dół
===================================================== */
/* Kontener musi ukrywać overflow (powiększony obraz) */
.hero {
overflow: hidden;
}
/* Obraz hero — płynna transformacja dla scale-on-exit */
.hero-media {
/* transform-origin pozostaje default (center) bo translate już centruje */
transition: transform 0.15s ease-out;
will-change: transform;
}
/* Mobile: wyłącz efekt scale, zachowaj tylko centrowanie */
@media (max-width: 767px) {
.hero-media {
/* Zachowaj translate dla centrowania, wyłącz transition */
transition: none !important;
will-change: auto !important;
}
}
/* Reduced-motion: wyłącz płynną animację */
@media (prefers-reduced-motion: reduce) {
.hero-media {
transition: none !important;
will-change: auto !important;
}
}