/* =====================================================================
   Essensplan – Design "Frisch & verspielt"
   Hell und Dunkel richten sich automatisch nach der Einstellung des Geräts.
   ===================================================================== */

/* ---------- Schriften (liegen in der App, funktionieren also offline) ---------- */
@font-face {
  font-family: "Fredoka";
  src: url("../schriften/fredoka.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("../schriften/nunito.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
}

/* ---------- Farben und Grundwerte ---------- */
:root {
  --grund: #FFF8F0;
  --flaeche: #FFFFFF;
  --flaeche-weich: #F6EEE4;
  --text: #2B2540;
  --text-leise: #6E6788;
  --akzent: #5B3FD9;
  --akzent-tief: #3F2AA8;
  --akzent-weich: #EEE7FF;
  --akzent-text: #FFFFFF;
  --koralle: #FF7A59;
  --koralle-tief: #D9573A;
  --gold: #F5B301;
  --gefahr: #D93F45;
  --schatten: #EFE4D6;          /* der "3D"-Schatten unter Karten */
  --rand: #EADFD1;
  --gestrichelt: #D9CBEF;
  --navigation: #2B2540;
  --navigation-text: #B9B2D3;

  /* Pastellfarben für Bilder-Platzhalter: Grund / Symbol */
  --pastell-0: #FFD9C2; --pastell-0-symbol: #D9573A;
  --pastell-1: #CDEFD9; --pastell-1-symbol: #1F8F68;
  --pastell-2: #E3DAFF; --pastell-2-symbol: #5B3FD9;
  --pastell-3: #FFF0B3; --pastell-3-symbol: #A87E00;
  --pastell-4: #FFE1DC; --pastell-4-symbol: #C9443A;
  --pastell-5: #D6ECFF; --pastell-5-symbol: #2F72BD;

  --radius-klein: 14px;
  --radius: 20px;
  --radius-gross: 26px;
  --schrift: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --schrift-titel: "Fredoka", "Nunito", sans-serif;
  --navigation-hoehe: 68px;
  --feder: cubic-bezier(0.34, 1.56, 0.64, 1); /* leicht "federnde" Bewegung */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #17141F;
    --flaeche: #231F2E;
    --flaeche-weich: #2B2638;
    --text: #F3F0FA;
    --text-leise: #A8A1BE;
    --akzent: #8B73FF;
    --akzent-tief: #5B3FD9;
    --akzent-weich: #2E2745;
    --akzent-text: #FFFFFF;
    --koralle: #FF7A59;
    --koralle-tief: #B8462C;
    --gold: #FFC53D;
    --gefahr: #FF6B70;
    --schatten: #0D0B12;
    --rand: #342D44;
    --gestrichelt: #3D3552;
    --navigation: #2E2745;
    --navigation-text: #A8A1BE;

    --pastell-0: #4A3226; --pastell-0-symbol: #FFB599;
    --pastell-1: #1F3B2E; --pastell-1-symbol: #7FD8B0;
    --pastell-2: #2E2745; --pastell-2-symbol: #B7A6FF;
    --pastell-3: #3D3517; --pastell-3-symbol: #F2D36B;
    --pastell-4: #45262A; --pastell-4-symbol: #FF9E8F;
    --pastell-5: #1E3348; --pastell-5-symbol: #8CC4FF;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--schrift-titel);
  font-weight: 600;
  line-height: 1.15;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

.symbol {
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Kopfzeile ---------- */
.kopfzeile {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top)) 20px 12px;
  background: var(--grund);
}

.kopf-titel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

#untertitel {
  color: var(--text-leise);
  font-size: 14px;
  font-weight: 800;
}

.kopfzeile h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#kopf-aktionen {
  display: flex;
  gap: 8px;
}

.kopf-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 16px;
  background: var(--flaeche);
  color: var(--text);
  box-shadow: 0 2px 0 var(--schatten);
  transition: transform 0.12s;
}

.kopf-knopf[hidden] {
  display: none;
}

.kopf-knopf.hervorgehoben {
  background: var(--akzent-weich);
  color: var(--akzent);
}

.kopf-knopf:active {
  transform: translateY(2px);
  box-shadow: none;
}

/* ---------- Inhalt ---------- */
main {
  max-width: 760px;
  margin: 0 auto;
  padding: 4px 20px calc(var(--navigation-hoehe) + 48px + env(safe-area-inset-bottom));
}

