/* --- index --- */
/* Nur Startseite: Parallax-Bento (#gallery), Position per JS */
        #gallery .bento-img-container img {
            width: 100%;
            height: 115%;
            object-fit: cover;
            position: absolute;
            top: -7.5%;
            left: 0;
            transition:
                transform 0.1s linear,
                opacity var(--t-2) ease;
            will-change: transform;
            opacity: 0.8;
        }

        #gallery .bento-item:hover .bento-img-container img {
            opacity: 1;
            transform: translateY(var(--parallax-y, 0)) scale(1.05);
        }

/* --- ueber-uns --- */
        /* --- Unternehmen --- */
        .company-grid {
            display: grid;
            grid-template-columns: 1.3fr 0.7fr;
            gap: var(--s-7);
            align-items: center;
        }

        .company-text-container {
            display: flex;
            flex-direction: column;
        }

        .company-title-main {
            font-family: var(--font-heading);
            font-size: var(--fs-display);
            font-weight: var(--fw-black);
            line-height: var(--lh-snug);
            color: var(--clr-text-main);
            margin-bottom: var(--s-5);
            text-transform: uppercase;
            letter-spacing: var(--track-tight);
        }

        .company-title-main span {
            display: block;
        }

        .company-bio {
            font-size: var(--fs-body);
            line-height: var(--lh-prose);
            color: var(--clr-text-main);
            max-width: var(--measure);
        }

        .company-bio p + p {
            margin-top: var(--s-3);
        }

        .company-image-wrapper {
            position: relative;
            padding: var(--s-2);
        }

        .company-image-wrapper .image-inner {
            position: relative;
            overflow: hidden;
            border: 1px solid var(--clr-border);
            aspect-ratio: 4/5;
        }

        .company-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform var(--t-4) var(--ease-out);
        }

        .company-image-wrapper:hover .company-image {
            transform: scale(1.05);
        }

        .image-overlay-detail {
            position: absolute;
            bottom: var(--s-3);
            right: var(--s-3);
            width: var(--s-6);
            height: var(--s-6);
            border-right: 2px solid var(--clr-brand);
            border-bottom: 2px solid var(--clr-brand);
            pointer-events: none;
        }

        /* --- Zertifikate --- */
        .cert-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
            gap: var(--s-4);
            margin-top: var(--s-5);
        }


        /* --- Partner --- */
        .partner-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr));
            gap: var(--s-6);
            align-items: center;
            justify-items: center;
            margin-top: var(--s-5);
        }

        .partner-item {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 6.25rem;
            padding: var(--s-2);
        }

        .partner-logo {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            filter: grayscale(1) opacity(0.5);
            transition: filter var(--t-3) ease, opacity var(--t-3) ease;
        }

        .partner-item:hover .partner-logo {
            filter: grayscale(0) opacity(1);
        }

        .partner-name {
            font-family: var(--font-heading);
            font-weight: var(--fw-bold);
            color: var(--clr-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        /* --- Team Cards --- */
        .section-lead-text {
            max-width: var(--measure);
            color: var(--clr-text-muted);
            font-size: var(--fs-body);
        }

        /* Heller Lesetext auf dunklem Hintergrund (Expertise) */
        .bg-dark .section-lead-text {
            color: rgba(255, 255, 255, 0.65);
        }

        .team-member-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
            gap: var(--s-5);
            margin-top: var(--s-6);
        }



        .bg-light-gray {
            background-color: var(--clr-bg);
        }

        /* --- Timeline (Restored) --- */
        .timeline-container {
            max-width: var(--measure);
            margin: var(--s-6) auto 0;
            position: relative;
            padding-left: var(--s-4);
        }

        .timeline-container::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 1px;
            background-color: var(--clr-border);
        }

        .timeline-item {
            position: relative;
            padding-bottom: var(--s-6);
        }

        .timeline-item::before {
            content: '';
            position: absolute;
            left: calc(-1 * var(--s-4));
            top: var(--s-1);
            width: var(--s-1);
            height: var(--s-1);
            background-color: var(--clr-brand);
            transform: translateX(-50%);
        }

        .timeline-year {
            font-size: var(--fs-heading);
            font-weight: var(--fw-bold);
            font-family: var(--font-heading);
            color: var(--clr-brand);
            margin-bottom: var(--s-1);
            display: block;
            transition: transform var(--t-2) var(--ease-out),
                color var(--t-2) var(--ease-out);
        }

        .timeline-content {
            transition: transform var(--t-2) var(--ease-out);
        }

        .timeline-item:hover .timeline-year {
            transform: translateX(var(--s-1));
            color: var(--clr-on-dark);
        }

        .timeline-item:hover .timeline-content {
            transform: translateX(var(--s-1));
        }

        .timeline-content p {
            color: var(--clr-on-dark-soft);
            line-height: var(--lh-body);
        }

        .timeline-content h3 {
            font-size: var(--fs-lead);
            font-family: var(--font-heading);
            font-weight: var(--fw-bold);
            color: var(--clr-brand);
            margin-bottom: var(--s-2);
        }

        .timeline-section .section-label {
            color: var(--clr-on-dark-dim);
        }

        .timeline-section .section-title {
            color: var(--clr-on-dark);
        }

        @media (max-width: 1024px) {
            .company-grid {
                grid-template-columns: 1fr;
                gap: var(--s-6);
            }
            .section-header-top:not(:has(.btn-more)) {
                flex-direction: column;
                gap: var(--s-3);
            }
        }


