:root{
  --bg:#faf6ef;
  --surface:#ffffff;
  --surface-alt:#f1ead9;
  --border:#e3d9c4;
  --text:#2b2420;
  --text-muted:#8a7d68;
  --accent:#3f6b4a;
  --accent-contrast:#fdfbf6;
  --accent-soft:#e6efe3;
  --highlight:#c97a2e;
  --highlight-soft:#f7e6d2;
  --danger:#b4493f;
  --danger-soft:#f6e4e1;
  --radius:14px;
  --shadow:0 1px 2px rgba(43,36,32,.06), 0 10px 28px -14px rgba(43,36,32,.22);
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1b170f; --surface:#242019; --surface-alt:#2b2519; --border:#3b3324;
    --text:#f1e9d8; --text-muted:#b5a88e; --accent:#84b589; --accent-contrast:#13200f;
    --accent-soft:#293a27; --highlight:#e8a459; --highlight-soft:#3c2c18; --danger:#e08277; --danger-soft:#3a241f;
    color-scheme: dark;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text); font-family:var(--font-body); margin:0;
  padding-inline:16px; padding-block:0;
}
h1,h2,h3{font-family:var(--font-display); font-weight:600; margin:0;}
p{margin:0}
button{font:inherit; cursor:pointer}
input{font:inherit}
.wrap{max-width:1040px; margin:0 auto; padding-block:0 32px;}

/* ---------- Anmelden / Registrieren ---------- */
.auth-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding-block:40px;
}
.auth-screen[hidden]{display:none}
.auth-card{
  width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:28px 26px;
}
.auth-card h1{font-size:1.6rem; text-align:center;}
.auth-sub{color:var(--text-muted); font-size:.88rem; text-align:center; margin-top:4px;}
.auth-tabs{display:flex; gap:6px; margin-block:22px 18px; background:var(--surface-alt); border-radius:999px; padding:4px;}
.auth-tab{
  flex:1; background:transparent; border:none; color:var(--text-muted); padding:8px 0; border-radius:999px; font-weight:600; font-size:.86rem;
}
.auth-tab.active{background:var(--accent); color:var(--accent-contrast);}
.auth-form{display:flex; flex-direction:column; gap:14px;}
.auth-form[hidden]{display:none}
.auth-form label{display:flex; flex-direction:column; gap:6px; font-size:.84rem; color:var(--text-muted); font-weight:500;}
.auth-form input{
  background:var(--surface-alt); border:1px solid var(--border); border-radius:8px; padding:10px 12px;
  color:var(--text); font-size:.92rem;
}
.auth-form input:focus{outline:2px solid var(--accent); outline-offset:1px;}
.field-hint{color:var(--text-muted); font-size:.74rem; font-weight:400;}
.form-error{
  background:var(--danger-soft); color:var(--danger); border-radius:8px; padding:8px 10px; font-size:.82rem;
}
.form-error[hidden]{display:none}

/* ---------- App-Oberfläche ---------- */
.topbar{
  padding-block:18px 10px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:14px;}
.brand h1{font-size:1.5rem; letter-spacing:-.01em;}
.brand p{color:var(--text-muted); font-size:.85rem; margin-top:2px;}

.site-logo{height:48px; width:auto; max-width:200px; object-fit:contain; display:block;}
.site-logo[hidden]{display:none}
.auth-card .site-logo{height:76px; max-width:280px; margin:0 auto 16px; }
.user-chip{display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--text-muted);}
.user-chip #userChip{font-weight:600; color:var(--text);}

.tabs{display:flex; gap:6px; margin-block:16px 12px; flex-wrap:wrap;}
.tab{
  background:transparent; border:1px solid var(--border); color:var(--text-muted);
  padding:8px 16px; border-radius:999px; font-size:.88rem; font-weight:500; transition:background .15s, color .15s;
}
.tab.active{background:var(--accent); border-color:var(--accent); color:var(--accent-contrast);}

