/* =================================================================
   CURAPOINT – DESIGN SYSTEM
   Pflegehilfsmittel · Kostenlos · Kassenübernahme
   ================================================================= */

/* =================================================================
   1. CSS VARIABLES
   ================================================================= */
:root {
    /* ── Primärfarbe: Brand-Grün ── */
    --primary:        #1E6F63;
    --primary-dark:   #155549;
    --primary-light:  #E8F3F1;

    /* ── Akzentfarbe: Soft-Grün ── */
    --accent:         #7FB8A6;
    --accent-dark:    #5A9E8C;
    --accent-light:   #EAF4F1;

    /* ── Sekundärfarbe: Mint-Weiß ── */
    --secondary:      #F4F8F7;

    /* ── Neutral / Grau ── */
    --white:        #FFFFFF;
    --off-white:    #F4F8F7;
    --gray-100:     #EEF4F2;
    --gray-200:     #D9E8E4;
    --gray-300:     #B8D0CA;
    --gray-500:     #5E8C82;
    --gray-700:     #2D4F49;
    --gray-900:     #0D2420;

    /* ── Text ── */
    --text-primary:   #0D2420;
    --text-secondary: #3D6059;
    --text-muted:     #7A9E98;

    /* ── Legacy-Aliases (für bestehende CSS-Klassen) ── */
    --red:          #1E6F63;
    --red-dark:     #155549;
    --red-light:    #E8F3F1;
    --green:        #7FB8A6;
    --green-light:  #EAF4F1;

    /* ── Layout ── */
    --font-primary:   'Inter', 'Segoe UI', sans-serif;
    --font-display:   'Inter', 'Segoe UI', sans-serif;
    --container-width: 1240px;
    --header-height:   80px;
    --radius:          8px;
    --radius-lg:       16px;
    --radius-xl:       24px;
    --shadow-sm:  0 1px 4px rgba(30,111,99,0.08);
    --shadow-md:  0 4px 20px rgba(30,111,99,0.12);
    --shadow-lg:  0 12px 48px rgba(30,111,99,0.16);
    --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* =================================================================
   2. RESET & BASE
   ================================================================= */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; overflow-x:hidden; }
body {
    font-family: var(--font-primary);
    color: var(--text-primary);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    padding-top: calc(var(--header-height) + 3rem);
}
img { max-width:100%; height:auto; display:block; }
a { color: var(--red); text-decoration:none; transition: var(--transition); }
a:hover { color: var(--red-dark); }
ul { list-style: none; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight:700; line-height:1.2; color: var(--text-primary); }
h1 { font-size: clamp(2rem,5vw,3.2rem); }
h2 { font-size: clamp(1.6rem,3.5vw,2.4rem); }
h3 { font-size: clamp(1.1rem,2vw,1.4rem); }
p  { line-height:1.8; color: var(--text-secondary); }

/* =================================================================
   3. TOPBAR
   ================================================================= */
.topbar {
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:40px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    z-index:1001;
    display:flex;
    align-items:center;
}
.topbar-content {
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:0 2rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
}
.topbar-news {
    display:flex;
    align-items:center;
    gap:.75rem;
    color:#fff;
    font-size:.85rem;
    animation: topbarSlide 1s ease-out;
}
@keyframes topbarSlide {
    from { opacity:0; transform:translateX(-20px); }
    to { opacity:1; transform:translateX(0); }
}
.topbar-news i {
    color: var(--accent);
    font-size:1rem;
    animation: topbarPulse 2s ease-in-out infinite;
}
@keyframes topbarPulse {
    0%, 100% { transform:scale(1); }
    50% { transform:scale(1.1); }
}
.topbar-news strong { font-weight:700; }
.topbar-contact {
    display:flex;
    align-items:center;
    gap:1.5rem;
}
.topbar-contact a {
    display:flex;
    align-items:center;
    gap:.4rem;
    color:rgba(255,255,255,.85);
    font-size:.82rem;
    font-weight:500;
    transition: var(--transition);
}
.topbar-contact a:hover {
    color:#fff;
    transform:translateY(-1px);
}
.topbar-contact i { font-size:.75rem; }

/* =================================================================
   4. LAYOUT
   ================================================================= */
