/* ════════════════════════════════════════════════════════════════════════════
   Rezeptkalkulator – Stylesheet
   Ergänzt Tailwind-Utility-Klassen um eigene Komponenten, Zustände und
   Varianten, die sich mit reinen Utilities nicht abbilden lassen.
   ════════════════════════════════════════════════════════════════════════════ */


/* ── Basis ───────────────────────────────────────────────────────────────── */

html { overflow-x: clip; }
body {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
}

/* ── Welcome-Overlay ────────────────────────────────────────────────────── */

.welcome-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 25, 23, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

@keyframes flash-saved {
  0%   { background-color: transparent; }
  20%  { background-color: rgba(22, 163, 74, 0.18); }
  100% { background-color: transparent; }
}
.flash-saved {
  animation: flash-saved 0.8s ease-out;
  border-radius: 6px;
}

@keyframes welcome-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes welcome-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(12px); }
}
@keyframes steam-rise {
  0%   { opacity: 0;    transform: translateY(0)    scaleX(1); }
  30%  { opacity: 0.55; }
  70%  { opacity: 0.4; }
  100% { opacity: 0;    transform: translateY(-14px) scaleX(1.15); }
}

.welcome-card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.22), 0 4px 16px rgba(0,0,0,0.10);
  width: 100%;
  max-width: 400px;
  overflow: hidden;
  animation: welcome-in 0.35s cubic-bezier(.22,.8,.36,1) both;
}

#welcome-overlay.welcome-closing .welcome-card {
  animation: welcome-out 0.22s ease-in both;
}