.week-nav{display:flex; align-items:center; gap:10px; margin-block:4px 20px; flex-wrap:wrap;}
.week-nav[hidden]{display:none}
.week-nav button{
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  width:36px; height:36px; border-radius:999px; font-size:1rem; line-height:1;
}
.week-nav button:hover{border-color:var(--accent)}
#todayBtn{width:auto; padding:0 14px; border-radius:999px; font-size:.82rem;}
.week-label{font-weight:600; min-width:200px;}

.view[hidden]{display:none}
.status-line{color:var(--text-muted); font-size:.9rem; margin-bottom:14px;}

.day-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:14px;}
.day-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px; min-width:0;
}
.day-card.is-today{border-color:var(--highlight); box-shadow:0 0 0 1px var(--highlight), var(--shadow);}
.day-card-head{display:flex; justify-content:space-between; align-items:baseline;}
.day-name{font-family:var(--font-display); font-weight:600; font-size:1.05rem;}
.day-date{color:var(--text-muted); font-size:.82rem; font-variant-numeric:tabular-nums;}
.empty-note{color:var(--text-muted); font-size:.85rem; font-style:italic;}

.dish-list{display:flex; flex-direction:column; gap:8px;}
.dish-option{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:6px 10px; border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; cursor:pointer; transition:border-color .15s, background .15s;
}
.dish-option:hover{border-color:var(--accent)}
.dish-option.selected{border-color:var(--accent); background:var(--accent-soft);}
.dish-option.saving{opacity:.6;}
.dish-option input{margin-top:3px; accent-color:var(--accent); flex-shrink:0;}
.dish-text{display:flex; flex-direction:column; gap:2px; flex:1 1 120px; min-width:90px;}
.dish-name{font-weight:500; font-size:.92rem; overflow-wrap:break-word; word-break:break-word;}
.dish-desc{color:var(--text-muted); font-size:.8rem; overflow-wrap:break-word; word-break:break-word;}
.dish-option-none .dish-name{color:var(--text-muted); font-style:italic;}
.badge-veg{
  margin-left:auto; align-self:center; font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  background:var(--accent-soft); color:var(--accent); padding:2px 7px; border-radius:999px; white-space:nowrap;
}
.badge-selected{
  align-self:center; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  background:var(--accent); color:var(--accent-contrast); padding:2px 8px; border-radius:999px; white-space:nowrap;
}
.badge-veg + .badge-selected, .badge-selected + .badge-veg{margin-left:0;}
.badge-extra-type{
  align-self:center; font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  background:var(--highlight-soft); color:var(--highlight); padding:2px 7px; border-radius:999px; white-space:nowrap;
}

/* ---------- Bestellen: Auswahl erst nach Klick auf "Speichern" übernehmen ---------- */
.selection-note{color:var(--text-muted); font-size:.82rem; margin-top:-2px;}
.selection-note.unsaved{color:var(--highlight); font-weight:600;}
.day-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:2px;}
.day-save-btn{
  background:var(--accent); color:var(--accent-contrast); border:none; border-radius:999px;
  padding:8px 18px; font-size:.82rem; font-weight:600;
}
.day-save-btn:hover{opacity:.92}
.discard-link{
  background:none; border:none; color:var(--text-muted); font-size:.8rem; text-decoration:underline; padding:2px 0;
}

.editor-day{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; margin-bottom:14px;}
.editor-day-head{display:flex; justify-content:space-between; font-family:var(--font-display); font-weight:600; margin-bottom:12px;}
.editor-rows{display:flex; flex-direction:column; gap:8px;}
.editor-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.editor-row input[type="text"]{
  background:var(--surface-alt); border:1px solid var(--border); border-radius:8px; padding:8px 10px;
  color:var(--text); font-size:.88rem; min-width:0;
}
.input-name{flex:1 1 160px;}
.input-desc{flex:2 1 220px;}
.veg-toggle{display:flex; align-items:center; gap:5px; font-size:.78rem; color:var(--text-muted); white-space:nowrap;}
.veg-toggle input{accent-color:var(--accent);}
.icon-btn{
  background:transparent; border:1px solid var(--border); color:var(--text-muted); border-radius:8px;
  padding:6px 12px; font-size:.8rem;
}
.icon-btn:hover{border-color:var(--accent); color:var(--accent);}
.remove-row{width:30px; height:30px; padding:0;}
.remove-row:hover{border-color:var(--danger); color:var(--danger);}
.add-dish-btn{
  background:transparent; border:1px dashed var(--border); color:var(--accent); border-radius:8px;
  padding:7px 12px; font-size:.82rem; margin-top:10px;
}
.add-dish-btn:hover{border-color:var(--accent)}
.primary-btn{
  display:inline-block; background:var(--accent); color:var(--accent-contrast); border:none; border-radius:999px;
  padding:11px 22px; font-size:.9rem; font-weight:600; box-shadow:var(--shadow); text-decoration:none; text-align:center;
}
.primary-btn:hover{opacity:.92}
.hint{color:var(--text-muted); font-size:.85rem; margin-bottom:16px;}
.overview-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}

