/* =========================================================
   COMPUTER ZIMMERER – Stylesheet
   ========================================================= */

:root {
    --bg-color: #F4F0E6;
    --text-dark: #1A2F2B;
    --text-body: #4A5A56;
    --accent-green: #2E4A41;
    --accent-green-hover: #1F332D;
    --accent-orange: #D17A52;
    --accent-orange-soft: rgba(209, 122, 82, 0.12);
    --white: #FFFFFF;
    --card-bg: #FBF8F1;
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Inter', sans-serif;
    --max-width: 1300px;
    --section-padding: 6rem 5%;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --shadow-soft: 0 10px 30px rgba(26, 47, 43, 0.07);
    --shadow-hover: 0 18px 40px rgba(26, 47, 43, 0.12);
}

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

html {
    scroll-behavior: smooth;
    min-height: 100%;
}

body {
    background-color: var(--bg-color);
    color: var(--text-body);
    font-family: var(--font-sans);
    line-height: 1.7;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* ============ DEKO-LINIEN ============ */
.decoration-line {
    position: absolute;
    top: 120px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(209, 122, 82, 0.18);
    z-index: 0;
}

.decoration-line-2 {
    position: absolute;
    top: 130px;
    left: 5%;
    width: 22%;
    height: 1px;
    background-color: var(--accent-orange);
    z-index: 0;
}

/* ============ HEADER – sticky, dünn ============ */
header {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 0.9rem 5%;
    background-color: rgba(244, 240, 230, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(209, 122, 82, 0.15);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--max-width);
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 1rem;
}

.logo {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
    letter-spacing: -0.4px;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.logo:hover {
    color: var(--accent-orange);
}

/* Hauptnavigation – NUR die oberste Ebene */
nav>ul {
    display: flex;
    list-style: none;
    gap: 1.8rem;
    flex-wrap: wrap;
    align-items: center;
}

nav>ul>li>a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 500;
    font-size: 0.92rem;
    letter-spacing: 0.2px;
    transition: color 0.3s ease;
}

nav>ul>li>a:hover {
    color: var(--accent-orange);
}

.info-text .info-sub {
    font-size: 0.88rem;
    color: var(--text-body);
    opacity: 0.75;
    margin-top: 0.15rem;
}

/* Telefon und Telefax nebeneinander */
.info-block-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: flex-start;
}

.info-split-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

/* Kontakt-Button in der Navigation */
/* =========================================================
   NAV-CTA – Kontakt / Abmelden (identisch auf allen Seiten)
   ========================================================= */

nav>ul>li>a.nav-cta,
nav ul li a.nav-cta,
nav a.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-green);
    color: var(--white);
    padding: 0.55rem 1.2rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-family: var(--font-sans);
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 1.2;
    text-decoration: none;
    border: none;
    height: auto;
    transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease;
}

nav>ul>li>a.nav-cta:hover,
nav ul li a.nav-cta:hover,
nav a.nav-cta:hover {
    background-color: var(--accent-green-hover);
    color: var(--white);
    transform: translateY(-1px);
}

/* ============ BUTTONS ============ */

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.6rem 1.4rem;

    background: linear-gradient(135deg,
            var(--accent-green) 0%,
            #3A5C51 100%);
    color: var(--white);

    border: none;
    border-radius: 999px;

    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.4px;
    line-height: 1;

    text-decoration: none;

    box-shadow:
        0 4px 14px rgba(46, 74, 65, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);

    transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease,
        background-position 0.6s ease;

    background-size: 200% 200%;
    background-position: 0% 50%;
}

.btn-primary:hover {
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow:
        0 8px 22px rgba(46, 74, 65, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-secondary {
    position: relative;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    padding-bottom: 6px;
}

.btn-secondary::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;

    /* Ruhezustand: gerade Linie */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 10' preserveAspectRatio='none'><line x1='0' y1='5' x2='150' y2='5' stroke='%23D17A52' stroke-width='2' stroke-linecap='round'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    transition: background-image 0.4s ease;
}

.btn-secondary:hover::after {
    /* Hover: große Welle – wie im Hero */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 10' preserveAspectRatio='none'><path d='M0 5 Q 37.5 10, 75 5 T 150 5' stroke='%23D17A52' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
}

/* ============ SEKTIONEN ALLGEMEIN ============ */
section {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--section-padding);
}

h2 {
    font-family: var(--font-serif);
    font-size: 2.6rem;
    color: var(--text-dark);
    margin-bottom: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.3px;
}

h3 {
    font-family: var(--font-serif);
    color: var(--text-dark);
    font-size: 1.25rem;
    margin-bottom: 0.6rem;
    font-weight: 600;
}

/* ============ HERO ============ */
.hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem;
    align-items: center;
    min-height: calc(100vh - 90px);
    /* ← volle Fensterhöhe minus Header */
    padding-top: 3rem;
    padding-bottom: 3rem;
}



.hero-content .location {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--accent-orange);
    margin-bottom: 1.3rem;
    font-weight: 500;
}

.hero-content h1 {
    font-family: var(--font-serif);
    font-size: 4rem;
    line-height: 1.1;
    color: var(--text-dark);
    margin-bottom: 1.3rem;
    font-weight: 600;
    letter-spacing: -1px;
}

/* Geschwungene Linie unter "Hannesried" */
.hero-content h1 .highlight {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

.hero-content h1 .highlight::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 10' preserveAspectRatio='none'><path d='M0 5 Q 37.5 10, 75 5 T 150 5' stroke='%23D17A52' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.hero-content .description {
    font-size: 1.12rem;
    max-width: 520px;
    margin-bottom: 2.2rem;
}

.cta-group {
    display: flex;
    align-items: center;
    gap: 1.8rem;
    flex-wrap: wrap;
}

/* ============ HERO LOGO ============ */
.hero-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 1rem;
}

.hero-logo {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
    object-fit: contain;

    /* weicher, dezenter Schatten – lässt das Logo sanft schweben */
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.12)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.06)) blur(0.3px);

    /* wirkt etwas weicher eingebettet */
    opacity: 0.97;

    /* sanfte Übergänge für Hover */
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.6s ease,
        opacity 0.6s ease;

    will-change: transform, filter;
}

/* Beim Hover: sanft hoch, Schatten weicher, ganz leicht schärfer */
.hero-logo-wrapper:hover .hero-logo {
    transform: translateY(-2px) scale(1.015);
    filter: drop-shadow(0 14px 32px rgba(0, 0, 0, 0.16)) drop-shadow(0 3px 10px rgba(0, 0, 0, 0.08)) blur(0);
    opacity: 1;
}

/* Auf Handy: Hover aus */
@media (max-width: 768px) {
    .hero-logo-wrapper:hover .hero-logo {
        transform: none;
        filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.12)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.06)) blur(0.3px);
        opacity: 0.97;
    }
}

/* ============ HERO LOCATION – Mobile ============ */
@media (max-width: 640px) {
    .hero-content .location {
        font-size: 0.82rem;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }
}

@media (max-width: 400px) {
    .hero-content .location {
        font-size: 0.76rem;
        letter-spacing: 0.04em;
    }
}

@media (max-width: 360px) {
    .hero-content .location {
        font-size: 0.72rem;
        letter-spacing: 0.03em;
    }
}

/* =========================================================
   ÜBER UNS – Profile, versetzt links/rechts
   ========================================================= */
.about {
    padding: 8rem 5% 7rem 5%;
    border-top: 1px solid rgba(209, 122, 82, 0.2);
    background: linear-gradient(180deg, var(--bg-color) 0%, #F8F3E9 100%);
    position: relative;
    overflow: hidden;
}

.about-inner {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

/* ---------- Kopf ---------- */
.about-header {
    max-width: 640px;
    margin: 0 auto 6rem auto;
    text-align: center;
}

.about-kicker {
    display: inline-block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-orange);
    font-weight: 500;
    margin-bottom: 1.2rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(209, 122, 82, 0.3);
}

.about-header h2 {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
    color: var(--text-dark);
    font-weight: 600;
    letter-spacing: -0.5px;
    margin: 0 0 1.4rem 0;
}

.about-intro {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--text-body);
    margin: 0;
}

/* =========================================================
   PROFIL – vertikale Linie mit Nummer, Inhalt daneben
   ========================================================= */
.about-profile {
    position: relative;
    max-width: 800px;
    padding: 3rem 0;
}

/* Bernd links */
.about-profile-bernd {
    margin-left: 0;
    margin-right: auto;
}

/* Raphael rechts, versetzt */
.about-profile-raphael {
    margin-left: auto;
    margin-right: 0;
    padding-top: 4rem;
}

/* ---------- Inhalt ---------- */
.profile-content {
    position: relative;
    padding-left: 2.5rem;
}

/* Vertikale Linie */
.profile-content::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 1px;
    background: linear-gradient(180deg,
            rgba(209, 122, 82, 0.35) 0%,
            rgba(209, 122, 82, 0.1) 100%);
}

/* Nummer sitzt auf der Linie */
.profile-mark {
    position: absolute;
    left: -1.1rem;
    top: 0;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent-orange);
    background-color: var(--bg-color);
    padding: 0 0.4rem;
    line-height: 1.4;
}

.profile-content h3 {
    font-family: var(--font-serif);
    font-size: 2.1rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.15;
    letter-spacing: -0.4px;
    margin: 0 0 0.5rem 0;
}

.profile-role {
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--accent-orange);
    line-height: 1.5;
    letter-spacing: 0.2px;
    margin: 0 0 1.8rem 0;
}

.profile-text {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--text-body);
    margin: 0 0 1.2rem 0;
}

.profile-text:last-of-type {
    margin-bottom: 2rem;
}

.profile-text strong {
    color: var(--text-dark);
    font-weight: 600;
}

/* ---------- Fakten in 3 Spalten ---------- */
.profile-facts {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 1.8rem 0 0 0;
    margin: 0;
    border-top: 1px solid rgba(209, 122, 82, 0.18);
}

.profile-facts li {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Counter-Fade beim Hochzählen */
.fact-value {
    display: inline-block;
    min-width: 1ch;
    transition: opacity 0.3s ease;
}

.fact-value.is-counting {
    opacity: 0.7;
}

.fact-value {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.1;
    letter-spacing: -0.3px;
}

.fact-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-body);
    line-height: 1.4;
    font-weight: 500;
}

/* =========================================================
   ROTIERENDER STEMPEL
   ========================================================= */
.about-stamp {
    position: absolute;
    top: 14%;
    right: -30px;
    width: 170px;
    height: 170px;
    color: var(--accent-orange);
    opacity: 0.5;
    pointer-events: none;
    animation: stampRotate 60s linear infinite;
    z-index: 0;
}

.about-stamp svg {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes stampRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   LUCI – mit Bild, integriert
   ========================================================= */
.about-luci {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 3.5rem;
    align-items: center;
    margin-top: 5rem;
    padding-top: 4rem;
    border-top: 1px solid rgba(209, 122, 82, 0.15);
    position: relative;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.luci-photo {
    width: 240px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.luci-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 16px 32px rgba(26, 47, 43, 0.15)) drop-shadow(0 4px 10px rgba(26, 47, 43, 0.06));
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.6s ease;
}

.about-luci:hover .luci-photo img {
    transform: translateY(-6px);
    filter: drop-shadow(0 24px 44px rgba(26, 47, 43, 0.20)) drop-shadow(0 6px 14px rgba(26, 47, 43, 0.08));
}

.luci-content {
    position: relative;
    padding-left: 2.5rem;
}

.luci-content::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 1px;
    background: linear-gradient(180deg,
            rgba(209, 122, 82, 0.35) 0%,
            rgba(209, 122, 82, 0.1) 100%);
}

.luci-kicker {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-orange);
    font-weight: 500;
    margin-bottom: 0.6rem;
}

.luci-content h3 {
    font-family: var(--font-serif);
    font-size: 2.1rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.15;
    letter-spacing: -0.4px;
    margin: 0 0 1.2rem 0;
}

.luci-content p {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--text-body);
    margin: 0;
}

.luci-content p strong {
    color: var(--text-dark);
    font-weight: 600;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
    .about-profile {
        max-width: 100%;
    }

    .profile-content h3,
    .luci-content h3 {
        font-size: 1.7rem;
    }

    .profile-facts {
        grid-template-columns: 1fr 1fr;
        gap: 1.2rem;
    }

    .about-luci {
        grid-template-columns: 200px 1fr;
        gap: 2.5rem;
        max-width: 100%;
    }

    .luci-photo {
        width: 200px;
        height: 240px;
    }
}

@media (max-width: 768px) {
    .about {
        padding: 5rem 6% 4rem 6%;
    }

    .about-header {
        margin-bottom: 3.5rem;
    }

    .about-profile,
    .about-profile-bernd,
    .about-profile-raphael {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 2rem 0;
    }

    .about-profile-raphael {
        padding-top: 2rem;
    }

    /* Vertikale Linie weg, Nummer oben */
    .profile-content {
        padding-left: 0;
    }

    .profile-content::before {
        display: none;
    }

    .profile-mark {
        position: static;
        display: inline-block;
        background: none;
        padding: 0;
        font-size: 0.9rem;
        margin-bottom: 0.4rem;
    }

    .profile-facts {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
        text-align: center;
        justify-items: center;
    }

    .profile-facts li {
        align-items: center;
    }

    .fact-value {
        font-size: 1.2rem;
    }

    .fact-label {
        font-size: 0.7rem;
        letter-spacing: 1px;
    }

    /* Luci */
    .about-luci {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-top: 3.5rem;
        padding-top: 2.5rem;
        text-align: center;
        justify-items: center;
    }

    .luci-photo {
        width: 200px;
        height: 240px;
    }

    .luci-content {
        padding-left: 0;
    }

    .luci-content::before {
        display: none;
    }

    .luci-content p {
        margin: 0 auto;
    }

    .about-stamp {
        display: none;
    }
}

@media (max-width: 480px) {
    .profile-facts {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .profile-content h3,
    .luci-content h3 {
        font-size: 1.5rem;
    }

    .profile-role {
        font-size: 0.86rem;
    }

    .luci-photo {
        width: 170px;
        height: 200px;
    }
}

/* =========================================================
   ÜBER UNS – sanftes, gestaffeltes Erscheinen
   ========================================================= */
.about-animate {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.about-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Ruhige Staffelung */
.about-header.about-animate {
    transition-delay: 0s;
}

.about-profile-bernd.about-animate {
    transition-delay: 0.25s;
}

.about-profile-raphael.about-animate {
    transition-delay: 0.50s;
}

.about-luci.about-animate {
    transition-delay: 0.75s;
}

/* Auf Handy: sanfter, weil man direkt hinscrollt */
@media (max-width: 768px) {
    .about-animate {
        transform: translateY(12px);
        transition:
            opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
            transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .about-header.about-animate {
        transition-delay: 0s;
    }

    .about-profile-bernd.about-animate {
        transition-delay: 0.12s;
    }

    .about-profile-raphael.about-animate {
        transition-delay: 0.22s;
    }

    .about-luci.about-animate {
        transition-delay: 0.32s;
    }
}

/* Wer reduzierte Bewegung will, bekommt sie */
@media (prefers-reduced-motion: reduce) {
    .about-animate {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============ LEISTUNGEN ============ */
.services {
    padding-top: 6rem;
}

.services-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 4rem auto;
}

.services-header h2 {
    margin-bottom: 0.8rem;
}

.services-intro {
    font-size: 1.08rem;
    color: var(--text-body);
}

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

.service-card {
    position: relative;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(209, 122, 82, 0.25);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    border-bottom-color: var(--accent-orange);
}

.service-icon {
    width: 52px;
    height: 52px;
    background-color: var(--accent-orange-soft);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-green);
    margin-bottom: 1.4rem;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.service-card:hover .service-icon {
    background-color: var(--accent-green);
    color: var(--white);
    transform: rotate(-6deg);
}

.service-icon svg {
    width: 26px;
    height: 26px;
    display: block;
}

.service-card h3 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.6rem;
}

.service-card p {
    font-size: 0.97rem;
    line-height: 1.65;
    color: var(--text-body);
}

/* ============ PARTNER (Slider) ============ */
.partners {
    padding-top: 6rem;
    overflow: hidden;
}

.partners-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 3rem auto;
}

.partners-header h2 {
    margin-bottom: 0.8rem;
}

.partners-intro {
    font-size: 1.08rem;
    color: var(--text-body);
    line-height: 1.7;
}

.slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 1rem 0 2rem 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.slider-track {
    display: flex;
    width: max-content;
    animation: slide 32s linear infinite;
}

.slider:hover .slider-track {
    animation-play-state: paused;
}

@keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Kasten unsichtbar gemacht – Größe & Abstand bleiben exakt gleich */
.partner-card {
    background-color: transparent;
    /* War: var(--white) */
    border-radius: var(--radius-md);
    padding: 1.4rem 1.6rem;
    box-shadow: none;
    /* War: var(--shadow-soft) */
    border: none;
    /* War: 1px solid rgba(209, 122, 82, 0.1) */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 120px;
    flex-shrink: 0;
    margin-right: 1.6rem;
    transition: transform 0.3s ease;
}

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

.partner-logo-img {
    max-width: 100%;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.partners-footer {
    text-align: center;
    font-size: 0.96rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(209, 122, 82, 0.2);
    max-width: 780px;
    margin: 0 auto;
    color: var(--text-body);
    font-style: italic;
}

/* =========================================================
   KONTAKT-MODAL – eine Karte, innen zweigeteilt
   ========================================================= */
.contact-modal {
    background-color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(209, 122, 82, 0.1);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 4rem;
}

/* Linke Hälfte – Info + Karte */
.contact-modal-info {
    padding: 2.5rem 2.2rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    border-right: 1px solid rgba(209, 122, 82, 0.12);
    background-color: #FCFAF5;
}

.info-block {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
}

.info-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 50%;
    background-color: var(--accent-orange-soft);
    color: var(--accent-green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.info-icon svg {
    width: 22px;
    height: 22px;
}

.info-text h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.3rem;
    line-height: 1.3;
}

.info-text p {
    font-size: 0.98rem;
    color: var(--text-body);
    line-height: 1.55;
    margin: 0;
}

.info-text p a {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s ease;
}

.info-text p a:hover {
    color: var(--accent-orange);
}

/* Karte innerhalb der Info-Hälfte */
.info-map {
    width: 100%;
    flex-grow: 1;
    max-height: 220px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(26, 47, 43, 0.08);
    border: 1px solid rgba(209, 122, 82, 0.15);
    margin-top: 0.5rem;
    background-color: #eee;
}

.info-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    min-height: 200px;
}

/* Rechte Hälfte – Formular */
.contact-modal-form {
    padding: 2.5rem 2.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ============ KONTAKT ============ */
.contact {
    padding-top: 6rem;
    padding-bottom: 1.5rem;
}

.contact-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 3rem auto;
}

.contact-header h2 {
    margin-bottom: 0.8rem;
}

.contact-header p {
    font-size: 1.08rem;
}

.contact-form-wrapper {
    background-color: var(--white);
    border-radius: var(--radius-lg);
    padding: 2.8rem 3rem;
    box-shadow: var(--shadow-soft);
    max-width: 90%;
    margin: 0 auto;
    border: 1px solid rgba(209, 122, 82, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

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

.form-group label {
    display: block;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 0.95rem 1.1rem;
    border: 1px solid #e2ddd0;
    border-radius: var(--radius-sm);
    background-color: #FCFAF5;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--text-dark);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-green);
    background-color: var(--white);
    box-shadow: 0 0 0 3px rgba(46, 74, 65, 0.08);
}

.form-group textarea {
    resize: vertical;
    min-height: 140px;
    font-family: var(--font-sans);
}

/* =========================================================
   CHECKBOX-GROUP – schön in einer Zeile
   ========================================================= */
.checkbox-group {
    display: flex;
    align-items: center;
    /* ← zentriert zur ersten Zeile */
    gap: 0.75rem;

    margin-top: 1.4rem;
    padding: 1rem 1.1rem;
    background-color: #FCFAF5;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(209, 122, 82, 0.12);
}

/* Checkbox – feste Größe, mittig zur Textzeile */
.checkbox-group input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--accent-green);
}

/* Label – nimmt restlichen Platz, Text in einer Zeile */
.checkbox-group label {
    flex: 1;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-body);
    margin: 0;
    cursor: pointer;
    display: inline-block;
}

/* Link im Label */
.checkbox-group label a {
    color: var(--text-dark);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-orange);
    padding-bottom: 1px;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.checkbox-group label a:hover {
    color: var(--accent-orange);
    border-color: var(--accent-green);
}

.required-note {
    font-size: 0.85rem;
    color: #999;
    margin-bottom: 1.4rem;
}

/* =========================================================
   SUBMIT-BUTTON – zentriert
   ========================================================= */
.btn-submit {
    display: flex;
    margin: 1.5rem auto 0 auto;
    /* ← auto = horizontal zentriert */
    max-width: 300px;
    width: 100%;
}

/* Kontakt-Details (Anschrift + Karte) */
.contact-details {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 4rem;
    align-items: center;
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(209, 122, 82, 0.2);
}

.contact-address h3 {
    font-family: var(--font-serif);
    font-size: 1.7rem;
    margin-bottom: 1.3rem;
}

.contact-address p {
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
    color: var(--text-body);
}

.contact-address .contact-strong {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.contact-address .phone-large {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.95rem;
    color: var(--text-dark);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--accent-orange);
    padding-bottom: 4px;
    margin-top: 1.7rem;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
    width: fit-content;
}

.contact-address .phone-large:hover {
    color: var(--accent-orange);
}

.contact-address .fax {
    font-size: 0.97rem;
    color: var(--text-body);
    margin-bottom: 0.8rem;
}

.contact-address .email-link {
    display: inline-block;
    font-size: 1.05rem;
    color: var(--text-dark);
    text-decoration: none;
    border-bottom: 2px solid var(--accent-orange);
    padding-bottom: 2px;
    margin-bottom: 1.3rem;
    transition: color 0.3s ease;
}

.contact-address .email-link:hover {
    color: var(--accent-orange);
}

.contact-address .appointment-note {
    font-size: 0.98rem;
    color: var(--text-body);
    margin-top: 1.3rem;
    margin-bottom: 2.5rem;
    /* ← mehr Luft nach unten */
    font-style: italic;
}

/* Karte */
.contact-map {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.google-map {
    width: 100%;
    max-width: 500px;
    height: 420px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    background-color: var(--white);
    border: 1px solid rgba(209, 122, 82, 0.1);
}

.google-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}


/* =========================================================
   KONTAKT – MOBILE: Anschrift oben, Formular unten
   ========================================================= */

/* ---------- Tablet / kleine Laptops ---------- */
@media (max-width: 960px) {

    .contact-modal {
        grid-template-columns: 1fr;
        margin-top: 3rem;
    }

    /* Reihenfolge erzwingen: Info zuerst, Formular danach */
    .contact-modal-info {
        order: 1;
        border-right: none;
        border-bottom: 1px solid rgba(209, 122, 82, 0.12);
        padding: 2rem 1.8rem;
        gap: 1.2rem;
    }

    .contact-modal-form {
        order: 2;
        padding: 2rem 1.8rem;
    }

    .info-map {
        min-height: 240px;
    }

    .info-map iframe {
        min-height: 240px;
    }

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

    .google-map {
        max-width: 100%;
        height: 360px;
    }
}

/* ---------- Handy ---------- */
@media (max-width: 640px) {

    .contact {
        padding-top: 4rem;
        padding-bottom: 1rem;
    }

    .contact-header {
        margin-bottom: 2rem;
        padding: 0 0.5rem;
    }

    .contact-header p {
        font-size: 1rem;
    }

    .contact-modal {
        margin-top: 2rem;
        border-radius: var(--radius-md);
    }

    /* ---------- OBEN: Anschrift / Info ---------- */
    .contact-modal-info {
        order: 1;
        padding: 1.6rem 1.3rem;
        gap: 1rem;
    }

    .info-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .info-icon svg {
        width: 19px;
        height: 19px;
    }

    .info-text h4 {
        font-size: 0.95rem;
    }

    .info-text p {
        font-size: 0.92rem;
        word-break: break-word;
    }

    .info-map {
        min-height: 200px;
        margin-top: 0.3rem;
    }

    .info-map iframe {
        min-height: 200px;
    }

    /* ---------- UNTEN: Kontaktformular ---------- */
    .contact-modal-form {
        order: 2;
        padding: 1.8rem 1.3rem;
        border-top: 1px solid rgba(209, 122, 82, 0.12);
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

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

    .form-group label {
        font-size: 0.9rem;
    }

    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group textarea {
        padding: 0.85rem 1rem;
        font-size: 16px;
        /* verhindert iOS-Auto-Zoom */
    }

    .form-group textarea {
        min-height: 120px;
    }

    .checkbox-group {
        padding: 1rem;
        gap: 0.8rem;
    }

    .checkbox-group input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }

    .checkbox-group label {
        font-size: 0.85rem;
    }

    .btn-submit {
        max-width: 100%;
        width: 100%;
    }

    /* ---------- Anschrift-Block unter dem Modal ---------- */
    .contact-details {
        gap: 2rem;
        padding-top: 2rem;
        margin-top: 2rem;
    }

    .contact-address h3 {
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }

    .contact-address p {
        font-size: 1rem;
    }

    .contact-address .phone-large {
        font-size: 1.6rem;
        margin-top: 1.3rem;
    }

    .contact-address .email-link {
        font-size: 1rem;
        word-break: break-word;
    }

    .contact-address .appointment-note {
        margin-bottom: 1.5rem;
    }

    .google-map {
        height: 300px;
    }
}

/* ---------- Sehr kleine Handys ---------- */
@media (max-width: 400px) {

    .contact-modal-info,
    .contact-modal-form {
        padding: 1.3rem 1rem;
    }

    .info-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .info-icon svg {
        width: 17px;
        height: 17px;
    }

    .contact-address .phone-large {
        font-size: 1.4rem;
    }

    .google-map {
        height: 260px;
    }

    .info-map,
    .info-map iframe {
        min-height: 180px;
    }
}

/* =========================================================
   KARTE AUF MOBILE – kompakt, feste Höhe
   ========================================================= */

@media (max-width: 960px) {
    .info-map {
        flex-grow: 0;
        /* nicht mehr strecken */
        height: 200px;
        min-height: 0;
        /* überschreibt Desktop-min-height */
        max-height: 200px;
        margin-top: 0.8rem;
    }

    .info-map iframe {
        height: 200px;
        min-height: 0;
        /* überschreibt Desktop-min-height */
        max-height: 200px;
    }
}

@media (max-width: 640px) {
    .info-map {
        height: 180px;
        max-height: 180px;
        margin-top: 0.6rem;
    }

    .info-map iframe {
        height: 180px;
        max-height: 180px;
    }
}

@media (max-width: 400px) {
    .info-map {
        height: 150px;
        max-height: 150px;
    }

    .info-map iframe {
        height: 150px;
        max-height: 150px;
    }
}

/* ============ FOOTER ============ */
/* ============ FOOTER ============ */
.site-footer {
    background-color: var(--bg-color);
    padding: 2rem 5% 1.8rem 5%;
    margin-top: 5rem;
    /* ← Abstand zum Kontakt */
    border-top: 1px solid rgba(209, 122, 82, 0.25);
    /* ← Divider */
    position: relative;
    z-index: 5;
}



.footer-bottom {
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-body);
    line-height: 1.5;
}

