/* === Typografie (Lokal gehostet gemäss DSG) === */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-semibold.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter-bold.woff2') format('woff2');
}

/* === CSS Custom Properties === */
:root {
    --color-teal: #00A79D;
    --color-teal-dark: #0D9488;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --header-height: 0px;
}

/* === Basis Reset === */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f0f2f0;
    color: #374151;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

/* Platzhalter für den fixierten Header auf Unterseiten (Header ist sichtbar) */
body:not(.home):not(.front-page) .site-main,
body:not(.home):not(.front-page) .page-main,
body:not(.home):not(.front-page) .shop-main--archive,
body:not(.home):not(.front-page) .error-page {
    padding-top: 70px;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    transition: color 0.3s ease;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* === Container === */
.container-custom {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* ==========================================================================
   BEM Header – Hide/Reveal via translateY
   ========================================================================== */

/* Default: Header ist nach oben geschoben (unsichtbar) */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transform: translateY(-100%);
    transition: transform 0.5s ease-in-out;
}

/* Sichtbar: JS (Startseite scroll) oder PHP (Unterseiten) fügt diese Klasse hinzu */
.site-header--scrolled {
    transform: translateY(0);
}

.site-header__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.site-header__nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.site-header__logo-img {
    height: 2.8rem;
    width: auto;
    display: block;
    transition: all 0.3s ease-in-out;
}

/* === Fix für das gigantische Header-Logo === */
.site-header__logo img {
    max-height: 3rem !important;
    width: auto !important;
    object-fit: contain !important;
    display: block;
}

.site-header--scrolled .site-header__logo-img {
    transform: scale(1.1);
}

.site-header__desktop-menu {
    display: none;
    align-items: center;
}

.site-header__hamburger {
    display: block;
}

@media (min-width: 768px) {
    .site-header__desktop-menu {
        display: flex;
    }
    .site-header__hamburger {
        display: none;
    }
}

/* Navigationsliste (wp_nav_menu) */
.header-nav {
    list-style: none;
    margin: 0 1.5rem 0 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.header-nav li {
    list-style: none;
    position: relative;
}

.header-nav li + li::before {
    content: '|';
    color: #d1d5db;
    font-weight: 300;
    margin: 0 1rem;
}

/* Navigationslinks */
.site-header__nav-link,
.header-nav-link {
    color: #1f2937;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-header__nav-link:hover,
.header-nav-link:hover {
    color: var(--color-teal);
}

.site-header__nav-sep {
    color: #d1d5db;
    font-size: 0.85rem;
    font-weight: 300;
    margin: 0 1rem;
}

/* CTA Button */
.site-header__cta {
    background-color: var(--color-teal);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    text-decoration: none;
    white-space: nowrap;
    margin-left: 1.5rem;
    transition: all 0.3s ease;
}

.site-header__cta:hover {
    background-color: var(--color-teal-dark);
    color: #ffffff;
}

/* Hamburger Button */
.site-header__hamburger-button {
    color: #1f2937;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-header__hamburger-button:focus {
    outline: none;
}

.site-header__hamburger-icon {
    width: 1.5rem;
    height: 1.5rem;
}

/* Mobiles Menü – standardmässig versteckt */
.site-header__mobile-menu {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    display: flex;
    flex-direction: column;
    background-color: transparent;
    border-top: 1px solid transparent;
    padding: 0;
}

.site-header__mobile-menu.hidden {
    max-height: 0;
    padding: 0;
    border-top-color: transparent;
}

.site-header__mobile-menu:not(.hidden) {
    max-height: 500px;
    padding: 1.25rem 0;
    border-top: 1px solid #f3f4f6;
}

@media (min-width: 768px) {
    .site-header__mobile-menu {
        display: none !important;
    }
}

.site-header__mobile-menu a:not(.site-header__mobile-cta),
.site-header__mobile-link {
    display: block;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.site-header__mobile-menu a:not(.site-header__mobile-cta):hover,
.site-header__mobile-link:hover {
    background-color: #f3f4f6;
    color: var(--color-teal);
}

/* Mobile-Menu-List-Items ohne Styling */
.site-header__mobile-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-header__mobile-menu li + li {
    margin-top: 0.25rem;
}

.site-header__mobile-cta-wrapper {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}

.site-header__mobile-cta {
    display: block;
    background-color: var(--color-teal);
    color: #ffffff !important;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.site-header__mobile-cta:hover {
    background-color: var(--color-teal-dark);
}

/* Admin-Bar Verschiebung */
.admin-bar .site-header--scrolled {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header--scrolled {
        top: 46px;
    }
}

@media screen and (max-width: 600px) {
    .admin-bar .site-header--scrolled {
        top: 0;
    }
}

/* === Hero Pill Navigation (Startseite) – BEM === */
.hero__menu-wrapper {
    background-color: var(--color-teal);
    border-radius: 9999px;
    padding: 0.75rem 1.5rem;
    display: inline-block;
}

.hero__menu-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hero__menu-list li {
    list-style: none;
}

/* Kombinierter Selektor für absolute Kontrolle des Pillen-Menüs */
.hero__menu-item,
.hero__menu-list a,
.hero__menu-wrapper .nav-link {
    color: #ffffff !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: opacity 0.3s ease;
    border-bottom: none !important;
}

.hero__menu-item:hover,
.hero__menu-list a:hover,
.hero__menu-wrapper .nav-link:hover,
.hero__menu-item--active {
    opacity: 0.8;
}

@media (min-width: 768px) {
    .hero__menu-wrapper {
        padding: 0.75rem 2.5rem;
    }
    .hero__menu-list {
        gap: 2rem;
    }
}

/* === Service Boxes & Service Cards === */
.service-box,
.service-card {
    background-color: #ffffff;
    padding: 1.5rem 1.5rem 2rem;
    border-radius: 0.5rem;
    text-align: center;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.service-box:hover,
.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* SVG Grössen-Korrektur (Der Fix für die riesigen Angebots-Icons) */
.service-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.5rem auto;
    background-color: rgba(0, 167, 157, 0.1);
    border-radius: 50%;
}

.service-card__icon svg,
.service-card__icon img {
    width: 2rem !important;
    height: 2rem !important;
    max-width: 100%;
    object-fit: contain;
    color: var(--color-teal);
}

.service-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.75rem; /* Forces perfectly aligned vertical start of the content */
}

.service-card__text {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 0;
    text-align: left;
}

/* 12-Zeilen Kompakt-Wrapper für Kachel-Symmetrie */
.service-card__content-wrap {
    position: relative;
    z-index: 1;
    max-height: 18rem; /* exactly 12 lines of text */
    overflow: hidden;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

/* Verbesserter Fade-Out von unten nach oben */
.service-card__content-wrap::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3.5rem;
    background: linear-gradient(to top, rgba(255,255,255,1) 10%, rgba(255,255,255,0));
    pointer-events: none;
}

/* "Mehr..." Trigger: Linksbündig und deckend */
.service-card__more-trigger {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.5rem;
    line-height: 1.5rem;
    background-color: #ffffff;
    color: var(--color-teal);
    font-weight: 600;
    cursor: pointer;
    z-index: 20;
    text-align: left;
    transition: color 0.2s ease;
}

.service-card__more-trigger:hover {
    color: var(--color-teal-dark);
    text-decoration: underline;
}

/* Wenn kein Overflow → Fade + Trigger ausblenden */
.service-card__content-wrap.no-overflow::after,
.service-card__content-wrap.no-overflow .service-card__more-trigger {
    display: none !important;
}

@media (min-width: 768px) {
    .service-card {
        padding: 2rem 2rem 2.5rem;
    }
    .service-card__title {
        font-size: 1.25rem;
        min-height: 3rem; /* Adjusted for desktop font sizing */
    }
    .service-card__text {
        font-size: 1rem;
    }
}

/* === Service Card Erweiterungen (Angebote) === */
.service-card {
    display: flex;
    flex-direction: column;
}
.service-card__list {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0.75rem 0 0.5rem;
    text-align: left;
}

.service-card__list-item {
    font-size: 0.875rem;
    color: #4b5563;
    line-height: 1.6;
}

.service-card__price,
.service-card__fallbackpreis {
    font-size: 1rem;
    color: var(--color-teal);
    margin: 1rem 0;
}
.service-card__abopreis {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-teal);
    margin: 0;
    padding-top: 1rem;
}
.service-card__fixpreis {
    font-size: 0.85rem;
    font-weight: 400;
    color: #374151;
    margin: 0.25rem 0 0;
}
.service-card__pricing {
    margin-top: auto;
    padding: 1rem 0 0.75rem;
}

.service-card__btn {
    display: inline-block;
    padding: 0.625rem 1.5rem;
    border-radius: 9999px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: auto;
    align-self: center;
}

.service-card__btn--kaufen {
    background-color: var(--color-teal);
    color: #fff;
}

.service-card__btn--kaufen:hover {
    background-color: var(--color-teal-dark);
    color: #fff;
}

.service-card__btn--anfragen {
    background-color: #374151;
    color: #fff;
}

.service-card__btn--anfragen:hover {
    background-color: #1f2937;
    color: #fff;
}

.service-card__btn--projekt-starten {
    background-color: var(--color-teal);
    color: #fff;
}

.service-card__btn--projekt-starten:hover {
    background-color: var(--color-teal-dark);
    color: #fff;
}

.service-card__btn--mehr {
    background-color: transparent;
    color: var(--color-teal);
    border: 2px solid var(--color-teal);
}

.service-card__btn--mehr:hover {
    background-color: var(--color-teal);
    color: #fff;
}

/* === Angebot-Popup (75%) === */
.angebot-popup {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.angebot-popup__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.angebot-popup__container {
    position: relative;
    width: 90% !important;
    height: 90% !important;
    max-width: 960px !important;
    max-height: 90vh !important;
    background-color: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 1.5rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden; /* Restrict scrolling on the main container */
    display: flex;
    flex-direction: column;
    animation: angebot-popup-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes angebot-popup-in {
    from { opacity: 0; transform: scale(0.96) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.angebot-popup__close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    background: #ffffff !important;
    border: 1px solid #f1f5f9;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

.angebot-popup__close:hover {
    color: #111827;
    transform: scale(1.05);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.angebot-popup__body {
    padding: 3rem 3.5rem 4.5rem 3rem; /* Generous padding right and bottom */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto; /* Allow scrolling inside body only */
    
    /* Firefox Custom Scrollbar */
    scrollbar-color: var(--color-teal) transparent;
    scrollbar-width: thin;
}

/* 1. Die Scrollbar etwas breiter machen, um Platz für den unsichtbaren Rahmen zu schaffen */
.angebot-popup__body::-webkit-scrollbar {
    width: 20px; /* Breite inkl. unsichtbarem Abstand */
    background-color: transparent;
}

.angebot-popup__body::-webkit-scrollbar-track {
    background-color: transparent;
}

.angebot-popup__body::-webkit-scrollbar-thumb {
    background-color: var(--color-teal);
    border-radius: 20px;
    /* Dieser Rahmen erzeugt den perfekten Abstand nach rechts, oben und unten */
    border: 6px solid rgba(255, 255, 255, 0); 
    background-clip: padding-box; 
}

/* Remove scrollbar arrows completely for an ultra-clean design */
.angebot-popup__body::-webkit-scrollbar-button {
    display: none !important;
    width: 0;
    height: 0;
}

.angebot-popup__title {
    font-size: 1.875rem;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 0.75rem;
    text-align: center;
}

.angebot-popup__description {
    font-size: 1.05rem;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    text-align: center;
    max-width: 44rem;
    margin-left: auto;
    margin-right: auto;
}

/* 60 / 40 Grid */
.angebot-popup__grid {
    display: grid;
    grid-template-columns: 6fr 4fr;
    gap: 3rem;
    margin-bottom: 2.5rem;
    align-items: center;
}

.angebot-popup__left {
    display: flex;
    flex-direction: column;
}

.angebot-popup__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-self: center; /* Center the checklist block as a whole, keeping items left-aligned */
}

.angebot-popup__list-item {
    position: relative;
    padding-left: 1.75rem;
    font-size: 1.05rem;
    color: #4b5563;
    line-height: 1.5;
}

.angebot-popup__list-item::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-teal);
    font-weight: bold;
}

.angebot-popup__right {
    display: flex;
    justify-content: center;
}

.angebot-popup__image-frame {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}

.angebot-popup__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.angebot-popup__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f3f4f6;
    color: #9ca3af;
}

.angebot-popup__image-placeholder svg {
    width: 4rem;
    height: 4rem;
}

/* Pricing Selector and Form */
.angebot-popup__form {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.angebot-popup__pricing-box {
    background-color: #f8fafc;
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border: 1px solid #f1f5f9;
}

.angebot-popup__price-row {
    display: flex;
    align-items: center;
    justify-content: center;
}

.angebot-popup__price-row--top {
    font-size: 1rem;
    color: #6b7280;
    font-weight: 400;
}

.angebot-popup__price-row--bottom {
    font-size: 1.35rem;
    color: #6b7280;
    font-weight: 400;
}

.angebot-popup__price-row label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 100%;
    padding: 0.25rem 0;
    position: relative;
}

/* Hide native radio bulletpoint */
.angebot-popup__radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    cursor: pointer;
}

/* Base style for the price text inside label */
.angebot-popup__price-row label span {
    transition: color 0.25s ease;
}

/* Selected price gets accent color */
.angebot-popup__price-row label input:checked + span {
    color: var(--color-teal) !important;
}

/* Hover effect on hover of the label */
.angebot-popup__price-row label:hover span {
    color: var(--color-teal);
}

.angebot-popup__price-display {
    width: 100%;
    text-align: center;
}

.angebot-popup__price-label--bold {
    font-weight: 700;
    color: #111827;
}

.angebot-popup__price-label--small {
    color: #6b7280;
}

.angebot-popup__order-btn {
    width: 100%;
    max-width: 280px;
    margin-bottom: 1rem;
}

.angebot-popup__vat-notice {
    text-align: center;
    font-size: 0.825rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    margin-top: 1.5rem; /* Sufficient spacing below the Order button */
}

/* Mobile Overrides (Portrait View) */
@media (max-width: 767px) {
    .angebot-popup__container {
        width: 90% !important;
        height: 90% !important;
        max-height: 90vh !important;
    }

    .angebot-popup__body {
        padding: 2rem 1.5rem;
    }

    .angebot-popup__title {
        font-size: 1.5rem;
    }

    .angebot-popup__description {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }

    .angebot-popup__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .angebot-popup__right {
        order: -1; /* image on top of list on mobile */
    }

    .angebot-popup__image-frame {
        max-width: 200px;
    }

    .angebot-popup__list-item {
        font-size: 0.95rem;
    }

    .angebot-popup__pricing-box {
        padding: 1rem;
    }

    .angebot-popup__price-row--bottom {
        font-size: 1.2rem;
    }
}

/* === Pricing Tables === */
.pricing-card {
    transition: all 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.pricing-card.featured {
    border: 2px solid var(--color-teal);
    transform: scale(1.02);
}

.pricing-card.featured:hover {
    transform: scale(1.02) translateY(-4px);
}

/* === Modal & Content Boxes === */
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-container,
.content-box {
    position: relative;
    overflow: hidden;
    background-color: white;
    background-image: url('../images/watermark.png');
    background-repeat: no-repeat;
}

.modal-container {
    background-size: 600px;
    background-position: left -150px top -15px;
}

.content-box {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    background-size: 600px;
    background-position: right -100px bottom -100px;
}

.content-box h2 {
    margin-top: 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #374151;
}

.content-box h3 {
    margin-top: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
}

/* === Hero Section (Startseite) – Hintergrund-Effekte === */
.hero-section {
    position: relative;
    overflow: hidden;
}

.hero-section::before,
.hero-section::after {
    content: '';
    position: absolute;
    background: radial-gradient(circle, rgba(0, 167, 157, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.hero-section::before {
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
}

.hero-section::after {
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
}

/* === Kundenportal === */
.portal-card {
    background: linear-gradient(135deg, #1F2937 0%, #374151 100%);
    transition: all 0.3s ease;
}

.portal-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}

/* === Security Badge === */
.security-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: rgba(0, 167, 157, 0.1);
    border: 1px solid rgba(0, 167, 157, 0.3);
    border-radius: 9999px;
    font-size: 0.875rem;
    color: #0D9488;
}

/* === Utility: hidden (Ersatz für Tailwind .hidden) === */
.hidden {
    display: none !important;
}

/* === Skip-to-Content Link (Barrierefreiheit) === */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 10000;
    padding: 0.75rem 1.5rem;
    background-color: var(--color-teal);
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: none;
}

/* === Utility & WordPress Core === */
.btn {
    display: inline-block;
    background-color: var(--color-teal);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.75rem;
    border-radius: 9999px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
    text-align: center;
}

.btn:hover {
    background-color: var(--color-teal-dark);
    color: #ffffff;
}

.btn--primary {
    background-color: var(--color-teal);
    color: #ffffff;
}

.btn--primary:hover {
    background-color: var(--color-teal-dark);
}

.btn--outline {
    background: transparent;
    border: 2px solid var(--color-teal);
    color: var(--color-teal);
}

.btn--outline:hover {
    background: var(--color-teal);
    color: #ffffff;
}

.btn--white {
    background: #ffffff;
    color: var(--color-teal);
}

.btn--white:hover {
    background: #f0fdfa;
}
.aspect-video {
    aspect-ratio: 16 / 9;
}

.wp-caption {
    max-width: 100%;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-block-image img {
    height: auto;
}

/* ==========================================================================
   Startseite – Neue BEM-Sektionen
   ========================================================================== */

.hero {
    padding: 1rem 0 5rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.hero__logo {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
}

.hero__logo img,
.hero__logo-img {
    transform: scale(0.7);
}

.hero__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1.5rem;
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.25;
}

.hero__text {
    font-size: 1rem;
    color: #6b7280;
    max-width: 48rem;
    margin: 0 auto 2rem;
    line-height: 1.625;
}

.hero__nav {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

@media (min-width: 768px) {
    .hero {
        padding: 2rem 0 7rem;
    }
    .hero__title {
        font-size: 2.25rem;
    }
    .hero__text {
        font-size: 1.125rem;
    }
}

@media (min-width: 1024px) {
    .hero__title {
        font-size: 3rem;
    }
}

/* Services Section */
.services {
    padding: 4rem 0;
    background-color: #e5e7eb;
}

.services__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.services__header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.services__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1rem;
}

.services__subtitle {
    color: #6b7280;
    max-width: 32rem;
    margin: 0 auto;
}

/* === Kategorie-Filter (Angebotsseite) === */
.services__filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}
.services__filter-btn {
    padding: 0.5rem 1.25rem;
    border: 2px solid var(--color-teal);
    border-radius: 9999px;
    background: transparent;
    color: var(--color-teal);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.services__filter-btn:hover {
    background: rgba(0, 167, 157, 0.08);
}
.services__filter-btn--active {
    background: var(--color-teal);
    color: #ffffff;
}
.services__filter-btn--active:hover {
    background: #008f86;
}

.services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.services__grid-headline {
    grid-column: 1 / -1;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 2px solid var(--color-teal);
}



.services__footer {
    text-align: center;
    margin-top: 2.5rem;
}

@media (min-width: 768px) {
    .services {
        padding: 5rem 0;
    }
    .services__title {
        font-size: 1.875rem;
    }
    .services__grid {
        gap: 2rem;
    }
    .services__header {
        margin-bottom: 3rem;
    }
}

/* === Services Slider (Startseite) === */
.services-slider {
    overflow: hidden;
}
.services-slider .swiper-slide {
    height: auto;
}
.services-slider .swiper-slide .service-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* CTA Section */
.cta-section {
    padding: 3rem 0;
    background-color: #ffffff;
}

.cta-section__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

@media (min-width: 640px) {
    .cta-section__inner {
        flex-direction: row;
    }
}

@media (min-width: 768px) {
    .cta-section {
        padding: 4rem 0;
    }
}

/* Buttons */
.btn {
    display: inline-block;
    font-weight: 700;
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
}

.btn:hover {
    transform: scale(1.05);
}

.btn--primary {
    background-color: var(--color-teal);
    color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn--primary:hover {
    background-color: var(--color-teal-dark);
}

.btn--secondary {
    background-color: #ffffff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn--secondary:hover {
    background-color: #f9fafb;
}

/* Contact Section */
.contact-section {
    padding: 4rem 0;
    background-color: #f3f4f6;
}

.contact-section__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.contact-section__header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.contact-section__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.contact-section__subtitle {
    color: #6b7280;
}

.contact-card {
    max-width: 28rem;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 1.5rem 1.5rem 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.contact-card__name {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--color-teal);
    margin-bottom: 0.5rem;
}

.contact-card__person {
    color: #374151;
    margin-bottom: 0.25rem;
}

.contact-card__address {
    color: #374151;
    margin-bottom: 1rem;
}

.contact-card__divider {
    border-top: 1px solid #e5e7eb;
    padding-top: 1rem;
    margin-top: 1rem;
}

.contact-card__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.contact-card__icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-teal);
    flex-shrink: 0;
}

.contact-card__link {
    color: #374151;
    text-decoration: none;
}

.contact-card__link:hover {
    color: var(--color-teal);
}

.contact-card__linkedin {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.contact-card__linkedin-icon {
    width: 1.75rem;
    height: 1.75rem;
    color: #9ca3af;
    transition: color 0.2s;
}

.contact-card__linkedin-link:hover .contact-card__linkedin-icon {
    color: var(--color-teal);
}

@media (min-width: 768px) {
    .contact-section {
        padding: 5rem 0;
    }
    .contact-section__title {
        font-size: 1.875rem;
    }
    .contact-card {
        padding: 2rem 2rem 2.5rem;
    }
}

/* === Responsive (Alt) === */
@media (max-width: 767px) {
    .modal-container {
        background-size: 400px;
        background-position: left -100px top -10px;
    }

    .content-box {
        background-size: 400px;
        background-position: right -80px bottom -80px;
    }

    .hero-section::before,
    .hero-section::after {
        display: none;
    }
}

/* ==========================================================================
   Shop-Seite BEM (Bereinigt)
   ========================================================================== */

.shop-hero {
    background-color: #1F2937;
    color: #ffffff;
    padding: 6rem 1.5rem 4rem 1.5rem;
    text-align: center;
}

.shop-hero__container,
.shop-main__container {
    max-width: 1200px;
    margin: 0 auto;
}

.shop-hero__title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #ffffff;
}

.shop-hero__text {
    font-size: 1.1rem;
    color: #d1d5db;
    max-width: 600px;
    margin: 0 auto 3rem auto;
    line-height: 1.6;
}

.shop-hero__trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 12px;
}

.shop-hero__trust-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-teal);
    margin-bottom: 0.5rem;
}

.shop-hero__trust-desc {
    font-size: 0.9rem;
    color: #9ca3af;
}

@media (max-width: 767px) {
    .shop-hero {
        padding: 4.5rem 1rem 3rem;
    }
    .shop-hero__title {
        font-size: 1.5rem;
    }
    .shop-hero__text {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }
    .shop-hero__trust-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
        padding: 1.25rem;
    }
    .shop-main {
        padding: 2.5rem 1rem 3rem;
    }
    .shop-main__title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    .shop-main ul.products {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .shop-hero__trust-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .shop-main ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.shop-main {
    padding: 4rem 1.5rem 5rem;
    background-color: #f9fafb;
}

.shop-main__container {
    max-width: 1200px;
    margin: 0 auto;
    display: flow-root;
}

.shop-main__title {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 3rem;
    color: #1f2937;
}

.shop-main__fallback {
    text-align: center;
    padding: 3rem 0;
    color: #6b7280;
}

/* ==========================================================================
   WooCommerce – BEM Shop
   ========================================================================== */

/* --- Shop Grid --- */
.shop-main .woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 2rem !important;
}

/* --- Price colors: current = teal, strikethrough = gray --- */
.woocommerce .price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--color-teal) !important;
    font-weight: 700;
}

