/* All Styles Merged - Generated on Fr 4. Jul 18:45:00 CEST 2025 */

/* CSS Variables */
/* --- Hausschrift ---------------------------------------------------------
   Arimo, dieselbe Schrift wie die Zusaetze "Engineering / Systems /
   Technology" im Logo. Sie liegt unter assets/fonts/ auf dem eigenen
   Server: eine Einbindung ueber fonts.googleapis.com wuerde bei jedem
   Seitenaufruf die IP-Adresse des Besuchers dorthin schicken - dasselbe,
   was beim eingebetteten Video mit der Nachfrage vor dem Laden vermieden
   wird.

   Es sind Fassungen mit veraenderlicher Strichstaerke (400 bis 700), eine
   Datei deckt also alle Schnitte ab. Die unicode-range-Angaben sorgen
   dafuer, dass der Browser die osteuropaeische Fassung nur laedt, wenn ein
   Zeichen daraus tatsaechlich vorkommt.

   font-display: swap zeigt den Text sofort in der Rueckfallschrift und
   tauscht sie aus, sobald die Datei da ist - Arimo ist metrisch mit Arial
   vertraeglich, es verrutscht dabei nichts. */

@font-face {
    font-family: 'Arimo';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/arimo-latin-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Arimo';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/arimo-latin-ext-italic.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Arimo';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/arimo-latin-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Arimo';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/arimo-latin-ext-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Umbruchpunkte: 480 · 768 · 1024 · 1280
   Mehr gibt es nicht. Vorher standen hier sechs Werte (420, 768, 992, 1024,
   1025, 1100), teils ein Pixel auseinander - eine Aenderung musste dann an
   mehreren Stellen nachgezogen werden. 1024 und 1025 sind derselbe Punkt,
   einmal von unten und einmal von oben angesprochen. */

:root {
    /* --- Farben ---------------------------------------------------------
       Alle Farbwerte der Website stehen hier und nur hier. Wer einen Wert
       aendern will, aendert ihn an dieser Stelle; im uebrigen Stylesheet
       steht kein einziger Farbwert mehr frei. */
    --primary: #232323;
    --secondary: #F15A22;
    /* Dunklere Fassung von --secondary fuer Zeigezustaende. Stand vorher
       zweimal frei im Stylesheet - einmal als #d83d09, einmal als #004494,
       ein Blau aus dem alten Zeichen. */
    --secondary-dunkel: #D83D09;
    --light: #f8f9fa;
    --light-gray: #e9ecef;
    --dark: #343a40;
    --gray: #6c757d;
    /* Hervorhebung der Suchtreffer im Text */
    --markierung: #fdf0c8;

    /* Dieselben Farben als Kanalwerte. Aus einem Hexwert laesst sich in CSS
       keine halbdurchsichtige Fassung ableiten - ohne diese Zeilen muesste
       jede rgba()-Angabe den Farbwert erneut ausschreiben und liefe beim
       naechsten Farbwechsel aus dem Ruder. */
    --primary-rgb: 35, 35, 35;
    --secondary-rgb: 241, 90, 34;

    /* --- Schriftgrößen ---------------------------------------------------
       Acht Stufen. Vorher standen hier 25 einzeln gewählte Werte, von
       0.78rem bis 3rem, ohne erkennbaren Abstand zueinander. */
    --schrift-xs: 0.8125rem;      /* 13 px */
    --schrift-sm: 0.9375rem;      /* 15 px */
    --schrift-base: 1rem;         /* 16 px */
    --schrift-md: 1.125rem;       /* 18 px */
    --schrift-lg: 1.375rem;       /* 22 px */
    --schrift-xl: 1.75rem;        /* 28 px */
    --schrift-xxl: 2.25rem;       /* 36 px */
    --schrift-xxxl: 3rem;         /* 48 px */

    /* Die Ueberschrift im Kopfbereich ist keine Textgroesse, sondern eine
       Schaugroesse - sie waechst mit dem Fenster statt an Umbruchpunkten zu
       springen. Die acht Stufen sind dafuer zu grob: zwischen 2,25 und 3 rem
       liegt nichts, und bei 2,25 rem wirkte der Titel auf Tablet und Handy zu
       klein. Unter- und Obergrenze sind genau die Werte, die vorher an den
       Umbruchpunkten standen. */
    --schrift-hero: clamp(2.5rem, 0.84rem + 3.45vw, 3rem);

    /* --- Formen ---------------------------------------------------------- */
    --border-radius: 4px;
    --radius-klein: 2px;   /* Hamburger-Striche, kleine Marker */
    --radius-pille: 999px; /* Filter, Schlagwörter, Abzeichen */

    /* Schatten: drei Stufen für die ganze Website. Daneben standen vorher
       drei weitere freistehende Fassungen mit leicht abweichenden Werten. */
    --card-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    --card-shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.09);
    --schatten-leiste: 0 2px 10px rgba(0, 0, 0, 0.1);

    /* Abdunklung über Bildern im Aufruf-Bereich - dasselbe wie
       --hero-overlay, nur an anderer Stelle und deshalb eigener Name */
    --bild-schleier: rgba(0, 0, 0, 0.8);

    /* Abdunklung der Kopfbilder – identisch für alle Viewports.
       Der Wert kommt aus dem Panel (Einstellungen -> Darstellung) und wird
       in snippets/header.php als Inline-Style überschrieben; dieser Wert
       hier ist nur der Fallback. */
    --hero-overlay: rgba(0, 0, 0, 0.6);

    /* Höhe der klebenden Kopfleiste: Logo (50 px, siehe .logo img) plus
       Innenabstand der Navigation. Wird für Sprungziele gebraucht – siehe
       section[id] weiter unten. Ändert sich die Logohöhe, muss dieser Wert
       mitwandern. */
    --kopfhoehe: 90px;
}

/* Kopfbereiche: ein gemeinsames Overlay, je Viewport nur ein anderes Bild.
   Vorher war die Abdunklung pro Breakpoint unterschiedlich definiert. */
.hero,
.page-hero,
.services-hero,
.contact-hero,
.product-hero {
    --hero-image: var(--hero-bg-desktop, none);
    background-image: linear-gradient(var(--hero-overlay), var(--hero-overlay)), var(--hero-image);
}

/* Global Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arimo', Arial, 'Helvetica Neue', Helvetica, sans-serif;
    line-height: 1.6;
    color: var(--dark);
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Header Styles */
header {
    background-color: #fff;
    box-shadow: var(--schatten-leiste);
    position: sticky;
    top: 0;
    z-index: 1000;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    position: relative;
}

/* Sprungziele. Der Kopf klebt oben, ein #anker scrollt den Abschnitt aber
   an den Fensterrand – die ersten 90 px lägen also hinter der Leiste, und
   genau dort steht die Überschrift des Abschnitts. Der Zuschlag von 1.5rem
   hält den Abschnitt zusätzlich von der Kante weg. */
section[id] {
    scroll-margin-top: calc(var(--kopfhoehe) + 1.5rem);
}

.logo img {
    height: 50px;
}

/* Mobile menu toggle button */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    z-index: 1001;
}

.hamburger-line {
    width: 25px;
    height: 3px;
    background-color: var(--dark);
    margin: 3px 0;
    transition: all 0.3s ease;
    border-radius: var(--radius-klein);
}

/* Hamburger animation when active */
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Navigation container */
.nav-container {
    display: flex;
    align-items: center;
    gap: 3rem;
    position: static;
}

.nav-links {
    display: flex;
    list-style: none;
    align-items: center;
}

.nav-links li {
    margin: 0 0.5rem;
}

.nav-links li:last-child {
    margin-left: 2rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--dark);
    font-weight: 500;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--secondary);
}

.btn-kontakt {
    background-color: var(--secondary);
    color: white !important;
    padding: 8px 20px;
    border-radius: var(--border-radius);
    transition: background-color 0.3s;
}

.btn-kontakt:hover {
    background-color: var(--secondary-dunkel);
}

.language-selector {
    display: flex;
    align-items: center;
}

.language-selector a {
    margin-left: 10px;
    text-decoration: none;
    color: var(--gray);
}

.language-selector a.active {
    color: var(--dark);
    font-weight: 600;
}

/* Responsive Header Styles
   Umschaltpunkt auf das Vollbildmenü: Die Leiste braucht mit Logo, sechs
   Menüpunkten, Lupe und Sprachauswahl rund 1030 px – darunter wird es
   selbst in der kompakten Stufe (siehe unten) zu eng. */