.footer-links {
    margin-top: 0.5rem;
}

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

.footer-bottom a:hover {
    color: var(--accent-orange);
}

.footer-links span {
    margin: 0 0.6rem;
    color: var(--accent-orange);
}

/* ============ RECHTLICHE SEITEN ============ */
.legal-page {
    max-width: 1300px;
    /* ← breiter als 900px */
    margin: 0 auto;
    padding: 4rem 5%;
}

.legal-page h2 {
    font-size: 2.6rem;
    margin-bottom: 2rem;
    color: var(--text-dark);
    font-family: var(--font-serif);
}

.legal-content h3 {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    color: var(--text-dark);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.legal-content p {
    margin-bottom: 1.2rem;
    /* ← etwas mehr Luft zwischen Absätzen */
    font-size: 1.05rem;
    line-height: 1.8;
    /* ← luftiger, besser lesbar */
    max-width: 100%;
    /* ← nutzt die volle Breite */
}

.legal-content a {
    color: var(--text-dark);
    text-decoration: none;
    border-bottom: 2px solid var(--accent-orange);
    padding-bottom: 1px;
    transition: color 0.3s ease;
}

.legal-content a:hover {
    color: var(--accent-orange);
}

.back-link {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(209, 122, 82, 0.2);
}

.back-link a {
    color: var(--accent-green);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.05rem;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.back-link a:hover {
    color: var(--accent-orange);
}

/* ============ ANIMATIONEN ============ */
.fade-in-up {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============ RESPONSIVE – 1024px ============ */
@media (max-width: 1024px) {
    .hero-content h1 {
        font-size: 3.2rem;
    }

    .hero,
    .contact-details {
        gap: 2.5rem;
    }

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

    .about-lead {
        font-size: 1.35rem;
    }

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

    h2 {
        font-size: 2.3rem;
    }
}

/* ============ RESPONSIVE – 768px ============ */
@media (max-width: 768px) {
    :root {
        --section-padding: 4rem 1rem;
    }

    header {
        padding: 1.2rem 1rem;
    }

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

    nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.2rem;
    }

    .hero,
    .contact-details {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-content h1 {
        font-size: 2.6rem;
    }

    .description {
        margin-left: auto;
        margin-right: auto;
    }

    .cta-group {
        justify-content: center;
        width: 100%;
    }

    .btn-primary {
        text-align: center;
    }

    .hero-image-wrapper {
        padding: 1rem;
    }

    .hero-image-wrapper::before,
    .hero-image-wrapper::after {
        width: 90%;
        height: 90%;
    }



    /* Über mich – Handy */
    .about {
        padding: 4rem 1rem;
    }

    .about-header {
        margin-bottom: 2rem;
    }

    .about-lead {
        font-size: 1.25rem;
    }

    .about-text {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 2.5rem;
    }

    .about-text p {
        font-size: 1.02rem;
        line-height: 1.75;
    }

    .about-usps {
        grid-template-columns: 1fr;
        gap: 0.9rem;
        padding-top: 2rem;
    }

    .about-usps li {
        text-align: left;
    }

    /* Leistungen */
    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        text-align: left;
    }

    /* Kontakt */
    .contact-form-wrapper {
        padding: 2rem 1.4rem;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .btn-submit {
        max-width: 100%;
    }

    .contact-address {
        text-align: center;
    }

    .contact-address .phone-large,
    .contact-address .email-link {
        margin-left: auto;
        margin-right: auto;
    }

    .contact-map {
        margin-left: auto;
        margin-right: auto;
    }

    .google-map {
        height: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Partner-Slider */
    .slider-track {
        animation-duration: 45s;
        gap: 1rem;
    }

    .partner-card {
        width: 200px;
        height: 100px;
        padding: 1.2rem;
    }

    .partner-logo-img {
        max-height: 60px;
    }
}

/* ============ FOKUS-MODUS ============ */
body.focus-mode section[id]:not(.focused) {
    display: none !important;
}

body.focus-mode footer {
    display: none !important;
}

body.focus-mode section.focused {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 90px);
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Hero-Sektion im Fokus-Modus: zweispaltig bleiben */
body.focus-mode #home.focused {
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 4rem;
    min-height: calc(100vh - 90px);
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Header bleibt oben sichtbar */
body.focus-mode header {
    position: sticky;
    top: 0;
    background-color: var(--bg-color);
    z-index: 100;
}

/* Auf Handy: Hero im Fokus-Modus einspaltig */
@media (max-width: 768px) {
    body.focus-mode #home.focused {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* ============ VIRENSCHUTZ-TEASER ============ */
.virenschutz-teaser {
    padding: 6rem 5%;
    border-top: 1px solid rgba(209, 122, 82, 0.25);
}

.virenschutz-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    background-color: var(--accent-green);
    border-radius: var(--radius-lg);
    padding: 4rem;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 4rem;
    align-items: center;
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
}

.virenschutz-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-orange);
    font-weight: 500;
    margin-bottom: 1rem;
}

.virenschutz-content h2 {
    font-family: var(--font-serif);
    font-size: 2.6rem;
    line-height: 1.15;
    color: var(--white);
    margin-bottom: 1.4rem;
    letter-spacing: -0.5px;
}

.virenschutz-content p {
    font-size: 1.08rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2rem;
}


.virenschutz-icon {
    width: 100%;
    max-width: 240px;
    color: var(--accent-orange);
    margin: 0 auto;
}

.virenschutz-icon svg {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 900px) {
    .virenschutz-inner {
        grid-template-columns: 1fr;
        padding: 3rem 2rem;
        text-align: center;
    }

    .virenschutz-content h2 {
        font-size: 2rem;
    }

    .virenschutz-icon {
        max-width: 160px;
    }
}

/* ============ VIRENSCHUTZ-TEASER (Startseite) ============ */
.vs-teaser {
    padding: 6rem 5%;
    border-top: 1px solid rgba(209, 122, 82, 0.2);
}

.vs-teaser-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    background-color: var(--accent-green);
    border-radius: var(--radius-lg);
    padding: 4rem;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 4rem;
    align-items: center;
    box-shadow: var(--shadow-soft);
}

.vs-teaser-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-orange);
    font-weight: 500;
    margin-bottom: 1rem;
}

.vs-teaser-content h2 {
    font-family: var(--font-serif);
    font-size: 2.6rem;
    line-height: 1.15;
    color: var(--white);
    margin-bottom: 1.4rem;
    letter-spacing: -0.5px;
}

.vs-teaser-content p {
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2rem;
}

.vs-teaser-content .btn-primary {
    background-color: var(--white);
    color: var(--accent-green);
}

.vs-teaser-content .btn-primary:hover {
    background-color: var(--accent-orange);
    color: var(--white);
}

.vs-teaser-icon {
    width: 100%;
    max-width: 220px;
    color: var(--accent-orange);
    margin: 0 auto;
}

.vs-teaser-icon svg {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 900px) {
    .vs-teaser-inner {
        grid-template-columns: 1fr;
        padding: 3rem 2rem;
        text-align: center;
    }

    .vs-teaser-content h2 {
        font-size: 2rem;
    }

    .vs-teaser-icon {
        max-width: 160px;
    }
}

/* =========================================================
   VIRENSCHUTZ-SEITE (virenschutz.html)
   ========================================================= */

/* ---------- HERO ---------- */
.vs-hero {
    text-align: center;
    padding: 6rem 5% 4rem 5%;
    max-width: 900px;
    margin: 0 auto;
}

.vs-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-orange);
    font-weight: 500;
    margin-bottom: 1.2rem;
}

.vs-hero h1 {
    font-family: var(--font-serif);
    font-size: 3.6rem;
    line-height: 1.1;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    font-weight: 600;
    letter-spacing: -1px;
}

.vs-lead {
    font-size: 1.12rem;
    color: var(--text-body);
    line-height: 1.8;
    max-width: 640px;
    margin: 0 auto 2.5rem auto;
}

.vs-hero-actions,
.vs-cta-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* ---------- SECTION HEAD ---------- */
.vs-section-head {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem auto;
}

.vs-section-head h2 {
    margin-bottom: 0.8rem;
}

.vs-section-head p {
    font-size: 1.05rem;
    color: var(--text-body);
    line-height: 1.75;
}

/* ---------- WARUM ---------- */
.vs-why {
    padding: 6rem 5%;
    border-top: 1px solid rgba(209, 122, 82, 0.2);
}

.vs-why-list {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.vs-why-item {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 2rem;
    align-items: flex-start;
    padding: 2rem 0;
    border-bottom: 1px solid rgba(209, 122, 82, 0.2);
}

.vs-why-item:first-child {
    border-top: 1px solid rgba(209, 122, 82, 0.2);
}

.vs-why-num {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--accent-orange);
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.vs-why-text h3 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.4rem;
    line-height: 1.35;
}

.vs-why-text p {
    font-size: 1rem;
    color: var(--text-body);
    line-height: 1.7;
    margin: 0;
}

/* ---------- PREISE ---------- */
.vs-preise {
    padding: 6rem 5%;
    border-top: 1px solid rgba(209, 122, 82, 0.2);
}

.vs-kategorie {
    max-width: var(--max-width);
    margin: 0 auto 4rem auto;
}

.vs-kategorie:last-of-type {
    margin-bottom: 0;
}

.vs-kategorie-head {
    margin-bottom: 2rem;
}

.vs-kategorie-head h3 {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    color: var(--text-dark);
    margin-bottom: 0.3rem;
}

.vs-kategorie-head p {
    font-size: 0.98rem;
    color: var(--text-body);
    margin: 0;
}

.vs-preise-grid {
    display: grid;
    gap: 1.6rem;
}

.vs-preise-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

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

.vs-preis-card {
    background-color: var(--white);
    border-radius: var(--radius-md);
    padding: 2.5rem 2rem;
    border: 1px solid rgba(209, 122, 82, 0.12);
    box-shadow: 0 4px 14px rgba(26, 47, 43, 0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.vs-preis-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(26, 47, 43, 0.08);
}

.vs-preis-card-featured {
    border: 2px solid var(--accent-green);
    background-color: var(--card-bg);
}

.vs-preis-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    background-color: var(--accent-orange);
    color: var(--white);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
}

.vs-preis-card h4 {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.35rem;
    line-height: 1.25;
}

.vs-preis-meta {
    font-size: 0.82rem;
    color: var(--accent-orange);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    margin-bottom: 1.2rem;
}

.vs-preis-betrag {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1rem;
    line-height: 1.1;
}

.vs-preis-betrag span {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--text-body);
    margin-left: 0.2rem;
}

.vs-preis-desc {
    font-size: 0.96rem;
    color: var(--text-body);
    line-height: 1.65;
    margin-bottom: 1.5rem;
}

.vs-preis-list {
    list-style: none;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.vs-preis-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.95rem;
    color: var(--text-dark);
    margin-bottom: 0.55rem;
    line-height: 1.5;
}

.vs-preis-list li span {
    color: var(--accent-orange);
    font-weight: 700;
    flex-shrink: 0;
}

.vs-preis-btn {
    text-align: center;
    margin-top: auto;
    width: 100%;
}

.vs-hinweis {
    max-width: 780px;
    margin: 3rem auto 0 auto;
    text-align: center;
    font-size: 0.94rem;
    color: var(--text-body);
    line-height: 1.7;
    padding-top: 2rem;
    border-top: 1px solid rgba(209, 122, 82, 0.2);
}

/* ---------- DOWNLOADS ---------- */
.vs-downloads {
    padding: 6rem 5%;
    border-top: 1px solid rgba(209, 122, 82, 0.2);
}

.vs-downloads-grid {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
}

.vs-download-card {
    background-color: var(--white);
    border-radius: var(--radius-md);
    padding: 2rem 1.6rem;
    border: 1px solid rgba(209, 122, 82, 0.12);
    box-shadow: 0 4px 14px rgba(26, 47, 43, 0.04);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 140px;
}

.vs-download-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(26, 47, 43, 0.08);
    border-color: var(--accent-orange);
}

.vs-download-card h4 {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.4rem;
}

.vs-download-card p {
    font-size: 0.9rem;
    color: var(--text-body);
    line-height: 1.5;
    margin: 0;
}

.vs-download-arrow {
    position: absolute;
    bottom: 1.4rem;
    right: 1.6rem;
    font-size: 1.3rem;
    color: var(--accent-orange);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.vs-download-card:hover .vs-download-arrow {
    opacity: 1;
    transform: translateY(4px);
}

/* ---------- CTA ---------- */
.vs-cta {
    padding: 6rem 5%;
    border-top: 1px solid rgba(209, 122, 82, 0.2);
}

.vs-cta-inner {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    background-color: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 4rem 3rem;
    box-shadow: var(--shadow-soft);
}

.vs-cta-inner h2 {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    color: var(--text-dark);
    margin-bottom: 1.2rem;
    line-height: 1.2;
}

.vs-cta-inner p {
    font-size: 1.05rem;
    color: var(--text-body);
    line-height: 1.75;
    margin-bottom: 2rem;
}

.vs-cta-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
    .vs-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vs-preise-grid-3,
    .vs-preise-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

@media (max-width: 768px) {
    .vs-hero {
        padding: 4rem 1rem 3rem 1rem;
    }

    .vs-hero h1 {
        font-size: 2.4rem;
    }

    .vs-lead {
        font-size: 1.02rem;
    }

    .vs-why,
    .vs-preise,
    .vs-downloads,
    .vs-cta {
        padding: 4rem 1rem;
    }

    .vs-why-grid,
    .vs-preise-grid-3,
    .vs-preise-grid-2,
    .vs-downloads-grid {
        grid-template-columns: 1fr;
    }

    .vs-cta-inner {
        padding: 2.5rem 1.5rem;
    }

    .vs-cta-inner h2 {
        font-size: 1.8rem;
    }

    .vs-preis-betrag {
        font-size: 1.9rem;
    }

    .vs-preis-card {
        padding: 2rem 1.6rem;
    }
}

/* =========================================================
   PRODUKTE (Startseite) – 3 gleiche Karten, weiße Hintergründe
   ========================================================= */
.produkte {
    padding: 6rem 5%;
    border-top: 1px solid rgba(209, 122, 82, 0.2);
}

.produkte-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 3.5rem auto;
}

.produkte-header h2 {
    margin-bottom: 0.8rem;
}

