/* =============================================================================
   bb-info.css — N221 Mobile-UX, Paket CF (CMS, Rechts-/Info-Seiten, Kontakt, Sitemap, 404), 08.11.2026.
   Laedt NUR auf den Info-Seitentypen (PAGE_AGB 20, PAGE_DATENSCHUTZ 21, PAGE_WRB 27, PAGE_VERSAND 19, PAGE_EIGENE 31,
   PAGE_KONTAKT 5, PAGE_SITEMAP 25, PAGE_404 36, PAGE_ACCESSIBILITY 43) — Einbindung in layout/header.tpl direkt NACH
   bb-blocking.min.css wie bb-kasse.css (blockierend, filemtime-Cachebuster). Grund: das Buendel darf nicht wachsen
   (Welle 4, Grenze 29.697 B gzip); Kap. 8.8 (Sitemap + 404) ist dafuer aus bb-rasta.css hierher umgezogen.
   (A) = alle Breiten, unveraendert aus bb-rasta.css 8.8. (B) = nur das Mobil-Dokument (body.is-mobile, < 768 px);
   Desktop bleibt wie live. Wortlaut der Rechtstexte unberuehrt (nur Darstellung). Nur Rasta-Tokens (--bb-*).
   Ratgeber-Hubs (PAGE_EIGENE mit .bbr-*) gehoeren RL: Karten-/Typo-Regeln hier greifen nur in .well bzw. in
   .link-content ohne Hub-Bloecke.
   Rollback: die drei Zeilen {if}/<link>/{/if} in layout/header.tpl entfernen + 8.8 in bb-rasta.css zurueck (git) +
   Buendel neu bauen + templates_c/Sweet leeren.
   ============================================================================= */

/* ---------- (A) aus bb-rasta.css 8.8: Sitemap + 404 (Cards als Mono-Panels, Leerspalten weg, Recovery) ---------- */
#content .card.sitemap-group {
  background: var(--bb-surface); border: 1.5px solid var(--bb-line);
  border-radius: var(--bb-radius); overflow: hidden; margin-bottom: 20px;
}
#content .card.sitemap-group .card-header {
  background: none; border-bottom: 1.5px solid var(--bb-line);
  font-family: var(--bb-font-mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
#content .card.sitemap-group a { text-decoration: none; color: var(--bb-ink-2); }
#content .card.sitemap-group a:hover { color: var(--bb-g-action); }
#content .sitemap-wrapper-linkgroup [class*="col"]:has(> ul.nav:empty) { display: none; }
.bb-404 { max-width: 720px; margin: 8px auto 36px; text-align: center; }
.bb-404__title { display: inline-block; text-align: left; }
.bb-404__sub { color: var(--bb-ink-2); max-width: 52ch; margin: 0 auto 20px; }
.bb-404__search { display: flex; gap: 0; max-width: 460px; margin: 0 auto 14px; }
.bb-404__input {
  flex: 1; min-width: 0; border: 1.5px solid var(--bb-line); border-right: 0;
  border-radius: 999px 0 0 999px; padding: 12px 18px; background: var(--bb-surface);
  font-family: var(--bb-font-mono); font-size: 14px;
}
.bb-404__btn { border-radius: 0 999px 999px 0; }
.bb-404__home {
  font-family: var(--bb-font-mono); font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bb-ink); text-decoration: none;
  border-bottom: 2px solid var(--bb-y); padding-bottom: 2px;
}
.bb-404__home:hover { color: var(--bb-g-action); border-color: var(--bb-g-action); }
#page-not-found .alert-danger { max-width: 720px; margin-inline: auto; }

/* ---------- (A) Online-Widerrufsformular: H1 aus snippets/withdrawal_form.tpl (M-A2-20), Poster-Kopf wie Kap. 8.1 ---------- */
.bb-wrb-titel {
  font-weight: 800; font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.12;
  letter-spacing: -.01em; position: relative; padding-top: 16px; margin: 0 0 20px;
}
.bb-wrb-titel::before {
  content: ""; position: absolute; top: 0; left: 0; width: 46px; height: 6px;
  border-radius: 3px; background: var(--bb-stripe);
}

