/* Rezeptnest v0.2 – mobile corrections */
html, body, #app, .app-shell, .detail-page {
  max-width: 100%;
  overflow-x: clip;
}

.quick-add::after {
  pointer-events: none;
  z-index: 0;
}
.quick-add > * {
  position: relative;
  z-index: 1;
}

.card-icon-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}
.card-action-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  cursor: pointer;
}
.card-action-btn svg { width: 16px; height: 16px; }

.favorite-btn.active,
.detail-fav.active {
  color: #d83b4f;
  background: #fde9ed;
}
.favorite-btn.active svg,
.detail-fav.active svg {
  fill: currentColor;
  stroke: currentColor;
}

.setting-copy,
.profile-copy,
.source-link-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.setting-title,
.setting-sub,
.profile-title,
.profile-sub,
.source-link-title,
.source-link-url {
  display: block;
}
.setting-title,
.profile-title {
  line-height: 1.25;
}
.setting-sub,
.profile-sub {
  margin-top: 4px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.setting-row {
  min-height: 72px;
  padding-top: 11px;
  padding-bottom: 11px;
  align-items: flex-start;
}
.setting-row > svg { margin-top: 9px; flex: 0 0 auto; }
.setting-icon { margin-top: 1px; }

.page-subtitle,
.card-note,
.sheet-sub,
.option-text,
.picker-title,
.picker-meta,
.planned-title,
.planned-meta,
.ingredients li span:last-child,
.steps li span:last-child {
  overflow-wrap: anywhere;
}

.source-link {
  align-items: flex-start;
  max-width: 100%;
}
.source-link-copy { flex: 1; }
.source-link-title {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
}
.source-link-url {
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}
.source-link > svg { margin-top: 2px; }

.detail-note { margin-top: 12px; }
.detail-edit-button { width: 100%; }
.detail-rating-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -2px 0 15px;
  padding: 13px 15px;
  border: 1px solid #ead797;
  border-radius: 15px;
  background: var(--yellow-soft);
  color: #76570f;
  font-size: 12px;
}
.detail-rating-summary strong { font-size: 13px; white-space: nowrap; }
.rating-stars-text,
.detail-stars { color: var(--yellow); letter-spacing: .04em; }
.detail-stars { margin-bottom: 10px; font-size: 18px; font-weight: 700; }
.detail-stars span { margin-left: 7px; color: var(--text-2); font-size: 12px; letter-spacing: 0; }

.view-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 5px;
  margin-bottom: 14px;
  border-radius: 15px;
  background: #e9efec;
}
.view-toggle button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.view-toggle button.active {
  background: var(--surface);
  color: var(--primary-2);
  box-shadow: 0 3px 12px rgba(38,54,48,.08);
}
.view-toggle svg { width: 16px; height: 16px; }

.week-overview-scroll {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 2px 1px 10px;
  scrollbar-width: thin;
}
.week-overview-grid {
  min-width: 940px;
  display: grid;
  grid-template-columns: 92px repeat(7, minmax(118px, 1fr));
  gap: 7px;
  align-items: stretch;
}
.overview-corner,
.overview-day-head,
.overview-meal-label,
.overview-cell {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.overview-corner {
  display: flex;
  align-items: center;
  padding: 11px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.overview-day-head {
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-2);
  cursor: pointer;
}
.overview-day-head span { font-size: 10px; font-weight: 700; text-transform: uppercase; }
.overview-day-head strong { color: var(--text); font-size: 16px; }
.overview-day-head.active { border-color: #a9d5ca; background: var(--primary-soft); }
.overview-meal-label {
  min-height: 108px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  padding: 11px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: 5px 0 12px rgba(28,45,40,.04);
}
.overview-cell {
  min-height: 108px;
  padding: 7px;
}
.overview-empty {
  width: 100%;
  height: 100%;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed #cbdad5;
  border-radius: 11px;
  background: var(--bg);
  color: var(--text-3);
  font-size: 10px;
  cursor: pointer;
}
.overview-empty svg { width: 18px; height: 18px; }
.overview-recipe {
  position: relative;
  height: 100%;
  min-height: 92px;
  padding: 7px;
  border-radius: 11px;
  background: var(--bg);
  cursor: pointer;
}
.overview-thumb {
  width: 100%;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  background: var(--surface-strong);
}
.overview-thumb img { width: 100%; height: 100%; object-fit: cover; }
.overview-thumb svg { width: 20px; height: 20px; color: var(--text-3); }
.overview-title {
  margin-top: 7px;
  padding-right: 20px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.overview-remove {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: rgba(255,255,255,.9);
  color: var(--text-3);
  cursor: pointer;
}
.overview-remove svg { width: 13px; height: 13px; }
.overview-hint {
  margin: 1px 2px 0;
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.4;
}

@media (max-width: 430px) {
  .content { padding-left: 13px; padding-right: 13px; }
  .topbar { padding-left: 14px; padding-right: 14px; }
  .brand-title { font-size: 18px; }
  .quick-add { padding: 15px; gap: 9px; }
  .quick-copy { padding-right: 2px; }
  .quick-title { font-size: 15px; }
  .quick-text { font-size: 12px; }
  .quick-add .small-btn { flex: 0 0 auto; }
  .recipe-card { grid-template-columns: 94px minmax(0, 1fr); }
  .card-media { min-height: 132px; }
  .card-body { padding: 12px 11px 11px; }
  .card-title { font-size: 15px; }
  .detail-actions { grid-template-columns: 1fr; }
  .detail-actions .primary-btn,
  .detail-actions .secondary-btn { width: 100%; }
  .setting-title { font-size: 14px; }
  .setting-sub { font-size: 11px; }
  .profile-card { align-items: flex-start; }
}


/* v0.3.0: alle Titel-Text-Kombinationen sauber blockweise darstellen */
.add-option { display: flex; flex-direction: column; align-items: flex-start; }
.option-title, .option-text,
.setting-title, .setting-sub,
.profile-title, .profile-sub,
.picker-title, .picker-meta,
.planned-title, .planned-meta,
.sheet-title, .sheet-sub {
  display: block;
  width: 100%;
  min-width: 0;
}
.option-title { line-height: 1.25; }
.option-text { margin-top: 7px; line-height: 1.45; overflow-wrap: anywhere; }
.setting-copy, .profile-copy, .picker-copy, .planned-copy, .sheet-head > div { min-width: 0; }
.setting-title + .setting-sub,
.profile-title + .profile-sub,
.picker-title + .picker-meta,
.planned-title + .planned-meta { margin-top: 5px; }
.week-overview-grid { scroll-snap-type: x proximity; }
.overview-day-head, .overview-cell { scroll-snap-align: start; }
.overview-corner, .overview-meal-label { position: static; box-shadow: none; }

@media (max-width: 430px) {
  .add-option { min-height: 142px; padding: 14px; }
  .option-title { font-size: 15px; }
  .option-text { font-size: 12px; }
}

.detail-footer-actions { display: grid; grid-template-columns: 1.35fr 1fr; gap: 9px; }
.detail-footer-actions > button { width: 100%; }
@media (max-width: 430px) { .detail-footer-actions { grid-template-columns: 1fr; } }