.kiosk-link-box{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--accent-soft); border:1px solid var(--accent); border-radius:var(--radius);
  padding:16px 18px; margin-bottom:20px;
}
.kiosk-link-box strong{font-family:var(--font-display); font-size:1rem;}
.kiosk-link-box p{color:var(--text-muted); font-size:.84rem; margin-top:4px; max-width:46ch;}
.kiosk-link-box .primary-btn{white-space:nowrap;}

.badge-price{
  font-weight:600; font-size:.8rem; color:var(--text); white-space:nowrap; margin-left:auto; align-self:center;
}
.dish-text + .badge-veg + .badge-price,
.dish-text + .badge-price{margin-left:8px;}
.input-price{flex:0 0 90px;}

.locked-note{
  color:var(--text-muted); font-size:.8rem; font-style:italic; margin-top:2px; display:flex; align-items:center; gap:6px;
}
.cancel-link{
  background:none; border:none; color:var(--danger); font-size:.8rem; text-decoration:underline; padding:2px 0; align-self:flex-start;
}
.dish-option.locked{opacity:.75; cursor:default;}
.dish-option.locked:hover{border-color:var(--border);}

/* ---------- Bestellen: Dropdown für Unteroptionen (z.B. Salat-Sorten) ---------- */
.extra-option-select-wrap{margin:-4px 0 2px; padding-left:34px; display:flex; align-items:center; gap:4px;}
.extra-option-select{
  font-family:var(--font-body); font-size:.9rem; font-weight:500; color:var(--text);
  background:var(--surface-alt); border:1px solid var(--accent); border-radius:8px;
  padding:8px 10px; cursor:pointer; width:100%; max-width:340px; flex:1 1 auto;
}
.extra-option-select:focus{outline:2px solid var(--accent); outline-offset:1px;}

/* ---------- Allergene: kleiner Info-Button + Checkbox-/Anzeige-Dialoge ---------- */
.allergen-info-btn{
  flex-shrink:0; width:20px; height:20px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); color:var(--text-muted); font-family:Georgia, serif; font-style:italic;
  font-size:.74rem; font-weight:700; line-height:1; display:inline-flex; align-items:center; justify-content:center;
  padding:0; cursor:pointer; position:relative;
}
.allergen-info-btn:hover{border-color:var(--accent); color:var(--accent);}
.allergen-info-count{
  position:absolute; top:-6px; right:-6px; min-width:14px; height:14px; padding:0 3px; border-radius:999px;
  background:var(--highlight); color:#fff; font-size:.6rem; font-weight:700; font-style:normal;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.allergen-info-btn-inline{margin-left:4px;}

.allergen-checkboxes{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:6px 14px; margin-bottom:12px;
}
.allergen-check{
  display:flex; align-items:center; gap:7px; font-size:.84rem; color:var(--text); cursor:pointer;
}
.allergen-check input{accent-color:var(--accent);}
/* ".recipe-form label" (Formularfelder wie Name/Preis) setzt flex-direction:column
   für Label+Eingabefeld untereinander - für die Allergen-Checkboxen im
   Rezepteditor brauchen wir aber Checkbox und Text nebeneinander, daher hier
   mit einer spezifischeren Regel zurück auf eine Zeile gestellt. */
.recipe-form .allergen-check{flex-direction:row; align-items:center; font-weight:400; color:var(--text);}
.allergen-editor{max-width:620px;}
.allergen-info{max-width:420px;}
.allergen-info-item{font-weight:600; font-size:.95rem; margin-bottom:10px;}
.allergen-info-list{list-style:disc; padding-left:22px; margin:0 0 14px; display:flex; flex-direction:column; gap:4px; font-size:.88rem;}

.table-scroll{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow);}
table{border-collapse:collapse; width:100%; min-width:560px;}
th,td{text-align:left; padding:10px 14px; font-size:.86rem; border-bottom:1px solid var(--border); white-space:nowrap;}
th{color:var(--text-muted); font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.03em;}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-alt)}

