.knowledge-section{
  position:relative;
  overflow:hidden;
}
.knowledge-shell{
  position:relative;
  padding:clamp(28px,5vw,58px);
  border:1px solid rgba(15,23,42,.08);
  border-radius:32px;
  background:
    radial-gradient(circle at 90% 0%,rgba(99,102,241,.12),transparent 30%),
    radial-gradient(circle at 0% 100%,rgba(14,165,233,.10),transparent 28%),
    #fff;
  box-shadow:0 24px 70px rgba(15,23,42,.07);
}
.knowledge-top{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);
  gap:44px;
  align-items:center;
}
.knowledge-copy h2{
  max-width:760px;
  margin:10px 0 16px;
  font-size:clamp(2rem,4vw,3.35rem);
  line-height:1.03;
  letter-spacing:-.045em;
}
.knowledge-copy>p{
  max-width:720px;
  font-size:1.05rem;
  line-height:1.8;
}
.knowledge-tags{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:22px;
}
.knowledge-tags a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:10px 14px;
  border:1px solid rgba(15,23,42,.09);
  border-radius:999px;
  background:rgba(255,255,255,.76);
  color:inherit;
  text-decoration:none;
  font-size:.92rem;
  font-weight:700;
  transition:.2s ease;
}
.knowledge-tags a:hover{
  transform:translateY(-2px);
  border-color:rgba(99,102,241,.28);
  box-shadow:0 8px 24px rgba(15,23,42,.07);
}
.knowledge-flow{
  display:grid;
  gap:12px;
}
.flow-card{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:14px;
  align-items:center;
  padding:17px 18px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:20px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
}
.flow-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:#f5f7fb;
  font-size:1.25rem;
}
.flow-card b{display:block;margin-bottom:3px}
.flow-card span{font-size:.92rem;line-height:1.45}