/* --- leistungen --- */
.service-section {
            padding: var(--section-y) 0;
            border-bottom: 1px solid var(--clr-border);
        }

        .service-section:last-of-type {
            border-bottom: none;
        }

        .service-flex {
            display: flex;
            align-items: center;
            gap: var(--s-7);
        }

        .service-section:nth-child(even) .service-flex {
            flex-direction: row-reverse;
        }

        .service-visual {
            flex: 1;
            position: relative;
        }

        .service-visual img {
            width: 100%;
            aspect-ratio: 4/3;
            object-fit: cover;
            filter: grayscale(0.2);
            transition: filter var(--t-3) var(--ease-out);
        }

        .service-section:hover .service-visual img {
            filter: grayscale(0);
        }

        .service-number {
            position: absolute;
            top: var(--s-2);
            right: var(--s-3);
            font-size: clamp(3rem, 14vw, 8rem);
            font-family: var(--font-heading);
            font-weight: var(--fw-black);
            color: var(--clr-brand);
            opacity: 0.3;
            line-height: 1;
            pointer-events: none;
            z-index: 2;
        }

        .service-section:nth-child(even) .service-number {
            right: auto;
            left: var(--s-3);
        }

        .service-info {
            flex: 1;
        }

        .service-info .section-label {
            margin-bottom: var(--s-3);
        }

        .service-desc {
            font-size: var(--fs-body);
            line-height: var(--lh-prose);
            color: var(--clr-text-muted);
            margin-bottom: var(--s-5);
            max-width: var(--measure);
        }

        /* Link von der Leistungsübersicht auf die jeweilige Leistungsseite */
        .service-info .btn-more {
            margin-top: var(--s-6);
        }

        @media (max-width: 1024px) {
            .service-flex {
                flex-direction: column !important;
                gap: var(--s-5);
            }

            .service-visual {
                width: 100%;
            }

            .service-number {
                font-size: clamp(2.5rem, 10vw, 5rem);
                top: var(--s-1);
                right: var(--s-2);
            }

            .service-section:nth-child(even) .service-number {
                left: var(--s-2);
                right: auto;
            }
        }

/* --- kontakt --- */
/* Kontakt: nur Layout, Typo über globale Tokens */
        .page-content-start {
            padding-top: var(--section-y);
            padding-bottom: var(--section-y);
            background-color: var(--clr-surface);
        }

        .page-content-start .detail-item .label {
            color: var(--clr-brand);
        }

        .page-content-start .detail-item a.detail-value,
        .page-content-start .detail-item span.detail-value {
            color: var(--clr-dark);
        }

        .page-content-start .detail-item a.detail-value:hover {
            color: var(--clr-brand);
            opacity: 1;
        }

        .page-content-start .contact-form-wrapper .wpcf7,
        .page-content-start .contact-form-wrapper .contact-form {
            margin: 0;
            padding: 0;
            background-color: transparent;
            border: none;
        }

/* --- blog --- */
.page-header-refined--legal {
            min-height: 22.5rem;
            height: auto;
            padding-top: 11rem;
            padding-bottom: var(--s-7);
            background:
                linear-gradient(180deg, rgba(9, 11, 15, 0.92) 0%, rgba(9, 11, 15, 0.78) 100%),
                linear-gradient(120deg, rgba(251, 83, 3, 0.18) 0%, rgba(251, 83, 3, 0) 48%);
        }

        .legal-content-section {
            background-color: var(--clr-surface);
        }

        .legal-article {
            min-width: 0;
            max-width: 52rem;
            margin: 0 auto;
            /* Lange Komposita wie "Verbraucherstreitbeilegungsgesetz" haben keine
               Umbruchstelle und haben die Seite bei 320 px seitlich aufgedrueckt. */
            overflow-wrap: break-word;
        }

        .legal-article p {
            margin-bottom: var(--s-3);
        }

        .legal-article strong {
            color: var(--clr-text-main);
        }


        .legal-meta {
            margin-bottom: var(--s-4);
            color: var(--clr-text-muted);
            font-size: var(--fs-small);
        }

        .legal-intro {
            margin-bottom: var(--s-5);
        }

        .legal-admin-note {
            margin-bottom: var(--s-5);
            padding: var(--s-3);
            border-left: 2px solid var(--clr-brand);
            color: var(--clr-text-muted);
            font-size: var(--fs-small);
            background-color: rgba(251, 83, 3, 0.05);
        }

        .legal-block {
            margin-bottom: var(--s-5);
        }

        .legal-block:last-child {
            margin-bottom: 0;
        }

        @media (max-width: 768px) {
            .page-header-refined--legal {
                min-height: 17.5rem;
                padding-top: 8.5rem;
                padding-bottom: var(--s-5);
            }
        }

