/* bentoboxer Karten – Gestaltung
   Schriften und Farben über Variablen anpassbar, z. B. im Theme:
   .bb-card { --bb-hand: "Ihre Handschrift", cursive; }
   Keine externen Schriften – passend zur DSGVO; Schriften später lokal oder über Adobe Fonts einbinden. */

.bb-card {
	--bb-ink: #1F2421;
	--bb-text: #3B3F3D;
	--bb-muted: #5F6662;
	--bb-line: #E3DFD6;
	--bb-soft: #F7F5F0;
	--bb-etikett: #3B3F3D;
	--bb-hand: "Caveat", "Bradley Hand", "Segoe Print", "Comic Neue", cursive;
	--bb-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	container-type: inline-size;
	color: var(--bb-ink);
	margin: 0 0 2.5rem;
}
.bb-card *, .bb-card *::before, .bb-card *::after { box-sizing: border-box; }
.bb-card button { font: inherit; color: inherit; }
.bb-card.bb-ready .bb-fallback { display: none; }

/* Kopf */
.bb-top { display: flex; justify-content: space-between; gap: 1rem; font: 500 0.75rem/1.4 var(--bb-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bb-muted); }
.bb-title { margin: 0.4rem 0 0; font-size: clamp(1.6rem, 4cqi, 2.2rem); line-height: 1.1; }
.bb-desc { margin: 0.5rem 0 0; max-width: 40em; color: var(--bb-text); line-height: 1.5; }
.bb-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 1rem 0 0; padding: 0.75rem 0; border-top: 1px solid var(--bb-ink); border-bottom: 1px solid var(--bb-line); }
.bb-facts div { margin: 0; }
.bb-hold { margin: 0; padding: 0.7rem 0; border-bottom: 1px solid var(--bb-line); font-size: 0.88rem; line-height: 1.5; color: var(--bb-text); }
.bb-hold strong { color: var(--bb-ink); }
.bb-facts dt { font: 500 0.66rem/1.3 var(--bb-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--bb-muted); }
.bb-facts dd { margin: 0.15rem 0 0; font-weight: 600; }

