.product-page {
  background: var(--bg);
}

.product-page .site-header {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.product-page .nav a[aria-current="page"] {
  color: var(--text);
}

.product-page .nav a[aria-current="page"]::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 5px;
  background: var(--accent);
}

.lr-hero {
  position: relative;
  overflow: hidden;
  min-height: 720px;
  border-bottom: 1px solid var(--line);
}

.lr-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0 72%, color-mix(in srgb, var(--accent) 7%, transparent) 100%);
  background-size: 100% 100%;
  opacity: 0.7;
}

.lr-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.78fr);
  gap: 64px;
  align-items: center;
  min-height: 720px;
  padding-top: 78px;
  padding-bottom: 78px;
}

.lr-hero-copy {
  max-width: 690px;
}

.lr-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 42px;
  color: var(--muted);
  font-family: var(--font-mono-de);
  font-size: 0.78rem;
}

.lr-breadcrumb a {
  color: var(--text-soft);
}

.lr-breadcrumb a:hover,
.lr-breadcrumb a:focus-visible {
  color: var(--accent);
  outline: none;
}

.lr-hero .product-status {
  margin-bottom: 26px;
}

.lr-title-line {
  display: flex;
  align-items: flex-end;
  gap: 28px;
}

.lr-title-line h1 {
  margin: 0;
  font-size: 6rem;
  font-weight: 610;
  line-height: 0.94;
}

.lr-title-line img {
  width: 78px;
  margin-bottom: 3px;
  filter: drop-shadow(0 16px 40px color-mix(in srgb, var(--accent) 18%, transparent));
}

.lr-kicker {
  margin: 24px 0 0;
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 560;
}

.lr-lede {
  max-width: 660px;
  margin: 26px 0 0;
  color: var(--text-soft);
  font-size: 1.1rem;
  line-height: 1.72;
}

.lr-hero .hero-actions {
  margin-top: 34px;
}

.lr-hero-preview {
  position: relative;
  width: min(100%, 470px);
  margin: 0;
  justify-self: end;
}

.lr-hero-preview::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  transform: translate3d(20px, 20px, 0);
}

.lr-preview-glow {
  position: absolute;
  inset: 16% -12% 8%;
  z-index: -2;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  filter: blur(58px);
  opacity: 0.5;
}

.lr-hero-preview img {
  width: 100%;
  max-height: 570px;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #f7f8fa;
  box-shadow: var(--shadow-soft);
}

.lr-hero-preview figcaption,
.lr-screen-grid figcaption {
  margin-top: 13px;
  color: var(--muted);
  font-family: var(--font-mono-de);
  font-size: 0.74rem;
}

.lr-section-intro {
  max-width: 940px;
}

.lr-section-intro h2,
.lr-problem-heading h2,
.lr-split-heading h2,
.lr-faq-layout h2 {
  max-width: 850px;
}

.lr-section-intro > p:not(.eyebrow),
.lr-split-heading > p {
  max-width: 760px;
  margin-top: 24px;
  color: var(--text-soft);
  font-size: 1.08rem;
  line-height: 1.72;
}

.lr-definition {
  padding-top: 108px;
  padding-bottom: 108px;
}

.lr-problem-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.76fr) minmax(0, 1.24fr);
  gap: 88px;
  align-items: start;
}

.lr-problem-heading {
  position: sticky;
  top: 126px;
}

.lr-problem-columns {
  border-top: 1px solid var(--line-strong);
}

.lr-problem-columns article {
  display: grid;
  gap: 18px;
  padding: 34px 0 38px;
  border-bottom: 1px solid var(--line);
}

.lr-problem-columns article > span,
.lr-card-grid article > span {
  color: var(--accent);
  font-family: var(--font-mono-de);
  font-size: 0.72rem;
}

.lr-problem-columns h3,
.lr-card-grid h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.35;
}

.lr-problem-columns p,
.lr-card-grid p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.68;
}

.lr-flow {
  min-height: 1860px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, var(--bg)) 0%, var(--bg) 16%, var(--bg) 100%);
}

.lr-flow-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(420px, 0.82fr);
  gap: 80px;
  align-items: start;
}

.lr-flow-copy > h2 {
  max-width: 700px;
}

.lr-flow-copy > p:not(.eyebrow) {
  max-width: 620px;
  margin-top: 20px;
  color: var(--text-soft);
}

.lr-flow-stages {
  display: grid;
  gap: 0;
  margin-top: 58px;
}

.lr-flow-stage {
  min-height: 410px;
  padding: 26px 26px 28px 0;
  border-top: 1px solid var(--line);
  opacity: 0.44;
  transition: opacity 360ms var(--ease-calm), border-color 360ms var(--ease-calm), transform 520ms var(--ease-polished);
}

.lr-flow-stage:last-child {
  border-bottom: 1px solid var(--line);
}

.lr-flow-stage.is-active {
  border-color: var(--accent-border);
  opacity: 1;
  transform: translate3d(8px, 0, 0);
}

.lr-flow-stage > span {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--accent);
  font-family: var(--font-mono-de);
  font-size: 0.72rem;
}

.lr-flow-stage h3 {
  max-width: 520px;
  margin: 0;
  font-size: 1.42rem;
  font-weight: 600;
  line-height: 1.32;
}

.lr-flow-stage > p {
  max-width: 560px;
  margin: 17px 0 0;
  color: var(--text-soft);
  line-height: 1.66;
}

.lr-mobile-state {
  display: none;
}

.lr-flow-preview {
  position: sticky;
  top: 126px;
  padding-top: 36px;
}

.lr-product-window {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-strong) 94%, var(--bg));
  box-shadow: var(--shadow-soft);
}

.lr-window-bar {
  display: flex;
  gap: 7px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}

.lr-window-bar span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
}

.lr-window-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 0;
  color: var(--muted);
  font-family: var(--font-mono-de);
  font-size: 0.72rem;
}

.lr-demo-badge {
  color: var(--accent);
}

.lr-product-window > h3 {
  margin: 28px 28px 0;
  font-size: 1.65rem;
  font-weight: 610;
  line-height: 1.28;
}

.lr-window-intro {
  margin: 16px 28px 0;
  color: var(--text-soft);
  line-height: 1.62;
}

.lr-window-states {
  position: relative;
  min-height: 360px;
  margin-top: 28px;
  border-top: 1px solid var(--line);
}

.lr-window-state {
  position: absolute;
  inset: 0;
  padding: 28px;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 12px, 0);
  transition: opacity 420ms var(--ease-calm), transform 520ms var(--ease-polished), visibility 0s linear 520ms;
}

.lr-flow[data-active-phase="0"] [data-lr-panel="0"],
.lr-flow[data-active-phase="1"] [data-lr-panel="1"],
.lr-flow[data-active-phase="2"] [data-lr-panel="2"] {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}

.lr-compose-card,
.lr-decision-card {
  display: grid;
  gap: 15px;
  padding: 24px;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
}

.lr-compose-card span,
.lr-decision-card span,
.lr-arguments span {
  color: var(--accent);
  font-family: var(--font-mono-de);
  font-size: 0.72rem;
}

.lr-compose-card strong,
.lr-decision-card strong {
  font-size: 1.1rem;
  line-height: 1.45;
}

.lr-compose-card p,
.lr-decision-card p,
.lr-arguments p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.58;
}

.lr-arguments {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lr-arguments article {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.lr-vote-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.lr-vote-actions span {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--text-soft);
  font-size: 0.78rem;
}

.lr-results {
  display: grid;
  gap: 11px;
  margin-top: 20px;
}

.lr-results > div {
  display: grid;
  grid-template-columns: 76px 1fr 42px;
  gap: 10px;
  align-items: center;
  font-size: 0.76rem;
}

.lr-results i,
.lr-mobile-result i {
  position: relative;
  height: 5px;
  overflow: hidden;
  background: var(--line);
}

.lr-results b,
.lr-mobile-result b {
  display: block;
  height: 100%;
  background: var(--accent);
}

.lr-results strong {
  color: var(--text-soft);
  font-weight: 500;
  text-align: right;
}

.lr-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 44px;
}

.lr-card-grid-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lr-card-grid article {
  display: grid;
  align-content: start;
  gap: 20px;
  min-height: 244px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  transition: border-color 320ms var(--ease-calm), background 320ms var(--ease-calm);
}

.lr-card-grid article:hover {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
}

.lr-split-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  gap: 70px;
  align-items: end;
}

.lr-split-heading > p {
  margin: 0;
}

.lr-status-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(320px, 0.72fr);
  gap: 70px;
  padding: 46px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.lr-status-panel p:not(.eyebrow) {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.72;
}

.lr-status-panel .product-link {
  margin-top: 24px;
}

.lr-screen-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 46px;
}

.lr-screen-grid figure {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.lr-screen-grid img {
  width: 100%;
  height: 550px;
  object-fit: contain;
  object-position: center top;
  border: 1px solid var(--line);
  background: #f5f7fa;
}

.lr-faq-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}

.lr-faq-list {
  border-top: 1px solid var(--line-strong);
}

.lr-faq-list details {
  border-bottom: 1px solid var(--line);
}

.lr-faq-list summary {
  position: relative;
  padding: 24px 44px 24px 0;
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 580;
  list-style: none;
}

.lr-faq-list summary::-webkit-details-marker {
  display: none;
}

.lr-faq-list summary::after {
  content: "+";
  position: absolute;
  top: 22px;
  right: 4px;
  color: var(--accent);
  font-family: var(--font-mono-de);
  font-size: 1.15rem;
  font-weight: 400;
  transition: transform 320ms var(--ease-calm);
}

.lr-faq-list details[open] summary::after {
  transform: rotate(45deg);
}

.lr-faq-list details p {
  max-width: 700px;
  margin: -4px 42px 24px 0;
  color: var(--text-soft);
  line-height: 1.68;
}

.lr-final-panel {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 34px;
  align-items: center;
  padding: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--accent-soft) 82%, transparent), transparent 52%),
    color-mix(in srgb, var(--surface) 90%, transparent);
}

.lr-final-panel > img {
  width: 82px;
  filter: drop-shadow(0 12px 26px color-mix(in srgb, var(--accent) 18%, transparent));
}

.lr-final-panel h2 {
  margin-top: 6px;
  font-size: 2rem;
}

.lr-final-panel p:not(.eyebrow) {
  margin-top: 10px;
  color: var(--text-soft);
}

