:root{
  --cp-accent:#167500;
  --cp-accent2:#33a02c;

  --cp-bg:#f7f7fb;
  --cp-bg2:#eef3f0;
  --cp-card:#ffffff;
  --cp-card-soft:#f8fafc;
  --cp-border: rgba(17,24,39,.08);

  --cp-text:#111827;
  --cp-text-soft:#5b6472;
  --cp-shadow:
    0 10px 24px rgba(17,24,39,.06),
    0 2px 6px rgba(17,24,39,.04);
}

:root[data-theme="dark"]{
  --cp-bg:#0f1720;
  --cp-bg2:#16212b;
  --cp-card:#18232d;
  --cp-card-soft:#1d2a35;
  --cp-border: rgba(255,255,255,.09);

  --cp-text:#edf2f7;
  --cp-text-soft:#a8b3bf;
  --cp-shadow:
    0 12px 28px rgba(0,0,0,.28),
    0 2px 8px rgba(0,0,0,.22);
}

/* ========= GLOBAL ========= */

body{
  color: var(--cp-text);
  background:
    radial-gradient(1200px 520px at 50% -120px,
      rgba(22,117,0,.14) 0%,
      rgba(22,117,0,.07) 35%,
      rgba(22,117,0,0) 70%),
    linear-gradient(180deg, var(--cp-bg2) 0%, var(--cp-bg) 420px);
  background-attachment: fixed;
  min-height: 100vh;
}

.container,
.row,
.card,
.table,
.form-control,
.form-select,
.btn,
.navbar,
.dropdown-menu,
.modal-content {
  transition:
    background-color .20s ease,
    color .20s ease,
    border-color .20s ease,
    box-shadow .20s ease,
    opacity .20s ease;
}

/* KEIN HOVER-GEHÜPFE */
.cp-card,
.btn,
.cp-theme-toggle,
.card,
button,
a.btn {
  transform: none !important;
}

/* ========= NAVBAR ========= */

