/*
Theme Name: WKR Theme
Author: Antigravity
Description: Custom theme for Wirtschaftskreis Reinstorf e.V.
Version: 1.0
*/

:root {
    --primary: #2E7D32;
    --primary-light: #4CAF50;
    --secondary: #546E7A;
    --accent: #FFC107;
    --bg: #f0f4f1;
    --white: #ffffff;
    --text: #37474F;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* Source Sans 3 kommt der Vereinsschrift Myriad Pro sehr nahe und ist frei nutzbar */
    font-family: 'Source Sans 3', 'Myriad Pro', system-ui, -apple-system, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
}

a:hover {
    text-decoration: none !important;
}

body p {
    margin-bottom: 1rem;
}

/* Organic Background Shapes */
.bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: -1;
    opacity: 0.6;
    max-width: 100%;
    /* Prevent overflow */
}

.shape-1 {
    width: 600px;
    height: 600px;
    background: #C8E6C9;
    top: -200px;
    right: -100px;
}

.shape-2 {
    width: 400px;
    height: 400px;
    background: #E0F2F1;
    bottom: 10%;
    left: -100px;
}

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

.mobile-menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--primary);
    border-radius: 3px;
    transition: all 0.3s;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}

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

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

.mobile-only-btn {
    display: none;
    /* Hidden by default on desktop if inside nav */
}

/* Responsive */
@media (max-width: 900px) {
    .shape-1 {
        display: none;
        /* Hide completely on mobile to prevent overflow */
    }

    .shape-2 {
        width: 200px;
        height: 200px;
        left: -50px;
        bottom: 5%;
    }

    .nav-container {
        flex-direction: row;
        flex-wrap: wrap;
        /* Allow nav to wrap to new line */
        gap: 1rem;
        /* Add some spacing */
        justify-content: center;
        /* Center the burger menu */
        align-items: flex-start;
        /* Align to top */
        padding: 0.8rem 1rem;
        /* Reduced padding for smaller header */
    }

    .logo {
        font-size: 0.85rem;
        /* Even smaller font size */
        max-width: 66%;
        /* 2/3 of the width */
        order: 1;
        flex-shrink: 1;
        /* Allow shrinking if needed */
        white-space: normal;
        /* Allow text wrapping */
        line-height: 1.3;
        /* Better line height for wrapped text */
        margin-right: auto;
        /* Push burger menu to center */
    }

    .mobile-menu-toggle {
        display: flex;
        order: 2;
        flex-shrink: 0;
        /* Don't shrink the toggle */
        padding: 0.5rem;
        /* Add some padding for better tap target */
    }

    /* Nav Layout */
    nav {
        width: 100%;
        order: 3;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, margin-top 0.3s;
        margin-top: 0;
        opacity: 0;

        /* Flex Column for Mobile */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    nav.active {
        max-height: 800px;
        /* Sufficient height */
        margin-top: 1rem;
        opacity: 1;
    }

    nav ul {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
        background: white;
        padding: 3rem 2rem 1rem;
        /* Top padding for menu */
        width: 100%;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        box-shadow: none;
        /* Remove shadow for seamless look or adjust */
        list-style: none;
        /* Remove bullet points on mobile */
    }

    /* Button inside Nav */
    .mobile-only-btn {
        display: inline-block;
        margin-top: 0;
        /* Spacing handled by container */
        margin-bottom: 3rem;
        /* Bottom padding */
        background: white;
        width: 100%;
        text-align: center;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        padding-bottom: 2rem;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        /* Shadow on button container */
    }

    /* Adjust styling to make it look like one block */
    nav ul {
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.02);
    }

    /* Reset button style for mobile block look if desired, or keep as pill */
    .mobile-only-btn {
        width: auto;
        background: transparent;
        box-shadow: none;
        margin-bottom: 3rem;
        border-radius: 50px;
    }

    /* Wrapper for menu content to handle white background together? 
       Since we can't change HTML easily here, let's style ul and button separately 
       or rely on the white background of the ul. 
       Let's give the whole nav a white background? No, nav includes the button.
    */

    nav {
        background: white;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    nav ul {
        background: transparent;
        box-shadow: none;
        padding-bottom: 1rem;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .member-detail {
        grid-template-columns: 1fr !important;
        /* Force single column on mobile */
        gap: 2rem;
    }

    .member-sidebar {
        order: -1;
        /* Show sidebar (image/contact) first on mobile? Or maybe keep order? Let's keep order for now, or maybe image first. */
    }

    .member-image-container {
        margin-bottom: 2rem;
    }

    .member-info h2 {
        font-size: 2.5rem;
    }

    .news-item {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .news-image {
        height: 250px;
    }

    .impressum-section {
        grid-template-columns: 1fr;
    }

    .board-images {
        height: 400px;
        display: none;
    }

    .category {
        padding: 2rem;
    }
}

/* Top Bar */
.top-bar {
    background: var(--primary);
    color: var(--white);
    padding: 0.5rem 2rem;
    font-size: 0.9rem;
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    margin: 0 1rem;
}

.top-bar a {
    color: var(--white);
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 0.3s;
}

.top-bar a:hover {
    opacity: 1;
}

.member-image {
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: none;
}

/* Header */
header {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    margin: 1rem;
    border-radius: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    position: sticky;
    top: 1rem;
    z-index: 100;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--primary);
    text-decoration: none;
    letter-spacing: 0.5px;
    padding: 0.5rem 1rem;
    border-radius: 10px;
}

nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-grow: 1;
}

@media (min-width: 901px) {
    nav ul {
        display: flex;
        list-style: none;
        gap: 2rem;
        margin: 0 auto;
        padding: 0;
        align-items: center;
    }
}

.mobile-only-btn {
    display: inline-block;
    /* Visible on desktop */
}

nav a {
    text-decoration: none;
    color: var(--secondary);
    font-weight: 600;
    font-size: 1rem;
    transition: color 0.3s;
}

nav a:hover {
    color: var(--primary);
}

.btn-outline {
    border: 2px solid var(--primary);
    color: var(--primary);
    padding: 0.6rem 1.8rem;
    text-decoration: none;
    font-weight: 700;
    border-radius: 50px;
    transition: all 0.3s;
}

.btn-outline:hover {
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    margin: 0;
    border-radius: 0 0 50px 50px;
    /* Fix for border-radius clipping with video children */
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: -2;
    object-fit: cover;
}



.hero-content {
    max-width: 900px;
    padding: 4rem;
    z-index: 1;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    margin: 0 1rem;
}

.hero h1 {
    font-size: 4.5rem;
    color: var(--white);
    margin-bottom: 1.5rem;
    line-height: 1.1;
    font-weight: 800;
}

.hero p {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2.5rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    color: var(--white);
    padding: 1rem 2.5rem;
    text-decoration: none;
    font-weight: 700;
    display: inline-block;
    border-radius: 50px;
    box-shadow: 0 10px 25px rgba(46, 125, 50, 0.3);
    transition: transform 0.3s, box-shadow 0.3s;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(46, 125, 50, 0.4);
    filter: brightness(1.1);
    color: var(--white);
    /* Slightly brighter on hover */
}

/* Services Grid */
.services {
    max-width: 1200px;
    margin: 6rem auto;
    padding: 0 2rem;
}

.section-title {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title h2 {
    font-size: 2.5rem;
    color: var(--text);
    margin-bottom: 1rem;
}

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

.service-card {
    background: var(--white);
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    border: none;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
}

.service-img {
    height: 220px;
    width: 100%;
    object-fit: cover;
    border-bottom-right-radius: 50px;
}

.service-content {
    padding: 2.5rem;
}

.service-content h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--primary);
}