.faq-modern{
  position:relative;
}
.faq-modern-head{
  max-width:720px;
  margin-bottom:26px;
}
.faq-modern-head h2{
  margin:10px 0 10px;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.05;
  letter-spacing:-.04em;
}
.faq-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.faq-list details{
  border:1px solid rgba(15,23,42,.09);
  border-radius:20px;
  background:#fff;
  overflow:hidden;
  transition:.2s ease;
}
.faq-list details[open]{
  box-shadow:0 16px 42px rgba(15,23,42,.07);
  border-color:rgba(99,102,241,.20);
}
.faq-list summary{
  position:relative;
  cursor:pointer;
  list-style:none;
  padding:20px 54px 20px 20px;
  font-weight:800;
  line-height:1.35;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{
  content:"+";
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f4f6fa;
  font-size:1.2rem;
  transition:.2s ease;
}
.faq-list details[open] summary:after{
  content:"−";
  transform:translateY(-50%) rotate(180deg);
}
.faq-answer{
  padding:0 20px 20px;
  line-height:1.7;
}
@media(min-width:801px){
  /* Desktop-FAQ: Eine geöffnete Frage darf die Karte daneben nicht mit aufziehen */
  .faq-list{align-items:start}
  .faq-list details{align-self:start}
}

@media(max-width:800px){
  .knowledge-top,.faq-list{grid-template-columns:1fr}
  .knowledge-shell{border-radius:24px}
}

/* Desktop-Hero: Beispielkarten verdecken den Haupttext nicht mehr */
@media(min-width:981px){
  .hero-card{
    min-height:480px;
  }
  .hero-card .f1{
    top:28px;
    right:24px;
    left:auto;
    bottom:auto;
  }
  .hero-card .f3{
    top:126px;
    left:24px;
    right:auto;
    bottom:auto;
  }
  .hero-card .f2{
    top:224px;
    right:30px;
    left:auto;
    bottom:auto;
  }
  .hero-card .big{
    position:absolute;
    left:28px;
    right:28px;
    bottom:30px;
    margin:0;
    max-width:360px;
    font-size:48px;
    line-height:1.02;
    letter-spacing:-1.8px;
    z-index:1;
  }
  .hero-card .floating{
    z-index:2;
    max-width:245px;
  }
}


/* Startseiten-Suche: kompakt halten, ohne den Hero zu verbreitern */
.hero-grid > *{min-width:0}
.kma-home-search{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  overflow:hidden;
}
.kma-home-search-row{
  width:100%;
  max-width:100%;
  min-width:0;
  grid-template-columns:minmax(0,1fr) auto!important;
}
.kma-home-search-row .input{min-width:0;width:100%;max-width:100%;box-sizing:border-box}
.kma-home-search-row .btn{white-space:nowrap;max-width:100%}
.kma-home-topic-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  box-sizing:border-box;
}
.kma-home-topic-row > .muted{flex:0 0 auto;white-space:nowrap}
.kma-home-topic-rotator{
  display:flex;
  align-items:center;
  gap:8px;
  width:0;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  flex:1 1 0;
}
.kma-home-topic-rotator .chip{flex:0 0 auto;white-space:nowrap;max-width:100%}
.kma-home-topic-rotator .kma-new{display:inline-flex;align-items:center;margin-left:5px;padding:2px 6px;border-radius:999px;font-size:.66rem;font-weight:800;letter-spacing:.04em;background:#ece9ff;color:#5b4ae8;text-transform:uppercase}

/* Nur die echte Mobile-Ansicht stapeln. In der gewählten Web-Ansicht bleibt der Desktop-Aufbau erhalten. */
@media(max-width:760px){
  /* Normale Mobile-Ansicht: sauber untereinander, nichts wird abgeschnitten */
  html:not(.kma-web-view) .kma-home-search{
    overflow:visible;
    padding-bottom:18px;
  }
  html:not(.kma-web-view) .kma-home-search-row{
    grid-template-columns:1fr!important;
    gap:12px;
  }
  html:not(.kma-web-view) .kma-home-search-row .btn{width:100%}
  html:not(.kma-web-view) .kma-home-topic-row{
    display:block;
    overflow:visible;
    margin-top:14px;
  }
  html:not(.kma-web-view) .kma-home-topic-row > .muted{
    display:block;
    margin:0 0 9px;
    white-space:normal;
  }
  html:not(.kma-web-view) .kma-home-topic-rotator{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    align-content:flex-start;
    gap:8px;
    height:82px;
    overflow:hidden;
    padding:0;
  }
  html:not(.kma-web-view) .kma-home-topic-rotator .chip{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Gewählte Webansicht auf dem Handy: Desktop-Aufbau beibehalten */
  html.kma-web-view .kma-home-search,
  html.kma-web-view .kma-home-search-row,
  html.kma-web-view .kma-home-topic-row{max-width:100%;min-width:0}
  html.kma-web-view .kma-home-topic-rotator{width:0;min-width:0;overflow:hidden;flex:1 1 0}
}

.demo-card{position:relative}
.demo-card .media{position:relative}
.demo-label{
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(15,23,42,.10);
  color:#475569;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:0 6px 18px rgba(15,23,42,.08);
}



/* =========================================================
   KMA – neues Marketplace-Design auf der FUNKTIONIERENDEN Struktur
   Keine neue Hero-Struktur, kein LCP-Sondercode, kein neues JS.
   ========================================================= */

body.kma-home{
  background:#fff;
  color:#111827;
}

/* HERO – vorhandene, funktionierende Struktur nur neu gestalten */
body.kma-home .hero{
  padding:24px 0 32px;
  background:#fff;
}
body.kma-home .hero .orb{display:none}
body.kma-home .hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);
  gap:0;
  align-items:stretch;
  min-height:430px;
  overflow:hidden;
  border-radius:28px;
  background:#f1efff;
}
body.kma-home .hero-grid>div:first-child{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:clamp(34px,5vw,66px);
}
body.kma-home .hero .eyebrow{
  width:max-content;
  margin:0 0 14px;
  padding:0;
  border:0;
  background:transparent;
  color:#5b4ae8;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}
body.kma-home .hero h1{
  margin:0;
  max-width:700px;
  color:#111827;
  font-size:clamp(2.9rem,5.1vw,5.2rem);
  line-height:.95;
  letter-spacing:-.06em;
}
body.kma-home .hero h1 .grad{
  color:#111827;
  background:none;
  -webkit-text-fill-color:currentColor;
}
body.kma-home .hero .lead{
  max-width:620px;
  margin:22px 0 0;
  color:#475569;
  font-size:1.08rem;
  line-height:1.62;
}

/* Suche */
body.kma-home .kma-home-search{
  width:100%;
  max-width:100%;
  min-width:0;
  margin-top:27px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
body.kma-home .kma-home-search-row{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:8px;
  align-items:center;
  padding:6px;
  border:2px solid #111827;
  border-radius:18px;
  background:#fff;
  box-sizing:border-box;
  overflow:hidden;
}
body.kma-home .kma-home-search-row .input{
  width:100%;
  min-width:0;
  min-height:52px;
  padding:0 18px;
  border:0!important;
  outline:0;
  background:#fff;
  box-shadow:none!important;
}
body.kma-home .kma-home-search-row .btn{
  min-width:120px;
  min-height:52px;
  padding:0 24px;
  border-radius:12px;
}

/* Beliebte Themen – vorhandenes funktionierendes JS bleibt */
body.kma-home .kma-home-topic-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:40px;
  margin-top:15px;
  overflow:hidden;
}
body.kma-home .kma-home-topic-row>.muted{
  flex:0 0 auto;
  color:#64748b;
  font-size:.78rem;
  font-weight:800;
  white-space:nowrap;
}
body.kma-home .kma-home-topic-rotator{
  width:auto;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:8px;
  overflow:hidden;
}
body.kma-home .kma-home-topic-rotator .chip{
  flex:0 0 auto;
  padding:7px 11px;
  border:1px solid #e3e6ec;
  border-radius:999px;
  background:#fff;
  white-space:nowrap;
}

/* Rechte Hero-Seite: vorhandene funktionierende hero-card modernisieren */
body.kma-home .hero-card{
  display:block;
  position:relative;
  min-height:430px;
  margin:0;
  border:0;
  border-left:1px solid rgba(79,70,229,.08);
  border-radius:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 10%,rgba(99,102,241,.16),transparent 28%),
    linear-gradient(145deg,#faf9ff,#eeecff);
  box-shadow:none;
}
body.kma-home .hero-card .floating{
  position:absolute;
  display:block;
  width:auto;
  max-width:250px;
  padding:14px 16px;
  border:1px solid rgba(15,23,42,.07);
  border-radius:17px;
  background:rgba(255,255,255,.9);
  color:#111827;
  box-shadow:none;
  transform:none;
}
body.kma-home .hero-card .floating small{
  color:#64748b;
}
body.kma-home .hero-card .f1{top:42px;left:32px;right:auto}
body.kma-home .hero-card .f3{top:137px;right:30px;left:auto}
body.kma-home .hero-card .f2{top:232px;left:50px;right:auto}
body.kma-home .hero-card .big{
  position:absolute;
  left:32px;
  right:28px;
  bottom:32px;
  margin:0;
  max-width:360px;
  color:#111827;
  font-size:42px;
  line-height:1.02;
  letter-spacing:-1.6px;
}

/* Abschnittsköpfe */
body.kma-home main>.section{
  padding:36px 0;
}
body.kma-home .section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
body.kma-home .section-head h2{
  margin:0 0 5px;
  font-size:clamp(1.75rem,3vw,2.4rem);
  line-height:1;
  letter-spacing:-.035em;
}
body.kma-home .section-head p{margin:0}
body.kma-home .section-head>a{
  color:#111827;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
  white-space:nowrap;
}

/* Kategorien wie Marketplace-Rail */
body.kma-home .category-grid{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding:2px 2px 12px;
  scrollbar-width:thin;
  scroll-snap-type:x proximity;
}
body.kma-home .category-grid .cat{
  flex:0 0 180px;
  min-height:165px;
  padding:18px;
  border:0;
  border-radius:20px;
  background:#f4f4f5;
  box-shadow:none;
  scroll-snap-align:start;
}
body.kma-home .category-grid .cat:nth-child(4n+1){background:#f0efff}
body.kma-home .category-grid .cat:nth-child(4n+2){background:#eef7ff}
body.kma-home .category-grid .cat:nth-child(4n+3){background:#f7f3ea}
body.kma-home .category-grid .cat:nth-child(4n+4){background:#f3f8ef}
body.kma-home .category-grid .ico{
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  margin:0 0 18px;
  border-radius:18px;
  background:rgba(255,255,255,.72);
  font-size:2rem;
}
body.kma-home .category-grid .cat b{
  display:block;
  font-size:1rem;
  line-height:1.15;
}
body.kma-home .category-grid .cat .muted{display:none}

/* Angebote + Gesuche als horizontale Marketplace-Rails */
body.kma-home .section .cards{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding:2px 2px 16px;
  scrollbar-width:thin;
  scroll-snap-type:x proximity;
}
body.kma-home .section .cards>.card{
  flex:0 0 285px;
  border:0;
  border-radius:0;
  background:#fff;
  box-shadow:none;
  scroll-snap-align:start;
}
body.kma-home .section .cards>.card:hover{
  transform:none;
}
body.kma-home .section .cards>.card .media{
  min-height:250px;
  overflow:hidden;
  border-radius:18px;
  background:#f4f4f5;
}
body.kma-home .section .cards>.card .media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
body.kma-home .section .cards>.card .cardbody{
  padding:12px 2px 0;
}
body.kma-home .section .cards>.card .cardbody h3{
  margin:5px 0 7px;
  min-height:auto;
  font-size:1rem;
  line-height:1.18;
}
body.kma-home .section .cards>.card .cardbody>p{
  display:none;
}
body.kma-home .section .cards>.card .person{
  margin-top:10px;
  padding-top:0;
  border:0;
}
body.kma-home .section .cards>.card .avatar{
  width:38px;
  height:38px;
}
body.kma-home .section .cards>.card .price{
  font-weight:900;
}

/* Wissen */
body.kma-home .knowledge-shell{
  padding:clamp(28px,4vw,48px);
  border:0;
  border-radius:26px;
  background:#f5f3ff;
  box-shadow:none;
}
body.kma-home .knowledge-top{
  grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
}
body.kma-home .flow-card{
  border:0;
  background:#fff;
}
body.kma-home .knowledge-tags a{
  background:#fff;
}

/* FAQ */
body.kma-home .faq-list details{
  border-radius:14px;
  box-shadow:none;
}

/* CTA */
body.kma-home .cta{
  border:0;
  border-radius:26px;
  padding:clamp(26px,4vw,42px);
  background:#111827;
  color:#fff;
  box-shadow:none;
}
body.kma-home .cta h2,
body.kma-home .cta p{color:#fff}
body.kma-home .cta .btn{
  background:#fff;
  color:#111827;
  border-color:#fff;
}

/* Der initiale Hero bleibt vollständig sichtbar und unbewegt */
body.kma-home .hero,
body.kma-home .hero-grid,
body.kma-home .hero-grid>div:first-child,
body.kma-home .hero h1,
body.kma-home .hero .lead,
body.kma-home .hero-card{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  filter:none!important;
  animation:none!important;
  transition:none!important;
}

/* Mobile */
@media(max-width:760px){
  body.kma-home .hero{padding-top:12px}
  body.kma-home .hero-grid{
    grid-template-columns:1fr;
    min-height:0;
    border-radius:22px;
  }
  body.kma-home .hero-grid>div:first-child{
    padding:28px 20px 22px;
  }
  body.kma-home .hero h1{
    font-size:clamp(2.6rem,13vw,4rem);
  }
  body.kma-home .hero-card{
    min-height:330px;
    border-left:0;
    border-top:1px solid rgba(79,70,229,.08);
  }
  body.kma-home .hero-card .f1{top:28px;left:20px}
  body.kma-home .hero-card .f3{top:108px;right:20px}
  body.kma-home .hero-card .f2{top:188px;left:34px}
  body.kma-home .hero-card .big{
    left:20px;
    bottom:18px;
    font-size:30px;
  }

  body.kma-home .kma-home-search{
    width:100%!important;
    max-width:100%!important;
    margin-top:22px!important;
  }
  body.kma-home .kma-home-search-row{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  body.kma-home .kma-home-search-row .btn{
    width:100%;
  }
  body.kma-home .kma-home-topic-row{
    display:block;
    min-height:84px;
    margin-top:13px;
    overflow:hidden;
  }
  body.kma-home .kma-home-topic-row>.muted{
    display:block;
    margin-bottom:8px;
  }
  body.kma-home .kma-home-topic-rotator{
    width:100%;
    height:40px;
    overflow:hidden;
  }

  body.kma-home .section-head{
    align-items:flex-start;
  }
  body.kma-home .section-head h2{font-size:1.8rem}
  body.kma-home .section-head>a{font-size:.82rem}

  body.kma-home .category-grid .cat{
    flex-basis:145px;
    min-height:145px;
  }
  body.kma-home .category-grid .ico{
    width:60px;
    height:60px;
    font-size:1.6rem;
  }

  /* Mobile Karten wieder sauber untereinander */
  body.kma-home .section .cards{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    overflow:visible;
    padding:0;
  }
  body.kma-home .section .cards>.card{
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:118px minmax(0,1fr);
    align-items:stretch;
    overflow:hidden;
    border:1px solid #e8ebf1;
    border-radius:16px;
  }
  body.kma-home .section .cards>.card .media{
    width:118px;
    min-width:118px;
    min-height:142px;
    height:100%;
    border-radius:0;
  }
  body.kma-home .section .cards>.card .media .fallback{
    width:100%;
    height:100%;
    min-height:142px;
    display:grid;
    place-items:center;
    font-size:2rem;
  }
  body.kma-home .section .cards>.card .cardbody{
    min-width:0;
    padding:12px;
  }
  body.kma-home .section .cards>.card .cardbody h3{
    margin:4px 0 7px;
    font-size:.96rem;
    line-height:1.22;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  body.kma-home .section .cards>.card .person{
    display:grid;
    grid-template-columns:31px minmax(0,1fr);
    gap:7px;
    align-items:center;
    margin-top:9px;
  }
  body.kma-home .section .cards>.card .avatar{
    width:31px;
    height:31px;
  }
  body.kma-home .section .cards>.card .price{
    grid-column:1/-1;
    justify-self:start;
    margin-top:4px;
    font-size:.9rem;
  }

  body.kma-home .knowledge-top,
  body.kma-home .faq-list{
    grid-template-columns:1fr;
  }
}

@media(max-width:380px){
  body.kma-home .section .cards>.card{
    grid-template-columns:104px minmax(0,1fr);
  }
  body.kma-home .section .cards>.card .media{
    width:104px;
    min-width:104px;
  }
}


/* =========================================================
   Ergänzungen auf der funktionierenden Basis
   ========================================================= */

/* Desktop-Pfeile an Kategorien, Angeboten und Gesuchen */
body.kma-home .kma-home-rail-wrap{
  position:relative;
}
body.kma-home .kma-home-arrow{
  position:absolute;
  top:50%;
  z-index:12;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid #e4e7ed;
  border-radius:50%;
  background:rgba(255,255,255,.98);
  color:#111827;
  box-shadow:0 8px 24px rgba(15,23,42,.14);
  font-size:2rem;
  line-height:1;
  cursor:pointer;
  transform:translateY(-50%);
}
body.kma-home .kma-home-arrow.prev{left:-18px}
body.kma-home .kma-home-arrow.next{right:-18px}
body.kma-home .kma-home-arrow:hover{
  border-color:#c8c5ff;
  color:#4f46e5;
}

/* Mehr lebendige Icons in der rechten Hero-Fläche */
body.kma-home .kma-hero-orbit-icons{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
body.kma-home .kma-hero-orbit-icons span{
  position:absolute;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid rgba(102,86,239,.12);
  border-radius:14px;
  background:rgba(255,255,255,.72);
  box-shadow:0 8px 24px rgba(71,60,125,.07);
  font-size:1.25rem;
  animation:kmaHeroFloat 5.4s ease-in-out infinite;
  will-change:transform;
}
body.kma-home .kma-hero-orbit-icons .i1{top:18px;right:24px;animation-delay:.2s}
body.kma-home .kma-hero-orbit-icons .i2{top:93px;left:14px;animation-delay:1.1s}
body.kma-home .kma-hero-orbit-icons .i3{top:174px;right:12px;animation-delay:2s}
body.kma-home .kma-hero-orbit-icons .i4{top:260px;left:18px;animation-delay:2.9s}
body.kma-home .kma-hero-orbit-icons .i5{bottom:24px;right:28px;animation-delay:3.7s}
body.kma-home .kma-hero-orbit-icons .i6{top:54px;left:46%;animation-delay:1.8s}
body.kma-home .kma-hero-orbit-icons .i7{bottom:72px;left:44%;animation-delay:2.5s}
body.kma-home .kma-hero-orbit-icons .i8{top:200px;left:48%;animation-delay:4.2s}

body.kma-home .hero-card .floating,
body.kma-home .hero-card .big{
  z-index:2;
}

@keyframes kmaHeroFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(0,-10px,0) rotate(2deg)}
}

/* Kostenlos eintragen */
body.kma-home .kma-free-entry{
  display:grid;
  grid-template-columns:minmax(340px,.9fr) minmax(0,1.1fr);
  align-items:center;
  gap:clamp(36px,6vw,84px);
  min-height:380px;
  padding:44px clamp(32px,5vw,72px);
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(115deg,#f0eeff 0%,#f8f7ff 56%,#eeeaff 100%);
}
body.kma-home .kma-free-entry-preview{
  position:relative;
  min-height:292px;
}
body.kma-home .kma-free-profile-card{
  position:absolute;
  width:min(325px,88%);
  padding:22px;
  border:1px solid rgba(102,86,239,.13);
  border-radius:24px;
  background:#fff;
  box-shadow:0 22px 55px rgba(48,40,110,.13);
  box-sizing:border-box;
}
body.kma-home .kma-free-card-back{
  top:16px;
  left:2%;
  min-height:220px;
  opacity:.72;
}
body.kma-home .kma-free-card-front{
  top:42px;
  right:2%;
  z-index:2;
  min-height:240px;
}
body.kma-home .kma-free-avatar{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  flex:0 0 52px;
  border-radius:16px;
  background:#efedff;
  color:#5b4ee5;
  font-weight:900;
  font-size:1.25rem;
}
body.kma-home .kma-free-card-top{
  display:flex;
  align-items:center;
  gap:13px;
}
body.kma-home .kma-free-card-top strong,
body.kma-home .kma-free-offer strong{
  display:block;
  color:#111827;
  font-size:.95rem;
}
body.kma-home .kma-free-card-top small,
body.kma-home .kma-free-offer small{
  display:block;
  margin-top:4px;
  color:#64748b;
  font-size:.75rem;
}
body.kma-home .kma-free-offer{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:23px;
  padding:15px;
  border-radius:16px;
  background:#f8f7ff;
}
body.kma-home .kma-free-offer-icon{font-size:1.55rem}
body.kma-home .kma-free-mini-button{
  margin-top:17px;
  padding:11px 14px;
  border-radius:12px;
  background:#6656ef;
  color:#fff;
  text-align:center;
  font-size:.8rem;
  font-weight:900;
}
body.kma-home .kma-free-lines{
  display:grid;
  gap:9px;
  margin-top:24px;
}
body.kma-home .kma-free-lines span{
  display:block;
  height:9px;
  border-radius:999px;
  background:#eceaf8;
}
body.kma-home .kma-free-lines span:nth-child(2){width:82%}
body.kma-home .kma-free-lines span:nth-child(3){width:60%}
body.kma-home .kma-free-tags{
  display:flex;
  gap:7px;
  margin-top:24px;
}
body.kma-home .kma-free-tags span{
  padding:7px 10px;
  border-radius:999px;
  background:#f3f1ff;
  color:#6558d9;
  font-size:.7rem;
  font-weight:800;
}
body.kma-home .kma-free-entry-kicker{
  display:block;
  margin-bottom:11px;
  color:#6656ef;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.09em;
}
body.kma-home .kma-free-entry-copy h2{
  margin:0;
  color:#101728;
  font-size:clamp(2.25rem,4.2vw,4.4rem);
  line-height:.98;
  letter-spacing:-.05em;
}
body.kma-home .kma-free-entry-copy p{
  max-width:620px;
  margin:19px 0 24px;
  color:#475569;
  font-size:1.04rem;
  line-height:1.65;
}
body.kma-home .kma-free-entry-copy small{
  display:block;
  margin-top:12px;
  color:#64748b;
}

/* Mobile: Pfeile aus, bewegte Icons bleiben sichtbar */
@media(max-width:760px){
  body.kma-home .kma-home-arrow{
    display:none!important;
  }
body.kma-home .hero-card{
    min-height:370px;
  }

  body.kma-home .kma-hero-orbit-icons span{
    width:38px;
    height:38px;
    border-radius:12px;
    font-size:1.08rem;
    animation-duration:4.8s;
  }

  body.kma-home .kma-hero-orbit-icons .i1{top:13px;right:13px}
  body.kma-home .kma-hero-orbit-icons .i2{top:86px;left:8px}
  body.kma-home .kma-hero-orbit-icons .i3{top:160px;right:8px}
  body.kma-home .kma-hero-orbit-icons .i4{top:235px;left:10px}
  body.kma-home .kma-hero-orbit-icons .i5{bottom:12px;right:12px}
  body.kma-home .kma-hero-orbit-icons .i6{top:36px;left:47%}
  body.kma-home .kma-hero-orbit-icons .i7{bottom:60px;left:43%}
  body.kma-home .kma-hero-orbit-icons .i8{top:205px;left:48%}

  body.kma-home .kma-free-entry{
    grid-template-columns:1fr;
    gap:24px;
    min-height:0;
    padding:28px 20px;
    border-radius:22px;
  }
  body.kma-home .kma-free-entry-preview{
    min-height:260px;
  }
  body.kma-home .kma-free-profile-card{
    width:min(300px,88%);
  }
  body.kma-home .kma-free-entry-copy h2{
    font-size:clamp(2.15rem,11vw,3.5rem);
  }
}

@media(prefers-reduced-motion:reduce){
  body.kma-home .kma-hero-orbit-icons span{
    animation:none!important;
  }
}


/* Gesuche optisch stärker von Angeboten trennen */
body.kma-home #kma-home-requests .card{
  position:relative;
  overflow:hidden;
}
body.kma-home #kma-home-requests .card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  background:linear-gradient(180deg,#6656ef 0%,#8b7cf6 100%);
  border-radius:18px 0 0 18px;
  z-index:2;
}

/* Platzhalter/Icon bei Gesuchen ohne Bild wieder größer */
body.kma-home #kma-home-requests .card .thumb:not(:has(img)),
body.kma-home #kma-home-requests .card .image:not(:has(img)),
body.kma-home #kma-home-requests .card .media:not(:has(img)){
  font-size:3rem!important;
}

body.kma-home #kma-home-requests .card .thumb:not(:has(img)) svg,
body.kma-home #kma-home-requests .card .image:not(:has(img)) svg,
body.kma-home #kma-home-requests .card .media:not(:has(img)) svg{
  width:52px!important;
  height:52px!important;
}

/* Häufig verwendete leere Bild-/Icon-Platzhalter direkt erfassen */
body.kma-home #kma-home-requests .card .placeholder,
body.kma-home #kma-home-requests .card .no-image,
body.kma-home #kma-home-requests .card .noimage,
body.kma-home #kma-home-requests .card .card-icon{
  font-size:3rem!important;
}
body.kma-home #kma-home-requests .card .placeholder svg,
body.kma-home #kma-home-requests .card .no-image svg,
body.kma-home #kma-home-requests .card .noimage svg,
body.kma-home #kma-home-requests .card .card-icon svg{
  width:52px!important;
  height:52px!important;
}

@media(max-width:760px){
  body.kma-home #kma-home-requests .card::before{
    width:4px;
    border-radius:16px 0 0 16px;
  }
  body.kma-home #kma-home-requests .card .thumb:not(:has(img)),
  body.kma-home #kma-home-requests .card .image:not(:has(img)),
  body.kma-home #kma-home-requests .card .media:not(:has(img)),
  body.kma-home #kma-home-requests .card .placeholder,
  body.kma-home #kma-home-requests .card .no-image,
  body.kma-home #kma-home-requests .card .noimage,
  body.kma-home #kma-home-requests .card .card-icon{
    font-size:2.7rem!important;
  }
}


