/*
 * SMD Startseite 0.1.8
 * Kein Redesign: bestehende SMD-Blöcke bleiben bestehen.
 * Dieses CSS korrigiert nur das responsive Verhalten des geänderten Hero-Texts
 * und stylt den ergänzten USP-Bereich.
 */

/* ---------- Hero: responsive Sicherheitsnetz ---------- */
.smd-home-hero-responsive,
.smd-home-hero-responsive *{
  box-sizing:border-box;
}

.smd-home-hero-responsive{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
}

/*
 * Das Theme setzt in einzelnen Breakpoints feste Breiten bzw. nowrap auf
 * Titel-Elemente. Deshalb werden nicht nur h1, sondern auch dessen Wrapper
 * und Text-Spans explizit auf normale Umbrüche zurückgesetzt.
 */
.smd-home-hero-responsive h1,
.smd-home-hero-responsive h1 *,
.smd-home-hero-responsive [class*="title"],
.smd-home-hero-responsive [class*="title"] *,
.smd-home-hero-responsive [class*="heading"],
.smd-home-hero-responsive [class*="heading"] *{
  white-space:normal !important;
  width:auto !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

.smd-home-hero-responsive h1{
  display:block !important;
  max-width:1050px !important;
  margin-right:0 !important;
  font-size:clamp(3rem,5vw,5.5rem) !important;
  line-height:1.02 !important;
  letter-spacing:-.03em !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
  hyphens:none !important;
}

/* Flex/Grid-Kinder dürfen schrumpfen; sonst kann selbst white-space:normal
 * durch min-width:auto wirkungslos erscheinen. */
.smd-home-hero-responsive > *,
.smd-home-hero-responsive section,
.smd-home-hero-responsive div{
  min-width:0;
}

.smd-home-hero-responsive p,
.smd-home-hero-responsive .smd-home-funding{
  max-width:760px !important;
  white-space:normal !important;
}

.smd-home-funding{
  display:block;
  margin-top:12px;
  font-weight:800;
}

.smd-home-hero-responsive a,
.smd-home-hero-responsive button{
  max-width:100%;
}

.smd-home-hero-responsive img,
.smd-home-hero-responsive svg,
.smd-home-hero-responsive video{
  max-width:100%;
}

/* ---------- Ergänzter USP-Bereich ---------- */
.smd-home-usps-native{
  position:relative;
  overflow:hidden;
  padding:68px 20px;
}

.smd-home-usps-inner{
  position:relative;
  z-index:2;
  width:min(1200px,100%);
  margin:0 auto;
}

.smd-home-usps-native h2{
  margin:0 0 32px;
}

.smd-home-usps-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px;
}

.smd-home-usp-item{
  position:relative;
  min-width:0;
  padding-left:22px;
}