.woocommerce .price del,
.woocommerce ul.products li.product .price del {
    color: #9ca3af !important;
    opacity: 0.7;
    font-size: 0.875rem;
}

.woocommerce .price ins,
.woocommerce ul.products li.product .price ins {
    text-decoration: none;
}

.woocommerce ul.products {
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none;
}

.woocommerce-loop-product {
    list-style: none;
    background-color: #ffffff;
    border-radius: 0.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    position: relative;
    width: 100%;
    overflow: visible;
}

.woocommerce-loop-product:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}

/* --- Bild-Container mit einheitlichem Aspect Ratio --- */
.woocommerce-loop-product__image-container {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem 0.5rem 0 0;
}

.woocommerce-loop-product .onsale {
    z-index: 11;
}

.woocommerce-loop-product__image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1rem;
    transition: transform 0.3s ease;
}

.woocommerce-loop-product:hover .woocommerce-loop-product__image-container img {
    transform: scale(1.05);
}

/* --- Produkt-Body im Grid --- */
.woocommerce-loop-product__body {
    padding: 1rem 1.25rem 1.5rem;
    text-align: center;
}

.woocommerce-loop-product__body .woocommerce-loop-product__title,
.woocommerce-loop-product__body h2 {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
    padding: 0;
}

.woocommerce-loop-product__body .price {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-teal) !important;
    margin-bottom: 0.75rem;
}