.cp-nav{
  background:
    linear-gradient(90deg, #125f00 0%, var(--cp-accent) 45%, #0b3d0b 100%);
  box-shadow: 0 10px 25px rgba(0,0,0,.14);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.cp-brand{
  letter-spacing: .01em;
}

.cp-logo-wrap{
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.cp-logo{
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
  font-size: 1.1rem;
}

.cp-brand-title{
  color:#fff;
  font-weight:800;
}

.cp-brand-subtitle{
  font-size:.7rem;
  color:rgba(255,255,255,.8);
}

.cp-theme-toggle{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.12);
  color: #fff;
  padding: .35rem .65rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.cp-theme-toggle:hover{
  background: rgba(255,255,255,.20);
  color: #fff;
  border-color: rgba(255,255,255,.24);
}

.theme-icon-dark{
  display: none;
}

:root[data-theme="dark"] .theme-icon-light{
  display: none;
}
:root[data-theme="dark"] .theme-icon-dark{
  display: inline;
}

/* ========= CARDS ========= */

.cp-card{
  border-radius: 1.1rem;
  border: 1px solid var(--cp-border);
  background: var(--cp-card);
  box-shadow: var(--cp-shadow);
  color: var(--cp-text);
}

.cp-muted{
  color: var(--cp-text-soft);
}

.cp-userpill{
  display:inline-block;
  padding:.35rem .6rem;
  border-radius:999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
}

/* ========= BUTTONS ========= */

.btn{
  box-shadow: none;
}

/* Schwarze Buttons */
.btn-dark{
  background:#111827;
  border-color:#111827;
  color:#fff;
  box-shadow: 0 6px 16px rgba(17,24,39,.16);
}

.btn-dark:hover,
.btn-dark:focus{
  background:#1f2937;
  border-color:#1f2937;
  color:#fff;
  box-shadow: 0 8px 18px rgba(17,24,39,.20);
}

.btn-dark:active{
  background:#0f172a !important;
  border-color:#0f172a !important;
  color:#fff !important;
}

:root[data-theme="dark"] .btn-dark{
  background:#0f141b;
  border-color:#0f141b;
  color:#f8fafc;
  box-shadow: 0 8px 18px rgba(0,0,0,.26);
}

:root[data-theme="dark"] .btn-dark:hover,
:root[data-theme="dark"] .btn-dark:focus{
  background:#25303b;
  border-color:#25303b;
  color:#fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.32);
}

:root[data-theme="dark"] .btn-dark:active{
  background:#10161d !important;
  border-color:#10161d !important;
  color:#fff !important;
}

/* Outline Buttons allgemein */
.btn-outline-dark,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-primary{
  background: transparent;
}


.icon-btn{
  width:2rem;
  height:2rem;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  line-height:1;
}

.icon-btn svg{
  width:1rem;
  height:1rem;
  fill:currentColor;
  flex:none;
}

.icon-btn.icon-btn-wide{
  width:auto;
  min-width:2rem;
  padding:0 .5rem;
}

.cp-table-actions{
  white-space:nowrap;
}

/* Light mode */
.btn-outline-dark:hover,
.btn-outline-dark:focus{
  background:#111827;
  border-color:#111827;
  color:#fff;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus{
  background:#6b7280;
  border-color:#6b7280;
  color:#fff;
}

.btn-outline-success:hover,
.btn-outline-success:focus{
  background:#198754;
  border-color:#198754;
  color:#fff;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus{
  background:#dc3545;
  border-color:#dc3545;
  color:#fff;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus{
  background:#0d6efd;
  border-color:#0d6efd;
  color:#fff;
}

/* Dark mode: Outline Buttons endlich sichtbar */
:root[data-theme="dark"] .btn-outline-dark{
  color:#eef4fb;
  border-color:rgba(255,255,255,.24);
  background: rgba(255,255,255,.02);
}

:root[data-theme="dark"] .btn-outline-dark:hover,
:root[data-theme="dark"] .btn-outline-dark:focus{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.34);
  color:#ffffff;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

:root[data-theme="dark"] .btn-outline-secondary{
  color:#dbe4ee;
  border-color:rgba(255,255,255,.20);
  background: rgba(255,255,255,.02);
}

:root[data-theme="dark"] .btn-outline-secondary:hover,
:root[data-theme="dark"] .btn-outline-secondary:focus{
  background: rgba(148,163,184,.16);
  border-color: rgba(148,163,184,.34);
  color:#ffffff;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

:root[data-theme="dark"] .btn-outline-success{
  color:#c9f7cf;
  border-color:rgba(51,160,44,.55);
  background: rgba(51,160,44,.05);
}

:root[data-theme="dark"] .btn-outline-success:hover,
:root[data-theme="dark"] .btn-outline-success:focus{
  background: rgba(51,160,44,.20);
  border-color: rgba(51,160,44,.72);
  color:#effff1;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

:root[data-theme="dark"] .btn-outline-danger{
  color:#ffd2d2;
  border-color:rgba(239,68,68,.55);
  background: rgba(239,68,68,.05);
}

:root[data-theme="dark"] .btn-outline-danger:hover,
:root[data-theme="dark"] .btn-outline-danger:focus{
  background: rgba(239,68,68,.20);
  border-color: rgba(239,68,68,.72);
  color:#fff0f0;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

:root[data-theme="dark"] .btn-outline-primary{
  color:#cfe2ff;
  border-color:rgba(13,110,253,.58);
  background: rgba(13,110,253,.06);
}

:root[data-theme="dark"] .btn-outline-primary:hover,
:root[data-theme="dark"] .btn-outline-primary:focus{
  background: rgba(13,110,253,.20);
  border-color: rgba(13,110,253,.78);
  color:#f4f8ff;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

/* Kleine Buttons in Tabellen besser lesbar */
:root[data-theme="dark"] .btn-sm{
  font-weight: 500;
}

/* ========= FORM ========= */

.form-control,
.form-select{
  background: var(--cp-card);
  color: var(--cp-text);
  border-color: var(--cp-border);
}

.form-control::placeholder{
  color: var(--cp-text-soft);
}

.form-control:focus,
.form-select:focus{
  border-color: rgba(22,117,0,.45);
  box-shadow: 0 0 0 .25rem rgba(22,117,0,.12);
}

:root[data-theme="dark"] .form-text,
:root[data-theme="dark"] .small,
:root[data-theme="dark"] .text-muted{
  color: var(--cp-text-soft) !important;
}

:root[data-theme="dark"] label,
:root[data-theme="dark"] .form-label{
  color:#e5edf5;
}

/* ========= TABLE ========= */

.table{
  color: var(--cp-text);
}

.table > :not(caption) > * > *{
  background: transparent;
  color: inherit;
  border-bottom-color: var(--cp-border);
}

:root[data-theme="dark"] .table thead th{
  color: #d9e1ea;
}

:root[data-theme="dark"] .table-responsive{
  border-radius: 14px;
}

/* ========= HERO ========= */

.cp-hero{
  position: relative;
  overflow: hidden;
  border-radius: 1.35rem;
  border: 1px solid var(--cp-border);
  background:
    linear-gradient(135deg, rgba(22,117,0,.16), rgba(22,117,0,.05)),
    var(--cp-card);
  box-shadow: var(--cp-shadow);
  color: var(--cp-text);
}

:root[data-theme="dark"] .cp-hero{
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.05), transparent 25%),
    linear-gradient(135deg, rgba(22,117,0,.18), rgba(22,117,0,.05)),
    #16212b;
}

.cp-hero::after{
  content:"";
  position:absolute;
  inset:auto -30px -30px auto;
  width:180px;
  height:180px;
  background: radial-gradient(circle, rgba(22,117,0,.12) 0%, rgba(22,117,0,0) 70%);
  pointer-events:none;
}

/* ========= KPI ========= */

.cp-kpi{
  color: var(--cp-text);
}

.cp-kpi .display-6{
  color: var(--cp-text);
  font-weight:800;
}

.cp-kpi .h6{
  color: var(--cp-text-soft);
}

.cp-kpi::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--cp-accent2), var(--cp-accent));
}

.cp-kpi.is-warn::before{ background: linear-gradient(180deg, #f59e0b, #d97706); }
.cp-kpi.is-danger::before{ background: linear-gradient(180deg, #ef4444, #b91c1c); }
.cp-kpi.is-info::before{ background: linear-gradient(180deg, #3b82f6, #1d4ed8); }

.cp-table-title{
  display:flex;
  align-items:center;
  gap:.55rem;
  font-weight:800;
}

.cp-table-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  background: linear-gradient(180deg, var(--cp-accent2), var(--cp-accent));
  box-shadow: 0 0 0 4px rgba(22,117,0,.08);
}

/* ========= CHAOS LEVEL ========= */

.cp-chaos-alert{
  border-radius: 1rem;
  box-shadow: var(--cp-shadow);
}

.cp-chaos-alert .cp-chaos-title,
.cp-chaos-alert .cp-chaos-text,
.cp-chaos-alert .cp-chaos-side,
.cp-chaos-alert .cp-chaos-value{
  color: inherit;
}

.cp-chaos-alert.is-calm{
  background:#eaf7ec;
  color:#1e5e2a;
}

.cp-chaos-alert.is-medium{
  background:#fff6dd;
  color:#7a5600;
}

.cp-chaos-alert.is-chaos{
  background:#fdeaea;
  color:#8f1d1d;
}

:root[data-theme="dark"] .cp-chaos-alert.is-calm{
  background:rgba(25,135,84,.18);
  color:#d5f5df;
}

:root[data-theme="dark"] .cp-chaos-alert.is-medium{
  background:rgba(245,158,11,.18);
  color:#ffefc2;
}

:root[data-theme="dark"] .cp-chaos-alert.is-chaos{
  background:rgba(239,68,68,.18);
  color:#ffd7d7;
}

/* ========= DROPDOWN ========= */

:root[data-theme="dark"] .dropdown-menu{
  background:#16212b;
  color:var(--cp-text);
}

:root[data-theme="dark"] .dropdown-item{
  color:var(--cp-text);
}

:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus{
  background:rgba(255,255,255,.06);
}

/* ========= BADGES ========= */

.badge.cp-badge{
  font-size:.82rem;
  padding:.45em .65em;
  border-radius:999px;
}

.cp-freq-daily{ background:#0d6efd; }
.cp-freq-weekly{ background:#198754; }
.cp-freq-monthly{ background:#f2c94c; color:#111; }
.cp-freq-semiannual{ background:#6f42c1; }
.cp-freq-annual{ background:#dc3545; }
.cp-freq-once{ background:#475569; }

/* ========= SUGGEST ========= */

.cp-suggest{
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 12px;
  margin-top: .35rem;
  background: var(--cp-card);
}

.cp-suggest .dropdown-item{
  padding: .65rem .9rem;
}

.cp-suggest .dropdown-item.active,
.cp-suggest .dropdown-item:active{
  background: rgba(22,117,0,.12);
  color: #111;
}

.cp-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(22,117,0,.45);
  flex: 0 0 auto;
}

/* ========= AUTH / ALERT / MODAL ========= */

.cp-auth-note{
  color: var(--cp-text-soft);
}

:root[data-theme="dark"] .bg-light{
  background-color: var(--cp-card-soft) !important;
}

:root[data-theme="dark"] .alert-light{
  background: var(--cp-card-soft);
  border-color: var(--cp-border);
  color: var(--cp-text);
}

:root[data-theme="dark"] .alert-info,
:root[data-theme="dark"] .alert-warning,
:root[data-theme="dark"] .alert-success,
:root[data-theme="dark"] .alert-danger{
  color: var(--cp-text);
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .navbar,
:root[data-theme="dark"] .modal-content{
  color: var(--cp-text);
}

@media (max-width: 991.98px){
  .cp-brand-subtitle{
    display:none;
  }
}
:root[data-theme="dark"] .modal-content {
  background: var(--cp-card);
  color: var(--cp-text);
  border-color: var(--cp-border);
}

:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer {
  border-color: var(--cp-border);
}

:root[data-theme="dark"] .modal-title,
:root[data-theme="dark"] .modal-body,
:root[data-theme="dark"] .modal-body p,
:root[data-theme="dark"] .modal-body strong,
:root[data-theme="dark"] .modal-body label {
  color: var(--cp-text) !important;
}

:root[data-theme="dark"] .modal .text-muted,
:root[data-theme="dark"] .modal .small,
:root[data-theme="dark"] .modal .form-text {
  color: var(--cp-text-soft) !important;
}

:root[data-theme="dark"] .modal .btn-secondary,
:root[data-theme="dark"] .modal .btn-outline-secondary {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: #f3f7fb;
}

:root[data-theme="dark"] .modal .btn-secondary:hover,
:root[data-theme="dark"] .modal .btn-outline-secondary:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color: #ffffff;
}

:root[data-theme="dark"] .modal .btn-dark {
  background: #0f141b;
  border-color: #0f141b;
  color: #ffffff;
}

:root[data-theme="dark"] .modal .btn-dark:hover {
  background: #25303b;
  border-color: #25303b;
  color: #ffffff;
}

/* Für deine dunkle Hinweisbox im Modal */
:root[data-theme="dark"] .modal .alert,
:root[data-theme="dark"] .modal .cp-info-box,
:root[data-theme="dark"] .modal .cp-move-info {
  background: #1b2a38 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #f3f7fb !important;
}

:root[data-theme="dark"] .modal .alert strong,
:root[data-theme="dark"] .modal .cp-info-box strong,
:root[data-theme="dark"] .modal .cp-move-info strong {
  color: #ffffff !important;
}

:root[data-theme="dark"] .modal .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: .85;
}
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
  background-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.12);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.88);
  opacity: 1;
}
.alert-info {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color: #f1f5f9;
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(4px);
}

/* ========= REZEPTPLANER / GEMEINSAME MODUL-HELFER ========= */

.cp-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:1rem;
}

.cp-grid-auto{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
}

.cp-grid-auto-lg{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem;
}

.cp-subcard{
  border-radius:1rem;
  border:1px solid var(--cp-border);
  background:var(--cp-card-soft);
  color:var(--cp-text);
  box-shadow:0 .35rem .9rem rgba(15,23,42,.06);
}

.cp-list-clean,
.cp-list-clean.list-group{
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: var(--cp-border);
  --bs-list-group-color: var(--cp-text);
  background:transparent;
}

.cp-list-clean .list-group-item{
  background:transparent;
  color:var(--cp-text);
  border-color:var(--cp-border);
}

.cp-media-cover{
  width:100%;
  height:360px;
  object-fit:contain;
  display:block;
  background:var(--cp-card-soft);
}

.cp-media-placeholder{
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1.5rem;
  background:var(--cp-card-soft);
  color:var(--cp-text-soft);
  border-bottom:1px solid var(--cp-border);
}

.cp-badge-soft{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .7rem;
  border-radius:999px;
  border:1px solid var(--cp-border);
  background:var(--cp-card-soft);
  color:var(--cp-text-soft);
  font-size:.84rem;
  font-weight:600;
}

.cp-value-box{
  border-radius:.95rem;
  border:1px solid var(--cp-border);
  background:var(--cp-card-soft);
  color:var(--cp-text);
}

/* ===== Kommentar löschen Hover ===== */

.recipe-comment-item .recipe-comment-delete-form{
  position:absolute;
  right:.7rem;
  bottom:.55rem;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .18s ease, transform .18s ease;
}

.recipe-comment-item:hover .recipe-comment-delete-form,
.recipe-comment-item:focus-within .recipe-comment-delete-form{
  opacity:1;
  transform:translateY(0);
}

.recipe-comment-delete-btn{
  width:2rem;
  height:2rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#dc3545;
  font-size:1rem;
  line-height:1;
  padding:0;
}

.recipe-comment-delete-btn:hover{
  background:rgba(220,53,69,.12);
}

/* ===== Kategorien ===== */

.cp-check-tile{
  position:relative;
  display:block;
  min-height:86px;
  padding:1rem 3.2rem 1rem 1rem;
  border:1px solid var(--cp-border);
  border-radius:1.15rem;
  background:var(--cp-card-soft);
  color:var(--cp-text);
  cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow:0 .35rem .9rem rgba(15,23,42,.06);
}

.cp-check-tile:hover{
  border-color:rgba(22,117,0,.30);
  box-shadow:0 .5rem 1rem rgba(15,23,42,.10);
}

.cp-check-tile input[type="checkbox"]{
  position:absolute;
  top:1rem;
  right:1rem;
  width:1.1rem;
  height:1.1rem;
  margin:0;
  accent-color:var(--cp-accent);
}

.cp-check-tile-body{
  display:flex;
  align-items:center;
  gap:.8rem;
  min-height:100%;
}

.cp-check-tile-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2rem;
  flex:0 0 auto;
  font-size:1.35rem;
  line-height:1;
}

.cp-check-tile-title{
  color:var(--cp-text);
  font-weight:600;
  line-height:1.2;
}

.cp-check-tile:has(input[type="checkbox"]:checked){
  background:rgba(22,117,0,.08);
  border-color:rgba(22,117,0,.42);
}

/* ===== Formular Rezept ===== */

.cp-step-no{
  width:72px;
  min-width:72px;
  text-align:center;
  font-weight:700;
  background:var(--cp-card);
  color:var(--cp-text);
}

.cp-section-actions-bottom{
  position:sticky;
  bottom:0;
  z-index:5;
  padding-top:1rem;
  padding-bottom:.25rem;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--cp-bg) 18%);
}

.recipe-ingredient-row,
.recipe-step-row{
  background:var(--cp-card-soft);
}

.recipe-add-btn{
  width:2.4rem;
  height:2.4rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:0;
  font-size:1.2rem;
  line-height:1;
}

.recipe-remove-btn{
  min-width:2.4rem;
}

.recipe-nutri-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(110px,1fr));
  gap:.75rem;
}

.recipe-nutri-grid .form-label{
  margin-bottom:.35rem;
}

.recipe-nutri-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:.75rem;
}

.recipe-nutri-box{
  border:1px solid var(--cp-border);
  border-radius:1rem;
  background:var(--cp-card-soft);
  padding:.9rem 1rem;
  color:var(--cp-text);
}

.recipe-nutri-box strong{
  display:block;
}

/* ===== Dark Mode, aber korrekt über data-theme ===== */

:root[data-theme="dark"] .cp-subcard,
:root[data-theme="dark"] .cp-value-box,
:root[data-theme="dark"] .cp-media-placeholder,
:root[data-theme="dark"] .cp-badge-soft,
:root[data-theme="dark"] .recipe-ingredient-row,
:root[data-theme="dark"] .recipe-step-row,
:root[data-theme="dark"] .recipe-nutri-box{
  background:var(--cp-card-soft);
  color:var(--cp-text);
  border-color:var(--cp-border);
}

:root[data-theme="dark"] .cp-check-tile{
  background:var(--cp-card-soft);
  color:var(--cp-text);
  border-color:var(--cp-border);
  box-shadow:0 .35rem .9rem rgba(0,0,0,.18);
}

:root[data-theme="dark"] .cp-check-tile-title{
  color:var(--cp-text);
}

:root[data-theme="dark"] .cp-check-tile:has(input[type="checkbox"]:checked){
  background:rgba(22,117,0,.18);
  border-color:rgba(122,197,106,.45);
}

:root[data-theme="dark"] .cp-step-no{
  background:var(--cp-card);
  color:var(--cp-text);
}

:root[data-theme="dark"] .cp-section-actions-bottom{
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--cp-bg) 18%);
}