.service-content p {
    color: var(--secondary);
    margin-bottom: 2rem;
    font-size: 1rem;
}

.read-more {
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

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

/* CTA Strip */
.cta-strip {
    background: #e8f5e9;
    color: var(--primary);
    padding: 4rem 2rem;
    margin: 4rem 2rem;
    border-radius: 40px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(46, 125, 50, 0.1);
}

.cta-strip h3 {
    font-size: 2rem;
    margin-bottom: 2rem;
}

.btn-light {
    background: var(--white);
    color: var(--primary);
    padding: 1rem 2.5rem;
    text-decoration: none;
    font-weight: 700;
    border-radius: 50px;
    display: inline-block;
    margin: 0.5rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.btn-light:hover {
    transform: scale(1.05);
    background: #f1f8e9;
    /* Light green tint */
    color: var(--primary);
    /* Ensure text stays primary color */
}

/* Footer */
footer {
    background: var(--white);
    color: var(--secondary);
    padding: 4rem 2rem;
    margin-top: 4rem;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3rem;
}

.footer-col h4 {
    color: var(--primary);
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

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

.footer-col li {
    margin-bottom: 0.75rem;
}

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

.footer-col a:hover {
    color: var(--primary);
}

/* Page Headers */
.page-title,
.page-header {
    text-align: center;
    padding: 4rem 2rem 2rem;
}

.page-header {
    background: linear-gradient(to right, #7CB342, #9CCC65);
    padding: 3rem 2rem;
    margin-bottom: 4rem;
    color: white;
    text-align: left;
}

.page-header-content {
    max-width: 1200px;
    margin: 0 auto;
}

.page-title h1,
.page-header h1 {
    font-size: 3rem;
    color: var(--text);
    margin-bottom: 1rem;
}

.page-header h1 {
    color: white;
    font-size: 2.5rem;
    font-weight: 400;
}

.page-title p {
    color: var(--secondary);
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Search Bar */
.search-container {
    max-width: 600px;
    margin: 0 auto 4rem;
    padding: 0 2rem;
    display: flex;
    gap: 1rem;
}

.search-input {
    flex-grow: 1;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 50px;
    background: var(--white);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    transition: box-shadow 0.3s;
}

.search-input:focus {
    box-shadow: 0 8px 20px rgba(46, 125, 50, 0.15);
}

.search-btn {
    background: var(--primary);
    color: var(--white);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.search-btn:hover {
    transform: scale(1.1);
}

/* Members List */
.members-section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
}

.category {
    background: var(--white);
    border-radius: 30px;
    padding: 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: var(--primary-light);
}

.category h2 {
    color: var(--primary);
    font-size: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
}

.member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
}

.member-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.member-bullet {
    width: 8px;
    height: 8px;
    background: var(--primary-light);
    border-radius: 50%;
}

.member-link {
    color: var(--secondary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.member-link:hover {
    color: var(--primary);
}

/* Member Detail */
.member-detail {
    max-width: 1200px;
    margin: 0 auto 6rem;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    align-items: start;
}

.member-image-container {
    position: relative;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: var(--primary-light);
    text-decoration: underline;
}

.member-image {
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: none;
}

.member-info h2 {
    font-size: 3.5rem;
    line-height: 1.1;
    color: var(--text);
    margin-bottom: 2rem;
    font-weight: 600;
}

.member-categories {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.category-tag {
    background: #e8f5e9;
    color: var(--primary);
    padding: 0.2rem 0.8rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.member-slogan {
    color: var(--secondary);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.member-contact {
    margin-top: 2rem;
    color: var(--secondary);
    font-size: 1.1rem;
    line-height: 1.8;
}

.member-contact strong {
    color: var(--text);
    font-weight: 700;
    display: block;
    margin-bottom: 0.5rem;
}

/* News Section */
.news-section {
    max-width: 1000px;
    margin: 0 auto 6rem;
    padding: 0 2rem;
}

.news-item {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
    background: var(--white);
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.news-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
}

.news-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-date {
    color: #999;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.news-title {
    font-size: 2.5rem;
    color: var(--text);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.news-text {
    color: var(--secondary);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

/* Impressum Content */
.impressum-section {
    max-width: 1000px;
    margin: 0 auto 6rem;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.board-images {
    position: relative;
    height: 500px;
}

.board-img-circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    position: absolute;
    border: 4px solid white;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.board-img-1 {
    top: 0;
    left: 20px;
    z-index: 1;
}

.board-img-2 {
    top: 120px;
    left: 150px;
    z-index: 2;
    width: 180px;
    height: 180px;
}

.board-img-3 {
    top: 250px;
    left: 0px;
    z-index: 3;
}

.board-img-4 {
    top: 350px;
    left: 140px;
    z-index: 4;
    width: 160px;
    height: 160px;
}

.impressum-text {
    color: var(--secondary);
    font-size: 1.1rem;
}

.impressum-text p {
    margin-bottom: 1rem;
}

.impressum-text h3 {
    color: var(--text);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

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

.board-list {
    list-style: none;
    margin-top: 2rem;
}

.board-list li {
    margin-bottom: 0.5rem;
}

/* Responsive */
@media (max-width: 900px) {
    nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero h1 {
        font-size: 3rem;
    }

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

    .member-info h2 {
        font-size: 2.5rem;
    }

    .news-item {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .news-image {
        height: 250px;
    }

    .impressum-section {
        grid-template-columns: 1fr;
    }

    .board-images {
        height: 400px;
        display: none;
    }

    .category {
        padding: 2rem;
    }
}

/* Sticky Member Bar */
.sticky-member-bar {
    position: fixed;
    top: 6.5rem;
    /* Adjust based on header height */
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    z-index: 90;
    background: var(--primary);
    color: white;
    padding: 0.8rem 2.5rem;
    border-radius: 50px;
    text-align: center;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    white-space: nowrap;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-member-bar.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(15px);
    pointer-events: auto;
}

/* ===============================
   Basis Layout
================================= */

body.single-wkr_mitglied .member-description {
    line-height: 1.7;
    font-size: 17px;
    color: var(--text);
}

/* ===============================
   Typografie
================================= */

body.single-wkr_mitglied .member-description h1,
body.single-wkr_mitglied .member-description h2,
body.single-wkr_mitglied .member-description h3,
body.single-wkr_mitglied .member-description h4 {
    margin-top: 2.2em;
    margin-bottom: 0.6em;
    line-height: 1.25;
    font-weight: 600;
    color: #111827;
}

body.single-wkr_mitglied .member-description h1 { font-size: 2rem; }
body.single-wkr_mitglied .member-description h2 { font-size: 1.6rem; }
body.single-wkr_mitglied .member-description h3 { font-size: 1.3rem; }

body.single-wkr_mitglied .member-description p {
    margin-bottom: 1.2em;
}

body.single-wkr_mitglied .member-description strong {
    font-weight: 600;
}

body.single-wkr_mitglied .member-description a {
    color: #2563eb;
    text-decoration: none;
    border-bottom: 1px solid rgba(37, 99, 235, 0.3);
    transition: all 0.2s ease;
}

body.single-wkr_mitglied .member-description a:hover {
    color: #1d4ed8;
    border-bottom-color: #1d4ed8;
}

/* ===============================
   Listen
================================= */

body.single-wkr_mitglied .member-description ul,
body.single-wkr_mitglied .member-description ol {
    padding-left: 1.4em;
    margin-bottom: 1.4em;
}

body.single-wkr_mitglied .member-description li {
    margin-bottom: 0.5em;
}

/* ===============================
   Blockquotes
================================= */

body.single-wkr_mitglied .member-description blockquote {
    margin: 2em 0;
    padding: 1.5em 1.5em 1.5em 1.2em;
    border-left: 4px solid #2563eb;
    background: #f1f5f9;
    border-radius: 12px;
    font-style: italic;
}

/* ===============================
   Bilder
================================= */

body.single-wkr_mitglied .member-description img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    margin: 1.5em 0;
}

/* ===============================
   Mobile Optimierung
================================= */

@media (max-width: 768px) {

    body.single-wkr_mitglied .member-description {
        /* Rest des frueheren Kastens: Abstaende raus, der Text steht buendig */
        margin: 0;
        padding: 0;
        font-size: 16px;
    }

    body.single-wkr_mitglied .member-description h1 { font-size: 1.6rem; }
    body.single-wkr_mitglied .member-description h2 { font-size: 1.4rem; }
    body.single-wkr_mitglied .member-description h3 { font-size: 1.2rem; }

}
/* =========================================================================
   Refresh 2026-09
   Ruhigerer Hero mit Suche, Kennzahlen, Mitglieder-Kacheln und eine
   einheitliche Linie fuer Karten, Knoepfe und Seitenkoepfe.
   ========================================================================= */

:root {
    --gruen-flaeche: #eef4ef;
    --gruen-band: #eaf3ec;
    --linie: #e4e9e5;
    --text-leise: #6b7c74;
    --radius: 18px;
    --bg: #fafbfa;
    --schatten: 0 6px 24px rgba(20, 45, 30, 0.06);
    --breite: 1200px;
}

body {
    /* Source Sans 3 hat eine kleinere x-Hoehe als die Vorgaengerschrift */
    font-size: 18px;
}

/* --- Hero ------------------------------------------------------------- */
.hero.hero-suche {
    min-height: 68vh;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
    border-radius: 0 0 32px 32px;
    padding: 0 0 4rem;
}

.hero.hero-suche .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(100deg, rgba(12, 30, 19, 0.82) 0%, rgba(12, 30, 19, 0.58) 42%, rgba(12, 30, 19, 0.18) 72%, rgba(12, 30, 19, 0.06) 100%),
        linear-gradient(to top, rgba(12, 30, 19, 0.45) 0%, rgba(12, 30, 19, 0) 45%);
}

.hero.hero-suche .hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--breite);
    margin: 0 auto;
    padding: 0 2rem;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    text-align: left;
}

.hero.hero-suche h1 {
    font-size: clamp(2.6rem, 6vw, 4rem);
    margin-bottom: 0.6rem;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}

.hero.hero-suche .hero-subline {
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    margin-bottom: 1.8rem;
    max-width: 46ch;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}

/* --- Suche ------------------------------------------------------------ */
.wkr-suche {
    position: relative;
    max-width: 660px;
}

.suche-feld {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--white);
    border-radius: 14px;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    box-shadow: 0 12px 32px rgba(10, 30, 18, 0.18);
}

.suche-icon {
    display: inline-flex;
    color: var(--text-leise);
    flex-shrink: 0;
}

.suche-eingabe {
    flex: 1;
    border: 0;
    outline: none;
    font: inherit;
    font-size: 1.05rem;
    color: var(--text);
    background: transparent;
    padding: 0.7rem 0;
    min-width: 0;
}

.suche-eingabe::placeholder {
    color: #97a49c;
}

.suche-eingabe::-webkit-search-cancel-button {
    cursor: pointer;
}

.suche-knopf {
    border: 0;
    background: var(--primary);
    color: var(--white);
    font: inherit;
    font-weight: 700;
    padding: 0.8rem 1.6rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.suche-knopf:hover {
    background: #256428;
}

.suche-eingabe:focus-visible,
.suche-knopf:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.suche-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.1rem;
}

.suche-chip {
    display: inline-block;
    padding: 0.45rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 999px;
    color: var(--white);
    text-decoration: none;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.2s, border-color 0.2s;
}

.suche-chip:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: transparent;
    color: #1f3a28;
}

/* Ergebnisse der Live-Suche */
.suche-ergebnis {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--white);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(10, 30, 18, 0.22);
    overflow: hidden;
    max-height: min(60vh, 480px);
    overflow-y: auto;
    text-align: left;
}

.ergebnis-gruppe + .ergebnis-gruppe {
    border-top: 1px solid var(--linie);
}

.ergebnis-titel {
    display: block;
    padding: 0.9rem 1.2rem 0.3rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-leise);
}

.ergebnis-zeile {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 1.2rem;
    text-decoration: none;
    color: var(--text);
}

.ergebnis-zeile:hover,
.ergebnis-zeile:focus-visible {
    background: var(--gruen-flaeche);
    outline: none;
}

.ergebnis-initialen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--gruen-flaeche);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.9rem;
}

.ergebnis-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ergebnis-name {
    font-weight: 600;
}

.ergebnis-meta {
    font-size: 0.88rem;
    color: var(--text-leise);
}

.ergebnis-branche {
    justify-content: space-between;
}

.ergebnis-mehr {
    display: block;
    padding: 0.9rem 1.2rem;
    border-top: 1px solid var(--linie);
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.ergebnis-mehr:hover {
    background: var(--gruen-flaeche);
}

.ergebnis-leer {
    padding: 1.2rem;
    color: var(--text-leise);
}

.ergebnis-leer a {
    color: var(--primary);
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* --- Kennzahlen ------------------------------------------------------- */
.kennzahlen {
    background: var(--gruen-flaeche);
    padding: 2.6rem 2rem;
}

.kennzahlen-inner {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
}

.kennzahl + .kennzahl {
    border-left: 1px solid var(--linie);
}

.kennzahl-wert {
    display: block;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    color: var(--primary);
    line-height: 1.1;
}

.kennzahl-label {
    display: block;
    margin-top: 0.3rem;
    color: var(--text);
}

/* --- Mitglieder-Vorschau ---------------------------------------------- */
.mitglieder-vorschau {
    max-width: var(--breite);
    margin: 5rem auto 0;
    padding: 0 2rem;
}

.abschnitt-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2.2rem;
}

.abschnitt-kopf h2 {
    font-size: clamp(1.8rem, 3.4vw, 2.4rem);
    color: var(--text);
    margin-bottom: 0.35rem;
}

.abschnitt-kopf p {
    color: var(--text-leise);
    margin: 0;
}

.abschnitt-link {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.abschnitt-link:hover {
    text-decoration: underline !important;
}

.mitglieder-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.4rem;
}

.mitglied-kachel {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--white);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 1.1rem 1.3rem;
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--schatten);
    transition: transform 0.2s, box-shadow 0.2s;
    min-height: 94px;
}

.mitglied-kachel:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(20, 45, 30, 0.1);
}

.kachel-initialen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--gruen-flaeche);
    color: var(--primary);
    font-weight: 700;
}