@media (max-width: 1024px) {
    .mobile-menu-toggle {
        display: flex;
    }

    .nav-container {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        transition: left 0.3s ease;
        z-index: 999;
    }

    .nav-container.active {
        left: 0;
    }

    .nav-links {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .nav-links li {
        margin: 0;
    }

    .nav-links li:last-child {
        margin-left: 0;
        margin-top: 1.5rem;
    }

    .nav-links a {
        font-size: var(--schrift-md);
        padding: 1rem 2rem;
        display: block;
        border-radius: var(--border-radius);
        transition: all 0.3s;
    }

    /* Ohne die Ausnahme trifft diese Regel auch die Kontakt-Schaltflaeche:
       ihr Orange wurde beim Ueberfahren durch Hellgrau ersetzt, und die
       weisse Schrift stand dann auf hellgrauem Grund - praktisch unsichtbar. */
    .nav-links a:not(.btn-kontakt):hover {
        background-color: var(--light);
    }

    .nav-links .btn-kontakt:hover {
        background-color: var(--secondary-dunkel);
    }

    .btn-kontakt {
        padding: 1rem 2rem;
        font-size: var(--schrift-md);
    }

    .language-selector {
        gap: 1rem;
        margin-top: 2rem;
    }

    .language-selector a {
        margin: 0;
        padding: 0;
        background: none;
        border-radius: 0;
        font-size: var(--schrift-md);
        transition: color 0.3s;
    }

    .language-selector a:hover {
        background-color: transparent;
        color: var(--secondary);
    }

    .language-selector a.active {
        background-color: transparent;
        color: var(--dark);
        font-weight: 600;
    }
}

/* Kompakte Stufe für schmale Desktops/Tablets im Querformat */
@media (max-width: 1280px) and (min-width: 1025px) {
    .nav-container {
        gap: 1.5rem;
    }

    .nav-links li {
        margin: 0 0.3rem;
    }

    .nav-links li:last-child {
        margin-left: 1rem;
    }

    .nav-links a {
        font-size: var(--schrift-sm);
    }

    .btn-kontakt {
        padding: 6px 14px;
        font-size: var(--schrift-sm);
    }

    .logo img {
        height: 44px;
    }
}

/* Global Button Styles */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-primary {
    background-color: var(--secondary);
    color: white;
    border: none;
}

.btn-primary:hover {
    background-color: var(--secondary-dunkel);
}

.btn-outline {
    display: inline-block;
    padding: 8px 20px;
    border: 2px solid var(--secondary);
    color: var(--secondary);
    background-color: transparent;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    cursor: pointer;
}

.btn-outline:hover {
    background-color: var(--secondary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(var(--secondary-rgb), 0.3);
}

/* Global Section Styles */
.section-title {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title h2 {
    font-size: var(--schrift-xxl);
    /* Platz für die Dekorationslinie (10 px unterhalb der Überschrift)
       plus Abstand zum folgenden Text – vorher lag der Text direkt auf
       der Linie. */
    margin-bottom: 1.75rem;
    position: relative;
    display: inline-block;
}

.section-title h2::after {
    content: '';
    width: 80px;
    height: 3px;
    background-color: var(--secondary);
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}

.section-title p {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* Global Page Hero Component */
.page-hero {
    padding: 5rem 0;
    background-color: var(--primary); /* Farbe, falls kein Bild geladen ist */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    color: white;
    text-align: center;
}

.page-hero .hero-content h1 {
    font-size: var(--schrift-xxxl);
    margin-bottom: 1.5rem;
}

.page-hero .hero-content p {
    font-size: var(--schrift-md);
    max-width: 800px;
    margin: 0 auto 2rem;
}

/* Specific hero classes for different pages */
.services-hero,
.contact-hero {
    padding: 5rem 0;
    background-color: var(--primary); /* Farbe, falls kein Bild geladen ist */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    color: white;
    text-align: center;
}

.services-hero h1,
.contact-hero h1 {
    font-size: var(--schrift-xxxl);
    margin-bottom: 1rem;
}

.services-hero p,
.contact-hero p {
    font-size: var(--schrift-md);
    max-width: 800px;
    margin: 0 auto 2rem;
}

.product-hero {
    /* Bei Referenzprojekten ist das Anlagenbild das stärkste Argument –
       der Kopfbereich bekommt deshalb mehr Höhe als ein reines Textband,
       bleibt aber deutlich flacher als der Hero der Startseite.
       Feste Höhe statt vh: unabhängig von der Fensterhöhe. */
    padding: 5rem 0;
    min-height: 460px;
    background-color: var(--primary); /* Farbe, falls kein Bild geladen ist */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
}

.product-hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.product-hero h1 {
    font-size: var(--schrift-xxxl);
    margin-bottom: 1.5rem;
}

.product-hero p {
    font-size: var(--schrift-md);
    max-width: 800px;
    margin: 0 auto 2rem;
}

/* Footer */
footer {
    background-color: var(--dark);
    color: white;
    padding: 4rem 0 2rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.footer-column h3 {
    margin-bottom: 1.5rem;
    position: relative;
}

.footer-column h3::after {
    content: '';
    width: 40px;
    height: 2px;
    background-color: var(--secondary);
    position: absolute;
    bottom: -10px;
    left: 0;
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column a {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-column a:hover {
    color: white;
}

.footer-bottom {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    display: flex;
    width: 36px;
    height: 36px;
    background-color: rgba(255,255,255,0.1);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    color: rgba(255,255,255,0.8);
}

.social-icons a:hover {
    background-color: var(--secondary);
    color: white;
}

.social-icons svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Breadcrumb */
.breadcrumb {
    padding: 1rem 0;
    background-color: var(--light);
}

.breadcrumb ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li:not(:last-child)::after {
    content: '/';
    margin: 0 0.5rem;
    color: var(--gray);
}

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

.breadcrumb a:hover {
    color: var(--secondary);
}

.breadcrumb .current {
    color: var(--dark);
    font-weight: 500;
}

/* ===== HOMEPAGE STYLES ===== */

/* Homepage Hero Section - different from other pages */
.hero {
    height: 80vh;
    /* explizit, damit der Grundabstand aus "main > section" hier nicht greift */
    padding: 0;
    background-color: var(--primary); /* Farbe, falls kein Bild geladen ist */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    display: flex;
    align-items: center;
    color: white;
    position: relative;
}

.hero-content {
    max-width: 800px;
}

.hero h1 {
    font-size: var(--schrift-hero);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero p {
    font-size: var(--schrift-md);
    margin-bottom: 2rem;
}

.hero-buttons {
    display: flex;
    gap: 15px;
}

/* Homepage specific button variations */
.hero .btn-outline {
    border: 2px solid white;
    color: white;
}

.hero .btn-outline:hover {
    background-color: white;
    color: var(--dark);
}

/* About Section - Homepage only */
.about {
    padding: 5rem 0;
    background-color: var(--light);
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
}

.about-text h3 {
    font-size: var(--schrift-xl);
    margin-bottom: 1rem;
}

.about-text p {
    margin-bottom: 1.5rem;
}

.about-image {
    width: 100%;
    height: 100%;
    max-height: 400px;
    overflow: hidden;
    border-radius: var(--border-radius);
}

.about-image img {
    width: 100%;
    height: 100%;
    max-height: 400px;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Services Section - Homepage only */
.services {
    padding: 5rem 0;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.service-card {
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
}

/* als <a> ausgegeben – führt zum selben Ziel wie "Mehr erfahren" */
.service-img {
    display: block;
    height: 200px;
    overflow: hidden;
}

.service-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.service-card:hover .service-img img {
    transform: scale(1.05);
}

.service-content {
    padding: 20px;
}

.service-content h3 {
    margin-bottom: 10px;
}

.service-content p {
    margin-bottom: 15px;
    color: var(--gray);
}

.read-more {
    display: inline-block;
    color: var(--secondary);
    text-decoration: none;
    font-weight: 500;
}

/* Projects Section - Homepage only */
.projects {
    padding: 5rem 0;
    background-color: var(--light);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.project-card {
    position: relative;
    height: 300px;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.project-img {
    width: 100%;
    height: 100%;
}

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

.project-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.7);
    padding: 20px;
    transform: translateY(100%);
    transition: transform 0.3s;
}

.project-card:hover .project-overlay {
    transform: translateY(0);
}

.project-overlay h3 {
    color: white;
    margin-bottom: 10px;
}

.project-overlay p {
    color: rgba(255,255,255,0.8);
    margin-bottom: 15px;
}

.view-all-btn {
    text-align: center;
    margin-top: 3rem;
}

/* CTA Section - Homepage only */
.cta {
    padding: 5rem 0;
    background: linear-gradient(var(--bild-schleier), var(--bild-schleier)), var(--hero-bg-desktop, none) center/cover no-repeat;
    color: white;
    text-align: center;
}

.cta h2 {
    font-size: var(--schrift-xxl);
    margin-bottom: 1.5rem;
}

.cta p {
    font-size: var(--schrift-md);
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Partners Section - Homepage only */
.partners {
    padding: 5rem 0;
}

.partners-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    align-items: stretch;
}

/* Partnerkarte: Logo oben, darunter Name, Beschreibung und Link */
.partner-card {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    background-color: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.3s, transform 0.3s;
}

.partner-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
}

.partner-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 72px;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--light-gray);
}

/* Logos unterschiedlicher Seitenverhältnisse auf gleiche optische Größe
   bringen: begrenzte Höhe, Breite folgt dem Original */
.partner-logo img {
    max-height: 56px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.partner-name {
    font-size: var(--schrift-md);
    font-weight: 600;
    color: var(--primary);
}

.partner-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.partner-content h3 {
    margin-bottom: 0.6rem;
    font-size: var(--schrift-md);
    line-height: 1.35;
}

.partner-content p {
    margin-bottom: 1.25rem;
    color: var(--gray);
}

/* Link sitzt immer am unteren Kartenrand, auch bei ungleich langen Texten */
.partner-link {
    margin-top: auto;
    align-self: flex-start;
    color: var(--secondary);
    font-weight: 600;
    text-decoration: none;
}

.partner-link::after {
    content: ' ›';
}

.partner-link:hover {
    text-decoration: underline;
}

.partner-item img {
    max-width: 100%;
    height: 60px;
    object-fit: contain;
}

/* ===== SERVICES PAGE STYLES ===== */

/* Services Overview */
.services-overview {
    padding: 5rem 0;
}

/* Fließtext linksbündig: zentrierter Mehrzeilentext liest sich schlecht und
   Aufzählungen stehen sonst neben ihren Punkten. Zentriert bleibt nur die
   kurze Einleitung der Leistungsübersicht. */
.overview-text {
    text-align: left;
    max-width: 900px;
    margin: 0 auto 3rem;
}

.services-overview > .container > .overview-text {
    text-align: center;
}

/* Main Service Categories */
.service-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 4rem;
    justify-content: center;
}

.category-card {
    width: calc(33.333% - 20px);
    max-width: 400px;
    background-color: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s, box-shadow 0.3s;
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
}

/* als <a> ausgegeben – führt zum selben Ziel wie "Mehr erfahren" */
.category-img {
    display: block;
    height: 200px;
    overflow: hidden;
}

.category-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.category-card:hover .category-img img {
    transform: scale(1.05);
}

.category-content {
    padding: 1.5rem;
}

.category-title {
    font-size: var(--schrift-lg);
    margin-bottom: 1rem;
    color: var(--secondary);
}

.category-description {
    margin-bottom: 1.5rem;
}

.category-items {
    list-style: none;
    margin-bottom: 1.5rem;
}

.category-items li {
    margin-bottom: 0.5rem;
    position: relative;
    padding-left: 1.5rem;
}

.category-items li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--secondary);
}

/* Detailed Service Sections */
.detailed-service {
    padding: 5rem 0;
    background-color: var(--light);
}

.detailed-service:nth-child(even) {
    background-color: white;
}

.service-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

/* Desktop: Align image to top instead of center */
@media (min-width: 1025px) {
    .service-grid {
        align-items: start;
    }
}

.service-grid:nth-child(even) {
    direction: rtl;
}

.service-grid:nth-child(even) .service-text,
.service-grid:nth-child(even) .service-image {
    direction: ltr;
}

.service-image {
    width: 100%;
    height: 100%;
    max-height: 400px;
    overflow: hidden;
    border-radius: var(--border-radius);
}

.service-image img {
    width: 100%;
    height: 100%;
    max-height: 400px;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
}

.service-text h3 {
    font-size: var(--schrift-xl);
    margin-bottom: 1rem;
    color: var(--secondary);
}

.service-text p {
    margin-bottom: 1.5rem;
}

.service-features {
    margin-bottom: 1.5rem;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.feature-icon {
    width: 40px;
    height: 40px;
    background-color: rgba(var(--secondary-rgb), 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.feature-icon img {
    width: 20px;
    height: 20px;
}

.feature-content h4 {
    font-size: var(--schrift-md);
    margin-bottom: 0.3rem;
}

/* Section Subtitle */
.section-subtitle {
    margin: 3rem 0 1.5rem;
    text-align: center;
}

.section-subtitle h3 {
    font-size: var(--schrift-xl);
    color: var(--secondary);
    position: relative;
    display: inline-block;
}

.section-subtitle h3::after {
    content: '';
    width: 60px;
    height: 3px;
    background-color: var(--secondary);
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}

/* Related Products – wird in den Templates als Sektion verwendet und
   braucht daher denselben vertikalen Abstand wie die übrigen Sektionen.
   Ohne das Padding stieß der Inhalt direkt an den Footer. */
.related-products {
    padding: 5rem 0;
}

.products-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 2rem;
    justify-content: center;
}

.product-card {
    flex: 0 0 calc(33.333% - 20px);
    max-width: 400px;
    background-color: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s, box-shadow 0.3s;
    text-decoration: none;
    color: inherit;
    display: block;
}

.project-card-link {
    text-decoration: none;
    color: inherit;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
}

/* Make button show hover state when card is hovered */
.product-card:hover .btn-outline {
    background-color: var(--secondary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(var(--secondary-rgb), 0.3);
}

.product-card:hover .read-more {
    text-decoration: underline;
}

.product-img {
    height: 200px;
    overflow: hidden;
}

.product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.product-card:hover .product-img img {
    transform: scale(1.05);
}

.product-content {
    padding: 1.5rem;
    text-align: center;
}

.product-content h3 {
    font-size: var(--schrift-lg);
    margin-bottom: 0.8rem;
    color: var(--secondary);
}

.product-content p {
    margin-bottom: 1.2rem;
    min-height: 50px;
}

/* Stichpunkte auf der Projektkarte – gleicher Aufzählungspunkt wie auf den
   Leistungskarten (.category-items). Linksbündig, weil zentrierte
   Aufzählungen mit Punkt davor unruhig wirken; die Liste sitzt daher
   mittig als Block in der ansonsten zentrierten Karte. */
.card-items {
    list-style: none;
    display: table;
    margin: 0 auto 1.2rem;
    text-align: left;
}

.card-items li {
    position: relative;
    margin-bottom: 0.4rem;
    padding-left: 1.5rem;
    font-size: var(--schrift-sm);
    color: var(--gray);
}

.card-items li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--secondary);
}

/* CTA Section
   Hier gab es nie ein pflegbares Bild – der Verweis auf ein Platzhalter-Bild
   lief immer ins Leere und wurde bei jedem Aufruf vergeblich angefordert. */
.cta-section {
    padding: 5rem 0;
    background-color: var(--bild-schleier);
    color: white;
    text-align: center;
}

.cta-section h2 {
    font-size: var(--schrift-xxl);
    margin-bottom: 1.5rem;
}

.cta-section p {
    font-size: var(--schrift-md);
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== PROJECT DETAIL PAGE STYLES ===== */

/* Product Overview */
.product-overview {
    padding: 5rem 0;
}

.overview-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start; /* Changed from center to start for top alignment */
}

.overview-image {
    width: 100%;
    height: 100%;
    max-height: 400px;
    overflow: hidden;
    border-radius: var(--border-radius);
}

.overview-image img,
.overview-content img {
    width: 100%;
    height: 100%;
    max-height: 400px;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
}

.overview-text h3 {
    font-size: var(--schrift-xl);
    margin-bottom: 1rem;
    color: var(--primary);
}

.overview-text p {
    margin-bottom: 1.5rem;
}

.highlight-box {
    background-color: var(--light-gray);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    margin-top: 1.5rem;
}

.highlight-box h4 {
    margin-bottom: 0.8rem;
    color: var(--secondary);
}

/* Features Section */
.features {
    padding: 5rem 0;
    background-color: var(--light);
}

.features-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.feature-card {
    width: calc(33.333% - 20px);
    max-width: 400px;
    background-color: white;
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    transition: transform 0.3s, box-shadow 0.3s;
}

.feature-card h3 {
    margin-bottom: 1rem;
    font-size: var(--schrift-lg);
}

/* Technical Specs */
.technical-specs {
    padding: 5rem 0;
}

.specs-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2rem;
}

.specs-table th,
.specs-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--light-gray);
    text-align: left;
}

.specs-table th {
    background-color: var(--light-gray);
    font-weight: 600;
}

.specs-table tr:last-child td {
    border-bottom: none;
}

.specs-table tr:nth-child(even) td {
    background-color: var(--light);
}

/* Gallery */
.gallery {
    padding: 5rem 0;
    background-color: var(--light);
}

.gallery-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 2rem;
    justify-content: center;
}

.gallery-item {
    position: relative;
    width: calc(33.333% - 15px);
    max-width: 400px;
    height: 250px;
    overflow: hidden;
    border-radius: var(--border-radius);
    cursor: pointer;
    display: block;
    text-decoration: none;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

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

/* Bildunterschrift steht dauerhaft in der Kachel (vorher nur beim Hovern
   eingeblendet). Längere Texte werden nach zwei Zeilen mit "…" gekürzt;
   der vollständige Text erscheint in der Großansicht. */
.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.75) 35%);
    color: white;
    padding: 1.5rem 1rem 0.9rem;
    font-size: var(--schrift-sm);
    line-height: 1.4;
}