.produkte-header p {
    font-size: 1.08rem;
    color: var(--text-body);
    line-height: 1.7;
}

.produkte-grid {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
}

/* Karte – weißer Hintergrund, gleiche Höhe */
.produkt-card {
    background-color: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(209, 122, 82, 0.12);
    box-shadow: 0 4px 14px rgba(26, 47, 43, 0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.produkt-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(26, 47, 43, 0.10);
    border-color: rgba(209, 122, 82, 0.25);
}

/* Hover nur auf Geräten mit Maus (nicht auf Touch) */
@media (hover: hover) and (pointer: fine) {
    .produkt-card:hover {
        transform: translateY(-14px) scale(1.04);
        box-shadow:
            0 28px 56px rgba(26, 47, 43, 0.16),
            0 8px 18px rgba(26, 47, 43, 0.08);
        border-color: rgba(209, 122, 82, 0.4);
        background: linear-gradient(180deg,
                #FFFFFF 0%,
                var(--card-bg) 100%);
        z-index: 10;
    }

    .produkt-card:hover::before {
        opacity: 1;
    }

    .produkt-card:hover .produkt-image img {
        transform: translateY(-4px) scale(1.08);
        filter: drop-shadow(0 14px 26px rgba(26, 47, 43, 0.18));
    }

    .produkt-card:hover .produkt-label {
        letter-spacing: 1.9px;
    }

    .produkt-card:hover h3 {
        transform: translateX(3px);
    }

    .produkt-card:hover .produkt-link {
        color: var(--accent-orange);
        gap: 0.7rem;
    }
}

/* Bildbereich – exakt gleiche Größe bei allen Karten */
.produkt-image {
    width: 100%;
    height: 240px;
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow: hidden;
    border-bottom: 1px solid rgba(209, 122, 82, 0.08);
}

.produkt-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.4s ease;
}

.produkt-card:hover .produkt-image img {
    transform: scale(1.04);
}

/* Textbereich – einheitlich */
.produkt-content {
    padding: 1.8rem 2rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.produkt-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent-orange);
    font-weight: 500;
    margin-bottom: 0.6rem;
}

.produkt-card h3 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.6rem;
    line-height: 1.25;
}

.produkt-text {
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--text-body);
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.produkt-link {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--accent-green);
    transition: color 0.3s ease;
}

.produkt-card:hover .produkt-link {
    color: var(--accent-orange);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
    .produkte-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .produkte {
        padding: 4rem 1rem;
    }

    .produkte-grid {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    .produkt-image {
        height: 200px;
    }

    .produkt-content {
        padding: 1.5rem 1.5rem 1.8rem 1.5rem;
    }

    .produkt-card h3 {
        font-size: 1.3rem;
    }
}

/* =========================================================
   DATENSCHUTZ-MODAL
   ========================================================= */
.datenschutz-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 500;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.datenschutz-modal.is-open {
    display: flex;
}

.datenschutz-modal-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(26, 47, 43, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}

.datenschutz-modal-content {
    position: relative;
    background-color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 60px rgba(26, 47, 43, 0.25);
    max-width: 620px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 3rem 2.5rem 2.5rem 2.5rem;
    z-index: 1;
    animation: modalIn 0.25s ease-out;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.datenschutz-modal-content h2 {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    color: var(--text-dark);
    margin-bottom: 1.2rem;
    line-height: 1.3;
    padding-right: 2rem;
}

.datenschutz-modal-content p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-body);
    margin-bottom: 1rem;
}

.datenschutz-modal-content p strong {
    color: var(--text-dark);
}

.datenschutz-modal-content a {
    color: var(--text-dark);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-orange);
    transition: color 0.3s ease;
}

.datenschutz-modal-content a:hover {
    color: var(--accent-orange);
}

.datenschutz-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--accent-orange-soft);
    color: var(--text-dark);
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.datenschutz-modal-close:hover {
    background-color: var(--accent-orange);
    color: var(--white);
    transform: rotate(90deg);
}

@media (max-width: 768px) {
    .datenschutz-modal {
        padding: 1rem;
    }

    .datenschutz-modal-content {
        padding: 2.5rem 1.6rem 2rem 1.6rem;
        max-height: 90vh;
    }

    .datenschutz-modal-content h2 {
        font-size: 1.35rem;
    }
}

/* =========================================================
   SCROLL-SNAP – Hero zuerst, dann Sektionen nacheinander
   ========================================================= */
html.snap-scroll,
body.snap-scroll {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overflow-y: scroll;
}

body.snap-scroll main>section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: calc(100vh - 90px);
    /* Höhe = Bildschirm minus Header */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 5%;
    box-sizing: border-box;
}

/* Hero ganz oben – direkt unter Header */
body.snap-scroll main>section:first-child {
    min-height: calc(100vh - 90px);
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Auf Handy: Snap ausschalten – sonst zu nervig */
@media (max-width: 768px) {

    html.snap-scroll,
    body.snap-scroll {
        scroll-snap-type: none;
    }

    body.snap-scroll main>section {
        min-height: auto;
        padding: 3rem 1rem;
    }
}


/* =========================================================
   WARUM-SEKTION (Acronis, Office, Virenschutz)
   Ruhige, zweispaltige Sektion – kein Karten-Look
   ========================================================= */
.why-section {
    padding: 6rem 5%;
    border-top: 1px solid rgba(209, 122, 82, 0.2);
}

.why-inner {
    max-width: 900px;
    margin: 0 auto;
}

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

.why-header h2 {
    margin-bottom: 1rem;
}

.why-header p {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-style: italic;
    color: var(--text-dark);
    line-height: 1.5;
    max-width: 620px;
    margin: 0 auto;
}

.why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 4rem;
}

.why-item {
    padding-top: 1.5rem;
    border-top: 1px solid rgba(209, 122, 82, 0.25);
}

.why-item h3 {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.6rem;
    line-height: 1.35;
}

.why-item p {
    font-size: 0.98rem;
    color: var(--text-body);
    line-height: 1.7;
    margin: 0;
}

/* Responsive – Warum */
@media (max-width: 768px) {
    .why-section {
        padding: 4rem 1rem;
    }

    .why-grid {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }

    .why-header {
        margin-bottom: 2.2rem;
    }

    .why-header p {
        font-size: 1.08rem;
    }
}

/* =========================================================
   SCROLL-SNAP – Hero zuerst, dann Sektionen nacheinander
   ========================================================= */
html.snap-scroll,
body.snap-scroll {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overflow-y: scroll;
}

body.snap-scroll main>section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: calc(100vh - 90px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 5%;
    box-sizing: border-box;
}

body.snap-scroll main>section:first-child {
    min-height: calc(100vh - 90px);
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Auf Handy: Snap aus */
@media (max-width: 768px) {

    html.snap-scroll,
    body.snap-scroll {
        scroll-snap-type: none;
    }

    body.snap-scroll main>section {
        min-height: auto;
        padding: 3rem 1rem;
    }
}

/* =========================================================
   ACRONIS – Intro mit Bild
   ========================================================= */
.acronis-intro {
    padding: 6rem 5%;
    border-top: 1px solid rgba(209, 122, 82, 0.2);
}

.acronis-intro-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.acronis-intro-image {
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.acronis-intro-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.acronis-intro-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-orange);
    font-weight: 500;
    margin-bottom: 1rem;
}

.acronis-intro-text h2 {
    margin-bottom: 1.2rem;
}

.acronis-intro-text>p {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text-body);
    margin-bottom: 1.8rem;
}

.acronis-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.acronis-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 1rem;
    color: var(--text-dark);
    font-weight: 500;
    line-height: 1.5;
}

.acronis-list li span {
    color: var(--accent-orange);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.3;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .acronis-intro-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .acronis-intro {
        padding: 4rem 1rem;
    }
}

/* =========================================================
   BACK TO TOP – Pfeil nach oben
   ========================================================= */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--accent-green);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(26, 47, 43, 0.18);
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
    text-decoration: none;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background-color: var(--accent-green-hover);
    transform: translateY(-2px);
}

.back-to-top svg {
    width: 22px;
    height: 22px;
}

/* Auf kleinen Bildschirmen etwas kleiner */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 1.2rem;
        right: 1.2rem;
        width: 42px;
        height: 42px;
    }
}

/* =========================================================
   HERO-LOGO – weich, edel, schön eingebettet
   ========================================================= */
.hero-logo {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
    object-fit: contain;

    /* weicher, dezenter Schatten – lässt das Logo schweben */
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.10)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.06));

    /* sanfte Übergänge */
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.6s ease,
        opacity 0.6s ease;

    will-change: transform, filter;
}

/* Beim Hover: sanft hoch, Schatten weicher */
.hero-logo-wrapper:hover .hero-logo {
    transform: translateY(-2px) scale(1.015);
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.14)) drop-shadow(0 3px 8px rgba(0, 0, 0, 0.08));
}

/* Auf Handy: Hover aus */
@media (max-width: 768px) {
    .hero-logo-wrapper:hover .hero-logo {
        transform: none;
        filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.10)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.06));
    }
}

/* =========================================================
   HEADER – Produkte-Dropdown (Icons + Texte exakt bündig)
   ========================================================= */

.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.nav-dropdown-arrow {
    width: 10px;
    height: 10px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.nav-dropdown:hover .nav-dropdown-arrow,
.nav-dropdown.is-open .nav-dropdown-arrow {
    transform: rotate(180deg);
}

/* ===== Dropdown-Panel ===== */
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background-color: var(--white);
    border-radius: var(--radius-md);
    box-shadow: 0 20px 40px rgba(26, 47, 43, 0.12);
    border: 1px solid rgba(209, 122, 82, 0.12);
    padding: 0.5rem;
    min-width: 320px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    z-index: 100;
}

.nav-dropdown-menu::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ===== Eintrag: 3-spaltiges Grid =====
   Spalte 1: 24px  -> nur Icon, IMMER gleich breit
   Spalte 2: 1fr   -> Text beginnt für ALLE gleich
   padding-left: 1rem bleibt für alle gleich
*/
.nav-dropdown-menu a {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    column-gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background-color 0.25s ease;
    width: 100%;
    box-sizing: border-box;
}

.nav-dropdown-menu a:hover {
    background-color: var(--accent-orange-soft);
}

/* ===== DAS ICON =====
   - feste Breite UND Höhe (24x24)
   - display: block
   - flex-shrink: 0
   - keine justify-self / kein justify-items:center
   So kann kein SVG die Spaltenbreite verändern.
*/
.nav-dropdown-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    max-width: 24px;
    min-height: 24px;
    max-height: 24px;
    display: block;
    flex-shrink: 0;
    color: var(--accent-green);
    transition: color 0.25s ease;
    overflow: visible;
}

.nav-dropdown-menu a:hover .nav-dropdown-icon {
    color: var(--accent-orange);
}

/* ===== TEXT =====
   Der Text-Container bekommt KEIN eigenes padding/margin,
   damit er exakt an der Grid-Kante beginnt.
*/
.nav-dropdown-menu a>span {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    width: 100%;
    padding: 0;
    margin: 0;
}

.nav-dropdown-menu a strong {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.25;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}

.nav-dropdown-menu a em {
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 0.78rem;
    color: var(--text-body);
    line-height: 1.35;
    white-space: nowrap;
    margin: 0;
    padding: 0;
}

/* ============ MOBILE ============ */
@media (max-width: 768px) {
    .nav-dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        box-shadow: none;
        border: none;
        padding: 0.4rem 0 0 0;
        margin-top: 0.4rem;
        min-width: 0;
        background-color: transparent;
        gap: 0;
    }

    .nav-dropdown-menu::before {
        display: none;
    }

    .nav-dropdown-menu a {
        grid-template-columns: 22px 1fr;
        column-gap: 0.8rem;
        padding: 0.5rem 0.6rem;
    }

    .nav-dropdown-icon {
        width: 22px;
        height: 22px;
        min-width: 22px;
        max-width: 22px;
        min-height: 22px;
        max-height: 22px;
    }

    .nav-dropdown-arrow {
        display: none;
    }
}

/* =========================================================
   PRODUKTE-DROPDOWN
   ========================================================= */

.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.nav-dropdown-arrow {
    width: 10px;
    height: 10px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.nav-dropdown:hover .nav-dropdown-arrow,
.nav-dropdown.is-open .nav-dropdown-arrow {
    transform: rotate(180deg);
}

/* Panel */
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background-color: var(--white);
    border-radius: var(--radius-md);
    box-shadow: 0 20px 40px rgba(26, 47, 43, 0.12);
    border: 1px solid rgba(209, 122, 82, 0.12);
    padding: 0.5rem;
    min-width: 320px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    z-index: 100;
}

.nav-dropdown-menu::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu li {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ===== Der Link: 2 Spalten, FEST ===== */
.nav-dropdown-menu .dd-link {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    column-gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-dark);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.2px;
    width: 100%;
    box-sizing: border-box;
    transition: background-color 0.25s ease;
}

.nav-dropdown-menu .dd-link:hover {
    background-color: var(--accent-orange-soft);
    color: var(--text-dark);
}

/* ===== SVG: exakt 24x24, sitzt in Spalte 1 ===== */
.nav-dropdown-menu .dd-icon {
    width: 24px;
    height: 24px;
    display: block;
    color: var(--accent-green);
    transition: color 0.25s ease;
    justify-self: start;
    align-self: center;
    margin: 0;
    padding: 0;
}

.nav-dropdown-menu .dd-link:hover .dd-icon {
    color: var(--accent-orange);
}

/* ===== Text: Spalte 2 ===== */
.nav-dropdown-menu .dd-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding: 0;
    margin: 0;
}

.nav-dropdown-menu .dd-text strong {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.25s ease;
}

.nav-dropdown-menu .dd-text em {
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 0.78rem;
    color: var(--text-body);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.85;
}

.nav-dropdown-menu .dd-link:hover .dd-text strong {
    color: var(--accent-orange);
}

/* ============ MOBILE ============ */
@media (max-width: 768px) {
    .nav-dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        box-shadow: none;
        border: none;
        padding: 0.4rem 0 0 0;
        margin-top: 0.4rem;
        min-width: 0;
        background-color: transparent;
        gap: 0;
    }

    .nav-dropdown-menu::before {
        display: none;
    }

    .nav-dropdown-menu .dd-link {
        grid-template-columns: 22px 1fr;
        column-gap: 0.8rem;
        padding: 0.5rem 0.6rem;
    }

    .nav-dropdown-menu .dd-icon {
        width: 22px;
        height: 22px;
    }

    .nav-dropdown-arrow {
        display: none;
    }
}



/* =========================================================
   HERO – Beschreibung (eingeschmiegt)
   ========================================================= */

.description {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 2.2rem;
    max-width: 540px;
}

/* Zeile 1 – Name, in Serif wie die H1 */
.description-name {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.2;
    letter-spacing: -0.4px;
    margin: 0 0 0.35rem 0;
}

/* Zeile 2 – Rolle, in Sans wie das Location-Label */
.description-role {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-body);
    opacity: 0.85;
    margin: 0 0 1.3rem 0;
    padding-bottom: 1.3rem;
    border-bottom: 1px solid rgba(209, 122, 82, 0.22);
}

.description-role span {
    color: var(--accent-orange);
}

/* Zeile 3 – Services, exakt wie .description im Original */
.description-services {
    font-size: 1.12rem;
    color: var(--text-body);
    line-height: 1.7;
    margin: 0;
    font-weight: 400;
}

.description-services strong {
    color: var(--text-dark);
    font-weight: 600;
}

/* Handy */
@media (max-width: 768px) {
    .description {
        align-items: center;
        text-align: center;
    }

    .description-name {
        font-size: 1.35rem;
    }

    .description-role {
        margin-bottom: 1.1rem;
        padding-bottom: 1.1rem;
    }

    .description-services {
        font-size: 1.02rem;
    }
}

/* =========================================================
   LOGIN-SEITE
   ========================================================= */


.login-hero {
    min-height: calc(100vh - 90px);
    display: flex;
    align-items: center;
    padding: 4rem 5%;
}

.login-hero-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem;
    align-items: center;
    width: 100%;
}


.downloads-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3.5rem 1.5rem 4rem;
}

.downloads-hero {
    max-width: 760px;
    margin: 0 auto 3rem;
    text-align: center;
}

.downloads-hero-title {
    font-family: var(--font-serif, "Playfair Display", Georgia, serif);
    font-size: 3.6rem;
    line-height: 1.1;
    color: var(--text-dark, #222);
    margin: 0;
    font-weight: 600;
    letter-spacing: -1px;
}

.downloads-hero-title .highlight {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

.downloads-hero-title .highlight::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 10' preserveAspectRatio='none'><path d='M0 5 Q 37.5 10, 75 5 T 150 5' stroke='%23D17A52' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

@media (max-width: 640px) {
    .downloads-hero-title {
        font-size: 2.4rem;
    }

    .downloads-hero {
        margin-bottom: 2rem;
    }
}

.login-hero-content {
    max-width: 560px;
}

.login-hero-content .location {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--accent-orange);
    margin-bottom: 1.3rem;
    font-weight: 500;
}

.login-hero-title {
    font-family: var(--font-serif);
    font-size: 3.6rem;
    line-height: 1.1;
    color: var(--text-dark);
    margin-bottom: 1.3rem;
    font-weight: 600;
    letter-spacing: -1px;
}

.login-hero-title .highlight {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

.login-hero-title .highlight::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 10' preserveAspectRatio='none'><path d='M0 5 Q 37.5 10, 75 5 T 150 5' stroke='%23D17A52' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.login-hero-intro {
    font-size: 1.12rem;
    color: var(--text-body);
    line-height: 1.7;
    margin-bottom: 2.2rem;
    max-width: 520px;
}

.login-hero-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-box {
    background-color: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(209, 122, 82, 0.14);
    box-shadow: var(--shadow-soft);
    padding: 2.5rem 2.2rem 2rem 2.2rem;
    max-width: 440px;
    width: 100%;
}

.login-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--accent-orange);
    font-weight: 600;
    margin: 0 0 1.6rem 0;
    text-align: center;
}

.login-error {
    background-color: #fde8e8;
    color: #9b1c1c;
    border: 1px solid #f5b5b5;
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    margin-bottom: 1.3rem;
    text-align: center;
    line-height: 1.5;
}

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

.login-form .form-group {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.login-form .form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 0.4rem;
    line-height: 1.3;
}

.login-form .form-group input[type="text"],
.login-form .form-group input[type="password"] {
    width: 100%;
    height: 48px;
    padding: 0 1rem;
    border: 1px solid #e2ddd0;
    border-radius: var(--radius-sm);
    background-color: #FCFAF5;
    font-family: var(--font-sans);
    font-size: 0.98rem;
    color: var(--text-dark);
    line-height: 48px;
    box-sizing: border-box;
    transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
    -webkit-appearance: none;
    appearance: none;
}

.login-form .form-group input:focus {
    outline: none;
    border-color: var(--accent-green);
    background-color: var(--white);
    box-shadow: 0 0 0 3px rgba(46, 74, 65, 0.08);
}

.login-form .form-group input[type="password"]::-ms-reveal,
.login-form .form-group input[type="password"]::-ms-clear {
    display: none;
}

.login-form .form-group input:-webkit-autofill,
.login-form .form-group input:-webkit-autofill:hover,
.login-form .form-group input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #FCFAF5 inset;
    -webkit-text-fill-color: var(--text-dark);
    transition: background-color 5000s ease-in-out 0s;
}

.login-form .btn-submit {
    width: 100%;
    max-width: 100%;
    height: 48px;
    padding: 0 1.5rem;
    margin-top: 0.6rem;
    font-size: 0.98rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.login-hint {
    font-size: 0.86rem;
    color: var(--text-body);
    text-align: center;
    margin: 1.4rem 0 0 0;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(209, 122, 82, 0.18);
    line-height: 1.5;
}

.login-hint a {
    color: var(--accent-green);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--accent-orange);
    transition: color 0.25s ease;
}

.login-hint a:hover {
    color: var(--accent-orange);
}

/* =========================================================
   DOWNLOADS-SEITE
   ========================================================= */

.downloads-section {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 5rem 5% 6rem 5%;
}

.downloads-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 4.5rem auto;
}

.downloads-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-orange);
    font-weight: 600;
    margin-bottom: 1rem;
}

.downloads-title {
    font-family: var(--font-serif);
    font-size: 3.4rem;
    color: var(--text-dark);
    margin-bottom: 1.2rem;
    line-height: 1.1;
    letter-spacing: -0.8px;
    font-weight: 600;
}

.downloads-intro {
    font-size: 1.1rem;
    color: var(--text-body);
    line-height: 1.7;
}

.downloads-category {
    margin-bottom: 5rem;
}

.downloads-category:last-of-type {
    margin-bottom: 2rem;
}

.downloads-cat-title {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.4rem;
    padding-bottom: 0.9rem;
    border-bottom: 2px solid var(--accent-orange);
    display: inline-block;
    letter-spacing: -0.3px;
}