@media (max-width: 1100px) {
  .lr-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
    gap: 42px;
  }

  .lr-title-line h1 {
    font-size: 5rem;
  }

  .lr-flow-layout {
    grid-template-columns: minmax(0, 0.86fr) minmax(380px, 0.82fr);
    gap: 44px;
  }

  .lr-card-grid-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .lr-hero,
  .lr-hero-grid {
    min-height: auto;
  }

  .lr-hero-grid {
    grid-template-columns: 1fr;
    padding-top: 60px;
    padding-bottom: 82px;
  }

  .lr-hero-copy {
    max-width: 760px;
  }

  .lr-hero-preview {
    width: min(100%, 600px);
    justify-self: start;
  }

  .lr-hero-preview img {
    max-height: 520px;
    object-position: center 18%;
  }

  .lr-problem-grid,
  .lr-split-heading,
  .lr-status-panel,
  .lr-faq-layout {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .lr-problem-heading {
    position: static;
  }

  .lr-card-grid {
    grid-template-columns: 1fr;
  }

  .lr-card-grid-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lr-final-panel {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .lr-final-panel .button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .product-page .header-inner {
    padding-top: 7px;
  }

  .lr-hero::before {
    background: linear-gradient(180deg, transparent 0 70%, color-mix(in srgb, var(--accent) 6%, transparent) 100%);
  }

  .lr-hero-grid {
    padding-top: 46px;
    padding-bottom: 68px;
  }

  .lr-breadcrumb {
    margin-bottom: 32px;
  }

  .lr-title-line {
    gap: 18px;
  }

  .lr-title-line h1 {
    font-size: 4.1rem;
  }

  .lr-title-line img {
    width: 62px;
  }

  .lr-hero-preview::before {
    inset: -10px;
    transform: translate3d(10px, 10px, 0);
  }

  .lr-flow {
    min-height: auto;
  }

  .lr-flow-layout {
    display: block;
  }

  .lr-flow-stages {
    margin-top: 40px;
  }

  .lr-flow-stage {
    min-height: auto;
    padding: 28px 0 32px;
    opacity: 1;
    transform: none;
  }

  .lr-flow-stage.is-active {
    transform: none;
  }

  .lr-flow-preview {
    display: none;
  }

  .lr-mobile-state {
    display: grid;
    gap: 12px;
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    opacity: 0.72;
    transition: opacity 360ms var(--ease-calm), border-color 360ms var(--ease-calm);
  }

  .lr-flow-stage.is-active .lr-mobile-state {
    border-color: var(--accent-border);
    opacity: 1;
  }

  .lr-mobile-state strong {
    color: var(--text);
    font-size: 0.96rem;
  }

  .lr-mobile-state p,
  .lr-mobile-state small {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.55;
  }

  .lr-mobile-state small {
    font-family: var(--font-mono-de);
    font-size: 0.7rem;
  }

  .lr-mobile-result {
    display: grid;
    grid-template-columns: 74px 1fr 38px;
    gap: 10px;
    align-items: center;
    color: var(--text-soft);
    font-size: 0.72rem;
  }

  .lr-mobile-result em {
    font-style: normal;
    text-align: right;
  }

  .lr-screen-grid {
    grid-template-columns: 1fr;
  }

  .lr-screen-grid img {
    height: 480px;
  }
}

/* Match the restrained interaction language of the homepage focus cards. */
.product-page .lr-card-grid article,
.product-page .lr-final-panel {
  transform: translate3d(0, 0, 0);
  transition:
    background-color 360ms var(--ease-calm),
    border-color 360ms var(--ease-calm),
    transform 360ms var(--ease-calm);
}

.product-page .lr-card-grid article:hover,
.product-page .lr-card-grid article:focus-within,
.product-page .lr-final-panel:hover,
.product-page .lr-final-panel:focus-within {
  border-color: var(--line-strong);
  background-color: color-mix(in srgb, var(--surface-strong) 82%, transparent);
  transform: translate3d(0, -1px, 0);
}

/* Lokalruf's source stylesheet is scoped visually; Wehrtens commands keep the homepage button system. */
.product-page .button {
  width: fit-content !important;
  max-width: none !important;
  min-width: 168px !important;
  min-height: 46px !important;
  height: auto !important;
  padding: 0 20px !important;
  border: 1px solid var(--accent-border-strong) !important;
  border-radius: var(--radius-pill) !important;
  color: #fff !important;
  background: var(--button-bg) !important;
  box-shadow: none !important;
  font-family: var(--font-mono-de) !important;
  cursor: pointer !important;
  transform: translate3d(0, 0, 0) !important;
  transition:
    color 260ms var(--ease-calm),
    border-color 300ms var(--ease-calm),
    background-color 300ms var(--ease-calm),
    transform 340ms var(--ease-calm) !important;
}

.product-page .button-secondary {
  color: var(--text-soft) !important;
  border-color: var(--line-strong) !important;
  background: transparent !important;
}

.product-page .button:hover,
.product-page .button:focus-visible {
  color: #fff !important;
  border-color: var(--accent-border-strong) !important;
  transform: translate3d(0, -1px, 0) !important;
}

.product-page .button-secondary:hover,
.product-page .button-secondary:focus-visible {
  color: var(--text) !important;
  background: color-mix(in srgb, var(--surface-strong) 76%, transparent) !important;
}

@media (max-width: 480px) {
  .product-page .button {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 520px) {
  .lr-title-line h1 {
    font-size: 3.2rem;
  }

  .lr-title-line img {
    width: 50px;
  }

  .lr-kicker {
    font-size: 1.04rem;
  }

  .lr-lede {
    font-size: 1rem;
  }

  .lr-card-grid-four {
    grid-template-columns: 1fr;
  }

  .lr-card-grid article {
    min-height: auto;
    padding: 24px;
  }

  .lr-screen-grid img {
    height: 410px;
  }

  .lr-final-panel {
    grid-template-columns: 1fr;
    padding: 28px 22px;
  }

  .lr-final-panel > img {
    width: 66px;
  }

  .lr-final-panel h2 {
    font-size: 1.62rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lr-window-state,
  .lr-flow-stage,
  .lr-mobile-state {
    transition: none;
  }
}

/* ORIGINAL LOKALRUF FLOW */
.badge { display: inline-flex; align-items: center; border: 1px solid transparent; border-radius: 999px; padding: 6px 9px; font-size: 0.75rem; font-weight: 820; letter-spacing: 0.04em; text-transform: uppercase; }
.badge-blue { border-color: rgba(93, 135, 153, 0.3); background: rgba(93, 135, 153, 0.11); color: rgb(53, 95, 112); }
.badge-bordeaux { border-color: rgba(143, 59, 45, 0.28); background: rgba(143, 59, 45, 0.1); color: var(--brick); }
.badge-gold { border-color: rgba(155, 107, 41, 0.3); background: rgba(155, 107, 41, 0.12); color: var(--warning); }
.vote-button { min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); color: var(--ink); font-weight: 780; transition: transform 160ms, border-color 160ms, background 160ms, color 160ms, box-shadow 160ms; }
.vote-button:hover { transform: translateY(-1px); border-color: rgba(166, 106, 63, 0.34); }
.vote-button.selected, .vote-button.agree.selected { border-color: var(--success); background: var(--success); color: var(--white); }
.vote-button.reject.selected { border-color: var(--hamburg-red); background: var(--hamburg-red); color: var(--white); }
.vote-button.abstain.selected { border-color: var(--water); background: var(--water); color: var(--white); }
.result-bars { display: grid; gap: var(--space-3); }
.button, .nav-cta, .load-question, .filter-tab, .vote-button, .district-card, .mini-question-card, .profile-card, .step-card, .verification-card, .create-form, .question-card, .results-card { will-change: transform; }
.vote-button.reject.selected, .vote-button.reject:hover { border-color: rgba(180, 35, 24, 0.42); color: var(--reject); background: var(--reject-soft); }
.profile-dialog .badge { display: none; }
.vote-button.agree:hover, .vote-button.agree.selected { border-color: rgba(47, 111, 78, 0.46); background: var(--agree-soft); color: var(--agree); }
.vote-button.reject:hover, .vote-button.reject.selected { border-color: rgba(180, 35, 24, 0.46); background: var(--reject-soft); color: var(--reject); }
.vote-button.abstain:hover, .vote-button.abstain.selected { border-color: rgba(116, 125, 134, 0.46); background: var(--abstain-soft); color: var(--abstain); }
.vote-button.selected { box-shadow: currentcolor 0px 0px 0px 1px inset; }
.badge, .mini-label, .eyebrow { color: var(--accent-dark); }
.badge-red, .badge-blue { border-color: rgba(166, 106, 63, 0.24); background: var(--accent-soft); color: var(--accent-dark); }
.district-card-topline small, .badge { background: var(--accent-soft) !important; color: var(--accent-dark) !important; border-color: rgba(166, 106, 63, 0.22) !important; }
.filter-tab, .vote-button { position: relative; z-index: 1; min-width: 82px; height: 38px; transition: color 180ms; border: 0px !important; border-radius: 999px !important; background: transparent !important; color: var(--muted) !important; box-shadow: none !important; }
.filter-tab.active, .vote-button.selected { color: rgb(255, 255, 255) !important; }
.vote-button.agree:hover { color: var(--agree) !important; }
.vote-button.reject:hover { color: var(--reject) !important; }
.vote-button.abstain:hover { color: var(--abstain) !important; }
.vote-button.selected:hover { color: rgb(255, 255, 255) !important; }
.button, .nav-cta, .local-call-open, .district-card-action, .vote-button, .filter-tab { border-radius: var(--corner) !important; }
.vote-button { border: 0px !important; background: transparent !important; min-height: 44px !important; transition: color 0.18s, background 0.22s, transform 0.18s !important; }
.vote-button.agree:hover { background: var(--agree-soft) !important; color: var(--agree) !important; }
.vote-button.reject:hover { background: var(--reject-soft) !important; color: var(--reject) !important; }
.vote-button.abstain:hover { background: var(--abstain-soft) !important; color: var(--abstain) !important; }
.vote-button.agree.selected { background: var(--agree) !important; color: rgb(255, 255, 255) !important; }
.vote-button.reject.selected { background: var(--reject) !important; color: rgb(255, 255, 255) !important; }
.vote-button.abstain.selected { background: var(--abstain) !important; color: rgb(255, 255, 255) !important; }
.vote-button.selected { box-shadow: none !important; }
.eyebrow, .mini-label, .local-call-district, .deadline, .deadline-mini, .badge:not(.badge-blue):not(.badge-green):not(.badge-red), .card-topline .mini-label { color: var(--accent-dark) !important; }
.badge:not(.badge-red):not(.badge-green):not(.badge-blue) { background: var(--accent-soft) !important; border-color: rgba(166, 106, 63, 0.25) !important; }
.local-call-card .call-status-rail .badge { display: none !important; }
.vote-button { min-height: 54px !important; padding: 0px 16px !important; border: 1px solid rgba(36, 52, 71, 0.13) !important; border-radius: 8px !important; background: rgb(255, 255, 255) !important; color: var(--brand) !important; font-weight: 760 !important; letter-spacing: -0.01em !important; white-space: nowrap !important; box-shadow: rgba(16, 32, 51, 0.04) 0px 1px 2px !important; }
.vote-button.agree:hover, .vote-button.agree.selected { border-color: rgba(47, 111, 78, 0.55) !important; color: var(--agree) !important; background: rgb(255, 255, 255) !important; box-shadow: inset 0 -3px 0 var(--agree), 0 8px 20px rgba(47,111,78,.08) !important; }
.vote-button.reject:hover, .vote-button.reject.selected { border-color: rgba(180, 35, 24, 0.55) !important; color: var(--reject) !important; background: rgb(255, 255, 255) !important; box-shadow: inset 0 -3px 0 var(--reject), 0 8px 20px rgba(180,35,24,.08) !important; }
.vote-button.abstain:hover, .vote-button.abstain.selected { border-color: rgba(116, 125, 134, 0.55) !important; color: var(--abstain) !important; background: rgb(255, 255, 255) !important; box-shadow: inset 0 -3px 0 var(--abstain), 0 8px 20px rgba(116,125,134,.08) !important; }
.vote-button.selected:hover { color: inherit !important; }
.question-card .card-topline .badge { display: none !important; }
.vote-button { min-width: 0px !important; width: 100% !important; height: 58px !important; border-radius: 8px !important; border: 1px solid rgba(36, 52, 71, 0.14) !important; background: rgb(255, 255, 255) !important; color: var(--brand) !important; font-weight: 780 !important; box-shadow: rgba(16, 32, 51, 0.04) 0px 1px 2px !important; }
.vote-button.agree:hover, .vote-button.agree.selected { color: var(--agree) !important; border-color: rgba(47, 111, 78, 0.54) !important; box-shadow: inset 0 -3px 0 var(--agree), 0 10px 22px rgba(47,111,78,.08) !important; background: rgb(255, 255, 255) !important; }
.vote-button.reject:hover, .vote-button.reject.selected { color: var(--reject) !important; border-color: rgba(179, 38, 30, 0.54) !important; box-shadow: inset 0 -3px 0 var(--reject), 0 10px 22px rgba(179,38,30,.08) !important; background: rgb(255, 255, 255) !important; }
.vote-button.abstain:hover, .vote-button.abstain.selected { color: var(--abstain) !important; border-color: rgba(123, 130, 139, 0.54) !important; box-shadow: inset 0 -3px 0 var(--abstain), 0 10px 22px rgba(123,130,139,.08) !important; background: rgb(255, 255, 255) !important; }
.vote-button { height: 58px !important; border-radius: 8px !important; border: 1px solid rgba(36, 52, 71, 0.15) !important; background: rgb(255, 255, 255) !important; color: var(--brand) !important; font-weight: 780 !important; box-shadow: rgba(16, 32, 51, 0.04) 0px 1px 2px !important; }
.vote-button.agree:hover, .vote-button.agree.selected { color: var(--agree) !important; border-color: rgba(47, 111, 78, 0.55) !important; box-shadow: inset 0 -3px 0 var(--agree), 0 10px 22px rgba(47,111,78,.08) !important; background: rgb(255, 255, 255) !important; }
.vote-button.reject:hover, .vote-button.reject.selected { color: var(--reject) !important; border-color: rgba(179, 38, 30, 0.55) !important; box-shadow: inset 0 -3px 0 var(--reject), 0 10px 22px rgba(179,38,30,.08) !important; background: rgb(255, 255, 255) !important; }
.vote-button.abstain:hover, .vote-button.abstain.selected { color: var(--abstain) !important; border-color: rgba(123, 130, 139, 0.55) !important; box-shadow: inset 0 -3px 0 var(--abstain), 0 10px 22px rgba(123,130,139,.08) !important; background: rgb(255, 255, 255) !important; }
h1, h2, h3, .local-call-main h3, .district-card-topline strong, .region-focus b, .button, .filter-tab, .vote-button { font-family: var(--font) !important; }
.vote-actions .vote-button { border: 1px solid rgba(20, 20, 20, 0.1) !important; background: rgb(255, 255, 255) !important; border-radius: 8px !important; min-height: 52px !important; color: var(--ink) !important; box-shadow: rgba(16, 32, 51, 0.04) 0px 10px 26px !important; }
.vote-actions .vote-button.agree:hover { border-color: rgba(47, 111, 78, 0.45) !important; color: var(--agree) !important; }
.vote-actions .vote-button.reject:hover { border-color: rgba(181, 39, 32, 0.45) !important; color: var(--reject) !important; }
.vote-actions .vote-button.abstain:hover { border-color: rgba(111, 120, 129, 0.45) !important; color: var(--abstain) !important; }
.vote-actions .vote-button.selected { background: rgb(255, 255, 255) !important; color: var(--ink) !important; }
@media (max-width: 760px) {
.button, .text-button, .vote-button, .filter-tab, .local-call-open, .district-card, .mini-question-card, .profile-card, .step-card, .verification-card, .create-form, .question-card, .results-card, .contact-card, .representative-access-card, .local-call-card, .local-call-card-premium, .form-message { width: 100%; max-width: 100% !important; min-width: 0px !important; }
}
.vote-button { transform: none; box-sizing: border-box !important; align-self: center !important; flex: 0 0 auto !important; min-height: 52px !important; max-height: 58px !important; line-height: 1.1 !important; }
.button:disabled, .text-button:disabled, .load-question:disabled, .vote-button:disabled, button[type="submit"]:disabled, button[data-action]:disabled, button[data-admin-action]:disabled, button[data-representative-action]:disabled, button[data-comment-action]:disabled, button[aria-busy="true"], a[aria-busy="true"] { align-self: center !important; flex: 0 0 auto !important; min-height: 44px !important; max-height: 52px !important; padding-block: 0px !important; font-size: inherit !important; font-weight: 720 !important; transform: none !important; }
.vote-button:disabled, .vote-button[aria-busy="true"] { min-height: 52px !important; max-height: 58px !important; }
.demo-topline, .demo-location, .demo-vote-options, .demo-participation, .demo-bar-row, .demo-question article, .demo-decision, .demo-arguments { position: relative; z-index: 1; }
.demo-bars { display: grid; gap: 9px; }
.demo-bar-row { display: grid; grid-template-columns: minmax(0px, 1fr) 54px; gap: 8px 12px; align-items: center; }
.demo-bar-row i { grid-column: 1 / -1; height: 8px; overflow: hidden; border-radius: 999px; background: rgba(36, 52, 71, 0.09); }
.demo-bar-row i::before { display: block; width: var(--demo-width, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hamburg-red), #b98358); transition: width 520ms cubic-bezier(0.2, 0.8, 0.2, 1); content: ""; }
.stage-slide h2, .home-flow h2, .home-benefits h2, .home-trust h2, .home-closing h2 { max-width: 900px; margin: 0px; font-size: clamp(38px, 5vw, 76px); line-height: 0.98; letter-spacing: -0.06em !important; }
.home-flow { background: linear-gradient(rgb(248, 250, 252), rgb(255, 255, 255)); }
.home-flow-grid { display: grid; grid-template-columns: minmax(0px, 0.92fr) minmax(360px, 0.72fr); gap: clamp(32px, 6vw, 90px); align-items: start; }
.flow-steps { display: grid; gap: 18px; }
.flow-steps > h2 { margin-bottom: 18px; }
.flow-step { display: grid; gap: 8px; padding: 22px 0px 22px 24px; border-left: 2px solid rgba(36, 52, 71, 0.12); color: var(--muted); transition: border-color 220ms, color 220ms, transform 220ms; }
.flow-step.is-active { border-left-color: var(--hamburg-red); color: var(--ink); transform: translateX(4px); }
.flow-step span { color: var(--hamburg-red); font-weight: 820; }
.flow-step h3 { margin: 0px; font-size: clamp(24px, 2.2vw, 34px); }
.flow-step p { max-width: 650px; margin: 0px; line-height: 1.55; }
.flow-preview { position: sticky; top: 112px; }
.flow-preview-card { display: grid; gap: 18px; padding: 28px; border: 1px solid rgba(36, 52, 71, 0.12); border-radius: 26px; background: rgb(255, 255, 255); box-shadow: rgba(16, 32, 51, 0.1) 0px 28px 74px; }
.flow-preview-card h3 { margin: 0px; font-size: clamp(28px, 3vw, 42px); line-height: 1.04; }
.flow-preview-card p { margin: 0px; color: var(--muted); line-height: 1.5; }
.flow-preview-panel { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 10px; }
.flow-preview-panel div { padding: 12px; border: 1px solid rgba(36, 52, 71, 0.1); border-radius: 14px; }
.flow-preview-panel span { display: block; color: var(--muted); font-size: 0.78rem; }
.flow-mini-bars { display: grid; gap: 8px; }
.flow-mini-bars i { height: 8px; border-radius: 999px; background: rgba(166, 106, 63, 0.18); }
.flow-mini-bars i:nth-child(1) { width: 68%; }
.flow-mini-bars i:nth-child(2) { width: 42%; }
.flow-mini-bars i:nth-child(3) { width: 22%; }
.flow-preview-card[data-flow-step="0"] .flow-mini-bars i { width: 12%; }
.flow-preview-card[data-flow-step="2"] .flow-mini-bars i:nth-child(1) { width: 78%; }
@media (max-width: 1120px) {
.homepage-hero-content, .home-flow-grid, .live-preview-grid { grid-template-columns: 1fr !important; }
.flow-preview { position: static; }
}
@media (max-width: 760px) {
.demo-arguments, .demo-vote-options, .text-stage-grid, .benefit-perspectives, .flow-preview-panel { grid-template-columns: 1fr; }
.stage-slide h2, .home-flow h2, .home-benefits h2, .home-trust h2, .home-closing h2 { font-size: clamp(34px, 10vw, 52px); }
}
@media (prefers-reduced-motion: reduce) {
.hero-title-build span, .stage-slide, .demo-phase, .flow-step, .demo-bar-row i::before { animation: auto ease 0s 1 normal none running none !important; transition: none !important; transform: none !important; }
}
.demo-vote-options .vote-button { width: 100% !important; min-width: 0px !important; min-height: 52px !important; max-height: 54px !important; height: 52px !important; border-radius: 8px !important; font-size: 0.94rem !important; font-weight: 780 !important; background: rgb(255, 255, 255) !important; }
.demo-vote-options .vote-button:hover { transform: translateY(-1px) !important; }
.demo-vote-options .vote-button.agree.selected { border-color: rgba(47, 111, 78, 0.56) !important; color: var(--agree) !important; box-shadow: inset 0 -3px 0 var(--agree), 0 10px 22px rgba(47,111,78,.08) !important; }
.demo-bars { gap: 12px !important; }
.demo-bar-row { grid-template-columns: minmax(0px, 1fr) 60px !important; }
.demo-bar-row i { height: 10px !important; }
.demo-bar-row.agree i::before { background: var(--agree, #2F6F4E) !important; }
.demo-bar-row.reject i::before { background: var(--reject, #B3261E) !important; }
.demo-bar-row.abstain i::before { background: var(--abstain, #747D86) !important; }
.home-text-stage, .home-flow, .home-benefits, .home-live-preview, .home-trust, .home-page .district-picker { background: rgb(255, 255, 255) !important; }
.home-flow-grid { min-height: 132vh; align-items: start !important; }
.flow-step { min-height: 30vh; cursor: pointer; }
.flow-step:focus-visible { outline: rgba(166, 106, 63, 0.62) solid 2px; outline-offset: 4px; }
.flow-preview { position: sticky !important; top: clamp(82px, 12vh, 126px) !important; align-self: start !important; }
.flow-preview-card { background: rgb(255, 255, 255) !important; }
@media (max-width: 1120px) {
.home-flow-grid { min-height: 0px; }
.flow-step { min-height: 0px; }
}
.home-flow .flow-steps { align-self: center; gap: clamp(12px, 2vh, 18px) !important; }
.home-flow .flow-steps > h2 { max-width: 680px; font-size: clamp(36px, 4.1vw, 62px); line-height: 0.98; margin-bottom: clamp(10px, 2vh, 22px) !important; }
.home-flow .flow-step { cursor: pointer; opacity: 0.58; transition: opacity 240ms, border-color 240ms, color 240ms, background 240ms; min-height: 0px !important; padding: clamp(14px, 2vh, 20px) 0px clamp(14px, 2vh, 20px) 22px !important; transform: none !important; }
.home-flow .flow-step.is-active { opacity: 1; border-left-color: var(--hamburg-red); background: linear-gradient(90deg, rgba(166, 106, 63, 0.07), transparent 72%); color: var(--ink); }
.home-flow .flow-step h3 { font-size: clamp(21px, 2vw, 31px); }
.home-flow .flow-step p { max-width: 620px; color: inherit; }
.flow-preview { width: 100%; position: relative !important; top: auto !important; align-self: center !important; }
.flow-product-window { --flow-create: 0; --flow-response: 0; --flow-decision: 0; position: relative; display: grid; gap: clamp(10px, 1.5vh, 14px); width: min(100%, 720px); height: clamp(570px, -146px + 100svh, 720px); min-height: 0px; margin-inline: auto 0px; overflow: auto; scrollbar-width: none; padding: clamp(18px, 2.2vw, 28px); border: 1px solid rgba(36, 52, 71, 0.12); border-radius: 26px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(240, 244, 249, 0.92)), rgb(255, 255, 255); box-shadow: rgba(16, 32, 51, 0.15) 0px 30px 82px, rgba(255, 255, 255, 0.92) 0px 1px 0px inset; color: var(--ink); }
.flow-product-window::-webkit-scrollbar { display: none; }
.flow-product-window::before { position: absolute; inset: 0px; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), transparent 42%), radial-gradient(circle at 20% 0%, rgba(166, 106, 63, 0.12), transparent 34%); content: ""; }
.flow-product-window > * { position: relative; z-index: 1; }
.flow-product-chrome { display: flex; gap: 7px; height: 12px; }
.flow-product-chrome span { width: 10px; height: 10px; border-radius: 50%; background: rgba(36, 52, 71, 0.18); }
.flow-product-chrome span:first-child { background: rgba(166, 106, 63, 0.52); }
.flow-product-header, .flow-product-meta, .flow-result-topline { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.flow-product-header > span:last-child, .flow-product-meta, .flow-result-topline span, .flow-compose-panel span, .flow-question-preview span { color: var(--muted); font-size: 0.84rem; font-weight: 700; }
.flow-product-meta { color: var(--muted); }
.flow-product-window h3 { min-height: 2.02em; margin: 2px 0px 0px; font-size: clamp(30px, 3.15vw, 46px); line-height: 1.01; letter-spacing: -0.052em; }
.flow-product-demo[data-flow-phase="create"] .flow-product-window h3::after { display: inline-block; width: 2px; height: 0.82em; margin-left: 4px; transform: translateY(3px); background: var(--hamburg-red); animation: 900ms steps(2) 0s infinite normal none running flowCursor; content: ""; }
.flow-product-copy { min-height: 3.1em; margin: 0px; color: var(--muted); line-height: 1.52; }
.flow-compose-panel { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 10px; transition: opacity 220ms; }
.flow-compose-panel > div { display: grid; gap: 5px; min-width: 0px; padding: 12px 13px; border: 1px solid rgba(36, 52, 71, 0.1); border-radius: 14px; background: rgba(255, 255, 255, 0.7); }
.flow-compose-panel strong { font-size: 0.92rem; line-height: 1.35; }
.flow-vote-preview .vote-button { width: 100% !important; min-width: 0px !important; height: 50px !important; max-height: 50px !important; border-radius: 8px !important; background: rgb(255, 255, 255) !important; }
.flow-result-card { display: grid; gap: 10px; padding: 14px; border: 1px solid rgba(36, 52, 71, 0.1); border-radius: 16px; background: rgba(255, 255, 255, 0.76); }
.flow-result-topline strong { font-size: clamp(28px, 3vw, 42px); line-height: 1; }
.flow-product-demo .demo-bars { gap: 10px !important; }
.flow-product-demo .demo-bar-row { grid-template-columns: minmax(0px, 1fr) 56px !important; }
.flow-question-preview p { margin: 0px; color: var(--ink); font-weight: 720; line-height: 1.36; }
.flow-tabs { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 6px; padding: 4px; border: 1px solid rgba(36, 52, 71, 0.1); border-radius: 12px; background: rgba(36, 52, 71, 0.055); }
.flow-tabs button { border: 0px; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-weight: 760; min-height: 38px !important; max-height: 42px !important; }
.flow-tabs button[aria-selected="true"] { background: rgb(255, 255, 255); color: var(--ink); box-shadow: rgba(16, 32, 51, 0.08) 0px 8px 20px; }
.flow-tabs button:disabled { cursor: default; opacity: 0.42; }
.flow-tab-panel { min-height: 78px; padding: 14px 15px; border: 1px solid rgba(36, 52, 71, 0.1); border-radius: 14px; background: rgb(255, 255, 255); }
.flow-tab-panel p { margin: 0px; color: var(--muted); line-height: 1.45; }
@media (max-height: 760px) and (min-width: 1121px) {
.flow-product-window { height: calc(-104px + 100svh); padding: 18px; gap: 8px; }
.flow-product-window h3 { font-size: clamp(26px, 2.7vw, 38px); }
.flow-product-copy { min-height: 0px; }
.flow-compose-panel { grid-template-columns: 1fr; }
.flow-question-preview { display: none; }
}
@media (max-width: 1120px) {
.home-flow { min-height: auto !important; padding-block: 78px !important; }
.flow-product-window { width: 100%; height: auto; overflow: visible; margin-inline: 0px; }
}
@media (max-width: 760px) {
.home-flow .flow-steps > h2 { font-size: clamp(34px, 10vw, 48px); }
.flow-product-window { padding: 18px; border-radius: 22px; }
.flow-product-header, .flow-product-meta, .flow-result-topline { align-items: flex-start; flex-direction: column; }
.flow-product-window h3 { min-height: 0px; font-size: clamp(28px, 8.5vw, 38px); }
.flow-compose-panel, .flow-vote-preview, .flow-tabs { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.flow-product-demo[data-flow-phase="create"] .flow-product-window h3::after { display: none !important; }
}
.home-flow .flow-step { border-left: 2px solid rgba(36, 52, 71, 0.12); min-height: clamp(128px, 17vh, 164px) !important; padding: 0px 0px 0px 24px !important; background: transparent !important; box-shadow: none !important; }
.home-flow .flow-step.is-active { background: transparent !important; transform: none !important; }
.home-flow .flow-step span { color: var(--hamburg-red); }
.home-flow .flow-step h3 { max-width: 560px; }
.home-flow .flow-step p { max-width: 560px; color: var(--muted); }
.home-flow .flow-step.is-active p { color: rgba(36, 52, 71, 0.82); }
.flow-product-window { width: min(100%, 740px); height: clamp(630px, -128px + 100svh, 760px); overflow: hidden; gap: clamp(8px, 1.1vh, 12px); padding: clamp(18px, 2vw, 25px); }
.flow-product-chrome span:nth-child(1) { background: rgb(255, 95, 87) !important; }
.flow-product-chrome span:nth-child(2) { background: rgb(254, 188, 46) !important; }
.flow-product-chrome span:nth-child(3) { background: rgb(40, 200, 64) !important; }
.flow-product-window h3 { min-height: 1.92em; font-size: clamp(28px, 2.8vw, 42px); }
.flow-product-copy { min-height: 2.6em; }
.flow-compose-panel > div { padding: 10px 12px; }
.flow-vote-preview .vote-button { height: 46px !important; max-height: 46px !important; }
.flow-result-card { padding: 12px; }
.flow-result-topline strong { font-size: clamp(26px, 2.6vw, 36px); }
.flow-product-demo .demo-bars { gap: 8px !important; }
.flow-comment-column > span { color: var(--muted); font-size: 0.82rem; font-weight: 780; }
.flow-comment-column article { display: grid; gap: 3px; padding: 8px 0px 0px; border-top: 1px solid rgba(36, 52, 71, 0.09); }
.flow-comment-column article:first-of-type { padding-top: 0px; border-top: 0px; }
.flow-comment-column strong { color: var(--ink); font-size: 0.88rem; }
.flow-comment-column p { margin: 0px; color: var(--muted); font-size: 0.9rem; line-height: 1.35; }
.flow-tab-panel { min-height: 0px; padding: 12px 13px; }
@media (max-height: 760px) and (min-width: 1121px) {
.home-flow .flow-step { min-height: 132px !important; }
.flow-product-window { height: calc(-98px + 100svh); gap: 7px; padding: 16px; }
.flow-product-window h3 { font-size: clamp(25px, 2.3vw, 34px); }
.flow-product-copy { font-size: 0.94rem; line-height: 1.38; }
.flow-compose-panel > div { padding-block: 8px; }
.flow-vote-preview .vote-button { height: 42px !important; max-height: 42px !important; }
.flow-comment-column article:nth-of-type(2) { display: none; }
}
@media (max-width: 1120px) {
.home-flow .flow-step { min-height: 0px !important; padding-block: 12px !important; }
.flow-product-window { height: auto; min-height: 0px; overflow: visible; }
}
.demo-bar-row i::before { transition: width 680ms cubic-bezier(0.16, 1, 0.3, 1) !important; }
.home-flow { min-height: 350vh !important; padding-block: 0px !important; background: rgb(255, 255, 255) !important; }
.home-flow .flow-step { opacity: 0.44; min-height: clamp(140px, 19vh, 180px) !important; padding: 0px 0px 0px 24px !important; border-left: 2px solid rgba(36, 52, 71, 0.12) !important; background: transparent !important; color: var(--muted) !important; cursor: default !important; transform: scale(0.985) !important; transition: opacity 260ms cubic-bezier(0.16, 1, 0.3, 1), color 260ms, border-color 260ms, transform 260ms cubic-bezier(0.16, 1, 0.3, 1) !important; }
.home-flow .flow-step.is-active { opacity: 1; border-left-color: var(--hamburg-red) !important; color: var(--ink) !important; transform: scale(1) !important; }
.home-flow .flow-step:focus, .home-flow .flow-step:focus-visible { outline: 0px !important; }
.home-flow .flow-step h3, .home-flow .flow-step p { transform: none !important; }
.flow-product-window { height: min(720px, -112px + 100svh) !important; align-self: center; }
@media (max-height: 760px) and (min-width: 1121px) {
.flow-product-window { height: calc(-92px + 100svh) !important; }
}
@media (max-width: 1120px) {
.home-flow { min-height: auto !important; padding-block: 78px !important; }
.home-flow .flow-step { opacity: 1; transform: none !important; }
.flow-product-window { height: auto !important; }
}
.demo-vote-options .vote-button { height: 46px !important; min-height: 46px !important; max-height: 48px !important; }
.home-flow { min-height: 350vh !important; padding-block: 0px !important; overflow: visible !important; }
.home-flow .flow-steps { align-self: center !important; gap: 8px !important; min-height: 0px !important; }
.home-flow .flow-steps .eyebrow { margin-bottom: 8px !important; }
.home-flow .flow-steps > h2 { max-width: 570px !important; margin-bottom: 14px !important; font-size: clamp(30px, 3.15vw, 48px) !important; line-height: 0.99 !important; letter-spacing: -0.046em !important; }
.home-flow .flow-step { min-height: 112px !important; padding-left: 18px !important; }
.home-flow .flow-step span { font-size: 0.9rem !important; }
.home-flow .flow-step h3 { max-width: 500px !important; font-size: clamp(19px, 1.55vw, 25px) !important; line-height: 1.08 !important; }
.home-flow .flow-step p { max-width: 500px !important; font-size: 0.96rem !important; line-height: 1.42 !important; }
.flow-preview { align-self: center !important; }
.flow-product-window { width: min(100%, 610px) !important; max-width: 610px !important; height: min(600px, -150px + 100vh) !important; max-height: calc(-150px + 100vh) !important; min-height: 0px !important; gap: 7px !important; padding: 16px !important; border-radius: 22px !important; }
.flow-product-chrome { height: 10px !important; }
.flow-product-chrome span { width: 9px !important; height: 9px !important; }
.flow-product-header, .flow-product-meta, .flow-result-topline { gap: 10px !important; }
.flow-product-header > span:last-child, .flow-product-meta, .flow-result-topline span, .flow-compose-panel span, .flow-question-preview span { font-size: 0.78rem !important; }
.flow-product-window h3 { min-height: 1.7em !important; margin-top: 0px !important; font-size: clamp(24px, 2.25vw, 34px) !important; line-height: 1.02 !important; }
.flow-product-copy { min-height: 2.25em !important; font-size: 0.94rem !important; line-height: 1.38 !important; }
.flow-compose-panel > div { padding: 8px 10px !important; border-radius: 11px !important; }
.flow-compose-panel strong { font-size: 0.84rem !important; line-height: 1.26 !important; }
.flow-vote-preview { gap: 6px !important; }
.flow-vote-preview .vote-button { height: 38px !important; min-height: 38px !important; max-height: 40px !important; font-size: 0.86rem !important; }
.flow-result-card { gap: 7px !important; padding: 9px 10px !important; border-radius: 13px !important; }
.flow-result-topline strong { font-size: clamp(22px, 2vw, 30px) !important; }
.flow-product-demo .demo-bars { gap: 6px !important; }
.flow-product-demo .demo-bar-row { grid-template-columns: minmax(0px, 1fr) 48px !important; gap: 6px !important; font-size: 0.86rem !important; }
.flow-product-demo .demo-bar-row i { height: 7px !important; }
.flow-question-preview p { font-size: 0.86rem !important; line-height: 1.28 !important; }
.flow-comment-column > span { font-size: 0.76rem !important; }
.flow-comment-column article { gap: 2px !important; padding-top: 6px !important; }
.flow-comment-column strong { font-size: 0.8rem !important; }
.flow-comment-column p { font-size: 0.8rem !important; line-height: 1.25 !important; }
.flow-tabs { gap: 4px !important; padding: 3px !important; }
.flow-tabs button { min-height: 32px !important; max-height: 34px !important; font-size: 0.82rem !important; }
.flow-tab-panel { padding: 9px 10px !important; border-radius: 11px !important; }
.flow-tab-panel p { font-size: 0.84rem !important; line-height: 1.32 !important; }
@media (max-height: 820px) and (min-width: 1121px) {
.home-flow .flow-steps > h2 { font-size: clamp(28px, 2.9vw, 42px) !important; margin-bottom: 10px !important; }
.home-flow .flow-step { min-height: 100px !important; }
.home-flow .flow-step h3 { font-size: clamp(18px, 1.42vw, 22px) !important; }
.home-flow .flow-step p { font-size: 0.9rem !important; line-height: 1.34 !important; }
.flow-product-window { width: min(100%, 560px) !important; max-width: 560px !important; height: min(540px, -144px + 100vh) !important; max-height: calc(-144px + 100vh) !important; padding: 14px !important; }
.flow-product-window h3 { font-size: clamp(22px, 2.05vw, 30px) !important; }
.flow-product-copy { font-size: 0.88rem !important; }
}
.home-flow { position: relative !important; height: auto !important; min-height: 100svh !important; padding: 0px !important; overflow: visible !important; background: rgb(255, 255, 255) !important; overscroll-behavior: contain !important; }
.home-flow .flow-sticky-stage { position: relative !important; top: auto !important; display: flex !important; align-items: center !important; min-height: 100svh !important; height: auto !important; overflow: hidden !important; }
.home-flow .home-flow-grid { box-sizing: border-box !important; display: grid !important; grid-template-columns: minmax(0px, 0.96fr) minmax(420px, 0.84fr) !important; gap: clamp(34px, 5vw, 74px) !important; align-items: center !important; min-height: 100svh !important; height: auto !important; padding-top: calc(var(--home-header-height, 66px) + clamp(12px, 2.2vh, 26px)) !important; padding-bottom: clamp(18px, 3vh, 34px) !important; }
.home-flow .flow-steps { display: grid !important; gap: 0px !important; align-content: center !important; min-width: 0px !important; transform: none !important; }
.home-flow .flow-steps > .eyebrow { margin: 0px 0px 14px !important; }
.home-flow .flow-steps > h2 { max-width: 620px !important; margin: 0px 0px 24px !important; font-size: clamp(34px, 3.35vw, 52px) !important; line-height: 0.98 !important; letter-spacing: -0.052em !important; }
.home-flow .flow-step-progress { position: relative !important; display: grid !important; grid-template-columns: 18px minmax(0px, 1fr) !important; gap: 18px !important; width: 100% !important; max-width: 660px !important; }
.home-flow .flow-progress-rail { position: relative !important; align-self: stretch !important; width: 18px !important; }
.home-flow .flow-progress-rail::before, .home-flow .flow-progress-rail > span { position: absolute !important; left: 8px !important; top: 12px !important; bottom: 12px !important; width: 2px !important; border-radius: 999px !important; content: "" !important; }
.home-flow .flow-progress-rail::before { background: rgba(36, 52, 71, 0.13) !important; }
.home-flow .flow-progress-rail > span { bottom: auto !important; height: var(--flow-progress-pct, 0%) !important; background: var(--hamburg-red) !important; transition: height 120ms linear !important; }
.home-flow .flow-progress-rail i { position: absolute !important; left: 5px !important; width: 8px !important; height: 8px !important; border: 2px solid rgb(255, 255, 255) !important; border-radius: 999px !important; background: rgba(36, 52, 71, 0.2) !important; box-shadow: rgba(36, 52, 71, 0.12) 0px 0px 0px 1px !important; }
.home-flow .flow-progress-rail i:nth-of-type(1) { top: 12px !important; }
.home-flow .flow-progress-rail i:nth-of-type(2) { top: calc(50% - 4px) !important; }
.home-flow .flow-progress-rail i:nth-of-type(3) { bottom: 12px !important; }
.home-flow[data-active-flow-step="0"] .flow-progress-rail i:nth-of-type(1), .home-flow[data-active-flow-step="1"] .flow-progress-rail i:nth-of-type(-n+2), .home-flow[data-active-flow-step="2"] .flow-progress-rail i { background: var(--hamburg-red) !important; }
.home-flow .flow-step-list { position: relative !important; display: block !important; height: 292px !important; overflow: hidden !important; width: 100% !important; max-width: none !important; margin: 0px !important; mask-image: linear-gradient(transparent 0px, rgb(0, 0, 0) 18%, rgb(0, 0, 0) 82%, transparent 100%) !important; }
.home-flow .flow-reel__track { display: flex !important; flex-direction: column !important; will-change: transform !important; transform: translate3d(0, var(--flow-reel-y, 97px), 0) !important; transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1) !important; }
.home-flow .flow-step, .home-flow .flow-step:hover, .home-flow .flow-step:active, .home-flow .flow-step:focus, .home-flow .flow-step:focus-visible, .home-flow .flow-step.is-active { box-sizing: border-box !important; position: relative !important; display: grid !important; grid-template-columns: 42px minmax(0px, 1fr) !important; align-items: center !important; column-gap: 12px !important; width: 100% !important; min-height: 98px !important; margin: 0px !important; padding: 11px 14px 11px 0px !important; border: 0px !important; border-radius: 0px !important; background: transparent !important; box-shadow: none !important; color: var(--muted) !important; cursor: pointer !important; opacity: var(--flow-step-opacity, .54) !important; transform: translate3d(0, var(--flow-step-y, 0px), 0) scale(var(--flow-step-scale, .96)) !important; translate: none !important; transition: opacity 220ms, color 220ms, background 220ms, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1) !important; }
.home-flow .flow-step::before { display: none !important; }
.home-flow .flow-step.is-active { color: var(--ink) !important; opacity: var(--flow-step-opacity, 1) !important; background: transparent !important; }
.home-flow .flow-step.is-active::before { background: var(--hamburg-red) !important; }
.home-flow .flow-step:focus-visible { outline: rgba(166, 106, 63, 0.44) solid 2px !important; outline-offset: 4px !important; }
.home-flow .flow-step > span:first-child { align-self: start !important; padding-top: 3px !important; color: var(--muted) !important; font-size: 0.92rem !important; font-weight: 820 !important; letter-spacing: 0.08em !important; }
.home-flow .flow-step.is-active > span:first-child { color: var(--hamburg-red) !important; }
.home-flow .flow-step-body { display: grid !important; gap: 5px !important; min-width: 0px !important; }
.home-flow .flow-step-title { display: block !important; color: inherit !important; font-size: clamp(18px, 1.35vw, 22px) !important; font-weight: 780 !important; line-height: 1.12 !important; }
.home-flow .flow-step-copy { display: block !important; max-width: 560px !important; color: inherit !important; font-size: 0.86rem !important; font-weight: 560 !important; line-height: 1.34 !important; }
.home-flow .flow-preview { position: relative !important; top: auto !important; align-self: center !important; width: 100% !important; min-width: 0px !important; transform: none !important; }
.home-flow .flow-product-window { box-sizing: border-box !important; display: grid !important; gap: 8px !important; width: min(100%, 560px) !important; height: 620px !important; max-height: none !important; min-height: 0px !important; margin: 0px 0px 0px auto !important; overflow: hidden !important; padding: 16px 18px !important; border-radius: 24px !important; }
.home-flow .flow-product-chrome span:nth-child(1) { background: rgb(255, 95, 87) !important; }
.home-flow .flow-product-chrome span:nth-child(2) { background: rgb(254, 188, 46) !important; }
.home-flow .flow-product-chrome span:nth-child(3) { background: rgb(40, 200, 64) !important; }
.home-flow .flow-product-header, .home-flow .flow-product-meta, .home-flow .flow-result-topline { gap: 10px !important; }
.home-flow .flow-product-header > span:last-child, .home-flow .flow-product-meta, .home-flow .flow-result-topline span, .home-flow .flow-compose-panel span, .home-flow .flow-argument-panel span, .home-flow .flow-question-preview span, .home-flow .flow-comment-column > span { font-size: 0.78rem !important; }
.home-flow .flow-product-window h3 { min-height: 2em !important; margin: 0px !important; font-size: clamp(24px, 2.05vw, 32px) !important; line-height: 1.04 !important; }
.home-flow .flow-product-copy { min-height: 2.2em !important; font-size: 0.88rem !important; line-height: 1.34 !important; }
.home-flow .flow-compose-panel { display: grid !important; grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 9px !important; opacity: 1 !important; }
.home-flow .flow-compose-panel > div { padding: 8px 10px !important; border-radius: 12px !important; }
.home-flow .flow-compose-panel strong { font-size: 0.8rem !important; line-height: 1.28 !important; }
.home-flow .flow-argument-panel { display: none !important; grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 8px !important; }
.home-flow .flow-argument-panel article { min-width: 0px !important; padding: 8px 10px !important; border: 1px solid rgba(36, 52, 71, 0.1) !important; border-radius: 12px !important; background: rgba(255, 255, 255, 0.76) !important; }
.home-flow .flow-argument-panel article.agree { border-color: rgba(47, 111, 78, 0.2) !important; background: rgba(47, 111, 78, 0.055) !important; }
.home-flow .flow-argument-panel article.reject { border-color: rgba(179, 38, 30, 0.18) !important; background: rgba(179, 38, 30, 0.043) !important; }
.home-flow .flow-argument-panel p { margin: 4px 0px 0px !important; color: var(--ink) !important; font-size: 0.8rem !important; line-height: 1.28 !important; }
.home-flow .flow-vote-preview { display: none !important; grid-template-columns: repeat(3, minmax(0px, 1fr)) !important; gap: 8px !important; }
.home-flow .flow-vote-preview .vote-button { height: 39px !important; min-height: 39px !important; max-height: 39px !important; border-radius: 8px !important; }
.home-flow .flow-vote-preview .vote-button:disabled { opacity: 0.52 !important; cursor: default !important; }
.home-flow .flow-result-card { display: none !important; gap: 7px !important; padding: 10px 12px !important; border-radius: 14px !important; }
.home-flow .flow-result-topline strong { font-size: 30px !important; }
.home-flow .flow-product-demo .demo-bars { gap: 6px !important; }
.home-flow .flow-product-demo .demo-bar-row i::before { transition: width 140ms linear !important; }
.home-flow .flow-question-preview, .home-flow .flow-comment-column, .home-flow .flow-final-panel { display: none !important; }
.home-flow .flow-final-panel { gap: 9px !important; }
.home-flow .flow-tab-panel { min-height: 82px !important; padding: 12px 13px !important; }
.home-flow .flow-product-demo[data-flow-phase="create"] .flow-compose-panel { display: grid !important; }
.home-flow .flow-product-demo[data-flow-phase="response"] .flow-compose-panel, .home-flow .flow-product-demo[data-flow-phase="decision"] .flow-compose-panel { display: none !important; }
.home-flow .flow-product-demo[data-flow-phase="response"] .flow-argument-panel, .home-flow .flow-product-demo[data-flow-phase="response"] .flow-vote-preview, .home-flow .flow-product-demo[data-flow-phase="response"] .flow-result-card, .home-flow .flow-product-demo[data-flow-phase="response"] .flow-comment-column { display: grid !important; }
.home-flow .flow-product-demo[data-flow-phase="decision"] .flow-final-panel { display: grid !important; }
.home-flow .flow-product-demo[data-comments-open="true"] .flow-argument-panel { display: none !important; }
.home-flow .flow-state-stack { position: relative !important; min-height: 360px !important; overflow: hidden !important; isolation: isolate !important; }
.home-flow .flow-phase-panel { position: absolute !important; inset: 0px !important; display: grid !important; align-content: start !important; gap: 8px !important; min-width: 0px !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translate3d(0px, 14px, 0px) scale(0.985) !important; transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 240ms step-end !important; }
.home-flow .flow-state-stack .flow-compose-panel, .home-flow .flow-state-stack .flow-argument-panel, .home-flow .flow-state-stack .flow-vote-preview, .home-flow .flow-state-stack .flow-result-card, .home-flow .flow-state-stack .flow-comment-column, .home-flow .flow-state-stack .flow-final-panel { display: grid !important; }
.home-flow .flow-product-demo[data-flow-phase="create"] .flow-phase-panel-create, .home-flow .flow-product-demo[data-flow-phase="response"] .flow-phase-panel-response, .home-flow .flow-product-demo[data-flow-phase="decision"] .flow-phase-panel-decision { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translate3d(0px, 0px, 0px) scale(1) !important; transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility step-start !important; }
.home-flow .flow-product-demo[data-comments-open="true"] .flow-state-stack .flow-argument-panel { display: none !important; }
.home-flow .flow-disclosure { display: grid !important; grid-template-columns: minmax(0px, 1fr) auto !important; gap: 2px 10px !important; align-items: center !important; width: 100% !important; min-height: 48px !important; margin: 0px !important; padding: 9px 11px !important; border: 1px solid rgba(36, 52, 71, 0.1) !important; border-radius: 12px !important; background: rgba(255, 255, 255, 0.78) !important; color: var(--ink) !important; cursor: pointer !important; text-align: left !important; }
.home-flow .flow-disclosure span { color: var(--muted) !important; font-size: 0.76rem !important; font-weight: 780 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; }
.home-flow .flow-disclosure strong { grid-column: 1 !important; font-size: 0.86rem !important; line-height: 1.2 !important; }
.home-flow .flow-disclosure i { grid-area: 1 / 2 / 3 !important; display: grid !important; place-items: center !important; width: 24px !important; height: 24px !important; border-radius: 999px !important; background: rgba(166, 106, 63, 0.1) !important; color: var(--hamburg-red) !important; font-style: normal !important; font-weight: 820 !important; }
.home-flow .flow-disclosure:disabled { cursor: default !important; opacity: 0.55 !important; }
.home-flow .flow-disclosure-body { margin-top: 8px !important; padding: 9px 11px !important; border: 1px solid rgba(166, 106, 63, 0.16) !important; border-radius: 12px !important; background: rgba(166, 106, 63, 0.06) !important; }
.home-flow .flow-disclosure-body p { margin: 0px !important; color: var(--ink) !important; font-size: 0.84rem !important; font-weight: 650 !important; line-height: 1.3 !important; }
.home-flow .flow-comment-list { display: grid !important; gap: 6px !important; margin-top: 8px !important; }
.home-flow .flow-comment-list[hidden], .home-flow .flow-disclosure-body[hidden] { display: none !important; }
.home-flow .flow-comment-list article { display: grid !important; gap: 2px !important; padding: 7px 9px !important; border: 1px solid rgba(36, 52, 71, 0.1) !important; border-radius: 10px !important; background: rgba(255, 255, 255, 0.78) !important; }
.home-flow .flow-comment-list article.mandate-reply { border-color: rgba(166, 106, 63, 0.22) !important; background: rgba(166, 106, 63, 0.07) !important; }
.home-flow .flow-comment-list strong { color: var(--muted) !important; font-size: 0.72rem !important; font-weight: 780 !important; }
.home-flow .flow-comment-list p { margin: 0px !important; color: var(--ink) !important; font-size: 0.78rem !important; line-height: 1.22 !important; }
@media (min-width: 1121px) and (max-height: 820px) {
.home-flow .home-flow-grid { padding-top: calc(var(--home-header-height, 66px) + 10px) !important; padding-bottom: 16px !important; }
.home-flow .flow-steps > h2 { margin-bottom: 18px !important; font-size: clamp(32px, 3.1vw, 46px) !important; }
.home-flow .flow-step-list { height: 264px !important; }
.home-flow .flow-step { min-height: 88px !important; padding-block: 8px !important; }
.home-flow .flow-product-window { height: min(580px, calc(100svh - var(--home-header-height, 66px) - 72px)) !important; }
.home-flow .flow-state-stack { min-height: 330px !important; }
}
@media (max-width: 1120px) {
.home-flow { min-height: auto !important; padding-block: 76px !important; overflow: visible !important; }
.home-flow .flow-sticky-stage { position: relative !important; top: auto !important; height: auto !important; min-height: 0px !important; overflow: visible !important; }
.home-flow .home-flow-grid { grid-template-columns: 1fr !important; gap: 42px !important; min-height: 0px !important; height: auto !important; padding-block: 0px !important; }
.home-flow .flow-product-window { width: min(100%, 560px) !important; height: auto !important; min-height: 620px !important; margin-inline: auto !important; overflow: hidden !important; }
}
@media (max-width: 760px) {
.home-flow { padding-block: 64px !important; }
.home-flow .flow-steps > h2 { font-size: clamp(32px, 9vw, 44px) !important; margin-bottom: 20px !important; }
.home-flow .flow-step { grid-template-columns: 38px minmax(0px, 1fr) !important; min-height: 112px !important; padding: 12px 10px 12px 16px !important; }
.home-flow .flow-step-copy { font-size: 0.82rem !important; }
.home-flow .flow-product-window { min-height: 0px !important; height: auto !important; padding: 16px !important; border-radius: 22px !important; }
.home-flow .flow-product-header, .home-flow .flow-product-meta, .home-flow .flow-result-topline { align-items: flex-start !important; flex-direction: column !important; }
.home-flow .flow-compose-panel, .home-flow .flow-argument-panel, .home-flow .flow-vote-preview, .home-flow .flow-tabs { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: reduce) {
.home-flow .flow-step, .home-flow .flow-compose-panel, .home-flow .flow-argument-panel, .home-flow .flow-vote-preview, .home-flow .flow-question-preview, .home-flow .flow-comment-column, .home-flow .flow-final-panel, .home-flow .flow-reel__track, .home-flow .flow-phase-panel { transition: none !important; }
}
.home-page .hero-lokalruf__vote-actions .vote-button { width: 100% !important; min-width: 0px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; padding-inline: 8px !important; border-radius: 8px !important; font-size: 0.86rem !important; }
@media (max-height: 790px) and (min-width: 980px) {
.home-page .hero-lokalruf__vote-actions .vote-button { height: 42px !important; min-height: 42px !important; max-height: 42px !important; }
}
.home-flow .flow-product-window { overflow: hidden auto !important; overscroll-behavior: contain !important; scrollbar-gutter: stable both-edges !important; scrollbar-width: thin !important; scrollbar-color: rgba(166, 106, 63, 0.38) rgba(36, 52, 71, 0.07) !important; }
.home-flow .flow-product-window::-webkit-scrollbar { width: 8px !important; }
.home-flow .flow-product-window::-webkit-scrollbar-track { background: rgba(36, 52, 71, 0.06) !important; border-radius: 999px !important; }
.home-flow .flow-product-window::-webkit-scrollbar-thumb { border-radius: 999px !important; background: rgba(166, 106, 63, 0.42) !important; }
.home-flow .flow-product-window:focus-visible { outline: rgba(166, 106, 63, 0.44) solid 2px !important; outline-offset: 5px !important; }
.home-flow .flow-state-stack { min-height: 430px !important; overflow: visible !important; }
.home-flow .flow-phase-panel { overflow: visible !important; padding-bottom: 8px !important; }
.home-flow .flow-product-demo[data-flow-phase="create"] .flow-phase-panel-create, .home-flow .flow-product-demo[data-flow-phase="response"] .flow-phase-panel-response, .home-flow .flow-product-demo[data-flow-phase="decision"] .flow-phase-panel-decision { position: relative !important; inset: auto !important; min-height: 430px !important; }
.home-flow .flow-phase-panel-response { gap: 10px !important; }
.home-flow .flow-result-card { min-height: 0px !important; }
.home-flow .flow-product-demo .demo-bar-row.agree i::before { background: var(--agree, #2F6F4E) !important; }
.home-flow .flow-product-demo .demo-bar-row.reject i::before { background: var(--reject, #B3261E) !important; }
.home-flow .flow-product-demo .demo-bar-row.abstain i::before { background: var(--abstain, #747D86) !important; }
.home-flow .flow-product-demo .demo-bar-row i::before { transition: width 260ms cubic-bezier(0.2, 0.8, 0.2, 1) !important; }
@media (min-width: 1121px) and (max-height: 820px) {
.home-flow .flow-state-stack { min-height: 390px !important; }
.home-flow .flow-product-demo[data-flow-phase="create"] .flow-phase-panel-create, .home-flow .flow-product-demo[data-flow-phase="response"] .flow-phase-panel-response, .home-flow .flow-product-demo[data-flow-phase="decision"] .flow-phase-panel-decision { min-height: 390px !important; }
}
.home-flow .flow-product-window { overscroll-behavior-y: contain !important; touch-action: pan-y !important; }
.home-flow .flow-product-copy:empty { display: none !important; }
.home-flow .flow-product-demo[data-flow-phase="create"] .flow-product-copy { min-height: 0px !important; margin: 0px !important; }
.home-flow .flow-product-window { align-content: start !important; grid-auto-rows: max-content !important; row-gap: 10px !important; }
.home-flow .flow-product-window h3 { min-height: 0px !important; max-width: 100% !important; margin: 2px 0px 0px !important; overflow-wrap: break-word !important; text-wrap: balance !important; }
.home-flow .flow-product-copy { min-height: 0px !important; margin: 0px 0px 4px !important; }
.home-flow .flow-product-copy:empty { display: none !important; }
.home-flow .flow-product-demo .flow-compose-panel { display: none !important; }
.home-flow .flow-product-demo[data-flow-phase="create"] .flow-phase-panel-create { min-height: 0px !important; }
.home-flow .flow-product-demo .demo-bars { gap: 11px !important; }
.home-flow .flow-product-demo .demo-bar-row { display: grid !important; grid-template-columns: minmax(0px, 1fr) 58px !important; gap: 5px 10px !important; align-items: center !important; }
.home-flow .flow-product-demo .demo-bar-row span, .home-flow .flow-product-demo .demo-bar-row strong { font-size: 0.86rem !important; line-height: 1.2 !important; }
.home-flow .flow-product-demo .demo-bar-row strong { font-variant-numeric: tabular-nums !important; }
.home-flow .flow-product-demo .demo-bar-row i { grid-column: 1 / -1 !important; height: 9px !important; overflow: hidden !important; border: 0px !important; border-radius: 999px !important; background: rgba(36, 52, 71, 0.09) !important; box-shadow: none !important; }
.home-flow .flow-product-demo .demo-bar-row i::before { display: block !important; width: var(--demo-width, 0%) !important; height: 100% !important; min-width: 0px !important; border-radius: inherit !important; box-shadow: none !important; filter: none !important; transform: none !important; animation: auto ease 0s 1 normal none running none !important; transition: width 620ms cubic-bezier(0.2, 0.8, 0.2, 1) !important; content: "" !important; }
.home-flow .flow-product-demo .demo-bar-row i::after { display: none !important; content: none !important; }
.home-flow .flow-product-demo .demo-bar-row.agree i::before { background: var(--agree, #2F6F4E) !important; }
.home-flow .flow-product-demo .demo-bar-row.reject i::before { background: var(--reject, #B3261E) !important; }
.home-flow .flow-product-demo .demo-bar-row.abstain i::before { background: var(--abstain, #747D86) !important; }
.home-flow .flow-product-demo[data-flow-phase="response"] .flow-result-card, .home-flow .flow-product-demo[data-flow-phase="decision"] .flow-result-card { animation: auto ease 0s 1 normal none running none !important; }
@media (prefers-reduced-motion: reduce) {
.home-flow .flow-product-demo .demo-bar-row i::before { transition: none !important; }
}
.home-flow .flow-product-demo .result-bar-track { position: relative !important; grid-column: 1 / -1 !important; display: block !important; width: 100% !important; height: 9px !important; min-height: 9px !important; overflow: hidden !important; border: 0px !important; border-radius: 999px !important; background: rgb(232, 234, 237) !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; filter: none !important; transform: none !important; z-index: 0 !important; }
.home-flow .flow-product-demo .result-bar-fill { width: 0px; position: absolute !important; top: 0px !important; bottom: 0px !important; left: 0px !important; display: block !important; height: 100% !important; min-height: 100% !important; border-radius: inherit !important; background-color: rgb(146, 153, 163) !important; background-image: none !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; filter: none !important; transform: none !important; transform-origin: left center !important; scale: 1 !important; z-index: 1 !important; transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1) !important; will-change: width !important; }
.home-flow .flow-product-demo .result-bar-fill--approve { background-color: var(--agree, #2F6F4E) !important; }
.home-flow .flow-product-demo .result-bar-fill--reject { background-color: var(--reject, #B3261E) !important; }
.home-flow .flow-product-demo .result-bar-fill--abstain { background-color: var(--abstain, #747D86) !important; }
.home-flow .flow-product-demo .result-bar-fill::before, .home-flow .flow-product-demo .result-bar-fill::after, .home-flow .flow-product-demo .result-bar-track::before, .home-flow .flow-product-demo .result-bar-track::after { display: none !important; content: none !important; }
@media (prefers-reduced-motion: reduce) {
.home-flow .flow-product-demo .result-bar-fill { transition: none !important; }
}
.home-flow .flow-progress-rail > span { transition: height 100ms linear !important; }
@media (prefers-reduced-motion: reduce) {
.home-page .hero-lokalruf__state, .home-page .hero-lokalruf__result-row i::before, .home-flow .flow-progress-rail > span { transition: none !important; }
}
.home-flow[data-flow-story].reveal-ready, .home-flow[data-flow-story].reveal-ready.is-visible { opacity: 1 !important; transform: none !important; transition-property: none !important; }
@media (min-width: 761px) {
.home-flow[data-flow-story] { --flow-pin-height: 380svh; box-sizing: border-box !important; position: relative !important; height: var(--flow-pin-height) !important; min-height: var(--flow-pin-height) !important; padding: 0px !important; overflow: visible !important; background: rgb(255, 255, 255) !important; isolation: isolate !important; transform: none !important; overscroll-behavior: auto !important; }
.home-flow[data-flow-story] .flow-sticky-stage { box-sizing: border-box !important; position: sticky !important; top: 0px !important; display: flex !important; align-items: stretch !important; width: 100% !important; height: 100svh !important; min-height: 100svh !important; max-height: 100svh !important; overflow: hidden !important; z-index: 1 !important; transform: none !important; background: rgb(255, 255, 255) !important; }
.home-flow[data-flow-story] .home-flow-grid { box-sizing: border-box !important; display: grid !important; grid-template-columns: minmax(0px, 0.95fr) minmax(320px, 0.82fr) !important; align-items: center !important; gap: clamp(22px, 4.3vw, 72px) !important; width: min(1220px, 100% - 32px) !important; min-height: 0px !important; height: 100% !important; margin-inline: auto !important; padding-top: calc(var(--home-header-height, 66px) + clamp(12px, 2vh, 24px)) !important; padding-bottom: clamp(14px, 2.2vh, 28px) !important; overflow: hidden !important; }
.home-flow[data-flow-story] .flow-steps { align-self: center !important; min-height: 0px !important; }
.home-flow[data-flow-story] .flow-steps > h2 { margin-bottom: clamp(16px, 2.1vh, 22px) !important; font-size: clamp(31px, 3.05vw, 48px) !important; line-height: 1 !important; }
.home-flow[data-flow-story] .flow-step-list { height: min(292px, calc(100svh - var(--home-header-height, 66px) - 250px)) !important; min-height: 248px !important; }
.home-flow[data-flow-story] .flow-step { min-height: 96px !important; }
.home-flow[data-flow-story] .flow-preview { align-self: center !important; min-height: 0px !important; }
.home-flow[data-flow-story] .flow-product-window { width: min(100%, 540px) !important; height: min(620px, calc(100svh - var(--home-header-height, 66px) - 42px)) !important; min-height: 0px !important; max-height: calc(100svh - var(--home-header-height, 66px) - 42px) !important; margin: 0px 0px 0px auto !important; overflow: hidden auto !important; overscroll-behavior-y: contain !important; }
.home-flow[data-flow-story] .flow-state-stack { min-height: 430px !important; }
}
@media (min-width: 761px) and (max-height: 820px) {
.home-flow[data-flow-story] .home-flow-grid { padding-top: calc(var(--home-header-height, 66px) + 8px) !important; padding-bottom: 12px !important; }
.home-flow[data-flow-story] .flow-steps > .eyebrow { margin-bottom: 10px !important; }
.home-flow[data-flow-story] .flow-steps > h2 { margin-bottom: 14px !important; font-size: clamp(29px, 2.8vw, 42px) !important; }
.home-flow[data-flow-story] .flow-step-list { height: 252px !important; min-height: 252px !important; }
.home-flow[data-flow-story] .flow-step { min-height: 84px !important; padding-block: 7px !important; }
.home-flow[data-flow-story] .flow-product-window { width: min(100%, 510px) !important; height: min(560px, calc(100svh - var(--home-header-height, 66px) - 28px)) !important; max-height: calc(100svh - var(--home-header-height, 66px) - 28px) !important; }
.home-flow[data-flow-story] .flow-state-stack { min-height: 390px !important; }
}
@media (max-width: 760px) {
.home-flow[data-flow-story] { height: auto !important; min-height: 0px !important; }
.home-flow[data-flow-story] .flow-sticky-stage { position: relative !important; top: auto !important; height: auto !important; min-height: 0px !important; max-height: none !important; overflow: visible !important; }
}
@media (max-width: 767px) {
.home-page .hero-actions .button-secondary, .home-page .hero-demo-card, .home-page .home-text-stage, .home-page .home-flow, .home-page .district-picker, .home-page .local-overview, .home-page .questions-list, .home-page .question-section, .home-page .profiles, .home-page .region-request-section, .home-page .home-closing { display: none !important; }
}
.profile-dialog .card-topline .badge { display: none !important; }
@media (min-width: 769px) {
.home-page > main > .hero, .home-page > main > .home-text-stage, .home-page > main > .home-flow, .home-page > main > .questions-list, .home-page > main > .home-region-teaser, .home-page > main > .home-mission { scroll-margin-top: 90px; }
}
@media (max-width: 768px) {
.home-page > main > .home-text-stage, .home-page > main > .home-flow, .home-page > main > .questions-list, .home-page > main > .home-region-teaser { display: none !important; }
}
@media (max-width: 767px) {
.flow-mini-call-card, .flow-mini-final-panel { display: grid; width: min(100%, 260px); gap: 10px; border: 1px solid rgba(16, 32, 51, 0.08); border-radius: 18px; padding: 13px; background: rgba(255, 255, 255, 0.86); box-shadow: rgba(16, 32, 51, 0.1) 0px 14px 32px, rgba(255, 255, 255, 0.88) 0px 1px 0px inset; }
.flow-mini-call-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.flow-mini-call-card header span { color: var(--hamburg-red, #a66a3f); font-size: 0.66rem; font-weight: 850; letter-spacing: 0.04em; text-transform: uppercase; }
.flow-mini-call-card header b { border-radius: 999px; padding: 4px 7px; background: rgba(16, 32, 51, 0.08); color: rgba(16, 32, 51, 0.72); font-size: 0.62rem; font-weight: 820; white-space: nowrap; }
.flow-mini-call-card.is-created header b { background: rgba(47, 111, 78, 0.12); color: var(--success, #2f6f4e); }
.flow-mini-call-card strong { color: rgb(16, 32, 51); font-size: 1rem; line-height: 1.18; }
.flow-mini-call-card p { margin: 0px; color: rgba(16, 32, 51, 0.58); font-size: 0.77rem; line-height: 1.35; }
.flow-mini-rep { display: inline-flex; width: fit-content; max-width: 100%; align-items: center; gap: 7px; border-radius: 999px; padding: 6px 9px; background: rgba(16, 32, 51, 0.07); color: rgba(16, 32, 51, 0.72); font-size: 0.72rem; font-weight: 780; }
.flow-mini-rep i { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 999px; background: var(--marine, #243447); color: rgb(255, 255, 255); font-style: normal; font-size: 0.68rem; line-height: 1; }
.flow-mini-votes { display: grid; width: min(100%, 276px); grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 9px; }
.flow-mini-votes span { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; border: 1px solid rgba(16, 32, 51, 0.1); border-radius: 14px; background: rgba(255, 255, 255, 0.9); box-shadow: rgba(16, 32, 51, 0.06) 0px 8px 18px; color: rgb(16, 32, 51); font-size: 0.78rem; font-weight: 850; }
.flow-mini-votes .agree { border-color: rgba(47, 111, 78, 0.24); background: rgba(47, 111, 78, 0.12); color: var(--success, #2f6f4e); }
.flow-mini-votes .reject { border-color: rgba(166, 106, 63, 0.28); background: rgba(166, 106, 63, 0.13); color: var(--hamburg-red, #a66a3f); }
.flow-mini-votes .abstain { grid-column: 1 / -1; border-color: rgba(92, 114, 134, 0.22); background: rgba(92, 114, 134, 0.12); color: var(--water, #5c7286); }
.flow-mini-results { display: grid; width: min(100%, 276px); gap: 10px; border: 1px solid rgba(16, 32, 51, 0.08); border-radius: 18px; padding: 13px; background: rgba(255, 255, 255, 0.86); box-shadow: rgba(16, 32, 51, 0.08) 0px 14px 32px, rgba(255, 255, 255, 0.88) 0px 1px 0px inset; }
.flow-mini-results div { display: grid; grid-template-columns: minmax(0px, 1fr) auto; align-items: center; gap: 7px; }
.flow-mini-results span, .flow-mini-results strong { color: rgb(16, 32, 51); font-size: 0.75rem; font-weight: 820; }
.mobile-flow-visual .flow-mini-results i, .mobile-flow-visual.picture .flow-mini-results i, .mobile-flow-visual.final .flow-mini-results i { position: relative; grid-column: 1 / -1; overflow: hidden; height: 9px; border-radius: 999px; background: rgba(16, 32, 51, 0.1); display: block !important; inset: auto !important; width: auto !important; }
.mobile-flow-visual .flow-mini-results b, .mobile-flow-visual.final .flow-mini-results b { position: absolute; inset: 0px auto 0px 0px; border-radius: inherit; display: block !important; }
.flow-mini-results .agree b { width: 58%; background: var(--success, #2f6f4e); }
.flow-mini-results .reject b { width: 29%; background: var(--hamburg-red, #a66a3f); }
.flow-mini-results .abstain b { width: 13%; background: var(--water, #5c7286); }
.flow-mini-final-panel { width: min(100%, 286px); gap: 12px; border-color: rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.14); box-shadow: rgba(255, 255, 255, 0.26) 0px 1px 0px inset, rgba(0, 0, 0, 0.16) 0px 18px 40px; backdrop-filter: blur(18px) saturate(1.2); }
.flow-mini-final-panel .flow-mini-results { width: 100%; padding: 11px; background: rgba(255, 255, 255, 0.92); box-shadow: none; }
.flow-mini-results.compact { gap: 8px; }
.flow-mini-comment { display: grid; gap: 5px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 15px; padding: 10px 11px; background: rgba(255, 255, 255, 0.16); color: rgb(255, 255, 255); }
.flow-mini-comment span { font-size: 0.72rem; font-weight: 840; }
.flow-mini-comment p { margin: 0px; color: rgba(255, 255, 255, 0.84); font-size: 0.78rem; line-height: 1.32; }
}
@media (min-width: 410px) and (max-width: 767px) {
.flow-mini-call-card, .flow-mini-results { width: min(100%, 292px); }
.flow-mini-votes { width: min(100%, 300px); }
}
@media (max-width: 767px) {
.flow-example-card { display: grid !important; width: min(100%, 236px) !important; max-width: 100% !important; justify-self: center !important; gap: 10px !important; padding: 12px !important; border: 1px solid rgba(16, 32, 51, 0.075) !important; border-radius: 15px !important; background: rgba(255, 255, 255, 0.95) !important; box-shadow: rgba(16, 32, 51, 0.06) 0px 8px 18px !important; }
.flow-example-card header { display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: wrap !important; gap: 8px !important; min-width: 0px !important; }
.flow-example-card header > span { flex: 1 1 auto !important; min-width: 0px !important; color: var(--hamburg-red, #a66a3f) !important; font-size: 10px !important; font-weight: 850 !important; letter-spacing: 0.04em !important; line-height: 1.2 !important; text-transform: uppercase !important; white-space: nowrap !important; }
.flow-example-card .mobile-status { position: static !important; inset: auto !important; flex: 0 1 auto !important; display: inline-flex !important; min-width: 0px !important; width: auto !important; height: auto !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; padding: 4px 7px !important; background: rgba(16, 32, 51, 0.08) !important; color: rgba(16, 32, 51, 0.72) !important; font-size: 9.5px !important; font-weight: 820 !important; letter-spacing: 0px !important; line-height: 1 !important; text-transform: none !important; white-space: nowrap !important; box-shadow: none !important; transform: none !important; }
.flow-example-card.is-created .mobile-status { background: rgba(47, 111, 78, 0.12) !important; color: var(--success, #2f6f4e) !important; }
.flow-example-card.is-created { gap: 11px !important; }
.flow-example-card.is-created header { display: grid !important; grid-template-columns: minmax(0px, 1fr) !important; justify-items: start !important; gap: 7px !important; }
.flow-example-card.is-created header > span { white-space: normal !important; }
.flow-example-card.is-created .mobile-status { justify-self: start !important; }
.flow-example-card > strong { position: static !important; display: block !important; color: rgb(16, 32, 51) !important; font-size: 14px !important; line-height: 1.22 !important; font-weight: 840 !important; }
.flow-example-card > p { margin: 0px !important; color: rgba(16, 32, 51, 0.58) !important; font-size: 12px !important; line-height: 1.4 !important; }
.mobile-flow-step.is-signal .flow-example-card > p { display: none !important; }
.flow-mini-rep { position: static !important; display: flex !important; width: 100% !important; max-width: 100% !important; min-width: 0px !important; align-items: center !important; gap: 8px !important; padding: 6px 8px !important; border-radius: 12px !important; background: rgba(16, 32, 51, 0.06) !important; color: rgba(16, 32, 51, 0.68) !important; font-size: 11.5px !important; line-height: 1.2 !important; transform: none !important; }
.flow-mini-rep i { position: static !important; inset: auto !important; display: inline-flex !important; width: 18px !important; height: 18px !important; min-width: 18px !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; background: var(--marine, #243447) !important; color: rgb(255, 255, 255) !important; font-style: normal !important; font-size: 11px !important; line-height: 1 !important; box-shadow: none !important; transform: none !important; }
.mobile-flow-visual.call .flow-example-card b, .mobile-flow-visual.call .flow-example-card i { box-shadow: none !important; }
.flow-mini-rep span { display: block !important; min-width: 0px !important; color: rgba(16, 32, 51, 0.68) !important; font-size: 11.5px !important; font-weight: 780 !important; line-height: 1.22 !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; }
.flow-mini-votes { display: grid !important; width: 100% !important; max-width: 100% !important; grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 8px !important; }
.flow-mini-votes span { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 42px !important; border: 1px solid rgba(16, 32, 51, 0.1) !important; border-radius: 14px !important; padding: 0px 8px !important; background: rgb(255, 255, 255) !important; box-shadow: none !important; color: rgb(16, 32, 51) !important; font-size: 13px !important; font-weight: 820 !important; line-height: 1.1 !important; text-align: center !important; white-space: nowrap !important; }
.flow-mini-votes .agree { border-color: rgba(47, 111, 78, 0.24) !important; background: rgba(47, 111, 78, 0.12) !important; color: var(--success, #2f6f4e) !important; }
.flow-mini-votes .reject { border-color: rgba(179, 38, 30, 0.32) !important; background: rgba(179, 38, 30, 0.12) !important; color: var(--reject, #B3261E) !important; }
.flow-mini-votes .abstain { grid-column: 1 / -1 !important; border-color: rgba(92, 114, 134, 0.22) !important; background: rgba(92, 114, 134, 0.12) !important; color: var(--water, #5c7286) !important; }
.flow-mini-results { display: grid !important; width: 100% !important; max-width: 100% !important; gap: 12px !important; padding: 12px !important; border: 1px solid rgba(16, 32, 51, 0.08) !important; border-radius: 16px !important; background: rgba(255, 255, 255, 0.95) !important; box-shadow: rgba(16, 32, 51, 0.06) 0px 8px 18px !important; }
.flow-mini-results > div { display: grid !important; grid-template-columns: minmax(0px, 1fr) !important; gap: 6px !important; width: 100% !important; max-width: 100% !important; }
.flow-mini-results > div > p { display: flex !important; width: 100% !important; max-width: 100% !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin: 0px !important; color: rgb(16, 32, 51) !important; font-size: 13px !important; line-height: 1.2 !important; }
.flow-mini-results > div > p span, .flow-mini-results > div > p strong { display: inline !important; color: rgb(16, 32, 51) !important; font-size: 13px !important; font-weight: 820 !important; line-height: 1.2 !important; white-space: nowrap !important; }
.flow-mini-results i, .mobile-flow-visual .flow-mini-results i, .mobile-flow-visual.picture .flow-mini-results i, .mobile-flow-visual.final .flow-mini-results i { position: static !important; display: block !important; width: 100% !important; max-width: 100% !important; height: 9px !important; grid-column: 1 / -1 !important; overflow: visible !important; border-radius: 999px !important; background: rgba(16, 32, 51, 0.1) !important; }
.flow-mini-results b, .mobile-flow-visual .flow-mini-results b, .mobile-flow-visual.final .flow-mini-results b { position: static !important; display: block !important; height: 100% !important; border-radius: inherit !important; }
.flow-mini-results .agree b { width: 58% !important; background: var(--success, #2f6f4e) !important; }
.flow-mini-results .reject b { width: 29% !important; background: var(--reject, #B3261E) !important; }
.flow-mini-results .abstain b { width: 13% !important; background: var(--water, #5c7286) !important; }
.flow-mini-comment { display: grid !important; width: 100% !important; max-width: 100% !important; min-width: 0px !important; gap: 6px !important; padding: 12px !important; border: 1px solid rgba(16, 32, 51, 0.08) !important; border-radius: 14px !important; background: rgba(255, 255, 255, 0.95) !important; color: rgb(16, 32, 51) !important; }
.flow-mini-comment span { display: block !important; color: rgb(16, 32, 51) !important; font-size: 13px !important; font-weight: 850 !important; line-height: 1.2 !important; white-space: nowrap !important; }
.flow-mini-comment p { display: block !important; margin: 0px !important; color: rgba(16, 32, 51, 0.62) !important; font-size: 13px !important; line-height: 1.4 !important; white-space: normal !important; }
.flow-mini-handoff { display: grid !important; width: 100% !important; max-width: 100% !important; gap: 12px !important; padding: 14px !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 16px !important; background: rgba(255, 255, 255, 0.1) !important; color: rgb(255, 255, 255) !important; }
.flow-final-meter { display: grid !important; width: 100% !important; grid-template-columns: 58fr 29fr 13fr !important; gap: 4px !important; }
.flow-final-meter span { display: block !important; height: 8px !important; min-width: 0px !important; border-radius: 999px !important; }
.flow-final-meter span:nth-child(1) { background: var(--success, #2f6f4e) !important; }
.flow-final-meter span:nth-child(2) { background: var(--reject, #B3261E) !important; }
.flow-final-meter span:nth-child(3) { background: var(--water, #5c7286) !important; }
.flow-mini-handoff div:last-child { display: grid !important; gap: 5px !important; }
.flow-mini-handoff div:last-child span { display: block !important; color: rgb(255, 255, 255) !important; font-size: 13px !important; font-weight: 850 !important; line-height: 1.2 !important; }
.flow-mini-handoff div:last-child p { margin: 0px !important; color: rgba(255, 255, 255, 0.82) !important; font-size: 13px !important; line-height: 1.4 !important; }
}
.flow-info-page { background: rgb(246, 247, 247); }
.flow-info-page main { background: rgb(246, 247, 247); }
.flow-document { gap: clamp(26px, 5vw, 48px); }
.flow-page-intro { display: grid; gap: 14px; }
.flow-page-intro p:last-child { max-width: 760px; color: rgba(16, 32, 51, 0.72); font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.6; }
.flow-document-section { display: grid; gap: 18px; }
.flow-document-section h2 { margin-top: 0px; }
@media (max-width: 767px) {
.flow-info-page main { padding-bottom: calc(var(--mobile-bottom-nav-height, 76px) + env(safe-area-inset-bottom, 0px) + 36px); }
}
@media (max-width: 767px) {
.flow-live-screen { display: grid !important; width: 100% !important; max-width: 100% !important; gap: 10px !important; padding: 11px !important; border: 1px solid rgba(16, 32, 51, 0.075) !important; border-radius: 20px !important; background: rgba(255, 255, 255, 0.96) !important; color: rgb(16, 32, 51) !important; box-shadow: rgba(16, 32, 51, 0.08) 0px 12px 24px !important; }
.flow-live-screen.is-decision { border-color: rgba(255, 255, 255, 0.2) !important; background: rgba(255, 255, 255, 0.1) !important; color: rgb(255, 255, 255) !important; box-shadow: rgba(255, 255, 255, 0.18) 0px 1px 0px inset !important; }
.flow-live-top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; min-width: 0px !important; }
.flow-live-top span, .flow-live-top b { display: inline-flex !important; width: auto !important; min-width: 0px !important; min-height: 0px !important; align-items: center !important; border-radius: 999px !important; color: inherit !important; font-size: 9.5px !important; font-weight: 850 !important; line-height: 1 !important; letter-spacing: 0.055em !important; text-transform: uppercase !important; white-space: nowrap !important; }
.flow-live-top span { overflow: hidden !important; text-overflow: ellipsis !important; }
.flow-live-top b { flex: 0 0 auto !important; padding: 5px 7px !important; background: rgba(47, 111, 78, 0.12) !important; color: var(--success, #2f6f4e) !important; }
.flow-live-screen.is-preview .flow-live-top b { background: rgba(92, 114, 134, 0.12) !important; color: var(--water, #5c7286) !important; }
.flow-live-screen.is-decision .flow-live-top b { background: rgba(255, 255, 255, 0.14) !important; color: rgb(255, 255, 255) !important; }
.flow-live-card { display: grid !important; gap: 8px !important; padding: 12px !important; border: 1px solid rgba(16, 32, 51, 0.067) !important; border-radius: 17px !important; background: linear-gradient(rgb(255, 255, 255), rgba(247, 250, 252, 0.96)) !important; box-shadow: rgba(255, 255, 255, 0.9) 0px 1px 0px inset !important; }
.flow-live-card small { display: block !important; color: var(--hamburg-red, #a66a3f) !important; font-size: 10px !important; font-weight: 850 !important; line-height: 1.15 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; }
.flow-live-card strong { display: block !important; color: rgb(16, 32, 51) !important; font-size: 15px !important; font-weight: 860 !important; line-height: 1.2 !important; }
.flow-live-card p { display: block !important; margin: 0px !important; color: rgba(16, 32, 51, 0.62) !important; font-size: 12px !important; font-weight: 570 !important; line-height: 1.38 !important; }
.flow-live-rep { display: inline-flex !important; width: fit-content !important; max-width: 100% !important; align-items: center !important; gap: 7px !important; border-radius: 999px !important; padding: 5px 8px !important; background: rgba(16, 32, 51, 0.07) !important; color: rgba(16, 32, 51, 0.72) !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1.12 !important; }
.flow-live-rep i { display: grid !important; flex: 0 0 17px !important; width: 17px !important; height: 17px !important; place-items: center !important; border-radius: 999px !important; background: rgb(16, 32, 51) !important; color: rgb(255, 255, 255) !important; font-size: 10px !important; font-style: normal !important; line-height: 1 !important; }
.flow-live-rep span { display: inline !important; min-width: 0px !important; color: rgba(16, 32, 51, 0.72) !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1.12 !important; white-space: normal !important; }
.flow-live-vote { display: grid !important; width: 100% !important; grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 7px !important; }
.flow-live-vote span { display: inline-flex !important; width: 100% !important; min-height: 34px !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(16, 32, 51, 0.1) !important; border-radius: 12px !important; padding: 0px 8px !important; background: rgb(255, 255, 255) !important; color: rgb(16, 32, 51) !important; box-shadow: rgba(255, 255, 255, 0.82) 0px 1px 0px inset !important; font-size: 12px !important; font-weight: 840 !important; line-height: 1.1 !important; text-align: center !important; white-space: nowrap !important; }
.flow-live-vote span:nth-child(3), .flow-live-vote .abstain { grid-column: 1 / -1 !important; }
.flow-live-vote .agree, .flow-live-vote span:first-child { border-color: rgba(47, 111, 78, 0.3) !important; background: rgba(47, 111, 78, 0.1) !important; color: var(--success, #2f6f4e) !important; }
.flow-live-vote .reject, .flow-live-vote span:nth-child(2) { border-color: rgba(179, 38, 30, 0.34) !important; background: rgba(179, 38, 30, 0.1) !important; color: var(--reject, #B3261E) !important; }
.flow-live-vote .abstain, .flow-live-vote span:nth-child(3) { border-color: rgba(92, 114, 134, 0.24) !important; background: rgba(92, 114, 134, 0.1) !important; color: var(--water, #5c7286) !important; }
.flow-live-vote.is-quiet span { min-height: 28px !important; border-style: dashed !important; background: rgba(255, 255, 255, 0.72) !important; color: rgba(16, 32, 51, 0.42) !important; font-size: 10.5px !important; }
.flow-live-vote.is-selected .agree { background: var(--success, #2f6f4e) !important; color: rgb(255, 255, 255) !important; box-shadow: rgba(47, 111, 78, 0.2) 0px 8px 16px !important; }
.flow-live-comment, .flow-live-comments, .flow-live-note { display: grid !important; gap: 5px !important; padding: 11px 12px !important; border: 1px solid rgba(16, 32, 51, 0.067) !important; border-radius: 15px !important; background: rgba(247, 250, 252, 0.96) !important; }
.flow-live-note { border-color: rgba(255, 255, 255, 0.18) !important; background: rgba(255, 255, 255, 0.12) !important; }
.flow-live-comment span, .flow-live-comments span, .flow-live-note span { display: block !important; width: auto !important; color: rgb(16, 32, 51) !important; font-size: 11.5px !important; font-weight: 860 !important; line-height: 1.2 !important; }
.flow-live-note span { color: rgb(255, 255, 255) !important; }
.flow-live-comment p, .flow-live-comments p, .flow-live-note p { margin: 0px !important; color: rgba(16, 32, 51, 0.62) !important; font-size: 12px !important; font-weight: 570 !important; line-height: 1.38 !important; }
.flow-live-note p { color: rgba(255, 255, 255, 0.78) !important; }
.flow-live-results { display: grid !important; gap: 10px !important; padding: 12px !important; border: 1px solid rgba(16, 32, 51, 0.067) !important; border-radius: 17px !important; background: rgba(255, 255, 255, 0.96) !important; }
.flow-live-screen.is-decision .flow-live-results { background: rgba(255, 255, 255, 0.95) !important; }
.flow-live-results > div { display: grid !important; gap: 6px !important; }
.flow-live-results p { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin: 0px !important; color: rgb(16, 32, 51) !important; font-size: 12px !important; font-weight: 820 !important; line-height: 1.15 !important; }
.flow-live-results p span, .flow-live-results p strong { display: inline !important; color: rgb(16, 32, 51) !important; font-size: 12px !important; font-weight: 850 !important; line-height: 1.15 !important; white-space: nowrap !important; }
.flow-live-results i { position: relative !important; display: block !important; overflow: hidden !important; width: 100% !important; height: 8px !important; border-radius: 999px !important; background: rgba(16, 32, 51, 0.1) !important; }
.flow-live-results b { position: absolute !important; inset: 0px auto 0px 0px !important; display: block !important; height: 100% !important; border-radius: inherit !important; }
.flow-live-results .agree b { width: 58% !important; background: var(--success, #2f6f4e) !important; }
.flow-live-results .reject b { width: 29% !important; background: var(--reject, #B3261E) !important; }
.flow-live-results .abstain b { width: 13% !important; background: var(--water, #5c7286) !important; }
}
@media (max-width: 767px) {
.flow-lokalruf-card { display: grid !important; width: 100% !important; max-width: 100% !important; gap: 10px !important; padding: 12px !important; border: 1px solid rgba(16, 32, 51, 0.08) !important; border-radius: 20px !important; background: linear-gradient(rgba(255, 255, 255, 0.98), rgba(248, 251, 252, 0.98)) !important; color: rgb(16, 32, 51) !important; box-shadow: rgba(255, 255, 255, 0.96) 0px 1px 0px inset, rgba(16, 32, 51, 0.09) 0px 14px 30px !important; overflow: hidden !important; }
.flow-lokalruf-header { display: grid !important; grid-template-columns: minmax(0px, 1fr) auto !important; align-items: start !important; gap: 10px !important; min-width: 0px !important; }
.flow-lokalruf-header > div { display: grid !important; min-width: 0px !important; gap: 3px !important; }
.mobile-flow-story .flow-lokalruf-region, .flow-lokalruf-status, .flow-lokalruf-header small, .flow-lokalruf-header strong, .flow-lokalruf-main strong, .flow-lokalruf-main p, .flow-lokalruf-votes span, .flow-lokalruf-comment span, .flow-lokalruf-comment p, .flow-lokalruf-note span, .flow-lokalruf-note p, .flow-lokalruf-results span, .flow-lokalruf-results strong { width: auto !important; min-width: 0px !important; height: auto !important; min-height: 0px !important; border-radius: 0px !important; background: transparent !important; box-shadow: none !important; line-height: inherit !important; text-align: inherit !important; }
.mobile-flow-story .flow-lokalruf-region { display: block !important; color: var(--hamburg-red, #a66a3f) !important; font-size: 10px !important; font-weight: 880 !important; line-height: 1.1 !important; letter-spacing: 0.055em !important; text-transform: uppercase !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.flow-lokalruf-header strong { display: block !important; color: rgb(16, 32, 51) !important; font-size: 12px !important; font-weight: 850 !important; line-height: 1.15 !important; white-space: normal !important; }
.flow-lokalruf-header small { display: block !important; color: rgba(16, 32, 51, 0.55) !important; font-size: 10.5px !important; font-weight: 700 !important; line-height: 1.2 !important; white-space: normal !important; }
.flow-lokalruf-status { display: inline-flex !important; align-items: center !important; justify-content: center !important; justify-self: end !important; min-height: 24px !important; border: 1px solid rgba(47, 111, 78, 0.14) !important; border-radius: 999px !important; padding: 0px 8px !important; background: rgba(47, 111, 78, 0.1) !important; color: var(--agree, #2f6f4e) !important; font-size: 9.5px !important; font-weight: 860 !important; line-height: 1 !important; letter-spacing: 0.035em !important; text-transform: uppercase !important; white-space: nowrap !important; }
.flow-lokalruf-card.is-planned .flow-lokalruf-status { border-color: rgba(92, 114, 134, 0.18) !important; background: rgba(92, 114, 134, 0.1) !important; color: var(--water, #5c7286) !important; }
.flow-lokalruf-card.is-decision .flow-lokalruf-status { border-color: rgba(166, 106, 63, 0.18) !important; background: rgba(166, 106, 63, 0.1) !important; color: var(--hamburg-red, #a66a3f) !important; }
.flow-lokalruf-main { display: grid !important; gap: 7px !important; padding: 11px !important; border: 1px solid rgba(16, 32, 51, 0.06) !important; border-radius: 16px !important; background: rgba(255, 255, 255, 0.74) !important; }
.flow-lokalruf-main strong { display: block !important; color: rgb(16, 32, 51) !important; font-size: 15.5px !important; font-weight: 880 !important; line-height: 1.16 !important; }
.flow-lokalruf-main p { display: block !important; margin: 0px !important; color: rgba(16, 32, 51, 0.62) !important; font-size: 12.5px !important; font-weight: 570 !important; line-height: 1.38 !important; }
.flow-lokalruf-votes { display: grid !important; grid-template-columns: repeat(3, minmax(0px, 1fr)) !important; gap: 6px !important; width: 100% !important; }
.flow-lokalruf-votes span { display: inline-flex !important; min-height: 30px !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(16, 32, 51, 0.1) !important; border-radius: 11px !important; padding: 0px 6px !important; background: rgba(255, 255, 255, 0.86) !important; font-size: 10.5px !important; font-weight: 850 !important; line-height: 1.05 !important; white-space: nowrap !important; }
.flow-lokalruf-votes .agree { border-color: rgba(47, 111, 78, 0.26) !important; color: var(--agree, #2f6f4e) !important; }
.flow-lokalruf-votes .reject { border-color: rgba(179, 38, 30, 0.28) !important; color: var(--reject, #B3261E) !important; }
.flow-lokalruf-votes .abstain { border-color: rgba(92, 114, 134, 0.24) !important; color: var(--water, #5c7286) !important; }
.flow-lokalruf-votes .is-selected { border-color: rgba(47, 111, 78, 0.55) !important; background: var(--agree, #2f6f4e) !important; color: rgb(255, 255, 255) !important; }
.flow-lokalruf-votes.is-muted span { border-style: dashed !important; opacity: 0.62 !important; }
.flow-lokalruf-comment, .flow-lokalruf-note { display: grid !important; gap: 5px !important; padding: 10px 11px !important; border: 1px solid rgba(16, 32, 51, 0.06) !important; border-radius: 15px !important; background: rgba(255, 255, 255, 0.74) !important; }
.flow-lokalruf-note { border-color: rgba(16, 32, 51, 0.12) !important; background: linear-gradient(145deg, rgba(16, 32, 51, 0.95), rgba(36, 52, 71, 0.9)) !important; }
.flow-lokalruf-comment span, .flow-lokalruf-note span { display: block !important; color: rgb(16, 32, 51) !important; font-size: 11.5px !important; font-weight: 860 !important; line-height: 1.2 !important; }
.flow-lokalruf-note span { color: rgb(255, 255, 255) !important; }
.flow-lokalruf-comment p, .flow-lokalruf-note p { display: block !important; margin: 0px !important; color: rgba(16, 32, 51, 0.62) !important; font-size: 12px !important; font-weight: 570 !important; line-height: 1.36 !important; }
.flow-lokalruf-note p { color: rgba(255, 255, 255, 0.78) !important; }
.flow-lokalruf-results { display: grid !important; gap: 9px !important; padding: 11px !important; border: 1px solid rgba(16, 32, 51, 0.06) !important; border-radius: 16px !important; background: rgba(255, 255, 255, 0.78) !important; }
.flow-lokalruf-results > div { display: grid !important; gap: 5px !important; }
.flow-lokalruf-results p { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; margin: 0px !important; }
.flow-lokalruf-results p span, .flow-lokalruf-results p strong { display: inline !important; color: rgb(16, 32, 51) !important; font-size: 12px !important; font-weight: 850 !important; line-height: 1.12 !important; white-space: nowrap !important; }
.flow-lokalruf-results i { position: relative !important; display: block !important; overflow: hidden !important; width: 100% !important; height: 8px !important; border-radius: 999px !important; background: rgba(16, 32, 51, 0.1) !important; }
.flow-lokalruf-results b { position: absolute !important; inset: 0px auto 0px 0px !important; display: block !important; height: 100% !important; border-radius: inherit !important; }
.flow-lokalruf-results .agree b { width: 58% !important; background: var(--agree, #2f6f4e) !important; }
.flow-lokalruf-results .reject b { width: 29% !important; background: var(--reject, #B3261E) !important; }
.flow-lokalruf-results .abstain b { width: 13% !important; background: var(--water, #5c7286) !important; }
}
@media (max-width: 767px) {
[data-mobile-panel="flow"] .mobile-section-head, [data-mobile-panel="flow"] .mobile-flow-story, [data-mobile-panel="flow"] .mobile-flow-step, [data-mobile-panel="flow"] .mobile-flow-copy, [data-mobile-panel="flow"] .mobile-flow-visual, [data-mobile-panel="flow"] .flow-lokalruf-card, [data-mobile-panel="flow"] .flow-lokalruf-card > * { min-width: 0px !important; max-width: 100% !important; box-sizing: border-box !important; }
[data-mobile-panel="flow"] .flow-lokalruf-card { grid-template-columns: minmax(0px, 1fr) !important; grid-auto-flow: row !important; place-items: stretch !important; width: 100% !important; gap: 10px !important; padding: 13px !important; border-radius: 20px !important; }
[data-mobile-panel="flow"] .flow-lokalruf-card > * { grid-column: 1 / -1 !important; width: 100% !important; justify-self: stretch !important; }
[data-mobile-panel="flow"] .flow-lokalruf-header { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; }
[data-mobile-panel="flow"] .flow-lokalruf-header > div { flex: 1 1 auto !important; width: auto !important; }
[data-mobile-panel="flow"] .flow-lokalruf-header .flow-lokalruf-region, [data-mobile-panel="flow"] .flow-lokalruf-header strong, [data-mobile-panel="flow"] .flow-lokalruf-header small, [data-mobile-panel="flow"] .flow-lokalruf-main strong, [data-mobile-panel="flow"] .flow-lokalruf-main p, [data-mobile-panel="flow"] .flow-lokalruf-comment span, [data-mobile-panel="flow"] .flow-lokalruf-comment p, [data-mobile-panel="flow"] .flow-lokalruf-note span, [data-mobile-panel="flow"] .flow-lokalruf-note p, [data-mobile-panel="flow"] .flow-lokalruf-results span, [data-mobile-panel="flow"] .flow-lokalruf-results strong { position: static !important; inset: auto !important; display: block !important; width: auto !important; max-width: 100% !important; height: auto !important; min-height: 0px !important; margin: 0px !important; padding: 0px !important; border: 0px !important; border-radius: 0px !important; background: transparent !important; box-shadow: none !important; transform: none !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; white-space: normal !important; }
[data-mobile-panel="flow"] .flow-lokalruf-header .flow-lokalruf-region { color: var(--hamburg-red, #a66a3f) !important; font-size: 10px !important; font-weight: 860 !important; line-height: 1.15 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; }
[data-mobile-panel="flow"] .flow-lokalruf-header strong { margin-top: 3px !important; color: rgb(16, 32, 51) !important; font-size: 13px !important; font-weight: 850 !important; line-height: 1.2 !important; }
[data-mobile-panel="flow"] .flow-lokalruf-header small { margin-top: 2px !important; color: rgba(16, 32, 51, 0.56) !important; font-size: 10.5px !important; font-weight: 650 !important; line-height: 1.25 !important; }
[data-mobile-panel="flow"] .flow-lokalruf-status { position: static !important; inset: auto !important; flex: 0 0 auto !important; display: inline-flex !important; width: auto !important; min-width: 0px !important; min-height: 25px !important; align-items: center !important; justify-content: center !important; padding: 0px 9px !important; border-radius: 999px !important; font-size: 9.5px !important; font-weight: 850 !important; line-height: 1 !important; white-space: nowrap !important; }
[data-mobile-panel="flow"] .flow-lokalruf-main { display: grid !important; grid-template-columns: minmax(0px, 1fr) !important; gap: 7px !important; padding: 12px !important; }
[data-mobile-panel="flow"] .flow-lokalruf-main strong { color: rgb(16, 32, 51) !important; font-size: 16px !important; font-weight: 870 !important; line-height: 1.18 !important; }
[data-mobile-panel="flow"] .flow-lokalruf-main p { color: rgba(16, 32, 51, 0.64) !important; font-size: 12.5px !important; font-weight: 560 !important; line-height: 1.42 !important; }
[data-mobile-panel="flow"] .flow-lokalruf-votes { display: grid !important; grid-template-columns: repeat(3, minmax(0px, 1fr)) !important; width: 100% !important; gap: 6px !important; }
[data-mobile-panel="flow"] .flow-lokalruf-votes span { position: static !important; inset: auto !important; display: flex !important; width: 100% !important; min-width: 0px !important; min-height: 32px !important; align-items: center !important; justify-content: center !important; padding: 0px 5px !important; border-radius: 10px !important; font-size: 10px !important; font-weight: 820 !important; line-height: 1 !important; text-align: center !important; white-space: nowrap !important; }
[data-mobile-panel="flow"] .flow-lokalruf-comment, [data-mobile-panel="flow"] .flow-lokalruf-note, [data-mobile-panel="flow"] .flow-lokalruf-results { width: 100% !important; }
[data-mobile-panel="flow"] .flow-lokalruf-comment span, [data-mobile-panel="flow"] .flow-lokalruf-note span { color: rgb(16, 32, 51) !important; font-size: 11px !important; font-weight: 850 !important; line-height: 1.2 !important; }
[data-mobile-panel="flow"] .flow-lokalruf-comment p, [data-mobile-panel="flow"] .flow-lokalruf-note p { margin-top: 5px !important; color: rgba(16, 32, 51, 0.65) !important; font-size: 12.5px !important; font-weight: 560 !important; line-height: 1.42 !important; }
[data-mobile-panel="flow"] .flow-lokalruf-note span, [data-mobile-panel="flow"] .flow-lokalruf-note p { color: rgba(255, 255, 255, 0.9) !important; }
[data-mobile-panel="flow"] .flow-lokalruf-results > div { width: 100% !important; }
[data-mobile-panel="flow"] .flow-lokalruf-results p { display: flex !important; width: 100% !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; margin: 0px !important; }
[data-mobile-panel="flow"] .flow-lokalruf-results p span, [data-mobile-panel="flow"] .flow-lokalruf-results p strong { display: inline !important; color: rgb(16, 32, 51) !important; font-size: 12px !important; font-weight: 830 !important; line-height: 1.2 !important; white-space: nowrap !important; }
[data-mobile-panel="flow"] .flow-lokalruf-results i { position: relative !important; inset: auto !important; display: block !important; width: 100% !important; height: 8px !important; overflow: hidden !important; }
[data-mobile-panel="flow"] .flow-lokalruf-results i b { position: absolute !important; inset: 0px auto 0px 0px !important; display: block !important; height: 100% !important; }
}
@media (max-width: 360px) {
[data-mobile-panel="flow"] .flow-lokalruf-card { padding: 11px !important; }
[data-mobile-panel="flow"] .flow-lokalruf-votes { grid-template-columns: 1fr !important; }
}
@media (max-width: 767px) {
[data-mobile-panel="flow"] .flow-lokalruf-card.is-decision .flow-lokalruf-header strong, [data-mobile-panel="flow"] .flow-lokalruf-card.is-decision .flow-lokalruf-header small { color: rgb(201, 122, 50) !important; opacity: 1 !important; }
}
@media (max-width: 767px) {
[data-mobile-panel="flow"] .flow-lokalruf-card.is-decision .flow-lokalruf-header strong, [data-mobile-panel="flow"] .flow-lokalruf-card.is-decision .flow-lokalruf-header small, [data-mobile-panel="flow"] .flow-lokalruf-card.is-decision .flow-lokalruf-kicker, [data-mobile-panel="flow"] .flow-lokalruf-card.is-decision .flow-lokalruf-summary-label { color: rgb(216, 138, 67) !important; opacity: 1 !important; }
}
@media (max-width: 767px) {
[data-mobile-panel="flow"] .flow-lokalruf-card.is-decision .flow-lokalruf-header strong, [data-mobile-panel="flow"] .flow-lokalruf-card.is-decision .flow-lokalruf-header small, [data-mobile-panel="flow"] .flow-lokalruf-card.is-decision .flow-lokalruf-kicker, [data-mobile-panel="flow"] .flow-lokalruf-card.is-decision .flow-lokalruf-summary-label { color: rgb(230, 151, 79) !important; -webkit-text-fill-color: rgb(230, 151, 79) !important; opacity: 1 !important; }
}
@media (max-width: 767px) {
[data-mobile-panel="flow"] .flow-lokalruf-card { border-radius: 20px !important; background: linear-gradient(rgba(255, 255, 255, 0.98), rgba(249, 251, 252, 0.94)) !important; box-shadow: rgba(255, 255, 255, 0.96) 0px 1px 0px inset, rgba(16, 32, 51, 0.08) 0px 14px 32px !important; }
[data-mobile-panel="flow"] .flow-lokalruf-main, [data-mobile-panel="flow"] .flow-lokalruf-results, [data-mobile-panel="flow"] .flow-lokalruf-comment { background: rgba(255, 255, 255, 0.72) !important; }
[data-mobile-panel="flow"] .flow-lokalruf-note { background: linear-gradient(145deg, rgba(16, 32, 51, 0.96), rgba(37, 57, 79, 0.9)) !important; }
}

/* WEHRTENS PRODUCT PAGE INTEGRATION */
.lr-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  min-height: 720px;
  padding-block: clamp(72px, 9vw, 124px);
}

.lr-hero-inner > * {
  max-width: 760px;
}

.lr-hero-inner .lr-title-line {
  width: 100%;
}

.lr-hero-inner .lr-title-line img {
  margin-left: clamp(4px, 1.2vw, 14px);
}

.lr-exact-flow {
  --home-header-height: 82px;
  --hamburg-red: var(--accent);
  --hamburg-red-bright: var(--accent);
  --wehrtens-flow-muted: var(--text-soft);
  --wehrtens-flow-text: var(--text);
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
}

.lr-exact-flow.home-flow[data-flow-story],
.lr-exact-flow.home-flow[data-flow-story] .flow-sticky-stage {
  background: var(--bg) !important;
}

.lr-exact-flow .flow-steps > .eyebrow {
  color: var(--accent) !important;
  font-family: var(--font-mono-de) !important;
}

.lr-exact-flow .flow-steps > h2,
.lr-exact-flow .flow-step.is-active,
.lr-exact-flow .flow-step-title {
  color: var(--wehrtens-flow-text) !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0 !important;
}

.lr-exact-flow .flow-step,
.lr-exact-flow .flow-step-copy,
.lr-exact-flow .flow-step > span:first-child {
  color: var(--wehrtens-flow-muted) !important;
  font-family: var(--font-sans) !important;
}

.lr-exact-flow .flow-step.is-active > span:first-child {
  color: var(--accent) !important;
}

.lr-exact-flow .flow-progress-rail::before {
  background: var(--line-strong) !important;
}

.lr-exact-flow .flow-progress-rail > span,
.lr-exact-flow[data-active-flow-step="0"] .flow-progress-rail i:nth-of-type(1),
.lr-exact-flow[data-active-flow-step="1"] .flow-progress-rail i:nth-of-type(-n+2),
.lr-exact-flow[data-active-flow-step="2"] .flow-progress-rail i {
  background: var(--accent) !important;
}

.lr-exact-flow .flow-progress-rail i {
  border-color: var(--bg) !important;
  background: var(--line-strong) !important;
}

.lr-exact-flow .flow-product-window {
  --hamburg-red: #a66a3f;
  --hamburg-red-bright: #a66a3f;
  --marine: #243447;
  --marine-2: #162334;
  --ink: #111111;
  --muted: #626872;
  --line: rgba(20, 20, 20, 0.08);
  --white: #ffffff;
  --brand: #243447;
  --brand-dark: #162334;
  --brand-soft: #e8eef3;
  --accent: #a66a3f;
  --accent-dark: #7c4b2b;
  --accent-soft: #f2e8df;
  --surface: #ffffff;
  --surface-soft: #f3f5f7;
  --agree: #2f6f4e;
  --agree-soft: #eef6f1;
  --reject: #b3261e;
  --reject-soft: #fff0ee;
  --abstain: #747d86;
  --abstain-soft: #f1f3f5;
  --water: #5c7286;
  --warning: #9a7a3a;
  --radius-sm: 10px;
  color: var(--ink) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(247,249,251,.98)) !important;
  border: 1px solid rgba(36,52,71,.12) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.95) !important;
  font-family: var(--font-sans) !important;
}

.lr-exact-flow .flow-product-window h3,
.lr-exact-flow .flow-product-window p,
.lr-exact-flow .flow-product-window span,
.lr-exact-flow .flow-product-window strong,
.lr-exact-flow .flow-product-window button {
  font-family: inherit;
}

.lr-exact-flow .flow-product-window h3 {
  color: var(--ink) !important;
}

.lr-exact-flow .flow-product-window .flow-product-copy,
.lr-exact-flow .flow-product-window .flow-product-meta,
.lr-exact-flow .flow-product-window .flow-product-header > span:last-child {
  color: var(--muted) !important;
}

@keyframes flowCursor {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

@media (max-width: 760px) {
  .lr-hero,
  .lr-hero-inner {
    min-height: 0;
  }

  .lr-hero-inner {
    padding-block: 64px 76px;
  }

  .lr-hero-inner .lr-breadcrumb {
    margin-bottom: 30px;
  }

  .lr-exact-flow {
    --home-header-height: 72px;
  }

  .lr-exact-flow.home-flow[data-flow-story] {
    padding-block: 72px !important;
  }

  .lr-exact-flow .home-flow-grid {
    width: min(100% - 32px, 620px) !important;
    gap: 34px !important;
  }

  .lr-exact-flow .flow-step-list {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .lr-exact-flow .flow-reel__track {
    transform: none !important;
  }

  .lr-exact-flow .flow-step,
  .lr-exact-flow .flow-step:hover,
  .lr-exact-flow .flow-step:active,
  .lr-exact-flow .flow-step:focus,
  .lr-exact-flow .flow-step.is-active {
    min-height: 0 !important;
    padding: 16px 8px 16px 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .lr-exact-flow .flow-product-window {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .lr-exact-flow .flow-state-stack,
  .lr-exact-flow .flow-product-demo[data-flow-phase="create"] .flow-phase-panel-create,
  .lr-exact-flow .flow-product-demo[data-flow-phase="response"] .flow-phase-panel-response,
  .lr-exact-flow .flow-product-demo[data-flow-phase="decision"] .flow-phase-panel-decision {
    min-height: 0 !important;
  }
}
/* Match the restrained interaction language of the homepage focus cards. */
.product-page .lr-card-grid article,
.product-page .lr-final-panel {
  transform: translate3d(0, 0, 0);
  transition:
    background-color 360ms var(--ease-calm),
    border-color 360ms var(--ease-calm),
    transform 360ms var(--ease-calm);
}

.product-page .lr-card-grid article:hover,
.product-page .lr-card-grid article:focus-within,
.product-page .lr-final-panel:hover,
.product-page .lr-final-panel:focus-within {
  border-color: var(--line-strong);
  background-color: color-mix(in srgb, var(--surface-strong) 82%, transparent);
  transform: translate3d(0, -1px, 0);
}

/* Lokalruf's source stylesheet is scoped visually; Wehrtens commands keep the homepage button system. */
.product-page .button {
  width: fit-content !important;
  max-width: none !important;
  min-width: 168px !important;
  min-height: 46px !important;
  height: auto !important;
  padding: 0 20px !important;
  border: 1px solid var(--accent-border-strong) !important;
  border-radius: var(--radius-pill) !important;
  color: #fff !important;
  background: var(--button-bg) !important;
  box-shadow: none !important;
  font-family: var(--font-mono-de) !important;
  cursor: pointer !important;
  transform: translate3d(0, 0, 0) !important;
  transition:
    color 260ms var(--ease-calm),
    border-color 300ms var(--ease-calm),
    background-color 300ms var(--ease-calm),
    transform 340ms var(--ease-calm) !important;
}

.product-page .button-secondary {
  color: var(--text-soft) !important;
  border-color: var(--line-strong) !important;
  background: transparent !important;
}

.product-page .button:hover,
.product-page .button:focus-visible {
  color: #fff !important;
  border-color: var(--accent-border-strong) !important;
  transform: translate3d(0, -1px, 0) !important;
}

.product-page .button-secondary:hover,
.product-page .button-secondary:focus-visible {
  color: var(--text) !important;
  background: color-mix(in srgb, var(--surface-strong) 76%, transparent) !important;
}

@media (max-width: 480px) {
  .product-page .button {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Product-page controls use continuous proportional typography. */
.product-page .nav a,
.product-page .theme-toggle,
.product-page .button {
  font-family: var(--font-sans) !important;
  letter-spacing: 0 !important;
}

.product-page .nav a,
.product-page .button {
  font-weight: 520;
}

/* Keep the embedded product experience inside the same three-font system. */
.product-page .lr-exact-flow .flow-product-window {
  font-family: var(--font-sans) !important;
}

/* Animated Lokalruf brand mark with a real-time clock. */
.product-page .lr-breadcrumb,
.product-page .lr-hero .product-status {
  font-family: var(--font-sans);
  letter-spacing: 0;
}

.product-page .lr-hero .product-status {
  font-weight: 600;
  letter-spacing: 0.075em;
}

.lr-title-line {
  width: fit-content;
  gap: 18px;
}

.lr-brand-mark {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 106px;
  aspect-ratio: 1;
  margin-bottom: -2px;
  margin-left: -16px;
}
.lr-hero-inner .lr-title-line .lr-brand-mark > img {
  margin-left: 0;
}


.lr-brand-mark > img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
  filter: drop-shadow(0 18px 44px color-mix(in srgb, var(--accent) 20%, transparent));
  animation: lokalrufMarkTone 6s linear infinite;
}

.lr-live-clock {
  --clock-hour: 0deg;
  --clock-minute: 0deg;
  --clock-second: 0deg;
  position: absolute;
  top: 44.75%;
  left: 35.45%;
  width: 16.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(159, 91, 38, 0.12);
  transform: translate(-50%, -50%);
}

.lr-clock-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 1.35px;
  border-radius: 999px;
  background: #bd7433;
  transform-origin: 50% 100%;
}

.lr-clock-hour {
  height: 25%;
  transform: translateX(-50%) rotate(var(--clock-hour));
}

.lr-clock-minute {
  height: 36%;
  transform: translateX(-50%) rotate(var(--clock-minute));
}

.lr-clock-second {
  width: 1px;
  height: 39%;
  background: #315f91;
  transform: translateX(-50%) rotate(var(--clock-second));
}

.lr-clock-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #bd7433;
  transform: translate(-50%, -50%);
}

@keyframes lokalrufMarkTone {
  0% {
    filter: hue-rotate(0deg) saturate(1.08) brightness(1.03) drop-shadow(0 18px 44px color-mix(in srgb, var(--accent) 22%, transparent));
  }
  50% {
    filter: hue-rotate(180deg) saturate(1.16) brightness(1.1) drop-shadow(0 20px 50px color-mix(in srgb, #6ba9e8 28%, transparent));
  }
  100% {
    filter: hue-rotate(360deg) saturate(1.08) brightness(1.03) drop-shadow(0 18px 44px color-mix(in srgb, var(--accent) 22%, transparent));
  }
}

@media (max-width: 760px) {
  .lr-brand-mark {
    width: 86px;
    margin-left: -10px;
  }
}

@media (max-width: 520px) {
  .lr-title-line {
    gap: 12px;
  }

  .lr-brand-mark {
    width: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lr-brand-mark > img {
    animation: none;
  }
}

/* Product hero: editorial copy and a dedicated animated brand stage. */
.lr-hero-inner > .lr-hero-layout {
  width: 100%;
  max-width: none;
}

.lr-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.72fr);
  gap: clamp(52px, 8vw, 132px);
  align-items: center;
}

.lr-hero-copy {
  max-width: 720px;
}

.lr-brand-stage {
  display: grid;
  place-items: center;
  min-height: 460px;
  justify-self: stretch;
}

.lr-brand-stage .lr-brand-mark {
  width: clamp(320px, 28vw, 430px);
  margin: 0;
  animation: lokalrufMarkFloat 9s var(--ease-calm) infinite;
}

.lr-brand-stage .lr-clock-hand {
  width: 2px;
}

.lr-brand-stage .lr-clock-second {
  width: 1.25px;
}

.lr-brand-stage .lr-clock-pin {
  width: 5px;
  height: 5px;
}

@keyframes lokalrufMarkFloat {
  0%, 100% { transform: translate3d(0, -3px, 0); }
  50% { transform: translate3d(0, 5px, 0); }
}

@media (max-width: 900px) {
  .lr-hero-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .lr-brand-stage {
    order: -1;
    min-height: 220px;
  }

  .lr-brand-stage .lr-brand-mark {
    width: min(230px, 64vw);
  }
}

@media (max-width: 520px) {
  .lr-brand-stage {
    min-height: 178px;
  }

  .lr-brand-stage .lr-brand-mark {
    width: min(190px, 58vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lr-brand-stage .lr-brand-mark {
    animation: none;
  }
}

@media (min-width: 901px) {
  .lr-brand-stage {
    transform: translateY(-74px);
  }
}

/* Keep the preserved product page compact and usable inside the new site shell. */
@media (max-width: 760px) {
  .product-page {
    overflow-x: clip;
  }

  .product-page .site-header {
    position: relative;
  }

  .product-page .header-inner {
    width: 100%;
    min-height: 72px;
    padding: 10px 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }

  .product-page .brand {
    width: 92px;
  }

  .product-page .nav {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 6px 0 2px;
    border-top: 1px solid var(--line);
  }

  .product-page .nav a {
    min-width: 0;
    padding: 9px 6px;
    font-size: 0.78rem;
    text-align: center;
    white-space: normal;
  }

  .product-page .theme-toggle {
    position: static;
    width: auto;
    min-width: 74px;
    justify-self: end;
  }

  .product-page .footer-grid {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .product-page .footer-legal-block,
  .product-page .footer-links-block {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .product-page .footer-links-block {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .product-page .nav a {
    font-size: 0.72rem;
  }
}