/* Jede Ansicht blendet beim Wechseln sanft ein */
.ansicht {
  animation: einblenden 0.28s ease-out;
}

@keyframes einblenden {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.hinweis {
  padding: 40px 16px;
  color: var(--text-leise);
  text-align: center;
}

.hinweis p {
  margin: 0 0 16px;
}

.leise {
  color: var(--text-leise);
  font-weight: 500;
}

.anzahl {
  margin: 0 0 10px;
  color: var(--text-leise);
  font-size: 14px;
  font-weight: 700;
}

.fehler {
  margin: -6px 0 14px;
  color: var(--gefahr);
  font-size: 14px;
  font-weight: 700;
}

.unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Schwebende Navigation unten ---------- */
.navigation {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: calc(100% - 40px);
  max-width: 480px;
  height: var(--navigation-hoehe);
  padding: 0 8px;
  border-radius: var(--radius-gross);
  background: var(--navigation);
  box-shadow: 0 10px 30px rgba(20, 14, 40, 0.25);
  transform: translateX(-50%);
}

.navigation a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--navigation-text);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

.nav-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 32px;
  border-radius: 12px;
  transition: background 0.2s, transform 0.25s var(--feder);
}

.navigation a.aktiv {
  color: #FFFFFF;
}

.navigation a.aktiv .nav-symbol {
  background: var(--koralle);
  transform: scale(1.05);
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border: none;
  border-radius: 16px;
  background: var(--flaeche);
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 3px 0 var(--schatten);
  transition: transform 0.12s;
}

.knopf:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: none;
}

.knopf:disabled {
  opacity: 0.5;
  cursor: default;
}

.knopf-haupt {
  background: var(--akzent);
  color: var(--akzent-text);
  box-shadow: 0 4px 0 var(--akzent-tief);
}

.knopf-klein {
  min-height: 40px;
  padding: 0 14px;
  font-size: 14px;
}

.knopf-gefahr {
  width: 100%;
  background: transparent;
  color: var(--gefahr);
  box-shadow: inset 0 0 0 2px var(--gefahr);
}

.knopf-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: none;
  border-radius: var(--radius-klein);
  background: transparent;
  color: var(--text-leise);
}

.knopf-symbol:hover {
  background: var(--flaeche-weich);
  color: var(--text);
}

.knopf-text {
  min-height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: var(--akzent);
  font-weight: 800;
}

.knopf:focus-visible,
.knopf-symbol:focus-visible,
.kopf-knopf:focus-visible,
.knopf-text:focus-visible,
.navigation a:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

/* ---------- Eingabefelder ---------- */
.eingabe {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 2px solid var(--rand);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  font-weight: 600;
  transition: border-color 0.15s;
}

.eingabe::placeholder {
  color: var(--text-leise);
  font-weight: 500;
}

.eingabe:focus {
  outline: none;
  border-color: var(--akzent);
}

