/* ==================================================
INDEX HOTFIX – TYPO & LAYOUT FEINJUSTIERUNG
Ziel: Lesbarkeit erhöhen ohne Hierarchien zu zerstören
Status: stabil / bewusst reduziert
================================================== */

/* --------------------------------------------------

1. SO ARBEITET GUARDBASE – AUSBLENDEN (Index only)
-------------------------------------------------- */
body.page-index .so-section{
display: none !important;
}



/* --------------------------------------------------
2. LAYOUT-FIXES
-------------------------------------------------- */
body.page-index .honorar{
margin-top: 0 !important;
}

/* Trust-Badges sauber linksbündig */
body.page-index .trust-badge{
padding-left: 0 !important;
margin-left: 0 !important;
}

body.page-index .trust-badge__title,
body.page-index .trust-badge__text{
margin-left: 0 !important;
padding-left: 0 !important;
text-align: left;
}

/* ==================================================
3. TYPO-HIERARCHIE (KERN)
================================================== */

/* ---------- Eyebrows (Transparenz, Qualitätsrahmen etc.) ---------- */
body.page-index .hero-eyebrow,
body.page-index .cbox-eyebrow{
font-weight: 600 !important;
letter-spacing: 0.08em !important;
opacity: 0.88 !important;
}

/* ---------- Große Abschnittsüberschriften ---------- */
body.page-index .trust-head h2,
body.page-index .trust-section h2,
body.page-index .cbox h2{
font-weight: 700 !important;
}

/* ---------- GuardBase auf einen Blick ---------- */

/* Überschrift */
body.page-index .hero-right-title{
font-weight: 600 !important;
letter-spacing: -0.01em !important;
}

/* Label (Effizienz, Sicherheit …) */
body.page-index .stat-label{
font-weight: 560 !important;
opacity: 0.9 !important;
}

/* Titel (Zeitgewinn, Einsatz-Fit …) */
body.page-index .stat-value{
font-weight: 600 !important;
}

/* Erklärungstext (bewusst NICHT headline-dick) */
body.page-index .stat-text{
font-weight: 480 !important;
line-height: 1.6 !important;
opacity: 0.92 !important;
}

/* ---------- Honorar – Hinweistext ---------- */
body.page-index .honorar .t-sub-muted{
font-weight: 460 !important;
opacity: 0.88 !important;
}

/* ---------- Qualitätsrahmen ---------- */

/* Titel der Punkte */
body.page-index .trust-badge__title{
font-weight: 600 !important;
}

/* Erklärung unter den Titeln
→ DAS war vorher zu dünn
→ jetzt klar lesbar, aber bewusst unterhalb der Titel */
body.page-index .trust-badge__text{
font-weight: 470 !important;
line-height: 1.65 !important;
opacity: 0.92 !important;
}

/* ---------- Header Subline ---------- /
body.page-index .brand-subline{
font-weight: 520 !important;
opacity: 0.9 !important;
letter-spacing: 0.05em !important;
}
/ ==================================================
INDEX – FINAL FEINTUNING (NUR ZU DÜNNE TEXTE)
Dieser Block MUSS ganz unten stehen
================================================== */

/* --------------------------------------------------
GuardBase auf einen Blick
-------------------------------------------------- */

/* Überschrift /
body.page-index .hero-right-title{
font-weight: 560 !important; / NICHT Überschrift-dick */
}

/* Zeitgewinn / Weniger Risiken / Einsatz-Fit / Planbarkeit */
body.page-index .stat-value{
font-weight: 560 !important;
}

/* Erklärungstexte in den Karten /
body.page-index .stat-text{
font-weight: 480 !important; / bewusst zwischen thin & bold */
line-height: 1.55;
}

/* --------------------------------------------------
Honorar – Hinweistext unten
-------------------------------------------------- */
body.page-index .honorar .t-sub-muted{
font-weight: 480 !important;
opacity: 0.9 !important;
}

/* --------------------------------------------------
Qualitätsrahmen – Texte UNTER den Titeln
-------------------------------------------------- */

/* Titel (Geprüfte Einsatzgrundlagen etc.) */
body.page-index .trust-badge__title{
font-weight: 560 !important;
}

/* Erklärungstexte darunter /
body.page-index .trust-badge__text{
font-weight: 460 !important; / bewusst schlanker als stat-text */
line-height: 1.6;
opacity: 0.92 !important;
}

/* --------------------------------------------------
Qualitätsrahmen als eigene Glass Card
-------------------------------------------------- */
body.page-index .trust-section{
margin: 56px auto !important;
padding: 34px 30px 36px !important;

background:
radial-gradient(circle at 18% 14%, rgba(255,255,255,0.26), transparent 55%),
radial-gradient(circle at 88% 86%, rgba(221,230,243,0.24), transparent 60%),
rgba(255,255,255,0.40);

border-radius: 24px;
border: 1px solid rgba(148,163,184,0.42);

backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);

box-shadow:
inset 0 1px 0 rgba(255,255,255,0.65),
inset 0 0 0 1px rgba(148,163,184,0.18),
0 26px 60px rgba(15,23,42,0.18);
}

/* --------------------------------------------------
Image Tap / Focus Bug – Mobile
-------------------------------------------------- */
body.page-index img,
body.page-index figure{
-webkit-tap-highlight-color: transparent;
outline: none;
}

body.page-index img:focus,
body.page-index figure:focus{
outline: none;
}

body.page-index img::selection{
background: transparent;
}


/* ==================================================
INDEX – TRUST SECTION ABSTAND FIX
================================================== */

