/* Statistics overview (#145). Colors from the owner's mockup (Listflix brand). Loaded as a file, never inline. */
.lfx-su { --su-text: #1F2937; --su-text-2: #4B5563; --su-muted: #6B7280; --su-faint: #9CA3AF;
  --su-green: #29AD7D; --su-link: #1d8a63; --su-link-hover: #166b4d; --su-yellow: #FECB18;
  --su-orange: #e66e16; --su-orange-dot: #F58634; --su-light: #F5F6F8; --su-line: #E5E7EB;
  --su-mint: #eaf7f2; --su-dark: #1F2937; --su-dark-card: #273344; --su-dark-line: #374151;
  --su-dark-text: #D1D5DB;
  color: var(--su-text); font-family: inherit; line-height: 1.5; overflow-wrap: break-word;
  /* Layout follows the overview's own width (950 px like /branchen/), not the viewport. */
  container: lfx-su / inline-size; }
.lfx-su *, .lfx-su *::before, .lfx-su *::after { box-sizing: border-box; }
.lfx-su h1, .lfx-su h2, .lfx-su h3, .lfx-su p, .lfx-su ul { margin: 0; padding: 0; }
/* OceanWP underlines links on pages not built with Elementor with a (0,6,1) selector, hence !important;
   inside the overview only real link texts are underlined. */
.lfx-su a, .lfx-su a:visited { color: var(--su-link); text-decoration: none !important; }
.lfx-su .lfx-su-more, .lfx-su a.lfx-su-link, .lfx-su a.lfx-su-all, .lfx-su .lfx-su-empty a { text-decoration: underline !important; text-underline-offset: 3px; }
.lfx-su a:hover { color: var(--su-link-hover); }
.lfx-su-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lfx-su-sec { padding: 56px 0; display: flex; flex-direction: column; gap: 28px; }
/* Full-width background without widening the layout (no horizontal scrolling). */
.lfx-su-band { background: var(--su-light); box-shadow: 0 0 0 100vmax var(--su-light); clip-path: inset(0 -100vmax); }
.lfx-su-dark { background: var(--su-dark); box-shadow: 0 0 0 100vmax var(--su-dark); clip-path: inset(0 -100vmax); }
.lfx-su-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.lfx-su-head > div:first-child { display: flex; flex-direction: column; gap: 6px; }
/* The Elementor kit styles h1-h3 after this file with (0,1,1) selectors; heading rules here are more specific. */
.lfx-su > section h2 { font-size: 30px; line-height: 1.25; font-weight: 800; letter-spacing: 0; color: var(--su-text); }
.lfx-su-lead { font-size: 16px; color: var(--su-text-2); }
.lfx-su-note { font-size: 15px; font-weight: 600; color: var(--su-muted); }

