/* =================================================
   1. VARIABLEN & RESET
   ================================================= */
/* =================================================
   1. VARIABLEN & BASIS (Erhalten)
   ================================================= */
:root {


  --primary: #8DAA33;
  --secondary: #B5D757;
  --text: #4A4A4A;
  --light-gray: #E5E5E5;
  --white: #ffffff;
  --max-width: 1400px;
  --radius: 12px;
  --shadow: 0 6px 16px rgba(0,0,0,0.08);
}



* { margin: 0; padding: 0; box-sizing: border-box; }

/* 1. DER GLOBALER RESET (Ganz oben!) */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 2. ALLGEMEINE STYLES (Für Desktop & Mobile gleich) */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

/* 3. DEINE FIXES FÜR SPEZIELLE ELEMENTE (z.B. Usercentrics) */
#usercentrics-root {
    z-index: 99999999 !important;
    /* Empfehlung: 'fixed' statt 'relative', damit es über dem Content schwebt */
    position: fixed !important; 
}



/* =================================================
   BASIS-KORREKTUR (Wiederherstellung von Bild 1)
   ================================================= */
body {
  font-family: system-ui, sans-serif;
  background: var(--white);
  color: var(--text);
  /* Zurück auf Standardgröße, damit nichts "verkleinert" wirkt */
  font-size: calc(1.1rem * var(--ui-scale));
  line-height: 1.6;
}

/* =================================================
   HERO & PROFIL - WIEDERHERSTELLUNG BILD 1
   ================================================= */
.hero {
  /* Padding sorgt für den Abstand des Inhalts zum Rand */
  padding: 2.5rem 0; 
  
  /* Das Bild wird hier präzise gesteuert */
  background-image: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), 
                    url("img/beratung.webp");
  
  
  
  /* SKALIERUNG: 'cover' sorgt dafür, dass das Bild den Bereich füllt ohne zu verzerren */
  background-size: cover;
  
  /* Fixiert das Bild leicht beim Scrollen für einen edlen Effekt (optional) */
  background-attachment: scroll; 
  
  background-repeat: no-repeat;
  
 
}

.hero-profile {
  display: flex;
  gap: 4rem;           /* Breiterer Abstand zwischen Foto und Text */
  align-items: center; /* Zentriert Foto und Text vertikal zueinander */
  margin-top: 2rem;
}

.profile-photo {
  width: 320px;        /* Zurück auf die stattliche Größe aus Bild 1 */
  height: 320px;
  border-radius: 50%;
  object-fit: cover;
  border: 6px solid var(--white); /* Der weiße Rahmen aus deinem Entwurf */
  box-shadow: var(--shadow);
  flex-shrink: 0;      /* Verhindert, dass das Foto bei wenig Platz gequetscht wird */
}

.profile-quote {
  font-size: 1.5rem; /* Zitat muss ins Auge springen */
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

/* =================================================
   KACHELN (Wiederherstellung der Größe)
   ================================================= */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
}

.card {
  padding: 2.5rem; /* Mehr Innenabstand für die Kacheln */
  border-radius: 20px;
}

.card h3 {
  font-size: 1.6rem;
  margin-bottom: 1.2rem;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Fixiert die Leiste am Bildschirm */
/* Container für die Sticky Bar */
.sticky-sidebar {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999;
}

/* =================================================
   STICKY SIDEBAR - FINALES FIX
   ================================================= */

/* Grundzustand: Grün mit weißer Schrift */
.sticky-sidebar .icon-link {
  background-color: #556B2F !important; /* Dein Olivgrün */
  color: #ffffff !important;           /* Weißes Icon */
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  text-decoration: none !important;
  font-size: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transition: all 0.3s ease-in-out;
  border: 1px solid #556B2F;
}

/* Hover-Zustand: Hintergrund weiß, Schrift schwarz */
.sticky-sidebar .icon-link:hover {
  background-color: #ffffff !important; /* Weißer Hintergrund */
  color: #000000 !important;           /* Schwarze Schrift/Icon */
  transform: scale(1.1) translateX(-5px) !important; /* Vergrößern & nach links */
  border: 1px solid #000000 !important; /* Schwarzer Rand für Kontrast */
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* Zwingt auch Font-Awesome Icons (<i>) zum Farbwechsel beim Hover */
.sticky-sidebar .icon-link:hover i,
.sticky-sidebar .icon-link:hover span {
  color: #000000 !important;
}

/* Falls die Sidebar auf Mobilgeräten ausgeblendet werden soll */
@media (max-width: 768px) {
  .sticky-sidebar {
    display: none !important;
  }
}

/* =================================================
   2. DER PERFEKTE HEADER (Dein Wunsch-Design)
   ================================================= */
/* DIESER BLOCK BLEIBT UND WIRD NUR UM 2 ZEILEN ERGÄNZT */
/* =================================================
   HEADER & NAVIGATION (EXAKT NACH DEINER STRUKTUR)
   ================================================= */
header {
  background-color: var(--light-gray);
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
  position: relative;
  z-index: 10001; /* Sicherung gegen Überlagerung */
}

.header-flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}



/* Nav-Pill */
.nav-pill {
  margin-left: 4rem;
  flex: 1;
}

.nav-pill ul {
  display: flex;
  justify-content: flex-start;
  gap: 4.5rem;
  list-style: none;
}

/* WICHTIG: gilt jetzt für a UND summary */
.nav-pill a,
.nav-pill summary {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  line-height: 1.2;
  display: block;
  transition: color 0.3s ease;
  position: relative;
}

/* summary-spezifisch */
.nav-pill summary {
  cursor: pointer;
  list-style: none;
}
.nav-pill summary::-webkit-details-marker { display: none; }
.nav-pill summary::marker { content: ""; }

/* Hover für a UND summary */
.nav-pill a:hover,
.nav-pill summary:hover {
  color: var(--primary);
}

/* Unterstreichung: für a UND summary */
.nav-pill a::after,
.nav-pill summary::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 3px;
  background-color: var(--primary);
  transition: width 0.3s ease;
}

.nav-pill a:hover::after,
.nav-pill summary:hover::after {
  width: 100%;
}

/* Der neue, kräftige Button-Stil */
.area-pill {
  display: inline-block;
  padding: 10px 22px; /* Größerer Klickbereich */
  background-color: var(--white); 
  border: 2px solid var(--primary); /* Kräftigerer Rahmen in deinem Grün */
  border-radius: 50px; /* Vollständig abgerundet */
  color: var(--primary);
  font-size: 1.1rem; /* Größere Schrift für bessere Lesbarkeit */
  font-weight: 700;   /* Schön fett */
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Sanfter "Snap"-Effekt */
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  cursor: pointer;
}

/* Starker Hover-Effekt: Button füllt sich */
.area-pill:hover {
  background-color: var(--primary);
  color: var(--white);
  transform: translateY(-3px) scale(1.05); /* Hebt sich ab und wird minimal größer */
  box-shadow: 0 8px 15px rgba(141, 170, 51, 0.3);
  border-color: var(--primary);
}

/* Sonder-Pill für Videoberatung (Dein Akzent-Grün) */
.area-pill-accent {
  background-color: var(--secondary); /* Das hellere B5D757 */
  border-color: var(--secondary);
  color: #333;
}