/* Zeilenbegrenzung auf dem inneren Element: overflow schneidet an der
   Padding-Kante ab – läge die Begrenzung außen, würde eine angeschnittene
   dritte Zeile im unteren Padding sichtbar bleiben. */
.gallery-caption span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: 2.8em;
}

/* Video thumbnail styling */
.video-thumbnail {
    position: relative;
    width: 100%;
    height: 100%;
}

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

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s;
}

.gallery-item:hover .play-icon {
    transform: translate(-50%, -50%) scale(1.1);
}

/* ===== CONTACT PAGE STYLES ===== */

/* Contact Info Bar */
.contact-info-bar {
    padding: 3rem 0;
    background-color: var(--light);
    border-bottom: 1px solid var(--light-gray);
}

.info-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.info-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.info-icon {
    width: 60px;
    height: 60px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: var(--card-shadow);
}

.info-icon svg {
    width: 30px;
    height: 30px;
    fill: var(--secondary);
}

.info-text h3 {
    font-size: var(--schrift-md);
    margin-bottom: 1rem;
    color: var(--secondary);
}

.info-text p, .info-text a {
    color: var(--gray);
    text-decoration: none;
}

.info-text a:hover {
    color: var(--secondary);
}

/* Contact Section with Form and Person */
.contact-section {
    padding: 5rem 0;
}

