:root{
  --primary:#BED600; /* HL-inspiriertes Grün */
  --primary-dark:#70831B;
  --bg:#ffffff;
  --fg:#181121;
  --muted:#4B2942;
  --alt:#f5f7ef;
  --radius:12px;
  --cta-height:64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--fg);background:var(--bg);line-height:1.6}
img{max-width:100%;display:block}
.container{width:min(1120px,92vw);margin:0 auto}
.skip-link{position:absolute;left:-999px}
.skip-link:focus{left:8px;top:8px;background:#000;color:#fff;padding:6px 10px;border-radius:6px}

/* Header: Brand zentriert */
.site-header{background:#fff;border-bottom:1px solid #eee;position:sticky;top:0;z-index:20}
.header-bar{display:flex;align-items:center;justify-content:center;padding:12px 0}
.brand{text-decoration:none;color:inherit;font-weight:700;font-size:1.2rem;letter-spacing:.01em}

/* Hero – vertikaler Verlauf (zartes Grün -> Weiß) */
.hero{background:linear-gradient(180deg,#f8fbe8 0%,#ffffff 100%);padding:80px 0 48px 0;text-align:center}
.hero-inner{display:grid;gap:14px;justify-items:center}
.hero h1{margin:0;font-size:clamp(28px,4vw,44px)}
.lead{color:var(--muted);font-size:clamp(16px,2.2vw,20px)}
.hero-ctas{margin-top:20px}

/* Buttons */
.btn{display:inline-block;padding:12px 22px;border-radius:8px;text-decoration:none;border:1px solid transparent;font-weight:600}
.btn.primary{background:var(--primary);color:var(--fg)}
.btn.primary:hover{background:var(--primary-dark);color:#fff}
.btn.ghost{border-color:#cbd5a7;color:var(--fg)}

/* --- NEUE SEKTION: PROFILE MAIN SECTION (Optimiert) --- */
.profile-main-section {
  padding: 0 0 56px 0; 
  background: var(--bg);
}

/* 1. ROW: FOTO UND INFO-BOX */
.profile-info-row {
  display: flex;
  gap: 30px; 
  align-items: stretch;
  max-width: 860px;
  margin: 0 auto 32px auto; 
  padding-top: 56px;
}

.profile-photo-col,
.profile-info-col {
  flex: 1 1 0; 
  min-width: 250px; 
}

/* Stil für das Bild */
.profile-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 4px 24px rgba(34,34,34,0.08);
}

/* 2. ROW: REVIEWS */
.profile-reviews-row {
    max-width: 400px; 
    margin: 0 auto; 
    padding-top: 32px; 
}

/* Styling für die Profil-Card */
.profile-info-col .card {
    padding: 30px; 
    border: 2px solid var(--primary); 
    box-shadow: 0 6px 16px rgba(190, 214, 0, 0.2); 
}

/* Responsive Anpassungen für Mobile (Profil) */
@media (max-width: 768px) {
  .profile-info-row {
    flex-direction: column;
    align-items: center; 
    gap: 20px;
    padding-top: 32px;
    max-width: 90vw;
  }
  
  .profile-photo-col,
  .profile-info-col {
    flex: 1 1 100%; 
    max-width: 400px; 
  }
}

/* Content Sektionen */
.section{padding:56px 0}
.section.alt{background:var(--alt)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.card{background:#fff;border:1px solid #eee;border-radius:var(--radius);padding:22px;box-shadow:0 2px 8px rgba(0,0,0,.03);height:100%} 

.steps{padding-left:20px}
.faq details{border:1px solid #eee;border-radius:10px;padding:14px;background:#fff;margin-bottom:12px}

/* Kontakt-Bereich */
.contact-buttons{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px}
.contact-buttons .btn{display:flex;align-items:center;justify-content:center;min-width:210px}
.contact-note{margin-top:10px;color:var(--muted)}

/* Sticky Footer-Leiste (mobil) */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;height:calc(var(--cta-height) + var(--safe-bottom));padding-bottom:var(--safe-bottom);background:#ffffffcc;backdrop-filter:saturate(180%) blur(8px);border-top:1px solid #eaeaea;box-shadow:0 -4px 12px rgba(0,0,0,.06);display:none;z-index:1000}
.sticky-cta .cta-item{flex:1 1 0;min-width:0;height:var(--cta-height);display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:var(--fg);font-weight:700;border-right:1px solid #ececec}
.sticky-cta .cta-item:last-child{border-right:0}
.sticky-cta .cta-item:active{background:#f7f9f0}
.sticky-cta .cta-item:focus-visible{outline:3px solid color-mix(in srgb, var(--primary) 45%, transparent);outline-offset:2px;border-radius:6px}

/* Footer Links */
.site-footer{border-top:1px solid #eee;padding:24px 0;text-align:center;color:var(--muted)}
.footer-nav{margin-bottom:8px}
.footer-nav a{color:var(--muted);text-decoration:underline;margin:0 6px}
.footer-nav a:hover{color:var(--primary)}
.sep{color:#c0c0c0;margin:0 2px}

/* Responsive Allgemein */
@media (max-width:900px){
  .grid3{grid-template-columns:1fr}
  .sticky-cta{display:flex}
  body{padding-bottom:calc(var(--cta-height) + var(--safe-bottom))}
}
@media (max-width:700px){
  .contact-buttons{flex-direction:column}
  .contact-buttons .btn{width:100%}
  .hero{padding:40px 0 24px 0}
} 

/* --- NEU: SMS Button Design & Mobile Logik --- */

/* 1. Design für den SMS-Button */
.btn.sms {
  border: 1px solid #007AFF; /* Blau wie iMessage/RCS */
  color: #004494;
  background: #fff;
}
.btn.sms:hover {
  background: #007AFF;
  color: #fff;
  border-color: #007AFF;
}

/* Anpassung für die untere Leiste am Handy */
.sticky-cta .cta-item.sms {
  color: #004494;
}
.sticky-cta .cta-item.sms:active {
  background: #eaf4ff;
}

/* 2. Logik: Element nur auf Handys/Tablets anzeigen */
.mobile-only {
  display: none !important; /* Auf PC ausblenden */
}

@media (max-width: 900px) {
  .mobile-only {
    display: flex !important; /* Auf Handy einblenden */
  }
}

/* --- Styling für die 4 Regeln in der Warning-Box --- */

/* Abstände und Trennlinien zwischen den Regeln */
.warning-box h3 {
  color: #d32f2f;
  margin-bottom: 12px;
}

/* Jede Überschrift (außer der ersten) bekommt oben einen Abstand und eine Linie */
.warning-box h3:not(:first-child) {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid #ffcdd2; /* Zartes Rot als Trenner */
}