.kachel-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.kachel-name {
    font-weight: 600;
    line-height: 1.3;
}

.kachel-branche {
    font-size: 0.9rem;
    color: var(--text-leise);
}

.kachel-pfeil {
    color: var(--primary);
    opacity: 0;
    transition: opacity 0.2s;
}

.mitglied-kachel:hover .kachel-pfeil {
    opacity: 1;
}

/* --- Bereiche und Aufruf ---------------------------------------------- */
.services {
    margin: 5rem auto;
}

.section-title {
    text-align: left;
    max-width: var(--breite);
    margin: 0 auto 2.2rem;
}

.section-title h2 {
    font-size: clamp(1.8rem, 3.4vw, 2.4rem);
}

.grid {
    gap: 1.6rem;
}

.service-card {
    border-radius: var(--radius);
    border: 1px solid var(--linie);
    box-shadow: var(--schatten);
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(20, 45, 30, 0.1);
}

.service-img {
    height: 180px;
    border-bottom-right-radius: 0;
}

.service-content {
    padding: 1.8rem;
}

.service-content h3 {
    font-size: 1.3rem;
    color: var(--text);
}

.service-content p {
    margin-bottom: 1.2rem;
}

.cta-strip {
    background: var(--gruen-band);
    max-width: var(--breite);
    margin: 5rem auto;
    padding: 3.4rem 2rem;
    border-radius: 24px;
    box-shadow: none;
    color: var(--text);
}