.downloads-cat-intro {
    font-size: 1rem;
    color: var(--text-body);
    line-height: 1.7;
    margin-top: 1.2rem;
    margin-bottom: 2rem;
    max-width: 720px;
}

.downloads-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    margin-top: 1.4rem;
}

.download-card {
    background-color: var(--white);
    border: 1px solid rgba(209, 122, 82, 0.12);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 14px rgba(26, 47, 43, 0.04);
    padding: 2rem 1.8rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.download-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(26, 47, 43, 0.10);
    border-color: rgba(209, 122, 82, 0.28);
}

.download-icon {
    width: 52px;
    height: 52px;
    background-color: var(--accent-orange-soft);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-green);
    margin-bottom: 0.9rem;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;
}

.download-card:hover .download-icon {
    background-color: var(--accent-green);
    color: var(--white);
    transform: rotate(-6deg);
}

.download-icon svg {
    width: 26px;
    height: 26px;
    display: block;
}

.download-icon-file {
    background-color: rgba(46, 74, 65, 0.08);
}

.download-card h3 {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.2px;
}

.download-card p {
    font-size: 0.95rem;
    color: var(--text-body);
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
}

.download-link {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--accent-green);
    transition: color 0.25s ease, transform 0.25s ease;
    margin-top: 0.6rem;
    display: inline-block;
}

.download-card:hover .download-link {
    color: var(--accent-orange);
    transform: translateX(2px);
}

.downloads-note {
    max-width: 820px;
    margin: 3rem auto 0 auto;
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-body);
    line-height: 1.7;
    padding: 1.8rem 1.6rem;
    background-color: var(--card-bg);
    border-radius: var(--radius-md);
    border: 1px solid rgba(209, 122, 82, 0.14);
}

.downloads-note strong {
    color: var(--text-dark);
    font-weight: 600;
}

/* =========================================================
   ADMIN – BENUTZERVERWALTUNG (admin.php)
   ========================================================= */

.admin-section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 4rem 5% 6rem 5%;
}

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

.admin-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-orange);
    font-weight: 600;
    margin-bottom: 0.9rem;
}

.admin-title {
    font-family: var(--font-serif);
    font-size: 2.8rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

.admin-intro {
    font-size: 1.05rem;
    color: var(--text-body);
    line-height: 1.7;
    max-width: 620px;
    margin: 0 auto;
}

.admin-success,
.admin-error {
    max-width: 780px;
    margin: 0 auto 2rem auto;
    padding: 0.9rem 1.2rem;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: center;
}

.admin-success {
    background-color: #e6f4ea;
    color: #1e5f34;
    border: 1px solid #b7dfc3;
}

.admin-error {
    background-color: #fde8e8;
    color: #9b1c1c;
    border: 1px solid #f5b5b5;
}

.admin-card {
    background-color: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(209, 122, 82, 0.12);
    box-shadow: 0 4px 14px rgba(26, 47, 43, 0.04);
    padding: 2.5rem 2.2rem;
    margin-bottom: 2rem;
}

.admin-card-title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1.6rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(209, 122, 82, 0.18);
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.admin-count {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    background-color: var(--accent-orange-soft);
    color: var(--accent-orange);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    letter-spacing: 0;
}

.admin-empty {
    color: var(--text-body);
    font-size: 0.98rem;
    padding: 1rem 0;
    text-align: center;
}

/* ================= Formular ================= */
.admin-form-row {
    display: grid;
    grid-template-columns: 1.4fr 1.4fr 1fr auto;
    gap: 1rem;
    align-items: end;
}

.admin-form .form-group {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.admin-form .form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 0.4rem;
}

.admin-form .form-group input {
    width: 100%;
    height: 46px;
    padding: 0 0.9rem;
    border: 1px solid #e2ddd0;
    border-radius: var(--radius-sm);
    background-color: #FCFAF5;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--text-dark);
    box-sizing: border-box;
    transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.admin-form .form-group input:focus {
    outline: none;
    border-color: var(--accent-green);
    background-color: var(--white);
    box-shadow: 0 0 0 3px rgba(46, 74, 65, 0.08);
}

.admin-form-submit {
    justify-content: flex-end;
}

.admin-form-submit button {
    height: 46px;
    padding: 0 1.4rem;
    white-space: nowrap;
}

/* Tage-Feld mit Suffix */
.days-input {
    position: relative;
}

.days-input input {
    padding-right: 3.5rem !important;
}

.days-suffix {
    position: absolute;
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    color: var(--text-body);
    pointer-events: none;
    font-weight: 500;
}

/* Schnellauswahl Chips */
.days-quick {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px dashed rgba(209, 122, 82, 0.25);
}

.days-quick-label {
    font-size: 0.82rem;
    color: var(--text-body);
    margin-right: 0.3rem;
}

.days-chip {
    background-color: var(--card-bg);
    border: 1px solid rgba(209, 122, 82, 0.25);
    color: var(--text-dark);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.days-chip:hover {
    background-color: var(--accent-orange-soft);
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

/* ================= Benutzerliste ================= */
.user-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.user-row {
    background-color: var(--card-bg);
    border: 1px solid rgba(209, 122, 82, 0.12);
    border-radius: var(--radius-md);
    padding: 1.2rem 1.4rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.user-row:hover {
    border-color: rgba(209, 122, 82, 0.28);
    box-shadow: 0 4px 14px rgba(26, 47, 43, 0.05);
}

.user-row-main {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 1rem;
    align-items: center;
}

.user-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--accent-green);
    color: var(--white);
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}

.user-info {
    min-width: 0;
}

.user-name {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 0.2rem 0;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-meta {
    font-size: 0.85rem;
    color: var(--text-body);
    margin: 0;
    line-height: 1.4;
}

.user-status {
    flex-shrink: 0;
}

/* Aktionszeile */
.user-row-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(209, 122, 82, 0.25);
}

.user-action-form {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}

.user-action-form input[type="text"],
.user-action-form select {
    height: 36px;
    padding: 0 0.7rem;
    border: 1px solid #e2ddd0;
    border-radius: var(--radius-sm);
    background-color: var(--white);
    font-family: var(--font-sans);
    font-size: 0.86rem;
    color: var(--text-dark);
    box-sizing: border-box;
    min-width: 150px;
}

.user-action-form input[type="text"]:focus,
.user-action-form select:focus {
    outline: none;
    border-color: var(--accent-green);
    box-shadow: 0 0 0 2px rgba(46, 74, 65, 0.08);
}

.user-action-form select {
    min-width: 120px;
    cursor: pointer;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge-ok {
    background-color: #e6f4ea;
    color: #1e5f34;
}

.badge-warn {
    background-color: #fff4e0;
    color: #8a5a1c;
}

.badge-crit {
    background-color: #fde8e8;
    color: #9b1c1c;
}

/* Mini-Buttons */
.btn-mini {
    height: 36px;
    padding: 0 1rem;
    border: none;
    border-radius: var(--radius-sm);
    background-color: var(--accent-green);
    color: var(--white);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-mini:hover {
    background-color: var(--accent-green-hover);
}

.btn-danger {
    background-color: #b93d3d;
}

.btn-danger:hover {
    background-color: #962f2f;
}

/* ================= Responsive ================= */
@media (max-width: 900px) {
    .admin-form-row {
        grid-template-columns: 1fr 1fr;
    }

    .admin-form-row .admin-form-submit {
        grid-column: 1 / -1;
    }

    .admin-form-row .admin-form-submit button {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .admin-section {
        padding: 3rem 1rem;
    }

    .admin-title {
        font-size: 2.2rem;
    }

    .admin-card {
        padding: 1.8rem 1.4rem;
    }

    .admin-form-row {
        grid-template-columns: 1fr;
    }

    .user-row-main {
        grid-template-columns: 44px 1fr;
        gap: 0.8rem;
    }

    .user-status {
        grid-column: 1 / -1;
        margin-top: 0.6rem;
    }

    .user-avatar {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }

    .user-row-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .user-action-form {
        width: 100%;
    }

    .user-action-form input[type="text"],
    .user-action-form select {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .login-hero {
        min-height: auto;
        padding: 3rem 1rem;
    }

    .login-hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2.5rem;
    }

    .login-hero-title {
        font-size: 2.4rem;
    }

    .login-hero-intro {
        margin-left: auto;
        margin-right: auto;
    }

    .login-box {
        margin: 0 auto;
        text-align: left;
        padding: 2rem 1.6rem 1.6rem 1.6rem;
        max-width: 100%;
    }

    .login-hero-logo {
        order: -1;
    }

    .login-hero-logo .hero-logo {
        max-width: 260px;
    }

    .login-form .form-group input[type="text"],
    .login-form .form-group input[type="password"] {
        height: 46px;
        font-size: 0.95rem;
    }

    .login-form .btn-submit {
        height: 46px;
    }

    .downloads-section {
        padding: 3rem 1rem 4rem 1rem;
    }

    .downloads-header {
        margin-bottom: 3rem;
    }

    .downloads-title {
        font-size: 2.2rem;
    }

    .downloads-cat-title {
        font-size: 1.4rem;
        padding-bottom: 0.7rem;
    }

    .downloads-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .download-card {
        padding: 1.6rem 1.4rem;
    }

    .download-card h3 {
        font-size: 1.15rem;
    }

    .admin-section {
        padding: 3rem 1rem;
    }

    .admin-title {
        font-size: 2.2rem;
    }

    .admin-card {
        padding: 1.8rem 1.4rem;
    }

    .admin-form-row {
        grid-template-columns: 1fr;
    }

    .admin-table th,
    .admin-table td {
        padding: 0.7rem 0.5rem;
        font-size: 0.85rem;
    }

    .inline-form {
        display: flex;
        width: 100%;
    }

    .inline-days,
    .inline-pass {
        flex: 1;
        width: auto;
    }

    .btn-mini {
        flex: 0 0 auto;
    }
}

/* =========================================================
   DOWNLOADS-SEITE (downloads.php)
   ========================================================= */

.downloads-section {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 5rem 5% 6rem 5%;
}

/* ---------- Kopfbereich ---------- */
.downloads-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 4.5rem auto;
}

.downloads-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-orange);
    font-weight: 600;
    margin-bottom: 1rem;
}

.downloads-title {
    font-family: var(--font-serif);
    font-size: 3.4rem;
    color: var(--text-dark);
    margin-bottom: 1.2rem;
    line-height: 1.1;
    letter-spacing: -0.8px;
    font-weight: 600;
}

.downloads-intro {
    font-size: 1.1rem;
    color: var(--text-body);
    line-height: 1.7;
}

/* ---------- Kategorien ---------- */
.downloads-category {
    margin-bottom: 5rem;
}

.downloads-category:last-of-type {
    margin-bottom: 2rem;
}

.downloads-cat-title {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.4rem;
    padding-bottom: 0.9rem;
    border-bottom: 2px solid var(--accent-orange);
    display: inline-block;
    letter-spacing: -0.3px;
}

.downloads-cat-intro {
    font-size: 1rem;
    color: var(--text-body);
    line-height: 1.7;
    margin-top: 1.2rem;
    margin-bottom: 2rem;
    max-width: 720px;
}

/* ---------- Grid: 3 Spalten ---------- */
.downloads-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    margin-top: 1.4rem;
}

/* ---------- Karte ---------- */
.download-card {
    background-color: var(--white);
    border: 1px solid rgba(209, 122, 82, 0.12);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 14px rgba(26, 47, 43, 0.04);
    padding: 2rem 1.8rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
}

.download-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(26, 47, 43, 0.10);
    border-color: rgba(209, 122, 82, 0.28);
}

/* ---------- Icon-Kreis ---------- */
.download-icon {
    width: 52px;
    height: 52px;
    background-color: var(--accent-orange-soft);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-green);
    margin-bottom: 0.9rem;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;
}

.download-card:hover .download-icon {
    background-color: var(--accent-green);
    color: var(--white);
    transform: rotate(-6deg);
}

.download-icon svg {
    width: 26px;
    height: 26px;
    display: block;
}

/* Datei-Icon (PDF) — etwas dezenter */
.download-icon-file {
    background-color: rgba(46, 74, 65, 0.08);
}

/* ---------- Karten-Text ---------- */
.download-card h3 {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.2px;
}

.download-card p {
    font-size: 0.95rem;
    color: var(--text-body);
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
}

.download-link {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--accent-green);
    transition: color 0.25s ease, transform 0.25s ease;
    margin-top: 0.6rem;
    display: inline-block;
}

.download-card:hover .download-link {
    color: var(--accent-orange);
    transform: translateX(2px);
}

/* ---------- Hinweis-Kasten unten ---------- */
.downloads-note {
    max-width: 820px;
    margin: 3rem auto 0 auto;
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-body);
    line-height: 1.7;
    padding: 1.8rem 1.6rem;
    background-color: var(--card-bg);
    border-radius: var(--radius-md);
    border: 1px solid rgba(209, 122, 82, 0.14);
}

.downloads-note strong {
    color: var(--text-dark);
    font-weight: 600;
}

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

@media (max-width: 1024px) {
    .downloads-section {
        padding: 4rem 5% 5rem 5%;
    }

    .downloads-title {
        font-size: 2.8rem;
    }

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

@media (max-width: 768px) {
    .downloads-section {
        padding: 3rem 1rem 4rem 1rem;
    }

    .downloads-header {
        margin-bottom: 3rem;
    }

    .downloads-label {
        font-size: 0.72rem;
    }

    .downloads-title {
        font-size: 2.2rem;
    }

    .downloads-intro {
        font-size: 1rem;
    }

    .downloads-category {
        margin-bottom: 3.5rem;
    }

    .downloads-cat-title {
        font-size: 1.4rem;
        padding-bottom: 0.7rem;
    }

    .downloads-cat-intro {
        font-size: 0.95rem;
        margin-top: 1rem;
        margin-bottom: 1.6rem;
    }

    .downloads-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .download-card {
        padding: 1.6rem 1.4rem;
    }

    .download-card h3 {
        font-size: 1.15rem;
    }

    .download-icon {
        width: 46px;
        height: 46px;
    }

    .download-icon svg {
        width: 22px;
        height: 22px;
    }

    .downloads-note {
        padding: 1.4rem 1.2rem;
        font-size: 0.9rem;
    }
}

/* =========================================================
   ADMIN – Kategorien + Einträge
   ========================================================= */

.admin-cat-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    padding-bottom: 1.2rem;
    margin-bottom: 1.4rem;
    border-bottom: 1px solid rgba(209, 122, 82, 0.18);
    flex-wrap: wrap;
}

.admin-cat-title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 0.3rem 0;
    line-height: 1.25;
}

.admin-cat-intro {
    font-size: 0.95rem;
    color: var(--text-body);
    margin: 0;
    line-height: 1.55;
}

.admin-add-item {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px dashed rgba(209, 122, 82, 0.3);
}

.admin-add-title {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 1.2rem 0;
}

.admin-form-row-4 {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr auto;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1rem;
}

.admin-table-target {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    color: var(--text-body);
}

@media (max-width: 900px) {
    .admin-form-row-4 {
        grid-template-columns: 1fr 1fr;
    }

    .admin-form-row-4 .admin-form-submit {
        grid-column: 1 / -1;
    }

    .admin-form-row-4 .admin-form-submit button {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .admin-form-row-4 {
        grid-template-columns: 1fr;
    }

    .admin-cat-head {
        flex-direction: column;
        align-items: stretch;
    }
}


/* =========================================================
   DOWNLOADS – ADMIN INLINE-BEARBEITUNG
   ========================================================= */

/* Bearbeitungsmodus-Banner */
.admin-banner {
    max-width: var(--max-width);
    margin: 0 auto 0 auto;
    padding: 0.7rem 5%;
    background-color: var(--accent-orange);
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-align: center;
}

/* Kategorie-Kopf mit Aktionen */
.cat-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cat-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

/* Icon-Buttons */
.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--accent-orange-soft);
    color: var(--accent-green);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.btn-icon:hover {
    background-color: var(--accent-green);
    color: var(--white);
    transform: rotate(10deg);
}

.btn-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Kategorie-Bearbeitungsbereich (ausklappbar) */
.cat-edit {
    display: none;
    background-color: var(--card-bg);
    border: 1px solid rgba(209, 122, 82, 0.2);
    border-radius: var(--radius-md);
    padding: 1.4rem 1.4rem 1.2rem 1.4rem;
    margin: 1.4rem 0 1.6rem 0;
}

.cat-edit.open {
    display: block;
    animation: slideDown 0.25s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Bearbeitungsformulare */
.edit-form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.edit-row {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: 1rem;
    align-items: end;
}

.edit-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.edit-field label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-dark);
}

.edit-field input[type="text"],
.edit-field input[type="url"],
.edit-field input[type="file"] {
    width: 100%;
    height: 42px;
    padding: 0 0.9rem;
    border: 1px solid #e2ddd0;
    border-radius: var(--radius-sm);
    background-color: var(--white);
    font-family: var(--font-sans);
    font-size: 0.92rem;
    color: var(--text-dark);
    box-sizing: border-box;
}

.edit-field input[type="file"] {
    padding: 0.5rem 0.9rem;
    height: auto;
    cursor: pointer;
}

.edit-field input:focus {
    outline: none;
    border-color: var(--accent-green);
    box-shadow: 0 0 0 3px rgba(46, 74, 65, 0.08);
}

.edit-field-actions {
    justify-content: flex-end;
}

.btn-sm {
    height: 42px;
    padding: 0 1.3rem;
    font-size: 0.9rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-sm:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Zweite Zeile: Move + Delete */
.edit-row-secondary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(209, 122, 82, 0.3);
    flex-wrap: wrap;
}

.edit-move {
    display: flex;
    gap: 0.4rem;
}