.woocommerce-loop-product__body .price del {
    font-size: 0.875rem;
    color: #9ca3af !important;
    margin-right: 0.5rem;
}

.woocommerce-loop-product__body .price ins {
    text-decoration: none;
}

.woocommerce-loop-product__body .button,
.woocommerce-loop-product__body .add_to_cart_button {
    display: inline-block;
    background-color: var(--color-teal);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.625rem 1.5rem;
    border-radius: 9999px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.woocommerce-loop-product__body .button:hover,
.woocommerce-loop-product__body .add_to_cart_button:hover {
    background-color: var(--color-teal-dark);
}

.woocommerce .star-rating span {
    color: #f59e0b;
}

.woocommerce a.added_to_cart {
    display: none;
}

/* ==========================================================================
   Produktdetailseite – BEM
   ========================================================================== */
.site-main--product {
    padding: 140px 0 4rem;
    background-color: #f3f4f6;
}

.product-detail__wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.product-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    background-color: #ffffff;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
}

@media (min-width: 768px) {
    .product-detail {
        grid-template-columns: 1fr 1fr;
        padding: 2.5rem;
        gap: 3rem;
    }
}

/* --- Galerie --- */
.product-detail__gallery {
    position: relative;
}

.product-detail__gallery .woocommerce-product-gallery {
    position: relative;
}