.container {
    width:100%;
    max-width: var(--container-width);
    margin:0 auto;
    padding:0 2rem;
}
.section        { padding: 5rem 0; }
.section-light  { background: var(--off-white); }
.section-dark   { background: var(--gray-900); }
.section-red    { background: var(--red); }
.section-cta    { background: linear-gradient(135deg, #0D2420 0%, #1E6F63 100%); }

.section-header { text-align:center; margin-bottom:3.5rem; }
.section-header h2 { margin:.5rem 0 1rem; }
.section-header p  { color: var(--text-secondary); max-width:620px; margin:0 auto; font-size:1.05rem; }
.section-header--light h2 { color:#fff; }
.section-header--light p  { color:rgba(255,255,255,.65); }

.section-label {
    display:inline-block;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color: var(--red);
    background: var(--red-light);
    padding:.35rem 1rem;
    border-radius:50px;
    margin-bottom:.75rem;
}
.section-label-light {
    display:inline-block;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#fff;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.2);
    padding:.35rem 1rem;
    border-radius:50px;
    margin-bottom:.75rem;
}

/* =================================================================
   5. BUTTONS
   ================================================================= */
.btn {
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:13px 28px;
    border-radius: var(--radius);
    font-size:.95rem;
    font-weight:600;
    text-decoration:none;
    cursor:pointer;
    border:2px solid transparent;
    transition: var(--transition);
    line-height:1;
    white-space:nowrap;
}
.btn-primary {
    background: var(--red);
    color:#fff;
    border-color: var(--red);
}
.btn-primary:hover {
    background: var(--red-dark);
    border-color: var(--red-dark);
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(230,57,70,.35);
}
.btn-outline {
    background:transparent;
    color: var(--red);
    border-color: var(--red);
}
.btn-outline:hover {
    background: var(--red);
    color:#fff;
    transform:translateY(-2px);
}
.btn-outline-light {
    background:transparent;
    color:#fff;
    border-color:rgba(255,255,255,.5);
}
.btn-outline-light:hover {
    background:rgba(255,255,255,.12);
    color:#fff;
    border-color:#fff;
}
.btn-lg  { padding:16px 36px; font-size:1.05rem; }
.btn-block { width:100%; justify-content:center; }
.btn-green {
    background: var(--green);
    color:#fff;
    border-color: var(--green);
}
.btn-green:hover {
    background:#237a57;
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(45,155,111,.3);
}

/* =================================================================
   6. HEADER & NAV
   ================================================================= */
.header {
    position:fixed;
    top:3rem;
    left:50%;
    transform:translateX(-50%);
    width:calc(100% - 3rem);
    max-width:1240px;
    height: var(--header-height);
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.6);
    border-radius:999px;
    box-shadow:0 4px 24px rgba(30,111,99,.12), 0 1.5px 6px rgba(0,0,0,.06);
    z-index:1000;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.header.scrolled {
    background:rgba(255,255,255,.98);
    box-shadow:0 8px 40px rgba(30,111,99,.16), 0 2px 8px rgba(0,0,0,.08);
    top:2.5rem;
}
.nav {
    display:flex;
    align-items:center;
    justify-content:space-between;
    height: var(--header-height);
    padding:0 1.5rem;
}
.nav-logo { 
    display:flex;
    align-items:center;
    gap:.75rem;
    flex-shrink:0;
}
.nav-logo img { height:100px; width:auto; }

.nav-links {
    display:flex;
    align-items:center;
    gap:.25rem;
}
.nav-links-left {
    justify-content:flex-end;
}
.nav-links-right {
    justify-content:flex-start;
}
.nav-links li a {
    font-size:.9rem;
    font-weight:500;
    color: var(--text-primary);
    padding:.5rem .9rem;
    border-radius: var(--radius);
    transition: var(--transition);
}
.nav-links li a:hover,
.nav-links li a.active {
    color: var(--red);
    background: var(--red-light);
}
.nav-links .has-dropdown { position:relative; }
.nav-links .has-dropdown > a i { font-size:.7rem; margin-left:.3rem; transition: var(--transition); }
.nav-links .has-dropdown:hover > a i { transform:rotate(180deg); }

.dropdown {
    position:absolute;
    top:calc(100% + .5rem);
    left:0;
    min-width:220px;
    background:#fff;
    border:1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition: var(--transition);
    z-index:100;
    overflow:hidden;
}
.has-dropdown:hover .dropdown {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.dropdown li a {
    display:flex;
    align-items:center;
    padding:.8rem 1.2rem;
    font-size:.88rem;
    border-radius:0 !important;
    border-bottom:1px solid var(--gray-100);
}
.dropdown li:last-child a { border-bottom:none; }
.dropdown li a:hover { padding-left:1.6rem; }

.btn-header {
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    background: var(--red);
    color:#fff;
    padding:.6rem 1.4rem;
    border-radius: var(--radius);
    font-size:.88rem;
    font-weight:600;
    transition: var(--transition);
    white-space:nowrap;
}
.btn-header:hover {
    background: var(--red-dark);
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(230,57,70,.3);
}

/* Mobile Nav Toggle */
.nav-toggle {
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    padding:.5rem;
}
.nav-toggle span {
    display:block;
    width:26px;
    height:2px;
    background: var(--text-primary);
    border-radius:2px;
    transition: var(--transition);
}
.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* =================================================================
   6. HERO
   ================================================================= */
.hero {
    position:relative;
    background: 
        linear-gradient(135deg, rgba(13,36,32,.88) 0%, rgba(30,111,99,.70) 100%),
        url('../img/curapointheroo.png') center 30%/cover no-repeat;
    min-height:auto;
    display:flex;
    align-items:center;
    overflow:hidden;
    padding:4rem 0 3rem;
}
.hero::before {
    content:'';
    position:absolute;
    inset:0;
    background: radial-gradient(ellipse at 30% 50%, rgba(127,184,166,.15) 0%, transparent 60%);
    pointer-events:none;
    animation: heroGlow 8s ease-in-out infinite alternate;
}
@keyframes heroGlow {
    0% { opacity: .6; }
    100% { opacity: 1; }
}
.hero-bg {
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(circle at 15% 85%, rgba(127,184,166,.1) 0%, transparent 40%),
        radial-gradient(circle at 85% 15%, rgba(255,255,255,.04) 0%, transparent 40%);
    pointer-events:none;
}
.hero-content {
    position:relative;
    z-index:2;
    max-width:680px;
    animation: heroFadeIn 1s ease-out;
}
@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.hero-badge {
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    background:rgba(30,111,99,.2);
    border:1px solid rgba(127,184,166,.4);
    color:#7FB8A6;
    font-size:.82rem;
    font-weight:600;
    padding:.45rem 1.2rem;
    border-radius:50px;
    margin-bottom:1.75rem;
    letter-spacing:.05em;
}
.hero h1 {
    color:#fff;
    font-size:clamp(1.8rem,4vw,2.8rem);
    line-height:1.2;
    margin-bottom:1rem;
    font-weight:800;
    text-shadow: 0 2px 20px rgba(0,0,0,.3);
}
.hero h1 .highlight { 
    color: var(--accent); 
    position:relative;
    display:inline-block;
}
.hero h1 .highlight::after {
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:12px;
    background: linear-gradient(90deg, transparent, rgba(127,184,166,.3), transparent);
    z-index:-1;
}
.hero-sub {
    color:rgba(255,255,255,.85);
    font-size:1.05rem;
    line-height:1.7;
    margin-bottom:2rem;
    max-width:580px;
    text-shadow: 0 1px 8px rgba(0,0,0,.2);
}
.hero-btns {
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
    margin-bottom:2rem;
}
.hero-btns .btn {
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.hero-btns .btn:hover {
    transform:translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.hero-trust {
    display:flex;
    gap:1rem 1.5rem;
    flex-wrap:wrap;
    padding-top:1.5rem;
    border-top:1px solid rgba(255,255,255,.15);
}
.hero-trust span {
    font-size:.88rem;
    color:rgba(255,255,255,.8);
    font-weight:600;
    display:flex;
    align-items:center;
    gap:.5rem;
    padding:.4rem .8rem;
    background:rgba(255,255,255,.08);
    border-radius:50px;
    backdrop-filter:blur(8px);
}
.hero-trust span i { color: var(--accent); font-size:.85rem; }

/* =================================================================
   7. PARTNER / KOOPERATIONEN
   ================================================================= */
/* =================================================================
   GOOGLE BEWERTUNGEN KARUSSELL
   ================================================================= */
.google-reviews-section {
    background: #f8f9fa;
    padding: 2.5rem 0 2rem;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}
.google-reviews-header {
    text-align: center;
    margin-bottom: 1.5rem;
}
.google-rating-summary {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
}
.google-logo { height: 24px; width: auto; }
.google-stars-total { display: flex; align-items: center; gap: .45rem; }
.google-stars, .review-stars { color: #FBBC04; font-size: .95rem; display: flex; gap: 2px; }
.review-stars { font-size: .8rem; margin-bottom: .4rem; }
.google-score { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.google-count { font-size: .85rem; color: var(--text-muted); }

/* Karussell */
.reviews-carousel-wrapper {
    display: flex;
    align-items: stretch;
    gap: .6rem;
    margin-bottom: .9rem;
}
.reviews-carousel-track-outer {
    flex: 1;
    overflow: hidden;
}
.reviews-carousel-track {
    display: flex;
    gap: 1rem;
    transition: transform .4s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}
.google-review-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
    box-sizing: border-box;
    width: calc((100%) / 3 - 0.68rem);
    min-width: calc((100%) / 3 - 0.68rem);
    max-width: calc((100%) / 3 - 0.68rem);
    flex-shrink: 0;
    transition: box-shadow .2s;
}
.google-review-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.09); }
.review-top {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .45rem;
}
.reviewer-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem;
    color: #fff; flex-shrink: 0;
}
.reviewer-info { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.reviewer-info strong { font-size: .85rem; color: var(--text-primary); }
.reviewer-info span { font-size: .74rem; color: var(--text-muted); }
.review-google-icon { width: 15px; height: 15px; margin-left: auto; flex-shrink: 0; }
.review-text {
    font-size: .82rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pfeile */
.carousel-btn {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 50%;
    width: 38px; height: 38px;
    min-width: 38px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--text-primary);
    font-size: .85rem;
    flex-shrink: 0;
    align-self: center;
    transition: var(--transition);
    box-shadow: 0 2px 5px rgba(0,0,0,.07);
}
.carousel-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Dots */
.carousel-dots { display: flex; justify-content: center; gap: .4rem; margin-bottom: 1.1rem; }
.carousel-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gray-300);
    cursor: pointer;
    transition: var(--transition);
}
.carousel-dot.active { background: var(--primary); transform: scale(1.25); }

/* Footer */
.google-reviews-footer { text-align: center; }
.google-reviews-link {
    display: inline-flex; align-items: center; gap: .45rem;
    color: #4285F4; font-size: .85rem; font-weight: 500;
    text-decoration: none;
    border: 1px solid #dadce0;
    padding: .45rem 1.1rem;
    border-radius: 20px;
    background: #fff;
    transition: var(--transition);
}
.google-reviews-link img { width: 15px; height: 15px; }
.google-reviews-link:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); }

@media (max-width: 900px) {
    .google-review-card {
        width: calc(50% - .5rem);
        min-width: calc(50% - .5rem);
        max-width: calc(50% - .5rem);
    }
}
@media (max-width: 580px) {
    .google-review-card { width: 100%; min-width: 100%; max-width: 100%; }
    .carousel-btn { width: 32px; height: 32px; min-width: 32px; font-size: .78rem; }
}

/* =================================================================
   PARTNER SECTION
   ================================================================= */
.partner-section {
    background: var(--off-white);
    padding:2.5rem 0;
    border-top:1px solid var(--gray-200);
    border-bottom:1px solid var(--gray-200);
}
.partner-header {
    text-align:center;
    margin-bottom:2rem;
}
.partner-label {
    font-size:.8rem;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color: var(--text-muted);
}
.partner-logos {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:2rem;
    align-items:center;
}
.partner-logo {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1rem;
    background:#fff;
    border-radius: var(--radius);
    border:1px solid var(--gray-200);
    transition: var(--transition);
    min-height:80px;
}
.partner-logo:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
    transform:translateY(-2px);
}
.partner-logo img {
    max-width:100%;
    max-height:50px;
    width:auto;
    height:auto;
    filter:grayscale(100%) opacity(0.6);
    transition: var(--transition);
}
.partner-logo:hover img {
    filter:grayscale(0%) opacity(1);
}

