/* ================================================================
 * custom.css — site-specific overrides for the SicherTier frontend.
 * Loaded AFTER the Webflow stylesheets so these rules win.
 * ================================================================ */

/* ---------- Global text rendering ---------- */
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Long German compound words in large headings must break rather than
   overflow the viewport on narrow screens (site-wide safety net). */
h1,
h2,
h3,
.hero_heading,
.heading-style-h1,
.heading-style-h2,
.heading-style-h3 {
  overflow-wrap: break-word;
}

/* ---------- Heading emphasis: gradient squiggle underline (SVG) ---------- */
h1 em,
h2 em,
h3 em,
h4 em,
.hero_heading em,
.heading-style-h1 em,
.heading-style-h2 em,
.heading-style-h3 em {
  font-style: normal;
  text-decoration: none;
  background-image: url("/images/em-underline.svg");
  padding-bottom: 0.16em;
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: auto 0.3em;
}

/* ---------- Custom paw bullets: blog content + landing-page rich text ---------- */

p + ul {
  margin-top: 1.5em;
}

.blog_content_text ul li,
.image-content_text ul li,
.about_content-text ul li,
.cta_content ul li,
.hero_subheading ul li {
  position: relative;
  list-style: none;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  unicode-bidi: isolate;
  opacity: 1;
  margin-bottom: 0.5em;
}