select.eingabe {
  appearance: none;
  padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-leise) 50%),
    linear-gradient(135deg, var(--text-leise) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.formular-zeile {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

/* ---------- Chips ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border: none;
  border-radius: 999px;
  background: var(--flaeche-weich);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.chip-waehlbar {
  min-height: 38px;
  padding: 0 14px;
  background: var(--flaeche);
  box-shadow: 0 2px 0 var(--schatten);
  transition: transform 0.2s var(--feder), background 0.15s;
}

.chip-waehlbar[aria-pressed="true"] {
  background: var(--akzent);
  color: var(--akzent-text);
  box-shadow: 0 2px 0 var(--akzent-tief);
  transform: scale(1.04);
}

.chips-klein .chip {
  padding: 0 8px;
  font-size: 12px;
}

/* ---------- Kalender: Leiste ---------- */
.kalender-leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.umschalter {
  display: inline-flex;
  padding: 4px;
  border-radius: 16px;
  background: var(--flaeche);
  box-shadow: 0 2px 0 var(--schatten);
}

.umschalter button {
  min-width: 76px;
  min-height: 36px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--text-leise);
  font-weight: 800;
  font-size: 14px;
  transition: background 0.2s, color 0.2s;
}

.umschalter button[aria-pressed="true"] {
  background: var(--akzent);
  color: var(--akzent-text);
}

.zeitraum {
  color: var(--text-leise);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

/* ---------- Kalender: Wochenstreifen ---------- */
/* Bleibt beim Scrollen unter der Kopfzeile sichtbar – praktisch auch als Ablageziel beim Ziehen */
.wochenstreifen {
  position: sticky;
  top: var(--kopf-hoehe, 80px);
  z-index: 15;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin: 0 -20px 10px;
  padding: 2px 20px 10px;
  background: var(--grund);
}

.streifen-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 66px;
  padding: 0;
  border: none;
  border-radius: 18px;
  background: var(--flaeche);
  color: var(--text);
  box-shadow: 0 2px 0 var(--schatten);
  transition: transform 0.2s var(--feder);
}

.streifen-tag:active {
  transform: scale(0.94);
}

.streifen-name {
  font-size: 12px;
  font-weight: 800;
}

.streifen-zahl {
  font-family: var(--schrift-titel);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.1;
}

.streifen-punkt {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.streifen-tag.geplant .streifen-punkt {
  background: var(--koralle);
}

.streifen-tag.heute {
  color: var(--akzent);
  box-shadow: inset 0 0 0 2.5px var(--akzent), 0 2px 0 var(--schatten);
}

.streifen-tag.gewaehlt {
  background: var(--akzent);
  color: var(--akzent-text);
  box-shadow: 0 3px 0 var(--akzent-tief);
}

.streifen-tag.gewaehlt.geplant .streifen-punkt {
  background: #FFFFFF;
}

/* ---------- Kalender: Fortschritt ---------- */
.fortschritt {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 22px;
  background: var(--flaeche);
  box-shadow: 0 3px 0 var(--schatten);
}

.ring {
  --farbe: var(--akzent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: conic-gradient(var(--farbe) calc(var(--anteil) * 360deg), var(--akzent-weich) 0);
}

.ring span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--flaeche);
  font-family: var(--schrift-titel);
  font-size: 15px;
  font-weight: 700;
}

.fortschritt-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fortschritt-text strong {
  font-weight: 800;
}

.fortschritt-text span {
  color: var(--text-leise);
  font-size: 14px;
}

.fortschritt.voll .ring {
  --farbe: var(--koralle);
  animation: wackeln 0.6s var(--feder);
}

.fortschritt.voll .ring span {
  color: var(--koralle);
}

@keyframes wackeln {
  0% { transform: scale(0.8) rotate(-10deg); }
  60% { transform: scale(1.1) rotate(6deg); }
  100% { transform: none; }
}

/* ---------- Kalender: Tage ---------- */
.woche {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tag {
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-margin: calc(var(--kopf-hoehe, 80px) + 100px);
  border-radius: 24px;
}

.plan-karte {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 22px;
  background: var(--flaeche);
  color: var(--text);
  text-align: left;
  box-shadow: 0 3px 0 var(--schatten);
  transition: transform 0.12s, background 0.25s, color 0.25s, padding 0.25s;
}

.plan-karte:active {
  transform: translateY(3px);
  box-shadow: none;
}

.plan-bild {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--bild-grund);
  color: var(--bild-symbol);
}

.plan-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plan-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.plan-tag {
  color: var(--text-leise);
  font-size: 12px;
  font-weight: 800;
}

.plan-titel {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}

.plan-info {
  color: var(--text-leise);
  font-size: 13px;
}

.plan-stern {
  display: flex;
  margin-right: 4px;
  color: var(--gold);
}

/* Der ausgewählte Tag (anfangs heute): die große Korallen-Karte */
.tag.gewaehlt .plan-karte {
  padding: 14px;
  border-radius: var(--radius-gross);
  background: var(--koralle);
  color: #FFFFFF;
  box-shadow: 0 4px 0 var(--koralle-tief);
}

.tag.gewaehlt .plan-bild .symbol {
  width: 48px;
  height: 48px;
}

.tag.gewaehlt .plan-bild {
  width: 96px;
  height: 96px;
  border-radius: 20px;
}

.tag.gewaehlt .plan-karte .plan-tag {
  color: #FFFFFF;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.95;
}

.tag.gewaehlt .plan-titel {
  font-family: var(--schrift-titel);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
}

.tag.gewaehlt .plan-info {
  color: #FFFFFF;
  opacity: 0.9;
}

.tag.gewaehlt .plan-stern {
  color: #FFFFFF;
}

/* Leerer Tag */
.leerer-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 80px;
  padding: 10px 10px 10px 16px;
  border: 2.5px dashed var(--gestrichelt);
  border-radius: 22px;
}

.tag.gewaehlt .leerer-tag {
  border-color: var(--koralle);
}