:root[data-theme="dark"] .recipe-ingredient-row .form-control,
:root[data-theme="dark"] .recipe-ingredient-row .form-select,
:root[data-theme="dark"] .recipe-step-row .form-control,
:root[data-theme="dark"] .recipe-step-row .form-select,
:root[data-theme="dark"] .recipe-nutri-grid .form-control{
  background:var(--cp-card);
  border-color:var(--cp-border);
  color:var(--cp-text);
}

:root[data-theme="dark"] .recipe-ingredient-row .form-control::placeholder,
:root[data-theme="dark"] .recipe-step-row .form-control::placeholder,
:root[data-theme="dark"] .recipe-nutri-grid .form-control::placeholder{
  color:var(--cp-text-soft);
}

:root[data-theme="dark"] .recipe-ingredient-row .form-label,
:root[data-theme="dark"] .recipe-step-row .form-label,
:root[data-theme="dark"] .recipe-nutri-grid .form-label,
:root[data-theme="dark"] .recipe-nutri-box,
:root[data-theme="dark"] .recipe-nutri-box strong,
:root[data-theme="dark"] .recipe-nutri-box span{
  color:var(--cp-text);
}

:root[data-theme="dark"] .recipe-comment-delete-btn{
  color:#ff7b88;
}

:root[data-theme="dark"] .recipe-comment-delete-btn:hover{
  background:rgba(255,123,136,.16);
}

