/* Figma 003J public layout alignment. Business-state styles stay in the page CSS. */

.figma-screen {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  height: auto;
  align-items: center;
  overflow: visible;
}

.screen-header,
.screen-content,
.screen-footer {
  width: min(100%, 1440px);
}

.screen-content {
  height: auto;
  min-height: 981px;
  flex: 1 0 auto;
}

.screen-footer,
.footer-content,
.footer-right,
.footer-columns {
  height: auto;
  flex-basis: auto;
}

.screen-footer {
  min-height: 320px;
}

/* Gemeinsame 003J-Menükomponente, auch ohne Suchseiten-Stylesheet. */
.flow-menu {
  display: flex;
  gap: 10px;
  font-size: 24px;
  line-height: 1.1;
}

.flow-menu > * {
  flex-shrink: 0;
  white-space: nowrap;
}

.wordmark,
.flow-menu a,
.faq-list a,
.information a {
  text-decoration: none;
}

.wordmark:focus-visible,
.flow-menu a:focus-visible,
.figma-button:focus-visible,
.summary-more:focus-visible,
.success-action:focus-visible,
.faq-list a:focus-visible,
.information a:focus-visible,
.footer-logo-frame a:focus-visible,
.bv-square-link:focus-visible {
  outline: 2px solid var(--secondary-color);
  outline-offset: 4px;
}

.search-introduction {
  width: 100%;
  margin-bottom: 30px;
  color: var(--secondary-color);
  font-size: 24px;
  line-height: 1.1;
}

.search-introduction h1,
.search-introduction .search-introduction-heading {
  margin: 0 0 52px;
  font-size: inherit;
  font-weight: 900;
  line-height: inherit;
}

.search-introduction p {
  margin: 0;
}

.search-introduction p + p {
  margin-top: 26px;
}

.search-introduction-mobile-benefits {
  display: none;
}

.search-introduction-mobile-benefits + p {
  margin-top: 52px;
}

.search-panel > .flow-menu {
  width: 100%;
  height: 46px;
  flex: 0 0 46px;
  justify-content: flex-start;
  border-top: 1px solid var(--secondary-color);
  border-bottom: 1px solid var(--secondary-color);
}

.trust-content {
  gap: 26px;
}

.trust-content h1,
.trust-content .trust-heading,
.trust-content .strong {
  margin: 0;
}

.trust-details {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.trust-details p {
  min-height: 0;
}

.product-price-presentation {
  margin: 0;
}

.product-price-unit {
  display: block;
}

.faq-list {
  height: auto;
}

.faq-list a,
.faq-list span {
  height: auto;
  min-height: 26px;
}

.information-detail > .flow-menu {
  width: 100%;
  min-height: 38px;
  border-bottom: 1px solid var(--secondary-color);
  margin-bottom: 40px;
  justify-content: flex-start;
}

.information-detail {
  gap: 0;
}

/* Inhaltsseiten: reale Inhaltshöhe statt übernommener Figma-Framehöhen. */
.information-screen .information-content {
  min-height: 0;
  flex: 0 0 auto;
}

.information-screen .information-detail {
  min-height: 0;
}

/* Wie die Menükante: eine deckende CSS-Linie ohne SVG-Rasterung. */
.information-screen .footer-divider {
  border-top: 1px solid var(--secondary-color);
  transform: none;
}

.information-screen .data-origin {
  border-top-color: var(--secondary-color);
}

.information-copy > p:first-child {
  margin-bottom: 0;
}

.information-copy p + p,
.information-copy p + .article-heading,
.information-copy ul + .article-heading,
.information-copy .article-heading + p,
.information-copy .article-heading + ul {
  margin-top: 26px;
}

.information-copy p + .article-heading,
.information-copy ul + .article-heading {
  margin-top: 52px;
}

.information-copy a {
  overflow-wrap: anywhere;
}

.selection-screen .address-summary-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(24ch, 100%), 1fr));
  gap: 10px 20px;
}