.area-pill-accent:hover {
  background-color: #a4c64b; /* Etwas dunkler beim Hover */
  border-color: #a4c64b;
  color: #000;
}
/* =================================================
   3. KACHELN & BUTTONS (Wiederhergestellt)
   ================================================= */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem; /* Etwas mehr Luft zwischen den Karten */
  margin-top: 1.2rem;
  margin-bottom: 80px; /* WICHTIG: Das schafft Platz vor der grünen Welle */
  padding: 0 5%; /* Verhindert, dass die Karten am Bildschirmrand kleben */
}

.card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 1.5rem; /* Etwas großzügigeres Padding innen */
  border: 1px solid rgba(229,229,229,0.9);
  overflow: hidden;
  transition: all .2s ease; /* Etwas weicherer Übergang */
  z-index: 10; /* Stellt sicher, dass die Karten vor der Welle liegen */
}

/* Ein schönerer Hover-Effekt */
.card:hover { 
  transform: translateY(-8px); /* Karte hebt sich deutlicher ab */
  box-shadow: 0 15px 35px rgba(0,0,0,0.1); 
}
.card:hover { transform: translateY(-2px); }

.card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 10px;
  background: rgba(141,170,51,0.18);
}

/* Buttons */
.btn-primary, .profile-cta--green {
  display: inline-block;
  padding: 0.75rem 1.6rem;
  background: var(--primary);
  color: var(--white);
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(141,170,51,0.35);
}

.profile-cta {
  display: inline-block;
  padding: 0.75rem 1.6rem;
  background: #E67E22;
  color: #fff;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(230,126,34,0.35);
}


/* =================================================
   WAVE & BUTTONS (Final & Bereinigt)
   ================================================= */


.btn-wave {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Abstand zwischen Icon und Text */
    text-decoration: none; /* Entfernt den hässlichen Link-Unterstrich */
}

/* Kleiner Effekt: Wenn man mit der Maus drüberfährt, hebt sich der Button leicht */
.btn-wave:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    background-color: #fcfcfc;
}

/* Container für die Buttons über der Welle */
.wave-content-layout {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  max-width: var(--max-width); 
  margin: 0 auto;
  /* Hier steuern wir die Höhe: 25px schiebt die Buttons etwas höher in das Grün */
  padding: 25px 1.5rem 0 1.5rem; 
  right: 0;
  display: flex;
  align-items: flex-start; 
  z-index: 10;
}

/* Die Buttons selbst (Kompakt-Version) */

