/**
 * @file
 * Usability-Korrekturen (Audit 26.10.2026, Paket 1).
 */

/* Bootstrap-Zeilen aus Layout Builder und dem Editor-Grid (bs_grid) stehen
   oft ohne eigenen Container. Ihre negativen Ränder ragten auf dem Handy
   über den Bildschirm, die ganze Seite ließ sich seitlich verschieben. */
@media (max-width: 991.98px) {
  .layout-builder__layout.row,
  .bs_grid > .row,
  .cklb-products.row,
  .row.my-4.text-center {
    margin-left: 0;
    margin-right: 0;
  }
  /* Bilder und Knöpfe aus Editor-Texten mit fester Breite. */
  main img {
    max-width: 100%;
    height: auto;
  }
  main .btn {
    white-space: normal;
    max-width: 100%;
  }
  /* Chat-Widget ist eingeklappt 400 px breit. */
  .chat-element {
    max-width: calc(100vw - 32px);
  }
  /* Sicherheitsnetz: nichts darf die Seite seitlich verschiebbar machen.
     clip statt hidden, damit position: sticky weiter funktioniert. */
  html,
  body {
    overflow-x: clip;
  }
}

/* Kategorie-Symbole der Startseite: kein Umbruch mitten im Wort
   ("Gartenzu-behör"). Getrennt werden nur lange Wörter ab 10 Zeichen,
   auf dem Handy mit etwas kleinerer Schrift. */
/* Gleiche Spezifität wie die bestehende Regel mit 1rem !important. */
.navigation-icons .col.col-md.col-xxl p {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}
@media (max-width: 575.98px) {
  .navigation-icons .col.col-md.col-xxl p {
    font-size: 0.8rem !important;
    line-height: 1.25;
  }
}

/* Der Schließen-Link des Mini-Warenkorbs landet beim Parsen im
   Warenkorb-Knopf und lag dort als "x" über "24 Elemente". */
.cart-block--summary .cart-block--link__expand.position-absolute,
.cart--cart-block > .cart-block--link__expand.position-absolute {
  display: none;
}