@media (max-width: 991.98px){
  .recipe-nutri-grid{
    grid-template-columns:repeat(2,minmax(120px,1fr));
  }
}

@media (max-width: 575.98px){
  .recipe-nutri-grid{
    grid-template-columns:1fr;
  }
}
.recipe-nutri-box-sm{
  padding:.55rem .7rem;
  border-radius:.85rem;
  font-size:.85rem;
}

.recipe-nutri-box-sm strong{
  font-size:.76rem;
  margin-bottom:.1rem;
  color:var(--cp-text-soft);
}

.recipe-nutri-box-sm span{
  font-weight:700;
}

.recipe-nutri-toggle-row{
  display:flex;
  justify-content:flex-start;
  margin-top:.75rem;
}
/* ===== Zutaten-Katalog / Symbolpicker ===== */
.recipe-symbol-preview{
  width:2.2rem;
  height:2.2rem;
  border-radius:.8rem;
  border:1px solid var(--cp-border);
  background:var(--cp-card);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.15rem;
}

.recipe-symbol-btn{
  white-space:nowrap;
}

.recipe-catalog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:.85rem;
}

.recipe-catalog-item{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.2rem;
  padding:.85rem .95rem;
  border:1px solid var(--cp-border);
  border-radius:1rem;
  background:var(--cp-card-soft);
  color:var(--cp-text);
  text-align:left;
}