.leer-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.leer-hinweis {
  color: var(--akzent);
  font-weight: 800;
  font-size: 15px;
}

.knopf-wuerfel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 14px;
  border: none;
  border-radius: 14px;
  background: var(--akzent-weich);
  color: var(--akzent);
  font-weight: 800;
  font-size: 14px;
}

.knopf-wuerfel.rollt .symbol {
  animation: rollen 0.45s ease-in-out;
}

@keyframes rollen {
  0% { transform: rotate(0) scale(1); }
  50% { transform: rotate(200deg) scale(1.3); }
  100% { transform: rotate(360deg) scale(1); }
}

.knopf-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 14px;
  background: var(--akzent);
  color: var(--akzent-text);
  box-shadow: 0 3px 0 var(--akzent-tief);
}

.knopf-plus:active,
.knopf-wuerfel:active {
  transform: translateY(2px);
  box-shadow: none;
}

/* Gerade eingeplant: hereinploppen */
.plan-eintrag.neu {
  animation: ploppen 0.5s var(--feder);
}

@keyframes ploppen {
  0% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: none; }
}

/* ---------- Kalender: Monatsansicht ---------- */
.monat {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.monat-wochentag {
  padding: 4px 0;
  color: var(--text-leise);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.monat-tag {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  min-height: 82px;
  padding: 4px;
  border-radius: 14px;
  background: var(--flaeche);
  box-shadow: 0 2px 0 var(--schatten);
}

.monat-tag.anderer-monat {
  opacity: 0.4;
}

.monat-zahl {
  font-family: var(--schrift-titel);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.monat-tag.heute {
  background: var(--akzent);
  color: var(--akzent-text);
  box-shadow: 0 3px 0 var(--akzent-tief);
}

.monat-eintrag {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  padding: 3px 4px;
  border: none;
  border-radius: 8px;
  background: var(--bild-grund);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  word-break: break-word;
  hyphens: auto;
}

.monat-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--gestrichelt);
}

.monat-tag.heute .monat-plus {
  color: var(--akzent-text);
}

@media (min-width: 700px) {
  .monat-tag {
    min-height: 110px;
    padding: 6px;
  }

  .monat-eintrag {
    font-size: 13px;
    padding: 4px 6px;
  }
}

/* ---------- Pastellfarben ---------- */
.farbe-0 { --bild-grund: var(--pastell-0); --bild-symbol: var(--pastell-0-symbol); }
.farbe-1 { --bild-grund: var(--pastell-1); --bild-symbol: var(--pastell-1-symbol); }
.farbe-2 { --bild-grund: var(--pastell-2); --bild-symbol: var(--pastell-2-symbol); }
.farbe-3 { --bild-grund: var(--pastell-3); --bild-symbol: var(--pastell-3-symbol); }
.farbe-4 { --bild-grund: var(--pastell-4); --bild-symbol: var(--pastell-4-symbol); }
.farbe-5 { --bild-grund: var(--pastell-5); --bild-symbol: var(--pastell-5-symbol); }

/* ---------- Drag & Drop ---------- */
.plan-eintrag {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.plan-eintrag img {
  -webkit-user-drag: none;
  pointer-events: none;
}

.wird-gezogen {
  opacity: 0.25;
}

.zieh-geist {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  pointer-events: none;
  will-change: transform;
}

.zieh-geist > * {
  box-shadow: 0 18px 40px rgba(20, 14, 40, 0.3) !important;
  transform: scale(1.05) rotate(2deg);
  transition: transform 0.18s var(--feder), opacity 0.15s;
}

.zieh-geist.ueber-papierkorb > * {
  transform: scale(0.4) rotate(-8deg);
  opacity: 0.7;
}

body.zieht,
body.zieht * {
  cursor: grabbing !important;
}

.tag.ziel-markiert,
.monat-tag.ziel-markiert,
.streifen-tag.ziel-markiert {
  outline: 3px dashed var(--akzent);
  outline-offset: 3px;
}

.streifen-tag.ziel-markiert {
  transform: translateY(-4px) scale(1.06);
}

.papierkorb {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 480px;
  height: var(--navigation-hoehe);
  margin: 0 auto;
  border: 2.5px dashed var(--gefahr);
  border-radius: var(--radius-gross);
  background: var(--flaeche);
  color: var(--gefahr);
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(20, 14, 40, 0.25);
  animation: hochfahren 0.2s var(--feder);
  transition: transform 0.15s var(--feder), background 0.15s;
}

.papierkorb span {
  font-size: 1.5rem;
}

.papierkorb.aktiv {
  border-style: solid;
  background: var(--gefahr);
  color: #FFFFFF;
  transform: scale(1.06);
}

@keyframes hochfahren {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Bottom Sheets ---------- */
.blatt {
  width: 100%;
  max-width: 760px;
  max-height: 92vh;
  max-height: 92dvh;
  margin: auto auto 0;
  padding: 0;
  border: none;
  border-radius: 28px 28px 0 0;
  background: var(--grund);
  color: var(--text);
  overflow: hidden;
  display: none;
  flex-direction: column;
}

.blatt[open] {
  display: flex;
  animation: blatt-rein 0.32s var(--feder);
}

.blatt.schliesst {
  animation: blatt-raus 0.2s ease-in forwards;
}

.blatt.wird-gewischt {
  transition: none;
  animation: none;
}

.blatt::backdrop {
  background: rgba(20, 14, 40, 0.45);
  animation: abdunkeln 0.25s ease-out;
}

@keyframes blatt-rein {
  from { transform: translateY(100%); }
  to { transform: none; }
}

@keyframes blatt-raus {
  to { transform: translateY(100%); }
}

@keyframes abdunkeln {
  from { opacity: 0; }
}

@media (min-width: 760px) {
  .blatt {
    margin: auto;
    border-radius: 28px;
    max-height: 85vh;
  }
}

.blatt-kopf {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 16px 12px 20px;
  touch-action: none;
  cursor: grab;
}

.blatt-griff {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: var(--gestrichelt);
  transform: translateX(-50%);
}

.blatt-kopf h2 {
  flex: 1;
  margin: 0;
  font-size: 20px;
}

.blatt-inhalt {
  /* "auto" statt "1": Safari rechnet bei flex: 1 die Höhe sonst auf null herunter */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 20px calc(20px + env(safe-area-inset-bottom));
}

.blatt-aktionen {
  position: sticky;
  bottom: calc(-20px - env(safe-area-inset-bottom));
  margin: 0 -20px;
  padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
  background: var(--grund);
}

.blatt-aktionen .knopf {
  width: 100%;
}

body:has(dialog[open]) {
  overflow: hidden;
}

/* ---------- Einkaufsliste ---------- */
.einkauf-liste {
  margin: 0 0 8px;
  padding: 4px 16px;
  list-style: none;
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: 0 3px 0 var(--schatten);
}

.einkauf-liste li {
  border-bottom: 1.5px solid var(--flaeche-weich);
}

.einkauf-leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.einkauf-hinweis {
  color: var(--text-leise);
  font-size: 14px;
  font-weight: 700;
}

/* Eine Zutat zum Antippen: leerer Kreis = haben wir, violetter Haken = kaufen wir */
.einkauf-eintrag {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 8px 0;
  border: none;
  background: none;
  color: var(--text-leise);
  font-weight: 700;
  text-align: left;
}

.einkauf-haken {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--gestrichelt);
  border-radius: 50%;
  color: transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.25s var(--feder);
}

.einkauf-eintrag[aria-checked="true"] {
  color: var(--text);
}

.einkauf-eintrag[aria-checked="true"] .einkauf-haken {
  border-color: var(--akzent);
  background: var(--akzent);
  color: var(--akzent-text);
  transform: scale(1.1);
}

.einkauf-eintrag[aria-checked="true"] .zutat-mengenangabe {
  color: var(--akzent);
}

.einkauf-eintrag:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 8px;
}

.einkauf-liste li:last-child {
  border-bottom: none;
}

.knopf.kopiert {
  background: var(--pastell-1);
  color: var(--pastell-1-symbol);
  box-shadow: 0 4px 0 var(--schatten);
}

/* ---------- Rezepte: Suche und Filter ---------- */
.suche-zeile {
  position: relative;
  margin-bottom: 10px;
}

.suche-zeile .symbol {
  position: absolute;
  left: 14px;
  top: 50%;
  color: var(--text-leise);
  transform: translateY(-50%);
  pointer-events: none;
}

.suche-zeile .eingabe {
  padding-left: 44px;
  border-radius: 16px;
}

.filter {
  margin-bottom: 14px;
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: 0 3px 0 var(--schatten);
}

.filter summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

.filter summary::-webkit-details-marker {
  display: none;
}

.filter summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2.5px solid var(--text-leise);
  border-bottom: 2.5px solid var(--text-leise);
  transform: rotate(45deg);
  transition: transform 0.2s;
}