.blog-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--s-5);
            margin-top: var(--s-6);
        }

        .blog-card {
            display: flex;
            flex-direction: column;
            background: transparent;
            text-decoration: none;
            transition: transform var(--t-3) var(--ease-out),
                background-color var(--t-3) var(--ease-out),
                box-shadow var(--t-3) var(--ease-out);
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid var(--clr-border); /* Subtle separator instead of box */
        }

        .blog-card:hover {
            transform: translateY(-8px);
            background-color: var(--clr-surface);
            box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, 0.08);
            border-bottom-color: transparent;
        }

        .blog-card-image {
            width: 100%;
            aspect-ratio: 16/10;
            overflow: hidden;
            background: var(--clr-dark);
        }

        .blog-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform var(--t-4) var(--ease-out),
                filter var(--t-3) ease;
        }

        .blog-card:hover .blog-card-image img {
            transform: scale(1.03);
        }

        .blog-card-content {
            padding: var(--s-5);
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            transition: transform var(--t-3) var(--ease-out);
        }

        .blog-card:hover .blog-card-content {
            /* Optional: subtle content shift like job cards if desired, 
               but maybe just the title is enough */
        }

        .blog-meta {
            display: flex;
            gap: 1rem;
            font-size: var(--fs-meta);
            text-transform: uppercase;
            letter-spacing: var(--track-wide);
            color: var(--clr-brand);
            margin-bottom: 1rem;
            font-weight: var(--fw-bold);
            font-family: var(--font-heading);
        }

        .blog-meta span:last-child {
            color: var(--clr-text-muted);
        }

        .blog-card h3 {
            font-size: 1.65rem;
            font-family: var(--font-heading);
            font-weight: var(--fw-black);
            text-transform: uppercase;
            letter-spacing: 0.02em;
            margin-bottom: var(--s-2);
            color: var(--clr-dark);
            line-height: var(--lh-snug);
            transition: color var(--t-3) var(--ease-out),
                transform var(--t-3) var(--ease-out);
        }

        .blog-card:hover h3 {
            color: var(--clr-brand);
            transform: translateX(0.5rem);
        }

        .blog-card p {
            color: var(--clr-text-muted);
            line-height: var(--lh-body);
            margin-bottom: var(--s-4);
            font-size: var(--fs-body);
            transition: transform var(--t-3) var(--ease-out);
        }

        .blog-card:hover p {
            transform: translateX(0.5rem);
        }

        .blog-card-footer {
            margin-top: auto;
            display: flex;
            align-items: center;
            gap: var(--s-1);
            font-weight: 700;
            font-family: var(--font-heading);
            color: var(--clr-dark);
            font-size: var(--fs-small);
            text-transform: uppercase;
            letter-spacing: var(--track-label);
            transition: transform var(--t-3) var(--ease-out);
        }

        .blog-card:hover .blog-card-footer {
            transform: translateX(0.5rem);
            color: var(--clr-brand);
        }

        .blog-card-footer i,
        .blog-card-footer svg {
            width: 18px;
            height: 18px;
            stroke-width: 3px;
        }

        @media (max-width: 768px) {
            .blog-grid {
                grid-template-columns: 1fr;
            }
        }

