/* nutrition-fit Gestaltungssystem (Paket U4, Schritt 1)
   Verbindlich beschrieben in docs/DESIGN_SYSTEM.md. Wird NACH allen anderen
   Stylesheets geladen und bildet die Bootstrap- und Eigenklassen auf ein
   System ab. Vorbild: Kochbuch (K01) und Anmeldeseiten (K02).
   Reihenfolge: 1 Tokens, 2 Typo, 3 Knoepfe, 4 Karten, 5 Formulare,
   6 Chips, 7 Meldungen, 8 Etiketten, 9 leerer Zustand, 10 Seitenkopf,
   11 Bereiche (Woche, Katalog, Heute, Schaetzen, Mehr), 12 Normalisierung. */

/* 1 Tokens */
:root{
  --ink:#202c28; --muted:#526559; --accent:#315e4b; --accent-deep:#244638; --accent-press:#1c3a2e;
  --accent-soft:#e8f0e8; --surface:#fff; --canvas:#f6f7f2; --line:#e5eae2; --line-strong:#7d927f;
  --ok:#1f5a38; --ok-bg:#edf6ee; --ok-line:#4d8b66;
  --info:#26455c; --info-bg:#eef3f7; --info-line:#4f7088;
  --warn:#6b4a00; --warn-bg:#fff6e0; --warn-line:#a8761a;
  --danger:#7d2f27; --danger-bg:#fcf3f0; --danger-line:#9b4a40;
  --neutral-bg:#eef1ec; --neutral-fg:#3f4f45; --skipped-bg:#f1ece6; --skipped-fg:#5e4d38;
  --fs-h1:1.75rem; --fs-h2:1.25rem; --fs-h3:1rem; --fs-body:1rem; --fs-small:.875rem; --fs-micro:.75rem;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --radius-s:8px; --radius-l:16px; --radius-pill:999px;
  --shadow-1:0 1px 3px #263c3014; --shadow-2:0 8px 28px #20302a2e;
  --h-sm:36px; --h-md:44px; --h-lg:52px; --sidebar-w:272px;
  /* alte Token-Namen laufen auf das System */
  --product-ink:var(--ink); --product-muted:var(--muted); --product-faint:var(--muted);
  --product-line:var(--line); --product-green:var(--accent); --product-soft:var(--accent-soft);
  --product-radius:var(--radius-l); --product-canvas:var(--canvas);
  --cb-ink:var(--ink); --cb-muted:var(--muted); --cb-kicker:var(--muted); --cb-radius:var(--radius-l);
  --muted-text:var(--muted);
}
@media(max-width:760px){:root{--fs-h1:1.5rem;--fs-h2:1.125rem}}
body.product-body{color:var(--ink);font-size:var(--fs-body);line-height:1.5}
body.product-body .text-muted,body.product-body .text-secondary{color:var(--muted)!important}
body.product-body .text-success{color:var(--ok)!important}
body.product-body .text-danger{color:var(--danger)!important}
body.product-body .text-warning{color:var(--warn)!important}
body.product-body .text-primary{color:var(--accent)!important}
body.product-body .text-muted .bi[class*="text-"],body.product-body .small .bi[class*="text-"]{color:var(--muted)!important}

/* 2 Typografie: H1 Seitentitel, H2 Abschnitt, H3 Karten-/Gruppentitel */
body.product-body h1:not(.welcome-copy h1),body.product-body h1[class]:not(.welcome-copy h1),body.product-body .page-title{
  font-size:var(--fs-h1)!important;font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin-top:0}
body.product-body h2,body.product-body .h2,body.product-body .h1{
  font-size:var(--fs-h2);font-weight:700;line-height:1.3;letter-spacing:0;color:var(--ink)}
body.product-body h3,body.product-body h4,body.product-body h5,body.product-body h6,
body.product-body .h3,body.product-body .h4,body.product-body .h5,body.product-body .h6,
body.product-body .card-title,body.product-body .product-card-heading h2,
body.product-body .product-card-heading h3{
  font-size:var(--fs-h3);font-weight:700;line-height:1.3;letter-spacing:0;color:var(--ink)}
body.product-body .page-kicker,body.product-body .eyebrow,body.product-body .product-nav-label{
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-1)}

/* 3 Knoepfe: 3 Groessen (sm 36, md 44, lg 52) x 2 Stile (primaer, umrandet),
   dazu Textlink, Icon-Knopf (44x44) und Gefahr nur umrandet. */
body.product-body .btn,body.product-body .button,body.product-body .button-small{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--h-md)!important;height:auto;padding:var(--sp-2) var(--sp-4)!important;
  font-size:var(--fs-body)!important;font-weight:600;line-height:1.25;text-align:center;text-decoration:none;
  border:1px solid transparent;border-radius:var(--radius-s)!important;box-shadow:none;transform:none;
  transition:background-color .15s,border-color .15s,color .15s;cursor:pointer;white-space:normal}
body.product-body .btn-sm,body.product-body .btn-group-sm>.btn,body.product-body .button-small{
  min-height:var(--h-sm)!important;padding:var(--sp-1) var(--sp-3)!important;font-size:var(--fs-small)!important;min-width:var(--h-sm)}