/* Two Column Layout */
.contact-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

/* Contact Person Card */
.contact-person-card {
    background-color: var(--light);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    padding: 2rem;
}

.person-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.person-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 1.5rem;
}

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

.person-info h3 {
    font-size: var(--schrift-lg);
    margin-bottom: 0.5rem;
}

.person-info p {
    color: var(--gray);
}

.person-description {
    margin-bottom: 1.5rem;
}

.person-contacts p {
    display: flex;
    align-items: center;
    margin-bottom: 0.8rem;
}

.person-contacts svg {
    width: 18px;
    height: 18px;
    margin-right: 0.8rem;
    fill: var(--secondary);
}

.person-contacts a {
    color: var(--secondary);
    text-decoration: none;
    transition: color 0.3s;
}

.person-contacts a:hover {
    text-decoration: underline;
}

/* Contact Form Card */
.contact-form-card {
    background-color: var(--light);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    padding: 2rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-control {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid var(--light-gray);
    border-radius: var(--border-radius);
    font-family: inherit;
    font-size: var(--schrift-base);
    transition: border-color 0.3s;
}

.form-control:focus {
    outline: none;
    border-color: var(--secondary);
}

.form-control::placeholder {
    color: var(--gray);
}

textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

.required {
    color: var(--secondary);
}

.consent-checkbox {
    display: flex;
    align-items: flex-start;
    margin-top: 1rem;
}

.consent-checkbox input {
    margin-top: 0.3rem;
    margin-right: 0.8rem;
}

.form-space {
    height: 1.5rem;
}

/* Team Section */
.team-section {
    padding: 5rem 0;
    background-color: white;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.team-card {
    background-color: var(--light);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.team-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Vorstellungstext der Person. Die Texte sind unterschiedlich lang – der
   Kontaktblock wird deshalb nach unten geschoben, damit Telefon, E-Mail und
   vCard über alle Karten hinweg auf einer Linie stehen. */
.team-description {
    margin-bottom: 1.2rem;
    color: var(--gray);
    line-height: 1.7;
}

.team-contact {
    margin-top: auto;
}

.team-info h3 {
    font-size: var(--schrift-lg);
    margin-bottom: 1rem;
    color: var(--secondary);
}

.team-position {
    font-weight: 500;
    margin-bottom: 1rem;
    color: var(--dark);
}

.team-contact p {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.team-contact svg {
    width: 18px;
    height: 18px;
    margin-right: 0.8rem;
    fill: var(--secondary);
}

.team-contact a {
    color: var(--secondary);
    text-decoration: none;
    transition: color 0.3s;
}

.team-contact a:hover {
    text-decoration: underline;
}

/* Map Section */
.map-section {
    padding: 5rem 0;
    background-color: var(--light);
}

.map-container h2 {
    font-size: var(--schrift-xxl);
    margin-bottom: 2rem;
    text-align: center;
}

.map-responsive {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
}

.map-frame {
    width: 100%;
    height: 450px;
    border: none;
    border-radius: var(--border-radius);
}

.map-fallback {
    background-color: white;
    padding: 2rem;
    text-align: center;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
}

.map-fallback p {
    margin-bottom: 1rem;
}

.map-fallback a {
    color: var(--secondary);
    text-decoration: none;
    font-weight: 600;
}

.map-fallback a:hover {
    text-decoration: underline;
}

/* ===== PLACEHOLDER STYLES ===== */

/* Fehlt einem Eintrag das Vorschaubild, steht hier eine ruhige Flaeche.
   Vorher war es eine gelb schraffierte Warnung mit der Aufschrift
   "PLACEHOLDER IMAGE" - ein Werkzeug aus der Bauphase, das der Besucher
   nie haette sehen sollen. Die uebrigen Platzhalter-Regeln daneben
   (.placeholder-text, .placeholder-container, .placeholder-banner) waren
   von keinem Template benutzt; eine davon stand ausserdem hinter dem
   Selektor *:contains(...), den es in CSS nicht gibt - der machte die
   ganze Regel unwirksam. */
.service-img-placeholder {
    background-color: var(--light-gray);
}

/* Show All Button functionality */
.hidden-project {
    display: none !important;
}

.hidden-project.show {
    display: block !important;
}

.show-all-container {
    text-align: center;
    margin-top: 2rem;
}

.show-all-btn {
    margin-top: 2rem;
    /*font-size: var(--schrift-base);*/
}

/* ===== RESPONSIVE DESIGN ===== */

/* Responsive adjustments for services/products */
@media (max-width: 1024px) {
    /* Einspaltig heisst nicht seitenbreit: eine Karte ueber 870 px zieht ihr
       Bild zu einem Streifen, weil die Bildhoehe mit 200 px festliegt. Und
       die Projektkarten klebten am linken Rand - sie waren zwar auf 600 px
       begrenzt, das Raster setzte sie aber nicht mittig. Dieselben 600 px
       gelten schon fuer Kategorie-, Produkt- und Merkmalskarten. */
    .services-grid {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .service-card {
        width: 100%;
        max-width: 600px;
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .project-card {
        width: 100%;
        max-width: 600px;
    }
    
    .service-categories {
        flex-direction: column;
        align-items: center;
    }
    
    .category-card {
        width: 100%;
        max-width: 600px;
    }
    
    .product-card {
        width: 100%;
        max-width: 600px;
        flex: none;
    }
    
    .products-grid {
        flex-direction: column;
        align-items: center;
    }
    
    .features-grid {
        flex-direction: column;
        align-items: center;
    }
    
    .feature-card {
        width: 100%;
        max-width: 600px;
        flex: none;
    }
    
    .gallery-container {
        flex-direction: column;
        align-items: center;
    }
    
    .gallery-item {
        width: 100%;
        max-width: 600px;
        flex: none;
    }
    
    

    /* Additional tablet/smaller desktop styles */
    /* Nur das Bild wechselt – die Abdunklung bleibt identisch (--hero-overlay) */
    .hero,
    .page-hero,
    .services-hero,
    .contact-hero,
    .product-hero {
        --hero-image: var(--hero-bg-tablet, var(--hero-bg-desktop, none));
    }

    .about-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .about-image {
        max-height: 300px;
    }

    .about-image img {
        max-height: 300px;
        margin-bottom: 2rem;
    }

    .service-image {
        max-height: 300px;
    }

    .service-image img {
        max-height: 300px;
    }

    .overview-image {
        max-height: 300px;
    }

    .overview-image img,
    .overview-content img {
        max-height: 300px;
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .service-grid:nth-child(even) {
        direction: ltr;
    }

    .overview-content {
        grid-template-columns: 1fr;
    }

    .contact-columns {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

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

    .team-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Nur das Bild wechselt – die Abdunklung bleibt identisch (--hero-overlay) */
    .hero,
    .page-hero,
    .services-hero,
    .contact-hero,
    .product-hero {
        --hero-image: var(--hero-bg-mobile, var(--hero-bg-tablet, var(--hero-bg-desktop, none)));
    }

    .hero p {
        font-size: var(--schrift-base);
    }

    .services-hero h1,
    .contact-hero h1,
    .product-hero h1 {
        font-size: var(--schrift-xxl);
    }

    .product-hero {
        min-height: 320px;
        padding: 3.5rem 0;
    }

    .services-hero p,
    .contact-hero p,
    .product-hero p {
        font-size: var(--schrift-base);
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 15px;
    }

    .person-header {
        flex-direction: column;
        text-align: center;
    }

    .person-img {
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .map-frame {
        height: 300px;
    }

    /* About section mobile adjustments */
    .about-image {
        max-height: 250px;
    }

    .about-image img {
        max-height: 250px;
    }

    /* Service and overview image mobile adjustments */
    .service-image {
        max-height: 250px;
    }

    .service-image img {
        max-height: 250px;
    }

    .overview-image {
        max-height: 250px;
    }

    .overview-image img,
    .overview-content img {
        max-height: 250px;
    }
}

/* Migration: viewport-spezifische CTA-Hintergrundbilder (Panel-Felder) */
@media (max-width: 1024px) {
    .cta {
        background: linear-gradient(var(--bild-schleier), var(--bild-schleier)), var(--hero-bg-tablet, var(--hero-bg-desktop, none)) center/cover no-repeat;
    }
}
@media (max-width: 768px) {
    .cta {
        background: linear-gradient(var(--bild-schleier), var(--bild-schleier)), var(--hero-bg-mobile, var(--hero-bg-tablet, var(--hero-bg-desktop, none))) center/cover no-repeat;
    }
}

/* =========================================================================
   ERWEITERUNGEN 2026-08 – Bilddarstellung, Baukasten, Aktuelles, Suche,
   Projektfilter, Team-Fotos, Symbole
   ========================================================================= */

/* --- Hilfsklassen ------------------------------------------------------- */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Das hidden-Attribut muss auch dort greifen, wo eine eigene display-Regel
   gesetzt ist (z. B. .product-card mit display: block) – sonst blendet
   weder der Projektfilter noch sonst etwas aus. */
[hidden] {
    display: none !important;
}

/* --- Bilddarstellung (Panel: Einstellungen -> Darstellung) --------------- */

/* Als "img.…" notiert, damit die Einstellung auch dort greift, wo Kacheln
   ihr eigenes object-fit setzen (.gallery-item img, .product-img img, …). */
img.img-fit-cover {
    object-fit: cover;
    object-position: center;
}

/* "Vollständig zeigen": das ganze Motiv bleibt sichtbar, freie Fläche
   bekommt einen hellen Hintergrund statt eines Zuschnitts. */
img.img-fit-contain {
    object-fit: contain;
    object-position: center;
    background-color: var(--light);
}

/* --- Kopfbereiche ------------------------------------------------------- */

.page-hero .hero-content,
.services-hero .hero-content,
.contact-hero .hero-content,
.product-hero .hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.page-hero h1,
.services-hero h1,
.contact-hero h1,
.product-hero h1 {
    line-height: 1.2;
}

.hero-meta {
    display: inline-block;
    margin-bottom: 0.75rem;
    font-size: var(--schrift-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.9;
}

/* Als Link zur zugehörigen Leistung – ohne Unterstreichung, die Zeile soll
   als ruhige Einordnung wirken und nicht mit dem Button konkurrieren */
.hero-meta a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

.hero-meta a:hover {
    color: var(--secondary);
}

/* Letzter Textabsatz im Hero ohne überflüssigen Abstand nach unten */
.page-hero .hero-content > p:last-child,
.services-hero .hero-content > p:last-child,
.contact-hero .hero-content > p:last-child,
.product-hero .hero-content > p:last-child {
    margin-bottom: 0;
}

/* --- Suche im Hauptmenü ------------------------------------------------- */

/* Lupe und Sprachauswahl stehen als Gruppe am rechten Ende der Navigation.
   Wird es eng, gibt das Suchfeld nach – die Menüpunkte bleiben unangetastet. */
.nav-container {
    min-width: 0;
}

.nav-links {
    flex-shrink: 0;
}

.nav-tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

/* Im Ruhezustand ist nur die Lupe sichtbar. Beim Aufklappen wächst das Feld
   in der Leiste mit – die Lupe bleibt dabei Teil des Feldes und wird zum
   Absende-Button. Platz dafür macht der Kontakt-Button (siehe unten). */
.nav-search {
    display: flex;
    align-items: center;
    min-width: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-pille);
    background-color: transparent;
    /* schneidet die eigene Hintergrundfarbe des Eingabefeldes an den
       runden Ecken ab – etwa die Einfärbung bei Browser-Vorschlägen */
    overflow: hidden;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* Browser färben automatisch ausgefüllte Felder ein. Der Kasten bleibt
   dabei rechteckig und ragte über die runden Ecken hinaus. */
.nav-search input:-webkit-autofill,
.nav-search input:-webkit-autofill:hover,
.nav-search input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px #fff inset;
    box-shadow: 0 0 0 100px #fff inset;
    -webkit-text-fill-color: var(--dark);
}

.nav-search.is-open,
.nav-search:focus-within {
    border-color: var(--light-gray);
    background-color: #fff;
}

.nav-search:focus-within {
    border-color: var(--secondary);
}

.nav-search input {
    width: 0;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--schrift-sm);
    color: var(--dark);
    opacity: 0;
    pointer-events: none;
    outline: none;
    transition: width 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}

.nav-search.is-open input,
.nav-search:focus-within input {
    width: clamp(150px, 17vw, 230px);
    padding: 0.45rem 0.25rem 0.45rem 1rem;
    opacity: 1;
    pointer-events: auto;
}

.nav-search-btn {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    color: var(--gray);
    transition: color 0.3s;
}

.nav-search-btn:hover,
.nav-search.is-open .nav-search-btn,
.nav-search:focus-within .nav-search-btn {
    color: var(--secondary);
}

.nav-search-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Solange gesucht wird, klappt der Kontakt-Button ein und schafft den Platz
   für das Suchfeld – die Leiste bleibt dadurch insgesamt gleich breit. */
.nav-item-kontakt {
    max-width: 250px;
    overflow: hidden;
    transition: max-width 0.3s ease, margin 0.3s ease, opacity 0.2s ease;
}

nav:has(.nav-search.is-open) .nav-item-kontakt,
nav:has(.nav-search:focus-within) .nav-item-kontakt {
    max-width: 0;
    margin-left: 0;
    margin-right: 0;
    opacity: 0;
    pointer-events: none;
}

.nav-links a {
    white-space: nowrap;
}

/* --- Suchergebnisseite -------------------------------------------------- */

.search-section {
    padding: 5rem 0;
}

.search-page-form {
    display: flex;
    gap: 10px;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.search-page-form .form-control {
    flex: 1;
    margin: 0;
}

.search-hint,
.search-count {
    max-width: 700px;
    margin: 0 auto 2rem;
    color: var(--gray);
}

.search-results {
    max-width: 700px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.search-result {
    border-bottom: 1px solid var(--light-gray);
}

.search-result:last-child {
    border-bottom: 0;
}

.search-result a {
    display: block;
    padding: 1.5rem 0;
    text-decoration: none;
    color: inherit;
}

.search-result a:hover h2 {
    color: var(--secondary);
}

.search-result h2 {
    font-size: var(--schrift-lg);
    margin-bottom: 0.25rem;
    transition: color 0.3s;
}

.search-result-path {
    font-size: var(--schrift-xs);
    color: var(--secondary);
    margin-bottom: 0.5rem;
}

.search-result-text {
    color: var(--gray);
}

/* Fundstelle auf der Zielseite, wenn ein Suchtreffer angeklickt wurde.
   Wird von assets/js/app.js gesetzt. */
mark.search-hit {
    background-color: var(--markierung);
    color: inherit;
    padding: 0 0.15em;
    border-radius: var(--radius-klein);
}

/* --- Imagefilm auf der Startseite ---------------------------------------
   Der Bereich bringt keinen eigenen Hintergrund mit: über die Klasse "band"
   zählt er sich in den Wechsel aus Weiß und Hellgrau ein, den die übrigen
   Bereiche untereinander ausmachen (siehe "Abwechselnde Hintergründe"). */
.film-section .section-title {
    margin-bottom: 2.5rem;
}

.film-section .section-title p {
    max-width: 640px;
    margin: 0 auto;
    color: var(--gray);
}

/* Der Film läuft nicht über die volle Breite: bei 960 px bleibt er auch auf
   großen Bildschirmen als Ganzes im Blick, ohne den Kopf zu drehen. */
.film-player {
    max-width: 960px;
    margin: 0 auto;
}

/* Derselbe Schatten wie bei den Karten – so steht der Player als Element
   der Seite da und nicht als Fremdkörper auf hellem Grund. */
.film-player .video-embed {
    box-shadow: var(--card-shadow-hover);
}

/* --- Baukasten (Layout-Feld) -------------------------------------------- */

.baustein-row {
    padding: 3rem 0;
}

/* Aufruf am Ende einer aus Bausteinen gebauten Leistungsseite */
.service-cta {
    margin-bottom: 4rem;
}

/* Aufeinanderfolgende Zeilen ohne Hintergrund rücken zusammen */
.baustein-row + .baustein-row {
    padding-top: 0;
}

/* Farbige Bänder behalten ihren eigenen Innenabstand ... */
.baustein-row.baustein-bg-light,
.baustein-row.baustein-bg-dark {
    padding: 4rem 0;
}

/* ... und die Zeile danach bekommt wieder Luft nach oben */
.baustein-bg-light + .baustein-row,
.baustein-bg-dark + .baustein-row {
    padding-top: 3rem;
}

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

.baustein-bg-dark {
    background-color: var(--primary);
    color: #fff;
}

.baustein-bg-dark a {
    color: var(--secondary);
}

.container-wide {
    max-width: 1600px;
}

.baustein-columns {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 40px;
    align-items: start;
}

.baustein-column {
    grid-column: span var(--span, 12);
    min-width: 0;
}

.baustein-column > .block + .block {
    margin-top: 1.25rem;
}

/* Überschriften der Bausteine folgen der Typografie der übrigen Seiten:
   dunkle Überschriftenfarbe, und die oberste Ebene bekommt die orange
   Dekorationslinie – hier linksbündig statt zentriert wie im Sektionstitel. */
.block-heading {
    position: relative;
    color: var(--primary);
    line-height: 1.3;
}

h2.block-heading {
    font-size: var(--schrift-xl);
    padding-bottom: 0.9rem;
}

h2.block-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: var(--secondary);
}

h3.block-heading {
    font-size: var(--schrift-lg);
}

h4.block-heading {
    font-size: var(--schrift-md);
}

h5.block-heading,
h6.block-heading {
    font-size: var(--schrift-base);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.block-heading + .block-text,
.block-heading + .block-list {
    margin-top: 1rem;
}

.block-text p + p,
.block-text ul,
.block-text ol {
    margin-top: 1rem;
}

.block-text a {
    color: var(--secondary);
}

.block-list ul,
.block-list ol {
    padding-left: 1.25rem;
}

.block-list li {
    margin-bottom: 0.4rem;
}

.block-quote {
    padding: 0.5rem 0 0.5rem 1.5rem;
    border-left: 3px solid var(--secondary);
    font-size: var(--schrift-md);
    font-style: italic;
}

.block-quote footer {
    margin-top: 0.5rem;
    font-size: var(--schrift-sm);
    font-style: normal;
    color: var(--gray);
}

.block-line {
    border: 0;
    border-top: 1px solid var(--light-gray);
    margin: 2rem 0;
}

/* Bilder im Baukasten bekommen eine Bremse. Ohne sie fuellen sie die ganze
   Spalte und wirken neben den redaktionellen Bildern der uebrigen Seiten
   (.section-media hoert bei 720 px auf) unangenehm gross. Der Wert kommt
   aus dem Baustein, siehe snippets/blocks/image.php; "Volle Spaltenbreite"
   setzt ihn auf none und stellt damit das alte Verhalten wieder her. */
.block-image {
    max-width: var(--bildbreite, 720px);
    margin-inline: auto;
}

.block-image img,
.block-gallery img {
    width: 100%;
    border-radius: var(--border-radius);
}

/* Feste Seitenverhältnisse, wenn im Baustein eingestellt */
.block-image.has-ratio img {
    aspect-ratio: var(--ratio);
    height: auto;
}

.block figcaption {
    margin-top: 0.6rem;
    font-size: var(--schrift-sm);
    color: var(--gray);
}

.block-gallery .gallery-container {
    margin-top: 0;
}

/* Videoeinbettung (YouTube / Vimeo) – behält das 16:9-Format */
.video-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--primary);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.video-embed iframe,
.video-embed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Zwei-Klick-Lösung: Hinweis statt Video, bis zugestimmt wurde.
   16:9 ist hier nur die Mindesthöhe, nicht die Höhe: auf schmalen Geräten
   braucht der Hinweistext mehr Platz und wurde vorher abgeschnitten. Der
   Platzhalter ::after hält das Format frei, der Kasten darf darüber
   hinauswachsen. Beide liegen in derselben Rasterzelle. */
.video-consent {
    display: grid;
    place-items: center;
    aspect-ratio: auto;
    padding: 2rem;
    text-align: center;
    color: #fff;
}

.video-consent::after {
    content: '';
    grid-area: 1 / 1;
    width: 0;
    padding-top: 56.25%;
}

/* Nach der Zustimmung steht an dieser Stelle der Player. Innenabstand und
   Platzhalter des Hinweises werden dann nicht mehr gebraucht – und der
   Schleier des Vorschaubilds laege sonst ueber dem laufenden Video. */
.video-consent.is-loaded {
    display: block;
    padding: 0;
    aspect-ratio: 16 / 9;
}

.video-consent.is-loaded::before,
.video-consent.is-loaded::after {
    content: none;
}

/* Das Vorschaubild liegt hinter dem Hinweis und wird abgedunkelt – ohne den
   Schleier stünde weiße Schrift auf einem hellen Filmbild. */
.video-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-consent.has-poster::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(var(--primary-rgb), 0.45);
}

.video-consent-box {
    position: relative; /* über Bild und Schleier */
    grid-area: 1 / 1;
}

/* Ein Filmbild ist stellenweise hell – ein gleichmäßiger Schleier müsste
   deshalb so dunkel sein, dass vom Bild nichts mehr übrig bliebe. Statt
   dessen bekommt der Hinweis eine eigene Fläche und das Bild bleibt
   erkennbar. */
.video-consent.has-poster .video-consent-box {
    padding: 1.75rem 1.5rem;
    border-radius: var(--border-radius);
    background-color: rgba(var(--primary-rgb), 0.62);
}

.video-consent-box {
    max-width: 520px;
}

.video-consent-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    fill: rgba(255, 255, 255, 0.55);
}

.video-consent-text {
    margin-bottom: 1.5rem;
    font-size: var(--schrift-sm);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.video-consent-text a {
    color: #fff;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .video-consent {
        padding: 1.25rem;
    }

    .video-consent-icon {
        width: 36px;
        height: 36px;
        margin-bottom: 0.75rem;
    }

    .video-consent-text {
        font-size: var(--schrift-xs);
        margin-bottom: 1rem;
    }
}

/* Inhaltsbereich ohne Bild: der Text läuft über die volle Breite,
   bleibt aber in angenehmer Lesebreite */
.overview-content.is-single {
    display: block;
}

.overview-content.is-single .overview-text {
    max-width: 820px;
}

/* --- Abwechselnde Hintergründe -------------------------------------------
   Feste Hintergrundfarben je Bereich gehen schief, sobald Bereiche leer
   bleiben und wegfallen – dann stehen zwei graue Blöcke nebeneinander.
   Bereiche mit der Klasse "band" zählen sich deshalb selbst durch: nur
   die tatsächlich ausgegebenen werden gezählt. */

main > .band {
    background-color: transparent;
}

main > .band:nth-child(even of .band) {
    background-color: var(--light);
}

/* Merkmale und Einsatzbereiche kompakt: Symbol, Titel und ein bis zwei Sätze
   nebeneinander. Als Kartenraster brauchte ein einzelner Eintrag zuvor eine
   halbe Bildschirmhöhe. */
.features:has(.feature-list) {
    padding: 3.5rem 0;
}

.features:has(.feature-list) .section-title {
    margin-bottom: 2rem;
}

.feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.75rem 2.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.feature-entry {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
}

.feature-entry h3 {
    margin-bottom: 0.3rem;
    font-size: var(--schrift-md);
    color: var(--primary);
}

.feature-entry p {
    color: var(--gray);
}

/* Eckdaten als schmales Band direkt unter dem Kopfbereich – Auftraggeber,
   Ort, Zeitraum und Rolle sind bei Referenzen die erste Frage */
.project-facts {
    padding: 2rem 0;
    background-color: var(--light);
    border-bottom: 1px solid var(--light-gray);
}

.project-facts dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem 2.5rem;
    margin: 0;
}

.project-facts dt {
    margin-bottom: 0.2rem;
    font-size: var(--schrift-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray);
}

.project-facts dd {
    margin: 0;
    font-size: var(--schrift-base);
    color: var(--primary);
}

/* Leistungsumfang eines Projekts – abgesetzter Block, damit die Liste der
   gelieferten Komponenten auf einen Blick erfassbar bleibt */
.scope-section {
    padding: 5rem 0;
    background-color: var(--light);
}

/* Aufruf am Ende der Projektbeschreibung – bewusst kompakt und im Textfluss,
   nicht als eigener Bildschirmabschnitt */
/* Ohne Kasten und ohne Akzentbalken: eine Linie trennt den Aufruf vom Text,
   mehr braucht es nicht. Ein Balken links liest sich sonst wie ein Zitat. */
.inline-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--light-gray);
}

.inline-cta p {
    flex: 1 1 240px;
    margin: 0;
    color: var(--gray);
}

.inline-cta .btn {
    flex-shrink: 0;
}

/* Einleitung über der Tabelle mit den technischen Daten */
.specs-intro {
    max-width: 820px;
    margin-bottom: 1.5rem;
    color: var(--gray);
}

/* --- Fließtext aus dem Editor -------------------------------------------
   Aufzählungen hatten bisher gar kein Styling – deshalb wurden Listen im
   Panel mit <br> nachgebaut. Mit diesen Regeln lässt sich die Listen-
   Funktion des Editors überall sinnvoll nutzen. */

.overview-text ul,
.overview-text ol,
.service-text ul,
.service-text ol,
.section-text ul,
.section-text ol,
.block-text ul,
.block-text ol {
    margin: 0 0 1rem;
    padding-left: 1.4rem;
}

.overview-text li,
.service-text li,
.section-text li,
.block-text li {
    margin-bottom: 0.45rem;
}

/* Aufzählungspunkte in der Akzentfarbe */
.overview-text ul,
.service-text ul,
.section-text ul,
.block-text ul {
    list-style: none;
    padding-left: 1.2rem;
}

.overview-text ul > li,
.service-text ul > li,
.section-text ul > li,
.block-text ul > li {
    position: relative;
    padding-left: 1rem;
}

.overview-text ul > li::before,
.service-text ul > li::before,
.section-text ul > li::before,
.block-text ul > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--secondary);
}

/* --- Einspaltige Inhaltsbereiche (Über uns) ------------------------------
   Titel -> Einleitung -> Bild -> Text. Bewusst einspaltig: neben einer
   400 px hohen Bildspalte wird eine lange Textspalte unlesbar schmal. */

.info-section {
    padding: 5rem 0;
}

.info-section-alt {
    background-color: var(--light);
}

/* Einleitung direkt unter dem Sektionstitel, noch über dem Bild */
.section-lead {
    max-width: 820px;
    margin: 0 auto 2.5rem;
    font-size: var(--schrift-md);
    text-align: center;
}

.section-lead p + p {
    margin-top: 0.75rem;
}

/* Bilder bewusst nicht über die volle Breite: sonst erschlägt das Bild den
   Text darunter. Der Wert gilt auch für Diagramme – sie standen eine Zeit
   lang bei 1000 px, damit die Beschriftung lesbar bleibt, aber das tut sie
   bei 720 px genauso, und die Seite hatte damit zwei Bildbreiten ohne
   erkennbaren Grund. Wer es genau sehen will, klickt das Diagramm auf. */
.section-media {
    max-width: 720px;
    margin: 0 auto 2.5rem;
}

.section-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--border-radius);
}