/* =================================================================
   8. TRUST BAR / KASSEN LOGOS
   ================================================================= */
.trust-bar {
    background:#fff;
    border-bottom:1px solid var(--gray-200);
    padding:1.25rem 0;
}
.trust-bar-inner {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2rem;
    flex-wrap:wrap;
}
.trust-bar-label {
    font-size:.8rem;
    font-weight:600;
    color: var(--text-muted);
    text-transform:uppercase;
    letter-spacing:.1em;
    white-space:nowrap;
}
.trust-bar-logos {
    display:flex;
    align-items:center;
    gap:2rem;
    flex-wrap:wrap;
}
.trust-logo {
    display:flex;
    align-items:center;
    justify-content:center;
    background: var(--gray-100);
    border:1px solid var(--gray-200);
    padding:.5rem 1rem;
    border-radius:8px;
    transition: var(--transition);
}
.trust-logo img {
    height:28px;
    width:auto;
    max-width:90px;
    object-fit:contain;
    filter: grayscale(100%);
    opacity:0.7;
    transition: var(--transition);
}
.trust-logo:hover { background:#fff; border-color: var(--primary); box-shadow:0 2px 8px rgba(30,111,99,.15); }
.trust-logo:hover img { filter: grayscale(0%); opacity:1; }

/* =================================================================
   9. STATS
   ================================================================= */
.stats-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.5rem;
}
.stat-card {
    background:#fff;
    border-radius: var(--radius-lg);
    padding:2rem 1.5rem;
    text-align:center;
    box-shadow: var(--shadow-sm);
    border:1px solid var(--gray-200);
    transition: var(--transition);
}
.stat-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--red);
    transform:translateY(-4px);
}
.stat-num {
    display:block;
    font-size:2.8rem;
    font-weight:800;
    color: var(--red);
    line-height:1;
    margin-bottom:.5rem;
}
.stat-label {
    font-size:.85rem;
    color: var(--text-muted);
    font-weight:500;
    line-height:1.4;
}

/* =================================================================
   10. STEPS / WIE ES FUNKTIONIERT
   ================================================================= */
.steps-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.5rem;
    position:relative;
}
.steps-grid::before {
    content:'';
    position:absolute;
    top:44px;
    left:12.5%;
    right:12.5%;
    height:2px;
    background: linear-gradient(90deg, var(--red) 0%, var(--red-light) 100%);
    z-index:0;
}
.step-card {
    background:#fff;
    border-radius: var(--radius-lg);
    padding:2rem 1.5rem;
    text-align:center;
    box-shadow: var(--shadow-sm);
    border:1px solid var(--gray-200);
    position:relative;
    z-index:1;
    transition: var(--transition);
}
.step-card:hover {
    box-shadow: var(--shadow-md);
    transform:translateY(-5px);
    border-color: var(--red);
}
.step-num {
    position:absolute;
    top:-16px;
    left:50%;
    transform:translateX(-50%);
    width:32px;
    height:32px;
    background: var(--red);
    color:#fff;
    font-weight:800;
    font-size:.85rem;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 12px rgba(230,57,70,.35);
}
.step-icon {
    width:64px;
    height:64px;
    background: var(--red-light);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 1.25rem;
    font-size:1.5rem;
    color: var(--red);
    transition: var(--transition);
}
.step-card:hover .step-icon {
    background: var(--red);
    color:#fff;
}
.step-card h3 { margin-bottom:.6rem; font-size:1.1rem; }
.step-card p  { font-size:.9rem; color: var(--text-secondary); }

/* =================================================================
   11. ÜBER UNS PREVIEW
   ================================================================= */
.about-preview {
    background: var(--secondary);
}
.about-preview-grid {
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:4rem;
    align-items:center;
}
.about-preview-content h2 {
    margin-bottom:1.5rem;
    max-width:480px;
}
.about-preview-content p {
    margin-bottom:1.25rem;
    color: var(--text-secondary);
}
.about-preview-content .btn {
    margin-top:1rem;
}
.about-preview-visual {
    position:relative;
}
.about-preview-img {
    width:100%;
    height:auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom:1.5rem;
}
.about-preview-cards {
    display:flex;
    flex-direction:column;
    gap:1rem;
}
.about-preview-card {
    background:#fff;
    border-radius: var(--radius-lg);
    padding:1.5rem;
    border:1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.about-preview-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform:translateX(8px);
}
.about-preview-card i {
    font-size:1.5rem;
    color: var(--primary);
    margin-bottom:.75rem;
    display:block;
}
.about-preview-card h3 {
    font-size:1rem;
    margin-bottom:.5rem;
}
.about-preview-card p {
    font-size:.88rem;
    color: var(--text-secondary);
    margin:0;
}