body.product-body .btn-lg{min-height:var(--h-lg)!important;padding:var(--sp-3) var(--sp-6)!important}
@media(max-width:760px){body.product-body .btn-sm,body.product-body .btn-group-sm>.btn,body.product-body .button-small{min-height:var(--h-md)!important;min-width:var(--h-md)}}
/* primaer: gefuellt */
body.product-body .btn-primary,body.product-body .button{
  background:var(--accent);border-color:var(--accent);color:#fff;--bs-btn-bg:var(--accent);--bs-btn-border-color:var(--accent)}
body.product-body .btn-primary:hover,
body.product-body .button:hover,
body.product-body .btn-primary:focus-visible{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
body.product-body .btn-primary:active{background:var(--accent-press);border-color:var(--accent-press);color:#fff}
/* sekundaer: umrandet */
body.product-body .btn-outline-primary,
body.product-body .btn-outline-secondary,
body.product-body .button-outline-primary,
body.product-body .button-small{
  background:var(--surface);border-color:var(--line-strong);color:var(--accent)}
body.product-body .btn-outline-primary:hover,
body.product-body .btn-outline-secondary:hover,
body.product-body .button-outline-primary:hover,
body.product-body .button-small:hover,
body.product-body .btn-outline-primary:focus-visible,
body.product-body .btn-outline-secondary:focus-visible{
  background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
body.product-body .btn-outline-primary:active,body.product-body .btn-outline-secondary:active,body.product-body .btn-check:checked+.btn,
body.product-body .btn.active,body.product-body .btn-outline-primary.active{background:var(--accent);border-color:var(--accent);color:#fff}
/* Gefahr: nur umrandet, nur in Bestaetigungs- und Bearbeiten-Kontexten */
body.product-body .btn-outline-danger,body.product-body .btn-danger{background:var(--surface);border-color:var(--danger-line);color:var(--danger)}
body.product-body .btn-outline-danger:hover,body.product-body .btn-danger:hover,body.product-body .btn-outline-danger:focus-visible,body.product-body .btn-danger:focus-visible{
  background:var(--danger-bg);border-color:var(--danger);color:var(--danger)}
body.product-body .btn-outline-danger:active,body.product-body .btn-danger:active{background:var(--danger);border-color:var(--danger);color:#fff}
/* Textlink */
body.product-body .btn-link,body.product-body .text-link{
  display:inline-flex;align-items:center;gap:var(--sp-1);min-height:var(--h-md);padding:0 var(--sp-1)!important;border:0;background:none;
  color:var(--accent);font-size:var(--fs-small)!important;font-weight:600;text-decoration:none;border-radius:var(--radius-s)}
body.product-body .btn-link:hover,body.product-body .text-link:hover{
  color:var(--accent-deep);text-decoration:underline;background:none}
/* Icon-Knopf 44x44 */
body.product-body .icon-action,
body.product-body .food-favorite,
body.product-body .product-more,
body.product-body .cookbook-fav-button,
body.product-body .week-slot-add,
body.product-body .planner-week-nav .btn{
  width:var(--h-md);height:var(--h-md);min-width:var(--h-md);min-height:var(--h-md)!important;padding:0!important;
  display:inline-grid;place-items:center;border:1px solid transparent;border-radius:var(--radius-s)!important;
  background:transparent;color:var(--muted);font-size:1.125rem!important}
body.product-body .icon-action:hover,
body.product-body .food-favorite:hover,
body.product-body .product-more:hover,
body.product-body .cookbook-fav-button:hover,
body.product-body .week-slot-add:hover,
body.product-body .planner-week-nav .btn:hover{
  background:var(--accent-soft);color:var(--accent);border-color:transparent}
body.product-body .week-slot-add{color:var(--accent)}
body.product-body .btn:disabled,body.product-body .btn.disabled,body.product-body .btn[aria-disabled=true]{opacity:.6;cursor:not-allowed}
body.product-body .btn:focus-visible,body.product-body .icon-action:focus-visible{outline:3px solid var(--accent);outline-offset:2px;box-shadow:none}
body.product-body .btn-close{min-width:0;min-height:0!important;padding:0!important}

/* 4 Karte: ein Typ mit Kopf (Kicker optional, H3) und Koerper */
body.product-body .card,
body.product-body .product-card,
body.product-body .account-card,
body.product-body .settings-wrap,
body.product-body .setup-wrap,
body.product-body .product-error-card,
body.product-body .food-create,
body.product-body .food-card,
body.product-body .adopt-form,
body.product-body .off-results{
  background:var(--surface);border:1px solid var(--line)!important;border-radius:var(--radius-l)!important;box-shadow:var(--shadow-1)!important;color:var(--ink)}
body.product-body .card:hover,body.product-body .food-card:hover{transform:none;box-shadow:var(--shadow-1)!important;z-index:auto}
body.product-body .card-header,body.product-body .card-footer{background:var(--surface);border-color:var(--line);padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-h3);font-weight:700;color:var(--ink)}
body.product-body .card-footer{font-size:var(--fs-small);font-weight:400}
body.product-body .card-body{padding:var(--sp-4)}
body.product-body .product-card{padding:var(--sp-4)}
body.product-body .planner-week-grid .card-body{padding:var(--sp-3)}
body.product-body .card-header .fw-bold{font-weight:700!important}
@media(min-width:761px){body.product-body .card-body{padding:var(--sp-5)}body.product-body .product-card{padding:var(--sp-5)}
  body.product-body .planner-week-grid .card-body{padding:var(--sp-3)}}
body.product-body .settings-page .border-danger .card-header{background:var(--danger-bg)!important;color:var(--danger)!important}

/* 5 Formulare: ein Etikett-Stil, Feldhoehe 44 */
body.product-body .form-label,body.product-body label.form-label,body.product-body .form-check-label{font-size:var(--fs-small);font-weight:600;color:var(--ink);margin-bottom:var(--sp-1)}
body.product-body .form-check-label{font-weight:400;font-size:var(--fs-body)}
body.product-body .form-control,body.product-body .form-select,body.product-body .form-control-sm,body.product-body .form-select-sm{
  min-height:var(--h-md)!important;font-size:var(--fs-body)!important;color:var(--ink);background-color:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--radius-s)!important;padding-top:var(--sp-2);padding-bottom:var(--sp-2);padding-left:var(--sp-3)}
body.product-body .form-control,body.product-body .form-control-sm{padding-right:var(--sp-3)}
body.product-body textarea.form-control{min-height:96px!important}
body.product-body .form-control::placeholder{color:#5f7165;opacity:1}
body.product-body .form-control:focus,body.product-body .form-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #315e4b26;outline:0}
body.product-body .form-control:disabled,body.product-body .form-select:disabled{background:var(--neutral-bg);color:var(--muted)}
body.product-body .form-text,body.product-body .form-hint{font-size:var(--fs-small);color:var(--muted)}
body.product-body .form-check-input{width:1.25rem;height:1.25rem;border-color:var(--line-strong)}
body.product-body .ts-control{min-height:var(--h-md);border:1px solid var(--line-strong);border-radius:var(--radius-s)}
body.product-body .input-group>.form-control,body.product-body .input-group>.btn{border-radius:0!important}
body.product-body .input-group>:first-child{border-top-left-radius:var(--radius-s)!important;border-bottom-left-radius:var(--radius-s)!important}
body.product-body .input-group>:last-child{border-top-right-radius:var(--radius-s)!important;border-bottom-right-radius:var(--radius-s)!important}
body.product-body .is-invalid,body.product-body .form-control:user-invalid{border-color:var(--danger-line)}
body.product-body .invalid-feedback{color:var(--danger);font-size:var(--fs-small)}

/* 6 Chips und Filter: Pille, 44 hoch */
body.product-body .cookbook-chip span,
body.product-body .collection-links a,
body.product-body .foods-links a,
body.product-body .filter-chip{
  display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--h-md);padding:0 var(--sp-3)!important;
  border:1px solid var(--line-strong);border-radius:var(--radius-pill)!important;background:var(--surface);color:var(--ink);
  font-size:var(--fs-small)!important;font-weight:600;text-decoration:none}
body.product-body .collection-links a:hover,body.product-body .foods-links a:hover,body.product-body .filter-chip:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
body.product-body .cookbook-chip input:checked+span{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
body.product-body .filter-chips,body.product-body .cookbook-chips,body.product-body .collection-links,body.product-body .foods-links{gap:var(--sp-2)}
body.product-body .cookbook-chip{min-height:var(--h-md)}

/* 7 Meldungen: ein Muster, vier Arten */
body.product-body .alert{display:block;padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4);border:1px solid;border-left-width:4px;
  border-radius:var(--radius-s);font-size:var(--fs-body);line-height:1.5;box-shadow:none}
body.product-body .alert-success{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
body.product-body .alert-info,body.product-body .alert-secondary{
  background:var(--info-bg);border-color:var(--info-line);color:var(--info)}
body.product-body .alert-warning{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
body.product-body .alert-danger{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}
body.product-body .alert a{color:inherit;font-weight:600;text-decoration:underline}
body.product-body .public-content .alert{width:min(calc(100% - 8px),632px);margin-left:auto;margin-right:auto}

/* 8 Status-Etiketten: geplant, erledigt, ausgelassen, teilweise, geschaetzt */
body.product-body .badge,body.product-body .entry-state,body.product-body .estimate-badge,body.product-body .incomplete-note{
  display:inline-flex;align-items:center;gap:var(--sp-1);min-height:24px;padding:2px var(--sp-3);border:1px solid transparent;
  border-radius:var(--radius-pill);font-size:var(--fs-micro);font-weight:700;line-height:1.3;white-space:nowrap;
  background:var(--neutral-bg);color:var(--neutral-fg)}
body.product-body .incomplete-note{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
body.product-body .entry-state-done,body.product-body .badge.text-bg-success,body.product-body .badge.bg-success-subtle{
  background:#e2efe0!important;color:#256a43!important}
body.product-body .entry-state-skipped,body.product-body .entry-state-eating_out,body.product-body .badge.bg-light,body.product-body .badge.text-bg-light{
  background:var(--skipped-bg)!important;color:var(--skipped-fg)!important}
body.product-body .badge.bg-light,body.product-body .badge.text-bg-light{background:var(--neutral-bg)!important;color:var(--neutral-fg)!important}
body.product-body .entry-state-partial,body.product-body .badge.bg-warning,body.product-body .badge.text-bg-warning{background:var(--warn-bg)!important;color:var(--warn)!important;border-color:var(--warn-line)}
body.product-body .estimate-badge,body.product-body .badge.text-bg-info{background:var(--info-bg)!important;color:var(--info)!important;border:1px dashed var(--info-line)}
body.product-body .badge.bg-danger{background:var(--danger-bg)!important;color:var(--danger)!important;border-color:var(--danger-line)}
body.product-body .badge.text-dark,body.product-body .badge .text-dark{color:inherit!important}
body.product-body .badge.border{border-color:var(--line)!important}
body.product-body .form-control.is-estimated{border-style:dashed;border-color:var(--info-line);background-color:var(--info-bg)}

/* 9 Leerer Zustand: ein Muster, zentriert, Symbol, Titel, Satz, hoechstens eine Aktion */
body.product-body .empty-state,body.product-body .collection-empty,body.product-body .food-empty,body.product-body .catalog-empty,
body.product-body .catalog-no-results,body.product-body .food-no-results,body.product-body .cookbook-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);text-align:center;
  padding:var(--sp-6) var(--sp-4);background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--radius-l);box-shadow:none;color:var(--muted)}
body.product-body .collection-empty h3,body.product-body .food-empty h3,body.product-body .catalog-empty h2,body.product-body .empty-state strong{
  font-size:var(--fs-h3);font-weight:700;color:var(--ink);margin:0}
body.product-body .collection-empty p,body.product-body .food-empty p,body.product-body .catalog-empty p,body.product-body .catalog-no-results p,body.product-body .empty-state>span:not(.empty-icon){
  font-size:var(--fs-small);color:var(--muted);margin:0;max-width:48ch}
body.product-body .collection-empty .btn,body.product-body .food-empty .btn{margin:var(--sp-2) 0 0;width:auto}
body.product-body .empty-icon,body.product-body .collection-empty-icon,body.product-body .food-empty>span,body.product-body .catalog-empty-icon{
  width:44px;height:44px;border-radius:var(--radius-s)!important;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin:0}

/* 10 Seitenkopf: Name als Titel, optional ein Satz, kein Motto als H1 */
body.product-body .today-heading,body.product-body .planner-heading,body.product-body .collection-heading,body.product-body .foods-heading,
body.product-body .community-heading,body.product-body .catalog-heading,body.product-body .page-heading{
  display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-4);margin:0 auto var(--sp-6)}
body.product-body .today-heading p,body.product-body .planner-heading p,body.product-body .collection-heading p,body.product-body .foods-heading p,
body.product-body .community-heading p,body.product-body .catalog-heading p,body.product-body .page-heading p,body.product-body .settings-intro,
body.product-body .setup-intro{font-size:var(--fs-body)!important;line-height:1.5;color:var(--muted);margin:var(--sp-1) 0 0;max-width:62ch}
body.product-body .page-title{margin-bottom:var(--sp-1)}
@media(min-width:651px){body.product-body .today-heading>div:first-child,body.product-body .page-heading>div:first-child,body.product-body .catalog-heading>div:first-child,body.product-body .collection-heading>div:first-child,body.product-body .foods-heading>div:first-child{flex:1 1 280px;min-width:0}}
body.product-body .product-card-heading{flex-wrap:wrap}
body.product-body .product-footer{flex-wrap:wrap}
body.product-body .setup-skip{min-height:var(--h-md);display:inline-flex;align-items:center}
body.product-body .catalog-search .btn{white-space:nowrap}
body.product-body .shopping-days .btn{padding:var(--sp-1) 0!important;min-width:0;font-size:var(--fs-small)!important}
body.product-body .adopt-fields input,body.product-body .nutrient-fields input,body.product-body .density-input{min-height:var(--h-md);font-size:var(--fs-body)}
body.product-body .planner-week-nav{border-radius:var(--radius-l)!important}

/* 11 Bereiche */
/* Woche (U3): leerer Slot hat genau ein Hinzufuegen-Element */
body.product-body .week-slot:has(.week-empty-add) .week-slot-add{display:none}
body.product-body .week-empty-add{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-1) 0 0}
body.product-body a.week-empty-add,body.product-body .week-empty-add a{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--h-md);padding:0 var(--sp-3);
  border:1px dashed var(--line-strong);border-radius:var(--radius-s);background:transparent;color:var(--accent);font-size:var(--fs-small)!important;font-weight:600;text-decoration:none}
body.product-body a.week-empty-add:hover,body.product-body .week-empty-add a:hover{background:var(--accent-soft);border-color:var(--accent);border-style:solid}
body.product-body a.week-empty-add{display:flex;width:100%;justify-content:flex-start;margin-top:var(--sp-1)}
body.product-body .week-day .card-header>div:first-child>span:last-child{flex-wrap:wrap;gap:var(--sp-1)!important}
body.product-body .week-entry>.d-flex{flex-wrap:wrap}
body.product-body .week-entry .small{flex:1 1 8rem;overflow-wrap:break-word}
body.product-body .week-day-today{border-color:var(--accent)!important;box-shadow:inset 0 0 0 1px var(--accent)!important}
body.product-body .week-entry{padding:var(--sp-2) 0;border-bottom:1px solid var(--line)}
body.product-body .week-entry:last-child{border-bottom:0}
body.product-body .week-entry-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2)}
body.product-body .week-entry-actions form{margin:0}
body.product-body .entry-move summary{display:inline-flex;align-items:center;justify-content:center;min-height:var(--h-sm);padding:var(--sp-1) var(--sp-3);
  border:1px solid var(--line-strong);border-radius:var(--radius-s);background:var(--surface);color:var(--accent);font-size:var(--fs-small);font-weight:600;list-style:none;cursor:pointer}