/* =========================================================
   Karten-Feinschliff: sauberer, wie die frühere Darstellung
   ========================================================= */

/* Angebote + Gesuche: einheitliche Karten */
body.kma-home #kma-home-offers .card,
body.kma-home #kma-home-requests .card{
  background:#fff;
  border:1px solid #e5e9f0;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(15,23,42,.02);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* Beim Darüberfahren hebt sich die Karte wieder leicht an */
body.kma-home #kma-home-offers .card:hover,
body.kma-home #kma-home-requests .card:hover{
  transform:translateY(-7px);
  border-color:#d9d5ff;
  box-shadow:0 18px 38px rgba(15,23,42,.11);
}

/* Bildbereich wieder klarer und größer */
body.kma-home #kma-home-offers .card .thumb,
body.kma-home #kma-home-requests .card .thumb{
  overflow:hidden;
  border-radius:0;
}
body.kma-home #kma-home-offers .card .thumb img,
body.kma-home #kma-home-requests .card .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .32s ease;
}
body.kma-home #kma-home-offers .card:hover .thumb img,
body.kma-home #kma-home-requests .card:hover .thumb img{
  transform:scale(1.035);
}

/* Inhalt etwas ruhiger ausrichten */
body.kma-home #kma-home-offers .card .body,
body.kma-home #kma-home-requests .card .body{
  padding:18px 18px 17px;
}
body.kma-home #kma-home-offers .card h3,
body.kma-home #kma-home-requests .card h3{
  margin-top:5px;
  line-height:1.18;
}
body.kma-home #kma-home-offers .card .desc,
body.kma-home #kma-home-requests .card .desc{
  line-height:1.45;
}