.recipe-catalog-item:hover,
.recipe-catalog-item:focus{
  border-color:rgba(22,117,0,.35);
  background:rgba(22,117,0,.06);
}

.recipe-catalog-emoji{
  font-size:1.4rem;
  line-height:1;
}

.recipe-catalog-title{
  font-weight:700;
  color:var(--cp-text);
}

.recipe-catalog-meta{
  font-size:.78rem;
  color:var(--cp-text-soft);
}

.recipe-ingredient-match{
  min-height:1.1rem;
}

:root[data-theme="dark"] .recipe-symbol-preview{
  background:var(--cp-card-soft);
  color:var(--cp-text);
}

:root[data-theme="dark"] .recipe-catalog-item{
  background:var(--cp-card-soft);
  color:var(--cp-text);
}

:root[data-theme="dark"] .recipe-catalog-item:hover,
:root[data-theme="dark"] .recipe-catalog-item:focus{
  background:rgba(22,117,0,.18);
}
.recipe-autocomplete {
  position: absolute;
  z-index: 20;
  width: 100%;
  background: var(--cp-card);
  border: 1px solid var(--cp-border);
  border-radius: .6rem;
  margin-top: .2rem;
  box-shadow: var(--cp-shadow);
  max-height: 220px;
  overflow-y: auto;
}