body.product-body .entry-move summary::-webkit-details-marker{display:none}
body.product-body .entry-move summary:hover{background:var(--accent-soft);border-color:var(--accent)}
body.product-body .entry-move[open] summary{background:var(--accent-soft);border-color:var(--accent)}
body.product-body .entry-move-form label{font-size:var(--fs-small);font-weight:600}
body.product-body .week-undo form{align-items:center}
/* Woche: Tageskarte als Zusammenklapper (Ruhe, Hover, Fokus, offen) */
body.product-body details.card>summary.card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);min-height:var(--h-md);
  list-style:none;cursor:pointer;border-radius:calc(var(--radius-l) - 1px);transition:background-color .15s}
body.product-body details.card>summary.card-header>div{flex:1;min-width:0;margin:0!important}
body.product-body details.card>summary.card-header:hover{background:var(--canvas)}
body.product-body details.card>summary.card-header:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;background:var(--canvas)}
body.product-body details.card:not([open])>summary.card-header{border-bottom:0}
body.product-body details.card[open]>summary.card-header{border-radius:calc(var(--radius-l) - 1px) calc(var(--radius-l) - 1px) 0 0;border-bottom:1px solid var(--line)}
body.product-body .week-day-count{font-size:var(--fs-small);font-weight:400;color:var(--muted);white-space:nowrap}
body.product-body .week-day-chevron{font-size:1rem;color:var(--muted);transition:transform .15s}
body.product-body details.card>summary.card-header:hover .week-day-chevron{color:var(--accent)}
body.product-body .week-day-open{margin:0 0 var(--sp-2)}
@media(min-width:761px){body.product-body .week-day>summary.card-header{cursor:default;pointer-events:none}
  body.product-body .week-day>summary.card-header:hover{background:var(--surface)}}
@media(prefers-reduced-motion:reduce){body.product-body details.card>summary.card-header,body.product-body .week-day-chevron{transition:none}}
/* Woche: Eintragsaktionen. Plan B und Verschieben mit Wort, Loeschen am Handy als Symbol (44x44), ab 761 px mit Wort */
body.product-body .week-entry-actions .btn-outline-danger::before{content:"\f5de";font-family:"bootstrap-icons";font-style:normal;font-weight:400;font-size:1.125rem;line-height:1}
@media(min-width:761px){body.product-body .week-entry-actions .btn-outline-danger::before{content:none}}
@media(max-width:760px){
  body.product-body .week-entry-actions{gap:var(--sp-2)}
  body.product-body .week-entry-actions .btn,body.product-body .entry-move summary{padding-left:var(--sp-3)!important;padding-right:var(--sp-3)!important}
  body.product-body .week-entry-actions form:has(.btn-outline-danger){margin-left:auto}
  body.product-body .week-entry-actions .btn-outline-danger{font-size:0!important;width:var(--h-md);padding:0!important;gap:0}}
/* Rezept: Zubereitung als Lesetext */
body.product-body .dish-instructions{max-width:62ch;font-size:var(--fs-body);line-height:1.6;color:var(--ink);overflow-wrap:anywhere}
/* Checkbox-Zeile: 44 px Trefferflaeche, Etikett klickbar, Fokusring nach System */
body.product-body .form-check-row{display:flex;align-items:flex-start;gap:var(--sp-3);padding-left:0;min-height:var(--h-md)}
body.product-body .form-check-row .form-check-input{float:none;margin:var(--sp-3) 0 0;flex:none}
body.product-body .form-check-row .form-check-label{display:block;flex:1;min-width:0;padding:10px 0;line-height:1.4;cursor:pointer}
body.product-body .form-check-input:checked{background-color:var(--accent);border-color:var(--accent)}
body.product-body .form-check-input:focus-visible{outline:3px solid var(--accent);outline-offset:2px;box-shadow:none;border-color:var(--accent)}
body.product-body .form-check-input:disabled~.form-check-label{color:var(--muted);cursor:not-allowed}
@media(max-width:760px){body.product-body .entry-move summary{min-height:var(--h-md)}}
/* Seitenleiste (Desktop): 272 px, Texte der Coach-Karte und des Profils brechen nicht mehr mitten im Wort.
   Sie reicht bis zum unteren Fensterrand; die Fußzeile beginnt rechts daneben, statt unter ihr zu liegen. */
@media(min-width:761px){
  body.product-body .product-sidebar{width:var(--sidebar-w);padding:28px var(--sp-4) var(--sp-4);bottom:0}
  body.product-body .product-main-column{margin-left:var(--sidebar-w)}
  body.product-body .product-footer-app{margin-left:var(--sidebar-w);padding-right:92px}}
body.product-body .product-coach-link{gap:var(--sp-3);padding:var(--sp-3)}
body.product-body .product-coach-link>span:nth-child(2){min-width:0;gap:2px}
body.product-body .product-coach-link strong{white-space:nowrap;line-height:1.3}
body.product-body .product-coach-link small{line-height:1.35}
body.product-body .product-profile{gap:var(--sp-2)}
body.product-body .product-profile small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Woche: Kopfaktionen brechen in Zeilen statt Beschriftungen zu quetschen */
@media(max-width:600px){body.product-body .planner-actions .btn{flex:1 1 auto;white-space:nowrap}}
/* Katalogfilter (K04) */
body.product-body .catalog-facets>summary,
body.product-body .cookbook-more>summary,
body.product-body .logged-entry summary,
body.product-body .planner-add-panel>summary,
body.product-body .food-create>summary{
  min-height:var(--h-md);display:flex;align-items:center;color:var(--accent);font-size:var(--fs-small);font-weight:600;cursor:pointer}
body.product-body .planner-add-panel>summary,body.product-body .food-create>summary{font-size:var(--fs-body);color:var(--ink)}
body.product-body .facet-group{border:1px solid var(--line);border-radius:var(--radius-s);padding:var(--sp-3) var(--sp-4)}
body.product-body .facet-group legend{font-size:var(--fs-small);font-weight:700;color:var(--ink)}
body.product-body .facet-values label{min-height:36px;align-items:center;gap:var(--sp-2)}
body.product-body .facet-count,body.product-body .facet-note{color:var(--muted)}
@media(max-width:760px){body.product-body .facet-values label{min-height:var(--h-md)}}
/* Heute erfasst */
body.product-body .logged-entry{border:1px solid var(--line);border-radius:var(--radius-s)!important;background:var(--surface);padding:var(--sp-3) var(--sp-4)}
body.product-body .logged-edit-form label{font-size:var(--fs-small);font-weight:600;color:var(--ink)}
/* Schaetzen */
body.product-body .nutrient-estimate{border-top:1px dashed var(--line-strong);padding-top:var(--sp-3)}
body.product-body .nutrient-estimate .estimate-status{background:var(--info-bg);color:var(--info);border-radius:var(--radius-s);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-small)}
body.product-body .nutrient-estimate .estimate-status.is-error{background:var(--danger-bg);color:var(--danger)}
/* Untere Leiste (Handy) */
body.product-body .product-mobile-nav a{min-height:var(--h-md);color:var(--muted)}
body.product-body .product-mobile-nav a.active{color:var(--accent)}
/* Navigation, Tabs, Menues */
body.product-body .nav-tabs .nav-link{min-height:var(--h-md);display:flex;align-items:center}
body.product-body .dropdown-item{min-height:var(--h-md);display:flex;align-items:center;font-size:var(--fs-small);border-radius:var(--radius-s)}
body.product-body .dropdown-menu{border-radius:var(--radius-l);box-shadow:var(--shadow-2)}
body.product-body .modal-content{border-radius:var(--radius-l);box-shadow:var(--shadow-2)}

/* 12 Normalisierung: aus den Bestandsregeln abgeleitet (Schrift auf Skala,
   Radien auf 8/16, Schatten auf 2 Stufen, zu schwache Textfarben auf Muted).
   Selektoren stehen unveraendert wie in den Quelldateien. */