.btn-wave {
  padding: 0.55rem 1.1rem; /* Kompakterer Innenabstand */
  font-size: 1rem;         /* Angenehme Standardgröße */
  font-weight: 700;        /* Kräftig, aber nicht zu wuchtig */
  border-radius: 50px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Linker Bereich: Exakt die Breite deines Fotos (320px) */
.wave-left {
  flex: 0 0 320px; /* Fixiert die Breite auf 320px, kein Wachsen oder Schrumpfen */
  display: flex;
  justify-content: center; /* Zentriert den Button innerhalb der 320px (genau wie das Foto) */
}

/* Rechter Bereich: Die Kontakt-Buttons */
.wave-right {
  flex: 1; /* Dieser Teil nimmt den restlichen Platz ein */
  display: flex;
  justify-content: center; /* Zentriert Tel/Mail im verbleibenden Raum */
  gap: 2rem;
}

/* Button Basis-Stil */
.btn-wave {
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.3rem;
  white-space: nowrap;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.btn-orange {
  background: #E67E22;
  color: #ffffff;
  border: 2px solid #E67E22;
}

.btn-orange:hover {
  background: #cf6f1d;
  transform: scale(1.05);
}

.btn-white {
  background: #ffffff;
  color: var(--text);
  border: 2px solid #ffffff;
}

.btn-white:hover {
  background: #f0f0f0;
  transform: scale(1.05);
}

/* Mobil-Anpassung (Sauber zusammengefasst) */
@media (max-width: 1024px) {
  .wave-content-layout {
    flex-direction: column;
    top: 50%;
    gap: 1.5rem;
  }
  .wave-left, .wave-right {
    flex: none;
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
  .wave-right {
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
  }
}



  .wave-left, .wave-right {
    flex: none;
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }
}
/* Nur für die untere Welle */
/* Der Container nutzt die volle Breite */
/* 1. DER HAUPT-CONTAINER (Hält alles zusammen) */
.logo-ticker-overlay {
  position: absolute;
  /* Wir ziehen den Block weiter nach oben */
  top: 35%; 
  transform: translateY(-50%);
  width: 100%;
  overflow: hidden;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Falls die Überschrift noch zu nah an den Logos klebt, 
   kannst du den Abstand hier feinjustieren: */
.ticker-header {
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 35px; /* Etwas mehr Luft zwischen Satz und Logos */
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.ticker-header {
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 35px; /* Etwas mehr Luft zwischen Satz und Logos */
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* 3. DIE LAUFSCHIENE (Die Bewegung) */
.logo-scroll {
  display: flex;
  width: max-content; 
  animation: scroll-left 60s linear infinite; 
}

/* 4. DIE EINZELNEN NAMEN (Riesig und Fett) */
.kk-logo {
  font-size: 2.0rem; 
  font-weight: 700;
  color: #ffffff;
  padding: 0 80px; /* Viel Platz zwischen den Kassen */
  white-space: nowrap;
  text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
}

/* 5. DIE ANIMATION (Der Sprung-Trick) */
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } 
}

/* 6. HANDY-OPTIMIERUNG (Damit es dort nicht alles sprengt) */
@media (max-width: 768px) {
  .kk-logo {
    font-size: 1.5rem; /* Kleiner fürs Handy */
    padding: 0 30px;
  }
  .ticker-header {
    font-size: 1rem;
    margin-bottom: 15px;
  }
}


/* Container für das Formular */
.contact-card {
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    max-width: 600px;
    margin: 0 auto;
    border-top: 6px solid #556B2F; /* Dein Olivgrün */
    text-align: center;
}

.contact-card h2 {
    color: #333;
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
}

.contact-card p {
    color: #666;
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

/* Die Eingabefelder */
.green-contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.green-contact-form input, 
.green-contact-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    background-color: #f9f9f9;
    transition: border-color 0.3s ease;
}

/* Fokus-Effekt (wenn man reinklickt) */
.green-contact-form input:focus, 
.green-contact-form textarea:focus {
    outline: none;
    border-color: #8DAA33; /* Dein Primärgrün */
    background-color: #fff;
}

/* Der Sende-Button */
.green-contact-form button {
    background-color: #556B2F; /* Olivgrün */
    color: white;
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(85, 107, 47, 0.2);
}

.green-contact-form button:hover {
    background-color: #8DAA33; /* Wechselt zum helleren Grün beim Hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(141, 170, 51, 0.3);
	
}

.site-footer {
    background-color: #f4f4f4; /* Helles Grau passend zum Header */
    padding: 40px 0 20px 0;
    margin-top: 60px;
    border-top: 1px solid #ddd;
    color: #4A4A4A;
    text-align: center;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 25px; /* Abstand zwischen den Links */
    margin-bottom: 25px;
}

.footer-links a {
    text-decoration: none;
    color: #4A4A4A;
    font-size: 1.5rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #556B2F; /* Dein Olivgrün beim Drüberfahren */
}

.footer-divider {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 20px auto;
    max-width: 80%;
}

.footer-bottom {
    font-size: 1.4rem;
    opacity: 0.8;
}

.legal-links {
    margin-top: 10px;
}

.legal-links a {
    text-decoration: none;
    color: #4A4A4A;
    margin: 0 10px;
    font-weight: 700;
}

/* Mobil-Optimierung */
@media (max-width: 768px) {
    .footer-links {
        flex-direction: column;
        gap: 10px;
    }
}
/* Diese Regeln gelten NUR auf Seiten, wo <main class="subpage-layout"> steht */

.subpage-layout p {
    font-size: 1.2rem;   /* Größere Schrift */
    line-height: 1.8;    /* Mehr Zeilenabstand */
    margin-bottom: 20px;
}

.subpage-layout h1 {
    font-size: 2.5rem;
    color: #556B2F;
    margin-top: 30px;
}

.subpage-layout h2 {
    font-size: 1.8rem;
    color: #556B2F;
    margin-top: 40px;
	
	
}

/* --- UNTERSEITEN SPEZIFISCH --- */

/* Vergrößert alle Absätze innerhalb von .content-text, 
   aber NUR wenn die Seite die Klasse 'subpage' im Body hat */
body.subpage .content-text p {
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 25px; /* Schöner Abstand zwischen den Textblöcken */
    color: #333;
}

/* Falls du Listen (Checklisten) auf den Unterseiten nutzt */
body.subpage .content-text li {
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 12px;
}

/* Die Überschriften auf den Unterseiten */
body.subpage .content-text h2 {
    font-size: 1.7rem;
    color: #556B2F;
    margin-top: 40px;
    margin-bottom: 15px;
	
}
body.subpage .highlight-box {
    background-color: #f9fbf2; /* Ganz zartes Grün */
    border-left: 8px solid #8DAA33; /* Dicker grüner Balken links */
    padding: 30px;
    margin: 40px 0;
    border-radius: 0 15px 15px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

body.subpage .highlight-box h3 {
    color: #556B2F;
    font-size: 1.5rem; /* Große, klare Frage */
    margin-top: 0;
    margin-bottom: 15px;
}

body.subpage .highlight-box p {
    font-size: 1.4rem !important; /* Hier pushen wir die Größe extra hoch */
    line-height: 1.6;
    color: #333;
    margin-bottom: 0;
}

/* Spezielle Styles für die Pflegegrad-Karten auf Unterseiten */
body.subpage .pg-card {
    text-align: center;
    border-top: 5px solid #8DAA33;
    border-bottom: 1px solid #eee; /* Wir tauschen den grünen Balken von unten nach oben */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 200px;
}

body.subpage .pg-badge {
    background: #556B2F;
    color: white;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    margin: 0 auto 20px auto;
    font-size: 1rem;
}

body.subpage .pg-card p {
    font-size: 1.1rem !important; /* Etwas kleiner als der Fließtext, damit es in die Karte passt */
    line-height: 1.4;
    margin-bottom: 10px;
}

/* Die Karten für PG 2-5 leicht hervorheben, da diese "Muss"-Leistungen sind */
body.subpage .highlight-card {
    background-color: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    transform: scale(1.02);
}
/* Spezielle Warn-Box für versäumte Fristen */
.alert-card {
    background: #fff5f5; /* Ganz zartes Rot */
    border: 2px solid #e57373; /* Roter Rand */
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
}

.alert-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    color: #c62828; /* Dunkelrot für die Schrift */
}

.alert-header i {
    font-size: 2rem;
    margin-right: 15px;
}

.alert-header h2 {
    margin: 0;
    font-size: 1.6rem;
    color: #c62828;
}

.alert-content p {
    font-size: 1.15rem !important;
    line-height: 1.6;
    color: #333;
}

.example-box {
    background: #ffffff;
    border-left: 4px solid #556B2F; /* Dein dunkles Grün als Akzent */
    padding: 15px;
    margin-top: 20px;
    font-style: italic;
    font-size: 1.05rem;
}


html { font-size: 75%; }


/* Navi wieder gut lesbar trotz globalem Zoom */
.nav-pill a{
  font-size: 3rem;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Erzwingt genau 3 Spalten */
    gap: 25px;
    margin-top: 30px;
}

/* Für Handys schalten wir auf 1 Spalte um, damit es lesbar bleibt */
@media (max-width: 900px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 Spalten für Tablets */
    }
}

@media (max-width: 600px) {
    .card-grid {
        grid-template-columns: 1fr; /* 1 Spalte für Handys */
    }
}

/* Sorgt dafür, dass das Bild die gleiche Höhe wie die Karten hat */
.card-image img {
    width: 100%;
    height: 100%;
    min-height: 250px;
    object-fit: cover;
    display: block;
}
/* Städte-Pills gleichmäßig als Block */
.service-areas{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

/* Pills gleich hoch & schön zentriert */
.area-pill{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 44px;
  padding: 10px 16px; /* dein Design bleibt, nur konsistent */
}

/* Video-Info über volle Breite */
.area-pill-accent{
  grid-column: 1 / -1;
}

/* Telefonbutton auch über volle Breite, ohne Monster-Padding */
.area-phone{
  grid-column: 1 / -1;
  justify-content: center;
  padding: 14px 18px !important; /* ersetzt dein padding: 14px 220px */
  font-size: 1.2rem;
}

/* Telefon-Icon optisch passend */
.area-phone i{
  margin-right: 10px;
  font-size: 1.1rem;
}

/* Responsive: 2 Spalten auf Tablet, 1 Spalte auf Handy */
@media (max-width: 1024px){
  .service-areas{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .service-areas{ grid-template-columns: 1fr; }
  
}
.card-grid-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Bild soll wie Inhalt in einer Card wirken */
/* Bild-Card auf gleiche Höhe wie Textkarten bringen */
.card.card-media{
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

/* Bild wird beschnitten statt skaliert */
.card.card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;   /* DAS ist der Schlüssel */
  display: block;
}
.card-grid-3{
  align-items: stretch;
}
/* Desktop: 3 Spalten */
.card-grid-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* Bild-Card */
.card.card-media{
  padding: 0;
  overflow: hidden;
  display: flex;
}

.card.card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tablet */
@media (max-width: 1024px){
  .card-grid-3{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Bild bekommt volle Zeile für Ruhe */
  .card.card-media{
    grid-column: 1 / -1;
    height: 260px; /* kontrollierte Bildhöhe */
  }
}

/* Mobile */
@media (max-width: 640px){
  .card-grid-3{
    grid-template-columns: 1fr;
  }

  .card.card-media{
    height: 220px;
  }
}

html, body { max-width: 100%; overflow-x: hidden; }


.wave-container .wave { line-height: 0; }
.wave-container .wave svg { display: block; width: 100%; height: clamp(80px, 10vw, 160px); }
@media (max-width: 768px) {
  .sticky-sidebar {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .wave-content-layout {
    position: relative;
    padding: 1.5rem 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
  }

  .wave-content-layout a.btn-wave {
    width: 100%;
    text-align: center;
  }
}
@media (max-width: 768px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .card-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
/* =========================
   WAVE RESET – FINAL
   ========================= */

/* Welle volle Breite */
.wave-container{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}

/* SVG immer 100% */
.wave-container .wave{ line-height: 0; }
.wave-container .wave svg{
  display:block;
  width:100%;
  height: auto;
}

/* Buttons über der Welle (Desktop) */
.wave-content-layout{
  position:absolute;
  top:0;
  left:0;
  right:0;
  max-width: var(--max-width);
  margin:0 auto;
  padding: 25px 1.5rem 0;
  display:flex;
  align-items:flex-start;
  gap: 2rem;
  z-index: 10;
}

.wave-left{
  flex: 0 0 320px;
  display:flex;
  justify-content:center;
}

.wave-right{
  flex:1;
  display:flex;
  justify-content:center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Button Basis */
.btn-wave{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 0.8rem 1.2rem;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 800;
  white-space: nowrap;
}

/* Mobile: Buttons untereinander, keine Absolute-Position */
@media (max-width: 768px){
  .wave-content-layout{
    position: relative;
    padding: 1rem 1rem 0;
    flex-direction: column;
    align-items: stretch;
  }
  .wave-left{ flex: none; width:100%; }
  .wave-right{ flex-direction: column; align-items: stretch; }
  .btn-wave{ width:100%; }
}
.wave-with-logos {
  position: relative;   /* 🔑 Bezugspunkt */
}

/* Ticker liegt ÜBER der Welle */
.logo-ticker-overlay {
  position: absolute;
  top: 8%;
  left: 0;
  width: 100%;
  z-index: 10;
  pointer-events: none;
}
/* Grundzustand Mobil (Beispiel) */
@media (max-width: 768px) {
  .nav-pill {
    display: none; /* Versteckt das Menü standardmäßig auf Handy */
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: #fff;
    flex-direction: column;
    z-index: 1000;
  }

  /* Wenn die Klasse .open durch JS hinzugefügt wird */
  .nav-pill.open {
    display: block; 
  }

  /* Hamburger Animation (optional, falls gewünscht) */
  .nav-toggle.is-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .nav-toggle.is-active span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle.is-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* Der Hamburger-Button an sich */
.nav-toggle {
  display: none; /* Standardmäßig auf Desktop versteckt */
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1100; /* Muss über dem Menü liegen */
  position: relative;
}

/* Die drei Striche im Button */
.nav-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #556B2F; /* Deine dunkelgrüne Farbe */
  margin: 5px 0;
  transition: 0.3s;
}

@media (max-width: 768px) {
  .nav-toggle {
    display: block; /* Auf dem Handy anzeigen */
  }

  /* Positionierung im Header-Flex */
  .header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
/* 1. Den Button auf dem Desktop verstecken */
.nav-toggle {
    display: none;
}

@media (max-width: 768px) {
    /* 2. Den Button auf dem Handy anzeigen */
    .nav-toggle {
        display: flex;         /* Nutze Flex, um die Striche auszurichten */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 40px;           /* Wichtig: Feste Breite */
        height: 40px;          /* Wichtig: Feste Höhe */
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 2000;         /* Ganz nach oben damit */
        position: relative;
    }

    /* 3. Die Striche SICHTBAR machen */
    .nav-toggle span {
        display: block;
        width: 30px;           /* Breite der Striche */
        height: 3px;           /* Dicke der Striche */
        background-color: #556B2F; /* Dein dunkles Grün */
        margin: 3px 0;         /* Abstand zwischen den Strichen */
        transition: all 0.3s ease;
        border-radius: 2px;
    }
}
@media (max-width: 768px) {
    .header-flex {
        display: flex;
        justify-content: space-between; /* Logo links, Hamburger rechts */
        align-items: center;
        padding: 10px 15px;
    }
}
@media (max-width: 768px) {
  #main-nav {
    display: none; 
    /* Fixiert das Menü unter den Header */
    position: absolute;
    top: 100%; /* Startet direkt unter dem Header-Container */
    left: 0;
    width: 100%;
    background: #ffffff;
    z-index: 9999; /* Damit es über dem Hero-Bild liegt */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    padding: 20px 0;
  }

  #main-nav.open {
    display: block !important;
  }

  /* Die Liste untereinander erzwingen */
  #main-nav ul {
    display: flex !important;
    flex-direction: column !important; /* WICHTIG: Untereinander statt nebeneinander */
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #main-nav ul li {
    width: 100%;
    text-align: center;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0; /* Optionale Trennlinie */
  }

  #main-nav ul li a {
    display: block;
    font-size: 1px;
    line-height: 1.4;
    color: #333;
    text-decoration: none;
  }
}
/* --- FINALES NAVIGATION FIX --- */
@media (max-width: 768px) {
  
  /* Den Header-Container vorbereiten */
  .header-flex {
    position: relative; /* Wichtig für die Positionierung des Menüs */
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Das Menü-Fenster an sich */
  #main-nav {
    display: none; 
    position: absolute;
    top: 100%;       /* Erscheint direkt unter der Header-Leiste */
    left: 0;
    width: 100%;
    background: #ffffff !important; /* Weißer Hintergrund */
    z-index: 9999;   /* Über den restlichen Inhalt legen */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    padding: 10px 0;
  }

  /* Wird vom JavaScript "ausgerollt" */
  #main-nav.open {
    display: block !important;
  }

  /* Die Liste innerhalb des Menüs */
  #main-nav ul {
    display: flex !important;
    flex-direction: column !important; /* Untereinander erzwingen */
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Die einzelnen Links */
  #main-nav ul li {
    width: 100%;
    border-bottom: 1px solid #f0f0f0; /* Trennlinie */
  }

  #main-nav ul li a {
    display: block;
    padding: 15px 20px;
    color: #333333 !important;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    text-align: left; /* Oder center, je nach Geschmack */
  }

  /* Das Logo verkleinern, damit Platz für den Hamburger ist */
  .header-logo img {
    max-height: 70px;
    width: auto;
  }
}
/* --- ULTIMATIVER FIX FÜR NAVI-PILLS --- */

/* Grundzustand: Hellgrün / Weiße Schrift */
#main-nav ul li a.pill-link, 
#main-nav ul li summary.pill-link {
    background-color: #8DAA33 !important;
    color: #ffffff !important;
    border: 2px solid #8DAA33 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 190px;
    height: 70px;
    border-radius: 50px;
    text-align: center;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 18.5px;
    transition: all 0.3s ease !important;
}

/* Hover-Zustand: WEISS / SCHWARZE SCHRIFT */
#main-nav ul li a.pill-link:hover, 
#main-nav ul li summary.pill-link:hover {
    background-color: #ffffff !important;
    color: #000000 !important; /* Hier zwingen wir Schwarz */
    border-color: #000000 !important;
    box-shadow: 0 6px 15px rgba(0,0,0,0.2) !important;
    transform: translateY(-2px) !important;
}

