/* Seitenaufteilung bathebear.com – nur Layout. Alle Werte aus /design/tokens.css, Komponenten aus /design/bb.css. */
.seite { width: min(1120px, 100% - 2 * var(--bb-abstand-3)); margin-inline: auto; }
.sektion { padding-block: var(--bb-abstand-5); }
.sektion--flaeche { background: var(--bb-flaeche); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--bb-abstand-2); top: var(--bb-abstand-2); z-index: 10; background: var(--bb-papier); padding: 8px 12px; }
.kopf-leiste { border-bottom: 1px solid var(--bb-linie); }
.kopf-leiste .bb-kopf { flex-wrap: wrap; }
.kopf-rechts { display: flex; align-items: center; gap: var(--bb-abstand-3); flex-wrap: wrap; }
.sprache { font-weight: 700; color: var(--bb-tinte); }
.hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--bb-abstand-4); align-items: center; }
.hero .bb-laecheln--bild img { aspect-ratio: 3 / 4; }
.lead { font-size: var(--bb-groesse-3); line-height: 1.45; color: var(--bb-text-2); max-width: 38em; }
.aktionen { display: flex; gap: var(--bb-abstand-2); align-items: center; flex-wrap: wrap; margin-top: var(--bb-abstand-3); }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bb-abstand-4); align-items: center; }
.figuren { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: var(--bb-abstand-4) var(--bb-abstand-3); margin-top: var(--bb-abstand-4); }
.figuren figure { margin: 0; }
.figuren .bb-laecheln--bild img { aspect-ratio: 3 / 4; }
.figuren figcaption { padding-top: var(--bb-abstand-2); }
.figuren figcaption strong { display: block; font: 600 1.2rem/1.2 var(--bb-schrift-display); }
.figuren figcaption span { color: var(--bb-text-2); font-size: 0.98rem; }
.geschichten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--bb-abstand-4) var(--bb-abstand-3); margin-top: var(--bb-abstand-4); }
.geschichten article .bb-laecheln__unter p { margin: 0 0 6px; }
.brief { max-width: 40rem; }
.stapel > * + * { margin-top: var(--bb-abstand-2); }
.auswahl { display: flex; gap: 12px; align-items: flex-start; }
.auswahl input { width: 24px; height: 24px; margin-top: 2px; flex: none; accent-color: var(--bb-signal); }
.fragen { max-width: 46rem; }
.fragen details { border-bottom: 1px solid var(--bb-linie); padding-block: var(--bb-abstand-2); }
.fragen summary { cursor: pointer; font: 600 var(--bb-groesse-3)/1.3 var(--bb-schrift-display); min-height: var(--bb-touch); display: flex; align-items: center; }
.fuss-inhalt { display: grid; gap: var(--bb-abstand-2); }
.fuss-inhalt img { height: 64px; width: auto; }
.fuss-links { display: flex; gap: var(--bb-abstand-3); list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.text { max-width: 46rem; }
.text h2 { font: 600 var(--bb-groesse-3)/1.25 var(--bb-schrift-display); margin: var(--bb-abstand-4) 0 var(--bb-abstand-1); }
@media (max-width: 860px) { .hero, .zwei { grid-template-columns: 1fr; } .sektion { padding-block: var(--bb-abstand-4); } }