body.page-index .trust-section{
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* ==================================================
INDEX – HONORAR → TRUST (WIE ÜBER-UNS)
================================================== */

body.page-index .honorar + .trust-section{
margin-top: 26px !important;
}

@media (min-width: 980px){
body.page-index .honorar + .trust-section{
margin-top: 30px !important;
}
}
/* ✅ Fix: Abstand unter .so-section entfernen */
body.page-index .so-section {
  margin-bottom: 0 !important;
}
/* ==================================================
   INDEX HOTFIX – Abstand VOR Honorar verkleinern
   (reduziert Abstand zwischen vorherigem Tab und Honorar)
   ================================================== */

/* Desktop/Standard: aus 56px Gap -> optisch ca. 28px */

/* ==================================================
MOBILE – ABSTAND HERO → HONORAR SAUBER REDUZIEREN
================================================== */

@media (max-width: 720px){

  /* Abstand unter "GuardBase auf einen Blick" */
  body.page-index .hero-right{
    margin-bottom: 16px !important;
  }

  /* Honorar nicht zusätzlich nach unten drücken */
  body.page-index section.honorar{
    margin-top: 0 !important;
  }
}
/* ==================================================
TEXTABSTAND NACH SECTION-HEADLINES (INDEX)
================================================== */

body.page-index section h2 + p,
body.page-index section h2 + .trust-sub,
body.page-index section h2 + .faq-sub{
  margin-top: 10px;
}

@media (max-width: 720px){
  body.page-index section h2 + p,
  body.page-index section h2 + .trust-sub,
  body.page-index section h2 + .faq-sub{
    margin-top: 12px;
  }
}
/* ==================================================
MOBILE – ABSTAND TEXT → BILD (QUALITÄTSRAHMEN)
================================================== */

@media (max-width: 720px){
  body.page-index .trust-hero{
    margin-top: 14px;
  }
}
/* ==================================================
MOBILE – IMAGE TAP / FOCUS BUG FIX (FINAL)
================================================== */

body.page-index .trust-hero-media,
body.page-index .trust-hero-media *{
  -webkit-tap-highlight-color: transparent !important;
}

body.page-index .trust-hero-media img{
  display: block;
  border-radius: inherit;
}
/* ==================================================
QUALITÄTSRAHMEN – Abstand unter Überschrift
================================================== */

body.page-index .trust-head h2{
  margin-bottom: 12px !important;
}

@media (max-width: 720px){
  body.page-index .trust-head h2{
    margin-bottom: 14px !important;
  }
}
/* ==================================================
QUALITÄTSRAHMEN – Abstand Text → Bild (Mobile)
================================================== */

@media (max-width: 720px){
  body.page-index .trust-hero{
    margin-top: 18px !important;
  }
}
/* ==================================================
QUALITÄTSRAHMEN – UNTERE TEXTFELDER ALS SAUBERE CARDS
================================================== */

body.page-index .trust-grid{
  gap: 16px !important;
}

body.page-index .trust-badge{
  padding: 18px 18px 20px !important;
  border-radius: 18px !important;

  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(148,163,184,0.35);

  box-shadow:
    0 10px 26px rgba(15,23,42,0.10);

  margin: 0 !important;
}
/* Titel → Text Abstand */
body.page-index .trust-badge__title{
  margin-bottom: 6px !important;
}

/* Fließtext ruhiger */
body.page-index .trust-badge__text{
  margin-top: 0 !important;
  line-height: 1.65 !important;
}
/* ==================================================
GLOBAL FLOW RESET – MOBILE FIRST
================================================== */

body.page-index main{
  display: flex;
  flex-direction: column;
  gap: 22px; /* MOBILE BASIS */
}

/* Desktop: etwas mehr Luft */
@media (min-width: 980px){
  body.page-index main{
    gap: 28px;
  }
}
/* ==================================================
   MOBILE FIX – Abstand VOR Honorar (NUR MOBILE)
   Ursache: Hero/Stats erzeugen optisch doppelten Gap
   ================================================== */



  /* Sicherstellen, dass Honorar nicht nochmal Abstand addiert */
  body.page-index section.honorar{
    margin-top: 0 !important;
  }

}
/* ==================================================
   MOBILE – ECHTE URSACHE DES ABSTANDS ENTFERNEN
   ================================================== */

@media (max-width: 720px){

  /* 1. Padding unter Hero-Content entfernen */
  body.page-index .hero-right-inner{
    padding-bottom: 12px !important;
  }

  /* 2. Badge-Zeile selbst kompakter machen */
  body.page-index .hero-right .badge-row{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 3. Sicherheit: kein zusätzlicher Abstand durch letzte Elemente */
  body.page-index .hero-right-inner > *:last-child{
    margin-bottom: 0 !important;
  }

}
/* ==================================================
   MOBILE – HERO HÖHE DYNAMISCH STATT ERZWUNGEN
   ECHTE URSACHE DES ABSTANDS
   ================================================== */

@media (max-width: 720px){

  /* 1. Mindesthöhe aufheben */
  body.page-index .hero-left.hero-left--with-bg{
    min-height: auto !important;
  }

  /* 2. Hero-Section selbst nicht künstlich strecken */
  body.page-index section.hero{
    align-items: flex-start !important;
  }

}
/* ==================================================
   MOBILE – ECHTE ABSTANDSQUELLE UNTER HERO
   ================================================== */
@media (max-width: 720px){

  /* Badge-Zeile darf Hero nicht nach unten ziehen */
  body.page-index .hero-right .badge-row{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

}
@media (max-width: 720px){

  /* Letztes Element im Hero darf keinen Extra-Abstand erzeugen */
  body.page-index .hero-right-inner > *:last-child{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

}