.btn-icon-sm {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background-color: var(--white);
    color: var(--accent-green);
    border: 1px solid rgba(209, 122, 82, 0.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-icon-sm:hover:not(:disabled) {
    background-color: var(--accent-green);
    color: var(--white);
    border-color: var(--accent-green);
}

.btn-icon-sm:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-icon-sm svg {
    width: 16px;
    height: 16px;
    display: block;
}

.btn-icon-danger:hover:not(:disabled) {
    background-color: #b93d3d;
    border-color: #b93d3d;
    color: var(--white);
}

/* Eintrag-Wrapper mit Admin-Buttons */
.download-card-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Admin-Aktionen über der Karte */
.item-admin-actions {
    display: flex;
    gap: 0.35rem;
    justify-content: flex-end;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}

/* Eintrag-Bearbeitungsbereich */
.item-edit {
    display: none;
    background-color: var(--card-bg);
    border: 1px solid rgba(209, 122, 82, 0.2);
    border-radius: var(--radius-md);
    padding: 1.2rem;
    margin-top: 0.6rem;
}

.item-edit.open {
    display: block;
    animation: slideDown 0.25s ease-out;
}

.edit-current {
    font-size: 0.88rem;
    color: var(--text-body);
    margin: 0;
    padding: 0.6rem 0.9rem;
    background-color: var(--white);
    border: 1px solid #e2ddd0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Neuen Eintrag hinzufügen */
.add-item-box {
    margin-top: 1.6rem;
}

.btn-add-item {
    background: none;
    border: 1px dashed rgba(209, 122, 82, 0.5);
    color: var(--accent-green);
    padding: 0.7rem 1.2rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    width: 100%;
    text-align: center;
}

.btn-add-item:hover {
    background-color: var(--accent-orange-soft);
    border-color: var(--accent-orange);
}

.add-item-panel {
    display: none;
    background-color: var(--card-bg);
    border: 1px solid rgba(209, 122, 82, 0.2);
    border-radius: var(--radius-md);
    padding: 1.4rem;
    margin-top: 1rem;
}

.add-item-panel.open {
    display: block;
    animation: slideDown 0.25s ease-out;
}

.add-form {
    padding: 1.2rem;
    background-color: var(--white);
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}

.add-form:last-child {
    margin-bottom: 0;
}

.add-form-title {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 0.9rem 0;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(209, 122, 82, 0.18);
}

/* Neue Kategorie */
.add-category-box {
    max-width: 720px;
    margin: 3rem auto 0 auto;
}

.btn-add-category {
    background: none;
    border: 1px dashed rgba(46, 74, 65, 0.5);
    color: var(--accent-green);
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    text-align: center;
    transition: background-color 0.2s ease;
}

.btn-add-category:hover {
    background-color: rgba(46, 74, 65, 0.06);
}

/* Auf kleinen Bildschirmen */
@media (max-width: 768px) {
    .edit-row {
        grid-template-columns: 1fr;
    }

    .cat-edit,
    .item-edit,
    .add-item-panel {
        padding: 1rem;
    }

    .item-admin-actions {
        justify-content: flex-start;
    }

    .edit-row-secondary {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }

    .edit-move {
        justify-content: center;
    }
}


/* =========================================================
   NAVIGATION – Externer Link (Downloads)
   ========================================================= */

/* =========================================================
   NAVIGATION – Downloads mit externem-Link-Symbol
   ========================================================= */

/* =========================================================
   NAVIGATION – Downloads mit externem-Link-Symbol
   ========================================================= */

nav>ul>li>a.nav-external {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    line-height: 1;
    height: 1.2rem;
    vertical-align: middle;
}

nav>ul>li>a.nav-external span {
    display: inline-block;
    line-height: 1;
    transform: translateY(-0.5px);
}

.nav-external-icon {
    width: 11px;
    height: 11px;
    display: block;
    flex-shrink: 0;
    opacity: 0.75;
    transform: translateY(-0.5px);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

nav>ul>li>a.nav-external:hover .nav-external-icon {
    opacity: 1;
    transform: translate(1px, -1.5px);
}

.nav-external-icon {
    width: 12px;
    height: 12px;
    transition: transform 0.25s ease;
    opacity: 0.7;
    flex-shrink: 0;
}

nav>ul>li>a.nav-external:hover .nav-external-icon {
    transform: translate(1px, -1px);
    opacity: 1;
}


/* =========================================================
   NAVIGATION – Benutzername + Abmelden
   ========================================================= */

nav>ul>li.nav-user {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}

.nav-user-name {
    font-family: var(--font-sans);
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text-body);
    letter-spacing: 0.1px;
    padding: 0.35rem 0.75rem;
    background-color: var(--accent-orange-soft);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    transition: background-color 0.25s ease, color 0.25s ease;
}

nav>ul>li.nav-user:hover .nav-user-name {
    background-color: rgba(209, 122, 82, 0.2);
    color: var(--text-dark);
}

@media (max-width: 768px) {
    nav>ul>li.nav-user {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
        align-items: center;
    }

    .nav-user-name {
        font-size: 0.82rem;
    }
}

/* =========================================================
   PCVisit Fernwartung – nur das PNG, freigestellt
   ========================================================= */

.hero-logo-wrapper {
    position: relative;
}

.btn-pcvisit {
    position: absolute;
    top: 79%;
    left: 35%;
    z-index: 10;

    display: inline-block;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    text-decoration: none;
    line-height: 0;

    /* Feste Breite – Bild wird darauf herunterskaliert */
    width: 175px;
    /* ← hier die Größe einstellen */

    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-pcvisit:hover {
    transform: scale(1.06);
    /* nur im Hover – leicht größer */
}

.btn-pcvisit img,
.btn-pcvisit svg {
    display: block;
    width: 100%;
    height: auto;
}

/* =========================================================
   HANDY AUFLADEN
   ========================================================= */
.handy {
    padding: 100px 24px;
    max-width: 1080px;
    margin: 0 auto;
}

.handy-header {
    max-width: 640px;
    margin: 0 auto 64px;
    text-align: center;
}

.handy-kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #2e7d32;
    margin-bottom: 18px;
}

.handy-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 600;
    color: #141414;
    margin: 0 0 18px;
    letter-spacing: -0.005em;
    line-height: 1.15;
}

.handy-header p {
    font-size: 17px;
    line-height: 1.7;
    color: #555;
    margin: 0;
}

/* ---- Blöcke ---- */
.handy-block {
    margin-bottom: 56px;
}

.handy-block-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.handy-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #2e7d32;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

.handy-block-head h3 {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 600;
    color: #141414;
    margin: 0;
    letter-spacing: -0.005em;
}

/* ---- Kacheln (Basis) ---- */
.provider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px 12px 18px;
    background: #fff;
    border: 1.5px solid #e8e8e8;
    border-radius: 14px;
    cursor: pointer;
    color: #141414;
    font: inherit;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.provider:hover {
    transform: translateY(-3px);
    border-color: #cfcfcf;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
}

/* ---- Top-Anbieter mit Logo ---- */
.provider-grid {
    display: grid;
    gap: 14px;
}

.provider-grid-fixed {
    grid-template-columns: repeat(3, 1fr);
    max-width: 660px;
    margin: 0 auto 36px;
    gap: 18px;
}

.provider-logo-card .provider-logo {
    width: 90px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-color, #666);
}

.provider-logo-card .provider-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.provider-fallback-text {
    display: none;
    font-size: 16px;
    font-weight: 600;
    color: var(--brand-color, #333);
    letter-spacing: 0.01em;
}

.provider-logo-card .provider-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.provider-logo-card.is-active {
    border-color: var(--brand-color, #2e7d32);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
}

.provider-logo-card.is-active .provider-name {
    color: #141414;
    font-weight: 600;
}

/* ---- Karussell (nur Text) ---- */
.provider-slider {
    margin-top: 8px;
}

.provider-slider-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #999;
    margin: 0 0 12px;
}

.provider-slider-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.provider-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 4px 2px 10px;
    flex: 1;
    scrollbar-width: none;
}

.provider-track::-webkit-scrollbar {
    display: none;
}

.provider-sm {
    flex: 0 0 150px;
    padding: 18px 12px;
    justify-content: center;
    min-height: 70px;
}

.provider-name-only {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    text-align: center;
    line-height: 1.3;
}

.provider-text-only.is-active {
    border-color: #2e7d32;
    background: #f6fbf6;
    box-shadow: 0 12px 30px rgba(46, 125, 50, .10);
}

.provider-text-only.is-active .provider-name-only {
    color: #2e7d32;
    font-weight: 600;
}

.provider-nav {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #e8e8e8;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .15s, transform .15s, color .15s;
}

.provider-nav:hover {
    border-color: #2e7d32;
    color: #2e7d32;
    transform: scale(1.05);
}

.provider-nav svg {
    width: 20px;
    height: 20px;
}

.provider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.provider-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #dcdcdc;
    transition: background .2s, transform .2s;
    cursor: pointer;
}

.provider-dots span.is-active {
    background: #2e7d32;
    transform: scale(1.3);
}

/* ---- Beträge ---- */
.amount-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.amount {
    padding: 14px 26px;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid #e8e8e8;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    color: #141414;
    cursor: pointer;
    transition: transform .15s, border-color .15s, background .15s, color .15s;
}

.amount:hover {
    transform: translateY(-2px);
    border-color: #cfcfcf;
}

.amount.is-active {
    background: #2e7d32;
    border-color: #2e7d32;
    color: #fff;
}

.amount-custom {
    color: #555;
}

.amount-custom.is-active {
    color: #fff;
}

.amount-custom-wrap {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.amount-custom-wrap label {
    font-size: 14px;
    color: #555;
}

.amount-custom-wrap input {
    width: 110px;
    padding: 10px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font: inherit;
    font-size: 15px;
    outline: none;
    transition: border-color .15s;
}

.amount-custom-wrap input:focus {
    border-color: #2e7d32;
}

/* ---- Aufladeart ---- */
.mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.mode {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 24px;
    background: #fff;
    border: 1.5px solid #e8e8e8;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: transform .18s, border-color .18s, box-shadow .18s, background .18s;
}

.mode:hover {
    transform: translateY(-3px);
    border-color: #cfcfcf;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
}

.mode.is-active {
    border-color: #2e7d32;
    background: #f6fbf6;
    box-shadow: 0 12px 30px rgba(46, 125, 50, .10);
}

.mode-icon {
    width: 42px;
    height: 42px;
    color: #2e7d32;
    flex-shrink: 0;
}

.mode-icon svg {
    width: 100%;
    height: 100%;
}

.mode-text strong {
    display: block;
    font-size: 15.5px;
    font-weight: 600;
    color: #141414;
    margin-bottom: 4px;
}

.mode-text em {
    display: block;
    font-style: normal;
    font-size: 13.5px;
    color: #666;
    line-height: 1.55;
}

/* ---- Zusammenfassung ---- */
.handy-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 30px;
    background: #f6fbf6;
    border: 1px solid #dcecdc;
    border-radius: 16px;
    margin-bottom: 32px;
}

.summary-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2e7d32;
    margin: 0 0 6px;
}

.summary-line {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 500;
    color: #141414;
    margin: 0;
    line-height: 1.4;
}

.summary-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: #141414;
    color: #fff;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    flex-shrink: 0;
    transition: background .18s, gap .18s, transform .18s;
}

.summary-cta:hover {
    background: #2e7d32;
    gap: 14px;
    transform: translateY(-1px);
}

.summary-cta svg {
    width: 18px;
    height: 18px;
}

.summary-cta[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
}

/* ---- Fuß ---- */
.handy-foot {
    text-align: center;
}

.handy-providers {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 16px;
    line-height: 1.9;
    color: #666;
    margin: 0 0 14px;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.handy-demo-note {
    display: inline-block;
    font-size: 12.5px;
    letter-spacing: 0.02em;
    color: #999;
    background: #f4f4f4;
    border-radius: 999px;
    padding: 6px 14px;
    margin: 0;
}

/* ---- Mobil ---- */
@media (max-width: 860px) {
    .handy {
        padding: 80px 20px;
    }

    .provider-grid-fixed {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .provider-sm {
        flex: 0 0 130px;
    }

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

    .handy-summary {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 22px;
    }

    .summary-cta {
        justify-content: center;
    }

    .summary-line {
        font-size: 17px;
    }
}

@media (max-width: 480px) {
    .provider-sm {
        flex: 0 0 120px;
    }

    .provider-logo-card .provider-logo {
        width: 70px;
        height: 38px;
    }
}

/* ---- Slider ---- */
.provider-slider {
    margin-top: 8px;
}

.provider-slider-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.provider-slider-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #999;
    margin: 0;
}

.provider-nav-group {
    display: flex;
    gap: 8px;
}

.provider-nav {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #e8e8e8;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .15s, color .15s, transform .15s;
}

.provider-nav:hover {
    border-color: #2e7d32;
    color: #2e7d32;
    transform: translateY(-1px);
}

.provider-nav:active {
    transform: translateY(0);
}

.provider-nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}

.provider-nav svg {
    width: 20px;
    height: 20px;
}

.provider-viewport {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(to right,
            transparent 0,
            #000 24px,
            #000 calc(100% - 24px),
            transparent 100%);
    -webkit-mask-image: linear-gradient(to right,
            transparent 0,
            #000 24px,
            #000 calc(100% - 24px),
            transparent 100%);
}

.provider-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 24px 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.provider-track::-webkit-scrollbar {
    display: none;
}

.provider-sm {
    flex: 0 0 150px;
    padding: 22px 12px;
    justify-content: center;
    min-height: 74px;
    scroll-snap-align: center;
}

.provider-name-only {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    text-align: center;
    line-height: 1.3;
}

.provider-text-only.is-active {
    border-color: #2e7d32;
    background: #f6fbf6;
    box-shadow: 0 12px 30px rgba(46, 125, 50, .10);
}

.provider-text-only.is-active .provider-name-only {
    color: #2e7d32;
    font-weight: 600;
}

.provider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.provider-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #dcdcdc;
    transition: background .2s, transform .2s, width .2s;
    cursor: pointer;
}

.provider-dots span.is-active {
    background: #2e7d32;
    width: 20px;
    border-radius: 999px;
}

/* Block-Überschrift mittig */
.handy-block-head.is-centered {
    justify-content: center;
    text-align: center;
}

.handy-block-head.is-centered h3 {
    text-align: center;
}

/* Beträge mittig */
.handy-block .amount-grid {
    justify-content: center;
}

.handy-block .amount-custom-wrap {
    justify-content: center;
}


.provider-slider-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.provider-slider-label {
    grid-column: 2;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #999;
    margin: 0;
}

.provider-nav-group {
    grid-column: 3;
    justify-self: end;
    display: flex;
    gap: 8px;
}

.description-services br {
    display: none;
}

@media (min-width: 768px) {
    .description-services br {
        display: inline;
    }
}


/* =========================================================
   PRODUKTE – sanftes, langsames Erscheinen
   ========================================================= */
.produkte {
    padding: 6rem 5%;
    border-top: 1px solid rgba(209, 122, 82, 0.2);
    background: radial-gradient(ellipse at 50% 0%,
            rgba(209, 122, 82, 0.05) 0%,
            transparent 60%);
}

.produkte-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 4rem auto;
}

.produkte-header h2 {
    margin-bottom: 0.8rem;
}

.produkte-header p {
    font-size: 1.08rem;
    color: var(--text-body);
    line-height: 1.7;
}

/* ---------- Grid: alle auf einer Linie ---------- */
.produkte-grid {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}

/* =========================================================
   KARTE – Grundzustand + sanftes Erscheinen
   ========================================================= */
.produkt-card {
    position: relative;
    background: linear-gradient(180deg,
            var(--card-bg) 0%,
            #F7F2E8 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(209, 122, 82, 0.12);
    box-shadow:
        0 4px 14px rgba(26, 47, 43, 0.04),
        0 1px 3px rgba(26, 47, 43, 0.03);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    height: 100%;
    will-change: opacity, transform;
    z-index: 1;

    /* Startzustand: unsichtbar + leicht nach unten */
    opacity: 0;
    transform: translateY(40px);

    /* Sanftes, langsames Erscheinen */
    transition:
        opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.6s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s ease,
        border-color 0.5s ease,
        background 0.5s ease;
}

/* Sichtbar – wird per JS gesetzt */
.produkt-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Gestaffeltes Erscheinen – schön mit Abstand */
.produkt-card:nth-child(1) {
    transition-delay: 0.15s, 0.15s, 0s, 0s, 0s;
}

.produkt-card:nth-child(2) {
    transition-delay: 0.45s, 0.45s, 0s, 0s, 0s;
}

.produkt-card:nth-child(3) {
    transition-delay: 0.75s, 0.75s, 0s, 0s, 0s;
}

.produkt-card:nth-child(4) {
    transition-delay: 1.05s, 1.05s, 0s, 0s, 0s;
}

/* =========================================================
   HOVER – nur auf Desktop mit Maus
   ========================================================= */
@media (hover: hover) and (pointer: fine) {

    .produkt-card:hover {
        transform: translateY(-14px) scale(1.04);
        box-shadow:
            0 28px 56px rgba(26, 47, 43, 0.16),
            0 8px 18px rgba(26, 47, 43, 0.08);
        border-color: rgba(209, 122, 82, 0.4);
        background: linear-gradient(180deg,
                #FFFFFF 0%,
                var(--card-bg) 100%);
        z-index: 10;
        transition-delay: 0s !important;
    }

    .produkt-card:hover::before {
        opacity: 1;
    }

    .produkt-card:hover .produkt-image img {
        transform: translateY(-4px) scale(1.08);
        filter: drop-shadow(0 14px 26px rgba(26, 47, 43, 0.18));
    }

    .produkt-card:hover .produkt-label {
        letter-spacing: 1.9px;
    }

    .produkt-card:hover h3 {
        transform: translateX(3px);
    }

    .produkt-card:hover .produkt-link {
        color: var(--accent-orange);
        gap: 0.7rem;
    }
}

/* ---------- Warmer Glow oben ---------- */
.produkt-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%,
            rgba(209, 122, 82, 0.12),
            transparent 65%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

/* =========================================================
   BILD
   ========================================================= */
.produkt-image {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 200px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow: hidden;
    border-bottom: 1px solid rgba(209, 122, 82, 0.10);
}

.produkt-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 6px 16px rgba(26, 47, 43, 0.10));
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.5s ease;
}

/* =========================================================
   TEXT
   ========================================================= */
.produkt-content {
    position: relative;
    z-index: 2;
    padding: 1.6rem 1.7rem 1.8rem 1.7rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.produkt-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent-orange);
    font-weight: 500;
    margin-bottom: 0.5rem;
    transition: letter-spacing 0.4s ease;
}

.produkt-card h3 {
    font-family: var(--font-serif);
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.6rem;
    line-height: 1.25;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.produkt-text {
    font-size: 0.96rem;
    line-height: 1.65;
    color: var(--text-body);
    margin-bottom: 1.3rem;
    flex-grow: 1;
}

.produkt-link {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--accent-green);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.3s ease, gap 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
    .produkte-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.4rem;
    }

    /* Auf Tablet: etwas kürzere Verzögerung */
    .produkt-card:nth-child(1) {
        transition-delay: 0.1s, 0.1s, 0s, 0s, 0s;
    }

    .produkt-card:nth-child(2) {
        transition-delay: 0.3s, 0.3s, 0s, 0s, 0s;
    }

    .produkt-card:nth-child(3) {
        transition-delay: 0.5s, 0.5s, 0s, 0s, 0s;
    }

    .produkt-card:nth-child(4) {
        transition-delay: 0.7s, 0.7s, 0s, 0s, 0s;
    }
}

@media (max-width: 768px) {
    .produkte {
        padding: 4rem 1rem;
    }

    .produkte-header {
        margin-bottom: 2.5rem;
    }

    .produkte-grid {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    .produkt-image {
        height: 180px;
    }

    .produkt-content {
        padding: 1.4rem 1.4rem 1.6rem 1.4rem;
    }

    .produkt-card h3 {
        font-size: 1.3rem;
    }

    /* Auf Handy: kürzere Verzögerung, weil man direkt hinscrollt */
    .produkt-card:nth-child(1) {
        transition-delay: 0.1s, 0.1s, 0s, 0s, 0s;
    }

    .produkt-card:nth-child(2) {
        transition-delay: 0.25s, 0.25s, 0s, 0s, 0s;
    }

    .produkt-card:nth-child(3) {
        transition-delay: 0.4s, 0.4s, 0s, 0s, 0s;
    }

    .produkt-card:nth-child(4) {
        transition-delay: 0.55s, 0.55s, 0s, 0s, 0s;
    }
}

/* =========================================================
   VERSATZ – die schöne Welle (nur Desktop)
   ========================================================= */
@media (min-width: 1025px) {
    .produkt-card:nth-child(1) {
        margin-top: 2rem;
    }

    .produkt-card:nth-child(2) {
        margin-top: 0;
    }

    .produkt-card:nth-child(3) {
        margin-top: 2rem;
    }

    .produkt-card:nth-child(4) {
        margin-top: 0;
    }
}


/* =========================================================
   LEISTUNGEN – Zickzack, verflochten, lebendig
   ========================================================= */
.services {
    padding: 6rem 5%;
    border-top: 1px solid rgba(209, 122, 82, 0.2);
    background: radial-gradient(ellipse at 50% 0%,
            rgba(209, 122, 82, 0.05) 0%,
            transparent 60%);
}

/* ---------- Header ---------- */
.services-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 6rem auto;
}

.services-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-orange);
    font-weight: 500;
    margin: 0 0 1rem 0;
}

.services-header h2 {
    margin-bottom: 1rem;
}

.services-intro {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--text-dark);
    margin: 0 auto;
    max-width: 560px;
}

/* ---------- Liste ---------- */
.services-list {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6rem;
}

/* ---------- Reihe ---------- */
.service-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4.5rem;
    align-items: center;
}

.service-row-reverse .service-media {
    order: 2;
}

.service-row-reverse .service-text {
    order: 1;
}

/* ---------- Media ---------- */
.service-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow:
        0 10px 30px rgba(26, 47, 43, 0.08),
        0 2px 6px rgba(26, 47, 43, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.7s ease;
}

/* Sanfter Versatz in Richtung Mitte – „verflochten" */
.service-row .service-media {
    transform: translateX(-16px);
}

.service-row-reverse .service-media {
    transform: translateX(16px);
}

/* Hover: hebt ab */
.service-row:hover .service-media {
    transform: translateX(-16px) translateY(-6px);
}

.service-row-reverse:hover .service-media {
    transform: translateX(16px) translateY(-6px);
}

