/* Kleine Korrekturen gegenüber dem Ursprungs-Template */
html, body { overflow-x: clip; }

/* Logo: Schramm-Logo ist breiter als das Original */
.navigation_logo-image { height: 32px; width: auto; max-width: 180px; }
.navigation_logo-link, .navigation_logo { margin-right: 1.5rem; }

/* Navigationspunkte nicht umbrechen */
.navigation_link, .footer_link { white-space: nowrap; }

/* leere Logo-Leiste im Footer ausblenden */
.footer_legal-icons:empty { display: none; }
.footer_legal-icons { min-height: 0; }

/* Platzhalter-Portraits in den Kundenstimmen */
.testimonials_item_single-image, .testimonials_item_image { object-fit: cover; background: #f3eaea; }

/* Hero: Schramm hat nur Portraitfotos, kein separates Raum-Bild.
   Darum ein Foto als Hintergrund, Vordergrund-Freisteller aus, Text links lesbar halten. */
.section_hero { position: relative; }
.hero_image { display: none !important; }
.hero_background-image { object-position: 74% 16%; }
.section_hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(247,249,252,.97) 0%,
    rgba(247,249,252,.95) 30%,
    rgba(247,249,252,.62) 52%,
    rgba(247,249,252,.12) 72%,
    rgba(247,249,252,0) 86%);
}
.section_hero > .padding-global,
.section_hero > .kc-hero_bottom-cards_wrapper { position: relative; z-index: 2; }
@media (max-width: 991px) {
  .section_hero::after {
    background: linear-gradient(180deg, rgba(247,249,252,.96) 0%, rgba(247,249,252,.9) 55%, rgba(247,249,252,.72) 100%);
  }
  .hero_background-image { object-position: 70% 12%; }
}

/* ersetzte Logo-SVGs (jetzt Bilder) auf sinnvolle Größe bringen */
.comparison-cards_logo { height: 38px; width: auto; max-width: 220px; }
img.footer_logo { height: 34px; width: auto; max-width: 230px; }
.kc-concept_animation img.footer_logo { height: auto; width: 34%; max-width: 160px; }

/* CTA-Boxen: Philipp als Freisteller statt Foto mit Hintergrund */
.cta_image { height: auto; width: clamp(200px, 26vw, 340px); object-fit: contain; filter: drop-shadow(0 24px 40px rgba(11,36,71,.35)); }
.cta_image-container { inset: auto 6% 0% auto; }
@media (max-width: 991px){ .cta_image, .cta_image-arrow { display: none; } }

/* moderne Line-Icons sauber dimensionieren */
.benefits-cards_icon { width: 40px !important; height: 40px; flex: none; color: #2f7be0; stroke: #2f7be0; fill: none; }
.kc-concept_animation-icon-svg { width: 30px !important; height: 30px; }

/* Versicherer-Logoleiste unter dem Hero: transparente Glaskarten wie im Original */
.kc-hero_bottom-cards_item {
  flex: 0 0 200px;          /* sonst staucht flex-shrink die Karten unterschiedlich und sie überlappen */
  background-color: rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,.5);
  border-bottom: 1px solid rgba(11,36,71,.14);
  box-shadow: none;
}
.kc-hero_bottom-cards, .kc-hero_bottom-cards_container { flex: 0 0 auto; }
@media (max-width: 991px){ .kc-hero_bottom-cards_item { flex: 0 0 150px; } }
.kc-hero_bottom-cards_image {
  height: 40px;
  filter: grayscale(1);
  opacity: .78;
  transition: filter .3s, opacity .3s;
}
.kc-hero_bottom-cards_item:hover .kc-hero_bottom-cards_image { filter: none; opacity: 1; }