/* Hero and search */
.lfx-su-hero { padding: 36px 0 44px; display: flex; flex-direction: column; gap: 22px; align-items: center; text-align: center; }
.lfx-su-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--su-orange); }
/* The kit's h1 font (UniNeueBold) is not loaded on the site; use the page font. */
.lfx-su .lfx-su-hero h1 { font-family: inherit; font-size: 46px; line-height: 1.12; font-weight: 800; letter-spacing: 0; color: var(--su-text); max-width: 820px; }
.lfx-su-sub { font-size: 18px; line-height: 1.6; color: var(--su-text-2); max-width: 720px; }
.lfx-su-search { width: 100%; max-width: 760px; margin-top: 8px; position: relative; z-index: 5; }
.lfx-su-field { display: flex; align-items: stretch; background: #fff; border: 2px solid var(--su-green); border-radius: 12px; box-shadow: 0 10px 30px rgba(41,173,125,.14); overflow: hidden; }
.lfx-su-field > svg { margin-left: 18px; flex: none; align-self: center; }
.lfx-su .lfx-su-input { flex: 1; min-width: 0; text-overflow: ellipsis; border: 0; outline: 0; box-shadow: none; font: inherit; font-size: 17px; padding: 18px 16px; color: var(--su-text); background: transparent; height: auto; margin: 0; border-radius: 0; }
.lfx-su .lfx-su-input::-webkit-search-cancel-button { display: none; }
.lfx-su .lfx-su-clear { flex: none; background: transparent; border: 0; color: var(--su-muted); font-size: 20px; line-height: 1; padding: 0 10px; cursor: pointer; visibility: hidden; min-height: 0; }
.lfx-su .lfx-su-clear.is-visible { visibility: visible; }
/* OceanWP styles every submit button (uppercase, letter-spacing, border); the button fills the field's full height. */
.lfx-su button { text-transform: none; letter-spacing: 0; }
.lfx-su .lfx-su-submit { flex: none; background: var(--su-green); color: #fff; border: 0; border-radius: 0; font: inherit; font-weight: 700; font-size: 16px; line-height: 1; text-transform: none; letter-spacing: 0; padding: 0 28px; height: auto; min-height: 0; cursor: pointer; margin: 0; box-shadow: none; transition: background-color .2s; }
.lfx-su .lfx-su-submit:hover, .lfx-su .lfx-su-submit:focus { background: var(--su-link); color: #fff; }
.lfx-su .lfx-su-submit:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
.lfx-su-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--su-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(31,41,55,.14); overflow: hidden; padding: 8px 0; list-style: none; text-align: left; }
.lfx-su-list[hidden] { display: none; }
.lfx-su-option { display: flex; align-items: center; gap: 14px; padding: 9px 18px; color: var(--su-text); font-size: 16px; font-weight: 700; cursor: pointer; }
.lfx-su-option.is-active, .lfx-su-option:hover { background: var(--su-light); }
.lfx-su-option > svg { flex: none; }
.lfx-su-option > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lfx-su-typed { font-weight: 400; }
.lfx-su-alias { font-size: 13px; color: var(--su-muted); font-weight: 400; }
.lfx-su-empty { padding: 9px 18px; font-size: 15px; color: var(--su-text-2); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.lfx-su-empty a { font-weight: 700; }
.lfx-su-trust { display: flex; flex-wrap: wrap; gap: 12px 40px; justify-content: center; margin-top: 10px; font-size: 14px; color: var(--su-text-2); }
.lfx-su-trust > div { display: flex; align-items: center; gap: 8px; }
.lfx-su-trust strong { color: var(--su-text); }
.lfx-su-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* Beliebte Branchenstatistiken: 5 x 2 tiles; names, maps and numbers line up across a row (subgrid). */
.lfx-su-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.lfx-su a.lfx-su-tile { color: inherit; background: #fff; border: 1px solid var(--su-line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
@supports (grid-template-rows: subgrid) {
  .lfx-su a.lfx-su-tile { display: grid; grid-row: span 3; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
}
.lfx-su a.lfx-su-tile:hover { box-shadow: 0 8px 24px rgba(31,41,55,.10); transform: translateY(-2px); color: inherit; }
.lfx-su-tile-name { background: var(--su-yellow); padding: 14px 14px 12px; margin-bottom: 12px; display: flex; align-items: flex-end; }
.lfx-su .lfx-su-tile-name h3 { font-size: clamp(14px, 1.7cqi, 16px); font-weight: 800; color: var(--su-text); line-height: 1.25; }
.lfx-su-tile-map { position: relative; background: var(--su-light); margin: 0 12px; border-radius: 10px; padding: 10px; display: flex; justify-content: center; align-items: center; min-height: 132px; }
.lfx-su-tile-map svg { width: 84px; height: 114px; display: block; }
.lfx-su-rank { position: absolute; top: 6px; right: 6px; font-size: 11px; font-weight: 700; color: var(--su-muted); background: #fff; border: 1px solid var(--su-line); border-radius: 999px; padding: 1px 6px; }
.lfx-su-tile-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; }
.lfx-su-count { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.lfx-su-count strong { font-size: 24px; line-height: 1; font-weight: 800; color: var(--su-green); letter-spacing: -.02em; }
.lfx-su-count span { font-size: 12px; color: var(--su-muted); }
.lfx-su-fact { font-size: 12px; line-height: 1.45; color: var(--su-text-2); }
.lfx-su-date { font-size: 11px; color: var(--su-faint); }
.lfx-su-more { font-size: 13px; font-weight: 700; color: var(--su-link); margin-top: auto; padding-top: 6px; }

/* Narrow boxes hyphenate long German compounds (lang="de") instead of cutting them; short words stay whole. */
.lfx-su-tile-name h3, .lfx-su-card h3, .lfx-su-examples li, .lfx-su-analysis h3 { hyphens: auto; hyphenate-limit-chars: 12 5 5; }

/* Sectors: 4 x 4 cards, icon above the title so long sector names keep the full card width. */
.lfx-su-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.lfx-su a.lfx-su-card { color: inherit; background: #fff; border: 1px solid var(--su-line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 12px; transition: border-color .2s, box-shadow .2s; }
@supports (grid-template-rows: subgrid) {
  .lfx-su a.lfx-su-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
}
.lfx-su a.lfx-su-card:hover, .lfx-su a.lfx-su-card.is-active { border-color: var(--su-green); box-shadow: 0 6px 20px rgba(31,41,55,.08); color: inherit; }
.lfx-su-card-title { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.lfx-su-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--su-mint); display: flex; align-items: center; justify-content: center; flex: none; }
.lfx-su .lfx-su-card h3 { font-size: clamp(15px, 1.8cqi, 17px); line-height: 1.3; font-weight: 700; color: var(--su-text); }
/* Up to five example industries as a list with green dots. */
.lfx-su .lfx-su-examples { list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 14px; line-height: 1.4; color: var(--su-text-2); }
.lfx-su .lfx-su-examples li { position: relative; margin: 0; padding-left: 14px; }
.lfx-su .lfx-su-examples li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--su-green); }
.lfx-su-card .lfx-su-more { font-size: 14px; padding-top: 0; align-self: end; }
.lfx-su-arrow { display: none; color: var(--su-green); }

/* Analyses slider */
.lfx-su .lfx-su-dark h2 { color: #fff; }
.lfx-su-dark .lfx-su-lead { color: var(--su-dark-text); }
.lfx-su-slider-nav { display: flex; align-items: center; gap: 10px; }
.lfx-su .lfx-su-all { font-size: 15px; font-weight: 700; color: var(--su-yellow); margin-right: 8px; }
.lfx-su .lfx-su-all:hover { color: #fff; }
.lfx-su .lfx-su-step { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid #4B5563; background: transparent; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; min-height: 0; }
.lfx-su .lfx-su-step:hover:not(:disabled) { border-color: var(--su-yellow); color: var(--su-yellow); }
.lfx-su .lfx-su-step:disabled { opacity: .35; cursor: default; }
.lfx-su-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px; }
.lfx-su-track::-webkit-scrollbar { display: none; }
.lfx-su a.lfx-su-analysis { flex: none; width: calc((100% - 40px) / 3.25); min-width: 280px; scroll-snap-align: start; color: inherit; background: var(--su-dark-card); border: 1px solid var(--su-dark-line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.lfx-su a.lfx-su-analysis:hover { border-color: var(--su-yellow); color: inherit; }
.lfx-su-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--su-yellow); }
.lfx-su .lfx-su-analysis h3 { font-size: 22px; font-weight: 700; color: #fff; line-height: 1.3; }
.lfx-su-analysis p { font-size: 15px; line-height: 1.6; color: var(--su-dark-text); }
.lfx-su-dark .lfx-su-more { color: var(--su-yellow); font-size: 14px; padding-top: 8px; }
.lfx-su a.lfx-su-analysis-all { flex: none; width: 240px; scroll-snap-align: start; border: 1.5px dashed #4B5563; border-radius: 16px; padding: 28px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; text-align: center; }
.lfx-su a.lfx-su-analysis-all:hover { border-color: var(--su-yellow); }
.lfx-su-analysis-all strong { font-size: 36px; font-weight: 800; color: var(--su-yellow); line-height: 1; }
.lfx-su-analysis-all span { font-size: 15px; font-weight: 700; color: #fff; }

/* Index */
.lfx-su-index { gap: 10px; }
.lfx-su-index .lfx-su-head { margin-bottom: 10px; }
.lfx-su-sector { border: 1px solid var(--su-line); border-radius: 12px; overflow: hidden; scroll-margin-top: 120px; }
.lfx-su-sector > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; background: var(--su-light); color: var(--su-text); }
.lfx-su-sector > summary::-webkit-details-marker { display: none; }
.lfx-su-sector > summary:hover { background: #eceef1; }
.lfx-su-sector-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lfx-su .lfx-su-sector h3 { font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--su-text); }
.lfx-su-sector summary small { font-size: 13px; font-weight: 600; color: var(--su-muted); }
.lfx-su-chevron { color: var(--su-green); display: flex; transition: transform .2s; flex: none; }
.lfx-su-sector[open] .lfx-su-chevron { transform: rotate(180deg); }
.lfx-su-sector ul { list-style: none; padding: 6px 20px 20px; border-top: 1px solid var(--su-line); column-count: 3; column-gap: 32px; font-size: 14.5px; line-height: 1.5; }
.lfx-su-sector li { break-inside: avoid; padding: 4px 0; margin: 0; }
/* Index links in the Listflix link green (readable on white), darker on hover. */
.lfx-su a.lfx-su-link, .lfx-su a.lfx-su-link:visited { color: var(--su-link); }
.lfx-su a.lfx-su-link:hover { color: var(--su-link-hover); }

/* Breakpoints by the overview's width: 950 px desktop, viewport - 40 px on tablet and mobile. */
@container lfx-su (max-width: 859px) {
  .lfx-su .lfx-su-hero h1 { font-size: 38px; }
  .lfx-su-tiles, .lfx-su-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lfx-su .lfx-su-tile-name h3 { font-size: 18px; }
  .lfx-su-tile-map { min-height: 150px; }
  .lfx-su-tile-map svg { width: 96px; height: 130px; }
  .lfx-su-count strong { font-size: 28px; }
  .lfx-su-fact { font-size: 13px; }
  .lfx-su-card-title { flex-direction: row; align-items: center; }
  .lfx-su-sector ul { column-count: 2; }
  .lfx-su a.lfx-su-analysis { width: 300px; min-width: 0; }
}
@container lfx-su (max-width: 559px) {
  .lfx-su .lfx-su-hero h1 { font-size: 30px; }
  .lfx-su-sub { font-size: 16px; }
  .lfx-su > section h2 { font-size: 24px; }
  .lfx-su-sec { padding: 40px 0; }
  .lfx-su .lfx-su-submit { padding: 0 16px; font-size: 15px; }
  .lfx-su .lfx-su-input { padding: 16px 10px; font-size: 16px; }
  .lfx-su-field > svg { margin-left: 12px; }
  .lfx-su-tiles { gap: 10px; }
  .lfx-su-tile-name { padding: 12px 12px 10px; }
  .lfx-su .lfx-su-tile-name h3 { font-size: 15px; }
  .lfx-su-tile-map { margin: 0 10px; min-height: 120px; }
  .lfx-su-tile-map svg { width: 76px; height: 103px; }
  .lfx-su-tile-body { padding: 10px 12px 12px; }
  .lfx-su-count strong { font-size: 22px; }
  .lfx-su-fact { font-size: 12px; }
  .lfx-su-cards { grid-template-columns: 1fr; gap: 10px; }
  .lfx-su a.lfx-su-card { display: flex; grid-row: auto; flex-direction: row; align-items: center; justify-content: space-between; padding: 14px 16px; }
  .lfx-su-card .lfx-su-examples, .lfx-su-card .lfx-su-more { display: none; }
  .lfx-su-arrow { display: flex; }
  .lfx-su-sector ul { column-count: 1; }
  .lfx-su-sector > summary { padding: 14px 16px; }
}