.product-detail__gallery .woocommerce-product-gallery__image {
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #f9fafb;
}

.product-detail__gallery .woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.product-detail__gallery .flex-control-thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    list-style: none;
    padding: 0;
    overflow-x: auto;
}

.product-detail__gallery .flex-control-thumbs li {
    flex: 0 0 auto;
    width: 4.5rem;
    border-radius: 0.375rem;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.product-detail__gallery .flex-control-thumbs li img {
    width: 100%;
    height: auto;
    display: block;
}

.product-detail__gallery .flex-control-thumbs li img.flex-active,
.product-detail__gallery .flex-control-thumbs li:hover {
    opacity: 1;
}

/* --- Produkt-Info --- */
.product-detail__info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.product-detail__info .product_title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

@media (min-width: 768px) {
    .product-detail__info .product_title {
        font-size: 2rem;
    }
}

.product-detail__info .price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-teal) !important;
}

.product-detail__info .price del {
    font-size: 1.125rem;
    color: #9ca3af !important;
    margin-right: 0.75rem;
}

.product-detail__info .price ins {
    text-decoration: none;
}

.product-detail__info .woocommerce-product-details__short-description {
    color: #4b5563;
    line-height: 1.625;
}

.product-detail__info .cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.product-detail__info .quantity {
    display: inline-flex;
    align-items: center;
}