.selection-screen.is-addresses-expanded .address-value {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (min-width: 1000px) {
  .price-presentation-screen .screen-content {
    position: relative;
  }

  .price-presentation-screen .trust-details {
    padding-top: 78.8px;
  }

  .price-presentation-screen .search-introduction .product-price-presentation {
    position: absolute;
    top: 154.8px;
    left: 30px;
    width: 380px;
    margin-top: 0;
  }

  /* Das Logo bleibt im Fluss und endet auch bei langen Artikeln vor dem Footer. */
  .information-screen .info-column {
    align-self: stretch;
  }

  .information-screen .faq-panel {
    height: auto;
    flex: 1 0 auto;
  }

  .information-screen .bv-square-link {
    flex-shrink: 0;
    margin-top: auto;
  }

  .information-screen .information-detail {
    padding-bottom: 50px;
  }

  /* Warenkorb: wie auf den Inhaltsseiten bleibt das B'-Logo vor der Trennlinie. */
  .cart-screen .info-column {
    align-self: stretch;
  }

  .cart-screen .faq-panel {
    height: auto;
    flex: 1 0 auto;
  }

  .cart-screen .bv-square-link {
    flex-shrink: 0;
    margin-top: auto;
  }

  /* Abschlussseite: dieselben 50 px Innenabstand plus 10 px Seitenabstand wie AGB. */
  .success-screen .success-intro {
    height: auto;
    align-self: stretch;
    padding-bottom: 50px;
  }

  .success-screen .success-bv-square {
    flex-shrink: 0;
    margin-top: 60px;
  }

  /* Home: FAQ und B'-Logo müssen den Footer im Dokumentfluss nach unten schieben. */
  .figma-screen[data-node-id="2001:76"] .faq-panel {
    height: auto;
    flex: 0 0 auto;
  }

  .screen-content {
    flex-direction: row;
  }

  .info-column {
    display: flex;
    width: 380px;
    max-width: 380px;
    flex: 0 0 380px;
  }

  .search-interaction,
  .results-interaction,
  .cadastre-results-interaction,
  .selection-interaction,
  .cart-interaction,
  .faq-detail,
  .success-interaction {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
  }

  .footer-logo-frame {
    width: 380px;
    flex-basis: 380px;
  }

  .footer-columns {
    gap: 40px;
  }
}

@media (min-width: 1000px) and (max-width: 1150px) {
  .footer-columns {
    gap: 20px;
  }

  .contact {
    min-width: 270px;
  }

  .contact > div {
    width: 100%;
  }

  .information {
    min-width: 180px;
  }
}

@media (max-width: 999px) {
  .product-price-unit {
    display: inline;
  }

  .search-introduction .search-introduction-heading {
    margin-bottom: 0;
  }

  .search-introduction .search-introduction-heading + p {
    margin-top: 0;
  }

  .figma-screen {
    gap: 10px;
    padding: 50px 10px 100px;
  }

  .screen-header {
    position: static;
    height: 119.568px;
    flex: 0 0 119.568px;
    align-items: flex-end;
    padding: 0 30px;
  }

  .wordmark {
    width: 296px;
    height: 110px;
    flex: 0 0 296px;
    font-size: 54.333px;
  }

  .zt-logo-frame {
    position: static;
    width: 165px;
    height: 95px;
    flex: 0 0 165px;
    align-items: flex-start;
    padding: 10px;
  }

  .zt-logo {
    width: 145px;
    height: 75px;
  }

  .screen-content {
    min-height: 0;
    flex-basis: auto;
    flex-direction: column;
    gap: 40px;
    padding: 0 30px 50px;
  }

  .screen-content > .info-column,
  .success-content > .success-intro {
    order: 2;
  }

  .screen-content > .search-interaction,
  .screen-content > .results-interaction,
  .screen-content > .cadastre-results-interaction,
  .screen-content > .selection-interaction,
  .screen-content > .cart-interaction,
  .screen-content > .faq-detail,
  .success-content > .success-interaction {
    order: 1;
  }

  .search-interaction,
  .results-interaction,
  .cadastre-results-interaction,
  .selection-interaction,
  .cart-interaction,
  .faq-detail,
  .success-intro,
  .success-interaction {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    flex-basis: auto;
    overflow: visible;
  }

  .search-panel,
  .selection-property,
  .cart-panel,
  .faq-detail,
  .success-interaction {
    padding-top: 50px;
  }

  .search-introduction-mobile-benefits {
    display: block;
  }

  .search-introduction-mobile-benefits {
    margin-top: 26px;
  }

  .info-column {
    display: block;
    width: 100%;
    max-width: none;
  }

  .info-column > .trust-panel {
    display: none;
  }

  /* Die einzige H1 der Sucheinstiege bleibt auch ohne mobile Trust-Karte sichtbar. */
  .heading-entry-screen .screen-content {
    position: relative;
  }

  .heading-entry-screen .info-column > .trust-panel,
  .heading-entry-screen .trust-content {
    display: contents;
  }

  .heading-entry-screen .trust-content > :not(.primary-page-heading) {
    display: none;
  }

  .heading-entry-screen .primary-page-heading {
    position: absolute;
    z-index: 1;
    top: 50px;
    right: 30px;
    left: 30px;
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.1;
  }

  .heading-entry-screen .search-panel {
    padding-top: 128px;
  }

  .faq-panel {
    display: flex;
    width: 100%;
    height: auto;
    flex: none;
    flex-flow: row wrap;
    gap: 80px;
    padding: 0;
  }

  .faq-panel .bv-square-link {
    order: -1;
  }

  .faq-panel .bv-square-link,
  .faq-panel .bv-square-link img {
    width: 175px;
    height: 165px;
  }

  .faq-list {
    width: min(100%, 380px);
  }

  .faq-list a,
  .faq-list span {
    width: 100%;
    white-space: normal;
  }

  .screen-footer {
    min-height: 0;
    gap: 40px;
    padding: 0 30px;
  }

  .footer-content {
    display: flex;
    flex-direction: column;
    gap: 50px;
    overflow: visible;
  }

  .footer-logo-frame {
    order: 2;
    width: 300px;
    flex: 0 0 auto;
  }

  .footer-logo-frame a,
  .footer-logo-frame img {
    width: 300px;
    height: auto;
    aspect-ratio: 408 / 114;
  }

  .footer-right {
    order: 1;
    width: 100%;
  }

  .footer-columns {
    flex-flow: row wrap;
    gap: 50px;
  }

  .contact {
    width: 320px;
    min-width: 320px;
    flex: 0 0 320px;
  }

  .information {
    width: 150px;
    min-width: 145px;
    flex: 1 1 145px;
  }

  .selection-map {
    width: 100%;
    height: auto;
    min-height: 0;
    flex-basis: auto;
    aspect-ratio: 566 / 428;
  }

  .selection-screen.is-addresses-expanded .address-summary-list {
    grid-template-columns: repeat(auto-fill, minmax(min(24ch, 100%), 1fr));
  }

  .cart-content,
  .success-content,
  .information-content {
    min-height: 0;
  }

  .success-intro {
    padding-top: 0;
  }
}

@media (max-width: 599px) {
  html,
  body {
    min-width: 320px;
    overflow-x: clip;
  }

  body {
    font-size: 20px;
  }

  .figma-screen {
    gap: 32px;
    padding: 28px 16px 64px;
  }

  .screen-header {
    height: 88px;
    flex-basis: 88px;
    align-items: flex-start;
    padding: 0;
  }

  .wordmark {
    width: auto;
    height: auto;
    min-width: 0;
    flex: 1 1 auto;
    font-size: clamp(30px, 9vw, 40px);
  }

  .wordmark-title {
    top: 5px;
  }

  .zt-logo-frame {
    width: clamp(92px, 27vw, 116px);
    height: auto;
    flex-basis: clamp(92px, 27vw, 116px);
    padding: 0;
  }

  .zt-logo {
    width: 100%;
    height: auto;
    aspect-ratio: 193.102 / 99.568;
  }

  .screen-content,
  .screen-footer {
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
  }

  .search-panel,
  .selection-property,
  .cart-panel,
  .faq-detail,
  .success-interaction {
    padding-top: 0;
  }

  .heading-entry-screen .primary-page-heading {
    top: 0;
    right: 0;
    left: 0;
  }

  .heading-entry-screen .search-panel {
    padding-top: 62px;
  }

  .search-introduction {
    font-size: 20px;
  }

  .flow-menu,
  .search-panel > .flow-menu,
  .information-detail > .flow-menu {
    width: 100%;
    height: auto;
    min-height: 38px;
    flex-basis: auto;
    flex-wrap: wrap;
    gap: 6px 10px;
    overflow: visible;
    white-space: normal;
    font-size: clamp(16px, 4.8vw, 20px);
  }

  .search-tabs {
    height: auto;
    flex-basis: auto;
    flex-wrap: wrap;
  }

  .figma-button {
    max-width: 100%;
    font-size: 20px;
    white-space: normal;
  }

  .figma-input {
    height: auto;
    min-height: 46px;
  }

  .figma-input input,
  .figma-input > button {
    font-size: 18px;
  }

  .autocomplete-field {
    flex-basis: auto;
  }

  .search-heading-row,
  .selection-heading,
  .product-heading,
  .results-heading,
  .cadastre-result-heading {
    height: auto;
    min-height: 46px;
    flex-basis: auto;
  }

  .search-heading-row h2,
  .search-heading-row .search-step-heading,
  .selection-heading h2,
  .selection-heading .selection-step-heading,
  .product-heading h2,
  .results-heading h2,
  .cadastre-result-heading {
    width: 100%;
    height: auto;
    white-space: normal;
    font-size: 20px;
  }

  .result-row,
  .cadastre-result-row {
    height: auto;
    min-height: 46px;
    font-size: 20px;
    white-space: normal;
  }

  .property-summary,
  .property-row {
    width: 100%;
    height: auto;
    min-height: 0;
    flex-basis: auto;
  }

  .property-row {
    grid-template-columns: 1fr;
  }

  .selection-screen .address-summary-list {
    grid-template-columns: 1fr;
  }

  .cadastre-result-action {
    height: auto;
  }

  .faq-panel {
    gap: 50px;
  }

  .faq-list,
  .faq-copy,
  .information-copy,
  .contact,
  .information,
  .contact > div {
    width: 100%;
    min-width: 0;
  }

  .faq-copy,
  .information-copy,
  .contact div,
  .information nav,
  .faq-list nav {
    font-size: 20px;
  }

  .footer-columns {
    flex-direction: column;
    gap: 50px;
  }

  .footer-logo-frame,
  .footer-logo-frame a,
  .footer-logo-frame img {
    width: min(300px, 100%);
  }

  .cart-item-header,
  .price-summary {
    min-width: 0;
  }
}