.content-wrapper {
  position: relative; /* Wichtig, damit das Siegel hier verankert bleibt */
  max-width: 1200px;  /* Oder die Breite deiner Seite */
  margin: 0 auto;
  padding-top: -5px;
}

.side-siegel {
  position: absolute;
  right: 0;           /* Ganz nach rechts im Content-Bereich */
  top: 0;             /* Auf die gleiche Höhe wie die h1 */
  z-index: 10;
}

.side-siegel img {
  height: 140px;      /* Deine gewünschte Größe */
  width: auto;
  display: block;
}

/* Entferne falls vorhanden den Hintergrund vom alten Siegel-Container */
.header-siegel {
  display: none;      /* Falls der alte Container noch im HTML ist */
}
/* 1. CONTAINER-FIX (Alles Überflüssige hier löschen) */
#main-nav ul {
    display: flex !important;
    justify-content: flex-start !important; 
    align-items: center !important;
    gap: 15px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* FINAL – Navi-Pills Schriftgröße */
#main-nav ul li a.pill-link{
  font-size: 19px !important;  /* 18–20px ist meist perfekt */
  line-height: 1.15 !important;
}
.form-status[data-ok="1"]{ /* success */
  /* optional Farbe/Style */
}
.form-status[data-ok="0"]{ /* error */
  /* optional Farbe/Style */
}