/* --- blog-artikel --- */
.article-content {
            padding: var(--section-y) 0;
        }

        .article-grid {
            display: grid;
            grid-template-columns: 1fr 3fr;
            gap: var(--s-7);
        }

        .article-sidebar {
            position: sticky;
            top: 7.5rem;
            height: fit-content;
            padding-top: var(--s-2);
        }

        .author-box {
            padding-top: var(--s-3);
            border-top: 1px solid var(--clr-border);
            margin-top: var(--s-3);
        }

        .author-label {
            font-size: var(--fs-meta);
            text-transform: uppercase;
            letter-spacing: var(--track-label);
            color: var(--clr-brand);
            margin-bottom: var(--s-1);
            font-weight: var(--fw-bold);
            font-family: var(--font-heading);
        }

        .author-name {
            font-size: var(--fs-body);
            font-weight: var(--fw-bold);
            font-family: var(--font-heading);
            color: var(--clr-dark);
        }

        .article-body {
            font-size: var(--fs-lead);
            line-height: var(--lh-prose);
            color: var(--clr-text-muted);
        }

        /* Beitragstitel: größte Überschrift (einzige sinnvolle h1 im Fliesstextbereich) */
        article.article-body h1.article-title,
        .article-body .article-title {
            font-family: var(--font-heading);
            font-weight: var(--fw-black);
            font-size: clamp(2.35rem, 4.75vw, 4rem);
            line-height: var(--lh-snug);
            text-transform: uppercase;
            letter-spacing: 0.02em;
            color: var(--clr-dark);
            margin-top: 0;
            margin-left: 0;
            margin-right: 0;
            margin-bottom: 0 !important;
            padding-bottom: var(--s-3);
            overflow-wrap: break-word;
            hyphens: none;
        }



        /* Hierarchie: Titel > h1 im Text > h2 > h3 > h4 */
        .article-body h1:not(.article-title) {
            font-size: clamp(1.7rem, 3vw, 2.4rem);
            font-family: var(--font-heading);
            font-weight: var(--fw-black);
            color: var(--clr-dark);
            margin: 0 0 var(--s-2);
            line-height: var(--lh-snug);
            overflow-wrap: break-word;
            hyphens: none;
        }

        .article-body h2 {
            font-size: clamp(1.45rem, 2.5vw, 2rem);
            font-family: var(--font-heading);
            font-weight: var(--fw-black);
            color: var(--clr-dark);
            margin: var(--s-5) 0 var(--s-2);
            line-height: var(--lh-snug);
            overflow-wrap: break-word;
            hyphens: none;
        }

        .article-body h2:first-of-type {
            margin-top: 0;
        }

        .article-body h3 {
            font-size: clamp(1.2rem, 2vw, 1.55rem);
            font-family: var(--font-heading);
            font-weight: var(--fw-bold);
            color: var(--clr-dark);
            margin: var(--s-4) 0 var(--s-2);
            line-height: var(--lh-snug);
            overflow-wrap: break-word;
            hyphens: none;
        }

        .article-body h4 {
            font-size: clamp(1.05rem, 1.65vw, 1.25rem);
            font-family: var(--font-heading);
            font-weight: var(--fw-bold);
            color: var(--clr-dark);
            margin: var(--s-3) 0 var(--s-2);
            line-height: var(--lh-snug);
            overflow-wrap: break-word;
            hyphens: none;
        }

        .article-body p {
            margin-bottom: var(--s-2);
        }

        .article-body p:last-child {
            margin-bottom: 0;
        }

        .article-body .detail-list {
            margin-bottom: var(--s-3);
        }

        .article-body p + .detail-list {
            margin-top: var(--s-3);
        }

        .article-section {
            margin-bottom: var(--s-3);
        }

        .article-section:last-child {
            margin-bottom: 0;
        }

        .article-gallery {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--s-3);
            margin-top: var(--s-4);
        }

        .gallery-img-wrapper {
            display: block;
            overflow: hidden;
            aspect-ratio: 4/3;
        }

        /* wpautop fügt oft <br> direkt in Block-HTML; verhindert Leerzeile + sichtbare Lücke */
        .gallery-img-wrapper > br {
            display: none;
        }

        .gallery-img-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform var(--t-4) var(--ease-out);
        }

        .gallery-img-wrapper:hover img {
            transform: scale(1.05);
        }

        .full-width-img {
            grid-column: span 2;
            aspect-ratio: 21/9;
        }

        @media (max-width: 1024px) {
            .article-grid {
                grid-template-columns: 1fr;
                gap: var(--s-6);
            }

            .article-sidebar {
                position: static;
                order: 2;
            }
        }

        .article-not-found {
            padding: var(--s-8) 0;
            text-align: center;
        }

        .article-not-found .btn {
            margin-top: var(--s-4);
        }

        .article-sidebar__back {
            margin-top: var(--s-5);
        }

        /* Leistungsseiten: Verweise auf die weiteren Leistungen in der Randspalte */
        .article-sidebar__links ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: var(--s-3);
        }

        .article-sidebar__links a {
            display: inline-flex;
            align-items: center;
            gap: var(--s-2);
            font-family: var(--font-heading);
            font-weight: var(--fw-bold);
            font-size: var(--fs-body);
            line-height: var(--lh-snug);
            color: var(--clr-dark);
            text-decoration: none;
            transition: color var(--t-2) var(--ease-out),
                transform var(--t-2) var(--ease-out);
        }

        .article-sidebar__links a::after {
            content: '';
            flex: 0 0 auto;
            width: var(--s-3);
            height: 2px;
            background-color: var(--clr-border);
            transition: width var(--t-2) var(--ease-out),
                background-color var(--t-2) var(--ease-out);
        }

        .article-sidebar__links a:hover {
            color: var(--clr-brand);
            transform: translateX(var(--s-1));
        }

        .article-sidebar__links a:hover::after {
            width: var(--s-4);
            background-color: var(--clr-brand);
        }

        /* Leistungsseiten: Brotkrumen im Kopfbereich */
        .breadcrumb {
            font-size: var(--fs-meta);
            font-weight: var(--fw-bold);
            text-transform: uppercase;
            letter-spacing: var(--track-label);
            color: var(--clr-on-dark-muted);
            margin-bottom: var(--s-2);
        }

        .breadcrumb a {
            color: var(--clr-on-dark-muted);
            text-decoration: none;
            transition: color var(--t-2) var(--ease-out);
        }

        .breadcrumb a:hover {
            color: var(--clr-on-dark);
        }

        .breadcrumb .breadcrumb-sep {
            margin: 0 var(--s-1);
            opacity: 0.5;
        }

        /* Leistungsseiten: Inhaltsverzeichnis in der Randspalte */
        .article-sidebar__toc {
            margin-bottom: var(--s-6);
        }

        .article-sidebar__toc ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: var(--s-2);
        }

        .article-sidebar__toc a {
            display: block;
            font-size: var(--fs-small);
            line-height: var(--lh-snug);
            color: var(--clr-text-muted);
            text-decoration: none;
            transition: color var(--t-2) var(--ease-out),
                transform var(--t-2) var(--ease-out);
        }

        .article-sidebar__toc a:hover {
            color: var(--clr-brand);
            transform: translateX(var(--s-1));
        }