.smd-home-usp-item:before{
  content:"";
  position:absolute;
  left:0;
  top:3px;
  width:6px;
  height:42px;
  border-radius:99px;
  background:linear-gradient(180deg,#6DDCFF 0%,#3285FF 48%,#7F60F9 100%);
}

.smd-home-usp-item h3{
  margin:0 0 10px;
}

.smd-home-usp-item p{
  margin:0;
}

.smd-home-blob{
  position:absolute;
  pointer-events:none;
  opacity:.17;
  filter:blur(1px);
}

.smd-home-blob-a{
  width:180px;
  height:135px;
  right:-65px;
  top:8px;
  border-radius:63% 37% 48% 52% / 43% 65% 35% 57%;
  background:linear-gradient(135deg,#6DDCFF,#3285FF);
  transform:rotate(17deg);
}

.smd-home-blob-b{
  width:150px;
  height:110px;
  left:-70px;
  bottom:4px;
  border-radius:39% 61% 64% 36% / 58% 41% 59% 42%;
  background:linear-gradient(135deg,#5454D4,#7F60F9);
  transform:rotate(-20deg);
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px){
  .smd-home-hero-responsive h1{
    font-size:clamp(2.6rem, 6vw, 4.6rem) !important;
    line-height:1.02 !important;
    max-width:880px !important;
  }

  .smd-home-usps-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px){
  .smd-home-hero-responsive h1{
    font-size:clamp(2.15rem, 10vw, 3.35rem) !important;
    line-height:1.05 !important;
    letter-spacing:-.02em !important;
    max-width:100% !important;
  }

  .smd-home-hero-responsive h1,
  .smd-home-hero-responsive h1 *{
    white-space:normal !important;
  }

  .smd-home-hero-responsive p{
    font-size:clamp(1rem, 4.4vw, 1.18rem) !important;
    line-height:1.45 !important;
    max-width:100% !important;
  }

  .smd-home-funding{
    margin-top:10px;
  }

  .smd-home-usps-native{
    padding:50px 18px;
  }

  .smd-home-usps-native h2{
    margin-bottom:26px;
  }

  .smd-home-usps-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .smd-home-blob{
    opacity:.10;
  }
}

/* ---------- Sehr kleine Geräte ---------- */
@media (max-width: 390px){
  .smd-home-hero-responsive h1{
    font-size:clamp(2rem, 10.5vw, 2.75rem) !important;
  }

  .smd-home-usps-native{
    padding-left:16px;
    padding-right:16px;
  }
}

/* ---------- Version 0.1.7: Warum-SMD-Überschrift + CTA ---------- */
.smd-home-usps-native .smd-home-usps-lead{
  max-width:760px;
  margin:-18px 0 34px;
  font-size:clamp(1.05rem,1.5vw,1.3rem);
  line-height:1.5;
}

.smd-home-usps-cta{
  margin-top:34px;
}

.smd-home-usps-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:13px 22px;
  border-radius:999px;
  background:#3285FF;
  color:#fff !important;
  text-decoration:none !important;
  font-weight:700;
  line-height:1.2;
}

.smd-home-usps-button:hover,
.smd-home-usps-button:focus{
  background:#5454D4;
  color:#fff !important;
}

.smd-home-button-label{
  display:inline !important;
  white-space:normal !important;
}

/* ---------- Version 0.1.8: echte H2 + nachgeordneter Agenturbereich ---------- */
.smd-home-usps-native .smd-home-usps-inner > h2,
.smd-home-agency .smd-home-agency-inner > h2{
  display:block !important;
  margin:0 0 28px !important;
  font-family:"Bricolage Grotesque",sans-serif !important;
  font-size:clamp(2.2rem,4vw,4rem) !important;
  line-height:1.05 !important;
  font-weight:700 !important;
  letter-spacing:-.025em !important;
  white-space:normal !important;
  max-width:100% !important;
}

.smd-home-usps-native .smd-home-usps-lead:empty{
  display:none !important;
}

.smd-home-agency{
  position:relative;
  padding:76px 20px;
  overflow:hidden;
}

.smd-home-agency-inner{
  width:min(1200px,100%);
  margin:0 auto;
}

.smd-home-agency-lead{
  max-width:820px;
  margin:0 0 36px;
  font-size:clamp(1.05rem,1.5vw,1.25rem);
  line-height:1.55;
}

.smd-home-agency-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.smd-home-agency-item{
  position:relative;
  display:block;
  min-width:0;
  padding:24px 24px 28px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  color:inherit !important;
  text-decoration:none !important;
  background:rgba(255,255,255,.025);
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}

.smd-home-agency-item:hover,
.smd-home-agency-item:focus{
  transform:translateY(-2px);
  border-color:rgba(50,133,255,.55);
  background:rgba(50,133,255,.05);
}

.smd-home-agency-item h3{
  margin:0 0 10px;
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:clamp(1.25rem,1.8vw,1.6rem);
  line-height:1.15;
}

.smd-home-agency-item p{
  margin:0;
  line-height:1.5;
}

.smd-home-agency-arrow{
  display:inline-block;
  margin-top:18px;
  font-size:1.45rem;
  color:#3285FF;
}

.smd-home-agency-cta{
  margin-top:34px;
}

.smd-home-agency-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:13px 22px;
  border-radius:999px;
  background:#3285FF;
  color:#fff !important;
  text-decoration:none !important;
  font-weight:700;
  line-height:1.2;
}

.smd-home-agency-button:hover,
.smd-home-agency-button:focus{
  background:#5454D4;
  color:#fff !important;
}

@media (max-width: 980px){
  .smd-home-agency-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 767px){
  .smd-home-usps-native .smd-home-usps-inner > h2,
  .smd-home-agency .smd-home-agency-inner > h2{
    font-size:clamp(2rem,9vw,3rem) !important;
    margin-bottom:22px !important;
  }

  .smd-home-agency{
    padding:54px 18px;
  }

  .smd-home-agency-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
}

/* ---------- Version 0.1.9: Feinschliff statt Redesign ---------- */
/* Hero kompakter, damit Aussage + CTAs auf typischen Laptops schneller erfassbar sind. */
.smd-home-hero-responsive h1{
  max-width:920px !important;
  font-size:clamp(2.8rem,4.4vw,4.9rem) !important;
}
.smd-home-hero-responsive p{max-width:720px !important;}

/* CTA-Hierarchie: erster Button klar primär, zweiter bewusst sekundär. */
.smd-home-hero-button-1{
  background:#3285FF !important;
  color:#fff !important;
}
.smd-home-hero-button-2{
  background:transparent !important;
  color:#fff !important;
  border:2px solid rgba(255,255,255,.72) !important;
}
.smd-home-hero-button-2:hover,.smd-home-hero-button-2:focus{
  border-color:#3285FF !important;
  color:#fff !important;
}

/* Agentur bewusst kompakter als Weiterbildung/USP: Praxisbeweis, kein zweites Hauptangebot. */
.smd-home-agency-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.smd-home-agency-item{padding:20px 20px 22px;}
.smd-home-agency-item p{font-size:.96em;line-height:1.5;}

/* Klarer Abschluss statt eines weiteren Informationsblocks. */
.smd-home-final-cta{padding:72px 20px;position:relative;overflow:hidden;}
.smd-home-final-cta-inner{width:min(1000px,100%);margin:0 auto;text-align:center;}
.smd-home-final-cta h2{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(2.2rem,4vw,4rem);line-height:1.05;margin:0 0 18px;}
.smd-home-final-cta p{max-width:760px;margin:0 auto 28px;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.55;}
.smd-home-final-cta-button{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:14px 26px;border-radius:999px;background:#3285FF;color:#fff !important;text-decoration:none !important;font-weight:700;}
.smd-home-final-cta-button:hover,.smd-home-final-cta-button:focus{background:#5454D4;color:#fff !important;}

@media (max-width:1100px){.smd-home-agency-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:767px){
  .smd-home-hero-responsive h1{font-size:clamp(2.1rem,9vw,3.15rem) !important;}
  .smd-home-agency-grid{grid-template-columns:1fr;}
  .smd-home-final-cta{padding:52px 18px;}
}