/* =================================================================
   12. PRODUKTE / PRODUCT CARDS
   ================================================================= */
.products-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.25rem;
}
.product-card {
    display:flex;
    flex-direction:column;
    background:#fff;
    border-radius: var(--radius-lg);
    padding:1.75rem 1.5rem;
    border:1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    text-decoration:none;
    color: var(--text-primary);
    cursor:pointer;
}
.product-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform:translateY(-5px);
    color: var(--text-primary);
}
.product-icon {
    width:56px;
    height:56px;
    background: var(--primary-light);
    border-radius: var(--radius);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.4rem;
    color: var(--primary);
    margin-bottom:1.25rem;
    transition: var(--transition);
}
.product-card:hover .product-icon {
    background: var(--primary);
    color:#fff;
}
.product-image {
    width:100%;
    height:180px;
    border-radius: var(--radius);
    overflow:hidden;
    margin-bottom:1.25rem;
    background: var(--gray-100);
}
.product-image img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition: var(--transition);
}
.product-card:hover .product-image img {
    transform:scale(1.05);
}
.product-card h3 { font-size:1rem; margin-bottom:.5rem; }
.product-card p  { font-size:.88rem; color: var(--text-secondary); flex:1; margin-bottom:1rem; }
.product-link {
    font-size:.83rem;
    font-weight:600;
    color: var(--primary);
    display:flex;
    align-items:center;
    gap:.4rem;
    margin-top:auto;
}

/* =================================================================
   11. BENEFITS
   ================================================================= */
.benefits-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
}
.benefit-card {
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-lg);
    padding:2rem;
    transition: var(--transition);
}
.benefit-card:hover {
    background:rgba(230,57,70,.1);
    border-color:rgba(230,57,70,.3);
    transform:translateY(-4px);
}
.benefit-card > i {
    font-size:2rem;
    color: var(--red);
    margin-bottom:1rem;
    display:block;
}
.benefit-card h3 { color:#fff; margin-bottom:.5rem; font-size:1.1rem; }
.benefit-card p  { color:rgba(255,255,255,.55); font-size:.9rem; }

/* =================================================================
   12. QUALITÄT SEKTION (split)
   ================================================================= */
.quality-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5rem;
    align-items:center;
}
.quality-visual {
    position:relative;
}
.quality-visual-card {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius-xl);
    padding:3rem;
    color:#fff;
    text-align:center;
    position:relative;
    overflow:hidden;
}
.quality-visual-card::before {
    content:'';
    position:absolute;
    top:-40px; right:-40px;
    width:160px; height:160px;
    background:rgba(255,255,255,.06);
    border-radius:50%;
}
.quality-visual-card .big-num {
    font-size:5rem;
    font-weight:800;
    line-height:1;
    margin-bottom:.5rem;
}
.quality-visual-card p { color:rgba(255,255,255,.8); }
.quality-badge {
    position:absolute;
    bottom:-16px;
    right:2rem;
    background:#fff;
    border-radius: var(--radius-lg);
    padding:.9rem 1.5rem;
    box-shadow: var(--shadow-lg);
    display:flex;
    align-items:center;
    gap:.75rem;
}
.quality-badge i { color: var(--green); font-size:1.4rem; }
.quality-badge strong { display:block; font-size:.9rem; color: var(--text-primary); }
.quality-badge span { font-size:.78rem; color: var(--text-muted); }

.quality-content h2 { margin-bottom:1.25rem; }
.quality-content p  { margin-bottom:1rem; }
.quality-list { margin:1.5rem 0 2rem; display:flex; flex-direction:column; gap:.75rem; }
.quality-list li {
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    font-size:.95rem;
    color: var(--text-secondary);
}
.quality-list li i { color: var(--green); margin-top:.15rem; flex-shrink:0; }

/* =================================================================
   13. CHECK LIST (allgemein)
   ================================================================= */
.check-list {
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:.65rem;
}
.check-list li {
    display:flex;
    align-items:flex-start;
    gap:.65rem;
    font-size:.93rem;
    color: var(--text-secondary);
}
.check-list li::before {
    content:'\f058';
    font-family:'Font Awesome 6 Free';
    font-weight:900;
    color: var(--green);
    flex-shrink:0;
    margin-top:.05rem;
}

/* =================================================================
   14. CTA BOX
   ================================================================= */
.cta-box {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius-xl);
    padding:3.5rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
    flex-wrap:wrap;
    position:relative;
    overflow:hidden;
}
.cta-box::before {
    content:'';
    position:absolute;
    top:-60px; right:-60px;
    width:200px; height:200px;
    background:rgba(255,255,255,.06);
    border-radius:50%;
}
.cta-box::after {
    content:'';
    position:absolute;
    bottom:-40px; left:20%;
    width:140px; height:140px;
    background:rgba(255,255,255,.04);
    border-radius:50%;
}
.cta-text { position:relative; z-index:1; }
.cta-text h2 { color:#fff; margin-bottom:.5rem; }
.cta-text p  { color:rgba(255,255,255,.75); margin:0; }
.cta-actions { display:flex; gap:1rem; flex-wrap:wrap; position:relative; z-index:1; }

/* =================================================================
   15. FAQ
   ================================================================= */

/* FAQ Kategorien Grid */
.faq-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.faq-category-card {
    background: linear-gradient(135deg, rgba(30, 111, 99, 0.05) 0%, rgba(127, 184, 166, 0.05) 100%);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.faq-category-card:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(30, 111, 99, 0.1);
}

.category-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.25rem;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.faq-category-card:hover .category-icon {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(30, 111, 99, 0.3);
}

.category-icon i {
    font-size: 1.75rem;
    color: white;
}

.faq-category-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.faq-category-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* FAQ Sections */
.faq-section {
    margin-bottom: 2.5rem;
}

.faq-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--primary);
}

.faq-section-header i {
    font-size: 1.5rem;
    color: var(--primary);
}

.faq-section-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

/* FAQ Items */
.faq-list { 
    display: flex; 
    flex-direction: column; 
    gap: 0.75rem; 
}

.faq-grid { 
    display: flex; 
    flex-direction: column; 
    gap: 0.75rem; 
    max-width: 900px; 
    margin: 0 auto; 
}

.faq-item {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
    background: #fff;
}

.faq-item:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(30, 111, 99, 0.08);
}

.faq-item.open,
.faq-item.active { 
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(30, 111, 99, 0.12);
}

.faq-q,
.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: var(--transition);
}