.totals{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:12px; margin-top:18px;}
.totals-day{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px;}
.totals-day-head{font-weight:600; font-size:.84rem; margin-bottom:8px;}
.totals-row{display:flex; justify-content:space-between; font-size:.82rem; padding:2px 0; gap:8px;}
.totals-row span{min-width:0; overflow:hidden; text-overflow:ellipsis;}
.totals-empty{color:var(--text-muted); font-size:.8rem; font-style:italic;}

.toast{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  background:var(--text); color:var(--bg); padding:9px 18px; border-radius:999px; font-size:.85rem; box-shadow:var(--shadow); z-index:10;
}
.toast[hidden]{display:none}

/* ---------- Admin: Menüpflege - Rezept-Dropdown ---------- */
.editor-add-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px;}
.recipe-picker{
  flex:1 1 220px; background:var(--surface-alt); border:1px solid var(--border); border-radius:8px;
  padding:8px 10px; color:var(--text); font-size:.86rem;
}

/* ---------- Admin: Kochbuch ---------- */
.cookbook-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px;}
.cookbook-head .hint{margin-bottom:0; max-width:56ch;}
.cookbook-head-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.category-filter{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px;}
.cat-filter-btn{
  background:transparent; border:1px solid var(--border); color:var(--text-muted);
  padding:7px 14px; border-radius:999px; font-size:.84rem; font-weight:500;
}
.cat-filter-btn.active{background:var(--accent); border-color:var(--accent); color:var(--accent-contrast);}

.recipe-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px;}
.recipe-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px; display:flex; flex-direction:column; gap:8px; min-width:0;
}
.recipe-card-head{display:flex; justify-content:space-between; align-items:flex-start; gap:8px;}
.recipe-card-head h3{font-size:1.02rem; overflow-wrap:break-word; word-break:break-word;}
.recipe-card-badges{display:flex; gap:6px; flex-wrap:wrap;}
.badge-category{
  font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  background:var(--surface-alt); color:var(--text-muted); padding:2px 7px; border-radius:999px; white-space:nowrap;
}
.recipe-card-desc{color:var(--text-muted); font-size:.82rem;}
.recipe-card-meta{color:var(--text-muted); font-size:.8rem; display:flex; justify-content:space-between; gap:8px;}
.recipe-card-actions{display:flex; gap:8px; margin-top:4px;}
.recipe-card-actions .icon-btn{flex:1;}
.recipe-empty{color:var(--text-muted); font-style:italic; font-size:.9rem;}