.product-detail__info .quantity .qty {
    width: 4rem;
    padding: 0.625rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 1rem;
    text-align: center;
}

.product-detail__info .single_add_to_cart_button {
    display: inline-block;
    background-color: var(--color-teal);
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 2.5rem;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.product-detail__info .single_add_to_cart_button:hover {
    background-color: var(--color-teal-dark);
    transform: scale(1.02);
}

.product-detail__info .product_meta {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e5e7eb;
    font-size: 0.875rem;
    color: #6b7280;
}

.product-detail__info .product_meta span {
    display: block;
}

.product-detail__info .product_meta a {
    color: var(--color-teal);
    text-decoration: none;
}

.product-detail__info .product_meta a:hover {
    text-decoration: underline;
}

/* --- Tabs --- */
.product-detail__tabs {
    max-width: 1200px;
    margin: 2rem auto 0;
    padding: 0 1.5rem;
}

.product-detail__tabs .woocommerce-tabs {
    background-color: #ffffff;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

@media (min-width: 768px) {
    .product-detail__tabs .woocommerce-tabs {
        padding: 2.5rem;
    }
}

.product-detail__tabs .wc-tabs {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    border-bottom: 2px solid #e5e7eb;
    overflow-x: auto;
}

.product-detail__tabs .wc-tabs li {
    margin: 0;
}

.product-detail__tabs .wc-tabs li a {
    display: block;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: #6b7280;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.3s ease, border-color 0.3s ease;
    white-space: nowrap;
}

.product-detail__tabs .wc-tabs li.active a,
.product-detail__tabs .wc-tabs li a:hover {
    color: var(--color-teal);
    border-bottom-color: var(--color-teal);
}

.product-detail__tabs .woocommerce-Tabs-panel {
    color: #4b5563;
    line-height: 1.625;
}

.product-detail__tabs .woocommerce-Tabs-panel h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1rem;
}

/* --- Verwandte Produkte --- */
.product-detail__tabs .related.products {
    margin-top: 3rem;
}

.product-detail__tabs .related.products h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1.5rem;
}