/* Gesuche: linker KennMichAus-Akzent deutlich sichtbar */
body.kma-home #kma-home-requests .card::before{
  width:6px;
  background:linear-gradient(180deg,#6656ef 0%,#8b7cf6 100%);
}

/* Gesuch ohne Bild: Platzhalter/Icon wieder deutlich größer */
body.kma-home #kma-home-requests .card .thumb:not(:has(img)),
body.kma-home #kma-home-requests .card .image:not(:has(img)),
body.kma-home #kma-home-requests .card .media:not(:has(img)){
  display:grid;
  place-items:center;
  font-size:4rem!important;
}
body.kma-home #kma-home-requests .card .thumb:not(:has(img)) svg,
body.kma-home #kma-home-requests .card .image:not(:has(img)) svg,
body.kma-home #kma-home-requests .card .media:not(:has(img)) svg,
body.kma-home #kma-home-requests .card .placeholder svg,
body.kma-home #kma-home-requests .card .no-image svg,
body.kma-home #kma-home-requests .card .noimage svg,
body.kma-home #kma-home-requests .card .card-icon svg{
  width:66px!important;
  height:66px!important;
}

/* Desktop: vier saubere Karten im sichtbaren Bereich */
@media(min-width:761px){
  body.kma-home #kma-home-offers,
  body.kma-home #kma-home-requests{
    gap:20px;
    scroll-padding-inline:2px;
  }
  body.kma-home #kma-home-offers .card,
  body.kma-home #kma-home-requests .card{
    flex:0 0 calc((100% - 60px)/4);
    min-width:calc((100% - 60px)/4);
  }
}

/* Mobile: kompakt, keine Hover-Verschiebung */
@media(max-width:760px){
  body.kma-home #kma-home-offers .card,
  body.kma-home #kma-home-requests .card{
    border-radius:18px;
  }
  body.kma-home #kma-home-offers .card:hover,
  body.kma-home #kma-home-requests .card:hover{
    transform:none;
    box-shadow:0 1px 0 rgba(15,23,42,.02);
  }
  body.kma-home #kma-home-requests .card::before{
    width:5px;
  }
}


/* Schriftgrößen der Angebots- und Gesuchkarten sauber ausbalancieren */
body.kma-home #kma-home-offers .card h3,
body.kma-home #kma-home-requests .card h3{
  font-size:1.08rem!important;
  line-height:1.22!important;
  font-weight:800!important;
  letter-spacing:-.015em!important;
  margin:5px 0 10px!important;
}

body.kma-home #kma-home-offers .card .desc,
body.kma-home #kma-home-requests .card .desc{
  font-size:.94rem!important;
  line-height:1.45!important;
  color:#475569!important;
}

body.kma-home #kma-home-offers .card .meta,
body.kma-home #kma-home-requests .card .meta,
body.kma-home #kma-home-offers .card .kicker,
body.kma-home #kma-home-requests .card .kicker{
  font-size:.78rem!important;
  line-height:1.2!important;
  font-weight:800!important;
  letter-spacing:.045em!important;
}

body.kma-home #kma-home-offers .card .owner b,
body.kma-home #kma-home-requests .card .owner b,
body.kma-home #kma-home-offers .card .user b,
body.kma-home #kma-home-requests .card .user b{
  font-size:1rem!important;
  line-height:1.15!important;
}

