/* ===== FARBEN – nur hier ändern ===== */
:root {
    --primary: #006580;
    --primary-dark: #02475A;
    --primary-transparent: #87ABB474;
    --ecru: #F7F5F3;
    --secondary: #006580;
    --secondary-dark: #09596F;
    --white: #ffffff;
    --white-hover: #D6D3CE;
    --text: #42463F;
}

.c-btn { background-color: var(--primary); }
.c-btn:hover { background-color: var(--primary-dark); }
.c-btn--white {
    background-color: var(--white);
    color: var(--primary);
}
.c-btn--white:hover {
    background-color: var(--white-hover);
}

.u-bgcolor-primary { background-color: var(--primary) !important; }
.u-color-primary { color: var(--primary) !important; }
.u-bgcolor-primary-transparent,
.media-text.u-bgcolor-gray-light,
.media-text.u-bgcolor-ecru,
.text.u-bgcolor-gray-light,
.text.u-bgcolor-ecru { background-color: var(--primary-transparent) !important; }

/* Header */
header > .u-bgcolor-white,
header > .u-bgcolor-primary-transparent { background-color: var(--white) !important; }

/* Header-Icons: Burger, Telefon, Termin etc. */
header [data-icon]:before { color: var(--primary); }
.nav__toggleInner,
.nav__toggleInner::before,
.nav__toggleInner::after { background-color: var(--primary); }

/* Überschriften */
h1, .h1,
h2, .h2,
h3, .h3 { color: var(--primary); }

/* Ausnahme: auf transparentem Hintergrund dunkel wie der Fließtext */
.u-bgcolor-primary-transparent :is(h1, .h1, h2, .h2, h3, .h3),
.media-text.u-bgcolor-gray-light :is(h1, .h1, h2, .h2, h3, .h3),
.media-text.u-bgcolor-ecru :is(h1, .h1, h2, .h2, h3, .h3),
.text.u-bgcolor-gray-light :is(h1, .h1, h2, .h2, h3, .h3),
.text.u-bgcolor-ecru :is(h1, .h1, h2, .h2, h3, .h3) { color: var(--text); }

body { color: var(--text); }

.c-input {
    background-color: var(--white);
    color: var(--primary);
}
.c-input::placeholder { color: var(--primary); }

/* Teaser-Bilder: Overlay beim Hover */
.teaserHover:after { background-color: var(--primary-transparent) }

/* Swoosh-Form: SVG als Maske, damit die Farbe aus der Variable kommt */
.u-shape:before {
    background: var(--primary-transparent);
    -webkit-mask: url(../img/swoosh.svg) left top / contain no-repeat;
    mask: url(../img/swoosh.svg) left top / contain no-repeat;
}

/* Seitenleiste: Telefon, Termin etc. */
.nav__cta li a { color: var(--primary); }
.nav__cta li a:hover {
    color: var(--white);
    background-color: var(--primary);
}

/* Slider-Pfeile */
.custom-next,
.custom-prev {
    border: 2px solid var(--primary);
}
.custom-next:hover,
.custom-prev:hover { background: var(--primary); }
.custom-next:before,
.custom-prev:before {
    color: var(--primary);
    opacity: 1;
}
.custom-next:hover:before,
.custom-prev:hover:before { color: var(--white); }

/* Slider-Punkte */
.slick-dots li button:before { border-color: var(--primary); }
.slick-dots li.slick-active button:before { background-color: var(--primary); }