.blog_content_text ul li::before,
.image-content_text ul li::before,
.about_content-text ul li::before,
.cta_content ul li::before,
.hero_subheading ul li::before {
  content: "";
  position: absolute;
  left: -2em;
  top: 0.3em;
  height: 1.25em;
  aspect-ratio: 1 / 1;
  background-image: url("/images/Pfote.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

.blog_content_text ul li::before {
  height: 1em;
}

/* Landing-page bullet text at full opacity (override any dimmed body text) */
.image-content_text ul li,
.about_content-text ul li,
.cta_content ul li,
.hero_subheading ul li {
  opacity: 1;
  color: var(--text-color--text-primary, #002006);
}

/* ---------- Extra spacing below H2 in CTA + image-text sections ---------- */
.section_cta h2,
.cta_content h2,
.section_image-content h2,
.image-content_text h2 {
  margin-bottom: 1.5rem;
}

/* ================================================================
 * COVERAGE SECTION (Leistet / Leistet nicht) — two badge cards
 * ================================================================ */

.section_coverage {
  overflow: hidden; /* contains the slightly rotated card backgrounds */
}

.coverage_header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.coverage_header .generic_headline-container {
  width: 100%;
  max-width: 660px;
}

.coverage_intro {
  width: 100%;
  max-width: 600px;
}

.coverage_intro p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.32px;
  color: var(--text-color--text-primary, #002006);
  opacity: 0.5;
}

.coverage_cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 80px;
  margin-top: 3rem;
}

.coverage_card {
  position: relative;
  width: 400px;
  max-width: 100%;
  margin-top: 52px; /* room for the badge that overhangs the top */
}

/* Tilted lighter card behind the main card */
.coverage_card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #e2f8f8;
  border-radius: 15px;
  transform: rotate(3.26deg);
}

.coverage_card-inner {
  position: relative;
  background-color: #e9fbfb;
  border-radius: 15px;
  padding: 64px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.coverage_card-badge {
  position: absolute;
  top: -52px;
  left: 50%;
  transform: translateX(-50%);
  width: 104px;
  height: 104px;
  z-index: 2;
}

.coverage_card-badge img {
  display: block;
  width: 100%;
  height: 100%;
}

.coverage_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.coverage_item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.coverage_item-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: block;
}

.coverage_item-text {
  flex: 1 1 0;
  min-width: 0;
}

.coverage_item-text p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.32px;
  color: var(--text-color--text-primary, #002006);
  opacity: 0.5;
}

@media (max-width: 991px) {
  .coverage_cards {
    flex-direction: column;
    align-items: center;
    gap: 72px;
  }
}

/* ================================================================
 * TEXT + IMAGE STACK — centered text on top, framed image below
 * ================================================================ */

.text-image-stack_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

.text-image-stack_header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.text-image-stack_header .generic_headline-container {
  width: 100%;
  max-width: 600px;
}

/* Long German compound words must wrap on narrow screens (no overflow). */
.coverage_header h2,
.text-image-stack_header h2 {
  overflow-wrap: break-word;
  hyphens: auto;
}

.text-image-stack_intro {
  width: 100%;
  max-width: 600px;
}

.text-image-stack_intro p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.32px;
  color: var(--text-color--text-primary, #002006);
  opacity: 0.5;
}

.text-image-stack_media {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  background-color: #e9fbfb;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.text-image-stack_image {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
}

@media (max-width: 991px) {
  .text-image-stack_inner {
    gap: 40px;
  }
  .text-image-stack_media {
    padding: 16px;
  }
  /* Editor opted to show the image ABOVE the text on mobile. */
  .section_text-image-stack.is-mobile-image-above .text-image-stack_inner {
    flex-direction: column-reverse;
  }
}

/* ================================================================
 * NUMBERED TEXT — Swiper carousel of numbered boxes
 * ================================================================ */

.numbered-text_header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.numbered-text_heading {
  margin: 0;
}

.numbered-text_nav {
  display: flex;
  gap: 0.75rem;
  margin-left: auto; /* always pinned to the right ("rechts oben") */
}

.numbered-text_arrow {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color--text-primary, #002006);
  background-image: linear-gradient(
    90deg,
    var(--brand-gradient--start, #c7ff2c),
    var(--brand-gradient--end, #fff200)
  );
  transition: transform 0.15s ease, filter 0.15s ease;
}

.numbered-text_arrow:hover {
  filter: brightness(0.96);
}

.numbered-text_arrow:active {
  transform: scale(0.94);
}

/* Slides keep equal height so a row of boxes lines up. */
.numbered-text_swiper {
  width: 100%;
}

.numbered-text_slide {
  height: auto;
}

.numbered-text_item {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
  height: 100%;
}

.numbered-text_badge {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background-color: #ff5a5a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.32px;
  color: var(--text-color--text-primary, #002006);
}

.numbered-text_item-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.numbered-text_item-title {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: 0.4px;
  color: var(--text-color--text-primary, #002006);
}

.numbered-text_item-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.32px;
  color: var(--text-color--text-primary, #002006);
  opacity: 0.5;
  white-space: pre-wrap;
}

/* ================================================================
 * ACCORDION + IMAGE — content with single-open accordion, framed image
 * ================================================================ */

.accordion-image_container {
  display: flex;
  align-items: center;
  gap: 4rem;
}

.accordion-image_content {
  flex: 1 1 0;
  min-width: 0;
}

.accordion-image_heading {
  margin: 0 0 1rem;
}

.accordion-image_intro {
  max-width: 34rem;
  margin-bottom: 2rem;
}

.accordion-image_intro p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.32px;
  color: var(--text-color--text-primary, #002006);
  opacity: 0.5;
}

.accordion-image_list {
  display: flex;
  flex-direction: column;
}

.accordion-image_item {
  border-bottom: 1px solid rgba(0, 32, 6, 0.15);
}

.accordion-image_trigger {
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
}

.accordion-image_title {
  flex: 1 1 0;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.32px;
  color: var(--text-color--text-primary, #002006);
  opacity: 0.8;
}

.accordion-image_item.is-open .accordion-image_title {
  font-weight: 700;
  opacity: 1;
}

.accordion-image_icon {
  flex: 0 0 auto;
  width: 26px;
  height: 25px;
  display: block;
  transition: transform 0.25s ease;
}

.accordion-image_item.is-open .accordion-image_icon {
  transform: rotate(180deg);
}

/* Smooth height animation without measuring (grid-rows 0fr -> 1fr). */
.accordion-image_panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.accordion-image_item.is-open .accordion-image_panel {
  grid-template-rows: 1fr;
}

.accordion-image_panel-inner {
  overflow: hidden;
}

.accordion-image_panel-text {
  margin: 0;
  padding: 0 1rem 1rem;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.32px;
  color: var(--text-color--text-primary, #002006);
  opacity: 0.5;
}

.accordion-image_cta {
  margin-top: 2rem;
}

/* Image with tilted gradient accent behind it */
.accordion-image_media {
  flex: 0 0 auto;
  position: relative;
  width: 465px;
  max-width: 100%;
}

.accordion-image_media-accent {
  position: absolute;
  inset: 0;
  border-radius: 40px;
  background-image: linear-gradient(
    90deg,
    var(--brand-gradient--start, #c7ff2c),
    var(--brand-gradient--end, #fff200)
  );
  transform: rotate(7deg);
  z-index: 0;
}

.accordion-image_image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 465 / 524;
  object-fit: cover;
  border-radius: 40px;
}

@media (max-width: 991px) {
  .accordion-image_container {
    flex-direction: column;
    align-items: stretch;
    gap: 2.5rem;
  }
  /* Mobile: image ALWAYS above the text. */
  .accordion-image_media {
    order: -1;
    width: 100%;
    align-self: center;
    max-width: 465px;
  }
  .accordion-image_intro {
    max-width: none;
  }
}

/* ================================================================
 * BLOG CONTENT
 * ================================================================ */

/* Sub-line below the article H1: 1rem, no left indent */
.blog_hero_description {
  padding-left: 0;
  margin-left: 0;
  font-size: 1rem;
}

/* Custom block: hint / callout */
.blog_content_hint {
  margin: 1rem 0;
  background-color: #fbfae9;
  border-radius: 15px;
  padding: 32px;
  position: relative;
  padding-left: 60px; /* space for the emoji */
}

.blog_content_hint::before {
  content: "💡";
  position: absolute;
  left: 32px;
  top: 32px;
  font-size: 20px;
  line-height: 1;
}

@media (max-width: 768px) {
  .blog_content_hint {
    padding: 32px;
    padding-top: 70px; /* space for the emoji on top */
  }
  .blog_content_hint::before {
    left: 32px;
    top: 32px;
    position: absolute;
  }
}

/* Custom block: grid (cost lists) */
.blog_content_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

@media (max-width: 768px) {
  .blog_content_grid {
    grid-template-columns: 1fr;
  }
}

/* Custom block: table */
.blog_content_table-scroll-container {
  width: 770px;
  display: flex;
  justify-content: center;
  overflow-x: auto;
  margin: 1.5rem 0;
}

@media (max-width: 990px) {
  .blog_content_table-scroll-container {
    width: calc(100vw - 2.5rem);
    margin-right: -2.5rem;
  }
}

@media (max-width: 767px) {
  .blog_content_table-scroll-container {
    width: calc(100vw - 1.25rem);
    margin-right: -1.25rem;
  }
}

.blog_content_table-responsive {
  width: 100%;
}

.blog_content_table {
  border-radius: 8px;
  overflow: hidden;
}

.blog_content_table th,
.blog_content_table td {
  text-align: left;
  padding: 12px 16px;
  border: 1px solid #eee;
  min-width: 180px;
}

.blog_content_table th {
  background-color: #f9f9f9;
  font-weight: bold;
}

.blog_content_table tbody tr:nth-child(odd) {
  background-color: #fff;
}

.blog_content_table tbody tr:nth-child(even) {
  background-color: #fdfdfd;
}

/* In-text CTA button: drop native link styling, use the normal dark colour */
.blog_content_text a.button,
.blog_content_mid-cta-container a.button {
  color: var(--text-color--text-primary, #002006);
  text-decoration: none;
}

/* Author box at the end of the article */
.blog_content_author-wrapper {
  position: relative;
  margin-top: 3rem;
}

/* ================================================================
 * NAVIGATION — scroll theming, topline carousel, mobile menu
 * Nav breakpoint is 991px (Webflow default).
 * ================================================================ */

/* ---------- Scroll-aware theming ---------- */
.navbar {
  transition: background-color 0.25s ease, color 0.25s ease,
    box-shadow 0.25s ease;
}

/* LIGHT pages: dark text/logo at top; solid white + shadow when scrolled. */
.navbar--light.navbar--scrolled {
  background-color: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 32, 6, 0.08);
}

/* DARK-HERO pages (blog article): white text always; transparent at top,
   dark-green background when scrolled. */
.navbar--dark {
  color: var(--text-color--text-alternate, #ffffff);
}
.navbar--dark .navbar_link,
.navbar--dark .navbar_menu-inner,
.navbar--dark .navbar_dropdown-toggle {
  color: var(--text-color--text-alternate, #ffffff);
}
.navbar--dark.navbar--scrolled {
  background-color: #002006;
}

/* ---------- Logo toggle (dark vs bright) ---------- */
/* Default: dark logo shown, bright hidden (matches base Webflow CSS). */
/* Show the BRIGHT logo when on a dark-hero page OR when scrolled into a
   dark-green bar; show the DARK logo otherwise. */
.navbar--dark .navbar_logo-image {
  display: none;
}
.navbar--dark .navbar_logo-image.on-dark {
  display: inline-block;
}

/* ---------- Topline mobile fading carousel ---------- */
/* Desktop (>= 992px): all items visible in a row (base Webflow layout,
   opacity 1). activeIndex is ignored. */
@media screen and (min-width: 992px) {
  .topline_item {
    opacity: 1 !important;
    position: static !important;
  }
}

/* Mobile (<= 991px): items are stacked absolutely (base Webflow CSS sets
   opacity:0; position:absolute). Only the active one fades in. */
@media screen and (max-width: 991px) {
  .topline_item {
    transition: opacity 0.6s ease;
    pointer-events: none;
  }
  .topline_item[data-active='true'] {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ---------- Mobile menu icon: transparent bg, bigger icon ---------- */
@media screen and (max-width: 991px) {
  .navbar_menu-button,
  .navbar_menu-button.w--open,
  .navbar_menu-button.on-bright,
  .navbar_menu-button.on-dark {
    background-color: transparent;
  }
  .navbar_menu-icon {
    width: 44px;
    height: 44px;
  }
  .navbar_menu-icon svg {
    width: 100%;
    height: 100%;
  }
}

/* ---------- Mobile nav item borders + bigger chevron ---------- */
@media screen and (max-width: 991px) {
  /* Bottom divider under each top-level item (dropdowns + leaf wrappers). */
  .navbar_menu-inner > .navbar_dropdown,
  .navbar_menu-inner > .navbar_link-wrapper {
    border-bottom: 1px solid rgba(0, 32, 6, 0.12);
  }
  .navbar--dark .navbar_menu-inner > .navbar_dropdown,
  .navbar--dark .navbar_menu-inner > .navbar_link-wrapper {
    border-bottom-color: rgba(255, 255, 255, 0.3);
  }
  /* No border under the final nav item (marked with .is-last by the component). */
  .navbar_menu-inner > .navbar_dropdown.is-last,
  .navbar_menu-inner > .navbar_link-wrapper.is-last {
    border-bottom: none;
  }

  /* Whole toggle row is tappable (already the click target); ensure pointer. */
  .navbar_dropdown-toggle {
    cursor: pointer;
  }

  /* Bigger dropdown chevron on mobile. */
  .navbar_dropdown-toggle svg {
    width: 32px;
    height: 32px;
  }
}

/* ---------- Dark nav: opened mobile menu panel needs a dark background ---------- */
@media (max-width: 991px) {
  .navbar--dark .navbar_menu {
    background-color: #002006; /* brand dark green so white menu text is readable */
  }
  /* keep menu links/text white on the dark panel */
  .navbar--dark .navbar_menu .navbar_link,
  .navbar--dark .navbar_menu .navbar_dropdown-toggle,
  .navbar--dark .navbar_menu .navbar_dropdown-link {
    color: #ffffff;
  }
}