body.kma-home #kma-home-offers .card .owner small,
body.kma-home #kma-home-requests .card .owner small,
body.kma-home #kma-home-offers .card .user small,
body.kma-home #kma-home-requests .card .user small{
  font-size:.82rem!important;
  line-height:1.2!important;
}

body.kma-home #kma-home-offers .card .price,
body.kma-home #kma-home-requests .card .price{
  font-size:1rem!important;
  line-height:1.1!important;
  font-weight:800!important;
}

/* Auf Desktop etwas mehr Luft, damit nichts gequetscht wirkt */
@media(min-width:761px){
  body.kma-home #kma-home-offers .card .body,
  body.kma-home #kma-home-requests .card .body{
    padding:17px 18px 18px!important;
  }
}

/* Mobile kompakter, aber gut lesbar */
@media(max-width:760px){
  body.kma-home #kma-home-offers .card h3,
  body.kma-home #kma-home-requests .card h3{
    font-size:1rem!important;
    line-height:1.22!important;
  }

  body.kma-home #kma-home-offers .card .desc,
  body.kma-home #kma-home-requests .card .desc{
    font-size:.9rem!important;
  }

  body.kma-home #kma-home-offers .card .price,
  body.kma-home #kma-home-requests .card .price{
    font-size:.95rem!important;
  }
}


/* FINALER Karten-Font-Fix – echte Klassen der Startseite */
body.kma-home #kma-home-offers .card .cardbody,
body.kma-home #kma-home-requests .card .cardbody{
  padding:14px 14px 16px!important;
}

/* Bei Gesuchen etwas mehr Abstand links wegen Farbstreifen */
body.kma-home #kma-home-requests .card .cardbody{
  padding-left:18px!important;
}

body.kma-home #kma-home-offers .card .cardbody h3,
body.kma-home #kma-home-requests .card .cardbody h3{
  margin:5px 0 8px!important;
  font-size:.94rem!important;
  line-height:1.22!important;
  font-weight:800!important;
  letter-spacing:-.01em!important;
  min-height:0!important;
}

body.kma-home #kma-home-offers .card .cardbody .meta,
body.kma-home #kma-home-requests .card .cardbody .meta{
  font-size:.72rem!important;
  line-height:1.2!important;
  font-weight:800!important;
  letter-spacing:.04em!important;
}

body.kma-home #kma-home-offers .card .person,
body.kma-home #kma-home-requests .card .person{
  gap:9px!important;
  margin-top:9px!important;
  align-items:center!important;
}

body.kma-home #kma-home-offers .card .person b,
body.kma-home #kma-home-requests .card .person b{
  font-size:.88rem!important;
  line-height:1.1!important;
  font-weight:800!important;
}

body.kma-home #kma-home-offers .card .person small,
body.kma-home #kma-home-requests .card .person small{
  font-size:.75rem!important;
  line-height:1.15!important;
}

body.kma-home #kma-home-offers .card .price,
body.kma-home #kma-home-requests .card .price{
  margin-left:auto!important;
  font-size:.88rem!important;
  line-height:1.05!important;
  font-weight:900!important;
  white-space:nowrap!important;
}

body.kma-home #kma-home-offers .kma-card-rating,
body.kma-home #kma-home-requests .kma-card-rating{
  font-size:.70rem!important;
}

/* Platzhalter-Icon bei Gesuchen ohne Bild */
body.kma-home #kma-home-requests .media .fallback{
  font-size:3.5rem!important;
}

/* Desktop sauber wie die alte Ansicht */
@media(min-width:761px){
  body.kma-home #kma-home-offers .card,
  body.kma-home #kma-home-requests .card{
    flex:0 0 calc((100% - 60px)/4)!important;
    min-width:calc((100% - 60px)/4)!important;
  }
}

/* Mobile etwas kompakter */
@media(max-width:760px){
  body.kma-home #kma-home-offers .card .cardbody,
  body.kma-home #kma-home-requests .card .cardbody{
    padding:12px 13px 14px!important;
  }

  body.kma-home #kma-home-requests .card .cardbody{
    padding-left:16px!important;
  }

  body.kma-home #kma-home-offers .card .cardbody h3,
  body.kma-home #kma-home-requests .card .cardbody h3{
    font-size:.92rem!important;
  }

  body.kma-home #kma-home-offers .card .person b,
  body.kma-home #kma-home-requests .card .person b{
    font-size:.84rem!important;
  }

  body.kma-home #kma-home-offers .card .price,
  body.kma-home #kma-home-requests .card .price{
    font-size:.84rem!important;
  }
}


/* Kartenhöhe stabilisieren: Titel + 2-zeilige Beschreibung bleiben bündig */
body.kma-home #kma-home-offers .card .cardbody,
body.kma-home #kma-home-requests .card .cardbody{
  display:flex!important;
  flex-direction:column!important;
}

/* Titel reserviert immer Platz für maximal 3 Zeilen */
body.kma-home #kma-home-offers .card .cardbody h3,
body.kma-home #kma-home-requests .card .cardbody h3{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;
  overflow:hidden!important;
  min-height:3.66em!important;
  max-height:3.66em!important;
}

/* Beschreibung reserviert immer exakt 2 Zeilen */
body.kma-home #kma-home-offers .card .cardbody .desc,
body.kma-home #kma-home-requests .card .cardbody .desc{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
  min-height:2.90em!important;
  max-height:2.90em!important;
  margin:0 0 8px!important;
}

/* Unterer Personen-/Preisbereich bleibt dadurch auf gleicher Höhe */
body.kma-home #kma-home-offers .card .person,
body.kma-home #kma-home-requests .card .person{
  margin-top:auto!important;
}


/* Beschreibung in Angebot/Gesuch: immer 2 Zeilen, danach … */
body.kma-home #kma-home-offers .card .cardbody .desc,
body.kma-home #kma-home-requests .card .cardbody .desc{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:normal!important;
  min-height:2.90em!important;
  max-height:2.90em!important;
  margin:0 0 9px!important;
  font-size:.86rem!important;
  line-height:1.45!important;
  color:#475569!important;
}


/* Mobile-Fix: Kostenlos-eintragen-Bild überlappt den Text nicht mehr */
@media(max-width:760px){
  body.kma-home .kma-free-entry{
    display:block!important;
    padding:24px 18px 28px!important;
  }

  body.kma-home .kma-free-entry-preview{
    position:relative!important;
    min-height:0!important;
    height:auto!important;
    margin:0 0 28px!important;
    padding:0!important;
  }

  body.kma-home .kma-free-profile-card{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    left:auto!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    margin:0!important;
  }

  body.kma-home .kma-free-card-back{
    display:none!important;
  }

  body.kma-home .kma-free-card-front{
    position:relative!important;
    transform:none!important;
  }

  body.kma-home .kma-free-entry-copy{
    position:relative!important;
    z-index:2!important;
    margin-top:0!important;
  }

  body.kma-home .kma-free-entry-kicker{
    margin-top:0!important;
  }
}


/* =========================================================
   Rechter Hero – sauber programmiert wie im Entwurf
   ========================================================= */
body.kma-home .hero-card.kma-hero-community{
  position:relative!important;
  min-height:620px!important;
  overflow:hidden!important;
  border-left:1px solid rgba(79,70,229,.08)!important;
  background:
    radial-gradient(circle at 54% 42%, rgba(255,255,255,.92) 0 13%, rgba(255,255,255,.35) 14% 31%, transparent 32%),
    linear-gradient(145deg,#f5f3ff 0%,#eeecff 46%,#f7f6ff 100%)!important;
  isolation:isolate;
}

body.kma-home .hero-card.kma-hero-community::before{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  left:50%;
  top:42%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(255,255,255,.34);
  z-index:0;
}

/* Person: eigenes Bild, keine komplette Screenshot-Grafik */
body.kma-home .hero-card.kma-hero-community .kma-hero-person{
  position:absolute!important;
  left:51%!important;
  bottom:112px!important;
  width:min(53%,385px)!important;
  height:auto!important;
  z-index:2!important;
  transform:translateX(-50%)!important;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 18px 28px rgba(55,48,108,.10));
}

/* gestrichelte Verbindungen */
body.kma-home .kma-hero-path{
  position:absolute;
  z-index:1;
  pointer-events:none;
  border:2px dashed rgba(102,86,239,.55);
  border-radius:50%;
}
body.kma-home .kma-hero-path.path-a{
  width:390px;
  height:330px;
  left:54px;
  top:112px;
  border-right-color:transparent;
  border-top-color:transparent;
  transform:rotate(17deg);
}
body.kma-home .kma-hero-path.path-b{
  width:320px;
  height:280px;
  right:34px;
  top:150px;
  border-left-color:transparent;
  border-bottom-color:transparent;
  transform:rotate(-12deg);
}