.woocommerce .related.products ul.products,
.woocommerce-page .related.products ul.products,
.woocommerce .cross-sells ul.products,
.woocommerce-page .cross-sells ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 2rem !important;
}
.woocommerce .related.products ul.products li.product,
.woocommerce-page .related.products ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

/* --- Sale Badge --- */
.woocommerce span.onsale {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 10;
    background-color: #ef4444;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    min-width: auto;
    min-height: auto;
    line-height: 1.5;
    margin: 0;
}

/* --- Breadcrumbs --- */
.woocommerce .woocommerce-breadcrumb {
    color: #6b7280;
    font-size: 0.8125rem;
    margin-bottom: 1.5rem;
}

.woocommerce .woocommerce-breadcrumb a {
    color: var(--color-teal);
    text-decoration: none;
}

.woocommerce .woocommerce-breadcrumb a:hover {
    text-decoration: underline;
}

/* --- Result Count / Ordering --- */
.woocommerce .woocommerce-result-count {
    color: #6b7280;
    font-size: 0.875rem;
}

.woocommerce .woocommerce-ordering select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #374151;
    background-color: #ffffff;
    cursor: pointer;
}

/* --- Pagination --- */
.woocommerce nav.woocommerce-pagination {
    margin-top: 2rem;
}

.woocommerce nav.woocommerce-pagination ul {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
}

.woocommerce nav.woocommerce-pagination ul li {
    margin: 0;
    border: none;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    background-color: #ffffff;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
    background-color: var(--color-teal);
    color: #ffffff;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    background-color: var(--color-teal);
    color: #ffffff;
}

/* --- WooCommerce Notice --- */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
    background-color: #f0fdf4;
    border-top: 3px solid var(--color-teal);
    color: #1f2937;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

.woocommerce .woocommerce-message .button {
    background-color: var(--color-teal);
    color: #ffffff;
    border-radius: 9999px;
    padding: 0.5rem 1.25rem;
    font-weight: 700;
}

.woocommerce .woocommerce-message .button:hover {
    background-color: var(--color-teal-dark);
}

/* ==========================================================================
   Fusszeile (footer.php) Styles
   ========================================================================== */
.site-footer {
    background-color: var(--color-gray-800);
    color: #ffffff;
    padding: 3rem 0;
    text-align: center;
    font-size: 0.875rem;
}

.site-footer__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.site-footer__copyright {
    margin-bottom: 1.5rem;
    color: #9ca3af;
}

.site-footer__contact {
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.site-footer__contact-brand {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
}

.site-footer__contact-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.site-footer__contact-link {
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-footer__contact-link:hover {
    color: var(--color-teal);
}

.site-footer__contact-sep {
    color: #4b5563;
    font-size: 0.8rem;
}

@media (min-width: 768px) {
    .site-footer__contact {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 1.5rem;
    }

    .site-footer__contact-links {
        justify-content: flex-end;
    }
}

.site-footer__nav-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.site-footer__nav {
    display: flex;
    gap: 1.5rem;
}

.site-footer__link,
.site-footer__nav a {
    color: #ffffff !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: color 0.3s ease;
}

.site-footer__link:hover,
.site-footer__nav a:hover {
    color: var(--color-teal) !important;
}

/* ==========================================================================
   Kundenportal Seite (page-kundenlogin.php) Styles
   ========================================================================== */
.portal {
    padding: 4rem 0;
    background-color: #f3f4f6;
}

.portal__container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.portal__header {
    text-align: center;
    margin-bottom: 3rem;
}

.portal__icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    background-color: #ccfbf1;
    border-radius: 50%;
    margin-bottom: 1rem;
}

.portal__header-icon {
    width: 2rem !important;
    height: 2rem !important;
    color: var(--color-teal);
}

.portal__title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.portal__subtitle {
    color: #6b7280;
}

.portal__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.portal__step-card {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 0.5rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.portal__step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--color-teal);
    color: #ffffff;
    border-radius: 50%;
    font-weight: 700;
    margin-bottom: 1rem;
}

.portal__step-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: #1f2937;
}

.portal__step-text {
    font-size: 0.875rem;
    color: #6b7280;
}