.recipe-autocomplete-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .7rem;
  cursor: pointer;
}

.recipe-autocomplete-item:hover {
  background: rgba(22,117,0,.12);
}

.recipe-autocomplete-emoji {
  font-size: 1.1rem;
}

.recipe-autocomplete-title {
  font-weight: 500;
}

.recipe-autocomplete-meta {
  margin-left: auto;
  font-size: .8rem;
  opacity: .7;
}.recipe-autocomplete{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:30;
  display:none;
  margin-top:.3rem;
  background:var(--cp-card);
  border:1px solid var(--cp-border);
  border-radius:.8rem;
  box-shadow:var(--cp-shadow);
  overflow:hidden;
  max-height:260px;
  overflow-y:auto;
}

.recipe-autocomplete-item{
  width:100%;
  border:0;
  background:transparent;
  color:var(--cp-text);
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.65rem .8rem;
  text-align:left;
}

.recipe-autocomplete-item:hover{
  background:rgba(22,117,0,.10);
}

.recipe-autocomplete-emoji{
  font-size:1.15rem;
  line-height:1;
  flex:0 0 auto;
}

.recipe-autocomplete-title{
  font-weight:600;
}

.recipe-autocomplete-meta{
  margin-left:auto;
  color:var(--cp-text-soft);
  font-size:.82rem;
}