/* --- referenzen --- */
.references-intro {
            padding-bottom: 0;
        }

        .gallery-section {
            padding-top: var(--s-4);
            padding-bottom: var(--section-y);
        }

        .dynamic-gallery {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-auto-rows: 15.5rem;
            gap: var(--s-3);
        }

        .gallery-item {
            position: relative;
            overflow: hidden;
            background-color: var(--clr-dark);
        }

        /* scale(1.15): Rand-Puffer für Parallax */
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transform-origin: center center;
            transform: scale(1.15);
            transition: transform 0.1s linear, filter var(--t-4) ease;
            filter: brightness(0.9) grayscale(0.2);
            will-change: transform;
        }

        .gallery-item:hover img {
            filter: brightness(1) grayscale(0);
        }

        /* Varied Spans for the "Interesting" look */
        .span-2-2 {
            grid-column: span 2;
            grid-row: span 2;
        }

        .span-3-2 {
            grid-column: span 3;
            grid-row: span 2;
        }

        .span-2-1 {
            grid-column: span 2;
            grid-row: span 1;
        }

        .span-4-2 {
            grid-column: span 4;
            grid-row: span 2;
        }

        .span-6-2 {
            grid-column: span 6;
            grid-row: span 2;
        }

        /* Entrance animation – once visible, clear the transform completely
           so the item sits exactly where the grid placed it (no footer bleed).
           Nur aktiv, wenn JavaScript läuft (.js), sonst sofort sichtbar. */
        .js .gallery-item.animate-up {
            transform: translateY(1.25rem);
            transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
        }

        .js .gallery-item.animate-up.in-view {
            opacity: 1;
            transform: none;
        }

        @media (max-width: 1024px) {
            .dynamic-gallery {
                grid-template-columns: repeat(6, minmax(0, 1fr));
                grid-auto-rows: 12rem;
            }
        }

        @media (max-width: 768px) {
            .dynamic-gallery {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                grid-auto-rows: auto;
                gap: var(--s-2);
            }

            .dynamic-gallery .gallery-item,
            .dynamic-gallery .span-2-2,
            .dynamic-gallery .span-3-2,
            .dynamic-gallery .span-4-2,
            .dynamic-gallery .span-2-1,
            .dynamic-gallery .span-1-2,
            .dynamic-gallery .span-6-2 {
                grid-column: span 1;
                grid-row: span 1;
                aspect-ratio: 1 / 1;
                min-height: 0;
                width: 100%;
            }

            .dynamic-gallery .gallery-item img {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
            }
        }

        /* Subtle Overlay Decor */
        .gallery-item::after {
            display: none;
            /* Removed orange hover effect */
        }

        .featured-header {
            margin-bottom: var(--s-6);
        }

        .featured-grid {
            margin-bottom: var(--s-5);
        }

        .gallery-divider {
            height: 1px;
            background-color: var(--clr-border);
            margin: var(--s-6) 0;
            position: relative;
        }

        .gallery-divider::after {
            content: 'Weitere Impressionen';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: var(--clr-bg);
            padding: 0 var(--s-4);
            font-family: var(--font-heading);
            font-size: var(--fs-small);
            font-weight: var(--fw-bold);
            text-transform: uppercase;
            letter-spacing: var(--track-label);
            color: var(--clr-brand);
            white-space: nowrap;
        }

        @media (max-width: 480px) {
            .gallery-divider::after {
                content: 'Impressionen';
                padding: 0 var(--s-2);
            }
        }

        .section.featured-projects {
            padding-bottom: var(--s-4);
        }

        .featured-projects .bento-img-container img {
            width: 100%;
            height: 115% !important;
            object-fit: cover;
            position: absolute;
            top: -7.5%;
            left: 0;
            transition: transform 0.1s linear;
            will-change: transform;
        }

        .featured-grid .bento-item:hover .bento-img-container img {
            transform: translateY(var(--parallax-y, 0)) scale(1.05);
        }

        /* Make info always visible for featured projects */
        .featured-projects .bento-info {
            opacity: 1;
            background: linear-gradient(to top, 
                rgba(10, 11, 12, 0.95) 0%, 
                rgba(10, 11, 12, 0.4) 50%, 
                transparent 100%);
        }

        .featured-projects .bento-img-container img {
            opacity: 0.85 !important;
            /* Constant dimmed state as requested */
        }

        /* Reset transforms for featured projects to match active hover state */
        .featured-projects .item-cat,
        .featured-projects .bento-info h4,
        .featured-projects .bento-info p,
        .featured-projects .view-project-link {
            transform: translateY(0) !important;
        }