/* Training: Uebungszeile in schmaler Karte */
body.product-body .exercise-row-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
body.product-body .exercise-field-name,body.product-body .exercise-remove{grid-column:1/-1}
body.product-body .exercise-remove{justify-self:start}
/* hidden-Attribut bleibt stärker als jede display-Regel dieses Systems */
body.product-body [hidden]{display:none!important}
body.product-body summary.text-link{display:flex;white-space:nowrap;list-style:revert}
/* Katalogzeile: Inhalt umbrechen statt ueberlagern */
body.product-body .off-result{flex-wrap:wrap;row-gap:var(--sp-2)}
body.product-body .off-result-main{flex:1 1 0;min-width:8rem}
body.product-body .off-result .nutrition-details{flex:1 1 100%;order:3;margin:0!important}
body.product-body .off-result>.button{flex:none;margin-left:auto}
/* Heute: Spalten duerfen nie breiter werden als der Bildschirm */
body.product-body .today-main-stack,body.product-body .today-side-stack,body.product-body .today-columns>*{min-width:0}
@media(max-width:650px){body.product-body .today-columns{grid-template-columns:minmax(0,1fr)}}
body.product-body .today-main-stack{grid-template-columns:minmax(0,1fr)}
body.product-body .week-day .card-header>div:first-child{flex-wrap:wrap;gap:var(--sp-1)}
/* Schrift: Mikro (12 px) fuer Kicker, Etiketten, Randnotizen */
.page-kicker,
.coach-page-heading .page-kicker,
.coach-welcome-content .page-kicker,
.coach-history .page-kicker,
.product-coach-link small,
.product-profile small,
.product-content .page-kicker,
.product-footer,
.public-content .account-card .eyebrow,
.hero-note>span,
.mode-grid small,
.preference-toggle small,
.planner-page .page-kicker,
.collection-page .page-kicker,
.foods-heading .page-kicker,
.food-list-heading .page-kicker,
.food-nutrients span,
.food-card-footer>span,
.next-step-copy .eyebrow,
.eyebrow,
.event-details>span,
.event-nutrition,
.event-status,
.form-hint,
.focus-sub,
.catalog-back>span,
.scan-status,
.catalog-meta,
.off-result-main span,
.off-result-main small,
.off-result-nutrition small,
.off-attribution,
.product-source-card small,
.product-source-card>a,
.adopt-section p,
.facet-search,
.facet-note,
.product-mobile-nav a,
.admin-feedback-page .table tbody td::before{font-size:var(--fs-micro)}
/* Schrift: Klein (14 px) fuer Zweittext */
.avatar-sm,
.extra-small,
.coach-welcome-content>p,
.coach-topic-grid .suggestion-chip>i:last-child,
.coach-topic-grid .suggestion-chip strong,
.coach-topic-grid .suggestion-chip small,
.coach-history .session-item .text-dark,
.coach-history .session-item .small,
.product-nav-label,
.product-coach-link strong,
.product-coach-link>i,
.product-avatar,
.product-profile strong,
.product-topbar-note,
.topbar-action,
.public-topbar nav a,
.account-card .account-switch,
.account-consents legend,
.account-consents .form-check-label,
.account-card .form-label,
.account-card .form-text,
.public-content .welcome-note,
.welcome-note,
.hero-note>div,
.welcome-section-head p,
.path-grid p,
.setup-skip,
.setup-intro,
.settings-intro,
.setup-form legend,
.mode-grid strong,
.preference-toggle strong,
.shopping-quantity-controls label,
.admin-feedback-page .avatar-sm,
.admin-feedback-page .extra-small,
.product-error-card .error-code,
.planner-week-nav small,
.planner-controls .text-muted,
.planner-week-grid .card-body>.mb-2>div:nth-child(2) .text-muted,
.collection-links a,
.collection-empty p,
.foods-heading p,
.foods-links a,
.food-create .form-label,
.food-create .form-control,
.food-count,
.food-category,
.food-card-heading p,
.food-energy span,
.food-energy small,
.food-nutrients strong,
.food-nutrients strong small,
.food-no-results,
.food-empty p,
.shopping-category,
.entry-move summary,
.entry-move-form label,
.shopping-range label,
.today-heading p,
.day-picker label,
.next-step-copy>span:last-child,
.event-details strong,
.add-event-link,
.empty-state strong,
.empty-state>span:not(.empty-icon),
.empty-state a,
.quick-entry-form>label,
.entry-controls>label,
.unit-suffix,
.focus-summary p,
.shopping-summary p,
.focus-number small,
.gentle-prompt p,
.empty-inline,
.logged-activity-list>div,
.recap-action-card strong,
.recap-action-card small,
.recap-action-card>i,
.catalog-back>a,
.catalog-heading p,
.off-result-main strong,
.off-result-nutrition strong,
.catalog-pagination a,
.catalog-no-results p,
.catalog-empty p,
.catalog-no-results a,
.catalog-empty a,
.product-source-card strong,
.adopt-fields label,
.nutrient-fields label,
.catalog-filter,
.cookbook-filters .form-label,
.cookbook-chip span,
.cookbook-more>summary,
.cookbook-result,
.cookbook-card-body p,
.catalog-facets>summary,
.facet-toolbar,
.facet-group legend,
.facet-values,
.facet-range,
.filter-chip,
.measurement-form label,
.exercise-row-title,
.exercise-field .form-label,
.form-error,
.logged-edit-form label,
.coach-page-heading p,
.product-mobile-brand,
.welcome-copy>p,
.public-topbar .product-wordmark,
.planner-week-grid .card-header .small,
.next-step-copy strong{font-size:var(--fs-small)}
.planner-week-grid .card-header .d-flex.flex-wrap{font-size:var(--fs-small) !important}
/* Radius: Bedienelement und Zeile (8 px) */
.progress,
.shopping-progress,
.shopping-progress-fill,
.bubble-bot pre,
.coach-topic-grid .suggestion-chip,
.coach-topic-grid .suggestion-chip>i:first-child,
.product-mark,
.product-coach-link,
.coach-mark,
.product-more,
.topbar-action,
.public-topbar .public-join,
.account-consents,
.path-icon,
.setup-progress,
.setup-progress span,
.mode-grid label span,
.planner-week-grid .card-body>.mb-2,
.collection-tools .form-control,
.foods-search,
.food-create .form-control,
.food-favorite,
.food-nutrients>div,
.food-no-results,
.entry-move summary,
.next-step-icon,
.event-symbol,
.empty-icon,
.recap-action-card,
.recap-action-icon,
.scan-video,
.off-result-icon,
.off-attribution,
.product-source-card,
.cookbook-more>summary,
.cookbook-card-media,
.facet-group,
.exercise-row,
.logged-entry,
.setup-skip,
.nutrient-estimate .estimate-status,
.picker-dialog-source,
.recipe-row,
.recipe-image-preview,
.recipe-dialog-source,
.product-mobile-brand .product-mark{border-radius:var(--radius-s)}
.session-item,
.coach-history .session-item{border-radius:var(--radius-s) !important}
/* Radius: Flaeche (16 px) */
.suggestion-chip,
.coach-welcome-content .welcome-icon,
.welcome-art,
.hero-note,
.path-grid article,
.welcome-footer-cta,
.setup-wrap,
.settings-wrap,
.measurement-chart,
.admin-feedback-page .card,
.admin-feedback-page .table-responsive,
.product-error-card,
.product-error-card .error-symbol,
.planner-week-nav,
.planner-page .card,
.collection-links a,
.collection-empty,
.collection-empty-icon,
.foods-links a,
.food-create,
.food-count,
.food-card,
.food-category,
.food-empty,
.food-empty>span,
.shopping-period,
.shopping-filter,
.next-step-card,
.product-card,
.gentle-prompt,
.catalog-search,
.off-results,
.catalog-no-results,
.catalog-empty,
.catalog-empty-icon,
.adopt-form,
.cookbook-chip span,
.filter-chip,
.picker-dialog,
.recipe-editor .recipe-section,
.recipe-subdialog,
.product-content .card{border-radius:var(--radius-l)}
/* Schatten 1: ruhende Flaechen */
.bubble-user,
.coach-topic-grid .suggestion-chip,
.product-content .card,
.admin-feedback-page .card,
.planner-week-nav,
.planner-page .card,
.collection-empty,
.food-create,
.food-card,
.food-empty,
.product-card,
.cookbook-card:hover{box-shadow:var(--shadow-1)}
/* Schatten 2: schwebende Flaechen */
.hero-note,
.product-error-card,
.food-card:hover{box-shadow:var(--shadow-2)}
/* Textfarbe: alles unter 4,5:1 auf Weiss wird zur Muted-Farbe */
.coach-page-heading .page-kicker,
.coach-page-heading p,
.coach-welcome-content .page-kicker,
.coach-welcome-content>p,
.coach-topic-grid .suggestion-chip>i:last-child,
.coach-topic-grid .suggestion-chip small,
.coach-history .page-kicker,
.wordmark-light,
.product-nav-label,
.product-mobile-nav a,
.welcome-copy>.eyebrow,
.setup-wrap>.eyebrow,
.welcome-copy>p,
.welcome-note,
.shopping-quantity-controls label,
.product-error-card .error-code,
.planner-week-nav small,
.planner-page .page-kicker,
.collection-page .page-kicker,
.planner-add-panel>summary>i:last-child,
.collection-empty p,
.foods-heading .page-kicker,
.food-list-heading .page-kicker,
.foods-heading p,
.foods-search,
.food-create>summary>i:last-child,
.food-count,
.food-card-heading p,
.food-energy small,
.food-nutrients strong small,
.food-nutrients span,
.food-card-footer>span i,
.food-card-footer>span small,
.food-no-results,
.food-empty p,
.shopping-category,
.event-nutrition,
.event-status,
.logged-activity-list i,
.catalog-back>span,
.catalog-query,
.catalog-meta,
.off-result-main span,
.off-result-main small,
.off-attribution,
.off-attribution>i,
.plan-b-comparison>i,
.picker-result-text small,
.recipe-row-name small,
.recipe-result-text small{color:var(--muted)}