.filter[open] summary::after {
  transform: rotate(225deg);
}

.filter-inhalt {
  padding: 0 16px 16px;
}

.filter-titel {
  margin: 16px 0 8px;
  color: var(--text-leise);
  font-family: var(--schrift);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.filter-inhalt .formular-zeile {
  margin-bottom: 8px;
}

/* ---------- Rezept-Kacheln ---------- */
.raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 14px;
}

.raster .hinweis {
  grid-column: 1 / -1;
}

.kachel {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: none;
  border-radius: 22px;
  background: var(--flaeche);
  color: var(--text);
  text-align: left;
  box-shadow: 0 3px 0 var(--schatten);
  animation: ploppen 0.35s var(--feder) backwards;
  transition: transform 0.12s;
}

.kachel:active {
  transform: translateY(3px);
  box-shadow: none;
}

.kachel:nth-child(2) { animation-delay: 0.03s; }
.kachel:nth-child(3) { animation-delay: 0.06s; }
.kachel:nth-child(4) { animation-delay: 0.09s; }
.kachel:nth-child(n + 5) { animation-delay: 0.12s; }

.kachel:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

.kachel-bild {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bild-grund);
  color: var(--bild-symbol);
}

.kachel-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kachel-platzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.kachel-stern {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--flaeche);
  color: var(--gold);
}