/* --- karriere --- */
/* Job Section (Refined Architectural Design) */
        .job-section {
            background-color: var(--clr-bg);
            color: var(--clr-dark);
            padding-bottom: var(--section-y);
            position: relative;
        }

        .job-category {
            margin-bottom: var(--s-8);
        }

        .job-category:last-of-type {
            margin-bottom: 0;
        }

        .job-category-title {
            font-size: var(--fs-small);
            font-family: var(--font-heading);
            font-weight: var(--fw-bold);
            text-transform: uppercase;
            margin-bottom: var(--s-5);
            color: var(--clr-brand);
            letter-spacing: 0.22em;
            display: flex;
            align-items: center;
            gap: var(--s-4);
        }

        .job-category-title::after {
            content: '';
            height: 1px;
            flex: 1;
            background-color: var(--clr-border);
        }

        .job-accordion {
            border-top: 1px solid var(--clr-border);
        }

        .job-item {
            border-bottom: 1px solid var(--clr-border);
            transition: transform var(--t-3) var(--ease-out),
                box-shadow var(--t-3) var(--ease-out),
                background-color var(--t-3) var(--ease-out),
                border-color var(--t-3) var(--ease-out);
            position: relative;
            background-color: transparent;
            padding: 0 var(--s-5);
        }

        .job-header {
            width: 100%;
            display: grid;
            grid-template-columns: 3.75rem 1fr 2.5rem;
            align-items: start;
            padding: 4.5rem 0;
            cursor: pointer;
            background: none;
            border: none;
            text-align: left;
            transition: transform var(--t-3) var(--ease-out),
                padding var(--t-3) var(--ease-out),
                border-color var(--t-3) var(--ease-out);
        }

        .job-index {
            font-family: var(--font-heading);
            font-size: var(--fs-small);
            font-weight: var(--fw-bold);
            color: var(--clr-brand);
            opacity: 0.6;
            margin-top: 0.7rem;
            transition: opacity var(--t-2) ease,
                transform var(--t-2) ease;
        }

        .job-title {
            font-size: var(--fs-heading);
            font-family: var(--font-heading);
            font-weight: var(--fw-black);
            text-transform: uppercase;
            letter-spacing: 0.02em;
            color: var(--clr-dark);
            margin: 0;
            transition: color var(--t-3) var(--ease-out),
                transform var(--t-3) var(--ease-out);
        }

        .job-title-wrapper {
            /* min-width: 0 erlaubt der 1fr-Spalte, unter die Mindestbreite des Titels zu
               schrumpfen. Ohne das zwingt der min-content langer Titel ("Hochbaufacharbeiter")
               das Grid auf und der +/-Button in der festen 40px-Spalte laeuft aus dem
               Container, was auf schmalen Displays zu horizontalem Scrollen fuehrt. */
            min-width: 0;
            transition: transform var(--t-3) var(--ease-out);
        }

        .job-meta-grid {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: var(--s-4);
            margin-top: 1.25rem;
            transition: gap var(--t-3) var(--ease-out),
                margin-top var(--t-3) var(--ease-out);
        }

        .job-meta-item {
            font-size: var(--fs-meta);
            font-weight: var(--fw-bold);
            text-transform: uppercase;
            letter-spacing: var(--track-label);
            color: var(--clr-text-muted);
            font-family: var(--font-heading);
            display: flex;
            align-items: center;
            gap: var(--s-1);
        }

        .job-meta-item i {
            width: var(--fs-small);
            height: var(--fs-small);
            color: var(--clr-brand);
            stroke-width: 2.5;
        }

        .job-icon {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-top: 0.7rem;
        }

        .plus-toggle {
            width: 1.25rem;
            height: 1.25rem;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform var(--t-3) var(--ease-out);
        }

        .plus-toggle span {
            position: absolute;
            background-color: var(--clr-dark);
            transition: background-color var(--t-3) var(--ease-out),
                transform var(--t-3) var(--ease-out);
            border-radius: 2px;
        }

        /* Horizontal bar */
        .plus-toggle span:first-child {
            width: 100%;
            height: 2px;
        }

        /* Vertical bar */
        .plus-toggle span:last-child {
            width: 2px;
            height: 100%;
        }

        /* Hover States */
        @media (min-width: 769px) {
            .job-item:hover {
                background-color: var(--clr-surface);
                box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, 0.05);
                z-index: 10;
            }

            .job-item:hover .job-index {
                opacity: 1;
                transform: translateX(0.5rem);
            }

            .job-item:hover .job-title-wrapper {
                transform: translateX(1rem);
            }

            .job-item:hover .job-title {
                color: var(--clr-brand);
            }

            .job-item:hover .plus-toggle span {
                background-color: var(--clr-brand);
            }
        }

        /* Active State */
        .job-item.active {
            background-color: var(--clr-surface);
            box-shadow: 0 3.75rem 7.5rem rgba(0, 0, 0, 0.08);
            border-bottom-color: transparent;
            z-index: 20;
        }

        .job-item.active:not(:last-child) {
            margin-bottom: var(--s-2);
        }

        /* Ensure the next item has a top border when the previous one is active/floating */
        .job-item.active + .job-item {
            border-top: 1px solid var(--clr-border);
        }

        .job-item.active .job-header {
            padding-bottom: var(--s-4);
            border-bottom: 1px solid var(--clr-border);
        }

        .job-item.active .job-title {
            color: var(--clr-brand);
        }

        .job-item.active .plus-toggle {
            transform: rotate(180deg);
        }

        .job-item.active .plus-toggle span {
            background-color: var(--clr-brand);
        }

        .job-item.active .plus-toggle span:last-child {
            transform: rotate(90deg);
        }

        .job-content {
            height: 0;
            overflow: hidden;
            transition: height 0.45s var(--ease-out),
                opacity var(--t-2) var(--ease-out);
            opacity: 0;
        }

        .job-item.active .job-content {
            opacity: 1;
            /* height is managed by JS */
        }

        /* FAQ-Accordion (Leistungs-Detailseiten) — visuell am Job-Accordion orientiert */
        .faq-accordion {
            border-top: 1px solid var(--clr-border);
            margin-top: var(--s-4);
        }

        .faq-item {
            position: relative;
            padding: 0 var(--s-2);
            border-bottom: 1px solid var(--clr-border);
            background-color: transparent;
            transition: background-color var(--t-3) var(--ease-out),
                box-shadow var(--t-3) var(--ease-out),
                border-color var(--t-3) var(--ease-out);
        }

        .faq-header {
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 2.5rem;
            gap: var(--s-2);
            align-items: center;
            padding: var(--s-3) 0;
            cursor: pointer;
            background: none;
            border: none;
            text-align: left;
        }

        h3.faq-question {
            font-family: var(--font-heading);
            font-size: clamp(1.1rem, 1.9vw, 1.35rem);
            font-weight: var(--fw-bold);
            line-height: var(--lh-snug);
            color: var(--clr-dark);
            margin: 0;
            transition: color var(--t-3) var(--ease-out);
        }

        .faq-item:hover .faq-question,
        .faq-item.active .faq-question {
            color: var(--clr-brand);
        }

        .faq-item.active {
            background-color: var(--clr-surface);
            box-shadow: 0 3.75rem 7.5rem rgba(0, 0, 0, 0.08);
            border-bottom-color: transparent;
            z-index: 20;
        }

        .faq-item.active + .faq-item {
            border-top: 1px solid var(--clr-border);
        }

        .faq-item.active .faq-header {
            border-bottom: 1px solid var(--clr-border);
        }

        .faq-item.active .plus-toggle {
            transform: rotate(180deg);
        }

        .faq-item.active .plus-toggle span {
            background-color: var(--clr-brand);
        }

        .faq-item.active .plus-toggle span:last-child {
            transform: rotate(90deg);
        }

        .faq-item:hover .plus-toggle span {
            background-color: var(--clr-brand);
        }

        .faq-content {
            height: 0;
            overflow: hidden;
            opacity: 0;
            transition: height 0.45s var(--ease-out),
                opacity 0.3s var(--ease-out);
        }

        .faq-item.active .faq-content {
            opacity: 1;
        }

        .faq-content-inner {
            padding: var(--s-2) 0 var(--s-3);
        }

        .faq-content-inner p {
            margin: 0;
        }

        .job-content-inner {
            display: block;
            padding: var(--s-5) 0 var(--s-7);
            position: relative;
        }

        .job-main-info {
            display: flex;
            flex-direction: column;
            gap: var(--s-6);
            max-width: 100%;
        }

        .job-intro-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--s-6);
            align-items: flex-start;
        }

        .job-intro-text {
            grid-column: span 2;
            font-size: var(--fs-lead);
            line-height: var(--lh-prose);
            color: var(--clr-text-main);
            font-weight: var(--fw-body);
            max-width: 100%;
            margin-bottom: 0;
        }

        @media (max-width: 1024px) {
            .job-intro-row {
                grid-template-columns: 1fr 1fr;
            }

            .job-intro-text {
                grid-column: 1;
            }
        }

        @media (max-width: 768px) {
            .job-intro-row {
                display: flex;
                flex-direction: column;
                gap: var(--s-4);
            }
        }

        .job-details-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--s-6) var(--s-6);
        }

        .detail-block {
            display: flex;
            flex-direction: column;
            gap: var(--s-3);
            transition: transform 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
            opacity: 0;
            transform: translateY(var(--fs-meta));
        }

        .job-item.active .detail-block {
            opacity: 1;
            transform: translateY(0);
        }

        .job-item.active .detail-block:nth-child(1) {
            transition-delay: 0.05s;
        }

        .job-item.active .detail-block:nth-child(2) {
            transition-delay: 0.1s;
        }

        .job-item.active .detail-block:nth-child(3) {
            transition-delay: 0.15s;
        }

        .detail-block-title {
            font-family: var(--font-heading);
            font-size: var(--fs-small);
            font-weight: var(--fw-bold);
            text-transform: uppercase;
            letter-spacing: var(--track-label);
            color: var(--clr-brand);
            display: flex;
            align-items: center;
            gap: var(--s-3);
            padding-bottom: var(--s-3);
            border-bottom: 2px solid var(--clr-border);
            position: relative;
        }

        .detail-block-title::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: var(--s-6);
            height: 2px;
            background-color: var(--clr-brand);
            z-index: 1;
        }

        .detail-block-title i {
            width: 1.125rem;
            height: 1.125rem;
            stroke-width: 2.5;
            color: var(--clr-brand);
        }

        /* Nur Karriere-Akkordeon: Einträge erst sichtbar wenn .job-item aktiv */
        .job-item .detail-list li {
            opacity: 0;
            transform: translateX(calc(-1 * var(--fs-meta)));
        }

        .job-item.active .detail-list li {
            opacity: 1;
            transform: translateX(0);
        }

        /* Ensure hover shift works in active accordion */
        .job-item.active .detail-list li:hover {
            transform: translateX(8px);
        }

        .job-item.active .detail-list li:nth-child(1) {
            transition-delay: 0.1s;
        }

        .job-item.active .detail-list li:nth-child(2) {
            transition-delay: 0.15s;
        }

        .job-item.active .detail-list li:nth-child(3) {
            transition-delay: 0.2s;
        }

        .job-item.active .detail-list li:nth-child(4) {
            transition-delay: 0.25s;
        }

        .job-item.active .detail-list li:nth-child(5) {
            transition-delay: 0.3s;
        }

        .job-item.active .detail-list li:nth-child(6) {
            transition-delay: 0.35s;
        }

        .job-item.active .detail-list li:nth-child(7) {
            transition-delay: 0.4s;
        }

        .job-item.active .detail-list li:nth-child(8) {
            transition-delay: 0.45s;
        }

        /* Reset transition-delay for hover state to ensure instant reaction */
        .job-item.active .detail-list li:hover {
            transition-delay: 0s !important;
            transform: translateX(8px);
        }



        @media (max-width: 1024px) {
            .job-details-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 768px) {
            .job-header {
                grid-template-columns: 1fr 40px;
                grid-template-rows: auto auto;
                padding: var(--s-5) 0;
            }

            .job-index {
                grid-column: 1;
                grid-row: 1;
                margin-top: 0;
                margin-bottom: 0.5rem;
                opacity: 0.8;
            }

            .job-title-wrapper {
                grid-column: 1;
                grid-row: 2;
            }

            .job-icon {
                grid-column: 2;
                grid-row: 1 / span 2;
                align-self: center;
                margin-top: 0;
            }

            .job-meta-grid {
                margin-top: var(--s-2);
                gap: var(--s-3);
            }

            .job-title {
                font-size: var(--fs-heading);
            }
        }

        @media (max-width: 1200px) {
            .job-content-inner {
                gap: var(--s-6);
            }

            .job-perks-box {
                position: static;
                padding: var(--s-5);
            }
        }

        @media (max-width: 1024px) {
            .intro-grid {
                grid-template-columns: 1fr;
                gap: var(--s-4);
            }

            .job-content-inner {
                padding-left: 0;
            }
        }

        @media (max-width: 768px) {
            .job-item {
                padding: 0 var(--s-3);
            }

            .job-content-inner {
                gap: var(--s-5);
                padding-top: var(--s-5);
            }

            .job-details-grid {
                grid-template-columns: 1fr;
            }

            /* Der Header ist ein Grid aus "1fr 40px"; "1fr" kann nicht unter die
               Mindestbreite des Titels schrumpfen. Reicht die Spalte fuer einen langen
               Titel nicht, greift die Silbentrennung aus der Basisregel .job-title. */
            .job-title {
                font-size: var(--fs-heading);
            }

            .job-index {
                display: block;
            }
        }

