/* ==========================================================================
Responsive2Go 4 – Hauptstyles (inkl. Browser-Reset, Base-Typographie,
Container, Header, Section, Footer, Media-Queries).
Eine einzige Datei für alle globalen Styles — keine reset.css mehr,
damit es keine Cascade-Probleme zwischen Files gibt.
Komplettes File wird als Critical-CSS in inlined (Reset, Layout,
Header, Body-Typography sind alle above-the-fold-relevant).
========================================================================== */
/* ── Browser-Reset + Box-Sizing ─────────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: var(--font-size-base);
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
}
body {
font-family: var(--font-body);
font-weight: var(--font-weight-base);
line-height: var(--line-height-base);
color: var(--color-text);
background-color: var(--color-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
blockquote {
font-style: normal;
}
/* ── Headings (Default + Mobile/Tablet-Größen) ──────────────────────────── */
/* ── Headings — r2go4-Spec, konsolidiert pro Heading ─────────────────────
Jede Heading komplett explizit (font-family, font-weight, font-size,
line-height, text-transform, color, margin-bottom). Modul/Section-CSS
darf NUR margin/padding overriden, keine Typo.
Werte bewusst gleich wie vorher gewählt (Pixel-Erhalt). */
h1, .h1 {
font-family: var(--font-heading);
font-style: normal;
font-weight: 400;
font-size: var(--h1-size);
line-height: var(--h1-line-height);
text-transform: none;
color: var(--color-text-dark);
margin-bottom: var(--space-lg);
}
h2, .h2 {
font-family: var(--font-heading);
font-style: normal;
font-weight: 400;
font-size: var(--h2-size);
line-height: var(--h2-line-height);
text-transform: none;
color: var(--color-text-dark);
margin-bottom: var(--space-md);
}
h3, .h3 {
font-family: var(--font-heading);
font-style: normal;
font-weight: 400;
font-size: var(--h3-size);
line-height: var(--h3-line-height);
text-transform: none;
color: var(--color-text-dark);
margin-bottom: var(--space-sm);
}
h4, .h4 {
font-family: var(--h4-font-family);
font-style: normal;
font-weight: 400;
font-size: var(--h4-size);
line-height: var(--h4-line-height);
color: var(--color-text-dark);
margin-bottom: 0.5rem;
}
h5, .h5 {
font-family: var(--font-body);
font-style: normal;
font-weight: var(--h5-weight);
font-size: var(--h5-size);
line-height: var(--h5-line-height);
color: var(--color-text);
margin-bottom: 0.5rem;
}
h6, .h6 {
font-family: var(--font-body);
font-style: normal;
font-weight: var(--h5-weight);
font-size: var(--h6-size);
line-height: var(--h6-line-height);
color: var(--color-text-light);
margin-bottom: 0.5rem;
}
a {
color: var(--color-link);
text-decoration: none;
transition: color var(--transition);
}
a:hover {
color: var(--color-link-hover);
}
img {
max-width: 100%;
height: auto;
display: block;
}
ul, ol {
list-style: none;
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
/* ── Container ──────────────────────────────────────────────────────────── */
.container {
width: 100%;
max-width: var(--content-width);
margin-inline: auto;
padding-inline: 0;
}
@media (max-width: 1240px) {
.container {
padding-inline: var(--content-edge-tablet);
}
}
/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1100; /* über Seiteninhalt + Leaflet-Karte (1000) + Immo-Detail-Tabs (600), unter Overlays/Lightboxen */
background: var(--header-bg);
}
.header-main {
display: flex;
align-items: center;
height: var(--header-height);
padding-inline: var(--header-padding-x);
max-width: 100%;
transition: height 0.3s ease;
}
.nav-primary {
flex: 1;
display: flex;
justify-content: flex-end;
}
.nav-secondary {
flex: 1;
}
.site-logo {
flex-shrink: 0;
position: relative;
z-index: 2;
padding-inline: 4.0625rem;
}
.site-logo img {
width: 218px;
height: auto;
margin-top: 0.375rem;
transition: width 0.3s ease;
}
.site-logo .logo-dark {
display: none;
}
.site-header.is-scrolled .logo-white {
display: none;
}
.site-header.is-scrolled .logo-dark {
display: block;
}
/* ── Navigation ─────────────────────────────────────────────────────────── */
.nav-list {
display: flex;
gap: 2.3125rem;
}
.nav-primary .nav-list {
justify-content: flex-end;
}
.nav-list a {
font-size: var(--nav-font-size);
font-weight: var(--nav-weight);
letter-spacing: var(--nav-letter-spacing);
text-transform: var(--nav-transform);
color: var(--nav-color);
transition: color var(--transition);
line-height: var(--nav-line-height);
}
.nav-list a:hover,
.nav-list a.active {
color: var(--nav-color-hover);
}
/* ── Mobile Trigger ─────────────────────────────────────────────────────── */
.mobile-trigger {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 0.625rem;
margin-left: auto;
}
.hamburger,
.hamburger::before,
.hamburger::after {
display: block;
width: 1.5rem;
height: 0.125rem;
background: var(--nav-color);
transition: var(--transition);
}
.hamburger {
position: relative;
}
.hamburger::before,
.hamburger::after {
content: '';
position: absolute;
left: 0;
}
.hamburger::before { top: -0.4375rem; }
.hamburger::after { top: 0.4375rem; }
/* ── Mobile Nav Overlay ─────────────────────────────────────────────────── */
.mobile-nav-overlay {
position: fixed;
inset: 0;
background: var(--color-white);
z-index: 1200; /* über dem Sticky-Header (1100) — Mobile-Nav wird aus dem Header geöffnet */
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
padding: 4.5rem 1.5rem 2rem;
overflow-y: auto;
transform: translateX(100%);
transition: transform var(--transition);
}
.mobile-nav-overlay.is-open {
transform: translateX(0);
}
.mobile-nav-close {
position: absolute;
top: 1.25rem;
right: 1.25rem;
background: none;
border: none;
font-size: 2rem;
color: var(--color-text);
cursor: pointer;
}
.mobile-nav-list {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.mobile-nav-list > li {
margin: 0;
border-bottom: 1px solid #e5e5e5;
}
.mobile-nav-list > li:last-child {
border-bottom: none;
}
.mobile-nav-list a {
font-size: 1.125rem;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
color: var(--color-text);
text-decoration: none;
display: block;
padding: 1.125rem 0;
line-height: 1.3;
}
.mobile-nav-list a:hover {
color: var(--color-primary);
}
/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
position: relative;
overflow: hidden;
padding: 0.9375rem 1.875rem 0.9375rem 2.375rem;
font-style: normal;
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.71em;
color: var(--btn-color);
background: var(--btn-bg);
border: 1px solid var(--color-primary);
border-radius: 0;
box-shadow: 0 0 0 -0.4375rem rgba(0, 0, 0, 0);
cursor: pointer;
transition: all var(--transition);
text-align: center;
z-index: 1;
}
.btn:hover {
color: var(--btn-color-hover);
background: var(--btn-bg-hover);
border-color: var(--btn-border-hover);
}
p + .btn,
.frame__text + .btn {
margin-top: 2rem;
}
/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
background: var(--footer-bg);
padding-block: var(--footer-spacing);
border-top: 1px solid var(--color-border);
}
.footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-credit {
font-size: var(--footer-font-size);
font-style: italic;
color: var(--footer-text-color);
}
.footer-credit a {
color: var(--footer-link-color);
text-decoration: none;
}
.footer-credit a:hover {
color: var(--footer-link-hover);
}
.footer-credit__sep {
margin: 0 0.5rem;
color: var(--footer-text-color);
opacity: 0.5;
}
.footer-credit__keyword {
font-style: normal;
}
.footer-nav-list {
display: flex;
gap: 1.5rem;
}
.footer-nav-list a {
font-size: var(--footer-font-size);
color: var(--footer-text-color);
}
.footer-nav-list a:hover {
color: var(--footer-link-hover);
}
/* ==========================================================================
Sections
========================================================================== */
/* ── Generic Section ────────────────────────────────────────────────────── */
.section {
padding-block: 8rem;
}
.section--dark {
background: var(--color-text-dark);
color: var(--color-white);
}
.section--dark h2 {
color: var(--color-white);
}
/* ── Section-BG-Modifier (zentral, via $sectionClass im Caller) ─────────
Jede Page/jedes Template steuert die Hintergrundfarbe via
section_render('xyz', ['sectionClass' => 'section--warm']);
leadbox('xyz', ['sectionClass' => 'section--dark']);
Frames selbst haben KEINEN Default-BG (außer Image-BGs wie Hero/Quality).
So bleibt der Cascade sauber: jede Frame-Page ist transparent + ein
einziger zentraler Modifier setzt die Farbe. */
.section--warm {
background: var(--color-bg-warm);
}
.section--white {
background: var(--color-white);
}
.section--primary {
background: var(--color-primary);
color: var(--color-white);
}
.section--primary h1,
.section--primary h2,
.section--primary h3 {
color: var(--color-white);
}
/* Frame-Kontext: label/h1/h2 direkt im Container = zentriert */
.section > .container > .section__label,
.section > .container > .section__label,
.section > .container > h1,
.section > .container > h2 {
text-align: center;
}
/* Section-Header (h2 direkt im Container) markiert einen eigenständigen
Header über einem darauf folgenden Inhaltsblock. Bekommt deutlich mehr
Luft als ein h2 mitten im Fließtext (=> globaler h2 1.5rem). */
.section > .container > h1,
.section > .container > h2,
.section > .container > .section__label + h1,
.section > .container > .section__label + h2,
.section > .container > .section__label + h3 {
margin-bottom: var(--space-2xl);
}
.section h1,
.section h2 {
font-family: var(--font-heading);
font-size: var(--h2-size);
color: var(--color-text-dark);
font-weight: 400;
}
/* Globale Mobile/Tablet-Schriftgrößen für Headings + Container.
Kommt NACH den Defaults oben (.section h1/h2 mit --h2-size) damit
bei gleicher Spezifität die Reihenfolge gewinnt. */
@media (max-width: 767px) {
html { font-size: var(--font-size-base-mobile); }
.container { padding-inline: var(--content-edge-mobile); }
h1 { font-size: var(--h1-size-mobile); line-height: var(--h1-line-height-mobile); }
h2,
.section h1,
.section h2 { font-size: var(--h2-size-mobile); }
h3 { font-size: 1.4rem; }
}
@media (min-width: 768px) and (max-width: 1024px) {
h1 { font-size: var(--h1-size-tablet); }
h2,
.section h1,
.section h2 { font-size: var(--h2-size-tablet); }
}
.section__label {
display: block;
font-family: var(--font-body);
font-size: 0.6875rem;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.1875rem;
color: var(--color-primary-dark);
margin-bottom: var(--space-sm);
}
.section__label + h1,
.section__label + h2,
.section__label + h3 {
margin-top: -0.625rem;
margin-bottom: var(--space-md);
}
.section__label--light {
color: rgba(255, 255, 255, 0.8);
}
.section__cta {
text-align: center;
margin-top: var(--space-xl);
}
/* ── Frame-Standardabstände ───────────────────────────────────────────────
Plain Element-Margins als globale Regel. Frames mischen .section__label,
//,
und <.actions> direkt — kein Wrapper-Schnickschnack,
alles aus diesen Regeln. Niemals in Frame-CSS overriden.
Werte fließen über die --space-*-Tokens aus variables.css. */
/* h1-h3 margin-bottom steht im jeweiligen Heading-Block oben. */
p { margin-bottom: var(--space-sm); }
/* Letzter Absatz im Container braucht keinen Abstand mehr */
p:last-child { margin-bottom: 0; }
/* Buttons-/Link-Reihe: Container für ein bis mehrere CTAs unterhalb Text */
.actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
margin-top: var(--space-lg);
}
/* Weiterlesen-Link: Standard-Style für inline "Mehr"-Links unter Karten,
Spalten, Section-Text. */
.more {
display: inline-block;
font-size: 0.85rem;
font-weight: 500;
color: var(--color-primary-dark);
text-transform: uppercase;
letter-spacing: 0.05em;
text-decoration: none;
transition: color var(--transition);
}
.more:hover,
a:hover .more {
color: var(--color-primary);
}
/* Job-Title / Rolle direkt unter einem Namen (Team-Feature, Quote-Autoren,
Card-Subtitle). Uppercase, Brand-Color, eng. */
.role {
font-size: 1rem;
color: var(--color-primary-dark);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Häkchen-Liste:
mit 45°-Pfeilspitzen als Bullet.
Wird in CTA-Frames für "Vorteile/Benefits"-Listen genutzt. */
.check-list {
list-style: none;
padding: 0;
}
.check-list li {
display: flex;
align-items: flex-start;
padding: 0.25rem 0;
line-height: 1.6;
}
.check-list li::before {
content: "";
display: inline-block;
flex-shrink: 0;
width: 0.5em;
height: 0.5em;
margin-top: 0.5em;
margin-right: var(--space-xs);
border-top: 2px solid var(--color-primary);
border-right: 2px solid var(--color-primary);
transform: rotate(45deg);
}
/* Wenn ein Button/Link einzeln direkt auf einen Absatz folgt */
p + .btn,
p + a:not([class]) {
display: inline-block;
margin-top: var(--space-md);
}
/* Bild → Folgeelement: Standard-Abstand (Plain ![]()
/ direkt
gefolgt von einer Headline oder einem Absatz). */
img + h2,
img + h3,
img + p,
picture + h2,
picture + h3,
picture + p {
margin-top: var(--space-md);
}
/* Icon-Circle: runder Container für Inline-SVG-Icons, Brand-Color Tint.
Modifier:
--lg größer (für prominente Feature-Icons oben in Cards)
--sm kleiner (für inline-Listen-Bullets)
--solid gefüllt in Brand-Color (statt transparenter Tint) */
.icon-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: rgba(184, 169, 142, 0.15);
color: var(--color-primary-dark);
}
.icon-circle > svg {
width: 1.5rem;
height: 1.5rem;
}
.icon-circle--lg {
width: 5rem;
height: 5rem;
}
.icon-circle--lg > svg {
width: 2.5rem;
height: 2.5rem;
}
.icon-circle--sm {
width: 2rem;
height: 2rem;
}
.icon-circle--sm > svg {
width: 1.25rem;
height: 1.25rem;
}
.icon-circle--solid {
background: var(--color-primary);
color: var(--color-white);
}
/* ── Scroll-Offset für Anker (fixierter Header) ────────────────────────── */
[id] {
scroll-margin-top: 160px;
}
/* ── Scrolled Header ────────────────────────────────────────────────────── */
.site-header.is-scrolled {
position: fixed;
background: rgba(255, 255, 255, 0.97);
box-shadow: var(--shadow-light);
animation: slideDown 0.3s ease;
}
.site-header.is-scrolled .header-main {
/* 130px (statt 110px): vereinheitlicht Startseite & Inhaltsseite. Die Subpage
hatte über min-height:8.125rem effektiv 130px, die Startseite nur 110px —
bei 113px Logo-Höhe stieß das Logo auf der Startseite unten an. */
height: calc(var(--header-height) - 40px);
}
.site-header.is-scrolled .site-logo img {
width: calc(218px * 0.8);
}
/* Standard: Logo im Scroll-Header stößt nie an die Kanten. max-height garantiert
≥10px Luft oben/unten (130px Header − 110px Logo = 2×10px), width:auto wahrt
das Seitenverhältnis für beliebige Logo-Formate (keine Verzerrung), margin-top:0
zentriert sauber. Nur Desktop (≥1400px) — darunter ist Burger-Mode = Normalhöhe. */
@media (min-width: 1400px) {
.site-header.is-scrolled .site-logo img {
width: auto;
max-width: calc(218px * 0.8);
max-height: calc(var(--header-height) - 60px);
margin-top: 0;
}
}
.site-header.is-scrolled .nav-list a:not(.btn) {
color: var(--color-text-dark);
}
.site-header.is-scrolled .nav-list a:not(.btn):hover {
color: var(--color-primary);
}
.site-header.is-scrolled .hamburger,
.site-header.is-scrolled .hamburger::before,
.site-header.is-scrolled .hamburger::after {
background: var(--color-text-dark);
}
@keyframes slideDown {
from { transform: translateY(-100%); }
to { transform: translateY(0); }
}
/* ── Section Intro (global) ───────────────────────────────────────────── */
.section__intro {
max-width: 42rem;
margin-inline: auto;
text-align: center;
font-size: 1rem;
line-height: 1.75;
color: var(--color-text);
margin-bottom: var(--space-xl);
}
/* ── Subpage Header (weißer Hintergrund, dunkle Links) ────────────────── */
.site-header--subpage {
position: relative;
background: var(--color-white);
border-bottom: 1px solid var(--color-border);
}
.site-header--subpage .header-main {
min-height: 8.125rem;
}
.site-header--subpage .nav-list a:not(.btn) {
color: var(--color-text-dark);
}
.site-header--subpage .nav-list a:not(.btn):hover {
color: var(--color-primary);
}
.site-header--subpage .logo-white {
display: none;
}
.site-header--subpage .logo-dark {
display: block;
}
.site-header--subpage .hamburger,
.site-header--subpage .hamburger::before,
.site-header--subpage .hamburger::after {
background: var(--color-text-dark);
}
/* ── Immobilienangebote Page (Map + Search) ──────────────────────────── */
.immo-map-top {
width: 100%;
}
.immo-map-top .immo-map-container {
max-width: 100%;
margin: 0;
}
.immo-search-section {
padding: 3rem 0 5rem;
}
/* ==========================================================================
Responsive
========================================================================== */
/* Burger-Mode bis einschl. 1366px Laptop — volle Nav passt darunter
nicht einzeilig (bricht "KÄUFER & MIETER").
PLUS: Scroll-Header übernimmt EXAKT die Höhe + Logo-Größe des
normalen Headers (nur weißer Hintergrund + Shadow als Diff). */
@media (max-width: 1399px) {
.nav-primary,
.nav-secondary {
display: none;
}
.mobile-trigger {
display: block;
}
.header-main,
.site-header.is-scrolled .header-main,
.site-header--subpage .header-main {
padding-inline: var(--content-edge-mobile);
height: 5rem;
min-height: 0;
}
.site-logo {
padding-inline: 0;
}
/* Tablet-Landscape + Laptop (1025–1399px): Logo nur leicht reduziert */
.site-logo img,
.site-header.is-scrolled .site-logo img {
width: 200px;
}
}
/* Tablet (768–1024px): Logo etwas kleiner */
@media (max-width: 1024px) {
.site-logo img,
.site-header.is-scrolled .site-logo img {
width: 180px;
}
}
/* Phones + Phone-Landscape (≤767px): Logo deutlich kleiner */
@media (max-width: 767px) {
.site-logo img,
.site-header.is-scrolled .site-logo img {
width: 160px;
}
}
/* Sehr kleine Phones (≤390px): Logo nochmal kleiner damit Burger
garantiert sichtbar bleibt */
@media (max-width: 390px) {
.site-logo img,
.site-header.is-scrolled .site-logo img {
width: 140px;
}
}
/* Footer in Spalten ab kleinem Laptop umbrechen — bei 1024–1199px
wird "Sitemap" rechts vom Kontakt-Drawer überdeckt */
@media (max-width: 1199px) {
.footer-inner {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.footer-nav-list {
justify-content: center;
flex-wrap: wrap;
}
}
/* Tablet (768–1023): mittlerer Section-Abstand zwischen Desktop (8rem) und Mobile (3.75rem) */
@media (min-width: 768px) and (max-width: 1023px) {
.section {
padding-block: 5.5rem;
}
}
@media (max-width: 767px) {
.section {
padding-block: 3.75rem;
}
}
/* ── FAQ-Akkordeon (Content-Seiten) ──────────────────────────────────── */
.faq-list {
margin: 0 0 2rem;
}
/* FAQ-Sektion bekommt mehr Luft nach oben: das H2 direkt vor der .faq-list wird
runtergeschoben, damit Headline + Block visuell als eigene Einheit auftauchen. */
h2:has(+ .faq-list) {
margin-top: 3rem;
}
.faq-item {
border-bottom: 1px solid var(--color-border);
}
.faq-item__question {
display: flex;
align-items: center;
padding: 1.25rem 0;
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 400;
color: var(--color-text-dark);
cursor: pointer;
list-style: none;
transition: color var(--transition);
}
.faq-item__question::-webkit-details-marker {
display: none;
}
.faq-item__question::after {
content: '';
flex-shrink: 0;
margin-left: auto;
width: 0.625rem;
height: 0.625rem;
border-right: 2px solid var(--color-primary);
border-bottom: 2px solid var(--color-primary);
transform: rotate(45deg);
transition: transform 0.3s ease;
}
details.faq-item[open] > .faq-item__question::after {
transform: rotate(-135deg);
}
.faq-item__question:hover {
color: var(--color-primary-dark);
}
.faq-item__answer {
padding: 0 0 1.25rem;
font-size: 1rem;
line-height: 1.7;
color: var(--color-text);
}
.faq-item__answer p {
margin: 0 0 1em;
}
.faq-item__answer p:last-child {
margin-bottom: 0;
}
/* ── 404 / Not-Found-Page ─────────────────────────────────────────────────── */
.not-found {
text-align: center;
max-width: 720px;
margin: 0 auto;
}
.not-found h1 {
margin-top: 0.5rem;
}
.not-found p {
color: var(--color-text);
margin-bottom: 2rem;
}
.not-found__links {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
margin-top: 2.5rem;
}
.not-found__links .btn {
margin-top: 0;
}
/* ── Leistungspakete: Paket-/Preistabelle (projektübergreifend) ─────────── */
/* CHIMERA:leistungspakete */
.leistungspakete {
display: grid;
grid-template-columns: repeat(var(--pakete-cols, 3), 1fr);
gap: 1.75rem;
align-items: start;
margin: 2rem 0;
}
.leistungspaket {
background: var(--color-white, #fff);
border: 1px solid var(--color-border, #e0d9cb);
border-radius: 6px;
overflow: hidden;
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
}
.leistungspaket--featured {
border-color: var(--color-primary, #aa9a7f);
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
}
.leistungspaket__head {
background: var(--color-primary, #aa9a7f);
color: #fff;
padding: 1.5rem;
text-align: left;
}
.leistungspaket--featured .leistungspaket__head {
background: var(--color-primary-dark, #8a7c63);
}
/* 2-Klassen-Spezifität: killt die globalen h3/p-Margins -> Padding bleibt gleichmäßig */
.leistungspaket .leistungspaket__name {
margin: 0;
color: #fff;
font-size: 1.3rem;
line-height: 1.2;
text-align: left;
}
.leistungspaket .leistungspaket__price {
margin: 0;
color: #fff;
font-size: 1rem;
opacity: 0.92;
text-align: left;
}
.leistungspaket .leistungspaket__features {
list-style: none;
margin: 0;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.leistungspaket .leistungspaket__features li {
position: relative;
margin: 0;
padding-left: 1.9rem;
line-height: 1.5;
color: var(--color-text, #444);
}
.leistungspaket .leistungspaket__features li::before {
content: '';
position: absolute;
left: 0;
top: 0.15em;
width: 1.15rem;
height: 1.15rem;
border: 0;
border-radius: 50%;
transform: none;
background: var(--color-primary, #aa9a7f);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M6.2 11.3 3.3 8.4l1.1-1.1 1.8 1.8 5-5L12.3 5z'/%3E%3C/svg%3E") center / 1.15rem no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M6.2 11.3 3.3 8.4l1.1-1.1 1.8 1.8 5-5L12.3 5z'/%3E%3C/svg%3E") center / 1.15rem no-repeat;
}
@media (max-width: 900px) {
.leistungspakete { grid-template-columns: 1fr; gap: 1.25rem; }
}