/* ---------- Rezept-Editor (Overlay) ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(27,23,15,.5); display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:20; overflow-y:auto;
}
.overlay[hidden]{display:none}
.recipe-editor{
  width:100%; max-width:560px; max-height:90vh; overflow-y:auto; background:var(--surface);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:24px 26px; margin:auto;
}
.recipe-editor h2{font-size:1.3rem; margin-bottom:18px;}
.recipe-editor h3{font-size:.95rem; margin:18px 0 10px;}
.recipe-form{display:flex; flex-direction:column; gap:14px;}
.recipe-form label{display:flex; flex-direction:column; gap:6px; font-size:.84rem; color:var(--text-muted); font-weight:500;}
.recipe-form input[type="text"], .recipe-form input[type="number"], .recipe-form input[type="date"],
.recipe-form select, .recipe-form textarea{
  background:var(--surface-alt); border:1px solid var(--border); border-radius:8px; padding:9px 11px;
  color:var(--text); font-size:.92rem; font-family:var(--font-body);
}
.recipe-form textarea{resize:vertical; min-height:88px;}
.recipe-form-row{display:flex; gap:14px; flex-wrap:wrap;}
.recipe-form-row > label{flex:1 1 160px;}
.veg-toggle-label{flex-direction:row !important; align-items:center; gap:7px !important; align-self:flex-end; padding-bottom:9px;}
.veg-toggle-label input{accent-color:var(--accent);}
.ingredient-rows{display:flex; flex-direction:column; gap:8px;}
.ingredient-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.ingredient-row .ing-name{flex:2 1 160px;}
.ingredient-row .ing-qty{flex:1 1 80px;}
.ingredient-row .ing-unit{flex:1 1 80px;}
.recipe-form-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:6px;}

/* ---------- Kategorien verwalten (Overlay) ---------- */
.category-editor{max-width:460px;}
.category-editor .hint{margin-bottom:16px;}
.category-rows{display:flex; flex-direction:column; gap:8px; margin-bottom:14px;}
.category-row{display:flex; gap:8px; align-items:center;}
.category-row input[type="text"]{
  flex:1; background:var(--surface-alt); border:1px solid var(--border); border-radius:8px; padding:9px 11px;
  color:var(--text); font-size:.9rem;
}
.category-row .category-usage{color:var(--text-muted); font-size:.74rem; white-space:nowrap;}
.category-add-row{display:flex; gap:8px; align-items:center; margin-bottom:8px;}
.category-add-row input[type="text"]{
  flex:1; background:var(--surface-alt); border:1px solid var(--border); border-radius:8px; padding:9px 11px;
  color:var(--text); font-size:.9rem;
}

/* ---------- Salat-Optionen verwalten (Overlay) ---------- */
.extra-editor{max-width:720px;}
.field-label-row{display:flex; gap:10px; align-items:flex-end; margin-bottom:14px; flex-wrap:wrap;}
.field-label-row label{display:flex; flex-direction:column; gap:6px; font-size:.84rem; color:var(--text-muted); font-weight:500; flex:1 1 220px;}
.field-label-row input[type="text"]{
  background:var(--surface-alt); border:1px solid var(--border); border-radius:8px; padding:9px 11px;
  color:var(--text); font-size:.92rem;
}
.extra-admin-rows{display:flex; flex-direction:column; gap:10px; margin-bottom:14px;}
.extra-admin-group{border:1px solid var(--border); border-radius:10px; padding:10px; background:var(--surface-alt);}
.extra-admin-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.extra-admin-row input[type="text"]{
  background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:9px 11px;
  color:var(--text); font-size:.9rem;
}
.extra-admin-row .extra-row-name{flex:1 1 140px;}
.extra-admin-row .extra-row-desc{flex:2 1 180px;}
.extra-admin-row .extra-row-price{flex:0 1 110px;}
.extra-row-price-note{flex:0 1 150px; font-size:.78rem; color:var(--text-muted); font-style:italic;}
.extra-add-row{display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap;}
.extra-add-row input[type="text"]{
  background:var(--surface-alt); border:1px solid var(--border); border-radius:8px; padding:9px 11px;
  color:var(--text); font-size:.9rem;
}
.extra-add-row #newExtraName{flex:1 1 140px;}
.extra-add-row #newExtraDescription{flex:2 1 180px;}
.extra-add-row #newExtraPrice{flex:0 1 110px;}

/* ---------- Unteroptionen einer Salat-Option (z.B. einzelne Sorten) ---------- */
.extra-suboptions-box{margin-top:10px; padding-top:10px; border-top:1px dashed var(--border);}
.extra-suboptions-head{font-size:.72rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; margin-bottom:8px;}
.extra-suboption-row, .extra-suboption-add-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px;}
.extra-suboption-row input[type="text"], .extra-suboption-add-row input[type="text"]{
  background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:7px 10px;
  color:var(--text); font-size:.86rem;
}
.extra-suboption-row .extra-suboption-name, .extra-suboption-add-row .new-suboption-name{flex:1 1 160px;}
.extra-suboption-row .extra-suboption-price, .extra-suboption-add-row .new-suboption-price{flex:0 1 100px;}