/* --- projekt --- */
.project-details {
            padding: var(--section-y) 0;
        }

        .project-header-meta {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: var(--s-7);
            margin-bottom: var(--s-6);
            padding-bottom: var(--s-4);
            border-bottom: 1px solid var(--clr-border);
        }

        .meta-group-secondary {
            display: grid;
            /* minmax(0, 1fr): "1fr" kann nicht unter die Mindestbreite des Inhalts
               schrumpfen. Ein langes Kompositum ohne Umbruchstelle wie
               "Mauerwerkssanierung" hat die Projektseite Schloss Eutin deshalb auf
               jeder Handybreite seitlich aufgedrueckt (bis 124 px Ueberlauf). */
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--s-4);
        }

        .meta-item .label {
            display: block;
            font-size: var(--fs-meta);
            text-transform: uppercase;
            letter-spacing: var(--track-label);
            color: var(--clr-brand);
            margin-bottom: var(--s-1);
            font-weight: var(--fw-bold);
            font-family: var(--font-heading);
        }

        .meta-item .value {
            font-size: 1.25rem;
            font-weight: 700;
            font-family: var(--font-heading);
            color: var(--clr-dark);
            overflow-wrap: break-word;
        }

        .project-content-grid {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: var(--s-7);
            margin-bottom: var(--s-7);
        }

        .project-description h3 {
            font-size: var(--fs-heading);
            font-family: var(--font-heading);
            font-weight: var(--fw-black);
            margin-bottom: var(--s-3);
            color: var(--clr-dark);
        }

        .project-description p {
            color: var(--clr-text-muted);
            font-size: var(--fs-body);
            line-height: var(--lh-prose);
            margin-bottom: var(--s-3);
        }

        .project-gallery {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--s-3);
        }

        .project-gallery .gallery-img-wrapper {
            background-color: var(--clr-dark);
        }

        @media (max-width: 1024px) {
            .project-content-grid {
                grid-template-columns: 1fr;
                gap: var(--s-6);
            }

            .project-header-meta {
                grid-template-columns: 1fr;
                gap: var(--s-3);
            }
        }

        /* 404-style error if project not found */
        .project-not-found {
            min-height: 70vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: var(--s-3);
            padding: var(--section-y) 0;
        }

        .project-not-found__lead {
            color: var(--clr-text-muted);
            font-size: var(--fs-body);
        }

        .project-description__cta {
            margin-top: var(--s-5);
        }