.portal__badges {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.portal__card {
    background-color: #ffffff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    margin-bottom: 3rem;
}

.portal__card-header {
    background: linear-gradient(135deg, #1F2937 0%, #374151 100%);
    color: #ffffff;
    padding: 2rem;
    text-align: center;
}

.portal__card-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.portal__card-url {
    color: #9ca3af;
    font-size: 0.875rem;
}

.portal__card-body {
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.portal__cta-wrapper {
    margin-bottom: 2.5rem;
}

.portal__cta-text {
    color: #4b5563;
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.portal__iframe-container {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
}

.portal__iframe-notice {
    background-color: #f9fafb;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
}

.portal__iframe-wrapper {
    position: relative;
    width: 100%;
    height: 600px;
}

.portal__iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.portal__support {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 0.5rem;
    text-align: center;
    border: 1px solid #e5e7eb;
}

.portal__support-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.portal__support-text {
    color: #6b7280;
    margin-bottom: 1.5rem;
}

.portal__support-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.portal__support-link {
    color: var(--color-teal);
    text-decoration: none;
    font-weight: 600;
}

.portal__support-link:hover {
    color: var(--color-teal-dark);
}

@media (max-width: 767px) {
    .portal__title {
        font-size: 1.5rem;
    }
    .portal__steps {
        grid-template-columns: 1fr;
    }
    .portal__card-title {
        font-size: 1.15rem;
    }
    .portal__card-body {
        padding: 1.25rem;
    }
    .portal__iframe-wrapper {
        height: 450px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .portal__steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .portal__steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* === PhotoSwipe === */
.pswp__bg {
    opacity: 0.85 !important;
}

.pswp__scroll-wrap {
    max-width: 900px !important;
    margin: auto !important;
}

/* ==========================================================================
   Referenzen (page-referenzen.php) – BEM
   ========================================================================== */
.references {
    padding: 6rem 0 4rem;
    background-color: #f3f4f6;
}

.references__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.references__header {
    text-align: center;
    margin-bottom: 3rem;
}

.references__title {
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.references__subtitle {
    color: #6b7280;
    max-width: 32rem;
    margin: 0 auto;
}

.references__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .references__grid {
        grid-template-columns: 1fr 1fr;
    }
    .references__title {
        font-size: 2.5rem;
    }
}

.references__fallback {
    grid-column: 1 / -1;
    text-align: center;
    color: #6b7280;
    padding: 3rem 0;
}

/* --- Referenz-Kachel --- */
.reference-card {
    background-color: #ffffff;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

/* --- Referenz-Kachel Slider & Bild Fix --- */
.reference-card__slider {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: #e5e7eb;
    /* Der Border-Radius für die Kachel-Ecken ganz oben */
    border-radius: 0.75rem 0.75rem 0 0; 
}

/* Das Padding kommt auf den Slide-Container, nicht auf das Bild! */
.reference-card__slider .swiper-slide {
    padding: 10px;
    box-sizing: border-box;
}

.reference-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Jetzt greifen die runden Ecken direkt auf die Bild-Pixel */
    border-radius: 0.5rem; 
}

.reference-card__company {
    font-size: 1.5rem;
    color: #000000;
    font-weight: 700;
    margin: 0;
}
/* Hier aufpassen: KEINE doppelte schliessende Klammer mehr! */

.reference-card__image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
}

.reference-card__image-placeholder svg {
    width: 3rem;
    height: 3rem;
}

.reference-card__slider .swiper-pagination-bullet {
    background-color: #ffffff;
    opacity: 0.7;
}

.reference-card__slider .swiper-pagination-bullet-active {
    background-color: var(--color-teal);
    opacity: 1;
}

.reference-card__body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

.reference-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.reference-card__company {
    font-size: 1.5rem;
    color: #000000;
    font-weight: 700;
    margin: 0;
}

.reference-card__text {
    font-size: 0.9375rem;
    color: #4b5563;
    line-height: 1.6;
    flex: 1;
}

.reference-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-teal);
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.reference-card__link:hover {
    color: var(--color-teal-dark);
}

/* ==========================================================================
   Testimonials Carousel (front-page.php)
   ========================================================================== */
.testimonials {
    padding: 4rem 0;
    background-color: #f9fafb;
}

.testimonials__inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
}

.testimonials__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 2rem;
}

.testimonials__carousel {
    padding-bottom: 3rem;
}

.testimonials__card {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.testimonials__avatar {
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    overflow: hidden;
    background-color: #e5e7eb;
}

.testimonials__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonials__avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
}

.testimonials__avatar-placeholder svg {
    width: 2.5rem;
    height: 2.5rem;
}

.testimonials__quote {
    font-size: 1.125rem;
    font-style: italic;
    color: #374151;
    line-height: 1.7;
    margin: 0 0 1.5rem;
    quotes: "„" "“" "‚" "‘";
}

.testimonials__quote::before {
    content: "„";
    color: var(--color-teal);
    font-size: 2rem;
    line-height: 0;
    vertical-align: -0.4em;
    margin-right: 0.25rem;
}

.testimonials__quote::after {
    content: "“";
    color: var(--color-teal);
    font-size: 2rem;
    line-height: 0;
    vertical-align: -0.2em;
    margin-left: 0.25rem;
}

.testimonials__author {
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.testimonials__company {
    font-size: 0.875rem;
    color: #6b7280;
}

.testimonials__fallback {
    color: #6b7280;
}

.testimonials__carousel .swiper-pagination-bullet {
    background-color: #d1d5db;
    opacity: 1;
}

.testimonials__carousel .swiper-pagination-bullet-active {
    background-color: var(--color-teal);
}

@media (min-width: 768px) {
    .testimonials {
        padding: 5rem 0;
    }
    .testimonials__title {
        font-size: 1.875rem;
    }
    .testimonials__quote {
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   Formular (Kontaktformular pdc_contact_form)
   ========================================================================== */

.pdc-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pdc-form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .pdc-form__row {
        grid-template-columns: 1fr 1fr;
    }
}

.pdc-form__group {
    display: flex;
    flex-direction: column;
}

.pdc-form__label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.25rem;
}

.pdc-form__input {
    display: block;
    width: 100%;
    padding: 0.5rem;
    font-size: 0.875rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.pdc-form__input:focus {
    outline: none;
    border-color: var(--color-teal);
    box-shadow: 0 0 0 3px rgba(0, 167, 157, 0.2);
}

.pdc-form__action {
    padding-top: 1rem;
}

.pdc-form__submit {
    width: 100%;
}

/* === Bestellseite (order-card) === */
.order-card {
    max-width: 600px;
    margin: 0 auto 4rem;
    background-color: #ffffff;
    padding: 2rem 2rem 2.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.order-card .pdc-form__input {
    width: 100%;
}

.order-card__honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

@media (min-width: 768px) {
    .order-card {
        padding: 2.5rem 3rem;
    }
}

.order-card__success-action {
    margin-top: 1.5rem;
    text-align: center;
}

/* ==========================================================================
   Seiten-Layout (Ersatz für Tailwind-Klassen)
   ========================================================================== */

.page-main {
    padding: 120px 0 4rem; /* 120px padding-top to clear the fixed header on mobile */
}

@media (min-width: 768px) {
    .page-main {
        padding: 140px 0 6rem; /* 140px padding-top to clear the fixed header on desktop */
    }
}

.page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.page-container--narrow {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
}

.page-container--small {
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}

/* Artikel (Standard-Seite, Blog) */
.page-article {
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
}

@media (min-width: 768px) {
    .page-article {
        padding: 3rem;
    }
}

.page-article--white {
    background-color: #ffffff;
}

.page-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

@media (min-width: 768px) {
    .page-title {
        font-size: 2.25rem;
    }
}

.page-content {
    color: #374151;
    line-height: 1.7;
}

.page-content p {
    margin-bottom: 1rem;
}

/* Blog-/Beitrags-Archiv */
.post-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.post-card {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease;
}

.post-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}

.post-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.post-card__title a {
    color: #1f2937;
    text-decoration: none;
}

.post-card__title a:hover {
    color: var(--color-teal);
}

.post-card__meta {
    color: #6b7280;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.post-card__excerpt {
    color: #4b5563;
}

@media (min-width: 768px) {
    .post-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .post-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Artikel-Meta */
.article-meta {
    color: #6b7280;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

/* Beitragsbild */
.post-thumbnail {
    margin-bottom: 2rem;
}

.post-thumbnail img {
    width: 100%;
    border-radius: 0.5rem;
}

/* 404-Seite */
.error-page {
    padding: 6rem 0 8rem;
    text-align: center;
}

@media (min-width: 768px) {
    .error-page {
        padding: 8rem 0;
    }
}

.error-page__code {
    font-size: 4rem;
    font-weight: 700;
    color: var(--color-teal);
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .error-page__code {
        font-size: 6rem;
    }
}

.error-page__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .error-page__title {
        font-size: 1.875rem;
    }
}

.error-page__text {
    color: #6b7280;
    margin-bottom: 2rem;
}

/* Suchergebnisse */
.search-page__heading {
    font-size: 1.875rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .search-page__heading {
        font-size: 2.25rem;
    }
}

.search-page__no-results {
    text-align: center;
    padding: 3rem 0;
}

.search-page__no-results p {
    color: #6b7280;
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
}

/* 404 Button */
.btn--404 {
    display: inline-block;
    background-color: var(--color-teal);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.75rem;
    border-radius: 9999px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.btn--404:hover {
    background-color: var(--color-teal-dark);
    color: #ffffff;
}

/* Pagination */
.pagination-wrap {
    margin-top: 2rem;
}

/* Allgemeine Buttons (für 404-Seite etc.) */
.btn--404 {
    display: inline-block;
    background-color: var(--color-teal);
    color: #ffffff;
    font-weight: 700;
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn--404:hover {
    background-color: var(--color-teal-dark);
    transform: scale(1.05);
}

/* ==========================================================================
   Full-Width Layout für die Angebotsseite (Korrektur)
   ========================================================================== */

/* Hintergrund transparent machen */
.services.services--fullwidth {
    background-color: transparent;
    padding-top: 2rem;
}

/* Den 1200px-Zwang des inneren Containers aufheben und auf 75% zentrierte Breite einstellen */
.services--fullwidth .services__inner {
    max-width: 75%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

/* Kacheln auf volle Breite verteilen (3-4 pro Zeile) */
.services--fullwidth .services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2.5rem;
    align-items: stretch;
}

/* Überschrift über die volle Breite spannen */
.services--fullwidth .services__grid-headline {
    grid-column: 1 / -1;
}

@media (max-width: 767px) {
    .services--fullwidth .services__inner {
        max-width: 100%;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .services--fullwidth .services__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .services--fullwidth .services__inner {
        max-width: 90%;
    }
    .services--fullwidth .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .services--fullwidth .services__inner {
        max-width: 75%;
    }
    .services--fullwidth .services__grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

/* ==========================================================================
   Mobile Overrides – Verbesserungen für kleine Bildschirme
   ========================================================================== */

/* Service-Card Icons auf Mobile anpassen */
@media (max-width: 767px) {
    .service-card__icon {
        width: 3rem;
        height: 3rem;
        margin-bottom: 1rem;
    }

    .service-card__icon svg,
    .service-card__icon img {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }

    .service-card__title {
        font-size: 1rem;
    }

    /* Contact-Card – bessere Abstände auf Mobile */
    .contact-card {
        padding: 1.25rem;
    }

    .contact-card__row {
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        flex-wrap: wrap;
        word-break: break-word;
    }

    .contact-card__icon {
        width: 1rem;
        height: 1rem;
    }

    .contact-card__link {
        font-size: 0.875rem;
    }

    .contact-card__linkedin-icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    /* Footer – Abstände und Links auf Mobile */
    .site-footer {
        padding: 2rem 0;
    }

    .site-footer__contact {
        gap: 0.3rem;
        margin-bottom: 1.5rem;
    }

    .site-footer__contact-links {
        flex-direction: column;
        gap: 0.25rem;
    }

    .site-footer__contact-sep {
        display: none;
    }

    .site-footer__contact-link {
        font-size: 0.8rem;
    }

    .site-footer__nav-wrapper {
        gap: 0.75rem;
    }

    .site-footer__link,
    .site-footer__nav a {
        font-size: 0.75rem;
    }

    /* Buttons – volle Breite auf Mobile (optional, sinnvoll für CTAs) */
    .btn {
        display: block;
        width: 100%;
        padding: 0.75rem 1.25rem;
    }

    /* Hero-Teaser auf Mobile */
    .hero__title {
        font-size: 1.25rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .hero__text {
        font-size: 0.9rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .hero__menu-list {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .hero__menu-wrapper {
        padding: 0.5rem 1rem;
    }

    /* Shop-Hero Mobile */
    .shop-hero__title {
        font-size: 1.5rem;
    }

    .shop-hero__text {
        font-size: 0.9rem;
    }

    /* Portal Mobile */
    .portal__title {
        font-size: 1.25rem;
    }

    .portal__card-body {
        padding: 1rem;
    }

    .portal__iframe-wrapper {
        height: 450px;
    }

    .portal__support-links {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Produktseite (page-produkte.php) Kategorie-Filter Mobile */
    .services__filter {
        gap: 0.4rem;
    }

    .services__filter-btn {
        font-size: 0.75rem;
        padding: 0.4rem 0.9rem;
    }

    /* Services Grid Karten – Padding auf Mobile */
    .service-card {
        padding: 1.25rem;
    }

    /* Testimonials Mobile */
    .testimonials__quote {
        font-size: 1rem;
    }

    /* Popup Mobile */
    .angebot-popup__content {
        width: 95vw;
        padding: 1.25rem;
    }

    .angebot-popup__gallery {
        grid-template-columns: 1fr;
    }
}