/* =============================================================================
   (B) Mobil-Dokument
   ============================================================================= */
@media (max-width: 767.98px) {
  /* --- M-A2-17 CMS-/Rechtstext-Karten flach: ohne Rahmen, Radius, Kartengrund; Textkante = Kante der H1 (Container-Rand) --- */
  body.is-mobile #content .well {
    background: none; border: 0; border-radius: 0; padding: 0; margin-bottom: var(--bb-s-8);
  }
  body.is-mobile:not(:has(#content .bbr-krume)) #content .container.link-content:not(:has(.bbr-welt, .bbr-block, .bbr-leiste)) {
    background: none; border: 0; border-radius: 0; padding-top: 0; padding-bottom: 0;
  }
  body.is-mobile #content .link-content .well { padding: 0; margin-bottom: var(--bb-s-6); }
  body.is-mobile #content .container.page-shipping { max-width: none; }

  /* --- M-A2-13 Lese-Token (TK: 17/1,6; H2 20, H3 18 Hanken 700; Ueberschriften brechen statt ueberzulaufen) --- */
  body.is-mobile #content .well :is(p, li, dd, td),
  body.is-mobile:not(:has(#content .bbr-krume)) #content .container.link-content:not(:has(.bbr-welt, .bbr-block, .bbr-leiste)) > :is(p, ul > li),
  body.is-mobile[data-page="43"] #content .custom_content :is(p, li) {
    font-size: var(--bb-fs-read); line-height: var(--bb-lh-read);
  }
  body.is-mobile #content .well,
  body.is-mobile[data-page="43"] #content .custom_content { overflow-wrap: break-word; }
  body.is-mobile #content .well h2,
  body.is-mobile[data-page="43"] #content .custom_content h2 {
    font: 700 var(--bb-read-h2)/var(--bb-lh-head) var(--bb-font-body); letter-spacing: var(--bb-track-0);
    text-transform: none; margin: 1.6em 0 .5em;
  }
  body.is-mobile #content .well h3,
  body.is-mobile[data-page="43"] #content .custom_content h3 {
    font: 700 var(--bb-read-h3)/var(--bb-lh-head) var(--bb-font-body); letter-spacing: var(--bb-track-0);
    text-transform: none; margin: 1.4em 0 .4em;
  }
  body.is-mobile:not(:has(#content .bbr-krume)) #content :is(h1, h2, h3) { overflow-wrap: anywhere; hyphens: auto; }

  /* --- M-A2-17 Fliesstext-Links in AGB/Datenschutz/Widerruf (.well) erkennbar: Gruen #15803d + Unterstrich wie N93 --- */
  body.is-mobile #content .well :is(p, li) a[href]:not(.btn),
  body.is-mobile[data-page="43"] #content .custom_content :is(p, li) a[href]:not(.btn) {
    color: #15803d; text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .18em;
  }

  /* --- M-A2-17/-23 FAQ als Zeilen (Kontakt, Hilfe, Zahlung): Haarlinie statt Karte, Kopf ganz antippbar 48 --- */
  body.is-mobile #content .portlet-faq .card {
    background: none; border: 0; border-bottom: var(--bb-hairline); border-radius: 0; margin: 0;
  }
  body.is-mobile #content .portlet-faq .card:first-child { border-top: var(--bb-hairline); }
  body.is-mobile #content .portlet-faq .card-header { padding: 0; font-size: var(--bb-fs-text); }
  body.is-mobile #content .portlet-faq .card-header > a,
  body.is-mobile #content .portlet-faq summary.card-header {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--bb-s-3);
    min-height: var(--bb-row); padding: var(--bb-s-3) var(--bb-s-8) var(--bb-s-3) 0; color: var(--bb-ink); text-decoration: none;
  }
  body.is-mobile #content .portlet-faq .card-header > a::after { right: 4px; } /* Remake-Chevron (absolut) an die Zeilenkante */
  body.is-mobile #content .portlet-faq summary.card-header { cursor: pointer; list-style: none; font-weight: 700; }
  body.is-mobile #content .portlet-faq summary.card-header::-webkit-details-marker { display: none; }
  body.is-mobile #content .portlet-faq .card-body { padding: 0 0 var(--bb-s-4); font-size: var(--bb-fs-text); line-height: var(--bb-lh-text); }

  /* --- M-A2-16 Hubs: die JTL-Krume entfaellt mobil, die Hub-Krume (.bbr-krume) traegt den Pfad --- */
  body.is-mobile:has(#content .bbr-krume) .breadcrumb-wrapper { display: none; }

  /* --- M-A2-23 Kontakt: Kanalzeile (Mail, Telefon, Zum Formular) unter der H1, Formular vor den FAQ --- */
  body.is-mobile .bb-kanal { display: flex; flex-wrap: wrap; gap: var(--bb-tap-gap); margin: 0 0 var(--bb-s-6); }
  body.is-mobile .bb-kanal .bb-btn { font-size: var(--bb-ctl-fs-s); padding-inline: var(--bb-s-4); }
  body.is-mobile .bb-kanal .bb-btn > .fas { font-size: 14px; } /* 14px: Piktogramm in der kleinen Bedienschrift */
  body.is-mobile .bb-kontakt__anker { scroll-margin-top: calc(var(--bb-hdr-h, var(--bb-bar-h)) + var(--bb-s-2)); }
  body.is-mobile[data-page="5"] h2.bb-kontakt__titel {
    font: 700 var(--bb-read-h2)/var(--bb-lh-head) var(--bb-font-body); letter-spacing: var(--bb-track-0);
    text-transform: none; margin: 0 0 var(--bb-s-3);
  }
  body.is-mobile .bb-kontakt__faq { margin-top: var(--bb-section); }
  /* sweet_crit setzt .container-fluid { padding: 1rem !important } — Ausgleich per Gegenrand statt eigenem !important */
  body.is-mobile[data-page="5"] .bb-kontakt__faq .opc-Container.container-fluid { margin-left: -1rem; margin-right: -1rem; width: auto; }
  body.is-mobile[data-page="5"] .contact-form a.popup,
  body.is-mobile[data-page="43"] .contact-form a.popup { display: inline-flex; align-items: center; min-height: var(--bb-tap); }

  /* --- M-A2-20 Online-Widerrufsformular: kein klebendes Formular; Belehrung und AGB als <details> darunter --- */
  body.is-mobile #online-revocation-form .sticky-top { position: static; }
  body.is-mobile #online-revocation-form .bb-wrb-titel { margin-top: var(--bb-s-2); }
  body.is-mobile .bb-recht { border-top: var(--bb-hairline); }
  body.is-mobile .bb-recht:last-of-type { border-bottom: var(--bb-hairline); }
  body.is-mobile .bb-recht__kopf {
    display: flex; align-items: center; justify-content: space-between; gap: var(--bb-s-3); min-height: var(--bb-row);
    padding: var(--bb-s-3) 0; cursor: pointer; list-style: none;
    font: 700 var(--bb-read-h3)/var(--bb-lh-head) var(--bb-font-body);
  }
  body.is-mobile .bb-recht__kopf::-webkit-details-marker { display: none; }
  body.is-mobile :is(.bb-recht__kopf, .bb-sitemap__kopf, #content .portlet-faq summary.card-header)::after {
    content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px; /* 10px: Chevron optisch */
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px);
  }
  body.is-mobile #content .portlet-faq summary.card-header::after { position: absolute; right: 4px; top: 50%; margin-top: -7px; }
  body.is-mobile :is(.bb-recht, .bb-sitemap, #content .portlet-faq .card)[open] > summary::after { transform: rotate(225deg) translateY(-3px); }
  body.is-mobile .bb-recht__text { padding-bottom: var(--bb-s-4); }

  /* --- M-A2-24 Sitemap mobil: Gruppen als <details> mit H2, Zeilen 44, Umbruch statt Abschneiden, Hersteller A-Z --- */
  body.is-mobile .bb-sitemap-mobil { padding-left: var(--bb-gutter-l); padding-right: var(--bb-gutter-r); }
  body.is-mobile .bb-sitemap { border-bottom: var(--bb-hairline); }
  body.is-mobile .bb-sitemap:first-child { border-top: var(--bb-hairline); }
  body.is-mobile .bb-sitemap__kopf {
    display: flex; align-items: center; justify-content: space-between; gap: var(--bb-s-3);
    min-height: var(--bb-ctl-l); cursor: pointer; list-style: none;
  }
  body.is-mobile .bb-sitemap__kopf::-webkit-details-marker { display: none; }
  body.is-mobile .bb-sitemap__titel, body.is-mobile .bb-sitemap__unter > summary h3 {
    margin: 0; font: 700 var(--bb-read-h2)/var(--bb-lh-head) var(--bb-font-body); letter-spacing: var(--bb-track-0); text-transform: none;
  }
  body.is-mobile .bb-sitemap__unter > summary h3 { font-size: var(--bb-read-h3); }
  body.is-mobile .bb-sitemap ul { list-style: none; margin: 0; padding: 0; }
  body.is-mobile .bb-sitemap ul ul { padding-left: var(--bb-s-4); }
  body.is-mobile .bb-sitemap__inhalt { padding-bottom: var(--bb-s-4); }
  body.is-mobile .bb-sitemap a {
    display: flex; align-items: center; min-height: var(--bb-tap); padding: 0; color: var(--bb-ink-2);
    text-decoration: none; overflow-wrap: anywhere;
  }
  body.is-mobile .bb-sitemap :is(.text-truncate, .nav-link) { white-space: normal; overflow: visible; text-overflow: clip; padding-left: 0; padding-right: 0; }
  body.is-mobile .bb-sitemap .nav-link::after, body.is-mobile .bb-sitemap .nice-deco::after { content: none; }
  body.is-mobile .bb-sitemap__buchstabe {
    margin: var(--bb-s-3) 0 0; font: 700 var(--bb-fs-12)/var(--bb-lh-ui) var(--bb-font-mono);
    letter-spacing: var(--bb-track-caps); color: var(--bb-ink-2);
  }
  body.is-mobile .bb-sitemap__marken { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--bb-s-4); }

  /* --- M-A2-25 404: Rand 16, Suche volle Breite, Auswege als 2er-Raster 44, Hinweis als Unterzeile --- */
  body.is-mobile[data-page="36"] #alert-list [data-key="pageNotFound"] { display: none; }
  body.is-mobile .bb-404 { margin: 0 0 var(--bb-s-8); padding: 0 var(--bb-gutter-r) 0 var(--bb-gutter-l); text-align: left; max-width: none; }
  body.is-mobile .bb-404__title { display: block; }
  body.is-mobile .bb-404__sub { margin: 0 0 var(--bb-s-4); max-width: none; font-size: var(--bb-fs-text); }
  body.is-mobile .bb-404__search { max-width: none; margin: 0 0 var(--bb-s-6); }
  body.is-mobile .bb-404__search > :not(.bb-404__btn) { flex: 1; min-width: 0; }
  body.is-mobile .bb-404__search .twitter-typeahead .bb-404__input { width: 100%; } /* Typeahead-Huelle (Core-JS) */
  body.is-mobile .bb-404__input { min-height: var(--bb-ctl-l); padding: 0 var(--bb-s-4); font-family: var(--bb-font-body); }
  body.is-mobile .bb-404__btn { min-height: var(--bb-ctl-l); }
  body.is-mobile .bb-404__wege { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bb-tap-gap); }
  body.is-mobile .bb-404__wege .bb-btn:first-child { grid-column: 1 / -1; }
}