/* Accordion im Navi (Pill-Pulldown) */
.nav-accordion details { position: relative; }



/* Panel unterhalb (Pull-Down) = große Pill */
.nav-accordion .panel{
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;

  background: var(--white);
  border-radius: 999px;     /* pill */
  box-shadow: var(--shadow);
  padding: 10px;            /* „Rand“ um die Mini-Pills */

  display: flex;
  gap: 10px;
  align-items: center;
  white-space: nowrap;      /* verhindert Umbruch */
}

/* Links im Panel = Mini-Pills */
.nav-accordion .panel a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 16px;        /* Größe hier testen */
  border-radius: 999px;

  text-decoration: none;
  background: var(--secondary);
  color: #fff;

  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1;

  transition: transform .15s ease, background .15s ease;
}

.nav-accordion .panel a:hover{
  background: var(--primary);
  transform: translateY(-1px);
}

/* Pfeil drehen wenn offen */
.nav-accordion details[open] .chev { transform: rotate(180deg); }

.nav-accordion .chev {
  font-size: 0.75em;
  margin-left: 4px;   /* Feintuning */
  transition: transform .2s ease;
}
/* Pfeil soll die Pill-Größe nicht verändern */
.pill-dd{
  position: relative;
  padding-right: 40px;  /* Platz für Pfeil */
}

.pill-dd .chev{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  font-size: 0.75em;
}


/* FINAL OVERRIDE für PILL im NAV */
#main-nav a.pill-link:hover,
#main-nav summary.pill-link:hover{
    background-color: #b1d235 !important;
    color: #ffffff !important;
    border-color: #b1d235 !important;
    text-decoration: none !important;
}

/* Unterstrich komplett deaktivieren */
#main-nav a.pill-link::after,
#main-nav summary.pill-link::after{
    display: none !important;
}
/* 1) Basis: überall gleich rechnen */
* { box-sizing: border-box; }

/* 2) Header-Nav: keine “komischen” Default-Abstände */
#main-nav ul { margin: 0; padding: 0; }

/* 3) details/summary: Firefox vs Edge angleichen */
.nav-accordion summary { list-style: none; }
.nav-accordion summary::-webkit-details-marker { display: none; }

h3 {
  font-size: 20px;
 
}

p {
  font-size: 14px;
  line-height: 1.4;
}
body {
  font-size: 14px;
  line-height: 1.4;
}

/* Grundfarben basierend auf deinem Bild */
:root {
    --pflege-gruen: #88b04b; /* Das Grün aus der Unterkante */
    --text-dunkel: #333333;
    --text-grau: #666666;
    --bg-hell: #f9f9f9;
}

.service-detail {
    max-width: 800px;
    margin: 40px auto;
    font-family: Arial, sans-serif;
    color: var(--text-dunkel);
    line-height: 1.6;
}

h1 { color: var(--text-dunkel); border-bottom: 2px solid var(--pflege-gruen); padding-bottom: 10px; }
h2 { color: var(--pflege-gruen); margin-top: 30px; }
h3 { color: var(--text-dunkel); font-size: 1.1rem; }

.important-note {
    background-color: #fff3cd; /* Sanftes Gelb für Warnhinweis */
    padding: 15px;
    border-left: 5px solid #ffc107;
    margin: 20px 0;
}

.highlight-box {
    background-color: var(--bg-hell);
    padding: 15px;
    border-left: 5px solid var(--pflege-gruen);
}

.praxis-beispiel {
    background-color: #f0f4e8; /* Ganz helles Grün */
    padding: 20px;
    border-radius: 8px;
    font-style: italic;
    margin: 25px 0;
}

.check-list li {
    list-style-type: '✓';
    padding-left: 10px;
    margin-bottom: 5px;
    color: var(--text-dunkel);
}

.separator {
    border: 0;
    height: 1px;
    background: #eee;
    margin: 40px 0;
}

.service-footer {
    background-color: var(--pflege-gruen);
    color: white;
    padding: 25px;
    border-radius: 8px;
    margin-top: 30px;
}

.service-footer h3 { 
  color: white; 
}

/* ========================================= */
/* ✅ BASIS FIXES (GLOBAL)                   */
/* ========================================= */

/* verhindert horizontales Scrollen */
html, body {
  overflow-x: hidden;
}

/* Medien skalieren sauber */
img, svg, video, canvas, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Cookie-Banner fixieren */
#usercentrics-root {
  z-index: 99999999 !important;
  position: fixed !important;
}