.faq-question h3 {
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.faq-q:hover,
.faq-question:hover { 
    color: var(--primary); 
}

.faq-question:hover h3 { 
    color: var(--primary); 
}

.faq-q i,
.faq-question i { 
    flex-shrink: 0; 
    color: var(--primary); 
    transition: var(--transition); 
    font-size: 0.85rem; 
}

.faq-item.open .faq-q i,
.faq-item.active .faq-question i { 
    transform: rotate(180deg); 
}

.faq-a,
.faq-answer {
    display: none;
    padding: 0 1.5rem 1.25rem;
    border-top: 1px solid var(--gray-200);
}

.faq-item.open .faq-a,
.faq-item.active .faq-answer { 
    display: block; 
}

.faq-a p,
.faq-answer p { 
    margin-top: 0; 
    font-size: 0.93rem; 
    margin-bottom: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
.faq-answer p:last-child { margin-bottom:0; }
.faq-answer ul {
    margin:1rem 0;
    padding-left:1.5rem;
    list-style:disc;
}
.faq-answer ul li {
    font-size:.93rem;
    color: var(--text-secondary);
    margin-bottom:.5rem;
    line-height:1.6;
}

/* =================================================================
   16. KONTAKT / FORMULAR
   ================================================================= */
.kontakt-grid {
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:4rem;
    align-items:start;
}
.kontakt-form-wrap h2 { margin-bottom:1.75rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { margin-bottom:1.25rem; }
.form-group label { display:block; font-size:.85rem; font-weight:600; color: var(--text-primary); margin-bottom:.45rem; }
.form-group input,
.form-group textarea,
.form-group select {
    width:100%;
    padding:.8rem 1rem;
    border:1.5px solid var(--gray-200);
    border-radius: var(--radius);
    font-family: var(--font-primary);
    font-size:.93rem;
    color: var(--text-primary);
    background:#fff;
    transition: var(--transition);
    outline:none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--red);
    box-shadow:0 0 0 3px rgba(230,57,70,.1);
}
.form-group textarea { resize:vertical; }
.form-check { margin-bottom:1.5rem; }
.form-check label { display:flex; align-items:flex-start; gap:.6rem; font-size:.85rem; color: var(--text-secondary); cursor:pointer; }
.form-check input { width:auto; margin-top:.1rem; accent-color: var(--red); }
.form-check a { color: var(--red); text-decoration:underline; }

.kontakt-info { display:flex; flex-direction:column; gap:1.5rem; }

.kontakt-cta-box {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    color: #fff;
    box-shadow: 0 8px 24px rgba(30, 111, 99, 0.2);
    margin-bottom: 1rem;
}

.kontakt-cta-icon {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.kontakt-cta-icon i {
    font-size: 2rem;
    color: #fff;
}

.kontakt-cta-box h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #fff;
}

.kontakt-cta-box p {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    opacity: 0.95;
    line-height: 1.6;
}

.kontakt-cta-box .btn {
    background: #fff;
    color: var(--primary);
    border: none;
}

.kontakt-cta-box .btn:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.kontakt-card {
    display:flex;
    align-items:flex-start;
    gap:1rem;
    background: var(--off-white);
    border-radius: var(--radius-lg);
    padding:1.5rem;
    border:1px solid var(--gray-200);
}
.kontakt-card > i { font-size:1.5rem; color: var(--red); flex-shrink:0; margin-top:.1rem; }
.kontakt-card div strong { display:block; font-size:.85rem; color: var(--text-muted); margin-bottom:.25rem; text-transform:uppercase; letter-spacing:.05em; }
.kontakt-card div a,
.kontakt-card div span { font-size:1rem; font-weight:600; color: var(--text-primary); }
.kontakt-card div a:hover { color: var(--red); }
.kontakt-benefits { background: var(--red-light); border-radius: var(--radius-lg); padding:1.5rem; border:1px solid rgba(230,57,70,.2); }
.kontakt-benefits h3 { color: var(--red); margin-bottom:1rem; font-size:1.05rem; }

/* =================================================================
   17. DETAIL PAGE (Pflegebox Unterseiten)
   ================================================================= */
.detail-grid {
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:4rem;
    align-items:start;
}
.product-detail-image {
    width:100%;
    max-width:500px;
    height:350px;
    border-radius: var(--radius-lg);
    overflow:hidden;
    margin-bottom:2rem;
    box-shadow: var(--shadow-md);
}
.product-detail-image img {
    width:100%;
    height:100%;
    object-fit:cover;
}
.detail-content h2 { margin-bottom:1.25rem; }
.detail-content p  { margin-bottom:1rem; }
.detail-content .check-list { margin:1.5rem 0 2rem; }

.detail-sidebar { display:flex; flex-direction:column; gap:1.25rem; }
.sidebar-card {
    background:#fff;
    border-radius: var(--radius-lg);
    padding:1.5rem;
    border:1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
}
.sidebar-card h3 { font-size:.95rem; margin-bottom:.5rem; display:flex; align-items:center; gap:.5rem; }
.sidebar-card h3 i { color: var(--primary); }
.sidebar-card p, .sidebar-card a { font-size:.9rem; color: var(--text-secondary); }
.sidebar-card a { color: var(--red); font-weight:600; }

/* =================================================================
   18. PAGE HERO (Unterseiten)
   ================================================================= */
.page-hero {
    background: linear-gradient(135deg, #0D2420 0%, #1E6F63 100%);
    padding:4rem 0;
    text-align:center;
    position:relative;
    overflow:hidden;
}
.page-hero::before {
    content:'';
    position:absolute;
    inset:0;
    background: radial-gradient(ellipse at center, rgba(30,111,99,.3) 0%, transparent 70%);
    pointer-events:none;
}
.page-hero .container { position:relative; z-index:1; }
.page-hero h1 { color:#fff; margin:.5rem 0 1rem; }
.page-hero p  { color:rgba(255,255,255,.65); font-size:1.05rem; max-width:580px; margin:0 auto; }
.page-hero .section-label { margin-bottom:.75rem; }

/* =================================================================
   19. LEISTUNGEN GRID
   ================================================================= */
.leistungen-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
}
.leistung-card {
    background:#fff;
    border-radius: var(--radius-lg);
    padding:2rem;
    border:1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.leistung-card:hover {
    border-color: var(--red);
    box-shadow: var(--shadow-md);
    transform:translateY(-4px);
}
.leistung-icon {
    width:60px; height:60px;
    background: var(--red-light);
    border-radius: var(--radius);
    display:flex; align-items:center; justify-content:center;
    font-size:1.5rem; color: var(--red);
    margin-bottom:1.25rem;
    transition: var(--transition);
}
.leistung-card:hover .leistung-icon { background: var(--red); color:#fff; }
.leistung-card h3 { margin-bottom:.6rem; }
.leistung-card p  { font-size:.93rem; }

/* =================================================================
   20. ABOUT GRID
   ================================================================= */
.about-grid {
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:5rem;
    align-items:center;
}
.about-content h2 { margin-bottom:1.25rem; }
.about-content p  { margin-bottom:1rem; }
.about-values { display:flex; flex-direction:column; gap:1.25rem; margin:2rem 0; }
.value-item { display:flex; align-items:flex-start; gap:1rem; }
.value-item > i { font-size:1.5rem; color: var(--red); flex-shrink:0; margin-top:.1rem; }
.value-item strong { display:block; margin-bottom:.25rem; }
.value-item p { font-size:.9rem; margin:0; }

.about-stats {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
}

/* =================================================================
   21. LEGAL (Impressum, Datenschutz, AGB)
   ================================================================= */
.legal-content h2 { font-size:1.4rem; margin:2rem 0 .75rem; color: var(--text-primary); }
.legal-content h2:first-child { margin-top:0; }
.legal-content p  { margin-bottom:1rem; }
.legal-content a  { color: var(--red); text-decoration:underline; }

/* =================================================================
   22. FOOTER
   ================================================================= */
.footer {
    background: var(--gray-900);
    color: rgba(255,255,255,.65);
    padding:4rem 0 0;
}
.footer-grid {
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:3rem;
    padding-bottom:3rem;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-logo {
    display:flex;
    align-items:center;
    gap:.75rem;
    margin-bottom:1.25rem;
}
.footer-logo img { height:100px; width:auto; filter:brightness(0) invert(1); }
.footer-logo-text { display:flex; flex-direction:column; line-height:1.2; }
.footer-logo-name { font-size:1.1rem; font-weight:700; color:#fff; }
.footer-logo-sub  { font-size:.7rem; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.1em; }
.footer-desc { font-size:.88rem; line-height:1.8; margin-bottom:1.25rem; }
.footer-contact-list { display:flex; flex-direction:column; gap:.6rem; }
.footer-contact-list li { display:flex; align-items:center; gap:.6rem; font-size:.88rem; }
.footer-contact-list i { color: var(--red); width:16px; }
.footer-contact-list a { color:rgba(255,255,255,.65); }
.footer-contact-list a:hover { color:#fff; }

.footer-col h4 { color:#fff; font-size:.95rem; margin-bottom:1.25rem; }
.footer-links { display:flex; flex-direction:column; gap:.5rem; }
.footer-links li a {
    font-size:.88rem;
    color:rgba(255,255,255,.55);
    display:flex; align-items:center; gap:.5rem;
    transition: var(--transition);
}
.footer-links li a:hover { color:#fff; padding-left:.4rem; }
.footer-links li a i { font-size:.7rem; }
.footer-links li { display:flex; align-items:center; gap:.5rem; font-size:.88rem; color:rgba(255,255,255,.55); }

.footer-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:1rem;
    padding:1.5rem 0;
    font-size:.82rem;
    color:rgba(255,255,255,.35);
}
.footer-bottom-links { display:flex; gap:1.5rem; }
.footer-bottom-links a { color:rgba(255,255,255,.35); transition: var(--transition); }
.footer-bottom-links a:hover { color:#fff; }
.footer-social {
    display:flex;
    align-items:center;
    gap:.75rem;
    margin-top:.75rem;
}
.footer-social-link {
    display:flex;
    align-items:center;
    gap:.45rem;
    color:rgba(255,255,255,.6);
    text-decoration:none;
    font-size:.9rem;
    transition: var(--transition);
    background:rgba(255,255,255,.08);
    padding:.4rem .9rem;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.12);
}
.footer-social-link i {
    font-size:1.1rem;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.footer-social-link:hover {
    color:#fff;
    background:rgba(255,255,255,.15);
    border-color:rgba(255,255,255,.25);
    transform:translateY(-1px);
}
.footer-versand {
    display:flex;
    align-items:center;
    gap:.6rem;
    margin-top:.75rem;
    font-size:.82rem;
    color:rgba(255,255,255,.5);
}
.footer-dhl-logo {
    height:40px;
    width:auto;
    object-fit:contain;
    background:#fff;
    padding:4px 10px;
    border-radius:5px;
    opacity:1;
}

/* =================================================================
   23. SCROLL-TO-TOP
   ================================================================= */
.scroll-top {
    position:fixed;
    bottom:2rem; right:2rem;
    width:48px; height:48px;
    background: var(--red);
    color:#fff;
    border:none;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:1rem;
    cursor:pointer;
    opacity:0; pointer-events:none;
    transition: var(--transition);
    box-shadow:0 6px 20px rgba(230,57,70,.35);
    z-index:999;
}
.scroll-top.visible { opacity:1; pointer-events:all; }
.scroll-top:hover { background: var(--red-dark); transform:translateY(-3px); }

/* =================================================================
   24. RESPONSIVE
   ================================================================= */
@media (max-width:1024px) {
    .stats-grid    { grid-template-columns:repeat(2,1fr); }
    .steps-grid    { grid-template-columns:repeat(2,1fr); }
    .steps-grid::before { display:none; }
    .products-grid { grid-template-columns:repeat(2,1fr); }
    .benefits-grid { grid-template-columns:repeat(2,1fr); }
    .quality-grid  { grid-template-columns:1fr; gap:3rem; }
    .about-grid    { grid-template-columns:1fr; gap:3rem; }
    .about-preview-grid { grid-template-columns:1fr; gap:3rem; }
    .footer-grid   { grid-template-columns:1fr 1fr; }
    .kontakt-grid  { grid-template-columns:1fr; }
    .detail-grid   { grid-template-columns:1fr; }
    .partner-logos { grid-template-columns:repeat(3,1fr); gap:1.5rem; }
}

@media (max-width:768px) {
    /* --- Body & Layout --- */
    body { padding-top: calc(var(--header-height) + 2.5rem); }
    .section { padding:2.5rem 0; }
    .container { padding:0 1rem; }
    .section-header { margin-bottom:2rem; }
    .section-header p { font-size:.93rem; }

    /* --- Topbar: nur Telefon, kein Text --- */
    .topbar { height: 36px; }
    .topbar-content { padding:0 1rem; gap:.5rem; }
    .topbar-news { display:none; }
    .topbar-contact { gap:.75rem; }
    .topbar-contact a { font-size:.78rem; }
    .topbar-contact .topbar-email { display:none; }

    /* --- Header --- */
    .header {
        width: calc(100% - 1.5rem);
        border-radius: 50px;
        top: 2.8rem;
        height: 62px;
    }
    .header.scrolled { top: 2.4rem; }
    .nav { padding: 0 1rem; height: 62px; }

    /* Desktop Nav-Elemente ausblenden */
    .nav-links, .btn-header { display:none; }
    .nav-toggle { display:flex; }

    /* Logo auf Mobile kleiner */
    .nav-logo img { height: 70px; }

    /* --- Hero --- */
    .hero { padding: 2.5rem 0 2rem; }
    .hero h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
    .hero-sub { font-size: .93rem; margin-bottom: 1.5rem; }
    .hero-btns { flex-direction: column; gap: .75rem; }
    .hero-btns .btn { width: 100%; justify-content: center; text-align:center; }
    .hero-trust { gap: .6rem; }
    .hero-trust span { font-size: .78rem; padding: .3rem .65rem; }
    .hero-badge { font-size: .75rem; margin-bottom: 1.25rem; }

    /* --- Stats --- */
    .stats-grid { grid-template-columns:repeat(2,1fr); gap:.75rem; }
    .stat-card { padding: 1.25rem 1rem; }
    .stat-num { font-size: 2.2rem; }

    /* --- Steps --- */
    .steps-grid { grid-template-columns:1fr; gap: 1.25rem; }
    .step-card { padding: 1.5rem 1.25rem; }

    /* --- Produkte --- */
    .products-grid { grid-template-columns:repeat(2,1fr); gap:1rem; }
    .product-image { height: 140px; }

    /* --- Benefits --- */
    .benefits-grid { grid-template-columns:1fr; gap:1rem; }
    .benefit-card { padding: 1.5rem; }

    /* --- Partner --- */
    .partner-logos { grid-template-columns:repeat(2,1fr); gap:.75rem; }
    .partner-logo { min-height: 60px; padding: .75rem; }

    /* --- Trust Bar --- */
    .trust-bar { padding: 1rem 0; }
    .trust-bar-inner { gap: .6rem; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding: 0 1rem; scrollbar-width: none; }
    .trust-bar-inner::-webkit-scrollbar { display:none; }
    .trust-bar-label { display: none; }
    .trust-logo { padding: .4rem .6rem; flex-shrink: 0; }
    .trust-logo img { height: 22px; max-width: 70px; }

    /* --- Leistungen --- */
    .leistungen-grid { grid-template-columns:1fr; gap:1rem; }

    /* --- About --- */
    .about-stats { grid-template-columns:1fr 1fr; gap:.75rem; }

    /* --- CTA Box --- */
    .cta-box { flex-direction:column; padding:2rem 1.5rem; text-align:center; }
    .cta-actions { width:100%; flex-direction:column; }
    .cta-actions .btn { width:100%; justify-content:center; }

    /* --- Qualität --- */
    .quality-grid { grid-template-columns:1fr; gap:2rem; }
    .quality-visual-card { padding: 2rem 1.5rem; }
    .quality-visual-card .big-num { font-size: 3.5rem; }
    .quality-badge { position:static; margin-top:1.5rem; border-radius:var(--radius-lg); }

    /* --- Kontakt --- */
    .kontakt-grid { grid-template-columns:1fr; gap:2rem; }
    .form-row { grid-template-columns:1fr; }

    /* --- Hausnotruf --- */
    .hausnotruf-teaser-grid,
    .hausnotruf-intro-grid,
    .zielgruppe-grid { grid-template-columns:1fr; gap:2rem; }
    .hausnotruf-teaser-visual,
    .zielgruppe-visual { order: -1; }
    .steps-grid--3 { grid-template-columns:1fr; }
    .hausnotruf-booster-inner { gap:1rem; flex-direction:column; align-items:center; }
    .hausnotruf-visual-card { max-width:100%; }

    /* --- FAQ --- */
    .faq-categories { grid-template-columns:repeat(2,1fr); gap:1rem; }
    .faq-category-card { padding:1.25rem 1rem; }
    .category-icon { width:52px; height:52px; }
    .category-icon i { font-size:1.4rem; }
    .faq-q, .faq-question { padding:1rem 1.25rem; font-size:.93rem; }
    .faq-a, .faq-answer { padding:0 1.25rem 1rem; }

    /* --- Footer --- */
    .footer { padding:2.5rem 0 0; }
    .footer-grid { grid-template-columns:1fr; gap:1.75rem; padding-bottom:2rem; }
    .footer-logo img { height: 70px; }
    .footer-bottom { flex-direction:column; align-items:flex-start; gap:.6rem; }
    .footer-bottom-links { flex-wrap:wrap; gap:.75rem; }

    /* --- Scroll Top --- */
    .scroll-top { bottom:1.25rem; right:1.25rem; width:42px; height:42px; font-size:.9rem; }

    /* --- Parallax CTA --- */
    .parallax-cta { height:380px; }
    .parallax-cta-headline { font-size:1.7rem; }
    .parallax-cta-actions { flex-direction:column; width:100%; max-width:300px; }
    .parallax-cta-text { font-size:.9rem; }
}

@media (max-width:480px) {
    body { padding-top: calc(60px + 2.2rem); }
    .topbar { height:32px; }
    .header { top: 2.4rem; height:58px; }
    .nav { height:58px; }
    .nav-logo img { height:58px; }

    /* Stats 2 Spalten behalten, aber Zahlen kleiner */
    .stats-grid { grid-template-columns:1fr 1fr; }
    .stat-num { font-size:1.8rem; }
    .stat-card { padding:1rem .85rem; }

    /* Produkte 1 Spalte */
    .products-grid { grid-template-columns:1fr; }
    .product-image { height:160px; }

    /* About Stats 1 Spalte */
    .about-stats { grid-template-columns:1fr; }

    /* FAQ 1 Spalte */
    .faq-categories { grid-template-columns:1fr; }

    /* Partner 2 Spalten */
    .partner-logos { grid-template-columns:repeat(2,1fr); }

    /* Hero */
    .hero h1 { font-size:1.55rem; }
    .hero-trust { display:none; }

    /* Section Abstände */
    .section { padding:2rem 0; }
    .section-header h2 { font-size:1.5rem; }

    /* CTA Box */
    .cta-box { padding:1.5rem 1rem; }

    /* Footer */
    .footer-bottom-links { gap:.5rem 1rem; }

    /* Trust Bar – horizontal scroll */
    .trust-bar-logos { gap:.5rem; }
    .trust-logo img { height:18px; max-width:58px; }
}

/* =================================================================
   MOBILE NAV DRAWER
   ================================================================= */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1098;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .3s ease;
}
.mobile-nav-overlay.open {
    display: block;
    opacity: 1;
}

.mobile-nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: #fff;
    z-index: 1099;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    box-shadow: -8px 0 40px rgba(0,0,0,.15);
    overflow-y: auto;
}
.mobile-nav-drawer.open {
    transform: translateX(0);
}

/* Drawer Header */
.mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--primary-light);
    flex-shrink: 0;
}
.mobile-nav-logo img {
    height: 55px;
    width: auto;
}
.mobile-nav-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 1.2rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition);
}
.mobile-nav-close:hover {
    background: var(--gray-200);
    color: var(--primary);
}

/* Drawer Body */
.mobile-nav-body {
    flex: 1;
    padding: 1rem 0;
    overflow-y: auto;
}
.mobile-nav-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 0 .75rem;
}
.mobile-nav-links li a,
.mobile-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border-radius: var(--radius);
    font-size: .95rem;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-primary);
    text-align: left;
}
.mobile-nav-links li a:hover,
.mobile-dropdown-toggle:hover {
    background: var(--primary-light);
    color: var(--primary);
}
.mobile-nav-links li a.active {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
}
.mobile-nav-links li a i,
.mobile-dropdown-toggle i:first-child {
    width: 20px;
    text-align: center;
    color: var(--primary);
    font-size: .9rem;
    flex-shrink: 0;
}
.mobile-chevron {
    margin-left: auto !important;
    width: auto !important;
    font-size: .75rem !important;
    transition: transform .25s ease;
}
.mobile-has-dropdown.open .mobile-chevron {
    transform: rotate(180deg);
}
.mobile-dropdown {
    list-style: none;
    display: none;
    padding: .25rem .5rem .25rem 2.5rem;
    flex-direction: column;
    gap: .1rem;
}
.mobile-has-dropdown.open .mobile-dropdown {
    display: flex;
}
.mobile-dropdown li a {
    font-size: .88rem;
    padding: .65rem .9rem;
    color: var(--text-secondary);
}
.mobile-dropdown li a i {
    font-size: .7rem !important;
}
.mobile-dropdown li a:hover {
    color: var(--primary);
    background: var(--primary-light);
}

/* Drawer Footer */
.mobile-nav-footer {
    padding: 1.25rem;
    border-top: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    gap: .85rem;
    flex-shrink: 0;
    background: var(--off-white);
}
.mobile-nav-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: var(--primary);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    padding: .65rem;
    border-radius: var(--radius);
    border: 1.5px solid var(--primary);
    transition: var(--transition);
}
.mobile-nav-phone:hover {
    background: var(--primary);
    color: #fff;
}
.mobile-nav-phone i { font-size: .9rem; }