.cta-strip h3 {
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    margin-bottom: 0.6rem;
    color: var(--text);
}

.cta-text {
    color: var(--text-leise);
    margin-bottom: 1.8rem;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-strip .btn-outline {
    background: var(--white);
    border-width: 2px;
    padding: 0.9rem 2rem;
}

/* --- Knoepfe ----------------------------------------------------------- */
.btn-primary {
    background: var(--primary);
    border-radius: 10px;
    padding: 0.9rem 2rem;
    box-shadow: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
    background: #256428;
    box-shadow: 0 8px 20px rgba(46, 125, 50, 0.22);
    filter: none;
}

.btn-outline {
    border-radius: 10px;
}

/* --- Kopfbereich der Unterseiten --------------------------------------- */
.page-title {
    max-width: var(--breite);
    margin: 0 auto;
    padding: 3.5rem 2rem 1.5rem;
    text-align: left;
}

.page-title h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
}

.page-title p {
    color: var(--text-leise);
    margin: 0;
    max-width: 60ch;
}

.page-header {
    background: var(--gruen-flaeche);
    color: var(--text);
    margin-bottom: 3rem;
    padding: 3rem 2rem;
}

.page-header h1 {
    color: var(--text);
    font-weight: 700;
    font-size: clamp(1.9rem, 3.6vw, 2.5rem);
}