.recipe-symbol-preview{
  min-width:2rem;
  height:2rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:.75rem;
  border:1px solid var(--cp-border);
  background:var(--cp-card);
  font-size:1.2rem;
}
.recipe-nutri-separator{
  position:relative;
  text-align:center;
  margin:.25rem 0 .15rem;
}

.recipe-nutri-separator::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  border-top:1px solid var(--cp-border);
  transform:translateY(-50%);
}

.recipe-nutri-separator span{
  position:relative;
  display:inline-block;
  padding:0 .75rem;
  background:var(--cp-card-soft);
  color:var(--cp-text-soft);
  font-size:.78rem;
}


.recipe-gallery{
  position: relative;
  min-height: 280px;
  background: rgba(15, 23, 42, .06);
  display:flex;
  align-items:center;
  justify-content:center;
}

:root[data-theme="dark"] .recipe-gallery{
  background: rgba(255,255,255,.04);
}

.recipe-gallery-media{
  display:block;
  width:100%;
  max-height:560px;
  min-height:280px;
  object-fit:contain;
  background: transparent;
}

.recipe-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  opacity: .9;
  z-index: 3;
}

.recipe-gallery-prev { left: 12px; }
.recipe-gallery-next { right: 12px; }

.recipe-gallery-counter {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: rgba(0,0,0,.68);
  color: #fff;
  padding: .35rem .65rem;
  border-radius: 999px;
  font-size: .85rem;
  backdrop-filter: blur(2px);
  z-index: 3;
}

.recipe-manage-image{
  width:100%;
  height:180px;
  display:block;
  object-fit:contain;
  background: rgba(15, 23, 42, .05);
}

:root[data-theme="dark"] .recipe-manage-image{
  background: rgba(255,255,255,.04);
}

/* ===== Einkaufsliste ===== */

.cp-shopping-list{
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: var(--cp-border);
  --bs-list-group-color: var(--cp-text);
  background: transparent;
}

.cp-shopping-item{
  background: var(--cp-card-soft) !important;
  color: var(--cp-text) !important;
  border-color: var(--cp-border) !important;
}

.cp-shopping-item .cp-muted{
  color: var(--cp-text-soft) !important;
}

.cp-shopping-check-btn{
  min-width: 2.2rem;
  min-height: 2.2rem;
}

.cp-shopping-delete-btn{
  min-width: 2rem;
  min-height: 2rem;
}

.cp-shopping-suggestions{
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  right: 0;
  z-index: 30;
  border: 1px solid var(--cp-border);
  border-radius: .9rem;
  background: var(--cp-card);
  box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.18);
  overflow: hidden;
}

.cp-shopping-suggestion-item{
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--cp-text);
  text-align: left;
  padding: .75rem .9rem;
  display: flex;
  align-items: center;
  gap: .25rem;
  transition: background .15s ease;
}

.cp-shopping-suggestion-item:hover,
.cp-shopping-suggestion-item:focus{
  background: var(--cp-card-soft);
}

.cp-shopping-suggestion-item + .cp-shopping-suggestion-item{
  border-top: 1px solid var(--cp-border);
}

/* ========= APP DIALOG / TOAST ========= */

.cp-app-dialog .modal-dialog{
  max-width: 560px;
}

.cp-app-dialog .modal-content{
  border: 1px solid var(--cp-border);
  border-radius: 1.35rem;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15,23,42,.22);
}

.cp-app-dialog .modal-header{
  border-bottom: 1px solid var(--cp-border);
  padding: 1rem 1.15rem;
  background: linear-gradient(180deg, rgba(22,117,0,.08), rgba(22,117,0,.02));
}

.cp-app-dialog .modal-body{
  padding: 1.15rem;
}

.cp-app-dialog .modal-footer{
  border-top: 1px solid var(--cp-border);
  padding: 1rem 1.15rem 1.15rem;
}

.cp-app-dialog-icon{
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  flex: 0 0 auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
}

.cp-app-dialog-message{
  color: var(--cp-text);
  line-height: 1.55;
  font-size: 1rem;
}

.cp-app-dialog.cp-dialog-info .cp-app-dialog-icon{
  background: rgba(13,110,253,.14);
  color: #0d6efd;
}

.cp-app-dialog.cp-dialog-success .cp-app-dialog-icon{
  background: rgba(25,135,84,.14);
  color: #198754;
}

.cp-app-dialog.cp-dialog-warning .cp-app-dialog-icon{
  background: rgba(255,193,7,.18);
  color: #8a6400;
}