/* Live-Karten statt Bildbestandteilen */
body.kma-home .kma-expert-card{
  position:absolute;
  z-index:5;
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:235px;
  padding:12px 14px;
  border:1px solid rgba(104,94,180,.12);
  border-radius:18px;
  background:rgba(255,255,255,.94);
  box-shadow:0 14px 34px rgba(40,35,86,.09);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  animation:kmaCardFloat 5.8s ease-in-out infinite;
}
body.kma-home .kma-expert-card b{
  display:block;
  color:#111827;
  font-size:.92rem;
  line-height:1.15;
}
body.kma-home .kma-expert-card small,
body.kma-home .kma-expert-card em{
  display:block;
  color:#64748b;
  font-size:.72rem;
  line-height:1.25;
  font-style:normal;
}
body.kma-home .kma-expert-card em{margin-top:5px}
body.kma-home .kma-expert-avatar{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#edeaff;
  color:#5d50df;
  font-size:.72rem;
  font-weight:900;
}

body.kma-home .expert-car{top:36px;left:34px}
body.kma-home .expert-pc{top:86px;right:22px;animation-delay:.8s}
body.kma-home .expert-camera{top:196px;left:20px;animation-delay:1.6s}
body.kma-home .expert-home{top:330px;right:18px;animation-delay:2.3s}

body.kma-home .kma-floating-icon{
  position:absolute;
  z-index:6;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(105,90,218,.12);
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 25px rgba(48,42,95,.08);
  font-size:1.25rem;
  animation:kmaIconFloat 4.6s ease-in-out infinite;
}
body.kma-home .icon-one{top:48px;left:49%;animation-delay:.4s}
body.kma-home .icon-two{top:165px;left:44%;animation-delay:1.1s}
body.kma-home .icon-three{top:134px;right:8px;animation-delay:1.8s}
body.kma-home .icon-four{right:22px;bottom:46px;animation-delay:2.6s}

body.kma-home .kma-handnote{
  position:absolute;
  z-index:4;
  right:34px;
  top:248px;
  color:#6858ec;
  font-family:"Comic Sans MS","Bradley Hand",cursive;
  font-size:1.22rem;
  line-height:1.03;
  transform:rotate(-5deg);
  text-align:center;
  opacity:.9;
}

body.kma-home .kma-hero-trust{
  position:absolute;
  z-index:6;
  left:34px;
  bottom:28px;
  display:flex;
  align-items:flex-start;
  gap:12px;
}
body.kma-home .kma-hero-people{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(105,90,218,.12);
  font-size:1.55rem;
}
body.kma-home .kma-hero-trust-title{
  color:#101728;
  font-size:2rem;
  line-height:.95;
  letter-spacing:-.045em;
}
body.kma-home .kma-hero-trust-sub{
  margin-top:8px;
  color:#64748b;
  font-size:.82rem;
}

@keyframes kmaCardFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@keyframes kmaIconFloat{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-8px) rotate(3deg)}
}