/* Fotos werden auf 16:9 zugeschnitten (siehe .section-media img), damit die
   Bereiche gleich hoch beginnen. Ein Diagramm verträgt das nicht – dem fehlte
   sonst die Hälfte. */
.section-media-diagramm img {
    aspect-ratio: auto;
}

.section-media figcaption {
    margin-top: 0.7rem;
    font-size: var(--schrift-sm);
    color: var(--gray);
    text-align: center;
}

/* Diagramme lassen sich zum Vergrößern anklicken */
.section-media-zoom {
    position: relative;
    display: block;
    text-decoration: none;
}

.section-media-hint {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-pille);
    background-color: rgba(var(--primary-rgb), 0.8);
    color: #fff;
    font-size: var(--schrift-xs);
    opacity: 0;
    transition: opacity 0.3s;
}

.section-media-zoom:hover .section-media-hint,
.section-media-zoom:focus-visible .section-media-hint {
    opacity: 1;
}

/* Lesebreite für den Fließtext */
.section-text {
    max-width: 820px;
    margin: 0 auto;
}

.section-text h3 {
    margin-bottom: 1rem;
    font-size: var(--schrift-lg);
}

.section-text p,
.section-text ul,
.section-text ol {
    margin-bottom: 1rem;
}

.section-text ul,
.section-text ol {
    padding-left: 1.25rem;
}