.cp-app-dialog.cp-dialog-danger .cp-app-dialog-icon{
  background: rgba(220,53,69,.14);
  color: #dc3545;
}

.cp-app-dialog.cp-dialog-info .modal-header{
  background: linear-gradient(180deg, rgba(13,110,253,.08), rgba(13,110,253,.015));
}

.cp-app-dialog.cp-dialog-success .modal-header{
  background: linear-gradient(180deg, rgba(25,135,84,.09), rgba(25,135,84,.015));
}

.cp-app-dialog.cp-dialog-warning .modal-header{
  background: linear-gradient(180deg, rgba(255,193,7,.14), rgba(255,193,7,.03));
}

.cp-app-dialog.cp-dialog-danger .modal-header{
  background: linear-gradient(180deg, rgba(220,53,69,.1), rgba(220,53,69,.02));
}

.cp-app-toast-host{
  z-index: 1090;
}

.cp-app-toast{
  min-width: 320px;
  max-width: 420px;
  border: 1px solid var(--cp-border);
  background: var(--cp-card);
  color: var(--cp-text);
  box-shadow: 0 16px 34px rgba(15,23,42,.16);
  border-radius: 1rem;
  overflow: hidden;
}

.cp-app-toast .toast-body{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  padding: .95rem 1rem;
}

.cp-app-toast-icon{
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  flex: 0 0 auto;
}

.cp-app-toast-content{
  min-width: 0;
  flex:1 1 auto;
}

.cp-app-toast-title{
  font-weight: 700;
  margin-bottom: .1rem;
}

.cp-app-toast-message{
  color: var(--cp-text-soft);
  line-height: 1.45;
}

.cp-app-toast-success .cp-app-toast-icon{ background: rgba(25,135,84,.14); color:#198754; }
.cp-app-toast-info .cp-app-toast-icon{ background: rgba(13,110,253,.14); color:#0d6efd; }
.cp-app-toast-warning .cp-app-toast-icon{ background: rgba(255,193,7,.18); color:#8a6400; }
.cp-app-toast-danger .cp-app-toast-icon{ background: rgba(220,53,69,.14); color:#dc3545; }

:root[data-theme="dark"] .cp-app-dialog .modal-content,
:root[data-theme="dark"] .cp-app-toast{
  background: var(--cp-card);
  border-color: var(--cp-border);
  color: var(--cp-text);
}

:root[data-theme="dark"] .cp-app-dialog .modal-header{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}

:root[data-theme="dark"] .cp-app-dialog.cp-dialog-warning .cp-app-dialog-icon{
  color: #ffd86a;
}

:root[data-theme="dark"] .cp-app-toast-message{
  color: var(--cp-text-soft);
}

:root[data-theme="dark"] .cp-app-toast .btn-close,
:root[data-theme="dark"] .cp-app-dialog .btn-close{
  filter: invert(1) grayscale(100%) brightness(200%);
}

@media (max-width: 575.98px){
  .cp-app-toast{
    min-width: 0;
    width: min(100%, 360px);
  }

  .cp-app-dialog .modal-dialog{
    margin: .75rem;
  }
}


.cp-plan-shopping-switch-wrap {
  min-height: 2.25rem;
}

.cp-plan-shopping-form {
  display: inline-flex;
  align-items: center;
}

.cp-plan-shopping-form.is-saving {
  opacity: .7;
}

.cp-plan-shopping-switch {
  cursor: pointer;
  transform: scale(1.15);
}

.cp-favorite-fab{
  position:absolute;
  right:.9rem;
  bottom:.9rem;
  z-index:5;
  width:2.3rem;
  height:2.3rem;
  border-radius:999px;
  border:1px solid var(--cp-border);
  background:rgba(255,255,255,.92);
  color:#9a9a9a;
  font-size:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 22px rgba(15,23,42,.12);
}
.cp-favorite-fab.is-active,
.cp-mini-favorite.is-active{
  color:#dc3545;
  border-color:rgba(220,53,69,.35);
  background:rgba(220,53,69,.12);
}
.cp-mini-favorite{
  min-width:2rem;
  border-radius:999px;
  border:1px solid var(--cp-border);
  background:var(--cp-card);
  color:var(--cp-text-soft);
}
.cp-fav-symbol-badge{
  width:2rem;
  height:2rem;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--cp-border);
  background:rgba(220,53,69,.08);
  font-weight:700;
}
:root[data-theme="dark"] .cp-favorite-fab{
  background:rgba(20,20,20,.92);
  color:#c9c9c9;
}