/* Konzept-Ring: Icons immer blau auf hellem Glas, nie das alte Rot aus dem Template */
.kc-concept_animation-icon { background-color: rgba(255,255,255,.9) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #2f7be0 !important; }
.kc-concept_animation-icon svg,
.kc-concept_animation-icon-svg { stroke: #2f7be0 !important; fill: none !important; color: #2f7be0 !important; }
.kc-concept_animation img.footer_logo { opacity: .95; }

/* Solar-Duotone: zweite Ebene etwas kräftiger als die Iconify-Vorgabe */


/* Rest-Rot aus Template-Animationen: die Farben werden per JS inline gesetzt,
   stehen in keiner Datei und lassen sich nur mit !important überschreiben. */
.process_blob { background-color: #fff !important; }
.process_timeline_progress { background-color: #fff !important; }

/* dunkle Akzent-Karte ohne sichtbaren Rahmen */
.layout_card.style-accent { border-color: transparent !important; }

/* handgezeichnete Pfeile und Schriftzüge aus dem Ursprungs-Template */
.cta_image-arrow, .problems_arrow, .comparison-cards_arrow,
.global_title-handwritten, .text-style-handwritten { display: none !important; }

/* ---- Zielgruppe direkt im Hero ---- */
.hero_zielgruppe { max-width: none; font-size: .8125rem; line-height: 1.4; opacity: .55;
  margin: 0; white-space: nowrap; letter-spacing: .01em; }
@media (max-width: 991px){ .hero_zielgruppe { white-space: normal; font-size: .75rem; } }

/* ---- Unterpunkte in den beiden Themen ---- */
.kc-concept_list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.kc-concept_list li { position: relative; padding-left: 1.1rem; font-size: .9375rem; line-height: 1.55; opacity: .8; }
.kc-concept_list li::before { content: ""; position: absolute; left: 0; top: .62em;
  width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; opacity: .45; }

/* ---- Ring-Grafik tiefer setzen und Punkte mitlaufen lassen ---- */
.kc-concept_animation { margin-top: 7rem !important; top: 38vh !important; }
.kc-concept_animation-icon {
  transition: background-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.kc-concept_animation-icon.is-active {
  background-color: #fff !important;
  transform: scale(1.12);
  box-shadow: 0 12px 34px rgba(11,36,71,.28);
}
.kc-concept_animation-icon.is-active svg,
.kc-concept_animation-icon.is-active .kc-concept_animation-icon-svg { stroke: #2f7be0 !important; }

/* ---- Vergleichskarten: links blass, rechts prominent ---- */
.comparison-cards_container > .layout_card:not(.style-accent) {
  background-color: #f6f7f9 !important;
  border-color: rgba(11,36,71,.08) !important;
  box-shadow: none !important;
  filter: grayscale(1);
  transform: scale(.97);
  transform-origin: center right;
  transition: opacity .3s ease, transform .3s ease;
}
.comparison-cards_container > .layout_card.style-accent {
  transform: scale(1.05);
  transform-origin: center left;
  box-shadow: none !important;
  position: relative;
  z-index: 2;
}
@media (max-width: 767px){
  .comparison-cards_container > .layout_card:not(.style-accent),
  .comparison-cards_container > .layout_card.style-accent { transform: none; }
}

/* ---- Vergleichskarte links: Text blass, Haken grau ---- */
.comparison-cards_container > .layout_card:not(.style-accent) h3 { color: rgba(11,36,71,.42) !important; }
.comparison-cards_container > .layout_card:not(.style-accent) p { color: rgba(11,36,71,.38) !important; }
.comparison-cards_container > .layout_card:not(.style-accent) svg { opacity: .3; }

/* ---- rechte Karte groesser statt skaliert (IX2 ueberschreibt transform) ---- */
.comparison-cards_container > .layout_card.style-accent {
  padding: 2.75rem 2.5rem !important;
  margin: -1rem 0 !important;
}
@media (max-width: 767px){
  .comparison-cards_container > .layout_card.style-accent { padding: 1.75rem 1.5rem !important; margin: 0 !important; }
}

/* ---- Akzentkarte: kein Rahmen, kein Schatten ---- */
.comparison-cards_container > .layout_card.style-accent,
.layout_card.style-accent {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* ---- Vergleichspunkte einzeilig ---- */
@media (min-width: 992px){
  .comparison-cards_container .global_icon-text_item p { white-space: nowrap; }
}

/* ---- Karte links niedriger halten, rechte darf groesser sein ---- */
.comparison-cards_container { align-items: flex-start !important; }
.comparison-cards_container > .layout_card:not(.style-accent) {
  align-self: flex-start !important;
  height: auto !important;
  padding: 2rem 2.25rem !important;
  margin-top: 1.5rem !important;
}
@media (max-width: 767px){
  .comparison-cards_container > .layout_card:not(.style-accent) { margin-top: 0 !important; padding: 1.5rem 1.25rem !important; }
}