.kachel-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px 12px;
}

.kachel-titel {
  font-weight: 800;
  line-height: 1.25;
}

.kachel-dauer {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-leise);
  font-size: 13px;
  font-weight: 700;
}

/* ---------- Rezept ansehen ---------- */
.rezept-bild {
  display: block;
  width: 100%;
  max-height: 50vh;
  margin-bottom: 16px;
  border-radius: var(--radius-gross);
  object-fit: cover;
  box-shadow: 0 4px 0 var(--schatten);
}

.rezept-titel {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 28px;
}

.titel-stern {
  display: flex;
  margin-top: 2px;
  color: var(--gold);
}

.rezept-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.info-pille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--akzent-weich);
  color: var(--akzent);
  font-size: 14px;
  font-weight: 800;
}

.rezept h3 {
  margin: 28px 0 10px;
  font-size: 22px;
}

.zutatenliste {
  margin: 0;
  padding: 4px 16px;
  list-style: none;
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: 0 3px 0 var(--schatten);
}

.zutatenliste li {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1.5px solid var(--flaeche-weich);
  font-weight: 700;
}

.zutatenliste li:last-child {
  border-bottom: none;
}

.zutat-mengenangabe {
  flex: 0 0 150px;
  color: var(--text-leise);
}

.zubereitung {
  line-height: 1.65;
}

.zubereitung ul,
.zubereitung ol {
  padding-left: 1.4em;
}

.zubereitung li {
  margin-bottom: 6px;
}

.zubereitung ol li::marker {
  color: var(--koralle);
  font-family: var(--schrift-titel);
  font-weight: 600;
}