/* ===== U5a: Woche (Tageskopf, freie Slots, Aktionen-Menü), Coach-Knopf ===== */
body.product-body .week-day-title-link{display:none;color:inherit;text-decoration:none}
body.product-body .week-day-title-link:hover{color:var(--accent);text-decoration:underline}
body.product-body .week-free-slots{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-3);margin:var(--sp-2) 0}
body.product-body .week-free-label{color:var(--muted)}
body.product-body .week-free-slots a{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:var(--h-md);color:var(--accent);font-weight:600;text-decoration:none}
body.product-body .week-free-slots a:hover{text-decoration:underline}
body.product-body .planner-actions-menu{flex-basis:100%}
body.product-body .planner-actions-menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--sp-2)}
body.product-body .planner-actions-menu>summary::-webkit-details-marker{display:none}
body.product-body .planner-actions-menu .planner-actions{margin:var(--sp-2) 0 0}
@media(min-width:761px){
  body.product-body .week-day-title-text,body.product-body .week-day-open{display:none}
  body.product-body .week-day-title-link{display:inline;pointer-events:auto}
  body.product-body .planner-actions-menu>summary{display:none}
  body.product-body .planner-actions-menu .planner-actions{margin:0}
}
@media(max-width:760px){
  body.product-body .planner-page-plan{display:flex;flex-direction:column}
  body.product-body .planner-page-plan .planner-meal-prep,
  body.product-body .planner-page-plan .planner-controls{order:5}
  body.product-body .planner-actions-menu[open]>summary{margin-bottom:0}
  body.product-body .planner-heading .text-muted.small{display:none}
  .chat-widget-desktop-only,body.product-body #chat-widget-container.chat-widget-desktop-only{display:none!important}
}
/* ===== Ende U5a ===== */
/* U5a: lange Zutatennamen in der Rezept-Zutatenliste auf eine Zeile begrenzen */
body.product-body .recipe-row-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal}
/* Ende U5a (Zutaten) */
/* ==========================================================================
   U5b: Katalogfilter, Einstellungen, Einkauf, Feldtexte, Ueberlauf bei 768
   Nur Ergaenzungen; verwendet ausschliesslich die Tokens aus Abschnitt 1.
   ========================================================================== */
/* U5b Katalog: Suchzeile, Filter hinter einem Knopf, Facetten als Aufklapper */
body.product-body .catalog-search{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--sp-2) var(--sp-3);padding:var(--sp-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow-1)}
body.product-body .catalog-query{position:relative;display:block;height:auto;padding:0;margin:0;color:var(--muted)}
body.product-body .catalog-query>i{position:absolute;left:var(--sp-3);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted)}
body.product-body .catalog-query input.form-control{padding-left:2.5rem;border:1px solid var(--line-strong)}
body.product-body .catalog-actions{display:flex;gap:var(--sp-2)}
body.product-body .catalog-actions .btn{white-space:nowrap}
body.product-body .catalog-facets,body.product-body .catalog-plain-filters{grid-column:1/-1;margin:0;padding:0;border:0}
body.product-body .catalog-plain-filters{display:grid;gap:var(--sp-2);grid-template-columns:minmax(0,18rem) auto;align-items:end}
body.product-body .catalog-facets>summary.btn{display:flex;justify-content:flex-start;width:100%;min-height:var(--h-md);padding:var(--sp-2) var(--sp-4)!important;
  background:var(--surface);border:1px solid var(--line-strong);color:var(--accent);font-size:var(--fs-body);font-weight:600;list-style:none}
body.product-body .catalog-facets>summary::-webkit-details-marker,body.product-body .facet-group>summary::-webkit-details-marker{display:none}
body.product-body .catalog-facets>summary::after,body.product-body .facet-group>summary::after{content:"\f282";font-family:"bootstrap-icons";font-weight:400;margin-left:auto;color:var(--muted);transition:transform .15s}
body.product-body .catalog-facets[open]>summary::after,body.product-body .facet-group[open]>summary::after{transform:rotate(180deg)}
body.product-body .catalog-facets>summary .filter-count{margin-left:var(--sp-2)}
body.product-body .catalog-facets>summary:hover{background:var(--accent-soft);border-color:var(--accent)}
body.product-body .catalog-facets>summary:focus-visible,body.product-body .facet-group>summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
body.product-body .filter-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;min-height:1.5rem;padding:0 var(--sp-2);border-radius:var(--radius-pill);
  background:var(--accent-soft);color:var(--accent);font-size:var(--fs-micro);font-weight:700;line-height:1.2}
body.product-body .facet-panel{display:grid;gap:var(--sp-3);padding-top:var(--sp-3)}
body.product-body .facet-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);margin:0;font-size:var(--fs-small)}
body.product-body .facet-toolbar label,body.product-body .catalog-filter,body.product-body .facet-search{display:grid;gap:var(--sp-1);margin:0;font-size:var(--fs-small);font-weight:600;color:var(--ink)}
body.product-body .catalog-filter span{font-size:var(--fs-small)}
body.product-body .catalog-filter input.form-control{padding:var(--sp-2) var(--sp-3);border:1px solid var(--line-strong)}
body.product-body .facet-check{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--h-md);margin:0;font-size:var(--fs-body);font-weight:400;color:var(--ink);cursor:pointer}
body.product-body .facet-check .form-check-input{flex:none;float:none;margin:0}
body.product-body .facet-check .facet-label,body.product-body .facet-check>span:not(.facet-count){min-width:0;overflow-wrap:anywhere}
body.product-body .facet-count{margin-left:auto;padding-left:var(--sp-2);font-size:var(--fs-small);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted)}
body.product-body .facet-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:var(--sp-2) var(--sp-3);align-items:start}
body.product-body details.facet-group{padding:0 var(--sp-3);margin:0;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);min-width:0}
body.product-body details.facet-group[open]{border-color:var(--line-strong)}
body.product-body .facet-group>summary{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--h-md);font-size:var(--fs-body);font-weight:600;color:var(--ink);list-style:none;cursor:pointer}
body.product-body .facet-values{max-height:19rem;overflow:auto;margin:0 calc(var(--sp-1) * -1);padding:0 var(--sp-1)}
body.product-body .facet-search{padding:var(--sp-2) 0 var(--sp-3)}
body.product-body .facet-note{margin:var(--sp-2) 0;font-size:var(--fs-micro);line-height:1.4;color:var(--muted)}
body.product-body .facet-group .facet-note{margin:var(--sp-1) 0 var(--sp-3)}
body.product-body .facet-range{display:grid;grid-template-columns:minmax(0,1fr) 5.5rem 5.5rem;gap:var(--sp-2);align-items:center;margin:0 0 var(--sp-2);font-size:var(--fs-small)}
body.product-body .facet-ranges{padding-bottom:var(--sp-2)!important}
body.product-body .facet-actions{display:flex;justify-content:flex-start}
body.product-body .filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4);margin:var(--sp-3) 0}
body.product-body .filter-bar .filter-chips{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap}
body.product-body .filter-chip{max-width:100%}
body.product-body .filter-chip .bi{color:var(--muted)}
@media(min-width:761px){
  body.product-body details.facet-group[open]{grid-column:1/-1}
  body.product-body details.facet-group[open] .facet-values{max-height:none;overflow:visible;columns:2;column-gap:var(--sp-6)}
  body.product-body .facet-values>li{break-inside:avoid}
}
@media(min-width:1000px){body.product-body details.facet-group[open] .facet-values{columns:3}}
@media(max-width:650px){
  body.product-body .catalog-search{grid-template-columns:minmax(0,1fr);padding:var(--sp-2);gap:var(--sp-2)}
  body.product-body .catalog-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  body.product-body .catalog-plain-filters{grid-template-columns:minmax(0,1fr)}
  body.product-body .facet-groups{grid-template-columns:minmax(0,1fr)}
  body.product-body .catalog-heading{gap:var(--sp-2);margin-bottom:var(--sp-3)}
  body.product-body .catalog-back{margin-bottom:var(--sp-1)}
  body.product-body .catalog-back>span,body.product-body .catalog-heading .page-kicker{display:none}
  body.product-body .catalog-heading>a.btn{align-self:flex-start;min-height:var(--h-md);padding:0 var(--sp-1)!important;border-color:transparent;background:none;color:var(--accent);text-decoration:underline}
  body.product-body .off-result{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:var(--sp-3);row-gap:var(--sp-1);align-items:center;padding:var(--sp-3)}
  body.product-body .off-result-icon{grid-area:1/1/3/2;align-self:start}
  body.product-body .off-result-main{grid-area:1/2/3/3;min-width:0}
  body.product-body .off-result-main span{white-space:normal}
  body.product-body .off-result-nutrition{grid-area:1/3/2/4;align-self:start;margin:0}
  body.product-body .off-result>.btn{grid-area:2/3/3/4;align-self:end;margin:0;padding:0 var(--sp-3)!important}
  body.product-body .off-result .nutrition-details{grid-area:3/1/4/4}
  body.product-body .filter-bar{margin:var(--sp-2) 0}
  body.product-body .scan-status:empty{display:none}
  body.product-body .catalog-meta{padding:var(--sp-2) var(--sp-1)}
  body.product-body .results-title{margin:var(--sp-1) var(--sp-1) var(--sp-2)}
}
@media(prefers-reduced-motion:reduce){body.product-body .catalog-facets>summary::after,body.product-body .facet-group>summary::after{transition:none}}
/* U5b Produktpruefung: Basis-Hinweis in Mikro-Schrift statt 8 px */
body.product-body .basis-badge{padding:var(--sp-1) var(--sp-3);border-radius:var(--radius-pill);font-size:var(--fs-micro)!important;font-weight:600;color:var(--muted)}
@media(max-width:650px){body.product-body .basis-badge{align-self:flex-start}}
/* U5b Einstellungen: eine Spalte nach Haeufigkeit, seltene Bereiche als Aufklapper, Sprungliste am Handy */
body.product-body .settings-stack{display:grid;gap:var(--sp-4);max-width:46rem}
body.product-body .settings-stack>.card{margin:0}
body.product-body .settings-stack .card-body>form+form,body.product-body .settings-stack .card-body>form+div{margin-top:var(--sp-4)}
body.product-body .settings-fold>summary.card-header::after{content:"\f282";font-family:"bootstrap-icons";font-weight:400;font-size:1rem;color:var(--muted);margin-left:auto;transition:transform .15s}
body.product-body .settings-fold[open]>summary.card-header::after{transform:rotate(180deg)}
body.product-body .settings-fold>summary.card-header::-webkit-details-marker{display:none}
body.product-body .settings-fold>summary.card-header h2{flex:1;min-width:0}
body.product-body .settings-fold.border-danger>summary.card-header::after{color:var(--danger)}
body.product-body .settings-jump{display:none}
body.product-body .settings-jump ul{display:flex;flex-wrap:wrap;gap:var(--sp-2);list-style:none;margin:0 0 var(--sp-4);padding:0}
body.product-body .settings-jump a{display:inline-flex;align-items:center;min-height:var(--h-md);padding:0 var(--sp-3);border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  background:var(--surface);color:var(--ink);font-size:var(--fs-small);font-weight:600;text-decoration:none}
body.product-body .settings-jump a:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
body.product-body .settings-jump a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
body.product-body .settings-stack>.card{scroll-margin-top:var(--sp-4)}
@media(max-width:760px){body.product-body .settings-jump{display:block}}
@media(prefers-reduced-motion:reduce){body.product-body .settings-fold>summary.card-header::after{transition:none}}
body.product-body .settings-page .card-header h2 .bi{display:none}
body.product-body .settings-page>.settings-jump,body.product-body .settings-page>.settings-stack{margin-top:var(--sp-4)}
body.product-body .settings-page>.alert{margin-top:var(--sp-4)}
body.product-body .settings-page>.alert+.settings-stack{margin-top:0}
@media(max-width:760px){
  body.product-body .settings-page>.settings-jump{margin-top:var(--sp-3)}
  body.product-body .settings-page .input-group{display:grid;gap:var(--sp-2)}
  body.product-body .settings-page .input-group>.form-control,body.product-body .settings-page .input-group>.btn{border-radius:var(--radius-s)!important;width:100%}}