/* ===== Über uns: Bilder aus der Geschichte ===== */
.company-historie-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5);
}

.company-historie-grid figure {
    margin: 0;
}

.company-historie-grid img {
    width: 100%;
    height: 30rem;
    object-fit: cover;
    display: block;
}

.company-historie-grid figcaption {
    margin-top: 0.75rem;
    font-size: var(--fs-small);
    color: var(--clr-text-muted);
}

@media (max-width: 768px) {
    .company-historie-grid {
        grid-template-columns: 1fr;
    }
    .company-historie-grid img {
        height: 20rem;
    }
}

/* ===== Karriere: Quereinsteiger-Hinweis ===== */
.job-invite {
    max-width: 48rem;
    margin: 0 auto var(--s-6);
    text-align: center;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--clr-text-muted);
}

/* ===== Über uns: Geschäftsführer-Profil ===== */
.team-profile {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--s-6);
    align-items: center;
    margin-top: var(--s-6);
}

.team-profile-media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.team-profile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.team-profile-body .member-role {
    display: block;
    font-size: var(--fs-meta);
    color: var(--clr-brand);
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.team-profile-name {
    font-family: var(--font-heading);
    font-size: var(--fs-heading);
    color: var(--clr-text-main);
    font-weight: var(--fw-black);
    margin: 0 0 var(--s-3);
}

.team-profile-text {
    font-size: var(--fs-body);
    line-height: 1.7;
    color: var(--clr-text-muted);
    max-width: 40rem;
}

.team-profile-body .member-task-list {
    margin-top: var(--s-5);
}

.team-profile-body .member-task-list li {
    font-size: var(--fs-body);
    color: var(--clr-text-muted);
    margin-bottom: var(--s-2);
    padding-left: var(--s-4);
}

@media (max-width: 900px) {
    .team-profile {
        grid-template-columns: 1fr;
        gap: var(--s-5);
    }
    .team-profile-media {
        max-width: 22rem;
    }
}

/* ===== Über uns: Timeline mit Urkunde daneben ===== */
.timeline-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-7);
    align-items: start;
}

.timeline-split .timeline-container {
    max-width: none;
    margin-top: var(--s-6);
}

.timeline-figure {
    margin: var(--s-6) 0 0;
}

.timeline-figure img {
    width: 100%;
    height: auto;
    display: block;
}

.timeline-figure figcaption {
    margin-top: 0.75rem;
    font-size: var(--fs-small);
    color: var(--clr-on-dark-dim);
}

.company-historie-grid figure:only-child {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .timeline-split {
        grid-template-columns: 1fr;
        gap: var(--s-6);
    }
}