/* Hintergründe */
.media-bg {
    position: absolute;
    inset: 0;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.media-bg-1 {
    background: linear-gradient(135deg, #FBF8F1 0%, #F2E8D8 100%);
}

.media-bg-2 {
    background: linear-gradient(135deg, #F7F2E8 0%, #E8DCC8 100%);
}

.media-bg-3 {
    background: linear-gradient(135deg, #FBF8F1 0%, #EDE0CC 100%);
}

.media-bg-4 {
    background: linear-gradient(135deg, #F5EFE2 0%, #E3D5BE 100%);
}

.media-bg-5 {
    background: linear-gradient(135deg, #FBF8F1 0%, #F0E4D0 100%);
}

.media-bg-6 {
    background: linear-gradient(135deg, #F7F2E8 0%, #E6D8C2 100%);
}

/* ---------- Media-Icon: transparentes Bild, frei schwebend ---------- */
.media-icon {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 2%;
    /* ← Abstand zum Rand, damit nichts abgeschnitten wird */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.media-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* ← ganzes Bild sichtbar, nichts abgeschnitten */
    display: block;
    filter: drop-shadow(0 10px 24px rgba(26, 47, 43, 0.15));
    transition: filter 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hover: Bild hebt ab, Schatten wird weicher */
.service-row:hover .media-icon img {
    transform: translateY(-6px) scale(1.05);
    filter: drop-shadow(0 20px 36px rgba(26, 47, 43, 0.22));
}

/* ---------- Text ---------- */
.service-text {
    position: relative;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Sanfter Versatz in Richtung Mitte – „verflochten" */
.service-row .service-text {
    transform: translateX(16px);
}

.service-row-reverse .service-text {
    transform: translateX(-16px);
}

/* Hover: hebt ab */
.service-row:hover .service-text {
    transform: translateX(16px) translateY(-4px);
}

.service-row-reverse:hover .service-text {
    transform: translateX(-16px) translateY(-4px);
}

.service-text h3 {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.2;
    letter-spacing: -0.3px;
    margin-bottom: 1rem;
    transition: color 0.4s ease;
}

.service-row:hover .service-text h3 {
    color: var(--accent-orange);
}

.service-text p {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text-body);
    margin-bottom: 1.5rem;
    max-width: 480px;
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--accent-green);
    text-decoration: none;
    padding-bottom: 6px;
    width: fit-content;
    position: relative;
}

.service-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;

    /* Ruhezustand: gerade Linie */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 10' preserveAspectRatio='none'><line x1='0' y1='5' x2='150' y2='5' stroke='%23D17A52' stroke-width='2' stroke-linecap='round'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    transition: background-image 0.4s ease;
}

.service-link:hover::after {
    /* Hover: Welle – wie im Hero */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 10' preserveAspectRatio='none'><path d='M0 5 Q 37.5 10, 75 5 T 150 5' stroke='%23D17A52' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
    .services-list {
        gap: 4rem;
    }

    .service-row,
    .service-row-reverse {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }

    .service-row-reverse .service-media {
        order: 0;
    }

    .service-row-reverse .service-text {
        order: 1;
    }

    /* Versatz aufheben */
    .service-row .service-media,
    .service-row-reverse .service-media,
    .service-row .service-text,
    .service-row-reverse .service-text,
    .service-row:hover .service-media,
    .service-row-reverse:hover .service-media,
    .service-row:hover .service-text,
    .service-row-reverse:hover .service-text {
        transform: none;
    }

    .service-row:hover .service-media,
    .service-row-reverse:hover .service-media {
        transform: translateY(-4px);
    }

    .service-text h3 {
        font-size: 1.6rem;
    }

    .service-text p {
        font-size: 1rem;
        max-width: 100%;
    }

    .media-icon {
        width: 72px;
        height: 72px;
    }
}

@media (max-width: 768px) {
    .services {
        padding: 4rem 1rem;
    }

    .services-header {
        margin-bottom: 3rem;
    }
}

.services {
    padding: 9rem 5% 6rem 5%;
    /* ← viel Abstand = ruhiger Übergang */
    border-top: none;
    background: transparent;
}

.services {
    padding: 8rem 5% 6rem 5%;
    border-top: none;
    /* ← keine harte Linie */

    /* sanfter Farbverlauf als Übergang */
    background: linear-gradient(180deg,
            var(--bg-color) 0%,
            #F8F3E9 50%,
            var(--bg-color) 100%);
}


/* =========================================================
   LEISTUNGEN – Slider (immer nur eine Leistung sichtbar)
   ========================================================= */
.services {
    padding: 8rem 5% 6rem 5%;
    border-top: 1px solid rgba(209, 122, 82, 0.2);
    background: radial-gradient(ellipse at 50% 0%,
            rgba(209, 122, 82, 0.05) 0%,
            transparent 60%);
}

/* ---------- Slider-Wrapper ---------- */
.services-slider {
    position: relative;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 70px;
    /* Platz für Pfeile */
}

/* ---------- Sichtbarer Bereich ---------- */
.slider-viewport {
    position: relative;
    min-height: 500px;
    overflow: hidden;
}

/* ---------- Slide ---------- */
.service-slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;

    /* unsichtbar im Ruhezustand */
    opacity: 0;
    visibility: hidden;
    transform: translateX(40px);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.7s;
    pointer-events: none;
}

/* Aktiver Slide – sichtbar */
.service-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
        visibility 0s linear 0s;
}

/* Bild links, Text rechts – abwechselnd */
.service-slide:nth-child(even) .service-media {
    order: 2;
}

.service-slide:nth-child(even) .service-text {
    order: 1;
}

/* ---------- Media-Block ---------- */
.service-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow:
        0 10px 30px rgba(26, 47, 43, 0.08),
        0 2px 6px rgba(26, 47, 43, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-bg {
    position: absolute;
    inset: 0;
}

.media-bg-1 {
    background: linear-gradient(135deg, #FBF8F1 0%, #F2E8D8 100%);
}

.media-bg-2 {
    background: linear-gradient(135deg, #F7F2E8 0%, #E8DCC8 100%);
}

.media-bg-3 {
    background: linear-gradient(135deg, #FBF8F1 0%, #EDE0CC 100%);
}

.media-bg-4 {
    background: linear-gradient(135deg, #F5EFE2 0%, #E3D5BE 100%);
}

.media-bg-5 {
    background: linear-gradient(135deg, #FBF8F1 0%, #F0E4D0 100%);
}

.media-bg-6 {
    background: linear-gradient(135deg, #F7F2E8 0%, #E6D8C2 100%);
}

.media-icon {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 8%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 10px 24px rgba(26, 47, 43, 0.15));
}

.media-num {
    position: absolute;
    top: 1.4rem;
    right: 1.6rem;
    z-index: 2;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--accent-orange);
    opacity: 0.6;
}

/* ---------- Text ---------- */
.service-text h3 {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.2;
    margin-bottom: 1rem;
    letter-spacing: -0.3px;
}

.service-text p {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text-body);
    margin-bottom: 1.5rem;
    max-width: 480px;
}



/* ---------- Pfeile ---------- */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid rgba(209, 122, 82, 0.2);
    color: var(--accent-green);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease,
        border-color 0.3s ease, box-shadow 0.3s ease;
    z-index: 5;
    box-shadow: 0 4px 14px rgba(26, 47, 43, 0.06);
}

.slider-arrow:hover {
    background: var(--accent-green);
    color: var(--white);
    border-color: var(--accent-green);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 8px 20px rgba(46, 74, 65, 0.2);
}

.slider-arrow svg {
    width: 22px;
    height: 22px;
    display: block;
}

.slider-arrow-prev {
    left: 0;
}

.slider-arrow-next {
    right: 0;
}

/* ---------- Punkte unten ---------- */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 3rem;
}

.slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(209, 122, 82, 0.25);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.3s ease, width 0.3s ease, border-radius 0.3s ease;
}

.slider-dot.is-active {
    background: var(--accent-orange);
    width: 28px;
    border-radius: 4px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
    .services-slider {
        padding: 0;
    }

    .slider-viewport {
        min-height: auto;
    }

    /* Auf Handy: statisch untereinander, keine Slides */
    .service-slide {
        position: relative;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        inset: auto;
        grid-template-columns: 1fr;
        gap: 1.8rem;
        margin-bottom: 4rem;
    }

    .service-slide:nth-child(even) .service-media {
        order: 0;
    }

    .service-slide:nth-child(even) .service-text {
        order: 1;
    }

    .slider-arrow,
    .slider-dots {
        display: none;
    }

    .service-text h3 {
        font-size: 1.7rem;
    }

    .service-text p {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .services {
        padding: 4rem 1rem;
    }
}

/* =========================================================
   LEISTUNGEN – sanftes Erscheinen beim Scrollen
   ========================================================= */

/* Grundzustand: unsichtbar + leicht verschoben */
.service-row {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

/* Bild kommt von der Seite */
.service-row .service-media {
    opacity: 0;
    transform: translateX(-30px);
    transition:
        opacity 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.service-row-reverse .service-media {
    transform: translateX(30px);
}

/* Text kommt von der anderen Seite */
.service-row .service-text {
    opacity: 0;
    transform: translateX(30px);
    transition:
        opacity 1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

.service-row-reverse .service-text {
    transform: translateX(-30px);
}

/* Sichtbar-Zustand */
.service-row.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.service-row.is-visible .service-media,
.service-row.is-visible .service-text {
    opacity: 1;
    transform: translateX(0);
}

/* Auf Handy: keine Verschiebung – nur sanftes Einblenden */
@media (max-width: 900px) {

    .service-row .service-media,
    .service-row-reverse .service-media,
    .service-row .service-text,
    .service-row-reverse .service-text {
        transform: translateY(20px);
    }

    .service-row.is-visible .service-media,
    .service-row.is-visible .service-text {
        transform: translateY(0);
    }
}

/* Media-Block ohne Hintergrund, ohne Schatten, ohne Rahmen */
.service-media {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

/* Die Farbverläufe ausblenden */
.media-bg {
    display: none;
}

/* =========================================================
   HEADER – Logo links, Burger rechts
   ========================================================= */

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-width);
    margin: 0 auto;
    gap: 1rem;
    position: relative;
}

/* Burger-Button – nur Mobile sichtbar */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    flex-direction: column;
    gap: 5px;
    z-index: 60;
}

.nav-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--text-dark);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Burger → X wenn offen */
.nav-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================
   MOBILE NAVIGATION – sauber, mittig, aufklappbar
   ========================================================= */
@media (max-width: 768px) {

    /* Header: Logo links, Burger rechts */
    .header-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        position: relative;
    }

    /* Burger anzeigen */
    .nav-toggle {
        display: flex;
    }

    /* Navigation als aufklappbares Panel */
    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(244, 240, 230, 0.98);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid rgba(209, 122, 82, 0.15);
        border-bottom: 1px solid rgba(209, 122, 82, 0.15);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 55;
        box-shadow: 0 8px 24px rgba(26, 47, 43, 0.08);
    }

    .main-nav.is-open {
        max-height: 100vh;
        overflow-y: auto;
    }

    /* Navigationsliste – zentriert, luftig */
    .nav-main-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 1rem 1.5rem 1.5rem 1.5rem;
        width: 100%;
        text-align: center;
    }

    .nav-main-list>li {
        width: 100%;
        border-bottom: 1px solid rgba(209, 122, 82, 0.12);
    }

    .nav-main-list>li:last-child {
        border-bottom: none;
    }

    .nav-main-list>li>a {
        display: block;
        padding: 1rem 0;
        font-size: 1rem;
        width: 100%;
        text-align: center;
        color: var(--text-dark);
    }

    /* Kontakt-CTA – mittig & volle Breite */
    .nav-main-list>li>a.nav-cta {
        margin-top: 1rem;
        width: 100%;
        text-align: center;
        padding: 0.9rem 1rem;
    }

    /* Downloads-Link – mittig ausrichten */
    .nav-main-list>li>a.nav-external {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.4rem;
        text-align: center;
        height: auto;
        padding: 1rem 0;
    }

    /* =====================================================
       PRODUKTE-DROPDOWN – sauber, mittig, voll sichtbar
       ===================================================== */
    .nav-dropdown {
        width: 100%;
    }

    /* Der "Produkte"-Button */
    .nav-dropdown-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        padding: 1rem 0;
        font-size: 1rem;
        text-align: center;
        cursor: pointer;
    }

    /* Pfeil immer sichtbar */
    .nav-dropdown-arrow {
        display: block !important;
        width: 12px;
        height: 12px;
        transition: transform 0.3s ease;
    }

    .nav-dropdown.is-open .nav-dropdown-arrow {
        transform: rotate(180deg);
    }

    /* Dropdown-Menü – als aufklappbarer Bereich */
    .nav-dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        box-shadow: none;
        border: none;
        padding: 0;
        margin: 0;
        min-width: 0;
        width: 100%;
        background: transparent;

        /* zugeklappt */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .nav-dropdown.is-open .nav-dropdown-menu {
        max-height: 600px;
        overflow: visible;
    }

    .nav-dropdown-menu::before {
        display: none;
    }

    /* Jeder Dropdown-Eintrag – voll breit, sauber ausgerichtet */
    .nav-dropdown-menu li {
        width: 100%;
        border-bottom: 1px solid rgba(209, 122, 82, 0.08);
    }

    .nav-dropdown-menu li:last-child {
        border-bottom: none;
    }

    .nav-dropdown-menu .dd-link {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.9rem;
        padding: 0.85rem 0.5rem;
        width: 100%;
        text-align: left;
        grid-template-columns: none;
    }

    .nav-dropdown-menu .dd-icon {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

    .nav-dropdown-menu .dd-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.1rem;
        text-align: left;
        flex: 1;
        min-width: 0;
    }

    .nav-dropdown-menu .dd-text strong {
        font-size: 0.92rem;
        white-space: normal;
    }

    .nav-dropdown-menu .dd-text em {
        font-size: 0.78rem;
        white-space: normal;
    }
}

/* PCVisit-Button auf Mobile ausblenden */
@media (max-width: 768px) {
    .btn-pcvisit {
        display: none;
    }
}


/* =========================================================
BEWERTUNGEN – im Stil der restlichen Seite=========================================================*/
.bewertungen {
    padding: 6rem 5%;
}

.bewertungen-inner {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
}

/* ---- Absicherung: KEIN Strich unter irgendwas ---- */
#bewertungen,
#bewertungen .bewertungen-title,
#bewertungen .bewertungen-title h2,
#bewertungen .bewertungen-header {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

#bewertungen .bewertungen-title h2::before,
#bewertungen .bewertungen-title h2::after {
    content: none !important;
    display: none !important;
}

/* ---- Überschrift & Subline ---- */
.bewertungen-title {
    text-align: center;
    margin: 0 0 2.5rem 0;
}

.bewertungen-title h2 {
    margin: 0 0 0.6rem 0;
}

.bewertungen-sub {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--text-body);
    margin: 0;
    line-height: 1.5;
}

/* ---- Google-Kopfzeile – ruhig, mit feiner Trennlinie ---- */
.bewertungen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(209, 122, 82, 0.2);
    flex-wrap: wrap;
}

.bewertungen-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bewertungen-google-headline {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
}

.bewertungen-google-logo {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.bewertungen-google-logo img,
.bewertungen-google-logo svg {
    height: 28px;
    width: auto;
    display: block;
}

.bewertungen-google-word {
    font-family: var(--font-sans);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: -0.01em;
}

.bewertungen-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    color: var(--text-dark);
    font-family: var(--font-sans);
}

.bewertungen-rating {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-dark);
}

.bewertungen-stars-inline {
    display: inline-flex;
    gap: 2px;
    color: var(--accent-orange);
}

.bewertungen-stars-inline svg {
    width: 18px;
    height: 18px;
}

.bewertungen-count {
    color: var(--text-body);
    font-size: 0.88rem;
    opacity: 0.85;
}

/* ---- "Bewerten Sie uns auf Google" – wie .service-link ---- */
.bewertungen-google-btn,
.bewertungen-google-btn:link,
.bewertungen-google-btn:visited,
.bewertungen-google-btn:active,
.bewertungen-google-btn:focus {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent-green);
    text-decoration: none;
    border-bottom: 2px solid var(--accent-orange);
    padding-bottom: 3px;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    white-space: nowrap;
    outline: none;
    transition: color 0.3s ease, border-color 0.3s ease, gap 0.35s ease;
}

.bewertungen-google-btn:hover {
    color: var(--accent-orange);
    border-color: var(--accent-green);
    gap: 0.75rem;
}

/* =========================================================
   SLIDER
   ========================================================= */
.bewertungen-slider {
    position: relative;
    width: 100%;
    padding: 0;
}

.bewertungen-viewport {
    overflow: hidden;
    width: 100%;
    padding: 4px 0;
}

.bewertungen-grid {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    backface-visibility: hidden;
}

/* ---- Pfeile ---- */
.bewertungen-nav {
    position: absolute;
    top: 50%;
    margin-top: -22px;
    z-index: 5;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 1px solid rgba(209, 122, 82, 0.2);
    border-radius: 50%;
    color: var(--accent-green);
    cursor: pointer;
    padding: 0;
    box-shadow: 0 4px 14px rgba(26, 47, 43, 0.06);
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.bewertungen-nav svg {
    width: 20px;
    height: 20px;
    display: block;
    shape-rendering: geometricPrecision;
}

.bewertungen-nav-prev {
    left: -22px;
}

.bewertungen-nav-next {
    right: -22px;
}

.bewertungen-nav:hover:not(:disabled) {
    background: var(--accent-green);
    color: var(--white);
    border-color: var(--accent-green);
    transform: scale(1.06);
    box-shadow: 0 8px 20px rgba(46, 74, 65, 0.22);
}

.bewertungen-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    box-shadow: none;
}

/* ---- Karte – im Stil der Produkt-Cards (Bild 2) ---- */
.bewertung-card {
    background-color: var(--card-bg);
    border: 1px solid rgba(209, 122, 82, 0.15);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.6rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    box-sizing: border-box;
    box-shadow: 0 4px 14px rgba(26, 47, 43, 0.04);
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background-color 0.35s ease;
}

.bewertung-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(26, 47, 43, 0.10);
    border-color: rgba(209, 122, 82, 0.3);
    background-color: var(--white);
}

.bewertung-top {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

/* ---- Avatar: Einheitlich im dunklen Grün (überschreibt Google-Farben) ---- */
.bewertung-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: var(--accent-green) !important;
}

/* Falls du für Abwechslung doch mal Orange willst, kannst du das hier aktivieren,
   aber für ein perfektes, ruhiges Bild (Bild 2) ist Grün am besten. */
/*
.bewertung-card:nth-child(even) .bewertung-avatar {
    background-color: var(--accent-orange) !important;
}
*/

.bewertung-avatar-letter {
    font-family: var(--font-serif);
    font-weight: 600;
    color: #fff;
    font-size: 1.05rem;
    line-height: 1;
}

.bewertung-meta {
    flex: 1;
    min-width: 0;
}

/* ---- Name in Playfair ---- */
.bewertung-name {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.bewertung-verify {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    background-color: var(--accent-green);
    color: #fff;
    border-radius: 50%;
    font-size: 0.6rem;
    line-height: 1;
    margin-left: 4px;
    vertical-align: middle;
}

.bewertung-date {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: var(--text-body);
    opacity: 0.75;
    margin: 0;
    letter-spacing: 0.2px;
}

/* ---- Sterne in deinem Orange ---- */
.bewertung-stars {
    display: flex;
    gap: 2px;
    color: var(--accent-orange);
}

.bewertung-stars svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* ---- Text ---- */
.bewertung-text {
    font-family: var(--font-sans);
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--text-body);
    margin: 0;
    flex-grow: 1;
}

/* ---- Leerer Text (dezent schräg) ---- */
.bewertung-text-empty {
    font-style: italic;
    opacity: 0.6;
}

/* ---- "Mehr lesen" ---- */
.bewertung-readmore,
.bewertung-readmore:link,
.bewertung-readmore:visited,
.bewertung-readmore:active,
.bewertung-readmore:focus {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent-green);
    text-decoration: none;
    border-bottom: 2px solid var(--accent-orange);
    padding-bottom: 3px;
    align-self: flex-start;
    outline: none;
    transition: color 0.3s ease, border-color 0.3s ease, gap 0.35s ease;
}

.bewertung-readmore:hover {
    color: var(--accent-orange);
    border-color: var(--accent-green);
    gap: 0.75rem;
}

/* ---- Dots ---- */
.bewertungen-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 2rem;
}

.bewertungen-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(209, 122, 82, 0.25);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.25s ease, width 0.25s ease, border-radius 0.25s ease;
}

.bewertungen-dot.active {
    background: var(--accent-orange);
    width: 24px;
    border-radius: 4px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
    .bewertungen-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .bewertungen-google-btn {
        align-self: flex-start;
    }

    .bewertungen-nav {
        width: 40px;
        height: 40px;
        margin-top: -20px;
    }

    .bewertungen-nav-prev {
        left: -20px;
    }

    .bewertungen-nav-next {
        right: -20px;
    }
}

@media (max-width: 768px) {
    .bewertungen {
        padding: 4rem 5%;
    }

    .bewertungen-nav {
        width: 38px;
        height: 38px;
        margin-top: -19px;
    }

    .bewertungen-nav-prev {
        left: -14px;
    }

    .bewertungen-nav-next {
        right: -14px;
    }

    .bewertungen-nav svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 640px) {
    .bewertungen {
        padding: 4rem 6%;
    }

    .bewertungen-google-logo img,
    .bewertungen-google-logo svg {
        height: 22px;
    }

    .bewertungen-google-word {
        font-size: 1rem;
    }

    .bewertungen-rating {
        font-size: 1.3rem;
    }

    .bewertungen-grid {
        gap: 1rem;
    }

    .bewertungen-google-btn {
        width: 100%;
        justify-content: center;
        padding: 0.8rem 1rem;
    }

    .bewertung-card {
        padding: 1.3rem 1.3rem 1.1rem;
    }

    .bewertung-name {
        font-size: 0.98rem;
    }

    .bewertungen-nav {
        width: 36px;
        height: 36px;
        margin-top: -18px;
    }

    .bewertungen-nav-prev {
        left: -10px;
    }

    .bewertungen-nav-next {
        right: -10px;
    }
}