/* U5b Einkauf: Zeitraum einklappbar, Tageschips mit Mindestbreite, Datum bricht nicht ab */
body.product-body .shopping-range-fold{margin:0 0 var(--sp-3)}
body.product-body .shopping-range-fold>summary{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--h-md);padding:0 var(--sp-3);border:1px solid var(--line-strong);border-radius:var(--radius-s);
  background:var(--surface);color:var(--accent);font-size:var(--fs-body);font-weight:600;list-style:none;cursor:pointer}
body.product-body .shopping-range-fold>summary::-webkit-details-marker{display:none}
body.product-body .shopping-range-fold>summary::after{content:"\f282";font-family:"bootstrap-icons";font-weight:400;margin-left:auto;color:var(--muted);transition:transform .15s}
body.product-body .shopping-range-fold[open]>summary::after{transform:rotate(180deg)}
body.product-body .shopping-range-fold>summary:hover{background:var(--accent-soft);border-color:var(--accent)}
body.product-body .shopping-range-fold>summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
body.product-body .shopping-range-fold>.shopping-range{margin:var(--sp-3) 0 0}
body.product-body .shopping-range label{display:grid;gap:var(--sp-1);font-size:var(--fs-small);font-weight:600}
body.product-body .shopping-days{grid-template-columns:repeat(auto-fill,minmax(3.25rem,1fr));gap:var(--sp-1)}
body.product-body .shopping-days .btn{flex-direction:column;gap:0;padding:var(--sp-1)!important;min-width:3.25rem;line-height:1.25;white-space:nowrap}
body.product-body .shopping-days .btn small{font-size:var(--fs-micro);font-weight:600}
@media(prefers-reduced-motion:reduce){body.product-body .shopping-range-fold>summary::after{transition:none}}
/* U5b Feldtexte: Auswahlfelder schneiden nicht mehr mit festem Rand ab; Einheit neben Zahl hat Mindestbreite */
body.product-body .form-select{padding-right:2rem;background-position:right .625rem center;text-overflow:ellipsis}
body.product-body .input-group>.form-control{flex:1 1 4rem;min-width:4rem}
body.product-body .input-group>.form-select{flex:0 0 auto;width:auto;min-width:8.5rem;max-width:60%}
body.product-body select.quantity-item{font-size:var(--fs-small)!important}
/* U5b Ueberlauf bei 768 px: Seitenleiste ist noch sichtbar, Inhalt ist nur ca. 500 px breit */
body.product-body .recap-action-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,11.5rem),1fr))}
body.product-body .recap-action-card{min-width:0;overflow-wrap:anywhere}
body.product-body .recap-action-card>span{min-width:0}
body.product-body .coach-page-heading{flex-wrap:wrap}
body.product-body .coach-heading-actions{flex-wrap:wrap;flex-shrink:1;min-width:0;max-width:100%}
body.product-body .coach-heading-actions .btn{max-width:100%}
body.product-body .community-page .card-body .d-flex.justify-content-between{flex-wrap:wrap;gap:var(--sp-1)}
@media(min-width:761px) and (max-width:1099px){body.product-body .community-page .row-cols-md-3>*{flex:0 0 auto;width:50%}}
/* U5b Katalogzeile: ohne Naehrwertspalte (Einfach-Modus) steht der Knopf mittig neben dem Text */
@media(max-width:650px){body.product-body .off-result:not(:has(>.off-result-nutrition))>.btn{grid-area:1/3/4/4;align-self:center}body.product-body .off-result:not(:has(>.off-result-nutrition)) .nutrition-details{grid-area:3/2/4/3}}

/* Hinweis am Rand: zeigt eine Meldung, die nach dem Abschicken oben ausserhalb des Sichtbereichs liegt (main.js) */
.flash-toast-region{position:fixed;z-index:1050;left:50%;bottom:var(--sp-4);transform:translateX(-50%);width:min(calc(100% - 2 * var(--sp-4)),32rem);
  display:grid;gap:var(--sp-2);pointer-events:none}
.flash-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border:1px solid var(--info-line);
  border-left-width:4px;border-radius:var(--radius-s);background:var(--info-bg);color:var(--info);box-shadow:var(--shadow-2);font-size:var(--fs-body);line-height:1.5}
.flash-toast-success{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.flash-toast-warning{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.flash-toast-danger{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}
.flash-toast-text{flex:1;min-width:0;overflow-wrap:anywhere}
.flash-toast-close{flex:none;display:grid;place-items:center;width:var(--h-md);height:var(--h-md);margin:calc(-1 * var(--sp-3)) calc(-1 * var(--sp-3)) calc(-1 * var(--sp-3)) 0;
  border:0;background:transparent;color:inherit;border-radius:var(--radius-s);cursor:pointer}
.flash-toast-close:hover{background:#00000012}
.flash-toast-close:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
/* mobil ueber der unteren Navigation (64 px + Sicherheitsrand) */
@media(max-width:760px){.flash-toast-region{bottom:calc(64px + env(safe-area-inset-bottom,0px) + var(--sp-3))}}

/* ===== Eigenes Symbol „Läufer“ für Training (Bootstrap Icons hat keinen). Zeichnung als Maske, Farbe = Schriftfarbe. ===== */
.bi-runner::before{content:""!important;display:inline-block;width:1em;height:1em;vertical-align:-.125em;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.8' cy='2.2' r='1.65' fill='black' stroke='none'/%3E%3Cpath d='M9.5 5 7.5 9.2M9.5 5l1.9 2.2 2.3.3M9.5 5 6.7 5.5 5.1 7.6M7.5 9.2l2.6 1.6-.6 3.9M7.5 9.2 6.2 12 2.8 12.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.8' cy='2.2' r='1.65' fill='black' stroke='none'/%3E%3Cpath d='M9.5 5 7.5 9.2M9.5 5l1.9 2.2 2.3.3M9.5 5 6.7 5.5 5.1 7.6M7.5 9.2l2.6 1.6-.6 3.9M7.5 9.2 6.2 12 2.8 12.5'/%3E%3C/svg%3E") center/contain no-repeat}

/* ===== Glas („Liquid Glass“, iOS 26): schwebende Bedienelemente aus Glas über dem Inhalt.
   Apples klares Glas verwischt den Hintergrund kaum (Lesbarkeit über Tönung und Schatten an Schrift und Symbolen),
   darum bestimmt der Weichzeichner die Stufe: klar 2 px, milchig 10 px, deckend ohne. Lichtkante oben und an den Seiten
   (schmale innere helle Schatten) und ein leichter Glanzverlauf ersetzen die Lichtbrechung, die Safari mit
   backdrop-filter nicht kann (SVG-Displacement nur in Chromium). ===== */
body.product-body{
  --glass-bg:linear-gradient(to bottom,rgba(255,255,255,.24),rgba(255,255,255,.05) 55%,rgba(255,255,255,.1));
  --glass-bg-strong:linear-gradient(to bottom,rgba(255,255,255,.26),rgba(255,255,255,.06) 55%,rgba(255,255,255,.12));
  --glass-blur:blur(2px) saturate(170%) brightness(1.03);
  /* Heller Schein um Schrift und Symbole: lesbar über jedem Inhalt hinter dem klaren Glas. */
  --glass-text-glow:0 0 2px #fff,0 0 7px rgba(255,255,255,.95),0 0 14px rgba(255,255,255,.7);
  --glass-edge:rgba(255,255,255,.75);
  /* Feine dunkle Außenkante: hält klares Glas auch auf hellem Grund als Fläche erkennbar. */
  --glass-shadow:0 0 0 .5px rgba(32,44,40,.16),0 10px 30px rgba(32,44,40,.16),0 2px 6px rgba(32,44,40,.08);
  --glass-light:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35),
    inset 1px 0 0 rgba(255,255,255,.3),inset -1px 0 0 rgba(255,255,255,.3);
  /* Aktive Seite: kräftige Füllung und grüner Rand, damit sie sich auch vom klaren Glas abhebt. */
  --glass-active:rgba(221,235,224,.92);
  --glass-active-edge:rgba(49,94,75,.32);
}
/* Stufe am Konto (Einstellungen → Anzeige → Leisten; base.html setzt html[data-glass] aus UserPreferences.glass_level):
   „klar“ ist der Standard oben; „milchig“ mit mittlerem Weichzeichner und mehr Weiß; „deckend“ ohne Durchsicht – so auch
   bei „Transparenz reduzieren“. */
html[data-glass="milchig"] body.product-body{--glass-bg:rgba(255,255,255,.34);--glass-bg-strong:rgba(255,255,255,.32);
  --glass-blur:blur(10px) saturate(180%);
  --glass-light:inset 0 1.5px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.3),inset 0 0 10px rgba(255,255,255,.2)}
html[data-glass="deckend"] body.product-body{--glass-bg:var(--surface);--glass-bg-strong:var(--surface);--glass-blur:none;
  --glass-active:var(--accent-soft);--glass-text-glow:none}
@media(prefers-reduced-transparency:reduce){body.product-body,html[data-glass] body.product-body{--glass-bg:var(--surface);--glass-bg-strong:var(--surface);
  --glass-blur:none;--glass-active:var(--accent-soft);--glass-text-glow:none}}
body.product-body .product-mobile-nav,body.product-body .topbar-history:not([hidden]),
body.product-body .topbar-account>.topbar-action,body.product-body .product-mobile-brand{
  background:var(--glass-bg);border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow),var(--glass-light)}

/* ----- Untere Leiste (Handy): schwebende Kapsel. Belegt wie bisher 64 px + Sicherheitsabstand (56 px + 8 px Luft),
   damit Seiten, die damit rechnen (scroll-padding, Hinweise, Leisten), nichts ändern müssen. Alle Felder sind immer
   gleich breit (beim Seitenwechsel verschiebt sich nichts); die Blase der aktiven Seite ist ein eigenes Element. ----- */
body.product-body .product-mobile-nav{z-index:30;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom,0px));height:56px;padding:4px;
  display:flex;gap:2px;border-radius:var(--radius-pill);background:var(--glass-bg-strong)}
