/*
Theme Name:     CardioCare Child
Theme URI:      https://cardiocare-wiltz.lu
Description:    Child-Theme für CardioCare Wiltz – Kardiologie-Praxis Dr. Hassan Alhallak. Basiert auf Astra, Mobile-First, Brand-CI nach Brand-Guidelines.
Author:         CardioCare Wiltz
Author URI:     https://cardiocare-wiltz.lu
Template:       astra
Version:        2.0.0
License:        GNU General Public License v2 or later
License URI:    https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    cardiocare-child
Tags:           medical, healthcare, multilingual, accessibility-ready, cardiology
*/

/* =========================================================================
   CardioCare Wiltz – Design-System v2
   Brand-Guidelines: 4 Brand-Farben + Argentum Sans
   ========================================================================= */

:root {
    /* --- Brand Colors (Original-Brand-Guidelines) --- */
    --cc-brand:           #00A0DE;   /* Brand-Blau – nur für Buttons-BG & dekorative Elemente */
    --cc-brand-dark:      #0088BC;
    --cc-brand-text:      #007199;   /* AA-konformes Blau für Text/Links auf Weiß (4.51:1+) */
    --cc-brand-light:     #E8F6FC;
    --cc-brand-50:        #F0FAFE;

    --cc-accent:          #E61939;   /* Herz-Rot */
    --cc-accent-dark:     #C9112F;
    --cc-accent-light:    #FDE5E9;

    --cc-ink:             #110205;   /* Headings / dunkles Schwarz */
    --cc-ink-soft:        #2A1B1F;
    --cc-text:            #3D3D3D;
    --cc-text-soft:       #5C6470;   /* AA: 5.96:1 auf Weiß (vorher #6B7280 = 4.79:1, grenzwertig) */
    --cc-text-muted:      #6B7280;   /* AA: 4.79:1 (vorher #9CA3AF = 2.59:1 → FAIL) */

    --cc-bg:              #FFF8F9;   /* Page-Background */
    --cc-white:           #FFFFFF;
    --cc-surface:         #FFFFFF;
    --cc-surface-alt:     #FBFBFD;
    --cc-border:          #ECECEF;
    --cc-divider:         #F2F2F4;

    /* --- Gradients --- */
    --cc-gradient-brand:    linear-gradient(135deg, #00A0DE 0%, #0088BC 100%);
    --cc-gradient-accent:   linear-gradient(135deg, #E61939 0%, #C9112F 100%);
    --cc-gradient-hero:     linear-gradient(135deg, #00A0DE 0%, #006A92 100%);
    --cc-gradient-soft:     linear-gradient(180deg, #FFF8F9 0%, #FFFFFF 100%);

    /* --- Typografie --- */
    --cc-font-sans:    'Argentum Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cc-font-display: 'Argentum Sans', 'Inter', sans-serif;

    /* Type-Scale (mobile-first, Major Third) */
    --cc-fs-xs:    0.75rem;       /* 12 */
    --cc-fs-sm:    0.875rem;      /* 14 */
    --cc-fs-base:  1rem;          /* 16 */
    --cc-fs-lg:    1.125rem;      /* 18 */
    --cc-fs-xl:    1.375rem;      /* 22 */
    --cc-fs-2xl:   1.75rem;       /* 28 */
    --cc-fs-3xl:   2.25rem;       /* 36 */
    --cc-fs-4xl:   2.75rem;       /* 44 */
    --cc-fs-5xl:   clamp(2.5rem, 6vw, 4.5rem);

    /* --- Spacing-Scale (8-pt grid) --- */
    --cc-sp-1:  0.25rem;
    --cc-sp-2:  0.5rem;
    --cc-sp-3:  0.75rem;
    --cc-sp-4:  1rem;
    --cc-sp-5:  1.5rem;
    --cc-sp-6:  2rem;
    --cc-sp-7:  2.5rem;
    --cc-sp-8:  3rem;
    --cc-sp-10: 4rem;
    --cc-sp-12: 6rem;
    --cc-sp-16: 8rem;

    /* --- Radien --- */
    --cc-radius-sm:  0.5rem;
    --cc-radius:     0.875rem;
    --cc-radius-lg:  1.25rem;
    --cc-radius-xl:  1.75rem;
    --cc-radius-full: 999px;

    /* --- Schatten (medizinisch-clean, nicht zu hart) --- */
    --cc-shadow-xs:  0 1px 2px rgba(17, 2, 5, 0.04);
    --cc-shadow-sm:  0 2px 6px rgba(17, 2, 5, 0.06);
    --cc-shadow:     0 8px 24px rgba(17, 2, 5, 0.08);
    --cc-shadow-lg:  0 16px 40px rgba(17, 2, 5, 0.10);
    --cc-shadow-brand: 0 14px 36px rgba(0, 160, 222, 0.28);
    --cc-shadow-accent: 0 14px 36px rgba(230, 25, 57, 0.25);

    /* --- Motion --- */
    --cc-ease:    cubic-bezier(0.22, 1, 0.36, 1);
    --cc-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --cc-dur-fast:   160ms;
    --cc-dur:        260ms;
    --cc-dur-slow:   480ms;

    /* --- Layout --- */
    --cc-container:   1200px;
    --cc-container-wide: 1320px;
    --cc-container-narrow: 880px;

    /* --- Z-Index --- */
    --cc-z-base:  1;
    --cc-z-sticky:50;
    --cc-z-toast: 80;
    --cc-z-modal: 100;
}

/* =========================================================================
   Globale Resets & Basics
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

body.astra-theme,
body {
    font-family: var(--cc-font-sans);
    color: var(--cc-text);
    background-color: var(--cc-bg);
    font-feature-settings: "ss01", "cv02", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--cc-brand);
    color: #fff;
}

img, svg, video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--cc-brand-text);
    text-decoration: none;
    transition: color var(--cc-dur-fast) var(--cc-ease);
}
a { color: var(--cc-brand-text); }
a:hover { color: var(--cc-brand-dark); }

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--cc-brand-text);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Screen-Reader-Only Klasse (WCAG-konform versteckt für Sighted, lesbar für SR) */
.cc-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Skip-to-Content-Link (WCAG 2.4.1) – unsichtbar bis Fokus */
.cc-skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 100000;
    padding: 1rem 1.5rem;
    background: var(--cc-ink);
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    border-radius: 0 0 8px 0;
    transition: top 180ms var(--cc-ease);
}
.cc-skip-link:focus,
.cc-skip-link:focus-visible {
    top: 0;
    outline: 3px solid var(--cc-accent);
    outline-offset: 2px;
}

/* Headings – Argentum Sans, generös aber kontrolliert */
h1, h2, h3, h4, h5, h6,
.entry-title,
.ast-page-builder-template .entry-title {
    font-family: var(--cc-font-display);
    color: var(--cc-ink);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

h1, .entry-title { font-size: var(--cc-fs-4xl); letter-spacing: -0.025em; line-height: 1.08; }
h2 { font-size: var(--cc-fs-3xl); letter-spacing: -0.02em; }
h3 { font-size: var(--cc-fs-2xl); }
h4 { font-size: var(--cc-fs-xl); }
h5 { font-size: var(--cc-fs-lg); }
h6 { font-size: var(--cc-fs-base); text-transform: uppercase; letter-spacing: 0.08em; }

@media (min-width: 768px) {
    h1, .entry-title { font-size: var(--cc-fs-5xl); }
    h2 { font-size: var(--cc-fs-4xl); }
    h3 { font-size: var(--cc-fs-3xl); }
}

p { line-height: 1.75; margin: 0 0 1em; }
p.lead { font-size: var(--cc-fs-lg); color: var(--cc-text-soft); line-height: 1.65; }

/* =========================================================================
   Helpers / Layout-Klassen
   ========================================================================= */

.cc-container {
    width: min(100% - 2rem, var(--cc-container));
    margin-inline: auto;
}

.cc-container--wide   { max-width: var(--cc-container-wide); }
.cc-container--narrow { max-width: var(--cc-container-narrow); }

.cc-section {
    padding-block: var(--cc-sp-10);
}
@media (min-width: 768px) {
    .cc-section { padding-block: var(--cc-sp-12); }
}
@media (min-width: 1200px) {
    .cc-section { padding-block: var(--cc-sp-16); }
}

.cc-grid {
    display: grid;
    gap: var(--cc-sp-6);
}
.cc-grid--2  { grid-template-columns: 1fr; }
.cc-grid--3  { grid-template-columns: 1fr; }
.cc-grid--4  { grid-template-columns: 1fr; }

@media (min-width: 640px) {
    .cc-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .cc-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .cc-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.cc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--cc-sp-2);
    padding: var(--cc-sp-2) var(--cc-sp-4);
    background: var(--cc-brand-light);
    color: var(--cc-brand-dark);
    font-size: var(--cc-fs-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--cc-radius-full);
    margin-bottom: var(--cc-sp-5);
}
.cc-eyebrow::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cc-accent);
    box-shadow: 0 0 0 3px rgba(230, 25, 57, 0.18);
    animation: cc-pulse 2.2s ease-in-out infinite;
}
@keyframes cc-pulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.3); opacity: 0.7; }
}

.cc-section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--cc-sp-10);
}
.cc-section-head h2 { margin-bottom: var(--cc-sp-4); }
.cc-section-head p { color: var(--cc-text-soft); font-size: var(--cc-fs-lg); }

/* =========================================================================
   Buttons – Modern, Brand-treu
   ========================================================================= */

.cc-btn,
.wp-block-button__link,
.ast-custom-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cc-sp-2);
    padding: 0.95rem 1.75rem;
    border-radius: var(--cc-radius-full);
    font-family: var(--cc-font-display);
    font-weight: 600;
    font-size: var(--cc-fs-base);
    line-height: 1;
    letter-spacing: 0.01em;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform var(--cc-dur) var(--cc-ease),
                box-shadow var(--cc-dur) var(--cc-ease),
                background-color var(--cc-dur) var(--cc-ease),
                color var(--cc-dur) var(--cc-ease);
    will-change: transform;
    text-decoration: none;
}

.cc-btn--primary,
.wp-block-button__link {
    background: var(--cc-gradient-accent);
    color: #fff;
    box-shadow: var(--cc-shadow-accent);
}
.cc-btn--primary:hover,
.wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(230, 25, 57, 0.40);
    color: #fff;
}

.cc-btn--accent {
    background: var(--cc-gradient-accent);
    color: #fff;
    box-shadow: var(--cc-shadow-accent);
}
.cc-btn--accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(230, 25, 57, 0.36);
    color: #fff;
}

.cc-btn--ghost {
    background: transparent;
    color: var(--cc-brand-text);
    border-color: var(--cc-brand-text);
}
.cc-btn--ghost:hover {
    background: var(--cc-brand-text);
    color: #fff;
}

.cc-btn--white {
    background: #fff;
    color: var(--cc-brand-text);
    box-shadow: var(--cc-shadow);
}
.cc-btn--white:hover {
    transform: translateY(-2px);
    box-shadow: var(--cc-shadow-lg);
}

.cc-btn .cc-btn__icon {
    transition: transform var(--cc-dur) var(--cc-ease);
}
.cc-btn:hover .cc-btn__icon {
    transform: translateX(3px);
}

/* =========================================================================
   Header – Sauber, sticky, glasig bei Scroll
   ========================================================================= */

