:root {
      --primary: #154577;
      --primary-dark: #10365d;
      --primary-light: #245b91;
      --accent: #154577;
      --accent-light: #367bb8;
      --brand: #154577;
      --line: #d7e2ee;
      --ink: #0b1c2d;
      --muted: #5e6877;
      --onbg: #edf3f9;
      --shadow-sm: 0 2px 6px rgba(0, 61, 92, 0.08);
      --shadow-md: 0 10px 25px rgba(0, 61, 92, 0.15);
      --text: #1a1a1a;
      --text-light: #4a4a4a;
      --text-muted: #6b7280;
      --bg: #f4f6f8;
      --white: #ffffff;
      --border: #d1d5db;
      --border-light: #e5e7eb;
      --success: #047857;
      --success-bg: #d1fae5;
      --warning: #b45309;
      --warning-bg: #fef3c7;
      --error: #b91c1c;
      --error-bg: #fee2e2;
    }
    
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: 'Exo', system-ui, -apple-system, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
    
    h1, h2, h3, h4 {
      font-family: 'Rokkitt', Georgia, serif;
      font-weight: 800;
      line-height: 1.2;
    }

    .hero {
      background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
      color: var(--on-primary);
      padding: 60px 20px 80px;
      position: relative;
      overflow: hidden;
    }
    
    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
      opacity: 0.4;
    }
    
    .hero-content {
      max-width: 1200px;
      margin: 0 auto;
      text-align: center;
      position: relative;
      z-index: 1;
    }
/* --- LOGO FIX: keine Invertierung, Logos in Originalfarben --- */
.logo-wrapper{
  display:inline-flex;
  align-items:center;
  gap:16px;
  margin-bottom:14px;
  padding:14px 20px;
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(8px);
  border-radius:999px;
  border:1.5px solid rgba(255,255,255,0.25);
}
.logo-wrapper img{
  height:72px;
  width:auto;
  filter:none !important;          /* <- wichtig */
}