/* Burger Animation */
.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* =================================================================
   PARALLAX CTA SECTION
   ================================================================= */
/* ==========================================
   CTA SECTION – Parallax
========================================== */
.parallax-cta {
    position: relative;
    height: 480px;
    overflow: hidden;
}

/* Parallax Bild – höher als Section damit Verschiebung sichtbar */
.parallax-cta-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150%;
    background-image: url('../img/curapointcta.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
}

/* Dunkler Overlay */
.parallax-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(13,36,32,0.72) 0%, rgba(30,111,99,0.58) 100%);
    z-index: 2;
}

/* Content zentriert */
.parallax-cta-content {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1rem;
    color: white;
}

/* Label */
.parallax-cta-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    margin-bottom: 1.5rem;
}

/* Headline */
.parallax-cta-headline {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: white;
    margin-bottom: 1.25rem;
    max-width: 800px;
}

/* Text */
.parallax-cta-text {
    font-size: 1.05rem;
    line-height: 1.9;
    color: rgba(255,255,255,0.88);
    font-weight: 300;
    margin-bottom: 2.5rem;
}

/* Buttons */
.parallax-cta-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

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

.btn--white:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
}

.btn--outline-white {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.btn--outline-white:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.8);
}

.btn-glow-pulse {
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
    }
}