/* =========================================================
   HANDY AUFLADEN – Wizard
   ========================================================= */
.handy-wizard {
    padding: 6rem 5%;
    border-top: 1px solid rgba(209, 122, 82, 0.2);
}

.handy-wizard-inner {
    max-width: 720px;
    margin: 0 auto;
}

/* ---- Kopfbereich ---- */
.handy-wizard-header {
    text-align: center;
    margin-bottom: 3rem;
}

.handy-wizard-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-orange);
    font-weight: 500;
    margin: 0 0 1rem 0;
}

.handy-wizard-header h2 {
    margin-bottom: 1rem;
}

.handy-wizard-intro {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--text-dark);
    max-width: 560px;
    margin: 0 auto;
}

/* ---- Fortschritt ---- */
.hw-progress {
    margin-bottom: 3rem;
    position: relative;
    padding: 0 8px;
}

.hw-progress-track {
    position: absolute;
    top: 5px;
    left: 8px;
    right: 8px;
    height: 2px;
    background: rgba(209, 122, 82, 0.2);
    z-index: 0;
}

.hw-progress-bar {
    height: 100%;
    width: 0;
    background: var(--accent-orange);
    transition: width 0.4s ease;
}

.hw-progress-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.hw-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg-color);
    border: 2px solid rgba(209, 122, 82, 0.3);
    transition: all 0.3s ease;
    display: block;
}

.hw-dot.is-active {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    transform: scale(1.15);
}

.hw-dot.is-done {
    background: var(--accent-green);
    border-color: var(--accent-green);
}

/* ---- Schritte ---- */
.hw-step {
    display: none;
    animation: hwFadeIn 0.35s ease;
}

.hw-step.is-active {
    display: block;
}

@keyframes hwFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hw-step-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent-orange);
    font-weight: 500;
    margin: 0 0 0.6rem 0;
}

.hw-step-title {
    font-family: var(--font-serif);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.25;
    margin: 0 0 0.8rem 0;
}

.hw-step-hint {
    font-size: 0.95rem;
    color: var(--text-body);
    margin: 0 0 1.5rem 0;
}

/* ---- Felder ---- */
.hw-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.hw-field input {
    width: 100%;
    height: 54px;
    padding: 0 1.1rem;
    border: 1px solid #e2ddd0;
    border-radius: var(--radius-sm);
    background: #FCFAF5;
    font-family: var(--font-sans);
    font-size: 1.05rem;
    color: var(--text-dark);
    box-sizing: border-box;
    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}

.hw-field input:focus {
    outline: none;
    border-color: var(--accent-green);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(46, 74, 65, 0.08);
}

.hw-field input.is-error {
    border-color: #c62828;
    background: #fff5f5;
}

.hw-error {
    font-size: 0.85rem;
    color: #c62828;
    line-height: 1.4;
}

/* ---- Auswahl ---- */
.hw-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 2rem;
}

.hw-choices-provider .hw-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: #fff;
    border: 1px solid #e2ddd0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--text-dark);
    transition: all 0.2s ease;
}

/* ---- Anbieter-Auswahl: gleiche Optik wie Betrag-Pillen ---- */
.hw-choices-provider {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 2rem;
}

.hw-choices-provider .hw-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.3rem;
    background: #fff;
    border: 1px solid #e2ddd0;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s ease;
}

.hw-choices-provider .hw-choice:hover {
    border-color: var(--accent-orange);
    transform: translateY(-1px);
}

.hw-choices-provider .hw-choice.is-selected {
    background: rgba(209, 122, 82, 0.06);
    border: 2px solid var(--accent-orange);
    padding: calc(0.7rem - 1px) calc(1.3rem - 1px);
    color: var(--text-dark);
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(209, 122, 82, 0.12);
}

/* Logo in der Pille – Höhe reduziert, damit sie flach bleibt */
.hw-choice-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

/* Wenn ausgewählt → Logo weiß einfärben (per Filter) */
.hw-choices-provider .hw-choice.is-selected {
    background: rgba(46, 74, 65, 0.08);
    border: 1.5px solid var(--accent-green);
    color: var(--accent-green);
    font-weight: 600;
}

.hw-choice-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}

.hw-choice-pill {
    padding: 0.7rem 1.3rem;
    background: #fff;
    border: 1px solid #e2ddd0;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s ease;
}

.hw-choice-pill:hover {
    border-color: var(--accent-orange);
    transform: translateY(-1px);
}

.hw-choice-pill.is-selected {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    color: #fff;
}

.hw-choices-mode {
    flex-direction: column;
    gap: 0.6rem;
}

.hw-choice-line {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    background: #fff;
    border: 1px solid #e2ddd0;
    border-radius: var(--radius-sm);
    text-align: left;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all 0.2s ease;
    width: 100%;
}

.hw-choice-line:hover {
    border-color: var(--accent-orange);
}

.hw-choice-line.is-selected {
    border-color: var(--accent-green);
    background: rgba(46, 74, 65, 0.04);
}

.hw-choice-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #c8c8c8;
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
    transition: all 0.2s ease;
}

.hw-choice-line.is-selected .hw-choice-check {
    border-color: var(--accent-green);
    background: var(--accent-green);
}

.hw-choice-line.is-selected .hw-choice-check::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

.hw-choice-line strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.2rem;
}

.hw-choice-line em {
    display: block;
    font-style: normal;
    font-size: 0.9rem;
    color: var(--text-body);
    line-height: 1.5;
}

/* ---- Buttons ---- */
.hw-actions {
    display: flex;
    gap: 0.8rem;
    margin-top: 1rem;
}

.hw-actions-split {
    justify-content: space-between;
}

.hw-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.6rem 1.4rem;

    background: linear-gradient(135deg,
            var(--accent-green) 0%,
            #3A5C51 100%);
    color: var(--white);

    border: none;
    border-radius: 999px;

    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.4px;
    line-height: 1;

    text-decoration: none;

    box-shadow:
        0 4px 14px rgba(46, 74, 65, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);

    transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease,
        background-position 0.6s ease;

    background-size: 200% 200%;
    background-position: 0% 50%;
}

.hw-btn-primary:hover:not(:disabled) {
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow:
        0 8px 22px rgba(46, 74, 65, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.hw-btn-primary:disabled {
    background: #c8c8c8;
    cursor: not-allowed;
    opacity: 0.6;
}

.hw-btn-ghost {
    background: transparent;
    color: var(--text-dark);
    border: 1px solid #e2ddd0;
}

.hw-btn-ghost:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

/* ---- Zusammenfassung ---- */
.hw-summary {
    margin: 2rem 0 1rem;
    padding: 1.5rem 1.5rem 1rem;
    background: #FCFAF5;
    border: 1px solid rgba(209, 122, 82, 0.18);
    border-radius: var(--radius-md);
}

.hw-summary-title {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 1rem 0;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(209, 122, 82, 0.18);
}

.hw-summary-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.hw-summary-list>div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.hw-summary-list dt {
    font-size: 0.88rem;
    color: var(--text-body);
    margin: 0;
}

.hw-summary-list dd {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
    text-align: right;
}

/* ---- Abschluss ---- */
.hw-step-done {
    text-align: center;
}

.hw-done-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent-green);
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.hw-done-title {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 0.8rem 0;
}

.hw-done-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-body);
    max-width: 500px;
    margin: 0 auto 2rem;
}

.hw-done-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.hw-done-note {
    font-size: 0.82rem;
    color: var(--text-body);
    font-style: italic;
    max-width: 460px;
    margin: 0 auto 1.2rem;
    line-height: 1.5;
}

.hw-restart {
    background: none;
    border: none;
    color: var(--text-body);
    font-size: 0.88rem;
    text-decoration: underline;
    cursor: pointer;
    font-family: var(--font-sans);
    padding: 0.5rem;
}

.hw-restart:hover {
    color: var(--accent-orange);
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
    .handy-wizard {
        padding: 4rem 6%;
    }

    .hw-step-title {
        font-size: 1.4rem;
    }

    .hw-choices-provider .hw-choice {
        font-size: 0.88rem;
        padding: 0.55rem 0.85rem;
    }

    .hw-choice-pill {
        padding: 0.6rem 1.1rem;
        font-size: 0.95rem;
    }

    .hw-actions,
    .hw-actions-split,
    .hw-done-actions {
        flex-direction: column;
    }

    .hw-btn {
        width: 100%;
    }

    .hw-progress {
        margin-bottom: 2.2rem;
    }
}

/* ---- Handy-Wizard: keine Linie unter der Intro ---- */
.handy-wizard-header,
.handy-wizard-intro {
    border-bottom: none !important;
    box-shadow: none !important;
}

.handy-wizard-header::after,
.handy-wizard-intro::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   CTA-Gruppe – Kontakt, Mehr erfahren, 1&1 Shop
   ========================================================= */

.hero-content .cta-group .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.6rem 1.4rem;

    background: linear-gradient(135deg,
            var(--accent-green) 0%,
            #3A5C51 100%);
    color: var(--white);

    border: none;
    border-radius: 999px;

    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.4px;
    line-height: 1;

    text-decoration: none;

    box-shadow:
        0 4px 14px rgba(46, 74, 65, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);

    transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease,
        background-position 0.6s ease;

    background-size: 200% 200%;
    background-position: 0% 50%;
}

.hero-content .cta-group .btn-primary:hover {
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow:
        0 8px 22px rgba(46, 74, 65, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Der 1&1 Shop-Link sitzt rechts daneben, mit etwas
   mehr Abstand – als eigener Block, nicht als Teil der
   "Kontakt/Mehr erfahren"-Gruppe. */
.btn-shop-1und1 {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;

    margin-left: 1.2rem;
    padding-left: 1.6rem;

    border-left: 1px solid rgba(209, 122, 82, 0.3);

    text-decoration: none;
    color: var(--text-dark);

    transition: color 0.3s ease;
}

.btn-shop-1und1:hover {
    color: var(--accent-orange);
}

/* Logo – größer als vorher (22px statt 15px) */
.btn-shop-1und1-logo {
    height: 22px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.btn-shop-1und1 span {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    line-height: 1;
}

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

@media (max-width: 768px) {
    .hero-content .location {
        font-size: 0.72rem;
        letter-spacing: 1.2px;
        margin-bottom: 1.5rem;
    }

    .hero-content .cta-group {
        flex-direction: column;
        align-items: center;
        gap: 1.3rem;
    }

    /* Auf Mobile: Trennlinie weg, alles mittig */
    .btn-shop-1und1 {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }

    .btn-shop-1und1-logo {
        height: 20px;
    }

    .btn-shop-1und1 span {
        font-size: 0.9rem;
        letter-spacing: 1.1px;
    }
}

@media (max-width: 400px) {
    .hero-content .location {
        font-size: 0.68rem;
        letter-spacing: 1px;
    }

    .btn-shop-1und1-logo {
        height: 18px;
    }
}

/* =========================================================
   PCVisit Fernwartung – nur das PNG, keine Hülle
   ========================================================= */

.btn-pcvisit {
    display: inline-block;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    text-decoration: none;
    line-height: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.btn-pcvisit:hover {
    transform: translateY(-2px);
    opacity: 0.85;
}

.btn-pcvisit-logo {
    display: block;
    height: 40px;
    /* ← Größe nach Wunsch anpassen */
    width: auto;
}


/* =========================================================
   HEADER – alles auf einer Linie, clean, konsistent
   ========================================================= */

header {
    padding: 0.9rem 5%;
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: rgba(244, 240, 230, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(209, 122, 82, 0.15);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    max-width: var(--max-width);
    margin: 0 auto;
    position: relative;
}

/* Logo */
.logo {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
    transition: color 0.3s ease;
}

.logo:hover {
    color: var(--accent-orange);
}

/* =========================================================
   NAVIGATION – alles auf einer Linie
   ========================================================= */

.main-nav {
    display: flex;
    align-items: center;
}

nav>ul.nav-main-list {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

nav>ul.nav-main-list>li {
    display: flex;
    align-items: center;
}

nav>ul.nav-main-list>li>a {
    display: inline-flex;
    align-items: center;
    position: relative;

    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 1;

    color: var(--text-dark);
    text-decoration: none;
    padding: 0 0 4px 0;
    background: none;
    border: none;

    transition: color 0.3s ease;
}

/* Unterlinie – von der Mitte wachsend */
nav>ul.nav-main-list>li>a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1.5px;
    background-color: var(--accent-orange);
    transform: translateX(-50%);
    opacity: 0;
    transition:
        width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.25s ease;
}

nav>ul.nav-main-list>li>a:hover::after,
nav>ul.nav-main-list>li>a.is-active::after {
    width: 100%;
    opacity: 1;
}

nav>ul.nav-main-list>li>a:hover,
nav>ul.nav-main-list>li>a.is-active {
    color: var(--text-dark);
}

/* Dropdown-Toggle */
nav>ul.nav-main-list>li>a.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* =========================================================
   DOWNLOADS – exakt auf gleicher Linie
   ========================================================= */

nav>ul.nav-main-list>li>a.nav-external {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1;
}

nav>ul.nav-main-list>li>a.nav-external .nav-external-text {
    display: inline-block;
    line-height: 1;
}

nav>ul.nav-main-list>li>a.nav-external .nav-external-icon {
    display: block;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    margin: 0;
}


/* =========================================================
   BURGER-BUTTON (nur Mobile sichtbar)
   ========================================================= */

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    flex-direction: column;
    gap: 5px;
    z-index: 60;
}

.nav-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--text-dark);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 768px) {

    .header-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }

    .nav-toggle {
        display: flex;
    }

    /* Navigation als aufklappbares Panel */
    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(244, 240, 230, 0.98);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid rgba(209, 122, 82, 0.15);
        border-bottom: 1px solid rgba(209, 122, 82, 0.15);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 55;
        box-shadow: 0 8px 24px rgba(26, 47, 43, 0.08);
    }

    .main-nav.is-open {
        max-height: 100vh;
        overflow-y: auto;
    }

    .nav-main-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 1rem 1.5rem 1.5rem 1.5rem;
        width: 100%;
        text-align: center;
    }

    .nav-main-list>li {
        width: 100%;
        border-bottom: 1px solid rgba(209, 122, 82, 0.12);
    }

    .nav-main-list>li:last-child {
        border-bottom: none;
    }

    .nav-main-list>li>a {
        display: block;
        padding: 1rem 0;
        font-size: 1rem;
        width: 100%;
        text-align: center;
        color: var(--text-dark);
    }

    /* Kontakt-Button auf Mobile */
    .nav-main-list>li>a.nav-cta {
        margin-top: 1rem;
        width: 100%;
        text-align: center;
        padding: 0.9rem 1rem;
    }

    /* Downloads-Link auf Mobile */
    .nav-main-list>li>a.nav-external {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.4rem;
        padding: 1rem 0;
        text-align: center;
        width: 100%;
    }

    /* Dropdowns auf Mobile */
    .nav-dropdown {
        width: 100%;
    }

    .nav-dropdown-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        padding: 1rem 0;
        font-size: 1rem;
        text-align: center;
        cursor: pointer;
    }

    .nav-dropdown-arrow {
        display: block !important;
        width: 12px;
        height: 12px;
        transition: transform 0.3s ease;
    }

    .nav-dropdown.is-open .nav-dropdown-arrow {
        transform: rotate(180deg);
    }

    .nav-dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        box-shadow: none;
        border: none;
        padding: 0;
        margin: 0;
        min-width: 0;
        width: 100%;
        background: transparent;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .nav-dropdown.is-open .nav-dropdown-menu {
        max-height: 600px;
        overflow: visible;
    }

    .nav-dropdown-menu::before {
        display: none;
    }

    .nav-dropdown-menu li {
        width: 100%;
        border-bottom: 1px solid rgba(209, 122, 82, 0.08);
    }

    .nav-dropdown-menu li:last-child {
        border-bottom: none;
    }

    .nav-dropdown-menu .dd-link {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.9rem;
        padding: 0.85rem 0.5rem;
        width: 100%;
        text-align: left;
        grid-template-columns: none;
    }

    .nav-dropdown-menu .dd-icon {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

    .nav-dropdown-menu .dd-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.1rem;
        text-align: left;
        flex: 1;
        min-width: 0;
    }

    .nav-dropdown-menu .dd-text strong {
        font-size: 0.92rem;
        white-space: normal;
    }

    .nav-dropdown-menu .dd-text em {
        font-size: 0.78rem;
        white-space: normal;
    }
}

/* =========================================================
   HEADER – Kontakt-Button (identisch mit Hero-Kontaktieren)
   ========================================================= */

nav>ul.nav-main-list>li.nav-cta-item {
    margin-left: 0.5rem;
}

nav>ul.nav-main-list>li>a.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    padding: 0.6rem 1.3rem 0.6rem 1.4rem;

    background-color: var(--accent-green);
    color: var(--white);

    border: none;
    border-radius: 999px;

    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.4px;
    line-height: 1;

    text-decoration: none;

    box-shadow: 0 3px 12px rgba(46, 74, 65, 0.15);

    transition:
        background-color 0.3s ease,
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease,
        gap 0.35s ease;
}

nav>ul.nav-main-list>li>a.nav-cta::after {
    content: "→";
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.3s ease;
}

nav>ul.nav-main-list>li>a.nav-cta:hover {
    background-color: var(--accent-green-hover);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(46, 74, 65, 0.25);
    gap: 0.7rem;
}

/* Keine Unterlinie beim Kontakt-Button */
nav>ul.nav-main-list>li>a.nav-cta::before {
    content: none;
}

nav>ul.nav-main-list>li>a.nav-cta::after {
    content: "→";
    /* ← der Pfeil, nicht die Unterlinie */
}

/* =========================================================
   KONTAKT-BUTTON – clean, ruhig, kein Anheben
   ========================================================= */

nav>ul.nav-main-list>li.nav-cta-item {
    margin-left: 0.5rem;
}

nav>ul.nav-main-list>li>a.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.55rem 1.2rem;

    background-color: var(--accent-green);
    color: var(--white);

    border: none;
    border-radius: 999px;

    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 1;

    text-decoration: none;

    box-shadow: 0 2px 8px rgba(46, 74, 65, 0.12);

    transition: background-color 0.3s ease;
}

/* Hover – NUR Farbe, kein Bewegen */
nav>ul.nav-main-list>li>a.nav-cta:hover {
    background-color: var(--accent-green-hover);
    color: var(--white);
    transform: none;
    box-shadow: 0 2px 8px rgba(46, 74, 65, 0.12);
}

/* Keine Unterlinie, kein Pfeil */
nav>ul.nav-main-list>li>a.nav-cta::before,
nav>ul.nav-main-list>li>a.nav-cta::after,
nav>ul.nav-main-list>li>a.nav-cta:hover::before,
nav>ul.nav-main-list>li>a.nav-cta:hover::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    position: static !important;
    transform: none !important;
    opacity: 0 !important;
}

/* =========================================================
   IMPRESSUM – Logo neben dem Text
   ========================================================= */

.legal-body {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4rem;
    align-items: flex-start;
}



.legal-aside {
    top: 120px;
    justify-self: end;
    /* ← schiebt das Logo nach rechts */
    text-align: right;
    /* ← Logo rechtsbündig */
    padding-top: 0.5rem;
}