.ast-above-header {
    background: var(--cc-ink) !important;
    color: #fff;
    font-size: var(--cc-fs-sm);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ast-above-header a { color: #fff; }
.ast-above-header a:hover { color: var(--cc-brand-text); }

.ast-above-header-bar {
    padding-block: 0.5rem !important;
}

.main-header-bar {
    background: rgba(255, 255, 255, 0);
    backdrop-filter: saturate(180%) blur(0px);
    -webkit-backdrop-filter: saturate(180%) blur(0px);
    border-bottom: 1px solid transparent;
    /* Header-Höhe kompakt halten – Astra-Default ist sehr großzügig */
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    min-height: 0 !important;
    transition: background var(--cc-dur-slow) var(--cc-ease),
                border-color var(--cc-dur-slow) var(--cc-ease),
                backdrop-filter var(--cc-dur-slow) var(--cc-ease),
                -webkit-backdrop-filter var(--cc-dur-slow) var(--cc-ease),
                box-shadow var(--cc-dur-slow) var(--cc-ease),
                padding var(--cc-dur) var(--cc-ease);
}

/* Innerer Wrapper darf keine zusätzliche Höhe addieren */
.main-header-bar .ast-container,
.main-header-bar .site-primary-header-wrap,
.main-header-bar-wrap .main-header-bar {
    min-height: 0 !important;
}

/* Online-Termin-Button im Header etwas kompakter */
.main-header-bar .ast-custom-button,
.main-header-bar .wp-block-button__link {
    padding: 0.55rem 1.25rem !important;
    font-size: 0.95rem !important;
}

/* Beim Scrollen leicht weiter zusammenstauchen */
.ast-header-break-point.cc-scrolled .main-header-bar,
body.cc-scrolled .main-header-bar {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(200%) blur(18px);
    -webkit-backdrop-filter: saturate(200%) blur(18px);
    border-bottom-color: rgba(236, 236, 239, 0.85);
    box-shadow: 0 2px 24px rgba(17, 2, 5, 0.07), 0 1px 0 rgba(255, 255, 255, 0.9);
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
}

.main-navigation ul li a,
.main-header-menu .menu-item a {
    font-family: var(--cc-font-display);
    font-weight: 500;
    font-size: var(--cc-fs-base);
    color: var(--cc-ink) !important;
    /* Menü-Links: reduzierte vertikale Padding (vorher 0.85rem) */
    padding: 0.55rem 1rem !important;
    position: relative;
    transition: color var(--cc-dur) var(--cc-ease);
}
.main-navigation ul li a::after {
    content: "";
    position: absolute;
    left: 1rem; right: 1rem; bottom: 0.4rem;
    height: 2px;
    background: var(--cc-brand);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--cc-dur) var(--cc-ease);
}
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li:hover > a {
    color: var(--cc-brand-text) !important;
}
.main-navigation ul li:hover > a::after,
.main-navigation ul li.current-menu-item > a::after {
    transform: scaleX(1);
}

/* Logo – kompakt & proportional */
.site-branding img,
.custom-logo,
.ast-site-identity .site-logo-img img,
.site-logo-img img {
    max-height: 44px !important;
    width: auto !important;
    height: auto !important;
    max-width: 180px !important;
    object-fit: contain;
}
@media (min-width: 992px) {
    .site-branding img,
    .custom-logo,
    .ast-site-identity .site-logo-img img,
    .site-logo-img img {
        max-height: 48px !important;
        max-width: 200px !important;
    }
}

/* Weiße Lücke zwischen Header und Hero entfernen –
   Astra setzt auf .site-content / .ast-page-builder-template padding-top,
   die Frontpage soll nahtlos in den Hero übergehen. */
.cc-frontpage,
body.home .site-content > .ast-container,
body.home .site-content,
body.page-template-front-page .site-content,
.ast-page-builder-template.home .site-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.cc-frontpage > .cc-hero:first-child,
.cc-frontpage > section:first-child {
    margin-top: 0 !important;
}

/* Astra-Single-Post-Header auf Frontpage neutralisieren */
body.home .ast-single-post-header,
body.home .ast-archive-description,
body.home .entry-header {
    display: none !important;
}

/* Auf Shortcode-Seiten (Leistungen, Services, …) den Astra-Titel visuell
   verbergen – aber für Screenreader & SEO erhalten (WCAG 1.3.1 / 2.4.10).
   Der eigentliche <h1> bleibt im DOM und in der Heading-Hierarchie.
   Die Wrapper-Header verschwinden visuell ohne Layout-Lücke. */
body.cc-no-page-header .ast-single-post-header,
body.cc-no-page-header .ast-archive-description,
body.cc-no-page-header .entry-header,
body.cc-no-page-header header.entry-header {
    /* Container-Höhe auf 0 → keine visuelle Lücke,
       aber Kind-Elemente (h1) bleiben mit visually-hidden im A11y-Tree. */
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}

/* Der eigentliche Page-Title wird visually-hidden – NICHT display:none,
   damit Screenreader die Heading-Hierarchie korrekt lesen können. */
body.cc-no-page-header .ast-page-title,
body.cc-no-page-header .entry-title,
body.cc-no-page-header .ast-single-post-header .entry-title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
body.cc-no-page-header .site-content,
body.cc-no-page-header .site-content > .ast-container,
body.cc-no-page-header .ast-page-builder-template .site-content,
body.cc-no-page-header .entry-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body.cc-no-page-header .entry-content > *:first-child {
    margin-top: 0 !important;
}

/* =========================================================================
   HERO – Cardiology-Signature
   ========================================================================= */

.cc-hero {
    position: relative;
    overflow: hidden;
    background: var(--cc-gradient-soft);
    padding-block: clamp(3rem, 8vw, 6rem);
    isolation: isolate;
}

.cc-hero::before {
    content: "";
    position: absolute;
    inset: -10% -10% auto auto;
    width: 60vmax; height: 60vmax;
    background: radial-gradient(closest-side, rgba(0,160,222,0.18), transparent 70%);
    z-index: -1;
    border-radius: 50%;
    filter: blur(8px);
    animation: cc-float 18s ease-in-out infinite alternate;
}
.cc-hero::after {
    content: "";
    position: absolute;
    inset: auto auto -20% -20%;
    width: 50vmax; height: 50vmax;
    background: radial-gradient(closest-side, rgba(230,25,57,0.10), transparent 70%);
    z-index: -1;
    border-radius: 50%;
    filter: blur(8px);
    animation: cc-float 22s ease-in-out infinite alternate-reverse;
}
@keyframes cc-float {
    from { transform: translate(0,0); }
    to   { transform: translate(-3rem, 2rem); }
}

.cc-hero__grid {
    display: grid;
    gap: var(--cc-sp-8);
    grid-template-columns: 1fr;
    align-items: center;
}
@media (min-width: 992px) {
    .cc-hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--cc-sp-10); }
}

.cc-hero__title {
    font-size: clamp(2.25rem, 6.2vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: var(--cc-sp-5);
    text-wrap: balance;
    word-break: keep-all;
    hyphens: manual;
}
.cc-hero__title .cc-hl {
    background: var(--cc-gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline;
    white-space: nowrap;
}
.cc-hero__lead {
    font-size: var(--cc-fs-lg);
    color: var(--cc-text-soft);
    max-width: 56ch;
    margin-bottom: var(--cc-sp-7);
    line-height: 1.65;
}

.cc-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cc-sp-3);
    margin-bottom: var(--cc-sp-8);
}

/* Trust-Badges: 3 Spalten mit Trennstrich – wirkt mehr wie ein KPI-Block */
.cc-hero__trust {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: var(--cc-sp-6);
    color: var(--cc-text-soft);
    font-size: var(--cc-fs-sm);
    align-items: start;
    justify-content: start;
}
.cc-hero__trust li {
    position: relative;
    padding-right: var(--cc-sp-6);
}
.cc-hero__trust li + li {
    padding-left: var(--cc-sp-6);
    border-left: 1px solid var(--cc-divider);
}
.cc-hero__trust strong {
    display: block;
    color: var(--cc-ink);
    font-family: var(--cc-font-display);
    font-size: var(--cc-fs-2xl);
    line-height: 1.1;
    margin-bottom: 0.15rem;
    background: var(--cc-gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.cc-hero__trust span {
    display: block;
    line-height: 1.35;
}

@media (max-width: 600px) {
    .cc-hero__trust {
        grid-template-columns: 1fr;
        gap: var(--cc-sp-3);
    }
    .cc-hero__trust li {
        padding: 0;
    }
    .cc-hero__trust li + li {
        padding: var(--cc-sp-3) 0 0;
        border-left: 0;
        border-top: 1px solid var(--cc-divider);
    }
}

/* Hero rechte Karte / Bild */
.cc-hero__card {
    position: relative;
    border-radius: var(--cc-radius-xl);
    overflow: hidden;
    box-shadow: var(--cc-shadow-lg);
    aspect-ratio: 5 / 6;
    background: var(--cc-brand-light);
}
.cc-hero__card img,
.cc-hero__card svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cc-hero__badge {
    position: absolute;
    bottom: 1.25rem;
    left: 1.25rem;
    right: 1.25rem;
    display: flex;
    gap: var(--cc-sp-3);
    align-items: center;
    padding: 1rem 1.1rem;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(10px);
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
}
.cc-hero__badge-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cc-gradient-accent);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: var(--cc-shadow-accent);
    /* Inneres "Padding" via Box-Sizing kontrollieren */
    padding: 0;
    overflow: hidden;
}
/* SVG-Größe explizit erzwingen – manche WP/Plugin-Resets blasen sonst SVGs auf 100% auf */
.cc-hero__badge-icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block;
    color: #fff;
    stroke: #fff;
    fill: none;
    flex: none;
}
.cc-hero__badge-text strong { color: var(--cc-ink); font-family: var(--cc-font-display); }
.cc-hero__badge-text span   { display: block; color: var(--cc-text-soft); font-size: var(--cc-fs-sm); }

/* EKG-Linie im Hero – kontinuierlich scrollender Strip (Treadmill-Style).
   Zwei identische Pattern in der SVG → nahtloser Loop, immer Linie sichtbar.
   P-/T-Wellen mit Bezier-Kurven → weiches, organisches Heartbeat-Gefühl.      */
.cc-ekg {
    position: absolute;
    inset: auto 0 1.25rem 0;
    height: 64px;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    overflow: hidden;
    /* Nur ein winziges Fade an den Außenkanten — kaum sichtbar, lässt die Linie
       am Rand "atmen" statt hart abzubrechen. Behält das Voll-Breit-Gefühl. */
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%, #000 2.5%, #000 97.5%, transparent 100%);
            mask-image: linear-gradient(to right,
        transparent 0%, #000 2.5%, #000 97.5%, transparent 100%);
}
.cc-ekg svg {
    display: block;
    /* SVG ist doppelt so breit wie Container → 2 Patterns nebeneinander sichtbar. */
    width: 200%;
    height: 100%;
    overflow: visible;
}
/* Die Pattern-Gruppe wird animiert (NICHT das <svg> selbst — CSS-Transforms auf
   SVG-Root sind Browser-abhängig und liefen in Firefox/Safari nicht).
   transform-box: fill-box + translateX(-50%) = exakt eine Pattern-Breite,
   auflösungs-unabhängig.                                                       */
.cc-ekg__strip {
    will-change: transform;
    animation: cc-ekg-stream 5.2s linear infinite;
    transform-box: fill-box;
    transform-origin: 0 0;
}
.cc-ekg path {
    /* Klare, helle Linie ohne Glow-Hintergrund. */
    stroke: #ff1a3d;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    vector-effect: non-scaling-stroke;
}
@keyframes cc-ekg-stream {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); } /* exakt eine Pattern-Breite */
}
@media (max-width: 767px) {
    .cc-ekg {
        height: 48px;
    }
    .cc-ekg path { stroke-width: 2.6; }
}
@media (prefers-reduced-motion: reduce) {
    .cc-ekg__strip,
    .cc-ekg path {
        animation: none;
        transform: none;
    }
}

/* =========================================================================
   Service-Cards (Leistungen)
   ========================================================================= */

.cc-services { background: var(--cc-white); }
.cc-services .cc-section-head { color: var(--cc-ink); }

.cc-card {
    position: relative;
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-lg);
    padding: var(--cc-sp-7);
    transition: transform var(--cc-dur) var(--cc-ease),
                box-shadow var(--cc-dur) var(--cc-ease),
                border-color var(--cc-dur) var(--cc-ease);
    overflow: hidden;
    isolation: isolate;
}
.cc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, var(--cc-brand-light), transparent 50%);
    opacity: 0;
    z-index: -1;
    transition: opacity var(--cc-dur) var(--cc-ease);
}
.cc-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--cc-shadow-lg);
    border-color: transparent;
}
.cc-card:hover::before { opacity: 1; }

.cc-card__icon {
    width: 60px; height: 60px;
    border-radius: var(--cc-radius);
    background: var(--cc-brand-light);
    color: var(--cc-brand-text);
    display: grid; place-items: center;
    margin-bottom: var(--cc-sp-5);
    transition: transform var(--cc-dur) var(--cc-ease),
                background var(--cc-dur) var(--cc-ease),
                color var(--cc-dur) var(--cc-ease);
}

/* Card mit Bildkopf */
.cc-card--media { padding: 0; overflow: hidden; }
.cc-card--media > h3,
.cc-card--media > p,
.cc-card--media > .cc-card__link {
    padding-inline: var(--cc-sp-7);
}
.cc-card--media > h3 { padding-top: var(--cc-sp-2); }
.cc-card--media > .cc-card__link { padding-bottom: var(--cc-sp-7); display: inline-flex; margin-inline: var(--cc-sp-7); }

.cc-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    margin-bottom: var(--cc-sp-5);
    background: var(--cc-brand-light);
}
.cc-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 700ms var(--cc-ease);
}
.cc-card--media:hover .cc-card__media img {
    transform: scale(1.06);
}
.cc-card__media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 50%;
    background: linear-gradient(180deg, transparent, rgba(17,2,5,0.18));
    pointer-events: none;
}