/* --- Mitgliederliste ---------------------------------------------------- */
.members-section {
    max-width: var(--breite);
}

.category {
    border-radius: var(--radius);
    border: 1px solid var(--linie);
    padding: 2rem 2.2rem;
    margin-bottom: 1.6rem;
    box-shadow: var(--schatten);
}

/* Keine farbige Kante an der Kartenseite */
.category::before {
    display: none;
}

.category h2 {
    font-size: 1.4rem;
    color: var(--text);
    border-bottom: 1px solid var(--linie);
    padding-bottom: 0.8rem;
    margin-bottom: 1.4rem;
}

.member-grid {
    gap: 0.9rem 2rem;
}

.member-item {
    gap: 0.7rem;
}

.member-bullet {
    width: 6px;
    height: 6px;
    background: var(--primary);
    opacity: 0.5;
}

.member-link {
    color: var(--text);
}

/* --- Meldungen ---------------------------------------------------------- */
.news-item {
    border-radius: var(--radius);
    border: 1px solid var(--linie);
    box-shadow: var(--schatten);
}

/* --- Fussbereich -------------------------------------------------------- */
footer {
    border-top: 1px solid var(--linie);
}

/* --- Schmale Bildschirme ------------------------------------------------ */
@media (max-width: 900px) {
    .hero.hero-suche {
        min-height: 78vh;
        padding-bottom: 3rem;
    }

    .suche-feld {
        flex-wrap: wrap;
        padding: 0.6rem;
    }

    .suche-eingabe {
        flex-basis: 100%;
        order: 2;
        padding: 0.4rem 0.4rem 0.6rem;
    }

    .suche-icon {
        order: 1;
        padding-left: 0.4rem;
    }

    .suche-knopf {
        order: 3;
        width: 100%;
    }

    .kennzahlen-inner {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .kennzahl-wert {
        font-size: 1.7rem;
    }

    .kennzahl-label {
        font-size: 0.9rem;
    }

    .abschnitt-kopf {
        margin-bottom: 1.6rem;
    }

    .mitglieder-vorschau,
    .services,
    .cta-strip {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }
}

/* --- Filterbereich der Mitgliederseite ---------------------------------- */
.mitglieder-filter {
    max-width: var(--breite);
    margin: 0 auto 2.5rem;
    padding: 0 2rem;
}

.wkr-suche-hell {
    max-width: 560px;
}

.wkr-suche-hell .suche-feld {
    border: 1px solid var(--linie);
    box-shadow: var(--schatten);
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.2rem;
}

.filter-chip {
    font: inherit;
    font-size: 0.95rem;
    padding: 0.45rem 1rem;
    border: 1px solid var(--linie);
    background: var(--white);
    color: var(--text);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.filter-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.filter-chip.aktiv {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.filter-chip:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.filter-status {
    margin-top: 1.1rem;
    color: var(--text-leise);
    font-size: 0.95rem;
}

.keine-treffer {
    max-width: var(--breite);
    margin: 0 auto;
    padding: 2rem;
    color: var(--text-leise);
}

.member-item[hidden],
.category[hidden] {
    display: none !important;
}

/* --- Korrekturen: Video sauber clippen, Dropdown darf herausragen -------- */
.hero.hero-suche {
    overflow: visible;
    -webkit-mask-image: none;
}

.hero.hero-suche .hero-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 0 0 32px 32px;
    z-index: 0;
    transform: translateZ(0);
}

.hero.hero-suche .video-bg {
    z-index: 0;
}

.hero.hero-suche .hero-overlay {
    z-index: 1;
}

/* Fokus auf das ganze Feld statt eines zweiten Rahmens im Feld */
.suche-eingabe:focus,
.suche-eingabe:focus-visible {
    outline: none;
}

.suche-feld:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.suche-chip {
    padding: 0.4rem 0.9rem;
    font-size: 0.92rem;
}

/* Overlay kraeftiger, damit die weisse Schrift auf hellen Videobildern haelt */
.hero.hero-suche .hero-overlay {
    background:
        linear-gradient(100deg, rgba(10, 26, 16, 0.86) 0%, rgba(10, 26, 16, 0.66) 38%, rgba(10, 26, 16, 0.34) 66%, rgba(10, 26, 16, 0.18) 100%),
        linear-gradient(to top, rgba(10, 26, 16, 0.5) 0%, rgba(10, 26, 16, 0.08) 55%);
}

@media (max-width: 900px) {
    /* Lupe und Eingabe bleiben in einer Zeile, nur der Knopf rutscht darunter */
    .suche-eingabe {
        flex: 1 1 auto;
        flex-basis: auto;
        order: 2;
        padding: 0.5rem 0.2rem;
    }

    .suche-icon {
        order: 1;
        padding-left: 0.3rem;
    }

    .suche-knopf {
        order: 3;
        flex-basis: 100%;
        margin-top: 0.4rem;
    }
}

/* --- Branchen-Kacheln auf der Startseite -------------------------------- */
.branchen-uebersicht {
    max-width: var(--breite);
    margin: 5rem auto 0;
    padding: 0 2rem;
}

.branchen-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.1rem;
}

.branchen-kachel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    min-height: 92px;
    padding: 1.1rem 1.3rem;
    background: var(--white);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    text-decoration: none;
    color: var(--text);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.branchen-kachel:hover {
    transform: translateY(-3px);
    border-color: rgba(46, 125, 50, 0.35);
    box-shadow: 0 12px 30px rgba(20, 45, 30, 0.1);
}

.branchen-name {
    font-weight: 600;
    line-height: 1.3;
}

.branchen-anzahl {
    font-size: 0.9rem;
    color: var(--text-leise);
}

/* --- Kopfleiste: schmaler beim Scrollen --------------------------------- */
.top-bar {
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
    max-height: 44px;
    overflow: hidden;
}

body.seite-gescrollt .top-bar {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

header {
    transition: margin 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;
}

.nav-container {
    transition: padding 0.3s ease;
}

.logo {
    transition: font-size 0.3s ease, padding 0.3s ease;
}

body.seite-gescrollt header {
    margin: 0.5rem 1rem;
    top: 0.5rem;
    box-shadow: 0 6px 22px rgba(20, 45, 30, 0.12);
}

body.seite-gescrollt .nav-container {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

body.seite-gescrollt .logo {
    font-size: 1.2rem;
}

body.seite-gescrollt nav a {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

body.seite-gescrollt .mobile-only-btn,
body.seite-gescrollt nav .btn-outline {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

@media (prefers-reduced-motion: reduce) {
    .top-bar,
    header,
    .nav-container,
    .logo {
        transition: none;
    }
}

body.seite-gescrollt header {
    background: rgba(255, 255, 255, 0.96);
}

/* Logo oder Initialen im Suchergebnis: immer gleich grosse Flaeche */
.ergebnis-bild {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e4e9e5;
    overflow: hidden;
    padding: 4px;
}

.ergebnis-bild img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.ergebnis-initialen {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: #eef4ef;
    border: 1px solid #e4e9e5;
    color: #2E7D32;
    font-weight: 700;
    font-size: 0.95rem;
}


/* --- Mitgliedsseite: Slogan hervorheben, Fliesstext ruhig ---------------- */
.member-description #mitgliederbeschreibung {
    display: block;
    margin-bottom: 0.6rem;
}

.member-description #mitgliederbeschreibung strong,
.member-description > p:first-of-type > strong:only-child {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.45;
}

.member-description p {
    margin-bottom: 1rem;
}

/* --- Branchen-Kacheln mit zurueckhaltendem Symbol ----------------------- */
.branchen-kachel {
    flex-direction: row;
    align-items: center;
    gap: 0.95rem;
}

.branchen-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--gruen-flaeche);
    color: var(--primary);
    opacity: 0.85;
    transition: opacity 0.2s;
}

.branchen-icon {
    width: 21px;
    height: 21px;
}

.branchen-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.branchen-kachel:hover .branchen-symbol {
    opacity: 1;
}

/* Symbole aller Kacheln auf gleicher Hoehe, damit das Raster ruhig bleibt */
.branchen-kachel {
    align-items: flex-start;
    padding: 1.15rem 1.3rem;
}

.branchen-text {
    padding-top: 0.15rem;
}

.branchen-symbol {
    width: 38px;
    height: 38px;
}

.branchen-icon {
    width: 20px;
    height: 20px;
}

/* --- Suchfenster in der Kopfleiste -------------------------------------- */
.suche-oeffnen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-left: 0.6rem;
    border: 1px solid var(--linie);
    border-radius: 50%;
    background: var(--white);
    color: var(--primary);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    flex-shrink: 0;
}

.suche-oeffnen:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.suche-oeffnen:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.suche-fenster {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.suche-fenster[hidden] {
    display: none !important;
}

.suche-fenster-flaeche {
    position: absolute;
    inset: 0;
    background: rgba(12, 30, 19, 0.45);
    backdrop-filter: blur(3px);
    animation: wkr-einblenden 0.2s ease;
}

.suche-fenster-inhalt {
    position: relative;
    width: min(720px, calc(100% - 2rem));
    margin-top: 12vh;
    padding: 2rem 2rem 2.2rem;
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(10, 30, 18, 0.3);
    animation: wkr-aufsteigen 0.25s ease;
}

.suche-fenster-titel {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1rem;
}

.suche-fenster .wkr-suche {
    max-width: none;
}

.suche-fenster .suche-feld {
    border: 1px solid var(--linie);
    box-shadow: none;
}

.suche-fenster .suche-ergebnis {
    position: static;
    margin-top: 0.8rem;
    box-shadow: none;
    border: 1px solid var(--linie);
    max-height: 46vh;
}

.suche-schliessen {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-leise);
    cursor: pointer;
}

.suche-schliessen:hover {
    background: var(--gruen-flaeche);
    color: var(--text);
}

body.suche-offen {
    overflow: hidden;
}

@keyframes wkr-einblenden {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes wkr-aufsteigen {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: none; }
}

/* --- Sanftes Einblenden beim Scrollen ----------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.55s ease, transform 0.55s ease;
    will-change: opacity, transform;
}

.reveal.sichtbar {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.sichtbar {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .suche-fenster-flaeche,
    .suche-fenster-inhalt {
        animation: none;
    }
}

@media (max-width: 900px) {
    /* Lupe und Menuknopf stehen nebeneinander rechts vom Namen */
    .suche-oeffnen {
        width: 32px;
        height: 32px;
        margin-left: 0.3rem;
        margin-right: 0.4rem;
        order: 2;
        flex-shrink: 0;
    }

    .nav-container .mobile-menu-toggle {
        order: 3;
        margin-left: 0;
    }

    /* Der Name nimmt den Rest der Zeile und bricht um, Lupe und Menu behalten ihren Platz */
    .nav-container .logo {
        /* schmale Basis: der Name bricht um, statt die Knoepfe zu verdraengen */
        flex: 1 1 120px;
        min-width: 0;
        max-width: none;
        font-size: 0.9rem;
        line-height: 1.25;
        padding-left: 0.2rem;
        padding-right: 0.2rem;
    }

    .suche-oeffnen svg {
        width: 19px;
        height: 19px;
    }

    .nav-container nav {
        order: 4;
    }

    .suche-fenster-inhalt {
        margin-top: 8vh;
        padding: 1.5rem 1.2rem 1.8rem;
    }
}