body.product-body .product-mobile-nav>a{flex:1 1 0;min-width:0}
body.product-body .product-mobile-nav>a{display:grid;justify-items:center;align-content:center;gap:1px;
  height:100%;min-height:0;padding:0;font-size:11px;font-weight:500;letter-spacing:-.005em;line-height:1.2;color:var(--ink);text-decoration:none;white-space:nowrap;
  border:1px solid transparent;border-radius:var(--radius-pill);-webkit-tap-highlight-color:transparent;
  transition:background-color .15s,box-shadow .15s,transform .1s}
body.product-body .product-mobile-nav>a>i{font-size:20px;line-height:1}
body.product-body .product-mobile-nav>a.active{color:var(--accent);font-weight:700}
/* Die Blase der aktiven Seite ist ein eigenes, leeres Element hinter Symbol und Text (base.html: span.nav-pill in jedem
   Knopf, sichtbar nur im aktiven). So gleitet beim Seitenwechsel nur die Blase, Symbole und Texte bleiben stehen. */
/* Keine eigene Ebene je Knopf: alle Blasen (z-index -1) liegen in der Ebene der Leiste hinter allen Symbolen, auch
   wenn eine beim Gleiten über die Nachbarn hinwegläuft. */
body.product-body .product-mobile-nav>a{position:relative}
/* Die Blase darf ein paar Pixel über ihr Feld hinausragen, damit auch „Kochbuch“ darin Luft hat. */
body.product-body .nav-pill{display:none;position:absolute;inset:0 -4px;z-index:-1;border-radius:var(--radius-pill);background:var(--glass-active);
  border:1px solid var(--glass-active-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 10px rgba(49,94,75,.22);pointer-events:none}
body.product-body .product-mobile-nav>a.active>.nav-pill{display:block}
body.product-body .product-mobile-nav>a:active{transform:scale(.95)}
body.product-body .product-mobile-nav>a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media(max-width:360px){body.product-body .product-mobile-nav{left:6px;right:6px;padding:3px}
  body.product-body .product-mobile-nav>a>i{font-size:19px}
  body.product-body .product-mobile-nav>a{font-size:min(11px,3vw)}}
@media(prefers-reduced-motion:reduce){body.product-body .product-mobile-nav>a{transition:none}}
/* ----- Obere Leiste: auf dem Handy ohne eigene Fläche; Zurück/Vorwärts (eine Glas-Kapsel, links), Markenzeichen
   (Glas-Kapsel, mittig), rechts Coach und „Du“ (zwei Glas-Kreise, templates/me.html) schweben über dem Inhalt.
   Zurück/Vorwärts nur in der installierten App (static/history-nav.js blendet sie ein; ohne JS bleiben sie aus).
   Chevrons statt Pfeil: die „← Zurück zu …“-Links bleiben. ----- */
body.product-body .topbar-history{display:flex;gap:0;flex:0 0 auto;padding:2px;border-radius:var(--radius-pill)}
body.product-body .topbar-history[hidden]{display:none}
body.product-body .topbar-history-btn{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;
  border-radius:var(--radius-pill);background:transparent;color:var(--accent);font-size:19px;transition:background-color .15s}
body.product-body .topbar-history-btn:hover:not(:disabled),body.product-body .topbar-history-btn:active:not(:disabled){background:rgba(255,255,255,.6)}
body.product-body .topbar-history-btn:disabled{color:var(--line-strong);cursor:default}
body.product-body .topbar-history-btn:focus-visible{outline:3px solid var(--accent);outline-offset:-1px}
body.product-body .topbar-account>.topbar-action{border-radius:var(--radius-pill)}
@media(min-width:761px){body.product-body .topbar-history{margin-right:auto}}
@media(max-width:760px){
  /* Kein harter Rand: der Inhalt läuft unter einem sanften Verlauf aus (wie der Scroll-Rand in iOS 26). */
  body.product-body .product-topbar{background:linear-gradient(to bottom,rgba(246,247,242,.92) 0%,rgba(246,247,242,.7) 55%,rgba(246,247,242,0) 100%);
    border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;gap:var(--sp-2)}
  /* „Anzeige“ nur als Symbol im Glas-Kreis (Name bleibt für Screenreader). */
  body.product-body .topbar-action>span:not(.topbar-initial){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body.product-body .topbar-account{display:flex;gap:6px;margin-left:auto}
  body.product-body .topbar-account>.topbar-action{width:var(--h-md);height:var(--h-md);min-height:0;padding:0;font-size:18px;color:var(--accent)}
  /* Markenzeichen mittig in einer Glas-Kapsel. Unter 390 px mit Zurück/Vorwärts nur das „n“. */
  body.product-body .product-mobile-brand{position:absolute;left:50%;transform:translateX(-50%);margin:0;height:var(--h-md);
    padding:0 12px 0 7px;gap:6px;border-radius:var(--radius-pill);font-size:14px;white-space:nowrap}
  body.product-body .product-mobile-brand .product-mark{width:28px;height:28px;font-size:17px;border-radius:var(--radius-pill)}
}
/* Unter 390 px mit Zurück/Vorwärts: Markenzeichen nur als „n“ (Regel unten bei Coach/„Du“). */
body.product-body .product-mobile-nav>a,body.product-body .topbar-history-btn,
body.product-body .topbar-account>.topbar-action,body.product-body .product-mobile-brand-name{text-shadow:var(--glass-text-glow)}
/* Markenzeichen oben ist ein Link zu „Heute“ (static/main.js: auf Heute nach oben scrollen). */
body.product-body a.product-mobile-brand{color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .1s}
body.product-body a.product-mobile-brand:active{transform:translateX(-50%) scale(.96)}
body.product-body a.product-mobile-brand:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){body.product-body a.product-mobile-brand{transition:none}}
/* Seitenfuß (Handy): keine eigene weiße Fläche und Linie hinter der schwebenden Leiste, und auf jeder Seite genug Abstand,
   damit „© …“ und die Links über der Leiste stehen. */
@media(max-width:760px){body.product-body .product-footer-app{background:transparent;border-top:0;
  padding-bottom:calc(64px + env(safe-area-inset-bottom,0px) + var(--sp-3))}}
/* Federkurve (gedämpfte Feder, leichtes Überschwingen) für Symbol-Pop und Aufploppen der Blase. */
:root{--nf-spring:linear(0.0, 0.023, 0.083, 0.169, 0.271, 0.38, 0.49, 0.595, 0.693, 0.78, 0.856, 0.919, 0.971, 1.012, 1.042, 1.062, 1.076, 1.082, 1.083, 1.081, 1.075, 1.068, 1.059, 1.05, 1.041, 1.032, 1.024, 1.017, 1.011, 1.006, 1.002, 0.998, 0.996, 0.995, 0.994, 0.993, 0.993, 0.993, 0.994, 0.994, 1)}
/* ===== Seitenwechsel: die Blase gleitet (static/nav-glide.js, auf der echten Seite statt per View Transition, weil
   Safari während solcher Übergänge das Glas abschaltet), das Ziel-Symbol ploppt kurz auf. ===== */
body.product-body .product-mobile-nav>a.active>i{animation:nf-icon-pop .42s .26s var(--nf-spring) both}
@keyframes nf-icon-pop{0%{transform:none}40%{transform:scale(1.18)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){body.product-body .product-mobile-nav>a.active>i{animation:none}}
/* Antippen eines anderen Knopfs (static/nav-glide.js, .nf-press): die aktive Blase gibt nach, der berührte Knopf sinkt
   leicht ein. Eigene scale-Eigenschaft, damit sie mit der Gleit-Animation (transform) zusammenspielt. */
body.product-body .nav-pill{transition:scale .2s cubic-bezier(.32,.72,.2,1)}
body.product-body .product-mobile-nav.nf-press>a.active>.nav-pill{scale:.93 .88}
body.product-body .product-mobile-nav>a>i{transition:scale .18s cubic-bezier(.32,.72,.2,1)}
body.product-body .product-mobile-nav>.nf-pressed>i{scale:.86}
/* Stehende Hülle (static/nf-shell.js): neuer Inhalt blendet weich ein; lädt es länger, tritt der alte Inhalt zurück. */
body.product-body main.nf-enter{animation:nf-main-in .22s ease-out both}
@keyframes nf-main-in{from{opacity:0}to{opacity:1}}
html.nf-loading body.product-body main[data-shell-page]{opacity:.55;transition:opacity .2s}
body.product-body main[data-shell-page]:focus{outline:none}
@media(prefers-reduced-motion:reduce){body.product-body .nav-pill,body.product-body .product-mobile-nav>a>i{transition:none}
  body.product-body main.nf-enter{animation:none}}

/* ===== Unterseiten eines Bereichs (templates/_subnav.html): Umschalter unter der Überschrift, flach wie ein
   iOS-Segmented-Control (die Glas-Blase gehört der Leiste). --seg-n Anzahl, --seg-i aktive Stelle (vom Template).
   Die Markierung gleitet beim Seitenwechsel weich ohne Überschwingen (static/nav-glide.js; in der begrenzten Spur
   sähe Überschwingen wie Herausrutschen aus). ===== */
body.product-body .sub-seg{position:relative;display:grid;grid-template-columns:repeat(var(--seg-n,2),minmax(0,1fr));margin:0 0 var(--sp-3);
  padding:3px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--accent-soft)}
body.product-body .sub-seg-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / var(--seg-n,2));
  transform:translateX(calc(var(--seg-i,0) * 100%));border-radius:var(--radius-pill);background:var(--surface);
  border:1px solid var(--line-strong);box-shadow:0 1px 3px rgba(32,44,40,.12)}