/* Split Reveal Animation */
.section-split-reveal {
    overflow: hidden;
    position: relative;
}

.section-split-reveal::before,
.section-split-reveal::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background: var(--primary);
    z-index: 100;
    transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
}

.section-split-reveal::before {
    left: 0;
    transform: translateX(0);
}

.section-split-reveal::after {
    right: 0;
    transform: translateX(0);
}

.section-split-reveal.revealed::before {
    transform: translateX(-100%);
}

.section-split-reveal.revealed::after {
    transform: translateX(100%);
}

@media (max-width: 768px) {
    .parallax-cta {
        height: 400px;
    }
    
    .parallax-cta-headline {
        font-size: 2rem;
    }
    
    .parallax-cta-actions {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
    }
}

/* =================================================================
   HAUSNOTRUF – TEASER (Startseite) & VOLLSEITE
   ================================================================= */

/* Startseite Teaser */
.hausnotruf-teaser {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--white) 100%);
}

.hausnotruf-teaser-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hausnotruf-teaser-content h2 {
    margin-bottom: 1rem;
}

.hausnotruf-teaser-content p {
    margin-bottom: 1.5rem;
}

.hausnotruf-benefits-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 2rem;
}

.hausnotruf-benefits-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 500;
}

.hausnotruf-benefits-list li i {
    color: var(--primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.hausnotruf-teaser-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Visual Card Teaser */
.hausnotruf-teaser-visual {
    display: flex;
    justify-content: center;
}

.hausnotruf-visual-card {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 2.5rem 2rem;
    box-shadow: var(--shadow-lg);
    text-align: center;
    width: 100%;
    max-width: 320px;
    border: 2px solid var(--primary-light);
}

.hausnotruf-icon-big {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 2rem;
    color: #fff;
    box-shadow: 0 8px 24px rgba(30,111,99,0.25);
}

.hausnotruf-visual-card h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.hausnotruf-visual-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.hausnotruf-badges {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.hausnotruf-badges span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-light);
    padding: 0.4rem 0.8rem;
    border-radius: 99px;
    justify-content: center;
}

/* Hero Hausnotruf */
.hausnotruf-hero .hero-bg {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, var(--accent-dark) 100%);
}