/* ---------- Admin: Menüpflege - Zusatzoptionen pro Tag ---------- */
.menu-head-row{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:0;}
.menu-head-row .hint{margin-bottom:16px; max-width:56ch;}
.day-extras-box{margin-top:14px; padding-top:12px; border-top:1px dashed var(--border); display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center;}
.day-extras-head{flex-basis:100%; font-size:.78rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em;}
.extra-toggle{display:flex; align-items:center; gap:6px; font-size:.85rem; color:var(--text);}
.extra-toggle input{accent-color:var(--accent);}

/* ---------- Bestellungsverlauf ---------- */
.history-month-label{display:flex; flex-direction:column; gap:6px; font-size:.84rem; color:var(--text-muted); font-weight:500; max-width:220px; margin-bottom:18px;}
.history-month-label input{
  background:var(--surface-alt); border:1px solid var(--border); border-radius:8px; padding:9px 11px;
  color:var(--text); font-size:.92rem;
}
.history-list table{min-width:460px;}

/* ---------- Admin: Auswertung ---------- */
.analytics-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.analytics-head .hint{margin-bottom:16px; max-width:56ch;}
.print-only{display:none;}
.analytics-controls{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:20px;}
.scope-switch{display:flex; gap:6px;}
.analytics-period{display:flex; align-items:center; gap:10px;}
.analytics-period[hidden]{display:none}
.analytics-period input, .analytics-period select{
  background:var(--surface-alt); border:1px solid var(--border); border-radius:8px; padding:9px 11px;
  color:var(--text); font-size:.92rem;
}
.analytics-period button{
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  width:36px; height:36px; border-radius:999px; font-size:1rem; line-height:1;
}
.analytics-stats{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px;}
.stat-tile{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px 22px; display:flex; flex-direction:column; gap:4px; min-width:160px;
}
.stat-value{font-family:var(--font-display); font-size:1.6rem; font-weight:600;}
.stat-label{color:var(--text-muted); font-size:.82rem;}
.stat-edit-label{display:flex; flex-direction:column; gap:6px; font-size:.78rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em;}
.stat-edit-input{
  font-family:var(--font-body); font-size:1.1rem; font-weight:600; text-transform:none; letter-spacing:normal;
  color:var(--text); background:var(--surface-alt); border:1px solid var(--border); border-radius:8px; padding:7px 9px; width:120px;
}
.stat-edit-actions{display:flex; gap:8px; margin-top:4px;}
.stat-edit-actions .icon-btn{padding:4px 10px; font-size:.78rem;}
.bar-chart{width:100%; height:auto; overflow:visible;}
.chart-label{font-family:var(--font-body); font-size:12px; fill:var(--text);}
.chart-value{font-family:var(--font-body); font-size:12px; fill:var(--text-muted);}
.chart-track{fill:var(--surface-alt);}
.chart-bar{fill:var(--accent);}

/* ---------- Admin: Rechner ---------- */
.calc-controls{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:20px; max-width:540px;}
.calc-controls label{display:flex; flex-direction:column; gap:6px; font-size:.84rem; color:var(--text-muted); font-weight:500; flex:1 1 200px;}
.calc-controls select, .calc-controls input{
  background:var(--surface-alt); border:1px solid var(--border); border-radius:8px; padding:9px 11px;
  color:var(--text); font-size:.92rem;
}
.calc-base-note{color:var(--text-muted); font-size:.82rem; margin-bottom:14px; font-style:italic;}

/* ===========================================================================
   Smartphone-optimierte Ansicht
   Greift automatisch anhand der Bildschirmbreite (keine Geräte-Abfrage
   nötig) - dieselbe Seite passt sich damit selbständig an, sobald sie auf
   einem Smartphone statt einem Desktop-Monitor geöffnet wird, inklusive bei
   späterem Drehen/Verkleinern des Fensters.
   =========================================================================== */
