/* =====================================================================
assets/theme.css — Türkises Design (Stil «localsearch»)
---------------------------------------------------------------------
Wird auf allen öffentlichen Seiten NACH assets/marke.css geladen und
setzt Schrift, Kopf, Fuss und Feinheiten. Farben der einzelnen Seiten
stehen bereits direkt in den Dateien (Türkis statt Blau).
Farben ändern: nur die Variablen direkt hier unten.
Wieder entfernen: die Zeile aus den Seiten löschen.
===================================================================== */
:root {
--teal: #005e6e;
--teal-d: #005e6e;
--teal-dd:#004a57;
--teal-h: #5fc4c9;
--tint: #e4eef0;
--tint2: #d6e5e8;
--tx: #004a57;
--tx2: #3d5a5f;
--schrift-titel: 'Exo 2', 'Inter', system-ui, sans-serif;
--titel-abstand: .005em;
}
/* ---------- Schrift ---------- */
h1, h2, h3, h4,
.cms-slide-title,
.pricing-card-price,
.af-frage,
.p-name,
.product-title,
.footer-col h3,
.logo-text {
font-family: var(--schrift-titel) !important;
letter-spacing: var(--titel-abstand);
}
h1, .cms-slide-title { font-weight: 300 !important; line-height: 1.15; }
h2 { font-weight: 400 !important; line-height: 1.2; }
h3, h4 { font-weight: 500 !important; line-height: 1.25; }
body { color: var(--tx2); }
body, p, li, input, textarea, select, button { font-family: 'Inter', system-ui, sans-serif; }
h1 { border-bottom: none; }
/* Kleine Kennzeichen über Überschriften in Türkis */
[style*="letter-spacing:.09em"], [style*="letter-spacing: .09em"] { color: var(--teal); }
/* ---------- Kopf ---------- */
.top-bar {
background: var(--teal-dd) !important;
color: #cfe3e5 !important;
font-size: .8rem !important;
padding: .4rem 2rem !important;
}
header {
background: #fff !important;
padding: .55rem 2rem !important;
box-shadow: 0 10px 30px -14px rgba(0,74,87, .28) !important;
}
nav { max-width: 1120px; }
.menu-item > a { color: var(--tx2) !important; font-size: .92rem !important; font-weight: 600 !important; }
.menu-item > a:hover, .menu-item > a.active { color: var(--teal) !important; }
.menu-item > a.active { box-shadow: inset 0 -2px 0 var(--teal); }
.logo-text { color: var(--teal-dd) !important; font-weight: 600 !important; }
.header-action-btn { background: var(--teal-dd) !important; box-shadow: none !important; padding: .6rem 1.4rem !important; }
.header-action-btn:hover { background: var(--teal) !important; filter: none !important; }
/* ---------- Slider ---------- */
.cms-slide-title { font-weight: 300 !important; text-shadow: none !important; }
.cms-slide-content { text-shadow: none !important; }
.cms-slide-text { font-weight: 400 !important; }
.cms-slider { background: var(--teal-d); }
.cms-slider-dots span.active { background: #fff; box-shadow: none; }
/* ---------- Knöpfe ---------- */
.cms-slide-btn, .au-btn, a.btn, a[class*="btn-solid"], a[class*="btn-primary"],
button[type="submit"], .pricing-card .cms-btn {
background: var(--teal) !important;
box-shadow: none !important;
}
.cms-slide-btn:hover, .au-btn:hover, a.btn:hover, a[class*="btn-solid"]:hover,
button[type="submit"]:hover { background: var(--teal-dd) !important; filter: none; }
.cms-btn-zweit, .au-btn-ghost, a[class*="btn-ghost"], a[class*="btn-outline"], a[class*="btn-zweit"] {
border-color: var(--teal-dd) !important;
color: var(--teal-dd) !important;
}
/* ---------- Karten und Boxen ---------- */
.faq-item, .testimonial-card, .content-block { border-radius: 6px; }
.faq-item summary::before { color: var(--teal); }
::selection { background: var(--tint2); color: var(--teal-dd); }
a { text-underline-offset: 3px; }
:focus-visible { outline-color: var(--teal) !important; }
/* ---------- Fuss: dunkeltürkise Karte auf hellem Streifen ---------- */
.fuss-streifen { background: var(--tint); padding-top: 3rem; margin-top: 0; }
.fuss-streifen .site-footer { margin-top: 0 !important; }
.site-footer {
background: var(--teal-d) !important;
color: #cfe3e5 !important;
max-width: 1120px;
margin: 4rem auto 0 !important;
border-radius: 18px 18px 0 0;
padding: 2.6rem 2.4rem 1.4rem !important;
width: calc(100% - 32px);
box-sizing: border-box;
}
.site-footer .footer-grid { max-width: none; }
.site-footer .footer-col h3 { font-family: var(--schrift-titel) !important; color: #fff !important; border-bottom: none !important; font-weight: 500 !important; }
.site-footer .footer-col h3[style*="letter-spacing:.12em"] { color: #9cc4c8 !important; font-family: 'Inter', sans-serif !important; }
.site-footer .footer-col p, .site-footer .footer-col li { color: #cfe3e5 !important; }
.site-footer .footer-col a { color: #cfe3e5 !important; }
.site-footer .footer-col a:hover { color: #fff !important; }
.site-footer .footer-col a[href="kontakt.php"][style*="background"] {
background: transparent !important; color: #fff !important; border: 1.5px solid #fff; padding: 9px 20px !important;
}
.site-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.18) !important; color: #fff; }
.site-footer .footer-copyright, .site-footer .footer-copyright span { color: #fff !important; }
.site-footer .footer-copyright a { color: #cfe3e5 !important; }
@media (max-width: 700px) { .site-footer { padding: 2rem 1.4rem 1.2rem !important; } }
/* ---------- Dunkelmodus ---------- */
html.site-dark .fuss-streifen { background: #12151a; }
html.site-dark header { background: #1b2029 !important; }
html.site-dark .menu-item > a:hover, html.site-dark .menu-item > a.active { color: var(--teal-h) !important; }
html.site-dark .header-action-btn { background: var(--teal) !important; }
html.site-dark .site-footer { background: #0b2a2e !important; }
/* ---------- Tailwind-Blau → Türkis (öffentliche Seiten) ---------- */
.bg-blue-50{background-color:#e4eef0 !important}
.text-blue-50{color:#e4eef0 !important}
.border-blue-50{border-color:#e4eef0 !important}
.hover\:bg-blue-50:hover{background-color:#e4eef0 !important}
.hover\:text-blue-50:hover{color:#e4eef0 !important}
.hover\:border-blue-50:hover{border-color:#e4eef0 !important}
.bg-blue-100{background-color:#d6e5e8 !important}
.text-blue-100{color:#d6e5e8 !important}
.border-blue-100{border-color:#d6e5e8 !important}
.hover\:bg-blue-100:hover{background-color:#d6e5e8 !important}
.hover\:text-blue-100:hover{color:#d6e5e8 !important}
.hover\:border-blue-100:hover{border-color:#d6e5e8 !important}
.bg-blue-200{background-color:#b7d9dc !important}
.text-blue-200{color:#b7d9dc !important}
.border-blue-200{border-color:#b7d9dc !important}
.hover\:bg-blue-200:hover{background-color:#b7d9dc !important}
.hover\:text-blue-200:hover{color:#b7d9dc !important}
.hover\:border-blue-200:hover{border-color:#b7d9dc !important}
.bg-blue-300{background-color:#8fd0d4 !important}
.text-blue-300{color:#8fd0d4 !important}
.border-blue-300{border-color:#8fd0d4 !important}
.hover\:bg-blue-300:hover{background-color:#8fd0d4 !important}
.hover\:text-blue-300:hover{color:#8fd0d4 !important}
.hover\:border-blue-300:hover{border-color:#8fd0d4 !important}
.bg-blue-400{background-color:#5fc4c9 !important}
.text-blue-400{color:#5fc4c9 !important}
.border-blue-400{border-color:#5fc4c9 !important}
.hover\:bg-blue-400:hover{background-color:#5fc4c9 !important}
.hover\:text-blue-400:hover{color:#5fc4c9 !important}
.hover\:border-blue-400:hover{border-color:#5fc4c9 !important}
.bg-blue-500{background-color:#13a3ad !important}
.text-blue-500{color:#13a3ad !important}
.border-blue-500{border-color:#13a3ad !important}
.hover\:bg-blue-500:hover{background-color:#13a3ad !important}
.hover\:text-blue-500:hover{color:#13a3ad !important}
.hover\:border-blue-500:hover{border-color:#13a3ad !important}
.bg-blue-600{background-color:#005e6e !important}
.text-blue-600{color:#005e6e !important}
.border-blue-600{border-color:#005e6e !important}
.hover\:bg-blue-600:hover{background-color:#005e6e !important}
.hover\:text-blue-600:hover{color:#005e6e !important}
.hover\:border-blue-600:hover{border-color:#005e6e !important}
.bg-blue-700{background-color:#005e6e !important}
.text-blue-700{color:#005e6e !important}
.border-blue-700{border-color:#005e6e !important}
.hover\:bg-blue-700:hover{background-color:#005e6e !important}
.hover\:text-blue-700:hover{color:#005e6e !important}
.hover\:border-blue-700:hover{border-color:#005e6e !important}
.bg-blue-800{background-color:#004a57 !important}
.text-blue-800{color:#004a57 !important}
.border-blue-800{border-color:#004a57 !important}
.hover\:bg-blue-800:hover{background-color:#004a57 !important}
.hover\:text-blue-800:hover{color:#004a57 !important}
.hover\:border-blue-800:hover{border-color:#004a57 !important}
.bg-blue-900{background-color:#003d49 !important}
.text-blue-900{color:#003d49 !important}
.border-blue-900{border-color:#003d49 !important}
.hover\:bg-blue-900:hover{background-color:#003d49 !important}
.hover\:text-blue-900:hover{color:#003d49 !important}
.hover\:border-blue-900:hover{border-color:#003d49 !important}
.bg-indigo-50{background-color:#e4eef0 !important}
.text-indigo-50{color:#e4eef0 !important}
.border-indigo-50{border-color:#e4eef0 !important}
.hover\:bg-indigo-50:hover{background-color:#e4eef0 !important}
.hover\:text-indigo-50:hover{color:#e4eef0 !important}
.hover\:border-indigo-50:hover{border-color:#e4eef0 !important}
.bg-indigo-100{background-color:#d6e5e8 !important}
.text-indigo-100{color:#d6e5e8 !important}
.border-indigo-100{border-color:#d6e5e8 !important}
.hover\:bg-indigo-100:hover{background-color:#d6e5e8 !important}
.hover\:text-indigo-100:hover{color:#d6e5e8 !important}
.hover\:border-indigo-100:hover{border-color:#d6e5e8 !important}
.bg-indigo-200{background-color:#b7d9dc !important}
.text-indigo-200{color:#b7d9dc !important}
.border-indigo-200{border-color:#b7d9dc !important}
.hover\:bg-indigo-200:hover{background-color:#b7d9dc !important}
.hover\:text-indigo-200:hover{color:#b7d9dc !important}
.hover\:border-indigo-200:hover{border-color:#b7d9dc !important}
.bg-indigo-300{background-color:#8fd0d4 !important}
.text-indigo-300{color:#8fd0d4 !important}
.border-indigo-300{border-color:#8fd0d4 !important}
.hover\:bg-indigo-300:hover{background-color:#8fd0d4 !important}
.hover\:text-indigo-300:hover{color:#8fd0d4 !important}
.hover\:border-indigo-300:hover{border-color:#8fd0d4 !important}
.bg-indigo-400{background-color:#5fc4c9 !important}
.text-indigo-400{color:#5fc4c9 !important}
.border-indigo-400{border-color:#5fc4c9 !important}
.hover\:bg-indigo-400:hover{background-color:#5fc4c9 !important}
.hover\:text-indigo-400:hover{color:#5fc4c9 !important}
.hover\:border-indigo-400:hover{border-color:#5fc4c9 !important}
.bg-indigo-500{background-color:#13a3ad !important}
.text-indigo-500{color:#13a3ad !important}
.border-indigo-500{border-color:#13a3ad !important}
.hover\:bg-indigo-500:hover{background-color:#13a3ad !important}
.hover\:text-indigo-500:hover{color:#13a3ad !important}
.hover\:border-indigo-500:hover{border-color:#13a3ad !important}
.bg-indigo-600{background-color:#005e6e !important}
.text-indigo-600{color:#005e6e !important}
.border-indigo-600{border-color:#005e6e !important}
.hover\:bg-indigo-600:hover{background-color:#005e6e !important}
.hover\:text-indigo-600:hover{color:#005e6e !important}
.hover\:border-indigo-600:hover{border-color:#005e6e !important}
.bg-indigo-700{background-color:#005e6e !important}
.text-indigo-700{color:#005e6e !important}
.border-indigo-700{border-color:#005e6e !important}
.hover\:bg-indigo-700:hover{background-color:#005e6e !important}
.hover\:text-indigo-700:hover{color:#005e6e !important}
.hover\:border-indigo-700:hover{border-color:#005e6e !important}
.bg-indigo-800{background-color:#004a57 !important}
.text-indigo-800{color:#004a57 !important}
.border-indigo-800{border-color:#004a57 !important}
.hover\:bg-indigo-800:hover{background-color:#004a57 !important}
.hover\:text-indigo-800:hover{color:#004a57 !important}
.hover\:border-indigo-800:hover{border-color:#004a57 !important}
.bg-indigo-900{background-color:#003d49 !important}
.text-indigo-900{color:#003d49 !important}
.border-indigo-900{border-color:#003d49 !important}
.hover\:bg-indigo-900:hover{background-color:#003d49 !important}
.hover\:text-indigo-900:hover{color:#003d49 !important}
.hover\:border-indigo-900:hover{border-color:#003d49 !important}
.bg-violet-50{background-color:#e4eef0 !important}
.text-violet-50{color:#e4eef0 !important}
.border-violet-50{border-color:#e4eef0 !important}
.hover\:bg-violet-50:hover{background-color:#e4eef0 !important}
.hover\:text-violet-50:hover{color:#e4eef0 !important}
.hover\:border-violet-50:hover{border-color:#e4eef0 !important}
.bg-violet-100{background-color:#d6e5e8 !important}
.text-violet-100{color:#d6e5e8 !important}
.border-violet-100{border-color:#d6e5e8 !important}
.hover\:bg-violet-100:hover{background-color:#d6e5e8 !important}
.hover\:text-violet-100:hover{color:#d6e5e8 !important}
.hover\:border-violet-100:hover{border-color:#d6e5e8 !important}
.bg-violet-200{background-color:#b7d9dc !important}
.text-violet-200{color:#b7d9dc !important}
.border-violet-200{border-color:#b7d9dc !important}
.hover\:bg-violet-200:hover{background-color:#b7d9dc !important}
.hover\:text-violet-200:hover{color:#b7d9dc !important}
.hover\:border-violet-200:hover{border-color:#b7d9dc !important}
.bg-violet-300{background-color:#8fd0d4 !important}
.text-violet-300{color:#8fd0d4 !important}
.border-violet-300{border-color:#8fd0d4 !important}
.hover\:bg-violet-300:hover{background-color:#8fd0d4 !important}
.hover\:text-violet-300:hover{color:#8fd0d4 !important}
.hover\:border-violet-300:hover{border-color:#8fd0d4 !important}
.bg-violet-400{background-color:#5fc4c9 !important}
.text-violet-400{color:#5fc4c9 !important}
.border-violet-400{border-color:#5fc4c9 !important}
.hover\:bg-violet-400:hover{background-color:#5fc4c9 !important}
.hover\:text-violet-400:hover{color:#5fc4c9 !important}
.hover\:border-violet-400:hover{border-color:#5fc4c9 !important}
.bg-violet-500{background-color:#13a3ad !important}
.text-violet-500{color:#13a3ad !important}
.border-violet-500{border-color:#13a3ad !important}
.hover\:bg-violet-500:hover{background-color:#13a3ad !important}
.hover\:text-violet-500:hover{color:#13a3ad !important}
.hover\:border-violet-500:hover{border-color:#13a3ad !important}
.bg-violet-600{background-color:#005e6e !important}
.text-violet-600{color:#005e6e !important}
.border-violet-600{border-color:#005e6e !important}
.hover\:bg-violet-600:hover{background-color:#005e6e !important}
.hover\:text-violet-600:hover{color:#005e6e !important}
.hover\:border-violet-600:hover{border-color:#005e6e !important}
.bg-violet-700{background-color:#005e6e !important}
.text-violet-700{color:#005e6e !important}
.border-violet-700{border-color:#005e6e !important}
.hover\:bg-violet-700:hover{background-color:#005e6e !important}
.hover\:text-violet-700:hover{color:#005e6e !important}
.hover\:border-violet-700:hover{border-color:#005e6e !important}
.bg-violet-800{background-color:#004a57 !important}
.text-violet-800{color:#004a57 !important}
.border-violet-800{border-color:#004a57 !important}
.hover\:bg-violet-800:hover{background-color:#004a57 !important}
.hover\:text-violet-800:hover{color:#004a57 !important}
.hover\:border-violet-800:hover{border-color:#004a57 !important}
.bg-violet-900{background-color:#003d49 !important}
.text-violet-900{color:#003d49 !important}
.border-violet-900{border-color:#003d49 !important}
.hover\:bg-violet-900:hover{background-color:#003d49 !important}
.hover\:text-violet-900:hover{color:#003d49 !important}
.hover\:border-violet-900:hover{border-color:#003d49 !important}
/* Fuss-Texte: stärker als die Regeln aus dark-fix.css / Inline-Stilen */
html body .site-footer .footer-col p,
html body .site-footer .footer-col p span,
html body .site-footer .footer-col li { color: #cfe3e5 !important; }
html body .site-footer .footer-col p b,
html body .site-footer .footer-col p span[style*="font-weight:600"] { color: #fff !important; }
html body .site-footer .footer-col h3 { color: #fff !important; }
html body .site-footer .footer-col h3[style*="letter-spacing"] { color: #9cc4c8 !important; }
/* =====================================================================
SCHRIFT WIE LOCALSEARCH / STARTUP-DIGITAL
Grössen 1:1 aus deren Stylesheet: Titel fliessend bis 64 / 48 / 32 px,
Fliesstext 16 px / 23 px, Titelfarbe #005e6e. Als Schrift dient Exo 2
(leicht) statt der lizenzpflichtigen Panton.
===================================================================== */
html body { font-size: 16px; }
html body p, html body li { letter-spacing: .02em; }
html body main p, html body main li { font-size: 1rem; line-height: 1.45; }
html body main .content-text p { font-size: 1rem; }
html body h1, html body .cms-slide-title {
font-size: clamp(2.25rem, calc(1.28448rem + 3.21839vw), 4rem) !important;
line-height: clamp(2.75rem, calc(1.50862rem + 4.13793vw), 5rem) !important;
font-weight: 300 !important; letter-spacing: 0 !important; color: #005e6e;
}
html body main h2, html body .np h2, html body section h2, html body .weiche-h2 {
font-size: clamp(1.875rem, calc(1.25431rem + 2.06897vw), 3rem) !important;
line-height: clamp(2.3125rem, calc(1.62284rem + 2.29885vw), 3.5625rem) !important;
font-weight: 300 !important; letter-spacing: .01em !important; color: #005e6e;
margin-bottom: 24px;
}
html body main h3, html body .np h3 {
font-size: clamp(1.5rem, calc(1.22414rem + .91954vw), 2rem) !important;
line-height: clamp(2rem, calc(1.72414rem + .91954vw), 2.5rem) !important;
font-weight: 300 !important; color: #005e6e;
}
html body main h4, html body .np h4 { font-size: 1.5rem !important; font-weight: 300 !important; color: #005e6e; line-height: 1.3 !important; }
html body .cms-slide-title { color: inherit; }
/* Slider-Titel: etwas kleiner, damit Text, Knopf und Punkte in die Folie passen */
html body .cms-slide-title {
font-size: clamp(2rem, calc(1.2rem + 2.4vw), 3rem) !important;
line-height: 1.15 !important; margin-bottom: .8rem !important;
}
html body .cms-slide-text { font-size: clamp(1rem, calc(.86207rem + .45977vw), 1.25rem) !important; line-height: 1.5 !important; }
/* Knöpfe: 48 px hoch, 14 px (ab 745 px 16 px), fett, voll rund */
html body .cms-slide-btn, html body .header-action-btn, html body main a[class*="btn"],
html body main button[type="submit"], html body .np-knopf, html body .np-knopf2 {
font-size: 14px !important; font-weight: 700 !important; letter-spacing: .02em;
padding: 12px 24px !important; min-height: 48px; display: inline-flex !important;
align-items: center; justify-content: center;
}
@media (min-width: 745px) {
html body .cms-slide-btn, html body main a[class*="btn"], html body main button[type="submit"],
html body .np-knopf, html body .np-knopf2 { font-size: 16px !important; }
}
html body .menu-item > a { font-size: .95rem !important; font-weight: 500 !important; }
html body .top-bar { font-size: .8rem !important; }
html body .np-preis, html body .pricing-card-price { font-weight: 400 !important; }
html body .np-paket li, html body .np-leist li { font-size: 1rem; }
html body .np-kennz { font-size: .75rem; }
html body .cms-slide-content h1, html body .cms-slide-content .cms-slide-title { color: inherit; }
/* =====================================================================
WENIGER FARBE: Die dunklen Bänder werden hell (wie bei localsearch).
Türkis bleibt nur für Kopfbereich, Knöpfe, Akzente und den Fuss.
===================================================================== */
html:not(.site-dark) body .weiche-band,
html:not(.site-dark) body .content-section-band[style*="#004a57"],
html:not(.site-dark) body section.content-section-band:has(.content-block[style*="#f2f7f8"] .content-text p strong[style*="13a3ad"]) {
background: var(--tint) !important;
}
html:not(.site-dark) body section.content-section-band:has(.content-block[style*="#f2f7f8"] .content-text p strong[style*="13a3ad"])::before { display: none; }
/* Titel */
html:not(.site-dark) body .weiche-band h1, html:not(.site-dark) body .weiche-band h2, html:not(.site-dark) body .weiche-band h3,
html:not(.site-dark) body .content-section-band[style*="#004a57"] h1,
html:not(.site-dark) body .content-section-band[style*="#004a57"] h2,
html:not(.site-dark) body .content-section-band[style*="#004a57"] h3,
html:not(.site-dark) body .content-section-band[style*="#004a57"] h4,
html:not(.site-dark) body section.content-section-band:has(.content-block[style*="#f2f7f8"] .content-text p strong[style*="13a3ad"]) h2 {
color: #005e6e !important;
}
/* Texte */
html:not(.site-dark) body .weiche-band p,
html:not(.site-dark) body .content-section-band[style*="#004a57"] p,
html:not(.site-dark) body .content-section-band[style*="#004a57"] li,
html:not(.site-dark) body .content-section-band[style*="#004a57"] span:not([style*="background"]),
html:not(.site-dark) body .content-section-band[style*="#004a57"] small,
html:not(.site-dark) body #anfrage-band p,
html:not(.site-dark) body .content-col:has(> .content-block[style*="#f2f7f8"] > .content-text > p > strong[style*="13a3ad"]) .content-text p,
html:not(.site-dark) body section.content-section-band:has(.content-block[style*="#f2f7f8"] .content-text p strong[style*="13a3ad"]) .content-col:not(:has(strong[style*="13a3ad"])) .content-text p {
color: #3d5a5f !important;
}
html:not(.site-dark) body .content-col:has(> .content-block[style*="#f2f7f8"] > .content-text > p > strong[style*="13a3ad"]) .content-text strong,
html:not(.site-dark) body .weiche-card h3 { color: #005e6e !important; }
/* Karten weiss auf hellem Band */
html:not(.site-dark) body .weiche-card,
html:not(.site-dark) body .content-section-band[style*="#004a57"] .content-block > div[style*="border"],
html:not(.site-dark) body .content-col:has(> .content-block[style*="#f2f7f8"] > .content-text > p > strong[style*="13a3ad"]) > .content-block {
background: #fff !important; border: 1px solid #d6e5e8 !important; box-shadow: none !important;
}
html:not(.site-dark) body .nsa-band { background: none !important; }
html:not(.site-dark) body .weiche-badge span { background: #fff; border-color: #d6e5e8; color: #005e6e; }
html:not(.site-dark) body .content-col:has(> .content-block[style*="#f2f7f8"] > .content-text > p > strong[style*="13a3ad"]) .content-text p::before { color: #8fd0d4; }
/* Knopf mit Rand im hellen CTA-Band */
html:not(.site-dark) body #anfrage-band a[href^="tel:"] { color: #005e6e !important; border-color: #005e6e !important; }
/* Preisseite: dunkle Blöcke ebenfalls hell */
html:not(.site-dark) body .np-indiv, html:not(.site-dark) body .np-cta { background: var(--tint) !important; border: none; }
html:not(.site-dark) body .np-indiv h2, html:not(.site-dark) body .np-cta h2 { color: #005e6e !important; }
html:not(.site-dark) body .np-indiv p, html:not(.site-dark) body .np-cta p { color: #3d5a5f !important; }
html:not(.site-dark) body .np-indiv a:not(.np-knopf) { color: #005e6e; }
html:not(.site-dark) body .np-cta .np-knopf2 { color: #005e6e !important; border-color: #005e6e; }
html:not(.site-dark) body .np-kennz { color: #005e6e; }
/* Flache Knöpfe (ohne Schein) und kein weisser Spalt über dem Fuss */
html body a, html body button { box-shadow: none; }
html body .np-knopf, html body .np-knopf2, html body .cms-slide-btn, html body main a[class*="btn"],
html body main button[type="submit"], html body #anfrage-band a, html body .np-preisbox .np-knopf { box-shadow: none !important; }
html body main { margin-bottom: 0 !important; }
/* =====================================================================
FUSS wie localsearch: ganz abgerundete Karte auf hellem Streifen
===================================================================== */
.fuss-streifen { background: var(--tint); padding: 2rem 16px; margin-top: 0; }
.nf {
position: relative; max-width: 1180px; margin: 0 auto; box-sizing: border-box;
background: #005e6e; color: #fff; border-radius: 22px; padding: 2.4rem 2.5rem 1.6rem;
font-family: 'Inter', system-ui, sans-serif;
}
.nf-hoch {
position: absolute; top: 2.4rem; right: 2.5rem; width: 44px; height: 44px; border-radius: 50%;
border: 2px solid #fff; color: #fff; display: flex; align-items: center; justify-content: center;
text-decoration: none; transition: background .15s;
}
.nf-hoch:hover { background: rgba(255,255,255,.15); }
.nf-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 2.5rem; padding-right: 64px; }
.nf h3 { font-family: 'Exo 2', sans-serif !important; font-weight: 300 !important; font-size: 1.5rem !important;
line-height: 1.3 !important; color: #fff !important; margin: 0 0 1rem !important; border: none !important; }
.nf-erste p { color: #d6e5e8; font-size: .95rem; line-height: 1.55; margin: 0 0 1.4rem; max-width: 420px; }
.nf-knopf {
display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 28px;
border: 2px solid #fff; border-radius: 999px; color: #fff !important; font-weight: 700; font-size: 1rem;
text-decoration: none; transition: background .15s;
}
.nf-knopf:hover { background: rgba(255,255,255,.15); }
.nf-label { color: #b7d9dc; font-size: .95rem; margin: .2rem 0 1rem !important; }
.nf ul { list-style: none; margin: 0; padding: 0; }
.nf li { padding: 0; margin: 0 0 .7rem; line-height: 1.3; font-size: 1rem; letter-spacing: 0; }
.nf li a { color: #fff !important; font-weight: 700; text-decoration: none; }
.nf li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nf-adresse { color: #d6e5e8; font-size: .9rem; line-height: 1.6; margin: 1rem 0 0 !important; }
.nf-unten {
display: flex; align-items: center; gap: 2.2rem; flex-wrap: wrap;
border-top: 1px solid rgba(255,255,255,.28); margin-top: 1.8rem; padding-top: 1.3rem;
}
.nf-logo { font-family: 'Exo 2', sans-serif; font-weight: 500; font-size: 1.5rem; color: #fff !important; text-decoration: none; }
.nf-logo span { color: #8fd0d4; }
.nf-links { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; font-size: .8rem; }
.nf-links a { color: #fff !important; font-weight: 700; text-decoration: none; }
.nf-links a:hover { text-decoration: underline; }
.nf-links span { color: #b7d9dc; }
@media (max-width: 820px) {
.nf { padding: 2rem 1.4rem 1.4rem; }
.nf-grid { grid-template-columns: 1fr 1fr; gap: 1.8rem 1.2rem; padding-right: 0; }
.nf-erste { grid-column: 1 / -1; }
.nf li { font-size: .9rem; }
.nf-hoch { top: 1.4rem; right: 1.4rem; width: 38px; height: 38px; }
.nf-erste h3 { padding-right: 52px; }
}
html.site-dark .fuss-streifen { background: #12151a; }
html.site-dark .nf { background: #0b2a2e; }
.nf-links { margin: 0; padding: 0; }
/* Vorteile-Band: weisse Karten statt Symbol-Kästchen (CSS-Raster, kein Tabellen-Trick) */
html body .nsa-band { padding: 0; }
html body .nsa-band table, html body .nsa-band tbody { display: block; width: 100%; margin: 0; border: 0; }
html body .nsa-band tbody { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
html body .nsa-band tr { display: contents; }
html body .nsa-cell { display: block; width: auto; padding: 0; text-align: left; height: auto; }
html body .nsa-feat, html body .nsa-feat:hover {
background: #fff !important; border: 1px solid #d6e5e8; border-radius: 6px;
padding: 26px 24px; height: 100%; box-sizing: border-box; transform: none; display: block;
}
html body .nsa-ico, html body .nsa-feat:hover .nsa-ico {
width: auto; height: auto; background: none; border: none; box-shadow: none; transform: none;
color: #005e6e; justify-content: flex-start; margin-bottom: 12px;
}
html body .nsa-t { color: #005e6e !important; font-family: 'Exo 2', sans-serif; font-weight: 400; line-height: 1.25; }
html body .nsa-s { color: #3d5a5f !important; }
html body main .content-text .nsa-band p.nsa-t { font-size: 1.4rem; font-weight: 400; margin: 0 0 .4rem; }
html body main .content-text .nsa-band p.nsa-s { font-size: .92rem; margin: 0; }
@media (max-width: 900px) { html body .nsa-band tbody { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { html body .nsa-band tbody { grid-template-columns: 1fr; gap: 12px; } }
/* Foto-Abschnitt ohne Bild: eine Spalte, mittig lesbar */
.np-foto.einspaltig { grid-template-columns: 1fr; max-width: 760px; }
/* ---- Rechtstexte (Datenschutz, AGB): ruhige Überschriften, keine Cookie-Leiste ---- */
body .ds-text h2 { font-family:'Exo 2',sans-serif !important; font-size:1.3rem !important; font-weight:500 !important; line-height:1.3 !important; margin:1.8rem 0 .5rem !important; color:#005e6e !important; }
body .ds-text h2:first-child { margin-top:0 !important; }
body .ds-text p { font-size:.97rem; }
#cookie-banner { display:none !important; }
/* Block, der nur ein