/* Reiter */
.bb-tabs { display: flex; gap: 0.25rem; margin: 1.25rem 0 0; border-bottom: 1px solid var(--bb-line); }
.bb-tab { border: 0; background: none; padding: 0.7rem 1rem; min-height: 44px; cursor: pointer; color: var(--bb-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
.bb-tab[aria-selected="true"] { color: var(--bb-ink); border-bottom-color: var(--bb-ink); }
.bb-tab:focus-visible, .bb-card button:focus-visible { outline: 2px solid var(--bb-ink); outline-offset: 2px; }

.bb-view { margin-top: 1.25rem; }
.bb-view[hidden] { display: none; }
.bb-view--box { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@container (min-width: 860px) {
	.bb-view--box { grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 2.5rem; align-items: start; }
}

/* Bühne mit Box */
.bb-stage-wrap { position: relative; width: 100%; overflow: hidden; }
.bb-stage { position: absolute; left: 0; top: 0; width: 720px; height: 560px; transform-origin: 0 0; }
.bb-box { position: absolute; border-radius: 34px; box-shadow: 0 18px 40px rgba(31, 36, 33, 0.18), inset 0 0 0 3px rgba(255, 255, 255, 0.14); }
.bb-fach { position: absolute; border: 0; padding: 0; margin: 0; border-radius: 10px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); transition: box-shadow 0.15s, filter 0.15s; }
.bb-fach:hover { filter: brightness(1.07); }
.bb-fach.is-on { box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px var(--bb-ink); }
.bb-fach--leer { cursor: default; background: rgba(255, 255, 255, 0.12); }
.bb-lbl { position: absolute; height: 32px; border: 0; background: none; padding: 0 10px; font-size: 15px; line-height: 32px; font-weight: 500; color: var(--bb-text); cursor: pointer; white-space: nowrap; }
.bb-lbl.is-on { background: var(--bb-etikett); color: #fff; font: 600 23px/32px var(--bb-hand); border-radius: 3px; }
.bb-line { position: absolute; height: 0; border-top: 1px solid #A3A8A4; pointer-events: none; }
.bb-line.is-on { border-top: 1.5px solid var(--bb-etikett); }
.bb-narrow .bb-lbl, .bb-narrow .bb-line { display: none; }

/* Seitenleiste */
.bb-panel { display: flex; flex-direction: column; gap: 1.25rem; }
.bb-rechner__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bb-rechner__title { font-weight: 600; }
.bb-stepper { display: flex; align-items: center; gap: 0.6rem; }
.bb-stepper__btn { width: 44px; height: 44px; border: 1px solid #D9D5CC; border-radius: 22px; background: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.bb-stepper__btn:hover { background: #F4F2ED; }
.bb-stepper__val { min-width: 1.6em; text-align: center; font: 500 1.1rem var(--bb-mono); }
.bb-list { display: flex; flex-direction: column; margin-top: 0.25rem; }
.bb-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; width: 100%; border: 0; border-bottom: 1px solid #EEEBE4; background: none; padding: 0.55rem 0; text-align: left; cursor: pointer; }
.bb-row.is-on { font-weight: 600; }
.bb-mono { font-family: var(--bb-mono); }
.bb-muted { color: var(--bb-muted); }
.bb-small { font-size: 0.8rem; color: var(--bb-muted); }
.bb-detail { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem 1rem; background: var(--bb-soft); border-radius: 6px; }
.bb-detail__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.bb-detail__text { margin: 0; line-height: 1.5; color: var(--bb-text); font-size: 0.95rem; }
.bb-etikett { display: inline-block; background: var(--bb-etikett); color: #fff; font: 600 1.4rem/1.35 var(--bb-hand); padding: 0 0.6rem; border-radius: 3px; }
.bb-etikett--klein { font-size: 1.15rem; }
.bb-chip { align-self: flex-start; font-size: 0.78rem; font-weight: 500; padding: 0.2rem 0.65rem; border: 1px solid #CFCAC0; border-radius: 999px; color: var(--bb-text); }
.bb-chip[hidden] { display: none; }
.bb-label { font: 500 0.66rem/1.3 var(--bb-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--bb-muted); margin-bottom: 0.4rem; }
.bb-nut__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; }
.bb-nut__grid strong { display: block; font-size: 0.95rem; }
.bb-nut__grid span { display: block; font-size: 0.72rem; color: var(--bb-muted); }
.bb-note { margin: 0; font-size: 0.78rem; line-height: 1.45; color: var(--bb-muted); }

/* Ablauf-Tabelle */
.bb-view--ablauf { display: flex; flex-direction: column; gap: 1rem; }
.bb-view--ablauf .bb-rechner__head { justify-content: flex-start; gap: 1.25rem; }
.bb-ablauf { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bb-agrid { display: grid; min-width: 640px; border-top: 1.5px solid var(--bb-ink); border-left: 1px solid var(--bb-line); }
.bb-a { border-right: 1px solid var(--bb-line); border-bottom: 1px solid var(--bb-line); padding: 0.5rem 0.7rem; font-size: 0.92rem; line-height: 1.35; }
.bb-a--vor { text-align: center; background: var(--bb-soft); font-weight: 500; }
.bb-a--zutat { transition: background 0.15s; }
.bb-a--zutat.bb-hl { background: #F1EDE3; }
.bb-a__q { font-family: var(--bb-mono); font-size: 0.85rem; white-space: nowrap; }
.bb-a--schritt { display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 500; cursor: default; }
.bb-a--schritt:hover { background: #FAF8F3; }
.bb-a--portion { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.3rem; border-top: 0; border-left: 0; background: var(--bb-soft); text-align: left; cursor: pointer; font: inherit; }
.bb-a--portion:hover { background: #F1EDE3; }
.bb-a__info { font-size: 0.75rem; color: var(--bb-muted); }

@container (max-width: 520px) {
	.bb-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bb-nut__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media print {
	.bb-tabs, .bb-stepper { display: none; }
	.bb-view[hidden] { display: block; }
	.bb-card { break-inside: avoid; }
}

/* Wochenplan */
.bb-view--woche { display: flex; flex-direction: column; gap: 1rem; }
.bb-woche__lead { margin: 0; color: var(--bb-text); }
.bb-woche { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bb-wgrid { display: grid; min-width: 620px; border-top: 1.5px solid var(--bb-ink); border-left: 1px solid var(--bb-line); }
.bb-w { border-right: 1px solid var(--bb-line); border-bottom: 1px solid var(--bb-line); padding: 0.55rem 0.7rem; font-size: 0.88rem; line-height: 1.35; }
.bb-w--head { font: 500 0.66rem/1.3 var(--bb-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--bb-muted); display: flex; align-items: center; }
.bb-w--fach { font-weight: 600; }
.bb-w--koch { color: var(--bb-text); }
.bb-w--kuehl { color: var(--bb-muted); }
.bb-w--tk { background: #E8EEF2; color: #2B4A5E; font-weight: 500; }
.bb-w--frisch { background: #F5EADB; color: #6B4320; font-weight: 500; }
.bb-woche__tips { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.92rem; line-height: 1.5; }
.bb-woche__tips strong { margin-right: 0.25rem; }