/* Inhalt der Branchen-Kacheln beginnt immer links, sonst wandern die Symbole */
.branchen-kachel {
    justify-content: flex-start;
}

/* Aktive Zeile bei Tastaturbedienung */
.suche-ergebnis .ergebnis-zeile.ergebnis-aktiv,
.suche-ergebnis .ergebnis-mehr.ergebnis-aktiv {
    background: #eef4ef;
    outline: none;
}

.suche-ergebnis a:focus-visible {
    outline: 2px solid #2E7D32;
    outline-offset: -2px;
}


/* --- Branchen-Chips: eine wischbare Zeile mit allen Branchen ------------- */
.suche-chips-huelle {
    position: relative;
    margin-top: 1.1rem;
    max-width: 100%;
}



.suche-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin-top: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 0.2rem;
    scroll-padding-left: 0.2rem;
}

.suche-chips::-webkit-scrollbar {
    display: none;
}

.suche-chips .suche-chip {
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.chip-zahl {
    font-size: 0.78rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    color: inherit;
}

.suche-chip:hover .chip-zahl {
    background: rgba(46, 125, 50, 0.14);
}

.suche-chip.chip-alle {
    font-weight: 600;
}

.wkr-suche-hell .chip-zahl,
.suche-fenster .chip-zahl {
    background: var(--gruen-flaeche);
    color: var(--primary);
}

/* Das Suchfeld bleibt schmal, die Branchenzeile darf die ganze Spalte nutzen */
.hero-suche .wkr-suche {
    max-width: none;
}

.hero-suche .suche-feld {
    max-width: 660px;
}

.hero-suche .suche-ergebnis {
    right: auto;
    width: 660px;
    max-width: 100%;
}

.hero-suche .suche-chips-huelle {
    max-width: min(1040px, 100%);
}

/* Chip-Zeile an den Rändern ausblenden: das angeschnittene Chip zeigt,
   dass sich die Zeile seitlich schieben lässt. Die Maske arbeitet
   unabhängig vom Hintergrund, also auch über dem Video. */
.suche-chips {
    --maske-links: 0px;
    --maske-rechts: 0px;
    -webkit-mask-image: linear-gradient(to right,
            transparent 0,
            #000 var(--maske-links),
            #000 calc(100% - var(--maske-rechts)),
            transparent 100%);
    mask-image: linear-gradient(to right,
            transparent 0,
            #000 var(--maske-links),
            #000 calc(100% - var(--maske-rechts)),
            transparent 100%);
    transition: -webkit-mask-image 0.2s ease, mask-image 0.2s ease;
}

.suche-chips.hat-links {
    --maske-links: 52px;
}

.suche-chips.hat-rechts {
    --maske-rechts: 64px;
}

/* etwas Luft, damit das erste Chip nicht an der Kante klebt */
.suche-chips {
    padding-left: 2px;
    padding-right: 2px;
}

/* --- Logo auf der Mitgliedsseite: begrenzte Hoehe statt volle Breite ----- */
.member-image-container .member-image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 240px;
    height: auto;
    margin: 0 auto;
    border-radius: 10px;
}

