/* Responsive application shell shared by pantry, inspiration, planner and profile. */
html { overflow-x: clip; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { min-width: 320px; overflow-x: clip; }
img, video { max-width: 100%; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(238,123,58,.42);
  outline-offset: 3px;
}
.hero, .workspace, .inspire-main, .planner-main, .profile-main {
  padding-left: max(var(--page-gutter, 40px), env(safe-area-inset-left));
  padding-right: max(var(--page-gutter, 40px), env(safe-area-inset-right));
}
dialog { overscroll-behavior: contain; }
.meal-type-heading {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 22px 0 2px;
  padding: 16px 4px 11px;
  border-bottom: 1px solid var(--line);
}
.meal-type-heading:first-child { margin-top: 0; }
.meal-type-heading > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  color: var(--green);
  background: #eef3d7;
  font-size: 21px;
}
.meal-type-heading h3 { margin: 0; font-family: "Fraunces",serif; font-size: 25px; }
.meal-type-heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.meal-type-heading > strong { color: var(--orange); font: 700 20px "Fraunces",serif; }
.meal-type-heading[data-meal-type="lunch"] > span { background: #f7e5cf; }
.meal-type-heading[data-meal-type="dinner"] > span { color: white; background: var(--green); }

/* Tablet: less chrome, touch-safe controls, useful two-column density. */
@media (min-width: 721px) and (max-width: 1100px) {
  :root { --page-gutter: 24px; }
  .hero { margin-top: 42px; margin-bottom: 52px; }
  .workspace { gap: 18px; padding-bottom: 54px; }
  .pantry-panel { padding: 24px; }
  .recipes-panel { --recipes-panel-gutter: 24px; padding: var(--recipes-panel-gutter); }
  .recipe-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .inspire-main, .planner-main, .profile-main { padding-top: 28px; padding-bottom: 60px; }
  .answer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .result-columns { grid-template-columns: 1fr 1fr; }
  .profile-grid { grid-template-columns: 1fr 1fr; }
  .settings-panel { grid-template-columns: minmax(220px,.7fr) 1.3fr; }
  .profile-main .panel-copy, .profile-main .settings-intro p { font-size: 13px; }
  .profile-main .activity-item strong { font-size: 13px; }
  .profile-main .activity-item span { font-size: 12px; }
  .profile-main .activity-item time { font-size: 12px; }
}

/* Phone shell: compact header and thumb-reachable persistent navigation. */
@media (max-width: 720px) {
  :root { --page-gutter: 16px; }
  .legal-entry-shell { padding:26px 22px; }
  .legal-entry-actions { align-items:stretch; flex-direction:column; text-align:center; }
  .legal-entry-accept { width:100%; }
  .grain { opacity: .1; }

  .hero { margin: 34px auto 40px; }
  h1, .inspire-intro h1, .profile-hero h1 {
    max-width: 100%;
    font-size: clamp(38px,11.5vw,48px);
    line-height: .94;
    letter-spacing: -.04em;
    text-wrap: balance;
  }
  .intro, .inspire-intro > p:last-of-type {
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.6;
  }
  .eyebrow, .kicker { font-size: 12px; }

  .add-form { border-radius: 16px; }
  .entry-fields { grid-template-columns: 1fr; gap: 6px; padding: 7px; }
  .input-wrap { min-width: 0; padding-left: 8px; }
  .input-wrap input { min-width: 0; min-height: 48px; font-size: 16px; }
  .quantity-wrap { grid-template-columns: minmax(68px,1fr) minmax(70px,.8fr); min-width: 0; border-left: 0; }
  .quantity-wrap input, .quantity-wrap select { min-height: 48px; padding: 10px; font-size: 16px; }
  .expiry-wrap { min-height:48px; border-left:0; border-top:1px solid var(--line); padding:6px 9px; }
  .expiry-wrap input { font-size:14px; }
  .primary-button { min-height: 48px; padding: 12px 15px; }
  .receipt-onboarding { grid-template-columns:1fr; gap:14px; padding:19px; }
  .receipt-onboarding-actions { min-width:0; }
  .receipt-onboarding .receipt-onboarding-secondary { min-height:44px; }
  .scan-actions { grid-template-columns: 1fr 1fr; }
  .scan-action { min-width:0; min-height:58px; padding:9px 12px; border-top:1px solid var(--line); }
  .scan-action:nth-of-type(1) { border-left:0; }
  .scan-action strong { font-size: 12px; line-height: 1.25; }
  .scan-action small { display: none; }
  .scan-action .plus-feature-badge { display:none; }

  .workspace { padding-bottom: 34px; gap: 14px; }
  .impact-dashboard { grid-template-columns:1fr; gap:20px; margin:0 16px 18px; padding:22px; border-radius:20px; }
  .impact-dashboard dl { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .impact-dashboard dl>div { padding:12px; border-left:0; border-top:1px solid rgba(255,255,255,.14); }
  .pantry-panel, .recipes-panel { border-radius: 18px; }
  .pantry-panel { padding: 18px; }
  .recipes-panel { --recipes-panel-gutter: 18px; padding: var(--recipes-panel-gutter); }
  .section-heading h2, .recipes-header h2 { font-size: 27px; }
  .pantry-list { grid-template-columns: 1fr; margin-top: 18px; }
  .pantry-item { min-height: 58px; }
  .pantry-item-actions button, .text-button { min-width: 44px; min-height: 44px; }
  .pantry-edit-form input, .pantry-edit-form select { min-height: 44px; font-size: 16px; }
  .pantry-edit-actions button { min-height: 44px; }
  .recipes-header { gap: 14px; margin-bottom: 14px; }
  .servings-control { min-height: 50px; }
  .servings-control button { min-width: 44px; min-height: 44px; }
  .recipe-filters { gap: 8px; padding: 9px; }
  .recipe-filter-drawer>summary { min-height:44px; padding:0 10px; }
  .recipe-discovery { grid-template-columns: auto auto minmax(0,1fr); gap: 8px; }
  .recipe-discovery .recipe-search { grid-column: 1 / -1; }
  .recipe-search { min-height: 50px; }
  .recipe-search input { min-height: 48px; font-size: 16px; }
  .favorites-filter, .use-first-filter { min-height: 44px; width: 100%; padding: 0 8px; gap: 6px; font-size: 12px; white-space: nowrap; }
  .use-first-filter > span:first-child { display: none; }
  .own-recipes-link { min-height:48px; }
  .filter-chip, .select-filter select { min-height: 46px; font-size: 13px; }
  .recipe-grid { grid-template-columns: 1fr; gap: 12px; }
  .recipe-card { border-radius: 14px; }
  .recipe-info h3 { font-size: 21px; }
  .recipe-info p { font-size: 12px; }
  .results-line { align-items: flex-start; gap: 12px; }
  .recipe-group-heading { gap: 8px; padding: 11px; }
  .recipe-group-heading small { max-width: 46%; line-height: 1.35; }
  .meal-type-heading { grid-template-columns: 40px minmax(0,1fr) auto; gap: 10px; margin-top: 26px; padding-top: 12px; }
  .meal-type-heading > span { width: 40px; height: 40px; }
  .meal-type-heading h3 { font-size: 23px; }
  .meal-type-heading p { font-size: 12px; }

  /* Mobile dialogs behave like bottom sheets and remain keyboard-safe. */
  dialog, #scan-dialog, .recipe-picker {
    width: 100%;
    max-width: none;
    max-height: min(92dvh,900px);
    margin: auto 0 0;
    border-radius: 22px 22px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  #cook-mode-dialog { padding: 0; }
  .dialog-shell, .scan-dialog-shell, .picker-shell { padding: 24px 16px 22px; }
  #recipe-dialog .dialog-shell { padding-bottom: 132px; }
  .dialog-photo { width: calc(100% + 32px); margin: -24px -16px 14px; border-radius: 22px 22px 0 0; }
  .close-button, .picker-close { width: 44px; height: 44px; right: 12px; top: 12px; }
  .fat-controls, .score-reasons { grid-template-columns: 1fr; }
  .nutrition-summary { min-height: 72px; padding: 10px 12px; }
  .nutrition-body { padding: 5px 12px 14px; }
  .nutrition-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .nutrition-grid span { white-space: normal; }
  .ingredient-list li, .steps-list li { font-size: 14px; }
  .ingredient-status-marker, .optional-toggle, .optional-toggle > span:not(.sr-only) { width: 44px; height: 44px; }
  .ingredient-status-marker { flex-basis: 44px; }
  .recipe-conversion-actions button, .fat-controls select { min-height: 44px; }
  #recipe-dialog[open] .recipe-action-dock { position: fixed; z-index: 5; left: 10px; right: 10px; bottom: max(10px,env(safe-area-inset-bottom)); margin: 0; padding: 10px; border: 1px solid rgba(28,43,34,.12); border-radius: 17px; background: rgba(251,250,245,.96); box-shadow: 0 12px 36px rgba(13,31,20,.22); backdrop-filter: blur(14px); }
  .native-ad-active #recipe-dialog[open] .recipe-action-dock { bottom: calc(var(--native-ad-height, 58px) + 10px); }
  .cook-mode-header { grid-template-columns: auto minmax(0,1fr); gap: 11px; padding-inline: 14px; }
  .cook-mode-exit { width: 44px; height: 44px; }
  .cook-mode-device-actions { grid-column: 1/-1; justify-content: space-between; }
  .wake-status { max-width: 64%; text-align: left; }
  .cook-mode-stage { --cook-stage-gutter: 18px; padding: 28px var(--cook-stage-gutter) 24px; }
  .cook-mode-stage h3 { margin: 14px 0 18px; font-size: clamp(38px,12vw,56px); }
  .cook-step-copy { font-size: 19px; line-height: 1.55; }
  .cook-ingredients { margin-top: 24px; }
  .cook-ingredients ul { grid-template-columns: 1fr; }
  .cook-step-guidance { grid-template-columns: 1fr; gap: 8px; margin-top: 24px; }
  .cook-step-guidance p { padding: 13px 14px; font-size: 13px; }
  .cook-timer { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .cook-timer > span { align-self: end; }
  .cook-timer > strong { text-align: right; }
  .cook-timer > div { grid-column: 1/-1; }
  .cook-timer button { flex: 1; min-height: 44px; }
  .cook-mode-footer { grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px max(12px,env(safe-area-inset-bottom)); }
  .cook-step-dots { grid-column: 1/-1; grid-row: 1; min-height: 22px; }
  .cook-mode-footer > button { grid-row: 2; min-height: 52px; padding-inline: 12px; }
  .scan-tabs button, .scan-primary, .scan-secondary { min-height: 48px; font-size: 13px; }
  .manual-code > div { grid-template-columns: minmax(0,1fr); gap: 5px; }
  .manual-code input, .manual-code button { min-height: 46px; font-size: 16px; }
  .product-fields { grid-template-columns: 1fr; }
  .product-fields label:first-child { grid-column: auto; }
  .product-fields input, .product-fields select { min-height: 46px; font-size: 16px; }
  .receipt-workspace { grid-template-columns: 1fr; }
  .receipt-workspace > img { height: 190px; }
  .receipt-text-wrap textarea { min-height: 160px; font-size: 14px; }
  .receipt-item { grid-template-columns: 44px minmax(0,1fr); gap: 7px; padding: 8px; }
  .receipt-item > input, .receipt-item > select { grid-column: 2; min-height: 44px; font-size: 16px; }
  .receipt-check { grid-row: 1/5; width: 44px; height: 44px; }
  .receipt-check > span:not(.sr-only) { width: 30px; height: 30px; }

  /* Inspiration */
  .inspire-main { padding-top: 26px; padding-bottom: 40px; }
  .inspire-intro { margin-bottom: 28px; }
  .intro-stats { gap: 6px; }
  .intro-stats span { padding: 7px 9px; font-size: 12px; }
  .quiz-card { padding: 18px; border-radius: 18px; }
  .progress-track { margin-bottom: 26px; }
  .question-title { font-size: clamp(29px,9vw,40px); }
  .question-help { font-size: 14px; line-height: 1.5; }
  .answer-grid { grid-template-columns: 1fr; gap: 8px; }
  .answer-option { min-height: 64px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 12px 14px; }
  .answer-icon { flex: 0 0 28px; text-align: center; }
  .answer-option strong { font-size: 15px; }
  .answer-option small { font-size: 12px; }
  .quiz-actions { position: sticky; bottom: 0; padding-top: 10px; background: var(--paper); }
  .quiz-actions button { flex: 1; min-height: 48px; }
  .result-card { border-radius: 18px; }
  .result-body { padding: 18px; }
  .result-body h2 { font-size: 39px; }
  .result-columns, .price-location-row, .preview-actions { grid-template-columns: 1fr; }
  .missing-panel, .recipe-preview { padding: 16px; }
  .live-price-box { align-items: stretch; flex-direction: column; }
  .live-price-box button, .bring-share, .open-recipe, .plan-result { min-height: 46px; font-size: 13px; }
  .shopping-list li { font-size: 14px; }
  .result-actions { flex-direction: column; }
  .result-actions button { min-height: 44px; }

  /* Profile */
  .profile-main { padding-top: 16px; padding-bottom: 34px; }
  .profile-hero { grid-template-columns: 68px minmax(0,1fr); gap: 14px; margin: 20px 0 28px; }
  .profile-avatar { width: 64px; height: 64px; border-radius: 22px; font-size: 22px; }
  .profile-hero .eyebrow { margin-bottom: 7px; }
  .profile-hero h1 { font-size: clamp(35px,10vw,46px); }
  /* Auf dem Handy wird der Einstellungslink zum Zahnrad oben rechts statt zu einer leeren Kachel. */
  .profile-hero { position: relative; align-items: start; }
  .settings-jump { position: absolute; top: -6px; right: 0; width: 44px; min-height: 44px; justify-content: center; padding: 0; border-radius: 50%; }
  .settings-jump span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .profile-grid, .settings-panel, .settings-form { grid-template-columns: 1fr; }
  .profile-panel { padding: 18px; border-radius: 18px; }
  .profile-main .panel-copy, .profile-main .settings-intro p { font-size: 14px; }
  .profile-main .quiet-button { min-height: 44px; font-size: 12px; }
  .activity-item { grid-template-columns: 44px 1fr; gap: 10px; padding: 14px 0; }
  .activity-avatar { width: 40px; height: 40px; font-size: 12px; }
  .profile-main .activity-item strong { font-size: 14px; }
  .profile-main .activity-item span { font-size: 13px; line-height: 1.45; }
  .profile-main .activity-item time { font-size: 12px; }
  .new-list-form { grid-template-columns: 1fr; }
  .new-list-form input, .new-list-form button { min-height: 48px; font-size: 16px; }
  .personal-list > header { align-items: flex-start; }
  .list-actions button { min-height: 44px; padding: 8px 11px; font-size: 12px; }
  .list-items li { grid-template-columns: 44px minmax(0,1fr) 44px; min-height: 54px; font-size: 14px; }
  .list-items input, .list-items button { width: 44px; height: 44px; }
  .list-add { grid-template-columns: minmax(0,1fr) 62px 72px 44px; padding: 10px; }
  .list-add input, .list-add select, .list-add button { min-height: 44px; height: 44px; font-size: 16px; }
  .settings-panel { gap: 22px; }
  .settings-form > label, .settings-form fieldset { font-size: 13px; }
  .settings-form input, .settings-form select, .save-settings { min-height: 48px; height: 48px; font-size: 16px; }
  .color-choice span { width: 40px; height: 40px; }
  .toggle-setting input { width: 24px; height: 24px; }
  .settings-status { font-size: 12px; }
}

@media (max-width: 390px) {
  :root { --page-gutter: 12px; }
  .primary-button span { display: none; }
  .scan-actions { grid-template-columns: 1fr; }
  .scan-action { border-left:0; }
  .scan-action .plus-feature-badge { width: fit-content; white-space: normal; }
  .scan-action-icon { width: 30px; height: 30px; }
  .custom-item-form, .list-add { grid-template-columns: minmax(0,1fr) 64px 44px; }
  .custom-item-form > :first-child, .list-add > :first-child { grid-column: 1/-1; }
  .custom-item-form select, .list-add select { grid-column: 1; }
  .profile-panel { padding: 15px; }
  .panel-heading { gap: 8px; }
}

@media (pointer: coarse) {
  button, [role="button"], summary, .topnav a { touch-action: manipulation; }
  .filter-chip, .answer-option, .result-actions button, .list-actions button { min-height: 44px; }
}

/* Kurze Tablet-/Handy-Ansichten und Querformat: Navigation bleibt einzeilig
   sichtbar, während ausschließlich der Anleitungsbereich scrollt. */
@media (pointer: coarse) and (max-height: 650px) {
  .cook-mode-header { grid-template-columns: auto minmax(0,1fr) auto; gap: 9px; padding: max(8px,env(safe-area-inset-top)) 12px 8px; }
  .cook-mode-exit { width: 42px; height: 42px; }
  .cook-mode-device-actions { grid-column: auto; }
  .wake-status { display: none; }
  #cook-fullscreen-toggle { min-height: 40px; padding-inline: 10px; }
  .cook-mode-stage { --cook-stage-gutter: 18px; padding: 16px var(--cook-stage-gutter) 18px; }
  .cook-mode-stage h3 { margin: 9px 0 13px; font-size: clamp(31px,7vw,46px); }
  .cook-step-copy { font-size: 17px; line-height: 1.45; }
  .cook-ingredients { margin-top: 15px; }
  .cook-ingredients ul { grid-template-columns: 1fr 1fr; }
  .cook-ingredients li { padding-block: 7px; font-size: 16px; }
  .cook-step-guidance { margin-top: 15px; }
  .cook-mode-footer { grid-template-columns: minmax(110px,1fr) auto minmax(110px,1fr); gap: 8px; padding: 8px 12px max(8px,env(safe-area-inset-bottom)); }
  .cook-step-dots { grid-column: 2; grid-row: 1; min-height: 0; }
  .cook-mode-footer > button { grid-row: 1; min-height: 46px; }
}

@media (max-height: 480px) {
  .cook-step-dots { display: none; }
  .cook-mode-footer { grid-template-columns: 1fr 1fr; }
}

@media (hover: none) {
  .primary-button:hover, .scan-action:hover, .recipe-card:hover, .answer-option:hover { transform: none; }
  .recipe-card:hover .recipe-image { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .topbar, .grain, button, dialog { display: none !important; }
  body { padding: 0; background: white; }
  .workspace, .planner-layout, .profile-grid, .settings-panel, .result-columns { display: block; padding: 0; }
  .pantry-panel, .recipes-panel, .weekly-shop, .profile-panel, .result-card { break-inside: avoid; box-shadow: none; }
}