/* ---------- Rezept bearbeiten ---------- */
.rezept-formular {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.rezept-formular .fehler {
  margin: -18px 0 0;
}

.feld {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.feld-titel {
  padding: 0;
  font-family: var(--schrift-titel);
  font-size: 18px;
  font-weight: 600;
}

.eingabe-kurz {
  max-width: 130px;
}

.bild-waehler {
  display: block;
  cursor: pointer;
}

.bild-vorschau {
  display: block;
  width: 100%;
  max-height: 320px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 3px dashed var(--gestrichelt);
  border-radius: var(--radius-gross);
  background: var(--akzent-weich);
}

.bild-vorschau img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bild-leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  color: var(--akzent);
  font-weight: 800;
}

.bild-waehler:focus-within .bild-vorschau {
  border-color: var(--akzent);
}

.zutaten-zeilen {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Am Handy: Zutat oben, Menge und Einheit darunter */
.zutat-zeile {
  display: grid;
  grid-template-columns: 1fr 1fr 44px;
  grid-template-areas:
    "name name entfernen"
    "menge einheit .";
  gap: 6px;
  padding: 10px;
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: 0 3px 0 var(--schatten);
  animation: ploppen 0.3s var(--feder);
}

.zutat-name { grid-area: name; }
.zutat-menge { grid-area: menge; }
.zutat-einheit { grid-area: einheit; }
.zutat-zeile [data-zutat-entfernen] { grid-area: entfernen; }

.zutat-menge:disabled {
  opacity: 0.4;
}

@media (min-width: 600px) {
  .zutat-zeile {
    grid-template-columns: 90px 150px 1fr 44px;
    grid-template-areas: "menge einheit name entfernen";
  }
}

[data-zutat-plus] {
  align-self: flex-start;
}

.editor-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.editor-leiste button {
  min-width: 44px;
  min-height: 40px;
  padding: 0 12px;
  border: none;
  border-radius: 12px;
  background: var(--flaeche);
  box-shadow: 0 2px 0 var(--schatten);
}

.editor-leiste button:active {
  transform: translateY(2px);
  box-shadow: none;
}

.editor {
  min-height: 180px;
  padding: 14px;
  border: 2px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  outline: none;
}

.editor:focus {
  border-color: var(--akzent);
}

.favorit-knopf {
  justify-content: flex-start;
}

.favorit-knopf[aria-pressed="true"] {
  background: var(--pastell-3);
  color: var(--pastell-3-symbol);
}

.formular-aktionen {
  display: flex;
  gap: 10px;
}

.formular-aktionen .knopf {
  flex: 1;
}

/* ---------- Kategorien ---------- */
.liste {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: 0 3px 0 var(--schatten);
}

.liste li {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 54px;
  padding: 4px 6px 4px 18px;
  border-bottom: 1.5px solid var(--flaeche-weich);
  font-weight: 700;
}

.liste li:last-child {
  border-bottom: none;
}

.liste .name {
  flex: 1;
}

.liste .umbenennen {
  flex: 1;
  margin: 0;
}

/* ---------- Konfetti ---------- */
.konfetti {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  pointer-events: none;
}

.konfetti span {
  position: absolute;
  top: 0;
  width: 9px;
  height: 14px;
  border-radius: 2px;
}

/* ---------- Zum Ausprobieren (Kategorien-Seite) ---------- */
.ausprobieren {
  margin-top: 32px;
  padding: 18px;
  border: 2.5px dashed var(--gestrichelt);
  border-radius: var(--radius);
}

.ausprobieren h2 {
  margin: 0 0 6px;
  font-size: 20px;
}

.ausprobieren p {
  margin: 0 0 14px;
  font-size: 14px;
}

.ausprobieren-knoepfe {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------- "Wie war's?" – Bewertung mit Herzen ---------- */
.bewertung-karte {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 12px 10px;
  border-radius: 22px;
  background: var(--pastell-3);
  box-shadow: 0 3px 0 var(--schatten);
  transition: opacity 0.25s, transform 0.25s;
}

.bewertung-karte.neu {
  animation: ploppen 0.45s var(--feder);
}

.bewertung-karte.verschwindet {
  opacity: 0;
  transform: scale(0.9);
}

.bewertung-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.herz-reihe {
  display: flex;
  gap: 2px;
  margin-top: 4px;
  margin-left: -8px;
}

.herz {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--pastell-3-symbol);
  opacity: 0.55;
  transition: transform 0.25s var(--feder), opacity 0.15s;
}

.herz:active {
  transform: scale(0.85);
}

/* Gewählt: Herz gefüllt, rot und kurz pochend */
.herz.voll {
  color: var(--gefahr);
  opacity: 1;
  transform: scale(1.15);
  animation: pochen 0.45s var(--feder);
}

.herz.voll .symbol {
  fill: currentColor;
}

@keyframes pochen {
  0% { transform: scale(1); }
  40% { transform: scale(1.4); }
  100% { transform: scale(1.15); }
}

.herz:disabled {
  cursor: default;
}

.bewertung-ueberspringen {
  position: absolute;
  top: 2px;
  right: 12px;
  min-height: 36px;
  color: var(--pastell-3-symbol);
  font-size: 13px;
}

.bewertung-karte .plan-tag {
  color: var(--pastell-3-symbol);
}

/* ---------- Rezeptliste: Sortierung und Bewertung ---------- */
.listen-leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.listen-leiste .anzahl {
  margin: 0;
}

.umschalter-klein button {
  min-width: 0;
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
}

.kachel-bewertung {
  margin-left: auto;
  color: var(--koralle-tief);
  font-weight: 800;
}

.bewertung-pille {
  background: var(--pastell-3);
  color: var(--pastell-3-symbol);
}