.cc-card--media .cc-card__icon {
    position: absolute;
    top: var(--cc-sp-3);
    left: var(--cc-sp-3);
    width: 48px; height: 48px;
    margin: 0;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(6px);
    box-shadow: var(--cc-shadow-sm);
    z-index: 2;
}
.cc-card:hover .cc-card__icon {
    background: var(--cc-gradient-brand);
    color: #fff;
    transform: rotate(-6deg) scale(1.05);
}

.cc-card--accent .cc-card__icon {
    background: var(--cc-accent-light);
    color: var(--cc-accent);
}
.cc-card--accent:hover .cc-card__icon {
    background: var(--cc-gradient-accent);
    color: #fff;
}

.cc-card h3 {
    font-size: var(--cc-fs-xl);
    margin-bottom: var(--cc-sp-3);
}
.cc-card p {
    color: var(--cc-text-soft);
    margin: 0 0 var(--cc-sp-5);
    font-size: var(--cc-fs-base);
}
.cc-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--cc-sp-2);
    color: var(--cc-brand-text);
    font-weight: 600;
    font-family: var(--cc-font-display);
}
.cc-card__link::after {
    content: "→";
    transition: transform var(--cc-dur) var(--cc-ease);
}
.cc-card__link:hover::after { transform: translateX(4px); }

/* =========================================================================
   Warum CardioCare – Split-Sektion
   ========================================================================= */

.cc-why {
    background:
        radial-gradient(900px 600px at 100% 0%, rgba(0,160,222,0.08), transparent 60%),
        var(--cc-bg);
}

.cc-why__grid {
    display: grid;
    gap: var(--cc-sp-8);
    grid-template-columns: 1fr;
    align-items: center;
}
@media (min-width: 992px) {
    .cc-why__grid {
        grid-template-columns: 0.95fr 1.05fr;
        gap: var(--cc-sp-10);
    }
}

.cc-why__media {
    position: relative;
    aspect-ratio: 4/5;
    min-height: 380px;
}
.cc-why__img {
    position: absolute;
    border-radius: var(--cc-radius-lg);
    box-shadow: var(--cc-shadow-lg);
    object-fit: cover;
    transition: transform var(--cc-dur-slow) var(--cc-ease);
}
.cc-why__img--lg {
    inset: 0 12% 18% 0;
    width: 88%; height: 82%;
    z-index: 1;
}
.cc-why__img--sm {
    inset: auto 0 0 32%;
    width: 68%; height: 50%;
    z-index: 2;
    border: 6px solid var(--cc-bg);
}
.cc-why__media:hover .cc-why__img--lg { transform: translate(-6px, -6px); }
.cc-why__media:hover .cc-why__img--sm { transform: translate(6px, 6px); }

.cc-why__sticker {
    position: absolute;
    top: var(--cc-sp-3);
    right: var(--cc-sp-3);
    z-index: 3;
    background: var(--cc-gradient-accent);
    color: #fff;
    padding: 0.9rem 1.1rem;
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow-accent);
    text-align: center;
    line-height: 1.05;
    transform: rotate(4deg);
}
.cc-why__sticker strong {
    display: block;
    font-family: var(--cc-font-display);
    font-size: 1.6rem;
}
.cc-why__sticker span {
    font-size: var(--cc-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.92;
}

.cc-why__list {
    list-style: none;
    padding: 0;
    margin: var(--cc-sp-7) 0 0;
    display: grid;
    gap: var(--cc-sp-5);
}
@media (min-width: 640px) {
    .cc-why__list { grid-template-columns: 1fr 1fr; }
}
.cc-why__list li {
    display: flex;
    gap: var(--cc-sp-3);
    align-items: flex-start;
}
.cc-why__icon {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: var(--cc-radius);
    background: var(--cc-brand-light);
    color: var(--cc-brand-text);
    display: grid; place-items: center;
}
.cc-why__list h3 {
    font-size: var(--cc-fs-lg);
    margin: 0 0 0.25rem;
}
.cc-why__list p {
    margin: 0;
    color: var(--cc-text-soft);
    font-size: var(--cc-fs-base);
    line-height: 1.55;
}


/* =========================================================================
   Parallax-Banner (cinematic)
   ========================================================================= */

.cc-banner {
    position: relative;
    isolation: isolate;
    padding-block: clamp(4rem, 12vw, 9rem);
    color: #fff;
    background-image: var(--cc-bg-image);
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    overflow: hidden;
    text-align: center;
}
@media (min-width: 992px) {
    .cc-banner { background-attachment: fixed; }
}
.cc-banner__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(0,160,222,0.78) 0%, rgba(17,2,5,0.78) 100%);
    z-index: 0;
}
.cc-banner__inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin-inline: auto;
}
.cc-banner__inner h2 {
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.25rem);
    margin: 0 0 var(--cc-sp-4);
    line-height: 1.1;
}
.cc-banner__inner p {
    font-size: var(--cc-fs-lg);
    opacity: 0.95;
    margin-bottom: var(--cc-sp-7);
}

.cc-eyebrow--on-dark {
    background: rgba(255,255,255,0.14);
    color: #fff;
    backdrop-filter: blur(6px);
}
.cc-eyebrow--on-dark::before {
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.32);
}


/* =========================================================================
   Praxis-Galerie (Bento-Grid)
   ========================================================================= */

.cc-gallery {
    display: grid;
    gap: var(--cc-sp-4);
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
}
@media (min-width: 768px) {
    .cc-gallery {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 220px;
        gap: var(--cc-sp-5);
    }
}
@media (min-width: 1100px) {
    .cc-gallery { grid-auto-rows: 260px; }
}

.cc-gallery__item {
    position: relative;
    overflow: hidden;
    border-radius: var(--cc-radius-lg);
    box-shadow: var(--cc-shadow-sm);
    background: var(--cc-brand-light);
    transition: transform var(--cc-dur) var(--cc-ease),
                box-shadow var(--cc-dur) var(--cc-ease);
    margin: 0;
}
.cc-gallery__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--cc-shadow-lg);
}
.cc-gallery__item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 900ms var(--cc-ease);
}
.cc-gallery__item:hover img { transform: scale(1.08); }

.cc-gallery__item[data-span="2"] { grid-column: span 2; }
@media (min-width: 768px) {
    .cc-gallery__item[data-span="2"] { grid-row: span 2; grid-column: span 2; }
}

/* Klickbarer Trigger-Button füllt das gesamte Galerie-Item */
.cc-gallery__trigger {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    cursor: zoom-in;
    border-radius: inherit;
    overflow: hidden;
    font: inherit;
    color: inherit;
}
.cc-gallery__trigger:focus-visible {
    outline: 3px solid var(--cc-brand);
    outline-offset: 3px;
}
.cc-gallery__trigger img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 900ms var(--cc-ease);
}
.cc-gallery__item:hover .cc-gallery__trigger img,
.cc-gallery__trigger:focus-visible img {
    transform: scale(1.08);
}

/* Lupe-Symbol erscheint beim Hovern */
.cc-gallery__zoom {
    position: absolute;
    inset: auto auto 0.75rem 0.75rem;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.95);
    color: var(--cc-brand-text);
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(17, 2, 5, 0.18);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--cc-dur) var(--cc-ease),
                transform var(--cc-dur) var(--cc-ease);
    pointer-events: none;
}
.cc-gallery__item:hover .cc-gallery__zoom,
.cc-gallery__trigger:focus-visible .cc-gallery__zoom {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================================
   Lightbox – Foto-Modal mit Backdrop, Prev/Next, ESC-Close
   ========================================================================= */

.cc-lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--cc-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 3vw, 2.5rem);
    background: rgba(17, 2, 5, 0.86);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms var(--cc-ease),
                visibility 220ms var(--cc-ease);
}
.cc-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.cc-lightbox__stage {
    position: relative;
    max-width: min(1200px, 95vw);
    max-height: 90vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    transform: scale(0.96);
    transition: transform 240ms var(--cc-ease);
}
.cc-lightbox.is-open .cc-lightbox__stage { transform: scale(1); }

.cc-lightbox__img {
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    background: var(--cc-ink);
}

.cc-lightbox__caption {
    color: rgba(255, 255, 255, 0.92);
    font-size: var(--cc-fs-sm);
    text-align: center;
    max-width: 56ch;
    line-height: 1.5;
    margin: 0;
}
.cc-lightbox__counter {
    color: rgba(255, 255, 255, 0.55);
    font-size: var(--cc-fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Buttons (Close, Prev, Next) – konsistentes Styling */
.cc-lightbox__btn {
    appearance: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    width: 48px;
    height: 48px;
    border-radius: 999px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background var(--cc-dur-fast) var(--cc-ease),
                transform var(--cc-dur-fast) var(--cc-ease),
                border-color var(--cc-dur-fast) var(--cc-ease);
}
.cc-lightbox__btn:hover,
.cc-lightbox__btn:focus-visible {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.36);
    transform: scale(1.06);
    outline: none;
}
.cc-lightbox__btn svg { display: block; }

.cc-lightbox__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
}

.cc-lightbox__prev,
.cc-lightbox__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}
.cc-lightbox__prev { left: -0.5rem; }
.cc-lightbox__next { right: -0.5rem; }

@media (min-width: 768px) {
    .cc-lightbox__prev { left: -3.5rem; }
    .cc-lightbox__next { right: -3.5rem; }
    .cc-lightbox__close { top: -3.5rem; right: -0.5rem; }
}

/* Scroll-Lock wenn Lightbox offen */
body.cc-lightbox-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .cc-lightbox,
    .cc-lightbox__stage {
        transition: none;
    }
}


/* =========================================================================
   Doctor-Profil – Über die Praxis
   ========================================================================= */

.cc-doctor {
    background:
        radial-gradient(900px 500px at 0% 0%, rgba(0,160,222,0.07), transparent 60%),
        radial-gradient(700px 400px at 100% 100%, rgba(230,25,57,0.05), transparent 60%),
        var(--cc-bg);
}

.cc-doctor__grid {
    display: grid;
    gap: var(--cc-sp-10);
    grid-template-columns: 1fr;
    align-items: center;
}
@media (min-width: 992px) {
    .cc-doctor__grid { grid-template-columns: 0.85fr 1.15fr; }
}

.cc-doctor__photo {
    position: relative;
    border-radius: var(--cc-radius-xl);
    overflow: hidden;
    aspect-ratio: 4/5;
    box-shadow: var(--cc-shadow-lg);
    background: linear-gradient(180deg, var(--cc-brand-light), var(--cc-white));
}
.cc-doctor__photo::after {
    content: "";
    position: absolute;
    inset: auto -10% -10% auto;
    width: 60%; aspect-ratio: 1;
    background: var(--cc-gradient-accent);
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.45;
    z-index: 0;
}
.cc-doctor__photo img {
    position: relative;
    z-index: 1;
    width: 100%; height: 100%;
    object-fit: cover;
}

.cc-doctor__name {
    font-size: var(--cc-fs-3xl);
    margin-bottom: var(--cc-sp-2);
}
.cc-doctor__role {
    color: var(--cc-brand-text);
    font-weight: 600;
    font-family: var(--cc-font-display);
    margin-bottom: var(--cc-sp-5);
}

.cc-credentials {
    list-style: none;
    padding: 0;
    margin: var(--cc-sp-6) 0 0;
    display: grid;
    gap: var(--cc-sp-3);
}
.cc-credentials li {
    display: flex;
    align-items: flex-start;
    gap: var(--cc-sp-3);
    color: var(--cc-text);
}
.cc-credentials li::before {
    content: "";
    flex: 0 0 auto;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--cc-brand-light) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A0DE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 14px no-repeat;
    margin-top: 2px;
}

/* =========================================================================
   Praxis-Info-Box / Sprechzeiten
   ========================================================================= */

.cc-info-grid {
    display: grid;
    gap: var(--cc-sp-5);
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .cc-info-grid { grid-template-columns: repeat(3, 1fr); }
}

.cc-info {
    background: #fff;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-lg);
    padding: var(--cc-sp-6);
    display: flex;
    gap: var(--cc-sp-4);
    align-items: flex-start;
    transition: border-color var(--cc-dur) var(--cc-ease),
                box-shadow var(--cc-dur) var(--cc-ease);
}
.cc-info:hover {
    border-color: var(--cc-brand-text);
    box-shadow: var(--cc-shadow);
}
.cc-info__icon {
    flex: 0 0 auto;
    width: 48px; height: 48px;
    border-radius: var(--cc-radius);
    background: var(--cc-brand-light);
    color: var(--cc-brand-text);
    display: grid; place-items: center;
}
.cc-info h4 {
    margin: 0 0 var(--cc-sp-2);
    font-size: var(--cc-fs-lg);
}
.cc-info p,
.cc-info a {
    margin: 0;
    color: var(--cc-text-soft);
    font-size: var(--cc-fs-base);
}
.cc-info a:hover { color: var(--cc-brand-text); }