/* ========================================= */
/* 💻 NOTEBOOK / KLEINER DESKTOP (bis 1366px) */
/* ========================================= */
@media (max-width: 1366px) {

  .container,
  .section,
  .content-box {
    width: 120% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .card,
  .service-card,
  .benefit-card {
    padding: 25px !important;
  }

  .btn,
  .button,
  .cta {
    padding: 12px 16px !important;
  }

  h1 {
    font-size: 2rem !important;
  }

  h2 {
    font-size: 1.6rem !important;
  }
}


/* ========================================= */
/* ✅ MOBILE-KORREKTURBLOCK FINAL            */
/* ========================================= */

/* Logo allgemein nicht künstlich klein machen */
.logo,
.header-logo img,
header img {
  height: 60px !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
}

/* ========================================= */
/* 📱 MOBILE (bis 768px)                     */
/* ========================================= */
@media (max-width: 768px) {

  /* ===== HEADER / LOGO ===== */
  .logo,
  .header-logo img,
  header img {
    height: 52px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    display: block !important;
  }

  /* Falls Header oder Nav das Logo einquetschen */
  header,
  .header,
  .navbar,
  .topbar,
  .nav-wrapper {
    min-height: unset !important;
  }

  /* ===== NAVIGATION / BUTTONS / PILLS ===== */
  nav,
  .nav,
  .navbar,
  .nav-links,
  .menu,
  .header-nav,
  .pill-row,
  .nav-row,
  .button-row {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  nav a,
  .nav a,
  .navbar a,
  .nav-links a,
  .menu a,
  .header-nav a,
  .pill,
  .nav-pill,
  .btn,
  .button,
  .cta,
  .contact-button,
  .hero-button,
  button {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    white-space: normal !important;
    justify-content: center !important;
  }

  /* ===== SIEGEL / DIE BESTEN ===== */
  .seal,
  .badge,
  .quality-badge,
  .review-badge,
  .fixed-badge,
  .floating-badge,
  .siegel,
  .quality-seal {
    position: static !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 20px auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 180px !important;
    z-index: 10 !important;
  }

  .seal-wrapper,
  .badge-wrapper,
  .review-wrapper,
  .siegel-wrapper {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 20px 0 !important;
  }

  /* ===== PROFILBILD / INHABER ===== */
  .profile-photo {
    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 20px auto !important;
    object-fit: cover !important;
  }

  /* Mögliche Container des Inhaber-Bereichs auf Umbruch zwingen */
  .profile-container,
  .profile-box,
  .profile-row,
  .owner-box,
  .owner-row,
  .about-box,
  .about-row,
  .team-box,
  .team-row,
  .inhaber-box,
  .inhaber-row,
  .two-col,
  .split-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
  }

  .profile-text,
  .owner-text,
  .about-text,
  .team-text,
  .inhaber-text {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* ========================================= */
/* ✅ MOBILE-FIX FINAL: LOGO / NAV / SIEGEL / PROFIL */
/* ========================================= */

@media (max-width: 768px) {

  /* ===== HEADER / LOGO ===== */
  .logo,
  .header-logo img,
  header img {
    height: 68px !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
    margin: 0 auto !important;
  }

  .header,
  header,
  .navbar,
  .nav-wrapper,
  .topbar {
    min-height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* ===== NAVI-BEREICH ===== */
  nav,
  .nav,
  .navbar,
  .nav-links,
  .menu,
  .header-nav,
  .pill-row,
  .nav-row,
  .button-row {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  nav a,
  .nav a,
  .navbar a,
  .nav-links a,
  .menu a,
  .header-nav a,
  .pill,
  .nav-pill,
  .btn,
  .button,
  .cta,
  .contact-button,
  .hero-button,
  button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    white-space: normal !important;
  }

  /* ===== SIEGEL ===== */
  .seal,
  .badge,
  .quality-badge,
  .review-badge,
  .fixed-badge,
  .floating-badge,
  .siegel,
  .quality-seal {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    display: block !important;
    width: auto !important;
    max-width: 160px !important;
    margin: 15px auto !important;
    z-index: 1 !important;
  }

  .seal-wrapper,
  .badge-wrapper,
  .review-wrapper,
  .siegel-wrapper {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 10px 0 20px 0 !important;
  }

  /* ===== PROFILBILD ===== */
  .profile-photo {
    width: 100% !important;
    max-width: 280px !important;
    height: auto !important;
    display: block !important;
    margin: 20px auto !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }

  /* ===== UM BRUCH FÜR INHABER-BEREICH ===== */
  .profile-container,
  .profile-box,
  .profile-row,
  .profile-photo,
  .owner-box,
  .owner-row,
  .about-box,
  .about-row,
  .team-box,
  .team-row,
  .inhaber-box,
  .inhaber-row,
  .two-col,
  .split-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
  }

  .profile-text,
  .owner-text,
  .about-text,
  .team-text,
  .inhaber-text {
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media (max-width: 768px) {

  .content-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .side-siegel {
    position: static !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 10px auto 20px auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    pointer-events: auto !important;
  }

  .side-siegel a {
    display: block !important;
    pointer-events: auto !important;
  }

  .side-siegel img {
    width: 140px !important;
    max-width: 140px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }
}
/* ========================================= */
/* ✅ EXAKTER MOBILE-FIX FINAL               */
/* ========================================= */

@media (max-width: 768px) {

  /* ===== HEADER / LOGO ===== */
  .logo,
  .header-logo img,
  header img {
    height: 72px !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
    margin: 0 auto 10px auto !important;
  }

  header,
  .header,
  .topbar,
  .navbar,
  .nav-wrapper,
  .header-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* ===== NAVI / PILLS ===== */
  nav,
  .nav,
  .navbar,
  .nav-links,
  .menu,
  .header-nav,
  .pill-row,
  .nav-row,
  .button-row {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  nav a,
  .nav a,
  .navbar a,
  .nav-links a,
  .menu a,
  .header-nav a,
  .pill,
  .nav-pill,
  .btn,
  .button,
  .cta,
  button {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    white-space: normal !important;
  }

  /* ===== SIEGEL ===== */
  .qsiegel,
  img[src*="qsiegel.jpg"] {
    position: static !important;
    display: block !important;
    width: 140px !important;
    max-width: 140px !important;
    height: auto !important;
    margin: 15px auto !important;
    transform: none !important;
    float: none !important;
  }

  /* Falls der Siegel-Container positioniert ist */
  .seal-wrapper,
  .badge-wrapper,
  .review-wrapper,
  .siegel-wrapper,
  .qsiegel-wrapper {
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 10px 0 20px 0 !important;
  }

  /* ===== INHABERBILD ===== */
  .profile-photo {
    width: 100% !important;
    max-width: 280px !important;
    height: auto !important;
    display: block !important;
    margin: 20px auto !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    float: none !important;
  }

  /* ===== GANZ WICHTIG: ZWEISPALTIGE BEREICHE AUF MOBILE UMBRECHEN ===== */
  .profile-container,
  .profile-box,
  .profile-row,
  .owner-box,
  .owner-row,
  .about-box,
  .about-row,
  .team-box,
  .team-row,
  .inhaber-box,
  .inhaber-row,
  .two-col,
  .split-box,
  .intro-grid,
  .city-profile-section,
  .portrait-cities,
  .portrait-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 20px !important;
  }

  /* falls Bild und Städte jeweils direkte Kinder sind */
  .profile-container > *,
  .profile-box > *,
  .profile-row > *,
  .owner-box > *,
  .owner-row > *,
  .about-box > *,
  .about-row > *,
  .team-box > *,
  .team-row > *,
  .inhaber-box > *,
  .inhaber-row > *,
  .two-col > *,
  .split-box > *,
  .intro-grid > *,
  .city-profile-section > *,
  .portrait-cities > *,
  .portrait-row > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Text / Städtebereich */
  .profile-text,
  .owner-text,
  .about-text,
  .team-text,
  .inhaber-text,
  .city-pills,
  .cities,
  .locations {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* Desktop */
header,
.header,
.navbar,
.header-inner,
.nav-wrapper {
  min-height: 130px !important;
  display: flex !important;
  align-items: center !important;
}

/* Mobile */
@media (max-width: 768px) {
  header,
  .header,
  .navbar,
  .header-inner,
  .nav-wrapper {
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
}
/* ========================================= */
/* LOGO FIX DESKTOP + MOBILE                 */
/* ========================================= */

/* Desktop */
.logo,
.header-logo img {
  height: 175px !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
}

/* Mobile */
@media (max-width: 768px) {
  .logo,
  .header-logo img {
    height: 95px !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
    margin: 0 auto !important;
  }
}

/* ========================================= */
/* FINAL MOBILE FIX – echte Klassennamen     */
/* ========================================= */

/* Desktop Logo */
.logo,
.header-logo img,
.logo img {
  height: 175px !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
}

/* Mobile */
@media (max-width: 768px) {

  html,
  body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  body {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ----- Logo / Header ----- */
  .logo,
  .header-logo img,
  .logo img {
    height: 95px !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
    margin: 0 auto 12px auto !important;
  }

  header,
  .header,
  .navbar,
  .nav-wrapper,
  .header-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
  }

  /* ----- rechter Überstand / Siegel ----- */
  .content-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    overflow-x: hidden !important;
  }

  .side-siegel {
    position: static !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 10px auto 20px auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    pointer-events: auto !important;
    z-index: 1 !important;
  }

  .side-siegel a {
    display: block !important;
    pointer-events: auto !important;
  }

  .side-siegel img {
    width: 140px !important;
    max-width: 140px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* ----- Hero / Profilbereich ----- */
  .hero,
  .hero .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  .hero-profile {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .profile-media,
  .profile-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .profile-photo {
    width: 100% !important;
    max-width: 280px !important;
    height: auto !important;
    display: block !important;
    margin: 20px auto !important;
    float: none !important;
    object-fit: cover !important;
  }

  /* ----- Städte / Pills ----- */
  .areas-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .service-areas {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }

  .area-pill,
  .area-phone,
  .btn-wave,
  .btn-white {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }
   }
    


  .area-pill {
    padding: 14px 16px !important;
  }

  .area-pill-accent {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
    white-space: normal !important;
  }

  /* ----- obere Navi-Pills ----- */
  nav,
  .nav,
  .navbar,
  .nav-links,
  .menu,
  .header-nav,
  .pill-row,
  .nav-row,
  .button-row {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }

  nav a,
  .nav a,
  .navbar a,
  .nav-links a,
  .menu a,
  .header-nav a,
  .pill,
  .nav-pill,
  .btn,
  .button,
  .cta,
  button {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    padding: 14px 16px !important;
    margin: 0 !important;
  }
}
/* ========================================= */
/* RECHTEN ÜBERSTAND ENTFERNEN               */
/* ========================================= */

html,
body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

@media (max-width: 768px) {

  .content-wrapper,
  .hero,
  .hero .container,
  .areas-wrap,
  .service-areas,
  .hero-profile,
  .profile-card,
  .profile-media {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .content-wrapper {
    overflow-x: hidden !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .side-siegel {
    position: static !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px auto 20px auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    pointer-events: auto !important;
  }

  .side-siegel a {
    display: block !important;
    max-width: 100% !important;
  }

  .side-siegel img {
    width: 140px !important;
    max-width: 140px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  .hero-profile {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
  }

  .profile-media,
  .profile-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .profile-photo {
    width: 100% !important;
    max-width: 280px !important;
    height: auto !important;
    display: block !important;
    margin: 20px auto !important;
    float: none !important;
  }

  .service-areas {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

 .area-pill,
  .area-pill-accent,
  .area-phone,
  .btn-wave,
  .btn-white {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
} /* <--- Diese Klammer schließt die Media-Query ab und hat gefehlt */
/* ========================================= */
/* LOGO FIX OPTIMIERT                        */
/* ========================================= */

/* Desktop: Bleibt wie von dir gewünscht */
.logo {
  display: inline-block !important;
}

.logo img {
  height: 120px !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
}

/* Mobile: Anpassung für bessere Sichtbarkeit */
@media (max-width: 768px) {
  .logo {
    display: block !important;
    text-align: center !important;
    margin: -30 auto 5px auto !important; /* Etwas mehr Luft nach oben/unten */
  }

  .logo img {
    /* HIER ANPASSEN: 150px oder 160px machen es deutlich präsenter */
    height: 140px !important; 
    width: auto !important;
    
    /* Verhindert, dass das Logo bei sehr kleinen Handys rechts rausragt */
    max-width: 90% !important; 
    
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }
}
@media (max-width: 768px) {
    #main-nav {
        /* Wir ändern die Richtung von Reihe auf Spalte */
        flex-direction: column !important;
        
        /* Zentriert die Buttons auf dem Handy */
        align-items: center !important;
        
        /* Sorgt dafür, dass das Navi den Content nach unten schiebt statt ihn zu überlappen */
        position: relative !important; 
        
        /* Falls die Buttons zu breit sind, begrenzen wir sie */
        width: 100% !important;
        padding: 10px 0 !important;
    }

    #main-nav a, #main-nav .button {
        /* Damit die Buttons untereinander Platz haben */
        margin-bottom: 10px !important;
        width: 90% !important; /* Fast volle Breite für bessere Klickbarkeit */
        text-align: center !important;
    }
}

@media (max-width: 768px) {

  header .container,
  .header-inner,
  .nav-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .logo {
    order: 1 !important;
    flex-basis: 100% !important;
    width: 100% !important;
    text-align: center !important;
    margin: -30 auto 5px auto !important; /* Etwas mehr Luft nach oben/unten */
  }

  .logo img {
    display: block !important;
    margin: 0 auto !important;
    height: 120px !important;
    width: auto !important;
    max-width: 90% !important;
  }

  #main-nav,
  .nav-links,
  .menu,
  .w-nav-menu {
    order: 2 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
  }
}

  /* 1. HEADER-BEREICH (Grauer Hintergrund, flächig) */
  header, .header, .navbar, .nav-wrapper, .section.header {
    background-color: #f4f4f4 !important; 
    width: 100% !important;
    display: block !important;
    padding: 10px 0 0 0 !important; /* Unten auf 0 gesetzt */
    margin: 0 !important;
    box-shadow: none !important;
  }

  /* 2. LOGO: RIESIG & KEIN ABSTAND NACH UNTEN */
  .logo, .header-logo, .logo a {
    display: block !important;
    width: 100% !important;
    margin: 0 auto -5px auto !important; /* Negativer Margin zieht Navi extrem nah ran */
    text-align: center !important;
  }

  .logo img, .header-logo img {
    height: 190px !important; /* Logo-Power! */
    min-height: 190px !important;
    width: auto !important;
    max-width: 95% !important;
    display: block !important;
    margin: -30 auto 5px auto !important; /* Etwas mehr Luft nach oben/unten */
  }
@media (max-width: 768px) {

  /* NAV-CONTAINER OHNE WEISSEN BLOCK */
  #main-nav {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* UL SAUBER OHNE EINRÜCKUNG */
  #main-nav ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    align-items: center !important;
    background: transparent !important;
  }

  #main-nav li {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .pill-link,
  .nav-accordion summary {
    width: 96% !important;
    max-width: none !important;
    margin: 1px auto !important;
    padding: 12px 10px !important;
    background-color: #92b032 !important;
    color: white !important;
    border-radius: 50px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    text-decoration: none !important;
    line-height: 1.1 !important;
    box-sizing: border-box !important;
  }

  .nav-accordion,
  .nav-accordion details {
    width: 94% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
}
  
    /* neuer media block - Abstand LOGO zum Navi*/
  
 @media (max-width: 768px) {
  .logo,
  .header-logo,
  .logo a {
    margin: 0 auto -90px auto !important;
    padding: 0 !important;
  }

  .logo img,
  .header-logo img {
    display: block !important;
    margin: 0 auto !important;
    height: 160px !important;
    width: auto !important;
    max-width: 95% !important;
  }

  #main-nav {
    margin: 0 !important;
    padding: 0 !important;
  }

  #main-nav ul,
  #main-nav li {
    margin: 0 !important;
    padding: 0 !important;
  }

  #main-nav a,
  #main-nav .button,
  .pill-link,
  .nav-accordion summary {
    margin-top: 1px !important;
    margin-bottom: 1px !important;
  }
}

@media (max-width: 768px) {
  .side-siegel {
    display: none !important;
  }
}
.pill-link {
  white-space: nowrap;
}

.area-pill {
  white-space: nowrap;
}

@media (min-width: 769px) {
  header {
    zoom: 0.9 !important;
  }
}

@media (max-width: 768px) {
  /* Den Container (Listenpunkt) zentrieren */
  #main-nav ul li {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 5px 0 !important;
  }

  /* Den Button (Pill-Link) selbst zentrieren */
  #main-nav ul li a.pill-link, 
  #main-nav ul li summary.pill-link,
  .pill-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Breite begrenzen, damit er nicht am Rand klebt */
    width: 90% !important; 
    max-width: 400px !important; /* Optional: Maximale Breite für große Handys */
    
    /* Zentrierung durch Margin Auto */
    margin: 8px auto !important; 
    
    /* Text-Umbruch erlauben, falls das Wort zu lang ist */
    white-space: normal !important;
    text-align: center !important;
    
    /* Padding korrigieren für bessere Klickfläche */
    padding: 12px 20px !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 768px) {
  /* 1. Verhindert, dass die ganze Seite seitlich wackelt */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative;
  }

  /* 2. Die Karte radikal einrücken */
  .contact-card {
    width: auto !important; /* Erlaubt dem Browser die Breite selbst zu berechnen */
    max-width: calc(100vw - 20px) !important; /* Viewport-Breite minus Sicherheitsabstand */
    margin: 10px !important; /* Simpler Abstand zu allen Seiten */
    padding: 1rem !important;
    box-sizing: border-box !important;
    display: block !important;
    float: none !important; /* Falls irgendwo ein altes Float rumgeistert */
  }

  /* 3. Den Übeltäter im Inneren finden: Die Felder */
  .contact-card input, 
  .contact-card textarea,
  .contact-card form {
    width: 100% !important;
    min-width: 0 !important; /* Ganz wichtig! Verhindert das Aufblähen */
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 4. Der Text bei der Checkbox (oft der Grund für Überbreite) */
  .contact-card .checkbox-wrapper, 
  .contact-card label,
  .contact-card p {
    white-space: normal !important; /* Erlaubt Zeilenumbrüche */
    word-break: break-word !important; /* Bricht extrem lange Wörter (Datenschutzerklärung) */
    display: inline-block !important;
    width: 100% !important;
    text-align: left !important;
  }
}
/* Gezielter Fix für mobile Endgeräte (Samsung S24/S25 & Co) */
@media (max-width: 480px) {

  /* 1. NAVIGATION & LOGO ZENTRIEREN */
  #main-nav, 
  #main-nav ul, 
  .header-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  #main-nav ul li {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    list-style: none !important;
  }

  /* Die Pill-Links (Buttons) */
  #main-nav ul li a.pill-link, 
  .pill-link {
    width: 85% !important; /* Etwas schmaler für besseren Look */
    max-width: 320px !important;
    margin: 8px auto !important; /* DAS zentriert den Button im Li */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    float: none !important;
  }

  /* 2. ALLE KARTEN (Service, Benefit, Kontakt) */
  /* Wir sprechen alle deine Klassen gezielt an */
  .card, 
  .service-card, 
  .benefit-card, 
  .contact-card {
    width: calc(100% - 30px) !important; /* Garantiert links & rechts 15px Rand */
    max-width: 100% !important;
    margin: 20px auto !important; /* Zentriert die Karte im Viewport */
    padding: 20px 15px !important; /* Reduziertes Padding, damit Inhalt Platz hat */
    float: none !important;
    display: block !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: 0 !important; /* Falls ein left-offset existiert */
  }

  /* 3. FORMULAR-INHALTE */
  .contact-card form, 
  input[type="text"], 
  input[type="email"], 
  input[type="tel"], 
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 4. DEN "LINKS ABGESCHNITTEN" EFFEKT BEHEBEN */
  /* Oft verursacht durch übergeordnete Container mit Padding */
  section, .container, .elementor-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }
}
@media (max-width: 480px) {
  /* 1. DIE WICHTIGSTE REGEL: Alle Container auf volle Breite und Zentrierung */
  /* Das spricht die typischen WordPress/Elementor/Grid Container an */
  .container, 
  .elementor-column-wrap, 
  .elementor-widget-wrap, 
  .wp-block-group__inner-container,
  section > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Erzwingt horizontale Zentrierung der Kinder */
    justify-content: center !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 auto !important;
  }

  /* 2. NAVIGATION: Wir zwingen die Liste, sich im Navi-Container zu verteilen */
  #main-nav ul {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-left: 0 !important;
  }

  /* 3. KARTEN & FORMULAR: Wir fixieren die Breite massiv */
  .card, 
  .contact-card, 
  .service-card, 
  .benefit-card,
  .elementor-widget-container {
    width: 92vw !important; /* Nutzt 92% der Bildschirmbreite, egal was drumherum ist */
    max-width: 92vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  /* 4. VERHINDERN VON LINKS-DRANG */
  /* Viele Themes haben links ein festes Padding bei mobilen Ansichten */
  body, #content, main, article {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important; /* Hilft bei Inline-Elementen */
  }

  /* 5. FIX FÜR DAS LOGO (Bild 1) */
  .logo, .site-logo, .header-logo {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
}
@media (max-width: 480px) {
  /* 1. Den Container der Liste zentrieren */
  .contact-card ul, 
  .benefit-card ul,
  ul.deine-listen-klasse {
    display: inline-block !important; /* Erlaubt Zentrierung des gesamten Blocks */
    text-align: left !important;     /* Text innerhalb der Zeilen linksbündig */
    margin: 0 auto !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 290px !important;    /* Begrenzt Breite, damit es kompakt bleibt */
  }

  /* 2. Das Listenelement als Flex-Einheit */
  .contact-card li, 
  .benefit-card li,
  ul.deine-listen-klasse li {
    display: flex !important;
    align-items: flex-start !important; /* Häkchen oben an der ersten Zeile */
    justify-content: flex-start !important;
    margin-bottom: 15px !important;
    width: 100% !important;
  }

  /* 3. Das Häkchen-Icon fixieren */
  .contact-card li i, 
  .benefit-card li i,
  .contact-card li::before {
    flex-shrink: 0 !important;      /* Verhindert, dass das Häkchen schrumpft */
    margin-right: 15px !important;
    margin-top: 5px !important;     /* Feinjustierung zur ersten Textzeile */
    width: 20px !important;
  }

  /* 4. Den Textinhalt korrigieren */
  .contact-card li span,
  .benefit-card li p {
    text-align: left !important;
    line-height: 1.4 !important;
    display: block !important;
  }
}
/* Spezifischer Fix für Samsung S24 / S25 & schmale Smartphones */
@media (max-width: 480px) {

    /* 1. HEADER & LOGO FIX (Entfernt den Links-Drang) */
    header .container.header-flex {
        transform: none !important; /* Entfernt das translateX(-20px) */
        padding: 10px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .header-logo {
        flex: 0 0 auto !important;
        margin-bottom: 10px !important;
    }

    /* 2. NAVIGATION ZENTRIEREN */
    #main-nav {
        width: 100% !important;
        justify-content: center !important;
    }

    #main-nav ul {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        align-items: center !important;
    }

    /* 3. DIE CHECKLISTE (Hero-Sektion) - Der wichtigste Teil! */
    section.hero ul {
        display: table !important; /* Erzwingt, dass die Liste als kompakter Block zentriert werden kann */
        margin: 0 auto !important;
        text-align: left !important;
        padding: 0 !important;
    }

    section.hero li {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        text-align: left !important;
        font-size: 18px !important; /* Kleiner für S24 Display */
        width: auto !important;
        margin-bottom: 10px !important;
    }

    section.hero li span {
        margin-right: 10px !important;
        flex-shrink: 0 !important;
    }

    /* 4. CONTENT WRAPPER & SIEGEL */
    .content-wrapper {
        max-width: 100% !important;
        padding: 0 15px !important;
    }

    .side-siegel {
        position: relative !important; /* Nicht mehr absolut drüber schwebend */
        right: 0 !important;
        top: 0 !important;
        margin: 20px auto !important;
        text-align: center !important;
        pointer-events: auto !important;
    }

    /* 5. HERO TEXTE */
    .hero h1 {
        font-size: 1.6rem !important;
        text-align: center !important;
    }

    .hero p {
        font-size: 18px !important;
        text-align: center !important;
    }
}


/*Finaler Fix für das Logo-Spacing  */
@media (max-width: 480px) {
  .header-logo {
    flex: 0 0 auto !important; 
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    /* Das drückt die Navi nach unten */
    margin-bottom: 60px !important; 
    padding-top: 20px !important;
  }

  .header-logo img {
    /* Behält deine Wunschgröße bei, verhindert aber Ausbrechen */
    max-width: 90% !important; 
    height: auto !important;
  }

  header .container.header-flex {
    transform: none !important; /* WICHTIG: Korrigiert den Links-Drang */
    padding: 0 15px !important;
    flex-direction: column !important;
  }
}