.legal-aside-logo {
    width: 350px;
    height: auto;
    display: block;
    opacity: 0.9;
    filter: drop-shadow(0 6px 18px rgba(26, 47, 43, 0.08));
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.legal-aside-logo:hover {
    opacity: 1;
    transform: translateY(-2px);
}

/* Mobile: Logo wandert unter den Text */
@media (max-width: 768px) {
    .legal-body {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .legal-aside {
        position: static;
        display: flex;
        justify-content: center;
        order: 2;
    }

    .legal-aside-logo {
        width: 130px;
    }
}

/* =========================================================
   LOGO rechts neben dem Text – nur für Datenschutz & Impressum
   ========================================================= */

.legal-aside {
    position: fixed;
    top: 120px;
    justify-self: end;
    text-align: right;
    padding-top: 0.5rem;
}

.legal-aside-logo {
    width: 350px;
    height: auto;
    display: block;
    opacity: 0.9;
    filter: drop-shadow(0 6px 18px rgba(26, 47, 43, 0.08));
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.legal-aside-logo:hover {
    opacity: 1;
    transform: translateY(-2px);
}

/* Mobile: Logo wandert unter den Text, zentriert */
@media (max-width: 768px) {
    .legal-aside {
        position: static;
        display: flex;
        justify-content: center;
        margin-top: 2.5rem;
    }

    .legal-aside-logo {
        width: 130px;
    }
}

/* =========================================================
   Geschäftskunden – Text-Tausch mit schönem Info-Icon
   ========================================================= */

.biz-swap {
    position: relative;
    display: inline;
    cursor: help;
    white-space: nowrap;
}

.biz-default {
    display: inline;
    color: inherit;
    font-weight: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    transition: opacity 0.2s ease;
}

/* Das Info-Icon – schön, rund, dezent */
.biz-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 15px;
    height: 15px;
    margin-left: 0.3rem;

    /* Runder Kreis, sehr dezent */
    border-radius: 50%;
    background-color: rgba(209, 122, 82, 0.12);
    color: var(--accent-orange);

    /* Serif-Kursive für edles "i" */
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    /* Sanft auf die Grundlinie */
    vertical-align: -2px;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hover – Icon wird gefüllt */
.biz-swap:hover .biz-info {
    background-color: var(--accent-orange);
    color: var(--white);
    transform: scale(1.08);
}

/* Ersatz-Text */
.biz-hover {
    position: absolute;
    top: -3.9px;
    left: 0;

    display: inline;
    white-space: nowrap;

    color: inherit;
    font-weight: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.biz-swap:hover .biz-default {
    opacity: 0;
    visibility: hidden;
}

.biz-swap:hover .biz-hover {
    opacity: 1;
    visibility: visible;
}

/* =========================================================
   Mobile – komplett aus
   ========================================================= */

@media (max-width: 768px) {
    .biz-swap {
        white-space: normal;
        cursor: default;
    }

    .biz-info {
        display: none;
    }

    .biz-hover {
        display: none;
    }

    .biz-swap:hover .biz-default {
        opacity: 1;
        visibility: visible;
    }
}

/* =========================================================
   KATALOGE IM HERO – pixelperfekt & responsive
   ========================================================= */

/* Hero bleibt Bezugsfläche – bestehende Werte bleiben unverändert */
.vs-hero {
    position: relative;
    /* padding, display etc. bleiben wie vorher */
}

/* Kataloge: absolut positioniert, nehmen keinen Platz im Fluss ein */
.vs-hero-kataloge {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    /* Abstand zum unteren Rand des Heros */
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    z-index: 2;
    white-space: nowrap;
}

/* Label links mit Strich danach */
.vs-kataloge-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-muted, #6b7280);
    position: relative;
    padding-right: 1.25rem;
    white-space: nowrap;
}

.vs-kataloge-label::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
    background: rgba(26, 47, 43, 0.18);
}

/* Drei Einträge – exakt gleiche Breite und Höhe */
.vs-kataloge-list {
    display: grid;
    grid-template-columns: repeat(3, 180px);
    gap: 0.5rem;
}

/* Ein Eintrag – kein Kasten, nur Text, linksbündig, gleiche Höhe */
.vs-katalog-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    height: 44px;
    padding-left: 0.9rem;
    border-left: 1px solid rgba(26, 47, 43, 0.12);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease;
}

.vs-katalog-item:hover {
    border-left-color: var(--color-primary, #1a2f2b);
}

.vs-katalog-name {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--color-primary, #1a2f2b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vs-katalog-sub {
    font-size: 0.72rem;
    line-height: 1.15;
    color: var(--color-muted, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================================
   RESPONSIVE – Kataloge auf Mobile mittig
   ========================================================= */

/* Tablets / kleine Laptops: etwas engere Spalten */
@media (max-width: 1024px) {
    .vs-hero-kataloge {
        gap: 1rem;
    }

    .vs-kataloge-list {
        grid-template-columns: repeat(3, 160px);
    }
}

/* Kleine Tablets / große Phones (Querformat) */
@media (max-width: 860px) {
    .vs-hero-kataloge {
        position: static;
        transform: none;
        margin-top: 2.25rem;
        flex-direction: column;
        align-items: center;
        /* <- mittig */
        text-align: center;
        /* <- Text in der Mitte */
        gap: 1.1rem;
        white-space: normal;
        width: 100%;
    }

    .vs-kataloge-label {
        padding-right: 0;
        padding-bottom: 0.75rem;
    }

    .vs-kataloge-label::after {
        right: auto;
        left: 50%;
        /* <- Strich mittig */
        top: auto;
        bottom: 0;
        transform: translateX(-50%);
        width: 32px;
        height: 1px;
    }

    .vs-kataloge-list {
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
        gap: 0.75rem;
    }

    .vs-katalog-item {
        height: auto;
        padding: 0.6rem 0;
        border-left: none;
        /* <- Trennlinie weg auf Mobile */
        align-items: center;
        /* <- Inhalt mittig */
        text-align: center;
    }
}

/* Phones: eine Spalte, mittig */
@media (max-width: 600px) {
    .vs-hero-kataloge {
        margin-top: 2rem;
        gap: 0.9rem;
    }

    .vs-kataloge-list {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .vs-katalog-item {
        height: auto;
        padding: 0.7rem 0;
        border-left: none;
        border-bottom: 1px solid rgba(26, 47, 43, 0.08);
        align-items: center;
        text-align: center;
    }

    .vs-katalog-item:last-child {
        border-bottom: none;
    }

    .vs-katalog-name {
        font-size: 0.9rem;
    }

    .vs-katalog-sub {
        font-size: 0.75rem;
    }
}

/* Sehr kleine Phones */
@media (max-width: 380px) {
    .vs-katalog-name {
        font-size: 0.85rem;
    }

    .vs-katalog-sub {
        font-size: 0.72rem;
    }
}

/* =========================================================
   FAQ
   ========================================================= */
.faq {
    padding: 6rem 5%;
    border-top: 1px solid rgba(209, 122, 82, 0.2);
}

.faq-inner {
    max-width: 900px;
    margin: 0 auto;
}

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

.faq-header h2 {
    margin: 0 0 1rem 0;
}

.faq-lead {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--text-dark);
    max-width: 620px;
    margin: 0 auto;
}

/* Liste */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq-item {
    border: 1px solid rgba(209, 122, 82, 0.18);
    border-radius: var(--radius-md);
    background-color: var(--white);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq-item:hover {
    border-color: rgba(209, 122, 82, 0.35);
}

.faq-item[open] {
    border-color: rgba(209, 122, 82, 0.45);
    box-shadow: 0 6px 18px rgba(26, 47, 43, 0.05);
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dark);
    transition: color 0.2s ease;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary:hover {
    color: var(--accent-orange);
}

.faq-item[open] summary {
    color: var(--text-dark);
}

.faq-icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: var(--accent-green);
    transition: transform 0.3s ease, color 0.25s ease;
}

.faq-item[open] .faq-icon {
    transform: rotate(180deg);
    color: var(--accent-orange);
}

.faq-answer {
    padding: 0 1.3rem 1.2rem 1.3rem;
    font-size: 0.98rem;
    line-height: 1.75;
    color: var(--text-body);
}

.faq-answer p {
    margin: 0;
}

/* =========================================================
   FAQ – spielerische Antwort: Vor Ort / Fernwartung
   ========================================================= */
.faq-wege-intro {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.02rem;
    color: var(--text-dark);
    margin: 0 0 1.1rem 0;
}

.faq-wege-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    margin-bottom: 1.1rem;
}

.faq-wege-card {
    padding: 1.15rem 1.15rem 1rem 1.15rem;
    background-color: var(--white);
    border: 1px solid rgba(209, 122, 82, 0.18);
    border-radius: var(--radius-md);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.faq-wege-card:hover {
    transform: translateY(-3px);
    border-color: rgba(209, 122, 82, 0.38);
    box-shadow: 0 10px 24px rgba(26, 47, 43, 0.07);
}

.faq-wege-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--accent-orange-soft);
    color: var(--accent-green);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s ease;
}

.faq-wege-card:hover .faq-wege-icon {
    background-color: var(--accent-green);
    color: var(--white);
    transform: rotate(-6deg);
}

.faq-wege-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.faq-wege-card h4 {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 0.35rem 0;
    line-height: 1.25;
}

.faq-wege-card p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-body);
    margin: 0;
}

.faq-wege-hint {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.98rem;
    color: var(--text-dark);
    margin: 0;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(209, 122, 82, 0.16);
    text-align: left;
}

/* =========================================================
   FAQ – Fußhinweis auf Kontaktformular
   ========================================================= */
.faq-footer {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(209, 122, 82, 0.2);
    text-align: center;
}

.faq-footer p {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--text-dark);
    margin: 0;
}

.faq-footer a {
    color: var(--accent-green);
    text-decoration: none;
    border-bottom: 2px solid var(--accent-orange);
    padding-bottom: 2px;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.faq-footer a:hover {
    color: var(--accent-orange);
    border-color: var(--accent-green);
}

/* =========================================================
   FAQ – Responsive
   ========================================================= */
@media (max-width: 768px) {
    .faq {
        padding: 4rem 1rem;
    }

    .faq-header {
        margin-bottom: 2.2rem;
    }

    .faq-lead {
        font-size: 1.05rem;
    }

    .faq-item summary {
        padding: 1rem 1.1rem;
        font-size: 0.95rem;
    }

    .faq-answer {
        padding: 0 1.1rem 1rem 1.1rem;
        font-size: 0.94rem;
    }

    .faq-footer p {
        font-size: 0.98rem;
    }
}

@media (max-width: 600px) {
    .faq-wege-grid {
        grid-template-columns: 1fr;
    }

    .faq-wege-card {
        padding: 1.05rem 1rem 0.95rem 1rem;
    }
}

@media (max-width: 400px) {
    .faq-item summary {
        font-size: 0.92rem;
    }

    .faq-answer {
        font-size: 0.9rem;
    }
}

/* =========================================================
   COOKIE – Banner · Modal · Footer-Button · Map
   Farben & Typo konsistent mit dem restlichen Design
   ========================================================= */


/* =========================================================
   COOKIE BANNER
   ========================================================= */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    background-color: var(--bg-color);
    border-top: 1px solid rgba(209, 122, 82, 0.25);
    box-shadow: 0 -12px 40px rgba(26, 47, 43, 0.10);
    transform: translateY(110%);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    padding: 26px 5%;
    padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
}

.cookie-banner.is-visible {
    transform: translateY(0);
}

.cookie-banner-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 36px;
    flex-wrap: wrap;
}

.cookie-banner-text {
    flex: 1 1 420px;
    min-width: 260px;
}

.cookie-banner-text p {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-body);
    margin: 0;
}

/* Normale Links im Banner – gilt nicht für .btn-secondary */
.cookie-banner-text a:not(.btn-secondary) {
    color: var(--text-dark);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-orange);
    padding-bottom: 1px;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.cookie-banner-text a:not(.btn-secondary):hover {
    color: var(--accent-orange);
    border-color: var(--accent-green);
}

.cookie-banner-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}


/* =========================================================
   COOKIE BUTTONS – Basis identisch, nur Farbe unterschiedlich
   ========================================================= */
.cookie-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.4rem;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.4px;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease,
        background-color 0.3s ease,
        background-position 0.6s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.cookie-btn:focus-visible {
    outline: 2px solid var(--accent-green);
    outline-offset: 3px;
}

.cookie-btn:active {
    transform: translateY(0) scale(0.97);
}

.cookie-btn-primary {
    background: linear-gradient(135deg, var(--accent-green) 0%, #3A5C51 100%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    color: var(--white);
    border-color: var(--accent-green);
    box-shadow:
        0 4px 14px rgba(46, 74, 65, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.cookie-btn-primary:hover {
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow:
        0 8px 22px rgba(46, 74, 65, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.cookie-btn-secondary {
    background-color: transparent;
    color: var(--text-dark);
    border-color: rgba(46, 74, 65, 0.28);
}

.cookie-btn-secondary:hover {
    background-color: rgba(46, 74, 65, 0.06);
    border-color: var(--accent-green);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(46, 74, 65, 0.10);
}


/* =========================================================
   COOKIE MODAL
   ========================================================= */
.cookie-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.cookie-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.cookie-modal-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(26, 47, 43, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cookie-modal-content {
    position: relative;
    background-color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 60px rgba(26, 47, 43, 0.25);
    max-width: 620px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 3rem 2.5rem 2.5rem 2.5rem;
    z-index: 1;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.cookie-modal.is-open .cookie-modal-content {
    transform: translateY(0) scale(1);
}

.cookie-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background-color: var(--accent-orange-soft);
    color: var(--text-dark);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.cookie-modal-close:hover {
    background-color: var(--accent-orange);
    color: var(--white);
    transform: rotate(90deg);
}

.cookie-modal-content h2 {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.9rem;
    line-height: 1.15;
    letter-spacing: -0.4px;
    color: var(--text-dark);
    margin: 0 0 0.8rem 0;
    padding-right: 2rem;
}

.cookie-modal-intro {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-body);
    margin: 0 0 1.8rem 0;
}

.cookie-modal-intro a {
    color: var(--text-dark);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-orange);
    transition: color 0.3s ease, border-color 0.3s ease;
}

.cookie-modal-intro a:hover {
    color: var(--accent-orange);
    border-color: var(--accent-green);
}

.cookie-category {
    background-color: var(--card-bg);
    border: 1px solid rgba(209, 122, 82, 0.15);
    border-radius: var(--radius-md);
    padding: 1.2rem 1.3rem;
    margin-bottom: 0.75rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.cookie-category:hover {
    border-color: rgba(209, 122, 82, 0.35);
    box-shadow: 0 4px 14px rgba(26, 47, 43, 0.05);
}

.cookie-category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
}

.cookie-category-head h4 {
    font-family: var(--font-sans);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 0.3rem 0;
    line-height: 1.3;
}

.cookie-category-head p {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-body);
    max-width: 380px;
    margin: 0;
}

.cookie-toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 28px;
    flex: 0 0 auto;
    cursor: pointer;
}

.cookie-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-toggle-slider {
    position: absolute;
    inset: 0;
    background-color: #d5cfc0;
    border-radius: 999px;
    transition: background-color 0.25s ease;
}

.cookie-toggle-slider::before {
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    top: 3px;
    background-color: var(--white);
    border-radius: 50%;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 2px 6px rgba(26, 47, 43, 0.2);
}

.cookie-toggle input:checked+.cookie-toggle-slider {
    background-color: var(--accent-green);
}

.cookie-toggle input:checked+.cookie-toggle-slider::before {
    transform: translateX(20px);
}

.cookie-toggle-locked {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-green);
    background-color: rgba(46, 74, 65, 0.08);
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    white-space: nowrap;
}

.cookie-modal-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.6rem;
    flex-wrap: wrap;
}


/* =========================================================
   MAP-CONTAINER + PLATZHALTER
   ========================================================= */
.info-map {
    position: relative;
    width: 100%;
    height: 240px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: #eee;
    box-shadow: 0 4px 12px rgba(26, 47, 43, 0.08);
    border: 1px solid rgba(209, 122, 82, 0.15);
}

.info-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--radius-md);
}

.map-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--card-bg) 0%, #efe9db 100%);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
}

.map-placeholder-inner {
    max-width: 320px;
}

.map-placeholder-icon {
    width: 42px;
    height: 42px;
    margin: 0 auto 0.8rem auto;
    color: var(--accent-green);
    opacity: 0.75;
}

.map-placeholder-icon svg {
    width: 100%;
    height: 100%;
}

.map-placeholder h4 {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.2;
    letter-spacing: -0.3px;
    color: var(--text-dark);
    margin: 0 0 0.5rem 0;
}

.map-placeholder p {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-body);
    margin: 0 0 1.1rem 0;
}

.btn-map-consent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.4rem;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.4px;
    line-height: 1;
    color: var(--text-dark);
    background-color: transparent;
    border: 1px solid rgba(46, 74, 65, 0.28);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-map-consent:hover {
    background-color: rgba(46, 74, 65, 0.06);
    border-color: var(--accent-green);
    transform: translateY(-2px);
}


/* =========================================================
   FOOTER + FLOATING COOKIE BUTTON
   ========================================================= */
.site-footer {
    position: relative;
}

.cookie-fab {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(209, 122, 82, 0.2);
    background-color: var(--white);
    color: var(--text-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow:
        0 1px 2px rgba(26, 47, 43, 0.04),
        0 6px 18px rgba(26, 47, 43, 0.08);
    transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease,
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.cookie-fab svg {
    width: 20px;
    height: 20px;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.cookie-fab:hover {
    background-color: var(--accent-green);
    color: var(--white);
    border-color: var(--accent-green);
    transform: translateY(-50%) scale(1.06);
    box-shadow:
        0 2px 4px rgba(26, 47, 43, 0.06),
        0 12px 26px rgba(46, 74, 65, 0.22);
}

.cookie-fab:hover svg {
    transform: rotate(-12deg);
}

.cookie-fab:focus-visible {
    outline: 2px solid var(--accent-green);
    outline-offset: 3px;
}

.cookie-fab:active {
    transform: translateY(-50%) scale(0.96);
}


/* =========================================================
   RESPONSIVE – MOBILE
   ========================================================= */

/* ---------- Tablet & kleinere Laptops ---------- */
@media (max-width: 900px) {
    .cookie-banner {
        padding: 22px 5%;
        padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    }

    .cookie-banner-inner {
        gap: 24px;
    }

    .cookie-banner-actions {
        gap: 10px;
    }
}

/* ---------- Handy ---------- */
@media (max-width: 768px) {

    /* Banner */
    .cookie-banner {
        padding: 20px 20px;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }

    .cookie-banner-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .cookie-banner-text {
        flex: 1 1 auto;
        min-width: 0;
    }

    .cookie-banner-text p {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .cookie-banner-actions {
        flex-direction: column-reverse;
        gap: 8px;
        width: 100%;
    }

    .cookie-banner-actions .cookie-btn {
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 0.92rem;
    }

    /* Modal */
    .cookie-modal {
        padding: 1rem;
    }

    .cookie-modal-content {
        padding: 2.25rem 1.5rem 1.75rem 1.5rem;
        max-height: 92vh;
        border-radius: var(--radius-md);
    }

    .cookie-modal-content h2 {
        font-size: 1.5rem;
        padding-right: 2.5rem;
    }

    .cookie-modal-intro {
        font-size: 0.95rem;
        margin-bottom: 1.4rem;
    }

    .cookie-modal-close {
        width: 36px;
        height: 36px;
        font-size: 1.4rem;
        top: 0.8rem;
        right: 0.8rem;
    }

    .cookie-category {
        padding: 1rem 1rem;
        margin-bottom: 0.6rem;
    }

    .cookie-category-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .cookie-category-head h4 {
        font-size: 0.94rem;
    }

    .cookie-category-head p {
        font-size: 0.85rem;
        max-width: 100%;
    }

    .cookie-toggle {
        align-self: flex-end;
    }

    .cookie-modal-actions {
        flex-direction: column-reverse;
        gap: 8px;
        margin-top: 1.3rem;
    }

    .cookie-modal-actions .cookie-btn {
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 0.92rem;
    }

    /* Map */
    .info-map {
        height: 220px;
    }

    .map-placeholder {
        padding: 1.2rem;
    }

    .map-placeholder h4 {
        font-size: 1.1rem;
    }

    .map-placeholder p {
        font-size: 0.85rem;
        margin-bottom: 0.9rem;
    }

    .map-placeholder-icon {
        width: 36px;
        height: 36px;
        margin-bottom: 0.6rem;
    }

    .btn-map-consent {
        width: 100%;
        padding: 0.7rem 1rem;
        font-size: 0.9rem;
    }

    /* Floating Button – unten links sicher positioniert */
    .cookie-fab {
        left: 16px;
        width: 42px;
        height: 42px;
    }

    .cookie-fab svg {
        width: 18px;
        height: 18px;
    }
}

/* ---------- Sehr kleine Handys ---------- */
@media (max-width: 400px) {
    .cookie-banner {
        padding: 18px 16px;
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    }

    .cookie-banner-text p {
        font-size: 0.9rem;
        line-height: 1.55;
    }

    .cookie-banner-actions .cookie-btn {
        padding: 0.7rem 0.9rem;
        font-size: 0.88rem;
    }

    .cookie-modal-content {
        padding: 2rem 1.25rem 1.5rem 1.25rem;
    }

    .cookie-modal-content h2 {
        font-size: 1.35rem;
    }

    .cookie-modal-intro {
        font-size: 0.9rem;
    }

    .cookie-category {
        padding: 0.9rem 0.9rem;
    }

    .cookie-category-head h4 {
        font-size: 0.9rem;
    }

    .cookie-category-head p {
        font-size: 0.82rem;
    }

    .info-map {
        height: 200px;
    }

    .map-placeholder h4 {
        font-size: 1rem;
    }

    .map-placeholder p {
        font-size: 0.8rem;
    }

    .btn-map-consent {
        font-size: 0.85rem;
        padding: 0.65rem 0.9rem;
    }
}

/* ---------- Reduzierte Bewegung respektieren ---------- */
@media (prefers-reduced-motion: reduce) {

    .cookie-banner,
    .cookie-modal,
    .cookie-modal-content,
    .cookie-btn,
    .cookie-fab,
    .cookie-toggle-slider,
    .cookie-toggle-slider::before {
        transition: none !important;
    }
}