/* Auf Mobile bleibt der komplette rechte Hero-Bereich bewusst weg */
@media(max-width:760px){
  body.kma-home .hero-card.kma-hero-community{
    display:none!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body.kma-home .kma-expert-card,
  body.kma-home .kma-floating-icon{
    animation:none!important;
  }
}


/* =========================================================
   Gesicht besser sichtbar: Person höher, etwas größer,
   Karten bewusst aus dem Gesichtsbereich verschoben
   ========================================================= */
@media(min-width:761px){
  body.kma-home .hero-card.kma-hero-community .kma-hero-person{
    left:52%!important;
    bottom:78px!important;
    width:min(58%,420px)!important;
  }

  /* Karten aus dem Gesicht herausziehen */
  body.kma-home .expert-car{
    top:28px!important;
    left:28px!important;
  }

  body.kma-home .expert-pc{
    top:74px!important;
    right:18px!important;
  }

  body.kma-home .expert-camera{
    top:210px!important;
    left:12px!important;
  }

  body.kma-home .expert-home{
    top:350px!important;
    right:14px!important;
  }

  /* Schriftzug etwas weiter nach rechts */
  body.kma-home .kma-handnote{
    right:20px!important;
    top:255px!important;
  }

  /* Unteren Textblock etwas tiefer, damit die Person Luft bekommt */
  body.kma-home .kma-hero-trust{
    left:30px!important;
    bottom:18px!important;
  }
}


/* =========================================================
   Hero-Final: Person mittig und sichtbar, Karten außen herum
   ========================================================= */
@media(min-width:761px){
  body.kma-home .hero-card.kma-hero-community{
    min-height:620px!important;
  }

  /* Person klar in die Mitte, Gesicht frei */
  body.kma-home .hero-card.kma-hero-community .kma-hero-person{
    left:52%!important;
    bottom:92px!important;
    width:min(61%,440px)!important;
    z-index:3!important;
  }

  /* Karten bewusst um die Person herum */
  body.kma-home .expert-car{
    top:30px!important;
    left:16px!important;
    width:220px!important;
  }

  body.kma-home .expert-pc{
    top:66px!important;
    right:10px!important;
    width:220px!important;
  }

  body.kma-home .expert-camera{
    top:225px!important;
    left:6px!important;
    width:210px!important;
  }

  body.kma-home .expert-home{
    top:334px!important;
    right:8px!important;
    width:218px!important;
  }

  /* Nichts mehr über dem Gesicht */
  body.kma-home .expert-car,
  body.kma-home .expert-pc,
  body.kma-home .expert-camera,
  body.kma-home .expert-home{
    z-index:5!important;
  }

  /* Icons weiter nach außen */
  body.kma-home .icon-one{
    top:36px!important;
    left:47%!important;
  }

  body.kma-home .icon-two{
    top:178px!important;
    left:43%!important;
  }

  body.kma-home .icon-three{
    top:150px!important;
    right:2px!important;
  }

  body.kma-home .icon-four{
    right:16px!important;
    bottom:45px!important;
  }

  /* Handschrift rechts vom Kopf */
  body.kma-home .kma-handnote{
    right:18px!important;
    top:235px!important;
    font-size:1.14rem!important;
  }

  /* Unterer Claim als eigener Block unter/seitlich der Person */
  body.kma-home .kma-hero-trust{
    left:auto!important;
    right:24px!important;
    bottom:22px!important;
    padding:14px 18px!important;
    border-radius:20px!important;
    background:rgba(255,255,255,.82)!important;
    box-shadow:0 12px 30px rgba(54,45,112,.08)!important;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }

  body.kma-home .kma-hero-trust-title{
    font-size:1.72rem!important;
  }

  /* Pfade optisch um die Person herum */
  body.kma-home .kma-hero-path.path-a{
    width:410px!important;
    height:350px!important;
    left:34px!important;
    top:112px!important;
  }

  body.kma-home .kma-hero-path.path-b{
    width:330px!important;
    height:290px!important;
    right:18px!important;
    top:138px!important;
  }
}


/* =========================================================
   Beliebte Themen: feste Slots – kein Springen der Seite
   ========================================================= */
body.kma-home .kma-home-topic-row{
  min-height:40px!important;
}

body.kma-home .kma-home-topic-rotator{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  overflow:hidden!important;
}

body.kma-home .kma-home-topic-rotator .kma-topic-slot{
  width:100%!important;
  min-width:0!important;
  height:36px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  padding:7px 10px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}

body.kma-home .kma-home-topic-rotator .kma-topic-label{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

body.kma-home .kma-home-topic-rotator .kma-topic-icon{
  flex:0 0 auto!important;
}

body.kma-home .kma-home-topic-rotator .kma-new{
  flex:0 0 auto!important;
}

/* Haus-&-Garten-Karte ist entfernt; übrige Karten sauber um die Person verteilen */
@media(min-width:761px){
  body.kma-home .expert-camera{
    top:236px!important;
    left:8px!important;
  }

  body.kma-home .expert-pc{
    top:78px!important;
    right:10px!important;
  }

  body.kma-home .kma-handnote{
    right:28px!important;
    top:280px!important;
  }
}

@media(max-width:760px){
  body.kma-home .kma-home-topic-row{
    min-height:78px!important;
  }

  body.kma-home .kma-home-topic-rotator{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
  }

  body.kma-home .kma-home-topic-rotator .kma-topic-slot:nth-child(3){
    display:none!important;
  }
}


/* =========================================================
   Mobile-Hero: kompakt, nicht überladen
   ========================================================= */
@media(max-width:760px){
  /* Rechten Bereich auf Mobile wieder zeigen – aber stark reduziert */
  body.kma-home .hero-card.kma-hero-community{
    display:block!important;
    min-height:350px!important;
    height:350px!important;
    margin-top:18px!important;
    border:1px solid rgba(102,86,239,.10)!important;
    border-radius:22px!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.90) 0 18%, rgba(255,255,255,.28) 19% 37%, transparent 38%),
      linear-gradient(145deg,#f5f3ff 0%,#eeecff 52%,#f8f7ff 100%)!important;
  }

  body.kma-home .hero-card.kma-hero-community::before{
    width:245px!important;
    height:245px!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    opacity:.65!important;
  }

  /* Person mittig und groß genug, Gesicht klar sichtbar */
  body.kma-home .hero-card.kma-hero-community .kma-hero-person{
    display:block!important;
    left:50%!important;
    bottom:52px!important;
    width:225px!important;
    max-width:62%!important;
    transform:translateX(-50%)!important;
    z-index:3!important;
  }

  /* Nur zwei kompakte Info-Karten */
  body.kma-home .kma-expert-card{
    display:none!important;
    animation:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  body.kma-home .expert-car,
  body.kma-home .expert-pc{
    display:flex!important;
    width:145px!important;
    min-height:0!important;
    padding:8px 9px!important;
    gap:7px!important;
    border-radius:14px!important;
    box-shadow:0 8px 22px rgba(40,35,86,.08)!important;
    background:rgba(255,255,255,.96)!important;
    z-index:6!important;
  }

  body.kma-home .expert-car{
    top:14px!important;
    left:10px!important;
    right:auto!important;
  }

  body.kma-home .expert-pc{
    top:50px!important;
    right:10px!important;
    left:auto!important;
  }

  body.kma-home .kma-expert-avatar{
    width:29px!important;
    height:29px!important;
    flex:0 0 29px!important;
    font-size:.60rem!important;
  }

  body.kma-home .kma-expert-card b{
    font-size:.70rem!important;
    line-height:1.08!important;
  }

  body.kma-home .kma-expert-card small{
    font-size:.61rem!important;
    line-height:1.1!important;
    margin-top:2px!important;
  }

  body.kma-home .kma-expert-card em{
    display:none!important;
  }

  /* Kamera-Karte, Handschrift, Linien und zusätzliche Icons mobil weg */
  body.kma-home .expert-camera,
  body.kma-home .kma-handnote,
  body.kma-home .kma-hero-path,
  body.kma-home .kma-floating-icon{
    display:none!important;
  }

  /* Nur zwei kleine Deko-Icons */
  body.kma-home .hero-card.kma-hero-community::after{
    content:"✈️";
    position:absolute;
    left:18px;
    bottom:78px;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(102,86,239,.10);
    box-shadow:0 7px 18px rgba(40,35,86,.07);
    font-size:1rem;
    z-index:5;
  }

  /* Claim unten kompakt */
  body.kma-home .kma-hero-trust{
    left:12px!important;
    right:12px!important;
    bottom:10px!important;
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    padding:10px 12px!important;
    border-radius:15px!important;
    background:rgba(255,255,255,.88)!important;
    box-shadow:0 8px 22px rgba(54,45,112,.07)!important;
    z-index:7!important;
  }

  body.kma-home .kma-hero-people{
    width:36px!important;
    height:36px!important;
    flex:0 0 36px!important;
    border-radius:11px!important;
    font-size:1rem!important;
  }

  body.kma-home .kma-hero-trust-title{
    font-size:1.05rem!important;
    line-height:1!important;
    letter-spacing:-.025em!important;
  }

  body.kma-home .kma-hero-trust-sub{
    margin-top:3px!important;
    font-size:.65rem!important;
    line-height:1.15!important;
  }
}

/* Sehr kleine Smartphones */
@media(max-width:390px){
  body.kma-home .hero-card.kma-hero-community{
    height:330px!important;
    min-height:330px!important;
  }

  body.kma-home .hero-card.kma-hero-community .kma-hero-person{
    width:205px!important;
    bottom:50px!important;
  }

  body.kma-home .expert-car,
  body.kma-home .expert-pc{
    width:132px!important;
  }

  body.kma-home .expert-car{
    left:7px!important;
  }

  body.kma-home .expert-pc{
    right:7px!important;
  }
}


/* Hero als eine zusammenhängende Fläche: Trennlinie zwischen links/rechts entfernen */
body.kma-home .hero-card.kma-hero-community{
  border-left:none!important;
}

body.kma-home .hero-grid{
  gap:0!important;
}

body.kma-home .hero-grid > div:first-child,
body.kma-home .hero-card.kma-hero-community{
  border-radius:0!important;
}

/* Nur der komplette Hero bekommt die Rundung */
body.kma-home .hero{
  overflow:hidden!important;
  border-radius:28px!important;
}

/* Mobile bleibt kompakt */
@media(max-width:760px){
  body.kma-home .hero{
    border-radius:22px!important;
  }
}


/* Mobile: auch dort keine Trennlinie / kein separater Rahmen im rechten Hero-Feld */
@media(max-width:760px){
  body.kma-home .hero-card.kma-hero-community{
    border:none!important;
    border-left:none!important;
    box-shadow:none!important;
  }

  body.kma-home .hero-grid{
    gap:0!important;
  }
}


/* Mobile: dezente Animationen für Person und zwei Karten */
@media(max-width:760px){
  body.kma-home .hero-card.kma-hero-community .kma-hero-person{
    animation:kmaMobilePersonFloat 5.2s ease-in-out infinite!important;
    transform-origin:center bottom!important;
    will-change:transform;
  }

  body.kma-home .expert-car{
    animation:kmaMobileCardFloatA 4.6s ease-in-out infinite!important;
    will-change:transform;
  }

  body.kma-home .expert-pc{
    animation:kmaMobileCardFloatB 5s ease-in-out infinite!important;
    animation-delay:.8s!important;
    will-change:transform;
  }

  body.kma-home .hero-card.kma-hero-community::after{
    animation:kmaMobileIconFloat 4.4s ease-in-out infinite!important;
    will-change:transform;
  }
}

@keyframes kmaMobilePersonFloat{
  0%,100%{
    transform:translateX(-50%) translateY(0);
  }
  50%{
    transform:translateX(-50%) translateY(-6px);
  }
}

@keyframes kmaMobileCardFloatA{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

@keyframes kmaMobileCardFloatB{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(5px)}
}

@keyframes kmaMobileIconFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-6px) rotate(3deg)}
}

@media(prefers-reduced-motion:reduce){
  body.kma-home .hero-card.kma-hero-community .kma-hero-person,
  body.kma-home .expert-car,
  body.kma-home .expert-pc,
  body.kma-home .hero-card.kma-hero-community::after{
    animation:none!important;
  }
}


/* =========================================================
   Hero-Farbe über volle Browserbreite
   Inhalt bleibt im zentrierten .wrap
   ========================================================= */
body.kma-home .hero{
  width:100%!important;
  margin:0!important;
  padding:0!important;
  background:#f1efff!important;
  border-radius:0!important;
  overflow:visible!important;
}

body.kma-home .hero-grid{
  min-height:620px!important;
  background:transparent!important;
  border-radius:0!important;
  overflow:hidden!important;
}

/* rechte Seite optisch in dieselbe Fläche integrieren */
body.kma-home .hero-card.kma-hero-community{
  border:none!important;
  border-left:none!important;
  background:
    radial-gradient(circle at 55% 43%,rgba(255,255,255,.78) 0 16%,rgba(255,255,255,.24) 17% 35%,transparent 36%),
    transparent!important;
}

/* linke Seite ebenfalls transparent – dadurch eine einzige Fläche */
body.kma-home .hero-grid > div:first-child{
  background:transparent!important;
}

/* Mobile ebenfalls durchgehende Hintergrundfläche */
@media(max-width:760px){
  body.kma-home .hero{
    background:#f1efff!important;
    padding:0!important;
  }

  body.kma-home .hero-grid{
    background:transparent!important;
    border-radius:0!important;
  }

  body.kma-home .hero-card.kma-hero-community{
    border:none!important;
    background:
      radial-gradient(circle at 50% 50%,rgba(255,255,255,.78) 0 18%,rgba(255,255,255,.22) 19% 38%,transparent 39%),
      transparent!important;
  }
}