/* Vorsichtshalber auch die Store-Logos „entfärben“ */
.store-card img{ filter:none !important; }

    
    .hero h1 {
      font-size: clamp(32px,5vw,56px);
      margin: 0 0 16px;
      letter-spacing: -1px;
      text-shadow: 0 2px 20px rgba(0,0,0,0.2);
    }
    
    .hero-lead {
      font-size: clamp(16px,2vw,20px);
      opacity: 0.95;
      max-width: 700px;
      margin: 0 auto;
      font-weight: 400;
    }

    .container {
      max-width: 1100px;
      margin: -50px auto 60px;
      padding: 0 20px;
      position: relative;
      z-index: 2;
    }

    .progress-wrap {
      background: var(--white);
      border-radius: 20px;
      padding: 32px;
      margin-bottom: 30px;
      box-shadow: 0 4px 20px rgba(0,61,92,0.08);
    }
    
    .progress-steps {
      display: flex;
      justify-content: space-between;
      position: relative;
      max-width: 700px;
      margin: 0 auto;
    }
    
    .progress-line {
      position: absolute;
      top: 24px;
      left: 60px;
      right: 60px;
      height: 4px;
      background: var(--border-light);
      border-radius: 2px;
    }
    
    .progress-line-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
      transition: width .5s cubic-bezier(.4,0,.2,1);
      width: 0%;
      border-radius: 2px;
    }
    
    .progress-step {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      flex: 1;
    }
    
    .progress-circle {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--white);
      border: 4px solid var(--border);
      display: grid;
      place-items: center;
      font-weight: 800;
      font-size: 18px;
      color: var(--text-muted);
      transition: all .3s ease;
      font-family: 'Exo', sans-serif;
    }
    
    .progress-step.active .progress-circle {
      border-color: var(--primary);
      background: var(--primary);
      color: var(--on-primary);
      transform: scale(1.15);
      box-shadow: 0 4px 16px rgba(0,61,92,0.3);
    }
    
    .progress-step.complete .progress-circle {
      border-color: var(--success);
      background: var(--success);
      color: var(--on-primary);
    }
    
    .progress-label {
      font-size: 13px;
      color: var(--text-muted);
      font-weight: 600;
      text-align: center;
      max-width: 100px;
    }
    
    .progress-step.active .progress-label {
      color: var(--primary);
      font-weight: 700;
    }

    .card {
      background: var(--white);
      border-radius: 20px;
      box-shadow: 0 4px 20px rgba(0,61,92,0.08);
      overflow: hidden;
    }

    .tabs {
      display: flex;
      gap: 0;
      padding: 0;
      border-bottom: 3px solid var(--border-light);
      background: linear-gradient(180deg, #f9fafb 0%, var(--white) 100%);
    }
    
    .tab {
      appearance: none;
      border: 0;
      background: transparent;
      padding: 20px 32px;
      cursor: pointer;
      font-weight: 700;
      color: var(--text-muted);
      transition: all .2s ease;
      position: relative;
      font-size: 16px;
      font-family: 'Exo', sans-serif;
      flex: 1;
      text-align: center;
    }
    
    .tab:hover {
      background: rgba(0,61,92,0.04);
      color: var(--primary);
    }
    
    .tab[aria-selected="true"] {
      color: var(--primary);
      background: transparent;
    }
    
    .tab[aria-selected="true"]::after {
      content: '';
      position: absolute;
      bottom: -3px;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
    }

    .subtabs {
      display: flex;
      gap: 12px;
      padding: 24px;
      border-bottom: 2px solid var(--border-light);
      background: #fafbfc;
      flex-wrap: wrap;
    }
    
    .subtab {
      appearance: none;
      border: 2px solid var(--border);
      background: var(--white);
      padding: 12px 24px;
      border-radius: 50px;
      cursor: pointer;
      font-weight: 700;
      color: var(--text-light);
      transition: all .2s ease;
      font-size: 15px;
      font-family: 'Exo', sans-serif;
    }
    
    .subtab:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,61,92,0.15);
      border-color: var(--primary);
    }
    
    .subtab[aria-selected="true"] {
      background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
      border-color: transparent;
      color: var(--on-primary);
      box-shadow: 0 4px 16px rgba(0,61,92,0.25);
    }

    .panel {
      display: none;
      animation: fadeIn .4s ease;
    }
    
    .panel.active {
      display: block;
    }
    
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(15px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .cat {
      display: none;
    }
    
    .cat.active {
      display: block;
    }
    
    .cat-header {
      display: flex;
      align-items: center;
      gap: 20px;
      justify-content: space-between;
      padding: 28px 32px;
      background: linear-gradient(135deg, #f9fafb 0%, var(--white) 100%);
      border-bottom: 2px solid var(--border-light);
    }
    
    .cat-title {
      font-weight: 800;
      font-size: 24px;
      color: var(--primary);
      font-family: 'Exo', sans-serif;
    }
    
    .cat-controls {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .portion-toggle {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 6px 16px 6px 6px;
      border-radius: 999px;
      border: 2px solid #7dd3fc;
      background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
      color: var(--primary);
      font-weight: 700;
      font-size: 13px;
      cursor: pointer;
      font-family: 'Exo', sans-serif;
      transition: all .2s ease;
    }

    .portion-toggle .toggle-switch {
      flex: 0 0 auto;
    }

    .portion-toggle .toggle-text {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      line-height: 1.3;
    }

    .portion-toggle .icon {
      font-size: 16px;
    }

    .portion-toggle .text-manual {
      display: none;
    }

    .portion-toggle[data-mode="manual"] {
      background: linear-gradient(135deg, var(--warning-bg) 0%, #fde68a 100%);
      border-color: #f59e0b;
      color: var(--warning);
    }

    .portion-toggle[data-mode="manual"] .text-auto {
      display: none;
    }

    .portion-toggle[data-mode="manual"] .text-manual {
      display: inline;
    }

    .portion-toggle:focus-within {
      outline: none;
      box-shadow: 0 0 0 4px rgba(0,136,204,0.2);
    }
    
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border-radius: 50px;
      background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
      color: var(--primary);
      font-weight: 700;
      font-size: 13px;
      border: 2px solid #7dd3fc;
    }
    
    .badge.info {
      background: linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%);
      border-color: #93c5fd;
    }

    .section {
      padding: 32px;
    }
    
    .grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    
    @media (max-width: 768px) {
      .grid-2 {
        grid-template-columns: 1fr;
      }
    }

    .form-group {
      margin-bottom: 0;
    }

    .total-group.manual-active input {
      border-color: #f59e0b;
      background: #fff7ed;
      box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25);
    }

    .total-group.manual-active .help {
      color: var(--warning);
      font-weight: 600;
    }

    .cat.manual-locked .cuts,
    .cat.manual-locked .status,
    .cat.manual-locked .actions {
      opacity: 0.55;
    }

    .cut.locked {
      opacity: 0.6;
      pointer-events: none;
    }

    .toggle-wrap.disabled {
      opacity: 0.6;
      pointer-events: none;
      cursor: not-allowed;
    }
    
    label {
      display: block;
      font-weight: 700;
      margin: 0 0 10px;
      color: var(--text);
      font-size: 15px;
      font-family: 'Exo', sans-serif;
    }
    
    .help {
      font-size: 13px;
      color: var(--text-muted);
      margin-top: 8px;
      line-height: 1.5;
    }

    .date-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    .date-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.3px;
      background: rgba(0, 61, 92, 0.08);
      color: var(--primary);
      text-transform: uppercase;
    }

    .date-pill.blocked {
      background: rgba(185, 28, 28, 0.12);
      color: var(--error);
      border: 1px solid rgba(185, 28, 28, 0.35);
    }

    .calendar {
      margin-top: 14px;
      border: 1px solid var(--border-light);
      border-radius: 18px;
      padding: 16px;
      background: var(--white);
      box-shadow: 0 8px 24px rgba(0, 61, 92, 0.08);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .calendar-month {
      display: grid;
      gap: 12px;
    }

    .calendar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: 'Exo', sans-serif;
      font-weight: 800;
      font-size: 16px;
      color: var(--primary);
      letter-spacing: 0.3px;
      gap: 12px;
    }

    .calendar-nav-btn {
      border: 1px solid var(--border-light);
      border-radius: 12px;
      padding: 6px 12px;
      font-size: 18px;
      background: var(--white);
      color: var(--primary);
      cursor: pointer;
      transition: all .2s ease;
      min-width: 40px;
    }

    .calendar-nav-btn:hover:not(:disabled) {
      background: var(--onbg);
      border-color: var(--accent);
      color: var(--accent);
      box-shadow: 0 6px 16px rgba(0, 107, 166, 0.2);
    }

    .calendar-nav-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
      box-shadow: none;
    }

    .calendar-current {
      flex: 1;
      text-align: center;
      font-size: 17px;
    }

    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 8px;
    }

    .calendar-weekday {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--text-muted);
      text-align: center;
      letter-spacing: 0.4px;
    }

    .calendar-weekday.sun {
      color: var(--error);
    }

    .calendar-spacer {
      height: 1px;
    }

    .calendar-day {
      border: 1px solid var(--border-light);
      border-radius: 12px;
      padding: 10px 0;
      font-weight: 700;
      font-size: 14px;
      background: var(--white);
      color: var(--text);
      text-align: center;
      cursor: pointer;
      transition: all .2s ease;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    }

    .calendar-day:hover,
    .calendar-day:focus {
      outline: none;
      border-color: var(--accent);
      color: var(--primary);
      box-shadow: 0 6px 18px rgba(0, 107, 166, 0.18);
      transform: translateY(-1px);
    }

    .calendar-day.selected {
      background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
      color: var(--on-primary);
      border-color: var(--accent);
      box-shadow: 0 10px 24px rgba(0, 61, 92, 0.3);
    }

    .calendar-day.disabled {
      cursor: not-allowed;
      background: #f3f4f6;
      color: var(--text-muted);
      border-style: dashed;
      box-shadow: none;
      opacity: 0.5;
    }

    .calendar-day.disabled:hover,
    .calendar-day.disabled:focus {
      transform: none;
      border-color: var(--border-light);
      color: var(--text-muted);
      box-shadow: none;
    }

    .calendar-day.today:not(.selected) {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.15);
    }

    .time-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .time-chips button {
      border: none;
      border-radius: 999px;
      padding: 6px 14px;
      background: rgba(0, 61, 92, 0.06);
      color: var(--primary);
      font-weight: 700;
      font-size: 13px;
      cursor: pointer;
      transition: all .2s ease;
      font-family: 'Exo', sans-serif;
      letter-spacing: 0.4px;
    }

    .time-chips button:hover {
      background: rgba(0, 107, 166, 0.18);
    }

    .time-chips button.active {
      background: var(--primary);
      color: var(--on-primary);
      box-shadow: 0 6px 16px rgba(0, 61, 92, 0.25);
    }
    
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
      width: 100%;
      padding: 14px 16px;
      border: 2px solid var(--border);
      border-radius: 12px;
      font: inherit;
      background: var(--white);
      transition: all .2s ease;
      font-size: 15px;
      color: var(--text);
    }
    
    input:not([type="checkbox"]):not([type="radio"]):focus,
    select:focus,
    textarea:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 4px rgba(0,136,204,0.1);
    }

    .toggle-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      font-weight: 700;
      color: var(--text-light);
      font-family: 'Exo', sans-serif;
    }
    
    .toggle-switch {
      position: relative;
      width: 52px;
      height: 28px;
    }
    
    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #cbd5e1;
      border-radius: 50px;
      transition: .3s;
    }
    
    .toggle-slider:before {
      position: absolute;
      content: "";
      height: 22px;
      width: 22px;
      left: 3px;
      bottom: 3px;
      background: white;
      border-radius: 50%;
      transition: .3s;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    
    input:checked + .toggle-slider {
      background: var(--primary);
    }
    
    input:checked + .toggle-slider:before {
      transform: translateX(24px);
    }

    .cuts {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 16px;
      margin-top: 20px;
    }
    
    .cut {
      display: flex;
      align-items: center;
      gap: 16px;
      border: 2px solid var(--border);
      border-radius: 16px;
      padding: 18px;
      background: var(--white);
      min-height: 80px;
      transition: all .25s cubic-bezier(.4,0,.2,1);
      cursor: pointer;
    }
    
    .cut:hover {
      box-shadow: 0 4px 16px rgba(0,61,92,0.12);
      transform: translateY(-2px);
      border-color: var(--primary-light);
    }
    
    .cut:has(.cut-on:checked),
    .cut.on {
      border-color: var(--primary);
      background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
      box-shadow: 0 4px 16px rgba(0,61,92,0.15);
    }

    .cut-on {
      appearance: none;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      border: 3px solid #cbd5e1;
      display: inline-grid;
      place-content: center;
      cursor: pointer;
      background: var(--white);
      flex: 0 0 28px;
      transition: all .2s ease;
    }
    
    .cut-on::before {
      content: "✓";
      font-size: 16px;
      font-weight: 900;
      color: var(--on-primary);
      opacity: 0;
      transform: scale(0);
      transition: all .2s cubic-bezier(.68,-.55,.265,1.55);
    }
    
    .cut-on:checked {
      border-color: var(--primary);
      background: var(--primary);
    }
    
    .cut-on:checked::before {
      opacity: 1;
      transform: scale(1);
    }

    .cut span {
      flex: 1;
      font-weight: 700;
      color: var(--text);
      font-size: 16px;
      font-family: 'Exo', sans-serif;
    }
    
    .cut .kg {
      width: 110px;
      min-width: 110px;
      text-align: right;
      padding: 10px 14px;
      border: 2px solid var(--border);
      background: var(--white);
      outline: none;
      border-radius: 10px;
      font-weight: 700;
      transition: all .2s ease;
    }
    
    .cut .kg:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(0,136,204,0.1);
    }

    .status {
      margin-top: 20px;
      padding: 20px;
      border-radius: 16px;
      border: 2px solid #6ee7b7;
      background: linear-gradient(135deg, var(--success-bg) 0%, #ecfdf5 100%);
      color: var(--success);
      font-size: 15px;
      font-weight: 600;
    }
    
    .status-bar {
      width: 100%;
      height: 10px;
      background: #d1fae5;
      border-radius: 50px;
      margin-top: 10px;
      overflow: hidden;
    }
    
    .status-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--success) 0%, #10b981 100%);
      transition: width .5s cubic-bezier(.4,0,.2,1);
      border-radius: 50px;
    }

    .notice {
      margin-top: 20px;
      padding: 16px 20px;
      border-radius: 16px;
      border: 2px solid #fcd34d;
      background: linear-gradient(135deg, var(--warning-bg) 0%, #fef9c3 100%);
      color: var(--warning);
      font-size: 14px;
      display: flex;
      align-items: start;
      gap: 12px;
    }
    
    .alert {
      margin-top: 20px;
      padding: 16px 20px;
      border-radius: 16px;
      border: 2px solid #fca5a5;
      background: linear-gradient(135deg, var(--error-bg) 0%, #fee2e2 100%);
      color: var(--error);
      font-size: 14px;
      display: flex;
      align-items: start;
      gap: 12px;
    }

    .actions {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: 16px;
      padding: 24px 32px;
      align-items: center;
      border-top: 2px solid var(--border-light);
      background: #fafbfc;
    }

    .cat-nav {
      padding: 0 32px 32px;
      display: flex;
      justify-content: flex-end;
    }

    .cat-nav .btn {
      padding: 12px 24px;
    }
    .btn {
      padding: 14px 28px;
      border-radius: 50px;
      border: 2px solid var(--border);
      background: var(--white);
      cursor: pointer;
      font-weight: 700;
      transition: all .25s ease;
      font-size: 16px;
      font-family: 'Exo', sans-serif;
      color: var(--text);
    }
    
    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0,61,92,0.15);
    }

    .btn:disabled,
    .btn.disabled {
      opacity: 0.45;
      cursor: not-allowed;
      box-shadow: none !important;
      transform: none !important;
    }
    
    .btn.primary {
      background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
      border-color: transparent;
      color: var(--on-primary);
    }
    
    .btn.primary:hover {
      box-shadow: 0 8px 24px rgba(0,61,92,0.3);
      transform: translateY(-3px);
    }
    
    .btn.ghost {
      background: transparent;
      border-color: var(--primary);
      color: var(--primary);
    }
    
    .btn.ghost:hover {
      background: var(--primary);
      color: var(--on-primary);
    }