/* Warenkorb: "Zur Kasse" ist der Hauptknopf, "Aktualisieren" tritt zurück. */
.view-commerce-cart-form [data-drupal-selector="edit-submit"] {
  background: transparent;
  color: var(--bs-body-color, #212529);
  border: 1px solid currentColor;
  box-shadow: none;
}

/* Warenkorb auf dem Handy: Karten statt sechsspaltiger Tabelle, die bisher
   366 px breiter war als der Bildschirm. */
@media (max-width: 767.98px) {
  .view-commerce-cart-form table.cols-6 thead {
    display: none;
  }
  .view-commerce-cart-form table.cols-6,
  .view-commerce-cart-form table.cols-6 tbody {
    display: block;
    width: 100%;
  }
  .view-commerce-cart-form table.cols-6 tr {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas:
      "bild titel entfernen"
      "bild einzel einzel"
      "bild menge summe";
    gap: 6px 12px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  }
  .view-commerce-cart-form table.cols-6 td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
  }
  .view-commerce-cart-form td.views-field-images {
    grid-area: bild;
    align-self: start;
  }
  .view-commerce-cart-form td.views-field-images img {
    width: 64px;
    height: auto;
  }
  .view-commerce-cart-form td.views-field-nothing {
    grid-area: titel;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .view-commerce-cart-form td.views-field-remove-button {
    grid-area: entfernen;
    align-self: start;
  }
  .view-commerce-cart-form td.views-field-unit-price__number {
    grid-area: einzel;
    font-size: 0.9em;
    color: var(--bs-secondary-color, #6c757d);
  }
  .view-commerce-cart-form td.views-field-unit-price__number::before {
    content: "Einzelpreis ";
  }
  .view-commerce-cart-form td.views-field-edit-quantity {
    grid-area: menge;
  }
  .view-commerce-cart-form td.views-field-edit-quantity input {
    max-width: 6em;
  }
  .view-commerce-cart-form td.views-field-total-price__number {
    grid-area: summe;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
  }
}

/* Liverechner auf der Produktseite. */
.rr-plz {
  display: grid;
  gap: 4px;
  max-width: 22rem;
}
.rr-plz__label {
  font-weight: 700;
}
.rr-plz__input {
  max-width: 9rem;
  font-variant-numeric: tabular-nums;
}
.rr-plz__hint {
  font-size: 0.9em;
  color: var(--bs-secondary-color, #6c757d);
}
.rr-price-note {
  font-size: 12px;
  font-weight: 400;
}
.rr-price-sqm {
  font-size: 16px;
  color: #4f7a12;
}
.rr-summary__title {
  font-weight: 700;
  margin-bottom: 6px;
}
.rr-summary__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  margin: 0;
}
.rr-summary__list dt {
  font-weight: 400;
}
.rr-summary__list dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rr-summary__list .rr-summary__total {
  font-weight: 700;
  font-size: 1.15em;
  color: #e85e13;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
  padding-top: 6px;
  margin-top: 4px;
}
.rr-summary__warning {
  color: #a33;
  margin: 8px 0 0;
}
.rr-summary__note {
  font-size: 0.9em;
  color: var(--bs-secondary-color, #6c757d);
  margin: 8px 0 0;
}
.rr-summary [hidden] {
  display: none !important;
}

/* Checkout: Hinweis bei nicht belieferten Postleitzahlen. */
.rr-plz-hinweis {
  color: #a33;
  font-size: 0.9em;
  margin-top: 4px;
}

/* Mengenstaffel unter der Aufstellung (Paket 2). */
.rr-tiers {
  margin-top: 16px;
}
.rr-tiers__table {
  width: 100%;
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
  border-collapse: collapse;
}
.rr-tiers__table td {
  padding: 3px 6px;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.rr-tiers__table td:last-child {
  text-align: right;
}
.rr-tiers__row--active td {
  font-weight: 700;
  background: rgba(103, 152, 0, 0.12);
}

/* Lieferkosten-Vorschau im Warenkorb (Paket 2). */
.rr-cart-shipping {
  display: grid;
  gap: 6px;
  max-width: 24rem;
  margin: 16px 0 0 auto;
  text-align: left;
}
.rr-cart-shipping [hidden] {
  display: none !important;
}

/* Hinweis ab der Höchstmenge (über 500 m²): persönliche Beratung. */
.rr-grossmenge {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 4px solid #e85e13;
  background: rgba(232, 94, 19, 0.08);
  display: grid;
  gap: 4px;
}
.rr-grossmenge[hidden] {
  display: none;
}
.rr-grossmenge__kontakt a {
  font-weight: 700;
  white-space: nowrap;
}

/* Mini-Warenkorb auf dem Handy: volle Breite statt 35vw (Asset Injector
   belgrade_global), sonst rechts aus dem Bild und abgeschnitten. */
@media (max-width: 767.98px) {
  #block-rollrasenshop-warenkorb .cart-block--contents {
    position: fixed;
    top: 72px;
    left: max(16px, env(safe-area-inset-left, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    width: auto !important;
    max-height: 75vh !important;
    overflow-y: auto;
  }
}

/* Rasen-Berater auf der Startseite (Paket 3). */
.rr-berater {
  display: grid;
  gap: 20px;
  margin: 16px 0 24px;
  padding: 16px 24px;
  background: #f4f8ec;
  border: 1px solid #dbe7c6;
  border-radius: 16px;
}
.rr-berater--open {
  padding-block: 24px;
}
/* Eingeklappt: eine Leiste mit Frage und Button. */
.rr-berater__intro {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
}
.rr-berater__title {
  margin: 0 0 2px;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 700;
  color: #2f4a0a;
}
.rr-berater__lead {
  margin: 0;
  max-width: 60ch;
}
.rr-berater__toggle {
  flex: none;
}
.rr-berater__panel {
  display: grid;
  gap: 20px;
}
.rr-berater__form {
  display: grid;
  gap: 18px;
}
.rr-berater__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.rr-berater__field {
  display: grid;
  gap: 4px;
  align-content: start;
}
.rr-berater__field > label,
.rr-berater__usages legend {
  font-weight: 700;
}
.rr-berater__field input {
  max-width: 14rem;
  font-variant-numeric: tabular-nums;
}
.rr-berater__fieldhint {
  font-size: 0.9em;
  color: var(--bs-secondary-color, #6c757d);
}
.rr-berater__helper {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: #4f7a12;
  text-decoration: underline;
  font-size: 0.9em;
}
.rr-berater__masse {
  display: flex;
  gap: 8px;
  align-items: center;
}
.rr-berater__masse[hidden] {
  display: none;
}
.rr-berater__masse input {
  max-width: 7rem;
}
.rr-berater__usages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}
.rr-berater__usages legend {
  grid-column: 1 / -1;
  margin-bottom: 8px;
  font-size: 1rem;
}
.rr-berater__usage {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  background: #fff;
  border: 2px solid #dbe7c6;
  border-radius: 10px;
  cursor: pointer;
}
.rr-berater__usage input {
  position: absolute;
  opacity: 0;
}
.rr-berater__usage:has(input:checked) {
  border-color: #679800;
  box-shadow: 0 0 0 3px rgba(103, 152, 0, 0.18);
}
.rr-berater__usage:has(input:focus-visible) {
  outline: 2px solid #2f4a0a;
  outline-offset: 2px;
}
.rr-berater__usage-label {
  font-weight: 700;
}
.rr-berater__usage-hint {
  font-size: 0.85em;
  color: var(--bs-secondary-color, #6c757d);
}
.rr-berater__result {
  display: grid;
  gap: 16px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
}
.rr-berater__result[hidden],
.rr-berater [hidden] {
  display: none !important;
}
.rr-berater__product {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.rr-berater__image {
  flex: none;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
}
.rr-berater__eyebrow {
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #679800;
}
.rr-berater__product-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: inherit;
}
.rr-berater__reason {
  margin: 4px 0 0;
}
.rr-berater__alternative {
  margin: 6px 0 0;
  font-size: 0.9em;
}
.rr-berater__lines {
  max-width: 30rem;
}
.rr-berater__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
}
.rr-berater__cart[disabled] {
  opacity: 0.5;
}
.rr-berater__error {
  color: #a33;
  margin: 0;
}
@media (max-width: 575.98px) {
  .rr-berater {
    margin: 16px 0;
    padding: 14px 16px;
    border-radius: 12px;
  }
  .rr-berater__toggle {
    width: 100%;
  }
  .rr-berater__image {
    width: 72px;
    height: 72px;
  }
  .rr-berater__usages {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .rr-berater__usage {
    padding: 10px;
  }
  .rr-berater__usage-label {
    font-size: 0.95em;
  }
  .rr-berater__usage-hint {
    font-size: 0.78em;
  }
  .rr-berater__result {
    padding: 16px 12px;
  }
}
/* Aufgeklappt tritt "Berater schließen" zurück, Hauptknopf bleibt
   "Alles in den Warenkorb". */
.rr-berater--open .rr-berater__toggle {
  background: transparent;
  color: #2f4a0a;
  border: 1px solid currentColor;
  box-shadow: none;
}

/* Checkout: "Bearbeiten" der Adresse tritt hinter "Bestellung prüfen"
   zurück. */
/* !important gegen die globale Button-Farbe aus dem Asset Injector. */
[data-drupal-selector$="-profile-edit-button"] {
  background: transparent !important;
  color: var(--bs-body-color, #212529) !important;
  border: 1px solid currentColor !important;
  box-shadow: none;
  padding: 4px 14px;
  font-size: 0.9em;
  text-transform: none;
}

/* Obere Zeile bleibt beim Scrollen stehen (Telefon, Suche, Warenkorb).
   position-relative ist eine Bootstrap-Utility mit !important. */
.region-top-bar {
  position: sticky !important;
  top: var(--drupal-displace-offset-top, 0px);
  z-index: 1020;
}

/* Produktsuche in der oberen Zeile. */
.rr-suche {
  position: relative;
  margin: 0 12px;
}
.rr-suche__form {
  position: relative;
  display: flex;
  align-items: center;
}
.rr-suche__input {
  width: 16rem;
  max-width: 100%;
  padding: 6px 36px 6px 12px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: #212529;
  font-size: 0.95rem;
}
.rr-suche__input:focus {
  outline: 2px solid #9cc95a;
  outline-offset: 1px;
}
.rr-suche__submit {
  position: absolute;
  right: 4px;
  padding: 4px 8px;
  border: 0;
  background: none;
  color: #4f7a12;
}
.rr-suche__open {
  display: none;
  padding: 6px;
  border: 0;
  background: none;
  color: inherit;
}
.rr-suche__liste {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1030;
  width: min(26rem, calc(100vw - 32px));
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  color: #212529;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.rr-suche__liste[hidden] {
  display: none;
}
.rr-suche__treffer,
.rr-suche__alle {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  color: inherit !important;
  text-decoration: none;
  opacity: 1 !important;
}
.rr-suche__treffer img {
  flex: none;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 4px;
}
.rr-suche__text {
  display: grid;
  min-width: 0;
}
.rr-suche__titel {
  font-weight: 600;
  line-height: 1.25;
}
.rr-suche__preis {
  font-size: 0.85em;
  color: #4f7a12;
}
.rr-suche__alle {
  justify-content: center;
  font-weight: 600;
  color: #4f7a12 !important;
}
.rr-suche__liste .is-active a,
.rr-suche__liste a:hover {
  background: #f1f6e7;
}
.rr-suche__leer {
  padding: 8px;
  font-size: 0.9em;
}
@media (max-width: 767.98px) {
  .rr-suche {
    position: static;
    margin: 0 4px;
  }
  .rr-suche__open {
    display: block;
  }
  .rr-suche__form {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--rr-topbar-bottom, 64px);
    padding: 8px max(16px, env(safe-area-inset-left, 0px));
    background: #1f2b17;
  }
  .rr-suche--offen .rr-suche__form {
    display: flex;
  }
  .rr-suche__input {
    width: 100%;
  }
  .rr-suche__submit {
    right: calc(max(16px, env(safe-area-inset-left, 0px)) + 4px);
  }
  .rr-suche__liste {
    left: 16px;
    right: 16px;
    width: auto;
  }
}
/* Die obere Zeile setzt weiße Schrift (text-white, opacify-links); in der
   Vorschlagsliste wieder dunkel. */
.region-top-bar .rr-suche__liste,
.region-top-bar .rr-suche__liste .rr-suche__titel,
.region-top-bar .rr-suche__liste .rr-suche__leer {
  color: #212529 !important;
}
.region-top-bar .rr-suche__liste .rr-suche__preis,
.region-top-bar .rr-suche__liste .rr-suche__alle {
  color: #4f7a12 !important;
}

/* Checkout Schritt 1: Gastbestellung oben, Anmelden/Registrieren
   zugeklappt darunter, eine Spalte. Commerce floatet die Optionen ab 780 px
   nebeneinander (commerce_checkout.layout.css); zwischen Bereich und
   Optionen steckt ein Wrapper-div des Themes. */
.rr-login {
  max-width: 40rem;
  margin: 0 auto;
}
.rr-login > .checkout-pane {
  display: grid;
  gap: 16px;
}
.rr-login .form-wrapper__login-option {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}
.rr-login .rr-login__gast {
  padding: 20px;
  background: #f4f8ec;
  border: 1px solid #dbe7c6;
  border-radius: 12px;
}
.rr-login .rr-login__gast input.button {
  width: 100%;
}
.rr-login details.form-wrapper__login-option {
  padding: 0 16px;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 10px;
}
.rr-login details.form-wrapper__login-option > summary {
  padding: 12px 0;
  font-weight: 600;
  cursor: pointer;
}
.rr-login details.form-wrapper__login-option[open] {
  padding-bottom: 16px;
}

/* Kaufen-Leiste am unteren Rand, nur auf dem Handy (Paket 4). */
.rr-kaufleiste {
  display: none;
}
@media (max-width: 767.98px) {
  .rr-kaufleiste {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1025;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: #fff;
    border-top: 1px solid #dbe7c6;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
  }
  .rr-kaufleiste[hidden] {
    display: none;
  }
  .rr-kaufleiste__label {
    font-size: 0.85em;
    color: var(--bs-secondary-color, #6c757d);
  }
  .rr-kaufleiste__betrag {
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
  }
  .rr-kaufleiste__button {
    flex: none;
  }
  .rr-kaufleiste__button[disabled] {
    opacity: 0.5;
  }
  /* Platz schaffen, damit die Leiste nichts verdeckt. */
  body.rr-kaufleiste-aktiv {
    padding-bottom: 72px;
  }
}

/* Obere Zeile: Mit dem Suchfeld wurde es unter 1400 px eng, "Anmelden"
   rutschte in eine zweite, verdeckte Zeile. Dort den Werbe-Link
   ausblenden, die übrigen Links bleiben einzeilig. */
@media (min-width: 768px) {
  .region-top-bar .menu--account .nav {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}
@media (min-width: 768px) and (max-width: 1399.98px) {
  .region-top-bar .menu--account .nav-item:first-child {
    display: none;
  }
}