/* =========================================================
   FINAL: Rechten Hero auch in der echten Mobile-Ansicht zeigen
   ========================================================= */
@media(max-width:760px){
  html:not(.kma-web-view) body.kma-home .hero-card.kma-hero-community{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }

  html:not(.kma-web-view) body.kma-home .hero-card.kma-hero-community .kma-hero-person{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }

  html:not(.kma-web-view) body.kma-home .hero-card.kma-hero-community .expert-car,
  html:not(.kma-web-view) body.kma-home .hero-card.kma-hero-community .expert-pc,
  html:not(.kma-web-view) body.kma-home .hero-card.kma-hero-community .kma-hero-trust{
    display:flex!important;
  }
}
/* Flugzeug Werbung */
.kma-flying-ad {
    position: fixed;
    top: 35vh;
    left: 0;
    z-index: 99999;
    pointer-events: none;

    /* Start außerhalb rechts */
    transform: translateX(110vw);
}

.kma-flying-ad-image {
    display: block;
    width: 800px;
    height: auto;
    max-width: none;
}

.kma-flying-ad-start {
    animation: kmaFlug 10s linear forwards;
}

@keyframes kmaFlug {
    from {
        transform: translateX(110vw);
    }

    to {
        transform: translateX(-100%);
    }
}

/* Tablet */
@media (max-width: 1000px) {
    .kma-flying-ad-image {
        width: 600px;
    }
}

/* Smartphone */
@media (max-width: 760px) {
    .kma-flying-ad {
        top: 30vh;
    }

    .kma-flying-ad-image {
        width: 380px;
    }

    .kma-flying-ad-start {
        animation-duration: 8s;
    }
}

/* kleine Smartphones */
@media (max-width: 390px) {
    .kma-flying-ad-image {
        width: 330px;
    }
}

/* KennMichAus – Wissen-Sektion mit kompakten Bildkarten */
.knowledge-section{background:#f4f1ff;overflow:hidden}
.knowledge-section .knowledge-shell{padding:0}
.knowledge-section .knowledge-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:64px;align-items:center}
.knowledge-section .knowledge-copy h2{max-width:760px}
.knowledge-section .knowledge-flow{display:grid;gap:14px}

.kma-topic-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:38px;padding:6px 2px 12px}
.kma-topic-card{position:relative;display:block;min-width:0;height:245px;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 16px 40px rgba(31,27,75,.10);text-decoration:none;color:#111827;isolation:isolate;transition:transform .22s ease,box-shadow .22s ease}
.kma-topic-card:nth-child(1){transform:rotate(-1.2deg)}
.kma-topic-card:nth-child(2){transform:translateY(8px) rotate(.5deg)}
.kma-topic-card:nth-child(3){transform:translateY(-5px) rotate(1deg)}
.kma-topic-card:nth-child(4){transform:translateY(6px) rotate(-.6deg)}
.kma-topic-card:hover{transform:translateY(-6px) rotate(0);box-shadow:0 22px 48px rgba(31,27,75,.16)}
.kma-topic-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.kma-topic-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 43%,rgba(9,12,25,.08) 58%,rgba(9,12,25,.50) 100%);z-index:1;pointer-events:none}
.kma-topic-band{position:absolute;z-index:2;left:14px;right:14px;bottom:14px;display:flex;align-items:center;gap:11px;padding:11px 13px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.72);border-radius:17px;box-shadow:0 8px 24px rgba(15,23,42,.12)}
.kma-topic-icon{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:12px;background:#f0edff;color:#6257f5;font-size:19px}
.kma-topic-text{min-width:0;line-height:1.15}
.kma-topic-text b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em;color:#111827}
.kma-topic-text small{display:block;margin-top:4px;font-size:12px;color:#747b8d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kma-topic-arrow{margin-left:auto;color:#6257f5;font-size:18px;font-weight:700}

@media(max-width:900px){
 .knowledge-section .knowledge-top{grid-template-columns:1fr;gap:30px}
 .kma-topic-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 .kma-topic-card,.kma-topic-card:nth-child(n){height:220px;transform:none}
}
@media(max-width:600px){
 .kma-topic-cards{display:flex;gap:13px;overflow-x:auto;margin-left:-16px;margin-right:-16px;padding:5px 16px 18px;scroll-snap-type:x mandatory;scrollbar-width:none}
 .kma-topic-cards::-webkit-scrollbar{display:none}
 .kma-topic-card,.kma-topic-card:nth-child(n){flex:0 0 74vw;max-width:285px;height:205px;scroll-snap-align:start;transform:none;border-radius:21px}
 .kma-topic-band{left:10px;right:10px;bottom:10px;padding:9px 10px;border-radius:15px}
 .kma-topic-icon{width:34px;height:34px;flex-basis:34px;font-size:17px}
 .kma-topic-text b{font-size:15px}
 .kma-topic-text small{font-size:11.5px}
}
/* ==================================================
   RATGEBER AUF DER STARTSEITE
   ================================================== */

.kma-ratgeber-home {
    padding-top: 12px;
    overflow: hidden;
}

.kma-ratgeber-home-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    width: 100%;
}

.kma-ratgeber-home-card {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;

    border: 1px solid #e7e8ec;
    border-radius: 18px;

    background: #fff;
    color: inherit;
    text-decoration: none;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.kma-ratgeber-home-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 38px rgba(20, 22, 35, .08);
}


/* BILD */

.kma-ratgeber-home-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f3f3f5;
}

.kma-ratgeber-home-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* INHALT */

.kma-ratgeber-home-body {
    padding: 20px;
    min-width: 0;
}

.kma-ratgeber-home-cat {
    display: block;

    margin-bottom: 10px;

    color: #5d52e8;

    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;

    text-transform: uppercase;
    letter-spacing: .06em;
}

.kma-ratgeber-home-body h3 {
    margin: 0 0 10px;

    color: #17181d;

    font-size: 20px;
    line-height: 1.28;
    letter-spacing: -.02em;

    overflow-wrap: anywhere;
}

.kma-ratgeber-home-body p {
    display: -webkit-box;

    margin: 0 0 16px;

    overflow: hidden;

    color: #70747d;

    font-size: 14px;
    line-height: 1.6;

    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    overflow-wrap: anywhere;
}

.kma-ratgeber-home-more {
    display: inline-block;

    color: #5d52e8;

    font-size: 13px;
    font-weight: 800;
}


/* ==================================================
   TABLET
   ================================================== */

@media (max-width: 850px) {

    .kma-ratgeber-home-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .kma-ratgeber-home-body {
        padding: 18px;
    }

    .kma-ratgeber-home-body h3 {
        font-size: 19px;
    }

}


/* ==================================================
   SMARTPHONE
   ================================================== */

@media (max-width: 600px) {

    .kma-ratgeber-home {
        padding-top: 6px;
        overflow: hidden;
    }

    .kma-ratgeber-home .wrap {
        width: 100%;
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    .kma-ratgeber-home .section-head {
        width: 100%;
        min-width: 0;
    }

    .kma-ratgeber-home-grid {
        display: grid;

        grid-template-columns: minmax(0, 1fr);

        width: 100%;
        max-width: 100%;

        gap: 16px;

        margin: 0;
        padding: 0;

        overflow: visible;
    }

    .kma-ratgeber-home-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        margin: 0;

        border-radius: 16px;
    }

    .kma-ratgeber-home-image {
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .kma-ratgeber-home-body {
        width: 100%;
        min-width: 0;

        padding: 16px;

        box-sizing: border-box;
    }

    .kma-ratgeber-home-cat {
        margin-bottom: 8px;

        font-size: 10px;
        line-height: 1.3;
    }

    .kma-ratgeber-home-body h3 {
        margin-bottom: 8px;

        font-size: 18px;
        line-height: 1.3;

        overflow-wrap: anywhere;
        word-break: normal;
    }

    .kma-ratgeber-home-body p {
        margin-bottom: 13px;

        font-size: 13px;
        line-height: 1.55;

        -webkit-line-clamp: 3;
    }

    .kma-ratgeber-home-more {
        font-size: 12px;
    }

}


/* ==================================================
   SEHR KLEINE SMARTPHONES
   ================================================== */

@media (max-width: 380px) {

    .kma-ratgeber-home .wrap {
        padding-left: 12px;
        padding-right: 12px;
    }

    .kma-ratgeber-home-body {
        padding: 14px;
    }

    .kma-ratgeber-home-body h3 {
        font-size: 17px;
    }

}