body.product-body .sub-seg-item{position:relative;display:grid;place-items:center;min-height:var(--h-md);padding:0 var(--sp-1);
  border-radius:var(--radius-pill);font-size:15px;font-weight:600;color:var(--muted);text-decoration:none;text-align:center;
  line-height:1.2;-webkit-tap-highlight-color:transparent}
body.product-body .sub-seg-item[aria-current="page"]{color:var(--ink);font-weight:700}
body.product-body .sub-seg-item:hover{color:var(--ink)}
body.product-body .sub-seg-item:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media(max-width:360px){body.product-body .sub-seg-item{font-size:14px}}
/* Vier Bereiche (Fortschritt): „Nährwerte“ fett passt bei 390 px nur mit 14 px in seine Spalte. */
@media(max-width:430px){body.product-body .sub-seg[style^="--seg-n:4"] .sub-seg-item{font-size:14px;padding:0 2px}}
@media(max-width:375px){body.product-body .sub-seg[style^="--seg-n:4"] .sub-seg-item{font-size:13px;padding:0 1px}}
@media(max-width:340px){body.product-body .sub-seg[style^="--seg-n:4"] .sub-seg-item{font-size:12px;letter-spacing:-.01em}}
/* Wischen (static/subnav.js): nur der Inhalt unter dem Umschalter bewegt sich; Überschrift, Umschalter und Leisten
   bleiben stehen. Die neue Seite lässt ihn aus der Wischrichtung hereingleiten (auch beim Antippen). */
body.product-body :has(>.sub-seg){overflow-x:clip}
body.product-body .sub-seg~*:not(.shop-toast):not(script){transition:transform .25s cubic-bezier(.32,.72,.2,1),opacity .25s}
body.product-body .sub-swiping>.sub-seg~*:not(.shop-toast):not(script){transform:translateX(var(--sub-dx,0));transition:none}
body.product-body .sub-swipe-out>.sub-seg~*:not(.shop-toast):not(script){transform:translateX(calc(var(--sub-dir,-1) * 35%));opacity:0;
  transition:transform .14s ease-in,opacity .14s ease-in}
html[data-sub-enter="from-right"] body.product-body .sub-seg~*:not(.shop-toast):not(script){animation:nf-sub-in-right .34s cubic-bezier(.32,.72,.2,1) both}
html[data-sub-enter="from-left"] body.product-body .sub-seg~*:not(.shop-toast):not(script){animation:nf-sub-in-left .34s cubic-bezier(.32,.72,.2,1) both}
@keyframes nf-sub-in-right{from{transform:translateX(30%);opacity:0}to{transform:none;opacity:1}}
@keyframes nf-sub-in-left{from{transform:translateX(-30%);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){body.product-body .sub-seg~*:not(.shop-toast):not(script){transition:none!important;animation:none!important}}

/* ===== Kopfzeile rechts: Coach und „Du“ (Avatar mit Anfangsbuchstaben, führt zu templates/me.html). Ersetzen das
   frühere „Mehr“ der unteren Leiste. Am Desktop übernimmt die Seitenleiste (Coach-Knopf, Profilmenü). Aktiv: Ring. ===== */
body.product-body .topbar-initial{font-size:17px;font-weight:800;line-height:1;color:var(--accent)}
body.product-body .topbar-account>.topbar-action.active{background:var(--glass-active);border-color:var(--accent);
  box-shadow:0 0 0 1.5px var(--accent),var(--glass-shadow)}
body.product-body .topbar-account>.topbar-action:active{transform:scale(.94)}
body.product-body .topbar-account>.topbar-action:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media(min-width:761px){body.product-body .topbar-account{display:none}}
@media(max-width:389px){
  body.product-body .product-topbar:has(>.topbar-history:not([hidden])) .product-mobile-brand-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body.product-body .product-topbar:has(>.topbar-history:not([hidden])) .product-mobile-brand{padding:0 8px}}

/* ===== „Du“ (templates/me.html): Kopf mit Avatar, Coach als hervorgehobene Karte, darunter eine ruhige Liste. ===== */
body.product-body .me-page{display:grid;gap:var(--sp-4);max-width:560px}
body.product-body .me-head{display:flex;align-items:center;gap:var(--sp-3)}
body.product-body .me-avatar{flex:0 0 auto;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);font-size:24px;font-weight:800}
body.product-body .me-who{min-width:0}
body.product-body .me-who .page-title{margin:0}
body.product-body .me-who p{margin:0;color:var(--muted);overflow-wrap:anywhere}
body.product-body .me-coach{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-l);
  background:var(--accent);color:#fff;text-decoration:none;box-shadow:var(--shadow-2)}
body.product-body .me-coach>span:nth-child(2){display:grid;flex:1;min-width:0;gap:2px}
body.product-body .me-coach strong{font-size:var(--fs-body)}
body.product-body .me-coach small{opacity:.85}
body.product-body .me-coach-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-m,12px);background:rgba(255,255,255,.18);font-size:20px}
body.product-body .me-coach:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
body.product-body .me-list{display:grid;border:1px solid var(--line);border-radius:var(--radius-l);background:var(--surface);overflow:hidden}
body.product-body .me-list a,body.product-body .me-list button{display:flex;align-items:center;gap:var(--sp-3);min-height:52px;padding:0 var(--sp-4);color:var(--ink);text-decoration:none;font-weight:600}
body.product-body .me-list>*+*{border-top:1px solid var(--line)}
body.product-body .me-list form{margin:0}
body.product-body .me-list button{width:100%;border:0;background:none;text-align:left;font:inherit;font-weight:600}
body.product-body .me-list a>span,body.product-body .me-list button>span{flex:1}
body.product-body .me-list a>i:first-child,body.product-body .me-list button>i:first-child{font-size:19px;color:var(--accent);width:22px;text-align:center}
body.product-body .me-list a>i:last-child,body.product-body .me-list button>i:last-child,body.product-body .me-coach>i:last-child{font-size:14px;opacity:.6}
body.product-body .me-list a:hover,body.product-body .me-list a:focus-visible,body.product-body .me-list button:hover,body.product-body .me-list button:focus-visible{background:var(--accent-soft)}
body.product-body .me-list a:focus-visible,body.product-body .me-list button:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
body.product-body .me-logout{margin:0}
body.product-body .me-logout button{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);width:100%;min-height:48px;
  border:1px solid var(--line-strong);border-radius:var(--radius-l);background:transparent;color:var(--danger);font-weight:600}

/* ===== Rundgang (static/tour.js, driver.js): Sprechblase in App-Schrift und -Farben, Knöpfe ≥ 44 px. ===== */
.driver-popover.nf-tour{font-family:inherit;border-radius:var(--radius-l,16px);padding:var(--sp-4,16px);max-width:min(340px,calc(100vw - 24px));
  background:var(--surface,#fff);color:var(--ink,#202c28);box-shadow:0 12px 36px rgba(20,40,30,.28)}
.driver-popover.nf-tour .driver-popover-title{font-size:18px;font-weight:800;line-height:1.25}
.driver-popover.nf-tour .driver-popover-description{font-size:15px;line-height:1.45;color:var(--muted,#566a5d)}
.driver-popover.nf-tour .driver-popover-progress-text{font-size:13px;color:var(--muted,#566a5d)}
.driver-popover.nf-tour .driver-popover-footer button{min-height:44px;padding:0 14px;border-radius:999px;font-size:15px;font-weight:700;text-shadow:none;
  border:1px solid var(--accent,#315e4b);background:var(--surface,#fff);color:var(--accent,#315e4b)}
.driver-popover.nf-tour .driver-popover-footer .driver-popover-next-btn{background:var(--accent,#315e4b);color:#fff}
.driver-popover.nf-tour .driver-popover-close-btn{width:44px;height:44px;font-size:22px;color:var(--muted,#566a5d)}