@media (max-width: 680px){
  body{padding-inline:12px;}
  .wrap{padding-block:0 24px;}

  /* iOS Safari zoomt beim Fokussieren automatisch in jedes Eingabefeld mit
     weniger als 16px Schriftgröße hinein - das betrifft hier so gut wie
     jedes Formularfeld. Mindestens 16px verhindert dieses ungewollte
     Hineinzoomen zuverlässig. */
  input, select, textarea, button{font-size:16px;}

  .topbar{padding-block:14px 8px; gap:10px;}
  .brand{gap:10px;}
  .brand h1{font-size:1.25rem;}
  .brand p{font-size:.78rem;}
  .site-logo{height:36px;}
  .user-chip{font-size:.8rem; gap:8px;}

  /* Tab-Leiste: horizontales Scrollen statt Umbruch auf mehrere Zeilen -
     bekanntes Muster aus mobilen Apps, braucht weniger Höhe und bleibt auch
     bei fünf Reitern (Bestellen/Menü/Kochbuch/Rechner/Übersicht) an einer
     Stelle bedienbar. */
  .tabs{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-inline:-12px; padding-inline:12px;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab{flex:0 0 auto; padding:9px 14px; white-space:nowrap;}

  .week-nav{gap:8px; margin-block:4px 16px;}
  .week-label{min-width:0; font-size:.92rem;}

  .day-grid{grid-template-columns:1fr; gap:12px;}
  .recipe-list{grid-template-columns:1fr;}

  /* Formularreihen, die auf dem Desktop nebeneinander stehen, werden auf
     dem Smartphone volle Breite und untereinander gestapelt - leichter zu
     treffen mit dem Finger, kein horizontales Gequetsche. */
  .editor-row{flex-direction:column; align-items:stretch;}
  .editor-row .input-name, .editor-row .input-desc, .editor-row .input-price{flex:1 1 auto; width:100%;}
  .editor-row .veg-toggle{align-self:flex-start;}
  .editor-add-row{flex-direction:column; align-items:stretch;}
  /* Achtung: flex-basis bezieht sich in einem Column-Flexcontainer auf die
     HÖHE statt die Breite - die feste Pixel-Basis aus der Desktop-Regel
     (".recipe-picker{flex:1 1 220px}") muss hier deshalb auf "auto"
     zurückgesetzt werden, sonst würde das Auswahlfeld 220px hoch werden. */
  .editor-add-row .recipe-picker{flex:1 1 auto; width:100%;}
  .editor-add-row .add-dish-btn{width:100%;}

  .ingredient-row{flex-direction:column; align-items:stretch;}
  .ingredient-row .ing-name, .ingredient-row .ing-qty, .ingredient-row .ing-unit{flex:1 1 auto; width:100%;}
  .ingredient-row .remove-row{align-self:flex-end;}

  .recipe-form-row{flex-direction:column; gap:14px;}
  .recipe-form-row > label{flex:1 1 auto;}
  .veg-toggle-label{align-self:flex-start !important; padding-bottom:0 !important;}

  .category-row{flex-wrap:wrap;}
  .category-row .category-usage{order:3; width:100%;}
  .category-add-row{flex-direction:column; align-items:stretch;}
  .category-add-row input[type="text"], .category-add-row button{width:100%;}

  .calc-controls{flex-direction:column; gap:14px;}
  .calc-controls label{flex:1 1 auto;}

  .cookbook-head{flex-direction:column; align-items:stretch;}
  .cookbook-head-actions{flex-direction:column; align-items:stretch;}
  .cookbook-head .hint{max-width:none;}

  .kiosk-link-box{flex-direction:column; align-items:stretch; text-align:left;}
  .kiosk-link-box .primary-btn{width:100%;}

  /* Overlays (Rezept-/Kategorien-Editor) nehmen auf dem Smartphone den
     ganzen Bildschirm ein statt einer schwebenden, mittig zentrierten
     Karte - bekannt aus mobilen Formularen, lässt mehr Platz für die
     Eingabefelder und Tastatur. */
  .overlay{padding:0; align-items:stretch;}
  .recipe-editor{max-width:none; width:100%; height:100%; max-height:none; border-radius:0; margin:0;}

  #saveMenuBtn{width:100%;}
  .day-actions{flex-direction:column; align-items:stretch;}
  .day-save-btn{width:100%;}
  .discard-link, .cancel-link{align-self:flex-start;}

  .totals{grid-template-columns:1fr 1fr;}

  .menu-head-row{flex-direction:column; align-items:stretch;}
  .day-extras-box{flex-direction:column; align-items:flex-start;}
  .history-month-label{max-width:none;}
  .analytics-controls{flex-direction:column; align-items:stretch;}
  .scope-switch{flex-wrap:wrap;}
  .analytics-period{flex-wrap:wrap;}
  .analytics-period input, .analytics-period select{width:100%;}
  .stat-tile{flex:1 1 auto;}

  .analytics-head{flex-direction:column; align-items:stretch;}
  .analytics-head #exportAnalyticsPdfBtn{width:100%;}
  .field-label-row{flex-direction:column; align-items:stretch;}
  .field-label-row #saveExtraFieldLabelBtn{width:100%;}
  .extra-admin-row, .extra-add-row{flex-direction:column; align-items:stretch;}
  .extra-admin-row input[type="text"], .extra-add-row input[type="text"]{width:100%;}
  .extra-admin-row .remove-row, .extra-admin-row .allergen-info-btn{align-self:flex-end;}
  .extra-add-row #addExtraBtn{width:100%;}
  .extra-suboption-row, .extra-suboption-add-row{flex-direction:column; align-items:stretch;}
  .extra-suboption-row input[type="text"], .extra-suboption-add-row input[type="text"]{width:100%;}
  .extra-suboption-row .remove-suboption, .extra-suboption-row .allergen-info-btn{align-self:flex-end;}
  .extra-suboption-add-row .add-suboption-btn{width:100%;}
  .extra-option-select-wrap{padding-left:0;}
  .extra-option-select{max-width:none;}
  .stat-edit-input{width:100%;}
  .editor-row .allergen-info-btn{align-self:flex-end;}
  .allergen-checkboxes{grid-template-columns:1fr 1fr;}
}

@media (max-width: 480px){
  .auth-card{padding:22px 18px;}
  .week-label{min-width:0;}
  .totals{grid-template-columns:1fr;}
  .recipe-card-actions{flex-direction:column;}
}

/* ---------- Meldungen verwalten (Admin) ---------- */
.badge-status{
  font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  padding:2px 7px; border-radius:999px; white-space:nowrap;
}
.badge-status-active{background:var(--accent-soft); color:var(--accent);}
.badge-status-inactive{background:var(--surface-alt); color:var(--text-muted);}
.badge-status-expired{background:var(--surface-alt); color:var(--highlight);}
.announcement-card-message{color:var(--text); font-size:.86rem; white-space:pre-wrap; overflow-wrap:break-word;}

/* ---------- Meldungen: Popup für Nutzer:innen ---------- */
.announcement-popup-overlay{z-index:30;}
.announcement-popup{max-width:420px; text-align:left;}
.announcement-popup-kicker{
  font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--accent); margin-bottom:6px;
}
.announcement-popup-kicker span{color:var(--text-muted); font-weight:500; text-transform:none; letter-spacing:normal;}
.announcement-popup-message{white-space:pre-wrap; overflow-wrap:break-word; color:var(--text); margin-bottom:4px;}

/* ---------- Druckansicht (Auswertung als PDF) ---------- */
/* "Als PDF exportieren" ruft window.print() auf - statt eines eigenen
   PDF-Erzeugers (der ohne externe Bibliothek selbst nachgebaut werden
   müsste) nutzt das den Druckdialog des Browsers ("Als PDF speichern"),
   zugeschnitten auf eine saubere Druckansicht nur der Auswertung. */
@media print{
  body *{visibility:hidden;}
  #view-admin-analytics, #view-admin-analytics *{visibility:visible;}
  #view-admin-analytics{position:absolute; left:0; top:0; width:100%; padding:0; margin:0;}
  .no-print{display:none !important;}
  .print-only{display:block; font-family:var(--font-display); font-size:1.2rem; font-weight:600; margin-bottom:16px;}
  .analytics-head .hint{display:none;}
  .analytics-stats{margin-bottom:18px;}
  .stat-tile{box-shadow:none; border:1px solid #ccc;}
  body{background:#fff !important;}
}