.section-text > *:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .section-media {
        margin-bottom: 2rem;
    }

    .section-media-hint {
        opacity: 1;
    }
}

/* --- Aktuelles ---------------------------------------------------------- */

.news-section {
    padding: 5rem 0;
}

.news-more {
    background-color: var(--light);
}

.news-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.news-grid .product-card {
    flex: 0 0 calc(33.333% - 20px);
}

.news-date {
    display: block;
    margin-bottom: 0.4rem;
    font-size: var(--schrift-xs);
    color: var(--secondary);
    font-weight: 500;
}

.news-card-noimage {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: var(--light-gray);
}

.news-card-noimage svg {
    width: 48px;
    height: 48px;
    fill: var(--gray);
    opacity: 0.5;
}

/* Die Bausteine bringen ihren eigenen Abstand mit; der Artikel ergänzt nur
   den Rest – vor allem nach unten, damit der Zurück-Link nicht am Footer
   klebt. */
.news-article {
    padding: 2rem 0 5rem;
}

/* Folgt darunter noch "Weitere Beiträge", genügt weniger Abstand */
.news-article:has(+ .news-more) {
    padding-bottom: 2rem;
}

/* Kopfzeile des Beitrags: Schlagwörter links, Datum rechts.
   Das Datum stand vorher im Hero und lenkte dort von der Überschrift ab. */