.store-option{
  display:block;
  cursor:pointer;
  margin-bottom:12px;
}
.store-option input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.store-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border:2px solid var(--line);
  border-radius:14px;
  background:#fff;
  transition:all .2s ease;
  box-shadow:var(--shadow-sm);
}
.store-card img{
  width:90px; height:60px; object-fit:contain;
}
.store-info{flex:1}
.store-name{font-weight:700; color:var(--ink); font-size:15px}
.store-desc{font-size:13px; color:var(--muted)}
.store-option:hover .store-card{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:var(--accent);
}
.store-option input[type="radio"]:checked + .store-card{
  border-color:var(--accent);
  background:linear-gradient(140deg, var(--onbg) 0%, #ffffff 65%, #dbeafe 100%);
  box-shadow:0 6px 24px rgba(0,61,92,0.18), 0 0 0 3px rgba(0,107,166,0.25);
}
.store-option input[type="radio"]:focus-visible + .store-card{
  border-color:var(--accent-light);
  box-shadow:0 0 0 3px rgba(0,136,204,0.4);
}


    .summary-card {
      background: linear-gradient(135deg, #fafbfc 0%, var(--white) 100%);
      border: 2px solid var(--border-light);
      border-radius: 16px;
      padding: 24px;
      margin-bottom: 20px;
    }
    
    .summary-card h3 {
      margin: 0 0 20px;
      color: var(--primary);
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 22px;
    }
    
    .summary-card h3 .emoji {
      font-size: 28px;
    }
    
    .summary table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 16px;
    }
    
    .summary th,
    .summary td {
      padding: 14px;
      border-bottom: 1px solid var(--border-light);
      text-align: left;
    }
    
    .summary th {
      background: #f9fafb;
      font-weight: 700;
      color: var(--text);
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: .5px;
      font-family: 'Exo', sans-serif;
    }
    
    .summary td.num {
      text-align: right;
      font-weight: 700;
      color: var(--primary);
    }
    
    .summary tbody tr:hover {
      background: #f9fafb;
    }

    .field {
      position: relative;
    }
    
    .error-text {
      margin: 8px 0 0;
      font-size: 13px;
      color: var(--error);
      display: none;
      font-weight: 600;
    }
    
    .invalid input,
    .invalid select,
    .invalid textarea {
      border-color: #fca5a5;
      box-shadow: 0 0 0 4px rgba(239,68,68,.12);
    }

    @media (max-width: 768px) {
      .hero {
        padding: 40px 20px 60px;
      }
      .logo-wrapper {
        flex-direction: column;
        gap: 16px;
        padding: 16px 24px;
      }
      .logo-wrapper img {
        height: 60px;
      }
      .hero h1 {
        font-size: 28px;
      }
      .container {
        margin-top: -40px;
      }
      .progress-wrap {
        padding: 24px 16px;
      }
      .progress-steps {
        padding: 0;
      }
      .progress-line {
        left: 40px;
        right: 40px;
      }
      .progress-circle {
        width: 40px;
        height: 40px;
        font-size: 16px;
      }
      .progress-label {
        font-size: 11px;
        max-width: 70px;
      }
      .tabs {
        flex-direction: column;
        gap: 0;
      }
      .tab {
        text-align: left;
        padding: 16px 20px;
      }
      .subtabs {
        gap: 8px;
        padding: 16px;
      }
      .cat-header {
        flex-direction: column;
        align-items: start;
        gap: 16px;
      }
      .section {
        padding: 20px;
      }
      .cut {
        flex-wrap: wrap;
      }
      .cut .kg {
        width: 100%;
        min-width: 100%;
      }
      .store-card {
        flex-direction: column;
        text-align: center;
      }
      .store-card img {
        width: 100px;
        height: auto;
      }
    }

    @media (max-width: 600px) {
      html {
        font-size: 15px;
      }
      body {
        font-size: 0.95rem;
      }
      .card {
        border-radius: 18px;
      }
      .hero-lead {
        font-size: 0.98rem;
        line-height: 1.5;
      }
      .tabs {
        border-radius: 18px 18px 0 0;
      }
      .tab {
        font-size: 0.95rem;
        padding: 14px 18px;
      }
      .subtabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 16px 14px;
        gap: 8px;
        scroll-snap-type: x mandatory;
      }
      .subtabs::-webkit-scrollbar {
        display: none;
      }
      .subtab {
        flex: 0 0 auto;
        padding: 10px 18px;
        font-size: 14px;
        scroll-snap-align: start;
      }
      .cat-header {
        padding: 20px;
        gap: 14px;
      }
      .cat-title {
        font-size: 20px;
      }
      .section {
        padding: 18px 16px;
      }
      .calendar {
        padding: 12px;
        gap: 14px;
      }
      .calendar-grid {
        gap: 6px;
      }
      .calendar-day {
        padding: 8px 0;
        font-size: 13px;
      }
      .time-chips {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }
      .time-chips button {
        width: 100%;
      }
      .cat-nav .btn {
        width: 100%;
      }
      .actions {
        flex-direction: column;
        align-items: stretch;
        padding: 20px 16px;
      }
      .actions .btn,
      .actions .btn.primary {
        width: 100%;
      }
    }

    @media (max-width: 480px) {
      .hero {
        padding: 32px 16px 48px;
      }
      .container {
        margin: -32px auto 50px;
        padding: 0 12px;
      }
      .progress-wrap {
        padding: 20px 12px;
      }
      .progress-line {
        left: 32px;
        right: 32px;
      }
      .progress-circle {
        width: 36px;
        height: 36px;
        font-size: 15px;
      }
      .hero h1 {
        font-size: 24px;
      }
      .hero-lead {
        font-size: 0.92rem;
      }
      .subtabs {
        padding: 12px 10px;
        gap: 6px;
      }
      .subtab {
        padding: 10px 14px;
      }
      .section {
        padding: 16px 14px;
      }
      .grid-2 {
        gap: 14px;
      }
      .time-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
      }
      .calendar {
        padding: 10px;
      }
      .calendar-weekday {
        font-size: 10px;
      }
      .calendar-day {
        border-radius: 10px;
      }
      .actions {
        padding: 18px 12px;
      }
      .help {
        font-size: 12px;
      }
    }

    /* Visual refresh: Schmid typography and a calmer, consistent surface system. */
    .hero {
      background: var(--primary);
      padding: 44px 20px 76px;
    }
    .hero::before { background: none; }
    .logo-wrapper {
      background: var(--white);
      border: 0;
      border-radius: 16px;
      padding: 14px 24px;
      backdrop-filter: none;
    }
    .hero h1 {
      font-size: clamp(34px, 5vw, 58px);
      font-weight: 500;
      letter-spacing: -0.5px;
      text-shadow: none;
      margin-top: 16px;
    }
    .hero-lead { max-width: 640px; font-size: 17px; }
    h1, h2, h3, h4 { font-weight: 500; }
    .cat-title { font-family: 'Rokkitt', Georgia, serif; font-size: 30px; font-weight: 500; }
    .container { max-width: 1120px; }
    .progress-wrap, .card {
      border: 1px solid var(--border-light);
      border-radius: 18px;
      box-shadow: 0 8px 32px rgba(21, 69, 119, 0.06);
    }
    .progress-wrap { padding: 26px 32px; margin-bottom: 24px; }
    .progress-circle { border-width: 2px; font-weight: 600; }
    .progress-step.active .progress-circle { transform: none; box-shadow: 0 0 0 5px var(--onbg); }
    .progress-line, .progress-line-fill { height: 3px; }
    .progress-line-fill, .tab[aria-selected="true"]::after { background: var(--primary); }
    .tabs { background: var(--white); border-bottom-width: 1px; }
    .tab { font-size: 15px; padding: 20px 24px; }
    .tab[aria-selected="true"] { background: var(--onbg); }
    .tab[aria-selected="true"]::after { bottom: -1px; height: 3px; }
    .subtabs { background: var(--white); border-bottom-width: 1px; gap: 10px; }
    .subtab, .btn { border-radius: 12px; border-width: 1px; }
    .subtab { padding: 11px 20px; }
    .subtab[aria-selected="true"], .btn.primary, .calendar-day.selected { background: var(--primary); }
    .subtab[aria-selected="true"] { box-shadow: none; }
    .cat-header { background: #f8fafc; border-bottom-width: 1px; }
    .cut, .store-card, .summary-card { border-width: 1px; box-shadow: none; }
    .cut:hover, .store-option:hover .store-card, .subtab:hover, .btn:hover {
      transform: none;
      box-shadow: 0 4px 12px rgba(21, 69, 119, 0.08);
    }
    .cut:has(.cut-on:checked), .cut.on {
      background: var(--onbg);
      box-shadow: inset 0 0 0 1px var(--primary);
    }
    input:not([type="checkbox"]):not([type="radio"]), select, textarea { border-width: 1px; }
    .cut .kg { border-width: 1px; }
    .calendar { box-shadow: none; border-radius: 14px; }
    .calendar-day { box-shadow: none; }
    .calendar-day.selected { box-shadow: none; }
    .store-option input[type="radio"]:checked + .store-card {
      background: var(--onbg);
      box-shadow: inset 0 0 0 1px var(--primary);
    }
    .summary-card { background: #f8fafc; }
    .portion-toggle, .badge, .badge.info {
      background: var(--onbg);
      border: 1px solid #c5d7e8;
    }
    .portion-toggle[data-mode="manual"] { background: var(--warning-bg); border-color: #f59e0b; }
    .status { background: #effaf5; border-width: 1px; border-color: #a7d8c0; }
    .notice, .alert { border-width: 1px; }
    .actions { background: #f8fafc; border-top-width: 1px; }
    .btn.primary:hover { transform: none; background: var(--primary-dark); box-shadow: 0 4px 12px rgba(21,69,119,0.16); }
    button, input, select, textarea { font-family: 'Exo', sans-serif; }
    button:focus-visible, a:focus-visible, .cut-on:focus-visible {
      outline: 3px solid var(--accent-light);
      outline-offset: 3px;
    }
    @media (max-width: 768px) {
      .hero { padding: 32px 20px 64px; }
      .hero h1 { font-size: clamp(32px, 7vw, 44px); }
      .hero-lead { font-size: 15px; }
      .progress-wrap { padding: 24px 16px; }
      .tab { padding: 16px 20px; }
      .cat-title { font-size: 26px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; transition: none !important; }
    }

    /* Theme surfaces are independent of the white text on brand buttons. */
    :root {
      color-scheme: light;
      --on-primary: #fff;
      --surface-soft: #f8fafc;
      --button-bg: #154577;
    }
    :root[data-theme="dark"] {
      color-scheme: dark;
      --bg: #101923;
      --white: #182634;
      --surface-soft: #1e3042;
      --text: #edf3f9;
      --text-light: #d2dfec;
      --text-muted: #b0c0d0;
      --ink: #edf3f9;
      --muted: #b0c0d0;
      --border: #536779;
      --border-light: #354b60;
      --line: #354b60;
      --onbg: #233d55;
      --primary: #a1cdf4;
      --primary-light: #b6dbfa;
      --accent: #a1cdf4;
      --accent-light: #74b4ed;
      --button-bg: #286394;
      --success: #91e3b9;
      --success-bg: #163e32;
      --warning: #ffdc85;
      --warning-bg: #483719;
      --error: #ffb6b6;
      --error-bg: #48282f;
    }
    .hero { background: #154577; color: var(--on-primary); }
    .logo-wrapper, .store-card img { background: #fff; }
    .store-card img { border-radius: 8px; padding: 4px; }
    .theme-toolbar {
      display: flex; justify-content: flex-end; align-items: center;
      gap: 10px; max-width: 1100px; margin: 0 auto 20px;
    }
    .theme-toolbar label { color: #fff; margin: 0; font-size: 14px; }
    .theme-toolbar select {
      width: auto; min-height: 44px; padding: 8px 12px;
      background: var(--white); color: var(--text); border-color: var(--border);
      font-size: 16px;
    }
    .cat-header, .actions, .summary-card, .subtabs,
    .summary th, .summary tbody tr:hover { background: var(--surface-soft); }
    .store-card { background: var(--white); }
    .btn.primary, .subtab[aria-selected="true"], .calendar-day.selected,
    .progress-step.active .progress-circle, .time-chips button.active,
    .cut-on:checked, .toggle-switch input:checked + .toggle-slider {
      background: var(--button-bg); color: var(--on-primary);
    }
    .progress-step.complete .progress-circle { background: #047857; color: var(--on-primary); }
    .btn.ghost:hover { background: var(--button-bg); color: var(--on-primary); }
    .btn.primary:hover { background: #205883; color: var(--on-primary); }
    .portion-toggle, .badge, .badge.info { border-color: var(--border); }
    .status { background: var(--success-bg); border-color: var(--success); }
    .status-bar { background: var(--border-light); }
    .notice { background: var(--warning-bg); border-color: var(--warning); }
    .alert { background: var(--error-bg); border-color: var(--error); }
    .date-pill { background: var(--onbg); }
    .date-pill.blocked { background: var(--error-bg); border-color: var(--error); }
    .calendar-day.disabled { background: var(--surface-soft); opacity: .65; }
    .time-chips button { background: var(--onbg); }
    .total-group.manual-active input { background: var(--warning-bg); }
    .summary-card [style*="background:#fff"] { background: var(--white) !important; }
    .special-request-item { background: var(--surface-soft); border-color: var(--border-light); }
    a { color: var(--accent); }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { padding-bottom: env(safe-area-inset-bottom, 0px); }
    .hero { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
    @media (max-width: 768px) {
      .theme-toolbar { flex-wrap: wrap; }
      input:not([type="checkbox"]):not([type="radio"]), select, textarea, .cut .kg { font-size: 16px; min-height: 44px; }
      .btn, .subtab, .tab, .time-chips button, .calendar-nav-btn { min-height: 44px; touch-action: manipulation; }
      .calendar-day { min-height: 44px; touch-action: manipulation; }
      .subtabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
      .subtab { min-width: 0; white-space: normal; padding: 10px 6px; font-size: 13px; }
      .cat-header { padding: 20px 16px; }
      .cat-controls { max-width: 100%; flex-wrap: wrap; }
      .portion-toggle { max-width: 100%; }
      .store-card { gap: 10px; padding: 14px 12px; }
      .store-card img { width: 64px; height: 48px; }
      .store-info, .field, .form-group { min-width: 0; }
      .store-desc, .summary-card { overflow-wrap: anywhere; }
      .summary-card { padding: 16px; }
      .summary th, .summary td { padding: 10px 6px; }
      .calendar-grid { gap: 4px; }
    }

    .site-footer {
      border-top: 1px solid var(--border-light);
      background: var(--white);
      color: var(--text);
      padding: 36px max(20px, env(safe-area-inset-right)) max(36px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    }
    .footer-content { max-width: 1080px; margin: 0 auto; }
    .site-footer h2 { color: var(--primary); font-size: 30px; margin-bottom: 20px; }
    .site-footer h3 { font-family: 'Exo', sans-serif; font-size: 16px; font-weight: 600; margin-bottom: 10px; }
    .footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .site-footer address { font-style: normal; }
    .site-footer a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
    .site-footer p { margin: 4px 0; }
    @media (max-width: 768px) {
      .footer-grid { grid-template-columns: 1fr; gap: 20px; }
      .site-footer { padding-top: 28px; }
      .site-footer a { display: inline-block; min-height: 44px; padding: 10px 0; }
    }

    /* Direct theme actions and the original transparent Schmid logo. */
    .logo-wrapper {
      background: transparent; border: 0; padding: 0; border-radius: 0;
      box-shadow: none; backdrop-filter: none;
    }
    .logo-wrapper img { height: 100px; }
    .store-card img[src="logos/metzgerei.png"] { background: transparent; padding: 0; }
    .theme-toolbar { flex-wrap: wrap; color: #fff; }
    .theme-options { display: flex; flex-wrap: wrap; gap: 6px; }
    .theme-options button {
      min-height: 44px; padding: 10px 16px; border: 1px solid #91b4d5;
      border-radius: 10px; background: transparent; color: #fff;
      cursor: pointer; font-size: 14px; font-weight: 600; touch-action: manipulation;
    }
    .theme-options button[aria-pressed="true"] { background: #fff; color: #154577; border-color: #fff; }
    .sr-only, input.native-date-input {
      position: absolute !important; width: 1px !important; height: 1px !important;
      min-height: 0 !important; padding: 0 !important; margin: -1px !important;
      overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0 !important;
    }
    .date-display {
      display: block; padding: 14px 16px; border: 1px solid var(--border);
      border-radius: 12px; background: var(--white); color: var(--text);
      min-height: 48px; font-size: 16px;
    }
    .invalid .date-display { border-color: var(--error); }
    @media (max-width: 768px) {
      .theme-toolbar { justify-content: center; }
      .logo-wrapper img { height: 88px; }
      .special-request-item .toggle-wrap { flex-wrap: wrap; }
      .theme-options button { padding: 10px 12px; }
    }

    .hero::before { pointer-events: none; }
    .theme-toolbar { position: relative; z-index: 2; }
    /* Brand lockup and brief motion that supports orientation and feedback. */
    .brand-lockup {
      display: flex; align-items: center; justify-content: center;
      gap: 20px; margin: 8px auto 24px;
    }
    .logo-wrapper {
      display: grid; place-items: center; position: relative;
      width: 108px; height: 108px; flex: 0 0 108px; margin: 0;
      background: transparent; border: none; padding: 0;
    }
    .logo-wrapper img { display: block; width: 108px; height: 108px; object-fit: contain; }
    .brand-wordmark { text-align: left; color: #fff; }
    .brand-wordmark > span { display: block; font-family: 'Rokkitt', Georgia, serif; font-size: 34px; line-height: 1.15; }
    .brand-wordmark small { display: block; margin-top: 6px; font-size: 14px; color: #dceafa; }
    body, .card, .progress-wrap, .site-footer, .date-display {
      transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
    }
    .hero-content { animation: arrive 300ms ease-out both; }
    .cat.active { animation: arrive 180ms ease-out both; }
    .calendar-month { animation: arrive 160ms ease-out both; }
    .reveal-in { animation: arrive 260ms ease-out both; }
    @keyframes arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
    .btn:active:not(:disabled), .subtab:active, .theme-options button:active { transform: scale(.98); }
    @media (hover: hover) and (pointer: fine) {
      .cut:hover, .store-option:hover .store-card { transform: translateY(-1px); }
    }
    .logo-wrapper::after {
      content: ''; position: absolute; inset: 0; border-radius: 50%;
      background: linear-gradient(100deg, #245b91 25%, #367bb8 45%, #245b91 65%);
      background-size: 220% 100%; opacity: 0; pointer-events: none;
    }
    .logo-pending .logo-wrapper::after { opacity: 1; animation: logo-load 1.4s linear infinite; }
    .logo-pending .logo-wrapper img { opacity: 0; }
    @keyframes logo-load { to { background-position: -220% 0; } }
    @media (max-width: 480px) {
      .brand-lockup { gap: 14px; }
      .logo-wrapper { width: 88px; height: 88px; flex-basis: 88px; }
      .logo-wrapper img { width: 88px; height: 88px; }
      .brand-wordmark > span { font-size: 27px; }
      .brand-wordmark small { font-size: 12px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; transition: none !important; }
      .btn:active:not(:disabled), .subtab:active, .theme-options button:active,
      .cut:hover, .store-option:hover .store-card { transform: none; }
    }
    .adjust-controls {
      display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
      padding: 14px 16px; margin: 12px 0 18px; border: 1px solid var(--primary);
      border-radius: 12px; background: var(--surface-soft);
    }
    .adjust-controls .toggle-wrap { min-height: 44px; flex: 1; font-weight: 600; }
    .adjust-info { position: relative; }
    .adjust-info button {
      display: grid; place-items: center; list-style: none; cursor: pointer;
      width: 44px; height: 44px; border: 1px solid var(--border);
      border-radius: 50%; color: var(--text); background: var(--white); font-weight: 700;
    }
    .adjust-tip {
      position: absolute; z-index: 5; right: 0; top: 48px;
      width: min(300px, 75vw); padding: 14px; border: 1px solid var(--border);
      border-radius: 12px; background: var(--white); color: var(--text);
      box-shadow: var(--shadow-md); font-size: 14px; line-height: 1.5;
    }
    .adjust-info:not(.open) .adjust-tip { display: none; }
    .adjust-info:focus-within .adjust-tip { display: block; }
    @media (hover: hover) {
      .adjust-info:hover .adjust-tip { display: block; }
    }
    .over-allocated .status { color: var(--error); }
    .over-allocated .status-bar-fill { background: var(--error); }
  
/* Long words must remain readable inside the clipped hero. */
.hero h1 {overflow-wrap:anywhere;hyphens:auto;max-width:100%;}
.request-trap {position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}
.privacy-note {padding:16px 20px;color:var(--text-light);font-size:14px;}
.privacy-note a,.site-footer a {color:var(--primary);}
#submitStatus:empty {display:none;}
#submitStatus {margin:16px 20px;padding:16px;border:1px solid var(--border);border-radius:12px;white-space:pre-line;}
input,textarea {scroll-margin-top:24px;}
@media(max-width:768px){input:not([type="checkbox"]):not([type="radio"]),textarea,select{font-size:16px!important;}}