.cc-hours-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--cc-fs-base);
}
.cc-hours-table tr + tr td { border-top: 1px solid var(--cc-divider); }
.cc-hours-table td {
    padding: 0.55rem 0;
    color: var(--cc-text);
}
.cc-hours-table td:first-child { color: var(--cc-ink); font-weight: 600; }
.cc-hours-table td:last-child  { text-align: right; color: var(--cc-text-soft); }
.cc-hours-table tr.is-today td { color: var(--cc-brand-dark); }
.cc-hours-table tr.is-today td:first-child::before {
    content: "•";
    color: var(--cc-accent);
    margin-right: 0.4em;
}

/* =========================================================================
   Termin-CTA Strip
   ========================================================================= */

.cc-cta-strip {
    position: relative;
    overflow: hidden;
    background: var(--cc-gradient-hero);
    color: #fff;
    border-radius: var(--cc-radius-xl);
    padding: clamp(2rem, 6vw, 4rem);
    isolation: isolate;
}
.cc-cta-strip::before,
.cc-cta-strip::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    z-index: -1;
}
.cc-cta-strip::before {
    width: 280px; height: 280px;
    background: rgba(230,25,57,0.5);
    inset: -80px -60px auto auto;
}
.cc-cta-strip::after {
    width: 220px; height: 220px;
    background: rgba(255,255,255,0.18);
    inset: auto auto -80px -80px;
}
.cc-cta-strip__grid {
    display: grid;
    gap: var(--cc-sp-6);
    align-items: center;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .cc-cta-strip__grid { grid-template-columns: 1.4fr 1fr; gap: var(--cc-sp-8); }
}
.cc-cta-strip h2 {
    color: #fff;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    margin: 0 0 var(--cc-sp-3);
    line-height: 1.1;
}
.cc-cta-strip p { margin: 0; opacity: 0.92; }
.cc-cta-strip__actions {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--cc-sp-3);
    justify-content: flex-start;
    align-items: stretch; /* gleicht Breite der Kinder an */
}
@media (min-width: 768px) {
    .cc-cta-strip__actions {
        justify-content: flex-end;
        align-items: stretch;
    }
}

/* Beide CTA-Buttons innerhalb des CTA-Strips bekommen die gleiche Mindestbreite,
   damit sie optisch identisch wirken (orientiert sich am breiteren der beiden). */
.cc-cta-strip__actions .cc-btn {
    width: 100%;
    min-width: 240px;
    justify-content: center;
}

/* =========================================================================
   Testimonials / Patientenstimmen
   ========================================================================= */