.news-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    margin-bottom: 1rem;
}

/* Ohne Schlagwörter bleibt das Datum trotzdem rechts */
.news-article-date {
    margin-left: auto;
    font-size: var(--schrift-sm);
    font-weight: 500;
    color: var(--gray);
    white-space: nowrap;
}

.news-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin-bottom: 0;
}

.news-tags li {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pille);
    background-color: var(--light);
    font-size: var(--schrift-xs);
    color: var(--gray);
}

.news-back {
    margin-top: 2.5rem;
}

.empty-hint {
    text-align: center;
    color: var(--gray);
}

/* --- Projektfilter nach Schwerpunkt ------------------------------------- */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 2.5rem;
}

.filter-btn {
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--light-gray);
    border-radius: var(--radius-pille);
    background: none;
    font: inherit;
    font-size: var(--schrift-sm);
    color: var(--dark);
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.filter-btn:hover {
    border-color: var(--secondary);
    color: var(--secondary);
}

.filter-btn.is-active {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: #fff;
}

.filter-empty {
    text-align: center;
    color: var(--gray);
    margin-top: 1rem;
}

/* Gruppierung nach Schwerpunkt – trennt die Projekte auch dann sichtbar,
   wenn kein Filter aktiv ist. */
.project-group + .project-group {
    margin-top: 3.5rem;
}

.project-group-title {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
    font-size: var(--schrift-lg);
    color: var(--primary);
}

.project-group-title::before {
    content: '';
    width: 4px;
    height: 1.4rem;
    border-radius: var(--radius-klein);
    background-color: var(--secondary);
    flex-shrink: 0;
}

.project-group-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--light-gray);
}

.project-group .products-grid {
    margin-top: 0;
    justify-content: flex-start;
}

/* In der Gruppierung sagt schon die Überschrift, worum es geht */
.project-group .card-badge {
    display: none;
}