@media (max-width: 900px) {
    /* Reihenfolge am Telefon: Logo, dann Beschreibung, dann Hinweise und Kontakt */
    .member-sidebar {
        display: contents;
    }

    .member-image-container {
        order: -2;
        margin-bottom: 0;
        padding: 1.1rem !important;
    }

    .member-info {
        order: -1;
    }

    .current-offer-box {
        order: 1;
    }

    .member-contact,
    .member-karte,
    .osm-karte {
        order: 2;
    }

    .member-image-container .member-image {
        max-height: 130px;
    }
}

/* --- Chips auf hellem Grund (Suchfenster und Mitgliederseite) ------------ */
.suche-fenster .suche-chip,
.wkr-suche-hell .suche-chip {
    color: var(--text);
    background: var(--white);
    border-color: var(--linie);
}

.suche-fenster .suche-chip:hover,
.wkr-suche-hell .suche-chip:hover {
    background: var(--gruen-flaeche);
    border-color: var(--primary);
    color: var(--primary);
}

.suche-fenster .suche-chips-huelle {
    margin-top: 0.9rem;
}

/* Kopfleiste etwas durchscheinender, dafür stärker weichgezeichnet */
header {
    background: rgba(255, 255, 255, 0.74);
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
}

body.seite-gescrollt header {
    background: rgba(255, 255, 255, 0.82);
}

/* Falls der Browser kein Weichzeichnen kann, bleibt es deckender lesbar */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    header,
    body.seite-gescrollt header {
        background: rgba(255, 255, 255, 0.95);
    }
}