.cc-testimonial {
    background: #fff;
    border-radius: var(--cc-radius-lg);
    padding: var(--cc-sp-7);
    border: 1px solid var(--cc-border);
    position: relative;
}
.cc-testimonial::before {
    content: """;
    position: absolute;
    top: -0.5rem;
    left: 1.25rem;
    font-size: 5rem;
    line-height: 1;
    font-family: Georgia, serif;
    color: var(--cc-brand-text);
    opacity: 0.18;
}
.cc-testimonial p {
    font-size: var(--cc-fs-lg);
    color: var(--cc-ink-soft);
    line-height: 1.65;
    margin-bottom: var(--cc-sp-5);
}
.cc-testimonial__author {
    display: flex; align-items: center; gap: var(--cc-sp-3);
}
.cc-testimonial__avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--cc-brand-light);
    color: var(--cc-brand-text);
    display: grid; place-items: center;
    font-weight: 700;
    font-family: var(--cc-font-display);
}
.cc-testimonial__name {
    font-weight: 600;
    color: var(--cc-ink);
    font-family: var(--cc-font-display);
    display: block;
}
.cc-testimonial__meta {
    color: var(--cc-text-soft);
    font-size: var(--cc-fs-sm);
}

.cc-stars {
    color: #F5B400;
    margin-bottom: var(--cc-sp-3);
    letter-spacing: 2px;
    font-size: 0.95rem;
}

/* =========================================================================
   FAQ
   ========================================================================= */

.cc-faq {
    max-width: 880px;
    margin: 0 auto;
}
.cc-faq details {
    background: #fff;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    margin-bottom: var(--cc-sp-3);
    overflow: hidden;
    transition: border-color var(--cc-dur) var(--cc-ease);
}
.cc-faq details[open] {
    border-color: var(--cc-brand-text);
    box-shadow: var(--cc-shadow-sm);
}
.cc-faq summary {
    cursor: pointer;
    padding: 1.1rem 1.3rem;
    font-family: var(--cc-font-display);
    font-weight: 600;
    color: var(--cc-ink);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--cc-sp-4);
}
.cc-faq summary::-webkit-details-marker { display: none; }
.cc-faq summary::after {
    content: "+";
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--cc-brand-light);
    color: var(--cc-brand-text);
    display: grid; place-items: center;
    font-size: 1.25rem; font-weight: 400;
    transition: transform var(--cc-dur) var(--cc-ease),
                background var(--cc-dur) var(--cc-ease),
                color var(--cc-dur) var(--cc-ease);
}
.cc-faq details[open] summary::after {
    content: "−";
    background: var(--cc-brand);
    color: #fff;
    transform: rotate(180deg);
}
.cc-faq .cc-faq__body {
    padding: 0 1.3rem 1.3rem;
    color: var(--cc-text-soft);
    line-height: 1.7;
}

/* =========================================================================
   Footer – Dunkel & klar
   ========================================================================= */

.site-footer,
.ast-footer-overlay,
.footer-primary-section-1,
.site-below-footer-wrap {
    background: var(--cc-ink) !important;
    color: #C9C7C9;
}

.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6,
.site-footer .widget-title {
    color: #fff;
    font-size: var(--cc-fs-lg);
    margin-bottom: var(--cc-sp-4);
}

.site-footer a {
    color: #D7D5D7;
    transition: color var(--cc-dur-fast) var(--cc-ease);
}
.site-footer a:hover {
    color: var(--cc-brand-text);
}

.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.site-footer ul li {
    padding: 0.35rem 0;
}

.ast-below-footer-section-1,
.site-below-footer-wrap {
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: var(--cc-fs-sm);
    color: #999;
}

/* =========================================================================
   Custom Cursor "Termin" CTA Floating (Mobile-Sicht)
   ========================================================================= */

.cc-mobile-cta {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--cc-z-sticky);
    display: none;
    padding: 0.75rem 1rem;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--cc-border);
    box-shadow: 0 -8px 22px rgba(17,2,5,0.08);
}
.cc-mobile-cta a {
    width: 100%;
}
@media (max-width: 767px) {
    .cc-mobile-cta { display: block; }
    body { padding-bottom: 78px; }
}

/* =========================================================================
   Astra-spezifische Anpassungen / Overrides
   ========================================================================= */

/* Single-Post / Page Container schlanker */
.ast-page-builder-template .entry-content > * + * { margin-top: 1.25em; }

/* Breadcrumbs – aufgeräumt */
.ast-breadcrumbs-wrapper {
    background: var(--cc-brand-light);
    padding: 1rem 0;
    color: var(--cc-text-soft);
    font-size: var(--cc-fs-sm);
}

/* Astra Single-Post Title (Page-Header) – mehr Atem */
.ast-single-post-header,
.ast-page-builder-template .site-content {
    padding-top: 2rem;
}

/* Astra Buttons aufpäppeln (z. B. von SureForms / Block-Buttons) */
.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    border: 2px solid var(--cc-brand);
    color: var(--cc-brand-text);
    box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--cc-brand);
    color: #fff;
}

/* SureForms – konsistente Inputs */
.srfm-form-container input[type="text"],
.srfm-form-container input[type="email"],
.srfm-form-container input[type="tel"],
.srfm-form-container input[type="date"],
.srfm-form-container input[type="time"],
.srfm-form-container textarea,
.srfm-form-container select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea,
select {
    width: 100%;
    padding: 0.85rem 1.1rem;
    border: 1.5px solid var(--cc-border);
    border-radius: var(--cc-radius-sm);
    background: #fff;
    font-family: var(--cc-font-sans);
    font-size: var(--cc-fs-base);
    color: var(--cc-ink);
    transition: border-color var(--cc-dur-fast) var(--cc-ease),
                box-shadow var(--cc-dur-fast) var(--cc-ease);
}
input:focus, textarea:focus, select:focus {
    border-color: var(--cc-brand-text);
    box-shadow: 0 0 0 4px rgba(0,160,222,0.15);
    outline: none;
}

label { font-weight: 600; color: var(--cc-ink); font-family: var(--cc-font-display); }

/* ── Kontakt-Formular Card ────────────────────────────────────────────── */
.cc-contact-page__form-wrap {
    background: #fff;
    border-radius: var(--cc-radius, 12px);
    padding: 32px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.07);
    max-width: 760px;
    margin-inline: auto;
}
@media (max-width: 599px) {
    .cc-contact-page__form-wrap {
        padding: 20px 16px;
    }
}

/* =========================================================================
   Scroll-Reveal-Animations (intersection-observer kompatibel)
   ========================================================================= */

.cc-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms var(--cc-ease),
                transform 700ms var(--cc-ease);
    will-change: opacity, transform;
}
.cc-reveal.is-visible {
    opacity: 1;
    transform: none;
}
.cc-reveal[data-delay="100"] { transition-delay: 100ms; }
.cc-reveal[data-delay="200"] { transition-delay: 200ms; }
.cc-reveal[data-delay="300"] { transition-delay: 300ms; }
.cc-reveal[data-delay="400"] { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
    .cc-reveal { opacity: 1; transform: none; }
}

/* =========================================================================
   Cookie-Hinweis / Notice-Bar
   ========================================================================= */

.cc-notice {
    background: var(--cc-ink);
    color: #fff;
    text-align: center;
    padding: 0.6rem 1rem;
    font-size: var(--cc-fs-sm);
}
.cc-notice a { color: var(--cc-brand-text); }

/* =========================================================================
   Utility-Klassen
   ========================================================================= */

.cc-text-brand   { color: var(--cc-brand-text); }
.cc-text-accent  { color: var(--cc-accent); }
.cc-text-ink     { color: var(--cc-ink); }
.cc-text-muted   { color: var(--cc-text-muted); }
.cc-bg-brand     { background: var(--cc-brand); color: #fff; }
.cc-bg-accent    { background: var(--cc-accent); color: #fff; }
.cc-bg-soft      { background: var(--cc-brand-light); }
.cc-bg-bg        { background: var(--cc-bg); }

.cc-mt-0 { margin-top: 0; }
.cc-mb-0 { margin-bottom: 0; }
.cc-mb-4 { margin-bottom: var(--cc-sp-4); }
.cc-mb-6 { margin-bottom: var(--cc-sp-6); }
.cc-mb-8 { margin-bottom: var(--cc-sp-8); }

.cc-only-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================================
   ABOUT-PAGE (cc-about) – LEGACY, ersetzt durch cc-about-v2 weiter unten
   Klassen cc-about__* werden nicht mehr gerendert – Block bleibt zur
   Referenz, schadet aber nicht (kein HTML matcht diese Selektoren).
   ========================================================================= */

.cc-about__hero {
    background:
        radial-gradient(1100px 520px at -10% 0%, var(--cc-brand-light) 0%, transparent 60%),
        radial-gradient(900px 460px at 110% 100%, var(--cc-accent-light) 0%, transparent 60%),
        var(--cc-bg);
    padding-block: clamp(2.5rem, 7vw, 5rem);
    position: relative;
    overflow: hidden;
}
.cc-about__hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
@media (min-width: 900px) {
    .cc-about__hero-grid {
        grid-template-columns: 380px 1fr;
    }
}

/* Doctor-Photo: rund, sanfter Glow */
.cc-about__photo {
    position: relative;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    box-shadow:
        0 20px 60px rgba(0, 160, 222, 0.20),
        0 0 0 8px var(--cc-white),
        0 0 0 9px rgba(0, 160, 222, 0.15);
    background: var(--cc-brand-light);
}
.cc-about__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cc-about__photo-badge {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--cc-gradient-accent);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 22px rgba(230, 25, 57, 0.35);
}
.cc-about__photo-badge svg {
    width: 24px !important;
    height: 24px !important;
    color: #fff;
    stroke: #fff;
    fill: none;
}

/* Intro-Texte */
.cc-about__name {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0.5rem 0 0.25rem;
    text-wrap: balance;
}
.cc-about__role {
    font-size: var(--cc-fs-lg);
    color: var(--cc-brand-text);
    font-weight: 600;
    margin: 0 0 var(--cc-sp-4);
}
.cc-about__lead {
    font-size: var(--cc-fs-lg);
    line-height: 1.6;
    color: var(--cc-text-soft);
    margin: 0 0 var(--cc-sp-5);
    max-width: 56ch;
}

/* Sprach-Chips */
.cc-about__lang-chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--cc-sp-2);
}
.cc-about__lang-chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    background: var(--cc-white);
    border: 1px solid var(--cc-border);
    border-radius: 999px;
    font-weight: 600;
    font-size: var(--cc-fs-sm);
    color: var(--cc-ink);
    box-shadow: 0 2px 6px rgba(17, 2, 5, 0.05);
}
.cc-about__lang-chips li span {
    color: var(--cc-text-soft);
    font-weight: 500;
    letter-spacing: 0.05em;
}

/* BIO: Story + Quote */
.cc-about__bio-text {
    max-width: 65ch;
    margin: 0 auto var(--cc-sp-7);
    font-size: var(--cc-fs-lg);
    line-height: 1.75;
    color: var(--cc-ink);
}
.cc-about__bio-text p + p {
    margin-top: var(--cc-sp-4);
}

.cc-about__quote {
    max-width: 65ch;
    margin: 0 auto;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: linear-gradient(135deg, var(--cc-brand-light) 0%, var(--cc-white) 100%);
    border-left: 4px solid var(--cc-brand);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(17, 2, 5, 0.06);
    position: relative;
}
.cc-about__quote::before {
    content: "\201C";
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    font-size: 4rem;
    line-height: 1;
    color: var(--cc-brand);
    opacity: 0.3;
    font-family: Georgia, serif;
}
.cc-about__quote p {
    margin: 0 0 var(--cc-sp-3);
    font-size: var(--cc-fs-xl);
    line-height: 1.5;
    font-weight: 500;
    color: var(--cc-ink);
    font-style: italic;
}
.cc-about__quote footer {
    color: var(--cc-text-soft);
    font-size: var(--cc-fs-sm);
    font-weight: 500;
    font-style: normal;
}

/* CREDENTIAL-Cards */
.cc-card--credential {
    text-align: left;
    padding: var(--cc-sp-6);
}
.cc-card--credential h3 {
    font-size: var(--cc-fs-xl);
    margin: var(--cc-sp-3) 0 var(--cc-sp-2);
}
.cc-card--credential p {
    color: var(--cc-text-soft);
    line-height: 1.6;
    margin: 0;
}

/* STATS-Bar */
.cc-about__stats {
    background: var(--cc-gradient-brand);
    padding-block: clamp(2.5rem, 5vw, 3.5rem);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.cc-about__stats::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(600px 300px at 0% 0%, rgba(255, 255, 255, 0.15) 0%, transparent 60%),
        radial-gradient(600px 300px at 100% 100%, rgba(0, 0, 0, 0.10) 0%, transparent 60%);
    pointer-events: none;
}
.cc-about__stats-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--cc-sp-5);
    text-align: center;
    position: relative;
    z-index: 1;
}
@media (min-width: 768px) {
    .cc-about__stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--cc-sp-6);
    }
}
.cc-about__stats-grid li {
    padding: var(--cc-sp-3) 0;
    border-radius: 12px;
}
.cc-about__stats-grid strong {
    display: block;
    font-family: var(--cc-font-display);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    line-height: 1;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.5rem;
}
.cc-about__stats-grid span {
    display: block;
    font-size: var(--cc-fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.92;
    font-weight: 500;
}

/* APPROACH-Cards */
.cc-card--approach {
    padding: var(--cc-sp-5);
    text-align: left;
}
.cc-card--approach h3 {
    font-size: var(--cc-fs-lg);
    margin: var(--cc-sp-3) 0 var(--cc-sp-2);
}
.cc-card--approach p {
    color: var(--cc-text-soft);
    line-height: 1.55;
    margin: 0;
    font-size: var(--cc-fs-sm);
}

/* Mobile-Tuning */
@media (max-width: 767px) {
    .cc-about__hero-grid {
        text-align: center;
    }
    .cc-about__lang-chips {
        justify-content: center;
    }
    .cc-about__lead {
        margin-inline: auto;
    }
    .cc-about__photo {
        max-width: 240px;
    }
}


/* =========================================================================
   SERVICES HERO (cc-services-hero) – Full-Width Hero mit Praxis-Foto-BG
   ========================================================================= */

.cc-services-hero {
    position: relative;
    min-height: clamp(360px, 50vh, 560px);
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
    background: var(--cc-ink);
    isolation: isolate; /* eigenes Stacking-Context */

    /* Break-Out: Hero füllt die komplette Viewport-Breite,
       unabhängig vom WordPress-Content-Container (.entry-content etc.) */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;

    /* Innere Vignette: dunkelt Ecken ab, fokussiert das Auge auf die Mitte
       Maskiert visuell Beton-Wand, Window-Blinds, hängende Kabel.            */
    box-shadow:
        inset 0  60px 120px rgba(0, 0, 0, 0.35),
        inset 0 -60px 120px rgba(0, 0, 0, 0.45);
}

/* Background-Bild via CSS-Variable – mit "Documentary-to-Hero"-Treatment */
.cc-services-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image: var(--cc-services-hero-bg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    /* OPTIMIERUNG für echte Praxis-Fotos mit visuellem Lärm:
       - blur(3px)        → verschwommen genug um Details (Monitor-Inhalt, Kabel) zu verbergen
       - saturate(0.70)   → kühlt das Bild ab, weniger "schreiende" Farben
       - brightness(0.80) → dunkler für besseren Text-Kontrast
       - contrast(1.05)   → bringt die EKG-Säule besser hervor */
    filter: blur(3px) saturate(0.70) brightness(0.80) contrast(1.05);

    /* Compensate-Scale: damit Blur-Edges nicht weiß durchscheinen */
    transform: scale(1.10);
    transition: transform 12s linear, filter var(--cc-dur-slow) var(--cc-ease);
}
.cc-services-hero:hover::before {
    transform: scale(1.14);
}

/* Dunkler Gradient-Overlay mit Brand-Blau-Tint – verleiht dem kalten
   Praxis-Foto einen warmen Brand-Charakter und sichert Text-Lesbarkeit */
.cc-services-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        /* Brand-Blau-Tint, oben dichter, unten leichter */
        linear-gradient(180deg, rgba(0, 80, 130, 0.55) 0%, rgba(0, 113, 153, 0.40) 100%),
        /* Diagonaler Dunkel-Gradient für Text-Sektion links */
        linear-gradient(110deg, rgba(17, 2, 5, 0.82) 0%, rgba(17, 2, 5, 0.55) 50%, rgba(17, 2, 5, 0.40) 100%),
        /* Roter Akzent-Spot unten rechts – Brand-Wärme */
        radial-gradient(600px 300px at 90% 110%, rgba(230, 25, 57, 0.28), transparent 70%);
}
/* Subtile Brand-Color-Bridge oben für sanften Header-Übergang */
.cc-services-hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    z-index: 2;
    background: linear-gradient(180deg, rgba(0, 30, 50, 0.55) 0%, transparent 100%);
    pointer-events: none;
}

/* Inner Container */
.cc-services-hero__inner {
    position: relative;
    z-index: 2;
    padding-block: clamp(3rem, 8vw, 5rem);
    max-width: 820px;
    text-align: left;
}

.cc-services-hero__title {
    font-size: clamp(2rem, 5vw, 3.75rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0.75rem 0 1rem;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    text-wrap: balance;
}

.cc-services-hero__lead {
    font-size: clamp(1.05rem, 1.8vw, 1.2rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
    max-width: 60ch;
    margin: 0;
}

/* Eyebrow auf dunklem BG: Glassmorphism-Pill */
.cc-services-hero .cc-eyebrow--on-dark {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 0.4rem 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 999px;
    font-size: var(--cc-fs-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.cc-services-hero .cc-eyebrow--on-dark::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cc-accent);
    box-shadow: 0 0 0 0 rgba(230, 25, 57, 0.6);
    animation: cc-pulse 2s ease-out infinite;
}

/* EKG-Übergang zum Karten-Bereich – Heartbeat-Linie als visueller Connector
   Fill = Brand-Blau → Wave wirkt als monochrome Verlängerung des Hero-Bereichs
   statt als hellem Streifen.                                                    */
.cc-services-hero__wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    width: 100%;
    height: 80px;
    z-index: 3;
    color: var(--cc-brand);
    pointer-events: none;
    display: block;
}

/* Services-Sektion mit Hero: Top-Padding reduzieren, weil Wave schon Abstand schafft */
.cc-services.cc-services--has-hero {
    padding-top: clamp(2rem, 4vw, 3rem);
}

@media (prefers-reduced-motion: reduce) {
    .cc-services-hero::before,
    .cc-services-hero:hover::before {
        transform: none;
        transition: none;
    }
}

@media (max-width: 767px) {
    .cc-services-hero {
        min-height: clamp(260px, 50vw, 360px);
        text-align: center;
    }
    .cc-services-hero__inner {
        text-align: center;
    }
    .cc-services-hero__lead {
        margin-inline: auto;
    }
    .cc-services-hero__wave {
        height: 56px;
    }
}


/* =========================================================================
   FOOTER-ROW – kompakter Kontakt-Strip, visuell Teil des dunklen Footers
   ========================================================================= */

.cc-footer-row {
    background: var(--cc-ink);
    color: rgba(255, 255, 255, 0.92);
    padding: clamp(1rem, 2vw, 1.5rem) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    /* Verschmilzt visuell mit dem darunterliegenden dunklen Astra-Footer */
    margin-bottom: -1px;
}
.cc-footer-row__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}
@media (min-width: 900px) {
    .cc-footer-row__inner {
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
    }
}

.cc-footer-row__eyebrow {
    font-family: var(--cc-font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    flex: 0 0 auto;
}

.cc-footer-row__items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1 1 auto;
}
@media (min-width: 900px) {
    .cc-footer-row__items {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0;
        justify-content: flex-end;
    }
}

.cc-footer-row__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--cc-fs-sm);
    line-height: 1.3;
}
@media (min-width: 900px) {
    .cc-footer-row__item {
        padding: 0 1.1rem;
        border-left: 1px solid rgba(255, 255, 255, 0.12);
    }
    .cc-footer-row__item:first-child {
        border-left: 0;
        padding-left: 0;
    }
    .cc-footer-row__item:last-child {
        padding-right: 0;
    }
}

.cc-footer-row__icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    display: grid;
    place-items: center;
}
.cc-footer-row__icon svg {
    width: 16px !important;
    height: 16px !important;
}

.cc-footer-row__label {
    display: none; /* Label nur für Screenreader / breite Screens optional sichtbar */
}
@media (min-width: 1200px) {
    .cc-footer-row__label {
        display: inline;
        color: rgba(255, 255, 255, 0.55);
        font-size: var(--cc-fs-xs);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 600;
        margin-right: 0.4rem;
    }
}

.cc-footer-row__value {
    color: #fff !important;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--cc-dur-fast) var(--cc-ease);
}
.cc-footer-row__value:hover,
.cc-footer-row__value:focus-visible {
    color: var(--cc-brand) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* =========================================================================
   ABOUT-PAGE v2 (cc-about-v2) – Cinematic Hero + Overlap-Bio + Timeline-Credentials
   ========================================================================= */

/* HERO – Full-Bleed (Browser-Width) mit Background-Bild + Dark-Gradient-Overlay
   Treatment parallel zu .cc-services-hero — gleiche visuelle Sprache. */
.cc-about-v2__hero {
    position: relative;
    min-height: clamp(420px, 70vh, 720px);
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
    background: var(--cc-ink);
    isolation: isolate;

    /* Full-Width Break-Out: ignoriert WordPress-Content-Container */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;

    /* Vignette fokussiert Auge auf Bildmitte */
    box-shadow:
        inset 0  60px 120px rgba(0, 0, 0, 0.35),
        inset 0 -60px 120px rgba(0, 0, 0, 0.45);
}
.cc-about-v2__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--cc-about-bg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    /* Documentary-to-Hero-Treatment (gleich wie cc-services-hero) */
    filter: blur(3px) saturate(0.70) brightness(0.80) contrast(1.05);

    /* Compensate-Scale: Blur-Edges nicht durchscheinend */
    transform: scale(1.10);
    transition: transform 12s linear, filter var(--cc-dur-slow) var(--cc-ease);
    z-index: 0;
}
.cc-about-v2__hero:hover::before {
    transform: scale(1.14);
}
.cc-about-v2__hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        /* Brand-Blau-Tint oben dichter, unten leichter */
        linear-gradient(180deg, rgba(0, 80, 130, 0.55) 0%, rgba(0, 113, 153, 0.40) 100%),
        /* Diagonaler Dunkel-Gradient für Text-Lesbarkeit links */
        linear-gradient(110deg, rgba(17, 2, 5, 0.82) 0%, rgba(17, 2, 5, 0.55) 50%, rgba(17, 2, 5, 0.40) 100%),
        /* Brand-Roter Akzent-Spot unten rechts */
        radial-gradient(700px 350px at 90% 110%, rgba(230, 25, 57, 0.25), transparent 70%);
}

/* EKG-Wave am unteren Hero-Rand (analog Services-Hero) */
.cc-about-v2__hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    width: 100%;
    height: 80px;
    z-index: 3;
    color: var(--cc-brand);
    pointer-events: none;
    display: block;
}
@media (max-width: 767px) {
    .cc-about-v2__hero-wave { height: 56px; }
}
.cc-about-v2__hero-inner {
    position: relative;
    z-index: 2;
    padding-block: clamp(4rem, 10vw, 6rem);
    max-width: 880px;
}
.cc-about-v2__hero .cc-eyebrow--on-dark {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 0.45rem 1rem;
}
.cc-about-v2__title {
    font-size: clamp(2.5rem, 7vw, 5rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: #fff;
    margin: 1rem 0 0.5rem;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    text-wrap: balance;
}
.cc-about-v2__role {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    color: #FFA8C0;
    font-weight: 600;
    margin: 0 0 1.5rem;
    letter-spacing: 0.01em;
}
.cc-about-v2__lead {
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
    max-width: 60ch;
    margin: 0 0 2rem;
}

/* Sprach-Chips auf transparentem Glas */
.cc-about-v2__lang-chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.cc-about-v2__lang-chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
}
.cc-about-v2__lang-chips li span {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 500;
    letter-spacing: 0.05em;
}

/* Scroll-Down-Indicator – sitzt über der EKG-Wave */
.cc-about-v2__hero-scroll {
    position: absolute;
    bottom: 110px; /* 80px Wave-Höhe + 30px Abstand */
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}
@media (max-width: 767px) {
    .cc-about-v2__hero-scroll {
        bottom: 80px; /* 56px Mobile-Wave-Höhe + Puffer */
    }
}
.cc-about-v2__hero-scroll span {
    display: block;
    width: 24px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-radius: 14px;
    position: relative;
}
.cc-about-v2__hero-scroll span::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 2px;
    animation: cc-scroll-bounce 1.8s ease-in-out infinite;
}
@keyframes cc-scroll-bounce {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.9; }
    50%      { transform: translate(-50%, 14px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cc-about-v2__hero-scroll span::after { animation: none; }
    .cc-about-v2__hero::before,
    .cc-about-v2__hero:hover::before { transform: none; transition: none; }
}

/* BIO – Foto links überlappt Hero leicht, Text rechts */
.cc-about-v2__bio {
    background: var(--cc-white);
    padding-block: clamp(3rem, 7vw, 6rem);
    position: relative;
    z-index: 3;
}
.cc-about-v2__bio-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}
@media (min-width: 920px) {
    .cc-about-v2__bio-grid {
        grid-template-columns: 380px 1fr;
        /* Kein negativer Top-Margin mehr – EKG-Wave füllt den Übergang */
        margin-top: 0;
    }
}

.cc-about-v2__bio-photo {
    position: relative;
    max-width: 380px;
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 30px 80px rgba(17, 2, 5, 0.25),
        0 0 0 6px var(--cc-white);
    aspect-ratio: 4 / 5;
}
.cc-about-v2__bio-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cc-about-v2__bio-badge {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: var(--cc-gradient-accent);
    color: #fff;
    border-radius: 16px;
    padding: 0.75rem 1.1rem;
    text-align: center;
    box-shadow: 0 12px 30px rgba(230, 25, 57, 0.40);
    line-height: 1;
}
.cc-about-v2__bio-badge strong {
    display: block;
    font-family: var(--cc-font-display);
    font-size: 1.6rem;
    font-weight: 800;
}
.cc-about-v2__bio-badge span {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.2rem;
    opacity: 0.92;
}

.cc-about-v2__bio-content h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0.75rem 0 1.5rem;
    text-wrap: balance;
}
.cc-about-v2__bio-p {
    font-size: var(--cc-fs-lg);
    line-height: 1.75;
    color: var(--cc-text);
    margin: 0 0 1.25rem;
    max-width: 60ch;
}
.cc-about-v2__quote {
    margin: 2rem 0 0;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, var(--cc-brand-light) 0%, var(--cc-white) 100%);
    border-left: 4px solid var(--cc-brand);
    border-radius: 0 16px 16px 0;
    position: relative;
}
.cc-about-v2__quote::before {
    content: "\201C";
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 4rem;
    line-height: 1;
    color: var(--cc-brand);
    opacity: 0.25;
    font-family: Georgia, serif;
}
.cc-about-v2__quote p {
    margin: 0 0 0.5rem;
    font-style: italic;
    font-size: var(--cc-fs-lg);
    line-height: 1.55;
    color: var(--cc-ink);
    font-weight: 500;
}
.cc-about-v2__quote footer {
    color: var(--cc-text-soft);
    font-size: var(--cc-fs-sm);
    font-style: normal;
    font-weight: 500;
}

/* STATS – Brand-Gradient Bar */
.cc-about-v2__stats {
    background: var(--cc-gradient-brand);
    padding-block: clamp(2.5rem, 5vw, 3.5rem);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.cc-about-v2__stats::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(600px 300px at 0% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 60%),
        radial-gradient(600px 300px at 100% 100%, rgba(0, 0, 0, 0.12) 0%, transparent 60%);
    pointer-events: none;
}
.cc-about-v2__stats-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    text-align: center;
    position: relative;
    z-index: 1;
}
@media (min-width: 768px) {
    .cc-about-v2__stats-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}
.cc-about-v2__stats-grid strong {
    display: block;
    font-family: var(--cc-font-display);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    line-height: 1;
    font-weight: 800;
    margin-bottom: 0.5rem;
}
.cc-about-v2__stats-grid span {
    display: block;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.92;
    font-weight: 500;
}

/* CREDENTIALS – Cards mit Nummerierung 01/02/03 */
.cc-about-v2__credentials {
    background: var(--cc-bg);
    padding-block: clamp(3rem, 7vw, 5rem);
}
.cc-about-v2__credentials .cc-section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.cc-about-v2__cred-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 820px) {
    .cc-about-v2__cred-grid { grid-template-columns: repeat(3, 1fr); }
}
.cc-about-v2__cred-item {
    position: relative;
    background: var(--cc-white);
    padding: 2.5rem 1.75rem 1.75rem;
    border-radius: 18px;
    border: 1px solid var(--cc-border);
    box-shadow: 0 8px 28px rgba(17, 2, 5, 0.06);
    transition: transform var(--cc-dur) var(--cc-ease),
                box-shadow var(--cc-dur) var(--cc-ease);
    overflow: hidden;
}
.cc-about-v2__cred-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--cc-gradient-brand);
}
.cc-about-v2__cred-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 52px rgba(17, 2, 5, 0.12);
}
.cc-about-v2__cred-num {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    font-family: var(--cc-font-display);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: var(--cc-brand);
    opacity: 0.10;
}
.cc-about-v2__cred-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--cc-brand-light);
    color: var(--cc-brand-text);
    display: grid;
    place-items: center;
    margin-bottom: 1.25rem;
}
.cc-about-v2__cred-icon svg {
    width: 28px !important;
    height: 28px !important;
    color: var(--cc-brand-text);
    stroke: var(--cc-brand-text);
    fill: none;
}
.cc-about-v2__cred-item h3 {
    font-size: var(--cc-fs-xl);
    margin: 0 0 0.75rem;
}
.cc-about-v2__cred-item p {
    color: var(--cc-text-soft);
    line-height: 1.6;
    margin: 0;
}

/* APPROACH – Pinned-Intro links, Cards rechts */
.cc-about-v2__approach {
    background: var(--cc-white);
    padding-block: clamp(3rem, 7vw, 6rem);
}
.cc-about-v2__approach-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}
@media (min-width: 960px) {
    .cc-about-v2__approach-grid {
        grid-template-columns: 380px 1fr;
        gap: 4rem;
        align-items: start;
    }
    .cc-about-v2__approach-intro {
        position: sticky;
        top: 100px;
    }
}
.cc-about-v2__approach-intro h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0.75rem 0 1rem;
    text-wrap: balance;
}
.cc-about-v2__approach-intro p {
    color: var(--cc-text-soft);
    font-size: var(--cc-fs-lg);
    line-height: 1.6;
    margin: 0;
}
.cc-about-v2__approach-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1rem;
}
.cc-about-v2__approach-item {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 1.25rem;
    padding: 1.5rem;
    background: var(--cc-bg);
    border-radius: 16px;
    border-left: 4px solid var(--cc-brand);
    transition: background var(--cc-dur) var(--cc-ease),
                transform var(--cc-dur) var(--cc-ease);
}
.cc-about-v2__approach-item:hover {
    background: var(--cc-brand-light);
    transform: translateX(4px);
}
.cc-about-v2__approach-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--cc-white);
    color: var(--cc-brand-text);
    display: grid;
    place-items: center;
    box-shadow: 0 4px 12px rgba(0, 160, 222, 0.15);
}
.cc-about-v2__approach-icon svg {
    width: 28px !important;
    height: 28px !important;
    color: var(--cc-brand-text);
    stroke: var(--cc-brand-text);
    fill: none;
}
.cc-about-v2__approach-body h3 {
    font-size: var(--cc-fs-lg);
    margin: 0 0 0.4rem;
}
.cc-about-v2__approach-body p {
    margin: 0;
    color: var(--cc-text-soft);
    line-height: 1.55;
    font-size: var(--cc-fs-base);
}

/* MOBILE-Anpassungen */
@media (max-width: 919px) {
    .cc-about-v2__hero {
        min-height: clamp(360px, 60vh, 560px);
        text-align: center;
    }
    .cc-about-v2__hero-inner {
        padding-block: 3.5rem;
    }
    .cc-about-v2__lang-chips {
        justify-content: center;
    }
    .cc-about-v2__bio-photo {
        max-width: 280px;
    }
    .cc-about-v2__approach-item {
        grid-template-columns: 48px 1fr;
        gap: 1rem;
        padding: 1.25rem;
    }
    .cc-about-v2__approach-icon {
        width: 48px;
        height: 48px;
    }
}


/* CTA – Abschluss-Sektion auf Brand-Gradient */
.cc-about-v2__cta {
    background: var(--cc-gradient-brand);
    padding-block: clamp(3.5rem, 8vw, 6rem);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cc-about-v2__cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(700px 350px at 10% 0%, rgba(255, 255, 255, 0.12) 0%, transparent 60%),
        radial-gradient(700px 350px at 90% 100%, rgba(0, 0, 0, 0.15) 0%, transparent 60%);
    pointer-events: none;
}
.cc-about-v2__cta-inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin-inline: auto;
}
.cc-about-v2__cta .cc-eyebrow--on-dark {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.20);
    padding: 0.45rem 1rem;
}
.cc-about-v2__cta-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 1rem 0 0.75rem;
    text-wrap: balance;
}
.cc-about-v2__cta-lead {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 2.5rem;
}
.cc-about-v2__cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

/* Weißer Primär-Button (auf Brand-Blau-Hintergrund) */
.cc-btn--white {
    background: #fff;
    color: var(--cc-brand-text);
    border: 2px solid #fff;
    padding: 0.85rem 2rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: var(--cc-fs-base);
    text-decoration: none;
    display: inline-block;
    transition: background var(--cc-dur) var(--cc-ease),
                color var(--cc-dur) var(--cc-ease),
                transform var(--cc-dur) var(--cc-ease);
}
.cc-btn--white:hover {
    background: var(--cc-brand-light);
    color: var(--cc-brand-text);
    transform: translateY(-2px);
}

/* Outline-Weiß-Button */
.cc-btn--outline-white {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.65);
    padding: 0.85rem 2rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: var(--cc-fs-base);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: border-color var(--cc-dur) var(--cc-ease),
                background var(--cc-dur) var(--cc-ease),
                transform var(--cc-dur) var(--cc-ease);
}
.cc-btn--outline-white:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.10);
    transform: translateY(-2px);
}
.cc-about-v2__cta-phone {
    font-size: var(--cc-fs-sm);
    font-weight: 500;
    opacity: 0.85;
}
@media (max-width: 599px) {
    .cc-about-v2__cta-actions {
        flex-direction: column;
    }
    .cc-btn--white,
    .cc-btn--outline-white {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================================================
   CONTACT-PAGE (cc-contact-page) – modernes Layout
   ========================================================================= */

/* HERO – Full-Bleed (Browser-Width) mit Background-Bild + Dark-Gradient-Overlay
   Treatment parallel zu .cc-services-hero und .cc-about-v2__hero. */
.cc-contact-page__hero {
    position: relative;
    min-height: clamp(360px, 50vh, 560px);
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
    background: var(--cc-ink);
    isolation: isolate;
    text-align: left;

    /* Full-Width Break-Out: ignoriert WordPress-Content-Container */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;

    /* Vignette */
    box-shadow:
        inset 0  60px 120px rgba(0, 0, 0, 0.35),
        inset 0 -60px 120px rgba(0, 0, 0, 0.45);
}
.cc-contact-page__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--cc-contact-hero-bg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: blur(3px) saturate(0.70) brightness(0.80) contrast(1.05);
    transform: scale(1.10);
    transition: transform 12s linear, filter var(--cc-dur-slow) var(--cc-ease);
}
.cc-contact-page__hero:hover::before {
    transform: scale(1.14);
}
.cc-contact-page__hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(0, 80, 130, 0.55) 0%, rgba(0, 113, 153, 0.40) 100%),
        linear-gradient(110deg, rgba(17, 2, 5, 0.82) 0%, rgba(17, 2, 5, 0.55) 50%, rgba(17, 2, 5, 0.40) 100%),
        radial-gradient(700px 350px at 90% 110%, rgba(230, 25, 57, 0.25), transparent 70%);
}
.cc-contact-page__hero-inner {
    position: relative;
    z-index: 2;
    padding-block: clamp(3rem, 8vw, 5rem);
    max-width: 820px;
}
.cc-contact-page__hero-title {
    font-size: clamp(2rem, 5vw, 3.75rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0.75rem 0 1rem;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    text-wrap: balance;
}
.cc-contact-page__hero-lead {
    font-size: clamp(1.05rem, 1.8vw, 1.2rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
    max-width: 60ch;
    margin: 0;
}

/* EKG-Wave am unteren Hero-Rand (Brand-Blau) */
.cc-contact-page__hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    width: 100%;
    height: 80px;
    z-index: 3;
    color: var(--cc-brand);
    pointer-events: none;
    display: block;
}
@media (max-width: 767px) {
    .cc-contact-page__hero { text-align: center; }
    .cc-contact-page__hero-inner { text-align: center; }
    .cc-contact-page__hero-lead { margin-inline: auto; }
    .cc-contact-page__hero-wave { height: 56px; }
}

/* QUICK-ACTIONS – 3 Cards (Anrufen · E-Mail · Buchen) */
.cc-contact-page__quick {
    padding-block: clamp(1.5rem, 4vw, 3rem);
    background: var(--cc-bg);
}
.cc-contact-quick {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cc-sp-3);
}
@media (min-width: 720px) {
    .cc-contact-quick { grid-template-columns: repeat(3, 1fr); }
}
.cc-contact-quick__card {
    display: flex;
    align-items: center;
    gap: var(--cc-sp-3);
    padding: var(--cc-sp-5);
    background: var(--cc-white);
    border: 1px solid var(--cc-border);
    border-radius: 16px;
    text-decoration: none;
    color: var(--cc-ink);
    box-shadow: 0 2px 12px rgba(17, 2, 5, 0.04);
    transition: transform var(--cc-dur) var(--cc-ease),
                box-shadow var(--cc-dur) var(--cc-ease),
                border-color var(--cc-dur) var(--cc-ease);
}
.cc-contact-quick__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(17, 2, 5, 0.10);
    border-color: var(--cc-brand);
}
.cc-contact-quick__icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--cc-brand-light);
    color: var(--cc-brand-text);
    display: grid;
    place-items: center;
    transition: background var(--cc-dur) var(--cc-ease),
                color var(--cc-dur) var(--cc-ease);
}
.cc-contact-quick__icon svg {
    width: 26px !important;
    height: 26px !important;
}
.cc-contact-quick__card:hover .cc-contact-quick__icon {
    background: var(--cc-brand);
    color: #fff;
}
.cc-contact-quick__body {
    flex: 1 1 auto;
    min-width: 0;
}
.cc-contact-quick__label {
    display: block;
    font-size: var(--cc-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cc-text-soft);
    font-weight: 600;
    margin-bottom: 0.15rem;
}
.cc-contact-quick__value {
    display: block;
    font-family: var(--cc-font-display);
    font-size: var(--cc-fs-lg);
    font-weight: 700;
    color: var(--cc-ink);
    line-height: 1.2;
    word-break: break-all;
}
.cc-contact-quick__hint {
    display: block;
    font-size: var(--cc-fs-sm);
    color: var(--cc-text-soft);
    margin-top: 0.15rem;
}

/* Primary Quick-Action: roter Akzent für "Buchen" */
.cc-contact-quick__card--primary {
    background: linear-gradient(135deg, var(--cc-accent) 0%, var(--cc-accent-dark) 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--cc-shadow-accent);
}
.cc-contact-quick__card--primary .cc-contact-quick__icon {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.cc-contact-quick__card--primary .cc-contact-quick__label,
.cc-contact-quick__card--primary .cc-contact-quick__hint {
    color: rgba(255, 255, 255, 0.85);
}
.cc-contact-quick__card--primary .cc-contact-quick__value {
    color: #fff;
}
.cc-contact-quick__card--primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 52px rgba(230, 25, 57, 0.45);
    border-color: transparent;
}
.cc-contact-quick__card--primary:hover .cc-contact-quick__icon {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}

/* DETAIL-Grid: Adresse + Öffnungszeiten */
.cc-contact-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cc-sp-5);
}
@media (min-width: 820px) {
    /* Mid: 2 Spalten – dritte Card landet in zweiter Reihe (zentriert) */
    .cc-contact-details-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
    /* Wide: alle 3 Cards (Adresse · E-Mail · Sprechzeiten) nebeneinander */
    .cc-contact-details-grid { grid-template-columns: repeat(3, 1fr); }
}
.cc-contact-detail-card {
    background: var(--cc-white);
    border: 1px solid var(--cc-border);
    border-radius: 16px;
    padding: clamp(1.25rem, 3vw, 2rem);
    box-shadow: 0 4px 18px rgba(17, 2, 5, 0.06);
}
.cc-contact-detail-card__head {
    display: flex;
    align-items: center;
    gap: var(--cc-sp-3);
    margin-bottom: var(--cc-sp-4);
}
.cc-contact-detail-card__icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--cc-brand-light);
    color: var(--cc-brand-text);
    display: grid;
    place-items: center;
}
.cc-contact-detail-card__icon svg {
    width: 24px !important;
    height: 24px !important;
}
.cc-contact-detail-card__head h2 {
    font-size: var(--cc-fs-xl);
    margin: 0;
}
.cc-contact-detail-card__body {
    font-size: var(--cc-fs-base);
    line-height: 1.7;
    color: var(--cc-ink);
    margin: 0;
    font-style: normal;
}
.cc-contact-detail-card__link {
    display: inline-block;
    margin-top: var(--cc-sp-3);
    color: var(--cc-brand-text);
    font-weight: 600;
    text-decoration: none;
}
.cc-contact-detail-card__link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}
/* E-Mail-Card – prominenter Mailto-Link + Hint-Text */
.cc-contact-detail-card__email {
    font-style: normal;
    margin: 0;
}
.cc-contact-detail-card__mail-link {
    display: inline-block;
    font-family: var(--cc-font-display);
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 700;
    color: var(--cc-brand-text);
    text-decoration: none;
    word-break: break-all;
    line-height: 1.3;
    transition: color var(--cc-dur-fast) var(--cc-ease);
}
.cc-contact-detail-card__mail-link:hover {
    color: var(--cc-brand-dark);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.cc-contact-detail-card__email-hint {
    margin: 0.75rem 0 0;
    color: var(--cc-text-soft);
    font-size: var(--cc-fs-sm);
    line-height: 1.5;
}

/* Öffnungszeiten-Card erbt das Standard-cc-hours-Layout, aber ohne den
   zusätzlichen Icon-Wrapper, da wir bereits einen Card-Header haben. */
.cc-contact-detail-card__hours .cc-info {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    display: block;
    border-radius: 0;
}
.cc-contact-detail-card__hours .cc-info__icon,
.cc-contact-detail-card__hours .cc-info h4 {
    display: none; /* Wir haben bereits eine Card-Head-Überschrift */
}
.cc-contact-detail-card__hours .cc-hours-table {
    width: 100%;
    margin: 0;
}
.cc-contact-detail-card__hours .cc-hours-table td {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--cc-divider);
}
.cc-contact-detail-card__hours .cc-hours-table tr:last-child td {
    border-bottom: 0;
}
.cc-contact-detail-card__hours .cc-hours-table td:first-child {
    color: var(--cc-text-soft);
    font-weight: 500;
}
.cc-contact-detail-card__hours .cc-hours-table td:last-child {
    text-align: right;
    font-weight: 600;
    color: var(--cc-ink);
}
.cc-contact-detail-card__hours .cc-hours-table tr.is-today td {
    color: var(--cc-accent);
}
.cc-contact-detail-card__hours .cc-hours-table tr.is-today td:first-child {
    color: var(--cc-accent);
    font-weight: 700;
}

/* KARTE – Full-Width, Soft-Shadow oben/unten */
.cc-contact-page__map {
    position: relative;
    background: var(--cc-bg);
    box-shadow:
        inset 0 8px 18px -8px rgba(17, 2, 5, 0.10),
        inset 0 -8px 18px -8px rgba(17, 2, 5, 0.10);
}
.cc-contact-page__map iframe {
    display: block;
    width: 100%;
    height: clamp(320px, 50vw, 480px);
    filter: saturate(0.95) contrast(1.02);
}

/* VISIT-INFO Cards */
.cc-card--visit {
    padding: var(--cc-sp-5);
    text-align: left;
}
.cc-card--visit h3 {
    font-size: var(--cc-fs-lg);
    margin: var(--cc-sp-3) 0 var(--cc-sp-2);
}
.cc-card--visit p {
    color: var(--cc-text-soft);
    line-height: 1.55;
    margin: 0;
    font-size: var(--cc-fs-sm);
}


/* =========================================================================
   Doctena Reviews-Widget – ins Brand-Design integriert
   ========================================================================= */

.cc-doctena {
    max-width: 980px;
    margin: 0 auto;
    background: var(--cc-white);
    border: 1px solid var(--cc-border);
    border-top: 4px solid var(--cc-brand);
    border-radius: 16px;
    padding: clamp(1.25rem, 3vw, 2rem);
    box-shadow: var(--cc-shadow);
}

/* Fallback-Text, wenn Doctena-Widget noch lädt */
.cc-doctena__fallback {
    color: var(--cc-text-soft);
    text-align: center;
    margin: 1.5rem 0;
    font-style: italic;
}

/* Doctena-eigene Klassen leicht entschärfen, damit sie sich harmonisch ins
   CardioCare-Design einfügen (Argentum Sans, Brand-Farben). */
.cc-doctena [data-toggle="doc-reviews"],
.cc-doctena .doc-reviews-container,
.cc-doctena .doctena-reviews {
    font-family: var(--cc-font-sans) !important;
    color: var(--cc-ink);
}

/* Sterne in Brand-Gelb statt Doctena-Default */
.cc-doctena .star,
.cc-doctena [class*="star"] svg,
.cc-doctena [class*="star"]::before {
    color: #F5B400 !important;
    fill: #F5B400 !important;
}

/* Links innerhalb des Widgets in Brand-Blau */
.cc-doctena a {
    color: var(--cc-brand-text);
}
.cc-doctena a:hover { color: var(--cc-brand-dark); }

/* Mobile: etwas weniger Innenabstand */
@media (max-width: 600px) {
    .cc-doctena {
        padding: 1rem;
        border-radius: 12px;
    }
}


/* =========================================================================
   Contact-Card – E-Mail-Block auf der Kontakt-Seite
   ========================================================================= */

/* Wrapper – steuert Layout (Single-Card vs. 3-Spalten-Grid) */
.cc-contact-cards {
    margin: 0 0 2rem 0;
}
.cc-contact-cards--grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .cc-contact-cards--grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.cc-contact-card {
    background: linear-gradient(135deg, var(--cc-brand-light) 0%, #fff 100%);
    border: 1px solid var(--cc-border);
    border-left: 4px solid var(--cc-brand);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 24px rgba(17, 2, 5, 0.06);
    height: 100%;
}
.cc-contact-cards--grid .cc-contact-card {
    margin: 0;
}
.cc-contact-cards:not(.cc-contact-cards--grid) .cc-contact-card {
    margin: 0 0 2rem 0;
}
.cc-contact-card__row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.cc-contact-card__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--cc-brand);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: var(--cc-shadow-brand);
}
.cc-contact-card__label {
    font-size: var(--cc-fs-sm);
    font-weight: 600;
    color: var(--cc-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.2rem;
}
.cc-contact-card__link {
    font-family: var(--cc-font-display);
    font-size: var(--cc-fs-xl);
    font-weight: 700;
    color: var(--cc-brand-text);
    text-decoration: none;
    word-break: break-all;
    transition: color var(--cc-dur-fast) var(--cc-ease);
}
.cc-contact-card__link:hover {
    color: var(--cc-brand-dark);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.cc-contact-card__hint {
    font-size: var(--cc-fs-sm);
    color: var(--cc-text-soft);
    margin: 0.4rem 0 0;
}
.cc-contact-card__addr {
    margin: 0;
    line-height: 1.55;
    color: var(--cc-ink);
    font-size: var(--cc-fs-md);
}


/* =========================================================================
   Scroll-to-Top Button (Astra) – an Brand-Design angepasst
   ========================================================================= */

#ast-scroll-top,
.ast-scroll-to-top-button,
button#ast-scroll-top {
    /* Form & Größe */
    width: 48px !important;
    height: 48px !important;
    border-radius: 999px !important;
    border: 0 !important;
    padding: 0 !important;

    /* Brand-Gradient */
    background: var(--cc-gradient-brand) !important;
    color: #fff !important;

    /* Soft Shadow + Glossy Inset */
    box-shadow:
        0 10px 28px rgba(0, 160, 222, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        inset 0 -1px 0 rgba(0, 0, 0, 0.10) !important;

    /* Position */
    position: fixed !important;
    right: clamp(1rem, 3vw, 1.75rem) !important;
    bottom: clamp(1rem, 3vw, 1.75rem) !important;
    z-index: var(--cc-z-sticky) !important;

    /* Layout für Icon */
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    cursor: pointer !important;

    /* Smooth Transitions */
    transition:
        transform var(--cc-dur) var(--cc-ease),
        box-shadow var(--cc-dur) var(--cc-ease),
        opacity var(--cc-dur) var(--cc-ease) !important;

    /* Astra-Default-Hintergrundbild/-Form überschreiben */
    background-image: var(--cc-gradient-brand) !important;
}

/* Auf Mobile etwas tiefer, um nicht mit der Mobile-CTA-Bar zu kollidieren */
@media (max-width: 767px) {
    #ast-scroll-top,
    .ast-scroll-to-top-button,
    button#ast-scroll-top {
        bottom: 92px !important; /* über der sticky Mobile-CTA */
        right: 1rem !important;
        width: 44px !important;
        height: 44px !important;
    }
}

/* Hover: leichter Lift + stärkerer Schatten */
#ast-scroll-top:hover,
.ast-scroll-to-top-button:hover,
button#ast-scroll-top:hover {
    transform: translateY(-3px) !important;
    box-shadow:
        0 16px 36px rgba(0, 160, 222, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        inset 0 -1px 0 rgba(0, 0, 0, 0.10) !important;
}

#ast-scroll-top:active,
.ast-scroll-to-top-button:active {
    transform: translateY(0) scale(0.95) !important;
    transition-duration: 80ms !important;
}

#ast-scroll-top:focus-visible {
    /* Weißer Outline mit dunklem Schatten → kontrastiert gegen blauen Button UND helles Backdrop */
    outline: 3px solid #FFFFFF !important;
    outline-offset: 3px !important;
    box-shadow:
        0 0 0 6px var(--cc-brand-text),
        0 10px 28px rgba(0, 160, 222, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        inset 0 -1px 0 rgba(0, 0, 0, 0.10) !important;
}

/* Pfeil-Icon innen – egal ob <i>, <svg>, ::before oder content */
#ast-scroll-top i,
#ast-scroll-top svg,
.ast-scroll-to-top-button i,
.ast-scroll-to-top-button svg {
    color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important;
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
    display: block !important;
    transition: transform var(--cc-dur) var(--cc-ease) !important;
}

#ast-scroll-top:hover i,
#ast-scroll-top:hover svg,
.ast-scroll-to-top-button:hover i,
.ast-scroll-to-top-button:hover svg {
    transform: translateY(-2px) !important;
}

/* Fallback-Chevron, falls Astra weder Icon noch SVG rendert */
#ast-scroll-top:empty::before,
.ast-scroll-to-top-button:empty::before {
    content: "";
    width: 12px;
    height: 12px;
    border-top: 2.5px solid #fff;
    border-right: 2.5px solid #fff;
    transform: rotate(-45deg);
    margin-top: 4px;
    transition: transform var(--cc-dur) var(--cc-ease);
}
#ast-scroll-top:empty:hover::before {
    transform: rotate(-45deg) translate(-2px, 2px);
}

/* Eckige weiße Artefakte verbergen, die Astra manchmal mit Plain-Square rendert */
#ast-scroll-top::after,
.ast-scroll-to-top-button::after {
    content: none !important;
}


/* =========================================================================
   Medical Premium v3 – Transparent Header, Glossy Buttons, Floating Cards
   ========================================================================= */

/* ─────────────────────────────────────────────────────────────────────────
   Navigation – Gradient underline & dropdown glass panel
   ───────────────────────────────────────────────────────────────────────── */

.main-navigation ul li > a::after {
    background: linear-gradient(90deg, var(--cc-brand) 0%, var(--cc-accent) 100%);
    border-radius: 2px;
}

.main-navigation ul li.current-menu-ancestor > a {
    color: var(--cc-brand-text) !important;
}
.main-navigation ul li.current-menu-ancestor > a::after {
    transform: scaleX(1);
}

/* Dropdown – frosted glass card */
.main-navigation .sub-menu,
.ast-nav-menu .sub-menu {
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--cc-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(17, 2, 5, 0.10), 0 2px 8px rgba(17, 2, 5, 0.06) !important;
    padding: 0.5rem !important;
    overflow: hidden;
}
.main-navigation .sub-menu li a,
.ast-nav-menu .sub-menu li a {
    border-radius: 8px !important;
    margin: 0 !important;
    padding: 0.6rem 1rem !important;
    transition: background var(--cc-dur-fast) var(--cc-ease),
                color var(--cc-dur-fast) var(--cc-ease) !important;
}
.main-navigation .sub-menu li a::after,
.ast-nav-menu .sub-menu li a::after {
    display: none !important;
}
.main-navigation .sub-menu li a:hover,
.ast-nav-menu .sub-menu li a:hover {
    background: var(--cc-brand-light) !important;
    color: var(--cc-brand-text) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Buttons – Glassy specular highlight + inset depth shadow
   ───────────────────────────────────────────────────────────────────────── */

.cc-btn,
.wp-block-button__link,
.ast-custom-button {
    position: relative;
    overflow: hidden;
}

/* Specular gloss layer – top half of button */
.cc-btn--primary::before,
.cc-btn--accent::before,
.wp-block-button__link::before {
    content: "";
    position: absolute;
    top: 0;
    left: -5%;
    width: 110%;
    height: 52%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.30) 0%,
        rgba(255, 255, 255, 0.04) 100%
    );
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    pointer-events: none;
    transition: opacity var(--cc-dur) var(--cc-ease);
}

/* Inset shadow gives the "raised glass" feeling */
.cc-btn--primary,
.wp-block-button__link {
    box-shadow:
        var(--cc-shadow-accent),
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

.cc-btn--primary:hover,
.wp-block-button__link:hover {
    box-shadow:
        0 18px 44px rgba(230, 25, 57, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

.cc-btn--accent {
    box-shadow:
        var(--cc-shadow-accent),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

.cc-btn--accent:hover {
    box-shadow:
        0 18px 44px rgba(230, 25, 57, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

/* Physical press feedback */
.cc-btn:active,
.wp-block-button__link:active {
    transform: translateY(1px) scale(0.985) !important;
    transition-duration: 80ms !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Service Cards – Floating 3D-Hover, exakt 12px border-radius
   ───────────────────────────────────────────────────────────────────────── */

.cc-card {
    border-radius: 16px;
    border-top: 4px solid var(--cc-brand);
    box-shadow:
        0 1px 3px rgba(17, 2, 5, 0.04),
        0 8px 24px rgba(17, 2, 5, 0.07);
    border-left-color: rgba(236, 236, 239, 0.65);
    border-right-color: rgba(236, 236, 239, 0.65);
    border-bottom-color: rgba(236, 236, 239, 0.65);
}

.cc-card:hover {
    transform: translateY(-6px);
    border-top-color: var(--cc-accent);
    box-shadow:
        0 4px 8px rgba(17, 2, 5, 0.05),
        0 24px 52px rgba(17, 2, 5, 0.11),
        0 0 0 1px rgba(0, 160, 222, 0.14);
}

/* Media-Cards: blaue Top-Border auf das oberste Element vorziehen, sonst hängt sie
   über dem Bild und sieht abgeschnitten aus */
.cc-card--media {
    border-top: 0;
    position: relative;
}
.cc-card--media::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--cc-brand);
    z-index: 3;
    transition: background var(--cc-dur) var(--cc-ease);
}
.cc-card--media:hover::after { background: var(--cc-accent); }

/* Consistent 16 px (radius-md laut Spec) für alle Card-Elemente */
.cc-gallery__item { border-radius: 16px; }
.cc-info          { border-radius: 16px; }
.cc-testimonial   { border-radius: 16px; }
.cc-faq details   { border-radius: 16px; }
.cc-hero__card    { border-radius: 16px; }
.cc-hero__badge   { border-radius: 12px; }
.cc-cta-strip     { border-radius: 16px; }
.cc-doctor__photo { border-radius: 16px; }

/* ─────────────────────────────────────────────────────────────────────────
   Mobile – Patienten-optimiert: große Klickflächen, lesbare Typografie
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

    /* 48px WCAG minimum tap target for all interactive elements */
    .main-navigation a,
    .cc-btn,
    .wp-block-button__link,
    button,
    [role="button"],
    input[type="submit"],
    input[type="button"] {
        min-height: 48px;
    }

    /* Phone links – extra prominent for patients */
    a[href^="tel:"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 56px;
        padding: 0.75rem 1.5rem;
        font-size: 1.05rem;
        font-weight: 700;
        border-radius: 12px;
        background: var(--cc-brand-light);
        color: var(--cc-brand-text) !important;
        gap: 0.5rem;
        transition: background var(--cc-dur-fast) var(--cc-ease);
    }
    a[href^="tel:"]:hover {
        background: var(--cc-brand);
        color: #fff !important;
    }

    /* Hero centered on mobile */
    .cc-hero {
        text-align: center;
        padding-block: clamp(2rem, 8vw, 3.5rem);
    }
    .cc-hero__ctas,
    .cc-hero__trust {
        justify-content: center;
    }
    .cc-hero__lead {
        margin-inline: auto;
    }

    /* Cards – generous internal padding for thumb use */
    .cc-card {
        padding: var(--cc-sp-5) var(--cc-sp-4);
    }

    /* Sections – tighter on mobile to reduce scroll fatigue */
    .cc-section {
        padding-block: 2.5rem;
    }

    /* CTA strip – stacked and centered */
    .cc-cta-strip {
        text-align: center;
    }
    .cc-cta-strip__actions {
        justify-content: center !important;
    }

    /* Floating mobile CTA bar – bigger hit area */
    .cc-mobile-cta {
        padding: 0.875rem 1.25rem;
    }
    .cc-mobile-cta .cc-btn,
    .cc-mobile-cta a {
        font-size: 1.05rem;
        padding: 0.95rem 1.5rem;
        min-height: 56px;
        width: 100%;
        justify-content: center;
    }

    /* Form inputs – 18px font prevents iOS auto-zoom */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    textarea,
    select {
        font-size: 1rem;
        padding: 1rem 1.1rem;
        min-height: 48px;
    }

    /* Headings – scale down gracefully */
    h2 { font-size: clamp(1.6rem, 5vw, 2rem); }
    h3 { font-size: clamp(1.25rem, 4vw, 1.6rem); }
}

/* Tablet – subtle hero centering tweak */
@media (min-width: 768px) and (max-width: 991px) {
    .cc-hero {
        text-align: center;
    }
    .cc-hero__ctas,
    .cc-hero__trust {
        justify-content: center;
    }
    .cc-hero__lead {
        margin-inline: auto;
    }
}

/* =========================================================================
   Print-Styles (für Rezepte/Patientenseiten)
   ========================================================================= */

@media print {
    .main-header-bar, .ast-above-header,
    .site-footer, .cc-mobile-cta, .cc-cta-strip { display: none !important; }
    body { background: #fff !important; color: #000; }
    a { color: #000; text-decoration: underline; }
}