/* Badge mit dem Schwerpunkt auf der Projektkarte */
.card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-pille);
    background-color: rgba(var(--primary-rgb), 0.8);
    color: #fff;
    font-size: var(--schrift-xs);
    line-height: 1.3;
}

.product-img {
    position: relative;
}

/* Verlinkung von den Leistungen zu den Referenzprojekten */
.service-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-top: 2rem;
}

.service-projects {
    background-color: var(--light);
}

/* --- Team-Fotos auf der Kontaktseite ------------------------------------ */

.team-card-header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.2rem;
}

.team-img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background-color: var(--light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-img img {
    width: 100%;
    height: 100%;
}

.team-card-header h3 {
    font-size: var(--schrift-lg);
    margin-bottom: 0.25rem;
    color: var(--secondary);
}

.team-card-header .team-position {
    margin-bottom: 0;
}

/* Neutrales Personensymbol, wenn kein Foto hinterlegt ist */
.person-fallback {
    width: 55%;
    height: 55%;
    fill: var(--gray);
    opacity: 0.55;
}

.person-img {
    background-color: var(--light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --- Hinweis auf die Ansprechpartner (Über uns) ------------------------- */

.team-hint {
    padding: 0 0 5rem;
}

.team-hint-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.5rem;
    border-radius: var(--border-radius);
    background-color: var(--light);
    border-left: 4px solid var(--secondary);
}

.team-hint-card h2 {
    font-size: var(--schrift-xl);
    margin-bottom: 0.5rem;
}

.team-hint-text {
    flex: 1 1 400px;
}

.team-hint-text p {
    color: var(--gray);
    margin: 0;
}

/* --- Symbole statt Bildplatzhalter -------------------------------------- */

.feature-icon svg {
    width: 22px;
    height: 22px;
    fill: var(--secondary);
}

.feature-card .feature-icon {
    margin-bottom: 1.2rem;
}

/* --- Abstand zum Footer ------------------------------------------------- */

/* Sicherheitsnetz gegen den Effekt, der auf der Projektseite auftrat:
   ein Block ohne eigenes Padding stößt direkt an den Footer.
   Diese Regel gibt jedem direkten Kind einen Grundabstand; alle Bereiche mit
   eigener Klasse (.gallery, .features, …) überschreiben ihn wie gehabt. */
main > section,
main > article {
    padding: 5rem 0;
}

/* --- Responsive --------------------------------------------------------- */

/* Ab hier greift das Vollbildmenü (siehe "Responsive Header Styles"):
   Dort ist Platz genug, das Suchfeld steht dauerhaft offen als eigene Zeile
   über der Sprachauswahl – und der Kontakt-Button bleibt sichtbar. */
@media (max-width: 1024px) {
    .baustein-columns {
        gap: 30px;
    }

    .baustein-column {
        grid-column: span 12;
    }

    .news-grid .product-card {
        flex: none;
        width: 100%;
        max-width: 600px;
    }

    .nav-tools {
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
    }

    .nav-search {
        width: min(320px, 80vw);
        margin: 0 auto;
        border-color: var(--light-gray);
        background-color: #fff;
    }

    .nav-search input,
    .nav-search.is-open input,
    .nav-search:focus-within input {
        flex: 1;
        width: auto;
        padding: 0.7rem 0.25rem 0.7rem 1rem;
        font-size: var(--schrift-base);
        opacity: 1;
        pointer-events: auto;
    }

    .nav-search-btn {
        margin-right: 6px;
    }

    nav:has(.nav-search.is-open) .nav-item-kontakt,
    nav:has(.nav-search:focus-within) .nav-item-kontakt {
        max-width: 250px;
        margin-left: 0;
        margin-top: 1.5rem;
        opacity: 1;
        pointer-events: auto;
    }
}

@media (max-width: 768px) {

    .search-page-form {
        flex-direction: column;
    }

    .team-hint-card {
        padding: 2rem;
    }

    .team-card-header {
        gap: 1rem;
    }

    .team-img {
        width: 70px;
        height: 70px;
    }

    .block-heading {
        font-size: var(--schrift-lg);
    }
}

/* =========================================================================
   MOBIL UND TABLET
   Zwei Stufen: bis 992 px (Tablet, Vollbildmenü) und bis 768 px (Smartphone).
   Geprüft bei 360 px Breite – dort standen Überschriften mit 40 px Schrift
   und nebeneinanderliegende Buttons über den Rand hinaus.
   ========================================================================= */

/* Lange Komposita wie "maßgeschneiderten" ragten aus dem Kopfbereich heraus.
   overflow-wrap bricht sie erst um, wenn sie sonst überliefen – bewusst ohne
   hyphens: auto, weil die automatische Silbentrennung Überschriften (vor allem
   im Hero) an unpassenden Stellen zerlegt hat. */
h1, h2, h3, h4,
.category-title,
.partner-content h3 {
    overflow-wrap: break-word;
    hyphens: manual;
}

/* --- Tablet ------------------------------------------------------------- */

@media (max-width: 1024px) {
    .section-title h2 {
        font-size: var(--schrift-xxl);
        margin-bottom: 1.5rem;
    }

    .about-text h3 {
        font-size: var(--schrift-lg);
    }

    .cta h2,
    .cta-section h2 {
        font-size: var(--schrift-xl);
    }

    .overview-text h3,
    .service-text h3 {
        font-size: var(--schrift-lg);
    }

    .section-text h3 {
        font-size: var(--schrift-lg);
    }

    h2.block-heading {
        font-size: var(--schrift-xl);
    }
}

/* --- Smartphone --------------------------------------------------------- */

@media (max-width: 768px) {
    .section-title {
        margin-bottom: 2rem;
    }

    .section-title h2 {
        font-size: var(--schrift-xl);
        margin-bottom: 1.25rem;
    }

    .section-title h2::after {
        width: 60px;
        bottom: -8px;
    }

    .hero h1,
    .page-hero .hero-content h1,
    .services-hero h1,
    .contact-hero h1,
    .product-hero h1 {
        font-size: var(--schrift-xl);
        line-height: 1.25;
    }

    .hero p,
    .page-hero .hero-content p,
    .services-hero p,
    .contact-hero p,
    .product-hero p {
        font-size: var(--schrift-base);
    }

    .about-text h3 {
        font-size: var(--schrift-lg);
    }

    .cta h2,
    .cta-section h2 {
        font-size: var(--schrift-xl);
    }

    .overview-text h3,
    .section-text h3,
    .service-text h3,
    .category-title {
        font-size: var(--schrift-lg);
    }

    .product-content h3,
    .feature-card h3,
    .team-card-header h3,
    .person-info h3,
    .search-result h2 {
        font-size: var(--schrift-md);
    }

    .section-lead {
        font-size: var(--schrift-base);
    }

    /* Nebeneinanderliegende Buttons brechen um und nehmen die volle Breite –
       zwei Buttons à 180 px passen bei 360 px nicht nebeneinander. */
    .hero-buttons,
    .service-links,
    .inline-cta,
    .team-hint-card {
        flex-wrap: wrap;
    }

    .hero-buttons .btn,
    .service-links .btn,
    .service-links .btn-outline,
    .inline-cta .btn,
    .team-hint-card .btn,
    .view-all-btn .btn {
        width: 100%;
        text-align: center;
    }

    .btn {
        padding: 12px 20px;
    }

    /* Fließtext bleibt linksbündig: zentrierte Absätze über mehrere Zeilen
       sind auf schmalen Bildschirmen deutlich schwerer zu lesen.
       Überschriften und einzelne Zeilen bleiben zentriert. */
    .about-content,
    .about-text {
        text-align: left;
    }

    /* Tabellen dürfen notfalls seitlich scrollen statt die Seite zu sprengen */
    .specs-table {
        display: block;
        overflow-x: auto;
    }

    .project-facts {
        padding: 1.5rem 0;
    }

    .project-facts dl {
        gap: 1rem 1.5rem;
    }

    .breadcrumb {
        font-size: var(--schrift-xs);
    }

    /* Das Logo ist 238 px breit – bei 360 px Bildschirm blieben zwischen
       Logo und Menüknopf nur 42 px. Es skaliert deshalb mit. */
    .logo img {
        height: 40px;
    }

    /* Mit dem Logo schrumpft die Kopfleiste – und damit der Abstand, den
       Sprungziele freihalten müssen. */
    :root {
        --kopfhoehe: 74px;
    }
}

@media (max-width: 480px) {
    .logo img {
        height: 34px;
    }

    :root {
        --kopfhoehe: 68px;
    }
}