.welcome-illustration {
  background: linear-gradient(160deg, #fef3c7 0%, #fde68a 60%, #fcd34d 100%);
  padding: 28px 32px 16px;
  display: flex;
  justify-content: center;
}
.welcome-illustration svg {
  width: 180px;
  height: auto;
}
.welcome-steam {
  animation: steam-rise 2.4s ease-in-out infinite;
  transform-origin: bottom center;
}

.welcome-body {
  padding: 24px 28px 28px;
}
.welcome-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1c1917;
  margin: 0 0 6px;
}
.welcome-subtitle {
  font-size: 0.875rem;
  color: #78716c;
  line-height: 1.55;
  margin: 0 0 16px;
}
.welcome-hints {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.welcome-hints li {
  font-size: 0.84rem;
  color: #57534e;
  align-items: baseline;
  gap: 8px;
  line-height: 1.45;
}
.welcome-check {
  color: #c2410c;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.welcome-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  background: #c2410c;
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  box-shadow: 0 3px 12px rgba(194, 65, 12, 0.3);
}
.welcome-btn:hover  { background: #9a3412; }
.welcome-btn:active { transform: scale(0.98); }
.welcome-btn-secondary {
  width: 100%;
  padding: 0.6rem 1rem;
  margin-top: 0.5rem;
  background: transparent;
  border: 1.5px solid #d6d3d1;
  border-radius: 10px;
  color: #78716c;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.welcome-btn-secondary:hover { background: #f5f5f4; color: #44403c; }

/* ── Auth-Button ─────────────────────────────────────────────────────────── */

/* Grüner Punkt wenn eingeloggt */
#btn-auth.auth-logged-in {
  position: relative;
  color: #15803d;
}
#btn-auth.auth-logged-in::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  background: #16a34a;
  border-radius: 50%;
}

/* ── Auth-Modal ──────────────────────────────────────────────────────────── */

.auth-tab {
  flex: 1;
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #78716c;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.auth-tab:hover { color: #44403c; }
.auth-tab-active {
  color: #44403c;
  border-bottom-color: #44403c;
}

.auth-input {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.auth-input:focus { border-color: #60a5fa; }

.auth-btn-primary {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-family: inherit;
  font-weight: 500;
  color: #fff;
  background: #44403c;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 0.15s;
}
.auth-btn-primary:hover    { background: #57534e; }
.auth-btn-primary:disabled { background: #a8a29e; cursor: default; }

.auth-btn-secondary {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-family: inherit;
  font-weight: 500;
  color: #57534e;
  background: #f5f5f4;
  border: 1px solid #e7e5e4;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 0.15s;
}
.auth-btn-secondary:hover    { background: #e7e5e4; }
.auth-btn-secondary:disabled { opacity: 0.6; cursor: default; }

.auth-btn-danger {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-family: inherit;
  font-weight: 500;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.auth-btn-danger:hover    { background: #fee2e2; border-color: #fca5a5; }
.auth-btn-danger:disabled { opacity: 0.6; cursor: default; }

/* ── Empty-State-Zeile in Abschnitten ───────────────────────────────────── */

.empty-state-row { border: none; }
.empty-state-cell {
  padding: 12px 16px 10px 44px;
  color: #a8a29e;
  font-size: 0.8rem;
  font-style: italic;
}

/* Safari rendert <summary> mit einem eigenen Disclosure-Dreieck via
   ::-webkit-details-marker, das list-none nicht entfernt */
summary::-webkit-details-marker { display: none; }

/* ── Kurzanleitung-Button in Tab-Nav ────────────────────────────────────── */

.tab-btn-help {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px 7px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #a8a29e;
  font-size: 0.8rem;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s;
  white-space: nowrap;
}
.tab-btn-help:hover { color: #57534e; }

/* ── Hilfe-Modal ─────────────────────────────────────────────────────────── */

.help-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 25, 23, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.help-modal-card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.08);
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.help-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e7e5e4;
  flex-shrink: 0;
  color: #44403c;
}
.help-modal-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1c1917;
  margin: 0;
}
.help-modal-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #a8a29e;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.help-modal-close-btn:hover { background: #f5f5f4; color: #44403c; }
.help-modal-body {
  overflow-y: auto;
  padding: 20px 24px 24px;
  font-size: 0.875rem;
  color: #57534e;
  -webkit-overflow-scrolling: touch;
}

/* ── Kurzanleitung – Schema ───────────────────────────────────────────────── */
.help-schema-section {
  background: #fafaf9;
  border: 1px solid #e7e5e4;
  border-radius: 10px;
  padding: 10px 12px;
}
.help-schema-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a8a29e;
  margin-bottom: 8px;
}
.help-schema-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.help-schema-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 1px solid #d6d3d1;
  border-radius: 8px;
  background: #fff;
  padding: 5px 9px;
  font-size: 0.7rem;
  font-weight: 500;
  color: #57534e;
  line-height: 1.2;
  white-space: nowrap;
}
.help-schema-icon { font-size: 1rem; line-height: 1; }
.help-schema-sub {
  font-size: 0.6rem;
  font-weight: 400;
  color: #a8a29e;
  line-height: 1.1;
}
.help-schema-arrow {
  color: #c4bfbb;
  font-size: 0.8rem;
  font-weight: 600;
  flex-shrink: 0;
  line-height: 1;
}

/* ── Option E: Rezept-Metadaten auf Ebene Rezeptname ─────────────────── */
.recipe-meta-field { display: flex; align-items: center; gap: 5px; }
.recipe-meta-label {
  font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: #a8a29e;
}
.recipe-meta-view {
  font-size: 0.875rem; font-weight: 500; color: #44403c;
  cursor: pointer; border-bottom: 1px dashed #d6d3d1; line-height: 1.5;
}
.recipe-meta-view:hover { color: #1c1917; border-bottom-color: #78716c; }
.recipe-meta-edit { display: flex; align-items: center; gap: 3px; }
.recipe-meta-input {
  width: 52px; padding: 1px 6px; border: 1px solid #d6d3d1;
  border-radius: 4px; font-size: 0.8rem; text-align: right;
  outline: none; font-family: inherit;
}
.recipe-meta-input:focus { border-color: #60a5fa; }
.recipe-meta-unit { font-size: 0.75rem; color: #a8a29e; }
.recipe-meta-select {
  padding: 1px 4px; border: 1px solid #d6d3d1; border-radius: 4px;
  font-size: 0.8rem; background: white; outline: none; cursor: pointer; font-family: inherit;
}
.recipe-meta-select:focus { border-color: #60a5fa; }

/* ── Option F: Rezept-Variablen unterhalb Tabelle ────────────────────── */
#recipe-vars-f {
  background: #fafaf9; border: 1px solid #e7e5e4; border-radius: 10px;
  padding: 10px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
}
.recipe-var-field { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.recipe-var-label {
  font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: #a8a29e;
}
.recipe-var-input {
  width: 56px; padding: 3px 6px; border: 1px solid #e7e5e4;
  border-radius: 6px; font-size: 0.8rem; text-align: right;
  background: white; outline: none; font-family: inherit;
}
.recipe-var-input:focus { border-color: #60a5fa; }
.recipe-var-unit { font-size: 0.75rem; color: #a8a29e; }
.recipe-var-select {
  padding: 3px 5px; border: 1px solid #e7e5e4; border-radius: 6px;
  font-size: 0.8rem; background: white; outline: none; cursor: pointer; font-family: inherit;
}
.recipe-var-select:focus { border-color: #60a5fa; }

#rezept-tabelle {
  box-shadow:
    0 1px 3px rgba(0,0,0,0.07),
    0 4px 16px rgba(0,0,0,0.05);
}


/* ── Section-Header ──────────────────────────────────────────────────────── */

tbody.hauptteig-section tr.section-header > td:not(.desc-cell) {
  background-color: #44403c;
  color: white;
  border-bottom: none;
  padding: 6px 10px;
}
tbody.vorteig-section tr.section-header > td:not(.desc-cell) {
  background-color: #78716c;
  color: white;
  border-bottom: none;
  padding: 6px 10px;
}

/* Editing-Zustand: etwas hellerer Hintergrund */
tbody.hauptteig-section tr.section-header.section-editing > td:not(.desc-cell) { background-color: #5a5550; }
tbody.vorteig-section   tr.section-header.section-editing > td:not(.desc-cell) { background-color: #8f8a85; }
tbody.hauptteig-section tr.section-header.section-editing td.sticky-col        { background: #5a5550; }
tbody.vorteig-section   tr.section-header.section-editing td.sticky-col        { background: #8f8a85; }

/* View / Edit-Mode für Section-Header */
tr.section-header:not(.section-editing) input.section-name,
tr.section-header:not(.section-editing) .temp-label,
tr.section-header:not(.section-editing) input.ziel-temp,
tr.section-header:not(.section-editing) .btn-add-row,
tr.section-header:not(.section-editing) .btn-remove-section {
  display: none;
  pointer-events: none;
  caret-color: transparent;
}
tr.section-header.section-editing .section-view-name,
tr.section-header.section-editing .section-view-temp { display: none; }
tr.section-header:not(.section-editing) { cursor: pointer; }

.section-view-name {
  font-weight: 600; font-size: 13px; color: white;
  user-select: none; cursor: pointer;
}
.section-view-temp {
  font-size: 12px; color: rgba(255,255,255,0.65);
  user-select: none; cursor: pointer;
}

/* Transparente Inputs auf dunklem Header-Hintergrund */
input.section-name {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  color: white;
  font-weight: 600;
  font-size: 13px;
  flex: 1;
  min-width: 80px;
  padding: 2px 4px;
  outline: none;
}
input.section-name:focus         { border-bottom-color: white; }
input.section-name::placeholder  { color: rgba(255,255,255,0.45); }

input.ziel-temp {
  width: 70px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 4px;
  color: white;
  font-size: 13px;
  padding: 3px 6px;
  outline: none;
  box-sizing: border-box;
}
input.ziel-temp::placeholder { color: rgba(255,255,255,0.4); }
input.ziel-temp:focus         { border-color: white; }


/* ── Zutaten- und Vorteig-Ref-Zeilen ─────────────────────────────────────── */

/* Zebrastreifen */
tr.ingredient-row:nth-child(even)       { background-color: #f5f5f4; }
tr.ingredient-row:nth-child(even):hover { background-color: #e7e5e4; }

/* View / Edit-Mode */
tr.ingredient-row:not(.row-editing) input,
tr.vorteig-ref:not(.row-editing) input    { display: none; }
tr.ingredient-row:not(.row-editing) .btn-remove { display: none; }

tr.ingredient-row.row-editing .view-val,
tr.vorteig-ref.row-editing    .view-val   { display: none; }

/* Gramm-Zellen: immer als berechneter Text, nie als Eingabefeld */
tr.ingredient-row .gram-cell input        { display: none !important; }
tr.ingredient-row .gram-cell .view-val    { display: block !important; }

tr.ingredient-row:not(.row-editing),
tr.vorteig-ref:not(.row-editing)          { cursor: pointer; }

tr.ingredient-row.row-editing { background-color: #fffbeb !important; }
tr.vorteig-ref.row-editing    { background-color: #f5f5f4 !important; }

/* Zahlen rechtsbündig */
tr.ingredient-row td:nth-child(n+3):nth-child(-n+6) .view-val,
tr.vorteig-ref    td:nth-child(n+3):nth-child(-n+6) .view-val { text-align: right; }

/* Vielfach-Mengenspalte fett */
tr.ingredient-row td:nth-child(4) .view-val,
tr.vorteig-ref    td:nth-child(4) .view-val { font-weight: 700; color: #111827; }

/* Berechnete Wassertemperatur */
tr.is-water input.temp-input          { background: #dbeafe; color: #1d4ed8; font-style: italic; }
tr.is-water input.temp-input:read-only { background: #dbeafe; color: #1d4ed8; }

/* Read-only Inputs (global) */
input:read-only { background-color: #f3f4f6; color: #6b7280; }


/* ── Sticky-Spalten ──────────────────────────────────────────────────────── */

td.sticky-col, th.sticky-col { position: sticky; z-index: 2; overflow: hidden; }
th.sticky-col-1, td.sticky-col-1 { left: 0; min-width: 1.75rem; width: 1.75rem; }
th.sticky-col-2, td.sticky-col-2 { left: 1.75rem; /* box-shadow: 1px 0 0 #e5e7eb; */ }

thead th.sticky-col                                     { background: #57534e; }
thead tr.settings-row th.sticky-col                      { background: #a89e98; }
thead tr.settings-row th input[type=number]::-webkit-inner-spin-button,
thead tr.settings-row th input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
thead tr.settings-row th input[type=number]              { -moz-appearance: textfield; }
tfoot tr td.sticky-col                                   { background: #f3f4f6; }
tbody.hauptteig-section tr.section-header td.sticky-col { background: #44403c; }
tbody.vorteig-section   tr.section-header td.sticky-col { background: #78716c; }
tr.ingredient-row:nth-child(odd)        td.sticky-col   { background: #ffffff; }
tr.ingredient-row:nth-child(odd):hover  td.sticky-col   { background: #f9fafb; }
tr.ingredient-row:nth-child(even)       td.sticky-col   { background: #f5f5f4; }
tr.ingredient-row:nth-child(even):hover td.sticky-col   { background: #e7e5e4; }
tr.ingredient-row.row-editing           td.sticky-col   { background: #fffbeb !important; }
tr.vorteig-ref          td.sticky-col                   { background: #fafaf9; }
tr.vorteig-ref:hover    td.sticky-col                   { background: #f5f5f4; }
tr.vorteig-ref.row-editing td.sticky-col                { background: #f5f5f4; }


/* ── Drag & Drop ─────────────────────────────────────────────────────────── */

tr.drop-above td { box-shadow: inset 0 2px 0 0 #3b82f6; }
tr.drop-below td { box-shadow: inset 0 -2px 0 0 #3b82f6; }
tr.dragging       { opacity: 0.3; }


/* ── Vorteig-hinzufügen-Zeile ────────────────────────────────────────────── */

#tbody-add-vorteig td {
  background-color: #f5f3f0;
  border: none;
}
#tbody-add-vorteig .btn-add-vorteig-row {
  font-size: 12px; color: #57534e; background: #eeece9;
  border: 1px solid #d6d3d1; border-radius: 5px;
  cursor: pointer; padding: 3px 10px;
  transition: background 0.15s, border-color 0.15s;
}
#tbody-add-vorteig .btn-add-vorteig-row:hover {
  background: #e5e2de; border-color: #c4bfbb;
}

.btn-add-zutat-row {
  font-size: 12px; color: #57534e; background: #eeece9;
  border: 1px solid #d6d3d1; border-radius: 5px;
  cursor: pointer; padding: 3px 10px;
  transition: background 0.15s, border-color 0.15s;
}
.btn-add-zutat-row:hover {
  background: #e5e2de; border-color: #c4bfbb;
}


/* ── Verarbeitungsbeschreibung ───────────────────────────────────────────── */

td.desc-cell {
  vertical-align: top;
  padding: 0;
  border-top: 1px dashed #e7e5e4;
  background: #ffffff;
}
tr.desc-row.collapsed { display: none; }

.desc-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
}

/* Vorschau-Modus */
.desc-preview {
  flex: 1;
  min-height: 36px;
  cursor: text;
  font-size: 13px;
  line-height: 1.55;
  color: #374151;
  word-break: break-word;
}
.desc-preview:not(:has(*)):not(:has(br))::after {
  content: "Verarbeitungshinweise hinzufügen …";
  color: #c4bfbb;
  font-size: 12px;
}

/* Markdown-Ausgabe */
.desc-preview p          { margin-bottom: 3px; }
.desc-preview ul         { list-style: disc;    padding-left: 16px; margin-bottom: 3px; }
.desc-preview ol         { list-style: decimal; padding-left: 16px; margin-bottom: 3px; }
.desc-preview li         { margin-bottom: 1px; }
.desc-preview strong     { font-weight: 700; }
.desc-preview em         { font-style: italic; }
.desc-preview h1         { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.desc-preview h2         { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.desc-preview h3         { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.desc-preview code       { background: #f3f4f6; padding: 1px 4px; border-radius: 3px; font-size: 12px; font-family: monospace; }
.desc-preview blockquote { border-left: 3px solid #d1d5db; padding-left: 8px; color: #6b7280; margin: 2px 0; }

/* Edit-Modus */
.desc-textarea {
  display: none;
  width: 100%;
  flex: 1;
  min-height: 80px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 13px;
  font-family: monospace;
  line-height: 1.55;
  color: #374151;
  background: white;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}
.desc-textarea:focus { border-color: #3b82f6; }
.btn-desc-fertig {
  align-self: flex-end;
  margin-top: 6px;
  padding: 4px 12px;
  font-size: 12px; font-weight: 500; font-family: inherit;
  background: #78716c; color: #fff;
  border: none; border-radius: 5px;
  cursor: pointer; transition: background 0.12s;
}
.btn-desc-fertig:hover { background: #57534e; }


/* ── Arbeitsschritte ─────────────────────────────────────────────────────── */

td.steps-cell {
  padding: 0;
  background: #f5f5f4;
  border-bottom: 2px solid #d6d3d1;
  transition: border-bottom-color 0s 0.28s;
}
tr.steps-row.collapsed td.steps-cell {
  border-bottom-color: transparent;
  transition: border-bottom-color 0s;
}
.steps-cell-body {
  overflow: hidden;
  max-height: 600px;
  padding: 12px 14px;
  transition: max-height 0.28s ease, padding-top 0.28s ease, padding-bottom 0.28s ease;
}
tr.steps-row.collapsed .steps-cell-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
tr.steps-trigger-row td   { background: #f5f5f4; border-top: 2px solid #d6d3d1; border-bottom: 2px solid #d6d3d1; padding: 0; }
tr.steps-trigger-row.open td { border-bottom: none; }

.btn-show-steps {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 8px 14px;
  font-size: 13px; font-weight: 500; color: #57534e;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: inherit; transition: background 0.12s, color 0.12s;
}
.btn-show-steps:hover { background: rgba(0,0,0,0.04); color: #292524; }

.steps-chevron { display: flex; align-items: center; color: #a8a29e; transition: transform 0.2s; flex-shrink: 0; }
.steps-chevron.open { transform: rotate(180deg); }
.steps-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px; padding: 0 5px;
  font-size: 10px; font-weight: 600; line-height: 1;
  background: #e7e5e4; color: #78716c; border-radius: 8px;
  vertical-align: middle; margin-left: 5px;
}

.btn-close-steps { display: none; }

.steps-list         { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.steps-empty-hint   { font-size: 12px; color: #a8a29e; font-style: italic; margin: 0 0 6px; }
.steps-col-header {
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px; margin-bottom: 4px;
  font-size: 10px; font-weight: 600; color: #c4bfbb; text-transform: uppercase; letter-spacing: 0.06em;
}
.steps-col-header .steps-col-name  { flex: 1; min-width: 0; }
.steps-col-header .steps-col-dauer { white-space: nowrap; }
.steps-col-header .steps-col-type  { white-space: nowrap; }
.steps-backplan-hint { font-size: 11px; color: #c4bfbb; margin: 0 0 8px; line-height: 1.5; }

/* Schritt-Karte */
.step-item {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: white; border: 1px solid #e7e5e4; border-radius: 6px;
  padding: 5px 8px; cursor: pointer; transition: border-color 0.15s;
}

/* View / Edit-Mode */
.step-item:not(.step-editing) .step-edit-fields { display: none; }
.step-item.step-editing .step-view-fields        { display: none; }
.step-item.step-editing { background: #fffbeb !important; border-color: #fcd34d; cursor: default; }

/* View-Felder */
.step-view-fields {
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
  pointer-events: none;
}
.step-view-name {
  font-size: 13px; color: #1c1917; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.step-view-name.placeholder { color: #a8a29e; font-style: italic; }
.step-view-dauer            { font-size: 12px; color: #a8a29e; white-space: nowrap; }
.step-view-ressource {
  font-size: 11px; font-weight: 500; padding: 1px 7px;
  border-radius: 10px; white-space: nowrap; line-height: 1.6;
}

/* Edit-Felder */
.step-edit-fields { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.step-edit-row2   { display: flex; align-items: center; gap: 6px; }

.step-name {
  width: 100%; border: none; outline: none;
  font-size: 13px; color: #1c1917; background: transparent;
  font-family: inherit;
}
.step-dauer-wrap { display: flex; align-items: center; gap: 3px; }
.step-dauer-h, .step-dauer-m {
  width: 40px; border: 1px solid #e7e5e4; border-radius: 4px;
  padding: 2px 5px; font-size: 12px; text-align: right; outline: none;
  font-family: inherit;
}
.step-dauer-h:focus, .step-dauer-m:focus { border-color: #a8a29e; }
.step-dauer-unit { font-size: 12px; color: #78716c; }

.step-ressource {
  border: 1px solid #e7e5e4; border-radius: 4px; padding: 2px 4px;
  font-size: 12px; outline: none; background: white; cursor: pointer;
  font-family: inherit;
}
.step-ressource:focus { border-color: #a8a29e; }

/* Backen-Schritt: strukturierte Temperaturfelder */
.step-backen-fields {
  display: flex; flex-direction: column; gap: 3px;
}
.step-backen-row {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.step-backen-label {
  font-size: 12px; color: #78716c; white-space: nowrap;
}
.step-temp-start,
.step-temp-end {
  width: 50px; border: 1px solid #e7e5e4; border-radius: 4px;
  padding: 2px 4px; font-size: 12px; text-align: center;
  outline: none; font-family: inherit; -moz-appearance: textfield;
}
.step-temp-change-at {
  width: 36px; border: 1px solid #e7e5e4; border-radius: 4px;
  padding: 2px 4px; font-size: 12px; text-align: center;
  outline: none; font-family: inherit; -moz-appearance: textfield;
}
.step-temp-start:focus,
.step-temp-end:focus,
.step-temp-change-at:focus { border-color: #a8a29e; }
.step-temp-start::-webkit-inner-spin-button,
.step-temp-end::-webkit-inner-spin-button,
.step-temp-change-at::-webkit-inner-spin-button { -webkit-appearance: none; }
.step-backen-optional { color: #b8b0ab; }

.step-legacy-badge {
  font-size: 11px; font-weight: 500;
  color: #92400e; background: #fef3c7;
  border: 1px solid #fcd34d; border-radius: 4px;
  padding: 1px 6px; white-space: nowrap; flex-shrink: 0;
}

/* Ofen-Modus: Text-Input ausblenden, strukturierte Felder einblenden */
.step-item:not(.step-is-ofen) .step-backen-fields { display: none; }
.step-item.step-is-ofen .step-name { display: none; }

.btn-delete-step {
  background: none; border: none; cursor: pointer; color: #d1c9c4;
  font-size: 13px; padding: 0 2px; line-height: 1; transition: color 0.15s;
}
.btn-delete-step:hover { color: #ef4444; }

.btn-add-step {
  display: block; width: 100%; padding: 9px 14px;
  font-size: 13px; font-family: inherit; color: #78716c;
  background: white; border: 1px dashed #d6d3d1; border-radius: 6px;
  cursor: pointer; text-align: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn-add-step:hover { background: #f5f5f4; color: #44403c; border-color: #a8a29e; }


/* ── Ressource-Farben (geteilt von Schritt-Ansicht, Timeline und Gantt) ───── */

.res-passiv       { background: #e0e0e0; color: #78716c; }
.res-knetmaschine { background: #dbeafe; color: #2563eb; }
.res-ofen         { background: #ffedd5; color: #ea580c; }
.res-manuell      { background: #dcfce7; color: #16a34a; }

.step-ressource.res-passiv      { color: #78716c; }
.step-ressource.res-knetmaschine { color: #2563eb; }
.step-ressource.res-ofen        { color: #ea580c; }
.step-ressource.res-manuell     { color: #16a34a; }

.step-view-ressource.res-passiv       { background: #f5f5f4; color: #78716c; }
.step-view-ressource.res-knetmaschine { background: #dbeafe; color: #2563eb; }
.step-view-ressource.res-ofen         { background: #ffedd5; color: #ea580c; }
.step-view-ressource.res-manuell      { background: #dcfce7; color: #16a34a; }


/* ── Teigausbeute Info-Tooltip ───────────────────────────────────────────── */

.ta-info-btn {
  position: absolute; top: 80px; right: 10px;
  width: 16px; height: 16px; border-radius: 50%;
  background: none; border: 1.5px solid #d6d3d1;
  color: #a8a29e; font-size: 10px; font-weight: 700;
  font-style: italic; font-family: Georgia, serif;
  cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.ta-info-btn:hover { border-color: #78716c; color: #57534e; }

.ta-info-tooltip {
  position: absolute; bottom: calc(100% + 8px); right: 0;
  width: 280px;
  background: white; border: 1px solid #e7e5e4;
  border-radius: 8px; box-shadow: 0 4px 18px rgba(0,0,0,0.13);
  padding: 10px 12px;
  font-size: 12px; line-height: 1.55; color: #44403c;
  z-index: 200; text-align: left;
}
.ta-info-tooltip p { margin: 0 0 6px; }
.ta-info-tooltip p:last-child { margin-bottom: 0; }
.ta-info-formula {
  font-family: monospace; font-size: 11px;
  background: #f5f5f4; border-radius: 4px;
  padding: 4px 8px; color: #57534e;
}

/* ── Sticky App-Header ───────────────────────────────────────────────────── */

#app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f5f3f0;
  /* Negative Margins kompensieren den px-5 des body, damit Header volle Breite nutzt */
  margin-left: -1.25rem;
  margin-right: -1.25rem;
  padding: 8px 1.25rem 0;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */

.app-toolbar {
  display: flex;
  align-items: center;
  padding: 4px 0 5px;
  gap: 1px;
  flex-wrap: wrap;
}

.toolbar-group {
  display: flex;
  align-items: center;
}

.toolbar-spacer { flex: 1; }

.toolbar-divider {
  width: 1px;
  height: 14px;
  background: #d6d3d1;
  margin: 0 3px;
  flex-shrink: 0;
}

.toolbar-btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  font-size: 12px;
  font-family: inherit;
  color: #44403c;
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.5;
  transition: background 0.12s, color 0.12s;
}
.toolbar-btn:hover        { background: rgba(0,0,0,0.07); }
.toolbar-btn-danger       { color: #dc2626; }
.toolbar-btn-danger:hover { background: #fee2e2; color: #b91c1c; }

.toolbar-btn-primary            { background: #78716c; color: #fff; font-weight: 500; }
.toolbar-btn-primary:hover      { background: #57534e; }

.toolbar-btn-primary--dirty            { background: #f59e0b; color: #fff; font-weight: 600; }
.toolbar-btn-primary--dirty:hover      { background: #d97706; }
@keyframes dirty-attention {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.07); }
  60%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

.toolbar-btn-ghost              { color: #a8a29e; }
.toolbar-btn-ghost:hover        { background: rgba(0,0,0,0.05); color: #78716c; }

.toolbar-btn-accent             { background: #d6eaca; color: #14532d; font-weight: 600; padding: 4px 10px; border: 1px solid #bdd0b1; }
.toolbar-btn-accent:hover       { background: #add593; border-color: #96c579; }

.toolbar-btn:disabled           { opacity: 0.38; cursor: default; }
.toolbar-btn:disabled:hover     { background: transparent; border-color: #86efac; }
.toolbar-btn-primary:disabled:hover { background: #78716c; }
.toolbar-btn-accent:disabled:hover  { background: #dcfce7; border-color: #86efac; }

/* ── Tab-Navigation ──────────────────────────────────────────────────────── */

#tab-nav {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 2px solid #e7e5e4;
}
.tab-btn {
  padding: 8px 20px 9px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-size: 13px;
  font-weight: 500;
  color: #a8a29e;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  font-family: inherit;
}
.tab-btn:hover  { color: #57534e; }
.tab-btn.active { color: #44403c; border-bottom-color: #44403c; font-weight: 600; }

.subtab-btn {
  padding: 7px 16px 8px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 13px;
  font-weight: 500;
  color: #a8a29e;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  font-family: inherit;
}
.subtab-btn:hover                 { color: #57534e; }
.subtab-btn.subtab-btn-active     { color: #44403c; border-bottom-color: #44403c; font-weight: 600; }
.subtab-btn.subtab-btn-locked,
.subtab-btn.subtab-btn-locked:hover {
  color: #d4d0cc;
  cursor: not-allowed;
  border-bottom-color: transparent;
}
.subtab-lock-icon {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  margin-bottom: 1px;
  opacity: 0.6;
}

.beta-ribbon {
  position: fixed;
  top: 18px;
  right: -28px;
  width: 110px;
  z-index: 9998;
  transform: rotate(45deg);
  background: #fcd34d;
  cursor: pointer;
}
.beta-ribbon:hover {
  background: #fbbf24;
}
.beta-ribbon span {
  display: block;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #78350f;
  padding: 4px 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* Beta-Info-Modal */
#beta-info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
#beta-info-overlay.hidden { display: none; }
.beta-info-modal {
  background: #fff;
  border-radius: 14px;
  max-width: 480px;
  width: 100%;
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  position: relative;
}
.beta-info-modal h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1c1917;
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.beta-info-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #78350f;
  background: #fcd34d;
  border-radius: 4px;
  padding: 2px 7px;
}
.beta-info-modal p {
  font-size: 0.875rem;
  color: #44403c;
  line-height: 1.65;
  margin: 0 0 0.85rem;
}
.beta-info-modal p:last-of-type { margin-bottom: 0; }
.beta-info-divider {
  border: none;
  border-top: 1px solid #e7e5e4;
  margin: 1.1rem 0;
}
.beta-info-feedback-link {
  display: block;
  margin-top: 1rem;
  text-align: center;
  background: #f59e0b;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.7rem 1.25rem;
  text-decoration: none;
  transition: background 0.15s;
}
.beta-info-feedback-link:hover { background: #d97706; }
.beta-info-close {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.3rem;
  color: #a8a29e;
  cursor: pointer;
  line-height: 1;
  padding: 0.2rem 0.3rem;
}
.beta-info-close:hover { color: #1c1917; }

/* ── Einstellungen-Modal Tabs ─────────────────────────────────────────────── */
.settings-tab-nav {
  display: flex;
  border-bottom: 1px solid #e7e5e4;
  flex-shrink: 0;
  background: #fafaf9;
  padding: 0 16px;
  gap: 0;
}
.settings-tab-btn {
  padding: 9px 13px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #a8a29e;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
  white-space: nowrap;
  margin-bottom: -1px;
  line-height: 1.3;
}
.settings-tab-btn:hover { color: #57534e; }
.settings-tab-btn.active { color: #44403c; border-bottom-color: #44403c; font-weight: 600; }
.settings-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #a8a29e;
  margin-bottom: 0.4rem;
}
.settings-section-desc {
  font-size: 0.8rem;
  color: #78716c;
  line-height: 1.55;
  margin-bottom: 1rem;
}

.tab-dirty-dot {
  color: #f59e0b; margin-left: 4px; font-size: 18px;
  line-height: 1; vertical-align: middle;
  display: inline-block;
}

/* Dirty-Warnung im Backplan-Tab */
.backplan-dirty-warning {
  display: flex; align-items: flex-start; gap: 8px;
  background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px;
  padding: 10px 14px; margin-bottom: 16px; font-size: 13px; color: #92400e;
}
.backplan-dirty-warning button {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: #b45309; font-size: 13px; padding: 0; white-space: nowrap;
  text-decoration: underline; flex-shrink: 0;
}


/* ── Sync-Toast ──────────────────────────────────────────────────────────── */
#sync-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  background: #16a34a;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 11px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(22,163,74,0.30), 0 2px 8px rgba(0,0,0,0.12);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
  white-space: nowrap;
}
#sync-toast.sync-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#sync-toast.sync-toast-has-action {
  pointer-events: auto;
}
#sync-toast-action {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 10px;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Sync-Banner ─────────────────────────────────────────────────────────── */
.sync-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #92400e;
}
.sync-banner-actions {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
}
.sync-banner-actions button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  text-decoration: underline;
  color: #b45309;
  white-space: nowrap;
}
.sync-banner-actions button:first-child { font-weight: 600; }

/* ── Rezept-Verwaltungs-Modal ────────────────────────────────────────────── */

.recipe-manager-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-radius: 8px;
  transition: background 0.1s;
}
.recipe-manager-row:hover  { background: #f9fafb; }
.recipe-manager-row.active { background: #eff6ff; }

.recipe-manager-load-btn {
  padding: 4px 12px;
  font-size: 12px;
  font-family: inherit;
  background: #44403c;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
  flex-shrink: 0;
}
.recipe-manager-load-btn:hover { background: #57534e; }

.recipe-manager-delete-btn {
  padding: 4px 7px;
  font-size: 13px;
  font-family: inherit;
  background: none;
  border: none;
  color: #d1c9c4;
  cursor: pointer;
  border-radius: 5px;
  line-height: 1;
  transition: color 0.12s, background 0.12s;
  flex-shrink: 0;
}
.recipe-manager-delete-btn:hover { color: #ef4444; background: #fee2e2; }

/* ── Modal: Rezeptliste – ausgewählter Eintrag ───────────────────────────── */

#modal-body li.recipe-item.selected {
  background-color: #eff6ff;
  border-color: #93c5fd !important;
  color: #1d4ed8;
}
#modal-body li.recipe-item.selected span.font-medium {
  color: #1d4ed8;
}


/* ── Backplan-Panel ──────────────────────────────────────────────────────── */

/* Konflikt-Zusammenfassung */
.backplan-konflikt-summary {
  display: block;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #9a3412;
  overflow: hidden;
}
.backplan-konflikt-summary.hidden { display: none; }

.konflikt-summary-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #fde8cc;
}
.konflikt-summary-icon { flex-shrink: 0; font-size: 14px; }
.konflikt-summary-title { flex: 1; }
.konflikt-summary-btn {
  flex-shrink: 0;
  background: none; border: 1px solid #f97316; border-radius: 5px;
  color: #9a3412; font-size: 12px; font-family: inherit;
  padding: 3px 10px; cursor: pointer; white-space: nowrap;
  transition: background 0.12s;
}
.konflikt-summary-btn:hover { background: #fed7aa; }

.konflikt-groups {
  padding: 8px 14px 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.konflikt-group-heading {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: #c2410c; margin-bottom: 4px;
}
.konflikt-group-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.konflikt-group-list li {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding-left: 12px; position: relative; line-height: 1.5;
}
.konflikt-group-list li::before {
  content: '·'; position: absolute; left: 2px;
  color: #f97316; font-size: 14px; line-height: 1.3;
}
.konflikt-overlap-time {
  font-size: 11px; font-family: monospace;
  background: #ffedd5; color: #9a3412;
  padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}
.konflikt-recipe-link {
  background: none; border: none; padding: 0;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: #9a3412; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-style: dotted;
  transition: color 0.12s;
}
.konflikt-recipe-link:hover { color: #7c2d12; text-decoration-style: solid; }
.backplan-zielzeit-highlight {
  outline: 2px solid #f97316 !important;
  border-radius: 4px;
}
.konflikt-group--ofen .konflikt-group-heading {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #b91c1c;
}
.konflikt-thermo-icon {
  width: 11px;
  height: auto;
  flex-shrink: 0;
}
.konflikt-ofen-item {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.konflikt-ofen-msg {
  font-size: 12px;
}
.konflikt-override-btn {
  margin-left: auto;
  background: none;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 11px;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.konflikt-override-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
}

/* ── Bestellungen: Karten ─────────────────────────────────────────────────── */

/* Stepper-Buttons (tablet-freundlich, ≥44px) */
.bestellung-stepper-btn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1.5px solid #e7e5e4;
  background: #fafaf9;
  color: #44403c;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, border-color 0.12s;
  flex-shrink: 0;
  line-height: 1;
}
.bestellung-stepper-btn:hover:not(:disabled) {
  background: #f5f5f4;
  border-color: #a8a29e;
}
.bestellung-stepper-btn:disabled { opacity: 0.3; cursor: default; }
/* Bestellmenge: editierbares Zählfeld */
.bestellung-count-input {
  width: 56px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: #1c1917;
  border: 1.5px solid #e7e5e4;
  border-radius: 8px;
  padding: 4px 0;
  background: white;
  -moz-appearance: textfield;
}
.bestellung-count-input::-webkit-outer-spin-button,
.bestellung-count-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.bestellung-count-input:focus { outline: none; border-color: #93c5fd; }
.bestellung-count-input:disabled { opacity: 0.5; background: #f5f5f4; }

/* Aufschlag-Stepper: kleinere Variante (32px) */
.bestellung-stepper-btn--sm {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 16px;
}

/* Aufschlag-Zeile */
.bestellung-mengen-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: #fafaf9;
  border-radius: 8px;
  border: 1px solid #f0efee;
}
.bestellung-aufschlag {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bestellung-aufschlag-prefix {
  font-size: 13px;
  font-weight: 600;
  color: #a8a29e;
  width: 10px;
  text-align: center;
}
.bestellung-aufschlag-input {
  width: 52px;
  padding: 4px 6px;
  border: 1px solid #e7e5e4;
  border-radius: 6px;
  text-align: center;
  font-size: 13px;
  background: white;
  -moz-appearance: textfield;
}
.bestellung-aufschlag-input::-webkit-outer-spin-button,
.bestellung-aufschlag-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.bestellung-aufschlag-input:focus { outline: none; border-color: #93c5fd; }
.bestellung-aufschlag-input:disabled { opacity: 0.5; background: #f5f5f4; }

/* Ergebnis: Teigmenge gesamt */
.bestellung-ergebnis {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.bestellung-ergebnis-label {
  font-size: 11px;
  color: #a8a29e;
  white-space: nowrap;
}
.bestellung-ergebnis-wert {
  font-size: 15px;
  font-weight: 700;
  color: #1c1917;
  white-space: nowrap;
}

/* ── Bestellung Read-only (Status: Mengen fixiert) ────────────────────────── */
.bestellung-readonly-cols {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.bestellung-readonly-col {
  flex: 1;
}
.bestellung-readonly-col--teig {
  border-left: 1px solid #e7e5e4;
  padding-left: 16px;
  margin-left: 16px;
}
.bestellung-readonly-mengen {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.bestellung-readonly-menge {
  font-size: 22px;
  font-weight: 700;
  color: #1c1917;
  line-height: 1;
}
.bestellung-readonly-unit {
  font-size: 14px;
  color: #78716c;
}
.bestellung-readonly-aufschlag {
  font-size: 12px;
  color: #a8a29e;
  margin-top: 2px;
}

/* ── Backplan CTA: Zum Backzettel ─── */
.backplan-cta-row {
  padding: 4px 0 8px;
}
.btn-backplan-backzettel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  /* Konfliktfrei: grün gefüllt */
  background: #16a34a;
  color: #fff;
  border: 2px solid #16a34a;
}
.btn-backplan-backzettel:hover {
  background: #15803d;
  border-color: #15803d;
}
/* Mit Konflikten: Outline-Amber */
.btn-backplan-backzettel.has-konflikt {
  background: #fffbeb;
  color: #92400e;
  border-color: #f59e0b;
}
.btn-backplan-backzettel.has-konflikt:hover {
  background: #fef3c7;
}
.backplan-cta-icon {
  font-style: normal;
}

/* ── Bestellung-Karten: Wrapper + externer Delete-Button ─────────────────── */
.bestellung-row-wrap {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 10px;
}
.bestellung-row-wrap .bestellung-row {
  flex: 1;
  min-width: 0;
}
.btn-bestellung-delete {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #d4d0cc;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  margin-top: 10px; /* optisch zur Kopfzeile der Karte ausrichten */
}
.btn-bestellung-delete:hover {
  color: #ef4444;
  background: #fef2f2;
}
.btn-bestellung-snapshot:hover {
  color: #44403c;
  background: #f5f5f4;
}

/* ── Status-Card (Bestellungen-View) ─────────────────────────────────────── */
.bestellungen-status-card {
  background: #f5f5f4;
  border: 1px solid #e7e5e4;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.bestellungen-status-card-text {
  font-size: 14px;
  color: #57534e;
  margin: 0 0 12px;
}
.btn-bestellungen-add {
  display: block;
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 2px dashed #d6d3d1;
  background: transparent;
  color: #a8a29e;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.btn-bestellungen-add:hover {
  border-color: #a8a29e;
  color: #57534e;
  background: #fafaf9;
}

.bestellungen-status-card-check {
  color: #16a34a;
  font-weight: 700;
  margin-right: 5px;
}
.bestellungen-status-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.btn-bestellungen-transfer {
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #bdd0b1;
  background: #d6eaca;
  color: #14532d;
  transition: background 0.15s;
  white-space: nowrap;
}
.btn-bestellungen-transfer:hover { background: #add593; border-color: #96c579; }
}
.btn-bestellungen-oeffnen {
  font-size: 13px;
  font-weight: 400;
  color: #a8a29e;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.btn-bestellungen-oeffnen:hover {
  color: #57534e;
}


/* ── Backtage Status-Badges ───────────────────────────────────────────────── */
/* Blau: „In Planung" */
.bt-status-offen        { background: #dbeafe; color: #1d4ed8; }
/* Amber: Zwischenzustand „Abgeschlossen, noch nicht im Plan" */
.bt-status-abgeschlossen { background: #fef3c7; color: #92400e; }
/* Grün: „Aktiv – im Backplan" */
.bt-status-uebertragen  { background: #dcfce7; color: #15803d; }
/* Grau: „Erledigt / Archiv" */
.bt-status-gebacken     { background: #f5f5f4; color: #78716c; }

/* ── Backtage Liste ───────────────────────────────────────────────────────── */
.backtag-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.backtag-card {
  flex: 1;
  min-width: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  border: 1px solid #e7e5e4;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.backtag-card:hover { border-color: #93c5fd; }
.bt-rezept-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  background: #f5f5f4;
  color: #78716c;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.btn-backtag-delete {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: none;
  color: #d4d0cc;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.btn-backtag-delete:hover {
  color: #ef4444;
  background: #fef2f2;
}
.backtage-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #a8a29e;
  margin: 16px 0 8px;
}
.backtage-section-label:first-child { margin-top: 0; }

/* Toggle-Header für Archiv-Sektion */
.backtage-section-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  padding: 4px 0;
  margin: 16px 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #c4bfbb;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s;
}
.backtage-section-toggle:hover { color: #a8a29e; }
.backtage-section-toggle-arrow { font-style: normal; font-size: 10px; }
.backtage-archiv-count {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  background: #f5f5f4;
  color: #a8a29e;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 4px;
  white-space: nowrap;
}

/* Archiv-Gruppe */
.backtage-archiv-group { opacity: 0.65; }
.backtage-archiv-group:hover { opacity: 1; transition: opacity 0.2s; }

/* „Alle anzeigen"-Button */
.backtage-archiv-mehr {
  display: block;
  width: 100%;
  padding: 9px;
  margin-top: 4px;
  background: none;
  border: 1px dashed #d6d3d1;
  border-radius: 10px;
  font-size: 12px;
  color: #a8a29e;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  text-align: center;
}
.backtage-archiv-mehr:hover { border-color: #a8a29e; color: #57534e; }

/* ── Backtage Empty State ─────────────────────────────────────────────────── */
.backtage-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 32px 48px;
  margin-top: 8px;
  background: white;
  border-radius: 16px;
  border: 1px solid #e7e5e4;
}
.backtage-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: #f5f5f4;
  color: #78716c;
  margin-bottom: 20px;
}
.backtage-empty-headline {
  font-size: 18px;
  font-weight: 700;
  color: #1c1917;
  margin: 0 0 10px;
}
.backtage-empty-subline {
  font-size: 14px;
  color: #78716c;
  line-height: 1.55;
  max-width: 380px;
  margin: 0 0 28px;
}
.backtage-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  background: #44403c;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.backtage-empty-cta:hover { background: #57534e; }
.backtage-empty-help {
  margin-top: 14px;
  background: none;
  border: none;
  font-size: 13px;
  color: #a8a29e;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
  transition: color 0.15s;
}
.backtage-empty-help:hover { color: #57534e; }

.backplan-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #a8a29e;
  font-size: 13px;
  background: white;
  border-radius: 12px;
  border: 1px dashed #d6d3d1;
  margin-bottom: 12px;
}

.backplan-recipe-card {
  background: white;
  border: 1px solid #e7e5e4;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.backplan-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 9px;
  background: #f5f3f0;
  border-bottom: 1px solid #e7e5e4;
}
.backplan-card-name { font-weight: 600; font-size: 14px; color: #1c1917; }

.btn-backplan-remove {
  background: none; border: none; cursor: pointer;
  color: #c7bfba; font-size: 14px; padding: 0 2px;
  line-height: 1; transition: color 0.15s;
}
.btn-backplan-remove:hover { color: #ef4444; }

.backplan-card-body {
  padding: 10px 14px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}

.backplan-time-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: #57534e;
}
.backplan-zielzeit {
  border: 1px solid #e7e5e4; border-radius: 6px;
  padding: 4px 8px; font-size: 13px; font-family: inherit;
  color: #1c1917; outline: none; cursor: pointer;
}
.backplan-zielzeit:focus { border-color: #a8a29e; }

.backplan-step-badge {
  font-size: 12px; color: #78716c; background: #f5f5f4;
  border-radius: 10px; padding: 2px 9px;
}
.backplan-no-steps-badge {
  font-size: 12px; color: #b45309; background: #fef3c7;
  border-radius: 10px; padding: 2px 9px;
}

/* Erinnerungs-Zeile im Backplan-Card (unter Schritte-Badge) */
.backplan-card-reminder-row {
  margin-top: 6px;
}
.backplan-card-reminder-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 11px;
  color: #a8a29e;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.backplan-card-reminder-btn:hover { color: #78716c; }


/* ── Backplan-Timeline ───────────────────────────────────────────────────── */

.backplan-card-timeline {
  border-top: 1px solid #f0ede9;
  padding: 6px 14px 10px;
}
.backplan-timeline-empty {
  font-size: 12px; color: #a8a29e; font-style: italic; padding: 4px 0 2px;
}
.backplan-section-divider {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: #a8a29e; padding: 6px 0 3px;
}
.backplan-section-divider:first-child { padding-top: 4px; }

.backplan-timeline-row {
  display: grid;
  grid-template-columns: 128px 48px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 3px 4px 3px 0;
  border-bottom: 1px solid #f5f5f4;
}
.backplan-timeline-row:last-child { border-bottom: none; }

.backplan-timeline-row-konflikt {
  grid-template-columns: 128px 48px 1fr auto auto;
  background: #fff7ed;
  border-radius: 4px;
  margin: 0 -4px;
  padding-left: 4px;
}
.backplan-timeline-konflikt-flag {
  font-size: 11px;
  line-height: 1;
  opacity: 0.8;
}

.backplan-timeline-dauer {
  font-size: 11px;
  color: #a8a29e;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.backplan-timeline-time {
  font-size: 12px; color: #78716c;
  white-space: nowrap; font-variant-numeric: tabular-nums;
  min-width: 81px;
}
.backplan-timeline-time.nachtarbeit { color: #dc2626; font-weight: 600; }

.backplan-timeline-name {
  font-size: 13px; color: #1c1917;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.backplan-timeline-name.unnamed { color: #a8a29e; font-style: italic; }

.backplan-timeline-res {
  font-size: 10px; font-weight: 500;
  padding: 1px 7px; border-radius: 8px; white-space: nowrap;
}
.backplan-timeline-res.res-passiv       { background: #f5f5f4; color: #78716c; }
.backplan-timeline-res.res-knetmaschine { background: #dbeafe; color: #2563eb; }
.backplan-timeline-res.res-ofen         { background: #ffedd5; color: #ea580c; }
.backplan-timeline-res.res-manuell      { background: #dcfce7; color: #16a34a; }


/* ── Gantt-Chart ─────────────────────────────────────────────────────────── */

/* Titlebar (immer sichtbar, auch im Docked-Zustand) */
.gantt-titlebar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0 8px;
}
.gantt-titlebar-label { flex: 1; margin: 0; }
.gantt-dock-btn {
  background: none; border: 1px solid #e7e5e4; border-radius: 5px;
  color: #a8a29e; font-size: 11px; padding: 2px 7px;
  cursor: pointer; transition: background 0.12s, color 0.12s;
}
.gantt-dock-btn:hover { background: #f5f5f4; color: #57534e; }

/* ── Docked-Zustand (Desktop: fixiert am unteren Viewport-Rand) ── */
#backplan-gantt-section.gantt-docked {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: white;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
  padding: 0 20px 4px;
  border-top: 2px solid #e7e5e4;
}
#backplan-gantt-section.gantt-docked .gantt-titlebar {
  padding: 6px 0 6px;
}
#backplan-gantt-section.gantt-docked .gantt-outer {
  max-height: 260px; overflow-y: auto; border-radius: 6px;
}

/* Eingeklappt: nur Titlebar sichtbar */
#backplan-gantt-section.gantt-docked-collapsed #backplan-gantt,
#backplan-gantt-section.gantt-docked-collapsed #backplan-gantt-legend { display: none; }

/* ── Mobile Fullscreen-Overlay ── */
#backplan-gantt-section.gantt-fullscreen {
  position: fixed !important; inset: 0; z-index: 100;
  background: white; overflow: auto;
  padding: 16px 16px 20px; box-shadow: none; border-top: none;
  max-height: none !important;
}
#backplan-gantt-section.gantt-fullscreen .gantt-titlebar {
  padding: 0 0 10px; border-bottom: 1px solid #e7e5e4; margin-bottom: 12px;
}
#backplan-gantt-section.gantt-fullscreen .gantt-outer { max-height: none !important; overflow-y: visible; }
#backplan-gantt-section.gantt-fullscreen #backplan-gantt-legend { display: flex; }

/* ── FAB (Mobile) ── */
.gantt-fab {
  display: none; /* wird per JS auf mobile eingeblendet */
  position: fixed; bottom: 20px; right: 20px; z-index: 50;
  width: 52px; height: 52px; border-radius: 50%;
  background: #44403c; color: white;
  border: none; cursor: pointer;
  align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  transition: background 0.15s, transform 0.15s;
}
.gantt-fab:hover { background: #57534e; transform: scale(1.06); }
.gantt-fab:not(.hidden) { display: flex; }

.gantt-outer { overflow-x: auto; border: 1px solid #e7e5e4; border-radius: 8px; }
.gantt-grid  { display: grid; /* grid-template-columns wird per JS gesetzt */ }

/* Header-Zeile — sticky in beiden Dimensionen (links bei horizontalem Scroll, oben bei vertikalem) */
.gantt-head-label  { background: #fafaf9; border-right: 1px solid #e7e5e4; border-bottom: 1px solid #e7e5e4; height: 28px; position: sticky; left: 0; top: 0; z-index: 4; }
.gantt-head-comp   { background: repeating-linear-gradient(-45deg, #fafaf9, #fafaf9 3px, rgba(0,0,0,.04) 3px, rgba(0,0,0,.04) 6px); border-right: 2px dashed #d6d3d1; border-bottom: 1px solid #e7e5e4; display: flex; align-items: center; justify-content: center; padding: 2px 6px; font-size: 10px; color: #a8a29e; text-align: center; line-height: 1.3; position: sticky; top: 0; z-index: 3; }
.gantt-head-active { border-bottom: 1px solid #e7e5e4; position: sticky; top: 0; overflow: hidden; background: #fafaf9; z-index: 3; }

/* Rezept-Zeilen */
.gantt-cell-label  { background: white; border-right: 1px solid #e7e5e4; border-bottom: 1px solid #f5f5f4; position: sticky; left: 0; z-index: 2; display: flex; align-items: center; padding: 0 10px; font-size: 12px; font-weight: 500; color: #44403c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 52px; }
.gantt-cell-comp   { background: repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(0,0,0,.03) 3px, rgba(0,0,0,.03) 6px); border-right: 2px dashed #d6d3d1; border-bottom: 1px solid #f5f5f4; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 4px 6px; overflow: hidden; min-height: 52px; }
.gantt-cell-active { border-bottom: 1px solid #f5f5f4; position: relative; overflow: hidden; min-height: 52px; }

/* Ressource-Zeilen */
.gantt-res-label  { background: #fafaf9; border-right: 1px solid #e7e5e4; border-top: 1px solid #e7e5e4; position: sticky; left: 0; z-index: 2; display: flex; align-items: center; padding: 0 10px; font-size: 11px; color: #78716c; min-height: 32px; }
.gantt-res-comp   { background: repeating-linear-gradient(-45deg, #fafaf9, #fafaf9 3px, rgba(0,0,0,.04) 3px, rgba(0,0,0,.04) 6px); border-right: 2px dashed #d6d3d1; border-top: 1px solid #e7e5e4; min-height: 32px; }
.gantt-res-active { position: relative; overflow: hidden; background: #fafaf9; border-top: 1px solid #e7e5e4; min-height: 32px; }

/* Blöcke */
.gantt-block     { position: absolute; top: 6px; bottom: 6px; border-radius: 3px; display: flex; align-items: center; padding: 0 5px; font-size: 10px; font-weight: 500; overflow: hidden; white-space: nowrap; cursor: default; box-sizing: border-box; }
.gantt-res-block { position: absolute; top: 5px; bottom: 5px; border-radius: 2px; display: flex; align-items: center; padding: 0 4px; font-size: 9px;  font-weight: 500; overflow: hidden; white-space: nowrap; cursor: default; box-sizing: border-box; }

.gantt-block.res-passiv,       .gantt-res-block.res-passiv       { background: #e7e5e4; color: #44403c; }
.gantt-block.res-manuell,      .gantt-res-block.res-manuell      { background: #dcfce7; color: #166534; }
.gantt-block.res-knetmaschine, .gantt-res-block.res-knetmaschine { background: #dbeafe; color: #1e40af; }
.gantt-block.res-ofen,         .gantt-res-block.res-ofen         { background: #fef3c7; color: #92400e; }
.gantt-block.res-konflikt,     .gantt-res-block.res-konflikt     { background: #fecaca; color: #991b1b; }

/* Komprimierte Mini-Blöcke */
.gantt-mini { height: 14px; border-radius: 2px; flex-shrink: 0; display: flex; align-items: center; padding: 0 4px; font-size: 9px; overflow: hidden; white-space: nowrap; }
.gantt-mini.res-passiv       { background: #e7e5e4; color: #44403c; }
.gantt-mini.res-manuell      { background: #dcfce7; color: #166534; }
.gantt-mini.res-knetmaschine { background: #dbeafe; color: #1e40af; }
.gantt-mini.res-ofen         { background: #fef3c7; color: #92400e; }
.gantt-mini-summary          { font-size: 9px; color: #a8a29e; font-style: italic; text-align: center; }

/* Stundenmarkierungen */
.gantt-tick       { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; }
.gantt-tick-label { font-size: 10px; color: #a8a29e; padding: 3px 0 0 2px; white-space: nowrap; }
.gantt-tick-line  { width: 1px; background: #e7e5e4; flex: 1; }

/* Jetzt-Linie */
.gantt-now-line { position: absolute; top: 0; bottom: 0; width: 1.5px; background: #f87171; pointer-events: none; z-index: 1; }
.gantt-now-pip  { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 7px; height: 7px; border-radius: 50%; background: #f87171; }

/* Nacht-Schraffur */
/* ── Gantt: Ofen-Pufferphase ────────────────────────────────────────────────── */
.gantt-puffer-block {
  position: absolute;
  top: 0; bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent, transparent 3px,
    rgba(0,0,0,0.045) 3px, rgba(0,0,0,0.045) 5px
  );
  border-left: 1px dashed rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 0;
}
.gantt-puffer-block--konflikt {
  background: repeating-linear-gradient(
    45deg,
    rgba(254,202,202,0.55) 0px, rgba(254,202,202,0.55) 4px,
    rgba(220,38,38,0.18)   4px, rgba(220,38,38,0.18)   8px
  );
  border-left: 2px dashed rgba(220,38,38,0.65);
}
.gantt-puffer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.gantt-puffer-thermo {
  width: 14px;
  height: auto;
  display: block;
  overflow: visible;
  /* Normalzustand: gedämpftes Grau */
  filter: grayscale(1) brightness(0.55);
}
.gantt-puffer-block--konflikt .gantt-puffer-thermo {
  /* Konflikt: Originalfarben — roter Bulb signalisiert Warnung */
  filter: none;
}
/* Schritte liegen über Puffer-Blöcken */
.gantt-res-block { z-index: 1; }

/* ── Gantt: Puffer-Tooltip ──────────────────────────────────────────────────── */
#gantt-puffer-tooltip {
  position: absolute;
  z-index: 9999;
  background: #1e1e2e;
  color: #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
}
#gantt-puffer-tooltip[hidden] { display: none; }
#gantt-puffer-tooltip.gptt--konflikt {
  border-color: rgba(248,113,113,0.45);
}
.gptt-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.gptt-row + .gptt-row { margin-top: 4px; }
.gptt-header { font-weight: 500; }
.gptt-icon {
  width: 13px;
  height: auto;
  flex-shrink: 0;
}
.gptt-temps {
  color: #94a3b8;
  font-size: 11px;
  padding-left: 19px;
}
.gptt-warn {
  color: #f87171;
  font-size: 11px;
  padding-left: 19px;
}
.gptt-warn::before { content: '⚠ '; }

.gantt-night-band {
  position: absolute;
  top: 0; bottom: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(0, 0, 0, 0.055) 4px,
    rgba(0, 0, 0, 0.055) 8px
  );
  pointer-events: none;
  z-index: 0;
}

/* Konflikt-Punkt am Ressourcen-Label */
.gantt-res-konflikt-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  margin-left: 6px;
  flex-shrink: 0;
}

/* Mond-Icon in der Backplan-Timeline */
.nacht-moon-icon {
  font-style: normal;
  margin-right: 3px;
  font-size: 0.85em;
}

/* Legende */
.gantt-legend       { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; padding: 4px 0; }
.gantt-legend-item  { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #78716c; }
.gantt-legend-swatch { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }
.gantt-legend-swatch.res-passiv       { background: #e7e5e4; }
.gantt-legend-swatch.res-manuell      { background: #dcfce7; }
.gantt-legend-swatch.res-knetmaschine { background: #dbeafe; }
.gantt-legend-swatch.res-ofen         { background: #fef3c7; }
.gantt-legend-swatch.res-konflikt     { background: #fecaca; }
.gantt-legend-swatch.compressed       { background: repeating-linear-gradient(-45deg, #f5f5f4, #f5f5f4 2px, #e7e5e4 2px, #e7e5e4 4px); border: 1px solid #d6d3d1; }


/* ── Backzettel ──────────────────────────────────────────────────────────── */

#backzettel-list {
  display: flex;
  flex-direction: column;
}

.backzettel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 8px 10px 0;
  cursor: pointer;
  transition: background 0.1s;
  border-top: 1px solid #f0ede9;
}
.backzettel-row-first { border-top: none; }
.backzettel-row:hover  { background: #f9f8f7; }
.backzettel-row:active { background: #f0ede9; }

/* Checkbox */
.backzettel-check {
  width: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.backzettel-check::before {
  content: '';
  display: block;
  width: 26px;
  height: 26px;
  border: 2px solid #d6d3d1;
  border-radius: 7px;
  background: white;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.backzettel-check-done::before {
  background: #44403c;
  border-color: #44403c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7l3.5 3.5L12 3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

/* Zeit */
.backzettel-time {
  width: 72px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.backzettel-time-start {
  font-size: 14px;
  font-weight: 600;
  color: #1c1917;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.backzettel-time-end {
  font-size: 11px;
  color: #a8a29e;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.backzettel-time.nachtarbeit .backzettel-time-start { color: #dc2626; }

/* Info */
.backzettel-info { flex: 1; min-width: 0; }
.backzettel-step-name {
  font-size: 14px;
  font-weight: 700;
  color: #1c1917;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.backzettel-recipe-name {
  font-size: 12px;
  font-weight: 400;
  color: #78716c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  margin-top: 1px;
}

/* Meta */
.backzettel-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
  min-width: 0;
  max-width: 100px; /* Knetmaschine-Pill (~95 px) passt ohne Kürzung */
}
.backzettel-res {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 8px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.backzettel-dauer {
  font-size: 11px;
  color: #a8a29e;
  white-space: nowrap;
}

/* Erledigt-Zustand */
.backzettel-row-done .backzettel-step-name   { text-decoration: line-through; color: #c7bfba; font-weight: 400; }
.backzettel-row-done .backzettel-recipe-name { color: #d6d3d1; }
.backzettel-row-done .backzettel-time        { opacity: 0.4; }
.backzettel-row-done .backzettel-meta        { opacity: 0.4; }

/* Passive Schritte: informativ, ebenfalls tippbar für Detail */
.backzettel-row-passive                  { opacity: 0.6; }
.backzettel-check-passive::before        { content: '–'; display: flex; align-items: center; justify-content: center;
                                           width: 22px; height: 22px; border-radius: 50%;
                                           background: transparent; border: 1.5px dashed #d6d3d1;
                                           color: #a8a29e; font-size: 0.95rem; line-height: 1; }

/* Passive Schritte ausblenden → wird jetzt per JS als Trennlinie gerendert */

/* ── Kollabierte Historie ──────────────────────────────────────────────────── */
.backzettel-historie-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 0;
  background: none;
  border: none;
  border-bottom: 1px solid #e7e5e4;
  cursor: pointer;
  margin-bottom: 4px;
}
.backzettel-historie-count {
  font-size: 12px;
  font-weight: 500;
  color: #a8a29e;
}
.backzettel-historie-action {
  font-size: 12px;
  color: #c7bfba;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.backzettel-historie-toggle:hover .backzettel-historie-action { color: #78716c; }

/* ── Passive Trennlinie (wenn "Passive ausblenden" aktiv) ─────────────────── */
.backzettel-passive-sep {
  font-size: 11px;
  color: #d6d3d1;
  text-align: center;
  padding: 3px 0;
  letter-spacing: 0.03em;
  user-select: none;
}

/* Jetzt-Linie */
.backzettel-now-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  pointer-events: none;
}
.backzettel-now-label {
  font-size: 11px;
  font-weight: 700;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.backzettel-now-line::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, #dc2626, transparent);
  opacity: 0.5;
  border-radius: 1px;
}


/* ── Backzettel: Hinweis-Zeile ───────────────────────────────────────────── */

.bz-hint {
  font-size: 11px;
  color: #c7bfba;
  text-align: center;
  padding: 8px 0 2px;
  letter-spacing: 0.03em;
  pointer-events: none;
  user-select: none;
}

/* ── Backzettel: Schritt-Detail-Overlay ──────────────────────────────────── */

#backzettel-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  align-items: flex-end;
  justify-content: center;
  background: rgba(28, 25, 23, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.bz-detail-sheet {
  width: 100%;
  max-width: 640px;
  min-height: 68vh;
  max-height: 88vh;
  background: #fafaf9;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: bz-sheet-up 0.22s ease-out;
}

@keyframes bz-sheet-up {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.bz-detail-header {
  position: relative;
  padding: 20px 56px 16px 20px;
  flex-shrink: 0;
  border-bottom: 1px solid #e7e5e4;
}
.bz-detail-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e7e5e4;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #57534e;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.bz-detail-close:hover { background: #d6d3d1; color: #1c1917; }
.bz-detail-step-name {
  font-size: 28px;
  font-weight: 700;
  color: #1c1917;
  line-height: 1.2;
  margin-bottom: 5px;
}
.bz-detail-context {
  font-size: 15px;
  color: #78716c;
}

/* Erinnerungs-Link im Bottom-Sheet (Option C: unter Kontext-Zeile) */
.bz-detail-reminder {
  display: inline-block;
  margin-top: 8px;
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: #a8a29e;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.bz-detail-reminder:hover { color: #78716c; }

.bz-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 8px;
  -webkit-overflow-scrolling: touch;
}
.bz-detail-footer {
  padding: 12px 20px 24px;
  border-top: 1px solid #e7e5e4;
}
.bz-detail-done-btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  background: #e07b39;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.bz-detail-done-btn:hover { background: #c96828; }
.bz-detail-scale {
  font-size: 14px;
  color: #a8a29e;
  margin: 0 0 14px;
}
.bz-detail-scale strong { color: #78716c; }

.bz-detail-ingredient {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0ede9;
  gap: 12px;
}
.bz-detail-ingredient-name {
  font-size: 20px;
  color: #1c1917;
  flex: 1;
  min-width: 0;
}
.bz-detail-ingredient-grams {
  font-size: 18px;
  font-weight: 600;
  color: #44403c;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: #f0ede9;
  border-radius: 8px;
  padding: 4px 12px;
  flex-shrink: 0;
}
.bz-detail-temp {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #2563eb;
  margin-top: 2px;
}
.bz-detail-ingredient-ref .bz-detail-ingredient-name {
  color: #78716c;
  font-style: italic;
}
.bz-detail-ingredient-ref .bz-detail-ingredient-grams {
  background: #f5f3f0;
  color: #78716c;
}
.bz-detail-empty {
  font-size: 14px;
  color: #a8a29e;
  text-align: center;
  padding: 40px 0;
}

/* ── Mobile Navigation ───────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .beta-ribbon { display: none; }
  .tab-btn-label { display: none; }
  .tab-btn-help  { gap: 0; padding-left: 10px; padding-right: 10px; }

  /* Backzettel: Meta-Spalte auf Smartphones enger halten, damit
     der Arbeitsschritt-Titel mehr Platz bekommt. Resource-Pill
     kürzt bei Bedarf auf "Knetmasc…" etc. */
  .backzettel-meta { max-width: 64px; }

  /* Gantt: Kein Sticky-Docking auf Mobile — stattdessen FAB */
  #backplan-gantt-section.gantt-docked {
    position: static !important;
    box-shadow: none !important;
    border-top: none !important;
    padding: 0 !important;
  }
  #backplan-gantt-section.gantt-docked .gantt-outer {
    max-height: none !important;
    overflow-y: visible !important;
  }
  #backplan-gantt-section.gantt-docked #gantt-dock-collapse   { display: none !important; }
}

@media (max-width: 500px) {
  /* Backplan-Timeline: Zeitspalte nutzt Mindestbreite statt fixer 128 px.
     "08:00 – 09:30" richtet sich am Inhalt aus, nie schmaler als 68 px. */
  .backplan-timeline-row          { grid-template-columns: minmax(68px, max-content) 48px 1fr auto; }
  .backplan-timeline-row-konflikt { grid-template-columns: minmax(68px, max-content) 48px 1fr auto auto; }
}


/* ── Druckansicht ────────────────────────────────────────────────────────── */

@media print {
  /* Sticky-Header: nicht sticky, kein Schatten */
  #app-header {
    position: static !important;
    box-shadow: none !important;
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Tab-Navigation und Toolbars ausblenden */
  #tab-nav,
  #toolbar-rezept,
  #toolbar-backplan,
  #panel-backplan,
  #help-modal-overlay,
  #modal-overlay {
    display: none !important;
  }

  @page { margin: 1.5cm 2cm; }

  body {
    background: white !important;
    padding: 0 !important;
    max-width: none !important;
    font-size: 11pt;
  }

  /* Sticky-Verhalten und Schatten entfernen */
  td.sticky-col, th.sticky-col { position: static !important; }
  .rounded-lg, .shadow-sm      { box-shadow: none !important; border-radius: 0 !important; }
  .rounded-lg.overflow-x-auto  { overflow: visible !important; }

  /* Tabelle auf volle Seitenbreite; Mindestbreiten aufheben damit table-layout: auto
     die Spalten frei auf die verfügbare Seitenbreite verteilen kann */
  #rezept-tabelle {
    table-layout: auto !important;
    font-size: 10pt;
  }
  #rezept-tabelle th,
  #rezept-tabelle td {
    min-width: 0 !important;
    width: auto !important;
    white-space: normal !important;
  }
  /* Numerische Spalten (Mengen, Temperatur) nicht umbrechen */
  #rezept-tabelle th:not(:nth-child(2)),
  #rezept-tabelle td:not(:nth-child(2)) {
    white-space: nowrap !important;
  }

  /* Tabellenkopf wiederholen, tfoot nur einmal */
  thead { display: table-header-group; }
  tfoot { display: table-row-group; }

  /* Seitenumbrüche */
  tbody.section                          { break-inside: avoid; }
  tr.ingredient-row, tr.vorteig-ref,
  tr.desc-row                           { break-inside: avoid; }
  tr.steps-row, tr.steps-trigger-row    { display: none !important; }
  .mt-5.flex.gap-4                      { break-before: avoid; break-inside: avoid; }

  /* Eingabefelder als Text */
  input, textarea {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: black !important;
  }

  /* Hintergrundfarben beibehalten */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Bearbeitungs-Elemente ausblenden */
  .btn-add-row, .btn-remove-section,
  .btn-desc-fertig,
  .btn-show-steps, tr.steps-trigger-row,
  .btn-close-steps, .btn-add-step,
  .btn-delete-step, .btn-remove        { display: none !important; }

  /* „+ Zutat hinzufügen"- und „+ Vorteig hinzufügen"-Zeilen ausblenden */
  tr.row-add-footer,
  #tbody-add-vorteig { display: none !important; }

  /* Drag-Handle-Spalte vollständig ausblenden */
  th.sticky-col-1, td.sticky-col-1 {
    display: none !important;
  }

  /* Aktions-Button-Spalte auf null */
  #rezept-tabelle thead tr th:last-child,
  #rezept-tabelle td:has(.btn-remove) {
    width: 0 !important; min-width: 0 !important;
    padding: 0 !important; overflow: hidden !important; border: none !important;
  }

  /* Rezepttitel immer anzeigen */
  #recipe-title { display: block !important; margin-bottom: 0.75rem; }

  /* Aufgeklappte Verarbeitungshinweise anzeigen */
  tr.desc-row:not(.collapsed) { display: table-row !important; }

  /* Inputs in der Zielgewicht-Zeile */
  thead tr.settings-row th input { color: #1c1917 !important; font-size: 10pt; }
}