/* Intro Grid (Seite) */
.hausnotruf-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 4rem;
    align-items: center;
}

.hausnotruf-device-card {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 2.5rem 2rem;
    box-shadow: var(--shadow-lg);
    text-align: center;
    border: 2px solid var(--primary-light);
}

.hausnotruf-device-icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2.2rem;
    color: #fff;
    box-shadow: 0 8px 24px rgba(30,111,99,0.25);
    animation: bellPulse 2s ease-in-out infinite;
}

@keyframes bellPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 8px 24px rgba(30,111,99,0.25); }
    50%       { transform: scale(1.06); box-shadow: 0 12px 32px rgba(30,111,99,0.4); }
}

.hausnotruf-device-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.hausnotruf-device-badges {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.hausnotruf-device-badges span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-light);
    padding: 0.4rem 0.8rem;
    border-radius: 99px;
}

.hausnotruf-device-price {
    border-top: 1px solid var(--gray-200);
    padding-top: 1.25rem;
}

.price-big {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.price-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Zielgruppe Grid */
.zielgruppe-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 4rem;
    align-items: center;
}

.zielgruppe-stat-card {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 2.5rem 2rem;
    box-shadow: var(--shadow-lg);
    text-align: center;
    border: 2px solid var(--primary-light);
}

/* Conversion Booster */
.hausnotruf-booster {
    background: var(--primary-light);
    padding: 1rem 0;
    border-top: 1px solid var(--gray-200);
}

.hausnotruf-booster-inner {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.hausnotruf-booster-inner span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
}

.hausnotruf-booster-inner span i {
    color: var(--primary);
}

/* Steps 3er Grid */
.steps-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Responsive Hausnotruf */
@media (max-width: 900px) {
    .hausnotruf-teaser-grid,
    .hausnotruf-intro-grid,
    .zielgruppe-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hausnotruf-teaser-visual,
    .zielgruppe-visual {
        order: -1;
    }

    .steps-grid--3 {
        grid-template-columns: 1fr;
    }

    .hausnotruf-booster-inner {
        gap: 1rem;
        flex-direction: column;
        align-items: center;
    }
}